feat(parallel-coordinates): init package

.eslintrc.yml

@@ -2,13 +2,14 @@ parser: babel-eslint
 
 parserOptions:
   ecmaVersion: 6
-  sourceType: module
+  sourceType:  module
   ecmaFeatures:
-    jsx: true
+    jsx:                          true
     experimentalObjectRestSpread: true
 
 env:
   browser: true
+  es6:     true
 
 globals:
   global: true

conf/base.yaml

@@ -49,6 +49,14 @@ capture:
         selector: .chart-tabs__content
         output: ./packages/line/doc/line.png
 
+      - path: /parallel-coordinates
+        selector: .chart-tabs__content
+        output: ./packages/parallel-coordinates/doc/parallel-coordinates.png
+
+      - path: /parallel-coordinates/canvas
+        selector: .chart-tabs__content
+        output: ./packages/parallel-coordinates/doc/parallel-coordinates-canvas.png
+
       - path: /pie
         selector: .chart-tabs__content
         output: ./packages/pie/doc/pie.png

conf/rollup.config.js

@@ -1,99 +1,71 @@
+import { camelCase, upperFirst } from 'lodash'
 import babel from 'rollup-plugin-babel'
 import resolve from 'rollup-plugin-node-resolve'
 import stripBanner from 'rollup-plugin-strip-banner'
 
 const pkg = process.env.PACKAGE
 
-export default {
+const externals = [
+    'prop-types',
+]
+
+const mapGlobal = name => {
+    if (name.indexOf('@nivo') === 0) return 'nivo'
+    if (name.indexOf('d3-') === 0) return 'd3'
+    if (name.indexOf('recompose') === 0) return upperFirst(camelCase(name))
+    if (name === 'react') return 'React'
+    if (name === 'prop-types') return 'PropTypes'
+    if (name === 'react-motion') return 'ReactMotion'
+    return name
+}
+
+const common = {
     input: `./packages/${pkg}/src/index.js`,
-    output: {
-        file: `./packages/${pkg}/cjs/nivo-${pkg}.js`,
-        format: 'cjs',
-        name: `@nivo/${pkg}`,
+    external: id => externals.includes(id)
+        || id.indexOf('react') === 0
+        || id.indexOf('d3') === 0
+        || id.indexOf('@nivo') === 0
+        || id.indexOf('lodash') === 0
+        || id.indexOf('recompose') === 0,
+}
+
+const commonPlugins = [
+    stripBanner({
+        include: `./packages/${pkg}/src/**/*.js`,
+    }),
+    resolve({
+        module: true,
+        jsnext: true,
+        main: true,
+        browser: true,
+        extensions: ['.js'],
+        modulesOnly: true,
+    }),
+    babel({
+        exclude: 'node_modules/**',
+        plugins: ['external-helpers']
+    }),
+]
+
+export default [
+    {
+        ...common,
+        output: {
+            file: `./packages/${pkg}/cjs/nivo-${pkg}.js`,
+            format: 'cjs',
+            name: `@nivo/${pkg}`,
+        },
+        plugins: commonPlugins,
+    },
+    {
+        ...common,
+        output: {
+            file: `./packages/${pkg}/umd/nivo-${pkg}.js`,
+            format: 'umd',
+            extend: true,
+            name: 'nivo',
+            globals: mapGlobal,
+        },
+        plugins: commonPlugins,
     },
-    external: [
-        '@nivo/axes',
-        '@nivo/core',
-        '@nivo/legends',
-        '@nivo/scales',
-        'd3-chord',
-        'd3-format',
-        'd3-scale',
-        'd3-shape',
-        'd3-voronoi',
-        'd3-ease',
-        'd3-time',
-        'd3-time-format',
-        'd3-color',
-        'd3-hierarchy',
-        'd3-interpolate',
-        'd3-scale-chromatic',
-        'd3-sankey',
-        'react-measure',
-        'react-motion',
-        'react',
-        'prop-types',
-        'lodash',
-        'lodash/without',
-        'lodash/flattenDepth',
-        'lodash/isPlainObject',
-        'lodash/isFunction',
-        'lodash/isNumber',
-        'lodash/isString',
-        'lodash/isArray',
-        'lodash/memoize',
-        'lodash/last',
-        'lodash/merge',
-        'lodash/pick',
-        'lodash/cloneDeep',
-        'lodash/mapValues',
-        'lodash/min',
-        'lodash/minBy',
-        'lodash/max',
-        'lodash/maxBy',
-        'lodash/range',
-        'lodash/random',
-        'lodash/shuffle',
-        'lodash/uniq',
-        'lodash/uniqBy',
-        'lodash/get',
-        'lodash/set',
-        'lodash/sortBy',
-        'lodash/partial',
-        'lodash/partialRight',
-        'lodash/isEqual',
-        'lodash/isDate',
-        'lodash/assign',
-        'lodash/sumBy',
-        'lodash/first',
-        'lodash/last',
-        'recompose/setDisplayName',
-        'recompose/defaultProps',
-        'recompose/withState',
-        'recompose/shouldUpdate',
-        'recompose/compose',
-        'recompose/withPropsOnChange',
-        'recompose/withStateHandlers',
-        'recompose/setPropTypes',
-        'recompose/withProps',
-        'recompose/withHandlers',
-        'recompose/pure',
-        'react-motion',
-    ],
-    plugins: [
-        stripBanner({
-            include: `./packages/${pkg}/src/**/*.js`,
-        }),
-        resolve({
-            module: true,
-            jsnext: true,
-            main: true,
-            browser: true,
-            extensions: ['.js'],
-            modulesOnly: true,
-        }),
-        babel({
-            plugins: ['external-helpers']
-        }),
-    ]
-}
+]

packages/axes/README.md

@@ -0,0 +1 @@
+# `@nivo/axes`

packages/axes/index.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/nivo-axes')

packages/axes/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@nivo/axes",
+  "version": "0.48.0",
+  "license": "MIT",
+  "author": {
+    "name": "Raphaël Benitte",
+    "url": "https://github.com/plouc"
+  },
+  "keywords": [
+    "nivo",
+    "dataviz",
+    "react",
+    "axes"
+  ],
+  "main": "./index.js",
+  "files": [
+    "README.md",
+    "index.js",
+    "cjs/",
+    "umd/"
+  ],
+  "dependencies": {
+    "@nivo/core": "^0.48.0",
+    "d3-format": "^1.3.2",
+    "d3-time-format": "^2.1.3",
+    "lodash": "^4.17.4",
+    "react-motion": "^0.5.2",
+    "recompose": "^0.26.0"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.5.10",
+    "react": ">= 16.2.0 < 17.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/axes/src/canvas.js

@@ -0,0 +1,82 @@
+/*
+ * 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.
+ */
+import { degreesToRadians } from './utils'
+import { computeCartesianTicks } from './compute'
+
+export const renderAxisToCanvas = (
+    ctx,
+    {
+        axis,
+        scale,
+        x = 0,
+        y = 0,
+        length,
+
+        ticksPosition,
+        tickValues,
+        tickSize = 5,
+        tickPadding = 5,
+        tickRotation = 0,
+        tickValueFormat,
+
+        // @todo implement legend support
+        // legend,
+        // legendPosition = 'end',
+        // legendOffset = 0,
+
+        theme,
+    }
+) => {
+    const { ticks, textAlign, textBaseline } = computeCartesianTicks({
+        axis,
+        scale,
+        ticksPosition,
+        tickValues,
+        tickSize,
+        tickPadding,
+        tickRotation,
+        engine: 'canvas',
+    })
+
+    ctx.save()
+    ctx.translate(x, y)
+
+    ctx.textAlign = textAlign
+    ctx.textBaseline = textBaseline
+    ctx.font = `${theme.axis.ticks.text.fontSize}px sans-serif`
+
+    ctx.lineWidth = theme.axis.domain.line.strokeWidth
+    ctx.lineCap = 'square'
+    ctx.strokeStyle = theme.axis.domain.line.stroke
+    ctx.beginPath()
+    ctx.moveTo(0, 0)
+    ctx.lineTo(axis === 'x' ? length : 0, axis === 'x' ? 0 : length)
+    ctx.stroke()
+
+    ticks.forEach(tick => {
+        ctx.lineWidth = theme.axis.ticks.line.strokeWidth
+        ctx.lineCap = 'square'
+        ctx.strokeStyle = theme.axis.ticks.line.stroke
+        ctx.beginPath()
+        ctx.moveTo(tick.x, tick.y)
+        ctx.lineTo(tick.x + tick.lineX, tick.y + tick.lineY)
+        ctx.stroke()
+
+        const value = tickValueFormat !== undefined ? tickValueFormat(tick.value) : tick.value
+
+        ctx.save()
+        ctx.translate(tick.x + tick.textX, tick.y + tick.textY)
+        ctx.rotate(degreesToRadians(tickRotation))
+        ctx.fillStyle = theme.axis.ticks.text.fill
+        ctx.fillText(value, 0, 0)
+        ctx.restore()
+    })
+
+    ctx.restore()
+}