1545 lines
58 KiB
TypeScript
1545 lines
58 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
|
|
import {
|
|
BarChart, Bar, LineChart, Line, AreaChart, Area,
|
|
XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
|
|
} from "recharts";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { ScrollToTop } from "@/components/common/ScrollToTop";
|
|
import { cn } from "@/lib/utils";
|
|
import { apiClient } from "@/lib/api/client";
|
|
|
|
// ============================================
|
|
// 공통 상수
|
|
// ============================================
|
|
const COLORS = [
|
|
"#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6",
|
|
"#ec4899", "#06b6d4", "#84cc16", "#f97316", "#14b8a6",
|
|
];
|
|
|
|
function ChartTooltip({ active, payload, label }: any) {
|
|
if (!active || !payload?.length) return null;
|
|
return (
|
|
<div className="rounded-lg border border-border bg-popover px-3 py-2 shadow-lg">
|
|
<p className="mb-1.5 text-xs font-semibold text-popover-foreground">{label}</p>
|
|
{payload.map((entry: any, i: number) => (
|
|
<div key={i} className="flex items-center gap-2 text-xs">
|
|
<span className="h-2.5 w-2.5 shrink-0 rounded-sm" style={{ background: entry.color }} />
|
|
<span className="text-muted-foreground">{entry.name}:</span>
|
|
<span className="font-medium tabular-nums text-popover-foreground">
|
|
{typeof entry.value === "number" ? entry.value.toLocaleString() : entry.value}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const AGG_METHODS = [
|
|
{ id: "sum", name: "합계 (SUM)" },
|
|
{ id: "avg", name: "평균 (AVG)" },
|
|
{ id: "max", name: "최대 (MAX)" },
|
|
{ id: "min", name: "최소 (MIN)" },
|
|
{ id: "count", name: "건수 (COUNT)" },
|
|
];
|
|
|
|
const CHART_TYPES = [
|
|
{ id: "bar", name: "막대" },
|
|
{ id: "line", name: "선" },
|
|
{ id: "area", name: "영역" },
|
|
];
|
|
|
|
const DATE_PRESETS = [
|
|
{ id: "today", name: "오늘" },
|
|
{ id: "week", name: "이번주" },
|
|
{ id: "month", name: "이번달" },
|
|
{ id: "quarter", name: "이번분기" },
|
|
{ id: "year", name: "올해" },
|
|
{ id: "prevMonth", name: "전월" },
|
|
{ id: "last3m", name: "최근3개월" },
|
|
{ id: "last6m", name: "최근6개월" },
|
|
];
|
|
|
|
const FILTER_OPERATORS: Record<string, { id: string; name: string }[]> = {
|
|
select: [
|
|
{ id: "eq", name: "=" },
|
|
{ id: "neq", name: "≠" },
|
|
{ id: "in", name: "포함(IN)" },
|
|
],
|
|
number: [
|
|
{ id: "eq", name: "=" },
|
|
{ id: "neq", name: "≠" },
|
|
{ id: "gt", name: ">" },
|
|
{ id: "gte", name: "≥" },
|
|
{ id: "lt", name: "<" },
|
|
{ id: "lte", name: "≤" },
|
|
],
|
|
};
|
|
|
|
// ============================================
|
|
// 타입 정의 (외부 export)
|
|
// ============================================
|
|
export interface ReportMetric {
|
|
id: string;
|
|
name: string;
|
|
unit: string;
|
|
color: string;
|
|
isRate?: boolean;
|
|
}
|
|
|
|
export interface ReportGroupByOption {
|
|
id: string;
|
|
name: string;
|
|
}
|
|
|
|
export interface ReportThreshold {
|
|
id: string;
|
|
label: string;
|
|
defaultValue: number;
|
|
unit: string;
|
|
}
|
|
|
|
export interface ReportColumnDef {
|
|
id: string;
|
|
name: string;
|
|
align?: "left" | "right";
|
|
format?: "number" | "text" | "badge" | "date";
|
|
}
|
|
|
|
export interface FilterFieldDef {
|
|
id: string;
|
|
name: string;
|
|
type: "select" | "number";
|
|
optionKey?: string;
|
|
}
|
|
|
|
export interface ReportConfig {
|
|
key: string;
|
|
title: string;
|
|
description: string;
|
|
apiEndpoint: string;
|
|
metrics: ReportMetric[];
|
|
groupByOptions: ReportGroupByOption[];
|
|
defaultGroupBy: string;
|
|
defaultMetrics: string[];
|
|
thresholds: ReportThreshold[];
|
|
filterFieldDefs: FilterFieldDef[];
|
|
drilldownColumns: ReportColumnDef[];
|
|
rawDataColumns: ReportColumnDef[];
|
|
enrichRow?: (row: Record<string, any>) => Record<string, any>;
|
|
emptyMessage: string;
|
|
}
|
|
|
|
interface ConditionFilter {
|
|
id: number;
|
|
logic: "AND" | "OR" | "";
|
|
field: string;
|
|
operator: string;
|
|
value: string;
|
|
values: string[];
|
|
}
|
|
|
|
interface ConditionGroup {
|
|
id: number;
|
|
name: string;
|
|
metrics: string[];
|
|
aggMethod: string;
|
|
chartType: string;
|
|
collapsed: boolean;
|
|
filters: ConditionFilter[];
|
|
}
|
|
|
|
interface FilterField {
|
|
id: string;
|
|
name: string;
|
|
type: "select" | "number";
|
|
options: { value: string; label: string }[];
|
|
}
|
|
|
|
interface Preset {
|
|
name: string;
|
|
desc: string;
|
|
config: {
|
|
groupBy: string;
|
|
startDate: string;
|
|
endDate: string;
|
|
conditions: ConditionGroup[];
|
|
};
|
|
savedAt: string;
|
|
}
|
|
|
|
// ============================================
|
|
// 유틸 함수
|
|
// ============================================
|
|
function getDatePresetRange(preset: string): { start: string; end: string } {
|
|
const today = new Date();
|
|
let s = new Date(today);
|
|
let e = new Date(today);
|
|
|
|
switch (preset) {
|
|
case "today":
|
|
break;
|
|
case "week":
|
|
s.setDate(today.getDate() - today.getDay());
|
|
e.setDate(s.getDate() + 6);
|
|
break;
|
|
case "month":
|
|
s.setDate(1);
|
|
e = new Date(today.getFullYear(), today.getMonth() + 1, 0);
|
|
break;
|
|
case "quarter": {
|
|
const q = Math.floor(today.getMonth() / 3);
|
|
s = new Date(today.getFullYear(), q * 3, 1);
|
|
e = new Date(today.getFullYear(), q * 3 + 3, 0);
|
|
break;
|
|
}
|
|
case "year":
|
|
s = new Date(today.getFullYear(), 0, 1);
|
|
e = new Date(today.getFullYear(), 11, 31);
|
|
break;
|
|
case "prevMonth":
|
|
s = new Date(today.getFullYear(), today.getMonth() - 1, 1);
|
|
e = new Date(today.getFullYear(), today.getMonth(), 0);
|
|
break;
|
|
case "last3m":
|
|
s = new Date(today.getFullYear(), today.getMonth() - 3, today.getDate());
|
|
break;
|
|
case "last6m":
|
|
s = new Date(today.getFullYear(), today.getMonth() - 6, today.getDate());
|
|
break;
|
|
}
|
|
|
|
return {
|
|
start: s.toISOString().split("T")[0],
|
|
end: e.toISOString().split("T")[0],
|
|
};
|
|
}
|
|
|
|
function getGroupKey(row: Record<string, any>, groupBy: string): string {
|
|
const dateStr = row.date || "";
|
|
switch (groupBy) {
|
|
case "daily":
|
|
return dateStr.substring(0, 10) || "미지정";
|
|
case "weekly": {
|
|
if (!dateStr) return "미지정";
|
|
const dt = new Date(dateStr);
|
|
const weekNum = Math.ceil(
|
|
((dt.getTime() - new Date(dt.getFullYear(), 0, 1).getTime()) / 86400000 +
|
|
new Date(dt.getFullYear(), 0, 1).getDay() + 1) / 7
|
|
);
|
|
return `${dt.getFullYear()}-W${String(weekNum).padStart(2, "0")}`;
|
|
}
|
|
case "monthly":
|
|
return dateStr.substring(0, 7) || "미지정";
|
|
case "quarterly": {
|
|
if (!dateStr) return "미지정";
|
|
const m = parseInt(dateStr.substring(5, 7));
|
|
return `${dateStr.substring(0, 4)}-Q${Math.ceil(m / 3)}`;
|
|
}
|
|
default:
|
|
return row[groupBy] || "미지정";
|
|
}
|
|
}
|
|
|
|
function aggregateValues(
|
|
rows: Record<string, any>[],
|
|
metricId: string,
|
|
method: string
|
|
): number {
|
|
if (!rows.length) return 0;
|
|
const vals = rows.map((r) => Number(r[metricId]) || 0);
|
|
switch (method) {
|
|
case "sum": return vals.reduce((a, b) => a + b, 0);
|
|
case "avg": return Math.round((vals.reduce((a, b) => a + b, 0) / vals.length) * 10) / 10;
|
|
case "max": return Math.max(...vals);
|
|
case "min": return Math.min(...vals);
|
|
case "count": return rows.length;
|
|
default: return vals.reduce((a, b) => a + b, 0);
|
|
}
|
|
}
|
|
|
|
function evalFilter(
|
|
rec: Record<string, any>,
|
|
f: ConditionFilter,
|
|
filterFields: FilterField[]
|
|
): boolean {
|
|
const field = filterFields.find((x) => x.id === f.field);
|
|
if (!field) return true;
|
|
|
|
const rv = rec[f.field];
|
|
|
|
if (field.type === "select") {
|
|
switch (f.operator) {
|
|
case "eq": return !f.value || rv === f.value;
|
|
case "neq": return !f.value || rv !== f.value;
|
|
case "in": return f.values.length === 0 || f.values.includes(rv);
|
|
}
|
|
} else {
|
|
const nv = parseFloat(rv) || 0;
|
|
const cv = parseFloat(f.value) || 0;
|
|
switch (f.operator) {
|
|
case "eq": return !f.value || nv === cv;
|
|
case "neq": return !f.value || nv !== cv;
|
|
case "gt": return !f.value || nv > cv;
|
|
case "gte": return !f.value || nv >= cv;
|
|
case "lt": return !f.value || nv < cv;
|
|
case "lte": return !f.value || nv <= cv;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function applyConditionFilters(
|
|
data: Record<string, any>[],
|
|
filters: ConditionFilter[],
|
|
filterFields: FilterField[]
|
|
): Record<string, any>[] {
|
|
if (!filters.length) return data;
|
|
return data.filter((d) => {
|
|
let res = evalFilter(d, filters[0], filterFields);
|
|
for (let i = 1; i < filters.length; i++) {
|
|
const v = evalFilter(d, filters[i], filterFields);
|
|
res = filters[i].logic === "OR" ? res || v : res && v;
|
|
}
|
|
return res;
|
|
});
|
|
}
|
|
|
|
function formatNumber(n: number): string {
|
|
return n.toLocaleString("ko-KR");
|
|
}
|
|
|
|
function renderCellValue(row: Record<string, any>, col: ReportColumnDef): React.ReactNode {
|
|
const val = row[col.id];
|
|
switch (col.format) {
|
|
case "number":
|
|
return formatNumber(Number(val) || 0);
|
|
case "date":
|
|
return String(val || "").substring(0, 10);
|
|
case "badge":
|
|
return <Badge variant="outline">{val || "-"}</Badge>;
|
|
default:
|
|
return String(val ?? "");
|
|
}
|
|
}
|
|
|
|
// ============================================
|
|
// ReportEngine 컴포넌트
|
|
// ============================================
|
|
interface ReportEngineProps {
|
|
config: ReportConfig;
|
|
}
|
|
|
|
export default function ReportEngine({ config }: ReportEngineProps) {
|
|
const [rawData, setRawData] = useState<Record<string, any>[]>([]);
|
|
const [filterOptions, setFilterOptions] = useState<Record<string, { value: string; label: string }[]>>({});
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const [groupBy, setGroupBy] = useState(config.defaultGroupBy);
|
|
const [startDate, setStartDate] = useState("");
|
|
const [endDate, setEndDate] = useState("");
|
|
const [activePreset, setActivePreset] = useState("last6m");
|
|
const [filterOpen, setFilterOpen] = useState(true);
|
|
|
|
const [conditions, setConditions] = useState<ConditionGroup[]>([]);
|
|
const condIdRef = useRef(0);
|
|
const filterIdRef = useRef(0);
|
|
|
|
const [viewMode, setViewMode] = useState<"table" | "card">("table");
|
|
const [drilldownLabel, setDrilldownLabel] = useState<string | null>(null);
|
|
const [rawDataOpen, setRawDataOpen] = useState(false);
|
|
|
|
const [presets, setPresets] = useState<Preset[]>([]);
|
|
const [presetModalOpen, setPresetModalOpen] = useState(false);
|
|
const [presetName, setPresetName] = useState("");
|
|
const [presetDesc, setPresetDesc] = useState("");
|
|
const [selectedPresetIdx, setSelectedPresetIdx] = useState("");
|
|
|
|
const [thresholdValues, setThresholdValues] = useState<Record<string, number>>(() => {
|
|
const defaults: Record<string, number> = {};
|
|
config.thresholds.forEach((t) => { defaults[t.id] = t.defaultValue; });
|
|
return defaults;
|
|
});
|
|
|
|
const [refreshInterval, setRefreshInterval] = useState(0);
|
|
const refreshTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
|
|
|
const PRESET_KEY = `${config.key}_presets`;
|
|
|
|
const filterFields: FilterField[] = useMemo(
|
|
() =>
|
|
config.filterFieldDefs.map((def) => ({
|
|
id: def.id,
|
|
name: def.name,
|
|
type: def.type,
|
|
options: def.type === "select" && def.optionKey
|
|
? filterOptions[def.optionKey] || []
|
|
: [],
|
|
})),
|
|
[config.filterFieldDefs, filterOptions]
|
|
);
|
|
|
|
const aggLabel = (method: string) =>
|
|
({ sum: "합계", avg: "평균", max: "최대", min: "최소", count: "건수" }[method] || "합계");
|
|
|
|
// ============================================
|
|
// 초기화
|
|
// ============================================
|
|
useEffect(() => {
|
|
const range = getDatePresetRange("last6m");
|
|
setStartDate(range.start);
|
|
setEndDate(range.end);
|
|
|
|
condIdRef.current = 1;
|
|
setConditions([
|
|
{
|
|
id: 1,
|
|
name: "조건 1",
|
|
metrics: [...config.defaultMetrics],
|
|
aggMethod: "sum",
|
|
chartType: "bar",
|
|
collapsed: false,
|
|
filters: [],
|
|
},
|
|
]);
|
|
|
|
loadPresets();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (startDate && endDate) {
|
|
fetchData();
|
|
}
|
|
}, [startDate, endDate]);
|
|
|
|
useEffect(() => {
|
|
if (refreshTimerRef.current) clearInterval(refreshTimerRef.current);
|
|
if (refreshInterval > 0) {
|
|
refreshTimerRef.current = setInterval(fetchData, refreshInterval * 1000);
|
|
}
|
|
return () => {
|
|
if (refreshTimerRef.current) clearInterval(refreshTimerRef.current);
|
|
};
|
|
}, [refreshInterval]);
|
|
|
|
// ============================================
|
|
// API 호출
|
|
// ============================================
|
|
const fetchData = useCallback(async () => {
|
|
setIsLoading(true);
|
|
try {
|
|
const params = new URLSearchParams();
|
|
if (startDate) params.set("startDate", startDate);
|
|
if (endDate) params.set("endDate", endDate);
|
|
|
|
const response = await apiClient.get(
|
|
`${config.apiEndpoint}?${params.toString()}`
|
|
);
|
|
|
|
if (response.data?.success) {
|
|
const { rows, filterOptions: opts } = response.data.data;
|
|
let processedRows = rows.map((r: any) => {
|
|
const numericRow: Record<string, any> = { ...r };
|
|
config.metrics.forEach((m) => {
|
|
if (numericRow[m.id] !== undefined) {
|
|
numericRow[m.id] = Number(numericRow[m.id]) || 0;
|
|
}
|
|
});
|
|
return numericRow;
|
|
});
|
|
|
|
if (config.enrichRow) {
|
|
processedRows = processedRows.map(config.enrichRow);
|
|
}
|
|
|
|
setRawData(processedRows);
|
|
setFilterOptions(opts || {});
|
|
}
|
|
} catch (err) {
|
|
console.error("데이터 조회 실패:", err);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
}, [startDate, endDate, config.apiEndpoint, config.enrichRow, config.metrics]);
|
|
|
|
// ============================================
|
|
// 조건 관리
|
|
// ============================================
|
|
const addCondition = () => {
|
|
condIdRef.current++;
|
|
setConditions((prev) => [
|
|
...prev,
|
|
{
|
|
id: condIdRef.current,
|
|
name: `조건 ${condIdRef.current}`,
|
|
metrics: [...config.defaultMetrics],
|
|
aggMethod: "sum",
|
|
chartType: "bar",
|
|
collapsed: false,
|
|
filters: [],
|
|
},
|
|
]);
|
|
};
|
|
|
|
const removeCondition = (id: number) => {
|
|
if (conditions.length <= 1) return;
|
|
setConditions((prev) => prev.filter((c) => c.id !== id));
|
|
};
|
|
|
|
const duplicateCondition = (id: number) => {
|
|
const src = conditions.find((c) => c.id === id);
|
|
if (!src) return;
|
|
condIdRef.current++;
|
|
setConditions((prev) => [
|
|
...prev,
|
|
{ ...JSON.parse(JSON.stringify(src)), id: condIdRef.current, name: src.name + " (복사)" },
|
|
]);
|
|
};
|
|
|
|
const updateCondition = (id: number, updates: Partial<ConditionGroup>) => {
|
|
setConditions((prev) =>
|
|
prev.map((c) => (c.id === id ? { ...c, ...updates } : c))
|
|
);
|
|
};
|
|
|
|
const toggleMetric = (condId: number, metricId: string) => {
|
|
setConditions((prev) =>
|
|
prev.map((c) => {
|
|
if (c.id !== condId) return c;
|
|
const idx = c.metrics.indexOf(metricId);
|
|
if (idx > -1) {
|
|
if (c.metrics.length <= 1) return c;
|
|
return { ...c, metrics: c.metrics.filter((m) => m !== metricId) };
|
|
}
|
|
return { ...c, metrics: [...c.metrics, metricId] };
|
|
})
|
|
);
|
|
};
|
|
|
|
const addFilter = (condId: number) => {
|
|
filterIdRef.current++;
|
|
const firstField = config.filterFieldDefs[0]?.id || "";
|
|
setConditions((prev) =>
|
|
prev.map((c) => {
|
|
if (c.id !== condId) return c;
|
|
return {
|
|
...c,
|
|
filters: [
|
|
...c.filters,
|
|
{
|
|
id: filterIdRef.current,
|
|
logic: c.filters.length === 0 ? "" : "AND",
|
|
field: firstField,
|
|
operator: "eq",
|
|
value: "",
|
|
values: [],
|
|
},
|
|
],
|
|
};
|
|
})
|
|
);
|
|
};
|
|
|
|
const removeFilter = (condId: number, filterId: number) => {
|
|
setConditions((prev) =>
|
|
prev.map((c) => {
|
|
if (c.id !== condId) return c;
|
|
const newFilters = c.filters.filter((f) => f.id !== filterId);
|
|
if (newFilters.length > 0) newFilters[0].logic = "";
|
|
return { ...c, filters: newFilters };
|
|
})
|
|
);
|
|
};
|
|
|
|
const updateFilter = (
|
|
condId: number,
|
|
filterId: number,
|
|
updates: Partial<ConditionFilter>
|
|
) => {
|
|
setConditions((prev) =>
|
|
prev.map((c) => {
|
|
if (c.id !== condId) return c;
|
|
return {
|
|
...c,
|
|
filters: c.filters.map((f) =>
|
|
f.id === filterId ? { ...f, ...updates } : f
|
|
),
|
|
};
|
|
})
|
|
);
|
|
};
|
|
|
|
// ============================================
|
|
// 날짜 프리셋
|
|
// ============================================
|
|
const handleDatePreset = (preset: string) => {
|
|
setActivePreset(preset);
|
|
const range = getDatePresetRange(preset);
|
|
setStartDate(range.start);
|
|
setEndDate(range.end);
|
|
};
|
|
|
|
// ============================================
|
|
// 프리셋 저장/불러오기
|
|
// ============================================
|
|
const loadPresets = () => {
|
|
try {
|
|
const stored = localStorage.getItem(PRESET_KEY);
|
|
if (stored) setPresets(JSON.parse(stored));
|
|
} catch {}
|
|
};
|
|
|
|
const savePreset = () => {
|
|
if (!presetName.trim()) return;
|
|
const newPresets = [
|
|
...presets,
|
|
{
|
|
name: presetName.trim(),
|
|
desc: presetDesc.trim(),
|
|
config: { groupBy, startDate, endDate, conditions },
|
|
savedAt: new Date().toISOString(),
|
|
},
|
|
];
|
|
setPresets(newPresets);
|
|
localStorage.setItem(PRESET_KEY, JSON.stringify(newPresets));
|
|
setPresetModalOpen(false);
|
|
setPresetName("");
|
|
setPresetDesc("");
|
|
};
|
|
|
|
const loadSelectedPreset = (idx: string) => {
|
|
setSelectedPresetIdx(idx);
|
|
if (idx === "") return;
|
|
const p = presets[parseInt(idx)];
|
|
if (!p?.config) return;
|
|
setGroupBy(p.config.groupBy);
|
|
setStartDate(p.config.startDate);
|
|
setEndDate(p.config.endDate);
|
|
setConditions(p.config.conditions);
|
|
};
|
|
|
|
const deletePreset = () => {
|
|
if (selectedPresetIdx === "") return;
|
|
const newPresets = presets.filter((_, i) => i !== parseInt(selectedPresetIdx));
|
|
setPresets(newPresets);
|
|
localStorage.setItem(PRESET_KEY, JSON.stringify(newPresets));
|
|
setSelectedPresetIdx("");
|
|
};
|
|
|
|
// ============================================
|
|
// 데이터 분석 (클라이언트 사이드)
|
|
// ============================================
|
|
const analysisResult = useMemo(() => {
|
|
if (!rawData.length) return { series: [], labels: [], chartData: [] };
|
|
|
|
const seriesList: {
|
|
condId: number;
|
|
condName: string;
|
|
condIdx: number;
|
|
metricId: string;
|
|
metricName: string;
|
|
metricUnit: string;
|
|
aggMethod: string;
|
|
chartType: string;
|
|
groups: Record<string, Record<string, any>[]>;
|
|
}[] = [];
|
|
|
|
const allLabelsSet = new Set<string>();
|
|
|
|
conditions.forEach((cond, ci) => {
|
|
const condData = applyConditionFilters(rawData, cond.filters, filterFields);
|
|
|
|
const groups: Record<string, Record<string, any>[]> = {};
|
|
condData.forEach((d) => {
|
|
const key = getGroupKey(d, groupBy);
|
|
if (!groups[key]) groups[key] = [];
|
|
groups[key].push(d);
|
|
});
|
|
Object.keys(groups).forEach((k) => allLabelsSet.add(k));
|
|
|
|
cond.metrics.forEach((metricId) => {
|
|
const m = config.metrics.find((x) => x.id === metricId);
|
|
if (!m) return;
|
|
seriesList.push({
|
|
condId: cond.id,
|
|
condName: cond.name,
|
|
condIdx: ci,
|
|
metricId,
|
|
metricName: m.name,
|
|
metricUnit: m.unit,
|
|
aggMethod: cond.aggMethod,
|
|
chartType: cond.chartType,
|
|
groups,
|
|
});
|
|
});
|
|
});
|
|
|
|
const isTimeBased = ["monthly", "quarterly", "weekly", "daily"].includes(groupBy);
|
|
let labels = [...allLabelsSet];
|
|
|
|
if (isTimeBased) {
|
|
labels.sort((a, b) => a.localeCompare(b));
|
|
} else if (seriesList.length > 0) {
|
|
const first = seriesList[0];
|
|
labels.sort((a, b) => {
|
|
const va = aggregateValues(first.groups[a] || [], first.metricId, first.aggMethod);
|
|
const vb = aggregateValues(first.groups[b] || [], first.metricId, first.aggMethod);
|
|
return vb - va;
|
|
});
|
|
}
|
|
|
|
const chartData = labels.map((label) => {
|
|
const point: Record<string, any> = { name: label };
|
|
seriesList.forEach((s) => {
|
|
const key = `${s.condName}_${s.metricName}`;
|
|
point[key] = aggregateValues(s.groups[label] || [], s.metricId, s.aggMethod);
|
|
});
|
|
return point;
|
|
});
|
|
|
|
return { series: seriesList, labels, chartData };
|
|
}, [rawData, conditions, groupBy, filterFields, config.metrics]);
|
|
|
|
// ============================================
|
|
// 렌더링
|
|
// ============================================
|
|
return (
|
|
<div className="flex h-full flex-col overflow-auto bg-background">
|
|
<div className="space-y-4 p-4 sm:p-6">
|
|
{/* 헤더 */}
|
|
<div className="flex flex-col gap-3 border-b pb-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold tracking-tight sm:text-3xl">
|
|
{config.title}
|
|
</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
{config.description} | 원본 {rawData.length}건
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<select
|
|
value={refreshInterval}
|
|
onChange={(e) => setRefreshInterval(Number(e.target.value))}
|
|
className={cn(
|
|
"h-8 rounded-md border px-2 text-xs",
|
|
refreshInterval > 0 && "border-primary bg-primary/5"
|
|
)}
|
|
>
|
|
<option value={0}>자동갱신 OFF</option>
|
|
<option value={30}>30초</option>
|
|
<option value={60}>1분</option>
|
|
<option value={300}>5분</option>
|
|
</select>
|
|
<Button variant="outline" size="sm" onClick={() => window.print()}>
|
|
인쇄
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 프리셋 바 */}
|
|
<div className="flex flex-wrap items-center gap-2 rounded-md border bg-muted/30 p-3">
|
|
<span className="text-xs font-medium text-muted-foreground">저장된 조건</span>
|
|
<select
|
|
value={selectedPresetIdx}
|
|
onChange={(e) => loadSelectedPreset(e.target.value)}
|
|
className="h-8 min-w-[180px] rounded-md border px-2 text-xs"
|
|
>
|
|
<option value="">조건을 선택하세요</option>
|
|
{presets.map((p, i) => (
|
|
<option key={i} value={i}>{p.name}</option>
|
|
))}
|
|
</select>
|
|
<Button size="sm" variant="default" className="h-8 text-xs" onClick={() => setPresetModalOpen(true)}>
|
|
조건 저장
|
|
</Button>
|
|
<Button size="sm" variant="outline" className="h-8 text-xs" onClick={deletePreset}>
|
|
삭제
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 분석 조건 설정 */}
|
|
<div className="rounded-md border">
|
|
<button
|
|
className="flex w-full items-center justify-between p-3 text-left hover:bg-muted/50"
|
|
onClick={() => setFilterOpen(!filterOpen)}
|
|
>
|
|
<span className="text-sm font-semibold">분석 조건 설정</span>
|
|
<span className={cn("text-xs transition-transform", !filterOpen && "-rotate-90")}>
|
|
▼
|
|
</span>
|
|
</button>
|
|
|
|
{filterOpen && (
|
|
<div className="space-y-4 border-t p-4">
|
|
{/* 기준축 + 기간 */}
|
|
<div className="flex flex-wrap gap-4">
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">분석 기준 (X축)</Label>
|
|
<select
|
|
value={groupBy}
|
|
onChange={(e) => setGroupBy(e.target.value)}
|
|
className="h-9 w-[140px] rounded-md border px-2 text-sm"
|
|
>
|
|
{config.groupByOptions.map((o) => (
|
|
<option key={o.id} value={o.id}>{o.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">기간</Label>
|
|
<div className="flex items-center gap-2">
|
|
<Input
|
|
type="date"
|
|
value={startDate}
|
|
onChange={(e) => setStartDate(e.target.value)}
|
|
className="h-9 w-[150px] text-sm"
|
|
/>
|
|
<span className="text-muted-foreground">~</span>
|
|
<Input
|
|
type="date"
|
|
value={endDate}
|
|
onChange={(e) => setEndDate(e.target.value)}
|
|
className="h-9 w-[150px] text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 날짜 프리셋 */}
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{DATE_PRESETS.map((p) => (
|
|
<button
|
|
key={p.id}
|
|
onClick={() => handleDatePreset(p.id)}
|
|
className={cn(
|
|
"rounded-full border px-3 py-1 text-xs transition-colors",
|
|
activePreset === p.id
|
|
? "border-primary bg-primary text-primary-foreground"
|
|
: "hover:bg-muted"
|
|
)}
|
|
>
|
|
{p.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* 다중 분석 조건 */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium">분석 조건</span>
|
|
<Button size="sm" variant="outline" className="h-7 text-xs" onClick={addCondition}>
|
|
+ 조건 추가
|
|
</Button>
|
|
</div>
|
|
|
|
{conditions.map((cond, ci) => {
|
|
const color = COLORS[ci % COLORS.length];
|
|
return (
|
|
<div
|
|
key={cond.id}
|
|
className="rounded-md border"
|
|
style={{ borderLeftColor: color, borderLeftWidth: 3 }}
|
|
>
|
|
<div
|
|
className="flex cursor-pointer items-center justify-between p-3 hover:bg-muted/30"
|
|
onClick={() => updateCondition(cond.id, { collapsed: !cond.collapsed })}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-3 w-3 rounded" style={{ background: color }} />
|
|
<input
|
|
value={cond.name}
|
|
onClick={(e) => e.stopPropagation()}
|
|
onChange={(e) => updateCondition(cond.id, { name: e.target.value })}
|
|
className="w-[100px] border-b border-transparent bg-transparent text-sm font-medium focus:border-primary focus:outline-none"
|
|
/>
|
|
<span className="text-xs text-muted-foreground">
|
|
{cond.metrics.map((id) => config.metrics.find((m) => m.id === id)?.name).join("+")}
|
|
{" "}{aggLabel(cond.aggMethod)}
|
|
{" "}{CHART_TYPES.find((t) => t.id === cond.chartType)?.name}
|
|
{cond.filters.length > 0 && ` | 필터 ${cond.filters.length}개`}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
className="rounded p-1 text-xs hover:bg-muted"
|
|
onClick={(e) => { e.stopPropagation(); duplicateCondition(cond.id); }}
|
|
>
|
|
복제
|
|
</button>
|
|
<button
|
|
className="rounded p-1 text-xs text-destructive hover:bg-destructive/10"
|
|
onClick={(e) => { e.stopPropagation(); removeCondition(cond.id); }}
|
|
>
|
|
X
|
|
</button>
|
|
<span className={cn("ml-1 text-xs transition-transform", cond.collapsed && "-rotate-90")}>
|
|
▼
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{!cond.collapsed && (
|
|
<div className="space-y-3 border-t p-3">
|
|
<div className="space-y-1">
|
|
<span className="text-xs text-muted-foreground">데이터</span>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{config.metrics.map((m) => {
|
|
const active = cond.metrics.includes(m.id);
|
|
return (
|
|
<button
|
|
key={m.id}
|
|
onClick={() => toggleMetric(cond.id, m.id)}
|
|
className={cn(
|
|
"flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition-colors",
|
|
active
|
|
? "border-primary bg-primary/10 font-medium"
|
|
: "hover:bg-muted"
|
|
)}
|
|
>
|
|
{active && <span className="text-primary">✓</span>}
|
|
<span
|
|
className="inline-block h-2 w-2 rounded-full"
|
|
style={{ background: m.color }}
|
|
/>
|
|
{m.name}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<div className="space-y-1">
|
|
<span className="text-xs text-muted-foreground">집계</span>
|
|
<select
|
|
value={cond.aggMethod}
|
|
onChange={(e) =>
|
|
updateCondition(cond.id, { aggMethod: e.target.value })
|
|
}
|
|
className="h-8 rounded-md border px-2 text-xs"
|
|
>
|
|
{AGG_METHODS.map((a) => (
|
|
<option key={a.id} value={a.id}>{a.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<span className="text-xs text-muted-foreground">차트</span>
|
|
<div className="flex gap-1">
|
|
{CHART_TYPES.map((ct) => (
|
|
<button
|
|
key={ct.id}
|
|
onClick={() => updateCondition(cond.id, { chartType: ct.id })}
|
|
className={cn(
|
|
"rounded border px-2.5 py-1 text-xs",
|
|
cond.chartType === ct.id
|
|
? "border-primary bg-primary text-primary-foreground"
|
|
: "hover:bg-muted"
|
|
)}
|
|
>
|
|
{ct.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 필터 */}
|
|
<div className="space-y-2">
|
|
<span className="text-xs text-muted-foreground">필터</span>
|
|
{cond.filters.length === 0 && (
|
|
<p className="text-xs text-muted-foreground/70">전체 데이터 (필터 없음)</p>
|
|
)}
|
|
{cond.filters.map((f, fi) => {
|
|
const field = filterFields.find((x) => x.id === f.field);
|
|
const ops = FILTER_OPERATORS[field?.type || "select"];
|
|
return (
|
|
<div key={f.id} className="flex flex-wrap items-center gap-1.5">
|
|
{fi === 0 ? (
|
|
<span className="w-[50px] text-center text-[11px] text-muted-foreground">WHERE</span>
|
|
) : (
|
|
<select
|
|
value={f.logic}
|
|
onChange={(e) =>
|
|
updateFilter(cond.id, f.id, {
|
|
logic: e.target.value as "AND" | "OR",
|
|
})
|
|
}
|
|
className="h-7 w-[50px] rounded border text-[11px]"
|
|
>
|
|
<option value="AND">AND</option>
|
|
<option value="OR">OR</option>
|
|
</select>
|
|
)}
|
|
<select
|
|
value={f.field}
|
|
onChange={(e) =>
|
|
updateFilter(cond.id, f.id, {
|
|
field: e.target.value,
|
|
operator: "eq",
|
|
value: "",
|
|
values: [],
|
|
})
|
|
}
|
|
className="h-7 rounded border px-1.5 text-[11px]"
|
|
>
|
|
{filterFields.map((ff) => (
|
|
<option key={ff.id} value={ff.id}>{ff.name}</option>
|
|
))}
|
|
</select>
|
|
<select
|
|
value={f.operator}
|
|
onChange={(e) =>
|
|
updateFilter(cond.id, f.id, { operator: e.target.value })
|
|
}
|
|
className="h-7 rounded border px-1.5 text-[11px]"
|
|
>
|
|
{ops.map((o) => (
|
|
<option key={o.id} value={o.id}>{o.name}</option>
|
|
))}
|
|
</select>
|
|
{field?.type === "select" ? (
|
|
<select
|
|
value={f.value}
|
|
onChange={(e) =>
|
|
updateFilter(cond.id, f.id, { value: e.target.value })
|
|
}
|
|
className="h-7 min-w-[120px] rounded border px-1.5 text-[11px]"
|
|
>
|
|
<option value="">선택...</option>
|
|
{field.options.map((o) => (
|
|
<option key={o.value} value={o.label}>{o.label}</option>
|
|
))}
|
|
</select>
|
|
) : (
|
|
<input
|
|
type="number"
|
|
value={f.value}
|
|
onChange={(e) =>
|
|
updateFilter(cond.id, f.id, { value: e.target.value })
|
|
}
|
|
className="h-7 w-[100px] rounded border px-2 text-[11px]"
|
|
/>
|
|
)}
|
|
<button
|
|
onClick={() => removeFilter(cond.id, f.id)}
|
|
className="rounded p-1 text-xs text-destructive hover:bg-destructive/10"
|
|
>
|
|
X
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
<button
|
|
onClick={() => addFilter(cond.id)}
|
|
className="text-xs text-primary hover:underline"
|
|
>
|
|
+ 필터 추가
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* 임계값 */}
|
|
{config.thresholds.length > 0 && (
|
|
<div className="flex flex-wrap items-center gap-4 rounded-md border bg-muted/20 p-3">
|
|
<span className="text-xs font-medium">임계값 설정</span>
|
|
{config.thresholds.map((t, ti) => (
|
|
<div key={t.id} className="flex items-center gap-2">
|
|
<span
|
|
className="inline-block h-2.5 w-2.5 rounded-full"
|
|
style={{ background: ti === 0 ? "#ef4444" : "#10b981" }}
|
|
/>
|
|
<span className="text-xs">{t.label}</span>
|
|
<Input
|
|
type="number"
|
|
value={thresholdValues[t.id] ?? t.defaultValue}
|
|
onChange={(e) =>
|
|
setThresholdValues((prev) => ({
|
|
...prev,
|
|
[t.id]: Number(e.target.value),
|
|
}))
|
|
}
|
|
className="h-7 w-[60px] text-xs"
|
|
/>
|
|
<span className="text-xs">{t.unit}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* 액션 */}
|
|
<div className="flex justify-end gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => {
|
|
condIdRef.current = 1;
|
|
setConditions([
|
|
{
|
|
id: 1,
|
|
name: "조건 1",
|
|
metrics: [...config.defaultMetrics],
|
|
aggMethod: "sum",
|
|
chartType: "bar",
|
|
collapsed: false,
|
|
filters: [],
|
|
},
|
|
]);
|
|
setGroupBy(config.defaultGroupBy);
|
|
handleDatePreset("last6m");
|
|
}}
|
|
>
|
|
전체 초기화
|
|
</Button>
|
|
<Button size="sm" onClick={fetchData} disabled={isLoading}>
|
|
{isLoading ? "분석 중..." : "분석 실행"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 적용된 조건 태그 */}
|
|
{analysisResult.series.length > 0 && (
|
|
<div className="flex flex-wrap gap-1.5">
|
|
<Badge variant="secondary">
|
|
{config.groupByOptions.find((o) => o.id === groupBy)?.name}
|
|
</Badge>
|
|
{(startDate || endDate) && (
|
|
<Badge variant="secondary">
|
|
{startDate || "~"} ~ {endDate || "~"}
|
|
</Badge>
|
|
)}
|
|
{conditions.map((cond, ci) => (
|
|
<Badge
|
|
key={cond.id}
|
|
variant="outline"
|
|
style={{ borderColor: COLORS[ci % COLORS.length] + "80" }}
|
|
>
|
|
<span
|
|
className="mr-1 inline-block h-2 w-2 rounded"
|
|
style={{ background: COLORS[ci % COLORS.length] }}
|
|
/>
|
|
{cond.name}: {cond.metrics.map((id) => config.metrics.find((m) => m.id === id)?.name).join("+")}
|
|
{" "}({aggLabel(cond.aggMethod)})
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* KPI 카드 */}
|
|
{analysisResult.series.length > 0 && (
|
|
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
|
|
{conditions.flatMap((cond, ci) =>
|
|
cond.metrics.map((metricId) => {
|
|
const m = config.metrics.find((x) => x.id === metricId);
|
|
if (!m) return null;
|
|
const condData = applyConditionFilters(rawData, cond.filters, filterFields);
|
|
const val = aggregateValues(condData, metricId, cond.aggMethod);
|
|
const color = COLORS[ci % COLORS.length];
|
|
return (
|
|
<div
|
|
key={`${cond.id}-${metricId}`}
|
|
className="rounded-lg border p-4"
|
|
style={{ borderTopColor: color, borderTopWidth: 3 }}
|
|
>
|
|
<p className="truncate text-xs text-muted-foreground">
|
|
{cond.name} · {m.name} ({aggLabel(cond.aggMethod)})
|
|
</p>
|
|
<p className="mt-1 text-xl font-bold tabular-nums">
|
|
{formatNumber(val)}
|
|
<span className="ml-1 text-xs font-normal text-muted-foreground">
|
|
{cond.aggMethod === "count" ? "건" : m.unit}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* 차트 */}
|
|
{analysisResult.chartData.length > 0 && (
|
|
<div className="rounded-md border p-4">
|
|
<h3 className="mb-4 text-sm font-semibold">분석 차트</h3>
|
|
<div style={{ width: "100%", height: 400 }}>
|
|
<ResponsiveContainer>
|
|
{(() => {
|
|
const firstChartType = conditions[0]?.chartType || "bar";
|
|
const dataKeys = analysisResult.series.map(
|
|
(s) => `${s.condName}_${s.metricName}`
|
|
);
|
|
|
|
if (firstChartType === "line") {
|
|
return (
|
|
<LineChart data={analysisResult.chartData}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-border" />
|
|
<XAxis dataKey="name" tick={{ fontSize: 12 }} className="fill-muted-foreground" />
|
|
<YAxis tick={{ fontSize: 12 }} className="fill-muted-foreground" tickFormatter={(v) => v.toLocaleString()} />
|
|
<Tooltip content={<ChartTooltip />} />
|
|
<Legend wrapperStyle={{ fontSize: 12 }} />
|
|
{dataKeys.map((key, i) => (
|
|
<Line
|
|
key={key}
|
|
type="monotone"
|
|
dataKey={key}
|
|
stroke={COLORS[i % COLORS.length]}
|
|
strokeWidth={2}
|
|
dot={{ r: 4 }}
|
|
/>
|
|
))}
|
|
</LineChart>
|
|
);
|
|
}
|
|
|
|
if (firstChartType === "area") {
|
|
return (
|
|
<AreaChart data={analysisResult.chartData}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-border" />
|
|
<XAxis dataKey="name" tick={{ fontSize: 12 }} className="fill-muted-foreground" />
|
|
<YAxis tick={{ fontSize: 12 }} className="fill-muted-foreground" tickFormatter={(v) => v.toLocaleString()} />
|
|
<Tooltip content={<ChartTooltip />} />
|
|
<Legend wrapperStyle={{ fontSize: 12 }} />
|
|
{dataKeys.map((key, i) => (
|
|
<Area
|
|
key={key}
|
|
type="monotone"
|
|
dataKey={key}
|
|
stroke={COLORS[i % COLORS.length]}
|
|
fill={COLORS[i % COLORS.length]}
|
|
fillOpacity={0.3}
|
|
/>
|
|
))}
|
|
</AreaChart>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<BarChart data={analysisResult.chartData}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-border" />
|
|
<XAxis dataKey="name" tick={{ fontSize: 12 }} className="fill-muted-foreground" />
|
|
<YAxis tick={{ fontSize: 12 }} className="fill-muted-foreground" tickFormatter={(v) => v.toLocaleString()} />
|
|
<Tooltip content={<ChartTooltip />} cursor={{ fill: "hsl(var(--muted))", opacity: 0.3 }} />
|
|
<Legend wrapperStyle={{ fontSize: 12 }} />
|
|
{dataKeys.map((key, i) => (
|
|
<Bar
|
|
key={key}
|
|
dataKey={key}
|
|
fill={COLORS[i % COLORS.length]}
|
|
radius={[4, 4, 0, 0]}
|
|
/>
|
|
))}
|
|
</BarChart>
|
|
);
|
|
})()}
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 집계 데이터 */}
|
|
{analysisResult.series.length > 0 && (
|
|
<div className="rounded-md border">
|
|
<div className="flex items-center justify-between border-b p-3">
|
|
<h3 className="text-sm font-semibold">집계 데이터</h3>
|
|
<div className="flex rounded-md border">
|
|
<button
|
|
onClick={() => setViewMode("table")}
|
|
className={cn(
|
|
"px-3 py-1 text-xs",
|
|
viewMode === "table" && "bg-primary text-primary-foreground"
|
|
)}
|
|
>
|
|
테이블
|
|
</button>
|
|
<button
|
|
onClick={() => setViewMode("card")}
|
|
className={cn(
|
|
"px-3 py-1 text-xs",
|
|
viewMode === "card" && "bg-primary text-primary-foreground"
|
|
)}
|
|
>
|
|
카드
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-3">
|
|
{viewMode === "table" ? (
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b">
|
|
<th className="p-2 text-left text-xs font-medium text-muted-foreground">
|
|
{config.groupByOptions.find((o) => o.id === groupBy)?.name}
|
|
</th>
|
|
{analysisResult.series.map((s, si) => (
|
|
<th
|
|
key={si}
|
|
className="p-2 text-right text-xs font-medium"
|
|
style={{ borderBottomColor: COLORS[si % COLORS.length], borderBottomWidth: 2 }}
|
|
>
|
|
{s.condName}
|
|
<br />
|
|
<span className="font-normal text-muted-foreground">
|
|
{s.metricName}({aggLabel(s.aggMethod)})
|
|
</span>
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{analysisResult.labels.map((label) => (
|
|
<tr
|
|
key={label}
|
|
className="cursor-pointer border-b transition-colors hover:bg-muted/50"
|
|
onClick={() => setDrilldownLabel(label)}
|
|
>
|
|
<td className="p-2 font-medium">{label}</td>
|
|
{analysisResult.series.map((s, si) => (
|
|
<td key={si} className="p-2 text-right tabular-nums">
|
|
{formatNumber(
|
|
aggregateValues(s.groups[label] || [], s.metricId, s.aggMethod)
|
|
)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
<tr className="border-t-2 bg-muted/30 font-bold">
|
|
<td className="p-2">전체</td>
|
|
{analysisResult.series.map((s, si) => {
|
|
const allRows = analysisResult.labels.flatMap(
|
|
(lb) => s.groups[lb] || []
|
|
);
|
|
return (
|
|
<td key={si} className="p-2 text-right tabular-nums">
|
|
{formatNumber(aggregateValues(allRows, s.metricId, s.aggMethod))}
|
|
</td>
|
|
);
|
|
})}
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
{analysisResult.labels.map((label) => {
|
|
const firstS = analysisResult.series[0];
|
|
const val = firstS
|
|
? aggregateValues(firstS.groups[label] || [], firstS.metricId, firstS.aggMethod)
|
|
: 0;
|
|
return (
|
|
<div
|
|
key={label}
|
|
className="cursor-pointer rounded-lg border p-4 transition-shadow hover:shadow-md"
|
|
onClick={() => setDrilldownLabel(label)}
|
|
>
|
|
<p className="text-sm font-medium">{label}</p>
|
|
<p className="mt-1 text-xl font-bold tabular-nums">
|
|
{formatNumber(val)}
|
|
<span className="ml-1 text-xs font-normal text-muted-foreground">
|
|
{firstS?.metricUnit}
|
|
</span>
|
|
</p>
|
|
{analysisResult.series.length > 1 && (
|
|
<p className="mt-1 truncate text-xs text-muted-foreground">
|
|
{analysisResult.series.slice(1).map((s) => {
|
|
const v = aggregateValues(s.groups[label] || [], s.metricId, s.aggMethod);
|
|
return `${s.condName}-${s.metricName}: ${formatNumber(v)}`;
|
|
}).join(" | ")}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 드릴다운 */}
|
|
{drilldownLabel && (
|
|
<div className="rounded-md border border-primary/30 bg-primary/5">
|
|
<div className="flex items-center justify-between border-b p-3">
|
|
<h3 className="text-sm font-semibold">{drilldownLabel} 상세</h3>
|
|
<button
|
|
onClick={() => setDrilldownLabel(null)}
|
|
className="rounded p-1 text-sm hover:bg-muted"
|
|
>
|
|
X
|
|
</button>
|
|
</div>
|
|
<div className="overflow-x-auto p-3">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b">
|
|
{config.drilldownColumns.map((col) => (
|
|
<th
|
|
key={col.id}
|
|
className={cn("p-2 text-xs", col.align === "right" ? "text-right" : "text-left")}
|
|
>
|
|
{col.name}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rawData
|
|
.filter((d) => getGroupKey(d, groupBy) === drilldownLabel)
|
|
.map((r, i) => (
|
|
<tr key={i} className="border-b">
|
|
{config.drilldownColumns.map((col) => (
|
|
<td
|
|
key={col.id}
|
|
className={cn(
|
|
"p-2 text-xs",
|
|
col.align === "right" ? "text-right tabular-nums" : ""
|
|
)}
|
|
>
|
|
{renderCellValue(r, col)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 원본 데이터 */}
|
|
<div className="rounded-md border">
|
|
<button
|
|
className="flex w-full items-center justify-between p-3 text-left hover:bg-muted/50"
|
|
onClick={() => setRawDataOpen(!rawDataOpen)}
|
|
>
|
|
<span className="text-sm font-semibold">백 데이터 (원본)</span>
|
|
<span className={cn("text-xs transition-transform", !rawDataOpen && "-rotate-90")}>
|
|
▼
|
|
</span>
|
|
</button>
|
|
{rawDataOpen && (
|
|
<div className="overflow-x-auto border-t p-3">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b">
|
|
{config.rawDataColumns.map((col) => (
|
|
<th
|
|
key={col.id}
|
|
className={cn("p-2 text-xs", col.align === "right" ? "text-right" : "text-left")}
|
|
>
|
|
{col.name}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rawData.slice(0, 100).map((r, i) => (
|
|
<tr key={i} className="border-b">
|
|
{config.rawDataColumns.map((col) => (
|
|
<td
|
|
key={col.id}
|
|
className={cn(
|
|
"p-2 text-xs",
|
|
col.align === "right" ? "text-right tabular-nums" : ""
|
|
)}
|
|
>
|
|
{renderCellValue(r, col)}
|
|
</td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
{rawData.length > 100 && (
|
|
<p className="mt-2 text-center text-xs text-muted-foreground">
|
|
상위 100건만 표시 (전체 {rawData.length}건)
|
|
</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 데이터 없음 */}
|
|
{!isLoading && rawData.length === 0 && (
|
|
<div className="flex flex-col items-center justify-center py-16 text-center">
|
|
<div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
|
|
<svg className="h-8 w-8 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
|
|
d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 className="text-lg font-semibold">{config.emptyMessage}</h3>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
기간을 변경하거나 데이터를 확인해주세요
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 프리셋 저장 모달 */}
|
|
<Dialog open={presetModalOpen} onOpenChange={setPresetModalOpen}>
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-base sm:text-lg">조건 저장</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-3">
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">
|
|
조건명 <span className="text-destructive">*</span>
|
|
</Label>
|
|
<Input
|
|
value={presetName}
|
|
onChange={(e) => setPresetName(e.target.value)}
|
|
placeholder="예: 월별 추이 분석"
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">설명</Label>
|
|
<Input
|
|
value={presetDesc}
|
|
onChange={(e) => setPresetDesc(e.target.value)}
|
|
placeholder="조건 설명 (선택사항)"
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<DialogFooter className="gap-2 sm:gap-0">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setPresetModalOpen(false)}
|
|
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
>
|
|
취소
|
|
</Button>
|
|
<Button
|
|
onClick={savePreset}
|
|
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
>
|
|
저장
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<ScrollToTop />
|
|
</div>
|
|
);
|
|
}
|