Dashboards

The gauge shows one figure against its scale: a dial with a bar or a needle, a half dial, a ring, a bar across or up, or a bullet graph. Give it bands — normal, busy, overloaded — a target, and an earlier value, and it shows and reads out how far the figure has moved. With interactive it becomes a control your users set, and a form field.

The dashboard lays tiles out on a grid. Put anything in a tile — a chart, a gauge, a table, your own markup — and your users can drag tiles into place, resize them from the corner, open one to fill the dashboard, and remove it. The layout comes out as JSON to keep, or is kept in the browser for them. On a narrow screen the columns close up, and on a phone the tiles stack.

A support desk's day

Open tickets, response times, satisfaction and the day's volume, with live figures every few seconds. Drag a tile by its handle to move it, resize it from the corner, or open it to fill the dashboard. Your arrangement is kept in this browser: reload the page and it is still there.

Add a note

Reset the layout

Email 412

Chat 655

Phone 187

Keyboard: Tab to a tile's handle, then the arrow keys move it, Shift+arrows resize it and Delete removes it. The expand button opens a tile to fill the dashboard and Escape puts it back. Every move is announced.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-dashboard id="db-desk" editable removable autosave="bmx-showcase-desk" row-height="72" label="Support desk" style="inline-size: 100%">
  <div data-tile="banner" data-locked class="db-banner">
    <strong>Service status: all systems running.</strong>
    <span>This tile is locked; the others move around it.</span>
  </div>
  <div data-tile="open" data-title="Open tickets" class="db-centre">
    <bmx-gauge id="db-open" value="38" max="80" ranges="0-40:success:Normal,40-60:warning:Busy,60-:danger:Overloaded" target="45" compare="42" compare-label="an hour ago" label="Open tickets" style="inline-size: 100%; max-inline-size: 12rem"></bmx-gauge>
  </div>
  <div data-tile="response" data-title="First response" class="db-centre">
    <bmx-gauge id="db-response" type="semi" indicator="needle" value="14" max="60" unit=" min" ranges="0-15:success:Within target,15-30:warning:Slow,30-:danger:Late" label="Average first response" style="inline-size: 100%; max-inline-size: 13rem"></bmx-gauge>
  </div>
  <div data-tile="csat" data-title="Satisfaction" class="db-centre">
    <bmx-gauge id="db-csat" type="ring" value="0.91" max="1" format="percent" ticks="false" compare="0.88" compare-label="last week" label="Customers satisfied" style="inline-size: 100%; max-inline-size: 10rem"></bmx-gauge>
  </div>
  <div data-tile="volume" data-title="Tickets by hour">
    <bmx-chart id="db-volume" type="column" stack="normal" label="Tickets by hour, today" style="--bmx-chart-height: 13rem"></bmx-chart>
  </div>
  <div data-tile="sla" data-title="Resolved within a day">
    <bmx-gauge type="bullet" value="0.82" max="1" target="0.9" format="percent" ranges="0-0.7:neutral:Poor,0.7-0.85:neutral:Fair,0.85-:neutral:Good" label="Resolved within 24 hours"></bmx-gauge>
  </div>
  <div data-tile="channels" data-title="This week" class="db-kpis">
    <div><span>Email</span> <strong>412</strong> <bmx-sparkline values="58,61,55,70,66,52,50" label="Email tickets, last seven days"></bmx-sparkline></div>
    <div><span>Chat</span> <strong>655</strong> <bmx-sparkline values="80,92,88,101,97,95,102" label="Chat tickets, last seven days"></bmx-sparkline></div>
    <div><span>Phone</span> <strong>187</strong> <bmx-sparkline values="31,29,30,24,27,26,20" label="Phone tickets, last seven days"></bmx-sparkline></div>
  </div>
</bmx-dashboard>

Six kinds of gauge

A dial with a bar or a needle, a half dial, a ring, a bar across and a bar upright, and a bullet graph with its target. Each takes the colour of the band its value is in, and reads its value, band and change out to a screen reader. Press the button for new readings.

New readings

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-gauge class="db-reading" value="72" unit="%" ranges="0-60:success:Normal,60-85:warning:Busy,85-:danger:Overloaded" target="80" compare="64" compare-label="last hour" label="CPU" style="--bmx-gauge-size: 12rem"></bmx-gauge>
<bmx-gauge class="db-reading" type="semi" indicator="needle" value="3420" max="6000" unit=" rpm" ranges="0-4500:success,4500-5500:warning,5500-:danger" label="Engine speed" style="--bmx-gauge-size: 12rem"></bmx-gauge>
<bmx-gauge class="db-reading" type="ring" value="0.68" max="1" format="percent" ticks="false" label="Quarterly target" style="--bmx-gauge-size: 9rem"></bmx-gauge>
<bmx-gauge class="db-reading" type="vertical" value="21.5" min="-10" max="40" unit=" °C" format="decimal:1" ranges="-10-5:info:Cold,5-25:success:Comfortable,25-:danger:Hot" label="Server room"></bmx-gauge>
<bmx-gauge class="db-reading" type="linear" value="640" max="1000" unit=" GB" ranges="0-700:success,700-900:warning,900-:danger" compare="590" compare-label="last week" label="Disk used"></bmx-gauge>
<bmx-gauge class="db-reading" type="bullet" value="270" max="400" target="300" format="currency:GBP" ranges="0-200:neutral:Poor,200-300:neutral:Fair,300-:neutral:Good" label="Revenue this quarter (thousands)"></bmx-gauge>

Gauges your users set

With interactive, a gauge is a slider: drag the dial or the bar, or use the arrow keys, Page Up, Page Down, Home and End. With a name its value goes into the form around it.

Get the code

<script src="/assets/bmx-components.min.js"></script>

<bmx-gauge interactive name="heating" value="20" min="10" max="30" step="0.5" unit=" °C" format="decimal:1" ranges="10-18:info:Cool,18-23:success:Comfortable,23-:warning:Warm" label="Heating" style="--bmx-gauge-size: 12rem"></bmx-gauge>
<bmx-gauge interactive name="fan" type="linear" value="35" unit="%" label="Fan speed"></bmx-gauge>
<bmx-gauge interactive name="humidity" type="linear" value="45" min="30" max="70" unit="%" target="50" label="Humidity"></bmx-gauge>