var randomizeArray = function (arg) {
var array = arg.slice();
var currentIndex = array.length, temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
};
const payloads = {
//
// Dashboard
//
dashboard: function() {
if ($("#dashboard-chart").html().length === 0) {
(function() {
var ts2 = 1484418600000;
var dates = [];
var spikes = [5, -5, 3, -3, 8, -8];
for (var i = 0; i < payloads.dataSeries.length; i++) {
ts2 = ts2 + 86400000;
var innerArr = [
ts2, payloads.dataSeries[i].value
];
dates.push(innerArr);
}
var options = {
chart: {
type: "area",
stacked: false,
height: 400,
fontFamily: "Inter, Arial, sans-serif",
zoom: {
type: "x",
enabled: true,
autoScaleYaxis: true
},
toolbar: {
tools: {
download: true,
selection: true,
zoom: true,
zoomin: true,
zoomout: true,
pan: true,
},
autoSelected: 'zoom'
}
},
dataLabels: {
enabled: false
},
series: [
{
name: "XYZ MOTORS",
data: dates
}
],
markers: {
size: 0
},
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
inverseColors: false,
opacityFrom: 0.5,
opacityTo: 0,
stops: [0, 90, 100]
}
},
yaxis: {
labels: {
formatter: function(val) {
return (val / 1000000).toFixed(0);
}
},
title: {
text: "Price"
}
},
xaxis: {
type: "datetime"
},
tooltip: {
shared: false,
y: {
formatter: function(val) {
return (val / 1000000).toFixed(0);
}
}
}
};
var chart = new ApexCharts(
document.querySelector("#dashboard-chart"),
options
);
chart.render();
})();
var spark1 = {
chart: {
id: 'sparkline1',
group: 'sparklines',
type: 'area',
height: 160,
sparkline: {
enabled: true
},
},
stroke: {
curve: 'straight'
},
fill: {
opacity: 1,
},
series: [{
name: 'Sales',
data: randomizeArray(payloads.sparklineData)
}],
labels: [
...Array(24).keys()].map(n => `2018-09-0${n+1}`),
yaxis: {
min: 0
},
xaxis: {
type: 'datetime',
},
colors: ['#DCE6EC'],
title: {
text: '$424,652',
offsetX: 30,
style: {
fontSize: '24px',
cssClass: 'apexcharts-yaxis-title'
}
},
subtitle: {
text: 'Sales',
offsetX: 30,
style: {
fontSize: '14px',
cssClass: 'apexcharts-yaxis-title'
}
}
};
var spark2 = {
chart: {
id: 'sparkline2',
group: 'sparklines',
type: 'area',
height: 160,
sparkline: {
enabled: true
},
},
stroke: {
curve: 'straight'
},
fill: {
opacity: 1,
},
series: [{
name: 'Expenses',
data: randomizeArray(payloads.sparklineData)
}],
labels: [
...Array(24).keys()].map(n => `2018-09-0${n+1}`),
yaxis: {
min: 0
},
xaxis: {
type: 'datetime',
},
colors: ['#DCE6EC'],
title: {
text: '$235,312',
offsetX: 30,
style: {
fontSize: '24px',
cssClass: 'apexcharts-yaxis-title'
}
},
subtitle: {
text: 'Expenses',
offsetX: 30,
style: {
fontSize: '14px',
cssClass: 'apexcharts-yaxis-title'
}
}
}
var spark3 = {
chart: {
id: 'sparkline3',
group: 'sparklines',
type: 'area',
height: 160,
sparkline: {
enabled: true
},
},
stroke: {
curve: 'straight'
},
fill: {
opacity: 1,
},
series: [{
name: 'Profits',
data: randomizeArray(payloads.sparklineData)
}],
labels: [
...Array(24).keys()].map(n => `2018-09-0${n+1}`),
xaxis: {
type: 'datetime',
},
yaxis: {
min: 0
},
colors: ['#008FFB'],
//colors: ['#5564BE'],
title: {
text: '$135,965',
offsetX: 30,
style: {
fontSize: '24px',
cssClass: 'apexcharts-yaxis-title'
}
},
subtitle: {
text: 'Profits',
offsetX: 30,
style: {
fontSize: '14px',
cssClass: 'apexcharts-yaxis-title'
}
}
}
new ApexCharts(
document.querySelector("#dashboard-spark1"),
spark1
).render();
new ApexCharts(
document.querySelector("#dashboard-spark2"),
spark2
).render();
new ApexCharts(
document.querySelector("#dashboard-spark3"),
spark3
).render();
}
},
//
// Charting Data
//
dataSeries: [
{
date: "2014-01-01",
value: 50000000
},
{
date: "2014-01-02",
value: 60379978
},
{
date: "2014-01-03",
value: 40493749
},
{
date: "2014-01-04",
value: 60785250
},
{
date: "2014-01-05",
value: 67391904
},
{
date: "2014-01-06",
value: 61576838
},
{
date: "2014-01-07",
value: 61413854
},
{
date: "2014-01-08",
value: 82177211
},
{
date: "2014-01-09",
value: 103762210
},
{
date: "2014-01-10",
value: 84381072
},
{
date: "2014-01-11",
value: 54352310
},
{
date: "2014-01-12",
value: 65531790
},
{
date: "2014-01-13",
value: 75748881
},
{
date: "2014-01-14",
value: 47064037
},
{
date: "2014-01-15",
value: 67520685
},
{
date: "2014-01-16",
value: 60176418
},
{
date: "2014-01-17",
value: 66122924
},
{
date: "2014-01-18",
value: 57337480
},
{
date: "2014-01-19",
value: 100258882
},
{
date: "2014-01-20",
value: 46829538
},
{
date: "2014-01-21",
value: 92456897
},
{
date: "2014-01-22",
value: 94299711
},
{
date: "2014-01-23",
value: 62759017
},
{
date: "2014-01-24",
value: 103596183
},
{
date: "2014-01-25",
value: 108107346
},
{
date: "2014-01-26",
value: 66359852
},
{
date: "2014-01-27",
value: 62570783
},
{
date: "2014-01-28",
value: 77967768
},
{
date: "2014-01-29",
value: 60632803
},
{
date: "2014-01-30",
value: 103725316
},
{
date: "2014-01-31",
value: 98226177
},
],
sparklineData: [
47, 45, 54, 38, 56, 24, 65, 31, 37, 39, 62, 51, 35, 41, 35, 27, 93, 53, 61, 27, 54, 43, 19, 46
],
};
$(function() {
// Map our pages
$(".app-sidebar > ul.app-sidebar-menu > li > a")
.click(function(event) {
event.preventDefault();
// Off
$(".app-sidebar > ul.app-sidebar-menu > li > a")
.parent()
.removeClass("active");
$(".section").removeClass("active");
let name = $(this)
.attr("href")
.substr(1);
let section = $(".section[data-page-name=" +
name + "]")[0];
// On
$(this)
.parent()
.addClass("active");
if (!section) {
$(".section[data-page-name=not_found]")
.addClass("active");
} else {
$(section).addClass("active");
payloads[name]();
}
});
$('a[href="#dashboard"]').click();
});