From ae376003d2f5d60dd308ce12278da517d2653a1f Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 29 Jul 2025 17:33:05 +0200
Subject: [PATCH 1/4] History chart drop down categories for mobile and large
 legends

---
 .../charts/historyChart/HistoryChart.vue      |  45 +----
 .../historyChart/HistoryChartLegend.vue       | 168 +++++++++---------
 .../HistoryChartLegendCategoriesGroup.vue     |  47 +++++
 .../HistoryChartLegendCategory.vue            |  87 +++++++++
 .../HistoryChartLegendStandard.vue            |  83 +++++++++
 .../historyChart/history-chart-model.ts       |  10 +-
 6 files changed, 321 insertions(+), 119 deletions(-)
 create mode 100644 packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategory.vue
 create mode 100644 packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendStandard.vue

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 833a2db61a..0c47460a5a 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
@@ -9,7 +9,7 @@
       />
     </div>
     <HistoryChartLegend
-      v-if="legendDisplay && legendLarge"
+      v-if="legendDisplay"
       :chart="chartRef?.chart || null"
       class="legend-wrapper q-mt-sm"
     />
@@ -31,10 +31,6 @@ import {
   TimeScale,
   Tooltip,
   Filler,
-  ChartEvent,
-  LegendItem,
-  LegendElement,
-  ChartTypeRegistry,
   ChartDataset,
   ChartType,
 } from 'chart.js';
@@ -69,10 +65,6 @@ const props = defineProps<{
 
 const chartRef = ref<ChartComponentRef | null>(null);
 
-const legendLarge = computed(() =>
-  lineChartData?.value?.datasets.length > 15 ? true : false,
-);
-
 const applyHiddenDatasetsToChart = <TType extends ChartType, TData>(
   chart: Chart<TType, TData>,
 ): void => {
@@ -125,6 +117,7 @@ const chartRange = computed(
 const chargePointDatasets = computed(() =>
   chargePointIds.value.map((cpId) => ({
     label: `${chargePointNames.value(cpId)}`,
+    category: 'chargepoint',
     unit: 'kW',
     borderColor: '#4766b5',
     backgroundColor: 'rgba(71, 102, 181, 0.2)',
@@ -148,6 +141,7 @@ const vehicleDatasets = computed(() =>
       if (selectedData.value.some((item) => socKey in item)) {
         return {
           label: `${vehicle.name} SoC`,
+          category: 'vehicle',
           unit: '%',
           borderColor: '#9F8AFF',
           borderWidth: 2,
@@ -175,6 +169,7 @@ const lineChartData = computed(() => {
     datasets: [
       {
         label: gridMeterName.value,
+        category: 'component',
         unit: 'kW',
         borderColor: '#a33c42',
         backgroundColor: 'rgba(239,182,188, 0.2)',
@@ -191,6 +186,7 @@ const lineChartData = computed(() => {
       },
       {
         label: 'Hausverbrauch',
+        category: 'component',
         unit: 'kW',
         borderColor: '#949aa1',
         backgroundColor: 'rgba(148, 154, 161, 0.2)',
@@ -207,6 +203,7 @@ const lineChartData = computed(() => {
       },
       {
         label: 'PV ges.',
+        category: 'component',
         unit: 'kW',
         borderColor: 'green',
         backgroundColor: 'rgba(144, 238, 144, 0.2)',
@@ -223,6 +220,7 @@ const lineChartData = computed(() => {
       },
       {
         label: 'Speicher ges.',
+        category: 'component',
         unit: 'kW',
         borderColor: '#b5a647',
         backgroundColor: 'rgba(181, 166, 71, 0.2)',
@@ -239,6 +237,7 @@ const lineChartData = computed(() => {
       },
       {
         label: 'Speicher SoC',
+        category: 'component',
         unit: '%',
         borderColor: '#FFB96E',
         borderWidth: 2,
@@ -265,33 +264,7 @@ const chartOptions = computed<ChartOptions<'line'>>(() => ({
   animation: false,
   plugins: {
     legend: {
-      display: !legendLarge.value && legendDisplay.value,
-      fullSize: true,
-      align: 'center' as const,
-      position: 'bottom' as const,
-      labels: {
-        boxWidth: 19,
-        boxHeight: 0.1,
-      },
-      onClick: (
-        e: ChartEvent,
-        legendItem: LegendItem,
-        legend: LegendElement<keyof ChartTypeRegistry>,
-      ) => {
-        const index = legendItem.datasetIndex!;
-        const chartInstance = legend.chart;
-        const datasetName = legendItem.text;
-
-        // Toggle visibility using the store
-        localDataStore.toggleDataset(datasetName);
-
-        // Update chart visibility
-        if (localDataStore.isDatasetHidden(datasetName)) {
-          chartInstance.hide(index);
-        } else {
-          chartInstance.show(index);
-        }
-      },
+      display: false,
     },
     tooltip: {
       mode: 'index' as const,
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
index 393509c390..6bd5905384 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
@@ -1,40 +1,43 @@
 <template>
-  <q-scroll-area
-    v-if="chart"
-    :thumb-style="thumbStyle"
-    :bar-style="barStyle"
-    class="custom-legend-container"
-  >
-    <q-list dense class="q-pa-none">
-      <div class="row wrap q-pa-none items-center justify-center">
-        <q-item
-          v-for="(dataset, index) in legendItems"
-          :key="dataset.text || index"
-          clickable
-          dense
-          class="q-py-none"
-          :class="{ 'legend-item-hidden': dataset.hidden }"
-          @click="toggleDataset(dataset.text, dataset.datasetIndex)"
-        >
-          <q-item-section avatar class="q-pr-none">
-            <div
-              class="legend-color-box q-mr-sm"
-              :style="{ backgroundColor: getItemColor(dataset) }"
-            ></div>
-          </q-item-section>
-          <q-item-section>
-            <q-item-label class="text-caption">{{ dataset.text }}</q-item-label>
-          </q-item-section>
-        </q-item>
-      </div>
-    </q-list>
-  </q-scroll-area>
+  <!-- On smaller screens (<md) always show categories -->
+  <HistoryChartLegendCategoriesGroup
+    v-if="$q.screen.lt.md"
+    :categorizedLegendItems="categorizedLegendItems"
+    :toggleDataset="toggleDataset"
+    :getItemColor="getItemColor"
+    :getItemLineType="getItemLineType"
+  />
+
+  <!-- On larger screens: show standard legend if legend not large; otherwise show categories -->
+  <HistoryChartLegendStandard
+    v-else-if="chart && !$q.screen.lt.sm && !legendLarge"
+    :items="legendItems"
+    :toggleDataset="toggleDataset"
+    :getItemColor="getItemColor"
+    :getItemLineType="getItemLineType"
+  />
+
+  <HistoryChartLegendCategoriesGroup
+    v-else
+    :categorizedLegendItems="categorizedLegendItems"
+    :toggleDataset="toggleDataset"
+    :getItemColor="getItemColor"
+    :getItemLineType="getItemLineType"
+  />
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref, watch, computed, nextTick } from 'vue';
 import { useLocalDataStore } from 'src/stores/localData-store';
 import { Chart, LegendItem } from 'chart.js';
+import type { Category, CategorizedDataset } from './history-chart-model';
+import { useMqttStore } from 'src/stores/mqtt-store';
+import { useQuasar } from 'quasar';
+import HistoryChartLegendCategoriesGroup from './HistoryChartLegendCategoriesGroup.vue';
+import HistoryChartLegendStandard from './HistoryChartLegendStandard.vue';
+
+const mqttStore = useMqttStore();
+const $q = useQuasar();
 
 const props = defineProps<{
   chart: Chart | null;
@@ -43,28 +46,70 @@ const props = defineProps<{
 const localDataStore = useLocalDataStore();
 const legendItems = ref<LegendItem[]>([]);
 
+const legendLarge = computed(() => {
+  return legendItems.value.length > 10;
+});
+
 const updateLegendItems = () => {
   if (!props.chart) return;
   const items =
     props.chart.options.plugins?.legend?.labels?.generateLabels?.(
       props.chart,
     ) || [];
-
   items.forEach((item) => {
     if (item.text && localDataStore.isDatasetHidden(item.text)) {
       item.hidden = true;
     }
+    //  Inject the category from the dataset
+    const dataset = props.chart?.data.datasets[
+      item.datasetIndex!
+    ] as unknown as CategorizedDataset;
+    (item as LegendItem & { category?: Category }).category = dataset.category;
   });
   legendItems.value = items;
 };
 
-const getItemColor = (item: LegendItem) => {
-  if (!props.chart || item.datasetIndex === undefined) return '#ccc';
+const categorizedLegendItems = computed(() => {
+  const categories: Record<Category, LegendItem[]> = {
+    chargepoint: [],
+    vehicle: [],
+    battery: [],
+    component: [],
+  };
+  for (const item of legendItems.value) {
+    const category = (item as LegendItem & { category?: Category }).category;
+    if (category && categories[category]) {
+      categories[category].push(item);
+    } else {
+      categories.component.push(item);
+    }
+  }
+  // Sort each category's items alphabetically
+  Object.keys(categories).forEach((key) => {
+    categories[key as Category].sort((a, b) =>
+      (a.text || '').localeCompare(b.text || '', undefined, { numeric: true }),
+    );
+  });
+  return categories;
+});
 
+const getItemColor = (item: LegendItem): string => {
+  if (!props.chart || item.datasetIndex === undefined) return '#ccc';
   const dataset = props.chart.data.datasets[item.datasetIndex];
   return (dataset.borderColor as string) || '#ccc';
 };
 
+const getItemLineType = (item: LegendItem) => {
+  if (!props.chart || item.datasetIndex === undefined) return;
+  const dataset = props.chart.data.datasets[
+    item.datasetIndex
+  ] as unknown as CategorizedDataset;
+  const borderDash = dataset.borderDash;
+  return Array.isArray(borderDash) && borderDash.length > 0
+    ? 'dashed'
+    : 'solid';
+};
+
 const toggleDataset = (datasetName?: string, datasetIndex?: number) => {
   if (!props.chart || !datasetName || datasetIndex === undefined) return;
   localDataStore.toggleDataset(datasetName);
@@ -96,52 +141,11 @@ watch(
   { immediate: true },
 );
 
-const thumbStyle = {
-  borderRadius: '5px',
-  backgroundColor: 'var(--q-primary)',
-  width: '6px',
-  opacity: '1',
-};
-
-const barStyle = {
-  borderRadius: '5px',
-  backgroundColor: 'var(--q-secondary)',
-  width: '6px',
-  opacity: '1',
-};
+watch(
+  () => mqttStore.vehicleList,
+  async () => {
+    await nextTick();
+    updateLegendItems();
+  },
+);
 </script>
-
-<style scoped>
-.custom-legend-container {
-  margin-bottom: 5px;
-  height: 70px;
-  border-radius: 5px;
-  text-align: left;
-  width: 100%;
-}
-
-.legend-color-box {
-  display: inline-block;
-  width: 20px;
-  height: 3px;
-}
-
-.legend-item-hidden {
-  opacity: 0.6 !important;
-  text-decoration: line-through !important;
-}
-
-/* Override the avatar section min-width */
-:deep(.q-item__section--avatar) {
-  min-width: 5px !important;
-  padding-right: 0px !important;
-}
-
-/* For very small screens */
-@media (max-width: 576px) {
-  .legend-color-box {
-    width: 10px;
-    height: 2px;
-  }
-}
-</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
new file mode 100644
index 0000000000..2215427764
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategoriesGroup.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="row justify-center items-center">
+    <HistoryChartLegendCategory
+      :label="'Komponenten'"
+      :items="categorizedLegendItems.component"
+      :toggleDataset="toggleDataset"
+      :getItemColor="getItemColor"
+      :getItemLineType="getItemLineType"
+      menuAnchor="bottom right"
+      menuSelf="top right"
+    />
+
+    <HistoryChartLegendCategory
+      :label="'Ladepunkte'"
+      :items="categorizedLegendItems.chargepoint"
+      :toggleDataset="toggleDataset"
+      :getItemColor="getItemColor"
+      :getItemLineType="getItemLineType"
+      menuAnchor="bottom middle"
+      menuSelf="top middle"
+      menuFormat="q-mx-lg"
+    />
+
+    <HistoryChartLegendCategory
+      :label="'Fahrzeuge'"
+      :items="categorizedLegendItems.vehicle"
+      :toggleDataset="toggleDataset"
+      :getItemColor="getItemColor"
+      :getItemLineType="getItemLineType"
+      menuAnchor="bottom left"
+      menuSelf="top left"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import HistoryChartLegendCategory from './HistoryChartLegendCategory.vue';
+import type { LegendItem } from 'chart.js';
+import type { Category } from './history-chart-model';
+
+defineProps<{
+  categorizedLegendItems: Record<Category, LegendItem[]>;
+  toggleDataset: (datasetName: string, datasetIndex: number) => void;
+  getItemColor: (dataset: LegendItem) => string;
+  getItemLineType: (dataset: LegendItem) => string | undefined;
+}>();
+</script>
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategory.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategory.vue
new file mode 100644
index 0000000000..65a9ad58d1
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendCategory.vue
@@ -0,0 +1,87 @@
+<template>
+  <q-btn-dropdown
+    flat
+    no-caps
+    dense
+    color="primary"
+    :label="label"
+    :class="menuFormat"
+    :menu-anchor="menuAnchor"
+    :menu-self="menuSelf"
+  >
+    <q-list dense class="q-pa-none" style="max-height: 200px; overflow-y: auto">
+      <q-item
+        v-for="(dataset, index) in items"
+        :key="dataset.text || index"
+        clickable
+        dense
+        class="q-py-none"
+        :class="{ 'legend-item-hidden': dataset.hidden }"
+        @click="
+          dataset.datasetIndex !== undefined &&
+            toggleDataset(dataset.text, dataset.datasetIndex)
+        "
+      >
+        <q-item-section avatar class="q-pr-none">
+          <svg
+            v-if="getItemLineType(dataset) === 'dashed'"
+            width="20"
+            height="3"
+          >
+            <line
+              x1="0"
+              y1="1.5"
+              x2="20"
+              y2="1.5"
+              :stroke="getItemColor(dataset)"
+              stroke-width="2"
+              stroke-dasharray="8,2"
+            />
+          </svg>
+          <svg v-else width="20" height="3">
+            <line
+              x1="0"
+              y1="1.5"
+              x2="30"
+              y2="1.5"
+              :stroke="getItemColor(dataset)"
+              stroke-width="2"
+            />
+          </svg>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label class="text-caption">{{ dataset.text }}</q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </q-btn-dropdown>
+</template>
+
+<script setup lang="ts">
+import { LegendItem } from 'chart.js';
+import type { QMenuProps } from 'quasar';
+
+defineProps<{
+  label: string;
+  items: LegendItem[];
+  toggleDataset: (datasetName: string, datasetIndex: number) => void;
+  getItemColor: (dataset: LegendItem) => string;
+  getItemLineType: (dataset: LegendItem) => string | undefined;
+  menuAnchor: QMenuProps['anchor'];
+  menuSelf: QMenuProps['self'];
+  menuFormat?: string;
+}>();
+</script>
+
+<style scoped>
+.legend-item-hidden {
+  opacity: 0.6 !important;
+  text-decoration: line-through !important;
+}
+
+/* Override the avatar section min-width */
+.q-item__section--avatar {
+  min-width: 5px !important;
+  padding-right: 5px !important;
+}
+</style>
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
new file mode 100644
index 0000000000..4930b478ee
--- /dev/null
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegendStandard.vue
@@ -0,0 +1,83 @@
+<template>
+  <q-list class="q-pa-none">
+    <div class="row wrap q-pa-none items-center justify-center">
+      <q-item
+        v-for="(dataset, index) in items"
+        :key="dataset.text || index"
+        clickable
+        dense
+        class="q-py-none"
+        :class="{ 'legend-item-hidden': dataset.hidden }"
+        @click="
+          dataset.datasetIndex !== undefined &&
+            toggleDataset(dataset.text, dataset.datasetIndex)
+        "
+      >
+        <q-item-section avatar class="q-pr-none">
+          <svg
+            v-if="getItemLineType(dataset) === 'dashed'"
+            width="20"
+            height="3"
+          >
+            <line
+              x1="0"
+              y1="1.5"
+              x2="20"
+              y2="1.5"
+              :stroke="getItemColor(dataset)"
+              stroke-width="2"
+              stroke-dasharray="8,2"
+            />
+          </svg>
+          <svg v-else width="20" height="3">
+            <line
+              x1="0"
+              y1="1.5"
+              x2="30"
+              y2="1.5"
+              :stroke="getItemColor(dataset)"
+              stroke-width="2"
+            />
+          </svg>
+        </q-item-section>
+        <q-item-section>
+          <q-item-label class="text-caption">{{ dataset.text }}</q-item-label>
+        </q-item-section>
+      </q-item>
+    </div>
+  </q-list>
+</template>
+
+<script setup lang="ts">
+import { LegendItem } from 'chart.js';
+
+defineProps<{
+  items: LegendItem[];
+  toggleDataset: (datasetName: string, datasetIndex: number) => void;
+  getItemColor: (dataset: LegendItem) => string;
+  getItemLineType: (dataset: LegendItem) => string | undefined;
+}>();
+</script>
+
+<style scoped>
+.legend-item-hidden {
+  opacity: 0.6 !important;
+  text-decoration: line-through !important;
+}
+
+/* Override the avatar section min-width */
+.q-item__section--avatar {
+  min-width: 5px !important;
+  padding-right: 5px !important;
+}
+
+.q-item {
+  min-height: 22px !important;
+  padding-left: 4px !important;
+  padding-right: 4px !important;
+}
+
+.body--dark .q-list {
+  background-color: transparent;
+}
+</style>
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
index efacd28589..59b420e469 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
@@ -1,4 +1,4 @@
-import { TooltipItem, Chart } from 'chart.js'; // Importieren des TooltipItem-Typs
+import type { Chart, ChartDataset, TooltipItem } from 'chart.js'; // Importieren des TooltipItem-Typs
 export interface HistoryChartTooltipItem extends TooltipItem<'line'> {
   dataset: TooltipItem<'line'>['dataset'] & {
     unit?: string;
@@ -9,3 +9,11 @@ export interface HistoryChartTooltipItem extends TooltipItem<'line'> {
 export interface ChartComponentRef {
   chart?: Chart;
 }
+
+export type Category = 'chargepoint' | 'vehicle' | 'battery' | 'component';
+
+// Add category to the chart datasets
+export interface CategorizedDataset
+  extends ChartDataset<'line', { x: number; y: number }> {
+  category: Category;
+}

From 5efba185ae4dc7de79d97bf06f9a96de19d1a676 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 30 Jul 2025 10:59:00 +0200
Subject: [PATCH 2/4] Clean up typescript interfaces

---
 .../historyChart/HistoryChartLegend.vue       | 22 +++++++++----------
 .../historyChart/history-chart-model.ts       |  9 +++++++-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
index 6bd5905384..484143947d 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
@@ -29,8 +29,8 @@
 <script setup lang="ts">
 import { ref, watch, computed, nextTick } from 'vue';
 import { useLocalDataStore } from 'src/stores/localData-store';
-import { Chart, LegendItem } from 'chart.js';
-import type { Category, CategorizedDataset } from './history-chart-model';
+import { Chart, ChartDataset, LegendItem } from 'chart.js';
+import type { Category, CategorizedDataset, LegendItemWithCategory } from './history-chart-model';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { useQuasar } from 'quasar';
 import HistoryChartLegendCategoriesGroup from './HistoryChartLegendCategoriesGroup.vue';
@@ -44,10 +44,10 @@ const props = defineProps<{
 }>();
 
 const localDataStore = useLocalDataStore();
-const legendItems = ref<LegendItem[]>([]);
+const legendItems = ref<LegendItemWithCategory[]>([]);
 
 const legendLarge = computed(() => {
-  return legendItems.value.length > 10;
+  return legendItems.value.length > 20;
 });
 
 const updateLegendItems = () => {
@@ -56,28 +56,28 @@ const updateLegendItems = () => {
     props.chart.options.plugins?.legend?.labels?.generateLabels?.(
       props.chart,
     ) || [];
-  items.forEach((item) => {
+  (items as LegendItemWithCategory[]).forEach((item) => {
     if (item.text && localDataStore.isDatasetHidden(item.text)) {
       item.hidden = true;
     }
-    //  Inject the category from the dataset
+    // Inject the category from the dataset
     const dataset = props.chart?.data.datasets[
       item.datasetIndex!
     ] as unknown as CategorizedDataset;
-    (item as LegendItem & { category?: Category }).category = dataset.category;
+    item.category = dataset.category;
   });
-  legendItems.value = items;
+  legendItems.value = items as LegendItemWithCategory[];
 };
 
 const categorizedLegendItems = computed(() => {
-  const categories: Record<Category, LegendItem[]> = {
+  const categories: Record<Category, LegendItemWithCategory[]> = {
     chargepoint: [],
     vehicle: [],
     battery: [],
     component: [],
   };
   for (const item of legendItems.value) {
-    const category = (item as LegendItem & { category?: Category }).category;
+    const category = item.category;
     if (category && categories[category]) {
       categories[category].push(item);
     } else {
@@ -103,7 +103,7 @@ const getItemLineType = (item: LegendItem) => {
   if (!props.chart || item.datasetIndex === undefined) return;
   const dataset = props.chart.data.datasets[
     item.datasetIndex
-  ] as unknown as CategorizedDataset;
+  ] as ChartDataset<'line'>;
   const borderDash = dataset.borderDash;
   return Array.isArray(borderDash) && borderDash.length > 0
     ? 'dashed'
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
index 59b420e469..65723d07fd 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
@@ -1,4 +1,6 @@
-import type { Chart, ChartDataset, TooltipItem } from 'chart.js'; // Importieren des TooltipItem-Typs
+import type { Chart, TooltipItem, ChartDataset, LegendItem } from 'chart.js';
+import type { } from 'chart.js';
+
 export interface HistoryChartTooltipItem extends TooltipItem<'line'> {
   dataset: TooltipItem<'line'>['dataset'] & {
     unit?: string;
@@ -17,3 +19,8 @@ export interface CategorizedDataset
   extends ChartDataset<'line', { x: number; y: number }> {
   category: Category;
 }
+
+// Add category to the legendItem
+export interface LegendItemWithCategory extends LegendItem {
+  category?: Category;
+}

From 02c98709550fdd29e2b958f469dedca3ddf5db8c Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 30 Jul 2025 11:05:07 +0200
Subject: [PATCH 3/4] Formatting

---
 .../components/charts/historyChart/HistoryChartLegend.vue   | 6 +++++-
 .../components/charts/historyChart/history-chart-model.ts   | 1 -
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
index 484143947d..d822f066b3 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/HistoryChartLegend.vue
@@ -30,7 +30,11 @@
 import { ref, watch, computed, nextTick } from 'vue';
 import { useLocalDataStore } from 'src/stores/localData-store';
 import { Chart, ChartDataset, LegendItem } from 'chart.js';
-import type { Category, CategorizedDataset, LegendItemWithCategory } from './history-chart-model';
+import type {
+  Category,
+  CategorizedDataset,
+  LegendItemWithCategory,
+} from './history-chart-model';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { useQuasar } from 'quasar';
 import HistoryChartLegendCategoriesGroup from './HistoryChartLegendCategoriesGroup.vue';
diff --git a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
index 65723d07fd..a2cf9c928b 100644
--- a/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
+++ b/packages/modules/web_themes/koala/source/src/components/charts/historyChart/history-chart-model.ts
@@ -1,5 +1,4 @@
 import type { Chart, TooltipItem, ChartDataset, LegendItem } from 'chart.js';
-import type { } from 'chart.js';
 
 export interface HistoryChartTooltipItem extends TooltipItem<'line'> {
   dataset: TooltipItem<'line'>['dataset'] & {

From 57e439baf2fb50a69fe5c4bbf7ca5924cd26b37b Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Wed, 30 Jul 2025 16:19:52 +0200
Subject: [PATCH 4/4] Scrollbar CSS for dropdown categories

---
 .../koala/source/src/css/quasar.variables.scss       | 12 ++++++++++++
 1 file changed, 12 insertions(+)

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 57aa50cd25..f2ccdc87b6 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
@@ -192,6 +192,12 @@ $battery: #ba7128;
     }
   }
 
+  // Scrollbar styling für .q-list auto Light Theme
+  .q-list {
+    scrollbar-width: thin;
+    scrollbar-color: var(--q-primary) var(--q-background-2);
+  }
+
   //table padding
   .q-table th,
   .q-table td {
@@ -400,4 +406,10 @@ $dark-tab-icon: #d7d9e0;
   .q-scrollarea {
     border: 1px solid var(--q-secondary) !important;
   }
+
+  //Scrollbar styling für .q-list - Dark Theme
+  .q-list {
+    scrollbar-width: thin;
+    scrollbar-color: var(--q-primary) var(--q-list);
+  }
 }