diff --git a/packages/dev/src/examples/auxiliary/annotations/basic-annotations/index.tsx b/packages/dev/src/examples/auxiliary/annotations/basic-annotations/index.tsx index a524b8d8c..f5d317ef9 100644 --- a/packages/dev/src/examples/auxiliary/annotations/basic-annotations/index.tsx +++ b/packages/dev/src/examples/auxiliary/annotations/basic-annotations/index.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useRef, useState } from 'react' import { VisXYContainer, VisLine, VisAxis, VisAnnotations, VisLineRef } from '@unovis/react' import { AnnotationItem } from '@unovis/ts' +import { rng } from '@src/utils/data' export const title = 'Basic Annotations' export const subTitle = 'Dynamic Data Updates' @@ -10,7 +11,7 @@ export const component = (): JSX.Element => { const length = 10 const min = 3 const max = 8 - const generateData = (): number[] => Array.from({ length }, () => Math.random() * (max - min) + min) + const generateData = (): number[] => Array.from({ length }, () => rng() * (max - min) + min) const ref = useRef>(null) const [data, setData] = useState(generateData) diff --git a/packages/dev/src/examples/auxiliary/bullet-legend/legend-stacked-bar-donut/index.tsx b/packages/dev/src/examples/auxiliary/bullet-legend/legend-stacked-bar-donut/index.tsx index 9511d7cc7..4e46da4d2 100644 --- a/packages/dev/src/examples/auxiliary/bullet-legend/legend-stacked-bar-donut/index.tsx +++ b/packages/dev/src/examples/auxiliary/bullet-legend/legend-stacked-bar-donut/index.tsx @@ -1,6 +1,7 @@ import React from 'react' import { sum } from 'd3-array' import { VisBulletLegend, VisSingleContainer, VisDonut, VisXYContainer, VisStackedBar } from '@unovis/react' +import { rng } from '@src/utils/data' import s from './styles.module.css' @@ -16,7 +17,7 @@ export const component = (): JSX.Element => { const items = Array(6).fill(0).map((_, i) => ({ name: `y${i}` })) const data = Array(10).fill(0).map((_, i) => ({ x: i, - ys: items.map(() => Math.random()), + ys: items.map(() => rng()), })) const accessors = items.map((_, i) => (d: DataRecord) => d.ys[i]) diff --git a/packages/dev/src/examples/auxiliary/bullet-legend/vertical-legend/index.tsx b/packages/dev/src/examples/auxiliary/bullet-legend/vertical-legend/index.tsx index c1338638d..b9a32f47a 100644 --- a/packages/dev/src/examples/auxiliary/bullet-legend/vertical-legend/index.tsx +++ b/packages/dev/src/examples/auxiliary/bullet-legend/vertical-legend/index.tsx @@ -1,6 +1,7 @@ import React from 'react' import { VisBulletLegend, VisXYContainer, VisAxis, VisStackedBar } from '@unovis/react' import { BulletLegendOrientation } from '@unovis/ts' +import { rng } from '@src/utils/data' import s from './styles.module.css' @@ -16,7 +17,7 @@ const data = Array.from({ length: 150 }, (_, i) => ({ ...seriesLabels .reduce((acc, label) => ({ ...acc, - [label]: label.length + Math.random() * 5, + [label]: label.length + rng() * 5, }), {} as Record), })) diff --git a/packages/dev/src/examples/networks-and-flows/graph/graph-dynamic-layout/index.tsx b/packages/dev/src/examples/networks-and-flows/graph/graph-dynamic-layout/index.tsx index 06c9560a5..98b72cfe4 100644 --- a/packages/dev/src/examples/networks-and-flows/graph/graph-dynamic-layout/index.tsx +++ b/packages/dev/src/examples/networks-and-flows/graph/graph-dynamic-layout/index.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useMemo, useState } from 'react' import { VisSingleContainer, VisGraph } from '@unovis/react' import { GraphLayoutType } from '@unovis/ts' -import { generateNodeLinkData } from '@src/utils/data' +import { generateNodeLinkData, rng } from '@src/utils/data' export const title = 'Dynamic Layout' export const subTitle = 'Select Layout From Dropdown' @@ -15,12 +15,12 @@ export const component = (): JSX.Element => { // Generate new data every 2 seconds useEffect(() => { setTimeout(() => { - const newData = generateNodeLinkData(10 + Math.floor(Math.random() * 50)) + const newData = generateNodeLinkData(10 + Math.floor(rng() * 50)) // Adding some random x, y values to the nodes for `GraphLayoutType.Precalculated` newData.nodes.forEach(n => { - n.x = Math.random() * 1000 - n.y = Math.random() * 1000 + n.x = rng() * 1000 + n.y = rng() * 1000 }) setData(newData) diff --git a/packages/dev/src/examples/networks-and-flows/graph/graph-link-label/index.tsx b/packages/dev/src/examples/networks-and-flows/graph/graph-link-label/index.tsx index 8f03a2599..cf6797ed1 100644 --- a/packages/dev/src/examples/networks-and-flows/graph/graph-link-label/index.tsx +++ b/packages/dev/src/examples/networks-and-flows/graph/graph-link-label/index.tsx @@ -1,6 +1,6 @@ import React from 'react' import { VisSingleContainer, VisGraph } from '@unovis/react' -import { generateNodeLinkData, NodeDatum, LinkDatum } from '@src/utils/data' +import { generateNodeLinkData, NodeDatum, LinkDatum, rng } from '@src/utils/data' import { GraphCircleLabel } from '@unovis/ts' export const title = 'Node and Link Circle Labels' @@ -9,11 +9,11 @@ export const subTitle = 'with custom configuration' export const component = (): JSX.Element => { const data = generateNodeLinkData(15) const linkLabels: GraphCircleLabel[] = data.links.map((link, i) => { - const hasCustomAppearance = Math.random() > 0.8 + const hasCustomAppearance = rng() > 0.8 return { text: hasCustomAppearance ? `${i}${i}${i}` : `${i * 10}`, fontSize: hasCustomAppearance ? '8px' : undefined, - radius: hasCustomAppearance ? 0 : 5 + 10 * Math.random(), + radius: hasCustomAppearance ? 0 : 5 + 10 * rng(), cursor: 'pointer', textColor: hasCustomAppearance ? 'blue' : undefined, } diff --git a/packages/dev/src/examples/networks-and-flows/graph/graph-node-labels/index.tsx b/packages/dev/src/examples/networks-and-flows/graph/graph-node-labels/index.tsx index 60f35bb90..2a02f307c 100644 --- a/packages/dev/src/examples/networks-and-flows/graph/graph-node-labels/index.tsx +++ b/packages/dev/src/examples/networks-and-flows/graph/graph-node-labels/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import { VisSingleContainer, VisGraph } from '@unovis/react' import { TrimMode } from '@unovis/ts' -import { generateNodeLinkData, NodeDatum, LinkDatum } from '@src/utils/data' +import { generateNodeLinkData, NodeDatum, LinkDatum, rng } from '@src/utils/data' import { sample } from '@src/utils/array' export const title = 'Node Labels and Sub-labels' @@ -16,12 +16,12 @@ export const component = (): JSX.Element => { const labels = data.nodes.map((d, i) => ({ label: `${sample(animals)} ${sample(colors)}`, subLabel: `${sample(regions)} ${sample(colors)} ${sample(animals)}`, - labelTrim: Math.random() > 0.2, + labelTrim: rng() > 0.2, labelTrimMode: sample(trimModes), - labelTrimLength: Math.round(3 + 12 * Math.random()), - subLabelTrim: Math.random() > 0.2, + labelTrimLength: Math.round(3 + 12 * rng()), + subLabelTrim: rng() > 0.2, subLabelTrimMode: sample(trimModes), - subLabelTrimLength: Math.round(3 + 12 * Math.random()), + subLabelTrimLength: Math.round(3 + 12 * rng()), })) return ( diff --git a/packages/dev/src/examples/xy-components/xy-labels/labels-stacked-bar/index.tsx b/packages/dev/src/examples/xy-components/xy-labels/labels-stacked-bar/index.tsx index 58d42f8b5..e2986338d 100644 --- a/packages/dev/src/examples/xy-components/xy-labels/labels-stacked-bar/index.tsx +++ b/packages/dev/src/examples/xy-components/xy-labels/labels-stacked-bar/index.tsx @@ -2,7 +2,7 @@ import React, { useRef } from 'react' import { XYLabels } from '@unovis/ts' import { VisXYContainer, VisStackedBar, VisAxis, VisTooltip, VisCrosshair, VisXYLabels } from '@unovis/react' -import { XYDataRecord, generateXYDataRecords } from '@src/utils/data' +import { XYDataRecord, generateXYDataRecords, rng } from '@src/utils/data' // Style import s from './style.module.css' @@ -21,7 +21,7 @@ export const component = (): JSX.Element => { type AlertDataRecord = { x: number; label: string } const alerts: AlertDataRecord[] = Array(10).fill(null).map(() => ({ - x: data[Math.floor(Math.random() * data.length)].x, + x: data[Math.floor(rng() * data.length)].x, label: '❕', })) diff --git a/packages/dev/src/utils/array.ts b/packages/dev/src/utils/array.ts index 0d50bcac0..569572fe5 100644 --- a/packages/dev/src/utils/array.ts +++ b/packages/dev/src/utils/array.ts @@ -1,3 +1,4 @@ +import { rng } from '@src/utils/data' export function groupBy> (arr: T[], key: string): Record { return arr.reduce( (grouped, v, i, a, k = v[key]) => (((grouped[k] || (grouped[k] = [])).push(v), grouped)), @@ -5,4 +6,4 @@ export function groupBy> (arr: T[], key: string): ) } -export const sample = (arr: T[]): T => arr[Math.floor(Math.random() * arr.length)] +export const sample = (arr: T[]): T => arr[Math.floor(rng() * arr.length)] diff --git a/packages/dev/src/utils/data.ts b/packages/dev/src/utils/data.ts index e58344b43..80012034b 100644 --- a/packages/dev/src/utils/data.ts +++ b/packages/dev/src/utils/data.ts @@ -2,7 +2,7 @@ import { GenericDataRecord } from '@unovis/ts' import { sample } from './array' /* eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/naming-convention */ const SeedRandom = require('seedrandom') -const rng = new SeedRandom('hello.') +export const rng = new SeedRandom('hello.') export type XYDataRecord = { x: number;