pivotgrid-js 0.1.0

package/widget/cache-manager.js

@@ -0,0 +1,253 @@
+/**
+ * cache-manager.js
+ *
+ * Manages the dimension cache UI:
+ * - Renders dimension chips with cached/uncached state
+ * - Shows a fill meter and status label
+ * - Validates row count before adding a dimension to cache
+ * - Triggers cache refresh via the provider
+ */
+class CacheManager {
+
+  /**
+   * @param {object}   options
+   * @param {object}   options.provider       — data provider (RestProvider or ArrayProvider)
+   * @param {string[]} options.dimensions      — full list of dimensions
+   * @param {number}   options.maxCachedRows   — row limit for the cache
+   * @param {number}   options.initialCount    — current row count in cache
+   * @param {Function} options.onRefresh       — callback after cache refresh
+   * @param {string}   [options.lang='ru']     — UI language
+   */
+  constructor({ provider, dimensions, maxCachedRows, initialCount, onRefresh, lang = 'ru' }) {
+    this._provider   = provider;
+    this._dims       = dimensions;
+    this._maxRows    = maxCachedRows;
+    this._cached     = new Set(provider.cachedDimensions);
+    this._count      = initialCount;
+    this._stale      = false;
+    this._checking   = false;
+    this._toastTimer = null;
+    this._onRefresh  = onRefresh;
+    this._t          = (key, vars = {}) => {
+      let str = (I18N[lang] || I18N.ru)[key] || key;
+      for (const [k, v] of Object.entries(vars)) str = str.replace(`{${k}}`, v);
+      return str;
+    };
+
+    this._render();
+    this._bindRefresh();
+  }
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  /** Renders all UI parts: chips, meter, status. */
+  _render() {
+    this._renderChips();
+    this._renderMeter();
+    this._renderStatus();
+  }
+
+  /** Renders dimension chips with cached/uncached state. */
+  _renderChips() {
+    const body = document.getElementById('cache-chips');
+    body.innerHTML = '';
+
+    for (const dim of this._dims) {
+      const chip = document.createElement('div');
+      chip.className   = 'cache-chip' + (this._cached.has(dim) ? ' is-cached' : '');
+      chip.dataset.dim = dim;
+      const def = CONFIG.fields[dim] || {};
+      chip.textContent = def.title || def.label || dim;
+      chip.title = this._cached.has(dim)
+        ? this._t('cacheRemove')
+        : this._t('cacheAdd');
+      chip.addEventListener('click', () => this._toggle(dim));
+      body.appendChild(chip);
+    }
+  }
+
+  /** Returns the chip element for a given dimension. */
+  _chip(dim) {
+    return document.querySelector(`.cache-chip[data-dim="${dim}"]`);
+  }
+
+  /** Updates the fill meter bar and label. */
+  _renderMeter() {
+    const fill  = document.getElementById('cache-meter-fill');
+    const label = document.getElementById('cache-meter-label');
+    const pct   = this._cached.size > 0
+      ? Math.min(this._count / this._maxRows * 100, 100)
+      : 0;
+    const cls   = pct < 60 ? 'ok' : pct < 85 ? 'warn' : 'danger';
+
+    fill.style.width = pct.toFixed(1) + '%';
+    fill.className   = `cache-meter-fill ${cls}`;
+
+    if (this._cached.size === 0) {
+      label.textContent = '—';
+      label.className   = 'cache-meter-label';
+    } else {
+      label.textContent = `~${this._count.toLocaleString()} / ${this._maxRows.toLocaleString()}`;
+      label.className   = `cache-meter-label ${cls}`;
+    }
+  }
+
+  /** Updates the cache status label and refresh button state. */
+  _renderStatus() {
+    const status = document.getElementById('cache-status');
+    const btn    = document.getElementById('btn-refresh-cache');
+
+    if (this._stale) {
+      status.textContent = this._t('cacheStale');
+      status.className   = 'cache-status stale';
+      btn.disabled       = false;
+      btn.classList.add('cache-refresh-btn--stale');
+    } else if (this._cached.size === 0) {
+      status.textContent = this._t('cacheEmpty');
+      status.className   = 'cache-status empty';
+      btn.disabled       = true;
+      btn.classList.remove('cache-refresh-btn--stale');
+    } else {
+      status.textContent = this._t('cacheActual');
+      status.className   = 'cache-status fresh';
+      btn.disabled       = true;
+      btn.classList.remove('cache-refresh-btn--stale');
+    }
+  }
+
+  // ── Toggle ────────────────────────────────────────────────────────────────
+
+  /**
+   * Toggles a dimension in/out of the cache set.
+   * When adding, runs a COUNT query to validate the row limit first.
+   * @param {string} dim — logical dimension name
+   */
+  async _toggle(dim) {
+    if (this._checking) return;
+
+    const chip = this._chip(dim);
+    if (!chip) return;
+
+    if (this._cached.has(dim)) {
+      this._cached.delete(dim);
+      chip.className = 'cache-chip';
+      chip.title     = this._t('cacheAdd');
+      this._stale    = true;
+      this._renderStatus();
+      this._refreshCountAsync();
+      return;
+    }
+
+    this._checking = true;
+    chip.className = 'cache-chip is-checking';
+
+    try {
+      const trial = [...this._cached, dim];
+      const count = await this._provider.countRows(trial);
+
+      if (count > this._maxRows) {
+        chip.className = 'cache-chip is-rejected';
+        this._showToast(
+          `«${dim}»: ~${count.toLocaleString()} — ${this._t('cacheExceeds')} ${this._maxRows.toLocaleString()}`
+        );
+        setTimeout(() => {
+          chip.className = 'cache-chip';
+          chip.title     = this._t('cacheAdd');
+        }, 700);
+      } else {
+        this._cached.add(dim);
+        this._count    = count;
+        this._stale    = true;
+        chip.className = 'cache-chip is-cached';
+        chip.title     = this._t('cacheRemove');
+      }
+    } catch (err) {
+      chip.className = 'cache-chip';
+      this._showToast(this._t('errorPrefix') + (err.message || err));
+    } finally {
+      this._checking = false;
+      this._renderMeter();
+      this._renderStatus();
+    }
+  }
+
+  /**
+   * Refreshes the row count for the current cached dimensions asynchronously.
+   * Used after removing a dimension from cache.
+   */
+  async _refreshCountAsync() {
+    if (this._cached.size === 0) {
+      this._count = 0;
+      this._renderMeter();
+      return;
+    }
+    try {
+      this._count = await this._provider.countRows([...this._cached]);
+    } catch {
+      this._count = 0;
+    }
+    this._renderMeter();
+  }
+
+  // ── Refresh ───────────────────────────────────────────────────────────────
+
+  /** Binds the "Refresh cache" button click handler. */
+  _bindRefresh() {
+    const btn  = document.getElementById('btn-refresh-cache');
+    const zone = document.querySelector('.cache-zone');
+
+    btn.addEventListener('click', async () => {
+      btn.disabled = true;
+      zone.classList.add('cache-zone--loading');
+      this._showFullscreenLoader(true);
+
+      try {
+        await this._provider.refreshCache([...this._cached]);
+        this._count = this._provider.cacheRows;
+        this._stale = false;
+        this._renderChips();
+        this._renderMeter();
+        this._renderStatus();
+        await this._onRefresh?.();
+      } catch (err) {
+        this._showToast(this._t('cacheRefreshError') + (err.message || err));
+      } finally {
+        this._showFullscreenLoader(false);
+        zone.classList.remove('cache-zone--loading');
+        this._renderStatus();
+      }
+    });
+  }
+
+  // ── Toast / Loader ────────────────────────────────────────────────────────
+
+  /**
+   * Shows or hides the fullscreen loading overlay.
+   * @param {boolean} on
+   */
+  _showFullscreenLoader(on) {
+    let el = document.getElementById('cache-fullscreen-loader');
+    if (on) {
+      if (!el) {
+        el = document.createElement('div');
+        el.id          = 'cache-fullscreen-loader';
+        el.textContent = this._t('loading');
+        document.body.appendChild(el);
+      }
+    } else {
+      el?.remove();
+    }
+  }
+
+  /**
+   * Shows a brief toast notification at the bottom of the screen.
+   * @param {string} msg — message to display
+   */
+  _showToast(msg) {
+    const toast = document.getElementById('cache-toast');
+    toast.textContent = msg;
+    toast.classList.add('visible');
+    clearTimeout(this._toastTimer);
+    this._toastTimer = setTimeout(() => toast.classList.remove('visible'), 3500);
+  }
+}

package/widget/i18n.js

@@ -0,0 +1,179 @@
+/**
+ * i18n.js — переводы интерфейса PivotGrid
+ *
+ * Язык задаётся через data-lang на контейнере:
+ *   <div data-config="sales" data-lang="en"></div>
+ *
+ * По умолчанию: ru
+ * Добавить язык: добавить новый ключ в I18N.
+ */
+const I18N = {
+  ru: {
+    loading: 'Загрузка данных...',
+    loadingGrid: 'Загрузка данных…',
+    cache: 'Кэш',
+    constructor: 'Конструктор',
+    filters: 'Фильтры',
+    fields: 'Поля',
+    rows: 'Строки',
+    columns: 'Колонки',
+    measure: 'Мера',
+    func: 'Функция',
+    expandRows: 'Развернуть строки',
+    collapseRows: 'Свернуть строки',
+    expandCols: 'Развернуть колонки',
+    collapseCols: 'Свернуть колонки',
+    subtotals: '∑ Подитоги',
+    exportCsv: '↓ CSV',
+    drillthrough: 'Drillthrough',
+    allData: 'Все данные',
+    noData: 'Нет данных',
+    shown: 'Показано',
+    firstN: 'Первые {n} записей',
+    total: 'Итого',
+    cacheEmpty: 'Кэш пуст',
+    cacheActual: 'Актуален',
+    cacheStale: 'Изменён · нужно обновить',
+    cacheRefresh: '↺ Обновить кэш',
+    errorPrefix: 'Ошибка: ',
+    cacheAdd: 'Добавить в кэш',
+    cacheRemove: 'Убрать из кэша',
+    cacheExceeds: 'строк — превышает лимит',
+    cacheRefreshError: 'Ошибка обновления кэша: ',
+    title: 'Сводная таблица',
+    // config-editor
+    ce_server: 'Сервер',
+    ce_database: 'База данных',
+    ce_query: 'Запрос',
+    ce_mainQuery: 'Основной query',
+    ce_colsQuery: 'Запрос для получения колонок',
+    ce_funcs: 'Функции агрегации',
+    ce_fetchCols: 'Получить колонки',
+    ce_drillthrough: 'Drillthrough',
+    ce_cols: 'Колонки',
+    ce_colDb: 'Колонка БД',
+    ce_colTitle: 'Название (title)',
+    ce_initialState: 'Начальное состояние',
+    ce_maxCacheRows: 'Макс. строк кэша',
+    ce_filterLimit: 'Лимит чекбоксов',
+    ce_configJs: 'config.js',
+    ce_save: 'Сохранить',
+    ce_loadFromServer: 'Загрузить с сервера',
+    ce_preview: '▶ Предпросмотр',
+    ce_saveConfig: '↑ Сохранить',
+    ce_selectConfig: '— выбрать конфиг —',
+    ce_configName: 'Имя конфига',
+    ce_dimension: 'Измерение',
+    ce_measure_type: 'Мера',
+    ce_fillUrl: 'Заполните URL и запрос',
+    ce_zeroRows: 'Запрос вернул 0 строк',
+    ce_colsLoaded: 'Получено {n} колонок',
+    ce_loadError: 'Ошибка: ',
+    ce_fetchBtn: 'Получить колонки',
+    ce_emptyFields: 'Нажмите «Получить колонки»',
+    ce_fillDbFields: 'Заполните host, database и user',
+    ce_dbSaved: 'Настройки сохранены',
+    ce_dbLoaded: 'Настройки загружены (пароль не передаётся)',
+    ce_enterName: 'Введите имя конфига',
+    ce_emptyConfig: 'Конфиг пуст',
+    ce_configSaved: 'Конфиг «{name}» сохранён',
+    ce_loadFailed: 'Ошибка загрузки: ',
+    ce_saveFailed: 'Ошибка сохранения: ',
+    ce_connector: 'Коннектор', 
+    ce_dtSqlLabel: 'SELECT запрос (используй {filters})', 
+    ce_dtUrlLabel: 'Base URL (фильтры добавятся как ?region=Север)',
+    ce_testConnection: 'Проверить соединение',
+    ce_testOk:         'Соединение успешно',
+    ce_testError:      'Ошибка соединения: ',
+    confirmLargeExpand: 'Слишком много строк для отображения.\n\nПосле разворачивания грид будет содержать ~{millions} млн строк, что превышает возможности браузера. Часть данных в нижней части будет недоступна.\n\nРекомендуем свернуть часть измерений.\n\nНажмите ОК чтобы всё равно развернуть, Отмена чтобы отказаться.',
+    ce_newConfig: 'Новый',
+    ce_deleteConfig:  'Удалить',
+    ce_confirmDelete: 'Удалить конфиг «{name}»?',
+    ce_deleteOk:      'Конфиг «{name}» удалён',
+    ce_deleteFailed:  'Ошибка удаления: ',
+  },
+  en: {
+    loading: 'Loading...',
+    loadingGrid: 'Loading data…',
+    cache: 'Cache',
+    constructor: 'Constructor',
+    filters: 'Filters',
+    fields: 'Fields',
+    rows: 'Rows',
+    columns: 'Columns',
+    measure: 'Measure',
+    func: 'Function',
+    expandRows: 'Expand rows',
+    collapseRows: 'Collapse rows',
+    expandCols: 'Expand columns',
+    collapseCols: 'Collapse columns',
+    subtotals: '∑ Subtotals',
+    exportCsv: '↓ CSV',
+    drillthrough: 'Drillthrough',
+    allData: 'All data',
+    noData: 'No data',
+    shown: 'Shown',
+    firstN: 'First {n} records',
+    total: 'Total',
+    cacheEmpty: 'Cache empty',
+    cacheActual: 'Up to date',
+    cacheStale: 'Changed · refresh needed',
+    cacheRefresh: '↺ Refresh cache',
+    errorPrefix: 'Error: ',
+    cacheAdd: 'Add to cache',
+    cacheRemove: 'Remove from cache',
+    cacheExceeds: 'rows — exceeds limit',
+    cacheRefreshError: 'Cache refresh error: ',
+    title: 'Pivot Table',
+    // config-editor
+    ce_server: 'Server',
+    ce_database: 'Database',
+    ce_query: 'Query',
+    ce_mainQuery: 'Main query',
+    ce_colsQuery: 'Query to fetch columns',
+    ce_funcs: 'Aggregation functions',
+    ce_fetchCols: 'Fetch columns',
+    ce_drillthrough: 'Drillthrough',
+    ce_cols: 'Columns',
+    ce_colDb: 'DB column',
+    ce_colTitle: 'Title',
+    ce_initialState: 'Initial state',
+    ce_maxCacheRows: 'Max cache rows',
+    ce_filterLimit: 'Checkbox limit',
+    ce_configJs: 'config.js',
+    ce_save: 'Save',
+    ce_loadFromServer: 'Load from server',
+    ce_preview: '▶ Preview',
+    ce_saveConfig: '↑ Save',
+    ce_selectConfig: '— select config —',
+    ce_configName: 'Config name',
+    ce_dimension: 'Dimension',
+    ce_measure_type: 'Measure',
+    ce_fillUrl: 'Fill in URL and query',
+    ce_zeroRows: 'Query returned 0 rows',
+    ce_colsLoaded: '{n} columns fetched',
+    ce_loadError: 'Error: ',
+    ce_fetchBtn: 'Fetch columns',
+    ce_emptyFields: 'Click "Fetch columns"',
+    ce_fillDbFields: 'Fill in host, database and user',
+    ce_dbSaved: 'Settings saved',
+    ce_dbLoaded: 'Settings loaded (password not included)',
+    ce_enterName: 'Enter config name',
+    ce_emptyConfig: 'Config is empty',
+    ce_configSaved: 'Config "{name}" saved',
+    ce_loadFailed: 'Load error: ',
+    ce_saveFailed: 'Save error: ',
+    ce_connector: 'Connector', 
+    ce_dtSqlLabel: 'SELECT query (use {filters})', 
+    ce_dtUrlLabel: 'Base URL (filters will be appended as ?region=North)',
+    ce_testConnection: 'Test connection',
+    ce_testOk:         'Connection successful',
+    ce_testError:      'Connection error: ',
+    confirmLargeExpand: 'Too many rows to display.\n\nAfter expanding, the grid will contain ~{millions}M rows which exceeds browser limits. Some rows at the bottom may not be reachable.\n\nConsider collapsing some row dimensions.\n\nClick OK to expand anyway, or Cancel to abort.',
+    ce_newConfig: 'New',
+    ce_deleteConfig:  'Delete',
+    ce_confirmDelete: 'Delete config "{name}"?',
+    ce_deleteOk:      'Config "{name}" deleted',
+    ce_deleteFailed:  'Delete error: ',
+  },
+};