refactor(charts): apply new chrts colors

pull/3/head
alex 9 years ago
parent cf01569215
commit 1ea75664fb

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

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

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

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

@ -10,7 +10,7 @@
/** @ngInject */
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 = [
{y: "2006", a: 100, b: 90},
{y: "2007", a: 75, b: 65},

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

@ -452,7 +452,7 @@
unlistedAreasAlpha: 0.1
};
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 = {
mapVar: AmCharts.maps.worldLow,

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

@ -20,15 +20,15 @@
},
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: {
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: {
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,
outlineThickness: 2,
labelTickColor: "#FFFFFF",

@ -12,7 +12,7 @@
function chartJsConfig(ChartJsProvider, layoutColors) {
// Configure all charts
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,
scaleFontColor: "rgba(255,255,255,.7)",
scaleLineColor: "rgba(255,255,255,.7)",

@ -38,6 +38,12 @@
dangerCharts: '#faad74',
defaultCharts: '#ffffff',
primaryTrafficCharts: '#209e91',
infoTrafficCharts: '#2dacd1',
successTrafficCharts: '#90b900',
warningTrafficCharts: '#dfb81c',
dangerTrafficCharts: '#e85656',
defaultText: '#ffffff'
})
.constant('layoutSizes', {
@ -48,7 +54,8 @@
images: {
root: IMAGES_ROOT,
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/'
}
});

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

@ -29,6 +29,12 @@ $warning-charts :#f9d673;
$danger-charts :#faad74;
$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;
$activelink: #D6FF8A;

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

Loading…
Cancel
Save