react-venn-diagram/dist/index.js

A Venn diagram React component

/*! For license information please see index.js.LICENSE.txt */
(()=>{"use strict";var t={20:(t,e,r)=>{var o=r(953),n=Symbol.for("react.element"),a=(Symbol.for("react.fragment"),Object.prototype.hasOwnProperty),i=o.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,l={key:!0,ref:!0,__self:!0,__source:!0};e.jsx=function(t,e,r){var o,s={},c=null,f=null;for(o in void 0!==r&&(c=""+r),void 0!==e.key&&(c=""+e.key),void 0!==e.ref&&(f=e.ref),e)a.call(e,o)&&!l.hasOwnProperty(o)&&(s[o]=e[o]);if(t&&t.defaultProps)for(o in e=t.defaultProps)void 0===s[o]&&(s[o]=e[o]);return{$$typeof:n,type:t,key:c,ref:f,props:s,_owner:i.current}}},848:(t,e,r)=>{t.exports=r(20)},953:t=>{t.exports=require("react")}},e={};function r(o){var n=e[o];if(void 0!==n)return n.exports;var a=e[o]={exports:{}};return t[o](a,a.exports,r),a.exports}r.d=(t,e)=>{for(var o in e)r.o(e,o)&&!r.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:e[o]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};r.r(o),r.d(o,{VennDiagram:()=>l});var n=r(848),a=r(953);const i=require("d3"),l=function(t){var e=t.data,r=e.a,o=e.b,l=e.intersection,s=t.width,c=t.height,f=t.labels,y=void 0===f?{}:f,p=t.colors,u=void 0===p?{}:p,d=(0,a.useRef)(null);return(0,a.useEffect)((function(){if(d.current){var t=i.select(d.current);t.selectAll("*").remove();var e=i.scaleSqrt().domain([0,Math.max(r,o)]).range([0,s/5]),n=e(r),a=e(o),f={A:{cx:s/2-a/2,cy:c/2},B:{cx:s/2+n/2,cy:c/2}},p=function(){i.select(this).transition().duration(300).style("fill-opacity",.7)},x=function(){i.select(this).transition().duration(300).style("fill-opacity",.5)},v=function(e,r,o,l,s){var c=f[e],y="A"===e?n:a,u=(t.append("circle").attr("cx",c.cx).attr("cy",c.cy).attr("r",0).style("fill",l).style("fill-opacity",.5).transition().duration(800).attr("r",y).on("end",(function(){i.select(this).on("mouseover",p).on("mouseout",x).on("touchstart",p).on("touchend",x)})),"A"===e?c.cx-y:c.cx+y),d="A"===e?"start":"end",v=t.append("text").attr("x",u).attr("y",c.cy).style("fill",s).style("font-size","14px").style("font-family","Arial, sans-serif").attr("text-anchor",d).style("opacity",0);v.transition().duration(800).style("opacity",1),v.append("tspan").attr("x",u).attr("dy","0em").style("font-weight","bold").text("".concat(r)),v.append("tspan").attr("x",u).attr("dy","1.2em").text(o)};v("A",r,y.labelA||"Group A",u.colorA||"#9467bd",u.fontColorA||"white"),v("B",o,y.labelB||"Group B",u.colorB||"#2ca02c",u.fontColorB||"white");var h=(f.A.cx+f.B.cx)/2;t.append("text").attr("x",h).attr("y",c/2).style("fill",u.fontColorIntersection||"white").style("font-size","12px").style("font-family","Arial, sans-serif").attr("text-anchor","middle").style("opacity",0).transition().duration(800).style("opacity",1).tween("text",(function(){var t=this;return function(){i.select(t).text("".concat(l))}})).on("end",(function(){i.select(this).append("tspan").attr("x",h).attr("dy","1.2em").style("font-weight","normal").text(y.labelIntersection||"Intersection")}))}}),[r,o,l,s,c,y,u]),(0,n.jsx)("svg",{ref:d,width:s,height:c})};module.exports=o})();