simple-bubble-chart/dist/index.mjs

Simple bubble chart library

import i, { useEffect as g, useState as x } from "react";
const E = ({
  onClick: n,
  title: s,
  titleColor: r,
  subTitle: l,
  subTitleColor: a,
  size: e,
  backgroundColor: f
}) => {
  const u = Math.abs(e), t = Math.abs(e);
  return /* @__PURE__ */ i.createElement(
    "div",
    {
      style: {
        borderRadius: "50%",
        height: u,
        width: u,
        background: f,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        textAlign: "center",
        cursor: "pointer"
      },
      onClick: n
    },
    /* @__PURE__ */ i.createElement("span", { style: { color: a, fontSize: t * 0.15 } }, l),
    /* @__PURE__ */ i.createElement(
      "span",
      {
        style: {
          color: r,
          fontSize: t * 0.2,
          fontWeight: 600
        }
      },
      s
    )
  );
}, M = 20;
function B(n, s) {
  return s + n * 0.5 + 50;
}
function k({
  data: n,
  height: s,
  width: r,
  bubbleSizeIncrease: l
}) {
  const a = n.map((t) => ({
    ...t,
    size: B(
      Math.abs(t.size),
      l || M
    )
  })), e = a.reduce(
    (t, o) => o.size > t ? o.size : t,
    -1 / 0
  );
  g(() => {
    const t = e, o = Math.floor(r / t), m = Math.floor(s / t), p = (z, d) => {
      for (const h of d) {
        const y = z.x - h.x, c = z.y - h.y;
        if (Math.sqrt(y * y + c * c) < e)
          return !0;
      }
      return !1;
    }, b = [], S = 1e5;
    for (const z of n) {
      let d = 0;
      for (; d < S; ) {
        const h = Math.floor(Math.random() * o) * t, y = Math.floor(Math.random() * m) * t, c = { x: h, y };
        if (!p(c, b)) {
          b.push(c);
          break;
        }
        d++;
      }
    }
    u(b);
  }, [n, s, r, e]);
  const [f, u] = x(
    []
  );
  return /* @__PURE__ */ i.createElement("div", { style: { width: r, height: s, position: "relative" } }, a.map((t, o) => {
    var m, p;
    return /* @__PURE__ */ i.createElement(
      "div",
      {
        key: o,
        style: {
          position: "absolute",
          width: e,
          height: e,
          left: ((m = f[o]) == null ? void 0 : m.x) || 0,
          top: ((p = f[o]) == null ? void 0 : p.y) || 0,
          display: "flex",
          justifyContent: "center",
          alignItems: "center"
        }
      },
      /* @__PURE__ */ i.createElement(E, { ...t })
    );
  }));
}
export {
  E as Bubble,
  k as SimpleBubbleChart
};