bezel-charts 1.4.0 → 1.6.0

package/dist/bezel-charts.js

@@ -1,4 +1,4 @@
-/*! Bezel Charts v1.4.0 | MIT | github.com/ShazMoghaddam/bezel-charts */
+/*! Bezel Charts v1.6.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", "area", "bars", "scatter", "ring", "donut", "gauge", "progress", "heatmap"];
+var NAMES = ["spark", "line", "area", "bars", "histogram", "boxplot", "scatter", "ring", "donut", "gauge", "progress", "heatmap"];
 var TYPES = {};
 function register(type, fn) {
   TYPES[type] = fn;
@@ -346,7 +346,12 @@ var ATTRIBUTES = [
   "angle-labels",
   "dash",
   "markers",
-  "patterns"
+  "patterns",
+  "bins",
+  "bin-width",
+  "mark",
+  "percent",
+  "whiskers"
 ];
 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 +640,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 +651,13 @@ 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
@@ -1164,8 +1169,348 @@ 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/boxplot.js
+function boxplot(o, th) {
+  var S = series(o.values), names = list(o.series), pal = palette(o, th), k = S.length;
+  var horiz = bool(o.horizontal), many = list(o.color).length > 1, showMean = list(o.mark).indexOf("mean") >= 0;
+  var stats = S.map(function(v) {
+    return summary(v, o.whiskers === "range");
+  });
+  var nameOf = function(i) {
+    return names[i] || "Group " + (i + 1);
+  };
+  var h = num(o.height, horiz ? Math.max(120, k * 36 + 24) : 200);
+  var f = function(v) {
+    return fmt(v, o);
+  };
+  var meds = stats.map(function(s) {
+    return s.median;
+  });
+  var about = k === 1 ? "median " + f(stats[0].median) + ", middle half " + f(stats[0].q1) + " to " + f(stats[0].q3) : k + " groups, medians from " + f(Math.min.apply(null, meds)) + " to " + f(Math.max.apply(null, meds));
+  return tile(o, th, h, function(x0, y0, w, h2) {
+    if (!k) return emptyState(th, x0, y0, w, h2);
+    var lo = Math.min.apply(null, stats.map(function(s2) {
+      return s2.min;
+    })), hi = Math.max.apply(null, stats.map(function(s2) {
+      return s2.max;
+    }));
+    if (has(o.goal)) {
+      lo = Math.min(lo, +o.goal);
+      hi = Math.max(hi, +o.goal);
+    }
+    var sc = niceScale(lo, hi, 4), s = "";
+    var tl = sc.ticks.map(function(t) {
+      return fmt(t, o, true);
+    });
+    var nameW = horiz ? Math.min(w * 0.4, Math.max.apply(null, S.map(function(_, i) {
+      return tw(nameOf(i), 11);
+    })) + 12) : 0;
+    var axisW = horiz ? 0 : Math.max.apply(null, tl.map(function(t) {
+      return tw(t, 10, true);
+    })) + 10;
+    var px = x0 + (horiz ? nameW : axisW), pw = w - (horiz ? nameW : axisW), ph = h2 - 20;
+    var V = horiz ? function(v) {
+      return px + (v - sc.lo) / (sc.hi - sc.lo) * pw;
+    } : function(v) {
+      return y0 + ph - (v - sc.lo) / (sc.hi - sc.lo) * ph;
+    };
+    var band = (horiz ? ph : pw) / k, half = Math.min(28, band * 0.28);
+    var C = function(i) {
+      return (horiz ? y0 : px) + band * (i + 0.5);
+    };
+    var P = function(c, v) {
+      return horiz ? [v, c] : [c, v];
+    };
+    var seg = function(c1, v1, c2, v2, attrs) {
+      var a = P(c1, v1), b = P(c2, v2);
+      return '<line x1="' + r2(a[0]) + '" y1="' + r2(a[1]) + '" x2="' + r2(b[0]) + '" y2="' + r2(b[1]) + '"' + attrs + "/>";
+    };
+    sc.ticks.forEach(function(t, i) {
+      var v = V(t);
+      s += seg(horiz ? y0 : px, v, horiz ? y0 + ph : px + pw, v, ' stroke="' + th.grid + '"' + (t === 0 ? "" : ' stroke-dasharray="2 4"')) + (horiz ? text(v, y0 + ph + 15, tl[i], small(th, 10, 'text-anchor="middle"')) : text(px - 8, v + 3.5, tl[i], small(th, 10, 'text-anchor="end"')));
+    });
+    stats.forEach(function(st, i) {
+      var c = C(i), col = many ? pal[i % pal.length] : pal[0], line2 = ' stroke="' + col + '" stroke-width="1.5"';
+      if (k > 1 || names.length) {
+        var label = fit(nameOf(i), horiz ? nameW - 10 : band - 6, horiz ? 11 : 10, !horiz);
+        s += horiz ? text(x0, c + 4, label, small(th, 11, "", th.fg)) : text(c, y0 + ph + 15, label, small(th, 10, 'text-anchor="middle"'));
+      }
+      if (!st.n) return;
+      var a1 = P(c - half, V(st.q1)), a2 = P(c + half, V(st.q3));
+      s += "<g" + anim(o, "bzc-a", Math.min(0.6, i * 0.06)) + ">" + seg(c, V(st.low), c, V(st.q1), line2) + seg(c, V(st.q3), c, V(st.high), line2) + seg(c - half / 2, V(st.low), c + half / 2, V(st.low), line2) + seg(c - half / 2, V(st.high), c + half / 2, V(st.high), line2) + '<rect x="' + r2(Math.min(a1[0], a2[0])) + '" y="' + r2(Math.min(a1[1], a2[1])) + '" width="' + r2(Math.abs(a2[0] - a1[0])) + '" height="' + r2(Math.max(1, Math.abs(a2[1] - a1[1]))) + '" rx="3" fill="' + col + '" fill-opacity=".22"' + line2 + "/>" + seg(c - half, V(st.median), c + half, V(st.median), ' stroke="' + col + '" stroke-width="2.5"');
+      st.outliers.forEach(function(v) {
+        var p = P(c, V(v));
+        s += '<circle cx="' + r2(p[0]) + '" cy="' + r2(p[1]) + '" r="2.5" fill="none"' + line2 + "/>";
+      });
+      if (showMean) {
+        var m = P(c, V(st.mean));
+        s += marker("diamond", m[0], m[1], 4, ' fill="' + (o.background || th.tile) + '"' + line2);
+      }
+      s += "</g>";
+    });
+    if (has(o.goal)) {
+      var g = V(+o.goal);
+      s += horiz ? seg(g, y0, g, y0 + ph, ' stroke="' + th.fg + '" stroke-opacity=".55" stroke-dasharray="4 4"') : goalLine(o, th, px, px + pw, g);
+    }
+    stats.forEach(function(st, i) {
+      if (!st.n) return;
+      var tip = nameOf(i) + "\nMedian " + f(st.median) + "\nMiddle half " + f(st.q1) + " to " + f(st.q3) + "\n" + (st.outliers.length ? "Range without outliers " : "Range ") + f(st.low) + " to " + f(st.high) + (st.outliers.length ? "\n" + st.outliers.length + (st.outliers.length === 1 ? " outlier" : " outliers") : "") + (showMean ? "\nMean " + f(st.mean) : "") + "\nn = " + st.n;
+      s += horiz ? hit(px, C(i) - band / 2, pw, band, tip) : hit(C(i) - band / 2, y0, band, ph, tip);
+    });
+    return s;
+  }, { summary: k ? about : "no data" });
+}
+boxplot.table = function(o) {
+  var S = series(o.values), names = list(o.series), showMean = list(o.mark).indexOf("mean") >= 0;
+  var f = function(v) {
+    return fmt(v, o);
+  };
+  return {
+    head: ["Group", "Count", "Lowest", "Lower quartile", "Median", "Upper quartile", "Highest", "Outliers"].concat(showMean ? ["Mean"] : []),
+    rows: S.map(function(v, i) {
+      var st = summary(v, o.whiskers === "range");
+      return [names[i] || "Group " + (i + 1), String(st.n), f(st.min), f(st.q1), f(st.median), f(st.q3), f(st.max), String(st.outliers.length)].concat(showMean ? [f(st.mean)] : []);
+    })
+  };
+};
+function fit(name, width, size, mono) {
+  var t = String(name);
+  while (t.length > 1 && tw(t, size, mono) > width) t = trunc(t, t.length - 1);
+  return t;
+}
+function quantile(s, p) {
+  var h = (s.length - 1) * p, i = Math.floor(h);
+  return i + 1 < s.length ? s[i] + (h - i) * (s[i + 1] - s[i]) : s[i];
+}
+function summary(v, range) {
+  var s = v.slice().sort(function(a, b) {
+    return a - b;
+  }), n = s.length;
+  if (!n) return { n: 0, outliers: [] };
+  var q1 = quantile(s, 0.25), q3 = quantile(s, 0.75), iqr = q3 - q1, t = 0;
+  var lowFence = range ? -Infinity : q1 - 1.5 * iqr, highFence = range ? Infinity : q3 + 1.5 * iqr;
+  var inside = s.filter(function(x) {
+    return x >= lowFence && x <= highFence;
+  });
+  s.forEach(function(x) {
+    t += x;
+  });
+  return {
+    n,
+    min: s[0],
+    max: s[n - 1],
+    q1,
+    median: quantile(s, 0.5),
+    q3,
+    mean: t / n,
+    low: inside[0],
+    high: inside[inside.length - 1],
+    outliers: s.filter(function(x) {
+      return x < lowFence || x > highFence;
+    })
+  };
+}
+
+// src/entries/boxplot.js
+register("boxplot", boxplot);
+define("boxplot");
+
 // src/charts/scatter.js
-function fit(xs, ys) {
+function fit2(xs, ys) {
   var n = Math.min(xs.length, ys.length);
   if (n < 2) return null;
   var mx = 0, my = 0, i;
@@ -1270,7 +1615,7 @@ function scatter(o, th) {
     if (has(o.goal)) s += goalLine(o, th, px, px + pw, PY(+o.goal));
     if (trend) {
       groups.forEach(function(gr, j) {
-        var f = fit(gr.xs, gr.ys);
+        var f = fit2(gr.xs, gr.ys);
         if (!f) return;
         var xa = Math.min.apply(null, gr.xs), xb = Math.max.apply(null, gr.xs);
         var ya = f.slope * xa + f.intercept, yb = f.slope * xb + f.intercept;
@@ -1395,43 +1740,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) + "%"];
   }) };
 };
 
@@ -1500,8 +1845,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) {
@@ -1526,7 +1871,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"/>';
@@ -1554,7 +1899,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) {
@@ -1647,7 +1992,7 @@ register("heatmap", heatmap);
 define("heatmap");
 
 // src/index.js
-var version = "1.4.0";
+var version = "1.6.0";
 var types = NAMES.slice();
 export {
   BezelChart,