@cardenelabs/cdl 0.40.10 → 0.40.12
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/CHANGELOG.md +58 -1
- package/dist/index.cjs +93 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +93 -9
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +93 -9
- package/dist/react.cjs.map +1 -1
- package/dist/react.js +93 -9
- package/dist/react.js.map +1 -1
- package/package.json +1 -1
- package/src/kinds/chart-bar.tsx +39 -1
- package/src/kinds/chart-gauge.tsx +81 -11
- package/src/kinds/chart-radial.tsx +59 -0
- package/src/visual-validate.ts +19 -1
package/dist/react.cjs
CHANGED
|
@@ -6165,7 +6165,9 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
|
|
|
6165
6165
|
const SCHEMA_KEYWORDS = /^(string|number|boolean|text|enum|timestamp|date|datetime|json|blob|PK|FK|UUID|BIGINT|INT|FLOAT|VARCHAR|TEXT|DATETIME)$|^enum\(|^varchar\(/i;
|
|
6166
6166
|
for (const n of diag.nodes) {
|
|
6167
6167
|
if (!n.rows) continue;
|
|
6168
|
-
for (
|
|
6168
|
+
for (let i = 0; i < n.rows.length; i++) {
|
|
6169
|
+
const row = n.rows[i];
|
|
6170
|
+
if (n.rowMarks?.[i] != null) continue;
|
|
6169
6171
|
const m = row.match(/^([^:]+):\s*(.+)$/);
|
|
6170
6172
|
if (!m) continue;
|
|
6171
6173
|
const [, key, value] = m;
|
|
@@ -12462,18 +12464,35 @@ function ChartGaugeNode({
|
|
|
12462
12464
|
const \u5185\u534A\u5F84 = radius * 0.62;
|
|
12463
12465
|
const cx = node.w / 2;
|
|
12464
12466
|
const cy = PAD_TOP2 + radius;
|
|
12467
|
+
const \u524D\u3042\u308A = \u51FA\u3059\u4EF6\u305F\u3061.some((d) => d.previous !== void 0);
|
|
12468
|
+
const \u524D\u306E\u5024 = \u51FA\u3059\u4EF6\u305F\u3061.map((d) => Math.max(0, d.previous ?? 0));
|
|
12469
|
+
const \u524D\u306E\u5408\u8A08 = \u524D\u306E\u5024.reduce((acc, v) => acc + v, 0);
|
|
12470
|
+
const \u5E2F = radius - \u5185\u534A\u5F84;
|
|
12471
|
+
const \u4ECA\u306E\u5185\u534A\u5F84 = \u524D\u3042\u308A ? \u5185\u534A\u5F84 + \u5E2F * 0.42 : \u5185\u534A\u5F84;
|
|
12472
|
+
const \u524D\u306E\u5185\u534A\u5F84 = \u5185\u534A\u5F84;
|
|
12473
|
+
const \u524D\u306E\u5916\u534A\u5F84 = \u5185\u534A\u5F84 + \u5E2F * 0.32;
|
|
12474
|
+
const \u6247\u306E\u9053 = (a0, a1, \u5185, \u5916) => {
|
|
12475
|
+
const \u59161 = \u6975(cx, cy, \u5916, a0);
|
|
12476
|
+
const \u59162 = \u6975(cx, cy, \u5916, a1);
|
|
12477
|
+
const \u51852 = \u6975(cx, cy, \u5185, a1);
|
|
12478
|
+
const \u51851 = \u6975(cx, cy, \u5185, a0);
|
|
12479
|
+
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`;
|
|
12480
|
+
};
|
|
12465
12481
|
let cumFrac = 0;
|
|
12466
12482
|
const slices = \u51FA\u3059\u4EF6\u305F\u3061.map((d) => {
|
|
12467
12483
|
const frac = d.value / total;
|
|
12468
12484
|
const a0 = Math.PI + cumFrac * Math.PI;
|
|
12469
12485
|
const a1 = a0 + frac * Math.PI;
|
|
12470
12486
|
cumFrac += frac;
|
|
12471
|
-
|
|
12472
|
-
|
|
12473
|
-
|
|
12474
|
-
|
|
12475
|
-
const
|
|
12476
|
-
|
|
12487
|
+
return { d, frac, path: \u6247\u306E\u9053(a0, a1, \u4ECA\u306E\u5185\u534A\u5F84, radius) };
|
|
12488
|
+
});
|
|
12489
|
+
let \u524D\u306Ecum = 0;
|
|
12490
|
+
const \u524D\u306E\u6247\u305F\u3061 = \u51FA\u3059\u4EF6\u305F\u3061.map((d, idx) => {
|
|
12491
|
+
const frac = \u524D\u306E\u5408\u8A08 > 0 ? (\u524D\u306E\u5024[idx] ?? 0) / \u524D\u306E\u5408\u8A08 : 0;
|
|
12492
|
+
const a0 = Math.PI + \u524D\u306Ecum * Math.PI;
|
|
12493
|
+
const a1 = a0 + frac * Math.PI;
|
|
12494
|
+
\u524D\u306Ecum += frac;
|
|
12495
|
+
return { d, frac, path: \u6247\u306E\u9053(a0, a1, \u524D\u306E\u5185\u534A\u5F84, \u524D\u306E\u5916\u534A\u5F84) };
|
|
12477
12496
|
});
|
|
12478
12497
|
const \u5408\u8A08\u306E\u6587\u5B57 = \u5B9F\u5024\u8868\u8A18(Math.round(total));
|
|
12479
12498
|
const \u5358\u4F4D\u5E45 = Math.max(textWidth(\u5408\u8A08\u306E\u6587\u5B57, 100), 1) / 100;
|
|
@@ -12502,6 +12521,20 @@ function ChartGaugeNode({
|
|
|
12502
12521
|
},
|
|
12503
12522
|
`arc-${idx}`
|
|
12504
12523
|
));
|
|
12524
|
+
const \u524D\u306E\u5F27\u305F\u3061 = \u524D\u3042\u308A ? \u524D\u306E\u6247\u305F\u3061.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
12525
|
+
"path",
|
|
12526
|
+
{
|
|
12527
|
+
"data-cdl-role": "chart-gauge-previous",
|
|
12528
|
+
"data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
|
|
12529
|
+
d: s.path,
|
|
12530
|
+
fill: arcColor(s.d.tone, idx),
|
|
12531
|
+
fillOpacity: 0.45,
|
|
12532
|
+
stroke: "var(--cdl-node-fill, #ffffff)",
|
|
12533
|
+
strokeWidth: 1.5,
|
|
12534
|
+
strokeLinejoin: "round"
|
|
12535
|
+
},
|
|
12536
|
+
`prev-arc-${idx}`
|
|
12537
|
+
)) : null;
|
|
12505
12538
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
|
|
12506
12539
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12507
12540
|
"rect",
|
|
@@ -12518,7 +12551,13 @@ function ChartGaugeNode({
|
|
|
12518
12551
|
}
|
|
12519
12552
|
),
|
|
12520
12553
|
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) }) }),
|
|
12521
|
-
drawing ? /* @__PURE__ */ jsxRuntime.
|
|
12554
|
+
drawing ? /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: [
|
|
12555
|
+
\u524D\u306E\u5F27\u305F\u3061,
|
|
12556
|
+
\u5F27\u305F\u3061
|
|
12557
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
12558
|
+
\u524D\u306E\u5F27\u305F\u3061,
|
|
12559
|
+
\u5F27\u305F\u3061
|
|
12560
|
+
] }),
|
|
12522
12561
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12523
12562
|
"text",
|
|
12524
12563
|
{
|
|
@@ -12627,9 +12666,11 @@ function ChartRadialNode({
|
|
|
12627
12666
|
const rings = data.map((d, idx) => {
|
|
12628
12667
|
const frac = d.value / total;
|
|
12629
12668
|
const \u4E2D\u5FC3\u534A\u5F84 = \u5916\u534A\u5F84 - \u5E2F1\u672C * idx - \u5E2F1\u672C / 2;
|
|
12669
|
+
const \u524D\u306E\u5272\u5408 = d.previous === void 0 ? null : Math.max(0, d.previous) / total;
|
|
12630
12670
|
return {
|
|
12631
12671
|
d,
|
|
12632
12672
|
frac,
|
|
12673
|
+
\u524D\u306E\u5272\u5408,
|
|
12633
12674
|
\u4E2D\u5FC3\u534A\u5F84,
|
|
12634
12675
|
// 軌道は全周。 1 周ちょうどは弧で表せないので、 わずかに欠かして描く
|
|
12635
12676
|
\u8ECC\u9053: \u5F27\u306E\u90532(\u5F27\u306Ecx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, 0.9999),
|
|
@@ -12678,6 +12719,20 @@ function ChartRadialNode({
|
|
|
12678
12719
|
)),
|
|
12679
12720
|
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) }) }),
|
|
12680
12721
|
drawing ? /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u53D6\u308A\u5206\u305F\u3061 }) : \u53D6\u308A\u5206\u305F\u3061,
|
|
12722
|
+
rings.map(
|
|
12723
|
+
(r, idx) => r.\u524D\u306E\u5272\u5408 === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
|
|
12724
|
+
"line",
|
|
12725
|
+
{
|
|
12726
|
+
"data-cdl-role": "chart-radial-previous",
|
|
12727
|
+
"data-cdl-unresolved": r.d.unresolved ? "true" : void 0,
|
|
12728
|
+
...\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)),
|
|
12729
|
+
stroke: "var(--cdl-text-mute, #8a8678)",
|
|
12730
|
+
strokeWidth: 2,
|
|
12731
|
+
strokeLinecap: "round"
|
|
12732
|
+
},
|
|
12733
|
+
`prev-${idx}`
|
|
12734
|
+
)
|
|
12735
|
+
),
|
|
12681
12736
|
data.map((d, idx) => {
|
|
12682
12737
|
const y = \u4E00\u89A7\u306E\u59CB\u307E\u308A + \u884C\u306E\u9AD8\u3055 * idx;
|
|
12683
12738
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-radial-item", children: [
|
|
@@ -12717,6 +12772,18 @@ function \u5F27\u306E\u90532(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5
|
|
|
12717
12772
|
const p = (r, a) => `${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`;
|
|
12718
12773
|
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`;
|
|
12719
12774
|
}
|
|
12775
|
+
function \u5E2F\u3092\u6A2A\u5207\u308B\u5370(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5408) {
|
|
12776
|
+
const \u306F\u307F\u51FA\u3057 = Math.min(\u5E45 * 0.3, 5);
|
|
12777
|
+
const \u5916 = \u4E2D\u5FC3\u534A\u5F84 + \u5E45 / 2 + \u306F\u307F\u51FA\u3057;
|
|
12778
|
+
const \u5185 = Math.max(0.5, \u4E2D\u5FC3\u534A\u5F84 - \u5E45 / 2 - \u306F\u307F\u51FA\u3057);
|
|
12779
|
+
const a = -Math.PI / 2 + \u5272\u5408 * Math.PI * 2;
|
|
12780
|
+
return {
|
|
12781
|
+
x1: cx + \u5185 * Math.cos(a),
|
|
12782
|
+
y1: cy + \u5185 * Math.sin(a),
|
|
12783
|
+
x2: cx + \u5916 * Math.cos(a),
|
|
12784
|
+
y2: cy + \u5916 * Math.sin(a)
|
|
12785
|
+
};
|
|
12786
|
+
}
|
|
12720
12787
|
function arcColor2(tone, idx) {
|
|
12721
12788
|
if (tone) return TONE[tone];
|
|
12722
12789
|
return chartSeriesColor(idx);
|
|
@@ -13467,8 +13534,9 @@ function ChartBarNode({
|
|
|
13467
13534
|
const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
|
|
13468
13535
|
const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
|
|
13469
13536
|
const vMax = data.length > 0 ? Math.max(...data.map((d) => d.value)) : 1;
|
|
13537
|
+
const \u8EF8\u306E\u3082\u3068 = data.length > 0 ? Math.max(vMax, ...data.map((d) => d.previous ?? 0)) : vMax;
|
|
13470
13538
|
const \u76EE\u76DB\u308A\u306E\u76EE\u5B892 = 4;
|
|
13471
|
-
const \u5929\u4E95\u306E\u3082\u3068 =
|
|
13539
|
+
const \u5929\u4E95\u306E\u3082\u3068 = \u8EF8\u306E\u3082\u3068 > 0 ? \u8EF8\u306E\u3082\u3068 : 1;
|
|
13472
13540
|
const \u523B\u307F = \u76EE\u76DB\u308A\u306E\u523B\u307F(\u5929\u4E95\u306E\u3082\u3068, \u76EE\u76DB\u308A\u306E\u76EE\u5B892);
|
|
13473
13541
|
const \u523B\u307F\u306E\u6841 = \u5C0F\u6570\u306E\u6841(\u523B\u307F);
|
|
13474
13542
|
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);
|
|
@@ -13561,8 +13629,24 @@ function ChartBarNode({
|
|
|
13561
13629
|
fillOpacity: \u6FC3\u3055(d.value)
|
|
13562
13630
|
}
|
|
13563
13631
|
);
|
|
13632
|
+
const \u5370\u306E\u306F\u307F\u51FA\u3057 = Math.min(barW * 0.18, 8);
|
|
13633
|
+
const \u524D\u306E\u5370 = d.previous === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(
|
|
13634
|
+
"line",
|
|
13635
|
+
{
|
|
13636
|
+
"data-cdl-role": "chart-bar-previous",
|
|
13637
|
+
"data-cdl-unresolved": d.unresolved ? "true" : void 0,
|
|
13638
|
+
x1: bx - \u5370\u306E\u306F\u307F\u51FA\u3057,
|
|
13639
|
+
y1: yAt(Math.max(0, d.previous)),
|
|
13640
|
+
x2: bx + barW + \u5370\u306E\u306F\u307F\u51FA\u3057,
|
|
13641
|
+
y2: yAt(Math.max(0, d.previous)),
|
|
13642
|
+
stroke: "var(--cdl-text-mute, #8a8678)",
|
|
13643
|
+
strokeWidth: 1.5,
|
|
13644
|
+
strokeDasharray: "5 3"
|
|
13645
|
+
}
|
|
13646
|
+
);
|
|
13564
13647
|
return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
|
|
13565
13648
|
drawing ? /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(0 ${\u6A2A\u8EF8\u306Ey}) scale(1 ${\u4F38\u3073}) translate(0 ${-\u6A2A\u8EF8\u306Ey})`, children: \u68D2 }) : \u68D2,
|
|
13649
|
+
\u524D\u306E\u5370,
|
|
13566
13650
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
13567
13651
|
"text",
|
|
13568
13652
|
{
|