pivotgrid-js 0.1.0

package/config/config-editor.css

@@ -0,0 +1,298 @@
+/* ── Config Editor styles ─────────────────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  font-family: -apple-system, 'Segoe UI', sans-serif;
+  background: #f4f5f7;
+  color: #1a1a1a;
+  padding: 24px;
+  min-height: 100vh;
+}
+
+/* ── Layout ── */
+
+.editor-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  align-items: start;
+}
+@media (max-width: 1100px) { .editor-layout { grid-template-columns: 1fr; } }
+
+.col-left, .col-right {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* ── Card ── */
+
+.card {
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 16px;
+}
+.card-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: #999;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 12px;
+}
+
+/* ── Form elements ── */
+
+.field-label {
+  display: block;
+  font-size: 12px;
+  color: #555;
+  margin-bottom: 4px;
+  margin-top: 12px;
+}
+.field-label:first-child { margin-top: 0; }
+
+input[type="text"], textarea, select {
+  width: 100%;
+  padding: 6px 10px;
+  font-size: 12px;
+  border: 1px solid #d0d0d0;
+  border-radius: 6px;
+  background: #fff;
+  color: #333;
+  outline: none;
+  font-family: inherit;
+}
+input[type="text"]:focus, textarea:focus, select:focus { border-color: #1a73e8; }
+textarea {
+  resize: vertical;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+/* ── Buttons ── */
+
+.btn {
+  padding: 6px 14px;
+  font-size: 12px;
+  border: 1px solid #d0d0d0;
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+  color: #333;
+  transition: background 0.1s, border-color 0.1s;
+  white-space: nowrap;
+}
+.btn:hover:not(:disabled) { background: #f0f0f0; border-color: #bbb; }
+.btn:disabled { opacity: 0.45; cursor: default; }
+.btn-primary { background: #1a73e8; border-color: #1a73e8; color: #fff; }
+.btn-primary:hover:not(:disabled) { background: #1558b0; }
+.btn-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
+
+/* ── Columns checklist ── */
+.cols-list {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  overflow-y: auto;
+  max-height: 320px;
+  margin-top: 8px;
+}
+
+.cols-list-header,
+.col-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-bottom: 1px solid #f4f4f4;
+}
+
+.cols-list-header {
+  background: #fafafa;
+  border-bottom: 1px solid #e0e0e0;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  font-size: 11px;
+  font-weight: 600;
+  color: #999;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.col-row {
+  margin-bottom: 4px;
+}
+
+.col-db-name {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 11px;
+  color: #555;
+}
+
+.cols-list-header span:nth-child(1) { width: 24px; flex-shrink: 0; }
+.cols-list-header span:nth-child(2) { flex: 0.5; }
+.cols-list-header span:nth-child(3) { flex: 1; }
+.cols-list-header span:nth-child(4) { width: 120px; flex-shrink: 0; }
+.cols-list-header span:nth-child(5) { width: 120px; flex-shrink: 0; }
+
+.col-row input[type="checkbox"] { width: 24px; flex-shrink: 0; cursor: pointer; }
+.col-row .col-db-name             { flex: 0.5; min-width: 0; }
+.col-row input[type="text"]       { flex: 1; min-width: 0; }
+.col-row select:nth-of-type(1)    { width: 120px; flex-shrink: 0; }
+.col-row select:nth-of-type(2)    { width: 120px; flex-shrink: 0; }
+
+.col-row:hover      { background: #f9fbff; }
+.col-row.is-checked { background: #f5f8ff; }
+
+/* ── Drag zones ── */
+
+.zones-wrap {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.dz-zone {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+  min-width: 100px;
+}
+
+.dz-zone--free    { flex: 2; }
+.dz-zone--rows    { flex: 1.5; }
+.dz-zone--columns { flex: 1.5; }
+.dz-zone--cache   { flex: 1.5; }
+
+.dz-zone-label {
+  font-size: 10px;
+  font-weight: 600;
+  color: #999;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 0 4px;
+}
+
+.dz-zone-body {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  min-height: 36px;
+  padding: 4px 6px;
+  border: 1.5px dashed #d0d0d0;
+  border-radius: 6px;
+  background: #fff;
+  transition: background 0.15s, border-color 0.15s;
+}
+.dz-zone-body.dz-over {
+  background: #e8f0fe;
+  border-color: #1a73e8;
+}
+
+/* Chips */
+.dz-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border: 1px solid #d0d0d0;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #333;
+  background: #fff;
+  cursor: grab;
+  user-select: none;
+  white-space: nowrap;
+  transition: box-shadow 0.1s, border-color 0.1s;
+}
+.dz-chip:hover { border-color: #1a73e8; color: #1a73e8; }
+
+[data-dz-zone="rows"] .dz-chip    { background: #f0f4ff; border-color: #c5d3f7; color: #2c4bad; }
+[data-dz-zone="columns"] .dz-chip { background: #f0fdf4; border-color: #a7d7b8; color: #1a6638; }
+[data-dz-zone="cache"] .dz-chip   { background: #f5f0ff; border-color: #c9b8f4; color: #5b21b6; }
+
+.dz-chip--dragging { opacity: 0.3; cursor: grabbing; }
+.dz-chip--ghost    { cursor: grabbing; box-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0.9; }
+
+.dz-chip-remove {
+  font-size: 13px;
+  line-height: 1;
+  color: #bbb;
+  cursor: pointer;
+  padding: 0 1px;
+}
+.dz-chip-remove:hover { color: #e53935; }
+
+.dz-placeholder {
+  width: 3px;
+  height: 24px;
+  background: #1a73e8;
+  border-radius: 2px;
+  pointer-events: none;
+}
+
+/* ── Config preview ── */
+
+.config-preview {
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 11px;
+  line-height: 1.6;
+  background: #1e1e2e;
+  color: #cdd6f4;
+  border: 1px solid #313244;
+  border-radius: 6px;
+  padding: 12px;
+  resize: vertical;
+  width: 100%;
+  height: 600px;
+  outline: none;
+}
+
+/* ── Status ── */
+
+.status {
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: 5px;
+  margin-top: 8px;
+  display: none;
+}
+.status.ok    { background: #f0fdf4; color: #1a6638; border: 1px solid #a7d7b8; display: block; }
+.status.error { background: #fff3f3; color: #c00;    border: 1px solid #fcc;    display: block; }
+
+/* ── Empty ── */
+
+.fields-empty {
+  padding: 20px;
+  text-align: center;
+  color: #bbb;
+  font-size: 12px;
+  font-style: italic;
+}
+
+/* ── Spinner ── */
+
+.spinner {
+  display: inline-block;
+  width: 12px; height: 12px;
+  border: 2px solid #d0d0d0;
+  border-top-color: #1a73e8;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  vertical-align: middle;
+  margin-right: 6px;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.col-right .card { position: sticky; top: 24px; }
+
+.col-row select:disabled {
+  opacity: 0.15;
+}

package/config/config-editor.html

@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Config Editor for PivotGrid</title>
+  <link rel="stylesheet" href="config-editor.css">
+</head>
+
+<body data-lang="en">
+  <div class="editor-layout">
+
+    <!-- ── Left column ── -->
+    <div class="col-left">
+
+      <!-- Server -->
+      <div class="card">
+        <div class="card-title" data-i18n="ce_server"></div>
+        <label class="field-label">URL</label>
+        <input type="text" id="server-url" value="http://localhost:8000">
+      </div>
+
+      <!-- Database -->
+      <div class="card">
+        <div class="card-title" data-i18n="ce_database"></div>
+
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;">
+          <div style="grid-column:1/-1">
+            <label class="field-label" data-i18n="ce_connector"></label>
+            <select id="db-connector"></select>
+          </div>
+          <div>
+            <label class="field-label">Host</label>
+            <input type="text" id="db-host" placeholder="localhost">
+          </div>
+          <div>
+            <label class="field-label">Port</label>
+            <input type="text" id="db-port" placeholder="5432">
+          </div>
+          <div>
+            <label class="field-label">Database</label>
+            <input type="text" id="db-name" placeholder="postgres">
+          </div>
+          <div>
+            <label class="field-label">User</label>
+            <input type="text" id="db-user" placeholder="postgres">
+          </div>
+          <div style="grid-column:1/-1">
+            <label class="field-label">Password</label>
+            <input type="password" id="db-password" placeholder="••••••••">
+          </div>
+        </div>
+
+        <div class="btn-row">
+          <button class="btn btn-primary" id="btn-save-db" data-i18n="ce_save"></button>
+          <button class="btn" id="btn-load-db" data-i18n="ce_loadFromServer"></button>
+          <button class="btn" id="btn-test-db" data-i18n="ce_testConnection"></button>
+        </div>
+        <div class="status" id="db-status"></div>
+      </div>
+
+      <!-- Query -->
+      <div class="card">
+        <div class="card-title" data-i18n="ce_query"></div>
+        <label class="field-label" data-i18n="ce_mainQuery"></label>
+        <textarea id="main-query" rows="5" placeholder="SELECT * FROM sales_data"></textarea>
+        <label class="field-label" data-i18n="ce_colsQuery"></label>
+        <textarea id="cols-query" rows="3"></textarea>
+        <label class="field-label" data-i18n="ce_funcs"></label>
+        <div id="funcs-wrap" style="display:flex;gap:12px;flex-wrap:wrap;font-size:12px;margin-bottom:4px;">
+          <label><input type="checkbox" value="sum" checked> sum</label>
+          <label><input type="checkbox" value="avg" checked> avg</label>
+          <label><input type="checkbox" value="count" checked> count</label>
+          <label><input type="checkbox" value="min" checked> min</label>
+          <label><input type="checkbox" value="max" checked> max</label>
+          <label><input type="checkbox" value="stddev"> stddev</label>
+          <label><input type="checkbox" value="variance"> variance</label>
+        </div>
+        <div class="btn-row">
+          <button class="btn btn-primary" id="btn-fetch-cols" data-i18n="ce_fetchCols"></button>
+        </div>
+        <div class="status" id="fetch-status"></div>
+      </div>
+
+      <!-- Drillthrough -->
+      <div class="card">
+        <div class="card-title" data-i18n="ce_drillthrough"></div>
+
+        <div style="display:flex;gap:16px;margin-bottom:12px;">
+          <label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">
+            <input type="radio" name="dt-type" value="sql" checked> SQL
+          </label>
+          <label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">
+            <input type="radio" name="dt-type" value="url"> URL
+          </label>
+        </div>
+
+        <div id="dt-sql-wrap">
+          <label class="field-label" data-i18n="ce_dtSqlLabel"></label>
+          <textarea id="dt-query" rows="4" placeholder="SELECT * FROM sales_data WHERE {filters} LIMIT 200"></textarea>
+        </div>
+
+        <div id="dt-url-wrap" style="display:none">
+          <label class="field-label" data-i18n="ce_dtUrlLabel"></label>
+          <input type="text" id="dt-url" placeholder="https://myapp.com/details">
+        </div>
+      </div>
+
+      <!-- Column list with checkboxes -->
+      <div class="card">
+        <div class="card-title" data-i18n="ce_cols"></div>
+        <div id="cols-wrap">
+          <div class="fields-empty" data-i18n="ce_emptyFields"></div>
+        </div>
+      </div>
+
+      <!-- Initial state — drag zones -->
+      <div class="card">
+        <div class="card-title" data-i18n="ce_initialState"></div>
+        <div class="zones-wrap">
+
+          <div class="dz-zone dz-zone--free">
+            <div class="dz-zone-label" data-i18n="fields"></div>
+            <div class="dz-zone-body" id="dz-free" data-dz-zone="free"></div>
+          </div>
+
+          <div class="dz-zone dz-zone--rows">
+            <div class="dz-zone-label" data-i18n="rows"></div>
+            <div class="dz-zone-body" id="dz-rows" data-dz-zone="rows"></div>
+          </div>
+
+          <div class="dz-zone dz-zone--columns">
+            <div class="dz-zone-label" data-i18n="columns"></div>
+            <div class="dz-zone-body" id="dz-columns" data-dz-zone="columns"></div>
+          </div>
+
+          <div class="dz-zone dz-zone--cache">
+            <div class="dz-zone-label" data-i18n="cache"></div>
+            <div class="dz-zone-body" id="dz-cache" data-dz-zone="cache"></div>
+          </div>
+
+        </div>
+
+        <!-- Additional parameters -->
+        <div style="display:flex;gap:12px;margin-top:12px;flex-wrap:wrap;">
+          <div style="display:flex;flex-direction:column;gap:4px;flex:1;min-width:120px;">
+            <label class="field-label"
+              style="margin:0;font-size:11px;font-weight:600;color:#999;text-transform:uppercase;letter-spacing:.04em;"
+              data-i18n="measure"></label>
+            <select id="init-measure"></select>
+          </div>
+          <div style="display:flex;flex-direction:column;gap:4px;flex:1;min-width:120px;">
+            <label class="field-label"
+              style="margin:0;font-size:11px;font-weight:600;color:#999;text-transform:uppercase;letter-spacing:.04em;"
+              data-i18n="func"></label>
+            <select id="init-func"></select>
+          </div>
+          <div style="display:flex;flex-direction:column;gap:4px;flex:1;min-width:120px;">
+            <label class="field-label"
+              style="margin:0;font-size:11px;font-weight:600;color:#999;text-transform:uppercase;letter-spacing:.04em;"
+              data-i18n="ce_maxCacheRows"></label>
+            <input type="text" id="init-max-rows" value="500000">
+          </div>
+          <div style="display:flex;flex-direction:column;gap:4px;flex:1;min-width:120px;">
+            <label class="field-label"
+              style="margin:0;font-size:11px;font-weight:600;color:#999;text-transform:uppercase;letter-spacing:.04em;"
+              data-i18n="ce_filterLimit"></label>
+            <input type="text" id="init-filter-limit" value="30">
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <!-- ── Right column ── -->
+    <div class="col-right">
+      <div class="card">
+        <div class="card-title" data-i18n="ce_configJs"></div>
+        <div style="display:flex;gap:8px;margin-bottom:12px;align-items:center;">
+          <select id="sel-config-name" style="flex:1">
+            <option value="" data-i18n="ce_selectConfig"></option>
+          </select>
+          <button class="btn" id="btn-new-config" data-i18n="ce_newConfig"></button>
+          <button class="btn" id="btn-delete-config" data-i18n="ce_deleteConfig" style="color:#c00;border-color:#fcc;"
+            disabled></button>
+          <input type="text" id="inp-config-name" data-i18n-placeholder="ce_configName" style="flex:1">
+          <button class="btn btn-primary" id="btn-save-config" data-i18n="ce_saveConfig"></button>
+        </div>
+        <textarea class="config-preview" id="config-preview" readonly spellcheck="false"></textarea>
+        <div class="btn-row">
+          <button class="btn" id="btn-preview" data-i18n="ce_preview"></button>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <script src="../widget/i18n.js"></script>
+  <script src="config-editor.js"></script>
+</body>
+
+</html>