260707_1_대시보드정리 1차

2026-07-08 19:04:20 +09:00
parent 3485eeb096
commit 9c40dec070
26 changed files with 1264 additions and 305 deletions
@@ -287,6 +287,164 @@ export function createWorkflowShell(opts: WorkflowShellOptions): WorkflowShellHa
  return { root, leftPanel, rightArea };
 }

+/* -----------------------------------------------------------------------------
+ * 7-1. 라인 차트 (Line Chart) — 시계열 데이터 SVG 렌더링
+ *    외부 라이브러리 없이 인라인 SVG. 색상은 CSS 클래스 + theme.css 변수 참조.
+ * -------------------------------------------------------------------------- */
+
+export interface LineChartSeries {
+  /** 범례에 표시할 이름 (i18n 결과 문자열) */
+  name: string;
+  /** y 값 배열 (x는 인덱스 순서, null은 결측으로 선 끊김) */
+  values: (number | null)[];
+  /** 선 색상 클래스 접미사: 0~3 (theme.css의 --color-chart-N 참조) */
+  colorIndex?: 0 | 1 | 2 | 3;
+}
+
+export interface LineChartOptions {
+  series: LineChartSeries[];
+  /** x축 라벨 (values와 같은 길이 권장, 일부만 자동 선택 표기) */
+  xLabels?: string[];
+  /** y축 최대값 (기본: 100 = 퍼센트) */
+  yMax?: number;
+  /** y축 단위 접미사 (기본: "%") */
+  yUnit?: string;
+  /** 접근성 설명 */
+  ariaLabel?: string;
+}
+
+const CHART_W = 640;
+const CHART_H = 200;
+const CHART_PAD = { top: 12, right: 12, bottom: 26, left: 36 };
+const X_TICK_COUNT = 5; // x축에 표기할 라벨 개수 (양끝 포함)
+
+/** 유효 점들을 Catmull-Rom → 3차 베지어로 변환한 스플라인 path 데이터를 만든다. */
+function splinePath(points: { x: number; y: number }[]): string {
+  if (points.length === 0) return "";
+  if (points.length === 1) return `M${points[0].x},${points[0].y}`;
+  let d = `M${points[0].x.toFixed(1)},${points[0].y.toFixed(1)}`;
+  for (let i = 0; i < points.length - 1; i += 1) {
+    const p0 = points[i - 1] ?? points[i];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[i + 2] ?? p2;
+    // Catmull-Rom (tension 1/6) → cubic Bézier 제어점
+    const c1x = p1.x + (p2.x - p0.x) / 6;
+    const c1y = p1.y + (p2.y - p0.y) / 6;
+    const c2x = p2.x - (p3.x - p1.x) / 6;
+    const c2y = p2.y - (p3.y - p1.y) / 6;
+    d +=
+      ` C${c1x.toFixed(1)},${c1y.toFixed(1)} ` +
+      `${c2x.toFixed(1)},${c2y.toFixed(1)} ` +
+      `${p2.x.toFixed(1)},${p2.y.toFixed(1)}`;
+  }
+  return d;
+}
+
+/** 시계열 스플라인 차트를 반환. 데이터가 없으면 안내 문구를 담은 빈 상태를 반환. */
+export function createLineChart(opts: LineChartOptions): HTMLDivElement {
+  const yMax = opts.yMax ?? 100;
+  const yUnit = opts.yUnit ?? "%";
+  const wrap = el("div", { className: "ui-chart" });
+
+  const pointCount = Math.max(0, ...opts.series.map((s) => s.values.length));
+  if (pointCount < 2) {
+    wrap.append(el("div", { className: "ui-chart__empty", text: "—" }));
+    wrap.setAttribute("data-empty", "true");
+    return wrap;
+  }
+
+  const plotW = CHART_W - CHART_PAD.left - CHART_PAD.right;
+  const plotH = CHART_H - CHART_PAD.top - CHART_PAD.bottom;
+  const xAt = (i: number) => CHART_PAD.left + (plotW * i) / (pointCount - 1);
+  const yAt = (v: number) => CHART_PAD.top + plotH * (1 - Math.min(v, yMax) / yMax);
+
+  const svgNs = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(svgNs, "svg");
+  svg.setAttribute("class", "ui-chart__svg");
+  svg.setAttribute("viewBox", `0 0 ${CHART_W} ${CHART_H}`);
+  svg.setAttribute("role", "img");
+  svg.setAttribute("preserveAspectRatio", "none");
+  if (opts.ariaLabel) svg.setAttribute("aria-label", opts.ariaLabel);
+
+  // y축 그리드 + 라벨 (0, 25, 50, 75, 100%)
+  for (let g = 0; g <= 4; g += 1) {
+    const v = (yMax / 4) * g;
+    const y = yAt(v);
+    const line = document.createElementNS(svgNs, "line");
+    line.setAttribute("class", "ui-chart__grid");
+    line.setAttribute("x1", String(CHART_PAD.left));
+    line.setAttribute("x2", String(CHART_W - CHART_PAD.right));
+    line.setAttribute("y1", String(y));
+    line.setAttribute("y2", String(y));
+    svg.append(line);
+    const tick = document.createElementNS(svgNs, "text");
+    tick.setAttribute("class", "ui-chart__tick");
+    tick.setAttribute("x", String(CHART_PAD.left - 6));
+    tick.setAttribute("y", String(y + 4));
+    tick.setAttribute("text-anchor", "end");
+    tick.textContent = `${Math.round(v)}${yUnit}`;
+    svg.append(tick);
+  }
+
+  // x축 라벨 (양끝 포함 X_TICK_COUNT개를 균등 선택)
+  if (opts.xLabels && opts.xLabels.length > 0) {
+    const labels = opts.xLabels;
+    const baseY = CHART_PAD.top + plotH;
+    for (let t = 0; t < X_TICK_COUNT; t += 1) {
+      const idx = Math.round(((pointCount - 1) * t) / (X_TICK_COUNT - 1));
+      const label = labels[idx];
+      if (label === undefined) continue;
+      const anchor = t === 0 ? "start" : t === X_TICK_COUNT - 1 ? "end" : "middle";
+      const tick = document.createElementNS(svgNs, "text");
+      tick.setAttribute("class", "ui-chart__tick ui-chart__tick--x");
+      tick.setAttribute("x", String(xAt(idx)));
+      tick.setAttribute("y", String(baseY + 16));
+      tick.setAttribute("text-anchor", anchor);
+      tick.textContent = label;
+      svg.append(tick);
+    }
+  }
+
+  // 시리즈별 스플라인 (null 구간은 연속 세그먼트로 나눠 각각 곡선 처리)
+  for (const s of opts.series) {
+    let segment: { x: number; y: number }[] = [];
+    let d = "";
+    const flush = () => {
+      if (segment.length > 0) d += `${splinePath(segment)} `;
+      segment = [];
+    };
+    s.values.forEach((v, i) => {
+      if (v === null || v === undefined) {
+        flush();
+        return;
+      }
+      segment.push({ x: xAt(i), y: yAt(v) });
+    });
+    flush();
+    const path = document.createElementNS(svgNs, "path");
+    path.setAttribute("class", `ui-chart__line ui-chart__line--c${s.colorIndex ?? 0}`);
+    path.setAttribute("d", d.trim());
+    svg.append(path);
+  }
+
+  // 범례 (그래프 영역 우상단 오버레이)
+  const legend = el("div", { className: "ui-chart__legend" });
+  opts.series.forEach((s) => {
+    legend.append(
+      el("span", {
+        className: `ui-chart__legend-item ui-chart__legend-item--c${s.colorIndex ?? 0}`,
+        text: s.name,
+      }),
+    );
+  });
+
+  const plot = el("div", { className: "ui-chart__plot" });
+  plot.append(svg, legend);
+  wrap.append(plot);
+  return wrap;
+}
+
 /* =============================================================================
 * 8. 기본 컴포넌트 스타일 주입 (injectBaseStyles)
 *    theme.css 변수만 참조. 앱 진입 시 1회 호출.
@@ -495,6 +653,82 @@ const BASE_CSS = `
  overflow: auto;
  background-color: var(--color-bg);
 }
+
+/* --- Line Chart --- */
+.ui-chart {
+  width: 100%;
+}
+.ui-chart__plot {
+  position: relative;
+  width: 100%;
+}
+.ui-chart__svg {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+.ui-chart__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 120px;
+  color: var(--color-text-muted);
+  font-size: var(--text-body);
+}
+.ui-chart__grid {
+  stroke: var(--color-border);
+  stroke-width: 1;
+  opacity: 0.5;
+}
+.ui-chart__tick {
+  fill: var(--color-text-muted);
+  font-size: 10px;
+  font-family: var(--font-body);
+}
+.ui-chart__tick--x {
+  font-size: 9px;
+}
+.ui-chart__line {
+  fill: none;
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+.ui-chart__line--c0 { stroke: var(--color-chart-0); }
+.ui-chart__line--c1 { stroke: var(--color-chart-1); }
+.ui-chart__line--c2 { stroke: var(--color-chart-2); }
+.ui-chart__line--c3 { stroke: var(--color-chart-3); }
+.ui-chart__legend {
+  position: absolute;
+  top: var(--spacing-4);
+  right: var(--spacing-8);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--spacing-8) var(--spacing-16);
+  padding: var(--spacing-4) var(--spacing-8);
+  border-radius: var(--radius-cards);
+  background-color: color-mix(in srgb, var(--color-surface) 78%, transparent);
+  pointer-events: none;
+}
+.ui-chart__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  font-size: var(--text-caption);
+  color: var(--color-text);
+}
+.ui-chart__legend-item::before {
+  content: "";
+  width: 12px;
+  height: 3px;
+  border-radius: 2px;
+  background-color: currentColor;
+}
+.ui-chart__legend-item--c0 { color: var(--color-chart-0); }
+.ui-chart__legend-item--c1 { color: var(--color-chart-1); }
+.ui-chart__legend-item--c2 { color: var(--color-chart-2); }
+.ui-chart__legend-item--c3 { color: var(--color-chart-3); }
 `;

 /** 공통 컴포넌트 기본 스타일을 <head>에 1회 주입. 앱 진입 시 호출. */