Server IP : 150.95.80.236 / Your IP : 18.117.229.33 Web Server : Apache System : Linux host-150-95-80-236 3.10.0-1160.105.1.el7.x86_64 #1 SMP Thu Dec 7 15:39:45 UTC 2023 x86_64 User : social-telecare ( 10000) PHP Version : 7.4.33 Disable Function : opcache_get_status MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/vhosts/pcu.in.th/uat.pcu.in.th/demo15/src/js/custom/ |
Upload File : |
"use strict"; // Class definition var KTWidgets = function () { // Statistics widgets var initStatisticsWidget3 = function() { var charts = document.querySelectorAll('.statistics-widget-3-chart'); [].slice.call(charts).map(function(element) { var height = parseInt(KTUtil.css(element, 'height')); if ( !element ) { return; } var color = element.getAttribute('data-kt-chart-color'); var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); var baseColor = KTUtil.getCssVariableValue('--bs-' + color); var lightColor = KTUtil.getCssVariableValue('--bs-light-' + color ); var options = { series: [{ name: 'Net Profit', data: [30, 45, 32, 70, 40] }], chart: { fontFamily: 'inherit', type: 'area', height: height, toolbar: { show: false }, zoom: { enabled: false }, sparkline: { enabled: true } }, plotOptions: {}, legend: { show: false }, dataLabels: { enabled: false }, fill: { type: 'solid', opacity: 0.3 }, stroke: { curve: 'smooth', show: true, width: 3, colors: [baseColor] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } }, crosshairs: { show: false, position: 'front', stroke: { color: '#E4E6EF', width: 1, dashArray: 3 } }, tooltip: { enabled: true, formatter: undefined, offsetY: 0, style: { fontSize: '12px' } } }, yaxis: { min: 0, max: 80, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } } }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function(val) { return "$" + val + " thousands" } } }, colors: [baseColor], markers: { colors: [baseColor], strokeColor: [lightColor], strokeWidth: 3 } }; var chart = new ApexCharts(element, options); chart.render(); }); } var initStatisticsWidget4 = function() { var charts = document.querySelectorAll('.statistics-widget-4-chart'); [].slice.call(charts).map(function(element) { var height = parseInt(KTUtil.css(element, 'height')); if ( !element ) { return; } var color = element.getAttribute('data-kt-chart-color'); var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); var baseColor = KTUtil.getCssVariableValue('--bs-' + color); var lightColor = KTUtil.getCssVariableValue('--bs-light-' + color ); var options = { series: [{ name: 'Net Profit', data: [40, 40, 30, 30, 35, 35, 50] }], chart: { fontFamily: 'inherit', type: 'area', height: height, toolbar: { show: false }, zoom: { enabled: false }, sparkline: { enabled: true } }, plotOptions: {}, legend: { show: false }, dataLabels: { enabled: false }, fill: { type: 'solid', opacity: 0.3 }, stroke: { curve: 'smooth', show: true, width: 3, colors: [baseColor] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } }, crosshairs: { show: false, position: 'front', stroke: { color: '#E4E6EF', width: 1, dashArray: 3 } }, tooltip: { enabled: true, formatter: undefined, offsetY: 0, style: { fontSize: '12px' } } }, yaxis: { min: 0, max: 60, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } } }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function(val) { return "$" + val + " thousands" } } }, colors: [baseColor], markers: { colors: [baseColor], strokeColor: [lightColor], strokeWidth: 3 } }; var chart = new ApexCharts(element, options); chart.render(); }); } // Charts widgets var initChartsWidget1 = function() { var element = document.getElementById("kt_charts_widget_1_chart"); var height = parseInt(KTUtil.css(element, 'height')); var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); var baseColor = KTUtil.getCssVariableValue('--bs-primary'); var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300'); if (!element) { return; } var options = { series: [{ name: 'Net Profit', data: [44, 55, 57, 56, 61, 58] }, { name: 'Revenue', data: [76, 85, 101, 98, 87, 105] }], chart: { fontFamily: 'inherit', type: 'bar', height: height, toolbar: { show: false } }, plotOptions: { bar: { horizontal: false, columnWidth: ['30%'], borderRadius: 4 }, }, legend: { show: false }, dataLabels: { enabled: false }, stroke: { show: true, width: 2, colors: ['transparent'] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { style: { colors: labelColor, fontSize: '12px' } } }, yaxis: { labels: { style: { colors: labelColor, fontSize: '12px' } } }, fill: { opacity: 1 }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } } }, colors: [baseColor, secondaryColor], grid: { borderColor: borderColor, strokeDashArray: 4, yaxis: { lines: { show: true } } } }; var chart = new ApexCharts(element, options); chart.render(); } var initChartsWidget2 = function() { var element = document.getElementById("kt_charts_widget_2_chart"); var height = parseInt(KTUtil.css(element, 'height')); var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); var baseColor = KTUtil.getCssVariableValue('--bs-warning'); var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300'); if (!element) { return; } var options = { series: [{ name: 'Net Profit', data: [44, 55, 57, 56, 61, 58] }, { name: 'Revenue', data: [76, 85, 101, 98, 87, 105] }], chart: { fontFamily: 'inherit', type: 'bar', height: height, toolbar: { show: false } }, plotOptions: { bar: { horizontal: false, columnWidth: ['30%'], borderRadius: 4 }, }, legend: { show: false }, dataLabels: { enabled: false }, stroke: { show: true, width: 2, colors: ['transparent'] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { style: { colors: labelColor, fontSize: '12px' } } }, yaxis: { labels: { style: { colors: labelColor, fontSize: '12px' } } }, fill: { opacity: 1 }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } } }, colors: [baseColor, secondaryColor], grid: { borderColor: borderColor, strokeDashArray: 4, yaxis: { lines: { show: true } } } }; var chart = new ApexCharts(element, options); chart.render(); } var initChartsWidget3 = function() { var element = document.getElementById("kt_charts_widget_3_chart"); var height = parseInt(KTUtil.css(element, 'height')); var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); var baseColor = KTUtil.getCssVariableValue('--bs-info'); var lightColor = KTUtil.getCssVariableValue('--bs-light-info'); if (!element) { return; } var options = { series: [{ name: 'Net Profit', data: [30, 40, 40, 90, 90, 70, 70] }], chart: { fontFamily: 'inherit', type: 'area', height: 350, toolbar: { show: false } }, plotOptions: { }, legend: { show: false }, dataLabels: { enabled: false }, fill: { type: 'solid', opacity: 1 }, stroke: { curve: 'smooth', show: true, width: 3, colors: [baseColor] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { style: { colors: labelColor, fontSize: '12px' } }, crosshairs: { position: 'front', stroke: { color: baseColor, width: 1, dashArray: 3 } }, tooltip: { enabled: true, formatter: undefined, offsetY: 0, style: { fontSize: '12px' } } }, yaxis: { labels: { style: { colors: labelColor, fontSize: '12px' } } }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } } }, colors: [lightColor], grid: { borderColor: borderColor, strokeDashArray: 4, yaxis: { lines: { show: true } } }, markers: { strokeColor: baseColor, strokeWidth: 3 } }; var chart = new ApexCharts(element, options); chart.render(); } var initChartsWidget4 = function() { var element = document.getElementById("kt_charts_widget_4_chart"); var height = parseInt(KTUtil.css(element, 'height')); var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); var baseColor = KTUtil.getCssVariableValue('--bs-success'); var baseLightColor = KTUtil.getCssVariableValue('--bs-light-success'); var secondaryColor = KTUtil.getCssVariableValue('--bs-warning'); var secondaryLightColor = KTUtil.getCssVariableValue('--bs-light-warning'); if (!element) { return; } var options = { series: [{ name: 'Net Profit', data: [60, 50, 80, 40, 100, 60] }, { name: 'Revenue', data: [70, 60, 110, 40, 50, 70] }], chart: { fontFamily: 'inherit', type: 'area', height: 350, toolbar: { show: false } }, plotOptions: {}, legend: { show: false }, dataLabels: { enabled: false }, fill: { type: 'solid', opacity: 1 }, stroke: { curve: 'smooth' }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { style: { colors: labelColor, fontSize: '12px' } }, crosshairs: { position: 'front', stroke: { color: labelColor, width: 1, dashArray: 3 } }, tooltip: { enabled: true, formatter: undefined, offsetY: 0, style: { fontSize: '12px' } } }, yaxis: { labels: { style: { colors: labelColor, fontSize: '12px' } } }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } } }, colors: [baseColor, secondaryColor], grid: { borderColor: borderColor, strokeDashArray: 4, yaxis: { lines: { show: true } } }, markers: { colors: [baseLightColor, secondaryLightColor], strokeColor: [baseLightColor, secondaryLightColor], strokeWidth: 3 } }; var chart = new ApexCharts(element, options); chart.render(); } var initChartsWidget5 = function() { var element = document.getElementById("kt_charts_widget_5_chart"); var height = parseInt(KTUtil.css(element, 'height')); var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); var baseColor = KTUtil.getCssVariableValue('--bs-primary'); var secondaryColor = KTUtil.getCssVariableValue('--bs-info'); if (!element) { return; } var options = { series: [{ name: 'Net Profit', data: [40, 50, 65, 70, 50, 30] }, { name: 'Revenue', data: [-30, -40, -55, -60, -40, -20] }], chart: { fontFamily: 'inherit', type: 'bar', stacked: true, height: 350, toolbar: { show: false } }, plotOptions: { bar: { horizontal: false, columnWidth: ['12%'], borderRadius: 4 }, }, legend: { show: false }, dataLabels: { enabled: false }, stroke: { show: true, width: 2, colors: ['transparent'] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { style: { colors: labelColor, fontSize: '12px' } } }, yaxis: { min: -80, max: 80, labels: { style: { colors: labelColor, fontSize: '12px' } } }, fill: { opacity: 1 }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } } }, colors: [baseColor, secondaryColor], grid: { borderColor: borderColor, strokeDashArray: 4, yaxis: { lines: { show: true } } } }; var chart = new ApexCharts(element, options); chart.render(); } var initChartsWidget6 = function() { var element = document.getElementById("kt_charts_widget_6_chart"); var height = parseInt(KTUtil.css(element, 'height')); var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); var baseColor = KTUtil.getCssVariableValue('--bs-primary'); var baseLightColor = KTUtil.getCssVariableValue('--bs-light-primary'); var secondaryColor = KTUtil.getCssVariableValue('--bs-info'); if (!element) { return; } var options = { series: [{ name: 'Net Profit', type: 'bar', stacked: true, data: [40, 50, 65, 70, 50, 30] }, { name: 'Revenue', type: 'bar', stacked: true, data: [20, 20, 25, 30, 30, 20] }, { name: 'Expenses', type: 'area', data: [50, 80, 60, 90, 50, 70] }], chart: { fontFamily: 'inherit', stacked: true, height: 350, toolbar: { show: false } }, plotOptions: { bar: { stacked: true, horizontal: false, borderRadius: 4, columnWidth: ['12%'] }, }, legend: { show: false }, dataLabels: { enabled: false }, stroke: { curve: 'smooth', show: true, width: 2, colors: ['transparent'] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { style: { colors: labelColor, fontSize: '12px' } } }, yaxis: { max: 120, labels: { style: { colors: labelColor, fontSize: '12px' } } }, fill: { opacity: 1 }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } } }, colors: [baseColor, secondaryColor, baseLightColor], grid: { borderColor: borderColor, strokeDashArray: 4, yaxis: { lines: { show: true } }, padding: { top: 0, right: 0, bottom: 0, left: 0 } } }; var chart = new ApexCharts(element, options); chart.render(); } var initChartsWidget7 = function() { var element = document.getElementById("kt_charts_widget_7_chart"); var height = parseInt(KTUtil.css(element, 'height')); var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); var strokeColor = KTUtil.getCssVariableValue('--bs-gray-300'); var color1 = KTUtil.getCssVariableValue('--bs-warning'); var color1Light = KTUtil.getCssVariableValue('--bs-light-warning'); var color2 = KTUtil.getCssVariableValue('--bs-success'); var color2Light = KTUtil.getCssVariableValue('--bs-light-success'); var color3 = KTUtil.getCssVariableValue('--bs-primary'); var color3Light = KTUtil.getCssVariableValue('--bs-light-primary'); if (!element) { return; } var options = { series: [{ name: 'Net Profit', data: [30, 30, 50, 50, 35, 35] }, { name: 'Revenue', data: [55, 20, 20, 20, 70, 70] }, { name: 'Expenses', data: [60, 60, 40, 40, 30, 30] }], chart: { fontFamily: 'inherit', type: 'area', height: height, toolbar: { show: false }, zoom: { enabled: false }, sparkline: { enabled: true } }, plotOptions: {}, legend: { show: false }, dataLabels: { enabled: false }, fill: { type: 'solid', opacity: 1 }, stroke: { curve: 'smooth', show: true, width: 2, colors: [color1, 'transparent', 'transparent'] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } }, crosshairs: { show: false, position: 'front', stroke: { color: strokeColor, width: 1, dashArray: 3 } }, tooltip: { enabled: true, formatter: undefined, offsetY: 0, style: { fontSize: '12px' } } }, yaxis: { labels: { show: false, style: { colors: labelColor, fontSize: '12px' } } }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } } }, colors: [color1, color2, color3], grid: { borderColor: borderColor, strokeDashArray: 4, yaxis: { lines: { show: true } } }, markers: { colors: [color1Light, color2Light, color3Light], strokeColor: [color1, color2, color3], strokeWidth: 3 } }; var chart = new ApexCharts(element, options); chart.render(); } var initChartsWidget8 = function() { var element = document.getElementById("kt_charts_widget_8_chart"); var height = parseInt(KTUtil.css(element, 'height')); var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); var strokeColor = KTUtil.getCssVariableValue('--bs-gray-300'); var color1 = KTUtil.getCssVariableValue('--bs-warning'); var color1Light = KTUtil.getCssVariableValue('--bs-light-warning'); var color2 = KTUtil.getCssVariableValue('--bs-success'); var color2Light = KTUtil.getCssVariableValue('--bs-light-success'); var color3 = KTUtil.getCssVariableValue('--bs-primary'); var color3Light = KTUtil.getCssVariableValue('--bs-light-primary'); if (!element) { return; } var options = { series: [{ name: 'Net Profit', data: [30, 30, 50, 50, 35, 35] }, { name: 'Revenue', data: [55, 20, 20, 20, 70, 70] }, { name: 'Expenses', data: [60, 60, 40, 40, 30, 30] },], chart: { fontFamily: 'inherit', type: 'area', height: height, toolbar: { show: false }, zoom: { enabled: false }, sparkline: { enabled: true } }, plotOptions: {}, legend: { show: false }, dataLabels: { enabled: false }, fill: { type: 'solid', opacity: 1 }, stroke: { curve: 'smooth', show: true, width: 2, colors: [color1, color2, color3] }, xaxis: { x: 0, offsetX: 0, offsetY: 0, padding: { left: 0, right: 0, top: 0, }, categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } }, crosshairs: { show: false, position: 'front', stroke: { color: strokeColor, width: 1, dashArray: 3 } }, tooltip: { enabled: true, formatter: undefined, offsetY: 0, style: { fontSize: '12px' } } }, yaxis: { y: 0, offsetX: 0, offsetY: 0, padding: { left: 0, right: 0 }, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } } }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } } }, colors: [color1Light, color2Light, color3Light], grid: { borderColor: borderColor, strokeDashArray: 4, padding: { top: 0, bottom: 0, left: 0, right: 0 } }, markers: { colors: [color1, color2, color3], strokeColor: [color1, color2, color3], strokeWidth: 3 } }; var chart = new ApexCharts(element, options); chart.render(); } // Mixed widgets var initMixedWidget2 = function() { var charts = document.querySelectorAll('.mixed-widget-2-chart'); var color; var strokeColor; var height; var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); var options; var chart; [].slice.call(charts).map(function(element) { height = parseInt(KTUtil.css(element, 'height')); color = KTUtil.getCssVariableValue('--bs-' + element.getAttribute("data-kt-color")); strokeColor = KTUtil.colorDarken(color, 15); options = { series: [{ name: 'Net Profit', data: [30, 45, 32, 70, 40, 40, 40] }], chart: { fontFamily: 'inherit', type: 'area', height: height, toolbar: { show: false }, zoom: { enabled: false }, sparkline: { enabled: true }, dropShadow: { enabled: true, enabledOnSeries: undefined, top: 5, left: 0, blur: 3, color: strokeColor, opacity: 0.5 } }, plotOptions: {}, legend: { show: false }, dataLabels: { enabled: false }, fill: { type: 'solid', opacity: 0 }, stroke: { curve: 'smooth', show: true, width: 3, colors: [strokeColor] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } }, crosshairs: { show: false, position: 'front', stroke: { color: borderColor, width: 1, dashArray: 3 } } }, yaxis: { min: 0, max: 80, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } } }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px', }, y: { formatter: function (val) { return "$" + val + " thousands" } }, marker: { show: false } }, colors: ['transparent'], markers: { colors: [color], strokeColor: [strokeColor], strokeWidth: 3 } }; chart = new ApexCharts(element, options); chart.render(); }); } var initMixedWidget3 = function() { var charts = document.querySelectorAll('.mixed-widget-3-chart'); [].slice.call(charts).map(function(element) { var height = parseInt(KTUtil.css(element, 'height')); if ( !element ) { return; } var color = element.getAttribute('data-kt-chart-color'); var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); var strokeColor = KTUtil.getCssVariableValue('--bs-' + 'gray-300'); var baseColor = KTUtil.getCssVariableValue('--bs-' + color); var lightColor = KTUtil.getCssVariableValue('--bs-light-' + color ); var options = { series: [{ name: 'Net Profit', data: [30, 25, 45, 30, 55, 55] }], chart: { fontFamily: 'inherit', type: 'area', height: height, toolbar: { show: false }, zoom: { enabled: false }, sparkline: { enabled: true } }, plotOptions: {}, legend: { show: false }, dataLabels: { enabled: false }, fill: { type: 'solid', opacity: 1 }, stroke: { curve: 'smooth', show: true, width: 3, colors: [baseColor] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } }, crosshairs: { show: false, position: 'front', stroke: { color: strokeColor, width: 1, dashArray: 3 } }, tooltip: { enabled: true, formatter: undefined, offsetY: 0, style: { fontSize: '12px' } } }, yaxis: { min: 0, max: 60, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } } }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } } }, colors: [lightColor], markers: { colors: [lightColor], strokeColor: [baseColor], strokeWidth: 3 } }; var chart = new ApexCharts(element, options); chart.render(); }); } var initMixedWidget4 = function() { var charts = document.querySelectorAll('.mixed-widget-4-chart'); [].slice.call(charts).map(function(element) { var height = parseInt(KTUtil.css(element, 'height')); if ( !element ) { return; } var color = element.getAttribute('data-kt-chart-color'); var baseColor = KTUtil.getCssVariableValue('--bs-' + color); var lightColor = KTUtil.getCssVariableValue('--bs-light-' + color ); var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-700'); var options = { series: [74], chart: { fontFamily: 'inherit', height: height, type: 'radialBar', }, plotOptions: { radialBar: { hollow: { margin: 0, size: "65%" }, dataLabels: { showOn: "always", name: { show: false, fontWeight: '700' }, value: { color: labelColor, fontSize: "30px", fontWeight: '700', offsetY: 12, show: true, formatter: function (val) { return val + '%'; } } }, track: { background: lightColor, strokeWidth: '100%' } } }, colors: [baseColor], stroke: { lineCap: "round", }, labels: ["Progress"] }; var chart = new ApexCharts(element, options); chart.render(); }); } var initMixedWidget5 = function() { var charts = document.querySelectorAll('.mixed-widget-5-chart'); [].slice.call(charts).map(function(element) { var height = parseInt(KTUtil.css(element, 'height')); if ( !element ) { return; } var color = element.getAttribute('data-kt-chart-color'); var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); var strokeColor = KTUtil.getCssVariableValue('--bs-' + 'gray-300'); var baseColor = KTUtil.getCssVariableValue('--bs-' + color); var lightColor = KTUtil.getCssVariableValue('--bs-light-' + color ); var options = { series: [{ name: 'Net Profit', data: [30, 30, 60, 25, 25, 40] }], chart: { fontFamily: 'inherit', type: 'area', height: height, toolbar: { show: false }, zoom: { enabled: false }, sparkline: { enabled: true } }, plotOptions: {}, legend: { show: false }, dataLabels: { enabled: false }, fill: { type: 'solid', opacity: 1 }, fill1: { type: 'gradient', opacity: 1, gradient: { type: "vertical", shadeIntensity: 0.5, gradientToColors: undefined, inverseColors: true, opacityFrom: 1, opacityTo: 0.375, stops: [25, 50, 100], colorStops: [] } }, stroke: { curve: 'smooth', show: true, width: 3, colors: [baseColor] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } }, crosshairs: { show: false, position: 'front', stroke: { color: strokeColor, width: 1, dashArray: 3 } }, tooltip: { enabled: true, formatter: undefined, offsetY: 0, style: { fontSize: '12px' } } }, yaxis: { min: 0, max: 65, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } } }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } } }, colors: [lightColor], markers: { colors: [lightColor], strokeColor: [baseColor], strokeWidth: 3 } }; var chart = new ApexCharts(element, options); chart.render(); }); } var initMixedWidget6 = function() { var charts = document.querySelectorAll('.mixed-widget-6-chart'); [].slice.call(charts).map(function(element) { var height = parseInt(KTUtil.css(element, 'height')); if ( !element ) { return; } var color = element.getAttribute('data-kt-chart-color'); var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); var strokeColor = KTUtil.getCssVariableValue('--bs-' + 'gray-300'); var baseColor = KTUtil.getCssVariableValue('--bs-' + color); var lightColor = KTUtil.getCssVariableValue('--bs-light-' + color ); var options = { series: [{ name: 'Net Profit', data: [30, 25, 45, 30, 55, 55] }], chart: { fontFamily: 'inherit', type: 'area', height: height, toolbar: { show: false }, zoom: { enabled: false }, sparkline: { enabled: true } }, plotOptions: {}, legend: { show: false }, dataLabels: { enabled: false }, fill: { type: 'solid', opacity: 1 }, stroke: { curve: 'smooth', show: true, width: 3, colors: [baseColor] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } }, crosshairs: { show: false, position: 'front', stroke: { color: strokeColor, width: 1, dashArray: 3 } }, tooltip: { enabled: true, formatter: undefined, offsetY: 0, style: { fontSize: '12px' } } }, yaxis: { min: 0, max: 60, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } } }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } } }, colors: [lightColor], markers: { colors: [lightColor], strokeColor: [baseColor], strokeWidth: 3 } }; var chart = new ApexCharts(element, options); chart.render(); }); } var initMixedWidget7 = function() { var charts = document.querySelectorAll('.mixed-widget-7-chart'); [].slice.call(charts).map(function(element) { var height = parseInt(KTUtil.css(element, 'height')); if ( !element ) { return; } var color = element.getAttribute('data-kt-chart-color'); var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); var strokeColor = KTUtil.getCssVariableValue('--bs-' + 'gray-300'); var baseColor = KTUtil.getCssVariableValue('--bs-' + color); var lightColor = KTUtil.getCssVariableValue('--bs-light-' + color); var options = { series: [{ name: 'Net Profit', data: [15, 25, 15, 40, 20, 50] }], chart: { fontFamily: 'inherit', type: 'area', height: height, toolbar: { show: false }, zoom: { enabled: false }, sparkline: { enabled: true } }, plotOptions: {}, legend: { show: false }, dataLabels: { enabled: false }, fill: { type: 'solid', opacity: 1 }, stroke: { curve: 'smooth', show: true, width: 3, colors: [baseColor] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } }, crosshairs: { show: false, position: 'front', stroke: { color: strokeColor, width: 1, dashArray: 3 } }, tooltip: { enabled: true, formatter: undefined, offsetY: 0, style: { fontSize: '12px' } } }, yaxis: { min: 0, max: 60, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } } }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } } }, colors: [lightColor], markers: { colors: [lightColor], strokeColor: [baseColor], strokeWidth: 3 } }; var chart = new ApexCharts(element, options); chart.render(); }); } var initMixedWidget10 = function() { var charts = document.querySelectorAll('.mixed-widget-10-chart'); var color; var height; var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); var baseLightColor; var secondaryColor = KTUtil.getCssVariableValue('--bs-gray-300'); var baseColor; var options; var chart; [].slice.call(charts).map(function(element) { color = element.getAttribute("data-kt-color"); height = parseInt(KTUtil.css(element, 'height')); baseColor = KTUtil.getCssVariableValue('--bs-' + color); options = { series: [{ name: 'Net Profit', data: [50, 60, 70, 80, 60, 50, 70, 60] }, { name: 'Revenue', data: [50, 60, 70, 80, 60, 50, 70, 60] }], chart: { fontFamily: 'inherit', type: 'bar', height: height, toolbar: { show: false } }, plotOptions: { bar: { horizontal: false, columnWidth: ['50%'], borderRadius: 4 }, }, legend: { show: false }, dataLabels: { enabled: false }, stroke: { show: true, width: 2, colors: ['transparent'] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { style: { colors: labelColor, fontSize: '12px' } } }, yaxis: { y: 0, offsetX: 0, offsetY: 0, labels: { style: { colors: labelColor, fontSize: '12px' } } }, fill: { type: 'solid' }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " revenue" } } }, colors: [baseColor, secondaryColor], grid: { padding: { top: 10 }, borderColor: borderColor, strokeDashArray: 4, yaxis: { lines: { show: true } } } }; chart = new ApexCharts(element, options); chart.render(); }); } var initMixedWidget12 = function() { var charts = document.querySelectorAll('.mixed-widget-12-chart'); var color; var strokeColor; var height; var labelColor = KTUtil.getCssVariableValue('--bs-gray-500'); var borderColor = KTUtil.getCssVariableValue('--bs-gray-200'); var options; var chart; [].slice.call(charts).map(function(element) { height = parseInt(KTUtil.css(element, 'height')); var options = { series: [{ name: 'Net Profit', data: [35, 65, 75, 55, 45, 60, 55] }, { name: 'Revenue', data: [40, 70, 80, 60, 50, 65, 60] }], chart: { fontFamily: 'inherit', type: 'bar', height: height, toolbar: { show: false }, sparkline: { enabled: true }, }, plotOptions: { bar: { horizontal: false, columnWidth: ['30%'], borderRadius: 2 } }, legend: { show: false }, dataLabels: { enabled: false }, stroke: { show: true, width: 1, colors: ['transparent'] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { style: { colors: labelColor, fontSize: '12px' } } }, yaxis: { min: 0, max: 100, labels: { style: { colors: labelColor, fontSize: '12px' } } }, fill: { type: ['solid', 'solid'], opacity: [0.25, 1] }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } }, marker: { show: false } }, colors: ['#ffffff', '#ffffff'], grid: { borderColor: borderColor, strokeDashArray: 4, yaxis: { lines: { show: true } }, padding: { left: 20, right: 20 } } }; var chart = new ApexCharts(element, options); chart.render() }); } var initMixedWidget13 = function() { var height; var charts = document.querySelectorAll('.mixed-widget-13-chart'); [].slice.call(charts).map(function(element) { height = parseInt(KTUtil.css(element, 'height')); if ( !element ) { return; } var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); var strokeColor = KTUtil.getCssVariableValue('--bs-' + 'gray-300'); var options = { series: [{ name: 'Net Profit', data: [15, 25, 15, 40, 20, 50] }], grid: { show: false, padding: { top: 0, bottom: 0, left: 0, right: 0 } }, chart: { fontFamily: 'inherit', type: 'area', height: height, toolbar: { show: false }, zoom: { enabled: false }, sparkline: { enabled: true } }, plotOptions: {}, legend: { show: false }, dataLabels: { enabled: false }, fill: { type: 'gradient', gradient: { opacityFrom: 0.4, opacityTo: 0, stops: [20, 120, 120, 120] } }, stroke: { curve: 'smooth', show: true, width: 3, colors: ['#FFFFFF'] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } }, crosshairs: { show: false, position: 'front', stroke: { color: strokeColor, width: 1, dashArray: 3 } }, tooltip: { enabled: true, formatter: undefined, offsetY: 0, style: { fontSize: '12px' } } }, yaxis: { min: 0, max: 60, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } } }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } } }, colors: ['#ffffff'], markers: { colors: [labelColor], strokeColor: [strokeColor], strokeWidth: 3 } }; var chart = new ApexCharts(element, options); chart.render(); }); } var initMixedWidget14 = function() { var charts = document.querySelectorAll('.mixed-widget-14-chart'); var options; var chart; var height; [].slice.call(charts).map(function(element) { height = parseInt(KTUtil.css(element, 'height')); var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); options = { series: [{ name: 'Inflation', data: [1, 2.1, 1, 2.1, 4.1, 6.1, 4.1, 4.1, 2.1, 4.1, 2.1, 3.1, 1, 1, 2.1] }], chart: { fontFamily: 'inherit', height: height, type: 'bar', toolbar: { show: false } }, grid: { show: false, padding: { top: 0, bottom: 0, left: 0, right: 0 } }, colors: ['#ffffff'], plotOptions: { bar: { borderRadius: 2.5, dataLabels: { position: 'top', // top, center, bottom }, columnWidth: '20%' } }, dataLabels: { enabled: false, formatter: function(val) { return val + "%"; }, offsetY: -20, style: { fontSize: '12px', colors: ["#304758"] } }, xaxis: { labels: { show: false, }, categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan", "Feb", "Mar"], position: 'top', axisBorder: { show: false }, axisTicks: { show: false }, crosshairs: { show: false }, tooltip: { enabled: false } }, yaxis: { show: false, axisBorder: { show: false }, axisTicks: { show: false, background: labelColor }, labels: { show: false, formatter: function(val) { return val + "%"; } } } }; chart = new ApexCharts(element, options); chart.render(); }); } var initMixedWidget16 = function() { var element = document.getElementById("kt_charts_mixed_widget_16_chart"); var height = parseInt(KTUtil.css(element, 'height')); if (!element) { return; } var options = { labels: ["Total Members"], series: [74], chart: { fontFamily: 'inherit', height: height, type: 'radialBar', offsetY: 0 }, plotOptions: { radialBar: { startAngle: -90, endAngle: 90, hollow: { margin: 0, size: "70%" }, dataLabels: { showOn: "always", name: { show: true, fontSize: "13px", fontWeight: "700", offsetY: -5, color: KTUtil.getCssVariableValue('--bs-gray-500') }, value: { color: KTUtil.getCssVariableValue('--bs-gray-700'), fontSize: "30px", fontWeight: "700", offsetY: -40, show: true } }, track: { background: KTUtil.getCssVariableValue('--bs-light-primary'), strokeWidth: '100%' } } }, colors: [KTUtil.getCssVariableValue('--bs-primary')], stroke: { lineCap: "round", } }; var chart = new ApexCharts(element, options); chart.render(); } var initMixedWidget17 = function() { var charts = document.querySelectorAll('.mixed-widget-17-chart'); [].slice.call(charts).map(function(element) { var height = parseInt(KTUtil.css(element, 'height')); if (!element) { return; } var color = element.getAttribute('data-kt-chart-color'); var options = { labels: ["Total Orders"], series: [75], chart: { fontFamily: 'inherit', height: height, type: 'radialBar', offsetY: 0 }, plotOptions: { radialBar: { startAngle: -90, endAngle: 90, hollow: { margin: 0, size: "55%" }, dataLabels: { showOn: "always", name: { show: true, fontSize: "12px", fontWeight: "700", offsetY: -5, color: KTUtil.getCssVariableValue('--bs-gray-500') }, value: { color: KTUtil.getCssVariableValue('--bs-gray-900'), fontSize: "24px", fontWeight: "600", offsetY: -40, show: true, formatter: function (value) { return '8,346'; } } }, track: { background: KTUtil.getCssVariableValue('--bs-gray-300'), strokeWidth: '100%' } } }, colors: [KTUtil.getCssVariableValue('--bs-' + color)], stroke: { lineCap: "round", } }; var chart = new ApexCharts(element, options); chart.render(); }); } var initMixedWidget18 = function() { var element = document.getElementById("kt_charts_mixed_widget_18_chart"); var height = parseInt(KTUtil.css(element, 'height')); if ( !element ) { return; } var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); var strokeColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); var fillColor = KTApp.isDarkMode() ? KTUtil.getCssVariableValue('--bs-' + 'gray-200') : '#D6D6E0'; var options = { series: [{ name: 'Net Profit', data: [30, 25, 45, 30, 55, 55] }], chart: { fontFamily: 'inherit', type: 'area', height: height, toolbar: { show: false }, zoom: { enabled: false }, sparkline: { enabled: true } }, plotOptions: {}, legend: { show: false }, dataLabels: { enabled: false }, fill: { type: 'solid', opacity: 1 }, stroke: { curve: 'smooth', show: true, width: 3, colors: [strokeColor] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } }, crosshairs: { show: false, position: 'front', stroke: { color: strokeColor, width: 1, dashArray: 3 } }, tooltip: { enabled: true, formatter: undefined, offsetY: 0, style: { fontSize: '12px' } } }, yaxis: { min: 0, max: 60, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } } }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } } }, colors: [fillColor], markers: { colors: [fillColor], strokeColor: [strokeColor], strokeWidth: 3 } }; var chart = new ApexCharts(element, options); chart.render(); } var initMixedWidget19 = function() { var element = document.getElementById("kt_charts_mixed_widget_19_chart"); var height = parseInt(KTUtil.css(element, 'height')); if ( !element ) { return; } var labelColor = KTUtil.getCssVariableValue('--bs-' + 'gray-800'); var strokeColor = KTUtil.getCssVariableValue('--bs-' + 'info'); var fillColor = KTUtil.getCssVariableValue('--bs-light-info') var options = { series: [{ name: 'Net Profit', data: [30, 25, 45, 30, 55, 55] }], chart: { fontFamily: 'inherit', type: 'area', height: height, toolbar: { show: false }, zoom: { enabled: false }, sparkline: { enabled: true } }, plotOptions: {}, legend: { show: false }, dataLabels: { enabled: false }, fill: { type: 'solid', opacity: 1 }, stroke: { curve: 'smooth', show: true, width: 3, colors: [strokeColor] }, xaxis: { categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], axisBorder: { show: false, }, axisTicks: { show: false }, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } }, crosshairs: { show: false, position: 'front', stroke: { color: strokeColor, width: 1, dashArray: 3 } }, tooltip: { enabled: true, formatter: undefined, offsetY: 0, style: { fontSize: '12px' } } }, yaxis: { min: 0, max: 60, labels: { show: false, style: { colors: labelColor, fontSize: '12px' } } }, states: { normal: { filter: { type: 'none', value: 0 } }, hover: { filter: { type: 'none', value: 0 } }, active: { allowMultipleDataPointsSelection: false, filter: { type: 'none', value: 0 } } }, tooltip: { style: { fontSize: '12px' }, y: { formatter: function (val) { return "$" + val + " thousands" } } }, colors: [fillColor], markers: { colors: [fillColor], strokeColor: [strokeColor], strokeWidth: 3 } }; var chart = new ApexCharts(element, options); chart.render(); } // Feeds Widgets var initFeedWidget1 = function() { var formEl = document.querySelector("#kt_forms_widget_1_form"); var editorId = 'kt_forms_widget_1_editor'; if ( !formEl ) { return; } // init editor var options = { modules: { toolbar: { container: "#kt_forms_widget_1_editor_toolbar" } }, placeholder: 'What is on your mind ?', theme: 'snow' }; if (!formEl) { return; } // Init editor var editorObj = new Quill('#' + editorId, options); } var initFeedsWidget4 = function() { var btn = document.querySelector('#kt_widget_5_load_more_btn'); var widget5 = document.querySelector('#kt_widget_5'); if (btn) { btn.addEventListener('click', function(e){ e.preventDefault(); btn.setAttribute('data-kt-indicator', 'on'); setTimeout(function() { btn.removeAttribute('data-kt-indicator'); widget5.classList.remove('d-none'); btn.classList.add('d-none'); KTUtil.scrollTo(widget5, 200); }, 2000); }); } } // Follow button var initUserFollowButton = function() { var follow = document.querySelector('#kt_user_follow_button'); if (follow) { follow.addEventListener('click', function(e){ // Prevent default action e.preventDefault(); // Show indicator follow.setAttribute('data-kt-indicator', 'on'); // Disable button to avoid multiple click follow.disabled = true; // Check button state if (follow.classList.contains("btn-success")) { setTimeout(function() { follow.removeAttribute('data-kt-indicator'); follow.classList.remove("btn-success"); follow.classList.add("btn-light"); follow.querySelector(".svg-icon").classList.add("d-none"); follow.querySelector(".indicator-label").innerHTML = 'Follow'; follow.disabled = false; }, 1500); } else { setTimeout(function() { follow.removeAttribute('data-kt-indicator'); follow.classList.add("btn-success"); follow.classList.remove("btn-light"); follow.querySelector(".svg-icon").classList.remove("d-none"); follow.querySelector(".indicator-label").innerHTML = 'Following'; follow.disabled = false; }, 1000); } }); } } // Calendar var initCalendarWidget1 = function() { if (typeof FullCalendar === 'undefined' || !document.querySelector('#kt_calendar_widget_1')) { return; } var todayDate = moment().startOf('day'); var YM = todayDate.format('YYYY-MM'); var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD'); var TODAY = todayDate.format('YYYY-MM-DD'); var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD'); var calendarEl = document.getElementById('kt_calendar_widget_1'); var calendar = new FullCalendar.Calendar(calendarEl, { headerToolbar: { left: 'prev,next today', center: 'title', right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth' }, height: 800, contentHeight: 780, aspectRatio: 3, // see: https://fullcalendar.io/docs/aspectRatio nowIndicator: true, now: TODAY + 'T09:25:00', // just for demo views: { dayGridMonth: { buttonText: 'month' }, timeGridWeek: { buttonText: 'week' }, timeGridDay: { buttonText: 'day' } }, initialView: 'dayGridMonth', initialDate: TODAY, editable: true, dayMaxEvents: true, // allow "more" link when too many events navLinks: true, events: [ { title: 'All Day Event', start: YM + '-01', description: 'Toto lorem ipsum dolor sit incid idunt ut', className: "fc-event-danger fc-event-solid-warning" }, { title: 'Reporting', start: YM + '-14T13:30:00', description: 'Lorem ipsum dolor incid idunt ut labore', end: YM + '-14', className: "fc-event-success" }, { title: 'Company Trip', start: YM + '-02', description: 'Lorem ipsum dolor sit tempor incid', end: YM + '-03', className: "fc-event-primary" }, { title: 'ICT Expo 2017 - Product Release', start: YM + '-03', description: 'Lorem ipsum dolor sit tempor inci', end: YM + '-05', className: "fc-event-light fc-event-solid-primary" }, { title: 'Dinner', start: YM + '-12', description: 'Lorem ipsum dolor sit amet, conse ctetur', end: YM + '-10' }, { id: 999, title: 'Repeating Event', start: YM + '-09T16:00:00', description: 'Lorem ipsum dolor sit ncididunt ut labore', className: "fc-event-danger" }, { id: 1000, title: 'Repeating Event', description: 'Lorem ipsum dolor sit amet, labore', start: YM + '-16T16:00:00' }, { title: 'Conference', start: YESTERDAY, end: TOMORROW, description: 'Lorem ipsum dolor eius mod tempor labore', className: "fc-event-primary" }, { title: 'Meeting', start: TODAY + 'T10:30:00', end: TODAY + 'T12:30:00', description: 'Lorem ipsum dolor eiu idunt ut labore' }, { title: 'Lunch', start: TODAY + 'T12:00:00', className: "fc-event-info", description: 'Lorem ipsum dolor sit amet, ut labore' }, { title: 'Meeting', start: TODAY + 'T14:30:00', className: "fc-event-warning", description: 'Lorem ipsum conse ctetur adipi scing' }, { title: 'Happy Hour', start: TODAY + 'T17:30:00', className: "fc-event-info", description: 'Lorem ipsum dolor sit amet, conse ctetur' }, { title: 'Dinner', start: TOMORROW + 'T05:00:00', className: "fc-event-solid-danger fc-event-light", description: 'Lorem ipsum dolor sit ctetur adipi scing' }, { title: 'Birthday Party', start: TOMORROW + 'T07:00:00', className: "fc-event-primary", description: 'Lorem ipsum dolor sit amet, scing' }, { title: 'Click for Google', url: 'http://google.com/', start: YM + '-28', className: "fc-event-solid-info fc-event-light", description: 'Lorem ipsum dolor sit amet, labore' } ] }); calendar.render(); } // Daterangepicker var initDaterangepicker = function () { if (!document.querySelector('#kt_dashboard_daterangepicker')) { return; } var picker = $('#kt_dashboard_daterangepicker'); var start = moment(); var end = moment(); function cb(start, end, label) { var title = ''; var range = ''; if ((end - start) < 100 || label == 'Today') { title = 'Today:'; range = start.format('MMM D'); } else if (label == 'Yesterday') { title = 'Yesterday:'; range = start.format('MMM D'); } else { range = start.format('MMM D') + ' - ' + end.format('MMM D'); } $('#kt_dashboard_daterangepicker_date').html(range); $('#kt_dashboard_daterangepicker_title').html(title); } picker.daterangepicker({ direction: KTUtil.isRTL(), startDate: start, endDate: end, opens: 'left', applyClass: 'btn-primary', cancelClass: 'btn-light-primary', ranges: { 'Today': [moment(), moment()], 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 'Last 7 Days': [moment().subtract(6, 'days'), moment()], 'Last 30 Days': [moment().subtract(29, 'days'), moment()], 'This Month': [moment().startOf('month'), moment().endOf('month')], 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] } }, cb); cb(start, end, ''); } // Dark mode toggler var initDarkModeToggle = function() { var toggle = document.querySelector('#kt_user_menu_dark_mode_toggle'); if (toggle) { toggle.addEventListener('click', function() { window.location.href = this.getAttribute('data-kt-url'); }); } } // Public methods return { init: function () { // Daterangepicker initDaterangepicker(); // Dark Mode initDarkModeToggle(); // Statistics widgets initStatisticsWidget3(); initStatisticsWidget4(); // Charts widgets initChartsWidget1(); initChartsWidget2(); initChartsWidget3(); initChartsWidget4(); initChartsWidget5(); initChartsWidget6(); initChartsWidget7(); initChartsWidget8(); // Mixed widgets initMixedWidget2(); initMixedWidget3(); initMixedWidget4(); initMixedWidget5(); initMixedWidget6(); initMixedWidget7(); initMixedWidget10(); initMixedWidget12(); initMixedWidget13(); initMixedWidget14(); initMixedWidget16(); initMixedWidget17(); initMixedWidget18(); initMixedWidget19(); // Feeds initFeedWidget1(); initFeedsWidget4(); // Follow button initUserFollowButton(); // Calendar initCalendarWidget1(); } } }(); // Webpack support if (typeof module !== 'undefined') { module.exports = KTWidgets; } // On document ready KTUtil.onDOMContentLoaded(function() { KTWidgets.init(); });