@sentropic/design-system-vue 0.23.0 → 0.25.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/ChordDiagram.d.ts +73 -0
- package/dist/ChordDiagram.d.ts.map +1 -0
- package/dist/ChordDiagram.js +212 -0
- package/dist/ChordDiagram.js.map +1 -0
- package/dist/PackedBubblesChart.d.ts +63 -0
- package/dist/PackedBubblesChart.d.ts.map +1 -0
- package/dist/PackedBubblesChart.js +172 -0
- package/dist/PackedBubblesChart.js.map +1 -0
- package/dist/RoseChart.d.ts +63 -0
- package/dist/RoseChart.d.ts.map +1 -0
- package/dist/RoseChart.js +148 -0
- package/dist/RoseChart.js.map +1 -0
- package/dist/ViolinChart.d.ts +83 -0
- package/dist/ViolinChart.d.ts.map +1 -0
- package/dist/ViolinChart.js +203 -0
- package/dist/ViolinChart.js.map +1 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/dist/styles.css +309 -0
- package/package.json +1 -1
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
export type ChordDiagramTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
|
|
2
|
+
export type ChordDiagramFlow = {
|
|
3
|
+
from: string;
|
|
4
|
+
to: string;
|
|
5
|
+
value: number;
|
|
6
|
+
};
|
|
7
|
+
export type ChordDiagramProps = {
|
|
8
|
+
data: ChordDiagramFlow[];
|
|
9
|
+
labels?: Record<string, string>;
|
|
10
|
+
width?: number;
|
|
11
|
+
height?: number;
|
|
12
|
+
label: string;
|
|
13
|
+
class?: string;
|
|
14
|
+
};
|
|
15
|
+
export declare const ChordDiagram: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
16
|
+
data: {
|
|
17
|
+
type: () => ChordDiagramFlow[];
|
|
18
|
+
required: true;
|
|
19
|
+
};
|
|
20
|
+
labels: {
|
|
21
|
+
type: () => Record<string, string>;
|
|
22
|
+
default: undefined;
|
|
23
|
+
};
|
|
24
|
+
width: {
|
|
25
|
+
type: NumberConstructor;
|
|
26
|
+
default: number;
|
|
27
|
+
};
|
|
28
|
+
height: {
|
|
29
|
+
type: NumberConstructor;
|
|
30
|
+
default: number;
|
|
31
|
+
};
|
|
32
|
+
label: {
|
|
33
|
+
type: StringConstructor;
|
|
34
|
+
required: true;
|
|
35
|
+
};
|
|
36
|
+
class: {
|
|
37
|
+
type: StringConstructor;
|
|
38
|
+
default: undefined;
|
|
39
|
+
};
|
|
40
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
41
|
+
[key: string]: any;
|
|
42
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
43
|
+
data: {
|
|
44
|
+
type: () => ChordDiagramFlow[];
|
|
45
|
+
required: true;
|
|
46
|
+
};
|
|
47
|
+
labels: {
|
|
48
|
+
type: () => Record<string, string>;
|
|
49
|
+
default: undefined;
|
|
50
|
+
};
|
|
51
|
+
width: {
|
|
52
|
+
type: NumberConstructor;
|
|
53
|
+
default: number;
|
|
54
|
+
};
|
|
55
|
+
height: {
|
|
56
|
+
type: NumberConstructor;
|
|
57
|
+
default: number;
|
|
58
|
+
};
|
|
59
|
+
label: {
|
|
60
|
+
type: StringConstructor;
|
|
61
|
+
required: true;
|
|
62
|
+
};
|
|
63
|
+
class: {
|
|
64
|
+
type: StringConstructor;
|
|
65
|
+
default: undefined;
|
|
66
|
+
};
|
|
67
|
+
}>> & Readonly<{}>, {
|
|
68
|
+
class: string;
|
|
69
|
+
width: number;
|
|
70
|
+
height: number;
|
|
71
|
+
labels: Record<string, string>;
|
|
72
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
73
|
+
//# sourceMappingURL=ChordDiagram.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChordDiagram.d.ts","sourceRoot":"","sources":["../src/ChordDiagram.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,gBAAgB,GACxB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAwDF,eAAO,MAAM,YAAY;;cAGE,MAAM,gBAAgB,EAAE;;;;cACrB,MAAM,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;cAD/B,MAAM,gBAAgB,EAAE;;;;cACrB,MAAM,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;4EAyOxD,CAAC"}
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
import { defineComponent, h, ref } from "vue";
|
|
2
|
+
import { classNames } from "./classNames.js";
|
|
3
|
+
import { chartDataList } from "./chartScale.js";
|
|
4
|
+
import { contrastTextForTone } from "./chartContrast.js";
|
|
5
|
+
const TONES = [
|
|
6
|
+
"category1",
|
|
7
|
+
"category2",
|
|
8
|
+
"category3",
|
|
9
|
+
"category4",
|
|
10
|
+
"category5",
|
|
11
|
+
"category6",
|
|
12
|
+
"category7",
|
|
13
|
+
"category8",
|
|
14
|
+
];
|
|
15
|
+
const GAP = 0.04;
|
|
16
|
+
const ARC_WIDTH = 14;
|
|
17
|
+
function magnitude(value) {
|
|
18
|
+
return Number.isFinite(value) && value > 0 ? value : 0;
|
|
19
|
+
}
|
|
20
|
+
function polar(cx, cy, radius, angle) {
|
|
21
|
+
return [cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)];
|
|
22
|
+
}
|
|
23
|
+
function arcPath(cx, cy, inner, outer, start, end) {
|
|
24
|
+
const large = end - start > Math.PI ? 1 : 0;
|
|
25
|
+
const [x0o, y0o] = polar(cx, cy, outer, start);
|
|
26
|
+
const [x1o, y1o] = polar(cx, cy, outer, end);
|
|
27
|
+
const [x1i, y1i] = polar(cx, cy, inner, end);
|
|
28
|
+
const [x0i, y0i] = polar(cx, cy, inner, start);
|
|
29
|
+
return `M ${x0o} ${y0o} A ${outer} ${outer} 0 ${large} 1 ${x1o} ${y1o} L ${x1i} ${y1i} A ${inner} ${inner} 0 ${large} 0 ${x0i} ${y0i} Z`;
|
|
30
|
+
}
|
|
31
|
+
export const ChordDiagram = defineComponent({
|
|
32
|
+
name: "ChordDiagram",
|
|
33
|
+
props: {
|
|
34
|
+
data: { type: Array, required: true },
|
|
35
|
+
labels: { type: Object, default: undefined },
|
|
36
|
+
width: { type: Number, default: 360 },
|
|
37
|
+
height: { type: Number, default: 360 },
|
|
38
|
+
label: { type: String, required: true },
|
|
39
|
+
class: { type: String, default: undefined },
|
|
40
|
+
},
|
|
41
|
+
setup(props, { attrs }) {
|
|
42
|
+
const hoveredFlowIndex = ref(null);
|
|
43
|
+
function handleLeave() {
|
|
44
|
+
hoveredFlowIndex.value = null;
|
|
45
|
+
}
|
|
46
|
+
function handleVisualPointerMove(event) {
|
|
47
|
+
const target = event.target;
|
|
48
|
+
if (!(target instanceof Element)) {
|
|
49
|
+
hoveredFlowIndex.value = null;
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
const index = Number(target.getAttribute("data-flow-index"));
|
|
53
|
+
hoveredFlowIndex.value = Number.isInteger(index) ? index : null;
|
|
54
|
+
}
|
|
55
|
+
return () => {
|
|
56
|
+
const data = props.data;
|
|
57
|
+
const width = props.width ?? 360;
|
|
58
|
+
const height = props.height ?? 360;
|
|
59
|
+
const label = props.label;
|
|
60
|
+
const displayLabel = (id) => props.labels?.[id] ?? id;
|
|
61
|
+
const cx = width / 2;
|
|
62
|
+
const cy = height / 2;
|
|
63
|
+
const outer = Math.max(Math.min(width, height) / 2 - 6, 1);
|
|
64
|
+
const inner = Math.max(outer - ARC_WIDTH, 1);
|
|
65
|
+
const ribbonRadius = Math.max(inner - 2, 0);
|
|
66
|
+
const flows = data
|
|
67
|
+
.map((flow, index) => ({ flow, index, value: magnitude(flow.value) }))
|
|
68
|
+
.filter((entry) => entry.value > 0);
|
|
69
|
+
const order = [];
|
|
70
|
+
const total = new Map();
|
|
71
|
+
for (const { flow, value } of flows) {
|
|
72
|
+
for (const id of [flow.from, flow.to]) {
|
|
73
|
+
if (!total.has(id)) {
|
|
74
|
+
total.set(id, 0);
|
|
75
|
+
order.push(id);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
total.set(flow.from, (total.get(flow.from) ?? 0) + value);
|
|
79
|
+
total.set(flow.to, (total.get(flow.to) ?? 0) + value);
|
|
80
|
+
}
|
|
81
|
+
const grandTotal = order.reduce((sum, id) => sum + (total.get(id) ?? 0), 0);
|
|
82
|
+
const arcs = [];
|
|
83
|
+
const ribbons = [];
|
|
84
|
+
if (order.length > 0 && grandTotal > 0) {
|
|
85
|
+
const totalGap = GAP * order.length;
|
|
86
|
+
const usable = Math.max(Math.PI * 2 - totalGap, 0.0001);
|
|
87
|
+
const arcMap = new Map();
|
|
88
|
+
let angle = -Math.PI / 2;
|
|
89
|
+
order.forEach((id, index) => {
|
|
90
|
+
const span = (usable * (total.get(id) ?? 0)) / grandTotal;
|
|
91
|
+
const start = angle + GAP / 2;
|
|
92
|
+
const end = start + span;
|
|
93
|
+
angle = end + GAP / 2;
|
|
94
|
+
const tone = TONES[index % TONES.length];
|
|
95
|
+
const mid = (start + end) / 2;
|
|
96
|
+
arcMap.set(id, { tone, cursor: start });
|
|
97
|
+
const labelRadius = (inner + outer) / 2;
|
|
98
|
+
const [lx, ly] = polar(cx, cy, labelRadius, mid);
|
|
99
|
+
arcs.push({
|
|
100
|
+
id,
|
|
101
|
+
tone,
|
|
102
|
+
value: total.get(id) ?? 0,
|
|
103
|
+
span,
|
|
104
|
+
path: arcPath(cx, cy, inner, outer, start, end),
|
|
105
|
+
labelX: lx,
|
|
106
|
+
labelY: ly,
|
|
107
|
+
textColor: contrastTextForTone(tone),
|
|
108
|
+
});
|
|
109
|
+
});
|
|
110
|
+
const maxValue = Math.max(1, ...flows.map((entry) => entry.value));
|
|
111
|
+
flows.forEach(({ flow, value, index }) => {
|
|
112
|
+
const source = arcMap.get(flow.from);
|
|
113
|
+
const target = arcMap.get(flow.to);
|
|
114
|
+
const sourceSpan = (usable * value) / grandTotal;
|
|
115
|
+
const targetSpan = (usable * value) / grandTotal;
|
|
116
|
+
const s0 = source.cursor;
|
|
117
|
+
const s1 = source.cursor + sourceSpan;
|
|
118
|
+
source.cursor = s1;
|
|
119
|
+
const t0 = target.cursor;
|
|
120
|
+
const t1 = target.cursor + targetSpan;
|
|
121
|
+
target.cursor = t1;
|
|
122
|
+
const [ps0x, ps0y] = polar(cx, cy, ribbonRadius, s0);
|
|
123
|
+
const [ps1x, ps1y] = polar(cx, cy, ribbonRadius, s1);
|
|
124
|
+
const [pt0x, pt0y] = polar(cx, cy, ribbonRadius, t0);
|
|
125
|
+
const [pt1x, pt1y] = polar(cx, cy, ribbonRadius, t1);
|
|
126
|
+
const path = `M ${ps0x} ${ps0y} ` +
|
|
127
|
+
`Q ${cx} ${cy} ${pt1x} ${pt1y} ` +
|
|
128
|
+
`A ${ribbonRadius} ${ribbonRadius} 0 0 1 ${pt0x} ${pt0y} ` +
|
|
129
|
+
`Q ${cx} ${cy} ${ps1x} ${ps1y} ` +
|
|
130
|
+
`A ${ribbonRadius} ${ribbonRadius} 0 0 0 ${ps0x} ${ps0y} Z`;
|
|
131
|
+
ribbons.push({
|
|
132
|
+
index,
|
|
133
|
+
from: flow.from,
|
|
134
|
+
to: flow.to,
|
|
135
|
+
value,
|
|
136
|
+
tone: source.tone,
|
|
137
|
+
strokeWidth: Math.max(1, (value / maxValue) * 4),
|
|
138
|
+
path,
|
|
139
|
+
midX: cx,
|
|
140
|
+
midY: cy,
|
|
141
|
+
});
|
|
142
|
+
});
|
|
143
|
+
}
|
|
144
|
+
const ribbonNodes = ribbons.map((ribbon) => h("path", {
|
|
145
|
+
key: ribbon.index,
|
|
146
|
+
class: classNames("st-chordDiagram__ribbon", `st-chordDiagram__ribbon--${ribbon.tone}`, hoveredFlowIndex.value !== null && hoveredFlowIndex.value !== ribbon.index
|
|
147
|
+
? "st-chordDiagram__ribbon--dim"
|
|
148
|
+
: undefined),
|
|
149
|
+
d: ribbon.path,
|
|
150
|
+
"stroke-width": ribbon.strokeWidth,
|
|
151
|
+
"data-flow-index": ribbon.index,
|
|
152
|
+
}));
|
|
153
|
+
const arcNodes = [];
|
|
154
|
+
arcs.forEach((arc) => {
|
|
155
|
+
arcNodes.push(h("path", {
|
|
156
|
+
key: arc.id,
|
|
157
|
+
class: classNames("st-chordDiagram__arc", `st-chordDiagram__arc--${arc.tone}`),
|
|
158
|
+
d: arc.path,
|
|
159
|
+
}));
|
|
160
|
+
if (arc.span > 0.34) {
|
|
161
|
+
arcNodes.push(h("text", {
|
|
162
|
+
key: `lbl${arc.id}`,
|
|
163
|
+
class: "st-chordDiagram__arcLabel",
|
|
164
|
+
x: arc.labelX,
|
|
165
|
+
y: arc.labelY,
|
|
166
|
+
"text-anchor": "middle",
|
|
167
|
+
"dominant-baseline": "middle",
|
|
168
|
+
fill: arc.textColor,
|
|
169
|
+
}, displayLabel(arc.id)));
|
|
170
|
+
}
|
|
171
|
+
});
|
|
172
|
+
const dataValueItems = data
|
|
173
|
+
.filter((flow) => magnitude(flow.value) > 0)
|
|
174
|
+
.map((flow) => `${displayLabel(flow.from)} -> ${displayLabel(flow.to)}: ${flow.value}`);
|
|
175
|
+
const hovered = hoveredFlowIndex.value !== null ? ribbons.find((r) => r.index === hoveredFlowIndex.value) : undefined;
|
|
176
|
+
const children = [
|
|
177
|
+
h("div", {
|
|
178
|
+
class: "st-chordDiagram__visual",
|
|
179
|
+
role: "img",
|
|
180
|
+
"aria-label": label,
|
|
181
|
+
onPointermove: handleVisualPointerMove,
|
|
182
|
+
onPointerleave: handleLeave,
|
|
183
|
+
}, [
|
|
184
|
+
h("svg", {
|
|
185
|
+
viewBox: `0 0 ${width} ${height}`,
|
|
186
|
+
preserveAspectRatio: "xMidYMid meet",
|
|
187
|
+
width: "100%",
|
|
188
|
+
height: "100%",
|
|
189
|
+
focusable: "false",
|
|
190
|
+
"aria-hidden": "true",
|
|
191
|
+
}, [
|
|
192
|
+
h("g", { class: "st-chordDiagram__ribbons" }, ribbonNodes),
|
|
193
|
+
h("g", { class: "st-chordDiagram__arcs" }, arcNodes),
|
|
194
|
+
]),
|
|
195
|
+
]),
|
|
196
|
+
chartDataList(label, dataValueItems),
|
|
197
|
+
];
|
|
198
|
+
if (hovered) {
|
|
199
|
+
children.push(h("div", {
|
|
200
|
+
class: "st-chordDiagram__tooltip",
|
|
201
|
+
role: "presentation",
|
|
202
|
+
style: `left: ${(hovered.midX / width) * 100}%; top: ${(hovered.midY / height) * 100}%`,
|
|
203
|
+
}, [
|
|
204
|
+
h("span", { class: "st-chordDiagram__tooltipLabel" }, `${displayLabel(hovered.from)} -> ${displayLabel(hovered.to)}`),
|
|
205
|
+
h("span", { class: "st-chordDiagram__tooltipValue" }, String(hovered.value)),
|
|
206
|
+
]));
|
|
207
|
+
}
|
|
208
|
+
return h("div", { ...attrs, class: classNames("st-chordDiagram", props.class) }, children);
|
|
209
|
+
};
|
|
210
|
+
},
|
|
211
|
+
});
|
|
212
|
+
//# sourceMappingURL=ChordDiagram.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChordDiagram.js","sourceRoot":"","sources":["../src/ChordDiagram.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
export type PackedBubblesChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
|
|
2
|
+
export type PackedBubblesChartDatum = {
|
|
3
|
+
label: string;
|
|
4
|
+
value: number;
|
|
5
|
+
tone?: PackedBubblesChartTone;
|
|
6
|
+
};
|
|
7
|
+
export type PackedBubblesChartProps = {
|
|
8
|
+
data: PackedBubblesChartDatum[];
|
|
9
|
+
width?: number;
|
|
10
|
+
height?: number;
|
|
11
|
+
label: string;
|
|
12
|
+
class?: string;
|
|
13
|
+
};
|
|
14
|
+
export declare const PackedBubblesChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
15
|
+
data: {
|
|
16
|
+
type: () => PackedBubblesChartDatum[];
|
|
17
|
+
required: true;
|
|
18
|
+
};
|
|
19
|
+
width: {
|
|
20
|
+
type: NumberConstructor;
|
|
21
|
+
default: number;
|
|
22
|
+
};
|
|
23
|
+
height: {
|
|
24
|
+
type: NumberConstructor;
|
|
25
|
+
default: number;
|
|
26
|
+
};
|
|
27
|
+
label: {
|
|
28
|
+
type: StringConstructor;
|
|
29
|
+
required: true;
|
|
30
|
+
};
|
|
31
|
+
class: {
|
|
32
|
+
type: StringConstructor;
|
|
33
|
+
default: undefined;
|
|
34
|
+
};
|
|
35
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
36
|
+
[key: string]: any;
|
|
37
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
38
|
+
data: {
|
|
39
|
+
type: () => PackedBubblesChartDatum[];
|
|
40
|
+
required: true;
|
|
41
|
+
};
|
|
42
|
+
width: {
|
|
43
|
+
type: NumberConstructor;
|
|
44
|
+
default: number;
|
|
45
|
+
};
|
|
46
|
+
height: {
|
|
47
|
+
type: NumberConstructor;
|
|
48
|
+
default: number;
|
|
49
|
+
};
|
|
50
|
+
label: {
|
|
51
|
+
type: StringConstructor;
|
|
52
|
+
required: true;
|
|
53
|
+
};
|
|
54
|
+
class: {
|
|
55
|
+
type: StringConstructor;
|
|
56
|
+
default: undefined;
|
|
57
|
+
};
|
|
58
|
+
}>> & Readonly<{}>, {
|
|
59
|
+
class: string;
|
|
60
|
+
width: number;
|
|
61
|
+
height: number;
|
|
62
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
63
|
+
//# sourceMappingURL=PackedBubblesChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PackedBubblesChart.d.ts","sourceRoot":"","sources":["../src/PackedBubblesChart.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,sBAAsB,GAC9B,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,sBAAsB,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,uBAAuB,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+BF,eAAO,MAAM,kBAAkB;;cAGJ,MAAM,uBAAuB,EAAE;;;;;;;;;;;;;;;;;;;;;;;cAA/B,MAAM,uBAAuB,EAAE;;;;;;;;;;;;;;;;;;;;;;;4EAgMxD,CAAC"}
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
import { defineComponent, h, ref } from "vue";
|
|
2
|
+
import { classNames } from "./classNames.js";
|
|
3
|
+
import { chartDataList } from "./chartScale.js";
|
|
4
|
+
import { contrastTextForTone } from "./chartContrast.js";
|
|
5
|
+
const TONES = [
|
|
6
|
+
"category1",
|
|
7
|
+
"category2",
|
|
8
|
+
"category3",
|
|
9
|
+
"category4",
|
|
10
|
+
"category5",
|
|
11
|
+
"category6",
|
|
12
|
+
"category7",
|
|
13
|
+
"category8",
|
|
14
|
+
];
|
|
15
|
+
const PADDING = 2;
|
|
16
|
+
const LABEL_MIN_RADIUS = 18;
|
|
17
|
+
function magnitude(value) {
|
|
18
|
+
return Number.isFinite(value) && value > 0 ? value : 0;
|
|
19
|
+
}
|
|
20
|
+
export const PackedBubblesChart = defineComponent({
|
|
21
|
+
name: "PackedBubblesChart",
|
|
22
|
+
props: {
|
|
23
|
+
data: { type: Array, required: true },
|
|
24
|
+
width: { type: Number, default: 360 },
|
|
25
|
+
height: { type: Number, default: 360 },
|
|
26
|
+
label: { type: String, required: true },
|
|
27
|
+
class: { type: String, default: undefined },
|
|
28
|
+
},
|
|
29
|
+
setup(props, { attrs }) {
|
|
30
|
+
const hoveredIndex = ref(null);
|
|
31
|
+
function handleLeave() {
|
|
32
|
+
hoveredIndex.value = null;
|
|
33
|
+
}
|
|
34
|
+
function handleVisualPointerMove(event) {
|
|
35
|
+
const target = event.target;
|
|
36
|
+
if (!(target instanceof Element)) {
|
|
37
|
+
hoveredIndex.value = null;
|
|
38
|
+
return;
|
|
39
|
+
}
|
|
40
|
+
const index = Number(target.getAttribute("data-chart-index"));
|
|
41
|
+
hoveredIndex.value = Number.isInteger(index) ? index : null;
|
|
42
|
+
}
|
|
43
|
+
return () => {
|
|
44
|
+
const data = props.data;
|
|
45
|
+
const width = props.width ?? 360;
|
|
46
|
+
const height = props.height ?? 360;
|
|
47
|
+
const label = props.label;
|
|
48
|
+
const cx = width / 2;
|
|
49
|
+
const cy = height / 2;
|
|
50
|
+
const valid = data
|
|
51
|
+
.map((datum, index) => ({ datum, index, value: magnitude(datum.value) }))
|
|
52
|
+
.filter((entry) => entry.value > 0)
|
|
53
|
+
.sort((a, b) => b.value - a.value);
|
|
54
|
+
const bubbles = [];
|
|
55
|
+
if (valid.length > 0) {
|
|
56
|
+
const maxValue = Math.max(...valid.map((entry) => entry.value));
|
|
57
|
+
const limit = Math.max(Math.min(width, height) / 2 - 4, 1);
|
|
58
|
+
const baseMax = Math.sqrt(maxValue);
|
|
59
|
+
const targetMax = Math.min(limit * 0.42, limit);
|
|
60
|
+
const radiusOf = (value) => Math.max((Math.sqrt(value) / baseMax) * targetMax, 3);
|
|
61
|
+
const placed = [];
|
|
62
|
+
const collides = (x, y, r) => {
|
|
63
|
+
for (const p of placed) {
|
|
64
|
+
const dx = x - p.cx;
|
|
65
|
+
const dy = y - p.cy;
|
|
66
|
+
const minDist = r + p.r + PADDING;
|
|
67
|
+
if (dx * dx + dy * dy < minDist * minDist)
|
|
68
|
+
return true;
|
|
69
|
+
}
|
|
70
|
+
return false;
|
|
71
|
+
};
|
|
72
|
+
valid.forEach((entry, order) => {
|
|
73
|
+
const r = radiusOf(entry.value);
|
|
74
|
+
let x = cx;
|
|
75
|
+
let y = cy;
|
|
76
|
+
if (placed.length > 0) {
|
|
77
|
+
const step = Math.max(r * 0.5, 2);
|
|
78
|
+
let angle = order * 2.399963;
|
|
79
|
+
let radius = step;
|
|
80
|
+
let found = false;
|
|
81
|
+
for (let i = 0; i < 4000; i += 1) {
|
|
82
|
+
x = cx + radius * Math.cos(angle);
|
|
83
|
+
y = cy + radius * Math.sin(angle);
|
|
84
|
+
if (!collides(x, y, r)) {
|
|
85
|
+
found = true;
|
|
86
|
+
break;
|
|
87
|
+
}
|
|
88
|
+
angle += 0.5;
|
|
89
|
+
radius += step * 0.06;
|
|
90
|
+
}
|
|
91
|
+
if (!found) {
|
|
92
|
+
x = cx + radius * Math.cos(angle);
|
|
93
|
+
y = cy + radius * Math.sin(angle);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
placed.push({ cx: x, cy: y, r });
|
|
97
|
+
const tone = entry.datum.tone ?? TONES[entry.index % TONES.length];
|
|
98
|
+
bubbles.push({
|
|
99
|
+
label: entry.datum.label,
|
|
100
|
+
value: entry.value,
|
|
101
|
+
tone,
|
|
102
|
+
textColor: contrastTextForTone(tone),
|
|
103
|
+
cx: x,
|
|
104
|
+
cy: y,
|
|
105
|
+
r,
|
|
106
|
+
index: entry.index,
|
|
107
|
+
});
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
const bubbleNodes = bubbles.map((bubble) => {
|
|
111
|
+
const inner = [
|
|
112
|
+
h("circle", {
|
|
113
|
+
class: classNames("st-packedBubblesChart__circle", `st-packedBubblesChart__circle--${bubble.tone}`, hoveredIndex.value !== null && hoveredIndex.value !== bubble.index
|
|
114
|
+
? "st-packedBubblesChart__circle--dim"
|
|
115
|
+
: undefined),
|
|
116
|
+
cx: bubble.cx,
|
|
117
|
+
cy: bubble.cy,
|
|
118
|
+
r: bubble.r,
|
|
119
|
+
"data-chart-index": bubble.index,
|
|
120
|
+
}),
|
|
121
|
+
];
|
|
122
|
+
if (bubble.r >= LABEL_MIN_RADIUS) {
|
|
123
|
+
inner.push(h("text", {
|
|
124
|
+
class: "st-packedBubblesChart__label",
|
|
125
|
+
x: bubble.cx,
|
|
126
|
+
y: bubble.cy,
|
|
127
|
+
"text-anchor": "middle",
|
|
128
|
+
"dominant-baseline": "middle",
|
|
129
|
+
fill: bubble.textColor,
|
|
130
|
+
"data-chart-index": bubble.index,
|
|
131
|
+
}, bubble.label));
|
|
132
|
+
}
|
|
133
|
+
return h("g", { key: bubble.index, class: "st-packedBubblesChart__bubble", "data-chart-index": bubble.index }, inner);
|
|
134
|
+
});
|
|
135
|
+
const dataValueItems = data
|
|
136
|
+
.filter((datum) => magnitude(datum.value) > 0)
|
|
137
|
+
.map((datum) => `${datum.label}: ${datum.value}`);
|
|
138
|
+
const hovered = hoveredIndex.value !== null ? bubbles.find((b) => b.index === hoveredIndex.value) : undefined;
|
|
139
|
+
const children = [
|
|
140
|
+
h("div", {
|
|
141
|
+
class: "st-packedBubblesChart__visual",
|
|
142
|
+
role: "img",
|
|
143
|
+
"aria-label": label,
|
|
144
|
+
onPointermove: handleVisualPointerMove,
|
|
145
|
+
onPointerleave: handleLeave,
|
|
146
|
+
}, [
|
|
147
|
+
h("svg", {
|
|
148
|
+
viewBox: `0 0 ${width} ${height}`,
|
|
149
|
+
preserveAspectRatio: "xMidYMid meet",
|
|
150
|
+
width: "100%",
|
|
151
|
+
height: "100%",
|
|
152
|
+
focusable: "false",
|
|
153
|
+
"aria-hidden": "true",
|
|
154
|
+
}, bubbleNodes),
|
|
155
|
+
]),
|
|
156
|
+
chartDataList(label, dataValueItems),
|
|
157
|
+
];
|
|
158
|
+
if (hovered) {
|
|
159
|
+
children.push(h("div", {
|
|
160
|
+
class: "st-packedBubblesChart__tooltip",
|
|
161
|
+
role: "presentation",
|
|
162
|
+
style: `left: ${(hovered.cx / width) * 100}%; top: ${((hovered.cy - hovered.r) / height) * 100}%`,
|
|
163
|
+
}, [
|
|
164
|
+
h("span", { class: "st-packedBubblesChart__tooltipLabel" }, hovered.label),
|
|
165
|
+
h("span", { class: "st-packedBubblesChart__tooltipValue" }, String(hovered.value)),
|
|
166
|
+
]));
|
|
167
|
+
}
|
|
168
|
+
return h("div", { ...attrs, class: classNames("st-packedBubblesChart", props.class) }, children);
|
|
169
|
+
};
|
|
170
|
+
},
|
|
171
|
+
});
|
|
172
|
+
//# sourceMappingURL=PackedBubblesChart.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PackedBubblesChart.js","sourceRoot":"","sources":["../src/PackedBubblesChart.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
export type RoseChartTone = "category1" | "category2" | "category3" | "category4" | "category5" | "category6" | "category7" | "category8";
|
|
2
|
+
export type RoseChartDatum = {
|
|
3
|
+
label: string;
|
|
4
|
+
value: number;
|
|
5
|
+
tone?: RoseChartTone;
|
|
6
|
+
};
|
|
7
|
+
export type RoseChartProps = {
|
|
8
|
+
data: RoseChartDatum[];
|
|
9
|
+
width?: number;
|
|
10
|
+
height?: number;
|
|
11
|
+
label: string;
|
|
12
|
+
class?: string;
|
|
13
|
+
};
|
|
14
|
+
export declare const RoseChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
15
|
+
data: {
|
|
16
|
+
type: () => RoseChartDatum[];
|
|
17
|
+
required: true;
|
|
18
|
+
};
|
|
19
|
+
width: {
|
|
20
|
+
type: NumberConstructor;
|
|
21
|
+
default: number;
|
|
22
|
+
};
|
|
23
|
+
height: {
|
|
24
|
+
type: NumberConstructor;
|
|
25
|
+
default: number;
|
|
26
|
+
};
|
|
27
|
+
label: {
|
|
28
|
+
type: StringConstructor;
|
|
29
|
+
required: true;
|
|
30
|
+
};
|
|
31
|
+
class: {
|
|
32
|
+
type: StringConstructor;
|
|
33
|
+
default: undefined;
|
|
34
|
+
};
|
|
35
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
36
|
+
[key: string]: any;
|
|
37
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
38
|
+
data: {
|
|
39
|
+
type: () => RoseChartDatum[];
|
|
40
|
+
required: true;
|
|
41
|
+
};
|
|
42
|
+
width: {
|
|
43
|
+
type: NumberConstructor;
|
|
44
|
+
default: number;
|
|
45
|
+
};
|
|
46
|
+
height: {
|
|
47
|
+
type: NumberConstructor;
|
|
48
|
+
default: number;
|
|
49
|
+
};
|
|
50
|
+
label: {
|
|
51
|
+
type: StringConstructor;
|
|
52
|
+
required: true;
|
|
53
|
+
};
|
|
54
|
+
class: {
|
|
55
|
+
type: StringConstructor;
|
|
56
|
+
default: undefined;
|
|
57
|
+
};
|
|
58
|
+
}>> & Readonly<{}>, {
|
|
59
|
+
class: string;
|
|
60
|
+
width: number;
|
|
61
|
+
height: number;
|
|
62
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
63
|
+
//# sourceMappingURL=RoseChart.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RoseChart.d.ts","sourceRoot":"","sources":["../src/RoseChart.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,aAAa,GACrB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAmCF,eAAO,MAAM,SAAS;;cAGK,MAAM,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;cAAtB,MAAM,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;4EA6I/C,CAAC"}
|