chart display ticks labels

src/components/charts/ChartTime.tsx

@@ -68,6 +68,7 @@ export const ChartTime: React.FC<ChartTimeProps> = (props) => {
     dataParams.yStart = new Date()
     dataParams.yStart.setSeconds(dataParams.yStart.getSeconds() - props.interval)
     dataParams.yInterval = props.interval
+    dataParams.displayLabels = props.yDisplay
     
     setDataParams(dataParams)
 

src/components/charts/ChartTimeBase.tsx

@@ -45,7 +45,7 @@ const defailtOptions = {
         z: 1,
         textStrokeColor : "#ffff",
         textStrokeWidth : 1,
-        color:"#000"
+        color:"#000",
       }
     },
     
@@ -84,30 +84,10 @@ export type ChartTimeBaseProps = {
   options?: ChartOptions<keyof ChartTypeRegistry>,
 }
 
-// const mergeDataSets = (target: {datasets:any[]}, source: {datasets:any[]})=>{
-//   source.datasets.forEach(sds=>{
-//     let tds = target.datasets.find(o=>o.label === sds.label)
-//     if(!tds)
-//       target.datasets.push(sds)
-//     else
-//       tds.data = sds.data
-//   })
-
-//   target.datasets.forEach(tds=>{
-//     let sdsIdx = target.datasets.findIndex(o=>o.label === tds.label)
-//     if(sdsIdx === -1)
-//       target.datasets.splice(sdsIdx, 1)
-//   })
-// }
-
 export const ChartTimeBase: React.FC<ChartTimeBaseProps> = (props) => {  
   const chartRef = useRef<HTMLCanvasElement>(null)
 
   const [chart, setChart] = useState<any>()
-  // const [chart, setChart] = useState<Chart<keyof ChartTypeRegistry, {
-  //   x: number;
-  //   y: Date;
-  // }[], unknown>>()
 
   useEffect(()=>{
     if(chartRef.current && (!chart)){
@@ -142,6 +122,7 @@ export const ChartTimeBase: React.FC<ChartTimeBaseProps> = (props) => {
       if(chart.options.scales?.y){
         chart.options.scales.y.max = end.getTime()
         chart.options.scales.y.min = start.getTime()
+        chart.options.scales.y.ticks.display = props.dataParams.displayLabels ?? true
       }
     }
 

src/components/charts/__ChartTime.__tsx

@@ -1,88 +0,0 @@
-import React, { useEffect, useRef, useState} from 'react';
-import { Chart, TimeScale, LinearScale, Legend, LineController, PointElement, LineElement, ChartConfiguration, ChartData, ChartOptions, ScatterDataPoint, ChartTypeRegistry } from 'chart.js'
-//import Chart from 'chart.js/auto';
-import 'chartjs-adapter-date-fns';
-Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend );
-const options: ChartOptions = {
-  //showLine :true,
-  //indexAxis:'y',
-  //maintainAspectRatio: false,
-  //responsive:false,
-  scales: {
-    y:{
-      type: 'time',
-      time: {
-        unit: 'second',
-        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',
-        },
-      },
-    },
- 
-    x:{
-      type:'linear'
-      }
-  },
-}
-
-type ChartTimeData = ChartData<keyof ChartTypeRegistry, {
-  x: number;
-  y: Date;
-}[], unknown>
-const data: ChartTimeData = {
-  datasets: [{
-      label: 'Torque',
-      data: [
-        {x: 10, y: new Date('2021-04-09T17:50:34.021679+05:00')}, 
-        {x: 15, y: new Date('2021-04-09T17:50:33.021679+05:00')}, 
-        {x: 20, y: new Date('2021-04-09T17:50:32.021679+05:00')}],
-        backgroundColor: 'rgb(255, 99, 132)',
-        borderColor: 'rgb(255, 99, 132)',
-    }
-  ]
-}
-
-export type LineConfig = {
-  type?: string
-  label: string
-  xAcessorName: string
-  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 => {
-    let dataset = {}
-    dataset.data =  props.data.map(dataItem => {return {
-        x: dataItem[lineCfg.xAcessorName],
-        y: new Date(dataItem[lineCfg.yAcessorName])
-    }});
-  });
-  useEffect(()=>{
-    if(chartRef.current){
-      let chart = new Chart(chartRef.current, {
-        type: 'line',
-        data:[],
-        options: props.options ?? options})
-      //chart.canvas.parentNode.style.height = '128px';
-      return () => chart.destroy()
-    }
-  },[])
-  return(<canvas ref={chartRef} />)
-}
-export {ChartTime}

src/components/charts/__ChartTimeBase_jsx

@@ -1,113 +0,0 @@
-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} />)
-}