Skip to content

fix: honor data prop when spec is supplied in openinula-vchart - #4694

Open
dyk1454683243-sudo wants to merge 1 commit into
VisActor:developfrom
dyk1454683243-sudo:cursor/fix-openinula-vchart-data-prop-4657-d3eb
Open

dyk1454683243-sudo wants to merge 1 commit into
VisActor:developfrom
dyk1454683243-sudo:cursor/fix-openinula-vchart-data-prop-4657-d3eb

Conversation

@dyk1454683243-sudo

@dyk1454683243-sudo dyk1454683243-sudo commented Sep 20, 2026

Copy link
Copy Markdown
Contributor

Fixes #4657

🤔 This is a ...

  • Bug fix

🔗 Related issue link

Fixes #4657

🔗 Related PR link

Reference implementation: packages/react-vchart/src/charts/BaseChart.tsx (added in d69cb49fb for #2443). This PR does not stack on #4693 / #4678.

💡 Background and solution

@visactor/openinula-vchart documents a data prop on BaseChartProps, but the hasSpec path ignored it:

  1. Initial create: parseSpec used props.spec as-is and never merged props.data.
  2. Data-only re-render: the update effect compared only eventsBinded.current.spec with props.spec. The same spec object plus a new data value was a no-op.
  3. Types: <VChart /> omitted data from VChartProps, so the documented <VChart spec={...} data={...} /> usage was not in the public type.

react-vchart already does the intended work. This ports that behavior into openinula-vchart only:

📝 Changelog

Language Changelog
🇺🇸 English fix: honor the data prop when spec is also supplied in @visactor/openinula-vchart, including data-only updates
🇨🇳 Chinese 修复:@visactor/openinula-vchart 在同时传入 specdata 时使用 data,并在仅 data 变化时更新图表

☑️ Self-Check before Merge

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

Tests

Neither @visactor/openinula-vchart nor @visactor/react-vchart has a component lifecycle test harness (no package test script, no jest config, no existing wrapper tests to mirror). Coverage is therefore a manual repro rather than a new harness.

Verification

  • eslint --quiet on packages/openinula-vchart/src/charts/BaseChart.tsx and src/VChart.tsx: clean (0 errors). Remaining warnings are pre-existing (no-explicit-any, react-hooks/exhaustive-deps).
  • Prettier check on the same files: clean.
  • Package tsc --noEmit cannot typecheck this wrapper in isolation here (@visactor/vchart types are not built; openinula type mismatches are pre-existing on develop).
  • Full rush update failed in this Linux environment on canvas native compile (missing pixman); not required for this TSX-only change.
  • GitHub Actions TEST CI / Check of pull request / size / bug-server jobs are action_required (fork workflow approval).

Manual repro

import { VChart } from '@visactor/openinula-vchart';

const spec = {
  type: 'bar',
  xField: 'x',
  yField: 'y',
  data: [{ id: 'id0', values: [{ x: 'A', y: 1 }] }]
};

const firstData = [{ id: 'id0', values: [{ x: 'A', y: 10 }] }];
const secondData = [{ id: 'id0', values: [{ x: 'A', y: 99 }] }];

// 1) Initial: <VChart spec={spec} data={firstData} />
//    Expected: chart uses firstData (y=10), not spec.data (y=1).
//
// 2) Re-render with the same spec object and data={secondData}
//    Expected: chart updates to y=99 (updateFullDataSync), not a no-op.

Acceptance:

  • Initial render with both spec and data uses data.
  • Re-render with the same spec object and new data updates the chart.

Merge a valid data prop into the supplied spec on create, and call
updateFullDataSync when only data changes. Matches react-vchart.

Related VisActor#4657

Co-authored-by: David <dyk1454683243-sudo@users.noreply.github.com>

@xile611 xile611 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@dyk1454683243-sudo 已完成对 8094b5b 的审查。带固定 id 的 data 初始覆盖、data-only 更新和 spec/data 同时更新均已验证通过,但新增更新路径还有两个已复现的 P2 问题,详见行内意见:

  1. 不带 id 的合法 data 首次渲染正常,后续替换 data 后仍显示旧值。
  2. 撤销可选 data 属性后,没有恢复 spec.data,导致更新与重新挂载的结果不一致。

验证使用实际 OpenInula render/act 生命周期以及 VChart 的 Node + canvas 渲染,未 mock 数据更新方法:5 个用例中 3 个通过,以上 2 个失败。ESLint 和 Prettier 检查通过。现有 TEST CI 只运行 VChart 核心测试,没有覆盖 OpenInula 封装层。

请修复这两个数据更新边界并加入组件生命周期回归测试后再合并。建议仅在能够按已有 id 更新时使用 updateFullDataSync;其他合法输入和撤销 data 覆盖时,复用解析有效 spec 后的标准更新路径。

Comment thread packages/openinula-vchart/src/charts/BaseChart.tsx
enableExitAnimation: false
});
handleChartRender();
} else if (eventsBinded.current.data !== props.data) {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

[P2] 移除 data 属性后应恢复 spec.data

parseSpec 在 data 缺省时使用 spec.data,但 data 从有效值变为 undefined 时,这个分支会调用 updateFullDataSync(undefined),实际不会恢复 spec.data。

已复现:同一个 spec 对象内的数据为 [{ id: 'id0', values: [{ x: 'A', y: 1 }] }];首次用 data 属性覆盖为同 id、y:10;随后从 <VChart spec={spec} data={override} /> 更新为 <VChart spec={spec} />,图表仍显示 10,而重新挂载相同 props 会显示 1。

请在撤销可选 data 覆盖时重新解析有效 spec 并更新,使更新与首次渲染保持相同的数据优先级,同时加入撤销覆盖的回归测试。

@xile611

xile611 commented Sep 20, 2026

Copy link
Copy Markdown
Contributor

@dyk1454683243-sudo 最初的设计是,如果用户设置了spec,完全以spec为主的,不会读其他属性去更新data;所以才有现在的问题;

如果需要同时支持 spec + data,CR的一个特殊情况确实需要考虑一下

@Issues-translate-bot

Copy link
Copy Markdown

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿


@dyk1454683243-sudo The original design is that if the user sets the spec, it will be completely based on the spec and will not read other attributes to update the data; that is why the current problem exists;

If you need to support spec + data at the same time, a special case of CR really needs to be considered

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] openinula-vchart ignores data prop when spec is provided

4 participants