| 2023-Q1 | product_A | 100 |
| 2023-Q1 | product_B | 200 |
| 2023-Q1 | product_C | 150 |
| 2023-Q2 | product_A | 150 |
| 2023-Q2 | product_B | 220 |
| 2023-Q2 | product_C | 160 |
`;
}
function demonstratePivot() {
const table = document.getElementById('transformTable');
table.innerHTML = `
| Product | Q1 | Q2 | Q3 | Q4 |
| Product_A | 100 | 150 | 120 | 180 |
| Product_B | 200 | 220 | 210 | 250 |
| Product_C | 150 | 160 | 140 | 190 |
`;
}
// Drag and Drop functionality
let draggedElement = null;
function initDragAndDrop() {
const draggables = document.querySelectorAll('.draggable-field');
const dropZones = document.querySelectorAll('.drag-area');
draggables.forEach(field => {
field.addEventListener('dragstart', (e) => {
draggedElement = e.target;
e.target.classList.add('dragging');
});
field.addEventListener('dragend', (e) => {
e.target.classList.remove('dragging');
});
});
dropZones.forEach(zone => {
zone.addEventListener('dragover', (e) => {
e.preventDefault();
zone.classList.add('drag-over');
});
zone.addEventListener('dragleave', () => {
zone.classList.remove('drag-over');
});
zone.addEventListener('drop', (e) => {
e.preventDefault();
zone.classList.remove('drag-over');
if (draggedElement) {
const clone = draggedElement.cloneNode(true);
zone.appendChild(clone);
updateInteractivePivot();
}
});
});
}
function updateInteractivePivot() {
// Update pivot table based on dragged fields
console.log('Updating interactive pivot table');
}
// Copy code function
function copyCode(button) {
const codeBlock = button.parentElement.nextElementSibling.querySelector('code');
const text = codeBlock.textContent;
navigator.clipboard.writeText(text).then(() => {
button.textContent = 'Copied!';
setTimeout(() => {
button.textContent = 'Copy';
}, 2000);
});
}
// Margin toggles
function initMarginToggles() {
const toggles = document.querySelectorAll('.toggle-switch');
toggles.forEach(toggle => {
toggle.addEventListener('click', function() {
this.classList.toggle('active');
updatePivotTable();
});
});
}
// Initialize on load
window.addEventListener('load', function() {
populateOriginalData();
updatePivotTable();
drawCrosstabHeatmap();
initDragAndDrop();
initMarginToggles();
});
// Handle window resize
window.addEventListener('resize', function() {
drawCrosstabHeatmap();
});