@leviosa-ai/detail-page-editor 0.1.0

package/lib/detail-page/chart/renderers/bar-v.ts

@@ -0,0 +1,213 @@
+/**
+ * 세로 막대 — 항목 수가 적고 라벨이 짧을 때(연차 비교, 3~5개 스펙 대비).
+ *
+ * 값은 막대 **바로 위**에 앉힌다. 위쪽에 값 한 줄 높이를 미리 비워 두므로, 막대가
+ * 플롯을 꽉 채워도 값이 프레임 밖으로 나가지 않는다.
+ *
+ * ``style.plot``이 있으면 판 크롬(기둥 밴드·눈금선·축선·눈금 라벨)을 함께 그린다.
+ * 브랜드 상세페이지의 막대그래프가 그 모양이고, 지금은 그 좌표를 손으로 계산해 통짜
+ * SVG로 굽고 있다. 여기서는 ``resolved.max`` 하나에서 전부 나오므로 **수치를 고치면
+ * 막대·눈금선·눈금 라벨이 같이 따라간다** — 축이 거짓말을 할 수가 없다.
+ */
+
+import { formatChartValue } from "../format";
+import { itemColor, ratioOf, type ResolvedChart } from "../normalize";
+import type { ChartNode, ChartRender, ChartSpec } from "../types";
+import {
+  barRadius,
+  estimateTextWidth,
+  rectNode,
+  textHeight,
+  textNode,
+  visibleLength,
+} from "./shared";
+
+export function renderBarV(spec: ChartSpec, resolved: ResolvedChart): ChartRender {
+  const { style, options } = spec;
+  const values = resolved.series[0]?.values ?? [];
+  const count = Math.max(1, resolved.labels.length);
+  const chrome = style.plot;
+  const ticks = chrome?.ticks ?? null;
+
+  // 눈금 라벨은 플롯 **왼쪽 바깥**에 앉으므로 그만큼 판을 오른쪽으로 민다.
+  const gutter = ticks ? Math.max(0, ticks.gutter) : 0;
+  const width = spec.frame.width;
+  const plotWidth = Math.max(1, width - gutter);
+
+  const labelH = textHeight(style.labelSize);
+  const valueH = textHeight(style.valueSize);
+  // 단위 캡("(%)")은 눈금 맨 위보다 더 위에 앉는다.
+  const capH = ticks && ticks.unitCap ? textHeight(ticks.size) + 4 : 0;
+  const headH = options.showValue ? valueH + style.labelGap : 0;
+  const plotTop = Math.max(headH, capH);
+  const plotBottom = plotTop + style.plotSize;
+
+  const colWidth = (plotWidth - style.gap * (count - 1)) / count;
+  // 가로형의 ``barSize``(막대 두께)를 세로형에 그대로 쓰면 젓가락처럼 얇아진다.
+  // 칸 폭의 60%를 바닥으로 깔되, 더 두꺼운 값을 명시하면 그쪽을 따른다.
+  const barWidth = Math.min(colWidth, Math.max(style.barSize, colWidth * 0.6));
+  const radius = barRadius(style, barWidth);
+
+  const chromeNodes: ChartNode[] = [];
+  const nodes: ChartNode[] = [];
+
+  // ── 판 크롬 ───────────────────────────────────────────────────────────────
+  if (chrome?.bands) {
+    resolved.labels.forEach((_label, i) => {
+      const colX = gutter + i * (colWidth + style.gap);
+      chromeNodes.push(
+        rectNode(
+          `band:${i}`,
+          { x: colX, y: plotTop, width: colWidth, height: style.plotSize },
+          chrome.bands as string,
+        ),
+      );
+    });
+  }
+
+  if (chrome?.grid && chrome.grid.count > 0) {
+    const steps = chrome.grid.count;
+    // 0선은 축선이 대신 그으므로 위쪽 눈금만 긋는다.
+    for (let i = 0; i < steps; i += 1) {
+      const y = plotTop + (style.plotSize * i) / steps;
+      chromeNodes.push(
+        rectNode(
+          `grid:${i}`,
+          { x: gutter, y, width: plotWidth, height: 1 },
+          chrome.grid.color,
+        ),
+      );
+    }
+  }
+
+  if (chrome?.axis) {
+    const thickness = Math.max(1, chrome.axis.width);
+    chromeNodes.push(
+      rectNode(
+        "axis:y",
+        { x: gutter, y: plotTop, width: thickness, height: style.plotSize },
+        chrome.axis.color,
+      ),
+      rectNode(
+        "axis:x",
+        { x: gutter, y: plotBottom, width: plotWidth, height: thickness },
+        chrome.axis.color,
+      ),
+    );
+  }
+
+  if (ticks) {
+    const steps = chrome?.grid?.count ?? 4;
+    const labelWidth = Math.max(16, gutter - 8);
+    for (let i = 0; i <= steps; i += 1) {
+      const value = (resolved.max * i) / steps;
+      const y = plotBottom - (style.plotSize * i) / steps;
+      chromeNodes.push(
+        textNode(
+          `tick:${i}`,
+          { x: 0, y: y - textHeight(ticks.size) / 2, width: labelWidth },
+          formatChartValue(value, { decimals: options.decimals }),
+          {
+            style,
+            fontSize: ticks.size,
+            fill: ticks.color,
+            align: "right",
+            fontWeight: "400",
+          },
+        ),
+      );
+    }
+    if (ticks.unitCap) {
+      chromeNodes.push(
+        textNode(
+          "tick:cap",
+          {
+            x: 0,
+            y: plotTop - textHeight(ticks.size) - 4,
+            width: Math.max(labelWidth, estimateTextWidth(ticks.unitCap, ticks.size)),
+          },
+          ticks.unitCap,
+          {
+            style,
+            fontSize: ticks.size,
+            fill: ticks.color,
+            align: "right",
+            fontWeight: "400",
+          },
+        ),
+      );
+    }
+  }
+
+  // ── 막대 ─────────────────────────────────────────────────────────────────
+  resolved.labels.forEach((label, i) => {
+    const colX = gutter + i * (colWidth + style.gap);
+    const barX = colX + (colWidth - barWidth) / 2;
+    const value = values[i] ?? null;
+    const ratio = ratioOf(value, resolved.max);
+    const barH = visibleLength(style.plotSize * ratio, ratio);
+    const barTop = plotBottom - barH;
+    const color = itemColor(spec, i, resolved.highlightIndex);
+
+    if (style.showTrack) {
+      nodes.push(
+        rectNode(
+          `track:${i}`,
+          { x: barX, y: plotTop, width: barWidth, height: style.plotSize },
+          style.trackColor,
+          radius,
+        ),
+      );
+    }
+    nodes.push(
+      rectNode(
+        `bar:${i}`,
+        { x: barX, y: barTop, width: barWidth, height: barH },
+        color,
+        radius,
+      ),
+    );
+    if (options.showValue) {
+      nodes.push(
+        textNode(
+          `value:${i}`,
+          { x: colX, y: barTop - style.labelGap - valueH, width: colWidth },
+          formatChartValue(value, {
+            decimals: options.decimals,
+            unit: options.unit,
+          }),
+          {
+            style,
+            fontSize: style.valueSize,
+            fill: style.valueColor,
+            align: "center",
+            fontWeight: "700",
+          },
+        ),
+      );
+    }
+    nodes.push(
+      textNode(
+        `label:${i}`,
+        { x: colX, y: plotBottom + style.labelGap, width: colWidth },
+        label,
+        {
+          style,
+          fontSize: style.labelSize,
+          fill: style.labelColor,
+          align: "center",
+          fontWeight: "500",
+        },
+      ),
+    );
+  });
+
+  return {
+    // 크롬이 먼저 = 막대 뒤에 깔린다.
+    nodes: [...chromeNodes, ...nodes],
+    size: {
+      width,
+      height: Math.round(plotBottom + style.labelGap + labelH),
+    },
+  };
+}

package/lib/detail-page/chart/renderers/donut.ts

@@ -0,0 +1,186 @@
+/**
+ * 도넛 — 구성비(성분, 만족도 비중)에 쓴다.
+ *
+ * 고리만 ``svg`` 하나로 그리고, 가운데 수치와 아래 범례는 전부 네이티브 텍스트다.
+ * 글자를 SVG 안에 넣으면 폰트가 시스템 폰트로 떨어진다.
+ */
+
+import { formatChartValue } from "../format";
+import { itemColor, type ResolvedChart } from "../normalize";
+import type { ChartNode, ChartRender, ChartSpec } from "../types";
+import {
+  rectNode,
+  ringSlicePath,
+  svgNode,
+  textHeight,
+  textNode,
+} from "./shared";
+
+/** 범례 색 칩의 한 변. */
+const CHIP = 12;
+
+export function renderDonut(spec: ChartSpec, resolved: ResolvedChart): ChartRender {
+  const { style, options } = spec;
+  const width = spec.frame.width;
+  const values = resolved.series[0]?.values ?? [];
+  const nodes: ChartNode[] = [];
+
+  const diameter = Math.max(60, Math.min(width, style.plotSize));
+  const thickness = Math.max(style.barSize, Math.round(diameter * 0.08));
+  const cx = diameter / 2;
+  const cy = diameter / 2;
+  const outer = diameter / 2;
+  const inner = Math.max(4, outer - thickness);
+
+  const total = values.reduce<number>(
+    (sum, value) => sum + Math.max(0, value ?? 0),
+    0,
+  );
+
+  // 고리: 값이 하나도 없으면 트랙만 남겨 "빈 차트"로 보이게 한다.
+  const pieces: string[] = [];
+  if (style.showTrack || total <= 0) {
+    pieces.push(
+      `<path d="${ringSlicePath(cx, cy, outer, inner, -90, 270)}" fill="${style.trackColor}"/>`,
+    );
+  }
+  if (total > 0) {
+    let cursor = -90;
+    values.forEach((value, i) => {
+      const share = Math.max(0, value ?? 0) / total;
+      if (share <= 0) return;
+      const end = cursor + share * 360;
+      pieces.push(
+        `<path d="${ringSlicePath(cx, cy, outer, inner, cursor, end)}" fill="${itemColor(
+          spec,
+          i,
+          resolved.highlightIndex,
+        )}"/>`,
+      );
+      cursor = end;
+    });
+  }
+  nodes.push(
+    svgNode(
+      "ring",
+      { x: (width - diameter) / 2, y: 0, width: diameter, height: diameter },
+      pieces.join(""),
+    ),
+  );
+
+  // 가운데: 주목할 항목 하나의 값과 이름. 강조가 없으면 첫 항목.
+  const focus = resolved.highlightIndex ?? 0;
+  const centerSize = Math.round(style.valueSize * 1.6);
+  const centerH = textHeight(centerSize);
+  const labelH = textHeight(style.labelSize);
+  if (resolved.labels.length > 0) {
+    const block = centerH + labelH;
+    nodes.push(
+      textNode(
+        "center:value",
+        {
+          x: (width - diameter) / 2,
+          y: cy - block / 2,
+          width: diameter,
+        },
+        formatChartValue(values[focus] ?? null, {
+          decimals: options.decimals,
+          unit: options.unit,
+        }),
+        {
+          style,
+          fontSize: centerSize,
+          fill: style.valueColor,
+          align: "center",
+          fontWeight: "700",
+        },
+      ),
+    );
+    nodes.push(
+      textNode(
+        "center:label",
+        {
+          x: (width - diameter) / 2,
+          y: cy - block / 2 + centerH,
+          width: diameter,
+        },
+        resolved.labels[focus] ?? "",
+        {
+          style,
+          fontSize: style.labelSize,
+          fill: style.labelColor,
+          align: "center",
+          fontWeight: "400",
+        },
+      ),
+    );
+  }
+
+  // 범례: 칩 · 이름 · 값. 도넛은 조각 위에 글자를 얹으면 금세 읽기 어려워진다.
+  const rowH = Math.max(labelH, textHeight(style.valueSize));
+  const rowGap = Math.round(style.gap / 2);
+  const legendTop = diameter + style.gap;
+  resolved.labels.forEach((label, i) => {
+    const top = legendTop + i * (rowH + rowGap);
+    nodes.push(
+      rectNode(
+        `chip:${i}`,
+        {
+          x: 0,
+          y: top + (rowH - CHIP) / 2,
+          width: CHIP,
+          height: CHIP,
+        },
+        itemColor(spec, i, resolved.highlightIndex),
+        3,
+      ),
+    );
+    nodes.push(
+      textNode(
+        `label:${i}`,
+        { x: CHIP + 8, y: top + (rowH - labelH) / 2, width: width * 0.6 },
+        label,
+        {
+          style,
+          fontSize: style.labelSize,
+          fill: style.labelColor,
+          align: "left",
+          fontWeight: "400",
+        },
+      ),
+    );
+    if (options.showValue) {
+      nodes.push(
+        textNode(
+          `value:${i}`,
+          {
+            x: width * 0.6 + CHIP + 8,
+            y: top + (rowH - textHeight(style.valueSize)) / 2,
+            width: width * 0.4 - CHIP - 8,
+          },
+          formatChartValue(values[i] ?? null, {
+            decimals: options.decimals,
+            unit: options.unit,
+          }),
+          {
+            style,
+            fontSize: style.valueSize,
+            fill: style.valueColor,
+            align: "right",
+            fontWeight: "700",
+          },
+        ),
+      );
+    }
+  });
+
+  const rows = resolved.labels.length;
+  const legendHeight = rows > 0 ? rows * rowH + (rows - 1) * rowGap : 0;
+  return {
+    nodes,
+    size: {
+      width,
+      height: Math.round(diameter + (rows > 0 ? style.gap + legendHeight : 0)),
+    },
+  };
+}

package/lib/detail-page/chart/renderers/gauge.ts

@@ -0,0 +1,96 @@
+/**
+ * 게이지 — 값 하나를 최댓값 대비로 보여준다(만족도, 달성률, 개선율).
+ *
+ * 항목이 여러 개면 강조 항목(없으면 첫 항목) 하나만 그린다. 나머지 데이터는 스펙에
+ * 그대로 남아 있어서 종류를 되돌리면 살아난다.
+ */
+
+import { formatChartValue } from "../format";
+import { itemColor, ratioOf, type ResolvedChart } from "../normalize";
+import type { ChartNode, ChartRender, ChartSpec } from "../types";
+import { ringSlicePath, svgNode, textHeight, textNode } from "./shared";
+
+export function renderGauge(spec: ChartSpec, resolved: ResolvedChart): ChartRender {
+  const { style, options } = spec;
+  const width = spec.frame.width;
+  const values = resolved.series[0]?.values ?? [];
+  const index = resolved.highlightIndex ?? 0;
+  const value = values[index] ?? null;
+  const ratio = ratioOf(value, resolved.max);
+  const nodes: ChartNode[] = [];
+
+  // 반원이라 지름은 프레임 폭에, 높이는 그 절반에 맞춘다.
+  const diameter = Math.max(80, Math.min(width, style.plotSize * 1.6));
+  const thickness = Math.max(style.barSize, Math.round(diameter * 0.09));
+  const cx = diameter / 2;
+  const cy = diameter / 2;
+  const outer = diameter / 2;
+  const inner = Math.max(4, outer - thickness);
+  const left = (width - diameter) / 2;
+
+  const pieces: string[] = [];
+  if (style.showTrack) {
+    pieces.push(
+      `<path d="${ringSlicePath(cx, cy, outer, inner, 180, 360)}" fill="${style.trackColor}"/>`,
+    );
+  }
+  if (ratio > 0) {
+    pieces.push(
+      `<path d="${ringSlicePath(cx, cy, outer, inner, 180, 180 + ratio * 180)}" fill="${itemColor(
+        spec,
+        index,
+        resolved.highlightIndex,
+      )}"/>`,
+    );
+  }
+  // 반원만 쓰므로 SVG 상자도 위 절반만 잡는다(아래 빈 공간이 레이아웃을 밀지 않게).
+  nodes.push(
+    svgNode(
+      "arc",
+      { x: left, y: 0, width: diameter, height: Math.ceil(diameter / 2) },
+      pieces.join(""),
+    ),
+  );
+
+  const valueSize = Math.round(style.valueSize * 1.6);
+  const valueH = textHeight(valueSize);
+  const labelH = textHeight(style.labelSize);
+  const arcHeight = Math.ceil(diameter / 2);
+
+  nodes.push(
+    textNode(
+      "center:value",
+      { x: left, y: arcHeight - valueH, width: diameter },
+      formatChartValue(value, {
+        decimals: options.decimals,
+        unit: options.unit,
+      }),
+      {
+        style,
+        fontSize: valueSize,
+        fill: style.valueColor,
+        align: "center",
+        fontWeight: "700",
+      },
+    ),
+  );
+  nodes.push(
+    textNode(
+      "center:label",
+      { x: left, y: arcHeight + style.labelGap, width: diameter },
+      resolved.labels[index] ?? "",
+      {
+        style,
+        fontSize: style.labelSize,
+        fill: style.labelColor,
+        align: "center",
+        fontWeight: "400",
+      },
+    ),
+  );
+
+  return {
+    nodes,
+    size: { width, height: Math.round(arcHeight + style.labelGap + labelH) },
+  };
+}

package/lib/detail-page/chart/renderers/line.ts

@@ -0,0 +1,143 @@
+/**
+ * 꺾은선 — 시간에 따른 변화(사용 주차별 개선, 월별 판매).
+ *
+ * 선만 ``svg`` 하나로 그리고 점은 네이티브 원(figure), 글자는 네이티브 텍스트다.
+ * 시리즈가 여럿이면 위에 범례가 붙고, 값 라벨은 한 시리즈일 때만 붙인다 — 여러 줄의
+ * 값이 점 위에 겹치면 아무것도 안 읽힌다.
+ */
+
+import { formatChartValue } from "../format";
+import { itemColor, ratioOf, type ResolvedChart } from "../normalize";
+import type { ChartNode, ChartRender, ChartSpec } from "../types";
+import {
+  circleNode,
+  polylinePath,
+  seriesLegend,
+  svgNode,
+  textHeight,
+  textNode,
+} from "./shared";
+
+export function renderLine(spec: ChartSpec, resolved: ResolvedChart): ChartRender {
+  const { style, options } = spec;
+  const width = spec.frame.width;
+  const nodes: ChartNode[] = [];
+  const count = resolved.labels.length;
+  const single = resolved.series.length <= 1;
+
+  const seriesColors = resolved.series.map((_, i) =>
+    single
+      ? (style.palette[0] ?? style.mutedColor)
+      : (style.palette[i % Math.max(1, style.palette.length)] ?? style.mutedColor),
+  );
+  const legend = seriesLegend({
+    names: resolved.series.map((s) => s.name),
+    colors: seriesColors,
+    style,
+    top: 0,
+  });
+  nodes.push(...legend.nodes);
+
+  const valueH = textHeight(style.valueSize);
+  const labelH = textHeight(style.labelSize);
+  const showValues = single && options.showValue;
+  const headH =
+    (legend.height > 0 ? legend.height + style.labelGap : 0) +
+    (showValues ? valueH + style.labelGap : 0);
+  const plotTop = headH;
+  const plotBottom = plotTop + style.plotSize;
+
+  // 점이 프레임 모서리에서 반쪽으로 잘리지 않게 양쪽을 조금 비운다.
+  const dot = Math.max(3, Math.round(style.barSize / 3));
+  const pad = dot + 4;
+  const span = Math.max(1, width - pad * 2);
+  const xAt = (i: number) =>
+    count <= 1 ? width / 2 : pad + (span * i) / (count - 1);
+  const yAt = (value: number | null) =>
+    plotBottom - style.plotSize * ratioOf(value, resolved.max);
+
+  const paths = resolved.series
+    .map((series, s) => {
+      const points = series.values
+        .map((value, i) => ({ value, point: { x: xAt(i), y: yAt(value) } }))
+        .filter((entry) => entry.value !== null)
+        .map((entry) => entry.point);
+      if (points.length < 2) return "";
+      return `<path d="${polylinePath(points)}" fill="none" stroke="${
+        seriesColors[s]
+      }" stroke-width="${Math.max(2, Math.round(style.barSize / 4))}" stroke-linecap="round" stroke-linejoin="round"/>`;
+    })
+    .join("");
+  nodes.push(
+    svgNode(
+      "line",
+      { x: 0, y: plotTop, width, height: style.plotSize },
+      // path 좌표는 플롯 상단 기준이라 svg 안에서 다시 0으로 내린다.
+      `<g transform="translate(0 ${-plotTop})">${paths}</g>`,
+    ),
+  );
+
+  resolved.series.forEach((series, s) => {
+    series.values.forEach((value, i) => {
+      if (value === null) return;
+      nodes.push(
+        circleNode(`dot:${s}:${i}`, { x: xAt(i), y: yAt(value) }, dot, seriesColors[s]),
+      );
+    });
+  });
+
+  if (showValues) {
+    const values = resolved.series[0]?.values ?? [];
+    values.forEach((value, i) => {
+      const slot = count <= 1 ? width : span / Math.max(1, count - 1);
+      nodes.push(
+        textNode(
+          `value:${i}`,
+          {
+            x: xAt(i) - slot / 2,
+            y: yAt(value) - style.labelGap - valueH,
+            width: slot,
+          },
+          formatChartValue(value, {
+            decimals: options.decimals,
+            unit: options.unit,
+          }),
+          {
+            style,
+            fontSize: style.valueSize,
+            fill: style.valueColor,
+            align: "center",
+            fontWeight: "700",
+          },
+        ),
+      );
+    });
+  }
+
+  resolved.labels.forEach((label, i) => {
+    const slot = count <= 1 ? width : span / Math.max(1, count - 1);
+    nodes.push(
+      textNode(
+        `label:${i}`,
+        {
+          x: xAt(i) - slot / 2,
+          y: plotBottom + style.labelGap,
+          width: slot,
+        },
+        label,
+        {
+          style,
+          fontSize: style.labelSize,
+          fill: style.labelColor,
+          align: "center",
+          fontWeight: "400",
+        },
+      ),
+    );
+  });
+
+  return {
+    nodes,
+    size: { width, height: Math.round(plotBottom + style.labelGap + labelH) },
+  };
+}