@duckcodeailabs/dql-runtime 0.1.0

package/dist/dql-runtime.browser.js

@@ -0,0 +1,571 @@
+"use strict";
+var DQLRuntime = (() => {
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+  // src/index.ts
+  var index_exports = {};
+  __export(index_exports, {
+    DashboardLayout: () => DashboardLayout,
+    DataFetcher: () => DataFetcher,
+    FilterManager: () => FilterManager,
+    InteractionManager: () => InteractionManager,
+    KPIRenderer: () => KPIRenderer,
+    TableRenderer: () => TableRenderer,
+    VegaRenderer: () => VegaRenderer,
+    cleanDatum: () => cleanDatum,
+    escapeHTML: () => escapeHTML,
+    getClickedLabel: () => getClickedLabel,
+    initBreadcrumb: () => initBreadcrumb,
+    initHotReload: () => initHotReload,
+    interpolateDatum: () => interpolateDatum
+  });
+
+  // src/data-fetcher.ts
+  var DataFetcher = class {
+    constructor(apiEndpoint = "/api/query") {
+      __publicField(this, "apiEndpoint");
+      this.apiEndpoint = apiEndpoint;
+    }
+    async fetch(_chartId, sql, sqlParams, variables, connectionId) {
+      const response = await globalThis.fetch(this.apiEndpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sql, sqlParams, variables, connectionId })
+      });
+      if (!response.ok) {
+        throw new Error(`Query failed: ${response.statusText}`);
+      }
+      return response.json();
+    }
+  };
+
+  // src/vega-renderer.ts
+  var VegaRenderer = class {
+    async render(containerId, spec, data) {
+      const fullSpec = { ...spec, data: { values: data } };
+      const vegaEmbed = globalThis.vegaEmbed;
+      if (!vegaEmbed) {
+        throw new Error("vega-embed not loaded. Include the Vega-Lite CDN scripts.");
+      }
+      await vegaEmbed(`#${containerId}`, fullSpec, {
+        actions: false,
+        renderer: "svg"
+      });
+    }
+  };
+
+  // src/dashboard-layout.ts
+  var DashboardLayout = class {
+    constructor() {
+      __publicField(this, "container", null);
+    }
+    mount(elementId) {
+      this.container = document.getElementById(elementId);
+    }
+    setGrid(columns, gap = "16px") {
+      if (!this.container) return;
+      this.container.style.display = "grid";
+      this.container.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;
+      this.container.style.gap = gap;
+    }
+  };
+
+  // src/kpi-renderer.ts
+  var KPIRenderer = class {
+    render(containerId, data, metrics) {
+      const container = document.getElementById(containerId);
+      if (!container || data.length === 0) return;
+      const row = data[0];
+      const cards = metrics.map((metric) => {
+        const value = row[metric];
+        const label = metric.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+        return `<div class="dql-kpi-card"><div class="dql-kpi-label">${label}</div><div class="dql-kpi-value">${value ?? "-"}</div></div>`;
+      }).join("");
+      container.innerHTML = `<div class="dql-kpi-grid">${cards}</div>`;
+    }
+  };
+
+  // src/utils.ts
+  function escapeHTML(str) {
+    if (str === null || str === void 0) return "";
+    return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  function interpolateDatum(template, datum) {
+    return template.replace(/\{(\w+)\}/g, (_match, key) => {
+      const val = datum[key];
+      return val === null || val === void 0 ? "" : String(val);
+    });
+  }
+  function cleanDatum(datum) {
+    const clean = {};
+    for (const [k, v] of Object.entries(datum)) {
+      if (k !== "_vgsid_" && !k.startsWith("__")) {
+        clean[k] = v;
+      }
+    }
+    return clean;
+  }
+  function getClickedLabel(datum) {
+    const keys = Object.keys(datum).filter(
+      (k) => k !== "_vgsid_" && !k.startsWith("__") && typeof datum[k] === "string"
+    );
+    return keys.length > 0 ? String(datum[keys[0]]) : null;
+  }
+
+  // src/table-renderer.ts
+  var TableRenderer = class {
+    render(containerId, data, pageSize = 25) {
+      const container = document.getElementById(containerId);
+      if (!container || !data || data.length === 0) {
+        if (container) container.innerHTML = '<div class="dql-loading">No data</div>';
+        return;
+      }
+      const colNames = Object.keys(data[0]);
+      let html = '<table class="dql-drill-table" style="width:100%"><thead><tr>';
+      for (const col of colNames) {
+        const label = col.replace(/_/g, " ");
+        html += `<th style="cursor:pointer;" data-col="${col}">${escapeHTML(label)}</th>`;
+      }
+      html += "</tr></thead><tbody>";
+      const maxRows = Math.min(data.length, pageSize);
+      for (let r = 0; r < maxRows; r++) {
+        html += "<tr>";
+        for (const col of colNames) {
+          let val = data[r][col];
+          if (val === null || val === void 0) val = "";
+          else if (typeof val === "number") val = val.toLocaleString();
+          else val = String(val);
+          html += `<td>${escapeHTML(String(val))}</td>`;
+        }
+        html += "</tr>";
+      }
+      html += "</tbody></table>";
+      if (data.length > pageSize) {
+        html += `<p style="margin-top:12px;font-size:13px;opacity:0.7;">Showing ${maxRows} of ${data.length} rows</p>`;
+      }
+      container.innerHTML = html;
+    }
+  };
+
+  // src/interactions.ts
+  var InteractionManager = class {
+    constructor(fetcher, options = {}) {
+      __publicField(this, "vegaViews", {});
+      __publicField(this, "fetcher");
+      __publicField(this, "crossFilterState", {});
+      __publicField(this, "drillStack", []);
+      __publicField(this, "onStateChange");
+      this.fetcher = fetcher;
+      this.onStateChange = options.onStateChange;
+    }
+    registerView(chartId, view) {
+      this.vegaViews[chartId] = view;
+    }
+    getView(chartId) {
+      return this.vegaViews[chartId];
+    }
+    getState() {
+      return {
+        crossFilters: this.getCrossFilters(),
+        drillStack: this.getDrillStack()
+      };
+    }
+    getCrossFilters() {
+      return JSON.parse(JSON.stringify(this.crossFilterState));
+    }
+    getDrillStack() {
+      return JSON.parse(JSON.stringify(this.drillStack));
+    }
+    setupChartInteractions(chartId, view, interaction, _data) {
+      view.addEventListener("click", (_event, item) => {
+        if (!item || !item.datum) return;
+        const datum = item.datum;
+        if (interaction.drillDown) {
+          this.handleDrillDown(chartId, interaction.drillDown, datum);
+        }
+        if (interaction.linkTo) {
+          this.handleLinkTo(interaction.linkTo, datum);
+        }
+        if (interaction.onClick) {
+          this.handleOnClick(interaction.onClick, datum, chartId);
+        }
+      });
+      if (interaction.filterBy) {
+        this.setupFilterByInteraction(chartId, view, interaction.filterBy);
+      }
+    }
+    async drillUp() {
+      if (this.drillStack.length === 0) return;
+      this.drillStack.pop();
+      this.emitStateChange();
+      const modal = document.getElementById("dql-drill-modal");
+      const bodyEl = document.getElementById("dql-drill-body");
+      if (!modal || !bodyEl) return;
+      if (this.drillStack.length === 0) {
+        modal.classList.remove("active");
+        return;
+      }
+      const top = this.drillStack[this.drillStack.length - 1];
+      bodyEl.innerHTML = '<div class="dql-loading">Loading details...</div>';
+      const result = await this.fetchDrillDown(top);
+      if (result.error) {
+        bodyEl.innerHTML = `<div class="dql-error">${escapeHTML(result.error)}</div>`;
+        return;
+      }
+      if (!result.rows || result.rows.length === 0) {
+        bodyEl.innerHTML = '<div class="dql-loading">No data found</div>';
+        return;
+      }
+      bodyEl.innerHTML = this.renderDrillTable(result.columns, result.rows);
+    }
+    async handleDrillDown(chartId, drillDownSQL, datum) {
+      const clean = cleanDatum(datum);
+      const frame = {
+        chartId,
+        label: String(getClickedLabel(clean) || chartId),
+        templateSQL: drillDownSQL,
+        datum: clean,
+        predicates: this.buildPredicates(clean),
+        connectionId: this.resolveChartConnection(chartId)
+      };
+      this.drillStack.push(frame);
+      this.emitStateChange();
+      const modal = document.getElementById("dql-drill-modal");
+      const titleEl = document.getElementById("dql-drill-title");
+      const stackEl = document.getElementById("dql-drill-stack");
+      const bodyEl = document.getElementById("dql-drill-body");
+      if (!modal || !bodyEl) return;
+      if (titleEl) titleEl.textContent = "Detail View - " + frame.label;
+      if (stackEl) {
+        stackEl.textContent = this.drillStack.map((entry) => entry.label).join(" > ");
+      }
+      bodyEl.innerHTML = '<div class="dql-loading">Loading details...</div>';
+      modal.classList.add("active");
+      const result = await this.fetchDrillDown(frame);
+      if (result.error) {
+        bodyEl.innerHTML = `<div class="dql-error">${escapeHTML(result.error)}</div>`;
+        return;
+      }
+      if (!result.rows || result.rows.length === 0) {
+        bodyEl.innerHTML = '<div class="dql-loading">No data found</div>';
+        return;
+      }
+      bodyEl.innerHTML = this.renderDrillTable(result.columns, result.rows);
+    }
+    async fetchDrillDown(frame) {
+      try {
+        const apiEndpoint = globalThis.DQL_CONFIG?.apiEndpoint ?? "/api/query";
+        const response = await globalThis.fetch(apiEndpoint.replace("/query", "/drill"), {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            chartId: frame.chartId,
+            templateSQL: frame.templateSQL,
+            datum: frame.datum,
+            connectionId: frame.connectionId
+          })
+        });
+        if (!response.ok) throw new Error("Drill-down query failed: " + response.statusText);
+        return response.json();
+      } catch (error) {
+        return { columns: [], rows: [], error: error.message };
+      }
+    }
+    renderDrillTable(columns, rows) {
+      const colNames = columns ? columns.map((c) => c.name) : Object.keys(rows[0] || {});
+      let html = '<table class="dql-drill-table"><thead><tr>';
+      for (const col of colNames) {
+        html += `<th>${escapeHTML(col)}</th>`;
+      }
+      html += "</tr></thead><tbody>";
+      const maxRows = Math.min(rows.length, 100);
+      for (let r = 0; r < maxRows; r++) {
+        html += "<tr>";
+        for (const col of colNames) {
+          const val = rows[r][col];
+          html += `<td>${escapeHTML(val === null || val === void 0 ? "" : String(val))}</td>`;
+        }
+        html += "</tr>";
+      }
+      html += "</tbody></table>";
+      if (rows.length > 100) {
+        html += `<p style="margin-top:12px;color:#888;">Showing first 100 of ${rows.length} rows</p>`;
+      }
+      return html;
+    }
+    handleLinkTo(linkTo, datum) {
+      let url = linkTo.replace(/\{(\w+)\}/g, (_m, key) => {
+        const val = datum[key];
+        return val === null || val === void 0 ? "" : String(val);
+      });
+      const config = globalThis.DQL_CONFIG;
+      const sep = url.indexOf("?") >= 0 ? "&" : "?";
+      url += sep + "_from=" + encodeURIComponent(location.pathname) + "&_fromTitle=" + encodeURIComponent(config?.title ?? "");
+      window.location.href = url;
+    }
+    handleOnClick(action, datum, chartId) {
+      const event = new CustomEvent("dql:click", {
+        detail: { chartId, action, datum },
+        bubbles: true
+      });
+      document.dispatchEvent(event);
+      const config = globalThis.DQL_CONFIG;
+      if (action === "drill_down") {
+        const interaction = config?.interactions?.[chartId];
+        if (interaction?.drillDown) {
+          this.handleDrillDown(chartId, interaction.drillDown, datum);
+        }
+      } else if (action === "navigate" || action === "link") {
+        const interaction = config?.interactions?.[chartId];
+        if (interaction?.linkTo) {
+          this.handleLinkTo(interaction.linkTo, datum);
+        }
+      } else if (action.startsWith("set_param:") || action.startsWith("set_params:")) {
+        document.dispatchEvent(new CustomEvent("dql:param-action", {
+          detail: { chartId, action, datum },
+          bubbles: true
+        }));
+      }
+    }
+    setupFilterByInteraction(chartId, view, filterBy) {
+      const fields = Array.isArray(filterBy) ? filterBy : [filterBy];
+      view.addSignalListener("dql_filter", (_name, value) => {
+        const selectedValues = {};
+        if (value && value.vlPoint && value.vlPoint.or) {
+          for (const point of value.vlPoint.or) {
+            for (const field of fields) {
+              if (point[field] !== void 0 && point[field] !== null && point[field] !== "") {
+                if (!selectedValues[field]) selectedValues[field] = [];
+                if (!selectedValues[field].includes(point[field])) {
+                  selectedValues[field].push(point[field]);
+                }
+              }
+            }
+          }
+        }
+        this.applyCrossChartFilter(chartId, selectedValues);
+      });
+    }
+    applyCrossChartFilter(sourceChartId, selectedValues) {
+      if (Object.keys(selectedValues).length === 0) {
+        delete this.crossFilterState[sourceChartId];
+      } else {
+        this.crossFilterState[sourceChartId] = selectedValues;
+      }
+      this.emitStateChange();
+      document.dispatchEvent(new CustomEvent("dql:cross-filter", {
+        detail: {
+          sourceChartId,
+          selectedValues,
+          state: this.getCrossFilters()
+        },
+        bubbles: true
+      }));
+    }
+    buildPredicates(datum) {
+      const predicates = {};
+      for (const [key, value] of Object.entries(datum)) {
+        if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(key)) continue;
+        if (value === null || value === void 0 || value === "") continue;
+        predicates[key] = [value];
+      }
+      return predicates;
+    }
+    resolveChartConnection(chartId) {
+      const config = globalThis.DQL_CONFIG;
+      const charts = Array.isArray(config?.charts) ? config.charts : [];
+      const chart = charts.find((entry) => entry.id === chartId);
+      return chart?.connection;
+    }
+    emitStateChange() {
+      if (this.onStateChange) {
+        this.onStateChange(this.getState());
+      }
+    }
+  };
+
+  // src/filter-manager.ts
+  var FilterManager = class {
+    constructor(fetcher, onApply) {
+      __publicField(this, "filterState", {});
+      __publicField(this, "fetcher");
+      __publicField(this, "onApply");
+      this.fetcher = fetcher;
+      this.onApply = onApply;
+    }
+    getState() {
+      return { ...this.filterState };
+    }
+    async init(filters) {
+      if (!filters || filters.length === 0) return;
+      for (const filter of filters) {
+        if (filter.sql) {
+          await this.loadFilterOptions(filter);
+        }
+        if (filter.defaultValue) {
+          this.filterState[filter.param] = filter.defaultValue;
+          this.setUIValue(filter.id, filter.defaultValue);
+        }
+      }
+      this.setupEventHandlers(filters);
+    }
+    async loadFilterOptions(filter) {
+      try {
+        const result = await this.fetcher.fetch(filter.id, filter.sql, []);
+        if (!result.rows || result.rows.length === 0) return;
+        const selectEl = document.getElementById(filter.id);
+        if (!selectEl || selectEl.tagName !== "SELECT") return;
+        const colName = result.columns && result.columns.length > 0 ? result.columns[0].name : Object.keys(result.rows[0] || {})[0];
+        if (!colName) return;
+        for (const row of result.rows) {
+          const val = row[colName];
+          if (val === null || val === void 0) continue;
+          const option = document.createElement("option");
+          option.value = String(val);
+          option.textContent = String(val);
+          selectEl.appendChild(option);
+        }
+      } catch (err) {
+        console.warn("[DQL] Failed to load filter options for " + filter.id, err);
+      }
+    }
+    setUIValue(filterId, value) {
+      const el = document.getElementById(filterId);
+      if (!el) return;
+      el.value = String(value);
+    }
+    setupEventHandlers(filters) {
+      const applyBtn = document.getElementById("dql-filter-apply");
+      const resetBtn = document.getElementById("dql-filter-reset");
+      if (applyBtn) {
+        applyBtn.addEventListener("click", () => {
+          this.collectState(filters);
+          this.onApply();
+        });
+      }
+      if (resetBtn) {
+        resetBtn.addEventListener("click", () => {
+          this.resetState(filters);
+          this.onApply();
+        });
+      }
+      const autoApplyEls = document.querySelectorAll(".dql-filter-select, .dql-filter-date");
+      autoApplyEls.forEach((el) => {
+        el.addEventListener("change", () => {
+          this.collectState(filters);
+          this.onApply();
+        });
+      });
+      const debounceTimers = {};
+      const textInputs = document.querySelectorAll('.dql-filter-input[type="text"]');
+      textInputs.forEach((el) => {
+        el.addEventListener("input", () => {
+          const id = el.id;
+          if (debounceTimers[id]) clearTimeout(debounceTimers[id]);
+          debounceTimers[id] = setTimeout(() => {
+            this.collectState(filters);
+            this.onApply();
+          }, 300);
+        });
+      });
+    }
+    collectState(filters) {
+      this.filterState = {};
+      for (const filter of filters) {
+        const el = document.getElementById(filter.id);
+        if (!el) continue;
+        const value = el.value;
+        if (value && value !== "") {
+          this.filterState[filter.param] = value;
+        }
+      }
+    }
+    resetState(filters) {
+      this.filterState = {};
+      for (const filter of filters) {
+        const el = document.getElementById(filter.id);
+        if (!el) continue;
+        if (filter.defaultValue) {
+          el.value = String(filter.defaultValue);
+          this.filterState[filter.param] = filter.defaultValue;
+        } else {
+          el.value = "";
+        }
+      }
+    }
+    applyToSQL(sql) {
+      const urlParams = new URLSearchParams(window.location.search);
+      const merged = { ...this.filterState };
+      urlParams.forEach((value, key) => {
+        if (key !== "_from" && key !== "_fromTitle" && !merged[key]) {
+          merged[key] = value;
+        }
+      });
+      let result = sql;
+      for (const [paramName, paramValue] of Object.entries(merged)) {
+        const placeholder = "{" + paramName + "}";
+        result = result.split(placeholder).join(String(paramValue).replace(/'/g, "''"));
+      }
+      return result;
+    }
+  };
+
+  // src/breadcrumb.ts
+  function initBreadcrumb() {
+    const breadcrumb = document.getElementById("dql-breadcrumb");
+    if (!breadcrumb) return;
+    const urlParams = new URLSearchParams(window.location.search);
+    const fromPath = urlParams.get("_from");
+    const fromTitle = urlParams.get("_fromTitle");
+    const config = globalThis.DQL_CONFIG;
+    if (fromPath && fromTitle) {
+      breadcrumb.innerHTML = `<a href="${escapeHTML(fromPath)}">${escapeHTML(fromTitle)}</a><span class="dql-breadcrumb-sep">/</span><span>${escapeHTML(config?.title ?? "")}</span>`;
+    }
+  }
+
+  // src/hot-reload-client.ts
+  function initHotReload(wsUrl) {
+    if (typeof WebSocket === "undefined") return;
+    const url = wsUrl ?? `${location.protocol === "https:" ? "wss:" : "ws:"}//${location.host}/__dql_hmr`;
+    let reconnectAttempts = 0;
+    function connect() {
+      const ws = new WebSocket(url);
+      ws.onopen = () => {
+        console.log("[DQL] Hot-reload connected");
+        reconnectAttempts = 0;
+      };
+      ws.onmessage = (event) => {
+        const msg = JSON.parse(event.data);
+        if (msg.type === "reload") {
+          location.reload();
+        }
+      };
+      ws.onclose = () => {
+        if (reconnectAttempts < 10) {
+          reconnectAttempts++;
+          setTimeout(connect, Math.min(1e3 * 2 ** reconnectAttempts, 1e4));
+        }
+      };
+    }
+    connect();
+  }
+  return __toCommonJS(index_exports);
+})();

package/dist/dql-runtime.browser.min.js

@@ -0,0 +1 @@
+"use strict";var DQLRuntime=(()=>{var p=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var R=(o,e,t)=>e in o?p(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t;var q=(o,e)=>{for(var t in e)p(o,t,{get:e[t],enumerable:!0})},F=(o,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of x(e))!I.call(o,r)&&r!==t&&p(o,r,{get:()=>e[r],enumerable:!(n=D(e,r))||n.enumerable});return o};var _=o=>F(p({},"__esModule",{value:!0}),o);var u=(o,e,t)=>R(o,typeof e!="symbol"?e+"":e,t);var O={};q(O,{DashboardLayout:()=>h,DataFetcher:()=>f,FilterManager:()=>b,InteractionManager:()=>S,KPIRenderer:()=>v,TableRenderer:()=>k,VegaRenderer:()=>m,cleanDatum:()=>y,escapeHTML:()=>g,getClickedLabel:()=>w,initBreadcrumb:()=>C,initHotReload:()=>E,interpolateDatum:()=>T});var f=class{constructor(e="/api/query"){u(this,"apiEndpoint");this.apiEndpoint=e}async fetch(e,t,n,r,s){let i=await globalThis.fetch(this.apiEndpoint,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({sql:t,sqlParams:n,variables:r,connectionId:s})});if(!i.ok)throw new Error(`Query failed: ${i.statusText}`);return i.json()}};var m=class{async render(e,t,n){let r={...t,data:{values:n}},s=globalThis.vegaEmbed;if(!s)throw new Error("vega-embed not loaded. Include the Vega-Lite CDN scripts.");await s(`#${e}`,r,{actions:!1,renderer:"svg"})}};var h=class{constructor(){u(this,"container",null)}mount(e){this.container=document.getElementById(e)}setGrid(e,t="16px"){this.container&&(this.container.style.display="grid",this.container.style.gridTemplateColumns=`repeat(${e}, 1fr)`,this.container.style.gap=t)}};var v=class{render(e,t,n){let r=document.getElementById(e);if(!r||t.length===0)return;let s=t[0],i=n.map(l=>{let a=s[l];return`<div class="dql-kpi-card"><div class="dql-kpi-label">${l.replace(/_/g," ").replace(/\b\w/g,d=>d.toUpperCase())}</div><div class="dql-kpi-value">${a??"-"}</div></div>`}).join("");r.innerHTML=`<div class="dql-kpi-grid">${i}</div>`}};function g(o){return o==null?"":String(o).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function T(o,e){return o.replace(/\{(\w+)\}/g,(t,n)=>{let r=e[n];return r==null?"":String(r)})}function y(o){let e={};for(let[t,n]of Object.entries(o))t!=="_vgsid_"&&!t.startsWith("__")&&(e[t]=n);return e}function w(o){let e=Object.keys(o).filter(t=>t!=="_vgsid_"&&!t.startsWith("__")&&typeof o[t]=="string");return e.length>0?String(o[e[0]]):null}var k=class{render(e,t,n=25){let r=document.getElementById(e);if(!r||!t||t.length===0){r&&(r.innerHTML='<div class="dql-loading">No data</div>');return}let s=Object.keys(t[0]),i='<table class="dql-drill-table" style="width:100%"><thead><tr>';for(let a of s){let c=a.replace(/_/g," ");i+=`<th style="cursor:pointer;" data-col="${a}">${g(c)}</th>`}i+="</tr></thead><tbody>";let l=Math.min(t.length,n);for(let a=0;a<l;a++){i+="<tr>";for(let c of s){let d=t[a][c];d==null?d="":typeof d=="number"?d=d.toLocaleString():d=String(d),i+=`<td>${g(String(d))}</td>`}i+="</tr>"}i+="</tbody></table>",t.length>n&&(i+=`<p style="margin-top:12px;font-size:13px;opacity:0.7;">Showing ${l} of ${t.length} rows</p>`),r.innerHTML=i}};var S=class{constructor(e,t={}){u(this,"vegaViews",{});u(this,"fetcher");u(this,"crossFilterState",{});u(this,"drillStack",[]);u(this,"onStateChange");this.fetcher=e,this.onStateChange=t.onStateChange}registerView(e,t){this.vegaViews[e]=t}getView(e){return this.vegaViews[e]}getState(){return{crossFilters:this.getCrossFilters(),drillStack:this.getDrillStack()}}getCrossFilters(){return JSON.parse(JSON.stringify(this.crossFilterState))}getDrillStack(){return JSON.parse(JSON.stringify(this.drillStack))}setupChartInteractions(e,t,n,r){t.addEventListener("click",(s,i)=>{if(!i||!i.datum)return;let l=i.datum;n.drillDown&&this.handleDrillDown(e,n.drillDown,l),n.linkTo&&this.handleLinkTo(n.linkTo,l),n.onClick&&this.handleOnClick(n.onClick,l,e)}),n.filterBy&&this.setupFilterByInteraction(e,t,n.filterBy)}async drillUp(){if(this.drillStack.length===0)return;this.drillStack.pop(),this.emitStateChange();let e=document.getElementById("dql-drill-modal"),t=document.getElementById("dql-drill-body");if(!e||!t)return;if(this.drillStack.length===0){e.classList.remove("active");return}let n=this.drillStack[this.drillStack.length-1];t.innerHTML='<div class="dql-loading">Loading details...</div>';let r=await this.fetchDrillDown(n);if(r.error){t.innerHTML=`<div class="dql-error">${g(r.error)}</div>`;return}if(!r.rows||r.rows.length===0){t.innerHTML='<div class="dql-loading">No data found</div>';return}t.innerHTML=this.renderDrillTable(r.columns,r.rows)}async handleDrillDown(e,t,n){let r=y(n),s={chartId:e,label:String(w(r)||e),templateSQL:t,datum:r,predicates:this.buildPredicates(r),connectionId:this.resolveChartConnection(e)};this.drillStack.push(s),this.emitStateChange();let i=document.getElementById("dql-drill-modal"),l=document.getElementById("dql-drill-title"),a=document.getElementById("dql-drill-stack"),c=document.getElementById("dql-drill-body");if(!i||!c)return;l&&(l.textContent="Detail View - "+s.label),a&&(a.textContent=this.drillStack.map(L=>L.label).join(" > ")),c.innerHTML='<div class="dql-loading">Loading details...</div>',i.classList.add("active");let d=await this.fetchDrillDown(s);if(d.error){c.innerHTML=`<div class="dql-error">${g(d.error)}</div>`;return}if(!d.rows||d.rows.length===0){c.innerHTML='<div class="dql-loading">No data found</div>';return}c.innerHTML=this.renderDrillTable(d.columns,d.rows)}async fetchDrillDown(e){try{let t=globalThis.DQL_CONFIG?.apiEndpoint??"/api/query",n=await globalThis.fetch(t.replace("/query","/drill"),{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({chartId:e.chartId,templateSQL:e.templateSQL,datum:e.datum,connectionId:e.connectionId})});if(!n.ok)throw new Error("Drill-down query failed: "+n.statusText);return n.json()}catch(t){return{columns:[],rows:[],error:t.message}}}renderDrillTable(e,t){let n=e?e.map(i=>i.name):Object.keys(t[0]||{}),r='<table class="dql-drill-table"><thead><tr>';for(let i of n)r+=`<th>${g(i)}</th>`;r+="</tr></thead><tbody>";let s=Math.min(t.length,100);for(let i=0;i<s;i++){r+="<tr>";for(let l of n){let a=t[i][l];r+=`<td>${g(a==null?"":String(a))}</td>`}r+="</tr>"}return r+="</tbody></table>",t.length>100&&(r+=`<p style="margin-top:12px;color:#888;">Showing first 100 of ${t.length} rows</p>`),r}handleLinkTo(e,t){let n=e.replace(/\{(\w+)\}/g,(i,l)=>{let a=t[l];return a==null?"":String(a)}),r=globalThis.DQL_CONFIG,s=n.indexOf("?")>=0?"&":"?";n+=s+"_from="+encodeURIComponent(location.pathname)+"&_fromTitle="+encodeURIComponent(r?.title??""),window.location.href=n}handleOnClick(e,t,n){let r=new CustomEvent("dql:click",{detail:{chartId:n,action:e,datum:t},bubbles:!0});document.dispatchEvent(r);let s=globalThis.DQL_CONFIG;if(e==="drill_down"){let i=s?.interactions?.[n];i?.drillDown&&this.handleDrillDown(n,i.drillDown,t)}else if(e==="navigate"||e==="link"){let i=s?.interactions?.[n];i?.linkTo&&this.handleLinkTo(i.linkTo,t)}else(e.startsWith("set_param:")||e.startsWith("set_params:"))&&document.dispatchEvent(new CustomEvent("dql:param-action",{detail:{chartId:n,action:e,datum:t},bubbles:!0}))}setupFilterByInteraction(e,t,n){let r=Array.isArray(n)?n:[n];t.addSignalListener("dql_filter",(s,i)=>{let l={};if(i&&i.vlPoint&&i.vlPoint.or)for(let a of i.vlPoint.or)for(let c of r)a[c]!==void 0&&a[c]!==null&&a[c]!==""&&(l[c]||(l[c]=[]),l[c].includes(a[c])||l[c].push(a[c]));this.applyCrossChartFilter(e,l)})}applyCrossChartFilter(e,t){Object.keys(t).length===0?delete this.crossFilterState[e]:this.crossFilterState[e]=t,this.emitStateChange(),document.dispatchEvent(new CustomEvent("dql:cross-filter",{detail:{sourceChartId:e,selectedValues:t,state:this.getCrossFilters()},bubbles:!0}))}buildPredicates(e){let t={};for(let[n,r]of Object.entries(e))/^[A-Za-z_][A-Za-z0-9_]*$/.test(n)&&(r==null||r===""||(t[n]=[r]));return t}resolveChartConnection(e){let t=globalThis.DQL_CONFIG;return(Array.isArray(t?.charts)?t.charts:[]).find(s=>s.id===e)?.connection}emitStateChange(){this.onStateChange&&this.onStateChange(this.getState())}};var b=class{constructor(e,t){u(this,"filterState",{});u(this,"fetcher");u(this,"onApply");this.fetcher=e,this.onApply=t}getState(){return{...this.filterState}}async init(e){if(!(!e||e.length===0)){for(let t of e)t.sql&&await this.loadFilterOptions(t),t.defaultValue&&(this.filterState[t.param]=t.defaultValue,this.setUIValue(t.id,t.defaultValue));this.setupEventHandlers(e)}}async loadFilterOptions(e){try{let t=await this.fetcher.fetch(e.id,e.sql,[]);if(!t.rows||t.rows.length===0)return;let n=document.getElementById(e.id);if(!n||n.tagName!=="SELECT")return;let r=t.columns&&t.columns.length>0?t.columns[0].name:Object.keys(t.rows[0]||{})[0];if(!r)return;for(let s of t.rows){let i=s[r];if(i==null)continue;let l=document.createElement("option");l.value=String(i),l.textContent=String(i),n.appendChild(l)}}catch(t){console.warn("[DQL] Failed to load filter options for "+e.id,t)}}setUIValue(e,t){let n=document.getElementById(e);n&&(n.value=String(t))}setupEventHandlers(e){let t=document.getElementById("dql-filter-apply"),n=document.getElementById("dql-filter-reset");t&&t.addEventListener("click",()=>{this.collectState(e),this.onApply()}),n&&n.addEventListener("click",()=>{this.resetState(e),this.onApply()}),document.querySelectorAll(".dql-filter-select, .dql-filter-date").forEach(l=>{l.addEventListener("change",()=>{this.collectState(e),this.onApply()})});let s={};document.querySelectorAll('.dql-filter-input[type="text"]').forEach(l=>{l.addEventListener("input",()=>{let a=l.id;s[a]&&clearTimeout(s[a]),s[a]=setTimeout(()=>{this.collectState(e),this.onApply()},300)})})}collectState(e){this.filterState={};for(let t of e){let n=document.getElementById(t.id);if(!n)continue;let r=n.value;r&&r!==""&&(this.filterState[t.param]=r)}}resetState(e){this.filterState={};for(let t of e){let n=document.getElementById(t.id);n&&(t.defaultValue?(n.value=String(t.defaultValue),this.filterState[t.param]=t.defaultValue):n.value="")}}applyToSQL(e){let t=new URLSearchParams(window.location.search),n={...this.filterState};t.forEach((s,i)=>{i!=="_from"&&i!=="_fromTitle"&&!n[i]&&(n[i]=s)});let r=e;for(let[s,i]of Object.entries(n)){let l="{"+s+"}";r=r.split(l).join(String(i).replace(/'/g,"''"))}return r}};function C(){let o=document.getElementById("dql-breadcrumb");if(!o)return;let e=new URLSearchParams(window.location.search),t=e.get("_from"),n=e.get("_fromTitle"),r=globalThis.DQL_CONFIG;t&&n&&(o.innerHTML=`<a href="${g(t)}">${g(n)}</a><span class="dql-breadcrumb-sep">/</span><span>${g(r?.title??"")}</span>`)}function E(o){if(typeof WebSocket>"u")return;let e=o??`${location.protocol==="https:"?"wss:":"ws:"}//${location.host}/__dql_hmr`,t=0;function n(){let r=new WebSocket(e);r.onopen=()=>{console.log("[DQL] Hot-reload connected"),t=0},r.onmessage=s=>{JSON.parse(s.data).type==="reload"&&location.reload()},r.onclose=()=>{t<10&&(t++,setTimeout(n,Math.min(1e3*2**t,1e4)))}}n()}return _(O);})();