Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-01-06 01:28:50 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

traffic and popular app components style fixes

Browse source
This commit is contained in:
nixa 2016-05-16 18:46:23 +03:00
parent 80e4eddab3
commit 1dac44f253
5 changed files with 75 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/app/pages/dashboard/popularApp/popularApp.html
View file

@ -1,25 +1,28 @@
<div class="popular-app-img">
<img src="{{ ('app/my-app-logo.png' | appPicture ) }}"/>
<div class="popular-app-img-container">
<div class="popular-app-img">
<img src="{{ ( 'app/my-app-logo.png' | appPicture ) }}"/>
<span class="logo-text">Super&nbsp;App</span>
</div>
</div>
<div class="popular-app-cost row">
<div class="col-xs-9">
Most Popular App
</div>
<div class="col-xs-3 text-right">
175$
</div>
<div class="col-xs-9">
Most Popular App
</div>
<div class="col-xs-3 text-right">
175$
</div>
</div>
<div class="popular-app-info row">
<div class="col-xs-4 text-left">
<div class="info-label">Total Visits</div>
<div>47,512</div>
</div>
<div class="col-xs-4 text-center">
<div class="info-label">New Visits</div>
<div>9,217</div>
</div>
<div class="col-xs-4 text-right">
<div class="info-label">Sales</div>
<div>2,928</div>
</div>
<div class="col-xs-4 text-left">
<div class="info-label">Total Visits</div>
<div>47,512</div>
</div>
<div class="col-xs-4 text-center">
<div class="info-label">New Visits</div>
<div>9,217</div>
</div>
<div class="col-xs-4 text-right">
<div class="info-label">Sales</div>
<div>2,928</div>
</div>
</div>

4
src/app/pages/dashboard/popularApp/popularApp.scss
View file

@ -1,7 +1,7 @@
@import "../../../theme/sass/conf/conf";
.panel.popular-app {
&>.panel-body {
.card.popular-app {
&>.card-body {
padding: 0;
}

2
src/app/pages/dashboard/trafficChart/trafficChart.component.ts
View file

@ -15,9 +15,11 @@ import {TrafficChartService} from './trafficChart.service';
export class TrafficChart {
public doughnutData: Array<Object>;
public transparent:boolean = false;
constructor(private trafficChartService:TrafficChartService) {
this.doughnutData = trafficChartService.getData();
this.transparent = trafficChartService.getTransparent();
}
ngAfterViewInit() {

2
src/app/pages/dashboard/trafficChart/trafficChart.html
View file

@ -1,4 +1,4 @@
<div class="channels-block">
<div class="channels-block" [ngClass]="{'transparent': transparent}">
<div class="chart-bg"></div>
<div class="traffic-chart" id="trafficChart">

88
src/app/pages/dashboard/trafficChart/trafficChart.service.ts
View file

@ -1,50 +1,56 @@
import {Injectable} from '@angular/core';
import {layoutColors} from '../../../theme';
import {BaThemeConfigProvider, colorHelper} from '../../../theme';
@Injectable()
export class TrafficChartService {
private _palette = layoutColors.bgColorPalette;
private _data = [
{
value: 1000,
color: this._palette.gossip,
highlight: this._palette.gossipDark,
label: 'Ad Campaigns',
percentage: 17,
order: 0,
},{
value: 1400,
color: this._palette.white,
highlight: this._palette.whiteDark,
label: 'Other',
percentage: 87,
order: 1,
}, {
value: 1500,
color: this._palette.blueStone,
highlight: this._palette.blueStoneDark,
label: 'Search engines',
percentage: 22,
order: 4,
}, {
value: 1000,
color: this._palette.surfieGreen,
highlight: this._palette.surfieGreenDark,
label: 'Referral Traffic',
percentage: 70,
order: 3,
}, {
value: 1200,
color: this._palette.silverTree,
highlight: this._palette.silverTreeDark,
label: 'Direct Traffic',
percentage: 38,
order: 2,
},
];
constructor(private _baConfig:BaThemeConfigProvider) {
}
getData() {
return this._data;
let dashboardColors = this._baConfig.get().colors.dashboard;
return [
{
value: 2000,
color: dashboardColors.white,
highlight: colorHelper.shade(dashboardColors.white, 15),
label: 'Other',
percentage: 87,
order: 1,
}, {
value: 1500,
color: dashboardColors.blueStone,
highlight: colorHelper.shade(dashboardColors.blueStone, 15),
label: 'Search engines',
percentage: 22,
order: 4,
}, {
value: 1000,
color: dashboardColors.surfieGreen,
highlight: colorHelper.shade(dashboardColors.surfieGreen, 15),
label: 'Referral Traffic',
percentage: 70,
order: 3,
}, {
value: 1200,
color: dashboardColors.silverTree,
highlight: colorHelper.shade(dashboardColors.silverTree, 15),
label: 'Direct Traffic',
percentage: 38,
order: 2,
}, {
value: 400,
color: dashboardColors.gossip,
highlight: colorHelper.shade(dashboardColors.gossip, 15),
label: 'Ad Campaigns',
percentage: 17,
order: 0,
},
];
}
getTransparent() {
return this._baConfig.get().theme.blur;
}
}