feat(axes): move all grid & axes stuff from core

packages/axes/src/canvas.js

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import { degreesToRadians } from './utils'
-import { computeCartesianTicks, getFormatter } from './compute'
+import { computeCartesianTicks, getFormatter, computeGridLines } from './compute'
 
 export const renderAxisToCanvas = (
     ctx,
@@ -112,7 +112,6 @@ export const renderAxisToCanvas = (
             }
         }
 
-        ctx.save()
         ctx.translate(legendX, legendY)
         ctx.rotate(degreesToRadians(legendRotation))
         ctx.font = `${
@@ -122,7 +121,6 @@ export const renderAxisToCanvas = (
         ctx.textAlign = textAlign
         ctx.textBaseline = 'middle'
         ctx.fillText(legend, 0, 0)
-        ctx.restore()
     }
 
     ctx.restore()
@@ -171,3 +169,14 @@ export const renderAxesToCanvas = (
         })
     })
 }
+
+export const renderGridLinesToCanvas = (ctx, { width, height, scale, axis, values }) => {
+    const lines = computeGridLines({ width, height, scale, axis, values })
+
+    lines.forEach(line => {
+        ctx.beginPath()
+        ctx.moveTo(line.x1, line.y1)
+        ctx.lineTo(line.x2, line.y2)
+        ctx.stroke()
+    })
+}

packages/axes/src/components/Axis.js

@@ -6,7 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import React, { Component, Fragment } from 'react'
+import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import compose from 'recompose/compose'
 import withPropsOnChange from 'recompose/withPropsOnChange'

packages/core/src/components/axes/Grid.js → packages/axes/src/components/Grid.js

@@ -9,10 +9,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import pure from 'recompose/pure'
-import { defaultMotionDamping, defaultMotionStiffness } from '../../defaults'
+import { motionPropTypes } from '@nivo/core'
 import GridLines from './GridLines'
-import { computeGridLines } from '../../lib/cartesian/axes'
-import { motionPropTypes } from '../../props'
+import { computeGridLines } from '../compute'
 
 const Grid = ({
     width,
@@ -93,15 +92,9 @@ Grid.propTypes = {
 
     theme: PropTypes.object.isRequired,
 
-    // motion
     ...motionPropTypes,
 }
 
-Grid.defaultProps = {
-    // motion
-    animate: true,
-    motionStiffness: defaultMotionStiffness,
-    motionDamping: defaultMotionDamping,
-}
+Grid.defaultProps = {}
 
 export default pure(Grid)

packages/axes/src/compute.js

@@ -121,3 +121,33 @@ export const getFormatter = (format, scale) => {
 
     return d3Format(format)
 }
+
+export const computeGridLines = ({ width, height, scale, axis, values: _values }) => {
+    const lineValues = isArray(_values) ? _values : undefined
+    const lineCount = isNumber(_values) ? _values : undefined
+
+    const values = lineValues || getScaleTicks(scale, lineCount)
+
+    const position = scale.bandwidth ? centerScale(scale) : scale
+
+    let lines
+    if (axis === 'x') {
+        lines = values.map(v => ({
+            key: `${v}`,
+            x1: position(v),
+            x2: position(v),
+            y1: 0,
+            y2: height,
+        }))
+    } else if (axis === 'y') {
+        lines = values.map(v => ({
+            key: `${v}`,
+            x1: 0,
+            x2: width,
+            y1: position(v),
+            y2: position(v),
+        }))
+    }
+
+    return lines
+}

packages/axes/src/index.js

@@ -8,5 +8,6 @@
  */
 export { default as Axes } from './components/Axes'
 export { default as Axis } from './components/Axis'
+export { default as Grid } from './components/Grid'
 export * from './canvas'
 export * from './props'

packages/axes/tests/.eslintrc.yml

@@ -0,0 +1,2 @@
+env:
+  jest: true