4 files changed, 77 insertions, 0 deletions
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.css b/frontend/src/app/_elements/annvisual/annvisual.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/annvisual/annvisual.component.css
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.html b/frontend/src/app/_elements/annvisual/annvisual.component.html
new file mode 100644
index 00000000..6dd3b3ae
--- /dev/null
+++ b/frontend/src/app/_elements/annvisual/annvisual.component.html
@@ -0,0 +1,5 @@
+<div style="text-align: center; width: 100%;" >
+    <button (click)="d3()">Prikaz veštačke neuronske mreže</button>
+    <div id="graph"></div>
+  </div>
+
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts b/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts
new file mode 100644
index 00000000..cb07ef1d
--- /dev/null
+++ b/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AnnvisualComponent } from './annvisual.component';
+
+describe('AnnvisualComponent', () => {
+  let component: AnnvisualComponent;
+  let fixture: ComponentFixture<AnnvisualComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AnnvisualComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnnvisualComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.ts b/frontend/src/app/_elements/annvisual/annvisual.component.ts
new file mode 100644
index 00000000..ff5b45d6
--- /dev/null
+++ b/frontend/src/app/_elements/annvisual/annvisual.component.ts
@@ -0,0 +1,47 @@
+import { Component, OnInit,Input } from '@angular/core';
+import Model from 'src/app/_data/Model';
+import { graphviz }  from 'd3-graphviz';
+
+@Component({
+  selector: 'app-annvisual',
+  templateUrl: './annvisual.component.html',
+  styleUrls: ['./annvisual.component.css']
+})
+export class AnnvisualComponent implements OnInit {
+  ngOnInit(): void {
+    throw new Error('Method not implemented.');
+  }
+
+  @Input() model: Model = new Model();
+
+  d3(){
+    let inputlayerstring:string='';
+    let hiddenlayerstring:string='';
+    let digraphstring:string='digraph {';
+
+    for(let i=0;i<this.model.inputNeurons;i++)
+    {
+      inputlayerstring=inputlayerstring+'i'+i+',';
+    }
+    inputlayerstring=inputlayerstring.slice(0,-1);
+
+    digraphstring=digraphstring+'->';
+
+    for(let j=0;j<this.model.hiddenLayers;j++)
+    {
+      for(let i=0;i<this.model.hiddenLayerNeurons;i++)
+      {
+        hiddenlayerstring=hiddenlayerstring+'h'+j+'_'+i+',';
+      }
+      hiddenlayerstring=hiddenlayerstring.slice(0,1);
+      digraphstring=digraphstring+hiddenlayerstring+'->';
+      hiddenlayerstring='';
+    }
+    digraphstring=digraphstring+'o}';
+    alert(digraphstring);
+    
+    graphviz('#graph').renderDot(digraphstring);
+    }
+
+
+}