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

update stats overview layout

pull/10/head
Florian Hartwich 2017-09-24 12:04:48 +02:00
parent d0161f18ff
commit 10d6f30781
4 changed files with 55 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/package.json
View File

@ -22,7 +22,7 @@
"@angular/platform-browser": "^4.3.2", "@angular/platform-browser": "^4.3.2",
"@angular/platform-browser-dynamic": "^4.3.2", "@angular/platform-browser-dynamic": "^4.3.2",
"@angular/router": "^4.3.2", "@angular/router": "^4.3.2",
"@swimlane/ngx-charts": "^6.0.1", "@swimlane/ngx-charts": "^6.0.2",
"@swimlane/ngx-datatable": "^10.2.3", "@swimlane/ngx-datatable": "^10.2.3",
"bootstrap": "^3.3.7", "bootstrap": "^3.3.7",
"core-js": "^2.4.1", "core-js": "^2.4.1",

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

@ -1,7 +1,13 @@
.slide-chart-container { .slide-chart-container {
width: 1200px; width: 90%;
min-width: 880px;
height: 750px;
margin: auto; margin: auto;
padding-left: 90px; padding-left: 6%;
}
:host /deep/ .carousel-indicators {
display: none;
} }
:host /deep/ .carousel-control { :host /deep/ .carousel-control {
@ -9,16 +15,17 @@
cursor: pointer; cursor: pointer;
} }
:host /deep/ .chart-legend{ :host /deep/ .chart-legend {
position: absolute; position: absolute;
margin-top: -60px; margin-top: -60px;
margin-left: -220px; margin-left: -220px;
} }
:host /deep/ .legend-label { :host /deep/ .chart-legend .legend-labels {
float: left; width: 200px;
} }
:host /deep/ .chart-legend .legend-label { :host /deep/ .chart-legend .legend-label {
float: left;
padding-left: 14px; padding-left: 14px;
} }

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

@ -10,23 +10,25 @@
(click)="goToSlide(1)">Spielerzahlen (click)="goToSlide(1)">Spielerzahlen
</div> </div>
<carousel [(activeSlide)]="activeSlideIndex"> <carousel [(activeSlide)]="activeSlideIndex">
<slide *ngIf="id != 'all'"> <slide *ngIf="id != 'all'">
<div class="slide-chart-container"> <div class="slide-chart-container">
<h3>Gesamtpunktzahl</h3> <h3>Gesamtpunktzahl</h3>
<ngx-charts-line-chart <ngx-charts-line-chart
[view]="[1200, 500]"
[scheme]="colorScheme" [scheme]="colorScheme"
[results]="pointSumData" [results]="pointSumData"
[gradient]="false" [gradient]="gradient"
[xAxis]="true" [xAxis]="xAxis"
[yAxis]="true" [yAxis]="yAxis"
[legend]="true" [legend]="legend"
[legendTitle]="''" [legendTitle]="legendTitle"
[showXAxisLabel]="true" [showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="true" [showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="'Gesamtpunkte'" [yAxisLabel]="'Gesamtpunkte'"
[autoScale]="true"> [autoScale]="autoscale"
[timeline]="timeline">
</ngx-charts-line-chart> </ngx-charts-line-chart>
</div> </div>
</slide> </slide>
@ -34,18 +36,18 @@
<div class="slide-chart-container"> <div class="slide-chart-container">
<h3>Punkte je Schlacht</h3> <h3>Punkte je Schlacht</h3>
<ngx-charts-line-chart <ngx-charts-line-chart
[view]="[1200, 500]"
[scheme]="colorScheme" [scheme]="colorScheme"
[results]="pointData" [results]="pointData"
[gradient]="false" [gradient]="gradient"
[xAxis]="true" [xAxis]="xAxis"
[yAxis]="true" [yAxis]="yAxis"
[legend]="true" [legend]="legend"
[legendTitle]="''" [legendTitle]="legendTitle"
[showXAxisLabel]="true" [showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="true" [showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="'Punkte'" [yAxisLabel]="'Punkte'"
[autoScale]="false"> [autoScale]="autoscale"
[timeline]="timeline">>
</ngx-charts-line-chart> </ngx-charts-line-chart>
</div> </div>
</slide> </slide>
@ -53,18 +55,18 @@
<div class="slide-chart-container"> <div class="slide-chart-container">
<h3>Spielerzahlen</h3> <h3>Spielerzahlen</h3>
<ngx-charts-line-chart <ngx-charts-line-chart
[view]="[1200, 500]"
[scheme]="colorScheme" [scheme]="colorScheme"
[results]="playerData" [results]="playerData"
[gradient]="false" [gradient]="gradient"
[xAxis]="true" [xAxis]="xAxis"
[yAxis]="true" [yAxis]="yAxis"
[legend]="true" [legend]="legend"
[legendTitle]="''" [legendTitle]="legendTitle"
[showXAxisLabel]="true" [showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="true" [showYAxisLabel]="showYAxisLabel"
[yAxisLabel]="'Anzahl Spieler'" [yAxisLabel]="'Anzahl Spieler'"
[autoScale]="true"> [autoScale]="autoscale"
[timeline]="timeline">
</ngx-charts-line-chart> </ngx-charts-line-chart>
</div> </div>
</slide> </slide>

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

@ -21,9 +21,21 @@ export class StatisticOverviewComponent {
pointSumData: any[] = []; pointSumData: any[] = [];
playerData: any[] = []; playerData: any[] = [];
colorScheme = { colorScheme = {
group: 'Ordinal',
domain: ['#0000FF', '#B22222'] domain: ['#0000FF', '#B22222']
}; };
gradient = false;
xAxis = true;
yAxis = true;
roundDomains = true;
legend = true;
legendTitle = '';
showXAxisLabel = true;
showYAxisLabel = true;
autoscale = true;
timeline = false;
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private campaignService: CampaignService) { private campaignService: CampaignService) {
@ -101,6 +113,7 @@ export class StatisticOverviewComponent {
]; ];
for (let i = wars.length - 1; i >= 0; i--) { for (let i = wars.length - 1; i >= 0; i--) {
let j = wars.length - i - 1; let j = wars.length - i - 1;
// const warDateString = new Date(wars[i].date); TODO: use ngx-chart timeline
const isoDate = wars[i].date.slice(0, 10); const isoDate = wars[i].date.slice(0, 10);
const dayDate = parseInt(isoDate.slice(8, 10)) + 1; const dayDate = parseInt(isoDate.slice(8, 10)) + 1;
const warDateString = (dayDate < 10 ? "0" + dayDate : dayDate) + '.' const warDateString = (dayDate < 10 ? "0" + dayDate : dayDate) + '.'