Browse Source

Add chart display toggle in StatsDashboardPage for improved data visualization

- Introduced a button to toggle between single-row and dual-row display modes for charts, enhancing user control over data presentation.
- Updated the layout to accommodate the new toggle button, ensuring a responsive design that adapts to user preferences.
- Adjusted column spans dynamically based on the selected display mode, improving the overall user experience.
0es 3 tuần trước cách đây
mục cha
commit
e79e2cb291
1 tập tin đã thay đổi với 15 bổ sung3 xóa
  1. 15 3
      src/app/(dashboard)/statistics/dashboard/page.tsx

+ 15 - 3
src/app/(dashboard)/statistics/dashboard/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { DualAxes } from "@ant-design/charts";
-import { DownloadOutlined } from "@ant-design/icons";
+import { ColumnWidthOutlined, DownloadOutlined, PicCenterOutlined } from "@ant-design/icons";
 import {
   App,
   Button,
@@ -230,6 +230,7 @@ const StatsDashboardPage: React.FC = () => {
   const [exportUserLoading, setExportUserLoading] = useState(false);
   const [exportOrderLoading, setExportOrderLoading] = useState(false);
   const [exportPlaymateLoading, setExportPlaymateLoading] = useState(false);
+  const [chartSingleRow, setChartSingleRow] = useState(false);
 
   const triggerDownload = (blob: Blob, filename: string | undefined, fallback: string) => {
     if (!blob || blob.size === 0) {
@@ -643,7 +644,18 @@ const StatsDashboardPage: React.FC = () => {
         <Space direction="vertical" size="large" style={{ width: "100%" }}>
           {/* ── 图表区 ── */}
           <Row gutter={[16, 16]}>
-            <Col xs={24} xl={12}>
+            <Col span={24}>
+              <div className="flex items-center justify-end">
+                <Button
+                  size="small"
+                  icon={chartSingleRow ? <ColumnWidthOutlined /> : <PicCenterOutlined />}
+                  onClick={() => setChartSingleRow((v) => !v)}
+                >
+                  {chartSingleRow ? "并排展示" : "单行展示"}
+                </Button>
+              </div>
+            </Col>
+            <Col xs={24} xl={chartSingleRow ? 24 : 12}>
               <Card title="下单金额情况">
                 {orderData.length > 0 ? (
                   <DualAxes {...amountChartConfig} height={300} />
@@ -654,7 +666,7 @@ const StatsDashboardPage: React.FC = () => {
                 )}
               </Card>
             </Col>
-            <Col xs={24} xl={12}>
+            <Col xs={24} xl={chartSingleRow ? 24 : 12}>
               <Card title="下单用户情况">
                 {orderData.length > 0 ? (
                   <DualAxes {...buyerChartConfig} height={300} />