bezel-charts 1.3.0 → 1.5.0

package/dist/bezel-charts.js

@@ -1,4 +1,4 @@
-/*! Bezel Charts v1.3.0 | MIT | github.com/ShazMoghaddam/bezel-charts */
+/*! Bezel Charts v1.5.0 | MIT | github.com/ShazMoghaddam/bezel-charts */
 
 // src/core/util.js
 var SANS = "ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif";
@@ -268,7 +268,7 @@ var THEMES = {
 };
 
 // src/render.js
-var NAMES = ["spark", "line", "bars", "scatter", "ring", "donut", "gauge", "progress", "heatmap"];
+var NAMES = ["spark", "line", "area", "bars", "histogram", "scatter", "ring", "donut", "gauge", "progress", "heatmap"];
 var TYPES = {};
 function register(type, fn) {
   TYPES[type] = fn;
@@ -346,7 +346,11 @@ var ATTRIBUTES = [
   "angle-labels",
   "dash",
   "markers",
-  "patterns"
+  "patterns",
+  "bins",
+  "bin-width",
+  "mark",
+  "percent"
 ];
 var HOST_CSS = `:host{display:block;position:relative;max-width:100%}:host([hidden]){display:none}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}.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}}`;
 var STEPS = { ArrowLeft: -1, ArrowUp: -1, ArrowRight: 1, ArrowDown: 1 };
@@ -635,7 +639,7 @@ function axisWidth(ticks) {
     return tw(t, 10, true);
   })) + 10;
 }
-function seriesTable(o, total) {
+function seriesTable(o, total2) {
   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;
@@ -646,13 +650,87 @@ function seriesTable(o, total) {
       row.push(i < s.length ? fmt(s[i], o) : "");
       t += i < s.length ? s[i] : 0;
     });
-    if (total) row.push(fmt(t, o));
+    if (total2) 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 };
+  return { head: ["Label"].concat(head, total2 ? ["Total"] : []), rows };
+}
+
+// src/core/xy.js
+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(i2) {
+    return n === 1 ? px + pw / 2 : px + i2 * pw / (n - 1);
+  };
+  var Y = function(v) {
+    return top + ph - (v - sc.lo) / (sc.hi - sc.lo) * ph;
+  };
+  sc.ticks.forEach(function(t, i2) {
+    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[i2], 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, Y, px, pw, top, ph };
+}
+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;
+}
+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"') : "");
+  };
+}
+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"' : "") + "/>";
+}
+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;
 }
 
 // src/charts/line.js
@@ -665,68 +743,35 @@ function line(o, th) {
   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;
-  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, h2) {
     if (!n) return emptyState(th, x0, y0, w, h2);
-    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 = h2 - (top - y0) - bottom;
-    var X = function(i2) {
-      return n === 1 ? px + pw / 2 : px + i2 * pw / (n - 1);
-    };
-    var Y = function(v) {
-      return top + ph - (v - sc.lo) / (sc.hi - sc.lo) * ph;
-    };
-    sc.ticks.forEach(function(t, i2) {
-      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[i2], 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 + '"'));
+    var f = xyFrame(o, th, {
+      n,
+      names: multi ? S.map(function(_, k) {
+        return nameOf(k);
+      }) : null,
+      pal,
+      key,
+      kw: key && 24,
+      lo: Math.min.apply(null, all),
+      hi: Math.max.apply(null, all),
+      zero: bool(o.zero),
+      labels,
+      notes,
+      tick: function(t) {
+        return fmt(t, o, true);
       }
-    }
-    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));
-    });
+    }, x0, y0, w, h2);
+    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, i2) {
-        return [X(i2), Y(y)];
+      var P = v.map(function(y, i) {
+        return [X(i), Y(y)];
       });
       if (P.length === 1) P = [[px, P[0][1]], [px + pw, P[0][1]]];
       var d = pathOf(P, bool(o.straight));
@@ -734,31 +779,25 @@ function line(o, th) {
         var g = newId("g"), last = P[P.length - 1];
         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";
-      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") {
-        var every2 = Math.ceil(v.length / 40);
-        v.forEach(function(y, i2) {
-          if (i2 % every2 === 0 || i2 === v.length - 1) s += marker(mk, X(i2), 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, i2) {
-        s += text(X(i2), Y(y) - 8, fmt(y, o, true), small(th, 9, 'text-anchor="middle"'));
+      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);
+        if (j < v.length) tip += "\n" + (multi ? nameOf(k) + ": " : "") + fmt(v[j], o);
       });
-      s += hit(X(j) - step / 2, top, step, ph, tip);
-    }
-    return s;
+      return tip;
+    });
   }, { stat: st, summary: S.length + " series over " + n + " points" });
 }
 line.table = function(o) {
@@ -769,6 +808,140 @@ line.table = function(o) {
 register("line", line);
 define("line");
 
+// src/charts/area.js
+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(j2) {
+    return names[j2] || "Series " + (j2 + 1);
+  };
+  var val = function(j2, i2) {
+    return i2 < S[j2].length ? S[j2][i2] : 0;
+  };
+  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 + ")";
+  }
+  var key = patOf ? function(j2, x, y) {
+    return '<rect x="' + r2(x) + '" y="' + r2(y + 1) + '" width="10" height="10" rx="2" fill="' + (fills[j2] || pal[j2 % pal.length]) + '"/>';
+  } : (dashOf || markOf) && lineKey(pal, dashOf, markOf, bg);
+  var share = function(j2, i2) {
+    return pos[i2] ? Math.round(Math.max(0, val(j2, i2)) / pos[i2] * 100) : 0;
+  };
+  return tile(o, th, h, function(x0, y0, w, h2) {
+    if (!n) return emptyState(th, x0, y0, w, h2);
+    var f = xyFrame(o, th, {
+      n,
+      names: multi ? S.map(function(_, j2) {
+        return nameOf(j2);
+      }) : null,
+      pal,
+      key,
+      kw: key && (patOf ? 15 : 24),
+      lo: Math.min.apply(null, edges),
+      hi: Math.max.apply(null, edges),
+      zero: true,
+      labels,
+      notes,
+      tick: mode === "percent" ? function(t2) {
+        return fmt(t2, { lang: o.lang }, true) + "%";
+      } : function(t2) {
+        return fmt(t2, o, true);
+      }
+    }, x0, y0, w, h2);
+    var s = (defs ? "<defs>" + defs + "</defs>" : "") + f.svg, X = f.X, Y = f.Y;
+    var pts = function(ys) {
+      var P = ys.map(function(y, i2) {
+        return [X(i2), 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(j2) {
+      return mode ? highs[j2] : S[j2];
+    };
+    S.forEach(function(_, j2) {
+      var top = pts(shown(j2)), base = pts(mode ? lows[j2] : shown(j2).map(function() {
+        return 0;
+      })).reverse();
+      s += '<path d="' + pathOf(top, straight) + pathOf(base, straight).replace(/^M/, "L") + 'Z" fill="' + (fills[j2] || pal[j2 % pal.length]) + '" fill-opacity="' + alpha + '"' + (o.animate ? ' class="bzc-a" style="animation-delay:' + r2(j2 * 0.1) + 's"' : "") + "/>";
+    });
+    S.forEach(function(_, j2) {
+      var c = pal[j2 % pal.length], ys = shown(j2), P = pts(ys), mk = markOf ? markOf(j2) : "none";
+      s += seriesLine(o, pathOf(P, straight), c, j2, dashOf ? DASHES[dashOf(j2)] : "");
+      if (mk !== "none") s += pointMarks(o, mk, ys, X, Y, c, bg, j2);
+      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, i2) {
+        s += text(X(i2), Y(y) - 8, fmt(y, o, true), small(th, 9, 'text-anchor="middle"'));
+      });
+    });
+    if (bool(o.showValues) && mode === "stack") {
+      totals.forEach(function(t2, i2) {
+        var top = Math.max.apply(null, highs.map(function(hs) {
+          return hs[i2];
+        }).concat([0]));
+        s += text(X(i2), Y(top) - 8, fmt(t2, o, true), small(th, 9, 'text-anchor="middle"'));
+      });
+    }
+    return s + xyFinish(o, th, f, n, function(i2) {
+      var tip = labels[i2] || "#" + (i2 + 1);
+      S.forEach(function(ser, j2) {
+        if (i2 < ser.length) tip += "\n" + (multi ? nameOf(j2) + ": " : "") + fmt(ser[i2], o) + (mode === "percent" ? " (" + share(j2, i2) + "%)" : "");
+      });
+      return tip + (mode ? "\nTotal: " + fmt(totals[i2], 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)));
+};
+
+// src/entries/area.js
+register("area", area);
+define("area");
+
 // src/charts/bars.js
 var ANGLE = 40;
 var ANGLE_MAX_CHARS = 24;
@@ -995,6 +1168,200 @@ bars.table = function(o) {
 register("bars", bars);
 define("bars");
 
+// src/charts/histogram.js
+function histogram(o, th) {
+  var b = binned(o), names = list(o.series), pal = palette(o, th), h = num(o.height, 190);
+  var S = b ? b.S : [], k = S.length, multi = k > 1 || names.length > 0, pct = bool(o.percent);
+  var nameOf = function(j) {
+    return names[j] || "Series " + (j + 1);
+  };
+  var eo = Object.assign({}, o, { decimals: has(o.decimals) ? o.decimals : b ? b.dp : 0 });
+  var range = function(i2) {
+    return fmt(b.edge(i2), eo) + " to " + fmt(b.edge(i2 + 1), eo);
+  };
+  var share = function(j, i2) {
+    return Math.round(b.counts[j][i2] / S[j].length * 100);
+  };
+  var height = function(j, i2) {
+    return pct ? b.counts[j][i2] / S[j].length * 100 : b.counts[j][i2];
+  };
+  var marks = list(o.mark).filter(function(m) {
+    return m === "mean" || m === "median";
+  });
+  var patOf = k > 1 ? styleOf(o.patterns, PATTERNS, "solid") : null, 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], o.background || th.tile);
+    fills[q] = "url(#" + pid + ")";
+  }
+  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]) + '"/>';
+  };
+  var peak = 0, n = 0;
+  if (b) {
+    for (var i = 0; i < b.count; i++) if (total(b, i) > total(b, peak)) peak = i;
+    S.forEach(function(s) {
+      n += s.length;
+    });
+  }
+  return tile(o, th, h, function(x0, y0, w, h2) {
+    if (!b) return emptyState(th, x0, y0, w, h2);
+    var s = defs ? "<defs>" + defs + "</defs>" : "", top = y0;
+    if (multi) {
+      var lg = legend(S.map(function(_, j) {
+        return nameOf(j);
+      }), pal, th, x0, top, w, key, key && 15);
+      s += lg.svg;
+      top += lg.height;
+    }
+    var most = 0;
+    S.forEach(function(_, j) {
+      for (var i2 = 0; i2 < b.count; i2++) most = Math.max(most, height(j, i2));
+    });
+    var sc = niceScale(0, most || 1, 4);
+    var tl = sc.ticks.map(function(t) {
+      return fmt(t, { lang: o.lang }, true) + (pct ? "%" : "");
+    });
+    var axisW = Math.max.apply(null, tl.map(function(t) {
+      return tw(t, 10, true);
+    })) + 10;
+    var px = x0 + axisW, pw = w - axisW, ph = h2 - (top - y0) - 20, cw = pw / b.count;
+    var X = function(i2) {
+      return px + i2 * cw;
+    };
+    var Y = function(v) {
+      return top + ph - (v - sc.lo) / (sc.hi - sc.lo) * ph;
+    };
+    sc.ticks.forEach(function(t, i2) {
+      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[i2], small(th, 10, 'text-anchor="end"'));
+    });
+    var el = [];
+    for (var e = 0; e <= b.count; e++) el.push(fmt(b.edge(e), eo, true));
+    var every = Math.max(1, Math.ceil((Math.max.apply(null, el.map(function(l) {
+      return tw(l, 10, true);
+    })) * 1.5 + 8) / cw));
+    for (e = 0; e <= b.count; e += every) {
+      s += text(X(e), top + ph + 15, el[e], small(th, 10, 'text-anchor="' + (e === 0 ? "start" : e === b.count ? "end" : "middle") + '"'));
+    }
+    S.forEach(function(_, j) {
+      for (var i2 = 0; i2 < b.count; i2++) {
+        var v = height(j, i2);
+        if (!v) continue;
+        var y = Y(v);
+        s += '<rect x="' + r2(X(i2) + 0.5) + '" y="' + r2(y) + '" width="' + r2(Math.max(1, cw - 1)) + '" height="' + r2(top + ph - y) + '" fill="' + (fills[j] || pal[j % pal.length]) + '"' + (multi ? ' fill-opacity=".55"' : "") + anim(o, "bzc-g", Math.min(0.6, i2 * 0.03)) + "/>";
+      }
+    });
+    var lo = b.edge(0), span = b.edge(b.count) - lo, lines = [];
+    S.forEach(function(ser, j) {
+      marks.forEach(function(m) {
+        var v = m === "mean" ? mean(ser) : median(ser);
+        lines.push({ x: px + (v - lo) / span * pw, c: multi ? pal[j % pal.length] : th.fg, t: (multi ? nameOf(j) + " " : "") + m + " " + fmt(v, o) });
+      });
+    });
+    if (lines.length) {
+      var xs = lines.map(function(l) {
+        return l.x;
+      }), left = (Math.min.apply(null, xs) + Math.max.apply(null, xs)) / 2 > px + pw / 2;
+      var lx = left ? Math.min.apply(null, xs) - 5 : Math.max.apply(null, xs) + 5;
+      lines.forEach(function(l, r) {
+        s += '<line x1="' + r2(l.x) + '" x2="' + r2(l.x) + '" y1="' + r2(top) + '" y2="' + r2(top + ph) + '" stroke="' + l.c + '" stroke-width="1.5" stroke-dasharray="4 3"/>' + text(lx, top + 9 + r * 12, l.t, small(th, 10, 'text-anchor="' + (left ? "end" : "start") + '"', multi ? l.c : th.fg));
+      });
+    }
+    for (i = 0; i < b.count; i++) {
+      var tip = range(i);
+      S.forEach(function(_, j) {
+        tip += "\n" + (multi ? nameOf(j) + ": " : "") + b.counts[j][i] + " (" + share(j, i) + "%)";
+      });
+      s += hit(X(i), top, cw, ph, tip);
+    }
+    return s;
+  }, {
+    summary: b ? (multi ? k + " series, " : "") + n + " values in " + b.count + " ranges from " + fmt(b.edge(0), eo) + " to " + fmt(b.edge(b.count), eo) + ", most in " + range(peak) : "no data"
+  });
+}
+histogram.table = function(o) {
+  var b = binned(o), names = list(o.series);
+  if (!b) return { head: ["Range", "Count"], rows: [] };
+  var multi = b.S.length > 1 || names.length > 0, eo = Object.assign({}, o, { decimals: has(o.decimals) ? o.decimals : b.dp }), rows = [];
+  for (var i = 0; i < b.count; i++) {
+    var row = [fmt(b.edge(i), eo) + " to " + fmt(b.edge(i + 1), eo)];
+    if (multi) b.S.forEach(function(_, j) {
+      row.push(String(b.counts[j][i]));
+    });
+    else row.push(String(b.counts[0][i]), Math.round(b.counts[0][i] / b.S[0].length * 100) + "%");
+    rows.push(row);
+  }
+  return { head: ["Range"].concat(multi ? b.S.map(function(_, j) {
+    return names[j] || "Series " + (j + 1);
+  }) : ["Count", "Share"]), rows };
+};
+function niceWidth(raw) {
+  var e = Math.floor(Math.log10(raw)), p = Number("1e" + e), f = raw / p;
+  var m = f < 1.4142 ? 1 : f < 2.2361 ? 2 : f < 3.5355 ? 2.5 : f < 7.0711 ? 5 : 10;
+  return { w: m * p, dp: Math.max(0, m === 10 ? -e - 1 : -e) + (m === 2.5 ? 1 : 0) };
+}
+function binned(o) {
+  var S = series(o.values), all = [].concat.apply([], S);
+  if (!all.length) return null;
+  var lo = Math.min.apply(null, all), hi = Math.max.apply(null, all), w = num(o.binWidth, 0), dp, nice;
+  if (w > 0 && (hi - lo) / w <= 200) {
+    var str = String(o.binWidth), dot = str.indexOf(".");
+    dp = dot < 0 ? 0 : Math.min(6, str.length - dot - 1);
+  } else {
+    var k = num(o.bins, 0) > 0 ? Math.round(num(o.bins, 0)) : Math.ceil(Math.log2(all.length) + 1);
+    k = Math.min(Math.max(k, 1), 50);
+    nice = niceWidth(hi > lo ? (hi - lo) / k : Math.abs(lo) || 1);
+    w = nice.w;
+    dp = nice.dp;
+  }
+  var s0 = Math.floor(lo / w);
+  var edge = function(i) {
+    return Number(((s0 + i) * w).toFixed(dp + 3));
+  };
+  while (edge(0) > lo) s0--;
+  var count = Math.max(1, Math.ceil((hi - edge(0)) / w));
+  while (count > 1 && edge(count - 1) >= hi) count--;
+  while (edge(count) < hi) count++;
+  var counts = S.map(function(ser) {
+    var c = [];
+    for (var i = 0; i < count; i++) c.push(0);
+    ser.forEach(function(x) {
+      var i2 = Math.min(count - 1, Math.max(0, Math.floor((x - edge(0)) / w)));
+      while (i2 > 0 && x < edge(i2)) i2--;
+      while (i2 < count - 1 && x >= edge(i2 + 1)) i2++;
+      c[i2]++;
+    });
+    return c;
+  });
+  return { S, edge, count, counts, dp };
+}
+function total(b, i) {
+  var t = 0;
+  b.counts.forEach(function(c) {
+    t += c[i];
+  });
+  return t;
+}
+function mean(v) {
+  var t = 0;
+  v.forEach(function(x) {
+    t += x;
+  });
+  return t / v.length;
+}
+function median(v) {
+  var s = v.slice().sort(function(a, b) {
+    return a - b;
+  }), m = Math.floor(s.length / 2);
+  return s.length % 2 ? s[m] : (s[m - 1] + s[m]) / 2;
+}
+
+// src/entries/histogram.js
+register("histogram", histogram);
+define("histogram");
+
 // src/charts/scatter.js
 function fit(xs, ys) {
   var n = Math.min(xs.length, ys.length);
@@ -1226,43 +1593,43 @@ function donut(o, th) {
     })));
     labels.push("Other");
   }
-  var total = sum(v), h = num(o.height, 150);
+  var total2 = sum(v), h = num(o.height, 150);
   var st = statOf(v, o, "");
   return tile(o, th, h, function(x0, y0, w, h2) {
-    if (!total) return emptyState(th, x0, y0, w, h2);
+    if (!total2) return emptyState(th, x0, y0, w, h2);
     var s = "", size = Math.min(h2, w * 0.5), cx = x0 + size / 2, cy = y0 + h2 / 2;
     var sw = size * 0.16, r = (size - sw) / 2, start = 0, gap = v.filter(Boolean).length > 1 ? 0.9 : 0;
     v.forEach(function(n, i) {
-      var len = n / total * 100;
+      var len = n / total2 * 100;
       if (len <= 0) return;
       var seg = Math.max(0.01, len - gap);
       s += '<circle cx="' + r2(cx) + '" cy="' + r2(cy) + '" r="' + r2(r) + '" fill="none" stroke="' + pal[i % pal.length] + '" stroke-width="' + r2(sw) + '" pathLength="100" stroke-dasharray="' + r2(seg) + " " + r2(100 - seg) + '" stroke-dashoffset="' + r2(-start) + '" transform="rotate(-90 ' + r2(cx) + " " + r2(cy) + ')"' + anim(o, "bzc-a", i * 0.08) + "/>";
       start += len;
     });
-    s += text(cx, cy + 2, fmt(total, o, true), 'text-anchor="middle" fill="' + th.fg + '" font-family="' + SANS + '" font-size="' + r2(size * 0.17) + '" font-weight="800"');
+    s += text(cx, cy + 2, fmt(total2, o, true), 'text-anchor="middle" fill="' + th.fg + '" font-family="' + SANS + '" font-size="' + r2(size * 0.17) + '" font-weight="800"');
     s += text(cx, cy + 2 + 14, (has(o.centerLabel) ? o.centerLabel : "Total").toUpperCase(), small(th, 9, 'text-anchor="middle" letter-spacing="1"'));
     var lx = x0 + size + 22, rowH = Math.min(24, h2 / v.length), ly = cy - rowH * v.length / 2;
     v.forEach(function(n, i) {
-      var y = ly + i * rowH + rowH / 2, pct = Math.round(n / total * 100);
+      var y = ly + i * rowH + rowH / 2, pct = Math.round(n / total2 * 100);
       var tip = (labels[i] || "#" + (i + 1)) + ": " + fmt(n, o) + " (" + pct + "%)";
       s += '<circle cx="' + r2(lx + 4) + '" cy="' + r2(y) + '" r="4" fill="' + pal[i % pal.length] + '"/>' + text(lx + 14, y + 4, trunc(labels[i] || "#" + (i + 1), Math.floor((x0 + w - lx - 50) / 6.7)), 'fill="' + th.fg + '" font-family="' + SANS + '" font-size="12"') + text(x0 + w, y + 4, pct + "%", 'text-anchor="end" fill="' + th.muted + '" font-family="' + MONO + '" font-size="11" font-weight="600"') + hit(lx, y - rowH / 2, x0 + w - lx, rowH, tip);
     });
     start = 0;
     v.forEach(function(n, i) {
-      var len = n / total * 100;
+      var len = n / total2 * 100;
       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-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" });
+  }, { stat: st, summary: "total " + fmt(total2, o) + " across " + v.length + " parts" });
 }
 donut.table = function(o) {
   var v = nums(o.values).map(function(n) {
     return Math.max(0, n);
-  }), labels = list(o.labels), total = sum(v);
+  }), labels = list(o.labels), total2 = 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) + "%"];
+    return [labels[i] || "#" + (i + 1), fmt(n, o), (total2 ? Math.round(n / total2 * 100) : 0) + "%"];
   }) };
 };
 
@@ -1331,8 +1698,8 @@ function progress(o, th) {
   var v = nums(o.values).map(function(n) {
     return Math.max(0, n);
   }), labels = list(o.labels), pal = palette(o, th);
-  var single = v.length === 1, total = sum(v);
-  var max = has(o.max) ? num(o.max, 100) : single ? 100 : total;
+  var single = v.length === 1, total2 = sum(v);
+  var max = has(o.max) ? num(o.max, 100) : single ? 100 : total2;
   if (!(max > 0)) max = 1;
   var auto = !has(o.prefix) && !has(o.suffix) && max === 100 && single;
   var show = function(n) {
@@ -1357,7 +1724,7 @@ function progress(o, th) {
   return tile(o, th, h, function(x0, y0, w, h2) {
     if (!v.length) return emptyState(th, x0, y0, w, h2);
     var s = "", by = y0 + 22, cid = newId("c");
-    var head = single ? show(v[0]) + (auto ? "" : " of " + fmt(max, o)) : fmt(total, o) + " of " + fmt(max, o);
+    var head = single ? show(v[0]) + (auto ? "" : " of " + fmt(max, o)) : fmt(total2, o) + " of " + fmt(max, o);
     if (single && labels[0]) s += text(x0, y0 + 11, labels[0], 'fill="' + th.fg + '" font-family="' + SANS + '" font-size="12"');
     s += text(x0 + w, y0 + 11, head, 'text-anchor="end" fill="' + th.fg + '" font-family="' + MONO + '" font-size="11" font-weight="600"');
     s += '<rect x="' + x0 + '" y="' + by + '" width="' + w + '" height="14" rx="7" fill="' + th.grid + '" fill-opacity=".7"/>';
@@ -1385,7 +1752,7 @@ function progress(o, th) {
       s += '<circle cx="' + r2(lx + 4) + '" cy="' + r2(ly) + '" r="4" fill="' + pal[i % pal.length] + '"/><text x="' + r2(lx + 14) + '" y="' + r2(ly + 4) + '" fill="' + th.fg + '" font-family="' + SANS + '" font-size="12">' + esc(it.l) + '<tspan dx="6" fill="' + th.muted + '" font-family="' + MONO + '" font-size="11">' + esc(fmt(v[i], o)) + "</tspan></text>";
     });
     return s;
-  }, { stat: st, summary: single ? show(v[0]) + (auto ? "" : " of " + fmt(max, o)) : fmt(total, o) + " of " + fmt(max, o) });
+  }, { stat: st, summary: single ? show(v[0]) + (auto ? "" : " of " + fmt(max, o)) : fmt(total2, o) + " of " + fmt(max, o) });
 }
 progress.table = function(o) {
   var v = nums(o.values).map(function(n) {
@@ -1478,7 +1845,7 @@ register("heatmap", heatmap);
 define("heatmap");
 
 // src/index.js
-var version = "1.3.0";
+var version = "1.5.0";
 var types = NAMES.slice();
 export {
   BezelChart,