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-dynamic": "^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",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",

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

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

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

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

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

@ -21,9 +21,21 @@ export class StatisticOverviewComponent {
pointSumData: any[] = [];
playerData: any[] = [];
colorScheme = {
group: 'Ordinal',
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,
private campaignService: CampaignService) {
@ -101,6 +113,7 @@ export class StatisticOverviewComponent {
];
for (let i = wars.length - 1; i >= 0; i--) {
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 dayDate = parseInt(isoDate.slice(8, 10)) + 1;
const warDateString = (dayDate < 10 ? "0" + dayDate : dayDate) + '.'