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

first bunch of chart.js charts with ba-card

Browse source
This commit is contained in:
nixa 2016-05-03 14:58:57 +03:00
parent 0c416a6d3e
commit b252145bb0
2 changed files with 29 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,11 +16,12 @@ import {chartColors} from "../../../../theme/theme.constants";
template: require('./chartJs.html'), template: require('./chartJs.html'),
}) })
export class ChartJs { export class ChartJs {
public pieLabels = ["Sleeping", "Designing", "Coding", "Cycling"];
public pieChartType = 'Pie'; public labels = ["Sleeping", "Designing", "Coding", "Cycling"];
public pieData = [20, 40, 5, 35]; public data = [20, 40, 5, 35];
public pieColours = chartColors; public colours = chartColors;
public pieOptions = { public options = {
scaleShowLabelBackdrop : false,
segmentShowStroke : false, segmentShowStroke : false,
// responsive: true, // responsive: true,
scaleFontColor: "rgba(255,255,255,.7)", scaleFontColor: "rgba(255,255,255,.7)",
@ -31,16 +32,16 @@ export class ChartJs {
constructor(private _chartJsService:ChartJsService) { constructor(private _chartJsService:ChartJsService) {
} }
ngAfterViewInit() { chartType(type) {
return type;
} }
pieChangeData () { changeData ($event) {
let shuffle = (o) => { let shuffle = (o) => {
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x){} for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x){}
return o; return o;
}; };
this.pieData = shuffle(this.pieData); this.data = shuffle(this.data);
} }
} }

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

@ -1,9 +1,25 @@
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4">
<div ba-panel ba-panel-title="Pie"> <ba-card title="Pie" baCardClass="medium-card">
<base-chart class="chart chart-pie" <base-chart class="chart chart-pie"
[legend]="true" [colours]="pieColours" [options]="pieOptions" [data]="pieData" [chartType]="pieChartType" [labels]="pieLabels" (chartClick)="pieChangeData($event)"> [legend]="true" [colours]="colours" [options]="options" [data]="data" [chartType]="chartType('Pie')" [labels]="labels" (chartClick)="changeData($event)">
</base-chart> </base-chart>
</div> </ba-card>
</div>
<div class="col-md-4">
<ba-card title="Doughnut" baCardClass="medium-card">
<base-chart class="doughnut chart-doughnut"
[legend]="true" [colours]="colours" [options]="options" [data]="data" [chartType]="chartType('Doughnut')" [labels]="labels" (chartClick)="changeData($event)">
</base-chart>
</ba-card>
</div>
<div class="col-md-4">
<ba-card title="Polar" baCardClass="medium-card">
<base-chart class="polar chart-polar"
[legend]="true" [colours]="colours" [options]="options" [data]="data" [chartType]="chartType('PolarArea')" [labels]="labels" (chartClick)="changeData($event)">
</base-chart>
</ba-card>
</div> </div>
</div> </div>