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

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

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