From 326c666435fa083269253d30f5f206295e15c6b6 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Sun, 10 Dec 2023 10:13:21 +0100 Subject: [PATCH 1/8] component refactorinmg begin --- react/ChartwerkLinePod.tsx | 77 ++++++++++++-------------------------- 1 file changed, 23 insertions(+), 54 deletions(-) diff --git a/react/ChartwerkLinePod.tsx b/react/ChartwerkLinePod.tsx index b8431e2..b907e9d 100644 --- a/react/ChartwerkLinePod.tsx +++ b/react/ChartwerkLinePod.tsx @@ -1,11 +1,10 @@ -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 { useEffect, useRef, useState } from 'react'; -import * as _ from 'lodash'; -export type AxisRange = [number, number] | undefined; export type ChartwerkLinePodProps = { id: string; series: LineTimeSerie[]; @@ -25,7 +24,8 @@ export type ChartwerkLinePodProps = { onRenderEnd?: () => void, } -export const ChartwerkLinePod = forwardRef>((props, ref) => { +function ChartwerkLinePod(props: ChartwerkLinePodProps) { + const [pod, setPod] = useState(null); const [hack, setHack] = useState(null); @@ -35,55 +35,20 @@ export const ChartwerkLinePod = forwardRef { // this function will be called on component unmount return () => { - if (pod === null) { + if(pod === null) { return; } - - console.log('remove chart'); - // @ts-ignore pod.removeEventListeners(); } }, []); useEffect(() => { - if (chart === null) { + if(chart === null) { return; } - let eventsCallbacks = _.cloneDeep(props.options.eventsCallbacks || {}); - if (props.onZoomIn) { - eventsCallbacks.zoomIn = props.onZoomIn; - } - if (props.onZoomOut) { - eventsCallbacks.zoomOut = props.onZoomOut; - } - if (props.onMouseMove) { - eventsCallbacks.mouseMove = props.onMouseMove; - } - if (props.onMouseOut) { - eventsCallbacks.mouseOut = props.onMouseOut; - } - if (props.onLegendClick) { - eventsCallbacks.onLegendClick = props.onLegendClick; - } - if (props.onPanning) { - eventsCallbacks.panning = props.onPanning; - } - if (props.onPanningEnd) { - eventsCallbacks.panningEnd = props.onPanningEnd; - } - if (props.onContextMenu) { - eventsCallbacks.contextMenu = props.onContextMenu; - } - if (props.onSharedCrosshairMove) { - eventsCallbacks.sharedCrosshairMove = props.onSharedCrosshairMove; - } - if (props.onRenderStart) { - eventsCallbacks.renderStart = props.onRenderStart; - } - - if (pod === null) { + if(pod === null) { console.log('create chart'); const newPod = new LinePod( @@ -92,30 +57,34 @@ 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; + + From 11ab01a7d288b36f60c8c0e6239eb27d92bef993 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Wed, 13 Dec 2023 23:19:28 +0100 Subject: [PATCH 2/8] markers++ --- examples/markers.html | 5 +++-- react/ChartwerkLinePod.tsx | 28 ++++++++++++++-------------- src/components/markers.ts | 2 +- src/index.ts | 13 +++++++++---- src/models/marker.ts | 3 ++- 5 files changed, 29 insertions(+), 22 deletions(-) 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 } From d97b0e9b0c323e3a582b41e4f8c4293f07e60353 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 14 Dec 2023 12:32:54 +0100 Subject: [PATCH 3/8] markers++ --- react/ChartwerkLinePod.tsx | 12 ++++-------- src/index.ts | 1 - 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/react/ChartwerkLinePod.tsx b/react/ChartwerkLinePod.tsx index 1846cf0..0a82d8c 100644 --- a/react/ChartwerkLinePod.tsx +++ b/react/ChartwerkLinePod.tsx @@ -39,19 +39,14 @@ export function ChartwerkLinePod(props: ChartwerkLinePodProps) { useEffect(() => { // this function will be called on component unmount return () => { - if(pod === null) { - return; - } + if(pod === null) { return; } // @ts-ignore pod.removeEventListeners(); } }, []); useEffect(() => { - if(chart === null) { - return; - } - + if(chart === null) { return; } if(pod === null) { console.log('create chart'); console.log("markers"); @@ -63,11 +58,12 @@ export function ChartwerkLinePod(props: ChartwerkLinePodProps) { props.series, props.options, props.markers, - props.segments + // props.segments ); setPod(newPod); newPod.render(); } else { + console.log('update data'); pod.updateData(props.series, { ...props.options, }); diff --git a/src/index.ts b/src/index.ts index 91c91ed..21b6ef9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -33,7 +33,6 @@ class LinePod extends ChartwerkPod { ) { super(_el, _series, _options); this.series = new LineSeries(_series); - console.log('CREATE LINPOD NEW VERSION') } override renderMetrics(): void { From 869488d40579ab4f368b1a275ceb7a6b904fe675 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 14 Dec 2023 12:35:16 +0100 Subject: [PATCH 4/8] codestyle --- react/ChartwerkLinePod.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/react/ChartwerkLinePod.tsx b/react/ChartwerkLinePod.tsx index 0a82d8c..d4a942b 100644 --- a/react/ChartwerkLinePod.tsx +++ b/react/ChartwerkLinePod.tsx @@ -48,25 +48,18 @@ export function ChartwerkLinePod(props: ChartwerkLinePodProps) { useEffect(() => { if(chart === null) { return; } 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.markers, - // props.segments + props.segments ); setPod(newPod); newPod.render(); } else { - console.log('update data'); - pod.updateData(props.series, { - ...props.options, - }); + pod.updateData(props.series, props.options); } }, [chart, pod, props.id, props.options, props.markers, props.segments]); From 727f8cac869d6a0f9717d5a14524c47778c7b340 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 14 Dec 2023 12:36:25 +0100 Subject: [PATCH 5/8] codefix --- src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 21b6ef9..4e96456 100644 --- a/src/index.ts +++ b/src/index.ts @@ -353,7 +353,7 @@ class LinePod extends ChartwerkPod { isDoubleClickActive(): boolean { return this.options.doubleClickEvent.isActive; } - that + protected onBrushEnd(): void { super.onBrushEnd(); this.onMouseOver(); From a0e27d5efd0505794dedc80423902106b82838bc Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 14 Dec 2023 12:42:36 +0100 Subject: [PATCH 6/8] rm My_CONST --- src/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 4e96456..c3e15aa 100644 --- a/src/index.ts +++ b/src/index.ts @@ -13,7 +13,6 @@ const CROSSHAIR_CIRCLE_RADIUS = 3; const CROSSHAIR_BACKGROUND_RAIDUS = 9; const CROSSHAIR_BACKGROUND_OPACITY = 0.3; -export const MY_CONST = 11; class LinePod extends ChartwerkPod { lineGenerator = null; From 6fbf833150ae0655dfb45b46a4cc90bf7ae6a824 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 14 Dec 2023 12:51:33 +0100 Subject: [PATCH 7/8] event callback back --- react/ChartwerkLinePod.tsx | 40 +++++++++++++++++++++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/react/ChartwerkLinePod.tsx b/react/ChartwerkLinePod.tsx index d4a942b..9c2916f 100644 --- a/react/ChartwerkLinePod.tsx +++ b/react/ChartwerkLinePod.tsx @@ -6,6 +6,8 @@ import { SegmentSerie } from '@chartwerk/line-pod/dist/models/segment'; import { useEffect, useRef, useState } from 'react'; +import _ from 'lodash'; + export type ChartwerkLinePodProps = { id?: string; @@ -47,12 +49,48 @@ export function ChartwerkLinePod(props: ChartwerkLinePodProps) { useEffect(() => { if(chart === null) { return; } + + let eventsCallbacks = _.cloneDeep(props.options.eventsCallbacks || {}); + if (props.onZoomIn) { + eventsCallbacks.zoomIn = props.onZoomIn; + } + if (props.onZoomOut) { + eventsCallbacks.zoomOut = props.onZoomOut; + } + if (props.onMouseMove) { + eventsCallbacks.mouseMove = props.onMouseMove; + } + if (props.onMouseOut) { + eventsCallbacks.mouseOut = props.onMouseOut; + } + if (props.onLegendClick) { + eventsCallbacks.onLegendClick = props.onLegendClick; + } + if (props.onPanning) { + eventsCallbacks.panning = props.onPanning; + } + if (props.onPanningEnd) { + eventsCallbacks.panningEnd = props.onPanningEnd; + } + if (props.onContextMenu) { + eventsCallbacks.contextMenu = props.onContextMenu; + } + if (props.onSharedCrosshairMove) { + eventsCallbacks.sharedCrosshairMove = props.onSharedCrosshairMove; + } + if (props.onRenderStart) { + eventsCallbacks.renderStart = props.onRenderStart; + } + if(pod === null) { const newPod = new LinePod( // @ts-ignore chart, props.series, - props.options, + { + ...props.options, + eventsCallbacks + }, props.markers, props.segments ); From 98e4e42fc4a9d26446f126c835ec33bae443e2b8 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Thu, 14 Dec 2023 12:52:46 +0100 Subject: [PATCH 8/8] callbacks --- react/ChartwerkLinePod.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/ChartwerkLinePod.tsx b/react/ChartwerkLinePod.tsx index 9c2916f..dcae2d4 100644 --- a/react/ChartwerkLinePod.tsx +++ b/react/ChartwerkLinePod.tsx @@ -50,7 +50,7 @@ export function ChartwerkLinePod(props: ChartwerkLinePodProps) { useEffect(() => { if(chart === null) { return; } - let eventsCallbacks = _.cloneDeep(props.options.eventsCallbacks || {}); + let eventsCallbacks = _.cloneDeep(props.options?.eventsCallbacks || {}); if (props.onZoomIn) { eventsCallbacks.zoomIn = props.onZoomIn; }