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 ( -
-
- {props.children} -
+
); -}); \ 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 }