jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

chartist charts

pull/3/head
alex 2015-12-17 19:05:29 +03:00
parent 01be92edcd
commit 352d7a4965
10 changed files with 368 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
bower.json
View File

@ -44,7 +44,8 @@
"slimScroll": "jquery-slimscroll#~1.3.6",
"angular-progress-button-styles": "~0.1.0",
"angular-ui-router": "~0.2.15",
"angular-chart.js": "~0.8.8"
"angular-chart.js": "~0.8.8",
"angular-chartist.js": "~3.3.12"
},
"overrides": {
"amcharts": {

2
src/app/pages/charts/chartJs/chartJs.html
View File

@ -52,7 +52,7 @@
<div class="row ">
<div class="col-md-6" ng-controller="chartJsWaveCtrl">
<blur-panel title="Animated Line" class-container="with-scroll col-eq-height">
<blur-panel title="Animated Radar" class-container="with-scroll col-eq-height">
<canvas id="waveLine" class="chart chart-radar" chart-data="data" chart-labels="labels"
chart-legend="false"></canvas>
</blur-panel>

52
src/app/pages/charts/chartist/chartist.html Normal file
View File

@ -0,0 +1,52 @@
<section ng-controller="chartistCtrl">
<div class="row">
<div class="col-md-6 ">
<blur-panel title="Lines" class-container="with-scroll ">
<h5>Simple line chart</h5>
<chartist class="ct-chart" chartist-data="simpleLineData" chartist-chart-type="Line"
chartist-chart-options="simpleLineOptions"></chartist>
<h5>Line chart with area</h5>
<chartist class="ct-chart" chartist-data="areaLineData" chartist-chart-type="Line"
chartist-chart-options="areaLineOptions"></chartist>
<h5>Bi-polar line chart with area only</h5>
<chartist class="ct-chart" chartist-data="biLineData" chartist-chart-type="Line"
chartist-chart-options="biLineOptions"></chartist>
</blur-panel>
</div>
<div class="col-md-6 ">
<blur-panel title="Bars" class-container="with-scroll ">
<h5>Simple bar chart</h5>
<chartist class="ct-chart" chartist-data="simpleBarData" chartist-chart-type="Bar"
chartist-chart-options="simpleBarOptions"></chartist>
<h5>Multi-line labels bar chart</h5>
<chartist class="ct-chart" chartist-data="multiBarData" chartist-chart-type="Bar"
chartist-chart-options="multiBarOptions" chartist-responsive-options="multiBarResponsive"></chartist>
<h5>Stacked bar chart</h5>
<chartist class="ct-chart stacked-bar" chartist-data="stackedBarData" chartist-chart-type="Bar"
chartist-chart-options="stackedBarOptions"></chartist>
</blur-panel>
</div>
</div>
<div class="row">
<div class="col-md-12">
<blur-panel title="Pies & Donuts" class-container="with-scroll ">
<div class="row">
<div class="col-md-12 col-lg-4"><h5>Simple Pie</h5>
<chartist class="ct-chart" chartist-data="simplePieData" chartist-chart-type="Pie"
chartist-chart-options="simplePieOptions"></chartist>
</div>
<div class="col-md-12 col-lg-4"><h5>Pie with labels</h5>
<chartist class="ct-chart" chartist-data="labelsPieData" chartist-chart-type="Pie"
chartist-chart-options="labelsPieOptions" chartist-responsive-options="pieResponsive"></chartist>
</div>
<div class="col-md-12 col-lg-4"><h5>Donut</h5>
<chartist class="ct-chart" chartist-data="simpleDonutData" chartist-chart-type="Pie"
chartist-chart-options="simpleDonutOptions" chartist-responsive-options="donutResponsive"></chartist>
</div>
</div>
</blur-panel>
</div>
</div>
</section>

20
src/app/pages/charts/chartist/chartist.module.js Normal file
View File

@ -0,0 +1,20 @@
/**
* @author a.demeshko
* created on 12/17/15
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.charts.chartist', [])
.config(routeConfig);
/** @ngInject */
function routeConfig($stateProvider) {
$stateProvider
.state('charts.chartist', {
url: '/chartist',
templateUrl: 'app/pages/charts/chartist/chartist.html'
});
}
})();

228
src/app/pages/charts/chartist/chartistCtrl.js Normal file
View File

@ -0,0 +1,228 @@
/**
* @author a.demeshko
* created on 12/16/15
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.charts.chartist')
.controller('chartistCtrl', chartistCtrl);
/** @ngInject */
function chartistCtrl($scope) {
$scope.simpleLineOptions = {
fullWidth: true,
height: "300px",
chartPadding: {
right: 40
}
};
$scope.simpleLineData = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[20, 20, 12, 45, 50],
[10, 45, 30, 14, 12],
[34, 12, 12, 40, 50],
[10, 43, 25, 22, 16],
[3, 6, 30, 33, 43]
]
};
$scope.areaLineData = {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[5, 9, 7, 8, 5, 3, 5, 4]
]
};
$scope.areaLineOptions = {
fullWidth: true,
height: "300px",
low: 0,
showArea: true
};
$scope.biLineData = {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [
[1, 2, 3, 1, -2, 0, 1],
[-2, -1, -2, -1, -2.5, -1, -2],
[0, 0, 0, 1, 2, 2.5, 2],
[2.5, 2, 1, 0.5, 1, 0.5, -1]
]
};
$scope.biLineOptions = {
height: "300px",
high: 3,
low: -3,
showArea: true,
showLine: false,
showPoint: false,
fullWidth: true,
axisX: {
showGrid: false
}
};
$scope.simpleBarData = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[15, 24, 43, 27, 5, 10, 23, 44, 68, 50, 26, 8],
[13, 22, 49, 22, 4, 6, 24, 46, 57, 48, 22, 4]
]
};
$scope.simpleBarOptions = {
fullWidth: true,
height: "300px"
};
$scope.multiBarData = {
labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
series: [
[5, 4, 3, 7],
[3, 2, 9, 5],
[1, 5, 8, 4],
[2, 3, 4, 6],
[4, 1, 2, 1]
]
};
$scope.multiBarOptions = {
fullWidth: true,
height: "300px",
stackBars: true,
axisX: {
labelInterpolationFnc: function (value) {
return value.split(/\s+/).map(function (word) {
return word[0];
}).join('');
}
},
axisY: {
offset: 20
}
};
$scope.multiBarResponsive = [
['screen and (min-width: 400px)', {
reverseData: true,
horizontalBars: true,
axisX: {
labelInterpolationFnc: Chartist.noop
},
axisY: {
offset: 60
}
}],
['screen and (min-width: 700px)', {
stackBars: false,
reverseData: false,
horizontalBars: false,
seriesBarDistance: 15
}]
];
$scope.stackedBarData = {
labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
series: [
[800000, 1200000, 1400000, 1300000],
[200000, 400000, 500000, 300000],
[100000, 200000, 400000, 600000]
]
};
$scope.stackedBarOptions = {
fullWidth: true,
height: "300px",
stackBars: true,
axisY: {
labelInterpolationFnc: function (value) {
return (value / 1000) + 'k';
}
}
};
$scope.simplePieData = {
series: [5, 3, 4]
};
$scope.simplePieOptions = {
fullWidth: true,
height: "300px",
weight: "300px",
labelInterpolationFnc: function (value) {
return Math.round(value / 12 * 100) + '%';
}
};
$scope.labelsPieData = {
labels: ['Bananas', 'Apples', 'Grapes'],
series: [20, 15, 40]
};
$scope.labelsPieOptions = {
fullWidth: true,
height: "300px",
weight: "300px",
labelDirection: 'explode',
labelInterpolationFnc: function (value) {
return value[0];
}
};
$scope.simpleDonutData = {
labels: ['Bananas', 'Apples', 'Grapes'],
series: [20, 15, 40]
};
$scope.simpleDonutOptions = {
fullWidth: true,
donut: true,
height: "300px",
weight: "300px",
labelDirection: 'explode',
labelInterpolationFnc: function (value) {
return value[0];
}
};
$scope.donutResponsive = getResponsive(5, 40);
$scope.pieResponsive = getResponsive(20, 80);
function getResponsive(padding, offset){
return [
['screen and (min-width: 1550px)', {
chartPadding: padding,
labelOffset: offset,
labelDirection: 'explode',
labelInterpolationFnc: function (value) {
return value;
}
}],
['screen and (max-width: 1200px)', {
chartPadding: padding,
labelOffset: offset,
labelDirection: 'explode',
labelInterpolationFnc: function (value) {
return value;
}
}],
['screen and (max-width: 600px)', {
chartPadding: 0,
labelOffset: 0,
labelInterpolationFnc: function (value) {
return value[0];
}
}]
];
}
}
})();

3
src/app/pages/charts/charts.module.js
View File

@ -7,7 +7,8 @@
angular.module('BlurAdmin.pages.charts', [
'BlurAdmin.pages.charts.amCharts',
'BlurAdmin.pages.charts.chartJs'
'BlurAdmin.pages.charts.chartJs',
'BlurAdmin.pages.charts.chartist'
])
.config(routeConfig);

5
src/app/theme/components/contentTop/contentTop.directive.js
View File

@ -19,8 +19,9 @@
'/page': 'Default Page',
'/404': 'Page Not Found',
'/buttons': 'Buttons',
'/amCharts': 'Charts',
'/chartJs': 'Chart.js ',
'/charts/amCharts': 'amCharts',
'/charts/chartJs': 'Chart.js',
'/charts/chartist': 'Chartist.js',
'/grid': 'Grid',
'/alerts': 'Alerts',
'/progressBars': 'Progress Bars',

4
src/app/theme/components/sidebar/SidebarCtrl.js
View File

@ -27,6 +27,10 @@
{
title: 'Chart.js',
root: '#/charts/chartJs'
},
{
title: 'Chartist',
root: '#/charts/chartist'
}
]
},

3
src/app/theme/theme.module.js
View File

@ -7,7 +7,8 @@
angular.module('BlurAdmin.theme', [
'toastr',
"chart.js",
'chart.js',
'angular-chartist',
'BlurAdmin.theme.components'
]);

54
src/sass/app/_chartsPage.scss
View File

@ -49,6 +49,60 @@
margin: 1px;
}
.ct-chart .ct-label{
font-size: 1em;
}
.ct-series-a {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $primary;
}
.ct-slice-pie, .ct-area{
fill: $primary;
}
}
.ct-series-b {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $success;
}
.ct-slice-pie, .ct-area{
fill: $success;
}
}
.ct-series-c {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $warning;
}
.ct-slice-pie, .ct-area{
fill: $warning;
}
}
.ct-series-d {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $danger;
}
.ct-slice-pie, .ct-area{
fill: $danger;
}
}
.ct-series-e {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $info;
}
.ct-slice-pie, .ct-area{
fill: $info;
}
}
.stacked-bar .ct-bar{
stroke-width: 30px;
}
.amChartsCompareList {
border: 1px solid #CCCCCC;
}