mobile sceen support

apps/react-starter/src/App.tsx

@@ -19,7 +19,7 @@ import { useTranslation } from "react-i18next";
 import { NavLink, Outlet } from "react-router-dom";
 import useShowDemoMessage from "./hooks/demoMessage";
 import Logo from "./Logo";
-import { useDataStore } from "./pages/store/device-store";
+import { useDataStore } from "./store/device-store";
 import UserSettings from "./pages/user-settings";
 
 registerTheme(echarts);

apps/react-starter/src/pages/devices/components/ag-grid-table/ag-grid-table.tsx

@@ -13,7 +13,7 @@ import { AgGridReact } from "ag-grid-react";
 import { IxEmptyState } from "@siemens/ix-react";
 import QuickActionsCellRenderer from "./quick-actions-cell-renderet.tsx";
 import { CellClickedEvent, ColDef, ColGroupDef, IRowNode } from "ag-grid-community";
-import { useDataStore, useFilterStore, useOverviewPaneStore } from "../../../store/device-store.ts";
+import { useDataStore, useFilterStore, useOverviewPaneStore } from "../../../../store/device-store.ts";
 import { Device } from "../../../../types";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { LogicalFilterOperator } from "@siemens/ix";

apps/react-starter/src/pages/devices/components/ag-grid-table/quick-actions-cell-renderet.tsx

@@ -19,7 +19,7 @@ import {
   showModal,
 } from "@siemens/ix-react";
 import { ICellRendererParams } from "ag-grid-community";
-import { useDataStore } from "../../../store/device-store.ts";
+import { useDataStore } from "../../../../store/device-store.ts";
 import { RefObject } from "react";
 import { AgGridReact } from "ag-grid-react";
 import {

apps/react-starter/src/pages/devices/components/device-details/index.tsx

@@ -12,11 +12,11 @@ import { toKebabCase } from "@/util/util.ts";
 import { IxButton, IxDivider, IxPane, IxTypography } from "@siemens/ix-react";
 import { useLayoutEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { useDataStore, useOverviewPaneStore } from "../../../store/device-store.ts";
+import { useDataStore, useOverviewPaneStore } from "../../../../store/device-store.ts";
 import FirmwareCard from "./firmware-card.tsx";
 import styles from "./styles.module.css";
 
-const DeviceDetails = ({ ...props }) => {
+const DeviceDetails = () => {
   const { editDevice } = useDataStore();
 
   const { t } = useTranslation();
@@ -52,7 +52,6 @@ const DeviceDetails = ({ ...props }) => {
         setExpanded(event.detail.expanded);
       }}
       className={styles.Pane}
-      {...props}
     >
       <div className={styles.Container}>
         {selectedData ? (
@@ -88,7 +87,6 @@ const DeviceDetails = ({ ...props }) => {
                 status: (selectedData!.status = "Maintenance"),
               };
               editDevice(updatedDevice as Device);
-              props.api.onFilterChanged();
             }}
           >
             {t("device-details-footer.maintenance")}
@@ -101,7 +99,6 @@ const DeviceDetails = ({ ...props }) => {
                   selectedData!.status === "Offline" ? "Online" : "Offline"),
               };
               editDevice(updatedDevice as Device);
-              props.api.onFilterChanged();
             }}
           >
             {selectedData?.status === "Offline"

apps/react-starter/src/pages/devices/components/modal/add-device-modal.tsx

@@ -21,7 +21,7 @@ import { useRef, useEffect } from "react";
 import styles from "./styles.module.css";
 import FormField from "./form-field";
 import { useForm } from "react-hook-form";
-import { useDataStore } from "../../../store/device-store";
+import { useDataStore } from "../../../../store/device-store.ts";
 import { Device } from "../../../../types";
 import { useTranslation } from "react-i18next";
 import { showSuccessToast } from "../../../../util/util.ts";

apps/react-starter/src/pages/devices/index.tsx

@@ -20,12 +20,12 @@ import {
 import { IxButton, IxCategoryFilter, IxChip, IxContentHeader } from "@siemens/ix-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDataStore, useFilterStore } from "../store/device-store.ts";
+import { useDataStore, useFilterStore } from "../../store/device-store.ts";
 import AgGridTable from "./components/ag-grid-table/ag-grid-table.tsx";
 import DeviceDetails from "./components/device-details/index.tsx";
 import show from "./components/modal/index.tsx";
 import styles from "./styles.module.css";
-import { useDeviceStatus } from "../store/hooks/device.ts";
+import { useDeviceStatus } from "../../store/hooks/device.ts";
 
 type Categories = Record<
   string,

apps/react-starter/src/pages/overview/components/device-range/index.tsx

@@ -15,75 +15,73 @@ import { BarSeriesOption } from "echarts";
 import { EChartsCoreOption } from "echarts";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Device } from "../../../../types/index.tsx";
-import { useDataStore } from "../../../store/device-store.ts";
 import ReactEcharts from "echarts-for-react";
 import { useResizeHandler } from "@/util/util.ts";
 import EChartsReact from "echarts-for-react";
 import { ECBasicOption } from "echarts/types/dist/shared";
+import { getComputedCSSProperty } from "@siemens/ix-echarts";
+import { Device, DeviceState } from "@/types";
+import { useDataStore } from "@/store/device-store";
 
 const reduceDevices = (devices: Device[]): BarSeriesOption[] => {
-  const onlineData: [number, string][] = [];
-  const offlineData: [number, string][] = [];
-  const maintenanceData: [number, string][] = [];
-  const errorData: [number, string][] = [];
+  const onlineData = new Map<string, number>();
+  const offlineData = new Map<string, number>();
+  const maintenanceData = new Map<string, number>();
+  const errorData = new Map<string, number>();
 
-  devices.forEach((device) => {
+  function fillData(device: Device, data: Map<string, number>, state: DeviceState) {
     const ipSegment = device.ipAddress.split(".")[0] + ".x";
 
-    const online = onlineData.find((data) => data[1] === ipSegment);
-    if (online) {
-      online[0]++;
-    } else {
-      onlineData.push([1, ipSegment]);
-    }
-
-    const offline = offlineData.find((data) => data[1] === ipSegment);
-    if (offline) {
-      offline[0]++;
-    } else {
-      offlineData.push([1, ipSegment]);
+    if (device.status !== state) {
+      return;
     }
 
-    const maintenance = maintenanceData.find((data) => data[1] === ipSegment);
-    if (maintenance) {
-      maintenance[0]++;
+    if (data.has(ipSegment)) {
+      data.set(ipSegment, data.get(ipSegment)! + 1);
     } else {
-      maintenanceData.push([1, ipSegment]);
+      data.set(ipSegment, 1);
     }
+  }
 
-    const error = errorData.find((data) => data[1] === ipSegment);
-    if (error) {
-      error[0]++;
-    } else {
-      errorData.push([1, ipSegment]);
-    }
+  devices.forEach((device) => {
+    fillData(device, onlineData, "Online");
+    fillData(device, maintenanceData, "Maintenance");
+    fillData(device, errorData, "Error");
+    fillData(device, offlineData, "Offline");
   });
 
+  function createSeries(data: Map<string, number>) {
+    return Array.from(data).map(([name, value]) => [value, name]);
+  }
+
   return [
     {
       name: "Online",
-      data: onlineData,
+      data: createSeries(onlineData),
       type: "bar",
       stack: "x",
+      color: getComputedCSSProperty("color-success"),
     },
     {
       name: "Maintenance",
-      data: maintenanceData,
+      data: createSeries(maintenanceData),
       type: "bar",
       stack: "x",
+      color: getComputedCSSProperty("color-warning"),
     },
     {
       name: "Error",
-      data: errorData,
+      data: createSeries(errorData),
       type: "bar",
       stack: "x",
+      color: getComputedCSSProperty("color-alarm"),
     },
     {
       name: "Offline",
-      data: offlineData,
+      data: createSeries(offlineData),
       type: "bar",
       stack: "x",
+      color: getComputedCSSProperty("color-neutral"),
     },
   ];
 };
@@ -131,7 +129,6 @@ function DeviceRange() {
 
     if (chart) {
       const data = reduceDevices(devices);
-
       const option = {
         ...getOption(),
         series: data,