dennis/Website-Templates
1
0
Fork 0
mirror of https://github.com/dawidolko/Website-Templates.git synced 2026-02-04 09:30:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Website templates

Browse Source
This commit is contained in:
Dawid Olko
2023-07-26 19:33:39 +02:00
commit 0d2d73a034
10339 changed files with 2002333 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

382
hybrid-bootstrap-admin-template/assets/js/Lightweight-Chart/chart.js Normal file
View File

@@ -0,0 +1,382 @@
/*
* cssCharts v0.1.0
* https://github.com/sultantarimo
*
* (c)2015 Sultan Tarimo - sultantarimo@me.com
* Released under the MIT license
*/
var thychart = {
donut: function(node){
var $chart = $(node);
var val = $(node).attr("data-percent");
var title = $(node).attr("data-title");
$chart.parent().addClass("donut");
if(!title) title = "%";
if(val > 1 || val < 0) return("between 0 - 1 please");
var r = 180;
var c = 360;
var val = parseFloat(val).toFixed(2)*c;
var $temp = $('<div></div>').addClass("pie spinner");
var $title = $("<h2><p></p><span></span></h2>");
$title.find("p").text(val/360*100);
$title.find("span").text(title);
$chart.on('show-donut-chart', function(){
$title.find("p").text(0);
$({countNum: $title.find("p").text()}).animate({countNum: val/360*100}, {
duration: 500,
easing:'linear',
step: function() {
$title.find("p").text(Math.floor(this.countNum));
},
complete: function() {
$title.find("p").text(this.countNum);
}
});
$chart.on('hide-donut-chart', function(){
$title.find("p").text(0);
});
});
$chart.append($title);
var chart = {
nodes: {
spinner: function(){
return $temp.clone().attr(
"style",
'-webkit-transform: rotate('+ chart.values.spinner +'deg);' +
'-moz-transform: rotate('+ chart.values.spinner +'deg);' +
'transform: rotate('+ chart.values.spinner +'deg);'
);
},
mask: function(){
return $temp.clone().addClass(chart.values.selector).attr(
"style",
'-webkit-transform: rotate('+ chart.values.mask + 'deg);' +
'-moz-transform: rotate('+ chart.values.mask + 'deg);' +
'transform: rotate('+ chart.values.mask + 'deg);'
);
}
},
values: {spinner: val, mask: c, selector: "" }
};
var prependNodes = function(data){
$.each(data, function(i, _node) {$chart.prepend(_node());});
};
// IF LESS THAN 50%
if(val < r){
var val1 = val;
var chart$clone = jQuery.extend({}, chart);
chart$clone.values.spinner = val1;
chart$clone.values.selector = "mask";
prependNodes(chart$clone.nodes);
}
// IF GREATER THAN 50%
else{
var val2 = val - r;
var val1 = val - val2;
val2 = val2 + r;
var chart$clone = jQuery.extend({}, chart);
chart$clone.values.spinner = val1;
chart$clone.values.mask = val2;
prependNodes(chart$clone.nodes);
}
},
bar: function(node){
var $node = $(node);
$node.parent().addClass("bar");
var data = $node.attr("data-bars");
var unit = $node.attr("data-unit");
var height = $node.height();
var grid = $node.attr("data-grid");
var barWidth = $node.attr("data-width");
var max = $node.attr("data-max");
if(parseInt(grid) === 0) $node.css("background", "none");
if(!data) return("No data to work with");
if(!unit) unit = "%";
// get max data point
var maxData = function(){
var arr = JSON.parse("[" + data + "]");
return Math.max.apply(Math, arr.map(function(i) { return i[0]; }));
};
// If "data-max" is not specified or if the heighest data-point is greater than data-max
if(maxData() > max || !max){ max = maxData(); }
data = JSON.parse("[[" + data + "]]");
var barsNo = data[0].length;
$.each(data, function(i, v) {
// first dimension
var uls = $("<ul></ul>");
var lis = $("<li><span></span></li>").height(height);
for (i = 0; i < data[0].length; i++){
var ul = uls.clone();
$.each(v[i], function(index, val) {
// second dimension
var li = lis.clone();
var value = (data[0][i][index]);
var title = value + unit;
var percent = (value/max) * 100;
li.find("span").attr("title", title);
if(!barWidth){
li.find("span").attr(
"style",
"height:" + percent + "%"
);
}else{
li.find("span").attr(
"style",
"height:" + percent + "%;" +
"width:" + barWidth + "px"
);
}
ul.append(li);
});
$node.append(ul);
}
});
var grid = $("<div class='grid'></div>");
$node.parent().append(grid);
for(var i = 0; i <= 10; i++) {
var toPerc = (i*10).toFixed(0);
var converter = max/100;
var toUnit = (toPerc * converter).toFixed(0);
if(i % 2 == 0){
var line = $("<hr/>").css({bottom: toPerc+"%"}).attr("data-y", toUnit + unit);
$node.parent().find(".grid").append(line);
}
}
$node.parent().width($node.width());
},
line: function(node){
var setAngle = function(cord, area, node){
var hypotenuse = Math.round( Math.sqrt(Math.pow(area.width, 2) + Math.pow(area.height, 2)) );
var angSin = area.height / hypotenuse;
var ang = Math.round(Math.asin(angSin) * 180/Math.PI);
ang = -ang;
var $node = $(node).clone()
.attr("style",
'width:'+ hypotenuse +'px;'
)
.attr("data-height", area.height)
.attr("data-width", area.width)
.attr("data-hypotenuse", hypotenuse)
.attr("data-angle", ang)
.attr("data-x", cord.x)
.attr("data-y", cord.y);
$node.find("span")
.attr(
"style",
'width:'+ hypotenuse +'px;' +
'-webkit-transform: rotate('+ ang +'deg);' +
'-moz-transform: rotate('+ ang +'deg);' +
'transform: rotate('+ ang +'deg);'
)
.attr("data-height", area.height)
.attr("data-width", area.width)
.attr("data-hypotenuse", hypotenuse)
.attr("data-angle", ang);
$node.find("a")
.attr(
"style",
'height:'+ 40 +'px;'+
'width:'+ 40 +'px;'
)
.attr("data-x", cord.x)
.attr("data-y", cord.y);
return({
angle: ang,
hypo: hypotenuse,
width: area.width,
height: area.height,
node: $node
});
};
var setPosition = function(data){
var prevNode = $("ul").find(data).prev();
var totalWidth = parseInt($("ul").find(data).attr("data-width").replace("-", ""));
var totalHeight = parseInt($("ul").find(data).attr("data-height").replace("-", ""));
var totalY = parseInt($("ul").find(data).attr("data-y").replace("-", ""));
if(prevNode.length === 0){
$("ul").find(data).attr("data-total-width",totalWidth);
$("ul").find(data).css("left",0 + "px");
$("ul").find(data).attr("data-total-height", totalY - totalHeight );
$("ul").find(data).css("bottom",totalY + "px");
$("ul").find(data).attr("data-y",totalY);
$("ul").find(data).attr("data-x",0);
}else{
var currentWidth = parseInt(prevNode.attr("data-total-width").replace("-", ""));
totalWidth = parseInt(prevNode.attr("data-total-width").replace("-", "")) + parseInt(data.attr("data-width").replace("-", ""));
$("ul").find(data).attr("data-total-width",totalWidth);
$("ul").find(data).css("left",currentWidth + "px");
var currentHeight = parseInt(prevNode.attr("data-total-height").replace("-", ""));
totalHeight = parseInt(prevNode.attr("data-total-height")) + parseInt(data.attr("data-height"));
$("ul").find(data).attr("data-total-height",totalHeight);
$("ul").find(data).css("bottom",currentHeight + "px");
$("ul").find(data).attr("data-y",currentHeight);
$("ul").find(data).attr("data-x",currentWidth);
}
};
var setContWidth = function($chart,data){
var width = Math.floor($chart.find("li:last-child").attr("data-x")) + 20;
var height = data[1];
height = Math.max.apply(Math, height) + 20;
$chart.css({width: width, height: height});
$chart.parent().css({width: width, height: height});
$chart.parent().addClass("line");
};
var drawSVG = function(){
var svg = $(
'<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">'+
'<path d=""></path>' +
'</svg>'
);
$chart.parent().append(svg);
function convertToArrayOfObjects(data) {
var keys = data.shift(),
i = 0, k = 0,
obj = null,
output = [];
for (i = 0; i < data.length; i++) {
obj = {};
for (k = 0; k < keys.length; k++) {
obj[k] = {
x: keys[k],
y: $chart.parent().find(".grid hr:last-child").attr("data-y")-data[i][k]
}
}
output.push(obj);
}
return output[0];
}
var points = convertToArrayOfObjects(data);
var counter = 0;
function addPoint(x, y, isFirst){
if(isFirst == "last"){
var last = Object.keys(points).length-1;
var x1 = points[last].x;
var y1 = points[0].y;
var x2 = points[0].x;
var y2 = points[last].y;
console.log(x1,y1,x2,y2);
var new_point = "L" +
x1 +
"," +
x1 +
" L" +
0 +
"," +
x1 +
" Z";
}else{
var new_point = (isFirst? "M" : " L")+x+","+y;
}
$chart.parent().find("path").attr("d", $chart.parent().find("path").attr("d")+""+new_point);
counter++;
if(counter < Object.keys(points).length){
setTimeout(addPoint(points[counter].x, points[counter].y, false),200); // Add a new point after 200 milliseconds
}
if(counter == Object.keys(points).length){
setTimeout(addPoint(null, null, "last"),200);
}
}
addPoint(points[0].x, points[0].y, true);
};
var $chart = $(node);
var fill = $chart.attr("data-fill");
var cord = $chart.attr("data-cord");
cord = JSON.parse("[" + cord + "]");
var data = cord;
var grid = $("<div class='grid'></div>");
$chart.parent().append(grid);
for (var i = 0; i < data[0].length; i++) {
cord = {
x: data[0][i],
y: data[1][i]
};
var area = {
width: data[0][i+1] - data[0][i],
height: data[1][i+1] - data[1][i]
};
var triangle = setAngle(cord, area, $("<li><span></span><a></a></li>"));
$chart.append(triangle.node);
setPosition(triangle.node);
setContWidth($chart, data);
if(i % 2 === 0){
var gridSpace = $chart.height() / 10;
var line = $("<hr/>").css({bottom: i*gridSpace}).attr("data-y", i*gridSpace);
$chart.parent().find(".grid").append(line);
}
}
if(fill){
drawSVG();
}
}
};

513
hybrid-bootstrap-admin-template/assets/js/Lightweight-Chart/csscharts.css Normal file
View File

@@ -0,0 +1,513 @@
/*
* cssCharts v0.3.0
* jquery plugin to create donut and bar charts with css
* https://github.com/sultantarimo
*
* (c)2015 Sultan Tarimo - sultantarimo@me.com
* Released under the MIT license
*/
.chart *, .chart{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
.chart{
width:auto;
display:block;
position:relative;
font-family:sans-serif;
font-size:14px;
margin: 0 auto;
}
/* bar chart */
.chart.bar{height:200px;}
.bar-chart{
display: table;
table-layout: fixed;
width: auto;
height: 100%;
margin: 0 auto;
z-index:20;
position:absolute;
left:0px;
}
.bar-chart ul{
margin-left: 34px;
float: left;
display: block;
height:100%;
}
.bar-chart li{
position: relative;
display: table-cell;
vertical-align: bottom;
height: 100px;
}
.bar-chart span{
margin: 0 6px;
display: block;
background: rgb(241,127,73);
width: 34px;
position:relative;
-webkit-animation: drawBar 0.3s ease-in-out;
-moz-animation: drawBar 0.3s ease-in-out;
animation: drawBar 0.3s ease-in-out;
-webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
.bar-chart li:hover span{
box-shadow:0 0 0 4px rgb(241,127,73);
cursor:pointer;
}
.bar-chart li:nth-child(2n+1):hover span{
box-shadow:0 0 0 4px #bd380f;
}
.bar-chart li:nth-child(2n+1) span{background-color:#bd380f;}
.bar-chart ul:last-of-type li:last-child span{margin-right:0px;}
.bar-chart ul:first-of-type li:first-child span{margin-left:0px;}
.bar-chart ul:last-of-type {margin-right: 0px;}
.bar-chart ul:first-of-type {margin-left: 0px;}
.bar-chart.left-bar ul:last-of-type {margin-right: 0px;}
.bar-chart.left-bar ul{margin-right: 34px;float:left;margin-left:0px;}
.bar-chart span:before {
position: absolute;
bottom: 100%;
margin-bottom: 10px;
display: block;
text-align: center;
content: attr(title);
word-wrap: break-word;
font-size: 12px;
width: auto;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
}
.bar-chart li span:before {
-webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
@-webkit-keyframes drawBar {0% {height: 0;}}
@-moz-keyframes drawBar {0% {height: 0;}}
@keyframes drawBar {0% {height: 0;}}
/* donut chart */
.chart.donut{
width:200px;
height:200px;
}
.donut-chart{
width:100%;height:100%;
position:relative;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
.donut-chart.fill{
background:rgb(241,127,73);
}
.donut-chart:after{
content:"";
position: absolute;
width: 86%;
height: 86%;
background: #FFF;
left: 50%;
top: 50%;
z-index: 400;
margin: 0 auto;
pointer-events: none;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.donut-chart h2{
text-align:center;
position: absolute;
line-height: 140%;
width: 100%;
margin-top:-30px;
top:50%;
z-index:500;
pointer-events: none;
font-size:26px;
font-weight:400;
color:rgb(0,0,0);
}
.donut-chart h2 span{
display:block;
width:100%;
font-size:14px;
color:rgb(142,143,143);
margin-top:-10px;
}
.donut-chart .spinner{
z-index: 200;
border-right: none;
-webkit-border-radius: 100% 0 0 100% / 50% 0 0 50%;
-moz-border-radius: 100% 0 0 100% / 50% 0 0 50%;
border-radius: 100% 0 0 100% / 50% 0 0 50%;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation: rotateDonut 0.3s ease-in-out;
-moz-animation: rotateDonut 0.3s ease-in-out;
animation: rotateDonut 0.3s ease-in-out;
-webkit-transition: all 160ms ease-in-out;
-moz-transition: all 160ms ease-in-out;
transition: all 160ms ease-in-out;
}
.spinner ~ .pie{
pointer-events: none;
}
.donut-chart.fill .pie,
.pie-chart .pie{
-webkit-box-shadow: 0 0 0 4px #bd380f;
-moz-box-shadow: 0 0 0 4px #bd380f;
box-shadow: 0 0 0 4px #bd380f;
}
@-webkit-keyframes rotateDonut {0% {transform: rotate(0deg);}}
@-moz-keyframes rotateDonut {0% {transform: rotate(0deg);}}
@keyframes rotateDonut {0% {transform: rotate(0deg);}}
.donut-chart .spinner.temp{display:none;}
.donut-chart .pie{
width: 50%;
height: 100%;
position: absolute;
background: #bd380f;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
transform-origin: 100% 50%;
}
.donut-chart .mask{
background:rgb(248,248,248);
z-index: 400;
margin-left: -1px;
}
.pie-chart:after{
display:none;
}
.chart.donut .pie-chart h2,
.chart.donut .pie-chart h2 span{color:#FFF;}
/* pie chart */
.chart.pie svg{width:100%;height:100%;}
.chart.pie {
width: 200px;
height: 200px;
}
.chart.pie svg text{
text-anchor: middle;
fill:white;
stroke-width:0;
transform:translate(120,-80);
}
.chart.pie svg path:hover{
stroke-width:10px;
}
.charts-tip{
display:block;
position: absolute;
font-size: 16px;
color: #FFF;
background: rgba(0,0,0,0.8);
pointer-events: none;
font-family:sans-serif;
padding:6px 12px;
z-index:100;
width:auto;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.chart.pie .pie-legend{
position:absolute;
top:50%;
right:0;
margin-right:-30px;
transform:translateX(100%) translateY(-50%);
}
.chart.pie .pie-legend li{
display:block;
margin-bottom:14px;
clear:both;
}
.chart.pie .pie-legend li i{
top:1px;
position:relative;
display:block;
float:left;
width:14px;
height:14px;
background:#DDD;
margin-right:10px;
box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2);
}
.chart.pie .pie-legend li p{clear:both;display:inline;}
/* pie chart */
/* line chart */
.chart.line{width:auto;height:auto;margin:0 auto;position:relative;}
.chart .line-chart{
min-width:100px;
min-height:100px;
width:100%;
height:100%;
margin:0px auto;
display:block;
position:relative;
z-index:20;
}
/* line chart borders and grids */
.line-chart:after{
content:"";
display:block;
position:absolute;
left:0px;bottom:0px;
height:1px;width:100%;
background:rgb(238,238,238);
padding-right:10px;
}
.chart .grid{
width:100%;
height:100%;
position:absolute;
left:0px;
bottom:0px;
}
.chart hr{
position:absolute;
left:0px;
bottom:0px;
width:100%;
height:1px;
outline:none;
border:none;
background:rgb(238,238,238);
}
.chart hr:before{
position:absolute;
right:100%;
top:0px;
margin-right:20px;
color:rgba(0,0,0,0.4);
font-size:12px;
content:attr(data-y);
text-align:right;
-webkit-transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
}
/* line chart borders and grids */
/* line chart line */
.line-chart li{
display:block;height:1px;
float:left;position:relative;
position:absolute;
}
/* line chart points tooltip */
.line-chart li a:hover:before,
.line-chart li a:hover:after{display:block;z-index:10;}
.line-chart li a:before{
content:attr(data-y);
cursor:pointer;
display:none;
position:absolute;
font-size:14px;
color:#FFF;
bottom:100%;
left:50%;
margin-bottom:-4px;
text-align:center;
width:40px;
background:rgba(0,0,0,0.8);
padding:8px;
z-index:40;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
transform:translateX(-50%);
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
}
.line-chart li a:after{
z-index:50;
content:"";
width: 0;
height: 0;
display:none;
position:absolute;
bottom:100%;
left:50%;
margin-bottom:-16px;
border:6px solid rgba(0,0,0,0);
border-top: 6px solid rgba(0,0,0,0.8);
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
transform:translateX(-50%);
}
.line-chart li a{
display:block;
position:absolute;
cursor:pointer;
width:40px;
height:40px;
left:0px;
top:0px;
z-index:30;
-webkit-transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
}
/* line chart points tooltip */
/* line chart points */
.line-chart li span{
display:block;height:1px;
background:rgb(241,127,73);
float:left;
position:absolute;
}
.line-chart.no-points li span{
display:none;
}
.line-chart li span:before{
content:"";
position:absolute;
left:-4px;bottom:-4px;
width:6px;height:6px;
display:block;
-webkt-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
.line-chart li:hover span:before{
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
transform:scale(1.3);
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.line-chart li span:before,
.line-chart li span:after{
background:rgb(241,127,73);
border:2px solid #bd380f;
-webkit-box-shadow:0 0 0 4px #FFF;
-moz-box-shadow:0 0 0 4px #FFF;
box-shadow:0 0 0 4px #FFF;
}
/* line chart points */
/* line chart line */
.chart.line svg,
.chart.line > div{
height: 100%;
width: 100%;
position:absolute;
bottom:0px;
left:0px;
opacity:1;
-webkit-animation: drawLine .3s ease-in-out;
-moz-animation: drawLine .3s ease-in-out;
animation: drawLine .3s ease-in-out;
}
.chart.line svg path{
fill: rgba(241,127,73,0.0);
stroke: rgb(241,127,73);
stroke-width: 2px;
}
.chart.line.dotted svg path{
/*if you want it dashed instead of filled*/
stroke-dasharray: 3;
}
.chart.line .fill svg path{
fill: rgba(241,127,73,0.1);
stroke:none;
stroke-width:0px;
}
/* line chart animation */
@-webkit-keyframes drawLine {0% {opacity: 0;}}
@-moz-keyframes drawLine {0% {opacity: 0;}}
@keyframes drawLine {0% {opacity: 0;}}
@-webkit-keyframes drawChart {0% {width: 0;}}
@-moz-keyframes drawChart {0% {width: 0;}}
@keyframes drawChart {0% {width: 0;}}

120
hybrid-bootstrap-admin-template/assets/js/Lightweight-Chart/index - copy.html Normal file
View File

@@ -0,0 +1,120 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="A jquery plugin to create simple donut, bar or line charts with dom nodes, style with css.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>cssCharts.js - jquery css charts</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="cssCharts.css">
<script src="jquery.chart.js"></script>
<style>
/* page specific styles*/
h1{text-align:center;font-family:sans-serif;font-size:28px;color:#333;padding:40px 0 0 0;}
h2{text-align:center;font-family:sans-serif;font-size:18px;color:#333;padding:40px 0 0 0;}
hr{width:60%;height:1px;background:none;border:none;border-bottom:1px dashed rgba(0,0,0,0.1);outline:none;margin:40px auto 60px auto;}
.desc p{text-align:center;font-size:16px;color:rgba(0,0,0,0.6);padding:20px 0 0 0;font-family:sans-serif;}
.desc a{color:blue;}
.wrap{margin:0 auto;width:640px;padding-bottom:100px;}
#line{width:400px;}
/* page specific styles*/
</style>
</head>
<body>
<div class="wrap">
<div class="desc">
<h1>cssCharts.js plugin</h1><p>by
<a href="http://twitter.com/thysultan">@thysultan</a> on
<a href="https://github.com/sultantarimo/cssCharts.js">github</a>
</p>
</div>
<h2>bar chart</h2>
<hr>
<div class="chart">
<ul class="bar-chart" data-bars="[4,2],[4,5],[8,3],[4,2],[4,2]" data-max="10" data-unit="k" data-width="24"></ul>
</div>
<!-- data max is the 100% point of the graph -->
<!-- set data-grid to 0 for no grid -->
<!-- data-width is the individual bars width -->
<h2>donut chart v1</h2>
<hr>
<div class="chart">
<div class="donut-chart" data-percent="0.61" data-title="uptime %"></div>
</div>
<h2>donut chart v2</h2>
<hr>
<div class="chart">
<div class="donut-chart fill" data-percent="0.61" data-title="uptime %"></div>
</div>
<h2>donut chart v2</h2>
<hr>
<div class="chart">
<div class="donut-chart pie-chart fill" data-percent="0.61" data-title="uptime %"></div>
</div>
<!-- pie-chart class for pie chart -->
<!-- fill class for default donut fill enabled-->
<h2>line chart v1</h2>
<hr>
<div class="chart">
<ul data-cord="[[0,70,120,160,200,262,280,340,380,420,460],[140,150,40,90,40,60,120,20,60,90,10]],[[0,70,120,160,200,262,280,340,380,420,460],[200,190,80,130,80,100,160,60,100,130,50]]" class="line-chart"></ul>
</div>
<!-- multiple graphs [[x cords],[y cords]] [[x cords],[y cords]] -->
<h2>line chart v2</h2>
<hr>
<div class="chart" id="line">
<ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" class="line-chart"></ul>
</div>
<h2>line chart v3</h2>
<hr>
<div class="chart dotted">
<ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" class="line-chart"></ul>
</div>
<h2>line chart v4</h2>
<hr>
<div class="chart dotted">
<ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" data-fill="1" class="line-chart no-points"></ul>
</div>
<!-- single graph [x cords],[y cords] -->
<br><br><br>
<h2>pie chart v1</h2>
<hr>
<div class="chart">
<div class="pie-thychart" data-set='[["people", 20], ["countries",30], ["developers",60]]' data-colors="#FBE4DB,#F17F49,#BD380F"></div>
</div>
</div>
<script>
$(function() {
$('.bar-chart').cssCharts({type:"bar"});
$('.donut-chart').cssCharts({type:"donut"}).trigger('show-donut-chart');
$('.line-chart').cssCharts({type:"line"});
$('.pie-thychart').cssCharts({type:"pie"});
});
</script>
</body>
</html>

120
hybrid-bootstrap-admin-template/assets/js/Lightweight-Chart/index.html Normal file
View File

@@ -0,0 +1,120 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="A jquery plugin to create simple donut, bar or line charts with dom nodes, style with css.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>cssCharts.js - jquery css charts</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="cssCharts.css">
<script src="jquery.chart.js"></script>
<style>
/* page specific styles*/
h1{text-align:center;font-family:sans-serif;font-size:28px;color:#333;padding:40px 0 0 0;}
h2{text-align:center;font-family:sans-serif;font-size:18px;color:#333;padding:40px 0 0 0;}
hr{width:60%;height:1px;background:none;border:none;border-bottom:1px dashed rgba(0,0,0,0.1);outline:none;margin:40px auto 60px auto;}
.desc p{text-align:center;font-size:16px;color:rgba(0,0,0,0.6);padding:20px 0 0 0;font-family:sans-serif;}
.desc a{color:blue;}
.wrap{margin:0 auto;width:640px;padding-bottom:100px;}
#line{width:400px;}
/* page specific styles*/
</style>
</head>
<body>
<div class="wrap">
<div class="desc">
<h1>cssCharts.js plugin</h1><p>by
<a href="http://twitter.com/thysultan">@thysultan</a> on
<a href="https://github.com/sultantarimo/cssCharts.js">github</a>
</p>
</div>
<h2>bar chart</h2>
<hr>
<div class="chart">
<ul class="bar-chart" data-bars="[4,2],[4,5],[8,3],[4,2],[4,2]" data-max="10" data-unit="k" data-width="24"></ul>
</div>
<!-- data max is the 100% point of the graph -->
<!-- set data-grid to 0 for no grid -->
<!-- data-width is the individual bars width -->
<h2>donut chart v1</h2>
<hr>
<div class="chart">
<div class="donut-chart" data-percent="0.61" data-title="uptime %"></div>
</div>
<h2>donut chart v2</h2>
<hr>
<div class="chart">
<div class="donut-chart fill" data-percent="0.61" data-title="uptime %"></div>
</div>
<h2>donut chart v2</h2>
<hr>
<div class="chart">
<div class="donut-chart pie-chart fill" data-percent="0.61" data-title="uptime %"></div>
</div>
<!-- pie-chart class for pie chart -->
<!-- fill class for default donut fill enabled-->
<h2>line chart v1</h2>
<hr>
<div class="chart">
<ul data-cord="[[0,70,120,160,200,262,280,340,380,420,460],[140,150,40,90,40,60,120,20,60,90,10]],[[0,70,120,160,200,262,280,340,380,420,460],[200,190,80,130,80,100,160,60,100,130,50]]" class="line-chart"></ul>
</div>
<!-- multiple graphs [[x cords],[y cords]] [[x cords],[y cords]] -->
<h2>line chart v2</h2>
<hr>
<div class="chart" id="line">
<ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" class="line-chart"></ul>
</div>
<h2>line chart v3</h2>
<hr>
<div class="chart dotted">
<ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" class="line-chart"></ul>
</div>
<h2>line chart v4</h2>
<hr>
<div class="chart dotted">
<ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" data-fill="1" class="line-chart no-points"></ul>
</div>
<!-- single graph [x cords],[y cords] -->
<br><br><br>
<h2>pie chart v1</h2>
<hr>
<div class="chart">
<div class="pie-thychart" data-set='[["people", 20], ["countries",30], ["developers",60]]' data-colors="#FBE4DB,#F17F49,#BD380F"></div>
</div>
</div>
<script>
$(function() {
$('.bar-chart').cssCharts({type:"bar"});
$('.donut-chart').cssCharts({type:"donut"}).trigger('show-donut-chart');
$('.line-chart').cssCharts({type:"line"});
$('.pie-thychart').cssCharts({type:"pie"});
});
</script>
</body>
</html>

505
hybrid-bootstrap-admin-template/assets/js/Lightweight-Chart/jquery.chart.js Normal file
View File

@@ -0,0 +1,505 @@
/*
* cssCharts v0.3.0
* jquery plugin to create donut and bar charts with css
* https://github.com/sultantarimo
*
* (c)2015 Sultan Tarimo - sultantarimo@me.com
* Released under the MIT license
*/
(function($){
$.fn.extend({
cssCharts: function(opts) {
var defs = {};
opts = $.extend(defs, opts);
return this.each(function() {
var _this = this;
if(opts.type == "bar"){thychart.bar(this);}
else if(opts.type == "line"){thychart.line(this);}
else if(opts.type == "donut"){thychart.donut(this);}
else if(opts.type == "pie"){thychart.pie(this);}
else{$(this).parent().hide();}
});
}
});
var thychart = {
pie: function(node){
var makeSVG = function(tag, attrs, val, title, i, fill) {
var $el = $(document.createElementNS('http://www.w3.org/2000/svg', tag));
var $g = $(document.createElementNS('http://www.w3.org/2000/svg', "g"));
var $rep = $('<li><i></i><p></p></li>');
$rep.find("p").html(title+": " + val);
$rep.find("i").css({background: fill});
$chart.find("."+$leg.attr("class")).append($rep);
for (var k in attrs){
$el.attr(k,attrs[k]).attr("data-val", val).attr("data-title",title).attr("id","path"+i).attr("class","path");
$g.append($el).attr("id","pathCont"+i).attr("class","pathCont");
}
return $g[0];
};
var drawArcs = function($svg, pieData){
var titles = [];
var values = [];
$.each(pieData, function(index, value) {
values.push(value[1]);
titles.push(value[0]);
});
pieData = values;
var total = pieData.reduce(function (accu, that) { return that + accu; }, 0);
var sectorAngleArr = pieData.map(function (v) { return 360 * v / total; });
var startAngle = -90; // from the top instead of side
var endAngle = -90;
for (var i=0; i<sectorAngleArr.length; i++){
startAngle = endAngle;
endAngle = startAngle + sectorAngleArr[i];
var x1,x2,y1,y2 ;
x1 = parseInt(Math.round(200 + 195*Math.cos(Math.PI*startAngle/180)));
y1 = parseInt(Math.round(200 + 195*Math.sin(Math.PI*startAngle/180)));
x2 = parseInt(Math.round(200 + 195*Math.cos(Math.PI*endAngle/180)));
y2 = parseInt(Math.round(200 + 195*Math.sin(Math.PI*endAngle/180)));
var d = "M200,200 L" + x1 + "," + y1 + " A195,195 0 " +
((endAngle-startAngle > 180) ? 1 : 0) + ",1 " + x2 + "," + y2 + " z";
var rand = function(min, max) {
return parseInt(Math.random() * (max-min+1), 10) + min;
};
var getColor = function () {
var color;
if(colorSet) {
color = (colorSet[i]);
}
else{
var h = rand(10, 60); // color hue between 0° and 360°
var s = rand(20, 100); // saturation 0-100%
var l = rand(30, 60); // lightness 0-100%
color = 'hsl(' + h + ',' + s + '%,' + l + '%)';
}
return color;
};
var c = parseInt(i / sectorAngleArr.length * 360);
var fill = getColor();
var arc = makeSVG("path", {d: d, fill: fill}, pieData[i], titles[i], i, fill);
$svg.prepend(arc);
$chart.prepend($svg);
}
};
var $chart = $(node);
var dataSet = $(node).attr("data-set");
var colorSet = $(node).attr("data-colors");
if(colorSet){ colorSet = colorSet.split(","); }
var val = JSON.parse(dataSet);
var $svg = $('<svg viewBox="0 0 400 400" class="svg"></svg>');
var $leg = $('<ul class="pie-legend"></ul>');
$chart.append($leg);
$chart.parent().addClass("pie");
drawArcs($svg, val);
var mPos = {x: -1,y: -1};
var getMousePos = function(){
var $tooltip = $('<div class="charts-tip"></div>');
$chart.mousemove(function(e) {
mPos.x = e.pageX;
mPos.y = e.pageY;
var $target = $(e.target).clone();
var $parent = $(e.target).parent().clone();
var $last = $chart.find(".pathCont:last-child .path:last-child");
var val = $target.attr("data-val");
var title = $target.attr("data-title");
var _id = $target.attr("id");
var color = $target.attr("fill");
if(val){
$tooltip.css({
left: mPos.x,
top: mPos.y
});
var setTooltip = function(){
$("body").find("."+$tooltip.attr("class")).remove();
$tooltip.html(title+": " + val);
$("body").append($tooltip);
}();
if(color){ $(e.target).attr("stroke", color); }
var setOrder = function(){
var $lastId = $last.attr("id");
var $targetId = $target.attr("id");
if($lastId !== $targetId){
$chart.find("#"+$target.attr("id")).parent().remove();
$chart.find(".svg").append($parent);
}
}();
}
});
$chart.mouseleave(function(e) {
// remove tooltip
$("body").find("."+$tooltip.attr("class")).remove();
});
}();
},
donut: function(node){
var $chart = $(node);
var val = $(node).attr("data-percent");
var title = $(node).attr("data-title");
$chart.parent().addClass("donut");
if(!title) title = "%";
if(val > 1 || val < 0) return("between 0 - 1 please");
var r = 180;
var c = 360;
val = parseFloat(val).toFixed(2)*c;
var $temp = $('<div></div>').addClass("pie spinner");
var $title = $("<h2><p></p><span></span></h2>");
$title.find("p").text(val/360*100);
$title.find("span").text(title);
$chart.on('show-donut-chart', function(){
$title.find("p").text(0);
$({countNum: $title.find("p").text()}).animate({countNum: val/360*100}, {
duration: 500,
easing:'linear',
step: function() {
$title.find("p").text(Math.floor(this.countNum));
},
complete: function() {
$title.find("p").text(this.countNum);
}
});
$chart.on('hide-donut-chart', function(){
$title.find("p").text(0);
});
});
$chart.append($title);
var chart = {
nodes: {
spinner: function(){
return $temp.clone().attr(
"style",
'-webkit-transform: rotate('+ chart.values.spinner +'deg);' +
'-moz-transform: rotate('+ chart.values.spinner +'deg);' +
'transform: rotate('+ chart.values.spinner +'deg);'
);
},
mask: function(){
return $temp.clone().addClass(chart.values.selector).attr(
"style",
'-webkit-transform: rotate('+ chart.values.mask + 'deg);' +
'-moz-transform: rotate('+ chart.values.mask + 'deg);' +
'transform: rotate('+ chart.values.mask + 'deg);'
);
}
},
values: {spinner: val, mask: c, selector: "" }
};
var prependNodes = function(data){
$.each(data, function(i, _node) {$chart.prepend(_node());});
};
// IF LESS THAN 50%
var chart$clone,val1,val2;
if(val < r){
val1 = val;
chart$clone = jQuery.extend({}, chart);
chart$clone.values.spinner = val1;
chart$clone.values.selector = "mask";
prependNodes(chart$clone.nodes);
}
// IF GREATER THAN 50%
else{
val2 = val - r;
val1 = val - val2;
val2 = val2 + r;
chart$clone = jQuery.extend({}, chart);
chart$clone.values.spinner = val1;
chart$clone.values.mask = val2;
prependNodes(chart$clone.nodes);
}
},
bar: function(node){
var $node = $(node);
$node.parent().addClass("bar");
var data = $node.attr("data-bars");
var unit = $node.attr("data-unit");
var height = $node.height();
var grid = $node.attr("data-grid");
var barWidth = $node.attr("data-width");
var max = $node.attr("data-max");
if(parseInt(grid,10) === 0) $node.css("background", "none");
if(!data) return("No data to work with");
if(!unit) unit = "%";
// get max data point
var maxData = function(){
var arr = JSON.parse("[" + data + "]");
return Math.max.apply(Math, arr.map(function(i) { return i[0]; }));
};
// If "data-max" is not specified or if the heighest data-point is greater than data-max
if(maxData() > max || !max){ max = maxData(); }
data = JSON.parse("[[" + data + "]]");
var barsNo = data[0].length;
$.each(data, function(i, v) {
// first dimension
var uls = $("<ul></ul>");
var lis = $("<li><span></span></li>").height(height);
for (i = 0; i < data[0].length; i++){
var ul = uls.clone();
$.each(v[i], function(index, val) {
// second dimension
var li = lis.clone();
var value = (data[0][i][index]);
var title = value + unit;
var percent = (value/max) * 100;
li.find("span").attr("title", title);
if(!barWidth){
li.find("span").attr(
"style",
"height:" + percent + "%"
);
}else{
li.find("span").attr(
"style",
"height:" + percent + "%;" +
"width:" + barWidth + "px"
);
}
ul.append(li);
});
$node.append(ul);
}
});
var $grid = $("<div class='grid'></div>");
$node.parent().append($grid);
for(var i = 0; i <= 10; i++) {
var toPerc = (i*10).toFixed(0);
var converter = max/100;
var toUnit = (toPerc * converter).toFixed(0);
if(i % 2 === 0){
var line = $("<hr/>").css({bottom: toPerc+"%"}).attr("data-y", toUnit + unit);
$node.parent().find(".grid").append(line);
}
}
$node.parent().width($node.width());
},
line: function(node){
var setPoint = function(cord, node){
var $node = $(node).clone();
$node.find("a").attr("data-x", cord.x).attr("data-y", cord.y);
return $node;
};
var setPosition = function(data, cord){
x = (( cord.x / dim.maxX ) * 100) + "%";
y = (( cord.y / height ) * 100) + "%";
cord.x = cord.x + "px";
cord.y = cord.y + "px";
$("ul").find(data).css("left",x);
$("ul").find(data).css("bottom",y);
};
var setContainerDimensions = function($chart,val){
var height = [];
var width = [];
$.each(val, function(index, value) {
$.each(val[index][1], function(index, value) {height.push(value);});
$.each(val[index][0], function(index, value) {width.push(value);});
});
maxY = Math.max.apply(Math, height) + 20;
maxX = Math.max.apply(Math, width) + 20;
height = maxY;
width = $chart.parent().width();
$chart.parent().css({width: width, height: height});
$chart.parent().addClass("line");
return {width:width,height:height, maxX: maxX,maxY: maxY};
};
var convertToArrayOfObjects = function(val, height) {
var dataClone = val.slice(0),
keys = dataClone.shift(),
i = 0,
k = 0,
obj = null,
output = [];
for (i = 0; i < dataClone.length; i++) {
obj = {};
for (k = 0; k < keys.length; k++) {
var x = keys[k];
var y = dim.height-dataClone[i][k];
x = (x/dim.maxX) * dim.width;
y = (y/dim.maxY) * dim.height;
obj[k] = {
x: x,
y: y
};
}
output.push(obj);
}
return output[0];
};
var drawSVG = function(type, val, height, index){
var $svg = ".svgCont";
if(type){
$svg = $('<div class="svgCont"><svg class="svg" viewBox="0 0 ' + width + ' ' + height + '"><path class="path" d=""></path></svg></div>');
$svg.addClass(".p"+index);
if(type==2){$svg.addClass("fill");}
$chart.parent().append($svg);
}
var points = convertToArrayOfObjects(val, height);
var counter = 0;
var addPoint = function(points, counter, isFirst){
var new_point;
if(isFirst == "last"){
var last = Object.keys(points).length-1;
new_point = " L" + points[last].x + "," + points[last].x + " L" + 0 + "," + points[last].x +" Z";
}else{
var x = Math.floor(points[counter].x);
var y = Math.floor(points[counter].y);
new_point = (isFirst? "M" : " ")+x+","+y;
}
$chart.parent().find($svg).find("path").attr("d", $chart.parent().find($svg).find("path").attr("d")+""+new_point);
counter++;
if(counter < Object.keys(points).length){
addPoint(points, counter, false);
}
if(counter == Object.keys(points).length && type == 2){
addPoint(points, counter, "last");
}
};
addPoint(points, counter, true);
};
var $chart = $(node);
$chart.parent().find(".svgCont, .grid").remove();
$chart.parent().find(".line-chart").empty();
var fill = $chart.attr("data-fill");
var grid = $("<div class='grid'></div>");
$chart.parent().append(grid);
var $pointsCont = $('<g class="points"></g>');
var container;
var oneDim = "[" + $chart.attr("data-cord") + "]";
var cord = $chart.attr("data-cord");
cord = JSON.parse("[" + cord + "]");
if(cord[0].length !== 2){
cord = JSON.parse("[" + oneDim + "]");
}
var dim = setContainerDimensions($chart, cord);
var height = dim.height;
var width = dim.width;
var loopCord = function(index, val, height){
for (var i = 0; i < val[index].length; i++) {
cord = {
x: val[0][i],
y: val[1][i]
};
var point = setPoint(cord, $("<li><span></span><a></a></li>"));
$chart.append(point);
setPosition(point, cord);
if(i % 2 === 0){
var gridSpace = height / 10;
var line = $("<hr/>").css({bottom: i*gridSpace}).attr("data-y", i*gridSpace);
$chart.parent().find(".grid").append(line);
}
}
drawSVG(1, val, height, index);
if(fill){
drawSVG(2, val, height, index);
}
};
$.each(cord, function(i, val) {
loopCord(i, val, height);
});
}
};
})(jQuery);

1
hybrid-bootstrap-admin-template/assets/js/Lightweight-Chart/jquery.chart.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

59
hybrid-bootstrap-admin-template/assets/js/Lightweight-Chart/readme.md Normal file
View File

@@ -0,0 +1,59 @@
# cssCharts.js
jquery plugin to create simple donut, bar or line charts with dom nodes. style with css.
[http://thysultan.com/projects/cssCharts/](http://thysultan.com/projects/cssCharts/)
### Include:
```html
<link rel="stylesheet" href="chart.css">
<script src="jquery.chart.js"></script>
```
### run:
```javascript
$('.bar-chart').cssCharts({type:"bar"});
$('.donut-chart').cssCharts({type:"donut"});
$('.line-chart').cssCharts({type:"line"});
```
### example donut/pie chart
optional: to trigger countUp counter for the donut chart as seen on the preview page.
```javascript
$('.donut-chart').cssCharts({type:"donut"}).trigger('show-donut-chart');
```
add "pie-chart" class to .donut-chart if you want to convert it to a pie chart, i.e
```html
<div class="donut-chart pie-chart" data-percent="0.61" data-title="uptime %"></div>
```
- - -
### example line chart
```html
<ul data-cord="[x1,x2,x3,x4],[y1,y2,y3,y4]" class="line-chart"></ul>
$('.line-chart').cssCharts({type:"line"});
```
* insure x cordinates are 0 - ascending.
* insure y cordinates are 0 or greater.
- - -
### example bar chart
```html
<ul class="bar-chart" data-bars="[x1,x2],[y1,y2]" data-max="10" data-unit="k" data-grid="1" data-width="24">
$('.bar-chart').cssCharts({type:"bar"});
```
- - -
style to your hearts content, see index.html for an example implementation.

7
hybrid-bootstrap-admin-template/assets/js/bootstrap.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

123
hybrid-bootstrap-admin-template/assets/js/chart-data.js Normal file
View File

@@ -0,0 +1,123 @@
var randomScalingFactor = function(){ return Math.round(Math.random()*1000)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor : "rgba(48, 164, 255, 0.2)",
strokeColor : "rgba(48, 164, 255, 1)",
pointColor : "rgba(48, 164, 255, 1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(48, 164, 255, 1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
fillColor : "rgba(48, 164, 255, 0.2)",
strokeColor : "rgba(48, 164, 255, 0.8)",
highlightFill : "rgba(48, 164, 255, 0.75)",
highlightStroke : "rgba(48, 164, 255, 1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
var pieData = [
{
value: 300,
color:"#30a5ff",
highlight: "#62b9fb",
label: "Blue"
},
{
value: 50,
color: "#ffb53e",
highlight: "#fac878",
label: "Orange"
},
{
value: 100,
color: "#1ebfae",
highlight: "#3cdfce",
label: "Teal"
},
{
value: 120,
color: "#f9243f",
highlight: "#f6495f",
label: "Red"
}
];
var doughnutData = [
{
value: 300,
color:"#30a5ff",
highlight: "#62b9fb",
label: "Blue"
},
{
value: 50,
color: "#ffb53e",
highlight: "#fac878",
label: "Orange"
},
{
value: 100,
color: "#1ebfae",
highlight: "#3cdfce",
label: "Teal"
},
{
value: 120,
color: "#f9243f",
highlight: "#f6495f",
label: "Red"
}
];
window.onload = function(){
var chart1 = document.getElementById("line-chart").getContext("2d");
window.myLine = new Chart(chart1).Line(lineChartData, {
responsive: true
});
var chart2 = document.getElementById("bar-chart").getContext("2d");
window.myBar = new Chart(chart2).Bar(barChartData, {
responsive : true
});
var chart3 = document.getElementById("doughnut-chart").getContext("2d");
window.myDoughnut = new Chart(chart3).Doughnut(doughnutData, {responsive : true
});
var chart4 = document.getElementById("pie-chart").getContext("2d");
window.myPie = new Chart(chart4).Pie(pieData, {responsive : true
});
};

11
hybrid-bootstrap-admin-template/assets/js/chart.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

225
hybrid-bootstrap-admin-template/assets/js/custom-scripts.js Normal file
View File

@@ -0,0 +1,225 @@
/*------------------------------------------------------
Author : www.webthemez.com
License: Commons Attribution 3.0
http://creativecommons.org/licenses/by/3.0/
--------------------------------------------------------- */
(function ($) {
"use strict";
var mainApp = {
initFunction: function () {
/*MENU
------------------------------------*/
$('#main-menu').metisMenu();
$(window).bind("load resize", function () {
if ($(this).width() < 768) {
$('div.sidebar-collapse').addClass('collapse')
} else {
$('div.sidebar-collapse').removeClass('collapse')
}
});
/* MORRIS BAR CHART
-----------------------------------------*/
Morris.Bar({
element: 'morris-bar-chart',
data: [{
y: '2006',
a: 100,
b: 90
}, {
y: '2007',
a: 75,
b: 65
}, {
y: '2008',
a: 50,
b: 40
}, {
y: '2009',
a: 75,
b: 65
}, {
y: '2010',
a: 50,
b: 40
}, {
y: '2011',
a: 75,
b: 65
}, {
y: '2012',
a: 100,
b: 90
}],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
barColors: [
'#A6A6A6','#24C2CE',
'#A8E9DC'
],
hideHover: 'auto',
resize: true
});
/* MORRIS DONUT CHART
----------------------------------------*/
Morris.Donut({
element: 'morris-donut-chart',
data: [{
label: "Download Sales",
value: 12
}, {
label: "In-Store Sales",
value: 30
}, {
label: "Mail-Order Sales",
value: 20
}],
colors: [
'#A6A6A6','#24C2CE',
'#A8E9DC'
],
resize: true
});
/* MORRIS AREA CHART
----------------------------------------*/
Morris.Area({
element: 'morris-area-chart',
data: [{
period: '2010 Q1',
iphone: 2666,
ipad: null,
itouch: 2647
}, {
period: '2010 Q2',
iphone: 2778,
ipad: 2294,
itouch: 2441
}, {
period: '2010 Q3',
iphone: 4912,
ipad: 1969,
itouch: 2501
}, {
period: '2010 Q4',
iphone: 3767,
ipad: 3597,
itouch: 5689
}, {
period: '2011 Q1',
iphone: 6810,
ipad: 1914,
itouch: 2293
}, {
period: '2011 Q2',
iphone: 5670,
ipad: 4293,
itouch: 1881
}, {
period: '2011 Q3',
iphone: 4820,
ipad: 3795,
itouch: 1588
}, {
period: '2011 Q4',
iphone: 15073,
ipad: 5967,
itouch: 5175
}, {
period: '2012 Q1',
iphone: 10687,
ipad: 4460,
itouch: 2028
}, {
period: '2012 Q2',
iphone: 8432,
ipad: 5713,
itouch: 1791
}],
xkey: 'period',
ykeys: ['iphone', 'ipad', 'itouch'],
labels: ['iPhone', 'iPad', 'iPod Touch'],
pointSize: 2,
hideHover: 'auto',
pointFillColors:['#ffffff'],
pointStrokeColors: ['black'],
lineColors:['#A6A6A6','#24C2CE'],
resize: true
});
/* MORRIS LINE CHART
----------------------------------------*/
Morris.Line({
element: 'morris-line-chart',
data: [
{ y: '2014', a: 50, b: 90},
{ y: '2015', a: 165, b: 185},
{ y: '2016', a: 150, b: 130},
{ y: '2017', a: 175, b: 160},
{ y: '2018', a: 80, b: 65},
{ y: '2019', a: 90, b: 70},
{ y: '2020', a: 100, b: 125},
{ y: '2021', a: 155, b: 175},
{ y: '2022', a: 80, b: 85},
{ y: '2023', a: 145, b: 155},
{ y: '2024', a: 160, b: 195}
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Total Income', 'Total Outcome'],
fillOpacity: 0.6,
hideHover: 'auto',
behaveLikeLine: true,
resize: true,
pointFillColors:['#ffffff'],
pointStrokeColors: ['black'],
lineColors:['gray','#24C2CE']
});
$('.bar-chart').cssCharts({type:"bar"});
$('.donut-chart').cssCharts({type:"donut"}).trigger('show-donut-chart');
$('.line-chart').cssCharts({type:"line"});
$('.pie-thychart').cssCharts({type:"pie"});
},
initialization: function () {
mainApp.initFunction();
}
}
// Initializing ///
$(document).ready(function () {
mainApp.initFunction();
$("#sideNav").click(function(){
if($(this).hasClass('closed')){
$('.navbar-side').animate({left: '0px'});
$(this).removeClass('closed');
$('#page-wrapper').animate({'margin-left' : '260px'});
}
else{
$(this).addClass('closed');
$('.navbar-side').animate({left: '-260px'});
$('#page-wrapper').animate({'margin-left' : '0px'});
}
});
});
}(jQuery));

202
hybrid-bootstrap-admin-template/assets/js/custom.js Normal file
View File

@@ -0,0 +1,202 @@
/*------------------------------------------------------
Author : www.webthemez.com
License: Commons Attribution 3.0
http://creativecommons.org/licenses/by/3.0/
--------------------------------------------------------- */
(function ($) {
"use strict";
var mainApp = {
initFunction: function () {
/*MENU
------------------------------------*/
$('#main-menu').metisMenu();
$(window).bind("load resize", function () {
if ($(this).width() < 768) {
$('div.sidebar-collapse').addClass('collapse')
} else {
$('div.sidebar-collapse').removeClass('collapse')
}
});
/* MORRIS BAR CHART
-----------------------------------------*/
Morris.Bar({
element: 'morris-bar-chart',
data: [{
y: '2006',
a: 100,
b: 90
}, {
y: '2007',
a: 75,
b: 65
}, {
y: '2008',
a: 50,
b: 40
}, {
y: '2009',
a: 75,
b: 65
}, {
y: '2010',
a: 50,
b: 40
}, {
y: '2011',
a: 75,
b: 65
}, {
y: '2012',
a: 100,
b: 90
}],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
hideHover: 'auto',
resize: true
});
/* MORRIS DONUT CHART
----------------------------------------*/
Morris.Donut({
element: 'morris-donut-chart',
data: [{
label: "Download Sales",
value: 12
}, {
label: "In-Store Sales",
value: 30
}, {
label: "Mail-Order Sales",
value: 20
}],
resize: true
});
/* MORRIS AREA CHART
----------------------------------------*/
Morris.Area({
element: 'morris-area-chart',
data: [{
period: '2010 Q1',
iphone: 2666,
ipad: null,
itouch: 2647
}, {
period: '2010 Q2',
iphone: 2778,
ipad: 2294,
itouch: 2441
}, {
period: '2010 Q3',
iphone: 4912,
ipad: 1969,
itouch: 2501
}, {
period: '2010 Q4',
iphone: 3767,
ipad: 3597,
itouch: 5689
}, {
period: '2011 Q1',
iphone: 6810,
ipad: 1914,
itouch: 2293
}, {
period: '2011 Q2',
iphone: 5670,
ipad: 4293,
itouch: 1881
}, {
period: '2011 Q3',
iphone: 4820,
ipad: 3795,
itouch: 1588
}, {
period: '2011 Q4',
iphone: 15073,
ipad: 5967,
itouch: 5175
}, {
period: '2012 Q1',
iphone: 10687,
ipad: 4460,
itouch: 2028
}, {
period: '2012 Q2',
iphone: 8432,
ipad: 5713,
itouch: 1791
}],
xkey: 'period',
ykeys: ['iphone', 'ipad', 'itouch'],
labels: ['iPhone', 'iPad', 'iPod Touch'],
pointSize: 2,
hideHover: 'auto',
resize: true
});
/* MORRIS LINE CHART
----------------------------------------*/
Morris.Line({
element: 'morris-line-chart',
data: [{
y: '2006',
a: 100,
b: 90
}, {
y: '2007',
a: 75,
b: 65
}, {
y: '2008',
a: 50,
b: 40
}, {
y: '2009',
a: 75,
b: 65
}, {
y: '2010',
a: 50,
b: 40
}, {
y: '2011',
a: 75,
b: 65
}, {
y: '2012',
a: 100,
b: 90
}],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B'],
hideHover: 'auto',
resize: true
});
},
initialization: function () {
mainApp.initFunction();
}
}
// Initializing ///
$(document).ready(function () {
mainApp.initFunction();
});
}(jQuery));

233
hybrid-bootstrap-admin-template/assets/js/dataTables/datatables.bootstrap.css Normal file
View File

@@ -0,0 +1,233 @@
div.dataTables_length label {
float: left;
text-align: left;
font-weight: normal;
}
div.dataTables_length select {
width: 75px;
}
div.dataTables_filter label {
float: right;
font-weight: normal;
}
div.dataTables_filter input {
width: 16em;
}
div.dataTables_info {
padding-top: 8px;
}
div.dataTables_paginate {
float: right;
margin: 0;
}
div.dataTables_paginate ul.pagination {
margin: 2px 0;
white-space: nowrap;
}
table.dataTable,
table.dataTable td,
table.dataTable th {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
table.dataTable {
clear: both;
margin-top: 6px !important;
margin-bottom: 6px !important;
max-width: none !important;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
cursor: pointer;
}
table.dataTable thead .sorting {
background: url('../images/sort_both.png') no-repeat center right;
}
table.dataTable thead .sorting_asc {
background: url('../images/sort_asc.png') no-repeat center right;
}
table.dataTable thead .sorting_desc {
background: url('../images/sort_desc.png') no-repeat center right;
}
table.dataTable thead .sorting_asc_disabled {
background: url('../images/sort_asc_disabled.png') no-repeat center right;
}
table.dataTable thead .sorting_desc_disabled {
background: url('../images/sort_desc_disabled.png') no-repeat center right;
}
table.dataTable th:active {
outline: none;
}
/* Scrolling */
div.dataTables_scrollHead table {
margin-bottom: 0 !important;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
div.dataTables_scrollHead table thead tr:last-child th:first-child,
div.dataTables_scrollHead table thead tr:last-child td:first-child {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.dataTables_scrollBody table {
margin-top: 0 !important;
margin-bottom: 0 !important;
border-top: none;
}
div.dataTables_scrollBody tbody tr:first-child th,
div.dataTables_scrollBody tbody tr:first-child td {
border-top: none;
}
div.dataTables_scrollFoot table {
margin-top: 0 !important;
border-top: none;
}
/*
* TableTools styles
*/
.table tbody tr.active td,
.table tbody tr.active th {
color: white;
background-color: #08C;
}
.table tbody tr.active:hover td,
.table tbody tr.active:hover th {
background-color: #0075b0 !important;
}
.table tbody tr.active a {
color: white;
}
.table-striped tbody tr.active:nth-child(odd) td,
.table-striped tbody tr.active:nth-child(odd) th {
background-color: #017ebc;
}
table.DTTT_selectable tbody tr {
cursor: pointer;
}
div.DTTT .btn {
font-size: 12px;
color: #333 !important;
}
div.DTTT .btn:hover {
text-decoration: none !important;
}
ul.DTTT_dropdown.dropdown-menu {
z-index: 2003;
}
ul.DTTT_dropdown.dropdown-menu a {
color: #333 !important; /* needed only when demo_page.css is included */
}
ul.DTTT_dropdown.dropdown-menu li {
position: relative;
}
ul.DTTT_dropdown.dropdown-menu li:hover a {
color: white !important;
background-color: #0088cc;
}
div.DTTT_collection_background {
z-index: 2002;
}
/* TableTools information display */
div.DTTT_print_info.modal {
height: 150px;
margin-top: -75px;
text-align: center;
}
div.DTTT_print_info h6 {
margin: 1em;
font-size: 28px;
font-weight: normal;
line-height: 28px;
}
div.DTTT_print_info p {
font-size: 14px;
line-height: 20px;
}
/*
* FixedColumns styles
*/
div.DTFC_LeftHeadWrapper table,
div.DTFC_LeftFootWrapper table,
div.DTFC_RightHeadWrapper table,
div.DTFC_RightFootWrapper table,
table.DTFC_Cloned tr.even {
background-color: white;
}
div.DTFC_RightHeadWrapper table,
div.DTFC_LeftHeadWrapper table {
margin-bottom: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,
div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,
div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.DTFC_RightBodyWrapper table,
div.DTFC_LeftBodyWrapper table {
margin-bottom: 0 !important;
border-top: none;
}
div.DTFC_RightBodyWrapper tbody tr:first-child th,
div.DTFC_RightBodyWrapper tbody tr:first-child td,
div.DTFC_LeftBodyWrapper tbody tr:first-child th,
div.DTFC_LeftBodyWrapper tbody tr:first-child td {
border-top: none;
}
div.DTFC_RightFootWrapper table,
div.DTFC_LeftFootWrapper table {
border-top: none;
}

245
hybrid-bootstrap-admin-template/assets/js/dataTables/datatables.bootstrap.js Normal file
View File

@@ -0,0 +1,245 @@
/* Set the defaults for DataTables initialisation */
$.extend(true, $.fn.dataTable.defaults, {
"sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>" + "t" + "<'row'<'col-sm-6'i><'col-sm-6'p>>",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
});
/* Default class modification */
$.extend($.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline",
"sFilterInput": "form-control input-sm",
"sLengthSelect": "form-control input-sm"
});
// In 1.10 we use the pagination renderers to draw the Bootstrap paging,
// rather than custom plug-in
if ($.fn.dataTable.Api) {
$.fn.dataTable.defaults.renderer = 'bootstrap';
$.fn.dataTable.ext.renderer.pageButton.bootstrap = function(settings, host, idx, buttons, page, pages) {
var api = new $.fn.dataTable.Api(settings);
var classes = settings.oClasses;
var lang = settings.oLanguage.oPaginate;
var btnDisplay, btnClass;
var attach = function(container, buttons) {
var i, ien, node, button;
var clickHandler = function(e) {
e.preventDefault();
if (e.data.action !== 'ellipsis') {
api.page(e.data.action).draw(false);
}
};
for (i = 0, ien = buttons.length; i < ien; i++) {
button = buttons[i];
if ($.isArray(button)) {
attach(container, button);
} else {
btnDisplay = '';
btnClass = '';
switch (button) {
case 'ellipsis':
btnDisplay = '&hellip;';
btnClass = 'disabled';
break;
case 'first':
btnDisplay = lang.sFirst;
btnClass = button + (page > 0 ?
'' : ' disabled');
break;
case 'previous':
btnDisplay = lang.sPrevious;
btnClass = button + (page > 0 ?
'' : ' disabled');
break;
case 'next':
btnDisplay = lang.sNext;
btnClass = button + (page < pages - 1 ?
'' : ' disabled');
break;
case 'last':
btnDisplay = lang.sLast;
btnClass = button + (page < pages - 1 ?
'' : ' disabled');
break;
default:
btnDisplay = button + 1;
btnClass = page === button ?
'active' : '';
break;
}
if (btnDisplay) {
node = $('<li>', {
'class': classes.sPageButton + ' ' + btnClass,
'aria-controls': settings.sTableId,
'tabindex': settings.iTabIndex,
'id': idx === 0 && typeof button === 'string' ? settings.sTableId + '_' + button : null
})
.append($('<a>', {
'href': '#'
})
.html(btnDisplay)
)
.appendTo(container);
settings.oApi._fnBindAction(
node, {
action: button
}, clickHandler
);
}
}
}
};
attach(
$(host).empty().html('<ul class="pagination"/>').children('ul'),
buttons
);
}
} else {
// Integration for 1.9-
$.fn.dataTable.defaults.sPaginationType = 'bootstrap';
/* API method to get paging information */
$.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings) {
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength),
"iTotalPages": oSettings._iDisplayLength === -1 ? 0 : Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength)
};
};
/* Bootstrap style pagination control */
$.extend($.fn.dataTableExt.oPagination, {
"bootstrap": {
"fnInit": function(oSettings, nPaging, fnDraw) {
var oLang = oSettings.oLanguage.oPaginate;
var fnClickHandler = function(e) {
e.preventDefault();
if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
fnDraw(oSettings);
}
};
$(nPaging).append(
'<ul class="pagination">' +
'<li class="prev disabled"><a href="#">&larr; ' + oLang.sPrevious + '</a></li>' +
'<li class="next disabled"><a href="#">' + oLang.sNext + ' &rarr; </a></li>' +
'</ul>'
);
var els = $('a', nPaging);
$(els[0]).bind('click.DT', {
action: "previous"
}, fnClickHandler);
$(els[1]).bind('click.DT', {
action: "next"
}, fnClickHandler);
},
"fnUpdate": function(oSettings, fnDraw) {
var iListLength = 5;
var oPaging = oSettings.oInstance.fnPagingInfo();
var an = oSettings.aanFeatures.p;
var i, ien, j, sClass, iStart, iEnd, iHalf = Math.floor(iListLength / 2);
if (oPaging.iTotalPages < iListLength) {
iStart = 1;
iEnd = oPaging.iTotalPages;
} else if (oPaging.iPage <= iHalf) {
iStart = 1;
iEnd = iListLength;
} else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
iStart = oPaging.iTotalPages - iListLength + 1;
iEnd = oPaging.iTotalPages;
} else {
iStart = oPaging.iPage - iHalf + 1;
iEnd = iStart + iListLength - 1;
}
for (i = 0, ien = an.length; i < ien; i++) {
// Remove the middle elements
$('li:gt(0)', an[i]).filter(':not(:last)').remove();
// Add the new list items and their event handlers
for (j = iStart; j <= iEnd; j++) {
sClass = (j == oPaging.iPage + 1) ? 'class="active"' : '';
$('<li ' + sClass + '><a href="#">' + j + '</a></li>')
.insertBefore($('li:last', an[i])[0])
.bind('click', function(e) {
e.preventDefault();
oSettings._iDisplayStart = (parseInt($('a', this).text(), 10) - 1) * oPaging.iLength;
fnDraw(oSettings);
});
}
// Add / remove disabled classes from the static elements
if (oPaging.iPage === 0) {
$('li:first', an[i]).addClass('disabled');
} else {
$('li:first', an[i]).removeClass('disabled');
}
if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
$('li:last', an[i]).addClass('disabled');
} else {
$('li:last', an[i]).removeClass('disabled');
}
}
}
}
});
}
/*
* TableTools Bootstrap compatibility
* Required TableTools 2.1+
*/
if ($.fn.DataTable.TableTools) {
// Set the classes that TableTools uses to something suitable for Bootstrap
$.extend(true, $.fn.DataTable.TableTools.classes, {
"container": "DTTT btn-group",
"buttons": {
"normal": "btn btn-default",
"disabled": "disabled"
},
"collection": {
"container": "DTTT_dropdown dropdown-menu",
"buttons": {
"normal": "",
"disabled": "disabled"
}
},
"print": {
"info": "DTTT_print_info modal"
},
"select": {
"row": "active"
}
});
// Have the collection use a bootstrap compatible dropdown
$.extend(true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
"collection": {
"container": "ul",
"button": "li",
"liner": "a"
}
});
}

14013
hybrid-bootstrap-admin-template/assets/js/dataTables/jquery.datatables.js Normal file
View File

File diff suppressed because it is too large Load Diff

28
hybrid-bootstrap-admin-template/assets/js/easypiechart-data.js Normal file
View File

@@ -0,0 +1,28 @@
$(function() {
$('#easypiechart-teal').easyPieChart({
scaleColor: false,
barColor: '#1ebfae'
});
});
$(function() {
$('#easypiechart-orange').easyPieChart({
scaleColor: false,
barColor: '#ffb53e'
});
});
$(function() {
$('#easypiechart-red').easyPieChart({
scaleColor: false,
barColor: '#f9243f'
});
});
$(function() {
$('#easypiechart-blue').easyPieChart({
scaleColor: false,
barColor: '#30a5ff'
});
});

359
hybrid-bootstrap-admin-template/assets/js/easypiechart.js Normal file
View File

@@ -0,0 +1,359 @@
/**!
* easyPieChart
* Lightweight plugin to render simple, animated and retina optimized pie charts
*
* @license
* @author Robert Fleischmann <rendro87@gmail.com> (http://robert-fleischmann.de)
* @version 2.1.5
**/
(function(root, factory) {
if(typeof exports === 'object') {
module.exports = factory(require('jquery'));
}
else if(typeof define === 'function' && define.amd) {
define(['jquery'], factory);
}
else {
factory(root.jQuery);
}
}(this, function($) {
/**
* Renderer to render the chart on a canvas object
* @param {DOMElement} el DOM element to host the canvas (root of the plugin)
* @param {object} options options object of the plugin
*/
var CanvasRenderer = function(el, options) {
var cachedBackground;
var canvas = document.createElement('canvas');
el.appendChild(canvas);
if (typeof(G_vmlCanvasManager) !== 'undefined') {
G_vmlCanvasManager.initElement(canvas);
}
var ctx = canvas.getContext('2d');
canvas.width = canvas.height = options.size;
// canvas on retina devices
var scaleBy = 1;
if (window.devicePixelRatio > 1) {
scaleBy = window.devicePixelRatio;
canvas.style.width = canvas.style.height = [options.size, 'px'].join('');
canvas.width = canvas.height = options.size * scaleBy;
ctx.scale(scaleBy, scaleBy);
}
// move 0,0 coordinates to the center
ctx.translate(options.size / 2, options.size / 2);
// rotate canvas -90deg
ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
var radius = (options.size - options.lineWidth) / 2;
if (options.scaleColor && options.scaleLength) {
radius -= options.scaleLength + 2; // 2 is the distance between scale and bar
}
// IE polyfill for Date
Date.now = Date.now || function() {
return +(new Date());
};
/**
* Draw a circle around the center of the canvas
* @param {strong} color Valid CSS color string
* @param {number} lineWidth Width of the line in px
* @param {number} percent Percentage to draw (float between -1 and 1)
*/
var drawCircle = function(color, lineWidth, percent) {
percent = Math.min(Math.max(-1, percent || 0), 1);
var isNegative = percent <= 0 ? true : false;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);
ctx.strokeStyle = color;
ctx.lineWidth = lineWidth;
ctx.stroke();
};
/**
* Draw the scale of the chart
*/
var drawScale = function() {
var offset;
var length;
ctx.lineWidth = 1;
ctx.fillStyle = options.scaleColor;
ctx.save();
for (var i = 24; i > 0; --i) {
if (i % 6 === 0) {
length = options.scaleLength;
offset = 0;
} else {
length = options.scaleLength * 0.6;
offset = options.scaleLength - length;
}
ctx.fillRect(-options.size/2 + offset, 0, length, 1);
ctx.rotate(Math.PI / 12);
}
ctx.restore();
};
/**
* Request animation frame wrapper with polyfill
* @return {function} Request animation frame method or timeout fallback
*/
var reqAnimationFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
}());
/**
* Draw the background of the plugin including the scale and the track
*/
var drawBackground = function() {
if(options.scaleColor) drawScale();
if(options.trackColor) drawCircle(options.trackColor, options.lineWidth, 1);
};
/**
* Canvas accessor
*/
this.getCanvas = function() {
return canvas;
};
/**
* Canvas 2D context 'ctx' accessor
*/
this.getCtx = function() {
return ctx;
};
/**
* Clear the complete canvas
*/
this.clear = function() {
ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
};
/**
* Draw the complete chart
* @param {number} percent Percent shown by the chart between -100 and 100
*/
this.draw = function(percent) {
// do we need to render a background
if (!!options.scaleColor || !!options.trackColor) {
// getImageData and putImageData are supported
if (ctx.getImageData && ctx.putImageData) {
if (!cachedBackground) {
drawBackground();
cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy);
} else {
ctx.putImageData(cachedBackground, 0, 0);
}
} else {
this.clear();
drawBackground();
}
} else {
this.clear();
}
ctx.lineCap = options.lineCap;
// if barcolor is a function execute it and pass the percent as a value
var color;
if (typeof(options.barColor) === 'function') {
color = options.barColor(percent);
} else {
color = options.barColor;
}
// draw bar
drawCircle(color, options.lineWidth, percent / 100);
}.bind(this);
/**
* Animate from some percent to some other percentage
* @param {number} from Starting percentage
* @param {number} to Final percentage
*/
this.animate = function(from, to) {
var startTime = Date.now();
options.onStart(from, to);
var animation = function() {
var process = Math.min(Date.now() - startTime, options.animate.duration);
var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
this.draw(currentValue);
options.onStep(from, to, currentValue);
if (process >= options.animate.duration) {
options.onStop(from, to);
} else {
reqAnimationFrame(animation);
}
}.bind(this);
reqAnimationFrame(animation);
}.bind(this);
};
var EasyPieChart = function(el, opts) {
var defaultOptions = {
barColor: '#ef1e25',
trackColor: '#EAEAEA',
scaleColor: '#dfe0e0',
scaleLength: 5,
lineCap: 'round',
lineWidth: 6,
size: 110,
rotate: 0,
animate: {
duration: 1000,
enabled: true
},
easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
t = t / (d/2);
if (t < 1) {
return c / 2 * t * t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
onStart: function(from, to) {
return;
},
onStep: function(from, to, currentValue) {
return;
},
onStop: function(from, to) {
return;
}
};
// detect present renderer
if (typeof(CanvasRenderer) !== 'undefined') {
defaultOptions.renderer = CanvasRenderer;
} else if (typeof(SVGRenderer) !== 'undefined') {
defaultOptions.renderer = SVGRenderer;
} else {
throw new Error('Please load either the SVG- or the CanvasRenderer');
}
var options = {};
var currentValue = 0;
/**
* Initialize the plugin by creating the options object and initialize rendering
*/
var init = function() {
this.el = el;
this.options = options;
// merge user options into default options
for (var i in defaultOptions) {
if (defaultOptions.hasOwnProperty(i)) {
options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i];
if (typeof(options[i]) === 'function') {
options[i] = options[i].bind(this);
}
}
}
// check for jQuery easing
if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
options.easing = jQuery.easing[options.easing];
} else {
options.easing = defaultOptions.easing;
}
// process earlier animate option to avoid bc breaks
if (typeof(options.animate) === 'number') {
options.animate = {
duration: options.animate,
enabled: true
};
}
if (typeof(options.animate) === 'boolean' && !options.animate) {
options.animate = {
duration: 1000,
enabled: options.animate
};
}
// create renderer
this.renderer = new options.renderer(el, options);
// initial draw
this.renderer.draw(currentValue);
// initial update
if (el.dataset && el.dataset.percent) {
this.update(parseFloat(el.dataset.percent));
} else if (el.getAttribute && el.getAttribute('data-percent')) {
this.update(parseFloat(el.getAttribute('data-percent')));
}
}.bind(this);
/**
* Update the value of the chart
* @param {number} newValue Number between 0 and 100
* @return {object} Instance of the plugin for method chaining
*/
this.update = function(newValue) {
newValue = parseFloat(newValue);
if (options.animate.enabled) {
this.renderer.animate(currentValue, newValue);
} else {
this.renderer.draw(newValue);
}
currentValue = newValue;
return this;
}.bind(this);
/**
* Disable animation
* @return {object} Instance of the plugin for method chaining
*/
this.disableAnimation = function() {
options.animate.enabled = false;
return this;
};
/**
* Enable animation
* @return {object} Instance of the plugin for method chaining
*/
this.enableAnimation = function() {
options.animate.enabled = true;
return this;
};
init();
};
$.fn.easyPieChart = function(options) {
return this.each(function() {
var instanceOptions;
if (!$.data(this, 'easyPieChart')) {
instanceOptions = $.extend({}, options, $(this).data());
$.data(this, 'easyPieChart', new EasyPieChart(this, instanceOptions));
}
});
};
}));

10339
hybrid-bootstrap-admin-template/assets/js/jquery-1.10.2.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

45
hybrid-bootstrap-admin-template/assets/js/jquery.metismenu.js Normal file
View File

@@ -0,0 +1,45 @@
;(function ($, window, document, undefined) {
var pluginName = "metisMenu",
defaults = {
toggle: true
};
function Plugin(element, options) {
this.element = element;
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function () {
var $this = $(this.element),
$toggle = this.settings.toggle;
$this.find('li.active').has('ul').children('ul').addClass('collapse in');
$this.find('li').not('.active').has('ul').children('ul').addClass('collapse');
$this.find('li').has('ul').children('a').on('click', function (e) {
e.preventDefault();
$(this).parent('li').toggleClass('active').children('ul').collapse('toggle');
if ($toggle) {
$(this).parent('li').siblings().removeClass('active').children('ul.in').collapse('hide');
}
});
}
};
$.fn[ pluginName ] = function (options) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin(this, options));
}
});
};
})(jQuery, window, document);

2
hybrid-bootstrap-admin-template/assets/js/morris/morris-0.4.3.min.css vendored Normal file
View File

@@ -0,0 +1,2 @@
.morris-hover{position:absolute;z-index:1000;}.morris-hover.morris-default-style{border-radius:10px;padding:6px;color:#666;background:rgba(255, 255, 255, 0.8);border:solid 2px rgba(230, 230, 230, 0.8);font-family:sans-serif;font-size:12px;text-align:center;}.morris-hover.morris-default-style .morris-hover-row-label{font-weight:bold;margin:0.25em 0;}
.morris-hover.morris-default-style .morris-hover-point{white-space:nowrap;margin:0.1em 0;}

1913
hybrid-bootstrap-admin-template/assets/js/morris/morris.js Normal file
View File

File diff suppressed because it is too large Load Diff

10
hybrid-bootstrap-admin-template/assets/js/morris/raphael-2.1.0.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long