Skip to content

Commit 3d4d559

Browse files
hcopphcopp
authored
fix: make custom beacon chart stable in visreg (#331)
* fix: make custom beacon chart stable in visreg * Reuse sample data
1 parent 0b71577 commit 3d4d559

File tree

1 file changed

+52
-121
lines changed

1 file changed

+52
-121
lines changed

‎packages/web-visualization/src/chart/line/__stories__/LineChart.stories.tsx‎

Lines changed: 52 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ import {
4949
type SolidLineProps,
5050
} from '..';
5151

52+
const sampleData = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
53+
5254
export default {
5355
component: LineChart,
5456
title: 'Components/Chart/LineChart',
@@ -326,7 +328,7 @@ function Interaction() {
326328
series={[
327329
{
328330
id: 'prices',
329-
data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
331+
data: sampleData,
330332
},
331333
]}
332334
>
@@ -338,15 +340,14 @@ function Interaction() {
338340

339341
function Points() {
340342
const keyMarketShiftIndices = [4, 6, 7, 9, 10];
341-
const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
342343

343344
return (
344345
<CartesianChart
345346
height={{ base: 200, tablet: 225, desktop: 250 }}
346347
series={[
347348
{
348349
id: 'prices',
349-
data: data,
350+
data: sampleData,
350351
},
351352
]}
352353
>
@@ -374,21 +375,16 @@ function Points() {
374375
}
375376

376377
function BasicAccessible() {
377-
const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
378-
379378
// Chart-level accessibility label provides overview
380379
const chartAccessibilityLabel = useMemo(() => {
381-
const currentPrice = data[data.length - 1];
382-
return `Price chart showing trend over ${data.length} data points. Current value: ${currentPrice}. Use arrow keys to adjust view`;
383-
}, [data]);
380+
const currentPrice = sampleData[sampleData.length - 1];
381+
return `Price chart showing trend over ${sampleData.length} data points. Current value: ${currentPrice}. Use arrow keys to adjust view`;
382+
}, []);
384383

385384
// Scrubber-level accessibility label provides specific position info
386-
const scrubberAccessibilityLabel = useCallback(
387-
(index: number) => {
388-
return `Price at position ${index + 1} of ${data.length}: ${data[index]}`;
389-
},
390-
[data],
391-
);
385+
const scrubberAccessibilityLabel = useCallback((index: number) => {
386+
return `Price at position ${index + 1} of ${sampleData.length}: ${sampleData[index]}`;
387+
}, []);
392388

393389
return (
394390
<LineChart
@@ -400,7 +396,7 @@ function BasicAccessible() {
400396
series={[
401397
{
402398
id: 'prices',
403-
data: data,
399+
data: sampleData,
404400
},
405401
]}
406402
yAxis={{
@@ -414,21 +410,17 @@ function BasicAccessible() {
414410

415411
function AccessibleWithHeader() {
416412
const headerId = useId();
417-
const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
418413

419414
// Display label provides overview
420415
const displayLabel = useMemo(
421-
() => `Revenue chart showing trend. Current value: ${data[data.length - 1]}`,
422-
[data],
416+
() => `Revenue chart showing trend. Current value: ${sampleData[sampleData.length - 1]}`,
417+
[],
423418
);
424419

425420
// Scrubber-specific accessibility label
426-
const scrubberAccessibilityLabel = useCallback(
427-
(index: number) => {
428-
return `Viewing position ${index + 1} of ${data.length}, value: ${data[index]}`;
429-
},
430-
[data],
431-
);
421+
const scrubberAccessibilityLabel = useCallback((index: number) => {
422+
return `Viewing position ${index + 1} of ${sampleData.length}, value: ${sampleData[index]}`;
423+
}, []);
432424

433425
return (
434426
<VStack gap={2}>
@@ -444,7 +436,7 @@ function AccessibleWithHeader() {
444436
series={[
445437
{
446438
id: 'revenue',
447-
data: data,
439+
data: sampleData,
448440
},
449441
]}
450442
yAxis={{
@@ -471,7 +463,6 @@ function Gradients() {
471463
'teal',
472464
'chartreuse',
473465
];
474-
const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
475466

476467
const [currentSpectrumColor, setCurrentSpectrumColor] = useState('pink');
477468

@@ -503,17 +494,17 @@ function Gradients() {
503494
series={[
504495
{
505496
id: 'continuousGradient',
506-
data: data,
497+
data: sampleData,
507498
gradient: {
508499
stops: [
509500
{ offset: 0, color: `rgb(var(--${currentSpectrumColor}80))` },
510-
{ offset: Math.max(...data), color: `rgb(var(--${currentSpectrumColor}20))` },
501+
{ offset: Math.max(...sampleData), color: `rgb(var(--${currentSpectrumColor}20))` },
511502
],
512503
},
513504
},
514505
{
515506
id: 'discreteGradient',
516-
data: data.map((d) => d + 50),
507+
data: sampleData.map((d) => d + 50),
517508
// You can create a "discrete" gradient by having multiple stops at the same offset
518509
gradient: {
519510
stops: ({ min, max }) => [
@@ -535,7 +526,7 @@ function Gradients() {
535526
},
536527
{
537528
id: 'xAxisGradient',
538-
data: data.map((d) => d + 100),
529+
data: sampleData.map((d) => d + 100),
539530
gradient: {
540531
// You can also configure by the x-axis.
541532
axis: 'x',
@@ -624,12 +615,11 @@ function GainLossChart() {
624615
}
625616

626617
function HighLowPrice() {
627-
const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
628-
const minPrice = Math.min(...data);
629-
const maxPrice = Math.max(...data);
618+
const minPrice = Math.min(...sampleData);
619+
const maxPrice = Math.max(...sampleData);
630620

631-
const minPriceIndex = data.indexOf(minPrice);
632-
const maxPriceIndex = data.indexOf(maxPrice);
621+
const minPriceIndex = sampleData.indexOf(minPrice);
622+
const maxPriceIndex = sampleData.indexOf(maxPrice);
633623

634624
const formatPrice = useCallback((price: number) => {
635625
return `$${price.toLocaleString('en-US', {
@@ -645,7 +635,7 @@ function HighLowPrice() {
645635
series={[
646636
{
647637
id: 'prices',
648-
data: data,
638+
data: sampleData,
649639
},
650640
]}
651641
>
@@ -1622,7 +1612,7 @@ function CustomLabelComponent() {
16221612
series={[
16231613
{
16241614
id: 'prices',
1625-
data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
1615+
data: sampleData,
16261616
},
16271617
]}
16281618
>
@@ -1647,7 +1637,7 @@ function CustomBeaconStroke() {
16471637
series={[
16481638
{
16491639
id: 'prices',
1650-
data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
1640+
data: sampleData,
16511641
color: foregroundColor,
16521642
},
16531643
]}
@@ -1664,43 +1654,6 @@ function CustomBeaconStroke() {
16641654
}
16651655

16661656
function CustomBeaconSize() {
1667-
const dataCount = 14;
1668-
const minDataValue = 0;
1669-
const maxDataValue = 100;
1670-
const minStepOffset = 5;
1671-
const maxStepOffset = 20;
1672-
const updateInterval = 2000;
1673-
1674-
function generateNextValue(previousValue: number) {
1675-
const range = maxStepOffset - minStepOffset;
1676-
const offset = Math.random() * range + minStepOffset;
1677-
1678-
let direction;
1679-
if (previousValue >= maxDataValue) {
1680-
direction = -1;
1681-
} else if (previousValue <= minDataValue) {
1682-
direction = 1;
1683-
} else {
1684-
direction = Math.random() < 0.5 ? -1 : 1;
1685-
}
1686-
1687-
const newValue = previousValue + offset * direction;
1688-
return Math.max(minDataValue, Math.min(maxDataValue, newValue));
1689-
}
1690-
1691-
function generateInitialData() {
1692-
const data = [];
1693-
let previousValue = Math.random() * (maxDataValue - minDataValue) + minDataValue;
1694-
data.push(previousValue);
1695-
1696-
for (let i = 1; i < dataCount; i++) {
1697-
const newValue = generateNextValue(previousValue);
1698-
data.push(newValue);
1699-
previousValue = newValue;
1700-
}
1701-
return data;
1702-
}
1703-
17041657
const InvertedBeacon = useMemo(
17051658
() => (props: ScrubberBeaconProps) => (
17061659
<DefaultScrubberBeacon
@@ -1714,48 +1667,26 @@ function CustomBeaconSize() {
17141667
[],
17151668
);
17161669

1717-
const CustomBeaconSizeChart = memo(() => {
1718-
const [data, setData] = useState(generateInitialData);
1719-
1720-
useEffect(() => {
1721-
const intervalId = setInterval(() => {
1722-
setData((currentData) => {
1723-
const lastValue = currentData[currentData.length - 1] ?? 50;
1724-
const newValue = generateNextValue(lastValue);
1725-
return [...currentData.slice(1), newValue];
1726-
});
1727-
}, updateInterval);
1728-
1729-
return () => clearInterval(intervalId);
1730-
}, []);
1731-
1732-
return (
1733-
<LineChart
1734-
enableScrubbing
1735-
showArea
1736-
showYAxis
1737-
height={{ base: 150, tablet: 200, desktop: 250 }}
1738-
series={[
1739-
{
1740-
id: 'prices',
1741-
data,
1742-
color: 'var(--color-fg)',
1743-
},
1744-
]}
1745-
xAxis={{
1746-
range: ({ min, max }) => ({ min, max: max - 16 }),
1747-
}}
1748-
yAxis={{
1749-
showGrid: true,
1750-
domain: { min: 0, max: 100 },
1751-
}}
1752-
>
1753-
<Scrubber BeaconComponent={InvertedBeacon} />
1754-
</LineChart>
1755-
);
1756-
});
1757-
1758-
return <CustomBeaconSizeChart />;
1670+
return (
1671+
<LineChart
1672+
enableScrubbing
1673+
showArea
1674+
showYAxis
1675+
height={{ base: 150, tablet: 200, desktop: 250 }}
1676+
series={[
1677+
{
1678+
id: 'prices',
1679+
data: sampleData,
1680+
color: 'var(--color-fg)',
1681+
},
1682+
]}
1683+
yAxis={{
1684+
showGrid: true,
1685+
}}
1686+
>
1687+
<Scrubber BeaconComponent={InvertedBeacon} />
1688+
</LineChart>
1689+
);
17591690
}
17601691

17611692
export const All = () => {
@@ -1768,7 +1699,7 @@ export const All = () => {
17681699
series={[
17691700
{
17701701
id: 'prices',
1771-
data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
1702+
data: sampleData,
17721703
},
17731704
]}
17741705
/>
@@ -1807,7 +1738,7 @@ export const All = () => {
18071738
series={[
18081739
{
18091740
id: 'prices',
1810-
data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
1741+
data: sampleData,
18111742
},
18121743
]}
18131744
yAxis={{
@@ -1838,7 +1769,7 @@ export const All = () => {
18381769
series={[
18391770
{
18401771
id: 'prices',
1841-
data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
1772+
data: sampleData,
18421773
},
18431774
]}
18441775
xAxis={{
@@ -1907,7 +1838,7 @@ export const All = () => {
19071838
series={[
19081839
{
19091840
id: 'prices',
1910-
data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
1841+
data: sampleData,
19111842
color: 'var(--color-fgPositive)',
19121843
},
19131844
]}

0 commit comments

Comments
 (0)