@datalabz_/dashboard-kit 6.0.2 → 6.0.4

package/README.md

@@ -53,6 +53,35 @@ A major's files are one served bundle; the repo's per-file line budget
 (AGENTS.md #2) does not apply to it — it cannot be split without changing the
 URLs already pinned by live dashboards.
 
+## Asking a dashboard for its filters
+
+A parent may post `{ type: 'DK_GET_FILTERS_INFO' }` to a dashboard's frame; the kit answers the parent with
+`{ type: 'DK_FILTERS_INFO', filters: [...] }`. It needs no token or period, so a parent can ask as soon as
+the frame has loaded. The list is the header controls the dashboard can be opened with, which is
+what the kit can write into a header control at its first boot, one entry each:
+
+```js
+{ id: 'playerUsername', label: 'Player username', type: 'text',  // type: the input's type, 'select' or 'textarea'
+  required: true, value: '',
+  placeholder, min, max,                    // only when the control sets them
+  disabled: true,                           // only when it is disabled
+  multiple: false, optionsTotal: 2,         // select only
+  options: [{ value: 'BRL', label: 'Real' }] }  // select only: the first 100 options
+```
+
+The list follows the fill, so it holds only what a filter can actually be given:
+
+- Left out: a control with no `id`, a second control with an `id` already listed, and radio, file,
+  hidden, password and button controls, which the kit refuses to fill.
+- A select lists only options with a value, since an empty value is refused, and `optionsTotal` counts
+  those. A select with none is left out: it takes no value.
+- What exists when the dashboard boots is what counts. Once it has booted, the answer is the list taken
+  at that moment, so options a section loads later by query, and controls added later, are not in it, as
+  they were not there for the fill. Only `value` and `disabled` are read again. A filter whose options
+  come from a query must therefore use static `<option>`s or a plain input to be openable.
+
+The answer always goes to the dashboard's parent, whoever asked.
+
 ## Rules
 
 - **Where a change lands — the current `vN` or a new major — is decided by

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalabz_/dashboard-kit",
-  "version": "6.0.2",
+  "version": "6.0.4",
   "description": "DashboardKit runtime + styles, served from jsDelivr",
   "license": "UNLICENSED",
   "files": [

package/v4.js

@@ -20,7 +20,7 @@
   let _activeTabId = '';
   let _sections = [];   // { id, label, load, loaded, errors }
   let _title = '';
-  let _gitVer = 'b3d1c2d'; // replaced at deploy: sed -i "s/b3d1c2d/$(git rev-parse --short HEAD)/g" v4.js
+  let _gitVer = 'ce29793'; // replaced at deploy: sed -i "s/ce29793/$(git rev-parse --short HEAD)/g" v4.js
   let _calls = [];   // System Info call log
   let _sectionErrors = {}; // sectionId → error count
   let _generation = 0;

package/v5.js

@@ -20,7 +20,7 @@
   let _activeTabId = '';
   let _sections = [];   // { id, label, load, loaded, errors }
   let _title = '';
-  let _gitVer = 'b3d1c2d'; // replaced at deploy: sed -i "s/b3d1c2d/$(git rev-parse --short HEAD)/g" v4.js
+  let _gitVer = 'ce29793'; // replaced at deploy: sed -i "s/ce29793/$(git rev-parse --short HEAD)/g" v4.js
   let _calls = [];   // System Info call log
   let _sectionErrors = {}; // sectionId → error count
   let _generation = 0;

package/v6.js

@@ -20,7 +20,7 @@
   let _activeTabId = '';
   let _sections = [];   // { id, label, load, loaded, errors }
   let _title = '';
-  let _gitVer = 'b3d1c2d'; // replaced at deploy: sed -i "s/b3d1c2d/$(git rev-parse --short HEAD)/g" v6.js
+  let _gitVer = 'ce29793'; // replaced at deploy: sed -i "s/ce29793/$(git rev-parse --short HEAD)/g" v6.js
   let _calls = [];   // System Info call log
   let _sectionErrors = {}; // sectionId → error count
   let _generation = 0;
@@ -931,8 +931,100 @@ details.dk-call summary::-webkit-details-marker {
     } catch { return false; }
   }
 
+  // ── Filters a parent can ask for ──────────────────────────────────────────────
+  // DK_GET_FILTERS_INFO from the parent is answered with DK_FILTERS_INFO: the header controls a
+  // dashboard can be opened with, which is what the kit can write into a header control at its first boot. So
+  // the list follows that flow and nothing else: a control it cannot fill is not listed (radio,
+  // file, hidden, password, buttons; no id; a second control with an id already listed), a select
+  // lists only options a value may name, since an empty value is refused, and a select with none
+  // is left out. What exists when the dashboard boots is what counts: once it has booted, the list
+  // is the one taken at that moment, so options a section loads later by query are not in it, as
+  // they were not there for the fill. Only value and disabled are read again. It needs no token or
+  // period, so a parent can ask as soon as the frame has loaded.
+  const UNFILLABLE_TYPES = ['radio', 'file', 'hidden', 'password', 'button', 'submit', 'reset', 'image'];
+  let _bootFilters = null;            // the list as it was when the dashboard booted
+  const FILTER_MAX_OPTIONS = 100;
+  const FILTER_MAX_TEXT = 500;
+
+  function _clip(s, n) {
+    s = String(s == null ? '' : s);
+    return s.length > n ? s.slice(0, n) : s;
+  }
+
+  function _filterLabel(el) {
+    const wrap = el.labels && el.labels[0];
+    if (wrap) {
+      const c = wrap.cloneNode(true);
+      c.querySelectorAll('input, select, textarea, .dk-tip, [aria-hidden="true"], script, style').forEach(function (n) { n.remove(); });
+      const t = c.textContent.replace(/\s+/g, ' ').trim();
+      if (t) return _clip(t, 200);
+    }
+    return _clip(el.getAttribute('aria-label') || el.getAttribute('placeholder') || '', 200);
+  }
+
+  function _controlValue(el) {
+    if (el.tagName === 'SELECT') {
+      return el.multiple ? Array.from(el.selectedOptions).map(function (o) { return o.value; }) : el.value;
+    }
+    return el.type === 'checkbox' ? el.checked : _clip(el.value, FILTER_MAX_TEXT);
+  }
+
+  function _dashboardFilters() {
+    const header = document.querySelector('[data-dk-header]');
+    const out = [];
+    if (!header) return out;
+    const seen = {};
+    header.querySelectorAll('input, select, textarea').forEach(function (el) {
+      if (!el.id || seen[el.id] || UNFILLABLE_TYPES.indexOf(el.type) >= 0) return;
+      const isSelect = el.tagName === 'SELECT';
+      const named = isSelect ? Array.from(el.options).filter(function (o) { return o.value !== ''; }) : null;
+      if (isSelect && !named.length) return;
+      seen[el.id] = true;
+      const f = {
+        id: el.id,
+        label: _filterLabel(el),
+        type: isSelect ? 'select' : el.tagName === 'TEXTAREA' ? 'textarea' : el.type,
+        required: el.required,
+      };
+      if (el.disabled) f.disabled = true;
+      if (!isSelect) {
+        ['placeholder', 'min', 'max'].forEach(function (a) {
+          if (el.getAttribute(a) !== null) f[a] = _clip(el.getAttribute(a), 100);
+        });
+      }
+      if (isSelect) {
+        f.multiple = el.multiple;
+        f.optionsTotal = named.length;
+        f.options = named.slice(0, FILTER_MAX_OPTIONS).map(function (o) {
+          return { value: _clip(o.value, 200), label: _clip(o.textContent.trim(), 200) };
+        });
+      }
+      f.value = _controlValue(el);
+      out.push(f);
+    });
+    return out;
+  }
+
+  // What DK_FILTERS_INFO carries: the booted list once there is one, with the values as they are now.
+  function _filtersInfo() {
+    const list = _bootFilters || _dashboardFilters();
+    const header = document.querySelector('[data-dk-header]');
+    list.forEach(function (f) {
+      const el = header ? header.querySelector('#' + CSS.escape(f.id)) : null;
+      if (!el) return;
+      f.value = _controlValue(el);
+      if (el.disabled) f.disabled = true; else delete f.disabled;
+    });
+    return list;
+  }
+
+
   function _onMessage(e) {
     if (!e.data || typeof e.data !== 'object') return;
+    if (e.data.type === 'DK_GET_FILTERS_INFO') {
+      window.parent.postMessage({ type: 'DK_FILTERS_INFO', filters: _filtersInfo() }, '*');
+      return;
+    }
     if (e.data.type === 'RK_SNAPSHOT') { _snapshot(); return; }
     if (e.data.type === 'CHAT_MODE') { document.documentElement.dataset.chatMode = 'true'; return; }
     if (e.data.type !== 'CUSTOM_DASHBOARDS_PARAMS') return;
@@ -960,6 +1052,7 @@ details.dk-call summary::-webkit-details-marker {
     }
 
     if (!_hasBooted && _authToken && _dateFromIso && _dateToIso && _timezone) {
+      _bootFilters = _dashboardFilters(); // before any section runs
       _hasBooted = true;
       const wait = document.getElementById('dk-wait');
       if (wait) wait.hidden = true;

package/wrapper.css

@@ -52,6 +52,15 @@ header.topbar {
   flex-wrap: wrap;
   flex-shrink: 0;
 }
+.platform-badge {
+  font-size: 14px;
+  font-weight: 700;
+  white-space: nowrap;
+  color: var(--text);
+}
+.platform-badge b {
+  color: var(--brand);
+}
 header .filters {
   display: flex;
   gap: 10px;

package/wrapper.js

@@ -1,17 +1,41 @@
 (function () {
   "use strict";
 
-  const API_BASE = "https://bcproxy.draftplaza.com";
-  const LS_TIMEZONE = "iqg.harness.timezone";
-  const LS_TOKEN = "iqg.harness.token";
-  const LS_USER = "iqg.harness.user";
-  const LS_THEME = "iqg.harness.theme";
+  // Where each platform's BackOffice lives; the page picks one with <script src=".../wrapper.js" data-platform="poker">.
+  // No data-platform means igaming, as before. An unknown name is an error, never a guess.
+  //   apiBase                  — sign-in (the BackOffice's own API)
+  //   gatewayEndpoint          — the SQL gateway a dashboard's queries go to, sent as `endpoint`
+  //   storagePrefix            — localStorage key prefix, so the two keep their own sign-in on one origin
+  //   label                    — the name in the top bar, before the word "Platform", that says which BackOffice this page talks to
+  const PLATFORMS = {
+    igaming: {
+      label: "iGaming",
+      apiBase: "https://bcproxy.draftplaza.com",
+      gatewayEndpoint: "https://aidqgateway.draftplaza.com/aidq",
+      storagePrefix: "iqg.harness.",
+    },
+    poker: {
+      label: "Poker",
+      apiBase: "https://pokerreporting.pokerplaza.com",
+      gatewayEndpoint: "https://aidqgateway.pokerplaza.com/aidq",
+      storagePrefix: "iqg.harness.poker.",
+    },
+  };
+  const platformName = (document.currentScript && document.currentScript.dataset.platform) || "igaming";
+  const CFG = PLATFORMS[platformName];
+  if (!CFG) throw new Error('wrapper: data-platform "' + platformName + '" is not one of ' + Object.keys(PLATFORMS).join(", "));
+  const API_BASE = CFG.apiBase;
+  const LS_TIMEZONE = CFG.storagePrefix + "timezone";
+  const LS_TOKEN = CFG.storagePrefix + "token";
+  const LS_USER = CFG.storagePrefix + "user";
+  const LS_THEME = CFG.storagePrefix + "theme";
 
   // Capture srcdoc from the inline iframe before DOM rebuild.
   const _srcdoc = document.getElementById("iframe")?.getAttribute("srcdoc") || "";
 
   document.body.innerHTML = `
     <header class="topbar">
+      <span class="platform-badge" id="platformBadge"></span>
       <div class="filters">
         <label>Date
           <select id="datePreset">
@@ -94,6 +118,10 @@
     <div class="toast" id="toast"></div>`;
 
   document.getElementById("iframe").setAttribute("srcdoc", _srcdoc);
+  const badge = document.getElementById("platformBadge");
+  badge.innerHTML = "<b></b> Platform";
+  badge.firstChild.textContent = CFG.label;
+  document.title = CFG.label + " · " + document.title;
 
   // ── Helpers ──────────────────────────────────────────────────────────────────
 
@@ -179,6 +207,8 @@
     const hid = State.filters.hierarchyId;
     return {
       type: "CUSTOM_DASHBOARDS_PARAMS", token: State.token, theme: State.theme,
+      // The SQL gateway of this BackOffice; the kit would otherwise use its own default.
+      endpoint: CFG.gatewayEndpoint,
       filters: {
         dateFrom: r.dateFromIso, dateTo: r.dateToIso, timezone: tz,
         hierarchyId: hid == null || Number.isNaN(hid) ? null : Number(hid)