From d517c521a5f652b026fe6b9a8380ad9440a12abf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Tue, 12 Dec 2017 19:12:18 +0900 Subject: [PATCH] feat(line): restore ability to animate line & line area --- packages/nivo-line/src/Line.js | 27 ------ packages/nivo-line/src/LineArea.js | 26 ------ packages/nivo-line/src/_LineAreas.js | 77 ----------------- packages/nivo-line/src/_LineLines.js | 76 ---------------- packages/nivo-line/src/canvas/index.js | 10 +++ packages/nivo-line/src/index.js | 11 +-- .../nivo-line/src/{ => legacy}/LineDots.js | 0 .../nivo-line/src/{ => legacy}/LineSlices.js | 0 .../src/{ => legacy}/LineSlicesItem.js | 0 packages/nivo-line/src/{ => legacy}/_Line.js | 0 packages/nivo-line/src/svg/LineAreaSvg.js | 79 +++++++++++++++++ packages/nivo-line/src/svg/LineSvg.js | 86 +++++++++++++++++++ packages/nivo-line/src/svg/index.js | 10 +++ .../src/LinearScaleX.js | 10 ++- .../src/LinearScaleY.js | 2 +- .../{nivo-line => nivo-scales}/src/Scales.js | 8 ++ .../src/compute.js} | 8 ++ packages/nivo-scales/src/index.js | 11 +++ packages/nivo-tooltips/.babelrc | 3 + packages/nivo-tooltips/.eslintrc.yml | 18 ++++ packages/nivo-tooltips/.npmignore | 20 +++++ packages/nivo-tooltips/package.json | 47 ++++++++++ packages/nivo-tooltips/src/index.js | 0 .../src/components/charts/line/Line/index.js | 26 ++---- .../charts/line/LineCanvas/index.js | 4 +- 25 files changed, 322 insertions(+), 237 deletions(-) delete mode 100644 packages/nivo-line/src/Line.js delete mode 100644 packages/nivo-line/src/LineArea.js delete mode 100644 packages/nivo-line/src/_LineAreas.js delete mode 100644 packages/nivo-line/src/_LineLines.js create mode 100644 packages/nivo-line/src/canvas/index.js rename packages/nivo-line/src/{ => legacy}/LineDots.js (100%) rename packages/nivo-line/src/{ => legacy}/LineSlices.js (100%) rename packages/nivo-line/src/{ => legacy}/LineSlicesItem.js (100%) rename packages/nivo-line/src/{ => legacy}/_Line.js (100%) create mode 100644 packages/nivo-line/src/svg/LineAreaSvg.js create mode 100644 packages/nivo-line/src/svg/LineSvg.js create mode 100644 packages/nivo-line/src/svg/index.js rename packages/{nivo-line => nivo-scales}/src/LinearScaleX.js (72%) rename packages/{nivo-line => nivo-scales}/src/LinearScaleY.js (93%) rename packages/{nivo-line => nivo-scales}/src/Scales.js (67%) rename packages/{nivo-line/src/computeScales.js => nivo-scales/src/compute.js} (79%) create mode 100644 packages/nivo-tooltips/.babelrc create mode 100644 packages/nivo-tooltips/.eslintrc.yml create mode 100644 packages/nivo-tooltips/.npmignore create mode 100644 packages/nivo-tooltips/package.json create mode 100644 packages/nivo-tooltips/src/index.js diff --git a/packages/nivo-line/src/Line.js b/packages/nivo-line/src/Line.js deleted file mode 100644 index e5b77669d..000000000 --- a/packages/nivo-line/src/Line.js +++ /dev/null @@ -1,27 +0,0 @@ -/* - * 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 React from 'react' -import PropTypes from 'prop-types' -import pure from 'recompose/pure' - -const Line = ({ data, generator, xScale, yScale, ...props }) => ( - ({ - x: d.x !== null ? xScale(d.x) : null, - y: d.y !== null ? yScale(d.y) : null, - })) - )} - fill="none" - strokeWidth={2} - {...props} - /> -) - -export default pure(Line) diff --git a/packages/nivo-line/src/LineArea.js b/packages/nivo-line/src/LineArea.js deleted file mode 100644 index 9126af4f4..000000000 --- a/packages/nivo-line/src/LineArea.js +++ /dev/null @@ -1,26 +0,0 @@ -/* - * 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 React from 'react' -import PropTypes from 'prop-types' -import pure from 'recompose/pure' - -const LineArea = ({ data, generator, xScale, yScale, ...props }) => ( - ({ - x: d.x !== null ? xScale(d.x) : null, - y: d.y !== null ? yScale(d.y) : null, - })) - )} - fill="rgba(0, 0, 0, 0.2)" - {...props} - /> -) - -export default pure(LineArea) diff --git a/packages/nivo-line/src/_LineAreas.js b/packages/nivo-line/src/_LineAreas.js deleted file mode 100644 index 34428eefb..000000000 --- a/packages/nivo-line/src/_LineAreas.js +++ /dev/null @@ -1,77 +0,0 @@ -/* - * 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 React from 'react' -import PropTypes from 'prop-types' -import pure from 'recompose/pure' -import { motionPropTypes } from '@nivo/core' -import { SmartMotion } from '@nivo/core' - -const LineAreas = ({ - areaGenerator, - areaOpacity, - lines, - - // motion - animate, - motionStiffness, - motionDamping, -}) => { - if (animate !== true) { - return ( - - {lines.map(({ id, color: areaColor, points }) => ( - - ))} - - ) - } - - const springConfig = { - stiffness: motionStiffness, - damping: motionDamping, - } - - return ( - - {lines.map(({ id, color: areaColor, points }) => ( - ({ - d: spring(areaGenerator(points), springConfig), - fill: spring(areaColor, springConfig), - })} - > - {style => ( - - )} - - ))} - - ) -} - -LineAreas.propTypes = { - areaOpacity: PropTypes.number.isRequired, - // motion - ...motionPropTypes, -} - -export default pure(LineAreas) diff --git a/packages/nivo-line/src/_LineLines.js b/packages/nivo-line/src/_LineLines.js deleted file mode 100644 index e701b6b91..000000000 --- a/packages/nivo-line/src/_LineLines.js +++ /dev/null @@ -1,76 +0,0 @@ -/* - * 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 React from 'react' -import PropTypes from 'prop-types' -import pure from 'recompose/pure' -import { motionPropTypes } from '@nivo/core' -import { SmartMotion } from '@nivo/core' - -const LineLines = ({ - lines, - lineGenerator, - lineWidth, - - // motion - animate, - motionStiffness, - motionDamping, -}) => { - if (animate !== true) { - return ( - - {lines.map(({ id, color: lineColor, points }) => ( - - ))} - - ) - } - - const springConfig = { - stiffness: motionStiffness, - damping: motionDamping, - } - - return ( - - {lines.map(({ id, color: lineColor, points }) => ( - ({ - d: spring(lineGenerator(points), springConfig), - stroke: spring(lineColor, springConfig), - })} - > - {style => ( - - )} - - ))} - - ) -} - -LineLines.propTypes = { - lineWidth: PropTypes.number.isRequired, - ...motionPropTypes, -} - -export default pure(LineLines) diff --git a/packages/nivo-line/src/canvas/index.js b/packages/nivo-line/src/canvas/index.js new file mode 100644 index 000000000..6c982a132 --- /dev/null +++ b/packages/nivo-line/src/canvas/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 { default as LineCanvas } from './LineCanvas' +export { default as LineAreaCanvas } from './LineAreaCanvas' diff --git a/packages/nivo-line/src/index.js b/packages/nivo-line/src/index.js index 8577ea75d..b9165cd9d 100644 --- a/packages/nivo-line/src/index.js +++ b/packages/nivo-line/src/index.js @@ -6,16 +6,9 @@ * For the full copyright and license information, please view the LICENSE * file that was distributed with this source code. */ -export { default as ResponsiveLine } from './ResponsiveLine' export * from './props' -export { default as Scales } from './Scales' -export { default as LinearScaleX } from './LinearScaleX' -export { default as LinearScaleY } from './LinearScaleY' export { default as Lines } from './Lines' -export { default as Line } from './Line' export { default as LineAreas } from './LineAreas' -export { default as LineArea } from './LineArea' - export { default as CanvasWrapper } from './canvas/CanvasWrapper' -export { default as LineCanvas } from './canvas/LineCanvas' -export { default as LineAreaCanvas } from './canvas/LineAreaCanvas' +export * from './svg' +export * from './canvas' diff --git a/packages/nivo-line/src/LineDots.js b/packages/nivo-line/src/legacy/LineDots.js similarity index 100% rename from packages/nivo-line/src/LineDots.js rename to packages/nivo-line/src/legacy/LineDots.js diff --git a/packages/nivo-line/src/LineSlices.js b/packages/nivo-line/src/legacy/LineSlices.js similarity index 100% rename from packages/nivo-line/src/LineSlices.js rename to packages/nivo-line/src/legacy/LineSlices.js diff --git a/packages/nivo-line/src/LineSlicesItem.js b/packages/nivo-line/src/legacy/LineSlicesItem.js similarity index 100% rename from packages/nivo-line/src/LineSlicesItem.js rename to packages/nivo-line/src/legacy/LineSlicesItem.js diff --git a/packages/nivo-line/src/_Line.js b/packages/nivo-line/src/legacy/_Line.js similarity index 100% rename from packages/nivo-line/src/_Line.js rename to packages/nivo-line/src/legacy/_Line.js diff --git a/packages/nivo-line/src/svg/LineAreaSvg.js b/packages/nivo-line/src/svg/LineAreaSvg.js new file mode 100644 index 000000000..ddfa6f3b7 --- /dev/null +++ b/packages/nivo-line/src/svg/LineAreaSvg.js @@ -0,0 +1,79 @@ +/* + * 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 React from 'react' +import PropTypes from 'prop-types' +import pure from 'recompose/pure' +import { + SmartMotion, + motionPropTypes, + defaultAnimate, + defaultMotionDamping, + defaultMotionStiffness, +} from '@nivo/core' + +const LineArea = ({ + data, + generator, + xScale, + yScale, + animate, + motionDamping, + motionStiffness, + ...props +}) => { + const pathDef = generator( + data.map(d => ({ + x: d.x !== null ? xScale(d.x) : null, + y: d.y !== null ? yScale(d.y) : null, + })) + ) + + if (animate !== true) { + return + } + + const springConfig = { + stiffness: motionStiffness, + damping: motionDamping, + } + + return ( + ({ + d: spring(pathDef, springConfig), + })} + > + {style => } + + ) +} + +LineArea.propTypes = { + data: PropTypes.arrayOf( + PropTypes.shape({ + x: PropTypes.number, + y: PropTypes.number, + }) + ), + generator: PropTypes.func.isRequired, + xScale: PropTypes.func.isRequired, + yScale: PropTypes.func.isRequired, + + // motion + ...motionPropTypes, +} + +LineArea.defaultProps = { + // motion + animate: defaultAnimate, + motionDamping: defaultMotionDamping, + motionStiffness: defaultMotionStiffness, +} + +export default pure(LineArea) diff --git a/packages/nivo-line/src/svg/LineSvg.js b/packages/nivo-line/src/svg/LineSvg.js new file mode 100644 index 000000000..0680d2b82 --- /dev/null +++ b/packages/nivo-line/src/svg/LineSvg.js @@ -0,0 +1,86 @@ +/* + * 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 React from 'react' +import PropTypes from 'prop-types' +import pure from 'recompose/pure' +import { + SmartMotion, + motionPropTypes, + defaultAnimate, + defaultMotionDamping, + defaultMotionStiffness, +} from '@nivo/core' + +const Line = ({ + data, + generator, + xScale, + yScale, + size, + animate, + motionDamping, + motionStiffness, + ...props +}) => { + const pathDef = generator( + data.map(d => ({ + x: d.x !== null ? xScale(d.x) : null, + y: d.y !== null ? yScale(d.y) : null, + })) + ) + + if (animate !== true) { + return + } + + const springConfig = { + stiffness: motionStiffness, + damping: motionDamping, + } + + return ( + ({ + d: spring(pathDef, springConfig), + })} + > + {style => } + + ) +} + +Line.propTypes = { + data: PropTypes.arrayOf( + PropTypes.shape({ + x: PropTypes.number, + y: PropTypes.number, + }) + ), + generator: PropTypes.func.isRequired, + xScale: PropTypes.func.isRequired, + yScale: PropTypes.func.isRequired, + + // style + size: PropTypes.number.isRequired, + + // motion + ...motionPropTypes, +} + +Line.defaultProps = { + // style + size: 2, + + // motion + animate: defaultAnimate, + motionDamping: defaultMotionDamping, + motionStiffness: defaultMotionStiffness, +} + +export default pure(Line) diff --git a/packages/nivo-line/src/svg/index.js b/packages/nivo-line/src/svg/index.js new file mode 100644 index 000000000..fa9bcd009 --- /dev/null +++ b/packages/nivo-line/src/svg/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 { default as LineSvg } from './LineSvg' +export { default as LineAreaSvg } from './LineAreaSvg' diff --git a/packages/nivo-line/src/LinearScaleX.js b/packages/nivo-scales/src/LinearScaleX.js similarity index 72% rename from packages/nivo-line/src/LinearScaleX.js rename to packages/nivo-scales/src/LinearScaleX.js index cdfa076ef..181cdbebf 100644 --- a/packages/nivo-line/src/LinearScaleX.js +++ b/packages/nivo-scales/src/LinearScaleX.js @@ -1,6 +1,14 @@ +/* + * 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 React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import { computeLinearScaleX } from './computeScales' +import { computeLinearScaleX } from './compute' export default class LinearScaleX extends PureComponent { static propTypes = { diff --git a/packages/nivo-line/src/LinearScaleY.js b/packages/nivo-scales/src/LinearScaleY.js similarity index 93% rename from packages/nivo-line/src/LinearScaleY.js rename to packages/nivo-scales/src/LinearScaleY.js index 3d8e60b99..55b8bcc36 100644 --- a/packages/nivo-line/src/LinearScaleY.js +++ b/packages/nivo-scales/src/LinearScaleY.js @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import { computeLinearScaleY } from './computeScales' +import { computeLinearScaleY } from './compute' export default class LinearScaleY extends PureComponent { static propTypes = { diff --git a/packages/nivo-line/src/Scales.js b/packages/nivo-scales/src/Scales.js similarity index 67% rename from packages/nivo-line/src/Scales.js rename to packages/nivo-scales/src/Scales.js index 1213a710f..eb6a17161 100644 --- a/packages/nivo-line/src/Scales.js +++ b/packages/nivo-scales/src/Scales.js @@ -1,3 +1,11 @@ +/* + * 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 React, { Fragment } from 'react' import PropTypes from 'prop-types' diff --git a/packages/nivo-line/src/computeScales.js b/packages/nivo-scales/src/compute.js similarity index 79% rename from packages/nivo-line/src/computeScales.js rename to packages/nivo-scales/src/compute.js index 7c8af3aa3..cf328d3d2 100644 --- a/packages/nivo-line/src/computeScales.js +++ b/packages/nivo-scales/src/compute.js @@ -1,3 +1,11 @@ +/* + * 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 getMin from 'lodash/min' import getMax from 'lodash/max' import { scaleLinear } from 'd3-scale' diff --git a/packages/nivo-scales/src/index.js b/packages/nivo-scales/src/index.js index e69de29bb..6cdf811bf 100644 --- a/packages/nivo-scales/src/index.js +++ b/packages/nivo-scales/src/index.js @@ -0,0 +1,11 @@ +/* + * 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 { default as Scales } from './Scales' +export { default as LinearScaleX } from './LinearScaleX' +export { default as LinearScaleY } from './LinearScaleY' diff --git a/packages/nivo-tooltips/.babelrc b/packages/nivo-tooltips/.babelrc new file mode 100644 index 000000000..123609ebd --- /dev/null +++ b/packages/nivo-tooltips/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@nivo/babel-preset"] +} diff --git a/packages/nivo-tooltips/.eslintrc.yml b/packages/nivo-tooltips/.eslintrc.yml new file mode 100644 index 000000000..dc0d62c12 --- /dev/null +++ b/packages/nivo-tooltips/.eslintrc.yml @@ -0,0 +1,18 @@ +parser: babel-eslint + +parserOptions: + ecmaVersion: 6 + sourceType: module + ecmaFeatures: + jsx: true + experimentalObjectRestSpread: true + +env: + browser: true + +globals: + global: true + +extends: + - eslint:recommended + - plugin:react/recommended diff --git a/packages/nivo-tooltips/.npmignore b/packages/nivo-tooltips/.npmignore new file mode 100644 index 000000000..38b8a4b84 --- /dev/null +++ b/packages/nivo-tooltips/.npmignore @@ -0,0 +1,20 @@ +# src (will be transpiled) +/src + +# logs +*.log* + +# OSX +.DS_Store + +# config/build +.babelrc + +# storybook +/.storybook +/stories +/storybook-static + +# test +/coverage +/tests diff --git a/packages/nivo-tooltips/package.json b/packages/nivo-tooltips/package.json new file mode 100644 index 000000000..9cdb31dd3 --- /dev/null +++ b/packages/nivo-tooltips/package.json @@ -0,0 +1,47 @@ +{ + "name": "@nivo/tooltips", + "version": "0.33.0", + "license": "MIT", + "main": "./lib/index.js", + "module": "es/index.js", + "jsnext:main": "es/index.js", + "dependencies": { + "@nivo/core": "0.33.0", + "d3-format": "^1.2.0", + "d3-scale": "^1.0.6", + "d3-shape": "^1.2.0", + "react-motion": "^0.5.2", + "recompose": "^0.26.0" + }, + "devDependencies": { + "@nivo/babel-preset": "0.33.0", + "@nivo/generators": "0.33.0", + "babel-cli": "^6.26.0", + "babel-eslint": "^8.0.3", + "babel-jest": "^20.0.3", + "cross-env": "^5.0.5", + "eslint": "^4.12.1", + "eslint-plugin-react": "^7.5.1", + "jest": "^21.0.1", + "react": "^16.2.0", + "react-dom": "^16.2.0", + "react-test-renderer": "^16.2.0" + }, + "peerDependencies": { + "prop-types": "^15.5.10", + "react": ">= 16.2.0 < 17.0.0" + }, + "publishConfig": { + "access": "public" + }, + "scripts": { + "lint": "eslint src stories tests", + "test": "jest --verbose ./tests", + "test:cover": "jest --verbose --coverage ./tests", + "build:commonjs": "rm -rf lib && cross-env NODE_ENV=commonjs babel src --out-dir lib", + "build:commonjs:watch": "npm run build:commonjs -- --watch", + "build:es": "rm -rf es && cross-env NODE_ENV=es babel src --out-dir es", + "build:es:watch": "npm run build:es -- --watch", + "build": "npm run build:commonjs && npm run build:es" + } +} diff --git a/packages/nivo-tooltips/src/index.js b/packages/nivo-tooltips/src/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/website/src/components/charts/line/Line/index.js b/website/src/components/charts/line/Line/index.js index e5a3fbbc7..ac76e360d 100644 --- a/website/src/components/charts/line/Line/index.js +++ b/website/src/components/charts/line/Line/index.js @@ -12,17 +12,9 @@ import { Link } from 'react-router-dom' import MediaQuery from 'react-responsive' import { generatePointsSerie } from '@nivo/generators' import { ResponsiveWrapper } from '@nivo/core' +import { Scales, LinearScaleX, LinearScaleY } from '@nivo/scales' import { XAxis, YAxis, Grid } from '@nivo/axes' -import { - Line, - LineDefaultProps, - Scales, - LinearScaleX, - LinearScaleY, - Lines, - LineAreas, - LineArea, -} from '@nivo/line' +import { LineSvg, LineDefaultProps, Lines, LineAreas, LineAreaSvg } from '@nivo/line' import { defaultTheme } from '@nivo/core' import ChartHeader from '../../../ChartHeader' import ChartTabs from '../../../ChartTabs' @@ -281,7 +273,7 @@ export default class LinePage extends Component { > {generator => ( - - - {generator => ( - - -