Skip to content

Commit afac952

Browse files
williasterwilliaster
committed
xychart: fix a lot of types, remove withRegisteredData because it's too complex
1 parent 4abf7f7 commit afac952

File tree

12 files changed

+194
-246
lines changed

12 files changed

+194
-246
lines changed

‎packages/visx-xychart/src/components/series/AnimatedAreaSeries.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,5 @@ export default function AnimatedAreaSeries<
99
YScale extends AxisScale,
1010
Datum extends object,
1111
>(props: Omit<BaseAreaSeriesProps<XScale, YScale, Datum>, 'PathComponent'>) {
12-
// @TODO currently generics for non-SeriesProps are not passed correctly in withRegisteredData HOC
13-
// @ts-expect-error
1412
return <BaseAreaSeries<XScale, YScale, Datum> {...props} PathComponent={AnimatedPath} />;
1513
}

‎packages/visx-xychart/src/components/series/AnimatedBarSeries.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@ export default function AnimatedBarSeries<
1212
return (
1313
<BaseBarSeries<XScale, YScale, Datum>
1414
{...props}
15-
// @TODO currently generics for non-SeriesProps are not passed correctly in
16-
// withRegisteredData HOC
1715
colorAccessor={colorAccessor as BaseBarSeriesProps<XScale, YScale, object>['colorAccessor']}
1816
BarsComponent={AnimatedBars}
1917
/>

‎packages/visx-xychart/src/components/series/AnimatedGlyphSeries.tsx

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,5 @@ export default function AnimatedGlyphSeries<
2323
[renderGlyph],
2424
);
2525

26-
return (
27-
<BaseGlyphSeries<XScale, YScale, Datum>
28-
{...props}
29-
// @TODO currently generics for non-SeriesProps are not passed correctly in
30-
// withRegisteredData HOC
31-
// @ts-expect-error
32-
renderGlyphs={renderGlyphs}
33-
/>
34-
);
26+
return <BaseGlyphSeries<XScale, YScale, Datum> {...props} renderGlyphs={renderGlyphs} />;
3527
}

‎packages/visx-xychart/src/components/series/AreaSeries.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,5 @@ export default function AreaSeries<
88
YScale extends AxisScale,
99
Datum extends object,
1010
>(props: Omit<BaseAreaSeriesProps<XScale, YScale, Datum>, 'PathComponent'>) {
11-
// @TODO currently generics for non-SeriesProps are not passed correctly in withRegisteredData HOC
12-
// @ts-expect-error
1311
return <BaseAreaSeries<XScale, YScale, Datum> {...props} />;
1412
}

‎packages/visx-xychart/src/components/series/BarSeries.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,7 @@ function BarSeries<XScale extends AxisScale, YScale extends AxisScale, Datum ext
1111
return (
1212
<BaseBarSeries<XScale, YScale, Datum>
1313
{...props}
14-
// @TODO currently generics for non-SeriesProps are not passed correctly in
15-
// withRegisteredData HOC
16-
colorAccessor={colorAccessor as BaseBarSeriesProps<XScale, YScale, object>['colorAccessor']}
14+
colorAccessor={colorAccessor}
1715
BarsComponent={Bars}
1816
/>
1917
);

‎packages/visx-xychart/src/components/series/GlyphSeries.tsx

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,5 @@ export default function GlyphSeries<
3131
)),
3232
[renderGlyph],
3333
);
34-
return (
35-
<BaseGlyphSeries<XScale, YScale, Datum>
36-
{...props}
37-
// @TODO currently generics for non-SeriesProps are not passed correctly in
38-
// withRegisteredData HOC
39-
// @ts-expect-error
40-
renderGlyphs={renderGlyphs}
41-
/>
42-
);
34+
return <BaseGlyphSeries<XScale, YScale, Datum> {...props} renderGlyphs={renderGlyphs} />;
4335
}

‎packages/visx-xychart/src/components/series/private/BaseAreaSeries.tsx

Lines changed: 59 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import React, { useContext, useCallback, useMemo } from 'react';
1+
import React, { useContext, useCallback, useMemo, useEffect } from 'react';
22
import type { AxisScale } from '@visx/axis';
33
import type { AreaProps } from '@visx/shape/lib/shapes/Area';
44
import Area from '@visx/shape/lib/shapes/Area';
55
import type { LinePathProps } from '@visx/shape/lib/shapes/LinePath';
66
import LinePath from '@visx/shape/lib/shapes/LinePath';
77
import DataContext from '../../../context/DataContext';
8-
import type { GlyphsProps, SeriesProps } from '../../../types';
9-
import type { WithRegisteredDataProps } from '../../../enhancers/withRegisteredData';
10-
import withRegisteredData from '../../../enhancers/withRegisteredData';
8+
import type { DataContextType, GlyphsProps, SeriesProps } from '../../../types';
119
import getScaledValueFactory from '../../../utils/getScaledValueFactory';
1210
import getScaleBaseline from '../../../utils/getScaleBaseline';
1311
import isValidNumber from '../../../typeguards/isValidNumber';
@@ -38,32 +36,29 @@ export type BaseAreaSeriesProps<
3836
PathComponent?: React.FC<Omit<React.SVGProps<SVGPathElement>, 'ref'>> | 'path';
3937
} & Omit<React.SVGProps<SVGPathElement>, 'x' | 'y' | 'x0' | 'x1' | 'y0' | 'y1' | 'ref'>;
4038

41-
function BaseAreaSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>(
42-
props: BaseAreaSeriesProps<XScale, YScale, Datum>,
43-
) {
44-
const {
45-
PathComponent = 'path',
46-
curve,
47-
data,
48-
dataKey,
49-
lineProps,
50-
onBlur,
51-
onFocus,
52-
onPointerMove,
53-
onPointerOut,
54-
onPointerUp,
55-
onPointerDown,
56-
enableEvents = true,
57-
renderLine = true,
58-
xAccessor,
59-
x0Accessor,
60-
xScale,
61-
yAccessor,
62-
y0Accessor,
63-
yScale,
64-
...areaProps
65-
} = props as BaseAreaSeriesProps<XScale, YScale, Datum> &
66-
WithRegisteredDataProps<XScale, YScale, Datum>;
39+
function BaseAreaSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
40+
PathComponent = 'path',
41+
curve,
42+
data,
43+
dataKey,
44+
lineProps,
45+
onBlur,
46+
onFocus,
47+
onPointerMove,
48+
onPointerOut,
49+
onPointerUp,
50+
onPointerDown,
51+
enableEvents = true,
52+
renderLine = true,
53+
xAccessor,
54+
x0Accessor,
55+
xScale,
56+
yAccessor,
57+
y0Accessor,
58+
yScale,
59+
...areaProps
60+
}: BaseAreaSeriesProps<XScale, YScale, Datum> &
61+
Pick<DataContextType<XScale, YScale, Datum>, 'xScale' | 'yScale'>) {
6762
const { colorScale, theme, horizontal } = useContext(DataContext);
6863
const getScaledX0 = useMemo(
6964
() => (x0Accessor ? getScaledValueFactory(xScale, x0Accessor) : undefined),
@@ -182,4 +177,37 @@ function BaseAreaSeries<XScale extends AxisScale, YScale extends AxisScale, Datu
182177
);
183178
}
184179

185-
export default withRegisteredData(BaseAreaSeries);
180+
export default function BaseAreaSeriesWithRegisteredData<
181+
XScale extends AxisScale,
182+
YScale extends AxisScale,
183+
Datum extends object,
184+
>(props: BaseAreaSeriesProps<XScale, YScale, Datum>) {
185+
const { dataKey, data, xAccessor, yAccessor } = props;
186+
const { xScale, yScale, dataRegistry } = useContext(DataContext) as unknown as DataContextType<
187+
XScale,
188+
YScale,
189+
Datum
190+
>;
191+
192+
useEffect(() => {
193+
if (dataRegistry) dataRegistry.registerData({ key: dataKey, data, xAccessor, yAccessor });
194+
return () => dataRegistry?.unregisterData(dataKey);
195+
}, [dataRegistry, dataKey, data, xAccessor, yAccessor]);
196+
197+
const registryEntry = dataRegistry?.get(dataKey);
198+
199+
// if scales or data are not available in context, render nothing
200+
if (!xScale || !yScale || !registryEntry) return null;
201+
202+
// otherwise pass props + over-write data/accessors
203+
return (
204+
<BaseAreaSeries
205+
{...props}
206+
xScale={xScale}
207+
yScale={yScale}
208+
data={registryEntry.data}
209+
xAccessor={registryEntry.xAccessor}
210+
yAccessor={registryEntry.yAccessor}
211+
/>
212+
);
213+
}

‎packages/visx-xychart/src/components/series/private/BaseBarSeries.tsx

Lines changed: 56 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import React, { useContext, useMemo } from 'react';
1+
import React, { useContext, useEffect, useMemo } from 'react';
22
import type { AxisScale } from '@visx/axis';
33
import DataContext from '../../../context/DataContext';
4-
import type { Bar, BarsProps, SeriesProps } from '../../../types';
5-
import type { WithRegisteredDataProps } from '../../../enhancers/withRegisteredData';
6-
import withRegisteredData from '../../../enhancers/withRegisteredData';
4+
import type { Bar, BarsProps, DataContextType, SeriesProps } from '../../../types';
75
import getScaledValueFactory from '../../../utils/getScaledValueFactory';
86
import getScaleBandwidth from '../../../utils/getScaleBandwidth';
97
import getScaleBaseline from '../../../utils/getScaleBaseline';
@@ -35,29 +33,26 @@ const getFallbackBandwidth = (fullBarWidth: number, barPadding: number) =>
3533
// clamp padding to [0, 1], bar thickness = (1-padding) * availableSpace
3634
fullBarWidth * (1 - Math.min(1, Math.max(0, barPadding)));
3735

38-
function BaseBarSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>(
39-
props: BaseBarSeriesProps<XScale, YScale, Datum>,
40-
) {
41-
const {
42-
BarsComponent,
43-
barPadding = 0.1,
44-
colorAccessor,
45-
data,
46-
dataKey,
47-
onBlur,
48-
onFocus,
49-
onPointerMove,
50-
onPointerOut,
51-
onPointerUp,
52-
onPointerDown,
53-
enableEvents = true,
54-
xAccessor,
55-
xScale,
56-
yAccessor,
57-
yScale,
58-
...barComponentProps
59-
} = props as BaseBarSeriesProps<XScale, YScale, Datum> &
60-
WithRegisteredDataProps<XScale, YScale, Datum>;
36+
function BaseBarSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
37+
BarsComponent,
38+
barPadding = 0.1,
39+
colorAccessor,
40+
data,
41+
dataKey,
42+
onBlur,
43+
onFocus,
44+
onPointerMove,
45+
onPointerOut,
46+
onPointerUp,
47+
onPointerDown,
48+
enableEvents = true,
49+
xAccessor,
50+
xScale,
51+
yAccessor,
52+
yScale,
53+
...barComponentProps
54+
}: BaseBarSeriesProps<XScale, YScale, Datum> &
55+
Pick<DataContextType<XScale, YScale, Datum>, 'xScale' | 'yScale'>) {
6156
const {
6257
colorScale,
6358
horizontal,
@@ -139,4 +134,37 @@ function BaseBarSeries<XScale extends AxisScale, YScale extends AxisScale, Datum
139134
);
140135
}
141136

142-
export default withRegisteredData(BaseBarSeries);
137+
export default function BaseBarSeriesWithRegisteredData<
138+
XScale extends AxisScale,
139+
YScale extends AxisScale,
140+
Datum extends object,
141+
>(props: BaseBarSeriesProps<XScale, YScale, Datum>) {
142+
const { dataKey, data, xAccessor, yAccessor } = props;
143+
const { xScale, yScale, dataRegistry } = useContext(DataContext) as unknown as DataContextType<
144+
XScale,
145+
YScale,
146+
Datum
147+
>;
148+
149+
useEffect(() => {
150+
if (dataRegistry) dataRegistry.registerData({ key: dataKey, data, xAccessor, yAccessor });
151+
return () => dataRegistry?.unregisterData(dataKey);
152+
}, [dataRegistry, dataKey, data, xAccessor, yAccessor]);
153+
154+
const registryEntry = dataRegistry?.get(dataKey);
155+
156+
// if scales or data are not available in context, render nothing
157+
if (!xScale || !yScale || !registryEntry) return null;
158+
159+
// otherwise pass props + over-write data/accessors
160+
return (
161+
<BaseBarSeries
162+
{...props}
163+
xScale={xScale}
164+
yScale={yScale}
165+
data={registryEntry.data}
166+
xAccessor={registryEntry.xAccessor}
167+
yAccessor={registryEntry.yAccessor}
168+
/>
169+
);
170+
}

‎packages/visx-xychart/src/components/series/private/BaseGlyphSeries.tsx

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import React, { useContext, useMemo } from 'react';
1+
import React, { useContext, useEffect, useMemo } from 'react';
22
import type { AxisScale } from '@visx/axis';
33
import DataContext from '../../../context/DataContext';
4-
import type { GlyphProps, GlyphsProps, SeriesProps } from '../../../types';
5-
import type { WithRegisteredDataProps } from '../../../enhancers/withRegisteredData';
6-
import withRegisteredData from '../../../enhancers/withRegisteredData';
4+
import type { DataContextType, GlyphProps, GlyphsProps, SeriesProps } from '../../../types';
75
import getScaledValueFactory from '../../../utils/getScaledValueFactory';
86
import isValidNumber from '../../../typeguards/isValidNumber';
97
import { GLYPHSERIES_EVENT_SOURCE, XYCHART_EVENT_SOURCE } from '../../../constants';
@@ -43,7 +41,8 @@ export function BaseGlyphSeries<
4341
xScale,
4442
yAccessor,
4543
yScale,
46-
}: BaseGlyphSeriesProps<XScale, YScale, Datum> & WithRegisteredDataProps<XScale, YScale, Datum>) {
44+
}: BaseGlyphSeriesProps<XScale, YScale, Datum> &
45+
Pick<DataContextType<XScale, YScale, Datum>, 'xScale' | 'yScale'>) {
4746
const { colorScale, theme, horizontal } = useContext(DataContext);
4847
const getScaledX = useMemo(() => getScaledValueFactory(xScale, xAccessor), [xScale, xAccessor]);
4948
const getScaledY = useMemo(() => getScaledValueFactory(yScale, yAccessor), [yScale, yAccessor]);
@@ -87,4 +86,37 @@ export function BaseGlyphSeries<
8786
return <>{renderGlyphs({ glyphs, xScale, yScale, horizontal, ...eventEmitters })}</>;
8887
}
8988

90-
export default withRegisteredData(BaseGlyphSeries);
89+
export default function BaseGlyphSeriesWithRegisteredData<
90+
XScale extends AxisScale,
91+
YScale extends AxisScale,
92+
Datum extends object,
93+
>(props: BaseGlyphSeriesProps<XScale, YScale, Datum>) {
94+
const { dataKey, data, xAccessor, yAccessor } = props;
95+
const { xScale, yScale, dataRegistry } = useContext(DataContext) as unknown as DataContextType<
96+
XScale,
97+
YScale,
98+
Datum
99+
>;
100+
101+
useEffect(() => {
102+
if (dataRegistry) dataRegistry.registerData({ key: dataKey, data, xAccessor, yAccessor });
103+
return () => dataRegistry?.unregisterData(dataKey);
104+
}, [dataRegistry, dataKey, data, xAccessor, yAccessor]);
105+
106+
const registryEntry = dataRegistry?.get(dataKey);
107+
108+
// if scales or data are not available in context, render nothing
109+
if (!xScale || !yScale || !registryEntry) return null;
110+
111+
// otherwise pass props + over-write data/accessors
112+
return (
113+
<BaseGlyphSeries
114+
{...props}
115+
xScale={xScale}
116+
yScale={yScale}
117+
data={registryEntry.data}
118+
xAccessor={registryEntry.xAccessor}
119+
yAccessor={registryEntry.yAccessor}
120+
/>
121+
);
122+
}

0 commit comments

Comments
 (0)