Skip to content

Chart-family presentation presets: extend the single Style selector for Bar, Column, Area, and Pie #258

Description

@BorisTyshkevich

Problem

Line and Area have a useful Style control, while Bar, Column, and Pie need the
same compact preset UX without adding renderer types such as stacked-bar,
doughnut, or compact-column.

These variants share the result contract of their base chart type. They belong
in the existing Style selector and in the canonical panel.cfg.style object.

Goal

Keep the standard control row compact:

Type | Style | X | Y | Series

Presets update one type-specific object:

panel.cfg.style

Advanced combinations remain editable in Spec and appear as a disabled
Custom selection when they match no named preset.

Presets

Bar and Column

Bar remains horizontal and Column remains vertical. Both expose:

Preset Mode Density Scale Legend Grid Axes
Grouped grouped normal zero auto auto show
Stacked stacked normal zero auto auto show
Compact grouped compact zero auto auto show
Joined grouped joined zero auto auto show
Minimal grouped compact zero hide hide show
Data range grouped normal data auto auto show
{
  "type": "bar",
  "style": {
    "mode": "stacked",
    "density": "normal",
    "scale": "zero",
    "legend": "auto",
    "grid": "auto",
    "axes": "show"
  }
}

An explicit scale: "auto" uses the chart-family default: Bar and Column are
zero-based. scale: "data" opts into the data range.

Area

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

Stacking is additive visualization only. Do not normalize values or add
percentage stacking.

Pie

Preset Shape Legend Frame
Pie pie show normal
Donut donut show normal
Compact donut hide compact

Donut maps to a fixed 60% cutout. Compact reduces layout padding, retains
tooltips, and is intended for small tiles.

Canonical type-specific Style branches

Line:
  curve, points, scale, legend, grid, axes

Area:
  curve, points, stack, scale, legend, grid, axes

Bar / Column:
  mode, density, scale, legend, grid, axes

Pie:
  shape, legend, frame

Unknown fields and future string values remain valid. Type switching preserves
the complete style object, including dormant fields, so switching back is
lossless. Each renderer reads only fields relevant to its current type.

There is no panel.cfg.display, Display selector, compatibility copy, or Spec
version bump.

Renderer mapping

  • Grouped Bar/Column: both axes have stacked = false.
  • Stacked Bar/Column: both axes have stacked = true.
  • Compact density: categoryPercentage = 0.9, barPercentage = 0.95.
  • Joined density: both percentages are 1, with borderRadius = 0.
  • Stacked Area: one shared stack id and a stacked value axis.
  • Pie: cutout = 0; Donut: cutout = 60%.
  • Explicit scale: "auto": Line/Area use the data-range default; Bar/Column
    use the zero-based default.

Data semantics

This issue changes presentation only. It must not change X grouping,
duplicate-cell SUM aggregation, Series pivot, selected Y measures, row caps,
or SQL ownership of values. Joined spacing is not a Histogram contract.

Tests

Cover every exact preset and Custom state; grouped/stacked and density mapping;
Area overlay/stack without normalization; Pie/Donut/Compact; dormant-field and
unknown-extension preservation; schema/completion and share/Library round trips;
workbench/Dashboard parity; and direct explicit scale: "auto" rendering for
Line, Area, Bar, and Column.

Non-goals

  • Display selector or cfg.display
  • 100% stacking or per-dataset stack ids
  • waterfall or Histogram semantics
  • separate Doughnut type
  • exploded slices, slice labels, or arbitrary renderer options

Acceptance criteria

  • Bar and Column use one Style selector with six presets.
  • Area uses one Style selector with eight presets.
  • Pie uses one Style selector with Pie, Donut, and Compact.
  • Presets update all owned presentation fields under cfg.style.
  • Advanced unmatched combinations show Custom.
  • Doughnut is a Pie style, not a new type.
  • Type switching preserves complete dormant style data.
  • Bar/Column explicit scale: "auto" remains zero-based.
  • Existing data semantics remain unchanged.
  • Schema and completion document the type-specific Style branches.
  • Workbench and Dashboard render identically from the same Spec.
  • No Display selector or cfg.display is added.
  • npm test passes with the coverage gate.
  • npm run build succeeds.
  • No new runtime dependency is added.

Definition of done

Bar, Column, Area, and Pie gain their useful Grafana-like variants through the
same single Style control, while the Spec retains exact control over every
type-specific presentation field in one canonical object.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions