improve BarStack to work with all scales type

packages/vx-scale/src/scales/band.js

@@ -11,6 +11,7 @@ export default ({
   tickFormat
 }) => {
   const scale = scaleBand();
+  scale.type = 'band';
 
   if (range) scale.range(range);
   if (rangeRound) scale.rangeRound(rangeRound);

packages/vx-scale/src/scales/linear.js

@@ -2,6 +2,7 @@ import { scaleLinear } from 'd3-scale';
 
 export default ({ range, rangeRound, domain, nice = false, clamp = false }) => {
   const scale = scaleLinear();
+  scale.type = 'linear';
 
   if (range) scale.range(range);
   if (rangeRound) scale.rangeRound(rangeRound);

packages/vx-scale/src/scales/log.js

@@ -2,6 +2,7 @@ import { scaleLog } from 'd3-scale';
 
 export default ({ range, rangeRound, domain, base, nice = false, clamp = false }) => {
   const scale = scaleLog();
+  scale.type = 'log';
 
   if (range) scale.range(range);
   if (rangeRound) scale.rangeRound(rangeRound);

packages/vx-scale/src/scales/ordinal.js

@@ -2,6 +2,7 @@ import { scaleOrdinal } from 'd3-scale';
 
 export default ({ range, domain, unknown }) => {
   const scale = scaleOrdinal();
+  scale.type = 'ordinal';
 
   if (range) scale.range(range);
   if (domain) scale.domain(domain);

packages/vx-scale/src/scales/point.js

@@ -2,6 +2,7 @@ import { scalePoint } from 'd3-scale';
 
 export default ({ range, rangeRound, domain, padding, align, nice = false }) => {
   const scale = scalePoint();
+  scale.type = 'point';
 
   if (range) scale.range(range);
   if (rangeRound) scale.rangeRound(rangeRound);

packages/vx-scale/src/scales/power.js

@@ -2,6 +2,7 @@ import { scalePow } from 'd3-scale';
 
 export default ({ range, rangeRound, domain, exponent, nice = false, clamp = false }) => {
   const scale = scalePow();
+  scale.type = 'power';
 
   if (range) scale.range(range);
   if (rangeRound) scale.rangeRound(rangeRound);

packages/vx-scale/src/scales/quantile.js

@@ -2,6 +2,7 @@ import { scaleQuantile } from 'd3-scale';
 
 export default ({ range, domain }) => {
   const scale = scaleQuantile();
+  scale.type = 'quantile';
 
   if (range) scale.range(range);
   if (domain) scale.domain(domain);

packages/vx-scale/src/scales/quantize.js

@@ -2,6 +2,7 @@ import { scaleQuantize } from 'd3-scale';
 
 export default ({ range, domain, ticks, tickFormat, nice = false }) => {
   const scale = scaleQuantize();
+  scale.type = 'quantize';
 
   if (range) scale.range(range);
   if (domain) scale.domain(domain);

packages/vx-scale/src/scales/threshold.js

@@ -2,6 +2,7 @@ import { scaleThreshold } from 'd3-scale';
 
 export default ({ range, domain }) => {
   const scale = scaleThreshold();
+  scale.type = 'threshold';
 
   if (range) scale.range(range);
   if (domain) scale.domain(domain);

packages/vx-scale/src/scales/time.js

@@ -2,6 +2,7 @@ import { scaleTime } from 'd3-scale';
 
 export default ({ range, rangeRound, domain, nice = false, clamp = false }) => {
   const scale = scaleTime();
+  scale.type = 'time';
 
   if (range) scale.range(range);
   if (rangeRound) scale.rangeRound(rangeRound);

packages/vx-scale/src/scales/utc.js

@@ -2,6 +2,7 @@ import { scaleUtc } from 'd3-scale';
 
 export default ({ range, rangeRound, domain, nice = false, clamp = false }) => {
   const scale = scaleUtc();
+  scale.type = 'utc';
 
   if (range) scale.range(range);
   if (rangeRound) scale.rangeRound(rangeRound);

packages/vx-shape/src/shapes/BarStack.js

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import { Group } from '@vx/group';
 import Bar from './Bar';
 import { stack as d3stack } from 'd3-shape';
+import objHasMethod from '../util/objHasMethod';
 
 export default function BarStack({
   data,
@@ -15,15 +16,14 @@ export default function BarStack({
   yScale,
   zScale,
   keys,
+  width,
   height,
   ...restProps
 }) {
   const series = d3stack().keys(keys)(data);
   const format = xScale.tickFormat ? xScale.tickFormat() : d => d;
-  const bandwidth = xScale.bandwidth();
-  const step = xScale.step();
-  const paddingInner = xScale.paddingInner();
-  const paddingOuter = xScale.paddingOuter();
+  const xRange = xScale.range();
+  const xDomain = xScale.domain();
   return (
     <Group className={cx('vx-bar-stack', className)} top={top} left={left}>
       {series &&
@@ -32,23 +32,31 @@ export default function BarStack({
             <Group key={`vx-bar-stack-${i}`}>
               {s.map((d, ii) => {
                 const barHeight = yScale(d[0]) - yScale(d[1]);
+                const barWidth =
+                  width ||
+                  (objHasMethod(xScale, 'bandwidth')
+                    ? xScale.bandwidth()
+                    : Math.abs(xRange[xRange.length - 1] - xRange[0]) / xDomain.length);
+
+                const barX = objHasMethod(xScale, 'bandwidth')
+                  ? xScale(x(d.data))
+                  : xScale(x(d.data)) - barWidth / 2;
                 return (
                   <Bar
                     key={`bar-group-bar-${i}-${ii}-${s.key}`}
-                    x={xScale(x(d.data))}
+                    x={barX}
                     y={yScale(d[1])}
-                    width={bandwidth}
+                    width={barWidth}
                     height={barHeight}
                     fill={zScale(s.key)}
                     data={{
-                      bandwidth,
-                      paddingInner,
-                      paddingOuter,
-                      step,
+                      paddingInner: objHasMethod(xScale, 'paddingInner') && xScale.paddingInner(),
+                      paddingOuter: objHasMethod(xScale, 'paddingOuter') && xScale.paddingOuter(),
+                      step: objHasMethod(xScale, 'step') && xScale.step(),
                       key: s.key,
                       value: d[1],
                       height: barHeight,
-                      width: bandwidth,
+                      width: barWidth,
                       x: x(d.data),
                       xFormatted: format(x(d.data)),
                       data: d.data

packages/vx-shape/src/shapes/BarStackHorizontal.js

@@ -4,6 +4,7 @@ import cx from 'classnames';
 import { Group } from '@vx/group';
 import Bar from './Bar';
 import { stack as d3stack } from 'd3-shape';
+import objHasMethod from '../util/objHasMethod';
 
 export default function BarStackHorizontal({
   data,
@@ -15,15 +16,14 @@ export default function BarStackHorizontal({
   yScale,
   zScale,
   keys,
+  width,
   height,
   ...restProps
 }) {
   const series = d3stack().keys(keys)(data);
   const format = yScale.tickFormat ? yScale.tickFormat() : d => d;
-  const bandwidth = yScale.bandwidth();
-  const step = yScale.step();
-  const paddingInner = yScale.paddingInner();
-  const paddingOuter = yScale.paddingOuter();
+  const yRange = yScale.range();
+  const yDomain = yScale.domain();
   return (
     <Group className={cx('vx-bar-stack-horizontal', className)} top={top} left={left}>
       {series &&
@@ -32,22 +32,30 @@ export default function BarStackHorizontal({
             <Group key={`vx-bar-stack-horizontal-${i}`}>
               {s.map((d, ii) => {
                 const barWidth = xScale(d[1]) - xScale(d[0]);
+                const barHeight =
+                  width ||
+                  (objHasMethod(yScale, 'bandwidth')
+                    ? yScale.bandwidth()
+                    : Math.abs(yRange[yRange.length - 1] - yRange[0]) / yDomain.length);
+
+                const barY = objHasMethod(yScale, 'bandwidth')
+                  ? yScale(y(d.data))
+                  : yScale(y(d.data)) - barHeight / 2;
                 return (
                   <Bar
                     key={`bar-group-bar-${i}-${ii}-${s.key}`}
                     x={xScale(d[0])}
-                    y={yScale(y(d.data))}
+                    y={barY}
                     width={barWidth}
-                    height={bandwidth}
+                    height={barHeight}
                     fill={zScale(s.key)}
                     data={{
-                      bandwidth,
-                      paddingInner,
-                      paddingOuter,
-                      step,
+                      paddingInner: objHasMethod(yScale, 'paddingInner') && yScale.paddingInner(),
+                      paddingOuter: objHasMethod(yScale, 'paddingOuter') && yScale.paddingOuter(),
+                      step: objHasMethod(yScale, 'step') && yScale.step(),
                       key: s.key,
                       value: d[0],
-                      height: bandwidth,
+                      height: barHeight,
                       width: barWidth,
                       y: y(d.data),
                       yFormatted: format(y(d.data)),

packages/vx-shape/src/util/objHasMethod.js

@@ -0,0 +1,3 @@
+export default function objHasMethod(obj, funcName) {
+  return !!obj[funcName] && typeof obj[funcName] === 'function';
+}

packages/vx-shape/test/BarStack.test.js

@@ -3,6 +3,8 @@ import { BarStack } from '../src';
 import { shallow } from 'enzyme';
 
 const xScale = jest.fn();
+xScale.domain = () => [0, 100];
+xScale.range = () => [0, 100];
 xScale.bandwidth = jest.fn();
 xScale.step = jest.fn();
 xScale.paddingInner = jest.fn();

packages/vx-shape/test/BarStackHorizontal.test.js

@@ -3,6 +3,8 @@ import { BarStackHorizontal } from '../src';
 import { shallow } from 'enzyme';
 
 const yScale = jest.fn();
+yScale.domain = () => [0, 100];
+yScale.range = () => [0, 100];
 yScale.bandwidth = jest.fn();
 yScale.step = jest.fn();
 yScale.paddingInner = jest.fn();