Skip to content

Commit 86aab8c

Browse files
billyvgbillyvg
committed
ref(insights): Refactor PerformanceScoreBreakdownChart
Move into its own component and parse location query itself Part of #88560
1 parent c816261 commit 86aab8c

File tree

4 files changed

+129
-118
lines changed

4 files changed

+129
-118
lines changed

‎static/app/views/insights/browser/webVitals/components/charts/performanceScoreBreakdownChart.tsx

Lines changed: 3 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,10 @@
1-
import {useTheme} from '@emotion/react';
21
import styled from '@emotion/styled';
32

4-
import {t} from 'sentry/locale';
53
import type {Series} from 'sentry/types/echarts';
6-
import {MutableSearch} from 'sentry/utils/tokenizeSearch';
74
import {ORDER} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart';
85
import type {WebVitalsScoreBreakdown} from 'sentry/views/insights/browser/webVitals/queries/storedScoreQueries/useProjectWebVitalsScoresTimeseriesQuery';
96
import type {WebVitals} from 'sentry/views/insights/browser/webVitals/types';
10-
import {getWeights} from 'sentry/views/insights/browser/webVitals/utils/getWeights';
11-
import type {BrowserType} from 'sentry/views/insights/browser/webVitals/utils/queryParameterDecoders/browserType';
12-
import {useDefaultWebVitalsQuery} from 'sentry/views/insights/browser/webVitals/utils/useDefaultQuery';
13-
import {InsightsTimeSeriesWidget} from 'sentry/views/insights/common/components/insightsTimeSeriesWidget';
14-
import {
15-
type DiscoverSeries,
16-
useMetricsSeries,
17-
} from 'sentry/views/insights/common/queries/useDiscoverSeries';
18-
import {SpanMetricsField, type SubregionCode} from 'sentry/views/insights/types';
19-
20-
import {WebVitalsWeightList} from './webVitalWeightList';
21-
22-
type Props = {
23-
browserTypes?: BrowserType[];
24-
subregions?: SubregionCode[];
25-
transaction?: string;
26-
};
7+
import {PerformanceScoreBreakdownChartWidget} from 'sentry/views/insights/common/components/widgets/performanceScoreBreakdownChartWidget';
278

289
export function formatTimeSeriesResultsToChartData(
2910
data: WebVitalsScoreBreakdown,
@@ -44,99 +25,10 @@ export function formatTimeSeriesResultsToChartData(
4425
});
4526
}
4627

47-
export function PerformanceScoreBreakdownChart({
48-
transaction,
49-
browserTypes,
50-
subregions,
51-
}: Props) {
52-
const theme = useTheme();
53-
const segmentColors = theme.chart.getColorPalette(3).slice(0, 5);
54-
const defaultQuery = useDefaultWebVitalsQuery();
55-
56-
const search = new MutableSearch(`${defaultQuery} has:measurements.score.total`);
57-
58-
if (transaction) {
59-
search.addFilterValue('transaction', transaction);
60-
}
61-
62-
if (subregions) {
63-
search.addDisjunctionFilterValues(SpanMetricsField.USER_GEO_SUBREGION, subregions);
64-
}
65-
66-
if (browserTypes) {
67-
search.addDisjunctionFilterValues(SpanMetricsField.BROWSER_NAME, browserTypes);
68-
}
69-
70-
const {
71-
data: vitalScoresData,
72-
isLoading: areVitalScoresLoading,
73-
error: vitalScoresError,
74-
} = useMetricsSeries(
75-
{
76-
search,
77-
yAxis: [
78-
'performance_score(measurements.score.lcp)',
79-
'performance_score(measurements.score.fcp)',
80-
'performance_score(measurements.score.cls)',
81-
'performance_score(measurements.score.inp)',
82-
'performance_score(measurements.score.ttfb)',
83-
'count()',
84-
],
85-
transformAliasToInputFormat: true,
86-
},
87-
'api.performance.browser.web-vitals.timeseries-scores2'
88-
);
89-
90-
const webVitalsThatHaveData: WebVitals[] = vitalScoresData
91-
? ORDER.filter(webVital => {
92-
const key = `performance_score(measurements.score.${webVital})` as const;
93-
const series = vitalScoresData[key];
94-
95-
return series.data.some(datum => datum.value > 0);
96-
})
97-
: [];
98-
99-
const weights = getWeights(webVitalsThatHaveData);
100-
101-
const allSeries: DiscoverSeries[] = vitalScoresData
102-
? ORDER.map((webVital, index) => {
103-
const key = `performance_score(measurements.score.${webVital})` as const;
104-
const series = vitalScoresData[key];
105-
106-
const scaledSeries: DiscoverSeries = {
107-
...series,
108-
data: series.data.map(datum => {
109-
return {
110-
...datum,
111-
value: datum.value * weights[webVital],
112-
};
113-
}),
114-
color: segmentColors[index],
115-
meta: {
116-
// TODO: The backend doesn't return these score fields with the "score" type yet. Fill this in manually for now.
117-
fields: {
118-
...series.meta?.fields,
119-
[key]: 'score',
120-
},
121-
units: series.meta?.units,
122-
},
123-
};
124-
125-
return scaledSeries;
126-
})
127-
: [];
128-
28+
export function PerformanceScoreBreakdownChart() {
12929
return (
13030
<ChartContainer>
131-
<InsightsTimeSeriesWidget
132-
title={t('Score Breakdown')}
133-
height="100%"
134-
visualizationType="area"
135-
isLoading={areVitalScoresLoading}
136-
error={vitalScoresError}
137-
series={allSeries}
138-
description={<WebVitalsWeightList weights={weights} />}
139-
/>
31+
<PerformanceScoreBreakdownChartWidget />
14032
</ChartContainer>
14133
);
14234
}

‎static/app/views/insights/browser/webVitals/views/pageOverview.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -196,11 +196,7 @@ export function PageOverview() {
196196
<BrowserTypeSelector />
197197
</TopMenuContainer>
198198
<Flex>
199-
<PerformanceScoreBreakdownChart
200-
transaction={transaction}
201-
browserTypes={browserTypes}
202-
subregions={subregions}
203-
/>
199+
<PerformanceScoreBreakdownChart />
204200
</Flex>
205201
<WebVitalMetersContainer>
206202
{(isPending || isProjectScoresLoading) && <WebVitalMetersPlaceholder />}

‎static/app/views/insights/common/components/widgets/performanceScoreBreakdownChartWidget.tsx

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import {useTheme} from '@emotion/react';
2+
3+
import {t} from 'sentry/locale';
4+
import {decodeList} from 'sentry/utils/queryString';
5+
import {MutableSearch} from 'sentry/utils/tokenizeSearch';
6+
import useLocationQuery from 'sentry/utils/url/useLocationQuery';
7+
import {ORDER} from 'sentry/views/insights/browser/webVitals/components/charts/performanceScoreChart';
8+
import {WebVitalsWeightList} from 'sentry/views/insights/browser/webVitals/components/charts/webVitalWeightList';
9+
import type {WebVitals} from 'sentry/views/insights/browser/webVitals/types';
10+
import {getWeights} from 'sentry/views/insights/browser/webVitals/utils/getWeights';
11+
import decodeBrowserTypes from 'sentry/views/insights/browser/webVitals/utils/queryParameterDecoders/browserType';
12+
import {useDefaultWebVitalsQuery} from 'sentry/views/insights/browser/webVitals/utils/useDefaultQuery';
13+
import {InsightsTimeSeriesWidget} from 'sentry/views/insights/common/components/insightsTimeSeriesWidget';
14+
import type {LoadableChartWidgetProps} from 'sentry/views/insights/common/components/widgets/types';
15+
import {
16+
type DiscoverSeries,
17+
useMetricsSeries,
18+
} from 'sentry/views/insights/common/queries/useDiscoverSeries';
19+
import {SpanIndexedField, SpanMetricsField} from 'sentry/views/insights/types';
20+
21+
export function PerformanceScoreBreakdownChartWidget(props: LoadableChartWidgetProps) {
22+
const {
23+
transaction,
24+
[SpanIndexedField.BROWSER_NAME]: browserTypes,
25+
[SpanIndexedField.USER_GEO_SUBREGION]: subregions,
26+
} = useLocationQuery({
27+
fields: {
28+
[SpanIndexedField.BROWSER_NAME]: decodeBrowserTypes,
29+
[SpanIndexedField.USER_GEO_SUBREGION]: decodeList,
30+
transaction: decodeList,
31+
},
32+
});
33+
const theme = useTheme();
34+
const segmentColors = theme.chart.getColorPalette(3).slice(0, 5);
35+
const defaultQuery = useDefaultWebVitalsQuery();
36+
const search = new MutableSearch(`${defaultQuery} has:measurements.score.total`);
37+
38+
if (transaction.length && transaction[0]) {
39+
search.addFilterValue('transaction', transaction[0]);
40+
}
41+
42+
if (subregions) {
43+
search.addDisjunctionFilterValues(SpanMetricsField.USER_GEO_SUBREGION, subregions);
44+
}
45+
46+
if (browserTypes) {
47+
search.addDisjunctionFilterValues(SpanMetricsField.BROWSER_NAME, browserTypes);
48+
}
49+
50+
const {
51+
data: vitalScoresData,
52+
isLoading: areVitalScoresLoading,
53+
error: vitalScoresError,
54+
} = useMetricsSeries(
55+
{
56+
search,
57+
yAxis: [
58+
'performance_score(measurements.score.lcp)',
59+
'performance_score(measurements.score.fcp)',
60+
'performance_score(measurements.score.cls)',
61+
'performance_score(measurements.score.inp)',
62+
'performance_score(measurements.score.ttfb)',
63+
'count()',
64+
],
65+
transformAliasToInputFormat: true,
66+
},
67+
'api.performance.browser.web-vitals.timeseries-scores2',
68+
props.pageFilters
69+
);
70+
71+
const webVitalsThatHaveData: WebVitals[] = vitalScoresData
72+
? ORDER.filter(webVital => {
73+
const key = `performance_score(measurements.score.${webVital})` as const;
74+
const series = vitalScoresData[key];
75+
76+
return series.data.some(datum => datum.value > 0);
77+
})
78+
: [];
79+
80+
const weights = getWeights(webVitalsThatHaveData);
81+
82+
const allSeries: DiscoverSeries[] = vitalScoresData
83+
? ORDER.map((webVital, index) => {
84+
const key = `performance_score(measurements.score.${webVital})` as const;
85+
const series = vitalScoresData[key];
86+
87+
const scaledSeries: DiscoverSeries = {
88+
...series,
89+
data: series.data.map(datum => {
90+
return {
91+
...datum,
92+
value: datum.value * weights[webVital],
93+
};
94+
}),
95+
color: segmentColors[index],
96+
meta: {
97+
// TODO: The backend doesn't return these score fields with the "score" type yet. Fill this in manually for now.
98+
fields: {
99+
...series.meta?.fields,
100+
[key]: 'score',
101+
},
102+
units: series.meta?.units,
103+
},
104+
};
105+
106+
return scaledSeries;
107+
})
108+
: [];
109+
110+
return (
111+
<InsightsTimeSeriesWidget
112+
title={t('Score Breakdown')}
113+
height="100%"
114+
visualizationType="area"
115+
isLoading={areVitalScoresLoading}
116+
error={vitalScoresError}
117+
series={allSeries}
118+
description={<WebVitalsWeightList weights={weights} />}
119+
/>
120+
);
121+
}

‎static/app/views/insights/common/queries/useDiscoverSeries.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,13 +80,15 @@ export const useEAPSeries = <
8080

8181
export const useMetricsSeries = <Fields extends MetricsProperty[]>(
8282
options: UseMetricsSeriesOptions<Fields> = {},
83-
referrer: string
83+
referrer: string,
84+
pageFilters?: PageFilters
8485
) => {
8586
const useEap = useInsightsEap();
8687
return useDiscoverSeries<Fields>(
8788
options,
8889
useEap ? DiscoverDatasets.SPANS_EAP_RPC : DiscoverDatasets.METRICS,
89-
referrer
90+
referrer,
91+
pageFilters
9092
);
9193
};
9294

0 commit comments

Comments
 (0)