bezel-charts 1.1.1 → 1.3.0

package/src/charts/bars.js

@@ -1,4 +1,5 @@
-import { r2, num, has, list, series, tw, trunc, bool, fmt, text, small, hit, anim, palette, emptyState, goalLine, statOf, legend, SANS, MONO } from '../core/util.js';
+import { newId, r2, num, has, list, series, tw, trunc, bool, fmt, text, small, hit, anim, palette, emptyState, goalLine, statOf, SANS, MONO } from '../core/util.js';
+import { legend, seriesTable, styleOf, pattern, PATTERNS } from '../core/series.js';
 import { tile, dims } from '../core/tile.js';
 
 /** How far angled labels lean, and the longest label they show before shortening it. */
@@ -23,7 +24,16 @@ export default function bars(o, th) {
   var scale = stacked ? ups.concat(downs) : all;
   var top = scale.length ? Math.max.apply(null, scale) : 0;
   var nameOf = function (j) { return names[j] || 'Series ' + (j + 1); };
-  var colourOf = function (j, i) { return grouped ? pal[j % pal.length] : many ? pal[i % pal.length] : pal[0]; };
+  // Patterns tell grouped and stacked series apart without relying on colour alone.
+  var patOf = grouped ? styleOf(o.patterns, PATTERNS, 'solid') : null, defs = '', fills = [];
+  for (var p = 0; patOf && p < k; p++) {
+    if (patOf(p) === 'solid') continue;
+    var pid = newId('g');
+    defs += pattern(pid, patOf(p), pal[p % pal.length], o.background || th.tile);
+    fills[p] = 'url(#' + pid + ')';
+  }
+  var colourOf = function (j, i) { return grouped ? fills[j] || pal[j % pal.length] : many ? pal[i % pal.length] : pal[0]; };
+  var key = patOf && function (j, x, y) { return '<rect x="' + r2(x) + '" y="' + r2(y + 1) + '" width="10" height="10" rx="2" fill="' + colourOf(j) + '"/>'; };
   var opac = function (val) { return grouped || many || o.highlight === 'none' || val === top ? 1 : 0.5; };
   var labelOf = function (i) { return labels[i] || '#' + (i + 1); };
   var tipOf = function (i) {
@@ -34,7 +44,7 @@ export default function bars(o, th) {
 
   // Horizontal rows need their height up front, and so does a legend that may wrap.
   var d0 = dims(o);
-  var legendH = grouped || names.length ? legend(S.map(function (_, j) { return nameOf(j); }), pal, th, 0, 0, d0.w).height : 0;
+  var legendH = grouped || names.length ? legend(S.map(function (_, j) { return nameOf(j); }), pal, th, 0, 0, d0.w, key, key && 15).height : 0;
   var rows = stacked ? 1 : k, thin = grouped && !stacked;
   var subH = thin ? 10 : 14, subGap = 3;
   var rowH = horiz ? rows * subH + (rows - 1) * subGap + (thin ? 14 : 16) : 0;
@@ -43,9 +53,9 @@ export default function bars(o, th) {
 
   return tile(o, th, h, function (x0, y0, w, h) {
     if (!n) return emptyState(th, x0, y0, w, h);
-    var s = '', top0 = y0;
+    var s = defs ? '<defs>' + defs + '</defs>' : '', top0 = y0;
     if (legendH) {
-      s += legend(S.map(function (_, j) { return nameOf(j); }), pal, th, x0, y0, w).svg;
+      s += legend(S.map(function (_, j) { return nameOf(j); }), pal, th, x0, y0, w, key, key && 15).svg;
       top0 += legendH;
     }
     var lo = Math.min(0, Math.min.apply(null, scale)), hi = Math.max(0, top);
@@ -178,3 +188,5 @@ export default function bars(o, th) {
     summary: !n ? 'no data' : stacked ? k + ' series stacked across ' + n + ' groups' : grouped ? k + ' series across ' + n + ' groups' : 'highest ' + (labels[best] || '') + ' ' + fmt(v0[best], o),
   });
 }
+
+bars.table = function (o) { return seriesTable(o, series(o.values).length > 1 && bool(o.stacked)); };

package/src/charts/donut.js

@@ -42,9 +42,17 @@ export default function donut(o, th) {
       if (len <= 0) return;
       s += '<circle cx="' + r2(cx) + '" cy="' + r2(cy) + '" r="' + r2(r) + '" fill="none" stroke="#000" stroke-opacity="0" stroke-width="' + r2(sw) +
         '" pathLength="100" stroke-dasharray="' + r2(len) + ' ' + r2(100 - len) + '" stroke-dashoffset="' + r2(-start) + '" transform="rotate(-90 ' + r2(cx) + ' ' + r2(cy) +
-        ')" class="bzc-hit" data-tip="' + esc((labels[i] || '#' + (i + 1)) + ': ' + fmt(n, o) + ' (' + Math.round(len) + '%)') + '"/>';
+        ')" class="bzc-hit" data-skip="" data-tip="' + esc((labels[i] || '#' + (i + 1)) + ': ' + fmt(n, o) + ' (' + Math.round(len) + '%)') + '"/>';
       start += len;
     });
     return s;
   }, { stat: st, summary: 'total ' + fmt(total, o) + ' across ' + v.length + ' parts' });
 }
+
+// Every part is listed, including the small ones the chart groups as "Other".
+donut.table = function (o) {
+  var v = nums(o.values).map(function (n) { return Math.max(0, n); }), labels = list(o.labels), total = sum(v);
+  return { head: ['Label', 'Value', 'Share'], rows: v.map(function (n, i) {
+    return [labels[i] || '#' + (i + 1), fmt(n, o), (total ? Math.round(n / total * 100) : 0) + '%'];
+  }) };
+};

package/src/charts/gauge.js

@@ -39,3 +39,11 @@ export default function gauge(o, th) {
     return s;
   }, { summary: isFinite(val) ? show(val) + ' on a scale of ' + fmt(mn, o) + ' to ' + fmt(mx, o) : 'no data' });
 }
+
+gauge.table = function (o) {
+  var v = nums(o.values), val = v.length ? v[0] : num(o.value, NaN), labels = list(o.labels);
+  var mn = num(o.min, 0), mx = num(o.max, 100), auto = !has(o.prefix) && !has(o.suffix) && mn === 0 && mx === 100;
+  if (!isFinite(val)) return { head: ['Label', 'Value'], rows: [] };
+  return { head: ['Label', 'Value'], rows: [[labels[0] || 'Reading', fmt(val, o) + (auto ? '%' : '')], ['Lowest', fmt(mn, o)], ['Highest', fmt(mx, o)]]
+    .concat(has(o.goal) ? [['Goal', fmt(+o.goal, o)]] : []) };
+};

package/src/charts/heatmap.js

@@ -1,11 +1,22 @@
 import { esc, r2, has, nums, sum, fmt, text, small, palette, emptyState, statOf } from '../core/util.js';
 import { tile, dims } from '../core/tile.js';
 
+var FULL = { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' };
+
+/** The first day shown: the start option, or far enough back that the last value is today. */
+function startOf(o, len) {
+  if (has(o.start) && /^\d{4}-\d{2}-\d{2}$/.test(String(o.start))) return new Date(String(o.start) + 'T00:00:00Z');
+  var t = new Date();
+  return new Date(Date.UTC(t.getFullYear(), t.getMonth(), t.getDate()) - Math.max(0, len - 1) * 864e5);
+}
+
+function dates(lang, opt) {
+  try { return new Intl.DateTimeFormat(lang, Object.assign({ timeZone: 'UTC' }, opt)); } catch (e) { return new Intl.DateTimeFormat('en-GB', Object.assign({ timeZone: 'UTC' }, opt)); }
+}
+
 export default function heatmap(o, th) {
   var v = nums(o.values), c = palette(o, th)[0], lang = o.lang || 'en-GB';
-  var start;
-  if (has(o.start) && /^\d{4}-\d{2}-\d{2}$/.test(String(o.start))) start = new Date(String(o.start) + 'T00:00:00Z');
-  else { var t = new Date(); start = new Date(Date.UTC(t.getFullYear(), t.getMonth(), t.getDate()) - Math.max(0, v.length - 1) * 864e5); }
+  var start = startOf(o, v.length);
   var offset = (start.getUTCDay() + 6) % 7, cols = Math.max(1, Math.ceil((offset + v.length) / 7));
   var d0 = dims(o), leftW = 28, maxCols = Math.max(1, Math.floor((d0.w - leftW) / 10));
   // On narrow screens keep the most recent weeks that fit, rather than shrinking cells until they are unreadable.
@@ -19,8 +30,8 @@ export default function heatmap(o, th) {
   var pitch = Math.min(18, (d0.w - leftW) / cols), gap = pitch < 8 ? 1 : 3, cell = pitch - gap;
   var h = 16 + 7 * pitch + 26;
   var max = v.length ? Math.max.apply(null, v) : 0;
-  var dfm = function (opt) { try { return new Intl.DateTimeFormat(lang, Object.assign({ timeZone: 'UTC' }, opt)); } catch (e) { return new Intl.DateTimeFormat('en-GB', Object.assign({ timeZone: 'UTC' }, opt)); } };
-  var monthF = dfm({ month: 'short' }), dayF = dfm({ weekday: 'short' }), fullF = dfm({ weekday: 'short', day: 'numeric', month: 'short', year: 'numeric' });
+  var dfm = function (opt) { return dates(lang, opt); };
+  var monthF = dfm({ month: 'short' }), dayF = dfm({ weekday: 'short' }), fullF = dfm(FULL);
   var st = statOf(v, o, '');
   return tile(o, th, h, function (x0, y0, w, h) {
     if (!v.length) return emptyState(th, x0, y0, w, h);
@@ -51,3 +62,9 @@ export default function heatmap(o, th) {
     return s;
   }, { stat: st, summary: fmt(sum(v), o) + ' across ' + v.length + ' days' });
 }
+
+// Every day, including the early weeks a narrow chart leaves out.
+heatmap.table = function (o) {
+  var v = nums(o.values), start = startOf(o, v.length), f = dates(o.lang || 'en-GB', FULL);
+  return { head: ['Date', 'Value'], rows: v.map(function (n, i) { return [f.format(new Date(start.getTime() + i * 864e5)), fmt(n, o)]; }) };
+};

package/src/charts/line.js

@@ -1,4 +1,5 @@
-import { newId, r2, clamp, num, has, list, series, tw, bool, fmt, niceScale, pathOf, text, small, hit, anim, palette, emptyState, parseNotes, goalLine, statOf, legend, SANS } from '../core/util.js';
+import { newId, r2, clamp, num, has, list, series, tw, bool, fmt, pathOf, text, small, hit, anim, palette, emptyState, parseNotes, goalLine, statOf } from '../core/util.js';
+import { niceScale, legend, seriesTable, styleOf, marker, DASHES, SHAPES } from '../core/series.js';
 import { tile } from '../core/tile.js';
 
 export default function line(o, th) {
@@ -6,11 +7,19 @@ export default function line(o, th) {
   var h = num(o.height, 170), n = Math.max.apply(null, [0].concat(S.map(function (s) { return s.length; })));
   var notes = parseNotes(o, labels), multi = S.length > 1 || names.length > 0;
   var st = statOf(S[0] || [], o, '');
+  var dashOf = styleOf(o.dash, Object.keys(DASHES), 'solid'), markOf = styleOf(o.markers, SHAPES, 'none');
+  var bg = o.background || th.tile;
+  // With dashes or markers, the legend shows a short sample of each line instead of a dot.
+  var key = (dashOf || markOf) && function (k, x, y) {
+    var c = pal[k % pal.length], dk = dashOf ? DASHES[dashOf(k)] : '', mk = markOf ? markOf(k) : 'none';
+    return '<line x1="' + r2(x) + '" x2="' + r2(x + 18) + '" y1="' + r2(y + 6) + '" y2="' + r2(y + 6) + '" stroke="' + c + '" stroke-width="2.5" stroke-linecap="round"' +
+      (dk ? ' stroke-dasharray="' + dk + '"' : '') + '/>' + (mk !== 'none' ? marker(mk, x + 9, y + 6, 3.5, ' fill="' + c + '" stroke="' + bg + '" stroke-width="1.5"') : '');
+  };
   return tile(o, th, h, function (x0, y0, w, h) {
     if (!n) return emptyState(th, x0, y0, w, h);
     var s = '', top = y0;
     if (multi) {
-      var lg = legend(S.map(function (_, k) { return names[k] || 'Series ' + (k + 1); }), pal, th, x0, top, w);
+      var lg = legend(S.map(function (_, k) { return names[k] || 'Series ' + (k + 1); }), pal, th, x0, top, w, key, key && 24);
       s += lg.svg;
       top += lg.height;
     }
@@ -54,9 +63,21 @@ export default function line(o, th) {
         s += '<defs><linearGradient id="' + g + '" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="' + c + '" stop-opacity=".26"/><stop offset="1" stop-color="' + c + '" stop-opacity="0"/></linearGradient></defs>' +
           '<path d="' + d + 'L' + r2(last[0]) + ',' + r2(top + ph) + 'L' + r2(P[0][0]) + ',' + r2(top + ph) + 'Z" fill="url(#' + g + ')"' + anim(o, 'bzc-a') + '/>';
       }
-      s += '<path d="' + d + '" fill="none" stroke="' + c + '" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" pathLength="1" style="stroke-dasharray:1' + (o.animate ? ';animation-delay:' + k * 0.15 + 's' : '') + '"' + (o.animate ? ' class="bzc-d"' : '') + '/>';
-      var e = P[P.length - 1];
-      s += '<circle cx="' + r2(e[0]) + '" cy="' + r2(e[1]) + '" r="4" fill="' + c + '" stroke="' + (o.background || th.tile) + '" stroke-width="2"/>';
+      var dk = dashOf ? DASHES[dashOf(k)] : '', mk = markOf ? markOf(k) : 'none';
+      // The draw-in animation is itself a dash, so dashed lines fade in instead.
+      s += dk
+        ? '<path d="' + d + '" fill="none" stroke="' + c + '" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="' + dk + '"' + anim(o, 'bzc-a', k * 0.15) + '/>'
+        : '<path d="' + d + '" fill="none" stroke="' + c + '" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" pathLength="1" style="stroke-dasharray:1' + (o.animate ? ';animation-delay:' + k * 0.15 + 's' : '') + '"' + (o.animate ? ' class="bzc-d"' : '') + '/>';
+      if (mk !== 'none') {
+        // Long series get a marker on every few points, and always on the last.
+        var every = Math.ceil(v.length / 40);
+        v.forEach(function (y, i) {
+          if (i % every === 0 || i === v.length - 1) s += marker(mk, X(i), Y(y), 3.5, ' fill="' + c + '" stroke="' + bg + '" stroke-width="1.5"' + anim(o, 'bzc-a', 0.6 + k * 0.15));
+        });
+      } else {
+        var e = P[P.length - 1];
+        s += '<circle cx="' + r2(e[0]) + '" cy="' + r2(e[1]) + '" r="4" fill="' + c + '" stroke="' + bg + '" stroke-width="2"/>';
+      }
       if (bool(o.showValues)) v.forEach(function (y, i) { s += text(X(i), Y(y) - 8, fmt(y, o, true), small(th, 9, 'text-anchor="middle"')); });
     });
     if (has(o.goal)) s += goalLine(o, th, px, px + pw, Y(+o.goal));
@@ -69,3 +90,5 @@ export default function line(o, th) {
     return s;
   }, { stat: st, summary: S.length + ' series over ' + n + ' points' });
 }
+
+line.table = function (o) { return seriesTable(o); };

package/src/charts/progress.js

@@ -55,3 +55,12 @@ export default function progress(o, th) {
     return s;
   }, { stat: st, summary: single ? show(v[0]) + (auto ? '' : ' of ' + fmt(max, o)) : fmt(total, o) + ' of ' + fmt(max, o) });
 }
+
+progress.table = function (o) {
+  var v = nums(o.values).map(function (n) { return Math.max(0, n); }), labels = list(o.labels), single = v.length === 1;
+  var max = has(o.max) ? num(o.max, 100) : single ? 100 : sum(v);
+  if (!(max > 0)) max = 1;
+  var auto = !has(o.prefix) && !has(o.suffix) && max === 100 && single;
+  if (single) return { head: ['Label', 'Value'], rows: [[labels[0] || 'Progress', fmt(v[0], o) + (auto ? '%' : ' of ' + fmt(max, o))]] };
+  return { head: ['Label', 'Value', 'Share'], rows: v.map(function (n, i) { return [labels[i] || '#' + (i + 1), fmt(n, o), Math.round(n / max * 100) + '%']; }) };
+};

package/src/charts/ring.js

@@ -38,3 +38,10 @@ export default function ring(o, th) {
     return s;
   }, { stat: st, summary: v.map(function (n, i) { return (labels[i] ? labels[i] + ' ' : '') + show(n); }).join(', ') });
 }
+
+ring.table = function (o) {
+  var labels = list(o.labels), max = num(o.max, 100) || 100, auto = !has(o.prefix) && !has(o.suffix) && max === 100;
+  return { head: ['Label', 'Value'], rows: nums(o.values).map(function (n, i) {
+    return [labels[i] || '#' + (i + 1), fmt(n, o) + (auto ? '%' : ' of ' + fmt(max, o))];
+  }) };
+};

package/src/charts/scatter.js

@@ -1,4 +1,5 @@
-import { r2, clamp, num, has, list, series, bool, fmt, niceScale, text, small, hit, palette, emptyState, parseNotes, goalLine, legend, axisWidth, SANS } from '../core/util.js';
+import { r2, clamp, num, has, list, series, bool, fmt, text, small, hit, palette, emptyState, parseNotes, goalLine } from '../core/util.js';
+import { niceScale, legend, axisWidth, styleOf, marker, SHAPES } from '../core/series.js';
 import { tile } from '../core/tile.js';
 
 /** Least-squares fit. Returns slope, intercept and Pearson's r, or null when x has no spread. */
@@ -32,12 +33,16 @@ export default function scatter(o, th) {
   var nameOf = function (j) { return names[j] || 'Group ' + (j + 1); };
   var xo = { decimals: o.decimals, compact: o.compact, lang: o.lang };
   var notes = parseNotes(o, labels);
+  // Each group can have its own point shape; "none" in the list keeps that group's circles.
+  var markOf = styleOf(o.markers, SHAPES, 'circle'), bg = o.background || th.tile;
+  var shapeOf = function (j) { var m = markOf ? markOf(j) : 'circle'; return m === 'none' ? 'circle' : m; };
+  var key = markOf && function (j, x, y) { return marker(shapeOf(j), x + 4, y + 6, 4, ' fill="' + pal[j % pal.length] + '"'); };
 
   return tile(o, th, h, function (x0, y0, w, h) {
     if (!count) return emptyState(th, x0, y0, w, h);
     var s = '', top = y0;
     if (multi) {
-      var lg = legend(groups.map(function (_, j) { return nameOf(j); }), pal, th, x0, top, w);
+      var lg = legend(groups.map(function (_, j) { return nameOf(j); }), pal, th, x0, top, w, key);
       s += lg.svg;
       top += lg.height;
     }
@@ -94,8 +99,8 @@ export default function scatter(o, th) {
         var cx = PX(xv), cy = PY(gr.ys[i]);
         var tip = (labels[idx] ? labels[idx] + '\n' : multi ? nameOf(j) + '\n' : '') +
           (has(o.xLabel) ? o.xLabel : 'x') + ': ' + fmt(xv, xo) + '\n' + (has(o.yLabel) ? o.yLabel : 'y') + ': ' + fmt(gr.ys[i], o);
-        s += '<circle cx="' + r2(cx) + '" cy="' + r2(cy) + '" r="' + r + '" fill="' + c + '" fill-opacity=".85" stroke="' + (o.background || th.tile) + '" stroke-width="1.5"' +
-          (o.animate ? ' class="bzc-a" style="animation-delay:' + r2(Math.min(0.8, idx * 0.012)) + 's"' : '') + '/>';
+        s += marker(shapeOf(j), cx, cy, r, ' fill="' + c + '" fill-opacity=".85" stroke="' + bg + '" stroke-width="1.5"' +
+          (o.animate ? ' class="bzc-a" style="animation-delay:' + r2(Math.min(0.8, idx * 0.012)) + 's"' : ''));
         s += hit(cx - 8, cy - 8, 16, 16, tip);
         idx++;
       });
@@ -113,3 +118,15 @@ export default function scatter(o, th) {
     return s;
   }, { summary: count + ' points' + (multi ? ' in ' + groups.length + ' groups' : '') });
 }
+
+scatter.table = function (o) {
+  var X = series(o.x), Y = series(o.y), names = list(o.series), labels = list(o.labels), multi = X.length > 1 || names.length > 0;
+  var xo = { decimals: o.decimals, compact: o.compact, lang: o.lang }, rows = [], idx = 0;
+  X.forEach(function (xs, g) {
+    var ys = Y[g] || [];
+    for (var i = 0; i < Math.min(xs.length, ys.length); i++, idx++) {
+      rows.push([labels[idx] || '#' + (idx + 1)].concat(multi ? [names[g] || 'Group ' + (g + 1)] : [], [fmt(xs[i], xo), fmt(ys[i], o)]));
+    }
+  });
+  return { head: ['Point'].concat(multi ? ['Group'] : [], [has(o.xLabel) ? o.xLabel : 'x', has(o.yLabel) ? o.yLabel : 'y']), rows: rows };
+};

package/src/charts/spark.js

@@ -39,3 +39,8 @@ export default function spark(o, th) {
     return s;
   }, { stat: st, summary: v.length ? 'latest ' + fmt(v[v.length - 1], o) : 'no data' });
 }
+
+spark.table = function (o) {
+  var labels = list(o.labels);
+  return { head: ['Label', 'Value'], rows: nums(o.values).map(function (n, i) { return [labels[i] || '#' + (i + 1), fmt(n, o)]; }) };
+};

package/src/core/series.js

@@ -0,0 +1,85 @@
+/** Helpers for the charts with axes and several series: line, bars and scatter. Kept apart from util.js so the other charts don't load them. */
+import { r2, list, series, fmt, tw, text, SANS } from './util.js';
+
+export function niceScale(min, max, count) {
+  if (min === max) {
+    if (min === 0) max = 1;
+    else { var p = Math.abs(min) * 0.1; min -= p; max += p; }
+  }
+  var step0 = (max - min) / (count || 4);
+  var mag = Math.pow(10, Math.floor(Math.log10(step0)));
+  var err = step0 / mag;
+  var step = (err <= 1 ? 1 : err <= 2 ? 2 : err <= 5 ? 5 : 10) * mag;
+  var lo = Math.floor(min / step) * step, hi = Math.ceil(max / step) * step, ticks = [];
+  for (var t = lo; t <= hi + step / 2; t += step) ticks.push(+t.toFixed(10));
+  return { lo: lo, hi: hi, ticks: ticks };
+}
+
+/**
+ * A wrapping row of coloured dots and series names. Returns the SVG and the height it used.
+ * key(k, x, y) draws a different swatch, such as a dashed line, and kw is the room it takes before the name.
+ */
+export function legend(names, pal, th, x0, y0, w, key, kw) {
+  var x = x0, y = y0, s = '', off = kw || 13;
+  names.forEach(function (nm, k) {
+    var wd = off + tw(nm, 12) + 16;
+    if (x > x0 && x + wd - 16 > x0 + w) { x = x0; y += 20; }
+    s += (key ? key(k, x, y) : '<circle cx="' + r2(x + 4) + '" cy="' + r2(y + 6) + '" r="4" fill="' + pal[k % pal.length] + '"/>') +
+      text(x + off, y + 10, nm, 'fill="' + th.fg + '" font-family="' + SANS + '" font-size="12"');
+    x += wd;
+  });
+  return { svg: s, height: y - y0 + 24 };
+}
+
+/** Line dashes, marker shapes and bar patterns, so series differ by more than colour. "auto" hands them out in this order. */
+export var DASHES = { solid: '', dashed: '7 5', dotted: '1 5', dashdot: '9 4 1 4' };
+export var SHAPES = ['circle', 'square', 'triangle', 'diamond'];
+export var PATTERNS = ['solid', 'stripes', 'dots', 'grid'];
+
+/**
+ * Reads dash, markers or patterns. The bare attribute or "auto" hands out every style in turn; a list sets one per series,
+ * repeating like colours do. Returns a function from series index to style name, or null when the option is off.
+ */
+export function styleOf(v, names, off) {
+  if (v == null || v === false || v === 'none' || v === 'false') return null;
+  var l = v === true || v === '' || v === 'auto' ? names : list(v).map(function (s) { return names.indexOf(s) < 0 ? off : s; });
+  if (!l.length) return null;
+  return function (k) { return l[k % l.length]; };
+}
+
+/** A point marker centred on x, y. attrs carries the fill and stroke. */
+export function marker(kind, x, y, r, attrs) {
+  var a = r * 1.15, b = r * 0.85;
+  if (kind === 'square') return '<rect x="' + r2(x - b) + '" y="' + r2(y - b) + '" width="' + r2(2 * b) + '" height="' + r2(2 * b) + '" rx="1"' + attrs + '/>';
+  if (kind === 'triangle') return '<path d="M' + r2(x) + ',' + r2(y - a) + 'L' + r2(x + a) + ',' + r2(y + b) + 'L' + r2(x - a) + ',' + r2(y + b) + 'Z"' + attrs + '/>';
+  if (kind === 'diamond') return '<path d="M' + r2(x) + ',' + r2(y - a * 1.1) + 'L' + r2(x + a) + ',' + r2(y) + 'L' + r2(x) + ',' + r2(y + a * 1.1) + 'L' + r2(x - a) + ',' + r2(y) + 'Z"' + attrs + '/>';
+  return '<circle cx="' + r2(x) + '" cy="' + r2(y) + '" r="' + r2(r) + '"' + attrs + '/>';
+}
+
+/** A fill pattern in colour c, with stripes, dots or a grid drawn in the tile colour so they show on any colour. */
+export function pattern(id, kind, c, bg) {
+  var ink = ' stroke="' + bg + '" stroke-opacity=".55" stroke-width="1.5"';
+  return '<pattern id="' + id + '" width="6" height="6" patternUnits="userSpaceOnUse"' + (kind === 'dots' ? '' : ' patternTransform="rotate(45)"') +
+    '><rect width="6" height="6" fill="' + c + '"/>' +
+    (kind === 'dots' ? '<circle cx="3" cy="3" r="1.3" fill="' + bg + '" fill-opacity=".55"/>' : '<path d="M3,0V6' + (kind === 'grid' ? 'M0,3H6' : '') + '"' + ink + '/>') +
+    '</pattern>';
+}
+
+/** Value axis: gridlines plus tick labels on the left. Returns the axis width it reserved. */
+export function axisWidth(ticks) {
+  return Math.max.apply(null, ticks.map(function (t) { return tw(t, 10, true); })) + 10;
+}
+
+/** The data table for charts with labels and one or more series. total adds a column adding each row up. */
+export function seriesTable(o, total) {
+  var S = series(o.values), names = list(o.series), labels = list(o.labels), rows = [];
+  var n = Math.max.apply(null, [0].concat(S.map(function (s) { return s.length; })));
+  for (var i = 0; i < n; i++) {
+    var row = [labels[i] || '#' + (i + 1)], t = 0;
+    S.forEach(function (s) { row.push(i < s.length ? fmt(s[i], o) : ''); t += i < s.length ? s[i] : 0; });
+    if (total) row.push(fmt(t, o));
+    rows.push(row);
+  }
+  var head = S.length > 1 || names.length ? S.map(function (_, k) { return names[k] || 'Series ' + (k + 1); }) : ['Value'];
+  return { head: ['Label'].concat(head, total ? ['Total'] : []), rows: rows };
+}

package/src/core/util.js

@@ -46,20 +46,6 @@ export function fmt(n, o, short) {
   return (n < 0 ? '−' : '') + (o.prefix || '') + s + (o.suffix || '');
 }
 
-export function niceScale(min, max, count) {
-  if (min === max) {
-    if (min === 0) max = 1;
-    else { var p = Math.abs(min) * 0.1; min -= p; max += p; }
-  }
-  var step0 = (max - min) / (count || 4);
-  var mag = Math.pow(10, Math.floor(Math.log10(step0)));
-  var err = step0 / mag;
-  var step = (err <= 1 ? 1 : err <= 2 ? 2 : err <= 5 ? 5 : 10) * mag;
-  var lo = Math.floor(min / step) * step, hi = Math.ceil(max / step) * step, ticks = [];
-  for (var t = lo; t <= hi + step / 2; t += step) ticks.push(+t.toFixed(10));
-  return { lo: lo, hi: hi, ticks: ticks };
-}
-
 export function pathOf(pts, straight) {
   if (!pts.length) return '';
   var d = 'M' + r2(pts[0][0]) + ',' + r2(pts[0][1]);
@@ -122,21 +108,3 @@ export function statOf(v, o, fallback) {
   if (k === 'last' && v.length > 1 && o.delta !== 'none') delta = v[v.length - 1] - v[0];
   return { val: map[k], delta: delta };
 }
-
-/** A wrapping row of coloured dots and series names. Returns the SVG and the height it used. */
-export function legend(names, pal, th, x0, y0, w) {
-  var x = x0, y = y0, s = '';
-  names.forEach(function (nm, k) {
-    var wd = 13 + tw(nm, 12) + 16;
-    if (x > x0 && x + wd - 16 > x0 + w) { x = x0; y += 20; }
-    s += '<circle cx="' + r2(x + 4) + '" cy="' + r2(y + 6) + '" r="4" fill="' + pal[k % pal.length] + '"/>' +
-      text(x + 13, y + 10, nm, 'fill="' + th.fg + '" font-family="' + SANS + '" font-size="12"');
-    x += wd;
-  });
-  return { svg: s, height: y - y0 + 24 };
-}
-
-/** Value axis: gridlines plus tick labels on the left. Returns the axis width it reserved. */
-export function axisWidth(ticks) {
-  return Math.max.apply(null, ticks.map(function (t) { return tw(t, 10, true); })) + 10;
-}

package/src/element.js

@@ -1,5 +1,5 @@
 /** The custom element shared by every chart tag. */
-import { render, toStatic } from './render.js';
+import { render, table, toStatic } from './render.js';
 import { MONO, SANS, esc, clamp } from './core/util.js';
 import { THEMES } from './core/themes.js';
 
@@ -7,7 +7,7 @@ export const ATTRIBUTES = [
   'type', 'values', 'labels', 'series', 'heading', 'prefix', 'suffix', 'decimals', 'compact', 'color', 'theme', 'frame',
   'width', 'height', 'goal', 'goal-label', 'notes', 'show-values', 'stat', 'delta', 'delta-label', 'max', 'min', 'value',
   'zones', 'horizontal', 'straight', 'zero', 'start', 'lang', 'corners', 'background', 'center-label', 'highlight',
-  'x', 'y', 'x-label', 'y-label', 'trend', 'static', 'no-tooltips', 'stacked', 'angle-labels',
+  'x', 'y', 'x-label', 'y-label', 'trend', 'static', 'no-tooltips', 'stacked', 'angle-labels', 'dash', 'markers', 'patterns',
 ];
 
 const HOST_CSS =
@@ -15,7 +15,15 @@ const HOST_CSS =
   'svg{display:block;max-width:100%;height:auto;overflow:visible}' +
   `.tip{position:absolute;left:0;top:0;pointer-events:none;background:#0b0b10;color:#f2f1f7;font:600 12px/1.5 ${MONO};` +
   'padding:7px 10px;border-radius:10px;white-space:pre;opacity:0;transform:translate(-50%,calc(-100% - 12px));transition:opacity .12s;z-index:3;' +
-  'border:1px solid #2a2935;box-shadow:0 8px 24px rgba(0,0,0,.35)}.tip.on{opacity:1}';
+  'border:1px solid #2a2935;box-shadow:0 8px 24px rgba(0,0,0,.35)}.tip.on{opacity:1}' +
+  // The focus ring is white with a black edge, so it shows on light and dark pages alike. Then the outline on the
+  // value the arrow keys are on, and text only screen readers get.
+  '.c{outline:none}.c:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px #000}.k{stroke:currentColor;stroke-width:2;stroke-opacity:1}' +
+  '.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}' +
+  '@media (forced-colors:active){.c:focus-visible{outline-color:Highlight}}';
+
+// Arrow keys move one value along; on a heatmap, left and right move a week (one column) and up and down a day.
+const STEPS = { ArrowLeft: -1, ArrowUp: -1, ArrowRight: 1, ArrowDown: 1 };
 
 const darkQuery = () => (typeof matchMedia === 'function' ? matchMedia('(prefers-color-scheme: dark)') : null);
 
@@ -55,10 +63,16 @@ export class BezelChart extends Base {
 
   connectedCallback() {
     if (!this.shadowRoot) {
-      this.attachShadow({ mode: 'open' });
+      // The chart, the tooltip, the screen reader announcements and the data table stay in place between redraws,
+      // so a focused chart keeps its focus when it resizes or changes theme.
+      this.attachShadow({ mode: 'open' }).innerHTML = `<style>${HOST_CSS}</style><div class="c" role="group" aria-roledescription="chart"></div>` +
+        '<p class="sr" id="h">Use the arrow keys to step through the values.</p><div class="tip" aria-hidden="true"></div><div class="sr" aria-live="polite"></div><div class="sr"></div>';
+      [, this.#box, , this.#tipEl, this.#live, this.#table] = this.shadowRoot.children;
       this.shadowRoot.addEventListener('pointermove', (e) => this.#tip(e));
       this.shadowRoot.addEventListener('pointerdown', (e) => this.#tip(e));
-      this.addEventListener('pointerleave', () => this.shadowRoot.querySelector('.tip')?.classList.remove('on'));
+      this.addEventListener('pointerleave', () => this.#tipEl.classList.remove('on'));
+      this.#box.addEventListener('keydown', (e) => this.#key(e));
+      this.#box.addEventListener('blur', () => this.#clear());
     }
     live.add(this);
     this.#dark = darkQuery();
@@ -122,6 +136,11 @@ export class BezelChart extends Base {
   }
 
   #ro = null;
+  #box = null;
+  #tipEl = null;
+  #live = null;
+  #table = null;
+  #at = -1;
   #dark = null;
   #width = 0;
   #rendered = false;
@@ -137,33 +156,125 @@ export class BezelChart extends Base {
     this.#width = w > 0 ? w : 360;
     const o = this.options;
     o.animate = !this.#rendered && !this.hasAttribute('static');
-    let svg;
+    let svg, data = null;
     try {
       svg = render(this.chartType, o);
+      data = table(this.chartType, o);
     } catch (err) {
       svg = `<p style="font:13px ${SANS};color:#d63f7c">${esc(err.message)}</p>`;
     }
     // The live chart has its own tooltips, so drop the <title> browsers would show as a second one.
-    // aria-label still names it for screen readers, and toSVG() keeps the <title> for static images.
-    svg = svg.replace(/<title>[\s\S]*?<\/title>/, '');
-    this.shadowRoot.innerHTML = `<style>${HOST_CSS}</style>${svg}<div class="tip" role="status"></div>`;
+    // toSVG() keeps the <title> for static images.
+    const box = this.#box;
+    box.innerHTML = svg.replace(/<title>[\s\S]*?<\/title>/, '');
+    // The focusable wrapper carries the chart's name, so screen readers hear it once, not twice.
+    const img = box.querySelector('svg');
+    if (img) {
+      box.setAttribute('aria-label', img.getAttribute('aria-label'));
+      img.removeAttribute('role');
+      img.removeAttribute('aria-label');
+      img.setAttribute('aria-hidden', 'true');
+    } else {
+      box.removeAttribute('aria-label');
+    }
+    // Charts with tooltips take keyboard focus too, so keyboard users get the same exact values as mouse users.
+    const keys = !!img && !this.hasAttribute('no-tooltips');
+    if (keys) {
+      box.setAttribute('tabindex', '0');
+      box.setAttribute('aria-describedby', 'h');
+    } else {
+      box.removeAttribute('tabindex');
+      box.removeAttribute('aria-describedby');
+    }
+    box.style.color = THEMES[o.theme === 'light' || o.theme === 'dark' ? o.theme : o.autoTheme].fg;
+    box.style.borderRadius = `${o.frame === 'none' ? 4 : clamp(+o.corners || 22, 0, 60)}px`;
+    this.#table.innerHTML = data && data.rows.length ? tableHTML(o.heading, data) : '';
+    if (this.#at >= 0 && keys && this.shadowRoot.activeElement === box) this.#show(this.#at);
+    else this.#at = -1;
     this.#rendered = true;
     this.dispatchEvent(new CustomEvent('bezel-render', { bubbles: true }));
   }
 
   #tip(e) {
-    const tip = this.shadowRoot.querySelector('.tip');
-    if (!tip || this.hasAttribute('no-tooltips')) return;
+    if (this.hasAttribute('no-tooltips')) return;
     const target = e.target?.closest?.('[data-tip]');
     if (!target) {
-      tip.classList.remove('on');
+      this.#tipEl.classList.remove('on');
       return;
     }
-    tip.textContent = target.getAttribute('data-tip');
-    const box = this.getBoundingClientRect();
+    this.#place(target, e.clientX, e.clientY);
+  }
+
+  /** Shows the tooltip for a mark at a point on screen. */
+  #place(mark, x, y) {
+    const tip = this.#tipEl;
+    tip.textContent = mark.getAttribute('data-tip');
+    const box = this.getBoundingClientRect?.() || { left: 0, top: 0, width: 0 };
     const half = tip.offsetWidth / 2;
-    tip.style.left = `${clamp(e.clientX - box.left, half, Math.max(half, box.width - half))}px`;
-    tip.style.top = `${e.clientY - box.top}px`;
+    tip.style.left = `${clamp(x - box.left, half, Math.max(half, box.width - half))}px`;
+    tip.style.top = `${y - box.top}px`;
     tip.classList.add('on');
   }
+
+  /** Every value the arrow keys visit, in order. Donuts mark their slices data-skip, as the legend rows repeat them. */
+  #marks() {
+    return [...this.#box.querySelectorAll('[data-tip]:not([data-skip])')];
+  }
+
+  #key(e) {
+    const marks = this.#marks(), n = marks.length;
+    if (!n) return;
+    let i = this.#at, step = STEPS[e.key];
+    if (step) {
+      if (this.chartType === 'heatmap' && /Left|Right/.test(e.key)) step *= 7;
+      i = i < 0 ? (step > 0 ? 0 : n - 1) : clamp(i + step, 0, n - 1);
+    } else if (e.key === 'Home' || e.key === 'End') {
+      i = e.key === 'Home' ? 0 : n - 1;
+    } else {
+      if (e.key === 'Escape') this.#clear();
+      return;
+    }
+    e.preventDefault();
+    this.#show(i, true);
+  }
+
+  /** Outlines value i, shows its tooltip and, when say is set, reads it out. */
+  #show(i, say) {
+    const marks = this.#marks();
+    if (!marks.length) return;
+    i = clamp(i, 0, marks.length - 1);
+    this.#box.querySelector('.k')?.classList.remove('k');
+    const mark = marks[i], r = mark.getBoundingClientRect?.() || { left: 0, top: 0, width: 0 };
+    mark.classList.add('k');
+    this.#at = i;
+    this.#place(mark, r.left + r.width / 2, r.top);
+    if (say) this.#live.textContent = `${mark.getAttribute('data-tip').replace(/\n/g, ', ')}. ${i + 1} of ${marks.length}`;
+  }
+
+  #clear() {
+    this.#box.querySelector('.k')?.classList.remove('k');
+    this.#tipEl.classList.remove('on');
+    this.#live.textContent = '';
+    this.#at = -1;
+  }
+}
+
+/** The visually hidden table screen readers can browse: the chart's numbers in rows and columns. */
+function tableHTML(caption, { head, rows }) {
+  const cells = (row) => row.map((c, i) => (i ? `<td>${esc(c)}</td>` : `<th scope="row">${esc(c)}</th>`)).join('');
+  return `<table><caption>${esc(caption || 'Chart data')}</caption><thead><tr>${head.map((h) => `<th scope="col">${esc(h)}</th>`).join('')}</tr></thead>` +
+    `<tbody>${rows.map((r) => `<tr>${cells(r)}</tr>`).join('')}</tbody></table>`;
+}
+
+/** Defines <bezel-type>, plus <bezel-chart> if no chart has yet. Safe to call twice, and does nothing outside a browser. */
+export function define(type) {
+  if (typeof customElements === 'undefined' || typeof HTMLElement === 'undefined') return;
+  if (!customElements.get(`bezel-${type}`)) {
+    customElements.define(`bezel-${type}`, class extends BezelChart {
+      get chartType() {
+        return type;
+      }
+    });
+  }
+  if (!customElements.get('bezel-chart')) customElements.define('bezel-chart', class extends BezelChart {});
 }

package/src/entries/bars.js

@@ -0,0 +1,10 @@
+/** <bezel-bars> on its own: import 'bezel-charts/bars', or load dist/charts/bars.js. */
+import bars from '../charts/bars.js';
+import { register } from '../render.js';
+import { define } from '../element.js';
+
+register('bars', bars);
+define('bars');
+
+export { render, toSVG } from '../render.js';
+export { BezelChart } from '../element.js';

package/src/entries/donut.js

@@ -0,0 +1,10 @@
+/** <bezel-donut> on its own: import 'bezel-charts/donut', or load dist/charts/donut.js. */
+import donut from '../charts/donut.js';
+import { register } from '../render.js';
+import { define } from '../element.js';
+
+register('donut', donut);
+define('donut');
+
+export { render, toSVG } from '../render.js';
+export { BezelChart } from '../element.js';