diff --git a/client/src/app/shared/components/charts/charts.component.html b/client/src/app/shared/components/charts/charts.component.html index 7d1e49c2d..bf3bd225f 100644 --- a/client/src/app/shared/components/charts/charts.component.html +++ b/client/src/app/shared/components/charts/charts.component.html @@ -1,4 +1,4 @@ -
+
100) { + size = 100; + } + if (size < 1) { + size = 1; + } + this._size = size; + } + + public get size(): number { + return this._size; + } + /** * Fires an event, when the user clicks on the chart. */ @@ -135,6 +161,13 @@ export class ChartsComponent extends BaseViewComponent { @Output() public hover = new EventEmitter(); + /** + * Returns a string to append to the `chart-wrapper's` classes. + */ + public get classes(): string { + return 'os-charts os-charts--' + this.size; + } + /** * The general data for the chart. * This is only needed for `type == 'bar' || 'line'` @@ -191,6 +224,11 @@ export class ChartsComponent extends BaseViewComponent { private _chartLegendSize: ChartLegendSize = 'middle'; + /** + * Holds the value for `max-width`. + */ + private _size = 100; + /** * Constructor. * diff --git a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html index fdd283213..9744ef218 100644 --- a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html +++ b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.html @@ -47,58 +47,67 @@

Result

-
- - - {{ 'Candidates' | translate }} - {{ row.user }} - - - {{ 'Yes' | translate }} - {{ row.yes }} - +
+ + + {{ 'Candidates' | translate }} + {{ row.user }} + +
+ + {{ 'Yes' | translate }} + {{ row.yes }} + - - {{ 'No' | translate }} - {{ row.no }} - + + {{ 'No' | translate }} + {{ row.no }} + - - {{ 'Abstain' | translate }} - {{ row.abstain }} - + + {{ 'Abstain' | translate }} + {{ row.abstain }} + +
- - {{ 'Quorum' | translate }} - - +
+ + {{ 'Votes' | translate }} + {{ row.yes }} + +
- - -
+ + + - +
+ +
+
- + - {{ "User" | translate }} + {{ 'User' | translate }}
{{ row.user.getFullName() }}
-
{{ "Unknown user" | translate }}
+
{{ 'Unknown user' | translate }}
{{ option.user.getFullName() }}
-
{{ "Unknown user" | translate }}
+
{{ 'Unknown user' | translate }}
{{ row.votes[option.user_id] }} diff --git a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss index e69de29bb..21ea38d3b 100644 --- a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss +++ b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.scss @@ -0,0 +1,15 @@ +.chart-wrapper { + &.flex { + display: flex; + + .mat-table { + flex: 2; + .mat-column-votes { + justify-content: center; + } + } + .chart-inner-wrapper { + flex: 3; + } + } +} diff --git a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.ts b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.ts index e2607799a..4d2fb3411 100644 --- a/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.ts +++ b/client/src/app/site/assignments/components/assignment-poll-detail/assignment-poll-detail.component.ts @@ -26,11 +26,15 @@ export class AssignmentPollDetailComponent extends BasePollDetailComponent extends Ba /** * Sets the type of the shown chart, if votes are entered. */ - // public chartType = 'horizontalBar'; public abstract get chartType(): ChartType; /** @@ -123,12 +122,10 @@ export abstract class BasePollDetailComponent extends Ba } /** - * This changes the data for the chart depending on the switch in the detail-view. - * - * @param isChecked boolean, if the chart should show the amount of entered votes. + * Opens dialog for editing the poll */ - public changeChart(): void { - this.chartDataSubject.next(this.poll.generateChartData()); + public openDialog(): void { + this.pollDialog.openDialog(this.poll); } protected onDeleted(): void {} @@ -167,12 +164,20 @@ export abstract class BasePollDetailComponent extends Ba } } + /** + * Initializes data for the shown chart. + * Could be overwritten to implement custom chart data. + */ + protected initChartData(): void { + this.chartDataSubject.next(this.poll.generateChartData()); + } + /** * This checks, if the poll has votes. */ private checkData(): void { if (this.poll.state === 3 || this.poll.state === 4) { - setTimeout(() => this.chartDataSubject.next(this.poll.generateChartData())); + setTimeout(() => this.initChartData()); } } @@ -187,17 +192,9 @@ export abstract class BasePollDetailComponent extends Ba if (poll) { this.poll = poll; this.updateBreadcrumbs(); - this.checkData(); this.onPollLoaded(); - - // wait for options to be loaded - (function waitForOptions(): void { - if (!this.poll.options || !this.poll.options.length) { - setTimeout(waitForOptions.bind(this), 1); - } else { - this.onPollWithOptionsLoaded(); - } - }.call(this)); + this.waitForOptions(); + this.checkData(); } }) ); @@ -205,10 +202,14 @@ export abstract class BasePollDetailComponent extends Ba } /** - * Opens dialog for editing the poll + * Waits until poll's options are loaded. */ - public openDialog(): void { - this.pollDialog.openDialog(this.poll); + private waitForOptions(): void { + if (!this.poll.options || !this.poll.options.length) { + setTimeout(() => this.waitForOptions(), 1); + } else { + this.onPollWithOptionsLoaded(); + } } /**