377 lines
7.6 KiB
JavaScript
377 lines
7.6 KiB
JavaScript
/*
|
||
Template Name: Minton - Responsive Bootstrap 4 Admin Dashboard
|
||
Author: CoderThemes
|
||
Website: https://coderthemes.com/
|
||
Contact: support@coderthemes.com
|
||
File: Sales Dashboard
|
||
*/
|
||
|
||
|
||
//
|
||
// Revenue Report Chart
|
||
//
|
||
var colors = ["#727cf5", "#e3eaef"];
|
||
var dataColors = $("#revenue-report").data('colors');
|
||
if (dataColors) {
|
||
colors = dataColors.split(",");
|
||
}
|
||
|
||
var options = {
|
||
chart: {
|
||
height: 265,
|
||
type: 'bar',
|
||
stacked: true,
|
||
toolbar: {
|
||
show: false
|
||
}
|
||
},
|
||
plotOptions: {
|
||
bar: {
|
||
horizontal: false,
|
||
columnWidth: '25%'
|
||
},
|
||
},
|
||
dataLabels: {
|
||
enabled: false
|
||
},
|
||
stroke: {
|
||
show: true,
|
||
width: 2,
|
||
colors: ['transparent']
|
||
},
|
||
series: [{
|
||
name: 'Actual',
|
||
data: [65, 59, 80, 81, 56, 89, 40, 32, 65, 59, 80, 81]
|
||
}, {
|
||
name: 'Projection',
|
||
data: [89, 40, 32, 65, 59, 80, 81, 56, 89, 40, 65, 59]
|
||
}],
|
||
zoom: {
|
||
enabled: false
|
||
},
|
||
legend: {
|
||
show: false
|
||
},
|
||
colors: colors,
|
||
xaxis: {
|
||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||
axisBorder: {
|
||
show: false
|
||
},
|
||
},
|
||
yaxis: {
|
||
labels: {
|
||
formatter: function (val) {
|
||
return val + "k"
|
||
},
|
||
offsetX: -15
|
||
}
|
||
},
|
||
fill: {
|
||
opacity: 1
|
||
},
|
||
tooltip: {
|
||
y: {
|
||
formatter: function (val) {
|
||
return "$" + val + "k"
|
||
}
|
||
},
|
||
},
|
||
}
|
||
|
||
var chart = new ApexCharts(
|
||
document.querySelector("#revenue-report"),
|
||
options
|
||
);
|
||
|
||
chart.render();
|
||
|
||
//
|
||
// Products Sales Chart
|
||
//
|
||
var colors = ['#3bafda', '#1abc9c', "#f672a7"];
|
||
var dataColors = $("#products-sales").data('colors');
|
||
if (dataColors) {
|
||
colors = dataColors.split(",");
|
||
}
|
||
var options = {
|
||
chart: {
|
||
height: 265,
|
||
type: 'line',
|
||
padding: {
|
||
right: 0,
|
||
left: 0
|
||
},
|
||
stacked: false,
|
||
toolbar: {
|
||
show: false
|
||
}
|
||
},
|
||
stroke: {
|
||
width: [1, 2],
|
||
curve: 'smooth'
|
||
},
|
||
plotOptions: {
|
||
bar: {
|
||
columnWidth: '50%'
|
||
}
|
||
},
|
||
colors: colors,
|
||
series: [{
|
||
name: 'Desktops',
|
||
type: 'area',
|
||
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43]
|
||
}, {
|
||
name: 'Laptops',
|
||
type: 'line',
|
||
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39]
|
||
}],
|
||
fill: {
|
||
opacity: [0.25, 1],
|
||
gradient: {
|
||
inverseColors: false,
|
||
shade: 'light',
|
||
type: "vertical",
|
||
opacityFrom: 0.85,
|
||
opacityTo: 0.55,
|
||
stops: [0, 100, 100, 100]
|
||
}
|
||
},
|
||
labels: ['01/01/2020', '02/01/2020', '03/01/2020', '04/01/2020', '05/01/2020', '06/01/2020', '07/01/2020', '08/01/2020', '09/01/2020', '10/01/2020', '11/01/2020'],
|
||
markers: {
|
||
size: 0
|
||
},
|
||
legend: {
|
||
offsetY: 5,
|
||
},
|
||
xaxis: {
|
||
type: 'datetime'
|
||
},
|
||
yaxis: {
|
||
labels: {
|
||
formatter: function (val) {
|
||
return val + "k"
|
||
},
|
||
offsetX: -10
|
||
}
|
||
},
|
||
tooltip: {
|
||
shared: true,
|
||
intersect: false,
|
||
y: {
|
||
formatter: function (y) {
|
||
if (typeof y !== "undefined") {
|
||
return y.toFixed(0) + " Dollars";
|
||
}
|
||
return y;
|
||
|
||
}
|
||
}
|
||
},
|
||
grid: {
|
||
borderColor: '#f1f3fa',
|
||
padding: {
|
||
bottom: 10
|
||
}
|
||
}
|
||
}
|
||
|
||
var chart = new ApexCharts(
|
||
document.querySelector("#products-sales"),
|
||
options
|
||
);
|
||
|
||
chart.render();
|
||
|
||
|
||
|
||
//
|
||
// Marketing Reports
|
||
//
|
||
var colors = ["#727cf5", "#02a8b5", "#fd7e14"];
|
||
var dataColors = $("#marketing-reports").data('colors');
|
||
if (dataColors) {
|
||
colors = dataColors.split(",");
|
||
}
|
||
var options = {
|
||
chart: {
|
||
height: 274,
|
||
type: 'radar',
|
||
toolbar: {
|
||
show: false
|
||
}
|
||
},
|
||
series: [{
|
||
name: 'Series 1',
|
||
data: [80, 50, 30, 40, 100, 20],
|
||
}, {
|
||
name: 'Series 2',
|
||
data: [20, 30, 40, 80, 20, 80],
|
||
}, {
|
||
name: 'Series 3',
|
||
data: [44, 76, 78, 13, 43, 10],
|
||
}],
|
||
stroke: {
|
||
width: 0
|
||
},
|
||
fill: {
|
||
opacity: 0.4
|
||
},
|
||
markers: {
|
||
size: 0
|
||
},
|
||
legend: {
|
||
show: false
|
||
},
|
||
colors: colors,
|
||
labels: ['2011', '2012', '2013', '2014', '2015', '2016']
|
||
}
|
||
|
||
var chart = new ApexCharts(
|
||
document.querySelector("#marketing-reports"),
|
||
options
|
||
);
|
||
|
||
chart.render();
|
||
|
||
|
||
//
|
||
// Projections Vs Actuals Charts
|
||
//
|
||
var colors = ["#39afd1", "#ffbc00", "#313a46", "#fa5c7c"];
|
||
var dataColors = $("#projections-actuals").data('colors');
|
||
if (dataColors) {
|
||
colors = dataColors.split(",");
|
||
}
|
||
var options = {
|
||
chart: {
|
||
height: 312,
|
||
type: 'donut',
|
||
},
|
||
series: [44, 55, 41, 17],
|
||
legend: {
|
||
show: true,
|
||
position: 'bottom',
|
||
horizontalAlign: 'center',
|
||
verticalAlign: 'middle',
|
||
floating: false,
|
||
fontSize: '14px',
|
||
offsetX: 0,
|
||
offsetY: 7
|
||
},
|
||
labels: ["Direct", "Affilliate", "Sponsored", "E-mail"],
|
||
colors: colors,
|
||
responsive: [{
|
||
breakpoint: 600,
|
||
options: {
|
||
chart: {
|
||
height: 240
|
||
},
|
||
legend: {
|
||
show: false
|
||
},
|
||
}
|
||
}]
|
||
}
|
||
|
||
var chart = new ApexCharts(
|
||
document.querySelector("#projections-actuals"),
|
||
options
|
||
);
|
||
|
||
chart.render();
|
||
|
||
// Vector map
|
||
//various examples
|
||
$('#world-map-markers').vectorMap({
|
||
map: 'world_mill_en',
|
||
normalizeFunction: 'polynomial',
|
||
hoverOpacity: 0.7,
|
||
hoverColor: false,
|
||
regionStyle: {
|
||
initial: {
|
||
fill: '#d4dadd'
|
||
}
|
||
},
|
||
markerStyle: {
|
||
initial: {
|
||
r: 9,
|
||
'fill': '#1abc9c',
|
||
'fill-opacity': 0.9,
|
||
'stroke': '#fff',
|
||
'stroke-width': 7,
|
||
'stroke-opacity': 0.4
|
||
},
|
||
|
||
hover: {
|
||
'stroke': '#fff',
|
||
'fill-opacity': 1,
|
||
'stroke-width': 1.5
|
||
}
|
||
},
|
||
backgroundColor: 'transparent',
|
||
markers: [{
|
||
latLng: [41.90, 12.45],
|
||
name: 'Vatican City'
|
||
}, {
|
||
latLng: [43.73, 7.41],
|
||
name: 'Monaco'
|
||
}, {
|
||
latLng: [-0.52, 166.93],
|
||
name: 'Nauru'
|
||
}, {
|
||
latLng: [-8.51, 179.21],
|
||
name: 'Tuvalu'
|
||
}, {
|
||
latLng: [43.93, 12.46],
|
||
name: 'San Marino'
|
||
}, {
|
||
latLng: [47.14, 9.52],
|
||
name: 'Liechtenstein'
|
||
}, {
|
||
latLng: [7.11, 171.06],
|
||
name: 'Marshall Islands'
|
||
}, {
|
||
latLng: [17.3, -62.73],
|
||
name: 'Saint Kitts and Nevis'
|
||
}, {
|
||
latLng: [3.2, 73.22],
|
||
name: 'Maldives'
|
||
}, {
|
||
latLng: [35.88, 14.5],
|
||
name: 'Malta'
|
||
}, {
|
||
latLng: [12.05, -61.75],
|
||
name: 'Grenada'
|
||
}, {
|
||
latLng: [13.16, -61.23],
|
||
name: 'Saint Vincent and the Grenadines'
|
||
}, {
|
||
latLng: [13.16, -59.55],
|
||
name: 'Barbados'
|
||
}, {
|
||
latLng: [17.11, -61.85],
|
||
name: 'Antigua and Barbuda'
|
||
}, {
|
||
latLng: [-4.61, 55.45],
|
||
name: 'Seychelles'
|
||
}, {
|
||
latLng: [7.35, 134.46],
|
||
name: 'Palau'
|
||
}, {
|
||
latLng: [42.5, 1.51],
|
||
name: 'Andorra'
|
||
}, {
|
||
latLng: [14.01, -60.98],
|
||
name: 'Saint Lucia'
|
||
}, {
|
||
latLng: [6.91, 158.18],
|
||
name: 'Federated States of Micronesia'
|
||
}, {
|
||
latLng: [1.3, 103.8],
|
||
name: 'Singapore'
|
||
}, {
|
||
latLng: [0.33, 6.73],
|
||
name: 'São Tomé and PrÃncipe'
|
||
}]
|
||
}); |