@cardenelabs/cdl 0.35.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.35.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-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";
@@ -112,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, 値の級)));
 
@@ -288,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={値の級}

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}` で状態に追随する */