@leviosa-ai/detail-page-editor 0.1.0

package/lib/detail-page/chart/palette.ts

@@ -0,0 +1,85 @@
+/**
+ * 팔레트를 **차트 종류에 맞는 슬롯**으로 펼친다.
+ *
+ * ``style.palette``는 한 배열인데 종류마다 무엇에 대응하는지가 다르다:
+ *
+ * - 막대·도넛·게이지 — **항목별**(``itemColor``가 ``palette[항목 인덱스]``를 쓴다)
+ * - 라인·스택 — **시리즈별**(``renderers/line.ts``·``stack.ts``가 ``palette[시리즈 인덱스]``)
+ *
+ * 그래서 인스펙터도 종류를 보고 슬롯을 펼쳐야 한다. 한 색만 노출하면 "두 번째 막대 색을
+ * 못 바꾸는" 상태가 되고, 반대로 항상 여러 개를 펼치면 아래 ``highlightIndex`` 경우에
+ * **눌러도 아무 일도 안 일어나는 컨트롤**이 생긴다.
+ *
+ * ``highlightIndex``가 지정되면 강조 항목만 ``palette[0]``을 쓰고 나머지는 전부
+ * ``mutedColor``다(``normalize.ts``의 ``itemColor``). 이때 슬롯은 하나뿐이다.
+ */
+
+import { DEFAULT_CHART_PALETTE } from "./defaults";
+import type { ChartSpec } from "./types";
+
+/**
+ * 패널에 펼칠 슬롯 상한.
+ *
+ * 항목이 20개인 차트에 색 고르개를 20개 세우면 인스펙터가 색 목록이 된다. 넘는 항목은
+ * 팔레트를 되돌아 쓰므로(``palette[i % length]``) 색이 없어지지는 않는다.
+ */
+export const MAX_PALETTE_SLOTS = 12;
+
+export type PaletteScope = "highlight" | "series" | "item";
+
+export type PaletteSlot = {
+  /** ``style.palette``에서의 자리. */
+  index: number;
+  /** 데이터가 준 이름(항목 라벨 또는 시리즈 이름). 비어 있을 수 있다. */
+  name: string;
+  color: string;
+};
+
+/** 이 차트에서 팔레트가 무엇에 대응하는가. */
+export function paletteScope(spec: ChartSpec): PaletteScope {
+  if (spec.options.highlightIndex !== null) return "highlight";
+  return spec.kind === "line" || spec.kind === "stack" ? "series" : "item";
+}
+
+/** ``index``에 실제로 쓰이는 색. 팔레트가 짧으면 되돌아 쓴다(렌더러와 같은 규칙). */
+export function paletteColorAt(spec: ChartSpec, index: number): string {
+  const palette = spec.style.palette;
+  if (palette.length === 0) return DEFAULT_CHART_PALETTE[0];
+  return palette[index % palette.length];
+}
+
+export function paletteSlots(spec: ChartSpec): PaletteSlot[] {
+  const scope = paletteScope(spec);
+  if (scope === "highlight") {
+    const at = spec.options.highlightIndex ?? 0;
+    return [{ index: 0, name: spec.data.labels[at] ?? "", color: paletteColorAt(spec, 0) }];
+  }
+
+  const names =
+    scope === "series"
+      ? spec.data.series.map((s) => s.name)
+      : spec.data.labels.map((label) => label);
+  const count = Math.min(MAX_PALETTE_SLOTS, Math.max(1, names.length));
+  return Array.from({ length: count }, (_, index) => ({
+    index,
+    name: names[index] ?? "",
+    color: paletteColorAt(spec, index),
+  }));
+}
+
+/**
+ * 슬롯 하나의 색을 바꾼 스펙.
+ *
+ * 팔레트가 그 자리까지 없으면 **지금 쓰이던 색으로 채워서** 늘린다. 그냥 늘리면 되돌아
+ * 쓰기(``palette[i % length]``) 때문에 손대지도 않은 앞쪽 항목들의 색이 같이 바뀐다.
+ */
+export function withPaletteColor(
+  spec: ChartSpec,
+  index: number,
+  color: string,
+): ChartSpec {
+  const palette = [...spec.style.palette];
+  while (palette.length <= index) palette.push(paletteColorAt(spec, palette.length));
+  palette[index] = color;
+  return { ...spec, style: { ...spec.style, palette } };
+}

package/lib/detail-page/chart/paste.ts

@@ -0,0 +1,82 @@
+/**
+ * 엑셀·구글시트에서 **붙여넣기**.
+ *
+ * 클립보드의 ``text/plain``은 스프레드시트에서 탭 구분 텍스트로 온다. Canva·미리캔버스가
+ * 하는 것도 이거고, 파일 업로드보다 압도적으로 자주 쓰인다. CSV(쉼표)·세미콜론도 같이
+ * 받아 준다.
+ *
+ * 첫 행이 머리글인지(값이 하나도 안 읽히는 행인지)로 판단해 시리즈 이름으로 쓴다.
+ * 첫 열은 항상 항목 라벨이다.
+ */
+
+// 쪼개는 규칙은 표와 한 벌이다(``spec-group/clipboard``).
+import {
+  cellsOf,
+  pickDelimiter,
+  splitLines,
+} from "../spec-group/clipboard";
+
+import { parseChartNumber } from "./format";
+import type { ChartData } from "./types";
+
+/** 붙여넣기로 받아 줄 최대 크기. 넘으면 잘라낸다(차트로 읽을 수 있는 범위를 넘어선다). */
+export const MAX_PASTE_ROWS = 24;
+export const MAX_PASTE_SERIES = 6;
+
+/**
+ * 붙여넣은 텍스트를 차트 데이터로. 읽을 게 없으면 ``null``.
+ *
+ * 한 열짜리 숫자 목록도 받는다(라벨은 1,2,3…으로 채운다) — 값만 복사해 오는 경우가
+ * 생각보다 흔하다.
+ */
+export function parseChartTable(text: string): ChartData | null {
+  const lines = splitLines(text ?? "");
+  if (lines.length === 0) return null;
+
+  const delimiter = pickDelimiter(lines);
+  const rows = lines.map((line) => cellsOf(line, delimiter));
+  const columns = Math.min(
+    MAX_PASTE_SERIES + 1,
+    rows.reduce((most, row) => Math.max(most, row.length), 0),
+  );
+  if (columns === 0) return null;
+
+  // 한 열짜리: 전부 숫자면 값 목록, 아니면 라벨 목록.
+  if (columns === 1) {
+    const first = rows.slice(0, MAX_PASTE_ROWS).map((row) => row[0] ?? "");
+    const numbers = first.map(parseChartNumber);
+    const allNumeric = numbers.every((n) => n !== null);
+    if (allNumeric) {
+      return {
+        labels: first.map((_, i) => String(i + 1)),
+        series: [{ name: "값", values: numbers }],
+      };
+    }
+    return {
+      labels: first,
+      series: [{ name: "값", values: first.map(() => null) }],
+    };
+  }
+
+  // 머리글 판정: 첫 행의 값 칸(1열 이후)에서 숫자를 하나도 못 읽으면 머리글이다.
+  const head = rows[0];
+  const headHasNumber = head
+    .slice(1, columns)
+    .some((cell) => parseChartNumber(cell) !== null);
+  const names = headHasNumber
+    ? Array.from({ length: columns - 1 }, (_, i) => `값 ${i + 1}`)
+    : Array.from(
+        { length: columns - 1 },
+        (_, i) => head[i + 1] || `값 ${i + 1}`,
+      );
+  const body = (headHasNumber ? rows : rows.slice(1)).slice(0, MAX_PASTE_ROWS);
+  if (body.length === 0) return null;
+
+  return {
+    labels: body.map((row) => row[0] ?? ""),
+    series: names.map((name, column) => ({
+      name,
+      values: body.map((row) => parseChartNumber(row[column + 1])),
+    })),
+  };
+}

package/lib/detail-page/chart/preview.ts

@@ -0,0 +1,78 @@
+/**
+ * 좌측 패널 썸네일용 SVG.
+ *
+ * 별도 이미지 자산을 만들지 않고 **같은 렌더러 출력**을 SVG로 옮긴다. 그래서 프리셋을
+ * 고치면 썸네일이 저절로 따라오고, 카탈로그와 실제 결과가 어긋날 일이 없다.
+ *
+ * 여기서 만드는 SVG는 화면 미리보기 전용이라 편집기 캔버스에 들어가지 않는다 —
+ * ``<img>``로 로드된 SVG는 페이지 폰트를 못 받지만, 썸네일에서는 문제되지 않는다.
+ */
+
+import { decodeSvgDataUri } from "../../detail-page-canvas/export/svg";
+
+import { renderChart } from "./render";
+import type { ChartSpec } from "./types";
+
+function escapeXml(text: string): string {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function num(value: unknown, fallback = 0): number {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+
+function str(value: unknown, fallback = ""): string {
+  return typeof value === "string" ? value : fallback;
+}
+
+/** 렌더 노드 하나를 SVG 조각으로. */
+function nodeMarkup(props: Record<string, unknown>): string {
+  const x = num(props.x);
+  const y = num(props.y);
+  if (props.type === "svg") {
+    // 곡선 기하(도넛 고리·게이지 호·꺾은선)는 이미 SVG다. 루트에 x/y만 얹어 그 자리에
+    // 중첩한다(중첩 ``<svg>``는 자기 viewBox를 들고 있어 크기가 그대로 유지된다).
+    const inner = decodeSvgDataUri(str(props.src));
+    if (!inner) return "";
+    return inner.replace(/^<svg\s/, `<svg x="${x}" y="${y}" `);
+  }
+  if (props.type === "figure") {
+    const radius = num(props.cornerRadius);
+    // 카드 테두리는 stroke로 그린다 — 안 실으면 썸네일에서 프레임이 사라진다.
+    const strokeWidth = num(props.strokeWidth);
+    const stroke =
+      strokeWidth > 0 && typeof props.stroke === "string"
+        ? ` stroke="${escapeXml(props.stroke)}" stroke-width="${strokeWidth}"`
+        : "";
+    return `<rect x="${x}" y="${y}" width="${num(props.width)}" height="${num(
+      props.height,
+    )}" rx="${radius}" ry="${radius}" fill="${escapeXml(
+      str(props.fill, "#000"),
+    )}"${stroke}/>`;
+  }
+  if (props.type === "text") {
+    const text = str(props.text);
+    if (!text) return "";
+    const width = num(props.width);
+    const size = num(props.fontSize, 12);
+    const align = str(props.align, "left");
+    const anchor = align === "right" ? "end" : align === "center" ? "middle" : "start";
+    const anchorX = align === "right" ? x + width : align === "center" ? x + width / 2 : x;
+    // SVG는 baseline 기준이라 한 줄 높이의 약 0.8을 내려 앉힌다(썸네일 근사치).
+    return `<text x="${anchorX}" y="${y + size * 0.85}" font-size="${size}" text-anchor="${anchor}" font-weight="${escapeXml(
+      str(props.fontWeight, "400"),
+    )}" fill="${escapeXml(str(props.fill, "#000"))}">${escapeXml(text)}</text>`;
+  }
+  return "";
+}
+
+/** 스펙을 그대로 그린 미리보기 SVG 마크업. */
+export function chartPreviewSvg(spec: ChartSpec): string {
+  const { nodes, size } = renderChart(spec);
+  const body = nodes.map((node) => nodeMarkup(node.props)).join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size.width} ${size.height}" width="${size.width}" height="${size.height}"><g font-family="sans-serif">${body}</g></svg>`;
+}

package/lib/detail-page/chart/render.ts

@@ -0,0 +1,188 @@
+/**
+ * 스펙 → 요소 목록. **순수함수**이고 스토어를 모른다.
+ *
+ * 종류별 렌더러를 레지스트리로 물고 있어서, 새 종류는 렌더러 파일 하나 + 등록 한 줄로
+ * 늘어난다. UI가 고를 수 있는 종류(``CHART_KINDS``)도 이 레지스트리에서 나오므로,
+ * 아직 안 만든 종류가 드롭다운에 뜨는 일이 없다.
+ */
+
+import { resolveChart, type ResolvedChart } from "./normalize";
+import { renderBarH } from "./renderers/bar-h";
+import { renderBarV } from "./renderers/bar-v";
+import { renderDonut } from "./renderers/donut";
+import { renderGauge } from "./renderers/gauge";
+import { renderLine } from "./renderers/line";
+import { renderStack } from "./renderers/stack";
+import type {
+  ChartKind,
+  ChartNode,
+  ChartRender,
+  ChartSpec,
+  ChartStyle,
+} from "./types";
+
+type Renderer = (spec: ChartSpec, resolved: ResolvedChart) => ChartRender;
+
+const RENDERERS: Partial<Record<ChartKind, Renderer>> = {
+  "bar-h": renderBarH,
+  "bar-v": renderBarV,
+  donut: renderDonut,
+  line: renderLine,
+  stack: renderStack,
+  gauge: renderGauge,
+};
+
+/** UI에 노출할 수 있는 종류(= 렌더러가 있는 종류). */
+export const CHART_KINDS = Object.keys(RENDERERS) as ChartKind[];
+
+export function hasRenderer(kind: ChartKind): boolean {
+  return Boolean(RENDERERS[kind]);
+}
+
+/**
+ * 차트를 카드(바탕 + 테두리 + 안여백)로 감싼다.
+ *
+ * 내용 전체를 ``pad``만큼 밀고 그만큼 큰 바탕을 맨 뒤에 깐다. 종류를 안 가리므로
+ * 렌더러마다 카드 처리를 따로 두지 않는다.
+ *
+ * 테두리는 채움이 **있는** 사각형의 stroke로 그린다 — 투명 채움(rgba(0,0,0,0))은
+ * .ai 내보내기에서 검은 박스로 굳은 전례가 있다.
+ */
+function withCard(render: ChartRender, spec: ChartSpec): ChartRender {
+  const card = spec.style.card;
+  if (!card) return render;
+  const pad = Math.max(0, card.pad);
+  const width = render.size.width + pad * 2;
+  const height = render.size.height + pad * 2;
+  const base: ChartNode = {
+    key: "card",
+    props: {
+      type: "figure",
+      subType: "rect",
+      x: 0,
+      y: 0,
+      width: Math.round(width),
+      height: Math.round(height),
+      fill: card.fill,
+      cornerRadius: Math.round(card.radius),
+      ...(card.stroke && card.width > 0
+        ? { stroke: card.stroke, strokeWidth: card.width }
+        : {}),
+    },
+  };
+  const moved = render.nodes.map((node) => ({
+    ...node,
+    props: {
+      ...node.props,
+      x: Math.round(Number(node.props.x ?? 0)) + pad,
+      y: Math.round(Number(node.props.y ?? 0)) + pad,
+    },
+  }));
+  return {
+    nodes: [base, ...moved],
+    size: { width: Math.round(width), height: Math.round(height) },
+  };
+}
+
+/**
+ * 렌더. 등록 안 된 종류는 가로 막대로 떨어진다 — 예전 문서에 저장된 종류를 열었을 때
+ * 빈 그룹이 되는 것보다는 낫다.
+ */
+export function renderChart(spec: ChartSpec): ChartRender {
+  const render = RENDERERS[spec.kind] ?? renderBarH;
+  // 카드 여백은 **안쪽으로** 판다. 내용을 그만큼 좁게 그리고 카드가 원래 폭을 되찾는다.
+  //
+  // 밖으로 밀면 렌더 폭이 `frame.width`보다 커지는데, 그 값이 그대로 `frame.width`로
+  // 저장된다(`spec-group/sync.ts`). 데이터를 고칠 때마다 차트가 여백 두 배씩 넓어진다.
+  const pad = Math.max(0, spec.style.card?.pad ?? 0);
+  const inner =
+    pad > 0
+      ? {
+          ...spec,
+          frame: { ...spec.frame, width: Math.max(80, spec.frame.width - pad * 2) },
+        }
+      : spec;
+  return withCard(render(inner, resolveChart(inner)), spec);
+}
+
+/** 세로 리듬(글자·막대·간격)을 함께 키우고 줄이는 스타일 키. */
+const SCALABLE: (keyof ChartStyle)[] = [
+  "labelSize",
+  "valueSize",
+  "barSize",
+  "gap",
+  "labelGap",
+  "plotSize",
+  "cornerRadius",
+];
+
+/**
+ * 세로 리듬만 배율로 키우거나 줄인다(프레임 폭은 호출자가 정한다).
+ *
+ * 리사이즈 흡수와 패널 썸네일이 같은 함수를 쓴다 — 그래야 썸네일이 실제 결과와 같은
+ * 비례로 보인다.
+ */
+export function scaleChartStyle(spec: ChartSpec, factor: number): ChartSpec {
+  const scale = Math.max(0.05, Math.min(20, factor));
+  const style: ChartStyle = { ...spec.style };
+  const writable = style as unknown as Record<string, unknown>;
+  for (const key of SCALABLE) {
+    const value = style[key];
+    if (typeof value === "number") {
+      writable[key] = Math.max(1, Math.round(value * scale));
+    }
+  }
+  // 판 크롬·카드도 같이 줄인다. 안 그러면 썸네일에서 눈금 글자와 카드 여백만 원래
+  // 크기로 남아 실제 결과와 다른 비례로 보인다. 선 두께는 안 건드린다 — 0.3px 선은
+  // 썸네일에서 사라져 "선이 없는 차트"로 보인다.
+  if (style.plot?.ticks) {
+    style.plot = {
+      ...style.plot,
+      ticks: {
+        ...style.plot.ticks,
+        size: Math.max(4, Math.round(style.plot.ticks.size * scale)),
+        gutter: Math.max(8, Math.round(style.plot.ticks.gutter * scale)),
+      },
+    };
+  }
+  if (style.card) {
+    style.card = {
+      ...style.card,
+      pad: Math.max(2, Math.round(style.card.pad * scale)),
+      radius: Math.max(0, Math.round(style.card.radius * scale)),
+    };
+  }
+  return { ...spec, style };
+}
+
+/**
+ * 사용자가 그룹을 잡아 늘린 걸 스펙에 **흡수**한다.
+ *
+ * 스톡 편집기는 그룹을 늘리면 자식을 스케일한다. 그 상태에서 데이터만 고쳐 다시 그리면
+ * 원래 크기로 튕겨 돌아가 버린다. 그래서 재생성 직전에 실제 상자를 재서:
+ *
+ * - 가로 변화 → ``frame.width``만 갱신(막대가 길어질 뿐, 글자는 그대로)
+ * - 세로 변화 → 세로 리듬(글자·막대 두께·간격)을 그 비율로 스케일
+ *
+ * 가로와 세로를 다르게 다루는 게 의도다. 가로로 늘렸을 때 글자까지 커지면 "폭만 넓히고
+ * 싶었는데" 라는 상황이 매번 생긴다.
+ */
+export function absorbResize(
+  spec: ChartSpec,
+  actual: { width: number; height: number },
+): ChartSpec {
+  const width = Math.max(40, Math.round(actual.width));
+  const previous = spec.frame.height;
+  const changedHeight =
+    previous > 0 && Math.abs(actual.height - previous) > 1;
+  if (!changedHeight) {
+    return width === spec.frame.width
+      ? spec
+      : { ...spec, frame: { ...spec.frame, width } };
+  }
+  const scaled = scaleChartStyle(
+    spec,
+    Math.max(0.2, Math.min(5, actual.height / previous)),
+  );
+  return { ...scaled, frame: { width, height: spec.frame.height } };
+}

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

@@ -0,0 +1,103 @@
+/**
+ * 가로 막대 — 상세페이지에서 가장 많이 쓰는 형태.
+ *
+ * 한 행 = 라벨(왼쪽) · 값(오른쪽) 한 줄 + 그 아래 꽉 찬 막대. 템플릿의 벤치마크 섹션
+ * (``F-digital-compat/.../benchmark``)이 손으로 그리던 구조 그대로이고, 다른 점은
+ * **막대 길이가 값에서 나온다**는 것 하나다.
+ */
+
+import { formatChartValue } from "../format";
+import { itemColor, ratioOf, type ResolvedChart } from "../normalize";
+import type { ChartNode, ChartRender, ChartSpec } from "../types";
+import { barRadius, rectNode, textHeight, textNode, visibleLength } from "./shared";
+
+/** 라벨이 차지하는 가로 비율. 나머지가 값 칸이다. */
+const LABEL_RATIO = 0.62;
+
+export function renderBarH(spec: ChartSpec, resolved: ResolvedChart): ChartRender {
+  const { style, options } = spec;
+  const width = spec.frame.width;
+  const values = resolved.series[0]?.values ?? [];
+  const nodes: ChartNode[] = [];
+
+  const labelH = textHeight(style.labelSize);
+  const valueH = textHeight(style.valueSize);
+  const headH = Math.max(labelH, valueH);
+  const rowH = headH + style.labelGap + style.barSize;
+  const radius = barRadius(style, style.barSize);
+  const labelWidth = options.showValue ? width * LABEL_RATIO : width;
+
+  resolved.labels.forEach((label, i) => {
+    const top = i * (rowH + style.gap);
+    const value = values[i] ?? null;
+    const ratio = ratioOf(value, resolved.max);
+    const barTop = top + headH + style.labelGap;
+    const color = itemColor(spec, i, resolved.highlightIndex);
+
+    if (style.showTrack) {
+      nodes.push(
+        rectNode(
+          `track:${i}`,
+          { x: 0, y: barTop, width, height: style.barSize },
+          style.trackColor,
+          radius,
+        ),
+      );
+    }
+    nodes.push(
+      rectNode(
+        `bar:${i}`,
+        {
+          x: 0,
+          y: barTop,
+          width: visibleLength(width * ratio, ratio),
+          height: style.barSize,
+        },
+        color,
+        radius,
+      ),
+    );
+    nodes.push(
+      textNode(
+        `label:${i}`,
+        { x: 0, y: top + (headH - labelH) / 2, width: labelWidth },
+        label,
+        {
+          style,
+          fontSize: style.labelSize,
+          fill: style.labelColor,
+          align: "left",
+          fontWeight: "500",
+        },
+      ),
+    );
+    if (options.showValue) {
+      nodes.push(
+        textNode(
+          `value:${i}`,
+          {
+            x: labelWidth,
+            y: top + (headH - valueH) / 2,
+            width: width - labelWidth,
+          },
+          formatChartValue(value, {
+            decimals: options.decimals,
+            unit: options.unit,
+          }),
+          {
+            style,
+            fontSize: style.valueSize,
+            fill: style.valueColor,
+            align: "right",
+            fontWeight: "700",
+          },
+        ),
+      );
+    }
+  });
+
+  const rows = resolved.labels.length;
+  const height =
+    rows > 0 ? rows * rowH + (rows - 1) * style.gap : Math.round(rowH);
+  return { nodes, size: { width, height: Math.round(height) } };
+}