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

refactor(charts): use new colors

pull/3/head
alex 2016-02-16 11:55:10 +03:00
parent 36b9dd77f9
commit 437024dd41
11 changed files with 60 additions and 70 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',
dataProvider: [
{
lineColor: layoutColors.dangerCharts,
lineColor: layoutColors.info,
date: '2012-01-01',
duration: 408
},
@ -33,7 +33,7 @@
duration: 379
},
{
lineColor: layoutColors.successCharts,
lineColor: layoutColors.warning,
date: '2012-01-05',
duration: 501
},
@ -48,7 +48,7 @@
{
date: '2012-01-08',
duration: 309,
lineColor: layoutColors.primaryCharts
lineColor: layoutColors.danger
},
{
date: '2012-01-09',

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

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

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

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

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

@ -13,32 +13,32 @@
var doughnutData = [
{
value: 2000,
color: layoutColors.default,
highlight: layoutColors.primaryBg,
color: layoutColors.defaultCharts,
highlight: layoutColors.primary,
label: 'Ad Campaigns'
},
{
value: 1500,
color: layoutColors.primaryTrafficCharts,
color: layoutColors.primaryCharts,
highlight: layoutColors.primaryLight,
label: 'Search engines'
},
{
value: 1000,
color: layoutColors.successTrafficCharts,
highlight: layoutColors.successBg,
color: layoutColors.infoCharts,
highlight: layoutColors.infoBg,
label: 'Direct Traffic'
},
{
value: 1200,
color: layoutColors.infoTrafficCharts,
highlight: layoutColors.infoBg,
color: layoutColors.successCharts,
highlight: layoutColors.successDark,
label: 'Referral Traffic'
},
{
value: 400,
color: layoutColors.warningTrafficCharts,
highlight: layoutColors.warningBg,
color: layoutColors.warningCharts,
highlight: layoutColors.warningDark,
label: 'Other'
}
];

20
src/app/pages/dashboard/trafficChart/trafficChart.html
View File

@ -35,16 +35,6 @@
</div>
</div>
<div class="channels-info-item">
<div class="legend-color info"></div>
<p>Referral Traffic<span class="channel-number">+70%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
</div>
</div>
</div>
<div class="channels-info-item">
<div class="legend-color success"></div>
<p>Direct Traffic<span class="channel-number">+38%</span></p>
@ -55,6 +45,16 @@
</div>
</div>
<div class="channels-info-item">
<div class="legend-color info"></div>
<p>Referral Traffic<span class="channel-number">+70%</span></p>
<div class="progress progress-sm channel-progress">
<div class="progress-bar " role="progressbar"
aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
</div>
</div>
</div>
<div class="channels-info-item">
<div class="legend-color primary"></div>
<p>Search engines<span class="channel-number">+22%</span></p>

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

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

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

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

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

@ -31,19 +31,13 @@
warningBg: '#e8ca52',
dangerBg: '#f67171',
primaryCharts: '#218d9d',
successCharts: '#c2eb70',
infoCharts: '#59c3b8',
warningCharts: '#f9d673',
dangerCharts: '#faad74',
primaryCharts: '#005562',
successCharts: '#6eba8c',
infoCharts: '#0e8174',
warningCharts: '#b9f2a1',
dangerCharts: '#ffa76d',
defaultCharts: '#ffffff',
primaryTrafficCharts: '#209e91',
infoTrafficCharts: '#2dacd1',
successTrafficCharts: '#90b900',
warningTrafficCharts: '#dfb81c',
dangerTrafficCharts: '#e85656',
defaultText: '#ffffff'
})
.constant('layoutSizes', {

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

@ -53,47 +53,47 @@
.ct-series-a {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $primary-charts;
stroke: $primary;
}
.ct-slice-pie, .ct-area{
fill: $primary-charts;
fill: $primary;
}
}
.ct-series-b {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $success-charts;
stroke: $success;
}
.ct-slice-pie, .ct-area{
fill: $success-charts;
fill: $success;
}
}
.ct-series-c {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $danger-charts;
stroke: $danger;
}
.ct-slice-pie, .ct-area{
fill: $danger-charts;
fill: $danger;
}
}
.ct-series-d {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $warning-charts;
stroke: $warning;
}
.ct-slice-pie, .ct-area{
fill: $warning-charts;
fill: $warning;
}
}
.ct-series-e {
.ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
stroke: $info-charts;
stroke: $info;
}
.ct-slice-pie, .ct-area{
fill: $info-charts;
fill: $info;
}
}

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

@ -22,18 +22,14 @@ $success-bg: #b5d448;
$warning-bg: #e8ca52;
$danger-bg: #f67171;
$primary-charts :#218d9d;
$success-charts :#c2eb70;
$info-charts :#59c3b8;
$warning-charts :#f9d673;
$danger-charts :#faad74;
$primary-charts :#005562;
$success-charts :#6eba8c;
$info-charts :#0e8174;
$warning-charts :#b9f2a1;
$danger-charts :#ffa76d;
$default-charts :#ffffff;
$primary-traffic-charts: #209e91;
$info-traffic-charts: #2dacd1;
$success-traffic-charts: #90b900;
$warning-traffic-charts: #dfb81c;
$danger-traffic-charts: #e85656;
$view-total :#242343;
$accent: #E3FF53;

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

@ -117,22 +117,22 @@
border-radius: 15px;
left: -45px;
&.info{
background-color: $info-traffic-charts;
background-color: $info-charts;
}
&.success{
background-color: $success-traffic-charts;
background-color: $success-charts;
}
&.danger{
background-color: $danger-traffic-charts;
background-color: $danger-charts;
}
&.default{
background-color: $default;
}
&.warning{
background-color: $warning-traffic-charts;
background-color: $warning-charts;
}
&.primary{
background-color: $primary-traffic-charts;
background-color: $primary-charts;
}
}
@ -183,7 +183,7 @@
}
.chart-bg{
background-color: $primary-dark;
background-color: $view-total;
position: absolute;
border-radius: 100px;
width: 180px;