@circutor/charts 0.2.0 → 0.3.1

package/dist/collection/playground/itic-chart.scenarios.js

@@ -0,0 +1,129 @@
+// Sample data for the itic-chart playground page. Each scenario is a value for the `groups` prop.
+
+const NOMINAL_VOLTS = 230;
+
+const point = (duration, voltage, ts, extra = {}) => ({
+  duration,
+  voltage,
+  ts,
+  eventType: voltage < 10 ? 'POWER_INTERRUPT' : voltage < 90 ? 'VOLTAGE_DIP' : voltage > 110 ? 'VOLTAGE_SWELL' : 'VOLTAGE_VARIATION',
+  status: 'CLOSED',
+  min: Math.round(NOMINAL_VOLTS * Math.min(voltage, 100)) / 100,
+  max: Math.round(NOMINAL_VOLTS * Math.max(voltage, 100)) / 100,
+  ...extra,
+});
+
+const TYPICAL = [
+  {
+    phase: 'AN',
+    assetName: 'Main switchboard',
+    points: [
+      point(230, 93.46, '2024-06-26T20:23:45.220+02:00'),
+      point(12, 62, '2024-07-02T08:11:03.051+02:00'),
+      point(4000, 85, '2024-09-14T17:45:12.900+02:00', { status: 'OPEN' }),
+    ],
+  },
+  {
+    phase: 'BN',
+    assetName: 'Main switchboard',
+    points: [point(20, 0.4, '2025-01-26T23:04:34.840+01:00'), point(3, 150, '2025-02-03T10:20:00.004+01:00')],
+  },
+  {
+    phase: 'CN',
+    assetName: 'Main switchboard',
+    points: [point(800, 125, '2025-03-11T13:02:47.123+01:00'), point(30000, 88, '2025-04-01T06:30:00.000+02:00')],
+  },
+  {
+    phase: 'AN,BN,CN',
+    assetName: 'Main switchboard',
+    points: [point(60, 45, '2025-05-20T19:59:59.999+02:00', { status: 'OPEN' })],
+  },
+];
+
+// Every code of the phase catalog, plus one unknown code (shown as is, with an ECharts palette color)
+const PHASE_CODES = ['AN', 'BN', 'CN', 'AB', 'BC', 'CA', 'A', 'B', 'C', 'AN,BN', 'AN,CN', 'BN,CN', 'AB,BC', 'AB,CA', 'BC,CA', 'AN,BN,CN', 'AB,BC,CA', 'ALL', 'NONE', 'XYZ'];
+
+const PHASES = PHASE_CODES.map((phase, i) => ({
+  phase,
+  assetName: 'Main switchboard',
+  points: [point(2 * 1.8 ** i, 30 + i * 8, '2025-01-26T23:04:34.840+01:00')],
+}));
+
+// Seeded random numbers, so the generated data is the same on every load
+function random(seed) {
+  return () => {
+    seed = (seed + 0x6d2b79f5) | 0;
+    let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+function manyPoints(count) {
+  const next = random(42);
+  const start = Date.parse('2025-01-01T00:00:00Z');
+  const year = 365 * 24 * 3600 * 1000;
+
+  return ['AN', 'BN', 'CN', 'AN,BN,CN'].map(phase => ({
+    phase,
+    assetName: 'Main switchboard',
+    points: Array.from({ length: count }, () => {
+      // Durations spread evenly on the log axis; most events are dips, some swells
+      const duration = Math.round(10 ** (next() * 5) * 100) / 100;
+      const voltage = Math.round((next() < 0.8 ? next() * 95 : 105 + next() * 90) * 100) / 100;
+      return point(duration, voltage, new Date(start + next() * year).toISOString());
+    }),
+  }));
+}
+
+// Corners of the axes, plus two points outside them that ECharts doesn't draw
+const AXIS_LIMITS = [
+  {
+    phase: 'ALL',
+    points: [
+      point(1, 0, '2025-01-26T23:04:34.840+01:00'),
+      point(1, 200, '2025-01-26T23:04:34.840+01:00'),
+      point(100000, 0, '2025-01-26T23:04:34.840+01:00'),
+      point(100000, 200, '2025-01-26T23:04:34.840+01:00'),
+      point(0.5, 100, '2025-01-26T23:04:34.840+01:00'),
+      point(1000, 250, '2025-01-26T23:04:34.840+01:00'),
+    ],
+  },
+];
+
+const NOT_CLICKABLE = [
+  {
+    phase: 'AN',
+    assetName: 'Main switchboard',
+    points: [
+      point(50, 40, '2025-01-26T23:04:34.840+01:00'),
+      point(500, 75, '2025-01-27T09:00:00.000+01:00', { clickable: false }),
+      point(5000, 130, '2025-01-28T15:30:00.000+01:00', { clickable: false }),
+    ],
+  },
+];
+
+// Long names, unknown codes, HTML (must be shown as text) and missing optional fields
+const EDGE_CASES = [
+  {
+    phase: 'AN',
+    assetName: 'Very long asset name of an industrial plant, building B, floor 3, switchboard 12 <b>not bold</b>',
+    points: [
+      point(100, 50, '2025-01-26T23:04:34.840+01:00', { eventType: 'UNKNOWN_EVENT_CODE', status: 'PENDING_REVIEW_BY_MAINTENANCE' }),
+      { duration: 1000, voltage: 80, ts: '2025-01-26T23:04:34.840+01:00' },
+      point(10, 120, 'not a date', { min: 0, max: 0 }),
+    ],
+  },
+];
+
+/** @type {import('./playground.js').Scenario[]} */
+export const scenarios = [
+  { id: 'typical', label: 'Typical installation', data: TYPICAL },
+  { id: 'phases', label: 'Phase catalog (colors and legend)', data: PHASES },
+  { id: 'many', label: 'Many events (4 × 250)', data: manyPoints(250) },
+  { id: 'empty', label: 'No events', data: [] },
+  { id: 'axis-limits', label: 'Axis limits and points outside them', data: AXIS_LIMITS },
+  { id: 'not-clickable', label: 'Points that are not clickable', data: NOT_CLICKABLE },
+  { id: 'edge-cases', label: 'Long texts, unknown codes, missing fields', data: EDGE_CASES },
+  { id: 'invalid', label: 'Invalid data (not an array)', data: { phase: 'AN', points: [] } },
+];

package/dist/collection/playground/playground.js

@@ -0,0 +1,170 @@
+// Shared UI of the playground pages: controls, data editor and event log for one component.
+// Plain JS, copied as is to www/playground/ by the `www` output target, so it isn't compiled or bundled.
+
+/**
+ * @typedef {{ label: string, value: string }} Option
+ * @typedef {{ id: string, label: string, prop?: string, cssVar?: string, options: Option[], value?: string }} Control
+ * @typedef {{ id: string, label: string, data: unknown }} Scenario
+ */
+
+const params = new URLSearchParams(location.search);
+
+/**
+ * @param {{
+ *   element: HTMLElement,
+ *   dataProp: string,
+ *   scenarios: Scenario[],
+ *   controls?: Control[],
+ *   events?: string[],
+ * }} config
+ */
+export function mountPlayground({ element, dataProp, scenarios, controls = [], events = [] }) {
+  const log = createLog(document.querySelector('#log'));
+  const editor = createDataEditor(document.querySelector('#data'), value => (element[dataProp] = value));
+
+  captureConsole(log);
+  events.forEach(name => element.addEventListener(name, event => log.add(name, event.detail)));
+
+  const panel = document.querySelector('#controls');
+
+  const scenarioSelect = addSelect(panel, {
+    id: 'scenario',
+    label: 'Data',
+    options: scenarios.map(({ id, label }) => ({ value: id, label })),
+  });
+  const loadScenario = id => editor.load((scenarios.find(scenario => scenario.id === id) ?? scenarios[0]).data);
+  scenarioSelect.addEventListener('change', () => loadScenario(scenarioSelect.value));
+  loadScenario(scenarioSelect.value);
+
+  controls.forEach(control => {
+    const select = addSelect(panel, control);
+    const apply = () => {
+      const value = select.value === '' ? undefined : select.value;
+      if (control.cssVar) {
+        value === undefined ? element.style.removeProperty(control.cssVar) : element.style.setProperty(control.cssVar, value);
+      } else {
+        element[control.prop ?? control.id] = value;
+      }
+    };
+    select.addEventListener('change', apply);
+    apply();
+  });
+
+  mountSizeControls(document.querySelector('#frame'), panel);
+}
+
+/** Adds a labelled `<select>` whose value is kept in the URL, so a link reproduces the same state. */
+function addSelect(panel, { id, label, options, value }) {
+  const field = document.createElement('label');
+  field.className = 'pg-field';
+  field.textContent = label;
+
+  const select = document.createElement('select');
+  select.name = id;
+  options.forEach(option => select.add(new Option(option.label, option.value)));
+  const initial = params.get(id) ?? value;
+  if (initial !== undefined && options.some(option => option.value === initial)) {
+    select.value = initial;
+  }
+  select.addEventListener('change', () => {
+    params.set(id, select.value);
+    history.replaceState(null, '', `?${params}`);
+  });
+
+  field.append(select);
+  panel.append(field);
+  return select;
+}
+
+const WIDTHS = ['100%', '1024px', '800px', '480px', '320px'];
+
+/** Width presets for the frame around the component, which can also be resized by dragging its corner. */
+function mountSizeControls(frame, panel) {
+  const field = document.createElement('div');
+  field.className = 'pg-field';
+  field.textContent = 'Width';
+
+  const buttons = document.createElement('div');
+  buttons.className = 'pg-buttons';
+  WIDTHS.forEach(width => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = width;
+    button.addEventListener('click', () => (frame.style.width = width));
+    buttons.append(button);
+  });
+
+  const size = document.createElement('output');
+  size.className = 'pg-size';
+  new ResizeObserver(([entry]) => {
+    const { width, height } = entry.contentRect;
+    size.textContent = `${Math.round(width)} × ${Math.round(height)} px · drag the corner to resize`;
+  }).observe(frame);
+
+  field.append(buttons, size);
+  panel.append(field);
+}
+
+/** JSON editor for the component's data. Applied with the button or Ctrl/Cmd + Enter. */
+function createDataEditor(root, onApply) {
+  const textarea = root.querySelector('textarea');
+  const error = root.querySelector('.pg-error');
+
+  const apply = () => {
+    try {
+      onApply(textarea.value.trim() === '' ? undefined : JSON.parse(textarea.value));
+      error.textContent = '';
+    } catch (e) {
+      error.textContent = `Not applied: ${e.message}`;
+    }
+  };
+
+  root.querySelector('button').addEventListener('click', apply);
+  textarea.addEventListener('keydown', event => {
+    if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+      event.preventDefault();
+      apply();
+    }
+  });
+
+  return {
+    load(data) {
+      textarea.value = JSON.stringify(data, null, 2);
+      apply();
+    },
+  };
+}
+
+/** Event log, newest first. Also shows the component's console errors, which designers wouldn't see otherwise. */
+function createLog(root) {
+  const list = root.querySelector('ol');
+  root.querySelector('button').addEventListener('click', () => list.replaceChildren());
+
+  return {
+    add(name, detail, type = 'event') {
+      const item = document.createElement('li');
+      item.className = `pg-log-${type}`;
+
+      const entry = document.createElement('details');
+      const summary = document.createElement('summary');
+      summary.textContent = `${new Date().toLocaleTimeString()} · ${name}`;
+      const body = document.createElement('pre');
+      body.textContent = typeof detail === 'string' ? detail : JSON.stringify(detail, null, 2);
+
+      entry.append(summary, body);
+      item.append(entry);
+      list.prepend(item);
+    },
+  };
+}
+
+function captureConsole(log) {
+  ['error', 'warn'].forEach(level => {
+    const original = console[level].bind(console);
+    console[level] = (...args) => {
+      original(...args);
+      const text = args.map(arg => (arg instanceof Error ? arg.message : typeof arg === 'string' ? arg : JSON.stringify(arg))).join(' ');
+      log.add(`console.${level}`, text, level);
+    };
+  });
+}