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

chart.js responsive error fix

Browse source
This commit is contained in:
nixa 2016-05-11 11:54:31 +03:00
parent 0239c17766
commit 3f8e623584
4 changed files with 23 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/app/pages/charts/components/chartJs/chartJs.component.ts
View file

@ -35,8 +35,7 @@ export class ChartJs {
public options = { public options = {
scaleShowLabelBackdrop : false, scaleShowLabelBackdrop : false,
segmentShowStroke : false, segmentShowStroke : false,
// TODO: produce an error 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)",
pointLabelFontColor: "rgba(255,255,255,.7)" pointLabelFontColor: "rgba(255,255,255,.7)"

22
src/app/pages/charts/components/chartJs/chartJs.html
View file

@ -1,23 +1,23 @@
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<ba-card title="Pie" baCardClass="medium-card"> <ba-card title="Pie" baCardClass="with-scroll">
<base-chart class="chart chart-pie" <base-chart class="chartjs chart chart-pie"
[legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Pie')" [labels]="labels.one" (chartClick)="changeData($event)"> [legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Pie')" [labels]="labels.one" (chartClick)="changeData($event)">
</base-chart> </base-chart>
</ba-card> </ba-card>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<ba-card title="Doughnut" baCardClass="medium-card"> <ba-card title="Doughnut" baCardClass="with-scroll">
<base-chart class="doughnut chart-doughnut" <base-chart class="chartjs doughnut chart-doughnut"
[legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Doughnut')" [labels]="labels.one" (chartClick)="changeData($event)"> [legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('Doughnut')" [labels]="labels.one" (chartClick)="changeData($event)">
</base-chart> </base-chart>
</ba-card> </ba-card>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<ba-card title="Polar" baCardClass="medium-card"> <ba-card title="Polar" baCardClass="with-scroll">
<base-chart class="polar chart-polar" <base-chart class="chartjs polar chart-polar"
[legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('PolarArea')" [labels]="labels.one" (chartClick)="changeData($event)"> [legend]="true" [colours]="colours" [options]="options" [data]="data.one" [chartType]="chartType('PolarArea')" [labels]="labels.one" (chartClick)="changeData($event)">
</base-chart> </base-chart>
</ba-card> </ba-card>
@ -27,14 +27,14 @@
<div class="row "> <div class="row ">
<div class="col-md-6"> <div class="col-md-6">
<ba-card title="Animated Radar" baCardClass="with-scroll col-eq-height"> <ba-card title="Animated Radar" baCardClass="with-scroll col-eq-height">
<base-chart class="waveLine chart-waveLine" <base-chart class="chartjs waveLine chart-waveLine"
[legend]="false" [colours]="colours" [options]="options" [data]="data.two" [chartType]="chartType('Radar')" [labels]="labels.two" (chartClick)="changeData($event)"> [legend]="false" [colours]="colours" [options]="options" [data]="data.two" [chartType]="chartType('Radar')" [labels]="labels.two" (chartClick)="changeData($event)">
</base-chart> </base-chart>
</ba-card> </ba-card>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<ba-card title="Animated Bars" baCardClass="with-scroll col-eq-height"> <ba-card title="Animated Bars" baCardClass="with-scroll col-eq-height">
<base-chart class="waveBars chart-waveBars" <base-chart class="chartjs waveBars chart-waveBars"
[legend]="false" [colours]="colours" [options]="options" [data]="data.two" [chartType]="chartType('Bar')" [labels]="labels.two" (chartClick)="changeData($event)"> [legend]="false" [colours]="colours" [options]="options" [data]="data.two" [chartType]="chartType('Bar')" [labels]="labels.two" (chartClick)="changeData($event)">
</base-chart> </base-chart>
</ba-card> </ba-card>
@ -44,21 +44,21 @@
<div class="row "> <div class="row ">
<div class="col-lg-4 col-md-6"> <div class="col-lg-4 col-md-6">
<ba-card title="Radar" baCardClass="with-scroll"> <ba-card title="Radar" baCardClass="with-scroll">
<base-chart id="radar" class="chart chart-radar" <base-chart id="radar" class="chartjs chart chart-radar"
[legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Radar')" [labels]="labels.three" (chartClick)="changeData($event)"> [legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Radar')" [labels]="labels.three" (chartClick)="changeData($event)">
</base-chart> </base-chart>
</ba-card> </ba-card>
</div> </div>
<div class="col-lg-4 col-md-6"> <div class="col-lg-4 col-md-6">
<ba-card title="Line" baCardClass="with-scroll"> <ba-card title="Line" baCardClass="with-scroll">
<base-chart id="line" class="chart chart-line" <base-chart id="line" class="chartjs chart chart-line"
[legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Line')" [labels]="labels.two" (chartClick)="changeData($event)"> [legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Line')" [labels]="labels.two" (chartClick)="changeData($event)">
</base-chart> </base-chart>
</ba-card> </ba-card>
</div> </div>
<div class="col-lg-4 col-md-12"> <div class="col-lg-4 col-md-12">
<ba-card title="Bars" baCardClass="with-scroll"> <ba-card title="Bars" baCardClass="with-scroll">
<base-chart id="bar" class="chart chart-bar" <base-chart id="bar" class="chartjs chart chart-bar"
[legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Bar')" [labels]="labels.two" (chartClick)="changeData($event)"> [legend]="false" [series]="series" [colours]="colours" [options]="options" [data]="data.three" [chartType]="chartType('Bar')" [labels]="labels.two" (chartClick)="changeData($event)">
</base-chart> </base-chart>
</ba-card> </ba-card>

7
src/app/pages/charts/components/chartJs/chartJs.scss
View file

@ -1,3 +1,8 @@
.chartjs {
display: block;
width: 100%;
}
.chart-legend, .chart-legend,
.bar-legend, .bar-legend,
.line-legend, .line-legend,
@ -16,6 +21,7 @@
padding-left: 0; padding-left: 0;
/* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */ /* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
} }
.chart-legend li, .chart-legend li,
.bar-legend li, .bar-legend li,
.line-legend li, .line-legend li,
@ -32,6 +38,7 @@
font-size: smaller; font-size: smaller;
cursor: default; cursor: default;
} }
.chart-legend li span, .chart-legend li span,
.bar-legend li span, .bar-legend li span,
.line-legend li span, .line-legend li span,

1
src/app/theme/sass/bootstrap-overrides/_card.scss
View file

@ -60,6 +60,7 @@ $card-header-font-size: 16px;
font-weight: $font-normal; font-weight: $font-normal;
text-transform: uppercase; text-transform: uppercase;
opacity: 0.9; opacity: 0.9;
font-size: $card-header-font-size;
//text-transform: uppercase; //text-transform: uppercase;
} }