forked from p34709852/monkey
Venn diagram - new version from Vladimir
This commit is contained in:
Shay Nehmad
parent
641308c91b
commit
8136c31476
|
|
@ -1,9 +1,14 @@
|
|||
import React from 'react'
|
||||
import PropTypes from 'prop-types';
|
||||
import {Popover, OverlayTrigger} from 'react-bootstrap';
|
||||
import { Popover, OverlayTrigger } from 'react-bootstrap';
|
||||
import * as d3 from 'd3'
|
||||
|
||||
class ArcNode extends React.Component {
|
||||
|
||||
handleClick(e_) { this.props.disableHover(this.refs.overlay); }
|
||||
handleOver(e_) { if(this.props.hover) { this.refs.overlay.show(); } }
|
||||
handleOut(e_) { if(this.props.hover){ this.refs.overlay.hide(); } }
|
||||
|
||||
render() {
|
||||
let {prefix, index, data} = this.props;
|
||||
|
||||
|
|
@ -11,29 +16,29 @@ class ArcNode extends React.Component {
|
|||
let id = prefix + 'Node_' + index;
|
||||
|
||||
return (
|
||||
<OverlayTrigger key={prefix + 'arcGroup' + index} trigger={['hover', 'focus']} placement={data.popover}
|
||||
overlay={<Popover key={prefix + 'ArcTooltip' + index} id={prefix + 'Popover' + index}
|
||||
style={{backgroundColor: data.hex}}
|
||||
title={data.node.pillar}>{data.tooltip}</Popover>}>
|
||||
<g transform={'rotate(180)'} id={data.node.pillar} key={prefix + 'arcGroup' + index}>
|
||||
<path
|
||||
<g transform={'rotate(180)'} id={data.node.pillar} key={prefix + 'arcGroup' + index}>
|
||||
<OverlayTrigger ref={'overlay'} key={prefix + 'arcOverlayTrigger' + index} trigger={null} placement={data.popover} overlay={<Popover id={prefix + 'ArcPopover' + index} style={{backgroundColor: data.hex}} title={data.node.pillar}>{data.tooltip}</Popover>} rootClose>
|
||||
<path
|
||||
|
||||
id={prefix + 'Node_' + index}
|
||||
className={'arcNode'}
|
||||
data-tooltip={data.tooltip}
|
||||
d={arc()}
|
||||
fill={data.hex}
|
||||
id={prefix + 'Node_' + index}
|
||||
className={'arcNode'}
|
||||
data-tooltip={data.tooltip}
|
||||
d={arc()}
|
||||
fill={data.hex}
|
||||
onClick={this.handleClick.bind(this)}
|
||||
onMouseEnter={this.handleOver.bind(this)}
|
||||
onMouseLeave={this.handleOut.bind(this)}
|
||||
|
||||
/>
|
||||
<text x={0} dy={data.fontStyle.size * 1.75} fontSize={data.fontStyle.size} fill={'white'} textAnchor='middle'
|
||||
pointerEvents={'none'}>
|
||||
<textPath href={'#' + id} startOffset={'26.4%'}>
|
||||
<tspan fontFamily={'FontAwesome'}>{data.icon + '\u2000'}</tspan>
|
||||
<tspan>{data.label}</tspan>
|
||||
</textPath>
|
||||
</text>
|
||||
</g>
|
||||
</OverlayTrigger>
|
||||
/>
|
||||
</OverlayTrigger>
|
||||
<text x={0} dy={data.fontStyle.size * 1.2} fontSize={data.fontStyle.size} fill={'white'} textAnchor='middle'
|
||||
pointerEvents={'none'}>
|
||||
<textPath href={'#' + id} startOffset={'26.4%'}>
|
||||
<tspan fontFamily={'FontAwesome'}>{data.icon + '\u2000'}</tspan>
|
||||
<tspan>{data.label}</tspan>
|
||||
</textPath>
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,35 +1,38 @@
|
|||
import React from 'react'
|
||||
import PillarLabel from "../PillarLabel";
|
||||
import {Popover, OverlayTrigger} from 'react-bootstrap';
|
||||
import { Popover, OverlayTrigger } from 'react-bootstrap';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
class CircularNode extends React.Component {
|
||||
|
||||
handleClick(e_) { this.props.disableHover(this.refs.overlay); }
|
||||
handleOver(e_) { if(this.props.hover) { this.refs.overlay.show(); } }
|
||||
handleOut(e_) { if(this.props.hover){ this.refs.overlay.hide(); } }
|
||||
|
||||
render() {
|
||||
let {prefix, index, data} = this.props;
|
||||
|
||||
let translate = 'translate(' + data.cx + ',' + data.cy + ')';
|
||||
return (
|
||||
<OverlayTrigger key={prefix + 'circularGroup' + index} trigger={['hover', 'focus']} placement={data.popover}
|
||||
overlay={<Popover key={prefix + 'CircularTooltip' + index} id={prefix + 'Popover' + index}
|
||||
style={{backgroundColor: data.hex}}
|
||||
title={data.node.pillar}>{data.tooltip}</Popover>}>
|
||||
<g transform={translate} id={data.node.pillar} key={prefix + 'circularGroup' + index}>
|
||||
<circle
|
||||
id={prefix + 'Node_' + index}
|
||||
className={'circularNode'}
|
||||
data-tooltip={data.tooltip}
|
||||
r={data.r}
|
||||
opacity={0.8}
|
||||
fill={data.hex}
|
||||
/>
|
||||
<foreignObject style={{fontSize: data.fontStyle.size, pointerEvents: 'none'}}
|
||||
key={prefix + 'PillarLabel' + index} x={data.offset.x - data.fontStyle.size * 6}
|
||||
y={data.offset.y - data.fontStyle.size} width={data.fontStyle.size * 12}
|
||||
height={data.fontStyle.size * 6}>
|
||||
<PillarLabel pillar={data.node.pillar} status={data.status}/>
|
||||
</foreignObject>
|
||||
</g>
|
||||
</OverlayTrigger>
|
||||
<g transform={translate} id={data.node.pillar} key={prefix + 'circularGroup' + index}>
|
||||
<OverlayTrigger ref={'overlay'} key={prefix + 'CircularOverlay' + index} trigger={null} placement={data.popover} overlay={<Popover id={prefix + 'CircularClickPopover' + index} style={{backgroundColor : data.hex}} title={data.node.pillar}>{data.tooltip}</Popover>} rootClose>
|
||||
<circle
|
||||
id={prefix + 'Node_' + index}
|
||||
className={'circularNode'}
|
||||
data-tooltip={data.tooltip}
|
||||
r={data.r}
|
||||
opacity={0.8}
|
||||
fill={data.hex}
|
||||
onClick={this.handleClick.bind(this)}
|
||||
onMouseEnter={this.handleOver.bind(this)}
|
||||
onMouseLeave={this.handleOut.bind(this)}
|
||||
|
||||
/>
|
||||
</OverlayTrigger>
|
||||
<foreignObject style={{fontSize: data.fontStyle.size, pointerEvents: 'none'}} key={prefix + 'PillarLabelOject' + index} x={data.offset.x - data.fontStyle.size * 6} y={data.offset.y - data.fontStyle.size} width={ data.fontStyle.size * 12} height={data.fontStyle.size * 6}>
|
||||
<PillarLabel key={prefix + 'PillarLabel' + index} pillar={data.node.pillar} status={data.status} />
|
||||
</foreignObject>
|
||||
</g>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,44 +10,29 @@ class VennDiagram extends React.Component {
|
|||
constructor(props_) {
|
||||
super(props_);
|
||||
|
||||
this.state = {tooltip: {top: 0, left: 0, display: 'none', html: ''}};
|
||||
this.state = {hover: true, currentPopover: undefined};
|
||||
this._disableHover = this._disableHover.bind(this);
|
||||
|
||||
this.width = this.height = 512;
|
||||
|
||||
this.prefix = 'vennDiagram';
|
||||
this.fontStyles = [{size: Math.max(9, this.width / 32), color: 'white'}, {
|
||||
size: Math.max(6, this.width / 80),
|
||||
color: 'black'
|
||||
}];
|
||||
this.fontStyles = [{size: Math.max(9, this.width / 28), color: 'white'}, { size: Math.max(6, this.width / 38), color: 'white'}, { size: Math.max(6, this.width / 48), color: 'white'} ];
|
||||
this.offset = this.width / 16;
|
||||
|
||||
this.thirdWidth = this.width / 3;
|
||||
this.sixthWidth = this.width / 6;
|
||||
this.width11By2 = this.width / 5.5;
|
||||
this.width2By7 = 2 * this.width / 7;
|
||||
this.width1By11 = this.width / 11;
|
||||
this.width1By28 = this.width / 28;
|
||||
this.arcNodesGap = 4;
|
||||
|
||||
this.toggle = false;
|
||||
|
||||
this.layout = {
|
||||
Data: {cx: 0, cy: 0, r: this.sixthWidth, offset: {x: 0, y: 0}, popover: 'top'},
|
||||
People: {cx: -this.width2By7, cy: 0, r: this.sixthWidth, offset: {x: this.width1By11, y: 0}, popover: 'right'},
|
||||
Networks: {cx: this.width2By7, cy: 0, r: this.sixthWidth, offset: {x: -this.width1By11, y: 0}, popover: 'left'},
|
||||
Devices: {cx: 0, cy: this.width2By7, r: this.sixthWidth, offset: {x: 0, y: -this.width1By11}, popover: 'top'},
|
||||
Workloads: {
|
||||
cx: 0,
|
||||
cy: -this.width2By7,
|
||||
r: this.sixthWidth,
|
||||
offset: {x: 0, y: this.width1By11},
|
||||
popover: 'bottom'
|
||||
},
|
||||
VisibilityAndAnalytics: {
|
||||
inner: this.thirdWidth - this.width1By28,
|
||||
outer: this.thirdWidth,
|
||||
icon: '\uf070',
|
||||
popover: 'right'
|
||||
},
|
||||
Data: {cx: 0, cy: 0, r: this.width11By2, offset: {x: 0, y: 0}, popover: 'top'},
|
||||
People: {cx: -this.width2By7, cy: 0, r: this.width11By2, offset: {x: this.width1By11 + this.fontStyles[1].size / 5 * 3, y: 0}, popover: 'right'},
|
||||
Networks: {cx: this.width2By7, cy: 0, r: this.width11By2, offset: {x: -this.width1By11 - this.fontStyles[1].size / 5 * 3, y: 0}, popover: 'left'},
|
||||
Devices: {cx: 0, cy: this.width2By7, r: this.width11By2, offset: {x: 0, y: -this.width1By11 + this.fontStyles[1].size / 6 * 3}, popover: 'top'},
|
||||
Workloads: {cx: 0, cy: -this.width2By7, r: this.width11By2, offset: {x: 0, y: this.width1By11}, popover: 'bottom' },
|
||||
VisibilityAndAnalytics: {inner: this.thirdWidth - this.width1By28, outer: this.thirdWidth, icon: '\uf070', popover: 'left'},
|
||||
AutomationAndOrchestration: {
|
||||
inner: this.thirdWidth - this.width1By28 * 2 - this.arcNodesGap,
|
||||
outer: this.thirdWidth - this.width1By28 - this.arcNodesGap,
|
||||
|
|
@ -68,6 +53,8 @@ class VennDiagram extends React.Component {
|
|||
sum(C, I) > 0 and C * I = 0, while C has to be 0
|
||||
|
||||
RULE #4: By process of elimination, passed.
|
||||
if the P is bigger by 2 then negative U, first conditional
|
||||
would be true.
|
||||
|
||||
*/
|
||||
|
||||
|
|
@ -98,38 +85,47 @@ class VennDiagram extends React.Component {
|
|||
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.parseData();
|
||||
}
|
||||
componentDidMount() { this.parseData(); if(this.state.currentPopover !== undefined) { this.state.currentPopover.show(); } }
|
||||
|
||||
_disableHover(ref_) { this.setState({hover: false, currentPopover: ref_, data: this.state.data }); }
|
||||
|
||||
_onMouseMove(e) {
|
||||
|
||||
let self = this;
|
||||
|
||||
if (!this.toggle) {
|
||||
let hidden = 'none';
|
||||
let html = '';
|
||||
let bcolor = '#DEDEDE';
|
||||
let hidden = 'none';
|
||||
let html = '';
|
||||
let bcolor = '#DEDEDE';
|
||||
|
||||
document.querySelectorAll('circle, path').forEach((d_, i_) => {
|
||||
d_.setAttribute('opacity', "0.8");
|
||||
});
|
||||
if(this.state.currentPopover !== undefined) { this.state.currentPopover.show(); }
|
||||
|
||||
if (e.target.id.includes('Node')) {
|
||||
document.querySelectorAll('circle, path').forEach((d_, i_) => {
|
||||
d_.setAttribute('opacity', "0.8");
|
||||
});
|
||||
|
||||
if (e.target.id.includes('Node')) {
|
||||
|
||||
e.target.setAttribute('opacity', 0.95);
|
||||
|
||||
// Set highest z-index
|
||||
e.target.parentNode.parentNode.appendChild(e.target.parentNode);
|
||||
} else {
|
||||
|
||||
} else {
|
||||
|
||||
// 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);
|
||||
})
|
||||
}
|
||||
|
||||
document.querySelector('#' + self.prefix).appendChild(document.querySelector('#' + self.prefix + 'Node_' + i_).parentNode); })
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
_onClick(e) {
|
||||
|
||||
if (!e.target.id.includes('Node')) {
|
||||
|
||||
this.state.currentPopover.hide();
|
||||
this.setState({hover: true, currentPopover: undefined, data: this.state.data });
|
||||
}
|
||||
}
|
||||
|
||||
parseData() {
|
||||
|
|
@ -158,30 +154,28 @@ class VennDiagram extends React.Component {
|
|||
|
||||
});
|
||||
|
||||
this.setState({data: data});
|
||||
this.setState({hover: true, activePopover: undefined, data: data});
|
||||
this.render();
|
||||
}
|
||||
|
||||
buildTooltipHtmlContent(object_) {
|
||||
|
||||
var out = [];
|
||||
Object.keys(object_).forEach(function (d_) {
|
||||
out.push([d_ + ': ' + object_[d_], <br/>]);
|
||||
});
|
||||
return out;
|
||||
|
||||
return Object.keys(object_).map((key_, i_) => { return ( <p key={this.prefix + key_ + i_}>{key_}: {object_[key_]}</p> ) })
|
||||
}
|
||||
|
||||
setLayoutElement(rule_, key_, html_, d_) {
|
||||
if (rule_ == null) {
|
||||
throw Error('The node scores are invalid');
|
||||
}
|
||||
|
||||
if(rule_ === null) { console.log(Error('The node scores are invalid, please check the data or the rules set.')); }
|
||||
|
||||
if (key_ === 'Data') {
|
||||
this.layout[key_].fontStyle = this.fontStyles[0];
|
||||
} else {
|
||||
}
|
||||
else if(this.layout[key_].hasOwnProperty('cx')){
|
||||
this.layout[key_].fontStyle = this.fontStyles[1];
|
||||
}
|
||||
else {
|
||||
this.layout[key_].fontStyle = this.fontStyles[2];
|
||||
}
|
||||
|
||||
this.layout[key_].hex = this.rules[rule_].hex;
|
||||
this.layout[key_].status = this.rules[rule_].status;
|
||||
|
|
@ -196,7 +190,6 @@ class VennDiagram extends React.Component {
|
|||
} else {
|
||||
// equivalent to center translate (width/2, height/2)
|
||||
let viewPortParameters = (-this.width / 2) + ' ' + (-this.height / 2) + ' ' + this.width + ' ' + this.height;
|
||||
|
||||
let nodes = Object.values(this.layout).map((d_, i_) => {
|
||||
if (d_.hasOwnProperty('cx')) {
|
||||
return (
|
||||
|
|
@ -205,6 +198,8 @@ class VennDiagram extends React.Component {
|
|||
key={this.prefix + 'CircularNode' + i_}
|
||||
index={i_}
|
||||
data={d_}
|
||||
hover={this.state.hover}
|
||||
disableHover={this._disableHover}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
|
|
@ -215,17 +210,19 @@ class VennDiagram extends React.Component {
|
|||
key={this.prefix + 'ArcNode' + i_}
|
||||
index={i_}
|
||||
data={d_}
|
||||
hover={this.state.hover}
|
||||
disableHover={this._disableHover}
|
||||
/>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={(divElement) => this.divElement = divElement} onMouseMove={this._onMouseMove.bind(this)}>
|
||||
<svg id={this.prefix} viewBox={viewPortParameters} width={'100%'} height={'100%'}
|
||||
<div ref={(divElement) => this.divElement = divElement} onMouseMove={this._onMouseMove.bind(this)} onClick={this._onClick.bind(this)}>
|
||||
<svg id={this.prefix} viewBox={viewPortParameters} width={'100%'} height={'100%'}
|
||||
xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink'>
|
||||
{nodes}
|
||||
</svg>
|
||||
</svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue