frontend/pages/DashboardPage/cards/ChartCard/ChartCard.tsx:219

• vizProps now includes theme and tooltipFormatter, but it is spread into both <CheckerboardViz> and <LineChartViz>. LineChartViz only accepts { data, selectedDays }, so this will fail TypeScript type-checking (and/or pass unexpected props). Consider splitting props per visualization (common props vs checkerboard-only props) or updating LineChartViz props to explicitly accept (and ignore) these optional fields.

    const vizProps = {
      data: formattedData,
      selectedDays: CHART_DAYS,
      theme: currentDataset.theme,
      tooltipFormatter: currentDataset.tooltipFormatter,
    };

    switch (currentDataset.defaultChartType) {
      case "checkerboard":
        return <CheckerboardViz {...vizProps} />;
      case "line":
      default:
        return <LineChartViz {...vizProps} />;
    }

frontend/pages/DashboardPage/cards/ChartCard/CheckerboardViz.tsx:35

• ICellData now requires a value, but the 24h branch (if (is24h) { ... }) still constructs cells without a value field. This should be a TypeScript error and will also break tooltip formatting for 24h charts; populate value (and total if needed) for those cells too.

interface ICellData {
  dayIndex: number;
  hourRow: number;
  value: number;
  total?: number;
  percentage: number;
  dayLabel: string;
  hourLabel: string;
}

frontend/pages/DashboardPage/cards/ChartCard/CheckerboardViz.tsx (2)

41-49: Reuse the exported TooltipFormatter type instead of redeclaring its shape inline.

types.ts already exports TooltipFormatter with this exact signature. Inlining a duplicate here means the two will drift independently if the formatter contract ever changes (e.g., a new field is added).

♻️ Suggested refactor

-import { ChartTheme, IFormattedDataPoint } from "./types";
+import { ChartTheme, IFormattedDataPoint, TooltipFormatter } from "./types";
@@
 interface ICheckerboardVizProps {
   data: IFormattedDataPoint[];
   selectedDays: number;
   theme?: ChartTheme;
-  tooltipFormatter?: ({
-    value,
-    total,
-    percentage,
-  }: {
-    value: number;
-    total?: number;
-    percentage?: number;
-  }) => string | React.ReactNode;
+  tooltipFormatter?: TooltipFormatter;
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/pages/DashboardPage/cards/ChartCard/CheckerboardViz.tsx` around
lines 41 - 49, The prop type for tooltipFormatter in CheckerboardViz is
redeclared inline; instead import and reuse the exported TooltipFormatter type
from types.ts to avoid duplication. Update the component's props signature to
replace the inline shape with the imported TooltipFormatter (ensure you add an
import for TooltipFormatter) and keep the prop name tooltipFormatter unchanged
so consumers and the component implementation still work the same.

---

202-223: Edge-zone heuristic: hardcoded 100px threshold is decoupled from cell width.

EDGE_ZONE = 100 is a fixed pixel buffer applied regardless of cellW/scale, which means in wide mode (WIDE_MULTIPLIER = 1.5) the "edge" zone effectively shrinks relative to actual cell footprint, and in very narrow containers it could cover most of the chart. Consider deriving it from cellW (e.g., Math.max(80, cellW * 4)) or hoisting it to a named constant near the other layout constants (CELL_W, CELL_GAP, etc.) so the layout intent stays in one place.

Also worth confirming visually: when tooltipAlign === "right", the SCSS applies transform: translate(-100%, -100%) so the tooltip's right edge aligns with tooltipPos.x (the cell center). Near the actual right edge that still leaves the tooltip extending leftward across the chart, which matches the comment — but since cellCenterX here is rect.left - containerRect.left + cellW / 2 (cell center, not right edge), the tooltip's right side will sit at the cell center, not the cell's right edge. Just flagging that the visual anchor point differs from "right edge of the cell" in case that surprises you during QA.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/pages/DashboardPage/cards/ChartCard/CheckerboardViz.tsx` around
lines 202 - 223, The EDGE_ZONE heuristic in handleMouseEnter is a fixed 100px
which doesn't scale with cell width/scale; replace the hardcoded value with a
derived value (e.g., const EDGE_ZONE = Math.max(80, cellW * 4)) or hoist a named
constant next to CELL_W/CELL_GAP/WIDE_MULTIPLIER so layout intent is
centralized, then use that derived EDGE_ZONE when deciding tooltipAlign. Also
clarify the anchor point: currently cellCenterX is used (rect.left -
containerRect.left + cellW / 2) but the SCSS "right" alignment positions the
tooltip's right edge at tooltipPos.x, so if you want the tooltip to anchor to
the cell's right edge instead, compute and use cellRightX (rect.left -
containerRect.left + cellW) for tooltipPos.x; keep tooltipAlign logic otherwise.

frontend/pages/DashboardPage/cards/ChartCard/ChartCard.tsx (1)

44-92: Optional: extract a shared tooltip formatter helper.

The uptime and cve tooltipFormatter implementations are structurally identical except for the verb (active vs exposed). Consider a small helper to keep them aligned as more datasets are added.

♻️ Example refactor

+const buildPctTooltip = (verb: string): TooltipFormatter => ({
+  value,
+  total,
+  percentage,
+}) => (
+  <>
+    {percentage}% {verb}
+    <br />({value} / {total} hosts)
+  </>
+);
+
 const DATASETS: IDataSet[] = [
   {
     name: "uptime",
     ...
-    tooltipFormatter: ({ value, total, percentage }: { ... }) => (
-      <>{percentage}% active<br />({value} / {total} hosts)</>
-    ),
+    tooltipFormatter: buildPctTooltip("active"),
   },
   {
     name: "cve",
     ...
-    tooltipFormatter: ({ value, total, percentage }: { ... }) => (
-      <>{percentage}% exposed<br />({value} / {total} hosts)</>
-    ),
+    tooltipFormatter: buildPctTooltip("exposed"),
     theme: "red",
   },
 ];

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/pages/DashboardPage/cards/ChartCard/ChartCard.tsx` around lines 44 -
92, Extract the duplicated tooltipFormatter into a reusable helper (e.g.,
makeTooltipFormatter or createTooltipFormatter) that accepts the differing verb
string ("active" or "exposed") and returns the formatter function with the same
signature ({ value, total, percentage }: { value: number; total?: number;
percentage?: number }) => JSX.Element; replace the inline tooltipFormatter for
the uptime and cve chart objects with calls to this helper (e.g.,
tooltipFormatter: makeTooltipFormatter("active")). Ensure the helper is
exported/defined in the same module (ChartCard.tsx) or nearby, preserves types,
and that both chart objects keep their existing behavior and theme fields
unchanged.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes