50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { CustomMetricConfig, QueryResult } from "../types";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { AlertCircle } from "lucide-react";
|
|
|
|
interface CustomMetricSectionProps {
|
|
queryResult: QueryResult | null;
|
|
config: CustomMetricConfig;
|
|
onConfigChange: (updates: Partial<CustomMetricConfig>) => void;
|
|
}
|
|
|
|
/**
|
|
* 통계 카드 설정 섹션
|
|
* - 메트릭 설정, 아이콘, 색상
|
|
*
|
|
* TODO: 상세 설정 UI 추가 필요
|
|
*/
|
|
export function CustomMetricSection({ queryResult, config, onConfigChange }: CustomMetricSectionProps) {
|
|
// 쿼리 결과가 없으면 안내 메시지 표시
|
|
if (!queryResult || !queryResult.columns || queryResult.columns.length === 0) {
|
|
return (
|
|
<div className="rounded-lg bg-background p-3 shadow-sm">
|
|
<Label className="mb-2 block text-xs font-semibold">통계 카드 설정</Label>
|
|
<Alert>
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertDescription className="text-xs">
|
|
먼저 데이터 소스를 설정하고 쿼리를 테스트해주세요.
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-lg bg-background p-3 shadow-sm">
|
|
<Label className="mb-2 block text-xs font-semibold">통계 카드 설정</Label>
|
|
<Alert>
|
|
<AlertCircle className="h-4 w-4" />
|
|
<AlertDescription className="text-xs">
|
|
통계 카드 상세 설정 UI는 추후 추가 예정입니다.
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
);
|
|
}
|
|
|