vue-data-ui/dist/RecursiveCircles-CM4bn2Vg.js

A user-empowering data visualization Vue 3 components library for eloquent data storytelling

import { ref as w, watch as U, resolveComponent as F, createElementBlock as l, openBlock as o, Fragment as n, renderList as k, createCommentVNode as a, createBlock as M, createElementVNode as x, withModifiers as H, renderSlot as h, mergeProps as y, withCtx as S } from "vue";
const P = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMouseover"], B = ["x", "y", "height", "width", "onClick", "onMouseover"], E = {
  __name: "RecursiveCircles",
  props: {
    color: {
      type: String,
      default: "#000000"
    },
    dataset: {
      type: Array,
      default: () => []
    },
    hoveredUid: {
      type: String,
      default: null
    },
    linkColor: {
      type: String,
      default: "#CCCCCC"
    },
    stroke: {
      type: String,
      default: "#FFFFFF"
    },
    strokeHovered: {
      type: String,
      default: "#000000"
    }
  },
  emits: ["click", "hover"],
  setup(t, { emit: f }) {
    const C = t, v = f;
    function d(r) {
      v("click", r);
    }
    function s(r) {
      v("hover", r);
    }
    const m = w([]);
    return U(
      () => C.dataset,
      (r) => {
        m.value = r || [];
      },
      { immediate: !0 }
    ), (r, u) => {
      const g = F("RecursiveCircles", !0);
      return o(!0), l(n, null, k(t.dataset, (e, $) => (o(), l(n, null, [
        e.polygonPath && e.polygonPath.coordinates ? (o(), l(n, { key: 0 }, [
          (o(!0), l(n, null, k(e.polygonPath.coordinates, (i, R) => (o(), l(n, {
            key: `node_${$}_${R}`
          }, [
            x("circle", {
              cx: i.x,
              cy: i.y,
              r: e.circleRadius,
              fill: `url(#gradient_${e.color})`,
              stroke: t.hoveredUid && t.hoveredUid === e.uid ? t.strokeHovered : t.stroke,
              "stroke-width": t.hoveredUid && t.hoveredUid === e.uid ? e.circleRadius / 6 : e.circleRadius / 12,
              style: { cursor: "pointer" },
              onClick: (c) => d(e),
              onMouseover: (c) => s(e),
              onMouseleave: u[0] || (u[0] = (c) => s(null))
            }, null, 40, P),
            r.$slots.node ? (o(), l("foreignObject", {
              key: 0,
              x: i.x - e.circleRadius,
              y: i.y - e.circleRadius,
              height: e.circleRadius * 2,
              width: e.circleRadius * 2,
              style: { overflow: "visible" },
              onClick: H((c) => d(e), ["stop"]),
              onMouseover: (c) => s(e),
              onMouseleave: u[1] || (u[1] = (c) => s(null))
            }, [
              h(r.$slots, "node", y({ ref_for: !0 }, { node: e }))
            ], 40, B)) : a("", !0)
          ], 64))), 128)),
          e.nodes && e.nodes.length > 0 ? (o(), M(g, {
            key: 0,
            dataset: e.nodes,
            color: t.color,
            stroke: t.stroke,
            strokeHovered: t.strokeHovered,
            hoveredUid: t.hoveredUid,
            onClick: d,
            onHover: s
          }, {
            node: S(({ node: i }) => [
              h(r.$slots, "node", y({ ref_for: !0 }, { node: i }))
            ]),
            _: 2
          }, 1032, ["dataset", "color", "stroke", "strokeHovered", "hoveredUid"])) : a("", !0)
        ], 64)) : a("", !0)
      ], 64))), 256);
    };
  }
};
export {
  E as default
};