Data

Bars

Columns that grow on entry, with a tip per column and a total that counts up in the card.

data-u="bars"

Example

Deploys

148 this week

<article class="u-card u-wall" data-wall="steps">
  <div class="u-panel">
    <div class="u-head">
      <div><div class="u-label">Deploys</div><div class="u-big"><span data-bars-total>148</span> <small>this week</small></div></div>
      <div data-u="period"></div>
    </div>
    <div style="flex:1;min-height:260px">
      <div data-u="bars" data-u-props='{
        "labels": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        "max": 32,
        "series": [
          [22, 14, 9, 27, 31, 24, 21],
          [18, 26, 21, 15, 30, 12, 8],
          [25, 19, 28, 22, 16, 20, 14],
          [10, 24, 29, 31, 18, 9, 17]
        ]
      }'></div>
    </div>
  </div>
</article>

Installation

Bars ships in the full package, in unslop.css and unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

A ready-made block that uses bars:

curl -fsSL unslop.leallabs.dev/i | sh -s add wall-steps

No build Name-based add is for charts and blocks. Components with JS live in unslop.js, which mounts every data-u on the page by itself.

Props

They go in data-u-props, as JSON.

Prop	Type	Default	What it does
`labels`	array	`[]`	One label per column.
`series`	array of arrays	no default	One series per period. A period in the same card swaps the series.
`values`	array	no default	Single series, when there's no period.
`max`	number	highest value	Top of the scale.
`color`	string	var(--c3)	Bar color. Use a token, like var(--c1).
`start`	number	0	Series it opens on.

Classes and variants

Class	What it does
`[data-bars-total]`	On any element in the card: receives the series sum, counting up.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
each column	`tabindex="0"`, `aria-label`	`"Mon: 22"`. The focused column shows the tip.

Keyboard

Key	Does
Tab	moves through the columns and shows the value

Events and API

el._u.update(props) swaps the props without remounting.