Intial commit for circualr heatmap

Author: 0x41head

package-lock.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "~13.3.0",
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
+    "d3": "^7.5.0",
     "markdown-it": "^13.0.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
@@ -30,6 +31,7 @@
     "@angular-devkit/build-angular": "~13.3.6",
     "@angular/cli": "~13.3.6",
     "@angular/compiler-cli": "~13.3.0",
+    "@types/d3": "^7.4.0",
     "@types/jasmine": "~3.10.0",
     "@types/markdown-it": "^12.2.3",
     "@types/node": "^12.11.1",

package.json

@@ -1,13 +1,14 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { CircularHeatmapComponent } from './component/circular-heatmap/circular-heatmap.component';
 import { MainContentComponent } from './component/main-content/main-content.component';
 import { MatrixComponent } from './component/matrix/matrix.component';
-import { TaskDescriptionComponent } from './component/task-description/task-description.component';
+
 
 const routes: Routes = [
   {path: '',component: MainContentComponent},
   {path: 'matrix', component: MatrixComponent},
-  {path: 'task-description', component: TaskDescriptionComponent}
+  {path: 'circular-heatmap', component: CircularHeatmapComponent}
 ];
 
 @NgModule({

src/app/app-routing.module.ts

@@ -15,6 +15,7 @@ import { TaskDescriptionComponent } from './component/task-description/task-desc
 import { ymlService } from './service/yaml-parser/yaml-parser.service';
 import { HttpClientModule } from '@angular/common/http';
 import { CombinerService } from './service/combiner/combiner.service';
+import { CircularHeatmapComponent } from './component/circular-heatmap/circular-heatmap.component';
 
 
 @NgModule({
@@ -26,6 +27,7 @@ import { CombinerService } from './service/combiner/combiner.service';
     SidenavButtonsComponent,
     TopHeaderComponent,
     TaskDescriptionComponent,
+    CircularHeatmapComponent,
   ],
   imports: [
     BrowserModule,

src/app/app.module.ts

@@ -0,0 +1,12 @@
+.margin30 {
+    margin-bottom: 30px;
+  }
+.axis path,
+.axis line {
+    fill: none;
+    stroke: #000;
+    shape-rendering: crispEdges;
+  }
+.abc{
+  background-color: aquamarine;
+}

src/app/component/circular-heatmap/circular-heatmap.component.css

@@ -0,0 +1,16 @@
+<div id="cont" class="container-fluid text-center">
+
+    <div class="row">
+      <div class="col-md-3">
+      </div>
+      <div class="col-md-6">
+        <div id="chart" class="abc"></div>
+      </div>
+      <div class="col-md-3">
+      </div>
+    </div>
+  
+  
+  
+  </div>
+  

src/app/component/circular-heatmap/circular-heatmap.component.html

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CircularHeatmapComponent } from './circular-heatmap.component';
+
+describe('CircularHeatmapComponent', () => {
+  let component: CircularHeatmapComponent;
+  let fixture: ComponentFixture<CircularHeatmapComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CircularHeatmapComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CircularHeatmapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});