@cardenelabs/cdl 0.35.0 → 0.37.0

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

@@ -423,6 +423,32 @@ type CdlNode = {
      * `previous` (cdl#680) が効くのは `ring` だけ。 他の形は内側の輪を描かない。
      */
     chartPieForm?: ChartPieForm;
+    /**
+     * chart-slope の見せ方 (cdl#702 / cdl#707)。
+     *
+     * | 値 | 縦の位置 | 左の列 | 右の列 |
+     * |---|---|---|---|
+     * | `values` | 値 | 前の値 | 今の値 |
+     * | `delta` | 値 | 前の値 | 増減 (`+40` / `-90`) |
+     * | `rank` | 順位の段 (等間隔) | 前の値 | 今の値 |
+     *
+     * `values` と `delta` は縦の位置が同じで、右の列の字だけが違う。
+     * `前 + 増減 = 今` なので、 `delta` でも今の値は足せば戻る。
+     * 3 つ目の数を足さないので、 名札の高さも線を引く幅も変わらない。
+     *
+     * `rank` は **縦の位置** を変える (cdl#707)。 段を等間隔に置くので、線の交差が
+     * 順位の入れ替わりと 1 対 1 になり、水平線が「順位が動かなかった」 を意味する。
+     * 字は値のままにして、量が図から消えないようにしている。
+     *
+     * `rank` では「線の傾きが動いた量」 という読み方が成立しない (`+40` と `+30` が
+     * どちらも水平線になる)。 書いた図だけに効く割り切りで、量は字を読む。
+     *
+     * 型の外の値は `values` として描く = 見せ方が決まらないより、既定の形が出る方がよい。
+     *
+     * 前の時点を持たない図 (`previous` が 1 件も無い) は軸が 1 本で並べ替える相手が
+     * いないため、 この欄を書いても絵は変わらない。
+     */
+    chartSlopeForm?: ChartSlopeForm;
     /**
      * gantt-timeline 専用の task payload。 task 全件を 1 node に格納し、
      * kinds/gantt.tsx が縦軸 task lane + 横軸日付 rect bar で SVG 描画する。
@@ -478,6 +504,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 / cdl#707)。 SSOT は `kinds/chart-slope.tsx` */
+type ChartSlopeForm = "values" | "delta" | "rank";
 type ChartDatumPayload = {
     label: string;
     /** 棒 / 折れ線 / 扇の大きさ。 `{signal}` で状態に追随する */
@@ -2883,4 +2911,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-BYdmSviQ.d.ts}

@@ -423,6 +423,32 @@ type CdlNode = {
      * `previous` (cdl#680) が効くのは `ring` だけ。 他の形は内側の輪を描かない。
      */
     chartPieForm?: ChartPieForm;
+    /**
+     * chart-slope の見せ方 (cdl#702 / cdl#707)。
+     *
+     * | 値 | 縦の位置 | 左の列 | 右の列 |
+     * |---|---|---|---|
+     * | `values` | 値 | 前の値 | 今の値 |
+     * | `delta` | 値 | 前の値 | 増減 (`+40` / `-90`) |
+     * | `rank` | 順位の段 (等間隔) | 前の値 | 今の値 |
+     *
+     * `values` と `delta` は縦の位置が同じで、右の列の字だけが違う。
+     * `前 + 増減 = 今` なので、 `delta` でも今の値は足せば戻る。
+     * 3 つ目の数を足さないので、 名札の高さも線を引く幅も変わらない。
+     *
+     * `rank` は **縦の位置** を変える (cdl#707)。 段を等間隔に置くので、線の交差が
+     * 順位の入れ替わりと 1 対 1 になり、水平線が「順位が動かなかった」 を意味する。
+     * 字は値のままにして、量が図から消えないようにしている。
+     *
+     * `rank` では「線の傾きが動いた量」 という読み方が成立しない (`+40` と `+30` が
+     * どちらも水平線になる)。 書いた図だけに効く割り切りで、量は字を読む。
+     *
+     * 型の外の値は `values` として描く = 見せ方が決まらないより、既定の形が出る方がよい。
+     *
+     * 前の時点を持たない図 (`previous` が 1 件も無い) は軸が 1 本で並べ替える相手が
+     * いないため、 この欄を書いても絵は変わらない。
+     */
+    chartSlopeForm?: ChartSlopeForm;
     /**
      * gantt-timeline 専用の task payload。 task 全件を 1 node に格納し、
      * kinds/gantt.tsx が縦軸 task lane + 横軸日付 rect bar で SVG 描画する。
@@ -478,6 +504,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 / cdl#707)。 SSOT は `kinds/chart-slope.tsx` */
+type ChartSlopeForm = "values" | "delta" | "rank";
 type ChartDatumPayload = {
     label: string;
     /** 棒 / 折れ線 / 扇の大きさ。 `{signal}` で状態に追随する */
@@ -2883,4 +2911,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.35.0",
+  "version": "0.37.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-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";
@@ -50,6 +50,24 @@ import { 進みを畳む, 伸ばすdash } from "./draw-progress";
  *
  * 色を持たせるのは **名前だけ**。 値は太字の濃い色のままにして、数の読み比べを保つ。
  * identity は色が、量は字が担う。
+ *
+ * ## 順位で見せる形は縦の位置を変える (cdl#707)
+ *
+ * この図は「線の交差が順位の入れ替わり」 を読ませるが、縦の位置は値なので **交差点の
+ * 位置が順位と噛み合わない**。 どの交差が本当に順位を変えた交差なのかは、値を読み比べ
+ * ないと決まらない。
+ *
+ * `rank` は段を等間隔に置く。 交差が入れ替わりと 1 対 1 になり、水平線が「順位が
+ * 動かなかった」 を意味する。
+ *
+ * **字は値のままにする**。 字も順位にすると `380 → 420` と `60 → 90` がどちらも
+ * 同じ水平線になり、量が図から完全に消える。 位置が順位を、字が量を担う。
+ *
+ * 順位と値を **両方** 出す案は落とした = 3 つ目の数を足す形で、実物に当てると値の列が
+ * 伸びて名前と重なった (`delta` で落としたのと同じ形、cdl#702)。
+ *
+ * **この形では「線の傾きが動いた量」 が成立しない**。 `+40` と `+30` がどちらも水平線に
+ * なる。 書いた図だけに効く割り切りで、量は字を読む。
  */
 
 /** 線を引くのに最低限要る横幅。 名札が長い図でもこれだけは残す */
@@ -112,8 +130,57 @@ export function ChartSlopeNode({
   const yを取る = (v: number): number =>
     尺の幅 > 0 ? 下端 - ((v - 最小) / 尺の幅) * (下端 - 上端) : (上端 + 下端) / 2;
 
+  /**
+   * 見せ方 (cdl#702 / cdl#707)。 **型の外の値は `values` に落とす** = 見せ方が
+   * 決まらないより、既定の形が出る方がよい (円グラフと同じ判断)。
+   *
+   * **前の時点を持たない図では `values` に落とす**。 `delta` は引く相手がいないので、
+   * 増減を出すと「0 から増えた」 という書いていない主張になる (前を持たない件を 0 から
+   * 立ち上げるのは線を引くための扱いで、前が 0 だったという意味ではない)。
+   * `rank` は軸が 1 本で並べ替える相手がいない。
+   */
+  const 書いた形 = node.chartSlopeForm;
+  const 形: ChartSlopeForm =
+    前あり && (書いた形 === "delta" || 書いた形 === "rank") ? 書いた形 : "values";
+
+  /**
+   * 順位。 **自分より大きい値の件数 + 1** で決める。
+   *
+   * 同じ値なら同じ順位になり、段も重なる。 無理に 1 つずつずらすと、書いていない差を
+   * 絵が主張することになる。
+   */
+  const 順位を取る = (v: number, 全部: number[]): number =>
+    全部.filter((x) => x > v).length + 1;
+
+  const 前の順位 = 系列たち.map((s) => 順位を取る(s.前, 系列たち.map((x) => x.前)));
+  const 今の順位 = 系列たち.map((s) => 順位を取る(s.今, 系列たち.map((x) => x.今)));
+
+  /**
+   * 段の y。 1 位を上端、系列の数を下端にして等間隔に置く。
+   *
+   * **系列が 1 本の図では割り算ができない**ので縦の中央に置く (尺の幅が 0 の時と同じ扱い)。
+   */
+  const 段のyを取る = (順位: number): number =>
+    系列たち.length > 1
+      ? 上端 + ((順位 - 1) / (系列たち.length - 1)) * (下端 - 上端)
+      : (上端 + 下端) / 2;
+
+  /**
+   * 増減の表記。 符号を前に付ける。
+   *
+   * `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, 値の級)));
 
@@ -209,8 +276,9 @@ export function ChartSlopeNode({
       )}
 
       {系列たち.map((s, i) => {
-        const 左y = yを取る(s.前);
-        const 右y = yを取る(s.今);
+        // `rank` は縦の位置を順位の段にする (cdl#707)。 値の尺は使わない
+        const 左y = 形 === "rank" ? 段のyを取る(前の順位[i]!) : yを取る(s.前);
+        const 右y = 形 === "rank" ? 段のyを取る(今の順位[i]!) : yを取る(s.今);
         const 未解決 = s.未解決 ? "true" : undefined;
         return (
           <g key={`slope-${i}`}>
@@ -288,7 +356,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={値の級}

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,32 @@ export type CdlNode = {
    * `previous` (cdl#680) が効くのは `ring` だけ。 他の形は内側の輪を描かない。
    */
   chartPieForm?: ChartPieForm;
+  /**
+   * chart-slope の見せ方 (cdl#702 / cdl#707)。
+   *
+   * | 値 | 縦の位置 | 左の列 | 右の列 |
+   * |---|---|---|---|
+   * | `values` | 値 | 前の値 | 今の値 |
+   * | `delta` | 値 | 前の値 | 増減 (`+40` / `-90`) |
+   * | `rank` | 順位の段 (等間隔) | 前の値 | 今の値 |
+   *
+   * `values` と `delta` は縦の位置が同じで、右の列の字だけが違う。
+   * `前 + 増減 = 今` なので、 `delta` でも今の値は足せば戻る。
+   * 3 つ目の数を足さないので、 名札の高さも線を引く幅も変わらない。
+   *
+   * `rank` は **縦の位置** を変える (cdl#707)。 段を等間隔に置くので、線の交差が
+   * 順位の入れ替わりと 1 対 1 になり、水平線が「順位が動かなかった」 を意味する。
+   * 字は値のままにして、量が図から消えないようにしている。
+   *
+   * `rank` では「線の傾きが動いた量」 という読み方が成立しない (`+40` と `+30` が
+   * どちらも水平線になる)。 書いた図だけに効く割り切りで、量は字を読む。
+   *
+   * 型の外の値は `values` として描く = 見せ方が決まらないより、既定の形が出る方がよい。
+   *
+   * 前の時点を持たない図 (`previous` が 1 件も無い) は軸が 1 本で並べ替える相手が
+   * いないため、 この欄を書いても絵は変わらない。
+   */
+  chartSlopeForm?: ChartSlopeForm;
   /**
    * gantt-timeline 専用の task payload。 task 全件を 1 node に格納し、
    * kinds/gantt.tsx が縦軸 task lane + 横軸日付 rect bar で SVG 描画する。
@@ -541,6 +567,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 / cdl#707)。 SSOT は `kinds/chart-slope.tsx` */
+export type ChartSlopeForm = "values" | "delta" | "rank";
+
 export type ChartDatumPayload = {
   label: string;
   /** 棒 / 折れ線 / 扇の大きさ。 `{signal}` で状態に追随する */