From 6aba6287a85492295ba5de0a0cc6501d492a3676 Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Thu, 19 May 2022 19:48:07 +0200 Subject: Grafici korekcija --- .../_elements/_charts/box-plot/box-plot.component.ts | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) (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 bf5e3fd6..07976da3 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 @@ -28,10 +28,28 @@ export class BoxPlotComponent implements AfterViewInit { updateChart(min: number, max: number, q1: number, q3: number, median: number) { if (this.myChart) { this.boxplotData.datasets[0].data = [[min, q1, median, q3, max]] - this.myChart.update(); + this.myChart?.update(); } + /*this.boxplotData.datasets = [{ + data: [[min, q1, median, q3, max]], + }]*/ + }; + /* + updatePieChart(uniqueValues: string[], uniqueValuesPercent: number[]){ + //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('boxplot') chartRef!: ElementRef; constructor() { //this.updateChart(); -- cgit v1.2.3 From f51b5e2de9e29a0a3ab998f335c110131cb40ce7 Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Thu, 19 May 2022 22:15:28 +0200 Subject: Popravljen box-plot. --- .../_charts/box-plot/box-plot.component.ts | 70 ++++++++++------------ .../column-table/column-table.component.ts | 29 +-------- 2 files changed, 32 insertions(+), 67 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 07976da3..b3d25280 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 @@ -16,25 +16,16 @@ Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale); }) export class BoxPlotComponent implements AfterViewInit { - @Input() width?: number; - @Input() height?: number; - @Input() mean?: number; - @Input() median?: number; - @Input() min?: number; - @Input() max?: number; - @Input() q1?: number; - @Input() q3?: number; + @Input() width!: number; + @Input() height!: number; + @Input() mean!: number; + @Input() median!: number; + @Input() min!: number; + @Input() max!: number; + @Input() q1!: number; + @Input() q3!: number; - updateChart(min: number, max: number, q1: number, q3: number, median: number) { - if (this.myChart) { - this.boxplotData.datasets[0].data = [[min, q1, median, q3, max]] - this.myChart?.update(); - } - /*this.boxplotData.datasets = [{ - data: [[min, q1, median, q3, max]], - }]*/ - - }; + /* updatePieChart(uniqueValues: string[], uniqueValuesPercent: number[]){ @@ -55,27 +46,29 @@ export class BoxPlotComponent implements AfterViewInit { //this.updateChart(); } - boxplotData = { - // define label tree - //labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/], - datasets: [{ - label: 'Dataset 1', - backgroundColor: '#0063AB', - borderColor: '#dfd7d7', - borderWidth: 1, - outlierColor: '#999999', - scaleFontColor: '#0063AB', - padding: 10, - itemRadius: 0, - data: [ - randomValues(100, 0, 100), - ] - }] - }; + ngAfterViewInit(): void { - this.myChart = new Chart(this.chartRef.nativeElement, { + const boxplotData = { + // define label tree + //labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/], + labels:[""], + datasets: [{ + label: 'Dataset 1', + backgroundColor: '#0063AB', + borderColor: '#dfd7d7', + borderWidth: 1, + outlierColor: '#999999', + scaleFontColor: '#0063AB', + padding: 10, + itemRadius: 0, + data: [ + {min:this.min,q1:this.q1,q3:this.q3,median:this.median,max:this.max,mean:this.mean} + ] + }] + }; + const myChart = new Chart(this.chartRef.nativeElement, { type: "boxplot", - data: this.boxplotData, + data: boxplotData, options: { plugins: { legend: { @@ -92,8 +85,6 @@ export class BoxPlotComponent implements AfterViewInit { } }, y: { - min: this.min, - max: this.max, ticks: { color: '#dfd7d7' }, @@ -106,5 +97,4 @@ export class BoxPlotComponent implements AfterViewInit { }); } - myChart?: Chart; } diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index 694b1a83..fa418e23 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -78,34 +78,9 @@ export class ColumnTableComponent implements AfterViewInit { } - updateCharts() { - //min: number, max: number, q1: number, q3: number, median: number - let i = 0; - this.boxplotComp.changes.subscribe(() => { - const bps = this.boxplotComp.toArray(); - this.dataset?.columnInfo.forEach((colInfo, index) => { - if (this.experiment.columnTypes[index] == ColumnType.numerical) { - bps[i].updateChart(colInfo!.min, colInfo.max, colInfo.q1, colInfo.q3, colInfo.median); - i++; - } - }); - }); - } + + - updatePieChart() { - //min: number, max: number, q1: number, q3: number, median: number - let i = 0; - const pieChart = this.piechartComp.toArray(); - console.log(pieChart) - this.dataset?.columnInfo.forEach((colInfo, index) => { - console.log(i) - if (this.experiment.columnTypes[index] == ColumnType.categorical) { - console.log("prosao IF") - pieChart[i].updatePieChart(colInfo!.uniqueValues, colInfo.uniqueValuesPercent); - i++; - } - }); - } loadDataset(dataset: Dataset) { console.log("LOADED DATASET"); -- cgit v1.2.3 From 05aaef1e6fc0431206994b0fc18d470a84e650c1 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Fri, 20 May 2022 02:25:15 +0200 Subject: Popravio tooltipove chartova tako da nisu odseceni unutar kolona. --- .../_charts/box-plot/box-plot.component.html | 2 +- .../_charts/line-chart/line-chart.component.html | 4 +- .../_charts/pie-chart/pie-chart.component.html | 2 +- .../column-table/column-table.component.css | 4 +- frontend/src/app/app.component.ts | 114 ++++++++++++++++++++- frontend/src/styles/helper.css | 8 ++ 6 files changed, 127 insertions(+), 7 deletions(-) (limited to 'frontend/src/app/_elements/_charts/box-plot') diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html index 688eafae..3b2bf976 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html @@ -1,3 +1,3 @@ -
+
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html index d48212cd..1c711562 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html @@ -1,4 +1,4 @@ -
- +
+
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html index 7faf3af0..fe3998ff 100644 --- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html @@ -1,3 +1,3 @@ -
+
\ No newline at end of file diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index 311773f7..40ae3c05 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -13,7 +13,7 @@ table.fixed { } table.fixed td { - overflow: hidden; + /* overflow: hidden; */ max-width: 200px; min-width: 200px; vertical-align: middle; @@ -21,7 +21,7 @@ table.fixed td { } table.fixed th { - overflow: hidden; + /* overflow: hidden; */ max-width: 250px; min-width: 120px; vertical-align: middle; diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index e301b46f..5660f676 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -6,6 +6,7 @@ import { AuthService } from './_services/auth.service'; import { SignalRService } from './_services/signal-r.service'; import { HttpClient } from '@angular/common/http'; import Shared from './Shared'; +import { Chart } from 'chart.js'; @Component({ selector: 'app-root', templateUrl: './app.component.html', @@ -14,6 +15,117 @@ import Shared from './Shared'; export class AppComponent implements OnInit, AfterViewInit { constructor(private router: Router, private titleService: Title, private authService: AuthService, private signalRService: SignalRService, private http: HttpClient) { + const getOrCreateTooltip = (chart: { canvas: { parentNode: { querySelector: (arg0: string) => any; appendChild: (arg0: any) => void; }; }; }) => { + let tooltipEl = chart.canvas.parentNode.querySelector('div'); + + if (!tooltipEl) { + tooltipEl = document.createElement('div'); + tooltipEl.style.background = 'rgba(0, 0, 0, 0.7)'; + tooltipEl.style.borderRadius = '3px'; + tooltipEl.style.color = 'white'; + tooltipEl.style.opacity = 1; + tooltipEl.style.pointerEvents = 'none'; + tooltipEl.style.position = 'absolute'; + tooltipEl.style.transform = 'translate(-50%, 0)'; + tooltipEl.style.transition = 'all .1s ease'; + tooltipEl.style.zIndex = 9000; + + tooltipEl.classList.add("clearfix"); + + const table = document.createElement('table'); + table.style.margin = '0px'; + + tooltipEl.appendChild(table); + chart.canvas.parentNode.appendChild(tooltipEl); + } + + return tooltipEl; + }; + + const externalTooltipHandler = (context: { chart: any; tooltip: any; }) => { + // Tooltip Element + const { chart, tooltip } = context; + const tooltipEl = getOrCreateTooltip(chart); + + // Hide if no tooltip + if (tooltip.opacity === 0) { + tooltipEl.style.opacity = 0; + return; + } + + // Set Text + if (tooltip.body) { + const titleLines = tooltip.title || []; + const bodyLines = tooltip.body.map((b: { lines: any; }) => b.lines); + + const tableHead = document.createElement('thead'); + + titleLines.forEach((title: string) => { + const tr = document.createElement('tr'); + tr.style.borderWidth = '' + 0; + + const th = document.createElement('th'); + th.style.borderWidth = '' + 0; + const text = document.createTextNode(title); + + th.appendChild(text); + tr.appendChild(th); + tableHead.appendChild(tr); + }); + + const tableBody = document.createElement('tbody'); + bodyLines.forEach((body: string, i: string | number) => { + const colors = tooltip.labelColors[i]; + + const span = document.createElement('span'); + span.style.background = colors.backgroundColor; + span.style.borderColor = colors.borderColor; + span.style.borderWidth = '2px'; + span.style.marginRight = '10px'; + span.style.height = '10px'; + span.style.width = '10px'; + span.style.display = 'inline-block'; + + const tr = document.createElement('tr'); + tr.style.backgroundColor = 'inherit'; + tr.style.borderWidth = '' + 0; + + const td = document.createElement('td'); + td.style.borderWidth = '' + 0; + + const text = document.createTextNode(body); + + td.appendChild(span); + td.appendChild(text); + tr.appendChild(td); + tableBody.appendChild(tr); + }); + + const tableRoot = tooltipEl.querySelector('table'); + + // Remove old children + while (tableRoot.firstChild) { + tableRoot.firstChild.remove(); + } + + // Add new children + tableRoot.appendChild(tableHead); + tableRoot.appendChild(tableBody); + } + + const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas; + + // Display, position, and set styles for font + tooltipEl.style.opacity = 1; + tooltipEl.style.left = positionX + tooltip.caretX + 'px'; + tooltipEl.style.top = positionY + tooltip.caretY + 'px'; + tooltipEl.style.font = tooltip.options.bodyFont.string; + tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px'; + }; + + Chart.defaults.plugins.tooltip.enabled = false; + Chart.defaults.plugins.tooltip.position = 'nearest'; + Chart.defaults.plugins.tooltip.external = externalTooltipHandler; } ngAfterViewInit(): void { } @@ -40,7 +152,7 @@ export class AppComponent implements OnInit, AfterViewInit { } }); if (!this.authService.isAuthenticated()) { - if(!this.authService.alreadyGuest()) + if (!this.authService.alreadyGuest()) this.authService.addGuestToken(); } this.signalRService.startConnection(); diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index 971a2ed6..155fc3e1 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -142,4 +142,12 @@ select:-webkit-autofill { a { color: var(--ns-accent) !important; +} + +.clearfix:after { + content: "\0020"; + display: block; + height: 0; + clear: both; + visibility: hidden; } \ No newline at end of file -- cgit v1.2.3