fix: responsive overview

siemens · Oct 2, 2024 · d0539d3 · d0539d3
1 parent 9d0f5e0
commit d0539d3
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 13 deletions.
diff --git a/apps/react-starter/src/pages/overview/components/device-status/index.tsx b/apps/react-starter/src/pages/overview/components/device-status/index.tsx
@@ -13,6 +13,9 @@ import { IxCard, IxCardContent, IxTypography } from "@siemens/ix-react";
 import { getComputedCSSProperty } from "@siemens/ix-echarts";
 import ReactEcharts from "echarts-for-react";
 import { useTranslation } from "react-i18next";
+import {useRef} from "react";
+import {useResizeHandler} from "../../../../util/util.ts";
+import EChartsReact from "echarts-for-react";
 
 const data = [
   { value: 72.17, name: "Online" },
@@ -27,10 +30,9 @@ function getOption() {
       trigger: "item",
     },
     legend: {
-      orient: "vertical",
+      orient: "horizontal",
       icon: "rect",
-      right: "16",
-      top: "center",
+      bottom: "0",
       textStyle: {
         color: getComputedCSSProperty("color-std-text"),
       },
@@ -45,7 +47,7 @@ function getOption() {
           getComputedCSSProperty("color-neutral"),
           getComputedCSSProperty("color-critical"),
         ],
-        radius: ["60%", "90%"],
+        radius: ["50%", "70%"],
         label: {
           show: false,
           color: getComputedCSSProperty("color-neutral"),
@@ -68,12 +70,16 @@ function getOption() {
 
 function DeviceStatus() {
   const { t } = useTranslation();
+  const chartRef = useRef<EChartsReact>(null);
+
+  useResizeHandler(chartRef);
 
   return (
-    <IxCard>
+    <IxCard className="w-100">
       <IxCardContent>
         <IxTypography format="h3">{t("device-status.title")}</IxTypography>
         <ReactEcharts
+          ref={chartRef}
           onChartReady={(echarts) => setTimeout(echarts.resize)}
           className={styles.echarts}
           option={getOption()}

diff --git a/apps/react-starter/src/pages/overview/components/device-status/styles.module.css b/apps/react-starter/src/pages/overview/components/device-status/styles.module.css
@@ -10,7 +10,6 @@
 .echarts {
   position: relative;
   width: 100%;
-  min-width: 24.75rem;
   height: 100%;
   padding-top: 1rem;
 }
diff --git a/apps/react-starter/src/pages/overview/components/incidents/overview/styles.module.css b/apps/react-starter/src/pages/overview/components/incidents/overview/styles.module.css
@@ -21,10 +21,6 @@ device-status {
   }
 }
 
-ix-card + ix-card {
-  margin-inline-start: 1rem;
-}
-
 ix-blind + ix-blind {
   margin-block-start: 1rem;
 }
diff --git a/apps/react-starter/src/pages/overview/components/overview/styles.module.css b/apps/react-starter/src/pages/overview/components/overview/styles.module.css
@@ -13,6 +13,11 @@ device-status {
 
 .CardContainer {
   display: flex;
+  gap: 1rem;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
 }
 
 ix-card {
@@ -21,5 +26,4 @@ ix-card {
 
 ix-card + ix-card {
   flex-grow: 2;
-  margin-inline-start: 1rem;
 }
diff --git a/apps/react-starter/src/pages/overview/components/status-history/index.tsx b/apps/react-starter/src/pages/overview/components/status-history/index.tsx
@@ -13,6 +13,10 @@ import { IxCard, IxCardContent, IxTypography } from "@siemens/ix-react";
 import { getComputedCSSProperty } from "@siemens/ix-echarts";
 import ReactEcharts from "echarts-for-react";
 import { useTranslation } from "react-i18next";
+import { useRef } from "react";
+import { useResizeHandler } from "../../../../util/util.ts";
+import EChartsReact from "echarts-for-react";
+
 const seriesOnline = {
   name: "Online",
   color: [getComputedCSSProperty("color-success")],
@@ -103,12 +107,16 @@ function getOption() {
 
 function StatusHistory() {
   const { t } = useTranslation();
+  const chartRef = useRef<EChartsReact>(null);
+
+  useResizeHandler(chartRef);
 
   return (
-    <IxCard>
+    <IxCard className="w-100">
       <IxCardContent>
         <IxTypography format="h3">{t("status-history.title")}</IxTypography>
         <ReactEcharts
+          ref={chartRef}
           onChartReady={(echarts) => setTimeout(echarts.resize)}
           className={styles.echarts}
           option={getOption()}

diff --git a/apps/react-starter/src/pages/overview/components/status-history/styles.module.css b/apps/react-starter/src/pages/overview/components/status-history/styles.module.css
@@ -10,7 +10,6 @@
 .echarts {
   position: relative;
   width: 100%;
-  min-width: 24.75rem;
   height: 100%;
   padding-top: 1rem;
 }
diff --git a/apps/react-starter/src/util/util.ts b/apps/react-starter/src/util/util.ts
@@ -1,5 +1,7 @@
 import {showToast} from "@siemens/ix-react";
 import {iconSingleCheck} from "@siemens/ix-icons/icons";
+import {MutableRefObject, useEffect} from "react";
+import EChartsReact from "echarts-for-react";
 
 export function toKebabCase(normalString: string): string {
   return normalString
@@ -16,4 +18,20 @@ export function showSuccessToast(message: string) {
     icon: iconSingleCheck,
     iconColor: "color-success",
   });
+}
+
+export function useResizeHandler(chartRef: MutableRefObject<EChartsReact | null>) {
+  useEffect(() => {
+    const handleResize = () => {
+      if (chartRef.current) {
+        chartRef.current.getEchartsInstance().resize();
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [chartRef]);
 }