diff options
Diffstat (limited to 'frontend/src/app')
6 files changed, 128 insertions, 9 deletions
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 @@ -<div class="chart-wrapper"> +<div class="chart-wrapper position-relative"> <canvas #boxplot [width]="width" [height]="height"></canvas> </div>
\ 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 @@ -<div #wrapper style="width:100%;height:95%;"> - <canvas id="myChart" #canvas> +<div #wrapper class="position-relative" style="width:100%;height:95%;"> + <canvas id="myChart" #canvas> </canvas> </div>
\ 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 @@ -<div class="chart-wrapper"> +<div class="chart-wrapper position-relative"> <canvas #piechart [width]="width" [height]="height"></canvas> </div>
\ 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/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index beff6012..ed38bbd6 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -182,6 +182,9 @@ export class FolderComponent implements AfterViewInit { this.folders[TabType.MyModels] = models; if (selectedModelId) { this.selectFile(models.filter(x => x._id == selectedModelId)[0]); + setTimeout(() => { + this.okPressed.emit(); + }); } this.searchTermsChanged(); }); @@ -233,11 +236,14 @@ export class FolderComponent implements AfterViewInit { } saveNewFile() { + this.loadingAction = true; switch (this.type) { case FolderType.Dataset: this.formDataset!.uploadDataset((dataset: Dataset) => { this.newFile = undefined; - Shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se obradi."); + this.loadingAction = false; + this.okPressed.emit(); + //Shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se obradi."); this.refreshFiles(); }, () => { @@ -248,7 +254,8 @@ export class FolderComponent implements AfterViewInit { this.formModel.newModel.type = this.formModel.forProblemType; this.modelsService.addModel(this.formModel.newModel).subscribe(model => { this.newFile = undefined; - Shared.openDialog("Obaveštenje", "Uspešno ste dodali novu konfiguraciju neuronske mreže u kolekciju."); + this.loadingAction = false; + //Shared.openDialog("Obaveštenje", "Uspešno ste dodali novu konfiguraciju neuronske mreže u kolekciju."); this.refreshFiles(null, model._id); // todo select model }, (err) => { Shared.openDialog("Neuspeo pokušaj!", "Konfiguracija neuronske mreže sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeću konfiguraciju."); 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(); |