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/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)=>{ 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 b7389ae..96e6890 100644 --- a/src/pages/TelemetryView.jsx +++ b/src/pages/TelemetryView.jsx @@ -21,7 +21,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 = { @@ -119,6 +120,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) { @@ -222,6 +226,12 @@ export default function TelemetryView(props) { } }, [id]); + useEffect(() => { + DataService.getData(id, null, chartInterval) + .then(handleReceiveDataSaub) + .catch(error => console.error(error)) + }, [chartInterval]); + const colSpan = 24 / (paramsGroups.length) return (