diff --git a/bower.json b/bower.json index 87ee5f5..be95cad 100644 --- a/bower.json +++ b/bower.json @@ -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": { diff --git a/src/app/pages/charts/chartJs/chartJs.html b/src/app/pages/charts/chartJs/chartJs.html index 08cf605..85fdd29 100644 --- a/src/app/pages/charts/chartJs/chartJs.html +++ b/src/app/pages/charts/chartJs/chartJs.html @@ -52,7 +52,7 @@
- + diff --git a/src/app/pages/charts/chartist/chartist.html b/src/app/pages/charts/chartist/chartist.html new file mode 100644 index 0000000..fe976a1 --- /dev/null +++ b/src/app/pages/charts/chartist/chartist.html @@ -0,0 +1,52 @@ +
+
+
+ +
Simple line chart
+ +
Line chart with area
+ +
Bi-polar line chart with area only
+ + +
+ +
+ +
Simple bar chart
+ +
Multi-line labels bar chart
+ +
Stacked bar chart
+ + +
+
+ +
+
+ +
+
Simple Pie
+ +
+
Pie with labels
+ +
+
Donut
+ +
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/pages/charts/chartist/chartist.module.js b/src/app/pages/charts/chartist/chartist.module.js new file mode 100644 index 0000000..ce6f74a --- /dev/null +++ b/src/app/pages/charts/chartist/chartist.module.js @@ -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' + }); + } + +})(); \ No newline at end of file diff --git a/src/app/pages/charts/chartist/chartistCtrl.js b/src/app/pages/charts/chartist/chartistCtrl.js new file mode 100644 index 0000000..2a5be93 --- /dev/null +++ b/src/app/pages/charts/chartist/chartistCtrl.js @@ -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]; + } + }] + ]; + } + + + } + +})(); \ No newline at end of file diff --git a/src/app/pages/charts/charts.module.js b/src/app/pages/charts/charts.module.js index 7abc82b..883e044 100644 --- a/src/app/pages/charts/charts.module.js +++ b/src/app/pages/charts/charts.module.js @@ -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); diff --git a/src/app/theme/components/contentTop/contentTop.directive.js b/src/app/theme/components/contentTop/contentTop.directive.js index be95333..2f8a9cc 100644 --- a/src/app/theme/components/contentTop/contentTop.directive.js +++ b/src/app/theme/components/contentTop/contentTop.directive.js @@ -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', diff --git a/src/app/theme/components/sidebar/SidebarCtrl.js b/src/app/theme/components/sidebar/SidebarCtrl.js index c8245c3..da5063c 100644 --- a/src/app/theme/components/sidebar/SidebarCtrl.js +++ b/src/app/theme/components/sidebar/SidebarCtrl.js @@ -27,6 +27,10 @@ { title: 'Chart.js', root: '#/charts/chartJs' + }, + { + title: 'Chartist', + root: '#/charts/chartist' } ] }, diff --git a/src/app/theme/theme.module.js b/src/app/theme/theme.module.js index 20c1b58..ced2925 100644 --- a/src/app/theme/theme.module.js +++ b/src/app/theme/theme.module.js @@ -7,7 +7,8 @@ angular.module('BlurAdmin.theme', [ 'toastr', - "chart.js", + 'chart.js', + 'angular-chartist', 'BlurAdmin.theme.components' ]); diff --git a/src/sass/app/_chartsPage.scss b/src/sass/app/_chartsPage.scss index 321ab6b..6883f44 100644 --- a/src/sass/app/_chartsPage.scss +++ b/src/sass/app/_chartsPage.scss @@ -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; }