From cf8a5caaa589027dc01b6486ffed8220cf0acbab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rapha=C3=ABl=20Benitte?= Date: Wed, 13 Dec 2017 03:02:46 +0900 Subject: [PATCH] feat(website): add @nivo/line low level components doc --- .../nivo-line/src/canvas/LineChartCanvas.js | 22 +++---- packages/nivo-line/src/compute.js | 4 +- packages/nivo-line/src/svg/LineChartSvg.js | 2 +- packages/nivo-line/src/svg/LineSvg.js | 10 ++-- website/src/SiteMap.js | 10 +++- .../charts/line/Components/LineAreaSvg.js | 59 +++++++++++++++++++ .../charts/line/Components/LineSvg.js | 59 +++++++++++++++++++ .../charts/line/Components/index.js | 29 +++++++++ .../src/components/charts/line/Line/index.js | 14 ++++- .../charts/line/LineCanvas/index.js | 47 +++------------ 10 files changed, 194 insertions(+), 62 deletions(-) create mode 100644 website/src/components/charts/line/Components/LineAreaSvg.js create mode 100644 website/src/components/charts/line/Components/LineSvg.js create mode 100644 website/src/components/charts/line/Components/index.js diff --git a/packages/nivo-line/src/canvas/LineChartCanvas.js b/packages/nivo-line/src/canvas/LineChartCanvas.js index 253491d64..b9019f950 100644 --- a/packages/nivo-line/src/canvas/LineChartCanvas.js +++ b/packages/nivo-line/src/canvas/LineChartCanvas.js @@ -115,12 +115,7 @@ class LineChartCanvas extends Component { }) } - renderLegends(ctx, { - lines, - legends, - width, - height, - }) { + renderLegends(ctx, { lines, legends, width, height }) { const legendData = lines.map(line => ({ label: line.id, fill: line.color, @@ -204,13 +199,14 @@ class LineChartCanvas extends Component { axisLeft, }) - enableArea && this.renderAreas(this.ctx, { - lines, - generator: areaGenerator, - xScale, - yScale, - opacity: areaOpacity, - }) + enableArea && + this.renderAreas(this.ctx, { + lines, + generator: areaGenerator, + xScale, + yScale, + opacity: areaOpacity, + }) this.renderLines(this.ctx, { lines, diff --git a/packages/nivo-line/src/compute.js b/packages/nivo-line/src/compute.js index 42fd9babb..3f08b8d93 100644 --- a/packages/nivo-line/src/compute.js +++ b/packages/nivo-line/src/compute.js @@ -20,8 +20,8 @@ import { scalePoint, scaleLinear } from 'd3-scale' */ export const getXScale = (data, width, type) => { if (type === 'linear') { - const minX = min(data.map(({data}) => min(data.map(d => d.x)))) - const maxX = max(data.map(({data}) => max(data.map(d => d.x)))) + const minX = min(data.map(({ data }) => min(data.map(d => d.x)))) + const maxX = max(data.map(({ data }) => max(data.map(d => d.x)))) return scaleLinear() .range([0, width]) diff --git a/packages/nivo-line/src/svg/LineChartSvg.js b/packages/nivo-line/src/svg/LineChartSvg.js index cec69acd3..8d2dc242e 100644 --- a/packages/nivo-line/src/svg/LineChartSvg.js +++ b/packages/nivo-line/src/svg/LineChartSvg.js @@ -152,7 +152,7 @@ const LineChartSvg = ({ xScale={xScale} yScale={yScale} curve={curve} - size={lineWidth} + lineWidth={lineWidth} style={{ stroke: line.color, }} diff --git a/packages/nivo-line/src/svg/LineSvg.js b/packages/nivo-line/src/svg/LineSvg.js index 3f66c4fdb..fe36423f3 100644 --- a/packages/nivo-line/src/svg/LineSvg.js +++ b/packages/nivo-line/src/svg/LineSvg.js @@ -29,7 +29,7 @@ const LineSvg = ({ generator, xScale, yScale, - size, + lineWidth, animate, motionDamping, motionStiffness, @@ -43,7 +43,7 @@ const LineSvg = ({ ) if (animate !== true) { - return + return } const springConfig = { @@ -57,7 +57,7 @@ const LineSvg = ({ d: spring(pathDef, springConfig), })} > - {style => } + {style => } ) } @@ -76,7 +76,7 @@ LineSvg.propTypes = { curve: curvePropType.isRequired, // style - size: PropTypes.number.isRequired, + lineWidth: PropTypes.number.isRequired, // motion ...motionPropTypes, @@ -87,7 +87,7 @@ const enhance = compose( curve: 'linear', // style - size: 2, + lineWidth: 2, // motion animate: defaultAnimate, diff --git a/website/src/SiteMap.js b/website/src/SiteMap.js index db59181a8..86ed5e33a 100644 --- a/website/src/SiteMap.js +++ b/website/src/SiteMap.js @@ -20,6 +20,7 @@ import HeatMapAPI from './components/charts/heatmap/HeatMapAPI' import LinePage from './components/charts/line/LinePage' import Line from './components/charts/line/Line' import LineCanvas from './components/charts/line/LineCanvas' +import LineComponents from './components/charts/line/Components' import LineAPI from './components/charts/line/LineAPI' import StreamPage from './components/charts/stream/StreamPage' import Stream from './components/charts/stream/Stream' @@ -237,10 +238,17 @@ const SITEMAP = [ { className: 'canvas', path: '/canvas', - label: 'LineCanvas', + label: 'LineChartCanvas', component: LineCanvas, tags: ['canvas'], }, + { + className: 'line', + path: '/components', + label: 'Components', + component: LineComponents, + tags: [], + }, { className: 'api', path: '/api', diff --git a/website/src/components/charts/line/Components/LineAreaSvg.js b/website/src/components/charts/line/Components/LineAreaSvg.js new file mode 100644 index 000000000..c02da2b7d --- /dev/null +++ b/website/src/components/charts/line/Components/LineAreaSvg.js @@ -0,0 +1,59 @@ +/* + * 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 ComponentPropsDocumentation from '../../../properties/ComponentPropsDocumentation' + +const properties = [ + { + key: 'xScale', + type: '{Function}', + required: true, + }, + { + key: 'yScale', + type: '{Function}', + required: true, + }, + { + key: 'height', + type: '{number}', + required: true, + }, + { + key: 'curve', + type: '{string}', + required: true, + }, + { + key: 'animate', + type: '{boolean}', + required: true, + }, + { + key: 'motionDamping', + type: '{number}', + required: true, + }, + { + key: 'motionStiffness', + type: '{number}', + required: true, + }, +] + +export default class LineAreaSvg extends PureComponent { + render() { + return ( +
+

LineAreaSvg

+ +
+ ) + } +} diff --git a/website/src/components/charts/line/Components/LineSvg.js b/website/src/components/charts/line/Components/LineSvg.js new file mode 100644 index 000000000..593600fac --- /dev/null +++ b/website/src/components/charts/line/Components/LineSvg.js @@ -0,0 +1,59 @@ +/* + * 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 ComponentPropsDocumentation from '../../../properties/ComponentPropsDocumentation' + +const properties = [ + { + key: 'xScale', + type: '{Function}', + required: true, + }, + { + key: 'yScale', + type: '{Function}', + required: true, + }, + { + key: 'curve', + type: '{string}', + required: true, + }, + { + key: 'lineWidth', + type: '{number}', + required: true, + }, + { + key: 'animate', + type: '{boolean}', + required: true, + }, + { + key: 'motionDamping', + type: '{number}', + required: true, + }, + { + key: 'motionStiffness', + type: '{number}', + required: true, + }, +] + +export default class LineSvg extends PureComponent { + render() { + return ( +
+

LineSvg

+ +
+ ) + } +} diff --git a/website/src/components/charts/line/Components/index.js b/website/src/components/charts/line/Components/index.js new file mode 100644 index 000000000..9a5a3d783 --- /dev/null +++ b/website/src/components/charts/line/Components/index.js @@ -0,0 +1,29 @@ +/* + * This file is part of the nivo project. + * + * (c) 2016 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 Helmet from 'react-helmet' +import LineSvg from './LineSvg' +import LineAreaSvg from './LineAreaSvg' + +const Components = () => ( +
+
+ +
+

+ @nivo/line low level components +

+
+ + +
+
+) + +export default Components diff --git a/website/src/components/charts/line/Line/index.js b/website/src/components/charts/line/Line/index.js index 9c22d43e1..1d4929ecf 100644 --- a/website/src/components/charts/line/Line/index.js +++ b/website/src/components/charts/line/Line/index.js @@ -65,7 +65,8 @@ export default class LinePage extends Component {

The responsive alternative of this component is{' '} - ResponsiveLineChartSvg. + ResponsiveLineChartSvg, it also offers another implementation, see{' '} + LineChartCanvas.

This component is available in the{' '} @@ -93,6 +94,17 @@ export default class LinePage extends Component { the storybook .

+

+ For more advanced features (eg.{' '} + + dual y axis + ) or mixing with other chart types, you can also build your own chart using{' '} + @nivo/line low level components. +

See the dedicated guide on how to setup legends for this component. diff --git a/website/src/components/charts/line/LineCanvas/index.js b/website/src/components/charts/line/LineCanvas/index.js index c7daed8f8..a1bedac44 100644 --- a/website/src/components/charts/line/LineCanvas/index.js +++ b/website/src/components/charts/line/LineCanvas/index.js @@ -40,14 +40,14 @@ export default class LinePage extends Component { const mappedSettings = propsMapper(settings) - const code = generateCode('ResponsiveLine', mappedSettings, { + const code = generateCode('ResponsiveLineChartCanvas', mappedSettings, { pkg: '@nivo/line', defaults: LineDefaultProps, }) const header = ( @@ -55,46 +55,15 @@ export default class LinePage extends Component { const description = (

-

Line chart with stacking ability.

-

- Given an array of data series having an id and a nested array of points (with x, - y properties), it will compute the line for each data serie.  If stacked is - true, y values will be automatically aggregated.
- This component also accept empty values, but please note that they must be - explicitly defined though, eg. {'{ x: 10, y: null }'}. -

-

- The responsive alternative of this component is ResponsiveLine. -

- This component is available in the{' '} - - nivo-api - , see{' '} - - sample - {' '} - or try it using the API client. You can also see - more example usages in{' '} - - the storybook - . + A variation around the LineChartSvg component. Well + suited for large data sets as it does not impact DOM tree depth and does not + involve React diffing stuff for children (not that useful when using canvas), + however you'll lose the isomorphic ability and transitions.

- See the dedicated guide on how to setup - legends for this component. + The responsive alternative of this component is{' '} + ResponsiveLineChartCanvas.

)