From 7c22e5d63216c7f3e6cb0d2120daa6dab674ee61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Mon, 10 Dec 2018 17:40:32 +0100
Subject: [PATCH] Implement 'getData'-function that gets necessary data to
display a chart
---
.../shared/statistic/statistic.component.html | 12 ++--
.../shared/statistic/statistic.component.ts | 59 +++++++++++++------
src/app/services/http/content.service.ts | 6 +-
3 files changed, 50 insertions(+), 27 deletions(-)
diff --git a/src/app/components/shared/statistic/statistic.component.html b/src/app/components/shared/statistic/statistic.component.html
index a6076eb0c..566198030 100644
--- a/src/app/components/shared/statistic/statistic.component.html
+++ b/src/app/components/shared/statistic/statistic.component.html
@@ -1,8 +1,10 @@
-<div fxLayout="column" fxLayoutGap="20px" fxLayoutAlign="center center">
+<div>
+ <div fxLayoutAlign="center center">
<h3>{{subject}}</h3>
- <div>
- <div style="display: block">
- <canvas id="chart"></canvas>
- </div>
+ </div>
+ <div>
+ <div style="display: block">
+ <canvas id="chart"></canvas>
</div>
+ </div>
</div>
diff --git a/src/app/components/shared/statistic/statistic.component.ts b/src/app/components/shared/statistic/statistic.component.ts
index 02a2f21a3..66530ca42 100644
--- a/src/app/components/shared/statistic/statistic.component.ts
+++ b/src/app/components/shared/statistic/statistic.component.ts
@@ -3,6 +3,7 @@ import { Chart } from 'chart.js';
import { ActivatedRoute } from '@angular/router';
import { Content } from '../../../models/content';
import { ContentService } from '../../../services/http/content.service';
+import { ContentChoice } from '../../../models/content-choice';
export class ContentStatistic {
content: Content;
@@ -30,8 +31,8 @@ export class StatisticComponent implements OnInit {
chart = [];
colors: string[] = ['rgba(33,150,243, 0.8)', 'rgba(76,175,80, 0.8)', 'rgba(255,235,59, 0.8)', 'rgba(244,67,54, 0.8)',
'rgba(96,125,139, 0.8)', 'rgba(63,81,181, 0.8)', 'rgba(233,30,99, 0.8)', 'rgba(121,85,72, 0.8)'];
- labels: string[] = ['a', 'b', 'c', 'd'];
- data: number[] = [12, 30, 43, 32];
+ labels: string[];
+ data: number[];
stats: ContentStatistic;
contentId: string;
subject: string;
@@ -40,28 +41,48 @@ export class StatisticComponent implements OnInit {
private contentService: ContentService) { }
ngOnInit() {
+ this.labels = new Array<string>();
+ this.data = new Array<number>();
this.route.params.subscribe(params => {
this.contentId = params['contentId'];
});
- this.contentService.getContent(this.contentId).subscribe(content => {
- this.subject = content.subject;
+ this.contentService.getChoiceContent(this.contentId).subscribe(content => {
+ this.getData(content);
});
- this.chart = new Chart('chart', {
- type: 'bar',
- data: {
- labels: this.labels,
- datasets: [{
- data: this.data,
- backgroundColor: this.colors
- }]
- },
- options: {
- title: this.subject,
- legend: {
- display: false
+ }
+
+ getData(content: ContentChoice) {
+ this.subject = content.subject;
+ const length = content.options.length;
+ for (let i = 0; i < length; i++) {
+ this.labels[i] = content.options[i].label;
+ }
+ this.contentService.getAnswer(content.id).subscribe(answer => {
+ this.data = answer.roundStatistics[0].independentCounts;
+ this.chart = new Chart('chart', {
+ type: 'bar',
+ data: {
+ labels: this.labels,
+ datasets: [{
+ data: this.data,
+ backgroundColor: this.colors
+ }]
},
- responsive: true
- }
+ options: {
+ legend: {
+ display: false
+ },
+ responsive: true,
+ scales: {
+ yAxes: [{
+ ticks: {
+ beginAtZero: true,
+ precision: 0
+ }
+ }]
+ }
+ }
+ });
});
}
}
diff --git a/src/app/services/http/content.service.ts b/src/app/services/http/content.service.ts
index 639557ff9..04f53433d 100644
--- a/src/app/services/http/content.service.ts
+++ b/src/app/services/http/content.service.ts
@@ -34,11 +34,11 @@ export class ContentService extends BaseHttpService {
);
}
- getContent(id: string): Observable<Content> {
+ getChoiceContent(id: string): Observable<ContentChoice> {
const connectionUrl = this.apiUrl.base + this.apiUrl.content + '/' + id;
- return this.http.get<Content>(connectionUrl).pipe(
+ return this.http.get<ContentChoice>(connectionUrl).pipe(
tap(() => ''),
- catchError(this.handleError<Content>('getRoom by id: ' + id))
+ catchError(this.handleError<ContentChoice>('getRoom by id: ' + id))
);
}
--
GitLab