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 (