Skip to content

Commit 6dd38fe

Browse files
mgkmgk
mgk
authored and
mgk
committed
feat: Chart Analysis
1 parent 2c07a9d commit 6dd38fe

4 files changed

Lines changed: 24 additions & 31 deletions

File tree

‎src/frontend/platform/src/pages/Dashboard/components/charts/QueryFilter.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,9 @@ import { DashboardComponent, QueryConfig } from "../../types/dataConfig"
1111
interface QueryFilterProps {
1212
component: DashboardComponent // Query the ID of the component, which is used to trigger the refresh of the associated chart
1313
isPreviewMode?: boolean
14-
onQuery?: (filter: any, hasQuery: boolean) => void
1514
}
1615

17-
export function QueryFilter({ component, isPreviewMode = false, onQuery }: QueryFilterProps) {
16+
export function QueryFilter({ component, isPreviewMode = false }: QueryFilterProps) {
1817
const { refreshChartsByQuery } = useEditorDashboardStore()
1918
const [date, setDate] = useState<Date | undefined>(undefined)
2019

@@ -24,7 +23,6 @@ export function QueryFilter({ component, isPreviewMode = false, onQuery }: Query
2423

2524
const handleQuery = () => {
2625
console.log("查询日期:", date)
27-
onQuery?.(filter, true)
2826
// Refresh the associated chart based on the query component ID
2927
refreshChartsByQuery(component.id, filter)
3028
}
@@ -51,11 +49,7 @@ export function QueryFilter({ component, isPreviewMode = false, onQuery }: Query
5149

5250
{/* 查询按钮 - 固定在右下角 */}
5351
<div className="absolute bottom-4 right-4">
54-
<Button onClick={(e) => {
55-
e.stopPropagation()
56-
e.preventDefault()
57-
handleQuery()
58-
}} size="sm" className="gap-1">
52+
<Button onClick={handleQuery} size="sm" className="gap-1">
5953
<Search className="h-4 w-4" />
6054
查询
6155
</Button>

‎src/frontend/platform/src/pages/Dashboard/components/editor/ComponentConfigDrawer.tsx‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,11 @@ export const CHART_TYPES: {
4040
{ label: "查询组件", value: ChartType.Query, hasStack: false }
4141
];
4242

43-
export function ComponentConfigDrawer({showChartSelector}: {showChartSelector:boolean}) {
43+
export function ComponentConfigDrawer() {
4444
const { editingComponent, updateEditingComponent } = useComponentEditorStore();
4545
const { refreshChart } = useEditorDashboardStore();
46-
46+
console.log(editingComponent,789);
47+
4748
// 折叠状态
4849
const [configCollapsed, setConfigCollapsed] = useState({
4950
basic: false,
@@ -190,7 +191,7 @@ export function ComponentConfigDrawer({showChartSelector}: {showChartSelector:bo
190191
if (editingComponent) {
191192
// 只更新 timeFilter，避免触发整个组件的重新初始化
192193
updateEditingComponent({
193-
...editingComponent, // 保持原有组件对象
194+
...editingComponent,
194195
data_config: {
195196
...editingComponent.data_config,
196197
timeFilter: val ? {
@@ -259,7 +260,7 @@ export function ComponentConfigDrawer({showChartSelector}: {showChartSelector:bo
259260

260261
return (
261262
<div className="h-full flex bg-background border-l border-border">
262-
{showChartSelector? (
263+
{editingComponent.type === 'query' ? (
263264
<ChartSelector
264265
charts={[
265266
{ id: '1', name: '堆叠条形图-图表名称', dataset: '会话500-数据集' },
@@ -299,7 +300,10 @@ export function ComponentConfigDrawer({showChartSelector}: {showChartSelector:bo
299300

300301
{configTab === "basic" ? (
301302
<>
302-
{/* 图表类型 */}
303+
{
304+
editingComponent.type !== 'metric' && (
305+
<>
306+
{/* 图表类型 */}
303307
<FormBlock label="图表类型" required>
304308
<Select
305309
value={chartType}
@@ -367,6 +371,10 @@ export function ComponentConfigDrawer({showChartSelector}: {showChartSelector:bo
367371
/>
368372
</CollapsibleBlock>
369373
)}
374+
</>
375+
)
376+
}
377+
370378

371379
{/* 值轴 / 指标 */}
372380
<CollapsibleBlock
@@ -392,7 +400,7 @@ export function ComponentConfigDrawer({showChartSelector}: {showChartSelector:bo
392400
</CollapsibleBlock>
393401

394402
{/* 排序优先级 */}
395-
<CollapsibleBlock title="排序优先级">
403+
{ editingComponent.type !== 'metric' && <CollapsibleBlock title="排序优先级">
396404
<div className="space-y-2">
397405
{sortPriorityFields.length === 0 ? (
398406
<div className="text-xs text-muted-foreground text-center py-2">
@@ -426,7 +434,7 @@ export function ComponentConfigDrawer({showChartSelector}: {showChartSelector:bo
426434
)}
427435
</div>
428436

429-
</CollapsibleBlock>
437+
</CollapsibleBlock>}
430438

431439
{/* 筛选 */}
432440
<div className="space-y-3">
@@ -479,7 +487,7 @@ export function ComponentConfigDrawer({showChartSelector}: {showChartSelector:bo
479487
</FormBlock>
480488

481489
{/* 结果显示 */}
482-
<FormBlock label="结果显示">
490+
{ editingComponent.type !== 'metric' &&<FormBlock label="结果显示">
483491
<div className="flex items-center gap-4">
484492
<label className="flex items-center gap-2 cursor-pointer">
485493
<input type="radio" checked={limitType === "all"} onChange={() => setLimitType("all")} className="h-4 w-4" />
@@ -491,7 +499,7 @@ export function ComponentConfigDrawer({showChartSelector}: {showChartSelector:bo
491499
<span className="text-sm text-muted-foreground">条</span>
492500
</label>
493501
</div>
494-
</FormBlock>
502+
</FormBlock>}
495503

496504
<Button className="w-full h-10 mt-4" onClick={handleUpdateChart}>更新图表数据</Button>
497505
</>

‎src/frontend/platform/src/pages/Dashboard/components/editor/ComponentWrapper.tsx‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,12 @@ interface ComponentWrapperProps {
2020
onDuplicate: (componentId: string) => void
2121
onCopyTo: (componentId: string, targetDashboardId: string) => void
2222
onDelete: (componentId: string) => void
23-
onQuery?: (componentId: string, filter: any, hasQuery: boolean) => void
2423
}
2524

2625
// 组件包装器，用于处理选中状态
2726
export function ComponentWrapper({
2827
dashboards, component, isPreviewMode, isDark,
29-
onDuplicate, onCopyTo, onDelete,onQuery
28+
onDuplicate, onCopyTo, onDelete
3029
}: ComponentWrapperProps) {
3130
const [isHovered, setIsHovered] = useState(false)
3231
const [isEditing, setIsEditing] = useState(false)
@@ -46,7 +45,6 @@ export function ComponentWrapper({
4645

4746
const handleClick = (e: React.MouseEvent) => {
4847
e.stopPropagation()
49-
onQuery(component.id, null, false)
5048
if (isPreviewMode) return
5149
if (editingComponent?.id === component.id) return
5250
copyFromDashboard(component.id)
@@ -215,10 +213,7 @@ export function ComponentWrapper({
215213
{/* Component content */}
216214
<div className={['query', 'metric'].includes(component.type) ? 'h-full overflow-hidden' : 'h-[calc(100%-2.5rem)] overflow-hidden'}>
217215
{component.type === 'query' ? (
218-
<QueryFilter isDark={isDark} component={componentData} isPreviewMode={isPreviewMode} onQuery={(filter, hasQuery) => {
219-
onQuery?.(component.id, filter, hasQuery)
220-
}}
221-
/>
216+
<QueryFilter isDark={isDark} component={componentData} isPreviewMode={isPreviewMode} />
222217
) : (
223218
<ChartContainer isDark={isDark} component={componentData} />
224219
)}

‎src/frontend/platform/src/pages/Dashboard/components/editor/EditorCanvas.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export function EditorCanvas({ isPreviewMode, dashboard }: EditorCanvasProps) {
4343
queryFn: getDashboards,
4444
// enabled: isHovered // Only fetch when hovered
4545
})
46-
const [showChartSelector, setShowChartSelector] = useState<boolean>(false)
46+
4747
// Mutation for copying component to another dashboard
4848
const copyToMutation = useMutation({
4949
mutationFn: ({ componentId, targetId }: { componentId: string; targetId: string }) =>
@@ -137,10 +137,7 @@ export function EditorCanvas({ isPreviewMode, dashboard }: EditorCanvasProps) {
137137
},
138138
})
139139
}
140-
const handleQuery = (componentId: string, filter: any, shouldShow: boolean) => {
141-
console.log(`组件 ${componentId} 触发了查询:`, filter, shouldShow)
142-
setShowChartSelector(shouldShow)
143-
}
140+
144141
const gridBackgroundStyle = useMemo(() => {
145142
if (isPreviewMode || !width || !mounted) return {};
146143

@@ -260,7 +257,6 @@ export function EditorCanvas({ isPreviewMode, dashboard }: EditorCanvasProps) {
260257
onDuplicate={handleDuplicate}
261258
onCopyTo={handleCopyTo}
262259
onDelete={handleDelete}
263-
onQuery={handleQuery}
264260
/>
265261
</div>
266262
))}
@@ -269,7 +265,7 @@ export function EditorCanvas({ isPreviewMode, dashboard }: EditorCanvasProps) {
269265
</div>
270266
</div>
271267
{/* 配置抽屉 */}
272-
<ComponentConfigDrawer showChartSelector={showChartSelector}/>
268+
<ComponentConfigDrawer />
273269
</div>
274270
</>
275271
)

0 commit comments

Comments
 (0)