BSBMaterial added

This commit is contained in:
Yan
2017-09-20 19:25:19 +06:30
parent 899eb61568
commit 91ad6e3ef0
3366 changed files with 399794 additions and 280 deletions

View File

@@ -0,0 +1,117 @@
$(function () {
new Chart(document.getElementById("line_chart").getContext("2d"), getChartJs('line'));
new Chart(document.getElementById("bar_chart").getContext("2d"), getChartJs('bar'));
new Chart(document.getElementById("radar_chart").getContext("2d"), getChartJs('radar'));
new Chart(document.getElementById("pie_chart").getContext("2d"), getChartJs('pie'));
});
function getChartJs(type) {
var config = null;
if (type === 'line') {
config = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 59, 80, 81, 56, 55, 40],
borderColor: 'rgba(0, 188, 212, 0.75)',
backgroundColor: 'rgba(0, 188, 212, 0.3)',
pointBorderColor: 'rgba(0, 188, 212, 0)',
pointBackgroundColor: 'rgba(0, 188, 212, 0.9)',
pointBorderWidth: 1
}, {
label: "My Second dataset",
data: [28, 48, 40, 19, 86, 27, 90],
borderColor: 'rgba(233, 30, 99, 0.75)',
backgroundColor: 'rgba(233, 30, 99, 0.3)',
pointBorderColor: 'rgba(233, 30, 99, 0)',
pointBackgroundColor: 'rgba(233, 30, 99, 0.9)',
pointBorderWidth: 1
}]
},
options: {
responsive: true,
legend: false
}
}
}
else if (type === 'bar') {
config = {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: 'rgba(0, 188, 212, 0.8)'
}, {
label: "My Second dataset",
data: [28, 48, 40, 19, 86, 27, 90],
backgroundColor: 'rgba(233, 30, 99, 0.8)'
}]
},
options: {
responsive: true,
legend: false
}
}
}
else 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(0, 188, 212, 0.8)',
backgroundColor: 'rgba(0, 188, 212, 0.5)',
pointBorderColor: 'rgba(0, 188, 212, 0)',
pointBackgroundColor: 'rgba(0, 188, 212, 0.8)',
pointBorderWidth: 1
}, {
label: "My Second dataset",
data: [72, 48, 40, 19, 96, 27, 100],
borderColor: 'rgba(233, 30, 99, 0.8)',
backgroundColor: 'rgba(233, 30, 99, 0.5)',
pointBorderColor: 'rgba(233, 30, 99, 0)',
pointBackgroundColor: 'rgba(233, 30, 99, 0.8)',
pointBorderWidth: 1
}]
},
options: {
responsive: true,
legend: false
}
}
}
else if (type === 'pie') {
config = {
type: 'pie',
data: {
datasets: [{
data: [225, 50, 100, 40],
backgroundColor: [
"rgb(233, 30, 99)",
"rgb(255, 193, 7)",
"rgb(0, 188, 212)",
"rgb(139, 195, 74)"
],
}],
labels: [
"Pink",
"Amber",
"Cyan",
"Light Green"
]
},
options: {
responsive: true,
legend: false
}
}
}
return config;
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,46 @@
$(function () {
$('.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;
}
}
});
});

View File

@@ -0,0 +1,168 @@
$(function () {
getMorris('line', 'line_chart');
getMorris('bar', 'bar_chart');
getMorris('area', 'area_chart');
getMorris('donut', 'donut_chart');
});
function getMorris(type, element) {
if (type === 'line') {
Morris.Line({
element: element,
data: [{
'period': '2011 Q3',
'licensed': 3407,
'sorned': 660
}, {
'period': '2011 Q2',
'licensed': 3351,
'sorned': 629
}, {
'period': '2011 Q1',
'licensed': 3269,
'sorned': 618
}, {
'period': '2010 Q4',
'licensed': 3246,
'sorned': 661
}, {
'period': '2009 Q4',
'licensed': 3171,
'sorned': 676
}, {
'period': '2008 Q4',
'licensed': 3155,
'sorned': 681
}, {
'period': '2007 Q4',
'licensed': 3226,
'sorned': 620
}, {
'period': '2006 Q4',
'licensed': 3245,
'sorned': null
}, {
'period': '2005 Q4',
'licensed': 3289,
'sorned': null
}],
xkey: 'period',
ykeys: ['licensed', 'sorned'],
labels: ['Licensed', 'Off the road'],
lineColors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)'],
lineWidth: 3
});
} else if (type === 'bar') {
Morris.Bar({
element: element,
data: [{
x: '2011 Q1',
y: 3,
z: 2,
a: 3
}, {
x: '2011 Q2',
y: 2,
z: null,
a: 1
}, {
x: '2011 Q3',
y: 0,
z: 2,
a: 4
}, {
x: '2011 Q4',
y: 2,
z: 4,
a: 3
}],
xkey: 'x',
ykeys: ['y', 'z', 'a'],
labels: ['Y', 'Z', 'A'],
barColors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)', 'rgb(0, 150, 136)'],
});
} else if (type === 'area') {
Morris.Area({
element: element,
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',
lineColors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)', 'rgb(0, 150, 136)']
});
} else if (type === 'donut') {
Morris.Donut({
element: element,
data: [{
label: 'Jam',
value: 25
}, {
label: 'Frosted',
value: 40
}, {
label: 'Custard',
value: 25
}, {
label: 'Sugar',
value: 10
}],
colors: ['rgb(233, 30, 99)', 'rgb(0, 188, 212)', 'rgb(255, 152, 0)', 'rgb(0, 150, 136)'],
formatter: function (y) {
return y + '%'
}
});
}
}

View File

@@ -0,0 +1,156 @@
$(function () {
$(".sparkline").each(function () {
var $this = $(this);
$this.sparkline('html', $this.data());
});
$('.sparkline-pie').sparkline('html', {
type: 'pie',
offset: 90,
width: '150px',
height: '150px',
sliceColors: ['#E91E63', '#00BCD4', '#FFC107']
})
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: '#77f', 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': '#44f' } });
// 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: '#4f4' });
// Discrete charts
$('.discrete1').sparkline('html',
{ type: 'discrete', lineColor: 'blue', xwidth: 18 });
$('#discrete2').sparkline('html',
{ type: 'discrete', lineColor: 'blue', thresholdColor: 'red', thresholdValue: 4 });
// Bullet charts
$('.sparkbullet').sparkline('html', { type: 'bullet' });
// Pie charts
$('.sparkpie').sparkline('html', { type: 'pie', height: '1.0em' });
// 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);
}
//=================================================================