Skip to content

Commit 4cfdf81

Browse files
dolphin0618dolphin0618
committed
Merge branch 'feat/2.3.0' of github.com:dataelement/bisheng into feat/2.3.0
2 parents 0030f98 + 99b7faf commit 4cfdf81

1 file changed

Lines changed: 116 additions & 118 deletions

File tree

‎src/frontend/platform/src/pages/Dashboard/components/config/ChartSelector.tsx‎

Lines changed: 116 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -300,10 +300,10 @@ export default function ChartSelector({
300300
)
301301
}
302302

303+
303304
return (
304305
<div className="border-r flex flex-col h-full w-[440px] shrink-0 bg-background relative">
305-
{/* 标题区域 */}
306-
<div className="px-4 py-3 border-b flex items-center justify-between bg-muted/20">
306+
<div className="px-4 py-3 border-b flex items-center justify-between bg-muted/20 shrink-0">
307307
<div>
308308
<h3 className="text-base font-semibold">
309309
{t("chartSelector.title")}
@@ -315,8 +315,7 @@ export default function ChartSelector({
315315
</div>
316316

317317
<div className="flex-1 overflow-y-auto p-4 space-y-4">
318-
{/* 图表列表 */}
319-
<div className="max-h-64 overflow-y-auto space-y-2">
318+
<div className="space-y-2">
320319
<div>{t("chartSelector.selectCharts")}</div>
321320

322321
{/* 全选 */}
@@ -331,131 +330,130 @@ export default function ChartSelector({
331330
</div>
332331

333332
{/* 单个图表 */}
334-
{charts.length > 0 ? (
335-
charts.map(chart => (
336-
<div key={chart.id} className="flex items-center gap-2">
337-
<Checkbox
338-
checked={selectedCharts.includes(chart.id)}
339-
onCheckedChange={() => toggleChart(chart.id)}
340-
/>
341-
<span className="text-sm flex">
342-
<img
343-
src={`${__APP_ENV__.BASE_URL}/assets/dashboard/${chart.type}.png`}
344-
className="w-4 h-4 shrink-0 mt-0.5 mr-1"
345-
alt={chart.type}
333+
<div className="max-h-40 overflow-y-auto space-y-2">
334+
{charts.length > 0 ? (
335+
charts.map(chart => (
336+
<div key={chart.id} className="flex items-center gap-2">
337+
<Checkbox
338+
checked={selectedCharts.includes(chart.id)}
339+
onCheckedChange={() => toggleChart(chart.id)}
346340
/>
347-
{chart.name}
348-
{
349-
chart.dataset && (
350-
<span className="text-muted-foreground text-xs ml-4 mt-0.5">
351-
{getDatasetName(chart.dataset)}
352-
</span>
353-
)
354-
}
355-
</span>
341+
<span className="text-sm flex">
342+
<img
343+
src={`${__APP_ENV__.BASE_URL}/assets/dashboard/${chart.type}.png`}
344+
className="w-4 h-4 shrink-0 mt-0.5 mr-1"
345+
alt={chart.type}
346+
/>
347+
{chart.name}
348+
{
349+
chart.dataset && (
350+
<span className="text-muted-foreground text-xs ml-4 mt-0.5">
351+
{getDatasetName(chart.dataset)}
352+
</span>
353+
)
354+
}
355+
</span>
356+
</div>
357+
))
358+
) : (
359+
<div className="text-sm text-muted-foreground pl-4">
360+
{t("chartSelector.messages.noCharts")}
356361
</div>
357-
))
358-
) : (
359-
<div className="text-sm text-muted-foreground pl-4">
360-
{t("chartSelector.messages.noCharts")}
361-
</div>
362-
)}
363-
</div>
364-
365-
<div className="h-px bg-muted"></div>
366-
367-
{/* 配置区 */}
368-
<div className="space-y-3">
369-
<div className="text-md font-medium">
370-
{t("chartSelector.config")}
362+
)}
371363
</div>
372364

373-
{/* 展示类型 */}
374-
<div className="space-y-1">
375-
<label className="text-sm">
376-
{t("chartSelector.displayType")}
377-
</label>
378-
<Select value={displayType} onValueChange={setDisplayType}>
379-
<SelectTrigger className="h-9">
380-
<SelectValue />
381-
</SelectTrigger>
382-
<SelectContent>
383-
<SelectItem value={t("chartSelector.displayTypes.timeRange")}>
384-
{t("chartSelector.displayTypes.timeRange")}
385-
</SelectItem>
386-
<SelectItem value={t("chartSelector.displayTypes.time")}>
387-
{t("chartSelector.displayTypes.time")}
388-
</SelectItem>
389-
</SelectContent>
390-
</Select>
391-
</div>
365+
<div className="h-px bg-muted"></div>
392366

393-
{/* 时间粒度 */}
394-
<div className="space-y-1">
395-
<label className="text-sm">
396-
{t("chartSelector.timeGranularity")}
397-
</label>
398-
<Select value={timeGranularity} onValueChange={setTimeGranularity}>
399-
<SelectTrigger className="h-9">
400-
<SelectValue />
401-
</SelectTrigger>
402-
<SelectContent>
403-
<SelectItem value={t("chartSelector.granularities.yearMonth")}>
404-
{t("chartSelector.granularities.yearMonth")}
405-
</SelectItem>
406-
<SelectItem value={t("chartSelector.granularities.yearMonthDay")}>
407-
{t("chartSelector.granularities.yearMonthDay")}
408-
</SelectItem>
409-
<SelectItem value={t("chartSelector.granularities.yearMonthDayHour")}>
410-
{t("chartSelector.granularities.yearMonthDayHour")}
411-
</SelectItem>
412-
</SelectContent>
413-
</Select>
414-
</div>
367+
<div className="space-y-3">
368+
<div className="text-md font-medium">
369+
{t("chartSelector.config")}
370+
</div>
415371

416-
{/* 默认值 */}
417-
<div className="flex items-center gap-2">
418-
<Checkbox
419-
checked={isDefault}
420-
onCheckedChange={() => setIsDefault(prev => !prev)}
421-
/>
422-
<span className="text-sm">
423-
{t("chartSelector.setDefault")}
424-
</span>
425-
</div>
372+
<div className="space-y-1">
373+
<label className="text-sm">
374+
{t("chartSelector.displayType")}
375+
</label>
376+
<Select value={displayType} onValueChange={setDisplayType}>
377+
<SelectTrigger className="h-9">
378+
<SelectValue />
379+
</SelectTrigger>
380+
<SelectContent>
381+
<SelectItem value={t("chartSelector.displayTypes.timeRange")}>
382+
{t("chartSelector.displayTypes.timeRange")}
383+
</SelectItem>
384+
<SelectItem value={t("chartSelector.displayTypes.time")}>
385+
{t("chartSelector.displayTypes.time")}
386+
</SelectItem>
387+
</SelectContent>
388+
</Select>
389+
</div>
426390

427-
{/* 时间范围 */}
428-
{isDefault && <div className="space-y-1 flex flex-1 w-full">
429-
<AdvancedDatePicker
430-
granularity={getGranularity()}
431-
mode={getMode()}
432-
value={timeFilter}
433-
onChange={(val) => setTimeFilter(val)}
434-
placeholder={t("chartSelector.datePicker.placeholder")}
435-
/>
436-
</div>}
437-
</div>
391+
{/* 时间粒度 */}
392+
<div className="space-y-1">
393+
<label className="text-sm">
394+
{t("chartSelector.timeGranularity")}
395+
</label>
396+
<Select value={timeGranularity} onValueChange={setTimeGranularity}>
397+
<SelectTrigger className="h-9">
398+
<SelectValue />
399+
</SelectTrigger>
400+
<SelectContent>
401+
<SelectItem value={t("chartSelector.granularities.yearMonth")}>
402+
{t("chartSelector.granularities.yearMonth")}
403+
</SelectItem>
404+
<SelectItem value={t("chartSelector.granularities.yearMonthDay")}>
405+
{t("chartSelector.granularities.yearMonthDay")}
406+
</SelectItem>
407+
<SelectItem value={t("chartSelector.granularities.yearMonthDayHour")}>
408+
{t("chartSelector.granularities.yearMonthDayHour")}
409+
</SelectItem>
410+
</SelectContent>
411+
</Select>
412+
</div>
438413

439-
{/* 底部按钮 */}
440-
<div className="border-t bg-background p-4 absolute bottom-0 left-0 right-0">
441-
<div className="flex justify-end gap-2">
442-
<Button
443-
variant="outline"
444-
onClick={onCancel}
445-
className="flex-1"
446-
>
447-
{t("chartSelector.buttons.cancel")}
448-
</Button>
449-
<Button
450-
id="query_save"
451-
onClick={handleSave}
452-
className="flex-1"
453-
>
454-
{t("chartSelector.buttons.save")}
455-
</Button>
414+
{/* 默认值 */}
415+
<div className="flex items-center gap-2">
416+
<Checkbox
417+
checked={isDefault}
418+
onCheckedChange={() => setIsDefault(prev => !prev)}
419+
/>
420+
<span className="text-sm">
421+
{t("chartSelector.setDefault")}
422+
</span>
423+
</div>
424+
425+
{isDefault && (
426+
<div className="space-y-1 flex flex-1 w-full">
427+
<AdvancedDatePicker
428+
granularity={getGranularity()}
429+
mode={getMode()}
430+
value={timeFilter}
431+
onChange={(val) => setTimeFilter(val)}
432+
placeholder={t("chartSelector.datePicker.placeholder")}
433+
/>
434+
</div>
435+
)}
456436
</div>
457437
</div>
458438
</div>
439+
<div className="border-t bg-background p-4 shrink-0">
440+
<div className="flex justify-end gap-2">
441+
<Button
442+
variant="outline"
443+
onClick={onCancel}
444+
className="flex-1"
445+
>
446+
{t("chartSelector.buttons.cancel")}
447+
</Button>
448+
<Button
449+
id="query_save"
450+
onClick={handleSave}
451+
className="flex-1"
452+
>
453+
{t("chartSelector.buttons.save")}
454+
</Button>
455+
</div>
456+
</div>
459457
</div>
460458
)
461459
}

0 commit comments

Comments
 (0)