dataface 0.1.2__py3-none-any.whl

dataface/core/render/templates/controls/number.html

@@ -0,0 +1,19 @@
+{# Number Input Control #}
+<div class="dft-variable-control dft-variable"
+     data-variable-id="{{ name }}"
+     data-variable-label="{{ label }}"
+     {% if depends_on %}data-depends-on="{{ depends_on | tojson }}"{% endif %}>
+
+  <label class="dft-variable-label" for="var-{{ name }}">{{ label }}:</label>
+
+  <input type="number"
+         id="var-{{ name }}"
+         name="{{ name }}"
+         class="dft-variable-input"
+         data-variable="{{ name }}"
+         value="{{ value if value is not none else '' }}"
+         {% if min is not none %}min="{{ min }}"{% endif %}
+         {% if max is not none %}max="{{ max }}"{% endif %}
+         {% if step is not none %}step="{{ step }}"{% endif %}
+         onchange="updateVariable('{{ name | js_escape }}', this.value)">
+</div>

dataface/core/render/templates/controls/readonly.html

@@ -0,0 +1,9 @@
+{# Readonly/Fallback Control - displays value as text #}
+<div class="dft-variable-control dft-variable dft-variable-readonly"
+     data-variable-id="{{ name }}"
+     data-variable-label="{{ label }}"
+     {% if depends_on %}data-depends-on="{{ depends_on | tojson }}"{% endif %}>
+
+  <span class="dft-variable-label">{{ label }}:</span>
+  <span class="dft-variable-readonly-value">{{ value or '' }}</span>
+</div>

dataface/core/render/templates/controls/select.html

@@ -0,0 +1,21 @@
+{# Select/Dropdown Control #}
+<div class="dft-variable-control dft-variable"
+     data-variable-id="{{ name }}"
+     data-variable-label="{{ label }}"
+     {% if depends_on %}data-depends-on="{{ depends_on | tojson }}"{% endif %}>
+
+  <label class="dft-variable-label" for="var-{{ name }}">{{ label }}:</label>
+
+  <select id="var-{{ name }}"
+          name="{{ name }}"
+          class="dft-variable-input"
+          data-variable="{{ name }}"
+          onchange="updateVariable('{{ name | js_escape }}', this.value)">
+    <option value="">-- All --</option>
+    {% for opt in options %}
+    <option value="{{ opt.value }}"{% if opt.selected %} selected{% endif %}>
+      {{ opt.label or opt.value }}
+    </option>
+    {% endfor %}
+  </select>
+</div>

dataface/core/render/templates/controls/slider.html

@@ -0,0 +1,22 @@
+{# Slider/Range Control #}
+<div class="dft-variable-control dft-variable dft-variable-slider"
+     data-variable-id="{{ name }}"
+     data-variable-label="{{ label }}"
+     {% if depends_on %}data-depends-on="{{ depends_on | tojson }}"{% endif %}>
+
+  <label class="dft-variable-label" for="var-{{ name }}">{{ label }}:</label>
+
+  <input type="range"
+         id="var-{{ name }}"
+         name="{{ name }}"
+         class="dft-variable-input"
+         data-variable="{{ name }}"
+         min="{{ min if min is not none else 0 }}"
+         max="{{ max if max is not none else 100 }}"
+         step="{{ step if step is not none else 1 }}"
+         value="{{ value if value is not none else (min if min is not none else 0) }}"
+         oninput="this.nextElementSibling.textContent = this.value"
+         onchange="updateVariable('{{ name | js_escape }}', this.value)">
+
+  <span class="dft-variable-slider-value">{{ value if value is not none else (min if min is not none else 0) }}</span>
+</div>

dataface/core/render/templates/controls/text.html

@@ -0,0 +1,16 @@
+{# Text Input Control #}
+<div class="dft-variable-control dft-variable"
+     data-variable-id="{{ name }}"
+     data-variable-label="{{ label }}"
+     {% if depends_on %}data-depends-on="{{ depends_on | tojson }}"{% endif %}>
+
+  <label class="dft-variable-label" for="var-{{ name }}">{{ label }}:</label>
+
+  <input type="text"
+         id="var-{{ name }}"
+         name="{{ name }}"
+         class="dft-variable-input"
+         data-variable="{{ name }}"
+         value="{{ value or '' }}"
+         onchange="updateVariable('{{ name | js_escape }}', this.value)">
+</div>

dataface/core/render/templates/scripts/chart_interactivity.js

@@ -0,0 +1,191 @@
+(function () {
+    const DATAFACE_FONT_FAMILY = "__DATAFACE_FONT_FAMILY__";
+
+    function isDataMark(element) {
+        if (!element || typeof element.getAttribute !== 'function') return false;
+        const label = element.getAttribute('aria-label');
+        if (!label || !label.includes(':')) return false;
+        if (label.startsWith('X-axis') || label.startsWith('Y-axis')) return false;
+        if (label.includes('legend') || label.startsWith('Symbol')) return false;
+        return true;
+    }
+
+    function parseAriaLabel(label) {
+        if (!label) return {};
+
+        const data = {};
+        const pairs = label.split(';');
+
+        for (const pair of pairs) {
+            const colonIndex = pair.indexOf(':');
+            if (colonIndex === -1) continue;
+
+            const key = pair.substring(0, colonIndex).trim();
+            const value = pair.substring(colonIndex + 1).trim();
+
+            if (!key || key.startsWith('X-axis') || key.startsWith('Y-axis')) continue;
+
+            const numValue = parseFloat(value);
+            data[key] = !isNaN(numValue) && value === String(numValue) ? numValue : value;
+        }
+
+        return data;
+    }
+
+    function escapeHtml(value) {
+        if (value === null || value === undefined) return '';
+
+        const div = document.createElement('div');
+        div.textContent = String(value);
+        return div.innerHTML;
+    }
+
+    function formatFieldName(key) {
+        return escapeHtml(key
+            .replace(/_/g, ' ')
+            .replace(/-/g, ' ')
+            .replace(/\b\w/g, function (c) { return c.toUpperCase(); }));
+    }
+
+    function formatValue(value) {
+        if (value === null || value === undefined) return '—';
+        if (typeof value === 'number') {
+            return escapeHtml(value.toLocaleString(undefined, { maximumFractionDigits: 2 }));
+        }
+        return escapeHtml(value);
+    }
+
+    function ensureState() {
+        if (window.__datafaceChartHoverState) {
+            return window.__datafaceChartHoverState;
+        }
+
+        const tooltip = document.createElement('div');
+        tooltip.className = 'dft-tooltip';
+        tooltip.setAttribute('role', 'tooltip');
+        tooltip.style.position = 'fixed';
+        tooltip.style.display = 'none';
+        tooltip.style.background = 'rgba(15, 23, 42, 0.95)';
+        tooltip.style.color = '#f8fafc';
+        tooltip.style.padding = '8px 12px';
+        tooltip.style.borderRadius = '8px';
+        tooltip.style.fontSize = '14px';
+        tooltip.style.lineHeight = '1.5';
+        tooltip.style.pointerEvents = 'none';
+        tooltip.style.zIndex = '10000';
+        tooltip.style.maxWidth = '280px';
+        tooltip.style.boxShadow = '0 10px 25px rgba(15, 23, 42, 0.25)';
+        tooltip.style.backdropFilter = 'blur(4px)';
+        tooltip.style.border = '1px solid rgba(148, 163, 184, 0.18)';
+        tooltip.style.fontFamily = DATAFACE_FONT_FAMILY;
+        if (document.body) {
+            document.body.appendChild(tooltip);
+        }
+
+        window.__datafaceChartHoverState = {
+            activeMark: null,
+            tooltip: tooltip,
+        };
+
+        return window.__datafaceChartHoverState;
+    }
+
+    function positionTooltip(state, x, y) {
+        const padding = 12;
+        const rect = state.tooltip.getBoundingClientRect();
+        let left = x + padding;
+        let top = y + padding;
+
+        if (left + rect.width > window.innerWidth - padding) {
+            left = x - rect.width - padding;
+        }
+
+        if (top + rect.height > window.innerHeight - padding) {
+            top = y - rect.height - padding;
+        }
+
+        state.tooltip.style.left = Math.max(padding, left) + 'px';
+        state.tooltip.style.top = Math.max(padding, top) + 'px';
+    }
+
+    function hideTooltip(state) {
+        state.activeMark = null;
+        state.tooltip.style.display = 'none';
+    }
+
+    function showTooltip(state, mark, event) {
+        const entries = Object.entries(parseAriaLabel(mark.getAttribute('aria-label')));
+        if (!entries.length) {
+            hideTooltip(state);
+            return;
+        }
+
+        state.activeMark = mark;
+        state.tooltip.innerHTML = entries.map(function (entry, index) {
+            const key = entry[0];
+            const value = entry[1];
+            const separator = index < entries.length - 1
+                ? 'border-bottom: 1px solid rgba(255,255,255,0.10); padding-bottom: 4px; margin-bottom: 2px;'
+                : '';
+
+            return (
+                '<div style="display:flex;justify-content:space-between;gap:16px;padding:2px 0;' + separator + '">' +
+                    '<span style="color:#94a3b8;font-weight:500;">' + formatFieldName(key) + '</span>' +
+                    '<span style="color:#f8fafc;font-weight:600;text-align:right;font-variant-numeric:tabular-nums lining-nums;">' + formatValue(value) + '</span>' +
+                '</div>'
+            );
+        }).join('');
+        state.tooltip.style.display = 'block';
+        positionTooltip(state, event.clientX, event.clientY);
+    }
+
+    function initializeSvg(svg) {
+        if (!svg || svg.dataset.dftHoverInitialized === 'true') {
+            return;
+        }
+
+        svg.dataset.dftHoverInitialized = 'true';
+        const state = ensureState();
+
+        svg.addEventListener('mousemove', function (event) {
+            const target = event.target && event.target.closest
+                ? event.target.closest('[aria-label]')
+                : null;
+
+            if (!target || !svg.contains(target) || !isDataMark(target)) {
+                if (state.activeMark) {
+                    hideTooltip(state);
+                }
+                return;
+            }
+
+            if (state.activeMark !== target || state.tooltip.style.display === 'none') {
+                showTooltip(state, target, event);
+            } else {
+                positionTooltip(state, event.clientX, event.clientY);
+            }
+        });
+
+        svg.addEventListener('mouseleave', function () {
+            hideTooltip(state);
+        });
+    }
+
+    function initialize() {
+        const script = document.currentScript;
+        const ownerSvg = script && script.closest ? script.closest('svg') : null;
+
+        if (ownerSvg) {
+            initializeSvg(ownerSvg);
+            return;
+        }
+
+        document.querySelectorAll('svg').forEach(initializeSvg);
+    }
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initialize, { once: true });
+    } else {
+        initialize();
+    }
+})();