Repository navigation
v1.0.1
A tidy-up release. After 1.0 I rendered every style around 800 different ways (every combination of the show options, one and five entities, one to three columns, narrow and wide cards, sensors that are offline or don't exist) and fixed everything that didn't look right. Nothing about your existing cards needs changing.
Fixed
Gauges
- Turning off Show value on a ring or arc now moves the icon into the middle of the dial and makes it bigger, instead of leaving it parked above an empty space.
- The needle gauge closes up when its value is hidden. It used to keep a blank strip where the number had been, and an offline needle kept its "Unavailable" line, so names in a row of needles didn't line up. Now they all line up, and an offline needle says so inside its dial.
- The three-quarter arc no longer has an empty band under its open bottom.
- "Entity not found", and longer translations of "Unavailable", used to run into the ring. Status text now wraps onto two lines where that helps and shrinks to fit the hollow. Chinese and Japanese text is measured properly too.
- Under a full-height needle, a status that fits on one line stays on one line.
- Ring, arc and needle gauges shrink to fit a very narrow card instead of sticking out of it. In normal-sized cards they stay full size and still sit side by side.
- On iPhone and Safari, ring and arc fills now have a solid colour to fall back on if their gradient can't be drawn, so the arc can't disappear.
Bars
- Setting more
columnsthan a card has room for used to overlap the gauges and squash the bars into slivers. Now the card simply uses fewer columns when it's too narrow (see Changed below). - A sensor whose entity id doesn't exist now gets a placeholder icon, so its bar lines up with the others instead of starting further left.
- With Show value off, bars, thin bars and tanks used to say nothing about a sensor that was offline or missing, so it just looked empty. They now show "Unavailable" or "Entity not found" either way, the same as the gauges.
- Segmented bars: the strips of cells now end at the same place on every row. A row for an offline sensor shows that on its name line, so its cells line up with the rest. With two or three columns, each column switches to the narrow layout on its own when it gets tight.
- Tanks are evenly spaced, their names can use the full width of the tile instead of being cut at 72 px, and a second row of tanks lines up under the first.
- Bar text on a see-through custom colour (something like
rgba(255, 255, 255, 0.15)) was white and hard to read in light themes. It now uses your theme's text colour on fills like that. - Titled cards reserve the right height in masonry dashboards, and the height estimate counts only the columns that actually fit, so masonry balances its columns better.
Visual editor
- Choosing Custom… for a band colour no longer rewrites the colour straight away. The text field opens with the current colour already in it, and nothing changes until you type a new one.
- Add band continues 10 above your last band even when that threshold was written as text in YAML (
from: "20"). It used to jump back to 0. - The threshold fields in Colours now show the unit the card actually displays: the entity's own unit if you set one, otherwise the card's, otherwise the sensor's.
- Decimals can be set from 0 to 20 in the editor, the same as in YAML. It used to stop at 6.
Changed
columnsis now a maximum. Each style needs a minimum width per column (bars 160 px, thin 140, segmented 180, tank 80, ring and arc 128, needle 134), and when a card is too narrow for the number you've set, it uses fewer columns rather than squeezing them. Wide cards look exactly as before.- The Display section of the editor is a tidy list now: one switch per row, right next to its label, with Animate alongside the show options. You can click the label text to flip a switch, and screen readers announce what each switch is for.
Upgrading
Update through HACS, or download chartdeck-card.js below and replace the old file, then refresh your browser. No configuration changes are needed. If you've set columns higher than fits on a phone, you'll see fewer columns there now, which is the point.
The docs are updated for the new columns behaviour and the editor: https://tempus2016.github.io/chartdeck/