miniGraph.tsx 7.5 KB

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