From 2e17edafafd14b44e22af47db75e441e1dcd81b5 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 16:28:06 +0100
Subject: [PATCH] Try some colors and getting contentId from params
---
.../shared/statistic/statistic.component.html | 7 +--
.../shared/statistic/statistic.component.ts | 62 ++++++++++++++-----
2 files changed, 48 insertions(+), 21 deletions(-)
diff --git a/src/app/components/shared/statistic/statistic.component.html b/src/app/components/shared/statistic/statistic.component.html
index 5257bd5bd..8938fac37 100644
--- a/src/app/components/shared/statistic/statistic.component.html
+++ b/src/app/components/shared/statistic/statistic.component.html
@@ -1,10 +1,5 @@
<div>
<div style="display: block">
- <canvas baseChart
- [datasets]="chartData"
- [labels]="chartLabels"
- [options]="chartOptions"
- [legend]="chartLegend"
- [chartType]="chartType"></canvas>
+ <canvas id="chart"></canvas>
</div>
</div>
diff --git a/src/app/components/shared/statistic/statistic.component.ts b/src/app/components/shared/statistic/statistic.component.ts
index 3999507bb..07a59f5dd 100644
--- a/src/app/components/shared/statistic/statistic.component.ts
+++ b/src/app/components/shared/statistic/statistic.component.ts
@@ -1,4 +1,23 @@
import { Component, OnInit } from '@angular/core';
+import { Chart } from 'chart.js';
+import { ActivatedRoute } from '@angular/router';
+import { Content } from '../../../models/content';
+
+export class ContentStatistic {
+ content: Content;
+ contentId: string;
+ percent: number;
+ counts: number;
+ abstentions: number;
+
+ constructor(content: Content, contentId: string, percent: number, counts: number, abstentions: number) {
+ this.content = content;
+ this.contentId = contentId;
+ this.percent = percent;
+ this.counts = counts;
+ this.abstentions = abstentions;
+ }
+}
@Component({
selector: 'app-statistic',
@@ -7,23 +26,36 @@ import { Component, OnInit } from '@angular/core';
})
export class StatisticComponent implements OnInit {
- chartOptions = {
- scaleShowVerticalLines: false,
- responsive: true
- };
+ 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];
+ stats: ContentStatistic;
+ roomId: string;
- chartLabels = ['a', 'b', 'c', 'd'];
- chartType = 'bar';
- chartLegend = true;
-
- chartData = [
- { data: [12, 30, 43, 32], label: 'dataOne' },
- { data: [8, 20, 33, 12], label: 'dataTwo' }
- ];
-
- constructor() { }
+ constructor(protected route: ActivatedRoute) { }
ngOnInit() {
+ this.route.params.subscribe(params => {
+ this.roomId = params['contentId'];
+ });
+ console.log(this.roomId);
+ this.chart = new Chart('chart', {
+ type: 'bar',
+ data: {
+ labels: this.labels,
+ datasets: [{
+ data: this.data,
+ backgroundColor: this.colors
+ }]
+ },
+ options: {
+ legend: {
+ display: false
+ },
+ responsive: true
+ }
+ });
}
-
}
--
GitLab