[FLINK-40046][runtime-web] Upgrade @antv/g2 to v5#28602
Draft
spuru9 wants to merge 1 commit into
Draft
Conversation
Collaborator
spuru9
force-pushed
the
fix/FLINK-40046-antv-g2-v5
branch
3 times, most recently
from
39c26b2 to
6236ab0
Compare
@antv/g2 5 is a complete rewrite with a declarative, encode-based API, so
the two charts that use it are rewritten against v5:
- job-chart (metrics line chart): build the line via encode('x'/'y'/'color'/
'shape') + scale/axis/style instead of the v4 position/color/shape/size
chain.
- job-timeline (Gantt-style interval charts): coordinate({transform:
[{type:'transpose'}]}), encode x/y/color, map status colours through a
color scale built from ConfigService.COLOR_MAP, and replace the removed
getSnapRecords click handling with the 'interval:click' event (e.data.data).
Width for changeSize is read from the container element (chart.width is
gone in v5).
v5 specifics worth noting:
- Data is set on the mark (mark.data(...)) and, because changeSize() triggers
an internal render, it is set before changeSize so the render always has
data (g2's column extraction throws on null data).
- The time axis uses a d3 timeFormat function for labelFormatter; g2 5's
string labelFormatter goes through the numeric d3-format and rejects a
time pattern.
- angular.json: allowlist g2 v5's CommonJS transitives (@antv/coord,
color-string, html2canvas, pdfast, svg-path-parser) to avoid build warnings.
- Refresh the NOTICE for the new g2 v5 dependency tree.
Verified on a live 2.4-SNAPSHOT dashboard (standalone cluster + State machine
job): the vertex timeline renders, drilling into a vertex shows its subtask
timeline, and a metric renders as a live line chart.
Generated-by: Claude Code (claude-opus-4-8)
spuru9
force-pushed
the
fix/FLINK-40046-antv-g2-v5
branch
from
6236ab0 to
ea1863f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What is the purpose of the change
Third and final visualization-library migration under FLINK-40033: upgrade
@antv/g2from v4 to v5. g2 5 is a complete rewrite with a declarative, encode-based API, so the two components using it are rewritten: job-chart (real-time metrics line chart) and job-timeline (Gantt-style job / subtask timeline).Brief change log
package.json/ lockfile:@antv/g2^4.2.12→^5.4.8.encode+scale/axis/styleinstead of the v4position/color/shape/sizechain.coordinate({ transform: [{ type: 'transpose' }] }); status colours via a colorscalefromConfigService.COLOR_MAP; the v5interval:clickevent replaces the removedgetSnapRecords/_origindrill-down;changeSizewidth read from the container (chart.widthis gone).changeSize()(g2's column extraction throws on null data); the time axislabelFormattermust be ad3-time-formatfunction (a string formatter goes through numericd3-formatand rejects time patterns).Verifying this change
Verified end-to-end on a live dashboard (Flink 2.4-SNAPSHOT standalone cluster, multi-vertex streaming job, real browser):
HH:mm:ss.SSStime axis; clicking a bar drills into the subtask timeline.HH:mm:ssx-axis and updates as samples arrive.npm run buildandnpm run lintpass with no warnings.Does this pull request potentially affect one of the following parts:
@Public(Evolving): noDocumentation
Was generative AI tooling used to co-author this PR?
Generated-by: Claude Code (claude-opus-4-8)