diff --git a/src/charts/LineChart.js b/src/charts/LineChart.js deleted file mode 100644 index 1a8ee756..00000000 --- a/src/charts/LineChart.js +++ /dev/null @@ -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) - }, -} \ No newline at end of file diff --git a/src/components/charts/TempChart.vue b/src/components/charts/TempChart.vue index acbfc16e..ab6e0723 100644 --- a/src/components/charts/TempChart.vue +++ b/src/components/charts/TempChart.vue @@ -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() diff --git a/src/store/printer/tempHistory/mutations.js b/src/store/printer/tempHistory/mutations.js index 99089cf0..0626951c 100644 --- a/src/store/printer/tempHistory/mutations.js +++ b/src/store/printer/tempHistory/mutations.js @@ -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 }); } }