@cardenelabs/dragon 0.34.0 → 0.35.0

package/src/compile/value-chart.ts

@@ -1,337 +0,0 @@
-import { diagram } from "@cardenelabs/cdl";
-import type { CdlDiagram } from "@cardenelabs/cdl";
-import type { DslDocument } from "../types";
-import type { DslShape } from "../keywords";
-import { parseChartValue, 数の欄から参照できる名前, 参照する名前, 図表の大きさを読む } from "./chart-fields";
-
-import { 箱の題 } from "./node-title";
-import type { CompileNotice } from "./notice";
-import { slugify } from "./slug";
-import { 図の小見出し } from "./subtitle";
-import { truncateForMessage } from "./subtitle";
-
-/** 記法で受ける円の見せ方と、描画側へ渡す値。 */
-export const CHART_PIE_FORM_WORDS: ReadonlyMap<string, "ring" | "arcs" | "table"> = new Map([
-  ["ring", "ring"],
-  ["輪", "ring"],
-  ["arcs", "arcs"],
-  ["積層の弧", "arcs"],
-  ["table", "table"],
-  ["銘板", "table"],
-]);
-/*
- * 棒 / 折れ線の組立て。 円グラフと **入力の形が同じ**なので 1 つにまとめる。
- *
- * 3 種とも `- 名前: "45"` の 1 行 1 値で書く。 違うのは描画側の種別と、 値の意味だけ。
- *
- * | 型 | 種別 | 値の意味 |
- * |---|---|---|
- * | `pie` | `chart-pie` | 全体に対する取り分 |
- * | `bar` | `chart-bar` | 棒の高さ (単位は問わない) |
- * | `line` | `chart-line` | 線の高さ。 **書いた順に並ぶ** |
- *
- * 値を読めない項目は載せず、 まとめて警告に出す。 **黙って 0 にしない** = その項目だけ欠けた
- * 図が「正しい図」 として出てしまうため。
- *
- * 矢印は描けない。 書かれていたら警告に出して捨てる (「書いたのに効かない」 を残さない)。
- */
-
-/**
- * 形から描画側の種別を引く (#2657)。
- *
- * **綴りを繋げて作らない**。 8 つは `chart-<形>` で作れるが、積み上げだけ
- * `chart-stacked-bar` で規則から外れる。 繋げて作ると その 1 つが黙って別の種別になる
- * (描画側は知らない種別の大きさを引けず、図の組み立てが落ちる)。
- */
-const 描画側の種別: Readonly<Record<DslShape, CdlDiagram["nodes"][number]["kind"]>> = {
-  pie: "chart-pie",
-  bar: "chart-bar",
-  line: "chart-line",
-  gauge: "chart-gauge",
-  radial: "chart-radial",
-  stat: "chart-stat",
-  waffle: "chart-waffle",
-  stacked: "chart-stacked-bar",
-  slope: "chart-slope",
-};
-
-/**
- * 型ごとの札の大きさ。
- *
- * **横も型で決める**。 縦が中身の大きさを決める型 (`stat` / `waffle` / `radial`) は、
- * 横をいくら広げても絵が大きくならない。 描画側の弧は
- * `外半径 = min(使える高さ / 2, 弧に使える幅 / 2)` で決まり、格子は行数で高さを使い切る。
- * 横を一律 640 にしていた間、余った分は左右の余白になるだけで、`stat` は札の 22%、
- * `waffle` は 57%、`radial` は 63% しか使っていなかった (見本帳の実描画を測った値)。
- *
- * **縦を使わない型を 368 にしない**。 `stacked` は帯 2 本と一覧だけで縦に伸びず、
- * 368 だと縦の 39% しか埋まらない。
- *
- * **横の使用率が既に足りている型は触らない**。 `gauge` は 79%、`bar` と `line` は 85%、
- * `slope` は 92% で、狭めても余白が減らず数だけが上がる。
- *
- * **どちらも 16 の倍数にする**。 描画側は大きさを 16 の倍数へ切り上げるため、
- * 外れた値を渡すと下端が格子から外れて全図で位置の警告が出る。
- * 棒と折れ線は 360 を切り上げた 368 になる。
- *
- * 数は見本帳の実描画から測った中身の幅に、その型が描画側で取る左右の余白を足した値。
- * **数だけを直しても合っているかは判らない**ので、実描画から使用率を測る検査
- * (`apps/playground-spa/tests/chart-card-fill.spec.ts`) が下限を見る。
- * 5 型を 640 に戻すと、その検査が 6 件の違反を出して落ちる (実測)。
- *
- * 組立て API (`cdl` の `chart()`) の既定は 640 のままなので、見本の円は `itemWidth` で
- * 揃える。 ずれたら `catalog-source-parity` が落ちる。
- */
-const 札の大きさ: Readonly<Record<Exclude<DslShape, "pie">, { w: number; h: number }>> = {
-  // 数値 1 つと名前だけ。 中身は 139 幅 x 137 高
-  stat: { w: 384, h: 240 },
-  // 格子 (367 幅) と一覧
-  waffle: { w: 464, h: 320 },
-  // 弧 (401 幅) と一覧
-  radial: { w: 512, h: 320 },
-  // 半円 (508 幅) と一覧。 横の使用率が 79% で足りているため変えない
-  gauge: { w: 640, h: 320 },
-  // 5 本の帯を見本の太さ 32 に近い比で置く。304 高では描画側の算式で 31.4px になる
-  stacked: { w: 640, h: 304 },
-  // 横軸を持つ 3 型。 横の使用率が 85% 以上なので変えない
-  bar: { w: 640, h: 368 },
-  line: { w: 640, h: 368 },
-  slope: { w: 640, h: 368 },
-};
-
-/** 描画側の円で使う寸法。`chart-pie.tsx` と同じ意味の値だけをここへ写す。 */
-const 円の寸法 = {
-  余白: 20,
-  弧の一覧の行: 56,
-  表の見出し: 40,
-  表の行: 52,
-} as const;
-
-const 格子へ切り上げる = (value: number): number => Math.ceil(value / 16) * 16;
-
-/**
- * 輪は、見せ方を書かない既存の円と同じ 480x320 を保つ。
- *
- * 積層の弧と銘板は、描画側が実際に確保する余白と一覧 1 行ぶんを区分数だけ積む。
- * 最後だけ格子に合わせて 16 の倍数へ上げる。
- */
-export function 円の札の大きさ(
-  form: "ring" | "arcs" | "table",
-  区分数: number,
-): { w: number; h: number } {
-  if (form === "ring") return { w: 480, h: 320 };
-
-  const 件数 = Math.max(1, 区分数);
-  const 上下の余白 = 円の寸法.余白 * 2;
-  const 高さ =
-    form === "table"
-      ? 上下の余白 + 円の寸法.表の見出し + 円の寸法.表の行 * 件数
-      : 上下の余白 + 円の寸法.弧の一覧の行 * 件数;
-  return { w: 480, h: 格子へ切り上げる(高さ) };
-}
-
-export function compileValueChart(
-  doc: DslDocument,
-  型: DslShape,
-  onNotice?: (notice: CompileNotice) => void,
-): CdlDiagram {
-  const kind = 描画側の種別[型];
-  const b = diagram(slugify(doc.title), { topic: doc.title, type: "chart" });
-
-  const data: NonNullable<CdlDiagram["nodes"][number]["chartData"]> = [];
-  const 読めない: string[] = [];
-  const 前が読めない: string[] = [];
-  let 前が読めない行 = 0;
-  const 未宣言: string[] = [];
-  let 未宣言行 = 0;
-  const 参照できる = 数の欄から参照できる名前(doc);
-  // 最初に読めなかった行を覚える。 画面が案内できるようにする
-  let 読めない行 = 0;
-  for (const a of doc.actors) {
-    // 値の置き場所は記法で 2 通りある。 略記 (`- TypeScript: "45%"`) は説明文に、
-    // 縦書きの map (`- SliceA: { kind: card, value: "30%" }`) は値に入る。 両方を読む
-    const value = parseChartValue(a.value ?? a.subtitle);
-    // **負を受けるのは折れ線と傾き図だけ**。 どちらも増減を追う図なので、気温や損益のように
-    // 0 を跨ぐ値が来る。 円は取り分、 棒は高さで、 どちらも負に意味が無い (review 指摘)。
-    // 状態を読む欄 (`{名前}`) は書いた時点で符号が決まらないため、この検査を通す
-    if (
-      value === null ||
-      (typeof value === "number" && value < 0 && 型 !== "line" && 型 !== "slope")
-    ) {
-      // `pos` を持たない経路がある (JSON 経路で組み立てた actor)。 無ければ 0 のまま
-      if (読めない.length === 0) 読めない行 = a.pos?.line ?? 0;
-      読めない.push(a.name);
-      continue;
-    }
-    // 数にならない参照は落とす。 通すと図は出るのに数が入っていない状態になる
-    const 名前 = 参照する名前(value);
-    if (名前 !== null && !参照できる.has(名前)) {
-      if (未宣言.length === 0) 未宣言行 = a.pos?.line ?? 0;
-      未宣言.push(a.name);
-      continue;
-    }
-    // 色はそのまま渡す。 箱が 1 つになっても、 書いた色が消えないようにする
-    // 前の時点の値 (#1450)。 読めない形は黙って捨てず知らせる = 書いたのに 2 本目の帯が
-    // 出ない状態になり、手掛かりが残らない
-    const 前 = a.previous === undefined ? null : parseChartValue(a.previous);
-    if (a.previous !== undefined && 前 === null) {
-      if (前が読めない.length === 0) 前が読めない行 = a.pos?.line ?? 0;
-      前が読めない.push(a.name);
-    }
-    data.push({
-      ...(型 === "slope" || 型 === "stacked" ? { id: slugify(a.name) } : {}),
-      label: 箱の題(a),
-      value,
-      ...(前 === null ? {} : { previous: 前 }),
-      ...(a.tone !== undefined ? { tone: a.tone } : {}),
-      ...(a.emphasis !== undefined ? { emphasis: a.emphasis } : {}),
-    });
-  }
-  // 案内の言葉は型ごとに変える。 共通化した時に `pie` の「割合 / 円 / 45%」 が「値 / 図 / 45」 に
-  // 薄まり、 既存の案内が後退した (review 指摘)。 何を書けばよいかは型ごとに違う
-  // 何を書けばよいかは型ごとに違う。 まとめると「割合 / 円 / 45%」 が「値 / 図 / 45」 に薄まる
-  //
-  // **表で持つ**。 三項の連鎖にすると、型が増えるたびに深さが増え、最後の枝が
-  // 「それ以外」 になるため型検査が新しい型の漏れを教えてくれない
-  const 語の表: Record<typeof 型, { 量: string; 図: string; 例: string }> = {
-    pie: { 量: "割合", 図: "円", 例: '"45%"' },
-    bar: { 量: "値", 図: "棒", 例: '"420"' },
-    line: { 量: "値", 図: "折れ線", 例: '"180"' },
-    gauge: { 量: "値", 図: "半円", 例: '"680"' },
-    radial: { 量: "値", 図: "弧", 例: '"72"' },
-    stat: { 量: "値", 図: "大きな数字", 例: '"1200"' },
-    waffle: { 量: "割合", 図: "100 個の印", 例: '"45%"' },
-    stacked: { 量: "内訳の値", 図: "帯", 例: '"320"' },
-    slope: { 量: "値", 図: "傾き図", 例: '"320"' },
-  };
-  const 語 = 語の表[型];
-
-  /**
-   * 利用者に伝える。 **`console.warn` だけにしない**。 エディタは受け取った notice を画面に
-   * 出す経路を持っており、 log だけだと項目が消えた理由が誰にも見えない (review 指摘)。
-   */
-  const 伝える = (種類: CompileNotice["kind"], 名前: string, message: string, line = 0) => {
-    onNotice?.({ kind: 種類, actor: 名前, line, message });
-    if (typeof console !== "undefined" && console.warn) console.warn(`[dragon] ${message}`);
-  };
-
-  const pieForm = doc.form === undefined ? undefined : CHART_PIE_FORM_WORDS.get(doc.form);
-  if (型 === "pie" && doc.form !== undefined && pieForm === undefined) {
-    伝える(
-      "chart-value-unreadable",
-      doc.title,
-      `type: pie で見せ方 (${truncateForMessage(doc.form)}) が読めません (既定の輪で描きます)。 ring / arcs / table または 輪 / 積層の弧 / 銘板 のどれかを書いてください`,
-      doc.formPos?.line ?? 0,
-    );
-  }
-
-  if (読めない.length > 0) {
-    伝える(
-      "chart-value-unreadable",
-      読めない[0]!,
-      `type: ${型} で${語.量}を読めない項目があります (${語.図}に載せません): ${読めない.join(", ")}。` +
-        ` \`- 名前: ${語.例}\` の形で書いてください`,
-      読めない行,
-    );
-  }
-  if (未宣言.length > 0) {
-    伝える(
-      "chart-value-unreadable",
-      未宣言[0]!,
-      `type: ${型} で数にならない値を参照した項目があります (${語.図}に載せません): ${未宣言.join(", ")}。` +
-        ` \`states:\` にその名前を数で書いてください`,
-      未宣言行,
-    );
-  }
-  if (前が読めない.length > 0) {
-    伝える(
-      "chart-value-unreadable",
-      前が読めない[0]!,
-      `type: ${型} で前の時点の値を読めない項目があります (前の値を使いません): ${前が読めない.join(", ")}。` +
-        " `- 名前: { value: " +
-        語.例 +
-        ", previous: " +
-        語.例 +
-        " }` の形で書いてください",
-      前が読めない行,
-    );
-  }
-  if (doc.flow.length > 0) {
-    伝える(
-      "chart-edge-dropped",
-      doc.flow[0]?.from ?? "",
-      `type: ${型} では矢印を描けません (${doc.flow.length} 本を無視しました)。` +
-        ` 関係を描くなら type: flow を使ってください`,
-      doc.flow[0]?.pos?.line ?? 0,
-    );
-  }
-
-  const { w: CHART_W, h: CHART_H } = 図表の大きさを読む(
-    doc,
-    型 === "pie" ? 円の札の大きさ(pieForm ?? "ring", data.length) : 札の大きさ[型],
-  );
-  b.lane("chart", { width: CHART_W + 64 });
-
-  b.node(`${slugify(doc.title) || 型}-chart`, {
-    lane: "chart",
-    stack: 0,
-    kind,
-    title: doc.title,
-    ...図の小見出し(doc),
-    w: CHART_W,
-    h: CHART_H,
-    chartData: data,
-    ...(型 === "pie" && pieForm !== undefined ? { chartPieForm: pieForm } : {}),
-    ...(doc.chartSeriesSkipMuted !== undefined
-      ? { chartSeriesSkipMuted: doc.chartSeriesSkipMuted }
-      : {}),
-    ...(型 === "line" && doc.chartLineSeries !== undefined
-      ? { chartLineSeries: doc.chartLineSeries }
-      : {}),
-    ...(型 === "pie" && doc.chartPieCenterLabel !== undefined
-      ? { chartPieCenterLabel: doc.chartPieCenterLabel }
-      : {}),
-    ...(型 === "pie" && doc.chartPieTableColumns !== undefined
-      ? { chartPieTableColumns: doc.chartPieTableColumns }
-      : {}),
-    ...(型 === "pie" && doc.chartPieRingWidth !== undefined
-      ? { chartPieRingWidth: doc.chartPieRingWidth }
-      : {}),
-    ...(型 === "bar" && doc.chartBarSize !== undefined ? { chartBarSize: doc.chartBarSize } : {}),
-    ...(型 === "bar" && doc.chartBarShape !== undefined ? { chartBarShape: doc.chartBarShape } : {}),
-    ...(型 === "line" && doc.chartLineSize !== undefined ? { chartLineSize: doc.chartLineSize } : {}),
-    ...(型 === "pie" && doc.chartPieSize !== undefined ? { chartPieSize: doc.chartPieSize } : {}),
-    ...(型 === "waffle" && doc.chartWaffleSize !== undefined ? { chartWaffleSize: doc.chartWaffleSize } : {}),
-    ...(型 === "slope" && doc.chartSlopeLabelTemplate !== undefined ? { chartSlopeLabelTemplate: doc.chartSlopeLabelTemplate } : {}),
-    ...(型 === "slope" && doc.chartSlopeSize !== undefined ? { chartSlopeSize: doc.chartSlopeSize } : {}),
-    ...(型 === "stacked" && doc.chartStackedLayout !== undefined ? { chartStackedLayout: doc.chartStackedLayout } : {}),
-    ...(型 === "gauge" && doc.chartGaugeSize !== undefined ? { chartGaugeSize: doc.chartGaugeSize } : {}),
-    ...((型 === "pie" || 型 === "waffle") && doc.terminalDecoration !== undefined ? { terminalDecoration: doc.terminalDecoration } : {}),
-    ...(型 === "slope" && doc.chartSlopePeriods !== undefined
-      ? { chartSlopePeriods: doc.chartSlopePeriods }
-      : {}),
-    ...(型 === "slope" && doc.chartSlopeEmphasisIds !== undefined
-      ? { chartSlopeEmphasisIds: doc.chartSlopeEmphasisIds }
-      : {}),
-    ...(型 === "slope" && doc.chartSlopeUnit !== undefined
-      ? { chartSlopeUnit: doc.chartSlopeUnit }
-      : {}),
-    ...(型 === "stacked" && doc.chartStackedPeriods !== undefined
-      ? { chartStackedPeriods: doc.chartStackedPeriods }
-      : {}),
-    ...(型 === "stacked" && doc.chartStackedRateId !== undefined
-      ? { chartStackedRateId: slugify(doc.chartStackedRateId) }
-      : {}),
-    ...(型 === "stacked" && doc.chartStackedLegendPosition !== undefined
-      ? { chartStackedLegendPosition: doc.chartStackedLegendPosition }
-      : {}),
-    ...(型 === "gauge" && doc.chartGaugeValue !== undefined
-      ? { chartGaugeValue: doc.chartGaugeValue }
-      : {}),
-    ...(型 === "waffle" && doc.chartWaffleLegendPosition !== undefined
-      ? { chartWaffleLegendPosition: doc.chartWaffleLegendPosition }
-      : {}),
-  });
-
-  return b.build();
-}