diff --git a/src/app/pages/charts/amCharts/amCharts.module.js b/src/app/pages/charts/amCharts/amCharts.module.js new file mode 100644 index 0000000..bdf28b9 --- /dev/null +++ b/src/app/pages/charts/amCharts/amCharts.module.js @@ -0,0 +1,20 @@ +/** + * @author v.lugovsky + * created on 16.12.2015 + */ +(function () { + 'use strict'; + + angular.module('BlurAdmin.pages.charts.amCharts', []) + .config(routeConfig); + + /** @ngInject */ + function routeConfig($stateProvider) { + $stateProvider + .state('charts.amCharts', { + url: '/amCharts', + templateUrl: 'app/pages/charts/amCharts/charts.html' + }); + } + +})(); diff --git a/src/app/pages/charts/amCharts/areaChart/AreaChartCtrl.js b/src/app/pages/charts/amCharts/areaChart/AreaChartCtrl.js new file mode 100644 index 0000000..b273670 --- /dev/null +++ b/src/app/pages/charts/amCharts/areaChart/AreaChartCtrl.js @@ -0,0 +1,146 @@ +/** + * @author v.lugovsky + * created on 16.12.2015 + */ +(function () { + 'use strict'; + + angular.module('BlurAdmin.pages.charts.amCharts') + .controller('AreaChartCtrl', AreaChartCtrl); + + /** @ngInject */ + function AreaChartCtrl($scope, layoutColors, $element, tplSkinChartWatcherHelper) { + var id = $element[0].getAttribute('id'); + var areaChart = AmCharts.makeChart(id, { + type: 'serial', + theme: 'blur', + dataProvider: [ + { + lineColor: layoutColors.danger, + date: '2012-01-01', + duration: 408 + }, + { + date: '2012-01-02', + duration: 482 + }, + { + date: '2012-01-03', + duration: 562 + }, + { + date: '2012-01-04', + duration: 379 + }, + { + lineColor: layoutColors.success, + date: '2012-01-05', + duration: 501 + }, + { + date: '2012-01-06', + duration: 443 + }, + { + date: '2012-01-07', + duration: 405 + }, + { + date: '2012-01-08', + duration: 309, + lineColor: layoutColors.primary + }, + { + date: '2012-01-09', + duration: 287 + }, + { + date: '2012-01-10', + duration: 485 + }, + { + date: '2012-01-11', + duration: 890 + }, + { + date: '2012-01-12', + duration: 810 + } + ], + balloon: { + cornerRadius: 6, + horizontalPadding: 15, + verticalPadding: 10 + }, + valueAxes: [ + { + duration: 'mm', + durationUnits: { + hh: 'h ', + mm: 'min' + }, + axisAlpha: 0 + } + ], + graphs: [ + { + bullet: 'square', + bulletBorderAlpha: 1, + bulletBorderThickness: 1, + fillAlphas: 0.3, + fillColorsField: 'lineColor', + legendValueText: '[[value]]', + lineColorField: 'lineColor', + title: 'duration', + valueField: 'duration' + } + ], + + chartCursor: { + categoryBalloonDateFormat: 'YYYY MMM DD', + cursorAlpha: 0, + fullWidth: true + }, + dataDateFormat: 'YYYY-MM-DD', + categoryField: 'date', + categoryAxis: { + dateFormats: [ + { + period: 'DD', + format: 'DD' + }, + { + period: 'WW', + format: 'MMM DD' + }, + { + period: 'MM', + format: 'MMM' + }, + { + period: 'YYYY', + format: 'YYYY' + } + ], + parseDates: true, + autoGridCount: false, + axisColor: '#555555', + gridAlpha: 0, + gridCount: 50 + }, + export: { + enabled: true + }, + pathToImages: 'img/' + }); + + tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, areaChart); + + areaChart.addListener('dataUpdated', zoomAreaChart); + + function zoomAreaChart() { + areaChart.zoomToDates(new Date(2012, 0, 3), new Date(2012, 0, 11)); + } + } + +})(); diff --git a/src/app/pages/charts/amCharts/areaChart/areaChart.html b/src/app/pages/charts/amCharts/areaChart/areaChart.html new file mode 100644 index 0000000..bd53f4b --- /dev/null +++ b/src/app/pages/charts/amCharts/areaChart/areaChart.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/app/pages/charts/amCharts/barChart/BarChartCtrl.js b/src/app/pages/charts/amCharts/barChart/BarChartCtrl.js new file mode 100644 index 0000000..beed31f --- /dev/null +++ b/src/app/pages/charts/amCharts/barChart/BarChartCtrl.js @@ -0,0 +1,88 @@ +/** + * @author v.lugovsky + * created on 16.12.2015 + */ +(function () { + 'use strict'; + + angular.module('BlurAdmin.pages.charts.amCharts') + .controller('BarChartCtrl', BarChartCtrl); + + /** @ngInject */ + function BarChartCtrl($scope, layoutColors, $element, tplSkinChartWatcherHelper) { + var id = $element[0].getAttribute('id'); + var barChart = AmCharts.makeChart(id, { + type: 'serial', + theme: 'blur', + dataProvider: [ + { + country: 'USA', + visits: 3025, + color: layoutColors.primary + }, + { + country: 'China', + visits: 1882, + color: layoutColors.danger + + }, + { + country: 'Japan', + visits: 1809, + color: layoutColors.primaryLight + }, + { + country: 'Germany', + visits: 1322, + color: layoutColors.success + }, + { + country: 'UK', + visits: 1122, + color: layoutColors.warning + }, + { + country: 'France', + visits: 1114, + color: layoutColors.default + } + ], + valueAxes: [ + { + axisAlpha: 0, + position: 'left', + title: 'Visitors from country' + } + ], + startDuration: 1, + graphs: [ + { + balloonText: '[[category]]: [[value]]', + fillColorsField: 'color', + fillAlphas: 0.9, + lineAlpha: 0.2, + type: 'column', + valueField: 'visits' + } + ], + chartCursor: { + categoryBalloonEnabled: false, + cursorAlpha: 0, + zoomable: false + }, + categoryField: 'country', + categoryAxis: { + gridPosition: 'start', + labelRotation: 45 + }, + export: { + enabled: true + }, + creditsPosition: 'top-right', + pathToImages: 'img/' + }); + + tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, barChart); + } + +})(); diff --git a/src/app/pages/charts/amCharts/barChart/barChart.html b/src/app/pages/charts/amCharts/barChart/barChart.html new file mode 100644 index 0000000..fd2617c --- /dev/null +++ b/src/app/pages/charts/amCharts/barChart/barChart.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/app/pages/charts/amCharts/charts.html b/src/app/pages/charts/amCharts/charts.html index 9fb49c3..93c27a6 100644 --- a/src/app/pages/charts/amCharts/charts.html +++ b/src/app/pages/charts/amCharts/charts.html @@ -1 +1,30 @@ - \ No newline at end of file +
+ +
+
+ +
+ + +
+ +
+
+ +
+ + +
+ +
+
+ +
+
+ +
+ +
+
+ +
\ No newline at end of file diff --git a/src/app/pages/charts/amCharts/charts.js b/src/app/pages/charts/amCharts/charts.js deleted file mode 100644 index 0f3804c..0000000 --- a/src/app/pages/charts/amCharts/charts.js +++ /dev/null @@ -1,48 +0,0 @@ -'use strict'; - -angular.module('BlurAdmin.amChartsPage', ['ngRoute']) - - .config(['$routeProvider', function ($routeProvider) { - $routeProvider.when('/amCharts', { - templateUrl: 'app/pages/charts/amCharts/charts.html', - controller: 'chartsPageCtrl' - }); - }]) - .controller('chartsPageCtrl', ['$scope', function ($scope) { - $scope.widgetBlocks = [ - { - widgets: [ - [ - { - title: 'Bar Chart', - url: 'app/pages/charts/amCharts/widgets/barChart/barChart.html' - }, - { - title: 'Line Chart', - url: 'app/pages/charts/amCharts/widgets/lineChart/lineChart.html' - } - ], - [ - { - title: 'Area Chart', - url: 'app/pages/charts/amCharts/widgets/areaChart/areaChart.html' - }, - { - title: 'Funnel Chart', - url: 'app/pages/charts/amCharts/widgets/funnelChart/funnelChart.html' - } - ] - ] - }, - { - widgets: [ - [ - { - title: 'Pie Chart', - url: 'app/pages/charts/amCharts/widgets/pieChart/pieChart.html' - } - ] - ] - } - ]; - }]); \ No newline at end of file diff --git a/src/app/pages/charts/amCharts/funnelChart/FunnelChartCtrl.js b/src/app/pages/charts/amCharts/funnelChart/FunnelChartCtrl.js new file mode 100644 index 0000000..26fcc9e --- /dev/null +++ b/src/app/pages/charts/amCharts/funnelChart/FunnelChartCtrl.js @@ -0,0 +1,69 @@ +/** + * @author v.lugovsky + * created on 16.12.2015 + */ +(function () { + 'use strict'; + + angular.module('BlurAdmin.pages.charts.amCharts') + .controller('FunnelChartCtrl', FunnelChartCtrl); + + /** @ngInject */ + function FunnelChartCtrl($scope, $element, tplSkinChartWatcherHelper) { + var id = $element[0].getAttribute('id'); + var funnelChart = AmCharts.makeChart(id, { + type: 'funnel', + theme: 'blur', + dataProvider: [ + { + title: 'Website visits', + value: 300 + }, + { + title: 'Downloads', + value: 123 + }, + { + title: 'Requested prices', + value: 98 + }, + { + title: 'Contaced', + value: 72 + }, + { + title: 'Purchased', + value: 35 + }, + { + title: 'Asked for support', + value: 25 + }, + { + title: 'Purchased more', + value: 18 + } + ], + titleField: 'title', + marginRight: 160, + marginLeft: 15, + labelPosition: 'right', + funnelAlpha: 0.9, + valueField: 'value', + startX: 0, + neckWidth: '0%', + startAlpha: 0, + outlineThickness: 1, + neckHeight: '0%', + balloonText: '[[title]]:[[value]]', + export: { + enabled: true + }, + creditsPosition: 'bottom-left', + pathToImages: 'img/' + }); + + tplSkinChartWatcherHelper.watchFunnelChanges($scope, funnelChart); + } + +})(); diff --git a/src/app/pages/charts/amCharts/funnelChart/funnelChart.html b/src/app/pages/charts/amCharts/funnelChart/funnelChart.html new file mode 100644 index 0000000..2b2295e --- /dev/null +++ b/src/app/pages/charts/amCharts/funnelChart/funnelChart.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/app/pages/charts/amCharts/lineChart/LineChartCtrl.js b/src/app/pages/charts/amCharts/lineChart/LineChartCtrl.js new file mode 100644 index 0000000..074e514 --- /dev/null +++ b/src/app/pages/charts/amCharts/lineChart/LineChartCtrl.js @@ -0,0 +1,155 @@ +/** + * @author v.lugovsky + * created on 16.12.2015 + */ +(function () { + 'use strict'; + + angular.module('BlurAdmin.pages.charts.amCharts') + .controller('LineChartCtrl', LineChartCtrl); + + /** @ngInject */ + function LineChartCtrl($scope, layoutColors, $element, tplSkinChartWatcherHelper) { + var id = $element[0].getAttribute('id'); + var lineChart = AmCharts.makeChart(id, { + type: 'serial', + theme: 'blur', + marginTop: 0, + marginRight: 15, + dataProvider: [ + { + year: '1990', + value: -0.17 + }, + { + year: '1991', + value: -0.254 + }, + { + year: '1992', + value: 0.019 + }, + { + year: '1993', + value: -0.063 + }, + { + year: '1994', + value: 0.005 + }, + { + year: '1995', + value: 0.077 + }, + { + year: '1996', + value: 0.12 + }, + { + year: '1997', + value: 0.011 + }, + { + year: '1998', + value: 0.177 + }, + { + year: '1999', + value: -0.021 + }, + { + year: '2000', + value: -0.037 + }, + { + year: '2001', + value: 0.03 + }, + { + year: '2002', + value: 0.179 + }, + { + year: '2003', + value: 0.2 + }, + { + year: '2004', + value: 0.180 + }, + { + year: '2005', + value: 0.21 + } + ], + valueAxes: [ + { + axisAlpha: 0, + position: 'left' + } + ], + graphs: [ + { + id: 'g1', + balloonText: '[[value]]', + bullet: 'round', + bulletSize: 8, + lineColor: layoutColors.danger, + lineThickness: 1, + negativeLineColor: layoutColors.primary, + type: 'smoothedLine', + valueField: 'value' + } + ], + chartScrollbar: { + graph: 'g1', + gridAlpha: 0, + color: '#888888', + scrollbarHeight: 55, + backgroundAlpha: 0, + selectedBackgroundAlpha: 0.1, + selectedBackgroundColor: '#888888', + graphFillAlpha: 0, + autoGridCount: true, + selectedGraphFillAlpha: 0, + graphLineAlpha: 0.2, + graphLineColor: '#c2c2c2', + selectedGraphLineColor: '#888888', + selectedGraphLineAlpha: 1 + }, + chartCursor: { + categoryBalloonDateFormat: 'YYYY', + cursorAlpha: 0, + valueLineEnabled: true, + valueLineBalloonEnabled: true, + valueLineAlpha: 0.5, + fullWidth: true + }, + dataDateFormat: 'YYYY', + categoryField: 'year', + categoryAxis: { + minPeriod: 'YYYY', + parseDates: true, + minorGridAlpha: 0.1, + minorGridEnabled: true + }, + export: { + enabled: true + }, + creditsPosition: 'bottom-right', + pathToImages: 'img/' + }); + + tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, lineChart); + + lineChart.addListener('rendered', zoomChart); + if (lineChart.zoomChart) { + lineChart.zoomChart(); + } + + function zoomChart() { + lineChart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55)); + } + } + +})(); diff --git a/src/app/pages/charts/amCharts/lineChart/lineChart.html b/src/app/pages/charts/amCharts/lineChart/lineChart.html new file mode 100644 index 0000000..844d8c1 --- /dev/null +++ b/src/app/pages/charts/amCharts/lineChart/lineChart.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/app/pages/charts/amCharts/pieChart/PieChartCtrl.js b/src/app/pages/charts/amCharts/pieChart/PieChartCtrl.js new file mode 100644 index 0000000..c9a6570 --- /dev/null +++ b/src/app/pages/charts/amCharts/pieChart/PieChartCtrl.js @@ -0,0 +1,146 @@ +/** + * @author v.lugovsky + * created on 16.12.2015 + */ +(function () { + 'use strict'; + + angular.module('BlurAdmin.pages.charts.amCharts') + .controller('PieChartCtrl', PieChartCtrl); + + /** @ngInject */ + function PieChartCtrl($scope, $element, tplSkinChartWatcherHelper) { + var id = $element[0].getAttribute('id'); + var pieChart = AmCharts.makeChart(id, { + type: 'pie', + startDuration: 0, + theme: 'blur', + addClassNames: true, + legend: { + position: 'right', + marginRight: 100, + autoMargins: false + }, + innerRadius: '40%', + defs: { + filter: [ + { + id: 'shadow', + width: '200%', + height: '200%', + feOffset: { + result: 'offOut', + in: 'SourceAlpha', + dx: 0, + dy: 0 + }, + feGaussianBlur: { + result: 'blurOut', + in: 'offOut', + stdDeviation: 5 + }, + feBlend: { + in: 'SourceGraphic', + in2: 'blurOut', + mode: 'normal' + } + } + ] + }, + dataProvider: [ + { + country: 'Lithuania', + litres: 501.9 + }, + { + country: 'Czech Republic', + litres: 301.9 + }, + { + country: 'Ireland', + litres: 201.1 + }, + { + country: 'Germany', + litres: 165.8 + }, + { + country: 'Australia', + litres: 139.9 + }, + { + country: 'Austria', + litres: 128.3 + }, + { + country: 'UK', + litres: 99 + }, + { + country: 'Belgium', + litres: 60 + } + ], + valueField: 'litres', + titleField: 'country', + export: { + enabled: true + }, + creditsPosition: 'bottom-left', + + autoMargins: false, + marginTop: 10, + marginBottom: 0, + marginLeft: 0, + marginRight: 0, + pullOutRadius: 0, + pathToImages: 'img/', + responsive: { + enabled: true, + rules: [ + // at 900px wide, we hide legend + { + maxWidth: 900, + overrides: { + legend: { + enabled: false + } + } + }, + + // at 200 px we hide value axis labels altogether + { + maxWidth: 200, + overrides: { + valueAxes: { + labelsEnabled: false + }, + marginTop: 30, + marginBottom: 30, + marginLeft: 30, + marginRight: 30 + } + } + ] + } + }); + + tplSkinChartWatcherHelper.watchDonutChanges($scope, pieChart); + + pieChart.addListener('init', handleInit); + + pieChart.addListener('rollOverSlice', function (e) { + handleRollOver(e); + }); + + function handleInit() { + pieChart.legend.addListener('rollOverItem', handleRollOver); + } + + function handleRollOver(e) { + var wedge = e.dataItem.wedge.node; + wedge.parentNode.appendChild(wedge); + } + } + +})(); diff --git a/src/app/pages/charts/amCharts/pieChart/pieChart.html b/src/app/pages/charts/amCharts/pieChart/pieChart.html new file mode 100644 index 0000000..68cf138 --- /dev/null +++ b/src/app/pages/charts/amCharts/pieChart/pieChart.html @@ -0,0 +1 @@ +
diff --git a/src/app/pages/charts/amCharts/widgets/areaChart/areaChart.html b/src/app/pages/charts/amCharts/widgets/areaChart/areaChart.html deleted file mode 100644 index c4ee6aa..0000000 --- a/src/app/pages/charts/amCharts/widgets/areaChart/areaChart.html +++ /dev/null @@ -1 +0,0 @@ -
\ No newline at end of file diff --git a/src/app/pages/charts/amCharts/widgets/areaChart/areaChart.js b/src/app/pages/charts/amCharts/widgets/areaChart/areaChart.js deleted file mode 100644 index 7c2b2d8..0000000 --- a/src/app/pages/charts/amCharts/widgets/areaChart/areaChart.js +++ /dev/null @@ -1,135 +0,0 @@ -'use strict'; - -blurAdminApp.controller('areaChartCtrl', ['$scope', '$timeout', '$element', 'tplSkinChartWatcherHelper', function($scope, $timeout, $element, tplSkinChartWatcherHelper) { - var id = $element[0].getAttribute('id'); - var areaChart = AmCharts.makeChart(id, { - type: 'serial', - theme: 'blur', - dataProvider: [ - { - lineColor: colorDanger, - date: '2012-01-01', - duration: 408 - }, - { - date: '2012-01-02', - duration: 482 - }, - { - date: '2012-01-03', - duration: 562 - }, - { - date: '2012-01-04', - duration: 379 - }, - { - lineColor: colorSuccess, - date: '2012-01-05', - duration: 501 - }, - { - date: '2012-01-06', - duration: 443 - }, - { - date: '2012-01-07', - duration: 405 - }, - { - date: '2012-01-08', - duration: 309, - lineColor: colorPrimary - }, - { - date: '2012-01-09', - duration: 287 - }, - { - date: '2012-01-10', - duration: 485 - }, - { - date: '2012-01-11', - duration: 890 - }, - { - date: '2012-01-12', - duration: 810 - } - ], - balloon: { - cornerRadius: 6, - horizontalPadding: 15, - verticalPadding: 10 - }, - valueAxes: [ - { - duration: 'mm', - durationUnits: { - hh: 'h ', - mm: 'min' - }, - axisAlpha: 0 - } - ], - graphs: [ - { - bullet: 'square', - bulletBorderAlpha: 1, - bulletBorderThickness: 1, - fillAlphas: 0.3, - fillColorsField: 'lineColor', - legendValueText: '[[value]]', - lineColorField: 'lineColor', - title: 'duration', - valueField: 'duration' - } - ], - - chartCursor: { - categoryBalloonDateFormat: 'YYYY MMM DD', - cursorAlpha: 0, - fullWidth: true - }, - dataDateFormat: 'YYYY-MM-DD', - categoryField: 'date', - categoryAxis: { - dateFormats: [ - { - period: 'DD', - format: 'DD' - }, - { - period: 'WW', - format: 'MMM DD' - }, - { - period: 'MM', - format: 'MMM' - }, - { - period: 'YYYY', - format: 'YYYY' - } - ], - parseDates: true, - autoGridCount: false, - axisColor: '#555555', - gridAlpha: 0, - gridCount: 50 - }, - export: { - enabled: true - }, - pathToImages: 'img/' - }); - - tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, areaChart); - - areaChart.addListener('dataUpdated', zoomAreaChart); - - function zoomAreaChart() { - areaChart.zoomToDates(new Date(2012, 0, 3), new Date(2012, 0, 11)); - } -}]); \ No newline at end of file diff --git a/src/app/pages/charts/amCharts/widgets/barChart/barChart.html b/src/app/pages/charts/amCharts/widgets/barChart/barChart.html deleted file mode 100644 index 458f369..0000000 --- a/src/app/pages/charts/amCharts/widgets/barChart/barChart.html +++ /dev/null @@ -1 +0,0 @@ -
\ No newline at end of file diff --git a/src/app/pages/charts/amCharts/widgets/barChart/barChart.js b/src/app/pages/charts/amCharts/widgets/barChart/barChart.js deleted file mode 100644 index 5a4306e..0000000 --- a/src/app/pages/charts/amCharts/widgets/barChart/barChart.js +++ /dev/null @@ -1,77 +0,0 @@ -'use strict'; - -blurAdminApp.controller('barChartCtrl', ['$scope', '$timeout', '$element', 'tplSkinChartWatcherHelper', function($scope, $timeout, $element, tplSkinChartWatcherHelper) { - var id = $element[0].getAttribute('id'); - var barChart = AmCharts.makeChart(id, { - type: 'serial', - theme: 'blur', - dataProvider: [ - { - country: 'USA', - visits: 3025, - color: colorPrimary - }, - { - country: 'China', - visits: 1882, - color: colorDanger - - }, - { - country: 'Japan', - visits: 1809, - color: colorPrimaryLight - }, - { - country: 'Germany', - visits: 1322, - color: colorSuccess - }, - { - country: 'UK', - visits: 1122, - color: colorWarning - }, - { - country: 'France', - visits: 1114, - color: colorDefault - } - ], - valueAxes: [ - { - axisAlpha: 0, - position: 'left', - title: 'Visitors from country' - } - ], - startDuration: 1, - graphs: [ - { - balloonText: '[[category]]: [[value]]', - fillColorsField: 'color', - fillAlphas: 0.9, - lineAlpha: 0.2, - type: 'column', - valueField: 'visits' - } - ], - chartCursor: { - categoryBalloonEnabled: false, - cursorAlpha: 0, - zoomable: false - }, - categoryField: 'country', - categoryAxis: { - gridPosition: 'start', - labelRotation: 45 - }, - export: { - enabled: true - }, - creditsPosition: 'top-right', - pathToImages: 'img/' - }); - - tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, barChart); -}]); \ No newline at end of file diff --git a/src/app/pages/charts/amCharts/widgets/funnelChart/funnelChart.html b/src/app/pages/charts/amCharts/widgets/funnelChart/funnelChart.html deleted file mode 100644 index 33cd603..0000000 --- a/src/app/pages/charts/amCharts/widgets/funnelChart/funnelChart.html +++ /dev/null @@ -1 +0,0 @@ -
\ No newline at end of file diff --git a/src/app/pages/charts/amCharts/widgets/funnelChart/funnelChart.js b/src/app/pages/charts/amCharts/widgets/funnelChart/funnelChart.js deleted file mode 100644 index 1a12d99..0000000 --- a/src/app/pages/charts/amCharts/widgets/funnelChart/funnelChart.js +++ /dev/null @@ -1,58 +0,0 @@ -'use strict'; - -blurAdminApp.controller('funnelChartCtrl', ['$scope', '$timeout', '$element', 'tplSkinChartWatcherHelper', function($scope, $timeout, $element, tplSkinChartWatcherHelper) { - var id = $element[0].getAttribute('id'); - var funnelChart = AmCharts.makeChart(id, { - type: 'funnel', - theme: 'blur', - dataProvider: [ - { - title: 'Website visits', - value: 300 - }, - { - title: 'Downloads', - value: 123 - }, - { - title: 'Requested prices', - value: 98 - }, - { - title: 'Contaced', - value: 72 - }, - { - title: 'Purchased', - value: 35 - }, - { - title: 'Asked for support', - value: 25 - }, - { - title: 'Purchased more', - value: 18 - } - ], - titleField: 'title', - marginRight: 160, - marginLeft: 15, - labelPosition: 'right', - funnelAlpha: 0.9, - valueField: 'value', - startX: 0, - neckWidth: '0%', - startAlpha: 0, - outlineThickness: 1, - neckHeight: '0%', - balloonText: '[[title]]:[[value]]', - export: { - enabled: true - }, - creditsPosition: 'bottom-left', - pathToImages: 'img/' - }); - - tplSkinChartWatcherHelper.watchFunnelChanges($scope, funnelChart); -}]); \ No newline at end of file diff --git a/src/app/pages/charts/amCharts/widgets/lineChart/lineChart.html b/src/app/pages/charts/amCharts/widgets/lineChart/lineChart.html deleted file mode 100644 index 4f0cad8..0000000 --- a/src/app/pages/charts/amCharts/widgets/lineChart/lineChart.html +++ /dev/null @@ -1 +0,0 @@ -
\ No newline at end of file diff --git a/src/app/pages/charts/amCharts/widgets/lineChart/lineChart.js b/src/app/pages/charts/amCharts/widgets/lineChart/lineChart.js deleted file mode 100644 index 817f3c3..0000000 --- a/src/app/pages/charts/amCharts/widgets/lineChart/lineChart.js +++ /dev/null @@ -1,144 +0,0 @@ -'use strict'; - -blurAdminApp.controller('lineChartCtrl', ['$scope', '$timeout', '$element', 'tplSkinChartWatcherHelper', function($scope, $timeout, $element, tplSkinChartWatcherHelper) { - var id = $element[0].getAttribute('id'); - var lineChart = AmCharts.makeChart(id, { - type: 'serial', - theme: 'blur', - marginTop: 0, - marginRight: 15, - dataProvider: [ - { - year: '1990', - value: -0.17 - }, - { - year: '1991', - value: -0.254 - }, - { - year: '1992', - value: 0.019 - }, - { - year: '1993', - value: -0.063 - }, - { - year: '1994', - value: 0.005 - }, - { - year: '1995', - value: 0.077 - }, - { - year: '1996', - value: 0.12 - }, - { - year: '1997', - value: 0.011 - }, - { - year: '1998', - value: 0.177 - }, - { - year: '1999', - value: -0.021 - }, - { - year: '2000', - value: -0.037 - }, - { - year: '2001', - value: 0.03 - }, - { - year: '2002', - value: 0.179 - }, - { - year: '2003', - value: 0.2 - }, - { - year: '2004', - value: 0.180 - }, - { - year: '2005', - value: 0.21 - } - ], - valueAxes: [ - { - axisAlpha: 0, - position: 'left' - } - ], - graphs: [ - { - id: 'g1', - balloonText: '[[value]]', - bullet: 'round', - bulletSize: 8, - lineColor: colorDanger, - lineThickness: 1, - negativeLineColor: colorPrimary, - type: 'smoothedLine', - valueField: 'value' - } - ], - chartScrollbar: { - graph: 'g1', - gridAlpha: 0, - color: '#888888', - scrollbarHeight: 55, - backgroundAlpha: 0, - selectedBackgroundAlpha: 0.1, - selectedBackgroundColor: '#888888', - graphFillAlpha: 0, - autoGridCount: true, - selectedGraphFillAlpha: 0, - graphLineAlpha: 0.2, - graphLineColor: '#c2c2c2', - selectedGraphLineColor: '#888888', - selectedGraphLineAlpha: 1 - }, - chartCursor: { - categoryBalloonDateFormat: 'YYYY', - cursorAlpha: 0, - valueLineEnabled: true, - valueLineBalloonEnabled: true, - valueLineAlpha: 0.5, - fullWidth: true - }, - dataDateFormat: 'YYYY', - categoryField: 'year', - categoryAxis: { - minPeriod: 'YYYY', - parseDates: true, - minorGridAlpha: 0.1, - minorGridEnabled: true - }, - export: { - enabled: true - }, - creditsPosition: 'bottom-right', - pathToImages: 'img/' - }); - - tplSkinChartWatcherHelper.watchAxisChartStyleChanges($scope, lineChart); - - lineChart.addListener('rendered', zoomChart); - if (lineChart.zoomChart) { - lineChart.zoomChart(); - } - - function zoomChart() { - lineChart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55)); - } -}]); \ No newline at end of file diff --git a/src/app/pages/charts/amCharts/widgets/pieChart/pieChart.html b/src/app/pages/charts/amCharts/widgets/pieChart/pieChart.html deleted file mode 100644 index b418d4e..0000000 --- a/src/app/pages/charts/amCharts/widgets/pieChart/pieChart.html +++ /dev/null @@ -1 +0,0 @@ -
diff --git a/src/app/pages/charts/amCharts/widgets/pieChart/pieChart.js b/src/app/pages/charts/amCharts/widgets/pieChart/pieChart.js deleted file mode 100644 index 0aa0f3d..0000000 --- a/src/app/pages/charts/amCharts/widgets/pieChart/pieChart.js +++ /dev/null @@ -1,135 +0,0 @@ -'use strict'; - -blurAdminApp.controller('pieChartCtrl', ['$scope', '$timeout', '$element', 'tplSkinChartWatcherHelper', function($scope, $timeout, $element, tplSkinChartWatcherHelper) { - var id = $element[0].getAttribute('id'); - var pieChart = AmCharts.makeChart(id, { - type: 'pie', - startDuration: 0, - theme: 'blur', - addClassNames: true, - legend: { - position: 'right', - marginRight: 100, - autoMargins: false - }, - innerRadius: '40%', - defs: { - filter: [ - { - id: 'shadow', - width: '200%', - height: '200%', - feOffset: { - result: 'offOut', - in: 'SourceAlpha', - dx: 0, - dy: 0 - }, - feGaussianBlur: { - result: 'blurOut', - in: 'offOut', - stdDeviation: 5 - }, - feBlend: { - in: 'SourceGraphic', - in2: 'blurOut', - mode: 'normal' - } - } - ] - }, - dataProvider: [ - { - country: 'Lithuania', - litres: 501.9 - }, - { - country: 'Czech Republic', - litres: 301.9 - }, - { - country: 'Ireland', - litres: 201.1 - }, - { - country: 'Germany', - litres: 165.8 - }, - { - country: 'Australia', - litres: 139.9 - }, - { - country: 'Austria', - litres: 128.3 - }, - { - country: 'UK', - litres: 99 - }, - { - country: 'Belgium', - litres: 60 - } - ], - valueField: 'litres', - titleField: 'country', - export: { - enabled: true - }, - creditsPosition: 'bottom-left', - - autoMargins: false, - marginTop: 10, - marginBottom: 0, - marginLeft: 0, - marginRight: 0, - pullOutRadius: 0, - pathToImages: 'img/', - responsive: { - enabled: true, - rules: [ - // at 900px wide, we hide legend - { - maxWidth: 900, - overrides: { - legend: { - enabled: false - } - } - }, - - // at 200 px we hide value axis labels altogether - { - maxWidth: 200, - overrides: { - valueAxes: { - labelsEnabled: false - }, - marginTop: 30, - marginBottom: 30, - marginLeft: 30, - marginRight: 30 - } - } - ] - } - }); - - tplSkinChartWatcherHelper.watchDonutChanges($scope, pieChart); - - pieChart.addListener('init', handleInit); - - pieChart.addListener('rollOverSlice', function (e) { - handleRollOver(e); - }); - - function handleInit() { - pieChart.legend.addListener('rollOverItem', handleRollOver); - } - - function handleRollOver(e) { - var wedge = e.dataItem.wedge.node; - wedge.parentNode.appendChild(wedge); - } -}]); \ No newline at end of file diff --git a/src/app/pages/charts/chartJs/chartJs.module.js b/src/app/pages/charts/chartJs/chartJs.module.js new file mode 100644 index 0000000..e594703 --- /dev/null +++ b/src/app/pages/charts/chartJs/chartJs.module.js @@ -0,0 +1,20 @@ +/** + * @author a.demeshko + * created on 12/16/15 + */ +(function () { + 'use strict'; + + angular.module('BlurAdmin.pages.charts.chartJs', []) + .config(routeConfig); + + /** @ngInject */ + function routeConfig($stateProvider) { + $stateProvider + .state('charts.chartJs', { + url: '/chartJs', + templateUrl: 'app/pages/charts/chartJs/chartJs.html' + }); + } + +})(); \ No newline at end of file diff --git a/src/app/pages/charts/chartJs/chartJs1DCtrl.js b/src/app/pages/charts/chartJs/chartJs1DCtrl.js index 62d3ae5..a70efd4 100644 --- a/src/app/pages/charts/chartJs/chartJs1DCtrl.js +++ b/src/app/pages/charts/chartJs/chartJs1DCtrl.js @@ -5,7 +5,7 @@ (function () { 'use strict'; - angular.module('BlurAdmin.chartJsPage') + angular.module('BlurAdmin.pages.charts.chartJs') .controller('chartJs1DCtrl', chartJs1DCtrl); /** @ngInject */ diff --git a/src/app/pages/charts/chartJs/chartJs2DCtrl.js b/src/app/pages/charts/chartJs/chartJs2DCtrl.js index d4bc884..e727926 100644 --- a/src/app/pages/charts/chartJs/chartJs2DCtrl.js +++ b/src/app/pages/charts/chartJs/chartJs2DCtrl.js @@ -5,7 +5,7 @@ (function () { 'use strict'; - angular.module('BlurAdmin.chartJsPage') + angular.module('BlurAdmin.pages.charts.chartJs') .controller('chartJs2DCtrl', chartJs2DCtrl); /** @ngInject */ diff --git a/src/app/pages/charts/chartJs/chartJsPage.module.js b/src/app/pages/charts/chartJs/chartJsPage.module.js deleted file mode 100644 index fa7c3da..0000000 --- a/src/app/pages/charts/chartJs/chartJsPage.module.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @author a.demeshko - * created on 12/16/15 - */ -(function () { - 'use strict'; - - angular.module('BlurAdmin.chartJsPage', ['ngRoute']).config(chartJsPageConfig); - - /** @ngInject */ - function chartJsPageConfig($routeProvider) { - $routeProvider.when('/chartJs', { - templateUrl: 'app/pages/charts/chartJs/chartJs.html' - }); - } - -})(); \ No newline at end of file diff --git a/src/app/pages/charts/charts.module.js b/src/app/pages/charts/charts.module.js new file mode 100644 index 0000000..7abc82b --- /dev/null +++ b/src/app/pages/charts/charts.module.js @@ -0,0 +1,24 @@ +/** + * @author v.lugovsky + * created on 16.12.2015 + */ +(function () { + 'use strict'; + + angular.module('BlurAdmin.pages.charts', [ + 'BlurAdmin.pages.charts.amCharts', + 'BlurAdmin.pages.charts.chartJs' + ]) + .config(routeConfig); + + /** @ngInject */ + function routeConfig($stateProvider) { + $stateProvider + .state('charts', { + url: '/charts', + abstract: true, + template: '
' + }); + } + +})(); diff --git a/src/app/pages/pages.module.js b/src/app/pages/pages.module.js index 86281d4..cf6d840 100644 --- a/src/app/pages/pages.module.js +++ b/src/app/pages/pages.module.js @@ -10,6 +10,7 @@ 'BlurAdmin.pages.alerts', 'BlurAdmin.pages.buttons', + 'BlurAdmin.pages.charts', 'BlurAdmin.pages.dashboard', 'BlurAdmin.pages.form', 'BlurAdmin.pages.grid', diff --git a/src/app/theme/components/backTop/lib/jquery.backTop.min.js b/src/app/theme/components/backTop/lib/jquery.backTop.min.js index 8b8ba23..01e5136 100644 --- a/src/app/theme/components/backTop/lib/jquery.backTop.min.js +++ b/src/app/theme/components/backTop/lib/jquery.backTop.min.js @@ -1,2 +1,2 @@ /* Minified js for jQuery BackTop */ -!function(o){o.fn.backTop=function(e){var n=this,i=o.extend({position:400,speed:500,color:"white"},e),t=i.position,c=i.speed,d=i.color;n.addClass("white"==d?"white":"red"==d?"red":"green"==d?"green":"black"),n.css({right:40,bottom:40,position:"fixed"}),o(document).scroll(function(){var e=o(window).scrollTop();console.log(e),e>=t?n.fadeIn(c):n.fadeOut(c)}),n.click(function(){o("html, body").animate({scrollTop:0},{duration:1200})})}}(jQuery); \ No newline at end of file +!function(o){o.fn.backTop=function(e){var n=this,i=o.extend({position:400,speed:500,color:"white"},e),t=i.position,c=i.speed,d=i.color;n.addClass("white"==d?"white":"red"==d?"red":"green"==d?"green":"black"),n.css({right:40,bottom:40,position:"fixed"}),o(document).scroll(function(){var e=o(window).scrollTop();e>=t?n.fadeIn(c):n.fadeOut(c)}),n.click(function(){o("html, body").animate({scrollTop:0},{duration:1200})})}}(jQuery); \ No newline at end of file diff --git a/src/app/theme/components/sidebar/SidebarCtrl.js b/src/app/theme/components/sidebar/SidebarCtrl.js index ea58876..c8245c3 100644 --- a/src/app/theme/components/sidebar/SidebarCtrl.js +++ b/src/app/theme/components/sidebar/SidebarCtrl.js @@ -22,11 +22,11 @@ subMenu: [ { title: 'amCharts', - root: '#/amCharts' + root: '#/charts/amCharts' }, { title: 'Chart.js', - root: '#/chartJs' + root: '#/charts/chartJs' } ] },