add avg to cost history chart

evcc-io · Oct 11, 2024 · 2dbf38d · 2dbf38d
1 parent f21927b
commit 2dbf38d
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 34 deletions.
diff --git a/assets/js/colors.js b/assets/js/colors.js
@@ -13,8 +13,10 @@ const colors = reactive({
   border: null,
   self: null,
   grid: null,
-  price: null,
-  co2: null,
+  pricePerKWh: "#FFB900FF",
+  price: "#FF912FFF",
+  co2PerKWh: "#00C997FF",
+  co2: "#00916EFF",
   background: null,
   selfPalette: ["#0fde41ff", "#0ba631ff", "#076f20ff", "#054e18ff", "#043611ff", "#02230bff"],
   palette: [
@@ -40,8 +42,6 @@ function updateCssColors() {
   colors.border = style.getPropertyValue("--bs-border-color-translucent");
   colors.self = style.getPropertyValue("--evcc-self");
   colors.grid = style.getPropertyValue("--evcc-grid");
-  colors.price = style.getPropertyValue("--evcc-accent1");
-  colors.co2 = style.getPropertyValue("--evcc-accent2");
   colors.background = style.getPropertyValue("--evcc-background");
 }
 

diff --git a/assets/js/components/Sessions/CostHistoryChart.vue b/assets/js/components/Sessions/CostHistoryChart.vue
@@ -133,6 +133,7 @@ export default {
 						const { dataIndex, datasetIndex } = context;
 						const currentValue = context.dataset.data[dataIndex];
 						const previousValuesExist = context.chart.data.datasets
+							.filter((dataset) => dataset.type === "bar")
 							.slice(datasetIndex + 1)
 							.some((dataset) => (dataset?.data[dataIndex] || 0) > threshold);
 						return currentValue > threshold && !previousValuesExist
@@ -143,12 +144,23 @@ export default {
 			});
 
 			// add average price line
+			const costColor =
+				this.costType === COST_TYPES.PRICE ? colors.pricePerKWh : colors.co2PerKWh;
 			datasets.push({
 				type: "line",
-				backgroundColor: colors.primary,
-				label: this.$t("sessions.avgPrice"),
-				data: Object.values(result).map((index) => index.avgCost || 0),
+				label:
+					this.costType === COST_TYPES.PRICE
+						? this.pricePerKWhUnit(this.currency, false)
+						: "gCO₂e/kWh",
+				data: Object.values(result).map((index) => index.avgCost || null),
 				yAxisID: "y1",
+				tension: 0.25,
+				pointRadius: 0,
+				pointHoverRadius: 6,
+				borderColor: costColor,
+				backgroundColor: costColor,
+				borderWidth: 2,
+				spanGaps: true,
 			});
 
 			return {
@@ -158,11 +170,26 @@ export default {
 		},
 		legends() {
 			return this.chartData.datasets.map((dataset) => {
-				const total = dataset.data.reduce((acc, curr) => acc + curr, 0);
-				const value =
-					this.costType === COST_TYPES.PRICE
-						? this.fmtMoney(total, this.currency, true, true)
-						: this.fmtGrams(total);
+				let value = null;
+
+				// line chart handling
+				if (dataset.type === "line") {
+					const items = dataset.data.filter((v) => v !== null);
+					const min = Math.min(...items);
+					const max = Math.max(...items);
+					const format = (value, withUnit) => {
+						return this.costType === COST_TYPES.PRICE
+							? this.fmtPricePerKWh(value, this.currency, true, withUnit)
+							: this.fmtGrams(value, withUnit);
+					};
+					value = `${format(min, false)} – ${format(max, true)}`;
+				} else {
+					const total = dataset.data.reduce((acc, curr) => acc + curr, 0);
+					value =
+						this.costType === COST_TYPES.PRICE
+							? this.fmtMoney(total, this.currency, true, true)
+							: this.fmtGrams(total);
+				}
 				return {
 					label: dataset.label,
 					color: dataset.backgroundColor,
@@ -211,14 +238,28 @@ export default {
 							},
 							label: (tooltipItem) => {
 								const datasetLabel = tooltipItem.dataset.label || "";
-								const value = tooltipItem.raw || 0;
+								const value = tooltipItem.raw;
+
+								// line datasets have null values
+								if (tooltipItem.dataset.type === "line") {
+									if (value === null) {
+										return null;
+									}
+
+									return (
+										"⌀ " +
+										(this.costType === COST_TYPES.PRICE
+											? this.fmtPricePerKWh(value, this.currency, false)
+											: this.fmtCo2Medium(value))
+									);
+								}
 
 								return (
 									datasetLabel +
 									": " +
 									(this.costType === COST_TYPES.PRICE
-										? this.fmtMoney(value, this.currency, true, true)
-										: this.fmtGrams(value))
+										? this.fmtMoney(value || 0, this.currency, true, true)
+										: this.fmtGrams(value || 0))
 								);
 							},
 							labelColor: (item) => {
@@ -247,7 +288,7 @@ export default {
 					},
 					y: {
 						stacked: true,
-						position: "left",
+						position: "right",
 						border: { display: false },
 						grid: { color: colors.border },
 						title: {
@@ -256,32 +297,36 @@ export default {
 							color: colors.muted,
 						},
 						ticks: {
-							callback: (value, index) =>
-								index % 2 === 0
-									? this.costType === COST_TYPES.PRICE
-										? this.fmtMoney(value, this.currency, false, true)
-										: this.fmtNumber(value / 1e3, 0)
-									: null,
+							callback: (value) =>
+								this.costType === COST_TYPES.PRICE
+									? this.fmtMoney(value, this.currency, false, true)
+									: this.fmtNumber(value / 1e3, 0),
 							color: colors.muted,
+							maxTicksLimit: 6,
 						},
+						min: 0,
 					},
 					y1: {
-						position: "right",
+						position: "left",
 						border: { display: false },
 						grid: {
 							drawOnChartArea: false,
 						},
 						title: {
-							text: this.pricePerKWhUnit(this.currency, false),
-							display: this.costType === COST_TYPES.PRICE,
+							text:
+								this.costType === COST_TYPES.CO2
+									? "gCO₂e/kWh"
+									: this.pricePerKWhUnit(this.currency, false),
+							display: true,
 							color: colors.muted,
 						},
 						ticks: {
-							callback: (value, index) =>
+							callback: (value) =>
 								this.costType === COST_TYPES.PRICE
 									? this.fmtPricePerKWh(value, this.currency, false, false)
-									: this.fmtNumber(value / 1e3, 0),
+									: this.fmtNumber(value, 0),
 							color: colors.muted,
+							maxTicksLimit: 6,
 						},
 					},
 				},

diff --git a/assets/js/components/Sessions/EnergyHistoryChart.vue b/assets/js/components/Sessions/EnergyHistoryChart.vue
@@ -229,13 +229,12 @@ export default {
 							color: colors.muted,
 						},
 						ticks: {
-							callback: (value, index) =>
-								index % 2 === 0
-									? this.fmtWh(value * 1e3, POWER_UNIT.KW, false, 0)
-									: null,
+							callback: (value) => this.fmtWh(value * 1e3, POWER_UNIT.KW, false, 0),
 							color: colors.muted,
+							maxTicksLimit: 6,
 						},
 						position: "right",
+						min: 0,
 					},
 				},
 			};

diff --git a/assets/js/mixins/formatter.js b/assets/js/mixins/formatter.js
@@ -82,7 +82,7 @@ export default {
         maximumFractionDigits: decimals,
       }).format(number);
     },
-    fmtGrams: function (gramms) {
+    fmtGrams: function (gramms, withUnit = true) {
       // handle gram, kilogram, tonne
       let unit = "gram";
       let value = gramms;
@@ -94,7 +94,7 @@ export default {
         value = gramms / 1000;
       }
       return new Intl.NumberFormat(this.$i18n?.locale, {
-        style: "unit",
+        style: withUnit ? "unit" : "decimal",
         unit,
         minimumFractionDigits: 0,
         maximumFractionDigits: 0,

diff --git a/i18n/de.toml b/i18n/de.toml
@@ -645,7 +645,9 @@ allVehicles = "Alle Fahrzeuge"
 filter = "Filtern"
 
 [sessions.group]
+co2 = "Emissionen"
 grid = "Netz"
+price = "Preis"
 self = "Sonne"
 
 [sessions.period]

diff --git a/i18n/en.toml b/i18n/en.toml
@@ -642,7 +642,7 @@ allVehicles = "all vehicles"
 filter = "Filter"
 
 [sessions.group]
-co2 = "CO₂"
+co2 = "Emissions"
 grid = "Grid"
 price = "Price"
 self = "Solar"