Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(demo): improve dashboard components

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-24 19:10:59 +03:00
parent 0c22fbb784
commit 721a0b36ec
11 changed files with 192 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/app/pages/dashboard/dashboard.component.html
View file

@ -57,12 +57,7 @@
</div>
<div class="col-lg-3">
<nga-card size="xsmall" class="traffic-card">
<nga-card-header>Traffic Consumption</nga-card-header>
<nga-card-body class="p-0">
<ngx-traffic></ngx-traffic>
</nga-card-body>
</nga-card>
<ngx-traffic></ngx-traffic>
<ngx-weather></ngx-weather>
</div>

10
src/app/pages/dashboard/dashboard.component.scss
View file

@ -5,14 +5,4 @@
border: none;
padding-bottom: 0;
}
.traffic-card {
nga-card-header {
border: none;
}
nga-card-body {
overflow: hidden;
}
}
}

2
src/app/pages/dashboard/dashboard.module.ts
View file

@ -18,6 +18,7 @@ import { WeatherComponent } from './weather/weather.component';
import { SolarComponent } from './solar/solar.component';
import { PlayerComponent } from './player/player.component';
import { TrafficComponent } from './traffic/traffic.component';
import { TrafficChartComponent } from './traffic/traffic-chart.component';
@NgModule({
imports: [
@ -42,6 +43,7 @@ import { TrafficComponent } from './traffic/traffic.component';
PlayerComponent,
SolarComponent,
TrafficComponent,
TrafficChartComponent,
],
})
export class DashboardModule { }

13
src/app/pages/dashboard/electricity/electricity.component.html
View file

@ -41,15 +41,14 @@
</div>
</div>
<!-- <div class="btn-group" ngbDropdown>
<button type="button" class="btn btn-primary">Week</button>
<button type="button" class="btn btn-primary" ngbDropdownToggle></button>
<div ngbDropdown>
<button type="button" class="btn btn-primary" ngbDropdownToggle>
{{ type }}
</button>
<ul class="dropdown-menu">
<li class="dropdown-item">Week</li>
<li class="dropdown-item">Month</li>
<li class="dropdown-item">Year</li>
<li class="dropdown-item" *ngFor="let t of types" (click)="type = t">{{ t }}</li>
</ul>
</div> -->
</div>
</div>
<ngx-electricity-chart></ngx-electricity-chart>

5
src/app/pages/dashboard/electricity/electricity.component.scss
View file

@ -1,6 +1,5 @@
@import '../../../@theme/styles/variables';
@import '~@akveo/nga-theme/components/card/card.component.theme';
@import '~@akveo/nga-theme/styles/global/overrides';
@include nga-install-component() {
@ -171,4 +170,8 @@
font-weight: nga-theme(font-weight-light);
}
}
.dropdown {
min-width: 130px;
}
}

3
src/app/pages/dashboard/electricity/electricity.component.ts
View file

@ -10,6 +10,9 @@ export class ElectricityComponent {
data: Array<any>;
type: string = 'week';
types = ['week', 'month', 'year'];
constructor(private electricityService: ElectricityService) {
this.data = electricityService.getData();
}

5
src/app/pages/dashboard/security-cameras/security-cameras.component.scss
View file

@ -21,7 +21,6 @@
.cameras-card-title {
flex: 1;
padding: 1.25rem;
line-height: 1.25rem;
}
}
@ -30,7 +29,6 @@
a {
font-size: 2rem;
line-height: 2rem;
padding: 0.75rem 1.5rem;
display: flex;
flex-direction: column;
@ -73,8 +71,7 @@
color: white;
background: rgba(88, 73, 184, 0.5);
font-size: 1rem;
line-height: 2.5rem;
padding-left: 1rem;
padding: 0.5rem 1rem;
}
}

138
src/app/pages/dashboard/traffic/traffic-chart.component.ts Normal file
View file

@ -0,0 +1,138 @@
import { Component } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
declare const echarts: any;
const points = [300, 520, 435, 530, 730, 620, 660, 860];
@Component({
selector: 'ngx-traffic-chart',
styleUrls: ['./traffic.component.scss'],
template: `
<div echarts [options]="option" class="echart"></div>
`,
})
export class TrafficChartComponent {
type: string = 'month';
types = ['week', 'month', 'year'];
option: any = {};
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.option = Object.assign({}, {
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: points,
},
yAxis: {
boundaryGap: [0, '5%'],
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: config.trafficColorBlack,
opacity: 0.06,
width: '1',
},
},
},
tooltip: {
axisPointer: {
type: 'shadow',
},
position: 'top',
backgroundColor: config.trafficTooltipBg,
borderColor: config.colorSuccess,
borderWidth: 3,
formatter: '{c0} MB',
extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`,
},
series: [
{
type: 'line',
symbol: 'circle',
symbolSize: 8,
sampling: 'average',
silent: true,
itemStyle: {
normal: {
color: config.trafficLineBg,
},
emphasis: {
color: 'rgba(0,0,0,0)',
borderColor: 'rgba(0,0,0,0)',
borderWidth: 0,
},
},
lineStyle: {
normal: {
width: 2,
color: config.trafficLineBg,
},
},
data: points.map(p => p - 15),
},
{
type: 'line',
symbol: 'circle',
symbolSize: 6,
sampling: 'average',
itemStyle: {
normal: {
color: config.trafficShadowLineBg,
borderColor: 'white',
borderWidth: 2,
shadowColor: config.trafficShadowLineShadow,
shadowOffsetX: 0,
shadowOffsetY: -3,
shadowBlur: 10,
},
emphasis: {
color: 'white',
borderColor: 'rgba(0,0,0,0)',
borderWidth: 5,
},
},
lineStyle: {
normal: {
width: 2,
color: config.trafficLineBg,
shadowColor: config.trafficShadowLineDarkBg,
shadowBlur: 14,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: config.trafficGradFrom,
}, {
offset: 1,
color: config.trafficGradTo,
}]),
},
},
data: points,
},
],
});
});
}
}

17
src/app/pages/dashboard/traffic/traffic.component.scss
View file

@ -2,9 +2,16 @@
@include nga-install-component() {
ngx-echarts-pie, ngx-echarts-bar, ngx-echarts-line {
display: block;
height: 100%;
nga-card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.675rem 0.5rem 0.5rem 1.25rem;
border: none;
}
nga-card-body {
overflow: hidden;
}
/deep/ canvas {
@ -16,4 +23,8 @@
height: 100%;
width: 100%;
}
.dropdown {
min-width: 120px;
}
}

152
src/app/pages/dashboard/traffic/traffic.component.ts
View file

@ -1,142 +1,28 @@
import { Component, Input } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
declare const echarts: any;
const points = [300, 520, 435, 530, 730, 620, 660, 860];
const data = points.map((p, index) => ({
label: (index % 3 === 1) ? '${index}' : '',
value: p,
}));
import { Component } from '@angular/core';
@Component({
selector: 'ngx-traffic',
styleUrls: ['./traffic.component.scss'],
template: `
<div echarts [options]="option" class="echart">
</div>
<nga-card size="xsmall">
<nga-card-header>
<span>Traffic Consumption</span>
<div class="ghost-dropdown" ngbDropdown>
<button type="button" class="btn btn-sm btn-primary" ngbDropdownToggle>
{{ type }}
</button>
<ul class="dropdown-menu">
<li class="dropdown-item" *ngFor="let t of types" (click)="type = t">{{ t }}</li>
</ul>
</div>
</nga-card-header>
<nga-card-body class="p-0">
<ngx-traffic-chart></ngx-traffic-chart>
</nga-card-body>
</nga-card>
`,
})
export class TrafficComponent {
option: any = {};
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.option = Object.assign({}, {
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: data.map(i => i.label),
},
yAxis: {
boundaryGap: [0, '5%'],
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: config.trafficColorBlack,
opacity: 0.06,
width: '1',
},
},
},
tooltip: {
axisPointer: {
type: 'shadow',
},
position: 'top',
backgroundColor: config.trafficTooltipBg,
borderColor: config.colorSuccess,
borderWidth: 3,
formatter: '{c0} MB',
extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`,
},
series: [
{
type: 'line',
symbol: 'circle',
symbolSize: 8,
sampling: 'average',
silent: true,
itemStyle: {
normal: {
color: config.trafficLineBg,
},
emphasis: {
color: 'rgba(0,0,0,0)',
borderColor: 'rgba(0,0,0,0)',
borderWidth: 0,
},
},
lineStyle: {
normal: {
width: 2,
color: config.trafficLineBg,
},
},
data: data.map(i => i.value - 15),
},
{
type: 'line',
symbol: 'circle',
symbolSize: 6,
sampling: 'average',
itemStyle: {
normal: {
color: config.trafficShadowLineBg,
borderColor: 'white',
borderWidth: 2,
shadowColor: config.trafficShadowLineShadow,
shadowOffsetX: 0,
shadowOffsetY: -3,
shadowBlur: 10,
},
emphasis: {
color: 'white',
borderColor: 'rgba(0,0,0,0)',
borderWidth: 5,
},
},
lineStyle: {
normal: {
width: 2,
color: config.trafficLineBg,
shadowColor: config.trafficShadowLineDarkBg,
shadowBlur: 14,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: config.trafficGradFrom,
}, {
offset: 1,
color: config.trafficGradTo,
}]),
},
},
data: data.map(i => i.value),
},
],
});
});
}
type: string = 'month';
types = ['week', 'month', 'year'];
}

5
src/app/pages/dashboard/weather/weather.component.scss
View file

@ -2,10 +2,13 @@
@include nga-install-component() {
nga-card {
background-image: nga-theme(radial-gradient);
}
nga-card-body {
height: 100%;
padding: 2rem;
background-image: nga-theme(radial-gradient);
color: nga-theme(color-fg);
}