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(dashboard): fix height inheritance for charts (Safari issue)

Browse source
This commit is contained in:
nixa 2017-09-19 16:48:38 +03:00
parent 01ebcdec8a
commit 4d516986b1
5 changed files with 29 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -44,12 +44,7 @@
</div>
<div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
<nb-card size="xsmall" class="solar-card">
<nb-card-header>Solar Energy Consumption</nb-card-header>
<nb-card-body>
<ngx-solar [chartValue]="72"></ngx-solar>
</nb-card-body>
</nb-card>
<ngx-solar [chartValue]="72"></ngx-solar>
<ngx-kitten></ngx-kitten>
</div>

3
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss
View file

@ -4,8 +4,11 @@
display: block;
flex: 1;
position: relative;
.echart {
position: absolute;
width: 100%;
height: 100%;
}
}

27
src/app/pages/dashboard/solar/solar.component.scss
View file

@ -4,27 +4,24 @@
@include nb-install-component() {
display: flex;
height: 100%;
color: nb-theme(color-fg);
$padding: 1rem;
$padding: 1rem;
nb-card-body {
overflow: hidden;
padding: $padding;
}
.echart {
flex: 1;
height: 100%;
position: absolute;
height: calc(100% - 2 * #{$padding});
width: 40%;
}
.info {
display: flex;
flex-direction: column;
flex: 1;
align-self: center;
}
.date {
font-size: 1.25rem;
font-weight: nb-theme(font-weight-bolder);
margin-bottom: 0.5rem;
margin-left: 45%;
padding-top: 1.5rem;
color: nb-theme(color-fg);
}
.value {

18
src/app/pages/dashboard/solar/solar.component.ts
View file

@ -7,13 +7,17 @@ declare const echarts: any;
selector: 'ngx-solar',
styleUrls: ['./solar.component.scss'],
template: `
<div echarts [options]="option" class="echart">
</div>
<div class="info">
<div class="date">June 7, 2017</div>
<div class="value">6. 421 kWh</div>
<div class="details"><span>out of</span> 8.421 kWh</div>
</div>
<nb-card size="xsmall" class="solar-card">
<nb-card-header>Solar Energy Consumption</nb-card-header>
<nb-card-body>
<div echarts [options]="option" class="echart">
</div>
<div class="info">
<div class="value">6. 421 kWh</div>
<div class="details"><span>out of</span> 8.421 kWh</div>
</div>
</nb-card-body>
</nb-card>
`,
})
export class SolarComponent implements AfterViewInit {

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

@ -12,6 +12,7 @@
nb-card-body {
overflow: hidden;
position: relative;
}
/deep/ canvas {
@ -20,6 +21,7 @@
}
.echart {
position: absolute;
height: 100%;
width: 100%;
}