From 1800f15c8e2993f841b3aef33713597b60a43218 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A4=D1=80=D0=BE=D0=BB=D0=BE=D0=B2?= Date: Wed, 14 Apr 2021 09:16:02 +0500 Subject: [PATCH] chart display ticks labels --- src/components/charts/ChartTime.tsx | 1 + src/components/charts/ChartTimeBase.tsx | 23 +---- src/components/charts/__ChartTime.__tsx | 88 ----------------- src/components/charts/__ChartTimeBase_jsx | 113 ---------------------- 4 files changed, 3 insertions(+), 222 deletions(-) delete mode 100644 src/components/charts/__ChartTime.__tsx delete mode 100644 src/components/charts/__ChartTimeBase_jsx diff --git a/src/components/charts/ChartTime.tsx b/src/components/charts/ChartTime.tsx index 4f6727a..711d53e 100644 --- a/src/components/charts/ChartTime.tsx +++ b/src/components/charts/ChartTime.tsx @@ -68,6 +68,7 @@ export const ChartTime: React.FC = (props) => { dataParams.yStart = new Date() dataParams.yStart.setSeconds(dataParams.yStart.getSeconds() - props.interval) dataParams.yInterval = props.interval + dataParams.displayLabels = props.yDisplay setDataParams(dataParams) diff --git a/src/components/charts/ChartTimeBase.tsx b/src/components/charts/ChartTimeBase.tsx index 243fd47..3dc6aa7 100644 --- a/src/components/charts/ChartTimeBase.tsx +++ b/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, } -// 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 = (props) => { const chartRef = useRef(null) const [chart, setChart] = useState() - // const [chart, setChart] = useState>() useEffect(()=>{ if(chartRef.current && (!chart)){ @@ -142,6 +122,7 @@ export const ChartTimeBase: React.FC = (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 } } diff --git a/src/components/charts/__ChartTime.__tsx b/src/components/charts/__ChartTime.__tsx deleted file mode 100644 index 4555508..0000000 --- a/src/components/charts/__ChartTime.__tsx +++ /dev/null @@ -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 -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 = (props) => { - const chartRef = useRef(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() -} -export {ChartTime} \ No newline at end of file diff --git a/src/components/charts/__ChartTimeBase_jsx b/src/components/charts/__ChartTimeBase_jsx deleted file mode 100644 index f33ea95..0000000 --- a/src/components/charts/__ChartTimeBase_jsx +++ /dev/null @@ -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() -} \ No newline at end of file