pg_insights 0.1.0

data/app/assets/javascripts/pg_insights/health.js

@@ -0,0 +1,104 @@
+document.addEventListener('DOMContentLoaded', function() {
+  initializeHealthDashboard();
+});
+
+function initializeHealthDashboard() {
+  initializeSmoothScrolling();
+  initializeSectionHighlighting();
+  initializeResponsive();
+}
+function initializeSmoothScrolling() {
+  const anchorLinks = document.querySelectorAll('a[href^="#"]');
+  
+  anchorLinks.forEach(link => {
+    link.addEventListener('click', function(e) {
+      const targetId = this.getAttribute('href').substring(1);
+      const targetElement = document.getElementById(targetId);
+      
+      if (targetElement) {
+        e.preventDefault();
+        
+        if (this.classList.contains('stat-card-link')) {
+          this.classList.add('clicked');
+          setTimeout(() => {
+            this.classList.remove('clicked');
+          }, 200);
+        }
+        
+        const headerOffset = 20;
+        const elementPosition = targetElement.getBoundingClientRect().top;
+        const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
+        
+        window.scrollTo({
+          top: offsetPosition,
+          behavior: 'smooth'
+        });
+        
+        highlightSection(targetElement);
+      }
+    });
+  });
+}
+
+function initializeSectionHighlighting() {
+  if (window.location.hash) {
+    const targetElement = document.querySelector(window.location.hash);
+    if (targetElement) {
+      setTimeout(() => {
+        highlightSection(targetElement);
+      }, 500);
+    }
+  }
+}
+
+function highlightSection(element) {
+  const previousHighlighted = document.querySelector('.health-section.highlighted');
+  if (previousHighlighted) {
+    previousHighlighted.classList.remove('highlighted');
+  }
+  
+  element.classList.add('highlighted');
+  
+  setTimeout(() => {
+    element.classList.remove('highlighted');
+  }, 2000);
+}
+function initializeResponsive() {
+  let resizeTimeout;
+  
+  window.addEventListener('resize', function() {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(function() {
+      adjustForScreenSize();
+    }, 250);
+  });
+  
+  adjustForScreenSize();
+}
+
+function adjustForScreenSize() {
+  const screenWidth = window.innerWidth;
+  const queryTexts = document.querySelectorAll('.query-text');
+  
+  queryTexts.forEach(queryText => {
+    if (screenWidth <= 768) {
+      queryText.style.whiteSpace = 'normal';
+      queryText.style.wordBreak = 'break-word';
+    } else {
+      queryText.style.whiteSpace = 'nowrap';
+      queryText.style.wordBreak = 'normal';
+    }
+  });
+}
+function formatNumber(num) {
+  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+function truncateText(text, maxLength) {
+  if (text.length <= maxLength) {
+    return text;
+  }
+  return text.substring(0, maxLength - 3) + '...';
+}
+
+ 

data/app/assets/javascripts/pg_insights/results/chart_renderer.js

@@ -0,0 +1,126 @@
+function initChartRendering() {
+  const chartTypeSelect = document.getElementById('chartType');
+  const chartDataElement = document.querySelector('[data-chart-data]');
+  
+  if (!chartTypeSelect || !chartDataElement) return;
+
+  try {
+    const chartData = JSON.parse(chartDataElement.dataset.chartData);
+    
+    chartTypeSelect.addEventListener('change', function() {
+      renderChart(this.value, chartData);
+    });
+
+    // Initial render
+    renderChart('bar', chartData);
+  } catch (e) {
+    console.error('Failed to parse chart data:', e);
+  }
+}
+
+function renderChart(type, data) {
+  const container = document.getElementById('dynamicChart');
+  if (!container || !data || !data.chartData) return;
+
+  const containerRect = container.getBoundingClientRect();
+  const containerHeight = Math.max(250, containerRect.height - 20);
+  const containerWidth = containerRect.width - 20;
+
+  const options = {
+    height: containerHeight + 'px',
+    width: containerWidth + 'px',
+    colors: ["#00979D", "#00838a", "#00767a", "#006064", "#004d4f"],
+    responsive: true,
+    maintainAspectRatio: false,
+    library: {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: {
+        intersect: false
+      },
+      plugins: {
+        legend: {
+          display: true,
+          position: 'bottom',
+          labels: {
+            fontSize: 11,
+            fontColor: '#6b7280',
+            padding: 10
+          }
+        }
+      },
+      scales: {
+        x: {
+          ticks: {
+            maxRotation: 45,
+            minRotation: 0,
+            font: {
+              size: 10
+            }
+          }
+        },
+        y: {
+          ticks: {
+            font: {
+              size: 10
+            }
+          }
+        }
+      }
+    }
+  };
+
+  container.innerHTML = '';
+
+  try {
+    setTimeout(function() {
+      var chartInstance;
+      
+      switch(type) {
+        case 'line':
+          chartInstance = new Chartkick.LineChart(container, data.chartData, options);
+          break;
+        case 'bar':
+          chartInstance = new Chartkick.BarChart(container, data.chartData, options);
+          break;
+        case 'pie':
+          chartInstance = new Chartkick.PieChart(container, data.chartData, {
+            ...options,
+            library: {
+              ...options.library,
+              plugins: {
+                legend: {
+                  display: true,
+                  position: 'right',
+                  labels: {
+                    fontSize: 10,
+                    fontColor: '#6b7280',
+                    padding: 8
+                  }
+                }
+              }
+            }
+          });
+          break;
+        case 'area':
+          chartInstance = new Chartkick.AreaChart(container, data.chartData, options);
+          break;
+        default:
+          chartInstance = new Chartkick.BarChart(container, data.chartData, options);
+      }
+
+      if (chartInstance && chartInstance.getChart) {
+        setTimeout(function() {
+          const chart = chartInstance.getChart();
+          if (chart && chart.resize) {
+            chart.resize();
+          }
+        }, 100);
+      }
+    }, 50);
+
+  } catch (error) {
+    console.error('Chart rendering error:', error);
+    container.innerHTML = '<div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #64748b; text-align: center; padding: 20px;"><div style="font-size: 48px; margin-bottom: 16px; opacity: 0.5;">⚠️</div><h3 style="margin: 0 0 8px 0; color: #374151;">Chart Error</h3><p style="margin: 0 0 8px 0; font-size: 14px;">Unable to render chart</p><small style="opacity: 0.7;">' + error.message + '</small></div>';
+  }
+} 

data/app/assets/javascripts/pg_insights/results/table_manager.js

@@ -0,0 +1,378 @@
+function TableManager() {
+  this.table = document.getElementById('resultsTable');
+  this.tableScroll = document.getElementById('tableScroll');
+  this.columnPanel = document.getElementById('columnPanel');
+  this.originalColumnWidths = new Map();
+  this.isResizing = false;
+
+  if (this.table) {
+    this.init();
+  }
+}
+
+TableManager.prototype.init = function() {
+  this.setupColumnToggles();
+  this.setupTableControls();
+  this.setupScrollIndicators();
+  this.setupColumnResizing();
+  this.setupKeyboardNavigation();
+  this.detectColumnTypes();
+};
+
+TableManager.prototype.setupColumnToggles = function() {
+  var self = this;
+  var toggleBtn = document.getElementById('toggleColumns');
+  var showAllBtn = document.getElementById('showAllColumns');
+  var hideAllBtn = document.getElementById('hideAllColumns');
+  var columnToggles = document.querySelectorAll('.column-toggle');
+
+  if (toggleBtn && this.columnPanel) {
+    toggleBtn.addEventListener('click', function() {
+      var isVisible = self.columnPanel.style.display !== 'none';
+      self.columnPanel.style.display = isVisible ? 'none' : 'block';
+      toggleBtn.textContent = isVisible ? '👁️ Show/Hide Columns' : '👁️ Hide Panel';
+    });
+  }
+
+  if (showAllBtn) {
+    showAllBtn.addEventListener('click', function() {
+      columnToggles.forEach(function(toggle) {
+        toggle.checked = true;
+        self.toggleColumn(toggle.dataset.column, true);
+      });
+    });
+  }
+
+  if (hideAllBtn) {
+    hideAllBtn.addEventListener('click', function() {
+      columnToggles.forEach(function(toggle) {
+        toggle.checked = false;
+        self.toggleColumn(toggle.dataset.column, false);
+      });
+    });
+  }
+
+  columnToggles.forEach(function(toggle) {
+    toggle.addEventListener('change', function() {
+      self.toggleColumn(toggle.dataset.column, toggle.checked);
+    });
+  });
+};
+
+TableManager.prototype.toggleColumn = function(columnIndex, show) {
+  var columns = document.querySelectorAll('[data-column="' + columnIndex + '"]');
+  columns.forEach(function(col) {
+    if (show) {
+      col.classList.remove('column-hidden');
+      col.style.display = '';
+    } else {
+      col.classList.add('column-hidden');
+      col.style.display = 'none';
+    }
+  });
+};
+
+TableManager.prototype.setupTableControls = function() {
+  var self = this;
+  var fitBtn = document.getElementById('fitColumns');
+  var resetBtn = document.getElementById('resetTable');
+
+  if (fitBtn) {
+    fitBtn.addEventListener('click', function(e) { 
+      e.preventDefault();
+      self.fitColumns(); 
+    });
+  }
+
+  if (resetBtn) {
+    resetBtn.addEventListener('click', function(e) { 
+      e.preventDefault();
+      self.resetTable(); 
+    });
+  }
+};
+
+TableManager.prototype.fitColumns = function() {
+  // Check if required elements exist
+  if (!this.table || !this.tableScroll) {
+    return;
+  }
+
+  // Get all non-row-number headers that are visible
+  var headers = this.table.querySelectorAll('th:not(.row-num):not(.column-hidden)');
+  
+  if (headers.length === 0) {
+    return;
+  }
+
+  // Calculate available width (subtract row number column and padding)
+  var rowNumWidth = 60; // Width for row number column
+  var scrollbarWidth = 20; // Account for scrollbar
+  var padding = 20; // Additional padding
+  var containerWidth = this.tableScroll.clientWidth - rowNumWidth - scrollbarWidth - padding;
+  
+  // Ensure minimum total width and calculate per-column width
+  var minColumnWidth = 100;
+  var maxColumnWidth = 300;
+  var columnWidth = Math.max(minColumnWidth, Math.min(maxColumnWidth, containerWidth / headers.length));
+
+  // Set table layout to fixed for consistent column sizing
+  this.table.style.tableLayout = 'fixed';
+
+  // Apply width to headers and corresponding cells
+  headers.forEach(function(header, index) {
+    var columnIndex = header.getAttribute('data-column');
+    
+    // Set header width
+    header.style.width = columnWidth + 'px';
+    header.style.minWidth = columnWidth + 'px';
+    header.style.maxWidth = columnWidth + 'px';
+
+    // Set corresponding cell widths
+    var cells = document.querySelectorAll('td[data-column="' + columnIndex + '"]:not(.column-hidden)');
+    cells.forEach(function(cell) {
+      cell.style.width = columnWidth + 'px';
+      cell.style.minWidth = columnWidth + 'px';
+      cell.style.maxWidth = columnWidth + 'px';
+    });
+  });
+};
+
+TableManager.prototype.resetTable = function() {
+  // Reset table layout
+  if (this.table) {
+    this.table.style.tableLayout = '';
+  }
+
+  // Reset all column and cell styles
+  var allColumns = this.table.querySelectorAll('th, td');
+  allColumns.forEach(function(col) {
+    col.style.width = '';
+    col.style.minWidth = '';
+    col.style.maxWidth = '';
+    col.style.display = '';
+    col.classList.remove('column-hidden');
+  });
+
+  // Show all hidden columns
+  var hiddenColumns = this.table.querySelectorAll('.column-hidden');
+  hiddenColumns.forEach(function(col) { 
+    col.classList.remove('column-hidden');
+    col.style.display = '';
+  });
+
+  // Reset all column toggles to checked state
+  var toggles = document.querySelectorAll('.column-toggle');
+  toggles.forEach(function(toggle) { 
+    toggle.checked = true; 
+  });
+
+  // Hide column panel
+  if (this.columnPanel) {
+    this.columnPanel.style.display = 'none';
+    
+    // Also reset the toggle button text
+    var toggleBtn = document.getElementById('toggleColumns');
+    if (toggleBtn) {
+      toggleBtn.innerHTML = '<span class="btn-icon">👁️</span> Show/Hide Columns';
+    }
+  }
+};
+
+TableManager.prototype.setupScrollIndicators = function() {
+  if (!this.tableScroll) return;
+
+  var self = this;
+  var scrollIndicatorH = document.getElementById('scrollIndicatorH');
+  var scrollIndicatorV = document.getElementById('scrollIndicatorV');
+  var scrollTimeout;
+
+  this.tableScroll.addEventListener('scroll', function() {
+    self.updateScrollIndicators();
+
+    if (scrollIndicatorH) scrollIndicatorH.classList.add('visible');
+    if (scrollIndicatorV) scrollIndicatorV.classList.add('visible');
+
+    clearTimeout(scrollTimeout);
+    scrollTimeout = setTimeout(function() {
+      if (scrollIndicatorH) scrollIndicatorH.classList.remove('visible');
+      if (scrollIndicatorV) scrollIndicatorV.classList.remove('visible');
+    }, 1000);
+  });
+
+  this.updateScrollIndicators();
+};
+
+TableManager.prototype.updateScrollIndicators = function() {
+  var scrollIndicatorH = document.getElementById('scrollIndicatorH');
+  var scrollIndicatorV = document.getElementById('scrollIndicatorV');
+  var scrollThumbH = document.getElementById('scrollThumbH');
+  var scrollThumbV = document.getElementById('scrollThumbV');
+
+  if (!this.tableScroll) return;
+
+  var scrollLeft = this.tableScroll.scrollLeft;
+  var scrollTop = this.tableScroll.scrollTop;
+  var scrollWidth = this.tableScroll.scrollWidth;
+  var scrollHeight = this.tableScroll.scrollHeight;
+  var clientWidth = this.tableScroll.clientWidth;
+  var clientHeight = this.tableScroll.clientHeight;
+
+  if (scrollIndicatorH && scrollThumbH && scrollWidth > clientWidth) {
+    var thumbWidth = (clientWidth / scrollWidth) * 100;
+    var thumbLeft = (scrollLeft / (scrollWidth - clientWidth)) * (100 - thumbWidth);
+
+    scrollThumbH.style.width = thumbWidth + '%';
+    scrollThumbH.style.left = thumbLeft + '%';
+  }
+
+  if (scrollIndicatorV && scrollThumbV && scrollHeight > clientHeight) {
+    var thumbHeight = (clientHeight / scrollHeight) * 100;
+    var thumbTop = (scrollTop / (scrollHeight - clientHeight)) * (100 - thumbHeight);
+
+    scrollThumbV.style.height = thumbHeight + '%';
+    scrollThumbV.style.top = thumbTop + '%';
+  }
+};
+
+TableManager.prototype.setupColumnResizing = function() {
+  var self = this;
+  var headers = this.table.querySelectorAll('th:not(.row-num)');
+
+  headers.forEach(function(header, index) {
+    var resizeHandle = document.createElement('div');
+    resizeHandle.className = 'resize-handle';
+    header.appendChild(resizeHandle);
+
+    var startX, startWidth;
+
+    resizeHandle.addEventListener('mousedown', function(e) {
+      self.isResizing = true;
+      startX = e.clientX;
+      startWidth = parseInt(document.defaultView.getComputedStyle(header).width, 10);
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+
+      e.preventDefault();
+    });
+
+    var handleMouseMove = function(e) {
+      if (!self.isResizing) return;
+
+      var width = startWidth + e.clientX - startX;
+      var minWidth = 80;
+      var maxWidth = 500;
+      var newWidth = Math.max(minWidth, Math.min(maxWidth, width));
+
+      header.style.width = newWidth + 'px';
+      header.style.minWidth = newWidth + 'px';
+      header.style.maxWidth = newWidth + 'px';
+
+      var cells = self.table.querySelectorAll('td[data-column="' + (index + 1) + '"]');
+      cells.forEach(function(cell) {
+        cell.style.width = newWidth + 'px';
+        cell.style.minWidth = newWidth + 'px';
+        cell.style.maxWidth = newWidth + 'px';
+      });
+    };
+
+    var handleMouseUp = function() {
+      self.isResizing = false;
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  });
+};
+
+TableManager.prototype.setupKeyboardNavigation = function() {
+  var self = this;
+  
+  this.tableScroll.addEventListener('keydown', function(e) {
+    if (!e.target.closest('.results-table')) return;
+
+    var scrollAmount = 50;
+
+    switch(e.key) {
+      case 'ArrowLeft':
+        self.tableScroll.scrollLeft -= scrollAmount;
+        e.preventDefault();
+        break;
+      case 'ArrowRight':
+        self.tableScroll.scrollLeft += scrollAmount;
+        e.preventDefault();
+        break;
+      case 'ArrowUp':
+        self.tableScroll.scrollTop -= scrollAmount;
+        e.preventDefault();
+        break;
+      case 'ArrowDown':
+        self.tableScroll.scrollTop += scrollAmount;
+        e.preventDefault();
+        break;
+      case 'Home':
+        if (e.ctrlKey) {
+          self.tableScroll.scrollTop = 0;
+          self.tableScroll.scrollLeft = 0;
+        } else {
+          self.tableScroll.scrollLeft = 0;
+        }
+        e.preventDefault();
+        break;
+      case 'End':
+        if (e.ctrlKey) {
+          self.tableScroll.scrollTop = self.tableScroll.scrollHeight;
+          self.tableScroll.scrollLeft = self.tableScroll.scrollWidth;
+        } else {
+          self.tableScroll.scrollLeft = self.tableScroll.scrollWidth;
+        }
+        e.preventDefault();
+        break;
+    }
+  });
+};
+
+TableManager.prototype.detectColumnTypes = function() {
+  var headers = this.table.querySelectorAll('th:not(.row-num)');
+
+  headers.forEach(function(header, index) {
+    var cells = document.querySelectorAll('td[data-column="' + (index + 1) + '"] .cell-content');
+    var typeSpan = header.querySelector('.header-type');
+
+    if (!typeSpan || cells.length === 0) return;
+
+    var numericCount = 0;
+    var dateCount = 0;
+    var sampleSize = Math.min(10, cells.length);
+
+    for (var i = 0; i < sampleSize; i++) {
+      var cell = cells[i];
+      var value = cell.textContent.trim();
+
+      if (value && value !== 'NULL' && value !== 'empty') {
+        if (/^-?\d+(\.\d+)?$/.test(value)) {
+          numericCount++;
+        } else if (/^\d{4}-\d{2}-\d{2}/.test(value)) {
+          dateCount++;
+        }
+      }
+    }
+
+    var numericRatio = numericCount / sampleSize;
+    var dateRatio = dateCount / sampleSize;
+
+    if (numericRatio > 0.7) {
+      typeSpan.textContent = 'number';
+      typeSpan.style.background = '#dcfce7';
+      typeSpan.style.color = '#166534';
+    } else if (dateRatio > 0.7) {
+      typeSpan.textContent = 'date';
+      typeSpan.style.background = '#e0f2fe';
+      typeSpan.style.color = '#0c4a6e';
+    } else {
+      typeSpan.textContent = 'text';
+      typeSpan.style.background = '#f1f5f9';
+      typeSpan.style.color = '#64748b';
+    }
+  });
+}; 

data/app/assets/javascripts/pg_insights/results/view_toggles.js

@@ -0,0 +1,25 @@
+function initViewToggles() {
+  const toggleBtns = document.querySelectorAll('.toggle-btn');
+  const views = {
+    table: document.getElementById('table-view'),
+    chart: document.getElementById('chart-view'),
+    stats: document.getElementById('stats-view')
+  };
+
+  toggleBtns.forEach(function(btn) {
+    btn.addEventListener('click', function() {
+      const targetView = this.dataset.view;
+
+      // Update active button
+      toggleBtns.forEach(function(b) { b.classList.remove('active'); });
+      this.classList.add('active');
+
+      // Show/hide views
+      Object.keys(views).forEach(function(viewName) {
+        if (views[viewName]) {
+          views[viewName].style.display = viewName === targetView ? 'block' : 'none';
+        }
+      });
+    });
+  });
+} 

data/app/assets/javascripts/pg_insights/results.js

@@ -0,0 +1,13 @@
+//= require_tree ./results
+
+document.addEventListener('DOMContentLoaded', function() {
+  if (!document.querySelector('.results-section')) return;
+
+  initViewToggles();
+  initChartRendering();
+  initTableManager();
+});
+
+function initTableManager() {
+  var tableManager = new TableManager();
+}