Skip to content

Commit 2660845

Browse files
chenghh-9609chenghh-9609
authored
update data ratio detail page (#78)
* feat: Update site name to DataMate and refine text for AI data processing * feat: Refactor settings page and implement model access functionality - Created a new ModelAccess component for managing model configurations. - Removed the old Settings component and replaced it with a new SettingsPage component that integrates ModelAccess, SystemConfig, and WebhookConfig. - Added SystemConfig component for managing system settings. - Implemented WebhookConfig component for managing webhook configurations. - Updated API functions for model management in settings.apis.ts. - Adjusted routing to point to the new SettingsPage component. * feat: Implement Data Collection Page with Task Management and Execution Log - Created DataCollectionPage component to manage data collection tasks. - Added TaskManagement and ExecutionLog components for task handling and logging. - Integrated task operations including start, stop, edit, and delete functionalities. - Implemented filtering and searching capabilities in task management. - Introduced SimpleCronScheduler for scheduling tasks with cron expressions. - Updated CreateTask component to utilize new scheduling and template features. - Enhanced BasicInformation component to conditionally render fields based on visibility settings. - Refactored ImportConfiguration component to remove NAS import section. * feat: Update task creation API endpoint and enhance task creation form with new fields and validation * Refactor file upload and operator management components - Removed unnecessary console logs from file download and export functions. - Added size property to TaskItem interface for better task management. - Simplified TaskUpload component by utilizing useFileSliceUpload hook for file upload logic. - Enhanced OperatorPluginCreate component to handle file uploads and parsing more efficiently. - Updated ConfigureStep component to use Ant Design Form for better data handling and validation. - Improved PreviewStep component to navigate back to the operator market. - Added support for additional file types in UploadStep component. - Implemented delete operator functionality in OperatorMarketPage with confirmation prompts. - Cleaned up unused API functions in operator.api.ts to streamline the codebase. - Fixed number formatting utility to handle zero values correctly. * Refactor Knowledge Generation to Knowledge Base - Created new API service for Knowledge Base operations including querying, creating, updating, and deleting knowledge bases and files. - Added constants for Knowledge Base status and type mappings. - Defined models for Knowledge Base and related files. - Removed obsolete Knowledge Base creation and home components, replacing them with new implementations under the Knowledge Base structure. - Updated routing to reflect the new Knowledge Base paths. - Adjusted menu items to align with the new Knowledge Base terminology. - Modified ModelAccess interface to include modelName and type properties. * feat: Implement Knowledge Base Page with CRUD operations and data management - Added KnowledgeBasePage component for displaying and managing knowledge bases. - Integrated search and filter functionalities with SearchControls component. - Implemented CreateKnowledgeBase component for creating and editing knowledge bases. - Enhanced AddDataDialog for file uploads and dataset selections. - Introduced TableTransfer component for managing data transfers between tables. - Updated API functions for knowledge base operations, including file management. - Refactored knowledge base model to include file status and metadata. - Adjusted routing to point to the new KnowledgeBasePage. * feat: enhance OperatorPluginCreate and ConfigureStep for better upload handling and UI updates * refactor: remove unused components and clean up API logging in KnowledgeBase * feat: update icons in various components and improve styling for better UI consistency * fix: adjust upload step handling and improve error display in configuration step * feat: Add RatioTransfer component for dataset selection and configuration - Implemented RatioTransfer component to manage dataset selection and ratio configuration. - Integrated dataset fetching with search and filter capabilities. - Added RatioConfig component for displaying and updating selected datasets' configurations. - Enhanced SelectDataset component with improved UI and functionality for dataset selection. - Updated RatioTasksPage to utilize new ratio task status mapping and improved error handling for task deletion. - Refactored ratio model and constants for better type safety and clarity. - Changed Vite configuration to use local backend service for development. * feat: Add .editorconfig and enhance SystemConfig with table for settings display * feat: Enhance parameter configuration for range inputs and update default values * feat: Update site name to DataMate and refine text for AI data processing * Refactor file upload and operator management components - Removed unnecessary console logs from file download and export functions. - Added size property to TaskItem interface for better task management. - Simplified TaskUpload component by utilizing useFileSliceUpload hook for file upload logic. - Enhanced OperatorPluginCreate component to handle file uploads and parsing more efficiently. - Updated ConfigureStep component to use Ant Design Form for better data handling and validation. - Improved PreviewStep component to navigate back to the operator market. - Added support for additional file types in UploadStep component. - Implemented delete operator functionality in OperatorMarketPage with confirmation prompts. - Cleaned up unused API functions in operator.api.ts to streamline the codebase. - Fixed number formatting utility to handle zero values correctly. * Refactor Knowledge Generation to Knowledge Base - Created new API service for Knowledge Base operations including querying, creating, updating, and deleting knowledge bases and files. - Added constants for Knowledge Base status and type mappings. - Defined models for Knowledge Base and related files. - Removed obsolete Knowledge Base creation and home components, replacing them with new implementations under the Knowledge Base structure. - Updated routing to reflect the new Knowledge Base paths. - Adjusted menu items to align with the new Knowledge Base terminology. - Modified ModelAccess interface to include modelName and type properties. * feat: Implement Knowledge Base Page with CRUD operations and data management - Added KnowledgeBasePage component for displaying and managing knowledge bases. - Integrated search and filter functionalities with SearchControls component. - Implemented CreateKnowledgeBase component for creating and editing knowledge bases. - Enhanced AddDataDialog for file uploads and dataset selections. - Introduced TableTransfer component for managing data transfers between tables. - Updated API functions for knowledge base operations, including file management. - Refactored knowledge base model to include file status and metadata. - Adjusted routing to point to the new KnowledgeBasePage. * feat: enhance OperatorPluginCreate and ConfigureStep for better upload handling and UI updates * feat: update icons in various components and improve styling for better UI consistency * fix: adjust upload step handling and improve error display in configuration step * feat: Update site name to DataMate and refine text for AI data processing * Refactor file upload and operator management components - Removed unnecessary console logs from file download and export functions. - Added size property to TaskItem interface for better task management. - Simplified TaskUpload component by utilizing useFileSliceUpload hook for file upload logic. - Enhanced OperatorPluginCreate component to handle file uploads and parsing more efficiently. - Updated ConfigureStep component to use Ant Design Form for better data handling and validation. - Improved PreviewStep component to navigate back to the operator market. - Added support for additional file types in UploadStep component. - Implemented delete operator functionality in OperatorMarketPage with confirmation prompts. - Cleaned up unused API functions in operator.api.ts to streamline the codebase. - Fixed number formatting utility to handle zero values correctly. * Refactor Knowledge Generation to Knowledge Base - Created new API service for Knowledge Base operations including querying, creating, updating, and deleting knowledge bases and files. - Added constants for Knowledge Base status and type mappings. - Defined models for Knowledge Base and related files. - Removed obsolete Knowledge Base creation and home components, replacing them with new implementations under the Knowledge Base structure. - Updated routing to reflect the new Knowledge Base paths. - Adjusted menu items to align with the new Knowledge Base terminology. - Modified ModelAccess interface to include modelName and type properties. * feat: Implement Knowledge Base Page with CRUD operations and data management - Added KnowledgeBasePage component for displaying and managing knowledge bases. - Integrated search and filter functionalities with SearchControls component. - Implemented CreateKnowledgeBase component for creating and editing knowledge bases. - Enhanced AddDataDialog for file uploads and dataset selections. - Introduced TableTransfer component for managing data transfers between tables. - Updated API functions for knowledge base operations, including file management. - Refactored knowledge base model to include file status and metadata. - Adjusted routing to point to the new KnowledgeBasePage. * feat: enhance OperatorPluginCreate and ConfigureStep for better upload handling and UI updates * feat: update icons in various components and improve styling for better UI consistency * fix: adjust upload step handling and improve error display in configuration step * feat: add settings drawer and integrate SettingsPage component * feat: add ratio task management features including detail view and API integration * feat: enable destruction of hidden settings drawer to free up resources * feat: add data metrics and ratio display components with charts for enhanced data visualization
1 parent 6bbde0e commit 2660845

File tree

9 files changed

+302
-113
lines changed

9 files changed

+302
-113
lines changed

‎frontend/src/components/DetailHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ function DetailHeader<T>({
6161
{data?.status && (
6262
<Tag color={data.status?.color}>
6363
<div className="flex items-center gap-2 text-xs">
64-
<span>{data.status?.icon}</span>
64+
{data.status?.icon && <span>{data.status?.icon}</span>}
6565
<span>{data.status?.label}</span>
6666
</div>
6767
</Tag>

‎frontend/src/pages/Layout/Sidebar.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@ const AsiderAndHeaderLayout = () => {
183183
open={settingVisible}
184184
onClose={() => setSettingVisible(false)}
185185
bodyStyle={{ padding: 0 }}
186+
destroyOnHidden={true}
186187
>
187188
<SettingsPage></SettingsPage>
188189
</Drawer>

‎frontend/src/pages/RatioTask/Detail/DataMetrics.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { Card } from "antd"
2+
import { BarChart3, Database, Users, Zap } from "lucide-react"
3+
4+
const metrics = [
5+
{
6+
label: "总数据量",
7+
value: "2.5M",
8+
icon: Database,
9+
change: "+12.5%",
10+
color: "text-blue-400",
11+
},
12+
{
13+
label: "配比成功率",
14+
value: "94.2%",
15+
icon: BarChart3,
16+
change: "+2.1%",
17+
color: "text-emerald-400",
18+
},
19+
{
20+
label: "处理速度",
21+
value: "185K/s",
22+
icon: Zap,
23+
change: "+8.3%",
24+
color: "text-amber-400",
25+
},
26+
{
27+
label: "活跃用户",
28+
value: "156.8K",
29+
icon: Users,
30+
change: "+5.2%",
31+
color: "text-purple-400",
32+
},
33+
]
34+
35+
export default function DataMetrics() {
36+
return (
37+
<div className="border-card grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-8">
38+
{metrics.map((metric, idx) => {
39+
const Icon = metric.icon
40+
return (
41+
<div
42+
key={idx}
43+
className="border-border bg-card/50 backdrop-blur p-4 hover:bg-card/70 transition-colors cursor-pointer"
44+
>
45+
<div className="flex items-start justify-between mb-3">
46+
<div className={`p-2 rounded-lg bg-muted/50 ${metric.color}`}>
47+
<Icon className="w-5 h-5" />
48+
</div>
49+
<span className="text-xs font-medium text-emerald-400">{metric.change}</span>
50+
</div>
51+
<p className="text-sm text-muted-foreground mb-1">{metric.label}</p>
52+
<p className="text-2xl font-bold text-foreground">{metric.value}</p>
53+
</div>
54+
)
55+
})}
56+
</div>
57+
)
58+
}

‎frontend/src/pages/RatioTask/Detail/DataRatioChart.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import {
2+
BarChart,
3+
Bar,
4+
XAxis,
5+
YAxis,
6+
CartesianGrid,
7+
Tooltip,
8+
Legend,
9+
ResponsiveContainer,
10+
LineChart,
11+
Line,
12+
} from "recharts"
13+
14+
const chartData = [
15+
{ name: "一月", 配比率: 65, 成功数: 2400, 失败数: 240 },
16+
{ name: "二月", 配比率: 72, 成功数: 2210, 失败数: 221 },
17+
{ name: "三月", 配比率: 78, 成功数: 2290, 失败数: 229 },
18+
{ name: "四月", 配比率: 84, 成功数: 2000, 失败数: 200 },
19+
{ name: "五月", 配比率: 90, 成功数: 2181, 失败数: 218 },
20+
{ name: "六月", 配比率: 94, 成功数: 2500, 失败数: 250 },
21+
]
22+
23+
export default function DataRatioChart() {
24+
return (
25+
<div className="lg:col-span-3 space-y-6">
26+
<div className="border-border bg-card/50 backdrop-blur p-6">
27+
<h3 className="text-base font-semibold text-foreground mb-4">配比趋势分析</h3>
28+
<ResponsiveContainer width="100%" height={300}>
29+
<BarChart data={chartData}>
30+
<CartesianGrid strokeDasharray="3 3" stroke="rgb(var(--border))" />
31+
<XAxis dataKey="name" stroke="rgb(var(--muted-foreground))" />
32+
<YAxis stroke="rgb(var(--muted-foreground))" />
33+
<Tooltip
34+
contentStyle={{
35+
backgroundColor: "rgb(var(--card))",
36+
border: "1px solid rgb(var(--border))",
37+
borderRadius: "8px",
38+
}}
39+
cursor={{ fill: "rgba(59, 130, 246, 0.1)" }}
40+
/>
41+
<Legend />
42+
<Bar dataKey="成功数" stackId="a" fill="#3b82f6" radius={[8, 8, 0, 0]} />
43+
<Bar dataKey="失败数" stackId="a" fill="#ef4444" radius={[8, 8, 0, 0]} />
44+
</BarChart>
45+
</ResponsiveContainer>
46+
</div>
47+
48+
<div className="border-border bg-card/50 backdrop-blur p-6">
49+
<h3 className="text-base font-semibold text-foreground mb-4">成功率曲线</h3>
50+
<ResponsiveContainer width="100%" height={250}>
51+
<LineChart data={chartData}>
52+
<CartesianGrid strokeDasharray="3 3" stroke="rgb(var(--border))" />
53+
<XAxis dataKey="name" stroke="rgb(var(--muted-foreground))" />
54+
<YAxis stroke="rgb(var(--muted-foreground))" />
55+
<Tooltip
56+
contentStyle={{
57+
backgroundColor: "rgb(var(--card))",
58+
border: "1px solid rgb(var(--border))",
59+
borderRadius: "8px",
60+
}}
61+
cursor={{ stroke: "rgba(34, 197, 94, 0.2)" }}
62+
/>
63+
<Line
64+
type="monotone"
65+
dataKey="配比率"
66+
stroke="#22c55e"
67+
strokeWidth={2}
68+
dot={{ fill: "#22c55e", r: 4 }}
69+
activeDot={{ r: 6 }}
70+
/>
71+
</LineChart>
72+
</ResponsiveContainer>
73+
</div>
74+
</div>
75+
)
76+
}

‎frontend/src/pages/RatioTask/Detail/RatioDisplay.tsx‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
import { BarChart3, Layers } from "lucide-react";
2+
import {
3+
PieChart,
4+
Pie,
5+
Cell,
6+
Tooltip,
7+
ResponsiveContainer,
8+
BarChart,
9+
Bar,
10+
XAxis,
11+
YAxis,
12+
CartesianGrid,
13+
} from "recharts";
14+
15+
interface DatasetRatio {
16+
name: string;
17+
ratio: number;
18+
count: number;
19+
color: string;
20+
}
21+
22+
export default function RatioDisplay() {
23+
const datasets: DatasetRatio[] = [
24+
{ name: "用户行为数据集", ratio: 45, count: 450000, color: "#3b82f6" },
25+
{ name: "交易记录数据集", ratio: 30, count: 300000, color: "#8b5cf6" },
26+
{ name: "产品信息数据集", ratio: 15, count: 150000, color: "#ec4899" },
27+
{ name: "评价反馈数据集", ratio: 10, count: 100000, color: "#f59e0b" },
28+
];
29+
30+
const chartData = datasets.map((d) => ({
31+
name: d.name,
32+
value: d.ratio,
33+
count: d.count,
34+
fill: d.color,
35+
}));
36+
37+
return (
38+
<div className="mt-8">
39+
<h3 className="text-lg font-semibold text-foreground mb-6 flex items-center gap-2">
40+
数据集配比信息
41+
</h3>
42+
43+
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
44+
{/* 饼图展示比例 */}
45+
<div className="flex items-center justify-center">
46+
<ResponsiveContainer width="100%" height={300}>
47+
<PieChart>
48+
<Pie
49+
data={chartData}
50+
cx="50%"
51+
cy="50%"
52+
labelLine={false}
53+
label={({ name, value }) => `${value}%`}
54+
outerRadius={80}
55+
fill="#8884d8"
56+
dataKey="value"
57+
>
58+
{chartData.map((entry, index) => (
59+
<Cell key={`cell-${index}`} fill={entry.fill} />
60+
))}
61+
</Pie>
62+
<Tooltip formatter={(value) => `${value}%`} />
63+
</PieChart>
64+
</ResponsiveContainer>
65+
</div>
66+
67+
{/* 数据集详情列表 */}
68+
<div className="space-y-4">
69+
{datasets.map((dataset, index) => (
70+
<div key={index} className="space-y-2">
71+
<div className="flex items-center justify-between">
72+
<div className="flex items-center gap-3">
73+
<div
74+
className="w-3 h-3 rounded-full"
75+
style={{ backgroundColor: dataset.color }}
76+
></div>
77+
<span className="font-medium text-foreground text-sm">
78+
{dataset.name}
79+
</span>
80+
</div>
81+
<span className="text-sm font-semibold text-foreground">
82+
{dataset.ratio}%
83+
</span>
84+
</div>
85+
86+
{/* 比例条形图 */}
87+
<div className="flex items-center gap-3">
88+
<div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
89+
<div
90+
className="h-full rounded-full transition-all"
91+
style={{
92+
width: `${dataset.ratio}%`,
93+
backgroundColor: dataset.color,
94+
}}
95+
></div>
96+
</div>
97+
<span className="text-xs text-muted-foreground min-w-fit">
98+
{dataset.count.toLocaleString()}
99+
</span>
100+
</div>
101+
</div>
102+
))}
103+
</div>
104+
</div>
105+
</div>
106+
);
107+
}

0 commit comments

Comments
 (0)