pretix-map 0.1.5__tar.gz → 0.1.7__tar.gz

{pretix_map-0.1.5/pretix_map.egg-info → pretix_map-0.1.7}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: pretix-map
-Version: 0.1.5
+Version: 0.1.7
 Summary: An overview map of the catchment area of previous orders. Measured by postcode
 Author-email: MarkenJaden <jjsch1410@gmail.com>
 Maintainer-email: MarkenJaden <jjsch1410@gmail.com>

{pretix_map-0.1.5 → pretix_map-0.1.7/pretix_map.egg-info}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: pretix-map
-Version: 0.1.5
+Version: 0.1.7
 Summary: An overview map of the catchment area of previous orders. Measured by postcode
 Author-email: MarkenJaden <jjsch1410@gmail.com>
 Maintainer-email: MarkenJaden <jjsch1410@gmail.com>

pretix_map-0.1.7/pretix_mapplugin/__init__.py

@@ -0,0 +1 @@
+__version__ = "0.1.7"

pretix_map-0.1.7/pretix_mapplugin/static/pretix_mapplugin/css/salesmap.css

@@ -0,0 +1,101 @@
+.plugin-map-content-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 100px);
+    min-height: 450px;
+}
+
+.plugin-map-content-wrapper h1,
+.plugin-map-content-wrapper .form-group {
+    flex-shrink: 0;
+    margin-bottom: 1em;
+}
+
+.map-wrapper {
+    flex-grow: 1;
+    position: relative;
+    min-height: 0;
+    border: 1px solid #ccc;
+    display: flex;
+    flex-direction: column;
+}
+
+#sales-map-container {
+    height: 100%;
+    width: 100%;
+    display: block;
+    position: relative;
+}
+
+/* Side-by-side comparison styles */
+.map-split-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    flex-grow: 1;
+    min-height: 500px;
+}
+
+#sales-map-compare-container {
+    width: 50%;
+    height: 100%;
+    border-left: 2px solid #fff;
+    display: none;
+}
+
+.map-split-active #sales-map-container {
+    width: 50% !important;
+}
+
+.map-split-active #sales-map-compare-container {
+    display: block;
+}
+
+.map-label-overlay {
+    position: absolute;
+    top: 10px;
+    left: 50px;
+    z-index: 1000;
+    background: rgba(255, 255, 255, 0.8);
+    padding: 2px 8px;
+    border-radius: 4px;
+    pointer-events: none;
+    font-weight: bold;
+    border: 1px solid #ccc;
+}
+
+#timeline-chart-container {
+    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.timeline-milestone-marker:hover span {
+    background: rgba(255, 255, 255, 1) !important;
+    z-index: 10;
+    border: 1px solid #ccc;
+}
+
+#map-status-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#map-status-overlay p {
+    padding: 1em;
+    background: #fff;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+#heatmap-options-panel input[type=range] {
+    width: 100%;
+    display: block;
+}
+
+#map-status-overlay p.text-danger {
+    color: #a94442;
+    background-color: #f2dede;
+    border-color: #ebccd1;
+}

{pretix_map-0.1.5 → pretix_map-0.1.7}/pretix_mapplugin/static/pretix_mapplugin/js/salesmap.js

@@ -1,5 +1,5 @@
 document.addEventListener('DOMContentLoaded', function () {
-    console.log("Sales Map JS Loaded (Charts, CSP Fix, Toggle Mode Fix)");
+    console.log("Sales Map JS Loaded (Charts, CSP Fix, Toggle Mode Fix, Split-View)");
 
     // --- Leaflet Setup ---
     try {
@@ -40,23 +40,38 @@ document.addEventListener('DOMContentLoaded', function () {
         filterCheckboxes: document.getElementById('filter-checkboxes'),
         radiusIn: document.getElementById('heatmap-radius'),
         blurIn: document.getElementById('heatmap-blur'),
-        maxZoomIn: document.getElementById('heatmap-maxZoom'), // NEW
+        maxZoomIn: document.getElementById('heatmap-maxZoom'),
         radiusVal: document.getElementById('radius-value'),
         blurVal: document.getElementById('blur-value'),
-        maxZoomVal: document.getElementById('maxzoom-value'), // NEW
+        maxZoomVal: document.getElementById('maxzoom-value'),
+        gridSizeSlider: document.getElementById('grid-size-slider'),
+        gridSizeVal: document.getElementById('grid-size-value'),
+        heatmapControls: document.getElementById('heatmap-only-controls'),
+        gridControls: document.getElementById('grid-only-controls'),
+        mapSplitRoot: document.getElementById('map-split-root'),
+        compareMapContainer: document.getElementById('sales-map-compare-container'),
+        compareLabel: document.getElementById('compare-map-label'),
+        mainLabel: document.getElementById('main-map-label'),
         heatmapReset: document.getElementById('heatmap-reset-btn'),
         timeSlider: document.getElementById('timeline-slider'),
         timeDisplay: document.getElementById('timeline-date-display'),
         timePlayBtn: document.getElementById('timeline-play-btn'),
         timeCount: document.getElementById('timeline-count-display'),
-        intervalSelect: document.getElementById('timeline-interval-select')
+        intervalSelect: document.getElementById('timeline-interval-select'),
+        timelineChart: document.getElementById('timeline-volume-chart'),
+        timelineMarkers: document.getElementById('timeline-milestone-markers'),
+        itemAvailContainer: document.getElementById('timeline-item-availability'),
+        itemAvailList: document.getElementById('item-availability-list')
     };
 
     // --- State ---
-    let map = null, allData = [], filteredData = [], displayData = [], milestones = [], currency = "EUR";
+    let map = null, mapCompare = null, allData = [], filteredData = [], displayData = [], milestones = [], currency = "EUR";
+    let itemAvailData = {};
+    let compareData = [], compareFilteredData = [], compareDisplayData = [];
     let pinLayer = null, heatmapLayer = null, gridLayer = null, comparisonLayer = null, eventMarkerLayer = null;
+    let pinLayerComp = null, heatmapLayerComp = null, gridLayerComp = null, eventMarkerLayerComp = null;
     let currentView = 'pins', isClustering = true, isWeighted = false, showCanceled = false;
-    let isPlaying = false, playInterval = null;
+    let isPlaying = false, playInterval = null, currentCompareSlug = "";
     let availableItems = new Set(), selectedItems = new Set();
     let currentDisplayMode = 'map'; // map | list | stats
     let charts = {};
@@ -73,8 +88,26 @@ document.addEventListener('DOMContentLoaded', function () {
     function init() {
         if (!sel.map) return;
         const dataUrl = sel.map.dataset.dataUrl;
+        
         map = L.map('sales-map-container').setView([48.85, 2.35], 5);
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map);
+        
+        mapCompare = L.map('sales-map-compare-container', { zoomControl: false }).setView([48.85, 2.35], 5);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(mapCompare);
+
+        // Synchronize maps
+        let isSyncing = false;
+        const sync = (src, dest) => {
+            if (isSyncing) return;
+            isSyncing = true;
+            dest.setView(src.getCenter(), src.getZoom(), { animate: false });
+            isSyncing = false;
+        };
+        map.on('move', () => sync(map, mapCompare));
+        mapCompare.on('move', () => sync(mapCompare, map));
+        map.on('zoomend', () => sync(map, mapCompare));
+        mapCompare.on('zoomend', () => sync(mapCompare, map));
+
         setupControls();
         fetchData(dataUrl);
     }
@@ -85,6 +118,7 @@ document.addEventListener('DOMContentLoaded', function () {
             if (data.error) throw new Error(data.error);
             allData = (data.locations || []).map(loc => { loc.ts = loc.date ? new Date(loc.date).getTime() : 0; return loc; }).sort((a, b) => a.ts - b.ts);
             milestones = (data.milestones || []).map(m => { m.ts = new Date(m.date).getTime(); return m; });
+            itemAvailData = data.item_availability || {};
             currency = (data.stats && data.stats.currency) ? data.stats.currency : "EUR";
             
             extractItems(); buildFilterUI(); initTimeline(); applyFilters();
@@ -123,15 +157,17 @@ document.addEventListener('DOMContentLoaded', function () {
                     radius: parseInt(sel.radiusIn.value), 
                     blur: parseInt(sel.blurIn.value),
                     maxZoom: parseInt(sel.maxZoomIn.value),
-                    minOpacity: 0.4 // Improved visibility
+                    minOpacity: 0.4
                 });
             }
         };
         [sel.radiusIn, sel.blurIn, sel.maxZoomIn].forEach(i => i.oninput = updateHeat);
         sel.heatmapReset.onclick = () => { 
             sel.radiusIn.value = 25; sel.blurIn.value = 15; sel.maxZoomIn.value = 18; 
+            sel.gridSizeSlider.value = 70;
             updateHeat(); 
         };
+        sel.gridSizeSlider.oninput = () => refreshLayers();
     }
 
     function switchDisplayMode(mode) {
@@ -185,7 +221,6 @@ document.addEventListener('DOMContentLoaded', function () {
         });
     }
 
-    // --- Timeline Logik ---
     function initTimeline() {
         if (!sel.timeSlider) return;
         updateTimelineSlider();
@@ -207,9 +242,179 @@ document.addEventListener('DOMContentLoaded', function () {
         const steps = Array.from(uniqueKeys).sort((a, b) => a - b);
         sel.timeSlider.min = 0; sel.timeSlider.max = steps.length - 1; sel.timeSlider.value = steps.length - 1;
         sel.timeSlider._steps = steps;
+        
+        renderTimelineVolumeChart(steps);
+        renderMilestoneMarkers(steps);
+        renderItemAvailability(steps);
         updateTimelineDisplay();
     }
 
+    function renderItemAvailability(steps) {
+        if (!sel.itemAvailList || !steps || steps.length === 0) return;
+        sel.itemAvailList.innerHTML = '';
+        sel.itemAvailContainer.style.display = 'block';
+        
+        const minTs = steps[0];
+        const maxTs = steps[steps.length - 1];
+        const range = maxTs - minTs;
+
+        Object.keys(itemAvailData).forEach(itemName => {
+            const d = itemAvailData[itemName];
+            const firstTs = d.first_sale ? new Date(d.first_sale).getTime() : null;
+            const lastTs = d.last_sale ? new Date(d.last_sale).getTime() : null;
+            const availFrom = d.available_from ? new Date(d.available_from).getTime() : null;
+            const availUntil = d.available_until ? new Date(d.available_until).getTime() : null;
+
+            if (!firstTs && !availFrom) return;
+
+            const row = document.createElement('div');
+            row.style.height = '14px';
+            row.style.marginBottom = '2px';
+            row.style.position = 'relative';
+            row.style.width = '100%';
+            row.style.display = 'flex';
+            row.style.alignItems = 'center';
+
+            const label = document.createElement('div');
+            label.textContent = itemName;
+            label.style.width = '120px';
+            label.style.overflow = 'hidden';
+            label.style.textOverflow = 'ellipsis';
+            label.style.whiteSpace = 'nowrap';
+            label.style.marginRight = '5px';
+            row.appendChild(label);
+
+            const barContainer = document.createElement('div');
+            barContainer.style.flexGrow = '1';
+            barContainer.style.height = '8px';
+            barContainer.style.background = '#f9f9f9';
+            barContainer.style.position = 'relative';
+            barContainer.style.borderRadius = '4px';
+            row.appendChild(barContainer);
+
+            // Planned availability (light grey bar)
+            if (availFrom || availUntil) {
+                const start = availFrom ? Math.max(availFrom, minTs) : minTs;
+                const end = availUntil ? Math.min(availUntil, maxTs) : maxTs;
+                if (start < end) {
+                    const left = ((start - minTs) / range) * 100;
+                    const width = ((end - start) / range) * 100;
+                    const bar = document.createElement('div');
+                    bar.style.position = 'absolute';
+                    bar.style.left = `${left}%`;
+                    bar.style.width = `${width}%`;
+                    bar.style.height = '100%';
+                    bar.style.background = '#eee';
+                    bar.style.borderRadius = '4px';
+                    bar.title = `${itemName} (Configured Availability)`;
+                    barContainer.appendChild(bar);
+                }
+            }
+
+            // Actual sales period (blue bar)
+            if (firstTs && lastTs) {
+                const start = Math.max(firstTs, minTs);
+                const end = Math.min(lastTs, maxTs);
+                if (start <= end) {
+                    const left = ((start - minTs) / range) * 100;
+                    const width = Math.max(((end - start) / range) * 100, 0.5); // Min width for visibility
+                    const bar = document.createElement('div');
+                    bar.style.position = 'absolute';
+                    bar.style.left = `${left}%`;
+                    bar.style.width = `${width}%`;
+                    bar.style.height = '100%';
+                    bar.style.background = 'rgba(54, 162, 235, 0.6)';
+                    bar.style.borderRadius = '4px';
+                    bar.style.zIndex = '1';
+                    bar.title = `${itemName} (Actual Sales)`;
+                    barContainer.appendChild(bar);
+                }
+            }
+
+            sel.itemAvailList.appendChild(row);
+        });
+    }
+
+    function renderTimelineVolumeChart(steps) {
+        if (!sel.timelineChart) return;
+        const ctx = sel.timelineChart.getContext('2d');
+        if (charts.timeline) charts.timeline.destroy();
+
+        // Calculate counts per step from filteredData
+        const stepCounts = steps.map(ts => {
+            const nextTsIndex = steps.indexOf(ts) + 1;
+            const nextTs = nextTsIndex < steps.length ? steps[nextTsIndex] : Infinity;
+            return filteredData.filter(d => d.ts >= ts && d.ts < nextTs).length;
+        });
+
+        charts.timeline = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: steps.map(ts => new Date(ts).toLocaleDateString()),
+                datasets: [{
+                    data: stepCounts,
+                    backgroundColor: 'rgba(54, 162, 235, 0.4)',
+                    borderWidth: 0,
+                    barPercentage: 1.0,
+                    categoryPercentage: 1.0
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: { legend: { display: false }, tooltip: { enabled: false } },
+                scales: {
+                    x: { display: false },
+                    y: { display: false, beginAtZero: true }
+                }
+            }
+        });
+    }
+
+    function renderMilestoneMarkers(steps) {
+        if (!sel.timelineMarkers || !steps || steps.length === 0) return;
+        sel.timelineMarkers.innerHTML = '';
+        
+        milestones.forEach(m => {
+            // Find closest step index
+            let closestIdx = -1;
+            let minDiff = Infinity;
+            steps.forEach((ts, idx) => {
+                const diff = Math.abs(ts - m.ts);
+                if (diff < minDiff) {
+                    minDiff = diff;
+                    closestIdx = idx;
+                }
+            });
+
+            if (closestIdx !== -1 && minDiff < 86400000 * 2) { // Only show if close enough (2 days)
+                const percent = (closestIdx / (steps.length - 1)) * 100;
+                const marker = document.createElement('div');
+                marker.className = 'timeline-milestone-marker';
+                marker.style.position = 'absolute';
+                marker.style.left = `${percent}%`;
+                marker.style.top = '0';
+                marker.style.width = '2px';
+                marker.style.height = '100%';
+                marker.style.background = '#d9534f';
+                marker.style.zIndex = '2';
+                
+                const label = document.createElement('span');
+                label.textContent = m.label;
+                label.style.position = 'absolute';
+                label.style.top = '2px';
+                label.style.left = '4px';
+                label.style.fontSize = '9px';
+                label.style.whiteSpace = 'nowrap';
+                label.style.background = 'rgba(255,255,255,0.7)';
+                label.style.padding = '0 2px';
+                
+                marker.appendChild(label);
+                sel.timelineMarkers.appendChild(marker);
+            }
+        });
+    }
+
     function updateTimelineDisplay() {
         const steps = sel.timeSlider._steps;
         if (!steps) return;
@@ -217,7 +422,12 @@ document.addEventListener('DOMContentLoaded', function () {
         const dateObj = new Date(currentTs);
         const activeMilestone = milestones.find(m => new Date(m.date).toDateString() === dateObj.toDateString());
         sel.timeDisplay.innerHTML = dateObj.toLocaleDateString() + (activeMilestone ? ` — <strong>★ ${activeMilestone.label}</strong>` : "");
+        
         displayData = filteredData.filter(d => d.ts === 0 || d.ts <= currentTs);
+        if (compareFilteredData.length > 0) {
+            compareDisplayData = compareFilteredData.filter(d => d.ts === 0 || d.ts <= currentTs);
+        }
+        
         if (sel.timeCount) sel.timeCount.textContent = displayData.length;
         refreshLayers();
     }
@@ -238,13 +448,38 @@ document.addEventListener('DOMContentLoaded', function () {
     function refreshLayers() {
         if (!map) return;
         [pinLayer, heatmapLayer, gridLayer].forEach(l => { if (l && map.hasLayer(l)) map.removeLayer(l); });
+        if (mapCompare) {
+            [pinLayerComp, heatmapLayerComp, gridLayerComp, eventMarkerLayerComp].forEach(l => { if (l && mapCompare.hasLayer(l)) mapCompare.removeLayer(l); });
+        }
+        if (comparisonLayer && map.hasLayer(comparisonLayer)) map.removeLayer(comparisonLayer);
+
+        const isSplitNeeded = currentCompareSlug && (currentView === 'heatmap' || currentView === 'grid');
+        if (isSplitNeeded) {
+            sel.mapSplitRoot.classList.add('map-split-active');
+            sel.mainLabel.style.display = 'block';
+            sel.compareMapContainer.style.display = 'block';
+            setTimeout(() => { map.invalidateSize(); mapCompare.invalidateSize(); }, 50);
+        } else {
+            sel.mapSplitRoot.classList.remove('map-split-active');
+            sel.mainLabel.style.display = 'none';
+            sel.compareMapContainer.style.display = 'none';
+            setTimeout(() => { map.invalidateSize(); }, 50);
+        }
+
         createPinLayer(); createHeatmapLayer(); createGridLayer();
+        if (isSplitNeeded) {
+            createPinLayer(true); createHeatmapLayer(true); createGridLayer(true);
+        } else if (currentCompareSlug && currentView === 'pins') {
+            const dots = compareData.map(l => l.lat ? L.circleMarker([l.lat, l.lon], { radius: 4, color: '#888', fillOpacity: 0.5 }).bindTooltip("Comparison") : null).filter(l => l);
+            comparisonLayer = L.layerGroup(dots);
+        }
         showCurrentView();
     }
 
-    function createPinLayer() {
-        if (displayData.length === 0) { pinLayer = null; return; }
-        const markers = displayData.map(loc => {
+    function createPinLayer(isCompare = false) {
+        const data = isCompare ? compareDisplayData : displayData;
+        if (data.length === 0) { if(isCompare) pinLayerComp = null; else pinLayer = null; return; }
+        const markers = data.map(loc => {
             if (loc.lat == null) return null;
             let icon = icons.blue;
             if (loc.status === 'pending') icon = icons.orange;
@@ -254,25 +489,32 @@ document.addEventListener('DOMContentLoaded', function () {
             if (loc.order_url) m.on('click', () => window.open(loc.order_url, '_blank'));
             return m;
         }).filter(m => m !== null);
-        pinLayer = isClustering ? L.markerClusterGroup().addLayers(markers) : L.layerGroup(markers);
+        const layer = isClustering ? L.markerClusterGroup().addLayers(markers) : L.layerGroup(markers);
+        if (isCompare) pinLayerComp = layer; else pinLayer = layer;
     }
 
-    function createHeatmapLayer() {
-        if (displayData.length === 0) { heatmapLayer = null; return; }
-        let maxRev = Math.max(...displayData.map(d => d.revenue || 0), 1);
-        const points = displayData.map(l => [l.lat, l.lon, isWeighted ? (l.revenue || 0) / maxRev : 1.0]);
-        heatmapLayer = L.heatLayer(points, { 
+    function createHeatmapLayer(isCompare = false) {
+        const data = isCompare ? compareDisplayData : displayData;
+        if (data.length === 0) { if(isCompare) heatmapLayerComp = null; else heatmapLayer = null; return; }
+        let maxRev = Math.max(...data.map(d => d.revenue || 0), 1);
+        const points = data.map(l => [l.lat, l.lon, isWeighted ? (l.revenue || 0) / maxRev : 1.0]);
+        const layer = L.heatLayer(points, { 
             radius: parseInt(sel.radiusIn.value), 
             blur: parseInt(sel.blurIn.value),
             maxZoom: parseInt(sel.maxZoomIn.value),
             minOpacity: 0.4
         });
+        if (isCompare) heatmapLayerComp = layer; else heatmapLayer = layer;
     }
 
-    function createGridLayer() {
-        if (displayData.length === 0) { gridLayer = null; return; }
-        const gridSize = 0.4, bins = {}; let maxVal = 0;
-        displayData.forEach(l => {
+    function createGridLayer(isCompare = false) {
+        const data = isCompare ? compareDisplayData : displayData;
+        if (data.length === 0) { if(isCompare) gridLayerComp = null; else gridLayer = null; return; }
+        const rawVal = parseInt(sel.gridSizeSlider.value);
+        const gridSize = 0.4 * Math.pow(rawVal / 100, 2); 
+        sel.gridSizeVal.textContent = gridSize.toFixed(3);
+        const bins = {}; let maxVal = 0;
+        data.forEach(l => {
             if (l.lat == null) return;
             const key = `${Math.floor(l.lat/gridSize)},${Math.floor(l.lon/gridSize)}`;
             if (!bins[key]) bins[key] = { count: 0, revenue: 0, lat: Math.floor(l.lat/gridSize)*gridSize, lon: Math.floor(l.lon/gridSize)*gridSize };
@@ -284,32 +526,57 @@ document.addEventListener('DOMContentLoaded', function () {
             const i = (isWeighted ? bin.revenue : bin.count) / maxVal;
             return L.rectangle([[bin.lat, bin.lon], [bin.lat+gridSize, bin.lon+gridSize]], { color: 'transparent', fillColor: isWeighted ? 'green' : 'blue', fillOpacity: 0.2 + (i*0.6) }).bindTooltip(isWeighted ? `Revenue: ${bin.revenue.toFixed(2)}` : `Count: ${bin.count}`);
         });
-        gridLayer = L.layerGroup(rects);
+        const layer = L.layerGroup(rects);
+        if (isCompare) gridLayerComp = layer; else gridLayer = layer;
     }
 
     function showCurrentView() {
         if (!map) return;
-        [pinLayer, heatmapLayer, gridLayer].forEach(l => { if (l && map.hasLayer(l)) map.removeLayer(l); });
         if (currentView === 'pins' && pinLayer) map.addLayer(pinLayer);
         else if (currentView === 'heatmap' && heatmapLayer) map.addLayer(heatmapLayer);
         else if (currentView === 'grid' && gridLayer) map.addLayer(gridLayer);
-        sel.heatmapPanel.style.display = (currentView === 'heatmap' ? 'block' : 'none');
+        
+        sel.heatmapPanel.style.display = (currentView === 'heatmap' || currentView === 'grid' ? 'block' : 'none');
+        sel.heatmapControls.style.display = (currentView === 'heatmap' ? 'block' : 'none');
+        sel.gridControls.style.display = (currentView === 'grid' ? 'block' : 'none');
+        
         if (sel.clusterToggle) sel.clusterToggle.style.display = (currentView === 'pins' ? 'inline-block' : 'none');
         if (eventMarkerLayer) map.addLayer(eventMarkerLayer);
-        if (comparisonLayer) map.addLayer(comparisonLayer);
+        if (comparisonLayer && currentView === 'pins') map.addLayer(comparisonLayer);
+
+        if (mapCompare && sel.mapSplitRoot.classList.contains('map-split-active')) {
+            if (currentView === 'pins' && pinLayerComp) mapCompare.addLayer(pinLayerComp);
+            else if (currentView === 'heatmap' && heatmapLayerComp) mapCompare.addLayer(heatmapLayerComp);
+            else if (currentView === 'grid' && gridLayerComp) mapCompare.addLayer(gridLayerComp);
+            if (eventMarkerLayerComp) mapCompare.addLayer(eventMarkerLayerComp);
+        }
     }
 
-    function renderEventMarker(em) {
-        if (eventMarkerLayer) map.removeLayer(eventMarkerLayer);
-        eventMarkerLayer = L.marker([em.lat, em.lon], { icon: icons.red, zIndexOffset: 2000 }).bindTooltip(`<strong>EVENT: ${em.name}</strong><br>${em.location}`).addTo(map);
+    function renderEventMarker(em, isCompare = false) {
+        const layer = L.marker([em.lat, em.lon], { icon: icons.red, zIndexOffset: 2000 }).bindTooltip(`<strong>EVENT: ${em.name}</strong><br>${em.location}`);
+        if (isCompare) {
+            if (eventMarkerLayerComp && mapCompare.hasLayer(eventMarkerLayerComp)) mapCompare.removeLayer(eventMarkerLayerComp);
+            eventMarkerLayerComp = layer.addTo(mapCompare);
+        } else {
+            if (eventMarkerLayer && map.hasLayer(eventMarkerLayer)) map.removeLayer(eventMarkerLayer);
+            eventMarkerLayer = layer.addTo(map);
+        }
     }
 
     function loadComparison(slug) {
-        if (!slug) { if (comparisonLayer) map.removeLayer(comparisonLayer); return; }
+        currentCompareSlug = slug;
+        if (!slug) { 
+            compareData = []; compareFilteredData = []; compareDisplayData = [];
+            sel.compareLabel.textContent = "";
+            refreshLayers(); return; 
+        }
+        const option = sel.compareSelect.options[sel.compareSelect.selectedIndex];
+        sel.compareLabel.textContent = option.text;
         const newUrl = sel.map.dataset.dataUrl.replace(/\/event\/([^\/]+)\/([^\/]+)\//, `/event/$1/${slug}/`);
         fetch(newUrl).then(r => r.json()).then(data => {
-            if (comparisonLayer) map.removeLayer(comparisonLayer);
-            comparisonLayer = L.layerGroup((data.locations || []).map(l => l.lat ? L.circleMarker([l.lat, l.lon], { radius: 4, color: '#888', fillOpacity: 0.5 }) : null).filter(l => l)).addTo(map);
+            compareData = (data.locations || []).map(loc => { loc.ts = loc.date ? new Date(loc.date).getTime() : 0; return loc; }).sort((a, b) => a.ts - b.ts);
+            if (data.event_marker) renderEventMarker(data.event_marker, true);
+            applyFilters();
         });
     }
 
@@ -325,7 +592,9 @@ document.addEventListener('DOMContentLoaded', function () {
     }
     function applyFilters() {
         showCanceled = sel.showCanceledCheck.checked;
-        filteredData = allData.filter(loc => (loc.items.length === 0 || loc.items.some(i => selectedItems.has(i))) && (showCanceled || loc.status !== 'canceled'));
+        const filterFn = loc => (loc.items.length === 0 || loc.items.some(i => selectedItems.has(i))) && (showCanceled || loc.status !== 'canceled');
+        filteredData = allData.filter(filterFn);
+        if (compareData.length > 0) compareFilteredData = compareData.filter(filterFn);
         updateTimelineSlider();
     }
 
@@ -339,4 +608,4 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     init();
-});
+});

{pretix_map-0.1.5 → pretix_map-0.1.7}/pretix_mapplugin/templates/pretix_mapplugin/map_page.html

@@ -52,7 +52,9 @@
                     <div class="form-group">
                         <form action="{% url 'plugins:pretix_mapplugin:event.settings.salesmap.trigger' organizer=request.organizer.slug event=request.event.slug %}" method="post" style="display: inline-block;">
                             {% csrf_token %}
-                            <button type="submit" class="btn btn-warning" title="{% trans "Trigger Geocoding" %}"><i class="fa fa-refresh"></i></button>
+                            <button type="submit" class="btn btn-warning">
+                                <i class="fa fa-refresh"></i> {% trans "Geocode all" %}
+                            </button>
                         </form>
                     </div>
                 {% endif %}
@@ -60,13 +62,22 @@
             
             <div id="heatmap-options-panel" class="panel panel-default" style="display: none; padding: 10px; min-width: 300px;">
                 <div style="display: flex; justify-content: space-between;">
-                     <h5 style="margin: 0;">Heatmap</h5>
+                     <h5 style="margin: 0;">{% trans "View Options" %}</h5>
                      <button id="heatmap-reset-btn" class="btn btn-xs btn-link">Reset</button>
                 </div>
                 <div class="form-horizontal" style="margin-top: 5px;">
-                    <div class="form-group form-group-sm"><label class="col-sm-4">Radius</label><div class="col-sm-6"><input type="range" id="heatmap-radius" min="1" max="100" value="25"></div><div class="col-sm-2"><span id="radius-value">25</span></div></div>
-                    <div class="form-group form-group-sm"><label class="col-sm-4">Blur</label><div class="col-sm-6"><input type="range" id="heatmap-blur" min="1" max="50" value="15"></div><div class="col-sm-2"><span id="blur-value">15</span></div></div>
-                    <div class="form-group form-group-sm"><label class="col-sm-4">Max Zoom</label><div class="col-sm-6"><input type="range" id="heatmap-maxZoom" min="1" max="18" value="18"></div><div class="col-sm-2"><span id="maxzoom-value">18</span></div></div>
+                    <div id="heatmap-only-controls">
+                        <div class="form-group form-group-sm"><label class="col-sm-4">Radius</label><div class="col-sm-6"><input type="range" id="heatmap-radius" min="1" max="100" value="25"></div><div class="col-sm-2"><span id="radius-value">25</span></div></div>
+                        <div class="form-group form-group-sm"><label class="col-sm-4">Blur</label><div class="col-sm-6"><input type="range" id="heatmap-blur" min="1" max="50" value="15"></div><div class="col-sm-2"><span id="blur-value">15</span></div></div>
+                        <div class="form-group form-group-sm"><label class="col-sm-4">Max Zoom</label><div class="col-sm-6"><input type="range" id="heatmap-maxZoom" min="1" max="18" value="18"></div><div class="col-sm-2"><span id="maxzoom-value">18</span></div></div>
+                    </div>
+                    <div id="grid-only-controls" style="display: none;">
+                        <div class="form-group form-group-sm">
+                            <label class="col-sm-4">{% trans "Resolution" %}</label>
+                            <div class="col-sm-6"><input type="range" id="grid-size-slider" min="1" max="100" value="70"></div>
+                            <div class="col-sm-2"><span id="grid-size-value">0.12</span></div>
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -76,11 +87,28 @@
             </div>
         </div>
 
-        <div class="map-wrapper" style="position: relative; border: 1px solid #ccc; flex-grow: 1; display: flex; flex-direction: column; min-height: 500px;">
-            <div id="sales-map-container" style="flex-grow: 1; min-height: 500px;" data-data-url="{% url 'plugins:pretix_mapplugin:event.settings.salesmap.data' organizer=request.organizer.slug event=request.event.slug %}"></div>
+        <div class="map-wrapper">
+            <div id="map-split-root" class="map-split-container">
+                <div id="sales-map-container" style="min-height: 500px;" data-data-url="{% url 'plugins:pretix_mapplugin:event.settings.salesmap.data' organizer=request.organizer.slug event=request.event.slug %}">
+                    <div class="map-label-overlay" id="main-map-label" style="display: none;">{{ request.event.name }}</div>
+                </div>
+                <div id="sales-map-compare-container" style="min-height: 500px;">
+                    <div class="map-label-overlay" id="compare-map-label"></div>
+                </div>
+            </div>
             
             <div id="failed-orders-container" style="display: none; padding: 20px; background: white; flex-grow: 1; overflow-y: auto;">
-                <h3>{% trans "Orders with missing geodata" %}</h3>
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
+                    <h3 style="margin: 0;">{% trans "Orders with missing geodata" %}</h3>
+                    {% if "can_change_event_settings" in request.eventperm %}
+                        <form action="{% url 'plugins:pretix_mapplugin:event.settings.salesmap.trigger' organizer=request.organizer.slug event=request.event.slug %}" method="post">
+                            {% csrf_token %}
+                            <button type="submit" class="btn btn-warning">
+                                <i class="fa fa-refresh"></i> {% trans "Retry all geocoding" %}
+                            </button>
+                        </form>
+                    {% endif %}
+                </div>
                 <table class="table table-hover">
                     <thead><tr><th>Code</th><th>Address</th><th>Action</th></tr></thead>
                     <tbody id="failed-orders-tbody"></tbody>
@@ -123,8 +151,8 @@
             </div>
         </div>
 
-        <div id="timeline-controls" style="margin-top: 10px; padding: 10px; background: #f5f5f5; border-radius: 4px; border: 1px solid #ddd;">
-            <div style="display: flex; justify-content: space-between; align-items: center;">
+        <div id="timeline-controls" style="margin-top: 10px; padding: 10px; background: #f5f5f5; border-radius: 4px; border: 1px solid #ddd; position: relative;">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px;">
                 <div>
                     <label style="margin-bottom: 0;">{% trans "Timeline:" %} <span id="timeline-date-display" style="font-weight: normal;"></span></label>
                     <span id="timeline-count-display" class="badge"></span>
@@ -138,9 +166,16 @@
                     </select>
                 </div>
             </div>
-            <div style="display: flex; gap: 10px; align-items: center; margin-top: 5px;">
+            <div id="timeline-chart-container" style="position: relative; height: 40px; margin-bottom: 5px; background: white; border: 1px solid #eee; overflow: hidden;">
+                <canvas id="timeline-volume-chart" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></canvas>
+                <div id="timeline-milestone-markers" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;"></div>
+            </div>
+            <div id="timeline-item-availability" style="margin-bottom: 10px; font-size: 10px; max-height: 100px; overflow-y: auto; background: white; border: 1px solid #eee; display: none;">
+                <div id="item-availability-list" style="padding: 5px; position: relative;"></div>
+            </div>
+            <div style="display: flex; gap: 10px; align-items: center;">
                 <button id="timeline-play-btn" class="btn btn-sm btn-default"><i class="fa fa-play"></i> Play</button>
-                <input type="range" id="timeline-slider" min="0" max="100" value="100" style="flex-grow: 1; cursor: pointer;">
+                <input type="range" id="timeline-slider" min="0" max="100" value="100" style="flex-grow: 1; cursor: pointer; position: relative; z-index: 5;">
             </div>
         </div>
     </div>

{pretix_map-0.1.5 → pretix_map-0.1.7}/pretix_mapplugin/views.py

@@ -32,11 +32,25 @@ except ImportError:
 logger = logging.getLogger(__name__)
 
 
+from django import forms
+try:
+    from pretix.control.forms.widgets import DatePickerWidget
+except ImportError:
+    class DatePickerWidget(forms.DateInput):
+        def __init__(self, *args, **kwargs):
+            attrs = kwargs.get('attrs', {})
+            attrs['class'] = attrs.get('class', '') + ' datepickerfield'
+            kwargs['attrs'] = attrs
+            super().__init__(*args, **kwargs)
+
 # --- Milestone Management ---
 MilestoneFormSet = inlineformset_factory(
     Event,
     MapMilestone,
     fields=('date', 'label'),
+    widgets={
+        'date': DatePickerWidget(),
+    },
     extra=1,
     can_delete=True
 )
@@ -143,6 +157,15 @@ class SalesMapDataView(EventSettingsViewMixin, View):
             for m in MapMilestone.objects.filter(event=event)
         ]
 
+        item_availability = {}
+        for item in event.items.all():
+            item_availability[str(item.name)] = {
+                'available_from': item.available_from.isoformat() if item.available_from else None,
+                'available_until': item.available_until.isoformat() if item.available_until else None,
+                'first_sale': None,
+                'last_sale': None,
+            }
+
         locations_data = []
         failed_orders_data = []
         city_counter = Counter()
@@ -182,7 +205,14 @@ class SalesMapDataView(EventSettingsViewMixin, View):
 
                 item_names = [str(p.item.name) for p in order.positions.all() if p.item]
                 if status != 'canceled':
-                    for name in item_names: item_counter[name] += 1
+                    for name in item_names:
+                        item_counter[name] += 1
+                        # Track sales period
+                        if name in item_availability:
+                            if not item_availability[name]['first_sale'] or iso_date < item_availability[name]['first_sale']:
+                                item_availability[name]['first_sale'] = iso_date
+                            if not item_availability[name]['last_sale'] or iso_date > item_availability[name]['last_sale']:
+                                item_availability[name]['last_sale'] = iso_date
 
                 tooltip_parts = [f"<strong>Order:</strong> {order.code} ({status.upper()})"]
                 if order.datetime:
@@ -211,6 +241,7 @@ class SalesMapDataView(EventSettingsViewMixin, View):
             return JsonResponse({
                 'locations': locations_data, 'failed_orders': failed_orders_data,
                 'event_marker': event_marker, 'milestones': milestones,
+                'item_availability': item_availability,
                 'stats': {
                     'top_cities': city_counter.most_common(10), 'top_items': item_counter.most_common(10),
                     'total_orders': len(locations_data) + len(failed_orders_data),

pretix_map-0.1.5/pretix_mapplugin/__init__.py

@@ -1 +0,0 @@
-__version__ = "0.1.5"

pretix_map-0.1.5/pretix_mapplugin/static/pretix_mapplugin/css/salesmap.css

@@ -1,52 +0,0 @@
-.plugin-map-content-wrapper {
-    display: flex;
-    flex-direction: column;
-    height: calc(100vh - 100px);
-    min-height: 450px;
-}
-
-.plugin-map-content-wrapper h1,
-.plugin-map-content-wrapper .form-group {
-    flex-shrink: 0;
-    margin-bottom: 1em;
-}
-
-.map-wrapper {
-    flex-grow: 1;
-    position: relative;
-    min-height: 0;
-    border: 1px solid #ccc;
-}
-
-#sales-map-container {
-    height: 100%;
-    width: 100%;
-    display: block;
-    position: relative;
-}
-
-#map-status-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-#map-status-overlay p {
-    padding: 1em;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-#heatmap-options-panel input[type=range] {
-    width: 100%;
-    display: block;
-}
-
-#map-status-overlay p.text-danger {
-    color: #a94442;
-    background-color: #f2dede;
-    border-color: #ebccd1;
-}