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));

resources/js/generated/generated.d.ts

@@ -17,10 +17,10 @@ declare namespace App {
             startDate: string;
             endDate: string;
             period: string;
-            marketPrice: number;
-            totalPriceTaxIncluded: number;
-            priceInclHandlingVat: number;
-            priceTaxWithVat: number;
+            marketPrice: number | null;
+            totalPriceTaxIncluded: number | null;
+            priceInclHandlingVat: number | null;
+            priceTaxWithVat: number | null;
             startDateDatetime: string;
         };
     }
@@ -41,8 +41,8 @@ declare namespace App {
         namespace History {
             namespace Data {
                 export type HistoryData = {
-                    electricity: Array<any>;
-                    gas: Array<any>;
+                    electricity: App.Data.ElectricityData[];
+                    gas: App.Data.GasData[];
                 };
             }
             namespace Requests {

resources/js/generated/typescript-transformer-manifest.json

@@ -1,3 +1,3 @@
 {
-    "generated.d.ts": "7ca8a9c7f0ae5e5498bdee87bb2f005d"
+    "generated.d.ts": "596cfad66b8ff3f8b6b98271630919ae"
 }

resources/js/lang/init.ts

@@ -1,9 +1,9 @@
 import i18next from 'i18next';
 import resources from './translations';
 
-await i18next.init(() => ({
+await i18next.init({
     lng: 'nl',
     resources,
-}));
+});
 
 export default i18next;

resources/js/layouts/Layout.vue

@@ -16,5 +16,5 @@ import history from '@/routes/history';
             </li>
         </ul>
     </nav>
-    <div class="absolute top-0 left-64 p-4"><slot /></div>
+    <div class="absolute top-0 right-0 bottom-0 left-64 p-4"><slot /></div>
 </template>