throughputChart.tsx 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738
  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 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. }
  13. export function ThroughputChart({series, isLoading}: Props) {
  14. return (
  15. <ChartPanel title={getThroughputChartTitle('db')}>
  16. <Chart
  17. height={CHART_HEIGHT}
  18. grid={{
  19. left: '0',
  20. right: '0',
  21. top: '8px',
  22. bottom: '0',
  23. }}
  24. data={[series]}
  25. loading={isLoading}
  26. chartColors={[THROUGHPUT_COLOR]}
  27. isLineChart
  28. aggregateOutputFormat="rate"
  29. rateUnit={RateUnit.PER_MINUTE}
  30. tooltipFormatterOptions={{
  31. valueFormatter: value => formatRate(value, RateUnit.PER_MINUTE),
  32. }}
  33. />
  34. </ChartPanel>
  35. );
  36. }