feat: Add error-segment feature

Author: niklavsBariss

example/src/App.tsx

@@ -1,7 +1,7 @@
 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, ErrorSegment } from 'react-native-d3-chart'
 
 import { buildSlices } from './helpers/buildSlices'
 import { generateTimeSeriesData } from './helpers/generateTimeSeriesData'
@@ -138,9 +138,49 @@ export default function App() {
     [Measurement.Temperature]
   )
 
+  const errorSegments = useMemo<ErrorSegment[]>(() => {
+    const now = Date.now()
+    return [
+      {
+        message: 'Unknown error',
+        messageColor: '#f0f',
+        start: now - 50 * 60 * 1000,
+        end: now - 40 * 60 * 1000,
+      },
+      {
+        message: 'No data yet',
+        messageColor: '#b22',
+        start: now - 2 * 60 * 1000,
+        end: now + 15 * 60 * 1000,
+      },
+    ]
+  }, [])
+
   const datasets = useMemo<Dataset[]>(
-    () => enabledMeasurements.map((m) => measurementsRecords[m]),
-    [enabledMeasurements]
+    () =>
+      enabledMeasurements.map((enabledMeasurement, index) => {
+        const data = measurementsRecords[enabledMeasurement]
+        if (index !== 0) return data
+
+        const firstErrorSegment = errorSegments[0]
+        if (!firstErrorSegment) return data
+
+        // invalidate points within first error segment for the first measurement for demo purposes
+        return {
+          ...data,
+          decimalSeparator: ',',
+          decimals: 2,
+          points: data.points.map((point) => ({
+            timestamp: point.timestamp,
+            value:
+              point.timestamp - 60 * 1000 > firstErrorSegment.start &&
+              point.timestamp + 60 * 1000 < firstErrorSegment.end
+                ? null
+                : point.value,
+          })),
+        }
+      }),
+    [enabledMeasurements, errorSegments]
   )
 
   return (
@@ -156,6 +196,7 @@ export default function App() {
         colors={chartColors}
         timeDomain={timeDomain}
         marginHorizontal={PADDING}
+        errorSegments={errorSegments}
         noDataString="No data available"
       />
       <View style={styles.spacer} />

src/Chart.tsx

@@ -9,6 +9,7 @@ import {
   type ChartProps,
   type TimeDomain,
   type ChartColors,
+  type ErrorSegment,
   type CalendarStrings,
 } from './types'
 
@@ -26,6 +27,7 @@ type HtmlProps = {
   timeDomain: TimeDomain
   marginHorizontal: number
   calendar?: CalendarStrings
+  errorSegments?: ErrorSegment[]
 }
 
 export default function Chart({
@@ -35,6 +37,7 @@ export default function Chart({
   timeDomain,
   zoomEnabled,
   noDataString,
+  errorSegments,
   calendarStrings,
   colors: chartColors,
   locale = 'en',
@@ -64,6 +67,7 @@ export default function Chart({
       datasets,
       timeDomain,
       noDataString,
+      errorSegments,
       marginHorizontal,
       calendar: calendarStrings,
       zoomEnabled: !!zoomEnabled,
@@ -95,6 +99,7 @@ export default function Chart({
     chartColors,
     zoomEnabled,
     noDataString,
+    errorSegments,
     calendarStrings,
     marginHorizontal,
   ])

src/drawFunction.js

@@ -108,6 +108,11 @@ function findClosest(data, target) {
   return finalIx
 }
 
+function getClosest(data, target) {
+  const closestIndex = findClosest(data, target)
+  return data[closestIndex]
+}
+
 function postMessage(type, payload) {
   if (window.ReactNativeWebView) {
     window.ReactNativeWebView.postMessage(JSON.stringify({ type, payload }))
@@ -380,11 +385,61 @@ window.draw = (props) => {
       .attr('x', 0)
       .attr('y', 0)
 
+    defs
+      .append('linearGradient')
+      .attr('id', 'error-gradient')
+      .attr('gradientUnits', 'userSpaceOnUse')
+      .attr('x1', 0)
+      .attr('x2', 0)
+      .attr('y1', 0)
+      .attr('y2', height)
+      .selectAll('stop')
+      .data([
+        { offset: '0%', opacity: 0 },
+        { offset: '100%', opacity: 0.1 },
+      ])
+      .enter()
+      .append('stop')
+      .attr('offset', (d) => d.offset)
+      .attr('stop-opacity', (d) => d.opacity)
+      .attr('stop-color', '#000000')
+
     const chart = selectOrAppend(svg, 'g', 'chart').attr(
       'clip-path',
       'url(#clip)'
     )
 
+    var drawErrorSegments = () => {
+      const errorSegmentsHolder = selectOrAppend(
+        chart,
+        'g',
+        'errorSegmentsHolder'
+      )
+      errorSegmentsHolder.selectAll('rect').remove()
+      if (!props.errorSegments?.length) return
+
+      try {
+        const parseTime = d3.timeParse('%Q')
+        errorSegmentsHolder
+          .selectAll('rect')
+          .data(
+            props.errorSegments.map(({ start, end }) => ({
+              startDate: parseTime(start),
+              endDate: parseTime(end),
+            }))
+          )
+          .enter()
+          .append('rect')
+          .attr('fill', 'url(#error-gradient)')
+          .attr('height', height)
+          .attr('width', (d) => x(d.endDate) - x(d.startDate))
+          .attr('x', (d) => x(d.startDate))
+      } catch (e) {
+        postMessage('error segment update error', e.message)
+      }
+    }
+    drawErrorSegments()
+
     const getGradientOffset =
       (yScale) =>
       ({ value }) =>
@@ -445,7 +500,7 @@ window.draw = (props) => {
             opacity: 0.223958 * baseOpacity,
           },
           { value: y.domain()[0], opacity: 0 },
-        ] 
+        ]
         defs
           .append('linearGradient')
           .attr('id', 'area-gradient' + index)
@@ -767,6 +822,7 @@ window.draw = (props) => {
 
         updateHighlight()
         updateSlices()
+        drawErrorSegments()
       } catch (e) {
         postMessage('zoomerror', e.message)
       }
@@ -788,6 +844,10 @@ window.draw = (props) => {
       const x0 = width * highlightPosition
       const highlightExactDate = x.invert(x0)
 
+      const highlightedErrorSegment = props.errorSegments?.find(
+        (s) => s.start < highlightExactDate && s.end > highlightExactDate
+      )
+
       var highlightTime = null
       props.datasets.forEach((dataset, index) => {
         const { unit, decimals } = dataset
@@ -802,19 +862,25 @@ window.draw = (props) => {
           return
         }
 
-        const pointIndex = findClosest(definedData, highlightExactDate)
-        const highlight = definedData[pointIndex]
-
+        const highlight = getClosest(definedData, highlightExactDate)
         const xValue = x(highlight.date)
 
-        const tooFar =
-          Math.abs(x0 - xValue) > 8 &&
+        const is10MinutesAway =
           Math.abs(highlightExactDate - highlight.date) > 10 * 60 * 1000
+        const is8PixelsAway = Math.abs(x0 - xValue) > 8
 
-        const color = getDatasetColor(
-          dataset,
-          tooFar ? undefined : highlight.value
-        )
+        // Closest defined point is more than 10 minutes away, or we are in error segment + closest _unfiltered_ point is null
+        const tooFar =
+          is8PixelsAway &&
+          (is10MinutesAway ||
+            (!!highlightedErrorSegment &&
+              getClosest(operators[index].domainData, highlightExactDate)
+                ?.value === null))
+        const isInErrorSegment = highlightedErrorSegment && tooFar
+
+        const color = isInErrorSegment
+          ? highlightedErrorSegment.messageColor
+          : getDatasetColor(dataset, tooFar ? undefined : highlight.value)
 
         if (!tooFar) {
           highlightTime = highlight.date
@@ -832,9 +898,11 @@ window.draw = (props) => {
           .select('span#highlightvalue' + index)
           .style('color', color)
           .html(
-            tooFar
-              ? props.noDataString
-              : d3.format('.' + decimals + 'f')(highlight.value) + ' ' + unit
+            isInErrorSegment
+              ? highlightedErrorSegment.message
+              : tooFar
+                ? props.noDataString
+                : d3.format('.' + decimals + 'f')(highlight.value) + ' ' + unit
           )
       })
 

src/index.tsx

@@ -4,6 +4,7 @@ export {
   type Dataset,
   type ChartProps,
   type TimeDomain,
+  type ErrorSegment,
   type CalendarStrings,
 } from './types'
 

src/types.ts

@@ -42,24 +42,34 @@ export type Slices = {
 }
 
 export type Dataset = {
-  measurementName: string
-  color: string | ThresholdColor
-  points: Point[]
   unit: string
+  points: Point[]
   decimals: number
+  measurementName: string
+  color: string | ThresholdColor
   slices?: Slices
   minDeltaY?: number
+  axisColor?: string
   /**
    * Background fill color below the line (area chart)
    * Set to null to disable area fill.
    * @default undefined will use `color` with reduced opacity
    */
   areaColor?: string | null
-  axisColor?: string
   decimalSeparator?: '.' | ','
+  /**
+   * Override Y axis domain (min/max values)
+   */
   domain?: { bottom: number; top: number }
 }
 
+export type ErrorSegment = {
+  message: string
+  messageColor: string
+  end: Point['timestamp']
+  start: Point['timestamp']
+}
+
 export type ChartProps = {
   width: number
   height: number
@@ -70,6 +80,7 @@ export type ChartProps = {
   locale?: string
   zoomEnabled?: boolean
   marginHorizontal?: number
+  errorSegments?: ErrorSegment[]
   calendarStrings?: CalendarStrings
   onZoomEnded?: () => void
   onZoomStarted?: () => void