Skip to content

Commit

Permalink
feat(website): add @nivo/line low level components doc
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte committed Dec 12, 2017
1 parent be93061 commit cf8a5ca
Show file tree
Hide file tree
Showing 10 changed files with 194 additions and 62 deletions.
22 changes: 9 additions & 13 deletions packages/nivo-line/src/canvas/LineChartCanvas.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions packages/nivo-line/src/compute.js
Original file line number Diff line number Diff line change
Expand Up @@ -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])
Expand Down
2 changes: 1 addition & 1 deletion packages/nivo-line/src/svg/LineChartSvg.js
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ const LineChartSvg = ({
xScale={xScale}
yScale={yScale}
curve={curve}
size={lineWidth}
lineWidth={lineWidth}
style={{
stroke: line.color,
}}
Expand Down
10 changes: 5 additions & 5 deletions packages/nivo-line/src/svg/LineSvg.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const LineSvg = ({
generator,
xScale,
yScale,
size,
lineWidth,
animate,
motionDamping,
motionStiffness,
Expand All @@ -43,7 +43,7 @@ const LineSvg = ({
)

if (animate !== true) {
return <path d={pathDef} fill="none" strokeWidth={size} {...props} />
return <path d={pathDef} fill="none" strokeWidth={lineWidth} {...props} />
}

const springConfig = {
Expand All @@ -57,7 +57,7 @@ const LineSvg = ({
d: spring(pathDef, springConfig),
})}
>
{style => <path d={style.d} fill="none" strokeWidth={size} {...props} />}
{style => <path d={style.d} fill="none" strokeWidth={lineWidth} {...props} />}
</SmartMotion>
)
}
Expand All @@ -76,7 +76,7 @@ LineSvg.propTypes = {
curve: curvePropType.isRequired,

// style
size: PropTypes.number.isRequired,
lineWidth: PropTypes.number.isRequired,

// motion
...motionPropTypes,
Expand All @@ -87,7 +87,7 @@ const enhance = compose(
curve: 'linear',

// style
size: 2,
lineWidth: 2,

// motion
animate: defaultAnimate,
Expand Down
10 changes: 9 additions & 1 deletion website/src/SiteMap.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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',
Expand Down
59 changes: 59 additions & 0 deletions website/src/components/charts/line/Components/LineAreaSvg.js
Original file line number Diff line number Diff line change
@@ -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 (
<div>
<h2>LineAreaSvg</h2>
<ComponentPropsDocumentation chartClass="LineAreaSvg" properties={properties} />
</div>
)
}
}
59 changes: 59 additions & 0 deletions website/src/components/charts/line/Components/LineSvg.js
Original file line number Diff line number Diff line change
@@ -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 (
<div>
<h2>LineSvg</h2>
<ComponentPropsDocumentation chartClass="LineSvg" properties={properties} />
</div>
)
}
}
29 changes: 29 additions & 0 deletions website/src/components/charts/line/Components/index.js
Original file line number Diff line number Diff line change
@@ -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 = () => (
<div className="inner-content">
<div className="page_content">
<Helmet title="@nivo/line low level components documentation" />
<div className="chart_header">
<h1 className="page_header">
<strong>@nivo/line</strong> low level components
</h1>
</div>
<LineSvg />
<LineAreaSvg />
</div>
</div>
)

export default Components
14 changes: 13 additions & 1 deletion website/src/components/charts/line/Line/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@ export default class LinePage extends Component {
</p>
<p className="description">
The responsive alternative of this component is{' '}
<code>ResponsiveLineChartSvg</code>.
<code>ResponsiveLineChartSvg</code>, it also offers another implementation, see{' '}
<Link to="/line/canvas">LineChartCanvas</Link>.
</p>
<p className="description">
This component is available in the{' '}
Expand Down Expand Up @@ -93,6 +94,17 @@ export default class LinePage extends Component {
the storybook
</a>.
</p>
<p>
For more advanced features (eg.{' '}
<a
href={`${config.storybookUrl}?selectedKind=Line&selectedStory=default`}
target="_blank"
rel="noopener noreferrer"
>
dual y axis
</a>) or mixing with other chart types, you can also build your own chart using{' '}
<code>@nivo/line</code> <Link to="/line/components">low level components</Link>.
</p>
<p className="description">
See the <Link to="/guides/legends">dedicated guide</Link> on how to setup
legends for this component.
Expand Down
47 changes: 8 additions & 39 deletions website/src/components/charts/line/LineCanvas/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,61 +40,30 @@ 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 = (
<ChartHeader
chartClass="Line"
chartClass="LineChartCanvas"
tags={['basic', 'isomorphic', 'api']}
diceRoll={this.diceRoll}
/>
)

const description = (
<div className="chart-description">
<p className="description">Line chart with stacking ability.</p>
<p>
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.&nbsp; If stacked is
true, y values will be automatically aggregated.<br />
This component also accept empty values, but please note that they must be
explicitly <i>defined</i> though, eg. <code>{'{ x: 10, y: null }'}</code>.
</p>
<p className="description">
The responsive alternative of this component is <code>ResponsiveLine</code>.
</p>
<p className="description">
This component is available in the{' '}
<a
href="https://github.com/plouc/nivo-api"
target="_blank"
rel="noopener noreferrer"
>
nivo-api
</a>, see{' '}
<a
href={`${config.nivoApiUrl}/samples/line.svg`}
target="_blank"
rel="noopener noreferrer"
>
sample
</a>{' '}
or <Link to="/line/api">try it using the API client</Link>. You can also see
more example usages in{' '}
<a
href={`${config.storybookUrl}?selectedKind=Line&selectedStory=default`}
target="_blank"
rel="noopener noreferrer"
>
the storybook
</a>.
A variation around the <Link to="/line">LineChartSvg</Link> 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.
</p>
<p className="description">
See the <Link to="/guides/legends">dedicated guide</Link> on how to setup
legends for this component.
The responsive alternative of this component is{' '}
<code>ResponsiveLineChartCanvas</code>.
</p>
</div>
)
Expand Down

0 comments on commit cf8a5ca

Please sign in to comment.