hitMissChart.tsx 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738
  1. import type {Series} from 'sentry/types/echarts';
  2. import {formatPercentage} from 'sentry/utils/number/formatPercentage';
  3. import {CHART_HEIGHT} from 'sentry/views/insights/cache/settings';
  4. import {AVG_COLOR} from 'sentry/views/insights/colors';
  5. import Chart, {ChartType} from 'sentry/views/insights/common/components/chart';
  6. import ChartPanel from 'sentry/views/insights/common/components/chartPanel';
  7. import {DataTitles} from 'sentry/views/insights/common/views/spans/types';
  8. type Props = {
  9. isLoading: boolean;
  10. series: Series;
  11. error?: Error | null;
  12. };
  13. export function CacheHitMissChart({series, isLoading, error}: Props) {
  14. return (
  15. <ChartPanel title={DataTitles[`cache_miss_rate()`]}>
  16. <Chart
  17. height={CHART_HEIGHT}
  18. grid={{
  19. left: '4px',
  20. right: '0',
  21. top: '8px',
  22. bottom: '0',
  23. }}
  24. data={[series]}
  25. loading={isLoading}
  26. error={error}
  27. chartColors={[AVG_COLOR]}
  28. type={ChartType.LINE}
  29. aggregateOutputFormat="percentage"
  30. tooltipFormatterOptions={{
  31. valueFormatter: value => formatPercentage(value),
  32. }}
  33. />
  34. </ChartPanel>
  35. );
  36. }