adminator-admin-dashboard 2.7.0

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

@@ -0,0 +1,148 @@
+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

@@ -0,0 +1,200 @@
+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

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

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

@@ -0,0 +1,208 @@
+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

@@ -0,0 +1,11 @@
+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();
+    });
+  }
+}())