@divami-artefacts/ai-design-system 1.0.48 → 1.0.49
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 +1143 -1023
- package/dist/pages/interactiveDemo/InteractiveDemoPage.d.ts +1 -0
- 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,138 @@ 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
|
+
];
|
|
1761
|
+
a.beginPath(), a.roundRect(o, s, 99, r, c), a.fillStyle = v(u.t4, .92 * i), a.fill(), a.save(), a.beginPath(), a.roundRect(o, s, 99, r, c), a.clip();
|
|
1762
|
+
let l = v(e, .7 * i), d = v(e, 0), f = a.createLinearGradient(0, s + r, 0, s + r - 30);
|
|
1763
|
+
f.addColorStop(0, l), f.addColorStop(1, d), a.fillStyle = f, a.fillRect(o, s + r - 30, 99, 30);
|
|
1764
|
+
let p = a.createLinearGradient(0, s, 0, s + 30);
|
|
1765
|
+
p.addColorStop(0, l), p.addColorStop(1, d), a.fillStyle = p, a.fillRect(o, s, 99, 30);
|
|
1766
|
+
let m = a.createLinearGradient(o, 0, o + 30, 0);
|
|
1767
|
+
m.addColorStop(0, l), m.addColorStop(1, d), a.fillStyle = m, a.fillRect(o, s, 30, r);
|
|
1768
|
+
let h = a.createLinearGradient(o + 99, 0, o + 99 - 30, 0);
|
|
1769
|
+
h.addColorStop(0, l), h.addColorStop(1, d), a.fillStyle = h, a.fillRect(o + 99 - 30, s, 30, r), a.restore(), a.beginPath(), a.roundRect(o, s, 99, r, c), a.strokeStyle = v(e, 1 * i), a.lineWidth = 1, a.stroke();
|
|
1770
|
+
let g = o + 99 / 2, _ = s - 5;
|
|
1771
|
+
a.strokeStyle = v(u.t2, .5 * i), a.lineWidth = 1, a.beginPath(), a.moveTo(t, n + 4), a.lineTo(g, _), a.stroke(), a.beginPath(), a.moveTo(g, _), a.lineTo(g - 10, s), a.stroke(), a.beginPath(), a.moveTo(g, _), a.lineTo(g + 10, s), a.stroke(), a.beginPath(), a.arc(t, n, 3, 0, Math.PI * 2), a.fillStyle = v(u.t2, .7 * i), a.fill();
|
|
1772
|
+
}, y, b = () => {
|
|
1717
1773
|
d.current++;
|
|
1718
1774
|
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
|
|
1775
|
+
a.clearRect(0, 0, mt, ht), a.letterSpacing = h.letterSpacing;
|
|
1776
|
+
let l = A(Math.min(n / 80, 1)), m = g * N(Math.min(n / 80, 1)) * Math.PI / 180, x = {
|
|
1777
|
+
x: s - Math.cos(m) * 240,
|
|
1778
|
+
y: 100 + Math.sin(-m) * 240
|
|
1725
1779
|
}, C = {
|
|
1726
|
-
x: s + Math.cos(
|
|
1727
|
-
y:
|
|
1780
|
+
x: s + Math.cos(m) * 240,
|
|
1781
|
+
y: 100 + Math.sin(m) * 240
|
|
1728
1782
|
};
|
|
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);
|
|
1783
|
+
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();
|
|
1784
|
+
let w = Math.max(20, c / p * 95 * l), T = Math.max(20, f / p * 95 * l);
|
|
1785
|
+
if (_(u.green, x.x, x.y, w, l), _(u.amber, C.x, C.y, T, l), l > .5) {
|
|
1786
|
+
a.globalAlpha = Math.min(1, (l - .5) / .5), a.textAlign = "center", a.textBaseline = "top";
|
|
1787
|
+
let n = x.y + 30 + w + 14, s = C.y + 30 + T + 14;
|
|
1788
|
+
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";
|
|
1789
|
+
}
|
|
1790
|
+
y = requestAnimationFrame(b);
|
|
1748
1791
|
};
|
|
1749
|
-
return
|
|
1792
|
+
return b(), () => cancelAnimationFrame(y);
|
|
1750
1793
|
}, [e, t]), /* @__PURE__ */ s("div", {
|
|
1751
1794
|
"data-testid": c,
|
|
1752
1795
|
style: {
|
|
1753
1796
|
position: "relative",
|
|
1754
|
-
width:
|
|
1755
|
-
height:
|
|
1797
|
+
width: mt,
|
|
1798
|
+
height: ht
|
|
1756
1799
|
},
|
|
1757
1800
|
children: /* @__PURE__ */ s("canvas", {
|
|
1758
1801
|
ref: l,
|
|
1759
1802
|
role: "img",
|
|
1760
1803
|
"aria-label": "Quotation balance — accepted vs submitted quotation value",
|
|
1761
1804
|
style: {
|
|
1762
|
-
width:
|
|
1763
|
-
height:
|
|
1764
|
-
display: "block"
|
|
1805
|
+
width: mt,
|
|
1806
|
+
height: ht,
|
|
1807
|
+
display: "block",
|
|
1808
|
+
borderRadius: 8
|
|
1765
1809
|
}
|
|
1766
1810
|
})
|
|
1767
1811
|
});
|
|
1768
1812
|
}
|
|
1769
1813
|
//#endregion
|
|
1770
1814
|
//#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
|
-
}),
|
|
1815
|
+
var _t = 780, vt = 360;
|
|
1816
|
+
function yt({ points: e = [], "data-testid": t }) {
|
|
1817
|
+
let r = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), { hoveredRef: d, tooltip: f, hitZonesRef: p } = D(r, {
|
|
1818
|
+
width: _t,
|
|
1819
|
+
height: vt
|
|
1820
|
+
}), m = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
1777
1821
|
return n(() => {
|
|
1778
1822
|
let e = r.current;
|
|
1779
1823
|
if (!e) return;
|
|
1780
|
-
let t =
|
|
1824
|
+
let t = x(e, _t, vt);
|
|
1781
1825
|
l.current = 0;
|
|
1782
|
-
let n =
|
|
1783
|
-
x:
|
|
1784
|
-
y:
|
|
1826
|
+
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) => ({
|
|
1827
|
+
x: 64 + t * c,
|
|
1828
|
+
y: 48 + i - e.count / a * i,
|
|
1785
1829
|
point: e
|
|
1786
|
-
})),
|
|
1830
|
+
})), g, _ = () => {
|
|
1787
1831
|
l.current++;
|
|
1788
1832
|
let e = l.current;
|
|
1789
|
-
t.clearRect(0, 0,
|
|
1790
|
-
let r =
|
|
1791
|
-
|
|
1833
|
+
t.clearRect(0, 0, _t, vt), t.letterSpacing = h.letterSpacing;
|
|
1834
|
+
let r = A(Math.min(e / 72, 1));
|
|
1835
|
+
I(o.current, d.current), p.current = [], [
|
|
1836
|
+
0,
|
|
1792
1837
|
.25,
|
|
1793
1838
|
.5,
|
|
1794
1839
|
.75,
|
|
1795
1840
|
1
|
|
1796
1841
|
].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 <
|
|
1842
|
+
let r = 48 + i - e * i;
|
|
1843
|
+
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);
|
|
1844
|
+
}), 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();
|
|
1845
|
+
let c = r * (s - 1), m = Math.floor(c) + 1;
|
|
1846
|
+
if (m >= 2) {
|
|
1847
|
+
t.beginPath(), t.moveTo(f[0].x, 48 + i), t.lineTo(f[0].x, f[0].y);
|
|
1848
|
+
for (let e = 1; e < m; e++) {
|
|
1849
|
+
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
1850
|
t.lineTo(r, i);
|
|
1806
1851
|
}
|
|
1807
|
-
let e =
|
|
1808
|
-
t.lineTo(e.x,
|
|
1809
|
-
let n = t.createLinearGradient(0,
|
|
1810
|
-
n.addColorStop(0,
|
|
1852
|
+
let e = f[Math.min(m - 1, s - 1)];
|
|
1853
|
+
t.lineTo(e.x, 48 + i), t.closePath();
|
|
1854
|
+
let n = t.createLinearGradient(0, 48, 0, 48 + i);
|
|
1855
|
+
n.addColorStop(0, v(u.teal, .12)), n.addColorStop(1, v(u.teal, .02)), t.fillStyle = n, t.fill();
|
|
1811
1856
|
}
|
|
1812
1857
|
t.beginPath();
|
|
1813
|
-
for (let e = 0; e <
|
|
1814
|
-
let n = c - Math.floor(c), r = e ===
|
|
1858
|
+
for (let e = 0; e < m; e++) {
|
|
1859
|
+
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
1860
|
e === 0 ? t.moveTo(i, a) : t.lineTo(i, a);
|
|
1816
1861
|
}
|
|
1817
|
-
t.strokeStyle =
|
|
1818
|
-
if (n >=
|
|
1862
|
+
t.strokeStyle = v(u.teal, .85), t.lineWidth = 2, t.stroke(), f.forEach((e, n) => {
|
|
1863
|
+
if (n >= m) return;
|
|
1819
1864
|
let r = `pt-${n}`, s = o.current.get(r) ?? 0;
|
|
1820
|
-
|
|
1865
|
+
O(p.current, r, e.x, e.y, 10, {
|
|
1821
1866
|
label: e.point.week,
|
|
1822
1867
|
value: String(e.point.count),
|
|
1823
|
-
color: u.
|
|
1824
|
-
}), s > 0 &&
|
|
1868
|
+
color: u.teal
|
|
1869
|
+
}), s > 0 && T(t, e.x, 48, 48 + i, v(u.teal, .15 * s));
|
|
1825
1870
|
let c = e.point.count === a;
|
|
1826
|
-
(s > 0 || c) &&
|
|
1827
|
-
}),
|
|
1871
|
+
(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);
|
|
1872
|
+
}), g = requestAnimationFrame(_);
|
|
1828
1873
|
};
|
|
1829
|
-
return
|
|
1830
|
-
}, [
|
|
1831
|
-
width:
|
|
1832
|
-
height:
|
|
1874
|
+
return _(), () => cancelAnimationFrame(g);
|
|
1875
|
+
}, [m]), m.length < 2 ? /* @__PURE__ */ s(R, {
|
|
1876
|
+
width: _t,
|
|
1877
|
+
height: vt,
|
|
1833
1878
|
"data-testid": t
|
|
1834
1879
|
}) : /* @__PURE__ */ s("div", {
|
|
1835
1880
|
"data-testid": t,
|
|
@@ -1841,80 +1886,80 @@ function ht({ points: e = [], "data-testid": t }) {
|
|
|
1841
1886
|
children: /* @__PURE__ */ c("div", {
|
|
1842
1887
|
style: {
|
|
1843
1888
|
position: "relative",
|
|
1844
|
-
width:
|
|
1845
|
-
height:
|
|
1889
|
+
width: _t,
|
|
1890
|
+
height: vt
|
|
1846
1891
|
},
|
|
1847
1892
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1848
1893
|
ref: r,
|
|
1849
1894
|
role: "img",
|
|
1850
1895
|
"aria-label": "Trend chart — count over time",
|
|
1851
1896
|
style: {
|
|
1852
|
-
width:
|
|
1853
|
-
height:
|
|
1897
|
+
width: _t,
|
|
1898
|
+
height: vt,
|
|
1854
1899
|
display: "block"
|
|
1855
1900
|
}
|
|
1856
|
-
}), /* @__PURE__ */ s(
|
|
1857
|
-
...
|
|
1858
|
-
parentW:
|
|
1859
|
-
parentH:
|
|
1901
|
+
}), /* @__PURE__ */ s(E, {
|
|
1902
|
+
...f,
|
|
1903
|
+
parentW: _t,
|
|
1904
|
+
parentH: vt
|
|
1860
1905
|
})]
|
|
1861
1906
|
})
|
|
1862
1907
|
});
|
|
1863
1908
|
}
|
|
1864
1909
|
//#endregion
|
|
1865
1910
|
//#region src/components/trend/Trend.tsx
|
|
1866
|
-
var
|
|
1867
|
-
function
|
|
1868
|
-
let
|
|
1869
|
-
if (
|
|
1911
|
+
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;
|
|
1912
|
+
function At({ points: e = [], colorOffset: t = 0, "data-testid": r }) {
|
|
1913
|
+
let o = a(null), l = a(null), d = a(0), f = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), p = i(() => {
|
|
1914
|
+
if (f.length <= 1) return Ct;
|
|
1870
1915
|
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:
|
|
1916
|
+
if (!e) return Ct;
|
|
1917
|
+
e.font = wt;
|
|
1918
|
+
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));
|
|
1919
|
+
return Math.max(Ct, n + Tt);
|
|
1920
|
+
}, [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, {
|
|
1921
|
+
width: y,
|
|
1922
|
+
height: q
|
|
1878
1923
|
});
|
|
1879
1924
|
return n(() => {
|
|
1880
|
-
let e =
|
|
1925
|
+
let e = o.current;
|
|
1881
1926
|
if (!e) return;
|
|
1882
|
-
let
|
|
1883
|
-
|
|
1884
|
-
let i =
|
|
1885
|
-
x:
|
|
1886
|
-
y: 42 +
|
|
1927
|
+
let n = x(e, y, q), r = l.current ? x(l.current, xt, q) : null;
|
|
1928
|
+
d.current = 0;
|
|
1929
|
+
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) => ({
|
|
1930
|
+
x: g + t * E,
|
|
1931
|
+
y: 42 + c - (k ? (e.count - b) / w : e.count / (C || 1)) * c,
|
|
1887
1932
|
point: e
|
|
1888
1933
|
}));
|
|
1889
|
-
if (
|
|
1890
|
-
|
|
1891
|
-
let e =
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1934
|
+
if (r) {
|
|
1935
|
+
r.clearRect(0, 0, xt, q), r.letterSpacing = h.letterSpacing;
|
|
1936
|
+
let e = k ? [
|
|
1937
|
+
b,
|
|
1938
|
+
b + w * .25,
|
|
1939
|
+
b + w * .5,
|
|
1940
|
+
b + w * .75,
|
|
1941
|
+
C
|
|
1897
1942
|
] : [
|
|
1898
1943
|
0,
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1944
|
+
C * .25,
|
|
1945
|
+
C * .5,
|
|
1946
|
+
C * .75,
|
|
1947
|
+
C
|
|
1903
1948
|
];
|
|
1904
|
-
e.forEach((t,
|
|
1905
|
-
let i =
|
|
1906
|
-
|
|
1907
|
-
}),
|
|
1949
|
+
e.forEach((t, n) => {
|
|
1950
|
+
let i = n / (e.length - 1), a = 42 + c - i * c;
|
|
1951
|
+
r.font = h.font, r.fillStyle = h.color, r.textAlign = "right", r.fillText(U(t), xt - 6, a + 3);
|
|
1952
|
+
}), 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
1953
|
}
|
|
1909
|
-
let
|
|
1910
|
-
|
|
1911
|
-
let
|
|
1912
|
-
|
|
1913
|
-
for (let
|
|
1914
|
-
},
|
|
1915
|
-
|
|
1916
|
-
let e = Math.min(
|
|
1917
|
-
|
|
1954
|
+
let N = n.createLinearGradient(0, 42, 0, 42 + c);
|
|
1955
|
+
N.addColorStop(0, v(i, .12)), N.addColorStop(1, v(i, .02));
|
|
1956
|
+
let P = 0, F, I = (e) => {
|
|
1957
|
+
n.font = wt, n.fillStyle = h.color, n.textAlign = "center";
|
|
1958
|
+
for (let t = 0; t < e; t++) t % D === 0 && n.fillText(M[t].point.week, M[t].x, q - 54 + 14);
|
|
1959
|
+
}, L = () => {
|
|
1960
|
+
d.current++;
|
|
1961
|
+
let e = Math.min(d.current / a, 1), t = A(e), r = e >= 1;
|
|
1962
|
+
n.clearRect(0, 0, y, q), n.letterSpacing = h.letterSpacing, (k ? [
|
|
1918
1963
|
0,
|
|
1919
1964
|
.25,
|
|
1920
1965
|
.5,
|
|
@@ -1926,60 +1971,61 @@ function Et({ points: e = [], "data-testid": t }) {
|
|
|
1926
1971
|
.75,
|
|
1927
1972
|
1
|
|
1928
1973
|
]).forEach((e) => {
|
|
1929
|
-
let
|
|
1930
|
-
|
|
1931
|
-
}),
|
|
1932
|
-
let o =
|
|
1933
|
-
if (
|
|
1934
|
-
let e =
|
|
1935
|
-
|
|
1936
|
-
for (let e = 1; e <
|
|
1937
|
-
let
|
|
1938
|
-
|
|
1974
|
+
let t = 42 + c - e * c;
|
|
1975
|
+
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([]);
|
|
1976
|
+
}), 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();
|
|
1977
|
+
let o = t * (T - 1), l = Math.floor(o) + 1;
|
|
1978
|
+
if (l >= 2) {
|
|
1979
|
+
let e = k ? j : 42 + c;
|
|
1980
|
+
n.beginPath(), n.moveTo(M[0].x, e), n.lineTo(M[0].x, M[0].y);
|
|
1981
|
+
for (let e = 1; e < l; e++) {
|
|
1982
|
+
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;
|
|
1983
|
+
n.lineTo(i, a);
|
|
1939
1984
|
}
|
|
1940
|
-
|
|
1985
|
+
n.lineTo(M[l - 1].x, e), n.closePath(), n.fillStyle = N, n.fill();
|
|
1941
1986
|
}
|
|
1942
|
-
|
|
1943
|
-
for (let e = 0; e <
|
|
1944
|
-
let
|
|
1945
|
-
e === 0 ?
|
|
1987
|
+
n.beginPath();
|
|
1988
|
+
for (let e = 0; e < l; e++) {
|
|
1989
|
+
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;
|
|
1990
|
+
e === 0 ? n.moveTo(i, a) : n.lineTo(i, a);
|
|
1946
1991
|
}
|
|
1947
|
-
|
|
1948
|
-
for (let e = 0; e <
|
|
1949
|
-
if (
|
|
1950
|
-
|
|
1951
|
-
for (let e = 0; e <
|
|
1952
|
-
label:
|
|
1953
|
-
value: String(
|
|
1954
|
-
color:
|
|
1992
|
+
n.strokeStyle = v(i, .85), n.lineWidth = 2, n.stroke(), n.fillStyle = v(i, .8), n.beginPath();
|
|
1993
|
+
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);
|
|
1994
|
+
if (n.fill(), l > P) {
|
|
1995
|
+
S.current = [];
|
|
1996
|
+
for (let e = 0; e < l; e++) O(S.current, `pt-${e}`, M[e].x, M[e].y, 10, {
|
|
1997
|
+
label: M[e].point.week,
|
|
1998
|
+
value: String(M[e].point.count),
|
|
1999
|
+
color: i
|
|
1955
2000
|
});
|
|
1956
|
-
|
|
2001
|
+
P = l;
|
|
1957
2002
|
}
|
|
1958
|
-
r &&
|
|
2003
|
+
r && I(T), r || (F = requestAnimationFrame(L));
|
|
1959
2004
|
};
|
|
1960
|
-
return
|
|
2005
|
+
return L(), () => cancelAnimationFrame(F);
|
|
1961
2006
|
}, [
|
|
1962
|
-
|
|
1963
|
-
|
|
2007
|
+
f,
|
|
2008
|
+
y,
|
|
1964
2009
|
p,
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
2010
|
+
S,
|
|
2011
|
+
t
|
|
2012
|
+
]), f.length < 2 ? /* @__PURE__ */ s(R, {
|
|
2013
|
+
width: bt,
|
|
2014
|
+
height: q,
|
|
2015
|
+
"data-testid": r
|
|
1970
2016
|
}) : /* @__PURE__ */ c("div", {
|
|
1971
|
-
"data-testid":
|
|
2017
|
+
"data-testid": r,
|
|
1972
2018
|
style: {
|
|
1973
2019
|
position: "relative",
|
|
1974
2020
|
width: "100%",
|
|
1975
2021
|
display: "flex"
|
|
1976
2022
|
},
|
|
1977
2023
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1978
|
-
ref:
|
|
2024
|
+
ref: l,
|
|
1979
2025
|
"aria-hidden": "true",
|
|
1980
2026
|
style: {
|
|
1981
|
-
width:
|
|
1982
|
-
height:
|
|
2027
|
+
width: xt,
|
|
2028
|
+
height: q,
|
|
1983
2029
|
display: "block",
|
|
1984
2030
|
flexShrink: 0
|
|
1985
2031
|
}
|
|
@@ -1993,22 +2039,22 @@ function Et({ points: e = [], "data-testid": t }) {
|
|
|
1993
2039
|
children: /* @__PURE__ */ c("div", {
|
|
1994
2040
|
style: {
|
|
1995
2041
|
position: "relative",
|
|
1996
|
-
width:
|
|
1997
|
-
height:
|
|
2042
|
+
width: y,
|
|
2043
|
+
height: q
|
|
1998
2044
|
},
|
|
1999
2045
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2000
|
-
ref:
|
|
2046
|
+
ref: o,
|
|
2001
2047
|
role: "img",
|
|
2002
2048
|
"aria-label": "Trend chart — count over time",
|
|
2003
2049
|
style: {
|
|
2004
|
-
width:
|
|
2005
|
-
height:
|
|
2050
|
+
width: y,
|
|
2051
|
+
height: q,
|
|
2006
2052
|
display: "block"
|
|
2007
2053
|
}
|
|
2008
|
-
}), /* @__PURE__ */ s(
|
|
2009
|
-
...
|
|
2010
|
-
parentW:
|
|
2011
|
-
parentH:
|
|
2054
|
+
}), /* @__PURE__ */ s(E, {
|
|
2055
|
+
...b,
|
|
2056
|
+
parentW: y,
|
|
2057
|
+
parentH: q
|
|
2012
2058
|
})]
|
|
2013
2059
|
})
|
|
2014
2060
|
})]
|
|
@@ -2016,186 +2062,188 @@ function Et({ points: e = [], "data-testid": t }) {
|
|
|
2016
2062
|
}
|
|
2017
2063
|
//#endregion
|
|
2018
2064
|
//#region src/components/proportionalBandChart/ProportionalBandChart.tsx
|
|
2019
|
-
var
|
|
2020
|
-
function
|
|
2065
|
+
var jt = 780, Mt = 340, Nt = 28, Pt = 4, Ft = 148;
|
|
2066
|
+
function It(e, t, n) {
|
|
2021
2067
|
if (e.measureText(t).width <= n) return t;
|
|
2022
2068
|
let r = t;
|
|
2023
2069
|
for (; r.length > 0 && e.measureText(`${r}…`).width > n;) r = r.slice(0, -1);
|
|
2024
2070
|
return `${r}…`;
|
|
2025
2071
|
}
|
|
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
|
|
2072
|
+
function Lt({ severities: e = [], colorOffset: t = 0, "data-testid": r }) {
|
|
2073
|
+
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, {
|
|
2074
|
+
width: p,
|
|
2075
|
+
height: Mt
|
|
2036
2076
|
});
|
|
2037
2077
|
return n(() => {
|
|
2038
|
-
let e =
|
|
2078
|
+
let e = o.current;
|
|
2039
2079
|
if (!e) return;
|
|
2040
|
-
let
|
|
2041
|
-
|
|
2042
|
-
let
|
|
2043
|
-
|
|
2044
|
-
let e =
|
|
2045
|
-
|
|
2046
|
-
let
|
|
2047
|
-
|
|
2080
|
+
let n = x(e, p, Mt);
|
|
2081
|
+
d.current = 0;
|
|
2082
|
+
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 = () => {
|
|
2083
|
+
d.current++;
|
|
2084
|
+
let e = d.current;
|
|
2085
|
+
n.clearRect(0, 0, p, Mt), n.letterSpacing = h.letterSpacing;
|
|
2086
|
+
let t = j(Math.min(e / 60, 1));
|
|
2087
|
+
I(l.current, g.current), y.current = [];
|
|
2048
2088
|
let a = i;
|
|
2049
|
-
|
|
2050
|
-
let
|
|
2051
|
-
if (
|
|
2089
|
+
f.forEach((e, i) => {
|
|
2090
|
+
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;
|
|
2091
|
+
if (p > 0) {
|
|
2092
|
+
let e = () => {
|
|
2093
|
+
n.beginPath(), n.moveTo(g, 54), n.lineTo(g + m, 54), n.lineTo(a + p, 54 + c), n.lineTo(a, 54 + c), n.closePath();
|
|
2094
|
+
};
|
|
2095
|
+
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();
|
|
2096
|
+
}
|
|
2097
|
+
if (k(y.current, e.severity, a, 54, o, c, {
|
|
2052
2098
|
label: e.severity,
|
|
2053
2099
|
value: U(e.count ?? 0),
|
|
2054
|
-
sublabel: `${Math.round((e.count ?? 0) / (
|
|
2055
|
-
color:
|
|
2056
|
-
}),
|
|
2057
|
-
let i = Math.min(1, (
|
|
2058
|
-
|
|
2100
|
+
sublabel: `${Math.round((e.count ?? 0) / (r || 1) * 100)}%`,
|
|
2101
|
+
color: S
|
|
2102
|
+
}), t > .5) {
|
|
2103
|
+
let i = Math.min(1, (t - .5) / .5), l = a + o / 2;
|
|
2104
|
+
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
2105
|
}
|
|
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);
|
|
2106
|
+
a += o + Pt;
|
|
2107
|
+
}), C = requestAnimationFrame(w);
|
|
2064
2108
|
};
|
|
2065
|
-
return
|
|
2066
|
-
}, [
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2109
|
+
return w(), () => cancelAnimationFrame(C);
|
|
2110
|
+
}, [
|
|
2111
|
+
f,
|
|
2112
|
+
p,
|
|
2113
|
+
t
|
|
2114
|
+
]), f.length === 0 ? /* @__PURE__ */ s(R, {
|
|
2115
|
+
width: p,
|
|
2116
|
+
height: Mt,
|
|
2117
|
+
"data-testid": r
|
|
2070
2118
|
}) : /* @__PURE__ */ c("div", {
|
|
2071
|
-
"data-testid":
|
|
2119
|
+
"data-testid": r,
|
|
2072
2120
|
style: {
|
|
2073
2121
|
position: "relative",
|
|
2074
|
-
width:
|
|
2075
|
-
height:
|
|
2122
|
+
width: p,
|
|
2123
|
+
height: Mt
|
|
2076
2124
|
},
|
|
2077
2125
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2078
|
-
ref:
|
|
2126
|
+
ref: o,
|
|
2079
2127
|
role: "img",
|
|
2080
2128
|
"aria-label": "Early Warning severity distribution — prism spectrum bands",
|
|
2081
2129
|
style: {
|
|
2082
|
-
width:
|
|
2083
|
-
height:
|
|
2130
|
+
width: p,
|
|
2131
|
+
height: Mt,
|
|
2084
2132
|
display: "block"
|
|
2085
2133
|
}
|
|
2086
|
-
}), /* @__PURE__ */ s(
|
|
2134
|
+
}), /* @__PURE__ */ s(E, {
|
|
2087
2135
|
..._,
|
|
2088
|
-
parentW:
|
|
2089
|
-
parentH:
|
|
2136
|
+
parentW: p,
|
|
2137
|
+
parentH: Mt
|
|
2090
2138
|
})]
|
|
2091
2139
|
});
|
|
2092
2140
|
}
|
|
2093
2141
|
//#endregion
|
|
2094
2142
|
//#region src/components/hubAndSpokeRadialChart/HubAndSpokeRadialChart.tsx
|
|
2095
|
-
var
|
|
2143
|
+
var J = 300, Y = 280, Rt = 100, zt = {
|
|
2096
2144
|
Open: u.red,
|
|
2097
2145
|
Submitted: u.amber,
|
|
2098
2146
|
Closed: u.green
|
|
2099
2147
|
};
|
|
2100
|
-
function
|
|
2101
|
-
let l = a(null), d = a(0),
|
|
2102
|
-
width:
|
|
2103
|
-
height:
|
|
2104
|
-
}),
|
|
2148
|
+
function Bt({ segments: e = [], title: t, unitLabel: r = "", "data-testid": o }) {
|
|
2149
|
+
let l = a(null), d = a(0), f = a(/* @__PURE__ */ new Map()), { hoveredRef: p, tooltip: m, hitZonesRef: _ } = D(l, {
|
|
2150
|
+
width: J,
|
|
2151
|
+
height: Y
|
|
2152
|
+
}), y = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
2105
2153
|
return n(() => {
|
|
2106
2154
|
let e = l.current;
|
|
2107
2155
|
if (!e) return;
|
|
2108
|
-
let n =
|
|
2156
|
+
let n = x(e, J, Y);
|
|
2109
2157
|
d.current = 0;
|
|
2110
|
-
let i =
|
|
2158
|
+
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
2159
|
d.current++;
|
|
2112
2160
|
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,
|
|
2161
|
+
n.clearRect(0, 0, J, Y), n.letterSpacing = h.letterSpacing, _.current = [], f.current.forEach((e, t) => {
|
|
2162
|
+
let n = t === p.current ? 1 : 0, r = e + (n - e) * .12;
|
|
2163
|
+
Math.abs(r - n) < .005 ? n === 0 ? f.current.delete(t) : f.current.set(t, 1) : f.current.set(t, r);
|
|
2164
|
+
}), 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) => {
|
|
2165
|
+
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;
|
|
2166
|
+
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();
|
|
2167
|
+
let m = (e * .005 + r * .33) % 1, h = i + (l - i) * m, _ = a + (d - a) * m;
|
|
2168
|
+
S(n, h, _, 6, f, .4), n.beginPath(), n.arc(h, _, 2, 0, Math.PI * 2), n.fillStyle = v(f, .8), n.fill();
|
|
2169
|
+
let y = (i + l) / 2, b = (a + d) / 2;
|
|
2170
|
+
n.font = g.font, n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = v(f, .85), n.fillText(String(t.count), y, b);
|
|
2171
|
+
}), y.forEach((e, t) => {
|
|
2172
|
+
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;
|
|
2173
|
+
S(n, d, p, g * 2.5, m, .2 + y * .15);
|
|
2174
|
+
let b = n.createRadialGradient(d, p - g * .2, 0, d, p, g);
|
|
2175
|
+
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
2176
|
label: e.status,
|
|
2129
2177
|
value: r ? `${e.count} ${r}` : String(e.count),
|
|
2130
2178
|
sublabel: `${Math.round((e.count ?? 0) / (s || 1) * 100)}%`,
|
|
2131
|
-
color:
|
|
2179
|
+
color: m
|
|
2132
2180
|
});
|
|
2133
2181
|
});
|
|
2134
|
-
let l =
|
|
2135
|
-
|
|
2136
|
-
let
|
|
2137
|
-
|
|
2182
|
+
let l = f.current.get("center") ?? 0;
|
|
2183
|
+
S(n, i, a, 36, u.t2, .2 + l * .15);
|
|
2184
|
+
let x = n.createRadialGradient(i, a - 4, 0, i, a, 22);
|
|
2185
|
+
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
2186
|
label: t ?? "Total",
|
|
2139
2187
|
value: r ? `${s} ${r}` : String(s),
|
|
2140
2188
|
color: u.t2
|
|
2141
|
-
}),
|
|
2189
|
+
}), w(n, J, Y, e, .015), m = requestAnimationFrame(b);
|
|
2142
2190
|
};
|
|
2143
|
-
return
|
|
2191
|
+
return b(), () => cancelAnimationFrame(m);
|
|
2144
2192
|
}, [
|
|
2145
|
-
|
|
2193
|
+
y,
|
|
2146
2194
|
t,
|
|
2147
2195
|
r
|
|
2148
|
-
]),
|
|
2149
|
-
width:
|
|
2150
|
-
height:
|
|
2196
|
+
]), y.length === 0 ? /* @__PURE__ */ s(R, {
|
|
2197
|
+
width: J,
|
|
2198
|
+
height: Y,
|
|
2151
2199
|
"data-testid": o
|
|
2152
2200
|
}) : /* @__PURE__ */ c("div", {
|
|
2153
2201
|
"data-testid": o,
|
|
2154
2202
|
style: {
|
|
2155
2203
|
position: "relative",
|
|
2156
|
-
width:
|
|
2157
|
-
height:
|
|
2204
|
+
width: J,
|
|
2205
|
+
height: Y
|
|
2158
2206
|
},
|
|
2159
2207
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2160
2208
|
ref: l,
|
|
2161
2209
|
role: "img",
|
|
2162
2210
|
"aria-label": t ?? "EW status arc visualization",
|
|
2163
2211
|
style: {
|
|
2164
|
-
width:
|
|
2165
|
-
height:
|
|
2212
|
+
width: J,
|
|
2213
|
+
height: Y,
|
|
2166
2214
|
display: "block",
|
|
2167
2215
|
borderRadius: 8
|
|
2168
2216
|
}
|
|
2169
|
-
}), /* @__PURE__ */ s(
|
|
2170
|
-
...
|
|
2171
|
-
parentW:
|
|
2172
|
-
parentH:
|
|
2217
|
+
}), /* @__PURE__ */ s(E, {
|
|
2218
|
+
...m,
|
|
2219
|
+
parentW: J,
|
|
2220
|
+
parentH: Y
|
|
2173
2221
|
})]
|
|
2174
2222
|
});
|
|
2175
2223
|
}
|
|
2176
2224
|
//#endregion
|
|
2177
2225
|
//#region src/components/trendChart/TrendChart.tsx
|
|
2178
|
-
var
|
|
2179
|
-
function
|
|
2226
|
+
var Vt = 280, X = 96;
|
|
2227
|
+
function Ht({ points: e = [], className: t, colors: r }) {
|
|
2180
2228
|
let o = a(null), d = a(/* @__PURE__ */ new Map()), f = a(0), p = i(() => e.filter(Array.isArray).map(([e, t]) => {
|
|
2181
2229
|
let n = String(t).match(/-?\d+(\.\d+)?/);
|
|
2182
2230
|
return {
|
|
2183
2231
|
label: e,
|
|
2184
2232
|
value: n ? Number(n[0]) : 0
|
|
2185
2233
|
};
|
|
2186
|
-
}), [e]), { mouseRef: m, hoveredRef:
|
|
2187
|
-
width:
|
|
2188
|
-
height:
|
|
2234
|
+
}), [e]), { mouseRef: m, hoveredRef: h, tooltip: g, hitZonesRef: _ } = D(o, {
|
|
2235
|
+
width: Vt,
|
|
2236
|
+
height: X
|
|
2189
2237
|
});
|
|
2190
2238
|
return n(() => {
|
|
2191
2239
|
let e = o.current;
|
|
2192
2240
|
if (!e) return;
|
|
2193
|
-
let t =
|
|
2241
|
+
let t = x(e, Vt, X);
|
|
2194
2242
|
f.current = 0;
|
|
2195
|
-
let n = r?.line ?? u.
|
|
2243
|
+
let n = r?.line ?? u.teal, i = r?.point ?? u.teal, a = r?.axisLine ?? u.bd, s, c = () => {
|
|
2196
2244
|
f.current++;
|
|
2197
2245
|
let e = f.current;
|
|
2198
|
-
if (t.clearRect(0, 0,
|
|
2246
|
+
if (t.clearRect(0, 0, Vt, X), p.length < 2) {
|
|
2199
2247
|
s = requestAnimationFrame(c);
|
|
2200
2248
|
return;
|
|
2201
2249
|
}
|
|
@@ -2204,35 +2252,35 @@ function Rt({ points: e = [], className: t, colors: r }) {
|
|
|
2204
2252
|
right: 12,
|
|
2205
2253
|
top: 16,
|
|
2206
2254
|
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) ||
|
|
2255
|
+
}, 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));
|
|
2256
|
+
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) => {
|
|
2257
|
+
t.fillText(e.label.replace("Day ", "D"), x(n), X - 4);
|
|
2258
|
+
}), m.current.over && h.current) {
|
|
2259
|
+
let e = parseInt(h.current.split("-")[1]);
|
|
2260
|
+
isNaN(e) || T(t, x(e), r.top, r.top + l);
|
|
2213
2261
|
}
|
|
2214
|
-
if (
|
|
2262
|
+
if (E > 1) {
|
|
2215
2263
|
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 =
|
|
2264
|
+
e.addColorStop(0, v(n, .15)), e.addColorStop(1, v(n, 0)), t.fillStyle = e, t.beginPath(), t.moveTo(x(0), r.top + l);
|
|
2265
|
+
for (let e = 0; e < E; e++) t.lineTo(x(e), C(p[e].value));
|
|
2266
|
+
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();
|
|
2267
|
+
for (let e = 0; e < E; e++) {
|
|
2268
|
+
let n = x(e), r = C(p[e].value);
|
|
2221
2269
|
e === 0 ? t.moveTo(n, r) : t.lineTo(n, r);
|
|
2222
2270
|
}
|
|
2223
2271
|
t.stroke();
|
|
2224
2272
|
}
|
|
2225
|
-
for (let e = 0; e <
|
|
2226
|
-
let n =
|
|
2227
|
-
|
|
2273
|
+
for (let e = 0; e < E; e++) {
|
|
2274
|
+
let n = x(e), r = C(p[e].value), a = `tp-${e}`, o = d.current.get(a) ?? 0, s = e === p.length - 1;
|
|
2275
|
+
O(_.current, a, n, r, 10, {
|
|
2228
2276
|
label: p[e].label,
|
|
2229
2277
|
value: String(p[e].value),
|
|
2230
2278
|
color: s ? u.red : i
|
|
2231
|
-
}), o > 0 && !s && (
|
|
2279
|
+
}), 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
2280
|
}
|
|
2233
|
-
if (
|
|
2234
|
-
let n = p.length - 1, r =
|
|
2235
|
-
t.shadowColor =
|
|
2281
|
+
if (E >= p.length) {
|
|
2282
|
+
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;
|
|
2283
|
+
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
2284
|
}
|
|
2237
2285
|
s = requestAnimationFrame(c);
|
|
2238
2286
|
};
|
|
@@ -2242,171 +2290,173 @@ function Rt({ points: e = [], className: t, colors: r }) {
|
|
|
2242
2290
|
children: /* @__PURE__ */ c("div", {
|
|
2243
2291
|
style: {
|
|
2244
2292
|
position: "relative",
|
|
2245
|
-
width:
|
|
2246
|
-
height:
|
|
2293
|
+
width: Vt,
|
|
2294
|
+
height: X
|
|
2247
2295
|
},
|
|
2248
2296
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2249
2297
|
ref: o,
|
|
2250
2298
|
role: "img",
|
|
2251
2299
|
"aria-label": "trend chart",
|
|
2252
2300
|
style: {
|
|
2253
|
-
width:
|
|
2254
|
-
height:
|
|
2301
|
+
width: Vt,
|
|
2302
|
+
height: X,
|
|
2255
2303
|
display: "block",
|
|
2256
2304
|
borderRadius: 8
|
|
2257
2305
|
}
|
|
2258
|
-
}), /* @__PURE__ */ s(
|
|
2259
|
-
...
|
|
2260
|
-
parentW:
|
|
2261
|
-
parentH:
|
|
2306
|
+
}), /* @__PURE__ */ s(E, {
|
|
2307
|
+
...g,
|
|
2308
|
+
parentW: Vt,
|
|
2309
|
+
parentH: X
|
|
2262
2310
|
})]
|
|
2263
2311
|
})
|
|
2264
2312
|
});
|
|
2265
2313
|
}
|
|
2266
2314
|
//#endregion
|
|
2267
2315
|
//#region src/components/segmentedSplitBarChart/SegmentedSplitBarChart.tsx
|
|
2268
|
-
function
|
|
2316
|
+
function Ut(e, t, n) {
|
|
2269
2317
|
if (e.measureText(t).width <= n) return t;
|
|
2270
2318
|
let r = t;
|
|
2271
2319
|
for (; r.length > 0 && e.measureText(r + "…").width > n;) r = r.slice(0, -1);
|
|
2272
2320
|
return r + "…";
|
|
2273
2321
|
}
|
|
2274
|
-
var
|
|
2275
|
-
function
|
|
2276
|
-
let
|
|
2277
|
-
width:
|
|
2278
|
-
height:
|
|
2322
|
+
var Wt = 680, Gt = 8, Z = 6, Kt = 8, qt = Z * 2 + Kt, Jt = 36, Yt = 16, Xt = 48;
|
|
2323
|
+
function Zt({ items: e = [], labelA: t = "Implemented", labelB: r = "Unimplemented", unit: l = "variations", "data-testid": d }) {
|
|
2324
|
+
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, {
|
|
2325
|
+
width: Wt,
|
|
2326
|
+
height: T
|
|
2279
2327
|
});
|
|
2280
2328
|
return n(() => {
|
|
2281
|
-
let e =
|
|
2329
|
+
let e = f.current;
|
|
2282
2330
|
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
|
-
|
|
2331
|
+
let n = x(e, Wt, T);
|
|
2332
|
+
m.current = 0;
|
|
2333
|
+
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 = () => {
|
|
2334
|
+
m.current++;
|
|
2335
|
+
let e = m.current;
|
|
2336
|
+
n.clearRect(0, 0, Wt, T);
|
|
2337
|
+
let f = j(Math.min(e / 60, 1));
|
|
2338
|
+
I(p.current, O.current), M.current = [], w.forEach((e, o) => {
|
|
2339
|
+
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;
|
|
2340
|
+
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, {
|
|
2341
|
+
label: e.name ?? e.abbreviation ?? "",
|
|
2342
|
+
value: `${U((e.implemented ?? 0) + (e.unimplemented ?? 0))} total ${l}`,
|
|
2343
|
+
sublabel: `${t}: ${U(e.implemented ?? 0)} · ${r}: ${U(e.unimplemented ?? 0)}`,
|
|
2344
|
+
color: u.green
|
|
2345
|
+
}), T > 0) {
|
|
2346
|
+
x > 0 && S(n, 150 + T / 2, m + Z / 2, T * .15, u.green, .18 * x);
|
|
2347
|
+
let e = n.createLinearGradient(150, 0, 150 + T, 0);
|
|
2348
|
+
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();
|
|
2349
|
+
}
|
|
2350
|
+
if (k(M.current, y, 150, m, Math.max(T, 1), Z, {
|
|
2293
2351
|
label: e.name,
|
|
2294
2352
|
value: U(e.implemented ?? 0),
|
|
2295
|
-
sublabel: `${Math.round((e.implemented ?? 0) / (v || 1) * 100)}%`,
|
|
2296
2353
|
color: u.green
|
|
2297
|
-
}),
|
|
2354
|
+
}), 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) {
|
|
2355
|
+
C > 0 && S(n, 150 + E / 2, _ + Z / 2, E * .15, u.amber, .18 * C);
|
|
2356
|
+
let e = n.createLinearGradient(150, 0, 150 + E, 0);
|
|
2357
|
+
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();
|
|
2358
|
+
}
|
|
2359
|
+
k(M.current, b, 150, _, Math.max(E, 1), Z, {
|
|
2298
2360
|
label: e.name,
|
|
2299
2361
|
value: U(e.unimplemented ?? 0),
|
|
2300
|
-
sublabel: `${Math.round((e.unimplemented ?? 0) / (v || 1) * 100)}%`,
|
|
2301
2362
|
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());
|
|
2363
|
+
}), 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
2364
|
});
|
|
2319
|
-
let
|
|
2320
|
-
n.font =
|
|
2365
|
+
let y = s + o + 28, b = 150 + i / 2;
|
|
2366
|
+
n.font = _.font, n.textBaseline = "middle";
|
|
2367
|
+
let x = n.createLinearGradient(b - 120, 0, b - 120 + 14, 0);
|
|
2368
|
+
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);
|
|
2369
|
+
let C = n.createLinearGradient(b + 10, 0, b + 10 + 14, 0);
|
|
2370
|
+
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
2371
|
};
|
|
2322
|
-
return
|
|
2323
|
-
}, [
|
|
2324
|
-
width:
|
|
2372
|
+
return d(), () => cancelAnimationFrame(c);
|
|
2373
|
+
}, [w, T]), C.length === 0 ? /* @__PURE__ */ s(R, {
|
|
2374
|
+
width: Wt,
|
|
2325
2375
|
height: 160,
|
|
2326
2376
|
"data-testid": d
|
|
2327
2377
|
}) : /* @__PURE__ */ c("div", {
|
|
2328
2378
|
"data-testid": d,
|
|
2329
|
-
style: { width:
|
|
2379
|
+
style: { width: Wt },
|
|
2330
2380
|
children: [/* @__PURE__ */ c("div", {
|
|
2331
2381
|
style: {
|
|
2332
2382
|
position: "relative",
|
|
2333
|
-
width:
|
|
2334
|
-
height:
|
|
2383
|
+
width: Wt,
|
|
2384
|
+
height: T
|
|
2335
2385
|
},
|
|
2336
2386
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2337
|
-
ref:
|
|
2387
|
+
ref: f,
|
|
2338
2388
|
role: "img",
|
|
2339
2389
|
"aria-label": "Implemented vs unimplemented variations per contractor — split bar",
|
|
2340
2390
|
style: {
|
|
2341
|
-
width:
|
|
2342
|
-
height:
|
|
2391
|
+
width: Wt,
|
|
2392
|
+
height: T,
|
|
2343
2393
|
display: "block"
|
|
2344
2394
|
}
|
|
2345
|
-
}), /* @__PURE__ */ s(
|
|
2346
|
-
...
|
|
2347
|
-
parentW:
|
|
2348
|
-
parentH:
|
|
2395
|
+
}), /* @__PURE__ */ s(E, {
|
|
2396
|
+
...A,
|
|
2397
|
+
parentW: Wt,
|
|
2398
|
+
parentH: T
|
|
2349
2399
|
})]
|
|
2350
|
-
}),
|
|
2400
|
+
}), C.length > Gt && /* @__PURE__ */ s("div", {
|
|
2351
2401
|
style: { marginTop: 8 },
|
|
2352
|
-
children: /* @__PURE__ */ s(
|
|
2353
|
-
expanded:
|
|
2354
|
-
onToggle: () =>
|
|
2402
|
+
children: /* @__PURE__ */ s(oe, {
|
|
2403
|
+
expanded: y,
|
|
2404
|
+
onToggle: () => b((e) => !e)
|
|
2355
2405
|
})
|
|
2356
2406
|
})]
|
|
2357
2407
|
});
|
|
2358
2408
|
}
|
|
2359
2409
|
//#endregion
|
|
2360
2410
|
//#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:
|
|
2411
|
+
var Qt = 800, $t = 360;
|
|
2412
|
+
function en({ items: e = [], "data-testid": t }) {
|
|
2413
|
+
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: d, hitZonesRef: f } = D(r, {
|
|
2414
|
+
width: Qt,
|
|
2415
|
+
height: $t
|
|
2366
2416
|
});
|
|
2367
2417
|
return n(() => {
|
|
2368
2418
|
let t = r.current;
|
|
2369
2419
|
if (!t) return;
|
|
2370
|
-
let n =
|
|
2420
|
+
let n = x(t, Qt, $t);
|
|
2371
2421
|
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) *
|
|
2422
|
+
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) => {
|
|
2423
|
+
let n = Math.max(24, (e.total ?? 0) / (c || 1) * m), r = {
|
|
2374
2424
|
x: 100 - 110 / 2,
|
|
2375
|
-
y:
|
|
2425
|
+
y: _,
|
|
2376
2426
|
h: n,
|
|
2377
|
-
cy:
|
|
2427
|
+
cy: _ + n / 2,
|
|
2378
2428
|
c: e,
|
|
2379
|
-
color:
|
|
2429
|
+
color: p[t % p.length]
|
|
2380
2430
|
};
|
|
2381
|
-
return
|
|
2382
|
-
}),
|
|
2431
|
+
return _ += n + 6, r;
|
|
2432
|
+
}), 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
2433
|
x: 420 - 110 / 2,
|
|
2384
2434
|
y: T,
|
|
2385
2435
|
h: C,
|
|
2386
2436
|
cy: T + C / 2
|
|
2387
|
-
},
|
|
2437
|
+
}, D = {
|
|
2388
2438
|
x: 420 - 110 / 2,
|
|
2389
2439
|
y: T + C + 14,
|
|
2390
2440
|
h: w,
|
|
2391
2441
|
cy: T + C + 14 + w / 2
|
|
2392
|
-
},
|
|
2442
|
+
}, O = {
|
|
2393
2443
|
x: 720 - 110 / 2,
|
|
2394
2444
|
y: 20,
|
|
2395
|
-
h:
|
|
2396
|
-
cy: 20 +
|
|
2397
|
-
}, j,
|
|
2445
|
+
h: d,
|
|
2446
|
+
cy: 20 + d / 2
|
|
2447
|
+
}, j, M = () => {
|
|
2398
2448
|
o.current++;
|
|
2399
2449
|
let t = o.current;
|
|
2400
|
-
n.clearRect(0, 0,
|
|
2401
|
-
let r =
|
|
2402
|
-
if (
|
|
2403
|
-
let c =
|
|
2450
|
+
n.clearRect(0, 0, Qt, $t), n.letterSpacing = h.letterSpacing;
|
|
2451
|
+
let r = A(Math.min(t / 80, 1));
|
|
2452
|
+
if (I(i.current, l.current), f.current = [], e.forEach((t, o) => {
|
|
2453
|
+
let c = y[o], l = F(r, o, e.length, A), u = i.current.get(t.id) ?? 0;
|
|
2404
2454
|
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
|
-
|
|
2455
|
+
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;
|
|
2456
|
+
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
2457
|
}), r > .3) {
|
|
2408
|
-
let e = Math.min(1, (r - .3) / .7), t =
|
|
2409
|
-
|
|
2458
|
+
let e = Math.min(1, (r - .3) / .7), t = O.y + a / c * d / 2, i = O.y + d - s / c * d / 2;
|
|
2459
|
+
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
2460
|
}
|
|
2411
2461
|
if ([
|
|
2412
2462
|
"Contractors",
|
|
@@ -2418,146 +2468,236 @@ function Yt({ items: e = [], "data-testid": t }) {
|
|
|
2418
2468
|
420,
|
|
2419
2469
|
720
|
|
2420
2470
|
][t];
|
|
2421
|
-
n.font =
|
|
2471
|
+
n.font = h.font, n.fillStyle = h.color, n.textAlign = "center", n.fillText(e, r, $t - 8);
|
|
2422
2472
|
}), e.forEach((t, a) => {
|
|
2423
|
-
let o =
|
|
2424
|
-
|
|
2473
|
+
let o = y[a], s = F(r, a, e.length, A), c = i.current.get(t.id) ?? 0;
|
|
2474
|
+
k(f.current, t.id, o.x, o.y, 110, o.h, {
|
|
2425
2475
|
label: t.name,
|
|
2426
2476
|
value: t.totalLabel ?? String(t.total ?? 0),
|
|
2427
2477
|
sublabel: `${t.baseLabel ?? String(t.base ?? 0)} + ${t.variationLabel ?? String(t.variation ?? 0)}`,
|
|
2428
2478
|
color: o.color
|
|
2429
|
-
}), c > 0 &&
|
|
2479
|
+
}), 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
2480
|
}), r > .2) {
|
|
2431
2481
|
let e = Math.min(1, (r - .2) / .4);
|
|
2432
|
-
|
|
2482
|
+
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
2483
|
}
|
|
2434
2484
|
if (r > .5) {
|
|
2435
2485
|
let e = Math.min(1, (r - .5) / .5);
|
|
2436
|
-
|
|
2486
|
+
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
2487
|
}
|
|
2438
|
-
j = requestAnimationFrame(
|
|
2488
|
+
j = requestAnimationFrame(M);
|
|
2439
2489
|
};
|
|
2440
|
-
return
|
|
2490
|
+
return M(), () => cancelAnimationFrame(j);
|
|
2441
2491
|
}, [e]), /* @__PURE__ */ c("div", {
|
|
2442
2492
|
"data-testid": t,
|
|
2443
2493
|
style: {
|
|
2444
2494
|
position: "relative",
|
|
2445
|
-
width:
|
|
2446
|
-
height:
|
|
2495
|
+
width: Qt,
|
|
2496
|
+
height: $t
|
|
2447
2497
|
},
|
|
2448
2498
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2449
2499
|
ref: r,
|
|
2450
2500
|
role: "img",
|
|
2451
2501
|
"aria-label": "Weekly report flow — base value and variations per contractor flowing to total commitment",
|
|
2452
2502
|
style: {
|
|
2453
|
-
width:
|
|
2454
|
-
height:
|
|
2503
|
+
width: Qt,
|
|
2504
|
+
height: $t,
|
|
2455
2505
|
display: "block"
|
|
2456
2506
|
}
|
|
2457
|
-
}), /* @__PURE__ */ s(
|
|
2458
|
-
...
|
|
2459
|
-
parentW:
|
|
2460
|
-
parentH:
|
|
2507
|
+
}), /* @__PURE__ */ s(E, {
|
|
2508
|
+
...d,
|
|
2509
|
+
parentW: Qt,
|
|
2510
|
+
parentH: $t
|
|
2461
2511
|
})]
|
|
2462
2512
|
});
|
|
2463
2513
|
}
|
|
2464
|
-
function
|
|
2514
|
+
function tn(e, t, n, r, i, a, o, s) {
|
|
2465
2515
|
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 =
|
|
2516
|
+
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();
|
|
2517
|
+
}
|
|
2518
|
+
//#endregion
|
|
2519
|
+
//#region src/components/horizontalBarChart/HorizontalBarChart.tsx
|
|
2520
|
+
var nn = 680, rn = 160, an = {
|
|
2521
|
+
left: 8,
|
|
2522
|
+
right: 90,
|
|
2523
|
+
top: 16,
|
|
2524
|
+
bottom: 16
|
|
2525
|
+
}, on = 150, sn = 4, cn = 48, ln = 8;
|
|
2526
|
+
function un(e, t, n) {
|
|
2527
|
+
if (e.measureText(t).width <= n) return t;
|
|
2528
|
+
let r = t;
|
|
2529
|
+
for (; r.length > 0 && e.measureText(r + "…").width > n;) r = r.slice(0, -1);
|
|
2530
|
+
return r + "…";
|
|
2531
|
+
}
|
|
2532
|
+
function dn(e, t) {
|
|
2533
|
+
let n = Math.abs(e), r = e < 0 ? "-" : "";
|
|
2534
|
+
return n >= 1e6 ? `${r}${t}${(n / 1e6).toFixed(1)}M` : n >= 1e3 ? `${r}${t}${(n / 1e3).toFixed(1)}K` : `${r}${t}${n.toFixed(0)}`;
|
|
2535
|
+
}
|
|
2536
|
+
function fn({ rows: e, valuePrefix: t = "$", "data-testid": n }) {
|
|
2537
|
+
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, {
|
|
2538
|
+
width: nn,
|
|
2539
|
+
height: x
|
|
2540
|
+
});
|
|
2541
|
+
return be(r, nn, x, (e, n) => {
|
|
2542
|
+
I(i.current, C.current), T.current = [], p.forEach((r, a) => {
|
|
2543
|
+
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);
|
|
2544
|
+
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, {
|
|
2545
|
+
label: r.name,
|
|
2546
|
+
value: b,
|
|
2547
|
+
color: u.cyan
|
|
2548
|
+
}), e.fillStyle = v(u.cyan, .1), e.beginPath(), e.roundRect(d, c, y, sn, sn / 2), e.fill(), p > 0) {
|
|
2549
|
+
f > 0 && S(e, d + p, c + sn / 2, p * .25, u.cyan, .14 * f);
|
|
2550
|
+
let t = e.createLinearGradient(d, c, d + p, c);
|
|
2551
|
+
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();
|
|
2552
|
+
}
|
|
2553
|
+
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, {
|
|
2554
|
+
label: r.name,
|
|
2555
|
+
value: b,
|
|
2556
|
+
color: u.cyan
|
|
2557
|
+
});
|
|
2558
|
+
});
|
|
2559
|
+
}, !0, { easing: j }), f.length === 0 ? /* @__PURE__ */ s(R, {
|
|
2560
|
+
width: nn,
|
|
2561
|
+
height: rn,
|
|
2562
|
+
message: "No data available",
|
|
2563
|
+
"data-testid": n
|
|
2564
|
+
}) : /* @__PURE__ */ c("div", {
|
|
2565
|
+
"data-testid": n,
|
|
2566
|
+
style: { width: nn },
|
|
2567
|
+
children: [/* @__PURE__ */ c("div", {
|
|
2568
|
+
style: { position: "relative" },
|
|
2569
|
+
children: [/* @__PURE__ */ s("canvas", {
|
|
2570
|
+
ref: r,
|
|
2571
|
+
role: "img",
|
|
2572
|
+
"aria-label": "Horizontal bar chart",
|
|
2573
|
+
style: {
|
|
2574
|
+
width: nn,
|
|
2575
|
+
height: x,
|
|
2576
|
+
display: "block",
|
|
2577
|
+
borderRadius: 8
|
|
2578
|
+
}
|
|
2579
|
+
}), /* @__PURE__ */ s(E, {
|
|
2580
|
+
...w,
|
|
2581
|
+
parentW: nn,
|
|
2582
|
+
parentH: x
|
|
2583
|
+
})]
|
|
2584
|
+
}), f.length > ln && /* @__PURE__ */ s("div", {
|
|
2585
|
+
style: { marginTop: 8 },
|
|
2586
|
+
children: /* @__PURE__ */ s(oe, {
|
|
2587
|
+
expanded: l,
|
|
2588
|
+
onToggle: () => d((e) => !e),
|
|
2589
|
+
"data-testid": n ? `${n}-toggle` : void 0
|
|
2590
|
+
})
|
|
2591
|
+
})]
|
|
2592
|
+
});
|
|
2467
2593
|
}
|
|
2468
2594
|
//#endregion
|
|
2469
2595
|
//#region src/components/visualizationRenderer/VisualizationRenderer.tsx
|
|
2470
|
-
function
|
|
2471
|
-
return e.type === "line" ? /* @__PURE__ */ s(
|
|
2596
|
+
function pn({ config: e, className: t, colorOffset: n = 0 }) {
|
|
2597
|
+
return e.type === "line" ? /* @__PURE__ */ s(We, {
|
|
2472
2598
|
rows: e.rows,
|
|
2473
2599
|
className: t
|
|
2474
|
-
}) : e.type === "area" ? /* @__PURE__ */ s(
|
|
2600
|
+
}) : e.type === "area" ? /* @__PURE__ */ s(ne, {
|
|
2475
2601
|
rows: e.rows,
|
|
2476
2602
|
className: t
|
|
2477
|
-
}) : e.type === "bar" ? /* @__PURE__ */ s(
|
|
2603
|
+
}) : e.type === "bar" ? /* @__PURE__ */ s(ae, {
|
|
2478
2604
|
rows: e.rows,
|
|
2479
2605
|
className: t
|
|
2480
|
-
}) : e.type === "pie" ? /* @__PURE__ */ s(
|
|
2606
|
+
}) : e.type === "pie" ? /* @__PURE__ */ s(nt, {
|
|
2481
2607
|
rows: e.rows,
|
|
2482
2608
|
variant: "pie",
|
|
2483
2609
|
className: t
|
|
2484
|
-
}) : e.type === "donut" ? /* @__PURE__ */ s(
|
|
2610
|
+
}) : e.type === "donut" ? /* @__PURE__ */ s(nt, {
|
|
2485
2611
|
rows: e.rows,
|
|
2486
2612
|
variant: "donut",
|
|
2487
2613
|
className: t
|
|
2488
|
-
}) : e.type === "sankey" ? /* @__PURE__ */ s(
|
|
2614
|
+
}) : e.type === "sankey" ? /* @__PURE__ */ s(pt, {
|
|
2489
2615
|
rows: e.rows,
|
|
2490
2616
|
className: t
|
|
2491
|
-
}) : e.type === "flow" ? /* @__PURE__ */ s(
|
|
2617
|
+
}) : e.type === "flow" ? /* @__PURE__ */ s(ft, {
|
|
2492
2618
|
selectedEntity: e.selectedEntity,
|
|
2493
2619
|
className: t
|
|
2494
|
-
}) : e.type === "trend" ? /* @__PURE__ */ s(
|
|
2620
|
+
}) : e.type === "trend" ? /* @__PURE__ */ s(Ht, {
|
|
2495
2621
|
points: e.points,
|
|
2496
2622
|
className: t
|
|
2497
|
-
}) : e.type === "mini-bars" ? /* @__PURE__ */ s(
|
|
2623
|
+
}) : e.type === "mini-bars" ? /* @__PURE__ */ s(qe, {
|
|
2498
2624
|
rows: e.rows,
|
|
2499
2625
|
className: t
|
|
2500
|
-
}) : e.type === "stacked-horizontal-bar-chart" ? /* @__PURE__ */ s(
|
|
2626
|
+
}) : 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, {
|
|
2627
|
+
items: e.items,
|
|
2628
|
+
colorOffset: n
|
|
2629
|
+
}) : e.type === "hub-and-spoke-radial-chart" ? /* @__PURE__ */ s(Bt, {
|
|
2501
2630
|
segments: e.segments,
|
|
2502
2631
|
title: e.title,
|
|
2503
2632
|
unitLabel: e.unitLabel
|
|
2504
|
-
}) : e.type === "dot-matrix-chart" ? /* @__PURE__ */ s(
|
|
2633
|
+
}) : 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, {
|
|
2634
|
+
severities: e.severities,
|
|
2635
|
+
colorOffset: n
|
|
2636
|
+
}) : e.type === "radial-fan-tree-chart" ? /* @__PURE__ */ s(Qe, {
|
|
2505
2637
|
total: e.total,
|
|
2506
2638
|
totalLabel: e.totalLabel,
|
|
2507
|
-
items: e.items
|
|
2508
|
-
|
|
2639
|
+
items: e.items,
|
|
2640
|
+
colorOffset: n
|
|
2641
|
+
}) : e.type === "semi-circular-gauge-chart" ? /* @__PURE__ */ s(ye, {
|
|
2509
2642
|
confirmed: e.confirmed,
|
|
2510
2643
|
total: e.total,
|
|
2511
|
-
label: e.label
|
|
2512
|
-
|
|
2644
|
+
label: e.label,
|
|
2645
|
+
colorOffset: n
|
|
2646
|
+
}) : e.type === "segmented-split-bar-chart" ? /* @__PURE__ */ s(Zt, {
|
|
2513
2647
|
items: e.items,
|
|
2514
2648
|
labelA: e.labelA,
|
|
2515
2649
|
labelB: e.labelB,
|
|
2516
2650
|
unit: e.unit
|
|
2517
|
-
}) : e.type === "balance-scale-chart" ? /* @__PURE__ */ s(
|
|
2651
|
+
}) : e.type === "balance-scale-chart" ? /* @__PURE__ */ s(gt, {
|
|
2518
2652
|
left: e.left,
|
|
2519
2653
|
right: e.right,
|
|
2520
2654
|
leftTitle: e.leftTitle,
|
|
2521
2655
|
rightTitle: e.rightTitle,
|
|
2522
2656
|
unit: e.unit
|
|
2523
|
-
}) : e.type === "area-line-chart" ? /* @__PURE__ */ s(
|
|
2657
|
+
}) : e.type === "area-line-chart" ? /* @__PURE__ */ s(yt, { points: e.points }) : e.type === "trend-view" ? /* @__PURE__ */ s(At, {
|
|
2658
|
+
points: e.points,
|
|
2659
|
+
colorOffset: n
|
|
2660
|
+
}) : e.type === "weekly-flow" ? /* @__PURE__ */ s(en, { items: e.items }) : e.type === "horizontal-bar-chart" ? /* @__PURE__ */ s(fn, {
|
|
2661
|
+
rows: e.rows,
|
|
2662
|
+
valuePrefix: e.valuePrefix
|
|
2663
|
+
}) : /* @__PURE__ */ s("div", {
|
|
2524
2664
|
className: "viz-empty",
|
|
2525
2665
|
children: "Visualization unavailable"
|
|
2526
2666
|
});
|
|
2527
2667
|
}
|
|
2528
2668
|
//#endregion
|
|
2529
2669
|
//#region src/utils/mounts.tsx
|
|
2530
|
-
var
|
|
2531
|
-
function
|
|
2670
|
+
var mn = [];
|
|
2671
|
+
function hn(e) {
|
|
2532
2672
|
try {
|
|
2533
2673
|
return JSON.parse(decodeURIComponent(e));
|
|
2534
2674
|
} catch {
|
|
2535
2675
|
return null;
|
|
2536
2676
|
}
|
|
2537
2677
|
}
|
|
2538
|
-
function
|
|
2539
|
-
for (;
|
|
2540
|
-
let e =
|
|
2678
|
+
function gn() {
|
|
2679
|
+
for (; mn.length;) {
|
|
2680
|
+
let e = mn.pop();
|
|
2541
2681
|
e && e.unmount();
|
|
2542
2682
|
}
|
|
2543
2683
|
}
|
|
2544
|
-
function
|
|
2545
|
-
|
|
2684
|
+
function _n() {
|
|
2685
|
+
gn(), document.querySelectorAll("[data-d3-viz]").forEach((t) => {
|
|
2546
2686
|
let n = t.dataset.d3Viz;
|
|
2547
2687
|
if (!n) return;
|
|
2548
|
-
let r =
|
|
2688
|
+
let r = hn(n);
|
|
2549
2689
|
if (!r) return;
|
|
2550
2690
|
let i = e(t);
|
|
2551
|
-
|
|
2691
|
+
mn.push(i), i.render(/* @__PURE__ */ s(pn, { config: r }));
|
|
2552
2692
|
});
|
|
2553
2693
|
}
|
|
2554
|
-
function
|
|
2694
|
+
function vn(e) {
|
|
2555
2695
|
return encodeURIComponent(JSON.stringify(e));
|
|
2556
2696
|
}
|
|
2557
2697
|
//#endregion
|
|
2558
2698
|
//#region src/components/donutChart/DonutChart.tsx
|
|
2559
|
-
function
|
|
2560
|
-
return /* @__PURE__ */ s(
|
|
2699
|
+
function yn({ rows: e = [], className: t, colors: n }) {
|
|
2700
|
+
return /* @__PURE__ */ s(nt, {
|
|
2561
2701
|
rows: e,
|
|
2562
2702
|
variant: "donut",
|
|
2563
2703
|
className: t,
|
|
@@ -2576,20 +2716,20 @@ var Q = {
|
|
|
2576
2716
|
red: u.red,
|
|
2577
2717
|
amber: u.amber,
|
|
2578
2718
|
green: u.green
|
|
2579
|
-
}, $ = "'Satoshi Variable', 'DM Sans', sans-serif",
|
|
2719
|
+
}, $ = "'Satoshi Variable', 'DM Sans', sans-serif", bn = {
|
|
2580
2720
|
color: "#F7F7F7",
|
|
2581
2721
|
fontFamily: $,
|
|
2582
2722
|
fontSize: 24,
|
|
2583
2723
|
fontWeight: 500,
|
|
2584
2724
|
lineHeight: "32px"
|
|
2585
|
-
},
|
|
2725
|
+
}, xn = {
|
|
2586
2726
|
color: "#B3B5B6",
|
|
2587
2727
|
fontFamily: $,
|
|
2588
2728
|
fontSize: 18,
|
|
2589
2729
|
fontWeight: 400,
|
|
2590
2730
|
lineHeight: "20px"
|
|
2591
2731
|
};
|
|
2592
|
-
function
|
|
2732
|
+
function Sn({ items: e = [] }) {
|
|
2593
2733
|
let t = e.filter((e) => e.value);
|
|
2594
2734
|
return t.length === 0 ? null : /* @__PURE__ */ s("div", {
|
|
2595
2735
|
style: {
|
|
@@ -2622,13 +2762,13 @@ function sn({ items: e = [] }) {
|
|
|
2622
2762
|
},
|
|
2623
2763
|
children: [/* @__PURE__ */ s("div", {
|
|
2624
2764
|
style: {
|
|
2625
|
-
...
|
|
2765
|
+
...bn,
|
|
2626
2766
|
color: "#FFFFFF"
|
|
2627
2767
|
},
|
|
2628
2768
|
children: e.value
|
|
2629
2769
|
}), /* @__PURE__ */ s("div", {
|
|
2630
2770
|
style: {
|
|
2631
|
-
...
|
|
2771
|
+
...xn,
|
|
2632
2772
|
color: "rgba(255,255,255,0.70)"
|
|
2633
2773
|
},
|
|
2634
2774
|
children: e.label
|
|
@@ -2653,7 +2793,7 @@ function sn({ items: e = [] }) {
|
|
|
2653
2793
|
}, t))
|
|
2654
2794
|
});
|
|
2655
2795
|
}
|
|
2656
|
-
function
|
|
2796
|
+
function Cn({ items: e = [] }) {
|
|
2657
2797
|
let t = e.filter((e) => e.name ?? e.value);
|
|
2658
2798
|
return t.length === 0 ? null : /* @__PURE__ */ s("div", {
|
|
2659
2799
|
style: {
|
|
@@ -2686,7 +2826,7 @@ function cn({ items: e = [] }) {
|
|
|
2686
2826
|
}),
|
|
2687
2827
|
/* @__PURE__ */ s("span", {
|
|
2688
2828
|
style: {
|
|
2689
|
-
...
|
|
2829
|
+
...bn,
|
|
2690
2830
|
fontSize: 18,
|
|
2691
2831
|
color: Q.t1,
|
|
2692
2832
|
minWidth: 70,
|
|
@@ -2696,7 +2836,7 @@ function cn({ items: e = [] }) {
|
|
|
2696
2836
|
}),
|
|
2697
2837
|
/* @__PURE__ */ s("span", {
|
|
2698
2838
|
style: {
|
|
2699
|
-
...
|
|
2839
|
+
...xn,
|
|
2700
2840
|
flex: 1
|
|
2701
2841
|
},
|
|
2702
2842
|
children: e.kpiLabel
|
|
@@ -2705,7 +2845,7 @@ function cn({ items: e = [] }) {
|
|
|
2705
2845
|
}, t))
|
|
2706
2846
|
});
|
|
2707
2847
|
}
|
|
2708
|
-
function
|
|
2848
|
+
function wn({ items: e = [] }) {
|
|
2709
2849
|
let t = e.filter((e) => e.value);
|
|
2710
2850
|
return t.length === 0 ? null : /* @__PURE__ */ s("div", {
|
|
2711
2851
|
style: {
|
|
@@ -2738,13 +2878,13 @@ function ln({ items: e = [] }) {
|
|
|
2738
2878
|
},
|
|
2739
2879
|
children: [/* @__PURE__ */ s("div", {
|
|
2740
2880
|
style: {
|
|
2741
|
-
...
|
|
2881
|
+
...bn,
|
|
2742
2882
|
color: "#FFFFFF"
|
|
2743
2883
|
},
|
|
2744
2884
|
children: e.value
|
|
2745
2885
|
}), /* @__PURE__ */ s("div", {
|
|
2746
2886
|
style: {
|
|
2747
|
-
...
|
|
2887
|
+
...xn,
|
|
2748
2888
|
color: "rgba(255,255,255,0.70)"
|
|
2749
2889
|
},
|
|
2750
2890
|
children: e.label
|
|
@@ -2769,12 +2909,12 @@ function ln({ items: e = [] }) {
|
|
|
2769
2909
|
}, t))
|
|
2770
2910
|
});
|
|
2771
2911
|
}
|
|
2772
|
-
var
|
|
2912
|
+
var Tn = {
|
|
2773
2913
|
red: Q.red,
|
|
2774
2914
|
amber: Q.amber,
|
|
2775
2915
|
green: Q.green
|
|
2776
2916
|
};
|
|
2777
|
-
function
|
|
2917
|
+
function En({ items: e = [] }) {
|
|
2778
2918
|
let t = e.filter((e) => e.text);
|
|
2779
2919
|
return t.length === 0 ? null : /* @__PURE__ */ s("div", {
|
|
2780
2920
|
style: {
|
|
@@ -2782,7 +2922,7 @@ function dn({ items: e = [] }) {
|
|
|
2782
2922
|
flexDirection: "column",
|
|
2783
2923
|
gap: 5
|
|
2784
2924
|
},
|
|
2785
|
-
children: t.map((e, t) => (
|
|
2925
|
+
children: t.map((e, t) => (Tn[e.severity], /* @__PURE__ */ c("div", {
|
|
2786
2926
|
style: {
|
|
2787
2927
|
display: "flex",
|
|
2788
2928
|
alignItems: "flex-start",
|
|
@@ -2800,7 +2940,7 @@ function dn({ items: e = [] }) {
|
|
|
2800
2940
|
marginTop: 5
|
|
2801
2941
|
} }), /* @__PURE__ */ s("span", {
|
|
2802
2942
|
style: {
|
|
2803
|
-
...
|
|
2943
|
+
...xn,
|
|
2804
2944
|
color: "#B3B5B6"
|
|
2805
2945
|
},
|
|
2806
2946
|
children: e.text
|
|
@@ -2808,7 +2948,7 @@ function dn({ items: e = [] }) {
|
|
|
2808
2948
|
}, t)))
|
|
2809
2949
|
});
|
|
2810
2950
|
}
|
|
2811
|
-
function
|
|
2951
|
+
function Dn({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
2812
2952
|
let a = r.filter((e) => e.name);
|
|
2813
2953
|
if (a.length === 0) return null;
|
|
2814
2954
|
let o = t - e;
|
|
@@ -2920,9 +3060,9 @@ function fn({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
|
2920
3060
|
}, r);
|
|
2921
3061
|
})
|
|
2922
3062
|
]
|
|
2923
|
-
}), i && i.length > 0 && /* @__PURE__ */ s(
|
|
3063
|
+
}), i && i.length > 0 && /* @__PURE__ */ s(wn, { items: i })] });
|
|
2924
3064
|
}
|
|
2925
|
-
function
|
|
3065
|
+
function On({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i, rightLabel: a, rightValue: o, rightColor: l, chips: d }) {
|
|
2926
3066
|
if (!t && !a) return null;
|
|
2927
3067
|
let f = r ?? u.blue, p = l ?? u.blue;
|
|
2928
3068
|
return /* @__PURE__ */ c("div", { children: [
|
|
@@ -3017,10 +3157,10 @@ function pn({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
3017
3157
|
})
|
|
3018
3158
|
})]
|
|
3019
3159
|
}),
|
|
3020
|
-
d && d.length > 0 && /* @__PURE__ */ s(
|
|
3160
|
+
d && d.length > 0 && /* @__PURE__ */ s(wn, { items: d })
|
|
3021
3161
|
] });
|
|
3022
3162
|
}
|
|
3023
|
-
function
|
|
3163
|
+
function kn({ pct: e, label: t, color: n, chips: r }) {
|
|
3024
3164
|
if (e == null && !t) return null;
|
|
3025
3165
|
let i = n ?? u.blue, a = 2 * Math.PI * 30, o = a * (1 - e / 100);
|
|
3026
3166
|
return /* @__PURE__ */ c("div", {
|
|
@@ -3080,7 +3220,7 @@ function mn({ pct: e, label: t, color: n, chips: r }) {
|
|
|
3080
3220
|
style: { flex: 1 },
|
|
3081
3221
|
children: [/* @__PURE__ */ s("div", {
|
|
3082
3222
|
style: {
|
|
3083
|
-
...
|
|
3223
|
+
...xn,
|
|
3084
3224
|
padding: "10px 0px"
|
|
3085
3225
|
},
|
|
3086
3226
|
children: t
|
|
@@ -3103,14 +3243,14 @@ function mn({ pct: e, label: t, color: n, chips: r }) {
|
|
|
3103
3243
|
children: [
|
|
3104
3244
|
/* @__PURE__ */ s("span", {
|
|
3105
3245
|
style: {
|
|
3106
|
-
...
|
|
3246
|
+
...bn,
|
|
3107
3247
|
color: Q.t2
|
|
3108
3248
|
},
|
|
3109
3249
|
children: e.value
|
|
3110
3250
|
}),
|
|
3111
3251
|
/* @__PURE__ */ s("span", {
|
|
3112
3252
|
style: {
|
|
3113
|
-
...
|
|
3253
|
+
...bn,
|
|
3114
3254
|
color: Q.t2,
|
|
3115
3255
|
fontWeight: 400,
|
|
3116
3256
|
userSelect: "none"
|
|
@@ -3118,7 +3258,7 @@ function mn({ pct: e, label: t, color: n, chips: r }) {
|
|
|
3118
3258
|
children: "|"
|
|
3119
3259
|
}),
|
|
3120
3260
|
/* @__PURE__ */ s("span", {
|
|
3121
|
-
style: { ...
|
|
3261
|
+
style: { ...xn },
|
|
3122
3262
|
children: e.label
|
|
3123
3263
|
})
|
|
3124
3264
|
]
|
|
@@ -3127,7 +3267,7 @@ function mn({ pct: e, label: t, color: n, chips: r }) {
|
|
|
3127
3267
|
})]
|
|
3128
3268
|
});
|
|
3129
3269
|
}
|
|
3130
|
-
function
|
|
3270
|
+
function An({ items: e = [] }) {
|
|
3131
3271
|
let t = e.filter((e) => e.name ?? e.value);
|
|
3132
3272
|
return t.length === 0 ? null : /* @__PURE__ */ s("div", {
|
|
3133
3273
|
style: {
|
|
@@ -3165,14 +3305,14 @@ function hn({ items: e = [] }) {
|
|
|
3165
3305
|
flex: 1,
|
|
3166
3306
|
height: 4,
|
|
3167
3307
|
background: "rgba(255,255,255,0.07)",
|
|
3168
|
-
borderRadius:
|
|
3308
|
+
borderRadius: 0,
|
|
3169
3309
|
overflow: "hidden"
|
|
3170
3310
|
},
|
|
3171
3311
|
children: /* @__PURE__ */ s("div", { style: {
|
|
3172
3312
|
height: "100%",
|
|
3173
3313
|
width: `${e.pct}%`,
|
|
3174
|
-
background: e.color ??
|
|
3175
|
-
borderRadius:
|
|
3314
|
+
background: e.color ?? u.purple,
|
|
3315
|
+
borderRadius: 0,
|
|
3176
3316
|
opacity: .75
|
|
3177
3317
|
} })
|
|
3178
3318
|
}),
|
|
@@ -3183,45 +3323,25 @@ function hn({ items: e = [] }) {
|
|
|
3183
3323
|
color: Q.t2,
|
|
3184
3324
|
fontFamily: $,
|
|
3185
3325
|
flexShrink: 0,
|
|
3186
|
-
minWidth:
|
|
3187
|
-
textAlign: "right"
|
|
3188
|
-
},
|
|
3189
|
-
children: e.value
|
|
3190
|
-
}),
|
|
3191
|
-
e.badge && /* @__PURE__ */ s("span", {
|
|
3192
|
-
style: {
|
|
3193
|
-
fontSize: 18,
|
|
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,
|
|
3326
|
+
minWidth: 320,
|
|
3211
3327
|
textAlign: "right"
|
|
3212
3328
|
},
|
|
3213
|
-
children:
|
|
3329
|
+
children: [
|
|
3330
|
+
e.value,
|
|
3331
|
+
e.badge,
|
|
3332
|
+
e.sublabel
|
|
3333
|
+
].filter(Boolean).join(" ")
|
|
3214
3334
|
})
|
|
3215
3335
|
]
|
|
3216
3336
|
}, t))
|
|
3217
3337
|
});
|
|
3218
3338
|
}
|
|
3219
|
-
var
|
|
3339
|
+
var jn = {
|
|
3220
3340
|
red: Q.red,
|
|
3221
3341
|
amber: Q.amber,
|
|
3222
3342
|
green: Q.green
|
|
3223
3343
|
};
|
|
3224
|
-
function
|
|
3344
|
+
function Mn({ items: e = [] }) {
|
|
3225
3345
|
let t = e.filter((e) => e.text);
|
|
3226
3346
|
return t.length === 0 ? null : /* @__PURE__ */ s("div", {
|
|
3227
3347
|
style: {
|
|
@@ -3230,7 +3350,7 @@ function _n({ items: e = [] }) {
|
|
|
3230
3350
|
gap: 5
|
|
3231
3351
|
},
|
|
3232
3352
|
children: t.map((e, t) => {
|
|
3233
|
-
let n =
|
|
3353
|
+
let n = jn[e.severity];
|
|
3234
3354
|
return /* @__PURE__ */ c("div", {
|
|
3235
3355
|
style: {
|
|
3236
3356
|
display: "flex",
|
|
@@ -3256,13 +3376,13 @@ function _n({ items: e = [] }) {
|
|
|
3256
3376
|
/* @__PURE__ */ s("span", {
|
|
3257
3377
|
style: {
|
|
3258
3378
|
flex: 1,
|
|
3259
|
-
...
|
|
3379
|
+
...xn
|
|
3260
3380
|
},
|
|
3261
3381
|
children: e.text
|
|
3262
3382
|
}),
|
|
3263
3383
|
/* @__PURE__ */ s("span", {
|
|
3264
3384
|
style: {
|
|
3265
|
-
...
|
|
3385
|
+
...xn,
|
|
3266
3386
|
flexShrink: 0,
|
|
3267
3387
|
marginTop: 1
|
|
3268
3388
|
},
|
|
@@ -3273,7 +3393,7 @@ function _n({ items: e = [] }) {
|
|
|
3273
3393
|
})
|
|
3274
3394
|
});
|
|
3275
3395
|
}
|
|
3276
|
-
function
|
|
3396
|
+
function Nn({ columns: e = [], rows: t = [] }) {
|
|
3277
3397
|
return t.length === 0 ? null : /* @__PURE__ */ c("div", {
|
|
3278
3398
|
style: {
|
|
3279
3399
|
display: "flex",
|
|
@@ -3336,21 +3456,21 @@ function vn({ columns: e = [], rows: t = [] }) {
|
|
|
3336
3456
|
}, t))]
|
|
3337
3457
|
});
|
|
3338
3458
|
}
|
|
3339
|
-
function
|
|
3459
|
+
function Pn({ block: e }) {
|
|
3340
3460
|
if (!e) return null;
|
|
3341
3461
|
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(
|
|
3462
|
+
case "stats": return /* @__PURE__ */ s(Sn, { items: e.items });
|
|
3463
|
+
case "ranked": return /* @__PURE__ */ s(Cn, { items: e.items });
|
|
3464
|
+
case "chips": return /* @__PURE__ */ s(wn, { items: e.items });
|
|
3465
|
+
case "badges": return /* @__PURE__ */ s(En, { items: e.items });
|
|
3466
|
+
case "dot-strip": return /* @__PURE__ */ s(Dn, {
|
|
3347
3467
|
min: e.min,
|
|
3348
3468
|
max: e.max,
|
|
3349
3469
|
unit: e.unit,
|
|
3350
3470
|
dots: e.dots,
|
|
3351
3471
|
chips: e.chips
|
|
3352
3472
|
});
|
|
3353
|
-
case "proportion": return /* @__PURE__ */ s(
|
|
3473
|
+
case "proportion": return /* @__PURE__ */ s(On, {
|
|
3354
3474
|
leftPct: e.leftPct,
|
|
3355
3475
|
leftLabel: e.leftLabel,
|
|
3356
3476
|
leftValue: e.leftValue,
|
|
@@ -3361,15 +3481,15 @@ function yn({ block: e }) {
|
|
|
3361
3481
|
rightColor: e.rightColor,
|
|
3362
3482
|
chips: e.chips
|
|
3363
3483
|
});
|
|
3364
|
-
case "ring": return /* @__PURE__ */ s(
|
|
3484
|
+
case "ring": return /* @__PURE__ */ s(kn, {
|
|
3365
3485
|
pct: e.pct,
|
|
3366
3486
|
label: e.label,
|
|
3367
3487
|
color: e.color,
|
|
3368
3488
|
chips: e.chips
|
|
3369
3489
|
});
|
|
3370
|
-
case "scorecard-rows": return /* @__PURE__ */ s(
|
|
3371
|
-
case "flags-list": return /* @__PURE__ */ s(
|
|
3372
|
-
case "comparison-rows": return /* @__PURE__ */ s(
|
|
3490
|
+
case "scorecard-rows": return /* @__PURE__ */ s(An, { items: e.items });
|
|
3491
|
+
case "flags-list": return /* @__PURE__ */ s(Mn, { items: e.items });
|
|
3492
|
+
case "comparison-rows": return /* @__PURE__ */ s(Nn, {
|
|
3373
3493
|
columns: e.columns,
|
|
3374
3494
|
rows: e.rows
|
|
3375
3495
|
});
|
|
@@ -3378,14 +3498,14 @@ function yn({ block: e }) {
|
|
|
3378
3498
|
}
|
|
3379
3499
|
//#endregion
|
|
3380
3500
|
//#region src/components/keyHighlights/Takeaway.tsx
|
|
3381
|
-
var
|
|
3501
|
+
var Fn = "'Satoshi Variable', 'DM Sans', sans-serif", In = {
|
|
3382
3502
|
color: "#C2C2C2",
|
|
3383
|
-
fontFamily:
|
|
3503
|
+
fontFamily: Fn,
|
|
3384
3504
|
fontSize: 18,
|
|
3385
3505
|
fontWeight: 400,
|
|
3386
3506
|
lineHeight: 1.65
|
|
3387
3507
|
};
|
|
3388
|
-
function
|
|
3508
|
+
function Ln({ text: e }) {
|
|
3389
3509
|
return /* @__PURE__ */ c("div", {
|
|
3390
3510
|
style: {
|
|
3391
3511
|
padding: "8px 0px",
|
|
@@ -3398,16 +3518,16 @@ function Sn({ text: e }) {
|
|
|
3398
3518
|
fontSize: 18,
|
|
3399
3519
|
fontWeight: 500,
|
|
3400
3520
|
color: u.t1,
|
|
3401
|
-
fontFamily:
|
|
3521
|
+
fontFamily: Fn,
|
|
3402
3522
|
lineHeight: 1.65,
|
|
3403
3523
|
marginRight: 8
|
|
3404
3524
|
},
|
|
3405
3525
|
children: "Takeaway"
|
|
3406
3526
|
}), /* @__PURE__ */ s("span", {
|
|
3407
|
-
style: { ...
|
|
3527
|
+
style: { ...In },
|
|
3408
3528
|
children: e
|
|
3409
3529
|
})]
|
|
3410
3530
|
});
|
|
3411
3531
|
}
|
|
3412
3532
|
//#endregion
|
|
3413
|
-
export {
|
|
3533
|
+
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 };
|