new(xychart): add BarStack series #865

williaster · 2020-10-09T23:45:08Z

TODO

Add tests (separate PR for reviewability test(xychart): add BarStack tests #866 )

🚀 Enhancements

This PR adds BarStack to @visx/xychart with an API that wraps BarSeries (this was planned in the POC, but could simplify in the future):

<BarStack>
  <BarSeries dataKey="sf" data={..} />
  <BarSeries dataKey="ny" data={..} />
</BarStack>

It also updates the /xychart demo

adds option to render BarStack (in the demo this is not compatible with LineSeries/BarSeries because they share dataKeys so controls are disabled accordingly)
adds option to render negative values. this lets me test that negative stacks work correctly (ditto for other Series types)

Tooltip

Negative values

Horizontal

Some notes on the implementation

The general flow is:
1. collect props.data from child BarSeries
2. create combined stacked data structure (using child props.dataKey)
3. register data in the DataContext for each child dataKey, but update data + x/yAccessor to use the stacked data (so that scales are computed correctly)
4. render BarStack using data + scales from DataContext
I first wrote this using @visx/shapes BarStack(Horizontal), but it doesn't allow us to use the stacked data independently of their scaled values (i.e., it creates the stack data structure and scales the stacked values). For the DataContext scales + findNearestDatum functions (TooltipContext), we need to add the stacked data itself as described in prev point
BarStacks implementation is currently is incompatible with Tooltip.snapTooltipToDatumX/Y.
- This is tricky because Tooltip attempts to use DataContext for data + x/yAccessors to map the TooltipContext.tooltipData to the scaled positions. However tooltipData is typed as Datum, and the x/yAccessors + x/yScales from DataContext use the stacked SeriesDatum type. Will noodle on this more.

@kristw @techniq

williaster · 2020-10-09T23:45:41Z

packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx

@@ -17,20 +18,19 @@ type Props = {
  height: number;
 };

-const xScaleConfig = { type: 'band', paddingInner: 0.3 } as const;


I moved a lot of the Example params into ExampleControls

williaster · 2020-10-09T23:46:51Z

packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx

        sharedTooltip,
        showGridColumns,
        showGridRows,
        showHorizontalCrosshair,
        showTooltip,
        showVerticalCrosshair,
-        snapTooltipToDatumX,
-        snapTooltipToDatumY,
+        snapTooltipToDatumX: renderBarOrBarStack === 'bar' && snapTooltipToDatumX,


moving stuff in here allows us to handle couple control logic like this

williaster · 2020-10-09T23:47:41Z

packages/visx-xychart/src/components/series/BarStack.tsx

+        const entry = dataRegistry.get(barStack.key);
+
+        return entry
+          ? barStack.map((bar, index) => {


this mirrors the logic in BarStack/BarStackHorizontal

Perhaps do horizontal and other conditions outside the loop when possible.

const thickness = getBandwidth(horizontal ? yScale : xScale); const halfThickness = thickness / 2; let widthFn; let heightFn; let xFn; let yFn; if (horizontal) { widthFn = bar => (xScale(getSecondItem(bar)) || 0) - (xScale(getFirstItem(bar)) || 0); heightFn = () => thickness; xFn = bar => xScale(getFirstItem(bar)); yFn = 'bandwidth' in yScale ? bar => yScale(getStackValue(bar.data)) : bar => Math.max((yScale(getStackValue(bar.data)) || 0) - halfThickness); } else { widthFn = () => thickness; heightFn = bar => (yScale(getFirstItem(bar)) || 0) - (yScale(getSecondItem(bar)) || 0); xFn = 'bandwidth' in xScale ? bar => xScale(getStackValue(bar.data)) : bar => Math.max((xScale(getStackValue(bar.data)) || 0) - halfThickness); } return ( <g className="visx-bar-stack"> {stackedData.map((barStack, stackIndex) => { const entry = dataRegistry.get(barStack.key); if (!entry) return null; const y = yFn ?? (bar => yScale(entry.yAccessor(bar))); return barStack.map((bar, index) => { const barX = xFn(bar); if (!isValidNumber(barX)) return null; const barY = y(bar); if (!isValidNumber(barY)) return null; return ( <rect key={`${stackIndex}-${barStack.key}-${index}`} x={barX ?? 0} y={barY ?? 0} width={widthFn(bar)} height={heightFn(bar)} fill={colorScale(barStack.key)} stroke="transparent" /> ); }); })} </g> );

great suggestion, also the special yFn handling made me realize I didn't actually need the entry accessor function 👍

coveralls · 2020-10-12T21:42:23Z

Pull Request Test Coverage Report for Build 207

91 of 101 (90.1%) changed or added relevant lines in 9 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage increased (+1.1%) to 58.131%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/visx-xychart/test/mocks/getDataContext.ts	1	3	33.33%
packages/visx-xychart/src/components/series/BarStack.tsx	51	59	86.44%

Totals
Change from base Build 166:	1.1%
Covered Lines:	1378
Relevant Lines:	2280

💛 - Coveralls

kristw

Mostly minor perf suggestion.

packages/visx-xychart/src/components/series/BarStack.tsx

kristw · 2020-10-15T05:39:33Z

packages/visx-xychart/src/components/series/BarStack.tsx

+                  : Math.max((yScale(getStackValue(bar.data)) || 0) - barThickness / 2)
+                : yScale(entry.yAccessor(bar));
+
+              const barX: number | undefined = horizontal


Why does this one have type defined but barY does not?
Usually eslint doesn't like nested ternary?

type was an oversight, I think we have nested ternary disabled in this repo because it's so often useful

kristw · 2020-10-15T06:18:33Z

packages/visx-xychart/src/components/series/BarStack.tsx

+        const entry = dataRegistry.get(barStack.key);
+
+        return entry
+          ? barStack.map((bar, index) => {


Perhaps do horizontal and other conditions outside the loop when possible.

const thickness = getBandwidth(horizontal ? yScale : xScale); const halfThickness = thickness / 2; let widthFn; let heightFn; let xFn; let yFn; if (horizontal) { widthFn = bar => (xScale(getSecondItem(bar)) || 0) - (xScale(getFirstItem(bar)) || 0); heightFn = () => thickness; xFn = bar => xScale(getFirstItem(bar)); yFn = 'bandwidth' in yScale ? bar => yScale(getStackValue(bar.data)) : bar => Math.max((yScale(getStackValue(bar.data)) || 0) - halfThickness); } else { widthFn = () => thickness; heightFn = bar => (yScale(getFirstItem(bar)) || 0) - (yScale(getSecondItem(bar)) || 0); xFn = 'bandwidth' in xScale ? bar => xScale(getStackValue(bar.data)) : bar => Math.max((xScale(getStackValue(bar.data)) || 0) - halfThickness); } return ( <g className="visx-bar-stack"> {stackedData.map((barStack, stackIndex) => { const entry = dataRegistry.get(barStack.key); if (!entry) return null; const y = yFn ?? (bar => yScale(entry.yAccessor(bar))); return barStack.map((bar, index) => { const barX = xFn(bar); if (!isValidNumber(barX)) return null; const barY = y(bar); if (!isValidNumber(barY)) return null; return ( <rect key={`${stackIndex}-${barStack.key}-${index}`} x={barX ?? 0} y={barY ?? 0} width={widthFn(bar)} height={heightFn(bar)} fill={colorScale(barStack.key)} stroke="transparent" /> ); }); })} </g> );

packages/visx-xychart/src/utils/combineBarStackData.ts

packages/visx-xychart/src/utils/getBarStackRegistryData.ts

new(demo/xychart): add BarStack new(xychart): add horizontal support to BarStack new(demo/xychart): add negative values, refactor accessors internal(xychart/barstack): refactor to use d3-shape :/ new(xychart): clean up BarStack, add mouse events fix(demo/xychart): disable tooltip snapping when using BarStack internal(xychart/BarStack): add util comments, simplify combineBarStackData types(xychart): fix some registry types internal(xychart/BarStack): make perf improvements

* tes(xychart/BarStack): add tests * test(xychart/combineBarStackData): add tests * test(xychart/findNearestStackDatum): add tests * internal(xychart): remove console logs in tests

coveralls · 2024-11-24T01:16:50Z

Pull Request Test Coverage Report for Build 203

Details

11 of 103 (10.68%) changed or added relevant lines in 9 files are covered.
No unchanged relevant lines lost coverage.
Overall coverage decreased (-2.4%) to 54.609%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/visx-xychart/src/typeguards/isChildWithProps.ts	0	1	0.0%
packages/visx-xychart/src/utils/findNearestStackDatum.ts	0	4	0.0%
packages/visx-xychart/src/utils/getBarStackRegistryData.ts	2	15	13.33%
packages/visx-xychart/src/utils/combineBarStackData.ts	1	16	6.25%
packages/visx-xychart/src/components/series/BarStack.tsx	0	59	0.0%

Totals
Change from base Build 166:	-2.4%
Covered Lines:	1288
Relevant Lines:	2279

💛 - Coveralls

williaster added 🚀enhancement @visx/xychart labels Oct 9, 2020

williaster requested a review from kristw October 9, 2020 23:45

williaster commented Oct 9, 2020

View reviewed changes

This was referenced Oct 13, 2020

test(xychart): add BarStack tests #866

Merged

new(xychart): add BarGroup #870

Merged

kristw approved these changes Oct 15, 2020

View reviewed changes

williaster force-pushed the chris--xychart-stackedbar branch from c8ba503 to 2a5a8dd Compare October 15, 2020 23:00

test(xychart): add BarStack tests (#866)

9612b6f

* tes(xychart/BarStack): add tests * test(xychart/combineBarStackData): add tests * test(xychart/findNearestStackDatum): add tests * internal(xychart): remove console logs in tests

williaster merged commit bcae42d into master Oct 15, 2020

williaster deleted the chris--xychart-stackedbar branch October 15, 2020 23:20

williaster added this to the 1.1.0 milestone Oct 17, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

new(xychart): add BarStack series #865

new(xychart): add BarStack series #865

williaster commented Oct 9, 2020 •

edited

Loading

williaster Oct 9, 2020

williaster Oct 9, 2020

williaster Oct 9, 2020

kristw Oct 15, 2020

williaster Oct 15, 2020

coveralls commented Oct 12, 2020 •

edited

Loading

kristw left a comment

kristw Oct 15, 2020

williaster Oct 15, 2020

kristw Oct 15, 2020

coveralls commented Nov 24, 2024 •

edited

Loading

new(xychart): add BarStack series #865

new(xychart): add BarStack series #865

Conversation

williaster commented Oct 9, 2020 • edited Loading

🚀 Enhancements

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented Oct 12, 2020 • edited Loading

Pull Request Test Coverage Report for Build 207

💛 - Coveralls

kristw left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented Nov 24, 2024 • edited Loading

Pull Request Test Coverage Report for Build 203

Details

💛 - Coveralls

williaster commented Oct 9, 2020 •

edited

Loading

coveralls commented Oct 12, 2020 •

edited

Loading

coveralls commented Nov 24, 2024 •

edited

Loading