Remove usless files
This commit is contained in:
parent
b29ffd0605
commit
ed2e4d4aa6
@ -1,8 +0,0 @@
|
||||
<div #tree></div>
|
||||
|
||||
<div *ngFor="let post of temp">
|
||||
{{ post.author }}
|
||||
{{ post.message }}
|
||||
</div>
|
||||
|
||||
<input type="file" (change)="parseFile($event)" />
|
||||
@ -1,5 +0,0 @@
|
||||
::ng-deep .link {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ViewDataComponent } from './view-data.component';
|
||||
|
||||
describe('ViewDataComponent', () => {
|
||||
let component: ViewDataComponent;
|
||||
let fixture: ComponentFixture<ViewDataComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ViewDataComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ViewDataComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -1,173 +0,0 @@
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
ViewChild,
|
||||
ElementRef,
|
||||
AfterViewInit,
|
||||
} from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import * as Papa from 'papaparse';
|
||||
import * as d3 from 'd3';
|
||||
|
||||
/* TODO: move this to separated files */
|
||||
|
||||
interface ForumData {
|
||||
id: string;
|
||||
name: string;
|
||||
discussions: Array<Discussion>;
|
||||
}
|
||||
|
||||
interface Discussion {
|
||||
title: string;
|
||||
id: string;
|
||||
first_post: string;
|
||||
posts: Array<Post>;
|
||||
}
|
||||
|
||||
interface Post {
|
||||
author: string;
|
||||
id: string;
|
||||
message: string;
|
||||
parent: string;
|
||||
children?: Post[] | null;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-view-data',
|
||||
templateUrl: './view-data.component.html',
|
||||
styleUrls: ['./view-data.component.scss'],
|
||||
})
|
||||
export class ViewDataComponent implements OnInit, AfterViewInit {
|
||||
@ViewChild('tree', { read: ElementRef })
|
||||
private treeContainer: ElementRef;
|
||||
|
||||
data: ForumData;
|
||||
temp: Array<Post>;
|
||||
names: Array<{ id: string; name: string }>;
|
||||
|
||||
constructor(private router: Router) {
|
||||
const fetch = JSON.parse(
|
||||
this.router.getCurrentNavigation()?.extras.state?.data
|
||||
);
|
||||
this.data = fetch as ForumData;
|
||||
this.temp = this.data.discussions[0].posts as Post[];
|
||||
}
|
||||
|
||||
parsedData = (file: any): Promise<{ id: string; name: string }[]> => {
|
||||
return new Promise((resolve, _) => {
|
||||
Papa.parse(file, {
|
||||
header: true,
|
||||
skipEmptyLines: true,
|
||||
complete: (result) => {
|
||||
resolve(result.data as { id: string; name: string }[]);
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
async parseFile(e: any) {
|
||||
let tempNames: Array<{ id: string; name: string }>;
|
||||
|
||||
const file = e.target.files[0];
|
||||
tempNames = await this.parsedData(file);
|
||||
|
||||
this.temp = this.temp.map((item) => {
|
||||
const index = tempNames.findIndex((data) => data.id === item.author);
|
||||
item.author = index !== -1 ? tempNames[index].name : item.author;
|
||||
return item;
|
||||
});
|
||||
}
|
||||
|
||||
makeHierarchy(): void {
|
||||
const posts = this.data.discussions[0].posts;
|
||||
const tree: Array<Post> = [];
|
||||
const childOf = {} as any;
|
||||
posts.forEach((item) => {
|
||||
const { id, parent } = item;
|
||||
childOf[id] = childOf[id] || [];
|
||||
item.children = childOf[id];
|
||||
if (parent !== '0') {
|
||||
(childOf[parent] = childOf[parent] || []).push(item);
|
||||
} else {
|
||||
tree.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
const margin = { top: 50, right: 90, bottom: 30, left: 90 };
|
||||
const width = 660 - margin.left - margin.right;
|
||||
const height = 500 - margin.top - margin.bottom;
|
||||
|
||||
const treemap = d3.tree<any>().size([width, height]);
|
||||
const nodes = d3.hierarchy<any>(tree[0]);
|
||||
treemap(nodes);
|
||||
|
||||
const element = this.treeContainer.nativeElement;
|
||||
|
||||
const tooltip = d3
|
||||
.select(element)
|
||||
.append('div')
|
||||
.attr('class', 'tooltip')
|
||||
.style('position', 'absolute')
|
||||
.style('opacity', 0);
|
||||
|
||||
const svg = d3
|
||||
.select(element)
|
||||
.append('svg')
|
||||
.attr('width', width + margin.left + margin.right)
|
||||
.attr('height', height + margin.top + margin.bottom);
|
||||
|
||||
const group = svg
|
||||
.append('g')
|
||||
.attr(`transform`, `translate(${margin.left},${margin.top})`);
|
||||
|
||||
const gLink = group.append('g').attr('class', 'links');
|
||||
const gNode = group.append('g').attr('class', 'nodes');
|
||||
const node = gNode.selectAll('g.nodes').data(nodes.descendants());
|
||||
const nodeEnter = node.enter().append('g').classed('node', true);
|
||||
|
||||
gLink
|
||||
.selectAll('g.links')
|
||||
.data(nodes.links())
|
||||
.enter()
|
||||
.append('line')
|
||||
.classed('link', true)
|
||||
.attr('x1', (d: any) => d.source.x)
|
||||
.attr('y1', (d: any) => d.source.y)
|
||||
.attr('x2', (d: any) => d.target.x)
|
||||
.attr('y2', (d: any) => d.target.y);
|
||||
|
||||
nodeEnter
|
||||
.append('circle')
|
||||
.attr('cx', (d: any) => d.x)
|
||||
.attr('cy', (d: any) => d.y)
|
||||
.attr('r', 25)
|
||||
.style('fill', '#fff')
|
||||
.style('stroke', '#ccc')
|
||||
.on('mouseover', (d) => {
|
||||
tooltip.transition().duration(400).style('opacity', 1);
|
||||
tooltip
|
||||
.html(`Wiadomość:<br> ${d.data.message}`)
|
||||
.style('width', '15rem')
|
||||
.style('background-color', '#fff')
|
||||
.style('border', '1px solid black')
|
||||
.style('left', `${d3.event.pageX + 40}px`)
|
||||
.style('top', `${d3.event.pageY - 10}px`);
|
||||
})
|
||||
.on('mouseout', function (d) {
|
||||
tooltip.transition().duration(400).style('opacity', 0);
|
||||
});
|
||||
|
||||
nodeEnter
|
||||
.append('text')
|
||||
.attr('x', (d: any) => d.x)
|
||||
.attr('y', (d: any) => d.y)
|
||||
.attr('text-anchor', 'middle')
|
||||
.text((d: any) => d.data.id);
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
this.makeHierarchy();
|
||||
}
|
||||
|
||||
ngOnInit(): void {}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ViewDataComponent } from './view-data/view-data.component';
|
||||
|
||||
import { NbLayoutModule, NbCardModule, NbTreeGridModule } from '@nebular/theme';
|
||||
|
||||
@NgModule({
|
||||
declarations: [ViewDataComponent],
|
||||
imports: [CommonModule, NbLayoutModule, NbCardModule, NbTreeGridModule],
|
||||
exports: [ViewDataComponent],
|
||||
})
|
||||
export class ViewModule {}
|
||||
Loading…
Reference in New Issue
Block a user