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

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

import { toRef as m, resolveComponent as R, createElementBlock as s, openBlock as o, Fragment as u, renderList as k, createCommentVNode as a, createBlock as $, createElementVNode as U, withModifiers as w, renderSlot as h, mergeProps as f, withCtx as x } from "vue";
const F = ["cx", "cy", "r", "fill", "stroke", "stroke-width", "onClick", "onMouseover"], M = ["x", "y", "height", "width", "onClick", "onMouseover"], P = {
  __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: y }) {
    const C = t, v = y;
    function d(r) {
      v("click", r);
    }
    function n(r) {
      v("hover", r);
    }
    return m(C, "dataset").value.forEach((r) => {
      r.nodes && r.nodes.length > 0 && r.nodes.forEach((l) => {
        l.ancestor = r;
      });
    }), (r, l) => {
      const g = R("RecursiveCircles", !0);
      return o(!0), s(u, null, k(t.dataset, (e) => (o(), s(u, null, [
        e.polygonPath && e.polygonPath.coordinates ? (o(), s(u, { key: 0 }, [
          (o(!0), s(u, null, k(e.polygonPath.coordinates, (i, S) => (o(), s(u, null, [
            U("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) => n(e),
              onMouseleave: l[0] || (l[0] = (c) => n(null))
            }, null, 40, F),
            r.$slots.node ? (o(), s("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: w((c) => d(e), ["stop"]),
              onMouseover: (c) => n(e),
              onMouseleave: l[1] || (l[1] = (c) => n(null))
            }, [
              h(r.$slots, "node", f({ ref_for: !0 }, { node: e }))
            ], 40, M)) : a("", !0)
          ], 64))), 256)),
          e.nodes && e.nodes.length > 0 ? (o(), $(g, {
            key: 0,
            dataset: e.nodes,
            color: t.color,
            stroke: t.stroke,
            strokeHovered: t.strokeHovered,
            hoveredUid: t.hoveredUid,
            onClick: d,
            onHover: n
          }, {
            node: x(({ node: i }) => [
              h(r.$slots, "node", f({ ref_for: !0 }, { node: i }))
            ]),
            _: 2
          }, 1032, ["dataset", "color", "stroke", "strokeHovered", "hoveredUid"])) : a("", !0)
        ], 64)) : a("", !0)
      ], 64))), 256);
    };
  }
};
export {
  P as default
};