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

feat(charts): provide height for the chart containers (Safari issue)

Browse source
This commit is contained in:
nixa 2017-09-19 15:29:13 +03:00
parent b22fc134e1
commit 58e4382546
6 changed files with 22 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/app/pages/charts/chartjs/chartjs.component.html
View file

@ -1,6 +1,6 @@
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Pie</nb-card-header> <nb-card-header>Pie</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-chartjs-pie></ngx-chartjs-pie> <ngx-chartjs-pie></ngx-chartjs-pie>
@ -8,7 +8,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Bar</nb-card-header> <nb-card-header>Bar</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-chartjs-bar></ngx-chartjs-bar> <ngx-chartjs-bar></ngx-chartjs-bar>
@ -16,7 +16,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Line</nb-card-header> <nb-card-header>Line</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-chartjs-line></ngx-chartjs-line> <ngx-chartjs-line></ngx-chartjs-line>
@ -24,7 +24,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Multiple x-axis</nb-card-header> <nb-card-header>Multiple x-axis</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-chartjs-multiple-xaxis></ngx-chartjs-multiple-xaxis> <ngx-chartjs-multiple-xaxis></ngx-chartjs-multiple-xaxis>
@ -32,7 +32,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Bar Horizontal</nb-card-header> <nb-card-header>Bar Horizontal</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-chartjs-bar-horizontal></ngx-chartjs-bar-horizontal> <ngx-chartjs-bar-horizontal></ngx-chartjs-bar-horizontal>
@ -40,7 +40,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Radar</nb-card-header> <nb-card-header>Radar</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-chartjs-radar></ngx-chartjs-radar> <ngx-chartjs-radar></ngx-chartjs-radar>

2
src/app/pages/charts/chartjs/chartjs.component.scss
View file

@ -8,7 +8,7 @@
ngx-chartjs-bar-horizontal, ngx-chartjs-bar-horizontal,
ngx-chartjs-radar { ngx-chartjs-radar {
display: block; display: block;
height: 100%; height: nb-theme(card-height-medium);
width: 100%; width: 100%;
/deep/ chart { /deep/ chart {

12
src/app/pages/charts/d3/d3.component.html
View file

@ -1,6 +1,6 @@
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Pie</nb-card-header> <nb-card-header>Pie</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-d3-pie></ngx-d3-pie> <ngx-d3-pie></ngx-d3-pie>
@ -8,7 +8,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Bar</nb-card-header> <nb-card-header>Bar</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-d3-bar></ngx-d3-bar> <ngx-d3-bar></ngx-d3-bar>
@ -16,7 +16,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Line</nb-card-header> <nb-card-header>Line</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-d3-line></ngx-d3-line> <ngx-d3-line></ngx-d3-line>
@ -24,7 +24,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Advanced Pie</nb-card-header> <nb-card-header>Advanced Pie</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-d3-advanced-pie></ngx-d3-advanced-pie> <ngx-d3-advanced-pie></ngx-d3-advanced-pie>
@ -32,7 +32,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Area Chart</nb-card-header> <nb-card-header>Area Chart</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-d3-area-stack></ngx-d3-area-stack> <ngx-d3-area-stack></ngx-d3-area-stack>
@ -40,7 +40,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Polar Chart</nb-card-header> <nb-card-header>Polar Chart</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-d3-polar></ngx-d3-polar> <ngx-d3-polar></ngx-d3-polar>

2
src/app/pages/charts/d3/d3.component.scss
View file

@ -9,7 +9,7 @@
ngx-d3-polar { ngx-d3-polar {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: nb-theme(card-height-medium);
/deep/ { /deep/ {
.pie-label { .pie-label {

14
src/app/pages/charts/echarts/echarts.component.html
View file

@ -1,6 +1,6 @@
<div class="row"> <div class="row">
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Pie</nb-card-header> <nb-card-header>Pie</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-echarts-pie></ngx-echarts-pie> <ngx-echarts-pie></ngx-echarts-pie>
@ -8,7 +8,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Bar</nb-card-header> <nb-card-header>Bar</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-echarts-bar></ngx-echarts-bar> <ngx-echarts-bar></ngx-echarts-bar>
@ -16,7 +16,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Line</nb-card-header> <nb-card-header>Line</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-echarts-line></ngx-echarts-line> <ngx-echarts-line></ngx-echarts-line>
@ -24,7 +24,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Multiple x-axis</nb-card-header> <nb-card-header>Multiple x-axis</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-echarts-multiple-xaxis></ngx-echarts-multiple-xaxis> <ngx-echarts-multiple-xaxis></ngx-echarts-multiple-xaxis>
@ -32,7 +32,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Area Stack</nb-card-header> <nb-card-header>Area Stack</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-echarts-area-stack></ngx-echarts-area-stack> <ngx-echarts-area-stack></ngx-echarts-area-stack>
@ -40,7 +40,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Bar Animation</nb-card-header> <nb-card-header>Bar Animation</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-echarts-bar-animation></ngx-echarts-bar-animation> <ngx-echarts-bar-animation></ngx-echarts-bar-animation>
@ -48,7 +48,7 @@
</nb-card> </nb-card>
</div> </div>
<div class="col-lg-6"> <div class="col-lg-6">
<nb-card size="large"> <nb-card>
<nb-card-header>Radar</nb-card-header> <nb-card-header>Radar</nb-card-header>
<nb-card-body> <nb-card-body>
<ngx-echarts-radar></ngx-echarts-radar> <ngx-echarts-radar></ngx-echarts-radar>

2
src/app/pages/charts/echarts/echarts.component.scss
View file

@ -9,7 +9,7 @@
ngx-echarts-bar-animation, ngx-echarts-bar-animation,
ngx-echarts-radar { ngx-echarts-radar {
display: block; display: block;
height: 100%; height: nb-theme(card-height-medium);
width: 100%; width: 100%;
} }