vue-data-ui/dist/RecursiveLabels-NTMB9w5C.js

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

import { toRef as d, resolveComponent as m, createElementBlock as l, openBlock as t, Fragment as a, renderList as c, createCommentVNode as i, createBlock as h, toDisplayString as y } from "vue";
const f = ["x", "y", "fill", "font-size"], R = {
  __name: "RecursiveLabels",
  props: {
    color: {
      type: String,
      default: "#000000"
    },
    dataset: {
      type: Array,
      default: () => []
    },
    hoveredUid: {
      type: String,
      default: null
    }
  },
  emits: ["zoom", "hover"],
  setup(o, { emit: p }) {
    return d(o, "dataset").value.forEach((r) => {
      r.nodes && r.nodes.length > 0 && r.nodes.forEach((n) => {
        n.ancestor = r;
      });
    }), (r, n) => {
      const u = m("RecursiveLabels", !0);
      return t(!0), l(a, null, c(o.dataset, (e) => (t(), l(a, null, [
        e.polygonPath && e.polygonPath.coordinates ? (t(), l(a, { key: 0 }, [
          (t(!0), l(a, null, c(e.polygonPath.coordinates, (s) => (t(), l("text", {
            x: s.x,
            y: s.y + e.circleRadius * 2,
            fill: o.color,
            "font-size": e.circleRadius,
            "text-anchor": "middle",
            style: { opacity: "0.8", "pointer-events": "none" }
          }, y(e.name), 9, f))), 256)),
          e.nodes && e.nodes.length > 0 ? (t(), h(u, {
            key: 0,
            dataset: e.nodes,
            color: o.color,
            hoveredUid: o.hoveredUid
          }, null, 8, ["dataset", "color", "hoveredUid"])) : i("", !0)
        ], 64)) : i("", !0)
      ], 64))), 256);
    };
  }
};
export {
  R as default
};