index.tsx 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. import styled from '@emotion/styled';
  2. import {getInterval} from 'sentry/components/charts/utils';
  3. import {CompactSelect} from 'sentry/components/compactSelect';
  4. import {CHART_PALETTE} from 'sentry/constants/chartPalette';
  5. import {t} from 'sentry/locale';
  6. import {space} from 'sentry/styles/space';
  7. import {tooltipFormatter} from 'sentry/utils/discover/charts';
  8. import {MutableSearch} from 'sentry/utils/tokenizeSearch';
  9. import usePageFilters from 'sentry/utils/usePageFilters';
  10. import Chart, {ChartType} from 'sentry/views/insights/common/components/chart';
  11. import ChartPanel from 'sentry/views/insights/common/components/chartPanel';
  12. import {useSpanIndexedSeries} from 'sentry/views/insights/common/queries/useDiscoverSeries';
  13. import {CHART_HEIGHT} from 'sentry/views/insights/database/settings';
  14. import {useChartInterval} from '../hooks/useChartInterval';
  15. import {useChartType} from '../hooks/useChartType';
  16. import {useVisualize} from '../hooks/useVisualize';
  17. interface ExploreChartsProps {
  18. query: string;
  19. }
  20. const exploreChartTypeOptions = [
  21. {
  22. value: ChartType.LINE,
  23. label: t('Line'),
  24. },
  25. {
  26. value: ChartType.AREA,
  27. label: t('Area'),
  28. },
  29. {
  30. value: ChartType.BAR,
  31. label: t('Bar'),
  32. },
  33. ];
  34. // TODO: Update to support aggregate mode and multiple queries / visualizations
  35. export function ExploreCharts({query}: ExploreChartsProps) {
  36. const pageFilters = usePageFilters();
  37. const [visualize] = useVisualize();
  38. const [chartType, setChartType] = useChartType();
  39. const [interval, setInterval, intervalOptions] = useChartInterval();
  40. const series = useSpanIndexedSeries(
  41. {
  42. search: new MutableSearch(query ?? ''),
  43. yAxis: [visualize],
  44. interval: interval ?? getInterval(pageFilters.selection.datetime, 'metrics'),
  45. enabled: true,
  46. },
  47. 'api.explorer.stats'
  48. );
  49. return (
  50. <ChartContainer>
  51. <ChartPanel>
  52. <ChartHeader>
  53. <ChartTitle>{visualize}</ChartTitle>
  54. <ChartSettingsContainer>
  55. <CompactSelect
  56. size="xs"
  57. triggerProps={{prefix: t('Display')}}
  58. value={chartType}
  59. options={exploreChartTypeOptions}
  60. onChange={newChartType => setChartType(newChartType.value)}
  61. />
  62. <CompactSelect
  63. size="xs"
  64. value={interval}
  65. onChange={({value}) => setInterval(value)}
  66. triggerProps={{
  67. prefix: t('Interval'),
  68. }}
  69. options={intervalOptions}
  70. />
  71. </ChartSettingsContainer>
  72. </ChartHeader>
  73. <Chart
  74. height={CHART_HEIGHT}
  75. grid={{
  76. left: '0',
  77. right: '0',
  78. top: '8px',
  79. bottom: '0',
  80. }}
  81. data={[series.data[visualize]]}
  82. error={series.error}
  83. loading={series.isPending}
  84. chartColors={CHART_PALETTE[2]}
  85. type={chartType}
  86. aggregateOutputFormat="number"
  87. showLegend
  88. tooltipFormatterOptions={{
  89. valueFormatter: value => tooltipFormatter(value),
  90. }}
  91. />
  92. </ChartPanel>
  93. </ChartContainer>
  94. );
  95. }
  96. const ChartContainer = styled('div')`
  97. display: grid;
  98. gap: 0;
  99. grid-template-columns: 1fr;
  100. margin-bottom: ${space(3)};
  101. `;
  102. const ChartHeader = styled('div')`
  103. display: flex;
  104. align-items: flex-start;
  105. justify-content: space-between;
  106. margin-bottom: ${space(1)};
  107. `;
  108. const ChartTitle = styled('div')`
  109. ${p => p.theme.text.cardTitle}
  110. `;
  111. const ChartSettingsContainer = styled('div')`
  112. display: flex;
  113. align-items: center;
  114. gap: ${space(0.5)};
  115. `;