@cardenelabs/cdl 0.38.0 → 0.39.0

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

@@ -2347,11 +2347,15 @@ type CdlPhase = {
      * | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
      * | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
      * | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+     * | `chart-slope` | 左の軸 | 線が右の軸へ伸びる | 右の値は線が右の軸に着いた時 |
      * | `journey-map` | 左端 | 気持ちの線が右へ伸びる | 段はその点に線の先が届いた時 |
      * | `mind-map` | 中心 | 枝が段ごとに外へ伸びる | 箱はその枝が届いた時 |
      * | `tree-hierarchy` | 根 | 枝が段ごとに下へ伸びる | 箱はその枝が届いた時 |
      * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる | 依存の矢印は帯が出揃った時 |
      * | `funnel-stages` | 上端 | 段が上から順に積まれる | 件数と離脱率はその段が出切った時 |
+     * | `chart-gauge` | 9 時 | 弧が上を通って 3 時へ伸びる | 合計と内訳は最初から出る |
+     * | `chart-radial` | 12 時 | 各輪が時計回りに開く | 軌道と一覧は最初から出る |
+     * | `chart-stacked-bar` | 左端 | 帯が右へ伸びる | 区画の字はその区画が広がった時 |
      *
      * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
      *

package/dist/{render-BYdmSviQ.d.ts → render-B1ArenZ7.d.ts}

@@ -2347,11 +2347,15 @@ type CdlPhase = {
      * | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
      * | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
      * | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+     * | `chart-slope` | 左の軸 | 線が右の軸へ伸びる | 右の値は線が右の軸に着いた時 |
      * | `journey-map` | 左端 | 気持ちの線が右へ伸びる | 段はその点に線の先が届いた時 |
      * | `mind-map` | 中心 | 枝が段ごとに外へ伸びる | 箱はその枝が届いた時 |
      * | `tree-hierarchy` | 根 | 枝が段ごとに下へ伸びる | 箱はその枝が届いた時 |
      * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる | 依存の矢印は帯が出揃った時 |
      * | `funnel-stages` | 上端 | 段が上から順に積まれる | 件数と離脱率はその段が出切った時 |
+     * | `chart-gauge` | 9 時 | 弧が上を通って 3 時へ伸びる | 合計と内訳は最初から出る |
+     * | `chart-radial` | 12 時 | 各輪が時計回りに開く | 軌道と一覧は最初から出る |
+     * | `chart-stacked-bar` | 左端 | 帯が右へ伸びる | 区画の字はその区画が広がった時 |
      *
      * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.38.0",
+  "version": "0.39.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/kinds/chart-gauge.tsx

@@ -1,9 +1,11 @@
-import { type JSX } from "react";
+import { useId, type JSX } from "react";
 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";
+import { 進みを畳む } from "./draw-progress";
+import { 扇形の切り抜き } from "./draw-arc";
 
 /**
  * chart-gauge kind ... 上半分の弧で内訳を示し、 合計を主役に置く図 (cdl#549)。
@@ -27,15 +29,28 @@ import { 実値表記, 割合表記 } from "./chart-number";
  *
  * 内訳には実値と割合の両方を置く。 合計が主役の図で内訳が割合しか持たないと、 「合計の何割」
  * は分かっても「いくつ」 が分からず、 合計との関係を読み手が暗算することになる。
+ *
+ * ## 段の `draw` では 9 時から弧が伸びる (cdl#715)
+ *
+ * 伸びる向きは弧の向きそのもので、 図の意味から一意に決まる。
+ *
+ * **切り抜くのは弧だけ**。 合計の字と内訳の段は最初から出す = 合計はこの種別の主役なので、
+ * 左から半分ずつ現れると読めない。 内訳は弧の外にある別の一覧で、 弧の開きに従う理由がない。
  */
 export function ChartGaugeNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#715) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -112,6 +127,24 @@ export function ChartGaugeNode({
   const 内訳の幅 = 使える幅 / Math.max(data.length, 1);
   const 内訳のy = cy + 弧と内訳の間;
 
+  /** 弧がどこまで伸びたか (0..1、 cdl#715)。 畳み方は `draw-progress.ts` が持つ */
+  const 伸び = 進みを畳む(drawing, progress);
+  // SVG の id は document 全体の名前空間。 node id は図の中でだけ一意なので instance id で分ける
+  const 切り抜きid = `cdl-gauge-draw-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const 弧たち = slices.map((s, idx) => (
+    <path
+      key={`arc-${idx}`}
+      data-cdl-role="chart-gauge-arc"
+      data-cdl-unresolved={s.d.unresolved ? "true" : undefined}
+      d={s.path}
+      fill={arcColor(s.d.tone, idx)}
+      // 区切りは地の色の余白で取る。 線だと弧が分断されて 1 つの量に見えない
+      stroke="var(--cdl-node-fill, #ffffff)"
+      strokeWidth={3}
+      strokeLinejoin="round"
+    />
+  ));
+
   return (
     <g transform={`translate(${x0} ${y0})`}>
       <rect
@@ -126,19 +159,21 @@ export function ChartGaugeNode({
         strokeWidth={active ? 3 : 1.25}
       />
 
-      {slices.map((s, idx) => (
-        <path
-          key={`arc-${idx}`}
-          data-cdl-role="chart-gauge-arc"
-          data-cdl-unresolved={s.d.unresolved ? "true" : undefined}
-          d={s.path}
-          fill={arcColor(s.d.tone, idx)}
-          // 区切りは地の色の余白で取る。 線だと弧が分断されて 1 つの量に見えない
-          stroke="var(--cdl-node-fill, #ffffff)"
-          strokeWidth={3}
-          strokeLinejoin="round"
-        />
-      ))}
+      {drawing && (
+        <defs>
+          {/*
+            9 時から上を通って 3 時へ開く切り抜き (cdl#715)。 半径は弧の外側に少し足す =
+            弧の縁が切り抜きの縁と重なると、 開き切った時に外周が痩せて見える。
+
+            **弧の `d` は触らない** = 形から量を測る利用側が、 進みの途中で別の値を読まない。
+          */}
+          <clipPath id={切り抜きid}>
+            {扇形の切り抜き(cx, cy, radius + 2, 伸び, Math.PI, Math.PI)}
+          </clipPath>
+        </defs>
+      )}
+      {/* 描く指定が無い図には包みを足さず、 従来の DOM 構造を保つ */}
+      {drawing ? <g clipPath={`url(#${切り抜きid})`}>{弧たち}</g> : 弧たち}
 
       {/*
         合計。 この種別の主役なので図の中でいちばん大きい字にするが、 **弧の内側に収める**。

package/src/kinds/chart-pie.tsx

@@ -3,6 +3,7 @@ import type { ChartPieForm, LaidNode, Tone } from "../types";
 import { TONE, chartSeriesColor } from "../render/tone";
 import { resolveChartData, type ResolvedChartDatum } from "../render/payload-binding";
 import { 進みを畳む } from "./draw-progress";
+import { 扇形の切り抜き } from "./draw-arc";
 import { textWidth } from "./text-width";
 import { 実値表記, 割合表記 } from "./chart-number";
 
@@ -687,22 +688,6 @@ function 輪の道(cx: number, cy: number, R: number, r: number, a0: number, a1:
   );
 }
 
-/**
- * 12 時から時計回りに開く扇形 (cdl#516)。 円を切り抜く形に使う。
- *
- * 1 周ちょうどは扇形で表せない (始点と終点が同じ点になり、 弧の向きが決まらない)。
- * その時だけ円をそのまま返す = 進み 1 で図が消える形を避ける。
- */
-function 扇形の切り抜き(cx: number, cy: number, r: number, 開き: number): JSX.Element | null {
-  if (開き <= 0) return null;
-  if (開き >= 1) return <circle cx={cx} cy={cy} r={r} />;
-  const a0 = -Math.PI / 2;
-  const a1 = a0 + 開き * Math.PI * 2;
-  const large = 開き > 0.5 ? 1 : 0;
-  const d = `M ${cx} ${cy} L ${cx + r * Math.cos(a0)} ${cy + r * Math.sin(a0)} A ${r} ${r} 0 ${large} 1 ${cx + r * Math.cos(a1)} ${cy + r * Math.sin(a1)} Z`;
-  return <path d={d} />;
-}
-
 /**
  * 扇の色 (cdl#546)。
  *

package/src/kinds/chart-radial.tsx

@@ -1,9 +1,11 @@
-import { type JSX } from "react";
+import { useId, type JSX } from "react";
 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";
+import { 進みを畳む } from "./draw-progress";
+import { 扇形の切り抜き } from "./draw-arc";
 
 /**
  * chart-radial kind ... 1 件を 1 本の弧にして内側から重ね、 長さで比べる図 (cdl#550)。
@@ -27,15 +29,29 @@ import { 実値表記, 割合表記 } from "./chart-number";
  *
  * 弧のそばに置くと、 内側の弧ほど場所が狭くなって字が入らない。 左端に縦へ並べると件数が
  * 増えても一覧性が落ちず、 弧の並び順と行の並び順が対応する。
+ *
+ * ## 段の `draw` では 12 時から各輪が開く (cdl#715)
+ *
+ * 弧の向きそのままで、 全部の輪が同時に開く。 外から順に開く案は採らない = 内側の輪だけ
+ * 軌道が空のまま残る時間が長くなり、 「まだ描いていない」 と「本当に 0」 が見分けられない。
+ *
+ * **切り抜くのは取り分の弧だけ**。 軌道と一覧は最初から出す = 軌道は「あとどれだけで一周か」
+ * を示す枠なので、 一緒に伸ばすと比べる相手が無いまま弧だけが伸びる。
  */
 export function ChartRadialNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#715) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -99,6 +115,22 @@ export function ChartRadialNode({
 
   const 一覧の始まり = PAD + (使える高さ - 行の高さ * data.length) / 2 + 行の高さ / 2;
 
+  /** 弧がどこまで開いたか (0..1、 cdl#715)。 畳み方は `draw-progress.ts` が持つ */
+  const 開き = 進みを畳む(drawing, progress);
+  // SVG の id は document 全体の名前空間。 node id は図の中でだけ一意なので instance id で分ける
+  const 切り抜きid = `cdl-radial-draw-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  const 取り分たち = rings.map((r, idx) =>
+    r.取り分 === null ? null : (
+      <path
+        key={`arc-${idx}`}
+        data-cdl-role="chart-radial-arc"
+        data-cdl-unresolved={r.d.unresolved ? "true" : undefined}
+        d={r.取り分}
+        fill={arcColor(r.d.tone, idx)}
+      />
+    ),
+  );
+
   return (
     <g transform={`translate(${x0} ${y0})`}>
       <rect
@@ -127,17 +159,19 @@ export function ChartRadialNode({
         />
       ))}
 
-      {rings.map((r, idx) =>
-        r.取り分 === null ? null : (
-          <path
-            key={`arc-${idx}`}
-            data-cdl-role="chart-radial-arc"
-            data-cdl-unresolved={r.d.unresolved ? "true" : undefined}
-            d={r.取り分}
-            fill={arcColor(r.d.tone, idx)}
-          />
-        ),
+      {drawing && (
+        <defs>
+          {/*
+            12 時から時計回りに開く切り抜き (cdl#715)。 半径はいちばん外の帯の外側まで取る =
+            全部の輪が同じ 1 つの切り抜きで開く。
+
+            **弧の `d` は触らない** = 形から量を測る利用側が、 進みの途中で別の値を読まない。
+          */}
+          <clipPath id={切り抜きid}>{扇形の切り抜き(弧のcx, cy, 外半径 + 帯の幅, 開き)}</clipPath>
+        </defs>
       )}
+      {/* 描く指定が無い図には包みを足さず、 従来の DOM 構造を保つ */}
+      {drawing ? <g clipPath={`url(#${切り抜きid})`}>{取り分たち}</g> : 取り分たち}
 
       {/* 一覧。 行の並びが弧の並び (外から内へ) と対応する */}
       {data.map((d, idx) => {

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

@@ -1,9 +1,10 @@
-import { type JSX } from "react";
+import { useId, type JSX } from "react";
 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";
+import { 進みを畳む } from "./draw-progress";
 
 /**
  * chart-stacked-bar kind ... 1 本の帯を割合で区切り、時点を並べて変化を見せる図 (cdl#551)。
@@ -27,6 +28,15 @@ import { 実値表記, 割合表記 } from "./chart-number";
  *
  * 細い区画に字を詰めると隣の区画へはみ出して、どちらの値か読めなくなる。
  * 入らない区画は字を描かず、名前は下の一覧が受け持つ。
+ *
+ * ## 段の `draw` では左から帯が伸びる (cdl#715)
+ *
+ * 帯は左から右へ割合で区切る図なので、伸びる向きは並びそのもの。 棒グラフと起点を揃えている。
+ * 帯が 2 本ある図では 2 本とも同時に伸びる = 上下で同じ位置を見比べる図なので、
+ * 片方だけ先に出ると比べる相手がいない時間ができる。
+ *
+ * **区画の字は区画と一緒に切り抜く**。 字は区画の上に乗っているので、切り抜かないと
+ * まだ出ていない区画の割合だけが宙に浮く。 時点の名前と下の一覧は最初から出す。
  */
 
 /** 区画に割合を描くために要る幅。 これ未満の区画は字を描かない */
@@ -39,10 +49,16 @@ export function ChartStackedBarNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#715) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -67,6 +83,11 @@ export function ChartStackedBarNode({
   const 全体の高さ = 帯たち.length * 帯の高さ + (帯たち.length - 1) * 帯の間 + 16 + 一覧の高さ;
   const 上端 = Math.max(PAD, (node.h - 全体の高さ) / 2);
 
+  /** 帯がどこまで伸びたか (0..1、 cdl#715)。 畳み方は `draw-progress.ts` が持つ */
+  const 伸び = 進みを畳む(drawing, progress);
+  // SVG の id は document 全体の名前空間。 node id は図の中でだけ一意なので instance id で分ける
+  const 切り抜きid = `cdl-stacked-bar-draw-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+
   return (
     <g transform={`translate(${x0} ${y0})`}>
       <rect
@@ -81,6 +102,23 @@ export function ChartStackedBarNode({
         strokeWidth={active ? 3 : 1.25}
       />
 
+      {drawing && (
+        <defs>
+          {/*
+            左から右へ広がる切り抜き (cdl#715)。 帯が 2 本ある図でも 1 つで足りる =
+            2 本とも同じ左端から同じ幅で伸びる。
+
+            **右へ余白を足さない** = 伸びる向きそのものなので、足すと進み 0 で区画の左端が
+            見えてしまう。 切り抜きは境界を含むため、伸び切った時に区画の右端は欠けない。
+
+            **区画の `width` は触らない** = 形から量を測る利用側が、進みの途中で別の値を読まない。
+          */}
+          <clipPath id={切り抜きid}>
+            <rect x={0} y={0} width={帯の左 + 帯の幅 * 伸び} height={node.h} />
+          </clipPath>
+        </defs>
+      )}
+
       {帯たち.map((帯, 段) => {
         const y = 上端 + 段 * (帯の高さ + 帯の間);
         let 左 = 帯の左;
@@ -100,55 +138,59 @@ export function ChartStackedBarNode({
               </text>
             )}
 
-            {帯.区画.map((s, idx) => {
-              const w = 帯の幅 * s.割合;
-              const x = 左;
-              左 += w;
-              const 色 = 印の色(s.tone, idx);
-              return (
-                <g key={`slice-${idx}`}>
-                  <rect
-                    data-cdl-role="chart-stacked-bar-slice"
-                    data-cdl-unresolved={s.unresolved ? "true" : undefined}
-                    x={x}
-                    y={y}
-                    width={Math.max(0, w)}
-                    height={帯の高さ}
-                    fill={色}
-                  />
-                  {/*
+            {(() => {
+              const 区画たち = 帯.区画.map((s, idx) => {
+                const w = 帯の幅 * s.割合;
+                const x = 左;
+                左 += w;
+                const 色 = 印の色(s.tone, idx);
+                return (
+                  <g key={`slice-${idx}`}>
+                    <rect
+                      data-cdl-role="chart-stacked-bar-slice"
+                      data-cdl-unresolved={s.unresolved ? "true" : undefined}
+                      x={x}
+                      y={y}
+                      width={Math.max(0, w)}
+                      height={帯の高さ}
+                      fill={色}
+                    />
+                    {/*
                     区画の字。 **入る時だけ描く** = 細い区画に詰めると隣へはみ出して
                     どちらの値か読めなくなる。 名前は下の一覧が受け持つ
                   */}
-                  {w >= SLICE_MIN_W_FOR_TEXT && (
-                    <text
-                      data-cdl-role="chart-stacked-bar-slice-text"
-                      x={x + w / 2}
-                      y={y + 帯の高さ / 2 + (w >= SLICE_MIN_W_FOR_VALUE ? -2 : 4)}
-                      fontSize={区画の級}
-                      fontWeight={700}
-                      textAnchor="middle"
-                      fill="#ffffff"
-                    >
-                      {割合表記(s.割合)}
-                    </text>
-                  )}
-                  {w >= SLICE_MIN_W_FOR_VALUE && (
-                    <text
-                      data-cdl-role="chart-stacked-bar-slice-value"
-                      x={x + w / 2}
-                      y={y + 帯の高さ / 2 + 13}
-                      fontSize={区画の級 - 1}
-                      textAnchor="middle"
-                      fill="#ffffff"
-                      fillOpacity={0.85}
-                    >
-                      {実値表記(s.実値)}
-                    </text>
-                  )}
-                </g>
-              );
-            })}
+                    {w >= SLICE_MIN_W_FOR_TEXT && (
+                      <text
+                        data-cdl-role="chart-stacked-bar-slice-text"
+                        x={x + w / 2}
+                        y={y + 帯の高さ / 2 + (w >= SLICE_MIN_W_FOR_VALUE ? -2 : 4)}
+                        fontSize={区画の級}
+                        fontWeight={700}
+                        textAnchor="middle"
+                        fill="#ffffff"
+                      >
+                        {割合表記(s.割合)}
+                      </text>
+                    )}
+                    {w >= SLICE_MIN_W_FOR_VALUE && (
+                      <text
+                        data-cdl-role="chart-stacked-bar-slice-value"
+                        x={x + w / 2}
+                        y={y + 帯の高さ / 2 + 13}
+                        fontSize={区画の級 - 1}
+                        textAnchor="middle"
+                        fill="#ffffff"
+                        fillOpacity={0.85}
+                      >
+                        {実値表記(s.実値)}
+                      </text>
+                    )}
+                  </g>
+                );
+              });
+              // 描く指定が無い図には包みを足さず、 従来の DOM 構造を保つ
+              return drawing ? <g clipPath={`url(#${切り抜きid})`}>{区画たち}</g> : 区画たち;
+            })()}
           </g>
         );
       })}
@@ -156,16 +198,16 @@ export function ChartStackedBarNode({
       {/* 一覧。 区画に字が入らなかった件もここで名前と色が引ける */}
       {一覧の並び(data, 帯の左, node.w - PAD, 名前の級).map(({ d, idx, x, 行 }) => {
         const y =
-          上端 + 帯たち.length * (帯の高さ + 帯の間) - 帯の間 + 16 + 一覧の高さ / 2 + 行 * 一覧の高さ;
+          上端 +
+          帯たち.length * (帯の高さ + 帯の間) -
+          帯の間 +
+          16 +
+          一覧の高さ / 2 +
+          行 * 一覧の高さ;
         return (
           <g key={`legend-${idx}`} data-cdl-role="chart-stacked-bar-legend">
             <rect x={x} y={y - 5} width={10} height={10} rx={2} fill={印の色(d.tone, idx)} />
-            <text
-              x={x + 16}
-              y={y + 4}
-              fontSize={名前の級}
-              fill="var(--cdl-text, #1a1f2a)"
-            >
+            <text x={x + 16} y={y + 4} fontSize={名前の級} fill="var(--cdl-text, #1a1f2a)">
               {d.label}
             </text>
           </g>

package/src/kinds/draw-arc.tsx

@@ -0,0 +1,42 @@
+import { type JSX } from "react";
+
+/**
+ * 弧で量を表す図を、起点から開いて見せるための切り抜き (cdl#516 / cdl#715)。
+ *
+ * 円グラフが持っていた私物の関数を、起点と回る量を引数に取る形へ広げた。 半円ゲージ (9 時から
+ * 半周) と放射 (12 時から 1 周) と円グラフ (12 時から 1 周) が同じ計算を使う。
+ *
+ * **形 (`d`) は触らず、切り抜きで隠す**。 弧の道を切り詰めると、形から量を測る利用側が進みの
+ * 途中で別の値を読む (`draw-progress.ts` が `path` について決めたのと同じ)。
+ *
+ * ここに置くのは切り抜きの形だけで、進みの畳み方は `draw-progress.ts` の `進みを畳む` が持つ。
+ * 2 つを 1 つの file に混ぜないのは、こちらが JSX を返すため = `.ts` のままにしておくと
+ * 進みの計算まで `.tsx` へ引きずられる。
+ */
+
+/**
+ * `起点` から時計回りに `開き` ぶん開く扇形。 開いていなければ **何も返さない**。
+ *
+ * @param 開き 0..1。 1 で `全周` ぶん開き切る
+ * @param 起点 弧が始まる角度 (`-Math.PI / 2` = 12 時、`Math.PI` = 9 時)
+ * @param 全周 開き切った時に回る量 (`Math.PI * 2` = 1 周、`Math.PI` = 半周)
+ */
+export function 扇形の切り抜き(
+  cx: number,
+  cy: number,
+  r: number,
+  開き: number,
+  起点: number = -Math.PI / 2,
+  全周: number = Math.PI * 2,
+): JSX.Element | null {
+  if (開き <= 0) return null;
+  // 1 周ちょうどは扇形で表せない (始点と終点が同じ点になり、弧の向きが決まらない)。
+  // その時だけ円をそのまま返す = 進み 1 で図が消える形を避ける。
+  // **半周までの図はこの形にならない** = 両端が別の点なので、扇形のまま描ける。
+  if (開き >= 1 && 全周 >= Math.PI * 2) return <circle cx={cx} cy={cy} r={r} />;
+  const a0 = 起点;
+  const a1 = a0 + Math.min(1, 開き) * 全周;
+  const large = a1 - a0 > Math.PI ? 1 : 0;
+  const d = `M ${cx} ${cy} L ${cx + r * Math.cos(a0)} ${cy + r * Math.sin(a0)} A ${r} ${r} 0 ${large} 1 ${cx + r * Math.cos(a1)} ${cy + r * Math.sin(a1)} Z`;
+  return <path d={d} />;
+}

package/src/render/nodes.tsx

@@ -194,11 +194,28 @@ export function CdlNodeView({
           />
         );
       case "chart-gauge":
-        // 段の進みで弧が開く動きは持たない (cdl#549 で対象外にした)
-        return <ChartGaugeNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        // 段の進みでは 9 時から 3 時へ弧が伸びる (cdl#715)
+        return (
+          <ChartGaugeNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "chart-stacked-bar":
-        // 帯を割合で区切る。 前の時点を書けば 2 本になる (cdl#551)
-        return <ChartStackedBarNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        // 帯を割合で区切る。 前の時点を書けば 2 本になる (cdl#551)。
+        // 段の進みでは左から帯が伸びる (cdl#715)
+        return (
+          <ChartStackedBarNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "chart-slope":
         // 2 時点を直線でつなぐ。 前の時点を書かない図は軸 1 本の点の並びになる (cdl#688)
         return (
@@ -217,8 +234,16 @@ export function CdlNodeView({
         // 数値が主役で、弧は輪郭だけの補助。 段の進みで数値が動く演出は既存の tween が担う
         return <ChartStatNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "chart-radial":
-        // 段の進みで弧が伸びる動きは持たない (cdl#550 で対象外にした)
-        return <ChartRadialNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        // 段の進みでは各輪が 12 時から開く (cdl#715)
+        return (
+          <ChartRadialNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "chart-bar":
         return (
           <ChartBarNode

package/src/types.ts

@@ -2424,11 +2424,15 @@ export type CdlPhase = {
    * | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
    * | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
    * | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+   * | `chart-slope` | 左の軸 | 線が右の軸へ伸びる | 右の値は線が右の軸に着いた時 |
    * | `journey-map` | 左端 | 気持ちの線が右へ伸びる | 段はその点に線の先が届いた時 |
    * | `mind-map` | 中心 | 枝が段ごとに外へ伸びる | 箱はその枝が届いた時 |
    * | `tree-hierarchy` | 根 | 枝が段ごとに下へ伸びる | 箱はその枝が届いた時 |
    * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる | 依存の矢印は帯が出揃った時 |
    * | `funnel-stages` | 上端 | 段が上から順に積まれる | 件数と離脱率はその段が出切った時 |
+   * | `chart-gauge` | 9 時 | 弧が上を通って 3 時へ伸びる | 合計と内訳は最初から出る |
+   * | `chart-radial` | 12 時 | 各輪が時計回りに開く | 軌道と一覧は最初から出る |
+   * | `chart-stacked-bar` | 左端 | 帯が右へ伸びる | 区画の字はその区画が広がった時 |
    *
    * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
    *

package/src/validate.ts

@@ -23,6 +23,9 @@ const TONES = new Set<string>(TONE_NAMES);
  * | `tree-hierarchy` | 根 | 枝が上の段から下の段へ伸びる |
  * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる |
  * | `funnel-stages` | 上端 | 段が上から順に積まれる |
+ * | `chart-gauge` | 9 時 | 弧が上を通って 3 時へ伸びる |
+ * | `chart-radial` | 12 時 | 各輪が時計回りに開く |
+ * | `chart-stacked-bar` | 左端 | 帯が右へ伸びる |
  */
 export const DRAW_KINDS: ReadonlySet<string> = new Set([
   "chart-line",
@@ -34,6 +37,9 @@ export const DRAW_KINDS: ReadonlySet<string> = new Set([
   "tree-hierarchy",
   "gantt-timeline",
   "funnel-stages",
+  "chart-gauge",
+  "chart-radial",
+  "chart-stacked-bar",
 ]);
 const KINDS = new Set<string>(NODE_KINDS);
 const ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;