Choose between ChartType
This commit is contained in:
parent
9a186fce5a
commit
b71513a74b
@ -1,11 +1,17 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<app-navigation-link-list #navLinkList [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
|
<app-navigation-link-list #navLinkList [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
|
||||||
<mat-form-field style="width: 100%">
|
<mat-form-field style="width: 90%">
|
||||||
<mat-label>Toppings</mat-label>
|
<mat-label>Toppings</mat-label>
|
||||||
<mat-select [(ngModel)]="selectedTaskgroupPath" (ngModelChange)="updateSerieSelection()">
|
<mat-select [(ngModel)]="selectedTaskgroupPath" (ngModelChange)="updateSerieSelection()">
|
||||||
<mat-option *ngFor="let topping of taskgroupPaths" [value]="topping">{{topping.taskgroupPath}}</mat-option>
|
<mat-option *ngFor="let topping of taskgroupPaths" [value]="topping">{{topping.taskgroupPath}}</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
<mat-form-field style="width: 10%;">
|
||||||
|
<mat-label>Toppings</mat-label>
|
||||||
|
<mat-select [(ngModel)]="selectedChartype" (ngModelChange)="updateSerieSelection()">
|
||||||
|
<mat-option *ngFor="let topping of availableChartTypes" [value]="topping">{{topping}}</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
|
|
||||||
<div style="text-align:center">
|
<div style="text-align:center">
|
||||||
<apx-chart
|
<apx-chart
|
||||||
|
@ -7,7 +7,7 @@ import {
|
|||||||
ApexAxisChartSeries,
|
ApexAxisChartSeries,
|
||||||
ApexChart,
|
ApexChart,
|
||||||
ApexXAxis,
|
ApexXAxis,
|
||||||
ApexTitleSubtitle
|
ApexTitleSubtitle, ChartType
|
||||||
} from "ng-apexcharts";
|
} from "ng-apexcharts";
|
||||||
import {timeInterval} from "rxjs";
|
import {timeInterval} from "rxjs";
|
||||||
import {FormControl} from "@angular/forms";
|
import {FormControl} from "@angular/forms";
|
||||||
@ -41,7 +41,8 @@ export class TaskgroupActivityComponent implements OnInit{
|
|||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
selectedChartype: string = "bar";
|
||||||
|
availableChartTypes: string[] = ["bar", "line", "area"]
|
||||||
selectedTaskgroupPath: TaskgroupPathInfo | undefined
|
selectedTaskgroupPath: TaskgroupPathInfo | undefined
|
||||||
taskgroupPaths: TaskgroupPathInfo[] = []
|
taskgroupPaths: TaskgroupPathInfo[] = []
|
||||||
sliderControl: FormControl = new FormControl()
|
sliderControl: FormControl = new FormControl()
|
||||||
@ -109,12 +110,13 @@ export class TaskgroupActivityComponent implements OnInit{
|
|||||||
}
|
}
|
||||||
|
|
||||||
generateChartOptions(): Partial<ChartOptions> {
|
generateChartOptions(): Partial<ChartOptions> {
|
||||||
|
|
||||||
return {
|
return {
|
||||||
series: this.generateSeries(),
|
series: this.generateSeries(),
|
||||||
chart: {
|
chart: {
|
||||||
height: 350,
|
height: 350,
|
||||||
type: "bar",
|
type: this.selectedChartype as ChartType,
|
||||||
stacked: false
|
stacked: true
|
||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
text: ""
|
text: ""
|
||||||
|
Loading…
Reference in New Issue
Block a user