From bb0b3527b330a5db8c0e7459f8f3fd681f597948 Mon Sep 17 00:00:00 2001 From: KharchenkoVV Date: Thu, 27 May 2021 16:59:05 +0500 Subject: [PATCH] =?UTF-8?q?CF2-1:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20=D0=BE=D1=82=D0=BC=D0=B5=D1=82=D0=BA=D0=B8?= =?UTF-8?q?=20=D0=B3=D0=BB=D1=83=D0=B1=D0=B8=D0=BD=D1=8B=20=D0=B4=D0=BB?= =?UTF-8?q?=D1=8F=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B0=20'=D0=9F?= =?UTF-8?q?=D0=BE=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B1=D0=BB?= =?UTF-8?q?=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) {