markers++

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);
+      // TODO: make this one-dimensinal data when implemented
-      const markersData2 = [4, 11].map(el => startTime + el * 1000);
+      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,14 +1,18 @@
 import { LineTimeSerie, LineOptions, LinePod } from '@chartwerk/line-pod';
 
 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';
 
 
 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;
@@ -24,7 +28,7 @@ export type ChartwerkLinePodProps = {
   onRenderEnd?: () => void,
 }
 
-function ChartwerkLinePod(props: ChartwerkLinePodProps) {
+export function ChartwerkLinePod(props: ChartwerkLinePodProps) {
   
   const [pod, setPod] = useState<LinePod | null>(null);
   const [hack, setHack] = useState<number | null>(null);
@@ -50,27 +54,25 @@ function ChartwerkLinePod(props: ChartwerkLinePodProps) {
 
     if(pod === null) {
       console.log('create chart');
+      console.log("markers");
+      console.log(props.markers);
 
       const newPod = new LinePod(
         // @ts-ignore
         chart,
         props.series,
-        {
+        props.options,
-          ...props.options,
+        props.markers,
-        }
+        props.segments
       );
-      setPod(
+      setPod(newPod);
-        newPod
-      );
-      console.log('initial chart render');
       newPod.render();
     } else {
-      console.log('update chart');
       pod.updateData(props.series, {
         ...props.options,
       });
     }
-  }, [chart, pod, props.id, 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(() => {
@@ -86,5 +88,3 @@ function ChartwerkLinePod(props: ChartwerkLinePodProps) {
 }
 
 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,9 @@ const CROSSHAIR_CIRCLE_RADIUS = 3;
 const CROSSHAIR_BACKGROUND_RAIDUS = 9;
 const CROSSHAIR_BACKGROUND_OPACITY = 0.3;
 
-export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
+export const MY_CONST = 11;
+
+class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   lineGenerator = null;
   areaGenerator = null;
   lineGeneratorY1 = null;
@@ -23,12 +25,15 @@ 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 = [], 
   ) {
     super(_el, _series, _options);
     this.series = new LineSeries(_series);
+    console.log('CREATE LINPOD NEW VERSION')
   }
 
   override renderMetrics(): void {
@@ -349,7 +354,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
   isDoubleClickActive(): boolean {
     return this.options.doubleClickEvent.isActive;
   }
-
+  that
   protected onBrushEnd(): void {
     super.onBrushEnd();
     this.onMouseOver();
@@ -432,4 +437,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
 }