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

refactor(charts): apply new chrts colors

pull/3/head
alex 2016-02-12 14:19:55 +03:00
parent cf01569215
commit 1ea75664fb
14 changed files with 54 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/pages/charts/amCharts/areaChart/AreaChartCtrl.js
View File

@ -16,7 +16,7 @@
theme: 'blur', theme: 'blur',
dataProvider: [ dataProvider: [
{ {
lineColor: layoutColors.danger, lineColor: layoutColors.dangerCharts,
date: '2012-01-01', date: '2012-01-01',
duration: 408 duration: 408
}, },
@ -33,7 +33,7 @@
duration: 379 duration: 379
}, },
{ {
lineColor: layoutColors.success, lineColor: layoutColors.successCharts,
date: '2012-01-05', date: '2012-01-05',
duration: 501 duration: 501
}, },
@ -48,7 +48,7 @@
{ {
date: '2012-01-08', date: '2012-01-08',
duration: 309, duration: 309,
lineColor: layoutColors.primary lineColor: layoutColors.primaryCharts
}, },
{ {
date: '2012-01-09', date: '2012-01-09',

10
src/app/pages/charts/amCharts/barChart/BarChartCtrl.js
View File

@ -18,28 +18,28 @@
{ {
country: 'USA', country: 'USA',
visits: 3025, visits: 3025,
color: layoutColors.primary color: layoutColors.primaryCharts
}, },
{ {
country: 'China', country: 'China',
visits: 1882, visits: 1882,
color: layoutColors.danger color: layoutColors.dangerCharts
}, },
{ {
country: 'Japan', country: 'Japan',
visits: 1809, visits: 1809,
color: layoutColors.primaryLight color: layoutColors.infoCharts
}, },
{ {
country: 'Germany', country: 'Germany',
visits: 1322, visits: 1322,
color: layoutColors.success color: layoutColors.successCharts
}, },
{ {
country: 'UK', country: 'UK',
visits: 1122, visits: 1122,
color: layoutColors.warning color: layoutColors.warningCharts
}, },
{ {
country: 'France', country: 'France',

8
src/app/pages/charts/amCharts/combinedChart/combinedChartCtrl.js
View File

@ -37,8 +37,8 @@
"id": "g3", "id": "g3",
color: layoutColors.default, color: layoutColors.default,
"valueAxis": "v1", "valueAxis": "v1",
"lineColor": layoutColors.primaryBg, "lineColor": layoutColors.infoCharts,
"fillColors": layoutColors.primaryBg, "fillColors": layoutColors.infoCharts,
"fillAlphas": 1, "fillAlphas": 1,
"type": "column", "type": "column",
"title": "Actual Sales", "title": "Actual Sales",
@ -52,8 +52,8 @@
"id": "g4", "id": "g4",
"valueAxis": "v1", "valueAxis": "v1",
color: layoutColors.default, color: layoutColors.default,
"lineColor": layoutColors.primaryLight, "lineColor": layoutColors.primaryCharts,
"fillColors": layoutColors.primaryLight, "fillColors": layoutColors.primaryCharts,
"fillAlphas": 1, "fillAlphas": 1,
"type": "column", "type": "column",
"title": "Target Sales", "title": "Target Sales",

4
src/app/pages/charts/amCharts/lineChart/LineChartCtrl.js
View File

@ -94,9 +94,9 @@
balloonText: '[[value]]', balloonText: '[[value]]',
bullet: 'round', bullet: 'round',
bulletSize: 8, bulletSize: 8,
lineColor: layoutColors.danger, lineColor: layoutColors.dangerCharts,
lineThickness: 1, lineThickness: 1,
negativeLineColor: layoutColors.primary, negativeLineColor: layoutColors.primaryCharts,
type: 'smoothedLine', type: 'smoothedLine',
valueField: 'value' valueField: 'value'
} }

2
src/app/pages/charts/morris/morrisCtrl.js
View File

@ -10,7 +10,7 @@
/** @ngInject */ /** @ngInject */
function morrisCtrl($scope, $window, layoutColors) { function morrisCtrl($scope, $window, layoutColors) {
$scope.colors = [layoutColors.primary, layoutColors.danger, layoutColors.success, layoutColors.warning, layoutColors.default, layoutColors.primaryDark]; $scope.colors = [layoutColors.primaryCharts, layoutColors.warningCharts, layoutColors.infoCharts, layoutColors.dangerCharts, layoutColors.successCharts, layoutColors.default, layoutColors.primaryDark];
$scope.lineData = [ $scope.lineData = [
{y: "2006", a: 100, b: 90}, {y: "2006", a: 100, b: 90},
{y: "2007", a: 75, b: 65}, {y: "2007", a: 75, b: 65},

8
src/app/pages/dashboard/trafficChart/TrafficChartCtrl.js
View File

@ -19,25 +19,25 @@
}, },
{ {
value: 1500, value: 1500,
color: layoutColors.primaryCharts, color: layoutColors.primaryTrafficCharts,
highlight: layoutColors.primaryLight, highlight: layoutColors.primaryLight,
label: 'Search engines' label: 'Search engines'
}, },
{ {
value: 1000, value: 1000,
color: layoutColors.successCharts, color: layoutColors.successTrafficCharts,
highlight: layoutColors.successBg, highlight: layoutColors.successBg,
label: 'Direct Traffic' label: 'Direct Traffic'
}, },
{ {
value: 1200, value: 1200,
color: layoutColors.infoCharts, color: layoutColors.infoTrafficCharts,
highlight: layoutColors.infoBg, highlight: layoutColors.infoBg,
label: 'Referral Traffic' label: 'Referral Traffic'
}, },
{ {
value: 400, value: 400,
color: layoutColors.warningCharts, color: layoutColors.warningTrafficCharts,
highlight: layoutColors.warningBg, highlight: layoutColors.warningBg,
label: 'Other' label: 'Other'
} }

2
src/app/pages/maps/map-bubbles/MapBubblePageCtrl.js
View File

@ -452,7 +452,7 @@
unlistedAreasAlpha: 0.1 unlistedAreasAlpha: 0.1
}; };
map.imagesSettings.balloonText = '<span style="font-size:14px;"><b>[[title]]</b>: [[value]]</span>'; map.imagesSettings.balloonText = '<span style="font-size:14px;"><b>[[title]]</b>: [[value]]</span>';
map.pathToImages = layoutPaths.images.amChart; map.pathToImages = layoutPaths.images.amMap;
var dataProvider = { var dataProvider = {
mapVar: AmCharts.maps.worldLow, mapVar: AmCharts.maps.worldLow,

2
src/app/pages/maps/map-lines/MapLinesPageCtrl.js
View File

@ -269,7 +269,7 @@
export: { export: {
'enabled': true 'enabled': true
}, },
pathToImages: layoutPaths.images.amChart pathToImages: layoutPaths.images.amMap
} ); } );
}, 100); }, 100);

6
src/app/theme/amChartConfig.js
View File

@ -20,15 +20,15 @@
}, },
AmCoordinateChart: { AmCoordinateChart: {
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg, layoutColors.info] colors: [layoutColors.primaryCharts, layoutColors.dangerCharts, layoutColors.warningCharts, layoutColors.successCharts, layoutColors.infoCharts, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg]
}, },
AmStockChart: { AmStockChart: {
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg, layoutColors.info] colors: [layoutColors.primaryCharts, layoutColors.dangerCharts, layoutColors.warningCharts, layoutColors.successCharts, layoutColors.infoCharts, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg]
}, },
AmSlicedChart: { AmSlicedChart: {
colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg, layoutColors.info], colors: [layoutColors.primaryCharts, layoutColors.dangerCharts, layoutColors.warningCharts, layoutColors.successCharts, layoutColors.infoCharts, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg],
outlineAlpha: 1, outlineAlpha: 1,
outlineThickness: 2, outlineThickness: 2,
labelTickColor: "#FFFFFF", labelTickColor: "#FFFFFF",

2
src/app/theme/chartJsConfig.js
View File

@ -12,7 +12,7 @@
function chartJsConfig(ChartJsProvider, layoutColors) { function chartJsConfig(ChartJsProvider, layoutColors) {
// Configure all charts // Configure all charts
ChartJsProvider.setOptions({ ChartJsProvider.setOptions({
colours: [layoutColors.default, layoutColors.danger, layoutColors.primary, layoutColors.warning, layoutColors.success, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg, layoutColors.info], colours: [ layoutColors.primaryCharts, layoutColors.dangerCharts, layoutColors.warningCharts, layoutColors.successCharts, layoutColors.infoCharts, layoutColors.defaultCharts, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg],
responsive: true, responsive: true,
scaleFontColor: "rgba(255,255,255,.7)", scaleFontColor: "rgba(255,255,255,.7)",
scaleLineColor: "rgba(255,255,255,.7)", scaleLineColor: "rgba(255,255,255,.7)",

9
src/app/theme/theme.constants.js
View File

@ -38,6 +38,12 @@
dangerCharts: '#faad74', dangerCharts: '#faad74',
defaultCharts: '#ffffff', defaultCharts: '#ffffff',
primaryTrafficCharts: '#209e91',
infoTrafficCharts: '#2dacd1',
successTrafficCharts: '#90b900',
warningTrafficCharts: '#dfb81c',
dangerTrafficCharts: '#e85656',
defaultText: '#ffffff' defaultText: '#ffffff'
}) })
.constant('layoutSizes', { .constant('layoutSizes', {
@ -48,7 +54,8 @@
images: { images: {
root: IMAGES_ROOT, root: IMAGES_ROOT,
profile: IMAGES_ROOT + 'app/profile/', profile: IMAGES_ROOT + 'app/profile/',
amChart: 'bower_components/ammap/dist/ammap/images/' amMap: 'bower_components/ammap/dist/ammap/images/',
amChart: 'bower_components/amcharts/dist/amcharts/images/'
} }
}); });

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

@ -53,47 +53,47 @@
.ct-series-a { .ct-series-a {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie { .ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $primary; stroke: $primary-charts;
} }
.ct-slice-pie, .ct-area{ .ct-slice-pie, .ct-area{
fill: $primary; fill: $primary-charts;
} }
} }
.ct-series-b { .ct-series-b {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie { .ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $success; stroke: $success-charts;
} }
.ct-slice-pie, .ct-area{ .ct-slice-pie, .ct-area{
fill: $success; fill: $success-charts;
} }
} }
.ct-series-c { .ct-series-c {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie { .ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $danger; stroke: $danger-charts;
} }
.ct-slice-pie, .ct-area{ .ct-slice-pie, .ct-area{
fill: $danger; fill: $danger-charts;
} }
} }
.ct-series-d { .ct-series-d {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie { .ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $warning; stroke: $warning-charts;
} }
.ct-slice-pie, .ct-area{ .ct-slice-pie, .ct-area{
fill: $warning; fill: $warning-charts;
} }
} }
.ct-series-e { .ct-series-e {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie { .ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $info; stroke: $info-charts;
} }
.ct-slice-pie, .ct-area{ .ct-slice-pie, .ct-area{
fill: $info; fill: $info-charts;
} }
} }
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {

6
src/sass/theme/conf/_variables.scss
View File

@ -29,6 +29,12 @@ $warning-charts :#f9d673;
$danger-charts :#faad74; $danger-charts :#faad74;
$default-charts :#ffffff; $default-charts :#ffffff;
$primary-traffic-charts: #209e91;
$info-traffic-charts: #2dacd1;
$success-traffic-charts: #90b900;
$warning-traffic-charts: #dfb81c;
$danger-traffic-charts: #e85656;
$accent: #E3FF53; $accent: #E3FF53;
$activelink: #D6FF8A; $activelink: #D6FF8A;

10
src/sass/theme/dashboard/_trafficChart.scss
View File

@ -117,22 +117,22 @@
border-radius: 15px; border-radius: 15px;
left: -45px; left: -45px;
&.info{ &.info{
background-color: $info-charts; background-color: $info-traffic-charts;
} }
&.success{ &.success{
background-color: $success-charts; background-color: $success-traffic-charts;
} }
&.danger{ &.danger{
background-color: $danger-charts; background-color: $danger-traffic-charts;
} }
&.default{ &.default{
background-color: $default; background-color: $default;
} }
&.warning{ &.warning{
background-color: $warning-charts; background-color: $warning-traffic-charts;
} }
&.primary{ &.primary{
background-color: $primary-charts; background-color: $primary-traffic-charts;
} }
} }