From d7d2c7051e97d4e204c7cc320f2b861d9ee42937 Mon Sep 17 00:00:00 2001
From: Paul Frank <pail@gmx.net>
Date: Thu, 4 Jan 2024 16:03:28 +0000
Subject: [PATCH] Improve forecast view

---
 src/api/energyAssistant.api.ts |  9 +++++
 src/translations/de.json       |  2 +-
 src/translations/en.json       |  2 +-
 src/views/Forecast.vue         | 60 +++++++++++++++++++++++++++++-----
 4 files changed, 63 insertions(+), 10 deletions(-)

diff --git a/src/api/energyAssistant.api.ts b/src/api/energyAssistant.api.ts
index 0f8a894..a24be58 100644
--- a/src/api/energyAssistant.api.ts
+++ b/src/api/energyAssistant.api.ts
@@ -100,6 +100,10 @@ export interface ITuneForecastModel {
   model: string;
 }
 
+export interface IConfig {
+  config: object;
+}
+
 export class EnergyAssistantApi {
   private axiosInstance?: AxiosInstance;
   public baseUrl?: string;
@@ -235,6 +239,11 @@ export class EnergyAssistantApi {
       'forecast/tune_model',
     );
   }
+
+  public async getConfig() {
+    if (!this.axiosInstance) throw 'not initialized';
+    return (await this.axiosInstance.get<IConfig>('config')).data.config;
+  }
 }
 
 export const api = new EnergyAssistantApi();
diff --git a/src/translations/de.json b/src/translations/de.json
index 6336915..8a97fcf 100644
--- a/src/translations/de.json
+++ b/src/translations/de.json
@@ -49,7 +49,7 @@
     "total_cost": "Total Kosten",
     "total_profit": "Total Profit",
     "energy": "Energie",
-    "cost_profit": "Kosten oder Profit"
+    "cost_profit": "Kosten / Profit"
   },
   "power_mode": {
     "device_controlled": "Vom Gerät gesteuert",
diff --git a/src/translations/en.json b/src/translations/en.json
index 6d984fa..7998d05 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -49,7 +49,7 @@
     "total_cost": "Total cost",
     "total_profit": "Total profit",
     "energy": "Energy",
-    "cost_profit": "Cost or profit"
+    "cost_profit": "Cost / profit"
   },
   "power_mode": {
     "device_controlled": "Device controlled",
diff --git a/src/views/Forecast.vue b/src/views/Forecast.vue
index b1da1b3..531a7e1 100644
--- a/src/views/Forecast.vue
+++ b/src/views/Forecast.vue
@@ -18,7 +18,7 @@
         </v-card-title>
         <v-card-text>
           <div class="h-96">
-            <Line :data="data" :options="options" />
+            <Line :data="data" :options="optionsEnergyChart" />
           </div>
         </v-card-text>
       </v-card>
@@ -28,11 +28,10 @@
         </v-card-title>
         <v-card-text>
           <div class="h-96">
-            <Line :data="costProfitData" :options="options" />
+            <Line :data="costProfitData" :options="optionsCostProfitChart" />
           </div>
         </v-card-text>
       </v-card>
-
     </div>
   </div>
 </template>
@@ -58,12 +57,14 @@ import { color } from 'chart.js/helpers';
 import { Result } from 'postcss';
 import { $t } from '@/plugins/i18n';
 import { servicesVersion } from 'typescript';
+import { config } from 'process';
 
-//const { t } = useI18n();
 const theme = useTheme();
 
 const forecast = ref<IForecast>();
 
+const currency = ref('');
+
 const colors = [
   'red',
   'pink',
@@ -181,7 +182,7 @@ function getCostProfitDataSets(forecast: IForecast) {
       .map((serie) => {
         const color = 'blue';
         return {
-          label: 'Cost / Profit',
+          label: $t('forecast.cost_profit'),
           data: serie.data,
           fill: false,
           backgroundColor: color,
@@ -232,16 +233,28 @@ const costTotalProfitLabel = computed(() => {
 
   if (totalCostProfit) {
     if (totalCostProfit < 0) {
-      return $t('forecast.total_cost') + ': ' + -totalCostProfit.toFixed(2);
+      return (
+        $t('forecast.total_cost') +
+        ': ' +
+        -totalCostProfit.toFixed(2) +
+        ' ' +
+        currency.value
+      );
     } else {
-      return $t('forecast.total_profit') + ': ' + totalCostProfit.toFixed(2);
+      return (
+        $t('forecast.total_profit') +
+        ': ' +
+        totalCostProfit.toFixed(2) +
+        ' ' +
+        currency.value
+      );
     }
   } else {
     return 'unknown';
   }
 });
 
-const options = {
+const optionsEnergyChart = {
   responsive: true,
   maintainAspectRatio: false,
   plugins: {
@@ -249,8 +262,36 @@ const options = {
       display: false,
     },
   },
+  scales: {
+    y: {
+      title: {
+        display: true,
+        text: 'W',
+      },
+    },
+  },
 };
 
+const optionsCostProfitChart = computed(() => {
+  return {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      datalabels: {
+        display: false,
+      },
+    },
+    scales: {
+      y: {
+        title: {
+          display: true,
+          text: currency.value,
+        },
+      },
+    },
+  };
+});
+
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -263,5 +304,8 @@ ChartJS.register(
 
 onMounted(async () => {
   forecast.value = await api.getForecast();
+  const config = await api.getConfig();
+  currency.value = config.home_assistant.currency;
+  console.log(config.home_assistant);
 });
 </script>