feat(history): add electricity price chart

2026-08-02 15:52:22 +02:00
parent f70f3ab054
commit 029c29afd1
10 changed files with 137 additions and 20 deletions
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Line } from 'vue-chartjs';
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Tooltip,
+    Legend,
+    Filler,
+} from 'chart.js';
+
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Tooltip,
+    Legend,
+    Filler,
+);
+
+export interface PricePoint {
+    label: string;
+    value: number;
+}
+
+const props = defineProps<{
+    data: PricePoint[];
+}>();
+
+const chartData = computed(() => ({
+    labels: props.data.map((d) => d.label),
+    datasets: [
+        {
+            data: props.data.map((d) => d.value),
+            borderColor: '#4ba66a',
+            backgroundColor: 'rgba(75, 166, 106, 0.1)',
+            fill: true,
+            tension: 0.4,
+            pointRadius: 2,
+        },
+    ],
+}));
+
+const chartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        legend: {
+            display: false,
+        },
+    },
+};
+</script>
+
+<template>
+    <div class="flex h-64 flex-1">
+        <Line :data="chartData" :options="chartOptions" />
+    </div>
+</template>