mirror of https://github.com/akveo/blur-admin
feature(update) - updated chartJs configuration
ESadouski
parent
4ef797e8cb
commit
0187c331ee
|
|
@ -1,66 +1,81 @@
|
|||
<div class="row">
|
||||
<div class="col-md-4" ng-controller="chartJs1DCtrl">
|
||||
<div ba-panel ba-panel-title="Pie" ba-panel-class="with-scroll ">
|
||||
<canvas id="pie" class="chart chart-pie"
|
||||
chart-legend="true" chart-options="options" chart-data="data" chart-labels="labels" chart-click="changeData">
|
||||
</canvas>
|
||||
<div class="col-md-4" ng-controller="chartJs1DCtrl">
|
||||
<div ba-panel ba-panel-title="Pie" ba-panel-class="with-scroll ">
|
||||
<div class="chartjs-canvas-holder-first-row">
|
||||
<canvas id="pie" class="chart chart-pie"
|
||||
chart-options="options" chart-data="data" chart-labels="labels"
|
||||
chart-click="changeData">
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" ng-controller="chartJs1DCtrl">
|
||||
<div ba-panel ba-panel-title="Doughnut" ba-panel-class="with-scroll ">
|
||||
<canvas id="doughnut" chart-options="options" class="chart chart-doughnut"
|
||||
chart-legend="true" chart-data="data" chart-labels="labels" chart-click="changeData">
|
||||
</canvas>
|
||||
<div class="col-md-4" ng-controller="chartJs1DCtrl">
|
||||
<div ba-panel ba-panel-title="Doughnut" ba-panel-class="with-scroll ">
|
||||
<div class="chartjs-canvas-holder-first-row">
|
||||
<canvas id="doughnut" chart-options="options" class="chart chart-doughnut"
|
||||
chart-data="data" chart-labels="labels" chart-click="changeData">
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4" ng-controller="chartJs1DCtrl">
|
||||
<div ba-panel ba-panel-title="Polar" ba-panel-class="with-scroll ">
|
||||
<canvas id="polar-area" class="chart chart-polar-area"
|
||||
chart-data="data" chart-options="polarOptions" chart-labels="labels" chart-legend="true" chart-click="changeData">
|
||||
</canvas>
|
||||
<div class="col-md-4" ng-controller="chartJs1DCtrl">
|
||||
<div ba-panel ba-panel-title="Polar" ba-panel-class="with-scroll ">
|
||||
<div class="chartjs-canvas-holder-first-row">
|
||||
<canvas id="polar-area" class="chart chart-polar-area"
|
||||
chart-data="data" chart-options="options" chart-labels="labels"
|
||||
chart-click="changeData">
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row ">
|
||||
<div class="col-md-6" ng-controller="chartJsWaveCtrl">
|
||||
<div ba-panel ba-panel-title="Animated Radar" ba-panel-class="with-scroll col-eq-height">
|
||||
<canvas id="waveLine" class="chart chart-radar" chart-data="data" chart-labels="labels"
|
||||
chart-legend="false"></canvas>
|
||||
<div class="col-md-6" ng-controller="chartJsWaveCtrl">
|
||||
<div ba-panel ba-panel-title="Animated Radar" ba-panel-class="col-eq-height">
|
||||
<div class="chartjs-canvas-holder-second-row">
|
||||
<canvas id="waveLine" class="chart chart-radar" chart-data="[data]" chart-labels="labels"></canvas>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6" ng-controller="chartJsWaveCtrl">
|
||||
<div ba-panel ba-panel-title="Animated Bars" ba-panel-class="with-scroll col-eq-height">
|
||||
<canvas id="waveBars" class="chart chart-bar" chart-data="data" chart-labels="labels"
|
||||
chart-legend="false"></canvas>
|
||||
<div class="col-md-6" ng-controller="chartJsWaveCtrl">
|
||||
<div ba-panel ba-panel-title="Animated Bars" ba-panel-class="col-eq-height">
|
||||
<div class="chartjs-canvas-holder-second-row">
|
||||
<canvas id="waveBars" class="chart chart-bar" chart-data="[data]" chart-labels="labels"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row ">
|
||||
<div class="col-lg-4 col-md-6" ng-controller="chartJs2DCtrl">
|
||||
<div ba-panel ba-panel-title="Radar" ba-panel-class="with-scroll ">
|
||||
<canvas id="radar" class="chart chart-radar"
|
||||
chart-legend="false" chart-series="series" chart-data="data" chart-labels="labels"
|
||||
chart-click="changeData">
|
||||
</canvas>
|
||||
<div class="col-lg-4 col-md-6" ng-controller="chartJs2DCtrl">
|
||||
<div ba-panel ba-panel-title="Radar" ba-panel-class="with-scroll ">
|
||||
<div class="chartjs-canvas-holder-third-row">
|
||||
<canvas id="radar" class="chart chart-radar" chart-series="series" chart-data="data"
|
||||
chart-labels="labels" chart-click="changeData">
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6" ng-controller="chartJs2DCtrl">
|
||||
<div ba-panel ba-panel-title="Line" ba-panel-class="with-scroll ">
|
||||
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
|
||||
chart-legend="false" chart-series="series" chart-click="changeData"></canvas>
|
||||
<div class="col-lg-4 col-md-6" ng-controller="chartJs2DCtrl">
|
||||
<div ba-panel ba-panel-title="Line" ba-panel-class="with-scroll ">
|
||||
<div class="chartjs-canvas-holder-third-row">
|
||||
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels"
|
||||
chart-series="series" chart-click="changeData"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-12" ng-controller="chartJs2DCtrl">
|
||||
<div ba-panel ba-panel-title="Bars" ba-panel-class="with-scroll ">
|
||||
<canvas id="bar" class="chart chart-bar"
|
||||
chart-data="data" chart-labels="labels" chart-series="series" chart-click="changeData">
|
||||
</canvas>
|
||||
<div class="col-lg-4 col-md-12" ng-controller="chartJs2DCtrl">
|
||||
<div ba-panel ba-panel-title="Bars" ba-panel-class="with-scroll ">
|
||||
<div class="chartjs-canvas-holder-third-row">
|
||||
<canvas id="bar" class="chart chart-bar"
|
||||
chart-data="data" chart-labels="labels" chart-series="series" chart-click="changeData" chart-update="updateC">
|
||||
</canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,38 +3,70 @@
|
|||
* created on 12/16/15
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.charts.chartJs', [])
|
||||
.config(routeConfig).config(chartJsConfig);
|
||||
angular.module('BlurAdmin.pages.charts.chartJs', [])
|
||||
.config(routeConfig).config(chartJsConfig);
|
||||
|
||||
/** @ngInject */
|
||||
function routeConfig($stateProvider) {
|
||||
$stateProvider
|
||||
.state('charts.chartJs', {
|
||||
url: '/chartJs',
|
||||
templateUrl: 'app/pages/charts/chartJs/chartJs.html',
|
||||
title: 'Chart.js',
|
||||
sidebarMeta: {
|
||||
order: 200,
|
||||
},
|
||||
/** @ngInject */
|
||||
function routeConfig($stateProvider) {
|
||||
$stateProvider
|
||||
.state('charts.chartJs', {
|
||||
url: '/chartJs',
|
||||
templateUrl: 'app/pages/charts/chartJs/chartJs.html',
|
||||
title: 'Chart.js',
|
||||
sidebarMeta: {
|
||||
order: 200
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function chartJsConfig(ChartJsProvider, baConfigProvider) {
|
||||
var layoutColors = baConfigProvider.colors;
|
||||
// Configure all charts
|
||||
ChartJsProvider.setOptions({
|
||||
chartColors: [
|
||||
layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.primaryLight],
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
animation: {
|
||||
duration: 2500
|
||||
},
|
||||
scale: {
|
||||
gridLines: {
|
||||
color: layoutColors.border
|
||||
},
|
||||
scaleLabel: {
|
||||
fontColor: layoutColors.defaultText
|
||||
},
|
||||
ticks: {
|
||||
fontColor: layoutColors.defaultText,
|
||||
showLabelBackdrop: false
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function chartJsConfig(ChartJsProvider, baConfigProvider) {
|
||||
var layoutColors = baConfigProvider.colors;
|
||||
// Configure all charts
|
||||
ChartJsProvider.setOptions({
|
||||
colours: [ layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.primaryLight],
|
||||
responsive: true,
|
||||
scaleFontColor: layoutColors.defaultText,
|
||||
scaleLineColor: layoutColors.border,
|
||||
pointLabelFontColor: layoutColors.defaultText
|
||||
});
|
||||
// Configure all line charts
|
||||
ChartJsProvider.setOptions('Line', {
|
||||
datasetFill: false
|
||||
});
|
||||
}
|
||||
// Configure all line charts
|
||||
ChartJsProvider.setOptions('Line', {
|
||||
datasetFill: false
|
||||
});
|
||||
// Configure all radar charts
|
||||
ChartJsProvider.setOptions('radar', {
|
||||
scale: {
|
||||
pointLabels: {
|
||||
fontColor: layoutColors.defaultText
|
||||
},
|
||||
ticks: {
|
||||
maxTicksLimit: 5,
|
||||
display: false
|
||||
}
|
||||
}
|
||||
});
|
||||
// Configure all bar charts
|
||||
ChartJsProvider.setOptions('bar', {
|
||||
tooltips: {
|
||||
enabled: false
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -9,17 +9,24 @@
|
|||
.controller('chartJs1DCtrl', chartJs1DCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function chartJs1DCtrl($scope) {
|
||||
function chartJs1DCtrl($scope, baConfig) {
|
||||
var layoutColors = baConfig.colors;
|
||||
|
||||
$scope.labels =["Sleeping", "Designing", "Coding", "Cycling"];
|
||||
$scope.data = [20, 40, 5, 35];
|
||||
$scope.options = {
|
||||
segmentShowStroke : false
|
||||
};
|
||||
|
||||
$scope.polarOptions = {
|
||||
scaleShowLabelBackdrop : false,
|
||||
segmentShowStroke : false
|
||||
elements: {
|
||||
arc: {
|
||||
borderWidth: 0
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
fontColor: layoutColors.defaultText
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$scope.changeData = function () {
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@
|
|||
|
||||
/** @ngInject */
|
||||
function chartJs2DCtrl($scope) {
|
||||
$scope.labels =["May", "June", "Jule", "August", "September", "October", "November"];
|
||||
$scope.labels =["May", "Jun", "Jul", "Aug", "Sep"];
|
||||
$scope.data = [
|
||||
[65, 59, 90, 81, 56, 55, 40],
|
||||
[28, 48, 40, 19, 88, 27, 45]
|
||||
[65, 59, 90, 81, 56],
|
||||
[28, 48, 40, 19, 88]
|
||||
];
|
||||
$scope.series = ['Product A', 'Product B'];
|
||||
|
||||
|
|
|
|||
|
|
@ -10,14 +10,20 @@
|
|||
|
||||
/** @ngInject */
|
||||
function chartJsWaveCtrl($scope, $interval, stopableInterval) {
|
||||
$scope.labels =["April", "May", "June", "Jule", "August", "September", "October", "November", "December"];
|
||||
$scope.data = [[1, 9, 3, 4, 5, 6, 7, 8, 2].map(function(e){
|
||||
$scope.labels =["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
||||
$scope.data = [1, 9, 3, 4, 5, 6, 7, 8, 2].map(function(e){
|
||||
return Math.sin(e) * 25 +25;
|
||||
})];
|
||||
});
|
||||
|
||||
stopableInterval.start($interval, function(){
|
||||
$scope.data[0].unshift($scope.data[0].pop());
|
||||
}, 300)
|
||||
var tempArray = [];
|
||||
var lastElement = $scope.data[$scope.data.length-1];
|
||||
for(var i = $scope.data.length-1; i > 0; i--){
|
||||
tempArray[i] = $scope.data[i-1];
|
||||
}
|
||||
tempArray[0] = lastElement;
|
||||
$scope.data = tempArray;
|
||||
}, 400)
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -11,52 +11,51 @@
|
|||
/** @ngInject */
|
||||
function TrafficChartCtrl($scope, baConfig, colorHelper) {
|
||||
|
||||
$scope.transparent = baConfig.theme.blur;
|
||||
var dashboardColors = baConfig.colors.dashboard;
|
||||
$scope.doughnutData = [
|
||||
{
|
||||
value: 2000,
|
||||
color: dashboardColors.white,
|
||||
highlight: colorHelper.shade(dashboardColors.white, 15),
|
||||
label: 'Other',
|
||||
percentage: 87,
|
||||
order: 1,
|
||||
}, {
|
||||
value: 1500,
|
||||
color: dashboardColors.blueStone,
|
||||
highlight: colorHelper.shade(dashboardColors.blueStone, 15),
|
||||
label: 'Search engines',
|
||||
percentage: 22,
|
||||
order: 4,
|
||||
}, {
|
||||
value: 1000,
|
||||
color: dashboardColors.surfieGreen,
|
||||
highlight: colorHelper.shade(dashboardColors.surfieGreen, 15),
|
||||
label: 'Referral Traffic',
|
||||
percentage: 70,
|
||||
order: 3,
|
||||
}, {
|
||||
value: 1200,
|
||||
color: dashboardColors.silverTree,
|
||||
highlight: colorHelper.shade(dashboardColors.silverTree, 15),
|
||||
label: 'Direct Traffic',
|
||||
percentage: 38,
|
||||
order: 2,
|
||||
}, {
|
||||
value: 400,
|
||||
color: dashboardColors.gossip,
|
||||
highlight: colorHelper.shade(dashboardColors.gossip, 15),
|
||||
label: 'Ad Campaigns',
|
||||
percentage: 17,
|
||||
order: 0,
|
||||
},
|
||||
];
|
||||
$scope.transparent = baConfig.theme.blur;
|
||||
var dashboardColors = baConfig.colors.dashboard;
|
||||
$scope.doughnutData = {
|
||||
labels: [
|
||||
'Other',
|
||||
'Search engines',
|
||||
'Referral Traffic',
|
||||
'Direct Traffic',
|
||||
'Ad Campaigns'
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [2000, 1500, 1000, 1200, 400],
|
||||
backgroundColor: [
|
||||
dashboardColors.white,
|
||||
dashboardColors.blueStone,
|
||||
dashboardColors.surfieGreen,
|
||||
dashboardColors.silverTree,
|
||||
dashboardColors.gossip
|
||||
|
||||
var ctx = document.getElementById('chart-area').getContext('2d');
|
||||
window.myDoughnut = new Chart(ctx).Doughnut($scope.doughnutData, {
|
||||
segmentShowStroke: false,
|
||||
percentageInnerCutout : 64,
|
||||
responsive: true
|
||||
});
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
colorHelper.shade(dashboardColors.white, 15),
|
||||
colorHelper.shade(dashboardColors.blueStone, 15),
|
||||
colorHelper.shade(dashboardColors.surfieGreen, 15),
|
||||
colorHelper.shade(dashboardColors.silverTree, 15),
|
||||
colorHelper.shade(dashboardColors.gossip, 15)
|
||||
],
|
||||
percentage: [87, 22, 70, 38, 17]
|
||||
}]
|
||||
};
|
||||
|
||||
var ctx = document.getElementById('chart-area').getContext('2d');
|
||||
window.myDoughnut = new Chart(ctx, {
|
||||
type: 'doughnut',
|
||||
data: $scope.doughnutData,
|
||||
options: {
|
||||
cutoutPercentage: 64,
|
||||
responsive: true,
|
||||
elements: {
|
||||
arc: {
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
|
@ -11,18 +11,20 @@
|
|||
<div class="traffic-legend"></div>
|
||||
</div>
|
||||
|
||||
<div class="channels-info">
|
||||
<div>
|
||||
<div class="channels-info-item" ng-repeat="item in doughnutData | orderBy:'order'">
|
||||
<div class="legend-color" style="background-color: {{::item.color}}"></div>
|
||||
<p>{{::item.label}}<span class="channel-number">+{{item.percentage}}%</span></p>
|
||||
<div class="progress progress-sm channel-progress">
|
||||
<div class="progress-bar " role="progressbar"
|
||||
aria-valuenow="{{item.percentage}}" aria-valuemin="0" aria-valuemax="100" style="width: {{item.percentage}}%">
|
||||
</div>
|
||||
<div class="channels-info">
|
||||
<div>
|
||||
<div class="channels-info-item" ng-repeat="label in doughnutData.labels"
|
||||
ng-init="i = $index; data = doughnutData.datasets[0]">
|
||||
<div class="legend-color" style="background-color: {{::data.backgroundColor[i]}}"></div>
|
||||
<p>{{::label}}<span class="channel-number">+{{data.percentage[i]}}%</span></p>
|
||||
<div class="progress progress-sm channel-progress">
|
||||
<div class="progress-bar " role="progressbar"
|
||||
aria-valuenow="{{data.percentage[i]}}" aria-valuemin="0" aria-valuemax="100"
|
||||
style="width: {{item.percentage}}%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -162,4 +162,16 @@
|
|||
|
||||
.chartist h5 {
|
||||
font-weight: $font-normal;
|
||||
}
|
||||
|
||||
.chartjs-canvas-holder-first-row {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chartjs-canvas-holder-second-row {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.chartjs-canvas-holder-third-row {
|
||||
height: 250px;
|
||||
}
|
||||
Loading…
Reference in New Issue