차트 구현 1차 완료(바 차트 작동)

frontend/components/admin/dashboard/utils/chartDataTransform.ts

@@ -0,0 +1,61 @@
+import { QueryResult, ChartConfig, ChartData, ChartDataset } from "../types";
+
+/**
+ * 쿼리 결과를 차트 데이터로 변환
+ */
+export function transformQueryResultToChartData(queryResult: QueryResult, config: ChartConfig): ChartData | null {
+  if (!queryResult || !queryResult.rows.length || !config.xAxis) {
+    return null;
+  }
+
+  // X축 라벨 추출
+  const labels = queryResult.rows.map((row) => String(row[config.xAxis!] || ""));
+
+  // Y축 데이터 추출
+  const yAxisFields = Array.isArray(config.yAxis) ? config.yAxis : config.yAxis ? [config.yAxis] : [];
+
+  if (yAxisFields.length === 0) {
+    return null;
+  }
+
+  // 각 Y축 필드에 대해 데이터셋 생성
+  const datasets: ChartDataset[] = yAxisFields.map((field, index) => {
+    const data = queryResult.rows.map((row) => {
+      const value = row[field];
+      return typeof value === "number" ? value : parseFloat(String(value)) || 0;
+    });
+
+    return {
+      label: field,
+      data,
+      color: config.colors?.[index],
+    };
+  });
+
+  return {
+    labels,
+    datasets,
+  };
+}
+
+/**
+ * API 응답을 차트 데이터로 변환
+ */
+export function transformApiResponseToChartData(
+  apiData: Record<string, unknown>[],
+  config: ChartConfig,
+): ChartData | null {
+  // API 응답을 QueryResult 형식으로 변환
+  if (!apiData || apiData.length === 0 || !config.xAxis) {
+    return null;
+  }
+
+  const queryResult: QueryResult = {
+    columns: Object.keys(apiData[0]),
+    rows: apiData,
+    totalRows: apiData.length,
+    executionTime: 0,
+  };
+
+  return transformQueryResultToChartData(queryResult, config);
+}