vue-data-ui 3.0.0-next.9 → 3.0.1

package/dist/{vue-ui-annotator-BHwBUNRO.js → vue-ui-annotator-KXWlIhtd.js}

@@ -1,5 +1,5 @@
-import { z as p, A as v, u as w, B as A } from "./index-CgShIRes.js";
-import { d as M } from "./dom-to-png-Bt5F9TXw.js";
+import { A as p, t as v, u as w, B as A } from "./index-Dzc2Gi60.js";
+import { d as M } from "./dom-to-png-C4hj491O.js";
 import { createElementBlock as d, openBlock as n, createElementVNode as r, normalizeStyle as c, toDisplayString as u, createCommentVNode as a, normalizeClass as y, createStaticVNode as F, withDirectives as N, vModelCheckbox as g, vModelText as C, renderSlot as O, Fragment as L, renderList as G } from "vue";
 import { _ } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const m = {
@@ -1348,12 +1348,12 @@ function Dt(t, i, o, h, s, e) {
               e.deleteEmptyTextElement(), e.setShapeTo("group"), s.isSelectMode = !s.isSelectMode, s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isTextMode = !1, s.isWriting = !1, s.activeShape = "group", s.showCaret = !1;
             })
           }, [
-            (n(), d("svg", B, i[49] || (i[49] = [
+            (n(), d("svg", B, [...i[49] || (i[49] = [
               r("path", {
                 fill: "currentColor",
                 d: "M1,1V5H2V19H1V23H5V22H19V23H23V19H22V5H23V1H19V2H5V1M5,4H19V5H20V19H19V20H5V19H4V5H5M6,6V14H9V18H18V9H14V6M8,8H12V12H8M14,11H16V16H11V14H14"
               }, null, -1)
-            ]))),
+            ])])),
             e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
               key: 0,
               class: "tooltiptext",
@@ -1379,12 +1379,12 @@ function Dt(t, i, o, h, s, e) {
               s.isResizeMode = !1, s.isMoveMode = !0, s.isDeleteMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.isTextMode = !1, s.isWriting = !1, s.showCaret = !1, e.bringShapeTo("front");
             })
           }, [
-            (n(), d("svg", E, i[50] || (i[50] = [
+            (n(), d("svg", E, [...i[50] || (i[50] = [
               r("path", {
                 fill: "currentColor",
                 d: "M2,2H11V6H9V4H4V9H6V11H2V2M22,13V22H13V18H15V20H20V15H18V13H22M8,8H16V16H8V8Z"
               }, null, -1)
-            ]))),
+            ])])),
             e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
               key: 0,
               class: "tooltiptext",
@@ -1410,12 +1410,12 @@ function Dt(t, i, o, h, s, e) {
               s.isResizeMode = !1, s.isMoveMode = !0, s.isDeleteMode = !1, s.isDrawMode = !1, s.isSelectMode = !1, s.isTextMode = !1, s.isWriting = !1, s.showCaret = !1, e.bringShapeTo("back");
             })
           }, [
-            (n(), d("svg", U, i[51] || (i[51] = [
+            (n(), d("svg", U, [...i[51] || (i[51] = [
               r("path", {
                 fill: "currentColor",
                 d: "M2,2H11V11H2V2M9,4H4V9H9V4M22,13V22H13V13H22M15,20H20V15H15V20M16,8V11H13V8H16M11,16H8V13H11V16Z"
               }, null, -1)
-            ]))),
+            ])])),
             e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
               key: 0,
               class: "tooltiptext",
@@ -1760,7 +1760,7 @@ function Dt(t, i, o, h, s, e) {
           ["arrow", "circle", "rect"].includes(s.activeShape) ? (n(), d("div", ht, [
             r("div", at, [
               r("label", ut, u(e.FINAL_CONFIG.translations.dashedLines), 1),
-              (n(), d("svg", yt, i[57] || (i[57] = [
+              (n(), d("svg", yt, [...i[57] || (i[57] = [
                 r("line", {
                   x1: "0",
                   x2: "24",
@@ -1770,7 +1770,7 @@ function Dt(t, i, o, h, s, e) {
                   stroke: "black",
                   "stroke-dasharray": "3"
                 }, null, -1)
-              ]))),
+              ])])),
               N(r("input", {
                 id: "dashStyle",
                 name: "dashStyle",
@@ -1799,9 +1799,9 @@ function Dt(t, i, o, h, s, e) {
               e.deleteEmptyTextElement(), s.isTextMode = !s.isTextMode, s.isDeleteMode = !1, s.isMoveMode = !1, s.isResizeMode = !1, s.isSelectMode = !1, s.isDrawMode = !1, s.activeShape = void 0;
             })
           }, [
-            (n(), d("svg", It, i[58] || (i[58] = [
+            (n(), d("svg", It, [...i[58] || (i[58] = [
               r("path", { d: "M18.5,4L19.66,8.35L18.7,8.61C18.25,7.74 17.79,6.87 17.26,6.43C16.73,6 16.11,6 15.5,6H13V16.5C13,17 13,17.5 13.33,17.75C13.67,18 14.33,18 15,18V19H9V18C9.67,18 10.33,18 10.67,17.75C11,17.5 11,17 11,16.5V6H8.5C7.89,6 7.27,6 6.74,6.43C6.21,6.87 5.75,7.74 5.3,8.61L4.34,8.35L5.5,4H18.5Z" }, null, -1)
-            ]))),
+            ])])),
             e.FINAL_CONFIG.style.showTooltips ? (n(), d("span", {
               key: 0,
               class: "tooltiptext",

package/dist/vue-ui-bullet-B4N4mBk9.js

@@ -0,0 +1,571 @@
+import { defineAsyncComponent as W, ref as c, computed as f, onMounted as Se, toRefs as Ie, watch as ie, onBeforeUnmount as Pe, createElementBlock as n, openBlock as r, unref as o, normalizeStyle as D, normalizeClass as ce, createBlock as C, createCommentVNode as i, createElementVNode as I, createSlots as Fe, withCtx as w, renderSlot as m, normalizeProps as P, guardReactiveProps as F, createVNode as He, Fragment as V, renderList as G, toDisplayString as H } from "vue";
+import { u as Me, c as Te, t as Re, l as ze, D as Ne, e as Ue, k as M, i as T, X as Ee, o as he, f as ve, g as We, b as De } from "./index-Dzc2Gi60.js";
+import { u as de } from "./useNestedProp-CjnS13nF.js";
+import { u as Ve } from "./usePrinter-DBRh8ZvS.js";
+import { u as Ge } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as je } from "./useChartAccessibility-9icAAmYg.js";
+import qe from "./Legend-CMvJ6X5j.js";
+import Xe from "./Title-xTWR-Vil.js";
+import Ye from "./img-Vb4QHAHI.js";
+import { t as Je, u as Ke } from "./useResponsive-DfdjqQps.js";
+import { u as Qe, B as Ze } from "./useLoading-D7YHNtLX.js";
+import { _ as et } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const tt = ["id"], at = {
+  key: 1,
+  ref: "noTitle",
+  class: "vue-data-ui-no-title-space",
+  style: "height:36px; width: 100%;background:transparent"
+}, lt = ["xmlns", "viewBox"], st = ["width", "height"], rt = { key: 1 }, ot = ["x", "y", "height", "width", "fill", "stroke"], nt = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], ut = ["x", "y", "height", "width", "fill", "stroke", "stroke-width"], it = ["x", "y", "font-size", "font-weight", "fill"], ct = ["x", "y", "height", "width", "rx", "fill", "stroke", "stroke-width"], ht = { key: 3 }, vt = ["x", "y", "fill", "font-size", "font-weight"], dt = { key: 4 }, gt = ["x1", "x2", "y1", "y2", "stroke"], ft = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, mt = {
+  key: 0,
+  class: "vue-ui-bullet-legend-item",
+  dir: "auto"
+}, yt = { style: { "margin-right": "2px" } }, pt = {
+  __name: "vue-ui-bullet",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  setup(ge, { expose: fe }) {
+    const me = W(() => import("./PackageVersion-CD5VH_Al.js")), ye = W(() => import("./PenAndPaper-D3WRn-G2.js")), pe = W(() => import("./UserOptions-CKKPgDLV.js")), { vue_ui_bullet: be } = Me(), L = ge, y = c(null), j = c(null), q = c(0), X = c(null), Y = c(null), ke = c(0), x = c(null), O = c(null), p = f({
+      get: () => u.value.hasOwnProperty("value"),
+      set: (t) => t
+    }), A = f(() => u.value.segments ? Array.isArray(u.value.segments) ? u.value.segments.length ? !0 : (console.warn(`VueUiBullet: dataset segments is empty. Provide segments with this datastructure:
+
+segments: [
+    {
+        name: string;
+        from: number;
+        to: number;
+        color?: string;
+    },
+    {...}
+]
+        `), p.value = !1, !1) : (console.warn(`VueUiBullet: dataset segments must be an array of objects with this datastructure:
+
+segments: [
+    {
+        name: string;
+        from: number;
+        to: number;
+        color?: string;
+    },
+    {...}
+] 
+        `), p.value = !1, !1) : (console.warn(`VueUiBullet: dataset segments is empty. Provide segments with this datastructure:
+
+segments: [
+    {
+        name: string;
+        from: number;
+        to: number;
+        color?: string;
+    },
+    {...}
+]
+        `), p.value = !1, !1)), J = f(() => !!e.value.debug);
+    function K() {
+      if (he(u.value) ? (ve({
+        componentName: "VueUiBullet",
+        type: "dataset",
+        debug: J.value
+      }), B.value = !0) : A.value ? u.value.segments.forEach((t, s) => {
+        We({
+          datasetObject: t,
+          requiredAttributes: ["name", "from", "to"]
+        }).forEach((a) => {
+          p.value = !1, ve({
+            componentName: "VueUiBullet segment",
+            type: "datasetSerieAttribute",
+            property: a,
+            index: s,
+            debug: J.value
+          });
+        });
+      }) : (p.value = !1, B.value = !0), he(u.value) || (B.value = e.value.loading), e.value.responsive) {
+        const t = Je(() => {
+          const { width: s, height: a } = Ke({
+            chart: y.value,
+            title: e.value.style.chart.title.text ? j.value : null,
+            legend: e.value.style.chart.legend.show ? X.value : null,
+            source: Y.value
+          });
+          requestAnimationFrame(() => {
+            $.value.width = s, $.value.height = a - 12;
+          });
+        });
+        x.value && (O.value && x.value.unobserve(O.value), x.value.disconnect()), x.value = new ResizeObserver(t), O.value = y.value.parentNode, x.value.observe(O.value);
+      }
+      e.value.style.chart.animation.show && !b.value && ae(u.value.value || 0);
+    }
+    Se(K);
+    const R = c(Te());
+    function z() {
+      const t = de({
+        userConfig: L.config,
+        defaultConfig: be
+      });
+      return t.theme ? {
+        ...de({
+          userConfig: De.vue_ui_bullet[t.theme] || L.config,
+          defaultConfig: t
+        })
+      } : t;
+    }
+    const e = c(z()), { loading: b, FINAL_DATASET: u, manualLoading: B } = Qe({
+      ...Ie(L),
+      FINAL_CONFIG: e,
+      prepareConfig: z,
+      skeletonDataset: {
+        value: 100,
+        target: 100,
+        segments: [
+          {
+            name: "",
+            from: 0,
+            to: 33,
+            color: "#AAAAAA"
+          },
+          {
+            name: "",
+            from: 33,
+            to: 66,
+            color: "#BABABA"
+          },
+          {
+            name: "",
+            from: 66,
+            to: 100,
+            color: "#CACACA"
+          }
+        ]
+      },
+      skeletonConfig: Re({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              segments: {
+                dataLabels: { show: !1 },
+                ticks: {
+                  stroke: "#8A8A8A"
+                }
+              },
+              valueBar: {
+                label: { show: !1 }
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: N, setUserOptionsVisibility: Q, keepUserOptionState: Z } = Ge({ config: e.value }), { svgRef: ee } = je({ config: e.value.style.chart.title });
+    ie(() => L.config, (t) => {
+      b.value || (e.value = z()), N.value = !e.value.userOptions.showOnChartHover, K(), q.value += 1;
+    }, { deep: !0 });
+    const $ = c({
+      width: e.value.style.chart.width,
+      height: e.value.style.chart.height
+    }), we = f(() => $.value.width), xe = f(() => $.value.height), l = f(() => {
+      const t = xe.value, s = we.value, a = e.value.style.chart.padding.left, g = s - e.value.style.chart.padding.right, k = e.value.style.chart.padding.top, h = t - e.value.style.chart.padding.bottom;
+      return {
+        height: Math.max(1e-3, t),
+        width: Math.max(1e-3, s),
+        left: a,
+        right: g,
+        top: k,
+        bottom: h,
+        chartWidth: Math.max(1e-3, g - a),
+        chartHeight: Math.max(1e-3, h - k)
+      };
+    }), Ae = f(() => {
+      if (!A.value) return [];
+      const t = [];
+      for (let s = 0; s < u.value.segments.length; s += 1)
+        t.push(ze(e.value.style.chart.segments.baseColor, s / u.value.segments.length));
+      return t;
+    }), U = f(() => A.value ? {
+      min: Math.min(...u.value.segments.map((t) => t.from)),
+      max: Math.max(...u.value.segments.map((t) => t.to))
+    } : { min: 0, max: 1 }), v = c(_e());
+    ie(() => u.value, (t) => {
+      t.hasOwnProperty("value") && (B.value = !1), e.value.style.chart.animation.show && !b.value ? ae(t.value || 0) : v.value = t.value || 0;
+    }, { deep: !0 });
+    function _e() {
+      return e.value.style.chart.animation.show && !b.value ? U.value.min : u.value.value || 0;
+    }
+    const te = c(null);
+    function ae(t) {
+      const s = Math.abs(t - v.value) / e.value.style.chart.animation.animationFrames;
+      function a() {
+        v.value < t ? v.value = Math.min(v.value + s, t) : v.value > t && (v.value = Math.max(v.value - s, t)), v.value !== t && (te.value = requestAnimationFrame(a));
+      }
+      a();
+    }
+    Pe(() => {
+      cancelAnimationFrame(te.value);
+    });
+    const d = f(() => {
+      if (!A.value)
+        return [];
+      const t = Ne(U.value.min, U.value.max, e.value.style.chart.segments.ticks.divisions), s = t.min >= 0 ? 0 : Math.abs(t.min), a = {
+        x: l.value.left + (u.value.target + s) / (t.max + s) * l.value.chartWidth - e.value.style.chart.target.width / 2
+      }, g = {
+        width: (v.value + s) / (t.max + s) * l.value.chartWidth
+      }, k = t.ticks.map((h) => ({
+        value: h,
+        y: l.value.bottom + e.value.style.chart.segments.dataLabels.fontSize + 3 + e.value.style.chart.segments.dataLabels.offsetY,
+        x: l.value.left + (h + s) / (t.max + s) * l.value.chartWidth
+      }));
+      return {
+        scale: t,
+        target: a,
+        value: g,
+        ticks: k,
+        chunks: u.value.segments.map((h, $e) => ({
+          ...h,
+          color: h.color ? Ue(h.color) : Ae.value[$e],
+          x: l.value.left + l.value.chartWidth * ((h.from + s) / (t.max + s)),
+          y: l.value.top,
+          height: l.value.chartHeight,
+          width: l.value.chartWidth * (Math.abs(h.to - h.from) / (t.max + s))
+        }))
+      };
+    }), le = f(() => !d.value || !d.value.chunks || !d.value.chunks.length ? [] : d.value.chunks.map((t) => {
+      const s = M(
+        e.value.style.chart.segments.dataLabels.formatter,
+        t.from,
+        T({
+          p: e.value.style.chart.segments.dataLabels.prefix,
+          v: t.from,
+          s: e.value.style.chart.segments.dataLabels.suffix,
+          r: e.value.style.chart.segments.dataLabels.rounding
+        })
+      ), a = M(
+        e.value.style.chart.segments.dataLabels.formatter,
+        t.to,
+        T({
+          p: e.value.style.chart.segments.dataLabels.prefix,
+          v: t.to,
+          s: e.value.style.chart.segments.dataLabels.suffix,
+          r: e.value.style.chart.segments.dataLabels.rounding
+        })
+      );
+      return {
+        ...t,
+        shape: "square",
+        value: `${s} - ${a}`
+      };
+    })), Ce = f(() => ({
+      cy: "bullet-div-legend",
+      backgroundColor: "transparent",
+      color: e.value.style.chart.legend.color,
+      fontSize: e.value.style.chart.legend.fontSize,
+      paddingBottom: 6,
+      fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
+    })), { isPrinting: se, isImaging: re, generatePdf: oe, generateImage: ne } = Ve({
+      elementId: `bullet_${R.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-bullet",
+      options: e.value.userOptions.print
+    }), Le = f(() => e.value.userOptions.show && !e.value.style.chart.title.text), _ = c(!1);
+    function ue(t) {
+      _.value = t, ke.value += 1;
+    }
+    function Oe() {
+      return d.value;
+    }
+    const S = c(!1);
+    function E() {
+      S.value = !S.value;
+    }
+    async function Be({ scale: t = 2 } = {}) {
+      if (!y.value) return;
+      const { width: s, height: a } = y.value.getBoundingClientRect(), g = s / a, { imageUri: k, base64: h } = await Ye({ domElement: y.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: k,
+        base64: h,
+        title: e.value.style.chart.title.text,
+        width: s,
+        height: a,
+        aspectRatio: g
+      };
+    }
+    return fe({
+      getData: Oe,
+      getImage: Be,
+      generatePdf: oe,
+      generateImage: ne,
+      toggleAnnotator: E,
+      toggleFullscreen: ue
+    }), (t, s) => (r(), n("div", {
+      ref_key: "bulletChart",
+      ref: y,
+      class: ce(`vue-ui-bullet ${_.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      style: D(`font-family:${e.value.style.fontFamily};width:100%;background:${e.value.style.chart.backgroundColor}`),
+      id: `bullet_${R.value}`,
+      onMouseenter: s[0] || (s[0] = () => o(Q)(!0)),
+      onMouseleave: s[1] || (s[1] = () => o(Q)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (r(), C(o(ye), {
+        key: 0,
+        svgRef: o(ee),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: S.value,
+        onClose: E
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : i("", !0),
+      Le.value ? (r(), n("div", at, null, 512)) : i("", !0),
+      e.value.style.chart.title.text ? (r(), n("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: j,
+        style: "width:100%;background:transparent;"
+      }, [
+        (r(), C(Xe, {
+          lineHeight: "1.3rem",
+          key: `title_${q.value}`,
+          config: {
+            title: {
+              cy: "bullet-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "bullet-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : i("", !0),
+      e.value.userOptions.show && p.value && (o(Z) || o(N)) ? (r(), C(o(pe), {
+        key: 3,
+        ref: "details",
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: o(se),
+        isImaging: o(re),
+        uid: R.value,
+        hasTooltip: !1,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasXls: !1,
+        hasTable: !1,
+        hasLabel: !1,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: _.value,
+        chartElement: y.value,
+        position: e.value.userOptions.position,
+        titles: { ...e.value.userOptions.buttonTitles },
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: S.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: ue,
+        onGeneratePdf: o(oe),
+        onGenerateImage: o(ne),
+        onToggleAnnotator: E,
+        style: D({
+          visibility: o(Z) ? o(N) ? "visible" : "hidden" : "visible"
+        })
+      }, Fe({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: w(({ isOpen: a, color: g }) => [
+            m(t.$slots, "menuIcon", P(F({ isOpen: a, color: g })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: w(() => [
+            m(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: w(() => [
+            m(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: w(({ toggleFullscreen: a, isFullscreen: g }) => [
+            m(t.$slots, "optionFullscreen", P(F({ toggleFullscreen: a, isFullscreen: g })), void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: w(({ toggleAnnotator: a, isAnnotator: g }) => [
+            m(t.$slots, "optionAnnotator", P(F({ toggleAnnotator: a, isAnnotator: g })), void 0, !0)
+          ]),
+          key: "4"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : i("", !0),
+      (r(), n("svg", {
+        ref_key: "svgRef",
+        ref: ee,
+        xmlns: o(Ee),
+        class: ce({ "vue-data-ui-fullscreen--on": _.value, "vue-data-ui-fulscreen--off": !_.value, "vue-ui-bullet-svg": !0 }),
+        viewBox: `0 0 ${l.value.width} ${l.value.height}`,
+        style: D(`width: 100%; overflow: visible; background:transparent;color:${e.value.style.chart.color}`)
+      }, [
+        He(o(me)),
+        t.$slots["chart-background"] ? (r(), n("foreignObject", {
+          key: 0,
+          x: 0,
+          y: 0,
+          width: l.value.width,
+          height: l.value.height,
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          m(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, st)) : i("", !0),
+        A.value ? (r(), n("g", rt, [
+          (r(!0), n(V, null, G(d.value.chunks, (a) => (r(), n("rect", {
+            x: a.x,
+            y: a.y,
+            height: a.height,
+            width: a.width,
+            fill: a.color,
+            "stroke-width": 1,
+            stroke: e.value.style.chart.backgroundColor,
+            style: { transition: "x 0.3s ease-in-out, width 0.3s ease-in-out" }
+          }, null, 8, ot))), 256)),
+          !e.value.style.chart.target.onTop && e.value.style.chart.target.show ? (r(), n("rect", {
+            key: 0,
+            x: d.value.target.x,
+            y: l.value.top + (l.value.chartHeight - l.value.chartHeight * e.value.style.chart.target.heightRatio) / 2,
+            height: l.value.chartHeight * e.value.style.chart.target.heightRatio,
+            width: e.value.style.chart.target.width,
+            rx: e.value.style.chart.target.rounded ? e.value.style.chart.target.width / 2 : 0,
+            fill: e.value.style.chart.target.color,
+            stroke: e.value.style.chart.target.stroke,
+            "stroke-width": e.value.style.chart.target.strokeWidth
+          }, null, 8, nt)) : i("", !0),
+          I("rect", {
+            x: l.value.left,
+            y: l.value.top + (l.value.chartHeight - l.value.chartHeight * e.value.style.chart.valueBar.heightRatio) / 2,
+            height: l.value.chartHeight * e.value.style.chart.valueBar.heightRatio,
+            width: d.value.value.width,
+            fill: e.value.style.chart.valueBar.color,
+            stroke: e.value.style.chart.valueBar.stroke,
+            "stroke-width": e.value.style.chart.valueBar.strokeWidth
+          }, null, 8, ut),
+          e.value.style.chart.valueBar.label.show ? (r(), n("text", {
+            key: 1,
+            x: l.value.left + d.value.value.width,
+            y: l.value.top - 6 + e.value.style.chart.valueBar.label.offsetY,
+            "font-size": e.value.style.chart.valueBar.label.fontSize,
+            "font-weight": e.value.style.chart.valueBar.label.bold ? "bold" : "normal",
+            fill: e.value.style.chart.valueBar.label.color,
+            "text-anchor": "middle"
+          }, H(o(M)(
+            e.value.style.chart.segments.dataLabels.formatter,
+            v.value,
+            o(T)({
+              p: e.value.style.chart.segments.dataLabels.prefix,
+              v: v.value,
+              s: e.value.style.chart.segments.dataLabels.suffix,
+              r: e.value.style.chart.segments.dataLabels.rounding
+            })
+          )), 9, it)) : i("", !0),
+          e.value.style.chart.target.onTop && e.value.style.chart.target.show ? (r(), n("rect", {
+            key: 2,
+            x: d.value.target.x,
+            y: l.value.top + (l.value.chartHeight - l.value.chartHeight * e.value.style.chart.target.heightRatio) / 2,
+            height: l.value.chartHeight * e.value.style.chart.target.heightRatio,
+            width: e.value.style.chart.target.width,
+            rx: e.value.style.chart.target.rounded ? e.value.style.chart.target.width / 2 : 0,
+            fill: e.value.style.chart.target.color,
+            stroke: e.value.style.chart.target.stroke,
+            "stroke-width": e.value.style.chart.target.strokeWidth,
+            style: { transition: "x 0.3s ease-in-out" }
+          }, null, 8, ct)) : i("", !0),
+          e.value.style.chart.segments.dataLabels.show ? (r(), n("g", ht, [
+            (r(!0), n(V, null, G(d.value.ticks, (a) => (r(), n("text", {
+              x: a.x,
+              y: a.y,
+              "text-anchor": "middle",
+              fill: e.value.style.chart.segments.dataLabels.color,
+              "font-size": e.value.style.chart.segments.dataLabels.fontSize + "px",
+              "font-weight": e.value.style.chart.segments.dataLabels.bold ? "bold" : "normal"
+            }, H(o(M)(
+              e.value.style.chart.segments.dataLabels.formatter,
+              a.value,
+              o(T)({
+                p: e.value.style.chart.segments.dataLabels.prefix,
+                v: a.value,
+                s: e.value.style.chart.segments.dataLabels.suffix,
+                r: e.value.style.chart.segments.dataLabels.rounding
+              })
+            )), 9, vt))), 256))
+          ])) : i("", !0),
+          e.value.style.chart.segments.dataLabels.show && e.value.style.chart.segments.ticks.show ? (r(), n("g", dt, [
+            (r(!0), n(V, null, G(d.value.ticks, (a) => (r(), n("line", {
+              x1: a.x,
+              x2: a.x,
+              y1: l.value.bottom,
+              y2: l.value.bottom + 3,
+              stroke: e.value.style.chart.segments.ticks.stroke,
+              "stroke-width": 1,
+              "stroke-linecap": "round"
+            }, null, 8, gt))), 256))
+          ])) : i("", !0)
+        ])) : i("", !0),
+        m(t.$slots, "svg", { svg: l.value }, void 0, !0)
+      ], 14, lt)),
+      t.$slots.watermark ? (r(), n("div", ft, [
+        m(t.$slots, "watermark", P(F({ isPrinting: o(se) || o(re) })), void 0, !0)
+      ])) : i("", !0),
+      I("div", {
+        ref_key: "chartLegend",
+        ref: X
+      }, [
+        e.value.style.chart.legend.show ? (r(), C(qe, {
+          key: 0,
+          clickable: !1,
+          legendSet: le.value,
+          config: Ce.value
+        }, {
+          item: w(({ legend: a }) => [
+            o(b) ? i("", !0) : (r(), n("div", mt, [
+              I("span", yt, H(a.name) + ":", 1),
+              I("span", null, H(a.value), 1)
+            ]))
+          ]),
+          _: 1
+        }, 8, ["legendSet", "config"])) : i("", !0),
+        m(t.$slots, "legend", { legend: le.value }, void 0, !0)
+      ], 512),
+      t.$slots.source ? (r(), n("div", {
+        key: 5,
+        ref_key: "source",
+        ref: Y,
+        dir: "auto"
+      }, [
+        m(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : i("", !0),
+      o(b) ? (r(), C(Ze, { key: 6 })) : i("", !0)
+    ], 46, tt));
+  }
+}, It = /* @__PURE__ */ et(pt, [["__scopeId", "data-v-d5ec7fd2"]]);
+export {
+  It as default
+};