Stefan/evcc-io
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Sessions UI: fix grouped chart layout and legend styling (#32338)

Browse source
This commit is contained in:
Michael Geers 2026-07-31 16:24:33 +02:00 • committed by GitHub
parent c68833c12b
commit de29e57930
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 22 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

3
assets/js/colors.ts
View file

@ -27,6 +27,7 @@ const colors: {
temperature: string | null;
export: string | null;
background: string | null;
box: string | null;
light: string | null;
selfPalette: string[];
palette: string[];
@ -44,6 +45,7 @@ const colors: {
temperature: null,
export: null,
background: null,
box: null,
light: null,
selfPalette: ["#0FDE41", "#FFBD2F", "#FD6158", "#03C1EF", "#0F662D", "#FF922E"],
palette: [
@ -152,6 +154,7 @@ export function updateCssColors() {
colors.temperature = style.getPropertyValue("--evcc-temperature");
colors.export = style.getPropertyValue("--evcc-export-contrast");
colors.background = style.getPropertyValue("--evcc-background");
colors.box = style.getPropertyValue("--evcc-box");
colors.pricePerKWh = style.getPropertyValue("--bs-gray-medium");
colors.co2PerKWh = style.getPropertyValue("--bs-gray-medium");
colors.light = style.getPropertyValue("--bs-gray-light");

6
assets/js/components/Sessions/AvgCostGroupedChart.vue
View file

@ -1,9 +1,9 @@
<template>
<div v-if="chartData.labels.length > 1" class="row">
<div class="col-12 col-md-6 mb-3">
<div class="col-12 col-md-6 col-lg-12 col-xxl-6 mb-3">
<PolarArea :data="chartData" :options="options" />
</div>
<div class="col-12 col-md-6 d-flex align-items-center py-0 py-md-3">
<div class="col-12 col-md-6 col-lg-12 col-xxl-6 d-flex align-items-center">
<LegendList :legends="legends" :device-colors="deviceColors" grid />
</div>
</div>
@ -130,7 +130,7 @@ export default defineComponent({
beginAtZero: false,
ticks: {
color: colors.muted || "",
backdropColor: colors.background || "",
backdropColor: colors.box || "",
font: { size: 10 },
callback: this.formatValue,
maxTicksLimit: 6,

6
assets/js/components/Sessions/CostGroupedChart.vue
View file

@ -1,9 +1,9 @@
<template>
<div v-if="chartData.labels.length > 1" class="row">
<div class="col-12 col-md-6 mb-3">
<div class="col-12 col-md-6 col-lg-12 col-xxl-6 mb-3">
<Doughnut :data="chartData" :options="options" />
</div>
<div class="col-12 col-md-6 d-flex align-items-center">
<div class="col-12 col-md-6 col-lg-12 col-xxl-6 d-flex align-items-center">
<LegendList :legends="legends" :device-colors="deviceColors" grid />
</div>
</div>
@ -94,7 +94,7 @@ export default defineComponent({
borderRadius: 10,
color: colors.text || "",
borderWidth: 3,
borderColor: colors.background || "",
borderColor: colors.box || "",
cutout: "70%",
radius: "95%",
animation: { duration: 250 },

6
assets/js/components/Sessions/EnergyGroupedChart.vue
View file

@ -1,9 +1,9 @@
<template>
<div v-if="chartData.labels.length > 1" class="row">
<div class="col-12 col-md-6 mb-3">
<div class="col-12 col-md-6 col-lg-12 col-xxl-6 mb-3">
<Doughnut :data="chartData" :options="options" />
</div>
<div class="col-12 col-md-6 d-flex align-items-center">
<div class="col-12 col-md-6 col-lg-12 col-xxl-6 d-flex align-items-center">
<LegendList :legends="legends" :device-colors="deviceColors" grid />
</div>
</div>
@ -107,7 +107,7 @@ export default defineComponent({
borderRadius: 10,
color: colors.text,
borderWidth: 3,
borderColor: colors.background,
borderColor: colors.box,
cutout: "70%",
radius: "95%",
animation: { duration: 250 },

4
assets/js/components/Sessions/LegendList.vue
View file

@ -1,6 +1,6 @@
<template>
<ul
class="root p-0 d-flex flex-wrap column-gap-4 row-gap-2"
class="root p-0 m-0 d-flex flex-wrap column-gap-4 row-gap-2"
:class="{
'root--small-equal-widths': smallEqualWidths,
'root--grid': grid,
@ -50,7 +50,7 @@
<div
v-for="value in valueList(legend.value)"
:key="value"
class="text-muted text-nowrap legend-value text-end"
class="text-muted text-nowrap legend-value text-end tabular"
>
{{ value }}
</div>

2
assets/js/components/Sessions/SessionTable.vue
View file

@ -174,7 +174,7 @@ const COLUMNS_PER_BREAKPOINT = {
sm: 3,
md: 4,
lg: 7,
xl: 8,
xl: 7,
xxl: 9,
};

6
assets/js/components/Sessions/SolarGroupedChart.vue
View file

@ -1,9 +1,9 @@
<template>
<div v-if="chartData.labels.length > 1" class="row">
<div class="col-12 col-md-6 mb-3">
<div class="col-12 col-md-6 col-lg-12 col-xxl-6 mb-3">
<PolarArea :data="chartData" :options="options" />
</div>
<div class="col-12 col-md-6 d-flex align-items-center py-0 py-md-3">
<div class="col-12 col-md-6 col-lg-12 col-xxl-6 d-flex align-items-center">
<LegendList :legends="legends" :device-colors="deviceColors" grid />
</div>
</div>
@ -123,7 +123,7 @@ export default defineComponent({
ticks: {
stepSize: 25,
color: colors.muted,
backdropColor: colors.background,
backdropColor: colors.box,
},
grid: { color: colors.border },
},

2
assets/js/components/Sessions/SolarYearChart.vue
View file

@ -180,7 +180,7 @@ export default defineComponent({
ticks: {
stepSize: 20,
color: colors.muted,
backdropColor: colors.background,
backdropColor: colors.box,
font: { size: 10 },
callback: (value: number) => this.fmtPercentage(value, 0),
},

6
assets/js/views/Sessions.vue
View file

@ -86,9 +86,9 @@
/>
</Card>
<div v-if="showExtraCharts">
<div class="row align-items-start">
<div class="row">
<div class="col-12 col-lg-6 mb-4">
<Card :title="firstExtraTitle" edge-to-edge>
<Card :title="firstExtraTitle" edge-to-edge class="h-100">
<div v-if="activeType === types.SOLAR">
<SolarYearChart
v-if="showSolarYearChart"
@ -116,7 +116,7 @@
</Card>
</div>
<div class="col-12 col-lg-6 mb-4">
<Card :title="secondExtraTitle" edge-to-edge>
<Card :title="secondExtraTitle" edge-to-edge class="h-100">
<EnergyGroupedChart
v-if="activeType === types.SOLAR"
:sessions="currentSessions"