@cardenelabs/cdl 0.34.0 → 0.36.0

package/dist/{render-C2rcAsgk.d.cts → render-R7v2bfyz.d.cts}

@@ -423,6 +423,21 @@ type CdlNode = {
      * `previous` (cdl#680) が効くのは `ring` だけ。 他の形は内側の輪を描かない。
      */
     chartPieForm?: ChartPieForm;
+    /**
+     * chart-slope の見せ方 (cdl#702)。 右の列に何の数を出すかを決める。
+     *
+     * - `values` ... 今の値
+     * - `delta` ... 増減 (`+40` / `-90`)
+     *
+     * 左の列は どちらでも前の値。 `前 + 増減 = 今` なので、 `delta` でも今の値は足せば戻る。
+     * 3 つ目の数を足さないので、 名札の高さも線を引く幅も変わらない。
+     *
+     * 型の外の値は `values` として描く = 見せ方が決まらないより、既定の形が出る方がよい。
+     *
+     * 前の時点を持たない図 (`previous` が 1 件も無い) は右の列そのものが無いため、
+     * この欄を書いても絵は変わらない。
+     */
+    chartSlopeForm?: ChartSlopeForm;
     /**
      * gantt-timeline 専用の task payload。 task 全件を 1 node に格納し、
      * kinds/gantt.tsx が縦軸 task lane + 横軸日付 rect bar で SVG 描画する。
@@ -478,6 +493,8 @@ type BoundEnum<T extends string> = T | (string & {});
 /** Chart 系 kind の 1 datum payload。 label + value + optional tone (color) */
 /** chart-pie の見せ方 (cdl#684)。 SSOT は `kinds/chart-pie.tsx` */
 type ChartPieForm = "ring" | "arcs" | "table";
+/** chart-slope の見せ方 (cdl#702)。 SSOT は `kinds/chart-slope.tsx` */
+type ChartSlopeForm = "values" | "delta";
 type ChartDatumPayload = {
     label: string;
     /** 棒 / 折れ線 / 扇の大きさ。 `{signal}` で状態に追随する */
@@ -2883,4 +2900,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { createScrollProgressSignals as $, EDGE_REVEALS as A, type BBox as B, type CdlDiagram as C, EDGE_REVEAL_DEFAULT as D, type EdgeStyle as E, EDGE_STYLES as F, type EdgeReveal as G, type InteractiveSignalsAccessor as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type LaidLane as K, type LaidDiagram as L, NODE_KINDS as M, type NodeKind as N, type ScrollProgressHandle as O, TONES as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, computeEventBindingKey as U, computeFormulaKey as V, computeInputSignalKey as W, computeScrollTriggerKey as X, computed as Y, createInteractiveSignalsAccessor as Z, createScrollProgressHandle as _, type CdlInput as a, hasInteractivePrimitives as a0, sequenceBoardMetrics as a1, sequenceStepId as a2, signal as a3, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, type ChartPieForm as v, EDGE_HEADS as w, EDGE_HEAD_DEFAULT as x, EDGE_HEAD_FILLS as y, EDGE_HEAD_FILL_DEFAULT as z };
+export { createScrollProgressHandle as $, EDGE_HEAD_FILL_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_REVEALS as D, type EdgeStyle as E, EDGE_REVEAL_DEFAULT as F, EDGE_STYLES as G, type EdgeReveal as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type InteractiveSignalsAccessor as K, type LaidDiagram as L, type LaidLane as M, type NodeKind as N, NODE_KINDS as O, type ScrollProgressHandle as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, TONES as U, computeEventBindingKey as V, computeFormulaKey as W, computeInputSignalKey as X, computeScrollTriggerKey as Y, computed as Z, createInteractiveSignalsAccessor as _, type CdlInput as a, createScrollProgressSignals as a0, hasInteractivePrimitives as a1, sequenceBoardMetrics as a2, sequenceStepId as a3, signal as a4, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, type ChartPieForm as v, type ChartSlopeForm as w, EDGE_HEADS as x, EDGE_HEAD_DEFAULT as y, EDGE_HEAD_FILLS as z };

package/dist/{render-C2rcAsgk.d.ts → render-R7v2bfyz.d.ts}

@@ -423,6 +423,21 @@ type CdlNode = {
      * `previous` (cdl#680) が効くのは `ring` だけ。 他の形は内側の輪を描かない。
      */
     chartPieForm?: ChartPieForm;
+    /**
+     * chart-slope の見せ方 (cdl#702)。 右の列に何の数を出すかを決める。
+     *
+     * - `values` ... 今の値
+     * - `delta` ... 増減 (`+40` / `-90`)
+     *
+     * 左の列は どちらでも前の値。 `前 + 増減 = 今` なので、 `delta` でも今の値は足せば戻る。
+     * 3 つ目の数を足さないので、 名札の高さも線を引く幅も変わらない。
+     *
+     * 型の外の値は `values` として描く = 見せ方が決まらないより、既定の形が出る方がよい。
+     *
+     * 前の時点を持たない図 (`previous` が 1 件も無い) は右の列そのものが無いため、
+     * この欄を書いても絵は変わらない。
+     */
+    chartSlopeForm?: ChartSlopeForm;
     /**
      * gantt-timeline 専用の task payload。 task 全件を 1 node に格納し、
      * kinds/gantt.tsx が縦軸 task lane + 横軸日付 rect bar で SVG 描画する。
@@ -478,6 +493,8 @@ type BoundEnum<T extends string> = T | (string & {});
 /** Chart 系 kind の 1 datum payload。 label + value + optional tone (color) */
 /** chart-pie の見せ方 (cdl#684)。 SSOT は `kinds/chart-pie.tsx` */
 type ChartPieForm = "ring" | "arcs" | "table";
+/** chart-slope の見せ方 (cdl#702)。 SSOT は `kinds/chart-slope.tsx` */
+type ChartSlopeForm = "values" | "delta";
 type ChartDatumPayload = {
     label: string;
     /** 棒 / 折れ線 / 扇の大きさ。 `{signal}` で状態に追随する */
@@ -2883,4 +2900,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { createScrollProgressSignals as $, EDGE_REVEALS as A, type BBox as B, type CdlDiagram as C, EDGE_REVEAL_DEFAULT as D, type EdgeStyle as E, EDGE_STYLES as F, type EdgeReveal as G, type InteractiveSignalsAccessor as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type LaidLane as K, type LaidDiagram as L, NODE_KINDS as M, type NodeKind as N, type ScrollProgressHandle as O, TONES as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, computeEventBindingKey as U, computeFormulaKey as V, computeInputSignalKey as W, computeScrollTriggerKey as X, computed as Y, createInteractiveSignalsAccessor as Z, createScrollProgressHandle as _, type CdlInput as a, hasInteractivePrimitives as a0, sequenceBoardMetrics as a1, sequenceStepId as a2, signal as a3, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, type ChartPieForm as v, EDGE_HEADS as w, EDGE_HEAD_DEFAULT as x, EDGE_HEAD_FILLS as y, EDGE_HEAD_FILL_DEFAULT as z };
+export { createScrollProgressHandle as $, EDGE_HEAD_FILL_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_REVEALS as D, type EdgeStyle as E, EDGE_REVEAL_DEFAULT as F, EDGE_STYLES as G, type EdgeReveal as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, type InteractiveSignalsAccessor as K, type LaidDiagram as L, type LaidLane as M, type NodeKind as N, NODE_KINDS as O, type ScrollProgressHandle as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, TONES as U, computeEventBindingKey as V, computeFormulaKey as W, computeInputSignalKey as X, computeScrollTriggerKey as Y, computed as Z, createInteractiveSignalsAccessor as _, type CdlInput as a, createScrollProgressSignals as a0, hasInteractivePrimitives as a1, sequenceBoardMetrics as a2, sequenceStepId as a3, signal as a4, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type Computed as j, type CdlDerivedValue as k, type CdlScrollTrigger as l, type CdlDiagramViewProps as m, type LaidEdge as n, type LaidNode as o, type CdlEdge as p, CdlDiagramView as q, type CdlEventBinding as r, type CdlEventKind as s, type CdlFormula as t, type CdlPhase as u, type ChartPieForm as v, type ChartSlopeForm as w, EDGE_HEADS as x, EDGE_HEAD_DEFAULT as y, EDGE_HEAD_FILLS as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.34.0",
+  "version": "0.36.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/index.ts

@@ -284,6 +284,7 @@ export type {
   CdlDiagram,
   CdlEdge,
   ChartPieForm,
+  ChartSlopeForm,
   CdlLane,
   CdlNode,
   CdlPhase,

package/src/kinds/chart-gauge.tsx

@@ -3,6 +3,7 @@ import type { LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
+import { 実値表記, 割合表記 } from "./chart-number";
 
 /**
  * chart-gauge kind ... 上半分の弧で内訳を示し、 合計を主役に置く図 (cdl#549)。
@@ -217,23 +218,6 @@ function 切り詰める(s: string, 上限: number, 級: number): string {
   return `${out}…`;
 }
 
-/**
- * 実値の表記。 桁区切りを入れる (`chart-pie` と揃える)。
- *
- * 小数は 1 桁までに丸める。 図に置く数なので、 桁を尽くすより並びが揃う方が読みやすい。
- */
-function 実値表記(v: number): string {
-  return Number.isInteger(v)
-    ? v.toLocaleString("en-US")
-    : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
-}
-
-/** 取り分の表記。 整数のとき小数を出さない (`chart-pie` と揃える) */
-function 割合表記(frac: number): string {
-  const v = Math.round(frac * 1000) / 10;
-  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
-}
-
 /** 弧の色。 明示した色が優先され、 無ければ図表の系列の色を順に配る */
 function arcColor(tone: Tone | undefined, idx: number): string {
   if (tone) return TONE[tone];

package/src/kinds/chart-number.ts

@@ -1,11 +1,11 @@
 /**
- * 図表に置く数の表記 (cdl#688)。
+ * 図表に置く数の表記 (cdl#688 / cdl#689)。
  *
- * **同じ表記を種別ごとに書き写さない**。 いま `実値表記` は 7 つの種別に同じ本体で置かれて
- * おり、片方だけ直せば図によって桁区切りの有無が変わる。 新しい種別はここから取る。
+ * **同じ表記を種別ごとに書き写さない**。 書き写すと片方だけ直した時に、図によって桁区切りの
+ * 有無や小数の桁が変わる。 数を字にする種別はここから取る。
  *
- * 既存の 7 つをここへ寄せるのは #689 で行う = 種別を新設する変更と、既にある種別の
- * 内部を組み替える変更を 1 つの取り込みに混ぜない。
+ * 寄せる前は各種別が私物の写しを持ち、「`chart-pie` と揃える」 というコメントで揃いを人の目に
+ * 委ねていた。 揃っているかは目で確かめるものではなく、1 つしか無いことで保証する。
  */
 
 /**
@@ -18,3 +18,16 @@ export function 実値表記(v: number): string {
     ? v.toLocaleString("en-US")
     : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
 }
+
+/**
+ * 取り分の表記 (cdl#542)。
+ *
+ * **整数のとき小数を出さない**。 `toFixed(1)` 固定だと 3 件とも `45.0%` のように無駄な
+ * `.0` が付き、桁が増えて読みにくい。 小数を持つ時だけ 1 桁出す。
+ *
+ * 丸めた結果が整数になる形 (`0.4499` → `45.0`) も整数として出す = 丸めた後の値で判定する。
+ */
+export function 割合表記(frac: number): string {
+  const v = Math.round(frac * 1000) / 10;
+  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
+}

package/src/kinds/chart-pie.tsx

@@ -4,6 +4,7 @@ import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData, type ResolvedChartDatum } from "../render/payload-binding";
 import { 進みを畳む } from "./draw-progress";
 import { textWidth } from "./text-width";
+import { 実値表記, 割合表記 } from "./chart-number";
 
 /**
  * chart-pie kind ... 1 node に datum 配列 (chartData) を保持し、 SVG path arc で円グラフ描画する。
@@ -702,33 +703,6 @@ function 扇形の切り抜き(cx: number, cy: number, r: number, 開き: number
   return <path d={d} />;
 }
 
-/**
- * 実値の表記 (cdl#548)。
- *
- * **桁区切りを入れる**。 同じ repo の折れ線が各点の値を `1,342` の形で置いており、そちらと
- * 揃える。 4 桁を超えると区切りの有無で読む速さが変わる。
- *
- * 小数は 1 桁までに丸める。 図に置く数なので、桁を尽くすより並びが揃う方が読みやすい。
- */
-function 実値表記(v: number): string {
-  return Number.isInteger(v)
-    ? v.toLocaleString("en-US")
-    : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
-}
-
-/**
- * 取り分の表記 (cdl#542)。
- *
- * **整数のとき小数を出さない**。 `toFixed(1)` 固定だと 3 件とも `45.0%` のように無駄な
- * `.0` が付き、桁が増えて読みにくい。 小数を持つ時だけ 1 桁出す。
- *
- * 丸めた結果が整数になる形 (`0.4499` → `45.0`) も整数として出す = 丸めた後の値で判定する。
- */
-function 割合表記(frac: number): string {
-  const v = Math.round(frac * 1000) / 10;
-  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
-}
-
 /**
  * 扇の色 (cdl#546)。
  *

package/src/kinds/chart-radial.tsx

@@ -3,6 +3,7 @@ import type { LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
+import { 実値表記, 割合表記 } from "./chart-number";
 
 /**
  * chart-radial kind ... 1 件を 1 本の弧にして内側から重ね、 長さで比べる図 (cdl#550)。
@@ -190,19 +191,6 @@ function 弧の道(cx: number, cy: number, 中心半径: number, 幅: number,
   );
 }
 
-/** 実値の表記。 桁区切りを入れる (`chart-pie` と揃える) */
-function 実値表記(v: number): string {
-  return Number.isInteger(v)
-    ? v.toLocaleString("en-US")
-    : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
-}
-
-/** 取り分の表記。 整数のとき小数を出さない (`chart-pie` と揃える) */
-function 割合表記(frac: number): string {
-  const v = Math.round(frac * 1000) / 10;
-  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
-}
-
 /** 弧の色。 明示した色が優先され、 無ければ図表の系列の色を順に配る */
 function arcColor(tone: Tone | undefined, idx: number): string {
   if (tone) return TONE[tone];

package/src/kinds/chart-slope.tsx

@@ -1,5 +1,5 @@
 import { type JSX } from "react";
-import type { LaidNode, Tone } from "../types";
+import type { ChartSlopeForm, LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
@@ -42,6 +42,14 @@ import { 進みを畳む, 伸ばすdash } from "./draw-progress";
  * 値と名前は **別の役割** で出す (`chart-slope-value` / `chart-slope-name`、cdl#693)。
  * 1 つにまとめると使う側が値だけに字体を当てられず、寸法を記録する側も 2 つの大きさを
  * 1 行に潰す。 他の図表 (`chart-stat` / `chart-stacked-bar`) も字を役割で分けている。
+ *
+ * ## 名前は線と同じ色で描く (cdl#698)
+ *
+ * 名前も値も同じ淡い色にすると、名前と線を突き合わせるのに線を目で辿ることになる。
+ * 交差を読ませる図なので、交差した先を追う作業が読み手に残ってしまう。
+ *
+ * 色を持たせるのは **名前だけ**。 値は太字の濃い色のままにして、数の読み比べを保つ。
+ * identity は色が、量は字が担う。
  */
 
 /** 線を引くのに最低限要る横幅。 名札が長い図でもこれだけは残す */
@@ -104,8 +112,32 @@ export function ChartSlopeNode({
   const yを取る = (v: number): number =>
     尺の幅 > 0 ? 下端 - ((v - 最小) / 尺の幅) * (下端 - 上端) : (上端 + 下端) / 2;
 
+  /**
+   * 見せ方 (cdl#702)。 **型の外の値は `values` に落とす** = 見せ方が決まらないより、
+   * 既定の形が出る方がよい (円グラフと同じ判断)。
+   *
+   * **前の時点を持たない図では `values` に落とす**。 引く相手がいないので、増減を出すと
+   * 「0 から増えた」 という書いていない主張になる (前を持たない件を 0 から立ち上げるのは
+   * 線を引くための扱いで、前が 0 だったという意味ではない)。
+   */
+  const 形: ChartSlopeForm = 前あり && node.chartSlopeForm === "delta" ? "delta" : "values";
+
+  /**
+   * 増減の表記。 符号を前に付ける。
+   *
+   * `0` は `+0` にしない = 動いていないことを「増えた」 と読ませない。
+   * 負は `実値表記` が `-` を付けるのでそのまま。
+   */
+  const 増減表記 = (前: number, 今: number): string => {
+    const 差 = 今 - 前;
+    return 差 > 0 ? `+${実値表記(差)}` : 実値表記(差);
+  };
+
   const 左の字 = 系列たち.map((s) => 実値表記(s.前));
-  const 右の字 = 系列たち.map((s) => 実値表記(s.今));
+  // `delta` は今の値の代わりに増減を出す。 3 つ目の数を足さないので列は 2 つのまま
+  const 右の字 = 系列たち.map((s) =>
+    形 === "delta" ? 増減表記(s.前, s.今) : 実値表記(s.今),
+  );
   const 左値幅 = Math.max(0, ...左の字.map((t) => textWidth(t, 値の級)));
   const 右値幅 = Math.max(0, ...右の字.map((t) => textWidth(t, 値の級)));
 
@@ -166,7 +198,9 @@ export function ChartSlopeNode({
           x2={x}
           y2={下端 + 6}
           stroke="var(--cdl-divider, #d4d4d8)"
-          strokeWidth={1}
+          // 太さ 1 の罫では柱に見えず、時点の見出しだけが宙に浮く。
+          // 系列の線 (2.5) より細いまま、柱として立つ太さにする
+          strokeWidth={2}
         />
       ))}
 
@@ -257,7 +291,7 @@ export function ChartSlopeNode({
                   y={左y + 5}
                   textAnchor="end"
                   fontSize={名前の級}
-                  fill="var(--cdl-text-dim, #5a6270)"
+                  fill={s.色}
                 >
                   {s.名前}
                 </text>
@@ -269,7 +303,7 @@ export function ChartSlopeNode({
                 y={右y + 5}
                 textAnchor="end"
                 fontSize={名前の級}
-                fill="var(--cdl-text-dim, #5a6270)"
+                fill={s.色}
               >
                 {s.名前}
               </text>
@@ -278,7 +312,9 @@ export function ChartSlopeNode({
             {右を出す && (
               <>
                 <text
-                  data-cdl-role="chart-slope-value"
+                  // 増減は今の値と意味が違うので役割を分ける (cdl#702)。
+                  // 消費側が増減だけに色を当てたくなる経路がある
+                  data-cdl-role={形 === "delta" ? "chart-slope-delta" : "chart-slope-value"}
                   x={右軸x + 軸から値まで}
                   y={右y + 5}
                   fontSize={値の級}
@@ -293,7 +329,7 @@ export function ChartSlopeNode({
                     x={右軸x + 軸から値まで + 右値幅 + 値から名前まで}
                     y={右y + 5}
                     fontSize={名前の級}
-                    fill="var(--cdl-text-dim, #5a6270)"
+                    fill={s.色}
                   >
                     {s.名前}
                   </text>

package/src/kinds/chart-stacked-bar.tsx

@@ -3,6 +3,7 @@ import type { LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData, type ResolvedChartDatum } from "../render/payload-binding";
 import { textWidth } from "./text-width";
+import { 実値表記, 割合表記 } from "./chart-number";
 
 /**
  * chart-stacked-bar kind ... 1 本の帯を割合で区切り、時点を並べて変化を見せる図 (cdl#551)。
@@ -214,19 +215,6 @@ function 帯を組む(
   };
 }
 
-/** 実値の表記。 桁区切りを入れる (他の図表と揃える) */
-function 実値表記(v: number): string {
-  return Number.isInteger(v)
-    ? v.toLocaleString("en-US")
-    : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
-}
-
-/** 取り分の表記。 整数のとき小数を出さない (他の図表と揃える) */
-function 割合表記(frac: number): string {
-  const v = Math.round(frac * 1000) / 10;
-  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
-}
-
 /** 区画の色。 明示した色が優先され、無ければ図表の系列の色を順に配る */
 function 印の色(tone: Tone | undefined, idx: number): string {
   if (tone) return TONE[tone];

package/src/kinds/chart-stat.tsx

@@ -3,6 +3,7 @@ import type { LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
+import { 実値表記, 割合表記 } from "./chart-number";
 
 /**
  * chart-stat kind ... 数値そのものを主役にする図 (cdl#553)。
@@ -211,19 +212,6 @@ function 弧の道(cx: number, cy: number, r: number, 割合: number): string {
   return `M ${p(a0)} A ${r} ${r} 0 ${large} 1 ${p(a1)}`;
 }
 
-/** 実値の表記。 桁区切りを入れる (`chart-pie` / `chart-radial` と揃える) */
-export function 実値表記(v: number): string {
-  return Number.isInteger(v)
-    ? v.toLocaleString("en-US")
-    : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
-}
-
-/** 取り分の表記。 整数のとき小数を出さない (`chart-pie` / `chart-radial` と揃える) */
-function 割合表記(frac: number): string {
-  const v = Math.round(frac * 1000) / 10;
-  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
-}
-
 /** 印の色。 明示した色が優先され、無ければ図表の系列の色を順に配る */
 function 印の色(tone: Tone | undefined, idx: number): string {
   if (tone) return TONE[tone];

package/src/kinds/chart-waffle.tsx

@@ -3,6 +3,7 @@ import type { LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
 import { textWidth } from "./text-width";
+import { 実値表記 } from "./chart-number";
 
 /**
  * chart-waffle kind ... 100 個の印で割合を **数えて確かめられる** 図 (cdl#552)。
@@ -183,13 +184,6 @@ export function ChartWaffleNode({
   );
 }
 
-/** 実値の表記。 桁区切りを入れる (他の図表と揃える) */
-function 実値表記(v: number): string {
-  return Number.isInteger(v)
-    ? v.toLocaleString("en-US")
-    : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
-}
-
 /** 印の色。 明示した色が優先され、無ければ図表の系列の色を順に配る */
 function 印の色(tone: Tone | undefined, idx: number): string {
   if (tone) return TONE[tone];

package/src/render/template-fields.ts

@@ -58,6 +58,8 @@ type 読まない欄 =
   | "chartTrace"
   // 円グラフの見せ方 (#684)。 決まった値のどれかで、字を差し込む先が無い
   | "chartPieForm"
+  // 傾き図の見せ方 (#702)。 同上
+  | "chartSlopeForm"
   | "ganttData"
   | "ganttAxisMax"
   | "mindData"

package/src/types.ts

@@ -482,6 +482,21 @@ export type CdlNode = {
    * `previous` (cdl#680) が効くのは `ring` だけ。 他の形は内側の輪を描かない。
    */
   chartPieForm?: ChartPieForm;
+  /**
+   * chart-slope の見せ方 (cdl#702)。 右の列に何の数を出すかを決める。
+   *
+   * - `values` ... 今の値
+   * - `delta` ... 増減 (`+40` / `-90`)
+   *
+   * 左の列は どちらでも前の値。 `前 + 増減 = 今` なので、 `delta` でも今の値は足せば戻る。
+   * 3 つ目の数を足さないので、 名札の高さも線を引く幅も変わらない。
+   *
+   * 型の外の値は `values` として描く = 見せ方が決まらないより、既定の形が出る方がよい。
+   *
+   * 前の時点を持たない図 (`previous` が 1 件も無い) は右の列そのものが無いため、
+   * この欄を書いても絵は変わらない。
+   */
+  chartSlopeForm?: ChartSlopeForm;
   /**
    * gantt-timeline 専用の task payload。 task 全件を 1 node に格納し、
    * kinds/gantt.tsx が縦軸 task lane + 横軸日付 rect bar で SVG 描画する。
@@ -541,6 +556,9 @@ export type BoundEnum<T extends string> = T | (string & {});
 /** chart-pie の見せ方 (cdl#684)。 SSOT は `kinds/chart-pie.tsx` */
 export type ChartPieForm = "ring" | "arcs" | "table";
 
+/** chart-slope の見せ方 (cdl#702)。 SSOT は `kinds/chart-slope.tsx` */
+export type ChartSlopeForm = "values" | "delta";
+
 export type ChartDatumPayload = {
   label: string;
   /** 棒 / 折れ線 / 扇の大きさ。 `{signal}` で状態に追随する */