start copy from cimac web
This commit is contained in:
@@ -0,0 +1,321 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Analytics Dashboard Js
|
||||
*/
|
||||
|
||||
|
||||
|
||||
var options = {
|
||||
chart: {
|
||||
height: 350,
|
||||
type: 'line',
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: false,
|
||||
autoSelected: 'zoom'
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 12,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
blur: 2,
|
||||
color: '#45404a2e',
|
||||
opacity: 0.35
|
||||
},
|
||||
},
|
||||
colors: ['#2a77f4', '#1ccab8', '#f02fc2'],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'straight',
|
||||
width: [4, 4],
|
||||
dashArray: [0, 3]
|
||||
},
|
||||
grid: {
|
||||
borderColor: "#45404a2e",
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
hover: {
|
||||
size: 0
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'New Visits',
|
||||
data: [0,60,20,90,45,110,55,130,44,110,75,200]
|
||||
}, {
|
||||
name: 'Unique Visits',
|
||||
data: [0,45,10,75,35,94,40,115,30,105,65,190]
|
||||
}],
|
||||
|
||||
|
||||
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
categories: ["2019-09-19T00:00:00", "2019-09-19T01:30:00", "2019-09-19T02:30:00", "2019-09-19T03:30:00", "2019-09-19T04:30:00", "2019-09-19T05:30:00", "2019-09-19T06:30:00", "2019-09-19T07:30:00", "2019-09-19T08:30:00", "2019-09-19T09:30:00", "2019-09-19T10:30:00", "2019-09-19T11:30:00"],
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: '#45404a2e',
|
||||
},
|
||||
axisTicks: {
|
||||
show: true,
|
||||
color: '#45404a2e',
|
||||
},
|
||||
},
|
||||
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
gradientToColors: ['#F55555', '#B5AC49', '#6094ea']
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'right'
|
||||
},
|
||||
}
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#liveVisits"),
|
||||
options
|
||||
);
|
||||
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
|
||||
//Device-widget
|
||||
|
||||
|
||||
var options = {
|
||||
chart: {
|
||||
height: 250,
|
||||
type: 'donut',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 10,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
blur: 2,
|
||||
color: '#45404a2e',
|
||||
opacity: 0.15
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '65%'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
|
||||
series: [10, 65, 25,],
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
horizontalAlign: 'center',
|
||||
verticalAlign: 'middle',
|
||||
floating: false,
|
||||
fontSize: '14px',
|
||||
offsetX: 0,
|
||||
offsetY: -13
|
||||
},
|
||||
labels: [ "Tablet", "Desktop", "Mobile"],
|
||||
colors: ["#34bfa3", "#5d78ff", "#fd3c97"],
|
||||
|
||||
responsive: [{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
plotOptions: {
|
||||
donut: {
|
||||
customScale: 0.2
|
||||
}
|
||||
},
|
||||
chart: {
|
||||
height: 240
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
}
|
||||
}],
|
||||
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + " %"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#ana_device"),
|
||||
options
|
||||
);
|
||||
|
||||
chart.render();
|
||||
|
||||
|
||||
var colors = ['#1ecab8', '#fd3c97', '#6d81f5', '#ffb822', '#0dc8de'];
|
||||
var options = {
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'bar',
|
||||
events: {
|
||||
click: function(chart, w, e) {
|
||||
console.log(chart, w, e )
|
||||
}
|
||||
},
|
||||
toolbar:{
|
||||
show:false
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 0,
|
||||
left: 5,
|
||||
bottom: 5,
|
||||
right: 0,
|
||||
blur: 5,
|
||||
color: '#45404a2e',
|
||||
opacity: 0.35
|
||||
},
|
||||
},
|
||||
colors: colors,
|
||||
plotOptions: {
|
||||
bar: {
|
||||
dataLabels: {
|
||||
position: 'top', // top, center, bottom
|
||||
},
|
||||
columnWidth: '30',
|
||||
distributed: true,
|
||||
},
|
||||
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
},
|
||||
offsetY: -20,
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: ["#8997bd"]
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Inflation',
|
||||
data: [ 4.0, 10.1, 6.0, 8.0, 9.1]
|
||||
}],
|
||||
xaxis: {
|
||||
categories: ["Email", "Referral", "Organic", "Direct", "Campaign",],
|
||||
position: 'top',
|
||||
labels: {
|
||||
offsetY: -18,
|
||||
style: {
|
||||
cssClass: 'apexcharts-xaxis-label',
|
||||
},
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
crosshairs: {
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
colorFrom: '#D8E3F0',
|
||||
colorTo: '#BED1E6',
|
||||
stops: [0, 100],
|
||||
opacityFrom: 0.4,
|
||||
opacityTo: 0.5,
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true,
|
||||
offsetY: -37,
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
gradient: {
|
||||
type: "gradient",
|
||||
gradientToColors: ['#FEB019', '#775DD0', '#FEB019', '#FF4560', '#775DD0'],
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#barchart"),
|
||||
options
|
||||
);
|
||||
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
$('#usa').vectorMap({
|
||||
map: 'us_aea_en',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#818181',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#7474b126',
|
||||
}
|
||||
},
|
||||
series: {
|
||||
regions: [{
|
||||
values: {
|
||||
"US-VA": '#868ff363',
|
||||
"US-PA": '#868ff363',
|
||||
"US-TN": '#868ff363',
|
||||
"US-WY": '#868ff363',
|
||||
"US-WA": '#868ff363',
|
||||
"US-TX": '#868ff363',
|
||||
},
|
||||
attribute: 'fill',
|
||||
}]
|
||||
},
|
||||
});
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Animate Js
|
||||
*/
|
||||
|
||||
function testAnim(x) {
|
||||
$('#animationSandbox').removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
|
||||
$(this).removeClass();
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
$('.js--triggerAnimation').click(function(e){
|
||||
e.preventDefault();
|
||||
var anim = $('.js--animations').val();
|
||||
testAnim(anim);
|
||||
});
|
||||
|
||||
$('.js--animations').change(function(){
|
||||
var anim = $(this).val();
|
||||
testAnim(anim);
|
||||
});
|
||||
});
|
||||
|
||||
$('.btn-animation').on('click', function(br) {
|
||||
//adding animation
|
||||
$('.animationSandbox').attr('class', 'animationSandbox ' + $(this).data("animation") + ' animated');
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,90 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Component: Full-Calendar
|
||||
*/
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var calendarEl = document.getElementById('calendar');
|
||||
|
||||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
||||
},
|
||||
defaultDate: '2019-08-12',
|
||||
navLinks: true, // can click day/week names to navigate views
|
||||
selectable: true,
|
||||
selectMirror: true,
|
||||
select: function(arg) {
|
||||
var title = prompt('Event Title:');
|
||||
if (title) {
|
||||
calendar.addEvent({
|
||||
title: title,
|
||||
start: arg.start,
|
||||
end: arg.end,
|
||||
allDay: arg.allDay
|
||||
})
|
||||
}
|
||||
calendar.unselect()
|
||||
},
|
||||
editable: true,
|
||||
eventLimit: true, // allow "more" link when too many events
|
||||
events: [
|
||||
{
|
||||
title: 'Business Lunch',
|
||||
start: '2019-08-03T13:00:00',
|
||||
constraint: 'businessHours',
|
||||
className: 'bg-soft-warning',
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: '2019-08-13T11:00:00',
|
||||
constraint: 'availableForMeeting', // defined below
|
||||
className: 'bg-soft-purple',
|
||||
textColor: 'white'
|
||||
},
|
||||
{
|
||||
title: 'Conference',
|
||||
start: '2019-08-27',
|
||||
end: '2019-08-29',
|
||||
className: 'bg-soft-primary',
|
||||
},
|
||||
|
||||
|
||||
// areas where "Meeting" must be dropped
|
||||
{
|
||||
groupId: 'availableForMeeting',
|
||||
start: '2019-08-11T10:00:00',
|
||||
end: '2019-08-11T16:00:00',
|
||||
title: 'Repeating Event',
|
||||
className: 'bg-soft-purple',
|
||||
},
|
||||
{
|
||||
groupId: 'availableForMeeting',
|
||||
start: '2019-08-15T10:00:00',
|
||||
end: '2019-08-15T16:00:00',
|
||||
title: 'holiday',
|
||||
className: 'bg-soft-success',
|
||||
},
|
||||
|
||||
// red areas where no events can be dropped
|
||||
|
||||
{
|
||||
start: '2019-08-06',
|
||||
end: '2019-08-08',
|
||||
overlap: false,
|
||||
title: 'New Event',
|
||||
className: 'bg-soft-pink',
|
||||
}
|
||||
],
|
||||
eventClick: function(arg) {
|
||||
if (confirm('delete event?')) {
|
||||
arg.event.remove()
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
});
|
||||
@@ -0,0 +1,363 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Chart Js
|
||||
*/
|
||||
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var ChartJs = function() {};
|
||||
|
||||
ChartJs.prototype.respChart = function(selector,type,data, options) {
|
||||
// get selector by context
|
||||
var ctx = selector.get(0).getContext("2d");
|
||||
// pointing parent container to make chart js inherit its width
|
||||
var container = $(selector).parent();
|
||||
|
||||
// enable resizing matter
|
||||
$(window).resize( generateChart );
|
||||
|
||||
// this function produce the responsive Chart JS
|
||||
function generateChart(){
|
||||
// make chart width fit with its container
|
||||
var ww = selector.attr('width', $(container).width() );
|
||||
switch(type){
|
||||
case 'Line':
|
||||
new Chart(ctx, {type: 'line', data: data, options: options});
|
||||
break;
|
||||
case 'Doughnut':
|
||||
new Chart(ctx, {type: 'doughnut', data: data, options: options});
|
||||
break;
|
||||
case 'Pie':
|
||||
new Chart(ctx, {type: 'pie', data: data, options: options});
|
||||
break;
|
||||
case 'Bar':
|
||||
new Chart(ctx, {type: 'bar', data: data, options: options});
|
||||
break;
|
||||
case 'Radar':
|
||||
new Chart(ctx, {type: 'radar', data: data, options: options});
|
||||
break;
|
||||
case 'PolarArea':
|
||||
new Chart(ctx, {data: data, type: 'polarArea', options: options});
|
||||
break;
|
||||
}
|
||||
// Initiate new chart or Redraw
|
||||
|
||||
};
|
||||
// run function - render chart at first load
|
||||
generateChart();
|
||||
},
|
||||
|
||||
//init
|
||||
ChartJs.prototype.init = function() {
|
||||
//creating lineChart
|
||||
var lineChart = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
|
||||
datasets: [{
|
||||
label: "Conversion Rate",
|
||||
fill: false,
|
||||
backgroundColor: '#4d79f6',
|
||||
borderColor: '#4d79f6',
|
||||
data: [-90,-50,-70,20,-35,20,10,50,30,80]
|
||||
}, {
|
||||
label: "Average Sale Value",
|
||||
fill: false,
|
||||
backgroundColor: '#4ac7ec',
|
||||
borderColor: "#4ac7ec",
|
||||
borderDash: [5, 5],
|
||||
data: [10,-50,30,-80,50,-30,30,-80,10,-10]
|
||||
}]
|
||||
};
|
||||
|
||||
var lineOpts = {
|
||||
responsive: true,
|
||||
// title:{
|
||||
// display:true,
|
||||
// text:'Chart.js Line Chart'
|
||||
// },
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
hover: {
|
||||
mode: 'nearest',
|
||||
intersect: true
|
||||
},
|
||||
legend : {
|
||||
labels : {
|
||||
fontColor : '#8997bd'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: true,
|
||||
// scaleLabel: {
|
||||
// display: true,
|
||||
// labelString: 'Month'
|
||||
// },
|
||||
gridLines: {
|
||||
color: 'rgba(137, 151, 189, 0.15)',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: '#8997bd'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: 'rgba(137, 151, 189, 0.15)',
|
||||
},
|
||||
ticks: {
|
||||
max: 100,
|
||||
min: -100,
|
||||
stepSize: 20,
|
||||
fontColor: '#8997bd'
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
this.respChart($("#lineChart"),'Line',lineChart, lineOpts);
|
||||
|
||||
//donut chart
|
||||
var donutChart = {
|
||||
labels: [
|
||||
"Bitcoin",
|
||||
"Ethereum",
|
||||
"Litecoin",
|
||||
"Dashcoin",
|
||||
],
|
||||
|
||||
datasets: [
|
||||
{
|
||||
data: [80, 50, 100,121],
|
||||
backgroundColor: [
|
||||
"#f7931a",
|
||||
"#4d79f6",
|
||||
"#e0e7fd",
|
||||
"#1c75bc",
|
||||
],
|
||||
borderColor: "transparent",
|
||||
innerRadius: "55%",
|
||||
hoverBackgroundColor: [
|
||||
"#f7931a",
|
||||
"#4d79f6",
|
||||
"#e0e7fd",
|
||||
"#1c75bc",
|
||||
],
|
||||
hoverBorderColor: "transparent",
|
||||
|
||||
}],
|
||||
|
||||
};
|
||||
|
||||
var donutOpts = {
|
||||
responsive: true,
|
||||
cutoutPercentage: 80,
|
||||
legend : {
|
||||
labels : {
|
||||
fontColor : '#8997bd'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
this.respChart($("#doughnut"),'Doughnut',donutChart, donutOpts);
|
||||
|
||||
|
||||
//Pie chart
|
||||
var pieChart = {
|
||||
labels: [
|
||||
"Desktops",
|
||||
"Tablets",
|
||||
"Mobiles",
|
||||
"Mobiles",
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [80, 50, 100,121],
|
||||
backgroundColor: [
|
||||
"#4d79f6",
|
||||
"#ff5da0",
|
||||
"#e0e7fd",
|
||||
"#4ac7ec",
|
||||
],
|
||||
borderColor: "transparent",
|
||||
hoverBackgroundColor: [
|
||||
"#4d79f6",
|
||||
"#ff5da0",
|
||||
"#e0e7fd",
|
||||
"#4ac7ec",
|
||||
],
|
||||
hoverBorderColor: "#ffffff"
|
||||
}]
|
||||
};
|
||||
var pieChartOpts = {
|
||||
legend : {
|
||||
labels : {
|
||||
fontColor : '#8997bd'
|
||||
}
|
||||
}
|
||||
};
|
||||
this.respChart($("#pie"),'Pie',pieChart, pieChartOpts);
|
||||
|
||||
|
||||
//barchart
|
||||
var barChart = {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Sales Analytics",
|
||||
backgroundColor: "rgba(74, 199, 236, 0.4)",
|
||||
borderColor: "#4ac7ec",
|
||||
borderWidth: 2,
|
||||
barPercentage: 0.3,
|
||||
categoryPercentage: 0.5,
|
||||
hoverBackgroundColor: "rgba(74, 199, 236, 0.7)",
|
||||
hoverBorderColor: "#4ac7ec",
|
||||
data: [65, 59, 80, 81, 56, 55, 40,20]
|
||||
}
|
||||
]
|
||||
};
|
||||
var barOpts = {
|
||||
responsive: true,
|
||||
legend : {
|
||||
labels : {
|
||||
fontColor : '#8997bd'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
barPercentage: 0.8,
|
||||
categoryPercentage: 0.4,
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: 'rgba(137, 151, 189, 0.15)',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: '#8997bd'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: 'rgba(137, 151, 189, 0.15)',
|
||||
},
|
||||
ticks: {
|
||||
fontColor: '#8997bd'
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
};
|
||||
this.respChart($("#bar"),'Bar',barChart, barOpts);
|
||||
|
||||
|
||||
//radar chart
|
||||
var radarChart = {
|
||||
labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Desktops",
|
||||
backgroundColor: "rgba(77,121,246,0.3)",
|
||||
borderColor: "#4d79f6",
|
||||
pointBackgroundColor: "#4ac7ec",
|
||||
pointBorderColor: "#fff",
|
||||
pointHoverBackgroundColor: "#fff",
|
||||
pointHoverBorderColor: "rgba(179,181,198,1)",
|
||||
data: [65, 59, 90, 81, 56, 55, 40]
|
||||
},
|
||||
{
|
||||
label: "Tablets",
|
||||
backgroundColor: "rgba(74,199,236,0.2)",
|
||||
borderColor: "#4ac7ec",
|
||||
pointBackgroundColor: "#4d79f6",
|
||||
pointBorderColor: "#fff",
|
||||
pointHoverBackgroundColor: "#fff",
|
||||
pointHoverBorderColor: "rgba(255,99,132,1)",
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
};
|
||||
var radarOpts = {
|
||||
legend : {
|
||||
labels : {
|
||||
fontColor : '#8997bd'
|
||||
}
|
||||
},
|
||||
scale: {
|
||||
gridLines: {
|
||||
color: 'rgba(137, 151, 189, 0.15)',
|
||||
},
|
||||
angleLines: {
|
||||
color: 'rgba(137, 151, 189, 0.15)', // lines radiating from the center
|
||||
},
|
||||
pointLabels:{
|
||||
fontColor:"#8997bd",
|
||||
},
|
||||
ticks: {
|
||||
backdropColor: '#e0e7fd',
|
||||
fontColor: '#8997bd',
|
||||
beginAtZero: true,
|
||||
fontSize: 10,
|
||||
}
|
||||
},
|
||||
};
|
||||
this.respChart($("#radar"),'Radar',radarChart, radarOpts);
|
||||
|
||||
//Polar area chart
|
||||
var polarChart = {
|
||||
datasets: [{
|
||||
data: [
|
||||
11,
|
||||
16,
|
||||
7,
|
||||
18
|
||||
],
|
||||
backgroundColor: [
|
||||
"#4d79f6",
|
||||
"#ff5da0",
|
||||
"#e0e7fd",
|
||||
"#4ac7ec",
|
||||
],
|
||||
borderColor: "transparent",
|
||||
label: 'My dataset', // for legend
|
||||
hoverBorderColor: "#ffffff"
|
||||
}],
|
||||
labels: [
|
||||
"Series 1",
|
||||
"Series 2",
|
||||
"Series 3",
|
||||
"Series 4"
|
||||
]
|
||||
};
|
||||
var polarAreaOpts = {
|
||||
legend : {
|
||||
labels : {
|
||||
fontColor : '#8997bd'
|
||||
}
|
||||
},
|
||||
scale: {
|
||||
gridLines: {
|
||||
color: 'rgba(137, 151, 189, 0.15)',
|
||||
},
|
||||
angleLines: {
|
||||
color: 'rgba(137, 151, 189, 0.15)', // lines radiating from the center
|
||||
}
|
||||
}
|
||||
};
|
||||
this.respChart($("#polarArea"),'PolarArea',polarChart, polarAreaOpts);
|
||||
},
|
||||
$.ChartJs = new ChartJs, $.ChartJs.Constructor = ChartJs
|
||||
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function($) {
|
||||
"use strict";
|
||||
$.ChartJs.init()
|
||||
}(window.jQuery);
|
||||
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Clipboard Js
|
||||
*/
|
||||
|
||||
|
||||
var clipboard = new ClipboardJS('.btn');
|
||||
|
||||
clipboard.on('success', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
|
||||
clipboard.on('error', function(e) {
|
||||
console.log(e);
|
||||
});
|
||||
@@ -0,0 +1,203 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* CRM Dashboard Js
|
||||
*/
|
||||
|
||||
|
||||
// Performance Report
|
||||
|
||||
|
||||
$.plot('#CrmDashChart', [{
|
||||
data: flotDataType1,
|
||||
color: '#1ecab8',
|
||||
curvedLines: { apply: true }
|
||||
},
|
||||
{
|
||||
data: flotDataType2,
|
||||
color: '#2c77f4',
|
||||
curvedLines: { apply: true }
|
||||
}],
|
||||
{
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 2,
|
||||
fill: true,
|
||||
fillColor: { colors: [{ opacity: 0.0 }, { opacity: 0.3}] },
|
||||
},
|
||||
gradient: {
|
||||
radial: true,
|
||||
hoverable: true,
|
||||
colors: [{opacity: 0.5}, {opacity: 1.0}]},
|
||||
shadowSize: 4,
|
||||
},
|
||||
grid: {
|
||||
hoverable: false,
|
||||
clickable: false,
|
||||
borderWidth: 0,
|
||||
labelMargin: 0,
|
||||
color: 'rgba(118, 126, 154, 0.4)',
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
max: 130,
|
||||
min: 0,
|
||||
},
|
||||
xaxis: {
|
||||
show: true,
|
||||
color: 'rgba(118, 126, 154, .1)',
|
||||
ticks: [[0,''],[10,'Jan'],[22,'Feb'],[34,'Mar'],[46,'Apr'],[58,'May'],[70,'Jun'],[82,'Jul'],[94,'Aug'],[106,'Sep'],[118,'Oct'],[130,'Nov'],[142,'Dec']],
|
||||
}
|
||||
});
|
||||
|
||||
var options = {
|
||||
chart: {
|
||||
type: 'radialBar',
|
||||
height: 330,
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 5,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
blur: 5,
|
||||
color: '#45404a2e',
|
||||
opacity: 0.35
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
offsetY: -10,
|
||||
startAngle: 0,
|
||||
endAngle: 270,
|
||||
hollow: {
|
||||
margin: 5,
|
||||
size: '50%',
|
||||
background: 'transparent',
|
||||
|
||||
},
|
||||
track: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '18px',
|
||||
},
|
||||
value: {
|
||||
fontSize: '16px',
|
||||
color: '#50649c',
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: ['#4d79f6', '#4ac7ec', '#f3c74d'],
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
series: [71, 63, 100],
|
||||
labels: ['Sent', 'Opened', 'Not Opened'],
|
||||
legend: {
|
||||
show: true,
|
||||
floating: true,
|
||||
position: 'left',
|
||||
offsetX: -10,
|
||||
offsetY: 0,
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
legend: {
|
||||
show: true,
|
||||
floating: true,
|
||||
position: 'left',
|
||||
offsetX: 10,
|
||||
offsetY: 0,
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#d2_performance"),
|
||||
options
|
||||
);
|
||||
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
//Dash-Map
|
||||
|
||||
$('#world-map-markers').vectorMap({
|
||||
map : 'world_mill_en',
|
||||
scaleColors : ['#eff0f1', '#eff0f1'],
|
||||
normalizeFunction : 'polynomial',
|
||||
hoverOpacity : 0.7,
|
||||
hoverColor : false,
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#7474b126'
|
||||
}
|
||||
},
|
||||
markers : [
|
||||
{latLng : [55.75, 37.62],name : 'Russia'},
|
||||
{latLng : [-25.27, 133.77],name : 'Australia'},
|
||||
{latLng : [20.59, 78.96], name : 'India'},
|
||||
{latLng : [39.52, -87.12],name : 'Brazil'}
|
||||
],
|
||||
series: {
|
||||
regions: [{
|
||||
values: {
|
||||
"US": '#868ff363',
|
||||
"AU": '#868ff363',
|
||||
"BR": '#868ff363',
|
||||
"RU": '#868ff363',
|
||||
},
|
||||
attribute: 'fill'
|
||||
}]
|
||||
},
|
||||
markerStyle: {
|
||||
initial: {
|
||||
stroke: "#7474b126"
|
||||
},
|
||||
hover: {
|
||||
stroke: "rgba(112, 112, 112, 0.30)"
|
||||
}
|
||||
},
|
||||
backgroundColor : 'transparent',
|
||||
|
||||
markers: [
|
||||
{
|
||||
latLng: [37.090240, -95.712891],
|
||||
name: "USA",
|
||||
style: {
|
||||
fill: "#f93b7a"
|
||||
}
|
||||
},
|
||||
{
|
||||
latLng: [55.754093, 37.620407],
|
||||
name: "Russia",
|
||||
style: {
|
||||
fill: "#0aafff"
|
||||
}
|
||||
},
|
||||
{
|
||||
latLng: [-21.943369, 123.102198],
|
||||
name: "Australia",
|
||||
style: {
|
||||
fill: "#7551e9"
|
||||
}
|
||||
},
|
||||
{
|
||||
latLng: [-11.409874, -41.280857],
|
||||
name: "Brazil",
|
||||
style: {
|
||||
fill: "#ffc212"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
});
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Datatables Js
|
||||
*/
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#datatable').DataTable();
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#datatable2').DataTable();
|
||||
} );
|
||||
|
||||
//Buttons examples
|
||||
var table = $('#datatable-buttons').DataTable({
|
||||
lengthChange: false,
|
||||
buttons: ['copy', 'excel', 'pdf', 'colvis']
|
||||
});
|
||||
|
||||
table.buttons().container()
|
||||
.appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');
|
||||
|
||||
$('#row_callback').DataTable( {
|
||||
"createdRow": function ( row, data, index ) {
|
||||
if ( data[5].replace(/[\$,]/g, '') * 1 > 150000 ) {
|
||||
$('td', row).eq(5).addClass('highlight');
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
} );
|
||||
|
||||
/* Formatting function for row details - modify as you need */
|
||||
function format ( d ) {
|
||||
// `d` is the original data object for the row
|
||||
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
|
||||
'<tr>'+
|
||||
'<td>Full name:</td>'+
|
||||
'<td>'+d.name+'</td>'+
|
||||
'</tr>'+
|
||||
'<tr>'+
|
||||
'<td>Extension number:</td>'+
|
||||
'<td>'+d.extn+'</td>'+
|
||||
'</tr>'+
|
||||
'<tr>'+
|
||||
'<td>Extra info:</td>'+
|
||||
'<td>And any further details here (images etc)...</td>'+
|
||||
'</tr>'+
|
||||
'</table>';
|
||||
}
|
||||
|
||||
$(document).ready(function() {
|
||||
var table = $('#child_rows').DataTable( {
|
||||
// "ajax": "../../plugins/datatables/objects.txt",
|
||||
"data": testdata.data,
|
||||
select:"single",
|
||||
"columns": [
|
||||
{
|
||||
"className": 'details-control',
|
||||
"orderable": false,
|
||||
"data": null,
|
||||
"defaultContent": ''
|
||||
},
|
||||
{ "data": "name" },
|
||||
{ "data": "position" },
|
||||
{ "data": "office" },
|
||||
{ "data": "salary" }
|
||||
],
|
||||
"order": [[1, 'asc']]
|
||||
} );
|
||||
|
||||
// Add event listener for opening and closing details
|
||||
$('#child_rows tbody').on('click', 'td.details-control', function () {
|
||||
var tr = $(this).closest('tr');
|
||||
var row = table.row( tr );
|
||||
|
||||
if ( row.child.isShown() ) {
|
||||
// This row is already open - close it
|
||||
row.child.hide();
|
||||
tr.removeClass('shown');
|
||||
}
|
||||
else {
|
||||
// Open this row
|
||||
row.child( format(row.data()) ).show();
|
||||
tr.addClass('shown');
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
var testdata = {
|
||||
"data": [
|
||||
{
|
||||
"name": "Tiger Nixon",
|
||||
"position": "System Architect",
|
||||
"salary": "$320,800",
|
||||
"start_date": "2011/04/25",
|
||||
"office": "Edinburgh",
|
||||
"extn": "5421"
|
||||
},
|
||||
{
|
||||
"name": "Garrett Winters",
|
||||
"position": "Accountant",
|
||||
"salary": "$170,750",
|
||||
"start_date": "2011/07/25",
|
||||
"office": "Tokyo",
|
||||
"extn": "8422"
|
||||
},
|
||||
{
|
||||
"name": "Ashton Cox",
|
||||
"position": "Junior Technical Author",
|
||||
"salary": "$86,000",
|
||||
"start_date": "2009/01/12",
|
||||
"office": "San Francisco",
|
||||
"extn": "1562"
|
||||
},]}
|
||||
@@ -0,0 +1,16 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Dragula Js
|
||||
*/
|
||||
|
||||
|
||||
var iconTochange;
|
||||
dragula([document.getElementById("dragula-left"),
|
||||
document.getElementById("dragula-right")]);
|
||||
dragula([
|
||||
document.getElementById("project-list-left"),
|
||||
document.getElementById("project-list-center-left"),
|
||||
document.getElementById("project-list-center-right"),
|
||||
document.getElementById("project-list-right")
|
||||
]);
|
||||
@@ -0,0 +1,533 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Flot Js
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
$(function() {
|
||||
|
||||
var d1 = [];
|
||||
for (var i = 0; i <= 10; i += 1) {
|
||||
d1.push([i, parseInt(Math.random() * 30)]);
|
||||
}
|
||||
|
||||
var d2 = [];
|
||||
for (var i = 0; i <= 10; i += 1) {
|
||||
d2.push([i, parseInt(Math.random() * 30)]);
|
||||
}
|
||||
|
||||
var stack = 0,
|
||||
lines = true;
|
||||
|
||||
function plotWithOptions() {
|
||||
$.plot("#website-stats", [ d1, d2 ], {
|
||||
series: {
|
||||
stack: stack,
|
||||
lines: {
|
||||
show: lines,
|
||||
fill: true,
|
||||
fillColor: {
|
||||
colors: [{
|
||||
opacity: 0.2
|
||||
}, {
|
||||
opacity: 0.2
|
||||
}]
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
colors: ['#1ecab8', '#2c77f4'],
|
||||
grid: {
|
||||
hoverable: false,
|
||||
clickable: false,
|
||||
borderWidth: 0,
|
||||
labelMargin: 0,
|
||||
color: 'rgba(118, 126, 154, 0.6)',
|
||||
},
|
||||
xaxis: {
|
||||
axisLabelUseCanvas: true,
|
||||
borderColor: 'rgba(118, 126, 154, 0.6)',
|
||||
axisLabelPadding: 10,
|
||||
},
|
||||
|
||||
yaxis: {
|
||||
color: 'rgba(118, 126, 154, 0.6)',
|
||||
axisLabelUseCanvas: true,
|
||||
borderColor: 'rgba(118, 126, 154, 0.6)',
|
||||
axisLabelPadding: 3,
|
||||
autoScale:"exact",
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
plotWithOptions();
|
||||
|
||||
|
||||
// We use an inline data source in the example, usually data would
|
||||
// be fetched from a server
|
||||
|
||||
var data = [],
|
||||
totalPoints = 300;
|
||||
|
||||
function getRandomData() {
|
||||
|
||||
if (data.length > 0)
|
||||
data = data.slice(1);
|
||||
|
||||
// Do a random walk
|
||||
|
||||
while (data.length < totalPoints) {
|
||||
|
||||
var prev = data.length > 0 ? data[data.length - 1] : 50,
|
||||
y = prev + Math.random() * 10 - 5;
|
||||
|
||||
if (y < 0) {
|
||||
y = 0;
|
||||
} else if (y > 100) {
|
||||
y = 100;
|
||||
}
|
||||
|
||||
data.push(y);
|
||||
}
|
||||
|
||||
// Zip the generated y values with the x values
|
||||
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; ++i) {
|
||||
res.push([i, data[i]])
|
||||
}
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
// Set up the control widget
|
||||
|
||||
var updateInterval = 30;
|
||||
$("#updateInterval").val(updateInterval).change(function () {
|
||||
var v = $(this).val();
|
||||
if (v && !isNaN(+v)) {
|
||||
updateInterval = +v;
|
||||
if (updateInterval < 1) {
|
||||
updateInterval = 1;
|
||||
} else if (updateInterval > 2000) {
|
||||
updateInterval = 2000;
|
||||
}
|
||||
$(this).val("" + updateInterval);
|
||||
}
|
||||
});
|
||||
|
||||
var plot = $.plot("#flotRealTime", [ getRandomData() ], {
|
||||
series: {
|
||||
shadowSize: 0 // Drawing is faster without shadows
|
||||
},
|
||||
colors: ['#1ecab8'],
|
||||
grid: {
|
||||
hoverable: false,
|
||||
clickable: false,
|
||||
borderWidth: 0,
|
||||
labelMargin: 0,
|
||||
color: 'rgba(118, 126, 154, 0.6)',
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
xaxis: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
|
||||
function update() {
|
||||
|
||||
plot.setData([getRandomData()]);
|
||||
|
||||
// Since the axes don't change, we don't need to call plot.setupGrid()
|
||||
|
||||
plot.draw();
|
||||
setTimeout(update, updateInterval);
|
||||
}
|
||||
|
||||
update();
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
$(function() {
|
||||
|
||||
// Example Data
|
||||
|
||||
//var data = [
|
||||
// { label: "Series1", data: 10},
|
||||
// { label: "Series2", data: 30},
|
||||
// { label: "Series3", data: 90},
|
||||
// { label: "Series4", data: 70},
|
||||
// { label: "Series5", data: 80},
|
||||
// { label: "Series6", data: 110}
|
||||
//];
|
||||
|
||||
//var data = [
|
||||
// { label: "Series1", data: [[1,10]]},
|
||||
// { label: "Series2", data: [[1,30]]},
|
||||
// { label: "Series3", data: [[1,90]]},
|
||||
// { label: "Series4", data: [[1,70]]},
|
||||
// { label: "Series5", data: [[1,80]]},
|
||||
// { label: "Series6", data: [[1,0]]}
|
||||
//];
|
||||
|
||||
//var data = [
|
||||
// { label: "Series A", data: 0.2063},
|
||||
// { label: "Series B", data: 38888}
|
||||
//];
|
||||
|
||||
// Randomly Generated Data
|
||||
|
||||
var data = [],
|
||||
series = Math.floor(Math.random() * 6) + 3;
|
||||
|
||||
for (var i = 0; i < series; i++) {
|
||||
data[i] = {
|
||||
label: "Series" + (i + 1),
|
||||
data: Math.floor(Math.random() * 100) + 1
|
||||
}
|
||||
}
|
||||
|
||||
var placeholder = $("#placeholder");
|
||||
|
||||
$("#example-1").click(function() {
|
||||
|
||||
placeholder.unbind();
|
||||
|
||||
$("#title").text("Default pie chart");
|
||||
$("#description").text("The default pie chart with no options set.");
|
||||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#example-2").click(function() {
|
||||
|
||||
placeholder.unbind();
|
||||
|
||||
$("#title").text("Default without legend");
|
||||
$("#description").text("The default pie chart when the legend is disabled. Since the labels would normally be outside the container, the chart is resized to fit.");
|
||||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#example-3").click(function() {
|
||||
|
||||
placeholder.unbind();
|
||||
|
||||
$("#title").text("Custom Label Formatter");
|
||||
$("#description").text("Added a semi-transparent background to the labels and a custom labelFormatter function.");
|
||||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
formatter: labelFormatter,
|
||||
background: {
|
||||
opacity: 0.8
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#example-4").click(function() {
|
||||
|
||||
placeholder.unbind();
|
||||
|
||||
$("#title").text("Label Radius");
|
||||
$("#description").text("Slightly more transparent label backgrounds and adjusted the radius values to place them within the pie.");
|
||||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 3/4,
|
||||
formatter: labelFormatter,
|
||||
background: {
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#example-5").click(function() {
|
||||
|
||||
placeholder.unbind();
|
||||
|
||||
$("#title").text("Label Styles #1");
|
||||
$("#description").text("Semi-transparent, black-colored label background.");
|
||||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 3/4,
|
||||
formatter: labelFormatter,
|
||||
background: {
|
||||
opacity: 0.5,
|
||||
color: "#000"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#example-6").click(function() {
|
||||
|
||||
placeholder.unbind();
|
||||
|
||||
$("#title").text("Label Styles #2");
|
||||
$("#description").text("Semi-transparent, black-colored label background placed at pie edge.");
|
||||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 3/4,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 3/4,
|
||||
formatter: labelFormatter,
|
||||
background: {
|
||||
opacity: 0.5,
|
||||
color: "#000"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#example-7").click(function() {
|
||||
|
||||
placeholder.unbind();
|
||||
|
||||
$("#title").text("Hidden Labels");
|
||||
$("#description").text("Labels can be hidden if the slice is less than a given percentage of the pie (10% in this case).");
|
||||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 2/3,
|
||||
formatter: labelFormatter,
|
||||
threshold: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#example-8").click(function() {
|
||||
|
||||
placeholder.unbind();
|
||||
|
||||
$("#title").text("Combined Slice");
|
||||
$("#description").text("Multiple slices less than a given percentage (5% in this case) of the pie can be combined into a single, larger slice.");
|
||||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
combine: {
|
||||
color: "#999",
|
||||
threshold: 0.05
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#example-9").click(function() {
|
||||
|
||||
placeholder.unbind();
|
||||
|
||||
$("#title").text("Rectangular Pie");
|
||||
$("#description").text("The radius can also be set to a specific size (even larger than the container itself).");
|
||||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 500,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: labelFormatter,
|
||||
threshold: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#example-10").click(function() {
|
||||
|
||||
placeholder.unbind();
|
||||
|
||||
$("#title").text("Tilted Pie");
|
||||
$("#description").text("The pie can be tilted at an angle.");
|
||||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
tilt: 0.5,
|
||||
label: {
|
||||
show: true,
|
||||
radius: 1,
|
||||
formatter: labelFormatter,
|
||||
background: {
|
||||
opacity: 0.8
|
||||
}
|
||||
},
|
||||
combine: {
|
||||
color: "#999",
|
||||
threshold: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#example-11").click(function() {
|
||||
|
||||
placeholder.unbind();
|
||||
|
||||
$("#title").text("Donut Hole");
|
||||
$("#description").text("A donut hole can be added.");
|
||||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
innerRadius: 0.5,
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#example-12").click(function() {
|
||||
|
||||
placeholder.unbind();
|
||||
|
||||
$("#title").text("Interactivity");
|
||||
$("#description").text("The pie can be made interactive with hover and click events.");
|
||||
|
||||
$.plot(placeholder, data, {
|
||||
series: {
|
||||
pie: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true
|
||||
}
|
||||
});
|
||||
|
||||
placeholder.bind("plothover", function(event, pos, obj) {
|
||||
|
||||
if (!obj) {
|
||||
return;
|
||||
}
|
||||
|
||||
var percent = parseFloat(obj.series.percent).toFixed(2);
|
||||
$("#hover").html("<span style='font-weight:bold; color:" + obj.series.color + "'>" + obj.series.label + " (" + percent + "%)</span>");
|
||||
});
|
||||
|
||||
placeholder.bind("plotclick", function(event, pos, obj) {
|
||||
|
||||
if (!obj) {
|
||||
return;
|
||||
}
|
||||
|
||||
percent = parseFloat(obj.series.percent).toFixed(2);
|
||||
alert("" + obj.series.label + ": " + percent + "%");
|
||||
});
|
||||
});
|
||||
|
||||
// Show the initial default chart
|
||||
|
||||
$("#example-1").click();
|
||||
|
||||
// Add the Flot version string to the footer
|
||||
|
||||
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
||||
});
|
||||
|
||||
// A custom label formatter used by several of the plots
|
||||
|
||||
function labelFormatter(label, series) {
|
||||
return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
function setCode(lines) {
|
||||
$("#code").text(lines.join("\n"));
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Editor Js
|
||||
*/
|
||||
|
||||
$(document).ready(function () {
|
||||
if($("#elm1").length > 0){
|
||||
tinymce.init({
|
||||
selector: "textarea#elm1",
|
||||
theme: "modern",
|
||||
height:300,
|
||||
plugins: [
|
||||
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
|
||||
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
|
||||
"save table contextmenu directionality emoticons template paste textcolor"
|
||||
],
|
||||
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons",
|
||||
style_formats: [
|
||||
{title: 'Bold text', inline: 'b'},
|
||||
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
|
||||
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
|
||||
{title: 'Example 1', inline: 'span', classes: 'example1'},
|
||||
{title: 'Example 2', inline: 'span', classes: 'example2'},
|
||||
{title: 'Table styles'},
|
||||
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
|
||||
]
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Form Repeater
|
||||
*/
|
||||
|
||||
$(document).ready(function () {
|
||||
'use strict';
|
||||
|
||||
$('.repeater-default').repeater();
|
||||
|
||||
$('.repeater-custom-show-hide').repeater({
|
||||
show: function () {
|
||||
$(this).slideDown();
|
||||
},
|
||||
hide: function (remove) {
|
||||
if (confirm('Are you sure you want to remove this item?')) {
|
||||
$(this).slideUp(remove);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Upload Js
|
||||
*/
|
||||
|
||||
|
||||
// dropify js
|
||||
|
||||
$(function () {
|
||||
// Basic
|
||||
$('.dropify').dropify();
|
||||
|
||||
// Translated
|
||||
$('.dropify-fr').dropify({
|
||||
messages: {
|
||||
default: 'Glissez-déposez un fichier ici ou cliquez',
|
||||
replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
|
||||
remove: 'Supprimer',
|
||||
error: 'Désolé, le fichier trop volumineux'
|
||||
}
|
||||
});
|
||||
|
||||
// Used events
|
||||
var drEvent = $('#input-file-events').dropify();
|
||||
|
||||
drEvent.on('dropify.beforeClear', function(event, element){
|
||||
return confirm("Do you really want to delete \"" + element.file.name + "\" ?");
|
||||
});
|
||||
|
||||
drEvent.on('dropify.afterClear', function(event, element){
|
||||
alert('File deleted');
|
||||
});
|
||||
|
||||
drEvent.on('dropify.errors', function(event, element){
|
||||
console.log('Has Errors');
|
||||
});
|
||||
|
||||
var drDestroy = $('#input-file-to-destroy').dropify();
|
||||
drDestroy = drDestroy.data('dropify')
|
||||
$('#toggleDropify').on('click', function(e){
|
||||
e.preventDefault();
|
||||
if (drDestroy.isDropified()) {
|
||||
drDestroy.destroy();
|
||||
} else {
|
||||
drDestroy.init();
|
||||
}
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Form Wizard
|
||||
*/
|
||||
|
||||
|
||||
$(function ()
|
||||
{
|
||||
$("#form-horizontal").steps({
|
||||
headerTag: "h3",
|
||||
bodyTag: "fieldset",
|
||||
transitionEffect: "slide"
|
||||
});
|
||||
$("#form-vertical").steps({
|
||||
headerTag: "h3",
|
||||
bodyTag: "fieldset",
|
||||
transitionEffect: "slideLeft",
|
||||
stepsOrientation: "vertical"
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* X-Editable Js
|
||||
*/
|
||||
|
||||
|
||||
$(function () {
|
||||
|
||||
//modify buttons style
|
||||
$.fn.editableform.buttons =
|
||||
'<button type="submit" class="btn btn-success editable-submit btn-sm waves-effect waves-light"><i class="mdi mdi-check"></i></button>' +
|
||||
'<button type="button" class="btn btn-danger editable-cancel btn-sm waves-effect waves-light"><i class="mdi mdi-close"></i></button>';
|
||||
|
||||
|
||||
//inline
|
||||
|
||||
|
||||
$('#inline-username').editable({
|
||||
type: 'text',
|
||||
pk: 1,
|
||||
name: 'username',
|
||||
title: 'Enter username',
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-firstname').editable({
|
||||
validate: function (value) {
|
||||
if ($.trim(value) == '') return 'This field is required';
|
||||
},
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-sex').editable({
|
||||
prepend: "not selected",
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm',
|
||||
source: [
|
||||
{value: 1, text: 'Male'},
|
||||
{value: 2, text: 'Female'}
|
||||
],
|
||||
display: function (value, sourceData) {
|
||||
var colors = {"": "#98a6ad", 1: "#5fbeaa", 2: "#5d9cec"},
|
||||
elem = $.grep(sourceData, function (o) {
|
||||
return o.value == value;
|
||||
});
|
||||
|
||||
if (elem.length) {
|
||||
$(this).text(elem[0].text).css("color", colors[value]);
|
||||
} else {
|
||||
$(this).empty();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#inline-status').editable({
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-group').editable({
|
||||
showbuttons: false,
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-dob').editable({
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
$('#inline-comments').editable({
|
||||
showbuttons: 'bottom',
|
||||
mode: 'inline',
|
||||
inputclass: 'form-control-sm'
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
@@ -0,0 +1,209 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Form Advanced Js
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var AdvancedForm = function() {};
|
||||
|
||||
AdvancedForm.prototype.init = function() {
|
||||
// Date range picker
|
||||
$('input[name="dates"]').daterangepicker({
|
||||
"alwaysShowCalendars": true,
|
||||
});
|
||||
$('.open_picker').show();
|
||||
|
||||
$('input[name="daterange"]').daterangepicker({
|
||||
opens: 'left'
|
||||
}, function(start, end, label) {
|
||||
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
|
||||
});
|
||||
|
||||
$('input[name="datetimes"]').daterangepicker({
|
||||
timePicker: true,
|
||||
startDate: moment().startOf('hour'),
|
||||
endDate: moment().startOf('hour').add(32, 'hour'),
|
||||
locale: {
|
||||
format: 'M/DD hh:mm A'
|
||||
}
|
||||
});
|
||||
|
||||
$('input[name="birthday"]').daterangepicker({
|
||||
singleDatePicker: true,
|
||||
showDropdowns: true,
|
||||
minYear: 1901,
|
||||
maxYear: parseInt(moment().format('YYYY'),10)
|
||||
}, function(start, end, label) {
|
||||
var years = moment().diff(start, 'years');
|
||||
alert("You are " + years + " years old!");
|
||||
});
|
||||
|
||||
var start = moment().subtract(29, 'days');
|
||||
var end = moment();
|
||||
|
||||
function cb(start, end) {
|
||||
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
|
||||
}
|
||||
|
||||
$('#reportrange').daterangepicker({
|
||||
startDate: start,
|
||||
endDate: end,
|
||||
ranges: {
|
||||
'Today': [moment(), moment()],
|
||||
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
||||
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
|
||||
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
|
||||
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
||||
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
|
||||
}
|
||||
}, cb);
|
||||
|
||||
// Select2
|
||||
$(".select2").select2({
|
||||
width: '100%'
|
||||
});
|
||||
|
||||
//colorpicker start
|
||||
$('#b_color-default, #b_color_rgb, #b_color_hsl').colorpicker();
|
||||
|
||||
|
||||
// MAterial Date picker
|
||||
$('#mdate').bootstrapMaterialDatePicker({
|
||||
weekStart : 0, time: false
|
||||
});
|
||||
$('#timepicker').bootstrapMaterialDatePicker({
|
||||
format : 'HH:mm', time: true, date: false
|
||||
});
|
||||
$('#date-format').bootstrapMaterialDatePicker({
|
||||
format : 'dddd DD MMMM YYYY - HH:mm'
|
||||
});
|
||||
$('#min-date').bootstrapMaterialDatePicker({
|
||||
format : 'DD/MM/YYYY HH:mm', minDate : new Date()
|
||||
});
|
||||
|
||||
$('#date-end').bootstrapMaterialDatePicker
|
||||
({
|
||||
weekStart: 0, format: 'DD/MM/YYYY HH:mm'
|
||||
});
|
||||
$('#date-start').bootstrapMaterialDatePicker
|
||||
({
|
||||
weekStart: 0, format: 'DD/MM/YYYY HH:mm', shortTime : true
|
||||
}).on('change', function(e, date)
|
||||
{
|
||||
$('#date-end').bootstrapMaterialDatePicker('setMinDate', date);
|
||||
});
|
||||
|
||||
|
||||
//Bootstrap-MaxLength
|
||||
|
||||
$('input#defaultconfig').maxlength({
|
||||
warningClass: "badge badge-info",
|
||||
limitReachedClass: "badge badge-warning"
|
||||
});
|
||||
|
||||
$('input#thresholdconfig').maxlength({
|
||||
threshold: 20,
|
||||
warningClass: "badge badge-info",
|
||||
limitReachedClass: "badge badge-warning"
|
||||
});
|
||||
|
||||
$('input#moreoptions').maxlength({
|
||||
alwaysShow: true,
|
||||
warningClass: "badge badge-success",
|
||||
limitReachedClass: "badge badge-danger"
|
||||
});
|
||||
|
||||
$('input#alloptions').maxlength({
|
||||
alwaysShow: true,
|
||||
warningClass: "badge badge-success",
|
||||
limitReachedClass: "badge badge-danger",
|
||||
separator: ' out of ',
|
||||
preText: 'You typed ',
|
||||
postText: ' chars available.',
|
||||
validate: true
|
||||
});
|
||||
|
||||
$('textarea#textarea').maxlength({
|
||||
alwaysShow: true,
|
||||
warningClass: "badge badge-info",
|
||||
limitReachedClass: "badge badge-warning"
|
||||
});
|
||||
|
||||
$('input#placement').maxlength({
|
||||
alwaysShow: true,
|
||||
placement: 'top-left',
|
||||
warningClass: "badge badge-info",
|
||||
limitReachedClass: "badge badge-warning"
|
||||
});
|
||||
|
||||
//Bootstrap-TouchSpin
|
||||
$(".vertical-spin").TouchSpin({
|
||||
verticalbuttons: true,
|
||||
verticalupclass: 'ion-plus-round',
|
||||
verticaldownclass: 'ion-minus-round',
|
||||
buttondown_class: 'btn btn-gradient-primary',
|
||||
buttonup_class: 'btn btn-gradient-primary'
|
||||
});
|
||||
|
||||
$("input[name='demo1']").TouchSpin({
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 0.1,
|
||||
decimals: 2,
|
||||
boostat: 5,
|
||||
maxboostedstep: 10,
|
||||
postfix: '%',
|
||||
buttondown_class: 'btn btn-gradient-primary',
|
||||
buttonup_class: 'btn btn-gradient-primary'
|
||||
});
|
||||
$("input[name='demo2']").TouchSpin({
|
||||
min: -1000000000,
|
||||
max: 1000000000,
|
||||
stepinterval: 50,
|
||||
maxboostedstep: 10000000,
|
||||
prefix: '$',
|
||||
buttondown_class: 'btn btn-gradient-primary',
|
||||
buttonup_class: 'btn btn-gradient-primary'
|
||||
});
|
||||
$("input[name='demo3']").TouchSpin({
|
||||
buttondown_class: 'btn btn-gradient-primary',
|
||||
buttonup_class: 'btn btn-gradient-primary'
|
||||
});
|
||||
$("input[name='demo3_21']").TouchSpin({
|
||||
initval: 40,
|
||||
buttondown_class: 'btn btn-gradient-primary',
|
||||
buttonup_class: 'btn btn-gradient-primary'
|
||||
});
|
||||
$("input[name='demo3_22']").TouchSpin({
|
||||
initval: 40,
|
||||
buttondown_class: 'btn btn-gradient-primary',
|
||||
buttonup_class: 'btn btn-gradient-primary'
|
||||
});
|
||||
|
||||
$("input[name='demo5']").TouchSpin({
|
||||
prefix: "pre",
|
||||
postfix: "post",
|
||||
buttondown_class: 'btn btn-gradient-primary',
|
||||
buttonup_class: 'btn btn-gradient-primary'
|
||||
});
|
||||
$("input[name='demo0']").TouchSpin({
|
||||
buttondown_class: 'btn btn-gradient-primary',
|
||||
buttonup_class: 'btn btn-gradient-primary'
|
||||
});
|
||||
},
|
||||
//init
|
||||
$.AdvancedForm = new AdvancedForm, $.AdvancedForm.Constructor = AdvancedForm
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function ($) {
|
||||
"use strict";
|
||||
$.AdvancedForm.init();
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Gallery Js
|
||||
*/
|
||||
|
||||
$(window).on('load', function() {
|
||||
// Filter
|
||||
//PORTFOLIO FILTER
|
||||
var $container = $('.projects-wrapper');
|
||||
var $filter = $('#filter');
|
||||
// Initialize isotope
|
||||
$container.isotope({
|
||||
filter: '*',
|
||||
layoutMode: 'masonry',
|
||||
animationOptions: {
|
||||
duration: 750,
|
||||
easing: 'linear'
|
||||
}
|
||||
});
|
||||
// Filter items when filter link is clicked
|
||||
$filter.find('a').click(function() {
|
||||
var selector = $(this).attr('data-filter');
|
||||
$filter.find('a').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
$container.isotope({
|
||||
filter: selector,
|
||||
animationOptions: {
|
||||
animationDuration: 750,
|
||||
easing: 'linear',
|
||||
queue: false,
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
/*END*/
|
||||
});
|
||||
$('.mfp-image').magnificPopup({
|
||||
type: 'image',
|
||||
closeOnContentClick: true,
|
||||
mainClass: 'mfp-fade',
|
||||
gallery: {
|
||||
enabled: true,
|
||||
navigateByImgClick: true,
|
||||
preload: [0, 1]
|
||||
// Will preload 0 - before current, and 1 after the current image
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,213 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Gmaps Js
|
||||
*/
|
||||
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var GoogleMap = function() {};
|
||||
|
||||
//creates basic map
|
||||
GoogleMap.prototype.createBasic = function($container) {
|
||||
return new GMaps({
|
||||
div: $container,
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
},
|
||||
//creates map with markers
|
||||
GoogleMap.prototype.createMarkers = function($container) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
|
||||
//sample markers, but you can pass actual marker data as function parameter
|
||||
map.addMarker({
|
||||
lat: -12.043333,
|
||||
lng: -77.03,
|
||||
title: 'Lima',
|
||||
details: {
|
||||
database_id: 42,
|
||||
author: 'HPNeo'
|
||||
},
|
||||
click: function(e){
|
||||
if(console.log)
|
||||
console.log(e);
|
||||
alert('You clicked in this marker');
|
||||
}
|
||||
});
|
||||
map.addMarker({
|
||||
lat: -12.042,
|
||||
lng: -77.028333,
|
||||
title: 'Marker with InfoWindow',
|
||||
infoWindow: {
|
||||
content: '<p>HTML Content</p>'
|
||||
}
|
||||
});
|
||||
|
||||
return map;
|
||||
},
|
||||
//creates map with polygone
|
||||
GoogleMap.prototype.createWithPolygon = function ($container, $path) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
|
||||
var polygon = map.drawPolygon({
|
||||
paths: $path,
|
||||
strokeColor: '#BBD8E9',
|
||||
strokeOpacity: 1,
|
||||
strokeWeight: 3,
|
||||
fillColor: '#BBD8E9',
|
||||
fillOpacity: 0.6
|
||||
});
|
||||
|
||||
return map;
|
||||
},
|
||||
|
||||
//creates map with overlay
|
||||
GoogleMap.prototype.createWithOverlay = function ($container) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
map.drawOverlay({
|
||||
lat: map.getCenter().lat(),
|
||||
lng: map.getCenter().lng(),
|
||||
content: '<div class="gmaps-overlay">Our Office!<div class="gmaps-overlay_arrow above"></div></div>',
|
||||
verticalAlign: 'top',
|
||||
horizontalAlign: 'center'
|
||||
});
|
||||
|
||||
return map;
|
||||
},
|
||||
|
||||
//creates map with street view
|
||||
GoogleMap.prototype.createWithStreetview = function ($container, $lat, $lng) {
|
||||
return GMaps.createPanorama({
|
||||
el: $container,
|
||||
lat : $lat,
|
||||
lng : $lng
|
||||
});
|
||||
},
|
||||
//Routes
|
||||
GoogleMap.prototype.createWithRoutes = function ($container, $lat, $lng) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: $lat,
|
||||
lng: $lng
|
||||
});
|
||||
$('#start_travel').click(function(e){
|
||||
e.preventDefault();
|
||||
map.travelRoute({
|
||||
origin: [-12.044012922866312, -77.02470665341184],
|
||||
destination: [-12.090814532191756, -77.02271108990476],
|
||||
travelMode: 'driving',
|
||||
step: function(e){
|
||||
$('#instructions').append('<li>'+e.instructions+'</li>');
|
||||
$('#instructions li:eq('+e.step_number+')').delay(450*e.step_number).fadeIn(200, function(){
|
||||
map.setCenter(e.end_location.lat(), e.end_location.lng());
|
||||
map.drawPolyline({
|
||||
path: e.path,
|
||||
strokeColor: '#131540',
|
||||
strokeOpacity: 0.6,
|
||||
strokeWeight: 6
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
return map;
|
||||
},
|
||||
//Type
|
||||
GoogleMap.prototype.createMapByType = function ($container, $lat, $lng) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: $lat,
|
||||
lng: $lng,
|
||||
mapTypeControlOptions: {
|
||||
mapTypeIds : ["hybrid", "roadmap", "satellite", "terrain", "osm", "cloudmade"]
|
||||
}
|
||||
});
|
||||
map.addMapType("osm", {
|
||||
getTileUrl: function(coord, zoom) {
|
||||
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
|
||||
},
|
||||
tileSize: new google.maps.Size(256, 256),
|
||||
name: "OpenStreetMap",
|
||||
maxZoom: 18
|
||||
});
|
||||
map.addMapType("cloudmade", {
|
||||
getTileUrl: function(coord, zoom) {
|
||||
return "http://b.tile.cloudmade.com/8ee2a50541944fb9bcedded5165f09d9/1/256/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
|
||||
},
|
||||
tileSize: new google.maps.Size(256, 256),
|
||||
name: "CloudMade",
|
||||
maxZoom: 18
|
||||
});
|
||||
map.setMapTypeId("osm");
|
||||
return map;
|
||||
},
|
||||
GoogleMap.prototype.createWithMenu = function ($container, $lat, $lng) {
|
||||
var map = new GMaps({
|
||||
div: $container,
|
||||
lat: $lat,
|
||||
lng: $lng
|
||||
});
|
||||
map.setContextMenu({
|
||||
control: 'map',
|
||||
options: [{
|
||||
title: 'Add marker',
|
||||
name: 'add_marker',
|
||||
action: function(e){
|
||||
this.addMarker({
|
||||
lat: e.latLng.lat(),
|
||||
lng: e.latLng.lng(),
|
||||
title: 'New marker'
|
||||
});
|
||||
this.hideContextMenu();
|
||||
}
|
||||
}, {
|
||||
title: 'Center here',
|
||||
name: 'center_here',
|
||||
action: function(e){
|
||||
this.setCenter(e.latLng.lat(), e.latLng.lng());
|
||||
}
|
||||
}]
|
||||
});
|
||||
},
|
||||
//init
|
||||
GoogleMap.prototype.init = function() {
|
||||
var $this = this;
|
||||
$(document).ready(function(){
|
||||
|
||||
//with sample markers
|
||||
$this.createMarkers('#gmaps-markers');
|
||||
|
||||
//overlay
|
||||
$this.createWithOverlay('#gmaps-overlay');
|
||||
|
||||
//street view
|
||||
$this.createWithStreetview('#panorama', 42.3455, -71.0983);
|
||||
|
||||
//types
|
||||
$this.createMapByType('#gmaps-types', -12.043333, -77.028333);
|
||||
});
|
||||
},
|
||||
//init
|
||||
$.GoogleMap = new GoogleMap, $.GoogleMap.Constructor = GoogleMap
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function($) {
|
||||
"use strict";
|
||||
$.GoogleMap.init()
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,274 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Dashboard Js
|
||||
*/
|
||||
|
||||
//colunm-1
|
||||
|
||||
var options = {
|
||||
chart: {
|
||||
height: 300,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 0,
|
||||
left: 5,
|
||||
bottom: 5,
|
||||
right: 0,
|
||||
blur: 5,
|
||||
color: '#45404a2e',
|
||||
opacity: 0.35
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
endingShape: 'rounded',
|
||||
columnWidth: '25%',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
colors: ["#2c77f4", "#1ecab8"],
|
||||
series: [{
|
||||
name: 'New Tickets',
|
||||
data: [68, 44, 55, 57, 56, 61, 58, 63, 60, 66]
|
||||
}, {
|
||||
name: 'Solved Tickets',
|
||||
data: [51, 76, 85, 101, 98, 87, 105, 91, 114, 94]
|
||||
},],
|
||||
xaxis: {
|
||||
categories: ['Jan','Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
|
||||
axisBorder: {
|
||||
show: true,
|
||||
},
|
||||
axisTicks: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
offsetY: -10,
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Tickets'
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
// legend: {
|
||||
// floating: true
|
||||
// },
|
||||
grid: {
|
||||
row: {
|
||||
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
|
||||
opacity: 0.2
|
||||
},
|
||||
borderColor: '#f1f3fa'
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "" + val + ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#ana_dash_1"),
|
||||
options
|
||||
);
|
||||
|
||||
chart.render();
|
||||
|
||||
|
||||
// saprkline chart
|
||||
|
||||
|
||||
var dash_spark_1 = {
|
||||
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 12,
|
||||
left: 0,
|
||||
bottom: 5,
|
||||
right: 0,
|
||||
blur: 2,
|
||||
color: '#45404a2e',
|
||||
opacity: 0.1
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 3
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
gradient: {
|
||||
shade: '#2c77f4',
|
||||
type: "horizontal",
|
||||
shadeIntensity: 0.5,
|
||||
inverseColors: true,
|
||||
opacityFrom: 0.1,
|
||||
opacityTo: 0.1,
|
||||
stops: [0, 80, 100],
|
||||
colorStops: []
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
data: [4, 8, 5, 10, 4, 16, 5, 11, 6, 11, 30, 10, 13, 4, 6, 3, 6]
|
||||
}],
|
||||
yaxis: {
|
||||
min: 0
|
||||
},
|
||||
colors: ['#2c77f4'],
|
||||
}
|
||||
new ApexCharts(document.querySelector("#dash_spark_1"), dash_spark_1).render();
|
||||
|
||||
|
||||
var dash_spark_2 = {
|
||||
|
||||
chart: {
|
||||
type: 'area',
|
||||
height: 60,
|
||||
sparkline: {
|
||||
enabled: true
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 12,
|
||||
left: 0,
|
||||
bottom: 5,
|
||||
right: 0,
|
||||
blur: 2,
|
||||
color: '#45404a2e',
|
||||
opacity: 0.1
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 3
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
gradient: {
|
||||
shade: '#fd3c97',
|
||||
type: "horizontal",
|
||||
shadeIntensity: 0.5,
|
||||
inverseColors: true,
|
||||
opacityFrom: 0.1,
|
||||
opacityTo: 0.1,
|
||||
stops: [0, 80, 100],
|
||||
colorStops: []
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
data: [4, 8, 5, 10, 4, 25, 5, 11, 6, 11, 5, 10, 3, 14, 6, 8, 6]
|
||||
}],
|
||||
yaxis: {
|
||||
min: 0
|
||||
},
|
||||
colors: ['#fd3c97'],
|
||||
}
|
||||
new ApexCharts(document.querySelector("#dash_spark_2"), dash_spark_2).render();
|
||||
|
||||
|
||||
|
||||
//Device-widget
|
||||
|
||||
|
||||
var options = {
|
||||
chart: {
|
||||
height: 280,
|
||||
type: 'donut',
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 10,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
blur: 2,
|
||||
color: '#45404a2e',
|
||||
opacity: 0.15
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '85%'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 2,
|
||||
colors: ['transparent']
|
||||
},
|
||||
series: [65, 20, 10, 5],
|
||||
legend: {
|
||||
show: false,
|
||||
position: 'bottom',
|
||||
horizontalAlign: 'center',
|
||||
verticalAlign: 'middle',
|
||||
floating: false,
|
||||
fontSize: '14px',
|
||||
offsetX: 0,
|
||||
offsetY: -13
|
||||
},
|
||||
labels: [ "Excellent", "Very Good", "Good", "Fair"],
|
||||
colors: ["#34bfa3", "#5d78ff", "#ff9f43", "#fd3c97"],
|
||||
|
||||
responsive: [{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
plotOptions: {
|
||||
donut: {
|
||||
customScale: 0.2
|
||||
}
|
||||
},
|
||||
chart: {
|
||||
height: 240
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
}
|
||||
}],
|
||||
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + " %"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#ana_device"),
|
||||
options
|
||||
);
|
||||
|
||||
chart.render();
|
||||
@@ -0,0 +1,277 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Idle-timer Js
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
scrollToBottom plugin, chainable
|
||||
*/
|
||||
$.fn.scrollToBottom = function () {
|
||||
this.scrollTop(this[0].scrollHeight);
|
||||
return this;
|
||||
};
|
||||
/*
|
||||
click event for alert button
|
||||
*/
|
||||
(function ($) {
|
||||
//Display alert
|
||||
$("#alert").click(function () { alert("Hello!"); return false; });
|
||||
})(jQuery);
|
||||
|
||||
/*
|
||||
Code for document idle timer
|
||||
*/
|
||||
(function ($) {
|
||||
//Define default
|
||||
var
|
||||
docTimeout = 5000
|
||||
;
|
||||
|
||||
/*
|
||||
Handle raised idle/active events
|
||||
*/
|
||||
$(document).on("idle.idleTimer", function (event, elem, obj) {
|
||||
$("#docStatus")
|
||||
.val(function (i, v) {
|
||||
return v + "Idle @ " + moment().format() + " \n";
|
||||
})
|
||||
.removeClass("alert-success")
|
||||
.addClass("alert-secondary")
|
||||
.scrollToBottom();
|
||||
});
|
||||
$(document).on("active.idleTimer", function (event, elem, obj, e) {
|
||||
$('#docStatus')
|
||||
.val(function (i, v) {
|
||||
return v + "Active [" + e.type + "] [" + e.target.nodeName + "] @ " + moment().format() + " \n";
|
||||
})
|
||||
.addClass("alert-success")
|
||||
.removeClass("alert-secondary")
|
||||
.scrollToBottom();
|
||||
});
|
||||
|
||||
/*
|
||||
Handle button events
|
||||
*/
|
||||
$("#btPause").click(function () {
|
||||
$(document).idleTimer("pause");
|
||||
$('#docStatus')
|
||||
.val(function (i, v) {
|
||||
return v + "Paused @ " + moment().format() + " \n";
|
||||
})
|
||||
.scrollToBottom();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
$("#btResume").click(function () {
|
||||
$(document).idleTimer("resume");
|
||||
$('#docStatus')
|
||||
.val(function (i, v) {
|
||||
return v + "Resumed @ " + moment().format() + " \n";
|
||||
})
|
||||
.scrollToBottom();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
$("#btElapsed").click(function () {
|
||||
$('#docStatus')
|
||||
.val(function (i, v) {
|
||||
return v + "Elapsed (since becoming active): " + $(document).idleTimer("getElapsedTime") + " \n";
|
||||
})
|
||||
.scrollToBottom();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
$("#btDestroy").click(function () {
|
||||
$(document).idleTimer("destroy");
|
||||
$('#docStatus')
|
||||
.val(function (i, v) {
|
||||
return v + "Destroyed: @ " + moment().format() + " \n";
|
||||
})
|
||||
.removeClass("alert-success")
|
||||
.removeClass("alert-secondary")
|
||||
.scrollToBottom();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
$("#btInit").click(function () {
|
||||
// for demo purposes show init with just object
|
||||
$(document).idleTimer({ timeout: docTimeout });
|
||||
$('#docStatus')
|
||||
.val(function (i, v) {
|
||||
return v + "Init: @ " + moment().format() + " \n";
|
||||
})
|
||||
.scrollToBottom();
|
||||
|
||||
//Apply classes for default state
|
||||
if ($(document).idleTimer("isIdle")) {
|
||||
$('#docStatus')
|
||||
.removeClass("alert-success")
|
||||
.addClass("alert-secondary");
|
||||
} else {
|
||||
$('#docStatus')
|
||||
.addClass("alert-success")
|
||||
.removeClass("alert-secondary");
|
||||
}
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
//Clear old statuses
|
||||
$('#docStatus').val('');
|
||||
|
||||
//Start timeout, passing no options
|
||||
//Same as $.idleTimer(docTimeout, docOptions);
|
||||
$(document).idleTimer({
|
||||
timeout: docTimeout,
|
||||
timerSyncId: "document-timer-demo"
|
||||
});
|
||||
|
||||
//For demo purposes, style based on initial state
|
||||
if ($(document).idleTimer("isIdle")) {
|
||||
$("#docStatus")
|
||||
.val(function (i, v) {
|
||||
return v + "Initial Idle State @ " + moment().format() + " \n";
|
||||
})
|
||||
.removeClass("alert-success")
|
||||
.addClass("alert-secondary")
|
||||
.scrollToBottom();
|
||||
} else {
|
||||
$('#docStatus')
|
||||
.val(function (i, v) {
|
||||
return v + "Initial Active State @ " + moment().format() + " \n";
|
||||
})
|
||||
.addClass("alert-success")
|
||||
.removeClass("alert-secondary")
|
||||
.scrollToBottom();
|
||||
}
|
||||
|
||||
|
||||
//For demo purposes, display the actual timeout on the page
|
||||
$('#docTimeout').text(docTimeout / 1000);
|
||||
|
||||
|
||||
})(jQuery);
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Code for element idle timer
|
||||
*/
|
||||
(function ($) {
|
||||
//Define textarea settings
|
||||
var
|
||||
taTimeout = 3000
|
||||
;
|
||||
|
||||
/*
|
||||
Handle raised idle/active events
|
||||
*/
|
||||
$('#elStatus').on("idle.idleTimer", function (event, elem, obj) {
|
||||
//If you dont stop propagation it will bubble up to document event handler
|
||||
event.stopPropagation();
|
||||
|
||||
$('#elStatus')
|
||||
.val(function (i, v) {
|
||||
return v + "Idle @ " + moment().format() + " \n";
|
||||
})
|
||||
.removeClass("alert-success")
|
||||
.addClass("alert-secondary")
|
||||
.scrollToBottom();
|
||||
|
||||
});
|
||||
$('#elStatus').on("active.idleTimer", function (event) {
|
||||
//If you dont stop propagation it will bubble up to document event handler
|
||||
event.stopPropagation();
|
||||
|
||||
$('#elStatus')
|
||||
.val(function (i, v) {
|
||||
return v + "Active @ " + moment().format() + " \n";
|
||||
})
|
||||
.addClass("alert-success")
|
||||
.removeClass("alert-secondary")
|
||||
.scrollToBottom();
|
||||
});
|
||||
|
||||
/*
|
||||
Handle button events
|
||||
*/
|
||||
$("#btReset").click(function () {
|
||||
$('#elStatus')
|
||||
.idleTimer("reset")
|
||||
.val(function (i, v) {
|
||||
return v + "Reset @ " + moment().format() + " \n";
|
||||
})
|
||||
.scrollToBottom();
|
||||
|
||||
//Apply classes for default state
|
||||
if ($("#elStatus").idleTimer("isIdle")) {
|
||||
$('#elStatus')
|
||||
.removeClass("alert-success")
|
||||
.addClass("alert-secondary");
|
||||
} else {
|
||||
$('#elStatus')
|
||||
.addClass("alert-success")
|
||||
.removeClass("alert-secondary");
|
||||
}
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
$("#btRemaining").click(function () {
|
||||
$('#elStatus')
|
||||
.val(function (i, v) {
|
||||
return v + "Remaining: " + $("#elStatus").idleTimer("getRemainingTime") + " \n";
|
||||
})
|
||||
.scrollToBottom();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
$("#btLastActive").click(function () {
|
||||
$('#elStatus')
|
||||
.val(function (i, v) {
|
||||
return v + "LastActive: " + $("#elStatus").idleTimer("getLastActiveTime") + " \n";
|
||||
})
|
||||
.scrollToBottom();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
$("#btState").click(function () {
|
||||
$('#elStatus')
|
||||
.val(function (i, v) {
|
||||
return v + "State: " + ($("#elStatus").idleTimer("isIdle")? "idle":"active") + " \n";
|
||||
})
|
||||
.scrollToBottom();
|
||||
$(this).blur();
|
||||
return false;
|
||||
});
|
||||
|
||||
//Clear value if there was one cached & start time
|
||||
$('#elStatus').val('').idleTimer({
|
||||
timeout: taTimeout,
|
||||
timerSyncId: "element-timer-demo"
|
||||
});
|
||||
|
||||
//For demo purposes, show initial state
|
||||
if ($("#elStatus").idleTimer("isIdle")) {
|
||||
$("#elStatus")
|
||||
.val(function (i, v) {
|
||||
return v + "Initial Idle @ " + moment().format() + " \n";
|
||||
})
|
||||
.removeClass("alert-success")
|
||||
.addClass("alert-secondary")
|
||||
.scrollToBottom();
|
||||
} else {
|
||||
$('#elStatus')
|
||||
.val(function (i, v) {
|
||||
return v + "Initial Active @ " + moment().format() + " \n";
|
||||
})
|
||||
.addClass("alert-success")
|
||||
.removeClass("alert-secondary")
|
||||
.scrollToBottom();
|
||||
}
|
||||
|
||||
// Display the actual timeout on the page
|
||||
$('#elTimeout').text(taTimeout / 1000);
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,103 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Jvectormap Js
|
||||
*/
|
||||
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var VectorMap = function() {};
|
||||
|
||||
VectorMap.prototype.init = function() {
|
||||
//various examples
|
||||
$('#world-map-markers').vectorMap({
|
||||
map : 'world_mill_en',
|
||||
scaleColors : ['#4d79f6', '#4d79f6'],
|
||||
normalizeFunction : 'polynomial',
|
||||
hoverOpacity : 0.7,
|
||||
hoverColor : false,
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#3f7dff'
|
||||
}
|
||||
},
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 9,
|
||||
'fill': '#4d79f6',
|
||||
'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 : [-8.51, 179.21],
|
||||
name : 'Tuvalu'
|
||||
}, {
|
||||
latLng : [3.2, 73.22],
|
||||
name : 'Maldives'
|
||||
}, {
|
||||
latLng : [35.88, 14.5],
|
||||
name : 'Malta'
|
||||
}, {
|
||||
latLng : [12.05, -61.75],
|
||||
name : 'Grenada'
|
||||
}, {
|
||||
latLng : [7.35, 134.46],
|
||||
name : 'Palau'
|
||||
}, {
|
||||
latLng : [42.5, 1.51],
|
||||
name : 'Andorra'
|
||||
},{
|
||||
latLng : [26.02, 50.55],
|
||||
name : 'Bahrain'
|
||||
},]
|
||||
});
|
||||
|
||||
$('#usa').vectorMap({map: 'us_aea_en',backgroundColor: 'transparent',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#e0504f'
|
||||
}
|
||||
}});
|
||||
$('#canada').vectorMap({map : 'ca_lcc',backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#ffd862'
|
||||
}
|
||||
}});
|
||||
$('#uk').vectorMap({map: 'uk_mill_en',backgroundColor: 'transparent',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#75439a'
|
||||
}
|
||||
}});
|
||||
$('#chicago').vectorMap({map: 'us-il-chicago_mill_en',backgroundColor: 'transparent',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#24bce3'
|
||||
}
|
||||
}});
|
||||
|
||||
},
|
||||
|
||||
|
||||
//init
|
||||
$.VectorMap = new VectorMap, $.VectorMap.Constructor = VectorMap
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function($) {
|
||||
"use strict";
|
||||
$.VectorMap.init()
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,131 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Morris Chart Js
|
||||
*/
|
||||
|
||||
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var MorrisCharts = function() {};
|
||||
|
||||
//creates line chart
|
||||
MorrisCharts.prototype.createLineChart = function(element, data, xkey, ykeys, labels, lineColors) {
|
||||
Morris.Line({
|
||||
element: element,
|
||||
data: data,
|
||||
xkey: xkey,
|
||||
ykeys: ykeys,
|
||||
labels: labels,
|
||||
hideHover: 'auto',
|
||||
gridLineColor: 'rgba(137, 151, 189, 0.15)',
|
||||
gridTextColor:'#8997bd',
|
||||
resize: true, //defaulted to true
|
||||
lineColors: lineColors
|
||||
});
|
||||
},
|
||||
|
||||
//creates area chart
|
||||
MorrisCharts.prototype.createAreaChart = function(element, pointSize, lineWidth, data, xkey, ykeys, labels, lineColors) {
|
||||
Morris.Area({
|
||||
element: element,
|
||||
pointSize: 3,
|
||||
lineWidth: 2,
|
||||
data: data,
|
||||
xkey: xkey,
|
||||
ykeys: ykeys,
|
||||
labels: labels,
|
||||
resize: true,
|
||||
hideHover: 'auto',
|
||||
gridLineColor: 'rgba(137, 151, 189, 0.15)',
|
||||
gridTextColor:'#8997bd',
|
||||
lineColors: lineColors
|
||||
});
|
||||
},
|
||||
//creates Bar chart
|
||||
MorrisCharts.prototype.createBarChart = function(element, data, xkey, ykeys, labels, lineColors) {
|
||||
Morris.Bar({
|
||||
element: element,
|
||||
data: data,
|
||||
xkey: xkey,
|
||||
ykeys: ykeys,
|
||||
labels: labels,
|
||||
gridLineColor: 'rgba(137, 151, 189, 0.15)',
|
||||
gridTextColor:'#8997bd',
|
||||
barSizeRatio: 0.4,
|
||||
resize: true,
|
||||
hideHover: 'auto',
|
||||
barColors: lineColors
|
||||
});
|
||||
},
|
||||
//creates Donut chart
|
||||
MorrisCharts.prototype.createDonutChart = function(element, data, colors) {
|
||||
Morris.Donut({
|
||||
element: element,
|
||||
data: data,
|
||||
resize: true,
|
||||
colors: colors,
|
||||
labelColor:"#8997bd",
|
||||
backgroundColor: 'transparent',
|
||||
});
|
||||
},
|
||||
|
||||
MorrisCharts.prototype.init = function() {
|
||||
|
||||
//create line chart
|
||||
var $data = [
|
||||
{ y: '2009', a: 3, b: 5 },
|
||||
{ y: '2010', a: 30, b: 15 },
|
||||
{ y: '2011', a: 10, b: 12 },
|
||||
{ y: '2012', a: 10, b: 25 },
|
||||
{ y: '2013', a: 22, b: 5 },
|
||||
{ y: '2014', a: 12, b: 7 },
|
||||
{ y: '2015', a: 5, b: 5 }
|
||||
];
|
||||
this.createLineChart('morris-line-example', $data, 'y', ['a', 'b'], ['Series A', 'Series B'], ['#4d79f6', '#4ac7ec']);
|
||||
|
||||
//creating area chart
|
||||
var $areaData = [
|
||||
{y: '2009', a: 10, b: 20},
|
||||
{y: '2010', a: 75, b: 65},
|
||||
{y: '2011', a: 50, b: 40},
|
||||
{y: '2012', a: 75, b: 65},
|
||||
{y: '2013', a: 50, b: 40},
|
||||
{y: '2014', a: 75, b: 65},
|
||||
{y: '2015', a: 90, b: 60},
|
||||
{y: '2016', a: 90, b: 75}
|
||||
];
|
||||
this.createAreaChart('morris-area-example', 0, 0, $areaData, 'y', ['a', 'b'], ['Series A', 'Series B'], ['#4d79f6', '#fd3995']);
|
||||
|
||||
//creating bar chart
|
||||
var $barData = [
|
||||
{y: '2009', a: 100, b: 90},
|
||||
{y: '2010', a: 75, b: 65},
|
||||
{y: '2011', a: 50, b: 40},
|
||||
{y: '2012', a: 75, b: 65},
|
||||
{y: '2013', a: 50, b: 40},
|
||||
{y: '2014', a: 75, b: 65},
|
||||
{y: '2015', a: 100, b: 90},
|
||||
{y: '2016', a: 90, b: 75}
|
||||
];
|
||||
this.createBarChart('morris-bar-example', $barData, 'y', ['a', 'b'], ['Series A', 'Series B'], ['#4d79f6', '#ccd8fc']);
|
||||
|
||||
//creating donut chart
|
||||
var $donutData = [
|
||||
{label: "Download Sales", value: 12},
|
||||
{label: "In-Store Sales", value: 30},
|
||||
{label: "Mail-Order Sales", value: 20,}
|
||||
];
|
||||
this.createDonutChart('morris-donut-example', $donutData, ['#ccd8fc', '#4d79f6', '#4ac7ec']);
|
||||
},
|
||||
//init
|
||||
$.MorrisCharts = new MorrisCharts, $.MorrisCharts.Constructor = MorrisCharts
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function($) {
|
||||
"use strict";
|
||||
$.MorrisCharts.init();
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Nastable Js
|
||||
*/
|
||||
|
||||
|
||||
|
||||
!function($) {
|
||||
"use strict";
|
||||
|
||||
var Nestable = function() {};
|
||||
|
||||
Nestable.prototype.updateOutput = function (e) {
|
||||
var list = e.length ? e : $(e.target),
|
||||
output = list.data('output');
|
||||
if (window.JSON) {
|
||||
output.val(window.JSON.stringify(list.nestable('serialize'))); //, null, 2));
|
||||
} else {
|
||||
output.val('JSON browser support required for this demo.');
|
||||
}
|
||||
},
|
||||
//init
|
||||
Nestable.prototype.init = function() {
|
||||
// activate Nestable for list 1
|
||||
$('#nestable_list_1').nestable({
|
||||
group: 1
|
||||
}).on('change', this.updateOutput);
|
||||
|
||||
// activate Nestable for list 2
|
||||
$('#nestable_list_2').nestable({
|
||||
group: 1
|
||||
}).on('change', this.updateOutput);
|
||||
|
||||
// output initial serialised data
|
||||
this.updateOutput($('#nestable_list_1').data('output', $('#nestable_list_1_output')));
|
||||
this.updateOutput($('#nestable_list_2').data('output', $('#nestable_list_2_output')));
|
||||
|
||||
$('#nestable_list_menu').on('click', function (e) {
|
||||
var target = $(e.target),
|
||||
action = target.data('action');
|
||||
if (action === 'expand-all') {
|
||||
$('.dd').nestable('expandAll');
|
||||
}
|
||||
if (action === 'collapse-all') {
|
||||
$('.dd').nestable('collapseAll');
|
||||
}
|
||||
});
|
||||
|
||||
$('#nestable_list_3').nestable();
|
||||
},
|
||||
//init
|
||||
$.Nestable = new Nestable, $.Nestable.Constructor = Nestable
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function($) {
|
||||
"use strict";
|
||||
$.Nestable.init()
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,160 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Profile Js
|
||||
*/
|
||||
|
||||
$('.dropify').dropify();
|
||||
|
||||
$("#portfolio_detail_tab").click(function(){
|
||||
setTimeout(function(){
|
||||
var $container = $('.projects-wrapper');
|
||||
// Initialize isotope
|
||||
$container.isotope({
|
||||
filter: '*',
|
||||
layoutMode: 'masonry',
|
||||
animationOptions: {
|
||||
duration: 750,
|
||||
easing: 'linear'
|
||||
}
|
||||
});
|
||||
},300);
|
||||
});
|
||||
|
||||
$(window).on('load', function() {
|
||||
// Filter
|
||||
//PORTFOLIO FILTER
|
||||
var $container = $('.projects-wrapper');
|
||||
var $filter = $('#filter');
|
||||
// Initialize isotope
|
||||
$container.isotope({
|
||||
filter: '*',
|
||||
layoutMode: 'masonry',
|
||||
animationOptions: {
|
||||
duration: 750,
|
||||
easing: 'linear'
|
||||
}
|
||||
});
|
||||
// Filter items when filter link is clicked
|
||||
$filter.find('a').click(function() {
|
||||
var selector = $(this).attr('data-filter');
|
||||
$filter.find('a').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
$container.isotope({
|
||||
filter: selector,
|
||||
animationOptions: {
|
||||
animationDuration: 750,
|
||||
easing: 'linear',
|
||||
queue: false,
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
/*END*/
|
||||
});
|
||||
$('.mfp-image').magnificPopup({
|
||||
type: 'image',
|
||||
closeOnContentClick: true,
|
||||
mainClass: 'mfp-fade',
|
||||
gallery: {
|
||||
enabled: true,
|
||||
navigateByImgClick: true,
|
||||
preload: [0, 1]
|
||||
// Will preload 0 - before current, and 1 after the current image
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
(function($) {
|
||||
'use strict';
|
||||
$(function() {
|
||||
if ($("#bar").length) {
|
||||
var currentChartCanvas = $("#bar").get(0).getContext("2d");
|
||||
var currentChart = new Chart(currentChartCanvas, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
datasets: [{
|
||||
label: "Revenue",
|
||||
backgroundColor: "#1ccab8",
|
||||
borderColor: "transparent",
|
||||
borderWidth: 2,
|
||||
categoryPercentage: 0.5,
|
||||
hoverBackgroundColor: "#00d8c2",
|
||||
hoverBorderColor: "transparent",
|
||||
data: [30, 39, 20, 31, 41, 25, 20, 39, 20, 31, 41, 25],
|
||||
}]
|
||||
},
|
||||
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
legend : {
|
||||
display: false,
|
||||
labels : {
|
||||
fontColor : '#50649c'
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
enabled: true,
|
||||
callbacks: {
|
||||
label: function(tooltipItems, data) {
|
||||
return data.datasets[tooltipItems.datasetIndex].label +' $ ' + tooltipItems.yLabel + 'k';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
scales: {
|
||||
xAxes: [{
|
||||
barPercentage: 0.35,
|
||||
categoryPercentage: 0.4,
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: "transparent",
|
||||
borderDash: [0],
|
||||
zeroLineColor: "transparent",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2] ,
|
||||
},
|
||||
ticks: {
|
||||
fontColor: '#a4abc5',
|
||||
beginAtZero: true,
|
||||
padding: 12,
|
||||
},
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: "#8997bd29",
|
||||
borderDash: [3],
|
||||
drawBorder: false,
|
||||
drawTicks: false,
|
||||
zeroLineColor: "#8997bd29",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2] ,
|
||||
},
|
||||
ticks: {
|
||||
fontColor: '#a4abc5',
|
||||
beginAtZero: true,
|
||||
padding: 12,
|
||||
callback: function(value) {
|
||||
if ( !(value % 10) ) {
|
||||
return '$' + value + 'k'
|
||||
}
|
||||
}
|
||||
},
|
||||
}]
|
||||
},
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
// light_datepick
|
||||
new Lightpick({
|
||||
field: document.getElementById('light_datepick'),
|
||||
inline: true,
|
||||
});
|
||||
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Project Dashboard Js
|
||||
*/
|
||||
|
||||
var picker = new Lightpick({
|
||||
field: document.getElementById('pro-start-date'),
|
||||
secondField: document.getElementById('pro-end-date'),
|
||||
singleDate: false,
|
||||
onSelect: function(start, end){
|
||||
var str = '';
|
||||
str += start ? start.format('Do MMMM YYYY') + ' to ' : '';
|
||||
str += end ? end.format('Do MMMM YYYY') : '...';
|
||||
document.getElementById('result-3').innerHTML = str;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,277 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Project Dashboard Js
|
||||
*/
|
||||
|
||||
|
||||
|
||||
//colunm-1
|
||||
|
||||
var options = {
|
||||
chart: {
|
||||
height: 340,
|
||||
type: 'bar',
|
||||
toolbar: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
endingShape: 'rounded',
|
||||
columnWidth: '30%',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 5,
|
||||
colors: ['transparent'],
|
||||
},
|
||||
colors: ["#1761fd", "#1ecab8", "#ffb822"],
|
||||
series: [{
|
||||
name: 'Total Budget',
|
||||
data: [68, 71, 65, 75, 80,]
|
||||
}, {
|
||||
name: 'Amount Used',
|
||||
data: [51, 42, 36, 61, 70,]
|
||||
},{
|
||||
name: 'Target Amount',
|
||||
data: [48, 55, 42, 60, 60,]
|
||||
},],
|
||||
xaxis: {
|
||||
categories: ['Book My World','Organic Farming', 'Transfer money', 'Trading System', 'Banking'],
|
||||
axisBorder: {
|
||||
show: true,
|
||||
color: '#f7f8f9',
|
||||
},
|
||||
axisTicks: {
|
||||
show: true,
|
||||
color: '#bec7e0',
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels:{
|
||||
formatter: (val) => {
|
||||
return "$" + val + "k"
|
||||
}
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
offsetY: -10
|
||||
},
|
||||
|
||||
fill: {
|
||||
opacity: 1
|
||||
|
||||
},
|
||||
grid: {
|
||||
row: {
|
||||
colors: ['transparent', 'transparent'], // takes an array which will be repeated on columns
|
||||
opacity: 0.2
|
||||
},
|
||||
borderColor: '#f1f3fa'
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$" + val + "k"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#budgets_chart"),
|
||||
options
|
||||
);
|
||||
|
||||
chart.render();
|
||||
|
||||
|
||||
|
||||
|
||||
var options = {
|
||||
chart: {
|
||||
height: 205,
|
||||
type: 'donut',
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
size: '80%',
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
|
||||
series: [10, 65, 25,],
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
horizontalAlign: 'center',
|
||||
verticalAlign: 'middle',
|
||||
floating: false,
|
||||
fontSize: '14px',
|
||||
offsetX: 0,
|
||||
offsetY: -13
|
||||
},
|
||||
labels: [ "Syrup", "Tablets", "Injections"],
|
||||
colors: ["#e0e7fd", "#4d79f6", "#4ac7ec"],
|
||||
|
||||
responsive: [{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
plotOptions: {
|
||||
donut: {
|
||||
customScale: 0.2
|
||||
}
|
||||
},
|
||||
chart: {
|
||||
height: 240
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
}
|
||||
}],
|
||||
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return val + " %"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#dash_medicine"),
|
||||
options
|
||||
);
|
||||
|
||||
chart.render();
|
||||
|
||||
// Todo-task
|
||||
|
||||
$(function() {
|
||||
var todoListItem = $('.todo-list');
|
||||
var todoListInput = $('.todo-list-input');
|
||||
$('.add-new-todo-btn').on("click", function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
var item = $(this).prevAll('.todo-list-input').val();
|
||||
|
||||
if (item) {
|
||||
todoListItem.append("<div class='todo-box'><i class='remove far fa-trash-alt'></i><div class='todo-task'><label class='ckbox'><input type='checkbox'/><span>" + item + "</span><i class='input-helper'></i></label></div></div>");
|
||||
todoListInput.val("");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
todoListItem.on('change', '.ckbox', function() {
|
||||
if ($(this).attr('checked')) {
|
||||
$(this).removeAttr('checked');
|
||||
} else {
|
||||
$(this).attr('checked', 'checked');
|
||||
}
|
||||
|
||||
$(this).closest(".todo-box").toggleClass('completed');
|
||||
|
||||
});
|
||||
|
||||
todoListItem.on('click', '.remove', function() {
|
||||
$(this).parent().remove();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Morris Area chart
|
||||
|
||||
$( function () {
|
||||
"use strict";
|
||||
|
||||
// Performance Report
|
||||
|
||||
var options = {
|
||||
chart: {
|
||||
type: 'radialBar',
|
||||
height: 240,
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 5,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
blur: 5,
|
||||
color: '#45404a2e',
|
||||
opacity: 0.35
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
offsetY: -10,
|
||||
startAngle: 0,
|
||||
endAngle: 270,
|
||||
hollow: {
|
||||
margin: 5,
|
||||
size: '50%',
|
||||
background: 'transparent',
|
||||
},
|
||||
track: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '18px',
|
||||
},
|
||||
value: {
|
||||
fontSize: '16px',
|
||||
color: '#50649c',
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: ['#1ecab8', '#fd3c97', '#6d81f5'],
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
series: [71, 63, 100],
|
||||
labels: ['Completed', 'Active', 'Assigned'],
|
||||
legend: {
|
||||
show: true,
|
||||
floating: true,
|
||||
position: 'left',
|
||||
offsetX: -10,
|
||||
offsetY: 0,
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
legend: {
|
||||
show: true,
|
||||
floating: true,
|
||||
position: 'left',
|
||||
offsetX: 10,
|
||||
offsetY: 0,
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#task_status"),
|
||||
options
|
||||
);
|
||||
|
||||
chart.render();
|
||||
});
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Project-task Js
|
||||
*/
|
||||
|
||||
|
||||
var options = {
|
||||
chart: {
|
||||
type: 'radialBar',
|
||||
height: 290,
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 5,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
blur: 5,
|
||||
color: '#45404a2e',
|
||||
opacity: 0.35
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
offsetY: -10,
|
||||
startAngle: 0,
|
||||
endAngle: 270,
|
||||
hollow: {
|
||||
margin: 5,
|
||||
size: '50%',
|
||||
background: 'transparent',
|
||||
},
|
||||
track: {
|
||||
show: false,
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '18px',
|
||||
},
|
||||
value: {
|
||||
fontSize: '16px',
|
||||
color: '#50649c',
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
colors: ['#1ecab8', '#fd3c97', '#6d81f5'],
|
||||
stroke: {
|
||||
lineCap: 'round'
|
||||
},
|
||||
series: [71, 63, 100],
|
||||
labels: ['Completed', 'Active', 'Assigned'],
|
||||
legend: {
|
||||
show: true,
|
||||
floating: true,
|
||||
position: 'left',
|
||||
offsetX: -10,
|
||||
offsetY: 0,
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
legend: {
|
||||
show: true,
|
||||
floating: true,
|
||||
position: 'left',
|
||||
offsetX: 10,
|
||||
offsetY: 0,
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#task_status"),
|
||||
options
|
||||
);
|
||||
|
||||
chart.render();
|
||||
@@ -0,0 +1,152 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Rangeslider Js
|
||||
*/
|
||||
|
||||
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
|
||||
var $range1 = $("#range_01");
|
||||
var min = 100;
|
||||
var max = 1000;
|
||||
var marks = [700, 900];
|
||||
|
||||
$range1.ionRangeSlider({
|
||||
skin: "modern",
|
||||
type: "single",
|
||||
min: min,
|
||||
max: max,
|
||||
from: 300,
|
||||
onStart: function(data) {
|
||||
addMarks(data.slider);
|
||||
}
|
||||
});
|
||||
|
||||
function convertToPercent(num) {
|
||||
return (num - min) / (max - min) * 100;
|
||||
}
|
||||
|
||||
function addMarks($slider) {
|
||||
var html = '';
|
||||
var left = 0;
|
||||
var left_p = "";
|
||||
var i;
|
||||
|
||||
for (i = 0; i < marks.length; i++) {
|
||||
left = convertToPercent(marks[i]);
|
||||
left_p = left + "%";
|
||||
html += '<span class="showcase__mark" style="left: ' + left_p + '">';
|
||||
html += marks[i];
|
||||
html += '</span>';
|
||||
}
|
||||
|
||||
$slider.append(html);
|
||||
}
|
||||
|
||||
$("#range_02").ionRangeSlider({
|
||||
min: 100,
|
||||
skin: "modern",
|
||||
max: 1000,
|
||||
from: 550
|
||||
});
|
||||
|
||||
$("#range_03").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
skin: "modern",
|
||||
min: 0,
|
||||
max: 1000,
|
||||
from: 200,
|
||||
to: 800,
|
||||
prefix: "$"
|
||||
});
|
||||
|
||||
$("#range_04").ionRangeSlider({
|
||||
type: "double",
|
||||
skin: "modern",
|
||||
grid: true,
|
||||
min: -1000,
|
||||
max: 1000,
|
||||
from: -500,
|
||||
to: 500
|
||||
});
|
||||
|
||||
$("#range_05").ionRangeSlider({
|
||||
type: "double",
|
||||
skin: "modern",
|
||||
grid: true,
|
||||
min: -1000,
|
||||
max: 1000,
|
||||
from: -500,
|
||||
to: 500,
|
||||
step: 250
|
||||
});
|
||||
|
||||
$("#range_06").ionRangeSlider({
|
||||
grid: true,
|
||||
skin: "modern",
|
||||
from: 3,
|
||||
values: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
|
||||
});
|
||||
|
||||
$("#range_07").ionRangeSlider({
|
||||
grid: true,
|
||||
skin: "modern",
|
||||
min: 1000,
|
||||
max: 1000000,
|
||||
from: 200000,
|
||||
step: 1000,
|
||||
prettify_enabled: true
|
||||
});
|
||||
|
||||
$("#range_08").ionRangeSlider({
|
||||
min: 100,
|
||||
skin: "modern",
|
||||
max: 1000,
|
||||
from: 550,
|
||||
disable: true
|
||||
});
|
||||
$("#range_09").ionRangeSlider({
|
||||
grid: true,
|
||||
skin: "flat",
|
||||
min: 18,
|
||||
max: 70,
|
||||
from: 30,
|
||||
prefix: "Age ",
|
||||
max_postfix: "+"
|
||||
});
|
||||
$("#range_10").ionRangeSlider({
|
||||
type: "double",
|
||||
skin: "round",
|
||||
min: 100,
|
||||
max: 200,
|
||||
from: 145,
|
||||
to: 155,
|
||||
prefix: "Weight: ",
|
||||
postfix: " million pounds",
|
||||
decorate_both: true
|
||||
});
|
||||
$("#range_11").ionRangeSlider({
|
||||
skin: "square",
|
||||
type: "single",
|
||||
grid: true,
|
||||
min: -90,
|
||||
max: 90,
|
||||
from: 0,
|
||||
postfix: "°"
|
||||
});
|
||||
$("#range_12").ionRangeSlider({
|
||||
skin: "sharp",
|
||||
type: "double",
|
||||
min: 1000,
|
||||
max: 2000,
|
||||
from: 1200,
|
||||
to: 1800,
|
||||
hide_min_max: true,
|
||||
hide_from_to: true,
|
||||
grid: true
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,125 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Rating Js
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
function ratingEnable() {
|
||||
$('#example-1to10').barrating('show', {
|
||||
theme: 'bars-1to10'
|
||||
});
|
||||
|
||||
$('#example-movie').barrating('show', {
|
||||
theme: 'bars-movie'
|
||||
});
|
||||
|
||||
$('#example-movie').barrating('set', 'Mediocre');
|
||||
|
||||
$('#example-square').barrating('show', {
|
||||
theme: 'bars-square',
|
||||
showValues: true,
|
||||
showSelectedRating: false
|
||||
});
|
||||
|
||||
$('#example-pill').barrating('show', {
|
||||
theme: 'bars-pill',
|
||||
initialRating: 'A',
|
||||
showValues: true,
|
||||
showSelectedRating: false,
|
||||
allowEmpty: true,
|
||||
emptyValue: '-- no rating selected --',
|
||||
onSelect: function(value, text) {
|
||||
alert('Selected rating: ' + value);
|
||||
}
|
||||
});
|
||||
|
||||
$('#example-reversed').barrating('show', {
|
||||
theme: 'bars-reversed',
|
||||
showSelectedRating: true,
|
||||
reverse: true
|
||||
});
|
||||
|
||||
$('#example-horizontal').barrating('show', {
|
||||
theme: 'bars-horizontal',
|
||||
reverse: true,
|
||||
hoverState: false
|
||||
});
|
||||
|
||||
$('#example-fontawesome').barrating({
|
||||
theme: 'fontawesome-stars',
|
||||
showSelectedRating: false
|
||||
});
|
||||
|
||||
$('#example-css').barrating({
|
||||
theme: 'css-stars',
|
||||
showSelectedRating: false
|
||||
});
|
||||
|
||||
|
||||
var currentRating = $('#example-fontawesome-o').data('current-rating');
|
||||
|
||||
$('.stars-example-fontawesome-o .current-rating')
|
||||
.find('span')
|
||||
.html(currentRating);
|
||||
|
||||
$('.stars-example-fontawesome-o .clear-rating').on('click', function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
$('#example-fontawesome-o')
|
||||
.barrating('clear');
|
||||
});
|
||||
|
||||
$('#example-fontawesome-o').barrating({
|
||||
theme: 'fontawesome-stars-o',
|
||||
showSelectedRating: false,
|
||||
initialRating: currentRating,
|
||||
onSelect: function(value, text) {
|
||||
if (!value) {
|
||||
$('#example-fontawesome-o')
|
||||
.barrating('clear');
|
||||
} else {
|
||||
$('.stars-example-fontawesome-o .current-rating')
|
||||
.addClass('hidden');
|
||||
|
||||
$('.stars-example-fontawesome-o .your-rating')
|
||||
.removeClass('hidden')
|
||||
.find('span')
|
||||
.html(value);
|
||||
}
|
||||
},
|
||||
onClear: function(value, text) {
|
||||
$('.stars-example-fontawesome-o')
|
||||
.find('.current-rating')
|
||||
.removeClass('hidden')
|
||||
.end()
|
||||
.find('.your-rating')
|
||||
.addClass('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function ratingDisable() {
|
||||
$('select').barrating('destroy');
|
||||
}
|
||||
|
||||
$('.rating-enable').click(function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
ratingEnable();
|
||||
|
||||
$(this).addClass('deactivated');
|
||||
$('.rating-disable').removeClass('deactivated');
|
||||
});
|
||||
|
||||
$('.rating-disable').click(function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
ratingDisable();
|
||||
|
||||
$(this).addClass('deactivated');
|
||||
$('.rating-enable').removeClass('deactivated');
|
||||
});
|
||||
|
||||
ratingEnable();
|
||||
});
|
||||
@@ -0,0 +1,12 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Responsive-table Js
|
||||
*/
|
||||
|
||||
|
||||
$(function() {
|
||||
$('.table-responsive').responsiveTable({
|
||||
addDisplayAllBtn: 'btn btn-secondary'
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,266 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Ecommerce Dashboard Js
|
||||
*/
|
||||
(function($) {
|
||||
'use strict';
|
||||
$(function() {
|
||||
if ($("#bar").length) {
|
||||
var currentChartCanvas = $("#bar").get(0).getContext("2d");
|
||||
var currentChart = new Chart(currentChartCanvas, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
datasets: [{
|
||||
label: "Revenue",
|
||||
backgroundColor: "#1ccab8",
|
||||
borderColor: "transparent",
|
||||
borderWidth: 2,
|
||||
categoryPercentage: 0.5,
|
||||
hoverBackgroundColor: "#00d8c2",
|
||||
hoverBorderColor: "transparent",
|
||||
data: [30, 39, 20, 31, 41, 25, 20, 39, 20, 31, 41, 25],
|
||||
}]
|
||||
},
|
||||
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
legend : {
|
||||
display: false,
|
||||
labels : {
|
||||
fontColor : '#50649c'
|
||||
}
|
||||
},
|
||||
tooltips: {
|
||||
enabled: true,
|
||||
callbacks: {
|
||||
label: function(tooltipItems, data) {
|
||||
return data.datasets[tooltipItems.datasetIndex].label +' $ ' + tooltipItems.yLabel + 'k';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
scales: {
|
||||
xAxes: [{
|
||||
barPercentage: 0.35,
|
||||
categoryPercentage: 0.4,
|
||||
display: true,
|
||||
gridLines: {
|
||||
color: "transparent",
|
||||
borderDash: [0],
|
||||
zeroLineColor: "transparent",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2] ,
|
||||
},
|
||||
ticks: {
|
||||
fontColor: '#a4abc5',
|
||||
beginAtZero: true,
|
||||
padding: 12,
|
||||
},
|
||||
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: "#8997bd29",
|
||||
borderDash: [3],
|
||||
drawBorder: false,
|
||||
drawTicks: false,
|
||||
zeroLineColor: "#8997bd29",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2] ,
|
||||
},
|
||||
ticks: {
|
||||
fontColor: '#a4abc5',
|
||||
beginAtZero: true,
|
||||
padding: 12,
|
||||
callback: function(value) {
|
||||
if ( !(value % 10) ) {
|
||||
return '$' + value + 'k'
|
||||
}
|
||||
}
|
||||
},
|
||||
}]
|
||||
},
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
})(jQuery);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
$('#world-map-markers').vectorMap({
|
||||
map : 'world_mill_en',
|
||||
scaleColors : ['#eff0f1', '#eff0f1'],
|
||||
normalizeFunction : 'polynomial',
|
||||
hoverOpacity : 0.7,
|
||||
hoverColor : false,
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#7474b126'
|
||||
}
|
||||
},
|
||||
markers : [
|
||||
{latLng : [55.75, 37.62],name : 'Russia'},
|
||||
{latLng : [-25.27, 133.77],name : 'Australia'},
|
||||
{latLng : [20.59, 78.96], name : 'India'},
|
||||
{latLng : [39.52, -87.12],name : 'Brazil'}
|
||||
],
|
||||
series: {
|
||||
regions: [{
|
||||
values: {
|
||||
"US": '#868ff363',
|
||||
"AU": '#868ff363',
|
||||
"BR": '#868ff363',
|
||||
"RU": '#868ff363',
|
||||
},
|
||||
attribute: 'fill'
|
||||
}]
|
||||
},
|
||||
markerStyle: {
|
||||
initial: {
|
||||
stroke: "#7474b126"
|
||||
},
|
||||
hover: {
|
||||
stroke: "rgba(112, 112, 112, 0.30)"
|
||||
}
|
||||
},
|
||||
backgroundColor : 'transparent',
|
||||
|
||||
markers: [
|
||||
{
|
||||
latLng: [37.090240, -95.712891],
|
||||
name: "USA",
|
||||
style: {
|
||||
fill: "#f93b7a"
|
||||
}
|
||||
},
|
||||
{
|
||||
latLng: [55.754093, 37.620407],
|
||||
name: "Russia",
|
||||
style: {
|
||||
fill: "#0aafff"
|
||||
}
|
||||
},
|
||||
{
|
||||
latLng: [-21.943369, 123.102198],
|
||||
name: "Australia",
|
||||
style: {
|
||||
fill: "#7551e9"
|
||||
}
|
||||
},
|
||||
{
|
||||
latLng: [-11.409874, -41.280857],
|
||||
name: "Brazil",
|
||||
style: {
|
||||
fill: "#ffc212"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
// radar
|
||||
var options = {
|
||||
chart: {
|
||||
height: 330,
|
||||
type: 'radar',
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
blur: 1,
|
||||
left: 1,
|
||||
top: 1
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
radar: {
|
||||
polygons: {
|
||||
strokeColors: '#E3EBF6',
|
||||
connectorColors: '#E3EBF6',
|
||||
fill: {
|
||||
colors: ['transparent']
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Phones',
|
||||
data: [80, 50, 30, 40, 100, 20],
|
||||
}, {
|
||||
name: 'Electronics',
|
||||
data: [20, 30, 40, 80, 20, 80],
|
||||
}, {
|
||||
name: 'Clothes',
|
||||
data: [44, 76, 78, 13, 43, 10],
|
||||
}],
|
||||
|
||||
title: {
|
||||
show: false,
|
||||
},
|
||||
stroke: {
|
||||
width: 0,
|
||||
curve: 'smooth',
|
||||
},
|
||||
fill: {
|
||||
opacity: 0.8,
|
||||
colors:['#ffb822', '#fd3c97', '#1761fd'],
|
||||
},
|
||||
markers: {
|
||||
size: 0
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
offsetX: 0,
|
||||
offsetY: -10,
|
||||
},
|
||||
labels: ['2013', '2014', '2015', '2016', '2017', '2018'],
|
||||
}
|
||||
|
||||
|
||||
var chart = new ApexCharts(
|
||||
document.querySelector("#sales-radar"),
|
||||
options
|
||||
);
|
||||
|
||||
chart.render();
|
||||
|
||||
function update() {
|
||||
|
||||
function randomSeries() {
|
||||
var arr = []
|
||||
for(var i = 0; i < 6; i++) {
|
||||
arr.push(Math.floor(Math.random() * 100))
|
||||
}
|
||||
|
||||
return arr
|
||||
}
|
||||
|
||||
chart.updateSeries([{
|
||||
name: 'Phones',
|
||||
data: randomSeries(),
|
||||
}, {
|
||||
name: 'Electronics',
|
||||
data: randomSeries(),
|
||||
}, {
|
||||
name: 'Clothes',
|
||||
data: randomSeries(),
|
||||
}])
|
||||
}
|
||||
|
||||
// light_datepick
|
||||
new Lightpick({
|
||||
field: document.getElementById('light_datepick'),
|
||||
inline: true,
|
||||
});
|
||||
@@ -0,0 +1,316 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Sweet Alert Js
|
||||
*/
|
||||
|
||||
|
||||
|
||||
!function ($) {
|
||||
"use strict";
|
||||
|
||||
var SweetAlert = function () {
|
||||
};
|
||||
|
||||
//examples
|
||||
//examples
|
||||
SweetAlert.prototype.init = function () {
|
||||
|
||||
//Basic
|
||||
$('#sa-basic').on('click', function () {
|
||||
Swal.fire('Any fool can use a computer')
|
||||
});
|
||||
|
||||
//A title with a text under
|
||||
$('#sa-title').click(function () {
|
||||
Swal.fire(
|
||||
'The Internet?',
|
||||
'That thing is still around?',
|
||||
'question'
|
||||
)
|
||||
});
|
||||
|
||||
//Success Message
|
||||
$('#sa-success').click(function () {
|
||||
Swal.fire(
|
||||
'Good job!',
|
||||
'You clicked the button!',
|
||||
'success'
|
||||
)
|
||||
});
|
||||
|
||||
//Warning Message
|
||||
|
||||
$('#sa-warning').click(function () {
|
||||
|
||||
swal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: "You won't be able to revert this!",
|
||||
type: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
cancelButtonText: 'No, cancel!',
|
||||
reverseButtons: true
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
swal.fire(
|
||||
'Deleted!',
|
||||
'Your file has been deleted.',
|
||||
'success'
|
||||
)
|
||||
} else if (
|
||||
// Read more about handling dismissals
|
||||
result.dismiss === Swal.DismissReason.cancel
|
||||
) {
|
||||
swal.fire(
|
||||
'Cancelled',
|
||||
'Your imaginary file is safe :)',
|
||||
'error'
|
||||
)
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// with footer
|
||||
$('#sa-footer').click(function () {
|
||||
Swal.fire({
|
||||
icon: 'error',
|
||||
title: 'Oops...',
|
||||
text: 'Something went wrong!',
|
||||
footer: '<a href>Why do I have this issue?</a>'
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
//Custom Position
|
||||
$('#sa-topright-success').click(function () {
|
||||
Swal.fire({
|
||||
position: 'top-end',
|
||||
icon: 'success',
|
||||
title: 'Your work has been saved',
|
||||
showConfirmButton: false,
|
||||
timer: 1500
|
||||
})
|
||||
});
|
||||
//Custom Animation
|
||||
$('#sa-custom-animation').click(function () {
|
||||
Swal.fire({
|
||||
title: 'Custom animation with Animate.css',
|
||||
showClass: {
|
||||
popup: 'animated fadeInDown faster'
|
||||
},
|
||||
hideClass: {
|
||||
popup: 'animated fadeOutUp faster'
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
//Parameter
|
||||
$('#sa-params').click(function () {
|
||||
|
||||
Swal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: "You won't be able to revert this!",
|
||||
type: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '$success',
|
||||
cancelButtonColor: '$danger',
|
||||
confirmButtonText: 'Yes, delete it!'
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
Swal.fire(
|
||||
'Deleted!',
|
||||
'Your file has been deleted.',
|
||||
'success'
|
||||
)
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
//Custom Image
|
||||
$('#sa-image').click(function () {
|
||||
Swal.fire({
|
||||
title: 'Crovex',
|
||||
text: 'Modal with a custom image.',
|
||||
imageUrl: '../assets/images/logo-sm.png',
|
||||
imageHeight: 80,
|
||||
animation: false
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
|
||||
//custom html alert
|
||||
$('#custom-html-alert').click(function () {
|
||||
Swal.fire({
|
||||
title: '<strong>HTML <u>example</u></strong>',
|
||||
type: 'info',
|
||||
html:
|
||||
'You can use <b>bold text</b>, ' +
|
||||
'<a href="//github.com">links</a> ' +
|
||||
'and other HTML tags',
|
||||
showCloseButton: true,
|
||||
showCancelButton: true,
|
||||
focusConfirm: false,
|
||||
confirmButtonText:
|
||||
'<i class="fa fa-thumbs-up"></i> Great!',
|
||||
confirmButtonAriaLabel: 'Thumbs up, great!',
|
||||
cancelButtonText:
|
||||
'<i class="fa fa-thumbs-down"></i>',
|
||||
cancelButtonAriaLabel: 'Thumbs down',
|
||||
})
|
||||
});
|
||||
|
||||
//Custom width padding
|
||||
$('#custom-padding-width-alert').click(function () {
|
||||
Swal.fire({
|
||||
title: 'Custom width, padding, background.',
|
||||
width: 600,
|
||||
padding: 100,
|
||||
background: '$card-bg url(../assets/images/pattern.png)'
|
||||
})
|
||||
});
|
||||
|
||||
//Auto Close
|
||||
$('#sa-auto-close').click(function () {
|
||||
let timerInterval
|
||||
Swal.fire({
|
||||
title: 'Auto close alert!',
|
||||
html: 'I will close in <strong></strong> seconds.',
|
||||
timer: 2000,
|
||||
onBeforeOpen: () => {
|
||||
Swal.showLoading()
|
||||
timerInterval = setInterval(() => {
|
||||
Swal.getContent().querySelector('strong')
|
||||
.textContent = Swal.getTimerLeft()
|
||||
}, 100)
|
||||
},
|
||||
onClose: () => {
|
||||
clearInterval(timerInterval)
|
||||
}
|
||||
}).then((result) => {
|
||||
if (
|
||||
// Read more about handling dismissals
|
||||
result.dismiss === Swal.DismissReason.timer
|
||||
) {
|
||||
console.log('I was closed by the timer')
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
//Ajax
|
||||
$('#ajax-alert').click(function () {
|
||||
Swal.fire({
|
||||
title: 'Submit your Github username',
|
||||
input: 'text',
|
||||
inputAttributes: {
|
||||
autocapitalize: 'off'
|
||||
},
|
||||
showCancelButton: true,
|
||||
confirmButtonText: 'Look up',
|
||||
showLoaderOnConfirm: true,
|
||||
preConfirm: (login) => {
|
||||
return fetch(`//api.github.com/users/${login}`)
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(response.statusText)
|
||||
}
|
||||
return response.json()
|
||||
})
|
||||
.catch(error => {
|
||||
Swal.showValidationMessage(
|
||||
`Request failed: ${error}`
|
||||
)
|
||||
})
|
||||
},
|
||||
allowOutsideClick: () => !Swal.isLoading()
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
title: `${result.value.login}'s avatar`,
|
||||
imageUrl: result.value.avatar_url
|
||||
})
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
//chaining modal alert
|
||||
$('#chaining-alert').click(function () {
|
||||
Swal.mixin({
|
||||
input: 'text',
|
||||
confirmButtonText: 'Next →',
|
||||
showCancelButton: true,
|
||||
progressSteps: ['1', '2', '3']
|
||||
}).queue([
|
||||
{
|
||||
title: 'Question 1',
|
||||
text: 'Chaining swal2 modals is easy'
|
||||
},
|
||||
'Question 2',
|
||||
'Question 3'
|
||||
]).then((result) => {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
title: 'All done!',
|
||||
html:
|
||||
'Your answers: <pre><code>' +
|
||||
JSON.stringify(result.value) +
|
||||
'</code></pre>',
|
||||
confirmButtonText: 'Lovely!'
|
||||
})
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
//Danger
|
||||
$('#dynamic-alert').click(function () {
|
||||
const ipAPI = 'https://api.ipify.org?format=json'
|
||||
Swal.queue([{
|
||||
title: 'Your public IP',
|
||||
confirmButtonText: 'Show my public IP',
|
||||
text:
|
||||
'Your public IP will be received ' +
|
||||
'via AJAX request',
|
||||
showLoaderOnConfirm: true,
|
||||
preConfirm: () => {
|
||||
return fetch(ipAPI)
|
||||
.then(response => response.json())
|
||||
.then(data => Swal.insertQueueStep(data.ip))
|
||||
.catch(() => {
|
||||
Swal.insertQueueStep({
|
||||
type: 'error',
|
||||
title: 'Unable to get your public IP'
|
||||
})
|
||||
})
|
||||
}
|
||||
}])
|
||||
});
|
||||
|
||||
$('#sa-mixin').click(function () {
|
||||
const Toast = Swal.mixin({
|
||||
toast: true,
|
||||
position: 'top-end',
|
||||
showConfirmButton: false,
|
||||
timer: 3000,
|
||||
timerProgressBar: true,
|
||||
onOpen: (toast) => {
|
||||
toast.addEventListener('mouseenter', Swal.stopTimer)
|
||||
toast.addEventListener('mouseleave', Swal.resumeTimer)
|
||||
}
|
||||
})
|
||||
|
||||
Toast.fire({
|
||||
icon: 'success',
|
||||
title: 'Signed in successfully'
|
||||
})
|
||||
});
|
||||
},
|
||||
//init
|
||||
$.SweetAlert = new SweetAlert, $.SweetAlert.Constructor = SweetAlert
|
||||
}(window.jQuery),
|
||||
|
||||
//initializing
|
||||
function ($) {
|
||||
"use strict";
|
||||
$.SweetAlert.init()
|
||||
}(window.jQuery);
|
||||
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Tabledit Js
|
||||
*/
|
||||
|
||||
|
||||
|
||||
$(function() {
|
||||
|
||||
$('#makeEditable').SetEditable({ $addButton: $('#but_add')});
|
||||
|
||||
$('#submit_data').on('click',function() {
|
||||
var td = TableToCSV('makeEditable', ',');
|
||||
console.log(td);
|
||||
var ar_lines = td.split("\n");
|
||||
var each_data_value = [];
|
||||
for(i=0;i<ar_lines.length;i++)
|
||||
{
|
||||
each_data_value[i] = ar_lines[i].split(",");
|
||||
}
|
||||
|
||||
for(i=0;i<each_data_value.length;i++)
|
||||
{
|
||||
if(each_data_value[i]>1)
|
||||
{
|
||||
console.log(each_data_value[i][2]);
|
||||
console.log(each_data_value[i].length);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
$('#mainTable').editableTableWidget().numericInputExample().find('td:first').focus();
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Timeout Js
|
||||
*/
|
||||
|
||||
|
||||
$.sessionTimeout({
|
||||
message: 'Your session will be locked in 30 seconds.',
|
||||
keepAliveUrl: '../pages/pages-starter.html',
|
||||
logoutButton:'Logout',
|
||||
logoutUrl: '../authentication/auth-login.html',
|
||||
redirUrl: '../authentication/auth-lock-screen.html',
|
||||
warnAfter: 3000,
|
||||
redirAfter: 30000,
|
||||
countdownBar: true
|
||||
});
|
||||
@@ -0,0 +1,22 @@
|
||||
/*
|
||||
Template: Crovex - Bootstrap 4 Admin Dashboard
|
||||
Author: Mannatthemes
|
||||
File: Treeview
|
||||
*/
|
||||
|
||||
|
||||
|
||||
$(function () {
|
||||
"use strict";
|
||||
|
||||
// Default
|
||||
$('#jstree').jstree();
|
||||
|
||||
//Check Box
|
||||
$('#jstree-checkbox').jstree({
|
||||
"checkbox" : {
|
||||
"keep_selected_style" : false
|
||||
},
|
||||
"plugins" : [ "checkbox" ]
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
/**
|
||||
* Theme: Crovex - Responsive Bootstrap 4 Admin Dashboard
|
||||
* Author: Mannatthemes
|
||||
* Validation Js
|
||||
*/
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('.form-parsley').parsley();
|
||||
});
|
||||
Reference in New Issue
Block a user