|
|
@@ -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} />
|