feat(bar): add ability to define bar chart min/max value

plouc · Sep 5, 2017 · d9b9bda · d9b9bda
1 parent 69269a6
commit d9b9bda
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 70 deletions.
diff --git a/src/components/axes/Axis.js b/src/components/axes/Axis.js
@@ -28,7 +28,7 @@ export const axisPropType = PropTypes.shape({
     tickSize: PropTypes.number,
     tickPadding: PropTypes.number,
     tickRotation: PropTypes.number,
-    format: PropTypes.func,
+    format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
     // legend
     legend: PropTypes.string,

diff --git a/src/components/charts/bar/Bar.js b/src/components/charts/bar/Bar.js
@@ -19,20 +19,50 @@ import Axes from '../../axes/Axes'
 import BarItem from './BarItem'
 import BarItemLabel from './BarItemLabel'
 
+const barWillEnterHorizontal = ({ style }) => ({
+    x: style.x.val,
+    y: style.y.val,
+    width: 0,
+    height: style.height.val,
+})
+
+const barWillEnterVertical = ({ style }) => ({
+    x: style.x.val,
+    y: style.y.val + style.height.val,
+    width: style.width.val,
+    height: 0,
+})
+
+const barWillLeaveHorizontal = springConfig => ({ style }) => ({
+    x: style.x,
+    y: style.y,
+    width: spring(0, springConfig),
+    height: style.height,
+})
+
+const barWillLeaveVertical = springConfig => ({ style }) => ({
+    x: style.x,
+    y: spring(style.y.val + style.height.val, springConfig),
+    width: style.width,
+    height: spring(0, springConfig),
+})
+
 const Bar = ({
     data,
     getIndex,
     keys,
 
     groupMode,
     layout,
+    minValue,
+    maxValue,
 
     margin,
     width,
     height,
     outerWidth,
     outerHeight,
-    xPadding,
+    padding,
 
     // axes & grid
     axisTop,
@@ -62,15 +92,17 @@ const Bar = ({
     // interactivity
     isInteractive,
 }) => {
-    let result
-    if (groupMode === 'grouped') {
-        result = generateGroupedBars(layout, data, getIndex, keys, width, height, getColor, {
-            xPadding,
-        })
-    } else if (groupMode === 'stacked') {
-        result = generateStackedBars(layout, data, getIndex, keys, width, height, getColor, {
-            xPadding,
-        })
+    const options = {
+        layout,
+        data,
+        getIndex,
+        keys,
+        minValue,
+        maxValue,
+        width,
+        height,
+        getColor,
+        padding,
     }
 
     const motionProps = {
@@ -79,13 +111,28 @@ const Bar = ({
         motionStiffness,
     }
 
+    const springConfig = {
+        damping: motionDamping,
+        stiffness: motionStiffness,
+    }
+
+    const result =
+        groupMode === 'grouped' ? generateGroupedBars(options) : generateStackedBars(options)
+    let willEnter = layout === 'vertical' ? barWillEnterVertical : barWillEnterHorizontal
+    let willLeave =
+        layout === 'vertical'
+            ? barWillLeaveVertical(springConfig)
+            : barWillLeaveHorizontal(springConfig)
+
     return (
         <Container isInteractive={isInteractive} theme={theme}>
             {({ showTooltip, hideTooltip }) => {
                 let bars
                 if (animate === true) {
                     bars = (
                         <TransitionMotion
+                            willEnter={willEnter}
+                            willLeave={willLeave}
                             styles={result.bars.map(bar => {
                                 return {
                                     key: bar.key,
@@ -106,6 +153,8 @@ const Bar = ({
                                             key={key}
                                             {...data}
                                             {...style}
+                                            width={Math.max(style.width, 0)}
+                                            height={Math.max(style.height, 0)}
                                             showTooltip={showTooltip}
                                             hideTooltip={hideTooltip}
                                             theme={theme}

diff --git a/src/components/charts/bar/BarCanvas.js b/src/components/charts/bar/BarCanvas.js
@@ -47,6 +47,8 @@ class BarCanvas extends Component {
             data,
             keys,
             getIndex,
+            minValue,
+            maxValue,
 
             // dimensions
             width,
@@ -59,7 +61,7 @@ class BarCanvas extends Component {
             // layout
             layout,
             groupMode,
-            xPadding,
+            padding,
 
             // axes
             axisTop,
@@ -76,17 +78,22 @@ class BarCanvas extends Component {
 
         this.ctx.scale(pixelRatio, pixelRatio)
 
-        let result
-        if (groupMode === 'grouped') {
-            result = generateGroupedBars(layout, data, getIndex, keys, width, height, getColor, {
-                xPadding,
-            })
-        } else if (groupMode === 'stacked') {
-            result = generateStackedBars(layout, data, getIndex, keys, width, height, getColor, {
-                xPadding,
-            })
+        const options = {
+            layout,
+            data,
+            getIndex,
+            keys,
+            minValue,
+            maxValue,
+            width,
+            height,
+            getColor,
+            padding,
         }
 
+        const result =
+            groupMode === 'grouped' ? generateGroupedBars(options) : generateStackedBars(options)
+
         this.bars = result.bars
 
         this.ctx.clearRect(0, 0, outerWidth, outerHeight)

diff --git a/src/components/charts/bar/props.js b/src/components/charts/bar/props.js
@@ -18,7 +18,9 @@ export const BarPropTypes = {
     groupMode: PropTypes.oneOf(['stacked', 'grouped']).isRequired,
     layout: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,
 
-    xPadding: PropTypes.number.isRequired,
+    minValue: PropTypes.number.isRequired,
+    maxValue: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]).isRequired,
+    padding: PropTypes.number.isRequired,
 
     // axes & grid
     axisTop: PropTypes.object,
@@ -55,7 +57,9 @@ export const BarDefaultProps = {
     groupMode: 'stacked',
     layout: 'vertical',
 
-    xPadding: 0.1,
+    minValue: 0,
+    maxValue: 'auto',
+    padding: 0.1,
 
     // axes & grid
     axisBottom: {},