-
-
-
-
+
+
diff --git a/client/src/app/shared/components/charts/charts.component.scss b/client/src/app/shared/components/charts/charts.component.scss
index f740fde6b..e1e0e6aee 100644
--- a/client/src/app/shared/components/charts/charts.component.scss
+++ b/client/src/app/shared/components/charts/charts.component.scss
@@ -7,9 +7,3 @@
padding: 16px;
}
}
-
-@for $i from 1 through 100 {
- .os-charts--#{$i} {
- width: unquote($string: $i + '%');
- }
-}
diff --git a/client/src/app/shared/components/charts/charts.component.ts b/client/src/app/shared/components/charts/charts.component.ts
index 2dab09785..dd6754404 100644
--- a/client/src/app/shared/components/charts/charts.component.ts
+++ b/client/src/app/shared/components/charts/charts.component.ts
@@ -1,26 +1,17 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { MatSnackBar } from '@angular/material';
import { Title } from '@angular/platform-browser';
import { TranslateService } from '@ngx-translate/core';
import { ChartOptions } from 'chart.js';
import { Label } from 'ng2-charts';
-import { Observable } from 'rxjs';
import { BaseViewComponent } from 'app/site/base/base-view';
/**
* The different supported chart-types.
*/
-export type ChartType = 'line' | 'bar' | 'pie' | 'doughnut' | 'horizontalBar' | 'stackedBar';
-
-/**
- * Describes the events the chart is fired, when hovering or clicking on it.
- */
-interface ChartEvent {
- event: MouseEvent;
- active: {}[];
-}
+export type ChartType = 'doughnut' | 'pie' | 'horizontalBar';
/**
* One single collection in an array.
@@ -39,8 +30,6 @@ export interface ChartDate {
*/
export type ChartData = ChartDate[];
-export type ChartLegendSize = 'small' | 'middle';
-
/**
* Wrapper for the chart-library.
*
@@ -54,75 +43,17 @@ export type ChartLegendSize = 'small' | 'middle';
})
export class ChartsComponent extends BaseViewComponent {
/**
- * Sets the data as an observable.
- *
- * The data is prepared and splitted to dynamic use of bar/line or doughnut/pie chart.
+ * The type of the chart.
*/
@Input()
- public set data(dataObservable: Observable
) {
- this.subscriptions.push(
- dataObservable.subscribe(data => {
- if (!data) {
- return;
- }
- data = data.flatMap((date: ChartDate) => ({ ...date, data: date.data.filter(value => value >= 0) }));
- this.chartData = data;
- this.circleData = data.flatMap((date: ChartDate) => date.data);
- this.circleLabels = data.map(date => date.label);
- const circleColors = [
- {
- backgroundColor: data.map(date => date.backgroundColor).filter(color => !!color),
- hoverBackgroundColor: data.map(date => date.hoverBackgroundColor).filter(color => !!color)
- }
- ];
- this.circleColors = !!circleColors[0].backgroundColor.length ? circleColors : null;
- this.checkAndUpdateChartType();
- this.cd.detectChanges();
- })
- );
- }
-
- /**
- * The type of the chart. Defaults to `'bar'`.
- */
- @Input()
- public set type(type: ChartType) {
- this._type = type;
- this.checkAndUpdateChartType();
- this.cd.detectChanges();
- }
-
- public get type(): ChartType {
- return this._type;
- }
-
- @Input()
- public set chartLegendSize(size: ChartLegendSize) {
- this._chartLegendSize = size;
- this.setupChartLegendSize();
- }
-
- /**
- * Whether to show the legend.
- */
- @Input()
- public showLegend = true;
+ public type: ChartType = 'horizontalBar';
/**
* The labels for the separated sections.
* Each label represent one section, e.g. one year.
*/
@Input()
- public labels: Label[] = [];
-
- /**
- * Sets the position of the legend.
- * Defaults to `'top'`.
- */
- @Input()
- public set legendPosition(position: Chart.PositionType) {
- this.chartOptions.legend.position = position;
- }
+ public labels: Label[];
/**
* Determine, if the chart has some padding at the borders.
@@ -131,121 +62,70 @@ export class ChartsComponent extends BaseViewComponent {
public hasPadding = true;
/**
- * Optional passing a number as percentage value for `max-width`.
- * Range from 1 to 100.
- * Defaults to `100`.
+ * Show a legend
*/
@Input()
- public set size(size: number) {
- if (size > 100) {
- size = 100;
- }
- if (size < 1) {
- size = 1;
- }
- this._size = size;
- }
-
- public get size(): number {
- return this._size;
- }
+ public legend = false;
/**
- * Fires an event, when the user clicks on the chart.
+ * Required since circle charts demand SingleDataSet-Objects
*/
- @Output()
- public select = new EventEmitter();
-
- /**
- * Fires an event, when the user hovers over the chart.
- */
- @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;
- }
+ public circleColors: { backgroundColor?: string[]; hoverBackgroundColor?: string[] }[];
/**
* The general data for the chart.
* This is only needed for `type == 'bar' || 'line'`
*/
- public chartData: ChartData = [];
+ public chartData: ChartData;
- /**
- * The data for circle-like charts, like 'doughnut' or 'pie'.
- */
- public circleData: number[] = [];
-
- /**
- * The labels for circle-like charts, like 'doughnut' or 'pie'.
- */
- public circleLabels: Label[] = [];
-
- /**
- * The colors for circle-like charts, like 'doughnut' or 'pie'.
- */
- public circleColors: { backgroundColor?: string[]; hoverBackgroundColor?: string[] }[] = [];
+ @Input()
+ public set data(inputData: ChartData) {
+ this.progressInputData(inputData);
+ }
/**
* The options used for the charts.
*/
- public chartOptions: ChartOptions = {
- responsive: true,
- legend: {
- position: 'top',
- labels: {}
- },
- scales: {
- xAxes: [
- {
- gridLines: {
- drawOnChartArea: false
- },
- ticks: { beginAtZero: true, stepSize: 1 },
- stacked: true
+ public get chartOptions(): ChartOptions {
+ if (this.isCircle) {
+ return {
+ aspectRatio: 1,
+ legend: {
+ position: 'left'
}
- ],
- yAxes: [
- {
- gridLines: {
- drawBorder: false,
- drawOnChartArea: false,
- drawTicks: false
- },
- ticks: { mirror: true, labelOffset: -20 },
- stacked: true
+ };
+ } else {
+ return {
+ aspectRatio: 3,
+ scales: {
+ xAxes: [
+ {
+ gridLines: {
+ drawOnChartArea: false
+ },
+ ticks: { beginAtZero: true, stepSize: 1 },
+ stacked: true
+ }
+ ],
+ yAxes: [
+ {
+ gridLines: {
+ drawBorder: false,
+ drawOnChartArea: false,
+ drawTicks: false
+ },
+ ticks: { mirror: true, labelOffset: -20 },
+ stacked: true
+ }
+ ]
}
- ]
+ };
}
- };
+ }
- /**
- * Chart option for pie and doughnut
- */
- @Input()
- public pieChartOptions: ChartOptions = {
- responsive: true,
- legend: {
- position: 'left'
- },
- aspectRatio: 1
- };
-
- /**
- * Holds the type of the chart - defaults to `bar`.
- */
- private _type: ChartType = 'bar';
-
- private _chartLegendSize: ChartLegendSize = 'middle';
-
- /**
- * Holds the value for `max-width`.
- */
- private _size = 100;
+ public get isCircle(): boolean {
+ return this.type === 'pie' || this.type === 'doughnut';
+ }
/**
* Constructor.
@@ -255,46 +135,29 @@ export class ChartsComponent extends BaseViewComponent {
* @param matSnackbar
* @param cd
*/
- public constructor(
- title: Title,
- protected translate: TranslateService,
- matSnackbar: MatSnackBar,
- private cd: ChangeDetectorRef
- ) {
+ public constructor(title: Title, translate: TranslateService, matSnackbar: MatSnackBar) {
super(title, translate, matSnackbar);
}
- private setupBar(): void {
- if (!this.chartData.every(date => date.barThickness && date.maxBarThickness)) {
- this.chartData = this.chartData.map(chartDate => ({
- ...chartDate,
- barThickness: 20,
- maxBarThickness: 48
- }));
+ private progressInputData(inputChartData: ChartData): void {
+ if (this.isCircle) {
+ this.chartData = inputChartData.flatMap(chartDate => chartDate.data);
+ this.circleColors = [
+ {
+ backgroundColor: inputChartData
+ .map(chartDate => chartDate.backgroundColor)
+ .filter(color => !!color),
+ hoverBackgroundColor: inputChartData
+ .map(chartDate => chartDate.hoverBackgroundColor)
+ .filter(color => !!color)
+ }
+ ];
+ } else {
+ this.chartData = inputChartData;
}
- }
- private setupChartLegendSize(): void {
- switch (this._chartLegendSize) {
- case 'small':
- this.chartOptions.legend.labels = Object.assign(this.chartOptions.legend.labels, {
- fontSize: 10,
- boxWidth: 20
- });
- break;
- case 'middle':
- this.chartOptions.legend.labels = {
- fontSize: 14,
- boxWidth: 40
- };
- }
- this.cd.detectChanges();
- }
-
- private checkAndUpdateChartType(): void {
- if (this._type === 'stackedBar') {
- this.setupBar();
- this._type = 'horizontalBar';
+ if (!this.labels) {
+ this.labels = inputChartData.map(chartDate => chartDate.label);
}
}
}
diff --git a/client/src/app/shared/components/motion-poll-detail-content/motion-poll-detail-content.component.html b/client/src/app/shared/components/motion-poll-detail-content/motion-poll-detail-content.component.html
index 992d78bac..92c73a2a0 100644
--- a/client/src/app/shared/components/motion-poll-detail-content/motion-poll-detail-content.component.html
+++ b/client/src/app/shared/components/motion-poll-detail-content/motion-poll-detail-content.component.html
@@ -34,6 +34,6 @@
-
+