Merge pull request #5282 from tsiegleauq/dynamic-bar-chart-aspect-ratio
Define chart height
This commit is contained in:
commit
04c625b3d5
@ -1,4 +1,4 @@
|
||||
<div class="charts-wrapper" [ngClass]="[hasPadding ? 'has-padding' : '']">
|
||||
<div class="charts-wrapper" [style.height]="calcBarChartHeight()">
|
||||
<canvas
|
||||
class="chart-js-canvas"
|
||||
*ngIf="chartData && chartData.length"
|
||||
|
@ -1,9 +1,6 @@
|
||||
.charts-wrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
|
||||
&.has-padding {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
@ -55,12 +55,6 @@ export class ChartsComponent extends BaseViewComponent {
|
||||
@Input()
|
||||
public labels: Label[];
|
||||
|
||||
/**
|
||||
* Determine, if the chart has some padding at the borders.
|
||||
*/
|
||||
@Input()
|
||||
public hasPadding = true;
|
||||
|
||||
/**
|
||||
* Show a legend
|
||||
*/
|
||||
@ -89,7 +83,8 @@ export class ChartsComponent extends BaseViewComponent {
|
||||
public get chartOptions(): ChartOptions {
|
||||
if (this.isCircle) {
|
||||
return {
|
||||
aspectRatio: 1,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
tooltips: {
|
||||
enabled: false
|
||||
},
|
||||
@ -99,7 +94,8 @@ export class ChartsComponent extends BaseViewComponent {
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
aspectRatio: 3,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
tooltips: {
|
||||
enabled: false
|
||||
},
|
||||
@ -145,6 +141,16 @@ export class ChartsComponent extends BaseViewComponent {
|
||||
super(title, translate, matSnackbar);
|
||||
}
|
||||
|
||||
public calcBarChartHeight(): string | undefined {
|
||||
if (!this.isCircle) {
|
||||
const baseHeight = 120;
|
||||
const perLabel = 60;
|
||||
return `${baseHeight + perLabel * this.labels.length}px`;
|
||||
} else {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
private progressInputData(inputChartData: ChartData): void {
|
||||
if (this.isCircle) {
|
||||
this.chartData = inputChartData.flatMap(chartDate => chartDate.data);
|
||||
|
@ -34,6 +34,6 @@
|
||||
|
||||
<!-- Chart -->
|
||||
<div class="doughnut-chart" *ngIf="showChart">
|
||||
<os-charts type="doughnut" [data]="chartData | async" [hasPadding]="false"></os-charts>
|
||||
<os-charts type="doughnut" [data]="chartData | async"></os-charts>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -25,7 +25,5 @@
|
||||
|
||||
.doughnut-chart {
|
||||
display: block;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
}
|
||||
|
@ -39,7 +39,6 @@
|
||||
*ngIf="chartDataSubject.value"
|
||||
[labels]="candidatesLabels"
|
||||
[data]="chartDataSubject | async"
|
||||
[hasPadding]="false"
|
||||
></os-charts>
|
||||
</div>
|
||||
|
||||
|
@ -1,11 +1,6 @@
|
||||
.assignment-result-wrapper {
|
||||
.chart-wrapper {
|
||||
margin-top: 2em;
|
||||
.pie-chart {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.named-result-table {
|
||||
|
@ -64,7 +64,6 @@
|
||||
routerLink="/assignments/polls/{{ poll.id }}"
|
||||
[labels]="candidatesLabels"
|
||||
[data]="chartDataSubject | async"
|
||||
[hasPadding]="false"
|
||||
></os-charts>
|
||||
</div>
|
||||
|
||||
|
@ -103,8 +103,6 @@ export class AssignmentPollService extends PollService {
|
||||
}
|
||||
|
||||
public generateTableData(poll: ViewAssignmentPoll | PollData): PollTableData[] {
|
||||
console.log('poll: ', poll);
|
||||
|
||||
const tableData: PollTableData[] = poll.options
|
||||
.sort((a, b) => {
|
||||
if (this.sortByVote) {
|
||||
|
@ -87,8 +87,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="doughnut-chart" [routerLink]="pollLink">
|
||||
<os-charts *ngIf="showChart" type="doughnut" [data]="chartDataSubject | async" [hasPadding]="false">
|
||||
</os-charts>
|
||||
<os-charts *ngIf="showChart" type="doughnut" [data]="chartDataSubject | async"></os-charts>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user