feat(bar): add ability to define grid values

* added `xValues` and `yValues` props to `Grid` * added `gridXValues` and `gridYValues` props to Bar component * fmt fix
plouc · Jun 4, 2018 · afd1ee3 · afd1ee3
1 parent 8f22f89
commit afd1ee3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 3 deletions.
diff --git a/packages/nivo-bar/src/Bar.js b/packages/nivo-bar/src/Bar.js
@@ -72,6 +72,8 @@ const Bar = ({
     axisLeft,
     enableGridX,
     enableGridY,
+    gridXValues,
+    gridYValues,
 
     // customization
     barComponent,
@@ -249,6 +251,8 @@ const Bar = ({
                             height={height}
                             xScale={enableGridX ? result.xScale : null}
                             yScale={enableGridY ? result.yScale : null}
+                            xValues={gridXValues}
+                            yValues={gridYValues}
                             {...motionProps}
                         />
                         <Axes

diff --git a/packages/nivo-bar/src/props.js b/packages/nivo-bar/src/props.js
@@ -35,6 +35,8 @@ export const BarPropTypes = {
     axisLeft: PropTypes.object,
     enableGridX: PropTypes.bool.isRequired,
     enableGridY: PropTypes.bool.isRequired,
+    gridXValues: PropTypes.arrayOf(PropTypes.number),
+    gridYValues: PropTypes.arrayOf(PropTypes.number),
 
     // customization
     barComponent: PropTypes.func.isRequired,

diff --git a/packages/nivo-core/src/components/axes/Grid.js b/packages/nivo-core/src/components/axes/Grid.js
@@ -19,6 +19,8 @@ const Grid = ({
     height,
     xScale,
     yScale,
+    xValues,
+    yValues,
     theme,
     animate,
     motionStiffness,
@@ -30,6 +32,7 @@ const Grid = ({
               height,
               scale: xScale,
               axis: 'x',
+              values: xValues,
           })
         : false
 
@@ -39,6 +42,7 @@ const Grid = ({
               height,
               scale: yScale,
               axis: 'y',
+              values: yValues,
           })
         : false
 
@@ -74,6 +78,8 @@ Grid.propTypes = {
 
     xScale: PropTypes.func,
     yScale: PropTypes.func,
+    xValues: PropTypes.arrayOf(PropTypes.number),
+    yValues: PropTypes.arrayOf(PropTypes.number),
 
     theme: PropTypes.object.isRequired,
 

diff --git a/packages/nivo-core/src/lib/cartesian/axes.js b/packages/nivo-core/src/lib/cartesian/axes.js
@@ -162,9 +162,13 @@ export const computeAxisTicks = ({
  *
  * @return {Array.<Object>}
  */
-export const computeGridLines = ({ width, height, scale, axis }) => {
-    const values = getScaleValues(scale)
-
+export const computeGridLines = ({
+    width,
+    height,
+    scale,
+    axis,
+    values = getScaleValues(scale),
+}) => {
     const position = scale.bandwidth ? centerScale(scale) : scale
 
     let lines