Repository navigation
feat: pie and donut, rings, pictograph and waffle charts - #104
Merged
Merged
Conversation
The new "Pie / donut" style (group "Parts of a total") draws the card's entities as slices of one circle, sized by their current values, with a legend beside it (below it on a narrow card) giving each entity's colour, name, value and share. Shares are whole percentages that always add up to 100. A donut shows the total of its slices in the middle, with the shared unit or a caption of your own under it. Each slice is a circle drawn as a dash of the slice's length and turned to its start with a CSS transform, so slices grow in when the card appears and glide to their new size when a value changes. Animation is off when the card's animate option is off or the browser asks for reduced motion. Options, all in the editor's Chart section: shape: donut | pie (default donut) center: total | none (donut; default total) center_label: kWh today (line under the total; default the unit) color_by: series | bands | shades shade_color: green (for shades; default primary) gap: 2 (0 to 10; space between slices) rounded: true (donut slices get round ends) gradient: true (each slice fades lighter towards the middle) show_percent: false (hide the share column) A pie's gaps are lines in the card's background colour, so they stay the same width down to the centre; a donut's slices are shortened instead. Only positive numbers become slices. Unavailable, missing, zero and negative entities stay in the legend with a hollow swatch and no share, so nothing silently disappears; with nothing to draw the card shows an empty ring. Tapping a slice or legend row runs the entity's tap action (more-info by default). Drilling into a slice's own parts is not built: it needs a way to nest entities under a slice, which is a larger change. A navigate tap action to a view of the parts does the job meanwhile. The share maths, legend, option checks and Chart form live in src/chart/parts.ts, shared with the other "parts of a total" charts. Closes #15
The new "Rings" style (group "Parts of a total") draws each entity as its own ring, nested inside one another, each filled to the entity's value between its min and max: phone, tablet and watch battery in one dial, or progress on a few goals. The average of the values sits in the middle by default, or their total, or nothing. A legend beside the dial (below it on a narrow card) gives each ring's colour, name and value. Rings get thinner as there are more of them so the middle always has room for the number. Each fill grows in when the card appears and slides to its new length when a value changes; animation is off when the card's animate option is off or the browser asks for reduced motion. Options, all in the editor's Chart section: start_angle: -120 (degrees clockwise from the top; default 0) end_angle: 120 (default 270; after the start, at most 360 apart) center: average | total | none color_by: series | bands rounded_ends: false (default true) A dial that doesn't sweep down to the bottom is cropped, so a half dial doesn't leave an empty band under it. Unavailable and missing entities keep their ring's track with no fill, and their legend row shows the state. Tapping a ring or a legend row runs the entity's tap action (more-info by default). Shares src/chart/parts.ts (legend, centre number, option checks, Chart form) with the other "parts of a total" charts. Closes #16
The new "Pictograph" style (group "Parts of a total") draws each entity as
a row of repeated icons, filled up to its value, with the value and the
most it can be beside them ("7 / 10"): chores done today, glasses of
water, people at home, bins out.
The row runs from the entity's min to its max. With nothing else set, each
icon stands for one unit when that range is 20 or less, so a max of 10
gives ten icons; wider ranges get ten icons. A fraction part-fills the
last icon (5.5 of 8 glasses fills five and a half). Icons are clustered in
fives so they can be counted, and clusters wrap as a whole on a narrow
card. A row never has more than 100 icons; the scale stretches instead.
The icon is the entity's own icon if it has one, else the one picked in
the Chart section, else the entity's usual state icon, so each row can use
a different Material Design icon. Filled icons sweep in from the left one
after another when the card appears, and grow or shrink when a value
changes; animation is off when the card's animate option is off or the
browser asks for reduced motion.
Options, all in the editor's Chart section:
unit_icon: mdi:water-outline
per_icon: 2 (what each icon stands for; empty = automatic)
group_size: 5 (icons per cluster; 0 = no clusters)
color_by: series | bands
partial: false (fill whole icons only)
Unavailable and missing entities show a row of empty icons and their
state. Tapping a row runs the entity's tap action (more-info by default).
Shares src/chart/parts.ts (colours, option checks, Chart form) with the
other "parts of a total" charts.
Closes #17
The new "Waffle" style (group "Parts of a total") draws a grid of 100
squares, filled from the bottom row up. It reads well for "how much of
today's energy came from solar" or "how full is the storage".
With one entity the waffle fills to its value between its min and max.
With several, the squares are split between them by their share of the
total, always adding up to exactly 100, and the first entity's share is
shown in large type beside the grid ("64 %", "Solar") above a legend of
every entity's name, value and share. Choose "one per entity" to get a row
of small waffles side by side instead, each with its name and percentage.
Filled squares pop in one after another when the card appears and change
colour smoothly when the split changes; animation is off when the card's
animate option is off or the browser asks for reduced motion.
Options, all in the editor's Chart section:
waffles: one | each (default one)
color_by: series | bands
headline: false (hide the large first share)
show_percent: false (shares hidden; small waffles show the value)
Only positive numbers take squares. Unavailable, missing and negative
entities stay in the legend with a hollow swatch and no share, or as an
empty small waffle with their state; with nothing available the grid is
empty. Tapping an entity's squares, its legend row or its small waffle
runs its tap action (more-info by default).
Shares src/chart/parts.ts (share maths, legend, option checks, Chart form)
with the other "parts of a total" charts.
Closes #18
…he parts charts The pie, rings, pictograph and waffle branches each carried a copy of choice, cachedSchema, chartForm and SERIES_COLORS. They now come from src/editor/chart-editors.ts and src/chart/frame.ts.
…abel Both registered editor_rounded with different text, and strings are global, so whichever loaded last labelled both switches. They now share one label, Rounded ends.
github-actions
Bot
added
gauges
github-actions Bot
pushed a commit
that referenced
this pull request
Nov 6, 2026
## [2.0.0](v1.3.0...v2.0.0) (2026-11-06) ### ⚠ BREAKING CHANGES * on/off states now read as 1 and 0 on number charts, so a binary sensor on a line, area or column chart draws a 0/1 step instead of nothing. ### Features * Chartdeck 2.0, every remaining roadmap chart ([#111](#111)) ([3aa1f9b](3aa1f9b)), closes [#13](#13) [#14](#14) [#24](#24) [#25](#25) [#26](#26) [#27](#27) [#28](#28) [#29](#29) [#30](#30) [#31](#31) [#32](#32) [#33](#33) [#34](#34) [#35](#35) [#36](#36) [#37](#37) [#38](#38) [#40](#40) [#41](#41) [#42](#42) [#43](#43) [#44](#44) [#45](#45) [#46](#46) [#57](#57) [#58](#58) [#59](#59) [#82](#82) [#83](#83) [#84](#84) [#110](#110) * histogram, scatter, bubble, heatmap and box plot charts ([#106](#106)) ([1af60ee](1af60ee)), closes [#19](#19) [#20](#20) [#21](#21) [#22](#22) [#23](#23) * pie and donut, rings, pictograph and waffle charts ([#104](#104)) ([e596014](e596014)), closes [#15](#15) [#16](#16) [#17](#17) [#18](#18) ### Documentation * list the histogram, scatter, bubble, heatmap and box plot charts in the README ([bd6116f](bd6116f)) * list the pie, rings, pictograph and waffle charts in the README ([#107](#107)) ([886b1fc](886b1fc))
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
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.
Release 1.4.0, milestone 1.4.0 Sharing out a total. It adds four new whole-card chart styles in a new "Parts of a total" group in the style picker. They all draw from the entities' current values, so no history is involved.
Pie and donut (
style: pie)The card's entities become slices of one circle, sized by their current values, with a legend beside it (below it on a narrow card) giving each entity's colour, name, value and share. Shares are whole percentages that always add up to 100. A donut shows the total in the middle, with the shared unit or a caption of your own under it. Options in the Chart section:
shape(donut | pie),center(total | none),center_label,color_by(series | bands | shades),shade_color,gap(0 to 10),rounded,gradient,show_percent. Only positive numbers become slices; unavailable, missing, zero and negative entities stay in the legend with a hollow swatch and no share. Tapping a slice or legend row runs the entity's tap action. Drilling into a slice's own parts is not part of this release: it needs feat/drill-down (#44, milestone 1.11.0). A navigate tap action to a view of the parts does the job meanwhile.Rings (
style: rings)Each entity is its own ring, nested inside one another, each filled to the entity's value between its min and max. The average sits in the middle by default, or the total, or nothing. Options:
start_angle,end_angle,center(average | total | none),color_by(series | bands),rounded_ends. A dial that doesn't sweep down to the bottom is cropped.Pictograph (
style: pictograph)Each entity is a row of repeated icons, filled up to its value, with "7 / 10" beside it. One icon per unit when the range is 20 or less, else ten icons; fractions part-fill the last icon; icons cluster in fives and never exceed 100 per row. Options:
unit_icon,per_icon,group_size,color_by,partial.Waffle (
style: waffle)A 10 by 10 grid where each square is 1 %, filled from the bottom row up. One entity fills to its value between min and max; several split the squares by share (always exactly 100), with the first share in large type beside the grid.
waffles: eachgives one small waffle per entity instead. Options:waffles(one | each),color_by,headline,show_percent.Also in this PR
choice,cachedSchema,chartFormandSERIES_COLORS.src/chart/parts.tsnow re-exports them fromsrc/editor/chart-editors.tsandsrc/chart/frame.ts.editor_roundedwith different text. Strings are global, so whichever loaded last labelled both switches. They now share one label, "Rounded ends".All charts animate in and honour the card's
animateoption and reduced motion. Checked on ha-dev during the build, and again after merging onto main with the screenshot harness in light and dark. 481 tests pass, typecheck, lint and build are clean.Closes #15
Closes #16
Closes #17
Closes #18