first implementation of canvasjs
Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
parent
59a6a8476c
commit
5c6e5db9c4
@ -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)
|
||||
},
|
||||
}
|
@ -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()
|
||||
|
@ -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
|
||||
});
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user