Skip to content

Commit 742c135

Browse files
bprusinowskibprusinowski
committed
refactor: Simplify
1 parent d339b01 commit 742c135

12 files changed

Lines changed: 92 additions & 102 deletions

File tree

‎app/charts/bar/overlay-bars.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,10 @@ export const InteractionBars = () => {
1313
const showTooltip = (d: Observation) => {
1414
dispatch({
1515
type: "INTERACTION_UPDATE",
16-
value: { interaction: { visible: true, d } },
16+
value: {
17+
observation: d,
18+
visible: true,
19+
},
1720
});
1821
};
1922
const hideTooltip = () => {

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,10 @@ export const InteractionColumns = ({ temporal }: { temporal?: boolean }) => {
2020
const showTooltip = useEvent((d: Observation) => {
2121
dispatch({
2222
type: "INTERACTION_UPDATE",
23-
value: { interaction: { visible: true, d } },
23+
value: {
24+
observation: d,
25+
visible: true,
26+
},
2427
});
2528
});
2629
const hideTooltip = useEvent(() => {

‎app/charts/map/map-legend.tsx‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -358,7 +358,7 @@ const CircleLegend = ({
358358
}) => {
359359
const width = useLegendWidth();
360360

361-
const [{ interaction }] = useInteraction();
361+
const [interaction] = useInteraction();
362362
const { labelColor } = useChartTheme();
363363
const { symbolLayer } = useChartState() as MapState;
364364
const {
@@ -370,15 +370,16 @@ const CircleLegend = ({
370370
radiusScale,
371371
} = symbolLayer as NonNullable<MapState["symbolLayer"]>;
372372

373-
const maybeValue = interaction.d && getValue(interaction.d);
373+
const maybeValue =
374+
interaction.observation && getValue(interaction.observation);
374375
const value = typeof maybeValue === "number" ? maybeValue : undefined;
375376

376377
// @ts-ignore - value can be undefined, D3 types are wrong here
377378
const radius = radiusScale(value);
378379
const maxRadius = radiusScale.range()[1];
379380

380-
const color = interaction.d
381-
? rgbArrayToHex(getColor(interaction.d))
381+
const color = interaction.observation
382+
? rgbArrayToHex(getColor(interaction.observation))
382383
: undefined;
383384

384385
const domainObservations = useMemo(
@@ -415,16 +416,15 @@ const CircleLegend = ({
415416
);
416417
}
417418
})}
418-
419419
{/* Hovered data point indicator */}
420-
{interaction.d &&
420+
{interaction.observation &&
421421
interaction.visible &&
422422
value !== undefined &&
423423
radius !== undefined &&
424424
color !== undefined && (
425425
<Circle
426426
value={valueFormatter(value)}
427-
label={getLabel(interaction.d)}
427+
label={getLabel(interaction.observation)}
428428
fill={color}
429429
stroke={labelColor}
430430
radius={radius}
@@ -826,25 +826,22 @@ const DataPointIndicator = ({
826826
scale: ScaleLinear<number, number>;
827827
getValue: (d: Observation) => number | null;
828828
}) => {
829-
const [state] = useInteraction();
829+
const [{ visible, observation }] = useInteraction();
830830
const { labelColor } = useChartTheme();
831831
const classes = useDataPointIndicatorStyles();
832+
832833
return (
833834
<>
834-
{state.interaction.d &&
835-
state.interaction.visible &&
836-
!isNaN(getValue(state.interaction.d) ?? NaN) && (
837-
<polygon
838-
fill={labelColor}
839-
points="-4,0 4,0 0,4"
840-
className={classes.root}
841-
style={{
842-
transform: `translate(${scale(
843-
getValue(state.interaction.d) ?? 0
844-
)}px, 0)`,
845-
}}
846-
/>
847-
)}
835+
{observation && visible && !isNaN(getValue(observation) ?? NaN) && (
836+
<polygon
837+
fill={labelColor}
838+
points="-4,0 4,0 0,4"
839+
className={classes.root}
840+
style={{
841+
transform: `translate(${scale(getValue(observation) ?? 0)}px, 0)`,
842+
}}
843+
/>
844+
)}
848845
</>
849846
);
850847
};

‎app/charts/map/map-tooltip.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const isTooltipValueValid = (
5454

5555
export const MapTooltip = () => {
5656
const [hoverObjectType] = useMapTooltip();
57-
const [{ interaction }] = useInteraction();
57+
const [interaction] = useInteraction();
5858
const { identicalLayerComponentIds, areaLayer, symbolLayer } =
5959
useChartState() as MapState;
6060
const formatNumber = useFormatNumber();
@@ -75,15 +75,15 @@ export const MapTooltip = () => {
7575
});
7676

7777
const areaTooltipState = useMemo(() => {
78-
const obs = interaction.d;
78+
const { observation } = interaction;
7979

80-
if (areaLayer && obs) {
80+
if (areaLayer && observation) {
8181
const { colors } = areaLayer;
82-
const value = colors.getValue(obs);
82+
const value = colors.getValue(observation);
8383

8484
if (isTooltipValueValid(value)) {
8585
const show = identicalLayerComponentIds || hoverObjectType === "area";
86-
const color = rgbArrayToHex(colors.getColor(obs));
86+
const color = rgbArrayToHex(colors.getColor(observation));
8787
const textColor = getTooltipTextColor(color);
8888
const valueFormatter = (d: number | null) => {
8989
return formatNumberWithUnit(
@@ -98,7 +98,7 @@ export const MapTooltip = () => {
9898
value: typeof value === "number" ? valueFormatter(value) : value,
9999
error:
100100
colors.type === "continuous"
101-
? colors.getFormattedError?.(obs)
101+
? colors.getFormattedError?.(observation)
102102
: null,
103103
componentId: colors.component.id,
104104
label: colors.component.label,
@@ -109,23 +109,23 @@ export const MapTooltip = () => {
109109
}
110110
}, [
111111
areaLayer,
112-
interaction.d,
112+
interaction.observation,
113113
identicalLayerComponentIds,
114114
hoverObjectType,
115115
formatNumber,
116116
formatters,
117117
]);
118118

119119
const symbolTooltipState = useMemo(() => {
120-
const obs = interaction.d;
120+
const { observation } = interaction;
121121

122-
if (symbolLayer && obs) {
122+
if (symbolLayer && observation) {
123123
const { colors } = symbolLayer;
124-
const value = symbolLayer.getValue(obs);
124+
const value = symbolLayer.getValue(observation);
125125

126126
if (isTooltipValueValid(value)) {
127127
const show = identicalLayerComponentIds || hoverObjectType === "symbol";
128-
const color = rgbArrayToHex(colors.getColor(obs));
128+
const color = rgbArrayToHex(colors.getColor(observation));
129129
const textColor = getTooltipTextColor(color);
130130
const valueFormatter = (d: number | null) => {
131131
return formatNumberWithUnit(
@@ -151,15 +151,15 @@ export const MapTooltip = () => {
151151
preparedColors = {
152152
type: "categorical" as const,
153153
component: colors.component,
154-
value: colors.getValue(obs),
154+
value: colors.getValue(observation),
155155
error: null,
156156
color,
157157
textColor,
158158
sameAsValue: false,
159159
};
160160
} else {
161-
const rawValue = obs[colors.component.id] as number;
162-
const formattedError = colors.getFormattedError?.(obs);
161+
const rawValue = observation[colors.component.id] as number;
162+
const formattedError = colors.getFormattedError?.(observation);
163163
preparedColors = {
164164
type: "continuous",
165165
component: colors.component,
@@ -178,7 +178,7 @@ export const MapTooltip = () => {
178178

179179
return {
180180
value: valueFormatter(value),
181-
error: formatSymbolError?.(obs),
181+
error: formatSymbolError?.(observation),
182182
measureDimension: symbolLayer.measureDimension,
183183
show,
184184
color,
@@ -189,7 +189,7 @@ export const MapTooltip = () => {
189189
}
190190
}, [
191191
symbolLayer,
192-
interaction.d,
192+
interaction.observation,
193193
formatSymbolError,
194194
identicalLayerComponentIds,
195195
hoverObjectType,
@@ -216,7 +216,7 @@ export const MapTooltip = () => {
216216

217217
return (
218218
<>
219-
{interaction.mouse && interaction.d && (
219+
{interaction.mouse && interaction.observation && (
220220
<TooltipBox
221221
x={interaction.mouse.x}
222222
y={interaction.mouse.y - 20}
@@ -230,8 +230,8 @@ export const MapTooltip = () => {
230230
sx={{ fontWeight: "bold" }}
231231
>
232232
{hoverObjectType === "area"
233-
? areaLayer?.getLabel(interaction.d)
234-
: symbolLayer?.getLabel(interaction.d)}
233+
? areaLayer?.getLabel(interaction.observation)
234+
: symbolLayer?.getLabel(interaction.observation)}
235235
</Typography>
236236
<Box
237237
display="grid"

‎app/charts/map/map.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ export const MapComponent = ({
191191
};
192192
}, [customLayers, layersByKey, value]);
193193

194-
const [{ interaction }, dispatchInteraction] = useInteraction();
194+
const [interaction, dispatchInteraction] = useInteraction();
195195
const [, setMapTooltipType] = useMapTooltip();
196196

197197
const {
@@ -284,7 +284,9 @@ export const MapComponent = ({
284284
dispatchInteraction({
285285
type: "INTERACTION_UPDATE",
286286
value: {
287-
interaction: { visible: true, mouse: { x, y }, d: observation },
287+
observation,
288+
visible: true,
289+
mouse: { x, y },
288290
},
289291
});
290292
} else {
@@ -369,7 +371,7 @@ export const MapComponent = ({
369371
}
370372

371373
const shape = sortedShapes.features.find(
372-
(d) => d.properties.observation === interaction.d
374+
(d) => d.properties.observation === interaction.observation
373375
);
374376

375377
if (shape) {
@@ -404,7 +406,7 @@ export const MapComponent = ({
404406
}, [
405407
afterAreaCustomLayers,
406408
areaLayer,
407-
interaction.d,
409+
interaction.observation,
408410
interaction.visible,
409411
sortedShapes,
410412
]);

‎app/charts/pie/pie.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,8 @@ export const Pie = () => {
6868
dispatch({
6969
type: "INTERACTION_UPDATE",
7070
value: {
71-
interaction: {
72-
visible: true,
73-
d: d as unknown as Observation,
74-
},
71+
observation: d as unknown as Observation,
72+
visible: true,
7573
},
7674
});
7775
});

‎app/charts/shared/interaction/hover-dots-multiple.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,9 @@ import { useInteraction } from "@/charts/shared/use-interaction";
99
import { Observation } from "@/domain/data";
1010

1111
export const HoverDotMultiple = () => {
12-
const [state] = useInteraction();
12+
const [{ observation, visible }] = useInteraction();
1313

14-
const { visible, d } = state.interaction;
15-
16-
return <>{visible && d && <HoverDots d={d} />}</>;
14+
return <>{observation && visible && <HoverDots d={observation} />}</>;
1715
};
1816

1917
const useStyles = makeStyles((theme: Theme) => ({

‎app/charts/shared/interaction/ruler.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,13 @@ type RulerProps = {
2121

2222
export const Ruler = (props: RulerProps) => {
2323
const { rotate = false } = props;
24-
const [state] = useInteraction();
25-
const { visible, d } = state.interaction;
24+
const [{ observation, visible }] = useInteraction();
2625

27-
return <>{visible && d && <RulerInner d={d} rotate={rotate} />}</>;
26+
return (
27+
<>
28+
{observation && visible && <RulerInner d={observation} rotate={rotate} />}
29+
</>
30+
);
2831
};
2932

3033
type RulerInnerProps = {

‎app/charts/shared/interaction/tooltip.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,11 @@ import { useInteraction } from "@/charts/shared/use-interaction";
2525
import { Observation } from "@/domain/data";
2626

2727
export const Tooltip = ({ type = "single" }: { type: TooltipType }) => {
28-
const [state] = useInteraction();
29-
const { visible, d } = state.interaction;
28+
const [{ observation, visible }] = useInteraction();
3029

31-
return visible && d ? <TooltipInner d={d} type={type} /> : null;
30+
return observation && visible ? (
31+
<TooltipInner d={observation} type={type} />
32+
) : null;
3233
};
3334
export type { TooltipPlacement };
3435

‎app/charts/shared/overlay-horizontal.tsx‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const InteractionHorizontal = memo(function InteractionHorizontal() {
2929
}
3030
: chartState;
3131
const { chartWidth, chartHeight, margins } = chartState.bounds;
32-
const [state, dispatch] = useInteraction();
32+
const [interaction, dispatch] = useInteraction();
3333
const ref = useRef<SVGGElement>(null);
3434

3535
const hideTooltip = () => {
@@ -57,31 +57,29 @@ export const InteractionHorizontal = memo(function InteractionHorizontal() {
5757
: undefined;
5858

5959
if (!closestDatum || Number.isNaN(yAnchor) || yAnchor === undefined) {
60-
if (state.interaction.visible) {
60+
if (interaction.visible) {
6161
hideTooltip();
6262
}
6363

6464
return;
6565
}
6666

6767
const closestDatumTime = getX(closestDatum).getTime();
68-
const datumToUpdate = chartData.find(
68+
const newObservation = chartData.find(
6969
(d) => closestDatumTime === getX(d).getTime()
7070
) as Observation;
7171

7272
if (
73-
!state.interaction.d ||
74-
closestDatumTime !== getX(state.interaction.d).getTime() ||
75-
!state.interaction.visible
73+
!interaction.observation ||
74+
closestDatumTime !== getX(interaction.observation).getTime() ||
75+
!interaction.visible
7676
) {
7777
dispatch({
7878
type: "INTERACTION_UPDATE",
7979
value: {
80-
interaction: {
81-
visible: true,
82-
mouse: { x, y },
83-
d: datumToUpdate,
84-
},
80+
observation: newObservation,
81+
visible: true,
82+
mouse: { x, y },
8583
},
8684
});
8785
}

0 commit comments

Comments
 (0)