forked from ddrilling/asb_cloud_front
79 lines
1.9 KiB
JavaScript
79 lines
1.9 KiB
JavaScript
import React, { useEffect, useRef} from 'react';
|
|
|
|
import { Chart, TimeScale, LinearScale, Legend, LineController, PointElement, LineElement } from 'chart.js'
|
|
//import Chart from 'chart.js/auto';
|
|
import 'chartjs-adapter-date-fns';
|
|
Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend );
|
|
|
|
const options = {
|
|
//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'
|
|
}
|
|
},
|
|
}
|
|
|
|
const data= {
|
|
datasets: [{
|
|
label: 'Torque',
|
|
data: [
|
|
{x: 10, y: '2021-04-09T17:50:34.021679+05:00'},
|
|
{x: 15, y: '2021-04-09T17:50:33.021679+05:00'},
|
|
{x: 20, y: '2021-04-09T17:50:32.021679+05:00'}],
|
|
backgroundColor: 'rgb(255, 99, 132)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
},
|
|
{
|
|
label: 'Pressure',
|
|
data: [
|
|
{x: 11, y: '2021-04-09T17:50:34.021679+05:00'},
|
|
{x: 14, y: '2021-04-09T17:50:33.021679+05:00'},
|
|
{x: 21, y: '2021-04-09T17:50:32.021679+05:00'}],
|
|
|
|
borderColor: 'rgba(0, 99, 132, 0.5)',
|
|
|
|
}
|
|
]
|
|
}
|
|
|
|
// export type LineConfig = {
|
|
// login?: string | null;
|
|
// password?: string | null;
|
|
// }
|
|
|
|
export function ChartTime(/*props*/){
|
|
const chartRef = useRef(null)
|
|
|
|
useEffect(()=>{
|
|
let chart = new Chart(chartRef.current, {
|
|
type: 'line',
|
|
data,
|
|
options})
|
|
//chart.canvas.parentNode.style.height = '128px';
|
|
return () => chart.destroy()
|
|
},[])
|
|
|
|
return(<canvas ref={chartRef} />)
|
|
} |