vue-data-ui-hq/dist/Shape-DNIrFW-J.js

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

import { computed as d, openBlock as l, createElementBlock as u, unref as r, createCommentVNode as m } from "vue";
import { V as y, O as c } from "./index-WrV3SAID.js";
const g = ["cx", "cy", "r", "fill", "stroke", "stroke-width"], x = ["d", "fill", "stroke", "stroke-width"], S = ["points", "fill", "stroke", "stroke-width"], M = {
  __name: "Shape",
  props: {
    color: String,
    isSelected: {
      type: Boolean,
      default: !1
    },
    limit: {
      type: Number,
      default: 3
    },
    plot: Object,
    radius: Number,
    shape: String,
    stroke: String,
    strokeWidth: Number,
    zoom: {
      type: Number,
      default: 1.3
    }
  },
  emits: ["mouseover", "mouseout", "click"],
  setup(e, { emit: f }) {
    const o = e, n = f;
    function p(a) {
      return {
        circle: {
          points: 1,
          rotation: 0
        },
        line: {
          points: 2,
          rotation: 0
        },
        triangle: {
          points: 3,
          rotation: 0.52
        },
        square: {
          points: 4,
          rotation: 0.783
        },
        diamond: {
          points: 4,
          rotation: 0
        },
        pentagon: {
          points: 5,
          rotation: 0.95
        },
        hexagon: {
          points: 6,
          rotation: 0
        }
      }[a];
    }
    const s = d(() => p(o.shape)), k = d(() => o.shape !== "star" ? null : y({
      plot: { x: o.plot.x, y: o.plot.y },
      radius: o.radius * (o.isSelected ? o.zoom : 1)
    })), v = d(() => c({
      plot: { x: o.plot.x, y: o.plot.y },
      radius: o.radius * (o.isSelected ? o.zoom : 1),
      sides: s.value.points,
      rotation: s.value.rotation
    }).path);
    return (a, t) => (l(), u("g", null, [
      r(s) && r(s).points === 1 ? (l(), u("circle", {
        key: 0,
        cx: e.plot.x,
        cy: e.plot.y,
        r: o.radius * (o.isSelected ? o.zoom : 1),
        fill: e.color,
        stroke: e.stroke,
        "stroke-width": e.strokeWidth,
        onMouseover: t[0] || (t[0] = (i) => n("mouseover")),
        onMouseout: t[1] || (t[1] = (i) => n("mouseout")),
        onClick: t[2] || (t[2] = (i) => n("click"))
      }, null, 40, g)) : m("", !0),
      r(s) && r(s).points >= e.limit ? (l(), u("path", {
        key: 1,
        d: r(v),
        fill: e.color,
        stroke: e.stroke,
        "stroke-width": e.strokeWidth,
        onMouseover: t[3] || (t[3] = (i) => n("mouseover")),
        onMouseout: t[4] || (t[4] = (i) => n("mouseout")),
        onClick: t[5] || (t[5] = (i) => n("click"))
      }, null, 40, x)) : m("", !0),
      r(k) ? (l(), u("polygon", {
        key: 2,
        points: r(k),
        fill: e.color,
        stroke: e.stroke,
        "stroke-width": e.strokeWidth,
        onMouseover: t[6] || (t[6] = (i) => n("mouseover")),
        onMouseout: t[7] || (t[7] = (i) => n("mouseout")),
        onClick: t[8] || (t[8] = (i) => n("click"))
      }, null, 40, S)) : m("", !0)
    ]));
  }
};
export {
  M as _
};