Файловый менеджер

Файловый менеджер - Редактировать - /home/clickysoft/public_html/calvary-p2.clickysoft.net/public/assets/admin/js/dashboards-analytics.js

Назад
/** * Analytics Dashboard */ 'use strict'; (function () { let cardColor, headingColor, labelColor, legendColor, borderColor, shadeColor; if (isDarkStyle) { cardColor = config.colors_dark.cardColor; headingColor = config.colors_dark.headingColor; labelColor = config.colors_dark.textMuted; legendColor = config.colors_dark.bodyColor; borderColor = config.colors_dark.borderColor; shadeColor = 'dark'; } else { cardColor = config.colors.cardColor; headingColor = config.colors.headingColor; labelColor = config.colors.textMuted; legendColor = config.colors.bodyColor; borderColor = config.colors.borderColor; shadeColor = 'light'; } // Report Chart // -------------------------------------------------------------------- // Radial bar chart functions function radialBarChart(color, value) { const radialBarChartOpt = { chart: { height: 50, width: 50, type: 'radialBar' }, plotOptions: { radialBar: { hollow: { size: '25%' }, dataLabels: { show: false }, track: { background: borderColor } } }, stroke: { lineCap: 'round' }, colors: [color], grid: { padding: { top: -8, bottom: -10, left: -5, right: 0 } }, series: [value], labels: ['Progress'] }; return radialBarChartOpt; } const ReportchartList = document.querySelectorAll('.chart-report'); if (ReportchartList) { ReportchartList.forEach(function (ReportchartEl) { const color = config.colors[ReportchartEl.dataset.color], series = ReportchartEl.dataset.series; const optionsBundle = radialBarChart(color, series); const reportChart = new ApexCharts(ReportchartEl, optionsBundle); reportChart.render(); }); } // Analytics - Bar Chart // -------------------------------------------------------------------- const analyticsBarChartEl = document.querySelector('#analyticsBarChart'), analyticsBarChartConfig = { chart: { height: 250, type: 'bar', toolbar: { show: false } }, plotOptions: { bar: { horizontal: false, columnWidth: '20%', borderRadius: 3, startingShape: 'rounded' } }, dataLabels: { enabled: false }, colors: [config.colors.primary, config.colors_label.primary], series: [ { name: '2020', data: [8, 9, 15, 20, 14, 22, 29, 27, 13] }, { name: '2019', data: [5, 7, 12, 17, 9, 17, 26, 21, 10] } ], grid: { borderColor: borderColor, padding: { bottom: -8 } }, xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], axisBorder: { show: false }, axisTicks: { show: false }, labels: { style: { colors: labelColor } } }, yaxis: { min: 0, max: 30, tickAmount: 3, labels: { style: { colors: labelColor } } }, legend: { show: false }, tooltip: { y: { formatter: function (val) { return '$ ' + val + ' thousands'; } } } }; if (typeof analyticsBarChartEl !== undefined && analyticsBarChartEl !== null) { const analyticsBarChart = new ApexCharts(analyticsBarChartEl, analyticsBarChartConfig); analyticsBarChart.render(); } // Referral - Line Chart // -------------------------------------------------------------------- const referralLineChartEl = document.querySelector('#referralLineChart'), referralLineChartConfig = { series: [ { data: [0, 150, 25, 100, 15, 149] } ], chart: { height: 100, parentHeightOffset: 0, parentWidthOffset: 0, type: 'line', toolbar: { show: false } }, markers: { size: 6, colors: 'transparent', strokeColors: 'transparent', strokeWidth: 4, discrete: [ { fillColor: cardColor, seriesIndex: 0, dataPointIndex: 5, strokeColor: config.colors.success, strokeWidth: 4, size: 6, radius: 2 } ], hover: { size: 7 } }, dataLabels: { enabled: false }, stroke: { width: 4, curve: 'smooth' }, grid: { show: false, padding: { top: -25, bottom: -20 } }, colors: [config.colors.success], xaxis: { show: false, axisBorder: { show: false }, axisTicks: { show: false }, labels: { show: false } }, yaxis: { labels: { show: false } } }; if (typeof referralLineChartEl !== undefined && referralLineChartEl !== null) { const referralLineChart = new ApexCharts(referralLineChartEl, referralLineChartConfig); referralLineChart.render(); } // Conversion - Bar Chart // -------------------------------------------------------------------- const conversionBarChartEl = document.querySelector('#conversionBarchart'), conversionBarChartConfig = { chart: { height: 100, stacked: true, type: 'bar', toolbar: { show: false }, sparkline: { enabled: true } }, plotOptions: { bar: { columnWidth: '25%', borderRadius: 2, startingShape: 'rounded' }, distributed: true }, colors: [config.colors.primary, config.colors.warning], series: [ { name: 'New Clients', data: [75, 150, 225, 200, 35, 50, 150, 180, 50, 150, 240, 140, 75, 35, 60, 120] }, { name: 'Retained Clients', data: [-100, -55, -40, -120, -70, -40, -60, -50, -70, -30, -60, -40, -50, -70, -40, -50] } ], grid: { show: false, padding: { top: 0, bottom: -10 } }, legend: { show: false }, dataLabels: { enabled: false }, tooltip: { x: { show: false } } }; if (typeof conversionBarChartEl !== undefined && conversionBarChartEl !== null) { const conversionBarChart = new ApexCharts(conversionBarChartEl, conversionBarChartConfig); conversionBarChart.render(); } // Impression - Donut Chart // -------------------------------------------------------------------- const impressionDonutChartEl = document.querySelector('#impressionDonutChart'), impressionDonutChartConfig = { chart: { height: 185, fontFamily: 'IBM Plex Sans', type: 'donut' }, dataLabels: { enabled: false }, grid: { padding: { bottom: -10 } }, series: [80, 30, 60], labels: ['Social', 'Email', 'Search'], stroke: { width: 0, lineCap: 'round' }, colors: [config.colors.primary, config.colors.info, config.colors.warning], plotOptions: { pie: { donut: { size: '90%', labels: { show: true, name: { fontSize: '0.938rem', offsetY: 20 }, value: { show: true, fontSize: '1.625rem', fontFamily: 'Rubik', fontWeight: '500', color: headingColor, offsetY: -20, formatter: function (val) { return val; } }, total: { show: true, label: 'Impression', color: legendColor, formatter: function (w) { return w.globals.seriesTotals.reduce(function (a, b) { return a + b; }, 0); } } } } } }, legend: { show: true, position: 'bottom', horizontalAlign: 'center', labels: { colors: legendColor, useSeriesColors: false }, markers: { width: 10, height: 10, offsetX: -3 } } }; if (typeof impressionDonutChartEl !== undefined && impressionDonutChartEl !== null) { const impressionDonutChart = new ApexCharts(impressionDonutChartEl, impressionDonutChartConfig); impressionDonutChart.render(); } // Conversion - Gradient Line Chart // -------------------------------------------------------------------- const conversationChartEl = document.querySelector('#conversationChart'), conversationChartConfig = { series: [ { data: [50, 100, 0, 60, 20, 30] } ], chart: { height: 40, type: 'line', zoom: { enabled: false }, sparkline: { enabled: true }, toolbar: { show: false } }, dataLabels: { enabled: false }, tooltip: { enabled: false }, stroke: { curve: 'smooth', width: 3 }, grid: { show: false, padding: { top: 5, left: 10, right: 10, bottom: 5 } }, colors: [config.colors.primary], fill: { type: 'gradient', gradient: { shade: shadeColor, type: 'horizontal', gradientToColors: undefined, opacityFrom: 0, opacityTo: 0.9, stops: [0, 30, 70, 100] } }, xaxis: { labels: { show: false }, axisBorder: { show: false }, axisTicks: { show: false } }, yaxis: { labels: { show: false } } }; if (typeof conversationChartEl !== undefined && conversationChartEl !== null) { const conversationChart = new ApexCharts(conversationChartEl, conversationChartConfig); conversationChart.render(); } // Income - Gradient Line Chart // -------------------------------------------------------------------- const incomeChartEl = document.querySelector('#incomeChart'), incomeChartConfig = { series: [ { data: [40, 70, 38, 90, 40, 65] } ], chart: { height: 40, type: 'line', zoom: { enabled: false }, sparkline: { enabled: true }, toolbar: { show: false } }, dataLabels: { enabled: false }, tooltip: { enabled: false }, stroke: { curve: 'smooth', width: 3 }, grid: { show: false, padding: { top: 10, left: 10, right: 10, bottom: 0 } }, colors: [config.colors.warning], fill: { type: 'gradient', gradient: { shade: shadeColor, type: 'horizontal', gradientToColors: undefined, opacityFrom: 0, opacityTo: 0.9, stops: [0, 30, 70, 100] } }, xaxis: { labels: { show: false }, axisBorder: { show: false }, axisTicks: { show: false } }, yaxis: { labels: { show: false } } }; if (typeof incomeChartEl !== undefined && incomeChartEl !== null) { const incomeChart = new ApexCharts(incomeChartEl, incomeChartConfig); incomeChart.render(); } // Registrations Bar Chart // -------------------------------------------------------------------- const registrationsBarChartEl = document.querySelector('#registrationsBarChart'), registrationsBarChartConfig = { chart: { height: 95, width: 155, type: 'bar', toolbar: { show: false } }, plotOptions: { bar: { barHeight: '80%', columnWidth: '50%', startingShape: 'rounded', endingShape: 'rounded', borderRadius: 2, distributed: true } }, grid: { show: false, padding: { top: -20, bottom: -20, left: 0, right: 0 } }, colors: [ config.colors_label.warning, config.colors_label.warning, config.colors_label.warning, config.colors_label.warning, config.colors.warning, config.colors_label.warning, config.colors_label.warning ], dataLabels: { enabled: false }, series: [ { data: [30, 55, 45, 95, 70, 50, 65] } ], legend: { show: false }, xaxis: { categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S'], axisBorder: { show: false }, axisTicks: { show: false }, labels: { show: false } }, yaxis: { labels: { show: false } } }; if (typeof registrationsBarChartEl !== undefined && registrationsBarChartEl !== null) { const registrationsBarChart = new ApexCharts(registrationsBarChartEl, registrationsBarChartConfig); registrationsBarChart.render(); } // Sales Bar Chart // -------------------------------------------------------------------- const salesBarChartEl = document.querySelector('#salesChart'), salesBarChartConfig = { chart: { height: 120, parentHeightOffset: 0, type: 'bar', toolbar: { show: false } }, plotOptions: { bar: { barHeight: '100%', columnWidth: '25px', startingShape: 'rounded', endingShape: 'rounded', borderRadius: 5, distributed: true, colors: { backgroundBarColors: [ config.colors_label.primary, config.colors_label.primary, config.colors_label.primary, config.colors_label.primary ], backgroundBarRadius: 5 } } }, grid: { show: false, padding: { top: -30, left: -12, bottom: 10 } }, colors: [config.colors.primary], dataLabels: { enabled: false }, series: [ { data: [60, 35, 25, 75, 15, 42, 85] } ], legend: { show: false }, xaxis: { categories: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], axisBorder: { show: false }, axisTicks: { show: false }, labels: { style: { colors: labelColor, fontSize: '13px' } } }, yaxis: { labels: { show: false } }, responsive: [ { breakpoint: 1440, options: { plotOptions: { bar: { columnWidth: '30%' } } } }, { breakpoint: 1200, options: { plotOptions: { bar: { columnWidth: '15%' } } } }, { breakpoint: 768, options: { plotOptions: { bar: { columnWidth: '12%' } } } }, { breakpoint: 450, options: { plotOptions: { bar: { columnWidth: '19%' } } } } ] }; if (typeof salesBarChartEl !== undefined && salesBarChartEl !== null) { const salesBarChart = new ApexCharts(salesBarChartEl, salesBarChartConfig); salesBarChart.render(); } // Growth - Radial Bar Chart // -------------------------------------------------------------------- const growthRadialChartEl = document.querySelector('#growthRadialChart'), growthRadialChartConfig = { chart: { height: 230, fontFamily: 'IBM Plex Sans', type: 'radialBar', sparkline: { show: true } }, grid: { show: false, padding: { top: -25 } }, plotOptions: { radialBar: { size: 100, startAngle: -135, endAngle: 135, offsetY: 10, hollow: { size: '55%' }, track: { strokeWidth: '50%', background: cardColor }, dataLabels: { value: { offsetY: -15, color: headingColor, fontFamily: 'Rubik', fontWeight: 500, fontSize: '26px' }, name: { fontSize: '15px', color: legendColor, offsetY: 24 } } } }, colors: [config.colors.danger], fill: { type: 'gradient', gradient: { shade: 'dark', type: 'horizontal', shadeIntensity: 0.5, gradientToColors: [config.colors.primary], inverseColors: true, opacityFrom: 1, opacityTo: 1, stops: [0, 100] } }, stroke: { dashArray: 3 }, series: [78], labels: ['Growth'] }; if (typeof growthRadialChartEl !== undefined && growthRadialChartEl !== null) { const growthRadialChart = new ApexCharts(growthRadialChartEl, growthRadialChartConfig); growthRadialChart.render(); } })();

| ver. 1.4 | Github | . | PHP 8.1.29 | Генерация страницы: 0 | proxy | phpinfo | Настройка