@cardenelabs/dragon 0.23.0 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/dragon",
-  "version": "0.23.0",
+  "version": "0.26.0",
   "description": "Dragon — Mermaid 感覚で animated SVG を生成する Text DSL。 cdl engine を内部利用。",
   "license": "MIT",
   "author": "cardene777",
@@ -57,7 +57,7 @@
     "prepublishOnly": "pnpm run typecheck && pnpm run test && pnpm run build"
   },
   "dependencies": {
-    "@cardenelabs/cdl": "^0.30.3"
+    "@cardenelabs/cdl": "^0.34.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/compile.ts

@@ -273,6 +273,9 @@ export function compileToCdl(doc: DslDocument, opts?: CompileToCdlOpts): CdlDiag
     case "stacked":
       diagram = compileValueChart(doc, "stacked", "chart-stacked-bar", opts?.onNotice);
       break;
+    case "slope":
+      diagram = compileValueChart(doc, "slope", "chart-slope", opts?.onNotice);
+      break;
     case "funnel":
       diagram = compileFunnel(doc, opts?.onNotice);
       break;
@@ -808,6 +811,7 @@ const 図種の作り: Record<PresetType, "登場人物ごとに箱" | "図全
   stat: "図全体を 1 箱",
   waffle: "図全体を 1 箱",
   stacked: "図全体を 1 箱",
+  slope: "図全体を 1 箱",
   funnel: "図全体を 1 箱",
   tree: "図全体を 1 箱",
   journey: "図全体を 1 箱",
@@ -1198,6 +1202,7 @@ const 空の形の逃げ先: Record<PresetType, string[]> = {
   stat: [],
   waffle: [],
   stacked: [],
+  slope: [],
   funnel: [],
   tree: [],
   journey: [],
@@ -4083,6 +4088,8 @@ const SINGLE_BOX_KINDS: ReadonlySet<string> = new Set([
   "quadrant-matrix",
   "tree-hierarchy",
   "journey-map",
+  // 2 時点を直線でつなぐ図も 1 箱で全体を描く (#1647)
+  "chart-slope",
 ]);
 
 
@@ -4553,7 +4560,7 @@ function 参照する名前(value: number | string | null): string | null {
  */
 function compileValueChart(
   doc: DslDocument,
-  型: "pie" | "bar" | "line" | "gauge" | "radial" | "stat" | "waffle" | "stacked",
+  型: "pie" | "bar" | "line" | "gauge" | "radial" | "stat" | "waffle" | "stacked" | "slope",
   kind:
     | "chart-pie"
     | "chart-bar"
@@ -4562,7 +4569,8 @@ function compileValueChart(
     | "chart-radial"
     | "chart-stat"
     | "chart-waffle"
-    | "chart-stacked-bar",
+    | "chart-stacked-bar"
+    | "chart-slope",
   onNotice?: (notice: CompileNotice) => void,
 ): CdlDiagram {
   const b = diagram(slugify(doc.title), { topic: doc.title, type: "chart" });
@@ -4592,10 +4600,13 @@ function compileValueChart(
     // 値の置き場所は記法で 2 通りある。 略記 (`- TypeScript: "45%"`) は説明文に、
     // 縦書きの map (`- SliceA: { kind: card, value: "30%" }`) は値に入る。 両方を読む
     const value = parseChartValue(a.value ?? a.subtitle);
-    // **負を受けるのは折れ線だけ**。 増減を追う図なので気温や損益のように 0 を跨ぐ値が来る。
-    // 円は取り分、 棒は高さで、 どちらも負に意味が無い (review 指摘)。
+    // **負を受けるのは折れ線と傾き図だけ**。 どちらも増減を追う図なので、気温や損益のように
+    // 0 を跨ぐ値が来る。 円は取り分、 棒は高さで、 どちらも負に意味が無い (review 指摘)。
     // 状態を読む欄 (`{名前}`) は書いた時点で符号が決まらないため、この検査を通す
-    if (value === null || (typeof value === "number" && value < 0 && 型 !== "line")) {
+    if (
+      value === null ||
+      (typeof value === "number" && value < 0 && 型 !== "line" && 型 !== "slope")
+    ) {
       // `pos` を持たない経路がある (JSON 経路で組み立てた actor)。 無ければ 0 のまま
       if (読めない.length === 0) 読めない行 = a.pos?.line ?? 0;
       読めない.push(a.name);
@@ -4638,6 +4649,7 @@ function compileValueChart(
     stat: { 量: "値", 図: "大きな数字", 例: '"1200"' },
     waffle: { 量: "割合", 図: "100 個の印", 例: '"45%"' },
     stacked: { 量: "内訳の値", 図: "帯", 例: '"320"' },
+    slope: { 量: "値", 図: "傾き図", 例: '"320"' },
   };
   const 語 = 語の表[型];
 

package/src/schemas/diagram.json

@@ -37,6 +37,7 @@
         "stat",
         "waffle",
         "stacked",
+        "slope",
         "funnel",
         "tree",
         "journey",
@@ -44,11 +45,11 @@
         "c4",
         "mind"
       ],
-      "description": "図の種類。 型ごとに actors の書き方が違う。 [関係を描く] sequence (時系列の呼び出し) / flow (処理の流れ) / swimlane (責務ごとの流れ) / er (DB の schema) / state (状態の遷移) / topology (network) / solidity (contract) / class (UML の class) / c4 (architecture) / mind (発想の枝分かれ) は actors に名前を並べ flow に矢印を書く。 [値を描く] pie (割合) / bar (棒の高さ) / line (線の高さ、 書いた順に並ぶ) / gauge (合計を半円で示す) / radial (弧の長さで比べる) / stat (値 1 つを大きく示す) / waffle (割合を 100 個の印で示す) / stacked (内訳を帯で示す) は actors に `- 名前: \"45\"` の形で数を書く。 stat と stacked は `- 名前: { value: \"320\", previous: \"280\" }` の形で前の時点の値も書ける。 funnel (段ごとに減る数) も同じ形。 [語を描く] journey (体験の起伏) は `- 登録: \"不満\"` の形で 最高 / 満足 / 普通 / 不満 / 怒り のどれかを書く。 quadrant (2 軸の仕分け) は `- 重複削除: \"左上\"` の形で 左上 / 右上 / 左下 / 右下 のどれかを書く。 [時期を描く] gantt (工程の並び) は `- 設計: \"1月\"` の形で始まりの時期を書き、 flow の矢印で前後関係を書く。 [親子を描く] tree (親子の入れ子) は actors に名前を並べ flow の矢印で親子を書く (矢印の先が子)"
+      "description": "図の種類。 型ごとに actors の書き方が違う。 [関係を描く] sequence (時系列の呼び出し) / flow (処理の流れ) / swimlane (責務ごとの流れ) / er (DB の schema) / state (状態の遷移) / topology (network) / solidity (contract) / class (UML の class) / c4 (architecture) / mind (発想の枝分かれ) は actors に名前を並べ flow に矢印を書く。 [値を描く] pie (割合) / bar (棒の高さ) / line (線の高さ、 書いた順に並ぶ) / gauge (合計を半円で示す) / radial (弧の長さで比べる) / stat (値 1 つを大きく示す) / waffle (割合を 100 個の印で示す) / stacked (内訳を帯で示す) / slope (2 時点を直線でつなぎ増減と順位の入れ替わりを示す) は actors に `- 名前: \"45\"` の形で数を書く。 stat と stacked と slope は `- 名前: { value: \"320\", previous: \"280\" }` の形で前の時点の値も書ける。 funnel (段ごとに減る数) も同じ形。 [語を描く] journey (体験の起伏) は `- 登録: \"不満\"` の形で 最高 / 満足 / 普通 / 不満 / 怒り のどれかを書く。 quadrant (2 軸の仕分け) は `- 重複削除: \"左上\"` の形で 左上 / 右上 / 左下 / 右下 のどれかを書く。 [時期を描く] gantt (工程の並び) は `- 設計: \"1月\"` の形で始まりの時期を書き、 flow の矢印で前後関係を書く。 [親子を描く] tree (親子の入れ子) は actors に名前を並べ flow の矢印で親子を書く (矢印の先が子)"
     },
     "eyebrow": {
       "type": "string",
-      "description": "図表の箱の上に出す小見出し (省略可)。 効くのは図全体を 1 箱にする型 (pie / bar / line / gauge / radial / stat / waffle / stacked / funnel / tree / journey / quadrant / mind / gantt) だけ。 箱ごとに分かれる型では相手が決まらないため、 actors[].eyebrow に書く"
+      "description": "図表の箱の上に出す小見出し (省略可)。 効くのは図全体を 1 箱にする型 (pie / bar / line / gauge / radial / stat / waffle / stacked / slope / funnel / tree / journey / quadrant / mind / gantt) だけ。 箱ごとに分かれる型では相手が決まらないため、 actors[].eyebrow に書く"
     },
     "axes": {
       "type": "object",
@@ -121,7 +122,7 @@
               },
               "previous": {
                 "type": "string",
-                "description": "前の時点の値。 type: stacked が 2 本目の帯として描き、type: stat が差として出す。 書かない図は 1 本のまま"
+                "description": "前の時点の値。 type: stacked が 2 本目の帯として描き、type: slope が左の点として描き、type: stat が差として出す。 書かない図は 1 本のまま"
               },
               "rows": {
                 "type": "array",
@@ -778,9 +779,10 @@
               "mind",
               "tree",
               "gantt",
-              "funnel"
+              "funnel",
+              "slope"
             ],
-            "description": "この phase で起点から描くもの。 語は図種と揃える。 line / journey = 線が左端から右へ伸びる / bar = 棒が横軸から上へ伸びる / pie = 扇が 12 時から時計回りに開く / mind = 枝が中心から外へ伸びる / tree = 枝が根から下へ伸びる / gantt = 帯が各始端から右へ伸びる / funnel = 段が上端から順に積まれる"
+            "description": "この phase で起点から描くもの。 語は図種と揃える。 line / journey = 線が左端から右へ伸びる / bar = 棒が横軸から上へ伸びる / pie = 扇が 12 時から時計回りに開く / mind = 枝が中心から外へ伸びる / tree = 枝が根から下へ伸びる / gantt = 帯が各始端から右へ伸びる / funnel = 段が上端から順に積まれる / slope = 線が左の軸から右の軸へ伸びる"
           },
           "drawRatio": {
             "type": "number",

package/src/types.ts

@@ -77,6 +77,7 @@ export type PresetType =
   | "stat"
   | "waffle"
   | "stacked"
+  | "slope"
   | "funnel"
   | "tree"
   | "journey"

package/src/v05/parser.ts

@@ -321,6 +321,7 @@ export const PRESET_TYPES: ReadonlySet<PresetType> = new Set([
   "stat",
   "waffle",
   "stacked",
+  "slope",
   "funnel",
   "tree",
   "journey",
@@ -3970,6 +3971,7 @@ export const DRAW_TARGETS: ReadonlyMap<string, PresetType> = new Map<string, Pre
   ["tree", "tree"],
   ["gantt", "gantt"],
   ["funnel", "funnel"],
+  ["slope", "slope"],
 ]);
 
 /** `draw:` に書ける語。 表から導く (#1314) */