Upload static/js/charts_module.js with huggingface_hub

static/js/charts_module.js

@@ -0,0 +1,742 @@
+/**
+ * Advanced Chart Visualizations
+ * Provides different chart types for international trade data visualization
+ */
+
+const TradeCharts = (function() {
+  // Store chart instances to destroy when needed
+  const chartInstances = {};
+  
+  // Color schemes for different chart types
+  const colorSchemes = {
+    default: [
+      'rgba(25, 118, 210, 0.7)',   // Primary blue
+      'rgba(229, 57, 53, 0.7)',    // Red
+      'rgba(67, 160, 71, 0.7)',    // Green
+      'rgba(251, 192, 45, 0.7)',   // Yellow
+      'rgba(156, 39, 176, 0.7)',   // Purple
+      'rgba(0, 188, 212, 0.7)',    // Cyan
+      'rgba(255, 152, 0, 0.7)',    // Orange
+      'rgba(121, 85, 72, 0.7)',    // Brown
+      'rgba(96, 125, 139, 0.7)',   // Blue Grey
+      'rgba(233, 30, 99, 0.7)'     // Pink
+    ],
+    borders: [
+      'rgba(25, 118, 210, 1)',     // Primary blue
+      'rgba(229, 57, 53, 1)',      // Red
+      'rgba(67, 160, 71, 1)',      // Green
+      'rgba(251, 192, 45, 1)',     // Yellow
+      'rgba(156, 39, 176, 1)',     // Purple
+      'rgba(0, 188, 212, 1)',      // Cyan
+      'rgba(255, 152, 0, 1)',      // Orange
+      'rgba(121, 85, 72, 1)',      // Brown
+      'rgba(96, 125, 139, 1)',     // Blue Grey
+      'rgba(233, 30, 99, 1)'       // Pink
+    ],
+    gradients: function(ctx) {
+      return [
+        createGradient(ctx, [25, 118, 210]),
+        createGradient(ctx, [229, 57, 53]),
+        createGradient(ctx, [67, 160, 71]),
+        createGradient(ctx, [251, 192, 45]),
+        createGradient(ctx, [156, 39, 176]),
+        createGradient(ctx, [0, 188, 212]),
+        createGradient(ctx, [255, 152, 0]),
+        createGradient(ctx, [121, 85, 72]),
+        createGradient(ctx, [96, 125, 139]),
+        createGradient(ctx, [233, 30, 99])
+      ];
+    }
+  };
+  
+  // Create a gradient color
+  function createGradient(ctx, rgbColor) {
+    const gradient = ctx.createLinearGradient(0, 0, 0, 400);
+    gradient.addColorStop(0, `rgba(${rgbColor[0]}, ${rgbColor[1]}, ${rgbColor[2]}, 0.8)`);
+    gradient.addColorStop(1, `rgba(${rgbColor[0]}, ${rgbColor[1]}, ${rgbColor[2]}, 0.2)`);
+    return gradient;
+  }
+  
+  // Load Chart.js if not present
+  function ensureChartJsLoaded() {
+    return new Promise((resolve, reject) => {
+      if (window.Chart) {
+        resolve(window.Chart);
+        return;
+      }
+      
+      const script = document.createElement('script');
+      script.src = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js';
+      script.onload = () => resolve(window.Chart);
+      script.onerror = () => reject(new Error('Failed to load Chart.js'));
+      document.body.appendChild(script);
+    });
+  }
+  
+  // Helper function to destroy existing chart
+  function destroyChart(containerId) {
+    if (chartInstances[containerId]) {
+      chartInstances[containerId].destroy();
+      delete chartInstances[containerId];
+    }
+  }
+  
+  // Helper to extract top N items
+  function getTopItems(data, valueField, labelField, n = 10) {
+    return [...data]
+      .sort((a, b) => b[valueField] - a[valueField])
+      .slice(0, n)
+      .map(item => ({
+        value: item[valueField],
+        label: item[labelField]
+      }));
+  }
+  
+  // Create bar chart
+  async function createBarChart(containerId, data, options = {}) {
+    await ensureChartJsLoaded();
+    
+    const container = document.getElementById(containerId);
+    if (!container) return null;
+    
+    // Create or get canvas
+    let canvas = container.querySelector('canvas');
+    if (!canvas) {
+      canvas = document.createElement('canvas');
+      container.innerHTML = '';
+      container.appendChild(canvas);
+    }
+    
+    destroyChart(containerId);
+    
+    // Default options
+    const defaults = {
+      valueField: 'value',
+      labelField: 'country',
+      title: 'Trade Data',
+      horizontal: false,
+      limit: 10,
+      showLegend: false,
+      animation: true
+    };
+    
+    const chartOptions = { ...defaults, ...options };
+    
+    // Prepare data - limit to top N items and process data
+    let chartData;
+    if (Array.isArray(data.rows)) {
+      chartData = getTopItems(
+        data.rows, 
+        chartOptions.valueField, 
+        chartOptions.labelField, 
+        chartOptions.limit
+      );
+    } else if (Array.isArray(data)) {
+      chartData = getTopItems(
+        data, 
+        chartOptions.valueField, 
+        chartOptions.labelField, 
+        chartOptions.limit
+      );
+    } else {
+      console.error('Invalid data format for bar chart');
+      return null;
+    }
+    
+    // Get context
+    const ctx = canvas.getContext('2d');
+    
+    // Create chart
+    chartInstances[containerId] = new Chart(ctx, {
+      type: chartOptions.horizontal ? 'horizontalBar' : 'bar',
+      data: {
+        labels: chartData.map(item => item.label),
+        datasets: [{
+          label: chartOptions.title,
+          data: chartData.map(item => item.value),
+          backgroundColor: colorSchemes.default,
+          borderColor: colorSchemes.borders,
+          borderWidth: 1
+        }]
+      },
+      options: {
+        indexAxis: chartOptions.horizontal ? 'y' : 'x',
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: chartOptions.showLegend
+          },
+          title: {
+            display: true,
+            text: chartOptions.title,
+            font: {
+              size: 16
+            }
+          },
+          tooltip: {
+            callbacks: {
+              label: function(context) {
+                let label = context.dataset.label || '';
+                if (label) {
+                  label += ': ';
+                }
+                if (context.parsed.y !== null) {
+                  label += new Intl.NumberFormat().format(
+                    chartOptions.horizontal ? context.parsed.x : context.parsed.y
+                  );
+                }
+                return label;
+              }
+            }
+          }
+        },
+        animation: chartOptions.animation,
+        scales: {
+          y: {
+            beginAtZero: true,
+            ticks: {
+              callback: function(value) {
+                if (value >= 1000000000) {
+                  return (value / 1000000000).toFixed(1) + 'B';
+                } else if (value >= 1000000) {
+                  return (value / 1000000).toFixed(1) + 'M';
+                } else if (value >= 1000) {
+                  return (value / 1000).toFixed(1) + 'K';
+                }
+                return value;
+              }
+            }
+          }
+        }
+      }
+    });
+    
+    return chartInstances[containerId];
+  }
+  
+  // Create pie chart
+  async function createPieChart(containerId, data, options = {}) {
+    await ensureChartJsLoaded();
+    
+    const container = document.getElementById(containerId);
+    if (!container) return null;
+    
+    // Create or get canvas
+    let canvas = container.querySelector('canvas');
+    if (!canvas) {
+      canvas = document.createElement('canvas');
+      container.innerHTML = '';
+      container.appendChild(canvas);
+    }
+    
+    destroyChart(containerId);
+    
+    // Default options
+    const defaults = {
+      valueField: 'value',
+      labelField: 'country',
+      title: 'Trade Distribution',
+      limit: 10,
+      showLegend: true,
+      animation: true,
+      doughnut: false
+    };
+    
+    const chartOptions = { ...defaults, ...options };
+    
+    // Prepare data - limit to top N items
+    let chartData;
+    if (Array.isArray(data.rows)) {
+      chartData = getTopItems(
+        data.rows, 
+        chartOptions.valueField, 
+        chartOptions.labelField, 
+        chartOptions.limit
+      );
+    } else if (Array.isArray(data)) {
+      chartData = getTopItems(
+        data, 
+        chartOptions.valueField, 
+        chartOptions.labelField, 
+        chartOptions.limit
+      );
+    } else {
+      console.error('Invalid data format for pie chart');
+      return null;
+    }
+    
+    // Get context
+    const ctx = canvas.getContext('2d');
+    
+    // Create chart
+    chartInstances[containerId] = new Chart(ctx, {
+      type: chartOptions.doughnut ? 'doughnut' : 'pie',
+      data: {
+        labels: chartData.map(item => item.label),
+        datasets: [{
+          data: chartData.map(item => item.value),
+          backgroundColor: colorSchemes.default,
+          borderColor: colorSchemes.borders,
+          borderWidth: 1
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: chartOptions.showLegend,
+            position: 'right'
+          },
+          title: {
+            display: true,
+            text: chartOptions.title,
+            font: {
+              size: 16
+            }
+          },
+          tooltip: {
+            callbacks: {
+              label: function(context) {
+                const label = context.label || '';
+                const value = context.raw;
+                const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                const percentage = ((value / total) * 100).toFixed(1);
+                return `${label}: ${new Intl.NumberFormat().format(value)} (${percentage}%)`;
+              }
+            }
+          }
+        },
+        animation: chartOptions.animation
+      }
+    });
+    
+    return chartInstances[containerId];
+  }
+  
+  // Create line chart
+  async function createLineChart(containerId, data, options = {}) {
+    await ensureChartJsLoaded();
+    
+    const container = document.getElementById(containerId);
+    if (!container) return null;
+    
+    // Create or get canvas
+    let canvas = container.querySelector('canvas');
+    if (!canvas) {
+      canvas = document.createElement('canvas');
+      container.innerHTML = '';
+      container.appendChild(canvas);
+    }
+    
+    destroyChart(containerId);
+    
+    // Default options
+    const defaults = {
+      valueField: 'value',
+      labelField: 'year',
+      title: 'Trade Trends',
+      showLegend: true,
+      animation: true,
+      fill: true,
+      seriesField: null, // If provided, creates multiple series based on this field
+      timeScale: false
+    };
+    
+    const chartOptions = { ...defaults, ...options };
+    
+    // Get context
+    const ctx = canvas.getContext('2d');
+    
+    // Prepare datasets
+    let datasets = [];
+    
+    if (chartOptions.seriesField) {
+      // Group data by series field
+      const seriesData = {};
+      const sourceData = Array.isArray(data.rows) ? data.rows : data;
+      
+      sourceData.forEach(item => {
+        const seriesKey = item[chartOptions.seriesField];
+        if (!seriesData[seriesKey]) {
+          seriesData[seriesKey] = [];
+        }
+        seriesData[seriesKey].push({
+          x: item[chartOptions.labelField],
+          y: item[chartOptions.valueField]
+        });
+      });
+      
+      // Create a dataset for each series
+      let colorIndex = 0;
+      for (const seriesKey in seriesData) {
+        datasets.push({
+          label: seriesKey,
+          data: seriesData[seriesKey],
+          backgroundColor: chartOptions.fill ? colorSchemes.gradients(ctx)[colorIndex % 10] : colorSchemes.default[colorIndex % 10],
+          borderColor: colorSchemes.borders[colorIndex % 10],
+          borderWidth: 2,
+          fill: chartOptions.fill,
+          tension: 0.1
+        });
+        colorIndex++;
+      }
+    } else {
+      // Single series
+      const sourceData = Array.isArray(data.rows) ? data.rows : data;
+      
+      // Sort data by label (typically year)
+      sourceData.sort((a, b) => {
+        if (chartOptions.timeScale) {
+          return new Date(a[chartOptions.labelField]) - new Date(b[chartOptions.labelField]);
+        }
+        return a[chartOptions.labelField] - b[chartOptions.labelField];
+      });
+      
+      datasets.push({
+        label: chartOptions.title,
+        data: sourceData.map(item => ({
+          x: item[chartOptions.labelField],
+          y: item[chartOptions.valueField]
+        })),
+        backgroundColor: chartOptions.fill ? colorSchemes.gradients(ctx)[0] : colorSchemes.default[0],
+        borderColor: colorSchemes.borders[0],
+        borderWidth: 2,
+        fill: chartOptions.fill,
+        tension: 0.1
+      });
+    }
+    
+    // Create chart
+    chartInstances[containerId] = new Chart(ctx, {
+      type: 'line',
+      data: {
+        datasets: datasets
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: chartOptions.showLegend
+          },
+          title: {
+            display: true,
+            text: chartOptions.title,
+            font: {
+              size: 16
+            }
+          },
+          tooltip: {
+            callbacks: {
+              label: function(context) {
+                let label = context.dataset.label || '';
+                if (label) {
+                  label += ': ';
+                }
+                if (context.parsed.y !== null) {
+                  label += new Intl.NumberFormat().format(context.parsed.y);
+                }
+                return label;
+              }
+            }
+          }
+        },
+        animation: chartOptions.animation,
+        scales: {
+          x: {
+            type: chartOptions.timeScale ? 'time' : 'category',
+            time: chartOptions.timeScale ? {
+              unit: 'year',
+              displayFormats: {
+                year: 'yyyy'
+              }
+            } : undefined
+          },
+          y: {
+            beginAtZero: true,
+            ticks: {
+              callback: function(value) {
+                if (value >= 1000000000) {
+                  return (value / 1000000000).toFixed(1) + 'B';
+                } else if (value >= 1000000) {
+                  return (value / 1000000).toFixed(1) + 'M';
+                } else if (value >= 1000) {
+                  return (value / 1000).toFixed(1) + 'K';
+                }
+                return value;
+              }
+            }
+          }
+        }
+      }
+    });
+    
+    return chartInstances[containerId];
+  }
+  
+  // Create treemap for product/country hierarchies
+  async function createTreemap(containerId, data, options = {}) {
+    // This is a simplified treemap using divs since Chart.js doesn't have built-in treemap
+    const container = document.getElementById(containerId);
+    if (!container) return null;
+    
+    // Default options
+    const defaults = {
+      valueField: 'value',
+      labelField: 'country',
+      title: 'Trade Distribution',
+      limit: 20
+    };
+    
+    const chartOptions = { ...defaults, ...options };
+    
+    // Prepare data - limit to top N items
+    let chartData;
+    if (Array.isArray(data.rows)) {
+      chartData = getTopItems(
+        data.rows, 
+        chartOptions.valueField, 
+        chartOptions.labelField, 
+        chartOptions.limit
+      );
+    } else if (Array.isArray(data)) {
+      chartData = getTopItems(
+        data, 
+        chartOptions.valueField, 
+        chartOptions.labelField, 
+        chartOptions.limit
+      );
+    } else {
+      console.error('Invalid data format for treemap');
+      return null;
+    }
+    
+    // Calculate total for percentages
+    const total = chartData.reduce((sum, item) => sum + item.value, 0);
+    
+    // Create treemap container
+    container.innerHTML = `
+      <div class="treemap-title">${chartOptions.title}</div>
+      <div class="treemap-container"></div>
+    `;
+    
+    const treemapContainer = container.querySelector('.treemap-container');
+    treemapContainer.style.display = 'flex';
+    treemapContainer.style.flexWrap = 'wrap';
+    treemapContainer.style.height = '400px';
+    treemapContainer.style.position = 'relative';
+    
+    // Create rectangles
+    chartData.forEach((item, index) => {
+      const percentage = (item.value / total * 100).toFixed(1);
+      const div = document.createElement('div');
+      div.className = 'treemap-item';
+      div.style.backgroundColor = colorSchemes.default[index % colorSchemes.default.length];
+      div.style.color = '#fff';
+      div.style.padding = '8px';
+      div.style.boxSizing = 'border-box';
+      div.style.overflow = 'hidden';
+      div.style.fontSize = '12px';
+      div.style.position = 'relative';
+      div.style.flexGrow = item.value;
+      
+      // Size must be proportional to value
+      div.style.width = `${Math.sqrt(percentage)}%`;
+      div.style.height = `${Math.sqrt(percentage) * 2}%`;
+      div.style.margin = '2px';
+      
+      // Text with truncation
+      div.innerHTML = `
+        <div style="font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
+          ${item.label}
+        </div>
+        <div>${percentage}%</div>
+      `;
+      
+      // Tooltip on hover
+      div.title = `${item.label}: ${new Intl.NumberFormat().format(item.value)} (${percentage}%)`;
+      
+      treemapContainer.appendChild(div);
+    });
+    
+    return treemapContainer;
+  }
+  
+  // Create a world map visualization
+  async function createWorldMapChart(containerId, data, options = {}) {
+    // Load leaflet script if not already loaded
+    if (!window.L) {
+      await new Promise((resolve, reject) => {
+        // Load CSS
+        const leafletCss = document.createElement('link');
+        leafletCss.rel = 'stylesheet';
+        leafletCss.href = 'https://unpkg.com/leaflet/dist/leaflet.css';
+        document.head.appendChild(leafletCss);
+        
+        // Load script
+        const script = document.createElement('script');
+        script.src = 'https://unpkg.com/leaflet/dist/leaflet.js';
+        script.onload = resolve;
+        script.onerror = reject;
+        document.body.appendChild(script);
+      });
+    }
+    
+    const container = document.getElementById(containerId);
+    if (!container) return null;
+    
+    // Default options
+    const defaults = {
+      valueField: 'value',
+      labelField: 'country',
+      countryCodeField: 'code',
+      title: 'World Trade Map',
+      colorScale: ['#e6f7ff', '#0077be'],
+      zoom: 2
+    };
+    
+    const chartOptions = { ...defaults, ...options };
+    
+    // Set container height if not already set
+    if (!container.style.height || container.style.height === 'auto') {
+      container.style.height = '400px';
+    }
+    
+    // Clear previous map
+    container.innerHTML = '';
+    
+    // Create map
+    const map = L.map(containerId).setView([20, 0], chartOptions.zoom);
+    
+    // Add tile layer
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '© OpenStreetMap contributors'
+    }).addTo(map);
+    
+    // Process data
+    const sourceData = Array.isArray(data.rows) ? data.rows : data;
+    
+    // Find min/max for color scaling
+    const values = sourceData.map(item => item[chartOptions.valueField]);
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    
+    // Function to compute color based on value
+    function getColor(value) {
+      const ratio = (value - min) / (max - min || 1);
+      
+      // Linear interpolation between start and end colors
+      const startColor = chartOptions.colorScale[0];
+      const endColor = chartOptions.colorScale[1];
+      
+      // Parse hex colors
+      const startRGB = {
+        r: parseInt(startColor.slice(1, 3), 16),
+        g: parseInt(startColor.slice(3, 5), 16),
+        b: parseInt(startColor.slice(5, 7), 16)
+      };
+      
+      const endRGB = {
+        r: parseInt(endColor.slice(1, 3), 16),
+        g: parseInt(endColor.slice(3, 5), 16),
+        b: parseInt(endColor.slice(5, 7), 16)
+      };
+      
+      // Interpolate
+      const r = Math.round(startRGB.r + ratio * (endRGB.r - startRGB.r));
+      const g = Math.round(startRGB.g + ratio * (endRGB.g - startRGB.g));
+      const b = Math.round(startRGB.b + ratio * (endRGB.b - startRGB.b));
+      
+      return `rgb(${r}, ${g}, ${b})`;
+    }
+    
+    // Add country polygons if country GeoJSON is available
+    // For now we'll use circles at country coordinates as a simplified version
+    
+    // Find coordinates for countries (simplified - real app would use GeoJSON)
+    const countryCoordinates = {
+      // Sample coordinates for major countries
+      '842': [37.0902, -95.7129],  // USA
+      '156': [35.8617, 104.1954],  // China
+      '276': [51.1657, 10.4515],   // Germany
+      '392': [36.2048, 138.2529],  // Japan
+      '826': [55.3781, -3.4360],   // UK
+      '250': [46.2276, 2.2137],    // France
+      '380': [41.8719, 12.5674],   // Italy
+      '124': [56.1304, -106.3468], // Canada
+      '410': [35.9078, 127.7669],  // South Korea
+      '484': [23.6345, -102.5528], // Mexico
+      
+      // Default coordinates for unknown countries
+      'default': [0, 0]
+    };
+    
+    // Add circles for each country
+    sourceData.forEach(item => {
+      const code = item[chartOptions.countryCodeField];
+      const value = item[chartOptions.valueField];
+      const coords = countryCoordinates[code] || countryCoordinates.default;
+      
+      if (coords[0] !== 0 || coords[1] !== 0) {
+        // Size circle based on value
+        const radius = Math.max(5, Math.min(20, 5 + (value - min) / (max - min || 1) * 15));
+        
+        L.circleMarker(coords, {
+          radius: radius,
+          fillColor: getColor(value),
+          color: '#fff',
+          weight: 1,
+          opacity: 1,
+          fillOpacity: 0.8
+        })
+        .addTo(map)
+        .bindPopup(`
+          <strong>${item[chartOptions.labelField]}</strong><br>
+          Value: ${new Intl.NumberFormat().format(value)}
+        `);
+      }
+    });
+    
+    // Add legend
+    const legend = L.control({ position: 'bottomright' });
+    
+    legend.onAdd = function() {
+      const div = L.DomUtil.create('div', 'info legend');
+      div.style.backgroundColor = 'white';
+      div.style.padding = '10px';
+      div.style.borderRadius = '5px';
+      div.style.boxShadow = '0 0 5px rgba(0,0,0,0.2)';
+      
+      div.innerHTML = `
+        <div style="font-weight:bold;margin-bottom:5px;">${chartOptions.title}</div>
+        <div style="display:flex;align-items:center;margin-bottom:5px;">
+          <div style="width:20px;height:20px;background:${chartOptions.colorScale[0]};margin-right:5px;"></div>
+          <span>${new Intl.NumberFormat().format(min)}</span>
+        </div>
+        <div style="display:flex;align-items:center;">
+          <div style="width:20px;height:20px;background:${chartOptions.colorScale[1]};margin-right:5px;"></div>
+          <span>${new Intl.NumberFormat().format(max)}</span>
+        </div>
+      `;
+      
+      return div;
+    };
+    
+    legend.addTo(map);
+    
+    return map;
+  }
+
+  // Public API
+  return {
+    createBarChart,
+    createPieChart,
+    createLineChart,
+    createTreemap,
+    createWorldMapChart,
+    destroyChart
+  };
+})();