new(xychart): add BarStack series

[williaster]

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]

I moved a lot of the Example params into ExampleControls

[williaster]

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

[williaster]

this mirrors the logic in BarStack/BarStackHorizontal

[kristw]

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>
);

[williaster]

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

[coveralls]

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.

[kristw]

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

[williaster]

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

[kristw]

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>
);