Skip to content

Commit 9cd2c06

Browse files
bprusinowskibprusinowski
committed
refactor: Standardize error formatting and prepare for confidence intervals support
1 parent a3fc6e5 commit 9cd2c06

File tree

10 files changed

+158
-98
lines changed

10 files changed

+158
-98
lines changed

‎app/charts/column/columns-grouped-state.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,8 @@ const useColumnsGroupedState = (
8484
yMeasure,
8585
getY,
8686
getMinY,
87-
showYStandardError,
88-
yErrorMeasure,
89-
getYError,
9087
getYErrorRange,
88+
getFormattedYUncertainty,
9189
segmentDimension,
9290
segmentsByAbbreviationOrLabel,
9391
getSegment,
@@ -398,14 +396,6 @@ const useColumnsGroupedState = (
398396
topAnchor: !fields.segment,
399397
});
400398

401-
const getError = (d: Observation) => {
402-
if (!showYStandardError || !getYError || getYError(d) == null) {
403-
return;
404-
}
405-
406-
return `${getYError(d)}${yErrorMeasure?.unit ?? ""}`;
407-
};
408-
409399
return {
410400
xAnchor: xAnchorRaw + (placement.x === "right" ? 0.5 : -0.5) * bw,
411401
yAnchor,
@@ -414,15 +404,15 @@ const useColumnsGroupedState = (
414404
datum: {
415405
label: fields.segment && getSegmentAbbreviationOrLabel(datum),
416406
value: yValueFormatter(getY(datum)),
417-
error: getError(datum),
407+
error: getFormattedYUncertainty(datum),
418408
color: colors(getSegment(datum)) as string,
419409
},
420410
values: sortedTooltipValues.map((td) => ({
421411
label: getSegmentAbbreviationOrLabel(td),
422412
value: yMeasure.unit
423413
? `${formatNumber(getY(td))} ${yMeasure.unit}`
424414
: formatNumber(getY(td)),
425-
error: getError(td),
415+
error: getFormattedYUncertainty(td),
426416
color: colors(getSegment(td)) as string,
427417
})),
428418
};

‎app/charts/column/columns-grouped.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
import { useChartState } from "@/charts/shared/chart-state";
99
import {
1010
RenderWhiskerDatum,
11-
filterWithoutErrors,
1211
renderContainer,
1312
renderWhiskers,
1413
} from "@/charts/shared/rendering-utils";
@@ -20,24 +19,24 @@ export const ErrorWhiskers = () => {
2019
xScale,
2120
xScaleIn,
2221
getYErrorRange,
23-
getYError,
22+
getYErrorPresent,
2423
yScale,
2524
getSegment,
2625
grouped,
27-
showYStandardError,
26+
showYUncertainty,
2827
} = useChartState() as GroupedColumnsState;
2928
const { margins, width, height } = bounds;
3029
const ref = useRef<SVGGElement>(null);
3130
const enableTransition = useTransitionStore((state) => state.enable);
3231
const transitionDuration = useTransitionStore((state) => state.duration);
3332
const renderData: RenderWhiskerDatum[] = useMemo(() => {
34-
if (!getYErrorRange || !showYStandardError) {
33+
if (!getYErrorRange || !showYUncertainty) {
3534
return [];
3635
}
3736

3837
const bandwidth = xScaleIn.bandwidth();
3938
return grouped
40-
.filter((d) => d[1].some(filterWithoutErrors(getYError)))
39+
.filter((d) => d[1].some(getYErrorPresent))
4140
.flatMap(([segment, observations]) =>
4241
observations.map((d) => {
4342
const x0 = xScaleIn(getSegment(d)) as number;
@@ -56,9 +55,9 @@ export const ErrorWhiskers = () => {
5655
}, [
5756
getSegment,
5857
getYErrorRange,
59-
getYError,
58+
getYErrorPresent,
6059
grouped,
61-
showYStandardError,
60+
showYUncertainty,
6261
xScale,
6362
xScaleIn,
6463
yScale,

‎app/charts/column/columns-state.tsx‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,8 @@ const useColumnsState = (
7575
yMeasure,
7676
getY,
7777
getMinY,
78-
showYStandardError,
79-
yErrorMeasure,
80-
getYError,
8178
getYErrorRange,
79+
getFormattedYUncertainty,
8280
} = variables;
8381
const { chartData, scalesData, timeRangeData, paddingData, allData } = data;
8482
const { fields, interactiveFiltersConfig } = chartConfig;
@@ -245,15 +243,6 @@ const useColumnsState = (
245243
formatters[yMeasure.id] ?? formatNumber,
246244
yMeasure.unit
247245
);
248-
249-
const getError = (d: Observation) => {
250-
if (!showYStandardError || !getYError || getYError(d) === null) {
251-
return;
252-
}
253-
254-
return `${getYError(d)}${yErrorMeasure?.unit ?? ""}`;
255-
};
256-
257246
const y = getY(d);
258247

259248
return {
@@ -264,7 +253,7 @@ const useColumnsState = (
264253
datum: {
265254
label: undefined,
266255
value: y !== null && isNaN(y) ? "-" : `${yValueFormatter(getY(d))}`,
267-
error: getError(d),
256+
error: getFormattedYUncertainty(d),
268257
color: "",
269258
},
270259
values: undefined,

‎app/charts/column/columns.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
import { useChartState } from "@/charts/shared/chart-state";
1010
import {
1111
RenderWhiskerDatum,
12-
filterWithoutErrors,
1312
renderContainer,
1413
renderWhiskers,
1514
} from "@/charts/shared/rendering-utils";
@@ -19,25 +18,25 @@ import { useTheme } from "@/themes";
1918
export const ErrorWhiskers = () => {
2019
const {
2120
getX,
22-
getYError,
21+
getYErrorPresent,
2322
getYErrorRange,
2423
chartData,
2524
yScale,
2625
xScale,
27-
showYStandardError,
26+
showYUncertainty,
2827
bounds,
2928
} = useChartState() as ColumnsState;
3029
const { margins, width, height } = bounds;
3130
const ref = useRef<SVGGElement>(null);
3231
const enableTransition = useTransitionStore((state) => state.enable);
3332
const transitionDuration = useTransitionStore((state) => state.duration);
3433
const renderData: RenderWhiskerDatum[] = useMemo(() => {
35-
if (!getYErrorRange || !showYStandardError) {
34+
if (!getYErrorRange || !showYUncertainty) {
3635
return [];
3736
}
3837

3938
const bandwidth = xScale.bandwidth();
40-
return chartData.filter(filterWithoutErrors(getYError)).map((d, i) => {
39+
return chartData.filter(getYErrorPresent).map((d, i) => {
4140
const x0 = xScale(getX(d)) as number;
4241
const barWidth = Math.min(bandwidth, 15);
4342
const [y1, y2] = getYErrorRange(d);
@@ -53,9 +52,9 @@ export const ErrorWhiskers = () => {
5352
}, [
5453
chartData,
5554
getX,
56-
getYError,
55+
getYErrorPresent,
5756
getYErrorRange,
58-
showYStandardError,
57+
showYUncertainty,
5958
xScale,
6059
yScale,
6160
width,

‎app/charts/line/lines-state.tsx‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,8 @@ const useLinesState = (
8080
getXAsString,
8181
yMeasure,
8282
getY,
83-
showYStandardError,
84-
getYError,
8583
getYErrorRange,
86-
yErrorMeasure,
84+
getFormattedYUncertainty,
8785
getMinY,
8886
segmentDimension,
8987
segmentsByAbbreviationOrLabel,
@@ -279,14 +277,6 @@ const useLinesState = (
279277
yMeasure.unit
280278
);
281279

282-
const getError = (d: Observation) => {
283-
if (!showYStandardError || !getYError || getYError(d) === null) {
284-
return;
285-
}
286-
287-
return `${getYError(d)}${yErrorMeasure?.unit ?? ""}`;
288-
};
289-
290280
return {
291281
xAnchor,
292282
yAnchor,
@@ -295,7 +285,7 @@ const useLinesState = (
295285
datum: {
296286
label: fields.segment && getSegmentAbbreviationOrLabel(datum),
297287
value: yValueFormatter(getY(datum)),
298-
error: getError(datum),
288+
error: getFormattedYUncertainty(datum),
299289
color: colors(getSegment(datum)) as string,
300290
},
301291
values: sortedTooltipValues.map((td) => ({

‎app/charts/line/lines.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { LinesState } from "@/charts/line/lines-state";
55
import { useChartState } from "@/charts/shared/chart-state";
66
import {
77
RenderWhiskerDatum,
8-
filterWithoutErrors,
98
renderContainer,
109
renderWhiskers,
1110
} from "@/charts/shared/rendering-utils";
@@ -15,12 +14,12 @@ import { useTransitionStore } from "@/stores/transition";
1514
export const ErrorWhiskers = () => {
1615
const {
1716
getX,
18-
getYError,
17+
getYErrorPresent,
1918
getYErrorRange,
2019
chartData,
2120
yScale,
2221
xScale,
23-
showYStandardError,
22+
showYUncertainty,
2423
colors,
2524
getSegment,
2625
bounds,
@@ -30,11 +29,11 @@ export const ErrorWhiskers = () => {
3029
const enableTransition = useTransitionStore((state) => state.enable);
3130
const transitionDuration = useTransitionStore((state) => state.duration);
3231
const renderData: RenderWhiskerDatum[] = useMemo(() => {
33-
if (!getYErrorRange || !showYStandardError) {
32+
if (!getYErrorRange || !showYUncertainty) {
3433
return [];
3534
}
3635

37-
return chartData.filter(filterWithoutErrors(getYError)).map((d, i) => {
36+
return chartData.filter(getYErrorPresent).map((d, i) => {
3837
const x0 = xScale(getX(d)) as number;
3938
const segment = getSegment(d);
4039
const barWidth = 15;
@@ -54,9 +53,9 @@ export const ErrorWhiskers = () => {
5453
colors,
5554
getSegment,
5655
getX,
57-
getYError,
56+
getYErrorPresent,
5857
getYErrorRange,
59-
showYStandardError,
58+
showYUncertainty,
6059
xScale,
6160
yScale,
6261
]);

0 commit comments

Comments
 (0)