feat(line): add ability to specify grid X/Y values

plouc · Aug 26, 2018 · b44c854 · b44c854
1 parent 91bac9e
commit b44c854
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 9 deletions.
diff --git a/packages/core/src/components/axes/Grid.js b/packages/core/src/components/axes/Grid.js
@@ -78,8 +78,8 @@ Grid.propTypes = {
 
     xScale: PropTypes.func,
     yScale: PropTypes.func,
-    xValues: PropTypes.arrayOf(PropTypes.number),
-    yValues: PropTypes.arrayOf(PropTypes.number),
+    xValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+    yValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
 
     theme: PropTypes.object.isRequired,
 

diff --git a/packages/line/src/Line.js b/packages/line/src/Line.js
@@ -49,6 +49,8 @@ const Line = ({
     axisLeft,
     enableGridX,
     enableGridY,
+    gridXValues,
+    gridYValues,
 
     lineWidth,
     enableArea,
@@ -103,6 +105,8 @@ const Line = ({
                         height={height}
                         xScale={enableGridX ? xScale : null}
                         yScale={enableGridY ? yScale : null}
+                        xValues={gridXValues}
+                        yValues={gridYValues}
                         {...motionProps}
                     />
                     <CartesianMarkers

diff --git a/packages/line/src/props.js b/packages/line/src/props.js
@@ -46,6 +46,8 @@ export const LinePropTypes = {
     axisLeft: PropTypes.object,
     enableGridX: PropTypes.bool.isRequired,
     enableGridY: PropTypes.bool.isRequired,
+    gridXValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
+    gridYValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
 
     // dots
     enableDots: PropTypes.bool.isRequired,

diff --git a/website/src/components/charts/bar/props.js b/website/src/components/charts/bar/props.js
@@ -371,6 +371,20 @@ export default [
         controlType: 'switch',
         controlGroup: 'Grid',
     },
+    {
+        key: 'gridXValues',
+        scopes: '*',
+        description: 'Specify values to use for vertical grid lines.',
+        type: 'Array<{number|string}>',
+        required: false,
+    },
+    {
+        key: 'gridYValues',
+        scopes: '*',
+        description: 'Specify values to use for horizontal grid lines.',
+        type: 'Array<{number|string}>',
+        required: false,
+    },
     {
         key: 'isInteractive',
         scopes: ['Bar', 'BarCanvas'],

diff --git a/website/src/components/charts/line/props.js b/website/src/components/charts/line/props.js
@@ -37,8 +37,8 @@ export default [
                         Array<{
                             id: {string|number}
                             data: Array<{
-                                x: {string|number}
-                                y: {string|number}
+                                x: {number|string}
+                                y: {number|string}
                             }>
                         }>
                     `}
@@ -156,11 +156,6 @@ export default [
             max: 400,
         },
     },
-    /*##################################################################################################################
-
-        Style
-
-    ##################################################################################################################*/
     {
         key: 'colors',
         scopes: '*',
@@ -365,6 +360,20 @@ export default [
         controlType: 'switch',
         controlGroup: 'Grid',
     },
+    {
+        key: 'gridXValues',
+        scopes: '*',
+        description: 'Specify values to use for vertical grid lines.',
+        type: 'Array<{number|string}>',
+        required: false,
+    },
+    {
+        key: 'gridYValues',
+        scopes: '*',
+        description: 'Specify values to use for horizontal grid lines.',
+        type: 'Array<{number|string}>',
+        required: false,
+    },
     {
         key: 'isInteractive',
         scopes: ['Line'],