resultsChart.tsx 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. import {Component, Fragment} from 'react';
  2. import {InjectedRouter} from 'react-router';
  3. import styled from '@emotion/styled';
  4. import {Location} from 'history';
  5. import isEqual from 'lodash/isEqual';
  6. import {Client} from 'sentry/api';
  7. import {AreaChart} from 'sentry/components/charts/areaChart';
  8. import {BarChart} from 'sentry/components/charts/barChart';
  9. import EventsChart from 'sentry/components/charts/eventsChart';
  10. import {getInterval, getPreviousSeriesName} from 'sentry/components/charts/utils';
  11. import {normalizeDateTimeParams} from 'sentry/components/organizations/pageFilters/parse';
  12. import Panel from 'sentry/components/panels/panel';
  13. import Placeholder from 'sentry/components/placeholder';
  14. import {t} from 'sentry/locale';
  15. import {Organization, SelectValue} from 'sentry/types';
  16. import {valueIsEqual} from 'sentry/utils';
  17. import {CustomMeasurementCollection} from 'sentry/utils/customMeasurements/customMeasurements';
  18. import {CustomMeasurementsContext} from 'sentry/utils/customMeasurements/customMeasurementsContext';
  19. import {getUtcToLocalDateObject} from 'sentry/utils/dates';
  20. import EventView from 'sentry/utils/discover/eventView';
  21. import {getAggregateArg, stripEquationPrefix} from 'sentry/utils/discover/fields';
  22. import {
  23. DisplayModes,
  24. MULTI_Y_AXIS_SUPPORTED_DISPLAY_MODES,
  25. TOP_EVENT_MODES,
  26. TOP_N,
  27. } from 'sentry/utils/discover/types';
  28. import getDynamicText from 'sentry/utils/getDynamicText';
  29. import {decodeScalar} from 'sentry/utils/queryString';
  30. import withApi from 'sentry/utils/withApi';
  31. import {isCustomMeasurement} from '../dashboards/utils';
  32. import ChartFooter from './chartFooter';
  33. type ResultsChartProps = {
  34. api: Client;
  35. confirmedQuery: boolean;
  36. eventView: EventView;
  37. location: Location;
  38. organization: Organization;
  39. router: InjectedRouter;
  40. yAxisValue: string[];
  41. customMeasurements?: CustomMeasurementCollection | undefined;
  42. };
  43. class ResultsChart extends Component<ResultsChartProps> {
  44. shouldComponentUpdate(nextProps: ResultsChartProps) {
  45. const {eventView, ...restProps} = this.props;
  46. const {eventView: nextEventView, ...restNextProps} = nextProps;
  47. if (!eventView.isEqualTo(nextEventView)) {
  48. return true;
  49. }
  50. return !isEqual(restProps, restNextProps);
  51. }
  52. render() {
  53. const {
  54. api,
  55. eventView,
  56. location,
  57. organization,
  58. router,
  59. confirmedQuery,
  60. yAxisValue,
  61. customMeasurements,
  62. } = this.props;
  63. const hasPerformanceChartInterpolation = organization.features.includes(
  64. 'performance-chart-interpolation'
  65. );
  66. const globalSelection = eventView.getPageFilters();
  67. const start = globalSelection.datetime.start
  68. ? getUtcToLocalDateObject(globalSelection.datetime.start)
  69. : null;
  70. const end = globalSelection.datetime.end
  71. ? getUtcToLocalDateObject(globalSelection.datetime.end)
  72. : null;
  73. const {utc} = normalizeDateTimeParams(location.query);
  74. const apiPayload = eventView.getEventsAPIPayload(location);
  75. const display = eventView.getDisplayMode();
  76. const isTopEvents =
  77. display === DisplayModes.TOP5 || display === DisplayModes.DAILYTOP5;
  78. const isPeriod = display === DisplayModes.DEFAULT || display === DisplayModes.TOP5;
  79. const isDaily = display === DisplayModes.DAILYTOP5 || display === DisplayModes.DAILY;
  80. const isPrevious = display === DisplayModes.PREVIOUS;
  81. const referrer = `api.discover.${display}-chart`;
  82. const topEvents = eventView.topEvents ? parseInt(eventView.topEvents, 10) : TOP_N;
  83. const aggregateParam = getAggregateArg(yAxisValue[0]) || '';
  84. const customPerformanceMetricFieldType = isCustomMeasurement(aggregateParam)
  85. ? customMeasurements
  86. ? customMeasurements[aggregateParam]?.fieldType
  87. : null
  88. : null;
  89. const chartComponent =
  90. display === DisplayModes.BAR
  91. ? BarChart
  92. : customPerformanceMetricFieldType === 'size' && isTopEvents
  93. ? AreaChart
  94. : undefined;
  95. const interval =
  96. display === DisplayModes.BAR
  97. ? getInterval(
  98. {
  99. start,
  100. end,
  101. period: globalSelection.datetime.period,
  102. utc: utc === 'true',
  103. },
  104. 'low'
  105. )
  106. : eventView.interval;
  107. const seriesLabels = yAxisValue.map(stripEquationPrefix);
  108. const disableableSeries = [
  109. ...seriesLabels,
  110. ...seriesLabels.map(getPreviousSeriesName),
  111. ];
  112. return (
  113. <Fragment>
  114. {getDynamicText({
  115. value: (
  116. <EventsChart
  117. api={api}
  118. router={router}
  119. query={apiPayload.query}
  120. dataset={apiPayload.dataset}
  121. organization={organization}
  122. showLegend
  123. yAxis={yAxisValue}
  124. projects={globalSelection.projects}
  125. environments={globalSelection.environments}
  126. start={start}
  127. end={end}
  128. period={globalSelection.datetime.period}
  129. disablePrevious={!isPrevious}
  130. disableReleases={!isPeriod}
  131. field={isTopEvents ? apiPayload.field : undefined}
  132. interval={interval}
  133. showDaily={isDaily}
  134. topEvents={isTopEvents ? topEvents : undefined}
  135. orderby={isTopEvents ? decodeScalar(apiPayload.sort) : undefined}
  136. utc={utc === 'true'}
  137. confirmedQuery={confirmedQuery}
  138. withoutZerofill={hasPerformanceChartInterpolation}
  139. chartComponent={chartComponent}
  140. referrer={referrer}
  141. fromDiscover
  142. disableableSeries={disableableSeries}
  143. />
  144. ),
  145. fixed: <Placeholder height="200px" testId="skeleton-ui" />,
  146. })}
  147. </Fragment>
  148. );
  149. }
  150. }
  151. type ContainerProps = {
  152. api: Client;
  153. confirmedQuery: boolean;
  154. eventView: EventView;
  155. location: Location;
  156. onAxisChange: (value: string[]) => void;
  157. onDisplayChange: (value: string) => void;
  158. onIntervalChange: (value: string | undefined) => void;
  159. onTopEventsChange: (value: string) => void;
  160. organization: Organization;
  161. router: InjectedRouter;
  162. // chart footer props
  163. total: number | null;
  164. yAxis: string[];
  165. };
  166. type ContainerState = {
  167. yAxisOptions: SelectValue<string>[];
  168. };
  169. class ResultsChartContainer extends Component<ContainerProps, ContainerState> {
  170. state: ContainerState = {
  171. yAxisOptions: this.props.eventView.getYAxisOptions(),
  172. };
  173. UNSAFE_componentWillReceiveProps(nextProps) {
  174. const yAxisOptions = this.props.eventView.getYAxisOptions();
  175. const nextYAxisOptions = nextProps.eventView.getYAxisOptions();
  176. if (!valueIsEqual(yAxisOptions, nextYAxisOptions, true)) {
  177. this.setState({yAxisOptions: nextYAxisOptions});
  178. }
  179. }
  180. shouldComponentUpdate(nextProps: ContainerProps) {
  181. const {eventView, ...restProps} = this.props;
  182. const {eventView: nextEventView, ...restNextProps} = nextProps;
  183. if (
  184. !eventView.isEqualTo(nextEventView) ||
  185. this.props.confirmedQuery !== nextProps.confirmedQuery
  186. ) {
  187. return true;
  188. }
  189. return !isEqual(restProps, restNextProps);
  190. }
  191. render() {
  192. const {
  193. api,
  194. eventView,
  195. location,
  196. router,
  197. total,
  198. onAxisChange,
  199. onDisplayChange,
  200. onIntervalChange,
  201. onTopEventsChange,
  202. organization,
  203. confirmedQuery,
  204. yAxis,
  205. } = this.props;
  206. const {yAxisOptions} = this.state;
  207. const hasQueryFeature = organization.features.includes('discover-query');
  208. const displayOptions = eventView
  209. .getDisplayOptions()
  210. .filter(opt => {
  211. // top5 modes are only available with larger packages in saas.
  212. // We remove instead of disable here as showing tooltips in dropdown
  213. // menus is clunky.
  214. if (TOP_EVENT_MODES.includes(opt.value) && !hasQueryFeature) {
  215. return false;
  216. }
  217. return true;
  218. })
  219. .map(opt => {
  220. // Can only use default display or total daily with multi y axis
  221. if (TOP_EVENT_MODES.includes(opt.value)) {
  222. opt.label = DisplayModes.TOP5 === opt.value ? 'Top Period' : 'Top Daily';
  223. }
  224. if (
  225. yAxis.length > 1 &&
  226. !MULTI_Y_AXIS_SUPPORTED_DISPLAY_MODES.includes(opt.value as DisplayModes)
  227. ) {
  228. return {
  229. ...opt,
  230. disabled: true,
  231. tooltip: t(
  232. 'Change the Y-Axis dropdown to display only 1 function to use this view.'
  233. ),
  234. };
  235. }
  236. return opt;
  237. });
  238. return (
  239. <StyledPanel>
  240. {(yAxis.length > 0 && (
  241. <CustomMeasurementsContext.Consumer>
  242. {contextValue => (
  243. <ResultsChart
  244. api={api}
  245. eventView={eventView}
  246. location={location}
  247. organization={organization}
  248. router={router}
  249. confirmedQuery={confirmedQuery}
  250. yAxisValue={yAxis}
  251. customMeasurements={contextValue?.customMeasurements}
  252. />
  253. )}
  254. </CustomMeasurementsContext.Consumer>
  255. )) || <NoChartContainer>{t('No Y-Axis selected.')}</NoChartContainer>}
  256. <ChartFooter
  257. total={total}
  258. yAxisValue={yAxis}
  259. yAxisOptions={yAxisOptions}
  260. eventView={eventView}
  261. onAxisChange={onAxisChange}
  262. displayOptions={displayOptions}
  263. displayMode={eventView.getDisplayMode()}
  264. onDisplayChange={onDisplayChange}
  265. onTopEventsChange={onTopEventsChange}
  266. onIntervalChange={onIntervalChange}
  267. topEvents={eventView.topEvents ?? TOP_N.toString()}
  268. />
  269. </StyledPanel>
  270. );
  271. }
  272. }
  273. export default withApi(ResultsChartContainer);
  274. const StyledPanel = styled(Panel)`
  275. @media (min-width: ${p => p.theme.breakpoints.large}) {
  276. margin: 0;
  277. }
  278. `;
  279. const NoChartContainer = styled('div')<{height?: string}>`
  280. display: flex;
  281. flex-direction: column;
  282. justify-content: center;
  283. align-items: center;
  284. flex: 1;
  285. flex-shrink: 0;
  286. overflow: hidden;
  287. height: ${p => p.height || '200px'};
  288. position: relative;
  289. border-color: transparent;
  290. margin-bottom: 0;
  291. color: ${p => p.theme.gray300};
  292. font-size: ${p => p.theme.fontSizeExtraLarge};
  293. `;