JustZoe101/Zonneplan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(history): add electricity price chart

Browse Source
This commit is contained in:
JustZoe101
2026-08-02 15:52:22 +02:00
parent f70f3ab054
commit 029c29afd1
10 changed files with 137 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Features/History/Data/HistoryData.php
+3 -4
View File
@@ -9,12 +9,11 @@ use Spatie\LaravelData\Data;
class HistoryData extends Data
{
/**
* @property Collection<ElectricityData> $electricity
* @property Collection<GasData> $gas
*/
public function __construct(
/** @var Collection<ElectricityData> */
public Collection $electricity,
/** @var Collection<GasData> */
public Collection $gas,
) {}
}
package-lock.json
Generated
+31 -1
View File
@@ -10,6 +10,7 @@
"@tailwindcss/vite": "^4.1.11",
"@vitejs/plugin-vue": "^6.0.0",
"axios": "^1.19.0",
"chart.js": "^4.5.1",
"clsx": "^2.1.1",
"concurrently": "^9.0.1",
"i18next": "^26.3.6",
@@ -20,7 +21,8 @@
"tailwindcss": "^4.1.1",
"typescript": "^5.2.2",
"vite": "^8.0.0",
"vue": "^3.5.13"
"vue": "^3.5.13",
"vue-chartjs": "^5.3.4"
},
"devDependencies": {
"@eslint/js": "^9.19.0",
@@ -484,6 +486,12 @@
"@jridgewell/sourcemap-codec": "^1.4.14"
}
},
"node_modules/@kurkle/color": {
"version": "0.3.4",
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
"license": "MIT"
},
"node_modules/@laravel/vite-plugin-wayfinder": {
"version": "0.1.7",
"resolved": "https://registry.npmjs.org/@laravel/vite-plugin-wayfinder/-/vite-plugin-wayfinder-0.1.7.tgz",
@@ -2420,6 +2428,18 @@
"node": ">=8"
}
},
"node_modules/chart.js": {
"version": "4.5.1",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
"integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
"license": "MIT",
"dependencies": {
"@kurkle/color": "^0.3.0"
},
"engines": {
"pnpm": ">=8"
}
},
"node_modules/cliui": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
@@ -6856,6 +6876,16 @@
}
}
},
"node_modules/vue-chartjs": {
"version": "5.3.4",
"resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-5.3.4.tgz",
"integrity": "sha512-x3Fqob8RQvrTdssfi9ecsCzEkFOd8JPmNwSkSQzdfKj/uBsRJs/Y88cZcZIEcPsTVfMGwMo4MOoihoDG2DoE/g==",
"license": "MIT",
"peerDependencies": {
"chart.js": "^4.1.1",
"vue": "^3.0.0-0 || ^2.7.0"
}
},
"node_modules/vue-eslint-parser": {
"version": "10.4.1",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-10.4.1.tgz",
package.json
+3 -1
View File
@@ -34,6 +34,7 @@
"@tailwindcss/vite": "^4.1.11",
"@vitejs/plugin-vue": "^6.0.0",
"axios": "^1.19.0",
"chart.js": "^4.5.1",
"clsx": "^2.1.1",
"concurrently": "^9.0.1",
"i18next": "^26.3.6",
@@ -44,7 +45,8 @@
"tailwindcss": "^4.1.1",
"typescript": "^5.2.2",
"vite": "^8.0.0",
"vue": "^3.5.13"
"vue": "^3.5.13",
"vue-chartjs": "^5.3.4"
},
"optionalDependencies": {
"@rollup/rollup-linux-x64-gnu": "4.9.5",
resources/js/features/history/components/Chart.vue
+63
View File
@@ -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
+14 -4
View File
@@ -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
+13
View File
@@ -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
Vendored
+6 -6
View File
@@ -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 -1
View File
@@ -1,3 +1,3 @@
{
"generated.d.ts": "7ca8a9c7f0ae5e5498bdee87bb2f005d"
"generated.d.ts": "596cfad66b8ff3f8b6b98271630919ae"
}
resources/js/lang/init.ts
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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>