Skip to content

feat(apollo-vertex): dashboard card renderers — InsightCardBody and typed card content components#823

Open
frankkluijtmans wants to merge 3 commits into
mainfrom
pr/3-dashboard-renderers
Open

feat(apollo-vertex): dashboard card renderers — InsightCardBody and typed card content components#823
frankkluijtmans wants to merge 3 commits into
mainfrom
pr/3-dashboard-renderers

Conversation

@frankkluijtmans

Copy link
Copy Markdown
Contributor

Summary

Adds the rendering logic that turns raw data into card content. InsightCardBody decides whether a card should show a KPI number, a horizontal bar chart, a donut, a sparkline, or an area chart based on the card's type and chartType fields. This is the layer between the data model and the visual cards.

Rebased onto main — the dashboard foundation and config layer it was previously stacked on have since merged, so this now contains only the new renderer logic (insight-card-renderers.tsx).

Supersedes #732, which could not be reopened after its head branch was rebased/force-pushed.

Test plan

  • No TypeScript errors in insight-card-renderers.tsx
  • All card type and chartType combinations are handled

🤖 Generated with Claude Code

Copilot AI review requested due to automatic review settings June 15, 2026 15:11
@github-actions

github-actions Bot commented Jun 15, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (PT)
apollo-design 🟢 Ready Preview, Logs Jun 16, 2026, 03:09:23 AM
apollo-docs 🟢 Ready Preview, Logs Jun 16, 2026, 03:09:23 AM
apollo-landing 🟢 Ready Preview, Logs Jun 16, 2026, 03:09:23 AM
apollo-vertex 🟢 Ready Preview, Logs Jun 16, 2026, 03:09:23 AM

@github-actions

Copy link
Copy Markdown
Contributor

Dependency License Review

  • 1922 package(s) scanned
  • ✅ No license issues found
  • ⚠️ 2 package(s) excluded (see details below)
License distribution
License Packages
MIT 1692
ISC 89
Apache-2.0 55
BSD-3-Clause 27
BSD-2-Clause 23
BlueOak-1.0.0 8
MPL-2.0 4
MIT-0 3
CC0-1.0 3
MIT OR Apache-2.0 2
(MIT OR Apache-2.0) 2
Unlicense 2
LGPL-3.0-or-later 1
Python-2.0 1
CC-BY-4.0 1
(MPL-2.0 OR Apache-2.0) 1
Unknown 1
Artistic-2.0 1
(WTFPL OR MIT) 1
(BSD-2-Clause OR MIT OR Apache-2.0) 1
CC-BY-3.0 1
0BSD 1
(MIT OR CC0-1.0) 1
MIT AND ISC 1
Excluded packages
Package Version License Reason
@img/sharp-libvips-linux-x64 1.2.4 LGPL-3.0-or-later LGPL pre-built binary, not linked
khroma 2.1.0 Unknown MIT per GitHub repo, missing license field in package.json

@frankkluijtmans frankkluijtmans marked this pull request as ready for review June 15, 2026 15:12
@frankkluijtmans frankkluijtmans requested a review from a team as a code owner June 15, 2026 15:12
Comment thread apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx Fixed
Comment thread apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx Fixed
…yped card content components

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@frankkluijtmans frankkluijtmans force-pushed the pr/3-dashboard-renderers branch from 9df6c10 to 97a7d33 Compare June 15, 2026 15:15

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a new client-side renderer layer for Apollo Vertex dashboard insight cards. InsightCardBody selects a content renderer (KPI, horizontal bars, donut, sparkline, stacked bar, or area) based on the card config and view mode, bridging dashboard data to card visuals.

Changes:

  • Introduces InsightCardBody and multiple chart/KPI content renderers in a single module.
  • Adds compact/expanded rendering variants for horizontal bars and stacked bars.
  • Adds a TruncatedText helper that conditionally shows a tooltip when text is clamped.

Comment thread apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx
Comment thread apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx Outdated
Comment thread apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx Outdated
Comment thread apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx Outdated
Comment thread apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx
Comment thread apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx
Comment thread apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx Outdated
Comment thread apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx
Comment thread apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx Outdated
Comment on lines +423 to +425
if (content.type === "kpi") {
return <KpiContent cardData={cardData} viewMode={viewMode} />;
}
- Wire donut, sparkline, and area renderers to dataset values
  (donutPercent/donutLabel/points) with sample fallbacks
- Guard percentage math against divide-by-zero and empty data so
  legends and bar heights never render NaN%
- Key stacked-bar totals and segments by category index instead of CSS
  color, which repeats once there are more than 5 categories
- Make the TruncatedText tooltip trigger keyboard-focusable when clamped

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings June 15, 2026 15:33
@frankkluijtmans

Copy link
Copy Markdown
Contributor Author

Addressed the Copilot review in a follow-up commit (418b94f3): keyboard-focusable tooltip trigger, NaN guards on all percentage math, stacked-bar totals/keys now keyed by category index (not CSS color, which repeats past 5 categories), and the donut/sparkline/area renderers now read donutPercent/donutLabel/points from the dataset with sample fallbacks.

Two items I intentionally did not change, for the record:

  • "KPI cards ignore chartType, donut renderer unreachable" — this is intentional. kpi-type cards render the KPI number by design; their chartType: "donut" is consumed for layout styling in glow-config.ts (cardClassName), not as a renderer selector. Routing those cards to the donut renderer would break the intended KPI display.
  • CodeQL js/call-to-non-callable on useDashboardData() — this was a side effect of an import that resolved to undefined (since fixed in 97a7d338). The alert no longer appears on the file, so no defensive guard was added.

Note: donutPercent is treated as a 0–1 fraction (matching the prior 0.47 → 47% sample) since no dataset populates it yet — easy to flip to 0–100 if that was the intent.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 4 comments.

Comment thread apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx
Comment thread apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx
Comment thread apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx Outdated
Comment thread apps/apollo-vertex/templates/dashboard/insight-card-renderers.tsx Outdated
- Clamp donut fraction to [0,1] so out-of-range data can't produce a
  negative/oversized arc or a wrong label.
- Normalize expanded horizontal-bar percentages to value/total so they
  match the compact view (bar values are raw counts, not percentages).
- Return null from InsightCardBody when cardIndex is out of range instead
  of silently rendering insightCards[0].
- Replace the chart renderer if-chain with an exhaustive switch and a
  never guard so a new ChartType fails to compile rather than defaulting
  to Area.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

app:apollo-vertex size:L 100-499 changed lines.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants