@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/index.js
CHANGED
|
@@ -17212,7 +17212,9 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
|
|
|
17212
17212
|
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;
|
|
17213
17213
|
for (const n of diag.nodes) {
|
|
17214
17214
|
if (!n.rows) continue;
|
|
17215
|
-
for (
|
|
17215
|
+
for (let i = 0; i < n.rows.length; i++) {
|
|
17216
|
+
const row = n.rows[i];
|
|
17217
|
+
if (n.rowMarks?.[i] != null) continue;
|
|
17216
17218
|
const m = row.match(/^([^:]+):\s*(.+)$/);
|
|
17217
17219
|
if (!m) continue;
|
|
17218
17220
|
const [, key, value] = m;
|
|
@@ -24959,18 +24961,35 @@ function ChartGaugeNode({
|
|
|
24959
24961
|
const \u5185\u534A\u5F84 = radius * 0.62;
|
|
24960
24962
|
const cx = node.w / 2;
|
|
24961
24963
|
const cy = PAD_TOP2 + radius;
|
|
24964
|
+
const \u524D\u3042\u308A = \u51FA\u3059\u4EF6\u305F\u3061.some((d) => d.previous !== void 0);
|
|
24965
|
+
const \u524D\u306E\u5024 = \u51FA\u3059\u4EF6\u305F\u3061.map((d) => Math.max(0, d.previous ?? 0));
|
|
24966
|
+
const \u524D\u306E\u5408\u8A08 = \u524D\u306E\u5024.reduce((acc, v) => acc + v, 0);
|
|
24967
|
+
const \u5E2F = radius - \u5185\u534A\u5F84;
|
|
24968
|
+
const \u4ECA\u306E\u5185\u534A\u5F84 = \u524D\u3042\u308A ? \u5185\u534A\u5F84 + \u5E2F * 0.42 : \u5185\u534A\u5F84;
|
|
24969
|
+
const \u524D\u306E\u5185\u534A\u5F84 = \u5185\u534A\u5F84;
|
|
24970
|
+
const \u524D\u306E\u5916\u534A\u5F84 = \u5185\u534A\u5F84 + \u5E2F * 0.32;
|
|
24971
|
+
const \u6247\u306E\u9053 = (a0, a1, \u5185, \u5916) => {
|
|
24972
|
+
const \u59161 = \u6975(cx, cy, \u5916, a0);
|
|
24973
|
+
const \u59162 = \u6975(cx, cy, \u5916, a1);
|
|
24974
|
+
const \u51852 = \u6975(cx, cy, \u5185, a1);
|
|
24975
|
+
const \u51851 = \u6975(cx, cy, \u5185, a0);
|
|
24976
|
+
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`;
|
|
24977
|
+
};
|
|
24962
24978
|
let cumFrac = 0;
|
|
24963
24979
|
const slices = \u51FA\u3059\u4EF6\u305F\u3061.map((d) => {
|
|
24964
24980
|
const frac = d.value / total;
|
|
24965
24981
|
const a0 = Math.PI + cumFrac * Math.PI;
|
|
24966
24982
|
const a1 = a0 + frac * Math.PI;
|
|
24967
24983
|
cumFrac += frac;
|
|
24968
|
-
|
|
24969
|
-
|
|
24970
|
-
|
|
24971
|
-
|
|
24972
|
-
const
|
|
24973
|
-
|
|
24984
|
+
return { d, frac, path: \u6247\u306E\u9053(a0, a1, \u4ECA\u306E\u5185\u534A\u5F84, radius) };
|
|
24985
|
+
});
|
|
24986
|
+
let \u524D\u306Ecum = 0;
|
|
24987
|
+
const \u524D\u306E\u6247\u305F\u3061 = \u51FA\u3059\u4EF6\u305F\u3061.map((d, idx) => {
|
|
24988
|
+
const frac = \u524D\u306E\u5408\u8A08 > 0 ? (\u524D\u306E\u5024[idx] ?? 0) / \u524D\u306E\u5408\u8A08 : 0;
|
|
24989
|
+
const a0 = Math.PI + \u524D\u306Ecum * Math.PI;
|
|
24990
|
+
const a1 = a0 + frac * Math.PI;
|
|
24991
|
+
\u524D\u306Ecum += frac;
|
|
24992
|
+
return { d, frac, path: \u6247\u306E\u9053(a0, a1, \u524D\u306E\u5185\u534A\u5F84, \u524D\u306E\u5916\u534A\u5F84) };
|
|
24974
24993
|
});
|
|
24975
24994
|
const \u5408\u8A08\u306E\u6587\u5B57 = \u5B9F\u5024\u8868\u8A18(Math.round(total));
|
|
24976
24995
|
const \u5358\u4F4D\u5E45 = Math.max(textWidth(\u5408\u8A08\u306E\u6587\u5B57, 100), 1) / 100;
|
|
@@ -24999,6 +25018,20 @@ function ChartGaugeNode({
|
|
|
24999
25018
|
},
|
|
25000
25019
|
`arc-${idx}`
|
|
25001
25020
|
));
|
|
25021
|
+
const \u524D\u306E\u5F27\u305F\u3061 = \u524D\u3042\u308A ? \u524D\u306E\u6247\u305F\u3061.map((s, idx) => /* @__PURE__ */ jsx(
|
|
25022
|
+
"path",
|
|
25023
|
+
{
|
|
25024
|
+
"data-cdl-role": "chart-gauge-previous",
|
|
25025
|
+
"data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
|
|
25026
|
+
d: s.path,
|
|
25027
|
+
fill: arcColor(s.d.tone, idx),
|
|
25028
|
+
fillOpacity: 0.45,
|
|
25029
|
+
stroke: "var(--cdl-node-fill, #ffffff)",
|
|
25030
|
+
strokeWidth: 1.5,
|
|
25031
|
+
strokeLinejoin: "round"
|
|
25032
|
+
},
|
|
25033
|
+
`prev-arc-${idx}`
|
|
25034
|
+
)) : null;
|
|
25002
25035
|
return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
|
|
25003
25036
|
/* @__PURE__ */ jsx(
|
|
25004
25037
|
"rect",
|
|
@@ -25015,7 +25048,13 @@ function ChartGaugeNode({
|
|
|
25015
25048
|
}
|
|
25016
25049
|
),
|
|
25017
25050
|
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) }) }),
|
|
25018
|
-
drawing ? /* @__PURE__ */
|
|
25051
|
+
drawing ? /* @__PURE__ */ jsxs("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: [
|
|
25052
|
+
\u524D\u306E\u5F27\u305F\u3061,
|
|
25053
|
+
\u5F27\u305F\u3061
|
|
25054
|
+
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
25055
|
+
\u524D\u306E\u5F27\u305F\u3061,
|
|
25056
|
+
\u5F27\u305F\u3061
|
|
25057
|
+
] }),
|
|
25019
25058
|
/* @__PURE__ */ jsx(
|
|
25020
25059
|
"text",
|
|
25021
25060
|
{
|
|
@@ -25124,9 +25163,11 @@ function ChartRadialNode({
|
|
|
25124
25163
|
const rings = data.map((d, idx) => {
|
|
25125
25164
|
const frac = d.value / total;
|
|
25126
25165
|
const \u4E2D\u5FC3\u534A\u5F84 = \u5916\u534A\u5F84 - \u5E2F1\u672C * idx - \u5E2F1\u672C / 2;
|
|
25166
|
+
const \u524D\u306E\u5272\u5408 = d.previous === void 0 ? null : Math.max(0, d.previous) / total;
|
|
25127
25167
|
return {
|
|
25128
25168
|
d,
|
|
25129
25169
|
frac,
|
|
25170
|
+
\u524D\u306E\u5272\u5408,
|
|
25130
25171
|
\u4E2D\u5FC3\u534A\u5F84,
|
|
25131
25172
|
// 軌道は全周。 1 周ちょうどは弧で表せないので、 わずかに欠かして描く
|
|
25132
25173
|
\u8ECC\u9053: \u5F27\u306E\u90532(\u5F27\u306Ecx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, 0.9999),
|
|
@@ -25175,6 +25216,20 @@ function ChartRadialNode({
|
|
|
25175
25216
|
)),
|
|
25176
25217
|
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) }) }),
|
|
25177
25218
|
drawing ? /* @__PURE__ */ jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u53D6\u308A\u5206\u305F\u3061 }) : \u53D6\u308A\u5206\u305F\u3061,
|
|
25219
|
+
rings.map(
|
|
25220
|
+
(r, idx) => r.\u524D\u306E\u5272\u5408 === null ? null : /* @__PURE__ */ jsx(
|
|
25221
|
+
"line",
|
|
25222
|
+
{
|
|
25223
|
+
"data-cdl-role": "chart-radial-previous",
|
|
25224
|
+
"data-cdl-unresolved": r.d.unresolved ? "true" : void 0,
|
|
25225
|
+
...\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)),
|
|
25226
|
+
stroke: "var(--cdl-text-mute, #8a8678)",
|
|
25227
|
+
strokeWidth: 2,
|
|
25228
|
+
strokeLinecap: "round"
|
|
25229
|
+
},
|
|
25230
|
+
`prev-${idx}`
|
|
25231
|
+
)
|
|
25232
|
+
),
|
|
25178
25233
|
data.map((d, idx) => {
|
|
25179
25234
|
const y = \u4E00\u89A7\u306E\u59CB\u307E\u308A + \u884C\u306E\u9AD8\u3055 * idx;
|
|
25180
25235
|
return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-radial-item", children: [
|
|
@@ -25214,6 +25269,18 @@ function \u5F27\u306E\u90532(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5
|
|
|
25214
25269
|
const p = (r, a) => `${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`;
|
|
25215
25270
|
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`;
|
|
25216
25271
|
}
|
|
25272
|
+
function \u5E2F\u3092\u6A2A\u5207\u308B\u5370(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5408) {
|
|
25273
|
+
const \u306F\u307F\u51FA\u3057 = Math.min(\u5E45 * 0.3, 5);
|
|
25274
|
+
const \u5916 = \u4E2D\u5FC3\u534A\u5F84 + \u5E45 / 2 + \u306F\u307F\u51FA\u3057;
|
|
25275
|
+
const \u5185 = Math.max(0.5, \u4E2D\u5FC3\u534A\u5F84 - \u5E45 / 2 - \u306F\u307F\u51FA\u3057);
|
|
25276
|
+
const a = -Math.PI / 2 + \u5272\u5408 * Math.PI * 2;
|
|
25277
|
+
return {
|
|
25278
|
+
x1: cx + \u5185 * Math.cos(a),
|
|
25279
|
+
y1: cy + \u5185 * Math.sin(a),
|
|
25280
|
+
x2: cx + \u5916 * Math.cos(a),
|
|
25281
|
+
y2: cy + \u5916 * Math.sin(a)
|
|
25282
|
+
};
|
|
25283
|
+
}
|
|
25217
25284
|
function arcColor2(tone, idx) {
|
|
25218
25285
|
if (tone) return TONE[tone];
|
|
25219
25286
|
return chartSeriesColor(idx);
|
|
@@ -25964,8 +26031,9 @@ function ChartBarNode({
|
|
|
25964
26031
|
const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
|
|
25965
26032
|
const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
|
|
25966
26033
|
const vMax = data.length > 0 ? Math.max(...data.map((d) => d.value)) : 1;
|
|
26034
|
+
const \u8EF8\u306E\u3082\u3068 = data.length > 0 ? Math.max(vMax, ...data.map((d) => d.previous ?? 0)) : vMax;
|
|
25967
26035
|
const \u76EE\u76DB\u308A\u306E\u76EE\u5B892 = 4;
|
|
25968
|
-
const \u5929\u4E95\u306E\u3082\u3068 =
|
|
26036
|
+
const \u5929\u4E95\u306E\u3082\u3068 = \u8EF8\u306E\u3082\u3068 > 0 ? \u8EF8\u306E\u3082\u3068 : 1;
|
|
25969
26037
|
const \u523B\u307F = \u76EE\u76DB\u308A\u306E\u523B\u307F(\u5929\u4E95\u306E\u3082\u3068, \u76EE\u76DB\u308A\u306E\u76EE\u5B892);
|
|
25970
26038
|
const \u523B\u307F\u306E\u6841 = \u5C0F\u6570\u306E\u6841(\u523B\u307F);
|
|
25971
26039
|
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);
|
|
@@ -26058,8 +26126,24 @@ function ChartBarNode({
|
|
|
26058
26126
|
fillOpacity: \u6FC3\u3055(d.value)
|
|
26059
26127
|
}
|
|
26060
26128
|
);
|
|
26129
|
+
const \u5370\u306E\u306F\u307F\u51FA\u3057 = Math.min(barW * 0.18, 8);
|
|
26130
|
+
const \u524D\u306E\u5370 = d.previous === void 0 ? null : /* @__PURE__ */ jsx(
|
|
26131
|
+
"line",
|
|
26132
|
+
{
|
|
26133
|
+
"data-cdl-role": "chart-bar-previous",
|
|
26134
|
+
"data-cdl-unresolved": d.unresolved ? "true" : void 0,
|
|
26135
|
+
x1: bx - \u5370\u306E\u306F\u307F\u51FA\u3057,
|
|
26136
|
+
y1: yAt(Math.max(0, d.previous)),
|
|
26137
|
+
x2: bx + barW + \u5370\u306E\u306F\u307F\u51FA\u3057,
|
|
26138
|
+
y2: yAt(Math.max(0, d.previous)),
|
|
26139
|
+
stroke: "var(--cdl-text-mute, #8a8678)",
|
|
26140
|
+
strokeWidth: 1.5,
|
|
26141
|
+
strokeDasharray: "5 3"
|
|
26142
|
+
}
|
|
26143
|
+
);
|
|
26061
26144
|
return /* @__PURE__ */ jsxs("g", { children: [
|
|
26062
26145
|
drawing ? /* @__PURE__ */ jsx("g", { transform: `translate(0 ${\u6A2A\u8EF8\u306Ey}) scale(1 ${\u4F38\u3073}) translate(0 ${-\u6A2A\u8EF8\u306Ey})`, children: \u68D2 }) : \u68D2,
|
|
26146
|
+
\u524D\u306E\u5370,
|
|
26063
26147
|
/* @__PURE__ */ jsx(
|
|
26064
26148
|
"text",
|
|
26065
26149
|
{
|