@divami-artefacts/ai-design-system 1.0.12 → 1.0.13
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 +29 -23
- package/dist/index.cjs +1 -1
- package/dist/index.js +724 -724
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -15,39 +15,43 @@ var u = {
|
|
|
15
15
|
bgL: "#0C1420",
|
|
16
16
|
sf: "#13161B",
|
|
17
17
|
bd: "#22262F",
|
|
18
|
-
blue: "#
|
|
18
|
+
blue: "#4C93D9",
|
|
19
19
|
cyan: "#36BFFA",
|
|
20
|
-
orange: "#
|
|
21
|
-
red: "#
|
|
22
|
-
green: "#
|
|
23
|
-
purple: "#
|
|
24
|
-
amber: "#
|
|
25
|
-
t1: "#
|
|
26
|
-
t2: "#
|
|
20
|
+
orange: "#EC772A",
|
|
21
|
+
red: "#EC772A",
|
|
22
|
+
green: "#5DA537",
|
|
23
|
+
purple: "#818FF8",
|
|
24
|
+
amber: "#EEBF3B",
|
|
25
|
+
t1: "#F7F9FA",
|
|
26
|
+
t2: "#B3B5B6",
|
|
27
27
|
t3: "#94979C",
|
|
28
28
|
t4: "#334155"
|
|
29
29
|
}, d = [
|
|
30
30
|
u.blue,
|
|
31
|
-
u.cyan,
|
|
32
31
|
u.amber,
|
|
33
32
|
u.purple,
|
|
34
33
|
u.green,
|
|
35
34
|
u.red
|
|
36
35
|
], f = {
|
|
37
36
|
font: "400 14px 'Satoshi Variable', 'DM Sans', sans-serif",
|
|
38
|
-
color: "#
|
|
37
|
+
color: "#B3B5B6",
|
|
38
|
+
letterSpacing: "0px"
|
|
39
39
|
}, p = {
|
|
40
|
-
font: "
|
|
41
|
-
color: "#
|
|
40
|
+
font: "500 14px 'Satoshi Variable', 'DM Sans', sans-serif",
|
|
41
|
+
color: "#F7F9FA"
|
|
42
|
+
}, m = {
|
|
43
|
+
font: "400 16px 'Satoshi Variable', 'DM Sans', sans-serif",
|
|
44
|
+
color: "#B3B5B6",
|
|
45
|
+
letterSpacing: "0px"
|
|
42
46
|
};
|
|
43
|
-
function
|
|
47
|
+
function h(e, t = 1) {
|
|
44
48
|
let n = e.replace("#", "");
|
|
45
49
|
return `rgba(${parseInt(n.substring(0, 2), 16)},${parseInt(n.substring(2, 4), 16)},${parseInt(n.substring(4, 6), 16)},${t})`;
|
|
46
50
|
}
|
|
47
|
-
function
|
|
51
|
+
function g(e, t, n) {
|
|
48
52
|
return e + (t - e) * n;
|
|
49
53
|
}
|
|
50
|
-
function
|
|
54
|
+
function _(e, t, n) {
|
|
51
55
|
let r = (e) => {
|
|
52
56
|
let t = e.replace("#", "");
|
|
53
57
|
return [
|
|
@@ -57,34 +61,34 @@ function g(e, t, n) {
|
|
|
57
61
|
];
|
|
58
62
|
}, [i, a, o] = r(e), [s, c, l] = r(t), u = (e) => Math.max(0, Math.min(255, Math.round(e)));
|
|
59
63
|
return [
|
|
60
|
-
u(
|
|
61
|
-
u(
|
|
62
|
-
u(
|
|
64
|
+
u(g(i, s, n)),
|
|
65
|
+
u(g(a, c, n)),
|
|
66
|
+
u(g(o, l, n))
|
|
63
67
|
].map((e) => e.toString(16).padStart(2, "0")).join("").replace(/^/, "#");
|
|
64
68
|
}
|
|
65
|
-
function
|
|
69
|
+
function v(e, t, n, r = 2) {
|
|
66
70
|
e.width = t * r, e.height = n * r;
|
|
67
71
|
let i = e.getContext("2d");
|
|
68
72
|
return i.scale(r, r), i;
|
|
69
73
|
}
|
|
70
|
-
function
|
|
74
|
+
function y(e, t, n, r, i, a = .3) {
|
|
71
75
|
let o = e.createRadialGradient(t, n, 0, t, n, r);
|
|
72
|
-
o.addColorStop(0,
|
|
76
|
+
o.addColorStop(0, h(i, a)), o.addColorStop(1, h(i, 0)), e.fillStyle = o, e.beginPath(), e.arc(t, n, r, 0, Math.PI * 2), e.fill();
|
|
73
77
|
}
|
|
74
|
-
function
|
|
78
|
+
function b(e, t, n, r, i = 50, a = h(u.blue, .05)) {
|
|
75
79
|
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();
|
|
76
80
|
}
|
|
77
|
-
function
|
|
81
|
+
function x(e, t, n, r, i = .015) {
|
|
78
82
|
e.fillStyle = `rgba(0,0,0,${i})`;
|
|
79
83
|
let a = r * .5 % 6;
|
|
80
84
|
for (let r = a; r < n; r += 3) e.fillRect(0, r, t, 1);
|
|
81
85
|
}
|
|
82
|
-
function
|
|
86
|
+
function S(e, t, n, r, i = h(u.t1, .08)) {
|
|
83
87
|
e.strokeStyle = i, e.lineWidth = 1, e.setLineDash([3, 3]), e.beginPath(), e.moveTo(t, n), e.lineTo(t, r), e.stroke(), e.setLineDash([]);
|
|
84
88
|
}
|
|
85
89
|
//#endregion
|
|
86
90
|
//#region src/canvas/CanvasTooltip.tsx
|
|
87
|
-
function
|
|
91
|
+
function C({ visible: e, x: t, y: n, content: i, parentW: o }) {
|
|
88
92
|
let l = a(null);
|
|
89
93
|
if (r(() => {
|
|
90
94
|
let r = l.current;
|
|
@@ -157,7 +161,7 @@ function S({ visible: e, x: t, y: n, content: i, parentW: o }) {
|
|
|
157
161
|
}
|
|
158
162
|
//#endregion
|
|
159
163
|
//#region src/canvas/useCanvasInteraction.ts
|
|
160
|
-
function
|
|
164
|
+
function w(e, { width: r, height: i, onClick: s, enabled: c = !0 }) {
|
|
161
165
|
let l = a({
|
|
162
166
|
x: -1,
|
|
163
167
|
y: -1,
|
|
@@ -229,14 +233,14 @@ function C(e, { width: r, height: i, onClick: s, enabled: c = !0 }) {
|
|
|
229
233
|
hitZonesRef: d
|
|
230
234
|
};
|
|
231
235
|
}
|
|
232
|
-
function
|
|
236
|
+
function T(e, t, n, r, i, a) {
|
|
233
237
|
e.push({
|
|
234
238
|
id: t,
|
|
235
239
|
data: a,
|
|
236
240
|
test: (e, t) => (e - n) ** 2 + (t - r) ** 2 <= i * i
|
|
237
241
|
});
|
|
238
242
|
}
|
|
239
|
-
function
|
|
243
|
+
function E(e, t, n, r, i, a, o) {
|
|
240
244
|
e.push({
|
|
241
245
|
id: t,
|
|
242
246
|
data: o,
|
|
@@ -245,14 +249,14 @@ function T(e, t, n, r, i, a, o) {
|
|
|
245
249
|
}
|
|
246
250
|
//#endregion
|
|
247
251
|
//#region src/canvas/easing.ts
|
|
248
|
-
var
|
|
252
|
+
var D = (e) => 1 - (1 - e) ** 3, O = (e) => 1 - (1 - e) ** 4, k = (e) => e === 1 ? 1 : 1 - 2 ** (-10 * e), A = (e) => {
|
|
249
253
|
let t = 1.70158;
|
|
250
254
|
return 1 + (t + 1) * (e - 1) ** 3 + t * (e - 1) ** 2;
|
|
251
|
-
},
|
|
255
|
+
}, j = (e, t = .04, n = .001) => Math.sin(e * t) * Math.exp(-Math.min(e * n, 4)), M = (e, t, n, r = D) => {
|
|
252
256
|
let i = Math.min(.06, .5 / n), a = t * i, o = 1 - (n - 1) * i;
|
|
253
257
|
return r(Math.max(0, Math.min((e - a) / o, 1)));
|
|
254
258
|
};
|
|
255
|
-
function
|
|
259
|
+
function N(e, t, n = .12) {
|
|
256
260
|
e.forEach((r, i) => {
|
|
257
261
|
let a = i === t ? 1 : 0, o = r + (a - r) * n;
|
|
258
262
|
Math.abs(o - a) < .005 ? a === 0 ? e.delete(i) : e.set(i, 1) : e.set(i, o);
|
|
@@ -260,66 +264,66 @@ function M(e, t, n = .12) {
|
|
|
260
264
|
}
|
|
261
265
|
//#endregion
|
|
262
266
|
//#region src/components/common/SeriesChart.tsx
|
|
263
|
-
var
|
|
264
|
-
function
|
|
265
|
-
let o = a(null), d = a(/* @__PURE__ */ new Map()), f = a(0), { mouseRef: p, hoveredRef:
|
|
266
|
-
width:
|
|
267
|
-
height:
|
|
267
|
+
var P = 760, F = 250;
|
|
268
|
+
function ee({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
269
|
+
let o = a(null), d = a(/* @__PURE__ */ new Map()), f = a(0), { mouseRef: p, hoveredRef: m, tooltip: g, hitZonesRef: _ } = w(o, {
|
|
270
|
+
width: P,
|
|
271
|
+
height: F
|
|
268
272
|
});
|
|
269
273
|
return n(() => {
|
|
270
274
|
let n = o.current;
|
|
271
275
|
if (!n) return;
|
|
272
|
-
let r =
|
|
276
|
+
let r = v(n, P, F);
|
|
273
277
|
f.current = 0;
|
|
274
278
|
let a = i?.line ?? u.blue, s = i?.point ?? u.blue, c = i?.axisLine ?? u.bd, l = i?.areaFill ?? u.blue, g = {
|
|
275
279
|
top: 24,
|
|
276
280
|
right: 24,
|
|
277
281
|
bottom: 44,
|
|
278
282
|
left: 24
|
|
279
|
-
}, b =
|
|
283
|
+
}, b = P - g.left - g.right, x = F - g.top - g.bottom, C, w = () => {
|
|
280
284
|
f.current++;
|
|
281
285
|
let n = f.current;
|
|
282
|
-
if (r.clearRect(0, 0,
|
|
283
|
-
C = requestAnimationFrame(
|
|
286
|
+
if (r.clearRect(0, 0, P, F), e.length < 2) {
|
|
287
|
+
C = requestAnimationFrame(w);
|
|
284
288
|
return;
|
|
285
289
|
}
|
|
286
|
-
let i = e.map((e) => e.pricing ?? 0), o = Math.max(100, ...i),
|
|
287
|
-
|
|
290
|
+
let i = e.map((e) => e.pricing ?? 0), o = Math.max(100, ...i), v = (t) => g.left + t / (e.length - 1) * b, E = (e) => g.top + (1 - e / o) * x, D = k(Math.min(n / 48, 1)), O = Math.max(2, Math.floor(D * e.length));
|
|
291
|
+
N(d.current, m.current), _.current = [], r.strokeStyle = h(u.bd, .2), r.lineWidth = .5;
|
|
288
292
|
for (let e = 0; e <= 4; e++) {
|
|
289
|
-
let t = g.top + e / 4 *
|
|
293
|
+
let t = g.top + e / 4 * x;
|
|
290
294
|
r.beginPath(), r.moveTo(g.left, t), r.lineTo(g.left + b, t), r.stroke();
|
|
291
295
|
}
|
|
292
|
-
if (r.strokeStyle =
|
|
293
|
-
let e = parseInt(
|
|
294
|
-
isNaN(e) ||
|
|
296
|
+
if (r.strokeStyle = h(c, .4), r.lineWidth = 1, r.setLineDash([]), r.beginPath(), r.moveTo(g.left, E(0)), r.lineTo(g.left + b, E(0)), r.stroke(), p.current.over && m.current) {
|
|
297
|
+
let e = parseInt(m.current.split("-")[1]);
|
|
298
|
+
isNaN(e) || S(r, v(e), g.top, g.top + x);
|
|
295
299
|
}
|
|
296
|
-
if (t === "area" &&
|
|
297
|
-
let t = r.createLinearGradient(0, g.top, 0, g.top +
|
|
298
|
-
t.addColorStop(0,
|
|
299
|
-
for (let t = 0; t <
|
|
300
|
-
r.lineTo(
|
|
300
|
+
if (t === "area" && O > 1) {
|
|
301
|
+
let t = r.createLinearGradient(0, g.top, 0, g.top + x);
|
|
302
|
+
t.addColorStop(0, h(l, .12)), t.addColorStop(1, h(l, 0)), r.fillStyle = t, r.beginPath(), r.moveTo(v(0), g.top + x);
|
|
303
|
+
for (let t = 0; t < O; t++) r.lineTo(v(t), E(e[t].pricing ?? 0));
|
|
304
|
+
r.lineTo(v(O - 1), g.top + x), r.closePath(), r.fill();
|
|
301
305
|
}
|
|
302
|
-
if (
|
|
303
|
-
r.strokeStyle =
|
|
304
|
-
for (let t = 0; t <
|
|
305
|
-
let n =
|
|
306
|
+
if (O > 1) {
|
|
307
|
+
r.strokeStyle = h(a, .85), r.lineWidth = 2, r.setLineDash([]), r.beginPath();
|
|
308
|
+
for (let t = 0; t < O; t++) {
|
|
309
|
+
let n = v(t), i = E(e[t].pricing ?? 0);
|
|
306
310
|
t === 0 ? r.moveTo(n, i) : r.lineTo(n, i);
|
|
307
311
|
}
|
|
308
312
|
r.stroke();
|
|
309
313
|
}
|
|
310
|
-
for (let i = 0; i <
|
|
311
|
-
let a =
|
|
312
|
-
|
|
314
|
+
for (let i = 0; i < O; i++) {
|
|
315
|
+
let a = v(i), o = E(e[i].pricing ?? 0), c = `sc-${i}`, l = d.current.get(c) ?? 0, f = i === e.length - 1;
|
|
316
|
+
T(_.current, c, a, o, 12, {
|
|
313
317
|
label: e[i].vendor,
|
|
314
318
|
value: String(e[i].pricing ?? 0),
|
|
315
319
|
color: f ? u.red : s
|
|
316
|
-
}), l > 0 &&
|
|
317
|
-
let p = f ?
|
|
318
|
-
f ? (r.shadowColor =
|
|
320
|
+
}), l > 0 && y(r, a, o, 16 * l, s, .2 * l);
|
|
321
|
+
let p = f ? j(n, .05, 5e-4) : 0, m = t === "area" ? 5 : 6;
|
|
322
|
+
f ? (r.shadowColor = h(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 = h(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 = h(u.t3, .6 + l * .3), r.textAlign = "center", r.fillText(e[i].vendor, a, F - 14);
|
|
319
323
|
}
|
|
320
|
-
C = requestAnimationFrame(
|
|
324
|
+
C = requestAnimationFrame(w);
|
|
321
325
|
};
|
|
322
|
-
return
|
|
326
|
+
return w(), () => cancelAnimationFrame(C);
|
|
323
327
|
}, [
|
|
324
328
|
e,
|
|
325
329
|
t,
|
|
@@ -329,31 +333,31 @@ function te({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
|
329
333
|
children: /* @__PURE__ */ c("div", {
|
|
330
334
|
style: {
|
|
331
335
|
position: "relative",
|
|
332
|
-
width:
|
|
333
|
-
height:
|
|
336
|
+
width: P,
|
|
337
|
+
height: F
|
|
334
338
|
},
|
|
335
339
|
children: [/* @__PURE__ */ s("canvas", {
|
|
336
340
|
ref: o,
|
|
337
341
|
role: "img",
|
|
338
342
|
"aria-label": `${t} chart`,
|
|
339
343
|
style: {
|
|
340
|
-
width:
|
|
341
|
-
height:
|
|
344
|
+
width: P,
|
|
345
|
+
height: F,
|
|
342
346
|
display: "block",
|
|
343
347
|
borderRadius: 8
|
|
344
348
|
}
|
|
345
|
-
}), /* @__PURE__ */ s(
|
|
349
|
+
}), /* @__PURE__ */ s(C, {
|
|
346
350
|
...g,
|
|
347
|
-
parentW:
|
|
348
|
-
parentH:
|
|
351
|
+
parentW: P,
|
|
352
|
+
parentH: F
|
|
349
353
|
})]
|
|
350
354
|
})
|
|
351
355
|
});
|
|
352
356
|
}
|
|
353
357
|
//#endregion
|
|
354
358
|
//#region src/components/areaChart/AreaChart.tsx
|
|
355
|
-
function
|
|
356
|
-
return /* @__PURE__ */ s(
|
|
359
|
+
function te({ rows: e = [], className: t, colors: n }) {
|
|
360
|
+
return /* @__PURE__ */ s(ee, {
|
|
357
361
|
rows: e,
|
|
358
362
|
variant: "area",
|
|
359
363
|
className: t,
|
|
@@ -362,44 +366,44 @@ function ne({ rows: e = [], className: t, colors: n }) {
|
|
|
362
366
|
}
|
|
363
367
|
//#endregion
|
|
364
368
|
//#region src/components/barChart/BarChart.tsx
|
|
365
|
-
var
|
|
369
|
+
var ne = 760, re = 280;
|
|
366
370
|
function ie({ rows: e = [], className: t, colors: r }) {
|
|
367
|
-
let i = a(null), o = a(/* @__PURE__ */ new Map()), f = a(0), { hoveredRef: p, tooltip:
|
|
368
|
-
width:
|
|
371
|
+
let i = a(null), o = a(/* @__PURE__ */ new Map()), f = a(0), { hoveredRef: p, tooltip: m, hitZonesRef: g } = w(i, {
|
|
372
|
+
width: ne,
|
|
369
373
|
height: re
|
|
370
374
|
});
|
|
371
375
|
return n(() => {
|
|
372
376
|
let t = i.current;
|
|
373
377
|
if (!t) return;
|
|
374
|
-
let n =
|
|
378
|
+
let n = v(t, ne, re);
|
|
375
379
|
f.current = 0;
|
|
376
380
|
let a = r?.bars ?? d, s = r?.axisLine ?? u.bd, c = r?.valueLabel ?? u.t2, l = {
|
|
377
381
|
top: 24,
|
|
378
382
|
right: 24,
|
|
379
383
|
bottom: 56,
|
|
380
384
|
left: 24
|
|
381
|
-
},
|
|
385
|
+
}, m = re - l.top - l.bottom, _ = (ne - l.left - l.right) / Math.max(e.length, 1), b = Math.max(100, ...e.map((e) => e.pricing ?? 0)), x = l.top + m, S, C = () => {
|
|
382
386
|
f.current++;
|
|
383
387
|
let t = f.current;
|
|
384
|
-
n.clearRect(0, 0,
|
|
385
|
-
let r =
|
|
386
|
-
|
|
387
|
-
let s = l.left + i *
|
|
388
|
-
|
|
388
|
+
n.clearRect(0, 0, ne, re);
|
|
389
|
+
let r = O(Math.min(t / 48, 1));
|
|
390
|
+
N(o.current, p.current), g.current = [], n.strokeStyle = h(s, .4), n.lineWidth = 1, n.setLineDash([]), n.beginPath(), n.moveTo(l.left, x), n.lineTo(ne - l.right, x), n.stroke(), e.forEach((t, i) => {
|
|
391
|
+
let s = l.left + i * _, d = M(r, i, e.length, O), f = b > 0 ? (t.pricing ?? 0) / b * m : 0, p = Math.max(f > 0 ? 4 : 0, f * d), v = a[i % a.length], S = o.current.get(t.id ?? `bar-${i}`) ?? 0;
|
|
392
|
+
E(g.current, t.id ?? `bar-${i}`, s + 4, x - p, _ - 8, p, {
|
|
389
393
|
label: t.vendor,
|
|
390
394
|
value: String(t.pricing ?? 0),
|
|
391
|
-
color:
|
|
392
|
-
}), p > 0 && (S > 0 &&
|
|
395
|
+
color: v
|
|
396
|
+
}), p > 0 && (S > 0 && y(n, s + _ / 2, x - p / 2, _ * .8, v, .12 * S), n.shadowColor = h(v, .2 * (S > 0 ? S : 0)), n.shadowBlur = S > 0 ? 6 : 0, n.fillStyle = h(v, .5 + S * .25), n.beginPath(), n.roundRect(s + 4, x - p, _ - 8, p, [
|
|
393
397
|
4,
|
|
394
398
|
4,
|
|
395
399
|
0,
|
|
396
400
|
0
|
|
397
|
-
]), n.fill(), n.shadowBlur = 0, S > 0 && (n.strokeStyle =
|
|
401
|
+
]), n.fill(), n.shadowBlur = 0, S > 0 && (n.strokeStyle = h(v, .4 * S), n.lineWidth = 1, n.beginPath(), n.roundRect(s + 4, x - p, _ - 8, p, [
|
|
398
402
|
4,
|
|
399
403
|
4,
|
|
400
404
|
0,
|
|
401
405
|
0
|
|
402
|
-
]), n.stroke())), d > .5 && p > 0 && (n.globalAlpha = Math.min(1, (d - .5) * 2), n.font = "bold 10px 'JetBrains Mono', monospace", n.fillStyle = S > 0 ?
|
|
406
|
+
]), n.stroke())), d > .5 && p > 0 && (n.globalAlpha = Math.min(1, (d - .5) * 2), n.font = "bold 10px 'JetBrains Mono', monospace", n.fillStyle = S > 0 ? v : h(c, .7), n.textAlign = "center", n.fillText(String(t.pricing ?? ""), s + _ / 2, x - p - 6), n.globalAlpha = 1), n.font = `${S > 0 ? "bold " : ""}9px 'JetBrains Mono', monospace`, n.fillStyle = S > 0 ? v : h(u.t3, .6), n.textAlign = "center", n.fillText(t.vendor, s + _ / 2, re - 14);
|
|
403
407
|
}), S = requestAnimationFrame(C);
|
|
404
408
|
};
|
|
405
409
|
return C(), () => cancelAnimationFrame(S);
|
|
@@ -408,7 +412,7 @@ function ie({ rows: e = [], className: t, colors: r }) {
|
|
|
408
412
|
children: /* @__PURE__ */ c("div", {
|
|
409
413
|
style: {
|
|
410
414
|
position: "relative",
|
|
411
|
-
width:
|
|
415
|
+
width: ne,
|
|
412
416
|
height: re
|
|
413
417
|
},
|
|
414
418
|
children: [/* @__PURE__ */ s("canvas", {
|
|
@@ -416,14 +420,14 @@ function ie({ rows: e = [], className: t, colors: r }) {
|
|
|
416
420
|
role: "img",
|
|
417
421
|
"aria-label": "bar chart",
|
|
418
422
|
style: {
|
|
419
|
-
width:
|
|
423
|
+
width: ne,
|
|
420
424
|
height: re,
|
|
421
425
|
display: "block",
|
|
422
426
|
borderRadius: 8
|
|
423
427
|
}
|
|
424
|
-
}), /* @__PURE__ */ s(
|
|
425
|
-
...
|
|
426
|
-
parentW:
|
|
428
|
+
}), /* @__PURE__ */ s(C, {
|
|
429
|
+
...m,
|
|
430
|
+
parentW: ne,
|
|
427
431
|
parentH: re
|
|
428
432
|
})]
|
|
429
433
|
})
|
|
@@ -431,7 +435,7 @@ function ie({ rows: e = [], className: t, colors: r }) {
|
|
|
431
435
|
}
|
|
432
436
|
//#endregion
|
|
433
437
|
//#region src/components/common/ChartEmptyState.tsx
|
|
434
|
-
function
|
|
438
|
+
function I({ width: e, height: t, message: n = "No data available", "data-testid": r }) {
|
|
435
439
|
return /* @__PURE__ */ s("div", {
|
|
436
440
|
"data-testid": r,
|
|
437
441
|
style: {
|
|
@@ -494,10 +498,9 @@ function ae({ expanded: e, onToggle: t, labelExpanded: n = "View Less", labelCol
|
|
|
494
498
|
}
|
|
495
499
|
//#endregion
|
|
496
500
|
//#region src/components/progressRaceChart/ProgressRaceChart.tsx
|
|
497
|
-
var
|
|
501
|
+
var L = 680, R = 42, oe = 10, se = 24, ce = 24, le = 8, ue = [
|
|
498
502
|
u.green,
|
|
499
503
|
u.blue,
|
|
500
|
-
u.cyan,
|
|
501
504
|
u.amber,
|
|
502
505
|
u.red
|
|
503
506
|
];
|
|
@@ -506,47 +509,47 @@ function de(e) {
|
|
|
506
509
|
return t >= 1e6 ? `${n}£${(t / 1e6).toFixed(1)}M` : t >= 1e3 ? `${n}£${(t / 1e3).toFixed(1)}K` : `${n}£${t.toFixed(0)}`;
|
|
507
510
|
}
|
|
508
511
|
function fe({ items: e = [], "data-testid": t }) {
|
|
509
|
-
let r = a(null), l = a(0), d = a(/* @__PURE__ */ new Map()), [
|
|
510
|
-
width:
|
|
511
|
-
height:
|
|
512
|
+
let r = a(null), l = a(0), d = a(/* @__PURE__ */ new Map()), [m, g] = o(!1), _ = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), S = i(() => [..._].sort((e, t) => (t.percentage ?? 0) - (e.percentage ?? 0)), [_]), E = i(() => m ? S : S.slice(0, le), [S, m]), O = E.length, k = se + ce + O * R + Math.max(0, O - 1) * oe, { hoveredRef: A, tooltip: j, hitZonesRef: M } = w(r, {
|
|
513
|
+
width: L,
|
|
514
|
+
height: k
|
|
512
515
|
});
|
|
513
516
|
return n(() => {
|
|
514
517
|
let e = r.current;
|
|
515
518
|
if (!e) return;
|
|
516
|
-
let t =
|
|
519
|
+
let t = v(e, L, k);
|
|
517
520
|
l.current = 0;
|
|
518
|
-
let n =
|
|
521
|
+
let n = L * .13, i = L * .08, a = L - n - i, o, s = () => {
|
|
519
522
|
l.current++;
|
|
520
523
|
let e = l.current;
|
|
521
|
-
t.clearRect(0, 0,
|
|
522
|
-
let n = t ===
|
|
524
|
+
t.clearRect(0, 0, L, k), t.letterSpacing = f.letterSpacing, M.current = [], d.current.forEach((e, t) => {
|
|
525
|
+
let n = t === A.current ? 1 : 0, r = e + (n - e) * .12;
|
|
523
526
|
Math.abs(r - n) < .005 ? n === 0 ? d.current.delete(t) : d.current.set(t, 1) : d.current.set(t, r);
|
|
524
|
-
}),
|
|
525
|
-
let o = ue[i % ue.length], s = d.current.get(r.id) ?? 0, c = se + i * (
|
|
526
|
-
t.fillStyle =
|
|
527
|
-
let l = (r.percentage ?? 0) / 100, u = n + a * Math.min(l, l *
|
|
527
|
+
}), A.current && !d.current.has(A.current) && d.current.set(A.current, 0), b(t, L, k, e, 40, h(u.blue, .04)), E.forEach((r, i) => {
|
|
528
|
+
let o = ue[i % ue.length], s = d.current.get(r.id) ?? 0, c = se + i * (R + oe);
|
|
529
|
+
t.fillStyle = h(o, .04 + s * .04), t.beginPath(), t.roundRect(n, c, a, R, 3), t.fill(), t.strokeStyle = h(o, .08), t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(n, c + R / 2), t.lineTo(n + a, c + R / 2), t.stroke(), t.setLineDash([]);
|
|
530
|
+
let l = (r.percentage ?? 0) / 100, u = n + a * Math.min(l, l * D(Math.min(1, e * .005)));
|
|
528
531
|
if (u > n + 4) {
|
|
529
532
|
let e = t.createLinearGradient(n, 0, u, 0);
|
|
530
|
-
e.addColorStop(0,
|
|
533
|
+
e.addColorStop(0, h(o, .02)), e.addColorStop(1, h(o, .25 + s * .15)), t.fillStyle = e, t.beginPath(), t.roundRect(n, c + 2, u - n, R - 4, 2), t.fill();
|
|
531
534
|
}
|
|
532
|
-
|
|
533
|
-
let
|
|
535
|
+
y(t, u, c + R / 2, 18 + s * 8, o, .3 + s * .2), t.beginPath(), t.arc(u, c + R / 2, 5 + s * 2, 0, Math.PI * 2), t.fillStyle = h(o, .9), t.fill();
|
|
536
|
+
let m = {
|
|
534
537
|
label: r.name,
|
|
535
538
|
value: `${r.percentage ?? 0}% commitment`,
|
|
536
539
|
sublabel: `Base: ${de(r.base ?? 0)} · Variations: ${de(r.variation ?? 0)}`,
|
|
537
540
|
color: o
|
|
538
541
|
};
|
|
539
|
-
|
|
540
|
-
}), t.strokeStyle =
|
|
542
|
+
T(M.current, r.id, u, c + R / 2, 14, m), t.font = p.font, t.fillStyle = h(o, .9 + s * .1), t.textAlign = "left", t.textBaseline = "middle", t.fillText(`${r.percentage ?? 0}%`, u + 10, c + R / 2), t.font = `${s > 0 ? "bold " : ""}` + f.font, t.fillStyle = s > 0 ? o : f.color, t.textAlign = "right", t.fillText(r.abbreviation ?? r.name.slice(0, 6), n - 8, c + R / 2);
|
|
543
|
+
}), t.strokeStyle = h(u.t3, .3), t.lineWidth = 1, t.setLineDash([]), t.beginPath(), t.moveTo(n + a, se), t.lineTo(n + a, se + (O - 1) * (R + oe) + R), t.stroke(), x(t, L, k, e, .015), o = requestAnimationFrame(s);
|
|
541
544
|
};
|
|
542
545
|
return s(), () => cancelAnimationFrame(o);
|
|
543
|
-
}, [
|
|
544
|
-
width:
|
|
546
|
+
}, [E, k]), S.length === 0 ? /* @__PURE__ */ s(I, {
|
|
547
|
+
width: L,
|
|
545
548
|
height: 160,
|
|
546
549
|
"data-testid": t
|
|
547
550
|
}) : /* @__PURE__ */ c("div", {
|
|
548
551
|
"data-testid": t,
|
|
549
|
-
style: { width:
|
|
552
|
+
style: { width: L },
|
|
550
553
|
children: [/* @__PURE__ */ c("div", {
|
|
551
554
|
style: { position: "relative" },
|
|
552
555
|
children: [/* @__PURE__ */ s("canvas", {
|
|
@@ -554,21 +557,21 @@ function fe({ items: e = [], "data-testid": t }) {
|
|
|
554
557
|
role: "img",
|
|
555
558
|
"aria-label": "Commitment race — contractors ranked by commitment percentage",
|
|
556
559
|
style: {
|
|
557
|
-
width:
|
|
558
|
-
height:
|
|
560
|
+
width: L,
|
|
561
|
+
height: k,
|
|
559
562
|
display: "block",
|
|
560
563
|
borderRadius: 8
|
|
561
564
|
}
|
|
562
|
-
}), /* @__PURE__ */ s(
|
|
563
|
-
...
|
|
564
|
-
parentW:
|
|
565
|
-
parentH:
|
|
565
|
+
}), /* @__PURE__ */ s(C, {
|
|
566
|
+
...j,
|
|
567
|
+
parentW: L,
|
|
568
|
+
parentH: k
|
|
566
569
|
})]
|
|
567
|
-
}),
|
|
570
|
+
}), _.length > le && /* @__PURE__ */ s("div", {
|
|
568
571
|
style: { marginTop: 8 },
|
|
569
572
|
children: /* @__PURE__ */ s(ae, {
|
|
570
|
-
expanded:
|
|
571
|
-
onToggle: () =>
|
|
573
|
+
expanded: m,
|
|
574
|
+
onToggle: () => g((e) => !e)
|
|
572
575
|
})
|
|
573
576
|
})]
|
|
574
577
|
});
|
|
@@ -581,14 +584,14 @@ function he({ value: e, confirmed: t, total: r, "data-testid": i }) {
|
|
|
581
584
|
return n(() => {
|
|
582
585
|
let n = o.current;
|
|
583
586
|
if (!n) return;
|
|
584
|
-
let i =
|
|
587
|
+
let i = v(n, pe, me);
|
|
585
588
|
c.current = 0;
|
|
586
|
-
let a = pe / 2, s = Math.PI, l = 2 * Math.PI, d = Math.PI, p,
|
|
589
|
+
let a = pe / 2, s = Math.PI, l = 2 * Math.PI, d = Math.PI, p, g = () => {
|
|
587
590
|
c.current++;
|
|
588
591
|
let n = c.current;
|
|
589
|
-
i.clearRect(0, 0, pe, me);
|
|
590
|
-
let o =
|
|
591
|
-
i.beginPath(), i.arc(a, 220, 120, s, l), i.strokeStyle =
|
|
592
|
+
i.clearRect(0, 0, pe, me), i.letterSpacing = f.letterSpacing;
|
|
593
|
+
let o = D(Math.min(n / 80, 1)), _ = A(Math.min(n / 72, 1));
|
|
594
|
+
i.beginPath(), i.arc(a, 220, 120, s, l), i.strokeStyle = h(u.bd, .35), i.lineWidth = 46, i.stroke(), [
|
|
592
595
|
{
|
|
593
596
|
start: 0,
|
|
594
597
|
end: .33,
|
|
@@ -606,7 +609,7 @@ function he({ value: e, confirmed: t, total: r, "data-testid": i }) {
|
|
|
606
609
|
}
|
|
607
610
|
].forEach((e) => {
|
|
608
611
|
let t = s + e.start * d, n = s + e.end * d;
|
|
609
|
-
i.beginPath(), i.arc(a, 220, 194 / 2, t, n), i.strokeStyle =
|
|
612
|
+
i.beginPath(), i.arc(a, 220, 194 / 2, t, n), i.strokeStyle = h(e.color, .12), i.lineWidth = 42, i.stroke();
|
|
610
613
|
}), [
|
|
611
614
|
{
|
|
612
615
|
label: "Low",
|
|
@@ -622,22 +625,22 @@ function he({ value: e, confirmed: t, total: r, "data-testid": i }) {
|
|
|
622
625
|
}
|
|
623
626
|
].forEach(({ label: e, angle: t }) => {
|
|
624
627
|
let n = a + Math.cos(t) * 166, r = 220 + Math.sin(t) * 166;
|
|
625
|
-
i.font =
|
|
628
|
+
i.font = f.font, i.fillStyle = h(u.t2, .55), i.textAlign = "center", i.fillText(e, n, r + 3);
|
|
626
629
|
});
|
|
627
|
-
let
|
|
628
|
-
|
|
629
|
-
let
|
|
630
|
-
i.strokeStyle =
|
|
630
|
+
let v = s + e / 100 * d * o, b = e >= 66 ? u.green : e >= 33 ? u.amber : u.red;
|
|
631
|
+
y(i, a + Math.cos(v) * 194 / 2, 220 + Math.sin(v) * 194 / 2, 18, b, .35 * o), i.beginPath(), i.arc(a, 220, 194 / 2, s, v), i.strokeStyle = h(b, .7 * o), i.lineWidth = 38, i.lineCap = "round", i.stroke(), i.lineCap = "butt";
|
|
632
|
+
let x = s + e / 100 * d * _, S = a + Math.cos(x) * 82, C = 220 + Math.sin(x) * 82, w = a - Math.cos(x) * 14, T = 220 - Math.sin(x) * 14;
|
|
633
|
+
i.strokeStyle = h(b, .18 * _), i.lineWidth = 6, i.lineCap = "round", i.beginPath(), i.moveTo(w, T), i.lineTo(S, C), i.stroke(), i.strokeStyle = h(u.t1, .92 * _), i.lineWidth = 2, i.lineCap = "round", i.beginPath(), i.moveTo(w, T), i.lineTo(S, C), i.stroke(), i.beginPath(), i.arc(S, C, 3, 0, Math.PI * 2), i.fillStyle = h(b, .9 * _), i.fill(), y(i, a, 220, 20, b, .25 * _), i.beginPath(), i.arc(a, 220, 9, 0, Math.PI * 2), i.strokeStyle = h(b, .5 * _), i.lineWidth = 1.5, i.stroke(), i.beginPath(), i.arc(a, 220, 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 = b, i.textAlign = "center", i.fillText(`${Math.round(e * _)}%`, a, 182), i.globalAlpha = 1), o > .7 && (i.globalAlpha = Math.min(1, (o - .7) / .3), i.font = "400 14px 'Satoshi Variable', 'DM Sans', sans-serif", i.fillStyle = f.color, i.textAlign = "center", i.fillText("NCEs confirmed", a, 252), i.font = m.font, i.fillStyle = f.color, i.fillText(`${t} of ${r} NCEs are confirmed compensation events`, a, 272), i.globalAlpha = 1);
|
|
631
634
|
for (let e = 0; e <= 10; e++) {
|
|
632
635
|
let t = s + e / 10 * d;
|
|
633
|
-
if (i.strokeStyle =
|
|
636
|
+
if (i.strokeStyle = h(u.bd, .5), i.lineWidth = e % 5 == 0 ? 1.5 : .8, i.beginPath(), i.moveTo(a + Math.cos(t) * 122, 220 + Math.sin(t) * 122), i.lineTo(a + Math.cos(t) * 128, 220 + Math.sin(t) * 128), i.stroke(), e % 5 == 0) {
|
|
634
637
|
let n = a + Math.cos(t) * 138, r = 220 + Math.sin(t) * 138;
|
|
635
|
-
i.font =
|
|
638
|
+
i.font = f.font, i.fillStyle = h(u.t3, .45), i.textAlign = "center", i.fillText(`${e * 10}%`, n, r + 3);
|
|
636
639
|
}
|
|
637
640
|
}
|
|
638
|
-
p = requestAnimationFrame(
|
|
641
|
+
p = requestAnimationFrame(g);
|
|
639
642
|
};
|
|
640
|
-
return
|
|
643
|
+
return g(), () => cancelAnimationFrame(p);
|
|
641
644
|
}, [
|
|
642
645
|
e,
|
|
643
646
|
t,
|
|
@@ -664,7 +667,7 @@ function he({ value: e, confirmed: t, total: r, "data-testid": i }) {
|
|
|
664
667
|
//#endregion
|
|
665
668
|
//#region src/canvas/useCanvasLoop.ts
|
|
666
669
|
function ge(e, t, r, i, o = !0, s = {}) {
|
|
667
|
-
let c = a(0), { easing: l =
|
|
670
|
+
let c = a(0), { easing: l = D, durationFrames: u = 48 } = s;
|
|
668
671
|
n(() => {
|
|
669
672
|
let n = e.current;
|
|
670
673
|
if (!n || !t || !r) return;
|
|
@@ -695,29 +698,28 @@ function ge(e, t, r, i, o = !0, s = {}) {
|
|
|
695
698
|
}
|
|
696
699
|
//#endregion
|
|
697
700
|
//#region src/components/multiMetricConstellationChart/MultiMetricConstellationChart.tsx
|
|
698
|
-
var
|
|
701
|
+
var z = 780, _e = 234, ve = 130, ye = 52, be = [
|
|
699
702
|
u.blue,
|
|
700
|
-
u.cyan,
|
|
701
703
|
u.amber,
|
|
702
704
|
u.purple,
|
|
703
705
|
u.green
|
|
704
|
-
],
|
|
706
|
+
], xe = [
|
|
705
707
|
"Base Value",
|
|
706
708
|
"Variations",
|
|
707
709
|
"Commitment"
|
|
708
|
-
],
|
|
710
|
+
], Se = [
|
|
709
711
|
"Base",
|
|
710
712
|
"Var",
|
|
711
713
|
"Commit"
|
|
712
714
|
];
|
|
713
|
-
function
|
|
714
|
-
let n = a(null), r = a(/* @__PURE__ */ new Map()), { hoveredRef: o, tooltip: l, hitZonesRef: d } =
|
|
715
|
-
width:
|
|
716
|
-
height:
|
|
717
|
-
}),
|
|
718
|
-
let e = Math.max(...
|
|
719
|
-
return
|
|
720
|
-
let i =
|
|
715
|
+
function Ce({ items: e = [], "data-testid": t }) {
|
|
716
|
+
let n = a(null), r = a(/* @__PURE__ */ new Map()), { hoveredRef: o, tooltip: l, hitZonesRef: d } = w(n, {
|
|
717
|
+
width: z,
|
|
718
|
+
height: _e
|
|
719
|
+
}), p = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), g = i(() => {
|
|
720
|
+
let e = Math.max(...p.map((e) => e.base ?? 0)), t = Math.max(...p.map((e) => e.variation ?? 0));
|
|
721
|
+
return p.map((n, r) => {
|
|
722
|
+
let i = z * (.12 + r * .19), a = ve, o = Math.min(z * .075, ye), s = be[r % be.length], c = [
|
|
721
723
|
(n.base ?? 0) / (e || 1) * 100,
|
|
722
724
|
(n.variation ?? 0) / (t || 1) * 100,
|
|
723
725
|
n.percentage ?? 0
|
|
@@ -726,10 +728,10 @@ function Se({ items: e = [], "data-testid": t }) {
|
|
|
726
728
|
`£${n.variation ?? 0}M`,
|
|
727
729
|
`${n.percentage ?? 0}%`
|
|
728
730
|
], u = c.map((e, t) => {
|
|
729
|
-
let n = -Math.PI / 2 + t /
|
|
731
|
+
let n = -Math.PI / 2 + t / xe.length * Math.PI * 2, r = e / 100, s = o * Math.max(.08, r);
|
|
730
732
|
return {
|
|
731
|
-
name:
|
|
732
|
-
short:
|
|
733
|
+
name: xe[t],
|
|
734
|
+
short: Se[t],
|
|
733
735
|
label: l[t],
|
|
734
736
|
val: Math.round(e),
|
|
735
737
|
x: i + Math.cos(n) * s,
|
|
@@ -748,61 +750,60 @@ function Se({ items: e = [], "data-testid": t }) {
|
|
|
748
750
|
color: s
|
|
749
751
|
};
|
|
750
752
|
});
|
|
751
|
-
}, [
|
|
752
|
-
return ge(n,
|
|
753
|
-
|
|
753
|
+
}, [p]);
|
|
754
|
+
return ge(n, z, _e, (e, t, n) => {
|
|
755
|
+
N(r.current, o.current), d.current = [], b(e, z, _e, n, 30), g.forEach((t, i) => {
|
|
754
756
|
let a = t.color, o = `constellation-${i}`, s = r.current.get(o) ?? 0;
|
|
755
|
-
e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 5, 0, Math.PI * 2), e.strokeStyle =
|
|
757
|
+
e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 5, 0, Math.PI * 2), e.strokeStyle = h(u.bd, .08 + .08 * s), e.lineWidth = .5, e.stroke(), e.beginPath(), t.stars.forEach((t, n) => {
|
|
756
758
|
n === 0 ? e.moveTo(t.x, t.y) : e.lineTo(t.x, t.y);
|
|
757
|
-
}), e.closePath(), e.fillStyle =
|
|
758
|
-
let c =
|
|
759
|
-
|
|
760
|
-
let
|
|
761
|
-
e.textAlign = "center", e.textBaseline = "middle",
|
|
759
|
+
}), e.closePath(), e.fillStyle = h(a, .04 + .03 * s), e.fill(), e.strokeStyle = h(a, .15 + .1 * s), e.lineWidth = .8, e.stroke(), t.stars.forEach((o, s) => {
|
|
760
|
+
let c = j(n, .05, 5e-4) * .3 + .7, l = 3.5 * c, u = `star-${i}-${s}`, p = r.current.get(u) ?? 0, m = e.createRadialGradient(o.x, o.y, 0, o.x, o.y, l * 4);
|
|
761
|
+
m.addColorStop(0, h(a, (.2 + .1 * p) * c)), m.addColorStop(1, h(a, 0)), e.fillStyle = m, 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 + p * 2, 0, Math.PI * 2), e.fillStyle = h(a, (.8 + .2 * p) * c), e.fill();
|
|
762
|
+
let g = Math.sin(o.angle) < -.3;
|
|
763
|
+
e.textAlign = "center", e.textBaseline = "middle", g ? (e.font = "400 14px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = h(a, .5 + .15 * p), e.fillText(o.short, o.x, o.y - 24), e.font = f.font, e.fillStyle = h(a, .8 + .15 * p), e.fillText(o.label, o.x, o.y - 11)) : (e.font = "400 14px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = h(a, .5 + .15 * p), e.fillText(o.short, o.x, o.y + 11), e.font = f.font, e.fillStyle = h(a, .8 + .15 * p), e.fillText(o.label, o.x, o.y + 24)), T(d.current, u, o.x, o.y, l * 4 + 2, {
|
|
762
764
|
label: o.name,
|
|
763
765
|
value: o.label,
|
|
764
766
|
sublabel: t.abbreviation ?? t.name.slice(0, 6),
|
|
765
767
|
color: a
|
|
766
768
|
});
|
|
767
|
-
}), s > 0 &&
|
|
769
|
+
}), s > 0 && y(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 = h(a, .1 + j(n, .03, 5e-4) * .05), e.lineWidth = 1, e.stroke(), e.font = f.font, e.textAlign = "center", e.textBaseline = "alphabetic", e.fillStyle = s > 0 ? t.color : f.color, e.fillText(t.abbreviation ?? t.name.slice(0, 6), t.cx, t.cy + t.baseR + 26), T(d.current, o, t.cx, t.cy, t.baseR + 5, {
|
|
768
770
|
label: t.name,
|
|
769
771
|
value: `£${t.total ?? 0}M total`,
|
|
770
772
|
sublabel: `${t.percentage ?? 0}% committed · scatter ${t.scatter.toFixed(1)}`,
|
|
771
773
|
color: a
|
|
772
774
|
});
|
|
773
|
-
}), e.font =
|
|
774
|
-
}, !0),
|
|
775
|
-
width:
|
|
776
|
-
height:
|
|
775
|
+
}), e.font = m.font, e.textAlign = "center", e.textBaseline = "middle", e.fillStyle = m.color, e.fillText("▲ top = Base value · ▼▸ lower-right = Variations · ◂▼ lower-left = Commitment % · hover stars for details", z / 2, _e - 14), x(e, z, _e, n, .012);
|
|
776
|
+
}, !0), g.length === 0 ? /* @__PURE__ */ s(I, {
|
|
777
|
+
width: z,
|
|
778
|
+
height: _e,
|
|
777
779
|
"data-testid": t
|
|
778
780
|
}) : /* @__PURE__ */ c("div", {
|
|
779
781
|
"data-testid": t,
|
|
780
782
|
style: {
|
|
781
783
|
position: "relative",
|
|
782
|
-
width:
|
|
783
|
-
height:
|
|
784
|
+
width: z,
|
|
785
|
+
height: _e
|
|
784
786
|
},
|
|
785
787
|
children: [/* @__PURE__ */ s("canvas", {
|
|
786
788
|
ref: n,
|
|
787
789
|
role: "img",
|
|
788
790
|
"aria-label": "Contract value breakdown per contractor — multi-KPI constellation chart",
|
|
789
791
|
style: {
|
|
790
|
-
width:
|
|
791
|
-
height:
|
|
792
|
+
width: z,
|
|
793
|
+
height: _e,
|
|
792
794
|
display: "block"
|
|
793
795
|
}
|
|
794
|
-
}), /* @__PURE__ */ s(
|
|
796
|
+
}), /* @__PURE__ */ s(C, {
|
|
795
797
|
...l,
|
|
796
|
-
parentW:
|
|
797
|
-
parentH:
|
|
798
|
+
parentW: z,
|
|
799
|
+
parentH: _e
|
|
798
800
|
})]
|
|
799
801
|
});
|
|
800
802
|
}
|
|
801
803
|
//#endregion
|
|
802
804
|
//#region src/components/stackedHorizontalBarChart/StackedHorizontalBarChart.tsx
|
|
803
|
-
var
|
|
805
|
+
var we = 680, Te = 220, Ee = 8, De = [
|
|
804
806
|
u.blue,
|
|
805
|
-
u.cyan,
|
|
806
807
|
u.amber,
|
|
807
808
|
u.purple,
|
|
808
809
|
u.green
|
|
@@ -811,42 +812,42 @@ var Ce = 680, we = 220, Te = 8, Ee = [
|
|
|
811
812
|
right: 80,
|
|
812
813
|
top: 16,
|
|
813
814
|
bottom: 38
|
|
814
|
-
},
|
|
815
|
-
function
|
|
815
|
+
}, Oe = 88, V = 18;
|
|
816
|
+
function ke(e) {
|
|
816
817
|
let t = Math.abs(e), n = e < 0 ? "-" : "";
|
|
817
818
|
return t >= 1e6 ? `${n}£${(t / 1e6).toFixed(1)}M` : t >= 1e3 ? `${n}£${(t / 1e3).toFixed(1)}K` : `${n}£${t.toFixed(0)}`;
|
|
818
819
|
}
|
|
819
|
-
function
|
|
820
|
-
let n = a(null), r = a(/* @__PURE__ */ new Map()), [i, l] = o(!1), { items: d = [], totals:
|
|
821
|
-
width:
|
|
822
|
-
height:
|
|
820
|
+
function Ae({ data: e, "data-testid": t }) {
|
|
821
|
+
let n = a(null), r = a(/* @__PURE__ */ new Map()), [i, l] = o(!1), { items: d = [], totals: p } = e, g = d.filter((e) => typeof e == "object" && !!e), _ = [...g].sort((e, t) => (t.total ?? 0) - (e.total ?? 0)), v = i ? _ : _.slice(0, Ee), b = v.length, x = Math.max(..._.map((e) => Math.abs(e.total ?? 0)), 1), S = Math.max(Te, B.top + B.bottom + b * V + Math.max(0, b - 1) * 8), T = we - B.left - Oe - B.right, D = b > 1 ? (S - B.top - B.bottom - b * V) / (b - 1) : 0, k = g.length === 0, { hoveredRef: A, tooltip: j, hitZonesRef: P } = w(n, {
|
|
822
|
+
width: we,
|
|
823
|
+
height: S
|
|
823
824
|
});
|
|
824
|
-
return ge(n,
|
|
825
|
-
|
|
826
|
-
let a =
|
|
827
|
-
e.font = "400 14px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = l > 0 ? a : f.color, e.textAlign = "right", e.textBaseline = "middle", e.fillText(n.abbreviation ?? n.name.slice(0, 6), c - 8, s + V / 2), e.fillStyle =
|
|
825
|
+
return ge(n, we, S, (e, t) => {
|
|
826
|
+
N(r.current, A.current), P.current = [], v.forEach((n, i) => {
|
|
827
|
+
let a = De[i % De.length], o = M(t, i, b, O), s = B.top + i * (V + D), c = B.left + Oe, l = r.current.get(n.id) ?? 0, d = Math.max(n.base ?? 0, 0), p = Math.max(n.total ?? 0, 0), m = d / x * T * o, g = p / x * T * o, _ = g - m;
|
|
828
|
+
e.font = "400 14px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = l > 0 ? a : f.color, e.textAlign = "right", e.textBaseline = "middle", e.fillText(n.abbreviation ?? n.name.slice(0, 6), c - 8, s + V / 2), e.fillStyle = h(u.bd, .25), e.beginPath(), e.roundRect(c, s, T, V, 4), e.fill(), m > 0 && (l > 0 && y(e, c + m / 2, s + V / 2, m * .3, a, .1 * l), e.fillStyle = h(a, .5 + l * .15), e.beginPath(), e.roundRect(c, s, m, V, 4), e.fill()), _ > 2 && (e.fillStyle = h(a, .22 + l * .08), e.beginPath(), e.roundRect(c + m, s, _, V, [
|
|
828
829
|
0,
|
|
829
830
|
4,
|
|
830
831
|
4,
|
|
831
832
|
0
|
|
832
|
-
]), e.fill(), e.setLineDash([2, 3]), e.strokeStyle =
|
|
833
|
+
]), e.fill(), e.setLineDash([2, 3]), e.strokeStyle = h(a, .55), e.lineWidth = 1, e.beginPath(), e.moveTo(c + m, s + 3), e.lineTo(c + m, s + V - 3), e.stroke(), e.setLineDash([])), l > 0 && g > 0 && (e.strokeStyle = h(a, .5 * l), e.lineWidth = 1, e.setLineDash([]), e.beginPath(), e.roundRect(c, s, g, V, 4), e.stroke()), o > .35 && (e.globalAlpha = Math.min(1, (o - .35) / .4), e.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = l > 0 ? a : "#F7F9FA", e.textAlign = "left", e.textBaseline = "middle", e.fillText(ke(n.total ?? 0), c + g + 6, s + V / 2), e.globalAlpha = 1), E(P.current, n.id, c, s, Math.max(g, 1), V, {
|
|
833
834
|
label: n.name,
|
|
834
|
-
value: `${
|
|
835
|
-
sublabel: `Base ${
|
|
835
|
+
value: `${ke(n.total ?? 0)} total`,
|
|
836
|
+
sublabel: `Base ${ke(n.base ?? 0)} + Var ${ke(n.variation ?? 0)} · ${n.percentage ?? 0}% committed`,
|
|
836
837
|
color: a
|
|
837
838
|
});
|
|
838
839
|
});
|
|
839
|
-
let n =
|
|
840
|
-
e.textBaseline = "middle", e.font =
|
|
841
|
-
}, !0, { easing:
|
|
842
|
-
width:
|
|
843
|
-
height:
|
|
840
|
+
let n = S - 14;
|
|
841
|
+
e.textBaseline = "middle", e.font = m.font, e.textAlign = "left", e.fillStyle = h(u.blue, .5), e.beginPath(), e.roundRect(B.left + Oe, n - 3, 14, 6, 2), e.fill(), e.fillStyle = m.color, e.fillText("base value", B.left + Oe + 18, n), e.fillStyle = h(u.blue, .22), e.beginPath(), e.roundRect(B.left + Oe + 94, n - 3, 14, 6, 2), e.fill(), e.setLineDash([2, 3]), e.strokeStyle = h(u.blue, .5), e.lineWidth = .5, e.beginPath(), e.moveTo(B.left + Oe + 101, n - 3), e.lineTo(B.left + Oe + 101, n + 3), e.stroke(), e.setLineDash([]), e.fillStyle = m.color, e.fillText("approved variations", B.left + Oe + 112, n), e.font = m.font, e.textAlign = "right", e.fillStyle = m.color, e.fillText(`Portfolio: ${ke(p?.total ?? 0)}`, we - 8, n);
|
|
842
|
+
}, !0, { easing: O }), k ? /* @__PURE__ */ s(I, {
|
|
843
|
+
width: we,
|
|
844
|
+
height: Te,
|
|
844
845
|
message: "No contract data available",
|
|
845
846
|
"data-testid": t
|
|
846
847
|
}) : /* @__PURE__ */ c("div", {
|
|
847
848
|
"data-testid": t,
|
|
848
849
|
style: {
|
|
849
|
-
width:
|
|
850
|
+
width: we,
|
|
850
851
|
transition: "all 0.25s ease"
|
|
851
852
|
},
|
|
852
853
|
children: [/* @__PURE__ */ c("div", {
|
|
@@ -856,17 +857,17 @@ function ke({ data: e, "data-testid": t }) {
|
|
|
856
857
|
role: "img",
|
|
857
858
|
"aria-label": "Total contract value per contractor — horizontal bar chart",
|
|
858
859
|
style: {
|
|
859
|
-
width:
|
|
860
|
-
height:
|
|
860
|
+
width: we,
|
|
861
|
+
height: S,
|
|
861
862
|
display: "block",
|
|
862
863
|
borderRadius: 8
|
|
863
864
|
}
|
|
864
|
-
}), /* @__PURE__ */ s(
|
|
865
|
-
...
|
|
866
|
-
parentW:
|
|
867
|
-
parentH:
|
|
865
|
+
}), /* @__PURE__ */ s(C, {
|
|
866
|
+
...j,
|
|
867
|
+
parentW: we,
|
|
868
|
+
parentH: S
|
|
868
869
|
})]
|
|
869
|
-
}), g.length >
|
|
870
|
+
}), g.length > Ee && /* @__PURE__ */ s("div", {
|
|
870
871
|
style: { marginTop: 8 },
|
|
871
872
|
children: /* @__PURE__ */ s(ae, {
|
|
872
873
|
expanded: i,
|
|
@@ -877,53 +878,53 @@ function ke({ data: e, "data-testid": t }) {
|
|
|
877
878
|
}
|
|
878
879
|
//#endregion
|
|
879
880
|
//#region src/components/rankedCardLeaderboard/RankedCardLeaderboard.tsx
|
|
880
|
-
var
|
|
881
|
+
var je = 780, H = 240, Me = 12, Ne = 10, Pe = [
|
|
881
882
|
"Highest exposure",
|
|
882
883
|
"Elevated risk",
|
|
883
884
|
"Moderate exposure",
|
|
884
885
|
"Moderate exposure",
|
|
885
886
|
"Low exposure"
|
|
886
887
|
];
|
|
887
|
-
function
|
|
888
|
-
let r = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), { hoveredRef:
|
|
889
|
-
width:
|
|
888
|
+
function Fe({ items: e = [], "data-testid": t }) {
|
|
889
|
+
let r = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), { hoveredRef: m, tooltip: g, hitZonesRef: _ } = w(r, {
|
|
890
|
+
width: je,
|
|
890
891
|
height: H
|
|
891
|
-
}),
|
|
892
|
+
}), b = [...i(() => e.filter((e) => typeof e == "object" && !!e), [e])].sort((e, t) => (t.count ?? 0) - (e.count ?? 0)).slice(0, 5), S = b.reduce((e, t) => e + (t.count ?? 0), 0);
|
|
892
893
|
return n(() => {
|
|
893
894
|
let e = r.current;
|
|
894
895
|
if (!e) return;
|
|
895
|
-
let t =
|
|
896
|
+
let t = v(e, je, H);
|
|
896
897
|
o.current = 0;
|
|
897
|
-
let n = Math.min(5,
|
|
898
|
+
let n = Math.min(5, b.length), i = (je - 2 * Me - (n - 1) * Ne) / n, a = H * .84, s = H * .08, c, g = () => {
|
|
898
899
|
o.current++;
|
|
899
900
|
let e = o.current;
|
|
900
|
-
t.clearRect(0, 0,
|
|
901
|
-
let n = t ===
|
|
901
|
+
t.clearRect(0, 0, je, H), t.letterSpacing = f.letterSpacing, _.current = [], l.current.forEach((e, t) => {
|
|
902
|
+
let n = t === m.current ? 1 : 0, r = e + (n - e) * .12;
|
|
902
903
|
Math.abs(r - n) < .005 ? n === 0 ? l.current.delete(t) : l.current.set(t, 1) : l.current.set(t, r);
|
|
903
|
-
}),
|
|
904
|
-
let o = r === 0, c = r === 0 ? u.red : r === 1 ? u.amber : d[r % d.length],
|
|
905
|
-
t.fillStyle =
|
|
906
|
-
let
|
|
907
|
-
|
|
908
|
-
let
|
|
909
|
-
|
|
904
|
+
}), m.current && !l.current.has(m.current) && l.current.set(m.current, 0), b.forEach((n, r) => {
|
|
905
|
+
let o = r === 0, c = r === 0 ? u.red : r === 1 ? u.amber : d[r % d.length], m = Me + r * (i + Ne), g = l.current.get(n.id) ?? 0, v = g * 8, b = m - v / 2, x = i + v, C = o ? j(e, .04, 3e-4) * .06 + .06 : 0;
|
|
906
|
+
t.fillStyle = h(c, .08 + g * .07), t.beginPath(), t.roundRect(b, s, x, a, 6), t.fill(), t.strokeStyle = h(c, .2 + g * .4 + C), t.lineWidth = o ? 1.5 : 1, t.stroke(), (g > .01 || o) && y(t, b + x / 2, s + a / 2, x * .55, c, C + g * .14), t.font = p.font, t.textAlign = "left", t.textBaseline = "top", t.fillStyle = h(c, .5 + g * .35), t.fillText(`#${r + 1}`, b + 7, s + 6);
|
|
907
|
+
let w = Math.min(i * .28, a * .32, 72), T = b + x / 2, D = s + a * .38, O = t.createRadialGradient(T, D - w * .2, 0, T, D, w);
|
|
908
|
+
O.addColorStop(0, h(c, .5 + g * .2)), O.addColorStop(1, h(c, .2 + g * .1)), t.beginPath(), t.arc(T, D, w, 0, Math.PI * 2), t.fillStyle = O, t.fill(), t.strokeStyle = h(c, .4 + g * .3), t.lineWidth = 1, t.stroke(), t.font = p.font, t.textAlign = "center", t.textBaseline = "middle", t.fillStyle = h(u.t1, .9), t.fillText(n.abbreviation ?? n.name.slice(0, 6), T, D), t.font = p.font, t.textBaseline = "alphabetic", t.fillStyle = h(c, .9 + g * .1), t.fillText(String(n.count ?? 0), T, s + a * .76), t.font = f.font, t.fillStyle = f.color, t.fillText("open EWs", T, s + a * .88);
|
|
909
|
+
let k = Math.round((n.count ?? 0) / (S || 1) * 100), A = Pe[r] ?? "Low exposure";
|
|
910
|
+
E(_.current, n.id, m, s, i, a, {
|
|
910
911
|
label: n.name,
|
|
911
|
-
value: `${n.count ?? 0} open · ${
|
|
912
|
-
sublabel: `Rank #${r + 1} · ${
|
|
912
|
+
value: `${n.count ?? 0} open · ${k}% of total`,
|
|
913
|
+
sublabel: `Rank #${r + 1} · ${A}`,
|
|
913
914
|
color: c
|
|
914
915
|
});
|
|
915
|
-
}),
|
|
916
|
+
}), x(t, je, H, e, .015), c = requestAnimationFrame(g);
|
|
916
917
|
};
|
|
917
|
-
return
|
|
918
|
-
}, [
|
|
919
|
-
width:
|
|
918
|
+
return g(), () => cancelAnimationFrame(c);
|
|
919
|
+
}, [b, S]), b.length === 0 ? /* @__PURE__ */ s(I, {
|
|
920
|
+
width: je,
|
|
920
921
|
height: H,
|
|
921
922
|
"data-testid": t
|
|
922
923
|
}) : /* @__PURE__ */ c("div", {
|
|
923
924
|
"data-testid": t,
|
|
924
925
|
style: {
|
|
925
926
|
position: "relative",
|
|
926
|
-
width:
|
|
927
|
+
width: je,
|
|
927
928
|
height: H
|
|
928
929
|
},
|
|
929
930
|
children: [/* @__PURE__ */ s("canvas", {
|
|
@@ -931,14 +932,14 @@ function Pe({ items: e = [], "data-testid": t }) {
|
|
|
931
932
|
role: "img",
|
|
932
933
|
"aria-label": "Contractor rank — open EW count per contractor",
|
|
933
934
|
style: {
|
|
934
|
-
width:
|
|
935
|
+
width: je,
|
|
935
936
|
height: H,
|
|
936
937
|
display: "block",
|
|
937
938
|
borderRadius: 8
|
|
938
939
|
}
|
|
939
|
-
}), /* @__PURE__ */ s(
|
|
940
|
-
...
|
|
941
|
-
parentW:
|
|
940
|
+
}), /* @__PURE__ */ s(C, {
|
|
941
|
+
...g,
|
|
942
|
+
parentW: je,
|
|
942
943
|
parentH: H
|
|
943
944
|
})]
|
|
944
945
|
});
|
|
@@ -946,44 +947,44 @@ function Pe({ items: e = [], "data-testid": t }) {
|
|
|
946
947
|
//#endregion
|
|
947
948
|
//#region src/components/dotMatrixChart/DotMatrixChart.tsx
|
|
948
949
|
var U = 680, W = 260;
|
|
949
|
-
function
|
|
950
|
-
let r = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), { hoveredRef: d, tooltip:
|
|
950
|
+
function Ie({ items: e = [], "data-testid": t }) {
|
|
951
|
+
let r = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), { hoveredRef: d, tooltip: p, hitZonesRef: m } = w(r, {
|
|
951
952
|
width: U,
|
|
952
953
|
height: W
|
|
953
|
-
}),
|
|
954
|
+
}), g = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
954
955
|
return n(() => {
|
|
955
956
|
let e = r.current;
|
|
956
957
|
if (!e) return;
|
|
957
|
-
let t =
|
|
958
|
+
let t = v(e, U, W);
|
|
958
959
|
o.current = 0;
|
|
959
|
-
let n =
|
|
960
|
+
let n = g.length, i = Math.max(...g.map((e) => e.count), 1), a = i, s = U * .05, c = W * .1, p = U * .9 / n, _ = W * .7 / a, S = g.reduce((e, t) => e + t.count, 0), C, w = () => {
|
|
960
961
|
o.current++;
|
|
961
962
|
let e = o.current;
|
|
962
|
-
t.clearRect(0, 0, U, W),
|
|
963
|
+
t.clearRect(0, 0, U, W), m.current = [], l.current.forEach((e, t) => {
|
|
963
964
|
let n = t === d.current ? 1 : 0, r = e + (n - e) * .12;
|
|
964
965
|
Math.abs(r - n) < .005 ? n === 0 ? l.current.delete(t) : l.current.set(t, 1) : l.current.set(t, r);
|
|
965
|
-
}), d.current && !l.current.has(d.current) && l.current.set(d.current, 0),
|
|
966
|
-
let o = n.count === i, d =
|
|
966
|
+
}), d.current && !l.current.has(d.current) && l.current.set(d.current, 0), b(t, U, W, e, 40, h(u.blue, .04)), g.forEach((n, r) => {
|
|
967
|
+
let o = n.count === i, d = u.blue, g = l.current.get(`${n.category}-col`) ?? 0;
|
|
967
968
|
for (let u = 0; u < a; u++) {
|
|
968
|
-
let a = s + r *
|
|
969
|
+
let a = s + r * p + p / 2, f = c + u * _ + _ / 2, v = Math.min(p, _) * .38;
|
|
969
970
|
if (u >= i - n.count) {
|
|
970
|
-
let i =
|
|
971
|
-
(o ||
|
|
971
|
+
let i = v * (1 + (j(e, .04, 5e-4) + Math.sin(r * .6 + u * 1.2) * .3) * .12);
|
|
972
|
+
(o || g > .01) && y(t, a, f, i * 3, d, (o ? .2 : .1) + g * .1), t.beginPath(), t.arc(a, f, i, 0, Math.PI * 2), t.fillStyle = h(d, o ? .8 : .5 + g * .2), t.fill();
|
|
972
973
|
let s = `${n.category}-${u}`;
|
|
973
|
-
|
|
974
|
+
T(m.current, s, a, f, v + 4, {
|
|
974
975
|
label: n.fullName,
|
|
975
976
|
value: `${n.count} Early Warnings`,
|
|
976
|
-
sublabel: `${Math.round(n.count /
|
|
977
|
+
sublabel: `${Math.round(n.count / S * 100)}% of total`,
|
|
977
978
|
color: d
|
|
978
979
|
}), l.current.get(`${n.category}-col`);
|
|
979
|
-
} else t.beginPath(), t.arc(a,
|
|
980
|
+
} else t.beginPath(), t.arc(a, f, 1, 0, Math.PI * 2), t.fillStyle = h(d, .08), t.fill();
|
|
980
981
|
}
|
|
981
|
-
let
|
|
982
|
-
t.font =
|
|
983
|
-
}),
|
|
982
|
+
let v = c + a * _ + 16;
|
|
983
|
+
t.font = f.font, t.textAlign = "center", t.textBaseline = "alphabetic", t.fillStyle = o ? u.blue : h(u.t2, .65), t.fillText(n.category, s + r * p + p / 2, v);
|
|
984
|
+
}), x(t, U, W, e, .015), C = requestAnimationFrame(w);
|
|
984
985
|
};
|
|
985
|
-
return
|
|
986
|
-
}, [
|
|
986
|
+
return w(), () => cancelAnimationFrame(C);
|
|
987
|
+
}, [g]), g.length === 0 ? /* @__PURE__ */ s(I, {
|
|
987
988
|
width: U,
|
|
988
989
|
height: W,
|
|
989
990
|
"data-testid": t
|
|
@@ -1004,8 +1005,8 @@ function Fe({ items: e = [], "data-testid": t }) {
|
|
|
1004
1005
|
display: "block",
|
|
1005
1006
|
borderRadius: 8
|
|
1006
1007
|
}
|
|
1007
|
-
}), /* @__PURE__ */ s(
|
|
1008
|
-
...
|
|
1008
|
+
}), /* @__PURE__ */ s(C, {
|
|
1009
|
+
...p,
|
|
1009
1010
|
parentW: U,
|
|
1010
1011
|
parentH: W
|
|
1011
1012
|
})]
|
|
@@ -1013,8 +1014,8 @@ function Fe({ items: e = [], "data-testid": t }) {
|
|
|
1013
1014
|
}
|
|
1014
1015
|
//#endregion
|
|
1015
1016
|
//#region src/components/lineChart/LineChart.tsx
|
|
1016
|
-
function
|
|
1017
|
-
return /* @__PURE__ */ s(
|
|
1017
|
+
function Le({ rows: e = [], className: t, colors: n }) {
|
|
1018
|
+
return /* @__PURE__ */ s(ee, {
|
|
1018
1019
|
rows: e,
|
|
1019
1020
|
variant: "line",
|
|
1020
1021
|
className: t,
|
|
@@ -1023,7 +1024,7 @@ function Ie({ rows: e = [], className: t, colors: n }) {
|
|
|
1023
1024
|
}
|
|
1024
1025
|
//#endregion
|
|
1025
1026
|
//#region src/components/constants.ts
|
|
1026
|
-
var
|
|
1027
|
+
var Re = [
|
|
1027
1028
|
"#4C93D9",
|
|
1028
1029
|
"#5DA537",
|
|
1029
1030
|
"#F3862C",
|
|
@@ -1031,7 +1032,7 @@ var Le = [
|
|
|
1031
1032
|
"#A0B724",
|
|
1032
1033
|
"#EEBF3B",
|
|
1033
1034
|
"#3C45D1"
|
|
1034
|
-
],
|
|
1035
|
+
], ze = {
|
|
1035
1036
|
nodes: [
|
|
1036
1037
|
{
|
|
1037
1038
|
id: "supplier-x",
|
|
@@ -1074,8 +1075,8 @@ var Le = [
|
|
|
1074
1075
|
};
|
|
1075
1076
|
//#endregion
|
|
1076
1077
|
//#region src/components/miniBars/MiniBars.tsx
|
|
1077
|
-
function
|
|
1078
|
-
let r = n?.slices ??
|
|
1078
|
+
function Be({ rows: e = [], className: t, colors: n }) {
|
|
1079
|
+
let r = n?.slices ?? Re;
|
|
1079
1080
|
return /* @__PURE__ */ s("div", {
|
|
1080
1081
|
className: ["d3-mini-bars", t].filter(Boolean).join(" "),
|
|
1081
1082
|
children: e.map(([e, t, n], i) => /* @__PURE__ */ c("div", {
|
|
@@ -1101,7 +1102,7 @@ function ze({ rows: e = [], className: t, colors: n }) {
|
|
|
1101
1102
|
width: Math.max(0, Math.min(100, t)),
|
|
1102
1103
|
height: "12",
|
|
1103
1104
|
rx: "6",
|
|
1104
|
-
className: `d3-mini-fill tone-${i %
|
|
1105
|
+
className: `d3-mini-fill tone-${i % Re.length}`,
|
|
1105
1106
|
fill: r[i % r.length]
|
|
1106
1107
|
})]
|
|
1107
1108
|
})
|
|
@@ -1113,115 +1114,115 @@ function ze({ rows: e = [], className: t, colors: n }) {
|
|
|
1113
1114
|
}
|
|
1114
1115
|
//#endregion
|
|
1115
1116
|
//#region src/components/radialFanTreeChart/RadialFanTreeChart.tsx
|
|
1116
|
-
var
|
|
1117
|
-
function
|
|
1118
|
-
let o = a(null), l = a(/* @__PURE__ */ new Map()),
|
|
1119
|
-
width:
|
|
1120
|
-
height:
|
|
1117
|
+
var Ve = 680, He = 320, Ue = 60, We = 28;
|
|
1118
|
+
function Ge({ total: e = 0, items: t = [], "data-testid": r }) {
|
|
1119
|
+
let o = a(null), l = a(/* @__PURE__ */ new Map()), m = a(0), g = i(() => t.filter((e) => typeof e == "object" && !!e), [t]), _ = i(() => Math.max(He, Ue + Math.max(0, g.length - 1) * We), [g.length]), { hoveredRef: b, tooltip: x, hitZonesRef: S } = w(o, {
|
|
1120
|
+
width: Ve,
|
|
1121
|
+
height: _
|
|
1121
1122
|
});
|
|
1122
1123
|
return n(() => {
|
|
1123
1124
|
let t = o.current;
|
|
1124
1125
|
if (!t) return;
|
|
1125
|
-
let n =
|
|
1126
|
-
|
|
1127
|
-
let r =
|
|
1126
|
+
let n = v(t, Ve, _);
|
|
1127
|
+
m.current = 0;
|
|
1128
|
+
let r = _ / 2, i = Ve - 80, a = Math.max(...g.map((e) => e.count ?? 0)), s = (_ - 60) / (g.length - 1), c = g.map((e, t) => ({
|
|
1128
1129
|
x: i,
|
|
1129
1130
|
y: 30 + t * s
|
|
1130
|
-
})),
|
|
1131
|
-
|
|
1132
|
-
let t =
|
|
1133
|
-
n.clearRect(0, 0,
|
|
1134
|
-
let o =
|
|
1135
|
-
|
|
1136
|
-
let
|
|
1137
|
-
if (
|
|
1138
|
-
let
|
|
1131
|
+
})), x, C = () => {
|
|
1132
|
+
m.current++;
|
|
1133
|
+
let t = m.current;
|
|
1134
|
+
n.clearRect(0, 0, Ve, _), n.letterSpacing = f.letterSpacing;
|
|
1135
|
+
let o = D(Math.min(t / 72, 1));
|
|
1136
|
+
N(l.current, b.current), S.current = [], y(n, 88, r, 48 * o, u.blue, .15 * o), g.forEach((t, s) => {
|
|
1137
|
+
let m = d[s % d.length], _ = M(o, s, g.length, D), v = c[s], b = l.current.get(t.id) ?? 0, x = Math.max(1.5, (t.count ?? 0) / a * 6);
|
|
1138
|
+
if (_ < .01) return;
|
|
1139
|
+
let C = 88 + (i - 88) * .4, w = r, E = 88 + (i - 88) * .6, O = v.y, k = _;
|
|
1139
1140
|
n.beginPath();
|
|
1140
1141
|
for (let e = 0; e <= 40; e++) {
|
|
1141
|
-
let t = e / 40 *
|
|
1142
|
+
let t = e / 40 * k, i = (1 - t) ** 3 * 88 + 3 * (1 - t) ** 2 * t * C + 3 * (1 - t) * t ** 2 * E + t ** 3 * v.x, a = (1 - t) ** 3 * r + 3 * (1 - t) ** 2 * t * w + 3 * (1 - t) * t ** 2 * O + t ** 3 * v.y;
|
|
1142
1143
|
e === 0 ? n.moveTo(i, a) : n.lineTo(i, a);
|
|
1143
1144
|
}
|
|
1144
|
-
if (n.strokeStyle = m
|
|
1145
|
-
let r = Math.min(1, (
|
|
1146
|
-
|
|
1145
|
+
if (n.strokeStyle = h(m, b > 0 ? .8 : .45), n.lineWidth = x * (b > 0 ? 1.3 : 1), n.stroke(), _ > .85) {
|
|
1146
|
+
let r = Math.min(1, (_ - .85) / .15), i = 4 + (t.count ?? 0) / a * 12;
|
|
1147
|
+
y(n, v.x, v.y, i * 2.5, m, (.25 + b * .2) * r), n.beginPath(), n.arc(v.x, v.y, i * r, 0, Math.PI * 2), n.fillStyle = h(m, (.7 + b * .2) * r), n.fill(), T(S.current, t.id, v.x, v.y, i + 8, {
|
|
1147
1148
|
label: t.name,
|
|
1148
1149
|
value: `${t.count ?? 0} NCEs raised`,
|
|
1149
1150
|
sublabel: `${Math.round((t.count ?? 0) / e * 100)}% of all NCEs`,
|
|
1150
|
-
color:
|
|
1151
|
+
color: m
|
|
1151
1152
|
}), n.globalAlpha = r, n.font = f.font, n.textAlign = "left";
|
|
1152
|
-
let o = t.abbreviation ?? t.name.slice(0, 6), s = ` ${t.count ?? 0}`, c =
|
|
1153
|
-
n.fillStyle =
|
|
1153
|
+
let o = t.abbreviation ?? t.name.slice(0, 6), s = ` ${t.count ?? 0}`, c = v.x + i + 6, l = v.y + 4;
|
|
1154
|
+
n.fillStyle = b > 0 ? m : h(u.t2, .85), n.fillText(o, c, l);
|
|
1154
1155
|
let d = n.measureText(o).width;
|
|
1155
|
-
n.fillStyle =
|
|
1156
|
+
n.font = p.font, n.fillStyle = b > 0 ? m : u.t1, n.fillText(s, c + d, l), n.globalAlpha = 1;
|
|
1156
1157
|
}
|
|
1157
|
-
}), n.beginPath(), n.arc(88, r, 32 * o, 0, Math.PI * 2), n.fillStyle = u.bgL, n.fill(), n.strokeStyle =
|
|
1158
|
+
}), n.beginPath(), n.arc(88, r, 32 * o, 0, Math.PI * 2), n.fillStyle = u.bgL, n.fill(), n.strokeStyle = h(u.blue, .6 * o), n.lineWidth = 2, n.stroke(), o > .4 && (n.globalAlpha = Math.min(1, (o - .4) / .4), n.font = "500 24px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = u.t1, n.textAlign = "center", n.fillText(String(e), 88, r + 5), n.font = f.font, n.fillStyle = f.color, n.fillText("NCEs", 88, r + 18), n.globalAlpha = 1), x = requestAnimationFrame(C);
|
|
1158
1159
|
};
|
|
1159
|
-
return
|
|
1160
|
+
return C(), () => cancelAnimationFrame(x);
|
|
1160
1161
|
}, [
|
|
1161
1162
|
e,
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
]),
|
|
1165
|
-
width:
|
|
1166
|
-
height:
|
|
1163
|
+
g,
|
|
1164
|
+
_
|
|
1165
|
+
]), g.length === 0 ? /* @__PURE__ */ s(I, {
|
|
1166
|
+
width: Ve,
|
|
1167
|
+
height: He,
|
|
1167
1168
|
"data-testid": r
|
|
1168
1169
|
}) : /* @__PURE__ */ c("div", {
|
|
1169
1170
|
"data-testid": r,
|
|
1170
1171
|
style: {
|
|
1171
1172
|
position: "relative",
|
|
1172
|
-
width:
|
|
1173
|
-
height:
|
|
1173
|
+
width: Ve,
|
|
1174
|
+
height: _
|
|
1174
1175
|
},
|
|
1175
1176
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1176
1177
|
ref: o,
|
|
1177
1178
|
role: "img",
|
|
1178
1179
|
"aria-label": "NCE fault tree — NCEs per contractor as branching tree",
|
|
1179
1180
|
style: {
|
|
1180
|
-
width:
|
|
1181
|
-
height:
|
|
1181
|
+
width: Ve,
|
|
1182
|
+
height: _,
|
|
1182
1183
|
display: "block"
|
|
1183
1184
|
}
|
|
1184
|
-
}), /* @__PURE__ */ s(
|
|
1185
|
-
...
|
|
1186
|
-
parentW:
|
|
1187
|
-
parentH:
|
|
1185
|
+
}), /* @__PURE__ */ s(C, {
|
|
1186
|
+
...x,
|
|
1187
|
+
parentW: Ve,
|
|
1188
|
+
parentH: _
|
|
1188
1189
|
})]
|
|
1189
1190
|
});
|
|
1190
1191
|
}
|
|
1191
1192
|
//#endregion
|
|
1192
1193
|
//#region src/components/pieChart/PieChart.tsx
|
|
1193
|
-
var
|
|
1194
|
-
function
|
|
1195
|
-
let o = a(null), f = a(/* @__PURE__ */ new Map()), p = a(0),
|
|
1196
|
-
width:
|
|
1197
|
-
height:
|
|
1194
|
+
var Ke = 192, qe = Ke, Je = Ke + 80;
|
|
1195
|
+
function Ye({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
1196
|
+
let o = a(null), f = a(/* @__PURE__ */ new Map()), p = a(0), m = i?.slices ?? d, { hoveredRef: g, tooltip: b, hitZonesRef: x } = w(o, {
|
|
1197
|
+
width: qe,
|
|
1198
|
+
height: Je
|
|
1198
1199
|
});
|
|
1199
1200
|
return n(() => {
|
|
1200
1201
|
let n = o.current;
|
|
1201
1202
|
if (!n) return;
|
|
1202
|
-
let r =
|
|
1203
|
+
let r = v(n, qe, Je);
|
|
1203
1204
|
p.current = 0;
|
|
1204
|
-
let i =
|
|
1205
|
+
let i = qe / 2, a = Ke / 2, s = Ke * .4, c = t === "donut" ? Ke * .21 : 0, l = e.reduce((e, t) => e + (t.pricing ?? 0), 0) || 1, d, b = () => {
|
|
1205
1206
|
p.current++;
|
|
1206
1207
|
let n = p.current;
|
|
1207
|
-
r.clearRect(0, 0,
|
|
1208
|
+
r.clearRect(0, 0, qe, Je);
|
|
1208
1209
|
let o = 1 - (1 - Math.min(n / 48, 1)) ** 3;
|
|
1209
|
-
|
|
1210
|
-
let
|
|
1210
|
+
N(f.current, g.current), x.current = [];
|
|
1211
|
+
let v = -Math.PI / 2;
|
|
1211
1212
|
e.forEach((e, t) => {
|
|
1212
|
-
let d = (e.pricing ?? 0) / l, p = d * Math.PI * 2 * o, g =
|
|
1213
|
-
|
|
1213
|
+
let d = (e.pricing ?? 0) / l, p = d * Math.PI * 2 * o, g = v + p, _ = m[t % m.length], b = f.current.get(e.id ?? `sl-${t}`) ?? 0, S = v + p / 2, C = (s + c) / 2, w = i + Math.cos(S) * C, E = a + Math.sin(S) * C, D = (s - c) / 2 + 8;
|
|
1214
|
+
T(x.current, e.id ?? `sl-${t}`, w, E, D, {
|
|
1214
1215
|
label: e.vendor,
|
|
1215
1216
|
value: `${e.pricing ?? 0} (${Math.round(d * 100)}%)`,
|
|
1216
|
-
color:
|
|
1217
|
-
}), b > 0 &&
|
|
1218
|
-
let O =
|
|
1219
|
-
r.beginPath(), r.moveTo(i + Math.cos(
|
|
1220
|
-
}), t === "donut" && e.length > 0 &&
|
|
1221
|
-
let S =
|
|
1217
|
+
color: _
|
|
1218
|
+
}), b > 0 && y(r, w, E, D * 2 * b, _, .2 * b);
|
|
1219
|
+
let O = j(n, .03, 3e-4), k = s + b * 6 + (b > 0 ? O * 2 : 0);
|
|
1220
|
+
r.beginPath(), r.moveTo(i + Math.cos(v) * c, a + Math.sin(v) * c), r.arc(i, a, k, v, g), c > 0 ? r.arc(i, a, c, g, v, !0) : r.lineTo(i, a), r.closePath(), r.fillStyle = h(_, .7 + b * .2), r.fill(), r.strokeStyle = h(u.bg, .8), r.lineWidth = 1.5, r.stroke(), v = g;
|
|
1221
|
+
}), t === "donut" && e.length > 0 && y(r, i, a, c * .8, u.blue, .06);
|
|
1222
|
+
let S = Ke + 12;
|
|
1222
1223
|
e.forEach((e, t) => {
|
|
1223
|
-
let n =
|
|
1224
|
-
r.beginPath(), r.arc(8, o, 4, 0, Math.PI * 2), r.fillStyle =
|
|
1224
|
+
let n = m[t % m.length], i = (e.pricing ?? 0) / l, a = f.current.get(e.id ?? `sl-${t}`) ?? 0, o = S + t * 18;
|
|
1225
|
+
r.beginPath(), r.arc(8, o, 4, 0, Math.PI * 2), r.fillStyle = h(n, .8 + a * .2), r.fill(), r.font = "9px 'JetBrains Mono', monospace", r.fillStyle = h(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 = _(u.t3, n, a), r.textAlign = "right", r.fillText(`${e.pricing ?? 0} (${Math.round(i * 100)}%)`, qe - 4, o + 3.5);
|
|
1225
1226
|
}), d = requestAnimationFrame(b);
|
|
1226
1227
|
};
|
|
1227
1228
|
return b(), () => cancelAnimationFrame(d);
|
|
@@ -1229,36 +1230,36 @@ function Je({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
|
1229
1230
|
e,
|
|
1230
1231
|
t,
|
|
1231
1232
|
i,
|
|
1232
|
-
|
|
1233
|
+
m
|
|
1233
1234
|
]), /* @__PURE__ */ s(l, {
|
|
1234
1235
|
className: ["canvas-pie-frame", r].filter(Boolean).join(" "),
|
|
1235
1236
|
children: /* @__PURE__ */ c("div", {
|
|
1236
1237
|
style: {
|
|
1237
1238
|
position: "relative",
|
|
1238
|
-
width:
|
|
1239
|
-
height:
|
|
1239
|
+
width: qe,
|
|
1240
|
+
height: Je
|
|
1240
1241
|
},
|
|
1241
1242
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1242
1243
|
ref: o,
|
|
1243
1244
|
role: "img",
|
|
1244
1245
|
"aria-label": `${t} chart`,
|
|
1245
1246
|
style: {
|
|
1246
|
-
width:
|
|
1247
|
-
height:
|
|
1247
|
+
width: qe,
|
|
1248
|
+
height: Je,
|
|
1248
1249
|
display: "block",
|
|
1249
1250
|
borderRadius: 8
|
|
1250
1251
|
}
|
|
1251
|
-
}), /* @__PURE__ */ s(
|
|
1252
|
+
}), /* @__PURE__ */ s(C, {
|
|
1252
1253
|
...b,
|
|
1253
|
-
parentW:
|
|
1254
|
-
parentH:
|
|
1254
|
+
parentW: qe,
|
|
1255
|
+
parentH: Je
|
|
1255
1256
|
})]
|
|
1256
1257
|
})
|
|
1257
1258
|
});
|
|
1258
1259
|
}
|
|
1259
1260
|
//#endregion
|
|
1260
1261
|
//#region src/components/sankey/SankeySvg.tsx
|
|
1261
|
-
function
|
|
1262
|
+
function Xe(e, t, n, r) {
|
|
1262
1263
|
let i = new Set(t.map((e) => e.source)), a = new Set(t.map((e) => e.target)), o = /* @__PURE__ */ new Map(), s = [];
|
|
1263
1264
|
for (e.forEach((e) => {
|
|
1264
1265
|
i.has(e.id) && !a.has(e.id) && s.push({
|
|
@@ -1303,38 +1304,38 @@ function Ye(e, t, n, r) {
|
|
|
1303
1304
|
});
|
|
1304
1305
|
}), f;
|
|
1305
1306
|
}
|
|
1306
|
-
function
|
|
1307
|
-
let
|
|
1307
|
+
function Ze({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f, selectedEntity: p, className: m, colors: g }) {
|
|
1308
|
+
let _ = a(null), b = a(/* @__PURE__ */ new Map()), S = a(0), D = a([]), O = g?.nodes ?? d, k = g?.links ?? u.bd, A = g?.activeLinks ?? u.blue, M = g?.activeNodes ?? u.blue, P = i(() => Xe(e, t, r, o), [
|
|
1308
1309
|
e,
|
|
1309
1310
|
t,
|
|
1310
1311
|
r,
|
|
1311
1312
|
o
|
|
1312
|
-
]), { hoveredRef:
|
|
1313
|
+
]), { hoveredRef: F, tooltip: ee, hitZonesRef: te } = w(_, {
|
|
1313
1314
|
width: r,
|
|
1314
1315
|
height: o
|
|
1315
1316
|
});
|
|
1316
1317
|
return n(() => {
|
|
1317
|
-
let n =
|
|
1318
|
+
let n = _.current;
|
|
1318
1319
|
if (!n) return;
|
|
1319
|
-
let i =
|
|
1320
|
-
|
|
1320
|
+
let i = v(n, r, o);
|
|
1321
|
+
S.current = 0, D.current = [];
|
|
1321
1322
|
let a = t.length > 0 ? Math.max(...t.map((e) => e.value)) : 1, s, c = () => {
|
|
1322
|
-
|
|
1323
|
-
let n =
|
|
1323
|
+
S.current++;
|
|
1324
|
+
let n = S.current;
|
|
1324
1325
|
i.clearRect(0, 0, r, o);
|
|
1325
1326
|
let l = 1 - (1 - Math.min(n / 56, 1)) ** 3;
|
|
1326
|
-
|
|
1327
|
-
let r =
|
|
1327
|
+
N(b.current, F.current), te.current = [], t.forEach((e, t) => {
|
|
1328
|
+
let r = P.get(e.source), o = P.get(e.target);
|
|
1328
1329
|
if (!r || !o) return;
|
|
1329
|
-
let s = !!p && (e.source === p || e.target === p), c = s ?
|
|
1330
|
+
let s = !!p && (e.source === p || e.target === p), c = s ? A : k, d = s ? .5 : .2, f = Math.max(3, e.value / a * 36 * l), m = f / 2, g = r.x + r.w, _ = r.y + r.h / 2, v = o.x, y = o.y + o.h / 2, b = (g + v) / 2;
|
|
1330
1331
|
for (let e = 0; e < 30; e++) {
|
|
1331
|
-
let r = e / 30, a = (e + 1) / 30, o = 1 - r, s = 1 - a, l = o * o * g + 2 * o * r * b + r * r * v, u = o * o * _ + 2 * o * r * _ + r * r * y, f = s * s * g + 2 * s * a * b + a * a * v, p = s * s * _ + 2 * s * a * _ + a * a * y, x =
|
|
1332
|
-
i.beginPath(), i.moveTo(l, u -
|
|
1332
|
+
let r = e / 30, a = (e + 1) / 30, o = 1 - r, s = 1 - a, l = o * o * g + 2 * o * r * b + r * r * v, u = o * o * _ + 2 * o * r * _ + r * r * y, f = s * s * g + 2 * s * a * b + a * a * v, p = s * s * _ + 2 * s * a * _ + a * a * y, x = j(n + r * 120 + t * 40, .025, 3e-4) * 1.2;
|
|
1333
|
+
i.beginPath(), i.moveTo(l, u - m + x), i.lineTo(f, p - m + x), i.lineTo(f, p + m + x), i.lineTo(l, u + m + x), i.closePath(), i.fillStyle = h(c, d * (.5 + r * .5)), i.fill();
|
|
1333
1334
|
}
|
|
1334
|
-
|
|
1335
|
+
T(te.current, `link-${t}`, b, (_ + y) / 2, f + 6, {
|
|
1335
1336
|
label: `${e.source} → ${e.target}`,
|
|
1336
1337
|
value: String(e.value),
|
|
1337
|
-
color: s ?
|
|
1338
|
+
color: s ? A : u.blue
|
|
1338
1339
|
}), Math.random() < .08 && D.current.push({
|
|
1339
1340
|
linkIdx: t,
|
|
1340
1341
|
prog: 0,
|
|
@@ -1343,27 +1344,27 @@ function Xe({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f,
|
|
|
1343
1344
|
sz: 1 + Math.random()
|
|
1344
1345
|
});
|
|
1345
1346
|
}), e.forEach((e, t) => {
|
|
1346
|
-
let r =
|
|
1347
|
+
let r = P.get(e.id);
|
|
1347
1348
|
if (!r) return;
|
|
1348
|
-
let a = p === e.id, o =
|
|
1349
|
-
|
|
1349
|
+
let a = p === e.id, o = F.current === `node-${t}`, s = b.current.get(`node-${t}`) ?? 0, c = a ? M : O[t % O.length];
|
|
1350
|
+
E(te.current, `node-${t}`, r.x, r.y, r.w, r.h, {
|
|
1350
1351
|
label: e.name,
|
|
1351
1352
|
value: e.valueLabel ?? e.id,
|
|
1352
1353
|
color: c
|
|
1353
|
-
}), (s > 0 || a) &&
|
|
1354
|
-
let l = a ?
|
|
1355
|
-
i.fillStyle =
|
|
1354
|
+
}), (s > 0 || a) && y(i, r.x + r.w / 2, r.y + r.h / 2, r.w * 2, c, .2 * Math.max(s, a ? .6 : 0));
|
|
1355
|
+
let l = a ? j(n, .03, 3e-4) * .15 : 0;
|
|
1356
|
+
i.fillStyle = h(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 = h(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());
|
|
1356
1357
|
let d = r.x + r.w + 8;
|
|
1357
|
-
i.font = `${a || o ? "bold " : ""}10px 'JetBrains Mono', monospace`, i.fillStyle =
|
|
1358
|
+
i.font = `${a || o ? "bold " : ""}10px 'JetBrains Mono', monospace`, i.fillStyle = h(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 = h(c, .5 + s * .2), i.fillText(e.valueLabel, d, r.y + r.h / 2 + 17));
|
|
1358
1359
|
}), D.current = D.current.filter((e) => {
|
|
1359
1360
|
if (e.prog += e.speed, e.prog > 1) return !1;
|
|
1360
1361
|
let n = t[e.linkIdx];
|
|
1361
1362
|
if (!n) return !1;
|
|
1362
|
-
let r =
|
|
1363
|
+
let r = P.get(n.source), a = P.get(n.target);
|
|
1363
1364
|
if (!r || !a) return !1;
|
|
1364
|
-
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,
|
|
1365
|
-
return i.beginPath(), i.arc(p,
|
|
1366
|
-
}), D.current.length > 150 && (D.current = D.current.slice(-150)),
|
|
1365
|
+
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, _ = Math.sin(e.prog * Math.PI) * .5, v = g?.links ?? u.blue;
|
|
1366
|
+
return i.beginPath(), i.arc(p, m, e.sz, 0, Math.PI * 2), i.fillStyle = h(v, _), i.fill(), !0;
|
|
1367
|
+
}), D.current.length > 150 && (D.current = D.current.slice(-150)), x(i, r, o, n, .01), s = requestAnimationFrame(c);
|
|
1367
1368
|
};
|
|
1368
1369
|
return c(), () => {
|
|
1369
1370
|
cancelAnimationFrame(s), D.current = [];
|
|
@@ -1375,9 +1376,9 @@ function Xe({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f,
|
|
|
1375
1376
|
o,
|
|
1376
1377
|
p,
|
|
1377
1378
|
g,
|
|
1378
|
-
|
|
1379
|
+
P
|
|
1379
1380
|
]), /* @__PURE__ */ s(l, {
|
|
1380
|
-
className: ["canvas-sankey-frame",
|
|
1381
|
+
className: ["canvas-sankey-frame", m].filter(Boolean).join(" "),
|
|
1381
1382
|
children: /* @__PURE__ */ c("div", {
|
|
1382
1383
|
role: "img",
|
|
1383
1384
|
"aria-label": f,
|
|
@@ -1387,15 +1388,15 @@ function Xe({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f,
|
|
|
1387
1388
|
height: o
|
|
1388
1389
|
},
|
|
1389
1390
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1390
|
-
ref:
|
|
1391
|
+
ref: _,
|
|
1391
1392
|
style: {
|
|
1392
1393
|
width: r,
|
|
1393
1394
|
height: o,
|
|
1394
1395
|
display: "block",
|
|
1395
1396
|
borderRadius: 8
|
|
1396
1397
|
}
|
|
1397
|
-
}), /* @__PURE__ */ s(
|
|
1398
|
-
...
|
|
1398
|
+
}), /* @__PURE__ */ s(C, {
|
|
1399
|
+
...ee,
|
|
1399
1400
|
parentW: r,
|
|
1400
1401
|
parentH: o
|
|
1401
1402
|
})]
|
|
@@ -1404,7 +1405,7 @@ function Xe({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f,
|
|
|
1404
1405
|
}
|
|
1405
1406
|
//#endregion
|
|
1406
1407
|
//#region src/canvas/CausalFlowCanvas.tsx
|
|
1407
|
-
var
|
|
1408
|
+
var Qe = [
|
|
1408
1409
|
{
|
|
1409
1410
|
x: .13,
|
|
1410
1411
|
y: .48
|
|
@@ -1437,16 +1438,15 @@ var Ze = [
|
|
|
1437
1438
|
x: .92,
|
|
1438
1439
|
y: .22
|
|
1439
1440
|
}
|
|
1440
|
-
],
|
|
1441
|
+
], $e = [
|
|
1441
1442
|
u.blue,
|
|
1442
|
-
u.cyan,
|
|
1443
1443
|
u.orange,
|
|
1444
1444
|
u.red,
|
|
1445
1445
|
u.purple,
|
|
1446
1446
|
u.green,
|
|
1447
1447
|
u.amber,
|
|
1448
1448
|
u.t2
|
|
1449
|
-
],
|
|
1449
|
+
], et = [
|
|
1450
1450
|
26,
|
|
1451
1451
|
24,
|
|
1452
1452
|
24,
|
|
@@ -1456,21 +1456,21 @@ var Ze = [
|
|
|
1456
1456
|
22,
|
|
1457
1457
|
22
|
|
1458
1458
|
];
|
|
1459
|
-
function
|
|
1459
|
+
function tt(e, t) {
|
|
1460
1460
|
let n = 1 - t;
|
|
1461
1461
|
return {
|
|
1462
1462
|
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,
|
|
1463
1463
|
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
|
|
1464
1464
|
};
|
|
1465
1465
|
}
|
|
1466
|
-
function
|
|
1466
|
+
function nt(e, t) {
|
|
1467
1467
|
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;
|
|
1468
1468
|
return {
|
|
1469
1469
|
x: -i / a,
|
|
1470
1470
|
y: r / a
|
|
1471
1471
|
};
|
|
1472
1472
|
}
|
|
1473
|
-
function
|
|
1473
|
+
function rt(e, t) {
|
|
1474
1474
|
let n = t.x - e.x, r = t.y - e.y;
|
|
1475
1475
|
return {
|
|
1476
1476
|
p0: {
|
|
@@ -1491,46 +1491,46 @@ function nt(e, t) {
|
|
|
1491
1491
|
}
|
|
1492
1492
|
};
|
|
1493
1493
|
}
|
|
1494
|
-
function
|
|
1495
|
-
let d = a(null), f = a(0), p = a([]), { hoveredRef:
|
|
1494
|
+
function it({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntity: l }) {
|
|
1495
|
+
let d = a(null), f = a(0), p = a([]), { hoveredRef: m, tooltip: g, hitZonesRef: S } = w(d, {
|
|
1496
1496
|
width: r,
|
|
1497
1497
|
height: o
|
|
1498
|
-
}),
|
|
1498
|
+
}), E = i(() => {
|
|
1499
1499
|
let t = /* @__PURE__ */ new Map();
|
|
1500
1500
|
return e.forEach((e, n) => t.set(e.id, n)), t;
|
|
1501
|
-
}, [e]), O = i(() => t.length > 0 ? Math.max(...t.map((e) => e.value)) : 100, [t]), k = (e) => O > 1 ? e / 100 : e,
|
|
1502
|
-
let n =
|
|
1501
|
+
}, [e]), O = i(() => t.length > 0 ? Math.max(...t.map((e) => e.value)) : 100, [t]), k = (e) => O > 1 ? e / 100 : e, A = i(() => e.map((e, t) => {
|
|
1502
|
+
let n = Qe[t % Qe.length];
|
|
1503
1503
|
return {
|
|
1504
1504
|
id: e.id,
|
|
1505
1505
|
label: e.name,
|
|
1506
1506
|
sub: e.valueLabel ?? "",
|
|
1507
1507
|
x: n.x * r,
|
|
1508
1508
|
y: n.y * o,
|
|
1509
|
-
r:
|
|
1510
|
-
color:
|
|
1509
|
+
r: et[t % et.length],
|
|
1510
|
+
color: $e[t % $e.length]
|
|
1511
1511
|
};
|
|
1512
1512
|
}), [
|
|
1513
1513
|
e,
|
|
1514
1514
|
r,
|
|
1515
1515
|
o
|
|
1516
1516
|
]), M = i(() => t.map((e) => ({
|
|
1517
|
-
fromIdx:
|
|
1518
|
-
toIdx:
|
|
1517
|
+
fromIdx: E.get(e.source) ?? -1,
|
|
1518
|
+
toIdx: E.get(e.target) ?? -1,
|
|
1519
1519
|
conf: k(e.value)
|
|
1520
|
-
})).filter((e) => e.fromIdx >= 0 && e.toIdx >= 0), [t,
|
|
1520
|
+
})).filter((e) => e.fromIdx >= 0 && e.toIdx >= 0), [t, E]);
|
|
1521
1521
|
return n(() => {
|
|
1522
1522
|
let e = d.current;
|
|
1523
1523
|
if (!e) return;
|
|
1524
|
-
let t =
|
|
1524
|
+
let t = v(e, r, o);
|
|
1525
1525
|
f.current = 0, p.current = [];
|
|
1526
1526
|
let n, i = () => {
|
|
1527
1527
|
f.current++;
|
|
1528
1528
|
let e = f.current;
|
|
1529
|
-
if (t.clearRect(0, 0, r, o),
|
|
1530
|
-
let r =
|
|
1529
|
+
if (t.clearRect(0, 0, r, o), S.current = [], b(t, r, o, e, 50, h(u.blue, .05)), M.forEach((e, n) => {
|
|
1530
|
+
let r = A[e.fromIdx], i = A[e.toIdx];
|
|
1531
1531
|
if (!r || !i) return;
|
|
1532
|
-
let a = !!l && (r.id === l || i.id === l), o =
|
|
1533
|
-
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 =
|
|
1532
|
+
let a = !!l && (r.id === l || i.id === l), o = _(r.color, i.color, .5), s = a ? .18 : .05, c = a ? .25 : .1, d = rt(r, i);
|
|
1533
|
+
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 = h(o, s), t.lineWidth = 16, t.lineCap = "round", t.stroke(), t.strokeStyle = h(o, c), t.lineWidth = 1.5, t.stroke();
|
|
1534
1534
|
for (let t = 0; t < e.conf * 2.5; t++) Math.random() < .45 && p.current.push({
|
|
1535
1535
|
edgeIdx: n,
|
|
1536
1536
|
t: 0,
|
|
@@ -1538,44 +1538,44 @@ function rt({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1538
1538
|
off: (Math.random() - .5) * 13,
|
|
1539
1539
|
sz: .7 + Math.random() * 2
|
|
1540
1540
|
});
|
|
1541
|
-
let f =
|
|
1541
|
+
let f = tt(d, .5), m = `${Math.round(e.conf * 100)}%`;
|
|
1542
1542
|
t.font = "bold 12px 'JetBrains Mono', monospace", t.textBaseline = "middle";
|
|
1543
|
-
let
|
|
1544
|
-
t.fillStyle = "rgba(10,16,24,0.88)", t.beginPath(), t.roundRect(f.x -
|
|
1543
|
+
let g = t.measureText(m).width + 14;
|
|
1544
|
+
t.fillStyle = "rgba(10,16,24,0.88)", t.beginPath(), t.roundRect(f.x - g / 2, f.y - 11, g, 22, 6), t.fill(), t.strokeStyle = h(u.blue, .25), t.lineWidth = 1, t.stroke(), t.fillStyle = h(u.blue, .9), t.textAlign = "center", t.fillText(m, f.x, f.y);
|
|
1545
1545
|
}), p.current = p.current.filter((e) => {
|
|
1546
1546
|
if (e.t += e.speed, e.t > 1) return !1;
|
|
1547
1547
|
let n = M[e.edgeIdx];
|
|
1548
1548
|
if (!n) return !1;
|
|
1549
|
-
let r =
|
|
1549
|
+
let r = A[n.fromIdx], i = A[n.toIdx];
|
|
1550
1550
|
if (!r || !i) return !1;
|
|
1551
|
-
let a =
|
|
1552
|
-
return
|
|
1553
|
-
}), p.current.length > 350 && (p.current = p.current.slice(-350)),
|
|
1554
|
-
let i = l === n.id, a =
|
|
1555
|
-
t.beginPath(), t.arc(n.x, n.y, s + 6, 0, Math.PI * 2), t.strokeStyle =
|
|
1551
|
+
let a = rt(r, i), o = tt(a, e.t), s = nt(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 = _(r.color, i.color, e.t);
|
|
1552
|
+
return y(t, c, l, e.sz * 3, d, u * .1), t.beginPath(), t.arc(c, l, e.sz, 0, Math.PI * 2), t.fillStyle = h(d, u), t.fill(), !0;
|
|
1553
|
+
}), p.current.length > 350 && (p.current = p.current.slice(-350)), A.forEach((n, r) => {
|
|
1554
|
+
let i = l === n.id, a = m.current === `node-${r}`, o = j(e, .03, 3e-4) * .1 + 1, s = n.r * o * (i ? 1.15 : 1);
|
|
1555
|
+
t.beginPath(), t.arc(n.x, n.y, s + 6, 0, Math.PI * 2), t.strokeStyle = h(n.color, i ? .3 : .1), t.lineWidth = i ? 1.5 : .7, t.stroke(), y(t, n.x, n.y, s * 3, n.color, i ? .22 : .12);
|
|
1556
1556
|
let c = t.createRadialGradient(n.x, n.y - s * .2, 0, n.x, n.y, s);
|
|
1557
|
-
if (c.addColorStop(0,
|
|
1557
|
+
if (c.addColorStop(0, h(n.color, i ? 1 : .85)), c.addColorStop(1, h(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 === A.length - 1) {
|
|
1558
1558
|
let r = s + 16, i = e * .04, a = n.x + Math.cos(i) * r, o = n.y + Math.sin(i) * r;
|
|
1559
|
-
|
|
1559
|
+
y(t, a, o, 6, n.color, .3), t.beginPath(), t.arc(a, o, 2, 0, Math.PI * 2), t.fillStyle = h(n.color, .75), t.fill();
|
|
1560
1560
|
}
|
|
1561
|
-
|
|
1561
|
+
T(S.current, `node-${r}`, n.x, n.y, s + 8, {
|
|
1562
1562
|
label: n.label,
|
|
1563
1563
|
value: n.sub || n.id,
|
|
1564
1564
|
color: n.color
|
|
1565
|
-
}), t.font = `${i || a ? "bold " : ""}12px 'DM Sans', sans-serif`, t.textAlign = "center", t.textBaseline = "alphabetic", t.fillStyle =
|
|
1565
|
+
}), t.font = `${i || a ? "bold " : ""}12px 'DM Sans', sans-serif`, t.textAlign = "center", t.textBaseline = "alphabetic", t.fillStyle = h(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 = h(u.t3, .65), t.fillText(n.sub, n.x, n.y + s + 32));
|
|
1566
1566
|
}), M.length >= 2) {
|
|
1567
|
-
let n = M.reduce((e, t) => e * t.conf, 1), i = o * .92, a = r * .12, s = r * .76, c =
|
|
1568
|
-
t.fillStyle =
|
|
1567
|
+
let n = M.reduce((e, t) => e * t.conf, 1), i = o * .92, a = r * .12, s = r * .76, c = D(Math.min(e * .008, 1));
|
|
1568
|
+
t.fillStyle = h(u.bd, .35), t.beginPath(), t.roundRect(a, i, s, 5, 3), t.fill(), t.fillStyle = h(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 = h(u.orange, .85), t.fillText(`${Math.round(n * 100)}% compound confidence`, a + s * n * c + 10, i + 2);
|
|
1569
1569
|
let l = M.map((e) => e.conf.toFixed(2)).join(" × ");
|
|
1570
|
-
t.textAlign = "right", t.font = "9px 'JetBrains Mono', monospace", t.fillStyle =
|
|
1570
|
+
t.textAlign = "right", t.font = "9px 'JetBrains Mono', monospace", t.fillStyle = h(u.t4, .6), t.fillText(l, a - 6, i + 2);
|
|
1571
1571
|
}
|
|
1572
|
-
|
|
1572
|
+
x(t, r, o, e, .012), n = requestAnimationFrame(i);
|
|
1573
1573
|
};
|
|
1574
1574
|
return i(), () => {
|
|
1575
1575
|
cancelAnimationFrame(n), p.current = [];
|
|
1576
1576
|
};
|
|
1577
1577
|
}, [
|
|
1578
|
-
|
|
1578
|
+
A,
|
|
1579
1579
|
M,
|
|
1580
1580
|
r,
|
|
1581
1581
|
o,
|
|
@@ -1596,8 +1596,8 @@ function rt({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1596
1596
|
},
|
|
1597
1597
|
role: "img",
|
|
1598
1598
|
"aria-label": "causal flow diagram"
|
|
1599
|
-
}), /* @__PURE__ */ s(
|
|
1600
|
-
...
|
|
1599
|
+
}), /* @__PURE__ */ s(C, {
|
|
1600
|
+
...g,
|
|
1601
1601
|
parentW: r,
|
|
1602
1602
|
parentH: o
|
|
1603
1603
|
})]
|
|
@@ -1605,10 +1605,10 @@ function rt({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1605
1605
|
}
|
|
1606
1606
|
//#endregion
|
|
1607
1607
|
//#region src/components/sankey/ProcessSankey.tsx
|
|
1608
|
-
function
|
|
1609
|
-
return /* @__PURE__ */ s(
|
|
1610
|
-
nodes:
|
|
1611
|
-
links:
|
|
1608
|
+
function at({ selectedEntity: e, colors: t }) {
|
|
1609
|
+
return /* @__PURE__ */ s(it, {
|
|
1610
|
+
nodes: ze.nodes,
|
|
1611
|
+
links: ze.links,
|
|
1612
1612
|
width: 960,
|
|
1613
1613
|
height: 280,
|
|
1614
1614
|
selectedEntity: e
|
|
@@ -1616,7 +1616,7 @@ function it({ selectedEntity: e, colors: t }) {
|
|
|
1616
1616
|
}
|
|
1617
1617
|
//#endregion
|
|
1618
1618
|
//#region src/components/sankey/RankingSankey.tsx
|
|
1619
|
-
function
|
|
1619
|
+
function ot({ rows: e = [], className: t, colors: n }) {
|
|
1620
1620
|
let { nodes: r, links: a } = i(() => {
|
|
1621
1621
|
let t = e.slice(0, 5);
|
|
1622
1622
|
return {
|
|
@@ -1634,7 +1634,7 @@ function at({ rows: e = [], className: t, colors: n }) {
|
|
|
1634
1634
|
}))
|
|
1635
1635
|
};
|
|
1636
1636
|
}, [e]);
|
|
1637
|
-
return /* @__PURE__ */ s(
|
|
1637
|
+
return /* @__PURE__ */ s(Ze, {
|
|
1638
1638
|
nodes: r,
|
|
1639
1639
|
links: a,
|
|
1640
1640
|
width: 760,
|
|
@@ -1646,62 +1646,62 @@ function at({ rows: e = [], className: t, colors: n }) {
|
|
|
1646
1646
|
}
|
|
1647
1647
|
//#endregion
|
|
1648
1648
|
//#region src/components/balanceScaleChart/BalanceScaleChart.tsx
|
|
1649
|
-
var
|
|
1650
|
-
function
|
|
1649
|
+
var st = 500, ct = 320;
|
|
1650
|
+
function lt({ left: e, right: t, "data-testid": r }) {
|
|
1651
1651
|
let i = a(null), o = a(0);
|
|
1652
1652
|
return n(() => {
|
|
1653
1653
|
let n = i.current;
|
|
1654
1654
|
if (!n) return;
|
|
1655
|
-
let r =
|
|
1655
|
+
let r = v(n, st, ct);
|
|
1656
1656
|
o.current = 0;
|
|
1657
|
-
let a =
|
|
1657
|
+
let a = st / 2, s = Math.max(e.value, t.value), c = (e.value - t.value) / s * 14, l, d = () => {
|
|
1658
1658
|
o.current++;
|
|
1659
1659
|
let n = o.current;
|
|
1660
|
-
r.clearRect(0, 0,
|
|
1661
|
-
let i =
|
|
1662
|
-
r.strokeStyle =
|
|
1663
|
-
let
|
|
1664
|
-
x: a - Math.cos(
|
|
1665
|
-
y: 100 + Math.sin(-
|
|
1666
|
-
},
|
|
1667
|
-
x: a + Math.cos(
|
|
1668
|
-
y: 100 + Math.sin(
|
|
1660
|
+
r.clearRect(0, 0, st, ct), r.letterSpacing = f.letterSpacing;
|
|
1661
|
+
let i = D(Math.min(n / 80, 1)), g = c * A(Math.min(n / 80, 1)) * Math.PI / 180;
|
|
1662
|
+
r.strokeStyle = h(u.bd, .5 * i), r.lineWidth = 2, r.beginPath(), r.moveTo(a, 100), r.lineTo(a, ct - 80), r.stroke(), r.beginPath(), r.arc(a, 100, 5 * i, 0, Math.PI * 2), r.fillStyle = u.t2, r.fill();
|
|
1663
|
+
let _ = {
|
|
1664
|
+
x: a - Math.cos(g) * 160,
|
|
1665
|
+
y: 100 + Math.sin(-g) * 160
|
|
1666
|
+
}, v = {
|
|
1667
|
+
x: a + Math.cos(g) * 160,
|
|
1668
|
+
y: 100 + Math.sin(g) * 160
|
|
1669
1669
|
};
|
|
1670
|
-
r.strokeStyle =
|
|
1671
|
-
let
|
|
1672
|
-
|
|
1670
|
+
r.strokeStyle = h(u.t2, .5 * i), r.lineWidth = 2, r.beginPath(), r.moveTo(_.x, _.y), r.lineTo(v.x, v.y), r.stroke();
|
|
1671
|
+
let b = Math.max(20, e.value / s * 100 * i), x = _.y + 18;
|
|
1672
|
+
y(r, _.x, x + b / 2, 90 * .5, u.green, .18 * i), r.fillStyle = h(u.green, .5 * i), r.beginPath(), r.roundRect(_.x - 90 / 2, x, 90, b, [
|
|
1673
1673
|
0,
|
|
1674
1674
|
0,
|
|
1675
1675
|
6,
|
|
1676
1676
|
6
|
|
1677
|
-
]), r.fill(), r.strokeStyle =
|
|
1678
|
-
r.beginPath(), r.moveTo(
|
|
1679
|
-
}), i > .5 && (r.globalAlpha = Math.min(1, (i - .5) / .5), r.font =
|
|
1680
|
-
let
|
|
1681
|
-
r.fillStyle =
|
|
1677
|
+
]), r.fill(), r.strokeStyle = h(u.green, .7 * i), r.lineWidth = 1.5, r.stroke(), r.strokeStyle = h(u.t3, .35 * i), r.lineWidth = 1, [-90 / 3, 90 / 3].forEach((e) => {
|
|
1678
|
+
r.beginPath(), r.moveTo(_.x + e, _.y + 4), r.lineTo(_.x + e, x), r.stroke();
|
|
1679
|
+
}), i > .5 && (r.globalAlpha = Math.min(1, (i - .5) / .5), r.font = p.font, r.fillStyle = u.green, r.textAlign = "center", r.fillText(e.label, _.x, x + b + 18), r.font = f.font, r.fillStyle = f.color, r.fillText("Accepted", _.x, x + b + 32), r.fillText(`${e.count} quotations`, _.x, x + b + 44), r.globalAlpha = 1);
|
|
1680
|
+
let S = Math.max(20, t.value / s * 100 * i), C = v.y + 18;
|
|
1681
|
+
r.fillStyle = h(u.amber, .3 * i), r.strokeStyle = h(u.amber, .5 * i), r.lineWidth = 1.5, r.beginPath(), r.roundRect(v.x - 90 / 2, C, 90, S, [
|
|
1682
1682
|
0,
|
|
1683
1683
|
0,
|
|
1684
1684
|
6,
|
|
1685
1685
|
6
|
|
1686
|
-
]), r.fill(), r.stroke(), r.strokeStyle =
|
|
1687
|
-
r.beginPath(), r.moveTo(
|
|
1688
|
-
}), i > .5 && (r.globalAlpha = Math.min(1, (i - .5) / .5), r.font =
|
|
1686
|
+
]), r.fill(), r.stroke(), r.strokeStyle = h(u.t3, .35 * i), r.lineWidth = 1, [-90 / 3, 90 / 3].forEach((e) => {
|
|
1687
|
+
r.beginPath(), r.moveTo(v.x + e, v.y + 4), r.lineTo(v.x + e, C), r.stroke();
|
|
1688
|
+
}), i > .5 && (r.globalAlpha = Math.min(1, (i - .5) / .5), r.font = p.font, r.fillStyle = u.amber, r.textAlign = "center", r.fillText(t.label, v.x, C + S + 18), r.font = f.font, r.fillStyle = f.color, r.fillText("Submitted", v.x, C + S + 32), r.fillText(`${t.count} quotations`, v.x, C + S + 44), r.globalAlpha = 1), i > .85 && Math.abs(c) > 1 && (r.globalAlpha = Math.min(1, (i - .85) / .15) * .6, r.font = m.font, r.fillStyle = m.color, r.textAlign = "center", r.fillText(`${Math.abs(c).toFixed(1)}° tilt toward accepted`, a, ct - 12), r.globalAlpha = 1), l = requestAnimationFrame(d);
|
|
1689
1689
|
};
|
|
1690
1690
|
return d(), () => cancelAnimationFrame(l);
|
|
1691
1691
|
}, [e, t]), /* @__PURE__ */ s("div", {
|
|
1692
1692
|
"data-testid": r,
|
|
1693
1693
|
style: {
|
|
1694
1694
|
position: "relative",
|
|
1695
|
-
width:
|
|
1696
|
-
height:
|
|
1695
|
+
width: st,
|
|
1696
|
+
height: ct
|
|
1697
1697
|
},
|
|
1698
1698
|
children: /* @__PURE__ */ s("canvas", {
|
|
1699
1699
|
ref: i,
|
|
1700
1700
|
role: "img",
|
|
1701
1701
|
"aria-label": "Quotation balance — accepted vs submitted quotation value",
|
|
1702
1702
|
style: {
|
|
1703
|
-
width:
|
|
1704
|
-
height:
|
|
1703
|
+
width: st,
|
|
1704
|
+
height: ct,
|
|
1705
1705
|
display: "block"
|
|
1706
1706
|
}
|
|
1707
1707
|
})
|
|
@@ -1709,35 +1709,35 @@ function ct({ left: e, right: t, "data-testid": r }) {
|
|
|
1709
1709
|
}
|
|
1710
1710
|
//#endregion
|
|
1711
1711
|
//#region src/components/areaLineChart/AreaLineChart.tsx
|
|
1712
|
-
var
|
|
1713
|
-
function
|
|
1714
|
-
let r = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), { hoveredRef: d, tooltip: p, hitZonesRef:
|
|
1715
|
-
width:
|
|
1712
|
+
var ut = 680, G = 280;
|
|
1713
|
+
function dt({ points: e = [], "data-testid": t }) {
|
|
1714
|
+
let r = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), { hoveredRef: d, tooltip: p, hitZonesRef: m } = w(r, {
|
|
1715
|
+
width: ut,
|
|
1716
1716
|
height: G
|
|
1717
1717
|
}), g = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
1718
1718
|
return n(() => {
|
|
1719
1719
|
let e = r.current;
|
|
1720
1720
|
if (!e) return;
|
|
1721
|
-
let t =
|
|
1721
|
+
let t = v(e, ut, G);
|
|
1722
1722
|
l.current = 0;
|
|
1723
|
-
let n =
|
|
1723
|
+
let n = ut - 54 - 28, i = G - 30 - 54, a = Math.max(...g.map((e) => e.count), 1), s = g.length, c = s > 1 ? n / (s - 1) : n, p = g.map((e, t) => ({
|
|
1724
1724
|
x: 54 + t * c,
|
|
1725
1725
|
y: 30 + i - e.count / a * i,
|
|
1726
1726
|
point: e
|
|
1727
|
-
})),
|
|
1727
|
+
})), _, b = () => {
|
|
1728
1728
|
l.current++;
|
|
1729
1729
|
let e = l.current;
|
|
1730
|
-
t.clearRect(0, 0,
|
|
1731
|
-
let r =
|
|
1732
|
-
|
|
1730
|
+
t.clearRect(0, 0, ut, G), t.letterSpacing = f.letterSpacing;
|
|
1731
|
+
let r = D(Math.min(e / 72, 1));
|
|
1732
|
+
N(o.current, d.current), m.current = [], [
|
|
1733
1733
|
.25,
|
|
1734
1734
|
.5,
|
|
1735
1735
|
.75,
|
|
1736
1736
|
1
|
|
1737
1737
|
].forEach((e) => {
|
|
1738
1738
|
let r = 30 + i - e * i;
|
|
1739
|
-
t.strokeStyle =
|
|
1740
|
-
}), t.save(), t.translate(12, 30 + i / 2), t.rotate(-Math.PI / 2), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Submissions", 0, 0), t.restore(), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Week", 54 + n / 2, G - 6), t.strokeStyle =
|
|
1739
|
+
t.strokeStyle = h(u.bd, .18), t.lineWidth = 1, t.setLineDash([3, 5]), t.beginPath(), t.moveTo(54, r), t.lineTo(54 + n, r), t.stroke(), t.setLineDash([]), t.font = f.font, t.fillStyle = f.color, t.textAlign = "right", t.fillText(String(Math.round(a * e)), 48, r + 3);
|
|
1740
|
+
}), t.save(), t.translate(12, 30 + i / 2), t.rotate(-Math.PI / 2), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Submissions", 0, 0), t.restore(), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Week", 54 + n / 2, G - 6), t.strokeStyle = h(u.bd, .3), t.lineWidth = 1, t.setLineDash([]), t.beginPath(), t.moveTo(54, 30 + i), t.lineTo(54 + n, 30 + i), t.stroke();
|
|
1741
1741
|
let c = r * (s - 1), g = Math.floor(c) + 1;
|
|
1742
1742
|
if (g >= 2) {
|
|
1743
1743
|
t.beginPath(), t.moveTo(p[0].x, 30 + i), t.lineTo(p[0].x, p[0].y);
|
|
@@ -1748,29 +1748,29 @@ function ut({ points: e = [], "data-testid": t }) {
|
|
|
1748
1748
|
let e = p[Math.min(g - 1, s - 1)];
|
|
1749
1749
|
t.lineTo(e.x, 30 + i), t.closePath();
|
|
1750
1750
|
let n = t.createLinearGradient(0, 30, 0, 30 + i);
|
|
1751
|
-
n.addColorStop(0,
|
|
1751
|
+
n.addColorStop(0, h(u.blue, .22)), n.addColorStop(1, h(u.blue, .02)), t.fillStyle = n, t.fill();
|
|
1752
1752
|
}
|
|
1753
1753
|
t.beginPath();
|
|
1754
1754
|
for (let e = 0; e < g; e++) {
|
|
1755
1755
|
let n = c - Math.floor(c), r = e === g - 1 && e > 0 && e === Math.ceil(c), i = e === 0 || e < g - 1 ? p[e].x : p[e - 1].x + (p[e].x - p[e - 1].x) * (r ? n : 1), a = e === 0 || e < g - 1 ? p[e].y : p[e - 1].y + (p[e].y - p[e - 1].y) * (r ? n : 1);
|
|
1756
1756
|
e === 0 ? t.moveTo(i, a) : t.lineTo(i, a);
|
|
1757
1757
|
}
|
|
1758
|
-
t.strokeStyle =
|
|
1758
|
+
t.strokeStyle = h(u.blue, .85), t.lineWidth = 2, t.stroke(), p.forEach((e, n) => {
|
|
1759
1759
|
if (n >= g) return;
|
|
1760
1760
|
let r = `pt-${n}`, s = o.current.get(r) ?? 0;
|
|
1761
|
-
|
|
1761
|
+
T(m.current, r, e.x, e.y, 10, {
|
|
1762
1762
|
label: e.point.week,
|
|
1763
1763
|
value: `${e.point.count} quotations submitted`,
|
|
1764
1764
|
sublabel: `£${e.point.value}M value`,
|
|
1765
|
-
color: u.
|
|
1766
|
-
}), s > 0 &&
|
|
1765
|
+
color: u.blue
|
|
1766
|
+
}), s > 0 && S(t, e.x, 30, 30 + i, h(u.blue, .15 * s));
|
|
1767
1767
|
let c = e.point.count === a;
|
|
1768
|
-
(s > 0 || c) &&
|
|
1769
|
-
}),
|
|
1768
|
+
(s > 0 || c) && y(t, e.x, e.y, 14, u.blue, (c ? .3 : 0) + s * .25), t.beginPath(), t.arc(e.x, e.y, s > 0 ? 5 : 3.5, 0, Math.PI * 2), t.fillStyle = h(u.blue, s > 0 ? 1 : .8), t.fill(), (s > 0 || c) && (t.font = f.font, t.fillStyle = u.blue, t.textAlign = "center", t.fillText(String(e.point.count), e.x, e.y - 10)), t.font = f.font, t.fillStyle = s > 0 ? u.blue : f.color, t.textAlign = "center", t.fillText(e.point.week, e.x, G - 54 + 14);
|
|
1769
|
+
}), _ = requestAnimationFrame(b);
|
|
1770
1770
|
};
|
|
1771
|
-
return b(), () => cancelAnimationFrame(
|
|
1772
|
-
}, [g]), g.length < 2 ? /* @__PURE__ */ s(
|
|
1773
|
-
width:
|
|
1771
|
+
return b(), () => cancelAnimationFrame(_);
|
|
1772
|
+
}, [g]), g.length < 2 ? /* @__PURE__ */ s(I, {
|
|
1773
|
+
width: ut,
|
|
1774
1774
|
height: G,
|
|
1775
1775
|
"data-testid": t
|
|
1776
1776
|
}) : /* @__PURE__ */ s("div", {
|
|
@@ -1783,7 +1783,7 @@ function ut({ points: e = [], "data-testid": t }) {
|
|
|
1783
1783
|
children: /* @__PURE__ */ c("div", {
|
|
1784
1784
|
style: {
|
|
1785
1785
|
position: "relative",
|
|
1786
|
-
width:
|
|
1786
|
+
width: ut,
|
|
1787
1787
|
height: G
|
|
1788
1788
|
},
|
|
1789
1789
|
children: [/* @__PURE__ */ s("canvas", {
|
|
@@ -1791,13 +1791,13 @@ function ut({ points: e = [], "data-testid": t }) {
|
|
|
1791
1791
|
role: "img",
|
|
1792
1792
|
"aria-label": "Trend chart — count over time",
|
|
1793
1793
|
style: {
|
|
1794
|
-
width:
|
|
1794
|
+
width: ut,
|
|
1795
1795
|
height: G,
|
|
1796
1796
|
display: "block"
|
|
1797
1797
|
}
|
|
1798
|
-
}), /* @__PURE__ */ s(
|
|
1798
|
+
}), /* @__PURE__ */ s(C, {
|
|
1799
1799
|
...p,
|
|
1800
|
-
parentW:
|
|
1800
|
+
parentW: ut,
|
|
1801
1801
|
parentH: G
|
|
1802
1802
|
})]
|
|
1803
1803
|
})
|
|
@@ -1805,50 +1805,50 @@ function ut({ points: e = [], "data-testid": t }) {
|
|
|
1805
1805
|
}
|
|
1806
1806
|
//#endregion
|
|
1807
1807
|
//#region src/components/trend/Trend.tsx
|
|
1808
|
-
var
|
|
1809
|
-
function
|
|
1808
|
+
var ft = 680, K = 280, pt = 54, mt = 28, ht = 64, gt = f.font, _t = 12;
|
|
1809
|
+
function vt({ points: e = [], "data-testid": t }) {
|
|
1810
1810
|
let r = a(null), o = a(null), l = a(0), d = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), p = i(() => {
|
|
1811
|
-
if (d.length <= 1) return
|
|
1811
|
+
if (d.length <= 1) return ht;
|
|
1812
1812
|
let e = document.createElement("canvas").getContext("2d");
|
|
1813
|
-
if (!e) return
|
|
1814
|
-
e.font =
|
|
1813
|
+
if (!e) return ht;
|
|
1814
|
+
e.font = gt;
|
|
1815
1815
|
let t = Math.max(...d.map((t) => e.measureText(t.week).width));
|
|
1816
|
-
return Math.max(
|
|
1817
|
-
}, [d]),
|
|
1818
|
-
width:
|
|
1816
|
+
return Math.max(ht, t + _t);
|
|
1817
|
+
}, [d]), m = Math.max(ft - pt, mt + Math.max(0, d.length - 1) * p), { tooltip: g, hitZonesRef: _ } = w(r, {
|
|
1818
|
+
width: m,
|
|
1819
1819
|
height: K
|
|
1820
1820
|
});
|
|
1821
1821
|
return n(() => {
|
|
1822
1822
|
let e = r.current;
|
|
1823
1823
|
if (!e) return;
|
|
1824
|
-
let t =
|
|
1824
|
+
let t = v(e, m, K), n = o.current ? v(o.current, pt, K) : null;
|
|
1825
1825
|
l.current = 0;
|
|
1826
|
-
let i =
|
|
1826
|
+
let i = m - mt, a = K - 30 - 54, s = Math.max(...d.map((e) => e.count), 1), c = d.length, g = c > 1 ? Math.max(i / (c - 1), p) : i, y = d.map((e, t) => ({
|
|
1827
1827
|
x: t * g,
|
|
1828
1828
|
y: 30 + a - e.count / s * a,
|
|
1829
1829
|
point: e
|
|
1830
1830
|
}));
|
|
1831
|
-
n && (n.clearRect(0, 0,
|
|
1831
|
+
n && (n.clearRect(0, 0, pt, K), n.letterSpacing = f.letterSpacing, n.fillStyle = u.bg, n.fillRect(0, 0, pt, K), [
|
|
1832
1832
|
.25,
|
|
1833
1833
|
.5,
|
|
1834
1834
|
.75,
|
|
1835
1835
|
1
|
|
1836
1836
|
].forEach((e) => {
|
|
1837
1837
|
let t = 30 + a - e * a;
|
|
1838
|
-
n.font = f.font, n.fillStyle = f.color, n.textAlign = "right", n.fillText(String(Math.round(s * e)),
|
|
1838
|
+
n.font = f.font, n.fillStyle = f.color, n.textAlign = "right", n.fillText(String(Math.round(s * e)), pt - 6, t + 3);
|
|
1839
1839
|
}), n.save(), n.translate(12, 30 + a / 2), n.rotate(-Math.PI / 2), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Count", 0, 0), n.restore());
|
|
1840
1840
|
let b, x = () => {
|
|
1841
1841
|
l.current++;
|
|
1842
|
-
let e = Math.min(l.current / 72, 1), n =
|
|
1843
|
-
t.clearRect(0, 0,
|
|
1842
|
+
let e = Math.min(l.current / 72, 1), n = D(e);
|
|
1843
|
+
t.clearRect(0, 0, m, K), t.letterSpacing = f.letterSpacing, [
|
|
1844
1844
|
.25,
|
|
1845
1845
|
.5,
|
|
1846
1846
|
.75,
|
|
1847
1847
|
1
|
|
1848
1848
|
].forEach((e) => {
|
|
1849
1849
|
let n = 30 + a - e * a;
|
|
1850
|
-
t.strokeStyle =
|
|
1851
|
-
}), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Period", i / 2, K - 6), t.strokeStyle =
|
|
1850
|
+
t.strokeStyle = h(u.bd, .18), t.lineWidth = 1, t.setLineDash([3, 5]), t.beginPath(), t.moveTo(0, n), t.lineTo(i, n), t.stroke(), t.setLineDash([]);
|
|
1851
|
+
}), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Period", i / 2, K - 6), t.strokeStyle = h(u.bd, .3), t.lineWidth = 1, t.beginPath(), t.moveTo(0, 30 + a), t.lineTo(i, 30 + a), t.stroke();
|
|
1852
1852
|
let r = n * (c - 1), o = Math.floor(r) + 1;
|
|
1853
1853
|
if (o >= 2) {
|
|
1854
1854
|
t.beginPath(), t.moveTo(y[0].x, 30 + a), t.lineTo(y[0].x, y[0].y);
|
|
@@ -1858,30 +1858,30 @@ function _t({ points: e = [], "data-testid": t }) {
|
|
|
1858
1858
|
}
|
|
1859
1859
|
t.lineTo(y[o - 1].x, 30 + a), t.closePath();
|
|
1860
1860
|
let e = t.createLinearGradient(0, 30, 0, 30 + a);
|
|
1861
|
-
e.addColorStop(0,
|
|
1861
|
+
e.addColorStop(0, h(u.blue, .22)), e.addColorStop(1, h(u.blue, .02)), t.fillStyle = e, t.fill();
|
|
1862
1862
|
}
|
|
1863
1863
|
t.beginPath();
|
|
1864
1864
|
for (let e = 0; e < o; e++) {
|
|
1865
1865
|
let n = r - Math.floor(r), i = e === o - 1 && e > 0 && e === Math.ceil(r) && n > 0, a = i ? y[e - 1].x + (y[e].x - y[e - 1].x) * n : y[e].x, s = i ? y[e - 1].y + (y[e].y - y[e - 1].y) * n : y[e].y;
|
|
1866
1866
|
e === 0 ? t.moveTo(a, s) : t.lineTo(a, s);
|
|
1867
1867
|
}
|
|
1868
|
-
t.strokeStyle =
|
|
1869
|
-
n >= o || (
|
|
1868
|
+
t.strokeStyle = h(u.blue, .85), t.lineWidth = 2, t.stroke(), _.current = [], y.forEach((e, n) => {
|
|
1869
|
+
n >= o || (T(_.current, `pt-${n}`, e.x, e.y, 10, {
|
|
1870
1870
|
label: e.point.week,
|
|
1871
1871
|
value: `${e.point.count} submissions`,
|
|
1872
1872
|
sublabel: `£${e.point.value}M value`,
|
|
1873
|
-
color: u.
|
|
1874
|
-
}), t.beginPath(), t.arc(e.x, e.y, 3.5, 0, Math.PI * 2), t.fillStyle =
|
|
1873
|
+
color: u.blue
|
|
1874
|
+
}), t.beginPath(), t.arc(e.x, e.y, 3.5, 0, Math.PI * 2), t.fillStyle = h(u.blue, .8), t.fill(), t.font = gt, t.fillStyle = f.color, t.textAlign = n === 0 ? "left" : n === y.length - 1 ? "right" : "center", t.fillText(e.point.week, e.x, K - 54 + 14));
|
|
1875
1875
|
}), e < 1 && (b = requestAnimationFrame(x));
|
|
1876
1876
|
};
|
|
1877
1877
|
return x(), () => cancelAnimationFrame(b);
|
|
1878
1878
|
}, [
|
|
1879
1879
|
d,
|
|
1880
|
-
|
|
1880
|
+
m,
|
|
1881
1881
|
p,
|
|
1882
|
-
|
|
1883
|
-
]), d.length < 2 ? /* @__PURE__ */ s(
|
|
1884
|
-
width:
|
|
1882
|
+
_
|
|
1883
|
+
]), d.length < 2 ? /* @__PURE__ */ s(I, {
|
|
1884
|
+
width: ft,
|
|
1885
1885
|
height: K,
|
|
1886
1886
|
"data-testid": t
|
|
1887
1887
|
}) : /* @__PURE__ */ c("div", {
|
|
@@ -1895,7 +1895,7 @@ function _t({ points: e = [], "data-testid": t }) {
|
|
|
1895
1895
|
ref: o,
|
|
1896
1896
|
"aria-hidden": "true",
|
|
1897
1897
|
style: {
|
|
1898
|
-
width:
|
|
1898
|
+
width: pt,
|
|
1899
1899
|
height: K,
|
|
1900
1900
|
display: "block",
|
|
1901
1901
|
flexShrink: 0
|
|
@@ -1909,7 +1909,7 @@ function _t({ points: e = [], "data-testid": t }) {
|
|
|
1909
1909
|
children: /* @__PURE__ */ c("div", {
|
|
1910
1910
|
style: {
|
|
1911
1911
|
position: "relative",
|
|
1912
|
-
width:
|
|
1912
|
+
width: m,
|
|
1913
1913
|
height: K
|
|
1914
1914
|
},
|
|
1915
1915
|
children: [/* @__PURE__ */ s("canvas", {
|
|
@@ -1917,13 +1917,13 @@ function _t({ points: e = [], "data-testid": t }) {
|
|
|
1917
1917
|
role: "img",
|
|
1918
1918
|
"aria-label": "Trend chart — count over time",
|
|
1919
1919
|
style: {
|
|
1920
|
-
width:
|
|
1920
|
+
width: m,
|
|
1921
1921
|
height: K,
|
|
1922
1922
|
display: "block"
|
|
1923
1923
|
}
|
|
1924
|
-
}), /* @__PURE__ */ s(
|
|
1924
|
+
}), /* @__PURE__ */ s(C, {
|
|
1925
1925
|
...g,
|
|
1926
|
-
parentW:
|
|
1926
|
+
parentW: m,
|
|
1927
1927
|
parentH: K
|
|
1928
1928
|
})]
|
|
1929
1929
|
})
|
|
@@ -1932,67 +1932,67 @@ function _t({ points: e = [], "data-testid": t }) {
|
|
|
1932
1932
|
}
|
|
1933
1933
|
//#endregion
|
|
1934
1934
|
//#region src/components/proportionalBandChart/ProportionalBandChart.tsx
|
|
1935
|
-
var q = 680,
|
|
1936
|
-
function
|
|
1935
|
+
var q = 680, yt = 240;
|
|
1936
|
+
function bt(e, t, n) {
|
|
1937
1937
|
if (e.measureText(t).width <= n) return t;
|
|
1938
1938
|
let r = t;
|
|
1939
1939
|
for (; r.length > 0 && e.measureText(`${r}…`).width > n;) r = r.slice(0, -1);
|
|
1940
1940
|
return `${r}…`;
|
|
1941
1941
|
}
|
|
1942
|
-
var
|
|
1942
|
+
var xt = {
|
|
1943
1943
|
Critical: u.red,
|
|
1944
1944
|
High: u.orange,
|
|
1945
1945
|
Medium: u.amber,
|
|
1946
1946
|
Low: u.green
|
|
1947
1947
|
};
|
|
1948
|
-
function
|
|
1949
|
-
let r = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), { hoveredRef: d, tooltip:
|
|
1948
|
+
function St({ severities: e = [], "data-testid": t }) {
|
|
1949
|
+
let r = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), { hoveredRef: d, tooltip: m, hitZonesRef: g } = w(r, {
|
|
1950
1950
|
width: q,
|
|
1951
|
-
height:
|
|
1952
|
-
}),
|
|
1951
|
+
height: yt
|
|
1952
|
+
}), _ = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
1953
1953
|
return n(() => {
|
|
1954
1954
|
let e = r.current;
|
|
1955
1955
|
if (!e) return;
|
|
1956
|
-
let t =
|
|
1956
|
+
let t = v(e, q, yt);
|
|
1957
1957
|
l.current = 0;
|
|
1958
|
-
let n =
|
|
1958
|
+
let n = _.reduce((e, t) => e + t.count, 0), i = q - 28 - 28, a = yt - 50 - 52, s = _.map((e) => e.count / n * i), c, m = () => {
|
|
1959
1959
|
l.current++;
|
|
1960
1960
|
let e = l.current;
|
|
1961
|
-
t.clearRect(0, 0, q,
|
|
1962
|
-
let r =
|
|
1963
|
-
|
|
1964
|
-
let
|
|
1965
|
-
|
|
1966
|
-
let c =
|
|
1961
|
+
t.clearRect(0, 0, q, yt), t.letterSpacing = f.letterSpacing;
|
|
1962
|
+
let r = O(Math.min(e / 60, 1));
|
|
1963
|
+
N(o.current, d.current), g.current = [], t.strokeStyle = h(u.bd, .2), t.lineWidth = 1, t.beginPath(), t.rect(28, 50, i, a), t.stroke(), t.strokeStyle = h(u.t4, .15), t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(q / 2, 50), t.lineTo(q / 2, 50 + a), t.stroke(), t.setLineDash([]);
|
|
1964
|
+
let v = 28;
|
|
1965
|
+
_.forEach((e, i) => {
|
|
1966
|
+
let c = xt[e.severity] ?? u.blue, l = s[i];
|
|
1967
1967
|
l * r;
|
|
1968
|
-
let d = o.current.get(e.severity) ?? 0,
|
|
1969
|
-
|
|
1970
|
-
let
|
|
1971
|
-
if (
|
|
1968
|
+
let d = o.current.get(e.severity) ?? 0, m = v + l / 2, _ = l * .85;
|
|
1969
|
+
m - _ / 2;
|
|
1970
|
+
let b = l * r, x = _ * r, S = m - x / 2;
|
|
1971
|
+
if (b > 0 && (d > 0 && y(t, v + b / 2, 50 + a / 2, b * .4, c, .15 * d), t.beginPath(), t.moveTo(S, 50), t.lineTo(S + x, 50), t.lineTo(v + b, 50 + a), t.lineTo(v, 50 + a), t.closePath(), t.fillStyle = h(c, .45 + d * .25), t.fill(), t.strokeStyle = h(c, (.5 + d * .3) * r), t.lineWidth = d > 0 ? 2 : 1, t.beginPath(), t.moveTo(S, 50), t.lineTo(S + x, 50), t.stroke(), t.strokeStyle = h(c, (.3 + d * .3) * r), t.lineWidth = d > 0 ? 2 : 1, t.beginPath(), t.moveTo(v, 50 + a), t.lineTo(v + b, 50 + a), t.stroke()), E(g.current, e.severity, v, 50, l, a, {
|
|
1972
1972
|
label: e.severity,
|
|
1973
1973
|
value: `${e.count} Early Warnings`,
|
|
1974
1974
|
sublabel: `${Math.round(e.count / n * 100)}% of all EWs`,
|
|
1975
1975
|
color: c
|
|
1976
1976
|
}), r > .5) {
|
|
1977
|
-
let i = Math.min(1, (r - .5) / .5), o =
|
|
1978
|
-
t.globalAlpha = i, t.font = "bold " + f.font, t.fillStyle = d > 0 ? c :
|
|
1977
|
+
let i = Math.min(1, (r - .5) / .5), o = v + l / 2;
|
|
1978
|
+
t.globalAlpha = i, t.font = "bold " + f.font, t.fillStyle = d > 0 ? c : h(c, .9), t.textAlign = "center", t.fillText(bt(t, e.severity, l - 12), o, 38), t.font = p.font, t.fillStyle = d > 0 ? u.t1 : h(u.t1, .85), t.fillText(String(e.count), o, 50 + a / 2 + 6), t.font = f.font, t.fillStyle = d > 0 ? c : f.color, t.fillText(`${Math.round(e.count / n * 100)}%`, o, 50 + a + 18), t.globalAlpha = 1;
|
|
1979
1979
|
}
|
|
1980
|
-
|
|
1980
|
+
v += l;
|
|
1981
1981
|
});
|
|
1982
|
-
let
|
|
1983
|
-
|
|
1982
|
+
let b = t.createLinearGradient(28, 0, 28 + i, 0);
|
|
1983
|
+
b.addColorStop(0, h(u.red, .03)), b.addColorStop(.33, h(u.orange, .03)), b.addColorStop(.66, h(u.amber, .03)), b.addColorStop(1, h(u.green, .03)), t.fillStyle = b, t.fillRect(28, 50, i * r, a), c = requestAnimationFrame(m);
|
|
1984
1984
|
};
|
|
1985
|
-
return
|
|
1986
|
-
}, [
|
|
1985
|
+
return m(), () => cancelAnimationFrame(c);
|
|
1986
|
+
}, [_]), _.length === 0 ? /* @__PURE__ */ s(I, {
|
|
1987
1987
|
width: q,
|
|
1988
|
-
height:
|
|
1988
|
+
height: yt,
|
|
1989
1989
|
"data-testid": t
|
|
1990
1990
|
}) : /* @__PURE__ */ c("div", {
|
|
1991
1991
|
"data-testid": t,
|
|
1992
1992
|
style: {
|
|
1993
1993
|
position: "relative",
|
|
1994
1994
|
width: q,
|
|
1995
|
-
height:
|
|
1995
|
+
height: yt
|
|
1996
1996
|
},
|
|
1997
1997
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1998
1998
|
ref: r,
|
|
@@ -2000,68 +2000,68 @@ function xt({ severities: e = [], "data-testid": t }) {
|
|
|
2000
2000
|
"aria-label": "Early Warning severity distribution — prism spectrum bands",
|
|
2001
2001
|
style: {
|
|
2002
2002
|
width: q,
|
|
2003
|
-
height:
|
|
2003
|
+
height: yt,
|
|
2004
2004
|
display: "block"
|
|
2005
2005
|
}
|
|
2006
|
-
}), /* @__PURE__ */ s(
|
|
2007
|
-
...
|
|
2006
|
+
}), /* @__PURE__ */ s(C, {
|
|
2007
|
+
...m,
|
|
2008
2008
|
parentW: q,
|
|
2009
|
-
parentH:
|
|
2009
|
+
parentH: yt
|
|
2010
2010
|
})]
|
|
2011
2011
|
});
|
|
2012
2012
|
}
|
|
2013
2013
|
//#endregion
|
|
2014
2014
|
//#region src/components/hubAndSpokeRadialChart/HubAndSpokeRadialChart.tsx
|
|
2015
|
-
var J = 460, Y = 300,
|
|
2015
|
+
var J = 460, Y = 300, Ct = {
|
|
2016
2016
|
Open: u.red,
|
|
2017
2017
|
Submitted: u.amber,
|
|
2018
2018
|
Closed: u.green
|
|
2019
2019
|
};
|
|
2020
|
-
function
|
|
2021
|
-
let o = a(null), l = a(0), d = a(/* @__PURE__ */ new Map()), { hoveredRef:
|
|
2020
|
+
function wt({ segments: e = [], title: t, "data-testid": r }) {
|
|
2021
|
+
let o = a(null), l = a(0), d = a(/* @__PURE__ */ new Map()), { hoveredRef: m, tooltip: g, hitZonesRef: _ } = w(o, {
|
|
2022
2022
|
width: J,
|
|
2023
2023
|
height: Y
|
|
2024
|
-
}),
|
|
2024
|
+
}), S = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
2025
2025
|
return n(() => {
|
|
2026
2026
|
let e = o.current;
|
|
2027
2027
|
if (!e) return;
|
|
2028
|
-
let t =
|
|
2028
|
+
let t = v(e, J, Y);
|
|
2029
2029
|
l.current = 0;
|
|
2030
|
-
let n = J * .5, r = Y * .54, i = J * .22, a =
|
|
2030
|
+
let n = J * .5, r = Y * .54, i = J * .22, a = S.reduce((e, t) => e + t.count, 0), s = Math.max(...S.map((e) => e.count), 1), c, g = () => {
|
|
2031
2031
|
l.current++;
|
|
2032
2032
|
let e = l.current;
|
|
2033
|
-
t.clearRect(0, 0, J, Y),
|
|
2034
|
-
let n = t ===
|
|
2033
|
+
t.clearRect(0, 0, J, Y), t.letterSpacing = f.letterSpacing, _.current = [], d.current.forEach((e, t) => {
|
|
2034
|
+
let n = t === m.current ? 1 : 0, r = e + (n - e) * .12;
|
|
2035
2035
|
Math.abs(r - n) < .005 ? n === 0 ? d.current.delete(t) : d.current.set(t, 1) : d.current.set(t, r);
|
|
2036
|
-
}),
|
|
2037
|
-
let c = o / 3 * Math.PI * 2 - Math.PI / 2, l = n + Math.cos(c) * i, d = r + Math.sin(c) * i,
|
|
2038
|
-
t.beginPath(), t.moveTo(n, r), t.lineTo(l, d), t.strokeStyle =
|
|
2039
|
-
let g = (e * .005 + o * .33) % 1, _ = n + (l - n) * g,
|
|
2040
|
-
|
|
2036
|
+
}), m.current && !d.current.has(m.current) && d.current.set(m.current, 0), b(t, J, Y, e, 40, h(u.blue, .04)), S.forEach((a, o) => {
|
|
2037
|
+
let c = o / 3 * Math.PI * 2 - Math.PI / 2, l = n + Math.cos(c) * i, d = r + Math.sin(c) * i, f = Ct[a.status] ?? u.blue, m = 2 + a.count / s * 8;
|
|
2038
|
+
t.beginPath(), t.moveTo(n, r), t.lineTo(l, d), t.strokeStyle = h(f, .08), t.lineWidth = m * 2, t.stroke(), t.beginPath(), t.moveTo(n, r), t.lineTo(l, d), t.strokeStyle = h(f, .25), t.lineWidth = 1, t.stroke();
|
|
2039
|
+
let g = (e * .005 + o * .33) % 1, _ = n + (l - n) * g, v = r + (d - r) * g;
|
|
2040
|
+
y(t, _, v, 6, f, .4), t.beginPath(), t.arc(_, v, 2, 0, Math.PI * 2), t.fillStyle = h(f, .8), t.fill();
|
|
2041
2041
|
let b = (n + l) / 2, x = (r + d) / 2;
|
|
2042
|
-
t.font =
|
|
2043
|
-
}),
|
|
2044
|
-
let c = o / 3 * Math.PI * 2 - Math.PI / 2, l = n + Math.cos(c) * i, p = r + Math.sin(c) * i,
|
|
2045
|
-
|
|
2046
|
-
let b = t.createRadialGradient(l, p -
|
|
2047
|
-
b.addColorStop(0, m
|
|
2042
|
+
t.font = p.font, t.textAlign = "center", t.textBaseline = "middle", t.fillStyle = h(f, .85), t.fillText(String(a.count), b, x);
|
|
2043
|
+
}), S.forEach((e, o) => {
|
|
2044
|
+
let c = o / 3 * Math.PI * 2 - Math.PI / 2, l = n + Math.cos(c) * i, p = r + Math.sin(c) * i, m = Ct[e.status] ?? u.blue, g = 10 + e.count / s * 18, v = d.current.get(e.status) ?? 0;
|
|
2045
|
+
y(t, l, p, g * 2.5, m, .2 + v * .15);
|
|
2046
|
+
let b = t.createRadialGradient(l, p - g * .2, 0, l, p, g);
|
|
2047
|
+
b.addColorStop(0, h(m, .8 + v * .2)), b.addColorStop(1, h(m, .4 + v * .1)), t.beginPath(), t.arc(l, p, g, 0, Math.PI * 2), t.fillStyle = b, t.fill(), t.font = "bold " + f.font, t.textAlign = "center", t.textBaseline = "middle", t.fillStyle = h(u.t1, .9), t.fillText(e.status, l, p), T(_.current, e.status, l, p, g + 6, {
|
|
2048
2048
|
label: e.status,
|
|
2049
2049
|
value: `${e.count} Early Warnings`,
|
|
2050
2050
|
sublabel: `${Math.round(e.count / a * 100)}%`,
|
|
2051
|
-
color:
|
|
2051
|
+
color: m
|
|
2052
2052
|
});
|
|
2053
2053
|
});
|
|
2054
2054
|
let o = d.current.get("center") ?? 0;
|
|
2055
|
-
|
|
2056
|
-
let
|
|
2057
|
-
|
|
2055
|
+
y(t, n, r, 36, u.t3, .2 + o * .15);
|
|
2056
|
+
let v = t.createRadialGradient(n, r - 4, 0, n, r, 22);
|
|
2057
|
+
v.addColorStop(0, h(u.t2, .9)), v.addColorStop(1, h(u.t3, .5)), t.beginPath(), t.arc(n, r, 22, 0, Math.PI * 2), t.fillStyle = v, t.fill(), t.font = p.font, t.textAlign = "center", t.textBaseline = "middle", t.fillStyle = h(u.t1, .9), t.fillText("EW Status", n, r - 4), t.font = "bold " + f.font, t.fillStyle = u.t1, t.fillText(String(a), n, r + 8), T(_.current, "center", n, r, 28, {
|
|
2058
2058
|
label: "Total EW Status",
|
|
2059
2059
|
value: `${a} Early Warnings`,
|
|
2060
2060
|
color: u.t3
|
|
2061
|
-
}),
|
|
2061
|
+
}), x(t, J, Y, e, .015), c = requestAnimationFrame(g);
|
|
2062
2062
|
};
|
|
2063
|
-
return
|
|
2064
|
-
}, [
|
|
2063
|
+
return g(), () => cancelAnimationFrame(c);
|
|
2064
|
+
}, [S, t]), S.length === 0 ? /* @__PURE__ */ s(I, {
|
|
2065
2065
|
width: J,
|
|
2066
2066
|
height: Y,
|
|
2067
2067
|
"data-testid": r
|
|
@@ -2082,8 +2082,8 @@ function Ct({ segments: e = [], title: t, "data-testid": r }) {
|
|
|
2082
2082
|
display: "block",
|
|
2083
2083
|
borderRadius: 8
|
|
2084
2084
|
}
|
|
2085
|
-
}), /* @__PURE__ */ s(
|
|
2086
|
-
...
|
|
2085
|
+
}), /* @__PURE__ */ s(C, {
|
|
2086
|
+
...g,
|
|
2087
2087
|
parentW: J,
|
|
2088
2088
|
parentH: Y
|
|
2089
2089
|
})]
|
|
@@ -2091,27 +2091,27 @@ function Ct({ segments: e = [], title: t, "data-testid": r }) {
|
|
|
2091
2091
|
}
|
|
2092
2092
|
//#endregion
|
|
2093
2093
|
//#region src/components/trendChart/TrendChart.tsx
|
|
2094
|
-
var
|
|
2095
|
-
function
|
|
2094
|
+
var Tt = 280, X = 96;
|
|
2095
|
+
function Et({ points: e = [], className: t, colors: r }) {
|
|
2096
2096
|
let o = a(null), d = a(/* @__PURE__ */ new Map()), f = a(0), p = i(() => e.map(([e, t]) => {
|
|
2097
2097
|
let n = String(t).match(/-?\d+(\.\d+)?/);
|
|
2098
2098
|
return {
|
|
2099
2099
|
label: e,
|
|
2100
2100
|
value: n ? Number(n[0]) : 0
|
|
2101
2101
|
};
|
|
2102
|
-
}), [e]), { mouseRef:
|
|
2103
|
-
width:
|
|
2102
|
+
}), [e]), { mouseRef: m, hoveredRef: g, tooltip: _, hitZonesRef: b } = w(o, {
|
|
2103
|
+
width: Tt,
|
|
2104
2104
|
height: X
|
|
2105
2105
|
});
|
|
2106
2106
|
return n(() => {
|
|
2107
2107
|
let e = o.current;
|
|
2108
2108
|
if (!e) return;
|
|
2109
|
-
let t =
|
|
2109
|
+
let t = v(e, Tt, X);
|
|
2110
2110
|
f.current = 0;
|
|
2111
2111
|
let n = r?.line ?? u.blue, i = r?.point ?? u.blue, a = r?.axisLine ?? u.bd, s, c = () => {
|
|
2112
2112
|
f.current++;
|
|
2113
2113
|
let e = f.current;
|
|
2114
|
-
if (t.clearRect(0, 0,
|
|
2114
|
+
if (t.clearRect(0, 0, Tt, X), p.length < 2) {
|
|
2115
2115
|
s = requestAnimationFrame(c);
|
|
2116
2116
|
return;
|
|
2117
2117
|
}
|
|
@@ -2120,35 +2120,35 @@ function Tt({ points: e = [], className: t, colors: r }) {
|
|
|
2120
2120
|
right: 12,
|
|
2121
2121
|
top: 16,
|
|
2122
2122
|
bottom: 20
|
|
2123
|
-
}, o =
|
|
2124
|
-
if (
|
|
2123
|
+
}, o = Tt - r.left - r.right, l = X - r.top - r.bottom, _ = p.map((e) => e.value), v = Math.min(..._), x = Math.max(..._) - v || 1, C = (e) => r.left + e / (p.length - 1) * o, w = (e) => r.top + (1 - (e - v) / x) * l, E = 1 - (1 - Math.min(e / 48, 1)) ** 3, D = Math.max(2, Math.floor(E * p.length));
|
|
2124
|
+
if (N(d.current, g.current), b.current = [], t.strokeStyle = h(a, .3), t.lineWidth = .5, t.setLineDash([]), t.beginPath(), t.moveTo(r.left, X - r.bottom), t.lineTo(Tt - r.right, X - r.bottom), t.stroke(), t.font = "9px 'JetBrains Mono', monospace", t.fillStyle = h(u.t4, .9), t.textAlign = "center", p.forEach((e, n) => {
|
|
2125
2125
|
t.fillText(e.label.replace("Day ", "D"), C(n), X - 4);
|
|
2126
|
-
}),
|
|
2126
|
+
}), m.current.over && g.current) {
|
|
2127
2127
|
let e = parseInt(g.current.split("-")[1]);
|
|
2128
|
-
isNaN(e) ||
|
|
2128
|
+
isNaN(e) || S(t, C(e), r.top, r.top + l);
|
|
2129
2129
|
}
|
|
2130
2130
|
if (D > 1) {
|
|
2131
2131
|
let e = t.createLinearGradient(0, r.top, 0, r.top + l);
|
|
2132
|
-
e.addColorStop(0,
|
|
2133
|
-
for (let e = 0; e < D; e++) t.lineTo(C(e),
|
|
2134
|
-
t.lineTo(C(D - 1), r.top + l), t.closePath(), t.fill(), t.strokeStyle =
|
|
2132
|
+
e.addColorStop(0, h(n, .15)), e.addColorStop(1, h(n, 0)), t.fillStyle = e, t.beginPath(), t.moveTo(C(0), r.top + l);
|
|
2133
|
+
for (let e = 0; e < D; e++) t.lineTo(C(e), w(p[e].value));
|
|
2134
|
+
t.lineTo(C(D - 1), r.top + l), t.closePath(), t.fill(), t.strokeStyle = h(n, .8), t.lineWidth = 1.5, t.setLineDash([]), t.beginPath();
|
|
2135
2135
|
for (let e = 0; e < D; e++) {
|
|
2136
|
-
let n = C(e), r =
|
|
2136
|
+
let n = C(e), r = w(p[e].value);
|
|
2137
2137
|
e === 0 ? t.moveTo(n, r) : t.lineTo(n, r);
|
|
2138
2138
|
}
|
|
2139
2139
|
t.stroke();
|
|
2140
2140
|
}
|
|
2141
2141
|
for (let e = 0; e < D; e++) {
|
|
2142
|
-
let n = C(e), r =
|
|
2143
|
-
|
|
2142
|
+
let n = C(e), r = w(p[e].value), a = `tp-${e}`, o = d.current.get(a) ?? 0, s = e === p.length - 1;
|
|
2143
|
+
T(b.current, a, n, r, 10, {
|
|
2144
2144
|
label: p[e].label,
|
|
2145
2145
|
value: String(p[e].value),
|
|
2146
2146
|
color: s ? u.red : i
|
|
2147
|
-
}), o > 0 && !s && (
|
|
2147
|
+
}), o > 0 && !s && (y(t, n, r, 12 * o, i, .2 * o), t.fillStyle = h(i, .8), t.beginPath(), t.arc(n, r, 3 + o * 2, 0, Math.PI * 2), t.fill());
|
|
2148
2148
|
}
|
|
2149
2149
|
if (D >= p.length) {
|
|
2150
|
-
let n = p.length - 1, r = C(n), i =
|
|
2151
|
-
t.shadowColor =
|
|
2150
|
+
let n = p.length - 1, r = C(n), i = w(p[n].value), a = d.current.get(`tp-${n}`) ?? 0, o = j(e, .05, 5e-4), s = 1 + a * .5;
|
|
2151
|
+
t.shadowColor = h(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;
|
|
2152
2152
|
}
|
|
2153
2153
|
s = requestAnimationFrame(c);
|
|
2154
2154
|
};
|
|
@@ -2158,7 +2158,7 @@ function Tt({ points: e = [], className: t, colors: r }) {
|
|
|
2158
2158
|
children: /* @__PURE__ */ c("div", {
|
|
2159
2159
|
style: {
|
|
2160
2160
|
position: "relative",
|
|
2161
|
-
width:
|
|
2161
|
+
width: Tt,
|
|
2162
2162
|
height: X
|
|
2163
2163
|
},
|
|
2164
2164
|
children: [/* @__PURE__ */ s("canvas", {
|
|
@@ -2166,14 +2166,14 @@ function Tt({ points: e = [], className: t, colors: r }) {
|
|
|
2166
2166
|
role: "img",
|
|
2167
2167
|
"aria-label": "trend chart",
|
|
2168
2168
|
style: {
|
|
2169
|
-
width:
|
|
2169
|
+
width: Tt,
|
|
2170
2170
|
height: X,
|
|
2171
2171
|
display: "block",
|
|
2172
2172
|
borderRadius: 8
|
|
2173
2173
|
}
|
|
2174
|
-
}), /* @__PURE__ */ s(
|
|
2175
|
-
...
|
|
2176
|
-
parentW:
|
|
2174
|
+
}), /* @__PURE__ */ s(C, {
|
|
2175
|
+
..._,
|
|
2176
|
+
parentW: Tt,
|
|
2177
2177
|
parentH: X
|
|
2178
2178
|
})]
|
|
2179
2179
|
})
|
|
@@ -2181,137 +2181,137 @@ function Tt({ points: e = [], className: t, colors: r }) {
|
|
|
2181
2181
|
}
|
|
2182
2182
|
//#endregion
|
|
2183
2183
|
//#region src/components/segmentedSplitBarChart/SegmentedSplitBarChart.tsx
|
|
2184
|
-
var
|
|
2185
|
-
function
|
|
2186
|
-
let r = a(null), l = a(/* @__PURE__ */ new Map()), d = a(0), [
|
|
2187
|
-
width:
|
|
2188
|
-
height:
|
|
2184
|
+
var Dt = 680, Ot = 8, kt = 26, At = 14, jt = 16, Mt = 32;
|
|
2185
|
+
function Nt({ items: e = [], "data-testid": t }) {
|
|
2186
|
+
let r = a(null), l = a(/* @__PURE__ */ new Map()), d = a(0), [g, _] = o(!1), b = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), x = i(() => g ? b : b.slice(0, Ot), [b, g]), S = jt + Mt + x.length * (kt + At) - At, { hoveredRef: T, tooltip: D, hitZonesRef: k } = w(r, {
|
|
2187
|
+
width: Dt,
|
|
2188
|
+
height: S
|
|
2189
2189
|
});
|
|
2190
2190
|
return n(() => {
|
|
2191
2191
|
let e = r.current;
|
|
2192
2192
|
if (!e) return;
|
|
2193
|
-
let t =
|
|
2193
|
+
let t = v(e, Dt, S);
|
|
2194
2194
|
d.current = 0;
|
|
2195
|
-
let n =
|
|
2195
|
+
let n = jt, i = Mt, a = kt, o = At, s = Dt - 60 - 28, c = Math.max(...x.map((e) => (e.implemented ?? 0) + (e.unimplemented ?? 0))), g = x.length * (a + o) - o, _ = n + (S - n - i - g) / 2, b, C = () => {
|
|
2196
2196
|
d.current++;
|
|
2197
2197
|
let e = d.current;
|
|
2198
|
-
t.clearRect(0, 0,
|
|
2199
|
-
let n =
|
|
2200
|
-
|
|
2201
|
-
let i =
|
|
2202
|
-
|
|
2198
|
+
t.clearRect(0, 0, Dt, S);
|
|
2199
|
+
let n = O(Math.min(e / 60, 1));
|
|
2200
|
+
N(l.current, T.current), k.current = [], x.forEach((e, r) => {
|
|
2201
|
+
let i = M(n, r, x.length, O), d = _ + r * (a + o), m = (e.implemented ?? 0) + (e.unimplemented ?? 0), g = (e.implemented ?? 0) / c * s * i, v = (e.unimplemented ?? 0) / c * s * i, b = `${e.id}-impl`, S = `${e.id}-un`, C = l.current.get(b) ?? 0, w = l.current.get(S) ?? 0;
|
|
2202
|
+
E(k.current, b, 60, d, g || 1, a, {
|
|
2203
2203
|
label: `${e.name} — Implemented`,
|
|
2204
2204
|
value: `${e.implemented ?? 0} variations`,
|
|
2205
|
-
sublabel: `${Math.round((e.implemented ?? 0) / (
|
|
2205
|
+
sublabel: `${Math.round((e.implemented ?? 0) / (m || 1) * 100)}% complete`,
|
|
2206
2206
|
color: u.green
|
|
2207
|
-
}),
|
|
2207
|
+
}), E(k.current, S, 60 + g, d, v || 1, a, {
|
|
2208
2208
|
label: `${e.name} — Unimplemented`,
|
|
2209
2209
|
value: `${e.unimplemented ?? 0} variations`,
|
|
2210
|
-
sublabel: `${Math.round((e.unimplemented ?? 0) / (
|
|
2210
|
+
sublabel: `${Math.round((e.unimplemented ?? 0) / (m || 1) * 100)}% pending`,
|
|
2211
2211
|
color: u.amber
|
|
2212
|
-
}), t.font =
|
|
2212
|
+
}), t.font = f.font, t.fillStyle = u.t2, t.textAlign = "right", t.fillText(e.abbreviation ?? e.name.slice(0, 6), 52, d + a / 2 + 4), t.fillStyle = h(u.bd, .15), t.beginPath(), t.roundRect(60, d, m / c * s, a, 4), t.fill(), g > 0 && (C > 0 && y(t, 60 + g / 2, d + a / 2, g * .3, u.green, .12 * C), t.fillStyle = h(u.green, .6 + C * .2), t.beginPath(), t.roundRect(60, d, g, a, [
|
|
2213
2213
|
4,
|
|
2214
2214
|
0,
|
|
2215
2215
|
0,
|
|
2216
2216
|
4
|
|
2217
|
-
]), t.fill(),
|
|
2217
|
+
]), t.fill(), g > 28 && i > .5 && (t.font = p.font, t.fillStyle = C > 0 ? u.green : u.t2, t.textAlign = "center", t.fillText(String(e.implemented ?? 0), 60 + g / 2, d + a / 2 + 4))), v > 0 && (w > 0 && y(t, 60 + g + v / 2, d + a / 2, v * .3, u.amber, .12 * w), t.fillStyle = h(u.amber, .18 + w * .18), t.strokeStyle = h(u.amber, .3 + w * .3), t.lineWidth = 1, t.beginPath(), t.roundRect(60 + g, d, v, a, [
|
|
2218
2218
|
0,
|
|
2219
2219
|
4,
|
|
2220
2220
|
4,
|
|
2221
2221
|
0
|
|
2222
|
-
]), t.fill(), t.stroke(),
|
|
2222
|
+
]), t.fill(), t.stroke(), v > 28 && i > .5 && (t.font = p.font, t.fillStyle = w > 0 ? u.amber : u.t2, t.textAlign = "center", t.fillText(String(e.unimplemented ?? 0), 60 + g + v / 2, d + a / 2 + 4))), g > 0 && v > 0 && (t.strokeStyle = h(u.bg, .7), t.lineWidth = 2, t.beginPath(), t.moveTo(60 + g, d), t.lineTo(60 + g, d + a), t.stroke());
|
|
2223
2223
|
});
|
|
2224
|
-
let r =
|
|
2225
|
-
t.font =
|
|
2224
|
+
let r = _ + g + 24, i = 60 + s / 2;
|
|
2225
|
+
t.font = m.font, t.textAlign = "right", t.fillStyle = u.green, t.fillText("■ Implemented", i - 10, r), t.textAlign = "left", t.fillStyle = m.color, t.fillText("■ Unimplemented", i + 10, r), b = requestAnimationFrame(C);
|
|
2226
2226
|
};
|
|
2227
|
-
return
|
|
2228
|
-
}, [
|
|
2229
|
-
width:
|
|
2227
|
+
return C(), () => cancelAnimationFrame(b);
|
|
2228
|
+
}, [x, S]), b.length === 0 ? /* @__PURE__ */ s(I, {
|
|
2229
|
+
width: Dt,
|
|
2230
2230
|
height: 160,
|
|
2231
2231
|
"data-testid": t
|
|
2232
2232
|
}) : /* @__PURE__ */ c("div", {
|
|
2233
2233
|
"data-testid": t,
|
|
2234
|
-
style: { width:
|
|
2234
|
+
style: { width: Dt },
|
|
2235
2235
|
children: [/* @__PURE__ */ c("div", {
|
|
2236
2236
|
style: {
|
|
2237
2237
|
position: "relative",
|
|
2238
|
-
width:
|
|
2239
|
-
height:
|
|
2238
|
+
width: Dt,
|
|
2239
|
+
height: S
|
|
2240
2240
|
},
|
|
2241
2241
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2242
2242
|
ref: r,
|
|
2243
2243
|
role: "img",
|
|
2244
2244
|
"aria-label": "Implemented vs unimplemented variations per contractor — split bar",
|
|
2245
2245
|
style: {
|
|
2246
|
-
width:
|
|
2247
|
-
height:
|
|
2246
|
+
width: Dt,
|
|
2247
|
+
height: S,
|
|
2248
2248
|
display: "block"
|
|
2249
2249
|
}
|
|
2250
|
-
}), /* @__PURE__ */ s(
|
|
2251
|
-
...
|
|
2252
|
-
parentW:
|
|
2253
|
-
parentH:
|
|
2250
|
+
}), /* @__PURE__ */ s(C, {
|
|
2251
|
+
...D,
|
|
2252
|
+
parentW: Dt,
|
|
2253
|
+
parentH: S
|
|
2254
2254
|
})]
|
|
2255
|
-
}),
|
|
2255
|
+
}), b.length > Ot && /* @__PURE__ */ s("div", {
|
|
2256
2256
|
style: { marginTop: 8 },
|
|
2257
2257
|
children: /* @__PURE__ */ s(ae, {
|
|
2258
|
-
expanded:
|
|
2259
|
-
onToggle: () =>
|
|
2258
|
+
expanded: g,
|
|
2259
|
+
onToggle: () => _((e) => !e)
|
|
2260
2260
|
})
|
|
2261
2261
|
})]
|
|
2262
2262
|
});
|
|
2263
2263
|
}
|
|
2264
2264
|
//#endregion
|
|
2265
2265
|
//#region src/components/weeklyFlow/WeeklyFlow.tsx
|
|
2266
|
-
var
|
|
2267
|
-
function
|
|
2268
|
-
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip:
|
|
2269
|
-
width:
|
|
2270
|
-
height:
|
|
2266
|
+
var Pt = 800, Ft = 360;
|
|
2267
|
+
function It({ items: e = [], "data-testid": t }) {
|
|
2268
|
+
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: m, hitZonesRef: g } = w(r, {
|
|
2269
|
+
width: Pt,
|
|
2270
|
+
height: Ft
|
|
2271
2271
|
});
|
|
2272
2272
|
return n(() => {
|
|
2273
2273
|
let t = r.current;
|
|
2274
2274
|
if (!t) return;
|
|
2275
|
-
let n =
|
|
2275
|
+
let n = v(t, Pt, Ft);
|
|
2276
2276
|
o.current = 0;
|
|
2277
|
-
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),
|
|
2278
|
-
let n = Math.max(24, (e.total ?? 0) / (c || 1) *
|
|
2277
|
+
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), m = Ft - 20 - 26, _ = m - 6 * (e.length - 1), b = 20, x = e.map((e, t) => {
|
|
2278
|
+
let n = Math.max(24, (e.total ?? 0) / (c || 1) * _), r = {
|
|
2279
2279
|
x: 100 - 110 / 2,
|
|
2280
|
-
y:
|
|
2280
|
+
y: b,
|
|
2281
2281
|
h: n,
|
|
2282
|
-
cy:
|
|
2282
|
+
cy: b + n / 2,
|
|
2283
2283
|
c: e,
|
|
2284
2284
|
color: d[t % d.length]
|
|
2285
2285
|
};
|
|
2286
|
-
return
|
|
2287
|
-
}),
|
|
2286
|
+
return b += n + 6, r;
|
|
2287
|
+
}), S = _ - 14, C = Math.max(28, a / c * S), w = Math.max(18, s / c * S), T = 20 + (m - (C + w + 14)) / 2, O = {
|
|
2288
2288
|
x: 420 - 110 / 2,
|
|
2289
|
-
y:
|
|
2290
|
-
h:
|
|
2291
|
-
cy:
|
|
2292
|
-
},
|
|
2289
|
+
y: T,
|
|
2290
|
+
h: C,
|
|
2291
|
+
cy: T + C / 2
|
|
2292
|
+
}, k = {
|
|
2293
2293
|
x: 420 - 110 / 2,
|
|
2294
|
-
y:
|
|
2295
|
-
h:
|
|
2296
|
-
cy:
|
|
2297
|
-
},
|
|
2294
|
+
y: T + C + 14,
|
|
2295
|
+
h: w,
|
|
2296
|
+
cy: T + C + 14 + w / 2
|
|
2297
|
+
}, A = {
|
|
2298
2298
|
x: 720 - 110 / 2,
|
|
2299
2299
|
y: 20,
|
|
2300
|
-
h:
|
|
2301
|
-
cy: 20 +
|
|
2302
|
-
},
|
|
2300
|
+
h: m,
|
|
2301
|
+
cy: 20 + m / 2
|
|
2302
|
+
}, j, P = () => {
|
|
2303
2303
|
o.current++;
|
|
2304
2304
|
let t = o.current;
|
|
2305
|
-
n.clearRect(0, 0,
|
|
2306
|
-
let r =
|
|
2307
|
-
if (
|
|
2308
|
-
let c =
|
|
2305
|
+
n.clearRect(0, 0, Pt, Ft), n.letterSpacing = f.letterSpacing;
|
|
2306
|
+
let r = D(Math.min(t / 80, 1));
|
|
2307
|
+
if (N(i.current, l.current), g.current = [], e.forEach((t, o) => {
|
|
2308
|
+
let c = x[o], l = M(r, o, e.length, D), u = i.current.get(t.id) ?? 0;
|
|
2309
2309
|
if (l < .01) return;
|
|
2310
|
-
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 *
|
|
2311
|
-
|
|
2310
|
+
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), y = O.y + e.slice(0, o).reduce((e, t) => e + (t.base ?? 0) / a * C, 0) + _ / 2, b = k.y + e.slice(0, o).reduce((e, t) => e + (t.variation ?? 0) / s * w, 0) + v / 2, S = u * .2 + .18;
|
|
2311
|
+
Lt(n, c.x + 110, h, 420 - 110 / 2, y, _ * l, c.color, S), Lt(n, c.x + 110, g, 420 - 110 / 2, b, v * l, c.color, S * .75);
|
|
2312
2312
|
}), r > .3) {
|
|
2313
|
-
let e = Math.min(1, (r - .3) / .7), t =
|
|
2314
|
-
|
|
2313
|
+
let e = Math.min(1, (r - .3) / .7), t = A.y + a / c * m / 2, i = A.y + m - s / c * m / 2;
|
|
2314
|
+
Lt(n, 475, O.cy, 720 - 110 / 2, t, C * e, u.blue, .25 * e), Lt(n, 475, k.cy, 720 - 110 / 2, i, w * e, u.amber, .22 * e);
|
|
2315
2315
|
}
|
|
2316
2316
|
if ([
|
|
2317
2317
|
"Contractors",
|
|
@@ -2323,136 +2323,136 @@ function Ft({ items: e = [], "data-testid": t }) {
|
|
|
2323
2323
|
420,
|
|
2324
2324
|
720
|
|
2325
2325
|
][t];
|
|
2326
|
-
n.font =
|
|
2326
|
+
n.font = f.font, n.fillStyle = h(u.t3, .5), n.textAlign = "center", n.fillText(e, r, Ft - 8);
|
|
2327
2327
|
}), e.forEach((t, a) => {
|
|
2328
|
-
let o =
|
|
2329
|
-
|
|
2328
|
+
let o = x[a], s = M(r, a, e.length, D), c = i.current.get(t.id) ?? 0;
|
|
2329
|
+
E(g.current, t.id, o.x, o.y, 110, o.h, {
|
|
2330
2330
|
label: t.name,
|
|
2331
2331
|
value: `£${t.total ?? 0}M total commitment`,
|
|
2332
2332
|
sublabel: `Base £${t.base ?? 0}M + Variations £${t.variation ?? 0}M`,
|
|
2333
2333
|
color: o.color
|
|
2334
|
-
}), c > 0 &&
|
|
2334
|
+
}), c > 0 && y(n, o.x + 110 / 2, o.cy, 110 * .6, o.color, .12 * c), n.fillStyle = h(o.color, (.3 + c * .15) * s), n.strokeStyle = h(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 = f.font, n.fillStyle = c > 0 ? o.color : h(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 = h(u.t3, .8), n.fillText(`£${t.total ?? 0}M`, o.x + 110 / 2, o.cy + 7)), n.globalAlpha = 1, n.textBaseline = "alphabetic");
|
|
2335
2335
|
}), r > .2) {
|
|
2336
2336
|
let e = Math.min(1, (r - .2) / .4);
|
|
2337
|
-
|
|
2337
|
+
y(n, 420, O.cy, 30, u.blue, .1 * e), n.fillStyle = h(u.blue, .3 * e), n.strokeStyle = h(u.blue, .5 * e), n.lineWidth = 1, n.beginPath(), n.roundRect(O.x, O.y, 110, O.h * e, 4), n.fill(), n.stroke(), n.globalAlpha = e, n.textBaseline = "middle", n.font = f.font, n.fillStyle = u.blue, n.textAlign = "center", n.fillText("Base Value", 420, O.cy - 6), n.font = p.font, n.fillStyle = p.color, n.fillText(`£${a}M`, 420, O.cy + 8), n.globalAlpha = 1, n.textBaseline = "alphabetic", y(n, 420, k.cy, 24, u.amber, .1 * e), n.fillStyle = h(u.amber, .22 * e), n.strokeStyle = h(u.amber, .4 * e), n.beginPath(), n.roundRect(k.x, k.y, 110, k.h * e, 4), n.fill(), n.stroke(), n.globalAlpha = e, n.textBaseline = "middle", n.font = f.font, n.fillStyle = u.amber, n.textAlign = "center", n.fillText("Variations", 420, k.cy - 4), n.font = p.font, n.fillStyle = p.color, n.fillText(`£${s}M`, 420, k.cy + 8), n.globalAlpha = 1, n.textBaseline = "alphabetic";
|
|
2338
2338
|
}
|
|
2339
2339
|
if (r > .5) {
|
|
2340
2340
|
let e = Math.min(1, (r - .5) / .5);
|
|
2341
|
-
|
|
2341
|
+
y(n, 720, A.cy, 44, u.blue, .2 * e), n.fillStyle = h(u.blue, .25 * e), n.strokeStyle = h(u.blue, .6 * e), n.lineWidth = 1.5, n.beginPath(), n.roundRect(A.x, A.y, 110, A.h * e, 6), n.fill(), n.stroke(), n.globalAlpha = e, n.textBaseline = "middle", n.font = f.font, n.fillStyle = u.t2, n.textAlign = "center", n.fillText("Total Commitment", 720, A.cy - 12), n.font = p.font, n.fillStyle = u.blue, n.fillText(`£${c}M`, 720, A.cy + 6), n.globalAlpha = 1, n.textBaseline = "alphabetic";
|
|
2342
2342
|
}
|
|
2343
|
-
|
|
2343
|
+
j = requestAnimationFrame(P);
|
|
2344
2344
|
};
|
|
2345
|
-
return
|
|
2345
|
+
return P(), () => cancelAnimationFrame(j);
|
|
2346
2346
|
}, [e]), /* @__PURE__ */ c("div", {
|
|
2347
2347
|
"data-testid": t,
|
|
2348
2348
|
style: {
|
|
2349
2349
|
position: "relative",
|
|
2350
|
-
width:
|
|
2351
|
-
height:
|
|
2350
|
+
width: Pt,
|
|
2351
|
+
height: Ft
|
|
2352
2352
|
},
|
|
2353
2353
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2354
2354
|
ref: r,
|
|
2355
2355
|
role: "img",
|
|
2356
2356
|
"aria-label": "Weekly report flow — base value and variations per contractor flowing to total commitment",
|
|
2357
2357
|
style: {
|
|
2358
|
-
width:
|
|
2359
|
-
height:
|
|
2358
|
+
width: Pt,
|
|
2359
|
+
height: Ft,
|
|
2360
2360
|
display: "block"
|
|
2361
2361
|
}
|
|
2362
|
-
}), /* @__PURE__ */ s(
|
|
2363
|
-
...
|
|
2364
|
-
parentW:
|
|
2365
|
-
parentH:
|
|
2362
|
+
}), /* @__PURE__ */ s(C, {
|
|
2363
|
+
...m,
|
|
2364
|
+
parentW: Pt,
|
|
2365
|
+
parentH: Ft
|
|
2366
2366
|
})]
|
|
2367
2367
|
});
|
|
2368
2368
|
}
|
|
2369
|
-
function
|
|
2369
|
+
function Lt(e, t, n, r, i, a, o, s) {
|
|
2370
2370
|
let c = (t + r) / 2;
|
|
2371
|
-
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 =
|
|
2371
|
+
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 = h(o, s), e.fill();
|
|
2372
2372
|
}
|
|
2373
2373
|
//#endregion
|
|
2374
2374
|
//#region src/components/visualizationRenderer/VisualizationRenderer.tsx
|
|
2375
|
-
function
|
|
2376
|
-
return e.type === "line" ? /* @__PURE__ */ s(
|
|
2375
|
+
function Rt({ config: e, className: t }) {
|
|
2376
|
+
return e.type === "line" ? /* @__PURE__ */ s(Le, {
|
|
2377
2377
|
rows: e.rows,
|
|
2378
2378
|
className: t
|
|
2379
|
-
}) : e.type === "area" ? /* @__PURE__ */ s(
|
|
2379
|
+
}) : e.type === "area" ? /* @__PURE__ */ s(te, {
|
|
2380
2380
|
rows: e.rows,
|
|
2381
2381
|
className: t
|
|
2382
2382
|
}) : e.type === "bar" ? /* @__PURE__ */ s(ie, {
|
|
2383
2383
|
rows: e.rows,
|
|
2384
2384
|
className: t
|
|
2385
|
-
}) : e.type === "pie" ? /* @__PURE__ */ s(
|
|
2385
|
+
}) : e.type === "pie" ? /* @__PURE__ */ s(Ye, {
|
|
2386
2386
|
rows: e.rows,
|
|
2387
2387
|
variant: "pie",
|
|
2388
2388
|
className: t
|
|
2389
|
-
}) : e.type === "donut" ? /* @__PURE__ */ s(
|
|
2389
|
+
}) : e.type === "donut" ? /* @__PURE__ */ s(Ye, {
|
|
2390
2390
|
rows: e.rows,
|
|
2391
2391
|
variant: "donut",
|
|
2392
2392
|
className: t
|
|
2393
|
-
}) : e.type === "sankey" ? /* @__PURE__ */ s(
|
|
2393
|
+
}) : e.type === "sankey" ? /* @__PURE__ */ s(ot, {
|
|
2394
2394
|
rows: e.rows,
|
|
2395
2395
|
className: t
|
|
2396
|
-
}) : e.type === "flow" ? /* @__PURE__ */ s(
|
|
2396
|
+
}) : e.type === "flow" ? /* @__PURE__ */ s(at, {
|
|
2397
2397
|
selectedEntity: e.selectedEntity,
|
|
2398
2398
|
className: t
|
|
2399
|
-
}) : e.type === "trend" ? /* @__PURE__ */ s(
|
|
2399
|
+
}) : e.type === "trend" ? /* @__PURE__ */ s(Et, {
|
|
2400
2400
|
points: e.points,
|
|
2401
2401
|
className: t
|
|
2402
|
-
}) : e.type === "mini-bars" ? /* @__PURE__ */ s(
|
|
2402
|
+
}) : e.type === "mini-bars" ? /* @__PURE__ */ s(Be, {
|
|
2403
2403
|
rows: e.rows,
|
|
2404
2404
|
className: t
|
|
2405
|
-
}) : e.type === "stacked-horizontal-bar-chart" ? /* @__PURE__ */ s(
|
|
2405
|
+
}) : e.type === "stacked-horizontal-bar-chart" ? /* @__PURE__ */ s(Ae, { data: e.data }) : e.type === "multi-metric-constellation-chart" ? /* @__PURE__ */ s(Ce, { items: e.items }) : e.type === "progress-race-chart" ? /* @__PURE__ */ s(fe, { items: e.items }) : e.type === "hub-and-spoke-radial-chart" ? /* @__PURE__ */ s(wt, {
|
|
2406
2406
|
segments: e.segments,
|
|
2407
2407
|
title: e.title
|
|
2408
|
-
}) : e.type === "dot-matrix-chart" ? /* @__PURE__ */ s(
|
|
2408
|
+
}) : e.type === "dot-matrix-chart" ? /* @__PURE__ */ s(Ie, { items: e.items }) : e.type === "ranked-card-leaderboard" ? /* @__PURE__ */ s(Fe, { items: e.items }) : e.type === "proportional-band-chart" ? /* @__PURE__ */ s(St, { severities: e.severities }) : e.type === "radial-fan-tree-chart" ? /* @__PURE__ */ s(Ge, {
|
|
2409
2409
|
total: e.total,
|
|
2410
2410
|
items: e.items
|
|
2411
2411
|
}) : e.type === "semi-circular-gauge-chart" ? /* @__PURE__ */ s(he, {
|
|
2412
2412
|
value: e.value,
|
|
2413
2413
|
confirmed: e.confirmed,
|
|
2414
2414
|
total: e.total
|
|
2415
|
-
}) : e.type === "segmented-split-bar-chart" ? /* @__PURE__ */ s(
|
|
2415
|
+
}) : e.type === "segmented-split-bar-chart" ? /* @__PURE__ */ s(Nt, { items: e.items }) : e.type === "balance-scale-chart" ? /* @__PURE__ */ s(lt, {
|
|
2416
2416
|
left: e.left,
|
|
2417
2417
|
right: e.right
|
|
2418
|
-
}) : e.type === "area-line-chart" ? /* @__PURE__ */ s(
|
|
2418
|
+
}) : e.type === "area-line-chart" ? /* @__PURE__ */ s(dt, { points: e.points }) : e.type === "trend-view" ? /* @__PURE__ */ s(vt, { points: e.points }) : e.type === "weekly-flow" ? /* @__PURE__ */ s(It, { items: e.items }) : /* @__PURE__ */ s("div", {
|
|
2419
2419
|
className: "viz-empty",
|
|
2420
2420
|
children: "Visualization unavailable"
|
|
2421
2421
|
});
|
|
2422
2422
|
}
|
|
2423
2423
|
//#endregion
|
|
2424
2424
|
//#region src/utils/mounts.tsx
|
|
2425
|
-
var
|
|
2426
|
-
function
|
|
2425
|
+
var zt = [];
|
|
2426
|
+
function Bt(e) {
|
|
2427
2427
|
try {
|
|
2428
2428
|
return JSON.parse(decodeURIComponent(e));
|
|
2429
2429
|
} catch {
|
|
2430
2430
|
return null;
|
|
2431
2431
|
}
|
|
2432
2432
|
}
|
|
2433
|
-
function
|
|
2434
|
-
for (;
|
|
2435
|
-
let e =
|
|
2433
|
+
function Vt() {
|
|
2434
|
+
for (; zt.length;) {
|
|
2435
|
+
let e = zt.pop();
|
|
2436
2436
|
e && e.unmount();
|
|
2437
2437
|
}
|
|
2438
2438
|
}
|
|
2439
|
-
function
|
|
2440
|
-
|
|
2439
|
+
function Ht() {
|
|
2440
|
+
Vt(), document.querySelectorAll("[data-d3-viz]").forEach((t) => {
|
|
2441
2441
|
let n = t.dataset.d3Viz;
|
|
2442
2442
|
if (!n) return;
|
|
2443
|
-
let r =
|
|
2443
|
+
let r = Bt(n);
|
|
2444
2444
|
if (!r) return;
|
|
2445
2445
|
let i = e(t);
|
|
2446
|
-
|
|
2446
|
+
zt.push(i), i.render(/* @__PURE__ */ s(Rt, { config: r }));
|
|
2447
2447
|
});
|
|
2448
2448
|
}
|
|
2449
|
-
function
|
|
2449
|
+
function Ut(e) {
|
|
2450
2450
|
return encodeURIComponent(JSON.stringify(e));
|
|
2451
2451
|
}
|
|
2452
2452
|
//#endregion
|
|
2453
2453
|
//#region src/components/donutChart/DonutChart.tsx
|
|
2454
|
-
function
|
|
2455
|
-
return /* @__PURE__ */ s(
|
|
2454
|
+
function Wt({ rows: e = [], className: t, colors: n }) {
|
|
2455
|
+
return /* @__PURE__ */ s(Ye, {
|
|
2456
2456
|
rows: e,
|
|
2457
2457
|
variant: "donut",
|
|
2458
2458
|
className: t,
|
|
@@ -2471,7 +2471,7 @@ var Z = {
|
|
|
2471
2471
|
red: u.red,
|
|
2472
2472
|
amber: u.amber,
|
|
2473
2473
|
green: u.green
|
|
2474
|
-
}, Q = "'Satoshi Variable', 'DM Sans', sans-serif",
|
|
2474
|
+
}, Q = "'Satoshi Variable', 'DM Sans', sans-serif", Gt = {
|
|
2475
2475
|
color: "#F7F7F7",
|
|
2476
2476
|
fontFamily: Q,
|
|
2477
2477
|
fontSize: 24,
|
|
@@ -2484,7 +2484,7 @@ var Z = {
|
|
|
2484
2484
|
fontWeight: 400,
|
|
2485
2485
|
lineHeight: "20px"
|
|
2486
2486
|
};
|
|
2487
|
-
function
|
|
2487
|
+
function Kt({ chips: e = [] }) {
|
|
2488
2488
|
return /* @__PURE__ */ s("div", {
|
|
2489
2489
|
style: {
|
|
2490
2490
|
display: "flex",
|
|
@@ -2506,7 +2506,7 @@ function Gt({ chips: e = [] }) {
|
|
|
2506
2506
|
},
|
|
2507
2507
|
children: [/* @__PURE__ */ s("span", {
|
|
2508
2508
|
style: {
|
|
2509
|
-
...
|
|
2509
|
+
...Gt,
|
|
2510
2510
|
color: e.color ?? Z.t1
|
|
2511
2511
|
},
|
|
2512
2512
|
children: e.value
|
|
@@ -2520,7 +2520,7 @@ function Gt({ chips: e = [] }) {
|
|
|
2520
2520
|
}, t))
|
|
2521
2521
|
});
|
|
2522
2522
|
}
|
|
2523
|
-
function
|
|
2523
|
+
function qt({ items: e = [] }) {
|
|
2524
2524
|
return /* @__PURE__ */ s("div", {
|
|
2525
2525
|
style: {
|
|
2526
2526
|
display: "flex",
|
|
@@ -2543,7 +2543,7 @@ function Kt({ items: e = [] }) {
|
|
|
2543
2543
|
},
|
|
2544
2544
|
children: [/* @__PURE__ */ s("div", {
|
|
2545
2545
|
style: {
|
|
2546
|
-
...
|
|
2546
|
+
...Gt,
|
|
2547
2547
|
color: e.color ?? Z.t1
|
|
2548
2548
|
},
|
|
2549
2549
|
children: e.value
|
|
@@ -2554,7 +2554,7 @@ function Kt({ items: e = [] }) {
|
|
|
2554
2554
|
}, t))
|
|
2555
2555
|
});
|
|
2556
2556
|
}
|
|
2557
|
-
function
|
|
2557
|
+
function Jt({ items: e = [] }) {
|
|
2558
2558
|
return /* @__PURE__ */ s("div", {
|
|
2559
2559
|
style: {
|
|
2560
2560
|
display: "flex",
|
|
@@ -2586,7 +2586,7 @@ function qt({ items: e = [] }) {
|
|
|
2586
2586
|
}),
|
|
2587
2587
|
/* @__PURE__ */ s("span", {
|
|
2588
2588
|
style: {
|
|
2589
|
-
...
|
|
2589
|
+
...Gt,
|
|
2590
2590
|
fontSize: 16,
|
|
2591
2591
|
color: e.color ?? Z.t1,
|
|
2592
2592
|
minWidth: 70,
|
|
@@ -2605,7 +2605,7 @@ function qt({ items: e = [] }) {
|
|
|
2605
2605
|
}, t))
|
|
2606
2606
|
});
|
|
2607
2607
|
}
|
|
2608
|
-
function
|
|
2608
|
+
function Yt({ items: e = [] }) {
|
|
2609
2609
|
return /* @__PURE__ */ s("div", {
|
|
2610
2610
|
style: {
|
|
2611
2611
|
display: "flex",
|
|
@@ -2628,7 +2628,7 @@ function Jt({ items: e = [] }) {
|
|
|
2628
2628
|
},
|
|
2629
2629
|
children: [/* @__PURE__ */ s("div", {
|
|
2630
2630
|
style: {
|
|
2631
|
-
...
|
|
2631
|
+
...Gt,
|
|
2632
2632
|
color: e.color ?? Z.t1
|
|
2633
2633
|
},
|
|
2634
2634
|
children: e.value
|
|
@@ -2639,12 +2639,12 @@ function Jt({ items: e = [] }) {
|
|
|
2639
2639
|
}, t))
|
|
2640
2640
|
});
|
|
2641
2641
|
}
|
|
2642
|
-
var
|
|
2642
|
+
var Xt = {
|
|
2643
2643
|
red: Z.red,
|
|
2644
2644
|
amber: Z.amber,
|
|
2645
2645
|
green: Z.green
|
|
2646
2646
|
};
|
|
2647
|
-
function
|
|
2647
|
+
function Zt({ items: e = [] }) {
|
|
2648
2648
|
return /* @__PURE__ */ s("div", {
|
|
2649
2649
|
style: {
|
|
2650
2650
|
display: "flex",
|
|
@@ -2652,7 +2652,7 @@ function Xt({ items: e = [] }) {
|
|
|
2652
2652
|
gap: 5
|
|
2653
2653
|
},
|
|
2654
2654
|
children: e.map((e, t) => {
|
|
2655
|
-
let n =
|
|
2655
|
+
let n = Xt[e.severity];
|
|
2656
2656
|
return /* @__PURE__ */ c("div", {
|
|
2657
2657
|
style: {
|
|
2658
2658
|
display: "flex",
|
|
@@ -2677,7 +2677,7 @@ function Xt({ items: e = [] }) {
|
|
|
2677
2677
|
})
|
|
2678
2678
|
});
|
|
2679
2679
|
}
|
|
2680
|
-
function
|
|
2680
|
+
function Qt({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
2681
2681
|
let a = t - e;
|
|
2682
2682
|
return /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("div", {
|
|
2683
2683
|
style: {
|
|
@@ -2787,10 +2787,10 @@ function Zt({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
|
2787
2787
|
}, r);
|
|
2788
2788
|
})
|
|
2789
2789
|
]
|
|
2790
|
-
}), i && i.length > 0 && /* @__PURE__ */ s(
|
|
2790
|
+
}), i && i.length > 0 && /* @__PURE__ */ s(Kt, { chips: i })] });
|
|
2791
2791
|
}
|
|
2792
|
-
function
|
|
2793
|
-
let f = r ?? u.blue, p = l ?? u.
|
|
2792
|
+
function $t({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i, rightLabel: a, rightValue: o, rightColor: l, chips: d }) {
|
|
2793
|
+
let f = r ?? u.blue, p = l ?? u.blue;
|
|
2794
2794
|
return /* @__PURE__ */ c("div", { children: [
|
|
2795
2795
|
/* @__PURE__ */ c("div", {
|
|
2796
2796
|
style: {
|
|
@@ -2883,10 +2883,10 @@ function Qt({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
2883
2883
|
})
|
|
2884
2884
|
})]
|
|
2885
2885
|
}),
|
|
2886
|
-
d && d.length > 0 && /* @__PURE__ */ s(
|
|
2886
|
+
d && d.length > 0 && /* @__PURE__ */ s(Kt, { chips: d })
|
|
2887
2887
|
] });
|
|
2888
2888
|
}
|
|
2889
|
-
function
|
|
2889
|
+
function en({ pct: e, label: t, color: n, chips: r }) {
|
|
2890
2890
|
let i = n ?? u.blue, a = 2 * Math.PI * 30, o = a * (1 - e / 100);
|
|
2891
2891
|
return /* @__PURE__ */ c("div", {
|
|
2892
2892
|
style: {
|
|
@@ -2967,7 +2967,7 @@ function $t({ pct: e, label: t, color: n, chips: r }) {
|
|
|
2967
2967
|
},
|
|
2968
2968
|
children: [/* @__PURE__ */ s("span", {
|
|
2969
2969
|
style: {
|
|
2970
|
-
...
|
|
2970
|
+
...Gt,
|
|
2971
2971
|
color: e.color ?? Z.t1
|
|
2972
2972
|
},
|
|
2973
2973
|
children: e.value
|
|
@@ -2980,16 +2980,16 @@ function $t({ pct: e, label: t, color: n, chips: r }) {
|
|
|
2980
2980
|
})]
|
|
2981
2981
|
});
|
|
2982
2982
|
}
|
|
2983
|
-
var
|
|
2983
|
+
var tn = {
|
|
2984
2984
|
green: "#34D39918",
|
|
2985
2985
|
amber: "#FBBF2418",
|
|
2986
2986
|
red: "#F0606018"
|
|
2987
|
-
},
|
|
2987
|
+
}, nn = {
|
|
2988
2988
|
green: "#34D399",
|
|
2989
2989
|
amber: "#FBBF24",
|
|
2990
2990
|
red: "#F06060"
|
|
2991
2991
|
};
|
|
2992
|
-
function
|
|
2992
|
+
function rn({ items: e = [] }) {
|
|
2993
2993
|
return /* @__PURE__ */ s("div", {
|
|
2994
2994
|
style: {
|
|
2995
2995
|
display: "flex",
|
|
@@ -3053,8 +3053,8 @@ function nn({ items: e = [] }) {
|
|
|
3053
3053
|
style: {
|
|
3054
3054
|
fontSize: 16,
|
|
3055
3055
|
fontWeight: 600,
|
|
3056
|
-
color:
|
|
3057
|
-
background:
|
|
3056
|
+
color: nn[e.badgeSeverity],
|
|
3057
|
+
background: tn[e.badgeSeverity],
|
|
3058
3058
|
padding: "2px 7px",
|
|
3059
3059
|
borderRadius: 4,
|
|
3060
3060
|
fontFamily: Q,
|
|
@@ -3077,12 +3077,12 @@ function nn({ items: e = [] }) {
|
|
|
3077
3077
|
}, t))
|
|
3078
3078
|
});
|
|
3079
3079
|
}
|
|
3080
|
-
var
|
|
3080
|
+
var an = {
|
|
3081
3081
|
red: Z.red,
|
|
3082
3082
|
amber: Z.amber,
|
|
3083
3083
|
green: Z.green
|
|
3084
3084
|
};
|
|
3085
|
-
function
|
|
3085
|
+
function on({ items: e = [] }) {
|
|
3086
3086
|
return /* @__PURE__ */ s("div", {
|
|
3087
3087
|
style: {
|
|
3088
3088
|
display: "flex",
|
|
@@ -3090,7 +3090,7 @@ function an({ items: e = [] }) {
|
|
|
3090
3090
|
gap: 5
|
|
3091
3091
|
},
|
|
3092
3092
|
children: e.map((e, t) => {
|
|
3093
|
-
let n =
|
|
3093
|
+
let n = an[e.severity];
|
|
3094
3094
|
return /* @__PURE__ */ c("div", {
|
|
3095
3095
|
style: {
|
|
3096
3096
|
display: "flex",
|
|
@@ -3142,7 +3142,7 @@ function an({ items: e = [] }) {
|
|
|
3142
3142
|
})
|
|
3143
3143
|
});
|
|
3144
3144
|
}
|
|
3145
|
-
function
|
|
3145
|
+
function sn({ columns: e = [], rows: t = [] }) {
|
|
3146
3146
|
return /* @__PURE__ */ c("div", {
|
|
3147
3147
|
style: {
|
|
3148
3148
|
display: "flex",
|
|
@@ -3205,7 +3205,7 @@ function on({ columns: e = [], rows: t = [] }) {
|
|
|
3205
3205
|
}, t))]
|
|
3206
3206
|
});
|
|
3207
3207
|
}
|
|
3208
|
-
function
|
|
3208
|
+
function cn({ text: e }) {
|
|
3209
3209
|
return /* @__PURE__ */ c("div", {
|
|
3210
3210
|
style: {
|
|
3211
3211
|
padding: "8px 12px",
|
|
@@ -3230,22 +3230,22 @@ function sn({ text: e }) {
|
|
|
3230
3230
|
})]
|
|
3231
3231
|
});
|
|
3232
3232
|
}
|
|
3233
|
-
function
|
|
3233
|
+
function ln({ block: e }) {
|
|
3234
3234
|
if (!e) return null;
|
|
3235
3235
|
let t = (() => {
|
|
3236
3236
|
switch (e.type) {
|
|
3237
|
-
case "stats": return /* @__PURE__ */ s(
|
|
3238
|
-
case "ranked": return /* @__PURE__ */ s(
|
|
3239
|
-
case "chips": return /* @__PURE__ */ s(
|
|
3240
|
-
case "badges": return /* @__PURE__ */ s(
|
|
3241
|
-
case "dot-strip": return /* @__PURE__ */ s(
|
|
3237
|
+
case "stats": return /* @__PURE__ */ s(qt, { items: e.items });
|
|
3238
|
+
case "ranked": return /* @__PURE__ */ s(Jt, { items: e.items });
|
|
3239
|
+
case "chips": return /* @__PURE__ */ s(Yt, { items: e.items });
|
|
3240
|
+
case "badges": return /* @__PURE__ */ s(Zt, { items: e.items });
|
|
3241
|
+
case "dot-strip": return /* @__PURE__ */ s(Qt, {
|
|
3242
3242
|
min: e.min,
|
|
3243
3243
|
max: e.max,
|
|
3244
3244
|
unit: e.unit,
|
|
3245
3245
|
dots: e.dots,
|
|
3246
3246
|
chips: e.chips
|
|
3247
3247
|
});
|
|
3248
|
-
case "proportion": return /* @__PURE__ */ s(
|
|
3248
|
+
case "proportion": return /* @__PURE__ */ s($t, {
|
|
3249
3249
|
leftPct: e.leftPct,
|
|
3250
3250
|
leftLabel: e.leftLabel,
|
|
3251
3251
|
leftValue: e.leftValue,
|
|
@@ -3256,15 +3256,15 @@ function cn({ block: e }) {
|
|
|
3256
3256
|
rightColor: e.rightColor,
|
|
3257
3257
|
chips: e.chips
|
|
3258
3258
|
});
|
|
3259
|
-
case "ring": return /* @__PURE__ */ s(
|
|
3259
|
+
case "ring": return /* @__PURE__ */ s(en, {
|
|
3260
3260
|
pct: e.pct,
|
|
3261
3261
|
label: e.label,
|
|
3262
3262
|
color: e.color,
|
|
3263
3263
|
chips: e.chips
|
|
3264
3264
|
});
|
|
3265
|
-
case "scorecard-rows": return /* @__PURE__ */ s(
|
|
3266
|
-
case "flags-list": return /* @__PURE__ */ s(
|
|
3267
|
-
case "comparison-rows": return /* @__PURE__ */ s(
|
|
3265
|
+
case "scorecard-rows": return /* @__PURE__ */ s(rn, { items: e.items });
|
|
3266
|
+
case "flags-list": return /* @__PURE__ */ s(on, { items: e.items });
|
|
3267
|
+
case "comparison-rows": return /* @__PURE__ */ s(sn, {
|
|
3268
3268
|
columns: e.columns,
|
|
3269
3269
|
rows: e.rows
|
|
3270
3270
|
});
|
|
@@ -3277,8 +3277,8 @@ function cn({ block: e }) {
|
|
|
3277
3277
|
flexDirection: "column",
|
|
3278
3278
|
gap: 24
|
|
3279
3279
|
},
|
|
3280
|
-
children: [t, /* @__PURE__ */ s(
|
|
3280
|
+
children: [t, /* @__PURE__ */ s(cn, { text: e.takeaway })]
|
|
3281
3281
|
}) : t;
|
|
3282
3282
|
}
|
|
3283
3283
|
//#endregion
|
|
3284
|
-
export {
|
|
3284
|
+
export { te as AreaChart, ie as BarChart, l as ChartFrame, Wt as DonutChart, ln as KeyHighlights, Le as LineChart, Be as MiniBars, Ye as PieChart, at as ProcessSankey, ot as RankingSankey, Ze as SankeySvg, ee as SeriesChart, vt as Trend, Et as TrendChart, Rt as VisualizationRenderer, Vt as cleanupVisualizationMounts, Ht as hydrateVisualizationMounts, Ut as serializeVisualizationConfig };
|