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