Chart panels: extend the Style selector with complete presentation presets

[BorisTyshkevich]

Goal

Extend the existing Line and Area Style selector from four options to seven complete presets:

Clean
Smooth
Stepped
Points
Zero-based
Minimal
Sparkline

The toolbar remains:

Type | Style | X | Y | Series

All detailed tuning is stored under:

panel.cfg.style

Advanced Spec combinations that do not exactly match a preset must appear as:

Custom

Custom is selected and disabled.

Do not add another selector.

---

Spec

Extend the existing chart style object:

{
  "type": "line",
  "x": 0,
  "y": [1],
  "series": null,
  "style": {
    "curve": "linear",
    "points": "auto",
    "scale": "data",
    "legend": "auto",
    "grid": "auto",
    "axes": "show"
  }
}

Supported values:

style.curve:
  linear
  smooth
  stepped

style.points:
  auto
  show
  hide

style.scale:
  auto
  zero
  data

style.legend:
  auto
  show
  hide

style.grid:
  auto
  show
  hide

style.axes:
  show
  hide

Unknown fields and future string values remain preserved.

No Spec version bump.

---

Presets

Line

Preset	Curve	Points	Scale	Legend	Grid	Axes
Clean	linear	auto	data	auto	auto	show
Smooth	smooth	auto	data	auto	auto	show
Stepped	stepped	auto	data	auto	auto	show
Points	linear	show	data	auto	auto	show
Zero-based	linear	auto	zero	auto	auto	show
Minimal	linear	hide	data	hide	hide	show
Sparkline	linear	hide	data	hide	hide	hide

Area

Use the same presets.

Area keeps its existing fill behavior.

---

Defaults

For Line and Area without an explicit style:

curve = linear
points = auto
scale = data
legend = auto
grid = auto
axes = show

Existing saved charts remain valid.

---

Rendering rules

Curve

linear:
  tension = 0
  stepped = false

smooth:
  tension = 0
  cubicInterpolationMode = monotone
  stepped = false

stepped:
  tension = 0
  stepped = after

Points

show:
  pointRadius = 2
  pointHoverRadius = 4
  pointHitRadius = 8

hide:
  pointRadius = 0
  pointHoverRadius = 3
  pointHitRadius = 8

auto:
  show only when:
    labels.length <= 60
    datasets.length <= 4

Use final chart labels and datasets after aggregation and Series pivoting.

Scale

zero:
  beginAtZero = true

data:
  beginAtZero = false

auto:
  Line/Area default to data

Legend

show:
  always visible

hide:
  always hidden

auto:
  visible for multiple datasets

Grid

show:
  visible

hide:
  hidden

auto:
  workbench visible
  Dashboard hidden

Axes

show:
  render both axes

hide:
  hide both axes

Sparkline must keep:

• tooltips;
• hover targets;
• responsive sizing;
• chart data;
• existing colors.

Sparkline must hide:

• axes;
• grid;
• legend;
• normal point markers.

---

Preset matching

Add a pure exact matcher:

chartStylePreset(style, type)

Return one of:

clean
smooth
stepped
points
zero
minimal
sparkline
custom

Rules:

• normalize missing known fields;
• compare every known field owned by the preset;
• ignore unknown extension fields;
• do not choose the closest preset;
• unsupported known values resolve to custom;
• an exact default configuration resolves to clean.

Example:

{
  "curve": "smooth",
  "points": "hide",
  "scale": "data",
  "legend": "hide",
  "grid": "show",
  "axes": "show"
}

must resolve to:

custom

---

Applying a preset

Add a pure helper:

applyChartStylePreset(style, preset, type)

Requirements:

• return a new object;
• do not mutate the input;
• update every known field owned by the selected preset;
• preserve unknown extension fields;
• fall back to Clean for an unknown preset id.

Example:

{
  "curve": "smooth",
  "points": "hide",
  "future": {
    "keep": true
  }
}

Applying Sparkline returns:

{
  "curve": "linear",
  "points": "hide",
  "scale": "data",
  "legend": "hide",
  "grid": "hide",
  "axes": "hide",
  "future": {
    "keep": true
  }
}

---

UI

The Style selector appears only for Line and Area.

Order:

Type
Style
X
Y
Series

When the current style does not exactly match a preset:

1. append Custom;
2. mark it selected;
3. mark it disabled.

Choosing a named preset:

• writes the complete preset fields;
• preserves unknown extensions;
• triggers one Spec writeback;
• triggers one repaint.

Switching away from Line/Area must preserve the full style object.

Switching back must restore it.

---

Schema

Extend the existing chart style schema with:

scale
legend
grid
axes

Keep:

additionalProperties: true

Completion must offer all supported keys and values.

Unknown future string values remain storable and render through safe defaults.

---

Persistence

The complete style object must survive:

• saved queries;
• Library import/export;
• share links;
• OAuth restoration;
• Dashboard rendering;
• detached views;
• chart type switching;
• chart-to-non-chart switching;
• stale-role re-derivation.

Deep-clone the full style object.

---

Files

Expected changes:

schemas/query-spec-v1.schema.json
schemas/generated/library-v2.bundle.schema.json
src/generated/json-schema-validators.js
src/generated/json-schemas.js
src/core/chart-data.js
src/ui/chart-render.js
tests/unit/chart-data.test.js
tests/unit/chart-render.test.js
tests/unit/panel-cfg.test.js
tests/unit/dashboard.test.js
tests/unit/share.test.js
tests/unit/library-codec.test.js
tests/unit/main.test.js
tests/unit/spec-schema.test.js
tests/unit/spec-completion.test.js

No new runtime dependency.

---

Tests

Normalization

Cover:

• missing style;
• partial style;
• every supported value;
• invalid fields falling back independently;
• input object is not mutated;
• unknown fields are preserved by preset application.

Preset matching

Cover:

• every exact preset;
• one-field differences resolve to Custom;
• unsupported known values resolve to Custom;
• unknown extension fields do not prevent an exact match.

Rendering

Cover:

• zero and data scale;
• legend show/hide/auto;
• grid show/hide/auto;
• axes show/hide;
• Sparkline behavior;
• existing curve behavior;
• existing point behavior;
• Area fill behavior;
• workbench and Dashboard rules.

UI

Cover:

• seven Style options for Line;
• seven Style options for Area;
• Style absent for other chart types;
• Custom selected and disabled for unmatched Spec;
• each preset writes exactly once;
• type switching preserves the style object.

Persistence

Cover:

• save/reload;
• import/export;
• share;
• OAuth;
• Dashboard;
• detached view;
• stale-role re-derivation.

---

Non-goals

Do not include:

• another toolbar selector;
• numeric axis min/max;
• logarithmic axes;
• dual axes;
• axis titles;
• per-axis settings;
• arbitrary Chart.js options;
• storing a preset id in Spec.

---

Acceptance criteria

• Line and Area expose seven Style presets.
• All detailed settings live under panel.cfg.style.
• No additional selector is added.
• Unmatched advanced configurations show disabled selected Custom.
• Preset matching is exact.
• Preset application preserves unknown extensions.
• Sparkline hides axes, grid, legend, and normal points while retaining tooltips.
• Existing saved charts remain valid.
• Workbench and Dashboard use the same style semantics.
• Schema and completion are updated.
• Persistence paths retain the full style object.
• npm test passes.
• npm run build succeeds.
• No new runtime dependency is added.

---

Definition of done

Line and Area use one compact Style selector for common complete presentations.

Advanced authors can tune curve, points, scale, legend, grid, and axes directly in Spec. Any unmatched combination remains visible as Custom instead of being silently mapped to another preset.