feat(history): add electricity price chart

resources/js/features/history/components/Chart.vue

@@ -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>

resources/js/features/history/pages/Index.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import useHistoryViewModel from '../viewmodels/HistoryViewModel';
 import moment from 'moment';
+import Chart from '../components/Chart.vue';
 
 const model = useHistoryViewModel();
 
@@ -14,10 +15,19 @@ onMounted(() => {
 watch(date, (value) => {
     model.getHistoryData(moment(value).format('YYYY-MM-DD'));
 });
+
+const chartData = computed(
+    () =>
+        model.historyData.value?.electricity
+            .filter((e) => e.totalPriceTaxIncluded != null)
+            .map((e) => ({
+                label: moment(e.startDate).format('HH:mm'),
+                value: e.totalPriceTaxIncluded,
+            })) ?? [],
+);
 </script>
 
 <template>
-    <div>
-        <input type="date" v-model="date" />
-    </div>
+    <input type="date" v-model="date" />
+    <Chart :data="chartData" />
 </template>

resources/js/features/history/viewmodels/HistoryViewModel.ts

@@ -1,6 +1,7 @@
 import { create } from 'axios';
 import { ref } from 'vue';
 import HistoryData = App.Features.History.Data.HistoryData;
+import moment from 'moment';
 
 export default function useHistoryViewModel() {
     const isLoading = ref<boolean>(false);
@@ -17,6 +18,18 @@ export default function useHistoryViewModel() {
                 },
             })
             .then((res) => {
+                console.log(
+                    res.data?.electricity.flatMap((e) => {
+                        if (!e.totalPriceTaxIncluded) {
+                            return;
+                        }
+
+                        return {
+                            label: moment(e.startDate).format('DD-MM-YYYY'),
+                            value: e.totalPriceTaxIncluded?.toPrecision(2),
+                        };
+                    }),
+                );
                 historyData.value = res.data;
             })
             .finally(() => (isLoading.value = false));