miniGraph.tsx 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. import * as React from 'react';
  2. import {withTheme} from '@emotion/react';
  3. import styled from '@emotion/styled';
  4. import {Location} from 'history';
  5. import isEqual from 'lodash/isEqual';
  6. import {Client} from 'app/api';
  7. import AreaChart from 'app/components/charts/areaChart';
  8. import BarChart from 'app/components/charts/barChart';
  9. import EventsRequest from 'app/components/charts/eventsRequest';
  10. import LineChart from 'app/components/charts/lineChart';
  11. import {getInterval} from 'app/components/charts/utils';
  12. import LoadingContainer from 'app/components/loading/loadingContainer';
  13. import LoadingIndicator from 'app/components/loadingIndicator';
  14. import {IconWarning} from 'app/icons';
  15. import {Organization} from 'app/types';
  16. import {Series} from 'app/types/echarts';
  17. import {getUtcToLocalDateObject} from 'app/utils/dates';
  18. import {axisLabelFormatter} from 'app/utils/discover/charts';
  19. import EventView from 'app/utils/discover/eventView';
  20. import {aggregateMultiPlotType, PlotType} from 'app/utils/discover/fields';
  21. import {DisplayModes, TOP_N} from 'app/utils/discover/types';
  22. import {decodeScalar} from 'app/utils/queryString';
  23. import {Theme} from 'app/utils/theme';
  24. import withApi from 'app/utils/withApi';
  25. type Props = {
  26. theme: Theme;
  27. organization: Organization;
  28. eventView: EventView;
  29. api: Client;
  30. location: Location;
  31. referrer?: string;
  32. };
  33. class MiniGraph extends React.Component<Props> {
  34. shouldComponentUpdate(nextProps) {
  35. // We pay for the cost of the deep comparison here since it is cheaper
  36. // than the cost for rendering the graph, which can take ~200ms to ~300ms to
  37. // render.
  38. return !isEqual(this.getRefreshProps(this.props), this.getRefreshProps(nextProps));
  39. }
  40. getRefreshProps(props: Props) {
  41. // get props that are relevant to the API payload for the graph
  42. const {organization, location, eventView} = props;
  43. const apiPayload = eventView.getEventsAPIPayload(location);
  44. const query = apiPayload.query;
  45. const start = apiPayload.start ? getUtcToLocalDateObject(apiPayload.start) : null;
  46. const end = apiPayload.end ? getUtcToLocalDateObject(apiPayload.end) : null;
  47. const period: string | undefined = apiPayload.statsPeriod as any;
  48. const display = eventView.getDisplayMode();
  49. const isTopEvents =
  50. display === DisplayModes.TOP5 || display === DisplayModes.DAILYTOP5;
  51. const isDaily = display === DisplayModes.DAILYTOP5 || display === DisplayModes.DAILY;
  52. const field = isTopEvents ? apiPayload.field : undefined;
  53. const topEvents = isTopEvents ? TOP_N : undefined;
  54. const orderby = isTopEvents ? decodeScalar(apiPayload.sort) : undefined;
  55. const interval = isDaily ? '1d' : getInterval({start, end, period}, 'high');
  56. return {
  57. organization,
  58. apiPayload,
  59. query,
  60. start,
  61. end,
  62. period,
  63. interval,
  64. project: eventView.project,
  65. environment: eventView.environment,
  66. yAxis: eventView.getYAxis(),
  67. field,
  68. topEvents,
  69. orderby,
  70. showDaily: isDaily,
  71. expired: eventView.expired,
  72. name: eventView.name,
  73. };
  74. }
  75. getChartType({
  76. showDaily,
  77. yAxis,
  78. timeseriesData,
  79. }: {
  80. showDaily: boolean;
  81. yAxis: string;
  82. timeseriesData: Series[];
  83. }): PlotType {
  84. if (showDaily) {
  85. return 'bar';
  86. }
  87. if (timeseriesData.length > 1) {
  88. switch (aggregateMultiPlotType(yAxis)) {
  89. case 'line':
  90. return 'line';
  91. case 'area':
  92. return 'area';
  93. default:
  94. throw new Error(`Unknown multi plot type for ${yAxis}`);
  95. }
  96. }
  97. return 'area';
  98. }
  99. getChartComponent(
  100. chartType: PlotType
  101. ): React.ComponentType<BarChart['props']> | React.ComponentType<AreaChart['props']> {
  102. switch (chartType) {
  103. case 'bar':
  104. return BarChart;
  105. case 'line':
  106. return LineChart;
  107. case 'area':
  108. return AreaChart;
  109. default:
  110. throw new Error(`Unknown multi plot type for ${chartType}`);
  111. }
  112. }
  113. render() {
  114. const {theme, api, referrer} = this.props;
  115. const {
  116. query,
  117. start,
  118. end,
  119. period,
  120. interval,
  121. organization,
  122. project,
  123. environment,
  124. yAxis,
  125. field,
  126. topEvents,
  127. orderby,
  128. showDaily,
  129. expired,
  130. name,
  131. } = this.getRefreshProps(this.props);
  132. return (
  133. <EventsRequest
  134. organization={organization}
  135. api={api}
  136. query={query}
  137. start={start}
  138. end={end}
  139. period={period}
  140. interval={interval}
  141. project={project as number[]}
  142. environment={environment as string[]}
  143. includePrevious={false}
  144. yAxis={yAxis}
  145. field={field}
  146. topEvents={topEvents}
  147. orderby={orderby}
  148. expired={expired}
  149. name={name}
  150. referrer={referrer}
  151. partial
  152. >
  153. {({loading, timeseriesData, results, errored}) => {
  154. if (errored) {
  155. return (
  156. <StyledGraphContainer>
  157. <IconWarning color="gray300" size="md" />
  158. </StyledGraphContainer>
  159. );
  160. }
  161. if (loading) {
  162. return (
  163. <StyledGraphContainer>
  164. <LoadingIndicator mini />
  165. </StyledGraphContainer>
  166. );
  167. }
  168. const allSeries = timeseriesData ?? results ?? [];
  169. const chartType = this.getChartType({
  170. showDaily,
  171. yAxis,
  172. timeseriesData: allSeries,
  173. });
  174. const data = allSeries.map(series => ({
  175. ...series,
  176. lineStyle: {
  177. opacity: chartType === 'line' ? 1 : 0,
  178. },
  179. smooth: true,
  180. }));
  181. const chartOptions = {
  182. colors: allSeries.length
  183. ? [...theme.charts.getColorPalette(allSeries.length - 2)]
  184. : undefined,
  185. height: 100,
  186. series: [...data],
  187. xAxis: {
  188. show: false,
  189. axisPointer: {
  190. show: false,
  191. },
  192. },
  193. yAxis: {
  194. show: true,
  195. axisLine: {
  196. show: false,
  197. },
  198. axisLabel: {
  199. color: theme.chartLabel,
  200. fontFamily: theme.text.family,
  201. fontSize: 12,
  202. formatter: (value: number) => axisLabelFormatter(value, yAxis, true),
  203. inside: true,
  204. showMinLabel: false,
  205. showMaxLabel: false,
  206. },
  207. splitNumber: 3,
  208. splitLine: {
  209. show: false,
  210. },
  211. zlevel: theme.zIndex.header,
  212. },
  213. tooltip: {
  214. show: false,
  215. },
  216. toolBox: {
  217. show: false,
  218. },
  219. grid: {
  220. left: 0,
  221. top: 0,
  222. right: 0,
  223. bottom: 0,
  224. containLabel: false,
  225. },
  226. stacked: typeof topEvents === 'number' && topEvents > 0,
  227. };
  228. const Component = this.getChartComponent(chartType);
  229. return <Component {...chartOptions} />;
  230. }}
  231. </EventsRequest>
  232. );
  233. }
  234. }
  235. const StyledGraphContainer = styled(props => (
  236. <LoadingContainer {...props} maskBackgroundColor="transparent" />
  237. ))`
  238. height: 100px;
  239. display: flex;
  240. justify-content: center;
  241. align-items: center;
  242. `;
  243. export default withApi(withTheme(MiniGraph));