bezel-charts 1.1.1 → 1.3.0

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