Core | Test: Update rng for testing data

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<VisLineRef<number>>(null)
   const [data, setData] = useState<number[]>(generateData)

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

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<typeof seriesLabels[number], number>),
 }))
 

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)

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

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 (
     <VisSingleContainer data={data} height={600}>

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: '❕',
   }))
 

packages/dev/src/utils/array.ts

@@ -1,8 +1,9 @@
+import { rng } from '@src/utils/data'
 export function groupBy<T extends Record<string, any>> (arr: T[], key: string): Record<string, T[]> {
   return arr.reduce(
     (grouped, v, i, a, k = v[key]) => (((grouped[k] || (grouped[k] = [])).push(v), grouped)),
     {} as Record<string, T[]>
   )
 }
 
-export const sample = <T>(arr: T[]): T => arr[Math.floor(Math.random() * arr.length)]
+export const sample = <T>(arr: T[]): T => arr[Math.floor(rng() * arr.length)]

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;