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

package/dist/vue-ui-strip-plot-DnenGI-d.js

@@ -0,0 +1,916 @@
+import { defineAsyncComponent as I, computed as p, ref as v, toRefs as mt, watch as ce, shallowRef as Ee, onMounted as gt, onBeforeUnmount as Ge, watchEffect as xt, createElementBlock as n, openBlock as r, unref as i, normalizeStyle as j, normalizeClass as W, createBlock as T, createCommentVNode as c, createVNode as Be, createSlots as kt, withCtx as b, renderSlot as y, normalizeProps as M, guardReactiveProps as F, createElementVNode as k, Fragment as m, renderList as C, toDisplayString as S, mergeProps as wt, createTextVNode as At, nextTick as Lt } from "vue";
+import { u as Ct, c as he, t as _t, a as $t, p as O, b as Tt, o as He, f as de, g as Ve, d as St, e as Ue, h as Ot, D as zt, i as Y, X as Pt, k as pe, I as Nt, ab as It, l as Mt, j as Ft, y as Xe, E as Dt, v as Rt, w as Wt, z as Et } from "./index-Dzc2Gi60.js";
+import { t as je, u as Gt } from "./useResponsive-DfdjqQps.js";
+import { u as Bt, B as Ht } from "./useLoading-D7YHNtLX.js";
+import { u as Vt } from "./usePrinter-DBRh8ZvS.js";
+import { u as Ye } from "./useNestedProp-CjnS13nF.js";
+import { u as Ut } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Xt } from "./useChartAccessibility-9icAAmYg.js";
+import { u as jt } from "./useTimeLabelCollider-CIsgDrl9.js";
+import Yt from "./img-Vb4QHAHI.js";
+import { _ as qt } from "./Shape-Adi9i_-f.js";
+import Jt from "./Title-xTWR-Vil.js";
+import { _ as Kt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Qt = ["id"], Zt = ["xmlns", "viewBox"], el = ["x", "y", "width", "height"], tl = { key: 1 }, ll = { key: 0 }, al = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], ol = { key: 1 }, sl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], rl = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], ul = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], nl = ["x", "y", "fill", "font-size"], il = ["transform", "font-size", "fill", "text-anchor"], vl = ["transform", "font-size", "fill", "text-anchor", "innerHTML"], cl = ["fill", "font-size", "transform"], hl = ["fill", "font-size", "x", "y"], dl = ["x1", "x2", "y1", "y2", "stroke"], pl = ["cx", "cy", "fill"], fl = ["cx", "cy", "fill"], yl = ["id"], bl = ["stop-color"], ml = ["stop-color"], gl = ["stop-color"], xl = { key: 0 }, kl = ["x", "y", "font-size", "fill"], wl = {
+  key: 4,
+  class: "vue-data-ui-watermark"
+}, Al = ["innerHTML"], Ll = {
+  __name: "vue-ui-strip-plot",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectDatapoint"],
+  setup(qe, { expose: Je, emit: Ke }) {
+    const Qe = I(() => import("./Tooltip-BH3CiANh.js")), Ze = I(() => import("./vue-ui-accordion-CPk8wAuj.js")), et = I(() => import("./DataTable-ClgCsiJA.js")), tt = I(() => import("./UserOptions-CKKPgDLV.js")), lt = I(() => import("./PenAndPaper-D3WRn-G2.js")), at = I(() => import("./PackageVersion-CD5VH_Al.js")), { vue_ui_strip_plot: ot } = Ct(), g = qe, st = Ke, E = p({
+      get() {
+        return !!g.dataset && g.dataset.length;
+      },
+      set(t) {
+        return t;
+      }
+    }), q = v(he()), fe = v(0), J = v(!1), K = v(""), A = v(null), ye = v(null), be = v(null), me = v(null), ge = v(!1), xe = v(0), ke = v(0), Q = v(null), Z = v(null), G = v(null), ee = v(null), e = v(oe()), { loading: te, FINAL_DATASET: we, manualLoading: le } = Bt({
+      ...mt(g),
+      FINAL_CONFIG: e,
+      prepareConfig: oe,
+      skeletonDataset: [
+        {
+          name: "_",
+          color: "#DBDBDB",
+          plots: [
+            { name: "_", value: 1 },
+            { name: "_", value: 2 },
+            { name: "_", value: 3 }
+          ]
+        },
+        {
+          name: "_",
+          color: "#C4C4C4",
+          plots: [
+            { name: "_", value: 3 },
+            { name: "_", value: 5 },
+            { name: "_", value: 8 }
+          ]
+        },
+        {
+          name: "_",
+          color: "#ADADAD",
+          plots: [
+            { name: "_", value: 8 },
+            { name: "_", value: 13 },
+            { name: "_", value: 21 }
+          ]
+        },
+        {
+          name: "_",
+          color: "#969696",
+          plots: [
+            { name: "_", value: 21 },
+            { name: "_", value: 34 },
+            { name: "_", value: 55 }
+          ]
+        },
+        {
+          name: "_",
+          color: "#808080",
+          plots: [
+            { name: "_", value: 55 },
+            { name: "_", value: 89 },
+            { name: "_", value: 144 }
+          ]
+        }
+      ],
+      skeletonConfig: _t({
+        defaultConfig: e.value,
+        userConfig: {
+          userOptions: { show: !1 },
+          table: { show: !1 },
+          style: {
+            chart: {
+              backgroundColor: "#99999930",
+              padding: {
+                top: 24,
+                left: 24,
+                right: 24,
+                bottom: 24
+              },
+              grid: {
+                stroke: "#6A6A6A",
+                horizontalGrid: {
+                  stroke: "#6A6A6A"
+                },
+                verticalGrid: {
+                  stroke: "#6A6A6A"
+                }
+              },
+              plots: {
+                stroke: "#6A6A6A"
+              },
+              labels: {
+                bestPlotLabel: { show: !1 },
+                axis: {
+                  xLabel: "",
+                  yLabel: ""
+                },
+                xAxisLabels: { show: !1 },
+                yAxisLabels: { show: !1 }
+              }
+            }
+          }
+        }
+      })
+    }), { userOptionsVisible: ae, setUserOptionsVisibility: Ae, keepUserOptionState: Le } = Ut({ config: e.value }), { svgRef: Ce } = Xt({ config: e.value.style.chart.title });
+    function oe() {
+      const t = Ye({
+        userConfig: g.config,
+        defaultConfig: ot
+      });
+      return t.theme ? {
+        ...Ye({
+          userConfig: Tt.vue_ui_strip_plot[t.theme] || g.config,
+          defaultConfig: t
+        }),
+        customPalette: $t[t.theme] || O
+      } : t;
+    }
+    ce(() => g.config, async (t) => {
+      te.value || (e.value = oe()), ae.value = !e.value.userOptions.showOnChartHover, _e(), xe.value += 1, ke.value += 1, d.value.dataLabels.show = e.value.style.chart.labels.bestPlotLabel.show, d.value.showTable = e.value.table.show, d.value.showTooltip = e.value.style.chart.tooltip.show, _.value = e.value.style.chart.width, w.value = e.value.style.chart.height, R.value = e.value.style.chart.plots.radius;
+    }, { deep: !0 }), ce(() => g.dataset, (t) => {
+      Array.isArray(t) && t.length > 0 && (le.value = !1);
+    }, { deep: !0 });
+    const L = Ee(null), z = Ee(null);
+    gt(() => {
+      _e();
+    });
+    const se = p(() => !!e.value.debug);
+    function _e() {
+      if (He(g.dataset) ? (de({
+        componentName: "VueUiStripPlot",
+        type: "dataset",
+        debug: se.value
+      }), le.value = !0) : g.dataset.forEach((t, a) => {
+        Ve({
+          datasetObject: t,
+          requiredAttributes: ["name", "plots"]
+        }).forEach((l) => {
+          E.value = !1, de({
+            componentName: "VueUiStripPlot",
+            type: "datasetSerieAttribute",
+            property: l,
+            index: a,
+            debug: se.value
+          });
+        }), t.plots && t.plots.forEach((l, s) => {
+          Ve({
+            datasetObject: l,
+            requiredAttributes: ["name", "value"]
+          }).forEach((u) => {
+            E.value = !1, de({
+              componentName: "VueUiStripPlot",
+              type: "datasetSerieAttribute",
+              property: u,
+              index: `${a},${s}`,
+              debug: se.value
+            });
+          });
+        });
+      }), He(g.dataset) || (le.value = e.value.loading), e.value.responsive) {
+        const t = je(() => {
+          const { width: a, height: l } = Gt({
+            chart: A.value,
+            title: e.value.style.chart.title.text ? ye.value : null,
+            source: be.value,
+            noTitle: me.value
+          });
+          requestAnimationFrame(() => {
+            ut.value = l, _.value = Math.max(0.1, a), w.value = Math.max(0.1, l - 12), e.value.responsiveProportionalSizing ? R.value = Dt({
+              relator: Math.min(l, a),
+              adjuster: 600,
+              source: e.value.style.chart.plots.radius,
+              threshold: 6,
+              fallback: 6
+            }) : R.value = e.value.style.chart.plots.radius;
+          });
+        });
+        L.value && (z.value && L.value.unobserve(z.value), L.value.disconnect()), L.value = new ResizeObserver(t), z.value = A.value.parentNode, L.value.observe(z.value);
+      }
+      ge.value = !0, setTimeout(() => {
+        D.value = !1;
+      }, vt.value * 50);
+    }
+    Ge(() => {
+      L.value && (z.value && L.value.unobserve(z.value), L.value.disconnect());
+    });
+    const { isPrinting: $e, isImaging: Te, generatePdf: Se, generateImage: Oe } = Vt({
+      elementId: `strip-plot_${q.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-strip-plot",
+      options: e.value.userOptions.print
+    }), rt = p(() => e.value.userOptions.show && !e.value.style.chart.title.text), ze = p(() => St(e.value.customPalette)), D = v(e.value.useCssAnimation), P = v({
+      top: e.value.style.chart.padding.top,
+      bottom: e.value.style.chart.padding.bottom,
+      left: e.value.style.chart.padding.left,
+      right: e.value.style.chart.padding.right
+    }), _ = v(e.value.style.chart.width), w = v(e.value.style.chart.height), ut = v(e.value.style.chart.height), R = v(e.value.style.chart.plots.radius), d = v({
+      showTable: e.value.table.show,
+      dataLabels: {
+        show: e.value.style.chart.labels.bestPlotLabel.show
+      },
+      showTooltip: e.value.style.chart.tooltip.show
+    });
+    ce(e, () => {
+      d.value = {
+        showTable: e.value.table.show,
+        dataLabels: {
+          show: e.value.style.chart.labels.bestPlotLabel.show
+        },
+        showTooltip: e.value.style.chart.tooltip.show
+      }, _.value = e.value.style.chart.width, w.value = e.value.style.chart.height, R.value = e.value.style.chart.plots.radius;
+    }, { immediate: !0 });
+    const re = p(() => Math.min(R.value, o.value.stripWidth / 2 * 0.9));
+    function nt() {
+      let t = 0;
+      ee.value && (t = Array.from(ee.value.querySelectorAll("text")).reduce((s, u) => {
+        const f = u.getComputedTextLength();
+        return f > s ? f : s;
+      }, 0));
+      const a = Z.value ? Z.value.getBoundingClientRect().width : 0;
+      return t + a + (a ? 24 : 0);
+    }
+    const ue = v(0), it = je((t) => {
+      ue.value = t;
+    }, 100);
+    xt((t) => {
+      const a = G.value;
+      if (!a) return;
+      const l = new ResizeObserver((s) => {
+        it(s[0].contentRect.height);
+      });
+      l.observe(a), t(() => l.disconnect());
+    }), Ge(() => {
+      ue.value = 0;
+    });
+    const Pe = p(() => {
+      let t = 0;
+      Q.value && (t = Q.value.getBBox().height + e.value.style.chart.labels.axis.fontSize / 3 + 12 + e.value.style.chart.labels.axis.xLabelOffsetY);
+      let a = 0;
+      return G.value && (a = ue.value + 12), t + a;
+    }), o = p(() => {
+      const t = nt(), a = _.value - t - e.value.style.chart.padding.left - e.value.style.chart.padding.right - e.value.style.chart.labels.axis.yLabelOffsetX - 5;
+      return {
+        left: P.value.left + t + e.value.style.chart.labels.axis.yLabelOffsetX + 5,
+        right: _.value - P.value.right,
+        top: P.value.top,
+        bottom: w.value - P.value.bottom - Pe.value,
+        width: a,
+        height: w.value - P.value.top - P.value.bottom - Pe.value,
+        stripWidth: a / we.value.length,
+        absoluteHeight: w.value
+      };
+    }), B = p(() => we.value.map((t, a) => {
+      const l = he();
+      return {
+        ...t,
+        id: l,
+        color: t.color ? Ue(t.color) : ze.value[a] || O[a] || O[a % O.length],
+        plots: t.plots.map((s, u) => ({
+          ...s,
+          value: Ot(s.value),
+          parentId: l,
+          parentName: t.name,
+          parentIndex: a,
+          plotIndex: u,
+          color: t.color ? Ue(t.color) : ze.value[a] || O[a] || O[a % O.length],
+          id: he()
+        })).sort((s, u) => s.value - u.value)
+      };
+    })), x = p(() => (B.value || []).map((t, a) => ({
+      ...t,
+      plots: t.plots.map((l) => ({
+        ...l,
+        x: o.value.left + (a + 1) * o.value.stripWidth - o.value.stripWidth / 2
+      }))
+    }))), vt = p(() => Math.max(...x.value.map((t) => t.plots.length))), ne = p(() => {
+      const t = x.value.flatMap((a) => a.plots.map((l) => l.value));
+      return {
+        max: Math.max(...t),
+        min: Math.min(...t)
+      };
+    }), $ = p(() => zt(ne.value.min < 0 ? ne.value.min : 0, ne.value.max, e.value.style.chart.grid.scaleSteps)), ct = p(() => (x.value || []).map((t, a) => ({
+      ...t,
+      plots: t.plots.map((l) => ({
+        ...l,
+        y: o.value.bottom - (l.value + Math.abs($.value.min)) / ($.value.max + Math.abs($.value.min)) * o.value.height
+      }))
+    }))), Ne = p(() => $.value.ticks.map((t) => ({
+      y: o.value.bottom - o.value.height * ((t + Math.abs($.value.min)) / ($.value.max + Math.abs($.value.min))),
+      x1: o.value.left,
+      x2: o.value.right,
+      value: t
+    }))), ie = v(null), h = v(null);
+    function ht({ datapoint: t, seriesIndex: a }) {
+      J.value = !1, h.value = null, e.value.events.datapointLeave && e.value.events.datapointLeave({ datapoint: t, seriesIndex: a });
+    }
+    function dt({ datapoint: t, seriesIndex: a }) {
+      st("selectDatapoint", t), e.value.events.datapointClick && e.value.events.datapointClick({ datapoint: t, seriesIndex: a });
+    }
+    function pt({ datapoint: t, seriesIndex: a }) {
+      e.value.events.datapointEnter && e.value.events.datapointEnter({ datapoint: t, seriesIndex: a }), ie.value = { datapoint: t, seriesIndex: a, config: e.value, series: B.value }, J.value = !0, h.value = t;
+      const l = e.value.style.chart.tooltip.customFormat;
+      if (Xe(l) && Et(() => l({
+        seriesIndex: a,
+        datapoint: t,
+        series: B.value,
+        config: e.value
+      })))
+        K.value = l({
+          seriesIndex: a,
+          datapoint: t,
+          series: B.value,
+          config: e.value
+        });
+      else {
+        let s = "";
+        s += `<div style="display:flex;flex-direction:row;gap:6px;align-items:center;"><svg viewBox="0 0 12 12" height="14" width="14"><circle cx="6" cy="6" r="6" stroke="none" fill="${e.value.style.chart.plots.gradient.show ? `url(#${t.parentId})` : t.color}"/></svg>${t.name}</div>`, s += `<div>${pe(
+          e.value.style.chart.labels.formatter,
+          t.value,
+          Y({
+            p: e.value.style.chart.labels.prefix,
+            v: t.value,
+            s: e.value.style.chart.labels.suffix,
+            r: e.value.style.chart.tooltip.roundingValue
+          }),
+          { datapoint: t, seriesIndex: a }
+        )}</div>`, K.value = `<div>${s}</div>`;
+      }
+    }
+    const H = p(() => {
+      const t = x.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((s, u) => u.value - s.value).map((s) => ({
+        name: `${l.name} - ${s.name}`,
+        color: s.color
+      }))), a = x.value.flatMap((l) => JSON.parse(JSON.stringify(l.plots)).sort((s, u) => u.value - s.value).map((s) => s.value));
+      return { head: t, body: a };
+    });
+    function Ie(t = null) {
+      Lt(() => {
+        const a = H.value.head.map((u, f) => [[
+          u.name
+        ], [H.value.body[f]]]), l = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [[e.value.table.columnNames.series], [e.value.table.columnNames.value]]].concat(a), s = Rt(l);
+        t ? t(s) : Wt({ csvContent: s, title: e.value.style.chart.title.text || "vue-ui-strip-plot" });
+      });
+    }
+    const V = p(() => {
+      const t = [
+        e.value.table.columnNames.series,
+        e.value.table.columnNames.value
+      ], a = H.value.head.map((u, f) => {
+        const X = Y({
+          p: e.value.style.chart.labels.prefix,
+          v: H.value.body[f],
+          s: e.value.style.chart.labels.suffix,
+          r: e.value.table.td.roundingValue
+        });
+        return [
+          {
+            color: u.color,
+            name: u.name
+          },
+          X
+        ];
+      }), l = {
+        th: {
+          backgroundColor: e.value.table.th.backgroundColor,
+          color: e.value.table.th.color,
+          outline: e.value.table.th.outline
+        },
+        td: {
+          backgroundColor: e.value.table.td.backgroundColor,
+          color: e.value.table.td.color,
+          outline: e.value.table.td.outline
+        },
+        breakpoint: e.value.table.responsiveBreakpoint
+      };
+      return {
+        colNames: [
+          e.value.table.columnNames.series,
+          e.value.table.columnNames.value
+        ],
+        head: t,
+        body: a,
+        config: l
+      };
+    }), N = v(!1);
+    function Me(t) {
+      N.value = t, fe.value += 1;
+    }
+    function ft() {
+      return x.value;
+    }
+    function Fe() {
+      d.value.showTable = !d.value.showTable;
+    }
+    function De() {
+      d.value.dataLabels.show = !d.value.dataLabels.show;
+    }
+    function Re() {
+      d.value.showTooltip = !d.value.showTooltip;
+    }
+    const U = v(!1);
+    function ve() {
+      U.value = !U.value;
+    }
+    async function yt({ scale: t = 2 } = {}) {
+      if (!A.value) return;
+      const { width: a, height: l } = A.value.getBoundingClientRect(), s = a / l, { imageUri: u, base64: f } = await Yt({ domElement: A.value, base64: !0, img: !0, scale: t });
+      return {
+        imageUri: u,
+        base64: f,
+        title: e.value.style.chart.title.text,
+        width: a,
+        height: l,
+        aspectRatio: s
+      };
+    }
+    const We = p(() => x.value.map((t) => t.name)), bt = v({ start: 0, end: x.value.length });
+    return jt({
+      timeLabelsEls: G,
+      timeLabels: We,
+      slicer: bt,
+      configRef: e,
+      rotationPath: ["style", "chart", "labels", "xAxisLabels", "rotation"],
+      autoRotatePath: ["style", "chart", "labels", "xAxisLabels", "autoRotate", "enable"],
+      isAutoSize: !1,
+      width: _,
+      height: w,
+      targetClass: ".vue-ui-strip-plot-category-name",
+      rotation: e.value.style.chart.labels.xAxisLabels.autoRotate.angle
+    }), Je({
+      getData: ft,
+      getImage: yt,
+      generatePdf: Se,
+      generateCsv: Ie,
+      generateImage: Oe,
+      toggleTable: Fe,
+      toggleLabels: De,
+      toggleTooltip: Re,
+      toggleAnnotator: ve,
+      toggleFullscreen: Me
+    }), (t, a) => (r(), n("div", {
+      ref_key: "stripPlotChart",
+      ref: A,
+      class: W(`vue-ui-strip-plot ${N.value ? "vue-data-ui-wrapper-fullscreen" : ""} ${e.value.useCssAnimation ? "" : "vue-ui-dna"}`),
+      style: j(`font-family:${e.value.style.fontFamily};width:100%; text-align:center;background:${e.value.style.chart.backgroundColor};${e.value.responsive ? "height:100%" : ""}`),
+      id: `strip-plot_${q.value}`,
+      onMouseenter: a[1] || (a[1] = () => i(Ae)(!0)),
+      onMouseleave: a[2] || (a[2] = () => i(Ae)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator ? (r(), T(i(lt), {
+        key: 0,
+        svgRef: i(Ce),
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        active: U.value,
+        onClose: ve
+      }, null, 8, ["svgRef", "backgroundColor", "color", "active"])) : c("", !0),
+      rt.value ? (r(), n("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: me,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : c("", !0),
+      e.value.style.chart.title.text ? (r(), n("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: ye,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (r(), T(Jt, {
+          key: `title_${xe.value}`,
+          config: {
+            title: {
+              cy: "donut-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "donut-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : c("", !0),
+      e.value.userOptions.show && E.value && (i(Le) || i(ae)) ? (r(), T(i(tt), {
+        ref: "details",
+        key: `user_option_${fe.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: i($e),
+        isImaging: i(Te),
+        uid: q.value,
+        hasTooltip: e.value.userOptions.buttons.tooltip && e.value.style.chart.tooltip.show,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasImg: e.value.userOptions.buttons.img,
+        hasTable: e.value.userOptions.buttons.table,
+        hasLabel: e.value.userOptions.buttons.labels,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isTooltip: d.value.showTooltip,
+        isFullscreen: N.value,
+        titles: { ...e.value.userOptions.buttonTitles },
+        chartElement: A.value,
+        position: e.value.userOptions.position,
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: U.value,
+        callbacks: e.value.userOptions.callbacks,
+        printScale: e.value.userOptions.print.scale,
+        onToggleFullscreen: Me,
+        onGeneratePdf: i(Se),
+        onGenerateCsv: Ie,
+        onGenerateImage: i(Oe),
+        onToggleTable: Fe,
+        onToggleLabels: De,
+        onToggleTooltip: Re,
+        onToggleAnnotator: ve,
+        style: j({
+          visibility: i(Le) ? i(ae) ? "visible" : "hidden" : "visible"
+        })
+      }, kt({ _: 2 }, [
+        t.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: b(({ isOpen: l, color: s }) => [
+            y(t.$slots, "menuIcon", M(F({ isOpen: l, color: s })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        t.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: b(() => [
+            y(t.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        t.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: b(() => [
+            y(t.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        t.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: b(() => [
+            y(t.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        t.$slots.optionImg ? {
+          name: "optionImg",
+          fn: b(() => [
+            y(t.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        t.$slots.optionTable ? {
+          name: "optionTable",
+          fn: b(() => [
+            y(t.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        t.$slots.optionLabels ? {
+          name: "optionLabels",
+          fn: b(() => [
+            y(t.$slots, "optionLabels", {}, void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        t.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: b(({ toggleFullscreen: l, isFullscreen: s }) => [
+            y(t.$slots, "optionFullscreen", M(F({ toggleFullscreen: l, isFullscreen: s })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0,
+        t.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: b(({ toggleAnnotator: l, isAnnotator: s }) => [
+            y(t.$slots, "optionAnnotator", M(F({ toggleAnnotator: l, isAnnotator: s })), void 0, !0)
+          ]),
+          key: "8"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasTooltip", "hasPdf", "hasXls", "hasImg", "hasTable", "hasLabel", "hasFullscreen", "isTooltip", "isFullscreen", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : c("", !0),
+      (r(), n("svg", {
+        ref_key: "svgRef",
+        ref: Ce,
+        xmlns: i(Pt),
+        class: W({ "vue-data-ui-fullscreen--on": N.value, "vue-data-ui-fulscreen--off": !N.value }),
+        viewBox: `0 0 ${_.value} ${w.value}`,
+        style: j(`max-width:100%; overflow: visible; background:transparent;color:${e.value.style.chart.color};`)
+      }, [
+        Be(i(at)),
+        t.$slots["chart-background"] ? (r(), n("foreignObject", {
+          key: 0,
+          x: o.value.left,
+          y: o.value.top,
+          width: Math.max(0.1, o.value.width),
+          height: Math.max(0.1, o.value.height),
+          style: {
+            pointerEvents: "none"
+          }
+        }, [
+          y(t.$slots, "chart-background", {}, void 0, !0)
+        ], 8, el)) : c("", !0),
+        e.value.style.chart.grid.show ? (r(), n("g", tl, [
+          e.value.style.chart.grid.horizontalGrid.show ? (r(), n("g", ll, [
+            (r(!0), n(m, null, C(Ne.value, (l) => (r(), n("line", {
+              x1: l.x1,
+              x2: l.x2,
+              y1: l.y,
+              y2: l.y,
+              stroke: e.value.style.chart.grid.horizontalGrid.stroke,
+              "stroke-width": e.value.style.chart.grid.horizontalGrid.strokeWidth,
+              "stroke-dasharray": e.value.style.chart.grid.horizontalGrid.strokeDasharray,
+              "stroke-linecap": "round"
+            }, null, 8, al))), 256))
+          ])) : c("", !0),
+          e.value.style.chart.grid.verticalGrid.show ? (r(), n("g", ol, [
+            (r(!0), n(m, null, C(x.value, (l, s) => (r(), n("line", {
+              x1: o.value.left + (s + 1) * o.value.stripWidth,
+              x2: o.value.left + (s + 1) * o.value.stripWidth,
+              y1: o.value.top,
+              y2: o.value.bottom,
+              stroke: e.value.style.chart.grid.verticalGrid.stroke,
+              "stroke-width": e.value.style.chart.grid.verticalGrid.strokeWidth,
+              "stroke-dasharray": e.value.style.chart.grid.verticalGrid.strokeDasharray,
+              "stroke-linecap": "round"
+            }, null, 8, sl))), 256))
+          ])) : c("", !0),
+          k("line", {
+            x1: o.value.left,
+            x2: o.value.left,
+            y1: o.value.top,
+            y2: o.value.bottom,
+            stroke: e.value.style.chart.grid.stroke,
+            "stroke-width": e.value.style.chart.grid.strokeWidth,
+            "stroke-linecap": "round"
+          }, null, 8, rl),
+          k("line", {
+            x1: o.value.left,
+            x2: o.value.right,
+            y1: o.value.bottom,
+            y2: o.value.bottom,
+            stroke: e.value.style.chart.grid.stroke,
+            "stroke-width": e.value.style.chart.grid.strokeWidth,
+            "stroke-linecap": "round"
+          }, null, 8, ul)
+        ])) : c("", !0),
+        e.value.style.chart.labels.yAxisLabels.show ? (r(), n("g", {
+          key: 2,
+          ref_key: "scaleLabels",
+          ref: ee
+        }, [
+          (r(!0), n(m, null, C(Ne.value, (l, s) => (r(), n("text", {
+            x: l.x1 + e.value.style.chart.labels.yAxisLabels.offsetX - 5,
+            y: l.y + e.value.style.chart.labels.yAxisLabels.fontSize / 3,
+            fill: e.value.style.chart.labels.yAxisLabels.color,
+            "font-size": e.value.style.chart.labels.yAxisLabels.fontSize,
+            "text-anchor": "end"
+          }, S(i(pe)(
+            e.value.style.chart.labels.formatter,
+            l.value,
+            i(Y)({
+              p: e.value.style.chart.labels.prefix,
+              v: l.value,
+              s: e.value.style.chart.labels.suffix,
+              r: e.value.style.chart.labels.yAxisLabels.rounding
+            }),
+            { datapoint: l, seriesIndex: s }
+          )), 9, nl))), 256))
+        ], 512)) : c("", !0),
+        e.value.style.chart.labels.xAxisLabels.show ? (r(), n("g", {
+          key: 3,
+          ref_key: "timeLabelsEls",
+          ref: G
+        }, [
+          (r(!0), n(m, null, C(We.value, (l, s) => (r(), n("g", null, [
+            String(l).includes(`
+`) ? (r(), n("text", {
+              key: 1,
+              class: "vue-ui-strip-plot-category-name",
+              transform: `translate(${o.value.left + (s + 1) * o.value.stripWidth - o.value.stripWidth / 2}, ${o.value.bottom + e.value.style.chart.labels.xAxisLabels.fontSize * 2 + e.value.style.chart.labels.xAxisLabels.offsetY}), rotate(${e.value.style.chart.labels.xAxisLabels.rotation})`,
+              "font-size": e.value.style.chart.labels.xAxisLabels.fontSize,
+              fill: e.value.style.chart.labels.xAxisLabels.color,
+              "text-anchor": e.value.style.chart.labels.xAxisLabels.rotation > 0 ? "start" : e.value.style.chart.labels.xAxisLabels.rotation < 0 ? "end" : "middle",
+              innerHTML: i(Nt)({
+                content: i(It)(String(l)),
+                fontSize: e.value.style.chart.labels.xAxisLabels.fontSize,
+                fill: e.value.style.chart.labels.xAxisLabels.color,
+                x: 0,
+                y: 0
+              })
+            }, null, 8, vl)) : (r(), n("text", {
+              key: 0,
+              class: "vue-ui-strip-plot-category-name",
+              transform: `translate(${o.value.left + (s + 1) * o.value.stripWidth - o.value.stripWidth / 2}, ${o.value.bottom + e.value.style.chart.labels.xAxisLabels.fontSize * 2 + e.value.style.chart.labels.xAxisLabels.offsetY}), rotate(${e.value.style.chart.labels.xAxisLabels.rotation})`,
+              "font-size": e.value.style.chart.labels.xAxisLabels.fontSize,
+              fill: e.value.style.chart.labels.xAxisLabels.color,
+              "text-anchor": e.value.style.chart.labels.xAxisLabels.rotation > 0 ? "start" : e.value.style.chart.labels.xAxisLabels.rotation < 0 ? "end" : "middle"
+            }, S(String(l)), 9, il))
+          ]))), 256))
+        ], 512)) : c("", !0),
+        e.value.style.chart.labels.axis.yLabel ? (r(), n("text", {
+          key: 4,
+          ref_key: "yAxisLabel",
+          ref: Z,
+          fill: e.value.style.chart.labels.axis.color,
+          "font-size": e.value.style.chart.labels.axis.fontSize,
+          transform: `translate(${e.value.style.chart.labels.axis.fontSize}, ${o.value.top + o.value.height / 2}) rotate(-90)`,
+          "text-anchor": "middle"
+        }, S(e.value.style.chart.labels.axis.yLabel), 9, cl)) : c("", !0),
+        e.value.style.chart.labels.axis.xLabel ? (r(), n("text", {
+          key: 5,
+          ref_key: "xAxisLabel",
+          ref: Q,
+          fill: e.value.style.chart.labels.axis.color,
+          "font-size": e.value.style.chart.labels.axis.fontSize,
+          x: o.value.left + o.value.width / 2,
+          y: w.value - e.value.style.chart.labels.axis.fontSize / 3,
+          "text-anchor": "middle"
+        }, S(e.value.style.chart.labels.axis.xLabel), 9, hl)) : c("", !0),
+        h.value ? (r(), n(m, { key: 6 }, [
+          k("line", {
+            x1: o.value.left,
+            x2: o.value.right,
+            y1: h.value.y,
+            y2: h.value.y,
+            stroke: h.value.color,
+            "stroke-width": 1,
+            class: W({ "select-circle": e.value.useCssAnimation })
+          }, null, 10, dl),
+          k("circle", {
+            cx: o.value.left,
+            cy: h.value.y,
+            r: 3,
+            fill: h.value.color,
+            class: W({ "select-circle": e.value.useCssAnimation })
+          }, null, 10, pl),
+          k("circle", {
+            cx: o.value.right,
+            cy: h.value.y,
+            r: 3,
+            fill: h.value.color,
+            class: W({ "select-circle": e.value.useCssAnimation })
+          }, null, 10, fl)
+        ], 64)) : c("", !0),
+        k("defs", null, [
+          (r(!0), n(m, null, C(x.value, (l) => (r(), n("radialGradient", {
+            id: l.id,
+            fy: "30%"
+          }, [
+            k("stop", {
+              offset: "10%",
+              "stop-color": i(Mt)(l.color, e.value.style.chart.plots.gradient.intensity / 100)
+            }, null, 8, bl),
+            k("stop", {
+              offset: "90%",
+              "stop-color": i(Ft)(l.color, 0.1)
+            }, null, 8, ml),
+            k("stop", {
+              offset: "100%",
+              "stop-color": l.color
+            }, null, 8, gl)
+          ], 8, yl))), 256))
+        ]),
+        (r(!0), n(m, null, C(ct.value, (l, s) => (r(), n(m, null, [
+          (r(!0), n(m, null, C(l.plots, (u, f) => (r(), T(qt, wt({ ref_for: !0 }, t.$attrs, {
+            plot: { x: u.x, y: ge.value ? u.y : o.value.top },
+            radius: h.value && h.value.id === u.id ? re.value * 1.5 : re.value,
+            shape: e.value.style.chart.plots.shape,
+            stroke: e.value.style.chart.plots.stroke,
+            strokeWidth: e.value.style.chart.plots.strokeWidth,
+            color: e.value.style.chart.plots.gradient.show ? `url(#${l.id})` : l.color,
+            style: `transition: all 0.2s ease-in-out; opacity:${h.value ? h.value.id === u.id ? 1 : 0.2 : e.value.style.chart.plots.opacity};${D.value ? `transition-delay:${f * 50}ms` : ""}`,
+            class: { "vue-ui-strip-plot-animated": e.value.useCssAnimation && D.value && !i(te), "vue-ui-strip-plot-select-circle": e.value.useCssAnimation && !D.value },
+            onMouseenter: (X) => pt({ datapoint: u, seriesIndex: f }),
+            onMouseleave: (X) => ht({ datapoint: u, seriesIndex: f }),
+            onClick: (X) => dt({ datapoint: u, seriesIndex: f })
+          }), null, 16, ["plot", "radius", "shape", "stroke", "strokeWidth", "color", "style", "class", "onMouseenter", "onMouseleave", "onClick"]))), 256)),
+          d.value.dataLabels.show ? (r(), n("g", xl, [
+            (r(!0), n(m, null, C(l.plots, (u, f) => (r(), n(m, null, [
+              f === l.plots.length - 1 || h.value && h.value.id === u.id && !d.value.showTooltip ? (r(), n("text", {
+                key: 0,
+                x: u.x,
+                y: u.y + e.value.style.chart.labels.bestPlotLabel.offsetY - re.value * (h.value && h.value.id === u.id && !d.value.showTooltip ? 2 : 1.5),
+                "font-size": e.value.style.chart.labels.bestPlotLabel.fontSize,
+                fill: e.value.style.chart.labels.bestPlotLabel.color,
+                "text-anchor": "middle",
+                style: j(`opacity:${e.value.useCssAnimation && D.value ? 0 : 1};transition:opacity 0.2s ease-in;`)
+              }, S(u.name) + " " + S(e.value.style.chart.labels.bestPlotLabel.showValue ? i(pe)(
+                e.value.style.chart.labels.formatter,
+                u.value,
+                i(Y)({
+                  p: `(${e.value.style.chart.labels.prefix}`,
+                  v: u.value,
+                  s: `${e.value.style.chart.labels.suffix})`,
+                  r: e.value.style.chart.labels.bestPlotLabel.rounding
+                }),
+                { datapoint: u, seriesIndex: f }
+              ) : ""), 13, kl)) : c("", !0)
+            ], 64))), 256))
+          ])) : c("", !0)
+        ], 64))), 256)),
+        y(t.$slots, "svg", { svg: o.value }, void 0, !0)
+      ], 14, Zt)),
+      t.$slots.watermark ? (r(), n("div", wl, [
+        y(t.$slots, "watermark", M(F({ isPrinting: i($e) || i(Te) })), void 0, !0)
+      ])) : c("", !0),
+      t.$slots.source ? (r(), n("div", {
+        key: 5,
+        ref_key: "source",
+        ref: be,
+        dir: "auto"
+      }, [
+        y(t.$slots, "source", {}, void 0, !0)
+      ], 512)) : c("", !0),
+      Be(i(Qe), {
+        show: d.value.showTooltip && J.value,
+        backgroundColor: e.value.style.chart.tooltip.backgroundColor,
+        color: e.value.style.chart.tooltip.color,
+        borderRadius: e.value.style.chart.tooltip.borderRadius,
+        borderColor: e.value.style.chart.tooltip.borderColor,
+        borderWidth: e.value.style.chart.tooltip.borderWidth,
+        fontSize: e.value.style.chart.tooltip.fontSize,
+        backgroundOpacity: e.value.style.chart.tooltip.backgroundOpacity,
+        position: e.value.style.chart.tooltip.position,
+        offsetY: e.value.style.chart.tooltip.offsetY,
+        parent: A.value,
+        content: K.value,
+        isFullscreen: N.value,
+        isCustom: i(Xe)(e.value.style.chart.tooltip.customFormat),
+        smooth: e.value.style.chart.tooltip.smooth,
+        backdropFilter: e.value.style.chart.tooltip.backdropFilter
+      }, {
+        "tooltip-before": b(() => [
+          y(t.$slots, "tooltip-before", M(F({ ...ie.value })), void 0, !0)
+        ]),
+        "tooltip-after": b(() => [
+          y(t.$slots, "tooltip-after", M(F({ ...ie.value })), void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom", "smooth", "backdropFilter"]),
+      E.value ? (r(), T(i(Ze), {
+        key: 6,
+        hideDetails: "",
+        config: {
+          open: d.value.showTable,
+          maxHeight: 1e4,
+          body: {
+            backgroundColor: e.value.style.chart.backgroundColor,
+            color: e.value.style.chart.color
+          },
+          head: {
+            backgroundColor: e.value.style.chart.backgroundColor,
+            color: e.value.style.chart.color
+          }
+        }
+      }, {
+        content: b(() => [
+          (r(), T(i(et), {
+            key: `table_${ke.value}`,
+            colNames: V.value.colNames,
+            head: V.value.head,
+            body: V.value.body,
+            config: V.value.config,
+            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` : ${e.value.style.chart.title.subtitle.text}` : ""}`,
+            onClose: a[0] || (a[0] = (l) => d.value.showTable = !1)
+          }, {
+            th: b(({ th: l }) => [
+              k("div", {
+                innerHTML: l,
+                style: { display: "flex", "align-items": "center" }
+              }, null, 8, Al)
+            ]),
+            td: b(({ td: l }) => [
+              At(S(l.name || l), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"]))
+        ]),
+        _: 1
+      }, 8, ["config"])) : c("", !0),
+      i(te) ? (r(), T(Ht, { key: 7 })) : c("", !0)
+    ], 46, Qt));
+  }
+}, Rl = /* @__PURE__ */ Kt(Ll, [["__scopeId", "data-v-1a2bfe64"]]);
+export {
+  Rl as default
+};