simple-bubble-chart
Version:
Simple bubble chart library
2 lines (1 loc) • 1.75 kB
JavaScript
(function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n["simple-bubble-chart"]={},n.React))})(this,function(n,t){"use strict";const g=({onClick:i,title:r,titleColor:l,subTitle:a,subTitleColor:f,size:o,backgroundColor:u})=>{const d=Math.abs(o),e=Math.abs(o);return t.createElement("div",{style:{borderRadius:"50%",height:d,width:d,background:u,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",cursor:"pointer"},onClick:i},t.createElement("span",{style:{color:f,fontSize:e*.15}},a),t.createElement("span",{style:{color:l,fontSize:e*.2,fontWeight:600}},r))};function M(i,r){return r+i*.5+50}function x({data:i,height:r,width:l,bubbleSizeIncrease:a}){const f=i.map(e=>({...e,size:M(Math.abs(e.size),a||20)})),o=f.reduce((e,s)=>s.size>e?s.size:e,-1/0);t.useEffect(()=>{const e=o,s=Math.floor(l/e),m=Math.floor(r/e),p=(z,b)=>{for(const h of b){const y=z.x-h.x,c=z.y-h.y;if(Math.sqrt(y*y+c*c)<o)return!0}return!1},S=[],E=1e5;for(const z of i){let b=0;for(;b<E;){const h=Math.floor(Math.random()*s)*e,y=Math.floor(Math.random()*m)*e,c={x:h,y};if(!p(c,S)){S.push(c);break}b++}}d(S)},[i,r,l,o]);const[u,d]=t.useState([]);return t.createElement("div",{style:{width:l,height:r,position:"relative"}},f.map((e,s)=>{var m,p;return t.createElement("div",{key:s,style:{position:"absolute",width:o,height:o,left:((m=u[s])==null?void 0:m.x)||0,top:((p=u[s])==null?void 0:p.y)||0,display:"flex",justifyContent:"center",alignItems:"center"}},t.createElement(g,{...e}))}))}n.Bubble=g,n.SimpleBubbleChart=x,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});