@cardenelabs/cdl 0.33.0 → 0.35.0

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.
package/dist/react.js CHANGED
@@ -11837,6 +11837,15 @@ function interpolateColor(template, stateValues, fallback) {
11837
11837
  if (!template) return fallback;
11838
11838
  return interpolate(template, stateValues);
11839
11839
  }
11840
+
11841
+ // src/kinds/chart-number.ts
11842
+ function \u5B9F\u5024\u8868\u8A18(v) {
11843
+ return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
11844
+ }
11845
+ function \u5272\u5408\u8868\u8A18(frac) {
11846
+ const v = Math.round(frac * 1e3) / 10;
11847
+ return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
11848
+ }
11840
11849
  function ChartPieNode({
11841
11850
  node,
11842
11851
  active,
@@ -12284,13 +12293,6 @@ function \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, r, \u958B\u304D) {
12284
12293
  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`;
12285
12294
  return /* @__PURE__ */ jsx("path", { d });
12286
12295
  }
12287
- function \u5B9F\u5024\u8868\u8A18(v) {
12288
- return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
12289
- }
12290
- function \u5272\u5408\u8868\u8A18(frac) {
12291
- const v = Math.round(frac * 1e3) / 10;
12292
- return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
12293
- }
12294
12296
  function sliceColor(tone, idx) {
12295
12297
  if (tone) return TONE[tone];
12296
12298
  return chartSeriesColor(idx);
@@ -12331,7 +12333,7 @@ function ChartGaugeNode({
12331
12333
  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`;
12332
12334
  return { d, frac, path };
12333
12335
  });
12334
- const \u5408\u8A08\u306E\u6587\u5B57 = \u5B9F\u5024\u8868\u8A182(Math.round(total));
12336
+ const \u5408\u8A08\u306E\u6587\u5B57 = \u5B9F\u5024\u8868\u8A18(Math.round(total));
12335
12337
  const \u6A2A\u306E\u4E0A\u9650 = \u5185\u534A\u5F84 * 2 * 0.86;
12336
12338
  const \u7D1A\u306E\u5019\u88DC = Math.min(
12337
12339
  // 横 = 実際の字幅から逆算する
@@ -12396,7 +12398,7 @@ function ChartGaugeNode({
12396
12398
  ),
12397
12399
  data.map((d, idx) => {
12398
12400
  const x = PAD_SIDE + \u5185\u8A33\u306E\u5E45 * idx;
12399
- const \u6570\u5024 = `${\u5B9F\u5024\u8868\u8A182(d.value)} ${\u5272\u5408\u8868\u8A182(d.value / total)}`;
12401
+ const \u6570\u5024 = `${\u5B9F\u5024\u8868\u8A18(d.value)} ${\u5272\u5408\u8868\u8A18(d.value / total)}`;
12400
12402
  return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-gauge-item", children: [
12401
12403
  /* @__PURE__ */ jsx("rect", { x, y: \u5185\u8A33\u306Ey, width: 30, height: 4, rx: 2, fill: arcColor(d.tone, idx) }),
12402
12404
  /* @__PURE__ */ jsx(
@@ -12428,13 +12430,6 @@ function \u5207\u308A\u8A70\u3081\u308B(s, \u4E0A\u9650, \u7D1A) {
12428
12430
  }
12429
12431
  return `${out}\u2026`;
12430
12432
  }
12431
- function \u5B9F\u5024\u8868\u8A182(v) {
12432
- return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
12433
- }
12434
- function \u5272\u5408\u8868\u8A182(frac) {
12435
- const v = Math.round(frac * 1e3) / 10;
12436
- return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
12437
- }
12438
12433
  function arcColor(tone, idx) {
12439
12434
  if (tone) return TONE[tone];
12440
12435
  return chartSeriesColor(idx);
@@ -12454,7 +12449,7 @@ function ChartRadialNode({
12454
12449
  const \u6570\u5024\u306E\u7D1A = 13;
12455
12450
  const \u884C\u306E\u9AD8\u3055 = 42;
12456
12451
  const \u4E00\u89A7\u3068\u5F27\u306E\u9593 = 28;
12457
- const \u6570\u5024\u306E\u6587\u5B57 = data.map((d) => `${\u5B9F\u5024\u8868\u8A183(d.value)} ${\u5272\u5408\u8868\u8A183(d.value / total)}`);
12452
+ const \u6570\u5024\u306E\u6587\u5B57 = data.map((d) => `${\u5B9F\u5024\u8868\u8A18(d.value)} ${\u5272\u5408\u8868\u8A18(d.value / total)}`);
12458
12453
  const \u4E00\u89A7\u306E\u5E45 = \u5370\u306E\u5E45 + Math.max(
12459
12454
  0,
12460
12455
  ...data.map(
@@ -12557,13 +12552,6 @@ function \u5F27\u306E\u90532(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5
12557
12552
  const p = (r, a) => `${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`;
12558
12553
  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`;
12559
12554
  }
12560
- function \u5B9F\u5024\u8868\u8A183(v) {
12561
- return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
12562
- }
12563
- function \u5272\u5408\u8868\u8A183(frac) {
12564
- const v = Math.round(frac * 1e3) / 10;
12565
- return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
12566
- }
12567
12555
  function arcColor2(tone, idx) {
12568
12556
  if (tone) return TONE[tone];
12569
12557
  return chartSeriesColor(idx);
@@ -12597,7 +12585,7 @@ function ChartStatNode({
12597
12585
  const \u67A02 = \u533A\u753B.\u67A0(idx);
12598
12586
  const frac = total > 0 ? d.value / total : 0;
12599
12587
  const \u8272 = \u5370\u306E\u8272(d.tone, idx);
12600
- const \u6570\u5024 = \u5B9F\u5024\u8868\u8A184(d.value);
12588
+ const \u6570\u5024 = \u5B9F\u5024\u8868\u8A18(d.value);
12601
12589
  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);
12602
12590
  return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-stat-item", transform: `translate(${\u67A02.x} ${\u67A02.y})`, children: [
12603
12591
  idx > 0 && /* @__PURE__ */ jsx(
@@ -12672,7 +12660,7 @@ function ChartStatNode({
12672
12660
  fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
12673
12661
  textAnchor: "middle",
12674
12662
  fill: "var(--cdl-text-dim, #5a6270)",
12675
- children: \u5272\u5408\u8868\u8A184(frac)
12663
+ children: \u5272\u5408\u8868\u8A18(frac)
12676
12664
  }
12677
12665
  )
12678
12666
  ] }, `stat-${idx}`);
@@ -12719,13 +12707,6 @@ function \u5F27\u306E\u90533(cx, cy, r, \u5272\u5408) {
12719
12707
  const p = (a) => `${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`;
12720
12708
  return `M ${p(a0)} A ${r} ${r} 0 ${large} 1 ${p(a1)}`;
12721
12709
  }
12722
- function \u5B9F\u5024\u8868\u8A184(v) {
12723
- return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
12724
- }
12725
- function \u5272\u5408\u8868\u8A184(frac) {
12726
- const v = Math.round(frac * 1e3) / 10;
12727
- return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
12728
- }
12729
12710
  function \u5370\u306E\u8272(tone, idx) {
12730
12711
  if (tone) return TONE[tone];
12731
12712
  return chartSeriesColor(idx);
@@ -12761,7 +12742,7 @@ function ChartWaffleNode({
12761
12742
  const \u884C\u306E\u9AD8\u3055 = 40;
12762
12743
  const \u4E00\u89A7\u3068\u683C\u5B50\u306E\u9593 = 28;
12763
12744
  const \u5370\u306E\u5E452 = 18;
12764
- const \u6570\u5024\u306E\u6587\u5B57 = data.map((d, i) => `${\u5B9F\u5024\u8868\u8A185(d.value)} ${\u914D\u5206[i] ?? 0}%`);
12745
+ const \u6570\u5024\u306E\u6587\u5B57 = data.map((d, i) => `${\u5B9F\u5024\u8868\u8A18(d.value)} ${\u914D\u5206[i] ?? 0}%`);
12765
12746
  const \u4E00\u89A7\u306E\u5E45 = \u5370\u306E\u5E452 + Math.max(
12766
12747
  0,
12767
12748
  ...data.map(
@@ -12845,9 +12826,6 @@ function ChartWaffleNode({
12845
12826
  })
12846
12827
  ] });
12847
12828
  }
12848
- function \u5B9F\u5024\u8868\u8A185(v) {
12849
- return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
12850
- }
12851
12829
  function \u5370\u306E\u82722(tone, idx) {
12852
12830
  if (tone) return TONE[tone];
12853
12831
  return chartSeriesColor(idx);
@@ -12934,7 +12912,7 @@ function ChartStackedBarNode({
12934
12912
  fontWeight: 700,
12935
12913
  textAnchor: "middle",
12936
12914
  fill: "#ffffff",
12937
- children: \u5272\u5408\u8868\u8A185(s.\u5272\u5408)
12915
+ children: \u5272\u5408\u8868\u8A18(s.\u5272\u5408)
12938
12916
  }
12939
12917
  ),
12940
12918
  w >= SLICE_MIN_W_FOR_VALUE && /* @__PURE__ */ jsx(
@@ -12947,7 +12925,7 @@ function ChartStackedBarNode({
12947
12925
  textAnchor: "middle",
12948
12926
  fill: "#ffffff",
12949
12927
  fillOpacity: 0.85,
12950
- children: \u5B9F\u5024\u8868\u8A186(s.\u5B9F\u5024)
12928
+ children: \u5B9F\u5024\u8868\u8A18(s.\u5B9F\u5024)
12951
12929
  }
12952
12930
  )
12953
12931
  ] }, `slice-${idx}`);
@@ -12992,13 +12970,6 @@ function \u5E2F\u3092\u7D44\u3080(\u540D\u524D, data, \u53D6\u308B) {
12992
12970
  }))
12993
12971
  };
12994
12972
  }
12995
- function \u5B9F\u5024\u8868\u8A186(v) {
12996
- return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
12997
- }
12998
- function \u5272\u5408\u8868\u8A185(frac) {
12999
- const v = Math.round(frac * 1e3) / 10;
13000
- return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
13001
- }
13002
12973
  function \u5370\u306E\u82723(tone, idx) {
13003
12974
  if (tone) return TONE[tone];
13004
12975
  return chartSeriesColor(idx);
@@ -13020,11 +12991,6 @@ function \u4E00\u89A7\u306E\u4E26\u3073(data, \u5DE6, \u53F3\u7AEF, \u7D1A) {
13020
12991
  });
13021
12992
  return out;
13022
12993
  }
13023
-
13024
- // src/kinds/chart-number.ts
13025
- function \u5B9F\u5024\u8868\u8A187(v) {
13026
- return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
13027
- }
13028
12994
  var \u7DDA\u306E\u6700\u5C0F\u5E45 = 120;
13029
12995
  function ChartSlopeNode({
13030
12996
  node,
@@ -13060,8 +13026,8 @@ function ChartSlopeNode({
13060
13026
  const \u4E0A\u7AEF = PAD + (\u524D\u3042\u308A ? \u6642\u70B9\u306E\u7D1A + 12 : 0) + 6;
13061
13027
  const \u4E0B\u7AEF = Math.max(\u4E0A\u7AEF + 10, node.h - PAD - 6);
13062
13028
  const y\u3092\u53D6\u308B = (v) => \u5C3A\u306E\u5E45 > 0 ? \u4E0B\u7AEF - (v - \u6700\u5C0F) / \u5C3A\u306E\u5E45 * (\u4E0B\u7AEF - \u4E0A\u7AEF) : (\u4E0A\u7AEF + \u4E0B\u7AEF) / 2;
13063
- const \u5DE6\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A187(s.\u524D));
13064
- const \u53F3\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A187(s.\u4ECA));
13029
+ const \u5DE6\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A18(s.\u524D));
13030
+ const \u53F3\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A18(s.\u4ECA));
13065
13031
  const \u5DE6\u5024\u5E45 = Math.max(0, ...\u5DE6\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A)));
13066
13032
  const \u53F3\u5024\u5E45 = Math.max(0, ...\u53F3\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A)));
13067
13033
  const \u540D\u524D\u306B\u4F7F\u3048\u308B = Math.max(
@@ -13103,7 +13069,7 @@ function ChartSlopeNode({
13103
13069
  x2: x,
13104
13070
  y2: \u4E0B\u7AEF + 6,
13105
13071
  stroke: "var(--cdl-divider, #d4d4d8)",
13106
- strokeWidth: 1
13072
+ strokeWidth: 2
13107
13073
  },
13108
13074
  `axis-${i}`
13109
13075
  )),
@@ -13179,7 +13145,7 @@ function ChartSlopeNode({
13179
13145
  /* @__PURE__ */ jsx(
13180
13146
  "text",
13181
13147
  {
13182
- "data-cdl-role": "chart-slope-label",
13148
+ "data-cdl-role": "chart-slope-value",
13183
13149
  x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
13184
13150
  y: \u5DE6y + 5,
13185
13151
  textAnchor: "end",
@@ -13192,24 +13158,24 @@ function ChartSlopeNode({
13192
13158
  /* @__PURE__ */ jsx(
13193
13159
  "text",
13194
13160
  {
13195
- "data-cdl-role": "chart-slope-label",
13161
+ "data-cdl-role": "chart-slope-name",
13196
13162
  x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067 - \u5DE6\u5024\u5E45 - \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
13197
13163
  y: \u5DE6y + 5,
13198
13164
  textAnchor: "end",
13199
13165
  fontSize: \u540D\u524D\u306E\u7D1A,
13200
- fill: "var(--cdl-text-dim, #5a6270)",
13166
+ fill: s.\u8272,
13201
13167
  children: s.\u540D\u524D
13202
13168
  }
13203
13169
  )
13204
13170
  ] }) : /* @__PURE__ */ jsx(
13205
13171
  "text",
13206
13172
  {
13207
- "data-cdl-role": "chart-slope-label",
13173
+ "data-cdl-role": "chart-slope-name",
13208
13174
  x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
13209
13175
  y: \u53F3y + 5,
13210
13176
  textAnchor: "end",
13211
13177
  fontSize: \u540D\u524D\u306E\u7D1A,
13212
- fill: "var(--cdl-text-dim, #5a6270)",
13178
+ fill: s.\u8272,
13213
13179
  children: s.\u540D\u524D
13214
13180
  }
13215
13181
  ),
@@ -13217,7 +13183,7 @@ function ChartSlopeNode({
13217
13183
  /* @__PURE__ */ jsx(
13218
13184
  "text",
13219
13185
  {
13220
- "data-cdl-role": "chart-slope-label",
13186
+ "data-cdl-role": "chart-slope-value",
13221
13187
  x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067,
13222
13188
  y: \u53F3y + 5,
13223
13189
  fontSize: \u5024\u306E\u7D1A,
@@ -13229,11 +13195,11 @@ function ChartSlopeNode({
13229
13195
  \u524D\u3042\u308A && /* @__PURE__ */ jsx(
13230
13196
  "text",
13231
13197
  {
13232
- "data-cdl-role": "chart-slope-label",
13198
+ "data-cdl-role": "chart-slope-name",
13233
13199
  x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u53F3\u5024\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
13234
13200
  y: \u53F3y + 5,
13235
13201
  fontSize: \u540D\u524D\u306E\u7D1A,
13236
- fill: "var(--cdl-text-dim, #5a6270)",
13202
+ fill: s.\u8272,
13237
13203
  children: s.\u540D\u524D
13238
13204
  }
13239
13205
  )