Merge pull request 'react-component-marker-and-segment-feature-#28' (#33) from react-component-marker-and-segment-feature-#28 into main

Reviewed-on: #33

examples/markers.html

@@ -13,8 +13,9 @@
       const startTime = 1701790172908;
       const timeSerieData = [5, 6, 3, 7, 5, 6, 8, 4, 5, 6, 4, 3, 5, 7, 8]
         .map((el, idx) => [startTime + idx * 1000, el]);
-      const markersData1 = [3, 6, 9].map(el => startTime + el * 1000);
-      const markersData2 = [4, 11].map(el => startTime + el * 1000);
+      // TODO: make this one-dimensinal data when implemented
+      const markersData1 = [3, 6, 9].map(el => [startTime + el * 1000]);
+      const markersData2 = [4, 11].map(el => [startTime + el * 1000]);
       let options = {
         renderLegend: false,
         axis: {

react/ChartwerkLinePod.tsx

@@ -1,15 +1,20 @@
-import type { LineTimeSerie, LineOptions } from '@chartwerk/line-pod';
-import { LinePod } from '@chartwerk/line-pod';
+import { LineTimeSerie, LineOptions, LinePod } from '@chartwerk/line-pod';
 
-import { useEffect, useRef, useState, PropsWithChildren, forwardRef } from 'react';
+import { AxisRange } from '@chartwerk/core/dist/types';
+import { MarkerSerie } from '@chartwerk/line-pod/dist/models/marker';
+import { SegmentSerie } from '@chartwerk/line-pod/dist/models/segment';
+
+import { useEffect, useRef, useState } from 'react';
+
+import _ from 'lodash';
 
-import * as _ from 'lodash';
 
-export type AxisRange = [number, number] | undefined;
 export type ChartwerkLinePodProps = {
-  id: string;
+  id?: string;
   series: LineTimeSerie[];
-  options: LineOptions;
+  options?: LineOptions;
+  markers?: MarkerSerie[],
+  segments?: SegmentSerie[],
   className?: string;
   // TODO: callback types should be exported from chartwerk
   onZoomIn?: (ranges: AxisRange[]) => void;
@@ -25,7 +30,8 @@ export type ChartwerkLinePodProps = {
   onRenderEnd?: () => void,
 }
 
-export const ChartwerkLinePod = forwardRef<HTMLDivElement, PropsWithChildren<ChartwerkLinePodProps>>((props, ref) => {
+export function ChartwerkLinePod(props: ChartwerkLinePodProps) {
+  
   const [pod, setPod] = useState<LinePod | null>(null);
   const [hack, setHack] = useState<number | null>(null);
 
@@ -35,23 +41,16 @@ export const ChartwerkLinePod = forwardRef<HTMLDivElement, PropsWithChildren<Cha
   useEffect(() => {
     // this function will be called on component unmount
     return () => {
-      if (pod === null) {
-        return;
-      }
-
-      console.log('remove chart');
-
+      if(pod === null) { return; }
       // @ts-ignore
       pod.removeEventListeners();
     }
   }, []);
 
   useEffect(() => {
-    if (chart === null) {
-      return;
-    }
+    if(chart === null) { return; }
 
-    let eventsCallbacks = _.cloneDeep(props.options.eventsCallbacks || {});
+    let eventsCallbacks = _.cloneDeep(props.options?.eventsCallbacks || {});
     if (props.onZoomIn) {
       eventsCallbacks.zoomIn = props.onZoomIn;
     }
@@ -83,39 +82,36 @@ export const ChartwerkLinePod = forwardRef<HTMLDivElement, PropsWithChildren<Cha
       eventsCallbacks.renderStart = props.onRenderStart;
     }
 
-    if (pod === null) {
-      console.log('create chart');
-
+    if(pod === null) {
       const newPod = new LinePod(
         // @ts-ignore
         chart,
         props.series,
         {
           ...props.options,
-          eventsCallbacks,
-        }
+          eventsCallbacks
+        },
+        props.markers,
+        props.segments
       );
       setPod(newPod);
       newPod.render();
     } else {
-      pod.updateData(props.series, {
-        ...props.options,
-        eventsCallbacks,
-      });
+      pod.updateData(props.series, props.options);
     }
-  }, [chart, pod, props.id, props.series, props.options]);
+  }, [chart, pod, props.id, props.options, props.markers, props.segments]);
 
   // TODO: it's a hack to render the LinePod right after the div appears in DOM
   setTimeout(() => {
-    if (hack === null) {
+    if(hack === null) {
       setHack(1);
     }
   }, 1);
 
+
   return (
-    <div ref={ref}>
     <div id={props.id} className={props.className} ref={chartRef}></div>
-      {props.children}
-    </div>
   );
-});
+}
+
+export default ChartwerkLinePod;

src/components/markers.ts

@@ -23,7 +23,7 @@ export class Markers {
 
   protected renderSerie(serie: MarkerSerie) {
     serie.data.forEach((d) => {
-      let linePosition = this._state.xScale(d) as number;
+      let linePosition = this._state.xScale(d[0]) as number;
       this._d3Holder.append('line')
         .attr('class', 'gap-line')
         .attr('stroke', serie.color)

src/index.ts

@@ -13,7 +13,8 @@ const CROSSHAIR_CIRCLE_RADIUS = 3;
 const CROSSHAIR_BACKGROUND_RAIDUS = 9;
 const CROSSHAIR_BACKGROUND_OPACITY = 0.3;
 
-export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
+
+class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   lineGenerator = null;
   areaGenerator = null;
   lineGeneratorY1 = null;
@@ -23,7 +24,9 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   private _segmentsLayer: Segments = null;
 
   constructor(
-    _el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {},
+    _el: HTMLElement,
+    _series: LineTimeSerie[] = [],
+    _options: LineOptions = {},
     private _markerSeries = [], 
     private _segmentSeries = [], 
   ) {
@@ -432,4 +435,4 @@ export const VueChartwerkLinePod = {
   }
 };
 
-export { LineTimeSerie, LineOptions, TimeFormat };
+export { LineTimeSerie, LineOptions, TimeFormat, LinePod };

src/models/marker.ts

@@ -1,4 +1,5 @@
 export type MarkerSerie = {
   color: string;
-  data: [number, number, any][] // [x, y, payload] payload is any data for tooltip
+  // TODO: make one-dimensional array with only x
+  data: [number, any?][] // [x, payload] payload is any data for tooltip
 }