ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chart display ticks labels

Browse Source
This commit is contained in:
Фролов 2021-04-14 09:16:02 +05:00
parent 073743c29c
commit 1800f15c8e
4 changed files with 3 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/charts/ChartTime.tsx
View File

@ -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)

23
src/components/charts/ChartTimeBase.tsx
View File

@ -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
}
}

88
src/components/charts/__ChartTime.__tsx
View File

@ -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}

113
src/components/charts/__ChartTimeBase_jsx
View File

@ -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} />)
}