123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166 |
- // eslint-disable-next-line no-restricted-imports
- import {browserHistory, withRouter, WithRouterProps} from 'react-router';
- import {useTheme} from '@emotion/react';
- import moment from 'moment';
- import ChartZoom from 'sentry/components/charts/chartZoom';
- import ErrorPanel from 'sentry/components/charts/errorPanel';
- import {LineChart} from 'sentry/components/charts/lineChart';
- import ReleaseSeries from 'sentry/components/charts/releaseSeries';
- import {ChartContainer, HeaderTitleLegend} from 'sentry/components/charts/styles';
- import TransitionChart from 'sentry/components/charts/transitionChart';
- import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
- import {Panel} from 'sentry/components/panels';
- import QuestionTooltip from 'sentry/components/questionTooltip';
- import {IconWarning} from 'sentry/icons';
- import {t} from 'sentry/locale';
- import {DateString, MetricsApiResponse} from 'sentry/types';
- import {Series} from 'sentry/types/echarts';
- import {WebVital} from 'sentry/utils/fields';
- import getDynamicText from 'sentry/utils/getDynamicText';
- import {replaceSeriesName, transformEventStatsSmoothed} from '../trends/utils';
- import {ViewProps} from '../types';
- import {getMaxOfSeries, getVitalChartDefinitions, getVitalChartTitle} from './utils';
- type Props = WithRouterProps &
- Omit<ViewProps, 'query' | 'start' | 'end'> & {
- end: DateString | null;
- errored: boolean;
- field: string;
- loading: boolean;
- reloading: boolean;
- response: MetricsApiResponse | null;
- start: DateString | null;
- vital: WebVital;
- };
- function VitalChartMetrics({
- reloading,
- loading,
- response,
- errored,
- statsPeriod,
- start,
- end,
- project,
- environment,
- field,
- vital,
- router,
- location,
- }: Props) {
- const theme = useTheme();
- const {utc, legend, vitalPoor, markLines, chartOptions} = getVitalChartDefinitions({
- theme,
- location,
- vital,
- yAxis: field,
- });
- function handleLegendSelectChanged(legendChange: {
- name: string;
- selected: Record<string, boolean>;
- type: string;
- }) {
- const {selected} = legendChange;
- const unselected = Object.keys(selected).filter(key => !selected[key]);
- const to = {
- ...location,
- query: {
- ...location.query,
- unselectedSeries: unselected,
- },
- };
- browserHistory.push(to);
- }
- return (
- <Panel>
- <ChartContainer>
- <HeaderTitleLegend>
- {getVitalChartTitle(vital)}
- <QuestionTooltip
- size="sm"
- position="top"
- title={t(`The durations shown should fall under the vital threshold.`)}
- />
- </HeaderTitleLegend>
- <ChartZoom router={router} period={statsPeriod} start={start} end={end} utc={utc}>
- {zoomRenderProps => {
- if (errored) {
- return (
- <ErrorPanel>
- <IconWarning color="gray500" size="lg" />
- </ErrorPanel>
- );
- }
- const data = response?.groups.map(group => ({
- seriesName: field,
- data: response.intervals.map((intervalValue, intervalIndex) => ({
- name: moment(intervalValue).valueOf(),
- value: group.series ? group.series[field][intervalIndex] : 0,
- })),
- })) as Series[] | undefined;
- const colors = (data && theme.charts.getColorPalette(data.length - 2)) || [];
- const {smoothedResults} = transformEventStatsSmoothed(data);
- const smoothedSeries = smoothedResults
- ? smoothedResults.map(({seriesName, ...rest}, i: number) => {
- return {
- seriesName: replaceSeriesName(seriesName) || 'p75',
- ...rest,
- color: colors[i],
- lineStyle: {
- opacity: 1,
- width: 2,
- },
- };
- })
- : [];
- const seriesMax = getMaxOfSeries(smoothedSeries);
- const yAxisMax = Math.max(seriesMax, vitalPoor);
- chartOptions.yAxis!.max = yAxisMax * 1.1;
- return (
- <ReleaseSeries
- start={start}
- end={end}
- period={statsPeriod}
- utc={utc}
- projects={project}
- environments={environment}
- >
- {({releaseSeries}) => (
- <TransitionChart loading={loading} reloading={reloading}>
- <TransparentLoadingMask visible={reloading} />
- {getDynamicText({
- value: (
- <LineChart
- {...zoomRenderProps}
- {...chartOptions}
- legend={legend}
- onLegendSelectChanged={handleLegendSelectChanged}
- series={[...markLines, ...releaseSeries, ...smoothedSeries]}
- />
- ),
- fixed: 'Web Vitals Chart',
- })}
- </TransitionChart>
- )}
- </ReleaseSeries>
- );
- }}
- </ChartZoom>
- </ChartContainer>
- </Panel>
- );
- }
- export default withRouter(VitalChartMetrics);
|