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

redisign charts

pull/3/head
alex 2015-12-22 20:50:12 +03:00
parent e6e4a32f95
commit 1d59d3be9e
9 changed files with 630 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
bower.json
View File

@ -57,7 +57,8 @@
"./dist/amcharts/plugins/responsive/responsive.min.js",
"./dist/amcharts/serial.js",
"./dist/amcharts/funnel.js",
"./dist/amcharts/pie.js"
"./dist/amcharts/pie.js",
"./dist/amcharts/gantt.js"
]
},
"amcharts-stock": {

25
src/app/pages/charts/amCharts/charts.html
View File

@ -1,18 +1,30 @@
<div class="widgets">
<div class="row">
<div class="col-md-6">
<div class="col-md-4">
<blur-panel title="Bar Chart" class-container="with-scroll">
<div ng-include="'app/pages/charts/amCharts/barChart/barChart.html'"></div>
</blur-panel>
</div>
<div class="col-md-4">
<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">
<div class="col-md-4">
<blur-panel title="Area Chart" class-container="with-scroll" >
<div ng-include="'app/pages/charts/amCharts/areaChart/areaChart.html'"></div>
</blur-panel>
</div>
</div>
<div class="row">
<div class="col-md-6">
<blur-panel title="Pie Chart" class-container="with-scroll">
<div ng-include="'app/pages/charts/amCharts/pieChart/pieChart.html'"></div>
</blur-panel>
</div>
<div class="col-md-6">
<blur-panel title="Funnel Chart" class-container="with-scroll">
<div ng-include="'app/pages/charts/amCharts/funnelChart/funnelChart.html'"></div>
</blur-panel>
@ -21,10 +33,15 @@
<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 title="Combined bullet/column and line graphs with multiple value axes" class-container="with-scroll">
<div ng-include="'app/pages/charts/amCharts/combinedChart/combinedChart.html'"></div>
</blur-panel>
</div>
<!--<div class="col-md-6">-->
<!--<blur-panel title="Gantt chart" class-container="with-scroll">-->
<!--<div ng-include="'app/pages/charts/amCharts/ganttChart/ganttChart.html'"></div>-->
<!--</blur-panel>-->
<!--</div>-->
</div>
</div>

1
src/app/pages/charts/amCharts/combinedChart/combinedChart.html Normal file
View File

@ -0,0 +1 @@
<div id="zoomAxisChart" class="admin-chart" ng-controller="combinedChartCtrl"></div>

226
src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js Normal file
View File

@ -0,0 +1,226 @@
/**
* @author a.demeshko
* created on 22.12.2015
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.charts.amCharts')
.controller('combinedChartCtrl', combinedChartCtrl);
/** @ngInject */
function combinedChartCtrl($element, layoutColors) {
var id = $element[0].getAttribute('id');
var chart = AmCharts.makeChart(id, {
"type": "serial",
"theme": "none",
"dataDateFormat": "YYYY-MM-DD",
"precision": 2,
"valueAxes": [{
"id": "v1",
"title": "Sales",
"position": "left",
"autoGridCount": false,
"labelFunction": function(value) {
return "$" + Math.round(value) + "M";
}
}, {
"id": "v2",
"title": "Market Days",
"gridAlpha": 0,
"position": "right",
"autoGridCount": false
}],
"graphs": [{
"id": "g3",
"valueAxis": "v1",
"lineColor": layoutColors.primaryBg,
"fillColors": layoutColors.primaryBg,
"fillAlphas": 1,
"type": "column",
"title": "Actual Sales",
"valueField": "sales2",
"clustered": false,
"columnWidth": 0.5,
"legendValueText": "$[[value]]M",
"balloonText": "[[title]]<br/><b style='font-size: 130%'>$[[value]]M</b>"
}, {
"id": "g4",
"valueAxis": "v1",
"lineColor": layoutColors.primaryLight,
"fillColors": layoutColors.primaryLight,
"fillAlphas": 1,
"type": "column",
"title": "Target Sales",
"valueField": "sales1",
"clustered": false,
"columnWidth": 0.3,
"legendValueText": "$[[value]]M",
"balloonText": "[[title]]<br/><b style='font-size: 130%'>$[[value]]M</b>"
}, {
"id": "g1",
"valueAxis": "v2",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"lineColor": layoutColors.success,
"type": "smoothedLine",
"title": "Market Days",
"useLineColorForBulletBorder": true,
"valueField": "market1",
"balloonText": "[[title]]<br/><b style='font-size: 130%'>[[value]]</b>"
}, {
"id": "g2",
"valueAxis": "v2",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"lineColor": layoutColors.primary,
"type": "smoothedLine",
"dashLength": 5,
"title": "Market Days ALL",
"useLineColorForBulletBorder": true,
"valueField": "market2",
"balloonText": "[[title]]<br/><b style='font-size: 130%'>[[value]]</b>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis": false,
"offset": 30,
"scrollbarHeight": 50,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"chartCursor": {
"pan": true,
"cursorColor" : layoutColors.danger,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 0,
"valueLineAlpha": 0.2
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"legend": {
"useGraphSettings": true,
"position": "top"
},
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"export": {
"enabled": true
},
"dataProvider": [{
"date": "2013-01-16",
"market1": 71,
"market2": 75,
"sales1": 5,
"sales2": 8
}, {
"date": "2013-01-17",
"market1": 74,
"market2": 78,
"sales1": 4,
"sales2": 6
}, {
"date": "2013-01-18",
"market1": 78,
"market2": 88,
"sales1": 5,
"sales2": 2
}, {
"date": "2013-01-19",
"market1": 85,
"market2": 89,
"sales1": 8,
"sales2": 9
}, {
"date": "2013-01-20",
"market1": 82,
"market2": 89,
"sales1": 9,
"sales2": 6
}, {
"date": "2013-01-21",
"market1": 83,
"market2": 85,
"sales1": 3,
"sales2": 5
}, {
"date": "2013-01-22",
"market1": 88,
"market2": 92,
"sales1": 5,
"sales2": 7
}, {
"date": "2013-01-23",
"market1": 85,
"market2": 90,
"sales1": 7,
"sales2": 6
}, {
"date": "2013-01-24",
"market1": 85,
"market2": 91,
"sales1": 9,
"sales2": 5
}, {
"date": "2013-01-25",
"market1": 80,
"market2": 84,
"sales1": 5,
"sales2": 8
}, {
"date": "2013-01-26",
"market1": 87,
"market2": 92,
"sales1": 4,
"sales2": 8
}, {
"date": "2013-01-27",
"market1": 84,
"market2": 87,
"sales1": 3,
"sales2": 4
}, {
"date": "2013-01-28",
"market1": 83,
"market2": 88,
"sales1": 5,
"sales2": 7
}, {
"date": "2013-01-29",
"market1": 84,
"market2": 87,
"sales1": 5,
"sales2": 8
}, {
"date": "2013-01-30",
"market1": 81,
"market2": 85,
"sales1": 4,
"sales2": 7
}]
});
}
})();

1
src/app/pages/charts/amCharts/ganttChart/ganttChart.html Normal file
View File

@ -0,0 +1 @@
<div id="gnattChart" class="admin-chart" ng-controller="ganttChartCtrl"></div>

297
src/app/pages/charts/amCharts/ganttChart/ganttChartCtrl.js Normal file
View File

@ -0,0 +1,297 @@
/**
* @author a.demeshko
* created on 22.12.2015
*/
(function () {
'use strict';
angular.module('BlurAdmin.pages.charts.amCharts')
.controller('ganttChartCtrl', ganttChartCtrl);
/** @ngInject */
function ganttChartCtrl(layoutColors, $element) {
var id = $element[0].getAttribute('id');
var chart = AmCharts.makeChart( id, {
"type": "gantt",
"theme": "light",
"marginRight": 70,
"period": "hh",
"dataDateFormat":"YYYY-MM-DD",
"balloonDateFormat": "JJ:NN",
"columnWidth": 0.5,
"valueAxis": {
"type": "date",
"minimum": 7,
"maximum": 31
},
"brightnessStep": 10,
"graph": {
"fillAlphas": 1,
"balloonText": "<b>[[task]]</b>: [[open]] [[value]]"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDate": "2015-01-01",
"startField": "start",
"endField": "end",
"durationField": "duration",
"dataProvider": [
{
"category": "John",
"segments": [ {
"start": 7,
"duration": 2,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 2,
"color": "#8dc49f",
"task": "Task #3"
} ]
}, {
"category": "Smith",
"segments": [ {
"start": 10,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 1,
"color": "#8dc49f",
"task": "Task #3"
}, {
"duration": 4,
"color": "#46615e",
"task": "Task #1"
} ]
}, {
"category": "Ben",
"segments": [ {
"start": 12,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"start": 16,
"duration": 2,
"color": "#FFE4C4",
"task": "Task #4"
} ]
}, {
"category": "Mike",
"segments": [ {
"start": 9,
"duration": 6,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 4,
"color": "#727d6f",
"task": "Task #2"
} ]
}, {
"category": "Lenny",
"segments": [ {
"start": 8,
"duration": 1,
"color": "#8dc49f",
"task": "Task #3"
}, {
"duration": 4,
"color": "#46615e",
"task": "Task #1"
} ]
}, {
"category": "Scott",
"segments": [ {
"start": 15,
"duration": 3,
"color": "#727d6f",
"task": "Task #2"
} ]
}, {
"category": "Julia",
"segments": [ {
"start": 9,
"duration": 2,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 1,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 8,
"color": "#8dc49f",
"task": "Task #3"
} ]
}, {
"category": "Bob",
"segments": [ {
"start": 9,
"duration": 8,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 7,
"color": "#8dc49f",
"task": "Task #3"
} ]
}, {
"category": "Kendra",
"segments": [ {
"start": 11,
"duration": 8,
"color": "#727d6f",
"task": "Task #2"
}, {
"start": 16,
"duration": 2,
"color": "#FFE4C4",
"task": "Task #4"
} ]
}, {
"category": "Tom",
"segments": [ {
"start": 9,
"duration": 4,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 3,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 5,
"color": "#8dc49f",
"task": "Task #3"
} ]
}, {
"category": "Kyle",
"segments": [ {
"start": 6,
"duration": 3,
"color": "#727d6f",
"task": "Task #2"
} ]
}, {
"category": "Anita",
"segments": [ {
"start": 12,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"start": 16,
"duration": 2,
"color": "#FFE4C4",
"task": "Task #4"
} ]
}, {
"category": "Jack",
"segments": [ {
"start": 8,
"duration": 10,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
} ]
}, {
"category": "Kim",
"segments": [ {
"start": 12,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 3,
"color": "#8dc49f",
"task": "Task #3"
} ]
}, {
"category": "Aaron",
"segments": [ {
"start": 18,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 2,
"color": "#FFE4C4",
"task": "Task #4"
} ]
}, {
"category": "Alan",
"segments": [ {
"start": 17,
"duration": 2,
"color": "#46615e",
"task": "Task #1"
}, {
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 2,
"color": "#8dc49f",
"task": "Task #3"
} ]
}, {
"category": "Ruth",
"segments": [ {
"start": 13,
"duration": 2,
"color": "#727d6f",
"task": "Task #2"
}, {
"duration": 1,
"color": "#8dc49f",
"task": "Task #3"
}, {
"duration": 4,
"color": "#46615e",
"task": "Task #1"
} ]
}, {
"category": "Simon",
"segments": [ {
"start": 10,
"duration": 3,
"color": "#727d6f",
"task": "Task #2"
}, {
"start": 17,
"duration": 4,
"color": "#FFE4C4",
"task": "Task #4"
} ]
} ],
"valueScrollbar": {
"autoGridCount":true
},
"chartCursor": {
"cursorColor":"#55bb76",
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineAlpha":0.5,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"zoomable":false,
"valueZoomable":true
},
"export": {
"enabled": true
}
});
}
})();

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

@ -1,53 +1,25 @@
<div class="row ">
<div class="col-md-6 " ng-controller="chartJs2DCtrl">
<blur-panel title="Line" class-container="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>
</blur-panel>
</div>
<div class="col-md-6 " ng-controller="chartJs2DCtrl">
<blur-panel title="Bars" class-container="with-scroll ">
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels" chart-series="series" chart-click="changeData">
</canvas>
</blur-panel>
</div>
</div>
<div class="row ">
<div class="col-md-6 " ng-controller="chartJs1DCtrl">
<div class="row">
<div class="col-md-4" ng-controller="chartJs1DCtrl">
<blur-panel title="Pie" class-container="with-scroll ">
<canvas id="pie" class="chart chart-pie"
chart-legend="true" chart-data="data" chart-labels="labels" chart-click="changeData">
</canvas>
</blur-panel>
</div>
<div class="col-md-6 " ng-controller="chartJs1DCtrl">
<div class="col-md-4" ng-controller="chartJs1DCtrl">
<blur-panel title="Doughnut" class-container="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>
</blur-panel>
</div>
</div>
<div class="row ">
<div class="col-md-6 " ng-controller="chartJs1DCtrl">
<div class="col-md-4" ng-controller="chartJs1DCtrl">
<blur-panel title="Polar" class-container="with-scroll ">
<canvas id="polar-area" class="chart chart-polar-area"
chart-data="data" chart-labels="labels" chart-legend="true" chart-click="changeData">
</canvas>
</blur-panel>
</div>
<div class="col-md-6 " ng-controller="chartJs2DCtrl">
<blur-panel title="Radar" class-container="with-scroll ">
<canvas id="radar" class="chart chart-radar"
chart-legend="true" chart-series="series" chart-data="data" chart-labels="labels"
chart-click="changeData">
</canvas>
</blur-panel>
</div>
</div>
<div class="row ">
@ -64,3 +36,31 @@
</blur-panel>
</div>
</div>
<div class="row ">
<div class="col-md-4 " ng-controller="chartJs2DCtrl">
<blur-panel title="Radar" class-container="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>
</blur-panel>
</div>
<div class="col-md-4 " ng-controller="chartJs2DCtrl">
<blur-panel title="Line" class-container="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>
</blur-panel>
</div>
<div class="col-md-4 " ng-controller="chartJs2DCtrl">
<blur-panel title="Bars" class-container="with-scroll ">
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels" chart-series="series" chart-click="changeData">
</canvas>
</blur-panel>
</div>
</div>

56
src/app/pages/charts/morris/morris.html
View File

@ -1,28 +1,30 @@
<section ng-controller="morrisCtrl">
<div class="row">
<div class="col-md-6">
<blur-panel title="Line Charts" class-container="with-scroll">
<h5>Simple Line Chart</h5>
<div
line-chart
line-data='lineData'
line-xkey='y'
line-ykeys='["a", "b"]'
line-labels='["Serie A", "Serie B"]'
line-colors='colors'>
</div>
<h5 class="area-morris-header">Area Chart</h5>
<div
area-chart
area-data='areaData'
area-xkey='y'
area-ykeys='["a", "b"]'%
area-labels='["Serie A", "Serie B"]'
<div class="col-md-12">
<blur-panel title="Line Chart" class-container="with-scroll">
<div
line-chart
line-data='lineData'
line-xkey='y'
line-ykeys='["a", "b"]'
line-labels='["Serie A", "Serie B"]'
line-colors='colors'>
</div>
</blur-panel>
</div>
<div class="col-md-6 col-sm-12">
</div>
<div class="row">
<div class="col-md-4">
<blur-panel title="Donut" class-container="with-scroll">
<div
donut-chart
donut-data='donutData'
donut-colors='colors'
donut-formatter='"currency"'>
</div>
</blur-panel>
</div>
<div class="col-md-8">
<blur-panel title="Bar Chart" class-container="with-scroll ">
<div
bar-chart
@ -35,14 +37,16 @@
</blur-panel>
</div>
</div>
<div class="row morris-up">
<div class="col-md-6 col-md-offset-6 col-sd-offset-0 col-sm-12">
<blur-panel title="Donut Chart" class-container="with-scroll ">
<div class="row">
<div class="col-md-12">
<blur-panel title="Area Chart" class-container="with-scroll">
<div
donut-chart
donut-data='donutData'
donut-colors='colors'
donut-formatter='"currency"'>
area-chart
area-data='areaData'
area-xkey='y'
area-ykeys='["a", "b"]' %
area-labels='["Serie A", "Serie B"]'
line-colors='colors'>
</div>
</blur-panel>
</div>

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

@ -10,12 +10,10 @@
}
#funnelChart, #lineChart {
height: 360px;
}
#pieChart {
max-width: 1120px;
height: 400px;
}
.amcharts-pie-slice {
@ -124,4 +122,24 @@
.chart-panel{
height: 495px;
}
#filterChart {
width : 96%;
font-size : 11px;
margin-left: auto;
margin-right: auto;
margin-top:15px;
}
.amcharts-graph-g1 .amcharts-graph-fill {
filter: url(#blur);
}
.amcharts-graph-g2 .amcharts-graph-fill {
filter: url(#blur);
}
.amcharts-cursor-fill {
filter: url(#shadow);
}