feat(website): change line demo data generation method

plouc · Aug 30, 2018 · 124028d · 124028d
1 parent 82e03d3
commit 124028d
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,
                     },
                 },
             ],