@cahyo-dimas/freeday 1.7.0

package/dist/freeday-cfl.js

@@ -0,0 +1,213 @@
+/* Freeday — choose-from-list enhancer (optional, zero-dependency).
+ * Wires a searchable master-data picker dialog to read-only fields.
+ * Progressive enhancement over a native <dialog>; in a framework app, drive the
+ * dialog as a controlled component (fetchPage callback + server cache), not a store.
+ *
+ * Markup contract (see docs):
+ *  - Field group:  [data-fdy-cfl="<dialogId>"] — usually a `.fdy-input-group` holding a
+ *      read-only `.fdy-input` and a trigger `<button class="fdy-input-group__btn">`.
+ *      Optional `data-fdy-cfl-display="<key>"` picks which row dataset key fills the input
+ *      (default "value"); optional `data-fdy-cfl-summary="{n} dipilih"` formats the multi label.
+ *  - Standalone opener:  [data-fdy-cfl-open="<dialogId>"] — opens the dialog with no bound field.
+ *  - Dialog:  <dialog id="<dialogId>" class="fdy-modal fdy-modal--cfl"> containing
+ *      a `[data-fdy-cfl-search]` input, `.fdy-cfl__row` <tr> rows carrying `data-*` fields,
+ *      a `[data-fdy-cfl-empty]` element, and (multi only) `[data-fdy-cfl-multiple]` on the
+ *      dialog plus `[data-fdy-cfl-count]` and `[data-fdy-cfl-confirm]` in the footer.
+ *
+ * Emits a bubbling "fdy-cfl-select" CustomEvent on the field group (or the dialog when
+ * opened standalone): detail {row} for single-select, {rows} for multi-select — each a plain
+ * object copy of the row's dataset. Consumers fill sibling fields (code → name) from it.
+ */
+(function () {
+  'use strict';
+
+  function rowData(row) {
+    var out = {};
+    var ds = row.dataset;
+    for (var key in ds) { if (Object.prototype.hasOwnProperty.call(ds, key)) out[key] = ds[key]; }
+    return out;
+  }
+
+  function rowSearchText(row) {
+    return (row.getAttribute('data-search') != null ? row.getAttribute('data-search') : row.textContent)
+      .toLowerCase();
+  }
+
+  function initDialog(dialog) {
+    if (dialog.dataset.fdyCflReady === '1') return;
+    dialog.dataset.fdyCflReady = '1';
+
+    var search = dialog.querySelector('[data-fdy-cfl-search]');
+    var emptyEl = dialog.querySelector('[data-fdy-cfl-empty]');
+    var countEl = dialog.querySelector('[data-fdy-cfl-count]');
+    var confirmBtn = dialog.querySelector('[data-fdy-cfl-confirm]');
+    var multiple = dialog.hasAttribute('data-fdy-cfl-multiple');
+    var rows = Array.prototype.slice.call(dialog.querySelectorAll('.fdy-cfl__row'));
+
+    var activeGroup = null;   // field group that opened the dialog (null = standalone)
+    var trigger = null;       // control to restore focus to on close
+
+    rows.forEach(function (row) {
+      row.setAttribute('tabindex', '-1');
+      if (multiple && !row.hasAttribute('aria-selected')) row.setAttribute('aria-selected', 'false');
+    });
+
+    function visibleRows() {
+      return rows.filter(function (r) { return !r.hidden; });
+    }
+
+    function applyFilter() {
+      var q = (search ? search.value : '').trim().toLowerCase();
+      var shown = 0;
+      rows.forEach(function (row) {
+        var match = !q || rowSearchText(row).indexOf(q) !== -1;
+        row.hidden = !match;
+        if (match) shown++;
+      });
+      if (emptyEl) emptyEl.hidden = shown !== 0;
+    }
+
+    function updateCount() {
+      if (!countEl) return;
+      var n = rows.filter(function (r) { return r.getAttribute('aria-selected') === 'true'; }).length;
+      countEl.textContent = n + ' dipilih';
+    }
+
+    function fillGroup(detail) {
+      if (!activeGroup) return;
+      var input = activeGroup.querySelector('.fdy-input');
+      if (input) {
+        if (detail.rows) {
+          var tpl = activeGroup.getAttribute('data-fdy-cfl-summary') || '{n} dipilih';
+          input.value = detail.rows.length ? tpl.replace('{n}', String(detail.rows.length)) : '';
+        } else {
+          var key = activeGroup.getAttribute('data-fdy-cfl-display') || 'value';
+          input.value = detail.row[key] != null ? detail.row[key] : (detail.row.value || '');
+        }
+      }
+    }
+
+    function emit(detail) {
+      (activeGroup || dialog).dispatchEvent(new CustomEvent('fdy-cfl-select', {
+        bubbles: true, detail: detail
+      }));
+    }
+
+    function commitSingle(row) {
+      var detail = { row: rowData(row) };
+      fillGroup(detail);
+      emit(detail);
+      dialog.close();
+    }
+
+    function toggleSelect(row) {
+      var next = row.getAttribute('aria-selected') !== 'true';
+      row.setAttribute('aria-selected', String(next));
+      var box = row.querySelector('input[type="checkbox"]');
+      if (box) box.checked = next;
+      updateCount();
+    }
+
+    function confirmMulti() {
+      var picked = rows.filter(function (r) { return r.getAttribute('aria-selected') === 'true'; });
+      var detail = { rows: picked.map(rowData) };
+      fillGroup(detail);
+      emit(detail);
+      dialog.close();
+    }
+
+    function focusRow(row) { if (row) row.focus(); }
+
+    function moveFrom(current, delta) {
+      var vis = visibleRows();
+      var i = vis.indexOf(current);
+      if (i === -1) { focusRow(vis[0]); return; }
+      var target = i + delta;
+      if (target < 0) { if (search) search.focus(); return; }
+      if (target >= vis.length) return;
+      focusRow(vis[target]);
+    }
+
+    if (search) {
+      search.addEventListener('input', applyFilter);
+      search.addEventListener('keydown', function (e) {
+        if (e.key === 'ArrowDown') { e.preventDefault(); focusRow(visibleRows()[0]); }
+      });
+    }
+
+    dialog.addEventListener('click', function (e) {
+      var row = e.target.closest('.fdy-cfl__row');
+      if (!row || row.hidden) return;
+      if (multiple) toggleSelect(row); else commitSingle(row);
+    });
+
+    dialog.addEventListener('keydown', function (e) {
+      var row = e.target.closest('.fdy-cfl__row');
+      if (!row) return;
+      var vis = visibleRows();
+      switch (e.key) {
+        case 'ArrowDown': e.preventDefault(); moveFrom(row, 1); break;
+        case 'ArrowUp': e.preventDefault(); moveFrom(row, -1); break;
+        case 'Home': e.preventDefault(); focusRow(vis[0]); break;
+        case 'End': e.preventDefault(); focusRow(vis[vis.length - 1]); break;
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          if (multiple) toggleSelect(row); else commitSingle(row);
+          break;
+        default: break;
+      }
+    });
+
+    if (confirmBtn) confirmBtn.addEventListener('click', confirmMulti);
+
+    dialog.addEventListener('close', function () {
+      if (trigger && typeof trigger.focus === 'function') trigger.focus();
+      activeGroup = null;
+      trigger = null;
+    });
+
+    // Opening API used by triggers below.
+    dialog.fdyCflOpen = function (group, opener) {
+      activeGroup = group || null;
+      trigger = opener || null;
+      if (search) search.value = '';
+      applyFilter();
+      updateCount();
+      if (typeof dialog.showModal === 'function') dialog.showModal(); else dialog.setAttribute('open', '');
+      if (search) search.focus();
+    };
+  }
+
+  function initTriggers(context) {
+    var ctx = context || document;
+
+    Array.prototype.forEach.call(ctx.querySelectorAll('[data-fdy-cfl]'), function (group) {
+      if (group.dataset.fdyCflBound === '1') return;
+      var dialog = document.getElementById(group.getAttribute('data-fdy-cfl'));
+      if (!dialog) return;
+      initDialog(dialog);
+      var opener = group.querySelector('[data-fdy-cfl-trigger], .fdy-input-group__btn');
+      if (!opener) return;
+      group.dataset.fdyCflBound = '1';
+      opener.addEventListener('click', function () { dialog.fdyCflOpen(group, opener); });
+    });
+
+    Array.prototype.forEach.call(ctx.querySelectorAll('[data-fdy-cfl-open]'), function (opener) {
+      if (opener.dataset.fdyCflBound === '1') return;
+      var dialog = document.getElementById(opener.getAttribute('data-fdy-cfl-open'));
+      if (!dialog) return;
+      initDialog(dialog);
+      opener.dataset.fdyCflBound = '1';
+      opener.addEventListener('click', function () { dialog.fdyCflOpen(null, opener); });
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initTriggers(); });
+  } else {
+    initTriggers();
+  }
+
+  window.FreedayCfl = { init: initTriggers };
+})();

package/dist/freeday-chart.js

@@ -0,0 +1,403 @@
+/* Freeday — chart renderer (optional, zero-dependency, no external chart lib).
+ * Renders sparkline / bar / line / area / donut into an element from data attributes.
+ * Auto-inits [data-fdy-chart] once; call FreedayChart.update(el) to re-render after the
+ * data attributes change (used by the freeday/vue <FdyChart> wrapper for reactive data).
+ *
+ * Single-series colour (sparkline / simple bar / single line) via data-fdy-color references a
+ * semantic token by name (primary, accent, success, warning, danger, info). Multi-series
+ * defaults draw from the validated categorical --chart-1..8 palette in fixed order (never
+ * cycled, 8-series cap); pass data-fdy-colors to override with semantic names instead.
+ * Cartesian charts (line/area, multi-series/stacked bar) draw themed axes from --chart-grid /
+ * --chart-tick and format ticks + tooltips via data-fdy-format (number|percent|currency).
+ * Charts are an enhancement — put a table/text fallback inside the element and it will be
+ * replaced on render; give the element role="img" + aria-label.
+ *
+ *  Sparkline: <span data-fdy-chart="sparkline" data-values="4,6,5,8,7,10" data-fdy-color="primary">
+ *  Bar:       <div  data-fdy-chart="bar" data-values="12,19,8,15" data-labels="Sen,Sel,Rab,Kam">
+ *  Donut:     <div  data-fdy-chart="donut" data-values="45,30,25" data-labels="Lunas,Tertunda,Batal">
+ *  Line/area/multi bar (axes + legend + formatting):
+ *    <div data-fdy-chart="line" data-labels="Jan,Feb,Mar,Apr" data-fdy-format="percent"
+ *         data-series='[{"label":"Posted","values":[12,19,8,15]},{"label":"Draft","values":[4,6,5,8]}]'>
+ *    <div data-fdy-chart="bar" data-fdy-stacked data-labels="..." data-series='[...]'>
+ */
+(function () {
+  'use strict';
+
+  var NS = 'http://www.w3.org/2000/svg';
+
+  // Categorical chart palette: 8 validated fixed-order slots (--chart-1..8). Series index i
+  // (0-based) -> slot i+1; series beyond the 8-slot cap reuse --chart-8 (never cycled).
+  function chartSlotVar(i) { return 'var(--chart-' + (i < 8 ? i + 1 : 8) + ')'; }
+  function colorVar(name) { return 'var(--color-' + (name || 'primary') + ')'; }
+
+  function nums(el, attr) {
+    var v = el.getAttribute(attr);
+    return v ? v.split(',').map(function (s) { return parseFloat(s.trim()); }).filter(function (n) { return !isNaN(n); }) : [];
+  }
+  function strs(el, attr) {
+    var v = el.getAttribute(attr);
+    return v ? v.split(',').map(function (s) { return s.trim(); }) : [];
+  }
+  function ensureImg(el) { if (!el.hasAttribute('role')) el.setAttribute('role', 'img'); }
+  function svgEl(name) { return document.createElementNS(NS, name); }
+
+  // Multi-series model: data-series (JSON) wins; else the data-values single-series shortcut.
+  function getSeries(el) {
+    var raw = el.getAttribute('data-series');
+    if (raw) {
+      try {
+        var arr = JSON.parse(raw);
+        if (Array.isArray(arr)) return arr.map(function (s) {
+          return { label: s && s.label != null ? String(s.label) : '', values: ((s && s.values) || []).map(Number) };
+        });
+      } catch (e) { /* fall through to data-values */ }
+    }
+    var vals = nums(el, 'data-values');
+    return vals.length ? [{ label: el.getAttribute('data-fdy-label') || '', values: vals }] : [];
+  }
+
+  // Value formatter for ticks + tooltips.
+  function makeFormat(kind) {
+    if (kind === 'percent') return function (v) { return (Math.round(v * 10) / 10) + '%'; };
+    if (kind === 'currency' || kind === 'usd') return function (v) { return '$' + Math.round(v).toLocaleString('en-US'); };
+    return function (v) { return (Math.round(v * 100) / 100).toLocaleString(); };
+  }
+  // Round a positive number up to a "nice" axis maximum (1/2/2.5/5/10 * 10^n).
+  function niceCeil(x) {
+    if (x <= 0) return 1;
+    var exp = Math.floor(Math.log10(x)), base = Math.pow(10, exp), f = x / base;
+    var nf = f <= 1 ? 1 : f <= 2 ? 2 : f <= 2.5 ? 2.5 : f <= 5 ? 5 : 10;
+    return nf * base;
+  }
+
+  // ---- Interactive tooltip (Chart.js-style hover readout; purely visual) ----
+  function makeTip(container) {
+    if (getComputedStyle(container).position === 'static') container.style.position = 'relative';
+    var tip = document.createElement('div');
+    tip.className = 'fdy-chart__tip';
+    tip.setAttribute('aria-hidden', 'true');
+    container.appendChild(tip);
+    return tip;
+  }
+  function showTip(tip, container, clientX, clientY, text) {
+    var r = container.getBoundingClientRect();
+    tip.textContent = text;
+    tip.style.left = (clientX - r.left) + 'px';
+    tip.style.top = (clientY - r.top) + 'px';
+    tip.classList.add('is-visible');
+  }
+  function hideTip(tip) { tip.classList.remove('is-visible'); }
+
+  // Donut sector geometry (SVG path for a ring slice between two radii/angles).
+  function polar(cx, cy, r, deg) { var a = (deg - 90) * Math.PI / 180; return [cx + r * Math.cos(a), cy + r * Math.sin(a)]; }
+  function sectorPath(cx, cy, R, r, a0, a1) {
+    var large = (a1 - a0) > 180 ? 1 : 0;
+    var p0 = polar(cx, cy, R, a0), p1 = polar(cx, cy, R, a1), p2 = polar(cx, cy, r, a1), p3 = polar(cx, cy, r, a0);
+    return 'M' + p0[0].toFixed(2) + ' ' + p0[1].toFixed(2)
+      + ' A' + R + ' ' + R + ' 0 ' + large + ' 1 ' + p1[0].toFixed(2) + ' ' + p1[1].toFixed(2)
+      + ' L' + p2[0].toFixed(2) + ' ' + p2[1].toFixed(2)
+      + ' A' + r + ' ' + r + ' 0 ' + large + ' 0 ' + p3[0].toFixed(2) + ' ' + p3[1].toFixed(2) + ' Z';
+  }
+
+  function renderSparkline(el) {
+    var vals = nums(el, 'data-values');
+    if (vals.length < 2) return;
+    el.style.setProperty('--fdy-chart', colorVar(el.getAttribute('data-fdy-color')));
+    var W = 128, H = 36, P = 3;
+    var min = Math.min.apply(null, vals), max = Math.max.apply(null, vals), span = (max - min) || 1;
+    var pts = vals.map(function (v, i) {
+      var x = P + (i / (vals.length - 1)) * (W - 2 * P);
+      var y = H - P - ((v - min) / span) * (H - 2 * P);
+      return [x, y];
+    });
+    var line = pts.map(function (p) { return p[0].toFixed(1) + ',' + p[1].toFixed(1); }).join(' ');
+    var area = P + ',' + H + ' ' + line + ' ' + (W - P) + ',' + H;
+    var last = pts[pts.length - 1];
+    el.innerHTML = '<svg viewBox="0 0 ' + W + ' ' + H + '" aria-hidden="true">'
+      + '<polygon class="fdy-sparkline__area" points="' + area + '"/>'
+      + '<polyline class="fdy-sparkline__line" points="' + line + '" vector-effect="non-scaling-stroke"/>'
+      + '<circle class="fdy-sparkline__dot" cx="' + last[0].toFixed(1) + '" cy="' + last[1].toFixed(1) + '" r="2.5"/>'
+      + '</svg>';
+    ensureImg(el);
+  }
+
+  // Simple single-series flex bar (legacy, unchanged look). Rich/multi-series/stacked bars
+  // with axes go through renderCartesian instead.
+  function renderBars(el) {
+    var vals = nums(el, 'data-values');
+    if (!vals.length) return;
+    var labels = strs(el, 'data-labels');
+    el.style.setProperty('--fdy-chart', colorVar(el.getAttribute('data-fdy-color')));
+    var max = Math.max.apply(null, vals) || 1;
+    el.innerHTML = '';
+    var tip = makeTip(el);
+    vals.forEach(function (v, i) {
+      var col = document.createElement('div'); col.className = 'fdy-bars__col';
+      var track = document.createElement('div'); track.className = 'fdy-bars__track';
+      var val = document.createElement('span'); val.className = 'fdy-bars__val'; val.textContent = v;
+      var bar = document.createElement('div'); bar.className = 'fdy-bars__bar';
+      bar.style.height = Math.max(2, (v / max) * 100) + '%';
+      var text = (labels[i] || ('#' + (i + 1))) + ': ' + v;
+      track.appendChild(val); track.appendChild(bar);
+      col.appendChild(track);
+      if (labels[i]) {
+        var lab = document.createElement('div'); lab.className = 'fdy-bars__label'; lab.textContent = labels[i];
+        col.appendChild(lab);
+      }
+      // Per-column hover so re-render (update) never stacks document/element listeners.
+      col.addEventListener('mousemove', function (e) { showTip(tip, el, e.clientX, e.clientY, text); });
+      col.addEventListener('mouseleave', function () { hideTip(tip); });
+      el.appendChild(col);
+    });
+    ensureImg(el);
+  }
+
+  // ---- Cartesian engine: line / area / grouped+stacked bar with themed axes + legend ----
+  function renderCartesian(el, type) {
+    var series = getSeries(el);
+    if (!series.length) return;
+    var labels = strs(el, 'data-labels');
+    var fmt = makeFormat(el.getAttribute('data-fdy-format'));
+    var stacked = type === 'bar' && el.hasAttribute('data-fdy-stacked');
+    var overrides = strs(el, 'data-fdy-colors');
+    var singleColor = el.getAttribute('data-fdy-color');
+    function colorFor(i) {
+      if (overrides[i]) return colorVar(overrides[i]);
+      if (series.length === 1 && singleColor) return colorVar(singleColor);
+      return chartSlotVar(i);
+    }
+
+    var n = series.reduce(function (m, s) { return Math.max(m, s.values.length); }, 0);
+    if (!n) return;
+
+    // y-domain (baseline at 0 unless data dips below).
+    var dataMax = -Infinity, dataMin = Infinity;
+    if (stacked) {
+      for (var c = 0; c < n; c++) {
+        var sum = 0; series.forEach(function (s) { sum += (s.values[c] || 0); });
+        if (sum > dataMax) dataMax = sum; if (sum < dataMin) dataMin = sum;
+      }
+    } else {
+      series.forEach(function (s) { s.values.forEach(function (v) { if (v > dataMax) dataMax = v; if (v < dataMin) dataMin = v; }); });
+    }
+    if (dataMax === -Infinity) dataMax = 1;
+    var base = Math.min(0, dataMin);
+    var top = niceCeil(dataMax > base ? dataMax : base + 1);
+    if (top <= base) top = base + 1;
+
+    var W = 320, H = 180, PL = 38, PR = 10, PT = 10, PB = 22;
+    var plotW = W - PL - PR, plotH = H - PT - PB;
+    function mapY(v) { return PT + plotH * (1 - (v - base) / (top - base)); }
+    var slot = plotW / n;
+    function xCenter(i) { return PL + slot * (i + 0.5); }             // bar / band centre
+    function xLine(i) { return PL + (n === 1 ? plotW / 2 : (i / (n - 1)) * plotW); }
+
+    var svg = svgEl('svg');
+    svg.setAttribute('viewBox', '0 0 ' + W + ' ' + H);
+    svg.setAttribute('aria-hidden', 'true');
+
+    // y gridlines + formatted ticks (bottom line at `base` doubles as the zero baseline).
+    var TICKS = 4;
+    for (var k = 0; k <= TICKS; k++) {
+      var val = base + (top - base) * k / TICKS;
+      var gy = mapY(val);
+      var gl = svgEl('line');
+      gl.setAttribute('x1', PL); gl.setAttribute('x2', PL + plotW);
+      gl.setAttribute('y1', gy.toFixed(1)); gl.setAttribute('y2', gy.toFixed(1));
+      gl.setAttribute('class', 'fdy-chart-xy__grid');
+      svg.appendChild(gl);
+      var tk = svgEl('text');
+      tk.setAttribute('x', PL - 5); tk.setAttribute('y', (gy + 3).toFixed(1));
+      tk.setAttribute('text-anchor', 'end'); tk.setAttribute('class', 'fdy-chart-xy__tick');
+      tk.textContent = fmt(val);
+      svg.appendChild(tk);
+    }
+
+    // x category labels with autoskip.
+    var maxTicks = Math.max(2, Math.floor(plotW / 40)), step = Math.ceil(n / maxTicks);
+    for (var xi = 0; xi < n; xi++) {
+      if (xi % step !== 0 && xi !== n - 1) continue;
+      var lx = (type === 'bar') ? xCenter(xi) : xLine(xi);
+      var xt = svgEl('text');
+      xt.setAttribute('x', lx.toFixed(1)); xt.setAttribute('y', H - 6);
+      xt.setAttribute('text-anchor', 'middle'); xt.setAttribute('class', 'fdy-chart-xy__xlabel');
+      xt.textContent = labels[xi] || ('#' + (xi + 1));
+      svg.appendChild(xt);
+    }
+
+    if (type === 'bar') {
+      var S = series.length;
+      var groupW = slot * 0.72;
+      var barW = stacked ? slot * 0.55 : groupW / S;
+      var acc = [];                                   // running top per category (stacked)
+      for (var ci = 0; ci < n; ci++) acc[ci] = base;
+      series.forEach(function (s, si) {
+        s.values.forEach(function (v, ci2) {
+          if (v == null || isNaN(v)) return;
+          var x, y0, y1;
+          if (stacked) {
+            x = xCenter(ci2) - barW / 2;
+            y0 = mapY(acc[ci2]); y1 = mapY(acc[ci2] + v); acc[ci2] += v;
+          } else {
+            x = PL + slot * ci2 + (slot - groupW) / 2 + barW * si;
+            y0 = mapY(base); y1 = mapY(v);
+          }
+          var rect = svgEl('rect');
+          rect.setAttribute('x', x.toFixed(1)); rect.setAttribute('width', Math.max(1, barW - 1).toFixed(1));
+          rect.setAttribute('y', Math.min(y0, y1).toFixed(1)); rect.setAttribute('height', Math.max(0.5, Math.abs(y1 - y0)).toFixed(1));
+          rect.setAttribute('rx', '1.5'); rect.setAttribute('class', 'fdy-chart-xy__bar');
+          rect.style.fill = colorFor(si);
+          svg.appendChild(rect);
+        });
+      });
+    } else {
+      // line / area: fill (area) beneath the stroke, then a small dot per vertex.
+      series.forEach(function (s, si) {
+        var pts = [];
+        for (var i = 0; i < n; i++) { var v = s.values[i]; if (v == null || isNaN(v)) continue; pts.push([xLine(i), mapY(v)]); }
+        if (!pts.length) return;
+        var d = pts.map(function (p) { return p[0].toFixed(1) + ',' + p[1].toFixed(1); }).join(' ');
+        if (type === 'area') {
+          var y0 = mapY(base).toFixed(1);
+          var poly = svgEl('polygon');
+          poly.setAttribute('points', pts[0][0].toFixed(1) + ',' + y0 + ' ' + d + ' ' + pts[pts.length - 1][0].toFixed(1) + ',' + y0);
+          poly.setAttribute('class', 'fdy-chart-xy__area');
+          poly.style.fill = colorFor(si);
+          svg.appendChild(poly);
+        }
+        if (pts.length >= 2) {
+          var pl = svgEl('polyline');
+          pl.setAttribute('points', d); pl.setAttribute('class', 'fdy-chart-xy__line');
+          pl.style.stroke = colorFor(si);
+          svg.appendChild(pl);
+        }
+        pts.forEach(function (p) {
+          var dot = svgEl('circle');
+          dot.setAttribute('cx', p[0].toFixed(1)); dot.setAttribute('cy', p[1].toFixed(1)); dot.setAttribute('r', '2.2');
+          dot.setAttribute('class', 'fdy-chart-xy__dot'); dot.style.fill = colorFor(si);
+          svg.appendChild(dot);
+        });
+      });
+    }
+
+    // Assemble: optional legend on top, plot below, tooltip layer last.
+    var legendMode = el.getAttribute('data-fdy-legend') || 'auto';
+    var showLegend = legendMode !== 'none' && (series.length >= 2 || legendMode === 'always');
+    el.classList.add('fdy-chart-xy');
+    el.innerHTML = '';
+    if (showLegend) {
+      var legend = document.createElement('ul');
+      legend.className = 'fdy-chart__legend fdy-chart__legend--row';
+      series.forEach(function (s, si) {
+        var li = document.createElement('li');
+        var sw = document.createElement('span'); sw.className = 'fdy-chart__swatch'; sw.style.background = colorFor(si);
+        li.appendChild(sw);
+        li.appendChild(document.createTextNode(s.label || ('Seri ' + (si + 1))));
+        legend.appendChild(li);
+      });
+      el.appendChild(legend);
+    }
+    var plot = document.createElement('div'); plot.className = 'fdy-chart-xy__plot';
+    plot.appendChild(svg);
+    el.appendChild(plot);
+
+    // Hover: one transparent band per category → readout of every series at that x.
+    var tip = makeTip(el);
+    var bandW = (type === 'bar') ? slot : (n > 1 ? plotW / (n - 1) : plotW);
+    for (var b = 0; b < n; b++) {
+      var bx = (type === 'bar') ? (PL + slot * b) : (xLine(b) - bandW / 2);
+      var band = svgEl('rect');
+      band.setAttribute('x', Math.max(0, bx).toFixed(1)); band.setAttribute('y', PT);
+      band.setAttribute('width', bandW.toFixed(1)); band.setAttribute('height', plotH);
+      band.setAttribute('class', 'fdy-chart-xy__band');
+      var parts = series.map(function (s) {
+        var v = s.values[b];
+        return (v == null || isNaN(v)) ? null : (series.length > 1 ? s.label + ' ' : '') + fmt(v);
+      }).filter(Boolean);
+      var text = (labels[b] || ('#' + (b + 1))) + (parts.length ? ' · ' + parts.join(', ') : '');
+      band.addEventListener('mousemove', (function (t) { return function (e) { showTip(tip, el, e.clientX, e.clientY, t); }; })(text));
+      band.addEventListener('mouseleave', function () { hideTip(tip); });
+      svg.appendChild(band);
+    }
+    ensureImg(el);
+  }
+
+  function renderDonut(el) {
+    var vals = nums(el, 'data-values');
+    if (!vals.length) return;
+    var labels = strs(el, 'data-labels');
+    var colors = strs(el, 'data-fdy-colors');
+    var total = vals.reduce(function (a, b) { return a + b; }, 0) || 1;
+    var stops = [], acc = 0;
+    var colorAt = function (i) { return colors[i] ? colorVar(colors[i]) : chartSlotVar(i); };
+    vals.forEach(function (v, i) {
+      var from = (acc / total) * 360, to = ((acc + v) / total) * 360;
+      acc += v;
+      stops.push(colorAt(i) + ' ' + from.toFixed(1) + 'deg ' + to.toFixed(1) + 'deg');
+    });
+    el.innerHTML = '';
+    var ring = document.createElement('div'); ring.className = 'fdy-donut__ring';
+    ring.style.background = 'conic-gradient(' + stops.join(',') + ')';
+    var center = document.createElement('div'); center.className = 'fdy-donut__center';
+    var centerLabel = el.getAttribute('data-fdy-center');
+    center.innerHTML = centerLabel ? '<b></b>' : '<b></b><span>Total</span>';
+    center.querySelector('b').textContent = centerLabel != null ? centerLabel : String(total);
+    ring.appendChild(center);
+    var svg = svgEl('svg');
+    svg.setAttribute('class', 'fdy-donut__hit');
+    svg.setAttribute('viewBox', '0 0 128 128');
+    var ringTip = makeTip(ring), acc2 = 0;
+    vals.forEach(function (v, i) {
+      var a0 = (acc2 / total) * 360, a1 = ((acc2 + v) / total) * 360; acc2 += v;
+      var path = svgEl('path');
+      path.setAttribute('class', 'fdy-donut__seg');
+      path.setAttribute('d', sectorPath(64, 64, 64, 33, a0, a1));
+      var text = (labels[i] || ('#' + (i + 1))) + ': ' + v + ' (' + Math.round((v / total) * 100) + '%)';
+      path.addEventListener('mousemove', function (e) { showTip(ringTip, ring, e.clientX, e.clientY, text); });
+      path.addEventListener('mouseleave', function () { hideTip(ringTip); });
+      svg.appendChild(path);
+    });
+    ring.appendChild(svg);
+    var legend = document.createElement('ul'); legend.className = 'fdy-chart__legend';
+    vals.forEach(function (v, i) {
+      var li = document.createElement('li');
+      var sw = document.createElement('span'); sw.className = 'fdy-chart__swatch'; sw.style.background = colorAt(i);
+      li.appendChild(sw);
+      li.appendChild(document.createTextNode((labels[i] || ('#' + (i + 1))) + ' — ' + Math.round((v / total) * 100) + '%'));
+      legend.appendChild(li);
+    });
+    el.appendChild(ring); el.appendChild(legend);
+    ensureImg(el);
+  }
+
+  // Full (re-)render from current data attributes. Idempotent — safe to call repeatedly.
+  function renderChart(el) {
+    var type = el.getAttribute('data-fdy-chart');
+    if (type === 'sparkline') renderSparkline(el);
+    else if (type === 'donut') renderDonut(el);
+    else if (type === 'line' || type === 'area') renderCartesian(el, type);
+    else if (type === 'bar') {
+      if (el.getAttribute('data-series') || el.hasAttribute('data-fdy-stacked') || el.hasAttribute('data-fdy-axes')) renderCartesian(el, 'bar');
+      else renderBars(el);
+    }
+  }
+
+  // Auto-init renders once; explicit update() re-renders after data changes.
+  function initChart(el) {
+    if (el.dataset.fdyChartReady === '1') return;
+    el.dataset.fdyChartReady = '1';
+    renderChart(el);
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-chart]'), initChart);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayChart = { init: initChart, initAll: initAll, update: renderChart };
+})();