Skip to content

Commit

Permalink
feat(line): rework stories
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte committed Dec 12, 2017
1 parent 42f1cfe commit 05ea88f
Show file tree
Hide file tree
Showing 12 changed files with 437 additions and 116 deletions.
2 changes: 2 additions & 0 deletions packages/nivo-line/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@
"module": "es/index.js",
"jsnext:main": "es/index.js",
"dependencies": {
"@nivo/axes": "0.33.0",
"@nivo/core": "0.33.0",
"@nivo/legends": "0.33.0",
"@nivo/scales": "0.33.0",
"d3-format": "^1.2.0",
"d3-scale": "^1.0.6",
"d3-shape": "^1.2.0",
Expand Down
33 changes: 17 additions & 16 deletions packages/nivo-line/src/svg/LineChartSvg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ const LineChartSvg = ({
xScale,
yScale,
slices,
curve,

// dimensions
margin,
Expand Down Expand Up @@ -91,6 +92,11 @@ const LineChartSvg = ({
motionStiffness,
}

const legendData = lines.map(line => ({
label: line.id,
fill: line.color,
}))

return (
<Container isInteractive={isInteractive} theme={theme}>
{({ showTooltip, hideTooltip }) => (
Expand Down Expand Up @@ -131,6 +137,7 @@ const LineChartSvg = ({
xScale={xScale}
yScale={yScale}
height={height}
curve={curve}
style={{
fill: line.color,
fillOpacity: areaOpacity,
Expand All @@ -144,6 +151,7 @@ const LineChartSvg = ({
data={line.points}
xScale={xScale}
yScale={yScale}
curve={curve}
size={lineWidth}
style={{
stroke: line.color,
Expand Down Expand Up @@ -184,22 +192,15 @@ const LineChartSvg = ({
{...motionProps}
/>
))}
{legends.map((legend, i) => {
const legendData = lines.map(line => ({
label: line.id,
fill: line.color,
}))

return (
<BoxLegendSvg
key={i}
{...legend}
containerWidth={width}
containerHeight={height}
data={legendData}
/>
)
})}
{legends.map((legend, i) => (
<BoxLegendSvg
key={i}
{...legend}
containerWidth={width}
containerHeight={height}
data={legendData}
/>
))}
</SvgWrapper>
)}
</Container>
Expand Down
110 changes: 110 additions & 0 deletions packages/nivo-line/stories/DualYAxis.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import React, { Fragment } from 'react'
import { withInfo } from '@storybook/addon-info'
import { LineSvg } from '../es'
import { defaultTheme } from '@nivo/core'
import { Scales, LinearScaleX, LinearScaleY } from '@nivo/scales'
import { Grid, XAxis, YAxis } from '@nivo/axes'
import { LegendSvg } from '@nivo/legends'

const dataA = [
{ x: 0, y: 13 },
{ x: 10, y: 27 },
{ x: 20, y: 42 },
{ x: 30, y: 36 },
{ x: 40, y: 64 },
{ x: 50, y: 83 },
{ x: 60, y: 79 },
]

const dataB = [
{ x: 0, y: 3 },
{ x: 10, y: 4 },
{ x: 20, y: 7 },
{ x: 30, y: 11 },
{ x: 40, y: 9 },
{ x: 50, y: 3 },
{ x: 60, y: 2 },
]

const outerWidth = 900
const outerHeight = 420
const margin = { top: 20, right: 160, bottom: 60, left: 80 }
const width = outerWidth - margin.left - margin.right
const height = outerHeight - margin.top - margin.bottom

const DualYAxis = () => (
<Scales
scales={[
<LinearScaleX id="x" data={[dataA, dataB]} width={width} />,
<LinearScaleY id="yA" data={[dataA]} height={height} min={0} />,
<LinearScaleY id="yB" data={[dataB]} height={height} min={0} />,
]}
>
{scales => (
<svg width={outerWidth} height={outerHeight}>
<g transform={`translate(${margin.left},${margin.top})`}>
<Grid xScale={scales.x} width={width} height={height} theme={defaultTheme} />
<XAxis
width={width}
height={height}
scale={scales.x}
position="bottom"
theme={defaultTheme}
/>
<YAxis
width={width}
height={height}
scale={scales.yA}
position="left"
theme={defaultTheme}
/>
<YAxis
width={width}
height={height}
scale={scales.yB}
position="right"
theme={defaultTheme}
/>
<LineSvg
data={dataA}
xScale={scales.x}
yScale={scales.yA}
style={{ stroke: '#f47560' }}
/>
<LineSvg
data={dataB}
xScale={scales.x}
yScale={scales.yB}
style={{ stroke: '#61cdbb' }}
/>
<LegendSvg
x={width + 60}
y={0}
direction="column"
itemWidth={100}
itemHeight={16}
itemsSpacing={6}
data={[
{ label: 'group A', fill: '#f47560' },
{ label: 'group B', fill: '#61cdbb' },
]}
/>
</g>
</svg>
)}
</Scales>
)

const documentation = `
Sometimes it may be useful to have 2 different axes for the same dimension.
This can be achieved by defining 2 different y scales and using each of them
for left and right axis.
You can find the source code of this example [here](https://github.com/plouc/nivo/blob/master/packages/nivo-line/stories/DualYAxis.js).
`

export default withInfo({
text: documentation,
source: false,
})(() => <DualYAxis />)
109 changes: 109 additions & 0 deletions packages/nivo-line/stories/EmptyValues.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import React, { Fragment } from 'react'
import { withInfo } from '@storybook/addon-info'
import { LineSvg, LineAreaSvg } from '../es'
import { defaultTheme } from '@nivo/core'
import { Scales, LinearScaleX, LinearScaleY } from '@nivo/scales'
import { Grid, XAxis, YAxis } from '@nivo/axes'

const dataA = [
{ x: 0, y: 13 },
{ x: 10, y: 27 },
{ x: 20, y: 29 },
{ x: 30, y: 27 },
{ x: 40, y: null },
{ x: 50, y: 21 },
{ x: 60, y: 17 },
{ x: 70, y: 15 },
]

const dataB = [
{ x: 0, y: 7 },
{ x: 10, y: 4 },
{ x: 20, y: null },
{ x: 30, y: 6 },
{ x: 40, y: 9 },
{ x: 50, y: 14 },
{ x: 60, y: 22 },
{ x: 70, y: 25 },
]

const outerWidth = 900
const outerHeight = 420
const margin = { top: 20, right: 80, bottom: 60, left: 80 }
const width = outerWidth - margin.left - margin.right
const height = outerHeight - margin.top - margin.bottom

const EmptyValues = () => (
<Scales
scales={[
<LinearScaleX id="x" data={[dataA, dataB]} width={width} />,
<LinearScaleY id="y" data={[dataA, dataB]} height={height} min={0} max={30} />,
]}
>
{scales => (
<svg width={outerWidth} height={outerHeight}>
<g transform={`translate(${margin.left},${margin.top})`}>
<Grid
xScale={scales.x}
yScale={scales.y}
width={width}
height={height}
theme={defaultTheme}
/>
<XAxis
width={width}
height={height}
scale={scales.x}
position="bottom"
theme={defaultTheme}
/>
<YAxis
width={width}
height={height}
scale={scales.y}
position="left"
theme={defaultTheme}
/>
<LineAreaSvg
data={dataA}
xScale={scales.x}
yScale={scales.y}
height={height}
style={{ fill: '#f47560', fillOpacity: 0.15 }}
/>
<LineAreaSvg
data={dataB}
xScale={scales.x}
yScale={scales.y}
height={height}
style={{ fill: '#61cdbb', fillOpacity: 0.15 }}
/>
<LineSvg
data={dataA}
xScale={scales.x}
yScale={scales.y}
style={{ stroke: '#f47560' }}
/>
<LineSvg
data={dataB}
xScale={scales.x}
yScale={scales.y}
style={{ stroke: '#61cdbb' }}
/>
</g>
</svg>
)}
</Scales>
)

const documentation = `
In order to deal with empty values, you must explicitly set each datum's *y* value to *0*,
otherwise the line will be connected from latest known datum to next defined one.
You can find the source code of this example [here](https://github.com/plouc/nivo/blob/master/packages/nivo-line/stories/EmptyValues.js).
`

export default withInfo({
text: documentation,
source: false,
})(() => <EmptyValues />)
34 changes: 34 additions & 0 deletions packages/nivo-line/stories/Simple.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React, { Fragment } from 'react'
import { withInfo } from '@storybook/addon-info'
import { generatePointsSerie} from '@nivo/generators'
import { LineChartSvg } from '../es'

const margin = { top: 20, right: 160, bottom: 60, left: 80 }
const data = [{
id: 'default',
data: generatePointsSerie({
easing: 'random',
xStep: 10,
yRand: 10,
})
}]

const Simple = () => (
<LineChartSvg
width={900}
height={420}
margin={margin}
data={data}
/>
)

const documentation = `
A simple line chart.
You can find the source code of this example [here](https://github.com/plouc/nivo/blob/master/packages/nivo-line/stories/Simple.js).
`

export default withInfo({
text: documentation,
source: false,
})(() => <Simple />)
Loading

0 comments on commit 05ea88f

Please sign in to comment.