+
+ );
+
+ }
+
+}
+
+Tooltip.propTypes = {
+
+ prefix: PropTypes.string,
+ bcolor: PropTypes.string,
+ top: PropTypes.number,
+ left: PropTypes.number,
+ display: PropTypes.string,
+ html: PropTypes.string
+
+}
+
+export default Tooltip;
\ No newline at end of file
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/VennDiagram/index.css b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/VennDiagram/index.css
new file mode 100644
index 000000000..6c7cd778e
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/VennDiagram/index.css
@@ -0,0 +1,14 @@
+@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');
+
+body { margin: 0; font-family: "Noto Sans", sans-serif; }
+
+svg {
+
+ -webkit-touch-callout: none; /* iOS Safari */
+ -webkit-user-select: none; /* Safari */
+ -khtml-user-select: none; /* Konqueror HTML */
+ -moz-user-select: none; /* Firefox */
+ -ms-user-select: none; /* Internet Explorer/Edge */
+ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
+
+}
diff --git a/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/VennDiagram/index.js b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/VennDiagram/index.js
new file mode 100644
index 000000000..b221d4159
--- /dev/null
+++ b/monkey/monkey_island/cc/ui/src/components/report-components/zerotrust/VennDiagram/index.js
@@ -0,0 +1,369 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+import Dimensions from 'react-dimensions'
+import Tooltip from './Tooltip'
+import CircularNode from './CircularNode'
+import ArcNode from './ArcNode'
+import { TypographicUtilities } from './utility.js'
+import './index.css'
+
+/*
+
+TODO LIST
+
+UPDATED [21.08.2019]
+
+[-] SVG > ViewBox 0 0 512 512, so it would be responsive and scalable
+[-] Add resize listener to ResponsiveVennDiagram wrapper
+[-] I have noticed that you have PillarGrades at ZeroTrustReportPage, so how I can fetch the data out of it?
+
+UPDATED [20.08.2019]
+
+[x] I've seen that lots of D3 responsive examples are using 'wrapper' around the main component to
+ get parent container dimensions. And lister for resize.
+
+ So, here it's Responsive(VennDiagram)
+
+ If it doesn't work, I have another alternative:
+
+ import React, { useRef, useEffect, useState, useLayoutEffect } from 'react'
+
+ const ResponsiveVennDiagram = props => {
+
+ const minWidth = 256;
+ const targetRef = useRef();
+ const [dimensions, setDimensions] = useState({ width: 0, heigth: 0 });
+ let movement_timer = null;
+ const RESET_TIMEOUT = 100;
+
+ const checkForDimensionsUpdate = () => {
+
+ if (targetRef.current) {
+
+ setDimensions({
+
+ width: Math.min(targetRef.current.offsetWidth, targetRef.current.offsetHeight),
+ height: targetRef.current.offsetHeight
+
+ });
+
+ }
+ };
+
+ useLayoutEffect(() => { checkForDimensionsUpdate(); }, []);
+
+ window.addEventListener("resize", () => { clearInterval(movement_timer); movement_timer = setTimeout(checkForDimensionsUpdate, RESET_TIMEOUT); });
+
+ return (
+
+
+
+
+
+ );
+
+ };
+
+ ResponsiveVennDiagram.propTypes = {
+
+ pillarsGrades: PropTypes.array
+
+ }
+
+ export default ResponsiveVennDiagram;
+
+ While your diagram laout is squared, the VennDiaagram gets the min(width, height)
+
+[x] Colours have been updated.
+
+[x] String prototypes have been moved to '.utilities.js'
+
+[x] I have use the prefix 'vennDiagram' for all children elements to prevent naming conflicts with other components
+ DOM objects.
+
+[x] I have used PropTypes already a year ago on ThreeJS/ReactJS stack project.
+
+[!] External callback is still on my list, can you make a mockup for external function which have to get pillar variable?
+
+[!] Z-indices sorting on mouseover
+ Would be n my 21.08.2019 TODO list. With D3.JS it's an easy task, however would try do
+ make these z-soring without D3 framework.
+
+UPDATED [20.08.2019]
+
+[!] By now, there are three input props for VennDiagram component:
+ data, width and height.
+
+[-] Since layout has to be hardcoded, it's driven by this.layout object.
+ There're many ways of setting circles/arc positions, now I'm using the
+ stright-forward one.
+
+ Usually, I am put all hardcoded params to external JSON file, i.e config.json.
+ Let me know if it's a good idea.
+
+[-] Could rearange z-indecies for nodes on hover, so highlighted node would have highest z-index.
+[-] If you want callback on click even, please provide additional info what are you expecting to pass
+ through this.
+
+[!] I don't used to make lots of comments in my code, but treying to name everything in a way,
+ so third person could instantly get its job and concept.
+
+ If it is not enoough just let me know.
+
+[!] I have tried to avoid using D3 so much, especially its mouse events, cause it creates a bunch
+ of listeners for every children DOM elements. I have tried to use raw SVG objects.
+ The ArcNode is the only component where I've to call d3.arc constrictor.
+
+[!] There are lots of discussion over different blogs an forums that ReactJS and D3.JS have a DOM
+ issue conflict, [could find lots of articels at medium.org about that, for example,
+ https://medium.com/@tibotiber/react-d3-js-balancing-performance-developer-experience-4da35f912484].
+
+ Since the current component has only a few DOM elements, I don't thing we would have any troubles,
+ but please keep in mind that I could tweak current version with react-faux-dom.
+
+ Actually, by now, I'm using D3 only for math, for arc path calculations.
+
+[!] Don't mind about code spacings, it's just for me, the final code would be clear out of them.
+
+[-] On click, an EXTERNAL callback should be called with the pillar name as a parameter. That is to enable us to expand the click functionality in future without editing the internal implementation of the component.
+
+[-] planned, [x] done, [!] see comments
+
+@author Vladimir V KUCHINOV
+@email helloworld@vkuchinov.co.uk
+
+*/
+
+const VENN_MIN_WIDTH = 256;
+
+class ResponsiveVennDiagram extends React.Component {
+
+ constructor(props) { super(props); }
+ render() {
+
+ const {options, pillarsGrades} = this.props;
+ let childrenWidth = this.props.containerWidth, childrenHeight = this.props.containerHeight;
+
+ if(childrenHeight === 0 || childrenHeight === NaN){ childrenHeight = childrenWidth; }
+ else{ childrenWidth = Math.min(childrenWidth, childrenHeight) }
+
+ return (
+
+