diff --git a/apps/insights/src/components/Publisher/layout.module.scss b/apps/insights/src/components/Publisher/layout.module.scss index 67f56604e5..81697a4ec2 100644 --- a/apps/insights/src/components/Publisher/layout.module.scss +++ b/apps/insights/src/components/Publisher/layout.module.scss @@ -129,8 +129,16 @@ } } -.medianScoreDrawerBody { - display: flex; - flex-flow: column nowrap; - gap: theme.spacing(6); +.medianScoreDrawer { + .medianScoreDrawerFooter { + display: flex; + flex-flow: row nowrap; + justify-content: flex-end; + } + + .medianScoreDrawerBody { + display: flex; + flex-flow: column nowrap; + gap: theme.spacing(6); + } } diff --git a/apps/insights/src/components/Publisher/layout.tsx b/apps/insights/src/components/Publisher/layout.tsx index 8d09303c84..74719366dd 100644 --- a/apps/insights/src/components/Publisher/layout.tsx +++ b/apps/insights/src/components/Publisher/layout.tsx @@ -191,10 +191,12 @@ export const PublishersLayout = async ({ children, params }: Props) => { /> { >
-

Score History

+

+ +

{selectedPoint ? dateFormatter.format(selectedPoint.time) @@ -127,6 +132,7 @@ export const MedianScoreHistory = ({ medianScoreHistory }: Props) => { dot={false} className={styles.medianScore ?? ""} stroke="currentColor" + strokeWidth={focusedScore === "final" ? 3 : 1} /> { dot={false} className={styles.medianUptimeScore ?? ""} stroke="currentColor" + strokeWidth={focusedScore === "uptime" ? 3 : 1} /> { dot={false} className={styles.medianDeviationScore ?? ""} stroke="currentColor" + strokeWidth={focusedScore === "deviation" ? 3 : 1} /> { dot={false} className={styles.medianStalledScore ?? ""} stroke="currentColor" + strokeWidth={focusedScore === "stalled" ? 3 : 1} /> @@ -263,6 +272,28 @@ export const MedianScoreHistory = ({ medianScoreHistory }: Props) => { ); }; +type HeaderTextProps = { + focusedScore: FocusedScore; + hoveredScore: FocusedScore; +}; + +const HeaderText = ({ hoveredScore, focusedScore }: HeaderTextProps) => { + switch (focusedScore ?? hoveredScore) { + case "uptime": { + return "Median Uptime Score History"; + } + case "deviation": { + return "Median Deviation Score History"; + } + case "stalled": { + return "Median Stalled Score History"; + } + default: { + return "Median Score History"; + } + } +}; + type FocusedScore = "uptime" | "deviation" | "stalled" | "final" | undefined; type CurrentValueProps = {