Merge branch 'redesign' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into redesign

8 files changed, 383 insertions, 4 deletions

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 710e9710..7f6dbdde 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -25,7 +25,9 @@
         "@ng-bootstrap/ng-bootstrap": "^12.0.0",
         "@popperjs/core": "^2.10.2",
         "@sgratzl/chartjs-chart-boxplot": "^3.7.1",
+        "@syncfusion/ej2-angular-heatmap": "^20.1.47",
         "bootstrap": "^5.1.3",
+        "chart.heatmap.js": "^0.0.1-alpha",
         "chart.js": "^3.7.1",
         "csv-parser": "^3.0.0",
         "d3-graphviz": "^2.6.1",
@@ -2727,6 +2729,115 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/@syncfusion/ej2-angular-base": {
+      "version": "20.1.48",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-base/-/ej2-angular-base-20.1.48.tgz",
+      "integrity": "sha512-MVnQl2TuqD0pKvXJRWekHO8vtsdC89OzETUVRnYllnLqnGdNDzOFxi1Gmm+ON3HpVjcfzNSbUoFFQcJwUF+WGQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@syncfusion/ej2-base": "~20.1.48",
+        "@syncfusion/ej2-icons": "~20.1.47",
+        "core-js": "^3.4.8",
+        "reflect-metadata": "^0.1.9",
+        "rxjs": "^6.5.4",
+        "rxjs-compat": "^6.5.4",
+        "zone.js": "^0.10.2"
+      }
+    },
+    "node_modules/@syncfusion/ej2-angular-base/node_modules/rxjs": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "dependencies": {
+        "tslib": "^1.9.0"
+      },
+      "engines": {
+        "npm": ">=2.0.0"
+      }
+    },
+    "node_modules/@syncfusion/ej2-angular-base/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@syncfusion/ej2-angular-base/node_modules/zone.js": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz",
+      "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg=="
+    },
+    "node_modules/@syncfusion/ej2-angular-heatmap": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-heatmap/-/ej2-angular-heatmap-20.1.47.tgz",
+      "integrity": "sha512-mx9Z5/zNmNcjogVfS7DKNbg7zW2FXZ78O0BYPA4CqdwDLZdA30xx25JGwM7fZ6iTDs8kpEyWAAEMt+zJPyRKFw==",
+      "dependencies": {
+        "@syncfusion/ej2-angular-base": "~20.1.47",
+        "@syncfusion/ej2-base": "~20.1.47",
+        "@syncfusion/ej2-heatmap": "20.1.47"
+      }
+    },
+    "node_modules/@syncfusion/ej2-base": {
+      "version": "20.1.50",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-20.1.50.tgz",
+      "integrity": "sha512-RdBCPjvD/ArwArVoYjTXB7jQ7zAdgT8MxoKY4aSwY9wrNIUxNS4HhO8slY2ergjZHDP3eDnLn/UiCg5qaBtFJQ==",
+      "dependencies": {
+        "@syncfusion/ej2-icons": "~20.1.47"
+      }
+    },
+    "node_modules/@syncfusion/ej2-compression": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-compression/-/ej2-compression-20.1.47.tgz",
+      "integrity": "sha512-4+74eOf6+vxg1mobYEf5qCvTbo6DjjSZv1O2zfWUc0tgVV0A9AspXIcoeeivemTKnRDj0fm3E7Tv15h1qodpUQ==",
+      "dependencies": {
+        "@syncfusion/ej2-file-utils": "~20.1.47"
+      }
+    },
+    "node_modules/@syncfusion/ej2-data": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-data/-/ej2-data-20.1.47.tgz",
+      "integrity": "sha512-AAq95oux06/Dtoo9Az1MlN0r1xbV8BF6vIbCbpiIK016jp2V38X0x2AhvHFV/yM+winrT1d2nxUhcGcnabPveQ==",
+      "dependencies": {
+        "@syncfusion/ej2-base": "~20.1.47"
+      }
+    },
+    "node_modules/@syncfusion/ej2-file-utils": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-file-utils/-/ej2-file-utils-20.1.47.tgz",
+      "integrity": "sha512-69c/1BBbQpJ/XkdOrtGijxRIDvz05+mO4PB6VANo+FwNdhGFt4MvWmYjCDwwCE2GmqiukKvxXaLRCOjFVFRmig=="
+    },
+    "node_modules/@syncfusion/ej2-heatmap": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-heatmap/-/ej2-heatmap-20.1.47.tgz",
+      "integrity": "sha512-hOCGlHNQaFyojR84jCCQ+ssDOtWpzy0nvC3/1xNhC2VbDPvxo/zNqiNJuW+ELTlViv+2UcPMKnCLL9rgv7jakg==",
+      "dependencies": {
+        "@syncfusion/ej2-base": "~20.1.47",
+        "@syncfusion/ej2-compression": "~20.1.47",
+        "@syncfusion/ej2-data": "~20.1.47",
+        "@syncfusion/ej2-file-utils": "~20.1.47",
+        "@syncfusion/ej2-pdf-export": "~20.1.47",
+        "@syncfusion/ej2-svg-base": "~20.1.47"
+      }
+    },
+    "node_modules/@syncfusion/ej2-icons": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-icons/-/ej2-icons-20.1.47.tgz",
+      "integrity": "sha512-0P5enxVZSl+AISIlRvQV/d/k0EgP8RDN/gBmb2AQuldMoz+Nx64G7zLEXd1l9Ib2j5Si9JgXF37aYhwc2brdNw=="
+    },
+    "node_modules/@syncfusion/ej2-pdf-export": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-pdf-export/-/ej2-pdf-export-20.1.47.tgz",
+      "integrity": "sha512-ww5BtrCrn4RTOcfYnqTF9elizfLLLTZhDgsHJ09hPMhFDzazfuO79D1zfER4b2JiJYffcBiY6Xsp56qCB/ccpw==",
+      "dependencies": {
+        "@syncfusion/ej2-compression": "~20.1.47"
+      }
+    },
+    "node_modules/@syncfusion/ej2-svg-base": {
+      "version": "20.1.48",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-svg-base/-/ej2-svg-base-20.1.48.tgz",
+      "integrity": "sha512-uiGEd5Gws9NYa+lqkR2L8Z1MYeIV5QRAt9sT21KghEpoh2lS1nuzou/4vKMyQPJGayzqRCEW5BBIGkrSbgVXGg==",
+      "dependencies": {
+        "@syncfusion/ej2-base": "~20.1.48"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -3920,6 +4031,11 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "node_modules/chart.heatmap.js": {
+      "version": "0.0.1-alpha",
+      "resolved": "https://registry.npmjs.org/chart.heatmap.js/-/chart.heatmap.js-0.0.1-alpha.tgz",
+      "integrity": "sha1-wqcltMGZMMhu6oiyRorPWFOzpSY="
+    },
     "node_modules/chart.js": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
@@ -4341,7 +4457,6 @@
       "version": "3.20.3",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz",
       "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==",
-      "dev": true,
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -10192,6 +10307,11 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/rxjs-compat": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.6.7.tgz",
+      "integrity": "sha512-szN4fK+TqBPOFBcBcsR0g2cmTTUF/vaFEOZNuSdfU8/pGFnNmmn2u8SystYXG1QMrjOPBc6XTKHMVfENDf6hHw=="
+    },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -13758,6 +13878,113 @@
       "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==",
       "dev": true
     },
+    "@syncfusion/ej2-angular-base": {
+      "version": "20.1.48",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-base/-/ej2-angular-base-20.1.48.tgz",
+      "integrity": "sha512-MVnQl2TuqD0pKvXJRWekHO8vtsdC89OzETUVRnYllnLqnGdNDzOFxi1Gmm+ON3HpVjcfzNSbUoFFQcJwUF+WGQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~20.1.48",
+        "@syncfusion/ej2-icons": "~20.1.47",
+        "core-js": "^3.4.8",
+        "reflect-metadata": "^0.1.9",
+        "rxjs": "^6.5.4",
+        "rxjs-compat": "^6.5.4",
+        "zone.js": "^0.10.2"
+      },
+      "dependencies": {
+        "rxjs": {
+          "version": "6.6.7",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+          "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+          "requires": {
+            "tslib": "^1.9.0"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        },
+        "zone.js": {
+          "version": "0.10.3",
+          "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz",
+          "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg=="
+        }
+      }
+    },
+    "@syncfusion/ej2-angular-heatmap": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-heatmap/-/ej2-angular-heatmap-20.1.47.tgz",
+      "integrity": "sha512-mx9Z5/zNmNcjogVfS7DKNbg7zW2FXZ78O0BYPA4CqdwDLZdA30xx25JGwM7fZ6iTDs8kpEyWAAEMt+zJPyRKFw==",
+      "requires": {
+        "@syncfusion/ej2-angular-base": "~20.1.47",
+        "@syncfusion/ej2-base": "~20.1.47",
+        "@syncfusion/ej2-heatmap": "20.1.47"
+      }
+    },
+    "@syncfusion/ej2-base": {
+      "version": "20.1.50",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-20.1.50.tgz",
+      "integrity": "sha512-RdBCPjvD/ArwArVoYjTXB7jQ7zAdgT8MxoKY4aSwY9wrNIUxNS4HhO8slY2ergjZHDP3eDnLn/UiCg5qaBtFJQ==",
+      "requires": {
+        "@syncfusion/ej2-icons": "~20.1.47"
+      }
+    },
+    "@syncfusion/ej2-compression": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-compression/-/ej2-compression-20.1.47.tgz",
+      "integrity": "sha512-4+74eOf6+vxg1mobYEf5qCvTbo6DjjSZv1O2zfWUc0tgVV0A9AspXIcoeeivemTKnRDj0fm3E7Tv15h1qodpUQ==",
+      "requires": {
+        "@syncfusion/ej2-file-utils": "~20.1.47"
+      }
+    },
+    "@syncfusion/ej2-data": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-data/-/ej2-data-20.1.47.tgz",
+      "integrity": "sha512-AAq95oux06/Dtoo9Az1MlN0r1xbV8BF6vIbCbpiIK016jp2V38X0x2AhvHFV/yM+winrT1d2nxUhcGcnabPveQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~20.1.47"
+      }
+    },
+    "@syncfusion/ej2-file-utils": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-file-utils/-/ej2-file-utils-20.1.47.tgz",
+      "integrity": "sha512-69c/1BBbQpJ/XkdOrtGijxRIDvz05+mO4PB6VANo+FwNdhGFt4MvWmYjCDwwCE2GmqiukKvxXaLRCOjFVFRmig=="
+    },
+    "@syncfusion/ej2-heatmap": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-heatmap/-/ej2-heatmap-20.1.47.tgz",
+      "integrity": "sha512-hOCGlHNQaFyojR84jCCQ+ssDOtWpzy0nvC3/1xNhC2VbDPvxo/zNqiNJuW+ELTlViv+2UcPMKnCLL9rgv7jakg==",
+      "requires": {
+        "@syncfusion/ej2-base": "~20.1.47",
+        "@syncfusion/ej2-compression": "~20.1.47",
+        "@syncfusion/ej2-data": "~20.1.47",
+        "@syncfusion/ej2-file-utils": "~20.1.47",
+        "@syncfusion/ej2-pdf-export": "~20.1.47",
+        "@syncfusion/ej2-svg-base": "~20.1.47"
+      }
+    },
+    "@syncfusion/ej2-icons": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-icons/-/ej2-icons-20.1.47.tgz",
+      "integrity": "sha512-0P5enxVZSl+AISIlRvQV/d/k0EgP8RDN/gBmb2AQuldMoz+Nx64G7zLEXd1l9Ib2j5Si9JgXF37aYhwc2brdNw=="
+    },
+    "@syncfusion/ej2-pdf-export": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-pdf-export/-/ej2-pdf-export-20.1.47.tgz",
+      "integrity": "sha512-ww5BtrCrn4RTOcfYnqTF9elizfLLLTZhDgsHJ09hPMhFDzazfuO79D1zfER4b2JiJYffcBiY6Xsp56qCB/ccpw==",
+      "requires": {
+        "@syncfusion/ej2-compression": "~20.1.47"
+      }
+    },
+    "@syncfusion/ej2-svg-base": {
+      "version": "20.1.48",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-svg-base/-/ej2-svg-base-20.1.48.tgz",
+      "integrity": "sha512-uiGEd5Gws9NYa+lqkR2L8Z1MYeIV5QRAt9sT21KghEpoh2lS1nuzou/4vKMyQPJGayzqRCEW5BBIGkrSbgVXGg==",
+      "requires": {
+        "@syncfusion/ej2-base": "~20.1.48"
+      }
+    },
     "@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -14751,6 +14978,11 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "chart.heatmap.js": {
+      "version": "0.0.1-alpha",
+      "resolved": "https://registry.npmjs.org/chart.heatmap.js/-/chart.heatmap.js-0.0.1-alpha.tgz",
+      "integrity": "sha1-wqcltMGZMMhu6oiyRorPWFOzpSY="
+    },
     "chart.js": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
@@ -15072,8 +15304,7 @@
     "core-js": {
       "version": "3.20.3",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz",
-      "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==",
-      "dev": true
+      "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag=="
     },
     "core-js-compat": {
       "version": "3.21.1",
@@ -19338,6 +19569,11 @@
         "tslib": "^2.1.0"
       }
     },
+    "rxjs-compat": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.6.7.tgz",
+      "integrity": "sha512-szN4fK+TqBPOFBcBcsR0g2cmTTUF/vaFEOZNuSdfU8/pGFnNmmn2u8SystYXG1QMrjOPBc6XTKHMVfENDf6hHw=="
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 369ac5c9..89381956 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,7 +28,9 @@
     "@ng-bootstrap/ng-bootstrap": "^12.0.0",
     "@popperjs/core": "^2.10.2",
     "@sgratzl/chartjs-chart-boxplot": "^3.7.1",
+    "@syncfusion/ej2-angular-heatmap": "^20.1.47",
     "bootstrap": "^5.1.3",
+    "chart.heatmap.js": "^0.0.1-alpha",
     "chart.js": "^3.7.1",
     "csv-parser": "^3.0.0",
     "d3-graphviz": "^2.6.1",
diff --git a/frontend/src/app/_elements/_charts/heatmap/heatmap.component.css b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.css
diff --git a/frontend/src/app/_elements/_charts/heatmap/heatmap.component.html b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.html
new file mode 100644
index 00000000..52d95516
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.html
@@ -0,0 +1,3 @@
+<div style="width:800px; height: 400px; background-color: red;">
+    <ejs-heatmap [dataSource]='dataSource' [xAxis]='xAxis' [yAxis]='yAxis'></ejs-heatmap>
+</div>
diff --git a/frontend/src/app/_elements/_charts/heatmap/heatmap.component.spec.ts b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.spec.ts
new file mode 100644
index 00000000..fa0a90cc
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeatmapComponent } from './heatmap.component';
+
+describe('HeatmapComponent', () => {
+  let component: HeatmapComponent;
+  let fixture: ComponentFixture<HeatmapComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HeatmapComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeatmapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/heatmap/heatmap.component.ts b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.ts
new file mode 100644
index 00000000..f3d1af98
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.ts
@@ -0,0 +1,108 @@
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'chart.js';
+import { HeatMapAllModule } from '@syncfusion/ej2-angular-heatmap';
+import { BrowserModule } from '@angular/platform-browser'; 
+import { NgModule } from '@angular/core';
+
+
+
+@Component({
+  selector: 'app-heatmap',
+  templateUrl: './heatmap.component.html',
+  styleUrls: ['./heatmap.component.css']
+})
+export class HeatmapComponent implements OnInit {
+
+
+  @Input()width?: number;
+  @Input()height?: number;
+
+  dataSource = [
+ 
+    [73, 39, 26, 39, 94, 0],
+ 
+    [93, 58, 53, 38, 26, 68],
+ 
+    [99, 28, 22, 4, 66, 90],
+ 
+    [14, 26, 97, 69, 69, 3],
+ 
+    [7, 46, 47, 47, 88, 6],
+ 
+    [41, 55, 73, 23, 3, 79],
+ 
+    [56, 69, 21, 86, 3, 33],
+ 
+    [45, 7, 53, 81, 95, 79],
+ 
+    [60, 77, 74, 68, 88, 51],
+ 
+    [25, 25, 10, 12, 78, 14],
+ 
+    [25, 56, 55, 58, 12, 82],
+ 
+    [74, 33, 88, 23, 86, 59]
+ 
+  ];
+
+  xAxis = {
+
+    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert',
+ 
+      'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
+ 
+  };
+ 
+  yAxis = {
+ 
+    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
+ 
+  }
+
+  //@ViewChild('heatmap') chartRef!: ElementRef;
+  constructor() { }
+
+  ngOnInit(): void {
+    
+    
+
+    /*
+    const myChart = new Chart(this.chartRef.nativeElement, {
+    type: 'pie',
+    data: {
+      datasets: [{
+        data: [
+ 
+      [73, 39, 26, 39, 94, 0],
+   
+      [93, 58, 53, 38, 26, 68],
+   
+      [99, 28, 22, 4, 66, 90],
+   
+      [14, 26, 97, 69, 69, 3],
+   
+      [7, 46, 47, 47, 88, 6],
+   
+      [41, 55, 73, 23, 3, 79],
+   
+      [56, 69, 21, 86, 3, 33],
+   
+      [45, 7, 53, 81, 95, 79],
+   
+      [60, 77, 74, 68, 88, 51],
+   
+      [25, 25, 10, 12, 78, 14],
+   
+      [25, 56, 55, 58, 12, 82],
+   
+      [74, 33, 88, 23, 86, 59]
+   
+    ],
+      }]
+    }
+});
+    */
+  
+  }
+
+}
diff --git a/frontend/src/app/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html
index ec6ef0d6..94679055 100644
--- a/frontend/src/app/_pages/test/test.component.html
+++ b/frontend/src/app/_pages/test/test.component.html
@@ -1,4 +1,5 @@
 <app-pie-chart></app-pie-chart>
 <app-doughnut-chart></app-doughnut-chart>
 <app-barchart></app-barchart>
-<app-box-plot></app-box-plot>
\ No newline at end of file
+<app-box-plot></app-box-plot>
+<app-heatmap></app-heatmap>
\ No newline at end of file
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index c46381d5..fc6d3c6b 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -47,6 +47,8 @@ import { ColumnTableComponent } from './_elements/column-table/column-table.comp
 import { FolderComponent } from './_elements/folder/folder.component';
 import { TestComponent } from './_pages/test/test.component';
 import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component';
+import { HeatmapComponent } from './_elements/_charts/heatmap/heatmap.component';
+import { HeatMapAllModule } from '@syncfusion/ej2-angular-heatmap';
 
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
@@ -83,6 +85,7 @@ export function initializeApp(appConfig: Configuration) {
     MissingvaluesDialogComponent,
     TestComponent,
     DoughnutChartComponent,
+    HeatmapComponent
   ],
   imports: [
     BrowserModule,
@@ -97,6 +100,7 @@ export function initializeApp(appConfig: Configuration) {
     MatIconModule,
     NgChartsModule,
     Ng2SearchPipeModule,
+    HeatMapAllModule
   ],
   providers: [
     Configuration,