adminator-admin-dashboard 2.8.1 → 4.1.5

package/src/assets/scripts/charts/chartJS/index.js

@@ -1,148 +0,0 @@
-import Chart from 'chart.js/auto';
-import { COLORS } from '../../constants/colors';
-
-export default (function () {
-  // ------------------------------------------------------
-  // @Line Charts
-  // ------------------------------------------------------
-
-  const lineChartBox = document.getElementById('line-chart');
-
-  if (lineChartBox) {
-    const lineCtx = lineChartBox.getContext('2d');
-    lineChartBox.height = 80;
-
-    new Chart(lineCtx, {
-      type: 'line',
-      data: {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [{
-          label                : 'Series A',
-          backgroundColor      : 'rgba(237, 231, 246, 0.5)',
-          borderColor          : COLORS['deep-purple-500'],
-          pointBackgroundColor : COLORS['deep-purple-700'],
-          borderWidth          : 2,
-          data                 : [60, 50, 70, 60, 50, 70, 60],
-        }, {
-          label                : 'Series B',
-          backgroundColor      : 'rgba(232, 245, 233, 0.5)',
-          borderColor          : COLORS['blue-500'],
-          pointBackgroundColor : COLORS['blue-700'],
-          borderWidth          : 2,
-          data                 : [70, 75, 85, 70, 75, 85, 70],
-        }],
-      },
-
-      options: {
-        legend: {
-          display: false,
-        },
-      },
-
-    });
-  }
-
-  // ------------------------------------------------------
-  // @Bar Charts
-  // ------------------------------------------------------
-
-  const barChartBox = document.getElementById('bar-chart');
-
-  if (barChartBox) {
-    const barCtx = barChartBox.getContext('2d');
-
-    new Chart(barCtx, {
-      type: 'bar',
-      data: {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [{
-          label           : 'Dataset 1',
-          backgroundColor : COLORS['deep-purple-500'],
-          borderColor     : COLORS['deep-purple-800'],
-          borderWidth     : 1,
-          data            : [10, 50, 20, 40, 60, 30, 70],
-        }, {
-          label           : 'Dataset 2',
-          backgroundColor : COLORS['light-blue-500'],
-          borderColor     : COLORS['light-blue-800'],
-          borderWidth     : 1,
-          data            : [10, 50, 20, 40, 60, 30, 70],
-        }],
-      },
-
-      options: {
-        responsive: true,
-        legend: {
-          position: 'bottom',
-        },
-      },
-    });
-  }
-
-  // ------------------------------------------------------
-  // @Area Charts
-  // ------------------------------------------------------
-
-  const areaChartBox = document.getElementById('area-chart');
-
-  if (areaChartBox) {
-    const areaCtx = areaChartBox.getContext('2d');
-
-    new Chart(areaCtx, {
-      type: 'line',
-      data: {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [{
-          backgroundColor : 'rgba(3, 169, 244, 0.5)',
-          borderColor     : COLORS['light-blue-800'],
-          data            : [10, 50, 20, 40, 60, 30, 70],
-          label           : 'Dataset',
-          fill            : 'start',
-        }],
-      },
-    });
-  }
-
-  // ------------------------------------------------------
-  // @Scatter Charts
-  // ------------------------------------------------------
-
-  const scatterChartBox = document.getElementById('scatter-chart');
-
-  if (scatterChartBox) {
-    const scatterCtx = scatterChartBox.getContext('2d');
-
-    new Chart(scatterCtx, {
-      type: 'scatter',
-      data: {
-        datasets: [{
-          label           : 'My First dataset',
-          borderColor     : COLORS['red-500'],
-          backgroundColor : COLORS['red-500'],
-          data: [
-            { x: 10, y: 20 },
-            { x: 30, y: 40 },
-            { x: 50, y: 60 },
-            { x: 70, y: 80 },
-            { x: 90, y: 100 },
-            { x: 110, y: 120 },
-            { x: 130, y: 140 },
-          ],
-        }, {
-          label           : 'My Second dataset',
-          borderColor     : COLORS['green-500'],
-          backgroundColor : COLORS['green-500'],
-          data: [
-            { x: 150, y: 160 },
-            { x: 170, y: 180 },
-            { x: 190, y: 200 },
-            { x: 210, y: 220 },
-            { x: 230, y: 240 },
-            { x: 250, y: 260 },
-            { x: 270, y: 280 },
-          ],
-        }],
-      },
-    });
-  }
-}())

package/src/assets/scripts/charts/easyPieChart/index.js

@@ -1,200 +0,0 @@
-import Theme from '../../utils/theme.js';
-
-export default (function () {
-  
-  // Vanilla JS Pie Chart implementation using SVG
-  class VanillaPieChart {
-    constructor(element, options = {}) {
-      this.element = element;
-      this.options = {
-        size: 110,
-        lineWidth: 3,
-        lineCap: 'round',
-        trackColor: '#f2f2f2',
-        barColor: '#ef1e25',
-        scaleColor: false,
-        animate: 1000,
-        onStep: null,
-        ...options,
-      };
-      
-      this.percentage = parseInt(element.dataset.percent || 0);
-      this.init();
-    }
-    
-    init() {
-      this.createSVG();
-      this.animate();
-    }
-    
-    createSVG() {
-      const size = this.options.size;
-      const lineWidth = this.options.lineWidth;
-      const radius = (size - lineWidth) / 2;
-      const circumference = 2 * Math.PI * radius;
-      
-      // Create SVG element
-      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-      svg.setAttribute('width', size);
-      svg.setAttribute('height', size);
-      svg.style.transform = 'rotate(-90deg)';
-      
-      // Create track (background circle)
-      const track = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-      track.setAttribute('cx', size / 2);
-      track.setAttribute('cy', size / 2);
-      track.setAttribute('r', radius);
-      track.setAttribute('fill', 'none');
-      track.setAttribute('stroke', this.options.trackColor);
-      track.setAttribute('stroke-width', lineWidth);
-      
-      // Create bar (progress circle)
-      const bar = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-      bar.setAttribute('cx', size / 2);
-      bar.setAttribute('cy', size / 2);
-      bar.setAttribute('r', radius);
-      bar.setAttribute('fill', 'none');
-      bar.setAttribute('stroke', this.options.barColor);
-      bar.setAttribute('stroke-width', lineWidth);
-      bar.setAttribute('stroke-linecap', this.options.lineCap);
-      bar.setAttribute('stroke-dasharray', circumference);
-      bar.setAttribute('stroke-dashoffset', circumference);
-      
-      // Add elements to SVG
-      svg.appendChild(track);
-      svg.appendChild(bar);
-      
-      // Clear element and add SVG
-      this.element.innerHTML = '';
-      this.element.appendChild(svg);
-      
-      // Add percentage text
-      const textElement = document.createElement('div');
-      textElement.style.position = 'absolute';
-      textElement.style.top = '50%';
-      textElement.style.left = '50%';
-      textElement.style.transform = 'translate(-50%, -50%)';
-      textElement.style.fontSize = '14px';
-      textElement.style.fontWeight = 'bold';
-      textElement.style.color = Theme.getCSSVar('--c-text-base') || '#333';
-      textElement.textContent = '0%';
-      
-      this.element.style.position = 'relative';
-      this.element.appendChild(textElement);
-      
-      // Store references
-      this.svg = svg;
-      this.bar = bar;
-      this.textElement = textElement;
-      this.circumference = circumference;
-    }
-    
-    animate() {
-      const targetOffset = this.circumference - (this.percentage / 100) * this.circumference;
-      const duration = this.options.animate;
-      const startTime = Date.now();
-      const startOffset = this.circumference;
-      
-      const animateStep = () => {
-        const elapsed = Date.now() - startTime;
-        const progress = Math.min(elapsed / duration, 1);
-        
-        // Easing function (easeOutCubic)
-        const easeProgress = 1 - Math.pow(1 - progress, 3);
-        
-        const currentOffset = startOffset - (startOffset - targetOffset) * easeProgress;
-        const currentPercent = ((this.circumference - currentOffset) / this.circumference) * 100;
-        
-        this.bar.setAttribute('stroke-dashoffset', currentOffset);
-        this.textElement.textContent = `${Math.round(currentPercent)}%`;
-        
-        // Call onStep callback if provided
-        if (this.options.onStep) {
-          this.options.onStep.call(this, 0, this.percentage, currentPercent);
-        }
-        
-        if (progress < 1) {
-          requestAnimationFrame(animateStep);
-        }
-      };
-      
-      requestAnimationFrame(animateStep);
-    }
-    
-    update(percentage) {
-      this.percentage = percentage;
-      this.animate();
-    }
-    
-    destroy() {
-      if (this.element) {
-        this.element.innerHTML = '';
-      }
-    }
-  }
-  
-  // Initialize all pie charts
-  const initializePieCharts = () => {
-    const pieChartElements = document.querySelectorAll('.easy-pie-chart');
-    
-    pieChartElements.forEach(element => {
-      // Skip if already initialized
-      if (element.pieChartInstance) {
-        element.pieChartInstance.destroy();
-      }
-      
-      // Get theme colors
-      const isDark = Theme.current() === 'dark';
-      const barColor = element.dataset.barColor || (isDark ? '#4f46e5' : '#ef4444');
-      const trackColor = element.dataset.trackColor || (isDark ? '#374151' : '#f3f4f6');
-      
-      // Create pie chart instance
-      const pieChart = new VanillaPieChart(element, {
-        size: parseInt(element.dataset.size || 110),
-        lineWidth: parseInt(element.dataset.lineWidth || 3),
-        barColor,
-        trackColor,
-        animate: parseInt(element.dataset.animate || 1000),
-        onStep(from, to, percent) {
-          // Update the percentage display
-          const textElement = this.element.querySelector('div');
-          if (textElement) {
-            textElement.innerHTML = `${Math.round(percent)}%`;
-          }
-        },
-      });
-      
-      // Store instance for cleanup
-      element.pieChartInstance = pieChart;
-    });
-  };
-  
-  // Initialize on load
-  initializePieCharts();
-  
-  // Reinitialize on theme change
-  window.addEventListener('adminator:themeChanged', () => {
-    setTimeout(initializePieCharts, 100);
-  });
-  
-  // Reinitialize on window resize
-  window.addEventListener('resize', () => {
-    setTimeout(initializePieCharts, 100);
-  });
-  
-  // Cleanup on page unload
-  window.addEventListener('beforeunload', () => {
-    const pieChartElements = document.querySelectorAll('.easy-pie-chart');
-    pieChartElements.forEach(element => {
-      if (element.pieChartInstance) {
-        element.pieChartInstance.destroy();
-      }
-    });
-  });
-  
-  // Return public API
-  return {
-    init: initializePieCharts,
-    VanillaPieChart,
-  };
-}());

package/src/assets/scripts/charts/index.js

@@ -1,3 +0,0 @@
-import './chartJS';
-import './easyPieChart';
-import './sparkline';

package/src/assets/scripts/charts/sparkline/index.js

@@ -1,208 +0,0 @@
-import { Chart, registerables } from 'chart.js';
-import { debounce } from 'lodash';
-import { COLORS } from '../../constants/colors';
-import Theme from '../../utils/theme.js';
-
-// Register Chart.js components
-Chart.register(...registerables);
-
-export default (function () {
-  // Store chart instances for cleanup
-  let chartInstances = [];
-
-  // ------------------------------------------------------
-  // @Sparkline Chart Creation Helpers
-  // ------------------------------------------------------
-
-  const createSparklineChart = (elementId, data, color, type = 'bar') => {
-    const element = document.getElementById(elementId);
-    if (!element) return null;
-
-    // Clear existing chart
-    const existingChart = chartInstances.find(chart => chart.canvas.id === elementId);
-    if (existingChart) {
-      existingChart.destroy();
-      chartInstances = chartInstances.filter(chart => chart.canvas.id !== elementId);
-    }
-
-    // Create canvas if it doesn't exist
-    let canvas = element.querySelector('canvas');
-    if (!canvas) {
-      canvas = document.createElement('canvas');
-      canvas.id = `${elementId  }-canvas`;
-      element.appendChild(canvas);
-    }
-
-    // Set canvas size
-    canvas.width = element.offsetWidth || 100;
-    canvas.height = 20;
-
-    const ctx = canvas.getContext('2d');
-    
-    const chartConfig = {
-      type,
-      data: {
-        labels: data.map((_, index) => index),
-        datasets: [{
-          data,
-          backgroundColor: color,
-          borderColor: color,
-          borderWidth: type === 'line' ? 2 : 0,
-          barThickness: 3,
-          categoryPercentage: 1.0,
-          barPercentage: 0.8,
-          fill: false,
-          pointRadius: 0,
-          pointHoverRadius: 0,
-        }],
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-          legend: {
-            display: false,
-          },
-          tooltip: {
-            enabled: false,
-          },
-        },
-        scales: {
-          x: {
-            display: false,
-            grid: {
-              display: false,
-            },
-          },
-          y: {
-            display: false,
-            grid: {
-              display: false,
-            },
-          },
-        },
-        elements: {
-          bar: {
-            borderRadius: 0,
-          },
-          line: {
-            tension: 0.1,
-          },
-        },
-        layout: {
-          padding: 0,
-        },
-      },
-    };
-
-    const chart = new Chart(ctx, chartConfig);
-    chartInstances.push(chart);
-    return chart;
-  };
-
-  const createSparklineForElements = (selector, data, color, type = 'bar') => {
-    const elements = document.querySelectorAll(selector);
-    elements.forEach((element, index) => {
-      const elementId = element.id || `sparkline-${selector.replace(/[^a-zA-Z0-9]/g, '')}-${index}`;
-      if (!element.id) element.id = elementId;
-      createSparklineChart(elementId, data, color, type);
-    });
-  };
-
-  // ------------------------------------------------------
-  // @Dashboard Sparklines
-  // ------------------------------------------------------
-
-  const drawSparklines = () => {
-    const sparkColors = Theme.getSparklineColors();
-    const data = [0, 5, 6, 10, 9, 12, 4, 9];
-    
-    // Dashboard sparklines
-    createSparklineChart('sparklinedash', data, sparkColors.success);
-    createSparklineChart('sparklinedash2', data, sparkColors.purple);
-    createSparklineChart('sparklinedash3', data, sparkColors.info);
-    createSparklineChart('sparklinedash4', data, sparkColors.danger);
-  };
-
-  // ------------------------------------------------------
-  // @Other Sparklines
-  // ------------------------------------------------------
-
-  const drawOtherSparklines = () => {
-    const sparkColors = Theme.getSparklineColors();
-    
-    // Line sparklines
-    createSparklineChart('sparkline', [5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7], COLORS['red-500'], 'line');
-    
-    // Composite bar - simplified implementation
-    createSparklineChart('compositebar', [4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7], sparkColors.light);
-    
-    // Normal line
-    createSparklineChart('normalline', [5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7], sparkColors.info, 'line');
-    
-    // Various sparkline types for elements with classes
-    const values = [5, 4, 5, -2, 0, 3, -5, 6, 7, 9, 9, 5, -3, -2, 2, -4];
-    const valuesAlt = [1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1];
-
-    // Line sparklines
-    createSparklineForElements('.sparkline', values, COLORS['red-500'], 'line');
-    
-    // Bar sparklines
-    createSparklineForElements('.sparkbar', values, COLORS['deep-purple-500'], 'bar');
-    
-    // Tristate sparklines (simplified as bar charts)
-    createSparklineForElements('.sparktri', valuesAlt, COLORS['light-blue-500'], 'bar');
-    createSparklineForElements('.sparktristate', valuesAlt, sparkColors.info, 'bar');
-    createSparklineForElements('.sparktristatecols', valuesAlt, '#fa7', 'bar');
-    
-    // Discrete sparklines (as line charts)
-    createSparklineForElements('.sparkdisc', values, '#9f0', 'line');
-    
-    // Bullet sparklines (simplified as bar charts)
-    createSparklineForElements('.sparkbull', values, COLORS['amber-500'], 'bar');
-    
-    // Box sparklines (simplified as bar charts)
-    createSparklineForElements('.sparkbox', values, '#9f0', 'bar');
-  };
-
-  // ------------------------------------------------------
-  // @Initialization
-  // ------------------------------------------------------
-
-  const initializeSparklines = () => {
-    drawSparklines();
-    drawOtherSparklines();
-  };
-
-  // Initial draw
-  initializeSparklines();
-
-  // Redraw sparklines on window resize
-  window.addEventListener('resize', debounce(initializeSparklines, 150));
-  
-  // Listen for theme changes
-  window.addEventListener('adminator:themeChanged', debounce(initializeSparklines, 150));
-
-  // Cleanup function for chart instances
-  window.addEventListener('beforeunload', () => {
-    chartInstances.forEach(chart => {
-      if (chart && typeof chart.destroy === 'function') {
-        chart.destroy();
-      }
-    });
-    chartInstances = [];
-  });
-
-  // Export for external access
-  return {
-    redraw: initializeSparklines,
-    destroy: () => {
-      chartInstances.forEach(chart => {
-        if (chart && typeof chart.destroy === 'function') {
-          chart.destroy();
-        }
-      });
-      chartInstances = [];
-    },
-  };
-}());

package/src/assets/scripts/chat/index.js

@@ -1,11 +0,0 @@
-export default (function () {
-  const chatSidebarToggle = document.getElementById('chat-sidebar-toggle');
-  const chatSidebar = document.getElementById('chat-sidebar');
-  
-  if (chatSidebarToggle && chatSidebar) {
-    chatSidebarToggle.addEventListener('click', e => {
-      chatSidebar.classList.toggle('open');
-      e.preventDefault();
-    });
-  }
-}())