Skip to content
Snippets Groups Projects
Commit dcbae848 authored by Karolína Dočkalová Burská's avatar Karolína Dočkalová Burská
Browse files

Fix chart display delay

parent 110248e2
No related branches found
No related tags found
1 merge request!7Resolve "Add local mock data for static deployed demonstration"
Pipeline #252206 failed
Showing
with 44 additions and 54 deletions
......@@ -19,7 +19,7 @@ import { RadarChartComponent } from './visualization/components/visualizations/r
import { ClusteringVisualizationConfig } from './visualization/config/kypo-trainings-clustering-viz-lib';
import { LineChartComponent } from './visualization/components/visualizations/line-chart/line-chart.component';
import { ScatterPlotComponent } from './visualization/components/visualizations/scatter-plot/scatter-plot.component';
// import {environment} from "../../../../src/environments/environment";
import {environment} from '../../../../src/environments/environment';
@NgModule({
declarations: [RadarChartComponent, VisualizationsComponent, LineChartComponent, ScatterPlotComponent],
......
......@@ -8,5 +8,10 @@
19.069816613932748,
15.05608272743068,
15.46873331887906,
11.205126708468637
11.205126708468637,
10.378877675454664,
9.585435654547687,
8.967674545656565,
8.645465453345342,
7.834536558899007
]
......@@ -8,5 +8,10 @@
8.377534528410115,
9.14943433330784,
7.665157027831233,
3.286652416172358
3.286652416172358,
2.566876876980886,
3.486756434530980,
2.145245598797987,
2.912432587085632,
2.324534767869899
]
......@@ -8,5 +8,10 @@
46.47322965984604,
33.53201108651117,
33.6126141062258,
23.403117608036712
23.403117608036712,
20.65786879879879,
18.65765645365465,
17.65876875565444,
15.76987097097764,
15.09876565454342
]
......@@ -18,7 +18,7 @@ export class LineChartComponent implements OnChanges, OnInit {
public showChart = true;
public buttonKeyword = 'Hide';
public id: string;
public id: string = 'line-' + uuid();
private readonly d3: D3;
private gChart: any;
......@@ -36,8 +36,7 @@ export class LineChartComponent implements OnChanges, OnInit {
}
ngOnInit(): void {
this.id = 'line-' + uuid();
// if we want to show the visualization as a suporting component, it only displays on demand
// if we want to show the visualization as a supporting component, it only displays on demand
if (this.includeInButtonToggle) {
this.showChart = false;
this.buttonKeyword = 'Show';
......
.invisible-clusters {
display: none !important;
}
\ No newline at end of file
......@@ -9,7 +9,7 @@
></kypo-viz-clustering-line-chart>
<kypo-viz-clustering-scatter-plot
*ngIf="selectedComponent !== 2"
[ngClass]="{'invisible-clusters' : selectedFeature === 2}"
[visualizationData]="visualizationData$"
[numOfClusters]="numOfClusters"
[isStandalone]="isStandalone"
......@@ -17,7 +17,7 @@
></kypo-viz-clustering-scatter-plot>
<kypo-viz-clustering-radar-chart
*ngIf="selectedComponent === 2"
[ngClass]="{'invisible-clusters' : selectedFeature !== 2}"
[numOfClusters]="numOfClusters"
[visualizationData]="radarChartData$"
[isStandalone]="isStandalone">
......
import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
import { BehaviorSubject, Observable, of, Subscription, throwError, timer } from 'rxjs';
import { Observable } from 'rxjs';
import { VisualizationData } from '../../models/visualization-data';
import { VisualizationsDataService } from '../../services/visualizations-data.service';
import { Clusterables } from '../../models/clusterables-enum';
......
......@@ -15,13 +15,13 @@
<div *ngIf="isSubmenuOpen">
<button mat-button class="nav-link sub-item"
[ngClass]="{'opened' : selectedFeature === 0}"
(click)="selectedComponent=0;selectedFeature=0">
(click)="change(0, 0)">
<span>Wrong flags per time played</span>
</button>
<br/>
<button mat-button class="nav-link sub-item"
[ngClass]="{'opened' : selectedFeature === 1}"
(click)="selectedComponent=0;selectedFeature=1">
(click)="change(0,1)">
<span>Time spent after using a hint</span>
</button>
</div>
......@@ -29,51 +29,13 @@
<div>
<button mat-button class="nav-link"
[ngClass]="{'opened' : selectedFeature === 2}"
(click)="selectedComponent=2;selectedFeature=2">
(click)="change(2,2)">
<span>Behavior correlation chart</span>
</button>
</div>
</mat-list-item>
<mat-list-item>
<div class="title">Testing parameters</div>
<mat-divider></mat-divider>
<!-- inputs for testing purposes -->
<mat-form-field appearance="fill">
<mat-label>Number of clusters:</mat-label>
<input matInput type="number" min="1" [(ngModel)]="numOfClusters">
</mat-form-field>
<br/>
<mat-form-field appearance="fill">
<mat-label>Training definition identification:</mat-label>
<mat-select [(value)]="trainingDefinitionId" (selectionChange)="selectionChange()">
<!-- <mat-option [value]="8">8</mat-option>-->
<mat-option [value]="25">Kobylka 3302</mat-option>
<!-- <mat-option [value]="27">27</mat-option>-->
<mat-option [value]="60">Hacking Day Cyber Task Force Delta</mat-option>
<mat-option [value]="64">Captain Slovakistan</mat-option>
</mat-select>
</mat-form-field>
<br/>
<mat-form-field appearance="fill">
<mat-label>Level selection:</mat-label>
<mat-select [(value)]="level">
<mat-option [value]="''">All levels</mat-option>
<mat-option *ngFor="let l of trainingLevels[trainingDefinitionId] |
keyvalue" [(value)]="l.value">{{l.key}}</mat-option>
</mat-select>
</mat-form-field>
<!-- use this input for any input
<mat-form-field appearance="fill">
<mat-label>Training definition identification:</mat-label>
<input matInput type="number" min="1" [(ngModel)]="trainingDefinitionId">
</mat-form-field>
-->
<!--<br/>
<button type="submit" mat-flat-button color="primary">Recalculate w/ new data</button>-->
</mat-list-item>
</mat-sidenav>
<!-- Main content -->
......
......@@ -41,3 +41,7 @@ button.opened {
.mat-divider {
margin: 10px 5px;
}
.mat-drawer-container {
min-height: 502px;
}
\ No newline at end of file
import {Component, OnInit, ViewChild} from '@angular/core';
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewChild } from '@angular/core';
import {MatSidenav} from '@angular/material/sidenav';
import {Clusterables} from '../../../projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/models/clusterables-enum';
import {Components} from '../../../projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/models/components-enum';
import { Clusterables
} from '../../../projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/models/clusterables-enum';
import { Components
} from '../../../projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/models/components-enum';
@Component({
selector: 'app-clustering-overview',
......@@ -62,6 +64,11 @@ export class ClusteringOverviewComponent {
this.level = 0;
}
change(selectedComponent: number, selectedFeature: number) {
this.selectedComponent = selectedComponent;
this.selectedFeature = selectedFeature;
}
clusterChange(change) {
this.numOfClusters = change.target.value;
}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment