Configurable time chart display settings (legend, tooltip, line style) - #2776
Configurable time chart display settings (legend, tooltip, line style)#2776alex-fedotyev wants to merge 1 commit into
Conversation
Add Show Legend, Hover Tooltip mode, and Line Style controls to the time chart Display Settings drawer, persisted on the tile config. - showLegend / tooltipMode / lineInterpolation are optional fields on SharedChartSettingsSchema, so existing tiles are unchanged and other display types ignore them. - The drawer gates the controls to line/area tiles (DisplayType.Line), mirroring the existing displayType-gated sections. - The renderer reads them through DBTimeChart into MemoChart: the legend prop combines with the config, the tooltip mode folds an explicit setting over the density default (resolveEffectiveTooltipMode), and the Area curve type uses the configured interpolation (default monotone). These stay app-side only. The v2 external API builds tile config by explicit per-displayType construction, so the fields are not part of the external contract yet; a follow-up will add v2 parity, OpenAPI, and docs. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 08960d7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Greptile SummaryAdds per-tile time-chart display controls and renderer support.
Confidence Score: 4/5The Raw SQL and PromQL persistence gap must be fixed before merging because users currently lose all three new display settings when saving those chart types. The renderer and builder-chart path preserve the new behavior, but explicit Raw SQL and PromQL saved-config field lists omit the values written by the drawer. Files Needing Attention: packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx and packages/app/src/components/ChartEditor/utils.ts
|
| Filename | Overview |
|---|---|
| packages/common-utils/src/types.ts | Adds constrained optional schema fields for legend visibility, tooltip mode, and line interpolation. |
| packages/app/src/components/ChartDisplaySettingsDrawer.tsx | Adds line-only controls with defaults matching existing renderer behavior. |
| packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx | Propagates the new settings into form state, but downstream Raw SQL and PromQL saved-config conversion drops them. |
| packages/app/src/components/DBTimeChart.tsx | Combines configured legend visibility with the caller override and passes tooltip and interpolation settings to the renderer. |
| packages/app/src/HDXMultiSeriesTimeChart.tsx | Resolves explicit tooltip modes over density defaults and consistently applies interpolation to base and emphasized series. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart LR
Drawer[Display Settings drawer] --> Form[EditTimeChartForm]
Form --> Saved[Saved chart config]
Saved --> DBChart[DBTimeChart]
DBChart --> Renderer[MemoChart]
Renderer --> Legend[Legend visibility]
Renderer --> Tooltip[Tooltip mode]
Renderer --> Lines[Line interpolation]
Reviews (1): Last reviewed commit: "feat(app): configurable time chart displ..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| setValue('showLegend', showLegend); | ||
| setValue('tooltipMode', tooltipMode); | ||
| setValue('lineInterpolation', lineInterpolation); |
There was a problem hiding this comment.
When a user applies these settings to a Raw SQL or PromQL line chart, the form records them here but the corresponding saved-config conversion branches omit all three fields, causing the selected legend, tooltip, and interpolation behavior to revert after saving.
1 participant
Summary
Makes three time-chart display behaviors configurable per tile from the Display Settings drawer, persisted on the tile config:
Auto,Single series,All series, orHidden.Autokeeps the density-based behavior from Improve time chart hover for dense charts #2722 (a single-series tooltip on dense charts, the full list otherwise); the other values pin the mode.Linear,Smooth, orStepinterpolation for the drawn series (Improve time chart hover for dense charts #2722 hardcodes smooth/monotone).The controls are gated to line/area tiles (
DisplayType.Line), mirroring the existing display-type-gated sections in the drawer. All three fields are optional, so existing tiles are unchanged and fall back to today's behavior (legend on,Autotooltip, smooth line).Stacked on #2722. This PR is the base branch's child; it targets
alex/timechart-dense-hoverand should be rebased ontomainonce #2722 lands.How it is wired
showLegend/tooltipMode/lineInterpolationare optional fields onSharedChartSettingsSchema(packages/common-utils/src/types.ts), so builder, raw SQL, and PromQL configs all carry them, mirroring the existingcolor/colorRules/backgroundChart/alternateRowBackgroundUI-gated fields.ChartDisplaySettingsDraweradds the controls;EditTimeChartFormwatches and persists them through the same path as the other display settings.DBTimeChartreads them through toMemoChart: the legend prop is combined with the config (AND, so a surface that never shows a legend still wins), the tooltip mode folds an explicit setting over the density default via a newresolveEffectiveTooltipModehelper, and the rechartsAreatypeuses the configured interpolation.Scope: app-side only
The v2 external API builds tile config by explicit per-display-type construction (
packages/api/src/routers/external-api/v2/utils/dashboards.ts), not a pass-through spread, so new shared-schema fields do not reach the external contract or the generated OpenAPI until they are added there explicitly. That parity work (v2 mapping, OpenAPI, customer docs, round-trip tests) is tracked in #2777 and is a prerequisite for taking this out of draft.[schema-skip: allow] the schema change is intentionally app-only this PR; external API parity is the tracked follow-up above.
Test plan
packages/common-utilsunit: schema round-trip for the three fields across builder / raw SQL / PromQL saved configs, optionality (a config omitting them still parses), and enum rejection for out-of-range values.packages/appunit (ChartDisplaySettingsDrawer.test.tsx): controls render for line tiles and are hidden for stacked-bar and table tiles; defaults emit (legend on,Auto,Smooth);Show LegendandLine Styleemit changed values on apply; an existingtooltipModeround-trips through display and apply.packages/appunit (HDXMultiSeriesTimeChart.test.ts):resolveEffectiveTooltipModeprecedence (an explicit mode beats the density default;Auto/unset falls back; stacked bars stayallunderAuto).make ci-lintclean on both packages (0 errors); full app + common-utils lint and typecheck green.Before un-draft
mainand switch the PR base tomain.[ui-check: allow] live UI verification is deferred to the un-draft gate above; the drawer controls and render-through logic are covered by the unit tests in the test plan. This PR stays in draft until that pass is done.