fix(web): fix monitor yaxis overflow (#1928)

* fix(web): fix monitor yaxis overflow
labring · Apr 3, 2024 · 5bc23e3 · 5bc23e3
1 parent 11e156e
commit 5bc23e3
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 14 deletions.
diff --git a/web/src/pages/app/setting/SysSetting/AppMonitor/AreaCard/index.tsx b/web/src/pages/app/setting/SysSetting/AppMonitor/AreaCard/index.tsx
@@ -92,6 +92,8 @@ export default function AreaCard(props: {
   maxValue: number;
   unit: string;
   className?: string;
+  longestTick: string;
+  onLongestTickChange: (val: string) => void;
 }) {
   const {
     data,
@@ -104,6 +106,8 @@ export default function AreaCard(props: {
     maxValue,
     unit,
     className,
+    longestTick,
+    onLongestTickChange,
   } = props;
   const [chartData, setChartData] = useState<any[]>([]);
   useEffect(() => {
@@ -147,6 +151,14 @@ export default function AreaCard(props: {
     );
   }, [data, dataNumber, title]);
 
+  const tickFormatter = (val: string) => {
+    const formattedTick = val.toString();
+    if (longestTick.length < formattedTick.length) {
+      onLongestTickChange(formattedTick);
+    }
+    return val;
+  };
+
   return (
     <div className={className}>
       <div className="mb-3 flex justify-between font-medium text-grayModern-900">
@@ -178,7 +190,7 @@ export default function AreaCard(props: {
         )}
       </div>
       <ResponsiveContainer width="100%" height="100%">
-        <AreaChart data={chartData} margin={{ left: -28, top: 6 }} syncId="sync">
+        <AreaChart data={chartData} margin={{ top: 6 }} syncId="sync">
           <CartesianGrid stroke="#f5f5f5" vertical={false} />
           <XAxis
             dataKey="xData"
@@ -190,7 +202,12 @@ export default function AreaCard(props: {
             domain={[Date.now() - 60 * 60 * 1000, Date.now()]}
             stroke="#C0C2D2"
           />
-          <YAxis fontSize="10" stroke="#9CA2A8" />
+          <YAxis
+            fontSize="10"
+            stroke="#9CA2A8"
+            width={longestTick.length * 8 + 8}
+            tickFormatter={tickFormatter}
+          />
           <ReferenceLine
             y={maxValue}
             strokeDasharray="3 3"

diff --git a/web/src/pages/app/setting/SysSetting/AppMonitor/PieCard/index.tsx b/web/src/pages/app/setting/SysSetting/AppMonitor/PieCard/index.tsx
@@ -38,7 +38,9 @@ export default function PieCard(props: {
               ></span>
               <p>{entry.value}</p>
             </span>
-            <p className="ml-3 mt-1">{formatSize(pieData[index]?.value * 1024 * 1024)}</p>
+            <p className="text-nowrap ml-3 mt-1">
+              {formatSize(pieData[index]?.value * 1024 * 1024)}
+            </p>
           </div>
         ))}
       </ul>

diff --git a/web/src/pages/app/setting/SysSetting/AppMonitor/index.tsx b/web/src/pages/app/setting/SysSetting/AppMonitor/index.tsx
@@ -46,6 +46,8 @@ export default function AppMonitor() {
     return cpuData.length > memoryData.length ? [t("All"), ...cpuData] : [t("All"), ...memoryData];
   }, [monitorData, t]);
 
+  const [longestTick, setLongestTick] = useState("");
+
   return (
     <div className="flex w-full">
       {isLoading ? (
@@ -66,6 +68,8 @@ export default function AppMonitor() {
               unit="Core"
               maxValue={limitCPU / 1000}
               className="h-1/2 p-4"
+              longestTick={longestTick}
+              onLongestTickChange={(val) => setLongestTick(val)}
             />
             <AreaCard
               data={monitorData?.data?.memoryUsage}
@@ -77,6 +81,8 @@ export default function AppMonitor() {
               maxValue={limitMemory}
               dataNumber={dataNumber}
               className="h-1/2 p-4"
+              longestTick={longestTick}
+              onLongestTickChange={(val) => setLongestTick(val)}
             />
           </div>
           <div

diff --git a/web/src/pages/app/setting/SysSetting/DatabaseMonitor/AreaCard/index.tsx b/web/src/pages/app/setting/SysSetting/DatabaseMonitor/AreaCard/index.tsx
@@ -111,7 +111,8 @@ export default function AreaCard(props: {
   unit: string;
   className?: string;
   syncId: string;
-  tableMarginLeft: number;
+  longestTick: string;
+  onLongestTickChange: (val: string) => void;
 }) {
   const {
     data,
@@ -124,7 +125,8 @@ export default function AreaCard(props: {
     unit,
     className,
     syncId,
-    tableMarginLeft,
+    longestTick,
+    onLongestTickChange,
   } = props;
   const [chartData, setChartData] = useState<any[]>([]);
   useEffect(() => {
@@ -173,6 +175,14 @@ export default function AreaCard(props: {
     }
   }, [data, podName, title]);
 
+  const tickFormatter = (val: string) => {
+    const formattedTick = val.toString();
+    if (longestTick.length < formattedTick.length) {
+      onLongestTickChange(formattedTick);
+    }
+    return val;
+  };
+
   return (
     <div className={className}>
       <div className="mb-3 flex justify-between font-medium text-grayModern-900">
@@ -205,7 +215,7 @@ export default function AreaCard(props: {
       <ResponsiveContainer width="100%" height="100%">
         <AreaChart
           data={chartData}
-          margin={{ left: tableMarginLeft, top: 6 }}
+          margin={{ top: 6 }}
           {...(syncId !== "" ? { syncId: syncId } : {})}
         >
           <CartesianGrid stroke="#f5f5f5" vertical={false} />
@@ -219,7 +229,12 @@ export default function AreaCard(props: {
             domain={[Date.now() - 60 * 60 * 1000, Date.now()]}
             stroke="#C0C2D2"
           />
-          <YAxis fontSize="10" stroke="#9CA2A8" />
+          <YAxis
+            fontSize="10"
+            stroke="#9CA2A8"
+            width={longestTick.length * 8 + 8}
+            tickFormatter={tickFormatter}
+          />
 
           {maxValue !== 0 && (
             <ReferenceLine

diff --git a/web/src/pages/app/setting/SysSetting/DatabaseMonitor/PieCard/index.tsx b/web/src/pages/app/setting/SysSetting/DatabaseMonitor/PieCard/index.tsx
@@ -39,7 +39,7 @@ export default function PieCard(props: {
               ></span>
               <p>{entry.value}</p>
             </span>
-            <p className="ml-3 mt-1">{(pieData[index]?.value).toFixed(3)} MB</p>
+            <p className="text-nowrap ml-3 mt-1">{(pieData[index]?.value).toFixed(3)} MB</p>
           </div>
         ))}
       </ul>

diff --git a/web/src/pages/app/setting/SysSetting/DatabaseMonitor/index.tsx b/web/src/pages/app/setting/SysSetting/DatabaseMonitor/index.tsx
@@ -76,6 +76,9 @@ export default function DatabaseMonitor() {
     return [t("All"), ...uniquePods];
   }, [cpuData, memoryData, t]);
 
+  const [longestTick, setLongestTick] = useState("");
+  const [longestTick1, setLongestTick1] = useState("");
+
   return (
     <Tabs variant="enclosed" isLazy={true}>
       <TabList>
@@ -107,7 +110,8 @@ export default function DatabaseMonitor() {
                     maxValue={limitCPU / 1000}
                     className="h-1/3 p-4"
                     syncId="tab1"
-                    tableMarginLeft={-28}
+                    longestTick={longestTick}
+                    onLongestTickChange={(val) => setLongestTick(val)}
                   />
                   <AreaCard
                     data={resourceData?.data?.memory}
@@ -120,7 +124,8 @@ export default function DatabaseMonitor() {
                     podName={podName}
                     className="h-1/3 p-4"
                     syncId="tab1"
-                    tableMarginLeft={-28}
+                    longestTick={longestTick}
+                    onLongestTickChange={(val) => setLongestTick(val)}
                   />
                   <AreaCard
                     data={connectionData?.data?.connections}
@@ -133,7 +138,8 @@ export default function DatabaseMonitor() {
                     podName={podName}
                     className="h-1/3 p-4"
                     syncId="tab1"
-                    tableMarginLeft={-28}
+                    longestTick={longestTick}
+                    onLongestTickChange={(val) => setLongestTick(val)}
                   />
                 </div>
 
@@ -194,7 +200,8 @@ export default function DatabaseMonitor() {
                   maxValue={0}
                   className="h-1/3 p-4"
                   syncId=""
-                  tableMarginLeft={-25}
+                  longestTick={longestTick1}
+                  onLongestTickChange={(val) => setLongestTick1(val)}
                 />
                 <AreaCard
                   data={performanceData?.data?.queryOperations}
@@ -207,7 +214,8 @@ export default function DatabaseMonitor() {
                   podName={podName}
                   className="h-1/3 p-4"
                   syncId=""
-                  tableMarginLeft={-26}
+                  longestTick={longestTick1}
+                  onLongestTickChange={(val) => setLongestTick1(val)}
                 />
                 <AreaCard
                   data={performanceData?.data?.pageFaults}
@@ -220,7 +228,8 @@ export default function DatabaseMonitor() {
                   podName={podName}
                   className="h-1/3 p-4"
                   syncId=""
-                  tableMarginLeft={-25}
+                  longestTick={longestTick1}
+                  onLongestTickChange={(val) => setLongestTick1(val)}
                 />
               </div>
             ) : (