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 b8431e2..dcae2d4 100644
--- a/react/ChartwerkLinePod.tsx
+++ b/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>((props, ref) => {
+export function ChartwerkLinePod(props: ChartwerkLinePodProps) {
+
const [pod, setPod] = useState(null);
const [hack, setHack] = useState(null);
@@ -35,23 +41,16 @@ export const ChartwerkLinePod = forwardRef {
// 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 {
- if (hack === null) {
+ if(hack === null) {
setHack(1);
}
}, 1);
+
return (
-
+
);
-});
\ No newline at end of file
+}
+
+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..c3e15aa 100644
--- a/src/index.ts
+++ b/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 {
+
+class LinePod extends ChartwerkPod {
lineGenerator = null;
areaGenerator = null;
lineGeneratorY1 = null;
@@ -23,7 +24,9 @@ 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 = [],
) {
@@ -432,4 +435,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
}