Merge pull request #5 from mitigate-dev/develop

feat: Support slices

Author: niklavsBariss

README.md

@@ -132,8 +132,9 @@ type Dataset = {
   unit: string // Unit symbol (e.g., '°C', 'kg', 'm/s')
   decimals: number // Number of decimal places to show
   minDeltaY?: number // Minimum Y-axis change to show, limit Y-zoom
-  areaColor?: string // Optional area fill color (defaults to base color)
+  areaColor?: string | null // Area fill color (null to disable, defaults to base color)
   axisColor?: string // Optional Y-axis text color (defaults to base color)
+  slices?: Slices // Optional background regions/zones
   decimalSeparator?: '.' | ',' // Decimal separator
   domain?: {
     // Custom Y-axis range
@@ -142,6 +143,16 @@ type Dataset = {
   }
 }
 
+type Slices = {
+  start: number // Start timestamp for the slices
+  end: number // End timestamp for the slices
+  items: Array<{
+    color: string // Background color (use alpha for transparency)
+    start: { top: number; bottom: number } // Y-values at start time
+    end: { top: number; bottom: number } // Y-values at end time
+  }>
+}
+
 type ThresholdColor = {
   type: 'thresholds'
   baseColor: string // Default color for values below all thresholds
@@ -258,6 +269,48 @@ const datasetWithThresholds = {
 - **Battery levels**: Red (critical) → Orange (low) → Green (healthy)
 - **Network latency**: Green (fast) → Yellow (moderate) → Red (slow)
 
+### Background Slices/Zones
+
+Add colored background regions to highlight acceptable ranges, warning zones, or targets:
+
+```tsx
+const datasetWithSlices = {
+  measurementName: 'CPU Usage',
+  color: '#333',
+  unit: '%',
+  decimals: 1,
+  points: cpuData,
+  slices: {
+    start: startTimestamp,
+    end: endTimestamp,
+    items: [
+      {
+        color: '#00FF0020', // Green with transparency (healthy zone)
+        start: { bottom: 0, top: 50 },
+        end: { bottom: 0, top: 50 },
+      },
+      {
+        color: '#FFA50020', // Orange with transparency (warning zone)
+        start: { bottom: 50, top: 80 },
+        end: { bottom: 50, top: 80 },
+      },
+      {
+        color: '#FF000020', // Red with transparency (critical zone)
+        start: { bottom: 80, top: 100 },
+        end: { bottom: 80, top: 100 },
+      },
+    ],
+  },
+}
+```
+
+**Features:**
+
+- **Horizontal zones**: Use same top/bottom values for start and end
+- **Diagonal zones**: Use different values to create slanted regions
+- **Transparency**: Use alpha channel (e.g., `#FF000020`) for subtle backgrounds
+- **Multiple regions**: Stack different colored zones for complex visualizations
+
 ### Zoom Callbacks
 
 ```tsx

example/src/App.tsx

@@ -3,6 +3,10 @@ import { View, StyleSheet, TouchableOpacity, Text, Switch } from 'react-native'
 
 import Chart, { ChartProps, Dataset } from 'react-native-d3-chart'
 
+import { buildSlices } from './helpers/buildSlices'
+import { generateTimeSeriesData } from './helpers/generateTimeSeriesData'
+import { temperatureData, visits } from './mockData'
+
 type TimeDomainType = 'hour' | 'day' | 'week' | 'month'
 
 const TIME_DOMAIN_TYPES: TimeDomainType[] = ['hour', 'day', 'week', 'month']
@@ -16,53 +20,22 @@ const chartColors: ChartProps['colors'] = {
   highlightTime: '#444',
 }
 
-// Generate data points every minute from a month ago to now
-const generateDataPoints = ({
-  startingValue = 400,
-  minimum = 0,
-  maximum = 3000,
-  radomFactor = 20,
-} = {}) => {
-  const points = []
-  const now = Date.now()
-  const monthAgo = now - 30 * 24 * 60 * 60 * 1000 // 30 days ago
-  let value = startingValue
-
-  for (let timestamp = monthAgo; timestamp <= now; timestamp += 60 * 1000) {
-    const randomVariation = (Math.random() - 0.5) * radomFactor
-    value += randomVariation
-
-    // either randomVariation was negative and value went below minimum
-    // or     randomVariation was positive and value went above maximum
-    if (value < minimum || value > maximum) {
-      // invert direction to keep within bounds
-      value -= 2 * randomVariation
-    }
-
-    points.push({ timestamp, value })
-  }
-
-  return points
-}
-
 enum Measurement {
   Temperature = 'Temperature',
   Blue = 'Blue',
   Green = 'Green',
   Pink = 'Pink',
+  Visits = 'Visits',
+  VisitRate = 'Visit Rate',
 }
+
 const measurementKeys = Object.values(Measurement)
 const measurementsRecords: Record<Measurement, Dataset> = {
   [Measurement.Temperature]: {
     unit: '°C',
-    points: generateDataPoints({
-      maximum: 40,
-      minimum: -10,
-      radomFactor: 1,
-      startingValue: -8,
-    }),
+    points: temperatureData,
     decimals: 0,
-    areaColor: '#83cba8',
+    areaColor: '#c4deff',
     color: {
       type: 'thresholds',
       baseColor: '#3d91ff',
@@ -79,7 +52,7 @@ const measurementsRecords: Record<Measurement, Dataset> = {
   },
   [Measurement.Blue]: {
     unit: 'l',
-    points: generateDataPoints({
+    points: generateTimeSeriesData({
       startingValue: 160,
       minimum: 50,
       radomFactor: 6,
@@ -90,21 +63,50 @@ const measurementsRecords: Record<Measurement, Dataset> = {
   },
   [Measurement.Green]: {
     unit: 'kg',
-    points: generateDataPoints(),
+    points: generateTimeSeriesData(),
     decimals: 0,
     color: '#6e6',
     measurementName: Measurement.Green,
   },
   [Measurement.Pink]: {
     unit: 'm/s',
-    points: generateDataPoints({
+    points: generateTimeSeriesData({
       startingValue: 20,
       minimum: 100,
     }),
     decimals: 1,
     color: '#e0e',
     measurementName: Measurement.Pink,
   },
+
+  [Measurement.VisitRate]: {
+    unit: 'visits/h',
+    points: visits.movingAveregeData,
+    slices: buildSlices('horizontal', {
+      end: visits.latestTimestamp,
+      start: visits.oldestTimestamp,
+      yellowThreshold: visits.averageVisitRatePerHour,
+      redThreshold: visits.averageVisitRatePerHour * 1.1,
+    }),
+    decimals: 0,
+    color: '#000',
+    areaColor: null,
+    measurementName: Measurement.VisitRate,
+  },
+  [Measurement.Visits]: {
+    unit: 'pulses',
+    points: visits.culmulativeData,
+    decimals: 0,
+    color: '#000',
+    areaColor: null,
+    measurementName: 'Visits cumulative',
+    slices: buildSlices('axial', {
+      end: visits.latestTimestamp,
+      start: visits.oldestTimestamp,
+      yellowThreshold: visits.averageVisitRatePerHour,
+      redThreshold: visits.averageVisitRatePerHour * 1.1,
+    }),
+  },
 }
 
 export default function App() {

example/src/helpers/buildSlices.ts

@@ -0,0 +1,82 @@
+import type { Slices } from '../../../src/types'
+
+export function buildSlices(
+  variant: 'horizontal' | 'axial',
+  {
+    end,
+    start,
+    redThreshold,
+    yellowThreshold,
+  }: {
+    end: number
+    start: number
+    redThreshold: number
+    yellowThreshold: number
+  }
+): Slices {
+  if (variant === 'horizontal') {
+    return {
+      end,
+      start,
+      items: [
+        {
+          color: '#08985115',
+          start: { bottom: 0, top: yellowThreshold },
+          end: { bottom: 0, top: yellowThreshold },
+        },
+        {
+          color: '#ffc40015',
+          start: {
+            bottom: yellowThreshold,
+            top: redThreshold,
+          },
+          end: {
+            bottom: yellowThreshold,
+            top: redThreshold,
+          },
+        },
+        {
+          color: '#bb222215',
+          start: {
+            bottom: redThreshold,
+            top: redThreshold * 10,
+          },
+          end: {
+            bottom: redThreshold,
+            top: redThreshold * 10,
+          },
+        },
+      ],
+    }
+  }
+
+  const dataDurationMs = end - start
+  const dataDurationHours = dataDurationMs / (60 * 60 * 1000)
+
+  const warningEnd = dataDurationHours * yellowThreshold
+  const dangerEnd = dataDurationHours * redThreshold
+
+  const topEdge = redThreshold * 2 * dataDurationHours
+
+  return {
+    end,
+    start,
+    items: [
+      {
+        color: '#08985115',
+        start: { bottom: 0, top: 0 },
+        end: { bottom: 0, top: warningEnd },
+      },
+      {
+        color: '#ffc40015',
+        start: { bottom: 0, top: 0 },
+        end: { bottom: warningEnd, top: dangerEnd },
+      },
+      {
+        color: '#bb222215',
+        start: { bottom: 0, top: topEdge },
+        end: { bottom: dangerEnd, top: topEdge },
+      },
+    ],
+  }
+}

example/src/helpers/generateRandomPulses.ts

@@ -0,0 +1,63 @@
+/**
+ * Generates random pulse data points over a specified time range.
+ * @param maxAgeDays - The maximum age of the data points in days.
+ * @param intervalMs - Time interval in milliseconds between consecutive data points. Default is 60,000 ms (1 minute).
+ * @param averageRatePerHour - Average number of pulses per hour. Default is 120.
+ * @param burstFactor - Factor by which the pulse rate increases during bursts. Default is 3.
+ * @param burstProbability - Probability of a burst occurring at each interval. Default is 0.1.
+ * @returns An array of random pulse data points.
+ */
+export function generateRandomPulses({
+  maxAgeDays = 30,
+  intervalMs = 60 * 1000,
+  averageRatePerHour = 120,
+  burstFactor = 3,
+  burstProbability = 0.1,
+} = {}) {
+  const points = []
+  const now = Date.now()
+  const oldestTimestamp = now - maxAgeDays * 24 * 60 * 60 * 1000 // maxAgeDays ago
+  const averageRate = averageRatePerHour / 60 // Convert to per minute
+
+  for (
+    let timestamp = oldestTimestamp;
+    timestamp <= now;
+    timestamp += intervalMs
+  ) {
+    // Generate clustered/bursty Poisson data with higher short-term variance
+    // Calculate rates to maintain target average: baseRate * (1-p) + burstRate * p = averageRate
+    const burstRate = averageRate * burstFactor
+    const baseRate =
+      (averageRate - burstRate * burstProbability) / (1 - burstProbability)
+
+    let pulses = 0
+
+    // Determine if this is a burst period
+    const isBurst = Math.random() < burstProbability
+    const lambda = isBurst ? burstRate : baseRate
+
+    if (lambda < 30) {
+      // Knuth's algorithm for small λ
+      const L = Math.exp(-lambda)
+      let k = 0
+      let p = 1
+
+      do {
+        k++
+        p *= Math.random()
+      } while (p > L)
+
+      pulses = k - 1
+    } else {
+      // Normal approximation for large λ
+      const u1 = Math.random()
+      const u2 = Math.random()
+      const z = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2)
+      pulses = Math.max(0, Math.round(lambda + Math.sqrt(lambda) * z))
+    }
+
+    points.push({ timestamp, value: pulses })
+  }
+
+  return points
+}

example/src/helpers/generateTimeSeriesData.ts

@@ -0,0 +1,39 @@
+/**
+ * Generates time series data points, each point deviating slightly from the previous one.
+ * @param startingValue Initial value for the first data point. Default is 400.
+ * @param minimum Minimum value for the data points. Default is 0.
+ * @param maximum Maximum value for the data points. Default is 3000.
+ * @param maxAgeDays Number of days in the past to start generating data from. Default is 30 days.
+ * @param intervalMs Time interval in milliseconds between consecutive data points. Default is 60,000 ms (1 minute).
+ * @param radomFactor Maximum random variation applied to each point. Default is 20.
+ * @returns Array of data points with timestamps and values.
+ */
+export function generateTimeSeriesData({
+  startingValue = 400,
+  minimum = 0,
+  maximum = 3000,
+  maxAgeDays = 30,
+  intervalMs = 60 * 1000,
+  radomFactor = 20,
+} = {}) {
+  const points = []
+  const now = Date.now()
+  const monthAgo = now - maxAgeDays * 24 * 60 * 60 * 1000
+  let value = startingValue
+
+  for (let timestamp = monthAgo; timestamp <= now; timestamp += intervalMs) {
+    const randomVariation = (Math.random() - 0.5) * radomFactor
+    value += randomVariation
+
+    // either randomVariation was negative and value went below minimum
+    // or     randomVariation was positive and value went above maximum
+    if (value < minimum || value > maximum) {
+      // invert direction to keep within bounds
+      value -= 2 * randomVariation
+    }
+
+    points.push({ timestamp, value })
+  }
+
+  return points
+}