From 02ca7edea1c7191f53990cdcfe10b91ff93b83cb Mon Sep 17 00:00:00 2001 From: KharchenkoVV Date: Tue, 25 May 2021 14:20:58 +0500 Subject: [PATCH 1/4] =?UTF-8?q?CF2-4:=20=D0=98=D1=81=D0=BF=D1=80=D0=B0?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=20=D0=BF=D0=B0=D1=80=D0=B0=D0=BC=D0=B5?= =?UTF-8?q?=D1=82=D1=80=20=D0=B7=D0=B0=D0=BF=D1=80=D0=B0=D1=88=D0=B8=D0=B2?= =?UTF-8?q?=D0=B0=D0=B5=D0=BC=D0=BE=D0=B3=D0=BE=20=D0=B8=D0=BD=D1=82=D0=B5?= =?UTF-8?q?=D1=80=D0=B2=D0=B0=D0=BB=D0=B0=20=D0=B2=D1=80=D0=B5=D0=BC=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=20=D0=B4=D0=BB=D1=8F=20=D0=B3=D1=80=D0=B0=D1=84?= =?UTF-8?q?=D0=B8=D0=BA=D0=BE=D0=B2=20=D0=BC=D0=BE=D0=BD=D0=B8=D1=82=D0=BE?= =?UTF-8?q?=D1=80=D0=B8=D0=BD=D0=B3=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/TelemetryView.jsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/pages/TelemetryView.jsx b/src/pages/TelemetryView.jsx index 5e6e321..a91d627 100644 --- a/src/pages/TelemetryView.jsx +++ b/src/pages/TelemetryView.jsx @@ -181,6 +181,13 @@ export default function TelemetryView(props) { } }, [id]); + useEffect(() => { + if(chartInterval) + DataService.getData(id, null, chartInterval) + .then(handleReceiveDataSaub) + .catch(error => console.error(error)) + }, [chartInterval]); + const colSpan = 24 / (paramsGroups.length) return (
From b53a1c667c43a6513b70dd65a21add10a9338091 Mon Sep 17 00:00:00 2001 From: KharchenkoVV Date: Tue, 25 May 2021 15:43:50 +0500 Subject: [PATCH 2/4] =?UTF-8?q?CF2-4:=20=D0=A3=D0=B1=D1=80=D0=B0=D0=BD=20?= =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D1=83=D0=B6=D0=BD=D1=8B=D0=B9=20if()?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/TelemetryView.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/TelemetryView.jsx b/src/pages/TelemetryView.jsx index 5a23e27..b894558 100644 --- a/src/pages/TelemetryView.jsx +++ b/src/pages/TelemetryView.jsx @@ -182,7 +182,6 @@ export default function TelemetryView(props) { }, [id]); useEffect(() => { - if(chartInterval) DataService.getData(id, null, chartInterval) .then(handleReceiveDataSaub) .catch(error => console.error(error)) From bb0b3527b330a5db8c0e7459f8f3fd681f597948 Mon Sep 17 00:00:00 2001 From: KharchenkoVV Date: Thu, 27 May 2021 16:59:05 +0500 Subject: [PATCH 3/4] =?UTF-8?q?CF2-1:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BE=D1=82=D0=BC=D0=B5=D1=82=D0=BA?= =?UTF-8?q?=D0=B8=20=D0=B3=D0=BB=D1=83=D0=B1=D0=B8=D0=BD=D1=8B=20=D0=B4?= =?UTF-8?q?=D0=BB=D1=8F=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B0=20'?= =?UTF-8?q?=D0=9F=D0=BE=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B1?= =?UTF-8?q?=D0=BB=D0=BE=D0=BA=D0=B0'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/components/charts/ChartTimeArchive.tsx | 1 + src/components/charts/ChartTimeBase.tsx | 15 +++++----- src/components/charts/ChartTimeOnline.tsx | 35 ++++++++++++++++++++-- src/pages/TelemetryView.jsx | 6 +++- 5 files changed, 46 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 7f67ffd..c5d3670 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "antd": "^4.15.0", "chart.js": "^3.0.2", "chartjs-adapter-date-fns": "^1.1.0-beta.1", - "chartjs-plugin-datalabels": "^2.0.0-beta.1", + "chartjs-plugin-datalabels": "^2.0.0-rc.1", "craco-less": "^1.17.1", "date-fns": "^2.20.0", "moment": "^2.29.1", diff --git a/src/components/charts/ChartTimeArchive.tsx b/src/components/charts/ChartTimeArchive.tsx index ec4fb6d..5928d00 100644 --- a/src/components/charts/ChartTimeArchive.tsx +++ b/src/components/charts/ChartTimeArchive.tsx @@ -63,6 +63,7 @@ export const ChartTimeArchive: React.FC = (props) => { let points = props.data.map(dataItem => { return { x: dataItem[lineCfg.xAccessorName], + label:0, y: new Date(dataItem[lineCfg.yAccessorName]) } }) diff --git a/src/components/charts/ChartTimeBase.tsx b/src/components/charts/ChartTimeBase.tsx index 3ab6234..9df3087 100644 --- a/src/components/charts/ChartTimeBase.tsx +++ b/src/components/charts/ChartTimeBase.tsx @@ -11,8 +11,9 @@ import { ChartTypeRegistry, ChartOptions} from 'chart.js' import 'chartjs-adapter-date-fns'; +import ChartDataLabels from 'chartjs-plugin-datalabels'; -Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend ); +Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend, ChartDataLabels ); const defaultOptions = { //maintainAspectRatio: false, @@ -61,15 +62,11 @@ const defaultOptions = { hoverRadius:5, }, }, - plugins:{ - legend:{ - display: false, - } - } } export type ChartTimeData = ChartData @@ -82,7 +79,8 @@ export type ChartTimeDataParams = { export type ChartTimeBaseProps = { dataParams: ChartTimeDataParams, - options?: ChartOptions, + // TODO: Create good type for options + options?: ChartOptions | any, } const timeUnitByInterval = (intervalSec:number):String =>{ @@ -109,7 +107,8 @@ export const ChartTimeBase: React.FC = (props) => { Object.assign(thisOptions, defaultOptions, props.options) let newChart = new Chart(chartRef.current, { - type: 'line', + type: 'line', + plugins: [ChartDataLabels], options: thisOptions, data: props.dataParams.data }) diff --git a/src/components/charts/ChartTimeOnline.tsx b/src/components/charts/ChartTimeOnline.tsx index a1e85ab..99ebfff 100644 --- a/src/components/charts/ChartTimeOnline.tsx +++ b/src/components/charts/ChartTimeOnline.tsx @@ -19,6 +19,7 @@ function GetOrCreateDatasetByLineConfig (data: ChartTimeData, lineConfig: LineC borderColor: lineConfig.borderColor ?? color, borderWidth: lineConfig.borderWidth ?? 1, borderDash: lineConfig.dash ?? [], + showLine: lineConfig.showLine, } data.datasets.push(dataset); } @@ -37,6 +38,8 @@ export type LineConfig = { borderWidth?: number dash?:number[] labels?: any[] + showLine: boolean + xConstValue?: number|null } export type ChartTimeProps = { @@ -64,7 +67,8 @@ export const ChartTimeOnline: React.FC = (props) => { props.lines.forEach(lineCfg => { let dataset = GetOrCreateDatasetByLineConfig(preDataParams.data, lineCfg) let points = props.data.map(dataItem => {return{ - x: dataItem[lineCfg.xAccessorName], + x: lineCfg.xConstValue ?? dataItem[lineCfg.xAccessorName], + label: dataItem[lineCfg.xAccessorName], y: new Date(dataItem[lineCfg.yAccessorName])} }) //dataset.data = [ ...dataset.data, ...points,].slice(-1024) @@ -75,7 +79,7 @@ export const ChartTimeOnline: React.FC = (props) => { data.splice(0, (1024 - data.length)) dataset.data = data; }); - + preDataParams.yStart = new Date() preDataParams.yStart.setSeconds(preDataParams.yStart.getSeconds() - props.interval) preDataParams.yInterval = props.interval @@ -85,6 +89,31 @@ export const ChartTimeOnline: React.FC = (props) => { }, [ props.data, props.lines, props.interval, props.yDisplay]) - return() + const chartPluginsOptions = { + plugins:{ + legend:{ + display: false, + }, + datalabels: { + backgroundColor: 'transparent', + borderRadius: 4, + color: '#000B', + display: function(context:any) { + return context.dataset.label === 'wellDepth' + ? 'auto' + : false + }, + formatter: function(value: any, context: any) { + return `${value.y.toLocaleTimeString()} ${value.label.toPrecision(4)}` + }, + padding: 6, + align: 'left', + anchor: 'center', + clip: true + } + } + } + + return() } diff --git a/src/pages/TelemetryView.jsx b/src/pages/TelemetryView.jsx index b894558..23f7a1c 100644 --- a/src/pages/TelemetryView.jsx +++ b/src/pages/TelemetryView.jsx @@ -23,7 +23,8 @@ const dash = [7, 3] const blockHeightGroup = { label: "Высота блока", yDisplay: false, - linePv: { label: "blockHeight", units: 'м', xAccessorName: "blockHeight", yAccessorName: "date", color: '#333' }, + linePv: { label: "blockPosition", units: 'м', xAccessorName: "blockPosition", yAccessorName: "date", color: '#333' }, + lineOther: { label: "wellDepth", units: 'м', xAccessorName: "wellDepth", yAccessorName: "date", color: '#333', showLine: false, xConstValue:30 }, } const blockSpeedGroup = { @@ -84,6 +85,9 @@ export const Column = ({ lineGroup, data, interval }) => { if (lineGroup.lineSp) lines.push(lineGroup.lineSp) + if (lineGroup.lineOther) + lines.push(lineGroup.lineOther) + let dataLast = null let pv = null if (data?.length > 0) { From 0dda9c417b22af7e2397b6d02e9d6b6c2a80bad1 Mon Sep 17 00:00:00 2001 From: KharchenkoVV Date: Thu, 27 May 2021 17:55:03 +0500 Subject: [PATCH 4/4] =?UTF-8?q?CF2-7:=20=D0=9F=D0=B5=D1=80=D0=B5=D0=BC?= =?UTF-8?q?=D0=B5=D0=BD=D0=BD=D0=B0=D1=8F=20=D1=81=D0=BE=20=D1=81=D1=82?= =?UTF-8?q?=D1=80=D0=B5=D0=BB=D0=BA=D0=B0=D0=BC=D0=B8=20=D1=83=D0=B1=D1=8B?= =?UTF-8?q?=D0=B2=D0=B0=D0=BD=D0=B8=D1=8F/=D1=80=D0=BE=D1=81=D1=82=D0=B0?= =?UTF-8?q?=20=D1=81=D0=BE=D1=85=D1=80=D0=B0=D0=BD=D0=B5=D0=BD=D0=B0=20?= =?UTF-8?q?=D0=B2=20Ref?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Display.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/Display.jsx b/src/components/Display.jsx index 763b634..e39a9b7 100644 --- a/src/components/Display.jsx +++ b/src/components/Display.jsx @@ -1,11 +1,10 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect, useRef } from 'react'; import {CaretUpOutlined, CaretDownOutlined} from '@ant-design/icons' export const ValueDisplay = ({prefix, value, suffix, isArrowVisible}) =>{ const [oldVal, setOldVal] = useState(NaN) const [val, setVal] = useState('---') - - let arrow = null + const arrowRef = useRef(null); useEffect(()=>{ if(value) @@ -14,16 +13,16 @@ export const ValueDisplay = ({prefix, value, suffix, isArrowVisible}) =>{ if (isArrowVisible) { if (value > oldVal) - arrow = + arrowRef.current = () else if (value < oldVal) - arrow = + arrowRef.current = () setOldVal(value) } } else setVal(value) },[value]) - return({prefix} {val} {suffix}{arrow}) + return({prefix} {val} {suffix}{arrowRef.current}) } export const Display = (props)=>{