@divami-artefacts/ai-design-system 1.0.5 → 1.0.6
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/common/ToggleButton.d.ts +8 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +508 -424
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -430,85 +430,139 @@ function ie({ rows: e = [], className: t, colors: r }) {
|
|
|
430
430
|
});
|
|
431
431
|
}
|
|
432
432
|
//#endregion
|
|
433
|
+
//#region src/components/common/ToggleButton.tsx
|
|
434
|
+
function ae({ expanded: e, onToggle: t, labelExpanded: n = "View Less", labelCollapsed: r = "View More", "data-testid": i }) {
|
|
435
|
+
return /* @__PURE__ */ c("button", {
|
|
436
|
+
type: "button",
|
|
437
|
+
"data-testid": i,
|
|
438
|
+
onClick: t,
|
|
439
|
+
style: {
|
|
440
|
+
display: "flex",
|
|
441
|
+
width: 90,
|
|
442
|
+
height: 20,
|
|
443
|
+
justifyContent: "center",
|
|
444
|
+
alignItems: "center",
|
|
445
|
+
gap: 4,
|
|
446
|
+
boxSizing: "border-box",
|
|
447
|
+
border: "none",
|
|
448
|
+
borderRadius: 6,
|
|
449
|
+
color: "#FFAE43",
|
|
450
|
+
fontSize: 14,
|
|
451
|
+
fontFamily: "'Satoshi Variable', 'DM Sans', sans-serif",
|
|
452
|
+
fontStyle: "normal",
|
|
453
|
+
fontWeight: 400,
|
|
454
|
+
lineHeight: "19.5px",
|
|
455
|
+
textAlign: "center",
|
|
456
|
+
cursor: "pointer",
|
|
457
|
+
userSelect: "none"
|
|
458
|
+
},
|
|
459
|
+
children: [e ? n : r, /* @__PURE__ */ s("svg", {
|
|
460
|
+
width: "10",
|
|
461
|
+
height: "10",
|
|
462
|
+
viewBox: "0 0 10 10",
|
|
463
|
+
fill: "none",
|
|
464
|
+
style: { transform: e ? "rotate(180deg)" : "rotate(0deg)" },
|
|
465
|
+
children: /* @__PURE__ */ s("path", {
|
|
466
|
+
d: "M2 3.5L5 6.5L8 3.5",
|
|
467
|
+
stroke: "currentColor",
|
|
468
|
+
strokeWidth: "1.5",
|
|
469
|
+
strokeLinecap: "round",
|
|
470
|
+
strokeLinejoin: "round"
|
|
471
|
+
})
|
|
472
|
+
})]
|
|
473
|
+
});
|
|
474
|
+
}
|
|
475
|
+
//#endregion
|
|
433
476
|
//#region src/components/commitmentRace/CommitmentRace.tsx
|
|
434
|
-
var F = 680, I =
|
|
477
|
+
var F = 680, I = 42, oe = 10, se = 24, ce = 24, le = 8, ue = [
|
|
435
478
|
u.green,
|
|
436
479
|
u.blue,
|
|
437
480
|
u.cyan,
|
|
438
481
|
u.amber,
|
|
439
482
|
u.red
|
|
440
483
|
];
|
|
441
|
-
function
|
|
442
|
-
let
|
|
484
|
+
function de(e) {
|
|
485
|
+
let t = Math.abs(e), n = e < 0 ? "-" : "";
|
|
486
|
+
return t >= 1e6 ? `${n}£${(t / 1e6).toFixed(1)}M` : t >= 1e3 ? `${n}£${(t / 1e3).toFixed(1)}K` : `${n}£${t.toFixed(0)}`;
|
|
487
|
+
}
|
|
488
|
+
function fe({ contractors: e = [], "data-testid": t }) {
|
|
489
|
+
let r = a(null), l = a(0), d = a(/* @__PURE__ */ new Map()), [p, h] = o(!1), g = i(() => [...e].sort((e, t) => (t.percentage ?? 0) - (e.percentage ?? 0)), [e]), x = i(() => p ? g : g.slice(0, le), [g, p]), T = x.length, D = se + ce + T * I + Math.max(0, T - 1) * oe, { hoveredRef: O, tooltip: k, hitZonesRef: A } = C(r, {
|
|
443
490
|
width: F,
|
|
444
|
-
height:
|
|
491
|
+
height: D
|
|
445
492
|
});
|
|
446
493
|
return n(() => {
|
|
447
494
|
let e = r.current;
|
|
448
495
|
if (!e) return;
|
|
449
|
-
let t = _(e, F,
|
|
450
|
-
|
|
451
|
-
let n = F * .13,
|
|
452
|
-
|
|
453
|
-
let e =
|
|
454
|
-
t.clearRect(0, 0, F,
|
|
455
|
-
let n = t ===
|
|
456
|
-
Math.abs(r - n) < .005 ? n === 0 ?
|
|
457
|
-
}),
|
|
458
|
-
let
|
|
459
|
-
t.fillStyle = m(
|
|
460
|
-
let
|
|
461
|
-
if (
|
|
462
|
-
let e = t.createLinearGradient(n, 0,
|
|
463
|
-
e.addColorStop(0, m(
|
|
496
|
+
let t = _(e, F, D);
|
|
497
|
+
l.current = 0;
|
|
498
|
+
let n = F * .13, i = F * .08, a = F - n - i, o, s = () => {
|
|
499
|
+
l.current++;
|
|
500
|
+
let e = l.current;
|
|
501
|
+
t.clearRect(0, 0, F, D), A.current = [], d.current.forEach((e, t) => {
|
|
502
|
+
let n = t === O.current ? 1 : 0, r = e + (n - e) * .12;
|
|
503
|
+
Math.abs(r - n) < .005 ? n === 0 ? d.current.delete(t) : d.current.set(t, 1) : d.current.set(t, r);
|
|
504
|
+
}), O.current && !d.current.has(O.current) && d.current.set(O.current, 0), y(t, F, D, e, 40, m(u.blue, .04)), x.forEach((r, i) => {
|
|
505
|
+
let o = ue[i % ue.length], s = d.current.get(r.id) ?? 0, c = se + i * (I + oe);
|
|
506
|
+
t.fillStyle = m(o, .04 + s * .04), t.beginPath(), t.roundRect(n, c, a, I, 3), t.fill(), t.strokeStyle = m(o, .08), t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(n, c + I / 2), t.lineTo(n + a, c + I / 2), t.stroke(), t.setLineDash([]);
|
|
507
|
+
let l = (r.percentage ?? 0) / 100, u = n + a * Math.min(l, l * E(Math.min(1, e * .005)));
|
|
508
|
+
if (u > n + 4) {
|
|
509
|
+
let e = t.createLinearGradient(n, 0, u, 0);
|
|
510
|
+
e.addColorStop(0, m(o, .02)), e.addColorStop(1, m(o, .25 + s * .15)), t.fillStyle = e, t.beginPath(), t.roundRect(n, c + 2, u - n, I - 4, 2), t.fill();
|
|
464
511
|
}
|
|
465
|
-
v(t,
|
|
512
|
+
v(t, u, c + I / 2, 18 + s * 8, o, .3 + s * .2), t.beginPath(), t.arc(u, c + I / 2, 5 + s * 2, 0, Math.PI * 2), t.fillStyle = m(o, .9), t.fill();
|
|
513
|
+
let p = {
|
|
466
514
|
label: r.name,
|
|
467
515
|
value: `${r.percentage ?? 0}% commitment`,
|
|
468
|
-
sublabel: `Base:
|
|
469
|
-
color:
|
|
470
|
-
}
|
|
471
|
-
|
|
516
|
+
sublabel: `Base: ${de(r.base ?? 0)} · Variations: ${de(r.variation ?? 0)}`,
|
|
517
|
+
color: o
|
|
518
|
+
};
|
|
519
|
+
w(A.current, r.id, u, c + I / 2, 14, p), t.font = "bold " + f.font, t.fillStyle = m(o, .9 + s * .1), t.textAlign = "left", t.textBaseline = "middle", t.fillText(`${r.percentage ?? 0}%`, u + 10, c + I / 2), t.font = `${s > 0 ? "bold " : ""}` + f.font, t.fillStyle = s > 0 ? o : f.color, t.textAlign = "right", t.fillText(r.abbreviation ?? r.name.slice(0, 6), n - 8, c + I / 2);
|
|
520
|
+
}), t.strokeStyle = m(u.t3, .3), t.lineWidth = 1, t.setLineDash([]), t.beginPath(), t.moveTo(n + a, se), t.lineTo(n + a, se + (T - 1) * (I + oe) + I), t.stroke(), b(t, F, D, e, .015), o = requestAnimationFrame(s);
|
|
472
521
|
};
|
|
473
|
-
return
|
|
474
|
-
}, [
|
|
522
|
+
return s(), () => cancelAnimationFrame(o);
|
|
523
|
+
}, [x, D]), /* @__PURE__ */ c("div", {
|
|
475
524
|
"data-testid": t,
|
|
476
|
-
style: {
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
525
|
+
style: { width: F },
|
|
526
|
+
children: [/* @__PURE__ */ c("div", {
|
|
527
|
+
style: { position: "relative" },
|
|
528
|
+
children: [/* @__PURE__ */ s("canvas", {
|
|
529
|
+
ref: r,
|
|
530
|
+
role: "img",
|
|
531
|
+
"aria-label": "Commitment race — contractors ranked by commitment percentage",
|
|
532
|
+
style: {
|
|
533
|
+
width: F,
|
|
534
|
+
height: D,
|
|
535
|
+
display: "block",
|
|
536
|
+
borderRadius: 8
|
|
537
|
+
}
|
|
538
|
+
}), /* @__PURE__ */ s(S, {
|
|
539
|
+
...k,
|
|
540
|
+
parentW: F,
|
|
541
|
+
parentH: D
|
|
542
|
+
})]
|
|
543
|
+
}), e.length > le && /* @__PURE__ */ s("div", {
|
|
544
|
+
style: { marginTop: 8 },
|
|
545
|
+
children: /* @__PURE__ */ s(ae, {
|
|
546
|
+
expanded: p,
|
|
547
|
+
onToggle: () => h((e) => !e)
|
|
548
|
+
})
|
|
495
549
|
})]
|
|
496
550
|
});
|
|
497
551
|
}
|
|
498
552
|
//#endregion
|
|
499
553
|
//#region src/components/compensationGauge/CompensationGauge.tsx
|
|
500
|
-
var
|
|
501
|
-
function
|
|
554
|
+
var pe = 480, me = 340;
|
|
555
|
+
function he({ pct: e, confirmed: t, total: r, "data-testid": i }) {
|
|
502
556
|
let o = a(null), c = a(0);
|
|
503
557
|
return n(() => {
|
|
504
558
|
let n = o.current;
|
|
505
559
|
if (!n) return;
|
|
506
|
-
let i = _(n,
|
|
560
|
+
let i = _(n, pe, me);
|
|
507
561
|
c.current = 0;
|
|
508
|
-
let a =
|
|
562
|
+
let a = pe / 2, s = Math.PI, l = 2 * Math.PI, d = Math.PI, p, h = () => {
|
|
509
563
|
c.current++;
|
|
510
564
|
let n = c.current;
|
|
511
|
-
i.clearRect(0, 0,
|
|
565
|
+
i.clearRect(0, 0, pe, me);
|
|
512
566
|
let o = E(Math.min(n / 80, 1)), g = k(Math.min(n / 72, 1));
|
|
513
567
|
i.beginPath(), i.arc(a, 220, 120, s, l), i.strokeStyle = m(u.bd, .35), i.lineWidth = 46, i.stroke(), [
|
|
514
568
|
{
|
|
@@ -568,16 +622,16 @@ function le({ pct: e, confirmed: t, total: r, "data-testid": i }) {
|
|
|
568
622
|
"data-testid": i,
|
|
569
623
|
style: {
|
|
570
624
|
position: "relative",
|
|
571
|
-
width:
|
|
572
|
-
height:
|
|
625
|
+
width: pe,
|
|
626
|
+
height: me
|
|
573
627
|
},
|
|
574
628
|
children: /* @__PURE__ */ s("canvas", {
|
|
575
629
|
ref: o,
|
|
576
630
|
role: "img",
|
|
577
631
|
"aria-label": `Compensation event gauge — ${e}% of NCEs confirmed as compensation events`,
|
|
578
632
|
style: {
|
|
579
|
-
width:
|
|
580
|
-
height:
|
|
633
|
+
width: pe,
|
|
634
|
+
height: me,
|
|
581
635
|
display: "block"
|
|
582
636
|
}
|
|
583
637
|
})
|
|
@@ -585,7 +639,7 @@ function le({ pct: e, confirmed: t, total: r, "data-testid": i }) {
|
|
|
585
639
|
}
|
|
586
640
|
//#endregion
|
|
587
641
|
//#region src/canvas/useCanvasLoop.ts
|
|
588
|
-
function
|
|
642
|
+
function ge(e, t, r, i, o = !0, s = {}) {
|
|
589
643
|
let c = a(0), { easing: l = E, durationFrames: u = 48 } = s;
|
|
590
644
|
n(() => {
|
|
591
645
|
let n = e.current;
|
|
@@ -617,29 +671,29 @@ function ue(e, t, r, i, o = !0, s = {}) {
|
|
|
617
671
|
}
|
|
618
672
|
//#endregion
|
|
619
673
|
//#region src/components/contractBars/ContractBars.tsx
|
|
620
|
-
var L = 780,
|
|
674
|
+
var L = 780, _e = 234, ve = 130, ye = 52, be = [
|
|
621
675
|
u.blue,
|
|
622
676
|
u.cyan,
|
|
623
677
|
u.amber,
|
|
624
678
|
u.purple,
|
|
625
679
|
u.green
|
|
626
|
-
],
|
|
680
|
+
], xe = [
|
|
627
681
|
"Base Value",
|
|
628
682
|
"Variations",
|
|
629
683
|
"Commitment"
|
|
630
|
-
],
|
|
684
|
+
], Se = [
|
|
631
685
|
"Base",
|
|
632
686
|
"Var",
|
|
633
687
|
"Commit"
|
|
634
688
|
];
|
|
635
|
-
function
|
|
689
|
+
function Ce({ contractors: e = [], "data-testid": t }) {
|
|
636
690
|
let n = a(null), r = a(/* @__PURE__ */ new Map()), { hoveredRef: o, tooltip: l, hitZonesRef: d } = C(n, {
|
|
637
691
|
width: L,
|
|
638
|
-
height:
|
|
692
|
+
height: _e
|
|
639
693
|
}), f = i(() => {
|
|
640
694
|
let t = Math.max(...e.map((e) => e.base ?? 0)), n = Math.max(...e.map((e) => e.variation ?? 0));
|
|
641
695
|
return e.map((e, r) => {
|
|
642
|
-
let i = L * (.12 + r * .19), a =
|
|
696
|
+
let i = L * (.12 + r * .19), a = ve, o = Math.min(L * .075, ye), s = be[r % be.length], c = [
|
|
643
697
|
(e.base ?? 0) / (t || 1) * 100,
|
|
644
698
|
(e.variation ?? 0) / (n || 1) * 100,
|
|
645
699
|
e.percentage ?? 0
|
|
@@ -648,10 +702,10 @@ function ge({ contractors: e = [], "data-testid": t }) {
|
|
|
648
702
|
`£${e.variation ?? 0}M`,
|
|
649
703
|
`${e.percentage ?? 0}%`
|
|
650
704
|
], u = c.map((e, t) => {
|
|
651
|
-
let n = -Math.PI / 2 + t /
|
|
705
|
+
let n = -Math.PI / 2 + t / xe.length * Math.PI * 2, r = e / 100, s = o * Math.max(.08, r);
|
|
652
706
|
return {
|
|
653
|
-
name:
|
|
654
|
-
short:
|
|
707
|
+
name: xe[t],
|
|
708
|
+
short: Se[t],
|
|
655
709
|
label: l[t],
|
|
656
710
|
val: Math.round(e),
|
|
657
711
|
x: i + Math.cos(n) * s,
|
|
@@ -671,8 +725,8 @@ function ge({ contractors: e = [], "data-testid": t }) {
|
|
|
671
725
|
};
|
|
672
726
|
});
|
|
673
727
|
}, [e]);
|
|
674
|
-
return
|
|
675
|
-
M(r.current, o.current), d.current = [], y(e, L,
|
|
728
|
+
return ge(n, L, _e, (e, t, n) => {
|
|
729
|
+
M(r.current, o.current), d.current = [], y(e, L, _e, n, 30), f.forEach((t, i) => {
|
|
676
730
|
let a = t.color, o = `constellation-${i}`, s = r.current.get(o) ?? 0;
|
|
677
731
|
e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 5, 0, Math.PI * 2), e.strokeStyle = m(u.bd, .08 + .08 * s), e.lineWidth = .5, e.stroke(), e.beginPath(), t.stars.forEach((t, n) => {
|
|
678
732
|
n === 0 ? e.moveTo(t.x, t.y) : e.lineTo(t.x, t.y);
|
|
@@ -680,25 +734,25 @@ function ge({ contractors: e = [], "data-testid": t }) {
|
|
|
680
734
|
let c = A(n, .05, 5e-4) * .3 + .7, l = 3.5 * c, u = `star-${i}-${s}`, f = r.current.get(u) ?? 0, p = e.createRadialGradient(o.x, o.y, 0, o.x, o.y, l * 4);
|
|
681
735
|
p.addColorStop(0, m(a, (.2 + .1 * f) * c)), p.addColorStop(1, m(a, 0)), e.fillStyle = p, e.beginPath(), e.arc(o.x, o.y, l * 4, 0, Math.PI * 2), e.fill(), e.beginPath(), e.arc(o.x, o.y, l + f * 2, 0, Math.PI * 2), e.fillStyle = m(a, (.8 + .2 * f) * c), e.fill();
|
|
682
736
|
let h = Math.sin(o.angle) < -.3;
|
|
683
|
-
e.textAlign = "center", e.textBaseline = "middle", h ? (e.font = "
|
|
737
|
+
e.textAlign = "center", e.textBaseline = "middle", h ? (e.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = m(a, .5 + .15 * f), e.fillText(o.short, o.x, o.y - 24), e.font = "500 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = m(a, .8 + .15 * f), e.fillText(o.label, o.x, o.y - 11)) : (e.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = m(a, .5 + .15 * f), e.fillText(o.short, o.x, o.y + 11), e.font = "500 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = m(a, .8 + .15 * f), e.fillText(o.label, o.x, o.y + 24)), w(d.current, u, o.x, o.y, l * 4 + 2, {
|
|
684
738
|
label: o.name,
|
|
685
739
|
value: o.label,
|
|
686
740
|
sublabel: t.abbreviation ?? t.name.slice(0, 6),
|
|
687
741
|
color: a
|
|
688
742
|
});
|
|
689
|
-
}), s > 0 && v(e, t.cx, t.cy, 16 * s, a, .15 * s), e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 12, 0, Math.PI * 2), e.strokeStyle = m(a, .1 + A(n, .03, 5e-4) * .05), e.lineWidth = 1, e.stroke(), e.font = "
|
|
743
|
+
}), s > 0 && v(e, t.cx, t.cy, 16 * s, a, .15 * s), e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 12, 0, Math.PI * 2), e.strokeStyle = m(a, .1 + A(n, .03, 5e-4) * .05), e.lineWidth = 1, e.stroke(), e.font = "500 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.textAlign = "center", e.textBaseline = "alphabetic", e.fillStyle = m(u.t2, .65 + s * .25), e.fillText(t.abbreviation ?? t.name.slice(0, 6), t.cx, t.cy + t.baseR + 26), w(d.current, o, t.cx, t.cy, t.baseR + 5, {
|
|
690
744
|
label: t.name,
|
|
691
745
|
value: `£${t.total ?? 0}M total`,
|
|
692
746
|
sublabel: `${t.percentage ?? 0}% committed · scatter ${t.scatter.toFixed(1)}`,
|
|
693
747
|
color: a
|
|
694
748
|
});
|
|
695
|
-
}), e.font = "
|
|
749
|
+
}), e.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.textAlign = "center", e.textBaseline = "middle", e.fillStyle = u.t2, e.fillText("▲ top = Base value · ▼▸ lower-right = Variations · ◂▼ lower-left = Commitment % · hover stars for details", L / 2, _e - 14), b(e, L, _e, n, .012);
|
|
696
750
|
}, !0), /* @__PURE__ */ c("div", {
|
|
697
751
|
"data-testid": t,
|
|
698
752
|
style: {
|
|
699
753
|
position: "relative",
|
|
700
754
|
width: L,
|
|
701
|
-
height:
|
|
755
|
+
height: _e
|
|
702
756
|
},
|
|
703
757
|
children: [/* @__PURE__ */ s("canvas", {
|
|
704
758
|
ref: n,
|
|
@@ -706,160 +760,172 @@ function ge({ contractors: e = [], "data-testid": t }) {
|
|
|
706
760
|
"aria-label": "Contract value breakdown per contractor — multi-KPI constellation chart",
|
|
707
761
|
style: {
|
|
708
762
|
width: L,
|
|
709
|
-
height:
|
|
763
|
+
height: _e,
|
|
710
764
|
display: "block"
|
|
711
765
|
}
|
|
712
766
|
}), /* @__PURE__ */ s(S, {
|
|
713
767
|
...l,
|
|
714
768
|
parentW: L,
|
|
715
|
-
parentH:
|
|
769
|
+
parentH: _e
|
|
716
770
|
})]
|
|
717
771
|
});
|
|
718
772
|
}
|
|
719
773
|
//#endregion
|
|
720
774
|
//#region src/components/contractValueOrb/ContractValueOrb.tsx
|
|
721
|
-
var
|
|
775
|
+
var we = 680, Te = 220, Ee = 8, De = [
|
|
722
776
|
u.blue,
|
|
723
777
|
u.cyan,
|
|
724
778
|
u.amber,
|
|
725
779
|
u.purple,
|
|
726
780
|
u.green
|
|
727
|
-
],
|
|
781
|
+
], R = {
|
|
728
782
|
left: 8,
|
|
729
|
-
right:
|
|
783
|
+
right: 80,
|
|
730
784
|
top: 16,
|
|
731
785
|
bottom: 38
|
|
732
|
-
},
|
|
733
|
-
function
|
|
734
|
-
let
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
786
|
+
}, Oe = 88, z = 18;
|
|
787
|
+
function ke(e) {
|
|
788
|
+
let t = Math.abs(e), n = e < 0 ? "-" : "";
|
|
789
|
+
return t >= 1e6 ? `${n}£${(t / 1e6).toFixed(1)}M` : t >= 1e3 ? `${n}£${(t / 1e3).toFixed(1)}K` : `${n}£${t.toFixed(0)}`;
|
|
790
|
+
}
|
|
791
|
+
function Ae({ data: e, "data-testid": t }) {
|
|
792
|
+
let n = a(null), r = a(/* @__PURE__ */ new Map()), [i, l] = o(!1), { contractors: d = [], totals: h } = e, g = [...d].sort((e, t) => (t.total ?? 0) - (e.total ?? 0)), _ = i ? g : g.slice(0, Ee), y = _.length, b = Math.max(...g.map((e) => Math.abs(e.total ?? 0)), 1), x = Math.max(Te, R.top + R.bottom + y * z + Math.max(0, y - 1) * 8), w = we - R.left - Oe - R.right, E = y > 1 ? (x - R.top - R.bottom - y * z) / (y - 1) : 0, { hoveredRef: O, tooltip: k, hitZonesRef: A } = C(n, {
|
|
793
|
+
width: we,
|
|
794
|
+
height: x
|
|
795
|
+
});
|
|
796
|
+
return ge(n, we, x, (e, t) => {
|
|
797
|
+
M(r.current, O.current), A.current = [], _.forEach((n, i) => {
|
|
798
|
+
let a = De[i % De.length], o = j(t, i, y, D), s = R.top + i * (z + E), c = R.left + Oe, l = r.current.get(n.id) ?? 0, d = Math.max(n.base ?? 0, 0), p = Math.max(n.total ?? 0, 0), h = d / b * w * o, g = p / b * w * o, _ = g - h;
|
|
799
|
+
e.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = l > 0 ? a : f.color, e.textAlign = "right", e.textBaseline = "middle", e.fillText(n.abbreviation ?? n.name.slice(0, 6), c - 8, s + z / 2), e.fillStyle = m(u.bd, .25), e.beginPath(), e.roundRect(c, s, w, z, 4), e.fill(), h > 0 && (l > 0 && v(e, c + h / 2, s + z / 2, h * .3, a, .1 * l), e.fillStyle = m(a, .5 + l * .15), e.beginPath(), e.roundRect(c, s, h, z, 4), e.fill()), _ > 2 && (e.fillStyle = m(a, .22 + l * .08), e.beginPath(), e.roundRect(c + h, s, _, z, [
|
|
742
800
|
0,
|
|
743
801
|
4,
|
|
744
802
|
4,
|
|
745
803
|
0
|
|
746
|
-
]), e.fill(), e.setLineDash([2, 3]), e.strokeStyle = m(a, .55), e.lineWidth = 1, e.beginPath(), e.moveTo(c +
|
|
804
|
+
]), e.fill(), e.setLineDash([2, 3]), e.strokeStyle = m(a, .55), e.lineWidth = 1, e.beginPath(), e.moveTo(c + h, s + 3), e.lineTo(c + h, s + z - 3), e.stroke(), e.setLineDash([])), l > 0 && g > 0 && (e.strokeStyle = m(a, .5 * l), e.lineWidth = 1, e.setLineDash([]), e.beginPath(), e.roundRect(c, s, g, z, 4), e.stroke()), o > .35 && (e.globalAlpha = Math.min(1, (o - .35) / .4), e.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", e.fillStyle = l > 0 ? a : u.t1, e.textAlign = "left", e.textBaseline = "middle", e.fillText(ke(n.total ?? 0), c + g + 6, s + z / 2), e.globalAlpha = 1), T(A.current, n.id, c, s, Math.max(g, 1), z, {
|
|
747
805
|
label: n.name,
|
|
748
|
-
value:
|
|
749
|
-
sublabel: `Base
|
|
806
|
+
value: `${ke(n.total ?? 0)} total`,
|
|
807
|
+
sublabel: `Base ${ke(n.base ?? 0)} + Var ${ke(n.variation ?? 0)} · ${n.percentage ?? 0}% committed`,
|
|
750
808
|
color: a
|
|
751
809
|
});
|
|
752
810
|
});
|
|
753
|
-
let n =
|
|
754
|
-
e.textBaseline = "middle", e.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.textAlign = "left", e.fillStyle = m(u.cyan, .5), e.beginPath(), e.roundRect(
|
|
811
|
+
let n = x - 14;
|
|
812
|
+
e.textBaseline = "middle", e.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.textAlign = "left", e.fillStyle = m(u.cyan, .5), e.beginPath(), e.roundRect(R.left + Oe, n - 3, 14, 6, 2), e.fill(), e.fillStyle = p.color, e.fillText("base value", R.left + Oe + 18, n), e.fillStyle = m(u.cyan, .22), e.beginPath(), e.roundRect(R.left + Oe + 94, n - 3, 14, 6, 2), e.fill(), e.setLineDash([2, 3]), e.strokeStyle = m(u.cyan, .5), e.lineWidth = .5, e.beginPath(), e.moveTo(R.left + Oe + 101, n - 3), e.lineTo(R.left + Oe + 101, n + 3), e.stroke(), e.setLineDash([]), e.fillStyle = p.color, e.fillText("approved variations", R.left + Oe + 112, n), e.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", e.textAlign = "right", e.fillStyle = p.color, e.fillText(`Portfolio: ${ke(h?.total ?? 0)}`, we - 8, n);
|
|
755
813
|
}, !0, { easing: D }), /* @__PURE__ */ c("div", {
|
|
756
814
|
"data-testid": t,
|
|
757
815
|
style: {
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
height: ve
|
|
816
|
+
width: we,
|
|
817
|
+
transition: "all 0.25s ease"
|
|
761
818
|
},
|
|
762
|
-
children: [/* @__PURE__ */
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
819
|
+
children: [/* @__PURE__ */ c("div", {
|
|
820
|
+
style: { position: "relative" },
|
|
821
|
+
children: [/* @__PURE__ */ s("canvas", {
|
|
822
|
+
ref: n,
|
|
823
|
+
role: "img",
|
|
824
|
+
"aria-label": "Total contract value per contractor — horizontal bar chart",
|
|
825
|
+
style: {
|
|
826
|
+
width: we,
|
|
827
|
+
height: x,
|
|
828
|
+
display: "block",
|
|
829
|
+
borderRadius: 8
|
|
830
|
+
}
|
|
831
|
+
}), /* @__PURE__ */ s(S, {
|
|
832
|
+
...k,
|
|
833
|
+
parentW: we,
|
|
834
|
+
parentH: x
|
|
835
|
+
})]
|
|
836
|
+
}), d.length > Ee && /* @__PURE__ */ s("div", {
|
|
837
|
+
style: { marginTop: 8 },
|
|
838
|
+
children: /* @__PURE__ */ s(ae, {
|
|
839
|
+
expanded: i,
|
|
840
|
+
onToggle: () => l((e) => !e)
|
|
841
|
+
})
|
|
776
842
|
})]
|
|
777
843
|
});
|
|
778
844
|
}
|
|
779
845
|
//#endregion
|
|
780
846
|
//#region src/components/contractorRank/ContractorRank.tsx
|
|
781
|
-
var
|
|
847
|
+
var je = 780, B = 240, Me = 12, Ne = 10, Pe = [
|
|
782
848
|
"Highest exposure",
|
|
783
849
|
"Elevated risk",
|
|
784
850
|
"Moderate exposure",
|
|
785
851
|
"Moderate exposure",
|
|
786
852
|
"Low exposure"
|
|
787
853
|
];
|
|
788
|
-
function
|
|
854
|
+
function Fe({ contractors: e = [], "data-testid": t }) {
|
|
789
855
|
let r = a(null), i = a(0), o = a(/* @__PURE__ */ new Map()), { hoveredRef: l, tooltip: p, hitZonesRef: h } = C(r, {
|
|
790
|
-
width:
|
|
791
|
-
height:
|
|
856
|
+
width: je,
|
|
857
|
+
height: B
|
|
792
858
|
}), g = [...e].sort((e, t) => (t.count ?? 0) - (e.count ?? 0)).slice(0, 5), y = g.reduce((e, t) => e + (t.count ?? 0), 0);
|
|
793
859
|
return n(() => {
|
|
794
860
|
let e = r.current;
|
|
795
861
|
if (!e) return;
|
|
796
|
-
let t = _(e,
|
|
862
|
+
let t = _(e, je, B);
|
|
797
863
|
i.current = 0;
|
|
798
|
-
let n = Math.min(5, g.length), a = (
|
|
864
|
+
let n = Math.min(5, g.length), a = (je - 2 * Me - (n - 1) * Ne) / n, s = B * .84, c = B * .08, p, x = () => {
|
|
799
865
|
i.current++;
|
|
800
866
|
let e = i.current;
|
|
801
|
-
t.clearRect(0, 0,
|
|
867
|
+
t.clearRect(0, 0, je, B), h.current = [], o.current.forEach((e, t) => {
|
|
802
868
|
let n = t === l.current ? 1 : 0, r = e + (n - e) * .12;
|
|
803
869
|
Math.abs(r - n) < .005 ? n === 0 ? o.current.delete(t) : o.current.set(t, 1) : o.current.set(t, r);
|
|
804
870
|
}), l.current && !o.current.has(l.current) && o.current.set(l.current, 0), g.forEach((n, r) => {
|
|
805
|
-
let i = r === 0, l = r === 0 ? u.red : r === 1 ? u.amber : d[r % d.length], p =
|
|
871
|
+
let i = r === 0, l = r === 0 ? u.red : r === 1 ? u.amber : d[r % d.length], p = Me + r * (a + Ne), g = o.current.get(n.id) ?? 0, _ = g * 8, b = p - _ / 2, x = a + _, S = i ? A(e, .04, 3e-4) * .06 + .06 : 0;
|
|
806
872
|
t.fillStyle = m(l, .08 + g * .07), t.beginPath(), t.roundRect(b, c, x, s, 6), t.fill(), t.strokeStyle = m(l, .2 + g * .4 + S), t.lineWidth = i ? 1.5 : 1, t.stroke(), (g > .01 || i) && v(t, b + x / 2, c + s / 2, x * .55, l, S + g * .14), t.font = "bold " + f.font, t.textAlign = "left", t.textBaseline = "top", t.fillStyle = m(l, .5 + g * .35), t.fillText(`#${r + 1}`, b + 7, c + 6);
|
|
807
873
|
let C = Math.min(a * .28, s * .32, 72), w = b + x / 2, E = c + s * .38, D = t.createRadialGradient(w, E - C * .2, 0, w, E, C);
|
|
808
874
|
D.addColorStop(0, m(l, .5 + g * .2)), D.addColorStop(1, m(l, .2 + g * .1)), t.beginPath(), t.arc(w, E, C, 0, Math.PI * 2), t.fillStyle = D, t.fill(), t.strokeStyle = m(l, .4 + g * .3), t.lineWidth = 1, t.stroke(), t.font = "bold " + f.font, t.textAlign = "center", t.textBaseline = "middle", t.fillStyle = m(u.t1, .9), t.fillText(n.abbreviation ?? n.name.slice(0, 6), w, E), t.font = "bold 14px 'Satoshi Variable', 'DM Sans', sans-serif", t.textBaseline = "alphabetic", t.fillStyle = m(l, .9 + g * .1), t.fillText(String(n.count ?? 0), w, c + s * .76), t.font = f.font, t.fillStyle = f.color, t.fillText("open EWs", w, c + s * .88);
|
|
809
|
-
let O = Math.round((n.count ?? 0) / (y || 1) * 100), k =
|
|
875
|
+
let O = Math.round((n.count ?? 0) / (y || 1) * 100), k = Pe[r] ?? "Low exposure";
|
|
810
876
|
T(h.current, n.id, p, c, a, s, {
|
|
811
877
|
label: n.name,
|
|
812
878
|
value: `${n.count ?? 0} open · ${O}% of total`,
|
|
813
879
|
sublabel: `Rank #${r + 1} · ${k}`,
|
|
814
880
|
color: l
|
|
815
881
|
});
|
|
816
|
-
}), b(t,
|
|
882
|
+
}), b(t, je, B, e, .015), p = requestAnimationFrame(x);
|
|
817
883
|
};
|
|
818
884
|
return x(), () => cancelAnimationFrame(p);
|
|
819
885
|
}, [g, y]), /* @__PURE__ */ c("div", {
|
|
820
886
|
"data-testid": t,
|
|
821
887
|
style: {
|
|
822
888
|
position: "relative",
|
|
823
|
-
width:
|
|
824
|
-
height:
|
|
889
|
+
width: je,
|
|
890
|
+
height: B
|
|
825
891
|
},
|
|
826
892
|
children: [/* @__PURE__ */ s("canvas", {
|
|
827
893
|
ref: r,
|
|
828
894
|
role: "img",
|
|
829
895
|
"aria-label": "Contractor rank — open EW count per contractor",
|
|
830
896
|
style: {
|
|
831
|
-
width:
|
|
832
|
-
height:
|
|
897
|
+
width: je,
|
|
898
|
+
height: B,
|
|
833
899
|
display: "block",
|
|
834
900
|
borderRadius: 8
|
|
835
901
|
}
|
|
836
902
|
}), /* @__PURE__ */ s(S, {
|
|
837
903
|
...p,
|
|
838
|
-
parentW:
|
|
839
|
-
parentH:
|
|
904
|
+
parentW: je,
|
|
905
|
+
parentH: B
|
|
840
906
|
})]
|
|
841
907
|
});
|
|
842
908
|
}
|
|
843
909
|
//#endregion
|
|
844
910
|
//#region src/components/ewCategory/EWCategory.tsx
|
|
845
|
-
var
|
|
846
|
-
function
|
|
911
|
+
var V = 680, H = 260;
|
|
912
|
+
function Ie({ categories: e = [], "data-testid": t }) {
|
|
847
913
|
let r = a(null), i = a(0), o = a(/* @__PURE__ */ new Map()), { hoveredRef: l, tooltip: d, hitZonesRef: f } = C(r, {
|
|
848
|
-
width:
|
|
849
|
-
height:
|
|
914
|
+
width: V,
|
|
915
|
+
height: H
|
|
850
916
|
});
|
|
851
917
|
return n(() => {
|
|
852
918
|
let t = r.current;
|
|
853
919
|
if (!t) return;
|
|
854
|
-
let n = _(t,
|
|
920
|
+
let n = _(t, V, H);
|
|
855
921
|
i.current = 0;
|
|
856
|
-
let a = e.length, s = Math.max(...e.map((e) => e.count), 1), c = s, d =
|
|
922
|
+
let a = e.length, s = Math.max(...e.map((e) => e.count), 1), c = s, d = V * .05, p = H * .1, h = V * .9 / a, g = H * .7 / c, x = e.reduce((e, t) => e + t.count, 0), S, C = () => {
|
|
857
923
|
i.current++;
|
|
858
924
|
let t = i.current;
|
|
859
|
-
n.clearRect(0, 0,
|
|
925
|
+
n.clearRect(0, 0, V, H), f.current = [], o.current.forEach((e, t) => {
|
|
860
926
|
let n = t === l.current ? 1 : 0, r = e + (n - e) * .12;
|
|
861
927
|
Math.abs(r - n) < .005 ? n === 0 ? o.current.delete(t) : o.current.set(t, 1) : o.current.set(t, r);
|
|
862
|
-
}), l.current && !o.current.has(l.current) && o.current.set(l.current, 0), y(n,
|
|
928
|
+
}), l.current && !o.current.has(l.current) && o.current.set(l.current, 0), y(n, V, H, t, 40, m(u.blue, .04)), e.forEach((e, r) => {
|
|
863
929
|
let i = e.count === s, a = i ? u.cyan : u.blue, l = o.current.get(`${e.category}-col`) ?? 0;
|
|
864
930
|
for (let u = 0; u < c; u++) {
|
|
865
931
|
let c = d + r * h + h / 2, _ = p + u * g + g / 2, y = Math.min(h, g) * .38;
|
|
@@ -877,36 +943,36 @@ function De({ categories: e = [], "data-testid": t }) {
|
|
|
877
943
|
}
|
|
878
944
|
let _ = p + c * g + 16;
|
|
879
945
|
n.font = `${i ? "bold " : ""}9px 'JetBrains Mono', monospace`, n.textAlign = "center", n.textBaseline = "alphabetic", n.fillStyle = i ? u.cyan : m(u.t2, .65), n.fillText(e.category, d + r * h + h / 2, _);
|
|
880
|
-
}), b(n,
|
|
946
|
+
}), b(n, V, H, t, .015), S = requestAnimationFrame(C);
|
|
881
947
|
};
|
|
882
948
|
return C(), () => cancelAnimationFrame(S);
|
|
883
949
|
}, [e]), /* @__PURE__ */ c("div", {
|
|
884
950
|
"data-testid": t,
|
|
885
951
|
style: {
|
|
886
952
|
position: "relative",
|
|
887
|
-
width:
|
|
888
|
-
height:
|
|
953
|
+
width: V,
|
|
954
|
+
height: H
|
|
889
955
|
},
|
|
890
956
|
children: [/* @__PURE__ */ s("canvas", {
|
|
891
957
|
ref: r,
|
|
892
958
|
role: "img",
|
|
893
959
|
"aria-label": "Early Warning count by category — breathing dot grid",
|
|
894
960
|
style: {
|
|
895
|
-
width:
|
|
896
|
-
height:
|
|
961
|
+
width: V,
|
|
962
|
+
height: H,
|
|
897
963
|
display: "block",
|
|
898
964
|
borderRadius: 8
|
|
899
965
|
}
|
|
900
966
|
}), /* @__PURE__ */ s(S, {
|
|
901
967
|
...d,
|
|
902
|
-
parentW:
|
|
903
|
-
parentH:
|
|
968
|
+
parentW: V,
|
|
969
|
+
parentH: H
|
|
904
970
|
})]
|
|
905
971
|
});
|
|
906
972
|
}
|
|
907
973
|
//#endregion
|
|
908
974
|
//#region src/components/lineChart/LineChart.tsx
|
|
909
|
-
function
|
|
975
|
+
function Le({ rows: e = [], className: t, colors: n }) {
|
|
910
976
|
return /* @__PURE__ */ s(te, {
|
|
911
977
|
rows: e,
|
|
912
978
|
variant: "line",
|
|
@@ -916,7 +982,7 @@ function Oe({ rows: e = [], className: t, colors: n }) {
|
|
|
916
982
|
}
|
|
917
983
|
//#endregion
|
|
918
984
|
//#region src/components/constants.ts
|
|
919
|
-
var
|
|
985
|
+
var Re = [
|
|
920
986
|
"#36BFFA",
|
|
921
987
|
"#16B364",
|
|
922
988
|
"#D444F1",
|
|
@@ -925,7 +991,7 @@ var ke = [
|
|
|
925
991
|
"#7A5AF8",
|
|
926
992
|
"#EF6820",
|
|
927
993
|
"#D92D20"
|
|
928
|
-
],
|
|
994
|
+
], ze = {
|
|
929
995
|
nodes: [
|
|
930
996
|
{
|
|
931
997
|
id: "supplier-x",
|
|
@@ -968,8 +1034,8 @@ var ke = [
|
|
|
968
1034
|
};
|
|
969
1035
|
//#endregion
|
|
970
1036
|
//#region src/components/miniBars/MiniBars.tsx
|
|
971
|
-
function
|
|
972
|
-
let r = n?.slices ??
|
|
1037
|
+
function Be({ rows: e = [], className: t, colors: n }) {
|
|
1038
|
+
let r = n?.slices ?? Re;
|
|
973
1039
|
return /* @__PURE__ */ s("div", {
|
|
974
1040
|
className: ["d3-mini-bars", t].filter(Boolean).join(" "),
|
|
975
1041
|
children: e.map(([e, t, n], i) => /* @__PURE__ */ c("div", {
|
|
@@ -995,7 +1061,7 @@ function je({ rows: e = [], className: t, colors: n }) {
|
|
|
995
1061
|
width: Math.max(0, Math.min(100, t)),
|
|
996
1062
|
height: "12",
|
|
997
1063
|
rx: "6",
|
|
998
|
-
className: `d3-mini-fill tone-${i %
|
|
1064
|
+
className: `d3-mini-fill tone-${i % Re.length}`,
|
|
999
1065
|
fill: r[i % r.length]
|
|
1000
1066
|
})]
|
|
1001
1067
|
})
|
|
@@ -1007,24 +1073,24 @@ function je({ rows: e = [], className: t, colors: n }) {
|
|
|
1007
1073
|
}
|
|
1008
1074
|
//#endregion
|
|
1009
1075
|
//#region src/components/nceTree/NCETree.tsx
|
|
1010
|
-
var
|
|
1011
|
-
function
|
|
1076
|
+
var Ve = 680, He = 320;
|
|
1077
|
+
function Ue({ total: e = 0, byContractor: t = [], "data-testid": r }) {
|
|
1012
1078
|
let i = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), { hoveredRef: p, tooltip: h, hitZonesRef: g } = C(i, {
|
|
1013
|
-
width:
|
|
1014
|
-
height:
|
|
1079
|
+
width: Ve,
|
|
1080
|
+
height: He
|
|
1015
1081
|
});
|
|
1016
1082
|
return n(() => {
|
|
1017
1083
|
let n = i.current;
|
|
1018
1084
|
if (!n) return;
|
|
1019
|
-
let r = _(n,
|
|
1085
|
+
let r = _(n, Ve, He);
|
|
1020
1086
|
l.current = 0;
|
|
1021
|
-
let a =
|
|
1087
|
+
let a = He / 2, s = Ve - 80, c = Math.max(...t.map((e) => e.count ?? 0)), h = (He - 60) / (t.length - 1), y = t.map((e, t) => ({
|
|
1022
1088
|
x: s,
|
|
1023
1089
|
y: 30 + t * h
|
|
1024
1090
|
})), b, x = () => {
|
|
1025
1091
|
l.current++;
|
|
1026
1092
|
let n = l.current;
|
|
1027
|
-
r.clearRect(0, 0,
|
|
1093
|
+
r.clearRect(0, 0, Ve, He);
|
|
1028
1094
|
let i = E(Math.min(n / 72, 1));
|
|
1029
1095
|
M(o.current, p.current), g.current = [], v(r, 88, a, 48 * i, u.blue, .15 * i), t.forEach((n, l) => {
|
|
1030
1096
|
let p = d[l % d.length], h = j(i, l, t.length, E), _ = y[l], b = o.current.get(n.id) ?? 0, x = Math.max(1.5, (n.count ?? 0) / c * 6);
|
|
@@ -1051,42 +1117,42 @@ function Pe({ total: e = 0, byContractor: t = [], "data-testid": r }) {
|
|
|
1051
1117
|
"data-testid": r,
|
|
1052
1118
|
style: {
|
|
1053
1119
|
position: "relative",
|
|
1054
|
-
width:
|
|
1055
|
-
height:
|
|
1120
|
+
width: Ve,
|
|
1121
|
+
height: He
|
|
1056
1122
|
},
|
|
1057
1123
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1058
1124
|
ref: i,
|
|
1059
1125
|
role: "img",
|
|
1060
1126
|
"aria-label": "NCE fault tree — NCEs per contractor as branching tree",
|
|
1061
1127
|
style: {
|
|
1062
|
-
width:
|
|
1063
|
-
height:
|
|
1128
|
+
width: Ve,
|
|
1129
|
+
height: He,
|
|
1064
1130
|
display: "block"
|
|
1065
1131
|
}
|
|
1066
1132
|
}), /* @__PURE__ */ s(S, {
|
|
1067
1133
|
...h,
|
|
1068
|
-
parentW:
|
|
1069
|
-
parentH:
|
|
1134
|
+
parentW: Ve,
|
|
1135
|
+
parentH: He
|
|
1070
1136
|
})]
|
|
1071
1137
|
});
|
|
1072
1138
|
}
|
|
1073
1139
|
//#endregion
|
|
1074
1140
|
//#region src/components/pieChart/PieChart.tsx
|
|
1075
|
-
var
|
|
1076
|
-
function
|
|
1141
|
+
var We = 192, Ge = We, Ke = We + 80;
|
|
1142
|
+
function qe({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
1077
1143
|
let o = a(null), f = a(/* @__PURE__ */ new Map()), p = a(0), h = i?.slices ?? d, { hoveredRef: y, tooltip: b, hitZonesRef: x } = C(o, {
|
|
1078
|
-
width:
|
|
1079
|
-
height:
|
|
1144
|
+
width: Ge,
|
|
1145
|
+
height: Ke
|
|
1080
1146
|
});
|
|
1081
1147
|
return n(() => {
|
|
1082
1148
|
let n = o.current;
|
|
1083
1149
|
if (!n) return;
|
|
1084
|
-
let r = _(n,
|
|
1150
|
+
let r = _(n, Ge, Ke);
|
|
1085
1151
|
p.current = 0;
|
|
1086
|
-
let i =
|
|
1152
|
+
let i = Ge / 2, a = We / 2, s = We * .4, c = t === "donut" ? We * .21 : 0, l = e.reduce((e, t) => e + (t.pricing ?? 0), 0) || 1, d, b = () => {
|
|
1087
1153
|
p.current++;
|
|
1088
1154
|
let n = p.current;
|
|
1089
|
-
r.clearRect(0, 0,
|
|
1155
|
+
r.clearRect(0, 0, Ge, Ke);
|
|
1090
1156
|
let o = 1 - (1 - Math.min(n / 48, 1)) ** 3;
|
|
1091
1157
|
M(f.current, y.current), x.current = [];
|
|
1092
1158
|
let _ = -Math.PI / 2;
|
|
@@ -1100,10 +1166,10 @@ function Re({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
|
1100
1166
|
let O = A(n, .03, 3e-4), k = s + b * 6 + (b > 0 ? O * 2 : 0);
|
|
1101
1167
|
r.beginPath(), r.moveTo(i + Math.cos(_) * c, a + Math.sin(_) * c), r.arc(i, a, k, _, g), c > 0 ? r.arc(i, a, c, g, _, !0) : r.lineTo(i, a), r.closePath(), r.fillStyle = m(y, .7 + b * .2), r.fill(), r.strokeStyle = m(u.bg, .8), r.lineWidth = 1.5, r.stroke(), _ = g;
|
|
1102
1168
|
}), t === "donut" && e.length > 0 && v(r, i, a, c * .8, u.blue, .06);
|
|
1103
|
-
let S =
|
|
1169
|
+
let S = We + 12;
|
|
1104
1170
|
e.forEach((e, t) => {
|
|
1105
1171
|
let n = h[t % h.length], i = (e.pricing ?? 0) / l, a = f.current.get(e.id ?? `sl-${t}`) ?? 0, o = S + t * 18;
|
|
1106
|
-
r.beginPath(), r.arc(8, o, 4, 0, Math.PI * 2), r.fillStyle = m(n, .8 + a * .2), r.fill(), r.font = "9px 'JetBrains Mono', monospace", r.fillStyle = m(u.t2, .7 + a * .2), r.textAlign = "left", r.fillText(e.vendor, 18, o + 3.5), r.font = "bold 9px 'JetBrains Mono', monospace", r.fillStyle = g(u.t3, n, a), r.textAlign = "right", r.fillText(`${e.pricing ?? 0} (${Math.round(i * 100)}%)`,
|
|
1172
|
+
r.beginPath(), r.arc(8, o, 4, 0, Math.PI * 2), r.fillStyle = m(n, .8 + a * .2), r.fill(), r.font = "9px 'JetBrains Mono', monospace", r.fillStyle = m(u.t2, .7 + a * .2), r.textAlign = "left", r.fillText(e.vendor, 18, o + 3.5), r.font = "bold 9px 'JetBrains Mono', monospace", r.fillStyle = g(u.t3, n, a), r.textAlign = "right", r.fillText(`${e.pricing ?? 0} (${Math.round(i * 100)}%)`, Ge - 4, o + 3.5);
|
|
1107
1173
|
}), d = requestAnimationFrame(b);
|
|
1108
1174
|
};
|
|
1109
1175
|
return b(), () => cancelAnimationFrame(d);
|
|
@@ -1117,30 +1183,30 @@ function Re({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
|
1117
1183
|
children: /* @__PURE__ */ c("div", {
|
|
1118
1184
|
style: {
|
|
1119
1185
|
position: "relative",
|
|
1120
|
-
width:
|
|
1121
|
-
height:
|
|
1186
|
+
width: Ge,
|
|
1187
|
+
height: Ke
|
|
1122
1188
|
},
|
|
1123
1189
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1124
1190
|
ref: o,
|
|
1125
1191
|
role: "img",
|
|
1126
1192
|
"aria-label": `${t} chart`,
|
|
1127
1193
|
style: {
|
|
1128
|
-
width:
|
|
1129
|
-
height:
|
|
1194
|
+
width: Ge,
|
|
1195
|
+
height: Ke,
|
|
1130
1196
|
display: "block",
|
|
1131
1197
|
borderRadius: 8
|
|
1132
1198
|
}
|
|
1133
1199
|
}), /* @__PURE__ */ s(S, {
|
|
1134
1200
|
...b,
|
|
1135
|
-
parentW:
|
|
1136
|
-
parentH:
|
|
1201
|
+
parentW: Ge,
|
|
1202
|
+
parentH: Ke
|
|
1137
1203
|
})]
|
|
1138
1204
|
})
|
|
1139
1205
|
});
|
|
1140
1206
|
}
|
|
1141
1207
|
//#endregion
|
|
1142
1208
|
//#region src/components/sankey/SankeySvg.tsx
|
|
1143
|
-
function
|
|
1209
|
+
function Je(e, t, n, r) {
|
|
1144
1210
|
let i = new Set(t.map((e) => e.source)), a = new Set(t.map((e) => e.target)), o = /* @__PURE__ */ new Map(), s = [];
|
|
1145
1211
|
for (e.forEach((e) => {
|
|
1146
1212
|
i.has(e.id) && !a.has(e.id) && s.push({
|
|
@@ -1185,8 +1251,8 @@ function ze(e, t, n, r) {
|
|
|
1185
1251
|
});
|
|
1186
1252
|
}), f;
|
|
1187
1253
|
}
|
|
1188
|
-
function
|
|
1189
|
-
let y = a(null), x = a(/* @__PURE__ */ new Map()), E = a(0), D = a([]), O = g?.nodes ?? d, k = g?.links ?? u.bd, j = g?.activeLinks ?? u.blue, ee = g?.activeNodes ?? u.blue, N = i(() =>
|
|
1254
|
+
function Ye({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f, selectedEntity: p, className: h, colors: g }) {
|
|
1255
|
+
let y = a(null), x = a(/* @__PURE__ */ new Map()), E = a(0), D = a([]), O = g?.nodes ?? d, k = g?.links ?? u.bd, j = g?.activeLinks ?? u.blue, ee = g?.activeNodes ?? u.blue, N = i(() => Je(e, t, r, o), [
|
|
1190
1256
|
e,
|
|
1191
1257
|
t,
|
|
1192
1258
|
r,
|
|
@@ -1286,7 +1352,7 @@ function Be({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f,
|
|
|
1286
1352
|
}
|
|
1287
1353
|
//#endregion
|
|
1288
1354
|
//#region src/canvas/CausalFlowCanvas.tsx
|
|
1289
|
-
var
|
|
1355
|
+
var Xe = [
|
|
1290
1356
|
{
|
|
1291
1357
|
x: .13,
|
|
1292
1358
|
y: .48
|
|
@@ -1319,7 +1385,7 @@ var Ve = [
|
|
|
1319
1385
|
x: .92,
|
|
1320
1386
|
y: .22
|
|
1321
1387
|
}
|
|
1322
|
-
],
|
|
1388
|
+
], Ze = [
|
|
1323
1389
|
u.blue,
|
|
1324
1390
|
u.cyan,
|
|
1325
1391
|
u.orange,
|
|
@@ -1328,7 +1394,7 @@ var Ve = [
|
|
|
1328
1394
|
u.green,
|
|
1329
1395
|
u.amber,
|
|
1330
1396
|
u.t2
|
|
1331
|
-
],
|
|
1397
|
+
], Qe = [
|
|
1332
1398
|
26,
|
|
1333
1399
|
24,
|
|
1334
1400
|
24,
|
|
@@ -1338,21 +1404,21 @@ var Ve = [
|
|
|
1338
1404
|
22,
|
|
1339
1405
|
22
|
|
1340
1406
|
];
|
|
1341
|
-
function
|
|
1407
|
+
function $e(e, t) {
|
|
1342
1408
|
let n = 1 - t;
|
|
1343
1409
|
return {
|
|
1344
1410
|
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,
|
|
1345
1411
|
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
|
|
1346
1412
|
};
|
|
1347
1413
|
}
|
|
1348
|
-
function
|
|
1414
|
+
function et(e, t) {
|
|
1349
1415
|
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;
|
|
1350
1416
|
return {
|
|
1351
1417
|
x: -i / a,
|
|
1352
1418
|
y: r / a
|
|
1353
1419
|
};
|
|
1354
1420
|
}
|
|
1355
|
-
function
|
|
1421
|
+
function tt(e, t) {
|
|
1356
1422
|
let n = t.x - e.x, r = t.y - e.y;
|
|
1357
1423
|
return {
|
|
1358
1424
|
p0: {
|
|
@@ -1373,7 +1439,7 @@ function Ke(e, t) {
|
|
|
1373
1439
|
}
|
|
1374
1440
|
};
|
|
1375
1441
|
}
|
|
1376
|
-
function
|
|
1442
|
+
function nt({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntity: l }) {
|
|
1377
1443
|
let d = a(null), f = a(0), p = a([]), { hoveredRef: h, tooltip: x, hitZonesRef: T } = C(d, {
|
|
1378
1444
|
width: r,
|
|
1379
1445
|
height: o
|
|
@@ -1381,15 +1447,15 @@ function qe({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1381
1447
|
let t = /* @__PURE__ */ new Map();
|
|
1382
1448
|
return e.forEach((e, n) => t.set(e.id, n)), t;
|
|
1383
1449
|
}, [e]), O = i(() => t.length > 0 ? Math.max(...t.map((e) => e.value)) : 100, [t]), k = (e) => O > 1 ? e / 100 : e, j = i(() => e.map((e, t) => {
|
|
1384
|
-
let n =
|
|
1450
|
+
let n = Xe[t % Xe.length];
|
|
1385
1451
|
return {
|
|
1386
1452
|
id: e.id,
|
|
1387
1453
|
label: e.name,
|
|
1388
1454
|
sub: e.valueLabel ?? "",
|
|
1389
1455
|
x: n.x * r,
|
|
1390
1456
|
y: n.y * o,
|
|
1391
|
-
r:
|
|
1392
|
-
color:
|
|
1457
|
+
r: Qe[t % Qe.length],
|
|
1458
|
+
color: Ze[t % Ze.length]
|
|
1393
1459
|
};
|
|
1394
1460
|
}), [
|
|
1395
1461
|
e,
|
|
@@ -1411,7 +1477,7 @@ function qe({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1411
1477
|
if (t.clearRect(0, 0, r, o), T.current = [], y(t, r, o, e, 50, m(u.blue, .05)), M.forEach((e, n) => {
|
|
1412
1478
|
let r = j[e.fromIdx], i = j[e.toIdx];
|
|
1413
1479
|
if (!r || !i) return;
|
|
1414
|
-
let a = !!l && (r.id === l || i.id === l), o = g(r.color, i.color, .5), s = a ? .18 : .05, c = a ? .25 : .1, d =
|
|
1480
|
+
let a = !!l && (r.id === l || i.id === l), o = g(r.color, i.color, .5), s = a ? .18 : .05, c = a ? .25 : .1, d = tt(r, i);
|
|
1415
1481
|
t.beginPath(), t.moveTo(d.p0.x, d.p0.y), t.bezierCurveTo(d.p1.x, d.p1.y, d.p2.x, d.p2.y, d.p3.x, d.p3.y), t.strokeStyle = m(o, s), t.lineWidth = 16, t.lineCap = "round", t.stroke(), t.strokeStyle = m(o, c), t.lineWidth = 1.5, t.stroke();
|
|
1416
1482
|
for (let t = 0; t < e.conf * 2.5; t++) Math.random() < .45 && p.current.push({
|
|
1417
1483
|
edgeIdx: n,
|
|
@@ -1420,7 +1486,7 @@ function qe({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1420
1486
|
off: (Math.random() - .5) * 13,
|
|
1421
1487
|
sz: .7 + Math.random() * 2
|
|
1422
1488
|
});
|
|
1423
|
-
let f =
|
|
1489
|
+
let f = $e(d, .5), h = `${Math.round(e.conf * 100)}%`;
|
|
1424
1490
|
t.font = "bold 12px 'JetBrains Mono', monospace", t.textBaseline = "middle";
|
|
1425
1491
|
let _ = t.measureText(h).width + 14;
|
|
1426
1492
|
t.fillStyle = "rgba(10,16,24,0.88)", t.beginPath(), t.roundRect(f.x - _ / 2, f.y - 11, _, 22, 6), t.fill(), t.strokeStyle = m(u.cyan, .25), t.lineWidth = 1, t.stroke(), t.fillStyle = m(u.cyan, .9), t.textAlign = "center", t.fillText(h, f.x, f.y);
|
|
@@ -1430,7 +1496,7 @@ function qe({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1430
1496
|
if (!n) return !1;
|
|
1431
1497
|
let r = j[n.fromIdx], i = j[n.toIdx];
|
|
1432
1498
|
if (!r || !i) return !1;
|
|
1433
|
-
let a =
|
|
1499
|
+
let a = tt(r, i), o = $e(a, e.t), s = et(a, e.t), c = o.x + s.x * e.off, l = o.y + s.y * e.off, u = Math.sin(e.t * Math.PI) * .7, d = g(r.color, i.color, e.t);
|
|
1434
1500
|
return v(t, c, l, e.sz * 3, d, u * .1), t.beginPath(), t.arc(c, l, e.sz, 0, Math.PI * 2), t.fillStyle = m(d, u), t.fill(), !0;
|
|
1435
1501
|
}), p.current.length > 350 && (p.current = p.current.slice(-350)), j.forEach((n, r) => {
|
|
1436
1502
|
let i = l === n.id, a = h.current === `node-${r}`, o = A(e, .03, 3e-4) * .1 + 1, s = n.r * o * (i ? 1.15 : 1);
|
|
@@ -1487,10 +1553,10 @@ function qe({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1487
1553
|
}
|
|
1488
1554
|
//#endregion
|
|
1489
1555
|
//#region src/components/sankey/ProcessSankey.tsx
|
|
1490
|
-
function
|
|
1491
|
-
return /* @__PURE__ */ s(
|
|
1492
|
-
nodes:
|
|
1493
|
-
links:
|
|
1556
|
+
function rt({ selectedEntity: e, colors: t }) {
|
|
1557
|
+
return /* @__PURE__ */ s(nt, {
|
|
1558
|
+
nodes: ze.nodes,
|
|
1559
|
+
links: ze.links,
|
|
1494
1560
|
width: 960,
|
|
1495
1561
|
height: 280,
|
|
1496
1562
|
selectedEntity: e
|
|
@@ -1498,7 +1564,7 @@ function Je({ selectedEntity: e, colors: t }) {
|
|
|
1498
1564
|
}
|
|
1499
1565
|
//#endregion
|
|
1500
1566
|
//#region src/components/sankey/RankingSankey.tsx
|
|
1501
|
-
function
|
|
1567
|
+
function it({ rows: e = [], className: t, colors: n }) {
|
|
1502
1568
|
let { nodes: r, links: a } = i(() => {
|
|
1503
1569
|
let t = e.slice(0, 5);
|
|
1504
1570
|
return {
|
|
@@ -1516,7 +1582,7 @@ function Ye({ rows: e = [], className: t, colors: n }) {
|
|
|
1516
1582
|
}))
|
|
1517
1583
|
};
|
|
1518
1584
|
}, [e]);
|
|
1519
|
-
return /* @__PURE__ */ s(
|
|
1585
|
+
return /* @__PURE__ */ s(Ye, {
|
|
1520
1586
|
nodes: r,
|
|
1521
1587
|
links: a,
|
|
1522
1588
|
width: 760,
|
|
@@ -1528,20 +1594,20 @@ function Ye({ rows: e = [], className: t, colors: n }) {
|
|
|
1528
1594
|
}
|
|
1529
1595
|
//#endregion
|
|
1530
1596
|
//#region src/components/quotationBalance/QuotationBalance.tsx
|
|
1531
|
-
var
|
|
1532
|
-
function
|
|
1597
|
+
var at = 500, ot = 320;
|
|
1598
|
+
function st({ accepted: e, submitted: t, "data-testid": r }) {
|
|
1533
1599
|
let i = a(null), o = a(0);
|
|
1534
1600
|
return n(() => {
|
|
1535
1601
|
let n = i.current;
|
|
1536
1602
|
if (!n) return;
|
|
1537
|
-
let r = _(n,
|
|
1603
|
+
let r = _(n, at, ot);
|
|
1538
1604
|
o.current = 0;
|
|
1539
|
-
let a =
|
|
1605
|
+
let a = at / 2, s = Math.max(e.value, t.value), c = (e.value - t.value) / s * 14, l, d = () => {
|
|
1540
1606
|
o.current++;
|
|
1541
1607
|
let n = o.current;
|
|
1542
|
-
r.clearRect(0, 0,
|
|
1608
|
+
r.clearRect(0, 0, at, ot);
|
|
1543
1609
|
let i = E(Math.min(n / 80, 1)), p = c * k(Math.min(n / 80, 1)) * Math.PI / 180;
|
|
1544
|
-
r.strokeStyle = m(u.bd, .5 * i), r.lineWidth = 2, r.beginPath(), r.moveTo(a, 100), r.lineTo(a,
|
|
1610
|
+
r.strokeStyle = m(u.bd, .5 * i), r.lineWidth = 2, r.beginPath(), r.moveTo(a, 100), r.lineTo(a, ot - 80), r.stroke(), r.beginPath(), r.arc(a, 100, 5 * i, 0, Math.PI * 2), r.fillStyle = u.t2, r.fill();
|
|
1545
1611
|
let h = {
|
|
1546
1612
|
x: a - Math.cos(p) * 160,
|
|
1547
1613
|
y: 100 + Math.sin(-p) * 160
|
|
@@ -1567,23 +1633,23 @@ function Qe({ accepted: e, submitted: t, "data-testid": r }) {
|
|
|
1567
1633
|
6
|
|
1568
1634
|
]), r.fill(), r.stroke(), r.strokeStyle = m(u.t3, .35 * i), r.lineWidth = 1, [-90 / 3, 90 / 3].forEach((e) => {
|
|
1569
1635
|
r.beginPath(), r.moveTo(g.x + e, g.y + 4), r.lineTo(g.x + e, x), r.stroke();
|
|
1570
|
-
}), i > .5 && (r.globalAlpha = Math.min(1, (i - .5) / .5), r.font = "bold 14px 'JetBrains Mono', monospace", r.fillStyle = u.amber, r.textAlign = "center", r.fillText(t.label, g.x, x + b + 18), r.font = f.font, r.fillStyle = f.color, r.fillText("Submitted", g.x, x + b + 32), r.fillText(`${t.count} quotations`, g.x, x + b + 44), r.globalAlpha = 1), i > .85 && Math.abs(c) > 1 && (r.globalAlpha = Math.min(1, (i - .85) / .15) * .6, r.font = f.font, r.fillStyle = f.color, r.textAlign = "center", r.fillText(`${Math.abs(c).toFixed(1)}° tilt toward accepted`, a,
|
|
1636
|
+
}), i > .5 && (r.globalAlpha = Math.min(1, (i - .5) / .5), r.font = "bold 14px 'JetBrains Mono', monospace", r.fillStyle = u.amber, r.textAlign = "center", r.fillText(t.label, g.x, x + b + 18), r.font = f.font, r.fillStyle = f.color, r.fillText("Submitted", g.x, x + b + 32), r.fillText(`${t.count} quotations`, g.x, x + b + 44), r.globalAlpha = 1), i > .85 && Math.abs(c) > 1 && (r.globalAlpha = Math.min(1, (i - .85) / .15) * .6, r.font = f.font, r.fillStyle = f.color, r.textAlign = "center", r.fillText(`${Math.abs(c).toFixed(1)}° tilt toward accepted`, a, ot - 12), r.globalAlpha = 1), l = requestAnimationFrame(d);
|
|
1571
1637
|
};
|
|
1572
1638
|
return d(), () => cancelAnimationFrame(l);
|
|
1573
1639
|
}, [e, t]), /* @__PURE__ */ s("div", {
|
|
1574
1640
|
"data-testid": r,
|
|
1575
1641
|
style: {
|
|
1576
1642
|
position: "relative",
|
|
1577
|
-
width:
|
|
1578
|
-
height:
|
|
1643
|
+
width: at,
|
|
1644
|
+
height: ot
|
|
1579
1645
|
},
|
|
1580
1646
|
children: /* @__PURE__ */ s("canvas", {
|
|
1581
1647
|
ref: i,
|
|
1582
1648
|
role: "img",
|
|
1583
1649
|
"aria-label": "Quotation balance — accepted vs submitted quotation value",
|
|
1584
1650
|
style: {
|
|
1585
|
-
width:
|
|
1586
|
-
height:
|
|
1651
|
+
width: at,
|
|
1652
|
+
height: ot,
|
|
1587
1653
|
display: "block"
|
|
1588
1654
|
}
|
|
1589
1655
|
})
|
|
@@ -1591,25 +1657,25 @@ function Qe({ accepted: e, submitted: t, "data-testid": r }) {
|
|
|
1591
1657
|
}
|
|
1592
1658
|
//#endregion
|
|
1593
1659
|
//#region src/components/quotationTrend/QuotationTrend.tsx
|
|
1594
|
-
var
|
|
1595
|
-
function
|
|
1660
|
+
var ct = 680, U = 280;
|
|
1661
|
+
function lt({ trend: e = [], "data-testid": t }) {
|
|
1596
1662
|
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: d, hitZonesRef: p } = C(r, {
|
|
1597
|
-
width:
|
|
1598
|
-
height:
|
|
1663
|
+
width: ct,
|
|
1664
|
+
height: U
|
|
1599
1665
|
});
|
|
1600
1666
|
return n(() => {
|
|
1601
1667
|
let t = r.current;
|
|
1602
1668
|
if (!t) return;
|
|
1603
|
-
let n = _(t,
|
|
1669
|
+
let n = _(t, ct, U);
|
|
1604
1670
|
o.current = 0;
|
|
1605
|
-
let a =
|
|
1671
|
+
let a = ct - 54 - 28, s = U - 30 - 54, c = Math.max(...e.map((e) => e.count), 1), d = e.length, h = d > 1 ? a / (d - 1) : a, g = e.map((e, t) => ({
|
|
1606
1672
|
x: 54 + t * h,
|
|
1607
1673
|
y: 30 + s - e.count / c * s,
|
|
1608
1674
|
point: e
|
|
1609
1675
|
})), y, b = () => {
|
|
1610
1676
|
o.current++;
|
|
1611
1677
|
let e = o.current;
|
|
1612
|
-
n.clearRect(0, 0,
|
|
1678
|
+
n.clearRect(0, 0, ct, U);
|
|
1613
1679
|
let t = E(Math.min(e / 72, 1));
|
|
1614
1680
|
M(i.current, l.current), p.current = [], [
|
|
1615
1681
|
.25,
|
|
@@ -1619,7 +1685,7 @@ function et({ trend: e = [], "data-testid": t }) {
|
|
|
1619
1685
|
].forEach((e) => {
|
|
1620
1686
|
let t = 30 + s - e * s;
|
|
1621
1687
|
n.strokeStyle = m(u.bd, .18), n.lineWidth = 1, n.setLineDash([3, 5]), n.beginPath(), n.moveTo(54, t), n.lineTo(54 + a, t), n.stroke(), n.setLineDash([]), n.font = f.font, n.fillStyle = f.color, n.textAlign = "right", n.fillText(String(Math.round(c * e)), 48, t + 3);
|
|
1622
|
-
}), n.save(), n.translate(12, 30 + s / 2), n.rotate(-Math.PI / 2), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Submissions", 0, 0), n.restore(), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Week", 54 + a / 2,
|
|
1688
|
+
}), n.save(), n.translate(12, 30 + s / 2), n.rotate(-Math.PI / 2), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Submissions", 0, 0), n.restore(), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Week", 54 + a / 2, U - 6), n.strokeStyle = m(u.bd, .3), n.lineWidth = 1, n.setLineDash([]), n.beginPath(), n.moveTo(54, 30 + s), n.lineTo(54 + a, 30 + s), n.stroke();
|
|
1623
1689
|
let r = t * (d - 1), h = Math.floor(r) + 1;
|
|
1624
1690
|
if (h >= 2) {
|
|
1625
1691
|
n.beginPath(), n.moveTo(g[0].x, 30 + s), n.lineTo(g[0].x, g[0].y);
|
|
@@ -1647,7 +1713,7 @@ function et({ trend: e = [], "data-testid": t }) {
|
|
|
1647
1713
|
color: u.cyan
|
|
1648
1714
|
}), a > 0 && x(n, e.x, 30, 30 + s, m(u.cyan, .15 * a));
|
|
1649
1715
|
let o = e.point.count === c;
|
|
1650
|
-
(a > 0 || o) && v(n, e.x, e.y, 14, u.cyan, (o ? .3 : 0) + a * .25), n.beginPath(), n.arc(e.x, e.y, a > 0 ? 5 : 3.5, 0, Math.PI * 2), n.fillStyle = m(u.cyan, a > 0 ? 1 : .8), n.fill(), (a > 0 || o) && (n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = u.cyan, n.textAlign = "center", n.fillText(String(e.point.count), e.x, e.y - 10)), n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = a > 0 ? u.cyan : f.color, n.textAlign = "center", n.fillText(e.point.week, e.x,
|
|
1716
|
+
(a > 0 || o) && v(n, e.x, e.y, 14, u.cyan, (o ? .3 : 0) + a * .25), n.beginPath(), n.arc(e.x, e.y, a > 0 ? 5 : 3.5, 0, Math.PI * 2), n.fillStyle = m(u.cyan, a > 0 ? 1 : .8), n.fill(), (a > 0 || o) && (n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = u.cyan, n.textAlign = "center", n.fillText(String(e.point.count), e.x, e.y - 10)), n.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = a > 0 ? u.cyan : f.color, n.textAlign = "center", n.fillText(e.point.week, e.x, U - 54 + 14);
|
|
1651
1717
|
}), y = requestAnimationFrame(b);
|
|
1652
1718
|
};
|
|
1653
1719
|
return b(), () => cancelAnimationFrame(y);
|
|
@@ -1661,54 +1727,54 @@ function et({ trend: e = [], "data-testid": t }) {
|
|
|
1661
1727
|
children: /* @__PURE__ */ c("div", {
|
|
1662
1728
|
style: {
|
|
1663
1729
|
position: "relative",
|
|
1664
|
-
width:
|
|
1665
|
-
height:
|
|
1730
|
+
width: ct,
|
|
1731
|
+
height: U
|
|
1666
1732
|
},
|
|
1667
1733
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1668
1734
|
ref: r,
|
|
1669
1735
|
role: "img",
|
|
1670
1736
|
"aria-label": "Trend chart — count over time",
|
|
1671
1737
|
style: {
|
|
1672
|
-
width:
|
|
1673
|
-
height:
|
|
1738
|
+
width: ct,
|
|
1739
|
+
height: U,
|
|
1674
1740
|
display: "block"
|
|
1675
1741
|
}
|
|
1676
1742
|
}), /* @__PURE__ */ s(S, {
|
|
1677
1743
|
...d,
|
|
1678
|
-
parentW:
|
|
1679
|
-
parentH:
|
|
1744
|
+
parentW: ct,
|
|
1745
|
+
parentH: U
|
|
1680
1746
|
})]
|
|
1681
1747
|
})
|
|
1682
1748
|
});
|
|
1683
1749
|
}
|
|
1684
1750
|
//#endregion
|
|
1685
1751
|
//#region src/components/trend/Trend.tsx
|
|
1686
|
-
var
|
|
1687
|
-
function
|
|
1752
|
+
var ut = 680, W = 280, dt = 54, ft = 28, pt = 64, mt = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", ht = 12;
|
|
1753
|
+
function gt({ trend: e = [], "data-testid": t }) {
|
|
1688
1754
|
let r = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), d = i(() => {
|
|
1689
|
-
if (e.length <= 1) return
|
|
1755
|
+
if (e.length <= 1) return pt;
|
|
1690
1756
|
let t = document.createElement("canvas").getContext("2d");
|
|
1691
|
-
if (!t) return
|
|
1692
|
-
t.font =
|
|
1757
|
+
if (!t) return pt;
|
|
1758
|
+
t.font = mt;
|
|
1693
1759
|
let n = Math.max(...e.map((e) => t.measureText(e.week).width));
|
|
1694
|
-
return Math.max(
|
|
1695
|
-
}, [e]), p = Math.max(
|
|
1760
|
+
return Math.max(pt, n + ht);
|
|
1761
|
+
}, [e]), p = Math.max(ut, dt + ft + Math.max(0, e.length - 1) * d), { hoveredRef: h, tooltip: g, hitZonesRef: y } = C(r, {
|
|
1696
1762
|
width: p,
|
|
1697
|
-
height:
|
|
1763
|
+
height: W
|
|
1698
1764
|
});
|
|
1699
1765
|
return n(() => {
|
|
1700
1766
|
let t = r.current;
|
|
1701
1767
|
if (!t) return;
|
|
1702
|
-
let n = _(t, p,
|
|
1768
|
+
let n = _(t, p, W);
|
|
1703
1769
|
l.current = 0;
|
|
1704
|
-
let i =
|
|
1770
|
+
let i = dt, a = ft, s = p - i - a, c = W - 30 - 54, g = Math.max(...e.map((e) => e.count), 1), b = e.length, S = b > 1 ? Math.max(s / (b - 1), d) : s, C = e.map((e, t) => ({
|
|
1705
1771
|
x: i + t * S,
|
|
1706
1772
|
y: 30 + c - e.count / g * c,
|
|
1707
1773
|
point: e
|
|
1708
1774
|
})), T, D = () => {
|
|
1709
1775
|
l.current++;
|
|
1710
1776
|
let e = l.current;
|
|
1711
|
-
n.clearRect(0, 0, p,
|
|
1777
|
+
n.clearRect(0, 0, p, W);
|
|
1712
1778
|
let t = E(Math.min(e / 72, 1));
|
|
1713
1779
|
M(o.current, h.current), y.current = [], [
|
|
1714
1780
|
.25,
|
|
@@ -1718,7 +1784,7 @@ function st({ trend: e = [], "data-testid": t }) {
|
|
|
1718
1784
|
].forEach((e) => {
|
|
1719
1785
|
let t = 30 + c - e * c;
|
|
1720
1786
|
n.strokeStyle = m(u.bd, .18), n.lineWidth = 1, n.setLineDash([3, 5]), n.beginPath(), n.moveTo(i, t), n.lineTo(i + s, t), n.stroke(), n.setLineDash([]), n.font = f.font, n.fillStyle = f.color, n.textAlign = "right", n.fillText(String(Math.round(g * e)), i - 6, t + 3);
|
|
1721
|
-
}), n.save(), n.translate(12, 30 + c / 2), n.rotate(-Math.PI / 2), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Count", 0, 0), n.restore(), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Period", i + s / 2,
|
|
1787
|
+
}), n.save(), n.translate(12, 30 + c / 2), n.rotate(-Math.PI / 2), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Count", 0, 0), n.restore(), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Period", i + s / 2, W - 6), n.strokeStyle = m(u.bd, .3), n.lineWidth = 1, n.setLineDash([]), n.beginPath(), n.moveTo(i, 30 + c), n.lineTo(i + s, 30 + c), n.stroke();
|
|
1722
1788
|
let r = t * (b - 1), a = Math.floor(r) + 1;
|
|
1723
1789
|
if (a >= 2) {
|
|
1724
1790
|
n.beginPath(), n.moveTo(C[0].x, 30 + c), n.lineTo(C[0].x, C[0].y);
|
|
@@ -1746,7 +1812,7 @@ function st({ trend: e = [], "data-testid": t }) {
|
|
|
1746
1812
|
color: u.cyan
|
|
1747
1813
|
}), i > 0 && x(n, e.x, 30, 30 + c, m(u.cyan, .15 * i));
|
|
1748
1814
|
let s = e.point.count === g;
|
|
1749
|
-
(i > 0 || s) && v(n, e.x, e.y, 14, u.cyan, (s ? .3 : 0) + i * .25), n.beginPath(), n.arc(e.x, e.y, i > 0 ? 5 : 3.5, 0, Math.PI * 2), n.fillStyle = m(u.cyan, i > 0 ? 1 : .8), n.fill(), (i > 0 || s) && (n.font =
|
|
1815
|
+
(i > 0 || s) && v(n, e.x, e.y, 14, u.cyan, (s ? .3 : 0) + i * .25), n.beginPath(), n.arc(e.x, e.y, i > 0 ? 5 : 3.5, 0, Math.PI * 2), n.fillStyle = m(u.cyan, i > 0 ? 1 : .8), n.fill(), (i > 0 || s) && (n.font = mt, n.fillStyle = u.cyan, n.textAlign = "center", n.fillText(String(e.point.count), e.x, e.y - 10)), n.font = mt, n.fillStyle = i > 0 ? u.cyan : f.color, n.textAlign = "center", n.fillText(e.point.week, e.x, W - 54 + 14);
|
|
1750
1816
|
}), T = requestAnimationFrame(D);
|
|
1751
1817
|
};
|
|
1752
1818
|
return D(), () => cancelAnimationFrame(T);
|
|
@@ -1765,7 +1831,7 @@ function st({ trend: e = [], "data-testid": t }) {
|
|
|
1765
1831
|
style: {
|
|
1766
1832
|
position: "relative",
|
|
1767
1833
|
width: p,
|
|
1768
|
-
height:
|
|
1834
|
+
height: W
|
|
1769
1835
|
},
|
|
1770
1836
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1771
1837
|
ref: r,
|
|
@@ -1773,44 +1839,44 @@ function st({ trend: e = [], "data-testid": t }) {
|
|
|
1773
1839
|
"aria-label": "Trend chart — count over time",
|
|
1774
1840
|
style: {
|
|
1775
1841
|
width: p,
|
|
1776
|
-
height:
|
|
1842
|
+
height: W,
|
|
1777
1843
|
display: "block"
|
|
1778
1844
|
}
|
|
1779
1845
|
}), /* @__PURE__ */ s(S, {
|
|
1780
1846
|
...g,
|
|
1781
1847
|
parentW: p,
|
|
1782
|
-
parentH:
|
|
1848
|
+
parentH: W
|
|
1783
1849
|
})]
|
|
1784
1850
|
})
|
|
1785
1851
|
});
|
|
1786
1852
|
}
|
|
1787
1853
|
//#endregion
|
|
1788
1854
|
//#region src/components/severityBands/SeverityBands.tsx
|
|
1789
|
-
var
|
|
1855
|
+
var G = 680, _t = 240, vt = {
|
|
1790
1856
|
Critical: u.red,
|
|
1791
1857
|
High: u.orange,
|
|
1792
1858
|
Medium: u.amber,
|
|
1793
1859
|
Low: u.green
|
|
1794
1860
|
};
|
|
1795
|
-
function
|
|
1861
|
+
function yt({ severities: e = [], "data-testid": t }) {
|
|
1796
1862
|
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: d, hitZonesRef: p } = C(r, {
|
|
1797
|
-
width:
|
|
1798
|
-
height:
|
|
1863
|
+
width: G,
|
|
1864
|
+
height: _t
|
|
1799
1865
|
});
|
|
1800
1866
|
return n(() => {
|
|
1801
1867
|
let t = r.current;
|
|
1802
1868
|
if (!t) return;
|
|
1803
|
-
let n = _(t,
|
|
1869
|
+
let n = _(t, G, _t);
|
|
1804
1870
|
o.current = 0;
|
|
1805
|
-
let a = e.reduce((e, t) => e + t.count, 0), s =
|
|
1871
|
+
let a = e.reduce((e, t) => e + t.count, 0), s = G - 28 - 28, c = _t - 50 - 52, d = e.map((e) => e.count / a * s), h, g = () => {
|
|
1806
1872
|
o.current++;
|
|
1807
1873
|
let t = o.current;
|
|
1808
|
-
n.clearRect(0, 0,
|
|
1874
|
+
n.clearRect(0, 0, G, _t);
|
|
1809
1875
|
let r = D(Math.min(t / 60, 1));
|
|
1810
|
-
M(i.current, l.current), p.current = [], n.strokeStyle = m(u.bd, .2), n.lineWidth = 1, n.beginPath(), n.rect(28, 50, s, c), n.stroke(), n.strokeStyle = m(u.t4, .15), n.lineWidth = 1, n.setLineDash([4, 4]), n.beginPath(), n.moveTo(
|
|
1876
|
+
M(i.current, l.current), p.current = [], n.strokeStyle = m(u.bd, .2), n.lineWidth = 1, n.beginPath(), n.rect(28, 50, s, c), n.stroke(), n.strokeStyle = m(u.t4, .15), n.lineWidth = 1, n.setLineDash([4, 4]), n.beginPath(), n.moveTo(G / 2, 50), n.lineTo(G / 2, 50 + c), n.stroke(), n.setLineDash([]);
|
|
1811
1877
|
let _ = 28;
|
|
1812
1878
|
e.forEach((e, t) => {
|
|
1813
|
-
let o =
|
|
1879
|
+
let o = vt[e.severity] ?? u.blue, s = d[t];
|
|
1814
1880
|
s * r;
|
|
1815
1881
|
let l = i.current.get(e.severity) ?? 0, h = _ + s / 2, g = s * .85;
|
|
1816
1882
|
h - g / 2;
|
|
@@ -1834,57 +1900,57 @@ function ut({ severities: e = [], "data-testid": t }) {
|
|
|
1834
1900
|
"data-testid": t,
|
|
1835
1901
|
style: {
|
|
1836
1902
|
position: "relative",
|
|
1837
|
-
width:
|
|
1838
|
-
height:
|
|
1903
|
+
width: G,
|
|
1904
|
+
height: _t
|
|
1839
1905
|
},
|
|
1840
1906
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1841
1907
|
ref: r,
|
|
1842
1908
|
role: "img",
|
|
1843
1909
|
"aria-label": "Early Warning severity distribution — prism spectrum bands",
|
|
1844
1910
|
style: {
|
|
1845
|
-
width:
|
|
1846
|
-
height:
|
|
1911
|
+
width: G,
|
|
1912
|
+
height: _t,
|
|
1847
1913
|
display: "block"
|
|
1848
1914
|
}
|
|
1849
1915
|
}), /* @__PURE__ */ s(S, {
|
|
1850
1916
|
...d,
|
|
1851
|
-
parentW:
|
|
1852
|
-
parentH:
|
|
1917
|
+
parentW: G,
|
|
1918
|
+
parentH: _t
|
|
1853
1919
|
})]
|
|
1854
1920
|
});
|
|
1855
1921
|
}
|
|
1856
1922
|
//#endregion
|
|
1857
1923
|
//#region src/components/statusArc/StatusArc.tsx
|
|
1858
|
-
var
|
|
1924
|
+
var K = 460, q = 300, bt = {
|
|
1859
1925
|
Open: u.red,
|
|
1860
1926
|
Submitted: u.amber,
|
|
1861
1927
|
Closed: u.green
|
|
1862
1928
|
};
|
|
1863
|
-
function
|
|
1929
|
+
function xt({ segments: e = [], title: t, "data-testid": r }) {
|
|
1864
1930
|
let i = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), { hoveredRef: d, tooltip: p, hitZonesRef: h } = C(i, {
|
|
1865
|
-
width:
|
|
1866
|
-
height:
|
|
1931
|
+
width: K,
|
|
1932
|
+
height: q
|
|
1867
1933
|
});
|
|
1868
1934
|
return n(() => {
|
|
1869
1935
|
let t = i.current;
|
|
1870
1936
|
if (!t) return;
|
|
1871
|
-
let n = _(t,
|
|
1937
|
+
let n = _(t, K, q);
|
|
1872
1938
|
o.current = 0;
|
|
1873
|
-
let r =
|
|
1939
|
+
let r = K * .5, a = q * .54, s = K * .22, c = e.reduce((e, t) => e + t.count, 0), p = Math.max(...e.map((e) => e.count), 1), g, x = () => {
|
|
1874
1940
|
o.current++;
|
|
1875
1941
|
let t = o.current;
|
|
1876
|
-
n.clearRect(0, 0,
|
|
1942
|
+
n.clearRect(0, 0, K, q), h.current = [], l.current.forEach((e, t) => {
|
|
1877
1943
|
let n = t === d.current ? 1 : 0, r = e + (n - e) * .12;
|
|
1878
1944
|
Math.abs(r - n) < .005 ? n === 0 ? l.current.delete(t) : l.current.set(t, 1) : l.current.set(t, r);
|
|
1879
|
-
}), d.current && !l.current.has(d.current) && l.current.set(d.current, 0), y(n,
|
|
1880
|
-
let o = i / 3 * Math.PI * 2 - Math.PI / 2, c = r + Math.cos(o) * s, l = a + Math.sin(o) * s, d =
|
|
1945
|
+
}), d.current && !l.current.has(d.current) && l.current.set(d.current, 0), y(n, K, q, t, 40, m(u.blue, .04)), e.forEach((e, i) => {
|
|
1946
|
+
let o = i / 3 * Math.PI * 2 - Math.PI / 2, c = r + Math.cos(o) * s, l = a + Math.sin(o) * s, d = bt[e.status] ?? u.blue, h = 2 + e.count / p * 8;
|
|
1881
1947
|
n.beginPath(), n.moveTo(r, a), n.lineTo(c, l), n.strokeStyle = m(d, .08), n.lineWidth = h * 2, n.stroke(), n.beginPath(), n.moveTo(r, a), n.lineTo(c, l), n.strokeStyle = m(d, .25), n.lineWidth = 1, n.stroke();
|
|
1882
1948
|
let g = (t * .005 + i * .33) % 1, _ = r + (c - r) * g, y = a + (l - a) * g;
|
|
1883
1949
|
v(n, _, y, 6, d, .4), n.beginPath(), n.arc(_, y, 2, 0, Math.PI * 2), n.fillStyle = m(d, .8), n.fill();
|
|
1884
1950
|
let b = (r + c) / 2, x = (a + l) / 2;
|
|
1885
1951
|
n.font = "bold " + f.font, n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = m(d, .85), n.fillText(String(e.count), b, x);
|
|
1886
1952
|
}), e.forEach((e, t) => {
|
|
1887
|
-
let i = t / 3 * Math.PI * 2 - Math.PI / 2, o = r + Math.cos(i) * s, d = a + Math.sin(i) * s, g =
|
|
1953
|
+
let i = t / 3 * Math.PI * 2 - Math.PI / 2, o = r + Math.cos(i) * s, d = a + Math.sin(i) * s, g = bt[e.status] ?? u.blue, _ = 10 + e.count / p * 18, y = l.current.get(e.status) ?? 0;
|
|
1888
1954
|
v(n, o, d, _ * 2.5, g, .2 + y * .15);
|
|
1889
1955
|
let b = n.createRadialGradient(o, d - _ * .2, 0, o, d, _);
|
|
1890
1956
|
b.addColorStop(0, m(g, .8 + y * .2)), b.addColorStop(1, m(g, .4 + y * .1)), n.beginPath(), n.arc(o, d, _, 0, Math.PI * 2), n.fillStyle = b, n.fill(), n.font = "bold " + f.font, n.textAlign = "center", n.textBaseline = "middle", n.fillStyle = m(u.t1, .9), n.fillText(e.status, o, d), w(h.current, e.status, o, d, _ + 6, {
|
|
@@ -1901,37 +1967,37 @@ function ft({ segments: e = [], title: t, "data-testid": r }) {
|
|
|
1901
1967
|
label: "Total EW Status",
|
|
1902
1968
|
value: `${c} Early Warnings`,
|
|
1903
1969
|
color: u.t3
|
|
1904
|
-
}), b(n,
|
|
1970
|
+
}), b(n, K, q, t, .015), g = requestAnimationFrame(x);
|
|
1905
1971
|
};
|
|
1906
1972
|
return x(), () => cancelAnimationFrame(g);
|
|
1907
1973
|
}, [e, t]), /* @__PURE__ */ c("div", {
|
|
1908
1974
|
"data-testid": r,
|
|
1909
1975
|
style: {
|
|
1910
1976
|
position: "relative",
|
|
1911
|
-
width:
|
|
1912
|
-
height:
|
|
1977
|
+
width: K,
|
|
1978
|
+
height: q
|
|
1913
1979
|
},
|
|
1914
1980
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1915
1981
|
ref: i,
|
|
1916
1982
|
role: "img",
|
|
1917
1983
|
"aria-label": t ?? "EW status arc visualization",
|
|
1918
1984
|
style: {
|
|
1919
|
-
width:
|
|
1920
|
-
height:
|
|
1985
|
+
width: K,
|
|
1986
|
+
height: q,
|
|
1921
1987
|
display: "block",
|
|
1922
1988
|
borderRadius: 8
|
|
1923
1989
|
}
|
|
1924
1990
|
}), /* @__PURE__ */ s(S, {
|
|
1925
1991
|
...p,
|
|
1926
|
-
parentW:
|
|
1927
|
-
parentH:
|
|
1992
|
+
parentW: K,
|
|
1993
|
+
parentH: q
|
|
1928
1994
|
})]
|
|
1929
1995
|
});
|
|
1930
1996
|
}
|
|
1931
1997
|
//#endregion
|
|
1932
1998
|
//#region src/components/trendChart/TrendChart.tsx
|
|
1933
|
-
var
|
|
1934
|
-
function
|
|
1999
|
+
var J = 280, Y = 96;
|
|
2000
|
+
function St({ points: e = [], className: t, colors: r }) {
|
|
1935
2001
|
let o = a(null), d = a(/* @__PURE__ */ new Map()), f = a(0), p = i(() => e.map(([e, t]) => {
|
|
1936
2002
|
let n = String(t).match(/-?\d+(\.\d+)?/);
|
|
1937
2003
|
return {
|
|
@@ -1939,18 +2005,18 @@ function mt({ points: e = [], className: t, colors: r }) {
|
|
|
1939
2005
|
value: n ? Number(n[0]) : 0
|
|
1940
2006
|
};
|
|
1941
2007
|
}), [e]), { mouseRef: h, hoveredRef: g, tooltip: y, hitZonesRef: b } = C(o, {
|
|
1942
|
-
width:
|
|
2008
|
+
width: J,
|
|
1943
2009
|
height: Y
|
|
1944
2010
|
});
|
|
1945
2011
|
return n(() => {
|
|
1946
2012
|
let e = o.current;
|
|
1947
2013
|
if (!e) return;
|
|
1948
|
-
let t = _(e,
|
|
2014
|
+
let t = _(e, J, Y);
|
|
1949
2015
|
f.current = 0;
|
|
1950
2016
|
let n = r?.line ?? u.blue, i = r?.point ?? u.blue, a = r?.axisLine ?? u.bd, s, c = () => {
|
|
1951
2017
|
f.current++;
|
|
1952
2018
|
let e = f.current;
|
|
1953
|
-
if (t.clearRect(0, 0,
|
|
2019
|
+
if (t.clearRect(0, 0, J, Y), p.length < 2) {
|
|
1954
2020
|
s = requestAnimationFrame(c);
|
|
1955
2021
|
return;
|
|
1956
2022
|
}
|
|
@@ -1959,8 +2025,8 @@ function mt({ points: e = [], className: t, colors: r }) {
|
|
|
1959
2025
|
right: 12,
|
|
1960
2026
|
top: 16,
|
|
1961
2027
|
bottom: 20
|
|
1962
|
-
}, o =
|
|
1963
|
-
if (M(d.current, g.current), b.current = [], t.strokeStyle = m(a, .3), t.lineWidth = .5, t.setLineDash([]), t.beginPath(), t.moveTo(r.left, Y - r.bottom), t.lineTo(
|
|
2028
|
+
}, o = J - r.left - r.right, l = Y - r.top - r.bottom, _ = p.map((e) => e.value), y = Math.min(..._), S = Math.max(..._) - y || 1, C = (e) => r.left + e / (p.length - 1) * o, T = (e) => r.top + (1 - (e - y) / S) * l, E = 1 - (1 - Math.min(e / 48, 1)) ** 3, D = Math.max(2, Math.floor(E * p.length));
|
|
2029
|
+
if (M(d.current, g.current), b.current = [], t.strokeStyle = m(a, .3), t.lineWidth = .5, t.setLineDash([]), t.beginPath(), t.moveTo(r.left, Y - r.bottom), t.lineTo(J - r.right, Y - r.bottom), t.stroke(), t.font = "9px 'JetBrains Mono', monospace", t.fillStyle = m(u.t4, .9), t.textAlign = "center", p.forEach((e, n) => {
|
|
1964
2030
|
t.fillText(e.label.replace("Day ", "D"), C(n), Y - 4);
|
|
1965
2031
|
}), h.current.over && g.current) {
|
|
1966
2032
|
let e = parseInt(g.current.split("-")[1]);
|
|
@@ -1997,7 +2063,7 @@ function mt({ points: e = [], className: t, colors: r }) {
|
|
|
1997
2063
|
children: /* @__PURE__ */ c("div", {
|
|
1998
2064
|
style: {
|
|
1999
2065
|
position: "relative",
|
|
2000
|
-
width:
|
|
2066
|
+
width: J,
|
|
2001
2067
|
height: Y
|
|
2002
2068
|
},
|
|
2003
2069
|
children: [/* @__PURE__ */ s("canvas", {
|
|
@@ -2005,14 +2071,14 @@ function mt({ points: e = [], className: t, colors: r }) {
|
|
|
2005
2071
|
role: "img",
|
|
2006
2072
|
"aria-label": "trend chart",
|
|
2007
2073
|
style: {
|
|
2008
|
-
width:
|
|
2074
|
+
width: J,
|
|
2009
2075
|
height: Y,
|
|
2010
2076
|
display: "block",
|
|
2011
2077
|
borderRadius: 8
|
|
2012
2078
|
}
|
|
2013
2079
|
}), /* @__PURE__ */ s(S, {
|
|
2014
2080
|
...y,
|
|
2015
|
-
parentW:
|
|
2081
|
+
parentW: J,
|
|
2016
2082
|
parentH: Y
|
|
2017
2083
|
})]
|
|
2018
2084
|
})
|
|
@@ -2020,87 +2086,97 @@ function mt({ points: e = [], className: t, colors: r }) {
|
|
|
2020
2086
|
}
|
|
2021
2087
|
//#endregion
|
|
2022
2088
|
//#region src/components/variationSplit/VariationSplit.tsx
|
|
2023
|
-
var
|
|
2024
|
-
function
|
|
2025
|
-
let r = a(null),
|
|
2026
|
-
width:
|
|
2027
|
-
height:
|
|
2089
|
+
var Ct = 680, wt = 8, Tt = 26, Et = 14, Dt = 16, Ot = 32;
|
|
2090
|
+
function kt({ contractors: e = [], "data-testid": t }) {
|
|
2091
|
+
let r = a(null), l = a(/* @__PURE__ */ new Map()), f = a(0), [h, g] = o(!1), y = i(() => h ? e : e.slice(0, wt), [e, h]), b = Dt + Ot + y.length * (Tt + Et) - Et, { hoveredRef: x, tooltip: w, hitZonesRef: E } = C(r, {
|
|
2092
|
+
width: Ct,
|
|
2093
|
+
height: b
|
|
2028
2094
|
});
|
|
2029
2095
|
return n(() => {
|
|
2030
|
-
let
|
|
2031
|
-
if (!
|
|
2032
|
-
let
|
|
2033
|
-
|
|
2034
|
-
let a =
|
|
2035
|
-
|
|
2036
|
-
let
|
|
2037
|
-
|
|
2038
|
-
let
|
|
2039
|
-
M(
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2096
|
+
let e = r.current;
|
|
2097
|
+
if (!e) return;
|
|
2098
|
+
let t = _(e, Ct, b);
|
|
2099
|
+
f.current = 0;
|
|
2100
|
+
let n = Dt, i = Ot, a = Tt, o = Et, s = Ct - 60 - 28, c = Math.max(...y.map((e) => (e.implemented ?? 0) + (e.unimplemented ?? 0))), h = y.length * (a + o) - o, g = n + (b - n - i - h) / 2, S, C = () => {
|
|
2101
|
+
f.current++;
|
|
2102
|
+
let e = f.current;
|
|
2103
|
+
t.clearRect(0, 0, Ct, b);
|
|
2104
|
+
let n = D(Math.min(e / 60, 1));
|
|
2105
|
+
M(l.current, x.current), E.current = [], y.forEach((e, r) => {
|
|
2106
|
+
d[r % d.length];
|
|
2107
|
+
let i = j(n, r, y.length, D), f = g + r * (a + o), p = (e.implemented ?? 0) + (e.unimplemented ?? 0), h = (e.implemented ?? 0) / c * s * i, _ = (e.unimplemented ?? 0) / c * s * i, b = `${e.id}-impl`, x = `${e.id}-un`, S = l.current.get(b) ?? 0, C = l.current.get(x) ?? 0;
|
|
2108
|
+
T(E.current, b, 60, f, h || 1, a, {
|
|
2109
|
+
label: `${e.name} — Implemented`,
|
|
2110
|
+
value: `${e.implemented ?? 0} variations`,
|
|
2111
|
+
sublabel: `${Math.round((e.implemented ?? 0) / (p || 1) * 100)}% complete`,
|
|
2045
2112
|
color: u.green
|
|
2046
|
-
}), T(
|
|
2047
|
-
label: `${
|
|
2048
|
-
value: `${
|
|
2049
|
-
sublabel: `${Math.round((
|
|
2113
|
+
}), T(E.current, x, 60 + h, f, _ || 1, a, {
|
|
2114
|
+
label: `${e.name} — Unimplemented`,
|
|
2115
|
+
value: `${e.unimplemented ?? 0} variations`,
|
|
2116
|
+
sublabel: `${Math.round((e.unimplemented ?? 0) / (p || 1) * 100)}% pending`,
|
|
2050
2117
|
color: u.amber
|
|
2051
|
-
}),
|
|
2118
|
+
}), t.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", t.fillStyle = u.t2, t.textAlign = "right", t.fillText(e.abbreviation ?? e.name.slice(0, 6), 52, f + a / 2 + 4), t.fillStyle = m(u.bd, .15), t.beginPath(), t.roundRect(60, f, p / c * s, a, 4), t.fill(), h > 0 && (S > 0 && v(t, 60 + h / 2, f + a / 2, h * .3, u.green, .12 * S), t.fillStyle = m(u.green, .6 + S * .2), t.beginPath(), t.roundRect(60, f, h, a, [
|
|
2052
2119
|
4,
|
|
2053
2120
|
0,
|
|
2054
2121
|
0,
|
|
2055
2122
|
4
|
|
2056
|
-
]),
|
|
2123
|
+
]), t.fill(), h > 28 && i > .5 && (t.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", t.fillStyle = S > 0 ? u.green : u.t2, t.textAlign = "center", t.fillText(String(e.implemented ?? 0), 60 + h / 2, f + a / 2 + 4))), _ > 0 && (C > 0 && v(t, 60 + h + _ / 2, f + a / 2, _ * .3, u.amber, .12 * C), t.fillStyle = m(u.amber, .18 + C * .18), t.strokeStyle = m(u.amber, .3 + C * .3), t.lineWidth = 1, t.beginPath(), t.roundRect(60 + h, f, _, a, [
|
|
2057
2124
|
0,
|
|
2058
2125
|
4,
|
|
2059
2126
|
4,
|
|
2060
2127
|
0
|
|
2061
|
-
]),
|
|
2128
|
+
]), t.fill(), t.stroke(), _ > 28 && i > .5 && (t.font = "500 14px 'Satoshi Variable', 'DM Sans', sans-serif", t.fillStyle = C > 0 ? u.amber : u.t2, t.textAlign = "center", t.fillText(String(e.unimplemented ?? 0), 60 + h + _ / 2, f + a / 2 + 4))), h > 0 && _ > 0 && (t.strokeStyle = m(u.bg, .7), t.lineWidth = 2, t.beginPath(), t.moveTo(60 + h, f), t.lineTo(60 + h, f + a), t.stroke());
|
|
2062
2129
|
});
|
|
2063
|
-
let
|
|
2064
|
-
|
|
2130
|
+
let r = g + h + 24, i = 60 + s / 2;
|
|
2131
|
+
t.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", t.textAlign = "right", t.fillStyle = u.green, t.fillText("■ Implemented", i - 10, r), t.textAlign = "left", t.fillStyle = p.color, t.fillText("■ Unimplemented", i + 10, r), S = requestAnimationFrame(C);
|
|
2065
2132
|
};
|
|
2066
|
-
return
|
|
2067
|
-
}, [
|
|
2133
|
+
return C(), () => cancelAnimationFrame(S);
|
|
2134
|
+
}, [y, b]), /* @__PURE__ */ c("div", {
|
|
2068
2135
|
"data-testid": t,
|
|
2069
|
-
style: {
|
|
2070
|
-
|
|
2071
|
-
width: ht,
|
|
2072
|
-
height: gt
|
|
2073
|
-
},
|
|
2074
|
-
children: [/* @__PURE__ */ s("canvas", {
|
|
2075
|
-
ref: r,
|
|
2076
|
-
role: "img",
|
|
2077
|
-
"aria-label": "Implemented vs unimplemented variations per contractor — split bar",
|
|
2136
|
+
style: { width: Ct },
|
|
2137
|
+
children: [/* @__PURE__ */ c("div", {
|
|
2078
2138
|
style: {
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
}
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
2086
|
-
|
|
2139
|
+
position: "relative",
|
|
2140
|
+
width: Ct,
|
|
2141
|
+
height: b
|
|
2142
|
+
},
|
|
2143
|
+
children: [/* @__PURE__ */ s("canvas", {
|
|
2144
|
+
ref: r,
|
|
2145
|
+
role: "img",
|
|
2146
|
+
"aria-label": "Implemented vs unimplemented variations per contractor — split bar",
|
|
2147
|
+
style: {
|
|
2148
|
+
width: Ct,
|
|
2149
|
+
height: b,
|
|
2150
|
+
display: "block"
|
|
2151
|
+
}
|
|
2152
|
+
}), /* @__PURE__ */ s(S, {
|
|
2153
|
+
...w,
|
|
2154
|
+
parentW: Ct,
|
|
2155
|
+
parentH: b
|
|
2156
|
+
})]
|
|
2157
|
+
}), e.length > wt && /* @__PURE__ */ s("div", {
|
|
2158
|
+
style: { marginTop: 8 },
|
|
2159
|
+
children: /* @__PURE__ */ s(ae, {
|
|
2160
|
+
expanded: h,
|
|
2161
|
+
onToggle: () => g((e) => !e)
|
|
2162
|
+
})
|
|
2087
2163
|
})]
|
|
2088
2164
|
});
|
|
2089
2165
|
}
|
|
2090
2166
|
//#endregion
|
|
2091
2167
|
//#region src/components/weeklyFlow/WeeklyFlow.tsx
|
|
2092
|
-
var
|
|
2093
|
-
function
|
|
2168
|
+
var At = 800, jt = 360;
|
|
2169
|
+
function Mt({ contractors: e = [], "data-testid": t }) {
|
|
2094
2170
|
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: f, hitZonesRef: p } = C(r, {
|
|
2095
|
-
width:
|
|
2096
|
-
height:
|
|
2171
|
+
width: At,
|
|
2172
|
+
height: jt
|
|
2097
2173
|
});
|
|
2098
2174
|
return n(() => {
|
|
2099
2175
|
let t = r.current;
|
|
2100
2176
|
if (!t) return;
|
|
2101
|
-
let n = _(t,
|
|
2177
|
+
let n = _(t, At, jt);
|
|
2102
2178
|
o.current = 0;
|
|
2103
|
-
let a = e.reduce((e, t) => e + (t.base ?? 0), 0), s = e.reduce((e, t) => e + (t.variation ?? 0), 0), c = e.reduce((e, t) => e + (t.total ?? 0), 0), f =
|
|
2179
|
+
let a = e.reduce((e, t) => e + (t.base ?? 0), 0), s = e.reduce((e, t) => e + (t.variation ?? 0), 0), c = e.reduce((e, t) => e + (t.total ?? 0), 0), f = jt - 20 - 26, h = f - 6 * (e.length - 1), g = 20, y = e.map((e, t) => {
|
|
2104
2180
|
let n = Math.max(24, (e.total ?? 0) / (c || 1) * h), r = {
|
|
2105
2181
|
x: 100 - 110 / 2,
|
|
2106
2182
|
y: g,
|
|
@@ -2128,16 +2204,16 @@ function bt({ contractors: e = [], "data-testid": t }) {
|
|
|
2128
2204
|
}, k, A = () => {
|
|
2129
2205
|
o.current++;
|
|
2130
2206
|
let t = o.current;
|
|
2131
|
-
n.clearRect(0, 0,
|
|
2207
|
+
n.clearRect(0, 0, At, jt);
|
|
2132
2208
|
let r = E(Math.min(t / 80, 1));
|
|
2133
2209
|
if (M(i.current, l.current), p.current = [], e.forEach((t, o) => {
|
|
2134
2210
|
let c = y[o], l = j(r, o, e.length, E), u = i.current.get(t.id) ?? 0;
|
|
2135
2211
|
if (l < .01) return;
|
|
2136
2212
|
let d = (t.base ?? 0) / (t.total || 1), f = (t.variation ?? 0) / (t.total || 1), p = c.h * d, m = c.h * f, h = c.y + p / 2, g = c.y + p + m / 2, _ = Math.max(2, (t.base ?? 0) / a * x), v = Math.max(2, (t.variation ?? 0) / s * S), b = w.y + e.slice(0, o).reduce((e, t) => e + (t.base ?? 0) / a * x, 0) + _ / 2, C = D.y + e.slice(0, o).reduce((e, t) => e + (t.variation ?? 0) / s * S, 0) + v / 2, T = u * .2 + .18;
|
|
2137
|
-
|
|
2213
|
+
Nt(n, c.x + 110, h, 420 - 110 / 2, b, _ * l, c.color, T), Nt(n, c.x + 110, g, 420 - 110 / 2, C, v * l, c.color, T * .75);
|
|
2138
2214
|
}), r > .3) {
|
|
2139
2215
|
let e = Math.min(1, (r - .3) / .7), t = O.y + a / c * f / 2, i = O.y + f - s / c * f / 2;
|
|
2140
|
-
|
|
2216
|
+
Nt(n, 475, w.cy, 720 - 110 / 2, t, x * e, u.blue, .25 * e), Nt(n, 475, D.cy, 720 - 110 / 2, i, S * e, u.amber, .22 * e);
|
|
2141
2217
|
}
|
|
2142
2218
|
if ([
|
|
2143
2219
|
"Contractors",
|
|
@@ -2149,7 +2225,7 @@ function bt({ contractors: e = [], "data-testid": t }) {
|
|
|
2149
2225
|
420,
|
|
2150
2226
|
720
|
|
2151
2227
|
][t];
|
|
2152
|
-
n.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = m(u.t3, .5), n.textAlign = "center", n.fillText(e, r,
|
|
2228
|
+
n.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = m(u.t3, .5), n.textAlign = "center", n.fillText(e, r, jt - 8);
|
|
2153
2229
|
}), e.forEach((t, a) => {
|
|
2154
2230
|
let o = y[a], s = j(r, a, e.length, E), c = i.current.get(t.id) ?? 0;
|
|
2155
2231
|
T(p.current, t.id, o.x, o.y, 110, o.h, {
|
|
@@ -2173,33 +2249,33 @@ function bt({ contractors: e = [], "data-testid": t }) {
|
|
|
2173
2249
|
"data-testid": t,
|
|
2174
2250
|
style: {
|
|
2175
2251
|
position: "relative",
|
|
2176
|
-
width:
|
|
2177
|
-
height:
|
|
2252
|
+
width: At,
|
|
2253
|
+
height: jt
|
|
2178
2254
|
},
|
|
2179
2255
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2180
2256
|
ref: r,
|
|
2181
2257
|
role: "img",
|
|
2182
2258
|
"aria-label": "Weekly report flow — base value and variations per contractor flowing to total commitment",
|
|
2183
2259
|
style: {
|
|
2184
|
-
width:
|
|
2185
|
-
height:
|
|
2260
|
+
width: At,
|
|
2261
|
+
height: jt,
|
|
2186
2262
|
display: "block"
|
|
2187
2263
|
}
|
|
2188
2264
|
}), /* @__PURE__ */ s(S, {
|
|
2189
2265
|
...f,
|
|
2190
|
-
parentW:
|
|
2191
|
-
parentH:
|
|
2266
|
+
parentW: At,
|
|
2267
|
+
parentH: jt
|
|
2192
2268
|
})]
|
|
2193
2269
|
});
|
|
2194
2270
|
}
|
|
2195
|
-
function
|
|
2271
|
+
function Nt(e, t, n, r, i, a, o, s) {
|
|
2196
2272
|
let c = (t + r) / 2;
|
|
2197
2273
|
e.beginPath(), e.moveTo(t, n - a / 2), e.bezierCurveTo(c, n - a / 2, c, i - a / 2, r, i - a / 2), e.lineTo(r, i + a / 2), e.bezierCurveTo(c, i + a / 2, c, n + a / 2, t, n + a / 2), e.closePath(), e.fillStyle = m(o, s), e.fill();
|
|
2198
2274
|
}
|
|
2199
2275
|
//#endregion
|
|
2200
2276
|
//#region src/components/visualizationRenderer/VisualizationRenderer.tsx
|
|
2201
|
-
function
|
|
2202
|
-
return e.type === "line" ? /* @__PURE__ */ s(
|
|
2277
|
+
function Pt({ config: e, className: t }) {
|
|
2278
|
+
return e.type === "line" ? /* @__PURE__ */ s(Le, {
|
|
2203
2279
|
rows: e.rows,
|
|
2204
2280
|
className: t
|
|
2205
2281
|
}) : e.type === "area" ? /* @__PURE__ */ s(ne, {
|
|
@@ -2208,77 +2284,77 @@ function St({ config: e, className: t }) {
|
|
|
2208
2284
|
}) : e.type === "bar" ? /* @__PURE__ */ s(ie, {
|
|
2209
2285
|
rows: e.rows,
|
|
2210
2286
|
className: t
|
|
2211
|
-
}) : e.type === "pie" ? /* @__PURE__ */ s(
|
|
2287
|
+
}) : e.type === "pie" ? /* @__PURE__ */ s(qe, {
|
|
2212
2288
|
rows: e.rows,
|
|
2213
2289
|
variant: "pie",
|
|
2214
2290
|
className: t
|
|
2215
|
-
}) : e.type === "donut" ? /* @__PURE__ */ s(
|
|
2291
|
+
}) : e.type === "donut" ? /* @__PURE__ */ s(qe, {
|
|
2216
2292
|
rows: e.rows,
|
|
2217
2293
|
variant: "donut",
|
|
2218
2294
|
className: t
|
|
2219
|
-
}) : e.type === "sankey" ? /* @__PURE__ */ s(
|
|
2295
|
+
}) : e.type === "sankey" ? /* @__PURE__ */ s(it, {
|
|
2220
2296
|
rows: e.rows,
|
|
2221
2297
|
className: t
|
|
2222
|
-
}) : e.type === "flow" ? /* @__PURE__ */ s(
|
|
2298
|
+
}) : e.type === "flow" ? /* @__PURE__ */ s(rt, {
|
|
2223
2299
|
selectedEntity: e.selectedEntity,
|
|
2224
2300
|
className: t
|
|
2225
|
-
}) : e.type === "trend" ? /* @__PURE__ */ s(
|
|
2301
|
+
}) : e.type === "trend" ? /* @__PURE__ */ s(St, {
|
|
2226
2302
|
points: e.points,
|
|
2227
2303
|
className: t
|
|
2228
|
-
}) : e.type === "mini-bars" ? /* @__PURE__ */ s(
|
|
2304
|
+
}) : e.type === "mini-bars" ? /* @__PURE__ */ s(Be, {
|
|
2229
2305
|
rows: e.rows,
|
|
2230
2306
|
className: t
|
|
2231
|
-
}) : e.type === "contract-value-orb" ? /* @__PURE__ */ s(
|
|
2307
|
+
}) : e.type === "contract-value-orb" ? /* @__PURE__ */ s(Ae, { data: e.data }) : e.type === "contract-bars" ? /* @__PURE__ */ s(Ce, { contractors: e.contractors }) : e.type === "commitment-race" ? /* @__PURE__ */ s(fe, { contractors: e.contractors }) : e.type === "status-arc" ? /* @__PURE__ */ s(xt, {
|
|
2232
2308
|
segments: e.segments,
|
|
2233
2309
|
title: e.title
|
|
2234
|
-
}) : e.type === "ew-category" ? /* @__PURE__ */ s(
|
|
2310
|
+
}) : e.type === "ew-category" ? /* @__PURE__ */ s(Ie, { categories: e.categories }) : e.type === "contractor-rank" ? /* @__PURE__ */ s(Fe, { contractors: e.contractors }) : e.type === "severity-bands" ? /* @__PURE__ */ s(yt, { severities: e.severities }) : e.type === "nce-tree" ? /* @__PURE__ */ s(Ue, {
|
|
2235
2311
|
total: e.total,
|
|
2236
2312
|
byContractor: e.byContractor
|
|
2237
|
-
}) : e.type === "compensation-gauge" ? /* @__PURE__ */ s(
|
|
2313
|
+
}) : e.type === "compensation-gauge" ? /* @__PURE__ */ s(he, {
|
|
2238
2314
|
pct: e.pct,
|
|
2239
2315
|
confirmed: e.confirmed,
|
|
2240
2316
|
total: e.total
|
|
2241
|
-
}) : e.type === "variation-split" ? /* @__PURE__ */ s(
|
|
2317
|
+
}) : e.type === "variation-split" ? /* @__PURE__ */ s(kt, { contractors: e.contractors }) : e.type === "quotation-balance" ? /* @__PURE__ */ s(st, {
|
|
2242
2318
|
accepted: e.accepted,
|
|
2243
2319
|
submitted: e.submitted
|
|
2244
|
-
}) : e.type === "quotation-trend" ? /* @__PURE__ */ s(
|
|
2320
|
+
}) : e.type === "quotation-trend" ? /* @__PURE__ */ s(lt, { trend: e.trend }) : e.type === "trend-view" ? /* @__PURE__ */ s(gt, { trend: e.trend }) : e.type === "weekly-flow" ? /* @__PURE__ */ s(Mt, { contractors: e.contractors }) : /* @__PURE__ */ s("div", {
|
|
2245
2321
|
className: "viz-empty",
|
|
2246
2322
|
children: "Visualization unavailable"
|
|
2247
2323
|
});
|
|
2248
2324
|
}
|
|
2249
2325
|
//#endregion
|
|
2250
2326
|
//#region src/utils/mounts.tsx
|
|
2251
|
-
var
|
|
2252
|
-
function
|
|
2327
|
+
var Ft = [];
|
|
2328
|
+
function It(e) {
|
|
2253
2329
|
try {
|
|
2254
2330
|
return JSON.parse(decodeURIComponent(e));
|
|
2255
2331
|
} catch {
|
|
2256
2332
|
return null;
|
|
2257
2333
|
}
|
|
2258
2334
|
}
|
|
2259
|
-
function
|
|
2260
|
-
for (;
|
|
2261
|
-
let e =
|
|
2335
|
+
function Lt() {
|
|
2336
|
+
for (; Ft.length;) {
|
|
2337
|
+
let e = Ft.pop();
|
|
2262
2338
|
e && e.unmount();
|
|
2263
2339
|
}
|
|
2264
2340
|
}
|
|
2265
|
-
function
|
|
2266
|
-
|
|
2341
|
+
function Rt() {
|
|
2342
|
+
Lt(), document.querySelectorAll("[data-d3-viz]").forEach((t) => {
|
|
2267
2343
|
let n = t.dataset.d3Viz;
|
|
2268
2344
|
if (!n) return;
|
|
2269
|
-
let r =
|
|
2345
|
+
let r = It(n);
|
|
2270
2346
|
if (!r) return;
|
|
2271
2347
|
let i = e(t);
|
|
2272
|
-
|
|
2348
|
+
Ft.push(i), i.render(/* @__PURE__ */ s(Pt, { config: r }));
|
|
2273
2349
|
});
|
|
2274
2350
|
}
|
|
2275
|
-
function
|
|
2351
|
+
function zt(e) {
|
|
2276
2352
|
return encodeURIComponent(JSON.stringify(e));
|
|
2277
2353
|
}
|
|
2278
2354
|
//#endregion
|
|
2279
2355
|
//#region src/components/donutChart/DonutChart.tsx
|
|
2280
|
-
function
|
|
2281
|
-
return /* @__PURE__ */ s(
|
|
2356
|
+
function Bt({ rows: e = [], className: t, colors: n }) {
|
|
2357
|
+
return /* @__PURE__ */ s(qe, {
|
|
2282
2358
|
rows: e,
|
|
2283
2359
|
variant: "donut",
|
|
2284
2360
|
className: t,
|
|
@@ -2297,7 +2373,7 @@ var X = {
|
|
|
2297
2373
|
red: u.red,
|
|
2298
2374
|
amber: u.amber,
|
|
2299
2375
|
green: u.green
|
|
2300
|
-
}, Z = "'JetBrains Mono', monospace", Q = "'Satoshi Variable', 'DM Sans', sans-serif",
|
|
2376
|
+
}, Z = "'JetBrains Mono', monospace", Q = "'Satoshi Variable', 'DM Sans', sans-serif", Vt = {
|
|
2301
2377
|
color: "#F7F7F7",
|
|
2302
2378
|
fontFamily: Q,
|
|
2303
2379
|
fontSize: 24,
|
|
@@ -2310,7 +2386,7 @@ var X = {
|
|
|
2310
2386
|
fontWeight: 400,
|
|
2311
2387
|
lineHeight: "20px"
|
|
2312
2388
|
};
|
|
2313
|
-
function
|
|
2389
|
+
function Ht({ chips: e = [] }) {
|
|
2314
2390
|
return /* @__PURE__ */ s("div", {
|
|
2315
2391
|
style: {
|
|
2316
2392
|
display: "flex",
|
|
@@ -2319,18 +2395,20 @@ function At({ chips: e = [] }) {
|
|
|
2319
2395
|
},
|
|
2320
2396
|
children: e.map((e, t) => /* @__PURE__ */ c("div", {
|
|
2321
2397
|
style: {
|
|
2322
|
-
|
|
2398
|
+
width: 260,
|
|
2399
|
+
height: 120,
|
|
2323
2400
|
display: "flex",
|
|
2324
2401
|
alignItems: "baseline",
|
|
2325
2402
|
gap: 8,
|
|
2326
2403
|
padding: "8px 12px",
|
|
2327
2404
|
background: X.bg,
|
|
2328
2405
|
border: `1px solid ${X.border}`,
|
|
2329
|
-
borderRadius: 5
|
|
2406
|
+
borderRadius: 5,
|
|
2407
|
+
boxSizing: "border-box"
|
|
2330
2408
|
},
|
|
2331
2409
|
children: [/* @__PURE__ */ s("span", {
|
|
2332
2410
|
style: {
|
|
2333
|
-
...
|
|
2411
|
+
...Vt,
|
|
2334
2412
|
color: e.color ?? X.t1
|
|
2335
2413
|
},
|
|
2336
2414
|
children: e.value
|
|
@@ -2344,7 +2422,7 @@ function At({ chips: e = [] }) {
|
|
|
2344
2422
|
}, t))
|
|
2345
2423
|
});
|
|
2346
2424
|
}
|
|
2347
|
-
function
|
|
2425
|
+
function Ut({ items: e = [] }) {
|
|
2348
2426
|
return /* @__PURE__ */ s("div", {
|
|
2349
2427
|
style: {
|
|
2350
2428
|
display: "flex",
|
|
@@ -2352,15 +2430,17 @@ function jt({ items: e = [] }) {
|
|
|
2352
2430
|
},
|
|
2353
2431
|
children: e.map((e, t) => /* @__PURE__ */ c("div", {
|
|
2354
2432
|
style: {
|
|
2355
|
-
|
|
2433
|
+
width: 260,
|
|
2434
|
+
height: 120,
|
|
2356
2435
|
padding: "12px 16px",
|
|
2357
2436
|
border: `1px solid ${X.border}`,
|
|
2358
2437
|
background: X.bg,
|
|
2359
|
-
textAlign: "left"
|
|
2438
|
+
textAlign: "left",
|
|
2439
|
+
boxSizing: "border-box"
|
|
2360
2440
|
},
|
|
2361
2441
|
children: [/* @__PURE__ */ s("div", {
|
|
2362
2442
|
style: {
|
|
2363
|
-
...
|
|
2443
|
+
...Vt,
|
|
2364
2444
|
color: e.color ?? X.t1
|
|
2365
2445
|
},
|
|
2366
2446
|
children: e.value
|
|
@@ -2374,7 +2454,7 @@ function jt({ items: e = [] }) {
|
|
|
2374
2454
|
}, t))
|
|
2375
2455
|
});
|
|
2376
2456
|
}
|
|
2377
|
-
function
|
|
2457
|
+
function Wt({ items: e = [] }) {
|
|
2378
2458
|
return /* @__PURE__ */ s("div", {
|
|
2379
2459
|
style: {
|
|
2380
2460
|
display: "flex",
|
|
@@ -2408,7 +2488,7 @@ function Mt({ items: e = [] }) {
|
|
|
2408
2488
|
}),
|
|
2409
2489
|
/* @__PURE__ */ s("span", {
|
|
2410
2490
|
style: {
|
|
2411
|
-
...
|
|
2491
|
+
...Vt,
|
|
2412
2492
|
color: e.color ?? X.t1,
|
|
2413
2493
|
minWidth: 70,
|
|
2414
2494
|
flexShrink: 0
|
|
@@ -2426,7 +2506,7 @@ function Mt({ items: e = [] }) {
|
|
|
2426
2506
|
}, t))
|
|
2427
2507
|
});
|
|
2428
2508
|
}
|
|
2429
|
-
function
|
|
2509
|
+
function Gt({ items: e = [] }) {
|
|
2430
2510
|
return /* @__PURE__ */ s("div", {
|
|
2431
2511
|
style: {
|
|
2432
2512
|
display: "flex",
|
|
@@ -2434,14 +2514,16 @@ function Nt({ items: e = [] }) {
|
|
|
2434
2514
|
},
|
|
2435
2515
|
children: e.map((e, t) => /* @__PURE__ */ c("div", {
|
|
2436
2516
|
style: {
|
|
2437
|
-
|
|
2517
|
+
width: 260,
|
|
2518
|
+
height: 120,
|
|
2438
2519
|
padding: "14px 16px",
|
|
2439
2520
|
background: X.bg,
|
|
2440
|
-
border: `1px solid ${e.color ? e.color + "30" : X.border}
|
|
2521
|
+
border: `1px solid ${e.color ? e.color + "30" : X.border}`,
|
|
2522
|
+
boxSizing: "border-box"
|
|
2441
2523
|
},
|
|
2442
2524
|
children: [/* @__PURE__ */ s("div", {
|
|
2443
2525
|
style: {
|
|
2444
|
-
...
|
|
2526
|
+
...Vt,
|
|
2445
2527
|
color: e.color ?? X.t1
|
|
2446
2528
|
},
|
|
2447
2529
|
children: e.value
|
|
@@ -2455,12 +2537,12 @@ function Nt({ items: e = [] }) {
|
|
|
2455
2537
|
}, t))
|
|
2456
2538
|
});
|
|
2457
2539
|
}
|
|
2458
|
-
var
|
|
2540
|
+
var Kt = {
|
|
2459
2541
|
red: X.red,
|
|
2460
2542
|
amber: X.amber,
|
|
2461
2543
|
green: X.green
|
|
2462
2544
|
};
|
|
2463
|
-
function
|
|
2545
|
+
function qt({ items: e = [] }) {
|
|
2464
2546
|
return /* @__PURE__ */ s("div", {
|
|
2465
2547
|
style: {
|
|
2466
2548
|
display: "flex",
|
|
@@ -2468,7 +2550,7 @@ function Ft({ items: e = [] }) {
|
|
|
2468
2550
|
gap: 5
|
|
2469
2551
|
},
|
|
2470
2552
|
children: e.map((e, t) => {
|
|
2471
|
-
let n =
|
|
2553
|
+
let n = Kt[e.severity];
|
|
2472
2554
|
return /* @__PURE__ */ c("div", {
|
|
2473
2555
|
style: {
|
|
2474
2556
|
display: "flex",
|
|
@@ -2493,7 +2575,7 @@ function Ft({ items: e = [] }) {
|
|
|
2493
2575
|
})
|
|
2494
2576
|
});
|
|
2495
2577
|
}
|
|
2496
|
-
function
|
|
2578
|
+
function Jt({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
2497
2579
|
let a = t - e;
|
|
2498
2580
|
return /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("div", {
|
|
2499
2581
|
style: {
|
|
@@ -2603,9 +2685,9 @@ function It({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
|
2603
2685
|
}, r);
|
|
2604
2686
|
})
|
|
2605
2687
|
]
|
|
2606
|
-
}), i && i.length > 0 && /* @__PURE__ */ s(
|
|
2688
|
+
}), i && i.length > 0 && /* @__PURE__ */ s(Ht, { chips: i })] });
|
|
2607
2689
|
}
|
|
2608
|
-
function
|
|
2690
|
+
function Yt({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i, rightLabel: a, rightValue: o, rightColor: l, chips: d }) {
|
|
2609
2691
|
let f = r ?? u.blue, p = l ?? u.cyan;
|
|
2610
2692
|
return /* @__PURE__ */ c("div", { children: [
|
|
2611
2693
|
/* @__PURE__ */ c("div", {
|
|
@@ -2699,10 +2781,10 @@ function Lt({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
2699
2781
|
})
|
|
2700
2782
|
})]
|
|
2701
2783
|
}),
|
|
2702
|
-
d && d.length > 0 && /* @__PURE__ */ s(
|
|
2784
|
+
d && d.length > 0 && /* @__PURE__ */ s(Ht, { chips: d })
|
|
2703
2785
|
] });
|
|
2704
2786
|
}
|
|
2705
|
-
function
|
|
2787
|
+
function Xt({ pct: e, label: t, color: n, chips: r }) {
|
|
2706
2788
|
let i = n ?? u.blue, a = 2 * Math.PI * 30, o = a * (1 - e / 100);
|
|
2707
2789
|
return /* @__PURE__ */ c("div", {
|
|
2708
2790
|
style: {
|
|
@@ -2783,7 +2865,7 @@ function Rt({ pct: e, label: t, color: n, chips: r }) {
|
|
|
2783
2865
|
},
|
|
2784
2866
|
children: [/* @__PURE__ */ s("span", {
|
|
2785
2867
|
style: {
|
|
2786
|
-
...
|
|
2868
|
+
...Vt,
|
|
2787
2869
|
color: e.color ?? X.t1
|
|
2788
2870
|
},
|
|
2789
2871
|
children: e.value
|
|
@@ -2796,16 +2878,16 @@ function Rt({ pct: e, label: t, color: n, chips: r }) {
|
|
|
2796
2878
|
})]
|
|
2797
2879
|
});
|
|
2798
2880
|
}
|
|
2799
|
-
var
|
|
2881
|
+
var Zt = {
|
|
2800
2882
|
green: "#34D39918",
|
|
2801
2883
|
amber: "#FBBF2418",
|
|
2802
2884
|
red: "#F0606018"
|
|
2803
|
-
},
|
|
2885
|
+
}, Qt = {
|
|
2804
2886
|
green: "#34D399",
|
|
2805
2887
|
amber: "#FBBF24",
|
|
2806
2888
|
red: "#F06060"
|
|
2807
2889
|
};
|
|
2808
|
-
function
|
|
2890
|
+
function $t({ items: e = [] }) {
|
|
2809
2891
|
return /* @__PURE__ */ s("div", {
|
|
2810
2892
|
style: {
|
|
2811
2893
|
display: "flex",
|
|
@@ -2819,9 +2901,7 @@ function Vt({ items: e = [] }) {
|
|
|
2819
2901
|
gap: 10,
|
|
2820
2902
|
padding: "8px 12px",
|
|
2821
2903
|
background: X.bg,
|
|
2822
|
-
border: `1px solid ${X.border}
|
|
2823
|
-
borderLeft: `3px solid ${e.color ?? X.t2}`,
|
|
2824
|
-
borderRadius: 6
|
|
2904
|
+
border: `1px solid ${X.border}`
|
|
2825
2905
|
},
|
|
2826
2906
|
children: [
|
|
2827
2907
|
/* @__PURE__ */ s("span", {
|
|
@@ -2871,8 +2951,8 @@ function Vt({ items: e = [] }) {
|
|
|
2871
2951
|
style: {
|
|
2872
2952
|
fontSize: 10,
|
|
2873
2953
|
fontWeight: 600,
|
|
2874
|
-
color:
|
|
2875
|
-
background:
|
|
2954
|
+
color: Qt[e.badgeSeverity],
|
|
2955
|
+
background: Zt[e.badgeSeverity],
|
|
2876
2956
|
padding: "2px 7px",
|
|
2877
2957
|
borderRadius: 4,
|
|
2878
2958
|
fontFamily: Q,
|
|
@@ -2895,12 +2975,12 @@ function Vt({ items: e = [] }) {
|
|
|
2895
2975
|
}, t))
|
|
2896
2976
|
});
|
|
2897
2977
|
}
|
|
2898
|
-
var
|
|
2978
|
+
var en = {
|
|
2899
2979
|
red: X.red,
|
|
2900
2980
|
amber: X.amber,
|
|
2901
2981
|
green: X.green
|
|
2902
2982
|
};
|
|
2903
|
-
function
|
|
2983
|
+
function tn({ items: e = [] }) {
|
|
2904
2984
|
return /* @__PURE__ */ s("div", {
|
|
2905
2985
|
style: {
|
|
2906
2986
|
display: "flex",
|
|
@@ -2908,7 +2988,7 @@ function Ut({ items: e = [] }) {
|
|
|
2908
2988
|
gap: 5
|
|
2909
2989
|
},
|
|
2910
2990
|
children: e.map((e, t) => {
|
|
2911
|
-
let n =
|
|
2991
|
+
let n = en[e.severity];
|
|
2912
2992
|
return /* @__PURE__ */ c("div", {
|
|
2913
2993
|
style: {
|
|
2914
2994
|
display: "flex",
|
|
@@ -2962,7 +3042,7 @@ function Ut({ items: e = [] }) {
|
|
|
2962
3042
|
})
|
|
2963
3043
|
});
|
|
2964
3044
|
}
|
|
2965
|
-
function
|
|
3045
|
+
function nn({ columns: e = [], rows: t = [] }) {
|
|
2966
3046
|
return /* @__PURE__ */ c("div", {
|
|
2967
3047
|
style: {
|
|
2968
3048
|
display: "flex",
|
|
@@ -2982,7 +3062,7 @@ function Wt({ columns: e = [], rows: t = [] }) {
|
|
|
2982
3062
|
flex: 1,
|
|
2983
3063
|
fontSize: 9,
|
|
2984
3064
|
fontWeight: 600,
|
|
2985
|
-
color: X.
|
|
3065
|
+
color: X.t2,
|
|
2986
3066
|
fontFamily: Q,
|
|
2987
3067
|
textTransform: "uppercase",
|
|
2988
3068
|
letterSpacing: .6
|
|
@@ -2996,15 +3076,13 @@ function Wt({ columns: e = [], rows: t = [] }) {
|
|
|
2996
3076
|
gap: 10,
|
|
2997
3077
|
padding: "8px 12px",
|
|
2998
3078
|
background: X.bg,
|
|
2999
|
-
border: `1px solid ${X.border}
|
|
3000
|
-
borderLeft: `3px solid ${e.color ?? X.t4}`,
|
|
3001
|
-
borderRadius: 6
|
|
3079
|
+
border: `1px solid ${X.border}`
|
|
3002
3080
|
},
|
|
3003
3081
|
children: [/* @__PURE__ */ s("span", {
|
|
3004
3082
|
style: {
|
|
3005
3083
|
fontSize: 11,
|
|
3006
3084
|
fontWeight: 600,
|
|
3007
|
-
color:
|
|
3085
|
+
color: X.t2,
|
|
3008
3086
|
background: (e.color ?? X.t4) + "1A",
|
|
3009
3087
|
padding: "2px 8px",
|
|
3010
3088
|
borderRadius: 4,
|
|
@@ -3027,10 +3105,9 @@ function Wt({ columns: e = [], rows: t = [] }) {
|
|
|
3027
3105
|
}, t))]
|
|
3028
3106
|
});
|
|
3029
3107
|
}
|
|
3030
|
-
function
|
|
3108
|
+
function rn({ text: e }) {
|
|
3031
3109
|
return /* @__PURE__ */ c("div", {
|
|
3032
3110
|
style: {
|
|
3033
|
-
marginTop: 10,
|
|
3034
3111
|
padding: "8px 12px",
|
|
3035
3112
|
border: `1px solid ${u.bd}`,
|
|
3036
3113
|
borderLeft: "4px solid #FFAE43",
|
|
@@ -3053,22 +3130,22 @@ function Gt({ text: e }) {
|
|
|
3053
3130
|
})]
|
|
3054
3131
|
});
|
|
3055
3132
|
}
|
|
3056
|
-
function
|
|
3133
|
+
function an({ block: e }) {
|
|
3057
3134
|
if (!e) return null;
|
|
3058
3135
|
let t = (() => {
|
|
3059
3136
|
switch (e.type) {
|
|
3060
|
-
case "stats": return /* @__PURE__ */ s(
|
|
3061
|
-
case "ranked": return /* @__PURE__ */ s(
|
|
3062
|
-
case "chips": return /* @__PURE__ */ s(
|
|
3063
|
-
case "badges": return /* @__PURE__ */ s(
|
|
3064
|
-
case "dot-strip": return /* @__PURE__ */ s(
|
|
3137
|
+
case "stats": return /* @__PURE__ */ s(Ut, { items: e.items });
|
|
3138
|
+
case "ranked": return /* @__PURE__ */ s(Wt, { items: e.items });
|
|
3139
|
+
case "chips": return /* @__PURE__ */ s(Gt, { items: e.items });
|
|
3140
|
+
case "badges": return /* @__PURE__ */ s(qt, { items: e.items });
|
|
3141
|
+
case "dot-strip": return /* @__PURE__ */ s(Jt, {
|
|
3065
3142
|
min: e.min,
|
|
3066
3143
|
max: e.max,
|
|
3067
3144
|
unit: e.unit,
|
|
3068
3145
|
dots: e.dots,
|
|
3069
3146
|
chips: e.chips
|
|
3070
3147
|
});
|
|
3071
|
-
case "proportion": return /* @__PURE__ */ s(
|
|
3148
|
+
case "proportion": return /* @__PURE__ */ s(Yt, {
|
|
3072
3149
|
leftPct: e.leftPct,
|
|
3073
3150
|
leftLabel: e.leftLabel,
|
|
3074
3151
|
leftValue: e.leftValue,
|
|
@@ -3079,22 +3156,29 @@ function Kt({ block: e }) {
|
|
|
3079
3156
|
rightColor: e.rightColor,
|
|
3080
3157
|
chips: e.chips
|
|
3081
3158
|
});
|
|
3082
|
-
case "ring": return /* @__PURE__ */ s(
|
|
3159
|
+
case "ring": return /* @__PURE__ */ s(Xt, {
|
|
3083
3160
|
pct: e.pct,
|
|
3084
3161
|
label: e.label,
|
|
3085
3162
|
color: e.color,
|
|
3086
3163
|
chips: e.chips
|
|
3087
3164
|
});
|
|
3088
|
-
case "scorecard-rows": return /* @__PURE__ */ s(
|
|
3089
|
-
case "flags-list": return /* @__PURE__ */ s(
|
|
3090
|
-
case "comparison-rows": return /* @__PURE__ */ s(
|
|
3165
|
+
case "scorecard-rows": return /* @__PURE__ */ s($t, { items: e.items });
|
|
3166
|
+
case "flags-list": return /* @__PURE__ */ s(tn, { items: e.items });
|
|
3167
|
+
case "comparison-rows": return /* @__PURE__ */ s(nn, {
|
|
3091
3168
|
columns: e.columns,
|
|
3092
3169
|
rows: e.rows
|
|
3093
3170
|
});
|
|
3094
3171
|
default: return null;
|
|
3095
3172
|
}
|
|
3096
3173
|
})();
|
|
3097
|
-
return e.takeaway ? /* @__PURE__ */ c("div", {
|
|
3174
|
+
return e.takeaway ? /* @__PURE__ */ c("div", {
|
|
3175
|
+
style: {
|
|
3176
|
+
display: "flex",
|
|
3177
|
+
flexDirection: "column",
|
|
3178
|
+
gap: 24
|
|
3179
|
+
},
|
|
3180
|
+
children: [t, /* @__PURE__ */ s(rn, { text: e.takeaway })]
|
|
3181
|
+
}) : t;
|
|
3098
3182
|
}
|
|
3099
3183
|
//#endregion
|
|
3100
|
-
export { ne as AreaChart, ie as BarChart, l as ChartFrame,
|
|
3184
|
+
export { ne as AreaChart, ie as BarChart, l as ChartFrame, Bt as DonutChart, an as KeyHighlights, Le as LineChart, Be as MiniBars, qe as PieChart, rt as ProcessSankey, it as RankingSankey, Ye as SankeySvg, te as SeriesChart, gt as Trend, St as TrendChart, Pt as VisualizationRenderer, Lt as cleanupVisualizationMounts, Rt as hydrateVisualizationMounts, zt as serializeVisualizationConfig };
|