@ledgerhq/lumen-ui-rnative-visualization 0.1.18 → 0.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module/lib/Components/Axis/XAxis/XAxis.js +2 -1
- package/dist/module/lib/Components/Axis/XAxis/XAxis.js.map +1 -1
- package/dist/module/lib/Components/Axis/XAxis/XAxis.test.js +14 -0
- package/dist/module/lib/Components/Axis/XAxis/XAxis.test.js.map +1 -1
- package/dist/module/lib/Components/Axis/YAxis/YAxis.js +2 -1
- package/dist/module/lib/Components/Axis/YAxis/YAxis.js.map +1 -1
- package/dist/module/lib/Components/Axis/YAxis/YAxis.test.js +14 -0
- package/dist/module/lib/Components/Axis/YAxis/YAxis.test.js.map +1 -1
- package/dist/module/lib/Components/CartesianChart/CartesianChart.js +2 -2
- package/dist/module/lib/Components/CartesianChart/CartesianChart.js.map +1 -1
- package/dist/module/lib/Components/CartesianChart/{RevealClip/RevealClipDefs.js → RevealAnimation/RevealAnimationProvider.js} +12 -11
- package/dist/module/lib/Components/CartesianChart/RevealAnimation/RevealAnimationProvider.js.map +1 -0
- package/dist/module/lib/Components/CartesianChart/{RevealClip/RevealClipDefs.test.js → RevealAnimation/RevealAnimationProvider.test.js} +51 -12
- package/dist/module/lib/Components/CartesianChart/RevealAnimation/RevealAnimationProvider.test.js.map +1 -0
- package/dist/module/lib/Components/CartesianChart/RevealAnimation/context.js +35 -0
- package/dist/module/lib/Components/CartesianChart/RevealAnimation/context.js.map +1 -0
- package/dist/module/lib/Components/CartesianChart/RevealAnimation/index.js +5 -0
- package/dist/module/lib/Components/CartesianChart/RevealAnimation/index.js.map +1 -0
- package/dist/module/lib/Components/CartesianChart/RevealAnimation/types.js.map +1 -0
- package/dist/module/lib/Components/CartesianChart/RevealAnimation/utils.js +64 -0
- package/dist/module/lib/Components/CartesianChart/RevealAnimation/utils.js.map +1 -0
- package/dist/module/lib/Components/CartesianChart/utils.js +1 -1
- package/dist/module/lib/Components/CartesianChart/utils.js.map +1 -1
- package/dist/module/lib/Components/Line/Line.js +6 -4
- package/dist/module/lib/Components/Line/Line.js.map +1 -1
- package/dist/module/lib/Components/Line/utils.js +19 -9
- package/dist/module/lib/Components/Line/utils.js.map +1 -1
- package/dist/module/lib/Components/Line/utils.test.js +22 -2
- package/dist/module/lib/Components/Line/utils.test.js.map +1 -1
- package/dist/module/lib/Components/LineChart/LineChart.js +23 -8
- package/dist/module/lib/Components/LineChart/LineChart.js.map +1 -1
- package/dist/module/lib/Components/LineChart/LineChart.test.js +69 -0
- package/dist/module/lib/Components/LineChart/LineChart.test.js.map +1 -1
- package/dist/module/lib/Components/LineChart/LineChartEmptyState/LineChartEmptyState.js +2 -2
- package/dist/module/lib/Components/LineChart/LineChartEmptyState/LineChartEmptyState.js.map +1 -1
- package/dist/module/lib/Components/Point/Point.js +6 -4
- package/dist/module/lib/Components/Point/Point.js.map +1 -1
- package/dist/module/lib/Components/Scrubber/ScrubberProvider.js +8 -1
- package/dist/module/lib/Components/Scrubber/ScrubberProvider.js.map +1 -1
- package/dist/module/lib/Components/Scrubber/ScrubberProvider.test.js +79 -1
- package/dist/module/lib/Components/Scrubber/ScrubberProvider.test.js.map +1 -1
- package/dist/typescript/src/lib/Components/Axis/Axis.types.d.ts +6 -0
- package/dist/typescript/src/lib/Components/Axis/Axis.types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/Axis/XAxis/XAxis.d.ts +1 -1
- package/dist/typescript/src/lib/Components/Axis/XAxis/XAxis.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/Axis/YAxis/YAxis.d.ts +1 -1
- package/dist/typescript/src/lib/Components/Axis/YAxis/YAxis.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/CartesianChart/RevealAnimation/RevealAnimationProvider.d.ts +3 -0
- package/dist/typescript/src/lib/Components/CartesianChart/RevealAnimation/RevealAnimationProvider.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/CartesianChart/RevealAnimation/context.d.ts +22 -0
- package/dist/typescript/src/lib/Components/CartesianChart/RevealAnimation/context.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/CartesianChart/RevealAnimation/index.d.ts +3 -0
- package/dist/typescript/src/lib/Components/CartesianChart/RevealAnimation/index.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/CartesianChart/{RevealClip → RevealAnimation}/types.d.ts +14 -1
- package/dist/typescript/src/lib/Components/CartesianChart/RevealAnimation/types.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/CartesianChart/RevealAnimation/utils.d.ts +33 -0
- package/dist/typescript/src/lib/Components/CartesianChart/RevealAnimation/utils.d.ts.map +1 -0
- package/dist/typescript/src/lib/Components/CartesianChart/utils.d.ts +1 -1
- package/dist/typescript/src/lib/Components/CartesianChart/utils.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/Line/Line.d.ts +1 -1
- package/dist/typescript/src/lib/Components/Line/Line.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/Line/types.d.ts +7 -0
- package/dist/typescript/src/lib/Components/Line/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/Line/utils.d.ts +8 -4
- package/dist/typescript/src/lib/Components/Line/utils.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/LineChart/LineChart.d.ts +1 -1
- package/dist/typescript/src/lib/Components/LineChart/LineChart.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/LineChart/types.d.ts +13 -1
- package/dist/typescript/src/lib/Components/LineChart/types.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/Point/Point.d.ts.map +1 -1
- package/dist/typescript/src/lib/Components/Scrubber/ScrubberProvider.d.ts.map +1 -1
- package/dist/typescript/src/lib/utils/types.d.ts +7 -0
- package/dist/typescript/src/lib/utils/types.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/lib/Components/Axis/Axis.types.ts +6 -0
- package/src/lib/Components/Axis/XAxis/XAxis.test.tsx +12 -0
- package/src/lib/Components/Axis/XAxis/XAxis.tsx +16 -14
- package/src/lib/Components/Axis/YAxis/YAxis.test.tsx +12 -0
- package/src/lib/Components/Axis/YAxis/YAxis.tsx +16 -14
- package/src/lib/Components/CartesianChart/CartesianChart.tsx +3 -3
- package/src/lib/Components/CartesianChart/{RevealClip/RevealClipDefs.test.tsx → RevealAnimation/RevealAnimationProvider.test.tsx} +60 -17
- package/src/lib/Components/CartesianChart/{RevealClip/RevealClipDefs.tsx → RevealAnimation/RevealAnimationProvider.tsx} +10 -11
- package/src/lib/Components/CartesianChart/RevealAnimation/context.ts +39 -0
- package/src/lib/Components/CartesianChart/RevealAnimation/index.ts +2 -0
- package/src/lib/Components/CartesianChart/{RevealClip → RevealAnimation}/types.ts +15 -1
- package/src/lib/Components/CartesianChart/RevealAnimation/utils.ts +87 -0
- package/src/lib/Components/CartesianChart/utils.ts +2 -1
- package/src/lib/Components/Line/Line.tsx +13 -4
- package/src/lib/Components/Line/types.ts +7 -0
- package/src/lib/Components/Line/utils.test.ts +36 -2
- package/src/lib/Components/Line/utils.ts +24 -9
- package/src/lib/Components/LineChart/LineChart.test.tsx +71 -0
- package/src/lib/Components/LineChart/LineChart.tsx +21 -3
- package/src/lib/Components/LineChart/LineChartEmptyState/LineChartEmptyState.tsx +2 -2
- package/src/lib/Components/LineChart/types.ts +15 -1
- package/src/lib/Components/Point/Point.tsx +7 -4
- package/src/lib/Components/Scrubber/ScrubberProvider.test.tsx +83 -1
- package/src/lib/Components/Scrubber/ScrubberProvider.tsx +15 -1
- package/src/lib/utils/types.ts +7 -0
- package/dist/module/lib/Components/CartesianChart/RevealClip/RevealClipDefs.js.map +0 -1
- package/dist/module/lib/Components/CartesianChart/RevealClip/RevealClipDefs.test.js.map +0 -1
- package/dist/module/lib/Components/CartesianChart/RevealClip/context.js +0 -8
- package/dist/module/lib/Components/CartesianChart/RevealClip/context.js.map +0 -1
- package/dist/module/lib/Components/CartesianChart/RevealClip/index.js +0 -5
- package/dist/module/lib/Components/CartesianChart/RevealClip/index.js.map +0 -1
- package/dist/module/lib/Components/CartesianChart/RevealClip/types.js.map +0 -1
- package/dist/module/lib/Components/CartesianChart/hooks/useDataFingerprint.js +0 -13
- package/dist/module/lib/Components/CartesianChart/hooks/useDataFingerprint.js.map +0 -1
- package/dist/module/lib/Components/CartesianChart/hooks/useRevealClipAnimation.js +0 -27
- package/dist/module/lib/Components/CartesianChart/hooks/useRevealClipAnimation.js.map +0 -1
- package/dist/typescript/src/lib/Components/CartesianChart/RevealClip/RevealClipDefs.d.ts +0 -3
- package/dist/typescript/src/lib/Components/CartesianChart/RevealClip/RevealClipDefs.d.ts.map +0 -1
- package/dist/typescript/src/lib/Components/CartesianChart/RevealClip/context.d.ts +0 -7
- package/dist/typescript/src/lib/Components/CartesianChart/RevealClip/context.d.ts.map +0 -1
- package/dist/typescript/src/lib/Components/CartesianChart/RevealClip/index.d.ts +0 -3
- package/dist/typescript/src/lib/Components/CartesianChart/RevealClip/index.d.ts.map +0 -1
- package/dist/typescript/src/lib/Components/CartesianChart/RevealClip/types.d.ts.map +0 -1
- package/dist/typescript/src/lib/Components/CartesianChart/hooks/useDataFingerprint.d.ts +0 -9
- package/dist/typescript/src/lib/Components/CartesianChart/hooks/useDataFingerprint.d.ts.map +0 -1
- package/dist/typescript/src/lib/Components/CartesianChart/hooks/useRevealClipAnimation.d.ts +0 -14
- package/dist/typescript/src/lib/Components/CartesianChart/hooks/useRevealClipAnimation.d.ts.map +0 -1
- package/src/lib/Components/CartesianChart/RevealClip/context.ts +0 -13
- package/src/lib/Components/CartesianChart/RevealClip/index.ts +0 -2
- package/src/lib/Components/CartesianChart/hooks/useDataFingerprint.ts +0 -16
- package/src/lib/Components/CartesianChart/hooks/useRevealClipAnimation.ts +0 -43
- /package/dist/module/lib/Components/CartesianChart/{RevealClip → RevealAnimation}/types.js +0 -0
|
@@ -20,7 +20,7 @@ import type {
|
|
|
20
20
|
NumericScale,
|
|
21
21
|
} from '../../utils/types';
|
|
22
22
|
|
|
23
|
-
type Point = [x: number, y: number];
|
|
23
|
+
type Point = [x: number, y: number | null];
|
|
24
24
|
|
|
25
25
|
/**
|
|
26
26
|
* Maps the public `CurveType` values to their d3-shape curve factories.
|
|
@@ -41,8 +41,7 @@ const getCurveFactory = (curve: CurveType = DEFAULT_CURVE): CurveFactory =>
|
|
|
41
41
|
CURVE_FACTORIES[curve] ?? CURVE_FACTORIES[DEFAULT_CURVE];
|
|
42
42
|
|
|
43
43
|
/**
|
|
44
|
-
* Project series data into scaled [x, y] pixel coordinates
|
|
45
|
-
* non-finite entries.
|
|
44
|
+
* Project series data into scaled [x, y] pixel coordinates.
|
|
46
45
|
*
|
|
47
46
|
* When `xData` contains numeric values, those values are fed into the scale
|
|
48
47
|
* instead of the array index so the points honour a numeric X domain.
|
|
@@ -50,19 +49,28 @@ const getCurveFactory = (curve: CurveType = DEFAULT_CURVE): CurveFactory =>
|
|
|
50
49
|
* When `xData` is provided, iteration is capped at `xData.length` so a series
|
|
51
50
|
* with more points than the axis has labels does not overflow past the right
|
|
52
51
|
* edge of the chart. The axis is treated as authoritative for the X domain.
|
|
52
|
+
*
|
|
53
|
+
* Non-finite values (e.g. `null`) are handled according to `connectNulls`:
|
|
54
|
+
* - `false` (default): kept as `[x, null]` holes so the line/area break into
|
|
55
|
+
* gaps via the generators' `.defined()` check.
|
|
56
|
+
* - `true`: skipped entirely so the line is drawn continuously across gaps.
|
|
53
57
|
*/
|
|
54
58
|
export const toScaledPoints = (
|
|
55
59
|
data: (number | null)[],
|
|
56
60
|
xScale: ChartScaleFunction,
|
|
57
61
|
yScale: NumericScale,
|
|
58
62
|
xData?: readonly (string | number)[],
|
|
63
|
+
connectNulls = false,
|
|
59
64
|
): Point[] | null => {
|
|
60
65
|
const pts: Point[] = [];
|
|
61
66
|
const limit = xData ? Math.min(data.length, xData.length) : data.length;
|
|
67
|
+
let finiteCount = 0;
|
|
62
68
|
|
|
63
69
|
for (let i = 0; i < limit; i++) {
|
|
64
70
|
const value = data[i];
|
|
65
|
-
|
|
71
|
+
const isFiniteValue = isFiniteNumber(value);
|
|
72
|
+
|
|
73
|
+
if (!isFiniteValue && connectNulls) continue;
|
|
66
74
|
|
|
67
75
|
const xInput =
|
|
68
76
|
xData && typeof xData[i] === 'number' ? (xData[i] as number) : i;
|
|
@@ -70,12 +78,17 @@ export const toScaledPoints = (
|
|
|
70
78
|
const x = isCategoricalScale(xScale)
|
|
71
79
|
? (xScale(xInput) ?? 0) + xScale.bandwidth() / 2
|
|
72
80
|
: xScale(xInput);
|
|
73
|
-
const y = yScale(value);
|
|
74
81
|
|
|
75
|
-
|
|
82
|
+
if (!isFiniteValue) {
|
|
83
|
+
pts.push([x as number, null]);
|
|
84
|
+
continue;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
pts.push([x as number, yScale(value)]);
|
|
88
|
+
finiteCount++;
|
|
76
89
|
}
|
|
77
90
|
|
|
78
|
-
return
|
|
91
|
+
return finiteCount >= 2 ? pts : null;
|
|
79
92
|
};
|
|
80
93
|
|
|
81
94
|
/**
|
|
@@ -87,8 +100,9 @@ export const buildLinePath = (
|
|
|
87
100
|
): string | null => {
|
|
88
101
|
return (
|
|
89
102
|
line<Point>()
|
|
103
|
+
.defined((d) => d[1] !== null)
|
|
90
104
|
.x((d) => d[0])
|
|
91
|
-
.y((d) => d[1])
|
|
105
|
+
.y((d) => d[1] as number)
|
|
92
106
|
.curve(getCurveFactory(curve))(points) ?? null
|
|
93
107
|
);
|
|
94
108
|
};
|
|
@@ -105,9 +119,10 @@ export const buildAreaPath = (
|
|
|
105
119
|
|
|
106
120
|
return (
|
|
107
121
|
area<Point>()
|
|
122
|
+
.defined((d) => d[1] !== null)
|
|
108
123
|
.x((d) => d[0])
|
|
109
124
|
.y0(yBottom)
|
|
110
|
-
.y1((d) => d[1])
|
|
125
|
+
.y1((d) => d[1] as number)
|
|
111
126
|
.curve(getCurveFactory(curve))(points) ?? null
|
|
112
127
|
);
|
|
113
128
|
};
|
|
@@ -319,4 +319,75 @@ describe('LineChart', () => {
|
|
|
319
319
|
expect(queryByTestId('chart-empty-label')).toBeNull();
|
|
320
320
|
});
|
|
321
321
|
});
|
|
322
|
+
|
|
323
|
+
describe('null gaps and connectNulls', () => {
|
|
324
|
+
const gappedSeries = [
|
|
325
|
+
{
|
|
326
|
+
id: 'gapped',
|
|
327
|
+
stroke: '#000',
|
|
328
|
+
data: [10, 20, null, 40, 50],
|
|
329
|
+
curve: 'linear' as const,
|
|
330
|
+
},
|
|
331
|
+
];
|
|
332
|
+
|
|
333
|
+
const countMoves = (d: string): number => d.match(/M/g)?.length ?? 0;
|
|
334
|
+
|
|
335
|
+
it('breaks the line into segments at null values by default', () => {
|
|
336
|
+
const { getByTestId } = render(
|
|
337
|
+
<LineChartWrapper>
|
|
338
|
+
<LineChart series={gappedSeries} width={400} height={200} />
|
|
339
|
+
</LineChartWrapper>,
|
|
340
|
+
);
|
|
341
|
+
|
|
342
|
+
const d = getByTestId('line-path').props.d as string;
|
|
343
|
+
expect(countMoves(d)).toBe(2);
|
|
344
|
+
});
|
|
345
|
+
|
|
346
|
+
it('connects across nulls when connectNulls is set on the chart', () => {
|
|
347
|
+
const { getByTestId } = render(
|
|
348
|
+
<LineChartWrapper>
|
|
349
|
+
<LineChart
|
|
350
|
+
series={gappedSeries}
|
|
351
|
+
width={400}
|
|
352
|
+
height={200}
|
|
353
|
+
connectNulls
|
|
354
|
+
/>
|
|
355
|
+
</LineChartWrapper>,
|
|
356
|
+
);
|
|
357
|
+
|
|
358
|
+
const d = getByTestId('line-path').props.d as string;
|
|
359
|
+
expect(countMoves(d)).toBe(1);
|
|
360
|
+
});
|
|
361
|
+
|
|
362
|
+
it('honours connectNulls set per-series', () => {
|
|
363
|
+
const { getByTestId } = render(
|
|
364
|
+
<LineChartWrapper>
|
|
365
|
+
<LineChart
|
|
366
|
+
series={[{ ...gappedSeries[0], connectNulls: true }]}
|
|
367
|
+
width={400}
|
|
368
|
+
height={200}
|
|
369
|
+
/>
|
|
370
|
+
</LineChartWrapper>,
|
|
371
|
+
);
|
|
372
|
+
|
|
373
|
+
const d = getByTestId('line-path').props.d as string;
|
|
374
|
+
expect(countMoves(d)).toBe(1);
|
|
375
|
+
});
|
|
376
|
+
|
|
377
|
+
it('lets the chart-level prop override the per-series value', () => {
|
|
378
|
+
const { getByTestId } = render(
|
|
379
|
+
<LineChartWrapper>
|
|
380
|
+
<LineChart
|
|
381
|
+
series={[{ ...gappedSeries[0], connectNulls: true }]}
|
|
382
|
+
width={400}
|
|
383
|
+
height={200}
|
|
384
|
+
connectNulls={false}
|
|
385
|
+
/>
|
|
386
|
+
</LineChartWrapper>,
|
|
387
|
+
);
|
|
388
|
+
|
|
389
|
+
const d = getByTestId('line-path').props.d as string;
|
|
390
|
+
expect(countMoves(d)).toBe(2);
|
|
391
|
+
});
|
|
392
|
+
});
|
|
322
393
|
});
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { useTheme } from '@ledgerhq/lumen-ui-rnative';
|
|
1
2
|
import { useMemo } from 'react';
|
|
2
3
|
import Animated from 'react-native-reanimated';
|
|
3
4
|
import { G } from 'react-native-svg';
|
|
@@ -15,6 +16,7 @@ import type {
|
|
|
15
16
|
LineChartContentProps,
|
|
16
17
|
LineChartLinesProps,
|
|
17
18
|
LineChartProps,
|
|
19
|
+
LineChartTransitionLinesProps,
|
|
18
20
|
} from './types';
|
|
19
21
|
import {
|
|
20
22
|
canRenderLine,
|
|
@@ -28,6 +30,8 @@ const LineChartLines = ({
|
|
|
28
30
|
series,
|
|
29
31
|
showArea,
|
|
30
32
|
areaType,
|
|
33
|
+
stroke,
|
|
34
|
+
connectNulls,
|
|
31
35
|
}: Readonly<LineChartLinesProps>) => {
|
|
32
36
|
return (
|
|
33
37
|
<>
|
|
@@ -35,9 +39,10 @@ const LineChartLines = ({
|
|
|
35
39
|
<Line
|
|
36
40
|
key={s.id}
|
|
37
41
|
seriesId={s.id}
|
|
38
|
-
stroke={s.stroke}
|
|
42
|
+
stroke={stroke ?? s.stroke}
|
|
39
43
|
showArea={showArea}
|
|
40
44
|
areaType={areaType}
|
|
45
|
+
connectNulls={connectNulls}
|
|
41
46
|
/>
|
|
42
47
|
))}
|
|
43
48
|
</>
|
|
@@ -48,12 +53,20 @@ const LineChartTransitionLines = ({
|
|
|
48
53
|
series,
|
|
49
54
|
showArea,
|
|
50
55
|
areaType,
|
|
51
|
-
|
|
56
|
+
connectNulls,
|
|
57
|
+
}: Readonly<LineChartTransitionLinesProps>) => {
|
|
58
|
+
const { theme } = useTheme();
|
|
52
59
|
const { animatedProps } = useShimmerAnimation();
|
|
53
60
|
|
|
54
61
|
return (
|
|
55
62
|
<AnimatedG animatedProps={animatedProps}>
|
|
56
|
-
<LineChartLines
|
|
63
|
+
<LineChartLines
|
|
64
|
+
series={series}
|
|
65
|
+
showArea={showArea}
|
|
66
|
+
areaType={areaType}
|
|
67
|
+
stroke={theme.colors.border.mutedSubtle}
|
|
68
|
+
connectNulls={connectNulls}
|
|
69
|
+
/>
|
|
57
70
|
</AnimatedG>
|
|
58
71
|
);
|
|
59
72
|
};
|
|
@@ -67,6 +80,7 @@ const LineChartContent = ({
|
|
|
67
80
|
xAxisConfig,
|
|
68
81
|
yAxisConfig,
|
|
69
82
|
isTransitionLoading,
|
|
83
|
+
connectNulls,
|
|
70
84
|
children,
|
|
71
85
|
}: Readonly<LineChartContentProps>) => {
|
|
72
86
|
return (
|
|
@@ -78,12 +92,14 @@ const LineChartContent = ({
|
|
|
78
92
|
series={series}
|
|
79
93
|
showArea={showArea}
|
|
80
94
|
areaType={areaType}
|
|
95
|
+
connectNulls={connectNulls}
|
|
81
96
|
/>
|
|
82
97
|
) : (
|
|
83
98
|
<LineChartLines
|
|
84
99
|
series={series}
|
|
85
100
|
showArea={showArea}
|
|
86
101
|
areaType={areaType}
|
|
102
|
+
connectNulls={connectNulls}
|
|
87
103
|
/>
|
|
88
104
|
)}
|
|
89
105
|
{children}
|
|
@@ -109,6 +125,7 @@ export const LineChart = ({
|
|
|
109
125
|
magnetRadius,
|
|
110
126
|
loading = false,
|
|
111
127
|
emptyLabel = 'No data',
|
|
128
|
+
connectNulls,
|
|
112
129
|
}: Readonly<LineChartProps>) => {
|
|
113
130
|
const xAxisConfig = {
|
|
114
131
|
...defaultXAxisProps,
|
|
@@ -182,6 +199,7 @@ export const LineChart = ({
|
|
|
182
199
|
xAxisConfig={xAxisConfig}
|
|
183
200
|
yAxisConfig={yAxisConfig}
|
|
184
201
|
isTransitionLoading={isTransitionLoading}
|
|
202
|
+
connectNulls={connectNulls}
|
|
185
203
|
>
|
|
186
204
|
{children}
|
|
187
205
|
</LineChartContent>
|
|
@@ -4,7 +4,7 @@ import { G, Line as SvgLine, Path } from 'react-native-svg';
|
|
|
4
4
|
|
|
5
5
|
import { useCartesianChartContext } from '../../CartesianChart/context';
|
|
6
6
|
import { useShimmerAnimation } from '../../CartesianChart/hooks/useShimmerAnimation';
|
|
7
|
-
import {
|
|
7
|
+
import { usePathReveal } from '../../CartesianChart/RevealAnimation';
|
|
8
8
|
|
|
9
9
|
import type { LineChartEmptyStateProps } from './types';
|
|
10
10
|
import { buildPlaceholderTransform, PLACEHOLDER_LINE_PATH } from './utils';
|
|
@@ -27,7 +27,7 @@ export function LineChartEmptyState({
|
|
|
27
27
|
const { drawingArea } = useCartesianChartContext();
|
|
28
28
|
const { theme } = useTheme();
|
|
29
29
|
const { animatedProps } = useShimmerAnimation(loading);
|
|
30
|
-
const clipPath =
|
|
30
|
+
const clipPath = usePathReveal();
|
|
31
31
|
|
|
32
32
|
if (drawingArea.width <= 0 || drawingArea.height <= 0) {
|
|
33
33
|
return null;
|
|
@@ -100,6 +100,13 @@ export type LineChartProps = {
|
|
|
100
100
|
* @default 'No data'
|
|
101
101
|
*/
|
|
102
102
|
emptyLabel?: string;
|
|
103
|
+
/**
|
|
104
|
+
* Chart-wide override controlling how null values are handled across all lines.
|
|
105
|
+
* When true, skips null values and draws continuous lines across gaps.
|
|
106
|
+
* When false, null values create gaps in the lines.
|
|
107
|
+
* When omitted, each series' own `connectNulls` value is used (defaulting to `false`).
|
|
108
|
+
*/
|
|
109
|
+
connectNulls?: boolean;
|
|
103
110
|
};
|
|
104
111
|
|
|
105
112
|
/**
|
|
@@ -107,10 +114,17 @@ export type LineChartProps = {
|
|
|
107
114
|
* sub-components. Derived from {@link LineChartProps} so the option types stay
|
|
108
115
|
* in sync.
|
|
109
116
|
*/
|
|
110
|
-
|
|
117
|
+
type LineSeriesRenderProps = Required<
|
|
111
118
|
Pick<LineChartProps, 'series' | 'showArea' | 'areaType'>
|
|
112
119
|
>;
|
|
113
120
|
|
|
121
|
+
export type LineChartLinesProps = LineSeriesRenderProps &
|
|
122
|
+
Pick<LineChartProps, 'connectNulls'> & {
|
|
123
|
+
stroke?: string;
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
export type LineChartTransitionLinesProps = Omit<LineChartLinesProps, 'stroke'>;
|
|
127
|
+
|
|
114
128
|
export type LineChartContentProps = LineChartLinesProps &
|
|
115
129
|
Required<Pick<LineChartProps, 'showXAxis' | 'showYAxis'>> &
|
|
116
130
|
Pick<LineChartProps, 'children'> & {
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { useTheme } from '@ledgerhq/lumen-ui-rnative';
|
|
2
2
|
import { useMemo } from 'react';
|
|
3
|
+
import Animated from 'react-native-reanimated';
|
|
3
4
|
import { Circle, G, Polygon, Text as SvgText } from 'react-native-svg';
|
|
4
5
|
|
|
5
6
|
import { projectPoint } from '../../utils/scales/scales';
|
|
6
7
|
import { useCartesianChartContext } from '../CartesianChart/context';
|
|
7
|
-
import {
|
|
8
|
+
import { useRevealFadeProps } from '../CartesianChart/RevealAnimation';
|
|
8
9
|
import { DEFAULT_SIZE, STROKE_WIDTH } from './constants';
|
|
9
10
|
import { useMagneticPointsContext } from './pointContext';
|
|
10
11
|
|
|
@@ -17,6 +18,8 @@ import {
|
|
|
17
18
|
useMagneticRegistration,
|
|
18
19
|
} from './utils';
|
|
19
20
|
|
|
21
|
+
const AnimatedG = Animated.createAnimatedComponent(G);
|
|
22
|
+
|
|
20
23
|
export function PointLabel({
|
|
21
24
|
textAnchor = 'middle',
|
|
22
25
|
...props
|
|
@@ -50,7 +53,7 @@ export function Point({
|
|
|
50
53
|
}: Readonly<PointProps>) {
|
|
51
54
|
const { getXScale, getYScale, getXAxisConfig, drawingArea } =
|
|
52
55
|
useCartesianChartContext();
|
|
53
|
-
const
|
|
56
|
+
const fadeProps = useRevealFadeProps();
|
|
54
57
|
const magneticContext = useMagneticPointsContext();
|
|
55
58
|
|
|
56
59
|
useMagneticRegistration(magnetic, dataX, getXAxisConfig, magneticContext);
|
|
@@ -79,7 +82,7 @@ export function Point({
|
|
|
79
82
|
const Label = LabelComponent ?? PointLabel;
|
|
80
83
|
|
|
81
84
|
return (
|
|
82
|
-
<
|
|
85
|
+
<AnimatedG testID='point-group' onPress={onPress} animatedProps={fadeProps}>
|
|
83
86
|
{!hidePoint && (
|
|
84
87
|
<Circle
|
|
85
88
|
testID='point-circle'
|
|
@@ -103,6 +106,6 @@ export function Point({
|
|
|
103
106
|
{resolvedLabel}
|
|
104
107
|
</Label>
|
|
105
108
|
)}
|
|
106
|
-
</
|
|
109
|
+
</AnimatedG>
|
|
107
110
|
);
|
|
108
111
|
}
|
|
@@ -1,13 +1,16 @@
|
|
|
1
|
-
import { describe, expect, it, jest } from '@jest/globals';
|
|
1
|
+
import { beforeEach, describe, expect, it, jest } from '@jest/globals';
|
|
2
2
|
import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
|
|
3
3
|
import { ThemeProvider } from '@ledgerhq/lumen-ui-rnative';
|
|
4
4
|
import { fireEvent, render } from '@testing-library/react-native';
|
|
5
|
+
import * as Haptics from 'expo-haptics';
|
|
5
6
|
import type { ReactNode } from 'react';
|
|
6
7
|
import { Pressable, Text } from 'react-native';
|
|
7
8
|
|
|
8
9
|
import { CartesianChart } from '../CartesianChart';
|
|
9
10
|
import { useScrubberContext } from './context';
|
|
10
11
|
|
|
12
|
+
const impactAsyncMock = jest.mocked(Haptics.impactAsync);
|
|
13
|
+
|
|
11
14
|
const sampleSeries = [
|
|
12
15
|
{ id: 's1', stroke: '#7B61FF', data: [10, 20, 30, 40, 50] },
|
|
13
16
|
];
|
|
@@ -220,4 +223,83 @@ describe('ScrubberProvider', () => {
|
|
|
220
223
|
fireEvent.press(getByTestId('set-position'));
|
|
221
224
|
expect(onScrubberPositionChange).not.toHaveBeenCalled();
|
|
222
225
|
});
|
|
226
|
+
|
|
227
|
+
describe('haptic feedback', () => {
|
|
228
|
+
const ContextTrigger = () => {
|
|
229
|
+
const { onScrubberPositionChange: updatePosition } = useScrubberContext();
|
|
230
|
+
return (
|
|
231
|
+
<>
|
|
232
|
+
<Pressable testID='enter' onPress={() => updatePosition(2)} />
|
|
233
|
+
<Pressable testID='move' onPress={() => updatePosition(3)} />
|
|
234
|
+
<Pressable testID='exit' onPress={() => updatePosition(undefined)} />
|
|
235
|
+
</>
|
|
236
|
+
);
|
|
237
|
+
};
|
|
238
|
+
|
|
239
|
+
const renderTrigger = (series = sampleSeries) =>
|
|
240
|
+
render(
|
|
241
|
+
<Wrapper>
|
|
242
|
+
<CartesianChart
|
|
243
|
+
series={series}
|
|
244
|
+
width={400}
|
|
245
|
+
height={200}
|
|
246
|
+
enableScrubbing={true}
|
|
247
|
+
>
|
|
248
|
+
<ContextTrigger />
|
|
249
|
+
</CartesianChart>
|
|
250
|
+
</Wrapper>,
|
|
251
|
+
);
|
|
252
|
+
|
|
253
|
+
beforeEach(() => {
|
|
254
|
+
impactAsyncMock.mockClear();
|
|
255
|
+
});
|
|
256
|
+
|
|
257
|
+
it('triggers light haptic feedback once when entering from idle', () => {
|
|
258
|
+
const { getByTestId } = renderTrigger();
|
|
259
|
+
|
|
260
|
+
fireEvent.press(getByTestId('enter'));
|
|
261
|
+
|
|
262
|
+
expect(impactAsyncMock).toHaveBeenCalledTimes(1);
|
|
263
|
+
expect(impactAsyncMock).toHaveBeenCalledWith('light');
|
|
264
|
+
});
|
|
265
|
+
|
|
266
|
+
it('does not re-trigger haptic feedback while moving between indices', () => {
|
|
267
|
+
const { getByTestId } = renderTrigger();
|
|
268
|
+
|
|
269
|
+
fireEvent.press(getByTestId('enter'));
|
|
270
|
+
fireEvent.press(getByTestId('move'));
|
|
271
|
+
|
|
272
|
+
expect(impactAsyncMock).toHaveBeenCalledTimes(1);
|
|
273
|
+
});
|
|
274
|
+
|
|
275
|
+
it('does not trigger haptic feedback when exiting the scrubber', () => {
|
|
276
|
+
const { getByTestId } = renderTrigger();
|
|
277
|
+
|
|
278
|
+
fireEvent.press(getByTestId('enter'));
|
|
279
|
+
fireEvent.press(getByTestId('exit'));
|
|
280
|
+
|
|
281
|
+
expect(impactAsyncMock).toHaveBeenCalledTimes(1);
|
|
282
|
+
});
|
|
283
|
+
|
|
284
|
+
it('re-triggers haptic feedback when re-entering after an exit', () => {
|
|
285
|
+
const { getByTestId } = renderTrigger();
|
|
286
|
+
|
|
287
|
+
fireEvent.press(getByTestId('enter'));
|
|
288
|
+
fireEvent.press(getByTestId('exit'));
|
|
289
|
+
fireEvent.press(getByTestId('move'));
|
|
290
|
+
|
|
291
|
+
expect(impactAsyncMock).toHaveBeenCalledTimes(2);
|
|
292
|
+
});
|
|
293
|
+
|
|
294
|
+
it('does not trigger haptic feedback when dataLength is 0', () => {
|
|
295
|
+
const emptySeries = [
|
|
296
|
+
{ id: 's1', stroke: '#7B61FF', data: [] as number[] },
|
|
297
|
+
];
|
|
298
|
+
const { getByTestId } = renderTrigger(emptySeries);
|
|
299
|
+
|
|
300
|
+
fireEvent.press(getByTestId('enter'));
|
|
301
|
+
|
|
302
|
+
expect(impactAsyncMock).not.toHaveBeenCalled();
|
|
303
|
+
});
|
|
304
|
+
});
|
|
223
305
|
});
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { triggerHapticFeedback } from '@ledgerhq/lumen-ui-rnative';
|
|
1
2
|
import { useCallback, useMemo, useRef, useState } from 'react';
|
|
2
3
|
import { StyleSheet, View } from 'react-native';
|
|
3
4
|
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
|
@@ -78,6 +79,15 @@ export function ScrubberProvider({
|
|
|
78
79
|
latest.current.magnetRadius = magnetRadius;
|
|
79
80
|
latest.current.sortedMagnets = sortedMagnets;
|
|
80
81
|
|
|
82
|
+
const handleHapticFeedback = useCallback(
|
|
83
|
+
(ref: typeof latest.current, clamped: number | undefined) => {
|
|
84
|
+
if (ref.lastIndex === undefined && clamped !== undefined) {
|
|
85
|
+
triggerHapticFeedback('light');
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
[],
|
|
89
|
+
);
|
|
90
|
+
|
|
81
91
|
const setScrubberPositionAndNotify = useCallback(
|
|
82
92
|
(index: number | undefined) => {
|
|
83
93
|
const ref = latest.current;
|
|
@@ -86,11 +96,15 @@ export function ScrubberProvider({
|
|
|
86
96
|
? undefined
|
|
87
97
|
: clamp(index, 0, ref.dataLength - 1);
|
|
88
98
|
if (clamped === ref.lastIndex) return;
|
|
99
|
+
|
|
100
|
+
handleHapticFeedback(ref, clamped);
|
|
101
|
+
|
|
89
102
|
ref.lastIndex = clamped;
|
|
103
|
+
|
|
90
104
|
setScrubberPosition(clamped);
|
|
91
105
|
ref.onChange?.(clamped);
|
|
92
106
|
},
|
|
93
|
-
[],
|
|
107
|
+
[handleHapticFeedback],
|
|
94
108
|
);
|
|
95
109
|
|
|
96
110
|
const handlePositionChange = useCallback(
|
package/src/lib/utils/types.ts
CHANGED
|
@@ -62,6 +62,13 @@ export type Series = {
|
|
|
62
62
|
* @default 'bump'
|
|
63
63
|
*/
|
|
64
64
|
curve?: CurveType;
|
|
65
|
+
/**
|
|
66
|
+
* When true, skips null values and draws a continuous line across gaps.
|
|
67
|
+
* When false (default), null values create gaps in the line.
|
|
68
|
+
* Overridden by the chart-level `connectNulls` prop when that is set.
|
|
69
|
+
* @default false
|
|
70
|
+
*/
|
|
71
|
+
connectNulls?: boolean;
|
|
65
72
|
};
|
|
66
73
|
|
|
67
74
|
export type NumericScale =
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["RuntimeConstants","useMemo","Animated","ClipPath","Defs","Rect","useDataFingerprint","useRevealClipAnimation","OVERFLOW_BUFFER","RevealClipContext","jsx","_jsx","jsxs","_jsxs","DEFAULT_DURATION_IN_SECONDS","AnimatedRect","createAnimatedComponent","RevealClipDefs","children","drawingArea","series","animate","transitions","isDisabled","isAndroid","durationMs","enter","duration","dataFingerprint","clipId","animatedRectProps","contextValue","clipPathAttr","Provider","value","id","x","left","y","top","height","bottom","animatedProps"],"sourceRoot":"../../../../../../src","sources":["lib/Components/CartesianChart/RevealClip/RevealClipDefs.tsx"],"mappings":";;AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,OAAO,QAAQ,OAAO;AAE/B,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,QAAQ,EAAEC,IAAI,EAAEC,IAAI,QAAQ,kBAAkB;AAEvD,SAASC,kBAAkB,QAAQ,gCAA6B;AAChE,SAASC,sBAAsB,QAAQ,oCAAiC;AACxE,SAASC,eAAe,QAAQ,aAAU;AAE1C,SAASC,iBAAiB,QAAQ,cAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG9C,MAAMC,2BAA2B,GAAG,GAAG;AAEvC,MAAMC,YAAY,GAAGb,QAAQ,CAACc,uBAAuB,CAACX,IAAI,CAAC;AAE3D,OAAO,SAASY,cAAcA,CAAC;EAC7BC,QAAQ;EACRC,WAAW;EACXC,MAAM;EACNC,OAAO,GAAG,IAAI;EACdC;AACmB,CAAC,EAAE;EACtB;AACF;AACA;AACA;EACE,MAAMC,UAAU,GAAG,CAACF,OAAO,IAAIrB,gBAAgB,CAACwB,SAAS;EACzD,MAAMC,UAAU,GACd,CAACH,WAAW,EAAEI,KAAK,EAAEC,QAAQ,IAAIb,2BAA2B,IAAI,IAAI;EAEtE,MAAMc,eAAe,GAAGtB,kBAAkB,CAACc,MAAM,CAAC;EAClD,MAAM;IAAES,MAAM;IAAEC;EAAkB,CAAC,GAAGvB,sBAAsB,CAAC;IAC3DkB,UAAU;IACVN,WAAW;IACXS;EACF,CAAC,CAAC;EAEF,MAAMG,YAAY,GAAG9B,OAAO,CAC1B,OAAO;IAAE+B,YAAY,EAAE,QAAQH,MAAM;EAAI,CAAC,CAAC,EAC3C,CAACA,MAAM,CACT,CAAC;EAED,IAAIN,UAAU,EAAE;IACd,OAAOL,QAAQ;EACjB;EAEA,oBACEL,KAAA,CAACJ,iBAAiB,CAACwB,QAAQ;IAAuBC,KAAK,EAAEH,YAAa;IAAAb,QAAA,gBACpEP,IAAA,CAACP,IAAI;MAAAc,QAAA,eACHP,IAAA,CAACR,QAAQ;QAACgC,EAAE,EAAEN,MAAO;QAAAX,QAAA,eACnBP,IAAA,CAACI,YAAY;UACXqB,CAAC,EAAEjB,WAAW,CAACiB,CAAC,GAAG5B,eAAe,CAAC6B,IAAK;UACxCC,CAAC,EAAEnB,WAAW,CAACmB,CAAC,GAAG9B,eAAe,CAAC+B,GAAI;UACvCC,MAAM,EACJrB,WAAW,CAACqB,MAAM,GAAGhC,eAAe,CAAC+B,GAAG,GAAG/B,eAAe,CAACiC,MAC5D;UACDC,aAAa,EAAEZ;QAAkB,CAClC;MAAC,CACM;IAAC,CACP,CAAC,EACNZ,QAAQ;EAAA,GAbsBU,eAcL,CAAC;AAEjC","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["describe","it","expect","ledgerLiveThemes","ThemeProvider","render","Svg","OVERFLOW_BUFFER","useRevealClip","RevealClipDefs","jsx","_jsx","drawingArea","x","y","width","height","series","id","stroke","data","ClipConsumer","clipPath","testID","renderInSvg","ui","themes","colorScheme","children","getByTestId","transitions","enter","duration","toBeTruthy","UNSAFE_root","clipPaths","findAllByType","length","toBeGreaterThan","rects","rect","props","toBe","left","top","bottom","consumer","findByProps","toMatch","animate","toHaveLength","toBeUndefined"],"sourceRoot":"../../../../../../src","sources":["lib/Components/CartesianChart/RevealClip/RevealClipDefs.test.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import { createContext, useContext } from 'react';
|
|
4
|
-
export const RevealClipContext = /*#__PURE__*/createContext(undefined);
|
|
5
|
-
export const useRevealClip = () => {
|
|
6
|
-
return useContext(RevealClipContext)?.clipPathAttr;
|
|
7
|
-
};
|
|
8
|
-
//# sourceMappingURL=context.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","useContext","RevealClipContext","undefined","useRevealClip","clipPathAttr"],"sourceRoot":"../../../../../../src","sources":["lib/Components/CartesianChart/RevealClip/context.ts"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAMjD,OAAO,MAAMC,iBAAiB,gBAAGF,aAAa,CAE5CG,SAAS,CAAC;AAEZ,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAA0B;EACrD,OAAOH,UAAU,CAACC,iBAAiB,CAAC,EAAEG,YAAY;AACpD,CAAC","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["RevealClipDefs","useRevealClip"],"sourceRoot":"../../../../../../src","sources":["lib/Components/CartesianChart/RevealClip/index.ts"],"mappings":";;AAAA,SAASA,cAAc,QAAQ,qBAAkB;AACjD,SAASC,aAAa,QAAQ,cAAW","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":[],"sourceRoot":"../../../../../../src","sources":["lib/Components/CartesianChart/RevealClip/types.ts"],"mappings":"","ignoreList":[]}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import { useMemo } from 'react';
|
|
4
|
-
/**
|
|
5
|
-
* Stable signature of every series' data points, memoized on the `series`
|
|
6
|
-
* reference. Used to key the reveal-clip provider so the reveal animation only
|
|
7
|
-
* replays when the underlying data actually changes — not on unrelated
|
|
8
|
-
* re-renders such as scrubbing or hover.
|
|
9
|
-
*/
|
|
10
|
-
export const useDataFingerprint = series => {
|
|
11
|
-
return useMemo(() => series.map(s => s.data?.join(',') ?? '').join('|'), [series]);
|
|
12
|
-
};
|
|
13
|
-
//# sourceMappingURL=useDataFingerprint.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","useDataFingerprint","series","map","s","data","join"],"sourceRoot":"../../../../../../src","sources":["lib/Components/CartesianChart/hooks/useDataFingerprint.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAI/B;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,kBAAkB,GAAIC,MAAgB,IAAa;EAC9D,OAAOF,OAAO,CACZ,MAAME,MAAM,CAACC,GAAG,CAAEC,CAAC,IAAKA,CAAC,CAACC,IAAI,EAAEC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAACA,IAAI,CAAC,GAAG,CAAC,EAC1D,CAACJ,MAAM,CACT,CAAC;AACH,CAAC","ignoreList":[]}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import { useEffect, useId } from 'react';
|
|
4
|
-
import { useAnimatedProps, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
5
|
-
import { OVERFLOW_BUFFER } from "../utils.js";
|
|
6
|
-
export const useRevealClipAnimation = ({
|
|
7
|
-
durationMs,
|
|
8
|
-
drawingArea,
|
|
9
|
-
dataFingerprint
|
|
10
|
-
}) => {
|
|
11
|
-
const clipId = useId();
|
|
12
|
-
const width = useSharedValue(0);
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
width.value = 0;
|
|
15
|
-
width.value = withTiming(drawingArea.width + OVERFLOW_BUFFER.left + OVERFLOW_BUFFER.right, {
|
|
16
|
-
duration: durationMs
|
|
17
|
-
});
|
|
18
|
-
}, [drawingArea.width, durationMs, width, dataFingerprint]);
|
|
19
|
-
const animatedRectProps = useAnimatedProps(() => ({
|
|
20
|
-
width: width.value
|
|
21
|
-
}));
|
|
22
|
-
return {
|
|
23
|
-
clipId,
|
|
24
|
-
animatedRectProps
|
|
25
|
-
};
|
|
26
|
-
};
|
|
27
|
-
//# sourceMappingURL=useRevealClipAnimation.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","useId","useAnimatedProps","useSharedValue","withTiming","OVERFLOW_BUFFER","useRevealClipAnimation","durationMs","drawingArea","dataFingerprint","clipId","width","value","left","right","duration","animatedRectProps"],"sourceRoot":"../../../../../../src","sources":["lib/Components/CartesianChart/hooks/useRevealClipAnimation.ts"],"mappings":";;AAAA,SAASA,SAAS,EAAEC,KAAK,QAAQ,OAAO;AACxC,SACEC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,QACL,yBAAyB;AAGhC,SAASC,eAAe,QAAQ,aAAU;AAa1C,OAAO,MAAMC,sBAAsB,GAAGA,CAAC;EACrCC,UAAU;EACVC,WAAW;EACXC;AACyB,CAAC,KAAgC;EAC1D,MAAMC,MAAM,GAAGT,KAAK,CAAC,CAAC;EACtB,MAAMU,KAAK,GAAGR,cAAc,CAAC,CAAC,CAAC;EAE/BH,SAAS,CAAC,MAAM;IACdW,KAAK,CAACC,KAAK,GAAG,CAAC;IACfD,KAAK,CAACC,KAAK,GAAGR,UAAU,CACtBI,WAAW,CAACG,KAAK,GAAGN,eAAe,CAACQ,IAAI,GAAGR,eAAe,CAACS,KAAK,EAChE;MAAEC,QAAQ,EAAER;IAAW,CACzB,CAAC;EACH,CAAC,EAAE,CAACC,WAAW,CAACG,KAAK,EAAEJ,UAAU,EAAEI,KAAK,EAAEF,eAAe,CAAC,CAAC;EAE3D,MAAMO,iBAAiB,GAAGd,gBAAgB,CAAC,OAAO;IAChDS,KAAK,EAAEA,KAAK,CAACC;EACf,CAAC,CAAC,CAAC;EAEH,OAAO;IAAEF,MAAM;IAAEM;EAAkB,CAAC;AACtC,CAAC","ignoreList":[]}
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import type { RevealClipDefsProps } from './types';
|
|
2
|
-
export declare function RevealClipDefs({ children, drawingArea, series, animate, transitions, }: RevealClipDefsProps): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
|
|
3
|
-
//# sourceMappingURL=RevealClipDefs.d.ts.map
|
package/dist/typescript/src/lib/Components/CartesianChart/RevealClip/RevealClipDefs.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RevealClipDefs.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/CartesianChart/RevealClip/RevealClipDefs.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAMnD,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,WAAW,EACX,MAAM,EACN,OAAc,EACd,WAAW,GACZ,EAAE,mBAAmB,2WA0CrB"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
type RevealClipContextValue = {
|
|
2
|
-
clipPathAttr: string;
|
|
3
|
-
};
|
|
4
|
-
export declare const RevealClipContext: import("react").Context<RevealClipContextValue | undefined>;
|
|
5
|
-
export declare const useRevealClip: () => string | undefined;
|
|
6
|
-
export {};
|
|
7
|
-
//# sourceMappingURL=context.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/CartesianChart/RevealClip/context.ts"],"names":[],"mappings":"AAEA,KAAK,sBAAsB,GAAG;IAC5B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,6DAElB,CAAC;AAEb,eAAO,MAAM,aAAa,QAAO,MAAM,GAAG,SAEzC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/CartesianChart/RevealClip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../src/lib/Components/CartesianChart/RevealClip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAEhE,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,qBAAqB,CAAA;KAAE,CAAC;IAChD;;;OAGG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC"}
|