@@ -104,11 +107,20 @@ const refreshSoc = () => {
message: 'SoC Update angefordert.',
});
};
+
+const vehicleColor = computed(() => {
+ return mqttStore.vehicleColor(props.vehicleId);
+});
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
index c01cb4cdc1..290b6a0789 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/dailyTotals/DailyTotals.vue
@@ -35,7 +35,7 @@
@@ -65,8 +69,10 @@
:rowExpanded="expanded[item.id]"
:secondaryComponentsConfigured="
item.id === 'chargepoint'
- ? individualChargePointData.length > 0
- : false
+ ? individualChargePointData.length > 1
+ : item.id === 'battery'
+ ? individualBatteryData.length > 1
+ : false
"
:componentNameVisible="componentNameVisible"
:currentPowerVisible="currentPowerVisible"
@@ -112,30 +118,58 @@
+
@@ -159,7 +193,7 @@ import type { DailyTotalsItem } from 'src/components/models/daily-totals-model';
const $q = useQuasar();
const mqttStore = useMqttStore();
-const gridPower = computed(() => mqttStore.getCounterPower('value'));
+const gridPower = computed(() => mqttStore.counterPower('value'));
const showGrid = computed(
() => gridPower.value !== undefined || secondaryCountersConfigured.value,
);
@@ -170,15 +204,15 @@ const expanded = ref
-
-
-
+
+
+
+
+
+ Geladen:
+ Entladen:
+
+
+
+
+ {{ chargePointData.today.imported }}
+
+
+ {{ chargePointData.today.exported }}
+
+
+
+
+
+
+
+
Geladen:
Entladen:
-
-
-
- {{ chargePointData.today.imported }}
-
-
- {{ chargePointData.today.exported }}
-
-
- {{ batteryData.today?.imported }}
+ {{ batteryData.today?.exported }}
+
+
+
- ![]()
+
-
+
{{ props.item.title }}
{{ props.item.title }}
@@ -88,6 +93,13 @@
import { computed } from 'vue';
import { useMqttStore } from 'src/stores/mqtt-store';
import type { DailyTotalsItem } from 'src/components/models/daily-totals-model';
+import BatteryIcon from 'src/assets/icons/owbBattery_2.svg?component';
+import GridIcon from 'src/assets/icons/owbGrid.svg?component';
+import PvIcon from 'src/assets/icons/owbPV.svg?component';
+import HouseIcon from 'src/assets/icons/owbHouse.svg?component';
+import VehicleIcon from 'src/assets/icons/owbVehicle.svg?component';
+import ChargePointIcon from 'src/assets/icons/owbChargePoint_2.svg?component';
+import CounterIcon from 'src/assets/icons/owbCounter.svg?component';
const mqttStore = useMqttStore();
@@ -107,7 +119,7 @@ const arrowDirection = (id: string) => {
let value = 0;
switch (id) {
case 'grid':
- value = mqttStore.getCounterPower('value') as number;
+ value = mqttStore.counterPower('value') as number;
break;
case 'battery':
value = mqttStore.batteryTotalPower('value') as number;
@@ -116,7 +128,7 @@ const arrowDirection = (id: string) => {
value = mqttStore.getPvPower('value') as number;
break;
case 'house':
- value = mqttStore.getHomePower('value') as number;
+ value = mqttStore.homePower('value') as number;
break;
case 'chargepoint':
value = mqttStore.chargePointSumPower('value') as number;
@@ -124,7 +136,7 @@ const arrowDirection = (id: string) => {
default:
if (id.startsWith('counter-')) {
const counterId = Number(id.replace('counter-', ''));
- value = mqttStore.getCounterPower('value', counterId) as number;
+ value = mqttStore.counterPower('value', counterId) as number;
}
}
const noCurrent = value === 0;
@@ -135,6 +147,16 @@ const arrowDirection = (id: string) => {
return { noCurrent, rotate180 };
};
+
+const iconMap = {
+ grid: GridIcon,
+ battery: BatteryIcon,
+ chargepoint: ChargePointIcon,
+ vehicle: VehicleIcon,
+ pv: PvIcon,
+ house: HouseIcon,
+ counter: CounterIcon,
+};
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
index b0fafafd55..0ec7f704d7 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/energy-flow-chart-models.ts
@@ -1,3 +1,5 @@
+import { Component } from 'vue';
+
export interface SvgSize {
xMin: number;
xMax: number;
@@ -31,5 +33,6 @@ export interface FlowComponent {
label: string[];
powerValue?: number;
soc?: number;
- icon: string;
+ iconComponent?: Component;
+ iconColor?: string;
}
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
index 8d4fbb40b6..84edab3c2a 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChart.vue
@@ -101,12 +101,16 @@ const selectedData = computed((): GraphDataPoint[] => {
});
const chargePointIds = computed(() => mqttStore.chargePointIds);
+const gridId = computed(() => mqttStore.gridId);
+const pvColor = computed(() => mqttStore.pvAggregateColor);
+const batteryColor = computed(() => mqttStore.batteryAggregateColor);
+
const chargePointNames = computed(() => mqttStore.chargePointName);
const gridMeterName = computed(() => {
- const gridId = mqttStore.getGridId;
+ const gridId = mqttStore.gridId;
if (gridId !== undefined) {
- return mqttStore.getComponentName(gridId);
+ return mqttStore.componentName(gridId);
}
return 'Zähler';
});
@@ -126,15 +130,27 @@ const getGlobalColor = (name: string, fallback?: string) => {
return fromRoot || fallback;
};
+const hexColorToRgba = (hex: string, opacity = 1) => {
+ hex = hex.replace('#', '');
+ const num = parseInt(hex, 16);
+ const r = (num >> 16) & 255;
+ const g = (num >> 8) & 255;
+ const b = num & 255;
+ return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+
const secondaryCounterDatasets = computed(() =>
- mqttStore.getSecondaryCounterIds
+ mqttStore.secondaryCounterIds
.map((id) => {
+ const baseColor =
+ mqttStore.secondaryCounterColor(id) ||
+ getGlobalColor('--q-secondary-counter-stroke');
return {
- label: mqttStore.getComponentName(id),
+ label: mqttStore.componentName(id),
category: 'component',
unit: 'kW',
- borderColor: getGlobalColor('--q-secondary-counter-stroke'),
- backgroundColor: getGlobalColor('--q-secondary-counter-fill'),
+ borderColor: baseColor,
+ backgroundColor: hexColorToRgba(baseColor, 0.1),
data: selectedData.value.map(
(item) =>
({
@@ -154,26 +170,32 @@ const secondaryCounterDatasets = computed(() =>
);
const chargePointDatasets = computed(() =>
- chargePointIds.value.map((cpId) => ({
- label: `${chargePointNames.value(cpId)}`,
- category: 'chargepoint',
- unit: 'kW',
- borderColor: getGlobalColor('--q-charge-point-stroke'),
- backgroundColor: getGlobalColor('--q-charge-point-fill'),
- data: selectedData.value.map(
- (item) =>
- ({
- x: item.timestamp * 1000,
- y: item[`cp${cpId}-power` as keyof GraphDataPoint] || 0,
- }) as Point,
- ),
- borderWidth: 2,
- pointRadius: 0,
- pointHoverRadius: 4,
- pointHitRadius: 5,
- fill: true,
- yAxisID: 'y',
- })),
+ chargePointIds.value.map((cpId) => {
+ const baseColor =
+ mqttStore.chargePointColor(cpId) ||
+ getGlobalColor('--q-charge-point-stroke');
+
+ return {
+ label: `${chargePointNames.value(cpId)}`,
+ category: 'chargepoint',
+ unit: 'kW',
+ borderColor: baseColor,
+ backgroundColor: hexColorToRgba(baseColor, 0.1),
+ data: selectedData.value.map(
+ (item) =>
+ ({
+ x: item.timestamp * 1000,
+ y: item[`cp${cpId}-power` as keyof GraphDataPoint] || 0,
+ }) as Point,
+ ),
+ borderWidth: 2,
+ pointRadius: 0,
+ pointHoverRadius: 4,
+ pointHitRadius: 5,
+ fill: true,
+ yAxisID: 'y',
+ };
+ }),
);
const vehicleDatasets = computed(() =>
@@ -181,11 +203,14 @@ const vehicleDatasets = computed(() =>
.map((vehicle) => {
const socKey = `ev${vehicle.id}-soc` as keyof GraphDataPoint;
if (selectedData.value.some((item) => socKey in item)) {
+ const baseColor =
+ mqttStore.vehicleColor(vehicle.id) ||
+ getGlobalColor('--q-vehicle-stroke');
return {
label: `${vehicle.name} SoC`,
category: 'vehicle',
unit: '%',
- borderColor: '#9F8AFF',
+ borderColor: baseColor,
borderWidth: 2,
borderDash: [10, 5],
pointRadius: 0,
@@ -239,12 +264,15 @@ const chartLabels = computed(() => {
const lineChartData = computed(() => {
let datasets = [];
if (gridMeterName.value !== undefined) {
+ const baseColor =
+ mqttStore.gridComponentColor(gridId.value) ||
+ getGlobalColor('--q-grid-stroke');
datasets.push({
label: gridMeterName.value,
category: 'component',
unit: 'kW',
- borderColor: getGlobalColor('--q-grid-stroke'),
- backgroundColor: getGlobalColor('--q-grid-fill'),
+ borderColor: baseColor,
+ backgroundColor: hexColorToRgba(baseColor, 0.1),
data: selectedData.value.map(
(item) =>
({
@@ -260,7 +288,7 @@ const lineChartData = computed(() => {
yAxisID: 'y',
});
}
- if (mqttStore.getHomePower('value') !== undefined) {
+ if (mqttStore.homePower('value') !== undefined) {
datasets.push({
label: 'Hausverbrauch',
category: 'component',
@@ -283,13 +311,16 @@ const lineChartData = computed(() => {
});
}
datasets.push(...secondaryCounterDatasets.value);
- if (mqttStore.getPvConfigured) {
+ if (mqttStore.pvConfigured) {
+ const baseColor =
+ pvColor.value ||
+ getGlobalColor('--q-pv-stroke');
datasets.push({
label: 'PV ges.',
category: 'component',
unit: 'kW',
- borderColor: getGlobalColor('--q-pv-stroke'),
- backgroundColor: getGlobalColor('--q-pv-fill'),
+ borderColor: baseColor,
+ backgroundColor: hexColorToRgba(baseColor, 0.1),
data: selectedData.value.map(
(item) =>
({
@@ -306,13 +337,16 @@ const lineChartData = computed(() => {
});
}
if (mqttStore.batteryConfigured) {
+ const baseColor =
+ batteryColor.value ||
+ getGlobalColor('--q-battery-stroke');
datasets.push(
{
label: 'Speicher ges.',
category: 'component',
unit: 'kW',
- borderColor: getGlobalColor('--q-battery-stroke'),
- backgroundColor: getGlobalColor('--q-battery-fill'),
+ borderColor: baseColor,
+ backgroundColor: hexColorToRgba(baseColor, 0.1),
data: selectedData.value.map(
(item) =>
({
diff --git a/packages/modules/web_themes/koala/source/src/components/models/daily-totals-model.ts b/packages/modules/web_themes/koala/source/src/components/models/daily-totals-model.ts
index a2d4738319..453ab96cb3 100644
--- a/packages/modules/web_themes/koala/source/src/components/models/daily-totals-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/models/daily-totals-model.ts
@@ -2,6 +2,7 @@ export interface DailyTotalsItem {
id: string;
title: string;
icon: string;
+ level: 'primary' | 'secondary';
soc?: number;
power?: string;
powerValue?: number;
@@ -14,4 +15,5 @@ export interface DailyTotalsItem {
rightLabel?: string;
rightValue?: string;
arrow?: string;
+ color?: string;
}
diff --git a/packages/modules/web_themes/koala/source/src/components/models/table-model.ts b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
index 411594f309..72b0195e0d 100644
--- a/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/models/table-model.ts
@@ -5,12 +5,14 @@ export type ColumnConfiguration = {
label: string;
align?: 'left' | 'right' | 'center';
expandField?: boolean;
+ autoWidth?: boolean;
+ shrink?: boolean;
};
export interface BodySlotProps {
key: string | number;
row: T;
- cols: QTableColumn[];
+ cols: ExtendedQTableColumn[];
expand: boolean;
}
@@ -27,6 +29,7 @@ export interface ChargePointRow extends Record {
current: string;
powerColumn: '';
charged: string;
+ color: string;
}
export interface VehicleRow extends Record {
@@ -37,4 +40,10 @@ export interface VehicleRow extends Record {
plugState: boolean;
chargeState: boolean;
vehicleSocValue: string;
+ color: string;
}
+
+export type ExtendedQTableColumn = QTableColumn & {
+ autoWidth?: boolean;
+ shrink?: boolean;
+};
diff --git a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
index 7dda260791..644611bb98 100644
--- a/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
+++ b/packages/modules/web_themes/koala/source/src/css/quasar.variables.scss
@@ -49,7 +49,9 @@ $battery-fill: #ba712833;
$battery-fill-flow-diagram: #c6a583;
$charge-point-stroke: #5c93d1;
$charge-point-fill: #5c93d14d;
+$vehicle-stroke: #9F8AFF;
$charge-plan-link-button: #6b757d;
+$diagram-icon: #717171;
// Light theme (default)
:root {
--q-primary: #{$primary};
@@ -79,7 +81,9 @@ $charge-plan-link-button: #6b757d;
--q-battery-fill-flow-diagram: #{$battery-fill-flow-diagram};
--q-charge-point-stroke: #{$charge-point-stroke};
--q-charge-point-fill: #{$charge-point-fill};
+ --q-vehicle-stroke: #{$vehicle-stroke};
--q-charge-plan-link-button: #{$charge-plan-link-button};
+ --q-diagram-icon: #{$diagram-icon};
// Main background
background-color: var(--q-background-1);
@@ -299,6 +303,7 @@ $dark-charge-plan-link-button: #75787a;
--q-battery-fill: #{$battery-fill};
--q-charge-point-stroke: #{$charge-point-stroke};
--q-charge-point-fill: #{$charge-point-fill};
+ --q-vehicle-stroke: #{$vehicle-stroke};
--q-battery-fill-flow-diagram: #{$battery-fill-flow-diagram};
--q-dark-daily-totals-grid-fill: #{$dark-daily-totals-grid-fill};
--q-dark-daily-totals-grid-stroke: #{$dark-daily-totals-grid-stroke};
@@ -308,6 +313,7 @@ $dark-charge-plan-link-button: #75787a;
--q-dark-daily-totals-house-fill: #{$dark-daily-totals-house-fill};
--q-dark-daily-totals-chargepoint-fill: #{$dark-daily-totals-chargepoint-fill};
--q-charge-plan-link-button: #{$dark-charge-plan-link-button};
+ --q-diagram-icon: #{$white};
// Main background
background-color: $dark-page;
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
index 015d773507..3810f16ccb 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store-model.ts
@@ -203,18 +203,7 @@ export interface GraphDataPoint {
[key: `ev${number}-soc`]: number | null;
}
-export interface BatteryConfiguration {
- name: string;
- info: {
- manufacturer: string;
- model: string;
- };
- type: string;
- id: number;
- configuration: object;
-}
-
-export interface CounterConfiguration {
+export interface ComponentConfiguration {
name: string;
info: {
manufacturer: string;
@@ -223,6 +212,7 @@ export interface CounterConfiguration {
type: string;
id: number;
configuration: object;
+ color: string;
}
export interface RangeValue {
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index 296fbe1688..c711b22807 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -19,8 +19,7 @@ import type {
ScheduledChargingPlan,
ChargePointConnectedVehicleSoc,
GraphDataPoint,
- BatteryConfiguration,
- CounterConfiguration,
+ ComponentConfiguration,
ThemeConfiguration,
VehicleActivePlan,
TimeChargingPlan,
@@ -645,7 +644,11 @@ export const useMqttStore = defineStore('mqtt', () => {
const path = objectPath.split('.');
for (let i = 0; i < path.length; i++) {
if (!Object.hasOwn(topicObject, path[i])) {
- console.error('path not found', topicObject, path[i]);
+ if (defaultValue !== undefined) {
+ console.debug('optional path not found', topicObject, path[i]);
+ } else {
+ console.error('path not found', topicObject, path[i]);
+ }
return defaultValue;
}
topicObject = topicObject[path[i]];
@@ -761,6 +764,20 @@ export const useMqttStore = defineStore('mqtt', () => {
);
});
+ /**
+ * Get component attributes
+ * @param componentId component ID
+ * @returns ComponentConfiguration | undefined
+ */
+ const getComponentConfiguration = computed(() => {
+ return (componentId: number): ComponentConfiguration | undefined => {
+ const configurations = getWildcardValues.value(
+ `openWB/system/device/+/component/${componentId}/config`,
+ ) as Record;
+ return Object.values(configurations)[0];
+ };
+ });
+
/**
* Check if user management is active
* Defaults to true if the value is not set as this may be due to insufficient permissions
@@ -1219,6 +1236,23 @@ export const useMqttStore = defineStore('mqtt', () => {
};
});
+ /**
+ * Get the charge point user defined color identified by the charge point id
+ * @param chargePointId charge point id
+ * @returns string | null
+ */
+ const chargePointColor = computed(() => {
+ return (chargePointId: number): string | null => {
+ const DEFAULT_COLOR = '#007bff';
+ const color = getValue.value(
+ `openWB/chargepoint/${chargePointId}/config`,
+ 'color',
+ null,
+ ) as string | null;
+ return resolveComponentColor(color, DEFAULT_COLOR);
+ };
+ });
+
/**
* trigger a force SOC update for the connected vehicle
* @param chargePointId charge point id
@@ -2648,7 +2682,7 @@ export const useMqttStore = defineStore('mqtt', () => {
return (batteryId: number): string | undefined => {
const configurations = getWildcardValues.value(
`openWB/system/device/+/component/${batteryId}/config`,
- ) as { [key: string]: BatteryConfiguration };
+ ) as { [key: string]: ComponentConfiguration };
if (Object.keys(configurations).length === 0) {
return undefined;
}
@@ -2873,6 +2907,32 @@ export const useMqttStore = defineStore('mqtt', () => {
});
};
+ /**
+ * Get the battery color if exactly one battery is configured
+ * @param batteryId battery id
+ * @returns string | null
+ */
+ const batteryAggregateColor = computed(() => {
+ const ids = batteryIds.value;
+ if (ids.length === 1) {
+ return batteryColor.value(ids[0]);
+ }
+ return null;
+ });
+
+ /**
+ * Get the battery color identified by the battery id
+ * @param batteryId battery id
+ * @returns string
+ */
+ const batteryColor = computed(() => {
+ return (batteryId: number): string => {
+ const DEFAULT_COLOR = '#ffc107';
+ const config = getComponentConfiguration.value(batteryId);
+ return resolveComponentColor(config?.color, DEFAULT_COLOR);
+ };
+ });
+
////////////////////////////// vehicle data ////////////////////////////////
/**
@@ -2929,6 +2989,23 @@ export const useMqttStore = defineStore('mqtt', () => {
};
});
+ /**
+ * Get the vehicle user defined color identified by the vehicle id
+ * @param vehicleId vehicle id
+ * @returns string | null
+ */
+ const vehicleColor = computed(() => {
+ return (vehicleId: number): string | null => {
+ const DEFAULT_COLOR = '#17a2b8';
+ const color = getValue.value(
+ `openWB/vehicle/${vehicleId}/color`,
+ undefined,
+ null,
+ ) as string | null;
+ return resolveComponentColor(color, DEFAULT_COLOR);
+ };
+ });
+
/**
* Get vehicle SoC value identified by the vehicle id
* @param vehicleId vehicle id
@@ -3658,7 +3735,7 @@ export const useMqttStore = defineStore('mqtt', () => {
* Get counter id from root of component hierarchy
* @returns number | undefined
*/
- const getGridId = computed(() => {
+ const gridId = computed(() => {
const hierarchy = getValue.value(
'openWB/counter/get/hierarchy',
) as Hierarchy[];
@@ -3698,34 +3775,60 @@ export const useMqttStore = defineStore('mqtt', () => {
* Get all secondary counter ids from all configured counters excluding the grid counter
* @returns number[]
*/
- const getSecondaryCounterIds = computed(() => {
- const rootCounter = getGridId.value;
+ const secondaryCounterIds = computed(() => {
+ const rootCounter = gridId.value;
return getAllCounterIds.value.filter((id) => id !== rootCounter);
});
+ /**
+ * Get the secondary counter color identified by the component ID
+ * @param componentId component ID
+ * @returns string | null
+ */
+ const secondaryCounterColor = computed(() => {
+ return (componentId: number) => {
+ const DEFAULT_COLOR = '#dc3545';
+ const color = getComponentConfiguration.value(componentId)?.color;
+ return resolveComponentColor(color, DEFAULT_COLOR);
+ };
+ });
+
/**
* Get the power meter(counter) name identified by the Grid ID
* @param counterId counter ID
* @returns string
*/
- const getComponentName = computed(() => {
+ const componentName = computed(() => {
return (componentId: number): string | undefined => {
const configurations = getWildcardValues.value(
`openWB/system/device/+/component/${componentId}/config`,
- ) as { [key: string]: CounterConfiguration };
+ ) as { [key: string]: ComponentConfiguration };
return Object.values(configurations)[0]?.name || undefined;
};
});
+ /**
+ * Get grid component color
+ * @param componentId component ID
+ * @returns GridConfiguration | null
+ */
+ const gridComponentColor = computed(() => {
+ return (componentId: number) => {
+ const DEFAULT_COLOR = '#dc3545';
+ const color = getComponentConfiguration.value(componentId)?.color;
+ return resolveComponentColor(color, DEFAULT_COLOR);
+ };
+ });
+
/**
* Get counter power identified by root grid counter in component hierarchy or counterId
* @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
* @param counterId counter ID
* @returns string | number | ValueObject | undefined
*/
- const getCounterPower = computed(() => {
+ const counterPower = computed(() => {
return (returnType: string = 'textValue', counterId?: number) => {
- const id = counterId ?? getGridId.value;
+ const id = counterId ?? gridId.value;
let power = undefined;
if (id !== undefined) {
power = getValue.value(`openWB/counter/${id}/get/power`) as
@@ -3751,7 +3854,7 @@ export const useMqttStore = defineStore('mqtt', () => {
*/
const counterDailyImported = computed(() => {
return (returnType: string = 'textValue', counterId?: number) => {
- const id = counterId ?? getGridId.value;
+ const id = counterId ?? gridId.value;
if (id === undefined) {
return '---';
}
@@ -3780,7 +3883,7 @@ export const useMqttStore = defineStore('mqtt', () => {
*/
const counterDailyExported = computed(() => {
return (returnType: string = 'textValue', counterId?: number) => {
- const id = counterId ?? getGridId.value;
+ const id = counterId ?? gridId.value;
if (id === undefined) {
return '---';
}
@@ -3808,7 +3911,7 @@ export const useMqttStore = defineStore('mqtt', () => {
* @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
* @returns string | number | ValueObject | undefined
*/
- const getHomePower = computed(() => {
+ const homePower = computed(() => {
return (returnType: string = 'textValue') => {
const power = getValue.value('openWB/counter/set/home_consumption') as
| number
@@ -3854,13 +3957,38 @@ export const useMqttStore = defineStore('mqtt', () => {
* Get pv configured true or false
* @returns boolean
*/
- const getPvConfigured = computed(() => {
+ const pvConfigured = computed(() => {
return (
(getValue.value('openWB/pv/config/configured', undefined) as boolean) ||
false
);
});
+ /**
+ * Get the pv color identified by the inverter id
+ * @param inverterId inverter id
+ * @returns string | null
+ */
+ const pvColor = computed(() => {
+ return (inverterId: number): string | null => {
+ const DEFAULT_COLOR = '#28a745';
+ const config = getComponentConfiguration.value(inverterId);
+ return resolveComponentColor(config?.color, DEFAULT_COLOR);
+ };
+ });
+
+ /**
+ * Get the pv color for the pv if exactly one inverter is configured
+ * @returns string | null
+ */
+ const pvAggregateColor = computed((): string | null => {
+ const ids = getObjectIds.value('inverter');
+ if (ids.length === 1) {
+ return pvColor.value(ids[0]);
+ }
+ return null;
+ });
+
/**
* Get pv power
* @param returnType type of return value, 'textValue', 'value', 'scaledValue', 'scaledUnit' or 'object'
@@ -3946,6 +4074,15 @@ export const useMqttStore = defineStore('mqtt', () => {
};
});
+ /* helpers */
+ const resolveComponentColor = (
+ color: string | null | undefined,
+ defaultColor: string,
+ ) => {
+ if (!color || color === defaultColor) return null;
+ return color;
+ };
+
// exports
return {
topics,
@@ -3990,6 +4127,7 @@ export const useMqttStore = defineStore('mqtt', () => {
chargePointChargingCurrent,
chargePointStateMessage,
chargePointFaultState,
+ chargePointColor,
chargePointFaultMessage,
temporaryChargeModeActive,
chargePointChargeType,
@@ -4031,6 +4169,7 @@ export const useMqttStore = defineStore('mqtt', () => {
vehicleInfo,
vehicleConnectionState,
vehicleSocType,
+ vehicleColor,
vehicleSocValue,
vehicleSocManualValue,
vehicleForceSocUpdate,
@@ -4090,19 +4229,24 @@ export const useMqttStore = defineStore('mqtt', () => {
batteryTotalPower,
batteryChargePriorityRange,
batteryMode,
+ batteryAggregateColor,
+ batteryColor,
// Grid data
- getGridId,
- getAllCounterIds,
- getSecondaryCounterIds,
- getComponentName,
- getCounterPower,
+ gridId,
+ secondaryCounterIds,
+ secondaryCounterColor,
+ componentName,
+ gridComponentColor,
+ counterPower,
counterDailyImported,
counterDailyExported,
// Home data
- getHomePower,
+ homePower,
homeDailyYield,
// PV data
- getPvConfigured,
+ pvConfigured,
+ pvAggregateColor,
+ pvColor,
getPvPower,
pvDailyExported,
// Chart data
diff --git a/packages/modules/web_themes/koala/source/src/types/svg.d.ts b/packages/modules/web_themes/koala/source/src/types/svg.d.ts
new file mode 100644
index 0000000000..fc4161d78b
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/types/svg.d.ts
@@ -0,0 +1,5 @@
+declare module '*.svg?component' {
+ import type { Component } from 'vue';
+ const component: Component;
+ export default component;
+}