diff --git a/.storybook/utils.ts b/.storybook/utils.ts new file mode 100644 index 0000000000..b40f42cbd6 --- /dev/null +++ b/.storybook/utils.ts @@ -0,0 +1,11 @@ +import seedrandom from 'seedrandom'; + +import { DataGenerator } from '../src'; + +export const getRandomNumber = seedrandom(process.env.RNG_SEED || undefined); + +export class SeededDataGenerator extends DataGenerator { + constructor(frequency = 500) { + super(frequency, getRandomNumber); + } +} diff --git a/src/utils/data_generators/data_generator.ts b/src/utils/data_generators/data_generator.ts index bad57c7001..b7fc3ff0f9 100644 --- a/src/utils/data_generators/data_generator.ts +++ b/src/utils/data_generators/data_generator.ts @@ -1,10 +1,10 @@ -import { Simple1DNoise } from './simple_noise'; +import { Simple1DNoise, RandomNumberGenerator } from './simple_noise'; export class DataGenerator { private generator: Simple1DNoise; private frequency: number; - constructor(frequency = 500) { - this.generator = new Simple1DNoise(); + constructor(frequency = 500, randomNumberGenerator?: RandomNumberGenerator) { + this.generator = new Simple1DNoise(randomNumberGenerator); this.frequency = frequency; } generateSimpleSeries(totalPoints = 50, group = 1) { diff --git a/src/utils/data_generators/simple_noise.ts b/src/utils/data_generators/simple_noise.ts index cd98104202..0f4dabd943 100644 --- a/src/utils/data_generators/simple_noise.ts +++ b/src/utils/data_generators/simple_noise.ts @@ -1,13 +1,14 @@ -import seedrandom from 'seedrandom'; - -export const getRandomNumber = seedrandom(process.env.RNG_SEED || undefined); +export type RandomNumberGenerator = () => number; export class Simple1DNoise { private maxVertices: number; private maxVerticesMask: number; private amplitude: number; private scale: number; - constructor(maxVertices = 256, amplitude = 5.1, scale = 0.6) { + private getRandomNumber: RandomNumberGenerator; + + constructor(randomNumberGenerator?: RandomNumberGenerator, maxVertices = 256, amplitude = 5.1, scale = 0.6) { + this.getRandomNumber = randomNumberGenerator ? randomNumberGenerator : Math.random; this.maxVerticesMask = maxVertices - 1; this.amplitude = amplitude; this.scale = scale; @@ -15,7 +16,7 @@ export class Simple1DNoise { } getValue(x: number) { - const r = new Array(this.maxVertices).fill(0).map(getRandomNumber); + const r = new Array(this.maxVertices).fill(0).map(this.getRandomNumber); const scaledX = x * this.scale; const xFloor = Math.floor(scaledX); const t = scaledX - xFloor; diff --git a/stories/area_chart.tsx b/stories/area_chart.tsx index 7b7d6331da..d30a3e761b 100644 --- a/stories/area_chart.tsx +++ b/stories/area_chart.tsx @@ -16,7 +16,7 @@ import { timeFormatter, } from '../src'; import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana'; -import { getRandomNumber } from '../src/utils/data_generators/simple_noise'; +import { getRandomNumber } from '../.storybook/utils'; const dateFormatter = timeFormatter('HH:mm'); diff --git a/stories/axis.tsx b/stories/axis.tsx index c90b262974..a5a0c1bedd 100644 --- a/stories/axis.tsx +++ b/stories/axis.tsx @@ -1,12 +1,12 @@ import { array, boolean, number } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react'; import React from 'react'; + import { AreaSeries, Axis, BarSeries, Chart, - DataGenerator, getAxisId, getGroupId, getSpecId, @@ -19,6 +19,7 @@ import { Settings, niceTimeFormatter, } from '../src/'; +import { SeededDataGenerator } from '../.storybook/utils'; import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana'; function createThemeAction(title: string, min: number, max: number, value: number) { @@ -364,7 +365,7 @@ storiesOf('Axis', module) ); }) .add('w many tick labels', () => { - const dg = new DataGenerator(); + const dg = new SeededDataGenerator(); const data = dg.generateSimpleSeries(31); const customStyle = { tickLabelPadding: number('Tick Label Padding', 0), diff --git a/stories/bar_chart.tsx b/stories/bar_chart.tsx index a96a2b48d6..7e50bea811 100644 --- a/stories/bar_chart.tsx +++ b/stories/bar_chart.tsx @@ -10,7 +10,6 @@ import { BarSeries, Chart, DARK_THEME, - DataGenerator, getAnnotationId, getAxisId, getGroupId, @@ -28,17 +27,15 @@ import { timeFormatter, TooltipType, } from '../src'; +import { SeededDataGenerator, getRandomNumber } from '../.storybook/utils'; import * as TestDatasets from '../src/utils/data_samples/test_dataset'; - import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana'; - import { TEST_DATASET_DISCOVER } from '../src/utils/data_samples/test_dataset_discover_per_30s'; -import { getRandomNumber } from '../src/utils/data_generators/simple_noise'; import { getChartRotationKnob } from './common'; const dateFormatter = timeFormatter('HH:mm:ss'); -const dataGen = new DataGenerator(); +const dataGen = new SeededDataGenerator(); function generateDataWithAdditional(num: number) { return [...dataGen.generateSimpleSeries(num), { x: num, y: 0.25, g: 0 }, { x: num + 1, y: 8, g: 0 }]; } @@ -827,7 +824,7 @@ storiesOf('Bar Chart', module) ); }) .add('with high data volume', () => { - const dg = new DataGenerator(); + const dg = new SeededDataGenerator(); const data = dg.generateSimpleSeries(15000); const tooltipProps = { type: TooltipType.Follow, diff --git a/stories/styling.tsx b/stories/styling.tsx index b512bf79d0..d1c8925cb5 100644 --- a/stories/styling.tsx +++ b/stories/styling.tsx @@ -1,6 +1,7 @@ import { boolean, color, number, select } from '@storybook/addon-knobs'; import { storiesOf } from '@storybook/react'; import React from 'react'; + import { switchTheme } from '../.storybook/theme_service'; import { AreaSeries, @@ -9,7 +10,6 @@ import { Chart, CurveType, CustomSeriesColorsMap, - DataGenerator, DataSeriesColorsValues, DEFAULT_MISSING_COLOR, getAxisId, @@ -28,6 +28,7 @@ import { BarSeriesStyle, PointStyle, } from '../src/'; +import { SeededDataGenerator } from '../.storybook/utils'; import * as TestDatasets from '../src/utils/data_samples/test_dataset'; import { palettes } from '../src/utils/themes/colors'; import { BarStyleAccessor, PointStyleAccessor } from '../src/chart_types/xy_chart/utils/specs'; @@ -104,7 +105,7 @@ function generateAreaSeriesStyleKnobs( }; } -const dg = new DataGenerator(); +const dg = new SeededDataGenerator(); const data1 = dg.generateGroupedSeries(40, 4); const data2 = dg.generateSimpleSeries(40); const data3 = dg.generateSimpleSeries(40);