throughputChart.tsx 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. import type {Series} from 'sentry/types/echarts';
  2. import {RateUnit} from 'sentry/utils/discover/fields';
  3. import {formatRate} from 'sentry/utils/formatters';
  4. import {CHART_HEIGHT} from 'sentry/views/performance/database/settings';
  5. import {THROUGHPUT_COLOR} from 'sentry/views/starfish/colours';
  6. import Chart, {ChartType} from 'sentry/views/starfish/components/chart';
  7. import ChartPanel from 'sentry/views/starfish/components/chartPanel';
  8. import {getThroughputChartTitle} from 'sentry/views/starfish/views/spans/types';
  9. interface Props {
  10. isLoading: boolean;
  11. series: Series;
  12. error?: Error | null;
  13. }
  14. export function ThroughputChart({series, isLoading, error}: Props) {
  15. return (
  16. <ChartPanel title={getThroughputChartTitle('http')}>
  17. <Chart
  18. height={CHART_HEIGHT}
  19. grid={{
  20. left: '0',
  21. right: '0',
  22. top: '8px',
  23. bottom: '0',
  24. }}
  25. data={[series]}
  26. loading={isLoading}
  27. error={error}
  28. chartColors={[THROUGHPUT_COLOR]}
  29. type={ChartType.LINE}
  30. aggregateOutputFormat="rate"
  31. rateUnit={RateUnit.PER_MINUTE}
  32. tooltipFormatterOptions={{
  33. valueFormatter: value => formatRate(value, RateUnit.PER_MINUTE),
  34. }}
  35. />
  36. </ChartPanel>
  37. );
  38. }