bezel-charts 1.1.0 → 1.2.0

package/src/charts/scatter.js

@@ -1,4 +1,4 @@
-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, niceScale, text, small, hit, palette, emptyState, parseNotes, goalLine, legend, axisWidth, styleOf, marker, SHAPES } from '../core/util.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 +32,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 +98,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 +117,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/util.js

@@ -123,20 +123,71 @@ export function statOf(v, o, fallback) {
   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 = '';
+/**
+ * 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 = 13 + tw(nm, 12) + 16;
+    var wd = off + 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"');
+    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/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,112 @@ 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>`;
 }

package/src/index.js

@@ -7,7 +7,7 @@ import { TYPES, render, toSVG } from './render.js';
 import { THEMES } from './core/themes.js';
 import { BezelChart } from './element.js';
 
-export const version = '1.1.0';
+export const version = '1.2.0';
 export const types = Object.keys(TYPES);
 export { render, toSVG, BezelChart, THEMES as themes };
 

package/src/render.js

@@ -20,18 +20,31 @@ const camel = (k) => k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
  * @param {string} type one of TYPES
  * @param {object} [options] the same names as the HTML attributes, in kebab-case or camelCase
  */
-export function render(type, options = {}) {
+function prepare(type, options) {
   if (!TYPES[type]) {
     throw new Error(`Bezel Charts: unknown chart type "${type}". Choose one of: ${Object.keys(TYPES).join(', ')}.`);
   }
   const o = {};
   for (const [k, v] of Object.entries(options)) o[camel(k)] = v;
+  return o;
+}
+
+export function render(type, options = {}) {
+  const o = prepare(type, options);
   o.animate = bool(o.animate);
   o.frame = o.frame === 'none' ? 'none' : 'bezel';
   const mode = o.theme === 'light' || o.theme === 'dark' ? o.theme : o.autoTheme || 'dark';
   return TYPES[type](o, THEMES[mode]);
 }
 
+/**
+ * The chart's data as a table, for screen readers and anyone who wants the exact numbers:
+ * { head: [column names], rows: [[cells], ...] }, with numbers formatted the same way as the chart.
+ */
+export function table(type, options = {}) {
+  return TYPES[type].table(prepare(type, options));
+}
+
 /** Strips hover targets and tooltip data so the SVG is a clean static image. */
 export function toStatic(svg) {
   return svg