fix(mis): 平台数据统计可视化图表y轴优化 (#14)

PKUHPC · Sep 13, 2024 · de3e5f1 · de3e5f1
1 parent f7ad353
commit de3e5f1
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 4 deletions.
diff --git a/.changeset/sharp-apricots-jump.md b/.changeset/sharp-apricots-jump.md
@@ -0,0 +1,5 @@
+---
+"@scow/mis-web": patch
+---
+
+平台数据统计可视化图表 y 轴刻度优化
diff --git a/apps/mis-web/package.json b/apps/mis-web/package.json
@@ -35,16 +35,17 @@
     "@scow/lib-auth": "workspace:*",
     "@scow/lib-config": "workspace:*",
     "@scow/lib-decimal": "workspace:*",
+    "@scow/lib-notification": "workspace:*",
     "@scow/lib-operation-log": "workspace:*",
     "@scow/lib-web": "workspace:*",
+    "@scow/notification-protos": "workspace:*",
     "@scow/protos": "workspace:*",
     "@scow/rich-error-model": "workspace:*",
     "@scow/utils": "workspace:*",
-    "@scow/lib-notification": "workspace:*",
-    "@scow/notification-protos": "workspace:*",
     "@sinclair/typebox": "0.32.34",
     "antd": "5.18.3",
     "csv-stringify": "6.5.0",
+    "d3-scale": "4.0.2",
     "dayjs": "1.11.11",
     "google-protobuf": "3.21.2",
     "http-proxy": "1.18.1",

diff --git a/apps/mis-web/src/pageComponents/admin/DataBarChart.tsx b/apps/mis-web/src/pageComponents/admin/DataBarChart.tsx
@@ -11,6 +11,7 @@
  */
 
 import { Empty, Spin } from "antd";
+import { scaleLinear } from "d3-scale";
 import React from "react";
 import { Bar, BarChart,
   ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
@@ -63,6 +64,13 @@ export const DataBarChart: React.FC<Props> = ({
     return roundedValue.toString();
   };
 
+  const min = Math.min(...data.map((d) => +d.y));
+  const max = Math.max(...data.map((d) => +d.y));
+  const [niceMin,niceMax] = scaleLinear()
+    .domain([min, max])
+    .nice().domain();
+
+
   return (
     <StatisticContainer>
       {isLoading ? <Spin /> : (
@@ -83,7 +91,7 @@ export const DataBarChart: React.FC<Props> = ({
                     height={ 80 }
                     tick={<CustomizedAxisTick /> }
                   />
-                  <YAxis padding={{ top: 20 }} tickFormatter={tickFormatter} />
+                  <YAxis padding={{ top: 20 }} tickFormatter={tickFormatter} domain={[niceMin,niceMax]} />
                   <Tooltip
                     formatter={toolTipFormatter}
                   />

diff --git a/apps/mis-web/src/pageComponents/admin/DataLineChart.tsx b/apps/mis-web/src/pageComponents/admin/DataLineChart.tsx
@@ -11,6 +11,7 @@
  */
 
 import { Spin } from "antd";
+import { scaleLinear } from "d3-scale";
 import { Line, LineChart,
   ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 import { Formatter } from "recharts/types/component/DefaultTooltipContent";
@@ -45,6 +46,13 @@ export const DataLineChart: React.FC<Props> = ({
   lineType = "linear",
   toolTipFormatter = (value) => value,
 }) => {
+
+  const min = Math.min(...data.map((d) => +d.y));
+  const max = Math.max(...data.map((d) => +d.y));
+  const [niceMin,niceMax] = scaleLinear()
+    .domain([min, max])
+    .nice().domain();
+
   return (
     <StatisticContainer>
       {isLoading ? <Spin /> : (
@@ -56,7 +64,7 @@ export const DataLineChart: React.FC<Props> = ({
             >
               <XAxis dataKey="x" padding={{ left: 20, right: 20 }} type="category" />
               <YAxis
-                domain={["dataMin", "dataMax"]}
+                domain={[niceMin,niceMax]}
                 interval={"preserveStartEnd"}
               />
               <Tooltip

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml