chart.tsx 5.4 KB

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