78 lines
2.0 KiB
JavaScript
78 lines
2.0 KiB
JavaScript
// Minimal eingebettete Chart.js-Version (angepasst für VictoryTimer)
|
|
// Vertikaler Bar-Chart ohne Achsentitel und ohne Labels
|
|
// Feste Balkenhöhe: 20px + 10px Abstand unten, kein Abstand oben
|
|
|
|
class ChartWrapper {
|
|
constructor(ctx, config) {
|
|
this.ctx = ctx;
|
|
this.config = config;
|
|
this.render();
|
|
}
|
|
|
|
render() {
|
|
const { datasets } = this.config.data;
|
|
const data = datasets[0].data;
|
|
|
|
this.ctx.canvas.width = this.ctx.canvas.clientWidth;
|
|
this.ctx.canvas.height = this.ctx.canvas.clientHeight;
|
|
|
|
const width = this.ctx.canvas.width;
|
|
const height = this.ctx.canvas.height;
|
|
|
|
const barHeight = 15;
|
|
const spacing = 5;
|
|
|
|
const max = 720; // 30 Tage = 720 Stunden
|
|
|
|
this.ctx.clearRect(0, 0, width, height);
|
|
|
|
const colors = [
|
|
'#ff6f61', '#6a5acd', '#ffd700', '#40e0d0', '#ff69b4', '#87cefa', '#98fb98', '#ffa07a', '#dda0dd', '#f08080',
|
|
'#00ced1', '#dc143c', '#7b68ee', '#00fa9a', '#ffc0cb', '#ba55d3', '#20b2aa', '#ff8c00', '#4682b4', '#9acd32'
|
|
];
|
|
|
|
data.forEach((val, i) => {
|
|
const y = i * (barHeight + spacing);
|
|
const barWidth = (val / max) * width;
|
|
this.ctx.fillStyle = colors[i % colors.length];
|
|
this.ctx.fillRect(0, y, barWidth, barHeight);
|
|
});
|
|
}
|
|
|
|
destroy() {
|
|
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
|
|
}
|
|
}
|
|
|
|
let chart;
|
|
|
|
export function drawChart() {
|
|
const history = JSON.parse(localStorage.getItem("victorytimer_history") || "[]").slice(-20)
|
|
.filter(seconds => seconds >= 300) // mindestens 5 Minuten
|
|
.map(seconds => +(seconds / 3600).toFixed(1));
|
|
|
|
const ctx = document.getElementById("historyChart").getContext("2d");
|
|
if (chart) chart.destroy();
|
|
|
|
chart = new ChartWrapper(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: [],
|
|
datasets: [{
|
|
label: 'Rauchfrei-Zeit (Stunden)',
|
|
data: history
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
title: { display: false, text: "" }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|