s434776/PRI_2020-FE
2
0
Fork 0
Code Issues Pull Requests Releases Activity

Fix text overflow in graph

Browse Source
This commit is contained in:
Michał Romaszkin 2020-07-01 20:38:46 +02:00
parent 0d6cee71df
commit f050e13290
2 changed files with 40 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/app/main-view/visualize-forum/visualize-forum.component.scss
View File

@ -3,3 +3,16 @@
stroke: #000;
stroke-width: 2px;
}
::ng-deep .tooltip {
width: 25rem;
background-color: #ffffff;
border: 0.0625rem solid #e4e9f2;
border-radius: 0.25rem;
padding: 1rem;
max-height: 20rem;
overflow: hidden;
h6 {
margin: 0;
}
}

35
frontend/src/app/main-view/visualize-forum/visualize-forum.component.ts
View File

@ -51,7 +51,7 @@ export class VisualizeForumComponent implements AfterViewInit, OnDestroy {
private generateGraph(): void {
/* ToDo: Add option to change sizes */
const margin = { top: 50, right: 90, bottom: 30, left: 90 };
const width = 660 - margin.left - margin.right;
const width = 860 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;
const hierarchizedNodes = d3.hierarchy<Post>(this.hierarchizedData[0]);
@ -112,15 +112,34 @@ export class VisualizeForumComponent implements AfterViewInit, OnDestroy {
.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`);
.html(
/* HTML */
`
<h6>Wiadomość:</h6>
<p>${d.data.message}</p>
`
)
// .style('width', '15rem')
// .style('max-height', '10rem')
// .style('overflow', 'hidden')
// .style('text-overflow', 'ellipsis')
// .style('background-color', '#fff')
// .style('border', '1px solid black')
.style('left', `${d3.event.pageX}px`)
.style('top', `${d3.event.pageY}px`);
})
.on('mouseout', function (d) {
tooltip.transition().duration(400).style('opacity', 0);
tooltip
.transition()
.duration(400)
.style('opacity', 0)
.style('top', '0')
.style('left', '0');
})
.on('mousemove', function (d) {
return tooltip
.style('top', `${d3.event.pageY - 55}px`)
.style('left', `${d3.event.pageX + 30}px`);
});
/* 'Enter' into links and style them properly */