Add check for NaN and 0

README.md

 # KYPO Trainings Clustering Visualization
 
-## Prerequisites
-
-To use the library you need to have installed:
-
+The visualization provides three views with distinct processing of collected data - a subset of features that define the trainee behavior and enable us to explore outliers or trainee strategies during their gameplay. 
 
 ## How to use json-server as mock backend with provided dummy data
 

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/line-chart/line-chart.component.ts

@@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angu
 import { D3, D3Service } from '@muni-kypo-crp/d3-service';
 import { AppConfig } from '../../../../app.config';
 import { v4 as uuid } from 'uuid';
-import {VisualizationData} from "../../../models/visualization-data";
 
 @Component({
   selector: 'kypo-viz-clustering-line-chart',
@@ -57,14 +56,18 @@ export class LineChartComponent implements OnChanges, OnInit {
     if (this.gChart != undefined) {
       this.clear();
     }
-    this.checkData();
-    this.createSvg();
-    this.drawPlot();
+    if (this.checkData()) {
+      this.createSvg();
+      this.drawPlot();
+    }
   }
 
   checkData() {
-    // TODO
-    console.log(this.visualizationData);
+    const isAllNothing = this.visualizationData.every((value) => value === 0 || Number.isNaN(value) || value === null);
+    if (isAllNothing) {
+      this.insufficientData.emit(true);
+    }
+    return !isAllNothing;
   }
 
   private createSvg(): void {

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/visualizations.component.html

-<ng-container>
+<ng-container *ngIf="!hideChart">
 	<!-- the line chart is available for every graph type (it can be hidden in the form of a button) -->
 	<kypo-viz-clustering-line-chart
 			[visualizationData]="lineData$"

projects/kypo-trainings-clustering-viz-lib/src/lib/visualization/components/visualizations/visualizations.component.ts

@@ -4,7 +4,6 @@ import { VisualizationData } from '../../models/visualization-data';
 import { VisualizationsDataService } from '../../services/visualizations-data.service';
 import { Clusterables } from '../../models/clusterables-enum';
 import { Components } from '../../models/components-enum';
-import { RadarChartComponent } from './radar-chart/radar-chart.component';
 
 @Component({
   selector: 'kypo-clustering-visualization',
@@ -21,8 +20,10 @@ export class VisualizationsComponent implements OnInit, OnChanges {
   @Input() selectedFeature: Clusterables = Clusterables.WrongFlags; // (wf 1, tah 2, nd 3)
 
   @Output() viewOpen: EventEmitter<boolean> = new EventEmitter();
+  @Output() chartIsHidden: EventEmitter<boolean> = new EventEmitter();
 
-  elbowNumClusters = 15; // this ensures we don't load data after every line chart change (15 clusters should be more than enough)
+  hideChart = false;
+  elbowNumClusters = 15; // this ensures we don't load different data after every line chart change (15 clusters should be just enough)
 
   lineData$: Observable<VisualizationData>;
   visualizationData$: Observable<VisualizationData>;
@@ -78,7 +79,10 @@ export class VisualizationsComponent implements OnInit, OnChanges {
     }
   }
 
-  checkData(displayChart: boolean) {
-
+  checkData(hideChart: boolean) {
+    // if we don't have enough data for sse, we should hide the remaining related
+    // charts as well, since they will also lack data for visualization
+    this.hideChart = hideChart;
+    if (hideChart) this.chartIsHidden.emit(true);
   }
 }

utils/json-server/db.js

@@ -1656,6 +1656,18 @@ clusteringDB = function() {
       7.665157027831233,
       3.286652416172358
     ],
+    sseWrong:[
+      NaN,
+      0,
+      0,
+      NaN,
+      NaN,
+      NaN,
+      NaN,
+      NaN,
+      NaN,
+      NaN
+    ],
     sseNDim: [
       165,
       144.16192694574772,