hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

Add carousel for stats graphs

feature/user-self-management
Florian Hartwich 2017-09-02 13:08:54 +02:00
parent e6d1f7c5ba
commit 66244467a5
4 changed files with 93 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/src/app/app.module.ts
View File

@ -35,11 +35,11 @@ import {WarService} from "./services/war-service/war.service";
import {DataTableModule} from "angular2-datatable"; import {DataTableModule} from "angular2-datatable";
import {NgxChartsModule} from "@swimlane/ngx-charts"; import {NgxChartsModule} from "@swimlane/ngx-charts";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations"; import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {AccordionModule} from "ngx-bootstrap"; import {AccordionModule, CarouselModule} from "ngx-bootstrap";
@NgModule({ @NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule, appRouting, HttpModule, ClipboardModule, DataTableModule, imports: [BrowserModule, FormsModule, ReactiveFormsModule, appRouting, HttpModule, ClipboardModule, DataTableModule,
BrowserAnimationsModule, NgxChartsModule, AccordionModule.forRoot()], BrowserAnimationsModule, NgxChartsModule, AccordionModule.forRoot(), CarouselModule.forRoot()],
providers: [ providers: [
HttpClient, HttpClient,
LoginService, LoginService,

8
static/src/app/statistic/overview/stats-overview.component.css
View File

@ -1,3 +1,9 @@
.chart-container { .slide-chart-container {
width: 1200px; width: 1200px;
margin: auto;
}
:host /deep/ .carousel-control {
width: 5%;
cursor: pointer;
} }

134
static/src/app/statistic/overview/stats-overview.component.html
View File

@ -1,69 +1,71 @@
<h2>{{title}}</h2> <h2 style="margin-bottom: 20px">{{title}}</h2>
<h3>Gesamtpunktzahl</h3>
<div class="chart-container">
<ngx-charts-line-chart
[view]="[1050, 350]"
[scheme]="colorScheme"
[results]="pointSumData"
[gradient]="false"
[xAxis]="true"
[yAxis]="true"
[legend]="true"
[legendTitle]="''"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
[xAxisLabel]="'Schlachtdatum'"
[yAxisLabel]="'Gesamtpunkte'"
[autoScale]="true"
(select)="onSelect($event)">
</ngx-charts-line-chart>
<div class="btn btn-default" [style.background]="activeSlideIndex === 2 ? '#d9edf7':'white'"
(click)="goToSlide(2)" *ngIf="id != 'all'">Gesamtpunktzahl
</div>
<div class="btn btn-default" [style.background]="activeSlideIndex === 0 ? '#d9edf7':'white'"
(click)="goToSlide(0)">Punkte je Schlacht
</div>
<div class="btn btn-default" [style.background]="activeSlideIndex === 1 ? '#d9edf7':'white'"
(click)="goToSlide(1)">Spielerzahlen
</div> </div>
<h3 style="padding-top: 300px;">Punkte je Schlacht</h3> <carousel [(activeSlide)]="activeSlideIndex">
<slide *ngIf="id != 'all'">
<div class="chart-container"> <div class="slide-chart-container">
<h3>Gesamtpunktzahl</h3>
<ngx-charts-line-chart <ngx-charts-line-chart
[view]="[1050, 350]" [view]="[1200, 500]"
[scheme]="colorScheme" [scheme]="colorScheme"
[results]="pointData" [results]="pointSumData"
[gradient]="false" [gradient]="false"
[xAxis]="true" [xAxis]="true"
[yAxis]="true" [yAxis]="true"
[legend]="true" [legend]="true"
[legendTitle]="''" [legendTitle]="''"
[showXAxisLabel]="true" [showXAxisLabel]="true"
[showYAxisLabel]="true" [showYAxisLabel]="true"
[xAxisLabel]="'Schlachtdatum'" [yAxisLabel]="'Gesamtpunkte'"
[yAxisLabel]="'Punkte'" [autoScale]="true">
[autoScale]="false"> </ngx-charts-line-chart>
</ngx-charts-line-chart> </div>
</slide>
</div> <slide>
<div class="slide-chart-container">
<h3 style="padding-top: 300px;">Spielerzahlen</h3> <h3>Punkte je Schlacht</h3>
<ngx-charts-line-chart
<div class="chart-container"> [view]="[1200, 500]"
[scheme]="colorScheme"
<ngx-charts-line-chart [results]="pointData"
[view]="[1050, 350]" [gradient]="false"
[scheme]="colorScheme" [xAxis]="true"
[results]="playerData" [yAxis]="true"
[gradient]="false" [legend]="true"
[xAxis]="true" [legendTitle]="''"
[yAxis]="true" [showXAxisLabel]="true"
[legend]="true" [showYAxisLabel]="true"
[legendTitle]="''" [yAxisLabel]="'Punkte'"
[showXAxisLabel]="true" [autoScale]="false">
[showYAxisLabel]="true" </ngx-charts-line-chart>
[xAxisLabel]="'Schlachtdatum'" </div>
[yAxisLabel]="'Anzahl Spieler'" </slide>
[autoScale]="true" <slide>
(select)="onSelect($event)"> <div class="slide-chart-container">
</ngx-charts-line-chart> <h3>Spielerzahlen</h3>
<ngx-charts-line-chart
</div> [view]="[1200, 500]"
[scheme]="colorScheme"
[results]="playerData"
[gradient]="false"
[xAxis]="true"
[yAxis]="true"
[legend]="true"
[legendTitle]="''"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
[yAxisLabel]="'Anzahl Spieler'"
[autoScale]="true">
</ngx-charts-line-chart>
</div>
</slide>
</carousel>

23
static/src/app/statistic/overview/stats-overview.component.ts
View File

@ -1,17 +1,21 @@
import {Component} from "@angular/core"; import {Component} from "@angular/core";
import {WarService} from "../../services/war-service/war.service"; import {WarService} from "../../services/war-service/war.service";
import {ActivatedRoute} from "@angular/router"; import {ActivatedRoute} from "@angular/router";
import {CarouselConfig} from "ngx-bootstrap";
@Component({ @Component({
selector: 'stats-overview', selector: 'stats-overview',
templateUrl: './stats-overview.component.html', templateUrl: './stats-overview.component.html',
styleUrls: ['./stats-overview.component.css'], styleUrls: ['./stats-overview.component.css'],
inputs: ['campaigns'] inputs: ['campaigns'],
providers: [{provide: CarouselConfig, useValue: {interval: false}}]
}) })
export class StatisticOverviewComponent { export class StatisticOverviewComponent {
id = "";
title = ""; title = "";
activeSlideIndex: number = 0;
pointData: any[] = []; pointData: any[] = [];
pointSumData: any[] = []; pointSumData: any[] = [];
@ -29,24 +33,25 @@ export class StatisticOverviewComponent {
this.route.params this.route.params
.map(params => params['id']) .map(params => params['id'])
.subscribe((id) => { .subscribe((id) => {
this.id = id;
if (this.warService.campaigns) { if (this.warService.campaigns) {
this.initWars(this.warService.campaigns, id); this.initWars(this.warService.campaigns);
} else { } else {
this.warService.getAllCampaigns().subscribe(campaigns => { this.warService.getAllCampaigns().subscribe(campaigns => {
this.initWars(campaigns, id); this.initWars(campaigns);
}) })
} }
}); });
} }
initWars(campaigns, id) { initWars(campaigns) {
let wars = []; let wars = [];
let itemsProcessed = 0; let itemsProcessed = 0;
campaigns = campaigns.filter(campaign => id === 'all' || campaign._id === id); campaigns = campaigns.filter(campaign => this.id === 'all' || campaign._id === this.id);
campaigns.forEach(campaign => { campaigns.forEach(campaign => {
if (id === 'all') { if (this.id === 'all') {
this.title = "Gesamtübersicht" this.title = "Gesamtübersicht";
} else { } else {
this.title = campaign.title this.title = campaign.title
} }
@ -58,6 +63,10 @@ export class StatisticOverviewComponent {
}) })
} }
goToSlide(index: number) {
this.activeSlideIndex = index;
}
initChart(wars: any[]) { initChart(wars: any[]) {
let pointsObj = [ let pointsObj = [
{ {