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