From 117f254c08a2361c9fe912463f806cb535f5f2e7 Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Wed, 18 May 2022 22:39:12 +0200 Subject: Popravljen izgled dugmeta na column-table komponenti. --- frontend/src/app/_elements/column-table/column-table.component.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'frontend/src/app/_elements/column-table/column-table.component.css') 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 0477b7be..f7f07e62 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -198,7 +198,7 @@ table ::ng-deep .mat-form-field-wrapper { font-size: large; position: relative; background-color: var(--ns-primary); - width: 10rem; + width: 13rem; height: 2.3rem; border-color: var(--ns-primary); border-style: solid; -- cgit v1.2.3 From 2c75cea0ef88d9db56e30b31470edb1bcc437350 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Thu, 19 May 2022 12:55:33 +0200 Subject: Popravljena numeracija redova kod stranicenja u column-table. Dodat submit na enter gde je falio. Css izmene. --- backend/api/api/appsettings.json | 8 ++++---- .../column-table/column-table.component.css | 2 +- .../column-table/column-table.component.html | 4 ++-- .../_modals/alert-dialog/alert-dialog.component.html | 16 ++++++++-------- .../_modals/alert-dialog/alert-dialog.component.ts | 6 ++++-- .../encoding-dialog/encoding-dialog.component.html | 20 +++++++++++--------- .../yes-no-dialog/yes-no-dialog.component.html | 8 +++++--- .../_modals/yes-no-dialog/yes-no-dialog.component.ts | 9 ++++++--- 8 files changed, 41 insertions(+), 32 deletions(-) (limited to 'frontend/src/app/_elements/column-table/column-table.component.css') diff --git a/backend/api/api/appsettings.json b/backend/api/api/appsettings.json index 44d63ac3..ec8f7dd8 100644 --- a/backend/api/api/appsettings.json +++ b/backend/api/api/appsettings.json @@ -16,22 +16,22 @@ "UserStoreDatabaseSettings": { /* LocalHost*/ - /*"ConnectionString": "mongodb://127.0.0.1:27017/", + "ConnectionString": "mongodb://127.0.0.1:27017/", "DatabaseName": "si_project", "CollectionName": "users", "DatasetCollectionName": "Dataset", "ModelCollectionName": "Model", "PredictorCollectionName": "Predictor", "FilesCollectionName": "Files", - "ExperimentCollectionName": "Experiment"*/ + "ExperimentCollectionName": "Experiment" - "ConnectionString": "mongodb+srv://si_user:si_user@sidatabase.twtfm.mongodb.net/myFirstDatabase?retryWrites=true&w=majority", + /*"ConnectionString": "mongodb+srv://si_user:si_user@sidatabase.twtfm.mongodb.net/myFirstDatabase?retryWrites=true&w=majority", "DatabaseName": "si_db", "CollectionName": "users", "DatasetCollectionName": "Dataset", "ModelCollectionName": "Model", "PredictorCollectionName": "Predictor", "FilesCollectionName": "Files", - "ExperimentCollectionName": "Experiment" + "ExperimentCollectionName": "Experiment" */ } } \ 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 f7f07e62..311773f7 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -22,7 +22,7 @@ table.fixed td { table.fixed th { overflow: hidden; - max-width: 120px; + max-width: 250px; min-width: 120px; vertical-align: middle; background-color: var(--ns-primary-50); diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 31c32dfd..bb5914bd 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -35,7 +35,7 @@ - #{{i}} + #{{((this.begin/10)+1)*10-10+i+1}}
{{col}} @@ -200,7 +200,7 @@
- Nema null vrednosti. + Nema nedostajućih vrednosti.
diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html index 2d7e4d86..84793260 100644 --- a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html +++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.html @@ -1,9 +1,9 @@ - - -

{{data.title}}

-
- {{data.message}} -
-
+

{{data.title}}

+
+
+ {{data.message}} +
+
+
-
\ No newline at end of file +
\ No newline at end of file diff --git a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts index e15f3c6f..7558b527 100644 --- a/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts +++ b/frontend/src/app/_modals/alert-dialog/alert-dialog.component.ts @@ -20,9 +20,11 @@ export class AlertDialogComponent { //public dialog: MatDialog ) {} + withEnterKey(keyboardEvent: KeyboardEvent) { + if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") + this.onOkClick(); + } onOkClick(): void { this.dialogRef.close(); } - - } diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html index 08c1f26b..fed8f8d7 100644 --- a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html +++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html @@ -1,15 +1,17 @@

Enkodiranje svih kolona

Sve izabrane kolone biće enkodirane metodom:

-
- - - - {{ optionName }} - - - -
+
+
+ + + + {{ optionName }} + + + +
+
diff --git a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html index 06e74093..77e7be42 100644 --- a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html +++ b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html @@ -1,8 +1,10 @@

{{data.title}}

- {{data.message}} +
+ {{data.message}} +
- - + +
\ No newline at end of file diff --git a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.ts b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.ts index de1cdd4f..a7db1e7f 100644 --- a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.ts +++ b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.ts @@ -24,10 +24,13 @@ export class YesNoDialogComponent { onNoClick(): void { this.dialogRef.close(); } - onYesClick():void{ + + withEnterKey(keyboardEvent: KeyboardEvent) { + if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") + this.onYesClick(); + } + onYesClick():void { this.data.yesFunction(); this.dialogRef.close(); } - - } -- 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/column-table/column-table.component.css') 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