Factions Graph

package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser-dynamic": "11.0.2",
     "@angular/router": "11.0.2",
     "core-js": "^2.6.12",
+    "d3": "^6.4.0",
     "firebase": "^8.2.1",
     "rxjs": "^6.6.3",
     "tslib": "^2.1.0",
@@ -36,6 +37,7 @@
     "@angular/cli": "11.0.2",
     "@angular/compiler-cli": "11.0.2",
     "@angular/language-service": "11.0.2",
+    "@types/d3": "^6.2.0",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "^12.19.12",

src/app/objects/factions/d3-graph/d3-graph.component.html

@@ -0,0 +1,8 @@
+<ul class="breadcrumbs">
+    <li><a routerLink="/objects">Objects</a></li>
+    <li><a routerLink="/objects/factions">Factions</a></li>
+    <li>Graph</li>
+</ul>
+
+<h2>Bar Chart</h2>
+<figure id="bar"></figure>

src/app/objects/factions/d3-graph/d3-graph.component.spec.ts

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

src/app/objects/factions/factions-routing.module.ts

@@ -4,9 +4,11 @@ import { FactionsGraphComponent } from './graph/factions.component';
 import { ObjectsByFactionComponent } from './objects-by-faction/objects-by-faction.component';
 import { RouterModule } from '@angular/router';
 import { IndexComponent } from './index/index.component';
+import { D3GraphComponent } from './d3-graph/d3-graph.component';
 
 const factionsRoutes = [
   { path: 'graph', component: FactionsGraphComponent, data: { title: "Factions Graph" } },
+  { path: 'graph/d3', component: D3GraphComponent, data: { title: "Factions Graph" } },
   { path: ':id', component: ObjectsByFactionComponent, data: { title: params => `Faction #${params['id']}` } },
   { path: '', component: IndexComponent, data: { title: "Factions" } }
 ];

src/app/objects/factions/factions.module.ts

@@ -7,13 +7,15 @@ import { FactionsRoutingModule } from './factions-routing.module';
 import { UtilModule } from '../../util/util.module';
 import { IndexComponent } from './index/index.component';
 import { GuiModule } from '../../gui/gui.module';
+import { D3GraphComponent } from './d3-graph/d3-graph.component';
 
 
 @NgModule({
   declarations: [
     FactionsGraphComponent,
     ObjectsByFactionComponent,
     IndexComponent,
+    D3GraphComponent,
   ],
   imports: [
     CommonModule,

src/app/objects/factions/index/index.component.html

@@ -3,7 +3,7 @@
     <li>Factions</li>
 </ul>
 
-<h1>Factions</h1>
+<h2>Factions <small><a routerLink="graph/d3">[Graph]</a></small></h2>
 
 <div *ngIf="$factions | async | sort:'faction'; let factions" class="table-responsive">
     <table>