From 650895a49c64b662979c16335f80c5f813be0f6b Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Wed, 11 May 2022 21:20:10 +0200 Subject: Korekcija... --- .../_charts/box-plot/box-plot.component.ts | 95 ++++++++++++++-------- 1 file changed, 63 insertions(+), 32 deletions(-) (limited to 'frontend/src/app/_elements/_charts/box-plot') diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts index 0b952392..1dd3354d 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts @@ -25,6 +25,7 @@ export class BoxPlotComponent implements AfterViewInit { @Input()q1?: number; @Input()q3?: number; + updateChart(min: number, max: number, q1: number, q3: number, median: number){ console.log(this.min, this.max); const newBoxPlotData = { @@ -41,11 +42,71 @@ export class BoxPlotComponent implements AfterViewInit { data: [ {min, q1, median, q3, max}/*, [0, 25, 51, 75, 99]*/ + ]}] }; + + const newOptionsTmp = { + + plugins:{ + legend: { + display: false + }, + }, + scales : { + x: { + ticks: { + color: '#dfd7d7' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + }, + y : { + min: this.min, + max: this.max, + ticks: { + color: '#dfd7d7' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + } + + } + }; Object.assign(this.boxplotData, newBoxPlotData); + Object.assign(this.options, newOptionsTmp); }; + options = { + plugins:{ + legend: { + display: false + }, + }, + scales : { + x: { + ticks: { + color: '#dfd7d7' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + }, + y : { + min: this.min, + max: this.max, + ticks: { + color: '#dfd7d7' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + } + } + } + @ViewChild('boxplot') chartRef!: ElementRef; constructor() { //this.updateChart(); @@ -53,7 +114,7 @@ export class BoxPlotComponent implements AfterViewInit { boxplotData = { // define label tree - labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/], + //labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/], datasets: [{ label: 'Dataset 1', backgroundColor: '#0063AB', @@ -94,37 +155,7 @@ export class BoxPlotComponent implements AfterViewInit { const myChart = new Chart(this.chartRef.nativeElement, { type: "boxplot", data: this.boxplotData, - options: { - /*title: { - display: true, - text: 'Predicted world population (millions) in 2050' - }*/ - plugins:{ - legend: { - display: false - }, - }, - scales : { - x: { - ticks: { - color: '#dfd7d7' - }, - grid: { - color: "rgba(0, 99, 171, 0.5)" - } - }, - y : { - min: -50, - max: 200, - ticks: { - color: '#dfd7d7' - }, - grid: { - color: "rgba(0, 99, 171, 0.5)" - } - } - } - } + options: this.options }); } -- cgit v1.2.3