@cardenelabs/cdl 0.32.0 → 0.33.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/CHANGELOG.md +21 -1
- package/README.md +27 -1
- package/dist/index.cjs +252 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +252 -1
- package/dist/index.js.map +1 -1
- package/dist/react.cjs +250 -0
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +1 -1
- package/dist/react.d.ts +1 -1
- package/dist/react.js +250 -0
- package/dist/react.js.map +1 -1
- package/dist/{render-DjnLKv2Q.d.cts → render-C2rcAsgk.d.cts} +1 -1
- package/dist/{render-DjnLKv2Q.d.ts → render-C2rcAsgk.d.ts} +1 -1
- package/package.json +1 -1
- package/src/kinds/chart-number.ts +20 -0
- package/src/kinds/chart-slope.tsx +323 -0
- package/src/layout/spec.ts +1 -0
- package/src/layout/tokens.ts +2 -0
- package/src/presets.ts +3 -1
- package/src/render/nodes.tsx +12 -0
- package/src/types.ts +2 -1
- package/src/validate.ts +2 -0
- package/src/visual-validate.ts +1 -0
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-
|
|
2
|
-
export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as EDGE_HEADS, x as EDGE_HEAD_DEFAULT, y as EDGE_HEAD_FILLS, z as EDGE_HEAD_FILL_DEFAULT, A as EDGE_REVEALS, D as EDGE_REVEAL_DEFAULT, F as EDGE_STYLES, G as EdgeReveal, I as InteractiveHandlerMap, H as InteractiveSignalsAccessor, K as LaidLane, M as NODE_KINDS, O as ScrollProgressHandle, P as TONES, U as computeEventBindingKey, V as computeFormulaKey, W as computeInputSignalKey, X as computeScrollTriggerKey, Y as computed, Z as createInteractiveSignalsAccessor, _ as createScrollProgressHandle, $ as createScrollProgressSignals, a0 as hasInteractivePrimitives, a1 as sequenceBoardMetrics, a2 as sequenceStepId, a3 as signal } from './render-
|
|
1
|
+
import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-C2rcAsgk.cjs';
|
|
2
|
+
export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as EDGE_HEADS, x as EDGE_HEAD_DEFAULT, y as EDGE_HEAD_FILLS, z as EDGE_HEAD_FILL_DEFAULT, A as EDGE_REVEALS, D as EDGE_REVEAL_DEFAULT, F as EDGE_STYLES, G as EdgeReveal, I as InteractiveHandlerMap, H as InteractiveSignalsAccessor, K as LaidLane, M as NODE_KINDS, O as ScrollProgressHandle, P as TONES, U as computeEventBindingKey, V as computeFormulaKey, W as computeInputSignalKey, X as computeScrollTriggerKey, Y as computed, Z as createInteractiveSignalsAccessor, _ as createScrollProgressHandle, $ as createScrollProgressSignals, a0 as hasInteractivePrimitives, a1 as sequenceBoardMetrics, a2 as sequenceStepId, a3 as signal } from './render-C2rcAsgk.cjs';
|
|
3
3
|
import { JSX } from 'react';
|
|
4
4
|
|
|
5
5
|
declare function effect(fn: () => void | (() => void)): () => void;
|
|
@@ -3613,7 +3613,7 @@ type QuadrantBuilder = {
|
|
|
3613
3613
|
* .build();
|
|
3614
3614
|
*/
|
|
3615
3615
|
declare function quadrant(preset: QuadrantPreset): QuadrantBuilder;
|
|
3616
|
-
type ChartType = "pie" | "bar" | "line" | "gauge" | "radial" | "stat" | "waffle" | "stacked-bar";
|
|
3616
|
+
type ChartType = "pie" | "bar" | "line" | "gauge" | "radial" | "stat" | "waffle" | "stacked-bar" | "slope";
|
|
3617
3617
|
type ChartDatum = {
|
|
3618
3618
|
id: string;
|
|
3619
3619
|
label: string;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-
|
|
2
|
-
export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as EDGE_HEADS, x as EDGE_HEAD_DEFAULT, y as EDGE_HEAD_FILLS, z as EDGE_HEAD_FILL_DEFAULT, A as EDGE_REVEALS, D as EDGE_REVEAL_DEFAULT, F as EDGE_STYLES, G as EdgeReveal, I as InteractiveHandlerMap, H as InteractiveSignalsAccessor, K as LaidLane, M as NODE_KINDS, O as ScrollProgressHandle, P as TONES, U as computeEventBindingKey, V as computeFormulaKey, W as computeInputSignalKey, X as computeScrollTriggerKey, Y as computed, Z as createInteractiveSignalsAccessor, _ as createScrollProgressHandle, $ as createScrollProgressSignals, a0 as hasInteractivePrimitives, a1 as sequenceBoardMetrics, a2 as sequenceStepId, a3 as signal } from './render-
|
|
1
|
+
import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-C2rcAsgk.js';
|
|
2
|
+
export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as EDGE_HEADS, x as EDGE_HEAD_DEFAULT, y as EDGE_HEAD_FILLS, z as EDGE_HEAD_FILL_DEFAULT, A as EDGE_REVEALS, D as EDGE_REVEAL_DEFAULT, F as EDGE_STYLES, G as EdgeReveal, I as InteractiveHandlerMap, H as InteractiveSignalsAccessor, K as LaidLane, M as NODE_KINDS, O as ScrollProgressHandle, P as TONES, U as computeEventBindingKey, V as computeFormulaKey, W as computeInputSignalKey, X as computeScrollTriggerKey, Y as computed, Z as createInteractiveSignalsAccessor, _ as createScrollProgressHandle, $ as createScrollProgressSignals, a0 as hasInteractivePrimitives, a1 as sequenceBoardMetrics, a2 as sequenceStepId, a3 as signal } from './render-C2rcAsgk.js';
|
|
3
3
|
import { JSX } from 'react';
|
|
4
4
|
|
|
5
5
|
declare function effect(fn: () => void | (() => void)): () => void;
|
|
@@ -3613,7 +3613,7 @@ type QuadrantBuilder = {
|
|
|
3613
3613
|
* .build();
|
|
3614
3614
|
*/
|
|
3615
3615
|
declare function quadrant(preset: QuadrantPreset): QuadrantBuilder;
|
|
3616
|
-
type ChartType = "pie" | "bar" | "line" | "gauge" | "radial" | "stat" | "waffle" | "stacked-bar";
|
|
3616
|
+
type ChartType = "pie" | "bar" | "line" | "gauge" | "radial" | "stat" | "waffle" | "stacked-bar" | "slope";
|
|
3617
3617
|
type ChartDatum = {
|
|
3618
3618
|
id: string;
|
|
3619
3619
|
label: string;
|
package/dist/index.js
CHANGED
|
@@ -11746,6 +11746,7 @@ var KINDS_WITHOUT_TITLE_TEXT = /* @__PURE__ */ new Set([
|
|
|
11746
11746
|
"chart-stat",
|
|
11747
11747
|
"chart-waffle",
|
|
11748
11748
|
"chart-stacked-bar",
|
|
11749
|
+
"chart-slope",
|
|
11749
11750
|
"gantt-timeline",
|
|
11750
11751
|
"mind-map",
|
|
11751
11752
|
"funnel-stages",
|
|
@@ -13654,8 +13655,10 @@ var NODE_KINDS = [
|
|
|
13654
13655
|
"chart-radial",
|
|
13655
13656
|
"chart-stat",
|
|
13656
13657
|
// chart-stacked-bar は帯を割合で区切り時点を並べる形 (cdl#551)
|
|
13658
|
+
// chart-slope は 2 時点を直線でつなぎ増減と順位の入れ替わりを見せる形 (cdl#688)
|
|
13657
13659
|
"chart-waffle",
|
|
13658
13660
|
"chart-stacked-bar",
|
|
13661
|
+
"chart-slope",
|
|
13659
13662
|
// Timeline / Mind 系 (2、 CAR-994 Phase B) ... 1 node に payload 配列、 SVG geometry render
|
|
13660
13663
|
"gantt-timeline",
|
|
13661
13664
|
"mind-map",
|
|
@@ -15460,6 +15463,7 @@ var GRID_ALIGNED_KINDS = /* @__PURE__ */ new Set([
|
|
|
15460
15463
|
"chart-stat",
|
|
15461
15464
|
"chart-waffle",
|
|
15462
15465
|
"chart-stacked-bar",
|
|
15466
|
+
"chart-slope",
|
|
15463
15467
|
"funnel-stages",
|
|
15464
15468
|
"quadrant-matrix"
|
|
15465
15469
|
]);
|
|
@@ -18066,6 +18070,8 @@ var TOKENS = {
|
|
|
18066
18070
|
"chart-waffle": { w: 640, h: 320 },
|
|
18067
18071
|
// 帯を最大 2 本 + 下に一覧。 縦は帯 2 本ぶんで足りる (cdl#551)
|
|
18068
18072
|
"chart-stacked-bar": { w: 640, h: 320 },
|
|
18073
|
+
// 左右 2 本の縦軸と、その外に名札。 縦は系列が縦に並ぶぶん要る (cdl#688)
|
|
18074
|
+
"chart-slope": { w: 640, h: 360 },
|
|
18069
18075
|
// Timeline / Mind 系 (CAR-994 Phase B)
|
|
18070
18076
|
"gantt-timeline": { w: 720, h: 360 },
|
|
18071
18077
|
"mind-map": { w: 720, h: 480 },
|
|
@@ -20779,6 +20785,7 @@ var DRAW_KINDS = /* @__PURE__ */ new Set([
|
|
|
20779
20785
|
"chart-line",
|
|
20780
20786
|
"chart-bar",
|
|
20781
20787
|
"chart-pie",
|
|
20788
|
+
"chart-slope",
|
|
20782
20789
|
"journey-map",
|
|
20783
20790
|
"mind-map",
|
|
20784
20791
|
"tree-hierarchy",
|
|
@@ -25512,6 +25519,238 @@ function \u4E00\u89A7\u306E\u4E26\u3073(data, \u5DE6, \u53F3\u7AEF, \u7D1A) {
|
|
|
25512
25519
|
});
|
|
25513
25520
|
return out;
|
|
25514
25521
|
}
|
|
25522
|
+
|
|
25523
|
+
// src/kinds/chart-number.ts
|
|
25524
|
+
function \u5B9F\u5024\u8868\u8A187(v) {
|
|
25525
|
+
return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
|
|
25526
|
+
}
|
|
25527
|
+
var \u7DDA\u306E\u6700\u5C0F\u5E45 = 120;
|
|
25528
|
+
function ChartSlopeNode({
|
|
25529
|
+
node,
|
|
25530
|
+
active,
|
|
25531
|
+
stateValues = {},
|
|
25532
|
+
drawing = false,
|
|
25533
|
+
progress = 1
|
|
25534
|
+
}) {
|
|
25535
|
+
const x0 = node.cx - node.w / 2;
|
|
25536
|
+
const y0 = node.cy - node.h / 2;
|
|
25537
|
+
const data = resolveChartData(node.chartData ?? [], stateValues);
|
|
25538
|
+
const PAD = 24;
|
|
25539
|
+
const \u6642\u70B9\u306E\u7D1A = 12;
|
|
25540
|
+
const \u5024\u306E\u7D1A = 14;
|
|
25541
|
+
const \u540D\u524D\u306E\u4E0A\u9650\u7D1A = 13;
|
|
25542
|
+
const \u540D\u524D\u306E\u4E0B\u9650\u7D1A = 9;
|
|
25543
|
+
const \u8EF8\u304B\u3089\u5024\u307E\u3067 = 10;
|
|
25544
|
+
const \u5024\u304B\u3089\u540D\u524D\u307E\u3067 = 8;
|
|
25545
|
+
const \u524D\u3042\u308A = data.some((d) => d.previous !== void 0);
|
|
25546
|
+
const \u7CFB\u5217\u305F\u3061 = data.map((d, i) => ({
|
|
25547
|
+
\u540D\u524D: d.label ?? "",
|
|
25548
|
+
// 前を持たない件は 0 から立ち上げる。 件を落とすと左右で系列の数が変わり、色の並びが
|
|
25549
|
+
// 対応しなくなる (`chart-stacked-bar` と同じ判断)
|
|
25550
|
+
\u524D: d.previous ?? 0,
|
|
25551
|
+
\u4ECA: d.value,
|
|
25552
|
+
\u8272: \u5370\u306E\u82724(d.tone, i),
|
|
25553
|
+
\u672A\u89E3\u6C7A: d.unresolved === true
|
|
25554
|
+
}));
|
|
25555
|
+
const \u5168\u90E8\u306E\u5024 = \u524D\u3042\u308A ? \u7CFB\u5217\u305F\u3061.flatMap((s) => [s.\u524D, s.\u4ECA]) : \u7CFB\u5217\u305F\u3061.map((s) => s.\u4ECA);
|
|
25556
|
+
const \u6700\u5C0F = \u5168\u90E8\u306E\u5024.length > 0 ? Math.min(...\u5168\u90E8\u306E\u5024) : 0;
|
|
25557
|
+
const \u6700\u5927 = \u5168\u90E8\u306E\u5024.length > 0 ? Math.max(...\u5168\u90E8\u306E\u5024) : 0;
|
|
25558
|
+
const \u5C3A\u306E\u5E45 = \u6700\u5927 - \u6700\u5C0F;
|
|
25559
|
+
const \u4E0A\u7AEF = PAD + (\u524D\u3042\u308A ? \u6642\u70B9\u306E\u7D1A + 12 : 0) + 6;
|
|
25560
|
+
const \u4E0B\u7AEF = Math.max(\u4E0A\u7AEF + 10, node.h - PAD - 6);
|
|
25561
|
+
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;
|
|
25562
|
+
const \u5DE6\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A187(s.\u524D));
|
|
25563
|
+
const \u53F3\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A187(s.\u4ECA));
|
|
25564
|
+
const \u5DE6\u5024\u5E45 = Math.max(0, ...\u5DE6\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A)));
|
|
25565
|
+
const \u53F3\u5024\u5E45 = Math.max(0, ...\u53F3\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A)));
|
|
25566
|
+
const \u540D\u524D\u306B\u4F7F\u3048\u308B = Math.max(
|
|
25567
|
+
0,
|
|
25568
|
+
(node.w - PAD * 2 - \u7DDA\u306E\u6700\u5C0F\u5E45 - (\u5DE6\u5024\u5E45 + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067) - (\u53F3\u5024\u5E45 + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067)) / 2
|
|
25569
|
+
);
|
|
25570
|
+
const \u540D\u524D\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A2(\u7CFB\u5217\u305F\u3061.map((s) => s.\u540D\u524D), \u540D\u524D\u306B\u4F7F\u3048\u308B, \u540D\u524D\u306E\u4E0A\u9650\u7D1A, \u540D\u524D\u306E\u4E0B\u9650\u7D1A);
|
|
25571
|
+
const \u540D\u524D\u5E45 = Math.min(
|
|
25572
|
+
\u540D\u524D\u306B\u4F7F\u3048\u308B,
|
|
25573
|
+
Math.max(0, ...\u7CFB\u5217\u305F\u3061.map((s) => textWidth(s.\u540D\u524D, \u540D\u524D\u306E\u7D1A)))
|
|
25574
|
+
);
|
|
25575
|
+
const \u5DE6\u306E\u4F59\u767D = \u540D\u524D\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067 + \u5DE6\u5024\u5E45 + \u8EF8\u304B\u3089\u5024\u307E\u3067;
|
|
25576
|
+
const \u53F3\u306E\u4F59\u767D = \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u53F3\u5024\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067 + \u540D\u524D\u5E45;
|
|
25577
|
+
const \u5DE6\u8EF8x = \u524D\u3042\u308A ? Math.max(PAD, Math.min(PAD + \u5DE6\u306E\u4F59\u767D, node.w / 2 - \u7DDA\u306E\u6700\u5C0F\u5E45 / 2)) : Math.max(PAD, Math.min(node.w / 2, node.w - PAD));
|
|
25578
|
+
const \u53F3\u8EF8x = \u524D\u3042\u308A ? Math.min(node.w - PAD, Math.max(node.w - PAD - \u53F3\u306E\u4F59\u767D, node.w / 2 + \u7DDA\u306E\u6700\u5C0F\u5E45 / 2)) : \u5DE6\u8EF8x;
|
|
25579
|
+
const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
|
|
25580
|
+
const \u53F3\u3092\u51FA\u3059 = !drawing || \u4F38\u3073 >= 1;
|
|
25581
|
+
return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
|
|
25582
|
+
/* @__PURE__ */ jsx(
|
|
25583
|
+
"rect",
|
|
25584
|
+
{
|
|
25585
|
+
"data-cdl-role": "node-body",
|
|
25586
|
+
x: 0,
|
|
25587
|
+
y: 0,
|
|
25588
|
+
width: node.w,
|
|
25589
|
+
height: node.h,
|
|
25590
|
+
rx: 16,
|
|
25591
|
+
fill: "var(--cdl-node-fill, #ffffff)",
|
|
25592
|
+
stroke: active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)",
|
|
25593
|
+
strokeWidth: active ? 3 : 1.25
|
|
25594
|
+
}
|
|
25595
|
+
),
|
|
25596
|
+
(\u524D\u3042\u308A ? [\u5DE6\u8EF8x, \u53F3\u8EF8x] : [\u5DE6\u8EF8x]).map((x, i) => /* @__PURE__ */ jsx(
|
|
25597
|
+
"line",
|
|
25598
|
+
{
|
|
25599
|
+
"data-cdl-role": "chart-slope-axis",
|
|
25600
|
+
x1: x,
|
|
25601
|
+
y1: \u4E0A\u7AEF - 6,
|
|
25602
|
+
x2: x,
|
|
25603
|
+
y2: \u4E0B\u7AEF + 6,
|
|
25604
|
+
stroke: "var(--cdl-divider, #d4d4d8)",
|
|
25605
|
+
strokeWidth: 1
|
|
25606
|
+
},
|
|
25607
|
+
`axis-${i}`
|
|
25608
|
+
)),
|
|
25609
|
+
\u524D\u3042\u308A && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
25610
|
+
/* @__PURE__ */ jsx(
|
|
25611
|
+
"text",
|
|
25612
|
+
{
|
|
25613
|
+
"data-cdl-role": "chart-slope-period",
|
|
25614
|
+
x: \u5DE6\u8EF8x,
|
|
25615
|
+
y: PAD + \u6642\u70B9\u306E\u7D1A,
|
|
25616
|
+
textAnchor: "middle",
|
|
25617
|
+
fontSize: \u6642\u70B9\u306E\u7D1A,
|
|
25618
|
+
fontWeight: 700,
|
|
25619
|
+
fill: "var(--cdl-text-dim, #5a6270)",
|
|
25620
|
+
children: "\u524D"
|
|
25621
|
+
}
|
|
25622
|
+
),
|
|
25623
|
+
/* @__PURE__ */ jsx(
|
|
25624
|
+
"text",
|
|
25625
|
+
{
|
|
25626
|
+
"data-cdl-role": "chart-slope-period",
|
|
25627
|
+
x: \u53F3\u8EF8x,
|
|
25628
|
+
y: PAD + \u6642\u70B9\u306E\u7D1A,
|
|
25629
|
+
textAnchor: "middle",
|
|
25630
|
+
fontSize: \u6642\u70B9\u306E\u7D1A,
|
|
25631
|
+
fontWeight: 700,
|
|
25632
|
+
fill: "var(--cdl-text-dim, #5a6270)",
|
|
25633
|
+
children: "\u4ECA"
|
|
25634
|
+
}
|
|
25635
|
+
)
|
|
25636
|
+
] }),
|
|
25637
|
+
\u7CFB\u5217\u305F\u3061.map((s, i) => {
|
|
25638
|
+
const \u5DE6y = y\u3092\u53D6\u308B(s.\u524D);
|
|
25639
|
+
const \u53F3y = y\u3092\u53D6\u308B(s.\u4ECA);
|
|
25640
|
+
const \u672A\u89E3\u6C7A = s.\u672A\u89E3\u6C7A ? "true" : void 0;
|
|
25641
|
+
return /* @__PURE__ */ jsxs("g", { children: [
|
|
25642
|
+
\u524D\u3042\u308A && /* @__PURE__ */ jsx(
|
|
25643
|
+
"path",
|
|
25644
|
+
{
|
|
25645
|
+
"data-cdl-role": "chart-slope-line",
|
|
25646
|
+
"data-cdl-unresolved": \u672A\u89E3\u6C7A,
|
|
25647
|
+
d: `M ${\u5DE6\u8EF8x} ${\u5DE6y} L ${\u53F3\u8EF8x} ${\u53F3y}`,
|
|
25648
|
+
fill: "none",
|
|
25649
|
+
stroke: s.\u8272,
|
|
25650
|
+
strokeWidth: 2.5,
|
|
25651
|
+
strokeLinecap: "round",
|
|
25652
|
+
...\u4F38\u3070\u3059dash(drawing, \u4F38\u3073)
|
|
25653
|
+
}
|
|
25654
|
+
),
|
|
25655
|
+
\u524D\u3042\u308A && /* @__PURE__ */ jsx(
|
|
25656
|
+
"circle",
|
|
25657
|
+
{
|
|
25658
|
+
"data-cdl-role": "chart-slope-dot",
|
|
25659
|
+
"data-cdl-unresolved": \u672A\u89E3\u6C7A,
|
|
25660
|
+
cx: \u5DE6\u8EF8x,
|
|
25661
|
+
cy: \u5DE6y,
|
|
25662
|
+
r: 4,
|
|
25663
|
+
fill: s.\u8272
|
|
25664
|
+
}
|
|
25665
|
+
),
|
|
25666
|
+
\u53F3\u3092\u51FA\u3059 && /* @__PURE__ */ jsx(
|
|
25667
|
+
"circle",
|
|
25668
|
+
{
|
|
25669
|
+
"data-cdl-role": "chart-slope-dot",
|
|
25670
|
+
"data-cdl-unresolved": \u672A\u89E3\u6C7A,
|
|
25671
|
+
cx: \u53F3\u8EF8x,
|
|
25672
|
+
cy: \u53F3y,
|
|
25673
|
+
r: 4,
|
|
25674
|
+
fill: s.\u8272
|
|
25675
|
+
}
|
|
25676
|
+
),
|
|
25677
|
+
\u524D\u3042\u308A ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
25678
|
+
/* @__PURE__ */ jsx(
|
|
25679
|
+
"text",
|
|
25680
|
+
{
|
|
25681
|
+
"data-cdl-role": "chart-slope-label",
|
|
25682
|
+
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
25683
|
+
y: \u5DE6y + 5,
|
|
25684
|
+
textAnchor: "end",
|
|
25685
|
+
fontSize: \u5024\u306E\u7D1A,
|
|
25686
|
+
fontWeight: 600,
|
|
25687
|
+
fill: "var(--cdl-text, #1a1f2a)",
|
|
25688
|
+
children: \u5DE6\u306E\u5B57[i]
|
|
25689
|
+
}
|
|
25690
|
+
),
|
|
25691
|
+
/* @__PURE__ */ jsx(
|
|
25692
|
+
"text",
|
|
25693
|
+
{
|
|
25694
|
+
"data-cdl-role": "chart-slope-label",
|
|
25695
|
+
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067 - \u5DE6\u5024\u5E45 - \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
|
|
25696
|
+
y: \u5DE6y + 5,
|
|
25697
|
+
textAnchor: "end",
|
|
25698
|
+
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
25699
|
+
fill: "var(--cdl-text-dim, #5a6270)",
|
|
25700
|
+
children: s.\u540D\u524D
|
|
25701
|
+
}
|
|
25702
|
+
)
|
|
25703
|
+
] }) : /* @__PURE__ */ jsx(
|
|
25704
|
+
"text",
|
|
25705
|
+
{
|
|
25706
|
+
"data-cdl-role": "chart-slope-label",
|
|
25707
|
+
x: \u5DE6\u8EF8x - \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
25708
|
+
y: \u53F3y + 5,
|
|
25709
|
+
textAnchor: "end",
|
|
25710
|
+
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
25711
|
+
fill: "var(--cdl-text-dim, #5a6270)",
|
|
25712
|
+
children: s.\u540D\u524D
|
|
25713
|
+
}
|
|
25714
|
+
),
|
|
25715
|
+
\u53F3\u3092\u51FA\u3059 && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
25716
|
+
/* @__PURE__ */ jsx(
|
|
25717
|
+
"text",
|
|
25718
|
+
{
|
|
25719
|
+
"data-cdl-role": "chart-slope-label",
|
|
25720
|
+
x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067,
|
|
25721
|
+
y: \u53F3y + 5,
|
|
25722
|
+
fontSize: \u5024\u306E\u7D1A,
|
|
25723
|
+
fontWeight: 600,
|
|
25724
|
+
fill: "var(--cdl-text, #1a1f2a)",
|
|
25725
|
+
children: \u53F3\u306E\u5B57[i]
|
|
25726
|
+
}
|
|
25727
|
+
),
|
|
25728
|
+
\u524D\u3042\u308A && /* @__PURE__ */ jsx(
|
|
25729
|
+
"text",
|
|
25730
|
+
{
|
|
25731
|
+
"data-cdl-role": "chart-slope-label",
|
|
25732
|
+
x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u53F3\u5024\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
|
|
25733
|
+
y: \u53F3y + 5,
|
|
25734
|
+
fontSize: \u540D\u524D\u306E\u7D1A,
|
|
25735
|
+
fill: "var(--cdl-text-dim, #5a6270)",
|
|
25736
|
+
children: s.\u540D\u524D
|
|
25737
|
+
}
|
|
25738
|
+
)
|
|
25739
|
+
] })
|
|
25740
|
+
] }, `slope-${i}`);
|
|
25741
|
+
})
|
|
25742
|
+
] });
|
|
25743
|
+
}
|
|
25744
|
+
function \u5370\u306E\u82724(tone, idx) {
|
|
25745
|
+
if (tone) return TONE[tone];
|
|
25746
|
+
return chartSeriesColor(idx);
|
|
25747
|
+
}
|
|
25748
|
+
function \u53CE\u3081\u308B\u7D1A2(\u540D\u524D\u305F\u3061, \u5E45, \u4E0A\u9650, \u4E0B\u9650) {
|
|
25749
|
+
if (\u540D\u524D\u305F\u3061.length === 0) return \u4E0A\u9650;
|
|
25750
|
+
let \u7D1A = \u4E0A\u9650;
|
|
25751
|
+
while (\u7D1A > \u4E0B\u9650 && Math.max(...\u540D\u524D\u305F\u3061.map((n) => textWidth(n, \u7D1A))) > \u5E45) \u7D1A -= 1;
|
|
25752
|
+
return \u7D1A;
|
|
25753
|
+
}
|
|
25515
25754
|
function ChartBarNode({
|
|
25516
25755
|
node,
|
|
25517
25756
|
active,
|
|
@@ -30191,6 +30430,17 @@ function CdlNodeView({
|
|
|
30191
30430
|
return /* @__PURE__ */ jsx(ChartGaugeNode, { node: resolvedNode, active, stateValues });
|
|
30192
30431
|
case "chart-stacked-bar":
|
|
30193
30432
|
return /* @__PURE__ */ jsx(ChartStackedBarNode, { node: resolvedNode, active, stateValues });
|
|
30433
|
+
case "chart-slope":
|
|
30434
|
+
return /* @__PURE__ */ jsx(
|
|
30435
|
+
ChartSlopeNode,
|
|
30436
|
+
{
|
|
30437
|
+
node: resolvedNode,
|
|
30438
|
+
active,
|
|
30439
|
+
stateValues,
|
|
30440
|
+
drawing,
|
|
30441
|
+
progress
|
|
30442
|
+
}
|
|
30443
|
+
);
|
|
30194
30444
|
case "chart-waffle":
|
|
30195
30445
|
return /* @__PURE__ */ jsx(ChartWaffleNode, { node: resolvedNode, active, stateValues });
|
|
30196
30446
|
case "chart-stat":
|
|
@@ -31972,7 +32222,8 @@ function chart(preset) {
|
|
|
31972
32222
|
radial: "chart-radial",
|
|
31973
32223
|
stat: "chart-stat",
|
|
31974
32224
|
waffle: "chart-waffle",
|
|
31975
|
-
"stacked-bar": "chart-stacked-bar"
|
|
32225
|
+
"stacked-bar": "chart-stacked-bar",
|
|
32226
|
+
slope: "chart-slope"
|
|
31976
32227
|
};
|
|
31977
32228
|
const api = {
|
|
31978
32229
|
datum(d) {
|