fix(barRatio): apply barRation to single bar

FormidableLabs · Jul 26, 2018 · 1b2e817 · 1b2e817
1 parent 2cdfbae
commit 1b2e817
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/packages/victory-bar/src/bar.js b/packages/victory-bar/src/bar.js
@@ -32,7 +32,8 @@ export default class Bar extends React.Component {
   };
 
   static defaultProps = {
-    pathComponent: <Path/>
+    pathComponent: <Path/>,
+    defaultBarWidth: 8
   };
 
   getPosition(props, width) {
@@ -189,13 +190,12 @@ export default class Bar extends React.Component {
     if (style.width) {
       return style.width;
     }
-    const { scale, data } = props;
+    const { scale, data, defaultBarWidth } = props;
     const range = scale.x.range();
     const extent = Math.abs(range[1] - range[0]);
     const bars = data.length + 2;
     const barRatio = props.barRatio || 0.5;
-    // eslint-disable-next-line no-magic-numbers
-    const defaultWidth = data.length < 2 ? 8 : (barRatio * extent / bars);
+    const defaultWidth = barRatio * (data.length < 2 ? defaultBarWidth : extent / bars);
     return Math.max(1, defaultWidth);
   }
 

diff --git a/stories/victory-bar.js b/stories/victory-bar.js
@@ -54,13 +54,16 @@ storiesOf("VictoryBar.barRatio", module)
   .add("barRatio = 0.5", () => <VictoryBar data={getData(7)} barRatio={0.5}/>)
   .add("barRatio = 0.75", () => <VictoryBar data={getData(7)} barRatio={0.75}/>)
   .add("barRatio = 1", () => <VictoryBar data={getData(7)} barRatio={1}/>)
+  .add("barRatio = 0.5 (single bar)", () => <VictoryBar data={getData(1)} barRatio={0.5}/>)
   .add("barRatio = 0.01 (horizontal)", () => (
     <VictoryBar horizontal data={getData(7)} barRatio={0.01}/>
   ))
   .add("barRatio = 0.5 (horizontal)", () => (
     <VictoryBar horizontal data={getData(7)} barRatio={0.5}/>
   ))
   .add("barRatio = 1 (horizontal)", () => <VictoryBar horizontal data={getData(7)} barRatio={1}/>)
+  .add("barRatio = 0.5 (horizontal, single bar)",
+    () => <VictoryBar horizontal data={getData(1)} barRatio={0.5}/>)
   .add("barRatio = 0.01 (50 bars)", () => <VictoryBar data={getData(50)} barRatio={0.01}/>)
   .add("barRatio = 0.5 (50 bars)", () => <VictoryBar data={getData(50)} barRatio={0.5}/>)
   .add("barRatio = 1 (50 bars)", () => <VictoryBar data={getData(50)} barRatio={1}/>);

diff --git a/test/client/spec/victory-bar/bar.spec.js b/test/client/spec/victory-bar/bar.spec.js
@@ -59,4 +59,20 @@ describe("victory-primitives/bar", () => {
 
     expect(Math.floor(barShape.width)).to.eql(3);
   });
+
+  it("should allow modification of width by passing barRatio", () => {
+    const props = Object.assign({}, baseProps,
+      {
+        data: [
+          { _x: 2, x: 2, _y: 4, y: 4, eventKey: 0 }
+        ],
+        barRatio: 3
+      }
+    );
+
+    const wrapper = mount(<Bar {...props}/>);
+    const barShape = SvgTestHelper.getBarShape(wrapper);
+
+    expect(Math.floor(barShape.width)).to.eql(24);
+  });
 });