diff --git a/examples/markers.html b/examples/markers.html
index 5c1521f..a3d7a06 100644
--- a/examples/markers.html
+++ b/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: {
diff --git a/react/ChartwerkLinePod.tsx b/react/ChartwerkLinePod.tsx
index b907e9d..1846cf0 100644
--- a/react/ChartwerkLinePod.tsx
+++ b/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(null);
const [hack, setHack] = useState(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(
- newPod
- );
- console.log('initial chart render');
+ setPod(newPod);
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;
-
-
diff --git a/src/components/markers.ts b/src/components/markers.ts
index 4f7b319..15a3271 100644
--- a/src/components/markers.ts
+++ b/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)
diff --git a/src/index.ts b/src/index.ts
index fc32afa..91c91ed 100644
--- a/src/index.ts
+++ b/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 {
+export const MY_CONST = 11;
+
+class LinePod extends ChartwerkPod {
lineGenerator = null;
areaGenerator = null;
lineGeneratorY1 = null;
@@ -23,12 +25,15 @@ export class LinePod extends ChartwerkPod {
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 {
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 };
diff --git a/src/models/marker.ts b/src/models/marker.ts
index 7253729..fea1e4b 100644
--- a/src/models/marker.ts
+++ b/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
}