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

@@ -1,7 +1,9 @@
 import React, { useMemo, useState } from 'react'
 import { View, StyleSheet, TouchableOpacity, Text, Switch } from 'react-native'
 
-import Chart, { ChartProps, Dataset } from 'react-native-d3-chart'
+import Chart, { ChartProps, Dataset, Point } from 'react-native-d3-chart'
+
+import { generateRandomPulses } from './helpers/generateRandomPulses'
 
 type TimeDomainType = 'hour' | 'day' | 'week' | 'month'
 
@@ -50,7 +52,18 @@ enum Measurement {
   Blue = 'Blue',
   Green = 'Green',
   Pink = 'Pink',
+  Pulses = 'Pulses',
+  PulseRate = 'Pulse Rate',
 }
+
+const averagePulseRatePerHour = 120
+const pulsePoints = generateRandomPulses({
+  maxAgeDays: 60,
+  burstFactor: 10,
+  burstProbability: 0.05,
+  averageRatePerHour: averagePulseRatePerHour,
+})
+
 const measurementKeys = Object.values(Measurement)
 const measurementsRecords: Record<Measurement, Dataset> = {
   [Measurement.Temperature]: {
@@ -62,7 +75,7 @@ const measurementsRecords: Record<Measurement, Dataset> = {
       startingValue: -8,
     }),
     decimals: 0,
-    areaColor: '#83cba8',
+    areaColor: '#c4deff',
     color: {
       type: 'thresholds',
       baseColor: '#3d91ff',
@@ -105,6 +118,110 @@ const measurementsRecords: Record<Measurement, Dataset> = {
     color: '#e0e',
     measurementName: Measurement.Pink,
   },
+
+  [Measurement.PulseRate]: {
+    unit: 'pulses/h',
+    points: pulsePoints.map(({ timestamp }, index, array) => {
+      const slice = [...array.slice(Math.max(0, index - 60 + 1), index + 1)] // this and previous 59 minutes
+      const hourSum = slice.reduce((sum, point) => sum + (point.value || 0), 0)
+
+      return {
+        timestamp,
+        value: hourSum,
+      }
+    }),
+    slices: {
+      start: pulsePoints[0]?.timestamp ?? 0,
+      end: pulsePoints[pulsePoints.length - 1]?.timestamp ?? 0,
+      items: [
+        {
+          color: '#08985115',
+          start: { bottom: 0, top: averagePulseRatePerHour },
+          end: { bottom: 0, top: averagePulseRatePerHour },
+        },
+        {
+          color: '#ffc40015',
+          start: {
+            bottom: averagePulseRatePerHour,
+            top: averagePulseRatePerHour * 1.1,
+          },
+          end: {
+            bottom: averagePulseRatePerHour,
+            top: averagePulseRatePerHour * 1.1,
+          },
+        },
+        {
+          color: '#bb222215',
+          start: {
+            bottom: averagePulseRatePerHour * 1.1,
+            top: averagePulseRatePerHour * 10,
+          },
+          end: {
+            bottom: averagePulseRatePerHour * 1.1,
+            top: averagePulseRatePerHour * 10,
+          },
+        },
+      ],
+    },
+    decimals: 0,
+    color: '#000',
+    areaColor: null,
+    measurementName: Measurement.PulseRate,
+  },
+  [Measurement.Pulses]: {
+    unit: 'pulses',
+    points: pulsePoints.reduce(
+      ({ array, sum }, { timestamp, value }) => {
+        const newSum = sum + (value || 0)
+        array.push({ timestamp, value: newSum })
+        return {
+          array,
+          sum: newSum,
+        }
+      },
+      { array: [] as Point[], sum: 0 }
+    ).array,
+    decimals: 0,
+    color: '#000',
+    areaColor: null,
+    measurementName: 'Pulses cumulative',
+    slices: (() => {
+      const start = pulsePoints[0]?.timestamp ?? 0
+      const end = pulsePoints[pulsePoints.length - 1]?.timestamp ?? 0
+      const dataDurationMs = end - start
+      const dataDurationHours = dataDurationMs / (60 * 60 * 1000)
+
+      const warningRate = averagePulseRatePerHour
+      const dangerRate = warningRate * 1.1
+
+      const warningEnd = dataDurationHours * warningRate
+      const dangerEnd = dataDurationHours * dangerRate
+
+      const topEdge = dangerRate * 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 },
+          },
+        ],
+      }
+    })(),
+  },
 }
 
 export default function App() {

example/src/helpers/generateRandomPulses.ts

@@ -0,0 +1,54 @@
+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
+}