Primer Commit
This commit is contained in:
LuisAngelSalinasl
+251
@@ -0,0 +1,251 @@
|
||||
/*
|
||||
Template Name: Adminbite Admin
|
||||
Author: Wrappixel
|
||||
Email: niravjoshi87@gmail.com
|
||||
File: js
|
||||
*/
|
||||
$(function() {
|
||||
'use strict';
|
||||
// ==============================================================
|
||||
// Product Sales
|
||||
// ==============================================================
|
||||
Morris.Area({
|
||||
element: 'product-sales',
|
||||
data: [
|
||||
{
|
||||
period: '2012',
|
||||
iphone: 50,
|
||||
ipad: 80,
|
||||
itouch: 20
|
||||
},
|
||||
{
|
||||
period: '2013',
|
||||
iphone: 130,
|
||||
ipad: 100,
|
||||
itouch: 80
|
||||
},
|
||||
{
|
||||
period: '2014',
|
||||
iphone: 80,
|
||||
ipad: 60,
|
||||
itouch: 70
|
||||
},
|
||||
{
|
||||
period: '2015',
|
||||
iphone: 70,
|
||||
ipad: 200,
|
||||
itouch: 140
|
||||
},
|
||||
{
|
||||
period: '2016',
|
||||
iphone: 180,
|
||||
ipad: 150,
|
||||
itouch: 140
|
||||
},
|
||||
{
|
||||
period: '2017',
|
||||
iphone: 105,
|
||||
ipad: 100,
|
||||
itouch: 80
|
||||
},
|
||||
{
|
||||
period: '2018',
|
||||
iphone: 250,
|
||||
ipad: 150,
|
||||
itouch: 200
|
||||
}
|
||||
],
|
||||
xkey: 'period',
|
||||
ykeys: ['iphone', 'ipad'],
|
||||
labels: ['iPhone', 'iPad'],
|
||||
pointSize: 2,
|
||||
fillOpacity: 0,
|
||||
pointStrokeColors: ['#ccc', '#4798e8', '#9675ce'],
|
||||
behaveLikeLine: true,
|
||||
gridLineColor: '#e0e0e0',
|
||||
lineWidth: 2,
|
||||
hideHover: 'auto',
|
||||
lineColors: ['#ccc', '#4798e8', '#9675ce'],
|
||||
resize: true
|
||||
});
|
||||
// ==============================================================
|
||||
// City weather
|
||||
// ==============================================================
|
||||
var chart = new Chartist.Line(
|
||||
'#ct-weather',
|
||||
{
|
||||
labels: ['1PM', '2PM', '3PM', '4PM', '5PM', '6PM'],
|
||||
series: [[2, 0, 5, 2, 5, 2]]
|
||||
},
|
||||
{
|
||||
showArea: true,
|
||||
showPoint: false,
|
||||
|
||||
chartPadding: {
|
||||
left: -35
|
||||
},
|
||||
axisX: {
|
||||
showLabel: true,
|
||||
showGrid: false
|
||||
},
|
||||
axisY: {
|
||||
showLabel: false,
|
||||
showGrid: true
|
||||
},
|
||||
fullWidth: true
|
||||
}
|
||||
);
|
||||
// ==============================================================
|
||||
// Ct Barchart
|
||||
// ==============================================================
|
||||
new Chartist.Bar(
|
||||
'#weeksales-bar',
|
||||
{
|
||||
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
||||
series: [[50, 40, 30, 70, 50, 20, 30]]
|
||||
},
|
||||
{
|
||||
axisX: {
|
||||
showLabel: false,
|
||||
showGrid: false
|
||||
},
|
||||
|
||||
chartPadding: {
|
||||
top: 15,
|
||||
left: -25
|
||||
},
|
||||
axisX: {
|
||||
showLabel: true,
|
||||
showGrid: false
|
||||
},
|
||||
axisY: {
|
||||
showLabel: false,
|
||||
showGrid: false
|
||||
},
|
||||
fullWidth: true,
|
||||
plugins: [Chartist.plugins.tooltip()]
|
||||
}
|
||||
);
|
||||
|
||||
// ==============================================================
|
||||
// Our Income
|
||||
// ==============================================================
|
||||
var chart = c3.generate({
|
||||
bindto: '#income',
|
||||
data: {
|
||||
columns: [
|
||||
['Growth Income', 100, 200, 300, 300, 400, 200],
|
||||
['Net Income', 130, 100, 440, 200, 320, 100]
|
||||
],
|
||||
type: 'bar'
|
||||
},
|
||||
bar: {
|
||||
space: 0.2,
|
||||
// or
|
||||
width: 15 // this makes bar width 100px
|
||||
},
|
||||
axis: {
|
||||
y: {
|
||||
tick: {
|
||||
count: 3,
|
||||
outer: false
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
hide: true
|
||||
//or hide: 'data1'
|
||||
//or hide: ['data1', 'data2']
|
||||
},
|
||||
grid: {
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
size: {
|
||||
height: 270
|
||||
},
|
||||
color: {
|
||||
pattern: ['#4798e8', '#ccc']
|
||||
}
|
||||
});
|
||||
|
||||
// ==============================================================
|
||||
// Sales Different
|
||||
// ==============================================================
|
||||
|
||||
var chart = c3.generate({
|
||||
bindto: '#sales',
|
||||
data: {
|
||||
columns: [['One+', 50], ['T', 60], ['Samsung', 10]],
|
||||
|
||||
type: 'donut',
|
||||
onclick: function(d, i) {
|
||||
console.log('onclick', d, i);
|
||||
},
|
||||
onmouseover: function(d, i) {
|
||||
console.log('onmouseover', d, i);
|
||||
},
|
||||
onmouseout: function(d, i) {
|
||||
console.log('onmouseout', d, i);
|
||||
}
|
||||
},
|
||||
donut: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
title: '',
|
||||
width: 18
|
||||
},
|
||||
size: {
|
||||
height: 150
|
||||
},
|
||||
legend: {
|
||||
hide: true
|
||||
//or hide: 'data1'
|
||||
//or hide: ['data1', 'data2']
|
||||
},
|
||||
color: {
|
||||
pattern: ['#ffffff', '#4798e8', '#24d2b5', '#20aee3']
|
||||
}
|
||||
});
|
||||
// ==============================================================
|
||||
// Sales Prediction
|
||||
// ==============================================================
|
||||
|
||||
var chart = c3.generate({
|
||||
bindto: '#prediction',
|
||||
data: {
|
||||
columns: [['data', 91.4]],
|
||||
type: 'gauge',
|
||||
onclick: function(d, i) {
|
||||
console.log('onclick', d, i);
|
||||
},
|
||||
onmouseover: function(d, i) {
|
||||
console.log('onmouseover', d, i);
|
||||
},
|
||||
onmouseout: function(d, i) {
|
||||
console.log('onmouseout', d, i);
|
||||
}
|
||||
},
|
||||
|
||||
color: {
|
||||
pattern: ['#20aee3', '#20aee3', '#20aee3', '#24d2b5'], // the three color levels for the percentage values.
|
||||
threshold: {
|
||||
// unit: 'value', // percentage is default
|
||||
// max: 200, // 100 is default
|
||||
values: [30, 60, 90, 100]
|
||||
}
|
||||
},
|
||||
gauge: {
|
||||
width: 22
|
||||
},
|
||||
size: {
|
||||
height: 120,
|
||||
width: 150
|
||||
}
|
||||
});
|
||||
});
|
||||
+239
@@ -0,0 +1,239 @@
|
||||
/*
|
||||
Template Name: Adminbite Admin
|
||||
Author: Wrappixel
|
||||
Email: niravjoshi87@gmail.com
|
||||
File: js
|
||||
*/
|
||||
$(function() {
|
||||
'use strict';
|
||||
|
||||
// ==============================================================
|
||||
// Our Visitor
|
||||
// ==============================================================
|
||||
|
||||
var chart = c3.generate({
|
||||
bindto: '#visitor',
|
||||
data: {
|
||||
columns: [['Desktop', 60], ['Tablet', 12], ['Mobile', 28]],
|
||||
|
||||
type: 'donut',
|
||||
onclick: function(d, i) {
|
||||
console.log('onclick', d, i);
|
||||
},
|
||||
onmouseover: function(d, i) {
|
||||
console.log('onmouseover', d, i);
|
||||
},
|
||||
onmouseout: function(d, i) {
|
||||
console.log('onmouseout', d, i);
|
||||
}
|
||||
},
|
||||
donut: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
title: 'Visits',
|
||||
width: 25
|
||||
},
|
||||
|
||||
legend: {
|
||||
hide: true
|
||||
//or hide: 'data1'
|
||||
//or hide: ['data1', 'data2']
|
||||
},
|
||||
color: {
|
||||
pattern: ['#4798e8', '#ff7676', '#f6f6f6']
|
||||
}
|
||||
});
|
||||
// ==============================================================
|
||||
// Our Visitor
|
||||
// ==============================================================
|
||||
var sparklineLogin = function() {
|
||||
$('#ravenue').sparkline([6, 10, 9, 11, 9, 10, 12], {
|
||||
type: 'bar',
|
||||
height: '55',
|
||||
barWidth: '4',
|
||||
width: '100%',
|
||||
resize: true,
|
||||
barSpacing: '8',
|
||||
barColor: '#16baf0'
|
||||
});
|
||||
$('#active-users').sparkline(
|
||||
[6, 10, 9, 11, 9, 10, 12, 10, 9, 11, 9, 10, 12, 10, 9, 11, 9, 10, 12],
|
||||
{
|
||||
type: 'bar',
|
||||
height: '60',
|
||||
barWidth: '4',
|
||||
width: '100%',
|
||||
resize: true,
|
||||
barSpacing: '8',
|
||||
barColor: '#ff7676'
|
||||
}
|
||||
);
|
||||
};
|
||||
var sparkResize;
|
||||
|
||||
$(window).resize(function(e) {
|
||||
clearTimeout(sparkResize);
|
||||
sparkResize = setTimeout(sparklineLogin, 500);
|
||||
});
|
||||
sparklineLogin();
|
||||
|
||||
// ==============================================================
|
||||
// Bounce rate
|
||||
// ==============================================================
|
||||
var ctx = document.getElementById('balance');
|
||||
var salesChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['2012', '2013', '2014', '2015', '2016', '2017'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Balance $',
|
||||
data: [12, 19, 3, 5, 2, 3],
|
||||
backgroundColor: ['transparent'],
|
||||
borderColor: ['#bbb790'],
|
||||
borderWidth: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
elements: { point: { radius: 2 } },
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
},
|
||||
ticks: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
},
|
||||
ticks: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
labels: {
|
||||
fontColor: 'rgb(255, 99, 132)'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// ==============================================================
|
||||
// Foo1 total visit
|
||||
// ==============================================================
|
||||
var opts = {
|
||||
angle: 0, // The span of the gauge arc
|
||||
lineWidth: 0.32, // The line thickness
|
||||
radiusScale: 1, // Relative radius
|
||||
pointer: {
|
||||
length: 0.44, // // Relative to gauge radius
|
||||
strokeWidth: 0.04, // The thickness
|
||||
color: '#000000' // Fill color
|
||||
},
|
||||
limitMax: false, // If false, the max value of the gauge will be updated if value surpass max
|
||||
limitMin: false, // If true, the min value of the gauge will be fixed unless you set it manually
|
||||
colorStart: '#24d2b5', // Colors
|
||||
colorStop: '#24d2b5', // just experiment with them
|
||||
strokeColor: '#E0E0E0', // to see which ones work best for you
|
||||
generateGradient: true,
|
||||
|
||||
highDpiSupport: true // High resolution support
|
||||
};
|
||||
var target = document.getElementById('foo'); // your canvas element
|
||||
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
|
||||
gauge.maxValue = 3000; // set max gauge value
|
||||
gauge.setMinValue(0); // Prefer setter over gauge.minValue = 0
|
||||
gauge.animationSpeed = 45; // set animation speed (32 is default value)
|
||||
gauge.set(1850); // set actual value
|
||||
// ==============================================================
|
||||
// world map
|
||||
// ==============================================================
|
||||
jQuery('#visitfromworld').vectorMap({
|
||||
map: 'world_mill_en',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#000',
|
||||
borderOpacity: 0,
|
||||
borderWidth: 0,
|
||||
zoomOnScroll: false,
|
||||
color: '#93d5ed',
|
||||
regionStyle: {
|
||||
initial: {
|
||||
fill: '#bce2fb',
|
||||
'stroke-width': 1,
|
||||
stroke: '#fff'
|
||||
}
|
||||
},
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 5,
|
||||
fill: '#93d5ed',
|
||||
'fill-opacity': 1,
|
||||
stroke: '#93d5ed',
|
||||
'stroke-width': 1,
|
||||
'stroke-opacity': 1
|
||||
}
|
||||
},
|
||||
enableZoom: true,
|
||||
hoverColor: '#79e580',
|
||||
markers: [
|
||||
{
|
||||
latLng: [21.0, 78.0],
|
||||
name: 'India : 9347',
|
||||
style: { fill: '#2961ff' }
|
||||
},
|
||||
{
|
||||
latLng: [-33.0, 151.0],
|
||||
name: 'Australia : 250',
|
||||
style: { fill: '#ff821c' }
|
||||
},
|
||||
{
|
||||
latLng: [36.77, -119.41],
|
||||
name: 'USA : 250',
|
||||
style: { fill: '#40c4ff' }
|
||||
},
|
||||
{
|
||||
latLng: [55.37, -3.41],
|
||||
name: 'UK : 250',
|
||||
style: { fill: '#398bf7' }
|
||||
},
|
||||
{
|
||||
latLng: [25.2, 55.27],
|
||||
name: 'UAE : 250',
|
||||
style: { fill: '#6fc826' }
|
||||
}
|
||||
],
|
||||
hoverOpacity: null,
|
||||
normalizeFunction: 'linear',
|
||||
scaleColors: ['#93d5ed', '#93d5ee'],
|
||||
selectedColor: '#c9dfaf',
|
||||
selectedRegions: [],
|
||||
showTooltip: true,
|
||||
onRegionClick: function(element, code, region) {
|
||||
var message =
|
||||
'You clicked "' +
|
||||
region +
|
||||
'" which has the code: ' +
|
||||
code.toUpperCase();
|
||||
alert(message);
|
||||
}
|
||||
});
|
||||
$('#file_export').DataTable({
|
||||
dom: 'Bfrtip',
|
||||
buttons: ['csv', 'excel']
|
||||
});
|
||||
$(
|
||||
'.buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel'
|
||||
).addClass('btn btn-info mr-1 ');
|
||||
});
|
||||
+129
@@ -0,0 +1,129 @@
|
||||
/*
|
||||
Template Name: Material Admin
|
||||
Author: Wrappixel
|
||||
Email: niravjoshi87@gmail.com
|
||||
File: js
|
||||
*/
|
||||
$(function() {
|
||||
'use strict';
|
||||
// ==============================================================
|
||||
// Last month earning
|
||||
// ==============================================================
|
||||
var sparklineLogin = function() {
|
||||
$('.bandwidth').sparkline(
|
||||
[4, 5, 0, 10, 9, 12, 4, 9, 4, 5, 3, 10, 9, 12, 10, 9, 12, 4, 9],
|
||||
{
|
||||
type: 'bar',
|
||||
width: '100%',
|
||||
height: '70',
|
||||
barWidth: '2',
|
||||
resize: true,
|
||||
barSpacing: '6',
|
||||
barColor: 'rgba(255, 255, 255, 0.3)'
|
||||
}
|
||||
);
|
||||
$('.spark-count').sparkline(
|
||||
[4, 5, 0, 10, 9, 12, 4, 9, 4, 5, 3, 10, 9, 12, 10, 9, 12, 4, 9],
|
||||
{
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '70',
|
||||
barWidth: '2',
|
||||
resize: true,
|
||||
fillColor: 'transparent',
|
||||
lineColor: 'rgba(255, 255, 255, 0.6)'
|
||||
}
|
||||
);
|
||||
};
|
||||
var sparkResize;
|
||||
|
||||
$(window).resize(function(e) {
|
||||
clearTimeout(sparkResize);
|
||||
sparkResize = setTimeout(sparklineLogin, 500);
|
||||
});
|
||||
sparklineLogin();
|
||||
|
||||
// ==============================================================
|
||||
// Our Visitor
|
||||
// ==============================================================
|
||||
|
||||
var chart = c3.generate({
|
||||
bindto: '#visitor',
|
||||
data: {
|
||||
columns: [['Iphone', 60], ['Samsung', 12], ['One+', 28]],
|
||||
|
||||
type: 'donut',
|
||||
onclick: function(d, i) {
|
||||
console.log('onclick', d, i);
|
||||
},
|
||||
onmouseover: function(d, i) {
|
||||
console.log('onmouseover', d, i);
|
||||
},
|
||||
onmouseout: function(d, i) {
|
||||
console.log('onmouseout', d, i);
|
||||
}
|
||||
},
|
||||
donut: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
title: 'Sales',
|
||||
width: 20
|
||||
},
|
||||
|
||||
legend: {
|
||||
hide: true
|
||||
//or hide: 'data1'
|
||||
//or hide: ['data1', 'data2']
|
||||
},
|
||||
color: {
|
||||
pattern: ['#4798e8', '#01c0c8', '#f6f6f6']
|
||||
}
|
||||
});
|
||||
// ==============================================================
|
||||
// Sales income
|
||||
// ==============================================================
|
||||
var chart = c3.generate({
|
||||
bindto: '#income',
|
||||
data: {
|
||||
columns: [
|
||||
['Growth Income', 250, 200, 100, 250, 300],
|
||||
['Net Income', 190, 100, 140, 200, 190]
|
||||
],
|
||||
type: 'bar'
|
||||
},
|
||||
bar: {
|
||||
space: 0.2,
|
||||
// or
|
||||
width: 15 // this makes bar width 100px
|
||||
},
|
||||
axis: {
|
||||
y: {
|
||||
tick: {
|
||||
count: 4,
|
||||
|
||||
outer: false
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
hide: true
|
||||
//or hide: 'data1'
|
||||
//or hide: ['data1', 'data2']
|
||||
},
|
||||
grid: {
|
||||
x: {
|
||||
show: false
|
||||
},
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
size: {
|
||||
height: 300
|
||||
},
|
||||
color: {
|
||||
pattern: ['#4798e8', '#01c0c8']
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user