Merge pull request #368 from lucafalasco/barstack-scale-fix

improve BarStack to work with all scales type
airbnb · Oct 5, 2018 · d070716 · d070716
2 parents e51d0e2 + f8087e1
commit d070716
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 22 deletions.
diff --git a/packages/vx-shape/src/shapes/BarStack.js b/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

diff --git a/packages/vx-shape/src/shapes/BarStackHorizontal.js b/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)),

diff --git a/packages/vx-shape/src/util/objHasMethod.js b/packages/vx-shape/src/util/objHasMethod.js
@@ -0,0 +1,3 @@
+export default function objHasMethod(obj, funcName) {
+  return !!obj[funcName] && typeof obj[funcName] === 'function';
+}
diff --git a/packages/vx-shape/test/BarStack.test.js b/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();

diff --git a/packages/vx-shape/test/BarStackHorizontal.test.js b/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();