p20319658
/
monkey
forked from p34709852/monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update index.js 

[x] Z-Indices sorting on hover
[x] Resize (viewBox solution]
[x] Rule correction, have excluded 'Unexecuted' parameter from the sum for Rule #1

Still on my today's TODO list:

[-] Still looking for an elegant solution to scrolling glitch.
     Yes, the easiest way is to hide tooltip on scrolling, but that's not cool

[-] Need some coding refining
This commit is contained in:
vkuchinov 2019-08-22 14:50:07 +03:00
parent 2174f43a84
commit 20e282f5fb
1 changed files with 37 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/VennDiagram/index.js
View File

@ -134,7 +134,7 @@ UPDATED [20.08.2019]
*/ */
const VENN_MIN_WIDTH = 256; const VENN_MIN_WIDTH = '300px';
class ResponsiveVennDiagram extends React.Component { class ResponsiveVennDiagram extends React.Component {
@ -149,8 +149,8 @@ class ResponsiveVennDiagram extends React.Component {
return ( return (
<div ref={this.divElement}> <div ref={this.divElement} style={{textAlign: 'center'}}>
<VennDiagram width={Math.max(childrenWidth, VENN_MIN_WIDTH)} height={Math.max(childrenHeight, VENN_MIN_WIDTH)} pillarsGrades={pillarsGrades} /> <VennDiagram style={{minWidth: VENN_MIN_WIDTH, minHeight: VENN_MIN_WIDTH}} pillarsGrades={pillarsGrades} />
</div> ) </div> )
} }
@ -173,17 +173,19 @@ class VennDiagram extends React.Component{
this.state = { tooltip: { top: 0, left: 0, display: 'none', html: '' } } this.state = { tooltip: { top: 0, left: 0, display: 'none', html: '' } }
this.width = this.height = 512, this.zOrder = [];
this.colors = ['#777777', '#D9534F', '#F0AD4E', '#5CB85C']; this.colors = ['#777777', '#D9534F', '#F0AD4E', '#5CB85C'];
this.prefix = 'vennDiagram'; this.prefix = 'vennDiagram';
this.suffices = ['', '|tests are|conclusive', '|tests were|inconclusive', '|tests|performed']; this.suffices = ['', '|tests are|conclusive', '|tests were|inconclusive', '|tests|performed'];
this.fontStyles = [{size: Math.max(9, this.props.width / 32), color: 'white'}, {size: Math.max(6, this.props.width / 52), color: 'black'}]; this.fontStyles = [{size: Math.max(9, this.width / 32), color: 'white'}, {size: Math.max(6, this.width / 52), color: 'black'}];
this.offset = this.props.width / 16; this.offset = this.width / 16;
this.thirdWidth = this.props.width / 3; this.thirdWidth = this.width / 3;
this.sixthWidth = this.props.width / 6; this.sixthWidth = this.width / 6;
this.width2By7 = 2 * this.props.width / 7 this.width2By7 = 2 * this.width / 7
this.width1By11 = this.props.width / 11; this.width1By11 = this.width / 11;
this.width1By28 = this.props.width / 28; this.width1By28 = this.width / 28;
this.toggle = false; this.toggle = false;
@ -207,8 +209,10 @@ class VennDiagram extends React.Component{
} }
_onMouseMove(e) { _onMouseMove(e) {
let self = this;
if(!this.toggle){ if(!this.toggle){
let hidden = 'none'; let hidden = 'none';
@ -218,17 +222,22 @@ class VennDiagram extends React.Component{
e.stopPropagation(); e.stopPropagation();
document.querySelectorAll('circle, path').forEach((d_, i_) => { d_.setAttribute('opacity', 0.8)}); document.querySelectorAll('circle, path').forEach((d_, i_) => { d_.setAttribute('opacity', 0.8)});
if(e.target.id.includes('Node')) { if(e.target.id.includes('Node')) {
html = e.target.dataset.tooltip; html = e.target.dataset.tooltip;
this.divElement.style.cursor = 'pointer'; this.divElement.style.cursor = 'pointer';
hidden = 'block'; e.target.setAttribute('opacity', 1.0); hidden = 'block'; e.target.setAttribute('opacity', 0.95);
bcolor = e.target.getAttribute('fill'); bcolor = e.target.getAttribute('fill');
//set highest z-index
e.target.parentNode.parentNode.appendChild(e.target.parentNode);
}else{ }else{
this.divElement.style.cursor = 'default'; this.divElement.style.cursor = 'default';
//return z indices to default
Object.keys(this.layout).forEach(function(d_, i_){ document.querySelector('#' + self.prefix).appendChild(document.querySelector('#' + self.prefix + 'Node_' + i_).parentNode); })
} }
@ -237,6 +246,13 @@ class VennDiagram extends React.Component{
} }
} }
_onMouseLeave(e){
let hidden = 'none';
this.setState({target: null, tooltip: { target: null, bcolor: 'none', top: 0, left: 0, display: hidden, html: '' } });
}
_onClick(e) { _onClick(e) {
if(this.state.tooltip.target === e.target) { this.toggle = true; } else { this.toggle = false; } if(this.state.tooltip.target === e.target) { this.toggle = true; } else { this.toggle = false; }
@ -263,7 +279,7 @@ class VennDiagram extends React.Component{
this.props.pillarsGrades.forEach((d_, i_) => { this.props.pillarsGrades.forEach((d_, i_) => {
let params = omit('pillar', d_); let params = omit('Unexpected', omit('pillar', d_));
let sum = Object.keys(params).reduce((sum_, key_) => sum_ + parseFloat(params[key_]||0), 0); let sum = Object.keys(params).reduce((sum_, key_) => sum_ + parseFloat(params[key_]||0), 0);
let key = TypographicUtilities.removeAmpersand(d_.pillar); let key = TypographicUtilities.removeAmpersand(d_.pillar);
let html = self.buildTooltipHtmlContent(d_); let html = self.buildTooltipHtmlContent(d_);
@ -302,8 +318,9 @@ class VennDiagram extends React.Component{
if(this.state.data === undefined) { return null; } if(this.state.data === undefined) { return null; }
else { else {
let { width, height } = this.props; //equivalent to center translate (width/2, height/2)
let translate = 'translate(' + width /2 + ',' + height/2 + ')'; let viewPortParameters = (-this.width / 2) + ' ' + (-this.height / 2) + ' ' + this.width + ' ' + this.height;
let translate = 'translate(' + this.width /2 + ',' + this.height/2 + ')';
let nodes = Object.values(this.layout).map((d_, i_) =>{ let nodes = Object.values(this.layout).map((d_, i_) =>{
@ -343,11 +360,9 @@ class VennDiagram extends React.Component{
return ( return (
<div id={this.prefix} ref={ (divElement) => this.divElement = divElement} onMouseMove={this._onMouseMove.bind(this)} onClick={this._onClick.bind(this)}> <div ref={ (divElement) => this.divElement = divElement} onMouseMove={this._onMouseMove.bind(this)} onMouseLeave={this._onMouseLeave.bind(this)} onClick={this._onClick.bind(this)}>
<svg width={width} height={height} xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'> <svg id={this.prefix} viewBox={viewPortParameters} width={'100%'} height={'100%'} xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
<g id={this.prefix + 'TransformGroup'} ref={'vennDiagram'} transform={translate}> {nodes}
{nodes}
</g>
</svg> </svg>
<Tooltip id={this.prefix + 'Tooltip'} prefix={this.prefix} {...this.state.tooltip} /> <Tooltip id={this.prefix + 'Tooltip'} prefix={this.prefix} {...this.state.tooltip} />
</div> </div>
@ -362,8 +377,6 @@ class VennDiagram extends React.Component{
VennDiagram.propTypes = { VennDiagram.propTypes = {
pillarsGrades: PropTypes.array, pillarsGrades: PropTypes.array
width: PropTypes.number,
height: PropTypes.number
} }