bezel-charts 1.2.0 → 1.4.0

package/src/charts/area.js

@@ -0,0 +1,97 @@
+import { newId, r2, num, list, series, bool, fmt, pathOf, text, small, palette, emptyState, parseNotes, statOf } from '../core/util.js';
+import { seriesTable, styleOf, pattern, DASHES, SHAPES, PATTERNS } from '../core/series.js';
+import { xyFrame, xyFinish, lineKey, seriesLine, pointMarks } from '../core/xy.js';
+import { tile } from '../core/tile.js';
+
+/**
+ * Areas over time. Several series overlap as see-through fills; `stacked` piles them so the top edge is the total,
+ * and stacked="percent" scales each column to 100% to show shares. The axis always includes zero, since an area's
+ * height reads as an amount.
+ */
+export default function area(o, th) {
+  var S = series(o.values), names = list(o.series), labels = list(o.labels), pal = palette(o, th);
+  var h = num(o.height, 170), k = S.length, n = Math.max.apply(null, [0].concat(S.map(function (s) { return s.length; })));
+  var mode = k > 1 ? (o.stacked === 'percent' ? 'percent' : bool(o.stacked) ? 'stack' : '') : '';
+  var notes = parseNotes(o, labels), multi = k > 1 || names.length > 0;
+  var nameOf = function (j) { return names[j] || 'Series ' + (j + 1); };
+  var val = function (j, i) { return i < S[j].length ? S[j][i] : 0; };
+
+  // Where each band starts and ends in every column. In a stack, positive parts pile up from zero and negative parts
+  // down from it, as stacked bars do. In a percent stack, each column's positive parts are scaled to add up to 100.
+  var lows = S.map(function () { return []; }), highs = S.map(function () { return []; }), totals = [], pos = [];
+  for (var i = 0; i < n; i++) {
+    var up = 0, down = 0, t = 0, p = 0;
+    for (var j = 0; j < k; j++) { t += val(j, i); p += Math.max(0, val(j, i)); }
+    totals.push(t); pos.push(p);
+    for (j = 0; j < k; j++) {
+      var v = mode === 'percent' ? (p ? Math.max(0, val(j, i)) / p * 100 : 0) : val(j, i);
+      if (!mode) { lows[j].push(0); highs[j].push(v); }
+      else if (v >= 0) { lows[j].push(up); up += v; highs[j].push(up); }
+      else { lows[j].push(down); down += v; highs[j].push(down); }
+    }
+  }
+  var edges = [].concat.apply([], lows.concat(highs));
+
+  var dashOf = styleOf(o.dash, Object.keys(DASHES), 'solid'), markOf = styleOf(o.markers, SHAPES, 'none');
+  var patOf = k > 1 ? styleOf(o.patterns, PATTERNS, 'solid') : null, bg = o.background || th.tile, defs = '', fills = [];
+  for (var q = 0; patOf && q < k; q++) {
+    if (patOf(q) === 'solid') continue;
+    var pid = newId('g');
+    defs += pattern(pid, patOf(q), pal[q % pal.length], bg);
+    fills[q] = 'url(#' + pid + ')';
+  }
+  // The legend shows each band's pattern, or a sample of its edge when lines have dashes or markers.
+  var key = patOf
+    ? function (j, x, y) { return '<rect x="' + r2(x) + '" y="' + r2(y + 1) + '" width="10" height="10" rx="2" fill="' + (fills[j] || pal[j % pal.length]) + '"/>'; }
+    : (dashOf || markOf) && lineKey(pal, dashOf, markOf, bg);
+  var share = function (j, i) { return pos[i] ? Math.round(Math.max(0, val(j, i)) / pos[i] * 100) : 0; };
+
+  return tile(o, th, h, function (x0, y0, w, h) {
+    if (!n) return emptyState(th, x0, y0, w, h);
+    var f = xyFrame(o, th, {
+      n: n, names: multi ? S.map(function (_, j) { return nameOf(j); }) : null, pal: pal, key: key, kw: key && (patOf ? 15 : 24),
+      lo: Math.min.apply(null, edges), hi: Math.max.apply(null, edges), zero: true, labels: labels, notes: notes,
+      tick: mode === 'percent' ? function (t) { return fmt(t, { lang: o.lang }, true) + '%'; } : function (t) { return fmt(t, o, true); },
+    }, x0, y0, w, h);
+    var s = (defs ? '<defs>' + defs + '</defs>' : '') + f.svg, X = f.X, Y = f.Y;
+    // One value stretches across the chart, like a line chart does.
+    var pts = function (ys) {
+      var P = ys.map(function (y, i) { return [X(i), Y(y)]; });
+      return P.length === 1 ? [[f.px, P[0][1]], [f.px + f.pw, P[0][1]]] : P;
+    };
+    var straight = bool(o.straight), alpha = mode ? '.8' : '.22';
+    var shown = function (j) { return mode ? highs[j] : S[j]; };
+    // Fills first, so no band covers another's edge.
+    S.forEach(function (_, j) {
+      var top = pts(shown(j)), base = pts(mode ? lows[j] : shown(j).map(function () { return 0; })).reverse();
+      s += '<path d="' + pathOf(top, straight) + pathOf(base, straight).replace(/^M/, 'L') + 'Z" fill="' + (fills[j] || pal[j % pal.length]) +
+        '" fill-opacity="' + alpha + '"' + (o.animate ? ' class="bzc-a" style="animation-delay:' + r2(j * 0.1) + 's"' : '') + '/>';
+    });
+    S.forEach(function (_, j) {
+      var c = pal[j % pal.length], ys = shown(j), P = pts(ys), mk = markOf ? markOf(j) : 'none';
+      s += seriesLine(o, pathOf(P, straight), c, j, dashOf ? DASHES[dashOf(j)] : '');
+      if (mk !== 'none') s += pointMarks(o, mk, ys, X, Y, c, bg, j);
+      else if (!mode) s += '<circle cx="' + r2(P[P.length - 1][0]) + '" cy="' + r2(P[P.length - 1][1]) + '" r="4" fill="' + c + '" stroke="' + bg + '" stroke-width="2"/>';
+      if (bool(o.showValues) && !mode) ys.forEach(function (y, i) { s += text(X(i), Y(y) - 8, fmt(y, o, true), small(th, 9, 'text-anchor="middle"')); });
+    });
+    // A stack writes its total above each column. Every column of a percent stack is 100%, so it writes nothing.
+    if (bool(o.showValues) && mode === 'stack') {
+      totals.forEach(function (t, i) {
+        var top = Math.max.apply(null, highs.map(function (hs) { return hs[i]; }).concat([0]));
+        s += text(X(i), Y(top) - 8, fmt(t, o, true), small(th, 9, 'text-anchor="middle"'));
+      });
+    }
+    return s + xyFinish(o, th, f, n, function (i) {
+      var tip = labels[i] || '#' + (i + 1);
+      S.forEach(function (ser, j) {
+        if (i < ser.length) tip += '\n' + (multi ? nameOf(j) + ': ' : '') + fmt(ser[i], o) + (mode === 'percent' ? ' (' + share(j, i) + '%)' : '');
+      });
+      return tip + (mode ? '\nTotal: ' + fmt(totals[i], o) : '');
+    });
+  }, {
+    stat: statOf(mode ? totals : S[0] || [], o, ''),
+    summary: k + ' series ' + (mode === 'percent' ? 'as shares of each total' : mode ? 'stacked' : 'filled') + ' over ' + n + ' points',
+  });
+}
+
+area.table = function (o) { var S = series(o.values); return seriesTable(o, S.length > 1 && (o.stacked === 'percent' || bool(o.stacked))); };

package/src/charts/bars.js

@@ -1,4 +1,5 @@
-import { newId, r2, num, has, list, series, tw, trunc, bool, fmt, text, small, hit, anim, palette, emptyState, goalLine, statOf, legend, seriesTable, styleOf, pattern, PATTERNS, 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. */

package/src/charts/line.js

@@ -1,4 +1,6 @@
-import { newId, r2, clamp, num, has, list, series, tw, bool, fmt, niceScale, pathOf, text, small, hit, anim, palette, emptyState, parseNotes, goalLine, statOf, legend, seriesTable, styleOf, marker, DASHES, SHAPES } from '../core/util.js';
+import { newId, r2, num, list, series, bool, fmt, pathOf, text, small, anim, palette, emptyState, parseNotes, statOf } from '../core/util.js';
+import { seriesTable, styleOf, DASHES, SHAPES } from '../core/series.js';
+import { xyFrame, xyFinish, lineKey, seriesLine, pointMarks } from '../core/xy.js';
 import { tile } from '../core/tile.js';
 
 export default function line(o, th) {
@@ -9,49 +11,17 @@ export default function line(o, th) {
   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"') : '');
-  };
+  var key = (dashOf || markOf) && lineKey(pal, dashOf, markOf, bg);
+  var nameOf = function (k) { return names[k] || 'Series ' + (k + 1); };
   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, key, key && 24);
-      s += lg.svg;
-      top += lg.height;
-    }
     var all = [].concat.apply([], S);
-    var mn = Math.min.apply(null, all), mx = Math.max.apply(null, all);
-    if (has(o.goal)) { mn = Math.min(mn, +o.goal); mx = Math.max(mx, +o.goal); }
-    if (bool(o.zero)) { mn = Math.min(0, mn); mx = Math.max(0, mx); }
-    var sc = niceScale(mn, mx, 4);
-    var tl = sc.ticks.map(function (t) { return fmt(t, o, true); });
-    var axisW = Math.max.apply(null, tl.map(function (t) { return tw(t, 10, true); })) + 10;
-    var bottom = labels.length ? 20 : 4;
-    var px = x0 + axisW, pw = w - axisW, ph = h - (top - y0) - bottom;
-    var X = function (i) { return n === 1 ? px + pw / 2 : px + i * pw / (n - 1); };
-    var Y = function (v) { return top + ph - (v - sc.lo) / (sc.hi - sc.lo) * ph; };
-    sc.ticks.forEach(function (t, i) {
-      var y = Y(t);
-      s += '<line x1="' + r2(px) + '" x2="' + r2(px + pw) + '" y1="' + r2(y) + '" y2="' + r2(y) + '" stroke="' + th.grid + '"' + (t === 0 ? '' : ' stroke-dasharray="2 4"') + '/>' +
-        text(px - 8, y + 3.5, tl[i], small(th, 10, 'text-anchor="end"'));
-    });
-    if (labels.length) {
-      var every = Math.max(1, Math.ceil(n * (Math.max.apply(null, labels.map(function (l) { return tw(l, 10, true); })) + 10) / pw));
-      for (var i = 0; i < n; i += every) {
-        if (labels[i] == null) continue;
-        var anchor = n > 1 && i === 0 ? 'start' : n > 1 && i === n - 1 ? 'end' : 'middle';
-        s += text(X(i), top + ph + 15, labels[i], small(th, 10, 'text-anchor="' + anchor + '"'));
-      }
-    }
-    notes.forEach(function (nt) {
-      if (nt.i >= n) return;
-      var x = X(nt.i);
-      s += '<line x1="' + r2(x) + '" x2="' + r2(x) + '" y1="' + r2(top + 12) + '" y2="' + r2(top + ph) + '" stroke="' + th.fg + '" stroke-opacity=".4" stroke-dasharray="3 3"/>' +
-        text(clamp(x, px + 30, px + pw - 30), top + 8, nt.text, small(th, 10, 'text-anchor="middle"', th.fg));
-    });
+    var f = xyFrame(o, th, {
+      n: n, names: multi ? S.map(function (_, k) { return nameOf(k); }) : null, pal: pal, key: key, kw: key && 24,
+      lo: Math.min.apply(null, all), hi: Math.max.apply(null, all), zero: bool(o.zero), labels: labels, notes: notes,
+      tick: function (t) { return fmt(t, o, true); },
+    }, x0, y0, w, h);
+    var s = f.svg, X = f.X, Y = f.Y, px = f.px, pw = f.pw, top = f.top, ph = f.ph;
     S.forEach(function (v, k) {
       var c = pal[k % pal.length];
       var P = v.map(function (y, i) { return [X(i), Y(y)]; });
@@ -62,31 +32,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') + '/>';
       }
-      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"' : '') + '/>';
+      var mk = markOf ? markOf(k) : 'none';
+      s += seriesLine(o, d, c, k, dashOf ? DASHES[dashOf(k)] : '');
       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));
-        });
+        s += pointMarks(o, mk, v, X, Y, c, bg, k);
       } 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));
-    var step = n > 1 ? pw / (n - 1) : pw;
-    for (var j = 0; j < n; j++) {
+    return s + xyFinish(o, th, f, n, function (j) {
       var tip = labels[j] || '#' + (j + 1);
-      S.forEach(function (v, k) { if (j < v.length) tip += '\n' + (multi ? (names[k] || 'Series ' + (k + 1)) + ': ' : '') + fmt(v[j], o); });
-      s += hit(X(j) - step / 2, top, step, ph, tip);
-    }
-    return s;
+      S.forEach(function (v, k) { if (j < v.length) tip += '\n' + (multi ? nameOf(k) + ': ' : '') + fmt(v[j], o); });
+      return tip;
+    });
   }, { stat: st, summary: S.length + ' series over ' + n + ' points' });
 }
 

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, styleOf, marker, SHAPES } 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. */

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,72 +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.
- * 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/xy.js

@@ -0,0 +1,81 @@
+/** The axis frame and series lines line and area charts share. Kept apart so other charts don't load them. */
+import { r2, clamp, has, tw, text, small, hit, anim, goalLine } from './util.js';
+import { niceScale, legend, marker, DASHES } from './series.js';
+
+/**
+ * The frame line and area charts share: the legend, the value axis with its gridlines, labels along the bottom and notes.
+ * c holds n (points), names (legend names, or null for no legend), pal, key and kw (legend swatches), lo and hi (the data
+ * range), zero (keep zero on the axis), labels, notes and tick (formats an axis number).
+ * Returns the SVG so far, the scales X(i) and Y(v), and the plot box: px, pw, top, ph.
+ */
+export function xyFrame(o, th, c, x0, y0, w, h) {
+  var s = '', top = y0, n = c.n, labels = c.labels;
+  if (c.names) {
+    var lg = legend(c.names, c.pal, th, x0, top, w, c.key, c.kw);
+    s += lg.svg;
+    top += lg.height;
+  }
+  var mn = c.lo, mx = c.hi;
+  if (has(o.goal)) { mn = Math.min(mn, +o.goal); mx = Math.max(mx, +o.goal); }
+  if (c.zero) { mn = Math.min(0, mn); mx = Math.max(0, mx); }
+  var sc = niceScale(mn, mx, 4);
+  var tl = sc.ticks.map(c.tick);
+  var axisW = Math.max.apply(null, tl.map(function (t) { return tw(t, 10, true); })) + 10;
+  var bottom = labels.length ? 20 : 4;
+  var px = x0 + axisW, pw = w - axisW, ph = h - (top - y0) - bottom;
+  var X = function (i) { return n === 1 ? px + pw / 2 : px + i * pw / (n - 1); };
+  var Y = function (v) { return top + ph - (v - sc.lo) / (sc.hi - sc.lo) * ph; };
+  sc.ticks.forEach(function (t, i) {
+    var y = Y(t);
+    s += '<line x1="' + r2(px) + '" x2="' + r2(px + pw) + '" y1="' + r2(y) + '" y2="' + r2(y) + '" stroke="' + th.grid + '"' + (t === 0 ? '' : ' stroke-dasharray="2 4"') + '/>' +
+      text(px - 8, y + 3.5, tl[i], small(th, 10, 'text-anchor="end"'));
+  });
+  if (labels.length) {
+    var every = Math.max(1, Math.ceil(n * (Math.max.apply(null, labels.map(function (l) { return tw(l, 10, true); })) + 10) / pw));
+    for (var i = 0; i < n; i += every) {
+      if (labels[i] == null) continue;
+      var anchor = n > 1 && i === 0 ? 'start' : n > 1 && i === n - 1 ? 'end' : 'middle';
+      s += text(X(i), top + ph + 15, labels[i], small(th, 10, 'text-anchor="' + anchor + '"'));
+    }
+  }
+  c.notes.forEach(function (nt) {
+    if (nt.i >= n) return;
+    var x = X(nt.i);
+    s += '<line x1="' + r2(x) + '" x2="' + r2(x) + '" y1="' + r2(top + 12) + '" y2="' + r2(top + ph) + '" stroke="' + th.fg + '" stroke-opacity=".4" stroke-dasharray="3 3"/>' +
+      text(clamp(x, px + 30, px + pw - 30), top + 8, nt.text, small(th, 10, 'text-anchor="middle"', th.fg));
+  });
+  return { svg: s, X: X, Y: Y, px: px, pw: pw, top: top, ph: ph };
+}
+
+/** The goal line, then one hover column per point, centred on it. tip(j) gives each column's tooltip. */
+export function xyFinish(o, th, f, n, tip) {
+  var s = has(o.goal) ? goalLine(o, th, f.px, f.px + f.pw, f.Y(+o.goal)) : '';
+  var step = n > 1 ? f.pw / (n - 1) : f.pw;
+  for (var j = 0; j < n; j++) s += hit(f.X(j) - step / 2, f.top, step, f.ph, tip(j));
+  return s;
+}
+
+/** A legend swatch for a line: a short sample with its dash and marker. */
+export function lineKey(pal, dashOf, markOf, bg) {
+  return 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"') : '');
+  };
+}
+
+/** A series line along path d. The draw-in animation is itself a dash, so dashed lines fade in instead. */
+export function seriesLine(o, d, c, k, dk) {
+  return 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"' : '') + '/>';
+}
+
+/** Markers on a series' points. Long series get one on every few points, and always on the last. */
+export function pointMarks(o, mk, ys, X, Y, c, bg, k) {
+  var s = '', every = Math.ceil(ys.length / 40);
+  ys.forEach(function (y, i) {
+    if (i % every === 0 || i === ys.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));
+  });
+  return s;
+}

package/src/element.js

@@ -265,3 +265,16 @@ function tableHTML(caption, { head, rows }) {
   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/area.js

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

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';

package/src/entries/gauge.js

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

package/src/entries/heatmap.js

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

package/src/entries/line.js

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

package/src/entries/progress.js

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

package/src/entries/ring.js

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

package/src/entries/scatter.js

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

package/src/entries/spark.js

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