переделал графики js на ts

src/components/charts/ChartTime.jsx

@@ -1,127 +0,0 @@
-import React, { useEffect, useRef, useState} from 'react';
-import { Chart, TimeScale, LinearScale, Legend, LineController, PointElement, LineElement} from 'chart.js'
-import 'chartjs-adapter-date-fns';
-
-Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend );
-
-const options = {
-  maintainAspectRatio: false,
-  //responsive:false,
-  aspectRatio:0.4,
-  animation: false,
-  scales: {
-    y:{
-      type: 'time',
-      reverse:true,
-      time: {
-        unit: 'second',
-        stepSize: 20,
-        displayFormats: {
-          millisecond: 'HH:mm:ss.SSS',
-          second: 'HH:mm:ss',
-          minute: 'HH:mm:ss',
-          hour: 'dd HH:mm:ss',
-          day: 'MM.dd HH:mm',
-          week: 'yy.MM.dd HH:mm',
-          month: 'yyyy.MM.dd',
-          quarter: 'yyyy.MM.dd',
-          year: 'yyyy.MM',
-        },
-      },
-      position:{ x: 20 },
-      grid:{
-        drawTicks: false,
-      },
-      ticks: {
-        z: 1,
-        textStrokeColor : "#ffff",
-        textStrokeWidth : 1,
-        color:"#000"
-      }
-    },
-    
-    x:{
-      type:'linear',
-      position:'top'
-    }
-  },
-  elements:{
-    point:{
-      radius:0,
-      hoverRadius:5,
-    },
-  },
-}
-
-const GetRandomColor = () => "#" + Math.floor(Math.random()*16777215).toString(16)
-
-function GetOrCreateDatasetByLineConfig  (chart, lineConfig) {
-  let dataset = chart?.data?.datasets.find(d=>d.label === lineConfig.label)
-  if(!dataset)
-  {
-    let color = lineConfig.borderColor 
-      ?? lineConfig.backgroundColor 
-      ?? lineConfig.color 
-      ?? GetRandomColor()
-
-    dataset = {
-      label:lineConfig.label, 
-      data:[],
-      backgroundColor: lineConfig.backgroundColor ?? color,
-      borderColor: lineConfig.borderColor ?? color,
-      borderWidth: lineConfig.borderWidth ?? 1,
-      borderDash: lineConfig.dash ?? [],
-    }
-    chart.data.datasets.push(dataset);
-  }
-  return dataset
-}
-
-export const ChartTime = (props) => {
-  const chartRef = useRef(null)
-  const [chart, setChart] = useState(null)
-
-  useEffect(()=>{
-    if(chartRef.current && (!chart)){
-      let thisOptions = {}
-      Object.assign(thisOptions, options, props.options)
-      let newChart = new Chart(chartRef.current, {
-        type: 'line',        
-        options: thisOptions,
-      })
-      setChart(newChart)
-      return () => chart?.destroy()
-    }
-  }, [chart, props.options])
-
-  useEffect(()=>{
-    if((!chart)
-      || (!props?.config?.lines)
-      || (!props?.data)
-      || (props.config.lines.length === 0)
-      || (props.data.length === 0))
-      return
-
-    props.config.lines.forEach(lineCfg => {
-      let dataset = GetOrCreateDatasetByLineConfig(chart, lineCfg)      
-      let points = props.data.map(dataItem => {return{
-        x: dataItem[lineCfg.xAcessorName],
-        y: new Date(dataItem[lineCfg.yAcessorName])}
-      })
-      dataset.data = [ ...dataset.data, ...points, ].slice(-1024)      
-    });
-
-    let now = new Date()
-    let max = new Date()
-    max.setSeconds(now.getSeconds() - props.config.interval)
-
-    let yAxes = chart.options.scales.y
-    yAxes.ticks.display = props.config.yDisplay ?? true
-    yAxes.min = max.getTime()
-    yAxes.max = now.getTime()
-
-    chart.update()
-  }, [ chart, props.data, props.config])
-  return(<canvas ref={chartRef} />)
-}
-

src/components/charts/ChartTime.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState} from 'react';
+import {ChartTimeBase, ChartTimeData,  ChartTimeDataParams} from './ChartTimeBase'
+
+const GetRandomColor = () => "#" + Math.floor(Math.random()*16777215).toString(16)
+
+function GetOrCreateDatasetByLineConfig  (data: ChartTimeData, lineConfig: LineConfig) {
+  let dataset = data?.datasets.find(d=>d.label === lineConfig.label)
+  if(!dataset)
+  {
+    let color = lineConfig.borderColor 
+      ?? lineConfig.backgroundColor 
+      ?? lineConfig.color 
+      ?? GetRandomColor()
+
+    dataset = {
+      label:lineConfig.label, 
+      data:[],
+      backgroundColor: lineConfig.backgroundColor ?? color,
+      borderColor: lineConfig.borderColor ?? color,
+      borderWidth: lineConfig.borderWidth ?? 1,
+      borderDash: lineConfig.dash ?? [],
+    }
+    data.datasets.push(dataset);
+  }
+  return dataset
+}
+
+export type LineConfig = {
+  type?: string
+  label: string
+  xAcessorName: string
+  yAcessorName: string
+  color?:string
+  borderColor?: string
+  backgroundColor?: string
+  borderWidth?: number
+  dash?:number[]
+  labels?: any[]
+}
+
+export type ChartTimeProps = {
+  yDisplay: Boolean,
+  lines: LineConfig[],
+  data: any[],
+  interval: number,
+}
+
+export const ChartTime: React.FC<ChartTimeProps> = (props) => {
+
+  const [dataParams, setDataParams] = useState<ChartTimeDataParams>({data: {datasets:[]}, yStart: new Date(), })
+
+  useEffect(()=>{
+    if(  (!props?.lines)
+      || (!props?.data)
+      || (props.lines.length === 0)
+      || (props.data.length === 0))
+      return
+
+    props.lines.forEach(lineCfg => {
+      let dataset = GetOrCreateDatasetByLineConfig(dataParams.data, lineCfg)      
+      let points = props.data.map(dataItem => {return{
+        x: dataItem[lineCfg.xAcessorName],
+        y: new Date(dataItem[lineCfg.yAcessorName])}
+      })
+      dataset.data = [ ...dataset.data, ...points, ].slice(-1024)      
+    });
+
+    dataParams.yStart = new Date()
+    dataParams.yStart.setSeconds(dataParams.yStart.getSeconds() - props.interval)
+    dataParams.yInterval = props.interval
+    
+    setDataParams(dataParams)
+
+  }, [ props.data, props.lines, props.interval])
+
+  return(<ChartTimeBase dataParams = {dataParams} />)
+}
+

src/components/charts/__ChartTime.__tsx

@@ -32,6 +32,7 @@ const options: ChartOptions = {
       }
   },
 }
+
 type ChartTimeData = ChartData<keyof ChartTypeRegistry, {
   x: number;
   y: Date;
@@ -48,6 +49,7 @@ const data: ChartTimeData = {
     }
   ]
 }
+
 export type LineConfig = {
   type?: string
   label: string
@@ -55,11 +57,13 @@ export type LineConfig = {
   yAcessorName: string
   labels?: any[]
 }
+
 export type ChartTimeProps = {
   data: any[],
   config: LineConfig[],
   options?:ChartOptions,
 }
+
 const ChartTime: React.FC<ChartTimeProps> = (props) => {
   const chartRef = useRef<HTMLCanvasElement>(null)
   props.config.forEach(lineCfg => {

src/components/charts/__ChartTimeBase_jsx

@@ -0,0 +1,113 @@
+import { useEffect, useRef, useState} from 'react';
+import { 
+  Chart, 
+  TimeScale, 
+  LinearScale, 
+  Legend, 
+  LineController, 
+  PointElement, 
+  LineElement, 
+  ChartData, 
+  ChartTypeRegistry, 
+  ChartOptions} from 'chart.js'
+import 'chartjs-adapter-date-fns';
+
+Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend );
+
+const defaultOptions = {
+  maintainAspectRatio: false,
+  aspectRatio:0.4,
+  animation: false,
+  scales: {
+    y:{
+      type: 'time',
+      reverse:true,
+      time: {
+        unit: 'second',
+        stepSize: 20,
+        displayFormats: {
+          millisecond: 'HH:mm:ss.SSS',
+          second: 'HH:mm:ss',
+          minute: 'HH:mm:ss',
+          hour: 'dd HH:mm:ss',
+          day: 'MM.dd HH:mm',
+          week: 'yy.MM.dd HH:mm',
+          month: 'yyyy.MM.dd',
+          quarter: 'yyyy.MM.dd',
+          year: 'yyyy.MM',
+        },
+      },
+      position:{ x: 20 },
+      grid:{
+        drawTicks: false,
+      },
+      ticks: {
+        z: 1,
+        textStrokeColor : "#ffff",
+        textStrokeWidth : 1,
+        color:"#000"
+      }
+    },
+    
+    x:{
+      type:'linear',
+      position:'top'
+    }
+  },
+  elements:{
+    point:{
+      radius:0,
+      hoverRadius:5,
+    },
+  },
+  plugins:{
+    legend:{
+      display: false,
+    }
+  }
+}
+
+
+export const ChartTimeBase = (props) => {  
+  const chartRef = useRef(null)
+
+  const [chart, setChart] = useState(null)
+  
+  useEffect(()=>{
+    if(chartRef.current && (!chart)){
+      let thisOptions = {}
+      Object.assign(thisOptions, defaultOptions, props.options)
+
+      let newChart = new Chart(chartRef.current, {
+        type: 'line',        
+        options: thisOptions,
+        data: props.data
+      })
+      setChart(newChart)
+      return () => chart?.destroy()
+    }
+  }, [chart, props.options, props.data])
+
+  useEffect(()=>{
+    if(!chart)
+      return
+
+    chart.data = props.data
+
+    if(props.yStart){
+      let interval = props.yInterval ?? 600
+      let start = props.yStart
+      let end = props.yStart
+      end.setSeconds(end.getSeconds() + interval)
+
+      if(chart.options.scales?.y){
+        chart.options.scales.y.min = end.getSeconds()
+        chart.options.scales.y.max = start.getSeconds()
+      }
+    }
+
+    chart.update()
+  },[chart, props.data])
+
+  return(<canvas ref={chartRef} />)
+}

src/pages/Well.jsx

@@ -52,10 +52,11 @@ const lineParameters = [
   }
 ]
 
+const interval = 600
+
 export default function Well(props){
   let { id } = useParams();
   const [saubData, setSaubData] = useState([])
-  const [interval, setInterval] = useState(600)
 
   const handleReceiveDataSaub = (data)=>{
     if(data)
@@ -71,11 +72,10 @@ export default function Well(props){
     },
     [id]);
 
-  
   let colSpan = 24/lineParameters.length
   let cols = lineParameters.map(line => 
     <Col span={colSpan}>
-      <ChartTime data={saubData} config={line} interval={interval}/> 
+      <ChartTime data={saubData} {...line} interval={interval}/> 
     </Col>)
   
   return(<div>