refactor

evcc-io · Oct 4, 2024 · a443a51 · a443a51
1 parent 229894b
commit a443a51
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 117 deletions.
diff --git a/assets/js/components/Sessions/EnergyGroupedChart.vue b/assets/js/components/Sessions/EnergyGroupedChart.vue
@@ -11,28 +11,13 @@
 
 <script>
 import { Doughnut } from "vue-chartjs";
-import { Chart, DoughnutController, ArcElement, LinearScale, Legend, Tooltip } from "chart.js";
-import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import { DoughnutController, ArcElement, LinearScale, Legend, Tooltip } from "chart.js";
 import LegendList from "./LegendList.vue";
+import { registerChartComponents, commonOptions } from "./chartConfig";
+import formatter, { POWER_UNIT } from "../../mixins/formatter";
 import colors from "../../colors";
 
-Chart.register(DoughnutController, ArcElement, LinearScale, Legend, Tooltip);
-Chart.defaults.font.family = window
-	.getComputedStyle(document.documentElement)
-	.getPropertyValue("--bs-font-sans-serif");
-
-Chart.defaults.font.size = 14;
-Chart.defaults.layout.padding = 0;
-
-Tooltip.positioners.center = function () {
-	const { chart } = this;
-	return {
-		x: chart.width / 2,
-		y: chart.height / 2,
-		xAlign: "center",
-		yAlign: "center",
-	};
-};
+registerChartComponents([DoughnutController, ArcElement, LinearScale, Legend, Tooltip]);
 
 export default {
 	name: "EnergyAggregateChart",
@@ -95,40 +80,31 @@ export default {
 		},
 		options() {
 			return {
+				...commonOptions,
 				locale: this.$i18n?.locale,
-				responsive: true,
 				aspectRatio: 1,
-				maintainAspectRatio: false,
 				borderRadius: 10,
 				color: colors.text,
+				borderWidth: 3,
+				borderColor: colors.background,
+				cutout: "70%",
+				radius: "95%",
+				animation: { duration: 250 },
 				plugins: {
-					legend: {
-						display: false,
-					},
+					...commonOptions.plugins,
 					tooltip: {
+						...commonOptions.plugins.tooltip,
 						mode: "index",
 						position: "center",
 						intersect: false,
-						boxPadding: 5,
-						usePointStyle: true,
-						borderWidth: 0.00001,
-						labelPointStyle: "circle",
 						callbacks: {
 							label: (tooltipItem) => {
 								const value = tooltipItem.raw || 0;
 								return this.fmtWh(value * 1e3, POWER_UNIT.AUTO);
 							},
 						},
-						backgroundColor: "#000",
 					},
 				},
-				borderWidth: 3,
-				borderColor: colors.background,
-				cutout: "70%",
-				radius: "95%",
-				animation: {
-					duration: 250,
-				},
 			};
 		},
 	},

diff --git a/assets/js/components/Sessions/EnergyHistoryChart.vue b/assets/js/components/Sessions/EnergyHistoryChart.vue
@@ -9,25 +9,13 @@
 
 <script>
 import { Bar } from "vue-chartjs";
-import {
-	Chart,
-	BarController,
-	BarElement,
-	CategoryScale,
-	LinearScale,
-	Legend,
-	Tooltip,
-} from "chart.js";
+import { BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip } from "chart.js";
+import { registerChartComponents, commonOptions } from "./chartConfig";
+import LegendList from "./LegendList.vue";
 import formatter, { POWER_UNIT } from "../../mixins/formatter";
-import LegendList from "./LegendList.vue"; // Import the new component
 import colors from "../../colors";
 
-Chart.register(BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip);
-Chart.defaults.font.family = window
-	.getComputedStyle(document.documentElement)
-	.getPropertyValue("--bs-font-sans-serif");
-Chart.defaults.font.size = 14;
-Chart.defaults.layout.padding = 0;
+registerChartComponents([BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip]);
 
 const GROUPS = {
 	SOLAR: "solar",
@@ -165,39 +153,29 @@ export default {
 		},
 		options() {
 			return {
+				...commonOptions,
 				locale: this.$i18n?.locale,
-				responsive: true,
-				maintainAspectRatio: false,
 				color: colors.text,
 				borderSkipped: false,
 				maxBarThickness: 40,
+				animation: false,
 				plugins: {
-					legend: {
-						display: false,
-					},
+					...commonOptions.plugins,
 					tooltip: {
+						...commonOptions.plugins.tooltip,
 						mode: "index",
 						intersect: false,
-						boxPadding: 5,
 						positioner: (context) => {
-							const tooltip = context.chart.tooltip;
-							const tooltipHeight = tooltip.height;
-							const tooltipWidth = tooltip.width;
-							const windowWidth = window.innerWidth;
-							const windowHeight = window.innerHeight;
-							const tooltipX = context.tooltipPosition().x;
-							const tooltipY = context.tooltipPosition().y;
-							const position = {
-								x:
-									tooltipX + tooltipWidth > windowWidth
-										? windowWidth - tooltipWidth
-										: tooltipX,
-								y:
-									tooltipY + tooltipHeight > windowHeight
-										? windowHeight - tooltipHeight
-										: tooltipY,
+							const { chart, tooltipPosition } = context;
+							const { tooltip } = chart;
+							const { width, height } = tooltip;
+							const { x, y } = tooltipPosition();
+							const { innerWidth, innerHeight } = window;
+
+							return {
+								x: Math.min(x, innerWidth - width),
+								y: Math.min(y, innerHeight - height),
 							};
-							return position;
 						},
 						callbacks: {
 							title: (tooltipItem) => {
@@ -223,7 +201,6 @@ export default {
 								return !item.raw ? colors.muted : "#fff";
 							},
 						},
-						backgroundColor: "#000",
 						itemSort: function (a, b) {
 							return b.datasetIndex - a.datasetIndex;
 						},
@@ -255,7 +232,6 @@ export default {
 						position: "right",
 					},
 				},
-				animation: false,
 			};
 		},
 	},

diff --git a/assets/js/components/Sessions/SolarGroupedChart.vue b/assets/js/components/Sessions/SolarGroupedChart.vue
@@ -11,18 +11,13 @@
 
 <script>
 import { PolarArea } from "vue-chartjs";
-import { Chart, RadialLinearScale, ArcElement, Legend, Tooltip } from "chart.js";
+import { RadialLinearScale, ArcElement, Legend, Tooltip } from "chart.js";
+import { registerChartComponents, commonOptions } from "./chartConfig";
 import formatter from "../../mixins/formatter";
 import colors, { dimColor } from "../../colors";
 import LegendList from "./LegendList.vue";
 
-Chart.register(RadialLinearScale, ArcElement, Legend, Tooltip);
-Chart.defaults.font.family = window
-	.getComputedStyle(document.documentElement)
-	.getPropertyValue("--bs-font-sans-serif");
-
-Chart.defaults.font.size = 14;
-Chart.defaults.layout.padding = 0;
+registerChartComponents([RadialLinearScale, ArcElement, Legend, Tooltip]);
 
 export default {
 	name: "SolarGroupedChart",
@@ -86,17 +81,36 @@ export default {
 		},
 		options() {
 			return {
+				...commonOptions,
 				locale: this.$i18n?.locale,
-				responsive: true,
 				aspectRatio: 1,
-				maintainAspectRatio: false,
 				borderRadius: 8,
 				borderWidth: 3,
 				color: colors.text,
 				spacing: 0,
+				radius: "100%",
 				plugins: {
-					legend: { display: false },
-					tooltip: { enabled: false },
+					...commonOptions.plugins,
+					tooltip: {
+						...commonOptions.plugins.tooltip,
+						intersect: false,
+						mode: "index",
+						position: "topBottomCenter",
+						labelPointStyle: "circle",
+						callbacks: {
+							title: () => null,
+							label: (tooltipItem) => {
+								const { label, raw = 0 } = tooltipItem;
+								return label + ": " + this.fmtPercentage(raw, 1);
+							},
+							labelColor: (item) => {
+								const { borderColor } = item.element.options;
+								return {
+									backgroundColor: borderColor,
+								};
+							},
+						},
+					},
 				},
 				scales: {
 					r: {
@@ -110,7 +124,6 @@ export default {
 						grid: { color: colors.border },
 					},
 				},
-				radius: "100%",
 			};
 		},
 	},

diff --git a/assets/js/components/Sessions/SolarYearChart.vue b/assets/js/components/Sessions/SolarYearChart.vue
@@ -19,28 +19,13 @@
 
 <script>
 import { Radar } from "vue-chartjs";
-import { Chart, RadialLinearScale, PointElement, LineElement, Filler, Tooltip } from "chart.js";
+import { RadialLinearScale, PointElement, LineElement, Filler, Tooltip } from "chart.js";
+import { registerChartComponents, commonOptions } from "./chartConfig";
 import formatter from "../../mixins/formatter";
 import colors, { dimColor } from "../../colors";
 import LegendList from "./LegendList.vue";
 
-Chart.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip);
-Chart.defaults.font.family = window
-	.getComputedStyle(document.documentElement)
-	.getPropertyValue("--bs-font-sans-serif");
-
-Chart.defaults.font.size = 14;
-Chart.defaults.layout.padding = 0;
-
-Tooltip.positioners.topCenter = function () {
-	const { chart } = this;
-	return {
-		x: chart.width / 2,
-		y: chart.height / 10,
-		xAlign: "center",
-		yAlign: "center",
-	};
-};
+registerChartComponents([RadialLinearScale, PointElement, LineElement, Filler, Tooltip]);
 
 export default {
 	name: "SolarYearChart",
@@ -158,23 +143,21 @@ export default {
 		},
 		options() {
 			return {
+				...commonOptions,
 				locale: this.$i18n?.locale,
-				responsive: true,
 				aspectRatio: 1,
-				maintainAspectRatio: false,
 				borderWidth: 4,
 				color: colors.text,
 				spacing: 0,
+				radius: "100%",
 				elements: { line: { tension: 0.05 } },
 				plugins: {
-					legend: { display: false },
+					...commonOptions.plugins,
 					tooltip: {
+						...commonOptions.plugins.tooltip,
 						intersect: false,
 						mode: "index",
-						position: "topCenter",
-						boxPadding: 5,
-						usePointStyle: true,
-						borderWidth: 0.00001,
+						position: "topBottomCenter",
 						labelPointStyle: "circle",
 						callbacks: {
 							label: (tooltipItem) => {
@@ -189,7 +172,6 @@ export default {
 								};
 							},
 						},
-						backgroundColor: "#000",
 					},
 				},
 				scales: {
@@ -208,7 +190,6 @@ export default {
 						grid: { color: colors.border },
 					},
 				},
-				radius: "100%",
 			};
 		},
 	},

diff --git a/assets/js/components/Sessions/chartConfig.js b/assets/js/components/Sessions/chartConfig.js
@@ -0,0 +1,53 @@
+import { Chart, Tooltip } from "chart.js";
+
+// Register common components
+export function registerChartComponents(components) {
+  Chart.register(...components);
+}
+
+// Set default configurations immediately
+Chart.defaults.font.family = window
+  .getComputedStyle(document.documentElement)
+  .getPropertyValue("--bs-font-sans-serif");
+Chart.defaults.font.size = 14;
+Chart.defaults.layout.padding = 0;
+
+// Custom tooltip positioners
+Tooltip.positioners.center = function () {
+  const { chart } = this;
+  return {
+    x: chart.width / 2,
+    y: chart.height / 2,
+    xAlign: "center",
+    yAlign: "center",
+  };
+};
+
+Tooltip.positioners.topBottomCenter = function (context, eventPosition) {
+  const { chart } = this;
+  const { height, width } = chart;
+
+  const isTop = eventPosition.y > height / 2;
+  const yPadding = height / 5;
+  const y = isTop ? yPadding : height - yPadding;
+  const x = width / 2;
+
+  return { x, y, xAlign: "center", yAlign: "center" };
+};
+
+export const commonOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  plugins: {
+    legend: {
+      display: false,
+    },
+    tooltip: {
+      backgroundColor: "#000000cc",
+      boxPadding: 5,
+      usePointStyle: true,
+      borderWidth: 0.00001,
+      labelPointStyle: "circle",
+    },
+  },
+};