Improve forecast view

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();

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",

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",

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,25 +233,65 @@ 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: {
  datalabels: {
  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>