chore: Typescript: Rewrite Sessions

assets/js/components/Sessions/AvgCostGroupedChart.vue

@@ -9,33 +9,38 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import { PolarArea } from "vue-chartjs";
-import { RadialLinearScale, ArcElement, Legend, Tooltip } from "chart.js";
-import { registerChartComponents, commonOptions, tooltipLabelColor } from "./chartConfig";
+import { RadialLinearScale, ArcElement, Legend, Tooltip, type TooltipItem } from "chart.js";
+import { registerChartComponents, commonOptions, tooltipLabelColor } from "./chartConfig.ts";
 import formatter from "@/mixins/formatter";
 import colors, { dimColor } from "@/colors";
-import { TYPES, GROUPS } from "./types";
 import LegendList from "./LegendList.vue";
+import { defineComponent, type PropType } from "vue";
+import type { CURRENCY } from "@/types/evcc";
+import { TYPES, GROUPS, type Session } from "./types.ts";
 
 registerChartComponents([RadialLinearScale, ArcElement, Legend, Tooltip]);
 
-export default {
+export default defineComponent({
 	name: "AvgCostGroupedChart",
 	components: { PolarArea, LegendList },
 	mixins: [formatter],
 	props: {
-		sessions: { type: Array, default: () => [] },
-		currency: { type: String, default: "EUR" },
-		groupBy: { type: String, default: GROUPS.LOADPOINT },
+		sessions: { type: Array as PropType<Session[]>, default: () => [] },
+		currency: { type: String as PropType<CURRENCY>, default: "EUR" },
+		groupBy: {
+			type: String as PropType<Exclude<GROUPS, GROUPS.NONE>>,
+			default: GROUPS.LOADPOINT,
+		},
 		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
 		suggestedMax: { type: Number, default: 0 },
-		costType: { type: String, default: TYPES.PRICE },
+		costType: { type: String as PropType<TYPES>, default: TYPES.PRICE },
 	},
 	computed: {
 		chartData() {
 			console.log(`update ${this.costType} grouped data`);
-			const aggregatedData = {};
+			const aggregatedData: Record<string, { energy: number; cost: number }> = {};
 
 			this.sessions.forEach((session) => {
 				const groupKey = session[this.groupBy];
@@ -45,10 +50,10 @@ export default {
 				const chargedEnergy = session.chargedEnergy;
 				if (this.costType === TYPES.CO2) {
 					aggregatedData[groupKey].energy += chargedEnergy;
-					aggregatedData[groupKey].cost += session.co2PerKWh * chargedEnergy;
+					aggregatedData[groupKey].cost += (session.co2PerKWh || 0) * chargedEnergy;
 				} else if (this.costType === TYPES.PRICE) {
 					aggregatedData[groupKey].energy += chargedEnergy;
-					aggregatedData[groupKey].cost += session.price;
+					aggregatedData[groupKey].cost += session.price || 0;
 				}
 			});
 
@@ -85,7 +90,7 @@ export default {
 				aspectRatio: 1,
 				borderRadius: 8,
 				borderWidth: 3,
-				color: colors.text,
+				color: colors.text || "",
 				spacing: 0,
 				radius: "100%",
 				plugins: {
@@ -96,45 +101,47 @@ export default {
 						position: "topBottomCenter",
 						callbacks: {
 							title: () => null,
-							label: (tooltipItem) => {
-								const { label, raw = 0 } = tooltipItem;
+							label: (tooltipItem: TooltipItem<"polarArea">) => {
+								const { label, dataset, dataIndex } = tooltipItem;
+								const d = dataset.data[dataIndex];
+
 								return (
 									label +
 									": " +
 									(this.costType === TYPES.CO2
-										? this.fmtCo2Long(raw)
-										: this.fmtPricePerKWh(raw, this.currency))
+										? this.fmtCo2Long(d)
+										: this.fmtPricePerKWh(d, this.currency))
 								);
 							},
 							labelColor: tooltipLabelColor(true),
 						},
-					},
+					} as any,
 				},
 				scales: {
 					r: {
 						suggestedMin: 0,
 						suggestedMax: this.suggestedMax,
 						beginAtZero: false,
 						ticks: {
-							color: colors.muted,
-							backdropColor: colors.background,
+							color: colors.muted || "",
+							backdropColor: colors.background || "",
 							font: { size: 10 },
 							callback: this.formatValue,
 							maxTicksLimit: 6,
 						},
 						angleLines: { display: false },
-						grid: { color: colors.border },
-					},
+						grid: { color: colors.border || "" },
+					} as any,
 				},
 			};
 		},
 	},
 	methods: {
-		formatValue(value) {
+		formatValue(value: number) {
 			return this.costType === TYPES.CO2
 				? this.fmtCo2Medium(value)
 				: this.fmtPricePerKWh(value, this.currency);
 		},
 	},
-};
+});
 </script>

assets/js/components/Sessions/CostGroupedChart.vue

@@ -9,42 +9,55 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import { Doughnut } from "vue-chartjs";
-import { DoughnutController, ArcElement, LinearScale, Legend, Tooltip } from "chart.js";
+import {
+	DoughnutController,
+	ArcElement,
+	LinearScale,
+	Legend,
+	Tooltip,
+	type TooltipItem,
+} from "chart.js";
 import LegendList from "./LegendList.vue";
 import { registerChartComponents, commonOptions, tooltipLabelColor } from "./chartConfig";
 import formatter from "@/mixins/formatter";
 import colors from "@/colors";
-import { TYPES, GROUPS } from "./types";
+import { TYPES, GROUPS, type Session } from "./types";
+import { defineComponent, type PropType } from "vue";
+import { CURRENCY } from "@/types/evcc";
 
 registerChartComponents([DoughnutController, ArcElement, LinearScale, Legend, Tooltip]);
 
-export default {
+export default defineComponent({
 	name: "CostGroupedChart",
 	components: { Doughnut, LegendList },
 	mixins: [formatter],
 	props: {
-		sessions: { type: Array, default: () => [] },
-		groupBy: { type: String, default: GROUPS.LOADPOINT },
+		sessions: { type: Array as PropType<Session[]>, default: () => [] },
+		groupBy: {
+			type: String as PropType<Exclude<GROUPS, GROUPS.NONE>>,
+			default: GROUPS.LOADPOINT,
+		},
 		colorMappings: { type: Object, default: () => ({ loadpoint: {}, vehicle: {} }) },
-		currency: { type: String, default: "EUR" },
-		costType: { type: String, default: TYPES.PRICE },
+		currency: { type: String as PropType<CURRENCY>, default: CURRENCY.EUR },
+		costType: { type: String as PropType<TYPES>, default: TYPES.PRICE },
 	},
 	computed: {
 		chartData() {
 			console.log(`update ${this.costType} grouped data`);
-			const aggregatedData = {};
+			const aggregatedData: Record<string, number> = {};
 
 			this.sessions.forEach((session) => {
 				const groupKey = session[this.groupBy];
 				if (!aggregatedData[groupKey]) {
 					aggregatedData[groupKey] = 0;
 				}
 				if (this.costType === TYPES.PRICE) {
-					aggregatedData[groupKey] += session.price;
+					aggregatedData[groupKey] += session.price || 0;
 				} else if (this.costType === TYPES.CO2) {
-					aggregatedData[groupKey] += session.co2PerKWh * session.chargedEnergy;
+					aggregatedData[groupKey] +=
+						(session.co2PerKWh || 0) * (session.chargedEnergy || 0);
 				}
 			});
 
@@ -60,7 +73,7 @@ export default {
 		},
 		legends() {
 			const total = this.chartData.datasets[0].data.reduce((acc, curr) => acc + curr, 0);
-			const fmtShare = (value) => this.fmtPercentage((100 / total) * value, 1);
+			const fmtShare = (value: number) => this.fmtPercentage((100 / total) * value, 1);
 			return this.chartData.labels.map((label, index) => ({
 				label: label,
 				color: this.chartData.datasets[0].backgroundColor[index],
@@ -76,9 +89,9 @@ export default {
 				locale: this.$i18n?.locale,
 				aspectRatio: 1,
 				borderRadius: 10,
-				color: colors.text,
+				color: colors.text || "",
 				borderWidth: 3,
-				borderColor: colors.background,
+				borderColor: colors.background || "",
 				cutout: "70%",
 				radius: "95%",
 				animation: { duration: 250 },
@@ -89,21 +102,24 @@ export default {
 						axis: "r",
 						position: "center",
 						callbacks: {
-							label: (tooltipItem) => this.formatValue(tooltipItem.raw || 0),
+							label: (tooltipItem: TooltipItem<"doughnut">) =>
+								this.formatValue(
+									tooltipItem.dataset.data[tooltipItem.dataIndex] || 0
+								),
 							labelColor: tooltipLabelColor(false),
 						},
 					},
 				},
-			};
+			} as any;
 		},
 	},
 	methods: {
-		formatValue(value) {
+		formatValue(value: number) {
 			if (this.costType === TYPES.PRICE) {
 				return this.fmtMoney(value, this.currency, true, true);
 			}
 			return this.fmtGrams(value);
 		},
 	},
-};
+});
 </script>