profilesSummaryChart.tsx 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. import {useMemo} from 'react';
  2. import {useTheme} from '@emotion/react';
  3. import styled from '@emotion/styled';
  4. import type {AreaChartProps} from 'sentry/components/charts/areaChart';
  5. import {AreaChart} from 'sentry/components/charts/areaChart';
  6. import ChartZoom from 'sentry/components/charts/chartZoom';
  7. import {t} from 'sentry/locale';
  8. import {space} from 'sentry/styles/space';
  9. import type {PageFilters} from 'sentry/types/core';
  10. import type {Series} from 'sentry/types/echarts';
  11. import {axisLabelFormatter, tooltipFormatter} from 'sentry/utils/discover/charts';
  12. import {aggregateOutputType} from 'sentry/utils/discover/fields';
  13. import {useProfileEventsStats} from 'sentry/utils/profiling/hooks/useProfileEventsStats';
  14. import useRouter from 'sentry/utils/useRouter';
  15. // We want p99 to be before p75 because echarts renders the series in order.
  16. // So if p75 is before p99, p99 will be rendered on top of p75 which will
  17. // cover it up.
  18. const SERIES_ORDER = ['count()', 'p99()', 'p95()', 'p75()'] as const;
  19. interface ProfileSummaryChartProps {
  20. query: string;
  21. referrer: string;
  22. hideCount?: boolean;
  23. selection?: PageFilters;
  24. }
  25. export function ProfilesSummaryChart({
  26. query,
  27. referrer,
  28. selection,
  29. hideCount,
  30. }: ProfileSummaryChartProps) {
  31. const router = useRouter();
  32. const theme = useTheme();
  33. const seriesOrder = useMemo(() => {
  34. if (hideCount) {
  35. return SERIES_ORDER.filter(s => s !== 'count()');
  36. }
  37. return SERIES_ORDER;
  38. }, [hideCount]);
  39. const profileStats = useProfileEventsStats({
  40. dataset: 'profiles',
  41. query,
  42. referrer,
  43. yAxes: seriesOrder,
  44. });
  45. const series: Series[] = useMemo(() => {
  46. if (profileStats.status !== 'success') {
  47. return [];
  48. }
  49. // the timestamps in the response is in seconds but echarts expects
  50. // a timestamp in milliseconds, so multiply by 1e3 to do the conversion
  51. const timestamps = profileStats.data.timestamps.map(ts => ts * 1e3);
  52. const allSeries = profileStats.data.data
  53. .filter(rawData => seriesOrder.includes(rawData.axis))
  54. .map(rawData => {
  55. if (timestamps.length !== rawData.values.length) {
  56. throw new Error('Invalid stats response');
  57. }
  58. if (rawData.axis === 'count()') {
  59. return {
  60. data: rawData.values.map((value, i) => ({
  61. name: timestamps[i]!,
  62. // the response value contains nulls when no data is
  63. // available, use 0 to represent it
  64. value: value ?? 0,
  65. })),
  66. seriesName: rawData.axis,
  67. xAxisIndex: 0,
  68. yAxisIndex: 0,
  69. };
  70. }
  71. return {
  72. data: rawData.values.map((value, i) => ({
  73. name: timestamps[i]!,
  74. // the response value contains nulls when no data
  75. // is available, use 0 to represent it
  76. value: value ?? 0,
  77. })),
  78. seriesName: rawData.axis,
  79. xAxisIndex: 1,
  80. yAxisIndex: 1,
  81. };
  82. });
  83. allSeries.sort((a, b) => {
  84. const idxA = seriesOrder.indexOf(a.seriesName as any);
  85. const idxB = seriesOrder.indexOf(b.seriesName as any);
  86. return idxA - idxB;
  87. });
  88. return allSeries;
  89. }, [profileStats, seriesOrder]);
  90. const chartProps: AreaChartProps = useMemo(() => {
  91. const baseProps: AreaChartProps = {
  92. height: 150,
  93. series,
  94. grid: [
  95. {
  96. top: '16px',
  97. left: '16px',
  98. right: '8px',
  99. bottom: '16px',
  100. },
  101. {
  102. top: '16px',
  103. left: '8px',
  104. right: '16px',
  105. bottom: '8px',
  106. },
  107. ],
  108. legend: {
  109. right: 16,
  110. top: 0,
  111. data: seriesOrder.slice(),
  112. },
  113. tooltip: {
  114. valueFormatter: (value, label) =>
  115. tooltipFormatter(value, aggregateOutputType(label)),
  116. },
  117. axisPointer: {
  118. link: [
  119. {
  120. xAxisIndex: [0, 1],
  121. },
  122. ],
  123. },
  124. xAxes: [
  125. {
  126. show: !hideCount,
  127. gridIndex: 0,
  128. type: 'time' as const,
  129. },
  130. {
  131. gridIndex: 1,
  132. type: 'time' as const,
  133. },
  134. ],
  135. yAxes: [
  136. {
  137. gridIndex: 0,
  138. scale: true,
  139. axisLabel: {
  140. color: theme.chartLabel,
  141. formatter(value: number) {
  142. return axisLabelFormatter(value, 'integer');
  143. },
  144. },
  145. },
  146. {
  147. gridIndex: 1,
  148. scale: true,
  149. axisLabel: {
  150. color: theme.chartLabel,
  151. formatter(value: number) {
  152. return axisLabelFormatter(value, 'duration');
  153. },
  154. },
  155. },
  156. ],
  157. };
  158. return baseProps;
  159. }, [hideCount, series, seriesOrder, theme.chartLabel]);
  160. return (
  161. <ProfilesChartContainer>
  162. <ProfilesChartTitle>{t('Durations')}</ProfilesChartTitle>
  163. <ChartZoom router={router} {...selection?.datetime}>
  164. {zoomRenderProps => (
  165. <AreaChart
  166. {...chartProps}
  167. isGroupedByDate
  168. showTimeInTooltip
  169. {...zoomRenderProps}
  170. />
  171. )}
  172. </ChartZoom>
  173. </ProfilesChartContainer>
  174. );
  175. }
  176. const ProfilesChartTitle = styled('div')`
  177. font-size: ${p => p.theme.fontSizeSmall};
  178. color: ${p => p.theme.textColor};
  179. font-weight: ${p => p.theme.fontWeightBold};
  180. padding: ${space(0.25)} ${space(1)};
  181. `;
  182. const ProfilesChartContainer = styled('div')`
  183. background-color: ${p => p.theme.background};
  184. border-bottom: 1px solid ${p => p.theme.border};
  185. `;