pivotgrid-js 0.1.0

package/src/field-zones.js

@@ -0,0 +1,344 @@
+/**
+ * FieldZones
+ *
+ * Drag-and-drop zones for managing pivot fields.
+ * Three zones: FIELDS (free) → ROWS → COLUMNS
+ *
+ * Drop logic: insertion position is determined by the placeholder in the DOM —
+ * no recalculation in onUp, just read what is already in the DOM.
+ */
+class FieldZones {
+
+  constructor({ dimensions, fields = {}, initialRows, initialColumns, initialFilters = [], onChange, onFilterOpen }) {
+    this.dimensions   = dimensions;
+    this._fieldDefs   = fields;
+    this.onChange     = onChange;
+    this.onFilterOpen = onFilterOpen;
+
+    this.rows    = [...initialRows];
+    this.columns = [...initialColumns];
+    this.filters = [...initialFilters];
+
+    this.filterSet = new Set(initialFilters);
+    this.state = {};
+    for (const dim of dimensions) {
+      if (initialRows.includes(dim)) this.state[dim] = 'rows';
+      else if (initialColumns.includes(dim)) this.state[dim] = 'columns';
+      else this.state[dim] = 'free';
+    }
+
+    this._placeholder = null;
+    this._render();
+    this._bindEvents();
+    this._lastMoved = null;
+    this._filterHints = {};   // { dim → { badge, tooltip } }
+    this._tooltip = document.createElement('div');
+    this._tooltip.className = 'fz-tooltip';
+    document.body.appendChild(this._tooltip);
+    this._bindTooltip();
+  }
+
+  setFilterHints(hints) {
+    this._filterHints = hints || {};
+    this._renderZone('fz-chips-filters', 'filters');
+  }
+
+  _bindTooltip() {
+    document.addEventListener('mouseover', (e) => {
+      const chip = e.target.closest('.fz-chip[data-zone="filters"]');
+      const hint = chip && this._filterHints[chip.dataset.field];
+      if (!hint) { this._tooltip.style.display = 'none'; return; }
+      this._tooltip.textContent = hint.tooltip;
+      this._tooltip.style.display = 'block';
+    });
+
+    document.addEventListener('mousemove', (e) => {
+      if (this._tooltip.style.display === 'none') return;
+      const t = this._tooltip;
+      const x = Math.min(e.clientX + 12, window.innerWidth - t.offsetWidth - 8);
+      const y = e.clientY - t.offsetHeight - 8;  // above cursor
+      t.style.left = x + 'px';
+      t.style.top = (y < 4 ? e.clientY + 16 : y) + 'px';  // if no space above — below cursor
+    });
+
+    document.addEventListener('mouseout', (e) => {
+      const chip = e.target.closest('.fz-chip[data-zone="filters"]');
+      if (chip && !chip.contains(e.relatedTarget)) {
+        this._tooltip.style.display = 'none';
+      }
+    });
+  }
+
+  // ── Render ───────────────────────────────────────────────────────────────
+ 
+  _render() {
+    this._renderZone('fz-chips-free',    'free');
+    this._renderZone('fz-chips-rows',    'rows');
+    this._renderZone('fz-chips-columns', 'columns');
+    this._renderZone('fz-chips-filters', 'filters');
+  }
+
+  _renderZone(containerId, zone) {
+    const el = document.getElementById(containerId);
+    if (!el) return;
+
+    const fields = zone === 'rows'    ? this.rows
+      : zone === 'columns' ? this.columns
+      : zone === 'filters' ? [...this.filterSet]
+      : this.dimensions.filter(d => this.state[d] === 'free' && !this.filterSet.has(d));
+
+    el.innerHTML = fields.map(f => {
+      const hint = (zone === 'filters') ? this._filterHints[f] : null;
+      const tooltip = hint ? `${f}: ${hint.tooltip}` : f;
+      return `
+    <div class="fz-chip${hint ? ' fz-chip--filtered' : ''}"
+         data-field="${f}" data-zone="${zone}" title="">
+      <span class="fz-chip-label" draggable="false">${this._fieldDefs[f]?.title || this._fieldDefs[f]?.label || f}</span>
+      ${hint ? `<span class="fz-chip-hint" draggable="false">${hint.badge}</span>` : ''}
+      ${zone !== 'free'
+          ? `<span class="fz-chip-remove" draggable="false" data-field="${f}" data-zone="${zone}">×</span>`
+          : ''}
+    </div>
+    `;
+    }).join('');
+
+    if (zone === 'filters' && this.onFilterOpen) {
+      el.querySelectorAll('.fz-chip').forEach(chip => {
+        chip.querySelector('.fz-chip-label').addEventListener('click', (e) => {
+          e.stopPropagation();
+          this.onFilterOpen(chip.dataset.field, chip);
+        });
+      });
+    }
+
+    if (this._lastMoved) {
+      const chip = el.querySelector(`[data-field="${this._lastMoved}"]`);
+      chip?.classList.add('fz-chip--last');
+    }
+  }
+
+  // ── Events ───────────────────────────────────────────────────────────────
+
+  _bindEvents() {
+    document.addEventListener('mousedown', (e) => {
+      if (e.target.classList.contains('fz-chip-remove')) {
+        e.stopPropagation();
+        this._moveField(e.target.dataset.field, e.target.dataset.zone, 'free');
+        return;
+      }
+      const chip = e.target.closest('.fz-chip');
+      if (!chip) return;
+      this._initDrag(e, chip);
+    });
+  }
+
+  // ── Drag & Drop ───────────────────────────────────────────────────────────
+
+  _initDrag(e, chip) {
+    e.preventDefault();
+
+    const field    = chip.dataset.field;
+    const fromZone = chip.dataset.zone;
+    const startX   = e.clientX;
+    const startY   = e.clientY;
+    let dragging   = false;
+    let ghost      = null;
+
+    const onMove = (mv) => {
+      if (!dragging && Math.hypot(mv.clientX - startX, mv.clientY - startY) > 5) {
+        dragging = true;
+        chip.classList.add('fz-chip--dragging');
+        ghost = this._createGhost(chip, mv);
+      }
+      if (!dragging) return;
+
+      ghost.style.left = mv.clientX + 12 + 'px';
+      ghost.style.top  = mv.clientY - 12 + 'px';
+
+      // Hide ghost and dragging chip — otherwise elementFromPoint picks them up
+      ghost.style.visibility = 'hidden';
+      chip.style.visibility  = 'hidden';
+      this._updatePlaceholder(mv);
+      ghost.style.visibility = '';
+      chip.style.visibility  = '';
+    };
+
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup',   onUp);
+
+      ghost?.remove();
+      chip.classList.remove('fz-chip--dragging');
+      chip.style.visibility = '';
+
+      if (!dragging) {
+        this._clearHighlight();
+        return;
+      }
+
+      // Read final drop position from placeholder
+      const ph = this._placeholder;
+      if (!ph?.parentNode) {
+        this._clearHighlight();
+        return;
+      }
+
+      // Zone — placeholder container
+      const zoneEl = ph.parentNode.closest('[data-fz-zone]') || ph.parentNode;
+      const toZone = zoneEl.dataset.fzZone;
+
+      // beforeField — first fz-chip after the placeholder
+      const siblings    = [...ph.parentNode.children];
+      const phIdx       = siblings.indexOf(ph);
+      const afterChips  = siblings.slice(phIdx + 1).filter(el => el.classList.contains('fz-chip'));
+      const beforeField = afterChips[0]?.dataset.field || null;
+
+      this._clearHighlight();
+
+      if (!toZone) return;
+
+      if (toZone !== fromZone) {
+        this._moveFieldBefore(field, fromZone, toZone, beforeField);
+      } else {
+        this._reorder(field, fromZone, beforeField);
+      }
+    };
+
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup',   onUp);
+  }
+
+  // ── Placeholder ──────────────────────────────────────────────────────────
+
+  _updatePlaceholder(e) {
+    this._clearHighlight();
+
+    // Find zone under cursor
+    const zoneEl = document.elementFromPoint(e.clientX, e.clientY)
+      ?.closest('[data-fz-zone]');
+    if (zoneEl) zoneEl.classList.add('fz-zone--over');
+
+    const ph = document.createElement('div');
+    ph.className = 'fz-chip-placeholder';
+    this._placeholder = ph;
+
+    // Find chip under cursor
+    const target = document.elementFromPoint(e.clientX, e.clientY)?.closest('.fz-chip');
+
+    if (target && !target.classList.contains('fz-chip-placeholder')) {
+      const rect         = target.getBoundingClientRect();
+      const insertBefore = e.clientX < rect.left + rect.width / 2;
+      target.parentNode.insertBefore(ph, insertBefore ? target : target.nextSibling);
+    } else if (zoneEl) {
+      // No chip target — append to end of zone
+      const chipsContainer = zoneEl.querySelector('[id^="fz-chips"]') || zoneEl;
+      chipsContainer.appendChild(ph);
+    }
+  }
+
+  _clearHighlight() {
+    document.querySelectorAll('[data-fz-zone]')
+      .forEach(z => z.classList.remove('fz-zone--over'));
+    this._placeholder?.remove();
+    this._placeholder = null;
+  }
+
+  // ── Ghost ────────────────────────────────────────────────────────────────
+
+  _createGhost(chip, e) {
+    const ghost = chip.cloneNode(true);
+    ghost.className = 'fz-chip fz-chip--ghost';
+    Object.assign(ghost.style, {
+      position:      'fixed',
+      left:          e.clientX + 12 + 'px',
+      top:           e.clientY - 12 + 'px',
+      pointerEvents: 'none',
+      zIndex:        '9999',
+      opacity:       '0.85',
+    });
+    document.body.appendChild(ghost);
+    return ghost;
+  }
+
+  // ── State mutations ──────────────────────────────────────────────────────
+
+  _moveField(field, fromZone, toZone) {
+    if (toZone === 'filters') {
+      // Add to filters, do NOT remove from rows/columns
+      this.filterSet.add(field);
+    } else if (fromZone === 'filters') {
+      // Remove from filters (× click), primary zone unchanged
+      this.filterSet.delete(field);
+    } else {
+      // Move between rows/columns/free
+      if (fromZone === 'rows') this.rows = this.rows.filter(f => f !== field);
+      if (fromZone === 'columns') this.columns = this.columns.filter(f => f !== field);
+      if (toZone === 'rows') this.rows.push(field);
+      if (toZone === 'columns') this.columns.push(field);
+      this.state[field] = toZone;
+    }
+    this._lastMoved = field;
+    this._render();
+    this.onChange({ rows: [...this.rows], columns: [...this.columns], filters: [...this.filterSet] });
+  }
+
+  _moveFieldBefore(field, fromZone, toZone, beforeField) {
+    if (toZone === 'filters') {
+      this.filterSet.add(field);
+      this._lastMoved = field;
+      this._render();
+      this.onChange({ rows: [...this.rows], columns: [...this.columns], filters: [...this.filterSet] });
+      return;
+    }
+
+    if (fromZone === 'filters') {
+      // Dragged from filters to rows/columns — add there, keep in filters
+      const arr = toZone === 'rows' ? this.rows : toZone === 'columns' ? this.columns : null;
+      if (arr && !arr.includes(field)) {
+        if (beforeField) {
+          const idx = arr.indexOf(beforeField);
+          arr.splice(idx !== -1 ? idx : arr.length, 0, field);
+        } else {
+          arr.push(field);
+        }
+        this.state[field] = toZone;
+      }
+    } else {
+      if (fromZone === 'rows') this.rows = this.rows.filter(f => f !== field);
+      if (fromZone === 'columns') this.columns = this.columns.filter(f => f !== field);
+      const arr = toZone === 'rows' ? this.rows : toZone === 'columns' ? this.columns : null;
+      if (arr) {
+        if (beforeField) {
+          const idx = arr.indexOf(beforeField);
+          arr.splice(idx !== -1 ? idx : arr.length, 0, field);
+        } else {
+          arr.push(field);
+        }
+      }
+      this.state[field] = toZone;
+    }
+
+    this._lastMoved = field;
+    this._render();
+    this.onChange({ rows: [...this.rows], columns: [...this.columns], filters: [...this.filterSet] });
+  }
+
+  _reorder(field, zone, beforeField) {
+    const arr  = zone === 'rows' ? this.rows : this.columns;
+    const from = arr.indexOf(field);
+    if (from === -1) return;
+
+    arr.splice(from, 1);
+
+    if (beforeField) {
+      const to = arr.indexOf(beforeField);
+      arr.splice(to !== -1 ? to : arr.length, 0, field);
+    } else {
+      arr.push(field); // placeholder was at the end — append to end
+    }
+    this._lastMoved = field;
+    this._render();
+    // this.onChange({ rows: [...this.rows], columns: [...this.columns], filters: [...this.filters] });
+    this.onChange({ rows: [...this.rows], columns: [...this.columns], filters: [...this.filterSet] });
+  }
+}

package/src/filter-manager.js

@@ -0,0 +1,290 @@
+/**
+ * FilterManager
+ *
+ * Manages filters per dimension:
+ *   - If values ≤ filterCheckboxLimit → checkboxes + search
+ *   - If more → text search only (contains / starts_with)
+ *   - Values are fetched from the provider cache or from the server
+ */
+class FilterManager {
+
+  constructor({ provider, fields, config }) {
+    this.provider = provider;
+    this.fields   = fields;
+    this.config   = config;
+
+    // dim → { allValues, selected, searchType, searchText }
+    this._state  = {};
+    this._popup  = null;
+    this._openDim = null;
+    this._onChange = null;
+  }
+
+  set onChange(fn) { this._onChange = fn; }
+
+  // ── Dimension management ──────────────────────────────────────────────────
+
+  async onDimAdded(dim) {
+    if (this._state[dim]) {
+      // already exists — just open the popup (FieldZones will call onFilterOpen)
+      return;
+    }
+
+    this._state[dim] = {
+      allValues:  null,
+      selected:   null,   // null = all (no checkbox filter)
+      searchType: 'contains',
+      searchText: '',
+    };
+
+    // Load values if checkboxes are needed
+    try {
+      const limit = this.config.filterCheckboxLimit ?? 30;
+      const count = await this.provider.countDistinct(dim);
+      if (count <= limit) {
+        this._state[dim].allValues = await this.provider.getDistinctValues(dim);
+      }
+    } catch (e) {
+      console.warn('FilterManager: failed to load values for', dim, e);
+    }
+  }
+
+  onDimRemoved(dim) {
+    delete this._state[dim];
+    if (this._openDim === dim) this._closePopup();
+    this._notify();
+  }
+
+  // ── Popup ────────────────────────────────────────────────────────────────
+
+  openFor(dim, anchorEl) {
+    this._closePopup();
+    const f = this._state[dim];
+    if (!f) return;
+
+    this._openDim = dim;
+
+    const popup = document.createElement('div');
+    popup.className = 'fm-popup';
+    document.body.appendChild(popup);
+    this._popup = popup;
+
+    this._renderPopup(popup, dim, f);
+    this._positionPopup(popup, anchorEl);
+
+    requestAnimationFrame(() => {
+      document.addEventListener('mousedown', this._handleOutside = (e) => {
+        if (!popup.contains(e.target) && !anchorEl.contains(e.target)) {
+          this._closePopup();
+        }
+      });
+    });
+  }
+
+  _renderPopup(popup, dim, f) {
+    const radioName = 'fm-stype-' + dim;
+    const checkboxesHTML = f.allValues
+      ? `<div class="fm-checkbox-list">
+          <label class="fm-checkbox fm-select-all-wrap">
+            <input type="checkbox" class="fm-select-all" ${!f.selected ? 'checked' : ''}>
+            <em>All values</em>
+          </label>
+          <div class="fm-checkbox-scroll">
+            ${f.allValues.map(v => `
+              <label class="fm-checkbox">
+                <input type="checkbox" value="${v.replace(/"/g, '&quot;')}"
+                  ${!f.selected || f.selected.has(v) ? 'checked' : ''}>
+                <span>${v}</span>
+              </label>
+            `).join('')}
+          </div>
+        </div>`
+      : `<p class="fm-no-checkboxes">Too many values — use search</p>`;
+
+    popup.innerHTML = `
+      <div class="fm-popup-header">
+        <span class="fm-popup-title">${this.fields[dim]?.title || this.fields[dim]?.label || dim}</span>
+        <button class="fm-popup-close">×</button>
+      </div>
+      <div class="fm-search-section">
+        <div class="fm-search-type">
+          <label><input type="radio" name="${radioName}" value="contains"
+            ${f.searchType === 'contains' ? 'checked' : ''}> Contains</label>
+          <label><input type="radio" name="${radioName}" value="starts_with"
+            ${f.searchType === 'starts_with' ? 'checked' : ''}> Starts with</label>
+        </div>
+        <input type="text" class="fm-search-input" placeholder="Search..." value="${f.searchText}">
+      </div>
+      ${checkboxesHTML}
+      <div class="fm-popup-footer">
+        <button class="fm-btn fm-btn-clear">Clear</button>
+        <button class="fm-btn fm-btn-primary">Apply</button>
+      </div>
+    `;
+
+    const searchInput = popup.querySelector('.fm-search-input');
+    const selectAll   = popup.querySelector('.fm-select-all');
+
+    popup.querySelector('.fm-popup-close').onclick = () => this._closePopup();
+
+    // Sync the "Select all" checkbox state based on visible rows
+    const syncSelectAll = () => {
+      if (!selectAll) return;
+      const visible      = [...popup.querySelectorAll('.fm-checkbox:not(.fm-select-all-wrap)')]
+        .filter(l => l.style.display !== 'none');
+      const checkedCount = visible.filter(l => l.querySelector('input').checked).length;
+      selectAll.indeterminate = checkedCount > 0 && checkedCount < visible.length;
+      selectAll.checked       = visible.length > 0 && checkedCount === visible.length;
+    };
+
+    // Search: hides non-matching rows and unchecks them.
+    // Important: hidden items must not silently end up in the selection on Apply.
+    const applyCheckboxSearch = () => {
+      const q    = searchInput?.value.trim().toLowerCase() || '';
+      const type = popup.querySelector(`input[name="${radioName}"]:checked`)?.value || 'contains';
+
+      popup.querySelectorAll('.fm-checkbox:not(.fm-select-all-wrap)').forEach(label => {
+        const text = label.querySelector('span')?.textContent.trim().toLowerCase() || '';
+        const ok   = !q || (type === 'starts_with' ? text.startsWith(q) : text.includes(q));
+
+        label.style.display = ok ? '' : 'none';
+
+        // Uncheck hidden items — if the user clears the search text later,
+        // these items will reappear unchecked, not "selected by default"
+        if (!ok) label.querySelector('input').checked = false;
+      });
+
+      syncSelectAll();
+    };
+
+    // Search type — apply to checkboxes immediately
+    popup.querySelectorAll(`input[name="${radioName}"]`).forEach(r => {
+      r.onchange = () => {
+        f.searchType = r.value;
+        applyCheckboxSearch();
+      };
+    });
+
+    // Text search
+    searchInput?.addEventListener('input', applyCheckboxSearch);
+
+    // "Select all" / "Deselect all" — affects ALL checkboxes, including hidden ones.
+    // Otherwise unchecking "All values" with active search would not reset hidden items.
+    selectAll?.addEventListener('change', () => {
+      popup.querySelectorAll('.fm-checkbox:not(.fm-select-all-wrap) input')
+        .forEach(cb => { cb.checked = selectAll.checked; });
+    });
+
+    // Clear
+    popup.querySelector('.fm-btn-clear').onclick = () => {
+      f.selected   = null;
+      f.searchText = '';
+      this._closePopup();
+      this._notify();
+    };
+
+    // Apply
+    popup.querySelector('.fm-btn-primary').onclick = () => {
+      const checkedRadio = popup.querySelector(`input[name="${radioName}"]:checked`);
+      f.searchType = checkedRadio ? checkedRadio.value : 'contains';
+      f.searchText = searchInput?.value.trim() || '';
+
+      if (f.allValues) {
+        const checkedBoxes = [...popup.querySelectorAll('.fm-checkbox:not(.fm-select-all-wrap) input:checked')]
+          .map(cb => cb.value);
+        f.selected = checkedBoxes.length === f.allValues.length ? null : new Set(checkedBoxes);
+      }
+
+      this._closePopup();
+      this._notify();
+    };
+
+    // Apply current filter immediately on popup open —
+    // so checkboxes immediately reflect the saved searchText / searchType
+    if (f.searchText) applyCheckboxSearch();
+  }
+
+  _positionPopup(popup, anchorEl) {
+    const rect = anchorEl.getBoundingClientRect();
+    const left = Math.min(rect.left, window.innerWidth - 290);
+    popup.style.left = left + 'px';
+    popup.style.top  = (rect.bottom + 6) + 'px';
+  }
+
+  _closePopup() {
+    this._popup?.remove();
+    this._popup   = null;
+    this._openDim = null;
+    if (this._handleOutside) {
+      document.removeEventListener('mousedown', this._handleOutside);
+      this._handleOutside = null;
+    }
+  }
+
+  // ── Active filters ────────────────────────────────────────────────────────
+
+  /**
+   * Returns active filters in the format expected by the provider.
+   * { dim: { values: string[]|null, searchType, searchText } }
+   */
+  getActiveFilters() {
+    const result = {};
+    for (const [dim, f] of Object.entries(this._state)) {
+      const hasSelected = f.selected && f.selected.size > 0;
+      const hasSearch   = f.searchText.length > 0;
+      if (hasSelected || hasSearch) {
+        result[dim] = {
+          values:     hasSelected ? [...f.selected] : null,
+          searchType: f.searchType,
+          searchText: f.searchText,
+        };
+      }
+    }
+    return result;
+  }
+
+  hasActiveFilter(dim) {
+    const f = this._state[dim];
+    if (!f) return false;
+    return (f.selected && f.selected.size > 0) || f.searchText.length > 0;
+  }
+
+  getFilterHints() {
+    const result = {};
+    for (const [dim, f] of Object.entries(this._state)) {
+      const parts = [];
+
+      if (f.searchText) {
+        const prefix = f.searchType === 'starts_with' ? '' : '…';
+        parts.push(`«${f.searchText}${prefix}»`);
+      }
+
+      if (f.selected && f.selected.size > 0) {
+        const total = f.allValues?.length ?? null;
+        // If few items are excluded — show "except"
+        if (total && total - f.selected.size <= 2) {
+          const excluded = f.allValues.filter(v => !f.selected.has(v));
+          parts.push(`except: ${excluded.join(', ')}`);
+        } else if (f.selected.size <= 3) {
+          parts.push([...f.selected].join(', '));
+        } else {
+          parts.push(`${f.selected.size} val.`);
+        }
+      }
+
+      if (parts.length) {
+        result[dim] = {
+          badge: parts.length === 1 && f.selected?.size
+            ? String(f.selected.size)   // just a number on the chip
+            : '✕',
+          tooltip: parts.join(' + '),
+        };
+      }
+    }
+    return result;
+  }
+
+  _notify() {
+    this._onChange?.();
+  }
+}