mirror of
https://github.com/olehomelchenko/astrolabe-nvc.git
synced 2025-12-21 21:22:23 +00:00
refactor: migrate chart builder UI to Alpine.js for reactive state management
This commit is contained in:
64
index.html
64
index.html
@@ -474,27 +474,27 @@
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<span class="modal-title">Build Chart</span>
|
||||
<button class="btn btn-icon" id="chart-builder-modal-close" title="Close chart builder (Escape)">×</button>
|
||||
<button class="btn btn-icon" id="chart-builder-modal-close" @click="$el.closest('#chart-builder-view')._x_dataStack[0].close()" title="Close chart builder (Escape)">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Chart Builder View -->
|
||||
<div id="chart-builder-view" class="chart-builder-view">
|
||||
<div id="chart-builder-view" class="chart-builder-view" x-data="chartBuilder()">
|
||||
<div class="chart-builder-container">
|
||||
<!-- Left Panel: Configuration -->
|
||||
<div class="chart-builder-config">
|
||||
<div class="chart-builder-header">
|
||||
<button class="btn btn-modal" id="chart-builder-back-btn" title="Back to dataset details">← Back to Dataset</button>
|
||||
<button class="btn btn-modal" id="chart-builder-back-btn" @click="close()" title="Back to dataset details">← Back to Dataset</button>
|
||||
</div>
|
||||
|
||||
<div class="chart-builder-section">
|
||||
<div class="mark-type-row">
|
||||
<label class="chart-builder-label">Mark Type*</label>
|
||||
<div class="mark-toggle-group">
|
||||
<button class="btn btn-toggle small active" data-mark="bar" title="Bar chart">Bar</button>
|
||||
<button class="btn btn-toggle small" data-mark="line" title="Line chart">Line</button>
|
||||
<button class="btn btn-toggle small" data-mark="point" title="Point chart">Point</button>
|
||||
<button class="btn btn-toggle small" data-mark="area" title="Area chart">Area</button>
|
||||
<button class="btn btn-toggle small" data-mark="circle" title="Circle chart">Circle</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': markType === 'bar' }" @click="setMarkType('bar')" data-mark="bar" title="Bar chart">Bar</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': markType === 'line' }" @click="setMarkType('line')" data-mark="line" title="Line chart">Line</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': markType === 'point' }" @click="setMarkType('point')" data-mark="point" title="Point chart">Point</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': markType === 'area' }" @click="setMarkType('area')" data-mark="area" title="Area chart">Area</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': markType === 'circle' }" @click="setMarkType('circle')" data-mark="circle" title="Circle chart">Circle</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -506,17 +506,17 @@
|
||||
<div class="encoding-group">
|
||||
<div class="encoding-row">
|
||||
<label class="encoding-header">X Axis</label>
|
||||
<select id="encoding-x-field" class="input">
|
||||
<select id="encoding-x-field" class="input" x-model="encodings.x.field" @change="setEncodingField('x', $event.target.value)">
|
||||
<option value="">None</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="encoding-type">
|
||||
<label class="encoding-type-label">Type</label>
|
||||
<div class="type-toggle-group">
|
||||
<button class="btn btn-toggle small" data-encoding="x" data-type="quantitative" title="Quantitative">Q</button>
|
||||
<button class="btn btn-toggle small" data-encoding="x" data-type="ordinal" title="Ordinal">O</button>
|
||||
<button class="btn btn-toggle small" data-encoding="x" data-type="nominal" title="Nominal">N</button>
|
||||
<button class="btn btn-toggle small" data-encoding="x" data-type="temporal" title="Temporal">T</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.x.type === 'quantitative' }" @click="setEncodingType('x', 'quantitative')" data-encoding="x" data-type="quantitative" title="Quantitative">Q</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.x.type === 'ordinal' }" @click="setEncodingType('x', 'ordinal')" data-encoding="x" data-type="ordinal" title="Ordinal">O</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.x.type === 'nominal' }" @click="setEncodingType('x', 'nominal')" data-encoding="x" data-type="nominal" title="Nominal">N</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.x.type === 'temporal' }" @click="setEncodingType('x', 'temporal')" data-encoding="x" data-type="temporal" title="Temporal">T</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -525,17 +525,17 @@
|
||||
<div class="encoding-group">
|
||||
<div class="encoding-row">
|
||||
<label class="encoding-header">Y Axis</label>
|
||||
<select id="encoding-y-field" class="input">
|
||||
<select id="encoding-y-field" class="input" x-model="encodings.y.field" @change="setEncodingField('y', $event.target.value)">
|
||||
<option value="">None</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="encoding-type">
|
||||
<label class="encoding-type-label">Type</label>
|
||||
<div class="type-toggle-group">
|
||||
<button class="btn btn-toggle small" data-encoding="y" data-type="quantitative" title="Quantitative">Q</button>
|
||||
<button class="btn btn-toggle small" data-encoding="y" data-type="ordinal" title="Ordinal">O</button>
|
||||
<button class="btn btn-toggle small" data-encoding="y" data-type="nominal" title="Nominal">N</button>
|
||||
<button class="btn btn-toggle small" data-encoding="y" data-type="temporal" title="Temporal">T</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.y.type === 'quantitative' }" @click="setEncodingType('y', 'quantitative')" data-encoding="y" data-type="quantitative" title="Quantitative">Q</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.y.type === 'ordinal' }" @click="setEncodingType('y', 'ordinal')" data-encoding="y" data-type="ordinal" title="Ordinal">O</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.y.type === 'nominal' }" @click="setEncodingType('y', 'nominal')" data-encoding="y" data-type="nominal" title="Nominal">N</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.y.type === 'temporal' }" @click="setEncodingType('y', 'temporal')" data-encoding="y" data-type="temporal" title="Temporal">T</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -544,17 +544,17 @@
|
||||
<div class="encoding-group">
|
||||
<div class="encoding-row">
|
||||
<label class="encoding-header">Color</label>
|
||||
<select id="encoding-color-field" class="input">
|
||||
<select id="encoding-color-field" class="input" x-model="encodings.color.field" @change="setEncodingField('color', $event.target.value)">
|
||||
<option value="">None</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="encoding-type">
|
||||
<label class="encoding-type-label">Type</label>
|
||||
<div class="type-toggle-group">
|
||||
<button class="btn btn-toggle small" data-encoding="color" data-type="quantitative" title="Quantitative">Q</button>
|
||||
<button class="btn btn-toggle small" data-encoding="color" data-type="ordinal" title="Ordinal">O</button>
|
||||
<button class="btn btn-toggle small" data-encoding="color" data-type="nominal" title="Nominal">N</button>
|
||||
<button class="btn btn-toggle small" data-encoding="color" data-type="temporal" title="Temporal">T</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.color.type === 'quantitative' }" @click="setEncodingType('color', 'quantitative')" data-encoding="color" data-type="quantitative" title="Quantitative">Q</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.color.type === 'ordinal' }" @click="setEncodingType('color', 'ordinal')" data-encoding="color" data-type="ordinal" title="Ordinal">O</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.color.type === 'nominal' }" @click="setEncodingType('color', 'nominal')" data-encoding="color" data-type="nominal" title="Nominal">N</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.color.type === 'temporal' }" @click="setEncodingType('color', 'temporal')" data-encoding="color" data-type="temporal" title="Temporal">T</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -563,17 +563,17 @@
|
||||
<div class="encoding-group">
|
||||
<div class="encoding-row">
|
||||
<label class="encoding-header">Size</label>
|
||||
<select id="encoding-size-field" class="input">
|
||||
<select id="encoding-size-field" class="input" x-model="encodings.size.field" @change="setEncodingField('size', $event.target.value)">
|
||||
<option value="">None</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="encoding-type">
|
||||
<label class="encoding-type-label">Type</label>
|
||||
<div class="type-toggle-group">
|
||||
<button class="btn btn-toggle small" data-encoding="size" data-type="quantitative" title="Quantitative">Q</button>
|
||||
<button class="btn btn-toggle small" data-encoding="size" data-type="ordinal" title="Ordinal">O</button>
|
||||
<button class="btn btn-toggle small" data-encoding="size" data-type="nominal" title="Nominal">N</button>
|
||||
<button class="btn btn-toggle small" data-encoding="size" data-type="temporal" title="Temporal">T</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.size.type === 'quantitative' }" @click="setEncodingType('size', 'quantitative')" data-encoding="size" data-type="quantitative" title="Quantitative">Q</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.size.type === 'ordinal' }" @click="setEncodingType('size', 'ordinal')" data-encoding="size" data-type="ordinal" title="Ordinal">O</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.size.type === 'nominal' }" @click="setEncodingType('size', 'nominal')" data-encoding="size" data-type="nominal" title="Nominal">N</button>
|
||||
<button class="btn btn-toggle small" :class="{ 'active': encodings.size.type === 'temporal' }" @click="setEncodingType('size', 'temporal')" data-encoding="size" data-type="temporal" title="Temporal">T</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -584,11 +584,11 @@
|
||||
<div class="chart-dimensions-group">
|
||||
<div class="dimension-input-group">
|
||||
<label class="dimension-label">Width</label>
|
||||
<input type="number" id="chart-width" class="input small" placeholder="auto" min="1" />
|
||||
<input type="number" id="chart-width" class="input small" x-model.number="width" @input="updatePreview()" placeholder="auto" min="1" />
|
||||
</div>
|
||||
<div class="dimension-input-group">
|
||||
<label class="dimension-label">Height</label>
|
||||
<input type="number" id="chart-height" class="input small" placeholder="auto" min="1" />
|
||||
<input type="number" id="chart-height" class="input small" x-model.number="height" @input="updatePreview()" placeholder="auto" min="1" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -596,8 +596,8 @@
|
||||
<div class="chart-builder-error" id="chart-builder-error"></div>
|
||||
|
||||
<div class="chart-builder-actions">
|
||||
<button class="btn btn-modal primary" id="chart-builder-create-btn" title="Create snippet from chart" disabled>Create Snippet</button>
|
||||
<button class="btn btn-modal" id="chart-builder-cancel-btn" title="Cancel and close">Cancel</button>
|
||||
<button class="btn btn-modal primary" id="chart-builder-create-btn" @click="createSnippet()" :disabled="!isValid" title="Create snippet from chart">Create Snippet</button>
|
||||
<button class="btn btn-modal" id="chart-builder-cancel-btn" @click="close()" title="Cancel and close">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -130,9 +130,6 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
// Initialize auto-save functionality
|
||||
initializeAutoSave();
|
||||
|
||||
// Initialize chart builder
|
||||
initializeChartBuilder();
|
||||
|
||||
// Initialize URL state management AFTER editor is ready
|
||||
initializeURLStateManagement();
|
||||
});
|
||||
@@ -204,7 +201,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
// Edit dataset button
|
||||
if (editDatasetBtn) {
|
||||
editDatasetBtn.addEventListener('click', async function() {
|
||||
editDatasetBtn.addEventListener('click', async function () {
|
||||
if (Alpine.store('datasets').currentDatasetId) {
|
||||
await showEditDatasetForm(Alpine.store('datasets').currentDatasetId);
|
||||
}
|
||||
@@ -276,14 +273,14 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
const previewRawBtn = document.getElementById('preview-raw-btn');
|
||||
const previewTableBtn = document.getElementById('preview-table-btn');
|
||||
if (previewRawBtn) {
|
||||
previewRawBtn.addEventListener('click', function() {
|
||||
previewRawBtn.addEventListener('click', function () {
|
||||
if (Alpine.store('datasets').currentDatasetData) {
|
||||
showRawPreview(Alpine.store('datasets').currentDatasetData);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (previewTableBtn) {
|
||||
previewTableBtn.addEventListener('click', function() {
|
||||
previewTableBtn.addEventListener('click', function () {
|
||||
if (Alpine.store('datasets').currentDatasetData) {
|
||||
showTablePreview(Alpine.store('datasets').currentDatasetData);
|
||||
}
|
||||
@@ -291,7 +288,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
}
|
||||
|
||||
// Global modal event delegation - handles close buttons and overlay clicks
|
||||
document.addEventListener('click', function(e) {
|
||||
document.addEventListener('click', function (e) {
|
||||
// Handle modal close buttons (×)
|
||||
if (e.target.id && e.target.id.endsWith('-modal-close')) {
|
||||
const modalId = e.target.id.replace('-close', '');
|
||||
@@ -399,11 +396,11 @@ function initializeURLStateManagement() {
|
||||
|
||||
// Keyboard shortcut action handlers (shared between Monaco and document)
|
||||
const KeyboardActions = {
|
||||
createNewSnippet: function() {
|
||||
createNewSnippet: function () {
|
||||
createNewSnippet();
|
||||
},
|
||||
|
||||
toggleDatasetManager: function() {
|
||||
toggleDatasetManager: function () {
|
||||
const modal = document.getElementById('dataset-modal');
|
||||
if (modal && modal.style.display === 'flex') {
|
||||
closeDatasetManager();
|
||||
@@ -412,13 +409,13 @@ const KeyboardActions = {
|
||||
}
|
||||
},
|
||||
|
||||
publishDraft: function() {
|
||||
publishDraft: function () {
|
||||
if (Alpine.store('snippets').viewMode === 'draft' && Alpine.store('snippets').currentSnippetId) {
|
||||
publishDraft();
|
||||
}
|
||||
},
|
||||
|
||||
toggleSettings: function() {
|
||||
toggleSettings: function () {
|
||||
if (ModalManager.isOpen('settings-modal')) {
|
||||
closeSettingsModal();
|
||||
} else {
|
||||
@@ -426,7 +423,7 @@ const KeyboardActions = {
|
||||
}
|
||||
},
|
||||
|
||||
closeAnyModal: function() {
|
||||
closeAnyModal: function () {
|
||||
// Try ModalManager first for standard modals
|
||||
if (ModalManager.closeAny()) {
|
||||
return true;
|
||||
@@ -448,7 +445,7 @@ const KeyboardActions = {
|
||||
|
||||
// Keyboard shortcuts handler (document-level)
|
||||
function initializeKeyboardShortcuts() {
|
||||
document.addEventListener('keydown', function(e) {
|
||||
document.addEventListener('keydown', function (e) {
|
||||
// Escape: Close any open modal
|
||||
if (e.key === 'Escape') {
|
||||
if (KeyboardActions.closeAnyModal()) {
|
||||
|
||||
@@ -1,10 +1,299 @@
|
||||
// Chart Builder - Visual chart construction from datasets
|
||||
|
||||
// Global state for chart builder
|
||||
window.chartBuilderState = null;
|
||||
/**
|
||||
* Alpine.js component for Chart Builder
|
||||
* Manages reactive state for chart configuration and preview
|
||||
*/
|
||||
function chartBuilder() {
|
||||
return {
|
||||
// Dataset info
|
||||
datasetId: null,
|
||||
datasetName: null,
|
||||
dataset: null,
|
||||
|
||||
// Timeout for debounced preview updates
|
||||
let previewUpdateTimeout = null;
|
||||
// Chart configuration
|
||||
markType: 'bar',
|
||||
encodings: {
|
||||
x: { field: '', type: 'nominal' },
|
||||
y: { field: '', type: 'quantitative' },
|
||||
color: { field: '', type: 'nominal' },
|
||||
size: { field: '', type: 'quantitative' }
|
||||
},
|
||||
width: null,
|
||||
height: null,
|
||||
|
||||
// UI state
|
||||
previewTimeout: null,
|
||||
|
||||
// Computed: Generate Vega-Lite spec from current state
|
||||
get spec() {
|
||||
const spec = {
|
||||
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
|
||||
"data": { "name": this.datasetName },
|
||||
"mark": { "type": this.markType, "tooltip": true },
|
||||
"encoding": {}
|
||||
};
|
||||
|
||||
// Add encodings
|
||||
['x', 'y', 'color', 'size'].forEach(channel => {
|
||||
const enc = this.encodings[channel];
|
||||
if (enc.field) {
|
||||
spec.encoding[channel] = {
|
||||
field: enc.field,
|
||||
type: enc.type
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// Add dimensions if specified
|
||||
if (this.width) spec.width = parseInt(this.width);
|
||||
if (this.height) spec.height = parseInt(this.height);
|
||||
|
||||
// Remove empty encoding object
|
||||
if (Object.keys(spec.encoding).length === 0) {
|
||||
delete spec.encoding;
|
||||
}
|
||||
|
||||
return spec;
|
||||
},
|
||||
|
||||
// Computed: Check if configuration is valid
|
||||
get isValid() {
|
||||
return Object.values(this.encodings).some(enc => enc.field !== '');
|
||||
},
|
||||
|
||||
// Initialize component with dataset
|
||||
async init(datasetId) {
|
||||
try {
|
||||
// Validate datasetId is provided
|
||||
if (!datasetId || isNaN(datasetId)) {
|
||||
console.warn('Chart builder init called without valid datasetId');
|
||||
return false;
|
||||
}
|
||||
|
||||
// Fetch dataset from IndexedDB
|
||||
this.dataset = await DatasetStorage.getDataset(datasetId);
|
||||
if (!this.dataset) {
|
||||
Toast.error('Dataset not found');
|
||||
return false;
|
||||
}
|
||||
|
||||
this.datasetId = datasetId;
|
||||
this.datasetName = this.dataset.name;
|
||||
|
||||
// Populate field dropdowns
|
||||
populateFieldDropdowns(this.dataset);
|
||||
|
||||
// Auto-select smart defaults
|
||||
this.autoSelectDefaults();
|
||||
|
||||
// Trigger initial preview
|
||||
this.$nextTick(() => {
|
||||
this.updatePreview();
|
||||
});
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Error initializing chart builder:', error);
|
||||
Toast.error('Error opening chart builder');
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
// Auto-select smart defaults based on column types
|
||||
autoSelectDefaults() {
|
||||
const columns = this.dataset.columns || [];
|
||||
const columnTypes = this.dataset.columnTypes || [];
|
||||
|
||||
if (columns.length === 0) return;
|
||||
|
||||
// Select first column for X axis
|
||||
if (columns.length >= 1) {
|
||||
const firstCol = columns[0];
|
||||
const firstColType = columnTypes.find(ct => ct.name === firstCol);
|
||||
this.encodings.x.field = firstCol;
|
||||
this.encodings.x.type = firstColType ? mapColumnTypeToVegaType(firstColType.type) : 'nominal';
|
||||
}
|
||||
|
||||
// Select second column for Y axis (if exists)
|
||||
if (columns.length >= 2) {
|
||||
const secondCol = columns[1];
|
||||
const secondColType = columnTypes.find(ct => ct.name === secondCol);
|
||||
this.encodings.y.field = secondCol;
|
||||
this.encodings.y.type = secondColType ? mapColumnTypeToVegaType(secondColType.type) : 'quantitative';
|
||||
}
|
||||
},
|
||||
|
||||
// Set mark type and update preview
|
||||
setMarkType(type) {
|
||||
this.markType = type;
|
||||
this.updatePreview();
|
||||
},
|
||||
|
||||
// Set encoding field and auto-detect type if needed
|
||||
async setEncodingField(channel, field) {
|
||||
this.encodings[channel].field = field;
|
||||
|
||||
if (field && this.dataset) {
|
||||
// Auto-detect type from column type
|
||||
const columnTypes = this.dataset.columnTypes || [];
|
||||
const colType = columnTypes.find(ct => ct.name === field);
|
||||
if (colType) {
|
||||
this.encodings[channel].type = mapColumnTypeToVegaType(colType.type);
|
||||
}
|
||||
}
|
||||
|
||||
this.updatePreview();
|
||||
},
|
||||
|
||||
// Set encoding type and update preview
|
||||
setEncodingType(channel, type) {
|
||||
if (this.encodings[channel].field) {
|
||||
this.encodings[channel].type = type;
|
||||
this.updatePreview();
|
||||
}
|
||||
},
|
||||
|
||||
// Update preview with debouncing
|
||||
updatePreview() {
|
||||
clearTimeout(this.previewTimeout);
|
||||
|
||||
// Get debounce time from settings (default 1500ms)
|
||||
const debounceTime = getSetting('performance.renderDebounce') || 1500;
|
||||
|
||||
this.previewTimeout = setTimeout(async () => {
|
||||
await this.renderPreview();
|
||||
}, debounceTime);
|
||||
},
|
||||
|
||||
// Render preview in chart builder
|
||||
async renderPreview() {
|
||||
const previewContainer = document.getElementById('chart-builder-preview');
|
||||
const errorDiv = document.getElementById('chart-builder-error');
|
||||
|
||||
if (!previewContainer) return;
|
||||
|
||||
try {
|
||||
// Validate configuration
|
||||
if (!this.isValid) {
|
||||
previewContainer.innerHTML = '<div class="chart-preview-placeholder">Configure at least one encoding to see preview</div>';
|
||||
if (errorDiv) errorDiv.textContent = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// Resolve dataset references
|
||||
const resolvedSpec = await resolveDatasetReferences(JSON.parse(JSON.stringify(this.spec)));
|
||||
|
||||
// Clear container
|
||||
previewContainer.innerHTML = '';
|
||||
|
||||
// Render with Vega-Embed
|
||||
await window.vegaEmbed('#chart-builder-preview', resolvedSpec, {
|
||||
actions: false,
|
||||
renderer: 'svg'
|
||||
});
|
||||
|
||||
// Clear error
|
||||
if (errorDiv) errorDiv.textContent = '';
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error rendering chart preview:', error);
|
||||
|
||||
// Show error message
|
||||
if (errorDiv) {
|
||||
errorDiv.textContent = error.message || 'Error rendering chart';
|
||||
}
|
||||
|
||||
// Show error in preview
|
||||
previewContainer.innerHTML = `<div class="chart-preview-placeholder" style="color: #d32f2f;">Error: ${error.message || 'Failed to render chart'}</div>`;
|
||||
}
|
||||
},
|
||||
|
||||
// Create snippet from current chart configuration
|
||||
async createSnippet() {
|
||||
if (!this.isValid) return;
|
||||
|
||||
try {
|
||||
// Create snippet with auto-generated name
|
||||
const snippetName = generateSnippetName();
|
||||
const now = new Date().toISOString();
|
||||
|
||||
const snippet = {
|
||||
id: generateSnippetId(),
|
||||
name: snippetName,
|
||||
created: now,
|
||||
modified: now,
|
||||
spec: this.spec,
|
||||
draftSpec: null,
|
||||
comment: `Chart built from dataset: ${this.datasetName}`,
|
||||
tags: [],
|
||||
datasetRefs: [this.datasetName],
|
||||
meta: {}
|
||||
};
|
||||
|
||||
// Save snippet
|
||||
SnippetStorage.saveSnippet(snippet);
|
||||
|
||||
// Close modals
|
||||
this.close();
|
||||
const datasetModal = document.getElementById('dataset-modal');
|
||||
if (datasetModal) datasetModal.style.display = 'none';
|
||||
|
||||
// Select and open the new snippet
|
||||
selectSnippet(snippet.id);
|
||||
|
||||
// Show success message
|
||||
Toast.success(`Created snippet: ${snippetName}`);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error creating snippet from builder:', error);
|
||||
Toast.error('Error creating snippet');
|
||||
}
|
||||
},
|
||||
|
||||
// Close chart builder and cleanup
|
||||
close() {
|
||||
const modal = document.getElementById('chart-builder-modal');
|
||||
modal.style.display = 'none';
|
||||
|
||||
// Update URL - go back to dataset view
|
||||
if (this.datasetId) {
|
||||
URLState.update({
|
||||
view: 'datasets',
|
||||
datasetId: this.datasetId,
|
||||
action: null
|
||||
});
|
||||
}
|
||||
|
||||
// Clear timeout
|
||||
clearTimeout(this.previewTimeout);
|
||||
|
||||
// Reset state
|
||||
this.datasetId = null;
|
||||
this.datasetName = null;
|
||||
this.dataset = null;
|
||||
this.markType = 'bar';
|
||||
this.encodings = {
|
||||
x: { field: '', type: 'nominal' },
|
||||
y: { field: '', type: 'quantitative' },
|
||||
color: { field: '', type: 'nominal' },
|
||||
size: { field: '', type: 'quantitative' }
|
||||
};
|
||||
this.width = null;
|
||||
this.height = null;
|
||||
|
||||
// Clear preview
|
||||
const previewContainer = document.getElementById('chart-builder-preview');
|
||||
if (previewContainer) {
|
||||
previewContainer.innerHTML = '<div class="chart-preview-placeholder">Configure chart to see preview</div>';
|
||||
}
|
||||
|
||||
// Clear error
|
||||
const errorDiv = document.getElementById('chart-builder-error');
|
||||
if (errorDiv) errorDiv.textContent = '';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Map column types to Vega-Lite types
|
||||
function mapColumnTypeToVegaType(columnType) {
|
||||
@@ -23,38 +312,26 @@ function setActiveToggle(buttons, activeButton) {
|
||||
activeButton.classList.add('active');
|
||||
}
|
||||
|
||||
|
||||
// Open chart builder modal with dataset
|
||||
async function openChartBuilder(datasetId) {
|
||||
try {
|
||||
// Fetch dataset from IndexedDB
|
||||
const dataset = await DatasetStorage.getDataset(datasetId);
|
||||
if (!dataset) {
|
||||
showToast('Dataset not found', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Initialize state with defaults
|
||||
window.chartBuilderState = {
|
||||
datasetId: datasetId,
|
||||
datasetName: dataset.name,
|
||||
spec: {
|
||||
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
|
||||
"data": {"name": dataset.name},
|
||||
"mark": {"type": "bar", "tooltip": true},
|
||||
"encoding": {}
|
||||
}
|
||||
};
|
||||
|
||||
// Populate field dropdowns with dataset columns BEFORE showing modal
|
||||
populateFieldDropdowns(dataset);
|
||||
|
||||
// Auto-select smart defaults
|
||||
autoSelectDefaults(dataset);
|
||||
|
||||
// Show modal
|
||||
// Show modal first
|
||||
const modal = document.getElementById('chart-builder-modal');
|
||||
modal.style.display = 'flex';
|
||||
|
||||
// Get Alpine component instance and initialize it
|
||||
const chartBuilderView = document.getElementById('chart-builder-view');
|
||||
if (chartBuilderView && chartBuilderView._x_dataStack) {
|
||||
const component = chartBuilderView._x_dataStack[0];
|
||||
const success = await component.init(datasetId);
|
||||
|
||||
if (!success) {
|
||||
modal.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Update URL to reflect chart builder state
|
||||
URLState.update({
|
||||
view: 'datasets',
|
||||
@@ -62,18 +339,15 @@ async function openChartBuilder(datasetId) {
|
||||
action: 'build'
|
||||
});
|
||||
|
||||
// Initial preview update (with a small delay to ensure DOM is ready)
|
||||
setTimeout(() => {
|
||||
updateChartBuilderPreview();
|
||||
}, 50);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error opening chart builder:', error);
|
||||
showToast('Error opening chart builder', 'error');
|
||||
Toast.error('Error opening chart builder');
|
||||
}
|
||||
}
|
||||
|
||||
// Populate field dropdowns with dataset columns
|
||||
|
||||
|
||||
// Populate field dropdowns with dataset columns (utility function)
|
||||
function populateFieldDropdowns(dataset) {
|
||||
const encodings = ['x', 'y', 'color', 'size'];
|
||||
const columns = dataset.columns || [];
|
||||
@@ -95,363 +369,11 @@ function populateFieldDropdowns(dataset) {
|
||||
});
|
||||
}
|
||||
|
||||
// Auto-select smart defaults based on column types
|
||||
function autoSelectDefaults(dataset) {
|
||||
const columns = dataset.columns || [];
|
||||
const columnTypes = dataset.columnTypes || [];
|
||||
|
||||
if (columns.length === 0) return;
|
||||
|
||||
// Select first column for X axis
|
||||
if (columns.length >= 1) {
|
||||
const firstCol = columns[0];
|
||||
const firstColType = columnTypes.find(ct => ct.name === firstCol);
|
||||
setEncoding('x', firstCol, firstColType ? mapColumnTypeToVegaType(firstColType.type) : 'nominal');
|
||||
}
|
||||
|
||||
// Select second column for Y axis (if exists)
|
||||
if (columns.length >= 2) {
|
||||
const secondCol = columns[1];
|
||||
const secondColType = columnTypes.find(ct => ct.name === secondCol);
|
||||
setEncoding('y', secondCol, secondColType ? mapColumnTypeToVegaType(secondColType.type) : 'quantitative');
|
||||
}
|
||||
}
|
||||
|
||||
// Set encoding field and type in UI and state
|
||||
function setEncoding(channel, field, type) {
|
||||
// Update dropdown
|
||||
const select = document.getElementById(`encoding-${channel}-field`);
|
||||
if (select) {
|
||||
select.value = field;
|
||||
}
|
||||
|
||||
// Update type toggle buttons
|
||||
const typeButtons = document.querySelectorAll(`[data-encoding="${channel}"][data-type]`);
|
||||
const activeButton = Array.from(typeButtons).find(btn => btn.dataset.type === type);
|
||||
if (activeButton) {
|
||||
setActiveToggle(typeButtons, activeButton);
|
||||
}
|
||||
|
||||
// Update state
|
||||
if (!window.chartBuilderState) return;
|
||||
|
||||
if (field) {
|
||||
window.chartBuilderState.spec.encoding[channel] = {
|
||||
field: field,
|
||||
type: type
|
||||
};
|
||||
} else {
|
||||
delete window.chartBuilderState.spec.encoding[channel];
|
||||
}
|
||||
}
|
||||
|
||||
// Generate Vega-Lite spec from current state
|
||||
function generateVegaLiteSpec() {
|
||||
if (!window.chartBuilderState) return null;
|
||||
|
||||
const state = window.chartBuilderState;
|
||||
const spec = JSON.parse(JSON.stringify(state.spec)); // Deep clone
|
||||
|
||||
// Add width/height if specified
|
||||
const width = document.getElementById('chart-width');
|
||||
const height = document.getElementById('chart-height');
|
||||
|
||||
if (width && width.value) {
|
||||
spec.width = parseInt(width.value);
|
||||
}
|
||||
|
||||
if (height && height.value) {
|
||||
spec.height = parseInt(height.value);
|
||||
}
|
||||
|
||||
// Remove empty encodings
|
||||
if (Object.keys(spec.encoding).length === 0) {
|
||||
delete spec.encoding;
|
||||
}
|
||||
|
||||
return spec;
|
||||
}
|
||||
|
||||
// Validate chart configuration
|
||||
function validateChartConfig() {
|
||||
if (!window.chartBuilderState) return false;
|
||||
|
||||
const spec = window.chartBuilderState.spec;
|
||||
const encoding = spec.encoding || {};
|
||||
|
||||
// At least one encoding must be set
|
||||
const hasEncoding = Object.keys(encoding).length > 0;
|
||||
|
||||
return hasEncoding;
|
||||
}
|
||||
|
||||
// Update preview with debouncing
|
||||
function updateChartBuilderPreview() {
|
||||
clearTimeout(previewUpdateTimeout);
|
||||
|
||||
// Get debounce time from settings (default 1500ms)
|
||||
const debounceTime = getSetting('performance.renderDebounce') || 1500;
|
||||
|
||||
previewUpdateTimeout = setTimeout(async () => {
|
||||
await renderChartBuilderPreview();
|
||||
}, debounceTime);
|
||||
}
|
||||
|
||||
// Render preview in chart builder
|
||||
async function renderChartBuilderPreview() {
|
||||
const previewContainer = document.getElementById('chart-builder-preview');
|
||||
const errorDiv = document.getElementById('chart-builder-error');
|
||||
const createBtn = document.getElementById('chart-builder-create-btn');
|
||||
|
||||
if (!previewContainer) return;
|
||||
|
||||
try {
|
||||
// Validate configuration
|
||||
const isValid = validateChartConfig();
|
||||
|
||||
if (!isValid) {
|
||||
// Show placeholder
|
||||
previewContainer.innerHTML = '<div class="chart-preview-placeholder">Configure at least one encoding to see preview</div>';
|
||||
if (errorDiv) errorDiv.textContent = '';
|
||||
if (createBtn) createBtn.disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// Generate spec
|
||||
const spec = generateVegaLiteSpec();
|
||||
if (!spec) return;
|
||||
|
||||
// Resolve dataset references (reuse existing function from editor.js)
|
||||
const resolvedSpec = await resolveDatasetReferences(JSON.parse(JSON.stringify(spec)));
|
||||
|
||||
// Clear container
|
||||
previewContainer.innerHTML = '';
|
||||
|
||||
// Render with Vega-Embed
|
||||
await window.vegaEmbed('#chart-builder-preview', resolvedSpec, {
|
||||
actions: false,
|
||||
renderer: 'svg'
|
||||
});
|
||||
|
||||
// Clear error and enable create button
|
||||
if (errorDiv) errorDiv.textContent = '';
|
||||
if (createBtn) createBtn.disabled = false;
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error rendering chart preview:', error);
|
||||
|
||||
// Show error message
|
||||
if (errorDiv) {
|
||||
errorDiv.textContent = error.message || 'Error rendering chart';
|
||||
}
|
||||
|
||||
// Show error in preview
|
||||
previewContainer.innerHTML = `<div class="chart-preview-placeholder" style="color: #d32f2f;">Error: ${error.message || 'Failed to render chart'}</div>`;
|
||||
|
||||
// Disable create button
|
||||
if (createBtn) createBtn.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Create snippet from chart builder
|
||||
async function createSnippetFromBuilder() {
|
||||
if (!window.chartBuilderState) return;
|
||||
|
||||
try {
|
||||
// Generate final spec
|
||||
const spec = generateVegaLiteSpec();
|
||||
if (!spec) return;
|
||||
|
||||
// Create snippet with auto-generated name
|
||||
const snippetName = generateSnippetName();
|
||||
const now = new Date().toISOString();
|
||||
|
||||
const snippet = {
|
||||
id: generateSnippetId(),
|
||||
name: snippetName,
|
||||
created: now,
|
||||
modified: now,
|
||||
spec: spec,
|
||||
draftSpec: null,
|
||||
comment: `Chart built from dataset: ${window.chartBuilderState.datasetName}`,
|
||||
tags: [],
|
||||
datasetRefs: [window.chartBuilderState.datasetName],
|
||||
meta: {}
|
||||
};
|
||||
|
||||
// Save snippet
|
||||
SnippetStorage.saveSnippet(snippet);
|
||||
|
||||
// Close chart builder
|
||||
closeChartBuilder();
|
||||
|
||||
// Close dataset modal if open
|
||||
const datasetModal = document.getElementById('dataset-modal');
|
||||
if (datasetModal) {
|
||||
datasetModal.style.display = 'none';
|
||||
}
|
||||
|
||||
// Select and open the new snippet
|
||||
selectSnippet(snippet.id);
|
||||
|
||||
// Show success message
|
||||
showToast(`Created snippet: ${snippetName}`, 'success');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error creating snippet from builder:', error);
|
||||
showToast('Error creating snippet', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Close chart builder modal
|
||||
// closeChartBuilder - now calls Alpine component's close() method
|
||||
function closeChartBuilder() {
|
||||
const modal = document.getElementById('chart-builder-modal');
|
||||
modal.style.display = 'none';
|
||||
|
||||
// Update URL - go back to dataset view
|
||||
if (window.chartBuilderState && window.chartBuilderState.datasetId) {
|
||||
URLState.update({
|
||||
view: 'datasets',
|
||||
datasetId: window.chartBuilderState.datasetId,
|
||||
action: null
|
||||
});
|
||||
}
|
||||
|
||||
// Clear timeout
|
||||
clearTimeout(previewUpdateTimeout);
|
||||
|
||||
// Clear state
|
||||
window.chartBuilderState = null;
|
||||
|
||||
// Clear preview
|
||||
const previewContainer = document.getElementById('chart-builder-preview');
|
||||
if (previewContainer) {
|
||||
previewContainer.innerHTML = '<div class="chart-preview-placeholder">Configure chart to see preview</div>';
|
||||
}
|
||||
|
||||
// Clear error
|
||||
const errorDiv = document.getElementById('chart-builder-error');
|
||||
if (errorDiv) {
|
||||
errorDiv.textContent = '';
|
||||
}
|
||||
|
||||
// Reset create button
|
||||
const createBtn = document.getElementById('chart-builder-create-btn');
|
||||
if (createBtn) {
|
||||
createBtn.disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize chart builder event listeners
|
||||
function initializeChartBuilder() {
|
||||
// Close button
|
||||
const closeBtn = document.getElementById('chart-builder-modal-close');
|
||||
if (closeBtn) {
|
||||
closeBtn.addEventListener('click', closeChartBuilder);
|
||||
}
|
||||
|
||||
// Cancel button
|
||||
const cancelBtn = document.getElementById('chart-builder-cancel-btn');
|
||||
if (cancelBtn) {
|
||||
cancelBtn.addEventListener('click', closeChartBuilder);
|
||||
}
|
||||
|
||||
// Back button
|
||||
const backBtn = document.getElementById('chart-builder-back-btn');
|
||||
if (backBtn) {
|
||||
backBtn.addEventListener('click', () => {
|
||||
closeChartBuilder();
|
||||
// Dataset modal should still be open
|
||||
});
|
||||
}
|
||||
|
||||
// Create snippet button
|
||||
const createBtn = document.getElementById('chart-builder-create-btn');
|
||||
if (createBtn) {
|
||||
createBtn.addEventListener('click', createSnippetFromBuilder);
|
||||
}
|
||||
|
||||
// Mark type toggle buttons
|
||||
const markButtons = document.querySelectorAll('.mark-toggle-group .btn-toggle');
|
||||
markButtons.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
setActiveToggle(markButtons, btn);
|
||||
|
||||
if (window.chartBuilderState) {
|
||||
window.chartBuilderState.spec.mark.type = btn.dataset.mark;
|
||||
updateChartBuilderPreview();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Encoding field dropdowns
|
||||
const encodings = ['x', 'y', 'color', 'size'];
|
||||
encodings.forEach(encoding => {
|
||||
const select = document.getElementById(`encoding-${encoding}-field`);
|
||||
if (select) {
|
||||
select.addEventListener('change', async (e) => {
|
||||
const field = e.target.value;
|
||||
|
||||
if (!window.chartBuilderState) return;
|
||||
|
||||
if (field) {
|
||||
// Try to get active type button, or auto-detect from dataset
|
||||
const activeTypeBtn = document.querySelector(`[data-encoding="${encoding}"][data-type].active`);
|
||||
let type = activeTypeBtn ? activeTypeBtn.dataset.type : 'nominal';
|
||||
|
||||
// If no active type button, auto-detect from column type
|
||||
if (!activeTypeBtn && window.chartBuilderState.datasetId) {
|
||||
const dataset = await DatasetStorage.getDataset(window.chartBuilderState.datasetId);
|
||||
const columnTypes = dataset.columnTypes || [];
|
||||
const colType = columnTypes.find(ct => ct.name === field);
|
||||
if (colType) {
|
||||
type = mapColumnTypeToVegaType(colType.type);
|
||||
}
|
||||
}
|
||||
|
||||
setEncoding(encoding, field, type);
|
||||
} else {
|
||||
// Remove encoding when "None" is selected
|
||||
setEncoding(encoding, '', '');
|
||||
}
|
||||
|
||||
updateChartBuilderPreview();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Encoding type toggle buttons
|
||||
const typeButtons = document.querySelectorAll('.type-toggle-group .btn-toggle');
|
||||
typeButtons.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const encoding = btn.dataset.encoding;
|
||||
const type = btn.dataset.type;
|
||||
|
||||
// Update active state for this encoding's buttons
|
||||
const encodingButtons = document.querySelectorAll(`[data-encoding="${encoding}"][data-type]`);
|
||||
setActiveToggle(encodingButtons, btn);
|
||||
|
||||
// Update state
|
||||
if (window.chartBuilderState && window.chartBuilderState.spec.encoding[encoding]) {
|
||||
window.chartBuilderState.spec.encoding[encoding].type = type;
|
||||
updateChartBuilderPreview();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Dimension inputs
|
||||
const widthInput = document.getElementById('chart-width');
|
||||
const heightInput = document.getElementById('chart-height');
|
||||
|
||||
if (widthInput) {
|
||||
widthInput.addEventListener('input', () => {
|
||||
updateChartBuilderPreview();
|
||||
});
|
||||
}
|
||||
|
||||
if (heightInput) {
|
||||
heightInput.addEventListener('input', () => {
|
||||
updateChartBuilderPreview();
|
||||
});
|
||||
const chartBuilderView = document.getElementById('chart-builder-view');
|
||||
if (chartBuilderView && chartBuilderView._x_dataStack) {
|
||||
const component = chartBuilderView._x_dataStack[0];
|
||||
component.close();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user