415 lines
9.7 KiB
JavaScript
415 lines
9.7 KiB
JavaScript
// greeting
|
|
var today = new Date()
|
|
var curHr = today.getHours()
|
|
|
|
if (curHr >= 0 && curHr < 4) {
|
|
document.getElementById("greeting").innerHTML = 'Good Night';
|
|
} else if (curHr >= 4 && curHr < 12) {
|
|
document.getElementById("greeting").innerHTML = 'Good Morning';
|
|
} else if (curHr >= 12 && curHr < 16) {
|
|
document.getElementById("greeting").innerHTML = 'Good Afternoon';
|
|
} else {
|
|
document.getElementById("greeting").innerHTML = 'Good Evening';
|
|
}
|
|
|
|
|
|
// currently sale
|
|
var options = {
|
|
series: [{
|
|
name: 'Online',
|
|
data: [6, 20, 15, 40, 18, 20, 18, 23, 18, 35, 30, 55, 0]
|
|
}, {
|
|
name: 'Store',
|
|
data: [2, 22, 35, 32, 40, 25, 50, 38, 42, 28, 20, 45, 0]
|
|
}],
|
|
chart: {
|
|
height: 254,
|
|
type: 'area',
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
},
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
stroke: {
|
|
curve: 'smooth'
|
|
},
|
|
xaxis: {
|
|
type: 'category',
|
|
low: 0,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
show: false,
|
|
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan"],
|
|
labels: {
|
|
low: 0,
|
|
offsetX: 0,
|
|
show: false,
|
|
},
|
|
axisBorder: {
|
|
low: 0,
|
|
offsetX: 0,
|
|
show: false,
|
|
},
|
|
},
|
|
markers: {
|
|
strokeWidth: 3,
|
|
colors: "#ffffff",
|
|
strokeColors: [ CubaAdminConfig.primary , CubaAdminConfig.secondary ],
|
|
hover: {
|
|
size: 6,
|
|
}
|
|
},
|
|
yaxis: {
|
|
low: 0,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
show: false,
|
|
labels: {
|
|
low: 0,
|
|
offsetX: 0,
|
|
show: false,
|
|
},
|
|
axisBorder: {
|
|
low: 0,
|
|
offsetX: 0,
|
|
show: false,
|
|
},
|
|
},
|
|
grid: {
|
|
show: false,
|
|
padding: {
|
|
left: 0,
|
|
right: 0,
|
|
bottom: -15,
|
|
top: -40
|
|
}
|
|
},
|
|
colors: [ CubaAdminConfig.primary , CubaAdminConfig.secondary ],
|
|
fill: {
|
|
type: 'gradient',
|
|
gradient: {
|
|
shadeIntensity: 1,
|
|
opacityFrom: 0.7,
|
|
opacityTo: 0.5,
|
|
stops: [0, 80, 100]
|
|
}
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
tooltip: {
|
|
x: {
|
|
format: 'MM'
|
|
},
|
|
},
|
|
};
|
|
|
|
var chart = new ApexCharts(document.querySelector("#chart-currently"), options);
|
|
chart.render();
|
|
|
|
|
|
//small chart-1
|
|
|
|
new Chartist.Bar('.small-chart', {
|
|
labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7'],
|
|
series: [
|
|
[400, 900, 800, 1000, 700, 1200, 300],
|
|
[1000, 500, 600, 400, 700, 200, 1100]
|
|
]
|
|
}, {
|
|
plugins: [
|
|
Chartist.plugins.tooltip({
|
|
appendToBody: false,
|
|
className: "ct-tooltip"
|
|
})
|
|
],
|
|
stackBars: true,
|
|
axisX: {
|
|
showGrid: false,
|
|
showLabel: false,
|
|
offset: 0
|
|
},
|
|
axisY: {
|
|
low: 0,
|
|
showGrid: false,
|
|
showLabel: false,
|
|
offset: 0,
|
|
labelInterpolationFnc: function (value) {
|
|
return (value / 1000) + 'k';
|
|
}
|
|
}
|
|
}).on('draw', function (data) {
|
|
if (data.type === 'bar') {
|
|
data.element.attr({
|
|
style: 'stroke-width: 3px'
|
|
});
|
|
}
|
|
});
|
|
|
|
//small-2
|
|
|
|
new Chartist.Bar('.small-chart1', {
|
|
labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7'],
|
|
series: [
|
|
[400, 600, 900, 800, 1000, 1200, 500],
|
|
[1000, 800, 500, 600, 400, 200, 900]
|
|
]
|
|
}, {
|
|
plugins: [
|
|
Chartist.plugins.tooltip({
|
|
appendToBody: false,
|
|
className: "ct-tooltip"
|
|
})
|
|
],
|
|
stackBars: true,
|
|
axisX: {
|
|
showGrid: false,
|
|
showLabel: false,
|
|
offset: 0
|
|
},
|
|
axisY: {
|
|
low: 0,
|
|
showGrid: false,
|
|
showLabel: false,
|
|
offset: 0,
|
|
labelInterpolationFnc: function (value) {
|
|
return (value / 1000) + 'k';
|
|
}
|
|
}
|
|
}).on('draw', function (data) {
|
|
if (data.type === 'bar') {
|
|
data.element.attr({
|
|
style: 'stroke-width: 3px'
|
|
});
|
|
}
|
|
});
|
|
// small-3
|
|
|
|
new Chartist.Bar('.small-chart2', {
|
|
labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7'],
|
|
series: [
|
|
[1100, 900, 600, 1000, 700, 1200, 300],
|
|
[300, 500, 800, 400, 700, 200, 1100]
|
|
]
|
|
}, {
|
|
plugins: [
|
|
Chartist.plugins.tooltip({
|
|
appendToBody: false,
|
|
className: "ct-tooltip"
|
|
})
|
|
],
|
|
stackBars: true,
|
|
axisX: {
|
|
showGrid: false,
|
|
showLabel: false,
|
|
offset: 0
|
|
},
|
|
axisY: {
|
|
low: 0,
|
|
showGrid: false,
|
|
showLabel: false,
|
|
offset: 0,
|
|
labelInterpolationFnc: function (value) {
|
|
return (value / 1000) + 'k';
|
|
}
|
|
}
|
|
}).on('draw', function (data) {
|
|
if (data.type === 'bar') {
|
|
data.element.attr({
|
|
style: 'stroke-width: 3px'
|
|
});
|
|
}
|
|
});
|
|
// small-4
|
|
new Chartist.Bar('.small-chart3', {
|
|
labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7'],
|
|
series: [
|
|
[400, 600, 800, 1000, 700, 1100, 300],
|
|
[1000, 500, 600, 300, 700, 200, 1100]
|
|
]
|
|
}, {
|
|
plugins: [
|
|
Chartist.plugins.tooltip({
|
|
appendToBody: false,
|
|
className: "ct-tooltip"
|
|
})
|
|
],
|
|
stackBars: true,
|
|
axisX: {
|
|
showGrid: false,
|
|
showLabel: false,
|
|
offset: 0
|
|
},
|
|
axisY: {
|
|
low: 0,
|
|
showGrid: false,
|
|
showLabel: false,
|
|
offset: 0,
|
|
labelInterpolationFnc: function (value) {
|
|
return (value / 1000) + 'k';
|
|
}
|
|
}
|
|
}).on('draw', function (data) {
|
|
if (data.type === 'bar') {
|
|
data.element.attr({
|
|
style: 'stroke-width: 3px'
|
|
});
|
|
}
|
|
});
|
|
|
|
// right-side-small-chart
|
|
|
|
(function ($) {
|
|
"use strict";
|
|
$(".knob1").knob({
|
|
|
|
'width': 65,
|
|
'height': 65,
|
|
'max': 100,
|
|
|
|
change: function (value) {
|
|
//console.log("change : " + value);
|
|
},
|
|
release: function (value) {
|
|
//console.log(this.$.attr('value'));
|
|
console.log("release : " + value);
|
|
},
|
|
cancel: function () {
|
|
console.log("cancel : ", this);
|
|
},
|
|
format: function (value) {
|
|
return value + '%';
|
|
},
|
|
draw: function () {
|
|
|
|
// "tron" case
|
|
if (this.$.data('skin') == 'tron') {
|
|
|
|
this.cursorExt = 1;
|
|
|
|
var a = this.arc(this.cv) // Arc
|
|
, pa // Previous arc
|
|
, r = 1;
|
|
|
|
this.g.lineWidth = this.lineWidth;
|
|
|
|
if (this.o.displayPrevious) {
|
|
pa = this.arc(this.v);
|
|
this.g.beginPath();
|
|
this.g.strokeStyle = this.pColor;
|
|
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
|
|
this.g.stroke();
|
|
}
|
|
|
|
this.g.beginPath();
|
|
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
|
|
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
|
|
this.g.stroke();
|
|
|
|
this.g.lineWidth = 2;
|
|
this.g.beginPath();
|
|
this.g.strokeStyle = this.o.fgColor;
|
|
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
|
|
this.g.stroke();
|
|
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
// Example of infinite knob, iPod click wheel
|
|
var v, up = 0, down = 0, i = 0
|
|
, $idir = $("div.idir")
|
|
, $ival = $("div.ival")
|
|
, incr = function () { i++; $idir.show().html("+").fadeOut(); $ival.html(i); }
|
|
, decr = function () { i--; $idir.show().html("-").fadeOut(); $ival.html(i); };
|
|
$("input.infinite").knob(
|
|
{
|
|
min: 0
|
|
, max: 20
|
|
, stopper: false
|
|
, change: function () {
|
|
if (v > this.cv) {
|
|
if (up) {
|
|
decr();
|
|
up = 0;
|
|
} else { up = 1; down = 0; }
|
|
} else {
|
|
if (v < this.cv) {
|
|
if (down) {
|
|
incr();
|
|
down = 0;
|
|
} else { down = 1; up = 0; }
|
|
}
|
|
}
|
|
v = this.cv;
|
|
}
|
|
});
|
|
})(jQuery);
|
|
|
|
// market value chart
|
|
var options1 = {
|
|
chart: {
|
|
height: 380,
|
|
type: 'radar',
|
|
toolbar: {
|
|
show: false
|
|
},
|
|
},
|
|
series: [{
|
|
name: 'Market value',
|
|
data: [20, 100, 40, 30, 50, 80, 33],
|
|
}],
|
|
stroke: {
|
|
width: 3,
|
|
curve: 'smooth',
|
|
},
|
|
labels: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
|
plotOptions: {
|
|
radar: {
|
|
size: 140,
|
|
polygons: {
|
|
fill: {
|
|
colors: ['#fcf8ff', '#f7eeff']
|
|
},
|
|
|
|
}
|
|
}
|
|
},
|
|
colors: [ CubaAdminConfig.primary ],
|
|
|
|
markers: {
|
|
size: 6,
|
|
colors: ['#fff'],
|
|
strokeColor: CubaAdminConfig.primary,
|
|
strokeWidth: 3,
|
|
},
|
|
tooltip: {
|
|
y: {
|
|
formatter: function(val) {
|
|
return val
|
|
}
|
|
}
|
|
},
|
|
yaxis: {
|
|
tickAmount: 7,
|
|
labels: {
|
|
formatter: function(val, i) {
|
|
if(i % 2 === 0) {
|
|
return val
|
|
} else {
|
|
return ''
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var chart1 = new ApexCharts(
|
|
document.querySelector("#marketchart"),
|
|
options1
|
|
);
|
|
|
|
chart1.render();
|