Skip to content

feat: New Lit Chart components and updated gallery demo surfaces#745

Open
chrismarino wants to merge 5 commits intogoogle:mainfrom
promptone:feature/lit-charts
Open

feat: New Lit Chart components and updated gallery demo surfaces#745
chrismarino wants to merge 5 commits intogoogle:mainfrom
promptone:feature/lit-charts

Conversation

@chrismarino
Copy link

Description

Add an interactive Lit Chart component (pie, doughnut, bar) with one-level drill-down support using Chart.js and chartjs-plugin-datalabels. Register the component with a full JSON schema in the component registry.

Also includes items omitted from earlier commits:

  • Add OrgChart demo surface and data model to gallery_examples.py (component existed but had no gallery entry)
  • Enable custom elements on gallery surfaces (.enableCustomElements)
  • Add chart and org-chart demo entries to DEMO_ITEMS list
  • Add chart.js and chartjs-plugin-datalabels dependencies

Update documentation:

  • Rewrite component gallery README with architecture overview, setup steps, and custom component authoring guide
  • Rewrite custom-components README with full property docs for all four components (Chart, OrgChart, PremiumTextField, WebFrame)
  • Update path-resolution and registration examples for current API
new-lit-gallery

Test

  1. Build the renderer (new dependency):
cd renderers/lit
npm install
npm run build
  1. Start the agent (in one terminal):
cd samples/agent/adk/component_gallery
uv run .

This runs on http://localhost:10005.

  1. Start the client (in another terminal):
cd samples/client/lit/component_gallery
npm install
npm run dev

Pre-launch Checklist

If you need help, consider asking for advice on the discussion board.

Add an interactive Chart component (pie, doughnut, bar) with one-level
drill-down support using Chart.js and chartjs-plugin-datalabels. Register
the component with a full JSON schema in the component registry.

Also includes items omitted from earlier commits:
- Add OrgChart demo surface and data model to gallery_examples.py
  (component existed but had no gallery entry)
- Enable custom elements on gallery surfaces (.enableCustomElements)
- Add chart and org-chart demo entries to DEMO_ITEMS list
- Add chart.js and chartjs-plugin-datalabels dependencies

Update documentation:
- Rewrite component gallery README with architecture overview, setup
  steps, and custom component authoring guide
- Rewrite custom-components README with full property docs for all four
  components (Chart, OrgChart, PremiumTextField, WebFrame)
- Update path-resolution and registration examples for current API
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

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

Code Review

This pull request introduces new interactive Chart components (pie, bar, doughnut) for the Lit renderer, along with corresponding demo surfaces in the component gallery. It also includes updates to the OrgChart demo and significantly improves the documentation for custom components.

The implementation of the chart component is comprehensive, with support for drill-down functionality. My review focuses on improving the maintainability, theming, and type safety of the new code. Specifically, I've suggested refactoring the verbose demo data generation, using theme variables for chart colors, and improving type safety in the Chart.js integration.

A key concern is the lack of automated tests for the new ChartComponent. Given its complexity and the repository's style guide, adding unit tests is highly recommended to ensure correctness and prevent future regressions.

Chris Marino added 2 commits March 2, 2026 10:43
Apply Google TypeScript Style Guide conformance fixes to chart.ts:
- Replace #private fields with TypeScript private keyword
- Convert double-quoted strings to single quotes
- Use proper DatalabelsContext type instead of any
- Replace unsafe double type assertion with a type guard

Address PR review suggestions:
- Refactor resolveChartData into focused helpers (resolveDataFromPath,
  normalizeMapToArray, fieldFrom, transformDataItems)
- Make chart palette themable via --chart-color-N CSS custom properties
- Add _to_value_map() helper in gallery_examples.py to replace verbose
  hand-written A2UI valueMap structures with readable plain dicts
- Shorten DEMO_ITEMS descriptions to match existing terse style
- Run pyink to fix Python formatting
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Todo

Development

Successfully merging this pull request may close these issues.

1 participant