Skip to content

fix(charts): pie/donut 图例给扇区标上分类名，并真正读 showLegend (#3135) - #3138

Open
baozhoutao wants to merge 1 commit into
mainfrom
claude/issue-3135-review-794f65
Open

fix(charts): pie/donut 图例给扇区标上分类名，并真正读 showLegend (#3135)#3138
baozhoutao wants to merge 1 commit into
mainfrom
claude/issue-3135-review-794f65

Conversation

@baozhoutao

@baozhoutao baozhoutao commented Aug 1, 2026

Copy link
Copy Markdown
Contributor

Closes #3135

根因：type 这个维度名把图例文字吃掉了

图例标签由 shadcn 的 getPayloadConfigFromPayload 解析：它拿 nameKey（= 维度字段名）先在 recharts 的 legend item 上找，找不到才看数据行。而 recharts 的 legend item 自带一个 type 字段 —— 图例图标形状，值是 "rect"。

于是 dimensions: ['type']（"按类型分布"，看板里极常见）→ nameKey="type" → 解析成 "rect" → config["rect"] 查不到 → 回退 config["type"] 也没有 → label 为 undefined，只剩 2px 色块，一个字不渲染。维度叫 color 同样受害。单类别数据下最致命：整圆一色 + 一个无字色点。

改法：数据行优先于 legend item 自身的同名属性 —— nameKey 本来指的就是数据行的字段。

同一份报告里的另外两个缺口

  • 饼/环图分支的图例是无条件渲染的，legendVisible 只用在 radar/combo 上。写 showLegend: false 关不掉；写 true 也不是"生效"，只是撞上了默认值。
  • DatasetWidget 根本不读 widget.chartConfig（只读 options），声明的 showLegend 从元数据层到渲染器之间断链，是死配置。现在把这一个渲染器已支持的标志下沉进 chart schema；未声明就不带这个键，存量看板行为不变。

验证

单测：新增 AdvancedChartImpl.pieLegend.test.tsx（type/color/urgency 三种维度名 + 单类别 + showLegend:false）与 DatasetWidget.showLegend.test.tsx。回滚源码改动后新测试 4 失败 1 通过（通过的正是 urgency 对照组），修复后全绿。plugin-charts 129/129、plugin-dashboard 156/156。

真机 UI（app-showcase 真后端 + console dev，真实 seed 数据）：按 issue 原样造 dataset 维度名 type + pie/donut widget，同一页面只切源码做 A/B：

状态 图例 DOM
修复前 text: "" / swatches: 5（两个 widget 都是裸色点）
修复后 text: "BacklogDoneIn ProgressIn ReviewTo Do"
showLegend:false / true 并排 只剩 1 个 legend wrapper，false 那侧图例消失

对照：原生 Chart Gallery 里 status/priority 维度的饼/环图两态都正常 —— 触发条件确实是维度名与 recharts legend item 自带属性撞名，所以 showcase 一直没盖住这个 bug。

未动

packages/components/src/ui/chart.tsx 有同一 helper 的副本、同样的 bug，但它没从 index 导出、无人引用，属于死代码，未顺手改以免扩大 diff。

🤖 Generated with Claude Code

@vercel

vercel Bot commented Aug 1, 2026

Copy link
Copy Markdown

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

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
objectui Ignored Ignored Aug 1, 2026 6:08am

Request Review

@github-actions

github-actions Bot commented Aug 1, 2026

Copy link
Copy Markdown
Contributor

✅ Console Performance Budget

Metric Value Budget
Main entry (gzip) 28.1 KB 350 KB
Entry file index-CCBrDzrN.js —
Status PASS —

📦 Bundle Size Report

Package Size Gzipped
app-shell (index.js) 8.45KB 3.08KB
app-shell (runtime-config.js) 7.42KB 2.32KB
app-shell (types.js) 0.01KB 0.04KB
app-shell (urlParams.js) 7.57KB 2.97KB
auth (AuthContext.js) 0.31KB 0.24KB
auth (AuthGuard.js) 1.17KB 0.53KB
auth (AuthProvider.js) 22.10KB 4.37KB
auth (AuthShell.js) 3.49KB 1.40KB
auth (ForgotPasswordForm.js) 12.12KB 3.41KB
auth (LoginForm.js) 17.86KB 5.29KB
auth (PreviewBanner.js) 0.90KB 0.50KB
auth (RegisterForm.js) 6.43KB 2.09KB
auth (SocialSignInButtons.js) 9.60KB 3.89KB
auth (UserMenu.js) 3.40KB 1.22KB
auth (auth-gate-events.js) 1.29KB 0.66KB
auth (authStyles.js) 5.04KB 1.72KB
auth (createAuthClient.js) 35.76KB 9.11KB
auth (createAuthenticatedFetch.js) 4.37KB 1.69KB
auth (index.js) 2.35KB 1.07KB
auth (org-roles.js) 6.66KB 2.78KB
auth (phone-identifier.js) 1.11KB 0.66KB
auth (types.js) 0.59KB 0.35KB
auth (useAuth.js) 4.91KB 0.87KB
auth (useIsWorkspaceAdmin.js) 1.61KB 0.85KB
collaboration (CommentThread.js) 18.38KB 4.49KB
collaboration (LiveCursors.js) 3.17KB 1.27KB
collaboration (PresenceAvatars.js) 3.65KB 1.42KB
collaboration (PresenceProvider.js) 2.79KB 1.13KB
collaboration (index.js) 1.25KB 0.53KB
collaboration (useCommentSearch.js) 1.98KB 0.88KB
collaboration (useConflictResolution.js) 7.75KB 1.86KB
collaboration (useMentionNotifications.js) 1.81KB 0.68KB
collaboration (usePresence.js) 6.33KB 1.84KB
collaboration (useRealtimeSubscription.js) 7.91KB 2.01KB
components (index.js) 476.12KB 104.42KB
core (index.js) 2.25KB 0.80KB
create-plugin (index.js) 9.28KB 2.98KB
data-objectstack (index.js) 136.20KB 34.74KB
fields (index.js) 223.45KB 54.66KB
i18n (LocalizationContext.js) 1.76KB 0.96KB
i18n (currency.js) 1.22KB 0.64KB
i18n (i18n.js) 4.32KB 1.77KB
i18n (index.js) 2.46KB 0.96KB
i18n (pickLocalized.js) 1.70KB 0.83KB
i18n (provider.js) 5.37KB 1.72KB
i18n (useObjectLabel.js) 26.14KB 6.07KB
i18n (useSafeTranslation.js) 3.26KB 1.44KB
layout (index.js) 38.44KB 10.66KB
mobile (MobileProvider.js) 0.92KB 0.49KB
mobile (ResponsiveContainer.js) 0.94KB 0.38KB
mobile (breakpoints.js) 1.51KB 0.70KB
mobile (createOfflineDataSource.js) 5.61KB 1.74KB
mobile (index.js) 1.50KB 0.62KB
mobile (offlineQueue.js) 3.91KB 1.35KB
mobile (pwa.js) 0.97KB 0.49KB
mobile (serviceWorker.js) 1.48KB 0.62KB
mobile (serviceWorkerSource.js) 3.41KB 1.48KB
mobile (useBreakpoint.js) 1.54KB 0.65KB
mobile (useGesture.js) 6.96KB 1.98KB
mobile (useOfflineSync.js) 1.99KB 0.72KB
mobile (usePullToRefresh.js) 2.53KB 0.85KB
mobile (useResponsive.js) 0.71KB 0.42KB
mobile (useResponsiveConfig.js) 1.36KB 0.63KB
mobile (useSpecGesture.js) 4.05KB 1.53KB
mobile (useTouchTarget.js) 1.01KB 0.54KB
permissions (MePermissionsProvider.js) 8.75KB 3.06KB
permissions (PermissionContext.js) 0.31KB 0.25KB
permissions (PermissionGuard.js) 0.89KB 0.45KB
permissions (PermissionProvider.js) 3.67KB 1.12KB
permissions (evaluator.js) 4.41KB 1.44KB
permissions (index.js) 0.91KB 0.41KB
permissions (store.js) 0.91KB 0.42KB
permissions (useFieldPermissions.js) 1.28KB 0.52KB
permissions (usePermissions.js) 1.55KB 0.71KB
plugin-ai (index.js) 15.71KB 3.79KB
plugin-calendar (index.js) 44.90KB 12.35KB
plugin-charts (index.js) 60.53KB 17.12KB
plugin-chatbot (index.js) 180.09KB 42.72KB
plugin-dashboard (index.js) 111.81KB 28.80KB
plugin-designer (index.js) 210.51KB 42.50KB
plugin-detail (index.js) 222.45KB 54.50KB
plugin-editor (index.js) 2.46KB 1.10KB
plugin-form (index.js) 111.35KB 26.93KB
plugin-gantt (index.js) 162.26KB 39.53KB
plugin-grid (index.js) 183.29KB 48.56KB
plugin-kanban (index.js) 47.82KB 13.18KB
plugin-list (index.js) 104.62KB 25.18KB
plugin-map (index.js) 16.80KB 5.24KB
plugin-markdown (index.js) 13.65KB 4.67KB
plugin-report (index.js) 40.32KB 10.53KB
plugin-timeline (index.js) 25.75KB 7.32KB
plugin-tree (index.js) 8.34KB 2.82KB
plugin-view (index.js) 83.54KB 20.39KB
providers (DataSourceProvider.js) 0.75KB 0.39KB
providers (MetadataProvider.js) 1.37KB 0.59KB
providers (ThemeProvider.js) 1.90KB 0.85KB
providers (UploadProvider.js) 11.71KB 3.53KB
providers (index.js) 0.44KB 0.22KB
providers (types.js) 0.01KB 0.04KB
react-runtime (index.js) 5.67KB 2.37KB
react (LazyPluginLoader.js) 3.77KB 1.33KB
react (SchemaRenderer.js) 19.28KB 6.38KB
react (data-invalidation.js) 5.05KB 2.08KB
react (index.js) 1.02KB 0.55KB
sdui-parser (codegen.js) 4.09KB 1.74KB
sdui-parser (index.js) 3.47KB 1.54KB
sdui-parser (parse.js) 10.04KB 2.82KB
sdui-parser (types.js) 0.29KB 0.24KB
sdui-parser (validate.js) 4.69KB 1.48KB
types (ai.js) 0.20KB 0.17KB
types (api-types.js) 0.20KB 0.18KB
types (app.js) 2.87KB 0.99KB
types (base.js) 0.20KB 0.18KB
types (blocks.js) 0.20KB 0.18KB
types (complex.js) 0.20KB 0.18KB
types (crud.js) 0.20KB 0.18KB
types (data-display.js) 0.20KB 0.18KB
types (data-protocol.js) 0.20KB 0.19KB
types (data.js) 0.20KB 0.18KB
types (designer.js) 1.87KB 0.85KB
types (disclosure.js) 0.20KB 0.18KB
types (error-code.js) 1.54KB 0.88KB
types (feedback.js) 0.20KB 0.18KB
types (field-types.js) 0.20KB 0.18KB
types (form.js) 0.20KB 0.18KB
types (http-retry.js) 4.32KB 2.02KB
types (index.js) 2.45KB 1.21KB
types (layout.js) 0.20KB 0.18KB
types (managed-by.js) 0.19KB 0.18KB
types (mobile.js) 0.20KB 0.18KB
types (navigation.js) 0.20KB 0.18KB
types (objectql.js) 0.20KB 0.18KB
types (overlay.js) 0.20KB 0.18KB
types (permissions.js) 0.20KB 0.18KB
types (plugin-scope.js) 0.20KB 0.18KB
types (record-components.js) 0.20KB 0.19KB
types (record-semantics.js) 1.28KB 0.67KB
types (registry.js) 0.20KB 0.18KB
types (reports.js) 0.20KB 0.18KB
types (spec-report.js) 5.05KB 1.93KB
types (system-fields.js) 3.33KB 1.54KB
types (theme.js) 0.20KB 0.18KB
types (ui-action.js) 1.08KB 0.64KB
types (views.js) 0.20KB 0.18KB
types (widget.js) 0.20KB 0.18KB

Size Limits

  • ✅ Core packages should be < 50KB gzipped
  • ✅ Component packages should be < 100KB gzipped
  • ⚠️ Plugin packages should be < 150KB gzipped

@baozhoutao @claude
fix(charts): name the slices — pie/donut legends lost their labels to…
356de51 
… a `type` dimension (#3135)

A dashboard pie whose category dimension is named `type` ("按类型分布" — a
staple) rendered a legend of anonymous colour dots: swatches, no text. The
label came from the shadcn config helper, which read the LEGEND ITEM's own
same-named prop before the data row — and recharts legend items carry a `type`
of their own (the icon shape, "rect"). So `nameKey="type"` resolved to "rect",
missed the config, and rendered nothing. `color` collided the same way. Read
the data row first: that is what `nameKey` was pointing at all along.

Two adjacent gaps, same report:
- the pie/donut branch drew its legend unconditionally, so `showLegend: false`
  did nothing;
- `DatasetWidget` never forwarded the widget's `chartConfig` at all, so the
  declared `showLegend` was inert metadata either way — `true` only "worked"
  because on is the renderer's default.

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

Reviewers

No reviews

Assignees

No one assigned

Labels

plugin: charts plugin tests

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

console: 仪表盘 pie/donut 图 showLegend:true 不渲染图例——单色扇区无从辨认分类

1 participant

@baozhoutao