New Version of the Venn Diagram

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/ArcNode.js

@@ -11,11 +11,11 @@ class ArcNode extends React.Component {
     let id = prefix + 'Node_' + index;
 
     return (
-      <OverlayTrigger key={prefix + 'ArcOverlayTrigger' + index} trigger={['hover', 'focus']} placement={data.popover}
+      <OverlayTrigger key={prefix + 'arcGroup' + index} trigger={['hover', 'focus']} placement={data.popover}
-                      overlay={<Popover key={prefix + 'ArcTooltip' + index} id={prefix + '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}>
+        <g transform={'rotate(180)'} id={data.node.pillar} key={prefix + 'arcGroup' + index}>
           <path
 
             id={prefix + 'Node_' + index}
@@ -25,10 +25,11 @@ class ArcNode extends React.Component {
             fill={data.hex}
 
           />
-          <text x={0} dy={data.fontStyle.size * 1.2} fontSize={data.fontStyle.size} textAnchor='middle'
+          <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%'}>
-              {data.label}
+              <tspan fontFamily={'FontAwesome'}>{data.icon + '\u2000'}</tspan>
+              <tspan>{data.label}</tspan>
             </textPath>
           </text>
         </g>

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/CircularNode.js

@@ -9,12 +9,11 @@ class CircularNode extends React.Component {
 
     let translate = 'translate(' + data.cx + ',' + data.cy + ')';
     return (
-      <OverlayTrigger key={prefix + 'CircularOverlayTrigger' + index} trigger={['hover', 'focus']}
+      <OverlayTrigger key={prefix + 'circularGroup' + index} trigger={['hover', 'focus']} placement={data.popover}
-                      placement={data.popover}
+                      overlay={<Popover key={prefix + 'CircularTooltip' + index} id={prefix + 'Popover' + index}
-                      overlay={<Popover key={prefix + 'CircularTooltip' + index} id={prefix + 'Popover'}
                                         style={{backgroundColor: data.hex}}
                                         title={data.node.pillar}>{data.tooltip}</Popover>}>
-        <g transform={translate} id={data.node.pillar}>
+        <g transform={translate} id={data.node.pillar} key={prefix + 'circularGroup' + index}>
           <circle
             id={prefix + 'Node_' + index}
             className={'circularNode'}

monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/venn-components/VennDiagram.js

@@ -15,9 +15,8 @@ class VennDiagram extends React.Component {
     this.width = this.height = 512;
 
     this.prefix = 'vennDiagram';
-    this.suffices = ['', '|tests are|failed', '|tests were|inconclusive', '|tests|performed'];
     this.fontStyles = [{size: Math.max(9, this.width / 32), color: 'white'}, {
-      size: Math.max(6, this.width / 52),
+      size: Math.max(6, this.width / 80),
       color: 'black'
     }];
     this.offset = this.width / 16;
@@ -36,11 +35,12 @@ class VennDiagram extends React.Component {
       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'},
+      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, popover: 'right'},
+      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,
+        icon: '\uf085',
         popover: 'right'
       }
     };
@@ -123,16 +123,9 @@ class VennDiagram extends React.Component {
 
     }
   }
-
+    
-  _onClick(e) {
-    this.toggle = this.state.tooltip.target === e.target;
-
-    //variable to external callback
-    //e.target.parentNode.id)
-  }
-
   parseData() {
-
+      
     let self = this;
     let data = [];
     const omit = (prop, {[prop]: _, ...rest}) => rest;
@@ -140,6 +133,7 @@ class VennDiagram extends React.Component {
     this.props.pillarsGrades.forEach((d_, i_) => {
 
       let params = omit('pillar', d_);
+      let sum = Object.keys(params).reduce((sum_, key_) => sum_ + parseFloat(params[key_] || 0), 0);
       let key = TypographicUtilities.removeAmpersand(d_.pillar);
       let html = self.buildTooltipHtmlContent(params);
       let rule = null;
@@ -159,15 +153,13 @@ class VennDiagram extends React.Component {
     this.setState({data: data});
     this.render();
   }
-
+    
   buildTooltipHtmlContent(object_) {
 
     var out = [];
-    Object.keys(object_).forEach(function (d_) {
+    Object.keys(object_).forEach(function(d_){ out.push([d_ + ': ' + object_[d_], <br />]); });
-      out.push([d_ + ': ' + object_[d_], <br/>]);
+    return out;                                                     
-    });
+                                                         
-    return out;
-
   }
 
   setLayoutElement(rule_, key_, html_, d_) {
@@ -183,7 +175,7 @@ class VennDiagram extends React.Component {
 
     this.layout[key_].hex = this.rules[rule_].hex;
     this.layout[key_].status = this.rules[rule_].status;
-    this.layout[key_].label = d_.pillar + this.suffices[rule_];
+    this.layout[key_].label = d_.pillar;
     this.layout[key_].node = d_;
     this.layout[key_].tooltip = html_;
   }
@@ -219,12 +211,11 @@ class VennDiagram extends React.Component {
       });
 
       return (
-        <div ref={(divElement) => this.divElement = divElement} onMouseMove={this._onMouseMove.bind(this)}
+        <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%'}
-          <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>
       )
     }