aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/app/_elements/_charts
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/app/_elements/_charts')
-rw-r--r--frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts43
1 files changed, 30 insertions, 13 deletions
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
index c2bd3262..cba5252a 100644
--- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
@@ -14,16 +14,16 @@ export class PieChartComponent implements AfterViewInit {
@Input()uniqueValuesPercent?: number[] = [];
updatePieChart(uniqueValues: string[], uniqueValuesPercent: number[]){
- console.log(this.uniqueValues, this.uniqueValuesPercent);
- const newPieChartData = {
- datasets: [{
- label: "Population (millions)",
- backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
- data: [2478,5267,734,784,433],
- }]
-
- }
- };
+ //console.log(this.uniqueValues, this.uniqueValuesPercent);
+ this.pieChartData.datasets = [{
+ label: "%",
+ backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"],
+ data: uniqueValuesPercent,
+ }];
+ this.pieChartData.labels = uniqueValues
+ console.log(this.uniqueValues, this.uniqueValuesPercent);
+ this.myChart?.update()
+ };
@ViewChild('piechart') chartRef!: ElementRef;
constructor() { }
@@ -33,13 +33,30 @@ export class PieChartComponent implements AfterViewInit {
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
- }]
+ }], labels : [""]
}
+ myChart?: Chart;
ngAfterViewInit(): void {
- const myChart = new Chart(this.chartRef.nativeElement, {
+ let rem = 100;
+ const percents : number[] = []
+ this.uniqueValuesPercent?.forEach(percent => {
+ rem-=percent*100;
+ percents.push(percent*100)
+
+ })
+ const data = {
+ datasets: [{
+ label: "%",
+ backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"],
+ data: [...percents, rem]
+ }], labels : [...this.uniqueValues!,"Ostalo"]
+ }
+
+ const myChart = new Chart(this.chartRef.nativeElement, {
type: 'pie',
- data: this.pieChartData,
+ data: data
+ ,
options: {
/*title: {
display: true,