Implement onHighlightChanged listener

Author: niklavsBariss

example/src/App.tsx

@@ -10,6 +10,7 @@ import Chart, {
 import { buildSlices } from './helpers/buildSlices'
 import { generateTimeSeriesData } from './helpers/generateTimeSeriesData'
 import { temperatureData, visits } from './mockData'
+import type { HighlightPayload } from '../../src/types'
 
 type TimeDomainType = 'hour' | 'day' | 'week' | 'month'
 
@@ -142,6 +143,12 @@ export default function App() {
     [Measurement.Temperature]
   )
 
+  const [highlightValuePosition, setHighlightValuePosition] = useState<
+    'top' | 'tooltip' | 'none'
+  >('tooltip')
+
+  const [currentHighlight, setCurrentHighlight] = useState<HighlightPayload>()
+
   const errorSegments = useMemo<ErrorSegment[]>(() => {
     const now = Date.now()
     return [
@@ -236,6 +243,19 @@ export default function App() {
           </TouchableOpacity>
         ))}
       </View>
+      <View style={styles.highlightContainer}>
+        <Text>Highlight listener:</Text>
+        <Text>
+          Exact timestamp:
+          {currentHighlight?.timestamp &&
+            new Date(currentHighlight.timestamp).toTimeString()}
+        </Text>
+        {currentHighlight?.values.map((value, index) => (
+          <Text key={index} style={{ color: value?.color || '#000' }}>
+            {`${value?.measurementName}: ${value?.errorMessage ?? value?.value}`}
+          </Text>
+        ))}
+      </View>
       {/* Measurement toggles */}
       {measurementKeys.map((measurement) => (
         <View key={measurement} style={styles.switchContainer}>

src/Chart.tsx

@@ -28,6 +28,7 @@ type HtmlProps = {
   timeDomain: TimeDomain
   marginHorizontal: number
   highlightPosition: number
+  hasHighlightListener: boolean
   xDividerConfig: XDividerConfig
   highlightValuePosition: Required<ChartProps['highlightValuePosition']>
   calendar?: CalendarStrings
@@ -51,6 +52,7 @@ export default function Chart({
   xDividerConfig = { type: 'tick' },
   onZoomEnded,
   onZoomStarted,
+  onHighlightChanged,
 }: ChartProps) {
   const ref = useRef<WebView>(null)
   const propInjection = useRef<string>('')
@@ -78,10 +80,11 @@ export default function Chart({
       errorSegments,
       marginHorizontal,
       highlightPosition,
+      colors: chartColors,
       highlightValuePosition,
       calendar: calendarStrings,
       zoomEnabled: !!zoomEnabled,
-      colors: chartColors,
+      hasHighlightListener: !!onHighlightChanged,
     }
     currentTimeDomain.current = timeDomain
     const injection = `
@@ -109,11 +112,12 @@ export default function Chart({
     chartColors,
     zoomEnabled,
     noDataString,
-    xDividerConfig,
     errorSegments,
+    xDividerConfig,
     calendarStrings,
     marginHorizontal,
     highlightPosition,
+    onHighlightChanged,
     highlightValuePosition,
   ])
 
@@ -132,11 +136,14 @@ export default function Chart({
           message.payload === 'end' && onZoomEnded?.()
           message.payload === 'start' && onZoomStarted?.()
           break
+        case 'highlightChanged':
+          onHighlightChanged?.(message.payload)
+          break
         default:
           console.log(message)
       }
     },
-    [onZoomEnded, onZoomStarted]
+    [onZoomEnded, onZoomStarted, onHighlightChanged]
   )
 
   const source = useMemo(() => {

src/drawFunction.js

@@ -708,14 +708,6 @@ window.draw = (props) => {
         break
     }
 
-    console.log(
-      props.highlightValuePosition,
-      labelsHolder,
-      valuesHolder,
-      clockSpan,
-      dateSpan
-    )
-
     selectOrAppend(svg, 'line', 'highlight')
       .style('stroke', colors.highlightLine)
       .style('stroke-width', 1)
@@ -974,6 +966,12 @@ window.draw = (props) => {
       )
 
       var highlightTime = null
+
+      /**
+       * Only used to send highlight values to listener. Only populated if hasHighlightListener
+       */
+      const highlightValues = []
+
       props.datasets.forEach((dataset, index) => {
         const { unit, decimals } = dataset
         const { definedData, y } = operators[index]
@@ -984,6 +982,9 @@ window.draw = (props) => {
             .style('color', getDatasetColor(dataset))
             .html(props.noDataString)
 
+          if (props.hasHighlightListener) {
+            highlightValues.push(null)
+          }
           return
         }
 
@@ -1019,20 +1020,39 @@ window.draw = (props) => {
           .attr('stroke', color)
           .attr('opacity', tooFar ? 0 : 1)
 
+        const errorMessage = isInErrorSegment
+          ? highlightedErrorSegment.message
+          : tooFar
+            ? props.noDataString
+            : null
+
+        if (props.hasHighlightListener) {
+          highlightValues.push({
+            value: errorMessage ? null : highlight.value,
+            color,
+            errorMessage,
+            timestamp: highlight.date.valueOf(),
+            measurementName: dataset.measurementName,
+          })
+        }
+
         if (props.highlightValuePosition === 'none') return
 
         valuesHolder
           .select('span#highlightvalue' + index)
           .style('color', color)
           .html(
-            isInErrorSegment
-              ? highlightedErrorSegment.message
-              : tooFar
-                ? props.noDataString
-                : d3.format('.' + decimals + 'f')(highlight.value) + ' ' + unit
+            errorMessage ?? d3.format('.' + decimals + 'f')(highlight.value) + ' ' + unit
           )
       })
 
+      if (props.hasHighlightListener) {
+        postMessage('highlightChanged', {
+          values: highlightValues,
+          timestamp: highlightExactDate.valueOf(),
+        })
+      }
+
       if (props.highlightValuePosition === 'none') return
 
       const date = highlightTime ?? highlightExactDate

src/types.ts

@@ -109,6 +109,17 @@ type XDividerSegment = {
 
 export type XDividerConfig = XDividerTick | XDividerSegment
 
+export type HighlightPayload = {
+  timestamp: number
+  values: ({
+    value: Point['value']
+    timestamp: Point['timestamp']
+    color: string
+    errorMessage: string | null
+    measurementName: Dataset['measurementName']
+  } | null)[]
+}
+
 export type ChartProps = {
   width: number
   height: number
@@ -142,5 +153,5 @@ export type ChartProps = {
   highlightValuePosition?: 'top' | 'tooltip' | 'none'
   onZoomEnded?: () => void
   onZoomStarted?: () => void
-  onHighlightChanged?: ({ timestamp, value }: Point) => void
+  onHighlightChanged?: (payload: HighlightPayload) => void
 }