[Graph] Type and reactify venn diagram (#45770) (#46031)

x-pack/legacy/plugins/graph/public/angular/templates/_sidebar.scss

@@ -64,20 +64,9 @@
 }
 
 /**
- * Link summary / Venn Diagram
+ * Link summary
  */
 
-.gphLinkSummary__venn {
-  .venn1 {
-    fill: $euiColorDanger;
-    fill-opacity:0.5;
-  }
-  .venn2 {
-    fill: $euiColorPrimary;
-    fill-opacity:0.5;
-  }
-}
-
 .gphLinkSummary__term--1 {
   color:$euiColorDanger;
 }

x-pack/legacy/plugins/graph/public/angular/templates/index.html

@@ -560,7 +560,7 @@
           </span>
 
           <!-- Venn diagram of term/shared doc intersections -->
-          <div class="gphLinkSummary__venn" venn="mc"></div>
+          <venn-diagram left-value="mc.v1" right-value="mc.v2" overlap="mc.overlap"></venn-diagram>
 
           <small
             class="gphLinkSummary__term--1"

x-pack/legacy/plugins/graph/public/app.js

@@ -41,10 +41,10 @@ import listingTemplate from './angular/templates/listing_ng_wrapper.html';
 import { getReadonlyBadge } from './badge';
 import { FormattedMessage } from '@kbn/i18n/react';
 
+import { VennDiagram } from './components/venn_diagram';
 import { Listing } from './components/listing';
 import { Settings } from './components/settings';
 
-import './angular/angular_venn_simple.js';
 import gws from './angular/graph_client_workspace.js';
 import { SavedWorkspacesProvider } from './angular/services/saved_workspaces';
 import {
@@ -89,6 +89,10 @@ app.directive('focusOn', function () {
   };
 });
 
+app.directive('vennDiagram', function (reactDirective) {
+  return reactDirective(VennDiagram);
+});
+
 app.directive('graphListing', function (reactDirective) {
   return reactDirective(Listing);
 });
@@ -665,9 +669,8 @@ app.controller('graphuiPlugin', function (
         'term2': ti.term2,
         'v1': ti.v1,
         'v2': ti.v2,
-        'overlap': ti.overlap,
-        width: 100,
-        height: 60 });
+        'overlap': ti.overlap
+      });
 
     }
     $scope.detail = { mergeCandidates };

x-pack/legacy/plugins/graph/public/components/_index.scss

@@ -1 +1,2 @@
+@import './venn_diagram/index';
 @import './settings/index';

x-pack/legacy/plugins/graph/public/components/venn_diagram/_index.scss

@@ -0,0 +1 @@
+@import './venn_diagram';

x-pack/legacy/plugins/graph/public/components/venn_diagram/_venn_diagram.scss

@@ -0,0 +1,9 @@
+.gphVennDiagram__left {
+  fill: $euiColorDanger;
+  fill-opacity: 0.5;
+}
+
+.gphVennDiagram__right {
+  fill: $euiColorPrimary;
+  fill-opacity: 0.5;
+}

x-pack/legacy/plugins/graph/public/components/venn_diagram/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './venn_diagram';

x-pack/legacy/plugins/graph/public/components/venn_diagram/venn_diagram.test.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { VennDiagram } from './venn_diagram';
+
+describe('venn_diagram', () => {
+  it('should render svg with correct coordinates', () => {
+    const instance = shallow(<VennDiagram leftValue={30} rightValue={60} overlap={6} />);
+    expect(instance).toMatchInlineSnapshot(`
+      <div>
+        <svg
+          height={60}
+          viewBox="0 0 17.480774889473267 8.740387444736633"
+          width={100}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g>
+            <circle
+              className="gphVennDiagram__left"
+              cx={5.284377114585398}
+              cy={4.370193722368317}
+              r={3.0901936161855166}
+            />
+            <circle
+              className="gphVennDiagram__right"
+              cx={10.91639766870507}
+              cy={4.370193722368317}
+              r={4.370193722368317}
+            />
+          </g>
+        </svg>
+      </div>
+    `);
+  });
+
+  it('should also work for very big numbers', () => {
+    const instance = shallow(<VennDiagram leftValue={30000} rightValue={60000} overlap={6000} />);
+    expect(instance).toMatchInlineSnapshot(`
+      <div>
+        <svg
+          height={60}
+          viewBox="0 0 552.7906391541368 276.3953195770684"
+          width={100}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g>
+            <circle
+              className="gphVennDiagram__left"
+              cx={167.10667697398674}
+              cy={138.1976597885342}
+              r={97.720502380584}
+            />
+            <circle
+              className="gphVennDiagram__right"
+              cx={345.20680477219986}
+              cy={138.1976597885342}
+              r={138.1976597885342}
+            />
+          </g>
+        </svg>
+      </div>
+    `);
+  });
+});

x-pack/legacy/plugins/graph/public/components/venn_diagram/venn_diagram.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+// @ts-ignore
+import { distanceFromIntersectArea } from 'venn.js';
+import React from 'react';
+
+export interface VennDiagramProps {
+  leftValue: number;
+  rightValue: number;
+  overlap: number;
+}
+
+function getRadius(area: number) {
+  return Math.sqrt(area / Math.PI);
+}
+
+export function VennDiagram({ leftValue, rightValue, overlap }: VennDiagramProps) {
+  const leftRadius = getRadius(leftValue);
+  const rightRadius = getRadius(rightValue);
+
+  const maxRadius = Math.max(leftRadius, rightRadius);
+
+  const imageHeight = maxRadius * 2;
+  const imageWidth = maxRadius * 4;
+
+  const leftCenter = leftRadius;
+  const rightCenter = leftCenter + distanceFromIntersectArea(leftRadius, rightRadius, overlap);
+
+  // blank width is what's left after the right venn circle - it is used as padding
+  const blankWidth = imageWidth - (rightCenter + rightRadius);
+  const padding = blankWidth / 2;
+
+  const viewBoxDims = `0 0 ${imageWidth} ${imageHeight}`;
+
+  return (
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" width={100} height={60} viewBox={viewBoxDims}>
+        <g>
+          <circle
+            cx={leftCenter + padding}
+            cy={maxRadius}
+            r={leftRadius}
+            className="gphVennDiagram__left"
+          />
+          <circle
+            cx={rightCenter + padding}
+            cy={maxRadius}
+            r={rightRadius}
+            className="gphVennDiagram__right"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}