|
import { Chart } from 'chart.js'; |
|
|
|
@Component({ |
|
tag: 'chart-js', |
|
styleUrl: 'chart-js.scss' |
|
}) |
|
export class ChartJs { |
|
@Prop() |
|
public data: any; |
|
@Watch('data') |
|
protected dataWatcher(newData: any): void { |
|
// console.log('chart-js::dataWatcher', newData); |
|
|
|
this.myChartInstance.data.labels = newData.labels; |
|
|
|
this.myChartInstance.data.datasets.forEach((dataset: any) => { |
|
dataset.data = newData.values; |
|
dataset.label = newData.caption[0]; |
|
}); |
|
|
|
this.myChartInstance.update(); |
|
} |
|
@Prop() |
|
public colors: string[]; |
|
@Watch('colors') |
|
protected colorsWatcher(newColors: string[]): void { |
|
console.log('chart-js::colorsWatcher', newColors); |
|
|
|
if (!newColors || !Array.isArray(newColors)) { |
|
return; |
|
} |
|
|
|
this.myChartInstance.data.datasets.forEach((dataset: any) => { |
|
dataset.backgroundColor = newColors[0]; |
|
dataset.borderColor = newColors[0]; |
|
}); |
|
|
|
this.myChartInstance.update(); |
|
} |
|
|
|
@Element() |
|
private el: HTMLElement; |
|
private canvas: HTMLCanvasElement; |
|
private context: CanvasRenderingContext2D; |
|
|
|
protected myChartInstance: any; |
|
|
|
protected componentDidLoad(): void { |
|
if (Build.isBrowser) { |
|
// this.canvas = this.el.shadowRoot.querySelector('canvas'); |
|
this.canvas = this.el.querySelector('canvas'); |
|
this.canvas.width = 400; |
|
this.canvas.height = 300; |
|
|
|
this.context = this.canvas.getContext('2d'); |
|
|
|
const chartOptions: any = { |
|
type: 'line', |
|
data: { |
|
labels: this.data.labels, |
|
datasets: [ |
|
{ |
|
label: this.data.caption[0], |
|
data: this.data.values, |
|
backgroundColor: [ |
|
'#113C81' |
|
// 'rgba(54, 162, 235, 0.2)', |
|
// 'rgba(255, 206, 86, 0.2)', |
|
// 'rgba(75, 192, 192, 0.2)', |
|
// 'rgba(153, 102, 255, 0.2)', |
|
// 'rgba(255, 159, 64, 0.2)' |
|
], |
|
borderColor: [ |
|
'#113C81' |
|
// 'rgba(54, 162, 235, 1)', |
|
// 'rgba(255, 206, 86, 1)', |
|
// 'rgba(75, 192, 192, 1)', |
|
// 'rgba(153, 102, 255, 1)', |
|
// 'rgba(255, 159, 64, 1)' |
|
], |
|
borderWidth: 2, |
|
lineTension: 0, |
|
fill: false, |
|
pointRadius: 0 |
|
} |
|
] |
|
}, |
|
options: { |
|
legend: { |
|
position: 'bottom' |
|
}, |
|
animation: { |
|
duration: 0 |
|
}, |
|
responsive: true, |
|
maintainAspectRatio: false, |
|
scales: { |
|
xAxes: [ |
|
{ |
|
type: 'time', |
|
time: { |
|
// parser: 'YYYY-MM-DDTHH:mm:ss.000Z' |
|
// round: 'day' |
|
// tooltipFormat: 'll HH:mm' |
|
displayFormats: { |
|
// SOURCE: https://stackoverflow.com/questions/37061945/how-to-format-x-axis-time-scale-values-in-chart-js-v2 |
|
millisecond: 'HH:mm:ss', |
|
second: 'HH:mm:ss', |
|
minute: 'HH:mm' |
|
} |
|
}, |
|
// ticks: { |
|
// beginAtZero: false |
|
// }, |
|
scaleLabel: { |
|
display: true, |
|
labelString: 'Zeitpunkt' |
|
} |
|
} |
|
] |
|
}, |
|
yAxes: [ |
|
{ |
|
scaleLabel: { |
|
display: true, |
|
labelString: 'Wert' |
|
} |
|
} |
|
] |
|
} |
|
}; |
|
|
|
this.myChartInstance = new Chart(this.context, chartOptions); |
|
} |
|
} |
|
|
|
protected render(): HTMLElement { |
|
return ( |
|
<div |
|
class='chart-container' |
|
style={{ position: 'relative', height: '30vh', width: '100%' }} |
|
> |
|
<canvas width='400' height='300' /> |
|
</div> |
|
); |
|
} |
|
} |