first implementation of canvasjs

Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
Stefan Dej 2020-12-04 00:59:50 +01:00
parent 59a6a8476c
commit 5c6e5db9c4
3 changed files with 24 additions and 182 deletions

View File

@ -1,161 +0,0 @@
//import store from '../store'
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins;
//const sampleInterval = 1000; // ms
const defaultMaxTemperature = 300; // degC
const maxSampleTime = 600000; // 10min (in ms)
export default {
extends: Line,
mixins: [reactiveProp],
props: ['chartData'],
data() {
return {
timer: '',
options: {
events: [],
animation: {
duration: 0 // general animation time
},
elements: {
line: {
tension: 0,
borderWidth: 1,
},
point: {
radius: 0,
}
},
showLines: true,
legend: {
labels: {
fontColor: 'rgb(203, 203, 203)',
//fontFamily: 'Roboto,sans-serif',
filter: function(item) {
if (item && item.text) return !item.text.includes('_target');
}
},
onClick: function(e, legendItem) {
window.console.log(e)
window.console.log(legendItem)
let ci = this.chart;
let index = legendItem.datasetIndex;
let index_target = ci.data.datasets.findIndex(dataset => dataset.label === legendItem.text+'_target');
let meta = ci.getDatasetMeta(index);
// See controller.isDatasetVisible comment
meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
if (index_target !== -1) {
let meta_target = ci.getDatasetMeta(index_target);
meta_target.hidden = meta.hidden;
}
//store.dispatch('gui/setHeaterChartVisibility', { name: legendItem.text, hidden: meta.hidden });
ci.update();
}
},
tooltips: {
enabled: false
},
hover: {
mode:undefined
},
/*tooltips: {
enabled: false,
mode: 'nearest',
caretPadding: 20,
intersect: false,
callbacks: {
title: function (tooltipItem) {
let date = new Date(tooltipItem[0].label);
return date.getHours()+":"+(date.getMinutes() < 10 ? "0" : "")+date.getMinutes()+":"+(date.getSeconds() < 10 ? "0" : "")+date.getSeconds();
},
label: function (tooltipItem/!*, data*!/) {
/!*let label_target = data['datasets'][tooltipItem.datasetIndex].label+"_target";
let target_dataset = data['datasets'].find(dataset => dataset.label === label_target);
if (target_dataset !== undefined && target_dataset.data[tooltipItem.index] !== undefined) return tooltipItem.value+" / "+target_dataset.data[tooltipItem.index].y;*!/
return tooltipItem.value;
},
}
},*/
maintainAspectRatio: false,
responsive: true,
responsiveAnimationDuration: 0, // animation duration after a resize
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'minute',
displayFormats: {
second: 'HH:mm:ss',
minute: 'HH:mm'
}
},
ticks: {
minor: {
fontColor: 'rgb(203, 203, 203)',
fontFamily: 'Roboto,sans-serif'
},
min: new Date() - maxSampleTime,
max: new Date(),
},
gridLines: {
color: 'rgba(203,203,203,0.1)',
},
}],
yAxes: [
{
gridLines: {
color: 'rgb(203, 203, 203)',
zeroLineColor: 'rgb(203, 203, 203)',
display: true
},
ticks: {
minor: {
fontColor: 'rgb(203, 203, 203)',
fontFamily: 'Roboto,sans-serif'
},
major: {
fontColor: 'rgb(203, 203, 203)',
fontFamily: 'Roboto,sans-serif'
},
min: 0,
max: defaultMaxTemperature,
stepSize: 50
}
}
]
}
}
}
},
created () {
/*this.timer = setInterval(() => {
if (
this.$data._chart &&
this.$data._chart.config &&
this.$data._chart.config.options &&
this.$data._chart.config.options.scales &&
this.$data._chart.config.options.scales.xAxes &&
this.$data._chart.config.options.scales.xAxes.length &&
this.$data._chart.config.options.scales.xAxes[0].ticks &&
this.$data._chart.config.options.scales.yAxes &&
this.$data._chart.config.options.scales.yAxes.length &&
this.$data._chart.config.options.scales.yAxes[0].ticks
) {
this.$data._chart.config.options.scales.yAxes[0].ticks.max = defaultMaxTemperature
this.$data._chart.config.options.scales.xAxes[0].ticks.min = new Date() - maxSampleTime
this.$data._chart.config.options.scales.xAxes[0].ticks.max = new Date()
//this.$data._chart.update()
}
}, 1000)*/
},
mounted () {
//TODO enable after restart fix
// this.renderChart(this.chartData, this.options)
},
}

View File

@ -32,7 +32,8 @@ export default {
gridThickness: 1,
gridColor: '#ffffff30',
minimum: new Date() - 60*10,
maximum: new Date()
maximum: new Date(),
margin: 15,
},
axisY: {
gridThickness: 1,
@ -64,7 +65,10 @@ export default {
},
created() {
this.timer = setInterval(() => {
if (this.chart) {
if (
this.chart &&
this.chart._toolBar
) {
this.chartOptions.data = this.datasets
this.chartOptions.axisX.minimum = new Date() - 60* this.tempchartDisplayMinutes *1000
this.chartOptions.axisX.maximum = new Date()

View File

@ -1,5 +1,5 @@
import { getDefaultState } from './index'
//import { colorArray, colorChamber, colorHeaterBed } from "@/store/variables"
import { colorArray, colorChamber, colorHeaterBed } from "@/store/variables"
export default {
reset(state) {
@ -60,20 +60,22 @@ export default {
name: payload.name,
legendText: payload.name,
xValueType: "dateTime",
data:[],
showInLegend: true,
dataPoints:[],
showInLegend: false,
fillOpacity: .3,
lineThickness: 0,
toolTipContent: "{name}: {y}°C",
color: masterDataset.color || '#666'
}
}
} else {
/*let color = '';
let color = '';
switch (payload.name) {
case 'heater_bed': color = colorHeaterBed; break;
case 'chamber': color = colorChamber; break;
default: color = colorArray[state.datasets.filter(element => !element.label.endsWith("_target") && element.label !== "heater_bed" && element.label !== "chamber").length]; break;
}*/
default: color = colorArray[state.datasets.filter(element => !element.name.endsWith("_target") && element.name !== "heater_bed" && element.name !== "chamber").length]; break;
}
mainDataset = {
type: "spline",
@ -82,6 +84,8 @@ export default {
xValueType: "dateTime",
dataPoints:[],
showInLegend: true,
toolTipContent: "{name}: {y}°C",
color: color,
}
}
@ -91,7 +95,12 @@ export default {
// update current temp in temperature chart
if (mainDataset && payload.value !== undefined) {
if (Array.isArray(payload.value)) {
window.console.log("array")
for (let i = 0; i < payload.value.length; i++) {
mainDataset.data.push({
x: payload.time - 1000 * i,
y: Math.round(payload.value[i]*100)/100
})
}
} else {
if (mainDataset.dataPoints && mainDataset.dataPoints.length) {
let lastTemp = mainDataset.dataPoints[mainDataset.dataPoints.length - 1].y
@ -101,19 +110,9 @@ export default {
payload.time - lastTime > minResolution &&
(lastTemp !== payload.value || payload.time - lastTime > minResolution)
) {
if (
payload.name.includes('_target') &&
lastTemp !== payload.value
) {
mainDataset.dataPoints.push({
x: payload.time-1,
y: lastTemp
});
}
mainDataset.dataPoints.push({
x: payload.time,
y: payload.value
y: Math.round(payload.value*100)/100
});
}
@ -124,7 +123,7 @@ export default {
} else if (mainDataset.dataPoints) {
mainDataset.dataPoints.push({
x: payload.time,
y: payload.value
y: Math.round(payload.value*100)/100
});
}
}