fix: seedrandom dependency (#424)

allow DataGenerator class to take a random number generator function

.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);
+  }
+}

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) {

src/utils/data_generators/simple_noise.ts

@@ -1,21 +1,22 @@
-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;
     this.maxVertices = maxVertices;
   }
 
   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;

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');
 

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),

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,

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);