@divami-artefacts/ai-design-system 1.0.21 → 1.0.22
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/radialFanTreeChart/RadialFanTreeChart.d.ts +1 -1
- package/dist/components/radialFanTreeChart/types.d.ts +1 -0
- package/dist/components/rankedCardLeaderboard/RankedCardLeaderboard.d.ts +1 -1
- package/dist/components/weeklyFlow/WeeklyFlow.d.ts +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +396 -398
- package/dist/types/index.d.ts +6 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -126,33 +126,33 @@ function C({ visible: e, x: t, y: n, content: i, parentW: o }) {
|
|
|
126
126
|
children: [
|
|
127
127
|
f && /* @__PURE__ */ s("div", {
|
|
128
128
|
style: {
|
|
129
|
-
fontSize:
|
|
129
|
+
fontSize: 12,
|
|
130
130
|
fontWeight: 400,
|
|
131
131
|
color: u.t2,
|
|
132
132
|
marginBottom: 3,
|
|
133
133
|
whiteSpace: "nowrap",
|
|
134
|
-
lineHeight: "
|
|
134
|
+
lineHeight: "18px"
|
|
135
135
|
},
|
|
136
136
|
children: f
|
|
137
137
|
}),
|
|
138
138
|
/* @__PURE__ */ s("div", {
|
|
139
139
|
style: {
|
|
140
|
-
fontSize:
|
|
140
|
+
fontSize: 14,
|
|
141
141
|
fontWeight: 500,
|
|
142
142
|
color: u.t1,
|
|
143
143
|
whiteSpace: "nowrap",
|
|
144
|
-
lineHeight: "
|
|
144
|
+
lineHeight: "20px"
|
|
145
145
|
},
|
|
146
146
|
children: p
|
|
147
147
|
}),
|
|
148
148
|
m && /* @__PURE__ */ s("div", {
|
|
149
149
|
style: {
|
|
150
|
-
fontSize:
|
|
150
|
+
fontSize: 12,
|
|
151
151
|
fontWeight: 400,
|
|
152
152
|
color: "var(--tooltip-accent)",
|
|
153
153
|
marginTop: 3,
|
|
154
154
|
whiteSpace: "nowrap",
|
|
155
|
-
lineHeight: "
|
|
155
|
+
lineHeight: "18px"
|
|
156
156
|
},
|
|
157
157
|
children: m
|
|
158
158
|
})
|
|
@@ -504,11 +504,7 @@ var L = 680, R = 42, oe = 10, se = 24, ce = 24, le = 8, ue = [
|
|
|
504
504
|
u.amber,
|
|
505
505
|
u.red
|
|
506
506
|
];
|
|
507
|
-
function de(e) {
|
|
508
|
-
let t = Math.abs(e), n = e < 0 ? "-" : "";
|
|
509
|
-
return t >= 1e6 ? `${n}£${(t / 1e6).toFixed(1)}M` : t >= 1e3 ? `${n}£${(t / 1e3).toFixed(1)}K` : `${n}£${t.toFixed(0)}`;
|
|
510
|
-
}
|
|
511
|
-
function fe({ items: e = [], "data-testid": t }) {
|
|
507
|
+
function de({ items: e = [], "data-testid": t }) {
|
|
512
508
|
let r = a(null), l = a(0), d = a(/* @__PURE__ */ new Map()), [m, g] = o(!1), _ = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), S = i(() => [..._].sort((e, t) => (t.percentage ?? 0) - (e.percentage ?? 0)), [_]), E = i(() => m ? S : S.slice(0, le), [S, m]), O = E.length, k = se + ce + O * R + Math.max(0, O - 1) * oe, { hoveredRef: A, tooltip: j, hitZonesRef: M } = w(r, {
|
|
513
509
|
width: L,
|
|
514
510
|
height: k
|
|
@@ -536,7 +532,7 @@ function fe({ items: e = [], "data-testid": t }) {
|
|
|
536
532
|
let m = {
|
|
537
533
|
label: r.name,
|
|
538
534
|
value: `${r.percentage ?? 0}% commitment`,
|
|
539
|
-
sublabel: `Base: ${
|
|
535
|
+
sublabel: `Base: ${r.baseLabel ?? String(r.base ?? 0)} · Variations: ${r.variationLabel ?? String(r.variation ?? 0)}`,
|
|
540
536
|
color: o
|
|
541
537
|
};
|
|
542
538
|
T(M.current, r.id, u, c + R / 2, 14, m), t.font = p.font, t.fillStyle = h(o, .9 + s * .1), t.textAlign = "left", t.textBaseline = "middle", t.fillText(`${r.percentage ?? 0}%`, u + 10, c + R / 2), t.font = `${s > 0 ? "bold " : ""}` + f.font, t.fillStyle = s > 0 ? o : f.color, t.textAlign = "right", t.fillText(r.abbreviation ?? r.name.slice(0, 6), n - 8, c + R / 2);
|
|
@@ -578,18 +574,18 @@ function fe({ items: e = [], "data-testid": t }) {
|
|
|
578
574
|
}
|
|
579
575
|
//#endregion
|
|
580
576
|
//#region src/components/semiCircularGaugeChart/SemiCircularGaugeChart.tsx
|
|
581
|
-
var
|
|
582
|
-
function
|
|
577
|
+
var fe = 480, pe = 340;
|
|
578
|
+
function me({ value: e, confirmed: t, total: r, "data-testid": i }) {
|
|
583
579
|
let o = a(null), c = a(0);
|
|
584
580
|
return n(() => {
|
|
585
581
|
let n = o.current;
|
|
586
582
|
if (!n) return;
|
|
587
|
-
let i = v(n,
|
|
583
|
+
let i = v(n, fe, pe);
|
|
588
584
|
c.current = 0;
|
|
589
|
-
let a =
|
|
585
|
+
let a = fe / 2, s = Math.PI, l = 2 * Math.PI, d = Math.PI, p, g = () => {
|
|
590
586
|
c.current++;
|
|
591
587
|
let n = c.current;
|
|
592
|
-
i.clearRect(0, 0,
|
|
588
|
+
i.clearRect(0, 0, fe, pe), i.letterSpacing = f.letterSpacing;
|
|
593
589
|
let o = D(Math.min(n / 80, 1)), _ = A(Math.min(n / 72, 1));
|
|
594
590
|
i.beginPath(), i.arc(a, 220, 120, s, l), i.strokeStyle = h(u.bd, .35), i.lineWidth = 46, i.stroke(), [
|
|
595
591
|
{
|
|
@@ -649,16 +645,16 @@ function he({ value: e, confirmed: t, total: r, "data-testid": i }) {
|
|
|
649
645
|
"data-testid": i,
|
|
650
646
|
style: {
|
|
651
647
|
position: "relative",
|
|
652
|
-
width:
|
|
653
|
-
height:
|
|
648
|
+
width: fe,
|
|
649
|
+
height: pe
|
|
654
650
|
},
|
|
655
651
|
children: /* @__PURE__ */ s("canvas", {
|
|
656
652
|
ref: o,
|
|
657
653
|
role: "img",
|
|
658
654
|
"aria-label": `Compensation event gauge — ${e}% of NCEs confirmed as compensation events`,
|
|
659
655
|
style: {
|
|
660
|
-
width:
|
|
661
|
-
height:
|
|
656
|
+
width: fe,
|
|
657
|
+
height: pe,
|
|
662
658
|
display: "block"
|
|
663
659
|
}
|
|
664
660
|
})
|
|
@@ -666,7 +662,7 @@ function he({ value: e, confirmed: t, total: r, "data-testid": i }) {
|
|
|
666
662
|
}
|
|
667
663
|
//#endregion
|
|
668
664
|
//#region src/canvas/useCanvasLoop.ts
|
|
669
|
-
function
|
|
665
|
+
function he(e, t, r, i, o = !0, s = {}) {
|
|
670
666
|
let c = a(0), { easing: l = D, durationFrames: u = 48 } = s;
|
|
671
667
|
n(() => {
|
|
672
668
|
let n = e.current;
|
|
@@ -698,40 +694,40 @@ function ge(e, t, r, i, o = !0, s = {}) {
|
|
|
698
694
|
}
|
|
699
695
|
//#endregion
|
|
700
696
|
//#region src/components/multiMetricConstellationChart/MultiMetricConstellationChart.tsx
|
|
701
|
-
var z = 780,
|
|
697
|
+
var z = 780, ge = 234, _e = 130, ve = 52, ye = [
|
|
702
698
|
u.blue,
|
|
703
699
|
u.amber,
|
|
704
700
|
u.purple,
|
|
705
701
|
u.green
|
|
706
|
-
],
|
|
702
|
+
], be = [
|
|
707
703
|
"Base Value",
|
|
708
704
|
"Variations",
|
|
709
705
|
"Commitment"
|
|
710
|
-
],
|
|
706
|
+
], xe = [
|
|
711
707
|
"Base",
|
|
712
708
|
"Var",
|
|
713
709
|
"Commit"
|
|
714
710
|
];
|
|
715
|
-
function
|
|
711
|
+
function Se({ items: e = [], "data-testid": t }) {
|
|
716
712
|
let n = a(null), r = a(/* @__PURE__ */ new Map()), { hoveredRef: o, tooltip: l, hitZonesRef: d } = w(n, {
|
|
717
713
|
width: z,
|
|
718
|
-
height:
|
|
714
|
+
height: ge
|
|
719
715
|
}), p = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), g = i(() => {
|
|
720
716
|
let e = Math.max(...p.map((e) => e.base ?? 0)), t = Math.max(...p.map((e) => e.variation ?? 0));
|
|
721
717
|
return p.map((n, r) => {
|
|
722
|
-
let i = z * (.12 + r * .19), a =
|
|
718
|
+
let i = z * (.12 + r * .19), a = _e, o = Math.min(z * .075, ve), s = ye[r % ye.length], c = [
|
|
723
719
|
(n.base ?? 0) / (e || 1) * 100,
|
|
724
720
|
(n.variation ?? 0) / (t || 1) * 100,
|
|
725
721
|
n.percentage ?? 0
|
|
726
722
|
], l = [
|
|
727
|
-
|
|
728
|
-
|
|
723
|
+
n.baseLabel ?? String(n.base ?? 0),
|
|
724
|
+
n.variationLabel ?? String(n.variation ?? 0),
|
|
729
725
|
`${n.percentage ?? 0}%`
|
|
730
726
|
], u = c.map((e, t) => {
|
|
731
|
-
let n = -Math.PI / 2 + t /
|
|
727
|
+
let n = -Math.PI / 2 + t / be.length * Math.PI * 2, r = e / 100, s = o * Math.max(.08, r);
|
|
732
728
|
return {
|
|
733
|
-
name:
|
|
734
|
-
short:
|
|
729
|
+
name: be[t],
|
|
730
|
+
short: xe[t],
|
|
735
731
|
label: l[t],
|
|
736
732
|
val: Math.round(e),
|
|
737
733
|
x: i + Math.cos(n) * s,
|
|
@@ -751,8 +747,8 @@ function Ce({ items: e = [], "data-testid": t }) {
|
|
|
751
747
|
};
|
|
752
748
|
});
|
|
753
749
|
}, [p]);
|
|
754
|
-
return
|
|
755
|
-
N(r.current, o.current), d.current = [], b(e, z,
|
|
750
|
+
return he(n, z, ge, (e, t, n) => {
|
|
751
|
+
N(r.current, o.current), d.current = [], b(e, z, ge, n, 30), g.forEach((t, i) => {
|
|
756
752
|
let a = t.color, o = `constellation-${i}`, s = r.current.get(o) ?? 0;
|
|
757
753
|
e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 5, 0, Math.PI * 2), e.strokeStyle = h(u.bd, .08 + .08 * s), e.lineWidth = .5, e.stroke(), e.beginPath(), t.stars.forEach((t, n) => {
|
|
758
754
|
n === 0 ? e.moveTo(t.x, t.y) : e.lineTo(t.x, t.y);
|
|
@@ -768,21 +764,21 @@ function Ce({ items: e = [], "data-testid": t }) {
|
|
|
768
764
|
});
|
|
769
765
|
}), s > 0 && y(e, t.cx, t.cy, 16 * s, a, .15 * s), e.beginPath(), e.arc(t.cx, t.cy, t.baseR + 12, 0, Math.PI * 2), e.strokeStyle = h(a, .1 + j(n, .03, 5e-4) * .05), e.lineWidth = 1, e.stroke(), e.font = f.font, e.textAlign = "center", e.textBaseline = "alphabetic", e.fillStyle = s > 0 ? t.color : f.color, e.fillText(t.abbreviation ?? t.name.slice(0, 6), t.cx, t.cy + t.baseR + 26), T(d.current, o, t.cx, t.cy, t.baseR + 5, {
|
|
770
766
|
label: t.name,
|
|
771
|
-
value:
|
|
767
|
+
value: `${t.totalLabel ?? String(t.total ?? 0)} total`,
|
|
772
768
|
sublabel: `${t.percentage ?? 0}% committed · scatter ${t.scatter.toFixed(1)}`,
|
|
773
769
|
color: a
|
|
774
770
|
});
|
|
775
|
-
}), e.font = m.font, e.textAlign = "center", e.textBaseline = "middle", e.fillStyle = m.color, e.fillText("▲ top = Base value · ▼▸ lower-right = Variations · ◂▼ lower-left = Commitment % · hover stars for details", z / 2,
|
|
771
|
+
}), e.font = m.font, e.textAlign = "center", e.textBaseline = "middle", e.fillStyle = m.color, e.fillText("▲ top = Base value · ▼▸ lower-right = Variations · ◂▼ lower-left = Commitment % · hover stars for details", z / 2, ge - 14), x(e, z, ge, n, .012);
|
|
776
772
|
}, !0), g.length === 0 ? /* @__PURE__ */ s(I, {
|
|
777
773
|
width: z,
|
|
778
|
-
height:
|
|
774
|
+
height: ge,
|
|
779
775
|
"data-testid": t
|
|
780
776
|
}) : /* @__PURE__ */ c("div", {
|
|
781
777
|
"data-testid": t,
|
|
782
778
|
style: {
|
|
783
779
|
position: "relative",
|
|
784
780
|
width: z,
|
|
785
|
-
height:
|
|
781
|
+
height: ge
|
|
786
782
|
},
|
|
787
783
|
children: [/* @__PURE__ */ s("canvas", {
|
|
788
784
|
ref: n,
|
|
@@ -790,19 +786,19 @@ function Ce({ items: e = [], "data-testid": t }) {
|
|
|
790
786
|
"aria-label": "Contract value breakdown per contractor — multi-KPI constellation chart",
|
|
791
787
|
style: {
|
|
792
788
|
width: z,
|
|
793
|
-
height:
|
|
789
|
+
height: ge,
|
|
794
790
|
display: "block"
|
|
795
791
|
}
|
|
796
792
|
}), /* @__PURE__ */ s(C, {
|
|
797
793
|
...l,
|
|
798
794
|
parentW: z,
|
|
799
|
-
parentH:
|
|
795
|
+
parentH: ge
|
|
800
796
|
})]
|
|
801
797
|
});
|
|
802
798
|
}
|
|
803
799
|
//#endregion
|
|
804
800
|
//#region src/components/stackedHorizontalBarChart/StackedHorizontalBarChart.tsx
|
|
805
|
-
var
|
|
801
|
+
var Ce = 680, we = 220, Te = 8, Ee = [
|
|
806
802
|
u.blue,
|
|
807
803
|
u.amber,
|
|
808
804
|
u.purple,
|
|
@@ -812,42 +808,38 @@ var we = 680, Te = 220, Ee = 8, De = [
|
|
|
812
808
|
right: 80,
|
|
813
809
|
top: 16,
|
|
814
810
|
bottom: 38
|
|
815
|
-
},
|
|
816
|
-
function
|
|
817
|
-
let t = Math.abs(e),
|
|
818
|
-
|
|
819
|
-
}
|
|
820
|
-
function Ae({ data: e, "data-testid": t }) {
|
|
821
|
-
let n = a(null), r = a(/* @__PURE__ */ new Map()), [i, l] = o(!1), { items: d = [], totals: g } = e, _ = d.filter((e) => typeof e == "object" && !!e), v = [..._].sort((e, t) => (t.total ?? 0) - (e.total ?? 0)), b = i ? v : v.slice(0, Ee), x = b.length, S = Math.max(...v.map((e) => Math.abs(e.total ?? 0)), 1), T = Math.max(Te, B.top + B.bottom + x * V + Math.max(0, x - 1) * 8), D = we - B.left - Oe - B.right, k = x > 1 ? (T - B.top - B.bottom - x * V) / (x - 1) : 0, A = _.length === 0, { hoveredRef: j, tooltip: P, hitZonesRef: F } = w(n, {
|
|
822
|
-
width: we,
|
|
811
|
+
}, De = 88, V = 18;
|
|
812
|
+
function Oe({ data: e, "data-testid": t }) {
|
|
813
|
+
let n = a(null), r = a(/* @__PURE__ */ new Map()), [i, l] = o(!1), { items: d = [], totals: g } = e, _ = d.filter((e) => typeof e == "object" && !!e), v = [..._].sort((e, t) => (t.total ?? 0) - (e.total ?? 0)), b = i ? v : v.slice(0, Te), x = b.length, S = Math.max(...v.map((e) => Math.abs(e.total ?? 0)), 1), T = Math.max(we, B.top + B.bottom + x * V + Math.max(0, x - 1) * 8), D = Ce - B.left - De - B.right, k = x > 1 ? (T - B.top - B.bottom - x * V) / (x - 1) : 0, A = _.length === 0, { hoveredRef: j, tooltip: P, hitZonesRef: F } = w(n, {
|
|
814
|
+
width: Ce,
|
|
823
815
|
height: T
|
|
824
816
|
});
|
|
825
|
-
return
|
|
817
|
+
return he(n, Ce, T, (e, t) => {
|
|
826
818
|
N(r.current, j.current), F.current = [], b.forEach((n, i) => {
|
|
827
|
-
let a =
|
|
819
|
+
let a = Ee[i % Ee.length], o = M(t, i, x, O), s = B.top + i * (V + k), c = B.left + De, l = r.current.get(n.id) ?? 0, d = Math.max(n.base ?? 0, 0), m = Math.max(n.total ?? 0, 0), g = d / S * D * o, _ = m / S * D * o, v = _ - g;
|
|
828
820
|
e.font = f.font, e.fillStyle = l > 0 ? a : f.color, e.textAlign = "right", e.textBaseline = "middle", e.fillText(n.abbreviation ?? n.name.slice(0, 6), c - 8, s + V / 2), e.fillStyle = h(u.bd, .25), e.beginPath(), e.roundRect(c, s, D, V, 4), e.fill(), g > 0 && (l > 0 && y(e, c + g / 2, s + V / 2, g * .3, a, .1 * l), e.fillStyle = h(a, .5 + l * .15), e.beginPath(), e.roundRect(c, s, g, V, 4), e.fill()), v > 2 && (e.fillStyle = h(a, .22 + l * .08), e.beginPath(), e.roundRect(c + g, s, v, V, [
|
|
829
821
|
0,
|
|
830
822
|
4,
|
|
831
823
|
4,
|
|
832
824
|
0
|
|
833
|
-
]), e.fill(), e.setLineDash([2, 3]), e.strokeStyle = h(a, .55), e.lineWidth = 1, e.beginPath(), e.moveTo(c + g, s + 3), e.lineTo(c + g, s + V - 3), e.stroke(), e.setLineDash([])), l > 0 && _ > 0 && (e.strokeStyle = h(a, .5 * l), e.lineWidth = 1, e.setLineDash([]), e.beginPath(), e.roundRect(c, s, _, V, 4), e.stroke()), o > .35 && (e.globalAlpha = Math.min(1, (o - .35) / .4), e.font = p.font, e.fillStyle = l > 0 ? a : p.color, e.textAlign = "left", e.textBaseline = "middle", e.fillText(
|
|
825
|
+
]), e.fill(), e.setLineDash([2, 3]), e.strokeStyle = h(a, .55), e.lineWidth = 1, e.beginPath(), e.moveTo(c + g, s + 3), e.lineTo(c + g, s + V - 3), e.stroke(), e.setLineDash([])), l > 0 && _ > 0 && (e.strokeStyle = h(a, .5 * l), e.lineWidth = 1, e.setLineDash([]), e.beginPath(), e.roundRect(c, s, _, V, 4), e.stroke()), o > .35 && (e.globalAlpha = Math.min(1, (o - .35) / .4), e.font = p.font, e.fillStyle = l > 0 ? a : p.color, e.textAlign = "left", e.textBaseline = "middle", e.fillText(n.totalLabel ?? String(n.total ?? 0), c + _ + 6, s + V / 2), e.globalAlpha = 1), E(F.current, n.id, c, s, Math.max(_, 1), V, {
|
|
834
826
|
label: n.name,
|
|
835
|
-
value: `${
|
|
836
|
-
sublabel: `Base ${
|
|
827
|
+
value: `${n.totalLabel ?? String(n.total ?? 0)} total`,
|
|
828
|
+
sublabel: `Base ${n.baseLabel ?? String(n.base ?? 0)} + Var ${n.variationLabel ?? String(n.variation ?? 0)} · ${n.percentage ?? 0}% committed`,
|
|
837
829
|
color: a
|
|
838
830
|
});
|
|
839
831
|
});
|
|
840
832
|
let n = T - 14;
|
|
841
|
-
e.textBaseline = "middle", e.font = m.font, e.textAlign = "left", e.fillStyle = h(u.blue, .5), e.beginPath(), e.roundRect(B.left +
|
|
833
|
+
e.textBaseline = "middle", e.font = m.font, e.textAlign = "left", e.fillStyle = h(u.blue, .5), e.beginPath(), e.roundRect(B.left + De, n - 3, 14, 6, 2), e.fill(), e.fillStyle = m.color, e.fillText("base value", B.left + De + 18, n), e.fillStyle = h(u.blue, .22), e.beginPath(), e.roundRect(B.left + De + 94, n - 3, 14, 6, 2), e.fill(), e.setLineDash([2, 3]), e.strokeStyle = h(u.blue, .5), e.lineWidth = .5, e.beginPath(), e.moveTo(B.left + De + 101, n - 3), e.lineTo(B.left + De + 101, n + 3), e.stroke(), e.setLineDash([]), e.fillStyle = m.color, e.fillText("approved variations", B.left + De + 112, n), e.font = m.font, e.textAlign = "right", e.fillStyle = m.color, e.fillText(`Portfolio: ${String(g?.total ?? 0)}`, Ce - 8, n);
|
|
842
834
|
}, !0, { easing: O }), A ? /* @__PURE__ */ s(I, {
|
|
843
|
-
width:
|
|
844
|
-
height:
|
|
835
|
+
width: Ce,
|
|
836
|
+
height: we,
|
|
845
837
|
message: "No contract data available",
|
|
846
838
|
"data-testid": t
|
|
847
839
|
}) : /* @__PURE__ */ c("div", {
|
|
848
840
|
"data-testid": t,
|
|
849
841
|
style: {
|
|
850
|
-
width:
|
|
842
|
+
width: Ce,
|
|
851
843
|
transition: "all 0.25s ease"
|
|
852
844
|
},
|
|
853
845
|
children: [/* @__PURE__ */ c("div", {
|
|
@@ -857,17 +849,17 @@ function Ae({ data: e, "data-testid": t }) {
|
|
|
857
849
|
role: "img",
|
|
858
850
|
"aria-label": "Total contract value per contractor — horizontal bar chart",
|
|
859
851
|
style: {
|
|
860
|
-
width:
|
|
852
|
+
width: Ce,
|
|
861
853
|
height: T,
|
|
862
854
|
display: "block",
|
|
863
855
|
borderRadius: 8
|
|
864
856
|
}
|
|
865
857
|
}), /* @__PURE__ */ s(C, {
|
|
866
858
|
...P,
|
|
867
|
-
parentW:
|
|
859
|
+
parentW: Ce,
|
|
868
860
|
parentH: T
|
|
869
861
|
})]
|
|
870
|
-
}), _.length >
|
|
862
|
+
}), _.length > Te && /* @__PURE__ */ s("div", {
|
|
871
863
|
style: { marginTop: 8 },
|
|
872
864
|
children: /* @__PURE__ */ s(ae, {
|
|
873
865
|
expanded: i,
|
|
@@ -878,92 +870,94 @@ function Ae({ data: e, "data-testid": t }) {
|
|
|
878
870
|
}
|
|
879
871
|
//#endregion
|
|
880
872
|
//#region src/components/rankedCardLeaderboard/RankedCardLeaderboard.tsx
|
|
881
|
-
var
|
|
873
|
+
var ke = 780, H = 240, Ae = 12, je = 10, Me = [
|
|
882
874
|
"Highest exposure",
|
|
883
875
|
"Elevated risk",
|
|
884
876
|
"Moderate exposure",
|
|
885
877
|
"Moderate exposure",
|
|
886
878
|
"Low exposure"
|
|
887
879
|
];
|
|
888
|
-
function
|
|
880
|
+
function Ne({ items: e = [], "data-testid": t }) {
|
|
889
881
|
let r = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), { hoveredRef: m, tooltip: g, hitZonesRef: _ } = w(r, {
|
|
890
|
-
width:
|
|
891
|
-
height:
|
|
882
|
+
width: ke,
|
|
883
|
+
height: H
|
|
892
884
|
}), b = [...i(() => e.filter((e) => typeof e == "object" && !!e), [e])].sort((e, t) => (t.count ?? 0) - (e.count ?? 0)).slice(0, 5), S = b.reduce((e, t) => e + (t.count ?? 0), 0);
|
|
893
885
|
return n(() => {
|
|
894
886
|
let e = r.current;
|
|
895
887
|
if (!e) return;
|
|
896
|
-
let t = v(e,
|
|
888
|
+
let t = v(e, ke, H);
|
|
897
889
|
o.current = 0;
|
|
898
|
-
let n = Math.min(5, b.length), i = (
|
|
890
|
+
let n = Math.min(5, b.length), i = (ke - 2 * Ae - (n - 1) * je) / n, a = H * .84, s = H * .08, c, g = () => {
|
|
899
891
|
o.current++;
|
|
900
892
|
let e = o.current;
|
|
901
|
-
t.clearRect(0, 0,
|
|
893
|
+
t.clearRect(0, 0, ke, H), t.letterSpacing = f.letterSpacing, _.current = [], l.current.forEach((e, t) => {
|
|
902
894
|
let n = t === m.current ? 1 : 0, r = e + (n - e) * .12;
|
|
903
895
|
Math.abs(r - n) < .005 ? n === 0 ? l.current.delete(t) : l.current.set(t, 1) : l.current.set(t, r);
|
|
904
896
|
}), m.current && !l.current.has(m.current) && l.current.set(m.current, 0), b.forEach((n, r) => {
|
|
905
|
-
let o = r === 0, c = r === 0 ? u.red : r === 1 ? u.amber : d[r % d.length],
|
|
906
|
-
t.fillStyle = h(c, .08 +
|
|
897
|
+
let o = r === 0, c = r === 0 ? u.red : r === 1 ? u.amber : d[r % d.length], m = Ae + r * (i + je), g = l.current.get(n.id) ?? 0, v = g * 8, b = m - v / 2, x = i + v, C = o ? j(e, .04, 3e-4) * .06 + .06 : 0;
|
|
898
|
+
t.fillStyle = h(c, .08 + g * .07), t.beginPath(), t.roundRect(b, s, x, a, 6), t.fill(), t.strokeStyle = h(c, .2 + g * .4 + C), t.lineWidth = o ? 1.5 : 1, t.stroke(), (g > .01 || o) && y(t, b + x / 2, s + a / 2, x * .55, c, C + g * .14), t.font = p.font, t.textAlign = "left", t.textBaseline = "top", t.fillStyle = h(c, .5 + g * .35), t.fillText(`#${r + 1}`, b + 7, s + 6);
|
|
907
899
|
let w = Math.min(i * .28, a * .32, 72), T = b + x / 2, D = s + a * .38, O = t.createRadialGradient(T, D - w * .2, 0, T, D, w);
|
|
908
|
-
O.addColorStop(0, h(c, .5 +
|
|
909
|
-
let k =
|
|
910
|
-
|
|
900
|
+
O.addColorStop(0, h(c, .5 + g * .2)), O.addColorStop(1, h(c, .2 + g * .1)), t.beginPath(), t.arc(T, D, w, 0, Math.PI * 2), t.fillStyle = O, t.fill(), t.strokeStyle = h(c, .4 + g * .3), t.lineWidth = 1, t.stroke(), t.font = p.font, t.textAlign = "center", t.textBaseline = "middle", t.fillStyle = h(u.t1, .9), t.fillText(n.abbreviation ?? n.name.slice(0, 6), T, D);
|
|
901
|
+
let k = n.label ?? String(n.count ?? 0);
|
|
902
|
+
t.font = p.font, t.textBaseline = "alphabetic", t.fillStyle = h(c, .9 + g * .1), t.fillText(k, T, s + a * .76), n.label || (t.font = f.font, t.fillStyle = f.color, t.fillText("open EWs", T, s + a * .88));
|
|
903
|
+
let A = Math.round((n.count ?? 0) / (S || 1) * 100), M = Me[r] ?? "Low exposure";
|
|
904
|
+
E(_.current, n.id, m, s, i, a, {
|
|
911
905
|
label: n.name,
|
|
912
|
-
value: `${
|
|
913
|
-
sublabel: `Rank #${r + 1} · ${
|
|
906
|
+
value: `${k} open · ${A}% of total`,
|
|
907
|
+
sublabel: `Rank #${r + 1} · ${M}`,
|
|
914
908
|
color: c
|
|
915
909
|
});
|
|
916
|
-
}), x(t,
|
|
910
|
+
}), x(t, ke, H, e, .015), c = requestAnimationFrame(g);
|
|
917
911
|
};
|
|
918
|
-
return
|
|
912
|
+
return g(), () => cancelAnimationFrame(c);
|
|
919
913
|
}, [b, S]), b.length === 0 ? /* @__PURE__ */ s(I, {
|
|
920
|
-
width:
|
|
921
|
-
height:
|
|
914
|
+
width: ke,
|
|
915
|
+
height: H,
|
|
922
916
|
"data-testid": t
|
|
923
917
|
}) : /* @__PURE__ */ c("div", {
|
|
924
918
|
"data-testid": t,
|
|
925
919
|
style: {
|
|
926
920
|
position: "relative",
|
|
927
|
-
width:
|
|
928
|
-
height:
|
|
921
|
+
width: ke,
|
|
922
|
+
height: H
|
|
929
923
|
},
|
|
930
924
|
children: [/* @__PURE__ */ s("canvas", {
|
|
931
925
|
ref: r,
|
|
932
926
|
role: "img",
|
|
933
|
-
"aria-label": "Contractor rank — count per contractor",
|
|
927
|
+
"aria-label": "Contractor rank — open EW count per contractor",
|
|
934
928
|
style: {
|
|
935
|
-
width:
|
|
936
|
-
height:
|
|
929
|
+
width: ke,
|
|
930
|
+
height: H,
|
|
937
931
|
display: "block",
|
|
938
932
|
borderRadius: 8
|
|
939
933
|
}
|
|
940
934
|
}), /* @__PURE__ */ s(C, {
|
|
941
935
|
...g,
|
|
942
|
-
parentW:
|
|
943
|
-
parentH:
|
|
936
|
+
parentW: ke,
|
|
937
|
+
parentH: H
|
|
944
938
|
})]
|
|
945
939
|
});
|
|
946
940
|
}
|
|
947
941
|
//#endregion
|
|
948
942
|
//#region src/components/dotMatrixChart/DotMatrixChart.tsx
|
|
949
|
-
var
|
|
950
|
-
function
|
|
943
|
+
var U = 680, W = 260;
|
|
944
|
+
function Pe({ items: e = [], "data-testid": t }) {
|
|
951
945
|
let r = a(null), o = a(0), l = a(/* @__PURE__ */ new Map()), { hoveredRef: d, tooltip: p, hitZonesRef: m } = w(r, {
|
|
952
|
-
width:
|
|
953
|
-
height:
|
|
946
|
+
width: U,
|
|
947
|
+
height: W
|
|
954
948
|
}), g = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
955
949
|
return n(() => {
|
|
956
950
|
let e = r.current;
|
|
957
951
|
if (!e) return;
|
|
958
|
-
let t = v(e,
|
|
952
|
+
let t = v(e, U, W);
|
|
959
953
|
o.current = 0;
|
|
960
|
-
let n = g.length, i = Math.max(...g.map((e) => e.count), 1), a = i, s =
|
|
954
|
+
let n = g.length, i = Math.max(...g.map((e) => e.count), 1), a = i, s = U * .05, c = W * .1, p = U * .9 / n, _ = W * .7 / a, S = g.reduce((e, t) => e + t.count, 0), C, w = () => {
|
|
961
955
|
o.current++;
|
|
962
956
|
let e = o.current;
|
|
963
|
-
t.clearRect(0, 0,
|
|
957
|
+
t.clearRect(0, 0, U, W), m.current = [], l.current.forEach((e, t) => {
|
|
964
958
|
let n = t === d.current ? 1 : 0, r = e + (n - e) * .12;
|
|
965
959
|
Math.abs(r - n) < .005 ? n === 0 ? l.current.delete(t) : l.current.set(t, 1) : l.current.set(t, r);
|
|
966
|
-
}), d.current && !l.current.has(d.current) && l.current.set(d.current, 0), b(t,
|
|
960
|
+
}), d.current && !l.current.has(d.current) && l.current.set(d.current, 0), b(t, U, W, e, 40, h(u.blue, .04)), g.forEach((n, r) => {
|
|
967
961
|
let o = n.count === i, d = u.blue, g = l.current.get(`${n.category}-col`) ?? 0;
|
|
968
962
|
for (let u = 0; u < a; u++) {
|
|
969
963
|
let a = s + r * p + p / 2, f = c + u * _ + _ / 2, v = Math.min(p, _) * .38;
|
|
@@ -981,40 +975,40 @@ function Fe({ items: e = [], "data-testid": t }) {
|
|
|
981
975
|
}
|
|
982
976
|
let v = c + a * _ + 16;
|
|
983
977
|
t.font = f.font, t.textAlign = "center", t.textBaseline = "alphabetic", t.fillStyle = o ? u.blue : h(u.t2, .65), t.fillText(n.category, s + r * p + p / 2, v);
|
|
984
|
-
}), x(t,
|
|
978
|
+
}), x(t, U, W, e, .015), C = requestAnimationFrame(w);
|
|
985
979
|
};
|
|
986
980
|
return w(), () => cancelAnimationFrame(C);
|
|
987
981
|
}, [g]), g.length === 0 ? /* @__PURE__ */ s(I, {
|
|
988
|
-
width:
|
|
989
|
-
height:
|
|
982
|
+
width: U,
|
|
983
|
+
height: W,
|
|
990
984
|
"data-testid": t
|
|
991
985
|
}) : /* @__PURE__ */ c("div", {
|
|
992
986
|
"data-testid": t,
|
|
993
987
|
style: {
|
|
994
988
|
position: "relative",
|
|
995
|
-
width:
|
|
996
|
-
height:
|
|
989
|
+
width: U,
|
|
990
|
+
height: W
|
|
997
991
|
},
|
|
998
992
|
children: [/* @__PURE__ */ s("canvas", {
|
|
999
993
|
ref: r,
|
|
1000
994
|
role: "img",
|
|
1001
995
|
"aria-label": "Early Warning count by category — breathing dot grid",
|
|
1002
996
|
style: {
|
|
1003
|
-
width:
|
|
1004
|
-
height:
|
|
997
|
+
width: U,
|
|
998
|
+
height: W,
|
|
1005
999
|
display: "block",
|
|
1006
1000
|
borderRadius: 8
|
|
1007
1001
|
}
|
|
1008
1002
|
}), /* @__PURE__ */ s(C, {
|
|
1009
1003
|
...p,
|
|
1010
|
-
parentW:
|
|
1011
|
-
parentH:
|
|
1004
|
+
parentW: U,
|
|
1005
|
+
parentH: W
|
|
1012
1006
|
})]
|
|
1013
1007
|
});
|
|
1014
1008
|
}
|
|
1015
1009
|
//#endregion
|
|
1016
1010
|
//#region src/components/lineChart/LineChart.tsx
|
|
1017
|
-
function
|
|
1011
|
+
function Fe({ rows: e = [], className: t, colors: n }) {
|
|
1018
1012
|
return /* @__PURE__ */ s(ee, {
|
|
1019
1013
|
rows: e,
|
|
1020
1014
|
variant: "line",
|
|
@@ -1024,7 +1018,7 @@ function Ie({ rows: e = [], className: t, colors: n }) {
|
|
|
1024
1018
|
}
|
|
1025
1019
|
//#endregion
|
|
1026
1020
|
//#region src/components/constants.ts
|
|
1027
|
-
var
|
|
1021
|
+
var Ie = [
|
|
1028
1022
|
"#4C93D9",
|
|
1029
1023
|
"#5DA537",
|
|
1030
1024
|
"#F3862C",
|
|
@@ -1032,7 +1026,7 @@ var Le = [
|
|
|
1032
1026
|
"#A0B724",
|
|
1033
1027
|
"#EEBF3B",
|
|
1034
1028
|
"#3C45D1"
|
|
1035
|
-
],
|
|
1029
|
+
], Le = {
|
|
1036
1030
|
nodes: [
|
|
1037
1031
|
{
|
|
1038
1032
|
id: "supplier-x",
|
|
@@ -1075,8 +1069,8 @@ var Le = [
|
|
|
1075
1069
|
};
|
|
1076
1070
|
//#endregion
|
|
1077
1071
|
//#region src/components/miniBars/MiniBars.tsx
|
|
1078
|
-
function
|
|
1079
|
-
let r = n?.slices ??
|
|
1072
|
+
function Re({ rows: e = [], className: t, colors: n }) {
|
|
1073
|
+
let r = n?.slices ?? Ie;
|
|
1080
1074
|
return /* @__PURE__ */ s("div", {
|
|
1081
1075
|
className: ["d3-mini-bars", t].filter(Boolean).join(" "),
|
|
1082
1076
|
children: e.map(([e, t, n], i) => /* @__PURE__ */ c("div", {
|
|
@@ -1102,7 +1096,7 @@ function ze({ rows: e = [], className: t, colors: n }) {
|
|
|
1102
1096
|
width: Math.max(0, Math.min(100, t)),
|
|
1103
1097
|
height: "12",
|
|
1104
1098
|
rx: "6",
|
|
1105
|
-
className: `d3-mini-fill tone-${i %
|
|
1099
|
+
className: `d3-mini-fill tone-${i % Ie.length}`,
|
|
1106
1100
|
fill: r[i % r.length]
|
|
1107
1101
|
})]
|
|
1108
1102
|
})
|
|
@@ -1114,98 +1108,101 @@ function ze({ rows: e = [], className: t, colors: n }) {
|
|
|
1114
1108
|
}
|
|
1115
1109
|
//#endregion
|
|
1116
1110
|
//#region src/components/radialFanTreeChart/RadialFanTreeChart.tsx
|
|
1117
|
-
var
|
|
1118
|
-
function
|
|
1119
|
-
let
|
|
1120
|
-
width:
|
|
1121
|
-
height:
|
|
1111
|
+
var ze = 680, Be = 320, Ve = 60, He = 28;
|
|
1112
|
+
function Ue({ total: e = 0, totalLabel: t, items: r = [], "data-testid": o }) {
|
|
1113
|
+
let l = a(null), m = a(/* @__PURE__ */ new Map()), g = a(0), _ = i(() => r.filter((e) => typeof e == "object" && !!e), [r]), b = i(() => Math.max(Be, Ve + Math.max(0, _.length - 1) * He), [_.length]), { hoveredRef: x, tooltip: S, hitZonesRef: E } = w(l, {
|
|
1114
|
+
width: ze,
|
|
1115
|
+
height: b
|
|
1122
1116
|
});
|
|
1123
1117
|
return n(() => {
|
|
1124
|
-
let
|
|
1125
|
-
if (!
|
|
1126
|
-
let
|
|
1127
|
-
|
|
1128
|
-
let
|
|
1129
|
-
x:
|
|
1118
|
+
let n = l.current;
|
|
1119
|
+
if (!n) return;
|
|
1120
|
+
let r = v(n, ze, b);
|
|
1121
|
+
g.current = 0;
|
|
1122
|
+
let i = b / 2, a = ze - 80, o = Math.max(..._.map((e) => e.count ?? 0)), s = (b - 60) / (_.length - 1), c = _.map((e, t) => ({
|
|
1123
|
+
x: a,
|
|
1130
1124
|
y: 30 + t * s
|
|
1131
|
-
})),
|
|
1132
|
-
|
|
1133
|
-
let
|
|
1134
|
-
|
|
1135
|
-
let
|
|
1136
|
-
N(
|
|
1137
|
-
let
|
|
1138
|
-
if (
|
|
1139
|
-
let
|
|
1140
|
-
|
|
1125
|
+
})), S, C = () => {
|
|
1126
|
+
g.current++;
|
|
1127
|
+
let n = g.current;
|
|
1128
|
+
r.clearRect(0, 0, ze, b), r.letterSpacing = f.letterSpacing;
|
|
1129
|
+
let s = D(Math.min(n / 72, 1));
|
|
1130
|
+
N(m.current, x.current), E.current = [], y(r, 88, i, 48 * s, u.blue, .15 * s), _.forEach((t, n) => {
|
|
1131
|
+
let l = d[n % d.length], g = M(s, n, _.length, D), v = c[n], b = m.current.get(t.id) ?? 0, x = Math.max(1.5, (t.count ?? 0) / o * 6);
|
|
1132
|
+
if (g < .01) return;
|
|
1133
|
+
let S = 88 + (a - 88) * .4, C = i, w = 88 + (a - 88) * .6, O = v.y, k = g;
|
|
1134
|
+
r.beginPath();
|
|
1141
1135
|
for (let e = 0; e <= 40; e++) {
|
|
1142
|
-
let t = e / 40 * k,
|
|
1143
|
-
e === 0 ?
|
|
1136
|
+
let t = e / 40 * k, n = (1 - t) ** 3 * 88 + 3 * (1 - t) ** 2 * t * S + 3 * (1 - t) * t ** 2 * w + t ** 3 * v.x, a = (1 - t) ** 3 * i + 3 * (1 - t) ** 2 * t * C + 3 * (1 - t) * t ** 2 * O + t ** 3 * v.y;
|
|
1137
|
+
e === 0 ? r.moveTo(n, a) : r.lineTo(n, a);
|
|
1144
1138
|
}
|
|
1145
|
-
if (
|
|
1146
|
-
let
|
|
1147
|
-
y(
|
|
1139
|
+
if (r.strokeStyle = h(l, b > 0 ? .8 : .45), r.lineWidth = x * (b > 0 ? 1.3 : 1), r.stroke(), g > .85) {
|
|
1140
|
+
let n = Math.min(1, (g - .85) / .15), i = 4 + (t.count ?? 0) / o * 12;
|
|
1141
|
+
y(r, v.x, v.y, i * 2.5, l, (.25 + b * .2) * n), r.beginPath(), r.arc(v.x, v.y, i * n, 0, Math.PI * 2), r.fillStyle = h(l, (.7 + b * .2) * n), r.fill();
|
|
1142
|
+
let a = t.label ?? String(t.count ?? 0);
|
|
1143
|
+
T(E.current, t.id, v.x, v.y, i + 8, {
|
|
1148
1144
|
label: t.name,
|
|
1149
|
-
value: `${
|
|
1145
|
+
value: `${a} NCEs raised`,
|
|
1150
1146
|
sublabel: `${Math.round((t.count ?? 0) / e * 100)}% of all NCEs`,
|
|
1151
|
-
color:
|
|
1152
|
-
}),
|
|
1153
|
-
let
|
|
1154
|
-
|
|
1155
|
-
let
|
|
1156
|
-
|
|
1147
|
+
color: l
|
|
1148
|
+
}), r.globalAlpha = n, r.font = f.font, r.textAlign = "left";
|
|
1149
|
+
let s = t.abbreviation ?? t.name.slice(0, 6), c = ` ${a}`, d = v.x + i + 6, m = v.y + 4;
|
|
1150
|
+
r.fillStyle = b > 0 ? l : h(u.t2, .85), r.fillText(s, d, m);
|
|
1151
|
+
let _ = r.measureText(s).width;
|
|
1152
|
+
r.font = p.font, r.fillStyle = b > 0 ? l : u.t1, r.fillText(c, d + _, m), r.globalAlpha = 1;
|
|
1157
1153
|
}
|
|
1158
|
-
}),
|
|
1154
|
+
}), r.beginPath(), r.arc(88, i, 32 * s, 0, Math.PI * 2), r.fillStyle = u.bgL, r.fill(), r.strokeStyle = h(u.blue, .6 * s), r.lineWidth = 2, r.stroke(), s > .4 && (r.globalAlpha = Math.min(1, (s - .4) / .4), r.font = "500 24px 'Satoshi Variable', 'DM Sans', sans-serif", r.fillStyle = u.t1, r.textAlign = "center", r.fillText(t ?? String(e), 88, i + 5), r.font = f.font, r.fillStyle = f.color, r.fillText("NCEs", 88, i + 18), r.globalAlpha = 1), S = requestAnimationFrame(C);
|
|
1159
1155
|
};
|
|
1160
|
-
return C(), () => cancelAnimationFrame(
|
|
1156
|
+
return C(), () => cancelAnimationFrame(S);
|
|
1161
1157
|
}, [
|
|
1162
1158
|
e,
|
|
1163
|
-
|
|
1164
|
-
_
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1159
|
+
t,
|
|
1160
|
+
_,
|
|
1161
|
+
b
|
|
1162
|
+
]), _.length === 0 ? /* @__PURE__ */ s(I, {
|
|
1163
|
+
width: ze,
|
|
1164
|
+
height: Be,
|
|
1165
|
+
"data-testid": o
|
|
1169
1166
|
}) : /* @__PURE__ */ c("div", {
|
|
1170
|
-
"data-testid":
|
|
1167
|
+
"data-testid": o,
|
|
1171
1168
|
style: {
|
|
1172
1169
|
position: "relative",
|
|
1173
|
-
width:
|
|
1174
|
-
height:
|
|
1170
|
+
width: ze,
|
|
1171
|
+
height: b
|
|
1175
1172
|
},
|
|
1176
1173
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1177
|
-
ref:
|
|
1174
|
+
ref: l,
|
|
1178
1175
|
role: "img",
|
|
1179
1176
|
"aria-label": "NCE fault tree — NCEs per contractor as branching tree",
|
|
1180
1177
|
style: {
|
|
1181
|
-
width:
|
|
1182
|
-
height:
|
|
1178
|
+
width: ze,
|
|
1179
|
+
height: b,
|
|
1183
1180
|
display: "block"
|
|
1184
1181
|
}
|
|
1185
1182
|
}), /* @__PURE__ */ s(C, {
|
|
1186
|
-
...
|
|
1187
|
-
parentW:
|
|
1188
|
-
parentH:
|
|
1183
|
+
...S,
|
|
1184
|
+
parentW: ze,
|
|
1185
|
+
parentH: b
|
|
1189
1186
|
})]
|
|
1190
1187
|
});
|
|
1191
1188
|
}
|
|
1192
1189
|
//#endregion
|
|
1193
1190
|
//#region src/components/pieChart/PieChart.tsx
|
|
1194
|
-
var
|
|
1195
|
-
function
|
|
1191
|
+
var We = 192, Ge = We, Ke = We + 80;
|
|
1192
|
+
function qe({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
1196
1193
|
let o = a(null), f = a(/* @__PURE__ */ new Map()), p = a(0), m = i?.slices ?? d, { hoveredRef: g, tooltip: b, hitZonesRef: x } = w(o, {
|
|
1197
|
-
width:
|
|
1198
|
-
height:
|
|
1194
|
+
width: Ge,
|
|
1195
|
+
height: Ke
|
|
1199
1196
|
});
|
|
1200
1197
|
return n(() => {
|
|
1201
1198
|
let n = o.current;
|
|
1202
1199
|
if (!n) return;
|
|
1203
|
-
let r = v(n,
|
|
1200
|
+
let r = v(n, Ge, Ke);
|
|
1204
1201
|
p.current = 0;
|
|
1205
|
-
let i =
|
|
1202
|
+
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 = () => {
|
|
1206
1203
|
p.current++;
|
|
1207
1204
|
let n = p.current;
|
|
1208
|
-
r.clearRect(0, 0,
|
|
1205
|
+
r.clearRect(0, 0, Ge, Ke);
|
|
1209
1206
|
let o = 1 - (1 - Math.min(n / 48, 1)) ** 3;
|
|
1210
1207
|
N(f.current, g.current), x.current = [];
|
|
1211
1208
|
let v = -Math.PI / 2;
|
|
@@ -1219,10 +1216,10 @@ function Je({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
|
1219
1216
|
let O = j(n, .03, 3e-4), k = s + b * 6 + (b > 0 ? O * 2 : 0);
|
|
1220
1217
|
r.beginPath(), r.moveTo(i + Math.cos(v) * c, a + Math.sin(v) * c), r.arc(i, a, k, v, g), c > 0 ? r.arc(i, a, c, g, v, !0) : r.lineTo(i, a), r.closePath(), r.fillStyle = h(_, .7 + b * .2), r.fill(), r.strokeStyle = h(u.bg, .8), r.lineWidth = 1.5, r.stroke(), v = g;
|
|
1221
1218
|
}), t === "donut" && e.length > 0 && y(r, i, a, c * .8, u.blue, .06);
|
|
1222
|
-
let S =
|
|
1219
|
+
let S = We + 12;
|
|
1223
1220
|
e.forEach((e, t) => {
|
|
1224
1221
|
let n = m[t % m.length], i = (e.pricing ?? 0) / l, a = f.current.get(e.id ?? `sl-${t}`) ?? 0, o = S + t * 18;
|
|
1225
|
-
r.beginPath(), r.arc(8, o, 4, 0, Math.PI * 2), r.fillStyle = h(n, .8 + a * .2), r.fill(), r.font = "9px 'JetBrains Mono', monospace", r.fillStyle = h(u.t2, .7 + a * .2), r.textAlign = "left", r.fillText(e.vendor, 18, o + 3.5), r.font = "bold 9px 'JetBrains Mono', monospace", r.fillStyle = _(u.t3, n, a), r.textAlign = "right", r.fillText(`${e.pricing ?? 0} (${Math.round(i * 100)}%)`,
|
|
1222
|
+
r.beginPath(), r.arc(8, o, 4, 0, Math.PI * 2), r.fillStyle = h(n, .8 + a * .2), r.fill(), r.font = "9px 'JetBrains Mono', monospace", r.fillStyle = h(u.t2, .7 + a * .2), r.textAlign = "left", r.fillText(e.vendor, 18, o + 3.5), r.font = "bold 9px 'JetBrains Mono', monospace", r.fillStyle = _(u.t3, n, a), r.textAlign = "right", r.fillText(`${e.pricing ?? 0} (${Math.round(i * 100)}%)`, Ge - 4, o + 3.5);
|
|
1226
1223
|
}), d = requestAnimationFrame(b);
|
|
1227
1224
|
};
|
|
1228
1225
|
return b(), () => cancelAnimationFrame(d);
|
|
@@ -1236,30 +1233,30 @@ function Je({ rows: e = [], variant: t, className: r, colors: i }) {
|
|
|
1236
1233
|
children: /* @__PURE__ */ c("div", {
|
|
1237
1234
|
style: {
|
|
1238
1235
|
position: "relative",
|
|
1239
|
-
width:
|
|
1240
|
-
height:
|
|
1236
|
+
width: Ge,
|
|
1237
|
+
height: Ke
|
|
1241
1238
|
},
|
|
1242
1239
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1243
1240
|
ref: o,
|
|
1244
1241
|
role: "img",
|
|
1245
1242
|
"aria-label": `${t} chart`,
|
|
1246
1243
|
style: {
|
|
1247
|
-
width:
|
|
1248
|
-
height:
|
|
1244
|
+
width: Ge,
|
|
1245
|
+
height: Ke,
|
|
1249
1246
|
display: "block",
|
|
1250
1247
|
borderRadius: 8
|
|
1251
1248
|
}
|
|
1252
1249
|
}), /* @__PURE__ */ s(C, {
|
|
1253
1250
|
...b,
|
|
1254
|
-
parentW:
|
|
1255
|
-
parentH:
|
|
1251
|
+
parentW: Ge,
|
|
1252
|
+
parentH: Ke
|
|
1256
1253
|
})]
|
|
1257
1254
|
})
|
|
1258
1255
|
});
|
|
1259
1256
|
}
|
|
1260
1257
|
//#endregion
|
|
1261
1258
|
//#region src/components/sankey/SankeySvg.tsx
|
|
1262
|
-
function
|
|
1259
|
+
function Je(e, t, n, r) {
|
|
1263
1260
|
let i = new Set(t.map((e) => e.source)), a = new Set(t.map((e) => e.target)), o = /* @__PURE__ */ new Map(), s = [];
|
|
1264
1261
|
for (e.forEach((e) => {
|
|
1265
1262
|
i.has(e.id) && !a.has(e.id) && s.push({
|
|
@@ -1304,8 +1301,8 @@ function Ye(e, t, n, r) {
|
|
|
1304
1301
|
});
|
|
1305
1302
|
}), f;
|
|
1306
1303
|
}
|
|
1307
|
-
function
|
|
1308
|
-
let _ = a(null), b = a(/* @__PURE__ */ new Map()), S = a(0), D = a([]), O = g?.nodes ?? d, k = g?.links ?? u.bd, A = g?.activeLinks ?? u.blue, M = g?.activeNodes ?? u.blue, P = i(() =>
|
|
1304
|
+
function Ye({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f, selectedEntity: p, className: m, colors: g }) {
|
|
1305
|
+
let _ = a(null), b = a(/* @__PURE__ */ new Map()), S = a(0), D = a([]), O = g?.nodes ?? d, k = g?.links ?? u.bd, A = g?.activeLinks ?? u.blue, M = g?.activeNodes ?? u.blue, P = i(() => Je(e, t, r, o), [
|
|
1309
1306
|
e,
|
|
1310
1307
|
t,
|
|
1311
1308
|
r,
|
|
@@ -1405,7 +1402,7 @@ function Xe({ nodes: e, links: t, width: r = 960, height: o = 280, ariaLabel: f,
|
|
|
1405
1402
|
}
|
|
1406
1403
|
//#endregion
|
|
1407
1404
|
//#region src/canvas/CausalFlowCanvas.tsx
|
|
1408
|
-
var
|
|
1405
|
+
var Xe = [
|
|
1409
1406
|
{
|
|
1410
1407
|
x: .13,
|
|
1411
1408
|
y: .48
|
|
@@ -1438,7 +1435,7 @@ var Ze = [
|
|
|
1438
1435
|
x: .92,
|
|
1439
1436
|
y: .22
|
|
1440
1437
|
}
|
|
1441
|
-
],
|
|
1438
|
+
], Ze = [
|
|
1442
1439
|
u.blue,
|
|
1443
1440
|
u.orange,
|
|
1444
1441
|
u.red,
|
|
@@ -1446,7 +1443,7 @@ var Ze = [
|
|
|
1446
1443
|
u.green,
|
|
1447
1444
|
u.amber,
|
|
1448
1445
|
u.t2
|
|
1449
|
-
],
|
|
1446
|
+
], Qe = [
|
|
1450
1447
|
26,
|
|
1451
1448
|
24,
|
|
1452
1449
|
24,
|
|
@@ -1456,21 +1453,21 @@ var Ze = [
|
|
|
1456
1453
|
22,
|
|
1457
1454
|
22
|
|
1458
1455
|
];
|
|
1459
|
-
function
|
|
1456
|
+
function $e(e, t) {
|
|
1460
1457
|
let n = 1 - t;
|
|
1461
1458
|
return {
|
|
1462
1459
|
x: n * n * n * e.p0.x + 3 * n * n * t * e.p1.x + 3 * n * t * t * e.p2.x + t * t * t * e.p3.x,
|
|
1463
1460
|
y: n * n * n * e.p0.y + 3 * n * n * t * e.p1.y + 3 * n * t * t * e.p2.y + t * t * t * e.p3.y
|
|
1464
1461
|
};
|
|
1465
1462
|
}
|
|
1466
|
-
function
|
|
1463
|
+
function et(e, t) {
|
|
1467
1464
|
let n = 1 - t, r = 3 * n * n * (e.p1.x - e.p0.x) + 6 * n * t * (e.p2.x - e.p1.x) + 3 * t * t * (e.p3.x - e.p2.x), i = 3 * n * n * (e.p1.y - e.p0.y) + 6 * n * t * (e.p2.y - e.p1.y) + 3 * t * t * (e.p3.y - e.p2.y), a = Math.sqrt(r * r + i * i) || 1;
|
|
1468
1465
|
return {
|
|
1469
1466
|
x: -i / a,
|
|
1470
1467
|
y: r / a
|
|
1471
1468
|
};
|
|
1472
1469
|
}
|
|
1473
|
-
function
|
|
1470
|
+
function tt(e, t) {
|
|
1474
1471
|
let n = t.x - e.x, r = t.y - e.y;
|
|
1475
1472
|
return {
|
|
1476
1473
|
p0: {
|
|
@@ -1491,7 +1488,7 @@ function nt(e, t) {
|
|
|
1491
1488
|
}
|
|
1492
1489
|
};
|
|
1493
1490
|
}
|
|
1494
|
-
function
|
|
1491
|
+
function nt({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntity: l }) {
|
|
1495
1492
|
let d = a(null), f = a(0), p = a([]), { hoveredRef: m, tooltip: g, hitZonesRef: S } = w(d, {
|
|
1496
1493
|
width: r,
|
|
1497
1494
|
height: o
|
|
@@ -1499,15 +1496,15 @@ function rt({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1499
1496
|
let t = /* @__PURE__ */ new Map();
|
|
1500
1497
|
return e.forEach((e, n) => t.set(e.id, n)), t;
|
|
1501
1498
|
}, [e]), O = i(() => t.length > 0 ? Math.max(...t.map((e) => e.value)) : 100, [t]), k = (e) => O > 1 ? e / 100 : e, A = i(() => e.map((e, t) => {
|
|
1502
|
-
let n =
|
|
1499
|
+
let n = Xe[t % Xe.length];
|
|
1503
1500
|
return {
|
|
1504
1501
|
id: e.id,
|
|
1505
1502
|
label: e.name,
|
|
1506
1503
|
sub: e.valueLabel ?? "",
|
|
1507
1504
|
x: n.x * r,
|
|
1508
1505
|
y: n.y * o,
|
|
1509
|
-
r:
|
|
1510
|
-
color:
|
|
1506
|
+
r: Qe[t % Qe.length],
|
|
1507
|
+
color: Ze[t % Ze.length]
|
|
1511
1508
|
};
|
|
1512
1509
|
}), [
|
|
1513
1510
|
e,
|
|
@@ -1529,7 +1526,7 @@ function rt({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1529
1526
|
if (t.clearRect(0, 0, r, o), S.current = [], b(t, r, o, e, 50, h(u.blue, .05)), M.forEach((e, n) => {
|
|
1530
1527
|
let r = A[e.fromIdx], i = A[e.toIdx];
|
|
1531
1528
|
if (!r || !i) return;
|
|
1532
|
-
let a = !!l && (r.id === l || i.id === l), o = _(r.color, i.color, .5), s = a ? .18 : .05, c = a ? .25 : .1, d =
|
|
1529
|
+
let a = !!l && (r.id === l || i.id === l), o = _(r.color, i.color, .5), s = a ? .18 : .05, c = a ? .25 : .1, d = tt(r, i);
|
|
1533
1530
|
t.beginPath(), t.moveTo(d.p0.x, d.p0.y), t.bezierCurveTo(d.p1.x, d.p1.y, d.p2.x, d.p2.y, d.p3.x, d.p3.y), t.strokeStyle = h(o, s), t.lineWidth = 16, t.lineCap = "round", t.stroke(), t.strokeStyle = h(o, c), t.lineWidth = 1.5, t.stroke();
|
|
1534
1531
|
for (let t = 0; t < e.conf * 2.5; t++) Math.random() < .45 && p.current.push({
|
|
1535
1532
|
edgeIdx: n,
|
|
@@ -1538,7 +1535,7 @@ function rt({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1538
1535
|
off: (Math.random() - .5) * 13,
|
|
1539
1536
|
sz: .7 + Math.random() * 2
|
|
1540
1537
|
});
|
|
1541
|
-
let f =
|
|
1538
|
+
let f = $e(d, .5), m = `${Math.round(e.conf * 100)}%`;
|
|
1542
1539
|
t.font = "bold 12px 'JetBrains Mono', monospace", t.textBaseline = "middle";
|
|
1543
1540
|
let g = t.measureText(m).width + 14;
|
|
1544
1541
|
t.fillStyle = "rgba(10,16,24,0.88)", t.beginPath(), t.roundRect(f.x - g / 2, f.y - 11, g, 22, 6), t.fill(), t.strokeStyle = h(u.blue, .25), t.lineWidth = 1, t.stroke(), t.fillStyle = h(u.blue, .9), t.textAlign = "center", t.fillText(m, f.x, f.y);
|
|
@@ -1548,7 +1545,7 @@ function rt({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1548
1545
|
if (!n) return !1;
|
|
1549
1546
|
let r = A[n.fromIdx], i = A[n.toIdx];
|
|
1550
1547
|
if (!r || !i) return !1;
|
|
1551
|
-
let a =
|
|
1548
|
+
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 = _(r.color, i.color, e.t);
|
|
1552
1549
|
return y(t, c, l, e.sz * 3, d, u * .1), t.beginPath(), t.arc(c, l, e.sz, 0, Math.PI * 2), t.fillStyle = h(d, u), t.fill(), !0;
|
|
1553
1550
|
}), p.current.length > 350 && (p.current = p.current.slice(-350)), A.forEach((n, r) => {
|
|
1554
1551
|
let i = l === n.id, a = m.current === `node-${r}`, o = j(e, .03, 3e-4) * .1 + 1, s = n.r * o * (i ? 1.15 : 1);
|
|
@@ -1605,10 +1602,10 @@ function rt({ nodes: e, links: t, width: r = 960, height: o = 280, selectedEntit
|
|
|
1605
1602
|
}
|
|
1606
1603
|
//#endregion
|
|
1607
1604
|
//#region src/components/sankey/ProcessSankey.tsx
|
|
1608
|
-
function
|
|
1609
|
-
return /* @__PURE__ */ s(
|
|
1610
|
-
nodes:
|
|
1611
|
-
links:
|
|
1605
|
+
function rt({ selectedEntity: e, colors: t }) {
|
|
1606
|
+
return /* @__PURE__ */ s(nt, {
|
|
1607
|
+
nodes: Le.nodes,
|
|
1608
|
+
links: Le.links,
|
|
1612
1609
|
width: 960,
|
|
1613
1610
|
height: 280,
|
|
1614
1611
|
selectedEntity: e
|
|
@@ -1616,7 +1613,7 @@ function it({ selectedEntity: e, colors: t }) {
|
|
|
1616
1613
|
}
|
|
1617
1614
|
//#endregion
|
|
1618
1615
|
//#region src/components/sankey/RankingSankey.tsx
|
|
1619
|
-
function
|
|
1616
|
+
function it({ rows: e = [], className: t, colors: n }) {
|
|
1620
1617
|
let { nodes: r, links: a } = i(() => {
|
|
1621
1618
|
let t = e.slice(0, 5);
|
|
1622
1619
|
return {
|
|
@@ -1634,7 +1631,7 @@ function at({ rows: e = [], className: t, colors: n }) {
|
|
|
1634
1631
|
}))
|
|
1635
1632
|
};
|
|
1636
1633
|
}, [e]);
|
|
1637
|
-
return /* @__PURE__ */ s(
|
|
1634
|
+
return /* @__PURE__ */ s(Ye, {
|
|
1638
1635
|
nodes: r,
|
|
1639
1636
|
links: a,
|
|
1640
1637
|
width: 760,
|
|
@@ -1646,20 +1643,20 @@ function at({ rows: e = [], className: t, colors: n }) {
|
|
|
1646
1643
|
}
|
|
1647
1644
|
//#endregion
|
|
1648
1645
|
//#region src/components/balanceScaleChart/BalanceScaleChart.tsx
|
|
1649
|
-
var
|
|
1650
|
-
function
|
|
1646
|
+
var at = 500, ot = 320;
|
|
1647
|
+
function st({ left: e, right: t, "data-testid": r }) {
|
|
1651
1648
|
let i = a(null), o = a(0);
|
|
1652
1649
|
return n(() => {
|
|
1653
1650
|
let n = i.current;
|
|
1654
1651
|
if (!n) return;
|
|
1655
|
-
let r = v(n,
|
|
1652
|
+
let r = v(n, at, ot);
|
|
1656
1653
|
o.current = 0;
|
|
1657
|
-
let a =
|
|
1654
|
+
let a = at / 2, s = Math.max(e.value, t.value), c = (e.value - t.value) / s * 14, l, d = () => {
|
|
1658
1655
|
o.current++;
|
|
1659
1656
|
let n = o.current;
|
|
1660
|
-
r.clearRect(0, 0,
|
|
1657
|
+
r.clearRect(0, 0, at, ot), r.letterSpacing = f.letterSpacing;
|
|
1661
1658
|
let i = D(Math.min(n / 80, 1)), g = c * A(Math.min(n / 80, 1)) * Math.PI / 180;
|
|
1662
|
-
r.strokeStyle = h(u.bd, .5 * i), r.lineWidth = 2, r.beginPath(), r.moveTo(a, 100), r.lineTo(a,
|
|
1659
|
+
r.strokeStyle = h(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();
|
|
1663
1660
|
let _ = {
|
|
1664
1661
|
x: a - Math.cos(g) * 160,
|
|
1665
1662
|
y: 100 + Math.sin(-g) * 160
|
|
@@ -1685,23 +1682,23 @@ function ct({ left: e, right: t, "data-testid": r }) {
|
|
|
1685
1682
|
6
|
|
1686
1683
|
]), r.fill(), r.stroke(), r.strokeStyle = h(u.t2, .35 * i), r.lineWidth = 1, [-90 / 3, 90 / 3].forEach((e) => {
|
|
1687
1684
|
r.beginPath(), r.moveTo(v.x + e, v.y + 4), r.lineTo(v.x + e, C), r.stroke();
|
|
1688
|
-
}), i > .5 && (r.globalAlpha = Math.min(1, (i - .5) / .5), r.font = p.font, r.fillStyle = u.amber, r.textAlign = "center", r.fillText(t.label, v.x, C + S + 18), r.font = f.font, r.fillStyle = f.color, r.fillText("Submitted", v.x, C + S + 32), r.fillText(`${t.count} quotations`, v.x, C + S + 44), r.globalAlpha = 1), i > .85 && Math.abs(c) > 1 && (r.globalAlpha = Math.min(1, (i - .85) / .15) * .6, r.font = m.font, r.fillStyle = m.color, r.textAlign = "center", r.fillText(`${Math.abs(c).toFixed(1)}° tilt toward accepted`, a,
|
|
1685
|
+
}), i > .5 && (r.globalAlpha = Math.min(1, (i - .5) / .5), r.font = p.font, r.fillStyle = u.amber, r.textAlign = "center", r.fillText(t.label, v.x, C + S + 18), r.font = f.font, r.fillStyle = f.color, r.fillText("Submitted", v.x, C + S + 32), r.fillText(`${t.count} quotations`, v.x, C + S + 44), r.globalAlpha = 1), i > .85 && Math.abs(c) > 1 && (r.globalAlpha = Math.min(1, (i - .85) / .15) * .6, r.font = m.font, r.fillStyle = m.color, r.textAlign = "center", r.fillText(`${Math.abs(c).toFixed(1)}° tilt toward accepted`, a, ot - 12), r.globalAlpha = 1), l = requestAnimationFrame(d);
|
|
1689
1686
|
};
|
|
1690
1687
|
return d(), () => cancelAnimationFrame(l);
|
|
1691
1688
|
}, [e, t]), /* @__PURE__ */ s("div", {
|
|
1692
1689
|
"data-testid": r,
|
|
1693
1690
|
style: {
|
|
1694
1691
|
position: "relative",
|
|
1695
|
-
width:
|
|
1696
|
-
height:
|
|
1692
|
+
width: at,
|
|
1693
|
+
height: ot
|
|
1697
1694
|
},
|
|
1698
1695
|
children: /* @__PURE__ */ s("canvas", {
|
|
1699
1696
|
ref: i,
|
|
1700
1697
|
role: "img",
|
|
1701
1698
|
"aria-label": "Quotation balance — accepted vs submitted quotation value",
|
|
1702
1699
|
style: {
|
|
1703
|
-
width:
|
|
1704
|
-
height:
|
|
1700
|
+
width: at,
|
|
1701
|
+
height: ot,
|
|
1705
1702
|
display: "block"
|
|
1706
1703
|
}
|
|
1707
1704
|
})
|
|
@@ -1709,25 +1706,25 @@ function ct({ left: e, right: t, "data-testid": r }) {
|
|
|
1709
1706
|
}
|
|
1710
1707
|
//#endregion
|
|
1711
1708
|
//#region src/components/areaLineChart/AreaLineChart.tsx
|
|
1712
|
-
var
|
|
1713
|
-
function
|
|
1709
|
+
var ct = 680, G = 280;
|
|
1710
|
+
function lt({ points: e = [], "data-testid": t }) {
|
|
1714
1711
|
let r = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), { hoveredRef: d, tooltip: p, hitZonesRef: m } = w(r, {
|
|
1715
|
-
width:
|
|
1716
|
-
height:
|
|
1712
|
+
width: ct,
|
|
1713
|
+
height: G
|
|
1717
1714
|
}), g = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
1718
1715
|
return n(() => {
|
|
1719
1716
|
let e = r.current;
|
|
1720
1717
|
if (!e) return;
|
|
1721
|
-
let t = v(e,
|
|
1718
|
+
let t = v(e, ct, G);
|
|
1722
1719
|
l.current = 0;
|
|
1723
|
-
let n =
|
|
1720
|
+
let n = ct - 54 - 28, i = G - 30 - 54, a = Math.max(...g.map((e) => e.count), 1), s = g.length, c = s > 1 ? n / (s - 1) : n, p = g.map((e, t) => ({
|
|
1724
1721
|
x: 54 + t * c,
|
|
1725
1722
|
y: 30 + i - e.count / a * i,
|
|
1726
1723
|
point: e
|
|
1727
1724
|
})), _, b = () => {
|
|
1728
1725
|
l.current++;
|
|
1729
1726
|
let e = l.current;
|
|
1730
|
-
t.clearRect(0, 0,
|
|
1727
|
+
t.clearRect(0, 0, ct, G), t.letterSpacing = f.letterSpacing;
|
|
1731
1728
|
let r = D(Math.min(e / 72, 1));
|
|
1732
1729
|
N(o.current, d.current), m.current = [], [
|
|
1733
1730
|
.25,
|
|
@@ -1737,7 +1734,7 @@ function ut({ points: e = [], "data-testid": t }) {
|
|
|
1737
1734
|
].forEach((e) => {
|
|
1738
1735
|
let r = 30 + i - e * i;
|
|
1739
1736
|
t.strokeStyle = h(u.bd, .18), t.lineWidth = 1, t.setLineDash([3, 5]), t.beginPath(), t.moveTo(54, r), t.lineTo(54 + n, r), t.stroke(), t.setLineDash([]), t.font = f.font, t.fillStyle = f.color, t.textAlign = "right", t.fillText(String(Math.round(a * e)), 48, r + 3);
|
|
1740
|
-
}), t.save(), t.translate(12, 30 + i / 2), t.rotate(-Math.PI / 2), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Submissions", 0, 0), t.restore(), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Week", 54 + n / 2,
|
|
1737
|
+
}), t.save(), t.translate(12, 30 + i / 2), t.rotate(-Math.PI / 2), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Submissions", 0, 0), t.restore(), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Week", 54 + n / 2, G - 6), t.strokeStyle = h(u.bd, .3), t.lineWidth = 1, t.setLineDash([]), t.beginPath(), t.moveTo(54, 30 + i), t.lineTo(54 + n, 30 + i), t.stroke();
|
|
1741
1738
|
let c = r * (s - 1), g = Math.floor(c) + 1;
|
|
1742
1739
|
if (g >= 2) {
|
|
1743
1740
|
t.beginPath(), t.moveTo(p[0].x, 30 + i), t.lineTo(p[0].x, p[0].y);
|
|
@@ -1765,13 +1762,13 @@ function ut({ points: e = [], "data-testid": t }) {
|
|
|
1765
1762
|
color: u.blue
|
|
1766
1763
|
}), s > 0 && S(t, e.x, 30, 30 + i, h(u.blue, .15 * s));
|
|
1767
1764
|
let c = e.point.count === a;
|
|
1768
|
-
(s > 0 || c) && y(t, e.x, e.y, 14, u.blue, (c ? .3 : 0) + s * .25), t.beginPath(), t.arc(e.x, e.y, s > 0 ? 5 : 3.5, 0, Math.PI * 2), t.fillStyle = h(u.blue, s > 0 ? 1 : .8), t.fill(), (s > 0 || c) && (t.font = f.font, t.fillStyle = u.blue, t.textAlign = "center", t.fillText(String(e.point.count), e.x, e.y - 10)), t.font = f.font, t.fillStyle = s > 0 ? u.blue : f.color, t.textAlign = "center", t.fillText(e.point.week, e.x,
|
|
1765
|
+
(s > 0 || c) && y(t, e.x, e.y, 14, u.blue, (c ? .3 : 0) + s * .25), t.beginPath(), t.arc(e.x, e.y, s > 0 ? 5 : 3.5, 0, Math.PI * 2), t.fillStyle = h(u.blue, s > 0 ? 1 : .8), t.fill(), (s > 0 || c) && (t.font = f.font, t.fillStyle = u.blue, t.textAlign = "center", t.fillText(String(e.point.count), e.x, e.y - 10)), t.font = f.font, t.fillStyle = s > 0 ? u.blue : f.color, t.textAlign = "center", t.fillText(e.point.week, e.x, G - 54 + 14);
|
|
1769
1766
|
}), _ = requestAnimationFrame(b);
|
|
1770
1767
|
};
|
|
1771
1768
|
return b(), () => cancelAnimationFrame(_);
|
|
1772
1769
|
}, [g]), g.length < 2 ? /* @__PURE__ */ s(I, {
|
|
1773
|
-
width:
|
|
1774
|
-
height:
|
|
1770
|
+
width: ct,
|
|
1771
|
+
height: G,
|
|
1775
1772
|
"data-testid": t
|
|
1776
1773
|
}) : /* @__PURE__ */ s("div", {
|
|
1777
1774
|
"data-testid": t,
|
|
@@ -1783,64 +1780,64 @@ function ut({ points: e = [], "data-testid": t }) {
|
|
|
1783
1780
|
children: /* @__PURE__ */ c("div", {
|
|
1784
1781
|
style: {
|
|
1785
1782
|
position: "relative",
|
|
1786
|
-
width:
|
|
1787
|
-
height:
|
|
1783
|
+
width: ct,
|
|
1784
|
+
height: G
|
|
1788
1785
|
},
|
|
1789
1786
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1790
1787
|
ref: r,
|
|
1791
1788
|
role: "img",
|
|
1792
1789
|
"aria-label": "Trend chart — count over time",
|
|
1793
1790
|
style: {
|
|
1794
|
-
width:
|
|
1795
|
-
height:
|
|
1791
|
+
width: ct,
|
|
1792
|
+
height: G,
|
|
1796
1793
|
display: "block"
|
|
1797
1794
|
}
|
|
1798
1795
|
}), /* @__PURE__ */ s(C, {
|
|
1799
1796
|
...p,
|
|
1800
|
-
parentW:
|
|
1801
|
-
parentH:
|
|
1797
|
+
parentW: ct,
|
|
1798
|
+
parentH: G
|
|
1802
1799
|
})]
|
|
1803
1800
|
})
|
|
1804
1801
|
});
|
|
1805
1802
|
}
|
|
1806
1803
|
//#endregion
|
|
1807
1804
|
//#region src/components/trend/Trend.tsx
|
|
1808
|
-
var
|
|
1809
|
-
function
|
|
1805
|
+
var ut = 680, K = 280, dt = 54, ft = 28, pt = 64, mt = f.font, ht = 12;
|
|
1806
|
+
function gt({ points: e = [], "data-testid": t }) {
|
|
1810
1807
|
let r = a(null), o = a(null), l = a(0), d = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), p = i(() => {
|
|
1811
|
-
if (d.length <= 1) return
|
|
1808
|
+
if (d.length <= 1) return pt;
|
|
1812
1809
|
let e = document.createElement("canvas").getContext("2d");
|
|
1813
|
-
if (!e) return
|
|
1814
|
-
e.font =
|
|
1810
|
+
if (!e) return pt;
|
|
1811
|
+
e.font = mt;
|
|
1815
1812
|
let t = Math.max(...d.map((t) => e.measureText(t.week).width));
|
|
1816
|
-
return Math.max(
|
|
1817
|
-
}, [d]), m = Math.round(p / 2), g = Math.max(
|
|
1813
|
+
return Math.max(pt, t + ht);
|
|
1814
|
+
}, [d]), m = Math.round(p / 2), g = Math.max(ut - dt, ft + m + Math.max(0, d.length - 1) * p), { tooltip: _, hitZonesRef: y } = w(r, {
|
|
1818
1815
|
width: g,
|
|
1819
|
-
height:
|
|
1816
|
+
height: K
|
|
1820
1817
|
});
|
|
1821
1818
|
return n(() => {
|
|
1822
1819
|
let e = r.current;
|
|
1823
1820
|
if (!e) return;
|
|
1824
|
-
let t = v(e, g,
|
|
1821
|
+
let t = v(e, g, K), n = o.current ? v(o.current, dt, K) : null;
|
|
1825
1822
|
l.current = 0;
|
|
1826
|
-
let i = g -
|
|
1823
|
+
let i = g - ft, a = K - 30 - 54, s = Math.max(...d.map((e) => e.count), 1), c = d.length, _ = c > 1 ? Math.max((i - m) / (c - 1), p) : i - m, b = d.map((e, t) => ({
|
|
1827
1824
|
x: m + t * _,
|
|
1828
1825
|
y: 30 + a - e.count / s * a,
|
|
1829
1826
|
point: e
|
|
1830
1827
|
}));
|
|
1831
|
-
n && (n.clearRect(0, 0,
|
|
1828
|
+
n && (n.clearRect(0, 0, dt, K), n.letterSpacing = f.letterSpacing, [
|
|
1832
1829
|
.25,
|
|
1833
1830
|
.5,
|
|
1834
1831
|
.75,
|
|
1835
1832
|
1
|
|
1836
1833
|
].forEach((e) => {
|
|
1837
1834
|
let t = 30 + a - e * a;
|
|
1838
|
-
n.font = f.font, n.fillStyle = f.color, n.textAlign = "right", n.fillText(String(Math.round(s * e)),
|
|
1835
|
+
n.font = f.font, n.fillStyle = f.color, n.textAlign = "right", n.fillText(String(Math.round(s * e)), dt - 6, t + 3);
|
|
1839
1836
|
}), n.save(), n.translate(12, 30 + a / 2), n.rotate(-Math.PI / 2), n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText("Count", 0, 0), n.restore());
|
|
1840
1837
|
let x, S = () => {
|
|
1841
1838
|
l.current++;
|
|
1842
1839
|
let e = Math.min(l.current / 72, 1), n = D(e);
|
|
1843
|
-
t.clearRect(0, 0, g,
|
|
1840
|
+
t.clearRect(0, 0, g, K), t.letterSpacing = f.letterSpacing, [
|
|
1844
1841
|
.25,
|
|
1845
1842
|
.5,
|
|
1846
1843
|
.75,
|
|
@@ -1848,7 +1845,7 @@ function _t({ points: e = [], "data-testid": t }) {
|
|
|
1848
1845
|
].forEach((e) => {
|
|
1849
1846
|
let n = 30 + a - e * a;
|
|
1850
1847
|
t.strokeStyle = h(u.bd, .18), t.lineWidth = 1, t.setLineDash([3, 5]), t.beginPath(), t.moveTo(0, n), t.lineTo(i, n), t.stroke(), t.setLineDash([]);
|
|
1851
|
-
}), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Period", m + (i - m) / 2,
|
|
1848
|
+
}), t.font = f.font, t.fillStyle = f.color, t.textAlign = "center", t.fillText("Period", m + (i - m) / 2, K - 6), t.strokeStyle = h(u.bd, .3), t.lineWidth = 1, t.beginPath(), t.moveTo(m, 30 + a), t.lineTo(i, 30 + a), t.stroke();
|
|
1852
1849
|
let r = n * (c - 1), o = Math.floor(r) + 1;
|
|
1853
1850
|
if (o >= 2) {
|
|
1854
1851
|
t.beginPath(), t.moveTo(b[0].x, 30 + a), t.lineTo(b[0].x, b[0].y);
|
|
@@ -1871,7 +1868,7 @@ function _t({ points: e = [], "data-testid": t }) {
|
|
|
1871
1868
|
value: `${e.point.count} submissions`,
|
|
1872
1869
|
sublabel: `£${e.point.value}M value`,
|
|
1873
1870
|
color: u.blue
|
|
1874
|
-
}), t.beginPath(), t.arc(e.x, e.y, 3.5, 0, Math.PI * 2), t.fillStyle = h(u.blue, .8), t.fill(), t.font =
|
|
1871
|
+
}), t.beginPath(), t.arc(e.x, e.y, 3.5, 0, Math.PI * 2), t.fillStyle = h(u.blue, .8), t.fill(), t.font = mt, t.fillStyle = f.color, t.textAlign = "center", t.fillText(e.point.week, e.x, K - 54 + 14));
|
|
1875
1872
|
}), e < 1 && (x = requestAnimationFrame(S));
|
|
1876
1873
|
};
|
|
1877
1874
|
return S(), () => cancelAnimationFrame(x);
|
|
@@ -1881,8 +1878,8 @@ function _t({ points: e = [], "data-testid": t }) {
|
|
|
1881
1878
|
p,
|
|
1882
1879
|
y
|
|
1883
1880
|
]), d.length < 2 ? /* @__PURE__ */ s(I, {
|
|
1884
|
-
width:
|
|
1885
|
-
height:
|
|
1881
|
+
width: ut,
|
|
1882
|
+
height: K,
|
|
1886
1883
|
"data-testid": t
|
|
1887
1884
|
}) : /* @__PURE__ */ c("div", {
|
|
1888
1885
|
"data-testid": t,
|
|
@@ -1895,8 +1892,8 @@ function _t({ points: e = [], "data-testid": t }) {
|
|
|
1895
1892
|
ref: o,
|
|
1896
1893
|
"aria-hidden": "true",
|
|
1897
1894
|
style: {
|
|
1898
|
-
width:
|
|
1899
|
-
height:
|
|
1895
|
+
width: dt,
|
|
1896
|
+
height: K,
|
|
1900
1897
|
display: "block",
|
|
1901
1898
|
flexShrink: 0
|
|
1902
1899
|
}
|
|
@@ -1910,7 +1907,7 @@ function _t({ points: e = [], "data-testid": t }) {
|
|
|
1910
1907
|
style: {
|
|
1911
1908
|
position: "relative",
|
|
1912
1909
|
width: g,
|
|
1913
|
-
height:
|
|
1910
|
+
height: K
|
|
1914
1911
|
},
|
|
1915
1912
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1916
1913
|
ref: r,
|
|
@@ -1918,13 +1915,13 @@ function _t({ points: e = [], "data-testid": t }) {
|
|
|
1918
1915
|
"aria-label": "Trend chart — count over time",
|
|
1919
1916
|
style: {
|
|
1920
1917
|
width: g,
|
|
1921
|
-
height:
|
|
1918
|
+
height: K,
|
|
1922
1919
|
display: "block"
|
|
1923
1920
|
}
|
|
1924
1921
|
}), /* @__PURE__ */ s(C, {
|
|
1925
1922
|
..._,
|
|
1926
1923
|
parentW: g,
|
|
1927
|
-
parentH:
|
|
1924
|
+
parentH: K
|
|
1928
1925
|
})]
|
|
1929
1926
|
})
|
|
1930
1927
|
})]
|
|
@@ -1932,38 +1929,38 @@ function _t({ points: e = [], "data-testid": t }) {
|
|
|
1932
1929
|
}
|
|
1933
1930
|
//#endregion
|
|
1934
1931
|
//#region src/components/proportionalBandChart/ProportionalBandChart.tsx
|
|
1935
|
-
var
|
|
1936
|
-
function
|
|
1932
|
+
var q = 680, _t = 240;
|
|
1933
|
+
function vt(e, t, n) {
|
|
1937
1934
|
if (e.measureText(t).width <= n) return t;
|
|
1938
1935
|
let r = t;
|
|
1939
1936
|
for (; r.length > 0 && e.measureText(`${r}…`).width > n;) r = r.slice(0, -1);
|
|
1940
1937
|
return `${r}…`;
|
|
1941
1938
|
}
|
|
1942
|
-
var
|
|
1939
|
+
var yt = {
|
|
1943
1940
|
Critical: u.red,
|
|
1944
1941
|
High: u.orange,
|
|
1945
1942
|
Medium: u.amber,
|
|
1946
1943
|
Low: u.green
|
|
1947
1944
|
};
|
|
1948
|
-
function
|
|
1945
|
+
function bt({ severities: e = [], "data-testid": t }) {
|
|
1949
1946
|
let r = a(null), o = a(/* @__PURE__ */ new Map()), l = a(0), { hoveredRef: d, tooltip: m, hitZonesRef: g } = w(r, {
|
|
1950
|
-
width:
|
|
1951
|
-
height:
|
|
1947
|
+
width: q,
|
|
1948
|
+
height: _t
|
|
1952
1949
|
}), _ = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
1953
1950
|
return n(() => {
|
|
1954
1951
|
let e = r.current;
|
|
1955
1952
|
if (!e) return;
|
|
1956
|
-
let t = v(e,
|
|
1953
|
+
let t = v(e, q, _t);
|
|
1957
1954
|
l.current = 0;
|
|
1958
|
-
let n = _.reduce((e, t) => e + t.count, 0), i =
|
|
1955
|
+
let n = _.reduce((e, t) => e + t.count, 0), i = q - 28 - 28, a = _t - 50 - 52, s = _.map((e) => e.count / n * i), c, m = () => {
|
|
1959
1956
|
l.current++;
|
|
1960
1957
|
let e = l.current;
|
|
1961
|
-
t.clearRect(0, 0,
|
|
1958
|
+
t.clearRect(0, 0, q, _t), t.letterSpacing = f.letterSpacing;
|
|
1962
1959
|
let r = O(Math.min(e / 60, 1));
|
|
1963
|
-
N(o.current, d.current), g.current = [], t.strokeStyle = h(u.bd, .2), t.lineWidth = 1, t.beginPath(), t.rect(28, 50, i, a), t.stroke(), t.strokeStyle = h(u.t2, .15), t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(
|
|
1960
|
+
N(o.current, d.current), g.current = [], t.strokeStyle = h(u.bd, .2), t.lineWidth = 1, t.beginPath(), t.rect(28, 50, i, a), t.stroke(), t.strokeStyle = h(u.t2, .15), t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(q / 2, 50), t.lineTo(q / 2, 50 + a), t.stroke(), t.setLineDash([]);
|
|
1964
1961
|
let v = 28;
|
|
1965
1962
|
_.forEach((e, i) => {
|
|
1966
|
-
let c =
|
|
1963
|
+
let c = yt[e.severity] ?? u.blue, l = s[i];
|
|
1967
1964
|
l * r;
|
|
1968
1965
|
let d = o.current.get(e.severity) ?? 0, m = v + l / 2, _ = l * .85;
|
|
1969
1966
|
m - _ / 2;
|
|
@@ -1975,7 +1972,7 @@ function xt({ severities: e = [], "data-testid": t }) {
|
|
|
1975
1972
|
color: c
|
|
1976
1973
|
}), r > .5) {
|
|
1977
1974
|
let i = Math.min(1, (r - .5) / .5), o = v + l / 2;
|
|
1978
|
-
t.globalAlpha = i, t.font = f.font, t.fillStyle = d > 0 ? c : h(c, .9), t.textAlign = "center", t.fillText(
|
|
1975
|
+
t.globalAlpha = i, t.font = f.font, t.fillStyle = d > 0 ? c : h(c, .9), t.textAlign = "center", t.fillText(vt(t, e.severity, l - 12), o, 38), t.font = p.font, t.fillStyle = d > 0 ? u.t1 : h(u.t1, .85), t.fillText(String(e.count), o, 50 + a / 2 + 6), t.font = f.font, t.fillStyle = d > 0 ? c : f.color, t.fillText(`${Math.round(e.count / n * 100)}%`, o, 50 + a + 18), t.globalAlpha = 1;
|
|
1979
1976
|
}
|
|
1980
1977
|
v += l;
|
|
1981
1978
|
});
|
|
@@ -1984,64 +1981,64 @@ function xt({ severities: e = [], "data-testid": t }) {
|
|
|
1984
1981
|
};
|
|
1985
1982
|
return m(), () => cancelAnimationFrame(c);
|
|
1986
1983
|
}, [_]), _.length === 0 ? /* @__PURE__ */ s(I, {
|
|
1987
|
-
width:
|
|
1988
|
-
height:
|
|
1984
|
+
width: q,
|
|
1985
|
+
height: _t,
|
|
1989
1986
|
"data-testid": t
|
|
1990
1987
|
}) : /* @__PURE__ */ c("div", {
|
|
1991
1988
|
"data-testid": t,
|
|
1992
1989
|
style: {
|
|
1993
1990
|
position: "relative",
|
|
1994
|
-
width:
|
|
1995
|
-
height:
|
|
1991
|
+
width: q,
|
|
1992
|
+
height: _t
|
|
1996
1993
|
},
|
|
1997
1994
|
children: [/* @__PURE__ */ s("canvas", {
|
|
1998
1995
|
ref: r,
|
|
1999
1996
|
role: "img",
|
|
2000
1997
|
"aria-label": "Early Warning severity distribution — prism spectrum bands",
|
|
2001
1998
|
style: {
|
|
2002
|
-
width:
|
|
2003
|
-
height:
|
|
1999
|
+
width: q,
|
|
2000
|
+
height: _t,
|
|
2004
2001
|
display: "block"
|
|
2005
2002
|
}
|
|
2006
2003
|
}), /* @__PURE__ */ s(C, {
|
|
2007
2004
|
...m,
|
|
2008
|
-
parentW:
|
|
2009
|
-
parentH:
|
|
2005
|
+
parentW: q,
|
|
2006
|
+
parentH: _t
|
|
2010
2007
|
})]
|
|
2011
2008
|
});
|
|
2012
2009
|
}
|
|
2013
2010
|
//#endregion
|
|
2014
2011
|
//#region src/components/hubAndSpokeRadialChart/HubAndSpokeRadialChart.tsx
|
|
2015
|
-
var
|
|
2012
|
+
var J = 460, Y = 300, xt = {
|
|
2016
2013
|
Open: u.red,
|
|
2017
2014
|
Submitted: u.amber,
|
|
2018
2015
|
Closed: u.green
|
|
2019
2016
|
};
|
|
2020
|
-
function
|
|
2017
|
+
function St({ segments: e = [], title: t, "data-testid": r }) {
|
|
2021
2018
|
let o = a(null), l = a(0), d = a(/* @__PURE__ */ new Map()), { hoveredRef: m, tooltip: g, hitZonesRef: _ } = w(o, {
|
|
2022
|
-
width:
|
|
2023
|
-
height:
|
|
2019
|
+
width: J,
|
|
2020
|
+
height: Y
|
|
2024
2021
|
}), S = i(() => e.filter((e) => typeof e == "object" && !!e), [e]);
|
|
2025
2022
|
return n(() => {
|
|
2026
2023
|
let e = o.current;
|
|
2027
2024
|
if (!e) return;
|
|
2028
|
-
let t = v(e,
|
|
2025
|
+
let t = v(e, J, Y);
|
|
2029
2026
|
l.current = 0;
|
|
2030
|
-
let n =
|
|
2027
|
+
let n = J * .5, r = Y * .54, i = J * .22, a = S.reduce((e, t) => e + t.count, 0), s = Math.max(...S.map((e) => e.count), 1), c, g = () => {
|
|
2031
2028
|
l.current++;
|
|
2032
2029
|
let e = l.current;
|
|
2033
|
-
t.clearRect(0, 0,
|
|
2030
|
+
t.clearRect(0, 0, J, Y), t.letterSpacing = f.letterSpacing, _.current = [], d.current.forEach((e, t) => {
|
|
2034
2031
|
let n = t === m.current ? 1 : 0, r = e + (n - e) * .12;
|
|
2035
2032
|
Math.abs(r - n) < .005 ? n === 0 ? d.current.delete(t) : d.current.set(t, 1) : d.current.set(t, r);
|
|
2036
|
-
}), m.current && !d.current.has(m.current) && d.current.set(m.current, 0), b(t,
|
|
2037
|
-
let c = o / 3 * Math.PI * 2 - Math.PI / 2, l = n + Math.cos(c) * i, d = r + Math.sin(c) * i, f =
|
|
2033
|
+
}), m.current && !d.current.has(m.current) && d.current.set(m.current, 0), b(t, J, Y, e, 40, h(u.blue, .04)), S.forEach((a, o) => {
|
|
2034
|
+
let c = o / 3 * Math.PI * 2 - Math.PI / 2, l = n + Math.cos(c) * i, d = r + Math.sin(c) * i, f = xt[a.status] ?? u.blue, m = 2 + a.count / s * 8;
|
|
2038
2035
|
t.beginPath(), t.moveTo(n, r), t.lineTo(l, d), t.strokeStyle = h(f, .08), t.lineWidth = m * 2, t.stroke(), t.beginPath(), t.moveTo(n, r), t.lineTo(l, d), t.strokeStyle = h(f, .25), t.lineWidth = 1, t.stroke();
|
|
2039
2036
|
let g = (e * .005 + o * .33) % 1, _ = n + (l - n) * g, v = r + (d - r) * g;
|
|
2040
2037
|
y(t, _, v, 6, f, .4), t.beginPath(), t.arc(_, v, 2, 0, Math.PI * 2), t.fillStyle = h(f, .8), t.fill();
|
|
2041
2038
|
let b = (n + l) / 2, x = (r + d) / 2;
|
|
2042
2039
|
t.font = p.font, t.textAlign = "center", t.textBaseline = "middle", t.fillStyle = h(f, .85), t.fillText(String(a.count), b, x);
|
|
2043
2040
|
}), S.forEach((e, o) => {
|
|
2044
|
-
let c = o / 3 * Math.PI * 2 - Math.PI / 2, l = n + Math.cos(c) * i, p = r + Math.sin(c) * i, m =
|
|
2041
|
+
let c = o / 3 * Math.PI * 2 - Math.PI / 2, l = n + Math.cos(c) * i, p = r + Math.sin(c) * i, m = xt[e.status] ?? u.blue, g = 10 + e.count / s * 18, v = d.current.get(e.status) ?? 0;
|
|
2045
2042
|
y(t, l, p, g * 2.5, m, .2 + v * .15);
|
|
2046
2043
|
let b = t.createRadialGradient(l, p - g * .2, 0, l, p, g);
|
|
2047
2044
|
b.addColorStop(0, h(m, .8 + v * .2)), b.addColorStop(1, h(m, .4 + v * .1)), t.beginPath(), t.arc(l, p, g, 0, Math.PI * 2), t.fillStyle = b, t.fill(), t.font = "bold " + f.font, t.textAlign = "center", t.textBaseline = "middle", t.fillStyle = h(u.t1, .9), t.fillText(e.status, l, p), T(_.current, e.status, l, p, g + 6, {
|
|
@@ -2058,41 +2055,41 @@ function wt({ segments: e = [], title: t, "data-testid": r }) {
|
|
|
2058
2055
|
label: "Total EW Status",
|
|
2059
2056
|
value: `${a} Early Warnings`,
|
|
2060
2057
|
color: u.t2
|
|
2061
|
-
}), x(t,
|
|
2058
|
+
}), x(t, J, Y, e, .015), c = requestAnimationFrame(g);
|
|
2062
2059
|
};
|
|
2063
2060
|
return g(), () => cancelAnimationFrame(c);
|
|
2064
2061
|
}, [S, t]), S.length === 0 ? /* @__PURE__ */ s(I, {
|
|
2065
|
-
width:
|
|
2066
|
-
height:
|
|
2062
|
+
width: J,
|
|
2063
|
+
height: Y,
|
|
2067
2064
|
"data-testid": r
|
|
2068
2065
|
}) : /* @__PURE__ */ c("div", {
|
|
2069
2066
|
"data-testid": r,
|
|
2070
2067
|
style: {
|
|
2071
2068
|
position: "relative",
|
|
2072
|
-
width:
|
|
2073
|
-
height:
|
|
2069
|
+
width: J,
|
|
2070
|
+
height: Y
|
|
2074
2071
|
},
|
|
2075
2072
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2076
2073
|
ref: o,
|
|
2077
2074
|
role: "img",
|
|
2078
2075
|
"aria-label": t ?? "EW status arc visualization",
|
|
2079
2076
|
style: {
|
|
2080
|
-
width:
|
|
2081
|
-
height:
|
|
2077
|
+
width: J,
|
|
2078
|
+
height: Y,
|
|
2082
2079
|
display: "block",
|
|
2083
2080
|
borderRadius: 8
|
|
2084
2081
|
}
|
|
2085
2082
|
}), /* @__PURE__ */ s(C, {
|
|
2086
2083
|
...g,
|
|
2087
|
-
parentW:
|
|
2088
|
-
parentH:
|
|
2084
|
+
parentW: J,
|
|
2085
|
+
parentH: Y
|
|
2089
2086
|
})]
|
|
2090
2087
|
});
|
|
2091
2088
|
}
|
|
2092
2089
|
//#endregion
|
|
2093
2090
|
//#region src/components/trendChart/TrendChart.tsx
|
|
2094
|
-
var
|
|
2095
|
-
function
|
|
2091
|
+
var Ct = 280, X = 96;
|
|
2092
|
+
function wt({ points: e = [], className: t, colors: r }) {
|
|
2096
2093
|
let o = a(null), d = a(/* @__PURE__ */ new Map()), f = a(0), p = i(() => e.map(([e, t]) => {
|
|
2097
2094
|
let n = String(t).match(/-?\d+(\.\d+)?/);
|
|
2098
2095
|
return {
|
|
@@ -2100,18 +2097,18 @@ function Et({ points: e = [], className: t, colors: r }) {
|
|
|
2100
2097
|
value: n ? Number(n[0]) : 0
|
|
2101
2098
|
};
|
|
2102
2099
|
}), [e]), { mouseRef: m, hoveredRef: g, tooltip: _, hitZonesRef: b } = w(o, {
|
|
2103
|
-
width:
|
|
2100
|
+
width: Ct,
|
|
2104
2101
|
height: X
|
|
2105
2102
|
});
|
|
2106
2103
|
return n(() => {
|
|
2107
2104
|
let e = o.current;
|
|
2108
2105
|
if (!e) return;
|
|
2109
|
-
let t = v(e,
|
|
2106
|
+
let t = v(e, Ct, X);
|
|
2110
2107
|
f.current = 0;
|
|
2111
2108
|
let n = r?.line ?? u.blue, i = r?.point ?? u.blue, a = r?.axisLine ?? u.bd, s, c = () => {
|
|
2112
2109
|
f.current++;
|
|
2113
2110
|
let e = f.current;
|
|
2114
|
-
if (t.clearRect(0, 0,
|
|
2111
|
+
if (t.clearRect(0, 0, Ct, X), p.length < 2) {
|
|
2115
2112
|
s = requestAnimationFrame(c);
|
|
2116
2113
|
return;
|
|
2117
2114
|
}
|
|
@@ -2120,8 +2117,8 @@ function Et({ points: e = [], className: t, colors: r }) {
|
|
|
2120
2117
|
right: 12,
|
|
2121
2118
|
top: 16,
|
|
2122
2119
|
bottom: 20
|
|
2123
|
-
}, o =
|
|
2124
|
-
if (N(d.current, g.current), b.current = [], t.strokeStyle = h(a, .3), t.lineWidth = .5, t.setLineDash([]), t.beginPath(), t.moveTo(r.left, X - r.bottom), t.lineTo(
|
|
2120
|
+
}, o = Ct - r.left - r.right, l = X - r.top - r.bottom, _ = p.map((e) => e.value), v = Math.min(..._), x = Math.max(..._) - v || 1, C = (e) => r.left + e / (p.length - 1) * o, w = (e) => r.top + (1 - (e - v) / x) * l, E = 1 - (1 - Math.min(e / 48, 1)) ** 3, D = Math.max(2, Math.floor(E * p.length));
|
|
2121
|
+
if (N(d.current, g.current), b.current = [], t.strokeStyle = h(a, .3), t.lineWidth = .5, t.setLineDash([]), t.beginPath(), t.moveTo(r.left, X - r.bottom), t.lineTo(Ct - r.right, X - r.bottom), t.stroke(), t.font = "9px 'JetBrains Mono', monospace", t.fillStyle = h(u.t4, .9), t.textAlign = "center", p.forEach((e, n) => {
|
|
2125
2122
|
t.fillText(e.label.replace("Day ", "D"), C(n), X - 4);
|
|
2126
2123
|
}), m.current.over && g.current) {
|
|
2127
2124
|
let e = parseInt(g.current.split("-")[1]);
|
|
@@ -2158,7 +2155,7 @@ function Et({ points: e = [], className: t, colors: r }) {
|
|
|
2158
2155
|
children: /* @__PURE__ */ c("div", {
|
|
2159
2156
|
style: {
|
|
2160
2157
|
position: "relative",
|
|
2161
|
-
width:
|
|
2158
|
+
width: Ct,
|
|
2162
2159
|
height: X
|
|
2163
2160
|
},
|
|
2164
2161
|
children: [/* @__PURE__ */ s("canvas", {
|
|
@@ -2166,14 +2163,14 @@ function Et({ points: e = [], className: t, colors: r }) {
|
|
|
2166
2163
|
role: "img",
|
|
2167
2164
|
"aria-label": "trend chart",
|
|
2168
2165
|
style: {
|
|
2169
|
-
width:
|
|
2166
|
+
width: Ct,
|
|
2170
2167
|
height: X,
|
|
2171
2168
|
display: "block",
|
|
2172
2169
|
borderRadius: 8
|
|
2173
2170
|
}
|
|
2174
2171
|
}), /* @__PURE__ */ s(C, {
|
|
2175
2172
|
..._,
|
|
2176
|
-
parentW:
|
|
2173
|
+
parentW: Ct,
|
|
2177
2174
|
parentH: X
|
|
2178
2175
|
})]
|
|
2179
2176
|
})
|
|
@@ -2181,21 +2178,21 @@ function Et({ points: e = [], className: t, colors: r }) {
|
|
|
2181
2178
|
}
|
|
2182
2179
|
//#endregion
|
|
2183
2180
|
//#region src/components/segmentedSplitBarChart/SegmentedSplitBarChart.tsx
|
|
2184
|
-
var
|
|
2185
|
-
function
|
|
2186
|
-
let r = a(null), l = a(/* @__PURE__ */ new Map()), d = a(0), [g, _] = o(!1), b = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), x = i(() => g ? b : b.slice(0,
|
|
2187
|
-
width:
|
|
2181
|
+
var Tt = 680, Et = 8, Dt = 26, Ot = 14, kt = 16, At = 32;
|
|
2182
|
+
function jt({ items: e = [], "data-testid": t }) {
|
|
2183
|
+
let r = a(null), l = a(/* @__PURE__ */ new Map()), d = a(0), [g, _] = o(!1), b = i(() => e.filter((e) => typeof e == "object" && !!e), [e]), x = i(() => g ? b : b.slice(0, Et), [b, g]), S = kt + At + x.length * (Dt + Ot) - Ot, { hoveredRef: T, tooltip: D, hitZonesRef: k } = w(r, {
|
|
2184
|
+
width: Tt,
|
|
2188
2185
|
height: S
|
|
2189
2186
|
});
|
|
2190
2187
|
return n(() => {
|
|
2191
2188
|
let e = r.current;
|
|
2192
2189
|
if (!e) return;
|
|
2193
|
-
let t = v(e,
|
|
2190
|
+
let t = v(e, Tt, S);
|
|
2194
2191
|
d.current = 0;
|
|
2195
|
-
let n =
|
|
2192
|
+
let n = kt, i = At, a = Dt, o = Ot, s = Tt - 60 - 28, c = Math.max(...x.map((e) => (e.implemented ?? 0) + (e.unimplemented ?? 0))), g = x.length * (a + o) - o, _ = n + (S - n - i - g) / 2, b, C = () => {
|
|
2196
2193
|
d.current++;
|
|
2197
2194
|
let e = d.current;
|
|
2198
|
-
t.clearRect(0, 0,
|
|
2195
|
+
t.clearRect(0, 0, Tt, S);
|
|
2199
2196
|
let n = O(Math.min(e / 60, 1));
|
|
2200
2197
|
N(l.current, T.current), k.current = [], x.forEach((e, r) => {
|
|
2201
2198
|
let i = M(n, r, x.length, O), d = _ + r * (a + o), m = (e.implemented ?? 0) + (e.unimplemented ?? 0), g = (e.implemented ?? 0) / c * s * i, v = (e.unimplemented ?? 0) / c * s * i, b = `${e.id}-impl`, S = `${e.id}-un`, C = l.current.get(b) ?? 0, w = l.current.get(S) ?? 0;
|
|
@@ -2226,16 +2223,16 @@ function Nt({ items: e = [], "data-testid": t }) {
|
|
|
2226
2223
|
};
|
|
2227
2224
|
return C(), () => cancelAnimationFrame(b);
|
|
2228
2225
|
}, [x, S]), b.length === 0 ? /* @__PURE__ */ s(I, {
|
|
2229
|
-
width:
|
|
2226
|
+
width: Tt,
|
|
2230
2227
|
height: 160,
|
|
2231
2228
|
"data-testid": t
|
|
2232
2229
|
}) : /* @__PURE__ */ c("div", {
|
|
2233
2230
|
"data-testid": t,
|
|
2234
|
-
style: { width:
|
|
2231
|
+
style: { width: Tt },
|
|
2235
2232
|
children: [/* @__PURE__ */ c("div", {
|
|
2236
2233
|
style: {
|
|
2237
2234
|
position: "relative",
|
|
2238
|
-
width:
|
|
2235
|
+
width: Tt,
|
|
2239
2236
|
height: S
|
|
2240
2237
|
},
|
|
2241
2238
|
children: [/* @__PURE__ */ s("canvas", {
|
|
@@ -2243,16 +2240,16 @@ function Nt({ items: e = [], "data-testid": t }) {
|
|
|
2243
2240
|
role: "img",
|
|
2244
2241
|
"aria-label": "Implemented vs unimplemented variations per contractor — split bar",
|
|
2245
2242
|
style: {
|
|
2246
|
-
width:
|
|
2243
|
+
width: Tt,
|
|
2247
2244
|
height: S,
|
|
2248
2245
|
display: "block"
|
|
2249
2246
|
}
|
|
2250
2247
|
}), /* @__PURE__ */ s(C, {
|
|
2251
2248
|
...D,
|
|
2252
|
-
parentW:
|
|
2249
|
+
parentW: Tt,
|
|
2253
2250
|
parentH: S
|
|
2254
2251
|
})]
|
|
2255
|
-
}), b.length >
|
|
2252
|
+
}), b.length > Et && /* @__PURE__ */ s("div", {
|
|
2256
2253
|
style: { marginTop: 8 },
|
|
2257
2254
|
children: /* @__PURE__ */ s(ae, {
|
|
2258
2255
|
expanded: g,
|
|
@@ -2263,18 +2260,18 @@ function Nt({ items: e = [], "data-testid": t }) {
|
|
|
2263
2260
|
}
|
|
2264
2261
|
//#endregion
|
|
2265
2262
|
//#region src/components/weeklyFlow/WeeklyFlow.tsx
|
|
2266
|
-
var
|
|
2267
|
-
function
|
|
2263
|
+
var Mt = 800, Nt = 360;
|
|
2264
|
+
function Pt({ items: e = [], "data-testid": t }) {
|
|
2268
2265
|
let r = a(null), i = a(/* @__PURE__ */ new Map()), o = a(0), { hoveredRef: l, tooltip: m, hitZonesRef: g } = w(r, {
|
|
2269
|
-
width:
|
|
2270
|
-
height:
|
|
2266
|
+
width: Mt,
|
|
2267
|
+
height: Nt
|
|
2271
2268
|
});
|
|
2272
2269
|
return n(() => {
|
|
2273
2270
|
let t = r.current;
|
|
2274
2271
|
if (!t) return;
|
|
2275
|
-
let n = v(t,
|
|
2272
|
+
let n = v(t, Mt, Nt);
|
|
2276
2273
|
o.current = 0;
|
|
2277
|
-
let a = e.reduce((e, t) => e + (t.base ?? 0), 0), s = e.reduce((e, t) => e + (t.variation ?? 0), 0), c = e.reduce((e, t) => e + (t.total ?? 0), 0), m =
|
|
2274
|
+
let a = e.reduce((e, t) => e + (t.base ?? 0), 0), s = e.reduce((e, t) => e + (t.variation ?? 0), 0), c = e.reduce((e, t) => e + (t.total ?? 0), 0), m = Nt - 20 - 26, _ = m - 6 * (e.length - 1), b = 20, x = e.map((e, t) => {
|
|
2278
2275
|
let n = Math.max(24, (e.total ?? 0) / (c || 1) * _), r = {
|
|
2279
2276
|
x: 100 - 110 / 2,
|
|
2280
2277
|
y: b,
|
|
@@ -2302,16 +2299,16 @@ function It({ items: e = [], "data-testid": t }) {
|
|
|
2302
2299
|
}, j, P = () => {
|
|
2303
2300
|
o.current++;
|
|
2304
2301
|
let t = o.current;
|
|
2305
|
-
n.clearRect(0, 0,
|
|
2302
|
+
n.clearRect(0, 0, Mt, Nt), n.letterSpacing = f.letterSpacing;
|
|
2306
2303
|
let r = D(Math.min(t / 80, 1));
|
|
2307
2304
|
if (N(i.current, l.current), g.current = [], e.forEach((t, o) => {
|
|
2308
2305
|
let c = x[o], l = M(r, o, e.length, D), u = i.current.get(t.id) ?? 0;
|
|
2309
2306
|
if (l < .01) return;
|
|
2310
2307
|
let d = (t.base ?? 0) / (t.total || 1), f = (t.variation ?? 0) / (t.total || 1), p = c.h * d, m = c.h * f, h = c.y + p / 2, g = c.y + p + m / 2, _ = Math.max(2, (t.base ?? 0) / a * C), v = Math.max(2, (t.variation ?? 0) / s * w), y = O.y + e.slice(0, o).reduce((e, t) => e + (t.base ?? 0) / a * C, 0) + _ / 2, b = k.y + e.slice(0, o).reduce((e, t) => e + (t.variation ?? 0) / s * w, 0) + v / 2, S = u * .2 + .18;
|
|
2311
|
-
|
|
2308
|
+
Ft(n, c.x + 110, h, 420 - 110 / 2, y, _ * l, c.color, S), Ft(n, c.x + 110, g, 420 - 110 / 2, b, v * l, c.color, S * .75);
|
|
2312
2309
|
}), r > .3) {
|
|
2313
2310
|
let e = Math.min(1, (r - .3) / .7), t = A.y + a / c * m / 2, i = A.y + m - s / c * m / 2;
|
|
2314
|
-
|
|
2311
|
+
Ft(n, 475, O.cy, 720 - 110 / 2, t, C * e, u.blue, .25 * e), Ft(n, 475, k.cy, 720 - 110 / 2, i, w * e, u.amber, .22 * e);
|
|
2315
2312
|
}
|
|
2316
2313
|
if ([
|
|
2317
2314
|
"Contractors",
|
|
@@ -2323,15 +2320,15 @@ function It({ items: e = [], "data-testid": t }) {
|
|
|
2323
2320
|
420,
|
|
2324
2321
|
720
|
|
2325
2322
|
][t];
|
|
2326
|
-
n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText(e, r,
|
|
2323
|
+
n.font = f.font, n.fillStyle = f.color, n.textAlign = "center", n.fillText(e, r, Nt - 8);
|
|
2327
2324
|
}), e.forEach((t, a) => {
|
|
2328
2325
|
let o = x[a], s = M(r, a, e.length, D), c = i.current.get(t.id) ?? 0;
|
|
2329
2326
|
E(g.current, t.id, o.x, o.y, 110, o.h, {
|
|
2330
2327
|
label: t.name,
|
|
2331
|
-
value:
|
|
2332
|
-
sublabel: `Base
|
|
2328
|
+
value: `${t.totalLabel ?? String(t.total ?? 0)} total commitment`,
|
|
2329
|
+
sublabel: `Base ${t.baseLabel ?? String(t.base ?? 0)} + Variations ${t.variationLabel ?? String(t.variation ?? 0)}`,
|
|
2333
2330
|
color: o.color
|
|
2334
|
-
}), c > 0 && y(n, o.x + 110 / 2, o.cy, 110 * .6, o.color, .12 * c), n.fillStyle = h(o.color, (.3 + c * .15) * s), n.strokeStyle = h(o.color, (.55 + c * .25) * s), n.lineWidth = 1, n.beginPath(), n.roundRect(o.x, o.y, 110 * s, o.h, 4), n.fill(), n.stroke(), s > .6 && o.h >= 24 && (n.globalAlpha = Math.min(1, (s - .6) / .4), n.font = f.font, n.fillStyle = c > 0 ? o.color : h(u.t2, .9), n.textAlign = "center", n.textBaseline = "middle", n.fillText(t.abbreviation ?? t.name.slice(0, 6), o.x + 110 / 2, o.h >= 36 ? o.cy - 5 : o.cy), o.h >= 36 && (n.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = h(u.t3, .8), n.fillText(
|
|
2331
|
+
}), c > 0 && y(n, o.x + 110 / 2, o.cy, 110 * .6, o.color, .12 * c), n.fillStyle = h(o.color, (.3 + c * .15) * s), n.strokeStyle = h(o.color, (.55 + c * .25) * s), n.lineWidth = 1, n.beginPath(), n.roundRect(o.x, o.y, 110 * s, o.h, 4), n.fill(), n.stroke(), s > .6 && o.h >= 24 && (n.globalAlpha = Math.min(1, (s - .6) / .4), n.font = f.font, n.fillStyle = c > 0 ? o.color : h(u.t2, .9), n.textAlign = "center", n.textBaseline = "middle", n.fillText(t.abbreviation ?? t.name.slice(0, 6), o.x + 110 / 2, o.h >= 36 ? o.cy - 5 : o.cy), o.h >= 36 && (n.font = "400 12px 'Satoshi Variable', 'DM Sans', sans-serif", n.fillStyle = h(u.t3, .8), n.fillText(t.totalLabel ?? String(t.total ?? 0), o.x + 110 / 2, o.cy + 7)), n.globalAlpha = 1, n.textBaseline = "alphabetic");
|
|
2335
2332
|
}), r > .2) {
|
|
2336
2333
|
let e = Math.min(1, (r - .2) / .4);
|
|
2337
2334
|
y(n, 420, O.cy, 30, u.blue, .1 * e), n.fillStyle = h(u.blue, .3 * e), n.strokeStyle = h(u.blue, .5 * e), n.lineWidth = 1, n.beginPath(), n.roundRect(O.x, O.y, 110, O.h * e, 4), n.fill(), n.stroke(), n.globalAlpha = e, n.textBaseline = "middle", n.font = f.font, n.fillStyle = u.blue, n.textAlign = "center", n.fillText("Base Value", 420, O.cy - 6), n.font = p.font, n.fillStyle = p.color, n.fillText(`£${a}M`, 420, O.cy + 8), n.globalAlpha = 1, n.textBaseline = "alphabetic", y(n, 420, k.cy, 24, u.amber, .1 * e), n.fillStyle = h(u.amber, .22 * e), n.strokeStyle = h(u.amber, .4 * e), n.beginPath(), n.roundRect(k.x, k.y, 110, k.h * e, 4), n.fill(), n.stroke(), n.globalAlpha = e, n.textBaseline = "middle", n.font = f.font, n.fillStyle = u.amber, n.textAlign = "center", n.fillText("Variations", 420, k.cy - 4), n.font = p.font, n.fillStyle = p.color, n.fillText(`£${s}M`, 420, k.cy + 8), n.globalAlpha = 1, n.textBaseline = "alphabetic";
|
|
@@ -2347,33 +2344,33 @@ function It({ items: e = [], "data-testid": t }) {
|
|
|
2347
2344
|
"data-testid": t,
|
|
2348
2345
|
style: {
|
|
2349
2346
|
position: "relative",
|
|
2350
|
-
width:
|
|
2351
|
-
height:
|
|
2347
|
+
width: Mt,
|
|
2348
|
+
height: Nt
|
|
2352
2349
|
},
|
|
2353
2350
|
children: [/* @__PURE__ */ s("canvas", {
|
|
2354
2351
|
ref: r,
|
|
2355
2352
|
role: "img",
|
|
2356
2353
|
"aria-label": "Weekly report flow — base value and variations per contractor flowing to total commitment",
|
|
2357
2354
|
style: {
|
|
2358
|
-
width:
|
|
2359
|
-
height:
|
|
2355
|
+
width: Mt,
|
|
2356
|
+
height: Nt,
|
|
2360
2357
|
display: "block"
|
|
2361
2358
|
}
|
|
2362
2359
|
}), /* @__PURE__ */ s(C, {
|
|
2363
2360
|
...m,
|
|
2364
|
-
parentW:
|
|
2365
|
-
parentH:
|
|
2361
|
+
parentW: Mt,
|
|
2362
|
+
parentH: Nt
|
|
2366
2363
|
})]
|
|
2367
2364
|
});
|
|
2368
2365
|
}
|
|
2369
|
-
function
|
|
2366
|
+
function Ft(e, t, n, r, i, a, o, s) {
|
|
2370
2367
|
let c = (t + r) / 2;
|
|
2371
2368
|
e.beginPath(), e.moveTo(t, n - a / 2), e.bezierCurveTo(c, n - a / 2, c, i - a / 2, r, i - a / 2), e.lineTo(r, i + a / 2), e.bezierCurveTo(c, i + a / 2, c, n + a / 2, t, n + a / 2), e.closePath(), e.fillStyle = h(o, s), e.fill();
|
|
2372
2369
|
}
|
|
2373
2370
|
//#endregion
|
|
2374
2371
|
//#region src/components/visualizationRenderer/VisualizationRenderer.tsx
|
|
2375
|
-
function
|
|
2376
|
-
return e.type === "line" ? /* @__PURE__ */ s(
|
|
2372
|
+
function It({ config: e, className: t }) {
|
|
2373
|
+
return e.type === "line" ? /* @__PURE__ */ s(Fe, {
|
|
2377
2374
|
rows: e.rows,
|
|
2378
2375
|
className: t
|
|
2379
2376
|
}) : e.type === "area" ? /* @__PURE__ */ s(te, {
|
|
@@ -2382,77 +2379,78 @@ function Rt({ config: e, className: t }) {
|
|
|
2382
2379
|
}) : e.type === "bar" ? /* @__PURE__ */ s(ie, {
|
|
2383
2380
|
rows: e.rows,
|
|
2384
2381
|
className: t
|
|
2385
|
-
}) : e.type === "pie" ? /* @__PURE__ */ s(
|
|
2382
|
+
}) : e.type === "pie" ? /* @__PURE__ */ s(qe, {
|
|
2386
2383
|
rows: e.rows,
|
|
2387
2384
|
variant: "pie",
|
|
2388
2385
|
className: t
|
|
2389
|
-
}) : e.type === "donut" ? /* @__PURE__ */ s(
|
|
2386
|
+
}) : e.type === "donut" ? /* @__PURE__ */ s(qe, {
|
|
2390
2387
|
rows: e.rows,
|
|
2391
2388
|
variant: "donut",
|
|
2392
2389
|
className: t
|
|
2393
|
-
}) : e.type === "sankey" ? /* @__PURE__ */ s(
|
|
2390
|
+
}) : e.type === "sankey" ? /* @__PURE__ */ s(it, {
|
|
2394
2391
|
rows: e.rows,
|
|
2395
2392
|
className: t
|
|
2396
|
-
}) : e.type === "flow" ? /* @__PURE__ */ s(
|
|
2393
|
+
}) : e.type === "flow" ? /* @__PURE__ */ s(rt, {
|
|
2397
2394
|
selectedEntity: e.selectedEntity,
|
|
2398
2395
|
className: t
|
|
2399
|
-
}) : e.type === "trend" ? /* @__PURE__ */ s(
|
|
2396
|
+
}) : e.type === "trend" ? /* @__PURE__ */ s(wt, {
|
|
2400
2397
|
points: e.points,
|
|
2401
2398
|
className: t
|
|
2402
|
-
}) : e.type === "mini-bars" ? /* @__PURE__ */ s(
|
|
2399
|
+
}) : e.type === "mini-bars" ? /* @__PURE__ */ s(Re, {
|
|
2403
2400
|
rows: e.rows,
|
|
2404
2401
|
className: t
|
|
2405
|
-
}) : e.type === "stacked-horizontal-bar-chart" ? /* @__PURE__ */ s(
|
|
2402
|
+
}) : e.type === "stacked-horizontal-bar-chart" ? /* @__PURE__ */ s(Oe, { data: e.data }) : e.type === "multi-metric-constellation-chart" ? /* @__PURE__ */ s(Se, { items: e.items }) : e.type === "progress-race-chart" ? /* @__PURE__ */ s(de, { items: e.items }) : e.type === "hub-and-spoke-radial-chart" ? /* @__PURE__ */ s(St, {
|
|
2406
2403
|
segments: e.segments,
|
|
2407
2404
|
title: e.title
|
|
2408
|
-
}) : e.type === "dot-matrix-chart" ? /* @__PURE__ */ s(
|
|
2405
|
+
}) : e.type === "dot-matrix-chart" ? /* @__PURE__ */ s(Pe, { items: e.items }) : e.type === "ranked-card-leaderboard" ? /* @__PURE__ */ s(Ne, { items: e.items }) : e.type === "proportional-band-chart" ? /* @__PURE__ */ s(bt, { severities: e.severities }) : e.type === "radial-fan-tree-chart" ? /* @__PURE__ */ s(Ue, {
|
|
2409
2406
|
total: e.total,
|
|
2407
|
+
totalLabel: e.totalLabel,
|
|
2410
2408
|
items: e.items
|
|
2411
|
-
}) : e.type === "semi-circular-gauge-chart" ? /* @__PURE__ */ s(
|
|
2409
|
+
}) : e.type === "semi-circular-gauge-chart" ? /* @__PURE__ */ s(me, {
|
|
2412
2410
|
value: e.value,
|
|
2413
2411
|
confirmed: e.confirmed,
|
|
2414
2412
|
total: e.total
|
|
2415
|
-
}) : e.type === "segmented-split-bar-chart" ? /* @__PURE__ */ s(
|
|
2413
|
+
}) : e.type === "segmented-split-bar-chart" ? /* @__PURE__ */ s(jt, { items: e.items }) : e.type === "balance-scale-chart" ? /* @__PURE__ */ s(st, {
|
|
2416
2414
|
left: e.left,
|
|
2417
2415
|
right: e.right
|
|
2418
|
-
}) : e.type === "area-line-chart" ? /* @__PURE__ */ s(
|
|
2416
|
+
}) : e.type === "area-line-chart" ? /* @__PURE__ */ s(lt, { points: e.points }) : e.type === "trend-view" ? /* @__PURE__ */ s(gt, { points: e.points }) : e.type === "weekly-flow" ? /* @__PURE__ */ s(Pt, { items: e.items }) : /* @__PURE__ */ s("div", {
|
|
2419
2417
|
className: "viz-empty",
|
|
2420
2418
|
children: "Visualization unavailable"
|
|
2421
2419
|
});
|
|
2422
2420
|
}
|
|
2423
2421
|
//#endregion
|
|
2424
2422
|
//#region src/utils/mounts.tsx
|
|
2425
|
-
var
|
|
2426
|
-
function
|
|
2423
|
+
var Lt = [];
|
|
2424
|
+
function Rt(e) {
|
|
2427
2425
|
try {
|
|
2428
2426
|
return JSON.parse(decodeURIComponent(e));
|
|
2429
2427
|
} catch {
|
|
2430
2428
|
return null;
|
|
2431
2429
|
}
|
|
2432
2430
|
}
|
|
2433
|
-
function
|
|
2434
|
-
for (;
|
|
2435
|
-
let e =
|
|
2431
|
+
function zt() {
|
|
2432
|
+
for (; Lt.length;) {
|
|
2433
|
+
let e = Lt.pop();
|
|
2436
2434
|
e && e.unmount();
|
|
2437
2435
|
}
|
|
2438
2436
|
}
|
|
2439
|
-
function
|
|
2440
|
-
|
|
2437
|
+
function Bt() {
|
|
2438
|
+
zt(), document.querySelectorAll("[data-d3-viz]").forEach((t) => {
|
|
2441
2439
|
let n = t.dataset.d3Viz;
|
|
2442
2440
|
if (!n) return;
|
|
2443
|
-
let r =
|
|
2441
|
+
let r = Rt(n);
|
|
2444
2442
|
if (!r) return;
|
|
2445
2443
|
let i = e(t);
|
|
2446
|
-
|
|
2444
|
+
Lt.push(i), i.render(/* @__PURE__ */ s(It, { config: r }));
|
|
2447
2445
|
});
|
|
2448
2446
|
}
|
|
2449
|
-
function
|
|
2447
|
+
function Vt(e) {
|
|
2450
2448
|
return encodeURIComponent(JSON.stringify(e));
|
|
2451
2449
|
}
|
|
2452
2450
|
//#endregion
|
|
2453
2451
|
//#region src/components/donutChart/DonutChart.tsx
|
|
2454
|
-
function
|
|
2455
|
-
return /* @__PURE__ */ s(
|
|
2452
|
+
function Ht({ rows: e = [], className: t, colors: n }) {
|
|
2453
|
+
return /* @__PURE__ */ s(qe, {
|
|
2456
2454
|
rows: e,
|
|
2457
2455
|
variant: "donut",
|
|
2458
2456
|
className: t,
|
|
@@ -2471,7 +2469,7 @@ var Z = {
|
|
|
2471
2469
|
red: u.red,
|
|
2472
2470
|
amber: u.amber,
|
|
2473
2471
|
green: u.green
|
|
2474
|
-
}, Q = "'Satoshi Variable', 'DM Sans', sans-serif",
|
|
2472
|
+
}, Q = "'Satoshi Variable', 'DM Sans', sans-serif", Ut = {
|
|
2475
2473
|
color: "#F7F7F7",
|
|
2476
2474
|
fontFamily: Q,
|
|
2477
2475
|
fontSize: 24,
|
|
@@ -2484,7 +2482,7 @@ var Z = {
|
|
|
2484
2482
|
fontWeight: 400,
|
|
2485
2483
|
lineHeight: "20px"
|
|
2486
2484
|
};
|
|
2487
|
-
function
|
|
2485
|
+
function Wt({ chips: e = [] }) {
|
|
2488
2486
|
return /* @__PURE__ */ s("div", {
|
|
2489
2487
|
style: {
|
|
2490
2488
|
display: "flex",
|
|
@@ -2506,7 +2504,7 @@ function Kt({ chips: e = [] }) {
|
|
|
2506
2504
|
},
|
|
2507
2505
|
children: [/* @__PURE__ */ s("span", {
|
|
2508
2506
|
style: {
|
|
2509
|
-
...
|
|
2507
|
+
...Ut,
|
|
2510
2508
|
color: e.color ?? Z.t1
|
|
2511
2509
|
},
|
|
2512
2510
|
children: e.value
|
|
@@ -2520,7 +2518,7 @@ function Kt({ chips: e = [] }) {
|
|
|
2520
2518
|
}, t))
|
|
2521
2519
|
});
|
|
2522
2520
|
}
|
|
2523
|
-
function
|
|
2521
|
+
function Gt({ items: e = [] }) {
|
|
2524
2522
|
return /* @__PURE__ */ s("div", {
|
|
2525
2523
|
style: {
|
|
2526
2524
|
display: "flex",
|
|
@@ -2543,7 +2541,7 @@ function qt({ items: e = [] }) {
|
|
|
2543
2541
|
},
|
|
2544
2542
|
children: [/* @__PURE__ */ s("div", {
|
|
2545
2543
|
style: {
|
|
2546
|
-
...
|
|
2544
|
+
...Ut,
|
|
2547
2545
|
color: e.color ?? Z.t1
|
|
2548
2546
|
},
|
|
2549
2547
|
children: e.value
|
|
@@ -2554,7 +2552,7 @@ function qt({ items: e = [] }) {
|
|
|
2554
2552
|
}, t))
|
|
2555
2553
|
});
|
|
2556
2554
|
}
|
|
2557
|
-
function
|
|
2555
|
+
function Kt({ items: e = [] }) {
|
|
2558
2556
|
return /* @__PURE__ */ s("div", {
|
|
2559
2557
|
style: {
|
|
2560
2558
|
display: "flex",
|
|
@@ -2586,7 +2584,7 @@ function Jt({ items: e = [] }) {
|
|
|
2586
2584
|
}),
|
|
2587
2585
|
/* @__PURE__ */ s("span", {
|
|
2588
2586
|
style: {
|
|
2589
|
-
...
|
|
2587
|
+
...Ut,
|
|
2590
2588
|
fontSize: 18,
|
|
2591
2589
|
color: e.color ?? Z.t1,
|
|
2592
2590
|
minWidth: 70,
|
|
@@ -2605,7 +2603,7 @@ function Jt({ items: e = [] }) {
|
|
|
2605
2603
|
}, t))
|
|
2606
2604
|
});
|
|
2607
2605
|
}
|
|
2608
|
-
function
|
|
2606
|
+
function qt({ items: e = [] }) {
|
|
2609
2607
|
return /* @__PURE__ */ s("div", {
|
|
2610
2608
|
style: {
|
|
2611
2609
|
display: "flex",
|
|
@@ -2627,7 +2625,7 @@ function Yt({ items: e = [] }) {
|
|
|
2627
2625
|
},
|
|
2628
2626
|
children: [/* @__PURE__ */ s("div", {
|
|
2629
2627
|
style: {
|
|
2630
|
-
...
|
|
2628
|
+
...Ut,
|
|
2631
2629
|
color: e.color ?? Z.t1
|
|
2632
2630
|
},
|
|
2633
2631
|
children: e.value
|
|
@@ -2638,12 +2636,12 @@ function Yt({ items: e = [] }) {
|
|
|
2638
2636
|
}, t))
|
|
2639
2637
|
});
|
|
2640
2638
|
}
|
|
2641
|
-
var
|
|
2639
|
+
var Jt = {
|
|
2642
2640
|
red: Z.red,
|
|
2643
2641
|
amber: Z.amber,
|
|
2644
2642
|
green: Z.green
|
|
2645
2643
|
};
|
|
2646
|
-
function
|
|
2644
|
+
function Yt({ items: e = [] }) {
|
|
2647
2645
|
return /* @__PURE__ */ s("div", {
|
|
2648
2646
|
style: {
|
|
2649
2647
|
display: "flex",
|
|
@@ -2651,7 +2649,7 @@ function Zt({ items: e = [] }) {
|
|
|
2651
2649
|
gap: 5
|
|
2652
2650
|
},
|
|
2653
2651
|
children: e.map((e, t) => {
|
|
2654
|
-
let n =
|
|
2652
|
+
let n = Jt[e.severity];
|
|
2655
2653
|
return /* @__PURE__ */ c("div", {
|
|
2656
2654
|
style: {
|
|
2657
2655
|
display: "flex",
|
|
@@ -2676,7 +2674,7 @@ function Zt({ items: e = [] }) {
|
|
|
2676
2674
|
})
|
|
2677
2675
|
});
|
|
2678
2676
|
}
|
|
2679
|
-
function
|
|
2677
|
+
function Xt({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
2680
2678
|
let a = t - e;
|
|
2681
2679
|
return /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("div", {
|
|
2682
2680
|
style: {
|
|
@@ -2786,9 +2784,9 @@ function Qt({ min: e, max: t, unit: n, dots: r = [], chips: i = [] }) {
|
|
|
2786
2784
|
}, r);
|
|
2787
2785
|
})
|
|
2788
2786
|
]
|
|
2789
|
-
}), i && i.length > 0 && /* @__PURE__ */ s(
|
|
2787
|
+
}), i && i.length > 0 && /* @__PURE__ */ s(Wt, { chips: i })] });
|
|
2790
2788
|
}
|
|
2791
|
-
function
|
|
2789
|
+
function Zt({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i, rightLabel: a, rightValue: o, rightColor: l, chips: d }) {
|
|
2792
2790
|
let f = r ?? u.blue, p = l ?? u.blue;
|
|
2793
2791
|
return /* @__PURE__ */ c("div", { children: [
|
|
2794
2792
|
/* @__PURE__ */ c("div", {
|
|
@@ -2882,10 +2880,10 @@ function $t({ leftPct: e, leftLabel: t, leftValue: n, leftColor: r, rightPct: i,
|
|
|
2882
2880
|
})
|
|
2883
2881
|
})]
|
|
2884
2882
|
}),
|
|
2885
|
-
d && d.length > 0 && /* @__PURE__ */ s(
|
|
2883
|
+
d && d.length > 0 && /* @__PURE__ */ s(Wt, { chips: d })
|
|
2886
2884
|
] });
|
|
2887
2885
|
}
|
|
2888
|
-
function
|
|
2886
|
+
function Qt({ pct: e, label: t, color: n, chips: r }) {
|
|
2889
2887
|
let i = n ?? u.blue, a = 2 * Math.PI * 30, o = a * (1 - e / 100);
|
|
2890
2888
|
return /* @__PURE__ */ c("div", {
|
|
2891
2889
|
style: {
|
|
@@ -2966,7 +2964,7 @@ function en({ pct: e, label: t, color: n, chips: r }) {
|
|
|
2966
2964
|
},
|
|
2967
2965
|
children: [/* @__PURE__ */ s("span", {
|
|
2968
2966
|
style: {
|
|
2969
|
-
...
|
|
2967
|
+
...Ut,
|
|
2970
2968
|
color: e.color ?? Z.t1
|
|
2971
2969
|
},
|
|
2972
2970
|
children: e.value
|
|
@@ -2979,16 +2977,16 @@ function en({ pct: e, label: t, color: n, chips: r }) {
|
|
|
2979
2977
|
})]
|
|
2980
2978
|
});
|
|
2981
2979
|
}
|
|
2982
|
-
var
|
|
2980
|
+
var $t = {
|
|
2983
2981
|
green: "#34D39918",
|
|
2984
2982
|
amber: "#FBBF2418",
|
|
2985
2983
|
red: "#F0606018"
|
|
2986
|
-
},
|
|
2984
|
+
}, en = {
|
|
2987
2985
|
green: "#34D399",
|
|
2988
2986
|
amber: "#FBBF24",
|
|
2989
2987
|
red: "#F06060"
|
|
2990
2988
|
};
|
|
2991
|
-
function
|
|
2989
|
+
function tn({ items: e = [] }) {
|
|
2992
2990
|
return /* @__PURE__ */ s("div", {
|
|
2993
2991
|
style: {
|
|
2994
2992
|
display: "flex",
|
|
@@ -3052,8 +3050,8 @@ function rn({ items: e = [] }) {
|
|
|
3052
3050
|
style: {
|
|
3053
3051
|
fontSize: 18,
|
|
3054
3052
|
fontWeight: 500,
|
|
3055
|
-
color:
|
|
3056
|
-
background:
|
|
3053
|
+
color: en[e.badgeSeverity],
|
|
3054
|
+
background: $t[e.badgeSeverity],
|
|
3057
3055
|
padding: "2px 7px",
|
|
3058
3056
|
borderRadius: 4,
|
|
3059
3057
|
fontFamily: Q,
|
|
@@ -3076,12 +3074,12 @@ function rn({ items: e = [] }) {
|
|
|
3076
3074
|
}, t))
|
|
3077
3075
|
});
|
|
3078
3076
|
}
|
|
3079
|
-
var
|
|
3077
|
+
var nn = {
|
|
3080
3078
|
red: Z.red,
|
|
3081
3079
|
amber: Z.amber,
|
|
3082
3080
|
green: Z.green
|
|
3083
3081
|
};
|
|
3084
|
-
function
|
|
3082
|
+
function rn({ items: e = [] }) {
|
|
3085
3083
|
return /* @__PURE__ */ s("div", {
|
|
3086
3084
|
style: {
|
|
3087
3085
|
display: "flex",
|
|
@@ -3089,7 +3087,7 @@ function on({ items: e = [] }) {
|
|
|
3089
3087
|
gap: 5
|
|
3090
3088
|
},
|
|
3091
3089
|
children: e.map((e, t) => {
|
|
3092
|
-
let n =
|
|
3090
|
+
let n = nn[e.severity];
|
|
3093
3091
|
return /* @__PURE__ */ c("div", {
|
|
3094
3092
|
style: {
|
|
3095
3093
|
display: "flex",
|
|
@@ -3141,7 +3139,7 @@ function on({ items: e = [] }) {
|
|
|
3141
3139
|
})
|
|
3142
3140
|
});
|
|
3143
3141
|
}
|
|
3144
|
-
function
|
|
3142
|
+
function an({ columns: e = [], rows: t = [] }) {
|
|
3145
3143
|
return /* @__PURE__ */ c("div", {
|
|
3146
3144
|
style: {
|
|
3147
3145
|
display: "flex",
|
|
@@ -3204,21 +3202,21 @@ function sn({ columns: e = [], rows: t = [] }) {
|
|
|
3204
3202
|
}, t))]
|
|
3205
3203
|
});
|
|
3206
3204
|
}
|
|
3207
|
-
function
|
|
3205
|
+
function on({ block: e }) {
|
|
3208
3206
|
if (!e) return null;
|
|
3209
3207
|
switch (e.type) {
|
|
3210
|
-
case "stats": return /* @__PURE__ */ s(
|
|
3211
|
-
case "ranked": return /* @__PURE__ */ s(
|
|
3212
|
-
case "chips": return /* @__PURE__ */ s(
|
|
3213
|
-
case "badges": return /* @__PURE__ */ s(
|
|
3214
|
-
case "dot-strip": return /* @__PURE__ */ s(
|
|
3208
|
+
case "stats": return /* @__PURE__ */ s(Gt, { items: e.items });
|
|
3209
|
+
case "ranked": return /* @__PURE__ */ s(Kt, { items: e.items });
|
|
3210
|
+
case "chips": return /* @__PURE__ */ s(qt, { items: e.items });
|
|
3211
|
+
case "badges": return /* @__PURE__ */ s(Yt, { items: e.items });
|
|
3212
|
+
case "dot-strip": return /* @__PURE__ */ s(Xt, {
|
|
3215
3213
|
min: e.min,
|
|
3216
3214
|
max: e.max,
|
|
3217
3215
|
unit: e.unit,
|
|
3218
3216
|
dots: e.dots,
|
|
3219
3217
|
chips: e.chips
|
|
3220
3218
|
});
|
|
3221
|
-
case "proportion": return /* @__PURE__ */ s(
|
|
3219
|
+
case "proportion": return /* @__PURE__ */ s(Zt, {
|
|
3222
3220
|
leftPct: e.leftPct,
|
|
3223
3221
|
leftLabel: e.leftLabel,
|
|
3224
3222
|
leftValue: e.leftValue,
|
|
@@ -3229,15 +3227,15 @@ function cn({ block: e }) {
|
|
|
3229
3227
|
rightColor: e.rightColor,
|
|
3230
3228
|
chips: e.chips
|
|
3231
3229
|
});
|
|
3232
|
-
case "ring": return /* @__PURE__ */ s(
|
|
3230
|
+
case "ring": return /* @__PURE__ */ s(Qt, {
|
|
3233
3231
|
pct: e.pct,
|
|
3234
3232
|
label: e.label,
|
|
3235
3233
|
color: e.color,
|
|
3236
3234
|
chips: e.chips
|
|
3237
3235
|
});
|
|
3238
|
-
case "scorecard-rows": return /* @__PURE__ */ s(
|
|
3239
|
-
case "flags-list": return /* @__PURE__ */ s(
|
|
3240
|
-
case "comparison-rows": return /* @__PURE__ */ s(
|
|
3236
|
+
case "scorecard-rows": return /* @__PURE__ */ s(tn, { items: e.items });
|
|
3237
|
+
case "flags-list": return /* @__PURE__ */ s(rn, { items: e.items });
|
|
3238
|
+
case "comparison-rows": return /* @__PURE__ */ s(an, {
|
|
3241
3239
|
columns: e.columns,
|
|
3242
3240
|
rows: e.rows
|
|
3243
3241
|
});
|
|
@@ -3246,14 +3244,14 @@ function cn({ block: e }) {
|
|
|
3246
3244
|
}
|
|
3247
3245
|
//#endregion
|
|
3248
3246
|
//#region src/components/keyHighlights/Takeaway.tsx
|
|
3249
|
-
var
|
|
3247
|
+
var sn = "'Satoshi Variable', 'DM Sans', sans-serif", cn = {
|
|
3250
3248
|
color: "#C2C2C2",
|
|
3251
|
-
fontFamily:
|
|
3249
|
+
fontFamily: sn,
|
|
3252
3250
|
fontSize: 18,
|
|
3253
3251
|
fontWeight: 400,
|
|
3254
3252
|
lineHeight: "20px"
|
|
3255
3253
|
};
|
|
3256
|
-
function
|
|
3254
|
+
function ln({ text: e }) {
|
|
3257
3255
|
return /* @__PURE__ */ c("div", {
|
|
3258
3256
|
style: {
|
|
3259
3257
|
padding: "8px 0px",
|
|
@@ -3266,16 +3264,16 @@ function dn({ text: e }) {
|
|
|
3266
3264
|
fontSize: 18,
|
|
3267
3265
|
fontWeight: 500,
|
|
3268
3266
|
color: u.t1,
|
|
3269
|
-
fontFamily:
|
|
3267
|
+
fontFamily: sn,
|
|
3270
3268
|
lineHeight: "20px",
|
|
3271
3269
|
marginRight: 8
|
|
3272
3270
|
},
|
|
3273
3271
|
children: "Takeaway"
|
|
3274
3272
|
}), /* @__PURE__ */ s("span", {
|
|
3275
|
-
style: { ...
|
|
3273
|
+
style: { ...cn },
|
|
3276
3274
|
children: e
|
|
3277
3275
|
})]
|
|
3278
3276
|
});
|
|
3279
3277
|
}
|
|
3280
3278
|
//#endregion
|
|
3281
|
-
export { te as AreaChart, ie as BarChart, l as ChartFrame,
|
|
3279
|
+
export { te as AreaChart, ie as BarChart, l as ChartFrame, Ht as DonutChart, on as KeyHighlights, Fe as LineChart, Re as MiniBars, qe as PieChart, rt as ProcessSankey, it as RankingSankey, Ye as SankeySvg, ee as SeriesChart, ln as Takeaway, gt as Trend, wt as TrendChart, It as VisualizationRenderer, zt as cleanupVisualizationMounts, Bt as hydrateVisualizationMounts, Vt as serializeVisualizationConfig };
|