added admin interface
This commit is contained in:
kicap1992
206
admin/assets/js/pages/blog.js
Normal file
206
admin/assets/js/pages/blog.js
Normal file
@ -0,0 +1,206 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
initDonutChart();
|
||||
|
||||
var options;
|
||||
// Categories Statistics
|
||||
var dataMultiple = {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
series: [{
|
||||
name: 'series-WebDesign',
|
||||
data: [200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
|
||||
}, {
|
||||
name: 'series-Lifestyle',
|
||||
data: [89, 350, 360, 380, 315, 425, 466, 502, 520, 629, 725, 402],
|
||||
}, {
|
||||
name: 'series-Sports',
|
||||
data: [159, 235, 305, 380, 379, 477, 450, 280, 530, 680, 699, 902],
|
||||
}, {
|
||||
name: 'series-News',
|
||||
data: [173, 523, 360, 159, 358, 416, 431, 520, 545, 249, 700, 945],
|
||||
}]
|
||||
};
|
||||
options = {
|
||||
lineSmooth: false,
|
||||
height: "300px",
|
||||
low: 0,
|
||||
high: 'auto',
|
||||
series: {
|
||||
'series-WebDesign': {
|
||||
showPoint: true,
|
||||
},
|
||||
},
|
||||
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: false
|
||||
},
|
||||
|
||||
plugins: [
|
||||
Chartist.plugins.legend({
|
||||
legendNames: ['WebDesign', 'Lifestyle', 'Sports', 'News']
|
||||
})
|
||||
]
|
||||
};
|
||||
new Chartist.Line('#Categories_Statistics', dataMultiple, options);
|
||||
|
||||
});
|
||||
|
||||
|
||||
function initDonutChart() {
|
||||
Morris.Donut({
|
||||
element: 'donut_chart',
|
||||
data: [{
|
||||
label: 'Tablet',
|
||||
value: 15
|
||||
}, {
|
||||
label: 'Desktops',
|
||||
value: 45
|
||||
}, {
|
||||
label: 'Mobile',
|
||||
value: 40
|
||||
}
|
||||
],
|
||||
colors: ['#f15a24', '#f7931e', '#ffb83b'],
|
||||
formatter: function(y) {
|
||||
return y + '%'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*VectorMap Init*/
|
||||
$(function() {
|
||||
"use strict";
|
||||
var mapData = {
|
||||
"US": 298,
|
||||
"SA": 200,
|
||||
"AU": 760,
|
||||
"IN": 2000000,
|
||||
"GB": 120,
|
||||
};
|
||||
|
||||
if( $('#world-map-markers').length > 0 ){
|
||||
$('#world-map-markers').vectorMap(
|
||||
{
|
||||
map: 'world_mill_en',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#fff',
|
||||
borderOpacity: 0.25,
|
||||
borderWidth: 0,
|
||||
color: '#e6e6e6',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#eaeaea'
|
||||
}
|
||||
},
|
||||
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 5,
|
||||
'fill': '#fff',
|
||||
'fill-opacity':1,
|
||||
'stroke': '#000',
|
||||
'stroke-width' : 1,
|
||||
'stroke-opacity': 0.4
|
||||
},
|
||||
},
|
||||
|
||||
markers : [{
|
||||
latLng : [21.00, 78.00],
|
||||
name : 'INDIA : 350'
|
||||
|
||||
},
|
||||
{
|
||||
latLng : [-33.00, 151.00],
|
||||
name : 'Australia : 250'
|
||||
|
||||
},
|
||||
{
|
||||
latLng : [36.77, -119.41],
|
||||
name : 'USA : 250'
|
||||
|
||||
},
|
||||
{
|
||||
latLng : [55.37, -3.41],
|
||||
name : 'UK : 250'
|
||||
|
||||
},
|
||||
{
|
||||
latLng : [25.20, 55.27],
|
||||
name : 'UAE : 250'
|
||||
|
||||
}],
|
||||
|
||||
series: {
|
||||
regions: [{
|
||||
values: {
|
||||
"US": '#49c5b6',
|
||||
"SA": '#667add',
|
||||
"AU": '#50d38a',
|
||||
"IN": '#60bafd',
|
||||
"GB": '#ff758e',
|
||||
},
|
||||
attribute: 'fill'
|
||||
}]
|
||||
},
|
||||
hoverOpacity: null,
|
||||
normalizeFunction: 'linear',
|
||||
zoomOnScroll: false,
|
||||
scaleColors: ['#000000', '#000000'],
|
||||
selectedColor: '#000000',
|
||||
selectedRegions: [],
|
||||
enableZoom: false,
|
||||
hoverColor: '#fff',
|
||||
});
|
||||
}
|
||||
|
||||
if( $('#india').length > 0 ){
|
||||
$('#india').vectorMap({
|
||||
map : 'in_mill',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#f4f4f4'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if( $('#usa').length > 0 ){
|
||||
$('#usa').vectorMap({
|
||||
map : 'us_aea_en',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#f4f4f4'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if( $('#australia').length > 0 ){
|
||||
$('#australia').vectorMap({
|
||||
map : 'au_mill',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#f4f4f4'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if( $('#uk').length > 0 ){
|
||||
$('#uk').vectorMap({
|
||||
map : 'uk_mill_en',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#f4f4f4'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
90
admin/assets/js/pages/calendar.js
Normal file
90
admin/assets/js/pages/calendar.js
Normal file
@ -0,0 +1,90 @@
|
||||
"use strict";
|
||||
$('#calendar').fullCalendar({
|
||||
header: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'month,agendaWeek,agendaDay,listWeek'
|
||||
},
|
||||
defaultDate: '2018-07-12',
|
||||
editable: true,
|
||||
droppable: true, // this allows things to be dropped onto the calendar
|
||||
drop: function() {
|
||||
// is the "remove after drop" checkbox checked?
|
||||
if ($('#drop-remove').is(':checked')) {
|
||||
// if so, remove the element from the "Draggable Events" list
|
||||
$(this).remove();
|
||||
}
|
||||
},
|
||||
eventLimit: true, // allow "more" link when too many events
|
||||
events: [
|
||||
{
|
||||
title: 'All Day Event',
|
||||
start: '2018-07-01',
|
||||
className: 'bg-info',
|
||||
|
||||
},
|
||||
{
|
||||
title: 'Long Event',
|
||||
start: '2018-07-07',
|
||||
end: '2018-07-10',
|
||||
className: 'bg-danger'
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: '2018-08-09T16:00:00',
|
||||
className: 'bg-dark'
|
||||
},
|
||||
{
|
||||
id: 999,
|
||||
title: 'Repeating Event',
|
||||
start: '2018-06-16T16:00:00',
|
||||
className: 'bg-success'
|
||||
},
|
||||
{
|
||||
title: 'Conference',
|
||||
start: '2018-08-11',
|
||||
end: '2018-08-14',
|
||||
className: 'bg-primary'
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: '2018-08-12T10:30:00',
|
||||
end: '2018-08-12 T12:30:00',
|
||||
className: 'bg-warning'
|
||||
},
|
||||
{
|
||||
title: 'Lunch',
|
||||
start: '2018-08-12T12:00:00',
|
||||
className: 'bg-dark'
|
||||
},
|
||||
{
|
||||
title: 'Meeting',
|
||||
start: '2018-08-12T14:30:00',
|
||||
className: 'bg-secondary'
|
||||
},
|
||||
{
|
||||
title: 'Happy Hour',
|
||||
start: '2018-07-12T17:30:00',
|
||||
className: 'bg-dark'
|
||||
},
|
||||
{
|
||||
title: 'Dinner',
|
||||
start: '2018-06-12T20:00:00',
|
||||
className: 'bg-warning'
|
||||
},
|
||||
{
|
||||
title: 'Birthday Party',
|
||||
start: '2018-08-13T07:00:00',
|
||||
className: 'bg-success'
|
||||
},
|
||||
{
|
||||
title: 'Click for Google',
|
||||
url: 'http://google.com/',
|
||||
start: '2018-08-28',
|
||||
className: 'bg-primary'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
613
admin/assets/js/pages/chart/c3.js
Normal file
613
admin/assets/js/pages/chart/c3.js
Normal file
@ -0,0 +1,613 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-employment', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 2, 8, 6, 7, 14, 11],
|
||||
['data2', 5, 15, 11, 15, 21, 25],
|
||||
['data3', 17, 18, 21, 20, 30, 29]
|
||||
],
|
||||
type: 'line', // default type of chart
|
||||
colors: {
|
||||
'data1': hexabit.colors["orange"],
|
||||
'data2': hexabit.colors["blue"],
|
||||
'data3': hexabit.colors["green"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'Development',
|
||||
'data2': 'Marketing',
|
||||
'data3': 'Sales'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
// name of each category
|
||||
categories: ['2013', '2014', '2015', '2016', '2017', '2018']
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-temperature', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
|
||||
['data2', 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
|
||||
],
|
||||
labels: true,
|
||||
type: 'line', // default type of chart
|
||||
colors: {
|
||||
'data1': hexabit.colors["blue"],
|
||||
'data2': hexabit.colors["green"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'Tokyo',
|
||||
'data2': 'London'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
// name of each category
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-area', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 11, 8, 15, 18, 19, 17],
|
||||
['data2', 7, 7, 5, 7, 9, 12]
|
||||
],
|
||||
type: 'area', // default type of chart
|
||||
colors: {
|
||||
'data1': hexabit.colors["blue"],
|
||||
'data2': hexabit.colors["pink"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'Maximum',
|
||||
'data2': 'Minimum'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
// name of each category
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-area-spline', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 11, 8, 15, 18, 19, 17],
|
||||
['data2', 7, 7, 5, 7, 9, 12]
|
||||
],
|
||||
type: 'area-spline', // default type of chart
|
||||
colors: {
|
||||
'data1': hexabit.colors["blue"],
|
||||
'data2': hexabit.colors["pink"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'Maximum',
|
||||
'data2': 'Minimum'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
// name of each category
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-area-spline-sracked', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 11, 8, 15, 18, 19, 17],
|
||||
['data2', 7, 7, 5, 7, 9, 12]
|
||||
],
|
||||
type: 'area-spline', // default type of chart
|
||||
groups: [
|
||||
[ 'data1', 'data2']
|
||||
],
|
||||
colors: {
|
||||
'data1': hexabit.colors["blue"],
|
||||
'data2': hexabit.colors["pink"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'Maximum',
|
||||
'data2': 'Minimum'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
// name of each category
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-spline', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6],
|
||||
['data2', 0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
|
||||
],
|
||||
labels: true,
|
||||
type: 'spline', // default type of chart
|
||||
colors: {
|
||||
'data1': hexabit.colors["blue"],
|
||||
'data2': hexabit.colors["green"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'Hestavollane',
|
||||
'data2': 'Vik'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
// name of each category
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-spline-rotated', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 11, 8, 15, 18, 19, 17],
|
||||
['data2', 7, 7, 5, 7, 9, 12]
|
||||
],
|
||||
type: 'spline', // default type of chart
|
||||
colors: {
|
||||
'data1': hexabit.colors["blue"],
|
||||
'data2': hexabit.colors["pink"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'Maximum',
|
||||
'data2': 'Minimum'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
// name of each category
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
},
|
||||
rotated: true,
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-step', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 11, 8, 15, 18, 19, 17],
|
||||
['data2', 7, 7, 5, 7, 9, 12]
|
||||
],
|
||||
type: 'step', // default type of chart
|
||||
colors: {
|
||||
'data1': hexabit.colors["blue"],
|
||||
'data2': hexabit.colors["pink"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'Maximum',
|
||||
'data2': 'Minimum'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
// name of each category
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-area-step', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 11, 8, 15, 18, 19, 17],
|
||||
['data2', 7, 7, 5, 7, 9, 12]
|
||||
],
|
||||
type: 'area-step', // default type of chart
|
||||
colors: {
|
||||
'data1': hexabit.colors["blue"],
|
||||
'data2': hexabit.colors["pink"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'Maximum',
|
||||
'data2': 'Minimum'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
// name of each category
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-bar', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 11, 8, 15, 18, 19, 17],
|
||||
['data2', 7, 7, 5, 7, 9, 12]
|
||||
],
|
||||
type: 'bar', // default type of chart
|
||||
colors: {
|
||||
'data1': hexabit.colors["blue"],
|
||||
'data2': hexabit.colors["pink"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'Maximum',
|
||||
'data2': 'Minimum'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
// name of each category
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
},
|
||||
},
|
||||
bar: {
|
||||
width: 16
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-bar-rotated', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 11, 8, 15, 18, 19, 17],
|
||||
['data2', 7, 7, 5, 7, 9, 12]
|
||||
],
|
||||
type: 'bar', // default type of chart
|
||||
colors: {
|
||||
'data1': hexabit.colors["blue"],
|
||||
'data2': hexabit.colors["pink"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'Maximum',
|
||||
'data2': 'Minimum'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
// name of each category
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
},
|
||||
rotated: true,
|
||||
},
|
||||
bar: {
|
||||
width: 16
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-bar-stacked', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 11, 8, 15, 18, 19, 17],
|
||||
['data2', 7, 7, 5, 7, 9, 12]
|
||||
],
|
||||
type: 'bar', // default type of chart
|
||||
groups: [
|
||||
[ 'data1', 'data2']
|
||||
],
|
||||
colors: {
|
||||
'data1': hexabit.colors["blue"],
|
||||
'data2': hexabit.colors["pink"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'Maximum',
|
||||
'data2': 'Minimum'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
// name of each category
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
},
|
||||
},
|
||||
bar: {
|
||||
width: 16
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-pie', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 63],
|
||||
['data2', 44],
|
||||
['data3', 12],
|
||||
['data4', 14]
|
||||
],
|
||||
type: 'pie', // default type of chart
|
||||
colors: {
|
||||
'data1': hexabit.colors["blue-darker"],
|
||||
'data2': hexabit.colors["blue"],
|
||||
'data3': hexabit.colors["blue-light"],
|
||||
'data4': hexabit.colors["blue-lighter"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'A',
|
||||
'data2': 'B',
|
||||
'data3': 'C',
|
||||
'data4': 'D'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-donut', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 63],
|
||||
['data2', 37]
|
||||
],
|
||||
type: 'donut', // default type of chart
|
||||
colors: {
|
||||
'data1': hexabit.colors["green"],
|
||||
'data2': hexabit.colors["green-light"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'Maximum',
|
||||
'data2': 'Minimum'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-scatter', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 11, 8, 15, 18, 19, 17],
|
||||
['data2', 7, 7, 5, 7, 9, 12]
|
||||
],
|
||||
type: 'scatter', // default type of chart
|
||||
colors: {
|
||||
'data1': hexabit.colors["blue"],
|
||||
'data2': hexabit.colors["pink"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'Maximum',
|
||||
'data2': 'Minimum'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
// name of each category
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
$(document).ready(function(){
|
||||
var chart = c3.generate({
|
||||
bindto: '#chart-combination', // id of chart wrapper
|
||||
data: {
|
||||
columns: [
|
||||
// each columns data
|
||||
['data1', 30, 20, 50, 40, 60, 50],
|
||||
['data2', 200, 130, 90, 240, 130, 220],
|
||||
['data3', 300, 200, 160, 400, 250, 250],
|
||||
['data4', 200, 130, 90, 240, 130, 220]
|
||||
],
|
||||
type: 'bar', // default type of chart
|
||||
types: {
|
||||
'data2': "line",
|
||||
'data3': "spline",
|
||||
},
|
||||
groups: [
|
||||
[ 'data1', 'data4']
|
||||
],
|
||||
colors: {
|
||||
'data1': hexabit.colors["green"],
|
||||
'data2': hexabit.colors["pink"],
|
||||
'data3': hexabit.colors["green"],
|
||||
'data4': hexabit.colors["blue"]
|
||||
},
|
||||
names: {
|
||||
// name of each serie
|
||||
'data1': 'Development',
|
||||
'data2': 'Marketing',
|
||||
'data3': 'Sales',
|
||||
'data4': 'Sales'
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
// name of each category
|
||||
categories: ['2013', '2014', '2015', '2016', '2017', '2018']
|
||||
},
|
||||
},
|
||||
bar: {
|
||||
width: 16
|
||||
},
|
||||
legend: {
|
||||
show: true, //hide legend
|
||||
},
|
||||
padding: {
|
||||
bottom: 0,
|
||||
top: 0
|
||||
},
|
||||
});
|
||||
});
|
||||
});
|
||||
96
admin/assets/js/pages/chart/gauge.js
Normal file
96
admin/assets/js/pages/chart/gauge.js
Normal file
@ -0,0 +1,96 @@
|
||||
// Guage Default
|
||||
defaultGauge = new Gauge(document.getElementById("gauge-default"));
|
||||
defaultGauge.setTextField(document.getElementById("default-textfield"));
|
||||
defaultGauge.maxValue = 3000;
|
||||
defaultGauge.set(1222);
|
||||
|
||||
// Gauge Donut
|
||||
donutGauge = new Donut(document.getElementById("gauge-donut"));
|
||||
donutGauge.setTextField(document.getElementById("donut-textfield"));
|
||||
donutGauge.maxValue = 3000;
|
||||
donutGauge.set(1333);
|
||||
|
||||
// Zones
|
||||
zoneGauge = new Gauge(document.getElementById("gauge-zone"));
|
||||
var opts = {
|
||||
angle: -0.25,
|
||||
lineWidth: 0.2,
|
||||
radiusScale:0.9,
|
||||
pointer: {
|
||||
length: 0.6,
|
||||
strokeWidth: 0.03,
|
||||
color: '#000000'
|
||||
},
|
||||
staticLabels: {
|
||||
font: "10px sans-serif",
|
||||
labels: [200, 500, 2100, 2800],
|
||||
fractionDigits: 0
|
||||
},
|
||||
staticZones: [
|
||||
{strokeStyle: "#F03E3E", min: 0, max: 200},
|
||||
{strokeStyle: "#FFDD00", min: 200, max: 500},
|
||||
{strokeStyle: "#30B32D", min: 500, max: 2100},
|
||||
{strokeStyle: "#FFDD00", min: 2100, max: 2800},
|
||||
{strokeStyle: "#F03E3E", min: 2800, max: 3000}
|
||||
],
|
||||
limitMax: false,
|
||||
limitMin: false,
|
||||
highDpiSupport: true
|
||||
}
|
||||
zoneGauge.setOptions(opts);
|
||||
zoneGauge.setTextField(document.getElementById("zone-textfield"));
|
||||
zoneGauge.minValue = 0;
|
||||
zoneGauge.maxValue = 3000;
|
||||
zoneGauge.set(1444);
|
||||
|
||||
//
|
||||
stepGauge = new Gauge(document.getElementById("gauge-step"));
|
||||
var bigFont = "14px sans-serif";
|
||||
var opts = {
|
||||
angle: 0.1,
|
||||
radiusScale:0.8,
|
||||
lineWidth: 0.2,
|
||||
pointer: {
|
||||
length: 0.6,
|
||||
strokeWidth: 0.03,
|
||||
color: '#000000'
|
||||
},
|
||||
staticLabels: {
|
||||
font: "10px sans-serif",
|
||||
labels: [{label:200, font: bigFont},
|
||||
{label:750},
|
||||
{label:1500},
|
||||
{label:2250},
|
||||
{label:3000},
|
||||
{label:3500, font: bigFont}],
|
||||
fractionDigits: 0
|
||||
},
|
||||
staticZones: [
|
||||
{strokeStyle: "rgb(255,0,0)", min: 0, max: 500, height: 1.2},
|
||||
{strokeStyle: "rgb(200,100,0)", min: 500, max: 1000, height: 1.1},
|
||||
{strokeStyle: "rgb(150,150,0)", min: 1000, max: 1500, height: 1},
|
||||
{strokeStyle: "rgb(100,200,0)", min: 1500, max: 2000, height: 0.9},
|
||||
{strokeStyle: "rgb(0,255,0)", min: 2000, max: 3100, height: 0.8},
|
||||
{strokeStyle: "rgb(80,255,80)", min: 3100, max: 3500, height: 0.7},
|
||||
{strokeStyle: "rgb(130,130,130)", min: 2470, max: 2530, height: 1}
|
||||
],
|
||||
limitMax: false,
|
||||
limitMin: false,
|
||||
highDpiSupport: true,
|
||||
renderTicks: {
|
||||
divisions: 5,
|
||||
divWidth: 1.1,
|
||||
divLength: 0.7,
|
||||
divColor: '#333333',
|
||||
subDivisions: 3,
|
||||
subLength: 0.5,
|
||||
subWidth: 0.6,
|
||||
subColor: '#666666'
|
||||
}
|
||||
};
|
||||
stepGauge.setOptions(opts);
|
||||
//document.getElementById("preview-textfield").className = "preview-textfield";
|
||||
stepGauge.setTextField(document.getElementById("step-textfield"));
|
||||
stepGauge.minValue = 0;
|
||||
stepGauge.maxValue = 3500;
|
||||
stepGauge.set(2222);
|
||||
306
admin/assets/js/pages/charts/chart-widgets.js
Normal file
306
admin/assets/js/pages/charts/chart-widgets.js
Normal file
@ -0,0 +1,306 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
|
||||
// top products =================
|
||||
var dataStackedBar = {
|
||||
labels: ['Q1','Q2','Q3','Q4','Q5','Q6','Q7'],
|
||||
series: [
|
||||
[2350,3205,4520,2351,5632,3205,4520],
|
||||
[2541,2583,1592,2674,2323,1592,2674],
|
||||
[1212,5214,2325,4235,2519,1212,5214],
|
||||
]
|
||||
};
|
||||
new Chartist.Bar('#chart-top-products', dataStackedBar, {
|
||||
height: "250px",
|
||||
stackBars: true,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
axisY: {
|
||||
labelInterpolationFnc: function(value) {
|
||||
return (value / 1000) + 'k';
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip({
|
||||
appendToBody: true
|
||||
}),
|
||||
Chartist.plugins.legend({
|
||||
legendNames: ['Data 1', 'Data 2', 'Data 3']
|
||||
})
|
||||
]
|
||||
}).on('draw', function(data) {
|
||||
if (data.type === 'bar') {
|
||||
data.element.attr({
|
||||
style: 'stroke-width: 20px'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Total Sale =================
|
||||
$('.knob2').knob({
|
||||
'format' : function (value) {
|
||||
return value + '%';
|
||||
}
|
||||
});
|
||||
|
||||
// Income Analysis =================
|
||||
$('.sparkline-pie').sparkline('html', {
|
||||
type: 'pie',
|
||||
offset: 90,
|
||||
width: '160px',
|
||||
height: '160px',
|
||||
sliceColors: ['#182973', '#29bd73', '#ffcd55']
|
||||
})
|
||||
$('#sparkline-compositeline').sparkline('html', {
|
||||
fillColor: false,
|
||||
lineColor: '#445771',
|
||||
width: '200px',
|
||||
height: '30px',
|
||||
lineWidth: '1',
|
||||
});
|
||||
$('#sparkline-compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7], {
|
||||
composite: true,
|
||||
fillColor: false,
|
||||
lineColor: '#182973',
|
||||
lineWidth: '1',
|
||||
chartRangeMin: 0,
|
||||
chartRangeMax: 10
|
||||
});
|
||||
$('#sparkline-compositeline').sparkline([6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7, 4, 1, 5, 7, 9, 9, 8, 7, 6], {
|
||||
composite: true,
|
||||
fillColor: false,
|
||||
lineColor: '#ffcd55',
|
||||
lineWidth: '1',
|
||||
chartRangeMin: 0,
|
||||
chartRangeMax: 10
|
||||
});
|
||||
|
||||
$('.sparkline-pie2').sparkline('html', {
|
||||
type: 'pie',
|
||||
offset: 90,
|
||||
width: '160px',
|
||||
height: '160px',
|
||||
sliceColors: ['#05b4d8', '#35cd3a', '#716aca']
|
||||
})
|
||||
|
||||
// =================
|
||||
$('.sparkbar').sparkline('html', { type: 'bar' });
|
||||
|
||||
|
||||
// BTC =================
|
||||
$('#sparkline16').sparkline([155, 161, 170, 205, 198, 245, 279, 301, 423], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '390',
|
||||
chartRangeMax:100,
|
||||
resize: true,
|
||||
lineColor: '#84b3df',
|
||||
fillColor: '#182973',
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
});
|
||||
$('#sparkline16').sparkline([4, 5, 7, 5, 10, 12, 22, 32, 41, 32], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '290',
|
||||
chartRangeMax: 100,
|
||||
lineColor: '#8f8ff0',
|
||||
fillColor: '#29bd73',
|
||||
composite: true,
|
||||
resize: true,
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
});
|
||||
|
||||
// Our Location ======
|
||||
var mapData = {
|
||||
"US": 298,
|
||||
"AU": 760,
|
||||
"CA": 870,
|
||||
"IN": 2000000,
|
||||
"GB": 120,
|
||||
};
|
||||
if( $('#world-map-markers').length > 0 ){
|
||||
$('#world-map-markers').vectorMap(
|
||||
{
|
||||
map: 'world_mill_en',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#fff',
|
||||
borderOpacity: 0.25,
|
||||
borderWidth: 0,
|
||||
color: '#e6e6e6',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#ebebeb'
|
||||
}
|
||||
},
|
||||
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 5,
|
||||
'fill': '#fff',
|
||||
'fill-opacity':1,
|
||||
'stroke': '#000',
|
||||
'stroke-width' : 1,
|
||||
'stroke-opacity': 0.4
|
||||
},
|
||||
},
|
||||
|
||||
markers: [
|
||||
{ latLng: [37.09,-95.71], name: 'America' },
|
||||
{ latLng: [-25.27, 133.77], name: 'Australia' },
|
||||
{ latLng: [56.13,-106.34], name: 'Canada' },
|
||||
{ latLng: [20.59,78.96], name: 'India' },
|
||||
{ latLng: [55.37,-3.43], name: 'United Kingdom' },
|
||||
],
|
||||
|
||||
series: {
|
||||
regions: [{
|
||||
values: {
|
||||
"US": '#bdf3f5',
|
||||
"AU": '#f9f1d8',
|
||||
"IN": '#ffd4c3',
|
||||
"GB": '#e0eff5',
|
||||
"CA": '#efebf4',
|
||||
},
|
||||
attribute: 'fill'
|
||||
}]
|
||||
},
|
||||
hoverOpacity: null,
|
||||
normalizeFunction: 'linear',
|
||||
zoomOnScroll: false,
|
||||
scaleColors: ['#000000', '#000000'],
|
||||
selectedColor: '#000000',
|
||||
selectedRegions: [],
|
||||
enableZoom: false,
|
||||
hoverColor: '#fff',
|
||||
});
|
||||
}
|
||||
|
||||
// line chart =========================
|
||||
var data = {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
series: [
|
||||
[200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
|
||||
]
|
||||
};
|
||||
var options = {
|
||||
height: "300px",
|
||||
showPoint: true,
|
||||
lineSmooth: true,
|
||||
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip({
|
||||
appendToBody: true
|
||||
}),
|
||||
]
|
||||
};
|
||||
new Chartist.Line('#newline_chart', data, options);
|
||||
|
||||
// donut chart
|
||||
var dataDonut = {
|
||||
series: [20, 10, 25, 40, 5]
|
||||
};
|
||||
new Chartist.Pie('#donut_chart', dataDonut, {
|
||||
height: "220px",
|
||||
donut: true,
|
||||
donutWidth: 25,
|
||||
donutSolid: true,
|
||||
startAngle: 270,
|
||||
showLabel: true
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Visitors Statistics =============
|
||||
$(function() {
|
||||
|
||||
var d = [[1196463600000, 0], [1196550000000, 0], [1196636400000, 0], [1196722800000, 77], [1196809200000, 3636], [1196895600000, 3575], [1196982000000, 2736], [1197068400000, 1086], [1197154800000, 676], [1197241200000, 1205], [1197327600000, 906], [1197414000000, 710], [1197500400000, 639], [1197586800000, 540], [1197673200000, 435], [1197759600000, 301], [1197846000000, 575], [1197932400000, 481], [1198018800000, 591], [1198105200000, 608], [1198191600000, 459], [1198278000000, 234], [1198364400000, 1352], [1198450800000, 686], [1198537200000, 279], [1198623600000, 449], [1198710000000, 468], [1198796400000, 392], [1198882800000, 282], [1198969200000, 208], [1199055600000, 229], [1199142000000, 177], [1199228400000, 374], [1199314800000, 436], [1199401200000, 404], [1199487600000, 253], [1199574000000, 218], [1199660400000, 476], [1199746800000, 462], [1199833200000, 448], [1199919600000, 442], [1200006000000, 403], [1200092400000, 204], [1200178800000, 194], [1200265200000, 327], [1200351600000, 374], [1200438000000, 507], [1200524400000, 546], [1200610800000, 482], [1200697200000, 283], [1200783600000, 221], [1200870000000, 483], [1200956400000, 523], [1201042800000, 528], [1201129200000, 483], [1201215600000, 452], [1201302000000, 270], [1201388400000, 222], [1201474800000, 439], [1201561200000, 559], [1201647600000, 521], [1201734000000, 477], [1201820400000, 442], [1201906800000, 252], [1201993200000, 236], [1202079600000, 525], [1202166000000, 477], [1202252400000, 386], [1202338800000, 409], [1202425200000, 408], [1202511600000, 237], [1202598000000, 193], [1202684400000, 357], [1202770800000, 414], [1202857200000, 393], [1202943600000, 353], [1203030000000, 364], [1203116400000, 215], [1203202800000, 214], [1203289200000, 356], [1203375600000, 399], [1203462000000, 334], [1203548400000, 348], [1203634800000, 243], [1203721200000, 126], [1203807600000, 157], [1203894000000, 288]];
|
||||
|
||||
// first correct the timestamps - they are recorded as the daily
|
||||
// midnights in UTC+0100, but Flot always displays dates in UTC
|
||||
// so we have to add one hour to hit the midnights in the plot
|
||||
|
||||
for (var i = 0; i < d.length; ++i) {
|
||||
d[i][0] += 60 * 60 * 1000;
|
||||
}
|
||||
|
||||
// helper for returning the weekends in a period
|
||||
|
||||
function weekendAreas(axes) {
|
||||
|
||||
var markings = [],
|
||||
d = new Date(axes.xaxis.min);
|
||||
|
||||
// go to the first Saturday
|
||||
|
||||
d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
|
||||
d.setUTCSeconds(0);
|
||||
d.setUTCMinutes(0);
|
||||
d.setUTCHours(0);
|
||||
|
||||
var i = d.getTime();
|
||||
|
||||
// when we don't set yaxis, the rectangle automatically
|
||||
// extends to infinity upwards and downwards
|
||||
|
||||
do {
|
||||
markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
|
||||
i += 7 * 24 * 60 * 60 * 1000;
|
||||
} while (i < axes.xaxis.max);
|
||||
|
||||
return markings;
|
||||
}
|
||||
|
||||
var options = {
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
tickLength: 5
|
||||
},
|
||||
selection: {
|
||||
mode: "x"
|
||||
},
|
||||
grid: {
|
||||
markings: weekendAreas,
|
||||
borderColor: '#eaeaea',
|
||||
tickColor: '#eaeaea',
|
||||
hoverable: true,
|
||||
borderWidth: 1,
|
||||
}
|
||||
};
|
||||
|
||||
var plot = $.plot("#Visitors_chart", [d], options);
|
||||
|
||||
// now connect the two
|
||||
|
||||
$("#Visitors_chart").bind("plotselected", function (event, ranges) {
|
||||
|
||||
// do the zooming
|
||||
$.each(plot.getXAxes(), function(_, axis) {
|
||||
var opts = axis.options;
|
||||
opts.min = ranges.xaxis.from;
|
||||
opts.max = ranges.xaxis.to;
|
||||
});
|
||||
plot.setupGrid();
|
||||
plot.draw();
|
||||
plot.clearSelection();
|
||||
|
||||
// don't fire event on the overview to prevent eternal loop
|
||||
|
||||
overview.setSelection(ranges, true);
|
||||
|
||||
});
|
||||
|
||||
// Add the Flot version string to the footer
|
||||
|
||||
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
276
admin/assets/js/pages/charts/chartjs.js
Normal file
276
admin/assets/js/pages/charts/chartjs.js
Normal file
@ -0,0 +1,276 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
new Chart(document.getElementById("radar_chart").getContext("2d"), getChartJs('radar'));
|
||||
});
|
||||
function getChartJs(type) {
|
||||
var config = null;
|
||||
if (type === 'radar') {
|
||||
config = {
|
||||
type: 'radar',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
data: [65, 25, 90, 81, 56, 55, 40],
|
||||
borderColor: 'rgba(1,188,210, 0.8)',
|
||||
backgroundColor: 'rgba(1,188,210, 0.5)',
|
||||
pointBorderColor: 'rgba(1,188,210, 0)',
|
||||
pointBackgroundColor: 'rgba(1,188,210, 0.8)',
|
||||
pointBorderWidth: 1
|
||||
}, {
|
||||
label: "My Second dataset",
|
||||
data: [72, 48, 40, 19, 96, 27, 100],
|
||||
borderColor: 'rgba(36,42,43, 0.8)',
|
||||
backgroundColor: 'rgba(36,42,43, 0.5)',
|
||||
pointBorderColor: 'rgba(36,42,43, 0)',
|
||||
pointBackgroundColor: 'rgba(36,42,43, 0.8)',
|
||||
pointBorderWidth: 1
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: false
|
||||
}
|
||||
}
|
||||
}
|
||||
return config;
|
||||
}
|
||||
|
||||
//=========================
|
||||
$(function() {
|
||||
"use strict";
|
||||
var options;
|
||||
|
||||
var data = {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
series: [
|
||||
[200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
|
||||
]
|
||||
};
|
||||
|
||||
// line chart
|
||||
options = {
|
||||
height: "300px",
|
||||
showPoint: true,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
lineSmooth: false,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip({
|
||||
appendToBody: true
|
||||
}),
|
||||
]
|
||||
};
|
||||
new Chartist.Line('#line-chart', data, options);
|
||||
|
||||
|
||||
// bar chart
|
||||
options = {
|
||||
height: "300px",
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip({
|
||||
appendToBody: true
|
||||
}),
|
||||
]
|
||||
};
|
||||
new Chartist.Bar('#bar-chart', data, options);
|
||||
|
||||
|
||||
// area chart
|
||||
options = {
|
||||
height: "270px",
|
||||
showArea: true,
|
||||
showLine: false,
|
||||
showPoint: true,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
lineSmooth: false,
|
||||
};
|
||||
new Chartist.Line('#area-chart', data, options);
|
||||
|
||||
|
||||
// multiple chart
|
||||
var dataMultiple = {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
series: [{
|
||||
name: 'series-real',
|
||||
data: [200, 380, 350, 320, 410, 450, 570, 400, 555, 620, 750, 900],
|
||||
}, {
|
||||
name: 'series-projection',
|
||||
data: [240, 350, 360, 380, 400, 450, 480, 523, 555, 600, 700, 800],
|
||||
}]
|
||||
};
|
||||
options = {
|
||||
lineSmooth: false,
|
||||
height: "230px",
|
||||
low: 0,
|
||||
high: 'auto',
|
||||
series: {
|
||||
'series-projection': {
|
||||
showPoint: true,
|
||||
},
|
||||
},
|
||||
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: false
|
||||
},
|
||||
|
||||
plugins: [
|
||||
Chartist.plugins.legend({
|
||||
legendNames: ['Actual', 'Projection']
|
||||
})
|
||||
]
|
||||
};
|
||||
new Chartist.Line('#multiple-chart', dataMultiple, options);
|
||||
|
||||
|
||||
// pie chart
|
||||
var dataPie = {
|
||||
series: [5, 3, 4]
|
||||
};
|
||||
var labels = ['Direct', 'Organic', 'Referral'];
|
||||
var sum = function(a, b) {
|
||||
return a + b;
|
||||
};
|
||||
new Chartist.Pie('#pie-chart', dataPie, {
|
||||
height: "270px",
|
||||
labelInterpolationFnc: function(value, idx) {
|
||||
var percentage = Math.round(value / dataPie.series.reduce(sum) * 100) + '%';
|
||||
return labels[idx] + ' (' + percentage + ')';
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// donut chart
|
||||
var dataDonut = {
|
||||
series: [20, 10, 30, 40]
|
||||
};
|
||||
new Chartist.Pie('#donut-chart', dataDonut, {
|
||||
height: "270px",
|
||||
donut: true,
|
||||
donutWidth: 60,
|
||||
donutSolid: true,
|
||||
startAngle: 270,
|
||||
showLabel: true
|
||||
});
|
||||
|
||||
|
||||
// stacked bar chart
|
||||
var dataStackedBar = {
|
||||
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
||||
series: [
|
||||
[800000, 1200000, 360000, 1300000],
|
||||
[200000, 400000, 500000, 300000],
|
||||
[100000, 200000, 400000, 600000]
|
||||
]
|
||||
};
|
||||
new Chartist.Bar('#stackedbar-chart', dataStackedBar, {
|
||||
height: "270px",
|
||||
stackBars: true,
|
||||
axisX: {
|
||||
showGrid: false
|
||||
},
|
||||
axisY: {
|
||||
labelInterpolationFnc: function(value) {
|
||||
return (value / 1000) + 'k';
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip({
|
||||
appendToBody: true
|
||||
}),
|
||||
]
|
||||
}).on('draw', function(data) {
|
||||
if (data.type === 'bar') {
|
||||
data.element.attr({
|
||||
style: 'stroke-width: 30px'
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// horizontal bar chart
|
||||
var dataHorizontalBar = {
|
||||
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
||||
series: [
|
||||
[5, 4, 3, 7, 5, 10, 3],
|
||||
[3, 2, 9, 5, 4, 6, 4]
|
||||
]
|
||||
};
|
||||
new Chartist.Bar('#horizontalbar-chart', dataHorizontalBar, {
|
||||
height: "270px",
|
||||
seriesBarDistance: 15,
|
||||
reverseData: true,
|
||||
horizontalBars: true,
|
||||
axisY: {
|
||||
offset: 75
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
};
|
||||
var chartColors = window.chartColors;
|
||||
var color = Chart.helpers.color;
|
||||
var config = {
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
],
|
||||
backgroundColor: [
|
||||
color(chartColors.red).alpha(0.5).rgbString(),
|
||||
color(chartColors.orange).alpha(0.5).rgbString(),
|
||||
color(chartColors.yellow).alpha(0.5).rgbString(),
|
||||
color(chartColors.green).alpha(0.5).rgbString(),
|
||||
color(chartColors.blue).alpha(0.5).rgbString(),
|
||||
],
|
||||
label: 'My dataset' // for legend
|
||||
}],
|
||||
labels: [
|
||||
"Red",
|
||||
"Orange",
|
||||
"Yellow",
|
||||
"Green",
|
||||
"Blue"
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
position: 'right',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Polar Area Chart'
|
||||
},
|
||||
scale: {
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
reverse: false
|
||||
},
|
||||
animation: {
|
||||
animateRotate: false,
|
||||
animateScale: true
|
||||
}
|
||||
}
|
||||
};
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById("chart-area");
|
||||
window.myPolarArea = Chart.PolarArea(ctx, config);
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
651
admin/assets/js/pages/charts/echart.js
Normal file
651
admin/assets/js/pages/charts/echart.js
Normal file
@ -0,0 +1,651 @@
|
||||
|
||||
// Bar Area
|
||||
$(function() {
|
||||
"use strict";
|
||||
var barArea = getChart("echart-bar_area")
|
||||
var app = {};
|
||||
var option = {};
|
||||
var xAxisData = [];
|
||||
var data1 = [];
|
||||
var data2 = [];
|
||||
for (var i = 0; i < 100; i++) {
|
||||
xAxisData.push('bar' + i);
|
||||
data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
|
||||
data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
|
||||
}
|
||||
option = {
|
||||
|
||||
legend: {
|
||||
data: ['bar', 'bar2'],
|
||||
align: 'right',
|
||||
bottom: '0',
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right:'0%',
|
||||
top: '2%',
|
||||
bottom:'15%',
|
||||
},
|
||||
tooltip: {},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
silent: true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'bar',
|
||||
type: 'bar',
|
||||
data: data1,
|
||||
color: '#a27ce6',
|
||||
animationDelay: function (idx) {
|
||||
return idx * 10;
|
||||
}
|
||||
}, {
|
||||
name: 'bar2',
|
||||
type: 'bar',
|
||||
data: data2,
|
||||
color: '#1ab1e3',
|
||||
|
||||
animationDelay: function (idx) {
|
||||
return idx * 5 + 100;
|
||||
}
|
||||
}],
|
||||
animationEasing: 'elasticOut',
|
||||
animationDelayUpdate: function (idx) {
|
||||
return idx * 5;
|
||||
}
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
barArea.setOption(option, true);
|
||||
}
|
||||
$(window).on('resize', function(){
|
||||
barArea.resize();
|
||||
});
|
||||
});
|
||||
|
||||
// Rainfall and Evaporation
|
||||
$(function() {
|
||||
"use strict";
|
||||
var app = {};
|
||||
var option = {};
|
||||
var rainFall = getChart("echart-rainfall");
|
||||
option = {
|
||||
legend: {
|
||||
data:['data1','data2'],
|
||||
bottom: '0',
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right:'0%',
|
||||
top: '2%',
|
||||
bottom:'15%',
|
||||
},
|
||||
tooltip : {
|
||||
trigger: 'axis'
|
||||
},
|
||||
calculable : true,
|
||||
|
||||
xAxis : {
|
||||
type : 'category',
|
||||
data : ['Jan','Feb','Mar','Apr','May','Jun','July','Aug','Sept','Oct','Nov','Dec'],
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
yAxis : {
|
||||
type : 'value',
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
series : [
|
||||
{
|
||||
name:'data1',
|
||||
type:'bar',
|
||||
color: '#45e5c3',
|
||||
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||||
markPoint : {
|
||||
data : [
|
||||
{type : 'max', name: 'Max'},
|
||||
{type : 'min', name: 'Min'}
|
||||
]
|
||||
},
|
||||
markLine : {
|
||||
data : [
|
||||
{type : 'average', name: 'Average'}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'data2',
|
||||
type:'bar',
|
||||
color: '#288cff',
|
||||
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||||
markPoint : {
|
||||
data : [
|
||||
{name : 'Highest', value : 182.2, xAxis: 7, yAxis: 183},
|
||||
{name : 'Minimum', value : 2.3, xAxis: 11, yAxis: 3}
|
||||
]
|
||||
},
|
||||
markLine : {
|
||||
data : [
|
||||
{type : 'average', name : 'Average'}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
rainFall.setOption(option, true);
|
||||
}
|
||||
$(window).on('resize', function(){
|
||||
rainFall.resize();
|
||||
});
|
||||
});
|
||||
|
||||
// Dynamic Data
|
||||
$(function() {
|
||||
"use strict";
|
||||
var dynamicData = getChart("echart-dynamic_data");
|
||||
var app = {};
|
||||
var option = {};
|
||||
|
||||
option = {
|
||||
legend: {
|
||||
data:['Latest transaction price', 'Pre-order queue']
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#283b56'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataZoom: {
|
||||
show: false,
|
||||
start: 0,
|
||||
end: 100
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: (function (){
|
||||
var now = new Date();
|
||||
var res = [];
|
||||
var len = 10;
|
||||
while (len--) {
|
||||
res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
|
||||
now = new Date(now - 2000);
|
||||
}
|
||||
return res;
|
||||
})(),
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
data: (function (){
|
||||
var res = [];
|
||||
var len = 10;
|
||||
while (len--) {
|
||||
res.push(10 - len - 1);
|
||||
}
|
||||
return res;
|
||||
})(),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
name: 'price',
|
||||
max: 30,
|
||||
min: 0,
|
||||
boundaryGap: [0.2, 0.2],
|
||||
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
max: 1200,
|
||||
min: 0,
|
||||
boundaryGap: [0.2, 0.2],
|
||||
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
color: '#5b39b1',
|
||||
name:'queue',
|
||||
type:'bar',
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
data:(function (){
|
||||
var res = [];
|
||||
var len = 10;
|
||||
while (len--) {
|
||||
res.push(Math.round(Math.random() * 1000));
|
||||
}
|
||||
return res;
|
||||
})()
|
||||
},
|
||||
{
|
||||
color: '#45e5c3',
|
||||
name:'Latest transaction',
|
||||
type:'line',
|
||||
data:(function (){
|
||||
var res = [];
|
||||
var len = 0;
|
||||
while (len < 10) {
|
||||
res.push((Math.random()*10 + 5).toFixed(1) - 0);
|
||||
len++;
|
||||
}
|
||||
return res;
|
||||
})()
|
||||
}
|
||||
]
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
dynamicData.setOption(option, true);
|
||||
}
|
||||
$(window).on('resize', function(){
|
||||
dynamicData.resize();
|
||||
});
|
||||
});
|
||||
|
||||
// Basic Candlestick
|
||||
$(function() {
|
||||
"use strict";
|
||||
var candleStick = getChart("echart-candlestick");
|
||||
var app = {};
|
||||
var option = {};
|
||||
|
||||
option = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right:'0%',
|
||||
top: '2%',
|
||||
bottom:'8%',
|
||||
},
|
||||
xAxis: {
|
||||
data: ['2018-10-24', '2018-10-25', '2018-10-26', '2018-10-27'],
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'k',
|
||||
data: [
|
||||
{
|
||||
itemStyle:{
|
||||
color: '#1ab1e3',
|
||||
borderColor: '#1ab1e3',
|
||||
},
|
||||
value: [20, 30, 10, 35]
|
||||
},
|
||||
{
|
||||
itemStyle:{
|
||||
color: '#a27ce6',
|
||||
color0: '#a27ce6',
|
||||
borderColor: '#a27ce6',
|
||||
borderColor0: '#a27ce6',
|
||||
},
|
||||
value: [40, 35, 30, 55]
|
||||
},
|
||||
{
|
||||
itemStyle:{
|
||||
color: '#1ab1e3',
|
||||
borderColor: '#1ab1e3',
|
||||
},
|
||||
value: [33, 38, 33, 40]
|
||||
},
|
||||
{
|
||||
itemStyle:{
|
||||
color: '#ffc323',
|
||||
borderColor: '#ffc323',
|
||||
},
|
||||
value: [40, 40, 32, 42]
|
||||
},
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
if (option && typeof option === "object") {
|
||||
candleStick.setOption(option, true);
|
||||
}
|
||||
$(window).on('resize', function(){
|
||||
candleStick.resize();
|
||||
});
|
||||
});
|
||||
|
||||
// Basic Scatter Chart
|
||||
$(function() {
|
||||
"use strict";
|
||||
var basicScatter = getChart("echart-basic_scatter");
|
||||
var app = {};
|
||||
var option = {};
|
||||
|
||||
option = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right:'0%',
|
||||
top: '2%',
|
||||
bottom:'5%',
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
symbolSize: 15,
|
||||
color: '#1ab1e3',
|
||||
data: [
|
||||
[10.0, 8.04],
|
||||
[8.0, 6.95],
|
||||
[13.0, 7.58],
|
||||
[9.0, 8.81],
|
||||
[11.0, 8.33],
|
||||
[14.0, 9.96],
|
||||
[6.0, 7.24],
|
||||
[4.0, 4.26],
|
||||
[12.0, 10.84],
|
||||
[7.0, 4.82],
|
||||
[5.0, 5.68]
|
||||
],
|
||||
type: 'scatter'
|
||||
}]
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
basicScatter.setOption(option, true);
|
||||
}
|
||||
$(window).on('resize', function(){
|
||||
basicScatter.resize();
|
||||
});
|
||||
});
|
||||
|
||||
// Doughnut Chart
|
||||
$(function() {
|
||||
"use strict";
|
||||
var doughnutChart = getChart("echart-doughnut");
|
||||
var app = {};
|
||||
var option = {};
|
||||
|
||||
option = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right:'0%',
|
||||
top: '2%',
|
||||
bottom:'5%',
|
||||
},
|
||||
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data:['Data1','Data2','Data3','Data4','Data5']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name:'Access source',
|
||||
type:'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
fontSize: '30',
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data:[
|
||||
{value:335, name:'Data1', itemStyle: {color: '#ffc323',}},
|
||||
{value:310, name:'Data2', itemStyle: {color: '#ff758e',}},
|
||||
{value:234, name:'Data3', itemStyle: {color: '#49c5b6',}},
|
||||
{value:135, name:'Data4', itemStyle: {color: '#60bafd',}},
|
||||
{value:1548, name:'Data5', itemStyle: {color: '#a27ce6',}}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
doughnutChart.setOption(option, true);
|
||||
}
|
||||
$(window).on('resize', function(){
|
||||
doughnutChart.resize();
|
||||
});
|
||||
});
|
||||
|
||||
// Large scale area chart
|
||||
$(function() {
|
||||
"use strict";
|
||||
var largescaleArea = getChart("echart-large_scale_area");
|
||||
var app = {};
|
||||
var option = {};
|
||||
var base = +new Date(1968, 9, 3);
|
||||
var oneDay = 24 * 3600 * 1000;
|
||||
var date = [];
|
||||
|
||||
var data = [Math.random() * 300];
|
||||
|
||||
for (var i = 1; i < 20000; i++) {
|
||||
var now = new Date(base += oneDay);
|
||||
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
|
||||
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
|
||||
}
|
||||
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
position: function (pt) {
|
||||
return [pt[0], '10%'];
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
right:'0%',
|
||||
top: '2%',
|
||||
bottom:'20%',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: date,
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, '100%'],
|
||||
splitLine: {
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color: '#f8f9fa',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#4D5052',
|
||||
}
|
||||
},
|
||||
dataZoom: [{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 10
|
||||
}, {
|
||||
start: 0,
|
||||
end: 10,
|
||||
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||||
handleSize: '80%',
|
||||
handleStyle: {
|
||||
color: '#fff',
|
||||
shadowBlur: 3,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
series: [
|
||||
{
|
||||
name:'Simulation data',
|
||||
type:'line',
|
||||
smooth:true,
|
||||
symbol: 'none',
|
||||
sampling: 'average',
|
||||
itemStyle: {
|
||||
color: '#f8f9fa',
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgb(255, 158, 68)'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgb(255, 70, 131)'
|
||||
}])
|
||||
},
|
||||
data: data
|
||||
}
|
||||
]
|
||||
};
|
||||
if (option && typeof option === "object") {
|
||||
largescaleArea.setOption(option, true);
|
||||
}
|
||||
$(window).on('resize', function(){
|
||||
largescaleArea.resize();
|
||||
});
|
||||
});
|
||||
|
||||
function getChart(id){
|
||||
var dom = document.getElementById(id);
|
||||
return echarts.init(dom);
|
||||
}
|
||||
1487
admin/assets/js/pages/charts/flot.js
Normal file
1487
admin/assets/js/pages/charts/flot.js
Normal file
File diff suppressed because it is too large
Load Diff
47
admin/assets/js/pages/charts/jquery-knob.js
vendored
Normal file
47
admin/assets/js/pages/charts/jquery-knob.js
vendored
Normal file
@ -0,0 +1,47 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.knob').knob({
|
||||
draw: function () {
|
||||
// "tron" case
|
||||
if (this.$.data('skin') == 'tron') {
|
||||
|
||||
var a = this.angle(this.cv) // Angle
|
||||
, sa = this.startAngle // Previous start angle
|
||||
, sat = this.startAngle // Start angle
|
||||
, ea // Previous end angle
|
||||
, eat = sat + a // End angle
|
||||
, r = true;
|
||||
|
||||
this.g.lineWidth = this.lineWidth;
|
||||
|
||||
this.o.cursor
|
||||
&& (sat = eat - 0.3)
|
||||
&& (eat = eat + 0.3);
|
||||
|
||||
if (this.o.displayPrevious) {
|
||||
ea = this.startAngle + this.angle(this.value);
|
||||
this.o.cursor
|
||||
&& (sa = ea - 0.3)
|
||||
&& (ea = ea + 0.3);
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = this.previousColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false);
|
||||
this.g.stroke();
|
||||
}
|
||||
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false);
|
||||
this.g.stroke();
|
||||
|
||||
this.g.lineWidth = 2;
|
||||
this.g.beginPath();
|
||||
this.g.strokeStyle = this.o.fgColor;
|
||||
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
|
||||
this.g.stroke();
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
1
admin/assets/js/pages/charts/jquery-knob.min.js
vendored
Normal file
1
admin/assets/js/pages/charts/jquery-knob.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
$(function(){$(".knob").knob({draw:function(){if("tron"==this.$.data("skin")){var t,i=this.angle(this.cv),s=this.startAngle,h=this.startAngle,r=h+i,e=!0;return this.g.lineWidth=this.lineWidth,this.o.cursor&&(h=r-.3)&&(r+=.3),this.o.displayPrevious&&(t=this.startAngle+this.angle(this.value),this.o.cursor&&(s=t-.3)&&(t+=.3),this.g.beginPath(),this.g.strokeStyle=this.previousColor,this.g.arc(this.xy,this.xy,this.radius-this.lineWidth,s,t,!1),this.g.stroke()),this.g.beginPath(),this.g.strokeStyle=e?this.o.fgColor:this.fgColor,this.g.arc(this.xy,this.xy,this.radius-this.lineWidth,h,r,!1),this.g.stroke(),this.g.lineWidth=2,this.g.beginPath(),this.g.strokeStyle=this.o.fgColor,this.g.arc(this.xy,this.xy,this.radius-this.lineWidth+1+2*this.lineWidth/3,0,2*Math.PI,!1),this.g.stroke(),!1}}})});
|
||||
299
admin/assets/js/pages/charts/morris.js
Normal file
299
admin/assets/js/pages/charts/morris.js
Normal file
@ -0,0 +1,299 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
MorrisArea();
|
||||
MorrisLineChart();
|
||||
MorrisDonutChart();
|
||||
MorrisBarChart();
|
||||
});
|
||||
|
||||
// Morris-chart
|
||||
function MorrisArea() {
|
||||
Morris.Area({
|
||||
element: 'm_area_chart',
|
||||
data: [{
|
||||
period: '2011',
|
||||
iphone: 45,
|
||||
ipad: 75,
|
||||
itouch: 18
|
||||
}, {
|
||||
period: '2012',
|
||||
iphone: 130,
|
||||
ipad: 110,
|
||||
itouch: 82
|
||||
}, {
|
||||
period: '2013',
|
||||
iphone: 80,
|
||||
ipad: 60,
|
||||
itouch: 85
|
||||
}, {
|
||||
period: '2014',
|
||||
iphone: 78,
|
||||
ipad: 205,
|
||||
itouch: 135
|
||||
}, {
|
||||
period: '2015',
|
||||
iphone: 180,
|
||||
ipad: 124,
|
||||
itouch: 140
|
||||
}, {
|
||||
period: '2016',
|
||||
iphone: 105,
|
||||
ipad: 100,
|
||||
itouch: 85
|
||||
},
|
||||
{
|
||||
period: '2017',
|
||||
iphone: 210,
|
||||
ipad: 180,
|
||||
itouch: 120
|
||||
}
|
||||
],
|
||||
xkey: 'period',
|
||||
ykeys: ['iphone', 'ipad', 'itouch'],
|
||||
labels: ['iPhone', 'iPad', 'iPod Touch'],
|
||||
pointSize: 2,
|
||||
fillOpacity: 0,
|
||||
pointStrokeColors: ['#242a2b', '#00bcd2', '#c0d0d6'],
|
||||
behaveLikeLine: true,
|
||||
gridLineColor: '#eeeeee',
|
||||
lineWidth: 2,
|
||||
hideHover: 'auto',
|
||||
lineColors: ['#242a2b', '#00bcd2', '#c0d0d6'],
|
||||
resize: true
|
||||
|
||||
});
|
||||
Morris.Area({
|
||||
element: 'm_area_chart2',
|
||||
data: [{
|
||||
period: '2012',
|
||||
SiteA: 0,
|
||||
SiteB: 10,
|
||||
|
||||
}, {
|
||||
period: '2013',
|
||||
SiteA: 106,
|
||||
SiteB: 71,
|
||||
|
||||
}, {
|
||||
period: '2014',
|
||||
SiteA: 68,
|
||||
SiteB: 41,
|
||||
|
||||
}, {
|
||||
period: '2015',
|
||||
SiteA: 89,
|
||||
SiteB: 285,
|
||||
|
||||
}, {
|
||||
period: '2016',
|
||||
SiteA: 185,
|
||||
SiteB: 104,
|
||||
|
||||
}, {
|
||||
period: '2017',
|
||||
SiteA: 146,
|
||||
SiteB: 102 ,
|
||||
|
||||
}
|
||||
],
|
||||
xkey: 'period',
|
||||
ykeys: ['SiteA', 'SiteB'],
|
||||
labels: ['Site A', 'Site B'],
|
||||
pointSize: 0,
|
||||
fillOpacity: 0.8,
|
||||
pointStrokeColors: ['#242a2b', '#5dd0fc'],
|
||||
behaveLikeLine: true,
|
||||
gridLineColor: '#eeeeee',
|
||||
lineWidth: 0,
|
||||
smooth: false,
|
||||
hideHover: 'auto',
|
||||
lineColors: ['#242a2b', '#5dd0fc'],
|
||||
resize: true
|
||||
|
||||
});
|
||||
|
||||
Morris.Area({
|
||||
element: 'e_area_chart',
|
||||
data: [{
|
||||
period: '2011',
|
||||
iphone: 10,
|
||||
ipad: 5,
|
||||
itouch: 7
|
||||
}, {
|
||||
period: '2012',
|
||||
iphone: 35,
|
||||
ipad: 89,
|
||||
itouch: 45
|
||||
}, {
|
||||
period: '2013',
|
||||
iphone: 25,
|
||||
ipad: 15,
|
||||
itouch: 102
|
||||
}, {
|
||||
period: '2014',
|
||||
iphone: 80,
|
||||
ipad: 12,
|
||||
itouch: 7
|
||||
}, {
|
||||
period: '2015',
|
||||
iphone: 30,
|
||||
ipad: 32,
|
||||
itouch: 148
|
||||
}, {
|
||||
period: '2016',
|
||||
iphone: 25,
|
||||
ipad: 127,
|
||||
itouch: 40
|
||||
}, {
|
||||
period: '2017',
|
||||
iphone: 98,
|
||||
ipad: 10,
|
||||
itouch: 26
|
||||
}
|
||||
|
||||
|
||||
],
|
||||
lineColors: ['#00bcd2', '#242a2b', '#c0d0d6'],
|
||||
xkey: 'period',
|
||||
ykeys: ['iphone', 'ipad', 'itouch'],
|
||||
labels: ['Site A', 'Site B', 'Site C'],
|
||||
pointSize: 0,
|
||||
lineWidth: 0,
|
||||
resize: true,
|
||||
fillOpacity: 0.8,
|
||||
behaveLikeLine: true,
|
||||
gridLineColor: '#eeeeee',
|
||||
hideHover: 'auto'
|
||||
|
||||
});
|
||||
}
|
||||
// LINE CHART
|
||||
function MorrisLineChart() {
|
||||
var line = new Morris.Line({
|
||||
element: 'm_line_chart',
|
||||
resize: true,
|
||||
data: [{
|
||||
y: '2014 Q1',
|
||||
item1: 2356
|
||||
},
|
||||
{
|
||||
y: '2015 Q2',
|
||||
item1: 2586
|
||||
},
|
||||
{
|
||||
y: '2015 Q3',
|
||||
item1: 4512
|
||||
},
|
||||
{
|
||||
y: '2015 Q4',
|
||||
item1: 3265
|
||||
},
|
||||
{
|
||||
y: '2016 Q5',
|
||||
item1: 6258
|
||||
},
|
||||
{
|
||||
y: '2016 Q6',
|
||||
item1: 5234
|
||||
},
|
||||
{
|
||||
y: '2016 Q7',
|
||||
item1: 4725
|
||||
},
|
||||
{
|
||||
y: '2016 Q7',
|
||||
item1: 7526
|
||||
},
|
||||
{
|
||||
y: '2017 Q7',
|
||||
item1: 8452
|
||||
},
|
||||
{
|
||||
y: '2017 Q7',
|
||||
item1: 8931
|
||||
}
|
||||
],
|
||||
xkey: 'y',
|
||||
ykeys: ['item1'],
|
||||
labels: ['Item 1'],
|
||||
gridLineColor: '#eeeeee',
|
||||
lineColors: ['#242a2b'],
|
||||
lineWidth: 2,
|
||||
pointSize: 3,
|
||||
hideHover: 'auto'
|
||||
});
|
||||
}
|
||||
// Morris donut chart
|
||||
function MorrisDonutChart() {
|
||||
Morris.Donut({
|
||||
element: 'm_donut_chart',
|
||||
data: [
|
||||
{
|
||||
label: "Online Sales",
|
||||
value: 45,
|
||||
|
||||
}, {
|
||||
label: "Store Sales",
|
||||
value: 35
|
||||
},{
|
||||
label: "Email Sales",
|
||||
value: 8
|
||||
}, {
|
||||
label: "Agent Sales",
|
||||
value: 12
|
||||
}],
|
||||
|
||||
resize: true,
|
||||
colors: ['#2cbfb7', '#3dd1c9', '#60ded7', '#a1ece8']
|
||||
});
|
||||
}
|
||||
// Morris bar chart
|
||||
function MorrisBarChart() {
|
||||
Morris.Bar({
|
||||
element: 'm_bar_chart',
|
||||
data: [{
|
||||
y: '2012',
|
||||
a: 80,
|
||||
b: 56,
|
||||
c: 89
|
||||
}, {
|
||||
y: '2013',
|
||||
a: 75,
|
||||
b: 65,
|
||||
c: 38
|
||||
}, {
|
||||
y: '2014',
|
||||
a: 59,
|
||||
b: 30,
|
||||
c: 37
|
||||
}, {
|
||||
y: '2015',
|
||||
a: 75,
|
||||
b: 65,
|
||||
c: 40
|
||||
}, {
|
||||
y: '2016',
|
||||
a: 55,
|
||||
b: 40,
|
||||
c: 45
|
||||
}, {
|
||||
y: '2017',
|
||||
a: 75,
|
||||
b: 65,
|
||||
c: 40
|
||||
}, {
|
||||
y: '2018',
|
||||
a: 87,
|
||||
b: 88,
|
||||
c: 36
|
||||
}],
|
||||
xkey: 'y',
|
||||
ykeys: ['a', 'b', 'c'],
|
||||
labels: ['A', 'B', 'C'],
|
||||
barColors: ['#55bbc7', '#00bcd2', '#242a2b'],
|
||||
hideHover: 'auto',
|
||||
gridLineColor: '#eeeeee',
|
||||
resize: true
|
||||
});
|
||||
}
|
||||
// Extra chart
|
||||
147
admin/assets/js/pages/charts/peity_chart.js
Normal file
147
admin/assets/js/pages/charts/peity_chart.js
Normal file
@ -0,0 +1,147 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
|
||||
// MINI LINE CHARTS
|
||||
var params = {
|
||||
width: '60px',
|
||||
height: '30px',
|
||||
lineWidth: '2',
|
||||
lineColor: '#1D92AF',
|
||||
fillColor: 'rgba(29,146,175,0.2) ',
|
||||
spotRadius: '2',
|
||||
highlightLineColor: '#aedaff',
|
||||
highlightSpotColor: '#71aadb',
|
||||
spotColor: false,
|
||||
minSpotColor: false,
|
||||
maxSpotColor: false,
|
||||
disableInteraction: false
|
||||
};
|
||||
|
||||
// values from HTML script
|
||||
$('#demo-sparkline-line1').sparkline('html', params);
|
||||
params.lineColor = '#ef2020';
|
||||
params.fillColor = 'rgba(239,32,32,0.2)';
|
||||
$('#demo-sparkline-line2').sparkline('html', params);
|
||||
params.lineColor = '#ff9800';
|
||||
params.fillColor = 'rgba(255,152,0,0.2)';
|
||||
$('#demo-sparkline-line3').sparkline('html', params);
|
||||
params.lineColor = '#7CAC25';
|
||||
params.fillColor = 'rgba(124,172,37,0.2)';
|
||||
$('#demo-sparkline-line4').sparkline('html', params);
|
||||
params.lineColor = '#777';
|
||||
params.fillColor = 'rgba(119,119,119,0.2)';
|
||||
$('#demo-sparkline-line5').sparkline('html', params);
|
||||
|
||||
// values from Javascript
|
||||
var values1 = getRandomValues();
|
||||
|
||||
params.lineColor = '#1D92AF';
|
||||
params.fillColor = false;
|
||||
$('#demo-sparkline-line6').sparkline(values1[0], params);
|
||||
params.lineColor = '#ef2020';
|
||||
params.fillColor = false;
|
||||
$('#demo-sparkline-line7').sparkline(values1[1], params);
|
||||
params.lineColor = '#ff9800';
|
||||
params.fillColor = false;
|
||||
$('#demo-sparkline-line8').sparkline(values1[2], params);
|
||||
params.lineColor = '#7CAC25';
|
||||
params.fillColor = false;
|
||||
$('#demo-sparkline-line9').sparkline(values1[3], params);
|
||||
params.lineColor = '#777';
|
||||
params.fillColor = false;
|
||||
$('#demo-sparkline-line10').sparkline(values1[4], params);
|
||||
|
||||
// composite line
|
||||
$('#demo-sparkline-compositeline').sparkline('html', {
|
||||
fillColor: false,
|
||||
lineColor: '#ff9800',
|
||||
width: '200px',
|
||||
height: '30px',
|
||||
lineWidth: '2',
|
||||
});
|
||||
|
||||
$('#demo-sparkline-compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7], {
|
||||
composite: true,
|
||||
fillColor: false,
|
||||
lineColor: '#777',
|
||||
lineWidth: '2',
|
||||
chartRangeMin: 0,
|
||||
chartRangeMax: 10
|
||||
});
|
||||
|
||||
|
||||
// MINI BAR CHART
|
||||
var values2 = getRandomValues();
|
||||
|
||||
var paramsBar = {
|
||||
type: 'bar',
|
||||
barWidth: 5,
|
||||
height: 25,
|
||||
barColor: '#0E9BE2'
|
||||
};
|
||||
|
||||
$('#mini-bar-chart1').sparkline(values2[0], paramsBar);
|
||||
paramsBar.barColor = '#7CAC25';
|
||||
$('#mini-bar-chart2').sparkline(values2[1], paramsBar);
|
||||
paramsBar.barColor = '#FF4402';
|
||||
$('#mini-bar-chart3').sparkline(values2[2], paramsBar);
|
||||
paramsBar.barColor = '#ff9800';
|
||||
$('#mini-bar-chart4').sparkline(values2[3], paramsBar);
|
||||
paramsBar.barColor = '#777';
|
||||
$('#mini-bar-chart5').sparkline(values2[4], paramsBar);
|
||||
|
||||
// negative values;
|
||||
$('#mini-bar-negative').sparkline('html', paramsBar);
|
||||
|
||||
// stacked bar
|
||||
$('#mini-bar-stacked').sparkline('html', paramsBar);
|
||||
|
||||
// composite bar
|
||||
$('#demo-sparkline-compositebar').sparkline('html', {
|
||||
type: 'bar',
|
||||
barColor: '#7CAC25',
|
||||
barWidth: 5,
|
||||
height: 25,
|
||||
});
|
||||
|
||||
$('#demo-sparkline-compositebar').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6], {
|
||||
composite: true,
|
||||
fillColor: false,
|
||||
lineColor: '#777',
|
||||
});
|
||||
|
||||
|
||||
// MINI PIE CHARTS
|
||||
var paramsPie = {
|
||||
type: "pie",
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
sliceColors: ["#0E9BE2", "#ff9800", "#7CAC25"]
|
||||
};
|
||||
|
||||
$('#mini-pie-chart1').sparkline('html', paramsPie);
|
||||
$('#mini-pie-chart2').sparkline('html', paramsPie);
|
||||
$('#mini-pie-chart3').sparkline('html', paramsPie);
|
||||
$('#mini-pie-chart4').sparkline('html', paramsPie);
|
||||
$('#mini-pie-chart5').sparkline('html', paramsPie);
|
||||
$('#mini-pie-chart6').sparkline('html', paramsPie);
|
||||
|
||||
|
||||
function getRandomValues() {
|
||||
// data setup
|
||||
var values = new Array(20);
|
||||
|
||||
for (var i = 0; i < values.length; i++) {
|
||||
values[i] = [5 + randomVal(), 10 + randomVal(), 15 + randomVal(), 20 + randomVal(), 30 + randomVal(),
|
||||
35 + randomVal(), 40 + randomVal(), 45 + randomVal(), 50 + randomVal()
|
||||
];
|
||||
}
|
||||
|
||||
return values;
|
||||
}
|
||||
|
||||
function randomVal() {
|
||||
return Math.floor(Math.random() * 80);
|
||||
}
|
||||
|
||||
});
|
||||
59
admin/assets/js/pages/charts/polar_area_chart.js
Normal file
59
admin/assets/js/pages/charts/polar_area_chart.js
Normal file
@ -0,0 +1,59 @@
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
};
|
||||
|
||||
var chartColors = window.chartColors;
|
||||
var color = Chart.helpers.color;
|
||||
var config = {
|
||||
data: {
|
||||
datasets: [{
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
],
|
||||
backgroundColor: [
|
||||
color(chartColors.red).alpha(0.5).rgbString(),
|
||||
color(chartColors.orange).alpha(0.5).rgbString(),
|
||||
color(chartColors.yellow).alpha(0.5).rgbString(),
|
||||
color(chartColors.green).alpha(0.5).rgbString(),
|
||||
color(chartColors.blue).alpha(0.5).rgbString(),
|
||||
],
|
||||
label: 'My dataset' // for legend
|
||||
}],
|
||||
labels: [
|
||||
"Red",
|
||||
"Orange",
|
||||
"Yellow",
|
||||
"Green",
|
||||
"Blue"
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: {
|
||||
position: 'right',
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Polar Area Chart'
|
||||
},
|
||||
scale: {
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
reverse: false
|
||||
},
|
||||
animation: {
|
||||
animateRotate: false,
|
||||
animateScale: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById("chart-area");
|
||||
window.myPolarArea = Chart.PolarArea(ctx, config);
|
||||
};
|
||||
190
admin/assets/js/pages/charts/sparkline.js
Normal file
190
admin/assets/js/pages/charts/sparkline.js
Normal file
@ -0,0 +1,190 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.sparkline-pie').sparkline('html', {
|
||||
type: 'pie',
|
||||
offset: 90,
|
||||
width: '150px',
|
||||
height: '150px',
|
||||
sliceColors: ['#fb4364', '#7868da', '#3aaaec']
|
||||
})
|
||||
|
||||
drawDocSparklines();
|
||||
drawMouseSpeedDemo();
|
||||
});
|
||||
|
||||
//Taken from http://omnipotent.net/jquery.sparkline
|
||||
function drawDocSparklines() {
|
||||
|
||||
// Bar + line composite charts
|
||||
$('#compositebar').sparkline('html', { type: 'bar', barColor: '#aaf' });
|
||||
$('#compositebar').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
|
||||
{ composite: true, fillColor: false, lineColor: 'red' });
|
||||
|
||||
|
||||
// Line charts taking their values from the tag
|
||||
$('.sparkline-1').sparkline();
|
||||
|
||||
// Larger line charts for the docs
|
||||
$('.largeline').sparkline('html',
|
||||
{ type: 'line', height: '2.5em', width: '4em' });
|
||||
|
||||
// Customized line chart
|
||||
$('#linecustom').sparkline('html',
|
||||
{
|
||||
height: '1.5em', width: '8em', lineColor: '#f00', fillColor: '#ffa',
|
||||
minSpotColor: false, maxSpotColor: false, spotColor: '#60bafd', spotRadius: 3
|
||||
});
|
||||
|
||||
// Bar charts using inline values
|
||||
$('.sparkbar').sparkline('html', { type: 'bar' });
|
||||
|
||||
$('.barformat').sparkline([1, 3, 5, 3, 8], {
|
||||
type: 'bar',
|
||||
tooltipFormat: '{{value:levels}} - {{value}}',
|
||||
tooltipValueLookups: {
|
||||
levels: $.range_map({ ':2': 'Low', '3:6': 'Medium', '7:': 'High' })
|
||||
}
|
||||
});
|
||||
|
||||
// Tri-state charts using inline values
|
||||
$('.sparktristate').sparkline('html', { type: 'tristate' });
|
||||
$('.sparktristatecols').sparkline('html',
|
||||
{ type: 'tristate', colorMap: { '-2': '#fa7', '2': '#60bafd' } });
|
||||
|
||||
// Composite line charts, the second using values supplied via javascript
|
||||
$('#compositeline').sparkline('html', { fillColor: false, changeRangeMin: 0, chartRangeMax: 10 });
|
||||
$('#compositeline').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
|
||||
{ composite: true, fillColor: false, lineColor: 'red', changeRangeMin: 0, chartRangeMax: 10 });
|
||||
|
||||
// Line charts with normal range marker
|
||||
$('#normalline').sparkline('html',
|
||||
{ fillColor: false, normalRangeMin: -1, normalRangeMax: 8 });
|
||||
$('#normalExample').sparkline('html',
|
||||
{ fillColor: false, normalRangeMin: 80, normalRangeMax: 95, normalRangeColor: '#60bafd' });
|
||||
|
||||
// Discrete charts
|
||||
$('.discrete1').sparkline('html',
|
||||
{ type: 'discrete', lineColor: '#1ab1e3', xwidth: 18 });
|
||||
$('#discrete2').sparkline('html',
|
||||
{ type: 'discrete', lineColor: '#1ab1e3', thresholdColor: 'red', thresholdValue: 4 });
|
||||
|
||||
// Bullet charts
|
||||
$('.sparkbullet').sparkline('html', { type: 'bullet' });
|
||||
|
||||
// Pie charts
|
||||
$('.sparkpie').sparkline('html', { type: 'pie', height: '2em' });
|
||||
|
||||
// Box plots
|
||||
$('.sparkboxplot').sparkline('html', { type: 'box' });
|
||||
$('.sparkboxplotraw').sparkline([1, 3, 5, 8, 10, 15, 18],
|
||||
{ type: 'box', raw: true, showOutliers: true, target: 6 });
|
||||
|
||||
// Box plot with specific field order
|
||||
$('.boxfieldorder').sparkline('html', {
|
||||
type: 'box',
|
||||
tooltipFormatFieldlist: ['med', 'lq', 'uq'],
|
||||
tooltipFormatFieldlistKey: 'field'
|
||||
});
|
||||
|
||||
// click event demo sparkline
|
||||
$('.clickdemo').sparkline();
|
||||
$('.clickdemo').bind('sparklineClick', function (ev) {
|
||||
var sparkline = ev.sparklines[0],
|
||||
region = sparkline.getCurrentRegionFields();
|
||||
value = region.y;
|
||||
alert("Clicked on x=" + region.x + " y=" + region.y);
|
||||
});
|
||||
|
||||
// mouseover event demo sparkline
|
||||
$('.mouseoverdemo').sparkline();
|
||||
$('.mouseoverdemo').bind('sparklineRegionChange', function (ev) {
|
||||
var sparkline = ev.sparklines[0],
|
||||
region = sparkline.getCurrentRegionFields();
|
||||
value = region.y;
|
||||
$('.mouseoverregion').text("x=" + region.x + " y=" + region.y);
|
||||
}).bind('mouseleave', function () {
|
||||
$('.mouseoverregion').text('');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
** Draw the little mouse speed animated graph
|
||||
** This just attaches a handler to the mousemove event to see
|
||||
** (roughly) how far the mouse has moved
|
||||
** and then updates the display a couple of times a second via
|
||||
** setTimeout()
|
||||
**/
|
||||
function drawMouseSpeedDemo() {
|
||||
var mrefreshinterval = 500; // update display every 500ms
|
||||
var lastmousex = -1;
|
||||
var lastmousey = -1;
|
||||
var lastmousetime;
|
||||
var mousetravel = 0;
|
||||
var mpoints = [];
|
||||
var mpoints_max = 30;
|
||||
$('html').mousemove(function (e) {
|
||||
var mousex = e.pageX;
|
||||
var mousey = e.pageY;
|
||||
if (lastmousex > -1) {
|
||||
mousetravel += Math.max(Math.abs(mousex - lastmousex), Math.abs(mousey - lastmousey));
|
||||
}
|
||||
lastmousex = mousex;
|
||||
lastmousey = mousey;
|
||||
});
|
||||
var mdraw = function () {
|
||||
var md = new Date();
|
||||
var timenow = md.getTime();
|
||||
if (lastmousetime && lastmousetime != timenow) {
|
||||
var pps = Math.round(mousetravel / (timenow - lastmousetime) * 1000);
|
||||
mpoints.push(pps);
|
||||
if (mpoints.length > mpoints_max)
|
||||
mpoints.splice(0, 1);
|
||||
mousetravel = 0;
|
||||
$('#mousespeed').sparkline(mpoints, { width: mpoints.length * 2, tooltipSuffix: ' pixels per second' });
|
||||
}
|
||||
lastmousetime = timenow;
|
||||
setTimeout(mdraw, mrefreshinterval);
|
||||
};
|
||||
// We could use setInterval instead, but I prefer to do it this way
|
||||
setTimeout(mdraw, mrefreshinterval);
|
||||
}
|
||||
|
||||
//====
|
||||
|
||||
$("#sparkline14").sparkline([0, 23, 43, 35, 44, 45, 56, 37, 40, 45, 56, 7, 10], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '100',
|
||||
lineColor: '#7868da',
|
||||
fillColor: 'transparent',
|
||||
spotColor: '#fff',
|
||||
minSpotColor: undefined,
|
||||
maxSpotColor: undefined,
|
||||
highlightSpotColor: undefined,
|
||||
highlightLineColor: undefined
|
||||
});
|
||||
|
||||
$('#sparkline16').sparkline([15, 23, 45, 20, 54, 45, 35, 57, 30], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '100',
|
||||
chartRangeMax: 50,
|
||||
resize: true,
|
||||
lineColor: '#51aaed',
|
||||
fillColor: '#60bafd',
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
});
|
||||
|
||||
$('#sparkline16').sparkline([8, 17, 13, 14, 10, 16, 17, 20, 12, 27], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '100',
|
||||
chartRangeMax: 40,
|
||||
lineColor: '#40c77c',
|
||||
fillColor: '#50d38a',
|
||||
composite: true,
|
||||
resize: true,
|
||||
highlightLineColor: 'rgba(0,0,0,.1)',
|
||||
highlightSpotColor: 'rgba(0,0,0,.2)',
|
||||
});
|
||||
117
admin/assets/js/pages/forms/advanced-form-elements.js
Normal file
117
admin/assets/js/pages/forms/advanced-form-elements.js
Normal file
@ -0,0 +1,117 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
$('.colorpicker').colorpicker();
|
||||
|
||||
|
||||
//Masked Input ============================================================================================================================
|
||||
var $demoMaskedInput = $('.demo-masked-input');
|
||||
//Date
|
||||
$demoMaskedInput.find('.date').inputmask('dd/mm/yyyy', { placeholder: '__/__/____' });
|
||||
//Time
|
||||
$demoMaskedInput.find('.time12').inputmask('hh:mm t', { placeholder: '__:__ _m', alias: 'time12', hourFormat: '12' });
|
||||
$demoMaskedInput.find('.time24').inputmask('hh:mm', { placeholder: '__:__ _m', alias: 'time24', hourFormat: '24' });
|
||||
//Date Time
|
||||
$demoMaskedInput.find('.datetime').inputmask('d/m/y h:s', { placeholder: '__/__/____ __:__', alias: "datetime", hourFormat: '24' });
|
||||
//Mobile Phone Number
|
||||
$demoMaskedInput.find('.mobile-phone-number').inputmask('+99 (999) 999-99-99', { placeholder: '+__ (___) ___-__-__' });
|
||||
//Phone Number
|
||||
$demoMaskedInput.find('.phone-number').inputmask('+99 (999) 999-99-99', { placeholder: '+__ (___) ___-__-__' });
|
||||
//Dollar Money
|
||||
$demoMaskedInput.find('.money-dollar').inputmask('99,99 $', { placeholder: '__,__ $' });
|
||||
//IP Address
|
||||
$demoMaskedInput.find('.ip').inputmask('999.999.999.999', { placeholder: '___.___.___.___' });
|
||||
//Credit Card
|
||||
$demoMaskedInput.find('.credit-card').inputmask('9999 9999 9999 9999', { placeholder: '____ ____ ____ ____' });
|
||||
//Email
|
||||
$demoMaskedInput.find('.email').inputmask({ alias: "email" });
|
||||
//Serial Key
|
||||
$demoMaskedInput.find('.key').inputmask('****-****-****-****', { placeholder: '____-____-____-____' });
|
||||
|
||||
// Masked Inputs
|
||||
$('#phone').mask('(999) 999-9999');
|
||||
$('#phone-ex').mask('(999) 999-9999? x99999');
|
||||
$('#tax-id').mask('99-9999999');
|
||||
$('#ssn').mask('999-99-9999');
|
||||
$('#product-key').mask('a*-999-a999');
|
||||
|
||||
|
||||
// Multiselect
|
||||
$('#multiselect1, #multiselect2, #single-selection, #multiselect5, #multiselect6').multiselect({
|
||||
maxHeight: 300
|
||||
});
|
||||
//Multi-select
|
||||
$('#optgroup').multiSelect({ selectableOptgroup: true });
|
||||
|
||||
|
||||
//noUISlider
|
||||
var sliderBasic = document.getElementById('nouislider_basic_example');
|
||||
noUiSlider.create(sliderBasic, {
|
||||
start: [23],
|
||||
connect: 'lower',
|
||||
step: 1,
|
||||
range: {
|
||||
'min': [0],
|
||||
'max': [100]
|
||||
}
|
||||
});
|
||||
getNoUISliderValue(sliderBasic, true);
|
||||
|
||||
//Range Example
|
||||
var rangeSlider = document.getElementById('nouislider_range_example');
|
||||
noUiSlider.create(rangeSlider, {
|
||||
start: [22860, 75283],
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 15000,
|
||||
'max': 99999
|
||||
}
|
||||
});
|
||||
getNoUISliderValue(rangeSlider, false);
|
||||
|
||||
|
||||
|
||||
$('#multiselect3-all').multiselect({
|
||||
includeSelectAllOption: true,
|
||||
});
|
||||
|
||||
$('#multiselect4-filter').multiselect({
|
||||
enableFiltering: true,
|
||||
enableCaseInsensitiveFiltering: true,
|
||||
maxHeight: 200
|
||||
});
|
||||
|
||||
$('#multiselect-size').multiselect({
|
||||
buttonClass: 'btn btn-default btn-sm'
|
||||
});
|
||||
|
||||
$('#multiselect-link').multiselect({
|
||||
buttonClass: 'btn btn-link'
|
||||
});
|
||||
|
||||
$('#multiselect-color').multiselect({
|
||||
buttonClass: 'btn btn-primary'
|
||||
});
|
||||
|
||||
$('#multiselect-color2').multiselect({
|
||||
buttonClass: 'btn btn-success'
|
||||
});
|
||||
|
||||
|
||||
// Date picker
|
||||
$('.inline-datepicker').datepicker({
|
||||
todayHighlight: true
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
//Get noUISlider Value and write on
|
||||
function getNoUISliderValue(slider, percentage) {
|
||||
slider.noUiSlider.on('update', function () {
|
||||
var val = slider.noUiSlider.get();
|
||||
if (percentage) {
|
||||
val = parseInt(val);
|
||||
val += '%';
|
||||
}
|
||||
$(slider).parent().find('span.js-nouislider-value').text(val);
|
||||
});
|
||||
}
|
||||
22
admin/assets/js/pages/forms/dropify.js
Normal file
22
admin/assets/js/pages/forms/dropify.js
Normal file
@ -0,0 +1,22 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
$('.dropify').dropify();
|
||||
|
||||
var drEvent = $('#dropify-event').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');
|
||||
});
|
||||
|
||||
$('.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'
|
||||
}
|
||||
});
|
||||
});
|
||||
7
admin/assets/js/pages/forms/editors.js
Normal file
7
admin/assets/js/pages/forms/editors.js
Normal file
@ -0,0 +1,7 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
//CKEditor
|
||||
CKEDITOR.replace('ckeditor');
|
||||
CKEDITOR.config.height = 300;
|
||||
|
||||
});
|
||||
80
admin/assets/js/pages/forms/form-wizard.js
Normal file
80
admin/assets/js/pages/forms/form-wizard.js
Normal file
@ -0,0 +1,80 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
//Horizontal form basic
|
||||
$('#wizard_horizontal').steps({
|
||||
headerTag: 'h2',
|
||||
bodyTag: 'section',
|
||||
transitionEffect: 'slideLeft',
|
||||
onInit: function (event, currentIndex) {
|
||||
setButtonWavesEffect(event);
|
||||
},
|
||||
onStepChanged: function (event, currentIndex, priorIndex) {
|
||||
setButtonWavesEffect(event);
|
||||
}
|
||||
});
|
||||
|
||||
//Vertical form basic
|
||||
$('#wizard_vertical').steps({
|
||||
headerTag: 'h2',
|
||||
bodyTag: 'section',
|
||||
transitionEffect: 'slideLeft',
|
||||
stepsOrientation: 'vertical',
|
||||
onInit: function (event, currentIndex) {
|
||||
setButtonWavesEffect(event);
|
||||
},
|
||||
onStepChanged: function (event, currentIndex, priorIndex) {
|
||||
setButtonWavesEffect(event);
|
||||
}
|
||||
});
|
||||
|
||||
//Advanced form with validation
|
||||
var form = $('#wizard_with_validation').show();
|
||||
form.steps({
|
||||
headerTag: 'h3',
|
||||
bodyTag: 'fieldset',
|
||||
transitionEffect: 'slideLeft',
|
||||
onStepChanging: function (event, currentIndex, newIndex) {
|
||||
if (currentIndex > newIndex) { return true; }
|
||||
|
||||
if (currentIndex < newIndex) {
|
||||
form.find('.body:eq(' + newIndex + ') label.error').remove();
|
||||
form.find('.body:eq(' + newIndex + ') .error').removeClass('error');
|
||||
}
|
||||
|
||||
form.validate().settings.ignore = ':disabled,:hidden';
|
||||
return form.valid();
|
||||
},
|
||||
onStepChanged: function (event, currentIndex, priorIndex) {
|
||||
setButtonWavesEffect(event);
|
||||
},
|
||||
onFinishing: function (event, currentIndex) {
|
||||
form.validate().settings.ignore = ':disabled';
|
||||
return form.valid();
|
||||
},
|
||||
onFinished: function (event, currentIndex) {
|
||||
swal("Good job!", "Submitted!", "success");
|
||||
}
|
||||
});
|
||||
|
||||
form.validate({
|
||||
highlight: function (input) {
|
||||
$(input).parents('.form-line').addClass('error');
|
||||
},
|
||||
unhighlight: function (input) {
|
||||
$(input).parents('.form-line').removeClass('error');
|
||||
},
|
||||
errorPlacement: function (error, element) {
|
||||
$(element).parents('.form-group').append(error);
|
||||
},
|
||||
rules: {
|
||||
'confirm': {
|
||||
equalTo: '#password'
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function setButtonWavesEffect(event) {
|
||||
$(event.currentTarget).find('[role="menu"] li a').removeClass('');
|
||||
$(event.currentTarget).find('[role="menu"] li:not(.disabled) a').addClass('');
|
||||
}
|
||||
98
admin/assets/js/pages/maps/google.js
Normal file
98
admin/assets/js/pages/maps/google.js
Normal file
@ -0,0 +1,98 @@
|
||||
$(function () {
|
||||
//Basic Map
|
||||
var basicMap = new GMaps({
|
||||
el: '#gmap_basic_example',
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
|
||||
//Markers
|
||||
var markers = new GMaps({
|
||||
div: '#gmap_markers',
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
markers.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');
|
||||
}
|
||||
});
|
||||
markers.addMarker({
|
||||
lat: -12.042,
|
||||
lng: -77.028333,
|
||||
title: 'Marker with InfoWindow',
|
||||
infoWindow: {
|
||||
content: '<p>HTML Content</p>'
|
||||
}
|
||||
});
|
||||
|
||||
//Static maps
|
||||
var staticMap = GMaps.staticMapURL({
|
||||
size: [$('#gmap_static_map').width(), 400],
|
||||
lat: -12.043333,
|
||||
lng: -77.028333
|
||||
});
|
||||
|
||||
$('<img/>').attr('src', staticMap).appendTo('#gmap_static_map');
|
||||
|
||||
//Static maps with markers
|
||||
var staticMapWithMarkers = GMaps.staticMapURL({
|
||||
size: [$('#gmap_static_map_with_markers').width(), 400],
|
||||
lat: -12.043333,
|
||||
lng: -77.028333,
|
||||
markers: [
|
||||
{ lat: -12.043333, lng: -77.028333 },
|
||||
{
|
||||
lat: -12.045333, lng: -77.034,
|
||||
size: 'small'
|
||||
},
|
||||
{
|
||||
lat: -12.045633, lng: -77.022,
|
||||
color: 'blue'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
$('<img/>').attr('src', staticMapWithMarkers).appendTo('#gmap_static_map_with_markers');
|
||||
|
||||
//Static maps with polyline
|
||||
var path = [
|
||||
[-12.040397656836609, -77.03373871559225],
|
||||
[-12.040248585302038, -77.03993927003302],
|
||||
[-12.050047116528843, -77.02448169303511],
|
||||
[-12.044804866577001, -77.02154422636042],
|
||||
[-12.040397656836609, -77.03373871559225],
|
||||
];
|
||||
|
||||
var staticMapPolyline = GMaps.staticMapURL({
|
||||
size: [$('#gmap_static_map_polyline').width(), 400],
|
||||
lat: -12.043333,
|
||||
lng: -77.028333,
|
||||
|
||||
polyline: {
|
||||
path: path,
|
||||
strokeColor: '#131540',
|
||||
strokeOpacity: 0.6,
|
||||
strokeWeight: 6
|
||||
// fillColor: '#ffaf2ecc'
|
||||
}
|
||||
});
|
||||
|
||||
$('<img/>').attr('src', staticMapPolyline).appendTo('#gmap_static_map_polyline');
|
||||
|
||||
//Panorama
|
||||
var panorama = GMaps.createPanorama({
|
||||
el: '#gmap_panorama',
|
||||
lat: 42.3455,
|
||||
lng: -71.0983
|
||||
});
|
||||
});
|
||||
119
admin/assets/js/pages/maps/jvectormap.js
Normal file
119
admin/assets/js/pages/maps/jvectormap.js
Normal file
@ -0,0 +1,119 @@
|
||||
$(function () {
|
||||
|
||||
if( $('#world-map-markers').length > 0 ){
|
||||
|
||||
$('#world-map-markers').vectorMap(
|
||||
{
|
||||
map: 'world_mill_en',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#fff',
|
||||
borderOpacity: 0.25,
|
||||
borderWidth: 0,
|
||||
color: '#e6e6e6',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#cccccc'
|
||||
}
|
||||
},
|
||||
|
||||
markerStyle: {
|
||||
initial: {
|
||||
r: 5,
|
||||
'fill': '#fff',
|
||||
'fill-opacity':1,
|
||||
'stroke': '#000',
|
||||
'stroke-width' : 1,
|
||||
'stroke-opacity': 0.4
|
||||
},
|
||||
},
|
||||
|
||||
markers : [{
|
||||
latLng : [21.00, 78.00],
|
||||
name : 'INDIA : 350'
|
||||
|
||||
},
|
||||
{
|
||||
latLng : [-33.00, 151.00],
|
||||
name : 'Australia : 250'
|
||||
|
||||
},
|
||||
{
|
||||
latLng : [36.77, -119.41],
|
||||
name : 'USA : 250'
|
||||
|
||||
},
|
||||
{
|
||||
latLng : [55.37, -3.41],
|
||||
name : 'UK : 250'
|
||||
|
||||
},
|
||||
{
|
||||
latLng : [25.20, 55.27],
|
||||
name : 'UAE : 250'
|
||||
|
||||
}],
|
||||
|
||||
series: {
|
||||
regions: [{
|
||||
values: {
|
||||
"US": '#2CA8FF',
|
||||
"SA": '#49c5b6',
|
||||
"AU": '#18ce0f',
|
||||
"IN": '#f96332',
|
||||
"GB": '#FFB236',
|
||||
},
|
||||
attribute: 'fill'
|
||||
}]
|
||||
},
|
||||
hoverOpacity: null,
|
||||
normalizeFunction: 'linear',
|
||||
zoomOnScroll: false,
|
||||
scaleColors: ['#000000', '#000000'],
|
||||
selectedColor: '#000000',
|
||||
selectedRegions: [],
|
||||
enableZoom: false,
|
||||
hoverColor: '#fff',
|
||||
});
|
||||
}
|
||||
|
||||
$('#india').vectorMap({
|
||||
map : 'in_mill',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#f96332'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#usa').vectorMap({
|
||||
map : 'us_aea_en',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#2CA8FF'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#australia').vectorMap({
|
||||
map : 'au_mill',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#18ce0f'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#uk').vectorMap({
|
||||
map : 'uk_mill_en',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial : {
|
||||
fill : '#00ced1'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
1
admin/assets/js/pages/maps/jvectormap.min.js
vendored
Normal file
1
admin/assets/js/pages/maps/jvectormap.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
$(function(){$("#world-map-markers").vectorMap({map:"world_mill_en",normalizeFunction:"polynomial",hoverOpacity:.7,hoverColor:!1,backgroundColor:"transparent",regionStyle:{initial:{fill:"rgba(210, 214, 222, 1)","fill-opacity":1,stroke:"none","stroke-width":0,"stroke-opacity":1},hover:{fill:"rgba(255, 193, 7, 2)",cursor:"pointer"},selected:{fill:"yellow"},selectedHover:{}},markerStyle:{initial:{fill:"#fff",stroke:"#FFC107 "}},markers:[{latLng:[37.09,-95.71],name:"America"},{latLng:[51.16,10.45],name:"Germany"},{latLng:[-25.27,133.77],name:"Australia"},{latLng:[56.13,-106.34],name:"Canada"
|
||||
6
admin/assets/js/pages/medias/image-gallery.js
Normal file
6
admin/assets/js/pages/medias/image-gallery.js
Normal file
@ -0,0 +1,6 @@
|
||||
$(function () {
|
||||
$('#aniimated-thumbnials').lightGallery({
|
||||
thumbnail: true,
|
||||
selector: 'a'
|
||||
});
|
||||
});
|
||||
94
admin/assets/js/pages/range-sliders.js
Normal file
94
admin/assets/js/pages/range-sliders.js
Normal file
@ -0,0 +1,94 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
//Taken from http://ionden.com/a/plugins/ion.rangeSlider/demo.html
|
||||
|
||||
$("#range_01").ionRangeSlider();
|
||||
|
||||
$("#range_02").ionRangeSlider({
|
||||
min: 100,
|
||||
max: 1000,
|
||||
from: 550
|
||||
});
|
||||
|
||||
$("#range_03").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
from: 200,
|
||||
to: 800,
|
||||
prefix: "$"
|
||||
});
|
||||
|
||||
$("#range_04").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -1000,
|
||||
max: 1000,
|
||||
from: -500,
|
||||
to: 500
|
||||
});
|
||||
|
||||
$("#range_05").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -1000,
|
||||
max: 1000,
|
||||
from: -500,
|
||||
to: 500,
|
||||
step: 250
|
||||
});
|
||||
|
||||
|
||||
$("#range_06").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -12.8,
|
||||
max: 12.8,
|
||||
from: -3.2,
|
||||
to: 3.2,
|
||||
step: 0.1
|
||||
});
|
||||
|
||||
$("#range_07").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
from: 1,
|
||||
to: 5,
|
||||
values: [0, 10, 100, 1000, 10000, 100000, 1000000]
|
||||
});
|
||||
|
||||
|
||||
$("#range_08").ionRangeSlider({
|
||||
grid: true,
|
||||
from: 5,
|
||||
values: [
|
||||
"zero", "one",
|
||||
"two", "three",
|
||||
"four", "five",
|
||||
"six", "seven",
|
||||
"eight", "nine",
|
||||
"ten"
|
||||
]
|
||||
});
|
||||
|
||||
$("#range_09").ionRangeSlider({
|
||||
grid: true,
|
||||
from: 3,
|
||||
values: [
|
||||
"January", "February", "March",
|
||||
"April", "May", "June",
|
||||
"July", "August", "September",
|
||||
"October", "November", "December"
|
||||
]
|
||||
});
|
||||
|
||||
$("#range_10").ionRangeSlider({
|
||||
grid: true,
|
||||
min: 1000,
|
||||
max: 1000000,
|
||||
from: 100000,
|
||||
step: 1000,
|
||||
prettify_enabled: false
|
||||
});
|
||||
});
|
||||
4
admin/assets/js/pages/tables/editable-table.js
Normal file
4
admin/assets/js/pages/tables/editable-table.js
Normal file
@ -0,0 +1,4 @@
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('#mainTable').editableTableWidget();
|
||||
});
|
||||
11
admin/assets/js/pages/tables/footable.js
Normal file
11
admin/assets/js/pages/tables/footable.js
Normal file
@ -0,0 +1,11 @@
|
||||
'use strict';
|
||||
$(document).ready(function() {
|
||||
$('.table').footable({
|
||||
"paging": {
|
||||
"enabled": true
|
||||
},
|
||||
"sorting": {
|
||||
"enabled": true
|
||||
}
|
||||
});
|
||||
});
|
||||
158
admin/assets/js/pages/tables/jquery-datatable.js
vendored
Normal file
158
admin/assets/js/pages/tables/jquery-datatable.js
vendored
Normal file
@ -0,0 +1,158 @@
|
||||
$(function () {
|
||||
$('.js-basic-example').DataTable();
|
||||
|
||||
//Exportable table
|
||||
$('.js-exportable').DataTable({
|
||||
dom: 'Bfrtip',
|
||||
buttons: [
|
||||
'copy', 'csv', 'excel', 'pdf', 'print'
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
/* 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 = $('#example').DataTable( {
|
||||
"ajax": "assets/data/objects.txt",
|
||||
"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
|
||||
$('#example 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');
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
// Add row into table
|
||||
var addRowTable = {
|
||||
options: {
|
||||
addButton: "#addToTable",
|
||||
table: "#addrowExample",
|
||||
dialog: {}
|
||||
},
|
||||
initialize: function() {
|
||||
this.setVars().build().events()
|
||||
},
|
||||
setVars: function() {
|
||||
return this.$table = $(this.options.table), this.$addButton = $(this.options.addButton), this.dialog = {}, this.dialog.$wrapper = $(this.options.dialog.wrapper), this.dialog.$cancel = $(this.options.dialog.cancelButton), this.dialog.$confirm = $(this.options.dialog.confirmButton), this
|
||||
},
|
||||
build: function() {
|
||||
return this.datatable = this.$table.DataTable({
|
||||
aoColumns: [null, null, null, {
|
||||
bSortable: !1
|
||||
}],
|
||||
}), window.dt = this.datatable, this
|
||||
},
|
||||
events: function() {
|
||||
var object = this;
|
||||
return this.$table.on("click", "button.button-save", function(e) {
|
||||
e.preventDefault(), object.rowSave($(this).closest("tr"))
|
||||
}).on("click", "button.button-discard", function(e) {
|
||||
e.preventDefault(), object.rowCancel($(this).closest("tr"))
|
||||
}).on("click", "button.button-edit", function(e) {
|
||||
e.preventDefault(), object.rowEdit($(this).closest("tr"))
|
||||
}).on("click", "button.button-remove", function(e) {
|
||||
e.preventDefault();
|
||||
var $row = $(this).closest("tr");
|
||||
swal({
|
||||
title: "Are you sure?",
|
||||
text: "You will not be able to recover this imaginary file!",
|
||||
type: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#dc3545",
|
||||
confirmButtonText: "Yes, delete it!",
|
||||
closeOnConfirm: false
|
||||
}, function () {
|
||||
object.rowRemove($row)
|
||||
swal("Deleted!", "Your imaginary file has been deleted.", "success");
|
||||
});
|
||||
}), this.$addButton.on("click", function(e) {
|
||||
e.preventDefault(), object.rowAdd()
|
||||
}), this.dialog.$cancel.on("click", function(e) {
|
||||
e.preventDefault(), $.magnificPopup.close()
|
||||
}), this
|
||||
},
|
||||
rowAdd: function() {
|
||||
this.$addButton.attr({
|
||||
disabled: "disabled"
|
||||
});
|
||||
var actions, data, $row;
|
||||
actions = ['<button class="btn btn-sm btn-icon btn-pure btn-default on-editing button-save" data-toggle="tooltip" data-original-title="Save" hidden><i class="icon-drawer" aria-hidden="true"></i></button>', '<button class="btn btn-sm btn-icon btn-pure btn-default on-editing button-discard" data-toggle="tooltip" data-original-title="Discard" hidden><i class="icon-close" aria-hidden="true"></i></button>', '<button class="btn btn-sm btn-icon btn-pure btn-default on-default button-edit" data-toggle="tooltip" data-original-title="Edit"><i class="icon-pencil" aria-hidden="true"></i></button>', '<button class="btn btn-sm btn-icon btn-pure btn-default on-default button-remove" data-toggle="tooltip" data-original-title="Remove"><i class="icon-trash" aria-hidden="true"></i></button>'].join(" "), data = this.datatable.row.add(["", "", "", actions]), ($row = this.datatable.row(data[0]).nodes().to$()).addClass("adding").find("td:last").addClass("actions"), this.rowEdit($row), this.datatable.order([0, "asc"]).draw()
|
||||
},
|
||||
rowCancel: function($row) {
|
||||
var $actions, data;
|
||||
$row.hasClass("adding") ? this.rowRemove($row) : (($actions = $row.find("td.actions")).find(".button-discard").tooltip("hide"), $actions.get(0) && this.rowSetActionsDefault($row), data = this.datatable.row($row.get(0)).data(), this.datatable.row($row.get(0)).data(data), this.handleTooltip($row), this.datatable.draw())
|
||||
},
|
||||
rowEdit: function($row) {
|
||||
var data, object = this;
|
||||
data = this.datatable.row($row.get(0)).data(), $row.children("td").each(function(i) {
|
||||
var $this = $(this);
|
||||
$this.hasClass("actions") ? object.rowSetActionsEditing($row) : $this.html('<input type="text" class="form-control input-block" value="' + data[i] + '"/>')
|
||||
})
|
||||
},
|
||||
rowSave: function($row) {
|
||||
var $actions, object = this,
|
||||
values = [];
|
||||
$row.hasClass("adding") && (this.$addButton.removeAttr("disabled"), $row.removeClass("adding")), values = $row.find("td").map(function() {
|
||||
var $this = $(this);
|
||||
return $this.hasClass("actions") ? (object.rowSetActionsDefault($row), object.datatable.cell(this).data()) : $.trim($this.find("input").val())
|
||||
}), ($actions = $row.find("td.actions")).find(".button-save").tooltip("hide"), $actions.get(0) && this.rowSetActionsDefault($row), this.datatable.row($row.get(0)).data(values), this.handleTooltip($row), this.datatable.draw()
|
||||
},
|
||||
rowRemove: function($row) {
|
||||
$row.hasClass("adding") && this.$addButton.removeAttr("disabled"), this.datatable.row($row.get(0)).remove().draw()
|
||||
},
|
||||
rowSetActionsEditing: function($row) {
|
||||
$row.find(".on-editing").removeAttr("hidden"), $row.find(".on-default").attr("hidden", !0)
|
||||
},
|
||||
rowSetActionsDefault: function($row) {
|
||||
$row.find(".on-editing").attr("hidden", !0), $row.find(".on-default").removeAttr("hidden")
|
||||
},
|
||||
handleTooltip: function($row) {
|
||||
$row.find('[data-toggle="tooltip"]').tooltip()
|
||||
}
|
||||
};
|
||||
$(function() {
|
||||
addRowTable.initialize()
|
||||
})
|
||||
169
admin/assets/js/pages/treeview/bootstrap-treeview.js
vendored
Normal file
169
admin/assets/js/pages/treeview/bootstrap-treeview.js
vendored
Normal file
@ -0,0 +1,169 @@
|
||||
var defaultData = [
|
||||
{
|
||||
text: 'Parent 1',
|
||||
href: '#parent1',
|
||||
tags: ['4'],
|
||||
nodes: [
|
||||
{
|
||||
text: 'Child 1',
|
||||
href: '#child1',
|
||||
tags: ['2'],
|
||||
nodes: [
|
||||
{
|
||||
text: 'Grandchild 1',
|
||||
href: '#grandchild1',
|
||||
tags: ['0']
|
||||
},
|
||||
{
|
||||
text: 'Grandchild 2',
|
||||
href: '#grandchild2',
|
||||
tags: ['0']
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Child 2',
|
||||
href: '#child2',
|
||||
tags: ['0']
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Parent 2',
|
||||
href: '#parent2',
|
||||
tags: ['0']
|
||||
},
|
||||
{
|
||||
text: 'Parent 3',
|
||||
href: '#parent3',
|
||||
tags: ['0']
|
||||
},
|
||||
{
|
||||
text: 'Parent 4',
|
||||
href: '#parent4',
|
||||
tags: ['0']
|
||||
},
|
||||
{
|
||||
text: 'Parent 5',
|
||||
href: '#parent5' ,
|
||||
tags: ['0']
|
||||
}
|
||||
];
|
||||
|
||||
$('#treeview1').treeview({
|
||||
data: defaultData
|
||||
});
|
||||
|
||||
$('#treeview2').treeview({
|
||||
levels: 1,
|
||||
showBorder: false,
|
||||
data: defaultData
|
||||
});
|
||||
|
||||
$('#treeview3').treeview({
|
||||
levels: 99,
|
||||
showBorder: false,
|
||||
data: defaultData
|
||||
});
|
||||
|
||||
$('#treeview4').treeview({
|
||||
expandIcon: 'icon-arrow-right',
|
||||
collapseIcon: 'icon-arrow-down',
|
||||
nodeIcon: 'icon-folder',
|
||||
showBorder: false,
|
||||
data: defaultData
|
||||
});
|
||||
|
||||
$('#treeview5').treeview({
|
||||
showTags: true,
|
||||
showBorder: false,
|
||||
data: defaultData
|
||||
});
|
||||
|
||||
$('#treeview6').treeview({
|
||||
data: defaultData,
|
||||
showIcon: false,
|
||||
showCheckbox: true,
|
||||
showBorder: false,
|
||||
});
|
||||
|
||||
// Searchable
|
||||
var $searchableTree = $('#treeview7').treeview({
|
||||
data: defaultData,
|
||||
showBorder: false,
|
||||
});
|
||||
|
||||
var search = function(e) {
|
||||
var pattern = $('#input-search').val();
|
||||
var options = {
|
||||
ignoreCase: true,
|
||||
exactMatch: false,
|
||||
};
|
||||
var results = $searchableTree.treeview('search', [ pattern, options ]);
|
||||
}
|
||||
$('#btn-search').on('click', search);
|
||||
$('#input-search').on('keyup', search);
|
||||
|
||||
// Selectable
|
||||
var initSelectableTree = function() {
|
||||
return $('#treeview8').treeview({
|
||||
data: defaultData,
|
||||
showBorder: false,
|
||||
multiSelect: $('#chk-select-multi').is(':checked'),
|
||||
onNodeSelected: function(event, node) {
|
||||
// $('#selectable-output').prepend('<p>' + node.text + ' was selected</p>');
|
||||
toastr.options.closeButton = true;
|
||||
toastr.options.positionClass = 'toast-top-right';
|
||||
toastr.options.showDuration = 1000;
|
||||
toastr['info'](node.text + ' was selected');
|
||||
},
|
||||
onNodeUnselected: function (event, node) {
|
||||
// $('#selectable-output').prepend('<p>' + node.text + ' was unselected</p>');
|
||||
toastr.options.closeButton = true;
|
||||
toastr.options.positionClass = 'toast-top-right';
|
||||
toastr.options.showDuration = 1000;
|
||||
toastr['error'](node.text + ' was unselected');
|
||||
}
|
||||
});
|
||||
};
|
||||
var $selectableTree = initSelectableTree();
|
||||
|
||||
// JSON
|
||||
var json = '[' +
|
||||
'{' +
|
||||
'"text": "Parent 1",' +
|
||||
'"nodes": [' +
|
||||
'{' +
|
||||
'"text": "Child 1",' +
|
||||
'"nodes": [' +
|
||||
'{' +
|
||||
'"text": "Grandchild 1"' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Grandchild 2"' +
|
||||
'}' +
|
||||
']' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Child 2"' +
|
||||
'}' +
|
||||
']' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Parent 2"' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Parent 3"' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Parent 4"' +
|
||||
'},' +
|
||||
'{' +
|
||||
'"text": "Parent 5"' +
|
||||
'}' +
|
||||
']';
|
||||
|
||||
var $tree = $('#treeview9').treeview({
|
||||
data: json,
|
||||
showBorder: false
|
||||
});
|
||||
89
admin/assets/js/pages/treeview/jstree.js
Normal file
89
admin/assets/js/pages/treeview/jstree.js
Normal file
@ -0,0 +1,89 @@
|
||||
// inline data demo
|
||||
jQuery('#treeExample1').jstree({
|
||||
'core' : {
|
||||
'data' : [
|
||||
{
|
||||
"text" : "Root node",
|
||||
"children" : [
|
||||
{ "text" : "Child node 1" },
|
||||
{ "text" : "Child node 2" }
|
||||
]}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// html demo
|
||||
jQuery('#treeExample2, #treeExample3, #treeExample4').jstree();
|
||||
|
||||
// Json demo
|
||||
jQuery('#treeExample5').jstree({
|
||||
'core' : {
|
||||
'data' : {
|
||||
"url" : "assets/data/treeview_jstree.json",
|
||||
"dataType" : "json" // needed only if you do not supply JSON headers
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Ajax demo
|
||||
jQuery('#treeExample6').jstree({
|
||||
'core' : {
|
||||
'data' : {
|
||||
"url" : "//www.jstree.com/fiddle/?lazy",
|
||||
"data" : function (node) {
|
||||
return { "id" : node.id };
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// data from callback
|
||||
jQuery('#treeExample7').jstree({
|
||||
'core' : {
|
||||
'data' : function (node, cb) {
|
||||
if(node.id === "#") {
|
||||
cb([{"text" : "Root", "id" : "1", "children" : true}]);
|
||||
}
|
||||
else {
|
||||
cb(["Child"]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// interaction and events
|
||||
jQuery('#evts_button').on("click", function () {
|
||||
var instance = jQuery('#treeExample8').jstree(true);
|
||||
instance.deselect_all();
|
||||
instance.select_node('1');
|
||||
});
|
||||
jQuery('#treeExample8')
|
||||
.on("changed.jstree", function (e, data) {
|
||||
if(data.selected.length) {
|
||||
alert('The selected node is: ' + data.instance.get_node(data.selected[0]).text);
|
||||
}
|
||||
})
|
||||
.jstree({
|
||||
'core' : {
|
||||
'multiple' : false,
|
||||
'data' : [
|
||||
{ "text" : "Root node", "children" : [
|
||||
{ "text" : "Child node 1", "id" : 1 },
|
||||
{ "text" : "Child node 2" }
|
||||
]}
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// Checkbox
|
||||
$("#treeExample9").jstree({
|
||||
"plugins" : [ "checkbox" ]
|
||||
});
|
||||
|
||||
// Drag and drop
|
||||
$("#treeExample10").jstree({
|
||||
"core" : {
|
||||
"check_callback" : true
|
||||
},
|
||||
"plugins" : [ "dnd" ]
|
||||
});
|
||||
16
admin/assets/js/pages/ui/animations.js
Normal file
16
admin/assets/js/pages/ui/animations.js
Normal file
@ -0,0 +1,16 @@
|
||||
$(function () {
|
||||
$('.js-animations').bind('change', function () {
|
||||
var animation = $(this).val();
|
||||
$('.js-animating-object').animateCss(animation);
|
||||
});
|
||||
});
|
||||
|
||||
//Copied from https://github.com/daneden/animate.css
|
||||
$.fn.extend({
|
||||
animateCss: function (animationName) {
|
||||
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
|
||||
$(this).addClass('animated ' + animationName).one(animationEnd, function() {
|
||||
$(this).removeClass('animated ' + animationName);
|
||||
});
|
||||
}
|
||||
});
|
||||
140
admin/assets/js/pages/ui/dialogs.js
Normal file
140
admin/assets/js/pages/ui/dialogs.js
Normal file
@ -0,0 +1,140 @@
|
||||
$(function () {
|
||||
$('.js-sweetalert').on('click', function () {
|
||||
var type = $(this).data('type');
|
||||
if (type === 'basic') {
|
||||
showBasicMessage();
|
||||
}
|
||||
else if (type === 'with-title') {
|
||||
showWithTitleMessage();
|
||||
}
|
||||
else if (type === 'success') {
|
||||
showSuccessMessage();
|
||||
}
|
||||
else if (type === 'confirm') {
|
||||
showConfirmMessage();
|
||||
}
|
||||
else if (type === 'cancel') {
|
||||
showCancelMessage();
|
||||
}
|
||||
else if (type === 'with-custom-icon') {
|
||||
showWithCustomIconMessage();
|
||||
}
|
||||
else if (type === 'html-message') {
|
||||
showHtmlMessage();
|
||||
}
|
||||
else if (type === 'autoclose-timer') {
|
||||
showAutoCloseTimerMessage();
|
||||
}
|
||||
else if (type === 'prompt') {
|
||||
showPromptMessage();
|
||||
}
|
||||
else if (type === 'ajax-loader') {
|
||||
showAjaxLoaderMessage();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
//These codes takes from http://t4t5.github.io/sweetalert/
|
||||
function showBasicMessage() {
|
||||
swal("Here's a message!");
|
||||
}
|
||||
|
||||
function showWithTitleMessage() {
|
||||
swal("Here's a message!", "It's pretty, isn't it?");
|
||||
}
|
||||
|
||||
function showSuccessMessage() {
|
||||
swal("Good job!", "You clicked the button!", "success");
|
||||
}
|
||||
|
||||
function showConfirmMessage() {
|
||||
swal({
|
||||
title: "Are you sure?",
|
||||
text: "You will not be able to recover this imaginary file!",
|
||||
type: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#dc3545",
|
||||
confirmButtonText: "Yes, delete it!",
|
||||
closeOnConfirm: false
|
||||
}, function () {
|
||||
swal("Deleted!", "Your imaginary file has been deleted.", "success");
|
||||
});
|
||||
}
|
||||
|
||||
function showCancelMessage() {
|
||||
swal({
|
||||
title: "Are you sure?",
|
||||
text: "You will not be able to recover this imaginary file!",
|
||||
type: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: "#dc3545",
|
||||
confirmButtonText: "Yes, delete it!",
|
||||
cancelButtonText: "No, cancel plx!",
|
||||
closeOnConfirm: false,
|
||||
closeOnCancel: false
|
||||
}, function (isConfirm) {
|
||||
if (isConfirm) {
|
||||
swal("Deleted!", "Your imaginary file has been deleted.", "success");
|
||||
} else {
|
||||
swal("Cancelled", "Your imaginary file is safe :)", "error");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function showWithCustomIconMessage() {
|
||||
swal({
|
||||
title: "Sweet!",
|
||||
text: "Here's a custom image.",
|
||||
imageUrl: "../assets/images/sm/avatar2.jpg"
|
||||
});
|
||||
}
|
||||
|
||||
function showHtmlMessage() {
|
||||
swal({
|
||||
title: "HTML <small>Title</small>!",
|
||||
text: "A custom <span style=\"color: #CC0000\">html<span> message.",
|
||||
html: true
|
||||
});
|
||||
}
|
||||
|
||||
function showAutoCloseTimerMessage() {
|
||||
swal({
|
||||
title: "Auto close alert!",
|
||||
text: "I will close in 2 seconds.",
|
||||
timer: 2000,
|
||||
showConfirmButton: false
|
||||
});
|
||||
}
|
||||
|
||||
function showPromptMessage() {
|
||||
swal({
|
||||
title: "An input!",
|
||||
text: "Write something interesting:",
|
||||
type: "input",
|
||||
showCancelButton: true,
|
||||
closeOnConfirm: false,
|
||||
animation: "slide-from-top",
|
||||
inputPlaceholder: "Write something"
|
||||
}, function (inputValue) {
|
||||
if (inputValue === false) return false;
|
||||
if (inputValue === "") {
|
||||
swal.showInputError("You need to write something!"); return false
|
||||
}
|
||||
swal("Nice!", "You wrote: " + inputValue, "success");
|
||||
});
|
||||
}
|
||||
|
||||
function showAjaxLoaderMessage() {
|
||||
swal({
|
||||
title: "Ajax request example",
|
||||
text: "Submit to run ajax request",
|
||||
type: "info",
|
||||
showCancelButton: true,
|
||||
closeOnConfirm: false,
|
||||
showLoaderOnConfirm: true,
|
||||
}, function () {
|
||||
setTimeout(function () {
|
||||
swal("Ajax request finished!");
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
7
admin/assets/js/pages/ui/modals.js
Normal file
7
admin/assets/js/pages/ui/modals.js
Normal file
@ -0,0 +1,7 @@
|
||||
$(function () {
|
||||
$('.js-modal-buttons .btn').on('click', function () {
|
||||
var color = $(this).data('color');
|
||||
$('#mdModal .modal-content').removeAttr('class').addClass('modal-content modal-col-' + color);
|
||||
$('#mdModal').modal('show');
|
||||
});
|
||||
});
|
||||
47
admin/assets/js/pages/ui/notifications.js
Normal file
47
admin/assets/js/pages/ui/notifications.js
Normal file
@ -0,0 +1,47 @@
|
||||
$(function () {
|
||||
$('.jsdemo-notification-button button').on('click', function () {
|
||||
var placementFrom = $(this).data('placement-from');
|
||||
var placementAlign = $(this).data('placement-align');
|
||||
var animateEnter = $(this).data('animate-enter');
|
||||
var animateExit = $(this).data('animate-exit');
|
||||
var colorName = $(this).data('color-name');
|
||||
|
||||
showNotification(colorName, null, placementFrom, placementAlign, animateEnter, animateExit);
|
||||
});
|
||||
});
|
||||
|
||||
function showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
|
||||
if (colorName === null || colorName === '') { colorName = 'bg-black'; }
|
||||
if (text === null || text === '') { text = 'Turning standard Bootstrap alerts'; }
|
||||
if (animateEnter === null || animateEnter === '') { animateEnter = 'animated fadeInDown'; }
|
||||
if (animateExit === null || animateExit === '') { animateExit = 'animated fadeOutUp'; }
|
||||
var allowDismiss = true;
|
||||
|
||||
$.notify({
|
||||
message: text
|
||||
},
|
||||
{
|
||||
type: colorName,
|
||||
allow_dismiss: allowDismiss,
|
||||
newest_on_top: true,
|
||||
timer: 50000,
|
||||
placement: {
|
||||
from: placementFrom,
|
||||
align: placementAlign
|
||||
},
|
||||
animate: {
|
||||
enter: animateEnter,
|
||||
exit: animateExit
|
||||
},
|
||||
template: '<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "p-r-35" : "") + '" role="alert">' +
|
||||
'<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' +
|
||||
'<span data-notify="icon"></span> ' +
|
||||
'<span data-notify="title">{1}</span> ' +
|
||||
'<span data-notify="message">{2}</span>' +
|
||||
'<div class="progress" data-notify="progressbar">' +
|
||||
'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
|
||||
'</div>' +
|
||||
'<a href="{3}" target="{4}" data-notify="url"></a>' +
|
||||
'</div>'
|
||||
});
|
||||
}
|
||||
93
admin/assets/js/pages/ui/range-sliders.js
Normal file
93
admin/assets/js/pages/ui/range-sliders.js
Normal file
@ -0,0 +1,93 @@
|
||||
$(function () {
|
||||
//Taken from http://ionden.com/a/plugins/ion.rangeSlider/demo.html
|
||||
|
||||
$("#range_01").ionRangeSlider();
|
||||
|
||||
$("#range_02").ionRangeSlider({
|
||||
min: 100,
|
||||
max: 1000,
|
||||
from: 550
|
||||
});
|
||||
|
||||
$("#range_03").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
from: 200,
|
||||
to: 800,
|
||||
prefix: "$"
|
||||
});
|
||||
|
||||
$("#range_04").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -1000,
|
||||
max: 1000,
|
||||
from: -500,
|
||||
to: 500
|
||||
});
|
||||
|
||||
$("#range_05").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -1000,
|
||||
max: 1000,
|
||||
from: -500,
|
||||
to: 500,
|
||||
step: 250
|
||||
});
|
||||
|
||||
|
||||
$("#range_06").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
min: -12.8,
|
||||
max: 12.8,
|
||||
from: -3.2,
|
||||
to: 3.2,
|
||||
step: 0.1
|
||||
});
|
||||
|
||||
$("#range_07").ionRangeSlider({
|
||||
type: "double",
|
||||
grid: true,
|
||||
from: 1,
|
||||
to: 5,
|
||||
values: [0, 10, 100, 1000, 10000, 100000, 1000000]
|
||||
});
|
||||
|
||||
|
||||
$("#range_08").ionRangeSlider({
|
||||
grid: true,
|
||||
from: 5,
|
||||
values: [
|
||||
"zero", "one",
|
||||
"two", "three",
|
||||
"four", "five",
|
||||
"six", "seven",
|
||||
"eight", "nine",
|
||||
"ten"
|
||||
]
|
||||
});
|
||||
|
||||
$("#range_09").ionRangeSlider({
|
||||
grid: true,
|
||||
from: 3,
|
||||
values: [
|
||||
"January", "February", "March",
|
||||
"April", "May", "June",
|
||||
"July", "August", "September",
|
||||
"October", "November", "December"
|
||||
]
|
||||
});
|
||||
|
||||
$("#range_10").ionRangeSlider({
|
||||
grid: true,
|
||||
min: 1000,
|
||||
max: 1000000,
|
||||
from: 100000,
|
||||
step: 1000,
|
||||
prettify_enabled: false
|
||||
});
|
||||
});
|
||||
17
admin/assets/js/pages/ui/sortable-nestable.js
Normal file
17
admin/assets/js/pages/ui/sortable-nestable.js
Normal file
@ -0,0 +1,17 @@
|
||||
$(function () {
|
||||
$('.dd').nestable();
|
||||
|
||||
$('.dd').on('change', function () {
|
||||
var $this = $(this);
|
||||
var serializedData = window.JSON.stringify($($this).nestable('serialize'));
|
||||
|
||||
$this.parents('div.body').find('textarea').val(serializedData);
|
||||
});
|
||||
|
||||
$('.dd4').nestable();
|
||||
|
||||
$('.dd4').on('change', function () {
|
||||
var $this = $(this);
|
||||
var serializedData = window.JSON.stringify($($this).nestable('serialize'));
|
||||
});
|
||||
});
|
||||
9
admin/assets/js/pages/ui/tooltips-popovers.js
Normal file
9
admin/assets/js/pages/ui/tooltips-popovers.js
Normal file
@ -0,0 +1,9 @@
|
||||
$(function () {
|
||||
//Tooltip
|
||||
$('[data-toggle="tooltip"]').tooltip({
|
||||
container: 'body'
|
||||
});
|
||||
|
||||
//Popover
|
||||
$('[data-toggle="popover"]').popover();
|
||||
})
|
||||
Reference in New Issue
Block a user