@cardenelabs/dragon 0.30.0 → 0.32.0

package/src/compile/tree.ts

@@ -1,7 +1,7 @@
-import { diagram } from "@cardenelabs/cdl";
+import { diagram, 木の札の幅 } from "@cardenelabs/cdl";
 import type { CdlDiagram } from "@cardenelabs/cdl";
 import type { DslDocument } from "../types";
-import { 図表の大きさ } from "./chart-fields";
+import { 図表の大きさ, 図表の大きさを読む } from "./chart-fields";
 import { 矢印から親を決める, 放射に出す文字 } from "./hierarchy";
 import type { CompileNotice } from "./notice";
 import { slugify } from "./slug";
@@ -14,8 +14,6 @@ import { 図の小見出し } from "./subtitle";
  */
 export function compileTree(doc: DslDocument, onNotice?: (n: CompileNotice) => void): CdlDiagram {
   const b = diagram(slugify(doc.title), { topic: doc.title, type: "tree" });
-  const { w: W, h: H } = 図表の大きさ.tree;
-  b.lane("chart", { width: W + 64 });
   // **同じ slug になる名前を先に見る**。 違う名前が同じ id に潰れると、 自分を親にしたと
   // 誤判定したり、 同じ id の要素が 2 つできたりする (review 指摘)
   const slug別 = new Map<string, string[]>();
@@ -46,6 +44,12 @@ export function compileTree(doc: DslDocument, onNotice?: (n: CompileNotice) => v
     // 書いた文字が図に出ない
     return { id, ...放射に出す文字(a), ...(p3 !== undefined ? { parent: p3 } : {}) };
   });
+  // 札の幅は葉の数で変わる (cdl#970)。 **規則は描画側が持つ** ので、ここでは引くだけにする。
+  // 写すと、描画側が割付を変えた時に記法の側だけが古い幅を渡す。
+  // 高さは段の数で決まり、描画側が既定を返す形なので表から取る
+  const 既定W = 木の札の幅(data);
+  const { w: W, h: H } = 図表の大きさを読む(doc, { w: 既定W, h: 図表の大きさ.tree.h });
+  b.lane("chart", { width: W + 64 });
   b.node(`${slugify(doc.title) || "tree"}-chart`, {
     lane: "chart",
     stack: 0,
@@ -55,6 +59,11 @@ export function compileTree(doc: DslDocument, onNotice?: (n: CompileNotice) => v
     w: W,
     h: H,
     treeData: data,
+    ...(doc.treeNodeForm !== undefined ? { treeNodeForm: doc.treeNodeForm } : {}),
+    ...(doc.treeSize !== undefined ? { treeSize: doc.treeSize } : {}),
+    ...(doc.treeEdgeTone !== undefined ? { treeEdgeTone: doc.treeEdgeTone } : {}),
+    ...(doc.treeEdgeHead !== undefined ? { treeEdgeHead: doc.treeEdgeHead } : {}),
+    ...(doc.figureKindLabel !== undefined ? { figureKindLabel: doc.figureKindLabel } : {}),
   });
   return b.build();
 }

package/src/compile/value-chart.ts

@@ -1,13 +1,25 @@
 import { diagram } from "@cardenelabs/cdl";
 import type { CdlDiagram } from "@cardenelabs/cdl";
 import type { DslDocument } from "../types";
-import { parseChartValue, 数の欄から参照できる名前, 参照する名前 } from "./chart-fields";
+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 値で書く。 違うのは描画側の種別と、 値の意味だけ。
@@ -23,34 +35,108 @@ import { 図の小見出し } from "./subtitle";
  *
  * 矢印は描けない。 書かれていたら警告に出して捨てる (「書いたのに効かない」 を残さない)。
  */
+
+/**
+ * 形から描画側の種別を引く (#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,
-  型: "pie" | "bar" | "line" | "gauge" | "radial" | "stat" | "waffle" | "stacked" | "slope",
-  kind:
-    | "chart-pie"
-    | "chart-bar"
-    | "chart-line"
-    | "chart-gauge"
-    | "chart-radial"
-    | "chart-stat"
-    | "chart-waffle"
-    | "chart-stacked-bar"
-    | "chart-slope",
+  型: DslShape,
   onNotice?: (notice: CompileNotice) => void,
 ): CdlDiagram {
+  const kind = 描画側の種別[型];
   const b = diagram(slugify(doc.title), { topic: doc.title, type: "chart" });
-  const CHART_W = 640;
-  // **高さは型で違い、 格子に載せる**。 描画側 (`cdl` の `chart()` preset) は `pie` を 320、
-  // 棒と折れ線を 360 とした上で **16 の倍数へ切り上げる** (360 は 16 で割り切れないので 368)。
-  // 切り上げないと下端が格子から外れ、 全図で位置の警告が出る (review 指摘)
-  // 半円と弧は縦を使わないので円と同じ 320。 描画側 (`cdl` の `chart()` preset) が
-  // `pie` / `gauge` / `radial` を 320、棒と折れ線を 360 とし、16 の倍数へ切り上げる
-  // 縦に余白が要らない型。 描画側 (`cdl` の `chart()` preset) と揃える。
-  // 半円 / 弧 / 割合の印 は縦を使わず、値 1 つを大きく示す図も縦に伸びない
-  const 低い型 =
-    型 === "pie" || 型 === "gauge" || 型 === "radial" || 型 === "waffle" || 型 === "stat";
-  const CHART_H = 低い型 ? 320 : 368;
-  b.lane("chart", { width: CHART_W + 64 });
 
   const data: NonNullable<CdlDiagram["nodes"][number]["chartData"]> = [];
   const 読めない: string[] = [];
@@ -93,10 +179,12 @@ export function compileValueChart(
       前が読めない.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」 に
@@ -127,6 +215,16 @@ export function compileValueChart(
     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",
@@ -168,6 +266,12 @@ export function compileValueChart(
     );
   }
 
+  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,
@@ -177,6 +281,56 @@ export function compileValueChart(
     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();