From 1d86cc1e54f8e6632cdc1dba31d1db2a3e9d62bf Mon Sep 17 00:00:00 2001 From: "finz@dhigroup.com" Date: Wed, 27 Sep 2023 15:56:48 +0700 Subject: [PATCH 1/4] add new props on basechart --- packages/react-components/src/ECharts/BaseChart.tsx | 3 ++- packages/react-components/src/ECharts/types.ts | 7 +++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/react-components/src/ECharts/BaseChart.tsx b/packages/react-components/src/ECharts/BaseChart.tsx index ba006daa..7002cd37 100644 --- a/packages/react-components/src/ECharts/BaseChart.tsx +++ b/packages/react-components/src/ECharts/BaseChart.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; import { StandardChartProps } from './types'; const BaseChart = (props: StandardChartProps) => { - const { className, options, chartHeightFunc, getRefFunc, debug } = props; + const { className, options, chartHeightFunc, getRefFunc, debug, onEvents } = props; const [chartSize, setChartSize] = useState({ width: '100%', height: chartHeightFunc() }); useEffect(() => { @@ -33,6 +33,7 @@ const BaseChart = (props: StandardChartProps) => { }} style={{ width: chartSize.width, height: chartSize.height }} option={options} + onEvents={onEvents} {...props} /> diff --git a/packages/react-components/src/ECharts/types.ts b/packages/react-components/src/ECharts/types.ts index 9d8dc218..28b0fa4c 100644 --- a/packages/react-components/src/ECharts/types.ts +++ b/packages/react-components/src/ECharts/types.ts @@ -54,4 +54,11 @@ export interface StandardChartProps { * Display loading on data change */ showLoading?: boolean; + /** + * Trigger Event on ReactEChart + */ + onEvents?: { + click: (params: any) => void; + mousemove?: (params: any) => void; + }; } From 93148db054a33eea20c410ff188627de62f77fd8 Mon Sep 17 00:00:00 2001 From: "finz@dhigroup.com" Date: Wed, 27 Sep 2023 15:57:05 +0700 Subject: [PATCH 2/4] implement event handler timeseries --- .../src/Timeseries/Timeseries.stories.tsx | 10 +-- .../TimeseriesExplorer/Timeseries.tsx | 89 ++++++++++++------- 2 files changed, 62 insertions(+), 37 deletions(-) diff --git a/packages/react-components/src/Timeseries/Timeseries.stories.tsx b/packages/react-components/src/Timeseries/Timeseries.stories.tsx index 7b202aee..d8fd6559 100644 --- a/packages/react-components/src/Timeseries/Timeseries.stories.tsx +++ b/packages/react-components/src/Timeseries/Timeseries.stories.tsx @@ -89,15 +89,15 @@ export const TimeseriesExplorerEChart = () => { const [token, setToken] = useState(''); const dataSource = { - host: 'https://domainservices.dhigroup.com', - connection: 'mclite-timeseries', + host: 'https://api-dev.seaportopx.com', + connection: 'MarineAid-Data', token, }; useEffect(() => { - fetchToken(host, { - id: process.env.USERUSER, - password: process.env.USERPASSWORD, + fetchToken('https://auth-dev.seaportopx.com/', { + id: 'finz@dhigroup.com', + password: 'mzWnMQxbQtJFzij', }).subscribe( (res) => { setToken(res.accessToken.token); diff --git a/packages/react-components/src/Timeseries/TimeseriesExplorer/Timeseries.tsx b/packages/react-components/src/Timeseries/TimeseriesExplorer/Timeseries.tsx index e4b0c07b..4a3fc8d0 100644 --- a/packages/react-components/src/Timeseries/TimeseriesExplorer/Timeseries.tsx +++ b/packages/react-components/src/Timeseries/TimeseriesExplorer/Timeseries.tsx @@ -12,6 +12,7 @@ import { DateFilter } from '../../common/DateFilter/DateFilter'; import { DateProps } from '../../common/types'; import { useWindowSize } from '@react-hook/window-size'; import mikeColors from '../../ThemeProvider/mikeColors'; +import copy from 'copy-to-clipboard'; const NAME_TEXT_STYLE = { padding: 12, @@ -23,12 +24,6 @@ const DATA_ZOOM = [ { type: 'inside', }, - { - type: 'slider', - height: 40, - bottom: 10, - labelFormatter: (value) => (value ? format(value, 'dd MMM yyyy') : ''), - }, ]; const GRID = { @@ -52,10 +47,13 @@ const AXIS_LABEL = { const X_AXIS = { name: 'Time', + type: 'time', nameLocation: 'center', nameTextStyle: NAME_TEXT_STYLE, min: 'dataMin', + max: 'dataMax', axisLabel: AXIS_LABEL, + triggerEvent: true }; const Y_AXIS = { @@ -65,21 +63,9 @@ const Y_AXIS = { axisLabel: AXIS_LABEL, }; -const LEGEND_STYLE = { - backgroundColor: 'rgba(255,255,255,1)', - padding: 8, - borderRadius: 5, - shadowColor: 'rgba(0, 0, 0, 0.25)', - shadowBlur: 5, - shadowOffsetX: 3, - shadowOffsetY: 3, -}; - const TimeseriesExplorer = ({ dataSource, title, - legendPosition = 'right', - legendPositionOffset, startTimeUtc, dateTimeFormat, timeZone, @@ -97,23 +83,33 @@ const TimeseriesExplorer = ({ const [ids, setIds] = useState([]); const [options, setOptions] = useState({ - title: { - text: title, - left: 'center', - textStyle: TEXT_STYLE, + toolbox: { + feature: { + dataZoom: { + }, + restore: {}, + saveAsImage: {} + } }, grid: GRID, dataZoom: DATA_ZOOM, legend: { - ...LEGEND_STYLE, - top: legendPosition === 'left' ? 90 : 35, - left: legendPosition === 'left' ? legendPositionOffset ?? 150 : undefined, - right: legendPosition === 'right' ? legendPositionOffset ?? 60 : undefined, - align: legendPosition, + orient: 'vertical', + bottom: 0 }, xAxis: X_AXIS, yAxis: Y_AXIS, - tooltip: {}, + tooltip: { + trigger: 'axis', + formatter: function (params) { + let result = ''; + params.forEach((param) => { + result += `Date: ${new Date(param.data.value[0]).toISOString()}
`; + result += `Value: ${param.data.value[1]}

`; + }); + return result; + } + }, series: [], }); @@ -178,12 +174,19 @@ const TimeseriesExplorer = ({ fetchTimeseriesValues([dataSource], dataSource.token).subscribe((res) => { const series = res - .map((item) => { + .map((item, index) => { return { name: item.id, - data: item.data.map((d) => [new Date(d[0]).getTime(), d[1]]), + data: item.data.map((d, idx) => { + return { + value: [new Date(d[0]).getTime(), d[1]], + name: `Point ${index * item.data.length + idx + 1}` + }; + }), + symbolSize: 3, type: 'line', symbol: 'diamond', + triggerLineEvent: true, }; }) .filter((item) => item); @@ -194,7 +197,16 @@ const TimeseriesExplorer = ({ ...options.xAxis, axisLabel: { ...options.xAxis.axisLabel, - formatter: (value) => format(value, 'dd MMM yyyy'), + formatter: { + year: '{yyyy}', + month: '{MMM}', + day: '{d}', + hour: '{HH}:{mm}', + minute: '{HH}:{mm}', + second: '{HH}:{mm}:{ss}', + millisecond: '{hh}:{mm}:{ss} {SSS}', + none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}' + }, }, }, yAxis: { @@ -239,7 +251,20 @@ const TimeseriesExplorer = ({ onSetDate={(date) => setDate(date)} onClearDateFilter={clearDateFilter} > - height - 100} options={options} notMerge /> + height - 100} + options={options} + onEvents={{ + click: (params) => { + const { seriesName } = params + if (seriesName) { + copy(seriesName); + } + }, + }} + notMerge + /> ) : ( <> From 7bdc0399eeb24a28a1b5f20036698f0591df16fb Mon Sep 17 00:00:00 2001 From: "finz@dhigroup.com" Date: Wed, 27 Sep 2023 16:03:44 +0700 Subject: [PATCH 3/4] update version --- packages/react-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/package.json b/packages/react-components/package.json index fc6df565..876ef500 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -1,5 +1,5 @@ { - "version": "0.8.47", + "version": "0.8.48", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", From 33c74b3c7b1f9542ca208bc252c352e522379735 Mon Sep 17 00:00:00 2001 From: "finz@dhigroup.com" Date: Wed, 27 Sep 2023 16:06:37 +0700 Subject: [PATCH 4/4] revert timeseries stories --- .../src/Timeseries/Timeseries.stories.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react-components/src/Timeseries/Timeseries.stories.tsx b/packages/react-components/src/Timeseries/Timeseries.stories.tsx index d8fd6559..7b202aee 100644 --- a/packages/react-components/src/Timeseries/Timeseries.stories.tsx +++ b/packages/react-components/src/Timeseries/Timeseries.stories.tsx @@ -89,15 +89,15 @@ export const TimeseriesExplorerEChart = () => { const [token, setToken] = useState(''); const dataSource = { - host: 'https://api-dev.seaportopx.com', - connection: 'MarineAid-Data', + host: 'https://domainservices.dhigroup.com', + connection: 'mclite-timeseries', token, }; useEffect(() => { - fetchToken('https://auth-dev.seaportopx.com/', { - id: 'finz@dhigroup.com', - password: 'mzWnMQxbQtJFzij', + fetchToken(host, { + id: process.env.USERUSER, + password: process.env.USERPASSWORD, }).subscribe( (res) => { setToken(res.accessToken.token);