feat: enhance site visualization options and themes by interstellarmt · Pull Request #434 · antvis/GPT-Vis

interstellarmt · 2026-09-03T12:35:44Z

Summary

This PR improves GPT-Vis chart presentation and updates the website to support both JSON and DSL examples.

Changes

JSON and DSL examples

Add support for displaying multiple code variants in the visualization wrapper.
Add compact Chart, JSON, and DSL preview tabs.
Store runnable JSON beside the DSL source for every website example.
Add automated consistency checks between JSON and parsed DSL configurations.
Support object-based Summary configurations.
Keep JSON and DSL available in the rendered website content for future SEO improvements.

Theme preview

Add built-in Default, Dark, and Academy theme controls to chart previews.
Add Light and Dark controls for Summary previews.
Switch chart themes without modifying the displayed example configuration.
Refine the preview toolbar layout and code presentation.

Chart presentation

Limit generated decimal precision to six places.
Add crosshair axis labels to Dual Axes charts and place the line-scale label on the right Y-axis.
Add examples covering shared crosshairs, dense axis labels, category highlighting, and point focus.

Funnel documentation

Document and test the locale and conversionRateLabel options.
Add a localized Funnel example in both JSON and DSL.

changeset-bot · 2026-09-03T12:35:48Z

⚠️ No Changeset found

Latest commit: 6086716

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2026-09-03T12:37:52Z

✅ Preview is ready!

	✅ Ready
	🔗 Preview https://antvis-GPT-Vis-preview-pr-434.surge.sh
	📝 Commit	`6086716`
	⏱️ Build time	`0.01s`
	📦 Size	`8.8 MB` (-1.2 KB ⬇️) · 181 files
	🪵 Logs	View logs
	📱 Mobile

_{↩️ Previous: ⚡️ 6086716 · antvis-GPT-Vis-preview-pr-434.surge.sh (open ↗) · 2026-09-07 03:42:04 UTC}

_{🤖 Powered by surge-preview}

Copilot

🟡 Changes recommended

The new tests include a TypeScript typing error in the crosshair mock and likely introduce a root-level test dependency on site-only packages (lucide-react) that can break pnpm test at the repo root.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

This PR enhances GPT-Vis preview/presentation capabilities by adding multi-variant code display (JSON + DSL) and theme switching in the wrapper/site previews, while refining crosshair axis labels (precision + dual-axes right-Y alignment) and extending Funnel localization documentation/testing.

Changes:

Add wrapper support for multiple code variants and theme switching; update site previews to pass both DSL and runnable JSON.
Improve chart presentation: crosshair axis labels (precision + correct Y-scale/position for dual-axes) and updated theme tokens.
Add Funnel locale / conversionRateLabel docs plus parser test coverage, and add automated JSON↔DSL consistency checks for site examples.

File summaries

File	Description
src/vis/summary/index.ts	Allow Summary to render from either DSL string or `{ content, theme }` object config.
src/vis/funnel/README.md	Document `locale` and `conversionRateLabel` and add a localized DSL example.
src/vis/dual-axes/index.ts	Bind crosshair axis labels to the line series and place Y label on the right axis; ensure cleanup on rerender/destroy.
src/vis-wrapper/styles.ts	Redesign wrapper toolbar/tab styles, add responsive and reduced-motion rules.
src/vis-wrapper/index.ts	Add code-variant navigation, code panel rendering via `<pre><code>`, and theme switcher wiring.
src/util/tokens.ts	Refine axis token colors for light/dark themes.
src/util/theme.ts	Adjust axis styling defaults (grid widths/dashes) and normalize theme mapping.
src/util/crosshair-axis-labels.ts	Add decimal precision limiting, better formatter handling, and support selecting Y-scale by field + right-axis label placement.
src/types/index.ts	Introduce `VisualizationCodeVariant` and extend options with `codeVariants` / `themeOptions`.
src/index.ts	Export new public types (`VisualizationCodeVariant`, `SummaryObjectConfig`).
src/gpt-vis/index.ts	Persist source config + preview theme; normalize requested theme for summary vs charts; pass code/theme options to wrapper and rerender on theme changes.
site/app/examples/page.tsx	Update gallery to pass both `dsl` and `json` into previews.
site/app/examples/examplesData/wordcloud.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/waterfall-chart.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/venn-diagram.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/treemap.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/table.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/summary.ts	Store Summary DSL + runnable JSON object form for gallery and examples.
site/app/examples/examplesData/sankey-diagram.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/radar-chart.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/pie-chart.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/organization-chart.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/network-graph.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/mindmap.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/liquid-chart.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/indented-tree.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/funnel-chart.ts	Store `galleryDsl` + runnable `galleryJson`, add locale/conversionRateLabel to docs and new localized example pair.
site/app/examples/examplesData/flow-diagram.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/fishbone-diagram.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/dual-axes.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs and updated description for crosshair labels.
site/app/examples/examplesData/column-chart.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs and new dense-label example pair.
site/app/examples/examplesData/bar-chart.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/examplesData/area-chart.ts	Store `galleryDsl` + runnable `galleryJson`, plus per-example `dsl`/`json` pairs.
site/app/examples/[chart]/page.tsx	Update docs pages to pass `dsl` + `json` into wrapper previews.
site/app/docs/page.tsx	Update theme/custom palette preview snippets to use `dsl` prop.
site/app/components/ChartPreview.tsx	Accept both `dsl` and `json`, pass code variants + theme options into GPTVis wrapper previews.
site/app/components/Carousel/index.tsx	Update carousel previews to use `dsl` prop.
tests/site-examples.test.ts	Add consistency checks to ensure each site DSL example has equivalent runnable JSON.
tests/funnel.test.ts	Add parser coverage for Funnel `locale` and `conversionRateLabel`.
tests/crosshair-axis-labels.test.ts	Add unit tests for crosshair label precision and right-Y placement behavior.

Review details

Files reviewed: 45/45 changed files
Comments generated: 2
Review effort level: Lite

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

+import { describe, expect, it } from 'vitest';
+import { groupedExamplesData } from '../site/app/examples/examplesData';
+import { isVisSyntax, parse } from '../src/syntax/parser';


hustcc · 2026-09-03T23:44:08Z

readme 和 skill 也需要更新

hustcc · 2026-09-04T07:47:51Z

+  };

-  return <div ref={wrapperRef} className={`w-full min-h-[200px] ${className}`} style={style} />;
+  return (


这里什么会变复杂？理论上时使用 gpt-vis 的 wrapper = true 就可以了。

Co-Authored-By: Claude <noreply@anthropic.com>

feat: enhance site visualization options and themes

1877824

Copilot AI lite review requested due to automatic review settings September 3, 2026 12:35

github-actions Bot added the pr(feature) label Sep 3, 2026

Copilot started reviewing on behalf of interstellarmt September 3, 2026 12:36 View session

Copilot AI reviewed Sep 3, 2026

View reviewed changes

hustcc reviewed Sep 3, 2026

View reviewed changes

Comment thread src/vis-wrapper/index.ts Outdated

Comment thread src/vis/summary/index.ts Outdated

Comment thread src/gpt-vis/index.ts Outdated

interstellarmt added 5 commits September 4, 2026 11:19

fix: 简化代码

13b53c1

fix: remove unused locale and conversionRateLabel in funnel component

32dd72e

fix: 修复官网示例高度问题

b33d1f6

fix: 减少空白格导致的diff

ca65acb

fix: 双轴图支持多个crosshairsLabel

3c3fed7

hustcc reviewed Sep 4, 2026

View reviewed changes

Comment thread src/vis/funnel/index.ts

hustcc approved these changes Sep 4, 2026

View reviewed changes

逍为 and others added 3 commits September 4, 2026 16:00

docs: 优先使用 object 配置，DSL 语法移至末尾

bec3a05

Co-Authored-By: Claude <noreply@anthropic.com>

chore: 外置代码格式切换

aacaa9f

chore: 每次切换的时候重新 render

6086716

hustcc approved these changes Sep 7, 2026

View reviewed changes

hustcc merged commit 6b76d58 into ai Sep 7, 2026
8 checks passed

hustcc deleted the chore/site-json branch September 7, 2026 04:53

Navigation Menu

Uh oh!

feat: enhance site visualization options and themes - #434

feat: enhance site visualization options and themes#434
hustcc merged 9 commits into
aifrom
chore/site-json

interstellarmt commented Sep 3, 2026

Uh oh!

changeset-bot Bot commented Sep 3, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 3, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

hustcc commented Sep 3, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hustcc Sep 4, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

interstellarmt commented Sep 3, 2026

Summary

Changes

JSON and DSL examples

Theme preview

Chart presentation

Funnel documentation

Uh oh!

changeset-bot Bot commented Sep 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions Bot commented Sep 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Preview is ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

hustcc commented Sep 3, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hustcc Sep 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot Bot commented Sep 3, 2026 •

edited

Loading

github-actions Bot commented Sep 3, 2026 •

edited

Loading