mirror of https://github.com/akveo/blur-admin
refactor(routing): migrate chart routes to new structure
Vladimir Lugovsky
parent
d21668ce98
commit
8b6c187f32
|
|
@ -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'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<div id="areaChart" class="admin-chart" ng-controller="AreaChartCtrl"></div>
|
||||||
|
|
@ -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: '<b>[[category]]: [[value]]</b>',
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<div id="barChart" class="admin-chart" ng-controller="BarChartCtrl"></div>
|
||||||
|
|
@ -1 +1,30 @@
|
||||||
<widgets ng-model="widgetBlocks"></widgets>
|
<div class="widgets">
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<blur-panel title="Bar Chart" class-container="with-scroll">
|
||||||
|
<div ng-include="'app/pages/charts/amCharts/barChart/barChart.html'"></div>
|
||||||
|
</blur-panel>
|
||||||
|
<blur-panel title="Line Chart" class-container="with-scroll">
|
||||||
|
<div ng-include="'app/pages/charts/amCharts/lineChart/lineChart.html'"></div>
|
||||||
|
</blur-panel>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<blur-panel title="Area Chart" class-container="with-scroll" >
|
||||||
|
<div ng-include="'app/pages/charts/amCharts/areaChart/areaChart.html'"></div>
|
||||||
|
</blur-panel>
|
||||||
|
<blur-panel title="Funnel Chart" class-container="with-scroll">
|
||||||
|
<div ng-include="'app/pages/charts/amCharts/funnelChart/funnelChart.html'"></div>
|
||||||
|
</blur-panel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<blur-panel title="Pie Chart" class-container="with-scroll">
|
||||||
|
<div ng-include="'app/pages/charts/amCharts/pieChart/pieChart.html'"></div>
|
||||||
|
</blur-panel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
@ -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'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
}]);
|
|
||||||
|
|
@ -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]]:<b>[[value]]</b>',
|
||||||
|
export: {
|
||||||
|
enabled: true
|
||||||
|
},
|
||||||
|
creditsPosition: 'bottom-left',
|
||||||
|
pathToImages: 'img/'
|
||||||
|
});
|
||||||
|
|
||||||
|
tplSkinChartWatcherHelper.watchFunnelChanges($scope, funnelChart);
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<div id="funnelChart" class="admin-chart" ng-controller="FunnelChartCtrl"></div>
|
||||||
|
|
@ -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));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<div id="lineChart" class="admin-chart" ng-controller="LineChartCtrl"></div>
|
||||||
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<div id="pieChart" class="admin-chart" ng-controller="PieChartCtrl"></div>
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<div id="areaChart" class="admin-chart" ng-controller="areaChartCtrl"></div>
|
|
||||||
|
|
@ -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));
|
|
||||||
}
|
|
||||||
}]);
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<div id="barChart" class="admin-chart" ng-controller="barChartCtrl"></div>
|
|
||||||
|
|
@ -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: '<b>[[category]]: [[value]]</b>',
|
|
||||||
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);
|
|
||||||
}]);
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<div id="funnelChart" class="admin-chart" ng-controller="funnelChartCtrl"></div>
|
|
||||||
|
|
@ -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]]:<b>[[value]]</b>',
|
|
||||||
export: {
|
|
||||||
enabled: true
|
|
||||||
},
|
|
||||||
creditsPosition: 'bottom-left',
|
|
||||||
pathToImages: 'img/'
|
|
||||||
});
|
|
||||||
|
|
||||||
tplSkinChartWatcherHelper.watchFunnelChanges($scope, funnelChart);
|
|
||||||
}]);
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<div id="lineChart" class="admin-chart" ng-controller="lineChartCtrl"></div>
|
|
||||||
|
|
@ -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));
|
|
||||||
}
|
|
||||||
}]);
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<div id="pieChart" class="admin-chart" ng-controller="pieChartCtrl"></div>
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}]);
|
|
||||||
|
|
@ -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'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
angular.module('BlurAdmin.chartJsPage')
|
angular.module('BlurAdmin.pages.charts.chartJs')
|
||||||
.controller('chartJs1DCtrl', chartJs1DCtrl);
|
.controller('chartJs1DCtrl', chartJs1DCtrl);
|
||||||
|
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
(function () {
|
(function () {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
angular.module('BlurAdmin.chartJsPage')
|
angular.module('BlurAdmin.pages.charts.chartJs')
|
||||||
.controller('chartJs2DCtrl', chartJs2DCtrl);
|
.controller('chartJs2DCtrl', chartJs2DCtrl);
|
||||||
|
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
|
|
|
||||||
|
|
@ -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'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
})();
|
|
||||||
|
|
@ -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: '<div ui-view></div>'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
})();
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
|
|
||||||
'BlurAdmin.pages.alerts',
|
'BlurAdmin.pages.alerts',
|
||||||
'BlurAdmin.pages.buttons',
|
'BlurAdmin.pages.buttons',
|
||||||
|
'BlurAdmin.pages.charts',
|
||||||
'BlurAdmin.pages.dashboard',
|
'BlurAdmin.pages.dashboard',
|
||||||
'BlurAdmin.pages.form',
|
'BlurAdmin.pages.form',
|
||||||
'BlurAdmin.pages.grid',
|
'BlurAdmin.pages.grid',
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,2 @@
|
||||||
/* Minified js for jQuery BackTop */
|
/* 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);
|
!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);
|
||||||
|
|
@ -22,11 +22,11 @@
|
||||||
subMenu: [
|
subMenu: [
|
||||||
{
|
{
|
||||||
title: 'amCharts',
|
title: 'amCharts',
|
||||||
root: '#/amCharts'
|
root: '#/charts/amCharts'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Chart.js',
|
title: 'Chart.js',
|
||||||
root: '#/chartJs'
|
root: '#/charts/chartJs'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue