microsoft / microsoft/flint-chart
Waterfall Chart ignores field_display_names and leaks internal __wf_lead field into axis title
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 4.2k
- Forks
- 235
- Avg merge
- 17h 45m
- Merged PRs (30d)
- 11
Description
Summary
On Waterfall charts, field_display_names is ignored and the internal window-transform field __wf_lead leaks into the x-axis title. Line/Bar/Area charts apply field_display_names correctly, so this is Waterfall-template–specific.
Verified against flint-chart@0.3.0 (via flint-chart-mcp@0.3.0). Source refs at main (commit 95b2552).
Repro
compile_chart, backend vegalite:
{
"chart_spec": {
"chartType": "Waterfall Chart",
"encodings": { "x": { "field": "week" }, "y": { "field": "dau_change" } }
},
"field_display_names": { "dau_change": "DAU weekly change", "week": "Week (Mon, JST)" }
}
Observed: compiled spec has "title": "dau_change" on the y encoding; the x-axis title renders as week, __wf_lead. Neither display name is applied.
Expected: y-axis title "DAU weekly change", x-axis title "Week (Mon, JST)", no internal field in any title.
The same input on Line / Bar / Area charts applies both display names correctly — so the generic assembler path is fine; only the Waterfall template is affected.
Root cause
packages/flint-js/src/vegalite/templates/waterfall.ts, instantiate():
-
buildVLEncodings(invegalite/assemble.ts) already writes the display name ontoresolvedEncodings.{x,y}.title. The template destructuresctx.resolvedEncodingsbut discards those titles, hardcoding the raw field name:const { x, y, color, column, row } = ctx.resolvedEncodings; // ... y: { field: "__wf_prev_sum", type: "quantitative", title: yField, // ← raw field, ignores y.title (the display name) ... }, -
The shared
xEncsets no title, so VL auto-derives it from the field. The connector-rule layer addsx2: { field: "__wf_lead" }(also untitled), and VL concatenates every untitled field on the shared x scale into one axis title →"week, __wf_lead".
Suggested fix
Use the titles the assembler already resolved, and suppress internal fields:
const xTitle = x?.title ?? xField;
const yTitle = y?.title ?? yField;
const xEnc = {
field: xField,
type: "ordinal" as const,
sort: null,
axis: { labelAngle: -45 },
title: xTitle, // was absent
};
// bar layer:
y: { field: "__wf_prev_sum", type: "quantitative", title: yTitle, /* ... */ },
// connector layer — internal fields must never title the shared axis:
x: { field: xField, type: "ordinal", sort: null, bandPosition: 0, title: null },
x2: { field: "__wf_lead", bandPosition: 1, title: null },
General guard: any layer encoding bound to a __wf_* / internal field should set title: null (or axis: { title: null }) so VL never surfaces it.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/flint-js/src/vegalite/templates/waterfall.ts, especially instantiate(), then compare its resolved encodings with buildVLEncodings in vegalite/assemble.ts. Reproduce the compile_chart example with the Vega-Lite backend and verify that the configured x and y display names appear while __wf_lead does not contribute to any axis title.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 82/100