sunshine255/AIPT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
root
2024-10-29 03:42:53 +00:00
commit ce4d28d241
8443 changed files with 257326 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
cms_admin/assets/js/app.js Executable file
View File

@@ -0,0 +1,133 @@
(function ($) {
'use strict';
// sidebar submenu collapsible js
$(".sidebar-menu .dropdown").on("click", function(){
var item = $(this);
item.siblings(".dropdown").children(".sidebar-submenu").slideUp();
item.siblings(".dropdown").removeClass("dropdown-open");
item.siblings(".dropdown").removeClass("open");
item.children(".sidebar-submenu").slideToggle();
item.toggleClass("dropdown-open");
});
$(".sidebar-toggle").on("click", function(){
$(this).toggleClass("active");
$(".sidebar").toggleClass("active");
$(".dashboard-main").toggleClass("active");
});
$(".sidebar-mobile-toggle").on("click", function(){
$(".sidebar").addClass("sidebar-open");
$("body").addClass("overlay-active");
});
$(".sidebar-close-btn").on("click", function(){
$(".sidebar").removeClass("sidebar-open");
$("body").removeClass("overlay-active");
});
//to keep the current page active
$(function () {
for (
var nk = window.location,
o = $("ul#sidebar-menu a")
.filter(function () {
return this.href == nk;
})
.addClass("active-page") // anchor
.parent()
.addClass("active-page");
;
) {
// li
if (!o.is("li")) break;
o = o.parent().addClass("show").parent().addClass("open");
}
});
/**
* Utility function to calculate the current theme setting.
* Look for a local storage value.
* Fall back to system setting.
* Fall back to light mode.
*/
function calculateSettingAsThemeString({ localStorageTheme }) {
if (localStorageTheme !== null) {
return localStorageTheme;
}
return "light";
}
/**
* Utility function to update the button text and aria-label.
*/
function updateButton({ buttonEl, isDark }) {
const newCta = isDark ? "dark" : "light";
// use an aria-label if you are omitting text on the button
// and using a sun/moon icon, for example
buttonEl.setAttribute("aria-label", newCta);
buttonEl.innerText = newCta;
}
/**
* Utility function to update the theme setting on the html tag
*/
function updateThemeOnHtmlEl({ theme }) {
document.querySelector("html").setAttribute("data-theme", theme);
}
/**
* 1. Grab what we need from the DOM and system settings on page load
*/
const button = document.querySelector("[data-theme-toggle]");
const localStorageTheme = localStorage.getItem("theme");
/**
* 2. Work out the current site settings
*/
let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme });
/**
* 3. Update the theme setting and button text accoridng to current settings
*/
updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" });
updateThemeOnHtmlEl({ theme: currentThemeSetting });
/**
* 4. Add an event listener to toggle the theme
*/
button.addEventListener("click", (event) => {
const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
localStorage.setItem("theme", newTheme);
updateButton({ buttonEl: button, isDark: newTheme === "dark" });
updateThemeOnHtmlEl({ theme: newTheme });
currentThemeSetting = newTheme;
});
// =========================== Table Header Checkbox checked all js Start ================================
$('#selectAll').on('change', function () {
$('.form-check .form-check-input').prop('checked', $(this).prop('checked'));
});
// Remove Table Tr when click on remove btn start
$('.remove-btn').on('click', function () {
$(this).closest('tr').remove();
// Check if the table has no rows left
if ($('.table tbody tr').length === 0) {
$('.table').addClass('bg-danger');
// Show notification
$('.no-items-found').show();
}
});
// Remove Table Tr when click on remove btn end
})(jQuery);

362
cms_admin/assets/js/columnChartPageChart.js Executable file
View File

@@ -0,0 +1,362 @@
// ================================ Column Charts Chart Start ================================
var options = {
series: [{
name: 'Net Profit',
data: [20000, 16000, 14000, 25000, 45000, 18000, 28000, 11000, 26000, 48000, 18000, 22000]
},{
name: 'Revenue',
data: [15000, 18000, 19000, 20000, 35000, 20000, 18000, 13000, 18000, 38000, 14000, 16000]
}],
colors: ['#487FFF', '#FF9F29'],
labels: ['Active', 'New', 'Total'],
legend: {
show: false
},
chart: {
type: 'bar',
height: 264,
toolbar: {
show: false
},
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 4, // Use a number for dashed style
position: 'back',
},
plotOptions: {
bar: {
borderRadius: 4,
columnWidth: 10,
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yaxis: {
categories: ['0', '5000', '10,000', '20,000', '30,000', '50,000', '60,000', '60,000', '70,000', '80,000', '90,000', '100,000'],
},
yaxis: {
labels: {
formatter: function (value) {
return (value / 1000).toFixed(0) + 'k';
}
}
},
tooltip: {
y: {
formatter: function (value) {
return value / 1000 + 'k';
}
}
},
fill: {
opacity: 1,
width: 18,
},
};
var chart = new ApexCharts(document.querySelector("#columnChart"), options);
chart.render();
// ================================ Column Charts Chart End ================================
// ================================ Column with Group Label chart Start ================================
var options = {
series: [{
name: "Sales",
data: [{
x: 'Jan',
y: 85000,
}, {
x: 'Feb',
y: 70000,
}, {
x: 'Mar',
y: 40000,
}, {
x: 'Apr',
y: 50000,
}, {
x: 'May',
y: 60000,
}, {
x: 'Jun',
y: 50000,
}, {
x: 'Jul',
y: 40000,
}, {
x: 'Aug',
y: 50000,
}, {
x: 'Sep',
y: 40000,
}, {
x: 'Oct',
y: 60000,
}, {
x: 'Nov',
y: 30000,
}, {
x: 'Dec',
y: 50000,
}]
}],
chart: {
type: 'bar',
height: 264,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: false,
borderRadius: 8,
columnWidth: 10,
borderRadiusApplication: 'end', // 'around', 'end'
borderRadiusWhenStacked: 'last', // 'all', 'last'
columnWidth: '23%',
endingShape: 'rounded',
}
},
dataLabels: {
enabled: false
},
fill: {
type: 'gradient',
colors: ['#487FFF'], // Set the starting color (top color) here
gradient: {
shade: 'light', // Gradient shading type
type: 'vertical', // Gradient direction (vertical)
shadeIntensity: 0.5, // Intensity of the gradient shading
gradientToColors: ['#487FFF'], // Bottom gradient color (with transparency)
inverseColors: false, // Do not invert colors
opacityFrom: 1, // Starting opacity
opacityTo: 1, // Ending opacity
stops: [0, 100],
},
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 4, // Use a number for dashed style
position: 'back',
},
xaxis: {
type: 'category',
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yaxis: {
labels: {
formatter: function (value) {
return (value / 1000).toFixed(0) + 'k';
}
}
},
tooltip: {
y: {
formatter: function (value) {
return value / 1000 + 'k';
}
}
}
};
var chart = new ApexCharts(document.querySelector("#columnGroupBarChart"), options);
chart.render();
// ================================ Column with Group Label chart End ================================
// ================================ Group Column Bar chart Start ================================
var options = {
series: [{
name: 'PRODUCT A',
data: [14, 18, 24, 35, 14, 22, 43, 14, 22, 43, 14, 18]
}, {
name: 'PRODUCT B',
data: [13, 23, 20, 25, 13, 13, 27, 13, 13, 27, 13, 23]
}, {
name: 'PRODUCT C',
data: [11, 17, 20, 25, 11, 21, 14, 11, 21, 14, 11, 17]
}, {
name: 'PRODUCT D',
data: [21, 15, 20, 25, 21, 22, 8, 10, 22, 8, 21, 15]
}],
chart: {
type: 'bar',
height: 264,
stacked: true,
toolbar: {
show: false
},
zoom: {
enabled: true
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
show: false,
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
colors: ['#487FFF', '#FF9F29', '#48AB69', '#45B369'],
plotOptions: {
bar: {
horizontal: false,
borderRadius: 4,
columnWidth: 10,
borderRadiusApplication: 'end', // 'around', 'end'
borderRadiusWhenStacked: 'last', // 'all', 'last'
dataLabels: {
total: {
enabled: false, // Disable total data labels
style: {
fontSize: '13px',
fontWeight: 900
}
}
}
},
},
dataLabels: {
enabled: false // Disable data labels
},
xaxis: {
type: 'category',
categories: ['01', '03', '05', '07', '10', '13', '16', '19', '21', '23', '25', '27' ],
},
yaxis: {
labels: {
formatter: function (value) {
return (value / 1000).toFixed(0) + 'k';
}
}
},
tooltip: {
y: {
formatter: function (value) {
return value / 1000 + 'k';
}
}
},
legend: {
position: 'right',
offsetY: 40,
show: false
},
fill: {
opacity: 1
}
};
var chart = new ApexCharts(document.querySelector("#groupColumnBarChart"), options);
chart.render();
// ================================ Group Column Bar chart End ================================
// ================================ Bars Up Down (Earning Statistics) chart Start ================================
var options = {
series: [
{
name: "Income",
data: [44, 42, 57, 86, 58, 55, 70, 44, 42, 57, 86, 58, 55, 70],
},
{
name: "Expenses",
data: [-34, -22, -37, -56, -21, -35, -60, -34, -22, -37, -56, -21, -35, -60],
},
],
chart: {
stacked: true,
type: "bar",
height: 263,
fontFamily: "Poppins, sans-serif",
toolbar: {
show: false,
},
},
colors: ["#487FFF", "#EF4A00"],
plotOptions: {
bar: {
columnWidth: "8",
borderRadius: [2],
borderRadiusWhenStacked: "all",
},
},
stroke: {
width: [5, 5]
},
dataLabels: {
enabled: false,
},
legend: {
show: true,
position: "top",
},
yaxis: {
show: false,
title: {
text: undefined,
},
labels: {
formatter: function (y)
{
return y.toFixed(0) + "";
},
},
},
xaxis: {
show: false,
type: "week",
categories: [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun",
],
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: true,
style: {
colors: "#d4d7d9",
fontSize: "10px",
fontWeight: 500,
},
},
},
tooltip: {
enabled: true,
shared: true,
intersect: false,
theme: "dark",
x: {
show: false,
},
},
};
var chart = new ApexCharts(document.querySelector("#upDownBarchart"), options);
chart.render();
// ================================ Bars Up Down (Earning Statistics) chart End ================================

1213
cms_admin/assets/js/editor.highlighted.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

1
cms_admin/assets/js/editor.katex.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

3
cms_admin/assets/js/editor.quill.js Executable file
View File

File diff suppressed because one or more lines are too long

2
cms_admin/assets/js/flatpickr.js Executable file
View File

File diff suppressed because one or more lines are too long

6280
cms_admin/assets/js/full-calendar.js Executable file
View File

File diff suppressed because it is too large Load Diff

685
cms_admin/assets/js/homeFiveChart.js Executable file
View File

@@ -0,0 +1,685 @@
// ================================ Bars Up Down (Earning Statistics) chart Start ================================
var options = {
series: [
{
name: "Income",
data: [44, 42, 57, 86, 58, 55, 70, 44, 42, 57, 86, 58, 55, 70],
},
{
name: "Expenses",
data: [-34, -22, -37, -56, -21, -35, -60, -34, -22, -37, -56, -21, -35, -60],
},
],
chart: {
stacked: true,
type: "bar",
height: 263,
fontFamily: "Poppins, sans-serif",
toolbar: {
show: false,
},
},
colors: ["#487FFF", "#EF4A00"],
plotOptions: {
bar: {
columnWidth: "8",
borderRadius: [2],
borderRadiusWhenStacked: "all",
},
},
stroke: {
width: [5, 5]
},
dataLabels: {
enabled: false,
},
legend: {
show: true,
position: "top",
},
yaxis: {
show: false,
title: {
text: undefined,
},
labels: {
formatter: function (y)
{
return y.toFixed(0) + "";
},
},
},
xaxis: {
show: false,
type: "week",
categories: [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun",
],
axisBorder: {
show: false,
},
axisTicks: {
show: false,
},
labels: {
show: true,
style: {
colors: "#d4d7d9",
fontSize: "10px",
fontWeight: 500,
},
},
},
tooltip: {
enabled: true,
shared: true,
intersect: false,
theme: "dark",
x: {
show: false,
},
},
};
var chart = new ApexCharts(document.querySelector("#upDownBarchart"), options);
chart.render();
// ================================ Bars Up Down (Earning Statistics) chart End ================================
// ================================ Semi Circle Gauge (Daily Conversion) chart Start ================================
var options = {
series: [75],
chart: {
height: 165,
width: 120,
type: 'radialBar',
sparkline: {
enabled: false // Remove whitespace
},
toolbar: {
show: false
},
padding: {
left: -32,
right: -32,
top: -32,
bottom: -32
},
margin: {
left: -32,
right: -32,
top: -32,
bottom: -32
}
},
plotOptions: {
radialBar: {
offsetY: -24,
offsetX: -14,
startAngle: -90,
endAngle: 90,
track: {
background: "#E3E6E9",
// strokeWidth: 32,
dropShadow: {
enabled: false,
top: 2,
left: 0,
color: '#999',
opacity: 1,
blur: 2
}
},
dataLabels: {
show: false,
name: {
show: false
},
value: {
offsetY: -2,
fontSize: '22px'
}
}
}
},
fill: {
type: 'gradient',
colors: ['#9DBAFF'],
gradient: {
shade: 'dark',
type: 'horizontal',
shadeIntensity: 0.5,
gradientToColors: ['#487FFF'],
inverseColors: true,
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100]
}
},
stroke: {
lineCap: 'round',
},
labels: ['Percent'],
};
var chart = new ApexCharts(document.querySelector("#semiCircleGauge"), options);
chart.render();
// var options = {
// series: [76],
// chart: {
// type: 'radialBar',
// offsetY: -20,
// sparkline: {
// enabled: true
// }
// },
// plotOptions: {
// radialBar: {
// startAngle: -90,
// endAngle: 90,
// track: {
// background: "#e7e7e7",
// strokeWidth: '97%',
// margin: 5, // margin is in pixels
// dropShadow: {
// enabled: true,
// top: 2,
// left: 0,
// color: '#999',
// opacity: 1,
// blur: 2
// }
// },
// dataLabels: {
// name: {
// show: false
// },
// value: {
// offsetY: -2,
// fontSize: '22px'
// }
// }
// }
// },
// grid: {
// padding: {
// top: -10
// }
// },
// fill: {
// type: 'gradient',
// gradient: {
// shade: 'light',
// shadeIntensity: 0.4,
// inverseColors: false,
// opacityFrom: 1,
// opacityTo: 1,
// stops: [0, 50, 53, 91]
// },
// },
// labels: ['Average Results'],
// };
// var chart = new ApexCharts(document.querySelector("#semiCircleGauge"), options);
// chart.render();
// ================================ Semi Circle Gauge (Daily Conversion) chart End ================================
// ================================ Area chart Start ================================
function createChart(chartId, chartColor) {
let currentYear = new Date().getFullYear();
var options = {
series: [
{
name: 'series1',
data: [0, 10, 8, 25, 15, 26, 13, 35, 15, 39, 16, 46, 42],
},
],
chart: {
type: 'area',
width: 164,
height: 72,
sparkline: {
enabled: true // Remove whitespace
},
toolbar: {
show: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2,
colors: [chartColor],
lineCap: 'round'
},
grid: {
show: true,
borderColor: 'transparent',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: false
}
},
row: {
colors: undefined,
opacity: 0.5
},
column: {
colors: undefined,
opacity: 0.5
},
padding: {
top: -3,
right: 0,
bottom: 0,
left: 0
},
},
fill: {
type: 'gradient',
colors: [chartColor], // Set the starting color (top color) here
gradient: {
shade: 'light', // Gradient shading type
type: 'vertical', // Gradient direction (vertical)
shadeIntensity: 0.5, // Intensity of the gradient shading
gradientToColors: [`${chartColor}00`], // Bottom gradient color (with transparency)
inverseColors: false, // Do not invert colors
opacityFrom: .8, // Starting opacity
opacityTo: 0.3, // Ending opacity
stops: [0, 100],
},
},
// Customize the circle marker color on hover
markers: {
colors: [chartColor],
strokeWidth: 2,
size: 0,
hover: {
size: 8
}
},
xaxis: {
labels: {
show: false
},
categories: [`Jan ${currentYear}`, `Feb ${currentYear}`, `Mar ${currentYear}`, `Apr ${currentYear}`, `May ${currentYear}`, `Jun ${currentYear}`, `Jul ${currentYear}`, `Aug ${currentYear}`, `Sep ${currentYear}`, `Oct ${currentYear}`, `Nov ${currentYear}`, `Dec ${currentYear}`],
tooltip: {
enabled: false,
},
},
yaxis: {
labels: {
show: false
}
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
chart.render();
}
// Call the function for each chart with the desired ID and color
createChart('areaChart', '#FF9F29');
// ================================ Area chart End ================================
// ================================ Bar chart (Today Income0 Start ================================
var options = {
series: [{
name: "Sales",
data: [{
x: 'Mon',
y: 20,
}, {
x: 'Tue',
y: 40,
}, {
x: 'Wed',
y: 20,
}, {
x: 'Thur',
y: 30,
}, {
x: 'Fri',
y: 40,
}, {
x: 'Sat',
y: 35,
}]
}],
chart: {
type: 'bar',
width: 164,
height: 80,
sparkline: {
enabled: true // Remove whitespace
},
toolbar: {
show: false
}
},
plotOptions: {
bar: {
borderRadius: 6,
horizontal: false,
columnWidth: 14,
}
},
dataLabels: {
enabled: false
},
states: {
hover: {
filter: {
type: 'none'
}
}
},
fill: {
type: 'gradient',
colors: ['#E3E6E9'], // Set the starting color (top color) here
gradient: {
shade: 'light', // Gradient shading type
type: 'vertical', // Gradient direction (vertical)
shadeIntensity: 0.5, // Intensity of the gradient shading
gradientToColors: ['#E3E6E9'], // Bottom gradient color (with transparency)
inverseColors: false, // Do not invert colors
opacityFrom: 1, // Starting opacity
opacityTo: 1, // Ending opacity
stops: [0, 100],
},
},
grid: {
show: false,
borderColor: '#D1D5DB',
strokeDashArray: 1, // Use a number for dashed style
position: 'back',
},
xaxis: {
labels: {
show: false // Hide y-axis labels
},
type: 'category',
categories: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat']
},
yaxis: {
labels: {
show: false,
formatter: function (value) {
return (value / 1000).toFixed(0) + 'k';
}
}
},
tooltip: {
y: {
formatter: function (value) {
return value / 1000 + 'k';
}
}
}
};
var chart = new ApexCharts(document.querySelector("#dailyIconBarChart"), options);
chart.render();
// ================================ Bar chart (Today Income0 End ================================
// ================================ My Portfolio Donut chart Start ================================
var options = {
series: [70, 30],
colors: ['#FF9F29', '#487FFF'],
labels: ['Female', 'Male'] ,
legend: {
show: false
},
chart: {
type: 'donut',
height: 230,
sparkline: {
enabled: true // Remove whitespace
},
margin: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
},
stroke: {
width: 0,
},
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}],
};
var chart = new ApexCharts(document.querySelector("#statisticsDonutChart"), options);
chart.render();
// ================================ My Portfolio Donut chart End ================================
// ================================ J Vector Map Start ================================
$('#world-map').vectorMap(
{
map: 'world_mill_en',
backgroundColor: 'transparent',
borderColor: '#fff',
borderOpacity: 0.25,
borderWidth: 0,
color: '#000000',
regionStyle : {
initial : {
fill : '#D1D5DB'
}
},
markerStyle: {
initial: {
r: 5,
'fill': '#fff',
'fill-opacity':1,
'stroke': '#000',
'stroke-width' : 1,
'stroke-opacity': 0.4
},
},
markers : [{
latLng : [35.8617, 104.1954],
name : 'China : 250'
},
{
latLng : [25.2744, 133.7751],
name : 'AustrCalia : 250'
},
{
latLng : [36.77, -119.41],
name : 'USA : 82%'
},
{
latLng : [55.37, -3.41],
name : 'UK : 250'
},
{
latLng : [25.20, 55.27],
name : 'UAE : 250'
}],
series: {
regions: [{
values: {
"US": '#487FFF ',
"SA": '#487FFF',
"AU": '#487FFF',
"CN": '#487FFF',
"GB": '#487FFF',
},
attribute: 'fill'
}]
},
hoverOpacity: null,
normalizeFunction: 'linear',
zoomOnScroll: false,
scaleColors: ['#000000', '#000000'],
selectedColor: '#000000',
selectedRegions: [],
enableZoom: false,
hoverColor: '#fff',
});
// ================================ J Vector Map End ================================
// ================================ Total Transaction line chart Start ================================
var options = {
series: [{
name: "This month",
data: [4, 16, 12, 28, 22, 38, 23]
}],
chart: {
height: 290,
type: 'line',
toolbar: {
show: false
},
zoom: {
enabled: false
},
dropShadow: {
enabled: true,
top: 6,
left: 0,
blur: 4,
color: "#000",
opacity: 0.1,
},
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 3
},
markers: {
size: 0,
strokeWidth: 3,
hover: {
size: 8
}
},
tooltip: {
enabled: true,
x: {
show: true,
},
y: {
show: false,
},
z: {
show: false,
}
},
grid: {
row: {
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
borderColor: '#D1D5DB',
strokeDashArray: 3,
},
yaxis: {
labels: {
formatter: function (value) {
return "$" + value + "k";
},
style: {
fontSize: "14px"
}
},
},
xaxis: {
categories: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'],
tooltip: {
enabled: false
},
labels: {
formatter: function (value) {
return value;
},
style: {
fontSize: "14px"
}
},
axisBorder: {
show: false
},
crosshairs: {
show: true,
width: 20,
stroke: {
width: 0
},
fill: {
type: 'solid',
color: '#B1B9C4',
gradient: {
colorFrom: '#D8E3F0',
colorTo: '#BED1E6',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
},
}
}
}
};
var chart = new ApexCharts(document.querySelector("#transactionLineChart"), options);
chart.render();
// ================================ Total Transaction line chart End ================================

609
cms_admin/assets/js/homeFourChart.js Executable file
View File

@@ -0,0 +1,609 @@
// ================================== Crm Home widgets charts Start =================================
function createChart(chartId, chartColor) {
let currentYear = new Date().getFullYear();
var options = {
series: [
{
name: 'series1',
data: [31, 24, 30, 25, 32, 28, 40, 32, 42, 38, 40, 32, 38, 35, 45],
},
],
chart: {
type: 'area',
width: 130,
height: 50,
sparkline: {
enabled: true // Remove whitespace
},
toolbar: {
show: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
events: {
mounted: function (chartContext, config) {
// Apply CSS blur to markers
document.querySelectorAll(`#${chartId} .apexcharts-marker`).forEach(marker => {
marker.style.filter = 'blur(2px)';
});
},
updated: function (chartContext, config) {
// Apply CSS blur to markers
document.querySelectorAll(`#${chartId} .apexcharts-marker`).forEach(marker => {
marker.style.filter = 'blur(3px)';
});
}
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2,
colors: [chartColor],
lineCap: 'round'
},
grid: {
show: true,
borderColor: 'transparent',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: false
}
},
row: {
colors: undefined,
opacity: 0.5
},
column: {
colors: undefined,
opacity: 0.5
},
padding: {
top: -3,
right: 0,
bottom: 0,
left: 0
},
},
fill: {
type: 'gradient',
colors: [chartColor], // Set the starting color (top color) here
gradient: {
shade: 'light', // Gradient shading type
type: 'vertical', // Gradient direction (vertical)
shadeIntensity: 0.5, // Intensity of the gradient shading
gradientToColors: [`${chartColor}00`], // Bottom gradient color (with transparency)
inverseColors: false, // Do not invert colors
opacityFrom: .7 , // Starting opacity
opacityTo: 0.3, // Ending opacity
stops: [0, 100],
},
},
// Customize the circle marker color on hover
markers: {
colors: [chartColor],
strokeWidth: 2,
size: 0,
hover: {
size: 8
}
},
xaxis: {
labels: {
show: false
},
categories: [`Jan ${currentYear}`, `Feb ${currentYear}`, `Mar ${currentYear}`, `Apr ${currentYear}`, `May ${currentYear}`, `Jun ${currentYear}`, `Jul ${currentYear}`, `Aug ${currentYear}`, `Sep ${currentYear}`, `Oct ${currentYear}`, `Nov ${currentYear}`, `Dec ${currentYear}`],
tooltip: {
enabled: false,
},
},
yaxis: {
labels: {
show: false
}
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
chart.render();
}
// Call the function for each chart with the desired ID and color
createChart('bitcoinAreaChart', '#F98C08');
createChart('ethereumAreaChart', '#5F80FF');
createChart('solanaAreaChart', '#C817F8');
createChart('litecoinAreaChart', '#2171EA');
createChart('dogecoinAreaChart', '#C2A633');
// ================================== Crm Home widgets charts End =================================
// ================================== CandleStick charts Start =================================
var options = {
series: [{
data: [{
x: new Date(1538778600000),
y: [6629.81, 6650.5, 6623.04, 6633.33]
},
{
x: new Date(1538780400000),
y: [6632.01, 6643.59, 6620, 6630.11]
},
{
x: new Date(1538782200000),
y: [6630.71, 6648.95, 6623.34, 6635.65]
},
{
x: new Date(1538784000000),
y: [6635.65, 6651, 6629.67, 6638.24]
},
{
x: new Date(1538785800000),
y: [6638.24, 6640, 6620, 6624.47]
},
{
x: new Date(1538787600000),
y: [6624.53, 6636.03, 6621.68, 6624.31]
},
{
x: new Date(1538789400000),
y: [6624.61, 6632.2, 6617, 6626.02]
},
{
x: new Date(1538791200000),
y: [6627, 6627.62, 6584.22, 6603.02]
},
{
x: new Date(1538793000000),
y: [6605, 6608.03, 6598.95, 6604.01]
},
{
x: new Date(1538794800000),
y: [6604.5, 6614.4, 6602.26, 6608.02]
},
{
x: new Date(1538796600000),
y: [6608.02, 6610.68, 6601.99, 6608.91]
},
{
x: new Date(1538798400000),
y: [6608.91, 6618.99, 6608.01, 6612]
},
{
x: new Date(1538800200000),
y: [6612, 6615.13, 6605.09, 6612]
},
{
x: new Date(1538802000000),
y: [6612, 6624.12, 6608.43, 6622.95]
},
{
x: new Date(1538803800000),
y: [6623.91, 6623.91, 6615, 6615.67]
},
{
x: new Date(1538805600000),
y: [6618.69, 6618.74, 6610, 6610.4]
},
{
x: new Date(1538807400000),
y: [6611, 6622.78, 6610.4, 6614.9]
},
{
x: new Date(1538809200000),
y: [6614.9, 6626.2, 6613.33, 6623.45]
},
{
x: new Date(1538811000000),
y: [6623.48, 6627, 6618.38, 6620.35]
},
{
x: new Date(1538812800000),
y: [6619.43, 6620.35, 6610.05, 6615.53]
},
{
x: new Date(1538814600000),
y: [6615.53, 6617.93, 6610, 6615.19]
},
{
x: new Date(1538816400000),
y: [6615.19, 6621.6, 6608.2, 6620]
},
{
x: new Date(1538818200000),
y: [6619.54, 6625.17, 6614.15, 6620]
},
{
x: new Date(1538820000000),
y: [6620.33, 6634.15, 6617.24, 6624.61]
},
{
x: new Date(1538821800000),
y: [6625.95, 6626, 6611.66, 6617.58]
},
{
x: new Date(1538823600000),
y: [6619, 6625.97, 6595.27, 6598.86]
},
{
x: new Date(1538825400000),
y: [6598.86, 6598.88, 6570, 6587.16]
},
{
x: new Date(1538827200000),
y: [6588.86, 6600, 6580, 6593.4]
},
{
x: new Date(1538829000000),
y: [6593.99, 6598.89, 6585, 6587.81]
},
{
x: new Date(1538830800000),
y: [6587.81, 6592.73, 6567.14, 6578]
},
{
x: new Date(1538832600000),
y: [6578.35, 6581.72, 6567.39, 6579]
},
{
x: new Date(1538834400000),
y: [6579.38, 6580.92, 6566.77, 6575.96]
},
{
x: new Date(1538836200000),
y: [6575.96, 6589, 6571.77, 6588.92]
},
{
x: new Date(1538838000000),
y: [6588.92, 6594, 6577.55, 6589.22]
},
{
x: new Date(1538839800000),
y: [6589.3, 6598.89, 6589.1, 6596.08]
},
{
x: new Date(1538841600000),
y: [6597.5, 6600, 6588.39, 6596.25]
},
{
x: new Date(1538843400000),
y: [6598.03, 6600, 6588.73, 6595.97]
},
{
x: new Date(1538845200000),
y: [6595.97, 6602.01, 6588.17, 6602]
},
{
x: new Date(1538847000000),
y: [6602, 6607, 6596.51, 6599.95]
},
{
x: new Date(1538848800000),
y: [6600.63, 6601.21, 6590.39, 6591.02]
},
{
x: new Date(1538850600000),
y: [6591.02, 6603.08, 6591, 6591]
},
{
x: new Date(1538852400000),
y: [6591, 6601.32, 6585, 6592]
},
{
x: new Date(1538854200000),
y: [6593.13, 6596.01, 6590, 6593.34]
},
{
x: new Date(1538856000000),
y: [6593.34, 6604.76, 6582.63, 6593.86]
},
{
x: new Date(1538857800000),
y: [6593.86, 6604.28, 6586.57, 6600.01]
},
{
x: new Date(1538859600000),
y: [6601.81, 6603.21, 6592.78, 6596.25]
},
{
x: new Date(1538861400000),
y: [6596.25, 6604.2, 6590, 6602.99]
},
{
x: new Date(1538863200000),
y: [6602.99, 6606, 6584.99, 6587.81]
},
{
x: new Date(1538865000000),
y: [6587.81, 6595, 6583.27, 6591.96]
},
{
x: new Date(1538866800000),
y: [6591.97, 6596.07, 6585, 6588.39]
},
{
x: new Date(1538868600000),
y: [6587.6, 6598.21, 6587.6, 6594.27]
},
{
x: new Date(1538870400000),
y: [6596.44, 6601, 6590, 6596.55]
},
{
x: new Date(1538872200000),
y: [6598.91, 6605, 6596.61, 6600.02]
},
{
x: new Date(1538874000000),
y: [6600.55, 6605, 6589.14, 6593.01]
},
{
x: new Date(1538875800000),
y: [6593.15, 6605, 6592, 6603.06]
},
{
x: new Date(1538877600000),
y: [6603.07, 6604.5, 6599.09, 6603.89]
},
{
x: new Date(1538879400000),
y: [6604.44, 6604.44, 6600, 6603.5]
},
{
x: new Date(1538881200000),
y: [6603.5, 6603.99, 6597.5, 6603.86]
},
{
x: new Date(1538883000000),
y: [6603.85, 6605, 6600, 6604.07]
},
{
x: new Date(1538884800000),
y: [6604.98, 6606, 6604.07, 6606]
},
]
}],
plotOptions: {
candlestick: {
colors: {
upward: '#487FFF', // Color for bullish candles (green)
downward: '#C0D9FD', // Color for bearish candles (red)
downward: '#FF9F29' // Color for bearish candles (red)
},
wick: {
useFillColor: true // Use the same color as the candle body for the wick
},
}
},
chart: {
type: 'candlestick',
height: 350,
toolbar: {
show: false
}
},
xaxis: {
type: 'datetime'
},
yaxis: {
tooltip: {
enabled: true
}
}
};
var chart = new ApexCharts(document.querySelector("#candleStickChart"), options);
chart.render();
// ================================== CandleStick charts End =================================
// ================================== Table Charts Start =================================
function createChartTwo(chartId, chartColor) {
let currentYear = new Date().getFullYear();
var options = {
series: [
{
name: 'series1',
data: [35, 45, 38, 41, 36, 43, 37, 55, 40],
},
],
chart: {
type: 'area',
width: 100,
height: 42,
sparkline: {
enabled: true // Remove whitespace
},
toolbar: {
show: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2,
colors: [chartColor],
lineCap: 'round'
},
grid: {
show: true,
borderColor: 'transparent',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: false
}
},
row: {
colors: undefined,
opacity: 0.5
},
column: {
colors: undefined,
opacity: 0.5
},
padding: {
top: -3,
right: 0,
bottom: 0,
left: 0
},
},
fill: {
type: 'gradient',
colors: [chartColor], // Set the starting color (top color) here
gradient: {
shade: 'light', // Gradient shading type
type: 'vertical', // Gradient direction (vertical)
shadeIntensity: 0.5, // Intensity of the gradient shading
gradientToColors: [`${chartColor}00`], // Bottom gradient color (with transparency)
inverseColors: false, // Do not invert colors
opacityFrom: .75, // Starting opacity
opacityTo: 0.3, // Ending opacity
stops: [0, 100],
},
},
// Customize the circle marker color on hover
markers: {
colors: [chartColor],
strokeWidth: 2,
size: 0,
hover: {
size: 8
}
},
xaxis: {
labels: {
show: false
},
categories: [`Jan ${currentYear}`, `Feb ${currentYear}`, `Mar ${currentYear}`, `Apr ${currentYear}`, `May ${currentYear}`, `Jun ${currentYear}`, `Jul ${currentYear}`, `Aug ${currentYear}`, `Sep ${currentYear}`, `Oct ${currentYear}`, `Nov ${currentYear}`, `Dec ${currentYear}`],
tooltip: {
enabled: false,
},
},
yaxis: {
labels: {
show: false
}
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
chart.render();
}
// Call the function for each chart with the desired ID and color
createChartTwo('markerBitcoinChart', '#45B369');
createChartTwo('markerEthereumChart', '#EF4A00');
createChartTwo('markerSolanaChart', '#45B369');
createChartTwo('markerLitecoinChart', '#45B369');
createChartTwo('markerDogecoinChart', '#EF4A00');
createChartTwo('markerCryptoChart', '#EF4A00');
// ================================== Table Charts End =================================
// ================================ User Activities Donut chart End ================================
var options = {
series: [30, 25],
colors: ['#FF9F29', '#487FFF'],
labels: ['Female', 'Male'] ,
legend: {
show: false
},
chart: {
type: 'donut',
height: 260,
sparkline: {
enabled: true // Remove whitespace
},
margin: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
},
stroke: {
width: 0,
},
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}],
};
var chart = new ApexCharts(document.querySelector("#statisticsDonutChart"), options);
chart.render();
// ================================ User Activities Donut chart End ================================
// ================================ Slick Slider Start ================================
$('.card-slider').slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
dots: true,
infinite: true,
autoplay: true,
autoplaySpeed: 2000,
speed: 600,
});
// ================================ Slick Slider End ================================

386
cms_admin/assets/js/homeOneChart.js Executable file
View File

@@ -0,0 +1,386 @@
// =========================== Sales Statistic Line Chart Start ===============================
var options = {
series: [{
name: "This month",
data: [10, 20, 12, 30, 14, 35, 16, 32, 14, 25, 13, 28]
}],
chart: {
height: 264,
type: 'line',
toolbar: {
show: false
},
zoom: {
enabled: false
},
dropShadow: {
enabled: true,
top: 6,
left: 0,
blur: 4,
color: "#000",
opacity: 0.1,
},
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
colors: ['#487FFF'], // Specify the line color here
width: 3
},
markers: {
size: 0,
strokeWidth: 3,
hover: {
size: 8
}
},
tooltip: {
enabled: true,
x: {
show: true,
},
y: {
show: false,
},
z: {
show: false,
}
},
grid: {
row: {
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
borderColor: '#D1D5DB',
strokeDashArray: 3,
},
yaxis: {
labels: {
formatter: function (value) {
return "$" + value + "k";
},
style: {
fontSize: "14px"
}
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tooltip: {
enabled: false
},
labels: {
formatter: function (value) {
return value;
},
style: {
fontSize: "14px"
}
},
axisBorder: {
show: false
},
crosshairs: {
show: true,
width: 20,
stroke: {
width: 0
},
fill: {
type: 'solid',
color: '#487FFF40',
// gradient: {
// colorFrom: '#D8E3F0',
// // colorTo: '#BED1E6',
// stops: [0, 100],
// opacityFrom: 0.4,
// opacityTo: 0.5,
// },
}
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
// =========================== Sales Statistic Line Chart End ===============================
// ================================ Total Subscriber bar chart Start ================================
var options = {
series: [{
name: "Sales",
data: [{
x: 'Sun',
y: 15,
}, {
x: 'Mon',
y: 12,
}, {
x: 'Tue',
y: 18,
}, {
x: 'Wed',
y: 20,
}, {
x: 'Thu',
y: 13,
}, {
x: 'Fri',
y: 16,
}, {
x: 'Sat',
y: 6,
}]
}],
chart: {
type: 'bar',
height: 235,
toolbar: {
show: false
},
},
plotOptions: {
bar: {
borderRadius: 6,
horizontal: false,
columnWidth: 24,
columnWidth: '52%',
endingShape: 'rounded',
}
},
dataLabels: {
enabled: false
},
fill: {
type: 'gradient',
colors: ['#dae5ff'], // Set the starting color (top color) here
gradient: {
shade: 'light', // Gradient shading type
type: 'vertical', // Gradient direction (vertical)
shadeIntensity: 0.5, // Intensity of the gradient shading
gradientToColors: ['#dae5ff'], // Bottom gradient color (with transparency)
inverseColors: false, // Do not invert colors
opacityFrom: 1, // Starting opacity
opacityTo: 1, // Ending opacity
stops: [0, 100],
},
},
grid: {
show: false,
borderColor: '#D1D5DB',
strokeDashArray: 4, // Use a number for dashed style
position: 'back',
padding: {
top: -10,
right: -10,
bottom: -10,
left: -10
}
},
xaxis: {
type: 'category',
categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yaxis: {
show: false,
// labels: {
// formatter: function (value) {
// return (value / 1000).toFixed(0) + 'k';
// }
// }
},
// tooltip: {
// y: {
// formatter: function (value) {
// return value / 1000 + 'k';
// }
// }
// }
};
var chart = new ApexCharts(document.querySelector("#barChart"), options);
chart.render();
// ================================ Total Subscriber bar chart End ================================
// ================================ Users Overview Donut chart Start ================================
var options = {
series: [500, 500, 500],
colors: ['#FF9F29', '#487FFF', '#E4F1FF'],
labels: ['Active', 'New', 'Total'] ,
legend: {
show: false
},
chart: {
type: 'donut',
height: 270,
sparkline: {
enabled: true // Remove whitespace
},
margin: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
},
stroke: {
width: 0,
},
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}],
};
var chart = new ApexCharts(document.querySelector("#userOverviewDonutChart"), options);
chart.render();
// ================================ Users Overview Donut chart End ================================
// ================================ Revenue Report Chart Start ================================
var options = {
series: [{
name: 'Net Profit',
data: [20000, 16000, 14000, 25000, 45000, 18000, 28000, 11000, 26000, 48000, 18000, 22000]
},{
name: 'Revenue',
data: [15000, 18000, 19000, 20000, 35000, 20000, 18000, 13000, 18000, 38000, 14000, 16000]
}],
colors: ['#487FFF', '#FF9F29'],
labels: ['Active', 'New', 'Total'],
legend: {
show: false
},
chart: {
type: 'bar',
height: 250,
toolbar: {
show: false
},
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 4, // Use a number for dashed style
position: 'back',
},
plotOptions: {
bar: {
borderRadius: 4,
columnWidth: 10,
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yaxis: {
categories: ['0', '5000', '10,000', '20,000', '30,000', '50,000', '60,000', '60,000', '70,000', '80,000', '90,000', '100,000'],
},
fill: {
opacity: 1,
width: 18,
},
};
var chart = new ApexCharts(document.querySelector("#paymentStatusChart"), options);
chart.render();
// ================================ Revenue Report Chart End ================================
// ================================ J Vector Map Start ================================
$('#world-map').vectorMap(
{
map: 'world_mill_en',
backgroundColor: 'transparent',
borderColor: '#fff',
borderOpacity: 0.25,
borderWidth: 0,
color: '#000000',
regionStyle : {
initial : {
fill : '#D1D5DB'
}
},
markerStyle: {
initial: {
r: 5,
'fill': '#fff',
'fill-opacity':1,
'stroke': '#000',
'stroke-width' : 1,
'stroke-opacity': 0.4
},
},
markers : [{
latLng : [35.8617, 104.1954],
name : 'China : 250'
},
{
latLng : [25.2744, 133.7751],
name : 'AustrCalia : 250'
},
{
latLng : [36.77, -119.41],
name : 'USA : 82%'
},
{
latLng : [55.37, -3.41],
name : 'UK : 250'
},
{
latLng : [25.20, 55.27],
name : 'UAE : 250'
}],
series: {
regions: [{
values: {
"US": '#487FFF ',
"SA": '#487FFF',
"AU": '#487FFF',
"CN": '#487FFF',
"GB": '#487FFF',
},
attribute: 'fill'
}]
},
hoverOpacity: null,
normalizeFunction: 'linear',
zoomOnScroll: false,
scaleColors: ['#000000', '#000000'],
selectedColor: '#000000',
selectedRegions: [],
enableZoom: false,
hoverColor: '#fff',
});
// ================================ J Vector Map End ================================

305
cms_admin/assets/js/homeThreeChart.js Executable file
View File

@@ -0,0 +1,305 @@
// ================================ Recent Orders Chart Start ================================
function createChartTwo(chartId, chartColor) {
var options = {
series: [
{
name: 'This Day',
data: [18, 25, 20, 35, 25, 55, 45, 50, 40],
},
],
chart: {
type: 'area',
width: '100%',
height: 360,
sparkline: {
enabled: false // Remove whitespace
},
toolbar: {
show: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 4,
colors: [chartColor],
lineCap: 'round'
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 1,
position: 'back',
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: true
}
},
row: {
colors: undefined,
opacity: 0.5
},
column: {
colors: undefined,
opacity: 0.5
},
padding: {
top: -30,
right: 0,
bottom: -10,
left: 0
},
},
fill: {
type: 'gradient',
colors: [chartColor], // Set the starting color (top color) here
gradient: {
shade: 'light', // Gradient shading type
type: 'vertical', // Gradient direction (vertical)
shadeIntensity: 0.5, // Intensity of the gradient shading
gradientToColors: [`${chartColor}00`], // Bottom gradient color (with transparency)
inverseColors: false, // Do not invert colors
opacityFrom: .6, // Starting opacity
opacityTo: 0.3, // Ending opacity
stops: [0, 100],
},
},
// Customize the circle marker color on hover
markers: {
colors: [chartColor],
strokeWidth: 3,
size: 0,
hover: {
size: 10
}
},
xaxis: {
labels: {
show: false
},
categories: [`Jan`, `Feb`, `Mar`, `Apr`, `May`, `Jun`, `Jul`, `Aug`, `Sep`, `Oct`, `Nov`, `Dec`],
tooltip: {
enabled: false,
},
tooltip: {
enabled: false
},
labels: {
formatter: function (value) {
return value;
},
style: {
fontSize: "14px"
}
},
},
yaxis: {
labels: {
show: false
},
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
chart.render();
}
createChartTwo('recent-orders', '#487fff');
// ================================ Recent Orders Chart End ================================
// ================================ Custom Statistics Donut chart Start ================================
var options = {
series: [30, 25],
colors: ['#FF9F29', '#487FFF'],
labels: ['Female', 'Male'] ,
legend: {
show: false
},
chart: {
type: 'donut',
height: 230,
sparkline: {
enabled: true // Remove whitespace
},
margin: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
}
},
stroke: {
width: 0,
},
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}],
};
var chart = new ApexCharts(document.querySelector("#statisticsDonutChart"), options);
chart.render();
// ================================ Custom Statistics Donut chart End ================================
// ================================ Revenue Report Chart Start ================================
var options = {
series: [{
name: 'Net Profit',
data: [20000, 16000, 14000, 25000, 45000, 18000, 28000, 11000, 26000, 48000, 18000, 22000]
},{
name: 'Revenue',
data: [15000, 18000, 19000, 20000, 35000, 20000, 18000, 13000, 18000, 38000, 14000, 16000]
}],
colors: ['#487FFF', '#FF9F29'],
labels: ['Active', 'New', 'Total'],
legend: {
show: false
},
chart: {
type: 'bar',
height: 250,
toolbar: {
show: false
},
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 4, // Use a number for dashed style
position: 'back',
},
plotOptions: {
bar: {
borderRadius: 4,
columnWidth: 10,
},
},
dataLabels: {
enabled: false
},
stroke: {
show: true,
width: 2,
colors: ['transparent']
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yaxis: {
categories: ['0', '5000', '10,000', '20,000', '30,000', '50,000', '60,000', '60,000', '70,000', '80,000', '90,000', '100,000'],
},
fill: {
opacity: 1,
width: 18,
},
};
var chart = new ApexCharts(document.querySelector("#paymentStatusChart"), options);
chart.render();
// ================================ Revenue Report Chart End ================================
// ================================ J Vector Map Start ================================
$('#world-map').vectorMap(
{
map: 'world_mill_en',
backgroundColor: 'transparent',
borderColor: '#fff',
borderOpacity: 0.25,
borderWidth: 0,
color: '#000000',
regionStyle : {
initial : {
fill : '#D1D5DB'
}
},
markerStyle: {
initial: {
r: 5,
'fill': '#fff',
'fill-opacity':1,
'stroke': '#000',
'stroke-width' : 1,
'stroke-opacity': 0.4
},
},
markers : [{
latLng : [35.8617, 104.1954],
name : 'China : 250'
},
{
latLng : [25.2744, 133.7751],
name : 'AustrCalia : 250'
},
{
latLng : [36.77, -119.41],
name : 'USA : 82%'
},
{
latLng : [55.37, -3.41],
name : 'UK : 250'
},
{
latLng : [25.20, 55.27],
name : 'UAE : 250'
}],
series: {
regions: [{
values: {
"US": '#487FFF ',
"SA": '#FF9F29',
"AU": '#45B369',
"CN": '#F86624',
"GB": '#487FFF',
},
attribute: 'fill'
}]
},
hoverOpacity: null,
normalizeFunction: 'linear',
zoomOnScroll: false,
scaleColors: ['#000000', '#000000'],
selectedColor: '#000000',
selectedRegions: [],
enableZoom: false,
hoverColor: '#fff',
});
// ================================ J Vector Map End ================================

572
cms_admin/assets/js/homeTwoChart.js Executable file
View File

@@ -0,0 +1,572 @@
// ================================== Crm Home widgets charts Start =================================
function createChart(chartId, chartColor) {
let currentYear = new Date().getFullYear();
var options = {
series: [
{
name: 'series1',
data: [35, 45, 38, 41, 36, 43, 37, 55, 40],
},
],
chart: {
type: 'area',
width: 80,
height: 42,
sparkline: {
enabled: true // Remove whitespace
},
toolbar: {
show: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2,
colors: [chartColor],
lineCap: 'round'
},
grid: {
show: true,
borderColor: 'transparent',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: false
}
},
row: {
colors: undefined,
opacity: 0.5
},
column: {
colors: undefined,
opacity: 0.5
},
padding: {
top: -3,
right: 0,
bottom: 0,
left: 0
},
},
fill: {
type: 'gradient',
colors: [chartColor], // Set the starting color (top color) here
gradient: {
shade: 'light', // Gradient shading type
type: 'vertical', // Gradient direction (vertical)
shadeIntensity: 0.5, // Intensity of the gradient shading
gradientToColors: [`${chartColor}00`], // Bottom gradient color (with transparency)
inverseColors: false, // Do not invert colors
opacityFrom: .75, // Starting opacity
opacityTo: 0.3, // Ending opacity
stops: [0, 100],
},
},
// Customize the circle marker color on hover
markers: {
colors: [chartColor],
strokeWidth: 2,
size: 0,
hover: {
size: 8
}
},
xaxis: {
labels: {
show: false
},
categories: [`Jan ${currentYear}`, `Feb ${currentYear}`, `Mar ${currentYear}`, `Apr ${currentYear}`, `May ${currentYear}`, `Jun ${currentYear}`, `Jul ${currentYear}`, `Aug ${currentYear}`, `Sep ${currentYear}`, `Oct ${currentYear}`, `Nov ${currentYear}`, `Dec ${currentYear}`],
tooltip: {
enabled: false,
},
},
yaxis: {
labels: {
show: false
}
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
chart.render();
}
// Call the function for each chart with the desired ID and color
createChart('new-user-chart', '#487fff');
createChart('active-user-chart', '#45b369');
createChart('total-sales-chart', '#f4941e');
createChart('conversion-user-chart', '#8252e9');
createChart('leads-chart', '#de3ace');
createChart('total-profit-chart', '#00b8f2');
// ================================== Crm Home widgets charts End =================================
// ================================ Revenue Growth Area Chart Start ================================
function createChartTwo(chartId, chartColor) {
var options = {
series: [
{
name: 'This Day',
data: [4, 18, 13, 40, 30, 50, 30, 60, 40, 75, 45, 90],
},
],
chart: {
type: 'area',
width: '100%',
height: 162,
sparkline: {
enabled: false // Remove whitespace
},
toolbar: {
show: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 2,
colors: [chartColor],
lineCap: 'round'
},
grid: {
show: true,
borderColor: 'red',
strokeDashArray: 0,
position: 'back',
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: false
}
},
row: {
colors: undefined,
opacity: 0.5
},
column: {
colors: undefined,
opacity: 0.5
},
padding: {
top: -30,
right: 0,
bottom: -10,
left: 0
},
},
fill: {
type: 'gradient',
colors: [chartColor], // Set the starting color (top color) here
gradient: {
shade: 'light', // Gradient shading type
type: 'vertical', // Gradient direction (vertical)
shadeIntensity: 0.5, // Intensity of the gradient shading
gradientToColors: [`${chartColor}00`], // Bottom gradient color (with transparency)
inverseColors: false, // Do not invert colors
opacityFrom: .6, // Starting opacity
opacityTo: 0.3, // Ending opacity
stops: [0, 100],
},
},
// Customize the circle marker color on hover
markers: {
colors: [chartColor],
strokeWidth: 3,
size: 0,
hover: {
size: 10
}
},
xaxis: {
labels: {
show: false
},
categories: [`Jan`, `Feb`, `Mar`, `Apr`, `May`, `Jun`, `Jul`, `Aug`, `Sep`, `Oct`, `Nov`, `Dec`],
tooltip: {
enabled: false,
},
tooltip: {
enabled: false
},
labels: {
formatter: function (value) {
return value;
},
style: {
fontSize: "14px"
}
},
},
yaxis: {
labels: {
show: false
},
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
chart.render();
}
createChartTwo('revenue-chart', '#487fff');
// ================================ Revenue Growth Area Chart End ================================
// ================================ Earning Statistics bar chart Start ================================
var options = {
series: [{
name: "Sales",
data: [{
x: 'Jan',
y: 85000,
}, {
x: 'Feb',
y: 70000,
}, {
x: 'Mar',
y: 40000,
}, {
x: 'Apr',
y: 50000,
}, {
x: 'May',
y: 60000,
}, {
x: 'Jun',
y: 50000,
}, {
x: 'Jul',
y: 40000,
}, {
x: 'Aug',
y: 50000,
}, {
x: 'Sep',
y: 40000,
}, {
x: 'Oct',
y: 60000,
}, {
x: 'Nov',
y: 30000,
}, {
x: 'Dec',
y: 50000,
}]
}],
chart: {
type: 'bar',
height: 310,
toolbar: {
show: false
}
},
plotOptions: {
bar: {
borderRadius: 4,
horizontal: false,
columnWidth: '23%',
endingShape: 'rounded',
}
},
dataLabels: {
enabled: false
},
fill: {
type: 'gradient',
colors: ['#487FFF'], // Set the starting color (top color) here
gradient: {
shade: 'light', // Gradient shading type
type: 'vertical', // Gradient direction (vertical)
shadeIntensity: 0.5, // Intensity of the gradient shading
gradientToColors: ['#487FFF'], // Bottom gradient color (with transparency)
inverseColors: false, // Do not invert colors
opacityFrom: 1, // Starting opacity
opacityTo: 1, // Ending opacity
stops: [0, 100],
},
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 4, // Use a number for dashed style
position: 'back',
},
xaxis: {
type: 'category',
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yaxis: {
labels: {
formatter: function (value) {
return (value / 1000).toFixed(0) + 'k';
}
}
},
tooltip: {
y: {
formatter: function (value) {
return value / 1000 + 'k';
}
}
}
};
var chart = new ApexCharts(document.querySelector("#barChart"), options);
chart.render();
// ================================ Earning Statistics bar chart End ================================
// ================================ Custom Overview Donut chart Start ================================
var options = {
series: [500, 500, 500],
colors: ['#45B369', '#FF9F29', '#487FFF'],
labels: ['Active', 'New', 'Total'] ,
legend: {
show: false
},
chart: {
type: 'donut',
height: 300,
sparkline: {
enabled: true // Remove whitespace
},
margin: {
top: -100,
right: -100,
bottom: -100,
left: -100
},
padding: {
top: -100,
right: -100,
bottom: -100,
left: -100
}
},
stroke: {
width: 0,
},
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}],
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
offsetY: 10,
customScale: 0.8,
donut: {
size: '70%',
labels: {
show: true,
total: {
showAlways: true,
show: true,
label: 'Customer Report',
// formatter: function (w) {
// return w.globals.seriesTotals.reduce((a, b) => {
// return a + b;
// }, 0);
// }
}
},
}
}
},
};
var chart = new ApexCharts(document.querySelector("#donutChart"), options);
chart.render();
// ================================ Custom Overview Donut chart End ================================
// ================================ Client Payment Status chart End ================================
var options = {
series: [{
name: 'Net Profit',
data: [44, 100, 40, 56, 30, 58, 50]
}, {
name: 'Revenue',
data: [90, 140, 80, 125, 70, 140, 110]
}, {
name: 'Free Cash',
data: [60, 120, 60, 90, 50, 95, 90]
}],
colors: ['#45B369', '#144bd6', '#FF9F29'],
labels: ['Active', 'New', 'Total'] ,
legend: {
show: false
},
chart: {
type: 'bar',
height: 350,
toolbar: {
show: false
},
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 4, // Use a number for dashed style
position: 'back',
},
plotOptions: {
bar: {
borderRadius: 4,
columnWidth: 8,
},
},
dataLabels: {
enabled: false
},
states: {
hover: {
filter: {
type: 'none'
}
}
},
stroke: {
show: true,
width: 0,
colors: ['transparent']
},
xaxis: {
categories: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat', 'Sun'],
},
yaxis: {
categories: ['0', '10,000', '20,000', '30,000', '50,000', '1,00,000', '1,00,000'],
},
fill: {
opacity: 1,
width: 18,
},
};
var chart = new ApexCharts(document.querySelector("#paymentStatusChart"), options);
chart.render();
// ================================ Client Payment Status chart End ================================
// ================================ J Vector Map Start ================================
$('#world-map').vectorMap(
{
map: 'world_mill_en',
backgroundColor: 'transparent',
borderColor: '#fff',
borderOpacity: 0.25,
borderWidth: 0,
color: '#000000',
regionStyle : {
initial : {
fill : '#D1D5DB'
}
},
markerStyle: {
initial: {
r: 5,
'fill': '#fff',
'fill-opacity':1,
'stroke': '#000',
'stroke-width' : 1,
'stroke-opacity': 0.4
},
},
markers : [{
latLng : [35.8617, 104.1954],
name : 'China : 250'
},
{
latLng : [25.2744, 133.7751],
name : 'AustrCalia : 250'
},
{
latLng : [36.77, -119.41],
name : 'USA : 82%'
},
{
latLng : [55.37, -3.41],
name : 'UK : 250'
},
{
latLng : [25.20, 55.27],
name : 'UAE : 250'
}],
series: {
regions: [{
values: {
"US": '#487FFF ',
"SA": '#487FFF',
"AU": '#487FFF',
"CN": '#487FFF',
"GB": '#487FFF',
},
attribute: 'fill'
}]
},
hoverOpacity: null,
normalizeFunction: 'linear',
zoomOnScroll: false,
scaleColors: ['#000000', '#000000'],
selectedColor: '#000000',
selectedRegions: [],
enableZoom: false,
hoverColor: '#fff',
});
// ================================ J Vector Map End ================================

55
cms_admin/assets/js/invoice.js Executable file
View File

@@ -0,0 +1,55 @@
'use strict';
(function ($) {
$('#addRow').click(function() {
const rowCount = $('#invoice-table tbody tr').length + 1;
const newRow = `
<tr>
<td>${String(rowCount).padStart(2, '0')}</td>
<td><input type="text" class="invoive-form-control" value="New Item"></td>
<td><input type="number" class="invoive-form-control" value="1"></td>
<td><input type="text" class="invoive-form-control" value="PC"></td>
<td><input type="number" class="invoive-form-control" value="0.00" step="0.01"></td>
<td><input type="number" class="invoive-form-control" value="0.00" step="0.01"></td>
<td class="text-center">
<button type="button" class="remove-row"><iconify-icon icon="ic:twotone-close" class="text-danger-main text-xl"></iconify-icon></button>
</td>
</tr>
`;
$('#invoice-table tbody').append(newRow);
});
$(document).on('click', '.remove-row', function() {
$(this).closest('tr').remove();
updateRowNumbers();
});
function updateRowNumbers() {
$('#invoice-table tbody tr').each(function(index) {
$(this).find('td:first').text(String(index + 1).padStart(2, '0'));
});
}
// Make table cells editable on click
$('.editable').click(function() {
const cell = $(this);
const originalText = cell.text().substring(1); // Remove the leading ':'
const input = $('<input type="text" class="invoive-form-control" />').val(originalText);
cell.empty().append(input);
input.focus().select();
input.blur(function() {
const newText = input.val();
cell.text(' ' + newText);
});
input.keypress(function(e) {
if (e.which == 13) { // Enter key
const newText = input.val();
cell.text(':' + newText);
}
});
});
})(jQuery);

188
cms_admin/assets/js/lib/audioplayer.js Executable file
View File

@@ -0,0 +1,188 @@
/*
AUTHOR: Osvaldas Valutis, www.osvaldas.info
*/
(function($, window, document, undefined) {
var isTouch = 'ontouchstart' in window,
eStart = isTouch ? 'touchstart' : 'mousedown',
eMove = isTouch ? 'touchmove' : 'mousemove',
eEnd = isTouch ? 'touchend' : 'mouseup',
eCancel = isTouch ? 'touchcancel' : 'mouseup',
secondsToTime = function(secs) {
var hours = Math.floor(secs / 3600),
minutes = Math.floor(secs % 3600 / 60),
seconds = Math.ceil(secs % 3600 % 60);
return (hours == 0 ? '' : hours > 0 && hours.toString().length < 2 ? '0' + hours + ':' : hours + ':') + (minutes.toString().length < 2 ? '0' + minutes : minutes) + ':' + (seconds.toString().length < 2 ? '0' + seconds : seconds);
},
canPlayType = function(file) {
var audioElement = document.createElement('audio');
return !!(audioElement.canPlayType && audioElement.canPlayType('audio/' + file.split('.').pop().toLowerCase() + ';').replace(/no/, ''));
};
$.fn.audioPlayer = function(params) {
var params = $.extend({
classPrefix: 'audioplayer',
strPlay: '',
strPause: '',
strVolume: ''
}, params),
cssClass = {},
cssClassSub = {
playPause: 'playpause',
playing: 'playing',
time: 'time',
timeCurrent: 'time-current',
timeDuration: 'time-duration',
bar: 'bar',
barLoaded: 'bar-loaded',
barPlayed: 'bar-played',
volume: 'volume',
volumeButton: 'volume-button',
volumeAdjust: 'volume-adjust',
noVolume: 'novolume',
mute: 'mute',
mini: 'mini'
};
for (var subName in cssClassSub)
cssClass[subName] = params.classPrefix + '-' + cssClassSub[subName];
this.each(function() {
if ($(this).prop('tagName').toLowerCase() != 'audio')
return false;
var $this = $(this),
audioFile = $this.attr('src'),
isAutoPlay = $this.get(0).getAttribute('autoplay'),
isAutoPlay = isAutoPlay === '' || isAutoPlay === 'autoplay' ? true : false,
isLoop = $this.get(0).getAttribute('loop'),
isLoop = isLoop === '' || isLoop === 'loop' ? true : false,
isSupport = false;
if (typeof audioFile === 'undefined') {
$this.find('source').each(function() {
audioFile = $(this).attr('src');
if (typeof audioFile !== 'undefined' && canPlayType(audioFile)) {
isSupport = true;
return false;
}
});
} else if (canPlayType(audioFile)) isSupport = true;
var thePlayer = $('<div class="' + params.classPrefix + '">' + (isSupport ? $('<div>').append($this.eq(0).clone()).html() : '<embed src="' + audioFile + '" width="0" height="0" volume="100" autostart="' + isAutoPlay.toString() + '" loop="' + isLoop.toString() + '" />') + '<div class="' + cssClass.playPause + '" title="' + params.strPlay + '"><a href="#">' + params.strPlay + '</a></div></div>'),
theAudio = isSupport ? thePlayer.find('audio') : thePlayer.find('embed'),
theAudio = theAudio.get(0);
if (isSupport) {
thePlayer.find('audio').css({
'width': 0,
'height': 0,
'visibility': 'hidden'
});
thePlayer.append('<div class="' + cssClass.time + ' ' + cssClass.timeCurrent + '"></div><div class="' + cssClass.bar + '"><div class="' + cssClass.barLoaded + '"></div><div class="' + cssClass.barPlayed + '"></div></div><div class="' + cssClass.time + ' ' + cssClass.timeDuration + '"></div><div class="' + cssClass.volume + '"><div class="' + cssClass.volumeButton + '" title="' + params.strVolume + '"><a href="#">' + params.strVolume + '</a></div><div class="' + cssClass.volumeAdjust + '"><div><div></div></div></div></div>');
var theBar = thePlayer.find('.' + cssClass.bar),
barPlayed = thePlayer.find('.' + cssClass.barPlayed),
barLoaded = thePlayer.find('.' + cssClass.barLoaded),
timeCurrent = thePlayer.find('.' + cssClass.timeCurrent),
timeDuration = thePlayer.find('.' + cssClass.timeDuration),
volumeButton = thePlayer.find('.' + cssClass.volumeButton),
volumeAdjuster = thePlayer.find('.' + cssClass.volumeAdjust + ' > div'),
volumeDefault = 0,
adjustCurrentTime = function(e) {
theRealEvent = isTouch ? e.originalEvent.touches[0] : e;
theAudio.currentTime = Math.round((theAudio.duration * (theRealEvent.pageX - theBar.offset().left)) / theBar.width());
},
adjustVolume = function(e) {
theRealEvent = isTouch ? e.originalEvent.touches[0] : e;
theAudio.volume = Math.abs((theRealEvent.pageX - volumeAdjuster.offset().left) / volumeAdjuster.width());
},
updateLoadBar = setInterval(function() {
if (theAudio.buffered.length > 0) {
barLoaded.width((theAudio.buffered.end(0) / theAudio.duration) * 100 + '%');
if (theAudio.buffered.end(0) >= theAudio.duration)
clearInterval(updateLoadBar);
}
}, 100);
var volumeTestDefault = theAudio.volume,
volumeTestValue = theAudio.volume = 0.111;
if (Math.round(theAudio.volume * 1000) / 1000 == volumeTestValue) theAudio.volume = volumeTestDefault;
else thePlayer.addClass(cssClass.noVolume);
timeDuration.html('&hellip;');
timeCurrent.text(secondsToTime(0));
theAudio.addEventListener('loadeddata', function() {
timeDuration.text(secondsToTime(theAudio.duration));
volumeAdjuster.find('div').width(theAudio.volume * 100 + '%');
volumeDefault = theAudio.volume;
});
theAudio.addEventListener('timeupdate', function() {
timeCurrent.text(secondsToTime(theAudio.currentTime));
barPlayed.width((theAudio.currentTime / theAudio.duration) * 100 + '%');
});
theAudio.addEventListener('volumechange', function() {
volumeAdjuster.find('div').width(theAudio.volume * 100 + '%');
if (theAudio.volume > 0 && thePlayer.hasClass(cssClass.mute)) thePlayer.removeClass(cssClass.mute);
if (theAudio.volume <= 0 && !thePlayer.hasClass(cssClass.mute)) thePlayer.addClass(cssClass.mute);
});
theAudio.addEventListener('ended', function() {
thePlayer.removeClass(cssClass.playing);
});
theBar.on(eStart, function(e) {
adjustCurrentTime(e);
theBar.on(eMove, function(e) {
adjustCurrentTime(e);
});
})
.on(eCancel, function() {
theBar.unbind(eMove);
});
volumeButton.on('click', function() {
if (thePlayer.hasClass(cssClass.mute)) {
thePlayer.removeClass(cssClass.mute);
theAudio.volume = volumeDefault;
} else {
thePlayer.addClass(cssClass.mute);
volumeDefault = theAudio.volume;
theAudio.volume = 0;
}
return false;
});
volumeAdjuster.on(eStart, function(e) {
adjustVolume(e);
volumeAdjuster.on(eMove, function(e) {
adjustVolume(e);
});
})
.on(eCancel, function() {
volumeAdjuster.unbind(eMove);
});
} else thePlayer.addClass(cssClass.mini);
if (isAutoPlay) thePlayer.addClass(cssClass.playing);
thePlayer.find('.' + cssClass.playPause).on('click', function() {
if (thePlayer.hasClass(cssClass.playing)) {
$(this).attr('title', params.strPlay).find('a').html(params.strPlay);
thePlayer.removeClass(cssClass.playing);
isSupport ? theAudio.pause() : theAudio.Stop();
} else {
$(this).attr('title', params.strPause).find('a').html(params.strPause);
thePlayer.addClass(cssClass.playing);
isSupport ? theAudio.play() : theAudio.Play();
}
return false;
});
$this.replaceWith(thePlayer);
});
return this;
};
})(jQuery, window, document);

7
cms_admin/assets/js/lib/bootstrap.bundle.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

4
cms_admin/assets/js/lib/dataTables.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

76
cms_admin/assets/js/lib/file-upload.js Executable file
View File

@@ -0,0 +1,76 @@
// ********************************** We can use This code is for by ID *********************************
(function ($) {
var fileUploadCount = 0;
$.fn.fileUpload = function () {
return this.each(function () {
var fileUploadDiv = $(this);
var fileUploadId = `fileUpload-${++fileUploadCount}`;
// Creates HTML content for the file upload area.
var fileDivContent = `
<label for="${fileUploadId}" class="file-upload image-upload__box">
<div class="image-upload__boxInner">
<i class="ri-gallery-line image-upload__icon"></i>
<p class="text-xs text-secondary-light mt-4 mb-0">Drag & drop image here</p>
</div>
<input type="file" id="${fileUploadId}" name="[]" multiple hidden />
</label>
`;
fileUploadDiv.html(fileDivContent).addClass("file-container");
// Adds the information of uploaded files to file upload area.
function handleFiles(files) {
if (files.length > 0) {
var file = files[0]; // Assuming only one file is selected
var fileName = file.name;
var fileSize = (file.size / 1024).toFixed(2) + " KB";
var fileType = file.type;
var preview = fileType.startsWith("image")
? `<img src="${URL.createObjectURL(file)}" alt="${fileName}" class="image-upload__image" height="30">`
: ` <span class="image-upload__anotherFileIcon"> <i class="fas fa-file"></i></span>`;
// Update the content of the file upload area
var fileUploadLabel = fileUploadDiv.find(`label.file-upload`);
fileUploadLabel.find('.image-upload__boxInner').html(`
${preview}
<button type="button" class="image-upload__deleteBtn"><i class="ri-close-line"></i></button>
`);
// Attach a click event to the "Delete" button
fileUploadLabel.find('.image-upload__deleteBtn').click(function () {
fileUploadDiv.html(fileDivContent);
initializeFileUpload();
});
}
}
function initializeFileUpload() {
// Events triggered after dragging files.
fileUploadDiv.on({
dragover: function (e) {
e.preventDefault();
fileUploadDiv.toggleClass("dragover", e.type === "dragover");
},
drop: function (e) {
e.preventDefault();
fileUploadDiv.removeClass("dragover");
handleFiles(e.originalEvent.dataTransfer.files);
},
});
// Event triggered when file is selected.
fileUploadDiv.find(`label.file-upload input[type="file"]`).change(function () {
handleFiles(this.files);
});
}
initializeFileUpload();
});
};
})(jQuery);
// Apply fileUpload functionality to each container with the class "fileUpload"
$('.fileUpload').fileUpload();

12
cms_admin/assets/js/lib/iconify-icon.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

2
cms_admin/assets/js/lib/jquery-3.7.1.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

1
cms_admin/assets/js/lib/jquery-jvectormap-2.0.5.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

1
cms_admin/assets/js/lib/jquery-jvectormap-world-mill-en.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

13
cms_admin/assets/js/lib/jquery-ui.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

4
cms_admin/assets/js/lib/magnifc-popup.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

7
cms_admin/assets/js/lib/prism.js Executable file
View File

File diff suppressed because one or more lines are too long

1
cms_admin/assets/js/lib/slick.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

590
cms_admin/assets/js/lineChartPageChart.js Executable file
View File

@@ -0,0 +1,590 @@
// =========================== Default Line Chart Start ===============================
var options = {
series: [{
name: "This month",
data: [0, 48, 20, 24, 6, 33, 30, 48, 35, 18, 20, 5]
}],
chart: {
height: 264,
type: 'line',
toolbar: {
show: false
},
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
colors: ['#487FFF'],
width: 4
},
markers: {
size: 0,
strokeWidth: 3,
hover: {
size: 8
}
},
tooltip: {
enabled: true,
x: {
show: true,
},
y: {
show: false,
},
z: {
show: false,
}
},
grid: {
row: {
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
borderColor: '#D1D5DB',
strokeDashArray: 3,
},
yaxis: {
labels: {
formatter: function (value) {
return "$" + value + "k";
},
style: {
fontSize: "14px"
}
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tooltip: {
enabled: false
},
labels: {
formatter: function (value) {
return value;
},
style: {
fontSize: "14px"
}
},
axisBorder: {
show: false
},
// crosshairs: {
// show: true,
// width: 20,
// stroke: {
// width: 0
// },
// fill: {
// type: 'solid',
// color: '#487FFF40',
// // gradient: {
// // colorFrom: '#D8E3F0',
// // // colorTo: '#BED1E6',
// // stops: [0, 100],
// // opacityFrom: 0.4,
// // opacityTo: 0.5,
// // },
// }
// }
}
};
var chart = new ApexCharts(document.querySelector("#defaultLineChart"), options);
chart.render();
// =========================== Default Line Chart End ===============================
// =========================== Zoom able Line Chart End ===============================
function createChartTwo(chartId, chartColor) {
var options = {
series: [
{
name: 'This Day',
data: [12, 18, 12, 48, 18, 30, 18, 15, 88, 40, 65, 24, 48],
},
],
chart: {
type: 'area',
width: '100%',
height: 264,
sparkline: {
enabled: false // Remove whitespace
},
toolbar: {
show: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight',
width: 4,
colors: [chartColor],
lineCap: 'round'
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 3,
position: 'back',
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: true
}
},
row: {
colors: undefined,
opacity: 0.5
},
column: {
colors: undefined,
opacity: 0.5
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
},
fill: {
type: 'gradient',
colors: [chartColor], // Set the starting color (top color) here
gradient: {
shade: 'light', // Gradient shading type
type: 'vertical', // Gradient direction (vertical)
shadeIntensity: 0.5, // Intensity of the gradient shading
gradientToColors: [`${chartColor}00`], // Bottom gradient color (with transparency)
inverseColors: false, // Do not invert colors
opacityFrom: .6, // Starting opacity
opacityTo: 0.3, // Ending opacity
stops: [0, 100],
},
},
// Customize the circle marker color on hover
markers: {
colors: [chartColor],
strokeWidth: 3,
size: 0,
hover: {
size: 10
}
},
xaxis: {
labels: {
show: false
},
categories: [`Jan`, `Feb`, `Mar`, `Apr`, `May`, `Jun`, `Jul`, `Aug`, `Sep`, `Oct`, `Nov`, `Dec`],
tooltip: {
enabled: false,
},
tooltip: {
enabled: false
},
labels: {
formatter: function (value) {
return value;
},
style: {
fontSize: "14px"
}
},
},
yaxis: {
labels: {
formatter: function (value) {
return "$" + value + "k";
},
style: {
fontSize: "14px"
}
},
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
};
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
chart.render();
}
createChartTwo('zoomAbleLineChart', '#487fff');
// =========================== Zoom able Line Chart End ===============================
// =========================== Line Chart With Data labels Start ===============================
var options = {
series: [{
name: "Desktops",
data: [5, 25, 35, 15, 21, 15, 35, 35, 51]
}],
chart: {
height: 264,
type: 'line',
colors: '#000',
zoom: {
enabled: false
},
toolbar: {
show: false
},
},
colors: ['#487FFF'], // Set the color of the series
dataLabels: {
enabled: true
},
stroke: {
curve: 'straight',
width: 4,
color: "#000"
},
markers: {
size: 0,
strokeWidth: 3,
hover: {
size: 8
}
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 3,
row: {
colors: ['#f3f3f3', 'transparent'],
opacity: 0,
},
},
// Customize the circle marker color on hover
markers: {
colors: '#487FFF',
strokeWidth: 3,
size: 0,
hover: {
size: 10
}
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
lines: {
show: false
}
},
yaxis: {
labels: {
formatter: function (value) {
return "$" + value + "k";
},
style: {
fontSize: "14px"
}
},
},
};
var chart = new ApexCharts(document.querySelector("#lineDataLabel"), options);
chart.render();
// =========================== Line Chart With Data labels End ===============================
// =========================== Double Line Chart Start ===============================
function createLineChart(chartId, chartColor) {
var options = {
series: [
{
name: 'This Day',
data: [8, 15, 9, 20, 10, 33, 13, 22, 8, 17, 10, 15],
},
{
name: 'Example',
data: [8, 24, 18, 40, 18, 48, 22, 38, 18, 30, 20, 28],
},
],
chart: {
type: 'line',
width: '100%',
height: 264,
sparkline: {
enabled: false // Remove whitespace
},
toolbar: {
show: false
},
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
colors: ['#487FFF', '#FF9F29'], // Set the color of the series
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
width: 4,
colors: ["#FF9F29", chartColor],
lineCap: 'round',
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 3,
position: 'back',
xaxis: {
lines: {
show: false
}
},
yaxis: {
lines: {
show: true
}
},
row: {
colors: undefined,
opacity: 0.5
},
column: {
colors: undefined,
opacity: 0.5
},
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
},
// Customize the circle marker color on hover
markers: {
colors: ["#FF9F29", chartColor],
strokeWidth: 3,
size: 0,
hover: {
size: 10
}
},
xaxis: {
labels: {
show: false
},
categories: [`Jan`, `Feb`, `Mar`, `Apr`, `May`, `Jun`, `Jul`, `Aug`, `Sep`, `Oct`, `Nov`, `Dec`],
tooltip: {
enabled: false,
},
labels: {
formatter: function (value) {
return value;
},
style: {
fontSize: "14px"
}
},
},
yaxis: {
labels: {
formatter: function (value) {
return "$" + value + "k";
},
style: {
fontSize: "14px"
}
},
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
legend: {
show: false
}
};
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
chart.render();
}
createLineChart('doubleLineChart', '#487fff');
// =========================== Double Line Chart End ===============================
// =========================== Step Line Chart Start ===============================
var options = {
series: [{
data: [16, 25, 38, 50, 32, 20, 42, 18, 4, 25, 12, 12],
name: "Example",
}],
chart: {
type: 'line',
height: 270,
toolbar: {
show: false
},
},
stroke: {
curve: 'stepline',
},
colors: ['#487FFF'], // Set the color of the series
dataLabels: {
enabled: false
},
markers: {
hover: {
sizeOffset: 4
}
},
grid: {
show: true,
borderColor: '#D1D5DB',
strokeDashArray: 3,
position: 'back',
},
xaxis: {
labels: {
show: false
},
categories: [`Jan`, `Feb`, `Mar`, `Apr`, `May`, `Jun`, `Jul`, `Aug`, `Sep`, `Oct`, `Nov`, `Dec`],
tooltip: {
enabled: false,
},
labels: {
formatter: function (value) {
return value;
},
style: {
fontSize: "14px"
}
},
},
yaxis: {
labels: {
formatter: function (value) {
return "$" + value + "k";
},
style: {
fontSize: "14px"
}
},
},
};
var chart = new ApexCharts(document.querySelector("#stepLineChart"), options);
chart.render();
// =========================== Step Line Chart End ===============================
// =========================== Gradient Line Chart Start ===============================
var options = {
series: [{
name: "This month",
data: [12, 6, 22, 18, 38, 16, 40, 8, 35, 18, 35, 22, 50]
}],
chart: {
height: 264,
type: 'line',
toolbar: {
show: false
},
zoom: {
enabled: false
},
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
colors: ['#FF9F29'], // Specify the line color here
width: 4
},
fill: {
type: 'gradient',
gradient: {
shade: 'dark',
gradientToColors: [ '#0E53F4'],
shadeIntensity: 1,
type: 'horizontal',
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100]
},
},
markers: {
size: 0,
strokeWidth: 3,
hover: {
size: 8
}
},
tooltip: {
enabled: true,
x: {
show: true,
},
y: {
show: false,
},
z: {
show: false,
}
},
grid: {
row: {
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
borderColor: '#D1D5DB',
strokeDashArray: 3,
},
yaxis: {
labels: {
formatter: function (value) {
return "$" + value + "k";
},
style: {
fontSize: "14px"
}
},
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tooltip: {
enabled: false
},
labels: {
formatter: function (value) {
return value;
},
style: {
fontSize: "14px"
}
},
axisBorder: {
show: false
},
}
};
var chart = new ApexCharts(document.querySelector("#gradientLineChart"), options);
chart.render();
// =========================== Gradient Line Chart End ===============================

160
cms_admin/assets/js/pieChartPageChart.js Executable file
View File

@@ -0,0 +1,160 @@
// ============================ Pie Chart Start ==========================
var options = {
series: [70, 80, 90, 30],
chart: {
height: 264,
type: 'pie',
},
stroke: {
show: false // This will remove the white border
},
labels: ['Team A', 'Team B', 'Team C', 'Team D'],
colors: ['#487FFF', "#FF9F29", '#45B369', '#EF4A00'],
plotOptions: {
pie: {
dataLabels: {
dropShadow: {
enabled: true,
},
},
}
},
legend: {
position: 'bottom',
horizontalAlign: 'center' // Align the legend horizontally
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
show: false,
position: 'bottom', // Ensure the legend is at the bottom
horizontalAlign: 'center', // Align the legend horizontally
offsetX: -10,
offsetY: 0
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#pieChart"), options);
chart.render();
// ============================ Pie Chart End ==========================
// ============================ Donut Chart Start ==========================
var options = {
series: [44, 55, 13, 33, 28, 14],
chart: {
height: 264,
type: 'donut',
},
colors: ['#16a34a', '#487fff', '#2563eb', '#dc2626', '#f86624', '#ffc107'],
dataLabels: {
enabled: false
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
show: false
}
}
}],
legend: {
position: 'right',
offsetY: 0,
height: 230,
show: false
}
};
var chart = new ApexCharts(document.querySelector("#basicDonutChart"), options);
chart.render();
// ============================ Donut Chart End ==========================
// ============================ Radar Chart Start ==========================
var options = {
series: [{
name: 'Product 1',
data: [80, 50, 30, 40, 60, 20, 62, 30, 40, 80],
}, {
name: 'Product 2',
data: [80, 60, 80, 70, 68, 60, 56, 50, 40, 45],
}],
colors: ['#FF9F29', '#487FFF'],
chart: {
height: 264,
type: 'radar',
toolbar: {
show: false,
},
dropShadow: {
enabled: true,
blur: 1,
left: 1,
top: 1
}
},
stroke: {
width: 2
},
fill: {
opacity: 0.25
},
markers: {
size: 0
},
yaxis: {
stepSize: 20
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
}
};
var chart = new ApexCharts(document.querySelector("#radarChart"), options);
chart.render();
// ============================ Radar Chart End ==========================
// ============================ Multiple series Chart Start ==========================
var options = {
series: [20, 22, 28, 10],
chart: {
type: 'polarArea',
height: 264,
},
labels: ['Product 1', 'Product 2', 'Product 3', 'Product 4'],
colors: ['#487FFF', '#FF9F29', '#9935FE', '#EF4A00'],
stroke: {
colors: ['#487FFF', '#FF9F29', '#9935FE', '#EF4A00'],
},
fill: {
opacity: 0.8
},
legend: {
position: 'bottom',
horizontalAlign: 'center' // Align the legend horizontally
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#multipleSeriesChart"), options);
chart.render();
// ============================ Multiple series Chart End ==========================