From 73f8e2ff3dd5de2c079378239e2a7eacf3a3990f Mon Sep 17 00:00:00 2001 From: BrettS Date: Thu, 21 May 2026 08:26:40 +0200 Subject: [PATCH 01/37] Flow chart new design --- .../energyFlowChart/EnergyFlowChart.vue | 195 ++++++------------ .../source/src/css/quasar.variables.scss | 4 + 2 files changed, 67 insertions(+), 132 deletions(-) diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue index 2b3a63701f..e9a9e5666e 100644 --- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue +++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue @@ -339,7 +339,7 @@ const svgComponents = computed((): FlowComponent[] => { label: ['EVU', absoluteValueObject(gridPower.value).textValue], powerValue: Number(gridPower.value.value), iconComponent: GridIcon, - iconColor: gridId.value + iconColor: gridId.value !== undefined ? mqttStore.gridComponentColor(gridId.value) || 'var(--q-diagram-icon)' : 'var(--q-diagram-icon)', }); @@ -393,7 +393,7 @@ const svgComponents = computed((): FlowComponent[] => { powerValue: Number(batteryPower.value.value), soc: batterySoc.value, iconComponent: BatteryIcon, - iconColor: mqttStore.batteryAggregateColor || 'var(--q-diagram-icon)', + iconColor: 'var(--q-battery-stroke)', }); } @@ -738,6 +738,24 @@ const svgRectWidth = computed( :ry="svgSize.circleRadius" /> + + + + - - + + 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 77c35898d8..f75f033a9d 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 @@ -29,6 +29,7 @@ $positive: #66bd7a; $negative: #db4f5f; $info: #7dc5d4; $warning: #d98e44; +$background: #ffffff; $background-1: #e3e3ec; $background-2: #eeeef3; $brown-text: #524f57; @@ -61,6 +62,7 @@ $diagram-icon: #717171; --q-negative: #{$negative}; --q-info: #{$info}; --q-warning: #{$warning}; + --q-background: #{$background}; --q-background-1: #{$background-1}; --q-background-2: #{$background-2}; --q-brown-text: #{$brown-text}; @@ -259,6 +261,7 @@ $dark-positive: #3e8f5e; $dark-negative: #c54d57; $dark-info: #4b89aa; $dark-warning: #d98e44; +$dark-background: #242526; $dark-background-1: #242526; // app background $dark-background-2: #242526; // app background 2 $dark-list: #3a3b3c; // drawer, list background @@ -283,6 +286,7 @@ $dark-charge-plan-link-button: #75787a; --q-negative: #{$dark-negative}; --q-info: #{$dark-info}; --q-warning: #{$dark-warning}; + --q-background: #{$dark-background}; --q-background-1: #{$dark-background-1}; --q-background-2: #{$dark-background-2}; --q-white: #{$white}; From 79428209b74b892e1c19695d29ef982af6a533cd Mon Sep 17 00:00:00 2001 From: BrettS Date: Thu, 21 May 2026 10:44:46 +0200 Subject: [PATCH 02/37] DailyTotals new design --- .../charts/dailyTotals/DailyTotals.vue | 63 ++++--------------- .../koala/source/src/stores/mqtt-store.ts | 8 +-- 2 files changed, 15 insertions(+), 56 deletions(-) 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 8f45bc6cef..4c06ed4ab4 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 @@ -321,7 +321,7 @@ const individualBatteryData = computed((): DailyTotalsItem[] => { imported: mqttStore.batteryDailyImported(id, 'textValue') as string, exported: mqttStore.batteryDailyExported(id, 'textValue') as string, }, - color: mqttStore.batteryColor(id), + color: mqttStore.batteryColor(id) || undefined, }); } }); @@ -349,7 +349,7 @@ const componentData = computed((): DailyTotalsItem[] => { }, }; if (mqttStore.batteryIds.length === 1) { - item.color = mqttStore.batteryColor(mqttStore.batteryIds[0]); + item.color = mqttStore.batteryColor(mqttStore.batteryIds[0]) || undefined; } components.push(item); } @@ -493,6 +493,7 @@ watch( .scroll-container { width: 100%; max-height: 100%; + padding: 0 0.5rem 0.5rem 0.5rem; overflow-y: auto; /* show scrollbar when needed */ } /* Hide expansion item chevron */ @@ -519,60 +520,20 @@ watch( cursor: default !important; pointer-events: none; } -.card, -.grid { +.card { border-radius: 0.5rem; - margin-bottom: 0.125rem; + background: var(--q-background); + filter: drop-shadow(0 0 0.3rem var(--q-secondary)); + border: 0.125rem solid var(--q-primary); + margin-bottom: 0.25rem; } -.grid { - background: var(--q-grid-fill); - border: 0.125rem solid var(--q-grid-stroke); +.body--dark .card { + filter: drop-shadow(0 0 0.3rem var(--q-white)); } -.battery { - background: var(--q-battery-fill); - border: 0.125rem solid var(--q-battery-stroke); -} -.pv { - background: var(--q-pv-fill); - border: 0.125rem solid var(--q-pv-stroke); -} -.house { - background: var(--q-home-fill); - border: 0.125rem solid var(--q-home-stroke); -} -.chargepoint { - background: var(--q-charge-point-fill); - border: 0.125rem solid var(--q-charge-point-stroke); -} -.grid .sub-row { - background: var(--q-secondary-counter-fill); - border-top: 0.12rem solid var(--q-secondary-counter-stroke); -} -.battery .sub-row { - border-top: 0.12rem solid var(--q-battery-stroke); -} -.chargepoint .sub-row { - border-top: 0.12rem solid var(--q-charge-point-stroke); +.sub-row { + border-top: 0.12rem solid var(--q-primary); } .rotate-180 { transform: rotate(180deg); } -/* Dark mode overrides */ -.body--dark .grid { - background: var(--q-dark-daily-totals-grid-fill); - border: 0.125rem solid var(--q-dark-daily-totals-grid-stroke); -} -.body--dark .battery { - background: var(--q-dark-daily-totals-battery-fill); - border: 0.125rem solid var(--q-dark-daily-totals-battery-stroke); -} -.body--dark .pv { - background: var(--q-dark-daily-totals-pv-fill); -} -.body--dark .house { - background: var(--q-dark-daily-totals-house-fill); -} -.body--dark .chargepoint { - background: var(--q-dark-daily-totals-chargepoint-fill); -} 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 8d3e3f0b36..c898b4d2f2 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 @@ -2925,13 +2925,11 @@ export const useMqttStore = defineStore('mqtt', () => { * @param batteryId battery id * @returns string */ - const batteryColor = computed(() => { - return (batteryId: number): string => { + const batteryColor = computed(() => { + return (batteryId: number): string | null => { const DEFAULT_COLOR = '#ffc107'; const config = getComponentConfiguration.value(batteryId); - return ( - resolveComponentColor(config?.color, DEFAULT_COLOR) || DEFAULT_COLOR - ); + return resolveComponentColor(config?.color, DEFAULT_COLOR); }; }); From 2ced71d6e80292543d2317707056d6b97d96ed02 Mon Sep 17 00:00:00 2001 From: BrettS Date: Thu, 21 May 2026 10:49:10 +0200 Subject: [PATCH 03/37] fix battery color in flow diagram --- .../src/components/charts/energyFlowChart/EnergyFlowChart.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue index e9a9e5666e..d0ab0f83c0 100644 --- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue +++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue @@ -263,6 +263,7 @@ const chargePointSumCharging = computed( const gridId = computed(() => mqttStore.gridId); const pvColor = computed(() => mqttStore.pvAggregateColor); +const batteryColor = computed(() => mqttStore.batteryAggregateColor); ///////////////////// Set animation speed ////////////////////////// @@ -393,7 +394,7 @@ const svgComponents = computed((): FlowComponent[] => { powerValue: Number(batteryPower.value.value), soc: batterySoc.value, iconComponent: BatteryIcon, - iconColor: 'var(--q-battery-stroke)', + iconColor: batteryColor.value || 'var(--q-diagram-icon)', }); } @@ -1024,3 +1025,4 @@ use { } + From 98696ae5fdd911258a4bd1a90e1ce132238bc310 Mon Sep 17 00:00:00 2001 From: BrettS Date: Thu, 21 May 2026 12:15:14 +0200 Subject: [PATCH 04/37] History chart new design --- .../src/components/charts/historyChart/HistoryChart.vue | 3 +++ .../charts/historyChart/HistoryChartLegendStandard.vue | 6 +++++- 2 files changed, 8 insertions(+), 1 deletion(-) 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 3642f0f85e..dc23ec3606 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 @@ -471,6 +471,9 @@ const chartOptions = computed>(() => ({ height: 100%; display: flex; flex-direction: column; + background: var(--q-background); + border-radius: 15px; + filter: drop-shadow(0 0 0.3rem var(--q-secondary)); } .legend-wrapper { diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendStandard.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendStandard.vue index f3d96f0486..67b4ef1d95 100644 --- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendStandard.vue +++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendStandard.vue @@ -77,7 +77,11 @@ defineProps<{ padding-right: 4px !important; } -.body--dark .q-list { +/* The q-list has its own (grey) background that would otherwise paint over the + rounded white .chart-container behind it, making the legend look like it sits + outside the box. Keep it transparent in both themes so the container shows + through. */ +.q-list { background-color: transparent; } From 0b81aecd0e0353f17f05cf79f5ea960ec3391569 Mon Sep 17 00:00:00 2001 From: BrettS Date: Thu, 21 May 2026 14:02:57 +0200 Subject: [PATCH 05/37] Flow chart drop shadows for Safari --- .../energyFlowChart/EnergyFlowChart.vue | 46 +++++++++++++++---- 1 file changed, 38 insertions(+), 8 deletions(-) diff --git a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue index d0ab0f83c0..38c2fb6040 100644 --- a/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue +++ b/packages/modules/web_themes/koala/source/src/components/charts/energyFlowChart/EnergyFlowChart.vue @@ -1,6 +1,7 @@ + + diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue index 6b22449e2a..bf84c66e8c 100644 --- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue +++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue @@ -326,10 +326,11 @@ const chargePointColor = computed(() => .charge-point-card { width: 22em; border: none; + border-radius: 15px; } .charge-point-card.has-custom-color { - border-left: 4px solid v-bind(chargePointColor); + border-left: 3px solid v-bind(chargePointColor); } .q-card__section { diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue index bf64d4d966..888a1b1e09 100644 --- a/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue +++ b/packages/modules/web_themes/koala/source/src/components/ChargePointModeButtons.vue @@ -30,9 +30,10 @@ - + - +