Ümit Tunç
133 lines
5.0 KiB
JavaScript
133 lines
5.0 KiB
JavaScript
/*
|
|
* Document : be_blocks_widgets_stats.js
|
|
* Author : pixelcave
|
|
* Description: Custom JS code used in Widgets Stats Page
|
|
*/
|
|
|
|
class BeBlocksWidgetsStats {
|
|
/*
|
|
* Chart.js Charts, for more examples you can check out http://www.chartjs.org/docs
|
|
*
|
|
*/
|
|
static initWidgetsChartJS() {
|
|
// Set Global Chart.js configuration
|
|
Chart.defaults.global.defaultFontColor = '#555555';
|
|
Chart.defaults.scale.gridLines.color = "transparent";
|
|
Chart.defaults.scale.gridLines.zeroLineColor = "transparent";
|
|
Chart.defaults.scale.display = false;
|
|
Chart.defaults.scale.ticks.beginAtZero = true;
|
|
Chart.defaults.scale.ticks.suggestedMax = 11;
|
|
Chart.defaults.global.elements.line.borderWidth = 2;
|
|
Chart.defaults.global.elements.point.radius = 5;
|
|
Chart.defaults.global.elements.point.hoverRadius = 7;
|
|
Chart.defaults.global.tooltips.cornerRadius = 3;
|
|
Chart.defaults.global.legend.display = false;
|
|
|
|
// Chart Containers
|
|
let chartWidgetLinesCon = jQuery('.js-chartjs-widget-lines');
|
|
let chartWidgetLinesCon2 = jQuery('.js-chartjs-widget-lines2');
|
|
let chartWidgetLinesCon3 = jQuery('.js-chartjs-widget-lines3');
|
|
let chartWidgetLinesCon4 = jQuery('.js-chartjs-widget-lines4');
|
|
|
|
// Charts letiables
|
|
let chartWidgetLines, chartWidgetLines2, chartWidgetLines3, chartWidgetLines4;
|
|
|
|
// Lines Charts Data
|
|
let chartWidgetLinesData = {
|
|
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
|
datasets: [
|
|
{
|
|
label: 'This Week',
|
|
fill: true,
|
|
backgroundColor: 'rgba(66,165,245,.25)',
|
|
borderColor: 'rgba(66,165,245,1)',
|
|
pointBackgroundColor: 'rgba(66,165,245,1)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgba(66,165,245,1)',
|
|
data: [5, 7, 4, 5, 6, 8, 4]
|
|
}
|
|
]
|
|
};
|
|
|
|
let chartWidgetLinesData2 = {
|
|
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
|
datasets: [
|
|
{
|
|
label: 'This Week',
|
|
fill: true,
|
|
backgroundColor: 'rgba(255,202,40,.25)',
|
|
borderColor: 'rgba(255,202,40,1)',
|
|
pointBackgroundColor: 'rgba(255,202,40,1)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgba(255,202,40,1)',
|
|
data: [6, 9, 5, 6, 9, 7, 10]
|
|
}
|
|
]
|
|
};
|
|
|
|
let chartWidgetLinesData3 = {
|
|
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
|
datasets: [
|
|
{
|
|
label: 'This Week',
|
|
fill: true,
|
|
backgroundColor: 'rgba(1,229,148,.25)',
|
|
borderColor: 'rgba(1,229,148,1)',
|
|
pointBackgroundColor: 'rgba(1,229,148,1)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgba(1,229,148,1)',
|
|
data: [6, 9, 5, 6, 9, 7, 10]
|
|
}
|
|
]
|
|
};
|
|
|
|
let chartWidgetLinesData4 = {
|
|
labels: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
|
datasets: [
|
|
{
|
|
label: 'This Week',
|
|
fill: true,
|
|
backgroundColor: 'rgba(237,83,80,.25)',
|
|
borderColor: 'rgba(237,83,80,1)',
|
|
pointBackgroundColor: 'rgba(237,83,80,1)',
|
|
pointBorderColor: '#fff',
|
|
pointHoverBackgroundColor: '#fff',
|
|
pointHoverBorderColor: 'rgba(237,83,80,1)',
|
|
data: [5, 7, 4, 5, 6, 8, 4]
|
|
}
|
|
]
|
|
};
|
|
|
|
// Init Charts
|
|
if (chartWidgetLinesCon.length ) {
|
|
chartWidgetLines = new Chart(chartWidgetLinesCon, { type: 'line', data: chartWidgetLinesData });
|
|
}
|
|
|
|
if (chartWidgetLinesCon2.length ) {
|
|
chartWidgetLines2 = new Chart(chartWidgetLinesCon2, { type: 'line', data: chartWidgetLinesData2 });
|
|
}
|
|
|
|
if (chartWidgetLinesCon3.length ) {
|
|
chartWidgetLines3 = new Chart(chartWidgetLinesCon3, { type: 'line', data: chartWidgetLinesData3 });
|
|
}
|
|
|
|
if (chartWidgetLinesCon4.length ) {
|
|
chartWidgetLines4 = new Chart(chartWidgetLinesCon4, { type: 'line', data: chartWidgetLinesData4 });
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Init functionality
|
|
*
|
|
*/
|
|
static init() {
|
|
this.initWidgetsChartJS();
|
|
}
|
|
}
|
|
|
|
// Initialize when page loads
|
|
jQuery(() => { BeBlocksWidgetsStats.init(); });
|