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