@divami-artefacts/ai-design-system 1.0.3 → 1.0.4
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 +41 -14
- package/dist/index.cjs +1 -1
- package/dist/index.js +853 -880
- package/dist/types/index.d.ts +6 -6
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -11,20 +11,20 @@ function l({ children: e, className: t = "" }) {
|
|
|
11
11
|
//#endregion
|
|
12
12
|
//#region src/canvas/canvasUtils.ts
|
|
13
13
|
var u = {
|
|
14
|
-
bg: "#
|
|
14
|
+
bg: "#0C0E12",
|
|
15
15
|
bgL: "#0C1420",
|
|
16
|
-
sf: "#
|
|
17
|
-
bd: "#
|
|
18
|
-
blue: "#
|
|
19
|
-
cyan: "#
|
|
20
|
-
orange: "#
|
|
21
|
-
red: "#
|
|
22
|
-
green: "#
|
|
23
|
-
purple: "#
|
|
24
|
-
amber: "#
|
|
25
|
-
t1: "#
|
|
26
|
-
t2: "#
|
|
27
|
-
t3: "#
|
|
16
|
+
sf: "#13161B",
|
|
17
|
+
bd: "#22262F",
|
|
18
|
+
blue: "#2970FF",
|
|
19
|
+
cyan: "#36BFFA",
|
|
20
|
+
orange: "#EF6820",
|
|
21
|
+
red: "#D92D20",
|
|
22
|
+
green: "#16B364",
|
|
23
|
+
purple: "#7A5AF8",
|
|
24
|
+
amber: "#FAC515",
|
|
25
|
+
t1: "#F7F7F7",
|
|
26
|
+
t2: "#94979C",
|
|
27
|
+
t3: "#94979C",
|
|
28
28
|
t4: "#334155"
|
|
29
29
|
}, d = [
|
|
30
30
|
u.blue,
|
|
@@ -33,15 +33,21 @@ var u = {
|
|
|
33
33
|
u.purple,
|
|
34
34
|
u.green,
|
|
35
35
|
u.red
|
|
36
|
-
]
|
|
37
|
-
|
|
36
|
+
], f = {
|
|
37
|
+
font: "400 12px 'Satoshi Variable', 'DM Sans', sans-serif",
|
|
38
|
+
color: u.t2
|
|
39
|
+
}, p = {
|
|
40
|
+
font: "400 12px 'Satoshi Variable', 'DM Sans', sans-serif",
|
|
41
|
+
color: u.t2
|
|
42
|
+
};
|
|
43
|
+
function m(e, t = 1) {
|
|
38
44
|
let n = e.replace("#", "");
|
|
39
45
|
return `rgba(${parseInt(n.substring(0, 2), 16)},${parseInt(n.substring(2, 4), 16)},${parseInt(n.substring(4, 6), 16)},${t})`;
|
|
40
46
|
}
|
|
41
|
-
function
|
|
47
|
+
function h(e, t, n) {
|
|
42
48
|
return e + (t - e) * n;
|
|
43
49
|
}
|
|
44
|
-
function
|
|
50
|
+
function g(e, t, n) {
|
|
45
51
|
let r = (e) => {
|
|
46
52
|
let t = e.replace("#", "");
|
|
47
53
|
return [
|
|
@@ -51,34 +57,34 @@ function m(e, t, n) {
|
|
|
51
57
|
];
|
|
52
58
|
}, [i, a, o] = r(e), [s, c, l] = r(t), u = (e) => Math.max(0, Math.min(255, Math.round(e)));
|
|
53
59
|
return [
|
|
54
|
-
u(
|
|
55
|
-
u(
|
|
56
|
-
u(
|
|
60
|
+
u(h(i, s, n)),
|
|
61
|
+
u(h(a, c, n)),
|
|
62
|
+
u(h(o, l, n))
|
|
57
63
|
].map((e) => e.toString(16).padStart(2, "0")).join("").replace(/^/, "#");
|
|
58
64
|
}
|
|
59
|
-
function
|
|
65
|
+
function _(e, t, n, r = 2) {
|
|
60
66
|
e.width = t * r, e.height = n * r;
|
|
61
67
|
let i = e.getContext("2d");
|
|
62
68
|
return i.scale(r, r), i;
|
|
63
69
|
}
|
|
64
|
-
function
|
|
70
|
+
function v(e, t, n, r, i, a = .3) {
|
|
65
71
|
let o = e.createRadialGradient(t, n, 0, t, n, r);
|
|
66
|
-
o.addColorStop(0,
|
|
72
|
+
o.addColorStop(0, m(i, a)), o.addColorStop(1, m(i, 0)), e.fillStyle = o, e.beginPath(), e.arc(t, n, r, 0, Math.PI * 2), e.fill();
|
|
67
73
|
}
|
|
68
|
-
function
|
|
74
|
+
function y(e, t, n, r, i = 50, a = m(u.blue, .05)) {
|
|
69
75
|
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();
|
|
70
76
|
}
|
|
71
|
-
function
|
|
77
|
+
function b(e, t, n, r, i = .015) {
|
|
72
78
|
e.fillStyle = `rgba(0,0,0,${i})`;
|
|
73
79
|
let a = r * .5 % 6;
|
|
74
80
|
for (let r = a; r < n; r += 3) e.fillRect(0, r, t, 1);
|
|
75
81
|
}
|
|
76
|
-
function
|
|
82
|
+
function x(e, t, n, r, i = m(u.t1, .08)) {
|
|
77
83
|
e.strokeStyle = i, e.lineWidth = 1, e.setLineDash([3, 3]), e.beginPath(), e.moveTo(t, n), e.lineTo(t, r), e.stroke(), e.setLineDash([]);
|
|
78
84
|
}
|
|
79
85
|
//#endregion
|
|
80
86
|
//#region src/canvas/CanvasTooltip.tsx
|
|
81
|
-
function
|
|
87
|
+
function S({ visible: e, x: t, y: n, content: i, parentW: o }) {
|
|
82
88
|
let l = a(null);
|
|
83
89
|
if (r(() => {
|
|
84
90
|
let r = l.current;
|
|
@@ -107,38 +113,42 @@ function b({ visible: e, x: t, y: n, content: i, parentW: o }) {
|
|
|
107
113
|
border: `1px solid ${u.bd}`,
|
|
108
114
|
borderLeft: "2px solid var(--tooltip-accent)",
|
|
109
115
|
borderRadius: 6,
|
|
110
|
-
padding: "
|
|
116
|
+
padding: "8px 12px",
|
|
111
117
|
opacity: 0,
|
|
112
118
|
transition: "opacity 0.15s ease",
|
|
113
119
|
zIndex: 20,
|
|
114
|
-
fontFamily: "'
|
|
120
|
+
fontFamily: "'Satoshi Variable', 'DM Sans', sans-serif"
|
|
115
121
|
},
|
|
116
122
|
children: [
|
|
117
123
|
f && /* @__PURE__ */ s("div", {
|
|
118
124
|
style: {
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
color: u.
|
|
122
|
-
marginBottom:
|
|
123
|
-
whiteSpace: "nowrap"
|
|
125
|
+
fontSize: 12,
|
|
126
|
+
fontWeight: 400,
|
|
127
|
+
color: u.t2,
|
|
128
|
+
marginBottom: 3,
|
|
129
|
+
whiteSpace: "nowrap",
|
|
130
|
+
lineHeight: "18px"
|
|
124
131
|
},
|
|
125
132
|
children: f
|
|
126
133
|
}),
|
|
127
134
|
/* @__PURE__ */ s("div", {
|
|
128
135
|
style: {
|
|
129
|
-
fontSize:
|
|
136
|
+
fontSize: 14,
|
|
137
|
+
fontWeight: 500,
|
|
130
138
|
color: u.t1,
|
|
131
|
-
|
|
132
|
-
|
|
139
|
+
whiteSpace: "nowrap",
|
|
140
|
+
lineHeight: "20px"
|
|
133
141
|
},
|
|
134
142
|
children: p
|
|
135
143
|
}),
|
|
136
144
|
m && /* @__PURE__ */ s("div", {
|
|
137
145
|
style: {
|
|
138
|
-
fontSize:
|
|
146
|
+
fontSize: 12,
|
|
147
|
+
fontWeight: 400,
|
|
139
148
|
color: "var(--tooltip-accent)",
|
|
140
|
-
marginTop:
|
|
141
|
-
whiteSpace: "nowrap"
|
|
149
|
+
marginTop: 3,
|
|
150
|
+
whiteSpace: "nowrap",
|
|
151
|
+
lineHeight: "18px"
|
|
142
152
|
},
|
|
143
153
|
children: m
|
|
144
154
|
})
|
|
@@ -147,7 +157,7 @@ function b({ visible: e, x: t, y: n, content: i, parentW: o }) {
|
|
|
147
157
|
}
|
|
148
158
|
//#endregion
|
|
149
159
|
//#region src/canvas/useCanvasInteraction.ts
|
|
150
|
-
function
|
|
160
|
+
function C(e, { width: r, height: i, onClick: s, enabled: c = !0 }) {
|
|
151
161
|
let l = a({
|
|
152
162
|
x: -1,
|
|
153
163
|
y: -1,
|
|
@@ -219,14 +229,14 @@ function x(e, { width: r, height: i, onClick: s, enabled: c = !0 }) {
|
|
|
219
229
|
hitZonesRef: d
|
|
220
230
|
};
|
|
221
231
|
}
|
|
222
|
-
function
|
|
232
|
+
function w(e, t, n, r, i, a) {
|
|
223
233
|
e.push({
|
|
224
234
|
id: t,
|
|
225
235
|
data: a,
|
|
226
236
|
test: (e, t) => (e - n) ** 2 + (t - r) ** 2 <= i * i
|
|
227
237
|
});
|
|
228
238
|
}
|
|
229
|
-
function
|
|
239
|
+
function T(e, t, n, r, i, a, o) {
|
|
230
240
|
e.push({
|
|
231
241
|
id: t,
|
|
232
242
|
data: o,
|
|
@@ -235,14 +245,14 @@ function C(e, t, n, r, i, a, o) {
|
|
|
235
245
|
}
|
|
236
246
|
//#endregion
|
|
237
247
|
//#region src/canvas/easing.ts
|
|
238
|
-
var
|
|
248
|
+
var E = (e) => 1 - (1 - e) ** 3, D = (e) => 1 - (1 - e) ** 4, O = (e) => e === 1 ? 1 : 1 - 2 ** (-10 * e), k = (e) => {
|
|
239
249
|
let t = 1.70158;
|
|
240
250
|
return 1 + (t + 1) * (e - 1) ** 3 + t * (e - 1) ** 2;
|
|
241
|
-
},
|
|
251
|
+
}, A = (e, t = .04, n = .001) => Math.sin(e * t) * Math.exp(-Math.min(e * n, 4)), j = (e, t, n, r = E) => {
|
|
242
252
|
let i = Math.min(.06, .5 / n), a = t * i, o = 1 - (n - 1) * i;
|
|
243
253
|
return r(Math.max(0, Math.min((e - a) / o, 1)));
|
|
244
254
|
};
|
|
245
|
-
function
|
|
255
|
+
function M(e, t, n = .12) {
|
|
246
256
|
e.forEach((r, i) => {
|
|
247
257
|
let a = i === t ? 1 : 0, o = r + (a - r) * n;
|
|
248
258
|
Math.abs(o - a) < .005 ? a === 0 ? e.delete(i) : e.set(i, 1) : e.set(i, o);
|
|
@@ -250,66 +260,66 @@ function A(e, t, n = .12) {
|
|
|
250
260
|
}
|
|
251
261
|
//#endregion
|
|
252
262
|
//#region src/components/common/SeriesChart.tsx
|
|
253
|
-
var
|
|
254
|
-
function
|
|
255
|
-
let o = a(null), d = a(/* @__PURE__ */ new Map()),
|
|
256
|
-
width:
|
|
257
|
-
height:
|
|
263
|
+
var ee = 760, N = 250;
|
|
264
|
+
function te({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
265
|
+
let o = a(null), d = a(/* @__PURE__ */ new Map()), f = a(0), { mouseRef: p, hoveredRef: h, tooltip: g, hitZonesRef: y } = C(o, {
|
|
266
|
+
width: ee,
|
|
267
|
+
height: N
|
|
258
268
|
});
|
|
259
269
|
return n(() => {
|
|
260
270
|
let n = o.current;
|
|
261
271
|
if (!n) return;
|
|
262
|
-
let r =
|
|
263
|
-
|
|
264
|
-
let a = i?.line ?? u.blue, s = i?.point ?? u.blue, c = i?.axisLine ?? u.bd, l = i?.areaFill ?? u.blue,
|
|
272
|
+
let r = _(n, ee, N);
|
|
273
|
+
f.current = 0;
|
|
274
|
+
let a = i?.line ?? u.blue, s = i?.point ?? u.blue, c = i?.axisLine ?? u.bd, l = i?.areaFill ?? u.blue, g = {
|
|
265
275
|
top: 24,
|
|
266
276
|
right: 24,
|
|
267
277
|
bottom: 44,
|
|
268
278
|
left: 24
|
|
269
|
-
}, b =
|
|
270
|
-
|
|
271
|
-
let n =
|
|
272
|
-
if (r.clearRect(0, 0,
|
|
273
|
-
|
|
279
|
+
}, b = ee - g.left - g.right, S = N - g.top - g.bottom, C, T = () => {
|
|
280
|
+
f.current++;
|
|
281
|
+
let n = f.current;
|
|
282
|
+
if (r.clearRect(0, 0, ee, N), e.length < 2) {
|
|
283
|
+
C = requestAnimationFrame(T);
|
|
274
284
|
return;
|
|
275
285
|
}
|
|
276
|
-
let i = e.map((e) => e.pricing ?? 0), o = Math.max(100, ...i),
|
|
277
|
-
|
|
286
|
+
let i = e.map((e) => e.pricing ?? 0), o = Math.max(100, ...i), _ = (t) => g.left + t / (e.length - 1) * b, E = (e) => g.top + (1 - e / o) * S, D = O(Math.min(n / 48, 1)), k = Math.max(2, Math.floor(D * e.length));
|
|
287
|
+
M(d.current, h.current), y.current = [], r.strokeStyle = m(u.bd, .2), r.lineWidth = .5;
|
|
278
288
|
for (let e = 0; e <= 4; e++) {
|
|
279
|
-
let t =
|
|
280
|
-
r.beginPath(), r.moveTo(
|
|
289
|
+
let t = g.top + e / 4 * S;
|
|
290
|
+
r.beginPath(), r.moveTo(g.left, t), r.lineTo(g.left + b, t), r.stroke();
|
|
281
291
|
}
|
|
282
|
-
if (r.strokeStyle =
|
|
283
|
-
let e = parseInt(
|
|
284
|
-
isNaN(e) ||
|
|
292
|
+
if (r.strokeStyle = m(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 && h.current) {
|
|
293
|
+
let e = parseInt(h.current.split("-")[1]);
|
|
294
|
+
isNaN(e) || x(r, _(e), g.top, g.top + S);
|
|
285
295
|
}
|
|
286
|
-
if (t === "area" &&
|
|
287
|
-
let t = r.createLinearGradient(0,
|
|
288
|
-
t.addColorStop(0,
|
|
289
|
-
for (let t = 0; t <
|
|
290
|
-
r.lineTo(
|
|
296
|
+
if (t === "area" && k > 1) {
|
|
297
|
+
let t = r.createLinearGradient(0, g.top, 0, g.top + S);
|
|
298
|
+
t.addColorStop(0, m(l, .12)), t.addColorStop(1, m(l, 0)), r.fillStyle = t, r.beginPath(), r.moveTo(_(0), g.top + S);
|
|
299
|
+
for (let t = 0; t < k; t++) r.lineTo(_(t), E(e[t].pricing ?? 0));
|
|
300
|
+
r.lineTo(_(k - 1), g.top + S), r.closePath(), r.fill();
|
|
291
301
|
}
|
|
292
|
-
if (
|
|
293
|
-
r.strokeStyle =
|
|
294
|
-
for (let t = 0; t <
|
|
295
|
-
let n =
|
|
302
|
+
if (k > 1) {
|
|
303
|
+
r.strokeStyle = m(a, .85), r.lineWidth = 2, r.setLineDash([]), r.beginPath();
|
|
304
|
+
for (let t = 0; t < k; t++) {
|
|
305
|
+
let n = _(t), i = E(e[t].pricing ?? 0);
|
|
296
306
|
t === 0 ? r.moveTo(n, i) : r.lineTo(n, i);
|
|
297
307
|
}
|
|
298
308
|
r.stroke();
|
|
299
309
|
}
|
|
300
|
-
for (let i = 0; i <
|
|
301
|
-
let a =
|
|
302
|
-
|
|
310
|
+
for (let i = 0; i < k; i++) {
|
|
311
|
+
let a = _(i), o = E(e[i].pricing ?? 0), c = `sc-${i}`, l = d.current.get(c) ?? 0, f = i === e.length - 1;
|
|
312
|
+
w(y.current, c, a, o, 12, {
|
|
303
313
|
label: e[i].vendor,
|
|
304
314
|
value: String(e[i].pricing ?? 0),
|
|
305
|
-
color:
|
|
306
|
-
}), l > 0 &&
|
|
307
|
-
let
|
|
308
|
-
|
|
315
|
+
color: f ? u.red : s
|
|
316
|
+
}), l > 0 && v(r, a, o, 16 * l, s, .2 * l);
|
|
317
|
+
let p = f ? A(n, .05, 5e-4) : 0, h = t === "area" ? 5 : 6;
|
|
318
|
+
f ? (r.shadowColor = m(u.red, .5), r.shadowBlur = (8 + p * 4) * (1 + l * .5), r.fillStyle = u.red, r.beginPath(), r.arc(a, o, (h + p * 1.5) * (1 + l * .3), 0, Math.PI * 2), r.fill(), r.shadowBlur = 0) : (r.fillStyle = m(s, .7 + l * .3), r.beginPath(), r.arc(a, o, h + l * 2, 0, Math.PI * 2), r.fill()), r.font = "10px 'JetBrains Mono', monospace", r.fillStyle = m(u.t3, .6 + l * .3), r.textAlign = "center", r.fillText(e[i].vendor, a, N - 14);
|
|
309
319
|
}
|
|
310
|
-
|
|
320
|
+
C = requestAnimationFrame(T);
|
|
311
321
|
};
|
|
312
|
-
return T(), () => cancelAnimationFrame(
|
|
322
|
+
return T(), () => cancelAnimationFrame(C);
|
|
313
323
|
}, [
|
|
314
324
|
e,
|
|
315
325
|
t,
|
|
@@ -319,31 +329,31 @@ function N({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
|
319
329
|
children: /* @__PURE__ */ c("div", {
|
|
320
330
|
style: {
|
|
321
331
|
position: "relative",
|
|
322
|
-
width:
|
|
323
|
-
height:
|
|
332
|
+
width: ee,
|
|
333
|
+
height: N
|
|
324
334
|
},
|
|
325
335
|
children: [/* @__PURE__ */ s("canvas", {
|
|
326
336
|
ref: o,
|
|
327
337
|
role: "img",
|
|
328
338
|
"aria-label": `${t} chart`,
|
|
329
339
|
style: {
|
|
330
|
-
width:
|
|
331
|
-
height:
|
|
340
|
+
width: ee,
|
|
341
|
+
height: N,
|
|
332
342
|
display: "block",
|
|
333
343
|
borderRadius: 8
|
|
334
344
|
}
|
|
335
|
-
}), /* @__PURE__ */ s(
|
|
336
|
-
...
|
|
337
|
-
parentW:
|
|
338
|
-
parentH:
|
|
345
|
+
}), /* @__PURE__ */ s(S, {
|
|
346
|
+
...g,
|
|
347
|
+
parentW: ee,
|
|
348
|
+
parentH: N
|
|
339
349
|
})]
|
|
340
350
|
})
|
|
341
351
|
});
|
|
342
352
|
}
|
|
343
353
|
//#endregion
|
|
344
354
|
//#region src/components/areaChart/AreaChart.tsx
|
|
345
|
-
function
|
|
346
|
-
return /* @__PURE__ */ s(
|
|
355
|
+
function ne({ rows: e = [], className: t, colors: n }) {
|
|
356
|
+
return /* @__PURE__ */ s(te, {
|
|
347
357
|
rows: e,
|
|
348
358
|
variant: "area",
|
|
349
359
|
className: t,
|
|
@@ -352,54 +362,54 @@ function ee({ rows: e = [], className: t, colors: n }) {
|
|
|
352
362
|
}
|
|
353
363
|
//#endregion
|
|
354
364
|
//#region src/components/barChart/BarChart.tsx
|
|
355
|
-
var P = 760,
|
|
356
|
-
function
|
|
357
|
-
let i = a(null), o = a(/* @__PURE__ */ new Map()),
|
|
365
|
+
var P = 760, re = 280;
|
|
366
|
+
function ie({ rows: e = [], className: t, colors: r }) {
|
|
367
|
+
let i = a(null), o = a(/* @__PURE__ */ new Map()), f = a(0), { hoveredRef: p, tooltip: h, hitZonesRef: g } = C(i, {
|
|
358
368
|
width: P,
|
|
359
|
-
height:
|
|
369
|
+
height: re
|
|
360
370
|
});
|
|
361
371
|
return n(() => {
|
|
362
372
|
let t = i.current;
|
|
363
373
|
if (!t) return;
|
|
364
|
-
let n =
|
|
365
|
-
|
|
374
|
+
let n = _(t, P, re);
|
|
375
|
+
f.current = 0;
|
|
366
376
|
let a = r?.bars ?? d, s = r?.axisLine ?? u.bd, c = r?.valueLabel ?? u.t2, l = {
|
|
367
377
|
top: 24,
|
|
368
378
|
right: 24,
|
|
369
379
|
bottom: 56,
|
|
370
380
|
left: 24
|
|
371
|
-
},
|
|
372
|
-
|
|
373
|
-
let t =
|
|
374
|
-
n.clearRect(0, 0, P,
|
|
375
|
-
let r =
|
|
376
|
-
|
|
377
|
-
let s = l.left + i * y, d =
|
|
378
|
-
|
|
381
|
+
}, h = re - l.top - l.bottom, y = (P - l.left - l.right) / Math.max(e.length, 1), b = Math.max(100, ...e.map((e) => e.pricing ?? 0)), x = l.top + h, S, C = () => {
|
|
382
|
+
f.current++;
|
|
383
|
+
let t = f.current;
|
|
384
|
+
n.clearRect(0, 0, P, re);
|
|
385
|
+
let r = D(Math.min(t / 48, 1));
|
|
386
|
+
M(o.current, p.current), g.current = [], n.strokeStyle = m(s, .4), n.lineWidth = 1, n.setLineDash([]), n.beginPath(), n.moveTo(l.left, x), n.lineTo(P - l.right, x), n.stroke(), e.forEach((t, i) => {
|
|
387
|
+
let s = l.left + i * y, d = j(r, i, e.length, D), f = b > 0 ? (t.pricing ?? 0) / b * h : 0, p = Math.max(f > 0 ? 4 : 0, f * d), _ = a[i % a.length], S = o.current.get(t.id ?? `bar-${i}`) ?? 0;
|
|
388
|
+
T(g.current, t.id ?? `bar-${i}`, s + 4, x - p, y - 8, p, {
|
|
379
389
|
label: t.vendor,
|
|
380
390
|
value: String(t.pricing ?? 0),
|
|
381
|
-
color:
|
|
382
|
-
}),
|
|
391
|
+
color: _
|
|
392
|
+
}), p > 0 && (S > 0 && v(n, s + y / 2, x - p / 2, y * .8, _, .12 * S), n.shadowColor = m(_, .2 * (S > 0 ? S : 0)), n.shadowBlur = S > 0 ? 6 : 0, n.fillStyle = m(_, .5 + S * .25), n.beginPath(), n.roundRect(s + 4, x - p, y - 8, p, [
|
|
383
393
|
4,
|
|
384
394
|
4,
|
|
385
395
|
0,
|
|
386
396
|
0
|
|
387
|
-
]), n.fill(), n.shadowBlur = 0, S > 0 && (n.strokeStyle =
|
|
397
|
+
]), n.fill(), n.shadowBlur = 0, S > 0 && (n.strokeStyle = m(_, .4 * S), n.lineWidth = 1, n.beginPath(), n.roundRect(s + 4, x - p, y - 8, p, [
|
|
388
398
|
4,
|
|
389
399
|
4,
|
|
390
400
|
0,
|
|
391
401
|
0
|
|
392
|
-
]), n.stroke())), d > .5 &&
|
|
393
|
-
}), S = requestAnimationFrame(
|
|
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 ? _ : m(c, .7), n.textAlign = "center", n.fillText(String(t.pricing ?? ""), s + y / 2, x - p - 6), n.globalAlpha = 1), n.font = `${S > 0 ? "bold " : ""}9px 'JetBrains Mono', monospace`, n.fillStyle = S > 0 ? _ : m(u.t3, .6), n.textAlign = "center", n.fillText(t.vendor, s + y / 2, re - 14);
|
|
403
|
+
}), S = requestAnimationFrame(C);
|
|
394
404
|
};
|
|
395
|
-
return
|
|
405
|
+
return C(), () => cancelAnimationFrame(S);
|
|
396
406
|
}, [e, r]), /* @__PURE__ */ s(l, {
|
|
397
407
|
className: t,
|
|
398
408
|
children: /* @__PURE__ */ c("div", {
|
|
399
409
|
style: {
|
|
400
410
|
position: "relative",
|
|
401
411
|
width: P,
|
|
402
|
-
height:
|
|
412
|
+
height: re
|
|
403
413
|
},
|
|
404
414
|
children: [/* @__PURE__ */ s("canvas", {
|
|
405
415
|
ref: i,
|
|
@@ -407,100 +417,100 @@ function te({ rows: e = [], className: t, colors: r }) {
|
|
|
407
417
|
"aria-label": "bar chart",
|
|
408
418
|
style: {
|
|
409
419
|
width: P,
|
|
410
|
-
height:
|
|
420
|
+
height: re,
|
|
411
421
|
display: "block",
|
|
412
422
|
borderRadius: 8
|
|
413
423
|
}
|
|
414
|
-
}), /* @__PURE__ */ s(
|
|
415
|
-
...
|
|
424
|
+
}), /* @__PURE__ */ s(S, {
|
|
425
|
+
...h,
|
|
416
426
|
parentW: P,
|
|
417
|
-
parentH:
|
|
427
|
+
parentH: re
|
|
418
428
|
})]
|
|
419
429
|
})
|
|
420
430
|
});
|
|
421
431
|
}
|
|
422
432
|
//#endregion
|
|
423
433
|
//#region src/components/commitmentRace/CommitmentRace.tsx
|
|
424
|
-
var
|
|
434
|
+
var F = 680, I = 300, ae = [
|
|
425
435
|
u.green,
|
|
426
436
|
u.blue,
|
|
427
437
|
u.cyan,
|
|
428
438
|
u.amber,
|
|
429
439
|
u.red
|
|
430
440
|
];
|
|
431
|
-
function
|
|
432
|
-
let r = a(null), i = a(0), o = a(/* @__PURE__ */ new Map()), l = [...e].sort((e, t) => (t.percentage ?? 0) - (e.percentage ?? 0)), { hoveredRef: d, tooltip: p, hitZonesRef:
|
|
433
|
-
width:
|
|
434
|
-
height:
|
|
441
|
+
function oe({ contractors: e = [], "data-testid": t }) {
|
|
442
|
+
let r = a(null), i = a(0), o = a(/* @__PURE__ */ new Map()), l = [...e].sort((e, t) => (t.percentage ?? 0) - (e.percentage ?? 0)), { hoveredRef: d, tooltip: p, hitZonesRef: h } = C(r, {
|
|
443
|
+
width: F,
|
|
444
|
+
height: I
|
|
435
445
|
});
|
|
436
446
|
return n(() => {
|
|
437
447
|
let e = r.current;
|
|
438
448
|
if (!e) return;
|
|
439
|
-
let t =
|
|
449
|
+
let t = _(e, F, I);
|
|
440
450
|
i.current = 0;
|
|
441
|
-
let n =
|
|
451
|
+
let n = F * .13, a = F * .08, s = I * .08, c = I * .14, p = F - n - a, g, x = () => {
|
|
442
452
|
i.current++;
|
|
443
453
|
let e = i.current;
|
|
444
|
-
t.clearRect(0, 0,
|
|
454
|
+
t.clearRect(0, 0, F, I), h.current = [], o.current.forEach((e, t) => {
|
|
445
455
|
let n = t === d.current ? 1 : 0, r = e + (n - e) * .12;
|
|
446
456
|
Math.abs(r - n) < .005 ? n === 0 ? o.current.delete(t) : o.current.set(t, 1) : o.current.set(t, r);
|
|
447
|
-
}), d.current && !o.current.has(d.current) && o.current.set(d.current, 0),
|
|
448
|
-
let a =
|
|
449
|
-
t.fillStyle =
|
|
450
|
-
let
|
|
451
|
-
if (
|
|
452
|
-
let e = t.createLinearGradient(n, 0,
|
|
453
|
-
e.addColorStop(0,
|
|
457
|
+
}), d.current && !o.current.has(d.current) && o.current.set(d.current, 0), y(t, F, I, e, 40, m(u.blue, .04)), l.forEach((r, i) => {
|
|
458
|
+
let a = ae[i % ae.length], l = o.current.get(r.id) ?? 0, u = s + i * (c + 10);
|
|
459
|
+
t.fillStyle = m(a, .04 + l * .04), t.beginPath(), t.roundRect(n, u, p, c, 3), t.fill(), t.strokeStyle = m(a, .08), t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(n, u + c / 2), t.lineTo(n + p, u + c / 2), t.stroke(), t.setLineDash([]);
|
|
460
|
+
let d = (r.percentage ?? 0) / 100, g = n + p * Math.min(d, d * E(Math.min(1, e * .005)));
|
|
461
|
+
if (g > n + 4) {
|
|
462
|
+
let e = t.createLinearGradient(n, 0, g, 0);
|
|
463
|
+
e.addColorStop(0, m(a, .02)), e.addColorStop(1, m(a, .25 + l * .15)), t.fillStyle = e, t.beginPath(), t.roundRect(n, u + 2, g - n, c - 4, 2), t.fill();
|
|
454
464
|
}
|
|
455
|
-
|
|
465
|
+
v(t, g, u + c / 2, 18 + l * 8, a, .3 + l * .2), t.beginPath(), t.arc(g, u + c / 2, 5 + l * 2, 0, Math.PI * 2), t.fillStyle = m(a, .9), t.fill(), w(h.current, r.id, g, u + c / 2, 14, {
|
|
456
466
|
label: r.name,
|
|
457
467
|
value: `${r.percentage ?? 0}% commitment`,
|
|
458
468
|
sublabel: `Base: £${r.base ?? 0}M · Variations: £${r.variation ?? 0}M`,
|
|
459
469
|
color: a
|
|
460
|
-
}), t.font = "bold
|
|
461
|
-
}), t.strokeStyle =
|
|
470
|
+
}), t.font = "bold " + f.font, t.fillStyle = m(a, .9 + l * .1), t.textAlign = "left", t.textBaseline = "middle", t.fillText(`${r.percentage ?? 0}%`, g + 10, u + c / 2), t.font = `${l > 0 ? "bold " : ""}` + f.font, t.fillStyle = l > 0 ? a : f.color, t.textAlign = "right", t.fillText(r.abbreviation ?? r.name.slice(0, 6), n - 8, u + c / 2);
|
|
471
|
+
}), t.strokeStyle = m(u.t3, .3), t.lineWidth = 1, t.setLineDash([]), t.beginPath(), t.moveTo(n + p, s), t.lineTo(n + p, s + (l.length - 1) * (c + 10) + c), t.stroke(), b(t, F, I, e, .015), g = requestAnimationFrame(x);
|
|
462
472
|
};
|
|
463
|
-
return
|
|
473
|
+
return x(), () => cancelAnimationFrame(g);
|
|
464
474
|
}, [l]), /* @__PURE__ */ c("div", {
|
|
465
475
|
"data-testid": t,
|
|
466
476
|
style: {
|
|
467
477
|
position: "relative",
|
|
468
|
-
width:
|
|
469
|
-
height:
|
|
478
|
+
width: F,
|
|
479
|
+
height: I
|
|
470
480
|
},
|
|
471
481
|
children: [/* @__PURE__ */ s("canvas", {
|
|
472
482
|
ref: r,
|
|
473
483
|
role: "img",
|
|
474
484
|
"aria-label": "Commitment race — contractors ranked by commitment percentage",
|
|
475
485
|
style: {
|
|
476
|
-
width:
|
|
477
|
-
height:
|
|
486
|
+
width: F,
|
|
487
|
+
height: I,
|
|
478
488
|
display: "block",
|
|
479
489
|
borderRadius: 8
|
|
480
490
|
}
|
|
481
|
-
}), /* @__PURE__ */ s(
|
|
491
|
+
}), /* @__PURE__ */ s(S, {
|
|
482
492
|
...p,
|
|
483
|
-
parentW:
|
|
484
|
-
parentH:
|
|
493
|
+
parentW: F,
|
|
494
|
+
parentH: I
|
|
485
495
|
})]
|
|
486
496
|
});
|
|
487
497
|
}
|
|
488
498
|
//#endregion
|
|
489
499
|
//#region src/components/compensationGauge/CompensationGauge.tsx
|
|
490
|
-
var
|
|
491
|
-
function
|
|
500
|
+
var se = 480, ce = 340;
|
|
501
|
+
function le({ pct: e, confirmed: t, total: r, "data-testid": i }) {
|
|
492
502
|
let o = a(null), c = a(0);
|
|
493
503
|
return n(() => {
|
|
494
504
|
let n = o.current;
|
|
495
505
|
if (!n) return;
|
|
496
|
-
let i =
|
|
506
|
+
let i = _(n, se, ce);
|
|
497
507
|
c.current = 0;
|
|
498
|
-
let a =
|
|
508
|
+
let a = se / 2, s = Math.PI, l = 2 * Math.PI, d = Math.PI, p, h = () => {
|
|
499
509
|
c.current++;
|
|
500
510
|
let n = c.current;
|
|
501
|
-
i.clearRect(0, 0,
|
|
502
|
-
let o =
|
|
503
|
-
i.beginPath(), i.arc(a, 220, 120, s, l), i.strokeStyle =
|
|
511
|
+
i.clearRect(0, 0, se, ce);
|
|
512
|
+
let o = E(Math.min(n / 80, 1)), g = k(Math.min(n / 72, 1));
|
|
513
|
+
i.beginPath(), i.arc(a, 220, 120, s, l), i.strokeStyle = m(u.bd, .35), i.lineWidth = 46, i.stroke(), [
|
|
504
514
|
{
|
|
505
515
|
start: 0,
|
|
506
516
|
end: .33,
|
|
@@ -518,7 +528,7 @@ function oe({ pct: e, confirmed: t, total: r, "data-testid": i }) {
|
|
|
518
528
|
}
|
|
519
529
|
].forEach((e) => {
|
|
520
530
|
let t = s + e.start * d, n = s + e.end * d;
|
|
521
|
-
i.beginPath(), i.arc(a, 220, 194 / 2, t, n), i.strokeStyle =
|
|
531
|
+
i.beginPath(), i.arc(a, 220, 194 / 2, t, n), i.strokeStyle = m(e.color, .12), i.lineWidth = 42, i.stroke();
|
|
522
532
|
}), [
|
|
523
533
|
{
|
|
524
534
|
label: "Low",
|
|
@@ -534,22 +544,22 @@ function oe({ pct: e, confirmed: t, total: r, "data-testid": i }) {
|
|
|
534
544
|
}
|
|
535
545
|
].forEach(({ label: e, angle: t }) => {
|
|
536
546
|
let n = a + Math.cos(t) * 166, r = 220 + Math.sin(t) * 166;
|
|
537
|
-
i.font = "
|
|
547
|
+
i.font = "400 14px 'Satoshi Variable', 'DM Sans', sans-serif", i.fillStyle = m(u.t3, .55), i.textAlign = "center", i.fillText(e, n, r + 3);
|
|
538
548
|
});
|
|
539
|
-
let _ = s + e / 100 * d * o,
|
|
540
|
-
|
|
541
|
-
let
|
|
542
|
-
i.strokeStyle =
|
|
549
|
+
let _ = s + e / 100 * d * o, y = e >= 66 ? u.green : e >= 33 ? u.amber : u.red;
|
|
550
|
+
v(i, a + Math.cos(_) * 194 / 2, 220 + Math.sin(_) * 194 / 2, 18, y, .35 * o), i.beginPath(), i.arc(a, 220, 194 / 2, s, _), i.strokeStyle = m(y, .7 * o), i.lineWidth = 38, i.lineCap = "round", i.stroke(), i.lineCap = "butt";
|
|
551
|
+
let b = s + e / 100 * d * g, x = a + Math.cos(b) * 82, S = 220 + Math.sin(b) * 82, C = a - Math.cos(b) * 14, w = 220 - Math.sin(b) * 14;
|
|
552
|
+
i.strokeStyle = m(y, .18 * g), i.lineWidth = 6, i.lineCap = "round", i.beginPath(), i.moveTo(C, w), i.lineTo(x, S), i.stroke(), i.strokeStyle = m(u.t1, .92 * g), i.lineWidth = 2, i.lineCap = "round", i.beginPath(), i.moveTo(C, w), i.lineTo(x, S), i.stroke(), i.beginPath(), i.arc(x, S, 3, 0, Math.PI * 2), i.fillStyle = m(y, .9 * g), i.fill(), v(i, a, 220, 20, y, .25 * g), i.beginPath(), i.arc(a, 220, 9, 0, Math.PI * 2), i.strokeStyle = m(y, .5 * g), 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 = y, i.textAlign = "center", i.fillText(`${Math.round(e * g)}%`, 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 = "400 14px 'Satoshi Variable', 'DM Sans', sans-serif", i.fillStyle = f.color, i.fillText(`${t} of ${r} NCEs are confirmed compensation events`, a, 272), i.globalAlpha = 1);
|
|
543
553
|
for (let e = 0; e <= 10; e++) {
|
|
544
554
|
let t = s + e / 10 * d;
|
|
545
|
-
if (i.strokeStyle =
|
|
555
|
+
if (i.strokeStyle = m(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) {
|
|
546
556
|
let n = a + Math.cos(t) * 138, r = 220 + Math.sin(t) * 138;
|
|
547
|
-
i.font = "
|
|
557
|
+
i.font = "400 14px 'Satoshi Variable', 'DM Sans', sans-serif", i.fillStyle = m(u.t3, .45), i.textAlign = "center", i.fillText(`${e * 10}%`, n, r + 3);
|
|
548
558
|
}
|
|
549
559
|
}
|
|
550
|
-
p = requestAnimationFrame(
|
|
560
|
+
p = requestAnimationFrame(h);
|
|
551
561
|
};
|
|
552
|
-
return
|
|
562
|
+
return h(), () => cancelAnimationFrame(p);
|
|
553
563
|
}, [
|
|
554
564
|
e,
|
|
555
565
|
t,
|
|
@@ -558,16 +568,16 @@ function oe({ pct: e, confirmed: t, total: r, "data-testid": i }) {
|
|
|
558
568
|
"data-testid": i,
|
|
559
569
|
style: {
|
|
560
570
|
position: "relative",
|
|
561
|
-
width:
|
|
562
|
-
height:
|
|
571
|
+
width: se,
|
|
572
|
+
height: ce
|
|
563
573
|
},
|
|
564
574
|
children: /* @__PURE__ */ s("canvas", {
|
|
565
575
|
ref: o,
|
|
566
576
|
role: "img",
|
|
567
577
|
"aria-label": `Compensation event gauge — ${e}% of NCEs confirmed as compensation events`,
|
|
568
578
|
style: {
|
|
569
|
-
width:
|
|
570
|
-
height:
|
|
579
|
+
width: se,
|
|
580
|
+
height: ce,
|
|
571
581
|
display: "block"
|
|
572
582
|
}
|
|
573
583
|
})
|
|
@@ -575,8 +585,8 @@ function oe({ pct: e, confirmed: t, total: r, "data-testid": i }) {
|
|
|
575
585
|
}
|
|
576
586
|
//#endregion
|
|
577
587
|
//#region src/canvas/useCanvasLoop.ts
|
|
578
|
-
function
|
|
579
|
-
let c = a(0), { easing: l =
|
|
588
|
+
function ue(e, t, r, i, o = !0, s = {}) {
|
|
589
|
+
let c = a(0), { easing: l = E, durationFrames: u = 48 } = s;
|
|
580
590
|
n(() => {
|
|
581
591
|
let n = e.current;
|
|
582
592
|
if (!n || !t || !r) return;
|
|
@@ -607,29 +617,29 @@ function se(e, t, r, i, o = !0, s = {}) {
|
|
|
607
617
|
}
|
|
608
618
|
//#endregion
|
|
609
619
|
//#region src/components/contractBars/ContractBars.tsx
|
|
610
|
-
var
|
|
620
|
+
var L = 780, R = 234, de = 130, fe = 52, pe = [
|
|
611
621
|
u.blue,
|
|
612
622
|
u.cyan,
|
|
613
623
|
u.amber,
|
|
614
624
|
u.purple,
|
|
615
625
|
u.green
|
|
616
|
-
],
|
|
626
|
+
], me = [
|
|
617
627
|
"Base Value",
|
|
618
628
|
"Variations",
|
|
619
629
|
"Commitment"
|
|
620
|
-
],
|
|
630
|
+
], he = [
|
|
621
631
|
"Base",
|
|
622
632
|
"Var",
|
|
623
633
|
"Commit"
|
|
624
634
|
];
|
|
625
|
-
function
|
|
626
|
-
let n = a(null), r = a(/* @__PURE__ */ new Map()), { hoveredRef: o, tooltip: l, hitZonesRef: d } =
|
|
627
|
-
width:
|
|
628
|
-
height:
|
|
629
|
-
}),
|
|
635
|
+
function ge({ contractors: e = [], "data-testid": t }) {
|
|
636
|
+
let n = a(null), r = a(/* @__PURE__ */ new Map()), { hoveredRef: o, tooltip: l, hitZonesRef: d } = C(n, {
|
|
637
|
+
width: L,
|
|
638
|
+
height: R
|
|
639
|
+
}), f = i(() => {
|
|
630
640
|
let t = Math.max(...e.map((e) => e.base ?? 0)), n = Math.max(...e.map((e) => e.variation ?? 0));
|
|
631
641
|
return e.map((e, r) => {
|
|
632
|
-
let i =
|
|
642
|
+
let i = L * (.12 + r * .19), a = de, o = Math.min(L * .075, fe), s = pe[r % pe.length], c = [
|
|
633
643
|
(e.base ?? 0) / (t || 1) * 100,
|
|
634
644
|
(e.variation ?? 0) / (n || 1) * 100,
|
|
635
645
|
e.percentage ?? 0
|
|
@@ -638,10 +648,10 @@ function me({ contractors: e, "data-testid": t }) {
|
|
|
638
648
|
`£${e.variation ?? 0}M`,
|
|
639
649
|
`${e.percentage ?? 0}%`
|
|
640
650
|
], u = c.map((e, t) => {
|
|
641
|
-
let n = -Math.PI / 2 + t /
|
|
651
|
+
let n = -Math.PI / 2 + t / me.length * Math.PI * 2, r = e / 100, s = o * Math.max(.08, r);
|
|
642
652
|
return {
|
|
643
|
-
name:
|
|
644
|
-
short:
|
|
653
|
+
name: me[t],
|
|
654
|
+
short: he[t],
|
|
645
655
|
label: l[t],
|
|
646
656
|
val: Math.round(e),
|
|
647
657
|
x: i + Math.cos(n) * s,
|
|
@@ -661,54 +671,54 @@ function me({ contractors: e, "data-testid": t }) {
|
|
|
661
671
|
};
|
|
662
672
|
});
|
|
663
673
|
}, [e]);
|
|
664
|
-
return
|
|
665
|
-
|
|
674
|
+
return ue(n, L, R, (e, t, n) => {
|
|
675
|
+
M(r.current, o.current), d.current = [], y(e, L, R, n, 30), f.forEach((t, i) => {
|
|
666
676
|
let a = t.color, o = `constellation-${i}`, s = r.current.get(o) ?? 0;
|
|
667
|
-
e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 5, 0, Math.PI * 2), e.strokeStyle =
|
|
677
|
+
e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 5, 0, Math.PI * 2), e.strokeStyle = m(u.bd, .08 + .08 * s), e.lineWidth = .5, e.stroke(), e.beginPath(), t.stars.forEach((t, n) => {
|
|
668
678
|
n === 0 ? e.moveTo(t.x, t.y) : e.lineTo(t.x, t.y);
|
|
669
|
-
}), e.closePath(), e.fillStyle =
|
|
670
|
-
let c =
|
|
671
|
-
|
|
679
|
+
}), e.closePath(), e.fillStyle = m(a, .04 + .03 * s), e.fill(), e.strokeStyle = m(a, .15 + .1 * s), e.lineWidth = .8, e.stroke(), t.stars.forEach((o, s) => {
|
|
680
|
+
let c = A(n, .05, 5e-4) * .3 + .7, l = 3.5 * c, u = `star-${i}-${s}`, f = r.current.get(u) ?? 0, p = e.createRadialGradient(o.x, o.y, 0, o.x, o.y, l * 4);
|
|
681
|
+
p.addColorStop(0, m(a, (.2 + .1 * f) * c)), p.addColorStop(1, m(a, 0)), e.fillStyle = p, e.beginPath(), e.arc(o.x, o.y, l * 4, 0, Math.PI * 2), e.fill(), e.beginPath(), e.arc(o.x, o.y, l + f * 2, 0, Math.PI * 2), e.fillStyle = m(a, (.8 + .2 * f) * c), e.fill();
|
|
672
682
|
let h = Math.sin(o.angle) < -.3;
|
|
673
|
-
e.textAlign = "center", e.textBaseline = "middle", h ? (e.font = "8px 'DM Sans', sans-serif", e.fillStyle =
|
|
683
|
+
e.textAlign = "center", e.textBaseline = "middle", h ? (e.font = "8px 'DM Sans', sans-serif", e.fillStyle = m(a, .5 + .15 * f), e.fillText(o.short, o.x, o.y - 24), e.font = "bold 11px 'JetBrains Mono', monospace", e.fillStyle = m(a, .8 + .15 * f), e.fillText(o.label, o.x, o.y - 11)) : (e.font = "8px 'DM Sans', sans-serif", e.fillStyle = m(a, .5 + .15 * f), e.fillText(o.short, o.x, o.y + 11), e.font = "bold 11px 'JetBrains Mono', monospace", e.fillStyle = m(a, .8 + .15 * f), e.fillText(o.label, o.x, o.y + 24)), w(d.current, u, o.x, o.y, l * 4 + 2, {
|
|
674
684
|
label: o.name,
|
|
675
685
|
value: o.label,
|
|
676
686
|
sublabel: t.abbreviation ?? t.name.slice(0, 6),
|
|
677
687
|
color: a
|
|
678
688
|
});
|
|
679
|
-
}), s > 0 &&
|
|
689
|
+
}), s > 0 && v(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 = m(a, .1 + A(n, .03, 5e-4) * .05), e.lineWidth = 1, e.stroke(), e.font = "bold 11px 'DM Sans', sans-serif", e.textAlign = "center", e.textBaseline = "alphabetic", e.fillStyle = m(u.t2, .65 + s * .25), e.fillText(t.abbreviation ?? t.name.slice(0, 6), t.cx, t.cy + t.baseR + 26), w(d.current, o, t.cx, t.cy, t.baseR + 5, {
|
|
680
690
|
label: t.name,
|
|
681
691
|
value: `£${t.total ?? 0}M total`,
|
|
682
692
|
sublabel: `${t.percentage ?? 0}% committed · scatter ${t.scatter.toFixed(1)}`,
|
|
683
693
|
color: a
|
|
684
694
|
});
|
|
685
|
-
}), e.font = "11px 'DM Sans', sans-serif", e.textAlign = "center", e.textBaseline = "middle", e.fillStyle =
|
|
695
|
+
}), e.font = "11px 'DM Sans', sans-serif", e.textAlign = "center", e.textBaseline = "middle", e.fillStyle = m(u.t4, .55), e.fillText("▲ top = Base value · ▼▸ lower-right = Variations · ◂▼ lower-left = Commitment % · hover stars for details", L / 2, R - 14), b(e, L, R, n, .012);
|
|
686
696
|
}, !0), /* @__PURE__ */ c("div", {
|
|
687
697
|
"data-testid": t,
|
|
688
698
|
style: {
|
|
689
699
|
position: "relative",
|
|
690
|
-
width:
|
|
691
|
-
height:
|
|
700
|
+
width: L,
|
|
701
|
+
height: R
|
|
692
702
|
},
|
|
693
703
|
children: [/* @__PURE__ */ s("canvas", {
|
|
694
704
|
ref: n,
|
|
695
705
|
role: "img",
|
|
696
706
|
"aria-label": "Contract value breakdown per contractor — multi-KPI constellation chart",
|
|
697
707
|
style: {
|
|
698
|
-
width:
|
|
699
|
-
height:
|
|
708
|
+
width: L,
|
|
709
|
+
height: R,
|
|
700
710
|
display: "block"
|
|
701
711
|
}
|
|
702
|
-
}), /* @__PURE__ */ s(
|
|
712
|
+
}), /* @__PURE__ */ s(S, {
|
|
703
713
|
...l,
|
|
704
|
-
parentW:
|
|
705
|
-
parentH:
|
|
714
|
+
parentW: L,
|
|
715
|
+
parentH: R
|
|
706
716
|
})]
|
|
707
717
|
});
|
|
708
718
|
}
|
|
709
719
|
//#endregion
|
|
710
720
|
//#region src/components/contractValueOrb/ContractValueOrb.tsx
|
|
711
|
-
var
|
|
721
|
+
var _e = 680, ve = 220, ye = [
|
|
712
722
|
u.blue,
|
|
713
723
|
u.cyan,
|
|
714
724
|
u.amber,
|
|
@@ -719,185 +729,185 @@ var he = 680, ge = 220, _e = [
|
|
|
719
729
|
right: 64,
|
|
720
730
|
top: 16,
|
|
721
731
|
bottom: 38
|
|
722
|
-
},
|
|
723
|
-
function
|
|
724
|
-
let n = a(null), r = a(/* @__PURE__ */ new Map()), { hoveredRef: i, tooltip: o, hitZonesRef: l } =
|
|
725
|
-
width:
|
|
726
|
-
height:
|
|
727
|
-
}), { contractors: d = [], totals:
|
|
728
|
-
return
|
|
729
|
-
|
|
730
|
-
let a =
|
|
731
|
-
e.font =
|
|
732
|
+
}, B = 88, V = 18;
|
|
733
|
+
function be({ data: e, "data-testid": t }) {
|
|
734
|
+
let n = a(null), r = a(/* @__PURE__ */ new Map()), { hoveredRef: i, tooltip: o, hitZonesRef: l } = C(n, {
|
|
735
|
+
width: _e,
|
|
736
|
+
height: ve
|
|
737
|
+
}), { contractors: d = [], totals: h } = e, g = d.length, _ = Math.max(...d.map((e) => e.total ?? 0), 1), y = _e - z.left - B - z.right, b = g > 1 ? (ve - z.top - z.bottom - g * V) / (g - 1) : 0;
|
|
738
|
+
return ue(n, _e, ve, (e, t) => {
|
|
739
|
+
M(r.current, i.current), l.current = [], d.forEach((n, i) => {
|
|
740
|
+
let a = ye[i % ye.length], o = j(t, i, g, D), s = z.top + i * (V + b), c = z.left + B, d = r.current.get(n.id) ?? 0, p = (n.base ?? 0) / _ * y * o, h = (n.total ?? 0) / _ * y * o, x = h - p;
|
|
741
|
+
e.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = d > 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 = m(u.bd, .25), e.beginPath(), e.roundRect(c, s, y, V, 4), e.fill(), p > 0 && (d > 0 && v(e, c + p / 2, s + V / 2, p * .3, a, .1 * d), e.fillStyle = m(a, .5 + d * .15), e.beginPath(), e.roundRect(c, s, p, V, 4), e.fill()), x > 2 && (e.fillStyle = m(a, .22 + d * .08), e.beginPath(), e.roundRect(c + p, s, x, V, [
|
|
732
742
|
0,
|
|
733
743
|
4,
|
|
734
744
|
4,
|
|
735
745
|
0
|
|
736
|
-
]), e.fill(), e.setLineDash([2, 3]), e.strokeStyle =
|
|
746
|
+
]), e.fill(), e.setLineDash([2, 3]), e.strokeStyle = m(a, .55), e.lineWidth = 1, e.beginPath(), e.moveTo(c + p, s + 3), e.lineTo(c + p, s + V - 3), e.stroke(), e.setLineDash([])), d > 0 && h > 0 && (e.strokeStyle = m(a, .5 * d), e.lineWidth = 1, e.setLineDash([]), e.beginPath(), e.roundRect(c, s, h, 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 = d > 0 ? a : u.t2, e.textAlign = "left", e.textBaseline = "middle", e.fillText(`£${n.total ?? 0}M`, c + h + 6, s + V / 2), e.globalAlpha = 1), T(l.current, n.id, c, s, Math.max(h, 1), V, {
|
|
737
747
|
label: n.name,
|
|
738
748
|
value: `£${n.total ?? 0}M total`,
|
|
739
749
|
sublabel: `Base £${n.base ?? 0}M + Var £${n.variation ?? 0}M · ${n.percentage ?? 0}% committed`,
|
|
740
750
|
color: a
|
|
741
751
|
});
|
|
742
752
|
});
|
|
743
|
-
let n =
|
|
744
|
-
e.textBaseline = "middle", e.font = "
|
|
745
|
-
}, !0, { easing:
|
|
753
|
+
let n = ve - 14;
|
|
754
|
+
e.textBaseline = "middle", e.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.textAlign = "left", e.fillStyle = m(u.cyan, .5), e.beginPath(), e.roundRect(z.left + B, n - 3, 14, 6, 2), e.fill(), e.fillStyle = p.color, e.fillText("base value", z.left + B + 18, n), e.fillStyle = m(u.cyan, .22), e.beginPath(), e.roundRect(z.left + B + 94, n - 3, 14, 6, 2), e.fill(), e.setLineDash([2, 3]), e.strokeStyle = m(u.cyan, .5), e.lineWidth = .5, e.beginPath(), e.moveTo(z.left + B + 101, n - 3), e.lineTo(z.left + B + 101, n + 3), e.stroke(), e.setLineDash([]), e.fillStyle = p.color, e.fillText("approved variations", z.left + B + 112, n), e.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.textAlign = "right", e.fillStyle = p.color, e.fillText(`Portfolio: £${h?.total ?? 0}M`, _e - 8, n);
|
|
755
|
+
}, !0, { easing: D }), /* @__PURE__ */ c("div", {
|
|
746
756
|
"data-testid": t,
|
|
747
757
|
style: {
|
|
748
758
|
position: "relative",
|
|
749
|
-
width:
|
|
750
|
-
height:
|
|
759
|
+
width: _e,
|
|
760
|
+
height: ve
|
|
751
761
|
},
|
|
752
762
|
children: [/* @__PURE__ */ s("canvas", {
|
|
753
763
|
ref: n,
|
|
754
764
|
role: "img",
|
|
755
765
|
"aria-label": "Total contract value per contractor — horizontal bar chart",
|
|
756
766
|
style: {
|
|
757
|
-
width:
|
|
758
|
-
height:
|
|
767
|
+
width: _e,
|
|
768
|
+
height: ve,
|
|
759
769
|
display: "block",
|
|
760
770
|
borderRadius: 8
|
|
761
771
|
}
|
|
762
|
-
}), /* @__PURE__ */ s(
|
|
772
|
+
}), /* @__PURE__ */ s(S, {
|
|
763
773
|
...o,
|
|
764
|
-
parentW:
|
|
765
|
-
parentH:
|
|
774
|
+
parentW: _e,
|
|
775
|
+
parentH: ve
|
|
766
776
|
})]
|
|
767
777
|
});
|
|
768
778
|
}
|
|
769
779
|
//#endregion
|
|
770
780
|
//#region src/components/contractorRank/ContractorRank.tsx
|
|
771
|
-
var
|
|
781
|
+
var xe = 780, H = 240, Se = 12, Ce = 10, we = [
|
|
772
782
|
"Highest exposure",
|
|
773
783
|
"Elevated risk",
|
|
774
784
|
"Moderate exposure",
|
|
775
785
|
"Moderate exposure",
|
|
776
786
|
"Low exposure"
|
|
777
787
|
];
|
|
778
|
-
function
|
|
779
|
-
let r = a(null), i = a(0), o = a(/* @__PURE__ */ new Map()), { hoveredRef: l, tooltip: d, hitZonesRef: p } =
|
|
780
|
-
width:
|
|
781
|
-
height:
|
|
782
|
-
}),
|
|
788
|
+
function Te({ contractors: e = [], "data-testid": t }) {
|
|
789
|
+
let r = a(null), i = a(0), o = a(/* @__PURE__ */ new Map()), { hoveredRef: l, tooltip: d, hitZonesRef: p } = C(r, {
|
|
790
|
+
width: xe,
|
|
791
|
+
height: H
|
|
792
|
+
}), h = [...e].sort((e, t) => (t.count ?? 0) - (e.count ?? 0)).slice(0, 5), g = h.reduce((e, t) => e + (t.count ?? 0), 0);
|
|
783
793
|
return n(() => {
|
|
784
794
|
let e = r.current;
|
|
785
795
|
if (!e) return;
|
|
786
|
-
let t =
|
|
796
|
+
let t = _(e, xe, H);
|
|
787
797
|
i.current = 0;
|
|
788
|
-
let n = Math.min(5,
|
|
798
|
+
let n = Math.min(5, h.length), a = (xe - 2 * Se - (n - 1) * Ce) / n, s = H * .84, c = H * .08, d, y = () => {
|
|
789
799
|
i.current++;
|
|
790
800
|
let e = i.current;
|
|
791
|
-
t.clearRect(0, 0,
|
|
801
|
+
t.clearRect(0, 0, xe, H), p.current = [], o.current.forEach((e, t) => {
|
|
792
802
|
let n = t === l.current ? 1 : 0, r = e + (n - e) * .12;
|
|
793
803
|
Math.abs(r - n) < .005 ? n === 0 ? o.current.delete(t) : o.current.set(t, 1) : o.current.set(t, r);
|
|
794
|
-
}), l.current && !o.current.has(l.current) && o.current.set(l.current, 0),
|
|
795
|
-
let i = r === 0, l = i ? u.red : r === 1 ? u.amber : u.blue, d =
|
|
796
|
-
t.fillStyle =
|
|
797
|
-
let
|
|
798
|
-
|
|
799
|
-
let
|
|
800
|
-
|
|
804
|
+
}), l.current && !o.current.has(l.current) && o.current.set(l.current, 0), h.forEach((n, r) => {
|
|
805
|
+
let i = r === 0, l = i ? u.red : r === 1 ? u.amber : u.blue, d = Se + r * (a + Ce), h = o.current.get(n.id) ?? 0, _ = h * 8, y = d - _ / 2, b = a + _, x = i ? A(e, .04, 3e-4) * .06 + .06 : 0;
|
|
806
|
+
t.fillStyle = m(l, .08 + h * .07), t.beginPath(), t.roundRect(y, c, b, s, 6), t.fill(), t.strokeStyle = m(l, .2 + h * .4 + x), t.lineWidth = i ? 1.5 : 1, t.stroke(), (h > .01 || i) && v(t, y + b / 2, c + s / 2, b * .55, l, x + h * .14), t.font = "bold " + f.font, t.textAlign = "left", t.textBaseline = "top", t.fillStyle = m(l, .5 + h * .35), t.fillText(`#${r + 1}`, y + 7, c + 6);
|
|
807
|
+
let S = a * .28, C = y + b / 2, w = c + s * .38, E = t.createRadialGradient(C, w - S * .2, 0, C, w, S);
|
|
808
|
+
E.addColorStop(0, m(l, .5 + h * .2)), E.addColorStop(1, m(l, .2 + h * .1)), t.beginPath(), t.arc(C, w, S, 0, Math.PI * 2), t.fillStyle = E, t.fill(), t.strokeStyle = m(l, .4 + h * .3), t.lineWidth = 1, t.stroke(), t.font = "bold " + f.font, t.textAlign = "center", t.textBaseline = "middle", t.fillStyle = m(u.t1, .9), t.fillText(n.abbreviation ?? n.name.slice(0, 6), C, w), t.font = "bold 14px 'Satoshi Variable', 'DM Sans', sans-serif", t.textBaseline = "alphabetic", t.fillStyle = m(l, .9 + h * .1), t.fillText(String(n.count ?? 0), C, c + s * .76), t.font = f.font, t.fillStyle = f.color, t.fillText("open EWs", C, c + s * .88);
|
|
809
|
+
let D = Math.round((n.count ?? 0) / (g || 1) * 100), O = we[r] ?? "Low exposure";
|
|
810
|
+
T(p.current, n.id, d, c, a, s, {
|
|
801
811
|
label: n.name,
|
|
802
|
-
value: `${n.count ?? 0} open · ${
|
|
803
|
-
sublabel: `Rank #${r + 1} · ${
|
|
812
|
+
value: `${n.count ?? 0} open · ${D}% of total`,
|
|
813
|
+
sublabel: `Rank #${r + 1} · ${O}`,
|
|
804
814
|
color: l
|
|
805
815
|
});
|
|
806
|
-
}),
|
|
816
|
+
}), b(t, xe, H, e, .015), d = requestAnimationFrame(y);
|
|
807
817
|
};
|
|
808
818
|
return y(), () => cancelAnimationFrame(d);
|
|
809
|
-
}, [
|
|
819
|
+
}, [h, g]), /* @__PURE__ */ c("div", {
|
|
810
820
|
"data-testid": t,
|
|
811
821
|
style: {
|
|
812
822
|
position: "relative",
|
|
813
|
-
width:
|
|
814
|
-
height:
|
|
823
|
+
width: xe,
|
|
824
|
+
height: H
|
|
815
825
|
},
|
|
816
826
|
children: [/* @__PURE__ */ s("canvas", {
|
|
817
827
|
ref: r,
|
|
818
828
|
role: "img",
|
|
819
829
|
"aria-label": "Contractor rank — open EW count per contractor",
|
|
820
830
|
style: {
|
|
821
|
-
width:
|
|
822
|
-
height:
|
|
831
|
+
width: xe,
|
|
832
|
+
height: H,
|
|
823
833
|
display: "block",
|
|
824
834
|
borderRadius: 8
|
|
825
835
|
}
|
|
826
|
-
}), /* @__PURE__ */ s(
|
|
836
|
+
}), /* @__PURE__ */ s(S, {
|
|
827
837
|
...d,
|
|
828
|
-
parentW:
|
|
829
|
-
parentH:
|
|
838
|
+
parentW: xe,
|
|
839
|
+
parentH: H
|
|
830
840
|
})]
|
|
831
841
|
});
|
|
832
842
|
}
|
|
833
843
|
//#endregion
|
|
834
844
|
//#region src/components/ewCategory/EWCategory.tsx
|
|
835
|
-
var
|
|
836
|
-
function
|
|
837
|
-
let r = a(null), i = a(0), o = a(/* @__PURE__ */ new Map()), { hoveredRef: l, tooltip: d, hitZonesRef:
|
|
838
|
-
width:
|
|
839
|
-
height:
|
|
845
|
+
var U = 680, W = 260;
|
|
846
|
+
function Ee({ categories: e = [], "data-testid": t }) {
|
|
847
|
+
let r = a(null), i = a(0), o = a(/* @__PURE__ */ new Map()), { hoveredRef: l, tooltip: d, hitZonesRef: f } = C(r, {
|
|
848
|
+
width: U,
|
|
849
|
+
height: W
|
|
840
850
|
});
|
|
841
851
|
return n(() => {
|
|
842
852
|
let t = r.current;
|
|
843
853
|
if (!t) return;
|
|
844
|
-
let n =
|
|
854
|
+
let n = _(t, U, W);
|
|
845
855
|
i.current = 0;
|
|
846
|
-
let a = e.length, s = Math.max(...e.map((e) => e.count), 1), c = s, d =
|
|
856
|
+
let a = e.length, s = Math.max(...e.map((e) => e.count), 1), c = s, d = U * .05, p = W * .1, h = U * .9 / a, g = W * .7 / c, x = e.reduce((e, t) => e + t.count, 0), S, C = () => {
|
|
847
857
|
i.current++;
|
|
848
858
|
let t = i.current;
|
|
849
|
-
n.clearRect(0, 0,
|
|
859
|
+
n.clearRect(0, 0, U, W), f.current = [], o.current.forEach((e, t) => {
|
|
850
860
|
let n = t === l.current ? 1 : 0, r = e + (n - e) * .12;
|
|
851
861
|
Math.abs(r - n) < .005 ? n === 0 ? o.current.delete(t) : o.current.set(t, 1) : o.current.set(t, r);
|
|
852
|
-
}), l.current && !o.current.has(l.current) && o.current.set(l.current, 0),
|
|
862
|
+
}), l.current && !o.current.has(l.current) && o.current.set(l.current, 0), y(n, U, W, t, 40, m(u.blue, .04)), e.forEach((e, r) => {
|
|
853
863
|
let i = e.count === s, a = i ? u.cyan : u.blue, l = o.current.get(`${e.category}-col`) ?? 0;
|
|
854
864
|
for (let u = 0; u < c; u++) {
|
|
855
|
-
let c = d + r *
|
|
865
|
+
let c = d + r * h + h / 2, _ = p + u * g + g / 2, y = Math.min(h, g) * .38;
|
|
856
866
|
if (u >= s - e.count) {
|
|
857
|
-
let s =
|
|
858
|
-
(i || l > .01) &&
|
|
867
|
+
let s = y * (1 + (A(t, .04, 5e-4) + Math.sin(r * .6 + u * 1.2) * .3) * .12);
|
|
868
|
+
(i || l > .01) && v(n, c, _, s * 3, a, (i ? .2 : .1) + l * .1), n.beginPath(), n.arc(c, _, s, 0, Math.PI * 2), n.fillStyle = m(a, i ? .8 : .5 + l * .2), n.fill();
|
|
859
869
|
let d = `${e.category}-${u}`;
|
|
860
|
-
|
|
870
|
+
w(f.current, d, c, _, y + 4, {
|
|
861
871
|
label: e.fullName,
|
|
862
872
|
value: `${e.count} Early Warnings`,
|
|
863
873
|
sublabel: `${Math.round(e.count / x * 100)}% of total`,
|
|
864
874
|
color: a
|
|
865
875
|
}), o.current.get(`${e.category}-col`);
|
|
866
|
-
} else n.beginPath(), n.arc(c,
|
|
876
|
+
} else n.beginPath(), n.arc(c, _, 1, 0, Math.PI * 2), n.fillStyle = m(a, .08), n.fill();
|
|
867
877
|
}
|
|
868
|
-
let
|
|
869
|
-
n.font = `${i ? "bold " : ""}9px 'JetBrains Mono', monospace`, n.textAlign = "center", n.textBaseline = "alphabetic", n.fillStyle = i ? u.cyan :
|
|
870
|
-
}),
|
|
878
|
+
let _ = p + c * g + 16;
|
|
879
|
+
n.font = `${i ? "bold " : ""}9px 'JetBrains Mono', monospace`, n.textAlign = "center", n.textBaseline = "alphabetic", n.fillStyle = i ? u.cyan : m(u.t2, .65), n.fillText(e.category, d + r * h + h / 2, _);
|
|
880
|
+
}), b(n, U, W, t, .015), S = requestAnimationFrame(C);
|
|
871
881
|
};
|
|
872
|
-
return
|
|
882
|
+
return C(), () => cancelAnimationFrame(S);
|
|
873
883
|
}, [e]), /* @__PURE__ */ c("div", {
|
|
874
884
|
"data-testid": t,
|
|
875
885
|
style: {
|
|
876
886
|
position: "relative",
|
|
877
|
-
width:
|
|
878
|
-
height:
|
|
887
|
+
width: U,
|
|
888
|
+
height: W
|
|
879
889
|
},
|
|
880
890
|
children: [/* @__PURE__ */ s("canvas", {
|
|
881
891
|
ref: r,
|
|
882
892
|
role: "img",
|
|
883
893
|
"aria-label": "Early Warning count by category — breathing dot grid",
|
|
884
894
|
style: {
|
|
885
|
-
width:
|
|
886
|
-
height:
|
|
895
|
+
width: U,
|
|
896
|
+
height: W,
|
|
887
897
|
display: "block",
|
|
888
898
|
borderRadius: 8
|
|
889
899
|
}
|
|
890
|
-
}), /* @__PURE__ */ s(
|
|
900
|
+
}), /* @__PURE__ */ s(S, {
|
|
891
901
|
...d,
|
|
892
|
-
parentW:
|
|
893
|
-
parentH:
|
|
902
|
+
parentW: U,
|
|
903
|
+
parentH: W
|
|
894
904
|
})]
|
|
895
905
|
});
|
|
896
906
|
}
|
|
897
907
|
//#endregion
|
|
898
908
|
//#region src/components/lineChart/LineChart.tsx
|
|
899
|
-
function
|
|
900
|
-
return /* @__PURE__ */ s(
|
|
909
|
+
function De({ rows: e = [], className: t, colors: n }) {
|
|
910
|
+
return /* @__PURE__ */ s(te, {
|
|
901
911
|
rows: e,
|
|
902
912
|
variant: "line",
|
|
903
913
|
className: t,
|
|
@@ -906,14 +916,16 @@ function Ee({ rows: e = [], className: t, colors: n }) {
|
|
|
906
916
|
}
|
|
907
917
|
//#endregion
|
|
908
918
|
//#region src/components/constants.ts
|
|
909
|
-
var
|
|
910
|
-
"#
|
|
911
|
-
"#
|
|
912
|
-
"#
|
|
913
|
-
"#
|
|
914
|
-
"#
|
|
915
|
-
"#
|
|
916
|
-
|
|
919
|
+
var Oe = [
|
|
920
|
+
"#36BFFA",
|
|
921
|
+
"#16B364",
|
|
922
|
+
"#D444F1",
|
|
923
|
+
"#FAC515",
|
|
924
|
+
"#2970FF",
|
|
925
|
+
"#7A5AF8",
|
|
926
|
+
"#EF6820",
|
|
927
|
+
"#D92D20"
|
|
928
|
+
], ke = {
|
|
917
929
|
nodes: [
|
|
918
930
|
{
|
|
919
931
|
id: "supplier-x",
|
|
@@ -956,8 +968,8 @@ var De = [
|
|
|
956
968
|
};
|
|
957
969
|
//#endregion
|
|
958
970
|
//#region src/components/miniBars/MiniBars.tsx
|
|
959
|
-
function
|
|
960
|
-
let r = n?.slices ??
|
|
971
|
+
function Ae({ rows: e = [], className: t, colors: n }) {
|
|
972
|
+
let r = n?.slices ?? Oe;
|
|
961
973
|
return /* @__PURE__ */ s("div", {
|
|
962
974
|
className: ["d3-mini-bars", t].filter(Boolean).join(" "),
|
|
963
975
|
children: e.map(([e, t, n], i) => /* @__PURE__ */ c("div", {
|
|
@@ -983,7 +995,7 @@ function ke({ rows: e = [], className: t, colors: n }) {
|
|
|
983
995
|
width: Math.max(0, Math.min(100, t)),
|
|
984
996
|
height: "12",
|
|
985
997
|
rx: "6",
|
|
986
|
-
className: `d3-mini-fill tone-${i %
|
|
998
|
+
className: `d3-mini-fill tone-${i % Oe.length}`,
|
|
987
999
|
fill: r[i % r.length]
|
|
988
1000
|
})]
|
|
989
1001
|
})
|
|
@@ -995,103 +1007,103 @@ function ke({ rows: e = [], className: t, colors: n }) {
|
|
|
995
1007
|
}
|
|
996
1008
|
//#endregion
|
|
997
1009
|
//#region src/components/nceTree/NCETree.tsx
|
|
998
|
-
var
|
|
999
|
-
function
|
|
1000
|
-
let i = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), { hoveredRef: p, tooltip:
|
|
1001
|
-
width:
|
|
1002
|
-
height:
|
|
1010
|
+
var je = 680, Me = 320;
|
|
1011
|
+
function Ne({ total: e = 0, byContractor: t = [], "data-testid": r }) {
|
|
1012
|
+
let i = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), { hoveredRef: p, tooltip: h, hitZonesRef: g } = C(i, {
|
|
1013
|
+
width: je,
|
|
1014
|
+
height: Me
|
|
1003
1015
|
});
|
|
1004
1016
|
return n(() => {
|
|
1005
1017
|
let n = i.current;
|
|
1006
1018
|
if (!n) return;
|
|
1007
|
-
let r =
|
|
1019
|
+
let r = _(n, je, Me);
|
|
1008
1020
|
l.current = 0;
|
|
1009
|
-
let a =
|
|
1021
|
+
let a = Me / 2, s = je - 80, c = Math.max(...t.map((e) => e.count ?? 0)), h = (Me - 60) / (t.length - 1), y = t.map((e, t) => ({
|
|
1010
1022
|
x: s,
|
|
1011
|
-
y: 30 + t *
|
|
1012
|
-
})),
|
|
1023
|
+
y: 30 + t * h
|
|
1024
|
+
})), b, x = () => {
|
|
1013
1025
|
l.current++;
|
|
1014
1026
|
let n = l.current;
|
|
1015
|
-
r.clearRect(0, 0,
|
|
1016
|
-
let i =
|
|
1017
|
-
|
|
1018
|
-
let p = d[l % d.length],
|
|
1019
|
-
if (
|
|
1020
|
-
let
|
|
1027
|
+
r.clearRect(0, 0, je, Me);
|
|
1028
|
+
let i = E(Math.min(n / 72, 1));
|
|
1029
|
+
M(o.current, p.current), g.current = [], v(r, 88, a, 48 * i, u.blue, .15 * i), t.forEach((n, l) => {
|
|
1030
|
+
let p = d[l % d.length], h = j(i, l, t.length, E), _ = y[l], b = o.current.get(n.id) ?? 0, x = Math.max(1.5, (n.count ?? 0) / c * 6);
|
|
1031
|
+
if (h < .01) return;
|
|
1032
|
+
let S = 88 + (s - 88) * .4, C = a, T = 88 + (s - 88) * .6, D = _.y, O = h;
|
|
1021
1033
|
r.beginPath();
|
|
1022
1034
|
for (let e = 0; e <= 40; e++) {
|
|
1023
|
-
let t = e / 40 *
|
|
1035
|
+
let t = e / 40 * O, n = (1 - t) ** 3 * 88 + 3 * (1 - t) ** 2 * t * S + 3 * (1 - t) * t ** 2 * T + t ** 3 * _.x, i = (1 - t) ** 3 * a + 3 * (1 - t) ** 2 * t * C + 3 * (1 - t) * t ** 2 * D + t ** 3 * _.y;
|
|
1024
1036
|
e === 0 ? r.moveTo(n, i) : r.lineTo(n, i);
|
|
1025
1037
|
}
|
|
1026
|
-
if (r.strokeStyle =
|
|
1027
|
-
let t = Math.min(1, (
|
|
1028
|
-
|
|
1038
|
+
if (r.strokeStyle = m(p, b > 0 ? .8 : .45), r.lineWidth = x * (b > 0 ? 1.3 : 1), r.stroke(), h > .85) {
|
|
1039
|
+
let t = Math.min(1, (h - .85) / .15), i = 4 + (n.count ?? 0) / c * 12;
|
|
1040
|
+
v(r, _.x, _.y, i * 2.5, p, (.25 + b * .2) * t), r.beginPath(), r.arc(_.x, _.y, i * t, 0, Math.PI * 2), r.fillStyle = m(p, (.7 + b * .2) * t), r.fill(), w(g.current, n.id, _.x, _.y, i + 8, {
|
|
1029
1041
|
label: n.name,
|
|
1030
1042
|
value: `${n.count ?? 0} NCEs raised`,
|
|
1031
1043
|
sublabel: `${Math.round((n.count ?? 0) / e * 100)}% of all NCEs`,
|
|
1032
1044
|
color: p
|
|
1033
|
-
}), r.globalAlpha = t, r.font =
|
|
1045
|
+
}), r.globalAlpha = t, r.font = f.font, r.fillStyle = b > 0 ? p : m(u.t2, .85), r.textAlign = "left", r.fillText(n.abbreviation ?? n.name.slice(0, 6), _.x + i + 6, _.y - 3), r.font = f.font, r.fillStyle = b > 0 ? p : u.t1, r.fillText(String(n.count ?? 0), _.x + i + 6, _.y + 10), r.globalAlpha = 1;
|
|
1034
1046
|
}
|
|
1035
|
-
}), r.beginPath(), r.arc(88, a, 32 * i, 0, Math.PI * 2), r.fillStyle = u.bgL, r.fill(), r.strokeStyle =
|
|
1047
|
+
}), r.beginPath(), r.arc(88, a, 32 * i, 0, Math.PI * 2), r.fillStyle = u.bgL, r.fill(), r.strokeStyle = m(u.blue, .6 * i), r.lineWidth = 2, r.stroke(), i > .4 && (r.globalAlpha = Math.min(1, (i - .4) / .4), r.font = "500 24px 'Satoshi Variable', 'DM Sans', sans-serif", r.fillStyle = u.t1, r.textAlign = "center", r.fillText(String(e), 88, a + 5), r.font = f.font, r.fillStyle = f.color, r.fillText("NCEs", 88, a + 18), r.globalAlpha = 1), b = requestAnimationFrame(x);
|
|
1036
1048
|
};
|
|
1037
|
-
return
|
|
1049
|
+
return x(), () => cancelAnimationFrame(b);
|
|
1038
1050
|
}, [e, t]), /* @__PURE__ */ c("div", {
|
|
1039
1051
|
"data-testid": r,
|
|
1040
1052
|
style: {
|
|
1041
1053
|
position: "relative",
|
|
1042
|
-
width:
|
|
1043
|
-
height:
|
|
1054
|
+
width: je,
|
|
1055
|
+
height: Me
|
|
1044
1056
|
},
|
|
1045
1057
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1046
1058
|
ref: i,
|
|
1047
1059
|
role: "img",
|
|
1048
1060
|
"aria-label": "NCE fault tree — NCEs per contractor as branching tree",
|
|
1049
1061
|
style: {
|
|
1050
|
-
width:
|
|
1051
|
-
height:
|
|
1062
|
+
width: je,
|
|
1063
|
+
height: Me,
|
|
1052
1064
|
display: "block"
|
|
1053
1065
|
}
|
|
1054
|
-
}), /* @__PURE__ */ s(
|
|
1055
|
-
...
|
|
1056
|
-
parentW:
|
|
1057
|
-
parentH:
|
|
1066
|
+
}), /* @__PURE__ */ s(S, {
|
|
1067
|
+
...h,
|
|
1068
|
+
parentW: je,
|
|
1069
|
+
parentH: Me
|
|
1058
1070
|
})]
|
|
1059
1071
|
});
|
|
1060
1072
|
}
|
|
1061
1073
|
//#endregion
|
|
1062
1074
|
//#region src/components/pieChart/PieChart.tsx
|
|
1063
|
-
var
|
|
1064
|
-
function
|
|
1065
|
-
let o = a(null),
|
|
1066
|
-
width:
|
|
1067
|
-
height:
|
|
1075
|
+
var Pe = 192, Fe = Pe, Ie = Pe + 80;
|
|
1076
|
+
function Le({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
1077
|
+
let o = a(null), f = a(/* @__PURE__ */ new Map()), p = a(0), h = i?.slices ?? d, { hoveredRef: y, tooltip: b, hitZonesRef: x } = C(o, {
|
|
1078
|
+
width: Fe,
|
|
1079
|
+
height: Ie
|
|
1068
1080
|
});
|
|
1069
1081
|
return n(() => {
|
|
1070
1082
|
let n = o.current;
|
|
1071
1083
|
if (!n) return;
|
|
1072
|
-
let r =
|
|
1073
|
-
|
|
1074
|
-
let i =
|
|
1075
|
-
|
|
1076
|
-
let n =
|
|
1077
|
-
r.clearRect(0, 0,
|
|
1084
|
+
let r = _(n, Fe, Ie);
|
|
1085
|
+
p.current = 0;
|
|
1086
|
+
let i = Fe / 2, a = Pe / 2, s = Pe * .4, c = t === "donut" ? Pe * .21 : 0, l = e.reduce((e, t) => e + (t.pricing ?? 0), 0) || 1, d, b = () => {
|
|
1087
|
+
p.current++;
|
|
1088
|
+
let n = p.current;
|
|
1089
|
+
r.clearRect(0, 0, Fe, Ie);
|
|
1078
1090
|
let o = 1 - (1 - Math.min(n / 48, 1)) ** 3;
|
|
1079
|
-
|
|
1080
|
-
let
|
|
1091
|
+
M(f.current, y.current), x.current = [];
|
|
1092
|
+
let _ = -Math.PI / 2;
|
|
1081
1093
|
e.forEach((e, t) => {
|
|
1082
|
-
let d = (e.pricing ?? 0) / l,
|
|
1083
|
-
|
|
1094
|
+
let d = (e.pricing ?? 0) / l, p = d * Math.PI * 2 * o, g = _ + p, y = h[t % h.length], b = f.current.get(e.id ?? `sl-${t}`) ?? 0, S = _ + p / 2, C = (s + c) / 2, T = i + Math.cos(S) * C, E = a + Math.sin(S) * C, D = (s - c) / 2 + 8;
|
|
1095
|
+
w(x.current, e.id ?? `sl-${t}`, T, E, D, {
|
|
1084
1096
|
label: e.vendor,
|
|
1085
1097
|
value: `${e.pricing ?? 0} (${Math.round(d * 100)}%)`,
|
|
1086
1098
|
color: y
|
|
1087
|
-
}), b > 0 &&
|
|
1088
|
-
let
|
|
1089
|
-
r.beginPath(), r.moveTo(i + Math.cos(
|
|
1090
|
-
}), t === "donut" && e.length > 0 &&
|
|
1091
|
-
let
|
|
1099
|
+
}), b > 0 && v(r, T, E, D * 2 * b, y, .2 * b);
|
|
1100
|
+
let O = A(n, .03, 3e-4), k = s + b * 6 + (b > 0 ? O * 2 : 0);
|
|
1101
|
+
r.beginPath(), r.moveTo(i + Math.cos(_) * c, a + Math.sin(_) * c), r.arc(i, a, k, _, g), c > 0 ? r.arc(i, a, c, g, _, !0) : r.lineTo(i, a), r.closePath(), r.fillStyle = m(y, .7 + b * .2), r.fill(), r.strokeStyle = m(u.bg, .8), r.lineWidth = 1.5, r.stroke(), _ = g;
|
|
1102
|
+
}), t === "donut" && e.length > 0 && v(r, i, a, c * .8, u.blue, .06);
|
|
1103
|
+
let S = Pe + 12;
|
|
1092
1104
|
e.forEach((e, t) => {
|
|
1093
|
-
let n =
|
|
1094
|
-
r.beginPath(), r.arc(8, o, 4, 0, Math.PI * 2), r.fillStyle =
|
|
1105
|
+
let n = h[t % h.length], i = (e.pricing ?? 0) / l, a = f.current.get(e.id ?? `sl-${t}`) ?? 0, o = S + t * 18;
|
|
1106
|
+
r.beginPath(), r.arc(8, o, 4, 0, Math.PI * 2), r.fillStyle = m(n, .8 + a * .2), r.fill(), r.font = "9px 'JetBrains Mono', monospace", r.fillStyle = m(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 = g(u.t3, n, a), r.textAlign = "right", r.fillText(`${e.pricing ?? 0} (${Math.round(i * 100)}%)`, Fe - 4, o + 3.5);
|
|
1095
1107
|
}), d = requestAnimationFrame(b);
|
|
1096
1108
|
};
|
|
1097
1109
|
return b(), () => cancelAnimationFrame(d);
|
|
@@ -1099,36 +1111,36 @@ function Fe({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
|
1099
1111
|
e,
|
|
1100
1112
|
t,
|
|
1101
1113
|
i,
|
|
1102
|
-
|
|
1114
|
+
h
|
|
1103
1115
|
]), /* @__PURE__ */ s(l, {
|
|
1104
1116
|
className: ["canvas-pie-frame", r].filter(Boolean).join(" "),
|
|
1105
1117
|
children: /* @__PURE__ */ c("div", {
|
|
1106
1118
|
style: {
|
|
1107
1119
|
position: "relative",
|
|
1108
|
-
width:
|
|
1109
|
-
height:
|
|
1120
|
+
width: Fe,
|
|
1121
|
+
height: Ie
|
|
1110
1122
|
},
|
|
1111
1123
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1112
1124
|
ref: o,
|
|
1113
1125
|
role: "img",
|
|
1114
1126
|
"aria-label": `${t} chart`,
|
|
1115
1127
|
style: {
|
|
1116
|
-
width:
|
|
1117
|
-
height:
|
|
1128
|
+
width: Fe,
|
|
1129
|
+
height: Ie,
|
|
1118
1130
|
display: "block",
|
|
1119
1131
|
borderRadius: 8
|
|
1120
1132
|
}
|
|
1121
|
-
}), /* @__PURE__ */ s(
|
|
1122
|
-
...
|
|
1123
|
-
parentW:
|
|
1124
|
-
parentH:
|
|
1133
|
+
}), /* @__PURE__ */ s(S, {
|
|
1134
|
+
...b,
|
|
1135
|
+
parentW: Fe,
|
|
1136
|
+
parentH: Ie
|
|
1125
1137
|
})]
|
|
1126
1138
|
})
|
|
1127
1139
|
});
|
|
1128
1140
|
}
|
|
1129
1141
|
//#endregion
|
|
1130
1142
|
//#region src/components/sankey/SankeySvg.tsx
|
|
1131
|
-
function
|
|
1143
|
+
function Re(e, t, n, r) {
|
|
1132
1144
|
let i = new Set(t.map((e) => e.source)), a = new Set(t.map((e) => e.target)), o = /* @__PURE__ */ new Map(), s = [];
|
|
1133
1145
|
for (e.forEach((e) => {
|
|
1134
1146
|
i.has(e.id) && !a.has(e.id) && s.push({
|
|
@@ -1173,67 +1185,67 @@ function Ie(e, t, n, r) {
|
|
|
1173
1185
|
});
|
|
1174
1186
|
}), f;
|
|
1175
1187
|
}
|
|
1176
|
-
function
|
|
1177
|
-
let
|
|
1188
|
+
function ze({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f, selectedEntity: p, className: h, colors: g }) {
|
|
1189
|
+
let y = a(null), x = a(/* @__PURE__ */ new Map()), E = a(0), D = a([]), O = g?.nodes ?? d, k = g?.links ?? u.bd, j = g?.activeLinks ?? u.blue, ee = g?.activeNodes ?? u.blue, N = i(() => Re(e, t, r, o), [
|
|
1178
1190
|
e,
|
|
1179
1191
|
t,
|
|
1180
1192
|
r,
|
|
1181
1193
|
o
|
|
1182
|
-
]), { hoveredRef:
|
|
1194
|
+
]), { hoveredRef: te, tooltip: ne, hitZonesRef: P } = C(y, {
|
|
1183
1195
|
width: r,
|
|
1184
1196
|
height: o
|
|
1185
1197
|
});
|
|
1186
1198
|
return n(() => {
|
|
1187
|
-
let n =
|
|
1199
|
+
let n = y.current;
|
|
1188
1200
|
if (!n) return;
|
|
1189
|
-
let i =
|
|
1201
|
+
let i = _(n, r, o);
|
|
1190
1202
|
E.current = 0, D.current = [];
|
|
1191
1203
|
let a = t.length > 0 ? Math.max(...t.map((e) => e.value)) : 1, s, c = () => {
|
|
1192
1204
|
E.current++;
|
|
1193
1205
|
let n = E.current;
|
|
1194
1206
|
i.clearRect(0, 0, r, o);
|
|
1195
1207
|
let l = 1 - (1 - Math.min(n / 56, 1)) ** 3;
|
|
1196
|
-
|
|
1197
|
-
let r =
|
|
1208
|
+
M(x.current, te.current), P.current = [], t.forEach((e, t) => {
|
|
1209
|
+
let r = N.get(e.source), o = N.get(e.target);
|
|
1198
1210
|
if (!r || !o) return;
|
|
1199
|
-
let s = !!
|
|
1211
|
+
let s = !!p && (e.source === p || e.target === p), c = s ? j : k, d = s ? .5 : .2, f = Math.max(3, e.value / a * 36 * l), h = 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;
|
|
1200
1212
|
for (let e = 0; e < 30; e++) {
|
|
1201
|
-
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,
|
|
1202
|
-
i.beginPath(), i.moveTo(l, u - h + x), i.lineTo(
|
|
1213
|
+
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 = A(n + r * 120 + t * 40, .025, 3e-4) * 1.2;
|
|
1214
|
+
i.beginPath(), i.moveTo(l, u - h + x), i.lineTo(f, p - h + x), i.lineTo(f, p + h + x), i.lineTo(l, u + h + x), i.closePath(), i.fillStyle = m(c, d * (.5 + r * .5)), i.fill();
|
|
1203
1215
|
}
|
|
1204
|
-
|
|
1216
|
+
w(P.current, `link-${t}`, b, (_ + y) / 2, f + 6, {
|
|
1205
1217
|
label: `${e.source} → ${e.target}`,
|
|
1206
1218
|
value: String(e.value),
|
|
1207
|
-
color: s ?
|
|
1219
|
+
color: s ? j : u.blue
|
|
1208
1220
|
}), Math.random() < .08 && D.current.push({
|
|
1209
1221
|
linkIdx: t,
|
|
1210
1222
|
prog: 0,
|
|
1211
1223
|
speed: .006 + Math.random() * .006,
|
|
1212
|
-
off: (Math.random() - .5) *
|
|
1224
|
+
off: (Math.random() - .5) * f * .5,
|
|
1213
1225
|
sz: 1 + Math.random()
|
|
1214
1226
|
});
|
|
1215
1227
|
}), e.forEach((e, t) => {
|
|
1216
|
-
let r =
|
|
1228
|
+
let r = N.get(e.id);
|
|
1217
1229
|
if (!r) return;
|
|
1218
|
-
let a =
|
|
1219
|
-
|
|
1230
|
+
let a = p === e.id, o = te.current === `node-${t}`, s = x.current.get(`node-${t}`) ?? 0, c = a ? ee : O[t % O.length];
|
|
1231
|
+
T(P.current, `node-${t}`, r.x, r.y, r.w, r.h, {
|
|
1220
1232
|
label: e.name,
|
|
1221
1233
|
value: e.valueLabel ?? e.id,
|
|
1222
1234
|
color: c
|
|
1223
|
-
}), (s > 0 || a) &&
|
|
1224
|
-
let l = a ?
|
|
1225
|
-
i.fillStyle =
|
|
1235
|
+
}), (s > 0 || a) && v(i, r.x + r.w / 2, r.y + r.h / 2, r.w * 2, c, .2 * Math.max(s, a ? .6 : 0));
|
|
1236
|
+
let l = a ? A(n, .03, 3e-4) * .15 : 0;
|
|
1237
|
+
i.fillStyle = m(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 = m(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());
|
|
1226
1238
|
let d = r.x + r.w + 8;
|
|
1227
|
-
i.font = `${a || o ? "bold " : ""}10px 'JetBrains Mono', monospace`, i.fillStyle =
|
|
1239
|
+
i.font = `${a || o ? "bold " : ""}10px 'JetBrains Mono', monospace`, i.fillStyle = m(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 = m(c, .5 + s * .2), i.fillText(e.valueLabel, d, r.y + r.h / 2 + 17));
|
|
1228
1240
|
}), D.current = D.current.filter((e) => {
|
|
1229
1241
|
if (e.prog += e.speed, e.prog > 1) return !1;
|
|
1230
1242
|
let n = t[e.linkIdx];
|
|
1231
1243
|
if (!n) return !1;
|
|
1232
|
-
let r =
|
|
1244
|
+
let r = N.get(n.source), a = N.get(n.target);
|
|
1233
1245
|
if (!r || !a) return !1;
|
|
1234
|
-
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,
|
|
1235
|
-
return i.beginPath(), i.arc(
|
|
1236
|
-
}), D.current.length > 150 && (D.current = D.current.slice(-150)),
|
|
1246
|
+
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, h = 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.cyan;
|
|
1247
|
+
return i.beginPath(), i.arc(p, h, e.sz, 0, Math.PI * 2), i.fillStyle = m(v, _), i.fill(), !0;
|
|
1248
|
+
}), D.current.length > 150 && (D.current = D.current.slice(-150)), b(i, r, o, n, .01), s = requestAnimationFrame(c);
|
|
1237
1249
|
};
|
|
1238
1250
|
return c(), () => {
|
|
1239
1251
|
cancelAnimationFrame(s), D.current = [];
|
|
@@ -1243,29 +1255,29 @@ function Le({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: p,
|
|
|
1243
1255
|
t,
|
|
1244
1256
|
r,
|
|
1245
1257
|
o,
|
|
1246
|
-
|
|
1247
|
-
|
|
1248
|
-
|
|
1258
|
+
p,
|
|
1259
|
+
g,
|
|
1260
|
+
N
|
|
1249
1261
|
]), /* @__PURE__ */ s(l, {
|
|
1250
|
-
className: ["canvas-sankey-frame",
|
|
1262
|
+
className: ["canvas-sankey-frame", h].filter(Boolean).join(" "),
|
|
1251
1263
|
children: /* @__PURE__ */ c("div", {
|
|
1252
1264
|
role: "img",
|
|
1253
|
-
"aria-label":
|
|
1265
|
+
"aria-label": f,
|
|
1254
1266
|
style: {
|
|
1255
1267
|
position: "relative",
|
|
1256
1268
|
width: r,
|
|
1257
1269
|
height: o
|
|
1258
1270
|
},
|
|
1259
1271
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1260
|
-
ref:
|
|
1272
|
+
ref: y,
|
|
1261
1273
|
style: {
|
|
1262
1274
|
width: r,
|
|
1263
1275
|
height: o,
|
|
1264
1276
|
display: "block",
|
|
1265
1277
|
borderRadius: 8
|
|
1266
1278
|
}
|
|
1267
|
-
}), /* @__PURE__ */ s(
|
|
1268
|
-
...
|
|
1279
|
+
}), /* @__PURE__ */ s(S, {
|
|
1280
|
+
...ne,
|
|
1269
1281
|
parentW: r,
|
|
1270
1282
|
parentH: o
|
|
1271
1283
|
})]
|
|
@@ -1274,7 +1286,7 @@ function Le({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: p,
|
|
|
1274
1286
|
}
|
|
1275
1287
|
//#endregion
|
|
1276
1288
|
//#region src/canvas/CausalFlowCanvas.tsx
|
|
1277
|
-
var
|
|
1289
|
+
var Be = [
|
|
1278
1290
|
{
|
|
1279
1291
|
x: .13,
|
|
1280
1292
|
y: .48
|
|
@@ -1307,7 +1319,7 @@ var Re = [
|
|
|
1307
1319
|
x: .92,
|
|
1308
1320
|
y: .22
|
|
1309
1321
|
}
|
|
1310
|
-
],
|
|
1322
|
+
], Ve = [
|
|
1311
1323
|
u.blue,
|
|
1312
1324
|
u.cyan,
|
|
1313
1325
|
u.orange,
|
|
@@ -1316,7 +1328,7 @@ var Re = [
|
|
|
1316
1328
|
u.green,
|
|
1317
1329
|
u.amber,
|
|
1318
1330
|
u.t2
|
|
1319
|
-
],
|
|
1331
|
+
], He = [
|
|
1320
1332
|
26,
|
|
1321
1333
|
24,
|
|
1322
1334
|
24,
|
|
@@ -1326,21 +1338,21 @@ var Re = [
|
|
|
1326
1338
|
22,
|
|
1327
1339
|
22
|
|
1328
1340
|
];
|
|
1329
|
-
function
|
|
1341
|
+
function Ue(e, t) {
|
|
1330
1342
|
let n = 1 - t;
|
|
1331
1343
|
return {
|
|
1332
1344
|
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,
|
|
1333
1345
|
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
|
|
1334
1346
|
};
|
|
1335
1347
|
}
|
|
1336
|
-
function
|
|
1348
|
+
function We(e, t) {
|
|
1337
1349
|
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;
|
|
1338
1350
|
return {
|
|
1339
1351
|
x: -i / a,
|
|
1340
1352
|
y: r / a
|
|
1341
1353
|
};
|
|
1342
1354
|
}
|
|
1343
|
-
function
|
|
1355
|
+
function Ge(e, t) {
|
|
1344
1356
|
let n = t.x - e.x, r = t.y - e.y;
|
|
1345
1357
|
return {
|
|
1346
1358
|
p0: {
|
|
@@ -1361,23 +1373,23 @@ function Ue(e, t) {
|
|
|
1361
1373
|
}
|
|
1362
1374
|
};
|
|
1363
1375
|
}
|
|
1364
|
-
function
|
|
1365
|
-
let d = a(null),
|
|
1376
|
+
function Ke({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntity: l }) {
|
|
1377
|
+
let d = a(null), f = a(0), p = a([]), { hoveredRef: h, tooltip: x, hitZonesRef: T } = C(d, {
|
|
1366
1378
|
width: r,
|
|
1367
1379
|
height: o
|
|
1368
1380
|
}), D = i(() => {
|
|
1369
1381
|
let t = /* @__PURE__ */ new Map();
|
|
1370
1382
|
return e.forEach((e, n) => t.set(e.id, n)), t;
|
|
1371
|
-
}, [e]),
|
|
1372
|
-
let n =
|
|
1383
|
+
}, [e]), O = i(() => t.length > 0 ? Math.max(...t.map((e) => e.value)) : 100, [t]), k = (e) => O > 1 ? e / 100 : e, j = i(() => e.map((e, t) => {
|
|
1384
|
+
let n = Be[t % Be.length];
|
|
1373
1385
|
return {
|
|
1374
1386
|
id: e.id,
|
|
1375
1387
|
label: e.name,
|
|
1376
1388
|
sub: e.valueLabel ?? "",
|
|
1377
1389
|
x: n.x * r,
|
|
1378
1390
|
y: n.y * o,
|
|
1379
|
-
r:
|
|
1380
|
-
color:
|
|
1391
|
+
r: He[t % He.length],
|
|
1392
|
+
color: Ve[t % Ve.length]
|
|
1381
1393
|
};
|
|
1382
1394
|
}), [
|
|
1383
1395
|
e,
|
|
@@ -1386,63 +1398,63 @@ function We({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1386
1398
|
]), M = i(() => t.map((e) => ({
|
|
1387
1399
|
fromIdx: D.get(e.source) ?? -1,
|
|
1388
1400
|
toIdx: D.get(e.target) ?? -1,
|
|
1389
|
-
conf:
|
|
1401
|
+
conf: k(e.value)
|
|
1390
1402
|
})).filter((e) => e.fromIdx >= 0 && e.toIdx >= 0), [t, D]);
|
|
1391
1403
|
return n(() => {
|
|
1392
1404
|
let e = d.current;
|
|
1393
1405
|
if (!e) return;
|
|
1394
|
-
let t =
|
|
1395
|
-
|
|
1406
|
+
let t = _(e, r, o);
|
|
1407
|
+
f.current = 0, p.current = [];
|
|
1396
1408
|
let n, i = () => {
|
|
1397
|
-
|
|
1398
|
-
let e =
|
|
1399
|
-
if (t.clearRect(0, 0, r, o),
|
|
1409
|
+
f.current++;
|
|
1410
|
+
let e = f.current;
|
|
1411
|
+
if (t.clearRect(0, 0, r, o), T.current = [], y(t, r, o, e, 50, m(u.blue, .05)), M.forEach((e, n) => {
|
|
1400
1412
|
let r = j[e.fromIdx], i = j[e.toIdx];
|
|
1401
1413
|
if (!r || !i) return;
|
|
1402
|
-
let a = !!l && (r.id === l || i.id === l), o =
|
|
1403
|
-
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 =
|
|
1404
|
-
for (let t = 0; t < e.conf * 2.5; t++) Math.random() < .45 &&
|
|
1414
|
+
let a = !!l && (r.id === l || i.id === l), o = g(r.color, i.color, .5), s = a ? .18 : .05, c = a ? .25 : .1, d = Ge(r, i);
|
|
1415
|
+
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 = m(o, s), t.lineWidth = 16, t.lineCap = "round", t.stroke(), t.strokeStyle = m(o, c), t.lineWidth = 1.5, t.stroke();
|
|
1416
|
+
for (let t = 0; t < e.conf * 2.5; t++) Math.random() < .45 && p.current.push({
|
|
1405
1417
|
edgeIdx: n,
|
|
1406
1418
|
t: 0,
|
|
1407
1419
|
speed: .003 + Math.random() * .004,
|
|
1408
1420
|
off: (Math.random() - .5) * 13,
|
|
1409
1421
|
sz: .7 + Math.random() * 2
|
|
1410
1422
|
});
|
|
1411
|
-
let
|
|
1423
|
+
let f = Ue(d, .5), h = `${Math.round(e.conf * 100)}%`;
|
|
1412
1424
|
t.font = "bold 12px 'JetBrains Mono', monospace", t.textBaseline = "middle";
|
|
1413
|
-
let
|
|
1414
|
-
t.fillStyle = "rgba(10,16,24,0.88)", t.beginPath(), t.roundRect(
|
|
1415
|
-
}),
|
|
1425
|
+
let _ = t.measureText(h).width + 14;
|
|
1426
|
+
t.fillStyle = "rgba(10,16,24,0.88)", t.beginPath(), t.roundRect(f.x - _ / 2, f.y - 11, _, 22, 6), t.fill(), t.strokeStyle = m(u.cyan, .25), t.lineWidth = 1, t.stroke(), t.fillStyle = m(u.cyan, .9), t.textAlign = "center", t.fillText(h, f.x, f.y);
|
|
1427
|
+
}), p.current = p.current.filter((e) => {
|
|
1416
1428
|
if (e.t += e.speed, e.t > 1) return !1;
|
|
1417
1429
|
let n = M[e.edgeIdx];
|
|
1418
1430
|
if (!n) return !1;
|
|
1419
1431
|
let r = j[n.fromIdx], i = j[n.toIdx];
|
|
1420
1432
|
if (!r || !i) return !1;
|
|
1421
|
-
let a =
|
|
1422
|
-
return
|
|
1423
|
-
}),
|
|
1424
|
-
let i = l === n.id, a =
|
|
1425
|
-
t.beginPath(), t.arc(n.x, n.y, s + 6, 0, Math.PI * 2), t.strokeStyle =
|
|
1433
|
+
let a = Ge(r, i), o = Ue(a, e.t), s = We(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 = g(r.color, i.color, e.t);
|
|
1434
|
+
return v(t, c, l, e.sz * 3, d, u * .1), t.beginPath(), t.arc(c, l, e.sz, 0, Math.PI * 2), t.fillStyle = m(d, u), t.fill(), !0;
|
|
1435
|
+
}), p.current.length > 350 && (p.current = p.current.slice(-350)), j.forEach((n, r) => {
|
|
1436
|
+
let i = l === n.id, a = h.current === `node-${r}`, o = A(e, .03, 3e-4) * .1 + 1, s = n.r * o * (i ? 1.15 : 1);
|
|
1437
|
+
t.beginPath(), t.arc(n.x, n.y, s + 6, 0, Math.PI * 2), t.strokeStyle = m(n.color, i ? .3 : .1), t.lineWidth = i ? 1.5 : .7, t.stroke(), v(t, n.x, n.y, s * 3, n.color, i ? .22 : .12);
|
|
1426
1438
|
let c = t.createRadialGradient(n.x, n.y - s * .2, 0, n.x, n.y, s);
|
|
1427
|
-
if (c.addColorStop(0,
|
|
1439
|
+
if (c.addColorStop(0, m(n.color, i ? 1 : .85)), c.addColorStop(1, m(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 === j.length - 1) {
|
|
1428
1440
|
let r = s + 16, i = e * .04, a = n.x + Math.cos(i) * r, o = n.y + Math.sin(i) * r;
|
|
1429
|
-
|
|
1441
|
+
v(t, a, o, 6, n.color, .3), t.beginPath(), t.arc(a, o, 2, 0, Math.PI * 2), t.fillStyle = m(n.color, .75), t.fill();
|
|
1430
1442
|
}
|
|
1431
|
-
|
|
1443
|
+
w(T.current, `node-${r}`, n.x, n.y, s + 8, {
|
|
1432
1444
|
label: n.label,
|
|
1433
1445
|
value: n.sub || n.id,
|
|
1434
1446
|
color: n.color
|
|
1435
|
-
}), t.font = `${i || a ? "bold " : ""}12px 'DM Sans', sans-serif`, t.textAlign = "center", t.textBaseline = "alphabetic", t.fillStyle =
|
|
1447
|
+
}), t.font = `${i || a ? "bold " : ""}12px 'DM Sans', sans-serif`, t.textAlign = "center", t.textBaseline = "alphabetic", t.fillStyle = m(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 = m(u.t3, .65), t.fillText(n.sub, n.x, n.y + s + 32));
|
|
1436
1448
|
}), M.length >= 2) {
|
|
1437
|
-
let n = M.reduce((e, t) => e * t.conf, 1), i = o * .92, a = r * .12, s = r * .76, c =
|
|
1438
|
-
t.fillStyle =
|
|
1449
|
+
let n = M.reduce((e, t) => e * t.conf, 1), i = o * .92, a = r * .12, s = r * .76, c = E(Math.min(e * .008, 1));
|
|
1450
|
+
t.fillStyle = m(u.bd, .35), t.beginPath(), t.roundRect(a, i, s, 5, 3), t.fill(), t.fillStyle = m(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 = m(u.orange, .85), t.fillText(`${Math.round(n * 100)}% compound confidence`, a + s * n * c + 10, i + 2);
|
|
1439
1451
|
let l = M.map((e) => e.conf.toFixed(2)).join(" × ");
|
|
1440
|
-
t.textAlign = "right", t.font = "9px 'JetBrains Mono', monospace", t.fillStyle =
|
|
1452
|
+
t.textAlign = "right", t.font = "9px 'JetBrains Mono', monospace", t.fillStyle = m(u.t4, .6), t.fillText(l, a - 6, i + 2);
|
|
1441
1453
|
}
|
|
1442
|
-
|
|
1454
|
+
b(t, r, o, e, .012), n = requestAnimationFrame(i);
|
|
1443
1455
|
};
|
|
1444
1456
|
return i(), () => {
|
|
1445
|
-
cancelAnimationFrame(n),
|
|
1457
|
+
cancelAnimationFrame(n), p.current = [];
|
|
1446
1458
|
};
|
|
1447
1459
|
}, [
|
|
1448
1460
|
j,
|
|
@@ -1466,8 +1478,8 @@ function We({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1466
1478
|
},
|
|
1467
1479
|
role: "img",
|
|
1468
1480
|
"aria-label": "causal flow diagram"
|
|
1469
|
-
}), /* @__PURE__ */ s(
|
|
1470
|
-
...
|
|
1481
|
+
}), /* @__PURE__ */ s(S, {
|
|
1482
|
+
...x,
|
|
1471
1483
|
parentW: r,
|
|
1472
1484
|
parentH: o
|
|
1473
1485
|
})]
|
|
@@ -1475,10 +1487,10 @@ function We({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1475
1487
|
}
|
|
1476
1488
|
//#endregion
|
|
1477
1489
|
//#region src/components/sankey/ProcessSankey.tsx
|
|
1478
|
-
function
|
|
1479
|
-
return /* @__PURE__ */ s(
|
|
1480
|
-
nodes:
|
|
1481
|
-
links:
|
|
1490
|
+
function qe({ selectedEntity: e, colors: t }) {
|
|
1491
|
+
return /* @__PURE__ */ s(Ke, {
|
|
1492
|
+
nodes: ke.nodes,
|
|
1493
|
+
links: ke.links,
|
|
1482
1494
|
width: 960,
|
|
1483
1495
|
height: 280,
|
|
1484
1496
|
selectedEntity: e
|
|
@@ -1486,7 +1498,7 @@ function Ge({ selectedEntity: e, colors: t }) {
|
|
|
1486
1498
|
}
|
|
1487
1499
|
//#endregion
|
|
1488
1500
|
//#region src/components/sankey/RankingSankey.tsx
|
|
1489
|
-
function
|
|
1501
|
+
function Je({ rows: e = [], className: t, colors: n }) {
|
|
1490
1502
|
let { nodes: r, links: a } = i(() => {
|
|
1491
1503
|
let t = e.slice(0, 5);
|
|
1492
1504
|
return {
|
|
@@ -1504,7 +1516,7 @@ function Ke({ rows: e = [], className: t, colors: n }) {
|
|
|
1504
1516
|
}))
|
|
1505
1517
|
};
|
|
1506
1518
|
}, [e]);
|
|
1507
|
-
return /* @__PURE__ */ s(
|
|
1519
|
+
return /* @__PURE__ */ s(ze, {
|
|
1508
1520
|
nodes: r,
|
|
1509
1521
|
links: a,
|
|
1510
1522
|
width: 760,
|
|
@@ -1516,62 +1528,62 @@ function Ke({ rows: e = [], className: t, colors: n }) {
|
|
|
1516
1528
|
}
|
|
1517
1529
|
//#endregion
|
|
1518
1530
|
//#region src/components/quotationBalance/QuotationBalance.tsx
|
|
1519
|
-
var
|
|
1520
|
-
function
|
|
1531
|
+
var Ye = 500, Xe = 320;
|
|
1532
|
+
function Ze({ accepted: e, submitted: t, "data-testid": r }) {
|
|
1521
1533
|
let i = a(null), o = a(0);
|
|
1522
1534
|
return n(() => {
|
|
1523
1535
|
let n = i.current;
|
|
1524
1536
|
if (!n) return;
|
|
1525
|
-
let r =
|
|
1537
|
+
let r = _(n, Ye, Xe);
|
|
1526
1538
|
o.current = 0;
|
|
1527
|
-
let a =
|
|
1539
|
+
let a = Ye / 2, s = Math.max(e.value, t.value), c = (e.value - t.value) / s * 14, l, d = () => {
|
|
1528
1540
|
o.current++;
|
|
1529
1541
|
let n = o.current;
|
|
1530
|
-
r.clearRect(0, 0,
|
|
1531
|
-
let i =
|
|
1532
|
-
r.strokeStyle =
|
|
1533
|
-
let
|
|
1542
|
+
r.clearRect(0, 0, Ye, Xe);
|
|
1543
|
+
let i = E(Math.min(n / 80, 1)), p = c * k(Math.min(n / 80, 1)) * Math.PI / 180;
|
|
1544
|
+
r.strokeStyle = m(u.bd, .5 * i), r.lineWidth = 2, r.beginPath(), r.moveTo(a, 100), r.lineTo(a, Xe - 80), r.stroke(), r.beginPath(), r.arc(a, 100, 5 * i, 0, Math.PI * 2), r.fillStyle = u.t2, r.fill();
|
|
1545
|
+
let h = {
|
|
1534
1546
|
x: a - Math.cos(p) * 160,
|
|
1535
1547
|
y: 100 + Math.sin(-p) * 160
|
|
1536
|
-
},
|
|
1548
|
+
}, g = {
|
|
1537
1549
|
x: a + Math.cos(p) * 160,
|
|
1538
1550
|
y: 100 + Math.sin(p) * 160
|
|
1539
1551
|
};
|
|
1540
|
-
r.strokeStyle =
|
|
1541
|
-
let _ = Math.max(20, e.value / s * 100 * i),
|
|
1542
|
-
|
|
1552
|
+
r.strokeStyle = m(u.t2, .5 * i), r.lineWidth = 2, r.beginPath(), r.moveTo(h.x, h.y), r.lineTo(g.x, g.y), r.stroke();
|
|
1553
|
+
let _ = Math.max(20, e.value / s * 100 * i), y = h.y + 18;
|
|
1554
|
+
v(r, h.x, y + _ / 2, 90 * .5, u.green, .18 * i), r.fillStyle = m(u.green, .5 * i), r.beginPath(), r.roundRect(h.x - 90 / 2, y, 90, _, [
|
|
1543
1555
|
0,
|
|
1544
1556
|
0,
|
|
1545
1557
|
6,
|
|
1546
1558
|
6
|
|
1547
|
-
]), r.fill(), r.strokeStyle =
|
|
1548
|
-
r.beginPath(), r.moveTo(
|
|
1549
|
-
}), i > .5 && (r.globalAlpha = Math.min(1, (i - .5) / .5), r.font = "bold 14px 'JetBrains Mono', monospace", r.fillStyle = u.green, r.textAlign = "center", r.fillText(e.label,
|
|
1550
|
-
let
|
|
1551
|
-
r.fillStyle =
|
|
1559
|
+
]), r.fill(), r.strokeStyle = m(u.green, .7 * i), r.lineWidth = 1.5, r.stroke(), r.strokeStyle = m(u.t3, .35 * i), r.lineWidth = 1, [-90 / 3, 90 / 3].forEach((e) => {
|
|
1560
|
+
r.beginPath(), r.moveTo(h.x + e, h.y + 4), r.lineTo(h.x + e, y), r.stroke();
|
|
1561
|
+
}), i > .5 && (r.globalAlpha = Math.min(1, (i - .5) / .5), r.font = "bold 14px 'JetBrains Mono', monospace", r.fillStyle = u.green, r.textAlign = "center", r.fillText(e.label, h.x, y + _ + 18), r.font = f.font, r.fillStyle = f.color, r.fillText("Accepted", h.x, y + _ + 32), r.fillText(`${e.count} quotations`, h.x, y + _ + 44), r.globalAlpha = 1);
|
|
1562
|
+
let b = Math.max(20, t.value / s * 100 * i), x = g.y + 18;
|
|
1563
|
+
r.fillStyle = m(u.amber, .3 * i), r.strokeStyle = m(u.amber, .5 * i), r.lineWidth = 1.5, r.beginPath(), r.roundRect(g.x - 90 / 2, x, 90, b, [
|
|
1552
1564
|
0,
|
|
1553
1565
|
0,
|
|
1554
1566
|
6,
|
|
1555
1567
|
6
|
|
1556
|
-
]), r.fill(), r.stroke(), r.strokeStyle =
|
|
1557
|
-
r.beginPath(), r.moveTo(
|
|
1558
|
-
}), i > .5 && (r.globalAlpha = Math.min(1, (i - .5) / .5), r.font = "bold 14px 'JetBrains Mono', monospace", r.fillStyle = u.amber, r.textAlign = "center", r.fillText(t.label,
|
|
1568
|
+
]), r.fill(), r.stroke(), r.strokeStyle = m(u.t3, .35 * i), r.lineWidth = 1, [-90 / 3, 90 / 3].forEach((e) => {
|
|
1569
|
+
r.beginPath(), r.moveTo(g.x + e, g.y + 4), r.lineTo(g.x + e, x), r.stroke();
|
|
1570
|
+
}), i > .5 && (r.globalAlpha = Math.min(1, (i - .5) / .5), r.font = "bold 14px 'JetBrains Mono', monospace", r.fillStyle = u.amber, r.textAlign = "center", r.fillText(t.label, g.x, x + b + 18), r.font = f.font, r.fillStyle = f.color, r.fillText("Submitted", g.x, x + b + 32), r.fillText(`${t.count} quotations`, g.x, x + b + 44), r.globalAlpha = 1), i > .85 && Math.abs(c) > 1 && (r.globalAlpha = Math.min(1, (i - .85) / .15) * .6, r.font = f.font, r.fillStyle = f.color, r.textAlign = "center", r.fillText(`${Math.abs(c).toFixed(1)}° tilt toward accepted`, a, Xe - 12), r.globalAlpha = 1), l = requestAnimationFrame(d);
|
|
1559
1571
|
};
|
|
1560
1572
|
return d(), () => cancelAnimationFrame(l);
|
|
1561
1573
|
}, [e, t]), /* @__PURE__ */ s("div", {
|
|
1562
1574
|
"data-testid": r,
|
|
1563
1575
|
style: {
|
|
1564
1576
|
position: "relative",
|
|
1565
|
-
width:
|
|
1566
|
-
height:
|
|
1577
|
+
width: Ye,
|
|
1578
|
+
height: Xe
|
|
1567
1579
|
},
|
|
1568
1580
|
children: /* @__PURE__ */ s("canvas", {
|
|
1569
1581
|
ref: i,
|
|
1570
1582
|
role: "img",
|
|
1571
1583
|
"aria-label": "Quotation balance — accepted vs submitted quotation value",
|
|
1572
1584
|
style: {
|
|
1573
|
-
width:
|
|
1574
|
-
height:
|
|
1585
|
+
width: Ye,
|
|
1586
|
+
height: Xe,
|
|
1575
1587
|
display: "block"
|
|
1576
1588
|
}
|
|
1577
1589
|
})
|
|
@@ -1579,71 +1591,71 @@ function Ye({ accepted: e, submitted: t, "data-testid": r }) {
|
|
|
1579
1591
|
}
|
|
1580
1592
|
//#endregion
|
|
1581
1593
|
//#region src/components/quotationTrend/QuotationTrend.tsx
|
|
1582
|
-
var
|
|
1583
|
-
function
|
|
1584
|
-
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: d, hitZonesRef: p } =
|
|
1585
|
-
width:
|
|
1594
|
+
var Qe = 680, G = 280;
|
|
1595
|
+
function $e({ trend: e = [], "data-testid": t }) {
|
|
1596
|
+
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: d, hitZonesRef: p } = C(r, {
|
|
1597
|
+
width: Qe,
|
|
1586
1598
|
height: G
|
|
1587
1599
|
});
|
|
1588
1600
|
return n(() => {
|
|
1589
1601
|
let t = r.current;
|
|
1590
1602
|
if (!t) return;
|
|
1591
|
-
let n =
|
|
1603
|
+
let n = _(t, Qe, G);
|
|
1592
1604
|
o.current = 0;
|
|
1593
|
-
let a =
|
|
1594
|
-
x: 54 + t *
|
|
1605
|
+
let a = Qe - 54 - 28, s = G - 30 - 54, c = Math.max(...e.map((e) => e.count)), d = e.length, h = d > 1 ? a / (d - 1) : a, g = e.map((e, t) => ({
|
|
1606
|
+
x: 54 + t * h,
|
|
1595
1607
|
y: 30 + s - e.count / c * s,
|
|
1596
1608
|
point: e
|
|
1597
|
-
})),
|
|
1609
|
+
})), y, b = () => {
|
|
1598
1610
|
o.current++;
|
|
1599
1611
|
let e = o.current;
|
|
1600
|
-
n.clearRect(0, 0,
|
|
1601
|
-
let t =
|
|
1602
|
-
|
|
1612
|
+
n.clearRect(0, 0, Qe, G);
|
|
1613
|
+
let t = E(Math.min(e / 72, 1));
|
|
1614
|
+
M(i.current, l.current), p.current = [], [
|
|
1603
1615
|
.25,
|
|
1604
1616
|
.5,
|
|
1605
1617
|
.75,
|
|
1606
1618
|
1
|
|
1607
1619
|
].forEach((e) => {
|
|
1608
1620
|
let t = 30 + s - e * s;
|
|
1609
|
-
n.strokeStyle =
|
|
1610
|
-
}), n.save(), n.translate(12, 30 + s / 2), n.rotate(-Math.PI / 2), n.font =
|
|
1611
|
-
let r = t * (d - 1),
|
|
1612
|
-
if (
|
|
1613
|
-
n.beginPath(), n.moveTo(
|
|
1614
|
-
for (let e = 1; e <
|
|
1615
|
-
let t = r - Math.floor(r), i = e <
|
|
1621
|
+
n.strokeStyle = m(u.bd, .18), n.lineWidth = 1, n.setLineDash([3, 5]), n.beginPath(), n.moveTo(54, t), n.lineTo(54 + a, t), n.stroke(), n.setLineDash([]), n.font = f.font, n.fillStyle = f.color, n.textAlign = "right", n.fillText(String(Math.round(c * e)), 48, t + 3);
|
|
1622
|
+
}), n.save(), n.translate(12, 30 + s / 2), n.rotate(-Math.PI / 2), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Submissions", 0, 0), n.restore(), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Week", 54 + a / 2, G - 6), n.strokeStyle = m(u.bd, .3), n.lineWidth = 1, n.setLineDash([]), n.beginPath(), n.moveTo(54, 30 + s), n.lineTo(54 + a, 30 + s), n.stroke();
|
|
1623
|
+
let r = t * (d - 1), h = Math.floor(r) + 1;
|
|
1624
|
+
if (h >= 2) {
|
|
1625
|
+
n.beginPath(), n.moveTo(g[0].x, 30 + s), n.lineTo(g[0].x, g[0].y);
|
|
1626
|
+
for (let e = 1; e < h; e++) {
|
|
1627
|
+
let t = r - Math.floor(r), i = e < h - 1 ? g[e].x : g[e - 1].x + (g[e].x - g[e - 1].x) * (e === Math.ceil(r) ? t : 1), a = e < h - 1 ? g[e].y : g[e - 1].y + (g[e].y - g[e - 1].y) * (e === Math.ceil(r) ? t : 1);
|
|
1616
1628
|
n.lineTo(i, a);
|
|
1617
1629
|
}
|
|
1618
|
-
let e =
|
|
1630
|
+
let e = g[Math.min(h - 1, d - 1)];
|
|
1619
1631
|
n.lineTo(e.x, 30 + s), n.closePath();
|
|
1620
1632
|
let t = n.createLinearGradient(0, 30, 0, 30 + s);
|
|
1621
|
-
t.addColorStop(0,
|
|
1633
|
+
t.addColorStop(0, m(u.cyan, .22)), t.addColorStop(1, m(u.cyan, .02)), n.fillStyle = t, n.fill();
|
|
1622
1634
|
}
|
|
1623
1635
|
n.beginPath();
|
|
1624
|
-
for (let e = 0; e <
|
|
1625
|
-
let t = r - Math.floor(r), i = e ===
|
|
1636
|
+
for (let e = 0; e < h; e++) {
|
|
1637
|
+
let t = r - Math.floor(r), i = e === h - 1 && e > 0 && e === Math.ceil(r), a = e === 0 || e < h - 1 ? g[e].x : g[e - 1].x + (g[e].x - g[e - 1].x) * (i ? t : 1), o = e === 0 || e < h - 1 ? g[e].y : g[e - 1].y + (g[e].y - g[e - 1].y) * (i ? t : 1);
|
|
1626
1638
|
e === 0 ? n.moveTo(a, o) : n.lineTo(a, o);
|
|
1627
1639
|
}
|
|
1628
|
-
n.strokeStyle =
|
|
1629
|
-
if (t >=
|
|
1640
|
+
n.strokeStyle = m(u.cyan, .85), n.lineWidth = 2, n.stroke(), g.forEach((e, t) => {
|
|
1641
|
+
if (t >= h) return;
|
|
1630
1642
|
let r = `pt-${t}`, a = i.current.get(r) ?? 0;
|
|
1631
|
-
|
|
1643
|
+
w(p.current, r, e.x, e.y, 10, {
|
|
1632
1644
|
label: e.point.week,
|
|
1633
1645
|
value: `${e.point.count} quotations submitted`,
|
|
1634
1646
|
sublabel: `£${e.point.value}M value`,
|
|
1635
1647
|
color: u.cyan
|
|
1636
|
-
}), a > 0 &&
|
|
1648
|
+
}), a > 0 && x(n, e.x, 30, 30 + s, m(u.cyan, .15 * a));
|
|
1637
1649
|
let o = e.point.count === c;
|
|
1638
|
-
(a > 0 || o) &&
|
|
1639
|
-
}),
|
|
1650
|
+
(a > 0 || o) && v(n, e.x, e.y, 14, u.cyan, (o ? .3 : 0) + a * .25), n.beginPath(), n.arc(e.x, e.y, a > 0 ? 5 : 3.5, 0, Math.PI * 2), n.fillStyle = m(u.cyan, a > 0 ? 1 : .8), n.fill(), (a > 0 || o) && (n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = u.cyan, n.textAlign = "center", n.fillText(String(e.point.count), e.x, e.y - 10)), n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = a > 0 ? u.cyan : f.color, n.textAlign = "center", n.fillText(e.point.week, e.x, G - 54 + 14);
|
|
1651
|
+
}), y = requestAnimationFrame(b);
|
|
1640
1652
|
};
|
|
1641
|
-
return b(), () => cancelAnimationFrame(
|
|
1653
|
+
return b(), () => cancelAnimationFrame(y);
|
|
1642
1654
|
}, [e]), /* @__PURE__ */ c("div", {
|
|
1643
1655
|
"data-testid": t,
|
|
1644
1656
|
style: {
|
|
1645
1657
|
position: "relative",
|
|
1646
|
-
width:
|
|
1658
|
+
width: Qe,
|
|
1647
1659
|
height: G
|
|
1648
1660
|
},
|
|
1649
1661
|
children: [/* @__PURE__ */ s("canvas", {
|
|
@@ -1651,69 +1663,69 @@ function Ze({ trend: e = [], "data-testid": t }) {
|
|
|
1651
1663
|
role: "img",
|
|
1652
1664
|
"aria-label": "Quotation submission trend — weekly count over 12 weeks",
|
|
1653
1665
|
style: {
|
|
1654
|
-
width:
|
|
1666
|
+
width: Qe,
|
|
1655
1667
|
height: G,
|
|
1656
1668
|
display: "block"
|
|
1657
1669
|
}
|
|
1658
|
-
}), /* @__PURE__ */ s(
|
|
1670
|
+
}), /* @__PURE__ */ s(S, {
|
|
1659
1671
|
...d,
|
|
1660
|
-
parentW:
|
|
1672
|
+
parentW: Qe,
|
|
1661
1673
|
parentH: G
|
|
1662
1674
|
})]
|
|
1663
1675
|
});
|
|
1664
1676
|
}
|
|
1665
1677
|
//#endregion
|
|
1666
1678
|
//#region src/components/severityBands/SeverityBands.tsx
|
|
1667
|
-
var K = 680,
|
|
1679
|
+
var K = 680, et = 240, tt = {
|
|
1668
1680
|
Critical: u.red,
|
|
1669
1681
|
High: u.orange,
|
|
1670
1682
|
Medium: u.amber,
|
|
1671
1683
|
Low: u.green
|
|
1672
1684
|
};
|
|
1673
|
-
function
|
|
1674
|
-
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: d, hitZonesRef: p } =
|
|
1685
|
+
function nt({ severities: e = [], "data-testid": t }) {
|
|
1686
|
+
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: d, hitZonesRef: p } = C(r, {
|
|
1675
1687
|
width: K,
|
|
1676
|
-
height:
|
|
1688
|
+
height: et
|
|
1677
1689
|
});
|
|
1678
1690
|
return n(() => {
|
|
1679
1691
|
let t = r.current;
|
|
1680
1692
|
if (!t) return;
|
|
1681
|
-
let n =
|
|
1693
|
+
let n = _(t, K, et);
|
|
1682
1694
|
o.current = 0;
|
|
1683
|
-
let a = e.reduce((e, t) => e + t.count, 0), s = K - 28 - 28, c =
|
|
1695
|
+
let a = e.reduce((e, t) => e + t.count, 0), s = K - 28 - 28, c = et - 50 - 52, d = e.map((e) => e.count / a * s), h, g = () => {
|
|
1684
1696
|
o.current++;
|
|
1685
1697
|
let t = o.current;
|
|
1686
|
-
n.clearRect(0, 0, K,
|
|
1687
|
-
let r =
|
|
1688
|
-
|
|
1689
|
-
let
|
|
1698
|
+
n.clearRect(0, 0, K, et);
|
|
1699
|
+
let r = D(Math.min(t / 60, 1));
|
|
1700
|
+
M(i.current, l.current), p.current = [], n.strokeStyle = m(u.bd, .2), n.lineWidth = 1, n.beginPath(), n.rect(28, 50, s, c), n.stroke(), n.strokeStyle = m(u.t4, .15), n.lineWidth = 1, n.setLineDash([4, 4]), n.beginPath(), n.moveTo(K / 2, 50), n.lineTo(K / 2, 50 + c), n.stroke(), n.setLineDash([]);
|
|
1701
|
+
let _ = 28;
|
|
1690
1702
|
e.forEach((e, t) => {
|
|
1691
|
-
let o =
|
|
1703
|
+
let o = tt[e.severity] ?? u.blue, s = d[t];
|
|
1692
1704
|
s * r;
|
|
1693
|
-
let l = i.current.get(e.severity) ?? 0,
|
|
1694
|
-
|
|
1695
|
-
let
|
|
1696
|
-
if (
|
|
1705
|
+
let l = i.current.get(e.severity) ?? 0, h = _ + s / 2, g = s * .85;
|
|
1706
|
+
h - g / 2;
|
|
1707
|
+
let y = s * r, b = g * r, x = h - b / 2;
|
|
1708
|
+
if (y > 0 && (l > 0 && v(n, _ + y / 2, 50 + c / 2, y * .4, o, .15 * l), n.beginPath(), n.moveTo(x, 50), n.lineTo(x + b, 50), n.lineTo(_ + y, 50 + c), n.lineTo(_, 50 + c), n.closePath(), n.fillStyle = m(o, .45 + l * .25), n.fill(), n.strokeStyle = m(o, (.5 + l * .3) * r), n.lineWidth = l > 0 ? 2 : 1, n.beginPath(), n.moveTo(x, 50), n.lineTo(x + b, 50), n.stroke(), n.strokeStyle = m(o, (.3 + l * .3) * r), n.lineWidth = l > 0 ? 2 : 1, n.beginPath(), n.moveTo(_, 50 + c), n.lineTo(_ + y, 50 + c), n.stroke()), T(p.current, e.severity, _, 50, s, c, {
|
|
1697
1709
|
label: e.severity,
|
|
1698
1710
|
value: `${e.count} Early Warnings`,
|
|
1699
1711
|
sublabel: `${Math.round(e.count / a * 100)}% of all EWs`,
|
|
1700
1712
|
color: o
|
|
1701
1713
|
}), r > .5) {
|
|
1702
|
-
let t = Math.min(1, (r - .5) / .5), i =
|
|
1703
|
-
n.globalAlpha = t, n.font = "bold
|
|
1714
|
+
let t = Math.min(1, (r - .5) / .5), i = _ + s / 2;
|
|
1715
|
+
n.globalAlpha = t, n.font = "bold " + f.font, n.fillStyle = l > 0 ? o : m(o, .9), n.textAlign = "center", n.fillText(e.severity, i, 38), n.font = "bold " + f.font, n.fillStyle = l > 0 ? u.t1 : m(u.t1, .85), n.fillText(String(e.count), i, 50 + c / 2 + 6), n.font = f.font, n.fillStyle = l > 0 ? o : f.color, n.fillText(`${Math.round(e.count / a * 100)}%`, i, 50 + c + 18), n.globalAlpha = 1;
|
|
1704
1716
|
}
|
|
1705
|
-
|
|
1717
|
+
_ += s;
|
|
1706
1718
|
});
|
|
1707
|
-
let
|
|
1708
|
-
|
|
1719
|
+
let y = n.createLinearGradient(28, 0, 28 + s, 0);
|
|
1720
|
+
y.addColorStop(0, m(u.red, .03)), y.addColorStop(.33, m(u.orange, .03)), y.addColorStop(.66, m(u.amber, .03)), y.addColorStop(1, m(u.green, .03)), n.fillStyle = y, n.fillRect(28, 50, s * r, c), h = requestAnimationFrame(g);
|
|
1709
1721
|
};
|
|
1710
|
-
return
|
|
1722
|
+
return g(), () => cancelAnimationFrame(h);
|
|
1711
1723
|
}, [e]), /* @__PURE__ */ c("div", {
|
|
1712
1724
|
"data-testid": t,
|
|
1713
1725
|
style: {
|
|
1714
1726
|
position: "relative",
|
|
1715
1727
|
width: K,
|
|
1716
|
-
height:
|
|
1728
|
+
height: et
|
|
1717
1729
|
},
|
|
1718
1730
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1719
1731
|
ref: r,
|
|
@@ -1721,67 +1733,67 @@ function et({ severities: e, "data-testid": t }) {
|
|
|
1721
1733
|
"aria-label": "Early Warning severity distribution — prism spectrum bands",
|
|
1722
1734
|
style: {
|
|
1723
1735
|
width: K,
|
|
1724
|
-
height:
|
|
1736
|
+
height: et,
|
|
1725
1737
|
display: "block"
|
|
1726
1738
|
}
|
|
1727
|
-
}), /* @__PURE__ */ s(
|
|
1739
|
+
}), /* @__PURE__ */ s(S, {
|
|
1728
1740
|
...d,
|
|
1729
1741
|
parentW: K,
|
|
1730
|
-
parentH:
|
|
1742
|
+
parentH: et
|
|
1731
1743
|
})]
|
|
1732
1744
|
});
|
|
1733
1745
|
}
|
|
1734
1746
|
//#endregion
|
|
1735
1747
|
//#region src/components/statusArc/StatusArc.tsx
|
|
1736
|
-
var q = 460, J = 300,
|
|
1748
|
+
var q = 460, J = 300, rt = {
|
|
1737
1749
|
Open: u.red,
|
|
1738
1750
|
Submitted: u.amber,
|
|
1739
1751
|
Closed: u.green
|
|
1740
1752
|
};
|
|
1741
|
-
function
|
|
1742
|
-
let i = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), { hoveredRef: d, tooltip: p, hitZonesRef:
|
|
1753
|
+
function it({ segments: e = [], title: t, "data-testid": r }) {
|
|
1754
|
+
let i = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), { hoveredRef: d, tooltip: p, hitZonesRef: h } = C(i, {
|
|
1743
1755
|
width: q,
|
|
1744
1756
|
height: J
|
|
1745
1757
|
});
|
|
1746
1758
|
return n(() => {
|
|
1747
1759
|
let t = i.current;
|
|
1748
1760
|
if (!t) return;
|
|
1749
|
-
let n =
|
|
1761
|
+
let n = _(t, q, J);
|
|
1750
1762
|
o.current = 0;
|
|
1751
|
-
let r = q * .5, a = J * .54, s = q * .22, c = e.reduce((e, t) => e + t.count, 0), p = Math.max(...e.map((e) => e.count), 1),
|
|
1763
|
+
let r = q * .5, a = J * .54, s = q * .22, c = e.reduce((e, t) => e + t.count, 0), p = Math.max(...e.map((e) => e.count), 1), g, x = () => {
|
|
1752
1764
|
o.current++;
|
|
1753
1765
|
let t = o.current;
|
|
1754
|
-
n.clearRect(0, 0, q, J),
|
|
1766
|
+
n.clearRect(0, 0, q, J), h.current = [], l.current.forEach((e, t) => {
|
|
1755
1767
|
let n = t === d.current ? 1 : 0, r = e + (n - e) * .12;
|
|
1756
1768
|
Math.abs(r - n) < .005 ? n === 0 ? l.current.delete(t) : l.current.set(t, 1) : l.current.set(t, r);
|
|
1757
|
-
}), d.current && !l.current.has(d.current) && l.current.set(d.current, 0),
|
|
1758
|
-
let o = i / 3 * Math.PI * 2 - Math.PI / 2, c = r + Math.cos(o) * s, l = a + Math.sin(o) * s, d =
|
|
1759
|
-
n.beginPath(), n.moveTo(r, a), n.lineTo(c, l), n.strokeStyle =
|
|
1760
|
-
let
|
|
1761
|
-
|
|
1762
|
-
let
|
|
1763
|
-
n.font = "bold
|
|
1769
|
+
}), d.current && !l.current.has(d.current) && l.current.set(d.current, 0), y(n, q, J, t, 40, m(u.blue, .04)), e.forEach((e, i) => {
|
|
1770
|
+
let o = i / 3 * Math.PI * 2 - Math.PI / 2, c = r + Math.cos(o) * s, l = a + Math.sin(o) * s, d = rt[e.status] ?? u.blue, h = 2 + e.count / p * 8;
|
|
1771
|
+
n.beginPath(), n.moveTo(r, a), n.lineTo(c, l), n.strokeStyle = m(d, .08), n.lineWidth = h * 2, n.stroke(), n.beginPath(), n.moveTo(r, a), n.lineTo(c, l), n.strokeStyle = m(d, .25), n.lineWidth = 1, n.stroke();
|
|
1772
|
+
let g = (t * .005 + i * .33) % 1, _ = r + (c - r) * g, y = a + (l - a) * g;
|
|
1773
|
+
v(n, _, y, 6, d, .4), n.beginPath(), n.arc(_, y, 2, 0, Math.PI * 2), n.fillStyle = m(d, .8), n.fill();
|
|
1774
|
+
let b = (r + c) / 2, x = (a + l) / 2;
|
|
1775
|
+
n.font = "bold " + f.font, n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = m(d, .85), n.fillText(String(e.count), b, x);
|
|
1764
1776
|
}), e.forEach((e, t) => {
|
|
1765
|
-
let i = t / 3 * Math.PI * 2 - Math.PI / 2, o = r + Math.cos(i) * s, d = a + Math.sin(i) * s,
|
|
1766
|
-
|
|
1767
|
-
let
|
|
1768
|
-
|
|
1777
|
+
let i = t / 3 * Math.PI * 2 - Math.PI / 2, o = r + Math.cos(i) * s, d = a + Math.sin(i) * s, g = rt[e.status] ?? u.blue, _ = 10 + e.count / p * 18, y = l.current.get(e.status) ?? 0;
|
|
1778
|
+
v(n, o, d, _ * 2.5, g, .2 + y * .15);
|
|
1779
|
+
let b = n.createRadialGradient(o, d - _ * .2, 0, o, d, _);
|
|
1780
|
+
b.addColorStop(0, m(g, .8 + y * .2)), b.addColorStop(1, m(g, .4 + y * .1)), n.beginPath(), n.arc(o, d, _, 0, Math.PI * 2), n.fillStyle = b, n.fill(), n.font = "bold " + f.font, n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = m(u.t1, .9), n.fillText(e.status, o, d), w(h.current, e.status, o, d, _ + 6, {
|
|
1769
1781
|
label: e.status,
|
|
1770
1782
|
value: `${e.count} Early Warnings`,
|
|
1771
1783
|
sublabel: `${Math.round(e.count / c * 100)}%`,
|
|
1772
|
-
color:
|
|
1784
|
+
color: g
|
|
1773
1785
|
});
|
|
1774
1786
|
});
|
|
1775
1787
|
let i = l.current.get("center") ?? 0;
|
|
1776
|
-
|
|
1777
|
-
let
|
|
1778
|
-
|
|
1788
|
+
v(n, r, a, 36, u.t3, .2 + i * .15);
|
|
1789
|
+
let _ = n.createRadialGradient(r, a - 4, 0, r, a, 22);
|
|
1790
|
+
_.addColorStop(0, m(u.t2, .9)), _.addColorStop(1, m(u.t3, .5)), n.beginPath(), n.arc(r, a, 22, 0, Math.PI * 2), n.fillStyle = _, n.fill(), n.font = f.font, n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = m(u.t1, .9), n.fillText("EW Status", r, a - 4), n.font = "bold " + f.font, n.fillStyle = u.t1, n.fillText(String(c), r, a + 8), w(h.current, "center", r, a, 28, {
|
|
1779
1791
|
label: "Total EW Status",
|
|
1780
1792
|
value: `${c} Early Warnings`,
|
|
1781
1793
|
color: u.t3
|
|
1782
|
-
}),
|
|
1794
|
+
}), b(n, q, J, t, .015), g = requestAnimationFrame(x);
|
|
1783
1795
|
};
|
|
1784
|
-
return
|
|
1796
|
+
return x(), () => cancelAnimationFrame(g);
|
|
1785
1797
|
}, [e, t]), /* @__PURE__ */ c("div", {
|
|
1786
1798
|
"data-testid": r,
|
|
1787
1799
|
style: {
|
|
@@ -1799,7 +1811,7 @@ function nt({ segments: e, title: t, "data-testid": r }) {
|
|
|
1799
1811
|
display: "block",
|
|
1800
1812
|
borderRadius: 8
|
|
1801
1813
|
}
|
|
1802
|
-
}), /* @__PURE__ */ s(
|
|
1814
|
+
}), /* @__PURE__ */ s(S, {
|
|
1803
1815
|
...p,
|
|
1804
1816
|
parentW: q,
|
|
1805
1817
|
parentH: J
|
|
@@ -1808,27 +1820,27 @@ function nt({ segments: e, title: t, "data-testid": r }) {
|
|
|
1808
1820
|
}
|
|
1809
1821
|
//#endregion
|
|
1810
1822
|
//#region src/components/trendChart/TrendChart.tsx
|
|
1811
|
-
var
|
|
1812
|
-
function
|
|
1813
|
-
let o = a(null), d = a(/* @__PURE__ */ new Map()),
|
|
1823
|
+
var at = 280, Y = 96;
|
|
1824
|
+
function ot({ points: e = [], className: t, colors: r }) {
|
|
1825
|
+
let o = a(null), d = a(/* @__PURE__ */ new Map()), f = a(0), p = i(() => e.map(([e, t]) => {
|
|
1814
1826
|
let n = String(t).match(/-?\d+(\.\d+)?/);
|
|
1815
1827
|
return {
|
|
1816
1828
|
label: e,
|
|
1817
1829
|
value: n ? Number(n[0]) : 0
|
|
1818
1830
|
};
|
|
1819
|
-
}), [e]), { mouseRef:
|
|
1820
|
-
width:
|
|
1821
|
-
height:
|
|
1831
|
+
}), [e]), { mouseRef: h, hoveredRef: g, tooltip: y, hitZonesRef: b } = C(o, {
|
|
1832
|
+
width: at,
|
|
1833
|
+
height: Y
|
|
1822
1834
|
});
|
|
1823
1835
|
return n(() => {
|
|
1824
1836
|
let e = o.current;
|
|
1825
1837
|
if (!e) return;
|
|
1826
|
-
let t =
|
|
1827
|
-
|
|
1838
|
+
let t = _(e, at, Y);
|
|
1839
|
+
f.current = 0;
|
|
1828
1840
|
let n = r?.line ?? u.blue, i = r?.point ?? u.blue, a = r?.axisLine ?? u.bd, s, c = () => {
|
|
1829
|
-
|
|
1830
|
-
let e =
|
|
1831
|
-
if (t.clearRect(0, 0,
|
|
1841
|
+
f.current++;
|
|
1842
|
+
let e = f.current;
|
|
1843
|
+
if (t.clearRect(0, 0, at, Y), p.length < 2) {
|
|
1832
1844
|
s = requestAnimationFrame(c);
|
|
1833
1845
|
return;
|
|
1834
1846
|
}
|
|
@@ -1837,185 +1849,185 @@ function rt({ points: e = [], className: t, colors: r }) {
|
|
|
1837
1849
|
right: 12,
|
|
1838
1850
|
top: 16,
|
|
1839
1851
|
bottom: 20
|
|
1840
|
-
}, o =
|
|
1841
|
-
if (
|
|
1842
|
-
t.fillText(e.label.replace("Day ", "D"), C(n),
|
|
1843
|
-
}),
|
|
1844
|
-
let e = parseInt(
|
|
1845
|
-
isNaN(e) ||
|
|
1852
|
+
}, o = at - r.left - r.right, l = Y - r.top - r.bottom, _ = p.map((e) => e.value), y = Math.min(..._), S = Math.max(..._) - y || 1, C = (e) => r.left + e / (p.length - 1) * o, T = (e) => r.top + (1 - (e - y) / S) * l, E = 1 - (1 - Math.min(e / 48, 1)) ** 3, D = Math.max(2, Math.floor(E * p.length));
|
|
1853
|
+
if (M(d.current, g.current), b.current = [], t.strokeStyle = m(a, .3), t.lineWidth = .5, t.setLineDash([]), t.beginPath(), t.moveTo(r.left, Y - r.bottom), t.lineTo(at - r.right, Y - r.bottom), t.stroke(), t.font = "9px 'JetBrains Mono', monospace", t.fillStyle = m(u.t4, .9), t.textAlign = "center", p.forEach((e, n) => {
|
|
1854
|
+
t.fillText(e.label.replace("Day ", "D"), C(n), Y - 4);
|
|
1855
|
+
}), h.current.over && g.current) {
|
|
1856
|
+
let e = parseInt(g.current.split("-")[1]);
|
|
1857
|
+
isNaN(e) || x(t, C(e), r.top, r.top + l);
|
|
1846
1858
|
}
|
|
1847
1859
|
if (D > 1) {
|
|
1848
1860
|
let e = t.createLinearGradient(0, r.top, 0, r.top + l);
|
|
1849
|
-
e.addColorStop(0,
|
|
1850
|
-
for (let e = 0; e < D; e++) t.lineTo(C(e), T(
|
|
1851
|
-
t.lineTo(C(D - 1), r.top + l), t.closePath(), t.fill(), t.strokeStyle =
|
|
1861
|
+
e.addColorStop(0, m(n, .15)), e.addColorStop(1, m(n, 0)), t.fillStyle = e, t.beginPath(), t.moveTo(C(0), r.top + l);
|
|
1862
|
+
for (let e = 0; e < D; e++) t.lineTo(C(e), T(p[e].value));
|
|
1863
|
+
t.lineTo(C(D - 1), r.top + l), t.closePath(), t.fill(), t.strokeStyle = m(n, .8), t.lineWidth = 1.5, t.setLineDash([]), t.beginPath();
|
|
1852
1864
|
for (let e = 0; e < D; e++) {
|
|
1853
|
-
let n = C(e), r = T(
|
|
1865
|
+
let n = C(e), r = T(p[e].value);
|
|
1854
1866
|
e === 0 ? t.moveTo(n, r) : t.lineTo(n, r);
|
|
1855
1867
|
}
|
|
1856
1868
|
t.stroke();
|
|
1857
1869
|
}
|
|
1858
1870
|
for (let e = 0; e < D; e++) {
|
|
1859
|
-
let n = C(e), r = T(
|
|
1860
|
-
|
|
1861
|
-
label:
|
|
1862
|
-
value: String(
|
|
1871
|
+
let n = C(e), r = T(p[e].value), a = `tp-${e}`, o = d.current.get(a) ?? 0, s = e === p.length - 1;
|
|
1872
|
+
w(b.current, a, n, r, 10, {
|
|
1873
|
+
label: p[e].label,
|
|
1874
|
+
value: String(p[e].value),
|
|
1863
1875
|
color: s ? u.red : i
|
|
1864
|
-
}), o > 0 && !s && (
|
|
1876
|
+
}), o > 0 && !s && (v(t, n, r, 12 * o, i, .2 * o), t.fillStyle = m(i, .8), t.beginPath(), t.arc(n, r, 3 + o * 2, 0, Math.PI * 2), t.fill());
|
|
1865
1877
|
}
|
|
1866
|
-
if (D >=
|
|
1867
|
-
let n =
|
|
1868
|
-
t.shadowColor =
|
|
1878
|
+
if (D >= p.length) {
|
|
1879
|
+
let n = p.length - 1, r = C(n), i = T(p[n].value), a = d.current.get(`tp-${n}`) ?? 0, o = A(e, .05, 5e-4), s = 1 + a * .5;
|
|
1880
|
+
t.shadowColor = m(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;
|
|
1869
1881
|
}
|
|
1870
1882
|
s = requestAnimationFrame(c);
|
|
1871
1883
|
};
|
|
1872
1884
|
return c(), () => cancelAnimationFrame(s);
|
|
1873
|
-
}, [
|
|
1885
|
+
}, [p, r]), /* @__PURE__ */ s(l, {
|
|
1874
1886
|
className: ["canvas-trend-frame", t].filter(Boolean).join(" "),
|
|
1875
1887
|
children: /* @__PURE__ */ c("div", {
|
|
1876
1888
|
style: {
|
|
1877
1889
|
position: "relative",
|
|
1878
|
-
width:
|
|
1879
|
-
height:
|
|
1890
|
+
width: at,
|
|
1891
|
+
height: Y
|
|
1880
1892
|
},
|
|
1881
1893
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1882
1894
|
ref: o,
|
|
1883
1895
|
role: "img",
|
|
1884
1896
|
"aria-label": "trend chart",
|
|
1885
1897
|
style: {
|
|
1886
|
-
width:
|
|
1887
|
-
height:
|
|
1898
|
+
width: at,
|
|
1899
|
+
height: Y,
|
|
1888
1900
|
display: "block",
|
|
1889
1901
|
borderRadius: 8
|
|
1890
1902
|
}
|
|
1891
|
-
}), /* @__PURE__ */ s(
|
|
1892
|
-
...
|
|
1893
|
-
parentW:
|
|
1894
|
-
parentH:
|
|
1903
|
+
}), /* @__PURE__ */ s(S, {
|
|
1904
|
+
...y,
|
|
1905
|
+
parentW: at,
|
|
1906
|
+
parentH: Y
|
|
1895
1907
|
})]
|
|
1896
1908
|
})
|
|
1897
1909
|
});
|
|
1898
1910
|
}
|
|
1899
1911
|
//#endregion
|
|
1900
1912
|
//#region src/components/variationSplit/VariationSplit.tsx
|
|
1901
|
-
var
|
|
1902
|
-
function
|
|
1903
|
-
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip:
|
|
1904
|
-
width:
|
|
1905
|
-
height:
|
|
1913
|
+
var st = 680, ct = 320;
|
|
1914
|
+
function lt({ contractors: e = [], "data-testid": t }) {
|
|
1915
|
+
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: f, hitZonesRef: h } = C(r, {
|
|
1916
|
+
width: st,
|
|
1917
|
+
height: ct
|
|
1906
1918
|
});
|
|
1907
1919
|
return n(() => {
|
|
1908
1920
|
let t = r.current;
|
|
1909
1921
|
if (!t) return;
|
|
1910
|
-
let n =
|
|
1922
|
+
let n = _(t, st, ct);
|
|
1911
1923
|
o.current = 0;
|
|
1912
|
-
let a =
|
|
1924
|
+
let a = st - 60 - 28, s = Math.max(...e.map((e) => (e.implemented ?? 0) + (e.unimplemented ?? 0))), c = e.length * 40 - 14, f = 16 + (ct - 16 - 32 - c) / 2, g, y = () => {
|
|
1913
1925
|
o.current++;
|
|
1914
1926
|
let t = o.current;
|
|
1915
|
-
n.clearRect(0, 0,
|
|
1916
|
-
let r =
|
|
1917
|
-
|
|
1918
|
-
let c = d[o % d.length], l =
|
|
1919
|
-
|
|
1927
|
+
n.clearRect(0, 0, st, ct);
|
|
1928
|
+
let r = D(Math.min(t / 60, 1));
|
|
1929
|
+
M(i.current, l.current), h.current = [], e.forEach((t, o) => {
|
|
1930
|
+
let c = d[o % d.length], l = j(r, o, e.length, D), p = f + o * 40, g = (t.implemented ?? 0) + (t.unimplemented ?? 0), _ = (t.implemented ?? 0) / s * a * l, y = (t.unimplemented ?? 0) / s * a * l, b = `${t.id}-impl`, x = `${t.id}-un`, S = i.current.get(b) ?? 0, C = i.current.get(x) ?? 0;
|
|
1931
|
+
T(h.current, b, 60, p, _ || 1, 26, {
|
|
1920
1932
|
label: `${t.name} — Implemented`,
|
|
1921
1933
|
value: `${t.implemented ?? 0} variations`,
|
|
1922
|
-
sublabel: `${Math.round((t.implemented ?? 0) / (
|
|
1934
|
+
sublabel: `${Math.round((t.implemented ?? 0) / (g || 1) * 100)}% complete`,
|
|
1923
1935
|
color: u.green
|
|
1924
|
-
}),
|
|
1936
|
+
}), T(h.current, x, 60 + _, p, y || 1, 26, {
|
|
1925
1937
|
label: `${t.name} — Unimplemented`,
|
|
1926
1938
|
value: `${t.unimplemented ?? 0} variations`,
|
|
1927
|
-
sublabel: `${Math.round((t.unimplemented ?? 0) / (
|
|
1939
|
+
sublabel: `${Math.round((t.unimplemented ?? 0) / (g || 1) * 100)}% pending`,
|
|
1928
1940
|
color: u.amber
|
|
1929
|
-
}), n.font = "
|
|
1941
|
+
}), n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = m(c, .85), n.textAlign = "right", n.fillText(t.abbreviation ?? t.name.slice(0, 6), 52, p + 26 / 2 + 4), n.fillStyle = m(u.bd, .15), n.beginPath(), n.roundRect(60, p, g / s * a, 26, 4), n.fill(), _ > 0 && (S > 0 && v(n, 60 + _ / 2, p + 26 / 2, _ * .3, u.green, .12 * S), n.fillStyle = m(u.green, .6 + S * .2), n.beginPath(), n.roundRect(60, p, _, 26, [
|
|
1930
1942
|
4,
|
|
1931
1943
|
0,
|
|
1932
1944
|
0,
|
|
1933
1945
|
4
|
|
1934
|
-
]), n.fill(),
|
|
1946
|
+
]), n.fill(), _ > 28 && l > .5 && (n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = S > 0 ? u.green : m(u.t1, .8), n.textAlign = "center", n.fillText(String(t.implemented ?? 0), 60 + _ / 2, p + 26 / 2 + 4))), y > 0 && (C > 0 && v(n, 60 + _ + y / 2, p + 26 / 2, y * .3, u.amber, .12 * C), n.fillStyle = m(u.amber, .18 + C * .18), n.strokeStyle = m(u.amber, .3 + C * .3), n.lineWidth = 1, n.beginPath(), n.roundRect(60 + _, p, y, 26, [
|
|
1935
1947
|
0,
|
|
1936
1948
|
4,
|
|
1937
1949
|
4,
|
|
1938
1950
|
0
|
|
1939
|
-
]), n.fill(), n.stroke(), y > 28 && l > .5 && (n.font =
|
|
1951
|
+
]), n.fill(), n.stroke(), y > 28 && l > .5 && (n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = C > 0 ? u.amber : m(u.t3, .8), n.textAlign = "center", n.fillText(String(t.unimplemented ?? 0), 60 + _ + y / 2, p + 26 / 2 + 4))), _ > 0 && y > 0 && (n.strokeStyle = m(u.bg, .7), n.lineWidth = 2, n.beginPath(), n.moveTo(60 + _, p), n.lineTo(60 + _, p + 26), n.stroke());
|
|
1940
1952
|
});
|
|
1941
|
-
let
|
|
1942
|
-
n.font = "
|
|
1953
|
+
let _ = f + c + 24, b = 60 + a / 2;
|
|
1954
|
+
n.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", n.textAlign = "right", n.fillStyle = u.green, n.fillText("■ Implemented", b - 10, _), n.textAlign = "left", n.fillStyle = p.color, n.fillText("■ Unimplemented", b + 10, _), g = requestAnimationFrame(y);
|
|
1943
1955
|
};
|
|
1944
|
-
return
|
|
1956
|
+
return y(), () => cancelAnimationFrame(g);
|
|
1945
1957
|
}, [e]), /* @__PURE__ */ c("div", {
|
|
1946
1958
|
"data-testid": t,
|
|
1947
1959
|
style: {
|
|
1948
1960
|
position: "relative",
|
|
1949
|
-
width:
|
|
1950
|
-
height:
|
|
1961
|
+
width: st,
|
|
1962
|
+
height: ct
|
|
1951
1963
|
},
|
|
1952
1964
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1953
1965
|
ref: r,
|
|
1954
1966
|
role: "img",
|
|
1955
1967
|
"aria-label": "Implemented vs unimplemented variations per contractor — split bar",
|
|
1956
1968
|
style: {
|
|
1957
|
-
width:
|
|
1958
|
-
height:
|
|
1969
|
+
width: st,
|
|
1970
|
+
height: ct,
|
|
1959
1971
|
display: "block"
|
|
1960
1972
|
}
|
|
1961
|
-
}), /* @__PURE__ */ s(
|
|
1962
|
-
...
|
|
1963
|
-
parentW:
|
|
1964
|
-
parentH:
|
|
1973
|
+
}), /* @__PURE__ */ s(S, {
|
|
1974
|
+
...f,
|
|
1975
|
+
parentW: st,
|
|
1976
|
+
parentH: ct
|
|
1965
1977
|
})]
|
|
1966
1978
|
});
|
|
1967
1979
|
}
|
|
1968
1980
|
//#endregion
|
|
1969
1981
|
//#region src/components/weeklyFlow/WeeklyFlow.tsx
|
|
1970
|
-
var
|
|
1971
|
-
function
|
|
1972
|
-
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip:
|
|
1973
|
-
width:
|
|
1974
|
-
height:
|
|
1982
|
+
var ut = 800, dt = 360;
|
|
1983
|
+
function ft({ contractors: e = [], "data-testid": t }) {
|
|
1984
|
+
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: f, hitZonesRef: p } = C(r, {
|
|
1985
|
+
width: ut,
|
|
1986
|
+
height: dt
|
|
1975
1987
|
});
|
|
1976
1988
|
return n(() => {
|
|
1977
1989
|
let t = r.current;
|
|
1978
1990
|
if (!t) return;
|
|
1979
|
-
let n =
|
|
1991
|
+
let n = _(t, ut, dt);
|
|
1980
1992
|
o.current = 0;
|
|
1981
|
-
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),
|
|
1982
|
-
let n = Math.max(24, (e.total ?? 0) / (c || 1) *
|
|
1993
|
+
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), f = dt - 20 - 26, h = f - 6 * (e.length - 1), g = 20, y = e.map((e, t) => {
|
|
1994
|
+
let n = Math.max(24, (e.total ?? 0) / (c || 1) * h), r = {
|
|
1983
1995
|
x: 100 - 110 / 2,
|
|
1984
|
-
y:
|
|
1996
|
+
y: g,
|
|
1985
1997
|
h: n,
|
|
1986
|
-
cy:
|
|
1998
|
+
cy: g + n / 2,
|
|
1987
1999
|
c: e,
|
|
1988
2000
|
color: d[t % d.length]
|
|
1989
2001
|
};
|
|
1990
|
-
return
|
|
1991
|
-
}), b =
|
|
2002
|
+
return g += n + 6, r;
|
|
2003
|
+
}), b = h - 14, x = Math.max(28, a / c * b), S = Math.max(18, s / c * b), C = 20 + (f - (x + S + 14)) / 2, w = {
|
|
1992
2004
|
x: 420 - 110 / 2,
|
|
1993
|
-
y:
|
|
2005
|
+
y: C,
|
|
1994
2006
|
h: x,
|
|
1995
|
-
cy:
|
|
2007
|
+
cy: C + x / 2
|
|
1996
2008
|
}, D = {
|
|
1997
2009
|
x: 420 - 110 / 2,
|
|
1998
|
-
y:
|
|
2010
|
+
y: C + x + 14,
|
|
1999
2011
|
h: S,
|
|
2000
|
-
cy:
|
|
2012
|
+
cy: C + x + 14 + S / 2
|
|
2001
2013
|
}, O = {
|
|
2002
2014
|
x: 720 - 110 / 2,
|
|
2003
2015
|
y: 20,
|
|
2004
|
-
h:
|
|
2005
|
-
cy: 20 +
|
|
2006
|
-
},
|
|
2016
|
+
h: f,
|
|
2017
|
+
cy: 20 + f / 2
|
|
2018
|
+
}, k, A = () => {
|
|
2007
2019
|
o.current++;
|
|
2008
2020
|
let t = o.current;
|
|
2009
|
-
n.clearRect(0, 0,
|
|
2010
|
-
let r =
|
|
2011
|
-
if (
|
|
2012
|
-
let c = y[o], l =
|
|
2021
|
+
n.clearRect(0, 0, ut, dt);
|
|
2022
|
+
let r = E(Math.min(t / 80, 1));
|
|
2023
|
+
if (M(i.current, l.current), p.current = [], e.forEach((t, o) => {
|
|
2024
|
+
let c = y[o], l = j(r, o, e.length, E), u = i.current.get(t.id) ?? 0;
|
|
2013
2025
|
if (l < .01) return;
|
|
2014
|
-
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 * x), v = Math.max(2, (t.variation ?? 0) / s * S), b =
|
|
2015
|
-
|
|
2026
|
+
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 * x), v = Math.max(2, (t.variation ?? 0) / s * S), b = w.y + e.slice(0, o).reduce((e, t) => e + (t.base ?? 0) / a * x, 0) + _ / 2, C = D.y + e.slice(0, o).reduce((e, t) => e + (t.variation ?? 0) / s * S, 0) + v / 2, T = u * .2 + .18;
|
|
2027
|
+
pt(n, c.x + 110, h, 420 - 110 / 2, b, _ * l, c.color, T), pt(n, c.x + 110, g, 420 - 110 / 2, C, v * l, c.color, T * .75);
|
|
2016
2028
|
}), r > .3) {
|
|
2017
|
-
let e = Math.min(1, (r - .3) / .7), t = O.y + a / c *
|
|
2018
|
-
|
|
2029
|
+
let e = Math.min(1, (r - .3) / .7), t = O.y + a / c * f / 2, i = O.y + f - s / c * f / 2;
|
|
2030
|
+
pt(n, 475, w.cy, 720 - 110 / 2, t, x * e, u.blue, .25 * e), pt(n, 475, D.cy, 720 - 110 / 2, i, S * e, u.amber, .22 * e);
|
|
2019
2031
|
}
|
|
2020
2032
|
if ([
|
|
2021
2033
|
"Contractors",
|
|
@@ -2027,136 +2039,136 @@ function lt({ contractors: e = [], "data-testid": t }) {
|
|
|
2027
2039
|
420,
|
|
2028
2040
|
720
|
|
2029
2041
|
][t];
|
|
2030
|
-
n.font = "
|
|
2042
|
+
n.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = m(u.t3, .5), n.textAlign = "center", n.fillText(e, r, dt - 8);
|
|
2031
2043
|
}), e.forEach((t, a) => {
|
|
2032
|
-
let o = y[a], s =
|
|
2033
|
-
|
|
2044
|
+
let o = y[a], s = j(r, a, e.length, E), c = i.current.get(t.id) ?? 0;
|
|
2045
|
+
T(p.current, t.id, o.x, o.y, 110, o.h, {
|
|
2034
2046
|
label: t.name,
|
|
2035
2047
|
value: `£${t.total ?? 0}M total commitment`,
|
|
2036
2048
|
sublabel: `Base £${t.base ?? 0}M + Variations £${t.variation ?? 0}M`,
|
|
2037
2049
|
color: o.color
|
|
2038
|
-
}), c > 0 &&
|
|
2050
|
+
}), c > 0 && v(n, o.x + 110 / 2, o.cy, 110 * .6, o.color, .12 * c), n.fillStyle = m(o.color, (.3 + c * .15) * s), n.strokeStyle = m(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 = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = c > 0 ? o.color : m(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 = m(u.t3, .8), n.fillText(`£${t.total ?? 0}M`, o.x + 110 / 2, o.cy + 7)), n.globalAlpha = 1, n.textBaseline = "alphabetic");
|
|
2039
2051
|
}), r > .2) {
|
|
2040
2052
|
let e = Math.min(1, (r - .2) / .4);
|
|
2041
|
-
|
|
2053
|
+
v(n, 420, w.cy, 30, u.blue, .1 * e), n.fillStyle = m(u.blue, .3 * e), n.strokeStyle = m(u.blue, .5 * e), n.lineWidth = 1, n.beginPath(), n.roundRect(w.x, w.y, 110, w.h * e, 4), n.fill(), n.stroke(), n.globalAlpha = e, n.textBaseline = "middle", n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = u.blue, n.textAlign = "center", n.fillText("Base Value", 420, w.cy - 6), n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = u.t1, n.fillText(`£${a}M`, 420, w.cy + 8), n.globalAlpha = 1, n.textBaseline = "alphabetic", v(n, 420, D.cy, 24, u.amber, .1 * e), n.fillStyle = m(u.amber, .22 * e), n.strokeStyle = m(u.amber, .4 * e), n.beginPath(), n.roundRect(D.x, D.y, 110, D.h * e, 4), n.fill(), n.stroke(), n.globalAlpha = e, n.textBaseline = "middle", n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = u.amber, n.textAlign = "center", n.fillText("Variations", 420, D.cy - 4), n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = u.t1, n.fillText(`£${s}M`, 420, D.cy + 8), n.globalAlpha = 1, n.textBaseline = "alphabetic";
|
|
2042
2054
|
}
|
|
2043
2055
|
if (r > .5) {
|
|
2044
2056
|
let e = Math.min(1, (r - .5) / .5);
|
|
2045
|
-
|
|
2057
|
+
v(n, 720, O.cy, 44, u.cyan, .2 * e), n.fillStyle = m(u.cyan, .25 * e), n.strokeStyle = m(u.cyan, .6 * e), n.lineWidth = 1.5, n.beginPath(), n.roundRect(O.x, O.y, 110, O.h * e, 6), n.fill(), n.stroke(), n.globalAlpha = e, n.textBaseline = "middle", n.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = u.t2, n.textAlign = "center", n.fillText("Total Commitment", 720, O.cy - 12), n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = u.cyan, n.fillText(`£${c}M`, 720, O.cy + 6), n.globalAlpha = 1, n.textBaseline = "alphabetic";
|
|
2046
2058
|
}
|
|
2047
|
-
|
|
2059
|
+
k = requestAnimationFrame(A);
|
|
2048
2060
|
};
|
|
2049
|
-
return
|
|
2061
|
+
return A(), () => cancelAnimationFrame(k);
|
|
2050
2062
|
}, [e]), /* @__PURE__ */ c("div", {
|
|
2051
2063
|
"data-testid": t,
|
|
2052
2064
|
style: {
|
|
2053
2065
|
position: "relative",
|
|
2054
|
-
width:
|
|
2055
|
-
height:
|
|
2066
|
+
width: ut,
|
|
2067
|
+
height: dt
|
|
2056
2068
|
},
|
|
2057
2069
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2058
2070
|
ref: r,
|
|
2059
2071
|
role: "img",
|
|
2060
2072
|
"aria-label": "Weekly report flow — base value and variations per contractor flowing to total commitment",
|
|
2061
2073
|
style: {
|
|
2062
|
-
width:
|
|
2063
|
-
height:
|
|
2074
|
+
width: ut,
|
|
2075
|
+
height: dt,
|
|
2064
2076
|
display: "block"
|
|
2065
2077
|
}
|
|
2066
|
-
}), /* @__PURE__ */ s(
|
|
2067
|
-
...
|
|
2068
|
-
parentW:
|
|
2069
|
-
parentH:
|
|
2078
|
+
}), /* @__PURE__ */ s(S, {
|
|
2079
|
+
...f,
|
|
2080
|
+
parentW: ut,
|
|
2081
|
+
parentH: dt
|
|
2070
2082
|
})]
|
|
2071
2083
|
});
|
|
2072
2084
|
}
|
|
2073
|
-
function
|
|
2085
|
+
function pt(e, t, n, r, i, a, o, s) {
|
|
2074
2086
|
let c = (t + r) / 2;
|
|
2075
|
-
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 =
|
|
2087
|
+
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 = m(o, s), e.fill();
|
|
2076
2088
|
}
|
|
2077
2089
|
//#endregion
|
|
2078
2090
|
//#region src/components/visualizationRenderer/VisualizationRenderer.tsx
|
|
2079
|
-
function
|
|
2080
|
-
return e.type === "line" ? /* @__PURE__ */ s(
|
|
2091
|
+
function mt({ config: e, className: t }) {
|
|
2092
|
+
return e.type === "line" ? /* @__PURE__ */ s(De, {
|
|
2081
2093
|
rows: e.rows,
|
|
2082
2094
|
className: t
|
|
2083
|
-
}) : e.type === "area" ? /* @__PURE__ */ s(
|
|
2095
|
+
}) : e.type === "area" ? /* @__PURE__ */ s(ne, {
|
|
2084
2096
|
rows: e.rows,
|
|
2085
2097
|
className: t
|
|
2086
|
-
}) : e.type === "bar" ? /* @__PURE__ */ s(
|
|
2098
|
+
}) : e.type === "bar" ? /* @__PURE__ */ s(ie, {
|
|
2087
2099
|
rows: e.rows,
|
|
2088
2100
|
className: t
|
|
2089
|
-
}) : e.type === "pie" ? /* @__PURE__ */ s(
|
|
2101
|
+
}) : e.type === "pie" ? /* @__PURE__ */ s(Le, {
|
|
2090
2102
|
rows: e.rows,
|
|
2091
2103
|
variant: "pie",
|
|
2092
2104
|
className: t
|
|
2093
|
-
}) : e.type === "donut" ? /* @__PURE__ */ s(
|
|
2105
|
+
}) : e.type === "donut" ? /* @__PURE__ */ s(Le, {
|
|
2094
2106
|
rows: e.rows,
|
|
2095
2107
|
variant: "donut",
|
|
2096
2108
|
className: t
|
|
2097
|
-
}) : e.type === "sankey" ? /* @__PURE__ */ s(
|
|
2109
|
+
}) : e.type === "sankey" ? /* @__PURE__ */ s(Je, {
|
|
2098
2110
|
rows: e.rows,
|
|
2099
2111
|
className: t
|
|
2100
|
-
}) : e.type === "flow" ? /* @__PURE__ */ s(
|
|
2112
|
+
}) : e.type === "flow" ? /* @__PURE__ */ s(qe, {
|
|
2101
2113
|
selectedEntity: e.selectedEntity,
|
|
2102
2114
|
className: t
|
|
2103
|
-
}) : e.type === "trend" ? /* @__PURE__ */ s(
|
|
2115
|
+
}) : e.type === "trend" ? /* @__PURE__ */ s(ot, {
|
|
2104
2116
|
points: e.points,
|
|
2105
2117
|
className: t
|
|
2106
|
-
}) : e.type === "mini-bars" ? /* @__PURE__ */ s(
|
|
2118
|
+
}) : e.type === "mini-bars" ? /* @__PURE__ */ s(Ae, {
|
|
2107
2119
|
rows: e.rows,
|
|
2108
2120
|
className: t
|
|
2109
|
-
}) : e.type === "contract-value-orb" ? /* @__PURE__ */ s(
|
|
2121
|
+
}) : e.type === "contract-value-orb" ? /* @__PURE__ */ s(be, { data: e.data }) : e.type === "contract-bars" ? /* @__PURE__ */ s(ge, { contractors: e.contractors }) : e.type === "commitment-race" ? /* @__PURE__ */ s(oe, { contractors: e.contractors }) : e.type === "status-arc" ? /* @__PURE__ */ s(it, {
|
|
2110
2122
|
segments: e.segments,
|
|
2111
2123
|
title: e.title
|
|
2112
|
-
}) : e.type === "ew-category" ? /* @__PURE__ */ s(
|
|
2124
|
+
}) : e.type === "ew-category" ? /* @__PURE__ */ s(Ee, { categories: e.categories }) : e.type === "contractor-rank" ? /* @__PURE__ */ s(Te, { contractors: e.contractors }) : e.type === "severity-bands" ? /* @__PURE__ */ s(nt, { severities: e.severities }) : e.type === "nce-tree" ? /* @__PURE__ */ s(Ne, {
|
|
2113
2125
|
total: e.total,
|
|
2114
2126
|
byContractor: e.byContractor
|
|
2115
|
-
}) : e.type === "compensation-gauge" ? /* @__PURE__ */ s(
|
|
2127
|
+
}) : e.type === "compensation-gauge" ? /* @__PURE__ */ s(le, {
|
|
2116
2128
|
pct: e.pct,
|
|
2117
2129
|
confirmed: e.confirmed,
|
|
2118
2130
|
total: e.total
|
|
2119
|
-
}) : e.type === "variation-split" ? /* @__PURE__ */ s(
|
|
2131
|
+
}) : e.type === "variation-split" ? /* @__PURE__ */ s(lt, { contractors: e.contractors }) : e.type === "quotation-balance" ? /* @__PURE__ */ s(Ze, {
|
|
2120
2132
|
accepted: e.accepted,
|
|
2121
2133
|
submitted: e.submitted
|
|
2122
|
-
}) : e.type === "quotation-trend" ? /* @__PURE__ */ s(
|
|
2134
|
+
}) : e.type === "quotation-trend" ? /* @__PURE__ */ s($e, { trend: e.trend }) : e.type === "weekly-flow" ? /* @__PURE__ */ s(ft, { contractors: e.contractors }) : /* @__PURE__ */ s("div", {
|
|
2123
2135
|
className: "viz-empty",
|
|
2124
2136
|
children: "Visualization unavailable"
|
|
2125
2137
|
});
|
|
2126
2138
|
}
|
|
2127
2139
|
//#endregion
|
|
2128
2140
|
//#region src/utils/mounts.tsx
|
|
2129
|
-
var
|
|
2130
|
-
function
|
|
2141
|
+
var ht = [];
|
|
2142
|
+
function gt(e) {
|
|
2131
2143
|
try {
|
|
2132
2144
|
return JSON.parse(decodeURIComponent(e));
|
|
2133
2145
|
} catch {
|
|
2134
2146
|
return null;
|
|
2135
2147
|
}
|
|
2136
2148
|
}
|
|
2137
|
-
function
|
|
2138
|
-
for (;
|
|
2139
|
-
let e =
|
|
2149
|
+
function _t() {
|
|
2150
|
+
for (; ht.length;) {
|
|
2151
|
+
let e = ht.pop();
|
|
2140
2152
|
e && e.unmount();
|
|
2141
2153
|
}
|
|
2142
2154
|
}
|
|
2143
|
-
function
|
|
2144
|
-
|
|
2155
|
+
function vt() {
|
|
2156
|
+
_t(), document.querySelectorAll("[data-d3-viz]").forEach((t) => {
|
|
2145
2157
|
let n = t.dataset.d3Viz;
|
|
2146
2158
|
if (!n) return;
|
|
2147
|
-
let r =
|
|
2159
|
+
let r = gt(n);
|
|
2148
2160
|
if (!r) return;
|
|
2149
2161
|
let i = e(t);
|
|
2150
|
-
|
|
2162
|
+
ht.push(i), i.render(/* @__PURE__ */ s(mt, { config: r }));
|
|
2151
2163
|
});
|
|
2152
2164
|
}
|
|
2153
|
-
function
|
|
2165
|
+
function yt(e) {
|
|
2154
2166
|
return encodeURIComponent(JSON.stringify(e));
|
|
2155
2167
|
}
|
|
2156
2168
|
//#endregion
|
|
2157
2169
|
//#region src/components/donutChart/DonutChart.tsx
|
|
2158
|
-
function
|
|
2159
|
-
return /* @__PURE__ */ s(
|
|
2170
|
+
function bt({ rows: e = [], className: t, colors: n }) {
|
|
2171
|
+
return /* @__PURE__ */ s(Le, {
|
|
2160
2172
|
rows: e,
|
|
2161
2173
|
variant: "donut",
|
|
2162
2174
|
className: t,
|
|
@@ -2165,18 +2177,30 @@ function _t({ rows: e = [], className: t, colors: n }) {
|
|
|
2165
2177
|
}
|
|
2166
2178
|
//#endregion
|
|
2167
2179
|
//#region src/components/keyHighlights/KeyHighlights.tsx
|
|
2168
|
-
var
|
|
2169
|
-
bg:
|
|
2170
|
-
border:
|
|
2171
|
-
t1:
|
|
2172
|
-
t2:
|
|
2173
|
-
t3:
|
|
2174
|
-
t4:
|
|
2175
|
-
red:
|
|
2176
|
-
amber:
|
|
2177
|
-
green:
|
|
2178
|
-
},
|
|
2179
|
-
|
|
2180
|
+
var X = {
|
|
2181
|
+
bg: u.sf,
|
|
2182
|
+
border: u.bd,
|
|
2183
|
+
t1: u.t1,
|
|
2184
|
+
t2: u.t2,
|
|
2185
|
+
t3: u.t3,
|
|
2186
|
+
t4: u.t4,
|
|
2187
|
+
red: u.red,
|
|
2188
|
+
amber: u.amber,
|
|
2189
|
+
green: u.green
|
|
2190
|
+
}, Z = "'JetBrains Mono', monospace", Q = "'Satoshi Variable', 'DM Sans', sans-serif", xt = {
|
|
2191
|
+
color: "#F7F7F7",
|
|
2192
|
+
fontFamily: Q,
|
|
2193
|
+
fontSize: 24,
|
|
2194
|
+
fontWeight: 500,
|
|
2195
|
+
lineHeight: "32px"
|
|
2196
|
+
}, $ = {
|
|
2197
|
+
color: "#CECFD2",
|
|
2198
|
+
fontFamily: Q,
|
|
2199
|
+
fontSize: 14,
|
|
2200
|
+
fontWeight: 400,
|
|
2201
|
+
lineHeight: "20px"
|
|
2202
|
+
};
|
|
2203
|
+
function St({ chips: e = [] }) {
|
|
2180
2204
|
return /* @__PURE__ */ s("div", {
|
|
2181
2205
|
style: {
|
|
2182
2206
|
display: "flex",
|
|
@@ -2190,31 +2214,27 @@ function vt({ chips: e }) {
|
|
|
2190
2214
|
alignItems: "baseline",
|
|
2191
2215
|
gap: 8,
|
|
2192
2216
|
padding: "8px 12px",
|
|
2193
|
-
background:
|
|
2194
|
-
border: `1px solid ${
|
|
2217
|
+
background: X.bg,
|
|
2218
|
+
border: `1px solid ${X.border}`,
|
|
2195
2219
|
borderRadius: 5
|
|
2196
2220
|
},
|
|
2197
2221
|
children: [/* @__PURE__ */ s("span", {
|
|
2198
2222
|
style: {
|
|
2199
|
-
|
|
2200
|
-
|
|
2201
|
-
color: e.color ?? Z.t1,
|
|
2202
|
-
fontFamily: Q
|
|
2223
|
+
...xt,
|
|
2224
|
+
color: e.color ?? X.t1
|
|
2203
2225
|
},
|
|
2204
2226
|
children: e.value
|
|
2205
2227
|
}), /* @__PURE__ */ s("span", {
|
|
2206
2228
|
style: {
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
fontFamily: $,
|
|
2210
|
-
lineHeight: 1.4
|
|
2229
|
+
...$,
|
|
2230
|
+
flex: 1
|
|
2211
2231
|
},
|
|
2212
2232
|
children: e.label
|
|
2213
2233
|
})]
|
|
2214
2234
|
}, t))
|
|
2215
2235
|
});
|
|
2216
2236
|
}
|
|
2217
|
-
function
|
|
2237
|
+
function Ct({ items: e = [] }) {
|
|
2218
2238
|
return /* @__PURE__ */ s("div", {
|
|
2219
2239
|
style: {
|
|
2220
2240
|
display: "flex",
|
|
@@ -2224,35 +2244,27 @@ function yt({ items: e }) {
|
|
|
2224
2244
|
style: {
|
|
2225
2245
|
flex: 1,
|
|
2226
2246
|
padding: "12px 16px",
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
borderRadius: 7,
|
|
2231
|
-
textAlign: "center"
|
|
2247
|
+
border: `1px solid ${X.border}`,
|
|
2248
|
+
background: X.bg,
|
|
2249
|
+
textAlign: "left"
|
|
2232
2250
|
},
|
|
2233
2251
|
children: [/* @__PURE__ */ s("div", {
|
|
2234
2252
|
style: {
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
color: e.color ?? Z.t1,
|
|
2238
|
-
fontFamily: Q,
|
|
2239
|
-
lineHeight: 1.15
|
|
2253
|
+
...xt,
|
|
2254
|
+
color: e.color ?? X.t1
|
|
2240
2255
|
},
|
|
2241
2256
|
children: e.value
|
|
2242
2257
|
}), /* @__PURE__ */ s("div", {
|
|
2243
2258
|
style: {
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
fontFamily: $,
|
|
2247
|
-
marginTop: 5,
|
|
2248
|
-
lineHeight: 1.45
|
|
2259
|
+
...$,
|
|
2260
|
+
marginTop: 5
|
|
2249
2261
|
},
|
|
2250
2262
|
children: e.label
|
|
2251
2263
|
})]
|
|
2252
2264
|
}, t))
|
|
2253
2265
|
});
|
|
2254
2266
|
}
|
|
2255
|
-
function
|
|
2267
|
+
function wt({ items: e = [] }) {
|
|
2256
2268
|
return /* @__PURE__ */ s("div", {
|
|
2257
2269
|
style: {
|
|
2258
2270
|
display: "flex",
|
|
@@ -2265,9 +2277,9 @@ function bt({ items: e }) {
|
|
|
2265
2277
|
alignItems: "center",
|
|
2266
2278
|
gap: 12,
|
|
2267
2279
|
padding: "9px 14px",
|
|
2268
|
-
background:
|
|
2269
|
-
border: `1px solid ${
|
|
2270
|
-
borderLeft: `3px solid ${e.color}`,
|
|
2280
|
+
background: X.bg,
|
|
2281
|
+
border: `1px solid ${X.border}`,
|
|
2282
|
+
borderLeft: `3px solid ${e.color ?? X.t2}`,
|
|
2271
2283
|
borderRadius: 6
|
|
2272
2284
|
},
|
|
2273
2285
|
children: [
|
|
@@ -2275,21 +2287,19 @@ function bt({ items: e }) {
|
|
|
2275
2287
|
style: {
|
|
2276
2288
|
fontSize: 11,
|
|
2277
2289
|
fontWeight: 600,
|
|
2278
|
-
color: e.color,
|
|
2279
|
-
background: e.color + "22",
|
|
2290
|
+
color: e.color ?? X.t2,
|
|
2291
|
+
background: (e.color ?? X.t2) + "22",
|
|
2280
2292
|
padding: "2px 8px",
|
|
2281
2293
|
borderRadius: 4,
|
|
2282
|
-
fontFamily:
|
|
2294
|
+
fontFamily: Q,
|
|
2283
2295
|
flexShrink: 0
|
|
2284
2296
|
},
|
|
2285
2297
|
children: e.name
|
|
2286
2298
|
}),
|
|
2287
2299
|
/* @__PURE__ */ s("span", {
|
|
2288
2300
|
style: {
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
color: e.color,
|
|
2292
|
-
fontFamily: Q,
|
|
2301
|
+
...xt,
|
|
2302
|
+
color: e.color ?? X.t1,
|
|
2293
2303
|
minWidth: 70,
|
|
2294
2304
|
flexShrink: 0
|
|
2295
2305
|
},
|
|
@@ -2297,11 +2307,8 @@ function bt({ items: e }) {
|
|
|
2297
2307
|
}),
|
|
2298
2308
|
/* @__PURE__ */ s("span", {
|
|
2299
2309
|
style: {
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
fontFamily: $,
|
|
2303
|
-
flex: 1,
|
|
2304
|
-
lineHeight: 1.45
|
|
2310
|
+
...$,
|
|
2311
|
+
flex: 1
|
|
2305
2312
|
},
|
|
2306
2313
|
children: e.kpiLabel
|
|
2307
2314
|
})
|
|
@@ -2309,7 +2316,7 @@ function bt({ items: e }) {
|
|
|
2309
2316
|
}, t))
|
|
2310
2317
|
});
|
|
2311
2318
|
}
|
|
2312
|
-
function
|
|
2319
|
+
function Tt({ items: e = [] }) {
|
|
2313
2320
|
return /* @__PURE__ */ s("div", {
|
|
2314
2321
|
style: {
|
|
2315
2322
|
display: "flex",
|
|
@@ -2319,38 +2326,31 @@ function xt({ items: e }) {
|
|
|
2319
2326
|
style: {
|
|
2320
2327
|
flex: 1,
|
|
2321
2328
|
padding: "14px 16px",
|
|
2322
|
-
background:
|
|
2323
|
-
border: `1px solid ${e.color ? e.color + "30" :
|
|
2324
|
-
borderRadius: 7
|
|
2329
|
+
background: X.bg,
|
|
2330
|
+
border: `1px solid ${e.color ? e.color + "30" : X.border}`
|
|
2325
2331
|
},
|
|
2326
2332
|
children: [/* @__PURE__ */ s("div", {
|
|
2327
2333
|
style: {
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
color: e.color ?? Z.t1,
|
|
2331
|
-
fontFamily: Q,
|
|
2332
|
-
lineHeight: 1.1
|
|
2334
|
+
...xt,
|
|
2335
|
+
color: e.color ?? X.t1
|
|
2333
2336
|
},
|
|
2334
2337
|
children: e.value
|
|
2335
2338
|
}), /* @__PURE__ */ s("div", {
|
|
2336
2339
|
style: {
|
|
2337
|
-
|
|
2338
|
-
|
|
2339
|
-
fontFamily: $,
|
|
2340
|
-
marginTop: 6,
|
|
2341
|
-
lineHeight: 1.5
|
|
2340
|
+
...$,
|
|
2341
|
+
marginTop: 6
|
|
2342
2342
|
},
|
|
2343
2343
|
children: e.label
|
|
2344
2344
|
})]
|
|
2345
2345
|
}, t))
|
|
2346
2346
|
});
|
|
2347
2347
|
}
|
|
2348
|
-
var
|
|
2349
|
-
red:
|
|
2350
|
-
amber:
|
|
2351
|
-
green:
|
|
2348
|
+
var Et = {
|
|
2349
|
+
red: X.red,
|
|
2350
|
+
amber: X.amber,
|
|
2351
|
+
green: X.green
|
|
2352
2352
|
};
|
|
2353
|
-
function
|
|
2353
|
+
function Dt({ items: e = [] }) {
|
|
2354
2354
|
return /* @__PURE__ */ s("div", {
|
|
2355
2355
|
style: {
|
|
2356
2356
|
display: "flex",
|
|
@@ -2358,7 +2358,7 @@ function Ct({ items: e }) {
|
|
|
2358
2358
|
gap: 5
|
|
2359
2359
|
},
|
|
2360
2360
|
children: e.map((e, t) => {
|
|
2361
|
-
let n =
|
|
2361
|
+
let n = Et[e.severity];
|
|
2362
2362
|
return /* @__PURE__ */ c("div", {
|
|
2363
2363
|
style: {
|
|
2364
2364
|
display: "flex",
|
|
@@ -2378,19 +2378,14 @@ function Ct({ items: e }) {
|
|
|
2378
2378
|
flexShrink: 0,
|
|
2379
2379
|
marginTop: 5
|
|
2380
2380
|
} }), /* @__PURE__ */ s("span", {
|
|
2381
|
-
style: {
|
|
2382
|
-
fontSize: 12,
|
|
2383
|
-
color: Z.t2,
|
|
2384
|
-
fontFamily: $,
|
|
2385
|
-
lineHeight: 1.6
|
|
2386
|
-
},
|
|
2381
|
+
style: { ...$ },
|
|
2387
2382
|
children: e.text
|
|
2388
2383
|
})]
|
|
2389
2384
|
}, t);
|
|
2390
2385
|
})
|
|
2391
2386
|
});
|
|
2392
2387
|
}
|
|
2393
|
-
function
|
|
2388
|
+
function Ot({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
2394
2389
|
let a = t - e;
|
|
2395
2390
|
return /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("div", {
|
|
2396
2391
|
style: {
|
|
@@ -2414,8 +2409,8 @@ function wt({ min: e, max: t, unit: n, dots: r, chips: i }) {
|
|
|
2414
2409
|
top: 43,
|
|
2415
2410
|
left: 0,
|
|
2416
2411
|
fontSize: 9,
|
|
2417
|
-
color:
|
|
2418
|
-
fontFamily:
|
|
2412
|
+
color: X.t4,
|
|
2413
|
+
fontFamily: Z
|
|
2419
2414
|
},
|
|
2420
2415
|
children: [e, n]
|
|
2421
2416
|
}),
|
|
@@ -2425,13 +2420,13 @@ function wt({ min: e, max: t, unit: n, dots: r, chips: i }) {
|
|
|
2425
2420
|
top: 43,
|
|
2426
2421
|
right: 0,
|
|
2427
2422
|
fontSize: 9,
|
|
2428
|
-
color:
|
|
2429
|
-
fontFamily:
|
|
2423
|
+
color: X.t4,
|
|
2424
|
+
fontFamily: Z
|
|
2430
2425
|
},
|
|
2431
2426
|
children: [t, n]
|
|
2432
2427
|
}),
|
|
2433
2428
|
r.map((t, r) => {
|
|
2434
|
-
let i = (t.val - e) / a * 100, o = r % 2 == 0;
|
|
2429
|
+
let i = (t.val - e) / a * 100, o = t.color ?? u.blue, l = r % 2 == 0;
|
|
2435
2430
|
return /* @__PURE__ */ c("div", {
|
|
2436
2431
|
style: {
|
|
2437
2432
|
position: "absolute",
|
|
@@ -2440,7 +2435,7 @@ function wt({ min: e, max: t, unit: n, dots: r, chips: i }) {
|
|
|
2440
2435
|
transform: "translateX(-50%)"
|
|
2441
2436
|
},
|
|
2442
2437
|
children: [
|
|
2443
|
-
|
|
2438
|
+
l && /* @__PURE__ */ c("div", {
|
|
2444
2439
|
style: {
|
|
2445
2440
|
textAlign: "center",
|
|
2446
2441
|
marginBottom: 2
|
|
@@ -2448,8 +2443,8 @@ function wt({ min: e, max: t, unit: n, dots: r, chips: i }) {
|
|
|
2448
2443
|
children: [/* @__PURE__ */ s("div", {
|
|
2449
2444
|
style: {
|
|
2450
2445
|
fontSize: 9,
|
|
2451
|
-
color:
|
|
2452
|
-
fontFamily:
|
|
2446
|
+
color: o,
|
|
2447
|
+
fontFamily: Q,
|
|
2453
2448
|
whiteSpace: "nowrap"
|
|
2454
2449
|
},
|
|
2455
2450
|
children: t.name
|
|
@@ -2457,8 +2452,8 @@ function wt({ min: e, max: t, unit: n, dots: r, chips: i }) {
|
|
|
2457
2452
|
style: {
|
|
2458
2453
|
fontSize: 9,
|
|
2459
2454
|
fontWeight: 700,
|
|
2460
|
-
color:
|
|
2461
|
-
fontFamily:
|
|
2455
|
+
color: o,
|
|
2456
|
+
fontFamily: Z,
|
|
2462
2457
|
whiteSpace: "nowrap"
|
|
2463
2458
|
},
|
|
2464
2459
|
children: [t.val, n]
|
|
@@ -2468,11 +2463,11 @@ function wt({ min: e, max: t, unit: n, dots: r, chips: i }) {
|
|
|
2468
2463
|
width: 10,
|
|
2469
2464
|
height: 10,
|
|
2470
2465
|
borderRadius: "50%",
|
|
2471
|
-
background:
|
|
2472
|
-
boxShadow: `0 0 8px ${
|
|
2473
|
-
margin:
|
|
2466
|
+
background: o,
|
|
2467
|
+
boxShadow: `0 0 8px ${o}70`,
|
|
2468
|
+
margin: l ? "0 auto" : "26px auto 0"
|
|
2474
2469
|
} }),
|
|
2475
|
-
!
|
|
2470
|
+
!l && /* @__PURE__ */ c("div", {
|
|
2476
2471
|
style: {
|
|
2477
2472
|
textAlign: "center",
|
|
2478
2473
|
marginTop: 4
|
|
@@ -2480,8 +2475,8 @@ function wt({ min: e, max: t, unit: n, dots: r, chips: i }) {
|
|
|
2480
2475
|
children: [/* @__PURE__ */ s("div", {
|
|
2481
2476
|
style: {
|
|
2482
2477
|
fontSize: 9,
|
|
2483
|
-
color:
|
|
2484
|
-
fontFamily:
|
|
2478
|
+
color: o,
|
|
2479
|
+
fontFamily: Q,
|
|
2485
2480
|
whiteSpace: "nowrap"
|
|
2486
2481
|
},
|
|
2487
2482
|
children: t.name
|
|
@@ -2489,8 +2484,8 @@ function wt({ min: e, max: t, unit: n, dots: r, chips: i }) {
|
|
|
2489
2484
|
style: {
|
|
2490
2485
|
fontSize: 9,
|
|
2491
2486
|
fontWeight: 700,
|
|
2492
|
-
color:
|
|
2493
|
-
fontFamily:
|
|
2487
|
+
color: o,
|
|
2488
|
+
fontFamily: Z,
|
|
2494
2489
|
whiteSpace: "nowrap"
|
|
2495
2490
|
},
|
|
2496
2491
|
children: [t.val, n]
|
|
@@ -2500,9 +2495,10 @@ function wt({ min: e, max: t, unit: n, dots: r, chips: i }) {
|
|
|
2500
2495
|
}, r);
|
|
2501
2496
|
})
|
|
2502
2497
|
]
|
|
2503
|
-
}), i && i.length > 0 && /* @__PURE__ */ s(
|
|
2498
|
+
}), i && i.length > 0 && /* @__PURE__ */ s(St, { chips: i })] });
|
|
2504
2499
|
}
|
|
2505
|
-
function
|
|
2500
|
+
function kt({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i, rightLabel: a, rightValue: o, rightColor: l, chips: d }) {
|
|
2501
|
+
let f = r ?? u.blue, p = l ?? u.cyan;
|
|
2506
2502
|
return /* @__PURE__ */ c("div", { children: [
|
|
2507
2503
|
/* @__PURE__ */ c("div", {
|
|
2508
2504
|
style: {
|
|
@@ -2516,7 +2512,7 @@ function Tt({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
2516
2512
|
/* @__PURE__ */ s("div", {
|
|
2517
2513
|
style: {
|
|
2518
2514
|
width: `${e}%`,
|
|
2519
|
-
background:
|
|
2515
|
+
background: f + "38",
|
|
2520
2516
|
display: "flex",
|
|
2521
2517
|
alignItems: "center",
|
|
2522
2518
|
justifyContent: "flex-end",
|
|
@@ -2526,8 +2522,8 @@ function Tt({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
2526
2522
|
style: {
|
|
2527
2523
|
fontSize: 12,
|
|
2528
2524
|
fontWeight: 700,
|
|
2529
|
-
color:
|
|
2530
|
-
fontFamily:
|
|
2525
|
+
color: f,
|
|
2526
|
+
fontFamily: Z
|
|
2531
2527
|
},
|
|
2532
2528
|
children: n
|
|
2533
2529
|
})
|
|
@@ -2540,7 +2536,7 @@ function Tt({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
2540
2536
|
/* @__PURE__ */ s("div", {
|
|
2541
2537
|
style: {
|
|
2542
2538
|
width: `${i}%`,
|
|
2543
|
-
background:
|
|
2539
|
+
background: p + "2A",
|
|
2544
2540
|
display: "flex",
|
|
2545
2541
|
alignItems: "center",
|
|
2546
2542
|
paddingLeft: 12
|
|
@@ -2549,8 +2545,8 @@ function Tt({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
2549
2545
|
style: {
|
|
2550
2546
|
fontSize: 12,
|
|
2551
2547
|
fontWeight: 700,
|
|
2552
|
-
color:
|
|
2553
|
-
fontFamily:
|
|
2548
|
+
color: p,
|
|
2549
|
+
fontFamily: Z
|
|
2554
2550
|
},
|
|
2555
2551
|
children: o
|
|
2556
2552
|
})
|
|
@@ -2560,15 +2556,15 @@ function Tt({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
2560
2556
|
/* @__PURE__ */ c("div", {
|
|
2561
2557
|
style: {
|
|
2562
2558
|
display: "flex",
|
|
2563
|
-
marginBottom:
|
|
2559
|
+
marginBottom: d ? 4 : 0
|
|
2564
2560
|
},
|
|
2565
2561
|
children: [/* @__PURE__ */ s("div", {
|
|
2566
2562
|
style: { width: `${e}%` },
|
|
2567
2563
|
children: /* @__PURE__ */ c("span", {
|
|
2568
2564
|
style: {
|
|
2569
2565
|
fontSize: 10,
|
|
2570
|
-
color:
|
|
2571
|
-
fontFamily:
|
|
2566
|
+
color: f,
|
|
2567
|
+
fontFamily: Q
|
|
2572
2568
|
},
|
|
2573
2569
|
children: [
|
|
2574
2570
|
e,
|
|
@@ -2584,8 +2580,8 @@ function Tt({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
2584
2580
|
children: /* @__PURE__ */ c("span", {
|
|
2585
2581
|
style: {
|
|
2586
2582
|
fontSize: 10,
|
|
2587
|
-
color:
|
|
2588
|
-
fontFamily:
|
|
2583
|
+
color: p,
|
|
2584
|
+
fontFamily: Q
|
|
2589
2585
|
},
|
|
2590
2586
|
children: [
|
|
2591
2587
|
i,
|
|
@@ -2595,11 +2591,11 @@ function Tt({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
2595
2591
|
})
|
|
2596
2592
|
})]
|
|
2597
2593
|
}),
|
|
2598
|
-
|
|
2594
|
+
d && d.length > 0 && /* @__PURE__ */ s(St, { chips: d })
|
|
2599
2595
|
] });
|
|
2600
2596
|
}
|
|
2601
|
-
function
|
|
2602
|
-
let i = 2 * Math.PI * 30,
|
|
2597
|
+
function At({ pct: e, label: t, color: n, chips: r }) {
|
|
2598
|
+
let i = n ?? u.blue, a = 2 * Math.PI * 30, o = a * (1 - e / 100);
|
|
2603
2599
|
return /* @__PURE__ */ c("div", {
|
|
2604
2600
|
style: {
|
|
2605
2601
|
display: "flex",
|
|
@@ -2629,10 +2625,10 @@ function Et({ pct: e, label: t, color: n, chips: r }) {
|
|
|
2629
2625
|
cy: 40,
|
|
2630
2626
|
r: 30,
|
|
2631
2627
|
fill: "none",
|
|
2632
|
-
stroke:
|
|
2628
|
+
stroke: i,
|
|
2633
2629
|
strokeWidth: 8,
|
|
2634
|
-
strokeDasharray:
|
|
2635
|
-
strokeDashoffset:
|
|
2630
|
+
strokeDasharray: a,
|
|
2631
|
+
strokeDashoffset: o,
|
|
2636
2632
|
strokeLinecap: "round"
|
|
2637
2633
|
})]
|
|
2638
2634
|
}), /* @__PURE__ */ s("div", {
|
|
@@ -2647,8 +2643,8 @@ function Et({ pct: e, label: t, color: n, chips: r }) {
|
|
|
2647
2643
|
style: {
|
|
2648
2644
|
fontSize: 15,
|
|
2649
2645
|
fontWeight: 700,
|
|
2650
|
-
color:
|
|
2651
|
-
fontFamily:
|
|
2646
|
+
color: i,
|
|
2647
|
+
fontFamily: Z
|
|
2652
2648
|
},
|
|
2653
2649
|
children: [e, "%"]
|
|
2654
2650
|
})
|
|
@@ -2657,11 +2653,8 @@ function Et({ pct: e, label: t, color: n, chips: r }) {
|
|
|
2657
2653
|
style: { flex: 1 },
|
|
2658
2654
|
children: [/* @__PURE__ */ s("div", {
|
|
2659
2655
|
style: {
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
fontFamily: $,
|
|
2663
|
-
marginBottom: 10,
|
|
2664
|
-
lineHeight: 1.5
|
|
2656
|
+
...$,
|
|
2657
|
+
marginBottom: 10
|
|
2665
2658
|
},
|
|
2666
2659
|
children: t
|
|
2667
2660
|
}), r && /* @__PURE__ */ s("div", {
|
|
@@ -2676,25 +2669,18 @@ function Et({ pct: e, label: t, color: n, chips: r }) {
|
|
|
2676
2669
|
alignItems: "baseline",
|
|
2677
2670
|
gap: 8,
|
|
2678
2671
|
padding: "7px 10px",
|
|
2679
|
-
background:
|
|
2680
|
-
border: `1px solid ${
|
|
2672
|
+
background: X.bg,
|
|
2673
|
+
border: `1px solid ${X.border}`,
|
|
2681
2674
|
borderRadius: 5
|
|
2682
2675
|
},
|
|
2683
2676
|
children: [/* @__PURE__ */ s("span", {
|
|
2684
2677
|
style: {
|
|
2685
|
-
|
|
2686
|
-
|
|
2687
|
-
color: e.color ?? Z.t1,
|
|
2688
|
-
fontFamily: Q
|
|
2678
|
+
...xt,
|
|
2679
|
+
color: e.color ?? X.t1
|
|
2689
2680
|
},
|
|
2690
2681
|
children: e.value
|
|
2691
2682
|
}), /* @__PURE__ */ s("span", {
|
|
2692
|
-
style: {
|
|
2693
|
-
fontSize: 11,
|
|
2694
|
-
color: Z.t4,
|
|
2695
|
-
fontFamily: $,
|
|
2696
|
-
lineHeight: 1.4
|
|
2697
|
-
},
|
|
2683
|
+
style: { ...$ },
|
|
2698
2684
|
children: e.label
|
|
2699
2685
|
})]
|
|
2700
2686
|
}, t))
|
|
@@ -2702,16 +2688,16 @@ function Et({ pct: e, label: t, color: n, chips: r }) {
|
|
|
2702
2688
|
})]
|
|
2703
2689
|
});
|
|
2704
2690
|
}
|
|
2705
|
-
var
|
|
2691
|
+
var jt = {
|
|
2706
2692
|
green: "#34D39918",
|
|
2707
2693
|
amber: "#FBBF2418",
|
|
2708
2694
|
red: "#F0606018"
|
|
2709
|
-
},
|
|
2695
|
+
}, Mt = {
|
|
2710
2696
|
green: "#34D399",
|
|
2711
2697
|
amber: "#FBBF24",
|
|
2712
2698
|
red: "#F06060"
|
|
2713
2699
|
};
|
|
2714
|
-
function
|
|
2700
|
+
function Nt({ items: e = [] }) {
|
|
2715
2701
|
return /* @__PURE__ */ s("div", {
|
|
2716
2702
|
style: {
|
|
2717
2703
|
display: "flex",
|
|
@@ -2724,9 +2710,9 @@ function kt({ items: e }) {
|
|
|
2724
2710
|
alignItems: "center",
|
|
2725
2711
|
gap: 10,
|
|
2726
2712
|
padding: "8px 12px",
|
|
2727
|
-
background:
|
|
2728
|
-
border: `1px solid ${
|
|
2729
|
-
borderLeft: `3px solid ${e.color}`,
|
|
2713
|
+
background: X.bg,
|
|
2714
|
+
border: `1px solid ${X.border}`,
|
|
2715
|
+
borderLeft: `3px solid ${e.color ?? X.t2}`,
|
|
2730
2716
|
borderRadius: 6
|
|
2731
2717
|
},
|
|
2732
2718
|
children: [
|
|
@@ -2734,11 +2720,11 @@ function kt({ items: e }) {
|
|
|
2734
2720
|
style: {
|
|
2735
2721
|
fontSize: 11,
|
|
2736
2722
|
fontWeight: 600,
|
|
2737
|
-
color: e.color,
|
|
2738
|
-
background: e.color + "1A",
|
|
2723
|
+
color: e.color ?? X.t2,
|
|
2724
|
+
background: (e.color ?? X.t2) + "1A",
|
|
2739
2725
|
padding: "2px 7px",
|
|
2740
2726
|
borderRadius: 4,
|
|
2741
|
-
fontFamily:
|
|
2727
|
+
fontFamily: Q,
|
|
2742
2728
|
flexShrink: 0,
|
|
2743
2729
|
minWidth: 62,
|
|
2744
2730
|
textAlign: "center"
|
|
@@ -2756,7 +2742,7 @@ function kt({ items: e }) {
|
|
|
2756
2742
|
children: /* @__PURE__ */ s("div", { style: {
|
|
2757
2743
|
height: "100%",
|
|
2758
2744
|
width: `${e.pct}%`,
|
|
2759
|
-
background: e.color,
|
|
2745
|
+
background: e.color ?? X.t2,
|
|
2760
2746
|
borderRadius: 2,
|
|
2761
2747
|
opacity: .75
|
|
2762
2748
|
} })
|
|
@@ -2765,8 +2751,8 @@ function kt({ items: e }) {
|
|
|
2765
2751
|
style: {
|
|
2766
2752
|
fontSize: 13,
|
|
2767
2753
|
fontWeight: 700,
|
|
2768
|
-
color: e.color,
|
|
2769
|
-
fontFamily:
|
|
2754
|
+
color: e.color ?? X.t1,
|
|
2755
|
+
fontFamily: Z,
|
|
2770
2756
|
flexShrink: 0,
|
|
2771
2757
|
minWidth: 52,
|
|
2772
2758
|
textAlign: "right"
|
|
@@ -2777,11 +2763,11 @@ function kt({ items: e }) {
|
|
|
2777
2763
|
style: {
|
|
2778
2764
|
fontSize: 10,
|
|
2779
2765
|
fontWeight: 600,
|
|
2780
|
-
color:
|
|
2781
|
-
background:
|
|
2766
|
+
color: Mt[e.badgeSeverity],
|
|
2767
|
+
background: jt[e.badgeSeverity],
|
|
2782
2768
|
padding: "2px 7px",
|
|
2783
2769
|
borderRadius: 4,
|
|
2784
|
-
fontFamily:
|
|
2770
|
+
fontFamily: Q,
|
|
2785
2771
|
flexShrink: 0,
|
|
2786
2772
|
minWidth: 72,
|
|
2787
2773
|
textAlign: "center"
|
|
@@ -2790,9 +2776,7 @@ function kt({ items: e }) {
|
|
|
2790
2776
|
}),
|
|
2791
2777
|
e.sublabel && /* @__PURE__ */ s("span", {
|
|
2792
2778
|
style: {
|
|
2793
|
-
|
|
2794
|
-
color: Z.t4,
|
|
2795
|
-
fontFamily: $,
|
|
2779
|
+
...$,
|
|
2796
2780
|
flexShrink: 0,
|
|
2797
2781
|
minWidth: 80,
|
|
2798
2782
|
textAlign: "right"
|
|
@@ -2803,12 +2787,12 @@ function kt({ items: e }) {
|
|
|
2803
2787
|
}, t))
|
|
2804
2788
|
});
|
|
2805
2789
|
}
|
|
2806
|
-
var
|
|
2807
|
-
red:
|
|
2808
|
-
amber:
|
|
2809
|
-
green:
|
|
2790
|
+
var Pt = {
|
|
2791
|
+
red: X.red,
|
|
2792
|
+
amber: X.amber,
|
|
2793
|
+
green: X.green
|
|
2810
2794
|
};
|
|
2811
|
-
function
|
|
2795
|
+
function Ft({ items: e = [] }) {
|
|
2812
2796
|
return /* @__PURE__ */ s("div", {
|
|
2813
2797
|
style: {
|
|
2814
2798
|
display: "flex",
|
|
@@ -2816,7 +2800,7 @@ function jt({ items: e }) {
|
|
|
2816
2800
|
gap: 5
|
|
2817
2801
|
},
|
|
2818
2802
|
children: e.map((e, t) => {
|
|
2819
|
-
let n =
|
|
2803
|
+
let n = Pt[e.severity];
|
|
2820
2804
|
return /* @__PURE__ */ c("div", {
|
|
2821
2805
|
style: {
|
|
2822
2806
|
display: "flex",
|
|
@@ -2840,10 +2824,7 @@ function jt({ items: e }) {
|
|
|
2840
2824
|
/* @__PURE__ */ s("span", {
|
|
2841
2825
|
style: {
|
|
2842
2826
|
flex: 1,
|
|
2843
|
-
|
|
2844
|
-
color: Z.t2,
|
|
2845
|
-
fontFamily: $,
|
|
2846
|
-
lineHeight: 1.5
|
|
2827
|
+
...$
|
|
2847
2828
|
},
|
|
2848
2829
|
children: e.text
|
|
2849
2830
|
}),
|
|
@@ -2855,16 +2836,14 @@ function jt({ items: e }) {
|
|
|
2855
2836
|
background: n + "20",
|
|
2856
2837
|
padding: "2px 7px",
|
|
2857
2838
|
borderRadius: 4,
|
|
2858
|
-
fontFamily:
|
|
2839
|
+
fontFamily: Q,
|
|
2859
2840
|
flexShrink: 0
|
|
2860
2841
|
},
|
|
2861
2842
|
children: e.tag
|
|
2862
2843
|
}),
|
|
2863
2844
|
/* @__PURE__ */ s("span", {
|
|
2864
2845
|
style: {
|
|
2865
|
-
|
|
2866
|
-
color: Z.t4,
|
|
2867
|
-
fontFamily: Q,
|
|
2846
|
+
...$,
|
|
2868
2847
|
flexShrink: 0,
|
|
2869
2848
|
marginTop: 1
|
|
2870
2849
|
},
|
|
@@ -2875,7 +2854,7 @@ function jt({ items: e }) {
|
|
|
2875
2854
|
})
|
|
2876
2855
|
});
|
|
2877
2856
|
}
|
|
2878
|
-
function
|
|
2857
|
+
function It({ columns: e = [], rows: t = [] }) {
|
|
2879
2858
|
return /* @__PURE__ */ c("div", {
|
|
2880
2859
|
style: {
|
|
2881
2860
|
display: "flex",
|
|
@@ -2888,15 +2867,15 @@ function Mt({ columns: e, rows: t }) {
|
|
|
2888
2867
|
alignItems: "center",
|
|
2889
2868
|
gap: 10,
|
|
2890
2869
|
padding: "0 12px 6px",
|
|
2891
|
-
borderBottom: `1px solid ${
|
|
2870
|
+
borderBottom: `1px solid ${X.border}`
|
|
2892
2871
|
},
|
|
2893
2872
|
children: [/* @__PURE__ */ s("div", { style: { minWidth: 64 } }), e.map((e, t) => /* @__PURE__ */ s("div", {
|
|
2894
2873
|
style: {
|
|
2895
2874
|
flex: 1,
|
|
2896
2875
|
fontSize: 9,
|
|
2897
2876
|
fontWeight: 600,
|
|
2898
|
-
color:
|
|
2899
|
-
fontFamily:
|
|
2877
|
+
color: X.t4,
|
|
2878
|
+
fontFamily: Q,
|
|
2900
2879
|
textTransform: "uppercase",
|
|
2901
2880
|
letterSpacing: .6
|
|
2902
2881
|
},
|
|
@@ -2908,20 +2887,20 @@ function Mt({ columns: e, rows: t }) {
|
|
|
2908
2887
|
alignItems: "center",
|
|
2909
2888
|
gap: 10,
|
|
2910
2889
|
padding: "8px 12px",
|
|
2911
|
-
background:
|
|
2912
|
-
border: `1px solid ${
|
|
2913
|
-
borderLeft: `3px solid ${e.color ??
|
|
2890
|
+
background: X.bg,
|
|
2891
|
+
border: `1px solid ${X.border}`,
|
|
2892
|
+
borderLeft: `3px solid ${e.color ?? X.t4}`,
|
|
2914
2893
|
borderRadius: 6
|
|
2915
2894
|
},
|
|
2916
2895
|
children: [/* @__PURE__ */ s("span", {
|
|
2917
2896
|
style: {
|
|
2918
2897
|
fontSize: 11,
|
|
2919
2898
|
fontWeight: 600,
|
|
2920
|
-
color: e.color ??
|
|
2921
|
-
background: (e.color ??
|
|
2899
|
+
color: e.color ?? X.t2,
|
|
2900
|
+
background: (e.color ?? X.t4) + "1A",
|
|
2922
2901
|
padding: "2px 8px",
|
|
2923
2902
|
borderRadius: 4,
|
|
2924
|
-
fontFamily:
|
|
2903
|
+
fontFamily: Q,
|
|
2925
2904
|
flexShrink: 0,
|
|
2926
2905
|
minWidth: 64,
|
|
2927
2906
|
textAlign: "center"
|
|
@@ -2932,62 +2911,56 @@ function Mt({ columns: e, rows: t }) {
|
|
|
2932
2911
|
flex: 1,
|
|
2933
2912
|
fontSize: 13,
|
|
2934
2913
|
fontWeight: 700,
|
|
2935
|
-
color: e.color ??
|
|
2936
|
-
fontFamily:
|
|
2914
|
+
color: e.color ?? X.t1,
|
|
2915
|
+
fontFamily: Z
|
|
2937
2916
|
},
|
|
2938
2917
|
children: t
|
|
2939
2918
|
}, n))]
|
|
2940
2919
|
}, t))]
|
|
2941
2920
|
});
|
|
2942
2921
|
}
|
|
2943
|
-
function
|
|
2922
|
+
function Lt({ text: e }) {
|
|
2944
2923
|
return /* @__PURE__ */ c("div", {
|
|
2945
2924
|
style: {
|
|
2946
2925
|
marginTop: 10,
|
|
2947
2926
|
padding: "8px 12px",
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2927
|
+
border: `1px solid ${u.bd}`,
|
|
2928
|
+
borderLeft: "4px solid #FFAE43",
|
|
2929
|
+
borderRadius: 5,
|
|
2930
|
+
background: `linear-gradient(90deg, rgba(255, 174, 67, 0.10) -48.4%, rgba(19, 22, 27, 0.10) 83.98%), ${u.sf}`
|
|
2952
2931
|
},
|
|
2953
2932
|
children: [/* @__PURE__ */ s("span", {
|
|
2954
2933
|
style: {
|
|
2955
|
-
fontSize:
|
|
2956
|
-
fontWeight:
|
|
2957
|
-
color:
|
|
2958
|
-
fontFamily:
|
|
2959
|
-
|
|
2960
|
-
textTransform: "uppercase",
|
|
2934
|
+
fontSize: 14,
|
|
2935
|
+
fontWeight: 500,
|
|
2936
|
+
color: u.t1,
|
|
2937
|
+
fontFamily: Q,
|
|
2938
|
+
lineHeight: "20px",
|
|
2961
2939
|
marginRight: 8
|
|
2962
2940
|
},
|
|
2963
2941
|
children: "Takeaway"
|
|
2964
2942
|
}), /* @__PURE__ */ s("span", {
|
|
2965
|
-
style: {
|
|
2966
|
-
fontSize: 11,
|
|
2967
|
-
color: Z.t3,
|
|
2968
|
-
fontFamily: $,
|
|
2969
|
-
lineHeight: 1.6
|
|
2970
|
-
},
|
|
2943
|
+
style: { ...$ },
|
|
2971
2944
|
children: e
|
|
2972
2945
|
})]
|
|
2973
2946
|
});
|
|
2974
2947
|
}
|
|
2975
|
-
function
|
|
2948
|
+
function Rt({ block: e }) {
|
|
2976
2949
|
if (!e) return null;
|
|
2977
2950
|
let t = (() => {
|
|
2978
2951
|
switch (e.type) {
|
|
2979
|
-
case "stats": return /* @__PURE__ */ s(
|
|
2980
|
-
case "ranked": return /* @__PURE__ */ s(
|
|
2981
|
-
case "chips": return /* @__PURE__ */ s(
|
|
2982
|
-
case "badges": return /* @__PURE__ */ s(
|
|
2983
|
-
case "dot-strip": return /* @__PURE__ */ s(
|
|
2952
|
+
case "stats": return /* @__PURE__ */ s(Ct, { items: e.items });
|
|
2953
|
+
case "ranked": return /* @__PURE__ */ s(wt, { items: e.items });
|
|
2954
|
+
case "chips": return /* @__PURE__ */ s(Tt, { items: e.items });
|
|
2955
|
+
case "badges": return /* @__PURE__ */ s(Dt, { items: e.items });
|
|
2956
|
+
case "dot-strip": return /* @__PURE__ */ s(Ot, {
|
|
2984
2957
|
min: e.min,
|
|
2985
2958
|
max: e.max,
|
|
2986
2959
|
unit: e.unit,
|
|
2987
2960
|
dots: e.dots,
|
|
2988
2961
|
chips: e.chips
|
|
2989
2962
|
});
|
|
2990
|
-
case "proportion": return /* @__PURE__ */ s(
|
|
2963
|
+
case "proportion": return /* @__PURE__ */ s(kt, {
|
|
2991
2964
|
leftPct: e.leftPct,
|
|
2992
2965
|
leftLabel: e.leftLabel,
|
|
2993
2966
|
leftValue: e.leftValue,
|
|
@@ -2998,22 +2971,22 @@ function Pt({ block: e }) {
|
|
|
2998
2971
|
rightColor: e.rightColor,
|
|
2999
2972
|
chips: e.chips
|
|
3000
2973
|
});
|
|
3001
|
-
case "ring": return /* @__PURE__ */ s(
|
|
2974
|
+
case "ring": return /* @__PURE__ */ s(At, {
|
|
3002
2975
|
pct: e.pct,
|
|
3003
2976
|
label: e.label,
|
|
3004
2977
|
color: e.color,
|
|
3005
2978
|
chips: e.chips
|
|
3006
2979
|
});
|
|
3007
|
-
case "scorecard-rows": return /* @__PURE__ */ s(
|
|
3008
|
-
case "flags-list": return /* @__PURE__ */ s(
|
|
3009
|
-
case "comparison-rows": return /* @__PURE__ */ s(
|
|
2980
|
+
case "scorecard-rows": return /* @__PURE__ */ s(Nt, { items: e.items });
|
|
2981
|
+
case "flags-list": return /* @__PURE__ */ s(Ft, { items: e.items });
|
|
2982
|
+
case "comparison-rows": return /* @__PURE__ */ s(It, {
|
|
3010
2983
|
columns: e.columns,
|
|
3011
2984
|
rows: e.rows
|
|
3012
2985
|
});
|
|
3013
2986
|
default: return null;
|
|
3014
2987
|
}
|
|
3015
2988
|
})();
|
|
3016
|
-
return e.takeaway ? /* @__PURE__ */ c("div", { children: [t, /* @__PURE__ */ s(
|
|
2989
|
+
return e.takeaway ? /* @__PURE__ */ c("div", { children: [t, /* @__PURE__ */ s(Lt, { text: e.takeaway })] }) : t;
|
|
3017
2990
|
}
|
|
3018
2991
|
//#endregion
|
|
3019
|
-
export {
|
|
2992
|
+
export { ne as AreaChart, ie as BarChart, l as ChartFrame, bt as DonutChart, Rt as KeyHighlights, De as LineChart, Ae as MiniBars, Le as PieChart, qe as ProcessSankey, Je as RankingSankey, ze as SankeySvg, te as SeriesChart, ot as TrendChart, mt as VisualizationRenderer, _t as cleanupVisualizationMounts, vt as hydrateVisualizationMounts, yt as serializeVisualizationConfig };
|