572 lines
15 KiB
JavaScript
572 lines
15 KiB
JavaScript
// ================================== 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 ================================
|
|
|