feat(scatterplot): add tests and stories

.storybook/config.js

@@ -22,6 +22,7 @@ function loadStories() {
     require('../packages/nivo-pie/stories/pie.stories')
     require('../packages/nivo-radar/stories/radar.stories')
     require('../packages/nivo-sankey/stories/sankey.stories')
+    require('../packages/nivo-scatterplot/stories/scatterplot.stories')
     require('../packages/nivo-stream/stories/stream.stories')
     require('../packages/nivo-sunburst/stories/sunburst.stories')
 }

packages/nivo-scatterplot/src/ScatterPlot.js

@@ -11,6 +11,7 @@ import { TransitionMotion, spring } from 'react-motion'
 import { Container, SvgWrapper } from '@nivo/core'
 import { Grid, Axes } from '@nivo/core'
 import { BoxLegendSvg } from '@nivo/legends'
+import setDisplayName from 'recompose/setDisplayName'
 import enhance from './enhance'
 import { ScatterPlotPropTypes } from './props'
 import ScatterPlotItem from './ScatterPlotItem'
@@ -173,4 +174,4 @@ const ScatterPlot = ({
 
 ScatterPlot.propTypes = ScatterPlotPropTypes
 
-export default enhance(ScatterPlot)
+export default setDisplayName('ScatterPlot')(enhance(ScatterPlot))

packages/nivo-scatterplot/stories/.eslintrc.yml

@@ -0,0 +1,5 @@
+globals:
+  module: true
+
+rules:
+  react/prop-types: 0

packages/nivo-scatterplot/stories/scatterplot.stories.js

@@ -0,0 +1,172 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { withInfo } from '@storybook/addon-info'
+import { ScatterPlot } from '../es'
+
+const sampleData = [
+    {
+        id: 'girls low',
+        data: [
+            { id: 0, x: 0, y: 2.0 },
+            { id: 1, x: 1, y: 2.1 },
+            { id: 2, x: 2, y: 2.3 },
+            { id: 3, x: 3, y: 2.5 },
+            { id: 4, x: 4, y: 2.7 },
+            { id: 5, x: 5, y: 2.9 },
+            { id: 6, x: 6, y: 3.0 },
+            { id: 7, x: 7, y: 3.2 },
+            { id: 8, x: 8, y: 3.3 },
+            { id: 9, x: 9, y: 3.5 },
+            { id: 10, x: 10, y: 3.6 },
+            { id: 11, x: 11, y: 3.8 },
+            { id: 12, x: 12, y: 3.9 },
+            { id: 13, x: 13, y: 4.0 },
+        ],
+    },
+    {
+        id: 'girls med',
+        data: [
+            { id: 0, x: 0, y: 3.2 },
+            { id: 1, x: 1, y: 3.3 },
+            { id: 2, x: 2, y: 3.6 },
+            { id: 3, x: 3, y: 3.8 },
+            { id: 4, x: 4, y: 4.1 },
+            { id: 5, x: 5, y: 4.3 },
+            { id: 6, x: 6, y: 4.6 },
+            { id: 7, x: 7, y: 4.8 },
+            { id: 8, x: 8, y: 5.0 },
+            { id: 9, x: 9, y: 5.2 },
+            { id: 10, x: 10, y: 5.4 },
+            { id: 11, x: 11, y: 5.5 },
+            { id: 12, x: 12, y: 5.7 },
+            { id: 13, x: 13, y: 5.8 },
+        ],
+    },
+    {
+        id: 'girls high',
+        data: [
+            { id: 0, x: 0, y: 4.8 },
+            { id: 1, x: 1, y: 5.1 },
+            { id: 2, x: 2, y: 5.4 },
+            { id: 3, x: 3, y: 5.7 },
+            { id: 4, x: 4, y: 6.1 },
+            { id: 5, x: 5, y: 6.5 },
+            { id: 6, x: 6, y: 6.8 },
+            { id: 7, x: 7, y: 7.1 },
+            { id: 8, x: 8, y: 7.3 },
+            { id: 9, x: 9, y: 7.6 },
+            { id: 10, x: 10, y: 7.8 },
+            { id: 11, x: 11, y: 8.1 },
+            { id: 12, x: 12, y: 8.3 },
+            { id: 13, x: 13, y: 8.5 },
+        ],
+    },
+    {
+        id: 'boys low',
+        data: [
+            { id: 0, x: 0, y: 2.5 },
+            { id: 1, x: 1, y: 2.6 },
+            { id: 2, x: 2, y: 2.8 },
+            { id: 3, x: 3, y: 3.1 },
+            { id: 4, x: 4, y: 3.3 },
+            { id: 5, x: 5, y: 3.5 },
+            { id: 6, x: 6, y: 3.8 },
+            { id: 7, x: 7, y: 4.0 },
+            { id: 8, x: 8, y: 4.2 },
+            { id: 9, x: 9, y: 4.4 },
+            { id: 10, x: 10, y: 4.5 },
+            { id: 11, x: 11, y: 4.7 },
+            { id: 12, x: 12, y: 4.9 },
+            { id: 13, x: 13, y: 5.0 },
+        ],
+    },
+    {
+        id: 'boys med',
+        data: [
+            { id: 0, x: 0, y: 3.3 },
+            { id: 1, x: 1, y: 3.5 },
+            { id: 2, x: 2, y: 3.8 },
+            { id: 3, x: 3, y: 4.1 },
+            { id: 4, x: 4, y: 4.4 },
+            { id: 5, x: 5, y: 4.7 },
+            { id: 6, x: 6, y: 4.9 },
+            { id: 7, x: 7, y: 5.2 },
+            { id: 8, x: 8, y: 5.4 },
+            { id: 9, x: 9, y: 5.6 },
+            { id: 10, x: 10, y: 5.8 },
+            { id: 11, x: 11, y: 6.0 },
+            { id: 12, x: 12, y: 6.2 },
+            { id: 13, x: 13, y: 6.4 },
+        ],
+    },
+    {
+        id: 'boys high',
+        data: [
+            { id: 0, x: 0, y: 5.0 },
+            { id: 1, x: 1, y: 5.3 },
+            { id: 2, x: 2, y: 5.6 },
+            { id: 3, x: 3, y: 6.0 },
+            { id: 4, x: 4, y: 6.4 },
+            { id: 5, x: 5, y: 6.8 },
+            { id: 6, x: 6, y: 7.2 },
+            { id: 7, x: 7, y: 7.5 },
+            { id: 8, x: 8, y: 7.8 },
+            { id: 9, x: 9, y: 8.0 },
+            { id: 10, x: 10, y: 8.3 },
+            { id: 11, x: 11, y: 8.5 },
+            { id: 12, x: 12, y: 8.8 },
+            { id: 13, x: 13, y: 9.0 },
+        ],
+    },
+]
+
+const commonProps = {
+    width: 1000,
+    height: 600,
+    margin: { top: 60, right: 80, bottom: 80, left: 80 },
+    symbolSize: 10,
+    axisBottom: {
+        format: d => `week ${d}`,
+    },
+    axisLeft: {
+        tickSize: 16,
+        format: d => `${d} kg`,
+    },
+    data: sampleData,
+    legends: [
+        {
+            anchor: 'bottom-left',
+            direction: 'row',
+            translateY: 60,
+            itemWidth: 130,
+            itemHeight: 12,
+            symbolSize: 12,
+            symbolShape: 'circle',
+        },
+    ],
+}
+
+const stories = storiesOf('ScatterPlot', module)
+
+const importStatement = `
+~~~javascript
+import { ScatterPlot } from '@nivo/scatterplot'
+~~~
+`
+
+stories.add(
+    'default',
+    withInfo(importStatement)(() => <ScatterPlot {...commonProps} data={[sampleData[1]]} />)
+)
+
+stories.add('multiple series', withInfo(importStatement)(() => <ScatterPlot {...commonProps} />))
+
+stories.add(
+    'alternative colors',
+    withInfo(importStatement)(() => <ScatterPlot {...commonProps} colors="d320b" />)
+)
+
+stories.add(
+    'symbol size',
+    withInfo(importStatement)(() => <ScatterPlot {...commonProps} symbolSize={24} />)
+)

packages/nivo-scatterplot/tests/.eslintrc.yml

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

packages/nivo-scatterplot/tests/ScatterPlot.test.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import ScatterPlot from '../src/ScatterPlot'
+
+const sampleData = [
+    { id: 0, x: 0, y: 10 },
+    { id: 1, x: 10, y: 15 },
+    { id: 2, x: 20, y: 20 },
+    { id: 3, x: 30, y: 25 },
+    { id: 4, x: 40, y: 30 },
+]
+
+it('should render a basic bar chart', () => {
+    const component = renderer.create(
+        <ScatterPlot width={500} height={300} data={[{ id: 'default', data: sampleData }]} />
+    )
+
+    let tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+})
+
+it('should allow to render several series', () => {
+    const component = renderer.create(
+        <ScatterPlot
+            width={500}
+            height={300}
+            data={[{ id: 'default', data: sampleData }, { id: 'extra', data: sampleData }]}
+        />
+    )
+
+    let tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+})
+
+it('should allow to customize symbol size', () => {
+    const component = renderer.create(
+        <ScatterPlot
+            width={500}
+            height={300}
+            symbolSize={12}
+            data={[{ id: 'default', data: sampleData }]}
+        />
+    )
+
+    let tree = component.toJSON()
+    expect(tree).toMatchSnapshot()
+})