feat(scatterplot): add scatterplot package

README.md

@@ -42,6 +42,9 @@ Join the [nivo discord community](https://discord.gg/n7Ft74f).
 
 ## Packages & components
 
+**nivo** is comprised of several packages/components, for a better overview of the available one,
+please try the [components explorer](http://nivo.rocks/#/components).
+
 | package                                                                                            | components                                                                                                                                                         |
 | :------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [**@nivo/bar**](https://github.com/plouc/nivo/tree/master/packages/nivo-bar)                       | [![@nivo/bar NPM version](https://img.shields.io/npm/v/@nivo/bar.svg?style=flat-square)](https://www.npmjs.com/package/@nivo/bar)                                  |
@@ -81,6 +84,11 @@ Join the [nivo discord community](https://discord.gg/n7Ft74f).
 | [**@nivo/sankey**](https://github.com/plouc/nivo/tree/master/packages/nivo-sankey)                 | [![@nivo/sankey NPM version](https://img.shields.io/npm/v/@nivo/sankey.svg?style=flat-square)](https://www.npmjs.com/package/@nivo/sankey)                         |
 |                                                                                                    | [Sankey](http://nivo.rocks/#/sankey)                                                                                                                               |
 |                                                                                                    | [ResponsiveSankey](http://nivo.rocks/#/sankey)                                                                                                                     |
+| [**@nivo/scatterplot**](https://github.com/plouc/nivo/tree/master/packages/nivo-scatterplot)       | [![@nivo/scatterplot NPM version](https://img.shields.io/npm/v/@nivo/scatterplot.svg?style=flat-square)](https://www.npmjs.com/package/@nivo/scatterplot)          |
+|                                                                                                    | [ScatterPlot](http://nivo.rocks/#/scatterplot)                                                                                                                     |
+|                                                                                                    | [ResponsiveScatterPlot](http://nivo.rocks/#/scatterplot)                                                                                                           |
+|                                                                                                    | [ScatterPlotCanvas](http://nivo.rocks/#/scatterplot/canvas)                                                                                                        |
+|                                                                                                    | [ResponsiveScatterPlotCanvas](http://nivo.rocks/#/scatterplot/canvas)                                                                                              |
 | [**@nivo/stream**](https://github.com/plouc/nivo/tree/master/packages/nivo-stream)                 | [![@nivo/stream NPM version](https://img.shields.io/npm/v/@nivo/stream.svg?style=flat-square)](https://www.npmjs.com/package/@nivo/stream)                         |
 |                                                                                                    | [Stream](http://nivo.rocks/#/stream)                                                                                                                               |
 |                                                                                                    | [ResponsiveStream](http://nivo.rocks/#/stream)                                                                                                                     |

conf/base.yaml

@@ -57,6 +57,14 @@ capture:
         selector: .chart-tabs--chart
         output: ./packages/nivo-sankey/doc/sankey.png
 
+      - path: /#/scatterplot
+        selector: .chart-tabs--chart
+        output: ./packages/nivo-scatterplot/doc/scatterplot.png
+
+      - path: /#/scatterplot/canvas
+        selector: .chart-tabs--chart
+        output: ./packages/nivo-scatterplot/doc/scatterplot-canvas.png
+
       - path: /#/stream
         selector: .chart-tabs--chart
         output: ./packages/nivo-stream/doc/stream.png

packages/nivo-bar/src/props.js

@@ -64,15 +64,15 @@ export const BarPropTypes = {
     onClick: PropTypes.func.isRequired,
     tooltipFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
 
-    // canvas specific
-    pixelRatio: PropTypes.number.isRequired,
-
     legends: PropTypes.arrayOf(
         PropTypes.shape({
             dataFrom: PropTypes.oneOf(['indexes', 'keys']).isRequired,
             ...LegendPropShape,
         })
     ).isRequired,
+
+    // canvas specific
+    pixelRatio: PropTypes.number.isRequired,
 }
 
 export const BarDefaultProps = {
@@ -115,9 +115,9 @@ export const BarDefaultProps = {
     isInteractive: true,
     onClick: noop,
 
+    legends: [],
+
     // canvas specific
     pixelRatio:
         global.window && global.window.devicePixelRatio ? global.window.devicePixelRatio : 1,
-
-    legends: [],
 }

packages/nivo-core/src/components/axes/Axis.js

@@ -15,7 +15,7 @@ import withPropsOnChange from 'recompose/withPropsOnChange'
 import pure from 'recompose/pure'
 import { TransitionMotion, spring } from 'react-motion'
 import { withMotion } from '../../hocs'
-import { computeAxisTicks } from '../../lib/axes'
+import { computeAxisTicks } from '../../lib/cartesian/axes'
 import AxisTick from './AxisTick'
 
 const axisPositions = ['top', 'right', 'bottom', 'left']

packages/nivo-core/src/components/axes/Grid.js

@@ -11,15 +11,9 @@ import PropTypes from 'prop-types'
 import pure from 'recompose/pure'
 import { defaultMotionDamping, defaultMotionStiffness } from '../../defaults'
 import GridLines from './GridLines'
+import { computeGridLines } from '../../lib/cartesian/axes'
 import { motionPropTypes } from '../../props'
 
-const center = scale => {
-    let offset = scale.bandwidth() / 2
-    if (scale.round()) offset = Math.round(offset)
-
-    return d => scale(d) + offset
-}
-
 const Grid = ({
     width,
     height,
@@ -30,45 +24,23 @@ const Grid = ({
     motionStiffness,
     motionDamping,
 }) => {
-    let xLines
-    if (xScale) {
-        let xValues
-        if (xScale.ticks) {
-            xValues = xScale.ticks()
-        } else {
-            xValues = xScale.domain()
-        }
-
-        const xPosition = xScale.bandwidth ? center(xScale) : xScale
-
-        xLines = xValues.map(v => {
-            return {
-                key: `${v}`,
-                x1: xPosition(v),
-                x2: xPosition(v),
-                y2: height,
-            }
-        })
-    }
-
-    let yLines
-    if (yScale) {
-        let yValues
-        if (yScale.ticks) {
-            yValues = yScale.ticks()
-        } else {
-            yValues = yScale.domain()
-        }
-
-        const yPosition = yScale.bandwidth ? center(yScale) : yScale
+    const xLines = xScale
+        ? computeGridLines({
+              width,
+              height,
+              scale: xScale,
+              axis: 'x',
+          })
+        : false
 
-        yLines = yValues.map(v => ({
-            key: `${v}`,
-            x2: width,
-            y1: yPosition(v),
-            y2: yPosition(v),
-        }))
-    }
+    const yLines = yScale
+        ? computeGridLines({
+              width,
+              height,
+              scale: yScale,
+              axis: 'y',
+          })
+        : false
 
     return (
         <g>

packages/nivo-core/src/lib/canvas/axes/index.js → packages/nivo-core/src/lib/canvas/axes.js

@@ -6,8 +6,8 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import { computeAxisTicks } from '../../axes'
-import { degreesToRadians } from '../../polar'
+import { computeAxisTicks, computeGridLines } from '../cartesian/axes'
+import { degreesToRadians } from '../polar'
 
 const horizontalPositions = ['top', 'bottom']
 const positions = ['top', 'right', 'bottom', 'left']
@@ -24,7 +24,7 @@ export const renderAxisToCanvas = (
         tickSize = 5,
         tickPadding = 5,
         tickRotation = 0,
-        //format,
+        format,
     }
 ) => {
     const { x, y, ticks, textAlign, textBaseline } = computeAxisTicks({
@@ -49,10 +49,12 @@ export const renderAxisToCanvas = (
         ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY)
         ctx.stroke()
 
+        const value = format !== undefined ? format(tick.value) : tick.value
+
         ctx.save()
         ctx.translate(tick.x + tick.textX, tick.y + tick.textY)
         ctx.rotate(degreesToRadians(tickRotation))
-        ctx.fillText(tick.value, 0, 0)
+        ctx.fillText(value, 0, 0)
         ctx.restore()
     })
 
@@ -91,3 +93,21 @@ export const renderAxesToCanvas = (
         })
     })
 }
+
+/**
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {number}                   width
+ * @param {number}                   height
+ * @param {number}                   scale
+ * @param {('x'|'y')}                axis
+ */
+export const renderGridLinesToCanvas = (ctx, { width, height, scale, axis }) => {
+    const lines = computeGridLines({ width, height, scale, axis })
+
+    lines.forEach(line => {
+        ctx.beginPath()
+        ctx.moveTo(line.x1, line.y1)
+        ctx.lineTo(line.x2, line.y2)
+        ctx.stroke()
+    })
+}

packages/nivo-core/src/lib/axes.js → packages/nivo-core/src/lib/cartesian/axes.js

@@ -6,11 +6,16 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import { textPropsByEngine } from './bridge'
+import { textPropsByEngine } from '../bridge'
 
 const horizontalPositions = ['top', 'bottom']
 const verticalPositions = ['left', 'right']
 
+/**
+ * @param {Object} scale
+ *
+ * @return {Object} centered scale
+ */
 const centerScale = scale => {
     const bandwidth = scale.bandwidth()
 
@@ -24,6 +29,17 @@ const centerScale = scale => {
     return d => scale(d) + offset
 }
 
+/**
+ * @param {Object} scale
+ * @param {number} [tickCount]
+ *
+ * @return {Array.<number|string>}
+ */
+const getScaleValues = (scale, tickCount) => {
+    if (scale.ticks) return scale.ticks(tickCount)
+    return scale.domain()
+}
+
 /**
  * @typedef {Object} AxisTick
  * @param {number} x
@@ -38,13 +54,14 @@ const centerScale = scale => {
  * @param {number}                width
  * @param {number}                height
  * @param {string}                _position
- * @param {Function}              scale
+ * @param {Object}                scale
  * @param {Array.<string|number>} [tickValues]
  * @param {number}                [tickCount]
  * @param {number}                [tickSize=5]
  * @param {number}                [tickPadding=5]
  * @param {number}                [tickRotation=0]
  * @parem {string}                [engine='svg']
+ *
  * @return {{ x: number, y: number, ticks: Array.<AxisTick>, textAlign: string, textBaseline: string }}
  */
 export const computeAxisTicks = ({
@@ -63,10 +80,7 @@ export const computeAxisTicks = ({
 
     engine = 'svg',
 }) => {
-    let values
-    if (tickValues) values = tickValues
-    else if (scale.ticks) values = scale.ticks(tickCount)
-    else values = scale.domain()
+    const values = tickValues || getScaleValues(scale, tickCount)
 
     const textProps = textPropsByEngine[engine]
 
@@ -139,3 +153,38 @@ export const computeAxisTicks = ({
         textBaseline,
     }
 }
+
+/**
+ * @param {number} width
+ * @param {number} height
+ * @param {Object} scale
+ * @param {string} axis
+ *
+ * @return {Array.<Object>}
+ */
+export const computeGridLines = ({ width, height, scale, axis }) => {
+    const values = getScaleValues(scale)
+
+    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/nivo-core/src/lib/cartesian/index.js

@@ -0,0 +1,10 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * Copyright 2016-present, Raphaël Benitte.
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+export * from './axes'
+export * from './grid'

packages/nivo-core/tests/lib/axes.test.js → packages/nivo-core/tests/lib/cartesian/axes.test.js

@@ -7,7 +7,7 @@
  * file that was distributed with this source code.
  */
 import { scaleLinear, scaleOrdinal, scalePoint, scaleBand } from 'd3-scale'
-import { computeAxisTicks } from '../../src/lib/axes'
+import { computeAxisTicks } from '../../../src/lib/cartesian/axes'
 
 describe('computeAxisTicks()', () => {
     const linearScale = scaleLinear()