@cardenelabs/cdl 0.40.8 → 0.40.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +48 -1
  2. package/dist/index.cjs +114 -81
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.js +114 -81
  5. package/dist/index.js.map +1 -1
  6. package/dist/react.cjs +114 -81
  7. package/dist/react.cjs.map +1 -1
  8. package/dist/react.js +114 -81
  9. package/dist/react.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/kinds/chart-stat.tsx +98 -29
package/dist/react.cjs CHANGED
@@ -12730,7 +12730,9 @@ function ChartStatNode({
12730
12730
  const y0 = node.cy - node.h / 2;
12731
12731
  const data = resolveChartData(node.chartData ?? [], stateValues);
12732
12732
  const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
12733
- const \u533A\u753B = \u533A\u753B\u306E\u5272\u4ED8(node.w, node.h, data.length);
12733
+ const \u524D\u3092\u51FA\u3059 = data.some((d) => d.previous !== void 0);
12734
+ const \u533A\u753B = \u533A\u753B\u306E\u5272\u4ED8(node.w, node.h, data.length, \u524D\u3092\u51FA\u3059);
12735
+ const \u5272\u5408\u3092\u51FA\u3059 = data.length > 1;
12734
12736
  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
12735
12737
  /* @__PURE__ */ jsxRuntime.jsx(
12736
12738
  "rect",
@@ -12752,109 +12754,140 @@ function ChartStatNode({
12752
12754
  const \u8272 = \u5370\u306E\u8272(d.tone, idx);
12753
12755
  const \u6570\u5024 = \u5B9F\u5024\u8868\u8A18(d.value);
12754
12756
  const \u6570\u5024\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A(\u6570\u5024, \u67A02.w - \u533A\u753B.\u4F59\u767D * 2, \u533A\u753B.\u6570\u5024\u306E\u7D1A, \u533A\u753B.\u540D\u524D\u306E\u7D1A + 1);
12755
- return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-stat-item", transform: `translate(${\u67A02.x} ${\u67A02.y})`, children: [
12756
- idx > 0 && /* @__PURE__ */ jsxRuntime.jsx(
12757
- "line",
12758
- {
12759
- "data-cdl-role": "chart-stat-divider",
12760
- x1: 0,
12761
- y1: \u533A\u753B.\u4F59\u767D,
12762
- x2: 0,
12763
- y2: \u67A02.h - \u533A\u753B.\u4F59\u767D,
12764
- stroke: "var(--cdl-divider, #d4d4d8)",
12765
- strokeWidth: 1
12766
- }
12767
- ),
12768
- /* @__PURE__ */ jsxRuntime.jsx(
12769
- "text",
12770
- {
12771
- "data-cdl-role": "chart-stat-label",
12772
- x: \u67A02.w / 2,
12773
- y: \u533A\u753B.\u540D\u524D\u306Ey,
12774
- fontSize: \u533A\u753B.\u540D\u524D\u306E\u7D1A,
12775
- fontWeight: 700,
12776
- textAnchor: "middle",
12777
- fill: "var(--cdl-text-dim, #5a6270)",
12778
- children: d.label
12779
- }
12780
- ),
12781
- /* @__PURE__ */ jsxRuntime.jsx(
12782
- "text",
12783
- {
12784
- "data-cdl-role": "chart-stat-value",
12785
- "data-cdl-unresolved": d.unresolved ? "true" : void 0,
12786
- x: \u67A02.w / 2,
12787
- y: \u533A\u753B.\u6570\u5024\u306Ey,
12788
- fontSize: \u6570\u5024\u306E\u7D1A,
12789
- fontWeight: 700,
12790
- textAnchor: "middle",
12791
- fill: \u8272,
12792
- children: \u6570\u5024
12793
- }
12794
- ),
12795
- /* @__PURE__ */ jsxRuntime.jsx(
12796
- "circle",
12797
- {
12798
- "data-cdl-role": "chart-stat-track",
12799
- cx: \u67A02.w / 2,
12800
- cy: \u533A\u753B.\u5F27\u306Ey,
12801
- r: \u533A\u753B.\u5F27\u306E\u534A\u5F84,
12802
- fill: "none",
12803
- stroke: "var(--cdl-divider, #d4d4d8)",
12804
- strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
12805
- strokeOpacity: 0.5
12806
- }
12807
- ),
12808
- frac > 0 && /* @__PURE__ */ jsxRuntime.jsx(
12809
- "path",
12810
- {
12811
- "data-cdl-role": "chart-stat-arc",
12812
- d: \u5F27\u306E\u90533(\u67A02.w / 2, \u533A\u753B.\u5F27\u306Ey, \u533A\u753B.\u5F27\u306E\u534A\u5F84, Math.min(frac, 0.9999)),
12813
- fill: "none",
12814
- stroke: \u8272,
12815
- strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
12816
- strokeLinecap: "round"
12817
- }
12818
- ),
12819
- /* @__PURE__ */ jsxRuntime.jsx(
12820
- "text",
12821
- {
12822
- "data-cdl-role": "chart-stat-share",
12823
- x: \u67A02.w / 2,
12824
- y: \u533A\u753B.\u5272\u5408\u306Ey,
12825
- fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
12826
- textAnchor: "middle",
12827
- fill: "var(--cdl-text-dim, #5a6270)",
12828
- children: \u5272\u5408\u8868\u8A18(frac)
12829
- }
12830
- )
12831
- ] }, `stat-${idx}`);
12757
+ return /* @__PURE__ */ jsxRuntime.jsxs(
12758
+ "g",
12759
+ {
12760
+ "data-cdl-role": "chart-stat-item",
12761
+ transform: `translate(${\u67A02.x} ${\u67A02.y})`,
12762
+ children: [
12763
+ idx > 0 && /* @__PURE__ */ jsxRuntime.jsx(
12764
+ "line",
12765
+ {
12766
+ "data-cdl-role": "chart-stat-divider",
12767
+ x1: 0,
12768
+ y1: \u533A\u753B.\u4F59\u767D,
12769
+ x2: 0,
12770
+ y2: \u67A02.h - \u533A\u753B.\u4F59\u767D,
12771
+ stroke: "var(--cdl-divider, #d4d4d8)",
12772
+ strokeWidth: 1
12773
+ }
12774
+ ),
12775
+ /* @__PURE__ */ jsxRuntime.jsx(
12776
+ "text",
12777
+ {
12778
+ "data-cdl-role": "chart-stat-label",
12779
+ x: \u67A02.w / 2,
12780
+ y: \u533A\u753B.\u540D\u524D\u306Ey,
12781
+ fontSize: \u533A\u753B.\u540D\u524D\u306E\u7D1A,
12782
+ fontWeight: 700,
12783
+ textAnchor: "middle",
12784
+ fill: "var(--cdl-text-dim, #5a6270)",
12785
+ children: d.label
12786
+ }
12787
+ ),
12788
+ /* @__PURE__ */ jsxRuntime.jsx(
12789
+ "text",
12790
+ {
12791
+ "data-cdl-role": "chart-stat-value",
12792
+ "data-cdl-unresolved": d.unresolved ? "true" : void 0,
12793
+ x: \u67A02.w / 2,
12794
+ y: \u533A\u753B.\u6570\u5024\u306Ey,
12795
+ fontSize: \u6570\u5024\u306E\u7D1A,
12796
+ fontWeight: 700,
12797
+ textAnchor: "middle",
12798
+ fill: \u8272,
12799
+ children: \u6570\u5024
12800
+ }
12801
+ ),
12802
+ d.previous !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
12803
+ "text",
12804
+ {
12805
+ "data-cdl-role": "chart-stat-previous",
12806
+ "data-cdl-unresolved": d.unresolved ? "true" : void 0,
12807
+ x: \u67A02.w / 2,
12808
+ y: \u533A\u753B.\u524D\u306Ey,
12809
+ fontSize: \u53CE\u3081\u308B\u7D1A(
12810
+ `\u524D ${\u5B9F\u5024\u8868\u8A18(d.previous)}`,
12811
+ \u67A02.w - \u533A\u753B.\u4F59\u767D * 2,
12812
+ \u533A\u753B.\u524D\u306E\u7D1A,
12813
+ 8
12814
+ ),
12815
+ textAnchor: "middle",
12816
+ fill: "var(--cdl-text-dim, #5a6270)",
12817
+ children: `\u524D ${\u5B9F\u5024\u8868\u8A18(d.previous)}`
12818
+ }
12819
+ ),
12820
+ \u5272\u5408\u3092\u51FA\u3059 && /* @__PURE__ */ jsxRuntime.jsx(
12821
+ "circle",
12822
+ {
12823
+ "data-cdl-role": "chart-stat-track",
12824
+ cx: \u67A02.w / 2,
12825
+ cy: \u533A\u753B.\u5F27\u306Ey,
12826
+ r: \u533A\u753B.\u5F27\u306E\u534A\u5F84,
12827
+ fill: "none",
12828
+ stroke: "var(--cdl-divider, #d4d4d8)",
12829
+ strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
12830
+ strokeOpacity: 0.5
12831
+ }
12832
+ ),
12833
+ \u5272\u5408\u3092\u51FA\u3059 && frac > 0 && /* @__PURE__ */ jsxRuntime.jsx(
12834
+ "path",
12835
+ {
12836
+ "data-cdl-role": "chart-stat-arc",
12837
+ d: \u5F27\u306E\u90533(\u67A02.w / 2, \u533A\u753B.\u5F27\u306Ey, \u533A\u753B.\u5F27\u306E\u534A\u5F84, Math.min(frac, 0.9999)),
12838
+ fill: "none",
12839
+ stroke: \u8272,
12840
+ strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
12841
+ strokeLinecap: "round"
12842
+ }
12843
+ ),
12844
+ \u5272\u5408\u3092\u51FA\u3059 && /* @__PURE__ */ jsxRuntime.jsx(
12845
+ "text",
12846
+ {
12847
+ "data-cdl-role": "chart-stat-share",
12848
+ x: \u67A02.w / 2,
12849
+ y: \u533A\u753B.\u5272\u5408\u306Ey,
12850
+ fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
12851
+ textAnchor: "middle",
12852
+ fill: "var(--cdl-text-dim, #5a6270)",
12853
+ children: \u5272\u5408\u8868\u8A18(frac)
12854
+ }
12855
+ )
12856
+ ]
12857
+ },
12858
+ `stat-${idx}`
12859
+ );
12832
12860
  })
12833
12861
  ] });
12834
12862
  }
12835
- function \u533A\u753B\u306E\u5272\u4ED8(w, h, \u4EF6\u6570) {
12863
+ function \u533A\u753B\u306E\u5272\u4ED8(w, h, \u4EF6\u6570, \u524D\u3092\u51FA\u3059) {
12836
12864
  const \u4F59\u767D = 20;
12837
12865
  const \u5E45 = \u4EF6\u6570 > 0 ? w / \u4EF6\u6570 : w;
12838
12866
  const \u540D\u524D\u306E\u7D1A = 14;
12839
12867
  const \u6570\u5024\u306E\u7D1A = 40;
12868
+ const \u524D\u306E\u7D1A = \u540D\u524D\u306E\u7D1A;
12840
12869
  const \u5272\u5408\u306E\u7D1A = 12;
12841
12870
  const \u5F27\u306E\u534A\u5F84 = 20;
12842
12871
  const \u5F27\u306E\u592A\u3055 = 4;
12843
- 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;
12872
+ const \u524D\u306E\u9AD8\u3055 = \u524D\u3092\u51FA\u3059 ? 8 + \u524D\u306E\u7D1A : 0;
12873
+ 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;
12844
12874
  const \u4E0A\u7AEF = Math.max(\u4F59\u767D, (h - \u4E2D\u8EAB\u306E\u9AD8\u3055) / 2);
12845
12875
  const \u540D\u524D\u306Ey = \u4E0A\u7AEF + \u540D\u524D\u306E\u7D1A;
12846
12876
  const \u6570\u5024\u306Ey = \u540D\u524D\u306Ey + 12 + \u6570\u5024\u306E\u7D1A * 0.78;
12847
- const \u5F27\u306Ey = \u6570\u5024\u306Ey + 16 + \u5F27\u306E\u534A\u5F84;
12877
+ const \u524D\u306Ey = \u6570\u5024\u306Ey + 8 + \u524D\u306E\u7D1A;
12878
+ const \u5F27\u306Ey = \u6570\u5024\u306Ey + \u524D\u306E\u9AD8\u3055 + 16 + \u5F27\u306E\u534A\u5F84;
12848
12879
  const \u5272\u5408\u306Ey = \u5F27\u306Ey + \u5F27\u306E\u534A\u5F84 + 8 + \u5272\u5408\u306E\u7D1A;
12849
12880
  return {
12850
12881
  \u4F59\u767D,
12851
12882
  \u540D\u524D\u306E\u7D1A,
12852
12883
  \u6570\u5024\u306E\u7D1A,
12884
+ \u524D\u306E\u7D1A,
12853
12885
  \u5272\u5408\u306E\u7D1A,
12854
12886
  \u5F27\u306E\u534A\u5F84,
12855
12887
  \u5F27\u306E\u592A\u3055,
12856
12888
  \u540D\u524D\u306Ey,
12857
12889
  \u6570\u5024\u306Ey,
12890
+ \u524D\u306Ey,
12858
12891
  \u5F27\u306Ey,
12859
12892
  \u5272\u5408\u306Ey,
12860
12893
  \u67A0: (idx) => ({ x: \u5E45 * idx, y: 0, w: \u5E45, h })