@divami-artefacts/ai-design-system 1.0.30 → 1.0.32
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/components/hubAndSpokeRadialChart/HubAndSpokeRadialChart.d.ts +1 -1
- package/dist/components/hubAndSpokeRadialChart/types.d.ts +1 -0
- package/dist/components/semiCircularGaugeChart/SemiCircularGaugeChart.d.ts +1 -1
- package/dist/components/semiCircularGaugeChart/types.d.ts +0 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +544 -533
- package/dist/types/index.d.ts +1 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -356,7 +356,7 @@ function ee({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
|
356
356
|
}
|
|
357
357
|
//#endregion
|
|
358
358
|
//#region src/components/areaChart/AreaChart.tsx
|
|
359
|
-
function
|
|
359
|
+
function I({ rows: e = [], className: t, colors: n }) {
|
|
360
360
|
return /* @__PURE__ */ s(ee, {
|
|
361
361
|
rows: e,
|
|
362
362
|
variant: "area",
|
|
@@ -366,28 +366,28 @@ function te({ rows: e = [], className: t, colors: n }) {
|
|
|
366
366
|
}
|
|
367
367
|
//#endregion
|
|
368
368
|
//#region src/components/barChart/BarChart.tsx
|
|
369
|
-
var
|
|
370
|
-
function
|
|
369
|
+
var te = 760, ne = 280;
|
|
370
|
+
function re({ rows: e = [], className: t, colors: r }) {
|
|
371
371
|
let i = a(null), o = a(/* @__PURE__ */ new Map()), f = a(0), { hoveredRef: p, tooltip: m, hitZonesRef: g } = w(i, {
|
|
372
|
-
width:
|
|
373
|
-
height:
|
|
372
|
+
width: te,
|
|
373
|
+
height: ne
|
|
374
374
|
});
|
|
375
375
|
return n(() => {
|
|
376
376
|
let t = i.current;
|
|
377
377
|
if (!t) return;
|
|
378
|
-
let n = v(t,
|
|
378
|
+
let n = v(t, te, ne);
|
|
379
379
|
f.current = 0;
|
|
380
380
|
let a = r?.bars ?? d, s = r?.axisLine ?? u.bd, c = r?.valueLabel ?? u.t2, l = {
|
|
381
381
|
top: 24,
|
|
382
382
|
right: 24,
|
|
383
383
|
bottom: 56,
|
|
384
384
|
left: 24
|
|
385
|
-
}, m =
|
|
385
|
+
}, m = ne - l.top - l.bottom, _ = (te - l.left - l.right) / Math.max(e.length, 1), b = Math.max(100, ...e.map((e) => e.pricing ?? 0)), x = l.top + m, S, C = () => {
|
|
386
386
|
f.current++;
|
|
387
387
|
let t = f.current;
|
|
388
|
-
n.clearRect(0, 0,
|
|
388
|
+
n.clearRect(0, 0, te, ne);
|
|
389
389
|
let r = O(Math.min(t / 48, 1));
|
|
390
|
-
N(o.current, p.current), g.current = [], n.strokeStyle = h(s, .4), n.lineWidth = 1, n.setLineDash([]), n.beginPath(), n.moveTo(l.left, x), n.lineTo(
|
|
390
|
+
N(o.current, p.current), g.current = [], n.strokeStyle = h(s, .4), n.lineWidth = 1, n.setLineDash([]), n.beginPath(), n.moveTo(l.left, x), n.lineTo(te - l.right, x), n.stroke(), e.forEach((t, i) => {
|
|
391
391
|
let s = l.left + i * _, d = M(r, i, e.length, O), f = b > 0 ? (t.pricing ?? 0) / b * m : 0, p = Math.max(f > 0 ? 4 : 0, f * d), v = a[i % a.length], S = o.current.get(t.id ?? `bar-${i}`) ?? 0;
|
|
392
392
|
E(g.current, t.id ?? `bar-${i}`, s + 4, x - p, _ - 8, p, {
|
|
393
393
|
label: t.vendor,
|
|
@@ -403,7 +403,7 @@ function ie({ rows: e = [], className: t, colors: r }) {
|
|
|
403
403
|
4,
|
|
404
404
|
0,
|
|
405
405
|
0
|
|
406
|
-
]), n.stroke())), d > .5 && p > 0 && (n.globalAlpha = Math.min(1, (d - .5) * 2), n.font = "bold 10px 'JetBrains Mono', monospace", n.fillStyle = S > 0 ? v : h(c, .7), n.textAlign = "center", n.fillText(String(t.pricing ?? ""), s + _ / 2, x - p - 6), n.globalAlpha = 1), n.font = `${S > 0 ? "bold " : ""}9px 'JetBrains Mono', monospace`, n.fillStyle = S > 0 ? v : h(u.t3, .6), n.textAlign = "center", n.fillText(t.vendor, s + _ / 2,
|
|
406
|
+
]), n.stroke())), d > .5 && p > 0 && (n.globalAlpha = Math.min(1, (d - .5) * 2), n.font = "bold 10px 'JetBrains Mono', monospace", n.fillStyle = S > 0 ? v : h(c, .7), n.textAlign = "center", n.fillText(String(t.pricing ?? ""), s + _ / 2, x - p - 6), n.globalAlpha = 1), n.font = `${S > 0 ? "bold " : ""}9px 'JetBrains Mono', monospace`, n.fillStyle = S > 0 ? v : h(u.t3, .6), n.textAlign = "center", n.fillText(t.vendor, s + _ / 2, ne - 14);
|
|
407
407
|
}), S = requestAnimationFrame(C);
|
|
408
408
|
};
|
|
409
409
|
return C(), () => cancelAnimationFrame(S);
|
|
@@ -412,30 +412,30 @@ function ie({ rows: e = [], className: t, colors: r }) {
|
|
|
412
412
|
children: /* @__PURE__ */ c("div", {
|
|
413
413
|
style: {
|
|
414
414
|
position: "relative",
|
|
415
|
-
width:
|
|
416
|
-
height:
|
|
415
|
+
width: te,
|
|
416
|
+
height: ne
|
|
417
417
|
},
|
|
418
418
|
children: [/* @__PURE__ */ s("canvas", {
|
|
419
419
|
ref: i,
|
|
420
420
|
role: "img",
|
|
421
421
|
"aria-label": "bar chart",
|
|
422
422
|
style: {
|
|
423
|
-
width:
|
|
424
|
-
height:
|
|
423
|
+
width: te,
|
|
424
|
+
height: ne,
|
|
425
425
|
display: "block",
|
|
426
426
|
borderRadius: 8
|
|
427
427
|
}
|
|
428
428
|
}), /* @__PURE__ */ s(C, {
|
|
429
429
|
...m,
|
|
430
|
-
parentW:
|
|
431
|
-
parentH:
|
|
430
|
+
parentW: te,
|
|
431
|
+
parentH: ne
|
|
432
432
|
})]
|
|
433
433
|
})
|
|
434
434
|
});
|
|
435
435
|
}
|
|
436
436
|
//#endregion
|
|
437
437
|
//#region src/components/common/ChartEmptyState.tsx
|
|
438
|
-
function
|
|
438
|
+
function L({ width: e, height: t, message: n = "No data available", "data-testid": r }) {
|
|
439
439
|
return /* @__PURE__ */ s("div", {
|
|
440
440
|
"data-testid": r,
|
|
441
441
|
style: {
|
|
@@ -455,7 +455,7 @@ function I({ width: e, height: t, message: n = "No data available", "data-testid
|
|
|
455
455
|
}
|
|
456
456
|
//#endregion
|
|
457
457
|
//#region src/components/common/ToggleButton.tsx
|
|
458
|
-
function
|
|
458
|
+
function ie({ expanded: e, onToggle: t, labelExpanded: n = "View Less", labelCollapsed: r = "View More", "data-testid": i }) {
|
|
459
459
|
return /* @__PURE__ */ c("button", {
|
|
460
460
|
type: "button",
|
|
461
461
|
"data-testid": i,
|
|
@@ -498,60 +498,60 @@ function ae({ expanded: e, onToggle: t, labelExpanded: n = "View Less", labelCol
|
|
|
498
498
|
}
|
|
499
499
|
//#endregion
|
|
500
500
|
//#region src/components/progressRaceChart/ProgressRaceChart.tsx
|
|
501
|
-
var
|
|
501
|
+
var R = 660, z = 42, ae = 10, oe = 24, se = 24, ce = 8, le = [
|
|
502
502
|
u.green,
|
|
503
503
|
u.blue,
|
|
504
504
|
u.amber,
|
|
505
505
|
u.red
|
|
506
506
|
];
|
|
507
|
-
function
|
|
507
|
+
function ue(e, t, n) {
|
|
508
508
|
if (e.measureText(t).width <= n) return t;
|
|
509
509
|
let r = t;
|
|
510
510
|
for (; r.length > 0 && e.measureText(r + "…").width > n;) r = r.slice(0, -1);
|
|
511
511
|
return r + "…";
|
|
512
512
|
}
|
|
513
|
-
function
|
|
514
|
-
let r = a(null), l = a(0), d = a(/* @__PURE__ */ new Map()), [m, g] = o(!1), _ = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), S = i(() => [..._].sort((e, t) => (t.percentage ?? 0) - (e.percentage ?? 0)), [_]), E = i(() => m ? S : S.slice(0,
|
|
515
|
-
width:
|
|
513
|
+
function de({ items: e = [], "data-testid": t }) {
|
|
514
|
+
let r = a(null), l = a(0), d = a(/* @__PURE__ */ new Map()), [m, g] = o(!1), _ = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), S = i(() => [..._].sort((e, t) => (t.percentage ?? 0) - (e.percentage ?? 0)), [_]), E = i(() => m ? S : S.slice(0, ce), [S, m]), O = E.length, k = oe + se + O * z + Math.max(0, O - 1) * ae, { hoveredRef: A, tooltip: j, hitZonesRef: M } = w(r, {
|
|
515
|
+
width: R,
|
|
516
516
|
height: k
|
|
517
517
|
});
|
|
518
518
|
return n(() => {
|
|
519
519
|
let e = r.current;
|
|
520
520
|
if (!e) return;
|
|
521
|
-
let t = v(e,
|
|
521
|
+
let t = v(e, R, k);
|
|
522
522
|
l.current = 0;
|
|
523
|
-
let n =
|
|
523
|
+
let n = R * .13, i = R * .08, a = R - n - i, o, s = () => {
|
|
524
524
|
l.current++;
|
|
525
525
|
let e = l.current;
|
|
526
|
-
t.clearRect(0, 0,
|
|
526
|
+
t.clearRect(0, 0, R, k), t.letterSpacing = f.letterSpacing, M.current = [], d.current.forEach((e, t) => {
|
|
527
527
|
let n = t === A.current ? 1 : 0, r = e + (n - e) * .12;
|
|
528
528
|
Math.abs(r - n) < .005 ? n === 0 ? d.current.delete(t) : d.current.set(t, 1) : d.current.set(t, r);
|
|
529
|
-
}), A.current && !d.current.has(A.current) && d.current.set(A.current, 0), b(t,
|
|
530
|
-
let o =
|
|
531
|
-
t.fillStyle = h(o, .04 + s * .04), t.beginPath(), t.roundRect(n, c, a,
|
|
529
|
+
}), A.current && !d.current.has(A.current) && d.current.set(A.current, 0), b(t, R, k, e, 40, h(u.blue, .04)), E.forEach((r, i) => {
|
|
530
|
+
let o = le[i % le.length], s = d.current.get(r.id) ?? 0, c = oe + i * (z + ae);
|
|
531
|
+
t.fillStyle = h(o, .04 + s * .04), t.beginPath(), t.roundRect(n, c, a, z, 3), t.fill(), t.strokeStyle = h(o, .08), t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(n, c + z / 2), t.lineTo(n + a, c + z / 2), t.stroke(), t.setLineDash([]);
|
|
532
532
|
let l = (r.percentage ?? 0) / 100, u = n + a * Math.min(l, l * D(Math.min(1, e * .005)));
|
|
533
533
|
if (u > n + 4) {
|
|
534
534
|
let e = t.createLinearGradient(n, 0, u, 0);
|
|
535
|
-
e.addColorStop(0, h(o, .02)), e.addColorStop(1, h(o, .25 + s * .15)), t.fillStyle = e, t.beginPath(), t.roundRect(n, c + 2, u - n,
|
|
535
|
+
e.addColorStop(0, h(o, .02)), e.addColorStop(1, h(o, .25 + s * .15)), t.fillStyle = e, t.beginPath(), t.roundRect(n, c + 2, u - n, z - 4, 2), t.fill();
|
|
536
536
|
}
|
|
537
|
-
y(t, u, c +
|
|
537
|
+
y(t, u, c + z / 2, 18 + s * 8, o, .3 + s * .2), t.beginPath(), t.arc(u, c + z / 2, 5 + s * 2, 0, Math.PI * 2), t.fillStyle = h(o, .9), t.fill();
|
|
538
538
|
let m = {
|
|
539
539
|
label: r.name,
|
|
540
540
|
value: `${r.percentage ?? 0}% commitment`,
|
|
541
541
|
sublabel: `Base: ${r.baseLabel ?? String(r.base ?? 0)} · Variations: ${r.variationLabel ?? String(r.variation ?? 0)}`,
|
|
542
542
|
color: o
|
|
543
543
|
};
|
|
544
|
-
T(M.current, r.id, u, c +
|
|
545
|
-
}), t.strokeStyle = h(u.t3, .3), t.lineWidth = 1, t.setLineDash([]), t.beginPath(), t.moveTo(n + a,
|
|
544
|
+
T(M.current, r.id, u, c + z / 2, 14, m), t.font = p.font, t.fillStyle = h(o, .9 + s * .1), t.textAlign = "left", t.textBaseline = "middle", t.fillText(`${r.percentage ?? 0}%`, u + 10, c + z / 2), t.font = `${s > 0 ? "bold " : ""}` + f.font, t.fillStyle = s > 0 ? o : f.color, t.textAlign = "right", t.fillText(ue(t, r.abbreviation ?? r.name ?? "", n - 16), n - 8, c + z / 2);
|
|
545
|
+
}), t.strokeStyle = h(u.t3, .3), t.lineWidth = 1, t.setLineDash([]), t.beginPath(), t.moveTo(n + a, oe), t.lineTo(n + a, oe + (O - 1) * (z + ae) + z), t.stroke(), x(t, R, k, e, .015), o = requestAnimationFrame(s);
|
|
546
546
|
};
|
|
547
547
|
return s(), () => cancelAnimationFrame(o);
|
|
548
|
-
}, [E, k]), S.length === 0 ? /* @__PURE__ */ s(
|
|
549
|
-
width:
|
|
548
|
+
}, [E, k]), S.length === 0 ? /* @__PURE__ */ s(L, {
|
|
549
|
+
width: R,
|
|
550
550
|
height: 160,
|
|
551
551
|
"data-testid": t
|
|
552
552
|
}) : /* @__PURE__ */ c("div", {
|
|
553
553
|
"data-testid": t,
|
|
554
|
-
style: { width:
|
|
554
|
+
style: { width: R },
|
|
555
555
|
children: [/* @__PURE__ */ c("div", {
|
|
556
556
|
style: { position: "relative" },
|
|
557
557
|
children: [/* @__PURE__ */ s("canvas", {
|
|
@@ -559,19 +559,19 @@ function fe({ items: e = [], "data-testid": t }) {
|
|
|
559
559
|
role: "img",
|
|
560
560
|
"aria-label": "Commitment race — contractors ranked by commitment percentage",
|
|
561
561
|
style: {
|
|
562
|
-
width:
|
|
562
|
+
width: R,
|
|
563
563
|
height: k,
|
|
564
564
|
display: "block",
|
|
565
565
|
borderRadius: 8
|
|
566
566
|
}
|
|
567
567
|
}), /* @__PURE__ */ s(C, {
|
|
568
568
|
...j,
|
|
569
|
-
parentW:
|
|
569
|
+
parentW: R,
|
|
570
570
|
parentH: k
|
|
571
571
|
})]
|
|
572
|
-
}), _.length >
|
|
572
|
+
}), _.length > ce && /* @__PURE__ */ s("div", {
|
|
573
573
|
style: { marginTop: 8 },
|
|
574
|
-
children: /* @__PURE__ */ s(
|
|
574
|
+
children: /* @__PURE__ */ s(ie, {
|
|
575
575
|
expanded: m,
|
|
576
576
|
onToggle: () => g((e) => !e)
|
|
577
577
|
})
|
|
@@ -580,20 +580,20 @@ function fe({ items: e = [], "data-testid": t }) {
|
|
|
580
580
|
}
|
|
581
581
|
//#endregion
|
|
582
582
|
//#region src/components/semiCircularGaugeChart/SemiCircularGaugeChart.tsx
|
|
583
|
-
var
|
|
584
|
-
function
|
|
585
|
-
let
|
|
583
|
+
var fe = 480, pe = 340;
|
|
584
|
+
function me({ confirmed: e, total: t, "data-testid": r }) {
|
|
585
|
+
let i = a(null), o = a(0);
|
|
586
586
|
return n(() => {
|
|
587
|
-
let n =
|
|
587
|
+
let n = i.current;
|
|
588
588
|
if (!n) return;
|
|
589
|
-
let
|
|
590
|
-
|
|
591
|
-
let a =
|
|
592
|
-
|
|
593
|
-
let n =
|
|
594
|
-
|
|
595
|
-
let
|
|
596
|
-
|
|
589
|
+
let r = v(n, fe, pe);
|
|
590
|
+
o.current = 0;
|
|
591
|
+
let a = fe / 2, s = Math.PI, c = 2 * Math.PI, l = Math.PI, d, p = () => {
|
|
592
|
+
o.current++;
|
|
593
|
+
let n = o.current;
|
|
594
|
+
r.clearRect(0, 0, fe, pe), r.letterSpacing = f.letterSpacing;
|
|
595
|
+
let i = D(Math.min(n / 80, 1)), g = A(Math.min(n / 72, 1));
|
|
596
|
+
r.beginPath(), r.arc(a, 220, 120, s, c), r.strokeStyle = h(u.bd, .35), r.lineWidth = 46, r.stroke(), [
|
|
597
597
|
{
|
|
598
598
|
start: 0,
|
|
599
599
|
end: .33,
|
|
@@ -610,57 +610,53 @@ function he({ value: e, confirmed: t, total: r, "data-testid": i }) {
|
|
|
610
610
|
color: u.green
|
|
611
611
|
}
|
|
612
612
|
].forEach((e) => {
|
|
613
|
-
let t = s + e.start *
|
|
614
|
-
|
|
613
|
+
let t = s + e.start * l, n = s + e.end * l;
|
|
614
|
+
r.beginPath(), r.arc(a, 220, 194 / 2, t, n), r.strokeStyle = h(e.color, .12), r.lineWidth = 42, r.stroke();
|
|
615
615
|
}), [
|
|
616
616
|
{
|
|
617
617
|
label: "Low",
|
|
618
|
-
angle: s + .16 *
|
|
618
|
+
angle: s + .16 * l
|
|
619
619
|
},
|
|
620
620
|
{
|
|
621
621
|
label: "Mid",
|
|
622
|
-
angle: s + .5 *
|
|
622
|
+
angle: s + .5 * l
|
|
623
623
|
},
|
|
624
624
|
{
|
|
625
625
|
label: "High",
|
|
626
|
-
angle: s + .84 *
|
|
626
|
+
angle: s + .84 * l
|
|
627
627
|
}
|
|
628
628
|
].forEach(({ label: e, angle: t }) => {
|
|
629
|
-
let n = a + Math.cos(t) * 166,
|
|
630
|
-
|
|
629
|
+
let n = a + Math.cos(t) * 166, i = 220 + Math.sin(t) * 166;
|
|
630
|
+
r.font = f.font, r.fillStyle = f.color, r.textAlign = "center", r.fillText(e, n, i + 3);
|
|
631
631
|
});
|
|
632
|
-
let
|
|
633
|
-
y(
|
|
634
|
-
let
|
|
635
|
-
|
|
632
|
+
let _ = Math.round((e ?? 0) / (t || 1) * 100), v = s + _ / 100 * l * i, b = _ >= 66 ? u.green : _ >= 33 ? u.amber : u.red;
|
|
633
|
+
y(r, a + Math.cos(v) * 194 / 2, 220 + Math.sin(v) * 194 / 2, 18, b, .35 * i), r.beginPath(), r.arc(a, 220, 194 / 2, s, v), r.strokeStyle = h(b, .7 * i), r.lineWidth = 38, r.lineCap = "round", r.stroke(), r.lineCap = "butt";
|
|
634
|
+
let x = s + _ / 100 * l * g, S = a + Math.cos(x) * 82, C = 220 + Math.sin(x) * 82, w = a - Math.cos(x) * 14, T = 220 - Math.sin(x) * 14;
|
|
635
|
+
r.strokeStyle = h(b, .18 * g), r.lineWidth = 6, r.lineCap = "round", r.beginPath(), r.moveTo(w, T), r.lineTo(S, C), r.stroke(), r.strokeStyle = h(u.t1, .92 * g), r.lineWidth = 2, r.lineCap = "round", r.beginPath(), r.moveTo(w, T), r.lineTo(S, C), r.stroke(), r.beginPath(), r.arc(S, C, 3, 0, Math.PI * 2), r.fillStyle = h(b, .9 * g), r.fill(), y(r, a, 220, 20, b, .25 * g), r.beginPath(), r.arc(a, 220, 9, 0, Math.PI * 2), r.strokeStyle = h(b, .5 * g), r.lineWidth = 1.5, r.stroke(), r.beginPath(), r.arc(a, 220, 5, 0, Math.PI * 2), r.fillStyle = u.t1, r.fill(), i > .5 && (r.globalAlpha = Math.min(1, (i - .5) / .5), r.font = "500 24px 'Satoshi Variable', 'DM Sans', sans-serif", r.fillStyle = b, r.textAlign = "center", r.fillText(`${Math.round(_ * g)}%`, a, 182), r.globalAlpha = 1), i > .7 && (r.globalAlpha = Math.min(1, (i - .7) / .3), r.font = m.font, r.fillStyle = m.color, r.textAlign = "center", r.fillText("NCEs confirmed", a, 252), r.font = m.font, r.fillStyle = m.color, r.fillText(`${e ?? 0} of ${t ?? 0} NCEs are confirmed compensation events`, a, 282), r.globalAlpha = 1);
|
|
636
636
|
for (let e = 0; e <= 10; e++) {
|
|
637
|
-
let t = s + e / 10 *
|
|
638
|
-
if (
|
|
639
|
-
let n = a + Math.cos(t) * 138,
|
|
640
|
-
|
|
637
|
+
let t = s + e / 10 * l;
|
|
638
|
+
if (r.strokeStyle = h(u.bd, .5), r.lineWidth = e % 5 == 0 ? 1.5 : .8, r.beginPath(), r.moveTo(a + Math.cos(t) * 122, 220 + Math.sin(t) * 122), r.lineTo(a + Math.cos(t) * 128, 220 + Math.sin(t) * 128), r.stroke(), e % 5 == 0) {
|
|
639
|
+
let n = a + Math.cos(t) * 138, i = 220 + Math.sin(t) * 138;
|
|
640
|
+
r.font = f.font, r.fillStyle = f.color, r.textAlign = "center", r.fillText(`${e * 10}%`, n, i + 3);
|
|
641
641
|
}
|
|
642
642
|
}
|
|
643
|
-
|
|
643
|
+
d = requestAnimationFrame(p);
|
|
644
644
|
};
|
|
645
|
-
return
|
|
646
|
-
}, [
|
|
647
|
-
|
|
648
|
-
t,
|
|
649
|
-
r
|
|
650
|
-
]), /* @__PURE__ */ s("div", {
|
|
651
|
-
"data-testid": i,
|
|
645
|
+
return p(), () => cancelAnimationFrame(d);
|
|
646
|
+
}, [e, t]), /* @__PURE__ */ s("div", {
|
|
647
|
+
"data-testid": r,
|
|
652
648
|
style: {
|
|
653
649
|
position: "relative",
|
|
654
|
-
width:
|
|
655
|
-
height:
|
|
650
|
+
width: fe,
|
|
651
|
+
height: pe
|
|
656
652
|
},
|
|
657
653
|
children: /* @__PURE__ */ s("canvas", {
|
|
658
|
-
ref:
|
|
654
|
+
ref: i,
|
|
659
655
|
role: "img",
|
|
660
|
-
"aria-label": `Compensation event gauge — ${e}% of NCEs confirmed as compensation events`,
|
|
656
|
+
"aria-label": `Compensation event gauge — ${Math.round((e ?? 0) / (t || 1) * 100)}% of NCEs confirmed as compensation events`,
|
|
661
657
|
style: {
|
|
662
|
-
width:
|
|
663
|
-
height:
|
|
658
|
+
width: fe,
|
|
659
|
+
height: pe,
|
|
664
660
|
display: "block"
|
|
665
661
|
}
|
|
666
662
|
})
|
|
@@ -668,7 +664,7 @@ function he({ value: e, confirmed: t, total: r, "data-testid": i }) {
|
|
|
668
664
|
}
|
|
669
665
|
//#endregion
|
|
670
666
|
//#region src/canvas/useCanvasLoop.ts
|
|
671
|
-
function
|
|
667
|
+
function he(e, t, r, i, o = !0, s = {}) {
|
|
672
668
|
let c = a(0), { easing: l = D, durationFrames: u = 48 } = s;
|
|
673
669
|
n(() => {
|
|
674
670
|
let n = e.current;
|
|
@@ -700,7 +696,7 @@ function ge(e, t, r, i, o = !0, s = {}) {
|
|
|
700
696
|
}
|
|
701
697
|
//#endregion
|
|
702
698
|
//#region src/components/multiMetricConstellationChart/MultiMetricConstellationChart.tsx
|
|
703
|
-
var
|
|
699
|
+
var B = 780, ge = 234, _e = 130, ve = 52, ye = [
|
|
704
700
|
u.blue,
|
|
705
701
|
u.amber,
|
|
706
702
|
u.purple,
|
|
@@ -716,12 +712,12 @@ var z = 780, B = 234, _e = 130, ve = 52, ye = [
|
|
|
716
712
|
];
|
|
717
713
|
function Se({ items: e = [], "data-testid": t }) {
|
|
718
714
|
let n = a(null), r = a(/* @__PURE__ */ new Map()), { hoveredRef: o, tooltip: l, hitZonesRef: d } = w(n, {
|
|
719
|
-
width:
|
|
720
|
-
height:
|
|
715
|
+
width: B,
|
|
716
|
+
height: ge
|
|
721
717
|
}), p = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), g = i(() => {
|
|
722
718
|
let e = Math.max(...p.map((e) => e.base ?? 0)), t = Math.max(...p.map((e) => e.variation ?? 0));
|
|
723
719
|
return p.map((n, r) => {
|
|
724
|
-
let i =
|
|
720
|
+
let i = B * (.12 + r * .19), a = _e, o = Math.min(B * .075, ve), s = ye[r % ye.length], c = [
|
|
725
721
|
(n.base ?? 0) / (e || 1) * 100,
|
|
726
722
|
(n.variation ?? 0) / (t || 1) * 100,
|
|
727
723
|
n.percentage ?? 0
|
|
@@ -753,8 +749,8 @@ function Se({ items: e = [], "data-testid": t }) {
|
|
|
753
749
|
};
|
|
754
750
|
});
|
|
755
751
|
}, [p]);
|
|
756
|
-
return
|
|
757
|
-
N(r.current, o.current), d.current = [], b(e,
|
|
752
|
+
return he(n, B, ge, (e, t, n) => {
|
|
753
|
+
N(r.current, o.current), d.current = [], b(e, B, ge, n, 30), g.forEach((t, i) => {
|
|
758
754
|
let a = t.color, o = `constellation-${i}`, s = r.current.get(o) ?? 0;
|
|
759
755
|
e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 5, 0, Math.PI * 2), e.strokeStyle = h(u.bd, .08 + .08 * s), e.lineWidth = .5, e.stroke(), e.beginPath(), t.stars.forEach((t, n) => {
|
|
760
756
|
n === 0 ? e.moveTo(t.x, t.y) : e.lineTo(t.x, t.y);
|
|
@@ -774,31 +770,31 @@ function Se({ items: e = [], "data-testid": t }) {
|
|
|
774
770
|
sublabel: `${t.percentage ?? 0}% committed · scatter ${t.scatter.toFixed(1)}`,
|
|
775
771
|
color: a
|
|
776
772
|
});
|
|
777
|
-
}), e.font = m.font, e.textAlign = "center", e.textBaseline = "middle", e.fillStyle = m.color, e.fillText("▲ top = Base value · ▼▸ lower-right = Variations · ◂▼ lower-left = Commitment % · hover stars for details",
|
|
778
|
-
}, !0), g.length === 0 ? /* @__PURE__ */ s(
|
|
779
|
-
width:
|
|
780
|
-
height:
|
|
773
|
+
}), e.font = m.font, e.textAlign = "center", e.textBaseline = "middle", e.fillStyle = m.color, e.fillText("▲ top = Base value · ▼▸ lower-right = Variations · ◂▼ lower-left = Commitment % · hover stars for details", B / 2, ge - 14), x(e, B, ge, n, .012);
|
|
774
|
+
}, !0), g.length === 0 ? /* @__PURE__ */ s(L, {
|
|
775
|
+
width: B,
|
|
776
|
+
height: ge,
|
|
781
777
|
"data-testid": t
|
|
782
778
|
}) : /* @__PURE__ */ c("div", {
|
|
783
779
|
"data-testid": t,
|
|
784
780
|
style: {
|
|
785
781
|
position: "relative",
|
|
786
|
-
width:
|
|
787
|
-
height:
|
|
782
|
+
width: B,
|
|
783
|
+
height: ge
|
|
788
784
|
},
|
|
789
785
|
children: [/* @__PURE__ */ s("canvas", {
|
|
790
786
|
ref: n,
|
|
791
787
|
role: "img",
|
|
792
788
|
"aria-label": "Contract value breakdown per contractor — multi-KPI constellation chart",
|
|
793
789
|
style: {
|
|
794
|
-
width:
|
|
795
|
-
height:
|
|
790
|
+
width: B,
|
|
791
|
+
height: ge,
|
|
796
792
|
display: "block"
|
|
797
793
|
}
|
|
798
794
|
}), /* @__PURE__ */ s(C, {
|
|
799
795
|
...l,
|
|
800
|
-
parentW:
|
|
801
|
-
parentH:
|
|
796
|
+
parentW: B,
|
|
797
|
+
parentH: ge
|
|
802
798
|
})]
|
|
803
799
|
});
|
|
804
800
|
}
|
|
@@ -830,7 +826,7 @@ function Ae({ data: e, "data-testid": t }) {
|
|
|
830
826
|
width: Ce,
|
|
831
827
|
height: D
|
|
832
828
|
});
|
|
833
|
-
return
|
|
829
|
+
return he(n, Ce, D, (e, t) => {
|
|
834
830
|
N(r.current, j.current), F.current = [], b.forEach((n, i) => {
|
|
835
831
|
let a = Ee[i % Ee.length], o = M(t, i, x, O), s = V.top + i * (H + 8), c = V.left + De, l = r.current.get(n.id) ?? 0, d = Math.max(n.base ?? 0, 0), m = Math.max(n.total ?? 0, 0), g = d / S * k * o, _ = m / S * k * o, v = _ - g;
|
|
836
832
|
e.font = f.font, e.fillStyle = l > 0 ? a : f.color, e.textAlign = "right", e.textBaseline = "middle", e.fillText(Oe(e, n.name ?? "", De - 16), c - 8, s + H / 2), e.fillStyle = h(u.bd, .25), e.beginPath(), e.roundRect(c, s, k, H, 4), e.fill(), g > 0 && (l > 0 && y(e, c + g / 2, s + H / 2, g * .3, a, .1 * l), e.fillStyle = h(a, .5 + l * .15), e.beginPath(), e.roundRect(c, s, g, H, 4), e.fill()), v > 2 && (e.fillStyle = h(a, .22 + l * .08), e.beginPath(), e.roundRect(c + g, s, v, H, [
|
|
@@ -847,7 +843,7 @@ function Ae({ data: e, "data-testid": t }) {
|
|
|
847
843
|
});
|
|
848
844
|
let n = D - 14;
|
|
849
845
|
e.textBaseline = "middle", e.font = m.font, e.textAlign = "left", e.fillStyle = h(u.blue, .5), e.beginPath(), e.roundRect(V.left + De, n - 3, 14, 6, 2), e.fill(), e.fillStyle = m.color, e.fillText("base value", V.left + De + 18, n), e.fillStyle = h(u.blue, .22), e.beginPath(), e.roundRect(V.left + De + 94, n - 3, 14, 6, 2), e.fill(), e.setLineDash([2, 3]), e.strokeStyle = h(u.blue, .5), e.lineWidth = .5, e.beginPath(), e.moveTo(V.left + De + 101, n - 3), e.lineTo(V.left + De + 101, n + 3), e.stroke(), e.setLineDash([]), e.fillStyle = m.color, e.fillText("approved variations", V.left + De + 112, n), e.font = m.font, e.textAlign = "right", e.fillStyle = m.color, e.fillText(`Portfolio: ${ke(g?.total ?? 0)}`, Ce - 8, n);
|
|
850
|
-
}, !0, { easing: O }), A ? /* @__PURE__ */ s(
|
|
846
|
+
}, !0, { easing: O }), A ? /* @__PURE__ */ s(L, {
|
|
851
847
|
width: Ce,
|
|
852
848
|
height: we,
|
|
853
849
|
message: "No contract data available",
|
|
@@ -877,7 +873,7 @@ function Ae({ data: e, "data-testid": t }) {
|
|
|
877
873
|
})]
|
|
878
874
|
}), _.length > Te && /* @__PURE__ */ s("div", {
|
|
879
875
|
style: { marginTop: 8 },
|
|
880
|
-
children: /* @__PURE__ */ s(
|
|
876
|
+
children: /* @__PURE__ */ s(ie, {
|
|
881
877
|
expanded: i,
|
|
882
878
|
onToggle: () => l((e) => !e)
|
|
883
879
|
})
|
|
@@ -885,61 +881,96 @@ function Ae({ data: e, "data-testid": t }) {
|
|
|
885
881
|
});
|
|
886
882
|
}
|
|
887
883
|
//#endregion
|
|
884
|
+
//#region src/utils/numberFormat.ts
|
|
885
|
+
var je = [
|
|
886
|
+
{
|
|
887
|
+
value: 0xe8d4a51000,
|
|
888
|
+
suffix: "T",
|
|
889
|
+
divisor: 0xe8d4a51000
|
|
890
|
+
},
|
|
891
|
+
{
|
|
892
|
+
value: 1e9,
|
|
893
|
+
suffix: "B",
|
|
894
|
+
divisor: 1e9
|
|
895
|
+
},
|
|
896
|
+
{
|
|
897
|
+
value: 1e6,
|
|
898
|
+
suffix: "M",
|
|
899
|
+
divisor: 1e6
|
|
900
|
+
},
|
|
901
|
+
{
|
|
902
|
+
value: 1e3,
|
|
903
|
+
suffix: "K",
|
|
904
|
+
divisor: 1e3
|
|
905
|
+
}
|
|
906
|
+
];
|
|
907
|
+
function U(e, t = 1) {
|
|
908
|
+
let n = Math.abs(e), r = e < 0 ? "-" : "";
|
|
909
|
+
for (let e of je) if (n >= e.value) return `${r}${(n / e.divisor).toFixed(t)}${e.suffix}`;
|
|
910
|
+
return `${r}${n.toFixed(0)}`;
|
|
911
|
+
}
|
|
912
|
+
//#endregion
|
|
888
913
|
//#region src/components/rankedCardLeaderboard/RankedCardLeaderboard.tsx
|
|
889
|
-
var
|
|
914
|
+
var Me = 780, W = 240, Ne = 12, Pe = 10, Fe = 5, Ie = (Me - 2 * Ne - (Fe - 1) * Pe) / Fe, Le = [
|
|
890
915
|
"Highest exposure",
|
|
891
916
|
"Elevated risk",
|
|
892
917
|
"Moderate exposure",
|
|
893
918
|
"Moderate exposure",
|
|
894
919
|
"Low exposure"
|
|
895
920
|
];
|
|
896
|
-
function
|
|
897
|
-
let r = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), m = [...i(() => e.filter((e) => typeof e == "object" && !!e), [e])].sort((e, t) => (t.count ?? 0) - (e.count ?? 0)).slice(0, 5), g = m.reduce((e, t) => e + (t.count ?? 0), 0), _ = Math.min(
|
|
921
|
+
function Re({ items: e = [], "data-testid": t }) {
|
|
922
|
+
let r = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), m = [...i(() => e.filter((e) => typeof e == "object" && !!e), [e])].sort((e, t) => (t.count ?? 0) - (e.count ?? 0)).slice(0, 5), g = m.reduce((e, t) => e + (t.count ?? 0), 0), _ = Math.min(Fe, m.length), b = _ > 0 ? 2 * Ne + _ * Ie + (_ - 1) * Pe : Me, { hoveredRef: S, tooltip: T, hitZonesRef: D } = w(r, {
|
|
898
923
|
width: b,
|
|
899
|
-
height:
|
|
924
|
+
height: W
|
|
900
925
|
});
|
|
901
926
|
return n(() => {
|
|
902
927
|
let e = r.current;
|
|
903
928
|
if (!e) return;
|
|
904
|
-
let t = v(e, b,
|
|
929
|
+
let t = v(e, b, W);
|
|
905
930
|
o.current = 0;
|
|
906
|
-
let n =
|
|
931
|
+
let n = Ie, i = W * .84, a = W * .08, s = Ne, c, _ = () => {
|
|
907
932
|
o.current++;
|
|
908
933
|
let e = o.current;
|
|
909
|
-
t.clearRect(0, 0, b,
|
|
934
|
+
t.clearRect(0, 0, b, W), t.letterSpacing = f.letterSpacing, D.current = [], l.current.forEach((e, t) => {
|
|
910
935
|
let n = t === S.current ? 1 : 0, r = e + (n - e) * .12;
|
|
911
936
|
Math.abs(r - n) < .005 ? n === 0 ? l.current.delete(t) : l.current.set(t, 1) : l.current.set(t, r);
|
|
912
937
|
}), S.current && !l.current.has(S.current) && l.current.set(S.current, 0), m.forEach((r, o) => {
|
|
913
|
-
let c = o === 0, m = o === 0 ? u.red : o === 1 ? u.amber : d[o % d.length], _ = s + o * (n +
|
|
938
|
+
let c = o === 0, m = o === 0 ? u.red : o === 1 ? u.amber : d[o % d.length], _ = s + o * (n + Pe), v = l.current.get(r.id) ?? 0, b = v * 8, x = _ - b / 2, S = n + b, C = c ? j(e, .04, 3e-4) * .06 + .06 : 0;
|
|
914
939
|
t.fillStyle = h(m, .08 + v * .07), t.beginPath(), t.roundRect(x, a, S, i, 6), t.fill(), t.strokeStyle = h(m, .2 + v * .4 + C), t.lineWidth = c ? 1.5 : 1, t.stroke(), (v > .01 || c) && y(t, x + S / 2, a + i / 2, S * .55, m, C + v * .14), t.font = p.font, t.textAlign = "left", t.textBaseline = "top", t.fillStyle = h(m, .5 + v * .35), t.fillText(`#${o + 1}`, x + 7, a + 6);
|
|
915
940
|
let w = Math.min(n * .28, i * .32, 72), T = x + S / 2, O = a + i * .38, k = t.createRadialGradient(T, O - w * .2, 0, T, O, w);
|
|
916
|
-
k.addColorStop(0, h(m, .5 + v * .2)), k.addColorStop(1, h(m, .2 + v * .1)), t.beginPath(), t.arc(T, O, w, 0, Math.PI * 2), t.fillStyle = k, t.fill(), t.strokeStyle = h(m, .4 + v * .3), t.lineWidth = 1, t.stroke(), t.font = p.font, t.textAlign = "center", t.textBaseline = "middle", t.fillStyle = h(u.t1, .9)
|
|
917
|
-
let A = r.
|
|
918
|
-
|
|
919
|
-
|
|
941
|
+
k.addColorStop(0, h(m, .5 + v * .2)), k.addColorStop(1, h(m, .2 + v * .1)), t.beginPath(), t.arc(T, O, w, 0, Math.PI * 2), t.fillStyle = k, t.fill(), t.strokeStyle = h(m, .4 + v * .3), t.lineWidth = 1, t.stroke(), t.font = p.font, t.textAlign = "center", t.textBaseline = "middle", t.fillStyle = h(u.t1, .9);
|
|
942
|
+
let A = r.abbreviation ?? r.name ?? "", M = w * 1.7, N = A;
|
|
943
|
+
for (; t.measureText(N).width > M && N.length > 1;) N = N.slice(0, -1);
|
|
944
|
+
N !== A && (N = N.slice(0, -1) + "…"), t.fillText(N, T, O);
|
|
945
|
+
let P = U(r.count ?? 0), F = r.label ?? P;
|
|
946
|
+
t.font = p.font, t.textBaseline = "alphabetic", t.fillStyle = h(m, .9 + v * .1);
|
|
947
|
+
let ee = S - 16, I = F;
|
|
948
|
+
for (; t.measureText(I).width > ee && I.length > 1;) I = I.slice(0, -1);
|
|
949
|
+
I !== F && (I = I.slice(0, -1) + "…"), t.fillText(I, T, a + i * .74), r.label && (t.font = f.font, t.fillStyle = h(m, .7 + v * .2), t.fillText(P, T, a + i * .88));
|
|
950
|
+
let te = Math.round((r.count ?? 0) / (g || 1) * 100), ne = Le[o] ?? "Low exposure";
|
|
920
951
|
E(D.current, r.id, _, a, n, i, {
|
|
921
952
|
label: r.name,
|
|
922
|
-
value: `${
|
|
923
|
-
sublabel: `Rank #${o + 1} · ${
|
|
953
|
+
value: `${F} open · ${te}% of total`,
|
|
954
|
+
sublabel: `Rank #${o + 1} · ${ne}`,
|
|
924
955
|
color: m
|
|
925
956
|
});
|
|
926
|
-
}), x(t, b,
|
|
957
|
+
}), x(t, b, W, e, .015), c = requestAnimationFrame(_);
|
|
927
958
|
};
|
|
928
959
|
return _(), () => cancelAnimationFrame(c);
|
|
929
960
|
}, [
|
|
930
961
|
m,
|
|
931
962
|
g,
|
|
932
963
|
b
|
|
933
|
-
]), m.length === 0 ? /* @__PURE__ */ s(
|
|
964
|
+
]), m.length === 0 ? /* @__PURE__ */ s(L, {
|
|
934
965
|
width: b,
|
|
935
|
-
height:
|
|
966
|
+
height: W,
|
|
936
967
|
"data-testid": t
|
|
937
968
|
}) : /* @__PURE__ */ c("div", {
|
|
938
969
|
"data-testid": t,
|
|
939
970
|
style: {
|
|
940
971
|
position: "relative",
|
|
941
972
|
width: b,
|
|
942
|
-
height:
|
|
973
|
+
height: W
|
|
943
974
|
},
|
|
944
975
|
children: [/* @__PURE__ */ s("canvas", {
|
|
945
976
|
ref: r,
|
|
@@ -947,37 +978,37 @@ function Le({ items: e = [], "data-testid": t }) {
|
|
|
947
978
|
"aria-label": "Contractor rank — open EW count per contractor",
|
|
948
979
|
style: {
|
|
949
980
|
width: b,
|
|
950
|
-
height:
|
|
981
|
+
height: W,
|
|
951
982
|
display: "block",
|
|
952
983
|
borderRadius: 8
|
|
953
984
|
}
|
|
954
985
|
}), /* @__PURE__ */ s(C, {
|
|
955
986
|
...T,
|
|
956
987
|
parentW: b,
|
|
957
|
-
parentH:
|
|
988
|
+
parentH: W
|
|
958
989
|
})]
|
|
959
990
|
});
|
|
960
991
|
}
|
|
961
992
|
//#endregion
|
|
962
993
|
//#region src/components/dotMatrixChart/DotMatrixChart.tsx
|
|
963
|
-
var
|
|
964
|
-
function
|
|
994
|
+
var G = 680, K = 260;
|
|
995
|
+
function ze({ items: e = [], "data-testid": t }) {
|
|
965
996
|
let r = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), { hoveredRef: d, tooltip: p, hitZonesRef: m } = w(r, {
|
|
966
|
-
width:
|
|
967
|
-
height:
|
|
997
|
+
width: G,
|
|
998
|
+
height: K
|
|
968
999
|
}), g = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
969
1000
|
return n(() => {
|
|
970
1001
|
let e = r.current;
|
|
971
1002
|
if (!e) return;
|
|
972
|
-
let t = v(e,
|
|
1003
|
+
let t = v(e, G, K);
|
|
973
1004
|
o.current = 0;
|
|
974
|
-
let n = g.length, i = Math.max(...g.map((e) => e.count), 1), a = i, s =
|
|
1005
|
+
let n = g.length, i = Math.max(...g.map((e) => e.count), 1), a = i, s = G * .05, c = K * .1, p = G * .9 / n, _ = K * .7 / a, S = g.reduce((e, t) => e + t.count, 0), C, w = () => {
|
|
975
1006
|
o.current++;
|
|
976
1007
|
let e = o.current;
|
|
977
|
-
t.clearRect(0, 0,
|
|
1008
|
+
t.clearRect(0, 0, G, K), m.current = [], l.current.forEach((e, t) => {
|
|
978
1009
|
let n = t === d.current ? 1 : 0, r = e + (n - e) * .12;
|
|
979
1010
|
Math.abs(r - n) < .005 ? n === 0 ? l.current.delete(t) : l.current.set(t, 1) : l.current.set(t, r);
|
|
980
|
-
}), d.current && !l.current.has(d.current) && l.current.set(d.current, 0), b(t,
|
|
1011
|
+
}), d.current && !l.current.has(d.current) && l.current.set(d.current, 0), b(t, G, K, e, 40, h(u.blue, .04)), g.forEach((n, r) => {
|
|
981
1012
|
let o = n.count === i, d = u.blue, g = l.current.get(`${n.category}-col`) ?? 0;
|
|
982
1013
|
for (let u = 0; u < a; u++) {
|
|
983
1014
|
let a = s + r * p + p / 2, f = c + u * _ + _ / 2, v = Math.min(p, _) * .38;
|
|
@@ -995,40 +1026,40 @@ function Re({ items: e = [], "data-testid": t }) {
|
|
|
995
1026
|
}
|
|
996
1027
|
let v = c + a * _ + 16;
|
|
997
1028
|
t.font = f.font, t.textAlign = "center", t.textBaseline = "alphabetic", t.fillStyle = o ? u.blue : h(u.t2, .65), t.fillText(n.category, s + r * p + p / 2, v);
|
|
998
|
-
}), x(t,
|
|
1029
|
+
}), x(t, G, K, e, .015), C = requestAnimationFrame(w);
|
|
999
1030
|
};
|
|
1000
1031
|
return w(), () => cancelAnimationFrame(C);
|
|
1001
|
-
}, [g]), g.length === 0 ? /* @__PURE__ */ s(
|
|
1002
|
-
width:
|
|
1003
|
-
height:
|
|
1032
|
+
}, [g]), g.length === 0 ? /* @__PURE__ */ s(L, {
|
|
1033
|
+
width: G,
|
|
1034
|
+
height: K,
|
|
1004
1035
|
"data-testid": t
|
|
1005
1036
|
}) : /* @__PURE__ */ c("div", {
|
|
1006
1037
|
"data-testid": t,
|
|
1007
1038
|
style: {
|
|
1008
1039
|
position: "relative",
|
|
1009
|
-
width:
|
|
1010
|
-
height:
|
|
1040
|
+
width: G,
|
|
1041
|
+
height: K
|
|
1011
1042
|
},
|
|
1012
1043
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1013
1044
|
ref: r,
|
|
1014
1045
|
role: "img",
|
|
1015
1046
|
"aria-label": "Early Warning count by category — breathing dot grid",
|
|
1016
1047
|
style: {
|
|
1017
|
-
width:
|
|
1018
|
-
height:
|
|
1048
|
+
width: G,
|
|
1049
|
+
height: K,
|
|
1019
1050
|
display: "block",
|
|
1020
1051
|
borderRadius: 8
|
|
1021
1052
|
}
|
|
1022
1053
|
}), /* @__PURE__ */ s(C, {
|
|
1023
1054
|
...p,
|
|
1024
|
-
parentW:
|
|
1025
|
-
parentH:
|
|
1055
|
+
parentW: G,
|
|
1056
|
+
parentH: K
|
|
1026
1057
|
})]
|
|
1027
1058
|
});
|
|
1028
1059
|
}
|
|
1029
1060
|
//#endregion
|
|
1030
1061
|
//#region src/components/lineChart/LineChart.tsx
|
|
1031
|
-
function
|
|
1062
|
+
function Be({ rows: e = [], className: t, colors: n }) {
|
|
1032
1063
|
return /* @__PURE__ */ s(ee, {
|
|
1033
1064
|
rows: e,
|
|
1034
1065
|
variant: "line",
|
|
@@ -1038,7 +1069,7 @@ function ze({ rows: e = [], className: t, colors: n }) {
|
|
|
1038
1069
|
}
|
|
1039
1070
|
//#endregion
|
|
1040
1071
|
//#region src/components/constants.ts
|
|
1041
|
-
var
|
|
1072
|
+
var Ve = [
|
|
1042
1073
|
"#4C93D9",
|
|
1043
1074
|
"#5DA537",
|
|
1044
1075
|
"#F3862C",
|
|
@@ -1046,7 +1077,7 @@ var Be = [
|
|
|
1046
1077
|
"#A0B724",
|
|
1047
1078
|
"#EEBF3B",
|
|
1048
1079
|
"#3C45D1"
|
|
1049
|
-
],
|
|
1080
|
+
], He = {
|
|
1050
1081
|
nodes: [
|
|
1051
1082
|
{
|
|
1052
1083
|
id: "supplier-x",
|
|
@@ -1089,8 +1120,8 @@ var Be = [
|
|
|
1089
1120
|
};
|
|
1090
1121
|
//#endregion
|
|
1091
1122
|
//#region src/components/miniBars/MiniBars.tsx
|
|
1092
|
-
function
|
|
1093
|
-
let r = n?.slices ??
|
|
1123
|
+
function Ue({ rows: e = [], className: t, colors: n }) {
|
|
1124
|
+
let r = n?.slices ?? Ve;
|
|
1094
1125
|
return /* @__PURE__ */ s("div", {
|
|
1095
1126
|
className: ["d3-mini-bars", t].filter(Boolean).join(" "),
|
|
1096
1127
|
children: e.map(([e, t, n], i) => /* @__PURE__ */ c("div", {
|
|
@@ -1116,7 +1147,7 @@ function He({ rows: e = [], className: t, colors: n }) {
|
|
|
1116
1147
|
width: Math.max(0, Math.min(100, t)),
|
|
1117
1148
|
height: "12",
|
|
1118
1149
|
rx: "6",
|
|
1119
|
-
className: `d3-mini-fill tone-${i %
|
|
1150
|
+
className: `d3-mini-fill tone-${i % Ve.length}`,
|
|
1120
1151
|
fill: r[i % r.length]
|
|
1121
1152
|
})]
|
|
1122
1153
|
})
|
|
@@ -1127,39 +1158,10 @@ function He({ rows: e = [], className: t, colors: n }) {
|
|
|
1127
1158
|
});
|
|
1128
1159
|
}
|
|
1129
1160
|
//#endregion
|
|
1130
|
-
//#region src/utils/numberFormat.ts
|
|
1131
|
-
var Ue = [
|
|
1132
|
-
{
|
|
1133
|
-
value: 0xe8d4a51000,
|
|
1134
|
-
suffix: "T",
|
|
1135
|
-
divisor: 0xe8d4a51000
|
|
1136
|
-
},
|
|
1137
|
-
{
|
|
1138
|
-
value: 1e9,
|
|
1139
|
-
suffix: "B",
|
|
1140
|
-
divisor: 1e9
|
|
1141
|
-
},
|
|
1142
|
-
{
|
|
1143
|
-
value: 1e6,
|
|
1144
|
-
suffix: "M",
|
|
1145
|
-
divisor: 1e6
|
|
1146
|
-
},
|
|
1147
|
-
{
|
|
1148
|
-
value: 1e3,
|
|
1149
|
-
suffix: "K",
|
|
1150
|
-
divisor: 1e3
|
|
1151
|
-
}
|
|
1152
|
-
];
|
|
1153
|
-
function We(e, t = 1) {
|
|
1154
|
-
let n = Math.abs(e), r = e < 0 ? "-" : "";
|
|
1155
|
-
for (let e of Ue) if (n >= e.value) return `${r}${(n / e.divisor).toFixed(t)}${e.suffix}`;
|
|
1156
|
-
return `${r}${n.toFixed(0)}`;
|
|
1157
|
-
}
|
|
1158
|
-
//#endregion
|
|
1159
1161
|
//#region src/components/radialFanTreeChart/RadialFanTreeChart.tsx
|
|
1160
|
-
var
|
|
1161
|
-
function
|
|
1162
|
-
let m = a(null), g = a(/* @__PURE__ */ new Map()), _ = a(0), b = i(() => r.filter((e) => typeof e == "object" && !!e), [r]), x = i(() => Math.max(
|
|
1162
|
+
var We = 800, Ge = 320, Ke = 60, qe = 28;
|
|
1163
|
+
function Je({ total: e = 0, totalLabel: t, items: r = [], width: o = We, "data-testid": l }) {
|
|
1164
|
+
let m = a(null), g = a(/* @__PURE__ */ new Map()), _ = a(0), b = i(() => r.filter((e) => typeof e == "object" && !!e), [r]), x = i(() => Math.max(Ge, Ke + Math.max(0, b.length - 1) * qe), [b.length]), { hoveredRef: S, tooltip: E, hitZonesRef: O } = w(m, {
|
|
1163
1165
|
width: o,
|
|
1164
1166
|
height: x
|
|
1165
1167
|
});
|
|
@@ -1188,24 +1190,32 @@ function Ye({ total: e = 0, totalLabel: t, items: r = [], width: o = Ge, "data-t
|
|
|
1188
1190
|
if (r.strokeStyle = h(o, v > 0 ? .8 : .45), r.lineWidth = x * (v > 0 ? 1.3 : 1), r.stroke(), m > .85) {
|
|
1189
1191
|
let n = Math.min(1, (m - .85) / .15), i = 4 + (t.count ?? 0) / s * 12;
|
|
1190
1192
|
y(r, _.x, _.y, i * 2.5, o, (.25 + v * .2) * n), r.beginPath(), r.arc(_.x, _.y, i * n, 0, Math.PI * 2), r.fillStyle = h(o, (.7 + v * .2) * n), r.fill();
|
|
1191
|
-
let a =
|
|
1193
|
+
let a = U(t.count ?? 0);
|
|
1192
1194
|
T(O.current, t.id, _.x, _.y, i + 8, {
|
|
1193
1195
|
label: t.name,
|
|
1194
1196
|
value: `${a} NCEs raised`,
|
|
1195
1197
|
sublabel: `${Math.round((t.count ?? 0) / (e || 1) * 100)}% of all NCEs`,
|
|
1196
1198
|
color: o
|
|
1197
1199
|
}), r.globalAlpha = n, r.font = f.font, r.textAlign = "left";
|
|
1198
|
-
let c = t.abbreviation ?? t.name?.slice(0, 6) ?? "", l = ` ${
|
|
1200
|
+
let c = t.abbreviation ?? t.name?.slice(0, 6) ?? "", l = ` ${U(t.count ?? 0)}`, d = _.x + i + 6, g = _.y + 4;
|
|
1199
1201
|
r.fillStyle = v > 0 ? o : h(u.t2, .85), r.fillText(c, d, g);
|
|
1200
1202
|
let b = r.measureText(c).width;
|
|
1201
1203
|
r.font = p.font, r.fillStyle = v > 0 ? o : u.t1, r.fillText(l, d + b, g), r.globalAlpha = 1;
|
|
1202
1204
|
}
|
|
1203
1205
|
}), r.beginPath(), r.arc(88, i, 32 * c, 0, Math.PI * 2), r.fillStyle = u.bgL, r.fill(), r.strokeStyle = h(u.blue, .6 * c), r.lineWidth = 2, r.stroke(), c > .4) {
|
|
1204
|
-
r.globalAlpha = Math.min(1, (c - .4) / .4)
|
|
1205
|
-
let n = t ??
|
|
1206
|
-
r.
|
|
1206
|
+
r.globalAlpha = Math.min(1, (c - .4) / .4);
|
|
1207
|
+
let n = t ?? U(e, 0);
|
|
1208
|
+
r.font = "500 16px 'Satoshi Variable', 'DM Sans', sans-serif";
|
|
1209
|
+
let a = n;
|
|
1210
|
+
for (; r.measureText(a).width > 54.4 && a.length > 1;) a = a.slice(0, -1);
|
|
1211
|
+
a !== n && (a = a.slice(0, -1) + "…"), r.fillStyle = u.t1, r.textAlign = "center", r.textBaseline = "middle", r.fillText(a, 88, i), r.globalAlpha = 1;
|
|
1207
1212
|
}
|
|
1208
|
-
|
|
1213
|
+
T(O.current, "__root__", 88, i, 32, {
|
|
1214
|
+
label: "Total NCEs",
|
|
1215
|
+
value: t ?? U(e, 0),
|
|
1216
|
+
sublabel: `across ${b.length} contractors`,
|
|
1217
|
+
color: u.blue
|
|
1218
|
+
}), C = requestAnimationFrame(w);
|
|
1209
1219
|
};
|
|
1210
1220
|
return w(), () => cancelAnimationFrame(C);
|
|
1211
1221
|
}, [
|
|
@@ -1214,9 +1224,9 @@ function Ye({ total: e = 0, totalLabel: t, items: r = [], width: o = Ge, "data-t
|
|
|
1214
1224
|
b,
|
|
1215
1225
|
x,
|
|
1216
1226
|
o
|
|
1217
|
-
]), b.length === 0 ? /* @__PURE__ */ s(
|
|
1227
|
+
]), b.length === 0 ? /* @__PURE__ */ s(L, {
|
|
1218
1228
|
width: o,
|
|
1219
|
-
height:
|
|
1229
|
+
height: Ge,
|
|
1220
1230
|
"data-testid": l
|
|
1221
1231
|
}) : /* @__PURE__ */ c("div", {
|
|
1222
1232
|
"data-testid": l,
|
|
@@ -1243,21 +1253,21 @@ function Ye({ total: e = 0, totalLabel: t, items: r = [], width: o = Ge, "data-t
|
|
|
1243
1253
|
}
|
|
1244
1254
|
//#endregion
|
|
1245
1255
|
//#region src/components/pieChart/PieChart.tsx
|
|
1246
|
-
var
|
|
1247
|
-
function
|
|
1256
|
+
var Ye = 192, Xe = Ye, Ze = Ye + 80;
|
|
1257
|
+
function Qe({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
1248
1258
|
let o = a(null), f = a(/* @__PURE__ */ new Map()), p = a(0), m = i?.slices ?? d, { hoveredRef: g, tooltip: b, hitZonesRef: x } = w(o, {
|
|
1249
|
-
width:
|
|
1250
|
-
height:
|
|
1259
|
+
width: Xe,
|
|
1260
|
+
height: Ze
|
|
1251
1261
|
});
|
|
1252
1262
|
return n(() => {
|
|
1253
1263
|
let n = o.current;
|
|
1254
1264
|
if (!n) return;
|
|
1255
|
-
let r = v(n,
|
|
1265
|
+
let r = v(n, Xe, Ze);
|
|
1256
1266
|
p.current = 0;
|
|
1257
|
-
let i =
|
|
1267
|
+
let i = Xe / 2, a = Ye / 2, s = Ye * .4, c = t === "donut" ? Ye * .21 : 0, l = e.reduce((e, t) => e + (t.pricing ?? 0), 0) || 1, d, b = () => {
|
|
1258
1268
|
p.current++;
|
|
1259
1269
|
let n = p.current;
|
|
1260
|
-
r.clearRect(0, 0,
|
|
1270
|
+
r.clearRect(0, 0, Xe, Ze);
|
|
1261
1271
|
let o = 1 - (1 - Math.min(n / 48, 1)) ** 3;
|
|
1262
1272
|
N(f.current, g.current), x.current = [];
|
|
1263
1273
|
let v = -Math.PI / 2;
|
|
@@ -1271,10 +1281,10 @@ function $e({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
|
1271
1281
|
let O = j(n, .03, 3e-4), k = s + b * 6 + (b > 0 ? O * 2 : 0);
|
|
1272
1282
|
r.beginPath(), r.moveTo(i + Math.cos(v) * c, a + Math.sin(v) * c), r.arc(i, a, k, v, g), c > 0 ? r.arc(i, a, c, g, v, !0) : r.lineTo(i, a), r.closePath(), r.fillStyle = h(_, .7 + b * .2), r.fill(), r.strokeStyle = h(u.bg, .8), r.lineWidth = 1.5, r.stroke(), v = g;
|
|
1273
1283
|
}), t === "donut" && e.length > 0 && y(r, i, a, c * .8, u.blue, .06);
|
|
1274
|
-
let S =
|
|
1284
|
+
let S = Ye + 12;
|
|
1275
1285
|
e.forEach((e, t) => {
|
|
1276
1286
|
let n = m[t % m.length], i = (e.pricing ?? 0) / l, a = f.current.get(e.id ?? `sl-${t}`) ?? 0, o = S + t * 18;
|
|
1277
|
-
r.beginPath(), r.arc(8, o, 4, 0, Math.PI * 2), r.fillStyle = h(n, .8 + a * .2), r.fill(), r.font = "9px 'JetBrains Mono', monospace", r.fillStyle = h(u.t2, .7 + a * .2), r.textAlign = "left", r.fillText(e.vendor, 18, o + 3.5), r.font = "bold 9px 'JetBrains Mono', monospace", r.fillStyle = _(u.t3, n, a), r.textAlign = "right", r.fillText(`${e.pricing ?? 0} (${Math.round(i * 100)}%)`,
|
|
1287
|
+
r.beginPath(), r.arc(8, o, 4, 0, Math.PI * 2), r.fillStyle = h(n, .8 + a * .2), r.fill(), r.font = "9px 'JetBrains Mono', monospace", r.fillStyle = h(u.t2, .7 + a * .2), r.textAlign = "left", r.fillText(e.vendor, 18, o + 3.5), r.font = "bold 9px 'JetBrains Mono', monospace", r.fillStyle = _(u.t3, n, a), r.textAlign = "right", r.fillText(`${e.pricing ?? 0} (${Math.round(i * 100)}%)`, Xe - 4, o + 3.5);
|
|
1278
1288
|
}), d = requestAnimationFrame(b);
|
|
1279
1289
|
};
|
|
1280
1290
|
return b(), () => cancelAnimationFrame(d);
|
|
@@ -1288,30 +1298,30 @@ function $e({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
|
1288
1298
|
children: /* @__PURE__ */ c("div", {
|
|
1289
1299
|
style: {
|
|
1290
1300
|
position: "relative",
|
|
1291
|
-
width:
|
|
1292
|
-
height:
|
|
1301
|
+
width: Xe,
|
|
1302
|
+
height: Ze
|
|
1293
1303
|
},
|
|
1294
1304
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1295
1305
|
ref: o,
|
|
1296
1306
|
role: "img",
|
|
1297
1307
|
"aria-label": `${t} chart`,
|
|
1298
1308
|
style: {
|
|
1299
|
-
width:
|
|
1300
|
-
height:
|
|
1309
|
+
width: Xe,
|
|
1310
|
+
height: Ze,
|
|
1301
1311
|
display: "block",
|
|
1302
1312
|
borderRadius: 8
|
|
1303
1313
|
}
|
|
1304
1314
|
}), /* @__PURE__ */ s(C, {
|
|
1305
1315
|
...b,
|
|
1306
|
-
parentW:
|
|
1307
|
-
parentH:
|
|
1316
|
+
parentW: Xe,
|
|
1317
|
+
parentH: Ze
|
|
1308
1318
|
})]
|
|
1309
1319
|
})
|
|
1310
1320
|
});
|
|
1311
1321
|
}
|
|
1312
1322
|
//#endregion
|
|
1313
1323
|
//#region src/components/sankey/SankeySvg.tsx
|
|
1314
|
-
function
|
|
1324
|
+
function $e(e, t, n, r) {
|
|
1315
1325
|
let i = new Set(t.map((e) => e.source)), a = new Set(t.map((e) => e.target)), o = /* @__PURE__ */ new Map(), s = [];
|
|
1316
1326
|
for (e.forEach((e) => {
|
|
1317
1327
|
i.has(e.id) && !a.has(e.id) && s.push({
|
|
@@ -1356,13 +1366,13 @@ function et(e, t, n, r) {
|
|
|
1356
1366
|
});
|
|
1357
1367
|
}), f;
|
|
1358
1368
|
}
|
|
1359
|
-
function
|
|
1360
|
-
let _ = a(null), b = a(/* @__PURE__ */ new Map()), S = a(0), D = a([]), O = g?.nodes ?? d, k = g?.links ?? u.bd, A = g?.activeLinks ?? u.blue, M = g?.activeNodes ?? u.blue, P = i(() =>
|
|
1369
|
+
function et({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f, selectedEntity: p, className: m, colors: g }) {
|
|
1370
|
+
let _ = a(null), b = a(/* @__PURE__ */ new Map()), S = a(0), D = a([]), O = g?.nodes ?? d, k = g?.links ?? u.bd, A = g?.activeLinks ?? u.blue, M = g?.activeNodes ?? u.blue, P = i(() => $e(e, t, r, o), [
|
|
1361
1371
|
e,
|
|
1362
1372
|
t,
|
|
1363
1373
|
r,
|
|
1364
1374
|
o
|
|
1365
|
-
]), { hoveredRef: F, tooltip: ee, hitZonesRef:
|
|
1375
|
+
]), { hoveredRef: F, tooltip: ee, hitZonesRef: I } = w(_, {
|
|
1366
1376
|
width: r,
|
|
1367
1377
|
height: o
|
|
1368
1378
|
});
|
|
@@ -1376,7 +1386,7 @@ function tt({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f,
|
|
|
1376
1386
|
let n = S.current;
|
|
1377
1387
|
i.clearRect(0, 0, r, o);
|
|
1378
1388
|
let l = 1 - (1 - Math.min(n / 56, 1)) ** 3;
|
|
1379
|
-
N(b.current, F.current),
|
|
1389
|
+
N(b.current, F.current), I.current = [], t.forEach((e, t) => {
|
|
1380
1390
|
let r = P.get(e.source), o = P.get(e.target);
|
|
1381
1391
|
if (!r || !o) return;
|
|
1382
1392
|
let s = !!p && (e.source === p || e.target === p), c = s ? A : k, d = s ? .5 : .2, f = Math.max(3, e.value / a * 36 * l), m = f / 2, g = r.x + r.w, _ = r.y + r.h / 2, v = o.x, y = o.y + o.h / 2, b = (g + v) / 2;
|
|
@@ -1384,7 +1394,7 @@ function tt({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f,
|
|
|
1384
1394
|
let r = e / 30, a = (e + 1) / 30, o = 1 - r, s = 1 - a, l = o * o * g + 2 * o * r * b + r * r * v, u = o * o * _ + 2 * o * r * _ + r * r * y, f = s * s * g + 2 * s * a * b + a * a * v, p = s * s * _ + 2 * s * a * _ + a * a * y, x = j(n + r * 120 + t * 40, .025, 3e-4) * 1.2;
|
|
1385
1395
|
i.beginPath(), i.moveTo(l, u - m + x), i.lineTo(f, p - m + x), i.lineTo(f, p + m + x), i.lineTo(l, u + m + x), i.closePath(), i.fillStyle = h(c, d * (.5 + r * .5)), i.fill();
|
|
1386
1396
|
}
|
|
1387
|
-
T(
|
|
1397
|
+
T(I.current, `link-${t}`, b, (_ + y) / 2, f + 6, {
|
|
1388
1398
|
label: `${e.source} → ${e.target}`,
|
|
1389
1399
|
value: String(e.value),
|
|
1390
1400
|
color: s ? A : u.blue
|
|
@@ -1399,7 +1409,7 @@ function tt({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f,
|
|
|
1399
1409
|
let r = P.get(e.id);
|
|
1400
1410
|
if (!r) return;
|
|
1401
1411
|
let a = p === e.id, o = F.current === `node-${t}`, s = b.current.get(`node-${t}`) ?? 0, c = a ? M : O[t % O.length];
|
|
1402
|
-
E(
|
|
1412
|
+
E(I.current, `node-${t}`, r.x, r.y, r.w, r.h, {
|
|
1403
1413
|
label: e.name,
|
|
1404
1414
|
value: e.valueLabel ?? e.id,
|
|
1405
1415
|
color: c
|
|
@@ -1457,7 +1467,7 @@ function tt({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f,
|
|
|
1457
1467
|
}
|
|
1458
1468
|
//#endregion
|
|
1459
1469
|
//#region src/canvas/CausalFlowCanvas.tsx
|
|
1460
|
-
var
|
|
1470
|
+
var tt = [
|
|
1461
1471
|
{
|
|
1462
1472
|
x: .13,
|
|
1463
1473
|
y: .48
|
|
@@ -1490,7 +1500,7 @@ var nt = [
|
|
|
1490
1500
|
x: .92,
|
|
1491
1501
|
y: .22
|
|
1492
1502
|
}
|
|
1493
|
-
],
|
|
1503
|
+
], nt = [
|
|
1494
1504
|
u.blue,
|
|
1495
1505
|
u.orange,
|
|
1496
1506
|
u.red,
|
|
@@ -1498,7 +1508,7 @@ var nt = [
|
|
|
1498
1508
|
u.green,
|
|
1499
1509
|
u.amber,
|
|
1500
1510
|
u.t2
|
|
1501
|
-
],
|
|
1511
|
+
], rt = [
|
|
1502
1512
|
26,
|
|
1503
1513
|
24,
|
|
1504
1514
|
24,
|
|
@@ -1508,21 +1518,21 @@ var nt = [
|
|
|
1508
1518
|
22,
|
|
1509
1519
|
22
|
|
1510
1520
|
];
|
|
1511
|
-
function
|
|
1521
|
+
function it(e, t) {
|
|
1512
1522
|
let n = 1 - t;
|
|
1513
1523
|
return {
|
|
1514
1524
|
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,
|
|
1515
1525
|
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
|
|
1516
1526
|
};
|
|
1517
1527
|
}
|
|
1518
|
-
function
|
|
1528
|
+
function at(e, t) {
|
|
1519
1529
|
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;
|
|
1520
1530
|
return {
|
|
1521
1531
|
x: -i / a,
|
|
1522
1532
|
y: r / a
|
|
1523
1533
|
};
|
|
1524
1534
|
}
|
|
1525
|
-
function
|
|
1535
|
+
function ot(e, t) {
|
|
1526
1536
|
let n = t.x - e.x, r = t.y - e.y;
|
|
1527
1537
|
return {
|
|
1528
1538
|
p0: {
|
|
@@ -1543,7 +1553,7 @@ function st(e, t) {
|
|
|
1543
1553
|
}
|
|
1544
1554
|
};
|
|
1545
1555
|
}
|
|
1546
|
-
function
|
|
1556
|
+
function st({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntity: l }) {
|
|
1547
1557
|
let d = a(null), f = a(0), p = a([]), { hoveredRef: m, tooltip: g, hitZonesRef: S } = w(d, {
|
|
1548
1558
|
width: r,
|
|
1549
1559
|
height: o
|
|
@@ -1551,15 +1561,15 @@ function ct({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1551
1561
|
let t = /* @__PURE__ */ new Map();
|
|
1552
1562
|
return e.forEach((e, n) => t.set(e.id, n)), t;
|
|
1553
1563
|
}, [e]), O = i(() => t.length > 0 ? Math.max(...t.map((e) => e.value)) : 100, [t]), k = (e) => O > 1 ? e / 100 : e, A = i(() => e.map((e, t) => {
|
|
1554
|
-
let n =
|
|
1564
|
+
let n = tt[t % tt.length];
|
|
1555
1565
|
return {
|
|
1556
1566
|
id: e.id,
|
|
1557
1567
|
label: e.name,
|
|
1558
1568
|
sub: e.valueLabel ?? "",
|
|
1559
1569
|
x: n.x * r,
|
|
1560
1570
|
y: n.y * o,
|
|
1561
|
-
r:
|
|
1562
|
-
color:
|
|
1571
|
+
r: rt[t % rt.length],
|
|
1572
|
+
color: nt[t % nt.length]
|
|
1563
1573
|
};
|
|
1564
1574
|
}), [
|
|
1565
1575
|
e,
|
|
@@ -1581,7 +1591,7 @@ function ct({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1581
1591
|
if (t.clearRect(0, 0, r, o), S.current = [], b(t, r, o, e, 50, h(u.blue, .05)), M.forEach((e, n) => {
|
|
1582
1592
|
let r = A[e.fromIdx], i = A[e.toIdx];
|
|
1583
1593
|
if (!r || !i) return;
|
|
1584
|
-
let a = !!l && (r.id === l || i.id === l), o = _(r.color, i.color, .5), s = a ? .18 : .05, c = a ? .25 : .1, d =
|
|
1594
|
+
let a = !!l && (r.id === l || i.id === l), o = _(r.color, i.color, .5), s = a ? .18 : .05, c = a ? .25 : .1, d = ot(r, i);
|
|
1585
1595
|
t.beginPath(), t.moveTo(d.p0.x, d.p0.y), t.bezierCurveTo(d.p1.x, d.p1.y, d.p2.x, d.p2.y, d.p3.x, d.p3.y), t.strokeStyle = h(o, s), t.lineWidth = 16, t.lineCap = "round", t.stroke(), t.strokeStyle = h(o, c), t.lineWidth = 1.5, t.stroke();
|
|
1586
1596
|
for (let t = 0; t < e.conf * 2.5; t++) Math.random() < .45 && p.current.push({
|
|
1587
1597
|
edgeIdx: n,
|
|
@@ -1590,7 +1600,7 @@ function ct({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1590
1600
|
off: (Math.random() - .5) * 13,
|
|
1591
1601
|
sz: .7 + Math.random() * 2
|
|
1592
1602
|
});
|
|
1593
|
-
let f =
|
|
1603
|
+
let f = it(d, .5), m = `${Math.round(e.conf * 100)}%`;
|
|
1594
1604
|
t.font = "bold 12px 'JetBrains Mono', monospace", t.textBaseline = "middle";
|
|
1595
1605
|
let g = t.measureText(m).width + 14;
|
|
1596
1606
|
t.fillStyle = "rgba(10,16,24,0.88)", t.beginPath(), t.roundRect(f.x - g / 2, f.y - 11, g, 22, 6), t.fill(), t.strokeStyle = h(u.blue, .25), t.lineWidth = 1, t.stroke(), t.fillStyle = h(u.blue, .9), t.textAlign = "center", t.fillText(m, f.x, f.y);
|
|
@@ -1600,7 +1610,7 @@ function ct({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1600
1610
|
if (!n) return !1;
|
|
1601
1611
|
let r = A[n.fromIdx], i = A[n.toIdx];
|
|
1602
1612
|
if (!r || !i) return !1;
|
|
1603
|
-
let a =
|
|
1613
|
+
let a = ot(r, i), o = it(a, e.t), s = at(a, e.t), c = o.x + s.x * e.off, l = o.y + s.y * e.off, u = Math.sin(e.t * Math.PI) * .7, d = _(r.color, i.color, e.t);
|
|
1604
1614
|
return y(t, c, l, e.sz * 3, d, u * .1), t.beginPath(), t.arc(c, l, e.sz, 0, Math.PI * 2), t.fillStyle = h(d, u), t.fill(), !0;
|
|
1605
1615
|
}), p.current.length > 350 && (p.current = p.current.slice(-350)), A.forEach((n, r) => {
|
|
1606
1616
|
let i = l === n.id, a = m.current === `node-${r}`, o = j(e, .03, 3e-4) * .1 + 1, s = n.r * o * (i ? 1.15 : 1);
|
|
@@ -1657,10 +1667,10 @@ function ct({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1657
1667
|
}
|
|
1658
1668
|
//#endregion
|
|
1659
1669
|
//#region src/components/sankey/ProcessSankey.tsx
|
|
1660
|
-
function
|
|
1661
|
-
return /* @__PURE__ */ s(
|
|
1662
|
-
nodes:
|
|
1663
|
-
links:
|
|
1670
|
+
function ct({ selectedEntity: e, colors: t }) {
|
|
1671
|
+
return /* @__PURE__ */ s(st, {
|
|
1672
|
+
nodes: He.nodes,
|
|
1673
|
+
links: He.links,
|
|
1664
1674
|
width: 960,
|
|
1665
1675
|
height: 280,
|
|
1666
1676
|
selectedEntity: e
|
|
@@ -1668,7 +1678,7 @@ function lt({ selectedEntity: e, colors: t }) {
|
|
|
1668
1678
|
}
|
|
1669
1679
|
//#endregion
|
|
1670
1680
|
//#region src/components/sankey/RankingSankey.tsx
|
|
1671
|
-
function
|
|
1681
|
+
function lt({ rows: e = [], className: t, colors: n }) {
|
|
1672
1682
|
let { nodes: r, links: a } = i(() => {
|
|
1673
1683
|
let t = e.slice(0, 5);
|
|
1674
1684
|
return {
|
|
@@ -1686,7 +1696,7 @@ function ut({ rows: e = [], className: t, colors: n }) {
|
|
|
1686
1696
|
}))
|
|
1687
1697
|
};
|
|
1688
1698
|
}, [e]);
|
|
1689
|
-
return /* @__PURE__ */ s(
|
|
1699
|
+
return /* @__PURE__ */ s(et, {
|
|
1690
1700
|
nodes: r,
|
|
1691
1701
|
links: a,
|
|
1692
1702
|
width: 760,
|
|
@@ -1698,20 +1708,20 @@ function ut({ rows: e = [], className: t, colors: n }) {
|
|
|
1698
1708
|
}
|
|
1699
1709
|
//#endregion
|
|
1700
1710
|
//#region src/components/balanceScaleChart/BalanceScaleChart.tsx
|
|
1701
|
-
var
|
|
1702
|
-
function
|
|
1711
|
+
var ut = 500, dt = 320;
|
|
1712
|
+
function ft({ left: e, right: t, "data-testid": r }) {
|
|
1703
1713
|
let i = a(null), o = a(0);
|
|
1704
1714
|
return n(() => {
|
|
1705
1715
|
let n = i.current;
|
|
1706
1716
|
if (!n) return;
|
|
1707
|
-
let r = v(n,
|
|
1717
|
+
let r = v(n, ut, dt);
|
|
1708
1718
|
o.current = 0;
|
|
1709
|
-
let a =
|
|
1719
|
+
let a = ut / 2, s = Math.max(e.value ?? 0, t.value ?? 0, 1), c = (e.value - t.value) / s * 14, l, d = () => {
|
|
1710
1720
|
o.current++;
|
|
1711
1721
|
let n = o.current;
|
|
1712
|
-
r.clearRect(0, 0,
|
|
1722
|
+
r.clearRect(0, 0, ut, dt), r.letterSpacing = f.letterSpacing;
|
|
1713
1723
|
let i = D(Math.min(n / 80, 1)), m = c * A(Math.min(n / 80, 1)) * Math.PI / 180;
|
|
1714
|
-
r.strokeStyle = h(u.bd, .5 * i), r.lineWidth = 2, r.beginPath(), r.moveTo(a, 100), r.lineTo(a,
|
|
1724
|
+
r.strokeStyle = h(u.bd, .5 * i), r.lineWidth = 2, r.beginPath(), r.moveTo(a, 100), r.lineTo(a, dt - 80), r.stroke(), r.beginPath(), r.arc(a, 100, 5 * i, 0, Math.PI * 2), r.fillStyle = u.t2, r.fill();
|
|
1715
1725
|
let g = {
|
|
1716
1726
|
x: a - Math.cos(m) * 160,
|
|
1717
1727
|
y: 100 + Math.sin(-m) * 160
|
|
@@ -1744,16 +1754,16 @@ function pt({ left: e, right: t, "data-testid": r }) {
|
|
|
1744
1754
|
"data-testid": r,
|
|
1745
1755
|
style: {
|
|
1746
1756
|
position: "relative",
|
|
1747
|
-
width:
|
|
1748
|
-
height:
|
|
1757
|
+
width: ut,
|
|
1758
|
+
height: dt
|
|
1749
1759
|
},
|
|
1750
1760
|
children: /* @__PURE__ */ s("canvas", {
|
|
1751
1761
|
ref: i,
|
|
1752
1762
|
role: "img",
|
|
1753
1763
|
"aria-label": "Quotation balance — accepted vs submitted quotation value",
|
|
1754
1764
|
style: {
|
|
1755
|
-
width:
|
|
1756
|
-
height:
|
|
1765
|
+
width: ut,
|
|
1766
|
+
height: dt,
|
|
1757
1767
|
display: "block"
|
|
1758
1768
|
}
|
|
1759
1769
|
})
|
|
@@ -1761,25 +1771,25 @@ function pt({ left: e, right: t, "data-testid": r }) {
|
|
|
1761
1771
|
}
|
|
1762
1772
|
//#endregion
|
|
1763
1773
|
//#region src/components/areaLineChart/AreaLineChart.tsx
|
|
1764
|
-
var
|
|
1765
|
-
function
|
|
1774
|
+
var pt = 680, q = 280;
|
|
1775
|
+
function mt({ points: e = [], "data-testid": t }) {
|
|
1766
1776
|
let r = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), { hoveredRef: d, tooltip: p, hitZonesRef: m } = w(r, {
|
|
1767
|
-
width:
|
|
1768
|
-
height:
|
|
1777
|
+
width: pt,
|
|
1778
|
+
height: q
|
|
1769
1779
|
}), g = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
1770
1780
|
return n(() => {
|
|
1771
1781
|
let e = r.current;
|
|
1772
1782
|
if (!e) return;
|
|
1773
|
-
let t = v(e,
|
|
1783
|
+
let t = v(e, pt, q);
|
|
1774
1784
|
l.current = 0;
|
|
1775
|
-
let n =
|
|
1785
|
+
let n = pt - 54 - 28, i = q - 30 - 54, a = Math.max(...g.map((e) => e.count), 1), s = g.length, c = s > 1 ? n / (s - 1) : n, p = g.map((e, t) => ({
|
|
1776
1786
|
x: 54 + t * c,
|
|
1777
1787
|
y: 30 + i - e.count / a * i,
|
|
1778
1788
|
point: e
|
|
1779
1789
|
})), _, b = () => {
|
|
1780
1790
|
l.current++;
|
|
1781
1791
|
let e = l.current;
|
|
1782
|
-
t.clearRect(0, 0,
|
|
1792
|
+
t.clearRect(0, 0, pt, q), t.letterSpacing = f.letterSpacing;
|
|
1783
1793
|
let r = D(Math.min(e / 72, 1));
|
|
1784
1794
|
N(o.current, d.current), m.current = [], [
|
|
1785
1795
|
.25,
|
|
@@ -1789,7 +1799,7 @@ function ht({ points: e = [], "data-testid": t }) {
|
|
|
1789
1799
|
].forEach((e) => {
|
|
1790
1800
|
let r = 30 + i - e * i;
|
|
1791
1801
|
t.strokeStyle = h(u.bd, .18), t.lineWidth = 1, t.setLineDash([3, 5]), t.beginPath(), t.moveTo(54, r), t.lineTo(54 + n, r), t.stroke(), t.setLineDash([]), t.font = f.font, t.fillStyle = f.color, t.textAlign = "right", t.fillText(String(Math.round(a * e)), 48, r + 3);
|
|
1792
|
-
}), t.save(), t.translate(12, 30 + i / 2), t.rotate(-Math.PI / 2), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Submissions", 0, 0), t.restore(), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Week", 54 + n / 2,
|
|
1802
|
+
}), t.save(), t.translate(12, 30 + i / 2), t.rotate(-Math.PI / 2), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Submissions", 0, 0), t.restore(), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Week", 54 + n / 2, q - 6), t.strokeStyle = h(u.bd, .3), t.lineWidth = 1, t.setLineDash([]), t.beginPath(), t.moveTo(54, 30 + i), t.lineTo(54 + n, 30 + i), t.stroke();
|
|
1793
1803
|
let c = r * (s - 1), g = Math.floor(c) + 1;
|
|
1794
1804
|
if (g >= 2) {
|
|
1795
1805
|
t.beginPath(), t.moveTo(p[0].x, 30 + i), t.lineTo(p[0].x, p[0].y);
|
|
@@ -1817,13 +1827,13 @@ function ht({ points: e = [], "data-testid": t }) {
|
|
|
1817
1827
|
color: u.blue
|
|
1818
1828
|
}), s > 0 && S(t, e.x, 30, 30 + i, h(u.blue, .15 * s));
|
|
1819
1829
|
let c = e.point.count === a;
|
|
1820
|
-
(s > 0 || c) && y(t, e.x, e.y, 14, u.blue, (c ? .3 : 0) + s * .25), t.beginPath(), t.arc(e.x, e.y, s > 0 ? 5 : 3.5, 0, Math.PI * 2), t.fillStyle = h(u.blue, s > 0 ? 1 : .8), t.fill(), (s > 0 || c) && (t.font = f.font, t.fillStyle = u.blue, t.textAlign = "center", t.fillText(String(e.point.count), e.x, e.y - 10)), t.font = f.font, t.fillStyle = s > 0 ? u.blue : f.color, t.textAlign = "center", t.fillText(e.point.week, e.x,
|
|
1830
|
+
(s > 0 || c) && y(t, e.x, e.y, 14, u.blue, (c ? .3 : 0) + s * .25), t.beginPath(), t.arc(e.x, e.y, s > 0 ? 5 : 3.5, 0, Math.PI * 2), t.fillStyle = h(u.blue, s > 0 ? 1 : .8), t.fill(), (s > 0 || c) && (t.font = f.font, t.fillStyle = u.blue, t.textAlign = "center", t.fillText(String(e.point.count), e.x, e.y - 10)), t.font = f.font, t.fillStyle = s > 0 ? u.blue : f.color, t.textAlign = "center", t.fillText(e.point.week, e.x, q - 54 + 14);
|
|
1821
1831
|
}), _ = requestAnimationFrame(b);
|
|
1822
1832
|
};
|
|
1823
1833
|
return b(), () => cancelAnimationFrame(_);
|
|
1824
|
-
}, [g]), g.length < 2 ? /* @__PURE__ */ s(
|
|
1825
|
-
width:
|
|
1826
|
-
height:
|
|
1834
|
+
}, [g]), g.length < 2 ? /* @__PURE__ */ s(L, {
|
|
1835
|
+
width: pt,
|
|
1836
|
+
height: q,
|
|
1827
1837
|
"data-testid": t
|
|
1828
1838
|
}) : /* @__PURE__ */ s("div", {
|
|
1829
1839
|
"data-testid": t,
|
|
@@ -1835,53 +1845,53 @@ function ht({ points: e = [], "data-testid": t }) {
|
|
|
1835
1845
|
children: /* @__PURE__ */ c("div", {
|
|
1836
1846
|
style: {
|
|
1837
1847
|
position: "relative",
|
|
1838
|
-
width:
|
|
1839
|
-
height:
|
|
1848
|
+
width: pt,
|
|
1849
|
+
height: q
|
|
1840
1850
|
},
|
|
1841
1851
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1842
1852
|
ref: r,
|
|
1843
1853
|
role: "img",
|
|
1844
1854
|
"aria-label": "Trend chart — count over time",
|
|
1845
1855
|
style: {
|
|
1846
|
-
width:
|
|
1847
|
-
height:
|
|
1856
|
+
width: pt,
|
|
1857
|
+
height: q,
|
|
1848
1858
|
display: "block"
|
|
1849
1859
|
}
|
|
1850
1860
|
}), /* @__PURE__ */ s(C, {
|
|
1851
1861
|
...p,
|
|
1852
|
-
parentW:
|
|
1853
|
-
parentH:
|
|
1862
|
+
parentW: pt,
|
|
1863
|
+
parentH: q
|
|
1854
1864
|
})]
|
|
1855
1865
|
})
|
|
1856
1866
|
});
|
|
1857
1867
|
}
|
|
1858
1868
|
//#endregion
|
|
1859
1869
|
//#region src/components/trend/Trend.tsx
|
|
1860
|
-
var
|
|
1861
|
-
function
|
|
1870
|
+
var ht = 680, J = 280, gt = 54, _t = 48, vt = 64, yt = f.font, bt = 12, xt = Math.PI * 2, St = 72, Ct = 20, wt = 5e3;
|
|
1871
|
+
function Tt({ points: e = [], "data-testid": t }) {
|
|
1862
1872
|
let r = a(null), o = a(null), l = a(0), d = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), p = i(() => {
|
|
1863
|
-
if (d.length <= 1) return
|
|
1873
|
+
if (d.length <= 1) return vt;
|
|
1864
1874
|
let e = document.createElement("canvas").getContext("2d");
|
|
1865
|
-
if (!e) return
|
|
1866
|
-
e.font =
|
|
1867
|
-
let t = Math.max(1, Math.ceil(d.length /
|
|
1868
|
-
return Math.max(
|
|
1869
|
-
}, [d]), m = Math.round(p / 2), g =
|
|
1875
|
+
if (!e) return vt;
|
|
1876
|
+
e.font = yt;
|
|
1877
|
+
let t = Math.max(1, Math.ceil(d.length / Ct)), n = Math.max(...d.filter((e, n) => n % t === 0).map((t) => e.measureText(t.week).width));
|
|
1878
|
+
return Math.max(vt, n + bt);
|
|
1879
|
+
}, [d]), m = Math.round(p / 2), g = _t + m + Math.max(0, d.length - 1) * p, _ = Math.max(ht - gt, Math.min(g, wt)), { tooltip: y, hitZonesRef: b } = w(r, {
|
|
1870
1880
|
width: _,
|
|
1871
|
-
height:
|
|
1881
|
+
height: J
|
|
1872
1882
|
});
|
|
1873
1883
|
return n(() => {
|
|
1874
1884
|
let e = r.current;
|
|
1875
1885
|
if (!e) return;
|
|
1876
|
-
let t = v(e, _,
|
|
1886
|
+
let t = v(e, _, J), n = o.current ? v(o.current, gt, J) : null;
|
|
1877
1887
|
l.current = 0;
|
|
1878
|
-
let i = d.length <=
|
|
1888
|
+
let i = d.length <= St ? St : Math.max(24, Math.round(St * (St / d.length))), a = _ - _t, s = J - 42 - 54, c = d.length > 0 ? d.map((e) => e.count) : [0], g = Math.min(...c), y = Math.max(...c), x = y - g || 1, S = d.length, C = S > 1 ? (a - m) / (S - 1) : a - m, w = Math.max(1, Math.ceil(p / C)), E = g < 0, O = E ? 42 + s - -g / x * s : 42 + s, k = d.map((e, t) => ({
|
|
1879
1889
|
x: m + t * C,
|
|
1880
1890
|
y: 42 + s - (e.count - g) / x * s,
|
|
1881
1891
|
point: e
|
|
1882
1892
|
}));
|
|
1883
1893
|
if (n) {
|
|
1884
|
-
n.clearRect(0, 0,
|
|
1894
|
+
n.clearRect(0, 0, gt, J), n.letterSpacing = f.letterSpacing;
|
|
1885
1895
|
let e = E ? [
|
|
1886
1896
|
g,
|
|
1887
1897
|
g + x * .25,
|
|
@@ -1897,18 +1907,18 @@ function Et({ points: e = [], "data-testid": t }) {
|
|
|
1897
1907
|
];
|
|
1898
1908
|
e.forEach((t, r) => {
|
|
1899
1909
|
let i = r / (e.length - 1), a = 42 + s - i * s;
|
|
1900
|
-
n.font = f.font, n.fillStyle = f.color, n.textAlign = "right", n.fillText(
|
|
1910
|
+
n.font = f.font, n.fillStyle = f.color, n.textAlign = "right", n.fillText(U(t), gt - 6, a + 3);
|
|
1901
1911
|
}), n.save(), n.translate(12, 42 + s / 2), n.rotate(-Math.PI / 2), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Count", 0, 0), n.restore();
|
|
1902
1912
|
}
|
|
1903
1913
|
let A = t.createLinearGradient(0, 42, 0, 42 + s);
|
|
1904
1914
|
A.addColorStop(0, h(u.blue, .22)), A.addColorStop(1, h(u.blue, .02));
|
|
1905
1915
|
let j = 0, M, N = (e) => {
|
|
1906
|
-
t.font =
|
|
1907
|
-
for (let n = 0; n < e; n++) n % w === 0 && t.fillText(k[n].point.week, k[n].x,
|
|
1916
|
+
t.font = yt, t.fillStyle = f.color, t.textAlign = "center";
|
|
1917
|
+
for (let n = 0; n < e; n++) n % w === 0 && t.fillText(k[n].point.week, k[n].x, J - 54 + 14);
|
|
1908
1918
|
}, P = () => {
|
|
1909
1919
|
l.current++;
|
|
1910
1920
|
let e = Math.min(l.current / i, 1), n = D(e), r = e >= 1;
|
|
1911
|
-
t.clearRect(0, 0, _,
|
|
1921
|
+
t.clearRect(0, 0, _, J), t.letterSpacing = f.letterSpacing, (E ? [
|
|
1912
1922
|
0,
|
|
1913
1923
|
.25,
|
|
1914
1924
|
.5,
|
|
@@ -1922,7 +1932,7 @@ function Et({ points: e = [], "data-testid": t }) {
|
|
|
1922
1932
|
]).forEach((e) => {
|
|
1923
1933
|
let n = 42 + s - e * s;
|
|
1924
1934
|
t.strokeStyle = h(u.bd, .18), t.lineWidth = 1, t.setLineDash([3, 5]), t.beginPath(), t.moveTo(0, n), t.lineTo(a, n), t.stroke(), t.setLineDash([]);
|
|
1925
|
-
}), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Period", m + (a - m) / 2,
|
|
1935
|
+
}), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Period", m + (a - m) / 2, J - 6), t.strokeStyle = h(u.bd, E ? .5 : .3), t.lineWidth = E ? 2 : 1, t.beginPath(), t.moveTo(m, E ? O : 42 + s), t.lineTo(a, E ? O : 42 + s), t.stroke();
|
|
1926
1936
|
let o = n * (S - 1), c = Math.floor(o) + 1;
|
|
1927
1937
|
if (c >= 2) {
|
|
1928
1938
|
let e = E ? O : 42 + s;
|
|
@@ -1939,7 +1949,7 @@ function Et({ points: e = [], "data-testid": t }) {
|
|
|
1939
1949
|
e === 0 ? t.moveTo(i, a) : t.lineTo(i, a);
|
|
1940
1950
|
}
|
|
1941
1951
|
t.strokeStyle = h(u.blue, .85), t.lineWidth = 2, t.stroke(), t.fillStyle = h(u.blue, .8), t.beginPath();
|
|
1942
|
-
for (let e = 0; e < c; e++) t.moveTo(k[e].x + 3.5, k[e].y), t.arc(k[e].x, k[e].y, 3.5, 0,
|
|
1952
|
+
for (let e = 0; e < c; e++) t.moveTo(k[e].x + 3.5, k[e].y), t.arc(k[e].x, k[e].y, 3.5, 0, xt);
|
|
1943
1953
|
if (t.fill(), c > j) {
|
|
1944
1954
|
b.current = [];
|
|
1945
1955
|
for (let e = 0; e < c; e++) T(b.current, `pt-${e}`, k[e].x, k[e].y, 10, {
|
|
@@ -1958,9 +1968,9 @@ function Et({ points: e = [], "data-testid": t }) {
|
|
|
1958
1968
|
_,
|
|
1959
1969
|
p,
|
|
1960
1970
|
b
|
|
1961
|
-
]), d.length < 2 ? /* @__PURE__ */ s(
|
|
1962
|
-
width:
|
|
1963
|
-
height:
|
|
1971
|
+
]), d.length < 2 ? /* @__PURE__ */ s(L, {
|
|
1972
|
+
width: ht,
|
|
1973
|
+
height: J,
|
|
1964
1974
|
"data-testid": t
|
|
1965
1975
|
}) : /* @__PURE__ */ c("div", {
|
|
1966
1976
|
"data-testid": t,
|
|
@@ -1973,8 +1983,8 @@ function Et({ points: e = [], "data-testid": t }) {
|
|
|
1973
1983
|
ref: o,
|
|
1974
1984
|
"aria-hidden": "true",
|
|
1975
1985
|
style: {
|
|
1976
|
-
width:
|
|
1977
|
-
height:
|
|
1986
|
+
width: gt,
|
|
1987
|
+
height: J,
|
|
1978
1988
|
display: "block",
|
|
1979
1989
|
flexShrink: 0
|
|
1980
1990
|
}
|
|
@@ -1988,7 +1998,7 @@ function Et({ points: e = [], "data-testid": t }) {
|
|
|
1988
1998
|
style: {
|
|
1989
1999
|
position: "relative",
|
|
1990
2000
|
width: _,
|
|
1991
|
-
height:
|
|
2001
|
+
height: J
|
|
1992
2002
|
},
|
|
1993
2003
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1994
2004
|
ref: r,
|
|
@@ -1996,13 +2006,13 @@ function Et({ points: e = [], "data-testid": t }) {
|
|
|
1996
2006
|
"aria-label": "Trend chart — count over time",
|
|
1997
2007
|
style: {
|
|
1998
2008
|
width: _,
|
|
1999
|
-
height:
|
|
2009
|
+
height: J,
|
|
2000
2010
|
display: "block"
|
|
2001
2011
|
}
|
|
2002
2012
|
}), /* @__PURE__ */ s(C, {
|
|
2003
2013
|
...y,
|
|
2004
2014
|
parentW: _,
|
|
2005
|
-
parentH:
|
|
2015
|
+
parentH: J
|
|
2006
2016
|
})]
|
|
2007
2017
|
})
|
|
2008
2018
|
})]
|
|
@@ -2010,46 +2020,46 @@ function Et({ points: e = [], "data-testid": t }) {
|
|
|
2010
2020
|
}
|
|
2011
2021
|
//#endregion
|
|
2012
2022
|
//#region src/components/proportionalBandChart/ProportionalBandChart.tsx
|
|
2013
|
-
var
|
|
2014
|
-
function
|
|
2023
|
+
var Et = 680, Dt = 240, Ot = 28, kt = 156;
|
|
2024
|
+
function At(e, t, n) {
|
|
2015
2025
|
if (e.measureText(t).width <= n) return t;
|
|
2016
2026
|
let r = t;
|
|
2017
2027
|
for (; r.length > 0 && e.measureText(`${r}…`).width > n;) r = r.slice(0, -1);
|
|
2018
2028
|
return `${r}…`;
|
|
2019
2029
|
}
|
|
2020
|
-
var
|
|
2030
|
+
var jt = {
|
|
2021
2031
|
Critical: u.red,
|
|
2022
2032
|
High: u.orange,
|
|
2023
2033
|
Medium: u.amber,
|
|
2024
2034
|
Low: u.green
|
|
2025
2035
|
};
|
|
2026
|
-
function
|
|
2027
|
-
let r = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), d = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), m = d.length > 0 ? Math.min(
|
|
2036
|
+
function Mt({ severities: e = [], "data-testid": t }) {
|
|
2037
|
+
let r = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), d = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), m = d.length > 0 ? Math.min(Et, 2 * Ot + d.length * kt) : Et, { hoveredRef: g, tooltip: _, hitZonesRef: b } = w(r, {
|
|
2028
2038
|
width: m,
|
|
2029
|
-
height:
|
|
2039
|
+
height: Dt
|
|
2030
2040
|
});
|
|
2031
2041
|
return n(() => {
|
|
2032
2042
|
let e = r.current;
|
|
2033
2043
|
if (!e) return;
|
|
2034
|
-
let t = v(e, m,
|
|
2044
|
+
let t = v(e, m, Dt);
|
|
2035
2045
|
l.current = 0;
|
|
2036
|
-
let n = d.reduce((e, t) => e + (t.count ?? 0), 0), i =
|
|
2046
|
+
let n = d.reduce((e, t) => e + (t.count ?? 0), 0), i = Ot, a = Ot, s = m - i - a, c = Dt - 50 - 52, _ = d.map((e) => (e.count ?? 0) / (n || 1) * s), x, S = () => {
|
|
2037
2047
|
l.current++;
|
|
2038
2048
|
let e = l.current;
|
|
2039
|
-
t.clearRect(0, 0, m,
|
|
2049
|
+
t.clearRect(0, 0, m, Dt), t.letterSpacing = f.letterSpacing;
|
|
2040
2050
|
let r = O(Math.min(e / 60, 1));
|
|
2041
2051
|
N(o.current, g.current), b.current = [], t.strokeStyle = h(u.bd, .2), t.lineWidth = 1, t.beginPath(), t.rect(i, 50, s, c), t.stroke(), t.strokeStyle = h(u.t2, .15), t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(m / 2, 50), t.lineTo(m / 2, 50 + c), t.stroke(), t.setLineDash([]);
|
|
2042
2052
|
let a = i;
|
|
2043
2053
|
d.forEach((e, i) => {
|
|
2044
|
-
let s =
|
|
2054
|
+
let s = jt[e.severity] ?? u.blue, l = _[i], d = o.current.get(e.severity) ?? 0, m = a + l / 2, g = l * .85, v = l * r, x = g * r, S = m - x / 2;
|
|
2045
2055
|
if (v > 0 && (d > 0 && y(t, a + v / 2, 50 + c / 2, v * .4, s, .15 * d), t.beginPath(), t.moveTo(S, 50), t.lineTo(S + x, 50), t.lineTo(a + v, 50 + c), t.lineTo(a, 50 + c), t.closePath(), t.fillStyle = h(s, .45 + d * .25), t.fill(), t.strokeStyle = h(s, (.5 + d * .3) * r), t.lineWidth = d > 0 ? 2 : 1, t.beginPath(), t.moveTo(S, 50), t.lineTo(S + x, 50), t.stroke(), t.strokeStyle = h(s, (.3 + d * .3) * r), t.lineWidth = d > 0 ? 2 : 1, t.beginPath(), t.moveTo(a, 50 + c), t.lineTo(a + v, 50 + c), t.stroke()), E(b.current, e.severity, a, 50, l, c, {
|
|
2046
2056
|
label: e.severity,
|
|
2047
|
-
value: `${e.count} Early Warnings`,
|
|
2057
|
+
value: `${U(e.count ?? 0)} Early Warnings`,
|
|
2048
2058
|
sublabel: `${Math.round((e.count ?? 0) / (n || 1) * 100)}% of all EWs`,
|
|
2049
2059
|
color: s
|
|
2050
2060
|
}), r > .5) {
|
|
2051
2061
|
let i = Math.min(1, (r - .5) / .5), o = a + l / 2;
|
|
2052
|
-
t.globalAlpha = i, t.font = f.font, t.fillStyle = d > 0 ? s : h(s, .9), t.textAlign = "center", t.fillText(
|
|
2062
|
+
t.globalAlpha = i, t.font = f.font, t.fillStyle = d > 0 ? s : h(s, .9), t.textAlign = "center", t.fillText(At(t, e.severity, l - 12), o, 38), t.font = p.font, t.fillStyle = d > 0 ? u.t1 : h(u.t1, .85), t.fillText(U(e.count ?? 0), o, 50 + c / 2 + 6), t.font = f.font, t.fillStyle = d > 0 ? s : f.color, t.fillText(`${Math.round((e.count ?? 0) / (n || 1) * 100)}%`, o, 50 + c + 18), t.globalAlpha = 1;
|
|
2053
2063
|
}
|
|
2054
2064
|
a += l;
|
|
2055
2065
|
});
|
|
@@ -2057,16 +2067,16 @@ function Nt({ severities: e = [], "data-testid": t }) {
|
|
|
2057
2067
|
v.addColorStop(0, h(u.red, .03)), v.addColorStop(.33, h(u.orange, .03)), v.addColorStop(.66, h(u.amber, .03)), v.addColorStop(1, h(u.green, .03)), t.fillStyle = v, t.fillRect(i, 50, s * r, c), x = requestAnimationFrame(S);
|
|
2058
2068
|
};
|
|
2059
2069
|
return S(), () => cancelAnimationFrame(x);
|
|
2060
|
-
}, [d, m]), d.length === 0 ? /* @__PURE__ */ s(
|
|
2070
|
+
}, [d, m]), d.length === 0 ? /* @__PURE__ */ s(L, {
|
|
2061
2071
|
width: m,
|
|
2062
|
-
height:
|
|
2072
|
+
height: Dt,
|
|
2063
2073
|
"data-testid": t
|
|
2064
2074
|
}) : /* @__PURE__ */ c("div", {
|
|
2065
2075
|
"data-testid": t,
|
|
2066
2076
|
style: {
|
|
2067
2077
|
position: "relative",
|
|
2068
2078
|
width: m,
|
|
2069
|
-
height:
|
|
2079
|
+
height: Dt
|
|
2070
2080
|
},
|
|
2071
2081
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2072
2082
|
ref: r,
|
|
@@ -2074,99 +2084,103 @@ function Nt({ severities: e = [], "data-testid": t }) {
|
|
|
2074
2084
|
"aria-label": "Early Warning severity distribution — prism spectrum bands",
|
|
2075
2085
|
style: {
|
|
2076
2086
|
width: m,
|
|
2077
|
-
height:
|
|
2087
|
+
height: Dt,
|
|
2078
2088
|
display: "block"
|
|
2079
2089
|
}
|
|
2080
2090
|
}), /* @__PURE__ */ s(C, {
|
|
2081
2091
|
..._,
|
|
2082
2092
|
parentW: m,
|
|
2083
|
-
parentH:
|
|
2093
|
+
parentH: Dt
|
|
2084
2094
|
})]
|
|
2085
2095
|
});
|
|
2086
2096
|
}
|
|
2087
2097
|
//#endregion
|
|
2088
2098
|
//#region src/components/hubAndSpokeRadialChart/HubAndSpokeRadialChart.tsx
|
|
2089
|
-
var
|
|
2099
|
+
var Y = 300, X = 280, Nt = 100, Pt = {
|
|
2090
2100
|
Open: u.red,
|
|
2091
2101
|
Submitted: u.amber,
|
|
2092
2102
|
Closed: u.green
|
|
2093
2103
|
};
|
|
2094
|
-
function
|
|
2095
|
-
let
|
|
2096
|
-
width:
|
|
2097
|
-
height:
|
|
2098
|
-
}),
|
|
2104
|
+
function Ft({ segments: e = [], title: t, unitLabel: r = "", "data-testid": o }) {
|
|
2105
|
+
let l = a(null), d = a(0), m = a(/* @__PURE__ */ new Map()), { hoveredRef: g, tooltip: _, hitZonesRef: S } = w(l, {
|
|
2106
|
+
width: Y,
|
|
2107
|
+
height: X
|
|
2108
|
+
}), E = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
2099
2109
|
return n(() => {
|
|
2100
|
-
let e =
|
|
2110
|
+
let e = l.current;
|
|
2101
2111
|
if (!e) return;
|
|
2102
|
-
let
|
|
2103
|
-
|
|
2104
|
-
let
|
|
2105
|
-
|
|
2106
|
-
let e =
|
|
2107
|
-
|
|
2108
|
-
let n = t ===
|
|
2109
|
-
Math.abs(r - n) < .005 ? n === 0 ?
|
|
2110
|
-
}),
|
|
2111
|
-
let
|
|
2112
|
-
|
|
2113
|
-
let g = (e * .005 +
|
|
2114
|
-
y(
|
|
2115
|
-
let b = (
|
|
2116
|
-
|
|
2117
|
-
}),
|
|
2118
|
-
let
|
|
2119
|
-
y(
|
|
2120
|
-
let b =
|
|
2121
|
-
b.addColorStop(0, h(
|
|
2112
|
+
let n = v(e, Y, X);
|
|
2113
|
+
d.current = 0;
|
|
2114
|
+
let i = Y * .5, a = X * .56, o = Nt, s = E.reduce((e, t) => e + (t.count ?? 0), 0), c = Math.max(...E.map((e) => e.count ?? 0), 1), _, C = () => {
|
|
2115
|
+
d.current++;
|
|
2116
|
+
let e = d.current;
|
|
2117
|
+
n.clearRect(0, 0, Y, X), n.letterSpacing = f.letterSpacing, S.current = [], m.current.forEach((e, t) => {
|
|
2118
|
+
let n = t === g.current ? 1 : 0, r = e + (n - e) * .12;
|
|
2119
|
+
Math.abs(r - n) < .005 ? n === 0 ? m.current.delete(t) : m.current.set(t, 1) : m.current.set(t, r);
|
|
2120
|
+
}), g.current && !m.current.has(g.current) && m.current.set(g.current, 0), b(n, Y, X, e, 40, h(u.blue, .04)), E.forEach((t, r) => {
|
|
2121
|
+
let s = r / 3 * Math.PI * 2 - Math.PI / 2, l = i + Math.cos(s) * o, d = a + Math.sin(s) * o, f = Pt[t.status] ?? u.blue, m = 2 + t.count / c * 8;
|
|
2122
|
+
n.beginPath(), n.moveTo(i, a), n.lineTo(l, d), n.strokeStyle = h(f, .08), n.lineWidth = m * 2, n.stroke(), n.beginPath(), n.moveTo(i, a), n.lineTo(l, d), n.strokeStyle = h(f, .25), n.lineWidth = 1, n.stroke();
|
|
2123
|
+
let g = (e * .005 + r * .33) % 1, _ = i + (l - i) * g, v = a + (d - a) * g;
|
|
2124
|
+
y(n, _, v, 6, f, .4), n.beginPath(), n.arc(_, v, 2, 0, Math.PI * 2), n.fillStyle = h(f, .8), n.fill();
|
|
2125
|
+
let b = (i + l) / 2, x = (a + d) / 2;
|
|
2126
|
+
n.font = p.font, n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = h(f, .85), n.fillText(String(t.count), b, x);
|
|
2127
|
+
}), E.forEach((e, t) => {
|
|
2128
|
+
let l = t / 3 * Math.PI * 2 - Math.PI / 2, d = i + Math.cos(l) * o, p = a + Math.sin(l) * o, g = Pt[e.status] ?? u.blue, _ = 10 + e.count / c * 18, v = m.current.get(e.status) ?? 0;
|
|
2129
|
+
y(n, d, p, _ * 2.5, g, .2 + v * .15);
|
|
2130
|
+
let b = n.createRadialGradient(d, p - _ * .2, 0, d, p, _);
|
|
2131
|
+
b.addColorStop(0, h(g, .8 + v * .2)), b.addColorStop(1, h(g, .4 + v * .1)), n.beginPath(), n.arc(d, p, _, 0, Math.PI * 2), n.fillStyle = b, n.fill(), n.font = "bold " + f.font, n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = h(u.t1, .9), n.fillText(e.status, d, p), T(S.current, e.status, d, p, _ + 6, {
|
|
2122
2132
|
label: e.status,
|
|
2123
|
-
value: `${e.count}
|
|
2124
|
-
sublabel: `${Math.round((e.count ?? 0) / (
|
|
2125
|
-
color:
|
|
2133
|
+
value: r ? `${e.count} ${r}` : String(e.count),
|
|
2134
|
+
sublabel: `${Math.round((e.count ?? 0) / (s || 1) * 100)}%`,
|
|
2135
|
+
color: g
|
|
2126
2136
|
});
|
|
2127
2137
|
});
|
|
2128
|
-
let
|
|
2129
|
-
y(
|
|
2130
|
-
let v =
|
|
2131
|
-
v.addColorStop(0, h(u.t2, .9)), v.addColorStop(1, h(u.t2, .5)),
|
|
2132
|
-
label:
|
|
2133
|
-
value: `${
|
|
2138
|
+
let l = m.current.get("center") ?? 0;
|
|
2139
|
+
y(n, i, a, 36, u.t2, .2 + l * .15);
|
|
2140
|
+
let v = n.createRadialGradient(i, a - 4, 0, i, a, 22);
|
|
2141
|
+
v.addColorStop(0, h(u.t2, .9)), v.addColorStop(1, h(u.t2, .5)), n.beginPath(), n.arc(i, a, 22, 0, Math.PI * 2), n.fillStyle = v, n.fill(), n.font = p.font, n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = h(u.t1, .9), n.fillText(t ?? "", i, a - 4), n.font = "bold " + f.font, n.fillStyle = u.t1, n.fillText(String(s), i, a + 8), T(S.current, "center", i, a, 28, {
|
|
2142
|
+
label: t ?? "Total",
|
|
2143
|
+
value: r ? `${s} ${r}` : String(s),
|
|
2134
2144
|
color: u.t2
|
|
2135
|
-
}), x(
|
|
2145
|
+
}), x(n, Y, X, e, .015), _ = requestAnimationFrame(C);
|
|
2136
2146
|
};
|
|
2137
|
-
return
|
|
2138
|
-
}, [
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2147
|
+
return C(), () => cancelAnimationFrame(_);
|
|
2148
|
+
}, [
|
|
2149
|
+
E,
|
|
2150
|
+
t,
|
|
2151
|
+
r
|
|
2152
|
+
]), E.length === 0 ? /* @__PURE__ */ s(L, {
|
|
2153
|
+
width: Y,
|
|
2154
|
+
height: X,
|
|
2155
|
+
"data-testid": o
|
|
2142
2156
|
}) : /* @__PURE__ */ c("div", {
|
|
2143
|
-
"data-testid":
|
|
2157
|
+
"data-testid": o,
|
|
2144
2158
|
style: {
|
|
2145
2159
|
position: "relative",
|
|
2146
|
-
width:
|
|
2147
|
-
height:
|
|
2160
|
+
width: Y,
|
|
2161
|
+
height: X
|
|
2148
2162
|
},
|
|
2149
2163
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2150
|
-
ref:
|
|
2164
|
+
ref: l,
|
|
2151
2165
|
role: "img",
|
|
2152
2166
|
"aria-label": t ?? "EW status arc visualization",
|
|
2153
2167
|
style: {
|
|
2154
|
-
width:
|
|
2155
|
-
height:
|
|
2168
|
+
width: Y,
|
|
2169
|
+
height: X,
|
|
2156
2170
|
display: "block",
|
|
2157
2171
|
borderRadius: 8
|
|
2158
2172
|
}
|
|
2159
2173
|
}), /* @__PURE__ */ s(C, {
|
|
2160
|
-
...
|
|
2161
|
-
parentW:
|
|
2162
|
-
parentH:
|
|
2174
|
+
..._,
|
|
2175
|
+
parentW: Y,
|
|
2176
|
+
parentH: X
|
|
2163
2177
|
})]
|
|
2164
2178
|
});
|
|
2165
2179
|
}
|
|
2166
2180
|
//#endregion
|
|
2167
2181
|
//#region src/components/trendChart/TrendChart.tsx
|
|
2168
|
-
var
|
|
2169
|
-
function
|
|
2182
|
+
var It = 280, Z = 96;
|
|
2183
|
+
function Lt({ points: e = [], className: t, colors: r }) {
|
|
2170
2184
|
let o = a(null), d = a(/* @__PURE__ */ new Map()), f = a(0), p = i(() => e.filter(Array.isArray).map(([e, t]) => {
|
|
2171
2185
|
let n = String(t).match(/-?\d+(\.\d+)?/);
|
|
2172
2186
|
return {
|
|
@@ -2174,18 +2188,18 @@ function Rt({ points: e = [], className: t, colors: r }) {
|
|
|
2174
2188
|
value: n ? Number(n[0]) : 0
|
|
2175
2189
|
};
|
|
2176
2190
|
}), [e]), { mouseRef: m, hoveredRef: g, tooltip: _, hitZonesRef: b } = w(o, {
|
|
2177
|
-
width:
|
|
2178
|
-
height:
|
|
2191
|
+
width: It,
|
|
2192
|
+
height: Z
|
|
2179
2193
|
});
|
|
2180
2194
|
return n(() => {
|
|
2181
2195
|
let e = o.current;
|
|
2182
2196
|
if (!e) return;
|
|
2183
|
-
let t = v(e,
|
|
2197
|
+
let t = v(e, It, Z);
|
|
2184
2198
|
f.current = 0;
|
|
2185
2199
|
let n = r?.line ?? u.blue, i = r?.point ?? u.blue, a = r?.axisLine ?? u.bd, s, c = () => {
|
|
2186
2200
|
f.current++;
|
|
2187
2201
|
let e = f.current;
|
|
2188
|
-
if (t.clearRect(0, 0,
|
|
2202
|
+
if (t.clearRect(0, 0, It, Z), p.length < 2) {
|
|
2189
2203
|
s = requestAnimationFrame(c);
|
|
2190
2204
|
return;
|
|
2191
2205
|
}
|
|
@@ -2194,9 +2208,9 @@ function Rt({ points: e = [], className: t, colors: r }) {
|
|
|
2194
2208
|
right: 12,
|
|
2195
2209
|
top: 16,
|
|
2196
2210
|
bottom: 20
|
|
2197
|
-
}, o =
|
|
2198
|
-
if (N(d.current, g.current), b.current = [], t.strokeStyle = h(a, .3), t.lineWidth = .5, t.setLineDash([]), t.beginPath(), t.moveTo(r.left,
|
|
2199
|
-
t.fillText(e.label.replace("Day ", "D"), C(n),
|
|
2211
|
+
}, o = It - r.left - r.right, l = Z - r.top - r.bottom, _ = p.map((e) => e.value), v = Math.min(..._), x = Math.max(..._) - v || 1, C = (e) => r.left + e / (p.length - 1) * o, w = (e) => r.top + (1 - (e - v) / x) * l, E = 1 - (1 - Math.min(e / 48, 1)) ** 3, D = Math.max(2, Math.floor(E * p.length));
|
|
2212
|
+
if (N(d.current, g.current), b.current = [], t.strokeStyle = h(a, .3), t.lineWidth = .5, t.setLineDash([]), t.beginPath(), t.moveTo(r.left, Z - r.bottom), t.lineTo(It - r.right, Z - r.bottom), t.stroke(), t.font = "9px 'JetBrains Mono', monospace", t.fillStyle = h(u.t4, .9), t.textAlign = "center", p.forEach((e, n) => {
|
|
2213
|
+
t.fillText(e.label.replace("Day ", "D"), C(n), Z - 4);
|
|
2200
2214
|
}), m.current.over && g.current) {
|
|
2201
2215
|
let e = parseInt(g.current.split("-")[1]);
|
|
2202
2216
|
isNaN(e) || S(t, C(e), r.top, r.top + l);
|
|
@@ -2232,90 +2246,90 @@ function Rt({ points: e = [], className: t, colors: r }) {
|
|
|
2232
2246
|
children: /* @__PURE__ */ c("div", {
|
|
2233
2247
|
style: {
|
|
2234
2248
|
position: "relative",
|
|
2235
|
-
width:
|
|
2236
|
-
height:
|
|
2249
|
+
width: It,
|
|
2250
|
+
height: Z
|
|
2237
2251
|
},
|
|
2238
2252
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2239
2253
|
ref: o,
|
|
2240
2254
|
role: "img",
|
|
2241
2255
|
"aria-label": "trend chart",
|
|
2242
2256
|
style: {
|
|
2243
|
-
width:
|
|
2244
|
-
height:
|
|
2257
|
+
width: It,
|
|
2258
|
+
height: Z,
|
|
2245
2259
|
display: "block",
|
|
2246
2260
|
borderRadius: 8
|
|
2247
2261
|
}
|
|
2248
2262
|
}), /* @__PURE__ */ s(C, {
|
|
2249
2263
|
..._,
|
|
2250
|
-
parentW:
|
|
2251
|
-
parentH:
|
|
2264
|
+
parentW: It,
|
|
2265
|
+
parentH: Z
|
|
2252
2266
|
})]
|
|
2253
2267
|
})
|
|
2254
2268
|
});
|
|
2255
2269
|
}
|
|
2256
2270
|
//#endregion
|
|
2257
2271
|
//#region src/components/segmentedSplitBarChart/SegmentedSplitBarChart.tsx
|
|
2258
|
-
function
|
|
2272
|
+
function Rt(e, t, n) {
|
|
2259
2273
|
if (e.measureText(t).width <= n) return t;
|
|
2260
2274
|
let r = t;
|
|
2261
2275
|
for (; r.length > 0 && e.measureText(r + "…").width > n;) r = r.slice(0, -1);
|
|
2262
2276
|
return r + "…";
|
|
2263
2277
|
}
|
|
2264
|
-
var
|
|
2265
|
-
function
|
|
2266
|
-
let r = a(null), l = a(/* @__PURE__ */ new Map()), d = a(0), [g, _] = o(!1), b = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), x = i(() => g ? b : b.slice(0,
|
|
2267
|
-
width:
|
|
2278
|
+
var zt = 680, Bt = 8, Vt = 26, Ht = 14, Ut = 16, Wt = 32;
|
|
2279
|
+
function Gt({ items: e = [], "data-testid": t }) {
|
|
2280
|
+
let r = a(null), l = a(/* @__PURE__ */ new Map()), d = a(0), [g, _] = o(!1), b = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), x = i(() => g ? b : b.slice(0, Bt), [b, g]), S = Ut + Wt + x.length * (Vt + Ht) - Ht, { hoveredRef: T, tooltip: D, hitZonesRef: k } = w(r, {
|
|
2281
|
+
width: zt,
|
|
2268
2282
|
height: S
|
|
2269
2283
|
});
|
|
2270
2284
|
return n(() => {
|
|
2271
2285
|
let e = r.current;
|
|
2272
2286
|
if (!e) return;
|
|
2273
|
-
let t = v(e,
|
|
2287
|
+
let t = v(e, zt, S);
|
|
2274
2288
|
d.current = 0;
|
|
2275
|
-
let n =
|
|
2289
|
+
let n = Ut, i = Wt, a = Vt, o = Ht, s = zt - 60 - 28, c = Math.max(...x.map((e) => (e.implemented ?? 0) + (e.unimplemented ?? 0)), 1), g = x.length * (a + o) - o, _ = n + (S - n - i - g) / 2, b, C = () => {
|
|
2276
2290
|
d.current++;
|
|
2277
2291
|
let e = d.current;
|
|
2278
|
-
t.clearRect(0, 0,
|
|
2292
|
+
t.clearRect(0, 0, zt, S);
|
|
2279
2293
|
let n = O(Math.min(e / 60, 1));
|
|
2280
2294
|
N(l.current, T.current), k.current = [], x.forEach((e, r) => {
|
|
2281
2295
|
let i = M(n, r, x.length, O), d = _ + r * (a + o), m = (e.implemented ?? 0) + (e.unimplemented ?? 0), g = (e.implemented ?? 0) / c * s * i, v = (e.unimplemented ?? 0) / c * s * i, b = `${e.id}-impl`, S = `${e.id}-un`, C = l.current.get(b) ?? 0, w = l.current.get(S) ?? 0;
|
|
2282
2296
|
E(k.current, b, 60, d, g || 1, a, {
|
|
2283
2297
|
label: `${e.name} — Implemented`,
|
|
2284
|
-
value: `${e.implemented ?? 0} variations`,
|
|
2298
|
+
value: `${U(e.implemented ?? 0)} variations`,
|
|
2285
2299
|
sublabel: `${Math.round((e.implemented ?? 0) / (m || 1) * 100)}% complete`,
|
|
2286
2300
|
color: u.green
|
|
2287
2301
|
}), E(k.current, S, 60 + g, d, v || 1, a, {
|
|
2288
2302
|
label: `${e.name} — Unimplemented`,
|
|
2289
|
-
value: `${e.unimplemented ?? 0} variations`,
|
|
2303
|
+
value: `${U(e.unimplemented ?? 0)} variations`,
|
|
2290
2304
|
sublabel: `${Math.round((e.unimplemented ?? 0) / (m || 1) * 100)}% pending`,
|
|
2291
2305
|
color: u.amber
|
|
2292
|
-
}), t.font = f.font, t.fillStyle = u.t2, t.textAlign = "right", t.fillText(
|
|
2306
|
+
}), t.font = f.font, t.fillStyle = u.t2, t.textAlign = "right", t.fillText(Rt(t, e.abbreviation ?? e.name ?? "", 44), 52, d + a / 2 + 4), t.fillStyle = h(u.bd, .15), t.beginPath(), t.roundRect(60, d, m / c * s, a, 4), t.fill(), g > 0 && (C > 0 && y(t, 60 + g / 2, d + a / 2, g * .3, u.green, .12 * C), t.fillStyle = h(u.green, .6 + C * .2), t.beginPath(), t.roundRect(60, d, g, a, [
|
|
2293
2307
|
4,
|
|
2294
2308
|
0,
|
|
2295
2309
|
0,
|
|
2296
2310
|
4
|
|
2297
|
-
]), t.fill(), g > 28 && i > .5 && (t.font = p.font, t.fillStyle = C > 0 ? u.green : u.t2, t.textAlign = "center", t.fillText(
|
|
2311
|
+
]), t.fill(), g > 28 && i > .5 && (t.font = p.font, t.fillStyle = C > 0 ? u.green : u.t2, t.textAlign = "center", t.fillText(U(e.implemented ?? 0), 60 + g / 2, d + a / 2 + 4))), v > 0 && (w > 0 && y(t, 60 + g + v / 2, d + a / 2, v * .3, u.amber, .12 * w), t.fillStyle = h(u.amber, .18 + w * .18), t.strokeStyle = h(u.amber, .3 + w * .3), t.lineWidth = 1, t.beginPath(), t.roundRect(60 + g, d, v, a, [
|
|
2298
2312
|
0,
|
|
2299
2313
|
4,
|
|
2300
2314
|
4,
|
|
2301
2315
|
0
|
|
2302
|
-
]), t.fill(), t.stroke(), v > 28 && i > .5 && (t.font = p.font, t.fillStyle = w > 0 ? u.amber : u.t2, t.textAlign = "center", t.fillText(
|
|
2316
|
+
]), t.fill(), t.stroke(), v > 28 && i > .5 && (t.font = p.font, t.fillStyle = w > 0 ? u.amber : u.t2, t.textAlign = "center", t.fillText(U(e.unimplemented ?? 0), 60 + g + v / 2, d + a / 2 + 4))), g > 0 && v > 0 && (t.strokeStyle = h(u.bg, .7), t.lineWidth = 2, t.beginPath(), t.moveTo(60 + g, d), t.lineTo(60 + g, d + a), t.stroke());
|
|
2303
2317
|
});
|
|
2304
2318
|
let r = _ + g + 24, i = 60 + s / 2;
|
|
2305
2319
|
t.font = m.font, t.textAlign = "right", t.fillStyle = u.green, t.fillText("■ Implemented", i - 10, r), t.textAlign = "left", t.fillStyle = m.color, t.fillText("■ Unimplemented", i + 10, r), b = requestAnimationFrame(C);
|
|
2306
2320
|
};
|
|
2307
2321
|
return C(), () => cancelAnimationFrame(b);
|
|
2308
|
-
}, [x, S]), b.length === 0 ? /* @__PURE__ */ s(
|
|
2309
|
-
width:
|
|
2322
|
+
}, [x, S]), b.length === 0 ? /* @__PURE__ */ s(L, {
|
|
2323
|
+
width: zt,
|
|
2310
2324
|
height: 160,
|
|
2311
2325
|
"data-testid": t
|
|
2312
2326
|
}) : /* @__PURE__ */ c("div", {
|
|
2313
2327
|
"data-testid": t,
|
|
2314
|
-
style: { width:
|
|
2328
|
+
style: { width: zt },
|
|
2315
2329
|
children: [/* @__PURE__ */ c("div", {
|
|
2316
2330
|
style: {
|
|
2317
2331
|
position: "relative",
|
|
2318
|
-
width:
|
|
2332
|
+
width: zt,
|
|
2319
2333
|
height: S
|
|
2320
2334
|
},
|
|
2321
2335
|
children: [/* @__PURE__ */ s("canvas", {
|
|
@@ -2323,18 +2337,18 @@ function Kt({ items: e = [], "data-testid": t }) {
|
|
|
2323
2337
|
role: "img",
|
|
2324
2338
|
"aria-label": "Implemented vs unimplemented variations per contractor — split bar",
|
|
2325
2339
|
style: {
|
|
2326
|
-
width:
|
|
2340
|
+
width: zt,
|
|
2327
2341
|
height: S,
|
|
2328
2342
|
display: "block"
|
|
2329
2343
|
}
|
|
2330
2344
|
}), /* @__PURE__ */ s(C, {
|
|
2331
2345
|
...D,
|
|
2332
|
-
parentW:
|
|
2346
|
+
parentW: zt,
|
|
2333
2347
|
parentH: S
|
|
2334
2348
|
})]
|
|
2335
|
-
}), b.length >
|
|
2349
|
+
}), b.length > Bt && /* @__PURE__ */ s("div", {
|
|
2336
2350
|
style: { marginTop: 8 },
|
|
2337
|
-
children: /* @__PURE__ */ s(
|
|
2351
|
+
children: /* @__PURE__ */ s(ie, {
|
|
2338
2352
|
expanded: g,
|
|
2339
2353
|
onToggle: () => _((e) => !e)
|
|
2340
2354
|
})
|
|
@@ -2343,18 +2357,18 @@ function Kt({ items: e = [], "data-testid": t }) {
|
|
|
2343
2357
|
}
|
|
2344
2358
|
//#endregion
|
|
2345
2359
|
//#region src/components/weeklyFlow/WeeklyFlow.tsx
|
|
2346
|
-
var
|
|
2347
|
-
function
|
|
2360
|
+
var Kt = 800, qt = 360;
|
|
2361
|
+
function Jt({ items: e = [], "data-testid": t }) {
|
|
2348
2362
|
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: m, hitZonesRef: g } = w(r, {
|
|
2349
|
-
width:
|
|
2350
|
-
height:
|
|
2363
|
+
width: Kt,
|
|
2364
|
+
height: qt
|
|
2351
2365
|
});
|
|
2352
2366
|
return n(() => {
|
|
2353
2367
|
let t = r.current;
|
|
2354
2368
|
if (!t) return;
|
|
2355
|
-
let n = v(t,
|
|
2369
|
+
let n = v(t, Kt, qt);
|
|
2356
2370
|
o.current = 0;
|
|
2357
|
-
let a = e.reduce((e, t) => e + (t.base ?? 0), 0), s = e.reduce((e, t) => e + (t.variation ?? 0), 0), c = e.reduce((e, t) => e + (t.total ?? 0), 0), m =
|
|
2371
|
+
let a = e.reduce((e, t) => e + (t.base ?? 0), 0), s = e.reduce((e, t) => e + (t.variation ?? 0), 0), c = e.reduce((e, t) => e + (t.total ?? 0), 0), m = qt - 20 - 26, _ = m - 6 * (e.length - 1), b = 20, x = e.map((e, t) => {
|
|
2358
2372
|
let n = Math.max(24, (e.total ?? 0) / (c || 1) * _), r = {
|
|
2359
2373
|
x: 100 - 110 / 2,
|
|
2360
2374
|
y: b,
|
|
@@ -2364,7 +2378,7 @@ function Yt({ items: e = [], "data-testid": t }) {
|
|
|
2364
2378
|
color: d[t % d.length]
|
|
2365
2379
|
};
|
|
2366
2380
|
return b += n + 6, r;
|
|
2367
|
-
}), S = _ - 14, C = Math.max(28, a / c * S), w = Math.max(18, s / c * S), T = 20 + (m - (C + w + 14)) / 2, O = {
|
|
2381
|
+
}), S = _ - 14, C = Math.max(28, a / (c || 1) * S), w = Math.max(18, s / (c || 1) * S), T = 20 + (m - (C + w + 14)) / 2, O = {
|
|
2368
2382
|
x: 420 - 110 / 2,
|
|
2369
2383
|
y: T,
|
|
2370
2384
|
h: C,
|
|
@@ -2382,16 +2396,16 @@ function Yt({ items: e = [], "data-testid": t }) {
|
|
|
2382
2396
|
}, j, P = () => {
|
|
2383
2397
|
o.current++;
|
|
2384
2398
|
let t = o.current;
|
|
2385
|
-
n.clearRect(0, 0,
|
|
2399
|
+
n.clearRect(0, 0, Kt, qt), n.letterSpacing = f.letterSpacing;
|
|
2386
2400
|
let r = D(Math.min(t / 80, 1));
|
|
2387
2401
|
if (N(i.current, l.current), g.current = [], e.forEach((t, o) => {
|
|
2388
2402
|
let c = x[o], l = M(r, o, e.length, D), u = i.current.get(t.id) ?? 0;
|
|
2389
2403
|
if (l < .01) return;
|
|
2390
2404
|
let d = (t.base ?? 0) / (t.total || 1), f = (t.variation ?? 0) / (t.total || 1), p = c.h * d, m = c.h * f, h = c.y + p / 2, g = c.y + p + m / 2, _ = Math.max(2, (t.base ?? 0) / a * C), v = Math.max(2, (t.variation ?? 0) / s * w), y = O.y + e.slice(0, o).reduce((e, t) => e + (t.base ?? 0) / a * C, 0) + _ / 2, b = k.y + e.slice(0, o).reduce((e, t) => e + (t.variation ?? 0) / s * w, 0) + v / 2, S = u * .2 + .18;
|
|
2391
|
-
|
|
2405
|
+
Yt(n, c.x + 110, h, 420 - 110 / 2, y, _ * l, c.color, S), Yt(n, c.x + 110, g, 420 - 110 / 2, b, v * l, c.color, S * .75);
|
|
2392
2406
|
}), r > .3) {
|
|
2393
2407
|
let e = Math.min(1, (r - .3) / .7), t = A.y + a / c * m / 2, i = A.y + m - s / c * m / 2;
|
|
2394
|
-
|
|
2408
|
+
Yt(n, 475, O.cy, 720 - 110 / 2, t, C * e, u.blue, .25 * e), Yt(n, 475, k.cy, 720 - 110 / 2, i, w * e, u.amber, .22 * e);
|
|
2395
2409
|
}
|
|
2396
2410
|
if ([
|
|
2397
2411
|
"Contractors",
|
|
@@ -2403,7 +2417,7 @@ function Yt({ items: e = [], "data-testid": t }) {
|
|
|
2403
2417
|
420,
|
|
2404
2418
|
720
|
|
2405
2419
|
][t];
|
|
2406
|
-
n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText(e, r,
|
|
2420
|
+
n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText(e, r, qt - 8);
|
|
2407
2421
|
}), e.forEach((t, a) => {
|
|
2408
2422
|
let o = x[a], s = M(r, a, e.length, D), c = i.current.get(t.id) ?? 0;
|
|
2409
2423
|
E(g.current, t.id, o.x, o.y, 110, o.h, {
|
|
@@ -2411,7 +2425,7 @@ function Yt({ items: e = [], "data-testid": t }) {
|
|
|
2411
2425
|
value: `${t.totalLabel ?? String(t.total ?? 0)} total commitment`,
|
|
2412
2426
|
sublabel: `Base ${t.baseLabel ?? String(t.base ?? 0)} + Variations ${t.variationLabel ?? String(t.variation ?? 0)}`,
|
|
2413
2427
|
color: o.color
|
|
2414
|
-
}), c > 0 && y(n, o.x + 110 / 2, o.cy, 110 * .6, o.color, .12 * c), n.fillStyle = h(o.color, (.3 + c * .15) * s), n.strokeStyle = h(o.color, (.55 + c * .25) * s), n.lineWidth = 1, n.beginPath(), n.roundRect(o.x, o.y, 110 * s, o.h, 4), n.fill(), n.stroke(), s > .6 && o.h >= 24 && (n.globalAlpha = Math.min(1, (s - .6) / .4), n.font = f.font, n.fillStyle = c > 0 ? o.color : h(u.t2, .9), n.textAlign = "center", n.textBaseline = "middle", n.fillText(t.abbreviation ?? t.name
|
|
2428
|
+
}), c > 0 && y(n, o.x + 110 / 2, o.cy, 110 * .6, o.color, .12 * c), n.fillStyle = h(o.color, (.3 + c * .15) * s), n.strokeStyle = h(o.color, (.55 + c * .25) * s), n.lineWidth = 1, n.beginPath(), n.roundRect(o.x, o.y, 110 * s, o.h, 4), n.fill(), n.stroke(), s > .6 && o.h >= 24 && (n.globalAlpha = Math.min(1, (s - .6) / .4), n.font = f.font, n.fillStyle = c > 0 ? o.color : h(u.t2, .9), n.textAlign = "center", n.textBaseline = "middle", n.fillText(t.abbreviation ?? t.name?.slice(0, 6) ?? "", o.x + 110 / 2, o.h >= 36 ? o.cy - 5 : o.cy), o.h >= 36 && (n.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = h(u.t3, .8), n.fillText(t.totalLabel ?? String(t.total ?? 0), o.x + 110 / 2, o.cy + 7)), n.globalAlpha = 1, n.textBaseline = "alphabetic");
|
|
2415
2429
|
}), r > .2) {
|
|
2416
2430
|
let e = Math.min(1, (r - .2) / .4);
|
|
2417
2431
|
y(n, 420, O.cy, 30, u.blue, .1 * e), n.fillStyle = h(u.blue, .3 * e), n.strokeStyle = h(u.blue, .5 * e), n.lineWidth = 1, n.beginPath(), n.roundRect(O.x, O.y, 110, O.h * e, 4), n.fill(), n.stroke(), n.globalAlpha = e, n.textBaseline = "middle", n.font = f.font, n.fillStyle = u.blue, n.textAlign = "center", n.fillText("Base Value", 420, O.cy - 6), n.font = p.font, n.fillStyle = p.color, n.fillText(`£${a}M`, 420, O.cy + 8), n.globalAlpha = 1, n.textBaseline = "alphabetic", y(n, 420, k.cy, 24, u.amber, .1 * e), n.fillStyle = h(u.amber, .22 * e), n.strokeStyle = h(u.amber, .4 * e), n.beginPath(), n.roundRect(k.x, k.y, 110, k.h * e, 4), n.fill(), n.stroke(), n.globalAlpha = e, n.textBaseline = "middle", n.font = f.font, n.fillStyle = u.amber, n.textAlign = "center", n.fillText("Variations", 420, k.cy - 4), n.font = p.font, n.fillStyle = p.color, n.fillText(`£${s}M`, 420, k.cy + 8), n.globalAlpha = 1, n.textBaseline = "alphabetic";
|
|
@@ -2427,113 +2441,113 @@ function Yt({ items: e = [], "data-testid": t }) {
|
|
|
2427
2441
|
"data-testid": t,
|
|
2428
2442
|
style: {
|
|
2429
2443
|
position: "relative",
|
|
2430
|
-
width:
|
|
2431
|
-
height:
|
|
2444
|
+
width: Kt,
|
|
2445
|
+
height: qt
|
|
2432
2446
|
},
|
|
2433
2447
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2434
2448
|
ref: r,
|
|
2435
2449
|
role: "img",
|
|
2436
2450
|
"aria-label": "Weekly report flow — base value and variations per contractor flowing to total commitment",
|
|
2437
2451
|
style: {
|
|
2438
|
-
width:
|
|
2439
|
-
height:
|
|
2452
|
+
width: Kt,
|
|
2453
|
+
height: qt,
|
|
2440
2454
|
display: "block"
|
|
2441
2455
|
}
|
|
2442
2456
|
}), /* @__PURE__ */ s(C, {
|
|
2443
2457
|
...m,
|
|
2444
|
-
parentW:
|
|
2445
|
-
parentH:
|
|
2458
|
+
parentW: Kt,
|
|
2459
|
+
parentH: qt
|
|
2446
2460
|
})]
|
|
2447
2461
|
});
|
|
2448
2462
|
}
|
|
2449
|
-
function
|
|
2463
|
+
function Yt(e, t, n, r, i, a, o, s) {
|
|
2450
2464
|
let c = (t + r) / 2;
|
|
2451
2465
|
e.beginPath(), e.moveTo(t, n - a / 2), e.bezierCurveTo(c, n - a / 2, c, i - a / 2, r, i - a / 2), e.lineTo(r, i + a / 2), e.bezierCurveTo(c, i + a / 2, c, n + a / 2, t, n + a / 2), e.closePath(), e.fillStyle = h(o, s), e.fill();
|
|
2452
2466
|
}
|
|
2453
2467
|
//#endregion
|
|
2454
2468
|
//#region src/components/visualizationRenderer/VisualizationRenderer.tsx
|
|
2455
|
-
function
|
|
2456
|
-
return e.type === "line" ? /* @__PURE__ */ s(
|
|
2469
|
+
function Xt({ config: e, className: t }) {
|
|
2470
|
+
return e.type === "line" ? /* @__PURE__ */ s(Be, {
|
|
2457
2471
|
rows: e.rows,
|
|
2458
2472
|
className: t
|
|
2459
|
-
}) : e.type === "area" ? /* @__PURE__ */ s(
|
|
2473
|
+
}) : e.type === "area" ? /* @__PURE__ */ s(I, {
|
|
2460
2474
|
rows: e.rows,
|
|
2461
2475
|
className: t
|
|
2462
|
-
}) : e.type === "bar" ? /* @__PURE__ */ s(
|
|
2476
|
+
}) : e.type === "bar" ? /* @__PURE__ */ s(re, {
|
|
2463
2477
|
rows: e.rows,
|
|
2464
2478
|
className: t
|
|
2465
|
-
}) : e.type === "pie" ? /* @__PURE__ */ s(
|
|
2479
|
+
}) : e.type === "pie" ? /* @__PURE__ */ s(Qe, {
|
|
2466
2480
|
rows: e.rows,
|
|
2467
2481
|
variant: "pie",
|
|
2468
2482
|
className: t
|
|
2469
|
-
}) : e.type === "donut" ? /* @__PURE__ */ s(
|
|
2483
|
+
}) : e.type === "donut" ? /* @__PURE__ */ s(Qe, {
|
|
2470
2484
|
rows: e.rows,
|
|
2471
2485
|
variant: "donut",
|
|
2472
2486
|
className: t
|
|
2473
|
-
}) : e.type === "sankey" ? /* @__PURE__ */ s(
|
|
2487
|
+
}) : e.type === "sankey" ? /* @__PURE__ */ s(lt, {
|
|
2474
2488
|
rows: e.rows,
|
|
2475
2489
|
className: t
|
|
2476
|
-
}) : e.type === "flow" ? /* @__PURE__ */ s(
|
|
2490
|
+
}) : e.type === "flow" ? /* @__PURE__ */ s(ct, {
|
|
2477
2491
|
selectedEntity: e.selectedEntity,
|
|
2478
2492
|
className: t
|
|
2479
|
-
}) : e.type === "trend" ? /* @__PURE__ */ s(
|
|
2493
|
+
}) : e.type === "trend" ? /* @__PURE__ */ s(Lt, {
|
|
2480
2494
|
points: e.points,
|
|
2481
2495
|
className: t
|
|
2482
|
-
}) : e.type === "mini-bars" ? /* @__PURE__ */ s(
|
|
2496
|
+
}) : e.type === "mini-bars" ? /* @__PURE__ */ s(Ue, {
|
|
2483
2497
|
rows: e.rows,
|
|
2484
2498
|
className: t
|
|
2485
|
-
}) : e.type === "stacked-horizontal-bar-chart" ? /* @__PURE__ */ s(Ae, { data: e.data }) : e.type === "multi-metric-constellation-chart" ? /* @__PURE__ */ s(Se, { items: e.items }) : e.type === "progress-race-chart" ? /* @__PURE__ */ s(
|
|
2499
|
+
}) : e.type === "stacked-horizontal-bar-chart" ? /* @__PURE__ */ s(Ae, { data: e.data }) : e.type === "multi-metric-constellation-chart" ? /* @__PURE__ */ s(Se, { items: e.items }) : e.type === "progress-race-chart" ? /* @__PURE__ */ s(de, { items: e.items }) : e.type === "hub-and-spoke-radial-chart" ? /* @__PURE__ */ s(Ft, {
|
|
2486
2500
|
segments: e.segments,
|
|
2487
|
-
title: e.title
|
|
2488
|
-
|
|
2501
|
+
title: e.title,
|
|
2502
|
+
unitLabel: e.unitLabel
|
|
2503
|
+
}) : e.type === "dot-matrix-chart" ? /* @__PURE__ */ s(ze, { items: e.items }) : e.type === "ranked-card-leaderboard" ? /* @__PURE__ */ s(Re, { items: e.items }) : e.type === "proportional-band-chart" ? /* @__PURE__ */ s(Mt, { severities: e.severities }) : e.type === "radial-fan-tree-chart" ? /* @__PURE__ */ s(Je, {
|
|
2489
2504
|
total: e.total,
|
|
2490
2505
|
totalLabel: e.totalLabel,
|
|
2491
2506
|
items: e.items
|
|
2492
|
-
}) : e.type === "semi-circular-gauge-chart" ? /* @__PURE__ */ s(
|
|
2493
|
-
value: e.value,
|
|
2507
|
+
}) : e.type === "semi-circular-gauge-chart" ? /* @__PURE__ */ s(me, {
|
|
2494
2508
|
confirmed: e.confirmed,
|
|
2495
2509
|
total: e.total
|
|
2496
|
-
}) : e.type === "segmented-split-bar-chart" ? /* @__PURE__ */ s(
|
|
2510
|
+
}) : e.type === "segmented-split-bar-chart" ? /* @__PURE__ */ s(Gt, { items: e.items }) : e.type === "balance-scale-chart" ? /* @__PURE__ */ s(ft, {
|
|
2497
2511
|
left: e.left,
|
|
2498
2512
|
right: e.right
|
|
2499
|
-
}) : e.type === "area-line-chart" ? /* @__PURE__ */ s(
|
|
2513
|
+
}) : e.type === "area-line-chart" ? /* @__PURE__ */ s(mt, { points: e.points }) : e.type === "trend-view" ? /* @__PURE__ */ s(Tt, { points: e.points }) : e.type === "weekly-flow" ? /* @__PURE__ */ s(Jt, { items: e.items }) : /* @__PURE__ */ s("div", {
|
|
2500
2514
|
className: "viz-empty",
|
|
2501
2515
|
children: "Visualization unavailable"
|
|
2502
2516
|
});
|
|
2503
2517
|
}
|
|
2504
2518
|
//#endregion
|
|
2505
2519
|
//#region src/utils/mounts.tsx
|
|
2506
|
-
var
|
|
2507
|
-
function
|
|
2520
|
+
var Zt = [];
|
|
2521
|
+
function Qt(e) {
|
|
2508
2522
|
try {
|
|
2509
2523
|
return JSON.parse(decodeURIComponent(e));
|
|
2510
2524
|
} catch {
|
|
2511
2525
|
return null;
|
|
2512
2526
|
}
|
|
2513
2527
|
}
|
|
2514
|
-
function
|
|
2515
|
-
for (;
|
|
2516
|
-
let e =
|
|
2528
|
+
function $t() {
|
|
2529
|
+
for (; Zt.length;) {
|
|
2530
|
+
let e = Zt.pop();
|
|
2517
2531
|
e && e.unmount();
|
|
2518
2532
|
}
|
|
2519
2533
|
}
|
|
2520
|
-
function
|
|
2521
|
-
|
|
2534
|
+
function en() {
|
|
2535
|
+
$t(), document.querySelectorAll("[data-d3-viz]").forEach((t) => {
|
|
2522
2536
|
let n = t.dataset.d3Viz;
|
|
2523
2537
|
if (!n) return;
|
|
2524
|
-
let r =
|
|
2538
|
+
let r = Qt(n);
|
|
2525
2539
|
if (!r) return;
|
|
2526
2540
|
let i = e(t);
|
|
2527
|
-
|
|
2541
|
+
Zt.push(i), i.render(/* @__PURE__ */ s(Xt, { config: r }));
|
|
2528
2542
|
});
|
|
2529
2543
|
}
|
|
2530
|
-
function
|
|
2544
|
+
function tn(e) {
|
|
2531
2545
|
return encodeURIComponent(JSON.stringify(e));
|
|
2532
2546
|
}
|
|
2533
2547
|
//#endregion
|
|
2534
2548
|
//#region src/components/donutChart/DonutChart.tsx
|
|
2535
|
-
function
|
|
2536
|
-
return /* @__PURE__ */ s(
|
|
2549
|
+
function nn({ rows: e = [], className: t, colors: n }) {
|
|
2550
|
+
return /* @__PURE__ */ s(Qe, {
|
|
2537
2551
|
rows: e,
|
|
2538
2552
|
variant: "donut",
|
|
2539
2553
|
className: t,
|
|
@@ -2542,7 +2556,7 @@ function rn({ rows: e = [], className: t, colors: n }) {
|
|
|
2542
2556
|
}
|
|
2543
2557
|
//#endregion
|
|
2544
2558
|
//#region src/components/keyHighlights/KeyHighlights.tsx
|
|
2545
|
-
var
|
|
2559
|
+
var Q = {
|
|
2546
2560
|
bg: "transparent",
|
|
2547
2561
|
border: "transparent",
|
|
2548
2562
|
t1: u.t1,
|
|
@@ -2552,15 +2566,15 @@ var Z = {
|
|
|
2552
2566
|
red: u.red,
|
|
2553
2567
|
amber: u.amber,
|
|
2554
2568
|
green: u.green
|
|
2555
|
-
},
|
|
2569
|
+
}, $ = "'Satoshi Variable', 'DM Sans', sans-serif", rn = {
|
|
2556
2570
|
color: "#F7F7F7",
|
|
2557
|
-
fontFamily:
|
|
2571
|
+
fontFamily: $,
|
|
2558
2572
|
fontSize: 24,
|
|
2559
2573
|
fontWeight: 500,
|
|
2560
2574
|
lineHeight: "32px"
|
|
2561
|
-
},
|
|
2575
|
+
}, an = {
|
|
2562
2576
|
color: "#C2C2C2",
|
|
2563
|
-
fontFamily:
|
|
2577
|
+
fontFamily: $,
|
|
2564
2578
|
fontSize: 18,
|
|
2565
2579
|
fontWeight: 400,
|
|
2566
2580
|
lineHeight: "20px"
|
|
@@ -2575,25 +2589,25 @@ function on({ chips: e = [] }) {
|
|
|
2575
2589
|
children: e.map((e, t) => /* @__PURE__ */ c("div", {
|
|
2576
2590
|
style: {
|
|
2577
2591
|
width: 260,
|
|
2578
|
-
height:
|
|
2592
|
+
height: 80,
|
|
2579
2593
|
display: "flex",
|
|
2580
2594
|
alignItems: "baseline",
|
|
2581
2595
|
gap: 8,
|
|
2582
2596
|
padding: "8px 0px",
|
|
2583
|
-
background:
|
|
2584
|
-
border: `1px solid ${
|
|
2597
|
+
background: Q.bg,
|
|
2598
|
+
border: `1px solid ${Q.border}`,
|
|
2585
2599
|
borderRadius: 5,
|
|
2586
2600
|
boxSizing: "border-box"
|
|
2587
2601
|
},
|
|
2588
2602
|
children: [/* @__PURE__ */ s("span", {
|
|
2589
2603
|
style: {
|
|
2590
|
-
...
|
|
2591
|
-
color:
|
|
2604
|
+
...rn,
|
|
2605
|
+
color: Q.t1
|
|
2592
2606
|
},
|
|
2593
2607
|
children: e.value
|
|
2594
2608
|
}), /* @__PURE__ */ s("span", {
|
|
2595
2609
|
style: {
|
|
2596
|
-
|
|
2610
|
+
...an,
|
|
2597
2611
|
flex: 1
|
|
2598
2612
|
},
|
|
2599
2613
|
children: e.label
|
|
@@ -2618,18 +2632,18 @@ function sn({ items: e = [] }) {
|
|
|
2618
2632
|
padding: "24px 0",
|
|
2619
2633
|
gap: 8,
|
|
2620
2634
|
flexShrink: 0,
|
|
2621
|
-
border: `1px solid ${
|
|
2622
|
-
background:
|
|
2635
|
+
border: `1px solid ${Q.border}`,
|
|
2636
|
+
background: Q.bg,
|
|
2623
2637
|
boxSizing: "border-box"
|
|
2624
2638
|
},
|
|
2625
2639
|
children: [/* @__PURE__ */ s("div", {
|
|
2626
2640
|
style: {
|
|
2627
|
-
...
|
|
2628
|
-
color: e.color ??
|
|
2641
|
+
...rn,
|
|
2642
|
+
color: e.color ?? Q.t1
|
|
2629
2643
|
},
|
|
2630
2644
|
children: e.value
|
|
2631
2645
|
}), /* @__PURE__ */ s("div", {
|
|
2632
|
-
style: {
|
|
2646
|
+
style: { ...an },
|
|
2633
2647
|
children: e.label
|
|
2634
2648
|
})]
|
|
2635
2649
|
}, t))
|
|
@@ -2648,28 +2662,28 @@ function cn({ items: e = [] }) {
|
|
|
2648
2662
|
alignItems: "center",
|
|
2649
2663
|
gap: 12,
|
|
2650
2664
|
padding: "9px 0px",
|
|
2651
|
-
background:
|
|
2652
|
-
border: `1px solid ${
|
|
2665
|
+
background: Q.bg,
|
|
2666
|
+
border: `1px solid ${Q.border}`
|
|
2653
2667
|
},
|
|
2654
2668
|
children: [
|
|
2655
2669
|
/* @__PURE__ */ s("span", {
|
|
2656
2670
|
style: {
|
|
2657
2671
|
fontSize: 18,
|
|
2658
2672
|
fontWeight: 500,
|
|
2659
|
-
color:
|
|
2673
|
+
color: Q.t2,
|
|
2660
2674
|
background: "transparent",
|
|
2661
2675
|
padding: "2px 8px",
|
|
2662
2676
|
borderRadius: 4,
|
|
2663
|
-
fontFamily:
|
|
2677
|
+
fontFamily: $,
|
|
2664
2678
|
flexShrink: 0
|
|
2665
2679
|
},
|
|
2666
2680
|
children: e.name
|
|
2667
2681
|
}),
|
|
2668
2682
|
/* @__PURE__ */ s("span", {
|
|
2669
2683
|
style: {
|
|
2670
|
-
...
|
|
2684
|
+
...rn,
|
|
2671
2685
|
fontSize: 18,
|
|
2672
|
-
color:
|
|
2686
|
+
color: Q.t1,
|
|
2673
2687
|
minWidth: 70,
|
|
2674
2688
|
flexShrink: 0
|
|
2675
2689
|
},
|
|
@@ -2677,7 +2691,7 @@ function cn({ items: e = [] }) {
|
|
|
2677
2691
|
}),
|
|
2678
2692
|
/* @__PURE__ */ s("span", {
|
|
2679
2693
|
style: {
|
|
2680
|
-
|
|
2694
|
+
...an,
|
|
2681
2695
|
flex: 1
|
|
2682
2696
|
},
|
|
2683
2697
|
children: e.kpiLabel
|
|
@@ -2703,26 +2717,26 @@ function ln({ items: e = [] }) {
|
|
|
2703
2717
|
padding: "24px 0",
|
|
2704
2718
|
gap: 8,
|
|
2705
2719
|
flexShrink: 0,
|
|
2706
|
-
background:
|
|
2720
|
+
background: Q.bg,
|
|
2707
2721
|
boxSizing: "border-box"
|
|
2708
2722
|
},
|
|
2709
2723
|
children: [/* @__PURE__ */ s("div", {
|
|
2710
2724
|
style: {
|
|
2711
|
-
...
|
|
2712
|
-
color:
|
|
2725
|
+
...rn,
|
|
2726
|
+
color: Q.t1
|
|
2713
2727
|
},
|
|
2714
2728
|
children: e.value
|
|
2715
2729
|
}), /* @__PURE__ */ s("div", {
|
|
2716
|
-
style: {
|
|
2730
|
+
style: { ...an },
|
|
2717
2731
|
children: e.label
|
|
2718
2732
|
})]
|
|
2719
2733
|
}, t))
|
|
2720
2734
|
});
|
|
2721
2735
|
}
|
|
2722
2736
|
var un = {
|
|
2723
|
-
red:
|
|
2724
|
-
amber:
|
|
2725
|
-
green:
|
|
2737
|
+
red: Q.red,
|
|
2738
|
+
amber: Q.amber,
|
|
2739
|
+
green: Q.green
|
|
2726
2740
|
};
|
|
2727
2741
|
function dn({ items: e = [] }) {
|
|
2728
2742
|
return /* @__PURE__ */ s("div", {
|
|
@@ -2731,30 +2745,27 @@ function dn({ items: e = [] }) {
|
|
|
2731
2745
|
flexDirection: "column",
|
|
2732
2746
|
gap: 5
|
|
2733
2747
|
},
|
|
2734
|
-
children: e.map((e, t) => {
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
2738
|
-
|
|
2739
|
-
|
|
2740
|
-
|
|
2741
|
-
|
|
2742
|
-
|
|
2743
|
-
|
|
2744
|
-
|
|
2745
|
-
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
|
|
2750
|
-
|
|
2751
|
-
|
|
2752
|
-
|
|
2753
|
-
|
|
2754
|
-
|
|
2755
|
-
})]
|
|
2756
|
-
}, t);
|
|
2757
|
-
})
|
|
2748
|
+
children: e.map((e, t) => (un[e.severity], /* @__PURE__ */ c("div", {
|
|
2749
|
+
style: {
|
|
2750
|
+
display: "flex",
|
|
2751
|
+
alignItems: "flex-start",
|
|
2752
|
+
gap: 10,
|
|
2753
|
+
padding: "10px 0px",
|
|
2754
|
+
background: Q.bg,
|
|
2755
|
+
border: `1px solid ${Q.border}`
|
|
2756
|
+
},
|
|
2757
|
+
children: [/* @__PURE__ */ s("span", { style: {
|
|
2758
|
+
width: 7,
|
|
2759
|
+
height: 7,
|
|
2760
|
+
borderRadius: "50%",
|
|
2761
|
+
background: u.t2,
|
|
2762
|
+
flexShrink: 0,
|
|
2763
|
+
marginTop: 5
|
|
2764
|
+
} }), /* @__PURE__ */ s("span", {
|
|
2765
|
+
style: { ...an },
|
|
2766
|
+
children: e.text
|
|
2767
|
+
})]
|
|
2768
|
+
}, t)))
|
|
2758
2769
|
});
|
|
2759
2770
|
}
|
|
2760
2771
|
function fn({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
@@ -2781,8 +2792,8 @@ function fn({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
|
2781
2792
|
top: 43,
|
|
2782
2793
|
left: 0,
|
|
2783
2794
|
fontSize: 16,
|
|
2784
|
-
color:
|
|
2785
|
-
fontFamily:
|
|
2795
|
+
color: Q.t4,
|
|
2796
|
+
fontFamily: $
|
|
2786
2797
|
},
|
|
2787
2798
|
children: [e, n]
|
|
2788
2799
|
}),
|
|
@@ -2792,8 +2803,8 @@ function fn({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
|
2792
2803
|
top: 43,
|
|
2793
2804
|
right: 0,
|
|
2794
2805
|
fontSize: 16,
|
|
2795
|
-
color:
|
|
2796
|
-
fontFamily:
|
|
2806
|
+
color: Q.t4,
|
|
2807
|
+
fontFamily: $
|
|
2797
2808
|
},
|
|
2798
2809
|
children: [t, n]
|
|
2799
2810
|
}),
|
|
@@ -2816,7 +2827,7 @@ function fn({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
|
2816
2827
|
style: {
|
|
2817
2828
|
fontSize: 18,
|
|
2818
2829
|
color: o,
|
|
2819
|
-
fontFamily:
|
|
2830
|
+
fontFamily: $,
|
|
2820
2831
|
whiteSpace: "nowrap"
|
|
2821
2832
|
},
|
|
2822
2833
|
children: t.name
|
|
@@ -2825,7 +2836,7 @@ function fn({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
|
2825
2836
|
fontSize: 18,
|
|
2826
2837
|
fontWeight: 500,
|
|
2827
2838
|
color: o,
|
|
2828
|
-
fontFamily:
|
|
2839
|
+
fontFamily: $,
|
|
2829
2840
|
whiteSpace: "nowrap"
|
|
2830
2841
|
},
|
|
2831
2842
|
children: [t.val, n]
|
|
@@ -2848,7 +2859,7 @@ function fn({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
|
2848
2859
|
style: {
|
|
2849
2860
|
fontSize: 18,
|
|
2850
2861
|
color: o,
|
|
2851
|
-
fontFamily:
|
|
2862
|
+
fontFamily: $,
|
|
2852
2863
|
whiteSpace: "nowrap"
|
|
2853
2864
|
},
|
|
2854
2865
|
children: t.name
|
|
@@ -2857,7 +2868,7 @@ function fn({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
|
2857
2868
|
fontSize: 18,
|
|
2858
2869
|
fontWeight: 500,
|
|
2859
2870
|
color: o,
|
|
2860
|
-
fontFamily:
|
|
2871
|
+
fontFamily: $,
|
|
2861
2872
|
whiteSpace: "nowrap"
|
|
2862
2873
|
},
|
|
2863
2874
|
children: [t.val, n]
|
|
@@ -2867,7 +2878,7 @@ function fn({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
|
2867
2878
|
}, r);
|
|
2868
2879
|
})
|
|
2869
2880
|
]
|
|
2870
|
-
}), i && i.length > 0 && /* @__PURE__ */ s(
|
|
2881
|
+
}), i && i.length > 0 && /* @__PURE__ */ s(ln, { items: i })] });
|
|
2871
2882
|
}
|
|
2872
2883
|
function pn({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i, rightLabel: a, rightValue: o, rightColor: l, chips: d }) {
|
|
2873
2884
|
let f = r ?? u.blue, p = l ?? u.blue;
|
|
@@ -2895,7 +2906,7 @@ function pn({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
2895
2906
|
fontSize: 18,
|
|
2896
2907
|
fontWeight: 500,
|
|
2897
2908
|
color: f,
|
|
2898
|
-
fontFamily:
|
|
2909
|
+
fontFamily: $
|
|
2899
2910
|
},
|
|
2900
2911
|
children: n
|
|
2901
2912
|
})
|
|
@@ -2918,7 +2929,7 @@ function pn({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
2918
2929
|
fontSize: 18,
|
|
2919
2930
|
fontWeight: 500,
|
|
2920
2931
|
color: p,
|
|
2921
|
-
fontFamily:
|
|
2932
|
+
fontFamily: $
|
|
2922
2933
|
},
|
|
2923
2934
|
children: o
|
|
2924
2935
|
})
|
|
@@ -2936,7 +2947,7 @@ function pn({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
2936
2947
|
style: {
|
|
2937
2948
|
fontSize: 18,
|
|
2938
2949
|
color: f,
|
|
2939
|
-
fontFamily:
|
|
2950
|
+
fontFamily: $
|
|
2940
2951
|
},
|
|
2941
2952
|
children: [
|
|
2942
2953
|
e,
|
|
@@ -2953,7 +2964,7 @@ function pn({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
2953
2964
|
style: {
|
|
2954
2965
|
fontSize: 18,
|
|
2955
2966
|
color: p,
|
|
2956
|
-
fontFamily:
|
|
2967
|
+
fontFamily: $
|
|
2957
2968
|
},
|
|
2958
2969
|
children: [
|
|
2959
2970
|
i,
|
|
@@ -3016,7 +3027,7 @@ function mn({ pct: e, label: t, color: n, chips: r }) {
|
|
|
3016
3027
|
fontSize: 18,
|
|
3017
3028
|
fontWeight: 500,
|
|
3018
3029
|
color: i,
|
|
3019
|
-
fontFamily:
|
|
3030
|
+
fontFamily: $
|
|
3020
3031
|
},
|
|
3021
3032
|
children: [e, "%"]
|
|
3022
3033
|
})
|
|
@@ -3025,7 +3036,7 @@ function mn({ pct: e, label: t, color: n, chips: r }) {
|
|
|
3025
3036
|
style: { flex: 1 },
|
|
3026
3037
|
children: [/* @__PURE__ */ s("div", {
|
|
3027
3038
|
style: {
|
|
3028
|
-
|
|
3039
|
+
...an,
|
|
3029
3040
|
marginBottom: 10
|
|
3030
3041
|
},
|
|
3031
3042
|
children: t
|
|
@@ -3041,29 +3052,29 @@ function mn({ pct: e, label: t, color: n, chips: r }) {
|
|
|
3041
3052
|
alignItems: "baseline",
|
|
3042
3053
|
gap: 8,
|
|
3043
3054
|
padding: "7px 10px",
|
|
3044
|
-
background:
|
|
3045
|
-
border: `1px solid ${
|
|
3055
|
+
background: Q.bg,
|
|
3056
|
+
border: `1px solid ${Q.border}`,
|
|
3046
3057
|
borderRadius: 5
|
|
3047
3058
|
},
|
|
3048
3059
|
children: [
|
|
3049
3060
|
/* @__PURE__ */ s("span", {
|
|
3050
3061
|
style: {
|
|
3051
|
-
...
|
|
3052
|
-
color:
|
|
3062
|
+
...rn,
|
|
3063
|
+
color: Q.t2
|
|
3053
3064
|
},
|
|
3054
3065
|
children: e.value
|
|
3055
3066
|
}),
|
|
3056
3067
|
/* @__PURE__ */ s("span", {
|
|
3057
3068
|
style: {
|
|
3058
|
-
...
|
|
3059
|
-
color:
|
|
3069
|
+
...rn,
|
|
3070
|
+
color: Q.t2,
|
|
3060
3071
|
fontWeight: 400,
|
|
3061
3072
|
userSelect: "none"
|
|
3062
3073
|
},
|
|
3063
3074
|
children: "|"
|
|
3064
3075
|
}),
|
|
3065
3076
|
/* @__PURE__ */ s("span", {
|
|
3066
|
-
style: {
|
|
3077
|
+
style: { ...an },
|
|
3067
3078
|
children: e.label
|
|
3068
3079
|
})
|
|
3069
3080
|
]
|
|
@@ -3094,19 +3105,19 @@ function _n({ items: e = [] }) {
|
|
|
3094
3105
|
alignItems: "center",
|
|
3095
3106
|
gap: 10,
|
|
3096
3107
|
padding: "8px 0px",
|
|
3097
|
-
background:
|
|
3098
|
-
border: `1px solid ${
|
|
3108
|
+
background: Q.bg,
|
|
3109
|
+
border: `1px solid ${Q.border}`
|
|
3099
3110
|
},
|
|
3100
3111
|
children: [
|
|
3101
3112
|
/* @__PURE__ */ s("span", {
|
|
3102
3113
|
style: {
|
|
3103
3114
|
fontSize: 18,
|
|
3104
3115
|
fontWeight: 500,
|
|
3105
|
-
color:
|
|
3116
|
+
color: Q.t2,
|
|
3106
3117
|
background: "transparent",
|
|
3107
3118
|
padding: "2px 7px",
|
|
3108
3119
|
borderRadius: 4,
|
|
3109
|
-
fontFamily:
|
|
3120
|
+
fontFamily: $,
|
|
3110
3121
|
flexShrink: 0,
|
|
3111
3122
|
minWidth: 62,
|
|
3112
3123
|
textAlign: "center"
|
|
@@ -3124,7 +3135,7 @@ function _n({ items: e = [] }) {
|
|
|
3124
3135
|
children: /* @__PURE__ */ s("div", { style: {
|
|
3125
3136
|
height: "100%",
|
|
3126
3137
|
width: `${e.pct}%`,
|
|
3127
|
-
background: e.color ??
|
|
3138
|
+
background: e.color ?? Q.t2,
|
|
3128
3139
|
borderRadius: 2,
|
|
3129
3140
|
opacity: .75
|
|
3130
3141
|
} })
|
|
@@ -3133,8 +3144,8 @@ function _n({ items: e = [] }) {
|
|
|
3133
3144
|
style: {
|
|
3134
3145
|
fontSize: 18,
|
|
3135
3146
|
fontWeight: 400,
|
|
3136
|
-
color:
|
|
3137
|
-
fontFamily:
|
|
3147
|
+
color: Q.t2,
|
|
3148
|
+
fontFamily: $,
|
|
3138
3149
|
flexShrink: 0,
|
|
3139
3150
|
minWidth: 52,
|
|
3140
3151
|
textAlign: "right"
|
|
@@ -3149,7 +3160,7 @@ function _n({ items: e = [] }) {
|
|
|
3149
3160
|
background: hn[e.badgeSeverity],
|
|
3150
3161
|
padding: "2px 7px",
|
|
3151
3162
|
borderRadius: 4,
|
|
3152
|
-
fontFamily:
|
|
3163
|
+
fontFamily: $,
|
|
3153
3164
|
flexShrink: 0,
|
|
3154
3165
|
minWidth: 72,
|
|
3155
3166
|
textAlign: "center"
|
|
@@ -3158,7 +3169,7 @@ function _n({ items: e = [] }) {
|
|
|
3158
3169
|
}),
|
|
3159
3170
|
e.sublabel && /* @__PURE__ */ s("span", {
|
|
3160
3171
|
style: {
|
|
3161
|
-
|
|
3172
|
+
...an,
|
|
3162
3173
|
flexShrink: 0,
|
|
3163
3174
|
minWidth: 80,
|
|
3164
3175
|
textAlign: "right"
|
|
@@ -3170,9 +3181,9 @@ function _n({ items: e = [] }) {
|
|
|
3170
3181
|
});
|
|
3171
3182
|
}
|
|
3172
3183
|
var vn = {
|
|
3173
|
-
red:
|
|
3174
|
-
amber:
|
|
3175
|
-
green:
|
|
3184
|
+
red: Q.red,
|
|
3185
|
+
amber: Q.amber,
|
|
3186
|
+
green: Q.green
|
|
3176
3187
|
};
|
|
3177
3188
|
function yn({ items: e = [] }) {
|
|
3178
3189
|
return /* @__PURE__ */ s("div", {
|
|
@@ -3200,7 +3211,7 @@ function yn({ items: e = [] }) {
|
|
|
3200
3211
|
background: n + "20",
|
|
3201
3212
|
padding: "2px 7px",
|
|
3202
3213
|
borderRadius: 4,
|
|
3203
|
-
fontFamily:
|
|
3214
|
+
fontFamily: $,
|
|
3204
3215
|
flexShrink: 0
|
|
3205
3216
|
},
|
|
3206
3217
|
children: e.tag
|
|
@@ -3208,13 +3219,13 @@ function yn({ items: e = [] }) {
|
|
|
3208
3219
|
/* @__PURE__ */ s("span", {
|
|
3209
3220
|
style: {
|
|
3210
3221
|
flex: 1,
|
|
3211
|
-
|
|
3222
|
+
...an
|
|
3212
3223
|
},
|
|
3213
3224
|
children: e.text
|
|
3214
3225
|
}),
|
|
3215
3226
|
/* @__PURE__ */ s("span", {
|
|
3216
3227
|
style: {
|
|
3217
|
-
|
|
3228
|
+
...an,
|
|
3218
3229
|
flexShrink: 0,
|
|
3219
3230
|
marginTop: 1
|
|
3220
3231
|
},
|
|
@@ -3238,15 +3249,15 @@ function bn({ columns: e = [], rows: t = [] }) {
|
|
|
3238
3249
|
alignItems: "center",
|
|
3239
3250
|
gap: 10,
|
|
3240
3251
|
padding: "0 0px 6px",
|
|
3241
|
-
borderBottom: `1px solid ${
|
|
3252
|
+
borderBottom: `1px solid ${Q.border}`
|
|
3242
3253
|
},
|
|
3243
3254
|
children: [/* @__PURE__ */ s("div", { style: { minWidth: 64 } }), e.map((e, t) => /* @__PURE__ */ s("div", {
|
|
3244
3255
|
style: {
|
|
3245
3256
|
flex: 1,
|
|
3246
3257
|
fontSize: 18,
|
|
3247
3258
|
fontWeight: 500,
|
|
3248
|
-
color:
|
|
3249
|
-
fontFamily:
|
|
3259
|
+
color: Q.t2,
|
|
3260
|
+
fontFamily: $,
|
|
3250
3261
|
textTransform: "uppercase",
|
|
3251
3262
|
letterSpacing: .6
|
|
3252
3263
|
},
|
|
@@ -3258,18 +3269,18 @@ function bn({ columns: e = [], rows: t = [] }) {
|
|
|
3258
3269
|
alignItems: "center",
|
|
3259
3270
|
gap: 10,
|
|
3260
3271
|
padding: "8px 0px",
|
|
3261
|
-
background:
|
|
3262
|
-
border: `1px solid ${
|
|
3272
|
+
background: Q.bg,
|
|
3273
|
+
border: `1px solid ${Q.border}`
|
|
3263
3274
|
},
|
|
3264
3275
|
children: [/* @__PURE__ */ s("span", {
|
|
3265
3276
|
style: {
|
|
3266
3277
|
fontSize: 18,
|
|
3267
3278
|
fontWeight: 500,
|
|
3268
|
-
color:
|
|
3279
|
+
color: Q.t1,
|
|
3269
3280
|
background: "transparent",
|
|
3270
3281
|
padding: "2px 8px",
|
|
3271
3282
|
borderRadius: 4,
|
|
3272
|
-
fontFamily:
|
|
3283
|
+
fontFamily: $,
|
|
3273
3284
|
flexShrink: 0,
|
|
3274
3285
|
minWidth: 64,
|
|
3275
3286
|
textAlign: "center"
|
|
@@ -3280,8 +3291,8 @@ function bn({ columns: e = [], rows: t = [] }) {
|
|
|
3280
3291
|
flex: 1,
|
|
3281
3292
|
fontSize: 18,
|
|
3282
3293
|
fontWeight: 500,
|
|
3283
|
-
color:
|
|
3284
|
-
fontFamily:
|
|
3294
|
+
color: Q.t2,
|
|
3295
|
+
fontFamily: $
|
|
3285
3296
|
},
|
|
3286
3297
|
children: e
|
|
3287
3298
|
}, t))]
|
|
@@ -3362,4 +3373,4 @@ function wn({ text: e }) {
|
|
|
3362
3373
|
});
|
|
3363
3374
|
}
|
|
3364
3375
|
//#endregion
|
|
3365
|
-
export {
|
|
3376
|
+
export { I as AreaChart, re as BarChart, l as ChartFrame, nn as DonutChart, xn as KeyHighlights, Be as LineChart, Ue as MiniBars, Qe as PieChart, ct as ProcessSankey, lt as RankingSankey, et as SankeySvg, ee as SeriesChart, wn as Takeaway, Tt as Trend, Lt as TrendChart, Xt as VisualizationRenderer, $t as cleanupVisualizationMounts, en as hydrateVisualizationMounts, tn as serializeVisualizationConfig };
|