47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ChartConfig, QueryResult, ChartDataSource } from "../types";
|
|
import { Label } from "@/components/ui/label";
|
|
import { ChartConfigPanel } from "../ChartConfigPanel";
|
|
|
|
interface ChartConfigSectionProps {
|
|
queryResult: QueryResult | null;
|
|
dataSource: ChartDataSource;
|
|
config: ChartConfig;
|
|
chartType?: string;
|
|
onConfigChange: (config: ChartConfig) => void;
|
|
}
|
|
|
|
/**
|
|
* 차트 설정 섹션
|
|
* - 차트 타입, 축 매핑, 스타일 설정
|
|
*/
|
|
export function ChartConfigSection({
|
|
queryResult,
|
|
dataSource,
|
|
config,
|
|
chartType,
|
|
onConfigChange,
|
|
}: ChartConfigSectionProps) {
|
|
// 쿼리 결과가 없으면 표시하지 않음
|
|
if (!queryResult || !queryResult.columns || queryResult.columns.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-lg bg-background p-3 shadow-sm">
|
|
<Label className="mb-2 block text-xs font-semibold">차트 설정</Label>
|
|
<ChartConfigPanel
|
|
config={config}
|
|
queryResult={queryResult}
|
|
onConfigChange={onConfigChange}
|
|
chartType={chartType}
|
|
dataSourceType={dataSource.type}
|
|
query={dataSource.query}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|