The chart is distorted #10
Description
Hello
I took the data every five seconds and put it on the chart.
If you first put data in the chart and lander it normally goes downsamples, and then the data looks distorted like an image.
First Landered Chart,
Next Landered Chart
The code I wrote is as follows.
import React, {Component} from 'react';
import {Line} from 'react-chartjs-2';
import {tooltipLabel, yAxes} from "../../../../configurations/chartFormat";
import DownsamplePlugin from 'chartjs-plugin-downsample';
const Chart = require('react-chartjs-2').Chart;
interface ChartProps {
data: Array<any>
}
const option = {
type: 'line',
legend: {
display: false
},
animation: {
duration: 0
},
scales: {
xAxes: [{
gridLines: {drawOnChartArea: false},
type: 'time',
time: {
unit: 'minute',
// displayFormats: {
// minute: 'h:mm A'
// }
},
ticks: {
maxRotation: 0,
autoSkip: true,
autoSkipPadding: 50,
maxTicksLimit: 2
}
}],
yAxes: [{
ticks: {
stacked: true,
min: 0,
autoSkip: true,
// autoSkipPadding: 15,
callback: function (value, index, values) {
return (index === 0 || index === values.length - 1) ? yAxes(value, values) : null
},
}
}]
},
tooltips: {
displayColors: false,
intersect: false,
callbacks: {
label: function (tooltipItem, data) {
return tooltipLabel(tooltipItem, data, 'TPS : ')
}
}
},
downsample: {
enabled: true,
threshold: 100,
auto: true, // don't re-downsample the data every move
onInit: false, // but do resample it when we init the chart (this is default)
preferOriginalData: true, // use our original data when downscaling so we can downscale less, if we need to.
restoreOriginalData: false, // if auto is false and this is true, original data will be restored on pan/zoom - that isn't what we want.
}
}
class TestChart extends Component<ChartProps> {
componentDidMount() {
Chart.pluginService.register(DownsamplePlugin);
console.log("componentDidMount")
}
componentDidUpdate(prevProps: Readonly<ChartProps>, prevState: Readonly<{}>, snapshot?: any) {
console.log("componentDidMount")
}
componentWillUnmount() {
console.log("componentDidMount")
}
chartData = (dataList: Array<any>) => {
let pointTypeList = dataList.map(function (data) {
return {
x:data.timestamp * 1000,
y:data.tps_count
};
})
return {
datasets: [
{
fill: false,
lineTension: 0,
borderWidth: 1,
backgroundColor: 'rgba(75,118,192,0.4)',
borderColor: 'rgb(32,92,92)',
pointBorderColor: 'rgba(91,128,191,0.4)',
pointBackgroundColor: '#fff',
pointBorderWidth: 0,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 1,
pointRadius: 0,
pointHitRadius: 10,
data: pointTypeList
}
]
};
}
render() {
const {data} = this.props;
return (
<div>
<Line options={option}
data={this.chartData(data)}
/>
</div>
);
}
}
export default TestChart;