@cardenelabs/cdl 0.40.9 → 0.40.11

package/dist/react.cjs

@@ -12462,18 +12462,35 @@ function ChartGaugeNode({
   const \u5185\u534A\u5F84 = radius * 0.62;
   const cx = node.w / 2;
   const cy = PAD_TOP2 + radius;
+  const \u524D\u3042\u308A = \u51FA\u3059\u4EF6\u305F\u3061.some((d) => d.previous !== void 0);
+  const \u524D\u306E\u5024 = \u51FA\u3059\u4EF6\u305F\u3061.map((d) => Math.max(0, d.previous ?? 0));
+  const \u524D\u306E\u5408\u8A08 = \u524D\u306E\u5024.reduce((acc, v) => acc + v, 0);
+  const \u5E2F = radius - \u5185\u534A\u5F84;
+  const \u4ECA\u306E\u5185\u534A\u5F84 = \u524D\u3042\u308A ? \u5185\u534A\u5F84 + \u5E2F * 0.42 : \u5185\u534A\u5F84;
+  const \u524D\u306E\u5185\u534A\u5F84 = \u5185\u534A\u5F84;
+  const \u524D\u306E\u5916\u534A\u5F84 = \u5185\u534A\u5F84 + \u5E2F * 0.32;
+  const \u6247\u306E\u9053 = (a0, a1, \u5185, \u5916) => {
+    const \u59161 = \u6975(cx, cy, \u5916, a0);
+    const \u59162 = \u6975(cx, cy, \u5916, a1);
+    const \u51852 = \u6975(cx, cy, \u5185, a1);
+    const \u51851 = \u6975(cx, cy, \u5185, a0);
+    return `M ${\u59161.x} ${\u59161.y} A ${\u5916} ${\u5916} 0 0 1 ${\u59162.x} ${\u59162.y} L ${\u51852.x} ${\u51852.y} A ${\u5185} ${\u5185} 0 0 0 ${\u51851.x} ${\u51851.y} Z`;
+  };
   let cumFrac = 0;
   const slices = \u51FA\u3059\u4EF6\u305F\u3061.map((d) => {
     const frac = d.value / total;
     const a0 = Math.PI + cumFrac * Math.PI;
     const a1 = a0 + frac * Math.PI;
     cumFrac += frac;
-    const \u59161 = \u6975(cx, cy, radius, a0);
-    const \u59162 = \u6975(cx, cy, radius, a1);
-    const \u51852 = \u6975(cx, cy, \u5185\u534A\u5F84, a1);
-    const \u51851 = \u6975(cx, cy, \u5185\u534A\u5F84, a0);
-    const path = `M ${\u59161.x} ${\u59161.y} A ${radius} ${radius} 0 0 1 ${\u59162.x} ${\u59162.y} L ${\u51852.x} ${\u51852.y} A ${\u5185\u534A\u5F84} ${\u5185\u534A\u5F84} 0 0 0 ${\u51851.x} ${\u51851.y} Z`;
-    return { d, frac, path };
+    return { d, frac, path: \u6247\u306E\u9053(a0, a1, \u4ECA\u306E\u5185\u534A\u5F84, radius) };
+  });
+  let \u524D\u306Ecum = 0;
+  const \u524D\u306E\u6247\u305F\u3061 = \u51FA\u3059\u4EF6\u305F\u3061.map((d, idx) => {
+    const frac = \u524D\u306E\u5408\u8A08 > 0 ? (\u524D\u306E\u5024[idx] ?? 0) / \u524D\u306E\u5408\u8A08 : 0;
+    const a0 = Math.PI + \u524D\u306Ecum * Math.PI;
+    const a1 = a0 + frac * Math.PI;
+    \u524D\u306Ecum += frac;
+    return { d, frac, path: \u6247\u306E\u9053(a0, a1, \u524D\u306E\u5185\u534A\u5F84, \u524D\u306E\u5916\u534A\u5F84) };
   });
   const \u5408\u8A08\u306E\u6587\u5B57 = \u5B9F\u5024\u8868\u8A18(Math.round(total));
   const \u5358\u4F4D\u5E45 = Math.max(textWidth(\u5408\u8A08\u306E\u6587\u5B57, 100), 1) / 100;
@@ -12502,6 +12519,20 @@ function ChartGaugeNode({
     },
     `arc-${idx}`
   ));
+  const \u524D\u306E\u5F27\u305F\u3061 = \u524D\u3042\u308A ? \u524D\u306E\u6247\u305F\u3061.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      "data-cdl-role": "chart-gauge-previous",
+      "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
+      d: s.path,
+      fill: arcColor(s.d.tone, idx),
+      fillOpacity: 0.45,
+      stroke: "var(--cdl-node-fill, #ffffff)",
+      strokeWidth: 1.5,
+      strokeLinejoin: "round"
+    },
+    `prev-arc-${idx}`
+  )) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -12518,7 +12549,13 @@ function ChartGaugeNode({
       }
     ),
     drawing && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, radius + 2, \u4F38\u3073, Math.PI, Math.PI) }) }),
-    drawing ? /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u5F27\u305F\u3061 }) : \u5F27\u305F\u3061,
+    drawing ? /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: [
+      \u524D\u306E\u5F27\u305F\u3061,
+      \u5F27\u305F\u3061
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      \u524D\u306E\u5F27\u305F\u3061,
+      \u5F27\u305F\u3061
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
@@ -12627,9 +12664,11 @@ function ChartRadialNode({
   const rings = data.map((d, idx) => {
     const frac = d.value / total;
     const \u4E2D\u5FC3\u534A\u5F84 = \u5916\u534A\u5F84 - \u5E2F1\u672C * idx - \u5E2F1\u672C / 2;
+    const \u524D\u306E\u5272\u5408 = d.previous === void 0 ? null : Math.max(0, d.previous) / total;
     return {
       d,
       frac,
+      \u524D\u306E\u5272\u5408,
       \u4E2D\u5FC3\u534A\u5F84,
       // 軌道は全周。 1 周ちょうどは弧で表せないので、 わずかに欠かして描く
       \u8ECC\u9053: \u5F27\u306E\u90532(\u5F27\u306Ecx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, 0.9999),
@@ -12678,6 +12717,20 @@ function ChartRadialNode({
     )),
     drawing && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(\u5F27\u306Ecx, cy, \u5916\u534A\u5F84 + \u5E2F\u306E\u5E45, \u958B\u304D) }) }),
     drawing ? /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u53D6\u308A\u5206\u305F\u3061 }) : \u53D6\u308A\u5206\u305F\u3061,
+    rings.map(
+      (r, idx) => r.\u524D\u306E\u5272\u5408 === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          "data-cdl-role": "chart-radial-previous",
+          "data-cdl-unresolved": r.d.unresolved ? "true" : void 0,
+          ...\u5E2F\u3092\u6A2A\u5207\u308B\u5370(\u5F27\u306Ecx, cy, r.\u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, Math.min(r.\u524D\u306E\u5272\u5408, 0.9999)),
+          stroke: "var(--cdl-text-mute, #8a8678)",
+          strokeWidth: 2,
+          strokeLinecap: "round"
+        },
+        `prev-${idx}`
+      )
+    ),
     data.map((d, idx) => {
       const y = \u4E00\u89A7\u306E\u59CB\u307E\u308A + \u884C\u306E\u9AD8\u3055 * idx;
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-radial-item", children: [
@@ -12717,6 +12770,18 @@ function \u5F27\u306E\u90532(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5
   const p = (r, a) => `${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`;
   return `M ${p(\u5916, a0)} A ${\u5916} ${\u5916} 0 ${large} 1 ${p(\u5916, a1)} L ${p(\u5185, a1)} A ${\u5185} ${\u5185} 0 ${large} 0 ${p(\u5185, a0)} Z`;
 }
+function \u5E2F\u3092\u6A2A\u5207\u308B\u5370(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5408) {
+  const \u306F\u307F\u51FA\u3057 = Math.min(\u5E45 * 0.3, 5);
+  const \u5916 = \u4E2D\u5FC3\u534A\u5F84 + \u5E45 / 2 + \u306F\u307F\u51FA\u3057;
+  const \u5185 = Math.max(0.5, \u4E2D\u5FC3\u534A\u5F84 - \u5E45 / 2 - \u306F\u307F\u51FA\u3057);
+  const a = -Math.PI / 2 + \u5272\u5408 * Math.PI * 2;
+  return {
+    x1: cx + \u5185 * Math.cos(a),
+    y1: cy + \u5185 * Math.sin(a),
+    x2: cx + \u5916 * Math.cos(a),
+    y2: cy + \u5916 * Math.sin(a)
+  };
+}
 function arcColor2(tone, idx) {
   if (tone) return TONE[tone];
   return chartSeriesColor(idx);
@@ -12730,7 +12795,8 @@ function ChartStatNode({
   const y0 = node.cy - node.h / 2;
   const data = resolveChartData(node.chartData ?? [], stateValues);
   const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
-  const \u533A\u753B = \u533A\u753B\u306E\u5272\u4ED8(node.w, node.h, data.length);
+  const \u524D\u3092\u51FA\u3059 = data.some((d) => d.previous !== void 0);
+  const \u533A\u753B = \u533A\u753B\u306E\u5272\u4ED8(node.w, node.h, data.length, \u524D\u3092\u51FA\u3059);
   const \u5272\u5408\u3092\u51FA\u3059 = data.length > 1;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -12798,6 +12864,24 @@ function ChartStatNode({
                 children: \u6570\u5024
               }
             ),
+            d.previous !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                "data-cdl-role": "chart-stat-previous",
+                "data-cdl-unresolved": d.unresolved ? "true" : void 0,
+                x: \u67A02.w / 2,
+                y: \u533A\u753B.\u524D\u306Ey,
+                fontSize: \u53CE\u3081\u308B\u7D1A(
+                  `\u524D ${\u5B9F\u5024\u8868\u8A18(d.previous)}`,
+                  \u67A02.w - \u533A\u753B.\u4F59\u767D * 2,
+                  \u533A\u753B.\u524D\u306E\u7D1A,
+                  8
+                ),
+                textAnchor: "middle",
+                fill: "var(--cdl-text-dim, #5a6270)",
+                children: `\u524D ${\u5B9F\u5024\u8868\u8A18(d.previous)}`
+              }
+            ),
             \u5272\u5408\u3092\u51FA\u3059 && /* @__PURE__ */ jsxRuntime.jsx(
               "circle",
               {
@@ -12841,29 +12925,34 @@ function ChartStatNode({
     })
   ] });
 }
-function \u533A\u753B\u306E\u5272\u4ED8(w, h, \u4EF6\u6570) {
+function \u533A\u753B\u306E\u5272\u4ED8(w, h, \u4EF6\u6570, \u524D\u3092\u51FA\u3059) {
   const \u4F59\u767D = 20;
   const \u5E45 = \u4EF6\u6570 > 0 ? w / \u4EF6\u6570 : w;
   const \u540D\u524D\u306E\u7D1A = 14;
   const \u6570\u5024\u306E\u7D1A = 40;
+  const \u524D\u306E\u7D1A = \u540D\u524D\u306E\u7D1A;
   const \u5272\u5408\u306E\u7D1A = 12;
   const \u5F27\u306E\u534A\u5F84 = 20;
   const \u5F27\u306E\u592A\u3055 = 4;
-  const \u4E2D\u8EAB\u306E\u9AD8\u3055 = \u540D\u524D\u306E\u7D1A + 12 + \u6570\u5024\u306E\u7D1A + 16 + \u5F27\u306E\u534A\u5F84 * 2 + 8 + \u5272\u5408\u306E\u7D1A;
+  const \u524D\u306E\u9AD8\u3055 = \u524D\u3092\u51FA\u3059 ? 8 + \u524D\u306E\u7D1A : 0;
+  const \u4E2D\u8EAB\u306E\u9AD8\u3055 = \u540D\u524D\u306E\u7D1A + 12 + \u6570\u5024\u306E\u7D1A + \u524D\u306E\u9AD8\u3055 + 16 + \u5F27\u306E\u534A\u5F84 * 2 + 8 + \u5272\u5408\u306E\u7D1A;
   const \u4E0A\u7AEF = Math.max(\u4F59\u767D, (h - \u4E2D\u8EAB\u306E\u9AD8\u3055) / 2);
   const \u540D\u524D\u306Ey = \u4E0A\u7AEF + \u540D\u524D\u306E\u7D1A;
   const \u6570\u5024\u306Ey = \u540D\u524D\u306Ey + 12 + \u6570\u5024\u306E\u7D1A * 0.78;
-  const \u5F27\u306Ey = \u6570\u5024\u306Ey + 16 + \u5F27\u306E\u534A\u5F84;
+  const \u524D\u306Ey = \u6570\u5024\u306Ey + 8 + \u524D\u306E\u7D1A;
+  const \u5F27\u306Ey = \u6570\u5024\u306Ey + \u524D\u306E\u9AD8\u3055 + 16 + \u5F27\u306E\u534A\u5F84;
   const \u5272\u5408\u306Ey = \u5F27\u306Ey + \u5F27\u306E\u534A\u5F84 + 8 + \u5272\u5408\u306E\u7D1A;
   return {
     \u4F59\u767D,
     \u540D\u524D\u306E\u7D1A,
     \u6570\u5024\u306E\u7D1A,
+    \u524D\u306E\u7D1A,
     \u5272\u5408\u306E\u7D1A,
     \u5F27\u306E\u534A\u5F84,
     \u5F27\u306E\u592A\u3055,
     \u540D\u524D\u306Ey,
     \u6570\u5024\u306Ey,
+    \u524D\u306Ey,
     \u5F27\u306Ey,
     \u5272\u5408\u306Ey,
     \u67A0: (idx) => ({ x: \u5E45 * idx, y: 0, w: \u5E45, h })
@@ -13443,8 +13532,9 @@ function ChartBarNode({
   const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
   const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
   const vMax = data.length > 0 ? Math.max(...data.map((d) => d.value)) : 1;
+  const \u8EF8\u306E\u3082\u3068 = data.length > 0 ? Math.max(vMax, ...data.map((d) => d.previous ?? 0)) : vMax;
   const \u76EE\u76DB\u308A\u306E\u76EE\u5B892 = 4;
-  const \u5929\u4E95\u306E\u3082\u3068 = vMax > 0 ? vMax : 1;
+  const \u5929\u4E95\u306E\u3082\u3068 = \u8EF8\u306E\u3082\u3068 > 0 ? \u8EF8\u306E\u3082\u3068 : 1;
   const \u523B\u307F = \u76EE\u76DB\u308A\u306E\u523B\u307F(\u5929\u4E95\u306E\u3082\u3068, \u76EE\u76DB\u308A\u306E\u76EE\u5B892);
   const \u523B\u307F\u306E\u6841 = \u5C0F\u6570\u306E\u6841(\u523B\u307F);
   const \u5929\u4E95 = \u6841\u3067\u4E38\u3081\u308B(Math.ceil(\u5929\u4E95\u306E\u3082\u3068 / \u523B\u307F - 1e-9) * \u523B\u307F, \u523B\u307F\u306E\u6841);
@@ -13537,8 +13627,24 @@ function ChartBarNode({
           fillOpacity: \u6FC3\u3055(d.value)
         }
       );
+      const \u5370\u306E\u306F\u307F\u51FA\u3057 = Math.min(barW * 0.18, 8);
+      const \u524D\u306E\u5370 = d.previous === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          "data-cdl-role": "chart-bar-previous",
+          "data-cdl-unresolved": d.unresolved ? "true" : void 0,
+          x1: bx - \u5370\u306E\u306F\u307F\u51FA\u3057,
+          y1: yAt(Math.max(0, d.previous)),
+          x2: bx + barW + \u5370\u306E\u306F\u307F\u51FA\u3057,
+          y2: yAt(Math.max(0, d.previous)),
+          stroke: "var(--cdl-text-mute, #8a8678)",
+          strokeWidth: 1.5,
+          strokeDasharray: "5 3"
+        }
+      );
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
         drawing ? /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(0 ${\u6A2A\u8EF8\u306Ey}) scale(1 ${\u4F38\u3073}) translate(0 ${-\u6A2A\u8EF8\u306Ey})`, children: \u68D2 }) : \u68D2,
+        \u524D\u306E\u5370,
         /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {