mirror of https://github.com/akveo/blur-admin
refactor(charts): apply new chrts colors
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…
Reference in New Issue