..

Signed-off-by: min.tian <min.tian.cn@gmail.com>

client/src/pages/systemHealthy/LineChartLarge.tsx

@@ -5,6 +5,7 @@ import {
   LINE_COLOR,
   LINE_LABEL_FONT_SIZE,
   LINE_LABEL_Y_PADDING,
+  LINE_WIDTH,
 } from './consts';
 
 const LineChartLarge = ({
@@ -83,7 +84,7 @@ const LineChartLarge = ({
           d={line(nodes) as any}
           fill="none"
           stroke={`${LINE_COLOR}`}
-          strokeWidth={3}
+          strokeWidth={LINE_WIDTH}
           opacity={0.8}
           strokeLinecap="round"
         />

client/src/pages/systemHealthy/LineChartSmall.tsx

@@ -8,6 +8,7 @@ import {
   LINE_LABEL_FONT_SIZE,
   LINE_LABEL_Y_PADDING,
   LINE_SMALL_LABEL_FONT_SIZE,
+  LINE_WIDTH,
 } from './consts';
 import { EHealthyStatus } from './Types';
 
@@ -113,7 +114,7 @@ const LineChartSmall = ({
           d={line(nodes) as any}
           fill="none"
           stroke={LINE_COLOR}
-          strokeWidth={3}
+          strokeWidth={LINE_WIDTH}
           opacity={0.8}
           strokeLinecap="round"
         />

client/src/pages/systemHealthy/consts.ts

@@ -18,29 +18,31 @@ export const HEALTHY_STATUS_COLORS = {
 
 export const LINE_CHART_LARGE_HEIGHT = 60;
 export const LINE_CHART_SMALL_HEIGHT = 48;
-export const LINE_COLOR = '#394E97';
+// export const LINE_COLOR = '#394E97';
+export const LINE_COLOR = 'rgb(6, 175, 242)';
+export const LINE_WIDTH = 1;
 export const LINE_LABEL_Y_PADDING = 6;
 export const LINE_LABEL_FONT_SIZE = 14;
 export const LINE_SMALL_LABEL_FONT_SIZE = 12;
 export const timeRangeOptions: ITimeRangeOption[] = [
-    {
-      label: '1h',
-      value: 60 * 60 * 1000,
-      step: 3 * 60 * 1000,
-    },
-    {
-      label: '24h',
-      value: 24 * 60 * 60 * 1000,
-      step: 60 * 60 * 1000,
-    },
-    {
-      label: '7d',
-      value: 7 * 24 * 60 * 60 * 1000,
-      step: 8 * 60 * 60 * 1000,
-    },
-    {
-      label: '30d',
-      value: 30 * 24 * 60 * 60 * 1000,
-      step: 24 * 60 * 60 * 1000,
-    },
-  ];
+  {
+    label: '1h',
+    value: 60 * 60 * 1000,
+    step: 3 * 60 * 1000,
+  },
+  {
+    label: '24h',
+    value: 24 * 60 * 60 * 1000,
+    step: 60 * 60 * 1000,
+  },
+  {
+    label: '7d',
+    value: 7 * 24 * 60 * 60 * 1000,
+    step: 8 * 60 * 60 * 1000,
+  },
+  {
+    label: '30d',
+    value: 30 * 24 * 60 * 60 * 1000,
+    step: 24 * 60 * 60 * 1000,
+  },
+];