bezel-charts 1.2.0 → 1.3.0

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

package/src/index.js

@@ -3,24 +3,20 @@
  * Small, polished charts as web components. Zero dependencies, pure SVG.
  * Created by Shaz Moghaddam, London · https://shazmoghaddam.github.io
  */
-import { TYPES, render, toSVG } from './render.js';
+// Each entry registers its chart and defines its tag. Pages that only need a few charts can import those entries instead.
+import './entries/spark.js';
+import './entries/line.js';
+import './entries/bars.js';
+import './entries/scatter.js';
+import './entries/ring.js';
+import './entries/donut.js';
+import './entries/gauge.js';
+import './entries/progress.js';
+import './entries/heatmap.js';
+import { NAMES, render, toSVG } from './render.js';
 import { THEMES } from './core/themes.js';
 import { BezelChart } from './element.js';
 
-export const version = '1.2.0';
-export const types = Object.keys(TYPES);
+export const version = '1.3.0';
+export const types = NAMES.slice();
 export { render, toSVG, BezelChart, THEMES as themes };
-
-if (typeof customElements !== 'undefined' && typeof HTMLElement !== 'undefined') {
-  for (const type of types) {
-    const tag = `bezel-${type}`;
-    if (!customElements.get(tag)) {
-      customElements.define(tag, class extends BezelChart {
-        get chartType() {
-          return type;
-        }
-      });
-    }
-  }
-  if (!customElements.get('bezel-chart')) customElements.define('bezel-chart', class extends BezelChart {});
-}

package/src/render.js

@@ -1,17 +1,16 @@
 /** Pure rendering: options in, SVG string out. No DOM needed, so it runs in browsers, Node and build scripts. */
 import { THEMES } from './core/themes.js';
 import { bool } from './core/util.js';
-import spark from './charts/spark.js';
-import line from './charts/line.js';
-import bars from './charts/bars.js';
-import ring from './charts/ring.js';
-import donut from './charts/donut.js';
-import gauge from './charts/gauge.js';
-import progress from './charts/progress.js';
-import heatmap from './charts/heatmap.js';
-import scatter from './charts/scatter.js';
-
-export const TYPES = { spark, line, bars, scatter, ring, donut, gauge, progress, heatmap };
+/** Every chart type, in the order the full bundle loads them. */
+export const NAMES = ['spark', 'line', 'bars', 'scatter', 'ring', 'donut', 'gauge', 'progress', 'heatmap'];
+
+/** The renderers loaded so far. Each chart's entry file adds its own, so a page only loads the charts it uses. */
+export const TYPES = {};
+
+/** Makes a chart type available to render(), toSVG() and the elements. */
+export function register(type, fn) {
+  TYPES[type] = fn;
+}
 
 const camel = (k) => k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
 
@@ -22,7 +21,9 @@ const camel = (k) => k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
  */
 function prepare(type, options) {
   if (!TYPES[type]) {
-    throw new Error(`Bezel Charts: unknown chart type "${type}". Choose one of: ${Object.keys(TYPES).join(', ')}.`);
+    throw new Error(NAMES.includes(type)
+      ? `Bezel Charts: the ${type} chart isn't loaded. Add import 'bezel-charts/${type}', or load dist/charts/${type}.js.`
+      : `Bezel Charts: unknown chart type "${type}". Choose one of: ${NAMES.join(', ')}.`);
   }
   const o = {};
   for (const [k, v] of Object.entries(options)) o[camel(k)] = v;