@cardenelabs/cdl 0.38.0 → 0.40.0

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 (
@@ -211,14 +228,30 @@ export function CdlNodeView({
           />
         );
       case "chart-waffle":
-        // 1 個 = 1% の印を 100 個。 段の進みで印が埋まる動きは別 Issue (cdl#552 で対象外)
-        return <ChartWaffleNode node={resolvedNode} active={active} stateValues={stateValues} />;
+        // 1 個 = 1% の印を 100 個。 段の進みでは読む向きに 1 個ずつ埋まる (cdl#719)
+        return (
+          <ChartWaffleNode
+            node={resolvedNode}
+            active={active}
+            stateValues={stateValues}
+            drawing={drawing}
+            progress={progress}
+          />
+        );
       case "chart-stat":
         // 数値が主役で、弧は輪郭だけの補助。 段の進みで数値が動く演出は既存の 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,16 @@ 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` | 左端 | 帯が右へ伸びる | 区画の字はその区画が広がった時 |
+   * | `chart-waffle` | 左上 | 印が読む向きに 1 個ずつ埋まる | 一覧は最初から出る |
    *
    * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
    *

package/src/validate.ts

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