@divami-artefacts/ai-design-system 1.0.48 → 1.0.50
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/canvas/canvasUtils.d.ts +32 -0
- package/dist/components/contractsByAreaChart/index.d.ts +2 -0
- package/dist/components/contractsByAreaChart/types.d.ts +1 -0
- package/dist/components/horizontalBarChart/HorizontalBarChart.d.ts +2 -0
- package/dist/components/horizontalBarChart/index.d.ts +2 -0
- package/dist/components/horizontalBarChart/types.d.ts +11 -0
- package/dist/components/progressRaceChart/ProgressRaceChart.d.ts +1 -1
- package/dist/components/progressRaceChart/types.d.ts +1 -0
- package/dist/components/proportionalBandChart/ProportionalBandChart.d.ts +1 -1
- package/dist/components/proportionalBandChart/types.d.ts +1 -0
- package/dist/components/radialFanTreeChart/RadialFanTreeChart.d.ts +1 -1
- package/dist/components/radialFanTreeChart/types.d.ts +1 -0
- package/dist/components/semiCircularGaugeChart/SemiCircularGaugeChart.d.ts +1 -1
- package/dist/components/semiCircularGaugeChart/types.d.ts +1 -0
- package/dist/components/trend/Trend.d.ts +1 -1
- package/dist/components/trend/types.d.ts +1 -0
- package/dist/components/visualizationRenderer/VisualizationRenderer.d.ts +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1135 -1023
- package/dist/types/index.d.ts +11 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -22,36 +22,68 @@ var u = {
|
|
|
22
22
|
green: "#5DA537",
|
|
23
23
|
purple: "#818FF8",
|
|
24
24
|
amber: "#EEBF3B",
|
|
25
|
+
teal: "#69DFE9",
|
|
26
|
+
tealDark: "#00818F",
|
|
25
27
|
t1: "#F7F9FA",
|
|
26
28
|
t2: "#B3B5B6",
|
|
27
29
|
t3: "#94979C",
|
|
28
30
|
t4: "#334155"
|
|
29
|
-
}, d =
|
|
31
|
+
}, d = {
|
|
32
|
+
teal: ["#00818F", "#69DFE9"],
|
|
33
|
+
violet: ["#5B3CB1", "#C8B6F3"],
|
|
34
|
+
mint: ["#27837A", "#81E8CE"],
|
|
35
|
+
magenta: ["#8732A7", "#E7A1F0"],
|
|
36
|
+
sky: ["#0068BE", "#8EC2F6"],
|
|
37
|
+
blue: ["#084CF0", "#8BA9FF"],
|
|
38
|
+
purple: ["#5C42B8", "#9DA5FD"],
|
|
39
|
+
royal: ["#2556C8", "#A9B1F8"],
|
|
40
|
+
success: ["#58B21C", "#97F558"],
|
|
41
|
+
warning: ["#FFD974", "#E4AA0D"],
|
|
42
|
+
error: ["#EC8C42", "#E46A0D"]
|
|
43
|
+
}, f = {
|
|
44
|
+
teal: "#69DFE9",
|
|
45
|
+
violet: "#C8B6F3",
|
|
46
|
+
mint: "#81E8CE",
|
|
47
|
+
magenta: "#E7A1F0",
|
|
48
|
+
sky: "#0068BE",
|
|
49
|
+
blue: "#084CF0",
|
|
50
|
+
purple: "#5C42B8",
|
|
51
|
+
royal: "#2556C8",
|
|
52
|
+
success: "#58B21C",
|
|
53
|
+
warning: "#E4AA0D",
|
|
54
|
+
error: "#E46A0D"
|
|
55
|
+
}, p = [
|
|
30
56
|
u.blue,
|
|
31
57
|
u.amber,
|
|
32
58
|
u.purple,
|
|
33
59
|
u.green,
|
|
34
60
|
u.red
|
|
35
|
-
],
|
|
61
|
+
], m = [
|
|
62
|
+
u.teal,
|
|
63
|
+
u.purple,
|
|
64
|
+
u.amber,
|
|
65
|
+
u.blue,
|
|
66
|
+
u.green
|
|
67
|
+
], h = {
|
|
36
68
|
font: "400 16px 'Satoshi Variable', 'DM Sans', sans-serif",
|
|
37
69
|
color: "#F7F7F7",
|
|
38
70
|
letterSpacing: "0px"
|
|
39
|
-
},
|
|
71
|
+
}, g = {
|
|
40
72
|
font: "500 16px 'Satoshi Variable', 'DM Sans', sans-serif",
|
|
41
73
|
color: "#F7F7F7"
|
|
42
|
-
},
|
|
74
|
+
}, _ = {
|
|
43
75
|
font: "400 18px 'Satoshi Variable', 'DM Sans', sans-serif",
|
|
44
76
|
color: "#B3B5B6",
|
|
45
77
|
letterSpacing: "0px"
|
|
46
78
|
};
|
|
47
|
-
function
|
|
79
|
+
function v(e, t = 1) {
|
|
48
80
|
let n = e.replace("#", "");
|
|
49
81
|
return `rgba(${parseInt(n.substring(0, 2), 16)},${parseInt(n.substring(2, 4), 16)},${parseInt(n.substring(4, 6), 16)},${t})`;
|
|
50
82
|
}
|
|
51
|
-
function
|
|
83
|
+
function y(e, t, n) {
|
|
52
84
|
return e + (t - e) * n;
|
|
53
85
|
}
|
|
54
|
-
function
|
|
86
|
+
function b(e, t, n) {
|
|
55
87
|
let r = (e) => {
|
|
56
88
|
let t = e.replace("#", "");
|
|
57
89
|
return [
|
|
@@ -61,34 +93,34 @@ function _(e, t, n) {
|
|
|
61
93
|
];
|
|
62
94
|
}, [i, a, o] = r(e), [s, c, l] = r(t), u = (e) => Math.max(0, Math.min(255, Math.round(e)));
|
|
63
95
|
return [
|
|
64
|
-
u(
|
|
65
|
-
u(
|
|
66
|
-
u(
|
|
96
|
+
u(y(i, s, n)),
|
|
97
|
+
u(y(a, c, n)),
|
|
98
|
+
u(y(o, l, n))
|
|
67
99
|
].map((e) => e.toString(16).padStart(2, "0")).join("").replace(/^/, "#");
|
|
68
100
|
}
|
|
69
|
-
function
|
|
101
|
+
function x(e, t, n, r = 2) {
|
|
70
102
|
e.width = t * r, e.height = n * r;
|
|
71
103
|
let i = e.getContext("2d");
|
|
72
104
|
return i.scale(r, r), i;
|
|
73
105
|
}
|
|
74
|
-
function
|
|
106
|
+
function S(e, t, n, r, i, a = .3) {
|
|
75
107
|
let o = e.createRadialGradient(t, n, 0, t, n, r);
|
|
76
|
-
o.addColorStop(0,
|
|
108
|
+
o.addColorStop(0, v(i, a)), o.addColorStop(1, v(i, 0)), e.fillStyle = o, e.beginPath(), e.arc(t, n, r, 0, Math.PI * 2), e.fill();
|
|
77
109
|
}
|
|
78
|
-
function
|
|
110
|
+
function C(e, t, n, r, i = 50, a = v(u.blue, .05)) {
|
|
79
111
|
for (let o = 0; o < i; o++) e.beginPath(), e.arc((Math.sin(r * .001 + o * 23) * .5 + .5) * t, (Math.cos(r * 8e-4 + o * 37) * .5 + .5) * n, .6, 0, Math.PI * 2), e.fillStyle = a, e.fill();
|
|
80
112
|
}
|
|
81
|
-
function
|
|
113
|
+
function w(e, t, n, r, i = .015) {
|
|
82
114
|
e.fillStyle = `rgba(0,0,0,${i})`;
|
|
83
115
|
let a = r * .5 % 6;
|
|
84
116
|
for (let r = a; r < n; r += 3) e.fillRect(0, r, t, 1);
|
|
85
117
|
}
|
|
86
|
-
function
|
|
118
|
+
function T(e, t, n, r, i = v(u.t1, .08)) {
|
|
87
119
|
e.strokeStyle = i, e.lineWidth = 1, e.setLineDash([3, 3]), e.beginPath(), e.moveTo(t, n), e.lineTo(t, r), e.stroke(), e.setLineDash([]);
|
|
88
120
|
}
|
|
89
121
|
//#endregion
|
|
90
122
|
//#region src/canvas/CanvasTooltip.tsx
|
|
91
|
-
function
|
|
123
|
+
function E({ visible: e, x: t, y: n, content: i, parentW: o, parentH: l }) {
|
|
92
124
|
let d = a(null);
|
|
93
125
|
if (r(() => {
|
|
94
126
|
let r = d.current;
|
|
@@ -161,7 +193,7 @@ function C({ visible: e, x: t, y: n, content: i, parentW: o, parentH: l }) {
|
|
|
161
193
|
}
|
|
162
194
|
//#endregion
|
|
163
195
|
//#region src/canvas/useCanvasInteraction.ts
|
|
164
|
-
function
|
|
196
|
+
function D(e, { width: r, height: i, onClick: s, enabled: c = !0 }) {
|
|
165
197
|
let l = a({
|
|
166
198
|
x: -1,
|
|
167
199
|
y: -1,
|
|
@@ -231,14 +263,14 @@ function w(e, { width: r, height: i, onClick: s, enabled: c = !0 }) {
|
|
|
231
263
|
hitZonesRef: d
|
|
232
264
|
};
|
|
233
265
|
}
|
|
234
|
-
function
|
|
266
|
+
function O(e, t, n, r, i, a) {
|
|
235
267
|
e.push({
|
|
236
268
|
id: t,
|
|
237
269
|
data: a,
|
|
238
270
|
test: (e, t) => (e - n) ** 2 + (t - r) ** 2 <= i * i
|
|
239
271
|
});
|
|
240
272
|
}
|
|
241
|
-
function
|
|
273
|
+
function k(e, t, n, r, i, a, o) {
|
|
242
274
|
e.push({
|
|
243
275
|
id: t,
|
|
244
276
|
data: o,
|
|
@@ -247,14 +279,14 @@ function E(e, t, n, r, i, a, o) {
|
|
|
247
279
|
}
|
|
248
280
|
//#endregion
|
|
249
281
|
//#region src/canvas/easing.ts
|
|
250
|
-
var
|
|
282
|
+
var A = (e) => 1 - (1 - e) ** 3, j = (e) => 1 - (1 - e) ** 4, M = (e) => e === 1 ? 1 : 1 - 2 ** (-10 * e), N = (e) => {
|
|
251
283
|
let t = 1.70158;
|
|
252
284
|
return 1 + (t + 1) * (e - 1) ** 3 + t * (e - 1) ** 2;
|
|
253
|
-
},
|
|
285
|
+
}, P = (e, t = .04, n = .001) => Math.sin(e * t) * Math.exp(-Math.min(e * n, 4)), F = (e, t, n, r = A) => {
|
|
254
286
|
let i = Math.min(.06, .5 / n), a = t * i, o = 1 - (n - 1) * i;
|
|
255
287
|
return r(Math.max(0, Math.min((e - a) / o, 1)));
|
|
256
288
|
};
|
|
257
|
-
function
|
|
289
|
+
function I(e, t, n = .12) {
|
|
258
290
|
e.forEach((r, i) => {
|
|
259
291
|
let a = i === t ? 1 : 0, o = r + (a - r) * n;
|
|
260
292
|
Math.abs(o - a) < .005 ? a === 0 ? e.delete(i) : e.set(i, 1) : e.set(i, o);
|
|
@@ -262,66 +294,66 @@ function N(e, t, n = .12) {
|
|
|
262
294
|
}
|
|
263
295
|
//#endregion
|
|
264
296
|
//#region src/components/common/SeriesChart.tsx
|
|
265
|
-
var
|
|
266
|
-
function
|
|
267
|
-
let o = a(null), d = a(/* @__PURE__ */ new Map()), f = a(0), { mouseRef: p, hoveredRef: m, tooltip:
|
|
268
|
-
width:
|
|
269
|
-
height:
|
|
297
|
+
var L = 760, ee = 250;
|
|
298
|
+
function te({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
299
|
+
let o = a(null), d = a(/* @__PURE__ */ new Map()), f = a(0), { mouseRef: p, hoveredRef: m, tooltip: h, hitZonesRef: g } = D(o, {
|
|
300
|
+
width: L,
|
|
301
|
+
height: ee
|
|
270
302
|
});
|
|
271
303
|
return n(() => {
|
|
272
304
|
let n = o.current;
|
|
273
305
|
if (!n) return;
|
|
274
|
-
let r =
|
|
306
|
+
let r = x(n, L, ee);
|
|
275
307
|
f.current = 0;
|
|
276
|
-
let a = i?.line ?? u.blue, s = i?.point ?? u.blue, c = i?.axisLine ?? u.bd, l = i?.areaFill ?? u.blue,
|
|
308
|
+
let a = i?.line ?? u.blue, s = i?.point ?? u.blue, c = i?.axisLine ?? u.bd, l = i?.areaFill ?? u.blue, h = {
|
|
277
309
|
top: 24,
|
|
278
310
|
right: 24,
|
|
279
311
|
bottom: 44,
|
|
280
312
|
left: 24
|
|
281
|
-
},
|
|
313
|
+
}, _ = L - h.left - h.right, y = ee - h.top - h.bottom, b, C = () => {
|
|
282
314
|
f.current++;
|
|
283
315
|
let n = f.current;
|
|
284
|
-
if (r.clearRect(0, 0,
|
|
285
|
-
|
|
316
|
+
if (r.clearRect(0, 0, L, ee), e.length < 2) {
|
|
317
|
+
b = requestAnimationFrame(C);
|
|
286
318
|
return;
|
|
287
319
|
}
|
|
288
|
-
let i = e.map((e) => e.pricing ?? 0), o = Math.max(100, ...i),
|
|
289
|
-
|
|
320
|
+
let i = e.map((e) => e.pricing ?? 0), o = Math.max(100, ...i), x = (t) => h.left + t / (e.length - 1) * _, w = (e) => h.top + (1 - e / o) * y, E = M(Math.min(n / 48, 1)), D = Math.max(2, Math.floor(E * e.length));
|
|
321
|
+
I(d.current, m.current), g.current = [], r.strokeStyle = v(u.bd, .2), r.lineWidth = .5;
|
|
290
322
|
for (let e = 0; e <= 4; e++) {
|
|
291
|
-
let t =
|
|
292
|
-
r.beginPath(), r.moveTo(
|
|
323
|
+
let t = h.top + e / 4 * y;
|
|
324
|
+
r.beginPath(), r.moveTo(h.left, t), r.lineTo(h.left + _, t), r.stroke();
|
|
293
325
|
}
|
|
294
|
-
if (r.strokeStyle =
|
|
326
|
+
if (r.strokeStyle = v(c, .4), r.lineWidth = 1, r.setLineDash([]), r.beginPath(), r.moveTo(h.left, w(0)), r.lineTo(h.left + _, w(0)), r.stroke(), p.current.over && m.current) {
|
|
295
327
|
let e = parseInt(m.current.split("-")[1]);
|
|
296
|
-
isNaN(e) ||
|
|
328
|
+
isNaN(e) || T(r, x(e), h.top, h.top + y);
|
|
297
329
|
}
|
|
298
|
-
if (t === "area" &&
|
|
299
|
-
let t = r.createLinearGradient(0,
|
|
300
|
-
t.addColorStop(0,
|
|
301
|
-
for (let t = 0; t <
|
|
302
|
-
r.lineTo(
|
|
330
|
+
if (t === "area" && D > 1) {
|
|
331
|
+
let t = r.createLinearGradient(0, h.top, 0, h.top + y);
|
|
332
|
+
t.addColorStop(0, v(l, .12)), t.addColorStop(1, v(l, 0)), r.fillStyle = t, r.beginPath(), r.moveTo(x(0), h.top + y);
|
|
333
|
+
for (let t = 0; t < D; t++) r.lineTo(x(t), w(e[t].pricing ?? 0));
|
|
334
|
+
r.lineTo(x(D - 1), h.top + y), r.closePath(), r.fill();
|
|
303
335
|
}
|
|
304
|
-
if (
|
|
305
|
-
r.strokeStyle =
|
|
306
|
-
for (let t = 0; t <
|
|
307
|
-
let n =
|
|
336
|
+
if (D > 1) {
|
|
337
|
+
r.strokeStyle = v(a, .85), r.lineWidth = 2, r.setLineDash([]), r.beginPath();
|
|
338
|
+
for (let t = 0; t < D; t++) {
|
|
339
|
+
let n = x(t), i = w(e[t].pricing ?? 0);
|
|
308
340
|
t === 0 ? r.moveTo(n, i) : r.lineTo(n, i);
|
|
309
341
|
}
|
|
310
342
|
r.stroke();
|
|
311
343
|
}
|
|
312
|
-
for (let i = 0; i <
|
|
313
|
-
let a =
|
|
314
|
-
|
|
344
|
+
for (let i = 0; i < D; i++) {
|
|
345
|
+
let a = x(i), o = w(e[i].pricing ?? 0), c = `sc-${i}`, l = d.current.get(c) ?? 0, f = i === e.length - 1;
|
|
346
|
+
O(g.current, c, a, o, 12, {
|
|
315
347
|
label: e[i].vendor,
|
|
316
348
|
value: String(e[i].pricing ?? 0),
|
|
317
349
|
color: f ? u.red : s
|
|
318
|
-
}), l > 0 &&
|
|
319
|
-
let p = f ?
|
|
320
|
-
f ? (r.shadowColor =
|
|
350
|
+
}), l > 0 && S(r, a, o, 16 * l, s, .2 * l);
|
|
351
|
+
let p = f ? P(n, .05, 5e-4) : 0, m = t === "area" ? 5 : 6;
|
|
352
|
+
f ? (r.shadowColor = v(u.red, .5), r.shadowBlur = (8 + p * 4) * (1 + l * .5), r.fillStyle = u.red, r.beginPath(), r.arc(a, o, (m + p * 1.5) * (1 + l * .3), 0, Math.PI * 2), r.fill(), r.shadowBlur = 0) : (r.fillStyle = v(s, .7 + l * .3), r.beginPath(), r.arc(a, o, m + l * 2, 0, Math.PI * 2), r.fill()), r.font = "10px 'JetBrains Mono', monospace", r.fillStyle = v(u.t3, .6 + l * .3), r.textAlign = "center", r.fillText(e[i].vendor, a, ee - 14);
|
|
321
353
|
}
|
|
322
|
-
|
|
354
|
+
b = requestAnimationFrame(C);
|
|
323
355
|
};
|
|
324
|
-
return
|
|
356
|
+
return C(), () => cancelAnimationFrame(b);
|
|
325
357
|
}, [
|
|
326
358
|
e,
|
|
327
359
|
t,
|
|
@@ -331,31 +363,31 @@ function ee({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
|
331
363
|
children: /* @__PURE__ */ c("div", {
|
|
332
364
|
style: {
|
|
333
365
|
position: "relative",
|
|
334
|
-
width:
|
|
335
|
-
height:
|
|
366
|
+
width: L,
|
|
367
|
+
height: ee
|
|
336
368
|
},
|
|
337
369
|
children: [/* @__PURE__ */ s("canvas", {
|
|
338
370
|
ref: o,
|
|
339
371
|
role: "img",
|
|
340
372
|
"aria-label": `${t} chart`,
|
|
341
373
|
style: {
|
|
342
|
-
width:
|
|
343
|
-
height:
|
|
374
|
+
width: L,
|
|
375
|
+
height: ee,
|
|
344
376
|
display: "block",
|
|
345
377
|
borderRadius: 8
|
|
346
378
|
}
|
|
347
|
-
}), /* @__PURE__ */ s(
|
|
348
|
-
...
|
|
349
|
-
parentW:
|
|
350
|
-
parentH:
|
|
379
|
+
}), /* @__PURE__ */ s(E, {
|
|
380
|
+
...h,
|
|
381
|
+
parentW: L,
|
|
382
|
+
parentH: ee
|
|
351
383
|
})]
|
|
352
384
|
})
|
|
353
385
|
});
|
|
354
386
|
}
|
|
355
387
|
//#endregion
|
|
356
388
|
//#region src/components/areaChart/AreaChart.tsx
|
|
357
|
-
function
|
|
358
|
-
return /* @__PURE__ */ s(
|
|
389
|
+
function ne({ rows: e = [], className: t, colors: n }) {
|
|
390
|
+
return /* @__PURE__ */ s(te, {
|
|
359
391
|
rows: e,
|
|
360
392
|
variant: "area",
|
|
361
393
|
className: t,
|
|
@@ -364,76 +396,76 @@ function te({ rows: e = [], className: t, colors: n }) {
|
|
|
364
396
|
}
|
|
365
397
|
//#endregion
|
|
366
398
|
//#region src/components/barChart/BarChart.tsx
|
|
367
|
-
var
|
|
368
|
-
function
|
|
369
|
-
let i = a(null), o = a(/* @__PURE__ */ new Map()),
|
|
370
|
-
width:
|
|
371
|
-
height:
|
|
399
|
+
var re = 760, ie = 280;
|
|
400
|
+
function ae({ rows: e = [], className: t, colors: r }) {
|
|
401
|
+
let i = a(null), o = a(/* @__PURE__ */ new Map()), d = a(0), { hoveredRef: f, tooltip: m, hitZonesRef: h } = D(i, {
|
|
402
|
+
width: re,
|
|
403
|
+
height: ie
|
|
372
404
|
});
|
|
373
405
|
return n(() => {
|
|
374
406
|
let t = i.current;
|
|
375
407
|
if (!t) return;
|
|
376
|
-
let n =
|
|
377
|
-
|
|
378
|
-
let a = r?.bars ??
|
|
408
|
+
let n = x(t, re, ie);
|
|
409
|
+
d.current = 0;
|
|
410
|
+
let a = r?.bars ?? p, s = r?.axisLine ?? u.bd, c = r?.valueLabel ?? u.t2, l = {
|
|
379
411
|
top: 24,
|
|
380
412
|
right: 24,
|
|
381
413
|
bottom: 56,
|
|
382
414
|
left: 24
|
|
383
|
-
}, m =
|
|
384
|
-
|
|
385
|
-
let t =
|
|
386
|
-
n.clearRect(0, 0,
|
|
387
|
-
let r =
|
|
388
|
-
|
|
389
|
-
let s = l.left + i *
|
|
390
|
-
|
|
415
|
+
}, m = ie - l.top - l.bottom, g = (re - l.left - l.right) / Math.max(e.length, 1), _ = Math.max(100, ...e.map((e) => e.pricing ?? 0)), y = l.top + m, b, C = () => {
|
|
416
|
+
d.current++;
|
|
417
|
+
let t = d.current;
|
|
418
|
+
n.clearRect(0, 0, re, ie);
|
|
419
|
+
let r = j(Math.min(t / 48, 1));
|
|
420
|
+
I(o.current, f.current), h.current = [], n.strokeStyle = v(s, .4), n.lineWidth = 1, n.setLineDash([]), n.beginPath(), n.moveTo(l.left, y), n.lineTo(re - l.right, y), n.stroke(), e.forEach((t, i) => {
|
|
421
|
+
let s = l.left + i * g, d = F(r, i, e.length, j), f = _ > 0 ? (t.pricing ?? 0) / _ * m : 0, p = Math.max(f > 0 ? 4 : 0, f * d), b = a[i % a.length], x = o.current.get(t.id ?? `bar-${i}`) ?? 0;
|
|
422
|
+
k(h.current, t.id ?? `bar-${i}`, s + 4, y - p, g - 8, p, {
|
|
391
423
|
label: t.vendor,
|
|
392
424
|
value: String(t.pricing ?? 0),
|
|
393
|
-
color:
|
|
394
|
-
}), p > 0 && (
|
|
425
|
+
color: b
|
|
426
|
+
}), p > 0 && (x > 0 && S(n, s + g / 2, y - p / 2, g * .8, b, .12 * x), n.shadowColor = v(b, .2 * (x > 0 ? x : 0)), n.shadowBlur = x > 0 ? 6 : 0, n.fillStyle = v(b, .5 + x * .25), n.beginPath(), n.roundRect(s + 4, y - p, g - 8, p, [
|
|
395
427
|
4,
|
|
396
428
|
4,
|
|
397
429
|
0,
|
|
398
430
|
0
|
|
399
|
-
]), n.fill(), n.shadowBlur = 0,
|
|
431
|
+
]), n.fill(), n.shadowBlur = 0, x > 0 && (n.strokeStyle = v(b, .4 * x), n.lineWidth = 1, n.beginPath(), n.roundRect(s + 4, y - p, g - 8, p, [
|
|
400
432
|
4,
|
|
401
433
|
4,
|
|
402
434
|
0,
|
|
403
435
|
0
|
|
404
|
-
]), n.stroke())), d > .5 && p > 0 && (n.globalAlpha = Math.min(1, (d - .5) * 2), n.font = "bold 10px 'JetBrains Mono', monospace", n.fillStyle =
|
|
405
|
-
}),
|
|
436
|
+
]), n.stroke())), d > .5 && p > 0 && (n.globalAlpha = Math.min(1, (d - .5) * 2), n.font = "bold 10px 'JetBrains Mono', monospace", n.fillStyle = x > 0 ? b : v(c, .7), n.textAlign = "center", n.fillText(String(t.pricing ?? ""), s + g / 2, y - p - 6), n.globalAlpha = 1), n.font = `${x > 0 ? "bold " : ""}9px 'JetBrains Mono', monospace`, n.fillStyle = x > 0 ? b : v(u.t3, .6), n.textAlign = "center", n.fillText(t.vendor, s + g / 2, ie - 14);
|
|
437
|
+
}), b = requestAnimationFrame(C);
|
|
406
438
|
};
|
|
407
|
-
return C(), () => cancelAnimationFrame(
|
|
439
|
+
return C(), () => cancelAnimationFrame(b);
|
|
408
440
|
}, [e, r]), /* @__PURE__ */ s(l, {
|
|
409
441
|
className: t,
|
|
410
442
|
children: /* @__PURE__ */ c("div", {
|
|
411
443
|
style: {
|
|
412
444
|
position: "relative",
|
|
413
|
-
width:
|
|
414
|
-
height:
|
|
445
|
+
width: re,
|
|
446
|
+
height: ie
|
|
415
447
|
},
|
|
416
448
|
children: [/* @__PURE__ */ s("canvas", {
|
|
417
449
|
ref: i,
|
|
418
450
|
role: "img",
|
|
419
451
|
"aria-label": "bar chart",
|
|
420
452
|
style: {
|
|
421
|
-
width:
|
|
422
|
-
height:
|
|
453
|
+
width: re,
|
|
454
|
+
height: ie,
|
|
423
455
|
display: "block",
|
|
424
456
|
borderRadius: 8
|
|
425
457
|
}
|
|
426
|
-
}), /* @__PURE__ */ s(
|
|
458
|
+
}), /* @__PURE__ */ s(E, {
|
|
427
459
|
...m,
|
|
428
|
-
parentW:
|
|
429
|
-
parentH:
|
|
460
|
+
parentW: re,
|
|
461
|
+
parentH: ie
|
|
430
462
|
})]
|
|
431
463
|
})
|
|
432
464
|
});
|
|
433
465
|
}
|
|
434
466
|
//#endregion
|
|
435
467
|
//#region src/components/common/ChartEmptyState.tsx
|
|
436
|
-
function
|
|
468
|
+
function R({ width: e, height: t, message: n = "No data available", "data-testid": r }) {
|
|
437
469
|
return /* @__PURE__ */ s("div", {
|
|
438
470
|
"data-testid": r,
|
|
439
471
|
style: {
|
|
@@ -453,7 +485,7 @@ function I({ width: e, height: t, message: n = "No data available", "data-testid
|
|
|
453
485
|
}
|
|
454
486
|
//#endregion
|
|
455
487
|
//#region src/components/common/ToggleButton.tsx
|
|
456
|
-
function
|
|
488
|
+
function oe({ expanded: e, onToggle: t, labelExpanded: n = "View Less", labelCollapsed: r = "View More", "data-testid": i }) {
|
|
457
489
|
return /* @__PURE__ */ c("button", {
|
|
458
490
|
type: "button",
|
|
459
491
|
"data-testid": i,
|
|
@@ -468,7 +500,7 @@ function ae({ expanded: e, onToggle: t, labelExpanded: n = "View Less", labelCol
|
|
|
468
500
|
boxSizing: "border-box",
|
|
469
501
|
border: "none",
|
|
470
502
|
borderRadius: 6,
|
|
471
|
-
color: "#
|
|
503
|
+
color: "#69DFE9",
|
|
472
504
|
fontSize: 14,
|
|
473
505
|
fontFamily: "'Satoshi Variable', 'DM Sans', sans-serif",
|
|
474
506
|
fontStyle: "normal",
|
|
@@ -496,90 +528,95 @@ function ae({ expanded: e, onToggle: t, labelExpanded: n = "View Less", labelCol
|
|
|
496
528
|
}
|
|
497
529
|
//#endregion
|
|
498
530
|
//#region src/components/progressRaceChart/ProgressRaceChart.tsx
|
|
499
|
-
var
|
|
500
|
-
|
|
501
|
-
u.blue,
|
|
502
|
-
u.amber,
|
|
503
|
-
u.red
|
|
504
|
-
];
|
|
505
|
-
function de(e, t, n) {
|
|
531
|
+
var z = 660, se = 6, ce = 30, le = 24, ue = 24, de = 8;
|
|
532
|
+
function fe(e, t, n) {
|
|
506
533
|
if (e.measureText(t).width <= n) return t;
|
|
507
534
|
let r = t;
|
|
508
535
|
for (; r.length > 0 && e.measureText(r + "…").width > n;) r = r.slice(0, -1);
|
|
509
536
|
return r + "…";
|
|
510
537
|
}
|
|
511
|
-
function
|
|
512
|
-
let
|
|
513
|
-
width:
|
|
514
|
-
height:
|
|
538
|
+
function pe({ items: e = [], colorOffset: t = 0, "data-testid": r }) {
|
|
539
|
+
let l = a(null), d = a(0), f = a(/* @__PURE__ */ new Map()), [p, _] = o(!1), y = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), b = i(() => [...y].sort((e, t) => (t.percentage ?? 0) - (e.percentage ?? 0)), [y]), T = i(() => p ? b : b.slice(0, de), [b, p]), j = T.length, M = le + ue + j * se + Math.max(0, j - 1) * ce, { hoveredRef: N, tooltip: P, hitZonesRef: F } = D(l, {
|
|
540
|
+
width: z,
|
|
541
|
+
height: M
|
|
515
542
|
});
|
|
516
543
|
return n(() => {
|
|
517
|
-
let e =
|
|
544
|
+
let e = l.current;
|
|
518
545
|
if (!e) return;
|
|
519
|
-
let
|
|
520
|
-
|
|
521
|
-
let
|
|
522
|
-
|
|
523
|
-
let e =
|
|
524
|
-
|
|
525
|
-
let n = t ===
|
|
526
|
-
Math.abs(r - n) < .005 ? n === 0 ?
|
|
527
|
-
}),
|
|
528
|
-
let
|
|
529
|
-
|
|
530
|
-
let c = (
|
|
531
|
-
if (l >
|
|
532
|
-
let e =
|
|
533
|
-
e.addColorStop(0,
|
|
546
|
+
let n = x(e, z, M);
|
|
547
|
+
d.current = 0;
|
|
548
|
+
let r = z - 150 - 80, i = m[t % m.length], a, o = () => {
|
|
549
|
+
d.current++;
|
|
550
|
+
let e = d.current;
|
|
551
|
+
n.clearRect(0, 0, z, M), n.letterSpacing = h.letterSpacing, F.current = [], f.current.forEach((e, t) => {
|
|
552
|
+
let n = t === N.current ? 1 : 0, r = e + (n - e) * .12;
|
|
553
|
+
Math.abs(r - n) < .005 ? n === 0 ? f.current.delete(t) : f.current.set(t, 1) : f.current.set(t, r);
|
|
554
|
+
}), N.current && !f.current.has(N.current) && f.current.set(N.current, 0), C(n, z, M, e, 40, v(u.blue, .04)), T.forEach((t, a) => {
|
|
555
|
+
let o = f.current.get(t.id) ?? 0, s = le + a * (se + ce);
|
|
556
|
+
n.fillStyle = v(u.t4, .5 + o * .1), n.beginPath(), n.rect(150, s, r, se), n.fill();
|
|
557
|
+
let c = (t.percentage ?? 0) / 100, l = 150 + r * Math.min(c, c * A(Math.min(1, e * .005)));
|
|
558
|
+
if (l > 152) {
|
|
559
|
+
let e = n.createLinearGradient(150, 0, l, 0);
|
|
560
|
+
e.addColorStop(0, v(i, .55)), e.addColorStop(1, v(i, .9)), n.fillStyle = e, n.beginPath(), n.rect(150, s, l - 150, se), n.fill();
|
|
534
561
|
}
|
|
535
|
-
|
|
536
|
-
let
|
|
537
|
-
label:
|
|
538
|
-
value: `${
|
|
539
|
-
sublabel:
|
|
540
|
-
color:
|
|
562
|
+
o > 0 && S(n, l, s + se / 2, 12 * o, i, .35 * o);
|
|
563
|
+
let d = {
|
|
564
|
+
label: t.name,
|
|
565
|
+
value: `${t.percentage ?? 0}%`,
|
|
566
|
+
sublabel: t.totalLabel ?? (t.total == null ? void 0 : String(t.total)),
|
|
567
|
+
color: i
|
|
541
568
|
};
|
|
542
|
-
|
|
543
|
-
}),
|
|
569
|
+
k(F.current, t.id, 0, s - ce / 2, 150 + r, se + ce, d), O(F.current, t.id, l, s + se / 2, 10, d), n.font = g.font, n.fillStyle = o > 0 ? v(i, 1) : v(u.t1, .85), n.textAlign = "left", n.textBaseline = "middle", n.fillText(`${t.percentage ?? 0}%`, 150 + r + 32, s + se / 2), n.font = h.font, n.fillStyle = o > 0 ? v(i, 1) : h.color, n.textAlign = "right", n.fillText(fe(n, t.name ?? t.abbreviation ?? "", 134), 142, s + se / 2);
|
|
570
|
+
}), w(n, z, M, e, .015), a = requestAnimationFrame(o);
|
|
544
571
|
};
|
|
545
572
|
return o(), () => cancelAnimationFrame(a);
|
|
546
|
-
}, [
|
|
547
|
-
|
|
573
|
+
}, [
|
|
574
|
+
T,
|
|
575
|
+
M,
|
|
576
|
+
t
|
|
577
|
+
]), b.length === 0 ? /* @__PURE__ */ s(R, {
|
|
578
|
+
width: z,
|
|
548
579
|
height: 160,
|
|
549
|
-
"data-testid":
|
|
580
|
+
"data-testid": r
|
|
550
581
|
}) : /* @__PURE__ */ c("div", {
|
|
551
|
-
"data-testid":
|
|
552
|
-
style: { width:
|
|
582
|
+
"data-testid": r,
|
|
583
|
+
style: { width: z },
|
|
553
584
|
children: [/* @__PURE__ */ c("div", {
|
|
554
585
|
style: { position: "relative" },
|
|
555
586
|
children: [/* @__PURE__ */ s("canvas", {
|
|
556
|
-
ref:
|
|
587
|
+
ref: l,
|
|
557
588
|
role: "img",
|
|
558
589
|
"aria-label": "Commitment race — contractors ranked by commitment percentage",
|
|
559
590
|
style: {
|
|
560
|
-
width:
|
|
561
|
-
height:
|
|
591
|
+
width: z,
|
|
592
|
+
height: M,
|
|
562
593
|
display: "block",
|
|
563
594
|
borderRadius: 8
|
|
564
595
|
}
|
|
565
|
-
}), /* @__PURE__ */ s(
|
|
566
|
-
...
|
|
567
|
-
parentW:
|
|
568
|
-
parentH:
|
|
596
|
+
}), /* @__PURE__ */ s(E, {
|
|
597
|
+
...P,
|
|
598
|
+
parentW: z,
|
|
599
|
+
parentH: M
|
|
569
600
|
})]
|
|
570
|
-
}),
|
|
601
|
+
}), y.length > de && /* @__PURE__ */ s("div", {
|
|
571
602
|
style: { marginTop: 8 },
|
|
572
|
-
children: /* @__PURE__ */ s(
|
|
573
|
-
expanded:
|
|
574
|
-
onToggle: () =>
|
|
603
|
+
children: /* @__PURE__ */ s(oe, {
|
|
604
|
+
expanded: p,
|
|
605
|
+
onToggle: () => _((e) => !e)
|
|
575
606
|
})
|
|
576
607
|
})]
|
|
577
608
|
});
|
|
578
609
|
}
|
|
579
610
|
//#endregion
|
|
580
611
|
//#region src/components/semiCircularGaugeChart/SemiCircularGaugeChart.tsx
|
|
581
|
-
var
|
|
582
|
-
|
|
612
|
+
var me = 480, he = 310, ge = 18, _e = [
|
|
613
|
+
"#00818F",
|
|
614
|
+
"#5C42B8",
|
|
615
|
+
"#C87B0A",
|
|
616
|
+
"#2563EB",
|
|
617
|
+
"#166534"
|
|
618
|
+
];
|
|
619
|
+
function ve(e, t, n) {
|
|
583
620
|
let r = t.split(" "), i = [], a = "";
|
|
584
621
|
for (let t of r) {
|
|
585
622
|
let r = a ? `${a} ${t}` : t;
|
|
@@ -587,72 +624,55 @@ function ge(e, t, n) {
|
|
|
587
624
|
}
|
|
588
625
|
return a && i.push(a), i;
|
|
589
626
|
}
|
|
590
|
-
function
|
|
591
|
-
let
|
|
627
|
+
function ye({ confirmed: e, total: t, label: r, colorOffset: i = 0, "data-testid": o }) {
|
|
628
|
+
let c = a(null), l = a(0);
|
|
592
629
|
return n(() => {
|
|
593
|
-
let n =
|
|
630
|
+
let n = c.current;
|
|
594
631
|
if (!n) return;
|
|
595
|
-
let
|
|
596
|
-
|
|
597
|
-
let
|
|
598
|
-
|
|
599
|
-
let n =
|
|
600
|
-
|
|
601
|
-
let
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
].forEach((e) => {
|
|
619
|
-
let t = s + e.start * d, n = s + e.end * d;
|
|
620
|
-
i.beginPath(), i.arc(a, 155, 194 / 2, t, n), i.strokeStyle = h(e.color, .12), i.lineWidth = 42, i.stroke();
|
|
621
|
-
});
|
|
622
|
-
let v = Math.round((e ?? 0) / (t || 1) * 100), b = s + v / 100 * d * o, x = v >= 66 ? u.green : v >= 33 ? u.amber : u.red;
|
|
623
|
-
y(i, a + Math.cos(b) * 194 / 2, 155 + Math.sin(b) * 194 / 2, 18, x, .35 * o), i.beginPath(), i.arc(a, 155, 194 / 2, s, b), i.strokeStyle = h(x, .7 * o), i.lineWidth = 38, i.lineCap = "round", i.stroke(), i.lineCap = "butt";
|
|
624
|
-
let S = s + v / 100 * d * _, C = a + Math.cos(S) * 82, w = 155 + Math.sin(S) * 82, T = a - Math.cos(S) * 14, E = 155 - Math.sin(S) * 14;
|
|
625
|
-
i.strokeStyle = h(x, .18 * _), i.lineWidth = 6, i.lineCap = "round", i.beginPath(), i.moveTo(T, E), i.lineTo(C, w), i.stroke(), i.strokeStyle = h(u.t1, .92 * _), i.lineWidth = 2, i.lineCap = "round", i.beginPath(), i.moveTo(T, E), i.lineTo(C, w), i.stroke(), i.beginPath(), i.arc(C, w, 3, 0, Math.PI * 2), i.fillStyle = h(x, .9 * _), i.fill(), y(i, a, 155, 20, x, .25 * _), i.beginPath(), i.arc(a, 155, 9, 0, Math.PI * 2), i.strokeStyle = h(x, .5 * _), i.lineWidth = 1.5, i.stroke(), i.beginPath(), i.arc(a, 155, 5, 0, Math.PI * 2), i.fillStyle = u.t1, i.fill(), o > .5 && (i.globalAlpha = Math.min(1, (o - .5) / .5), i.font = "500 24px 'Satoshi Variable', 'DM Sans', sans-serif", i.fillStyle = x, i.textAlign = "center", i.fillText(`${Math.round(v * _)}%`, a, 117), i.globalAlpha = 1), o > .7 && r && (i.globalAlpha = Math.min(1, (o - .7) / .3), i.font = m.font, i.fillStyle = m.color, i.textAlign = "center", ge(i, `${e ?? 0} of ${t ?? 0} ${r}`, pe - 40).forEach((e, t) => {
|
|
626
|
-
i.fillText(e, a, 213 + t * he);
|
|
627
|
-
}), i.globalAlpha = 1);
|
|
628
|
-
for (let e = 0; e <= 10; e++) {
|
|
629
|
-
let t = s + e / 10 * d;
|
|
630
|
-
if (i.strokeStyle = h(u.bd, .5), i.lineWidth = e % 5 == 0 ? 1.5 : .8, i.beginPath(), i.moveTo(a + Math.cos(t) * 122, 155 + Math.sin(t) * 122), i.lineTo(a + Math.cos(t) * 128, 155 + Math.sin(t) * 128), i.stroke(), e % 5 == 0) {
|
|
631
|
-
let n = a + Math.cos(t) * 138, r = 155 + Math.sin(t) * 138;
|
|
632
|
-
i.font = f.font, i.fillStyle = f.color, i.textAlign = "center", i.fillText(`${e * 10}%`, n, r + 3);
|
|
633
|
-
}
|
|
634
|
-
}
|
|
635
|
-
p = requestAnimationFrame(g);
|
|
632
|
+
let a = x(n, me, he);
|
|
633
|
+
l.current = 0;
|
|
634
|
+
let o = i % m.length, s = m[o], d = _e[o], f = me / 2, p = Math.PI, g = 2 * Math.PI, y = Math.PI, b, C = () => {
|
|
635
|
+
l.current++;
|
|
636
|
+
let n = l.current;
|
|
637
|
+
a.clearRect(0, 0, me, he), a.letterSpacing = h.letterSpacing;
|
|
638
|
+
let i = A(Math.min(n / 80, 1)), o = N(Math.min(n / 72, 1)), c = Math.round((e ?? 0) / (t || 1) * 100), m = p + c / 100 * y * i;
|
|
639
|
+
a.beginPath(), a.arc(f, 175, 148, p, g), a.strokeStyle = v(s, .28), a.lineWidth = 10, a.lineCap = "round", a.stroke(), a.lineCap = "butt", a.beginPath(), a.moveTo(f, 175), a.arc(f, 175, 133, p, m), a.closePath(), a.fillStyle = v(d, .35 * i), a.fill();
|
|
640
|
+
let x = f + Math.cos(m) * 148, w = 175 + Math.sin(m) * 148;
|
|
641
|
+
S(a, x, w, 10, s, .3 * i);
|
|
642
|
+
let T = a.createLinearGradient(f + Math.cos(p) * 148, 175 + Math.sin(p) * 148, x, w);
|
|
643
|
+
T.addColorStop(0, v(d, .9 * i)), T.addColorStop(1, v(s, 1 * i)), a.beginPath(), a.arc(f, 175, 148, p, m), a.strokeStyle = T, a.lineWidth = 10, a.lineCap = "round", a.stroke(), a.lineCap = "butt";
|
|
644
|
+
let E = p + c / 100 * y * o, D = f + Math.cos(E) * 133, O = 175 + Math.sin(E) * 133, k = f - Math.cos(E) * 24, j = 175 - Math.sin(E) * 24, M = -Math.sin(E), P = Math.cos(E), F = 2.5 * o;
|
|
645
|
+
a.beginPath(), a.moveTo(D, O), a.lineTo(f + M * F, 175 + P * F), a.lineTo(k + M * 1, j + P * 1), a.lineTo(k - M * 1, j - P * 1), a.lineTo(f - M * F, 175 - P * F), a.closePath(), a.fillStyle = v(u.t1, o), a.fill(), a.beginPath(), a.arc(f, 175, 11, 0, Math.PI * 2), a.strokeStyle = v(s, .85 * o), a.lineWidth = 2, a.stroke(), a.beginPath(), a.arc(f, 175, 9, 0, Math.PI * 2), a.fillStyle = u.t1, a.fill(), [
|
|
646
|
+
[0, "0%"],
|
|
647
|
+
[.5, "50%"],
|
|
648
|
+
[1, "100%"]
|
|
649
|
+
].forEach(([e, t]) => {
|
|
650
|
+
let n = p + e * y, r = e === 1 ? 184 : 168, i = f + Math.cos(n) * r, o = 175 + Math.sin(n) * r;
|
|
651
|
+
a.font = h.font, a.fillStyle = h.color, a.textAlign = "center", a.fillText(t, i, o + 4);
|
|
652
|
+
}), i > .4 && (a.globalAlpha = Math.min(1, (i - .4) / .4), a.font = "700 32px 'Satoshi Variable', 'DM Sans', sans-serif", a.fillStyle = u.t1, a.textAlign = "center", a.fillText(`${Math.round(c * o)}%`, f, 229), a.globalAlpha = 1), i > .7 && r && (a.globalAlpha = Math.min(1, (i - .7) / .3), a.font = _.font, a.fillStyle = _.color, a.textAlign = "center", ve(a, `${e ?? 0} of ${t ?? 0} ${r}`, me - 40).forEach((e, t) => {
|
|
653
|
+
a.fillText(e, f, 265 + t * ge);
|
|
654
|
+
}), a.globalAlpha = 1), b = requestAnimationFrame(C);
|
|
636
655
|
};
|
|
637
|
-
return
|
|
656
|
+
return C(), () => cancelAnimationFrame(b);
|
|
638
657
|
}, [
|
|
639
658
|
e,
|
|
640
659
|
t,
|
|
641
|
-
r
|
|
660
|
+
r,
|
|
661
|
+
i
|
|
642
662
|
]), /* @__PURE__ */ s("div", {
|
|
643
|
-
"data-testid":
|
|
663
|
+
"data-testid": o,
|
|
644
664
|
style: {
|
|
645
665
|
position: "relative",
|
|
646
|
-
width:
|
|
647
|
-
height:
|
|
666
|
+
width: me,
|
|
667
|
+
height: he
|
|
648
668
|
},
|
|
649
669
|
children: /* @__PURE__ */ s("canvas", {
|
|
650
|
-
ref:
|
|
670
|
+
ref: c,
|
|
651
671
|
role: "img",
|
|
652
672
|
"aria-label": `Compensation event gauge — ${Math.round((e ?? 0) / (t || 1) * 100)}% of NCEs confirmed as compensation events`,
|
|
653
673
|
style: {
|
|
654
|
-
width:
|
|
655
|
-
height:
|
|
674
|
+
width: me,
|
|
675
|
+
height: he,
|
|
656
676
|
display: "block"
|
|
657
677
|
}
|
|
658
678
|
})
|
|
@@ -660,8 +680,8 @@ function _e({ confirmed: e, total: t, label: r, "data-testid": i }) {
|
|
|
660
680
|
}
|
|
661
681
|
//#endregion
|
|
662
682
|
//#region src/canvas/useCanvasLoop.ts
|
|
663
|
-
function
|
|
664
|
-
let c = a(0), { easing: l =
|
|
683
|
+
function be(e, t, r, i, o = !0, s = {}) {
|
|
684
|
+
let c = a(0), { easing: l = A, durationFrames: u = 48 } = s;
|
|
665
685
|
n(() => {
|
|
666
686
|
let n = e.current;
|
|
667
687
|
if (!n || !t || !r) return;
|
|
@@ -692,28 +712,28 @@ function ve(e, t, r, i, o = !0, s = {}) {
|
|
|
692
712
|
}
|
|
693
713
|
//#endregion
|
|
694
714
|
//#region src/components/multiMetricConstellationChart/MultiMetricConstellationChart.tsx
|
|
695
|
-
var
|
|
715
|
+
var B = 780, xe = 234, Se = 130, Ce = 52, we = [
|
|
696
716
|
u.blue,
|
|
697
717
|
u.amber,
|
|
698
718
|
u.purple,
|
|
699
719
|
u.green
|
|
700
|
-
],
|
|
720
|
+
], Te = [
|
|
701
721
|
"Base Value",
|
|
702
722
|
"Variations",
|
|
703
723
|
"Commitment"
|
|
704
|
-
],
|
|
724
|
+
], Ee = [
|
|
705
725
|
"Base",
|
|
706
726
|
"Var",
|
|
707
727
|
"Commit"
|
|
708
728
|
];
|
|
709
|
-
function
|
|
710
|
-
let n = a(null), r = a(/* @__PURE__ */ new Map()), { hoveredRef: o, tooltip: l, hitZonesRef: d } =
|
|
711
|
-
width:
|
|
712
|
-
height:
|
|
713
|
-
}),
|
|
714
|
-
let e = Math.max(...
|
|
715
|
-
return
|
|
716
|
-
let i =
|
|
729
|
+
function De({ items: e = [], "data-testid": t }) {
|
|
730
|
+
let n = a(null), r = a(/* @__PURE__ */ new Map()), { hoveredRef: o, tooltip: l, hitZonesRef: d } = D(n, {
|
|
731
|
+
width: B,
|
|
732
|
+
height: xe
|
|
733
|
+
}), f = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), p = i(() => {
|
|
734
|
+
let e = Math.max(...f.map((e) => e.base ?? 0)), t = Math.max(...f.map((e) => e.variation ?? 0));
|
|
735
|
+
return f.map((n, r) => {
|
|
736
|
+
let i = B * (.12 + r * .19), a = Se, o = Math.min(B * .075, Ce), s = we[r % we.length], c = [
|
|
717
737
|
(n.base ?? 0) / (e || 1) * 100,
|
|
718
738
|
(n.variation ?? 0) / (t || 1) * 100,
|
|
719
739
|
n.percentage ?? 0
|
|
@@ -722,10 +742,10 @@ function we({ items: e = [], "data-testid": t }) {
|
|
|
722
742
|
n.variationLabel ?? String(n.variation ?? 0),
|
|
723
743
|
`${n.percentage ?? 0}%`
|
|
724
744
|
], u = c.map((e, t) => {
|
|
725
|
-
let n = -Math.PI / 2 + t /
|
|
745
|
+
let n = -Math.PI / 2 + t / Te.length * Math.PI * 2, r = e / 100, s = o * Math.max(.08, r);
|
|
726
746
|
return {
|
|
727
|
-
name:
|
|
728
|
-
short:
|
|
747
|
+
name: Te[t],
|
|
748
|
+
short: Ee[t],
|
|
729
749
|
label: l[t],
|
|
730
750
|
val: Math.round(e),
|
|
731
751
|
x: i + Math.cos(n) * s,
|
|
@@ -744,115 +764,126 @@ function we({ items: e = [], "data-testid": t }) {
|
|
|
744
764
|
color: s
|
|
745
765
|
};
|
|
746
766
|
});
|
|
747
|
-
}, [
|
|
748
|
-
return
|
|
749
|
-
|
|
767
|
+
}, [f]);
|
|
768
|
+
return be(n, B, xe, (e, t, n) => {
|
|
769
|
+
I(r.current, o.current), d.current = [], C(e, B, xe, n, 30), p.forEach((t, i) => {
|
|
750
770
|
let a = t.color, o = `constellation-${i}`, s = r.current.get(o) ?? 0;
|
|
751
|
-
e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 5, 0, Math.PI * 2), e.strokeStyle =
|
|
771
|
+
e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 5, 0, Math.PI * 2), e.strokeStyle = v(u.bd, .08 + .08 * s), e.lineWidth = .5, e.stroke(), e.beginPath(), t.stars.forEach((t, n) => {
|
|
752
772
|
n === 0 ? e.moveTo(t.x, t.y) : e.lineTo(t.x, t.y);
|
|
753
|
-
}), e.closePath(), e.fillStyle =
|
|
754
|
-
let c =
|
|
755
|
-
|
|
756
|
-
let
|
|
757
|
-
e.textAlign = "center", e.textBaseline = "middle",
|
|
773
|
+
}), e.closePath(), e.fillStyle = v(a, .04 + .03 * s), e.fill(), e.strokeStyle = v(a, .15 + .1 * s), e.lineWidth = .8, e.stroke(), t.stars.forEach((o, s) => {
|
|
774
|
+
let c = P(n, .05, 5e-4) * .3 + .7, l = 3.5 * c, u = `star-${i}-${s}`, f = r.current.get(u) ?? 0, p = e.createRadialGradient(o.x, o.y, 0, o.x, o.y, l * 4);
|
|
775
|
+
p.addColorStop(0, v(a, (.2 + .1 * f) * c)), p.addColorStop(1, v(a, 0)), e.fillStyle = p, e.beginPath(), e.arc(o.x, o.y, l * 4, 0, Math.PI * 2), e.fill(), e.beginPath(), e.arc(o.x, o.y, l + f * 2, 0, Math.PI * 2), e.fillStyle = v(a, (.8 + .2 * f) * c), e.fill();
|
|
776
|
+
let m = Math.sin(o.angle) < -.3;
|
|
777
|
+
e.textAlign = "center", e.textBaseline = "middle", m ? (e.font = h.font, e.fillStyle = v(a, .5 + .15 * f), e.fillText(o.short, o.x, o.y - 24), e.font = h.font, e.fillStyle = v(a, .8 + .15 * f), e.fillText(o.label, o.x, o.y - 11)) : (e.font = h.font, e.fillStyle = v(a, .5 + .15 * f), e.fillText(o.short, o.x, o.y + 11), e.font = h.font, e.fillStyle = v(a, .8 + .15 * f), e.fillText(o.label, o.x, o.y + 24)), O(d.current, u, o.x, o.y, l * 4 + 2, {
|
|
758
778
|
label: o.name,
|
|
759
779
|
value: o.label,
|
|
760
780
|
sublabel: t.abbreviation ?? t.name.slice(0, 6),
|
|
761
781
|
color: a
|
|
762
782
|
});
|
|
763
|
-
}), s > 0 &&
|
|
783
|
+
}), s > 0 && S(e, t.cx, t.cy, 16 * s, a, .15 * s), e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 12, 0, Math.PI * 2), e.strokeStyle = v(a, .1 + P(n, .03, 5e-4) * .05), e.lineWidth = 1, e.stroke(), e.font = h.font, e.textAlign = "center", e.textBaseline = "alphabetic", e.fillStyle = s > 0 ? t.color : h.color, e.fillText(t.abbreviation ?? t.name.slice(0, 6), t.cx, t.cy + t.baseR + 26), O(d.current, o, t.cx, t.cy, t.baseR + 5, {
|
|
764
784
|
label: t.name,
|
|
765
785
|
value: `${t.totalLabel ?? String(t.total ?? 0)} total`,
|
|
766
786
|
sublabel: `${t.percentage ?? 0}% committed · scatter ${t.scatter.toFixed(1)}`,
|
|
767
787
|
color: a
|
|
768
788
|
});
|
|
769
|
-
}), e.font =
|
|
770
|
-
}, !0),
|
|
771
|
-
width:
|
|
772
|
-
height:
|
|
789
|
+
}), e.font = _.font, e.textAlign = "center", e.textBaseline = "middle", e.fillStyle = _.color, e.fillText("▲ top = Base value · ▼▸ lower-right = Variations · ◂▼ lower-left = Commitment % · hover stars for details", B / 2, xe - 14), w(e, B, xe, n, .012);
|
|
790
|
+
}, !0), p.length === 0 ? /* @__PURE__ */ s(R, {
|
|
791
|
+
width: B,
|
|
792
|
+
height: xe,
|
|
773
793
|
"data-testid": t
|
|
774
794
|
}) : /* @__PURE__ */ c("div", {
|
|
775
795
|
"data-testid": t,
|
|
776
796
|
style: {
|
|
777
797
|
position: "relative",
|
|
778
|
-
width:
|
|
779
|
-
height:
|
|
798
|
+
width: B,
|
|
799
|
+
height: xe
|
|
780
800
|
},
|
|
781
801
|
children: [/* @__PURE__ */ s("canvas", {
|
|
782
802
|
ref: n,
|
|
783
803
|
role: "img",
|
|
784
804
|
"aria-label": "Contract value breakdown per contractor — multi-KPI constellation chart",
|
|
785
805
|
style: {
|
|
786
|
-
width:
|
|
787
|
-
height:
|
|
806
|
+
width: B,
|
|
807
|
+
height: xe,
|
|
788
808
|
display: "block"
|
|
789
809
|
}
|
|
790
|
-
}), /* @__PURE__ */ s(
|
|
810
|
+
}), /* @__PURE__ */ s(E, {
|
|
791
811
|
...l,
|
|
792
|
-
parentW:
|
|
793
|
-
parentH:
|
|
812
|
+
parentW: B,
|
|
813
|
+
parentH: xe
|
|
794
814
|
})]
|
|
795
815
|
});
|
|
796
816
|
}
|
|
797
817
|
//#endregion
|
|
798
818
|
//#region src/components/stackedHorizontalBarChart/StackedHorizontalBarChart.tsx
|
|
799
|
-
var
|
|
800
|
-
u.blue,
|
|
801
|
-
u.amber,
|
|
802
|
-
u.purple,
|
|
803
|
-
u.green
|
|
804
|
-
], V = {
|
|
819
|
+
var Oe = 680, ke = 220, Ae = 8, je = [u.teal], V = {
|
|
805
820
|
left: 8,
|
|
806
|
-
right:
|
|
821
|
+
right: 100,
|
|
807
822
|
top: 16,
|
|
808
823
|
bottom: 38
|
|
809
|
-
},
|
|
810
|
-
function
|
|
824
|
+
}, Me = 150, H = 6;
|
|
825
|
+
function Ne(e, t, n) {
|
|
811
826
|
if (e.measureText(t).width <= n) return t;
|
|
812
827
|
let r = t;
|
|
813
828
|
for (; r.length > 0 && e.measureText(r + "…").width > n;) r = r.slice(0, -1);
|
|
814
829
|
return r + "…";
|
|
815
830
|
}
|
|
816
|
-
function
|
|
831
|
+
function Pe(e) {
|
|
817
832
|
let t = Math.abs(e), n = e < 0 ? "-" : "";
|
|
818
833
|
return t >= 1e6 ? `${n}£${(t / 1e6).toFixed(1)}M` : t >= 1e3 ? `${n}£${(t / 1e3).toFixed(1)}K` : `${n}£${t.toFixed(0)}`;
|
|
819
834
|
}
|
|
820
|
-
function
|
|
821
|
-
let n = a(null), r = a(/* @__PURE__ */ new Map()), [i, l] = o(!1), { items: d = [], totals:
|
|
822
|
-
width:
|
|
823
|
-
height:
|
|
835
|
+
function Fe({ data: e, "data-testid": t }) {
|
|
836
|
+
let n = a(null), r = a(/* @__PURE__ */ new Map()), [i, l] = o(!1), { items: d = [], totals: f } = e, p = d.filter((e) => typeof e == "object" && !!e), m = [...p].sort((e, t) => (t.total ?? 0) - (e.total ?? 0)), y = i ? m : m.slice(0, Ae), b = y.length, x = Math.max(...m.map((e) => Math.abs(e.total ?? 0)), 1), C = b * H + Math.max(0, b - 1) * 24, w = V.top + V.bottom + C, T = Oe - V.left - Me - V.right, O = p.length === 0, { hoveredRef: A, tooltip: M, hitZonesRef: N } = D(n, {
|
|
837
|
+
width: Oe,
|
|
838
|
+
height: w
|
|
824
839
|
});
|
|
825
|
-
return
|
|
826
|
-
|
|
827
|
-
let a =
|
|
828
|
-
e.font =
|
|
840
|
+
return be(n, Oe, w, (e, t) => {
|
|
841
|
+
I(r.current, A.current), N.current = [], y.forEach((n, i) => {
|
|
842
|
+
let a = je[i % je.length], o = F(t, i, b, j), s = V.top + i * (H + 24), c = V.left + Me, l = r.current.get(n.id) ?? 0, d = Math.max(n.base ?? 0, 0), f = Math.max(n.total ?? 0, 0), p = d / x * T * o, m = f / x * T * o;
|
|
843
|
+
if (m - p, e.font = h.font, e.fillStyle = l > 0 ? a : h.color, e.textAlign = "right", e.textBaseline = "middle", e.fillText(Ne(e, n.name ?? "", Me - 16), c - 8, s + H / 2), k(N.current, n.id, 0, s, c, H, {
|
|
829
844
|
label: n.name,
|
|
830
|
-
value: `${n.totalLabel ??
|
|
831
|
-
sublabel: `Base ${n.baseLabel ??
|
|
845
|
+
value: `${n.totalLabel ?? Pe(n.total ?? 0)} total`,
|
|
846
|
+
sublabel: `Base ${n.baseLabel ?? Pe(n.base ?? 0)} + Var ${n.variationLabel ?? Pe(n.variation ?? 0)}`,
|
|
832
847
|
color: a
|
|
833
|
-
}),
|
|
834
|
-
0,
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
848
|
+
}), m > 0) {
|
|
849
|
+
l > 0 && S(e, c + m / 2, s + H / 2, m * .15, u.teal, .12 * l);
|
|
850
|
+
let t = e.createLinearGradient(c, 0, c + m, 0);
|
|
851
|
+
t.addColorStop(0, v(u.tealDark, .85)), t.addColorStop(1, v(u.teal, 1)), e.fillStyle = t, e.beginPath(), e.roundRect(c, s, m, H, H / 2), e.fill();
|
|
852
|
+
}
|
|
853
|
+
let _ = T - m * o;
|
|
854
|
+
if (_ > 2) {
|
|
855
|
+
let t = c + m * o, n = e.createLinearGradient(t, 0, c + T, 0);
|
|
856
|
+
n.addColorStop(0, v(u.tealDark, .35)), n.addColorStop(1, v(u.tealDark, .08)), e.fillStyle = n, e.beginPath(), e.roundRect(t, s, _, H, [
|
|
857
|
+
0,
|
|
858
|
+
H / 2,
|
|
859
|
+
H / 2,
|
|
860
|
+
0
|
|
861
|
+
]), e.fill();
|
|
862
|
+
}
|
|
863
|
+
if (m > 4) {
|
|
864
|
+
let t = c + m * o, n = s + H;
|
|
865
|
+
e.fillStyle = v(u.t1, o), e.beginPath(), e.moveTo(t, n), e.lineTo(t - 5, n + 9), e.lineTo(t + 5, n + 9), e.closePath(), e.fill();
|
|
866
|
+
}
|
|
867
|
+
o > .35 && (e.globalAlpha = Math.min(1, (o - .35) / .4), e.font = g.font, e.fillStyle = l > 0 ? a : g.color, e.textAlign = "left", e.textBaseline = "middle", e.fillText(n.totalLabel ?? Pe(n.total ?? 0), c + T + 28, s + H / 2), e.globalAlpha = 1), k(N.current, n.id, c, s, Math.max(m, 1), H, {
|
|
839
868
|
label: n.name,
|
|
840
|
-
value: n.totalLabel ??
|
|
841
|
-
sublabel: `${n.baseLabel ??
|
|
869
|
+
value: n.totalLabel ?? Pe(n.total ?? 0),
|
|
870
|
+
sublabel: `${n.baseLabel ?? Pe(n.base ?? 0)} + ${n.variationLabel ?? Pe(n.variation ?? 0)}`,
|
|
842
871
|
color: a
|
|
843
872
|
});
|
|
844
873
|
});
|
|
845
|
-
let n =
|
|
846
|
-
e.textBaseline = "middle", e.font =
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
874
|
+
let n = w - 14;
|
|
875
|
+
e.textBaseline = "middle", e.font = _.font, e.textAlign = "left";
|
|
876
|
+
let i = e.createLinearGradient(V.left + Me, 0, V.left + Me + 14, 0);
|
|
877
|
+
i.addColorStop(0, v(u.tealDark, .85)), i.addColorStop(1, v(u.teal, 1)), e.fillStyle = i, e.beginPath(), e.roundRect(V.left + Me, n - 3, 14, 6, 2), e.fill(), e.fillStyle = _.color, e.fillText("base value", V.left + Me + 18, n), e.fillStyle = v(u.teal, .35), e.beginPath(), e.roundRect(V.left + Me + 160, n - 3, 14, 6, 2), e.fill(), e.fillStyle = _.color, e.fillText("approved variations", V.left + Me + 178, n), e.font = _.font, e.textAlign = "right", e.fillStyle = _.color, e.fillText(`Portfolio: ${Pe(f?.total ?? 0)}`, Oe - 8, n);
|
|
878
|
+
}, !0, { easing: j }), O ? /* @__PURE__ */ s(R, {
|
|
879
|
+
width: Oe,
|
|
880
|
+
height: ke,
|
|
850
881
|
message: "No contract data available",
|
|
851
882
|
"data-testid": t
|
|
852
883
|
}) : /* @__PURE__ */ c("div", {
|
|
853
884
|
"data-testid": t,
|
|
854
885
|
style: {
|
|
855
|
-
width:
|
|
886
|
+
width: Oe,
|
|
856
887
|
transition: "all 0.25s ease"
|
|
857
888
|
},
|
|
858
889
|
children: [/* @__PURE__ */ c("div", {
|
|
@@ -862,19 +893,19 @@ function Me({ data: e, "data-testid": t }) {
|
|
|
862
893
|
role: "img",
|
|
863
894
|
"aria-label": "Total contract value per contractor — horizontal bar chart",
|
|
864
895
|
style: {
|
|
865
|
-
width:
|
|
866
|
-
height:
|
|
896
|
+
width: Oe,
|
|
897
|
+
height: w,
|
|
867
898
|
display: "block",
|
|
868
899
|
borderRadius: 8
|
|
869
900
|
}
|
|
870
|
-
}), /* @__PURE__ */ s(
|
|
871
|
-
...
|
|
872
|
-
parentW:
|
|
873
|
-
parentH:
|
|
901
|
+
}), /* @__PURE__ */ s(E, {
|
|
902
|
+
...M,
|
|
903
|
+
parentW: Oe,
|
|
904
|
+
parentH: w
|
|
874
905
|
})]
|
|
875
|
-
}),
|
|
906
|
+
}), p.length > Ae && /* @__PURE__ */ s("div", {
|
|
876
907
|
style: { marginTop: 8 },
|
|
877
|
-
children: /* @__PURE__ */ s(
|
|
908
|
+
children: /* @__PURE__ */ s(oe, {
|
|
878
909
|
expanded: i,
|
|
879
910
|
onToggle: () => l((e) => !e)
|
|
880
911
|
})
|
|
@@ -883,7 +914,7 @@ function Me({ data: e, "data-testid": t }) {
|
|
|
883
914
|
}
|
|
884
915
|
//#endregion
|
|
885
916
|
//#region src/utils/numberFormat.ts
|
|
886
|
-
var
|
|
917
|
+
var Ie = [
|
|
887
918
|
{
|
|
888
919
|
value: 0xe8d4a51000,
|
|
889
920
|
suffix: "T",
|
|
@@ -907,66 +938,66 @@ var Ne = [
|
|
|
907
938
|
];
|
|
908
939
|
function U(e, t = 1) {
|
|
909
940
|
let n = Math.abs(e), r = e < 0 ? "-" : "";
|
|
910
|
-
for (let e of
|
|
941
|
+
for (let e of Ie) if (n >= e.value) return `${r}${(n / e.divisor).toFixed(t)}${e.suffix}`;
|
|
911
942
|
return `${r}${n.toFixed(0)}`;
|
|
912
943
|
}
|
|
913
944
|
//#endregion
|
|
914
945
|
//#region src/components/rankedCardLeaderboard/RankedCardLeaderboard.tsx
|
|
915
|
-
var
|
|
916
|
-
function
|
|
917
|
-
let r = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()),
|
|
918
|
-
width:
|
|
946
|
+
var Le = 780, W = 240, Re = 12, ze = 10, Be = 5, Ve = (Le - 2 * Re - (Be - 1) * ze) / Be;
|
|
947
|
+
function He({ items: e = [], "data-testid": t }) {
|
|
948
|
+
let r = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), d = [...i(() => e.filter((e) => typeof e == "object" && !!e), [e])].sort((e, t) => (t.count ?? 0) - (e.count ?? 0)).slice(0, 5), f = d.reduce((e, t) => e + (t.count ?? 0), 0), m = Math.min(Be, d.length), _ = m > 0 ? 2 * Re + m * Ve + (m - 1) * ze : Le, { hoveredRef: y, tooltip: b, hitZonesRef: C } = D(r, {
|
|
949
|
+
width: _,
|
|
919
950
|
height: W
|
|
920
951
|
});
|
|
921
952
|
return n(() => {
|
|
922
953
|
let e = r.current;
|
|
923
954
|
if (!e) return;
|
|
924
|
-
let t =
|
|
955
|
+
let t = x(e, _, W);
|
|
925
956
|
o.current = 0;
|
|
926
|
-
let n =
|
|
957
|
+
let n = Ve, i = W * .84, a = W * .08, s = Re, c, m = () => {
|
|
927
958
|
o.current++;
|
|
928
959
|
let e = o.current;
|
|
929
|
-
t.clearRect(0, 0,
|
|
930
|
-
let n = t ===
|
|
960
|
+
t.clearRect(0, 0, _, W), t.letterSpacing = h.letterSpacing, C.current = [], l.current.forEach((e, t) => {
|
|
961
|
+
let n = t === y.current ? 1 : 0, r = e + (n - e) * .12;
|
|
931
962
|
Math.abs(r - n) < .005 ? n === 0 ? l.current.delete(t) : l.current.set(t, 1) : l.current.set(t, r);
|
|
932
|
-
}),
|
|
933
|
-
let c = o === 0,
|
|
934
|
-
t.fillStyle =
|
|
935
|
-
let
|
|
936
|
-
|
|
937
|
-
let
|
|
938
|
-
for (; t.measureText(
|
|
939
|
-
|
|
940
|
-
let
|
|
941
|
-
if (
|
|
942
|
-
t.font =
|
|
943
|
-
let e =
|
|
963
|
+
}), y.current && !l.current.has(y.current) && l.current.set(y.current, 0), d.forEach((r, o) => {
|
|
964
|
+
let c = o === 0, d = o === 0 ? u.red : o === 1 ? u.amber : p[o % p.length], m = s + o * (n + ze), h = l.current.get(r.id) ?? 0, _ = h * 8, y = m - _ / 2, b = n + _, x = c ? P(e, .04, 3e-4) * .06 + .06 : 0;
|
|
965
|
+
t.fillStyle = v(d, .08 + h * .07), t.beginPath(), t.roundRect(y, a, b, i, 6), t.fill(), t.strokeStyle = v(d, .2 + h * .4 + x), t.lineWidth = c ? 1.5 : 1, t.stroke(), (h > .01 || c) && S(t, y + b / 2, a + i / 2, b * .55, d, x + h * .14), t.font = g.font, t.textAlign = "left", t.textBaseline = "top", t.fillStyle = v(d, .5 + h * .35), t.fillText(`#${o + 1}`, y + 7, a + 6);
|
|
966
|
+
let w = Math.min(n * .28, i * .32, 72), T = y + b / 2, E = a + i * .38, D = t.createRadialGradient(T, E - w * .2, 0, T, E, w);
|
|
967
|
+
D.addColorStop(0, v(d, .5 + h * .2)), D.addColorStop(1, v(d, .2 + h * .1)), t.beginPath(), t.arc(T, E, w, 0, Math.PI * 2), t.fillStyle = D, t.fill(), t.strokeStyle = v(d, .4 + h * .3), t.lineWidth = 1, t.stroke(), t.font = g.font, t.textAlign = "center", t.textBaseline = "middle", t.fillStyle = v(u.t1, .9);
|
|
968
|
+
let O = r.abbreviation ?? r.name ?? "", A = w * 1.7, j = O;
|
|
969
|
+
for (; t.measureText(j).width > A && j.length > 1;) j = j.slice(0, -1);
|
|
970
|
+
j !== O && (j = j.slice(0, -1) + "…"), t.fillText(j, T, E);
|
|
971
|
+
let M = r.count == null ? null : U(r.count), N = r.label ?? M;
|
|
972
|
+
if (N) {
|
|
973
|
+
t.font = g.font, t.textBaseline = "alphabetic", t.fillStyle = v(d, .9 + h * .1);
|
|
974
|
+
let e = b - 16, n = N;
|
|
944
975
|
for (; t.measureText(n).width > e && n.length > 1;) n = n.slice(0, -1);
|
|
945
|
-
n !==
|
|
976
|
+
n !== N && (n = n.slice(0, -1) + "…"), t.fillText(n, T, a + i * .74);
|
|
946
977
|
}
|
|
947
|
-
let F = Math.round((r.count ?? 0) / (
|
|
948
|
-
|
|
978
|
+
let F = Math.round((r.count ?? 0) / (f || 1) * 100);
|
|
979
|
+
k(C.current, r.id, m, a, n, i, {
|
|
949
980
|
label: r.name,
|
|
950
|
-
value: `${
|
|
981
|
+
value: `${N} · ${F}% of total`,
|
|
951
982
|
sublabel: `Rank #${o + 1}`,
|
|
952
|
-
color:
|
|
983
|
+
color: d
|
|
953
984
|
});
|
|
954
|
-
}),
|
|
985
|
+
}), w(t, _, W, e, .015), c = requestAnimationFrame(m);
|
|
955
986
|
};
|
|
956
|
-
return
|
|
987
|
+
return m(), () => cancelAnimationFrame(c);
|
|
957
988
|
}, [
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
]),
|
|
962
|
-
width:
|
|
989
|
+
d,
|
|
990
|
+
f,
|
|
991
|
+
_
|
|
992
|
+
]), d.length === 0 ? /* @__PURE__ */ s(R, {
|
|
993
|
+
width: _,
|
|
963
994
|
height: W,
|
|
964
995
|
"data-testid": t
|
|
965
996
|
}) : /* @__PURE__ */ c("div", {
|
|
966
997
|
"data-testid": t,
|
|
967
998
|
style: {
|
|
968
999
|
position: "relative",
|
|
969
|
-
width:
|
|
1000
|
+
width: _,
|
|
970
1001
|
height: W
|
|
971
1002
|
},
|
|
972
1003
|
children: [/* @__PURE__ */ s("canvas", {
|
|
@@ -974,14 +1005,14 @@ function ze({ items: e = [], "data-testid": t }) {
|
|
|
974
1005
|
role: "img",
|
|
975
1006
|
"aria-label": "Contractor rank — open EW count per contractor",
|
|
976
1007
|
style: {
|
|
977
|
-
width:
|
|
1008
|
+
width: _,
|
|
978
1009
|
height: W,
|
|
979
1010
|
display: "block",
|
|
980
1011
|
borderRadius: 8
|
|
981
1012
|
}
|
|
982
|
-
}), /* @__PURE__ */ s(
|
|
983
|
-
...
|
|
984
|
-
parentW:
|
|
1013
|
+
}), /* @__PURE__ */ s(E, {
|
|
1014
|
+
...b,
|
|
1015
|
+
parentW: _,
|
|
985
1016
|
parentH: W
|
|
986
1017
|
})]
|
|
987
1018
|
});
|
|
@@ -989,44 +1020,44 @@ function ze({ items: e = [], "data-testid": t }) {
|
|
|
989
1020
|
//#endregion
|
|
990
1021
|
//#region src/components/dotMatrixChart/DotMatrixChart.tsx
|
|
991
1022
|
var G = 680, K = 260;
|
|
992
|
-
function
|
|
993
|
-
let r = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), { hoveredRef: d, tooltip:
|
|
1023
|
+
function Ue({ items: e = [], "data-testid": t }) {
|
|
1024
|
+
let r = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), { hoveredRef: d, tooltip: f, hitZonesRef: p } = D(r, {
|
|
994
1025
|
width: G,
|
|
995
1026
|
height: K
|
|
996
|
-
}),
|
|
1027
|
+
}), m = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
997
1028
|
return n(() => {
|
|
998
1029
|
let e = r.current;
|
|
999
1030
|
if (!e) return;
|
|
1000
|
-
let t =
|
|
1031
|
+
let t = x(e, G, K);
|
|
1001
1032
|
o.current = 0;
|
|
1002
|
-
let n =
|
|
1033
|
+
let n = m.length, i = Math.max(...m.map((e) => e.count), 1), a = i, s = G * .05, c = K * .1, f = G * .9 / n, g = K * .7 / a, _ = m.reduce((e, t) => e + t.count, 0), y, b = () => {
|
|
1003
1034
|
o.current++;
|
|
1004
1035
|
let e = o.current;
|
|
1005
|
-
t.clearRect(0, 0, G, K),
|
|
1036
|
+
t.clearRect(0, 0, G, K), p.current = [], l.current.forEach((e, t) => {
|
|
1006
1037
|
let n = t === d.current ? 1 : 0, r = e + (n - e) * .12;
|
|
1007
1038
|
Math.abs(r - n) < .005 ? n === 0 ? l.current.delete(t) : l.current.set(t, 1) : l.current.set(t, r);
|
|
1008
|
-
}), d.current && !l.current.has(d.current) && l.current.set(d.current, 0),
|
|
1009
|
-
let o = n.count === i, d = u.blue,
|
|
1039
|
+
}), d.current && !l.current.has(d.current) && l.current.set(d.current, 0), C(t, G, K, e, 40, v(u.blue, .04)), m.forEach((n, r) => {
|
|
1040
|
+
let o = n.count === i, d = u.blue, m = l.current.get(`${n.category}-col`) ?? 0;
|
|
1010
1041
|
for (let u = 0; u < a; u++) {
|
|
1011
|
-
let a = s + r *
|
|
1042
|
+
let a = s + r * f + f / 2, h = c + u * g + g / 2, y = Math.min(f, g) * .38;
|
|
1012
1043
|
if (u >= i - n.count) {
|
|
1013
|
-
let i =
|
|
1014
|
-
(o ||
|
|
1044
|
+
let i = y * (1 + (P(e, .04, 5e-4) + Math.sin(r * .6 + u * 1.2) * .3) * .12);
|
|
1045
|
+
(o || m > .01) && S(t, a, h, i * 3, d, (o ? .2 : .1) + m * .1), t.beginPath(), t.arc(a, h, i, 0, Math.PI * 2), t.fillStyle = v(d, o ? .8 : .5 + m * .2), t.fill();
|
|
1015
1046
|
let s = `${n.category}-${u}`;
|
|
1016
|
-
|
|
1047
|
+
O(p.current, s, a, h, y + 4, {
|
|
1017
1048
|
label: n.fullName,
|
|
1018
1049
|
value: `${n.count} Early Warnings`,
|
|
1019
|
-
sublabel: `${Math.round(n.count /
|
|
1050
|
+
sublabel: `${Math.round(n.count / _ * 100)}% of total`,
|
|
1020
1051
|
color: d
|
|
1021
1052
|
}), l.current.get(`${n.category}-col`);
|
|
1022
|
-
} else t.beginPath(), t.arc(a,
|
|
1053
|
+
} else t.beginPath(), t.arc(a, h, 1, 0, Math.PI * 2), t.fillStyle = v(d, .08), t.fill();
|
|
1023
1054
|
}
|
|
1024
|
-
let
|
|
1025
|
-
t.font =
|
|
1026
|
-
}),
|
|
1055
|
+
let y = c + a * g + 16;
|
|
1056
|
+
t.font = h.font, t.textAlign = "center", t.textBaseline = "alphabetic", t.fillStyle = o ? u.blue : v(u.t2, .65), t.fillText(n.category, s + r * f + f / 2, y);
|
|
1057
|
+
}), w(t, G, K, e, .015), y = requestAnimationFrame(b);
|
|
1027
1058
|
};
|
|
1028
|
-
return
|
|
1029
|
-
}, [
|
|
1059
|
+
return b(), () => cancelAnimationFrame(y);
|
|
1060
|
+
}, [m]), m.length === 0 ? /* @__PURE__ */ s(R, {
|
|
1030
1061
|
width: G,
|
|
1031
1062
|
height: K,
|
|
1032
1063
|
"data-testid": t
|
|
@@ -1047,8 +1078,8 @@ function Be({ items: e = [], "data-testid": t }) {
|
|
|
1047
1078
|
display: "block",
|
|
1048
1079
|
borderRadius: 8
|
|
1049
1080
|
}
|
|
1050
|
-
}), /* @__PURE__ */ s(
|
|
1051
|
-
...
|
|
1081
|
+
}), /* @__PURE__ */ s(E, {
|
|
1082
|
+
...f,
|
|
1052
1083
|
parentW: G,
|
|
1053
1084
|
parentH: K
|
|
1054
1085
|
})]
|
|
@@ -1056,8 +1087,8 @@ function Be({ items: e = [], "data-testid": t }) {
|
|
|
1056
1087
|
}
|
|
1057
1088
|
//#endregion
|
|
1058
1089
|
//#region src/components/lineChart/LineChart.tsx
|
|
1059
|
-
function
|
|
1060
|
-
return /* @__PURE__ */ s(
|
|
1090
|
+
function We({ rows: e = [], className: t, colors: n }) {
|
|
1091
|
+
return /* @__PURE__ */ s(te, {
|
|
1061
1092
|
rows: e,
|
|
1062
1093
|
variant: "line",
|
|
1063
1094
|
className: t,
|
|
@@ -1066,7 +1097,7 @@ function Ve({ rows: e = [], className: t, colors: n }) {
|
|
|
1066
1097
|
}
|
|
1067
1098
|
//#endregion
|
|
1068
1099
|
//#region src/components/constants.ts
|
|
1069
|
-
var
|
|
1100
|
+
var Ge = [
|
|
1070
1101
|
"#4C93D9",
|
|
1071
1102
|
"#5DA537",
|
|
1072
1103
|
"#F3862C",
|
|
@@ -1074,7 +1105,7 @@ var He = [
|
|
|
1074
1105
|
"#A0B724",
|
|
1075
1106
|
"#EEBF3B",
|
|
1076
1107
|
"#3C45D1"
|
|
1077
|
-
],
|
|
1108
|
+
], Ke = {
|
|
1078
1109
|
nodes: [
|
|
1079
1110
|
{
|
|
1080
1111
|
id: "supplier-x",
|
|
@@ -1117,8 +1148,8 @@ var He = [
|
|
|
1117
1148
|
};
|
|
1118
1149
|
//#endregion
|
|
1119
1150
|
//#region src/components/miniBars/MiniBars.tsx
|
|
1120
|
-
function
|
|
1121
|
-
let r = n?.slices ??
|
|
1151
|
+
function qe({ rows: e = [], className: t, colors: n }) {
|
|
1152
|
+
let r = n?.slices ?? Ge;
|
|
1122
1153
|
return /* @__PURE__ */ s("div", {
|
|
1123
1154
|
className: ["d3-mini-bars", t].filter(Boolean).join(" "),
|
|
1124
1155
|
children: e.map(([e, t, n], i) => /* @__PURE__ */ c("div", {
|
|
@@ -1144,7 +1175,7 @@ function We({ rows: e = [], className: t, colors: n }) {
|
|
|
1144
1175
|
width: Math.max(0, Math.min(100, t)),
|
|
1145
1176
|
height: "12",
|
|
1146
1177
|
rx: "6",
|
|
1147
|
-
className: `d3-mini-fill tone-${i %
|
|
1178
|
+
className: `d3-mini-fill tone-${i % Ge.length}`,
|
|
1148
1179
|
fill: r[i % r.length]
|
|
1149
1180
|
})]
|
|
1150
1181
|
})
|
|
@@ -1156,135 +1187,142 @@ function We({ rows: e = [], className: t, colors: n }) {
|
|
|
1156
1187
|
}
|
|
1157
1188
|
//#endregion
|
|
1158
1189
|
//#region src/components/radialFanTreeChart/RadialFanTreeChart.tsx
|
|
1159
|
-
var
|
|
1160
|
-
function
|
|
1161
|
-
let
|
|
1190
|
+
var Je = 770, Ye = 320, Xe = 60, Ze = 28;
|
|
1191
|
+
function Qe({ total: e = 0, totalLabel: t, items: r = [], width: o = Je, colorOffset: l = 0, "data-testid": d }) {
|
|
1192
|
+
let f = a(null), p = a(/* @__PURE__ */ new Map()), _ = a(0), y = i(() => r.filter((e) => typeof e == "object" && !!e), [r]), b = i(() => Math.max(Ye, Xe + Math.max(0, y.length - 1) * Ze), [y.length]), C = b, { hoveredRef: w, tooltip: T, hitZonesRef: k } = D(f, {
|
|
1162
1193
|
width: o,
|
|
1163
|
-
height:
|
|
1194
|
+
height: b
|
|
1164
1195
|
});
|
|
1165
1196
|
return n(() => {
|
|
1166
|
-
let n =
|
|
1197
|
+
let n = f.current;
|
|
1167
1198
|
if (!n) return;
|
|
1168
|
-
let r =
|
|
1199
|
+
let r = x(n, o, C);
|
|
1169
1200
|
_.current = 0;
|
|
1170
|
-
let i =
|
|
1201
|
+
let i = b / 2, a = o - 200;
|
|
1202
|
+
Math.max(...y.map((e) => e.count ?? 0), 1);
|
|
1203
|
+
let s = y.length > 1 ? (b - 60) / (y.length - 1) : 0, c = y.map((e, t) => ({
|
|
1171
1204
|
x: a,
|
|
1172
|
-
y: 30 + t *
|
|
1173
|
-
})),
|
|
1205
|
+
y: 30 + t * s
|
|
1206
|
+
})), d, T = () => {
|
|
1174
1207
|
_.current++;
|
|
1175
1208
|
let n = _.current;
|
|
1176
|
-
r.clearRect(0, 0, o,
|
|
1177
|
-
let
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
let
|
|
1209
|
+
r.clearRect(0, 0, o, C), r.letterSpacing = h.letterSpacing;
|
|
1210
|
+
let s = A(Math.min(n / 72, 1));
|
|
1211
|
+
I(p.current, w.current), k.current = [];
|
|
1212
|
+
let f = m[l % m.length];
|
|
1213
|
+
y.forEach((t, n) => {
|
|
1214
|
+
let o = F(s, n, y.length, A), l = c[n], d = p.current.get(t.id) ?? 0;
|
|
1215
|
+
if (o < .01) return;
|
|
1216
|
+
let m = Math.atan2(l.y - i, l.x - 88), _ = 88 + Math.cos(m) * 32, b = i + Math.sin(m) * 32, x = _ + (a - _) * .4, C = b, w = _ + (a - _) * .6, T = l.y, E = o;
|
|
1182
1217
|
r.beginPath();
|
|
1183
1218
|
for (let e = 0; e <= 40; e++) {
|
|
1184
|
-
let t = e / 40 *
|
|
1185
|
-
e === 0 ? r.moveTo(n,
|
|
1219
|
+
let t = e / 40 * E, n = (1 - t) ** 3 * _ + 3 * (1 - t) ** 2 * t * x + 3 * (1 - t) * t ** 2 * w + t ** 3 * l.x, i = (1 - t) ** 3 * b + 3 * (1 - t) ** 2 * t * C + 3 * (1 - t) * t ** 2 * T + t ** 3 * l.y;
|
|
1220
|
+
e === 0 ? r.moveTo(n, i) : r.lineTo(n, i);
|
|
1186
1221
|
}
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1222
|
+
let D = r.createLinearGradient(_, b, l.x, l.y);
|
|
1223
|
+
if (D.addColorStop(0, v(f, d > 0 ? 1 : .8)), D.addColorStop(1, v(f, d > 0 ? 1 : .7)), r.strokeStyle = D, r.lineWidth = d > 0 ? 2 : 1.33, r.stroke(), o > .85) {
|
|
1224
|
+
let n = Math.min(1, (o - .85) / .15);
|
|
1225
|
+
S(r, l.x, l.y, 40, f, (.2 + d * .2) * n), r.beginPath(), r.arc(l.x, l.y, 20 * n, 0, Math.PI * 2), r.fillStyle = v(f, n), r.fill();
|
|
1226
|
+
let i = U(t.count ?? 0);
|
|
1227
|
+
O(k.current, t.id, l.x, l.y, 28, {
|
|
1192
1228
|
label: t.name,
|
|
1193
|
-
value:
|
|
1229
|
+
value: i,
|
|
1194
1230
|
sublabel: `${Math.round((t.count ?? 0) / (e || 1) * 100)}% of total`,
|
|
1195
|
-
color:
|
|
1196
|
-
}), r.globalAlpha = n, r.font =
|
|
1197
|
-
let
|
|
1198
|
-
r.fillStyle =
|
|
1199
|
-
let
|
|
1200
|
-
r.font =
|
|
1231
|
+
color: f
|
|
1232
|
+
}), r.globalAlpha = n, r.font = h.font, r.textAlign = "left";
|
|
1233
|
+
let a = t.abbreviation ?? t.name?.slice(0, 6) ?? "", s = ` ${U(t.count ?? 0)}`, c = l.x + 20 + 8, p = l.y + 4;
|
|
1234
|
+
r.fillStyle = d > 0 ? f : v(u.t2, .85), r.fillText(a, c, p);
|
|
1235
|
+
let m = r.measureText(a).width;
|
|
1236
|
+
r.font = g.font, r.fillStyle = d > 0 ? f : u.t1, r.fillText(s, c + m, p), r.globalAlpha = 1;
|
|
1201
1237
|
}
|
|
1202
|
-
})
|
|
1203
|
-
|
|
1238
|
+
});
|
|
1239
|
+
let b = 32 * s;
|
|
1240
|
+
if (r.beginPath(), r.arc(88, i, b, 0, Math.PI * 2), r.fillStyle = v("#D9D9D9", .01 * s), r.fill(), r.save(), r.beginPath(), r.arc(88, i, b, 0, Math.PI * 2), r.clip(), r.shadowColor = v(f, .6 * s), r.shadowBlur = 19.88, r.strokeStyle = v(f, 0), r.lineWidth = 1, r.beginPath(), r.arc(88, i, b, 0, Math.PI * 2), r.stroke(), r.shadowColor = "transparent", r.shadowBlur = 0, r.restore(), r.beginPath(), r.arc(88, i, b, 0, Math.PI * 2), r.strokeStyle = v(f, .8 * s), r.lineWidth = 1, r.stroke(), s > .4) {
|
|
1241
|
+
r.globalAlpha = Math.min(1, (s - .4) / .4);
|
|
1204
1242
|
let n = t ?? U(e, 0);
|
|
1205
1243
|
r.font = "500 16px 'Satoshi Variable', 'DM Sans', sans-serif";
|
|
1206
1244
|
let a = n;
|
|
1207
1245
|
for (; r.measureText(a).width > 54.4 && a.length > 1;) a = a.slice(0, -1);
|
|
1208
|
-
a !== n && (a = a.slice(0, -1) + "…"), r.fillStyle = u.t1, r.textAlign = "center", r.textBaseline = "middle", r.fillText(a, 88, i), r.globalAlpha = 1;
|
|
1246
|
+
a !== n && (a = a.slice(0, -1) + "…"), r.fillStyle = u.t1, r.textAlign = "center", r.textBaseline = "middle", r.fillText(a, 88, i), r.textBaseline = "alphabetic", r.globalAlpha = 1;
|
|
1209
1247
|
}
|
|
1210
|
-
|
|
1248
|
+
O(k.current, "__root__", 88, i, 32, {
|
|
1211
1249
|
label: t ?? "Total",
|
|
1212
1250
|
value: U(e, 0),
|
|
1213
|
-
sublabel: `${
|
|
1214
|
-
color:
|
|
1215
|
-
}),
|
|
1251
|
+
sublabel: `${y.length} items`,
|
|
1252
|
+
color: f
|
|
1253
|
+
}), d = requestAnimationFrame(T);
|
|
1216
1254
|
};
|
|
1217
|
-
return
|
|
1255
|
+
return T(), () => cancelAnimationFrame(d);
|
|
1218
1256
|
}, [
|
|
1219
1257
|
e,
|
|
1220
1258
|
t,
|
|
1259
|
+
y,
|
|
1221
1260
|
b,
|
|
1222
|
-
x,
|
|
1223
1261
|
o
|
|
1224
|
-
]),
|
|
1262
|
+
]), y.length === 0 ? /* @__PURE__ */ s(R, {
|
|
1225
1263
|
width: o,
|
|
1226
|
-
height:
|
|
1227
|
-
"data-testid":
|
|
1264
|
+
height: Ye,
|
|
1265
|
+
"data-testid": d
|
|
1228
1266
|
}) : /* @__PURE__ */ c("div", {
|
|
1229
|
-
"data-testid":
|
|
1267
|
+
"data-testid": d,
|
|
1230
1268
|
style: {
|
|
1231
1269
|
position: "relative",
|
|
1232
1270
|
width: o,
|
|
1233
|
-
height:
|
|
1271
|
+
height: C
|
|
1234
1272
|
},
|
|
1235
1273
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1236
|
-
ref:
|
|
1274
|
+
ref: f,
|
|
1237
1275
|
role: "img",
|
|
1238
1276
|
"aria-label": "NCE fault tree — NCEs per contractor as branching tree",
|
|
1239
1277
|
style: {
|
|
1240
1278
|
width: o,
|
|
1241
|
-
height:
|
|
1279
|
+
height: C,
|
|
1242
1280
|
display: "block"
|
|
1243
1281
|
}
|
|
1244
|
-
}), /* @__PURE__ */ s(
|
|
1245
|
-
...
|
|
1282
|
+
}), /* @__PURE__ */ s(E, {
|
|
1283
|
+
...T,
|
|
1246
1284
|
parentW: o,
|
|
1247
|
-
parentH:
|
|
1285
|
+
parentH: C
|
|
1248
1286
|
})]
|
|
1249
1287
|
});
|
|
1250
1288
|
}
|
|
1251
1289
|
//#endregion
|
|
1252
1290
|
//#region src/components/pieChart/PieChart.tsx
|
|
1253
|
-
var
|
|
1254
|
-
function
|
|
1255
|
-
let o = a(null),
|
|
1256
|
-
width:
|
|
1257
|
-
height:
|
|
1291
|
+
var $e = 192, et = $e, tt = $e + 80;
|
|
1292
|
+
function nt({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
1293
|
+
let o = a(null), d = a(/* @__PURE__ */ new Map()), f = a(0), m = i?.slices ?? p, { hoveredRef: h, tooltip: g, hitZonesRef: _ } = D(o, {
|
|
1294
|
+
width: et,
|
|
1295
|
+
height: tt
|
|
1258
1296
|
});
|
|
1259
1297
|
return n(() => {
|
|
1260
1298
|
let n = o.current;
|
|
1261
1299
|
if (!n) return;
|
|
1262
|
-
let r =
|
|
1263
|
-
|
|
1264
|
-
let i =
|
|
1265
|
-
|
|
1266
|
-
let n =
|
|
1267
|
-
r.clearRect(0, 0,
|
|
1300
|
+
let r = x(n, et, tt);
|
|
1301
|
+
f.current = 0;
|
|
1302
|
+
let i = et / 2, a = $e / 2, s = $e * .4, c = t === "donut" ? $e * .21 : 0, l = e.reduce((e, t) => e + (t.pricing ?? 0), 0) || 1, p, g = () => {
|
|
1303
|
+
f.current++;
|
|
1304
|
+
let n = f.current;
|
|
1305
|
+
r.clearRect(0, 0, et, tt);
|
|
1268
1306
|
let o = 1 - (1 - Math.min(n / 48, 1)) ** 3;
|
|
1269
|
-
|
|
1270
|
-
let
|
|
1307
|
+
I(d.current, h.current), _.current = [];
|
|
1308
|
+
let y = -Math.PI / 2;
|
|
1271
1309
|
e.forEach((e, t) => {
|
|
1272
|
-
let
|
|
1273
|
-
|
|
1310
|
+
let f = (e.pricing ?? 0) / l, p = f * Math.PI * 2 * o, h = y + p, g = m[t % m.length], b = d.current.get(e.id ?? `sl-${t}`) ?? 0, x = y + p / 2, C = (s + c) / 2, w = i + Math.cos(x) * C, T = a + Math.sin(x) * C, E = (s - c) / 2 + 8;
|
|
1311
|
+
O(_.current, e.id ?? `sl-${t}`, w, T, E, {
|
|
1274
1312
|
label: e.vendor,
|
|
1275
|
-
value: `${e.pricing ?? 0} (${Math.round(
|
|
1276
|
-
color:
|
|
1277
|
-
}), b > 0 &&
|
|
1278
|
-
let
|
|
1279
|
-
r.beginPath(), r.moveTo(i + Math.cos(
|
|
1280
|
-
}), t === "donut" && e.length > 0 &&
|
|
1281
|
-
let
|
|
1313
|
+
value: `${e.pricing ?? 0} (${Math.round(f * 100)}%)`,
|
|
1314
|
+
color: g
|
|
1315
|
+
}), b > 0 && S(r, w, T, E * 2 * b, g, .2 * b);
|
|
1316
|
+
let D = P(n, .03, 3e-4), k = s + b * 6 + (b > 0 ? D * 2 : 0);
|
|
1317
|
+
r.beginPath(), r.moveTo(i + Math.cos(y) * c, a + Math.sin(y) * c), r.arc(i, a, k, y, h), c > 0 ? r.arc(i, a, c, h, y, !0) : r.lineTo(i, a), r.closePath(), r.fillStyle = v(g, .7 + b * .2), r.fill(), r.strokeStyle = v(u.bg, .8), r.lineWidth = 1.5, r.stroke(), y = h;
|
|
1318
|
+
}), t === "donut" && e.length > 0 && S(r, i, a, c * .8, u.blue, .06);
|
|
1319
|
+
let x = $e + 12;
|
|
1282
1320
|
e.forEach((e, t) => {
|
|
1283
|
-
let n = m[t % m.length], i = (e.pricing ?? 0) / l, a =
|
|
1284
|
-
r.beginPath(), r.arc(8, o, 4, 0, Math.PI * 2), r.fillStyle =
|
|
1285
|
-
}),
|
|
1321
|
+
let n = m[t % m.length], i = (e.pricing ?? 0) / l, a = d.current.get(e.id ?? `sl-${t}`) ?? 0, o = x + t * 18;
|
|
1322
|
+
r.beginPath(), r.arc(8, o, 4, 0, Math.PI * 2), r.fillStyle = v(n, .8 + a * .2), r.fill(), r.font = "9px 'JetBrains Mono', monospace", r.fillStyle = v(u.t2, .7 + a * .2), r.textAlign = "left", r.fillText(e.vendor, 18, o + 3.5), r.font = "bold 9px 'JetBrains Mono', monospace", r.fillStyle = b(u.t3, n, a), r.textAlign = "right", r.fillText(`${e.pricing ?? 0} (${Math.round(i * 100)}%)`, et - 4, o + 3.5);
|
|
1323
|
+
}), p = requestAnimationFrame(g);
|
|
1286
1324
|
};
|
|
1287
|
-
return
|
|
1325
|
+
return g(), () => cancelAnimationFrame(p);
|
|
1288
1326
|
}, [
|
|
1289
1327
|
e,
|
|
1290
1328
|
t,
|
|
@@ -1295,30 +1333,30 @@ function $e({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
|
1295
1333
|
children: /* @__PURE__ */ c("div", {
|
|
1296
1334
|
style: {
|
|
1297
1335
|
position: "relative",
|
|
1298
|
-
width:
|
|
1299
|
-
height:
|
|
1336
|
+
width: et,
|
|
1337
|
+
height: tt
|
|
1300
1338
|
},
|
|
1301
1339
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1302
1340
|
ref: o,
|
|
1303
1341
|
role: "img",
|
|
1304
1342
|
"aria-label": `${t} chart`,
|
|
1305
1343
|
style: {
|
|
1306
|
-
width:
|
|
1307
|
-
height:
|
|
1344
|
+
width: et,
|
|
1345
|
+
height: tt,
|
|
1308
1346
|
display: "block",
|
|
1309
1347
|
borderRadius: 8
|
|
1310
1348
|
}
|
|
1311
|
-
}), /* @__PURE__ */ s(
|
|
1312
|
-
...
|
|
1313
|
-
parentW:
|
|
1314
|
-
parentH:
|
|
1349
|
+
}), /* @__PURE__ */ s(E, {
|
|
1350
|
+
...g,
|
|
1351
|
+
parentW: et,
|
|
1352
|
+
parentH: tt
|
|
1315
1353
|
})]
|
|
1316
1354
|
})
|
|
1317
1355
|
});
|
|
1318
1356
|
}
|
|
1319
1357
|
//#endregion
|
|
1320
1358
|
//#region src/components/sankey/SankeySvg.tsx
|
|
1321
|
-
function
|
|
1359
|
+
function rt(e, t, n, r) {
|
|
1322
1360
|
let i = new Set(t.map((e) => e.source)), a = new Set(t.map((e) => e.target)), o = /* @__PURE__ */ new Map(), s = [];
|
|
1323
1361
|
for (e.forEach((e) => {
|
|
1324
1362
|
i.has(e.id) && !a.has(e.id) && s.push({
|
|
@@ -1363,99 +1401,99 @@ function et(e, t, n, r) {
|
|
|
1363
1401
|
});
|
|
1364
1402
|
}), f;
|
|
1365
1403
|
}
|
|
1366
|
-
function
|
|
1367
|
-
let
|
|
1404
|
+
function it({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: d, selectedEntity: f, className: m, colors: h }) {
|
|
1405
|
+
let g = a(null), _ = a(/* @__PURE__ */ new Map()), y = a(0), b = a([]), C = h?.nodes ?? p, T = h?.links ?? u.bd, A = h?.activeLinks ?? u.blue, j = h?.activeNodes ?? u.blue, M = i(() => rt(e, t, r, o), [
|
|
1368
1406
|
e,
|
|
1369
1407
|
t,
|
|
1370
1408
|
r,
|
|
1371
1409
|
o
|
|
1372
|
-
]), { hoveredRef:
|
|
1410
|
+
]), { hoveredRef: N, tooltip: F, hitZonesRef: L } = D(g, {
|
|
1373
1411
|
width: r,
|
|
1374
1412
|
height: o
|
|
1375
1413
|
});
|
|
1376
1414
|
return n(() => {
|
|
1377
|
-
let n =
|
|
1415
|
+
let n = g.current;
|
|
1378
1416
|
if (!n) return;
|
|
1379
|
-
let i =
|
|
1380
|
-
|
|
1417
|
+
let i = x(n, r, o);
|
|
1418
|
+
y.current = 0, b.current = [];
|
|
1381
1419
|
let a = t.length > 0 ? Math.max(...t.map((e) => e.value)) : 1, s, c = () => {
|
|
1382
|
-
|
|
1383
|
-
let n =
|
|
1420
|
+
y.current++;
|
|
1421
|
+
let n = y.current;
|
|
1384
1422
|
i.clearRect(0, 0, r, o);
|
|
1385
1423
|
let l = 1 - (1 - Math.min(n / 56, 1)) ** 3;
|
|
1386
|
-
|
|
1387
|
-
let r =
|
|
1424
|
+
I(_.current, N.current), L.current = [], t.forEach((e, t) => {
|
|
1425
|
+
let r = M.get(e.source), o = M.get(e.target);
|
|
1388
1426
|
if (!r || !o) return;
|
|
1389
|
-
let s = !!
|
|
1427
|
+
let s = !!f && (e.source === f || e.target === f), c = s ? A : T, d = s ? .5 : .2, p = Math.max(3, e.value / a * 36 * l), m = p / 2, h = r.x + r.w, g = r.y + r.h / 2, _ = o.x, y = o.y + o.h / 2, x = (h + _) / 2;
|
|
1390
1428
|
for (let e = 0; e < 30; e++) {
|
|
1391
|
-
let r = e / 30, a = (e + 1) / 30, o = 1 - r, s = 1 - a, l = o * o *
|
|
1392
|
-
i.beginPath(), i.moveTo(l, u - m +
|
|
1429
|
+
let r = e / 30, a = (e + 1) / 30, o = 1 - r, s = 1 - a, l = o * o * h + 2 * o * r * x + r * r * _, u = o * o * g + 2 * o * r * g + r * r * y, f = s * s * h + 2 * s * a * x + a * a * _, p = s * s * g + 2 * s * a * g + a * a * y, b = P(n + r * 120 + t * 40, .025, 3e-4) * 1.2;
|
|
1430
|
+
i.beginPath(), i.moveTo(l, u - m + b), i.lineTo(f, p - m + b), i.lineTo(f, p + m + b), i.lineTo(l, u + m + b), i.closePath(), i.fillStyle = v(c, d * (.5 + r * .5)), i.fill();
|
|
1393
1431
|
}
|
|
1394
|
-
|
|
1432
|
+
O(L.current, `link-${t}`, x, (g + y) / 2, p + 6, {
|
|
1395
1433
|
label: `${e.source} → ${e.target}`,
|
|
1396
1434
|
value: String(e.value),
|
|
1397
1435
|
color: s ? A : u.blue
|
|
1398
|
-
}), Math.random() < .08 &&
|
|
1436
|
+
}), Math.random() < .08 && b.current.push({
|
|
1399
1437
|
linkIdx: t,
|
|
1400
1438
|
prog: 0,
|
|
1401
1439
|
speed: .006 + Math.random() * .006,
|
|
1402
|
-
off: (Math.random() - .5) *
|
|
1440
|
+
off: (Math.random() - .5) * p * .5,
|
|
1403
1441
|
sz: 1 + Math.random()
|
|
1404
1442
|
});
|
|
1405
1443
|
}), e.forEach((e, t) => {
|
|
1406
|
-
let r =
|
|
1444
|
+
let r = M.get(e.id);
|
|
1407
1445
|
if (!r) return;
|
|
1408
|
-
let a =
|
|
1409
|
-
|
|
1446
|
+
let a = f === e.id, o = N.current === `node-${t}`, s = _.current.get(`node-${t}`) ?? 0, c = a ? j : C[t % C.length];
|
|
1447
|
+
k(L.current, `node-${t}`, r.x, r.y, r.w, r.h, {
|
|
1410
1448
|
label: e.name,
|
|
1411
1449
|
value: e.valueLabel ?? e.id,
|
|
1412
1450
|
color: c
|
|
1413
|
-
}), (s > 0 || a) &&
|
|
1414
|
-
let l = a ?
|
|
1415
|
-
i.fillStyle =
|
|
1451
|
+
}), (s > 0 || a) && S(i, r.x + r.w / 2, r.y + r.h / 2, r.w * 2, c, .2 * Math.max(s, a ? .6 : 0));
|
|
1452
|
+
let l = a ? P(n, .03, 3e-4) * .15 : 0;
|
|
1453
|
+
i.fillStyle = v(c, .6 + s * .25 + l), i.beginPath(), i.roundRect(r.x, r.y, r.w, r.h, 4), i.fill(), (a || s > 0) && (i.strokeStyle = v(c, .5 * Math.max(s, a ? 1 : 0)), i.lineWidth = 1, i.beginPath(), i.roundRect(r.x, r.y, r.w, r.h, 4), i.stroke());
|
|
1416
1454
|
let d = r.x + r.w + 8;
|
|
1417
|
-
i.font = `${a || o ? "bold " : ""}10px 'JetBrains Mono', monospace`, i.fillStyle =
|
|
1418
|
-
}),
|
|
1455
|
+
i.font = `${a || o ? "bold " : ""}10px 'JetBrains Mono', monospace`, i.fillStyle = v(a ? c : u.t2, .7 + s * .2), i.textAlign = "left", i.fillText(e.name, d, r.y + r.h / 2 + 4), e.valueLabel && (i.font = "9px 'JetBrains Mono', monospace", i.fillStyle = v(c, .5 + s * .2), i.fillText(e.valueLabel, d, r.y + r.h / 2 + 17));
|
|
1456
|
+
}), b.current = b.current.filter((e) => {
|
|
1419
1457
|
if (e.prog += e.speed, e.prog > 1) return !1;
|
|
1420
1458
|
let n = t[e.linkIdx];
|
|
1421
1459
|
if (!n) return !1;
|
|
1422
|
-
let r =
|
|
1460
|
+
let r = M.get(n.source), a = M.get(n.target);
|
|
1423
1461
|
if (!r || !a) return !1;
|
|
1424
|
-
let o = r.x + r.w, s = r.y + r.h / 2, c = a.x, l = a.y + a.h / 2, d = (o + c) / 2, f = 1 - e.prog, p = f * f * o + 2 * f * e.prog * d + e.prog * e.prog * c, m = f * f * s + 2 * f * e.prog * s + e.prog * e.prog * l + e.off,
|
|
1425
|
-
return i.beginPath(), i.arc(p, m, e.sz, 0, Math.PI * 2), i.fillStyle =
|
|
1426
|
-
}),
|
|
1462
|
+
let o = r.x + r.w, s = r.y + r.h / 2, c = a.x, l = a.y + a.h / 2, d = (o + c) / 2, f = 1 - e.prog, p = f * f * o + 2 * f * e.prog * d + e.prog * e.prog * c, m = f * f * s + 2 * f * e.prog * s + e.prog * e.prog * l + e.off, g = Math.sin(e.prog * Math.PI) * .5, _ = h?.links ?? u.blue;
|
|
1463
|
+
return i.beginPath(), i.arc(p, m, e.sz, 0, Math.PI * 2), i.fillStyle = v(_, g), i.fill(), !0;
|
|
1464
|
+
}), b.current.length > 150 && (b.current = b.current.slice(-150)), w(i, r, o, n, .01), s = requestAnimationFrame(c);
|
|
1427
1465
|
};
|
|
1428
1466
|
return c(), () => {
|
|
1429
|
-
cancelAnimationFrame(s),
|
|
1467
|
+
cancelAnimationFrame(s), b.current = [];
|
|
1430
1468
|
};
|
|
1431
1469
|
}, [
|
|
1432
1470
|
e,
|
|
1433
1471
|
t,
|
|
1434
1472
|
r,
|
|
1435
1473
|
o,
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1474
|
+
f,
|
|
1475
|
+
h,
|
|
1476
|
+
M
|
|
1439
1477
|
]), /* @__PURE__ */ s(l, {
|
|
1440
1478
|
className: ["canvas-sankey-frame", m].filter(Boolean).join(" "),
|
|
1441
1479
|
children: /* @__PURE__ */ c("div", {
|
|
1442
1480
|
role: "img",
|
|
1443
|
-
"aria-label":
|
|
1481
|
+
"aria-label": d,
|
|
1444
1482
|
style: {
|
|
1445
1483
|
position: "relative",
|
|
1446
1484
|
width: r,
|
|
1447
1485
|
height: o
|
|
1448
1486
|
},
|
|
1449
1487
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1450
|
-
ref:
|
|
1488
|
+
ref: g,
|
|
1451
1489
|
style: {
|
|
1452
1490
|
width: r,
|
|
1453
1491
|
height: o,
|
|
1454
1492
|
display: "block",
|
|
1455
1493
|
borderRadius: 8
|
|
1456
1494
|
}
|
|
1457
|
-
}), /* @__PURE__ */ s(
|
|
1458
|
-
...
|
|
1495
|
+
}), /* @__PURE__ */ s(E, {
|
|
1496
|
+
...F,
|
|
1459
1497
|
parentW: r,
|
|
1460
1498
|
parentH: o
|
|
1461
1499
|
})]
|
|
@@ -1464,7 +1502,7 @@ function tt({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f,
|
|
|
1464
1502
|
}
|
|
1465
1503
|
//#endregion
|
|
1466
1504
|
//#region src/canvas/CausalFlowCanvas.tsx
|
|
1467
|
-
var
|
|
1505
|
+
var at = [
|
|
1468
1506
|
{
|
|
1469
1507
|
x: .13,
|
|
1470
1508
|
y: .48
|
|
@@ -1497,7 +1535,7 @@ var nt = [
|
|
|
1497
1535
|
x: .92,
|
|
1498
1536
|
y: .22
|
|
1499
1537
|
}
|
|
1500
|
-
],
|
|
1538
|
+
], ot = [
|
|
1501
1539
|
u.blue,
|
|
1502
1540
|
u.orange,
|
|
1503
1541
|
u.red,
|
|
@@ -1505,7 +1543,7 @@ var nt = [
|
|
|
1505
1543
|
u.green,
|
|
1506
1544
|
u.amber,
|
|
1507
1545
|
u.t2
|
|
1508
|
-
],
|
|
1546
|
+
], st = [
|
|
1509
1547
|
26,
|
|
1510
1548
|
24,
|
|
1511
1549
|
24,
|
|
@@ -1515,21 +1553,21 @@ var nt = [
|
|
|
1515
1553
|
22,
|
|
1516
1554
|
22
|
|
1517
1555
|
];
|
|
1518
|
-
function
|
|
1556
|
+
function ct(e, t) {
|
|
1519
1557
|
let n = 1 - t;
|
|
1520
1558
|
return {
|
|
1521
1559
|
x: n * n * n * e.p0.x + 3 * n * n * t * e.p1.x + 3 * n * t * t * e.p2.x + t * t * t * e.p3.x,
|
|
1522
1560
|
y: n * n * n * e.p0.y + 3 * n * n * t * e.p1.y + 3 * n * t * t * e.p2.y + t * t * t * e.p3.y
|
|
1523
1561
|
};
|
|
1524
1562
|
}
|
|
1525
|
-
function
|
|
1563
|
+
function lt(e, t) {
|
|
1526
1564
|
let n = 1 - t, r = 3 * n * n * (e.p1.x - e.p0.x) + 6 * n * t * (e.p2.x - e.p1.x) + 3 * t * t * (e.p3.x - e.p2.x), i = 3 * n * n * (e.p1.y - e.p0.y) + 6 * n * t * (e.p2.y - e.p1.y) + 3 * t * t * (e.p3.y - e.p2.y), a = Math.sqrt(r * r + i * i) || 1;
|
|
1527
1565
|
return {
|
|
1528
1566
|
x: -i / a,
|
|
1529
1567
|
y: r / a
|
|
1530
1568
|
};
|
|
1531
1569
|
}
|
|
1532
|
-
function
|
|
1570
|
+
function ut(e, t) {
|
|
1533
1571
|
let n = t.x - e.x, r = t.y - e.y;
|
|
1534
1572
|
return {
|
|
1535
1573
|
p0: {
|
|
@@ -1550,46 +1588,46 @@ function st(e, t) {
|
|
|
1550
1588
|
}
|
|
1551
1589
|
};
|
|
1552
1590
|
}
|
|
1553
|
-
function
|
|
1554
|
-
let d = a(null), f = a(0), p = a([]), { hoveredRef: m, tooltip:
|
|
1591
|
+
function dt({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntity: l }) {
|
|
1592
|
+
let d = a(null), f = a(0), p = a([]), { hoveredRef: m, tooltip: h, hitZonesRef: g } = D(d, {
|
|
1555
1593
|
width: r,
|
|
1556
1594
|
height: o
|
|
1557
|
-
}),
|
|
1595
|
+
}), _ = i(() => {
|
|
1558
1596
|
let t = /* @__PURE__ */ new Map();
|
|
1559
1597
|
return e.forEach((e, n) => t.set(e.id, n)), t;
|
|
1560
|
-
}, [e]),
|
|
1561
|
-
let n =
|
|
1598
|
+
}, [e]), y = i(() => t.length > 0 ? Math.max(...t.map((e) => e.value)) : 100, [t]), T = (e) => y > 1 ? e / 100 : e, k = i(() => e.map((e, t) => {
|
|
1599
|
+
let n = at[t % at.length];
|
|
1562
1600
|
return {
|
|
1563
1601
|
id: e.id,
|
|
1564
1602
|
label: e.name,
|
|
1565
1603
|
sub: e.valueLabel ?? "",
|
|
1566
1604
|
x: n.x * r,
|
|
1567
1605
|
y: n.y * o,
|
|
1568
|
-
r:
|
|
1569
|
-
color:
|
|
1606
|
+
r: st[t % st.length],
|
|
1607
|
+
color: ot[t % ot.length]
|
|
1570
1608
|
};
|
|
1571
1609
|
}), [
|
|
1572
1610
|
e,
|
|
1573
1611
|
r,
|
|
1574
1612
|
o
|
|
1575
|
-
]),
|
|
1576
|
-
fromIdx:
|
|
1577
|
-
toIdx:
|
|
1578
|
-
conf:
|
|
1579
|
-
})).filter((e) => e.fromIdx >= 0 && e.toIdx >= 0), [t,
|
|
1613
|
+
]), j = i(() => t.map((e) => ({
|
|
1614
|
+
fromIdx: _.get(e.source) ?? -1,
|
|
1615
|
+
toIdx: _.get(e.target) ?? -1,
|
|
1616
|
+
conf: T(e.value)
|
|
1617
|
+
})).filter((e) => e.fromIdx >= 0 && e.toIdx >= 0), [t, _]);
|
|
1580
1618
|
return n(() => {
|
|
1581
1619
|
let e = d.current;
|
|
1582
1620
|
if (!e) return;
|
|
1583
|
-
let t =
|
|
1621
|
+
let t = x(e, r, o);
|
|
1584
1622
|
f.current = 0, p.current = [];
|
|
1585
1623
|
let n, i = () => {
|
|
1586
1624
|
f.current++;
|
|
1587
1625
|
let e = f.current;
|
|
1588
|
-
if (t.clearRect(0, 0, r, o),
|
|
1589
|
-
let r =
|
|
1626
|
+
if (t.clearRect(0, 0, r, o), g.current = [], C(t, r, o, e, 50, v(u.blue, .05)), j.forEach((e, n) => {
|
|
1627
|
+
let r = k[e.fromIdx], i = k[e.toIdx];
|
|
1590
1628
|
if (!r || !i) return;
|
|
1591
|
-
let a = !!l && (r.id === l || i.id === l), o =
|
|
1592
|
-
t.beginPath(), t.moveTo(d.p0.x, d.p0.y), t.bezierCurveTo(d.p1.x, d.p1.y, d.p2.x, d.p2.y, d.p3.x, d.p3.y), t.strokeStyle =
|
|
1629
|
+
let a = !!l && (r.id === l || i.id === l), o = b(r.color, i.color, .5), s = a ? .18 : .05, c = a ? .25 : .1, d = ut(r, i);
|
|
1630
|
+
t.beginPath(), t.moveTo(d.p0.x, d.p0.y), t.bezierCurveTo(d.p1.x, d.p1.y, d.p2.x, d.p2.y, d.p3.x, d.p3.y), t.strokeStyle = v(o, s), t.lineWidth = 16, t.lineCap = "round", t.stroke(), t.strokeStyle = v(o, c), t.lineWidth = 1.5, t.stroke();
|
|
1593
1631
|
for (let t = 0; t < e.conf * 2.5; t++) Math.random() < .45 && p.current.push({
|
|
1594
1632
|
edgeIdx: n,
|
|
1595
1633
|
t: 0,
|
|
@@ -1597,45 +1635,45 @@ function ct({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1597
1635
|
off: (Math.random() - .5) * 13,
|
|
1598
1636
|
sz: .7 + Math.random() * 2
|
|
1599
1637
|
});
|
|
1600
|
-
let f =
|
|
1638
|
+
let f = ct(d, .5), m = `${Math.round(e.conf * 100)}%`;
|
|
1601
1639
|
t.font = "bold 12px 'JetBrains Mono', monospace", t.textBaseline = "middle";
|
|
1602
|
-
let
|
|
1603
|
-
t.fillStyle = "rgba(10,16,24,0.88)", t.beginPath(), t.roundRect(f.x -
|
|
1640
|
+
let h = t.measureText(m).width + 14;
|
|
1641
|
+
t.fillStyle = "rgba(10,16,24,0.88)", t.beginPath(), t.roundRect(f.x - h / 2, f.y - 11, h, 22, 6), t.fill(), t.strokeStyle = v(u.blue, .25), t.lineWidth = 1, t.stroke(), t.fillStyle = v(u.blue, .9), t.textAlign = "center", t.fillText(m, f.x, f.y);
|
|
1604
1642
|
}), p.current = p.current.filter((e) => {
|
|
1605
1643
|
if (e.t += e.speed, e.t > 1) return !1;
|
|
1606
|
-
let n =
|
|
1644
|
+
let n = j[e.edgeIdx];
|
|
1607
1645
|
if (!n) return !1;
|
|
1608
|
-
let r =
|
|
1646
|
+
let r = k[n.fromIdx], i = k[n.toIdx];
|
|
1609
1647
|
if (!r || !i) return !1;
|
|
1610
|
-
let a =
|
|
1611
|
-
return
|
|
1612
|
-
}), p.current.length > 350 && (p.current = p.current.slice(-350)),
|
|
1613
|
-
let i = l === n.id, a = m.current === `node-${r}`, o =
|
|
1614
|
-
t.beginPath(), t.arc(n.x, n.y, s + 6, 0, Math.PI * 2), t.strokeStyle =
|
|
1648
|
+
let a = ut(r, i), o = ct(a, e.t), s = lt(a, e.t), c = o.x + s.x * e.off, l = o.y + s.y * e.off, u = Math.sin(e.t * Math.PI) * .7, d = b(r.color, i.color, e.t);
|
|
1649
|
+
return S(t, c, l, e.sz * 3, d, u * .1), t.beginPath(), t.arc(c, l, e.sz, 0, Math.PI * 2), t.fillStyle = v(d, u), t.fill(), !0;
|
|
1650
|
+
}), p.current.length > 350 && (p.current = p.current.slice(-350)), k.forEach((n, r) => {
|
|
1651
|
+
let i = l === n.id, a = m.current === `node-${r}`, o = P(e, .03, 3e-4) * .1 + 1, s = n.r * o * (i ? 1.15 : 1);
|
|
1652
|
+
t.beginPath(), t.arc(n.x, n.y, s + 6, 0, Math.PI * 2), t.strokeStyle = v(n.color, i ? .3 : .1), t.lineWidth = i ? 1.5 : .7, t.stroke(), S(t, n.x, n.y, s * 3, n.color, i ? .22 : .12);
|
|
1615
1653
|
let c = t.createRadialGradient(n.x, n.y - s * .2, 0, n.x, n.y, s);
|
|
1616
|
-
if (c.addColorStop(0,
|
|
1654
|
+
if (c.addColorStop(0, v(n.color, i ? 1 : .85)), c.addColorStop(1, v(n.color, i ? .65 : .45)), t.fillStyle = c, t.beginPath(), t.arc(n.x, n.y, s, 0, Math.PI * 2), t.fill(), i || r === k.length - 1) {
|
|
1617
1655
|
let r = s + 16, i = e * .04, a = n.x + Math.cos(i) * r, o = n.y + Math.sin(i) * r;
|
|
1618
|
-
|
|
1656
|
+
S(t, a, o, 6, n.color, .3), t.beginPath(), t.arc(a, o, 2, 0, Math.PI * 2), t.fillStyle = v(n.color, .75), t.fill();
|
|
1619
1657
|
}
|
|
1620
|
-
|
|
1658
|
+
O(g.current, `node-${r}`, n.x, n.y, s + 8, {
|
|
1621
1659
|
label: n.label,
|
|
1622
1660
|
value: n.sub || n.id,
|
|
1623
1661
|
color: n.color
|
|
1624
|
-
}), t.font = `${i || a ? "bold " : ""}12px 'DM Sans', sans-serif`, t.textAlign = "center", t.textBaseline = "alphabetic", t.fillStyle =
|
|
1625
|
-
}),
|
|
1626
|
-
let n =
|
|
1627
|
-
t.fillStyle =
|
|
1628
|
-
let l =
|
|
1629
|
-
t.textAlign = "right", t.font = "9px 'JetBrains Mono', monospace", t.fillStyle =
|
|
1662
|
+
}), t.font = `${i || a ? "bold " : ""}12px 'DM Sans', sans-serif`, t.textAlign = "center", t.textBaseline = "alphabetic", t.fillStyle = v(n.color, i ? 1 : .9), t.fillText(n.label, n.x, n.y + s + 18), n.sub && (t.font = "10px 'JetBrains Mono', monospace", t.fillStyle = v(u.t3, .65), t.fillText(n.sub, n.x, n.y + s + 32));
|
|
1663
|
+
}), j.length >= 2) {
|
|
1664
|
+
let n = j.reduce((e, t) => e * t.conf, 1), i = o * .92, a = r * .12, s = r * .76, c = A(Math.min(e * .008, 1));
|
|
1665
|
+
t.fillStyle = v(u.bd, .35), t.beginPath(), t.roundRect(a, i, s, 5, 3), t.fill(), t.fillStyle = v(u.orange, .6), t.beginPath(), t.roundRect(a, i, s * n * c, 5, 3), t.fill(), t.font = "bold 12px 'JetBrains Mono', monospace", t.textAlign = "left", t.textBaseline = "middle", t.fillStyle = v(u.orange, .85), t.fillText(`${Math.round(n * 100)}% compound confidence`, a + s * n * c + 10, i + 2);
|
|
1666
|
+
let l = j.map((e) => e.conf.toFixed(2)).join(" × ");
|
|
1667
|
+
t.textAlign = "right", t.font = "9px 'JetBrains Mono', monospace", t.fillStyle = v(u.t4, .6), t.fillText(l, a - 6, i + 2);
|
|
1630
1668
|
}
|
|
1631
|
-
|
|
1669
|
+
w(t, r, o, e, .012), n = requestAnimationFrame(i);
|
|
1632
1670
|
};
|
|
1633
1671
|
return i(), () => {
|
|
1634
1672
|
cancelAnimationFrame(n), p.current = [];
|
|
1635
1673
|
};
|
|
1636
1674
|
}, [
|
|
1637
|
-
|
|
1638
|
-
|
|
1675
|
+
k,
|
|
1676
|
+
j,
|
|
1639
1677
|
r,
|
|
1640
1678
|
o,
|
|
1641
1679
|
l
|
|
@@ -1655,8 +1693,8 @@ function ct({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1655
1693
|
},
|
|
1656
1694
|
role: "img",
|
|
1657
1695
|
"aria-label": "causal flow diagram"
|
|
1658
|
-
}), /* @__PURE__ */ s(
|
|
1659
|
-
...
|
|
1696
|
+
}), /* @__PURE__ */ s(E, {
|
|
1697
|
+
...h,
|
|
1660
1698
|
parentW: r,
|
|
1661
1699
|
parentH: o
|
|
1662
1700
|
})]
|
|
@@ -1664,10 +1702,10 @@ function ct({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1664
1702
|
}
|
|
1665
1703
|
//#endregion
|
|
1666
1704
|
//#region src/components/sankey/ProcessSankey.tsx
|
|
1667
|
-
function
|
|
1668
|
-
return /* @__PURE__ */ s(
|
|
1669
|
-
nodes:
|
|
1670
|
-
links:
|
|
1705
|
+
function ft({ selectedEntity: e, colors: t }) {
|
|
1706
|
+
return /* @__PURE__ */ s(dt, {
|
|
1707
|
+
nodes: Ke.nodes,
|
|
1708
|
+
links: Ke.links,
|
|
1671
1709
|
width: 960,
|
|
1672
1710
|
height: 280,
|
|
1673
1711
|
selectedEntity: e
|
|
@@ -1675,7 +1713,7 @@ function lt({ selectedEntity: e, colors: t }) {
|
|
|
1675
1713
|
}
|
|
1676
1714
|
//#endregion
|
|
1677
1715
|
//#region src/components/sankey/RankingSankey.tsx
|
|
1678
|
-
function
|
|
1716
|
+
function pt({ rows: e = [], className: t, colors: n }) {
|
|
1679
1717
|
let { nodes: r, links: a } = i(() => {
|
|
1680
1718
|
let t = e.slice(0, 5);
|
|
1681
1719
|
return {
|
|
@@ -1693,7 +1731,7 @@ function ut({ rows: e = [], className: t, colors: n }) {
|
|
|
1693
1731
|
}))
|
|
1694
1732
|
};
|
|
1695
1733
|
}, [e]);
|
|
1696
|
-
return /* @__PURE__ */ s(
|
|
1734
|
+
return /* @__PURE__ */ s(it, {
|
|
1697
1735
|
nodes: r,
|
|
1698
1736
|
links: a,
|
|
1699
1737
|
width: 760,
|
|
@@ -1705,131 +1743,130 @@ function ut({ rows: e = [], className: t, colors: n }) {
|
|
|
1705
1743
|
}
|
|
1706
1744
|
//#endregion
|
|
1707
1745
|
//#region src/components/balanceScaleChart/BalanceScaleChart.tsx
|
|
1708
|
-
var
|
|
1709
|
-
function
|
|
1746
|
+
var mt = 780, ht = 420;
|
|
1747
|
+
function gt({ left: e, right: t, leftTitle: r = "Accepted", rightTitle: i = "Submitted", unit: o = "quotations", "data-testid": c }) {
|
|
1710
1748
|
let l = a(null), d = a(0);
|
|
1711
1749
|
return n(() => {
|
|
1712
1750
|
let n = l.current;
|
|
1713
1751
|
if (!n) return;
|
|
1714
|
-
let a =
|
|
1752
|
+
let a = x(n, mt, ht);
|
|
1715
1753
|
d.current = 0;
|
|
1716
|
-
let s =
|
|
1754
|
+
let s = mt / 2, c = Math.abs(e.value ?? 0), f = Math.abs(t.value ?? 0), p = Math.max(c, f, 1), m = (e.value - t.value) / (2 * p) * 14, g = Math.max(-14, Math.min(14, m)), _ = (e, t, n, r, i) => {
|
|
1755
|
+
let o = t - 99 / 2, s = n + 30, c = [
|
|
1756
|
+
0,
|
|
1757
|
+
0,
|
|
1758
|
+
10,
|
|
1759
|
+
10
|
|
1760
|
+
], l = o + 99 / 2, d = s + r / 2, f = Math.sqrt((99 / 2) ** 2 + (r / 2) ** 2), p = a.createRadialGradient(l, d, 0, l, d, f);
|
|
1761
|
+
p.addColorStop(0, v(e, .02 * i)), p.addColorStop(.55, v(e, .25 * i)), p.addColorStop(1, v(e, .72 * i)), a.beginPath(), a.roundRect(o, s, 99, r, c), a.fillStyle = p, a.fill(), a.beginPath(), a.roundRect(o, s, 99, r, c), a.strokeStyle = v(e, 1 * i), a.lineWidth = 1, a.stroke();
|
|
1762
|
+
let m = o + 99 / 2, h = s - 5;
|
|
1763
|
+
a.strokeStyle = v(u.t2, .5 * i), a.lineWidth = 1, a.beginPath(), a.moveTo(t, n + 4), a.lineTo(m, h), a.stroke(), a.beginPath(), a.moveTo(m, h), a.lineTo(m - 10, s), a.stroke(), a.beginPath(), a.moveTo(m, h), a.lineTo(m + 10, s), a.stroke(), a.beginPath(), a.arc(t, n, 3, 0, Math.PI * 2), a.fillStyle = v(u.t2, .7 * i), a.fill();
|
|
1764
|
+
}, y, b = () => {
|
|
1717
1765
|
d.current++;
|
|
1718
1766
|
let n = d.current;
|
|
1719
|
-
a.clearRect(0, 0,
|
|
1720
|
-
let l =
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
x: s - Math.cos(_) * 160,
|
|
1724
|
-
y: 50 + Math.sin(-_) * 160
|
|
1767
|
+
a.clearRect(0, 0, mt, ht), a.letterSpacing = h.letterSpacing;
|
|
1768
|
+
let l = A(Math.min(n / 80, 1)), m = g * N(Math.min(n / 80, 1)) * Math.PI / 180, x = {
|
|
1769
|
+
x: s - Math.cos(m) * 240,
|
|
1770
|
+
y: 100 + Math.sin(-m) * 240
|
|
1725
1771
|
}, C = {
|
|
1726
|
-
x: s + Math.cos(
|
|
1727
|
-
y:
|
|
1772
|
+
x: s + Math.cos(m) * 240,
|
|
1773
|
+
y: 100 + Math.sin(m) * 240
|
|
1728
1774
|
};
|
|
1729
|
-
a.strokeStyle =
|
|
1730
|
-
let w = Math.max(20, c /
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
a.beginPath(), a.moveTo(v.x + e, v.y + 4), a.lineTo(v.x + e, T), a.stroke();
|
|
1738
|
-
}), l > .5 && (a.globalAlpha = Math.min(1, (l - .5) / .5), a.font = p.font, a.fillStyle = u.green, a.textAlign = "center", a.fillText(e.label, v.x, T + w + 18), a.font = f.font, a.fillStyle = f.color, a.fillText(r, v.x, T + w + 38), a.fillText(`${e.count} ${o}`, v.x, T + w + 58), a.globalAlpha = 1);
|
|
1739
|
-
let E = Math.max(20, m / g * 100 * l), O = C.y + 18;
|
|
1740
|
-
a.fillStyle = h(u.amber, .3 * l), a.strokeStyle = h(u.amber, .5 * l), a.lineWidth = 1.5, a.beginPath(), a.roundRect(C.x - 90 / 2, O, 90, E, [
|
|
1741
|
-
0,
|
|
1742
|
-
0,
|
|
1743
|
-
6,
|
|
1744
|
-
6
|
|
1745
|
-
]), a.fill(), a.stroke(), a.strokeStyle = h(u.t2, .35 * l), a.lineWidth = 1, [-90 / 3, 90 / 3].forEach((e) => {
|
|
1746
|
-
a.beginPath(), a.moveTo(C.x + e, C.y + 4), a.lineTo(C.x + e, O), a.stroke();
|
|
1747
|
-
}), l > .5 && (a.globalAlpha = Math.min(1, (l - .5) / .5), a.font = p.font, a.fillStyle = u.amber, a.textAlign = "center", a.fillText(t.label, C.x, O + E + 18), a.font = f.font, a.fillStyle = f.color, a.fillText(i, C.x, O + E + 38), a.fillText(`${t.count} ${o}`, C.x, O + E + 58), a.globalAlpha = 1), x = requestAnimationFrame(S);
|
|
1775
|
+
a.strokeStyle = v(u.t2, .55 * l), a.lineWidth = 1.5, a.beginPath(), a.moveTo(x.x, x.y), a.lineTo(C.x, C.y), a.stroke(), S(a, s, 100, 18, u.t2, .14 * l), a.beginPath(), a.arc(s, 100, 9 * l, 0, Math.PI * 2), a.fillStyle = v(u.t2, .85 * l), a.fill();
|
|
1776
|
+
let w = Math.max(20, c / p * 95 * l), T = Math.max(20, f / p * 95 * l);
|
|
1777
|
+
if (_(u.green, x.x, x.y, w, l), _(u.amber, C.x, C.y, T, l), l > .5) {
|
|
1778
|
+
a.globalAlpha = Math.min(1, (l - .5) / .5), a.textAlign = "center", a.textBaseline = "top";
|
|
1779
|
+
let n = x.y + 30 + w + 14, s = C.y + 30 + T + 14;
|
|
1780
|
+
a.font = "700 34px 'Satoshi Variable', 'DM Sans', sans-serif", a.fillStyle = u.t1, a.fillText(e.label, x.x, n), a.font = h.font, a.fillStyle = h.color, a.fillText(`${r} ${e.count} ${o}`, x.x, n + 42), a.font = "700 34px 'Satoshi Variable', 'DM Sans', sans-serif", a.fillStyle = u.t1, a.fillText(t.label, C.x, s), a.font = h.font, a.fillStyle = h.color, a.fillText(`${i} ${t.count} ${o}`, C.x, s + 42), a.globalAlpha = 1, a.textBaseline = "alphabetic";
|
|
1781
|
+
}
|
|
1782
|
+
y = requestAnimationFrame(b);
|
|
1748
1783
|
};
|
|
1749
|
-
return
|
|
1784
|
+
return b(), () => cancelAnimationFrame(y);
|
|
1750
1785
|
}, [e, t]), /* @__PURE__ */ s("div", {
|
|
1751
1786
|
"data-testid": c,
|
|
1752
1787
|
style: {
|
|
1753
1788
|
position: "relative",
|
|
1754
|
-
width:
|
|
1755
|
-
height:
|
|
1789
|
+
width: mt,
|
|
1790
|
+
height: ht
|
|
1756
1791
|
},
|
|
1757
1792
|
children: /* @__PURE__ */ s("canvas", {
|
|
1758
1793
|
ref: l,
|
|
1759
1794
|
role: "img",
|
|
1760
1795
|
"aria-label": "Quotation balance — accepted vs submitted quotation value",
|
|
1761
1796
|
style: {
|
|
1762
|
-
width:
|
|
1763
|
-
height:
|
|
1764
|
-
display: "block"
|
|
1797
|
+
width: mt,
|
|
1798
|
+
height: ht,
|
|
1799
|
+
display: "block",
|
|
1800
|
+
borderRadius: 8
|
|
1765
1801
|
}
|
|
1766
1802
|
})
|
|
1767
1803
|
});
|
|
1768
1804
|
}
|
|
1769
1805
|
//#endregion
|
|
1770
1806
|
//#region src/components/areaLineChart/AreaLineChart.tsx
|
|
1771
|
-
var
|
|
1772
|
-
function
|
|
1773
|
-
let r = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), { hoveredRef: d, tooltip:
|
|
1774
|
-
width:
|
|
1775
|
-
height:
|
|
1776
|
-
}),
|
|
1807
|
+
var _t = 780, vt = 360;
|
|
1808
|
+
function yt({ points: e = [], "data-testid": t }) {
|
|
1809
|
+
let r = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), { hoveredRef: d, tooltip: f, hitZonesRef: p } = D(r, {
|
|
1810
|
+
width: _t,
|
|
1811
|
+
height: vt
|
|
1812
|
+
}), m = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
1777
1813
|
return n(() => {
|
|
1778
1814
|
let e = r.current;
|
|
1779
1815
|
if (!e) return;
|
|
1780
|
-
let t =
|
|
1816
|
+
let t = x(e, _t, vt);
|
|
1781
1817
|
l.current = 0;
|
|
1782
|
-
let n =
|
|
1783
|
-
x:
|
|
1784
|
-
y:
|
|
1818
|
+
let n = _t - 64 - 48, i = vt - 48 - 68, a = Math.max(...m.map((e) => e.count), 1), s = m.length, c = s > 1 ? n / (s - 1) : n, f = m.map((e, t) => ({
|
|
1819
|
+
x: 64 + t * c,
|
|
1820
|
+
y: 48 + i - e.count / a * i,
|
|
1785
1821
|
point: e
|
|
1786
|
-
})),
|
|
1822
|
+
})), g, _ = () => {
|
|
1787
1823
|
l.current++;
|
|
1788
1824
|
let e = l.current;
|
|
1789
|
-
t.clearRect(0, 0,
|
|
1790
|
-
let r =
|
|
1791
|
-
|
|
1825
|
+
t.clearRect(0, 0, _t, vt), t.letterSpacing = h.letterSpacing;
|
|
1826
|
+
let r = A(Math.min(e / 72, 1));
|
|
1827
|
+
I(o.current, d.current), p.current = [], [
|
|
1828
|
+
0,
|
|
1792
1829
|
.25,
|
|
1793
1830
|
.5,
|
|
1794
1831
|
.75,
|
|
1795
1832
|
1
|
|
1796
1833
|
].forEach((e) => {
|
|
1797
|
-
let r =
|
|
1798
|
-
t.strokeStyle =
|
|
1799
|
-
}), t.save(), t.translate(12,
|
|
1800
|
-
let c = r * (s - 1),
|
|
1801
|
-
if (
|
|
1802
|
-
t.beginPath(), t.moveTo(
|
|
1803
|
-
for (let e = 1; e <
|
|
1804
|
-
let n = c - Math.floor(c), r = e <
|
|
1834
|
+
let r = 48 + i - e * i;
|
|
1835
|
+
t.strokeStyle = v(u.bd, .18), t.lineWidth = 1, t.setLineDash([3, 5]), t.beginPath(), t.moveTo(64, r), t.lineTo(64 + n, r), t.stroke(), t.setLineDash([]), t.font = h.font, t.fillStyle = h.color, t.textAlign = "right", t.fillText(String(Math.round(a * e)), 58, r + 3);
|
|
1836
|
+
}), t.save(), t.translate(12, 48 + i / 2), t.rotate(-Math.PI / 2), t.font = h.font, t.fillStyle = h.color, t.textAlign = "center", t.fillText("Count", 0, 0), t.restore(), t.strokeStyle = v(u.bd, .3), t.lineWidth = 1, t.setLineDash([]), t.beginPath(), t.moveTo(64, 48 + i), t.lineTo(64 + n, 48 + i), t.stroke();
|
|
1837
|
+
let c = r * (s - 1), m = Math.floor(c) + 1;
|
|
1838
|
+
if (m >= 2) {
|
|
1839
|
+
t.beginPath(), t.moveTo(f[0].x, 48 + i), t.lineTo(f[0].x, f[0].y);
|
|
1840
|
+
for (let e = 1; e < m; e++) {
|
|
1841
|
+
let n = c - Math.floor(c), r = e < m - 1 ? f[e].x : f[e - 1].x + (f[e].x - f[e - 1].x) * (e === Math.ceil(c) ? n : 1), i = e < m - 1 ? f[e].y : f[e - 1].y + (f[e].y - f[e - 1].y) * (e === Math.ceil(c) ? n : 1);
|
|
1805
1842
|
t.lineTo(r, i);
|
|
1806
1843
|
}
|
|
1807
|
-
let e =
|
|
1808
|
-
t.lineTo(e.x,
|
|
1809
|
-
let n = t.createLinearGradient(0,
|
|
1810
|
-
n.addColorStop(0,
|
|
1844
|
+
let e = f[Math.min(m - 1, s - 1)];
|
|
1845
|
+
t.lineTo(e.x, 48 + i), t.closePath();
|
|
1846
|
+
let n = t.createLinearGradient(0, 48, 0, 48 + i);
|
|
1847
|
+
n.addColorStop(0, v(u.teal, .12)), n.addColorStop(1, v(u.teal, .02)), t.fillStyle = n, t.fill();
|
|
1811
1848
|
}
|
|
1812
1849
|
t.beginPath();
|
|
1813
|
-
for (let e = 0; e <
|
|
1814
|
-
let n = c - Math.floor(c), r = e ===
|
|
1850
|
+
for (let e = 0; e < m; e++) {
|
|
1851
|
+
let n = c - Math.floor(c), r = e === m - 1 && e > 0 && e === Math.ceil(c), i = e === 0 || e < m - 1 ? f[e].x : f[e - 1].x + (f[e].x - f[e - 1].x) * (r ? n : 1), a = e === 0 || e < m - 1 ? f[e].y : f[e - 1].y + (f[e].y - f[e - 1].y) * (r ? n : 1);
|
|
1815
1852
|
e === 0 ? t.moveTo(i, a) : t.lineTo(i, a);
|
|
1816
1853
|
}
|
|
1817
|
-
t.strokeStyle =
|
|
1818
|
-
if (n >=
|
|
1854
|
+
t.strokeStyle = v(u.teal, .85), t.lineWidth = 2, t.stroke(), f.forEach((e, n) => {
|
|
1855
|
+
if (n >= m) return;
|
|
1819
1856
|
let r = `pt-${n}`, s = o.current.get(r) ?? 0;
|
|
1820
|
-
|
|
1857
|
+
O(p.current, r, e.x, e.y, 10, {
|
|
1821
1858
|
label: e.point.week,
|
|
1822
1859
|
value: String(e.point.count),
|
|
1823
|
-
color: u.
|
|
1824
|
-
}), s > 0 &&
|
|
1860
|
+
color: u.teal
|
|
1861
|
+
}), s > 0 && T(t, e.x, 48, 48 + i, v(u.teal, .15 * s));
|
|
1825
1862
|
let c = e.point.count === a;
|
|
1826
|
-
(s > 0 || c) &&
|
|
1827
|
-
}),
|
|
1863
|
+
(s > 0 || c) && S(t, e.x, e.y, 14, u.teal, (c ? .3 : 0) + s * .25), t.beginPath(), t.arc(e.x, e.y, s > 0 ? 5 : 3.5, 0, Math.PI * 2), t.fillStyle = v(u.teal, s > 0 ? 1 : .8), t.fill(), (s > 0 || c) && (t.font = h.font, t.fillStyle = u.teal, t.textAlign = "center", t.fillText(String(e.point.count), e.x, e.y - 10)), t.font = h.font, t.fillStyle = s > 0 ? u.teal : h.color, t.textAlign = "center", t.fillText(e.point.week, e.x, vt - 68 + 14);
|
|
1864
|
+
}), g = requestAnimationFrame(_);
|
|
1828
1865
|
};
|
|
1829
|
-
return
|
|
1830
|
-
}, [
|
|
1831
|
-
width:
|
|
1832
|
-
height:
|
|
1866
|
+
return _(), () => cancelAnimationFrame(g);
|
|
1867
|
+
}, [m]), m.length < 2 ? /* @__PURE__ */ s(R, {
|
|
1868
|
+
width: _t,
|
|
1869
|
+
height: vt,
|
|
1833
1870
|
"data-testid": t
|
|
1834
1871
|
}) : /* @__PURE__ */ s("div", {
|
|
1835
1872
|
"data-testid": t,
|
|
@@ -1841,80 +1878,80 @@ function ht({ points: e = [], "data-testid": t }) {
|
|
|
1841
1878
|
children: /* @__PURE__ */ c("div", {
|
|
1842
1879
|
style: {
|
|
1843
1880
|
position: "relative",
|
|
1844
|
-
width:
|
|
1845
|
-
height:
|
|
1881
|
+
width: _t,
|
|
1882
|
+
height: vt
|
|
1846
1883
|
},
|
|
1847
1884
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1848
1885
|
ref: r,
|
|
1849
1886
|
role: "img",
|
|
1850
1887
|
"aria-label": "Trend chart — count over time",
|
|
1851
1888
|
style: {
|
|
1852
|
-
width:
|
|
1853
|
-
height:
|
|
1889
|
+
width: _t,
|
|
1890
|
+
height: vt,
|
|
1854
1891
|
display: "block"
|
|
1855
1892
|
}
|
|
1856
|
-
}), /* @__PURE__ */ s(
|
|
1857
|
-
...
|
|
1858
|
-
parentW:
|
|
1859
|
-
parentH:
|
|
1893
|
+
}), /* @__PURE__ */ s(E, {
|
|
1894
|
+
...f,
|
|
1895
|
+
parentW: _t,
|
|
1896
|
+
parentH: vt
|
|
1860
1897
|
})]
|
|
1861
1898
|
})
|
|
1862
1899
|
});
|
|
1863
1900
|
}
|
|
1864
1901
|
//#endregion
|
|
1865
1902
|
//#region src/components/trend/Trend.tsx
|
|
1866
|
-
var
|
|
1867
|
-
function
|
|
1868
|
-
let
|
|
1869
|
-
if (
|
|
1903
|
+
var bt = 680, q = 280, xt = 80, St = 48, Ct = 64, wt = h.font, Tt = 12, Et = Math.PI * 2, Dt = 72, Ot = 20, kt = 5e3;
|
|
1904
|
+
function At({ points: e = [], colorOffset: t = 0, "data-testid": r }) {
|
|
1905
|
+
let o = a(null), l = a(null), d = a(0), f = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), p = i(() => {
|
|
1906
|
+
if (f.length <= 1) return Ct;
|
|
1870
1907
|
let e = document.createElement("canvas").getContext("2d");
|
|
1871
|
-
if (!e) return
|
|
1872
|
-
e.font =
|
|
1873
|
-
let t = Math.max(1, Math.ceil(
|
|
1874
|
-
return Math.max(
|
|
1875
|
-
}, [
|
|
1876
|
-
width:
|
|
1877
|
-
height:
|
|
1908
|
+
if (!e) return Ct;
|
|
1909
|
+
e.font = wt;
|
|
1910
|
+
let t = Math.max(1, Math.ceil(f.length / Ot)), n = Math.max(...f.filter((e, n) => n % t === 0).map((t) => e.measureText(t.week).width));
|
|
1911
|
+
return Math.max(Ct, n + Tt);
|
|
1912
|
+
}, [f]), g = Math.round(p / 2), _ = St + g + Math.max(0, f.length - 1) * p, y = Math.max(bt - xt, Math.min(_, kt)), { tooltip: b, hitZonesRef: S } = D(o, {
|
|
1913
|
+
width: y,
|
|
1914
|
+
height: q
|
|
1878
1915
|
});
|
|
1879
1916
|
return n(() => {
|
|
1880
|
-
let e =
|
|
1917
|
+
let e = o.current;
|
|
1881
1918
|
if (!e) return;
|
|
1882
|
-
let
|
|
1883
|
-
|
|
1884
|
-
let i =
|
|
1885
|
-
x:
|
|
1886
|
-
y: 42 +
|
|
1919
|
+
let n = x(e, y, q), r = l.current ? x(l.current, xt, q) : null;
|
|
1920
|
+
d.current = 0;
|
|
1921
|
+
let i = m[t % m.length], a = f.length <= Dt ? Dt : Math.max(24, Math.round(Dt * (Dt / f.length))), s = y - St, c = q - 42 - 54, _ = f.length > 0 ? f.map((e) => e.count) : [0], b = Math.min(..._), C = Math.max(..._), w = C - b || 1, T = f.length, E = T > 1 ? (s - g) / (T - 1) : s - g, D = Math.max(1, Math.ceil(p / E)), k = b < 0, j = k ? 42 + c - -b / w * c : 42 + c, M = f.map((e, t) => ({
|
|
1922
|
+
x: g + t * E,
|
|
1923
|
+
y: 42 + c - (k ? (e.count - b) / w : e.count / (C || 1)) * c,
|
|
1887
1924
|
point: e
|
|
1888
1925
|
}));
|
|
1889
|
-
if (
|
|
1890
|
-
|
|
1891
|
-
let e =
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1926
|
+
if (r) {
|
|
1927
|
+
r.clearRect(0, 0, xt, q), r.letterSpacing = h.letterSpacing;
|
|
1928
|
+
let e = k ? [
|
|
1929
|
+
b,
|
|
1930
|
+
b + w * .25,
|
|
1931
|
+
b + w * .5,
|
|
1932
|
+
b + w * .75,
|
|
1933
|
+
C
|
|
1897
1934
|
] : [
|
|
1898
1935
|
0,
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1936
|
+
C * .25,
|
|
1937
|
+
C * .5,
|
|
1938
|
+
C * .75,
|
|
1939
|
+
C
|
|
1903
1940
|
];
|
|
1904
|
-
e.forEach((t,
|
|
1905
|
-
let i =
|
|
1906
|
-
|
|
1907
|
-
}),
|
|
1941
|
+
e.forEach((t, n) => {
|
|
1942
|
+
let i = n / (e.length - 1), a = 42 + c - i * c;
|
|
1943
|
+
r.font = h.font, r.fillStyle = h.color, r.textAlign = "right", r.fillText(U(t), xt - 6, a + 3);
|
|
1944
|
+
}), r.save(), r.translate(12, 42 + c / 2), r.rotate(-Math.PI / 2), r.font = h.font, r.fillStyle = h.color, r.textAlign = "center", r.fillText("Count", 0, 0), r.restore();
|
|
1908
1945
|
}
|
|
1909
|
-
let
|
|
1910
|
-
|
|
1911
|
-
let
|
|
1912
|
-
|
|
1913
|
-
for (let
|
|
1914
|
-
},
|
|
1915
|
-
|
|
1916
|
-
let e = Math.min(
|
|
1917
|
-
|
|
1946
|
+
let N = n.createLinearGradient(0, 42, 0, 42 + c);
|
|
1947
|
+
N.addColorStop(0, v(i, .12)), N.addColorStop(1, v(i, .02));
|
|
1948
|
+
let P = 0, F, I = (e) => {
|
|
1949
|
+
n.font = wt, n.fillStyle = h.color, n.textAlign = "center";
|
|
1950
|
+
for (let t = 0; t < e; t++) t % D === 0 && n.fillText(M[t].point.week, M[t].x, q - 54 + 14);
|
|
1951
|
+
}, L = () => {
|
|
1952
|
+
d.current++;
|
|
1953
|
+
let e = Math.min(d.current / a, 1), t = A(e), r = e >= 1;
|
|
1954
|
+
n.clearRect(0, 0, y, q), n.letterSpacing = h.letterSpacing, (k ? [
|
|
1918
1955
|
0,
|
|
1919
1956
|
.25,
|
|
1920
1957
|
.5,
|
|
@@ -1926,60 +1963,61 @@ function Et({ points: e = [], "data-testid": t }) {
|
|
|
1926
1963
|
.75,
|
|
1927
1964
|
1
|
|
1928
1965
|
]).forEach((e) => {
|
|
1929
|
-
let
|
|
1930
|
-
|
|
1931
|
-
}),
|
|
1932
|
-
let o =
|
|
1933
|
-
if (
|
|
1934
|
-
let e =
|
|
1935
|
-
|
|
1936
|
-
for (let e = 1; e <
|
|
1937
|
-
let
|
|
1938
|
-
|
|
1966
|
+
let t = 42 + c - e * c;
|
|
1967
|
+
n.strokeStyle = v(u.bd, .18), n.lineWidth = 1, n.setLineDash([3, 5]), n.beginPath(), n.moveTo(0, t), n.lineTo(s, t), n.stroke(), n.setLineDash([]);
|
|
1968
|
+
}), n.font = h.font, n.fillStyle = h.color, n.textAlign = "center", n.fillText("Period", g + (s - g) / 2, q - 6), n.strokeStyle = v(u.bd, k ? .5 : .3), n.lineWidth = k ? 2 : 1, n.beginPath(), n.moveTo(g, k ? j : 42 + c), n.lineTo(s, k ? j : 42 + c), n.stroke();
|
|
1969
|
+
let o = t * (T - 1), l = Math.floor(o) + 1;
|
|
1970
|
+
if (l >= 2) {
|
|
1971
|
+
let e = k ? j : 42 + c;
|
|
1972
|
+
n.beginPath(), n.moveTo(M[0].x, e), n.lineTo(M[0].x, M[0].y);
|
|
1973
|
+
for (let e = 1; e < l; e++) {
|
|
1974
|
+
let t = o - Math.floor(o), r = e === l - 1 && e === Math.ceil(o) && t > 0, i = r ? M[e - 1].x + (M[e].x - M[e - 1].x) * t : M[e].x, a = r ? M[e - 1].y + (M[e].y - M[e - 1].y) * t : M[e].y;
|
|
1975
|
+
n.lineTo(i, a);
|
|
1939
1976
|
}
|
|
1940
|
-
|
|
1977
|
+
n.lineTo(M[l - 1].x, e), n.closePath(), n.fillStyle = N, n.fill();
|
|
1941
1978
|
}
|
|
1942
|
-
|
|
1943
|
-
for (let e = 0; e <
|
|
1944
|
-
let
|
|
1945
|
-
e === 0 ?
|
|
1979
|
+
n.beginPath();
|
|
1980
|
+
for (let e = 0; e < l; e++) {
|
|
1981
|
+
let t = o - Math.floor(o), r = e === l - 1 && e > 0 && e === Math.ceil(o) && t > 0, i = r ? M[e - 1].x + (M[e].x - M[e - 1].x) * t : M[e].x, a = r ? M[e - 1].y + (M[e].y - M[e - 1].y) * t : M[e].y;
|
|
1982
|
+
e === 0 ? n.moveTo(i, a) : n.lineTo(i, a);
|
|
1946
1983
|
}
|
|
1947
|
-
|
|
1948
|
-
for (let e = 0; e <
|
|
1949
|
-
if (
|
|
1950
|
-
|
|
1951
|
-
for (let e = 0; e <
|
|
1952
|
-
label:
|
|
1953
|
-
value: String(
|
|
1954
|
-
color:
|
|
1984
|
+
n.strokeStyle = v(i, .85), n.lineWidth = 2, n.stroke(), n.fillStyle = v(i, .8), n.beginPath();
|
|
1985
|
+
for (let e = 0; e < l; e++) n.moveTo(M[e].x + 3.5, M[e].y), n.arc(M[e].x, M[e].y, 3.5, 0, Et);
|
|
1986
|
+
if (n.fill(), l > P) {
|
|
1987
|
+
S.current = [];
|
|
1988
|
+
for (let e = 0; e < l; e++) O(S.current, `pt-${e}`, M[e].x, M[e].y, 10, {
|
|
1989
|
+
label: M[e].point.week,
|
|
1990
|
+
value: String(M[e].point.count),
|
|
1991
|
+
color: i
|
|
1955
1992
|
});
|
|
1956
|
-
|
|
1993
|
+
P = l;
|
|
1957
1994
|
}
|
|
1958
|
-
r &&
|
|
1995
|
+
r && I(T), r || (F = requestAnimationFrame(L));
|
|
1959
1996
|
};
|
|
1960
|
-
return
|
|
1997
|
+
return L(), () => cancelAnimationFrame(F);
|
|
1961
1998
|
}, [
|
|
1962
|
-
|
|
1963
|
-
|
|
1999
|
+
f,
|
|
2000
|
+
y,
|
|
1964
2001
|
p,
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
2002
|
+
S,
|
|
2003
|
+
t
|
|
2004
|
+
]), f.length < 2 ? /* @__PURE__ */ s(R, {
|
|
2005
|
+
width: bt,
|
|
2006
|
+
height: q,
|
|
2007
|
+
"data-testid": r
|
|
1970
2008
|
}) : /* @__PURE__ */ c("div", {
|
|
1971
|
-
"data-testid":
|
|
2009
|
+
"data-testid": r,
|
|
1972
2010
|
style: {
|
|
1973
2011
|
position: "relative",
|
|
1974
2012
|
width: "100%",
|
|
1975
2013
|
display: "flex"
|
|
1976
2014
|
},
|
|
1977
2015
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1978
|
-
ref:
|
|
2016
|
+
ref: l,
|
|
1979
2017
|
"aria-hidden": "true",
|
|
1980
2018
|
style: {
|
|
1981
|
-
width:
|
|
1982
|
-
height:
|
|
2019
|
+
width: xt,
|
|
2020
|
+
height: q,
|
|
1983
2021
|
display: "block",
|
|
1984
2022
|
flexShrink: 0
|
|
1985
2023
|
}
|
|
@@ -1993,22 +2031,22 @@ function Et({ points: e = [], "data-testid": t }) {
|
|
|
1993
2031
|
children: /* @__PURE__ */ c("div", {
|
|
1994
2032
|
style: {
|
|
1995
2033
|
position: "relative",
|
|
1996
|
-
width:
|
|
1997
|
-
height:
|
|
2034
|
+
width: y,
|
|
2035
|
+
height: q
|
|
1998
2036
|
},
|
|
1999
2037
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2000
|
-
ref:
|
|
2038
|
+
ref: o,
|
|
2001
2039
|
role: "img",
|
|
2002
2040
|
"aria-label": "Trend chart — count over time",
|
|
2003
2041
|
style: {
|
|
2004
|
-
width:
|
|
2005
|
-
height:
|
|
2042
|
+
width: y,
|
|
2043
|
+
height: q,
|
|
2006
2044
|
display: "block"
|
|
2007
2045
|
}
|
|
2008
|
-
}), /* @__PURE__ */ s(
|
|
2009
|
-
...
|
|
2010
|
-
parentW:
|
|
2011
|
-
parentH:
|
|
2046
|
+
}), /* @__PURE__ */ s(E, {
|
|
2047
|
+
...b,
|
|
2048
|
+
parentW: y,
|
|
2049
|
+
parentH: q
|
|
2012
2050
|
})]
|
|
2013
2051
|
})
|
|
2014
2052
|
})]
|
|
@@ -2016,186 +2054,188 @@ function Et({ points: e = [], "data-testid": t }) {
|
|
|
2016
2054
|
}
|
|
2017
2055
|
//#endregion
|
|
2018
2056
|
//#region src/components/proportionalBandChart/ProportionalBandChart.tsx
|
|
2019
|
-
var
|
|
2020
|
-
function
|
|
2057
|
+
var jt = 780, Mt = 340, Nt = 28, Pt = 4, Ft = 148;
|
|
2058
|
+
function It(e, t, n) {
|
|
2021
2059
|
if (e.measureText(t).width <= n) return t;
|
|
2022
2060
|
let r = t;
|
|
2023
2061
|
for (; r.length > 0 && e.measureText(`${r}…`).width > n;) r = r.slice(0, -1);
|
|
2024
2062
|
return `${r}…`;
|
|
2025
2063
|
}
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
Low: u.green
|
|
2031
|
-
};
|
|
2032
|
-
function Nt({ severities: e = [], "data-testid": t }) {
|
|
2033
|
-
let r = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), d = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), m = d.length > 0 ? Math.min(Dt, 2 * kt + d.length * At) : Dt, { hoveredRef: g, tooltip: _, hitZonesRef: b } = w(r, {
|
|
2034
|
-
width: m,
|
|
2035
|
-
height: Ot
|
|
2064
|
+
function Lt({ severities: e = [], colorOffset: t = 0, "data-testid": r }) {
|
|
2065
|
+
let o = a(null), l = a(/* @__PURE__ */ new Map()), d = a(0), f = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), p = f.length > 0 ? Math.min(jt, 2 * Nt + f.length * Ft) : jt, { hoveredRef: g, tooltip: _, hitZonesRef: y } = D(o, {
|
|
2066
|
+
width: p,
|
|
2067
|
+
height: Mt
|
|
2036
2068
|
});
|
|
2037
2069
|
return n(() => {
|
|
2038
|
-
let e =
|
|
2070
|
+
let e = o.current;
|
|
2039
2071
|
if (!e) return;
|
|
2040
|
-
let
|
|
2041
|
-
|
|
2042
|
-
let
|
|
2043
|
-
|
|
2044
|
-
let e =
|
|
2045
|
-
|
|
2046
|
-
let
|
|
2047
|
-
|
|
2072
|
+
let n = x(e, p, Mt);
|
|
2073
|
+
d.current = 0;
|
|
2074
|
+
let r = f.reduce((e, t) => e + (t.count ?? 0), 0), i = Nt, a = Nt, s = p - i - a, c = Mt - 54 - 54, _ = s - Math.max(0, f.length - 1) * Pt, b = f.map((e) => (e.count ?? 0) / (r || 1) * _), S = m[t % m.length], C, w = () => {
|
|
2075
|
+
d.current++;
|
|
2076
|
+
let e = d.current;
|
|
2077
|
+
n.clearRect(0, 0, p, Mt), n.letterSpacing = h.letterSpacing;
|
|
2078
|
+
let t = j(Math.min(e / 60, 1));
|
|
2079
|
+
I(l.current, g.current), y.current = [];
|
|
2048
2080
|
let a = i;
|
|
2049
|
-
|
|
2050
|
-
let
|
|
2051
|
-
if (
|
|
2081
|
+
f.forEach((e, i) => {
|
|
2082
|
+
let o = b[i] ?? 0, s = l.current.get(e.severity) ?? 0, d = a + o / 2, f = o * .78, p = o * t, m = f * t, g = d - m / 2;
|
|
2083
|
+
if (p > 0) {
|
|
2084
|
+
let e = () => {
|
|
2085
|
+
n.beginPath(), n.moveTo(g, 54), n.lineTo(g + m, 54), n.lineTo(a + p, 54 + c), n.lineTo(a, 54 + c), n.closePath();
|
|
2086
|
+
};
|
|
2087
|
+
e(), n.fillStyle = v(S, .06 + s * .04), n.fill(), n.save(), e(), n.clip(), n.shadowColor = v(S, .302 * t), n.shadowBlur = 55, n.strokeStyle = v(S, .302 * t), n.lineWidth = 2, e(), n.stroke(), n.shadowColor = "transparent", n.shadowBlur = 0, n.restore(), e(), n.strokeStyle = v(S, .9 * t), n.lineWidth = 1, n.stroke();
|
|
2088
|
+
}
|
|
2089
|
+
if (k(y.current, e.severity, a, 54, o, c, {
|
|
2052
2090
|
label: e.severity,
|
|
2053
2091
|
value: U(e.count ?? 0),
|
|
2054
|
-
sublabel: `${Math.round((e.count ?? 0) / (
|
|
2055
|
-
color:
|
|
2056
|
-
}),
|
|
2057
|
-
let i = Math.min(1, (
|
|
2058
|
-
|
|
2092
|
+
sublabel: `${Math.round((e.count ?? 0) / (r || 1) * 100)}%`,
|
|
2093
|
+
color: S
|
|
2094
|
+
}), t > .5) {
|
|
2095
|
+
let i = Math.min(1, (t - .5) / .5), l = a + o / 2;
|
|
2096
|
+
n.globalAlpha = i, n.font = h.font, n.fillStyle = s > 0 ? S : v(u.t1, .65), n.textAlign = "center", n.fillText(It(n, e.severity, o - 8), l, 40), n.font = "600 22px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = v(u.t1, .92 + s * .08), n.fillText(U(e.count ?? 0), l, 54 + c / 2 + 8), n.font = h.font, n.fillStyle = s > 0 ? S : v(u.t1, .5), n.fillText(`${Math.round((e.count ?? 0) / (r || 1) * 100)}%`, l, 54 + c + 22), n.globalAlpha = 1;
|
|
2059
2097
|
}
|
|
2060
|
-
a +=
|
|
2061
|
-
});
|
|
2062
|
-
let v = t.createLinearGradient(i, 0, i + s, 0);
|
|
2063
|
-
v.addColorStop(0, h(u.red, .03)), v.addColorStop(.33, h(u.orange, .03)), v.addColorStop(.66, h(u.amber, .03)), v.addColorStop(1, h(u.green, .03)), t.fillStyle = v, t.fillRect(i, 50, s * r, c), x = requestAnimationFrame(S);
|
|
2098
|
+
a += o + Pt;
|
|
2099
|
+
}), C = requestAnimationFrame(w);
|
|
2064
2100
|
};
|
|
2065
|
-
return
|
|
2066
|
-
}, [
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2101
|
+
return w(), () => cancelAnimationFrame(C);
|
|
2102
|
+
}, [
|
|
2103
|
+
f,
|
|
2104
|
+
p,
|
|
2105
|
+
t
|
|
2106
|
+
]), f.length === 0 ? /* @__PURE__ */ s(R, {
|
|
2107
|
+
width: p,
|
|
2108
|
+
height: Mt,
|
|
2109
|
+
"data-testid": r
|
|
2070
2110
|
}) : /* @__PURE__ */ c("div", {
|
|
2071
|
-
"data-testid":
|
|
2111
|
+
"data-testid": r,
|
|
2072
2112
|
style: {
|
|
2073
2113
|
position: "relative",
|
|
2074
|
-
width:
|
|
2075
|
-
height:
|
|
2114
|
+
width: p,
|
|
2115
|
+
height: Mt
|
|
2076
2116
|
},
|
|
2077
2117
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2078
|
-
ref:
|
|
2118
|
+
ref: o,
|
|
2079
2119
|
role: "img",
|
|
2080
2120
|
"aria-label": "Early Warning severity distribution — prism spectrum bands",
|
|
2081
2121
|
style: {
|
|
2082
|
-
width:
|
|
2083
|
-
height:
|
|
2122
|
+
width: p,
|
|
2123
|
+
height: Mt,
|
|
2084
2124
|
display: "block"
|
|
2085
2125
|
}
|
|
2086
|
-
}), /* @__PURE__ */ s(
|
|
2126
|
+
}), /* @__PURE__ */ s(E, {
|
|
2087
2127
|
..._,
|
|
2088
|
-
parentW:
|
|
2089
|
-
parentH:
|
|
2128
|
+
parentW: p,
|
|
2129
|
+
parentH: Mt
|
|
2090
2130
|
})]
|
|
2091
2131
|
});
|
|
2092
2132
|
}
|
|
2093
2133
|
//#endregion
|
|
2094
2134
|
//#region src/components/hubAndSpokeRadialChart/HubAndSpokeRadialChart.tsx
|
|
2095
|
-
var
|
|
2135
|
+
var J = 300, Y = 280, Rt = 100, zt = {
|
|
2096
2136
|
Open: u.red,
|
|
2097
2137
|
Submitted: u.amber,
|
|
2098
2138
|
Closed: u.green
|
|
2099
2139
|
};
|
|
2100
|
-
function
|
|
2101
|
-
let l = a(null), d = a(0),
|
|
2102
|
-
width:
|
|
2103
|
-
height:
|
|
2104
|
-
}),
|
|
2140
|
+
function Bt({ segments: e = [], title: t, unitLabel: r = "", "data-testid": o }) {
|
|
2141
|
+
let l = a(null), d = a(0), f = a(/* @__PURE__ */ new Map()), { hoveredRef: p, tooltip: m, hitZonesRef: _ } = D(l, {
|
|
2142
|
+
width: J,
|
|
2143
|
+
height: Y
|
|
2144
|
+
}), y = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
2105
2145
|
return n(() => {
|
|
2106
2146
|
let e = l.current;
|
|
2107
2147
|
if (!e) return;
|
|
2108
|
-
let n =
|
|
2148
|
+
let n = x(e, J, Y);
|
|
2109
2149
|
d.current = 0;
|
|
2110
|
-
let i =
|
|
2150
|
+
let i = J * .5, a = Y * .56, o = Rt, s = y.reduce((e, t) => e + (t.count ?? 0), 0), c = Math.max(...y.map((e) => e.count ?? 0), 1), m, b = () => {
|
|
2111
2151
|
d.current++;
|
|
2112
2152
|
let e = d.current;
|
|
2113
|
-
n.clearRect(0, 0,
|
|
2114
|
-
let n = t ===
|
|
2115
|
-
Math.abs(r - n) < .005 ? n === 0 ?
|
|
2116
|
-
}),
|
|
2117
|
-
let s = r / 3 * Math.PI * 2 - Math.PI / 2, l = i + Math.cos(s) * o, d = a + Math.sin(s) * o, f =
|
|
2118
|
-
n.beginPath(), n.moveTo(i, a), n.lineTo(l, d), n.strokeStyle =
|
|
2119
|
-
let
|
|
2120
|
-
|
|
2121
|
-
let
|
|
2122
|
-
n.font =
|
|
2123
|
-
}),
|
|
2124
|
-
let l = t / 3 * Math.PI * 2 - Math.PI / 2, d = i + Math.cos(l) * o, p = a + Math.sin(l) * o,
|
|
2125
|
-
|
|
2126
|
-
let b = n.createRadialGradient(d, p -
|
|
2127
|
-
b.addColorStop(0,
|
|
2153
|
+
n.clearRect(0, 0, J, Y), n.letterSpacing = h.letterSpacing, _.current = [], f.current.forEach((e, t) => {
|
|
2154
|
+
let n = t === p.current ? 1 : 0, r = e + (n - e) * .12;
|
|
2155
|
+
Math.abs(r - n) < .005 ? n === 0 ? f.current.delete(t) : f.current.set(t, 1) : f.current.set(t, r);
|
|
2156
|
+
}), p.current && !f.current.has(p.current) && f.current.set(p.current, 0), C(n, J, Y, e, 40, v(u.blue, .04)), y.forEach((t, r) => {
|
|
2157
|
+
let s = r / 3 * Math.PI * 2 - Math.PI / 2, l = i + Math.cos(s) * o, d = a + Math.sin(s) * o, f = zt[t.status] ?? u.blue, p = 2 + t.count / c * 8;
|
|
2158
|
+
n.beginPath(), n.moveTo(i, a), n.lineTo(l, d), n.strokeStyle = v(f, .08), n.lineWidth = p * 2, n.stroke(), n.beginPath(), n.moveTo(i, a), n.lineTo(l, d), n.strokeStyle = v(f, .25), n.lineWidth = 1, n.stroke();
|
|
2159
|
+
let m = (e * .005 + r * .33) % 1, h = i + (l - i) * m, _ = a + (d - a) * m;
|
|
2160
|
+
S(n, h, _, 6, f, .4), n.beginPath(), n.arc(h, _, 2, 0, Math.PI * 2), n.fillStyle = v(f, .8), n.fill();
|
|
2161
|
+
let y = (i + l) / 2, b = (a + d) / 2;
|
|
2162
|
+
n.font = g.font, n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = v(f, .85), n.fillText(String(t.count), y, b);
|
|
2163
|
+
}), y.forEach((e, t) => {
|
|
2164
|
+
let l = t / 3 * Math.PI * 2 - Math.PI / 2, d = i + Math.cos(l) * o, p = a + Math.sin(l) * o, m = zt[e.status] ?? u.blue, g = 10 + e.count / c * 18, y = f.current.get(e.status) ?? 0;
|
|
2165
|
+
S(n, d, p, g * 2.5, m, .2 + y * .15);
|
|
2166
|
+
let b = n.createRadialGradient(d, p - g * .2, 0, d, p, g);
|
|
2167
|
+
b.addColorStop(0, v(m, .8 + y * .2)), b.addColorStop(1, v(m, .4 + y * .1)), n.beginPath(), n.arc(d, p, g, 0, Math.PI * 2), n.fillStyle = b, n.fill(), n.font = "bold " + h.font, n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = v(u.t1, .9), n.fillText(e.status, d, p), O(_.current, e.status, d, p, g + 6, {
|
|
2128
2168
|
label: e.status,
|
|
2129
2169
|
value: r ? `${e.count} ${r}` : String(e.count),
|
|
2130
2170
|
sublabel: `${Math.round((e.count ?? 0) / (s || 1) * 100)}%`,
|
|
2131
|
-
color:
|
|
2171
|
+
color: m
|
|
2132
2172
|
});
|
|
2133
2173
|
});
|
|
2134
|
-
let l =
|
|
2135
|
-
|
|
2136
|
-
let
|
|
2137
|
-
|
|
2174
|
+
let l = f.current.get("center") ?? 0;
|
|
2175
|
+
S(n, i, a, 36, u.t2, .2 + l * .15);
|
|
2176
|
+
let x = n.createRadialGradient(i, a - 4, 0, i, a, 22);
|
|
2177
|
+
x.addColorStop(0, v(u.t2, .9)), x.addColorStop(1, v(u.t2, .5)), n.beginPath(), n.arc(i, a, 22, 0, Math.PI * 2), n.fillStyle = x, n.fill(), n.font = g.font, n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = v(u.t1, .9), n.fillText(t ?? "", i, a - 4), n.font = "bold " + h.font, n.fillStyle = u.t1, n.fillText(String(s), i, a + 8), O(_.current, "center", i, a, 28, {
|
|
2138
2178
|
label: t ?? "Total",
|
|
2139
2179
|
value: r ? `${s} ${r}` : String(s),
|
|
2140
2180
|
color: u.t2
|
|
2141
|
-
}),
|
|
2181
|
+
}), w(n, J, Y, e, .015), m = requestAnimationFrame(b);
|
|
2142
2182
|
};
|
|
2143
|
-
return
|
|
2183
|
+
return b(), () => cancelAnimationFrame(m);
|
|
2144
2184
|
}, [
|
|
2145
|
-
|
|
2185
|
+
y,
|
|
2146
2186
|
t,
|
|
2147
2187
|
r
|
|
2148
|
-
]),
|
|
2149
|
-
width:
|
|
2150
|
-
height:
|
|
2188
|
+
]), y.length === 0 ? /* @__PURE__ */ s(R, {
|
|
2189
|
+
width: J,
|
|
2190
|
+
height: Y,
|
|
2151
2191
|
"data-testid": o
|
|
2152
2192
|
}) : /* @__PURE__ */ c("div", {
|
|
2153
2193
|
"data-testid": o,
|
|
2154
2194
|
style: {
|
|
2155
2195
|
position: "relative",
|
|
2156
|
-
width:
|
|
2157
|
-
height:
|
|
2196
|
+
width: J,
|
|
2197
|
+
height: Y
|
|
2158
2198
|
},
|
|
2159
2199
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2160
2200
|
ref: l,
|
|
2161
2201
|
role: "img",
|
|
2162
2202
|
"aria-label": t ?? "EW status arc visualization",
|
|
2163
2203
|
style: {
|
|
2164
|
-
width:
|
|
2165
|
-
height:
|
|
2204
|
+
width: J,
|
|
2205
|
+
height: Y,
|
|
2166
2206
|
display: "block",
|
|
2167
2207
|
borderRadius: 8
|
|
2168
2208
|
}
|
|
2169
|
-
}), /* @__PURE__ */ s(
|
|
2170
|
-
...
|
|
2171
|
-
parentW:
|
|
2172
|
-
parentH:
|
|
2209
|
+
}), /* @__PURE__ */ s(E, {
|
|
2210
|
+
...m,
|
|
2211
|
+
parentW: J,
|
|
2212
|
+
parentH: Y
|
|
2173
2213
|
})]
|
|
2174
2214
|
});
|
|
2175
2215
|
}
|
|
2176
2216
|
//#endregion
|
|
2177
2217
|
//#region src/components/trendChart/TrendChart.tsx
|
|
2178
|
-
var
|
|
2179
|
-
function
|
|
2218
|
+
var Vt = 280, X = 96;
|
|
2219
|
+
function Ht({ points: e = [], className: t, colors: r }) {
|
|
2180
2220
|
let o = a(null), d = a(/* @__PURE__ */ new Map()), f = a(0), p = i(() => e.filter(Array.isArray).map(([e, t]) => {
|
|
2181
2221
|
let n = String(t).match(/-?\d+(\.\d+)?/);
|
|
2182
2222
|
return {
|
|
2183
2223
|
label: e,
|
|
2184
2224
|
value: n ? Number(n[0]) : 0
|
|
2185
2225
|
};
|
|
2186
|
-
}), [e]), { mouseRef: m, hoveredRef:
|
|
2187
|
-
width:
|
|
2188
|
-
height:
|
|
2226
|
+
}), [e]), { mouseRef: m, hoveredRef: h, tooltip: g, hitZonesRef: _ } = D(o, {
|
|
2227
|
+
width: Vt,
|
|
2228
|
+
height: X
|
|
2189
2229
|
});
|
|
2190
2230
|
return n(() => {
|
|
2191
2231
|
let e = o.current;
|
|
2192
2232
|
if (!e) return;
|
|
2193
|
-
let t =
|
|
2233
|
+
let t = x(e, Vt, X);
|
|
2194
2234
|
f.current = 0;
|
|
2195
|
-
let n = r?.line ?? u.
|
|
2235
|
+
let n = r?.line ?? u.teal, i = r?.point ?? u.teal, a = r?.axisLine ?? u.bd, s, c = () => {
|
|
2196
2236
|
f.current++;
|
|
2197
2237
|
let e = f.current;
|
|
2198
|
-
if (t.clearRect(0, 0,
|
|
2238
|
+
if (t.clearRect(0, 0, Vt, X), p.length < 2) {
|
|
2199
2239
|
s = requestAnimationFrame(c);
|
|
2200
2240
|
return;
|
|
2201
2241
|
}
|
|
@@ -2204,35 +2244,35 @@ function Rt({ points: e = [], className: t, colors: r }) {
|
|
|
2204
2244
|
right: 12,
|
|
2205
2245
|
top: 16,
|
|
2206
2246
|
bottom: 20
|
|
2207
|
-
}, o =
|
|
2208
|
-
if (
|
|
2209
|
-
t.fillText(e.label.replace("Day ", "D"),
|
|
2210
|
-
}), m.current.over &&
|
|
2211
|
-
let e = parseInt(
|
|
2212
|
-
isNaN(e) ||
|
|
2247
|
+
}, o = Vt - r.left - r.right, l = X - r.top - r.bottom, g = p.map((e) => e.value), y = Math.min(...g), b = Math.max(...g) - y || 1, x = (e) => r.left + e / (p.length - 1) * o, C = (e) => r.top + (1 - (e - y) / b) * l, w = 1 - (1 - Math.min(e / 48, 1)) ** 3, E = Math.max(2, Math.floor(w * p.length));
|
|
2248
|
+
if (I(d.current, h.current), _.current = [], t.strokeStyle = v(a, .3), t.lineWidth = .5, t.setLineDash([]), t.beginPath(), t.moveTo(r.left, X - r.bottom), t.lineTo(Vt - r.right, X - r.bottom), t.stroke(), t.font = "9px 'JetBrains Mono', monospace", t.fillStyle = v(u.t4, .9), t.textAlign = "center", p.forEach((e, n) => {
|
|
2249
|
+
t.fillText(e.label.replace("Day ", "D"), x(n), X - 4);
|
|
2250
|
+
}), m.current.over && h.current) {
|
|
2251
|
+
let e = parseInt(h.current.split("-")[1]);
|
|
2252
|
+
isNaN(e) || T(t, x(e), r.top, r.top + l);
|
|
2213
2253
|
}
|
|
2214
|
-
if (
|
|
2254
|
+
if (E > 1) {
|
|
2215
2255
|
let e = t.createLinearGradient(0, r.top, 0, r.top + l);
|
|
2216
|
-
e.addColorStop(0,
|
|
2217
|
-
for (let e = 0; e <
|
|
2218
|
-
t.lineTo(
|
|
2219
|
-
for (let e = 0; e <
|
|
2220
|
-
let n =
|
|
2256
|
+
e.addColorStop(0, v(n, .15)), e.addColorStop(1, v(n, 0)), t.fillStyle = e, t.beginPath(), t.moveTo(x(0), r.top + l);
|
|
2257
|
+
for (let e = 0; e < E; e++) t.lineTo(x(e), C(p[e].value));
|
|
2258
|
+
t.lineTo(x(E - 1), r.top + l), t.closePath(), t.fill(), t.strokeStyle = v(n, .8), t.lineWidth = 1.5, t.setLineDash([]), t.beginPath();
|
|
2259
|
+
for (let e = 0; e < E; e++) {
|
|
2260
|
+
let n = x(e), r = C(p[e].value);
|
|
2221
2261
|
e === 0 ? t.moveTo(n, r) : t.lineTo(n, r);
|
|
2222
2262
|
}
|
|
2223
2263
|
t.stroke();
|
|
2224
2264
|
}
|
|
2225
|
-
for (let e = 0; e <
|
|
2226
|
-
let n =
|
|
2227
|
-
|
|
2265
|
+
for (let e = 0; e < E; e++) {
|
|
2266
|
+
let n = x(e), r = C(p[e].value), a = `tp-${e}`, o = d.current.get(a) ?? 0, s = e === p.length - 1;
|
|
2267
|
+
O(_.current, a, n, r, 10, {
|
|
2228
2268
|
label: p[e].label,
|
|
2229
2269
|
value: String(p[e].value),
|
|
2230
2270
|
color: s ? u.red : i
|
|
2231
|
-
}), o > 0 && !s && (
|
|
2271
|
+
}), o > 0 && !s && (S(t, n, r, 12 * o, i, .2 * o), t.fillStyle = v(i, .8), t.beginPath(), t.arc(n, r, 3 + o * 2, 0, Math.PI * 2), t.fill());
|
|
2232
2272
|
}
|
|
2233
|
-
if (
|
|
2234
|
-
let n = p.length - 1, r =
|
|
2235
|
-
t.shadowColor =
|
|
2273
|
+
if (E >= p.length) {
|
|
2274
|
+
let n = p.length - 1, r = x(n), i = C(p[n].value), a = d.current.get(`tp-${n}`) ?? 0, o = P(e, .05, 5e-4), s = 1 + a * .5;
|
|
2275
|
+
t.shadowColor = v(u.red, .5), t.shadowBlur = (8 + o * 4) * s, t.fillStyle = u.red, t.beginPath(), t.arc(r, i, (3.5 + o * 1.5) * s, 0, Math.PI * 2), t.fill(), t.shadowBlur = 0;
|
|
2236
2276
|
}
|
|
2237
2277
|
s = requestAnimationFrame(c);
|
|
2238
2278
|
};
|
|
@@ -2242,171 +2282,173 @@ function Rt({ points: e = [], className: t, colors: r }) {
|
|
|
2242
2282
|
children: /* @__PURE__ */ c("div", {
|
|
2243
2283
|
style: {
|
|
2244
2284
|
position: "relative",
|
|
2245
|
-
width:
|
|
2246
|
-
height:
|
|
2285
|
+
width: Vt,
|
|
2286
|
+
height: X
|
|
2247
2287
|
},
|
|
2248
2288
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2249
2289
|
ref: o,
|
|
2250
2290
|
role: "img",
|
|
2251
2291
|
"aria-label": "trend chart",
|
|
2252
2292
|
style: {
|
|
2253
|
-
width:
|
|
2254
|
-
height:
|
|
2293
|
+
width: Vt,
|
|
2294
|
+
height: X,
|
|
2255
2295
|
display: "block",
|
|
2256
2296
|
borderRadius: 8
|
|
2257
2297
|
}
|
|
2258
|
-
}), /* @__PURE__ */ s(
|
|
2259
|
-
...
|
|
2260
|
-
parentW:
|
|
2261
|
-
parentH:
|
|
2298
|
+
}), /* @__PURE__ */ s(E, {
|
|
2299
|
+
...g,
|
|
2300
|
+
parentW: Vt,
|
|
2301
|
+
parentH: X
|
|
2262
2302
|
})]
|
|
2263
2303
|
})
|
|
2264
2304
|
});
|
|
2265
2305
|
}
|
|
2266
2306
|
//#endregion
|
|
2267
2307
|
//#region src/components/segmentedSplitBarChart/SegmentedSplitBarChart.tsx
|
|
2268
|
-
function
|
|
2308
|
+
function Ut(e, t, n) {
|
|
2269
2309
|
if (e.measureText(t).width <= n) return t;
|
|
2270
2310
|
let r = t;
|
|
2271
2311
|
for (; r.length > 0 && e.measureText(r + "…").width > n;) r = r.slice(0, -1);
|
|
2272
2312
|
return r + "…";
|
|
2273
2313
|
}
|
|
2274
|
-
var
|
|
2275
|
-
function
|
|
2276
|
-
let
|
|
2277
|
-
width:
|
|
2278
|
-
height:
|
|
2314
|
+
var Wt = 680, Gt = 8, Z = 6, Kt = 8, qt = Z * 2 + Kt, Jt = 36, Yt = 16, Xt = 48;
|
|
2315
|
+
function Zt({ items: e = [], labelA: t = "Implemented", labelB: r = "Unimplemented", unit: l = "variations", "data-testid": d }) {
|
|
2316
|
+
let f = a(null), p = a(/* @__PURE__ */ new Map()), m = a(0), [y, b] = o(!1), C = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), w = i(() => y ? C : C.slice(0, Gt), [C, y]), T = Yt + Xt + w.length * (qt + Jt) - Jt, { hoveredRef: O, tooltip: A, hitZonesRef: M } = D(f, {
|
|
2317
|
+
width: Wt,
|
|
2318
|
+
height: T
|
|
2279
2319
|
});
|
|
2280
2320
|
return n(() => {
|
|
2281
|
-
let e =
|
|
2321
|
+
let e = f.current;
|
|
2282
2322
|
if (!e) return;
|
|
2283
|
-
let n =
|
|
2284
|
-
|
|
2285
|
-
let i = Wt
|
|
2286
|
-
|
|
2287
|
-
let e =
|
|
2288
|
-
n.clearRect(0, 0,
|
|
2289
|
-
let
|
|
2290
|
-
|
|
2291
|
-
let
|
|
2292
|
-
|
|
2323
|
+
let n = x(e, Wt, T);
|
|
2324
|
+
m.current = 0;
|
|
2325
|
+
let i = Wt - 150 - 100, a = Math.max(...w.map((e) => e.implemented ?? 0), ...w.map((e) => e.unimplemented ?? 0), 1), o = w.length * (qt + Jt) - Jt, s = Yt + (T - Yt - Xt - o) / 2, c, d = () => {
|
|
2326
|
+
m.current++;
|
|
2327
|
+
let e = m.current;
|
|
2328
|
+
n.clearRect(0, 0, Wt, T);
|
|
2329
|
+
let f = j(Math.min(e / 60, 1));
|
|
2330
|
+
I(p.current, O.current), M.current = [], w.forEach((e, o) => {
|
|
2331
|
+
let c = F(f, o, w.length, j), d = s + o * (qt + Jt), m = d, _ = d + Z + Kt, y = `${e.id}-impl`, b = `${e.id}-un`, x = p.current.get(y) ?? 0, C = p.current.get(b) ?? 0, T = (e.implemented ?? 0) / a * i * c, E = (e.unimplemented ?? 0) / a * i * c;
|
|
2332
|
+
if (n.font = h.font, n.fillStyle = x > 0 || C > 0 ? u.t1 : u.t2, n.textAlign = "right", n.textBaseline = "middle", n.fillText(Ut(n, e.abbreviation ?? e.name ?? "", 134), 142, d + qt / 2), n.textBaseline = "alphabetic", k(M.current, y, 0, d, 150, qt, {
|
|
2333
|
+
label: e.name ?? e.abbreviation ?? "",
|
|
2334
|
+
value: `${U((e.implemented ?? 0) + (e.unimplemented ?? 0))} total ${l}`,
|
|
2335
|
+
sublabel: `${t}: ${U(e.implemented ?? 0)} · ${r}: ${U(e.unimplemented ?? 0)}`,
|
|
2336
|
+
color: u.green
|
|
2337
|
+
}), T > 0) {
|
|
2338
|
+
x > 0 && S(n, 150 + T / 2, m + Z / 2, T * .15, u.green, .18 * x);
|
|
2339
|
+
let e = n.createLinearGradient(150, 0, 150 + T, 0);
|
|
2340
|
+
e.addColorStop(0, v(u.green, .7)), e.addColorStop(1, v(u.green, 1)), n.fillStyle = e, n.beginPath(), n.roundRect(150, m, T, Z, Z / 2), n.fill();
|
|
2341
|
+
}
|
|
2342
|
+
if (k(M.current, y, 150, m, Math.max(T, 1), Z, {
|
|
2293
2343
|
label: e.name,
|
|
2294
2344
|
value: U(e.implemented ?? 0),
|
|
2295
|
-
sublabel: `${Math.round((e.implemented ?? 0) / (v || 1) * 100)}%`,
|
|
2296
2345
|
color: u.green
|
|
2297
|
-
}),
|
|
2346
|
+
}), c > .4 && (n.globalAlpha = Math.min(1, (c - .4) / .4), n.font = g.font, n.fillStyle = u.t1, n.textAlign = "left", n.textBaseline = "middle", n.fillText(U(e.implemented ?? 0), 150 + T + 16, m + Z / 2), n.globalAlpha = 1, n.textBaseline = "alphabetic"), E > 0) {
|
|
2347
|
+
C > 0 && S(n, 150 + E / 2, _ + Z / 2, E * .15, u.amber, .18 * C);
|
|
2348
|
+
let e = n.createLinearGradient(150, 0, 150 + E, 0);
|
|
2349
|
+
e.addColorStop(0, v(u.amber, .5)), e.addColorStop(1, v(u.amber, .9)), n.fillStyle = e, n.beginPath(), n.roundRect(150, _, E, Z, Z / 2), n.fill();
|
|
2350
|
+
}
|
|
2351
|
+
k(M.current, b, 150, _, Math.max(E, 1), Z, {
|
|
2298
2352
|
label: e.name,
|
|
2299
2353
|
value: U(e.unimplemented ?? 0),
|
|
2300
|
-
sublabel: `${Math.round((e.unimplemented ?? 0) / (v || 1) * 100)}%`,
|
|
2301
2354
|
color: u.amber
|
|
2302
|
-
}), n.font =
|
|
2303
|
-
label: e.name ?? e.abbreviation ?? "",
|
|
2304
|
-
value: `${U((e.implemented ?? 0) + (e.unimplemented ?? 0))} total ${l}`,
|
|
2305
|
-
sublabel: `${t}: ${U(e.implemented ?? 0)} · ${r}: ${U(e.unimplemented ?? 0)}`,
|
|
2306
|
-
color: u.green
|
|
2307
|
-
}), n.fillStyle = h(u.bd, .15), n.beginPath(), n.roundRect(150, g, v / d * c, o, 4), n.fill(), b > 0 && (T > 0 && y(n, 150 + b / 2, g + o / 2, b * .3, u.green, .12 * T), n.fillStyle = h(u.green, .6 + T * .2), n.beginPath(), n.roundRect(150, g, b, o, [
|
|
2308
|
-
4,
|
|
2309
|
-
0,
|
|
2310
|
-
0,
|
|
2311
|
-
4
|
|
2312
|
-
]), n.fill(), b > 28 && m > .5 && (n.font = p.font, n.fillStyle = T > 0 ? u.green : u.t2, n.textAlign = "center", n.fillText(U(e.implemented ?? 0), 150 + b / 2, g + o / 2 + 4))), x > 0 && (k > 0 && y(n, 150 + b + x / 2, g + o / 2, x * .3, u.amber, .12 * k), n.fillStyle = h(u.amber, .18 + k * .18), n.strokeStyle = h(u.amber, .3 + k * .3), n.lineWidth = 1, n.beginPath(), n.roundRect(150 + b, g, x, o, [
|
|
2313
|
-
0,
|
|
2314
|
-
4,
|
|
2315
|
-
4,
|
|
2316
|
-
0
|
|
2317
|
-
]), n.fill(), n.stroke(), x > 28 && m > .5 && (n.font = p.font, n.fillStyle = k > 0 ? u.amber : u.t2, n.textAlign = "center", n.fillText(U(e.unimplemented ?? 0), 150 + b + x / 2, g + o / 2 + 4))), b > 0 && x > 0 && (n.strokeStyle = h(u.bg, .7), n.lineWidth = 2, n.beginPath(), n.moveTo(150 + b, g), n.lineTo(150 + b, g + o), n.stroke());
|
|
2355
|
+
}), c > .4 && (n.globalAlpha = Math.min(1, (c - .4) / .4), n.font = g.font, n.fillStyle = u.t1, n.textAlign = "left", n.textBaseline = "middle", n.fillText(U(e.unimplemented ?? 0), 150 + E + 16, _ + Z / 2), n.globalAlpha = 1, n.textBaseline = "alphabetic");
|
|
2318
2356
|
});
|
|
2319
|
-
let
|
|
2320
|
-
n.font =
|
|
2357
|
+
let y = s + o + 28, b = 150 + i / 2;
|
|
2358
|
+
n.font = _.font, n.textBaseline = "middle";
|
|
2359
|
+
let x = n.createLinearGradient(b - 120, 0, b - 120 + 14, 0);
|
|
2360
|
+
x.addColorStop(0, v(u.green, .7)), x.addColorStop(1, v(u.green, 1)), n.fillStyle = x, n.beginPath(), n.roundRect(b - 120, y - 3, 14, 6, 2), n.fill(), n.fillStyle = _.color, n.textAlign = "left", n.fillText(t, b - 120 + 14 + 6, y);
|
|
2361
|
+
let C = n.createLinearGradient(b + 10, 0, b + 10 + 14, 0);
|
|
2362
|
+
C.addColorStop(0, v(u.amber, .5)), C.addColorStop(1, v(u.amber, .9)), n.fillStyle = C, n.beginPath(), n.roundRect(b + 10, y - 3, 14, 6, 2), n.fill(), n.fillStyle = _.color, n.fillText(r, b + 10 + 14 + 6, y), n.textBaseline = "alphabetic", c = requestAnimationFrame(d);
|
|
2321
2363
|
};
|
|
2322
|
-
return
|
|
2323
|
-
}, [
|
|
2324
|
-
width:
|
|
2364
|
+
return d(), () => cancelAnimationFrame(c);
|
|
2365
|
+
}, [w, T]), C.length === 0 ? /* @__PURE__ */ s(R, {
|
|
2366
|
+
width: Wt,
|
|
2325
2367
|
height: 160,
|
|
2326
2368
|
"data-testid": d
|
|
2327
2369
|
}) : /* @__PURE__ */ c("div", {
|
|
2328
2370
|
"data-testid": d,
|
|
2329
|
-
style: { width:
|
|
2371
|
+
style: { width: Wt },
|
|
2330
2372
|
children: [/* @__PURE__ */ c("div", {
|
|
2331
2373
|
style: {
|
|
2332
2374
|
position: "relative",
|
|
2333
|
-
width:
|
|
2334
|
-
height:
|
|
2375
|
+
width: Wt,
|
|
2376
|
+
height: T
|
|
2335
2377
|
},
|
|
2336
2378
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2337
|
-
ref:
|
|
2379
|
+
ref: f,
|
|
2338
2380
|
role: "img",
|
|
2339
2381
|
"aria-label": "Implemented vs unimplemented variations per contractor — split bar",
|
|
2340
2382
|
style: {
|
|
2341
|
-
width:
|
|
2342
|
-
height:
|
|
2383
|
+
width: Wt,
|
|
2384
|
+
height: T,
|
|
2343
2385
|
display: "block"
|
|
2344
2386
|
}
|
|
2345
|
-
}), /* @__PURE__ */ s(
|
|
2346
|
-
...
|
|
2347
|
-
parentW:
|
|
2348
|
-
parentH:
|
|
2387
|
+
}), /* @__PURE__ */ s(E, {
|
|
2388
|
+
...A,
|
|
2389
|
+
parentW: Wt,
|
|
2390
|
+
parentH: T
|
|
2349
2391
|
})]
|
|
2350
|
-
}),
|
|
2392
|
+
}), C.length > Gt && /* @__PURE__ */ s("div", {
|
|
2351
2393
|
style: { marginTop: 8 },
|
|
2352
|
-
children: /* @__PURE__ */ s(
|
|
2353
|
-
expanded:
|
|
2354
|
-
onToggle: () =>
|
|
2394
|
+
children: /* @__PURE__ */ s(oe, {
|
|
2395
|
+
expanded: y,
|
|
2396
|
+
onToggle: () => b((e) => !e)
|
|
2355
2397
|
})
|
|
2356
2398
|
})]
|
|
2357
2399
|
});
|
|
2358
2400
|
}
|
|
2359
2401
|
//#endregion
|
|
2360
2402
|
//#region src/components/weeklyFlow/WeeklyFlow.tsx
|
|
2361
|
-
var
|
|
2362
|
-
function
|
|
2363
|
-
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip:
|
|
2364
|
-
width:
|
|
2365
|
-
height:
|
|
2403
|
+
var Qt = 800, $t = 360;
|
|
2404
|
+
function en({ items: e = [], "data-testid": t }) {
|
|
2405
|
+
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: d, hitZonesRef: f } = D(r, {
|
|
2406
|
+
width: Qt,
|
|
2407
|
+
height: $t
|
|
2366
2408
|
});
|
|
2367
2409
|
return n(() => {
|
|
2368
2410
|
let t = r.current;
|
|
2369
2411
|
if (!t) return;
|
|
2370
|
-
let n =
|
|
2412
|
+
let n = x(t, Qt, $t);
|
|
2371
2413
|
o.current = 0;
|
|
2372
|
-
let a = e.reduce((e, t) => e + (t.base ?? 0), 0), s = e.reduce((e, t) => e + (t.variation ?? 0), 0), c = e.reduce((e, t) => e + (t.total ?? 0), 0),
|
|
2373
|
-
let n = Math.max(24, (e.total ?? 0) / (c || 1) *
|
|
2414
|
+
let a = e.reduce((e, t) => e + (t.base ?? 0), 0), s = e.reduce((e, t) => e + (t.variation ?? 0), 0), c = e.reduce((e, t) => e + (t.total ?? 0), 0), d = $t - 20 - 26, m = d - 6 * (e.length - 1), _ = 20, y = e.map((e, t) => {
|
|
2415
|
+
let n = Math.max(24, (e.total ?? 0) / (c || 1) * m), r = {
|
|
2374
2416
|
x: 100 - 110 / 2,
|
|
2375
|
-
y:
|
|
2417
|
+
y: _,
|
|
2376
2418
|
h: n,
|
|
2377
|
-
cy:
|
|
2419
|
+
cy: _ + n / 2,
|
|
2378
2420
|
c: e,
|
|
2379
|
-
color:
|
|
2421
|
+
color: p[t % p.length]
|
|
2380
2422
|
};
|
|
2381
|
-
return
|
|
2382
|
-
}),
|
|
2423
|
+
return _ += n + 6, r;
|
|
2424
|
+
}), b = m - 14, C = Math.max(28, a / (c || 1) * b), w = Math.max(18, s / (c || 1) * b), T = 20 + (d - (C + w + 14)) / 2, E = {
|
|
2383
2425
|
x: 420 - 110 / 2,
|
|
2384
2426
|
y: T,
|
|
2385
2427
|
h: C,
|
|
2386
2428
|
cy: T + C / 2
|
|
2387
|
-
},
|
|
2429
|
+
}, D = {
|
|
2388
2430
|
x: 420 - 110 / 2,
|
|
2389
2431
|
y: T + C + 14,
|
|
2390
2432
|
h: w,
|
|
2391
2433
|
cy: T + C + 14 + w / 2
|
|
2392
|
-
},
|
|
2434
|
+
}, O = {
|
|
2393
2435
|
x: 720 - 110 / 2,
|
|
2394
2436
|
y: 20,
|
|
2395
|
-
h:
|
|
2396
|
-
cy: 20 +
|
|
2397
|
-
}, j,
|
|
2437
|
+
h: d,
|
|
2438
|
+
cy: 20 + d / 2
|
|
2439
|
+
}, j, M = () => {
|
|
2398
2440
|
o.current++;
|
|
2399
2441
|
let t = o.current;
|
|
2400
|
-
n.clearRect(0, 0,
|
|
2401
|
-
let r =
|
|
2402
|
-
if (
|
|
2403
|
-
let c =
|
|
2442
|
+
n.clearRect(0, 0, Qt, $t), n.letterSpacing = h.letterSpacing;
|
|
2443
|
+
let r = A(Math.min(t / 80, 1));
|
|
2444
|
+
if (I(i.current, l.current), f.current = [], e.forEach((t, o) => {
|
|
2445
|
+
let c = y[o], l = F(r, o, e.length, A), u = i.current.get(t.id) ?? 0;
|
|
2404
2446
|
if (l < .01) return;
|
|
2405
|
-
let d = (t.base ?? 0) / (t.total || 1), f = (t.variation ?? 0) / (t.total || 1), p = c.h * d, m = c.h * f, h = c.y + p / 2, g = c.y + p + m / 2, _ = Math.max(2, (t.base ?? 0) / a * C), v = Math.max(2, (t.variation ?? 0) / s * w),
|
|
2406
|
-
|
|
2447
|
+
let d = (t.base ?? 0) / (t.total || 1), f = (t.variation ?? 0) / (t.total || 1), p = c.h * d, m = c.h * f, h = c.y + p / 2, g = c.y + p + m / 2, _ = Math.max(2, (t.base ?? 0) / a * C), v = Math.max(2, (t.variation ?? 0) / s * w), b = E.y + e.slice(0, o).reduce((e, t) => e + (t.base ?? 0) / a * C, 0) + _ / 2, x = D.y + e.slice(0, o).reduce((e, t) => e + (t.variation ?? 0) / s * w, 0) + v / 2, S = u * .2 + .18;
|
|
2448
|
+
tn(n, c.x + 110, h, 420 - 110 / 2, b, _ * l, c.color, S), tn(n, c.x + 110, g, 420 - 110 / 2, x, v * l, c.color, S * .75);
|
|
2407
2449
|
}), r > .3) {
|
|
2408
|
-
let e = Math.min(1, (r - .3) / .7), t =
|
|
2409
|
-
|
|
2450
|
+
let e = Math.min(1, (r - .3) / .7), t = O.y + a / c * d / 2, i = O.y + d - s / c * d / 2;
|
|
2451
|
+
tn(n, 475, E.cy, 720 - 110 / 2, t, C * e, u.blue, .25 * e), tn(n, 475, D.cy, 720 - 110 / 2, i, w * e, u.amber, .22 * e);
|
|
2410
2452
|
}
|
|
2411
2453
|
if ([
|
|
2412
2454
|
"Contractors",
|
|
@@ -2418,146 +2460,236 @@ function Yt({ items: e = [], "data-testid": t }) {
|
|
|
2418
2460
|
420,
|
|
2419
2461
|
720
|
|
2420
2462
|
][t];
|
|
2421
|
-
n.font =
|
|
2463
|
+
n.font = h.font, n.fillStyle = h.color, n.textAlign = "center", n.fillText(e, r, $t - 8);
|
|
2422
2464
|
}), e.forEach((t, a) => {
|
|
2423
|
-
let o =
|
|
2424
|
-
|
|
2465
|
+
let o = y[a], s = F(r, a, e.length, A), c = i.current.get(t.id) ?? 0;
|
|
2466
|
+
k(f.current, t.id, o.x, o.y, 110, o.h, {
|
|
2425
2467
|
label: t.name,
|
|
2426
2468
|
value: t.totalLabel ?? String(t.total ?? 0),
|
|
2427
2469
|
sublabel: `${t.baseLabel ?? String(t.base ?? 0)} + ${t.variationLabel ?? String(t.variation ?? 0)}`,
|
|
2428
2470
|
color: o.color
|
|
2429
|
-
}), c > 0 &&
|
|
2471
|
+
}), c > 0 && S(n, o.x + 110 / 2, o.cy, 110 * .6, o.color, .12 * c), n.fillStyle = v(o.color, (.3 + c * .15) * s), n.strokeStyle = v(o.color, (.55 + c * .25) * s), n.lineWidth = 1, n.beginPath(), n.roundRect(o.x, o.y, 110 * s, o.h, 4), n.fill(), n.stroke(), s > .6 && o.h >= 24 && (n.globalAlpha = Math.min(1, (s - .6) / .4), n.font = h.font, n.fillStyle = c > 0 ? o.color : v(u.t2, .9), n.textAlign = "center", n.textBaseline = "middle", n.fillText(t.abbreviation ?? t.name?.slice(0, 6) ?? "", o.x + 110 / 2, o.h >= 36 ? o.cy - 5 : o.cy), o.h >= 36 && (n.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = v(u.t3, .8), n.fillText(t.totalLabel ?? String(t.total ?? 0), o.x + 110 / 2, o.cy + 7)), n.globalAlpha = 1, n.textBaseline = "alphabetic");
|
|
2430
2472
|
}), r > .2) {
|
|
2431
2473
|
let e = Math.min(1, (r - .2) / .4);
|
|
2432
|
-
|
|
2474
|
+
S(n, 420, E.cy, 30, u.blue, .1 * e), n.fillStyle = v(u.blue, .3 * e), n.strokeStyle = v(u.blue, .5 * e), n.lineWidth = 1, n.beginPath(), n.roundRect(E.x, E.y, 110, E.h * e, 4), n.fill(), n.stroke(), n.globalAlpha = e, n.textBaseline = "middle", n.font = h.font, n.fillStyle = u.blue, n.textAlign = "center", n.fillText("Base Value", 420, E.cy - 6), n.font = g.font, n.fillStyle = g.color, n.fillText(U(a), 420, E.cy + 8), n.globalAlpha = 1, n.textBaseline = "alphabetic", S(n, 420, D.cy, 24, u.amber, .1 * e), n.fillStyle = v(u.amber, .22 * e), n.strokeStyle = v(u.amber, .4 * e), n.beginPath(), n.roundRect(D.x, D.y, 110, D.h * e, 4), n.fill(), n.stroke(), n.globalAlpha = e, n.textBaseline = "middle", n.font = h.font, n.fillStyle = u.amber, n.textAlign = "center", n.fillText("Variations", 420, D.cy - 4), n.font = g.font, n.fillStyle = g.color, n.fillText(U(s), 420, D.cy + 8), n.globalAlpha = 1, n.textBaseline = "alphabetic";
|
|
2433
2475
|
}
|
|
2434
2476
|
if (r > .5) {
|
|
2435
2477
|
let e = Math.min(1, (r - .5) / .5);
|
|
2436
|
-
|
|
2478
|
+
S(n, 720, O.cy, 44, u.blue, .2 * e), n.fillStyle = v(u.blue, .25 * e), n.strokeStyle = v(u.blue, .6 * e), n.lineWidth = 1.5, n.beginPath(), n.roundRect(O.x, O.y, 110, O.h * e, 6), n.fill(), n.stroke(), n.globalAlpha = e, n.textBaseline = "middle", n.font = h.font, n.fillStyle = u.t2, n.textAlign = "center", n.fillText("Total Commitment", 720, O.cy - 12), n.font = g.font, n.fillStyle = u.blue, n.fillText(U(c), 720, O.cy + 6), n.globalAlpha = 1, n.textBaseline = "alphabetic";
|
|
2437
2479
|
}
|
|
2438
|
-
j = requestAnimationFrame(
|
|
2480
|
+
j = requestAnimationFrame(M);
|
|
2439
2481
|
};
|
|
2440
|
-
return
|
|
2482
|
+
return M(), () => cancelAnimationFrame(j);
|
|
2441
2483
|
}, [e]), /* @__PURE__ */ c("div", {
|
|
2442
2484
|
"data-testid": t,
|
|
2443
2485
|
style: {
|
|
2444
2486
|
position: "relative",
|
|
2445
|
-
width:
|
|
2446
|
-
height:
|
|
2487
|
+
width: Qt,
|
|
2488
|
+
height: $t
|
|
2447
2489
|
},
|
|
2448
2490
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2449
2491
|
ref: r,
|
|
2450
2492
|
role: "img",
|
|
2451
2493
|
"aria-label": "Weekly report flow — base value and variations per contractor flowing to total commitment",
|
|
2452
2494
|
style: {
|
|
2453
|
-
width:
|
|
2454
|
-
height:
|
|
2495
|
+
width: Qt,
|
|
2496
|
+
height: $t,
|
|
2455
2497
|
display: "block"
|
|
2456
2498
|
}
|
|
2457
|
-
}), /* @__PURE__ */ s(
|
|
2458
|
-
...
|
|
2459
|
-
parentW:
|
|
2460
|
-
parentH:
|
|
2499
|
+
}), /* @__PURE__ */ s(E, {
|
|
2500
|
+
...d,
|
|
2501
|
+
parentW: Qt,
|
|
2502
|
+
parentH: $t
|
|
2461
2503
|
})]
|
|
2462
2504
|
});
|
|
2463
2505
|
}
|
|
2464
|
-
function
|
|
2506
|
+
function tn(e, t, n, r, i, a, o, s) {
|
|
2465
2507
|
let c = (t + r) / 2;
|
|
2466
|
-
e.beginPath(), e.moveTo(t, n - a / 2), e.bezierCurveTo(c, n - a / 2, c, i - a / 2, r, i - a / 2), e.lineTo(r, i + a / 2), e.bezierCurveTo(c, i + a / 2, c, n + a / 2, t, n + a / 2), e.closePath(), e.fillStyle =
|
|
2508
|
+
e.beginPath(), e.moveTo(t, n - a / 2), e.bezierCurveTo(c, n - a / 2, c, i - a / 2, r, i - a / 2), e.lineTo(r, i + a / 2), e.bezierCurveTo(c, i + a / 2, c, n + a / 2, t, n + a / 2), e.closePath(), e.fillStyle = v(o, s), e.fill();
|
|
2509
|
+
}
|
|
2510
|
+
//#endregion
|
|
2511
|
+
//#region src/components/horizontalBarChart/HorizontalBarChart.tsx
|
|
2512
|
+
var nn = 680, rn = 160, an = {
|
|
2513
|
+
left: 8,
|
|
2514
|
+
right: 90,
|
|
2515
|
+
top: 16,
|
|
2516
|
+
bottom: 16
|
|
2517
|
+
}, on = 150, sn = 4, cn = 48, ln = 8;
|
|
2518
|
+
function un(e, t, n) {
|
|
2519
|
+
if (e.measureText(t).width <= n) return t;
|
|
2520
|
+
let r = t;
|
|
2521
|
+
for (; r.length > 0 && e.measureText(r + "…").width > n;) r = r.slice(0, -1);
|
|
2522
|
+
return r + "…";
|
|
2523
|
+
}
|
|
2524
|
+
function dn(e, t) {
|
|
2525
|
+
let n = Math.abs(e), r = e < 0 ? "-" : "";
|
|
2526
|
+
return n >= 1e6 ? `${r}${t}${(n / 1e6).toFixed(1)}M` : n >= 1e3 ? `${r}${t}${(n / 1e3).toFixed(1)}K` : `${r}${t}${n.toFixed(0)}`;
|
|
2527
|
+
}
|
|
2528
|
+
function fn({ rows: e, valuePrefix: t = "$", "data-testid": n }) {
|
|
2529
|
+
let r = a(null), i = a(/* @__PURE__ */ new Map()), [l, d] = o(!1), f = e.filter((e) => e != null && typeof e.value == "number"), p = l ? f : f.slice(0, ln), m = p.length, _ = Math.max(...f.map((e) => Math.abs(e.value)), 1), y = nn - an.left - on - an.right, b = m * cn, x = an.top + an.bottom + b, { hoveredRef: C, tooltip: w, hitZonesRef: T } = D(r, {
|
|
2530
|
+
width: nn,
|
|
2531
|
+
height: x
|
|
2532
|
+
});
|
|
2533
|
+
return be(r, nn, x, (e, n) => {
|
|
2534
|
+
I(i.current, C.current), T.current = [], p.forEach((r, a) => {
|
|
2535
|
+
let o = F(n, a, m, j), s = an.top + a * cn, c = s + (cn - sn) / 2, l = s + cn / 2, d = an.left + on, f = i.current.get(r.id) ?? 0, p = Math.abs(r.value) / _ * y * o, b = r.valueLabel ?? dn(r.value, t);
|
|
2536
|
+
if (e.save(), e.font = h.font, e.fillStyle = f > 0 ? u.cyan : h.color, e.textAlign = "right", e.textBaseline = "middle", e.fillText(un(e, r.name, on - 16), d - 8, l), k(T.current, r.id, 0, s, d, cn, {
|
|
2537
|
+
label: r.name,
|
|
2538
|
+
value: b,
|
|
2539
|
+
color: u.cyan
|
|
2540
|
+
}), e.fillStyle = v(u.cyan, .1), e.beginPath(), e.roundRect(d, c, y, sn, sn / 2), e.fill(), p > 0) {
|
|
2541
|
+
f > 0 && S(e, d + p, c + sn / 2, p * .25, u.cyan, .14 * f);
|
|
2542
|
+
let t = e.createLinearGradient(d, c, d + p, c);
|
|
2543
|
+
t.addColorStop(0, v(u.cyan, .2 + f * .05)), t.addColorStop(.55, v(u.cyan, .55 + f * .15)), t.addColorStop(1, v(u.cyan, .72 + f * .18)), e.fillStyle = t, e.beginPath(), e.roundRect(d, c, p, sn, sn / 2), e.fill();
|
|
2544
|
+
}
|
|
2545
|
+
f > 0 && p > 0 && (e.strokeStyle = v(u.cyan, .6 * f), e.lineWidth = 1, e.beginPath(), e.roundRect(d, c, p, sn, sn / 2), e.stroke()), o > .35 && (e.globalAlpha = Math.min(1, (o - .35) / .4), e.font = g.font, e.fillStyle = f > 0 ? u.cyan : g.color, e.textAlign = "right", e.textBaseline = "middle", e.fillText(b, nn - 8, l)), e.restore(), k(T.current, r.id, d, s, Math.max(p, 1), cn, {
|
|
2546
|
+
label: r.name,
|
|
2547
|
+
value: b,
|
|
2548
|
+
color: u.cyan
|
|
2549
|
+
});
|
|
2550
|
+
});
|
|
2551
|
+
}, !0, { easing: j }), f.length === 0 ? /* @__PURE__ */ s(R, {
|
|
2552
|
+
width: nn,
|
|
2553
|
+
height: rn,
|
|
2554
|
+
message: "No data available",
|
|
2555
|
+
"data-testid": n
|
|
2556
|
+
}) : /* @__PURE__ */ c("div", {
|
|
2557
|
+
"data-testid": n,
|
|
2558
|
+
style: { width: nn },
|
|
2559
|
+
children: [/* @__PURE__ */ c("div", {
|
|
2560
|
+
style: { position: "relative" },
|
|
2561
|
+
children: [/* @__PURE__ */ s("canvas", {
|
|
2562
|
+
ref: r,
|
|
2563
|
+
role: "img",
|
|
2564
|
+
"aria-label": "Horizontal bar chart",
|
|
2565
|
+
style: {
|
|
2566
|
+
width: nn,
|
|
2567
|
+
height: x,
|
|
2568
|
+
display: "block",
|
|
2569
|
+
borderRadius: 8
|
|
2570
|
+
}
|
|
2571
|
+
}), /* @__PURE__ */ s(E, {
|
|
2572
|
+
...w,
|
|
2573
|
+
parentW: nn,
|
|
2574
|
+
parentH: x
|
|
2575
|
+
})]
|
|
2576
|
+
}), f.length > ln && /* @__PURE__ */ s("div", {
|
|
2577
|
+
style: { marginTop: 8 },
|
|
2578
|
+
children: /* @__PURE__ */ s(oe, {
|
|
2579
|
+
expanded: l,
|
|
2580
|
+
onToggle: () => d((e) => !e),
|
|
2581
|
+
"data-testid": n ? `${n}-toggle` : void 0
|
|
2582
|
+
})
|
|
2583
|
+
})]
|
|
2584
|
+
});
|
|
2467
2585
|
}
|
|
2468
2586
|
//#endregion
|
|
2469
2587
|
//#region src/components/visualizationRenderer/VisualizationRenderer.tsx
|
|
2470
|
-
function
|
|
2471
|
-
return e.type === "line" ? /* @__PURE__ */ s(
|
|
2588
|
+
function pn({ config: e, className: t, colorOffset: n = 0 }) {
|
|
2589
|
+
return e.type === "line" ? /* @__PURE__ */ s(We, {
|
|
2472
2590
|
rows: e.rows,
|
|
2473
2591
|
className: t
|
|
2474
|
-
}) : e.type === "area" ? /* @__PURE__ */ s(
|
|
2592
|
+
}) : e.type === "area" ? /* @__PURE__ */ s(ne, {
|
|
2475
2593
|
rows: e.rows,
|
|
2476
2594
|
className: t
|
|
2477
|
-
}) : e.type === "bar" ? /* @__PURE__ */ s(
|
|
2595
|
+
}) : e.type === "bar" ? /* @__PURE__ */ s(ae, {
|
|
2478
2596
|
rows: e.rows,
|
|
2479
2597
|
className: t
|
|
2480
|
-
}) : e.type === "pie" ? /* @__PURE__ */ s(
|
|
2598
|
+
}) : e.type === "pie" ? /* @__PURE__ */ s(nt, {
|
|
2481
2599
|
rows: e.rows,
|
|
2482
2600
|
variant: "pie",
|
|
2483
2601
|
className: t
|
|
2484
|
-
}) : e.type === "donut" ? /* @__PURE__ */ s(
|
|
2602
|
+
}) : e.type === "donut" ? /* @__PURE__ */ s(nt, {
|
|
2485
2603
|
rows: e.rows,
|
|
2486
2604
|
variant: "donut",
|
|
2487
2605
|
className: t
|
|
2488
|
-
}) : e.type === "sankey" ? /* @__PURE__ */ s(
|
|
2606
|
+
}) : e.type === "sankey" ? /* @__PURE__ */ s(pt, {
|
|
2489
2607
|
rows: e.rows,
|
|
2490
2608
|
className: t
|
|
2491
|
-
}) : e.type === "flow" ? /* @__PURE__ */ s(
|
|
2609
|
+
}) : e.type === "flow" ? /* @__PURE__ */ s(ft, {
|
|
2492
2610
|
selectedEntity: e.selectedEntity,
|
|
2493
2611
|
className: t
|
|
2494
|
-
}) : e.type === "trend" ? /* @__PURE__ */ s(
|
|
2612
|
+
}) : e.type === "trend" ? /* @__PURE__ */ s(Ht, {
|
|
2495
2613
|
points: e.points,
|
|
2496
2614
|
className: t
|
|
2497
|
-
}) : e.type === "mini-bars" ? /* @__PURE__ */ s(
|
|
2615
|
+
}) : e.type === "mini-bars" ? /* @__PURE__ */ s(qe, {
|
|
2498
2616
|
rows: e.rows,
|
|
2499
2617
|
className: t
|
|
2500
|
-
}) : e.type === "stacked-horizontal-bar-chart" ? /* @__PURE__ */ s(
|
|
2618
|
+
}) : e.type === "stacked-horizontal-bar-chart" ? /* @__PURE__ */ s(Fe, { data: e.data ?? { items: e.items ?? [] } }) : e.type === "multi-metric-constellation-chart" ? /* @__PURE__ */ s(De, { items: e.items }) : e.type === "progress-race-chart" ? /* @__PURE__ */ s(pe, {
|
|
2619
|
+
items: e.items,
|
|
2620
|
+
colorOffset: n
|
|
2621
|
+
}) : e.type === "hub-and-spoke-radial-chart" ? /* @__PURE__ */ s(Bt, {
|
|
2501
2622
|
segments: e.segments,
|
|
2502
2623
|
title: e.title,
|
|
2503
2624
|
unitLabel: e.unitLabel
|
|
2504
|
-
}) : e.type === "dot-matrix-chart" ? /* @__PURE__ */ s(
|
|
2625
|
+
}) : e.type === "dot-matrix-chart" ? /* @__PURE__ */ s(Ue, { items: e.items }) : e.type === "ranked-card-leaderboard" ? /* @__PURE__ */ s(He, { items: e.items }) : e.type === "proportional-band-chart" ? /* @__PURE__ */ s(Lt, {
|
|
2626
|
+
severities: e.severities,
|
|
2627
|
+
colorOffset: n
|
|
2628
|
+
}) : e.type === "radial-fan-tree-chart" ? /* @__PURE__ */ s(Qe, {
|
|
2505
2629
|
total: e.total,
|
|
2506
2630
|
totalLabel: e.totalLabel,
|
|
2507
|
-
items: e.items
|
|
2508
|
-
|
|
2631
|
+
items: e.items,
|
|
2632
|
+
colorOffset: n
|
|
2633
|
+
}) : e.type === "semi-circular-gauge-chart" ? /* @__PURE__ */ s(ye, {
|
|
2509
2634
|
confirmed: e.confirmed,
|
|
2510
2635
|
total: e.total,
|
|
2511
|
-
label: e.label
|
|
2512
|
-
|
|
2636
|
+
label: e.label,
|
|
2637
|
+
colorOffset: n
|
|
2638
|
+
}) : e.type === "segmented-split-bar-chart" ? /* @__PURE__ */ s(Zt, {
|
|
2513
2639
|
items: e.items,
|
|
2514
2640
|
labelA: e.labelA,
|
|
2515
2641
|
labelB: e.labelB,
|
|
2516
2642
|
unit: e.unit
|
|
2517
|
-
}) : e.type === "balance-scale-chart" ? /* @__PURE__ */ s(
|
|
2643
|
+
}) : e.type === "balance-scale-chart" ? /* @__PURE__ */ s(gt, {
|
|
2518
2644
|
left: e.left,
|
|
2519
2645
|
right: e.right,
|
|
2520
2646
|
leftTitle: e.leftTitle,
|
|
2521
2647
|
rightTitle: e.rightTitle,
|
|
2522
2648
|
unit: e.unit
|
|
2523
|
-
}) : e.type === "area-line-chart" ? /* @__PURE__ */ s(
|
|
2649
|
+
}) : e.type === "area-line-chart" ? /* @__PURE__ */ s(yt, { points: e.points }) : e.type === "trend-view" ? /* @__PURE__ */ s(At, {
|
|
2650
|
+
points: e.points,
|
|
2651
|
+
colorOffset: n
|
|
2652
|
+
}) : e.type === "weekly-flow" ? /* @__PURE__ */ s(en, { items: e.items }) : e.type === "horizontal-bar-chart" ? /* @__PURE__ */ s(fn, {
|
|
2653
|
+
rows: e.rows,
|
|
2654
|
+
valuePrefix: e.valuePrefix
|
|
2655
|
+
}) : /* @__PURE__ */ s("div", {
|
|
2524
2656
|
className: "viz-empty",
|
|
2525
2657
|
children: "Visualization unavailable"
|
|
2526
2658
|
});
|
|
2527
2659
|
}
|
|
2528
2660
|
//#endregion
|
|
2529
2661
|
//#region src/utils/mounts.tsx
|
|
2530
|
-
var
|
|
2531
|
-
function
|
|
2662
|
+
var mn = [];
|
|
2663
|
+
function hn(e) {
|
|
2532
2664
|
try {
|
|
2533
2665
|
return JSON.parse(decodeURIComponent(e));
|
|
2534
2666
|
} catch {
|
|
2535
2667
|
return null;
|
|
2536
2668
|
}
|
|
2537
2669
|
}
|
|
2538
|
-
function
|
|
2539
|
-
for (;
|
|
2540
|
-
let e =
|
|
2670
|
+
function gn() {
|
|
2671
|
+
for (; mn.length;) {
|
|
2672
|
+
let e = mn.pop();
|
|
2541
2673
|
e && e.unmount();
|
|
2542
2674
|
}
|
|
2543
2675
|
}
|
|
2544
|
-
function
|
|
2545
|
-
|
|
2676
|
+
function _n() {
|
|
2677
|
+
gn(), document.querySelectorAll("[data-d3-viz]").forEach((t) => {
|
|
2546
2678
|
let n = t.dataset.d3Viz;
|
|
2547
2679
|
if (!n) return;
|
|
2548
|
-
let r =
|
|
2680
|
+
let r = hn(n);
|
|
2549
2681
|
if (!r) return;
|
|
2550
2682
|
let i = e(t);
|
|
2551
|
-
|
|
2683
|
+
mn.push(i), i.render(/* @__PURE__ */ s(pn, { config: r }));
|
|
2552
2684
|
});
|
|
2553
2685
|
}
|
|
2554
|
-
function
|
|
2686
|
+
function vn(e) {
|
|
2555
2687
|
return encodeURIComponent(JSON.stringify(e));
|
|
2556
2688
|
}
|
|
2557
2689
|
//#endregion
|
|
2558
2690
|
//#region src/components/donutChart/DonutChart.tsx
|
|
2559
|
-
function
|
|
2560
|
-
return /* @__PURE__ */ s(
|
|
2691
|
+
function yn({ rows: e = [], className: t, colors: n }) {
|
|
2692
|
+
return /* @__PURE__ */ s(nt, {
|
|
2561
2693
|
rows: e,
|
|
2562
2694
|
variant: "donut",
|
|
2563
2695
|
className: t,
|
|
@@ -2576,20 +2708,20 @@ var Q = {
|
|
|
2576
2708
|
red: u.red,
|
|
2577
2709
|
amber: u.amber,
|
|
2578
2710
|
green: u.green
|
|
2579
|
-
}, $ = "'Satoshi Variable', 'DM Sans', sans-serif",
|
|
2711
|
+
}, $ = "'Satoshi Variable', 'DM Sans', sans-serif", bn = {
|
|
2580
2712
|
color: "#F7F7F7",
|
|
2581
2713
|
fontFamily: $,
|
|
2582
2714
|
fontSize: 24,
|
|
2583
2715
|
fontWeight: 500,
|
|
2584
2716
|
lineHeight: "32px"
|
|
2585
|
-
},
|
|
2717
|
+
}, xn = {
|
|
2586
2718
|
color: "#B3B5B6",
|
|
2587
2719
|
fontFamily: $,
|
|
2588
2720
|
fontSize: 18,
|
|
2589
2721
|
fontWeight: 400,
|
|
2590
2722
|
lineHeight: "20px"
|
|
2591
2723
|
};
|
|
2592
|
-
function
|
|
2724
|
+
function Sn({ items: e = [] }) {
|
|
2593
2725
|
let t = e.filter((e) => e.value);
|
|
2594
2726
|
return t.length === 0 ? null : /* @__PURE__ */ s("div", {
|
|
2595
2727
|
style: {
|
|
@@ -2622,13 +2754,13 @@ function sn({ items: e = [] }) {
|
|
|
2622
2754
|
},
|
|
2623
2755
|
children: [/* @__PURE__ */ s("div", {
|
|
2624
2756
|
style: {
|
|
2625
|
-
...
|
|
2757
|
+
...bn,
|
|
2626
2758
|
color: "#FFFFFF"
|
|
2627
2759
|
},
|
|
2628
2760
|
children: e.value
|
|
2629
2761
|
}), /* @__PURE__ */ s("div", {
|
|
2630
2762
|
style: {
|
|
2631
|
-
...
|
|
2763
|
+
...xn,
|
|
2632
2764
|
color: "rgba(255,255,255,0.70)"
|
|
2633
2765
|
},
|
|
2634
2766
|
children: e.label
|
|
@@ -2653,7 +2785,7 @@ function sn({ items: e = [] }) {
|
|
|
2653
2785
|
}, t))
|
|
2654
2786
|
});
|
|
2655
2787
|
}
|
|
2656
|
-
function
|
|
2788
|
+
function Cn({ items: e = [] }) {
|
|
2657
2789
|
let t = e.filter((e) => e.name ?? e.value);
|
|
2658
2790
|
return t.length === 0 ? null : /* @__PURE__ */ s("div", {
|
|
2659
2791
|
style: {
|
|
@@ -2686,7 +2818,7 @@ function cn({ items: e = [] }) {
|
|
|
2686
2818
|
}),
|
|
2687
2819
|
/* @__PURE__ */ s("span", {
|
|
2688
2820
|
style: {
|
|
2689
|
-
...
|
|
2821
|
+
...bn,
|
|
2690
2822
|
fontSize: 18,
|
|
2691
2823
|
color: Q.t1,
|
|
2692
2824
|
minWidth: 70,
|
|
@@ -2696,7 +2828,7 @@ function cn({ items: e = [] }) {
|
|
|
2696
2828
|
}),
|
|
2697
2829
|
/* @__PURE__ */ s("span", {
|
|
2698
2830
|
style: {
|
|
2699
|
-
...
|
|
2831
|
+
...xn,
|
|
2700
2832
|
flex: 1
|
|
2701
2833
|
},
|
|
2702
2834
|
children: e.kpiLabel
|
|
@@ -2705,7 +2837,7 @@ function cn({ items: e = [] }) {
|
|
|
2705
2837
|
}, t))
|
|
2706
2838
|
});
|
|
2707
2839
|
}
|
|
2708
|
-
function
|
|
2840
|
+
function wn({ items: e = [] }) {
|
|
2709
2841
|
let t = e.filter((e) => e.value);
|
|
2710
2842
|
return t.length === 0 ? null : /* @__PURE__ */ s("div", {
|
|
2711
2843
|
style: {
|
|
@@ -2738,13 +2870,13 @@ function ln({ items: e = [] }) {
|
|
|
2738
2870
|
},
|
|
2739
2871
|
children: [/* @__PURE__ */ s("div", {
|
|
2740
2872
|
style: {
|
|
2741
|
-
...
|
|
2873
|
+
...bn,
|
|
2742
2874
|
color: "#FFFFFF"
|
|
2743
2875
|
},
|
|
2744
2876
|
children: e.value
|
|
2745
2877
|
}), /* @__PURE__ */ s("div", {
|
|
2746
2878
|
style: {
|
|
2747
|
-
...
|
|
2879
|
+
...xn,
|
|
2748
2880
|
color: "rgba(255,255,255,0.70)"
|
|
2749
2881
|
},
|
|
2750
2882
|
children: e.label
|
|
@@ -2769,12 +2901,12 @@ function ln({ items: e = [] }) {
|
|
|
2769
2901
|
}, t))
|
|
2770
2902
|
});
|
|
2771
2903
|
}
|
|
2772
|
-
var
|
|
2904
|
+
var Tn = {
|
|
2773
2905
|
red: Q.red,
|
|
2774
2906
|
amber: Q.amber,
|
|
2775
2907
|
green: Q.green
|
|
2776
2908
|
};
|
|
2777
|
-
function
|
|
2909
|
+
function En({ items: e = [] }) {
|
|
2778
2910
|
let t = e.filter((e) => e.text);
|
|
2779
2911
|
return t.length === 0 ? null : /* @__PURE__ */ s("div", {
|
|
2780
2912
|
style: {
|
|
@@ -2782,7 +2914,7 @@ function dn({ items: e = [] }) {
|
|
|
2782
2914
|
flexDirection: "column",
|
|
2783
2915
|
gap: 5
|
|
2784
2916
|
},
|
|
2785
|
-
children: t.map((e, t) => (
|
|
2917
|
+
children: t.map((e, t) => (Tn[e.severity], /* @__PURE__ */ c("div", {
|
|
2786
2918
|
style: {
|
|
2787
2919
|
display: "flex",
|
|
2788
2920
|
alignItems: "flex-start",
|
|
@@ -2800,7 +2932,7 @@ function dn({ items: e = [] }) {
|
|
|
2800
2932
|
marginTop: 5
|
|
2801
2933
|
} }), /* @__PURE__ */ s("span", {
|
|
2802
2934
|
style: {
|
|
2803
|
-
...
|
|
2935
|
+
...xn,
|
|
2804
2936
|
color: "#B3B5B6"
|
|
2805
2937
|
},
|
|
2806
2938
|
children: e.text
|
|
@@ -2808,7 +2940,7 @@ function dn({ items: e = [] }) {
|
|
|
2808
2940
|
}, t)))
|
|
2809
2941
|
});
|
|
2810
2942
|
}
|
|
2811
|
-
function
|
|
2943
|
+
function Dn({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
2812
2944
|
let a = r.filter((e) => e.name);
|
|
2813
2945
|
if (a.length === 0) return null;
|
|
2814
2946
|
let o = t - e;
|
|
@@ -2920,9 +3052,9 @@ function fn({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
|
2920
3052
|
}, r);
|
|
2921
3053
|
})
|
|
2922
3054
|
]
|
|
2923
|
-
}), i && i.length > 0 && /* @__PURE__ */ s(
|
|
3055
|
+
}), i && i.length > 0 && /* @__PURE__ */ s(wn, { items: i })] });
|
|
2924
3056
|
}
|
|
2925
|
-
function
|
|
3057
|
+
function On({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i, rightLabel: a, rightValue: o, rightColor: l, chips: d }) {
|
|
2926
3058
|
if (!t && !a) return null;
|
|
2927
3059
|
let f = r ?? u.blue, p = l ?? u.blue;
|
|
2928
3060
|
return /* @__PURE__ */ c("div", { children: [
|
|
@@ -3017,10 +3149,10 @@ function pn({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
3017
3149
|
})
|
|
3018
3150
|
})]
|
|
3019
3151
|
}),
|
|
3020
|
-
d && d.length > 0 && /* @__PURE__ */ s(
|
|
3152
|
+
d && d.length > 0 && /* @__PURE__ */ s(wn, { items: d })
|
|
3021
3153
|
] });
|
|
3022
3154
|
}
|
|
3023
|
-
function
|
|
3155
|
+
function kn({ pct: e, label: t, color: n, chips: r }) {
|
|
3024
3156
|
if (e == null && !t) return null;
|
|
3025
3157
|
let i = n ?? u.blue, a = 2 * Math.PI * 30, o = a * (1 - e / 100);
|
|
3026
3158
|
return /* @__PURE__ */ c("div", {
|
|
@@ -3080,7 +3212,7 @@ function mn({ pct: e, label: t, color: n, chips: r }) {
|
|
|
3080
3212
|
style: { flex: 1 },
|
|
3081
3213
|
children: [/* @__PURE__ */ s("div", {
|
|
3082
3214
|
style: {
|
|
3083
|
-
...
|
|
3215
|
+
...xn,
|
|
3084
3216
|
padding: "10px 0px"
|
|
3085
3217
|
},
|
|
3086
3218
|
children: t
|
|
@@ -3103,14 +3235,14 @@ function mn({ pct: e, label: t, color: n, chips: r }) {
|
|
|
3103
3235
|
children: [
|
|
3104
3236
|
/* @__PURE__ */ s("span", {
|
|
3105
3237
|
style: {
|
|
3106
|
-
...
|
|
3238
|
+
...bn,
|
|
3107
3239
|
color: Q.t2
|
|
3108
3240
|
},
|
|
3109
3241
|
children: e.value
|
|
3110
3242
|
}),
|
|
3111
3243
|
/* @__PURE__ */ s("span", {
|
|
3112
3244
|
style: {
|
|
3113
|
-
...
|
|
3245
|
+
...bn,
|
|
3114
3246
|
color: Q.t2,
|
|
3115
3247
|
fontWeight: 400,
|
|
3116
3248
|
userSelect: "none"
|
|
@@ -3118,7 +3250,7 @@ function mn({ pct: e, label: t, color: n, chips: r }) {
|
|
|
3118
3250
|
children: "|"
|
|
3119
3251
|
}),
|
|
3120
3252
|
/* @__PURE__ */ s("span", {
|
|
3121
|
-
style: { ...
|
|
3253
|
+
style: { ...xn },
|
|
3122
3254
|
children: e.label
|
|
3123
3255
|
})
|
|
3124
3256
|
]
|
|
@@ -3127,7 +3259,7 @@ function mn({ pct: e, label: t, color: n, chips: r }) {
|
|
|
3127
3259
|
})]
|
|
3128
3260
|
});
|
|
3129
3261
|
}
|
|
3130
|
-
function
|
|
3262
|
+
function An({ items: e = [] }) {
|
|
3131
3263
|
let t = e.filter((e) => e.name ?? e.value);
|
|
3132
3264
|
return t.length === 0 ? null : /* @__PURE__ */ s("div", {
|
|
3133
3265
|
style: {
|
|
@@ -3165,14 +3297,14 @@ function hn({ items: e = [] }) {
|
|
|
3165
3297
|
flex: 1,
|
|
3166
3298
|
height: 4,
|
|
3167
3299
|
background: "rgba(255,255,255,0.07)",
|
|
3168
|
-
borderRadius:
|
|
3300
|
+
borderRadius: 0,
|
|
3169
3301
|
overflow: "hidden"
|
|
3170
3302
|
},
|
|
3171
3303
|
children: /* @__PURE__ */ s("div", { style: {
|
|
3172
3304
|
height: "100%",
|
|
3173
3305
|
width: `${e.pct}%`,
|
|
3174
|
-
background: e.color ??
|
|
3175
|
-
borderRadius:
|
|
3306
|
+
background: e.color ?? u.purple,
|
|
3307
|
+
borderRadius: 0,
|
|
3176
3308
|
opacity: .75
|
|
3177
3309
|
} })
|
|
3178
3310
|
}),
|
|
@@ -3183,45 +3315,25 @@ function hn({ items: e = [] }) {
|
|
|
3183
3315
|
color: Q.t2,
|
|
3184
3316
|
fontFamily: $,
|
|
3185
3317
|
flexShrink: 0,
|
|
3186
|
-
minWidth:
|
|
3318
|
+
minWidth: 320,
|
|
3187
3319
|
textAlign: "right"
|
|
3188
3320
|
},
|
|
3189
|
-
children:
|
|
3190
|
-
|
|
3191
|
-
|
|
3192
|
-
|
|
3193
|
-
|
|
3194
|
-
fontWeight: 500,
|
|
3195
|
-
color: Q.t1,
|
|
3196
|
-
background: "transparent",
|
|
3197
|
-
padding: "2px 7px",
|
|
3198
|
-
borderRadius: 4,
|
|
3199
|
-
fontFamily: $,
|
|
3200
|
-
flexShrink: 0,
|
|
3201
|
-
minWidth: 72,
|
|
3202
|
-
textAlign: "center"
|
|
3203
|
-
},
|
|
3204
|
-
children: e.badge
|
|
3205
|
-
}),
|
|
3206
|
-
e.sublabel && /* @__PURE__ */ s("span", {
|
|
3207
|
-
style: {
|
|
3208
|
-
...on,
|
|
3209
|
-
flexShrink: 0,
|
|
3210
|
-
minWidth: 80,
|
|
3211
|
-
textAlign: "right"
|
|
3212
|
-
},
|
|
3213
|
-
children: e.sublabel
|
|
3321
|
+
children: [
|
|
3322
|
+
e.value,
|
|
3323
|
+
e.badge,
|
|
3324
|
+
e.sublabel
|
|
3325
|
+
].filter(Boolean).join(" ")
|
|
3214
3326
|
})
|
|
3215
3327
|
]
|
|
3216
3328
|
}, t))
|
|
3217
3329
|
});
|
|
3218
3330
|
}
|
|
3219
|
-
var
|
|
3331
|
+
var jn = {
|
|
3220
3332
|
red: Q.red,
|
|
3221
3333
|
amber: Q.amber,
|
|
3222
3334
|
green: Q.green
|
|
3223
3335
|
};
|
|
3224
|
-
function
|
|
3336
|
+
function Mn({ items: e = [] }) {
|
|
3225
3337
|
let t = e.filter((e) => e.text);
|
|
3226
3338
|
return t.length === 0 ? null : /* @__PURE__ */ s("div", {
|
|
3227
3339
|
style: {
|
|
@@ -3230,7 +3342,7 @@ function _n({ items: e = [] }) {
|
|
|
3230
3342
|
gap: 5
|
|
3231
3343
|
},
|
|
3232
3344
|
children: t.map((e, t) => {
|
|
3233
|
-
let n =
|
|
3345
|
+
let n = jn[e.severity];
|
|
3234
3346
|
return /* @__PURE__ */ c("div", {
|
|
3235
3347
|
style: {
|
|
3236
3348
|
display: "flex",
|
|
@@ -3256,13 +3368,13 @@ function _n({ items: e = [] }) {
|
|
|
3256
3368
|
/* @__PURE__ */ s("span", {
|
|
3257
3369
|
style: {
|
|
3258
3370
|
flex: 1,
|
|
3259
|
-
...
|
|
3371
|
+
...xn
|
|
3260
3372
|
},
|
|
3261
3373
|
children: e.text
|
|
3262
3374
|
}),
|
|
3263
3375
|
/* @__PURE__ */ s("span", {
|
|
3264
3376
|
style: {
|
|
3265
|
-
...
|
|
3377
|
+
...xn,
|
|
3266
3378
|
flexShrink: 0,
|
|
3267
3379
|
marginTop: 1
|
|
3268
3380
|
},
|
|
@@ -3273,7 +3385,7 @@ function _n({ items: e = [] }) {
|
|
|
3273
3385
|
})
|
|
3274
3386
|
});
|
|
3275
3387
|
}
|
|
3276
|
-
function
|
|
3388
|
+
function Nn({ columns: e = [], rows: t = [] }) {
|
|
3277
3389
|
return t.length === 0 ? null : /* @__PURE__ */ c("div", {
|
|
3278
3390
|
style: {
|
|
3279
3391
|
display: "flex",
|
|
@@ -3336,21 +3448,21 @@ function vn({ columns: e = [], rows: t = [] }) {
|
|
|
3336
3448
|
}, t))]
|
|
3337
3449
|
});
|
|
3338
3450
|
}
|
|
3339
|
-
function
|
|
3451
|
+
function Pn({ block: e }) {
|
|
3340
3452
|
if (!e) return null;
|
|
3341
3453
|
switch (e.type) {
|
|
3342
|
-
case "stats": return /* @__PURE__ */ s(
|
|
3343
|
-
case "ranked": return /* @__PURE__ */ s(
|
|
3344
|
-
case "chips": return /* @__PURE__ */ s(
|
|
3345
|
-
case "badges": return /* @__PURE__ */ s(
|
|
3346
|
-
case "dot-strip": return /* @__PURE__ */ s(
|
|
3454
|
+
case "stats": return /* @__PURE__ */ s(Sn, { items: e.items });
|
|
3455
|
+
case "ranked": return /* @__PURE__ */ s(Cn, { items: e.items });
|
|
3456
|
+
case "chips": return /* @__PURE__ */ s(wn, { items: e.items });
|
|
3457
|
+
case "badges": return /* @__PURE__ */ s(En, { items: e.items });
|
|
3458
|
+
case "dot-strip": return /* @__PURE__ */ s(Dn, {
|
|
3347
3459
|
min: e.min,
|
|
3348
3460
|
max: e.max,
|
|
3349
3461
|
unit: e.unit,
|
|
3350
3462
|
dots: e.dots,
|
|
3351
3463
|
chips: e.chips
|
|
3352
3464
|
});
|
|
3353
|
-
case "proportion": return /* @__PURE__ */ s(
|
|
3465
|
+
case "proportion": return /* @__PURE__ */ s(On, {
|
|
3354
3466
|
leftPct: e.leftPct,
|
|
3355
3467
|
leftLabel: e.leftLabel,
|
|
3356
3468
|
leftValue: e.leftValue,
|
|
@@ -3361,15 +3473,15 @@ function yn({ block: e }) {
|
|
|
3361
3473
|
rightColor: e.rightColor,
|
|
3362
3474
|
chips: e.chips
|
|
3363
3475
|
});
|
|
3364
|
-
case "ring": return /* @__PURE__ */ s(
|
|
3476
|
+
case "ring": return /* @__PURE__ */ s(kn, {
|
|
3365
3477
|
pct: e.pct,
|
|
3366
3478
|
label: e.label,
|
|
3367
3479
|
color: e.color,
|
|
3368
3480
|
chips: e.chips
|
|
3369
3481
|
});
|
|
3370
|
-
case "scorecard-rows": return /* @__PURE__ */ s(
|
|
3371
|
-
case "flags-list": return /* @__PURE__ */ s(
|
|
3372
|
-
case "comparison-rows": return /* @__PURE__ */ s(
|
|
3482
|
+
case "scorecard-rows": return /* @__PURE__ */ s(An, { items: e.items });
|
|
3483
|
+
case "flags-list": return /* @__PURE__ */ s(Mn, { items: e.items });
|
|
3484
|
+
case "comparison-rows": return /* @__PURE__ */ s(Nn, {
|
|
3373
3485
|
columns: e.columns,
|
|
3374
3486
|
rows: e.rows
|
|
3375
3487
|
});
|
|
@@ -3378,14 +3490,14 @@ function yn({ block: e }) {
|
|
|
3378
3490
|
}
|
|
3379
3491
|
//#endregion
|
|
3380
3492
|
//#region src/components/keyHighlights/Takeaway.tsx
|
|
3381
|
-
var
|
|
3493
|
+
var Fn = "'Satoshi Variable', 'DM Sans', sans-serif", In = {
|
|
3382
3494
|
color: "#C2C2C2",
|
|
3383
|
-
fontFamily:
|
|
3495
|
+
fontFamily: Fn,
|
|
3384
3496
|
fontSize: 18,
|
|
3385
3497
|
fontWeight: 400,
|
|
3386
3498
|
lineHeight: 1.65
|
|
3387
3499
|
};
|
|
3388
|
-
function
|
|
3500
|
+
function Ln({ text: e }) {
|
|
3389
3501
|
return /* @__PURE__ */ c("div", {
|
|
3390
3502
|
style: {
|
|
3391
3503
|
padding: "8px 0px",
|
|
@@ -3398,16 +3510,16 @@ function Sn({ text: e }) {
|
|
|
3398
3510
|
fontSize: 18,
|
|
3399
3511
|
fontWeight: 500,
|
|
3400
3512
|
color: u.t1,
|
|
3401
|
-
fontFamily:
|
|
3513
|
+
fontFamily: Fn,
|
|
3402
3514
|
lineHeight: 1.65,
|
|
3403
3515
|
marginRight: 8
|
|
3404
3516
|
},
|
|
3405
3517
|
children: "Takeaway"
|
|
3406
3518
|
}), /* @__PURE__ */ s("span", {
|
|
3407
|
-
style: { ...
|
|
3519
|
+
style: { ...In },
|
|
3408
3520
|
children: e
|
|
3409
3521
|
})]
|
|
3410
3522
|
});
|
|
3411
3523
|
}
|
|
3412
3524
|
//#endregion
|
|
3413
|
-
export {
|
|
3525
|
+
export { ne as AreaChart, ae as BarChart, m as CHART_PALETTE, l as ChartFrame, yn as DonutChart, d as GRAD, Pn as KeyHighlights, We as LineChart, qe as MiniBars, p as PALETTE, nt as PieChart, ft as ProcessSankey, pt as RankingSankey, f as SOLID, it as SankeySvg, te as SeriesChart, Ln as Takeaway, At as Trend, Ht as TrendChart, pn as VisualizationRenderer, gn as cleanupVisualizationMounts, _n as hydrateVisualizationMounts, vn as serializeVisualizationConfig };
|