diff --git a/packages/generators/src/index.js b/packages/generators/src/index.js index 89e66d4fc..af0b2bc35 100644 --- a/packages/generators/src/index.js +++ b/packages/generators/src/index.js @@ -42,7 +42,7 @@ export const uniqRand = generator => { export const randCountryCode = () => shuffle(sets.countryCodes)[0] -export const generateDrinkStats = (size = 16) => { +export const generateDrinkStats = (xSize = 16) => { const rand = () => random(0, 60) const types = ['whisky', 'rhum', 'gin', 'vodka', 'cognac'] const country = uniqRand(randCountryCode) @@ -53,7 +53,7 @@ export const generateDrinkStats = (size = 16) => { data: [], })) - range(size).forEach(() => { + range(xSize).forEach(() => { const x = country() types.forEach(id => { data.find(d => d.id === id).data.push({ @@ -67,17 +67,19 @@ export const generateDrinkStats = (size = 16) => { return data } -export const generateSerie = (length = 20) => { - const data = [] +export const generateSerie = (xSize = 20) => { const max = 100 + Math.random() * (Math.random() * 600) - for (let i = 0; i < length; i++) { - data.push(Math.round(Math.random() * max)) - } - - return data + return range(xSize).map(() => Math.round(Math.random() * max)) } +export const generateSeries = (ids, xKeys) => + ids.map(id => ({ + id, + color: randColor(), + data: xKeys.map(x => ({ x, y: Math.round(Math.random() * 300) })), + })) + export const generateStackData = (size = 3) => { const length = 16 return range(size).map(() => generateSerie(length).map((v, i) => ({ x: i, y: v }))) diff --git a/packages/scales/src/compute.js b/packages/scales/src/compute.js index 78243477f..fa8567ed7 100644 --- a/packages/scales/src/compute.js +++ b/packages/scales/src/compute.js @@ -24,7 +24,7 @@ export const compareDateValues = (a, b) => a.getTime() === b.getTime() export const computeXYScalesForSeries = (_series, xScaleSpec, yScaleSpec, width, height) => { const series = _series.map(serie => ({ ...serie, - data: serie.data.map(d => ({ data: d })), + data: serie.data.map(d => ({ data: { ...d } })), })) let xy = generateSeriesXY(series, xScaleSpec, yScaleSpec) diff --git a/website/src/components/charts/line/LinePage.js b/website/src/components/charts/line/LinePage.js index 1c9a0d1e1..6c07832e0 100644 --- a/website/src/components/charts/line/LinePage.js +++ b/website/src/components/charts/line/LinePage.js @@ -8,9 +8,24 @@ */ import React, { Component } from 'react' import Helmet from 'react-helmet' -import { generateDrinkStats } from '@nivo/generators' +import { generateSeries } from '@nivo/generators' -const generateData = () => generateDrinkStats(9) +const generateData = () => + generateSeries( + ['japan', 'france', 'us', 'germany', 'norway'], + [ + 'plane', + 'helicopter', + 'boat', + 'train', + 'subway', + 'bus', + 'car', + 'moto', + 'bicycle', + 'others', + ] + ) class LinePage extends Component { state = { diff --git a/website/src/components/charts/line/defaultProps.js b/website/src/components/charts/line/defaultProps.js index dd2d6b536..742261bd1 100644 --- a/website/src/components/charts/line/defaultProps.js +++ b/website/src/components/charts/line/defaultProps.js @@ -59,7 +59,7 @@ export default { tickSize: 5, tickPadding: 5, tickRotation: 0, - legend: 'country code', + legend: 'transportation', legendOffset: 36, legendPosition: 'center', }, diff --git a/website/src/components/charts/line/props.js b/website/src/components/charts/line/props.js index c8565022b..ea3247603 100644 --- a/website/src/components/charts/line/props.js +++ b/website/src/components/charts/line/props.js @@ -178,8 +178,8 @@ export default [ controlOptions: { disabledValue: 'auto', defaultValue: 0, - min: -100, - max: 100, + min: -2000, + max: 2000, }, }, { @@ -190,9 +190,9 @@ export default [ controlType: 'switchableRange', controlOptions: { disabledValue: 'auto', - defaultValue: 300, - min: 10, - max: 400, + defaultValue: 1200, + min: -2000, + max: 2000, }, }, ],