67 lines
1.9 KiB
TypeScript
Executable File
67 lines
1.9 KiB
TypeScript
Executable File
import React from "react";
|
|
import { Row, Col, Card, Radio, Button, Space, Typography } from "antd";
|
|
import { ReloadOutlined } from "@ant-design/icons";
|
|
|
|
const { Text } = Typography;
|
|
|
|
interface DeptDistribution {
|
|
id: string;
|
|
name: string;
|
|
count: number;
|
|
}
|
|
|
|
interface ChartControlsProps {
|
|
chartView: string;
|
|
setChartView: (view: string) => void;
|
|
selectedDept: string | null;
|
|
resetFilter: () => void;
|
|
deptDistribution: DeptDistribution[];
|
|
}
|
|
|
|
export default function ChartControls({
|
|
chartView,
|
|
setChartView,
|
|
selectedDept,
|
|
resetFilter,
|
|
deptDistribution,
|
|
}: ChartControlsProps): React.ReactElement {
|
|
return (
|
|
<Row className="mb-4">
|
|
<Col span={24}>
|
|
<Card className="shadow-sm">
|
|
<div className="flex justify-between items-center flex-wrap">
|
|
<Space>
|
|
<Text strong>图表控制: </Text>
|
|
<Radio.Group
|
|
value={chartView}
|
|
onChange={(e) => setChartView(e.target.value)}
|
|
optionType="button"
|
|
buttonStyle="solid"
|
|
>
|
|
<Radio.Button value="all">全部</Radio.Button>
|
|
<Radio.Button value="pie">饼图</Radio.Button>
|
|
<Radio.Button value="bar">条形图</Radio.Button>
|
|
</Radio.Group>
|
|
</Space>
|
|
<Space>
|
|
{selectedDept && (
|
|
<Button icon={<ReloadOutlined />} onClick={resetFilter}>
|
|
重置筛选
|
|
</Button>
|
|
)}
|
|
<Text type="secondary">
|
|
{selectedDept
|
|
? `已筛选: ${
|
|
deptDistribution.find((d) => d.id === selectedDept)
|
|
?.name || ""
|
|
}`
|
|
: "点击饼图可筛选部门"}
|
|
</Text>
|
|
</Space>
|
|
</div>
|
|
</Card>
|
|
</Col>
|
|
</Row>
|
|
);
|
|
}
|