2021-04-09 17:59:35 +05:00
|
|
|
import React, { useEffect, useRef} from 'react';
|
|
|
|
|
2021-04-11 12:55:15 +05:00
|
|
|
//import { Chart, TimeScale, Legend, LineController, LineElement, PointElement, LinearScale } from 'chart.js'
|
|
|
|
import Chart from 'chart.js/auto';
|
|
|
|
import 'chartjs-adapter-date-fns';
|
|
|
|
//Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend );
|
2021-04-09 17:59:35 +05:00
|
|
|
|
|
|
|
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',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
2021-04-11 12:55:15 +05:00
|
|
|
|
|
|
|
x:{
|
|
|
|
type:'linear'
|
|
|
|
}
|
2021-04-09 17:59:35 +05:00
|
|
|
},
|
|
|
|
}
|
|
|
|
|
|
|
|
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'}],
|
2021-04-11 12:55:15 +05:00
|
|
|
backgroundColor: 'rgb(255, 99, 132)',
|
|
|
|
borderColor: 'rgb(255, 99, 132)',
|
2021-04-09 17:59:35 +05:00
|
|
|
},
|
|
|
|
{
|
|
|
|
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'}],
|
2021-04-11 12:55:15 +05:00
|
|
|
|
|
|
|
borderColor: 'rgba(0, 99, 132, 0.5)',
|
|
|
|
|
2021-04-09 17:59:35 +05:00
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
|
|
|
|
export function ChartSaubDataOnline(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} />)
|
|
|
|
}
|