chart.tsx 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. import {InjectedRouter} from 'react-router';
  2. import {useTheme} from '@emotion/react';
  3. import max from 'lodash/max';
  4. import min from 'lodash/min';
  5. import {AreaChart, AreaChartProps} from 'sentry/components/charts/areaChart';
  6. import ChartZoom from 'sentry/components/charts/chartZoom';
  7. import {LineChart} from 'sentry/components/charts/lineChart';
  8. import {DateString} from 'sentry/types';
  9. import {Series} from 'sentry/types/echarts';
  10. import {
  11. axisLabelFormatter,
  12. getDurationUnit,
  13. tooltipFormatter,
  14. } from 'sentry/utils/discover/charts';
  15. import {aggregateOutputType} from 'sentry/utils/discover/fields';
  16. type Props = {
  17. data: Series[];
  18. end: DateString;
  19. loading: boolean;
  20. router: InjectedRouter;
  21. start: DateString;
  22. statsPeriod: string | null | undefined;
  23. utc: boolean;
  24. chartColors?: string[];
  25. definedAxisTicks?: number;
  26. disableMultiAxis?: boolean;
  27. disableXAxis?: boolean;
  28. grid?: AreaChartProps['grid'];
  29. height?: number;
  30. isLineChart?: boolean;
  31. previousData?: Series[];
  32. };
  33. // adapted from https://stackoverflow.com/questions/11397239/rounding-up-for-a-graph-maximum
  34. function computeAxisMax(data: Series[]) {
  35. // assumes min is 0
  36. const valuesDict = data.map(value => value.data.map(point => point.value));
  37. const maxValue = max(valuesDict.map(max)) as number;
  38. if (maxValue <= 1) {
  39. return 1;
  40. }
  41. const power = Math.log10(maxValue);
  42. const magnitude = min([max([10 ** (power - Math.floor(power)), 0]), 10]) as number;
  43. let scale: number;
  44. if (magnitude <= 2.5) {
  45. scale = 0.2;
  46. } else if (magnitude <= 5) {
  47. scale = 0.5;
  48. } else if (magnitude <= 7.5) {
  49. scale = 1.0;
  50. } else {
  51. scale = 2.0;
  52. }
  53. const step = 10 ** Math.floor(power) * scale;
  54. return Math.round(Math.ceil(maxValue / step) * step);
  55. }
  56. function Chart({
  57. data,
  58. previousData,
  59. router,
  60. statsPeriod,
  61. start,
  62. end,
  63. utc,
  64. loading,
  65. height,
  66. grid,
  67. disableMultiAxis,
  68. disableXAxis,
  69. definedAxisTicks,
  70. chartColors,
  71. isLineChart,
  72. }: Props) {
  73. const theme = useTheme();
  74. if (!data || data.length <= 0) {
  75. return null;
  76. }
  77. const colors = chartColors ?? theme.charts.getColorPalette(4);
  78. const durationOnly = data.every(
  79. value => aggregateOutputType(value.seriesName) === 'duration'
  80. );
  81. const dataMax = durationOnly ? computeAxisMax(data) : undefined;
  82. const xAxes = disableMultiAxis
  83. ? undefined
  84. : [
  85. {
  86. gridIndex: 0,
  87. type: 'time' as const,
  88. },
  89. {
  90. gridIndex: 1,
  91. type: 'time' as const,
  92. },
  93. ];
  94. const durationUnit = getDurationUnit(data);
  95. const yAxes = disableMultiAxis
  96. ? [
  97. {
  98. minInterval: durationUnit,
  99. splitNumber: definedAxisTicks,
  100. axisLabel: {
  101. color: theme.chartLabel,
  102. formatter(value: number) {
  103. return axisLabelFormatter(
  104. value,
  105. aggregateOutputType(data[0].seriesName),
  106. undefined,
  107. durationUnit
  108. );
  109. },
  110. },
  111. },
  112. ]
  113. : [
  114. {
  115. gridIndex: 0,
  116. scale: true,
  117. minInterval: durationUnit,
  118. max: dataMax,
  119. axisLabel: {
  120. color: theme.chartLabel,
  121. formatter(value: number) {
  122. return axisLabelFormatter(
  123. value,
  124. aggregateOutputType(data[0].seriesName),
  125. undefined,
  126. durationUnit
  127. );
  128. },
  129. },
  130. },
  131. {
  132. gridIndex: 1,
  133. scale: true,
  134. max: dataMax,
  135. minInterval: durationUnit,
  136. axisLabel: {
  137. color: theme.chartLabel,
  138. formatter(value: number) {
  139. return axisLabelFormatter(
  140. value,
  141. aggregateOutputType(data[1].seriesName),
  142. undefined,
  143. durationUnit
  144. );
  145. },
  146. },
  147. },
  148. ];
  149. const axisPointer = disableMultiAxis
  150. ? undefined
  151. : {
  152. // Link the two series x-axis together.
  153. link: [{xAxisIndex: [0, 1]}],
  154. };
  155. const areaChartProps = {
  156. seriesOptions: {
  157. showSymbol: false,
  158. },
  159. grid: disableMultiAxis
  160. ? grid
  161. : [
  162. {
  163. top: '8px',
  164. left: '24px',
  165. right: '52%',
  166. bottom: '16px',
  167. },
  168. {
  169. top: '8px',
  170. left: '52%',
  171. right: '24px',
  172. bottom: '16px',
  173. },
  174. ],
  175. axisPointer,
  176. xAxes,
  177. yAxes,
  178. utc,
  179. isGroupedByDate: true,
  180. showTimeInTooltip: true,
  181. colors: [colors[0], colors[1]] as string[],
  182. tooltip: {
  183. valueFormatter: (value, seriesName) => {
  184. return tooltipFormatter(
  185. value,
  186. aggregateOutputType(data && data.length ? data[0].seriesName : seriesName)
  187. );
  188. },
  189. nameFormatter(value: string) {
  190. return value === 'epm()' ? 'tpm()' : value;
  191. },
  192. },
  193. };
  194. if (loading) {
  195. if (isLineChart) {
  196. return <LineChart height={height} series={[]} {...areaChartProps} />;
  197. }
  198. return <AreaChart height={height} series={[]} {...areaChartProps} />;
  199. }
  200. const series = data.map((values, i: number) => ({
  201. ...values,
  202. yAxisIndex: i,
  203. xAxisIndex: i,
  204. }));
  205. const xAxis = disableXAxis
  206. ? {
  207. show: false,
  208. axisLabel: {show: true, margin: 0},
  209. axisLine: {show: false},
  210. }
  211. : undefined;
  212. return (
  213. <ChartZoom
  214. router={router}
  215. period={statsPeriod}
  216. start={start}
  217. end={end}
  218. utc={utc}
  219. xAxisIndex={disableMultiAxis ? undefined : [0, 1]}
  220. >
  221. {zoomRenderProps => {
  222. if (isLineChart) {
  223. return (
  224. <LineChart
  225. height={height}
  226. {...zoomRenderProps}
  227. series={series}
  228. previousPeriod={previousData}
  229. xAxis={xAxis}
  230. yAxis={areaChartProps.yAxes[0]}
  231. tooltip={areaChartProps.tooltip}
  232. />
  233. );
  234. }
  235. return (
  236. <AreaChart
  237. height={height}
  238. {...zoomRenderProps}
  239. series={series}
  240. previousPeriod={previousData}
  241. xAxis={xAxis}
  242. {...areaChartProps}
  243. />
  244. );
  245. }}
  246. </ChartZoom>
  247. );
  248. }
  249. export default Chart;