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', theme: 'blur',
dataProvider: [ dataProvider: [
{ {
lineColor: layoutColors.dangerCharts, lineColor: layoutColors.info,
date: '2012-01-01', date: '2012-01-01',
duration: 408 duration: 408
}, },
@ -33,7 +33,7 @@
duration: 379 duration: 379
}, },
{ {
lineColor: layoutColors.successCharts, lineColor: layoutColors.warning,
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.primaryCharts lineColor: layoutColors.danger
}, },
{ {
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.primaryCharts color: layoutColors.primary
}, },
{ {
country: 'China', country: 'China',
visits: 1882, visits: 1882,
color: layoutColors.dangerCharts color: layoutColors.danger
}, },
{ {
country: 'Japan', country: 'Japan',
visits: 1809, visits: 1809,
color: layoutColors.infoCharts color: layoutColors.info
}, },
{ {
country: 'Germany', country: 'Germany',
visits: 1322, visits: 1322,
color: layoutColors.successCharts color: layoutColors.success
}, },
{ {
country: 'UK', country: 'UK',
visits: 1122, visits: 1122,
color: layoutColors.warningCharts color: layoutColors.warning
}, },
{ {
country: 'France', country: 'France',

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.dangerCharts, lineColor: layoutColors.danger,
lineThickness: 1, lineThickness: 1,
negativeLineColor: layoutColors.primaryCharts, negativeLineColor: layoutColors.warning,
type: 'smoothedLine', type: 'smoothedLine',
valueField: 'value' valueField: 'value'
} }

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

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

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

@ -35,16 +35,6 @@
</div> </div>
</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="channels-info-item">
<div class="legend-color success"></div> <div class="legend-color success"></div>
<p>Direct Traffic<span class="channel-number">+38%</span></p> <p>Direct Traffic<span class="channel-number">+38%</span></p>
@ -55,6 +45,16 @@
</div> </div>
</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="channels-info-item">
<div class="legend-color primary"></div> <div class="legend-color primary"></div>
<p>Search engines<span class="channel-number">+22%</span></p> <p>Search engines<span class="channel-number">+22%</span></p>

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

@ -20,15 +20,15 @@
}, },
AmCoordinateChart: { 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: { 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: { 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, 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.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, 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)",

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

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

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-charts; stroke: $primary;
} }
.ct-slice-pie, .ct-area{ .ct-slice-pie, .ct-area{
fill: $primary-charts; fill: $primary;
} }
} }
.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-charts; stroke: $success;
} }
.ct-slice-pie, .ct-area{ .ct-slice-pie, .ct-area{
fill: $success-charts; fill: $success;
} }
} }
.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-charts; stroke: $danger;
} }
.ct-slice-pie, .ct-area{ .ct-slice-pie, .ct-area{
fill: $danger-charts; fill: $danger;
} }
} }
.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-charts; stroke: $warning;
} }
.ct-slice-pie, .ct-area{ .ct-slice-pie, .ct-area{
fill: $warning-charts; fill: $warning;
} }
} }
.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-charts; stroke: $info;
} }
.ct-slice-pie, .ct-area{ .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; $warning-bg: #e8ca52;
$danger-bg: #f67171; $danger-bg: #f67171;
$primary-charts :#218d9d; $primary-charts :#005562;
$success-charts :#c2eb70; $success-charts :#6eba8c;
$info-charts :#59c3b8; $info-charts :#0e8174;
$warning-charts :#f9d673; $warning-charts :#b9f2a1;
$danger-charts :#faad74; $danger-charts :#ffa76d;
$default-charts :#ffffff; $default-charts :#ffffff;
$primary-traffic-charts: #209e91; $view-total :#242343;
$info-traffic-charts: #2dacd1;
$success-traffic-charts: #90b900;
$warning-traffic-charts: #dfb81c;
$danger-traffic-charts: #e85656;
$accent: #E3FF53; $accent: #E3FF53;

12
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-traffic-charts; background-color: $info-charts;
} }
&.success{ &.success{
background-color: $success-traffic-charts; background-color: $success-charts;
} }
&.danger{ &.danger{
background-color: $danger-traffic-charts; background-color: $danger-charts;
} }
&.default{ &.default{
background-color: $default; background-color: $default;
} }
&.warning{ &.warning{
background-color: $warning-traffic-charts; background-color: $warning-charts;
} }
&.primary{ &.primary{
background-color: $primary-traffic-charts; background-color: $primary-charts;
} }
} }
@ -183,7 +183,7 @@
} }
.chart-bg{ .chart-bg{
background-color: $primary-dark; background-color: $view-total;
position: absolute; position: absolute;
border-radius: 100px; border-radius: 100px;
width: 180px; width: 180px;