vue-data-ui 2.12.2 → 2.12.4

package/dist/vue-ui-ridgeline-BezQ7Hj-.js

@@ -0,0 +1,924 @@
+import { computed as g, ref as i, onMounted as bt, onBeforeUnmount as xt, watch as Xe, createElementBlock as n, openBlock as r, unref as c, normalizeStyle as M, normalizeClass as W, createBlock as T, createCommentVNode as h, renderSlot as p, createElementVNode as d, createSlots as Re, withCtx as m, normalizeProps as j, guardReactiveProps as Y, Fragment as f, renderList as $, mergeProps as Ee, toDisplayString as F, createVNode as kt, createTextVNode as He, nextTick as At } from "vue";
+import { u as $t, c as ne, o as Ct, e as ue, g as Ve, b as wt, d as _t, p as q, am as Be, a9 as Mt, T as Ue, U as Tt, V as Pt, X as Ot, G as St, i as J, f as K, t as zt, a as Lt, q as Nt, r as Dt, J as It } from "./index-BKDMQMKQ.js";
+import { u as Ft } from "./useUserOptionState-BIvW1Kz7.js";
+import { u as Xt } from "./useChartAccessibility-BWojgys7.js";
+import { u as Rt, U as Et } from "./usePrinter-BNaQ2HUw.js";
+import { t as Ht, u as Vt } from "./useResponsive-JZ9xq-JV.js";
+import { u as Ge } from "./useNestedProp-B_1UW4X2.js";
+import Bt from "./vue-ui-accordion-DyqkVlpC.js";
+import { B as Ut } from "./BaseDraggableDialog-DyV-BY6O.js";
+import { D as Gt } from "./DataTable-BAr4XpSA.js";
+import { L as Wt } from "./Legend-CxZqkiNm.js";
+import { _ as jt } from "./PenAndPaper-DmGOEcsD.js";
+import { _ as Yt } from "./Shape-gJBc0QCq.js";
+import qt from "./vue-ui-skeleton-BgWQSBb-.js";
+import { _ as Jt } from "./Title-BQKp20eU.js";
+import Kt from "./vue-ui-xy-2Z_f3J92.js";
+import { _ as Qt } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Zt = ["id"], el = ["xmlns", "viewBox"], tl = ["id"], ll = ["stop-color"], al = ["stop-color"], ol = ["stop-color"], sl = ["stop-color"], rl = ["id"], nl = ["stop-color"], ul = ["stop-color"], il = ["stop-color"], cl = ["stop-color"], hl = { key: 0 }, vl = ["fill", "d"], dl = ["stroke", "stroke-width", "d"], yl = ["fill", "d"], fl = ["stroke", "stroke-dasharray", "stroke-width", "d"], gl = ["x1", "y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"], pl = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], ml = ["x", "y", "font-size", "font-weight", "fill", "text-decoration", "onMouseenter", "onClick"], bl = { key: 0 }, xl = ["font-size", "fill", "font-weight", "transform", "text-anchor"], kl = ["x", "y", "width", "height", "onMouseenter", "onClick"], Al = ["x1", "x2", "y1", "y2", "stroke", "stroke-width", "stroke-dasharray"], $l = ["cx", "cy", "stroke", "stroke-width", "r", "fill"], Cl = ["x", "y", "text-anchor", "font-size", "fill"], wl = {
+  key: 5,
+  class: "vue-data-ui-watermark"
+}, _l = ["onClick"], Ml = ["innerHTML"], Tl = {
+  __name: "vue-ui-ridgeline",
+  props: {
+    config: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    dataset: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: ["selectLegend", "selectDatapoint", "selectX"],
+  setup(We, { expose: je, emit: Ye }) {
+    const { vue_ui_ridgeline: qe } = $t(), x = We, O = g({
+      get() {
+        return !!x.dataset && x.dataset.length;
+      },
+      set(l) {
+        return l;
+      }
+    }), Q = Ye, V = i(null), ie = i(null), ce = i(null), B = i(null), he = i(null), ve = i(null), de = i(0), Je = i(0), ye = i(0), C = i(ne()), fe = i(0), Ke = i(0), ge = i(512), v = i(null), N = i(null), Z = i(null), pe = i(0);
+    function me() {
+      const l = Ge({
+        userConfig: x.config,
+        defaultConfig: qe
+      });
+      return l.theme ? {
+        ...Ge({
+          userConfig: Lt.vue_ui_ridgeline[l.theme] || x.config,
+          defaultConfig: l
+        }),
+        customPalette: zt[l.theme] || q
+      } : l;
+    }
+    const e = g({
+      get: () => me(),
+      set: (l) => l
+    }), w = i(Math.min(
+      e.value.style.chart.areas.height,
+      e.value.style.chart.areas.rowHeight
+    )), {
+      userOptionsVisible: ee,
+      setUserOptionsVisibility: be,
+      keepUserOptionState: xe
+    } = Ft({ config: e.value }), { svgRef: te } = Xt({ config: e.value.style.chart.title });
+    bt(le), xt(() => {
+      B.value && B.value.disconnect();
+    });
+    function le() {
+      if (Ct(x.dataset) ? ue({
+        componentName: "VueUiRidgeline",
+        type: "dataset"
+      }) : x.dataset.forEach((l, s) => {
+        Ve({
+          datasetObject: l,
+          requiredAttributes: ["name", "datapoints"]
+        }).forEach((t) => {
+          O.value = !1, ue({
+            componentName: "VueUiRidgeline",
+            type: "datasetSerieAttribute",
+            property: t,
+            index: s
+          });
+        }), l.datapoints.length && l.datapoints.forEach((t, o) => {
+          Ve({
+            datasetObject: t,
+            requiredAttributes: ["name", "values"]
+          }).forEach((a) => {
+            O.value = !1, ue({
+              componentName: "VueUiRidgeline",
+              type: "datasetSerieAttribute",
+              property: `datapoint.${a}`,
+              index: `${s}-${o}`
+            });
+          });
+        });
+      }), Ke.value = x.dataset.length, w.value = Math.min(
+        e.value.style.chart.areas.height,
+        e.value.style.chart.areas.rowHeight
+      ), e.value.responsive) {
+        const l = Ht(() => {
+          const { width: s, height: t } = Vt({
+            chart: V.value,
+            title: e.value.style.chart.title.text ? ie.value : null,
+            legend: e.value.style.chart.legend.show ? ce.value : null,
+            source: he.value,
+            noTitle: ve.value,
+            padding: e.value.style.chart.padding
+          });
+          requestAnimationFrame(() => {
+            ge.value = s, w.value = t / x.dataset.length, pe.value = t;
+          });
+        });
+        B.value = new ResizeObserver(l), B.value.observe(V.value.parentNode);
+      }
+    }
+    const { isPrinting: ke, isImaging: Ae, generatePdf: $e, generateImage: Ce } = Rt({
+      elementId: `vue-ui-ridgeline_${C.value}`,
+      fileName: e.value.style.chart.title.text || "vue-ui-ridgeline",
+      options: e.value.userOptions.print
+    }), Qe = g(() => e.value.userOptions.show && !e.value.style.chart.title.text), Ze = g(() => wt(e.value.customPalette)), X = i({
+      showTable: e.value.table.show
+    });
+    Xe(() => x.config, (l) => {
+      e.value = me(), ee.value = !e.value.userOptions.showOnChartHover, le(), de.value += 1, ye.value += 1, w.value = Math.min(
+        e.value.style.chart.areas.height,
+        e.value.style.chart.areas.rowHeight
+      ), X.value.showTable = e.value.table.show;
+    }, { deep: !0 }), Xe(() => x.dataset, le, { deep: !0 });
+    const ae = g(() => e.value.style.chart.areas.height / e.value.style.chart.areas.rowHeight);
+    function we(l) {
+      P.value.includes(l) ? P.value = P.value.filter((s) => s !== l) : P.value.push(l), Q("selectLegend", I.value);
+    }
+    const _ = g(() => O.value ? x.dataset.map((l, s) => ({
+      ...l,
+      labelLen: lt(l.name, e.value.style.chart.yAxis.labels.fontSize),
+      uid: ne(),
+      datapoints: l.datapoints.map((t, o) => {
+        const a = t.color ? _t(t.color) : Ze.value[o] || q[o] || q[o % q.length], u = Be(t.name);
+        return {
+          ...t,
+          color: a,
+          id: u
+        };
+      })
+    })) : []), _e = g(() => e.value.style.chart.padding.top + w.value * x.dataset.length + w.value * ae.value), k = g(() => ({
+      fullHeight: y.value.padding.top + y.value.padding.bottom + y.value.height,
+      top: y.value.padding.top,
+      left: y.value.padding.left,
+      right: y.value.width - y.value.padding.right,
+      bottom: y.value.padding.top + y.value.height,
+      width: y.value.width - (y.value.padding.left + y.value.padding.right)
+    })), y = g(() => {
+      const l = e.value.style.chart.padding;
+      return {
+        width: ge.value,
+        height: _e.value,
+        padding: l
+      };
+    }), D = g(() => {
+      const l = Math.max(..._.value.map((u) => u.labelLen)), s = Math.max(..._.value.flatMap((u) => u.datapoints.map((A) => A.values.length))), t = y.value.padding.left + l + 16 + e.value.style.chart.yAxis.labels.offsetX, o = (k.value.width - t) / s, a = [];
+      for (let u = 0; u < s; u += 1)
+        a.push({
+          selectorX: t + o * u,
+          x: t + o * u - o / 2,
+          y: k.value.top,
+          label: e.value.style.chart.xAxis.labels.values[u] || "",
+          index: u,
+          width: o,
+          height: _e.value
+        });
+      return a;
+    });
+    function et(l) {
+      Q("selectX", _.value.map((s) => s.datapoints.map((t) => ({
+        dp: t,
+        selected: t.values[l.index]
+      }))));
+    }
+    function tt(l, s) {
+      return l.length * s / 2 + s;
+    }
+    function Me(l, s, t) {
+      const o = tt(s, t);
+      return l + o > k.value.right;
+    }
+    function lt(l, s, t = "sans-serif") {
+      const a = document.createElement("canvas").getContext("2d"), u = typeof s == "number" ? `${s}px` : s;
+      return a.font = `${u} ${t}`, a.measureText(l).width;
+    }
+    const I = g(() => {
+      w.value;
+      const l = Math.max(..._.value.map((b) => b.labelLen)), s = Math.max(..._.value.flatMap((b) => b.datapoints.map((S) => S.values.length))), t = Math.max(..._.value.flatMap((b) => b.datapoints.flatMap((S) => S.values))), o = Math.min(..._.value.flatMap((b) => b.datapoints.flatMap((S) => S.values))), a = y.value.padding.left + l + 16 + e.value.style.chart.yAxis.labels.offsetX, u = (k.value.width - a) / s, A = Math.abs(Math.min(o, 0)), Le = t + A;
+      function Ne(b) {
+        return isNaN(b / Le) ? 0 : b / Le;
+      }
+      return _.value.map((b, S) => {
+        const De = k.value.top + w.value * S, z = k.value.top + De + w.value * ae.value * (1 - Ne(A));
+        return {
+          ...b,
+          label: {
+            x: a - e.value.style.chart.yAxis.labels.fontSize,
+            y: z
+          },
+          datapoints: b.datapoints.map((E) => {
+            const L = E.values.map((H, yt) => {
+              const ft = isNaN(H) || [void 0, null, "NaN", NaN, 1 / 0, -1 / 0].includes(H) ? 0 : H || 0, gt = a + u * yt, pt = k.value.top + De + w.value * ae.value * (1 - Ne(ft + A)), mt = H === Math.max(...E.values);
+              return {
+                x: gt,
+                y: pt,
+                value: H,
+                isMaxPoint: mt,
+                zero: z
+              };
+            }), ct = `${Mt(L, z, !1, !1)}`, ht = `M ${a},${z} ${Ue(L)} ${L.at(-1).x},${z}`, vt = `M ${a},${z} ${L.at(-1).x},${z}`, Ie = `M ${Tt(L)}`, Fe = `M ${Ue(L)}`, dt = Pt(
+              e.value.style.chart.areas.smooth ? Ie : Fe
+            );
+            return {
+              ...E,
+              uid: ne(),
+              plots: L,
+              smoothPath: ct,
+              straightPath: ht,
+              zeroPath: vt,
+              pathLength: dt,
+              smoothPathRidge: Ie,
+              straightPathRidge: Fe
+            };
+          }).filter((E) => !P.value.includes(E.id))
+        };
+      });
+    }), P = i([]);
+    function at(l) {
+      const s = /* @__PURE__ */ new Map();
+      return l.forEach((t) => {
+        t.datapoints.forEach((o, a) => {
+          const u = Be(o.name);
+          s.has(u) || s.set(u, {
+            id: u,
+            name: o.name,
+            color: o.color,
+            shape: "circle",
+            segregate: () => we(u),
+            isSegregated: P.value.includes(u),
+            opacity: P.value.includes(u) ? 0.5 : 1
+          });
+        });
+      }), Array.from(s.values());
+    }
+    const oe = g(() => at(_.value)), ot = g(() => ({
+      cy: "donut-div-legend",
+      backgroundColor: e.value.style.chart.legend.backgroundColor,
+      color: e.value.style.chart.legend.color,
+      fontSize: e.value.style.chart.legend.fontSize,
+      paddingBottom: 12,
+      fontWeight: e.value.style.chart.legend.bold ? "bold" : ""
+    })), R = i(!1);
+    function st(l) {
+      R.value = l, fe.value += 1;
+    }
+    const Te = i({}), Pe = i([]);
+    function rt(l) {
+      Q("selectDatapoint", l), e.value.style.chart.dialog.show && (Pe.value = l.datapoints.map((s) => ({
+        name: s.name,
+        color: s.color,
+        type: "line",
+        useArea: !0,
+        smooth: e.value.style.chart.areas.smooth,
+        series: s.values
+      })), N.value = l, Te.value = It({
+        ...e.value.style.chart.dialog.xyChart,
+        responsive: !0,
+        // Overriding 
+        chart: {
+          ...e.value.style.chart.dialog.xyChart.chart,
+          grid: {
+            ...e.value.style.chart.dialog.xyChart.chart.grid,
+            labels: {
+              ...e.value.style.chart.dialog.xyChart.chart.grid.labels,
+              xAxisLabels: {
+                ...e.value.style.chart.dialog.xyChart.chart.grid.labels.xAxisLabels,
+                values: e.value.style.chart.xAxis.labels.values
+                // Overriding
+              }
+            }
+          },
+          tooltip: {
+            ...e.value.style.chart.dialog.xyChart.chart.tooltip,
+            showTimeLabel: e.value.style.chart.xAxis.labels.values.length > 0
+            // Overriding
+          }
+        }
+      }), Z.value && Z.value.open());
+    }
+    const se = i(null);
+    function nt(l) {
+      se.value = l;
+    }
+    function ut() {
+      se.value = null;
+    }
+    const U = i(!1);
+    function re() {
+      U.value = !U.value;
+    }
+    function Oe() {
+      X.value.showTable = !X.value.showTable;
+    }
+    const Se = g(() => ({ body: I.value.flatMap((t) => t.datapoints.flatMap((o) => ({
+      ...o,
+      rowName: `${t.name}: ${o.name}`
+    }))).map((t) => [
+      {
+        name: t.rowName,
+        color: t.color
+      },
+      ...t.values
+    ]) })), G = g(() => {
+      const l = [
+        e.value.table.columnNames.series,
+        ...e.value.style.chart.xAxis.labels.values
+      ], s = {
+        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.style.chart.xAxis.labels.values
+        ],
+        head: l,
+        body: Se.value.body,
+        config: s
+      };
+    });
+    function ze() {
+      At(() => {
+        const l = [
+          [e.value.table.columnNames.series, ...e.value.style.chart.xAxis.labels.values.map((o) => [o])],
+          ...Se.value.body.map((o, a) => [o[0].name, ...o.slice(1)])
+        ], s = [
+          [e.value.style.chart.title.text],
+          [e.value.style.chart.title.subtitle.text]
+        ].concat(l), t = Nt(s);
+        Dt({
+          csvContent: t,
+          title: e.value.style.chart.title.text || "vue-ui-ridgeline"
+        });
+      });
+    }
+    function it() {
+      return I.value;
+    }
+    return je({
+      getData: it,
+      generateImage: Ce,
+      generatePdf: $e,
+      generateCsv: ze,
+      toggleAnnotator: re,
+      toggleTable: Oe
+    }), (l, s) => (r(), n("div", {
+      ref_key: "ridgelineChart",
+      ref: V,
+      class: W(`vue-ui-ridgeline ${R.value ? "vue-data-ui-wrapper-fullscreen" : ""}`),
+      id: `vue-ui-ridgeline_${C.value}`,
+      style: M({
+        fontFamily: e.value.style.fontFamily,
+        width: "100%",
+        textAlign: "center",
+        background: e.value.style.chart.backgroundColor,
+        height: e.value.responsive ? "100%" : void 0
+      }),
+      onMouseenter: s[4] || (s[4] = () => c(be)(!0)),
+      onMouseleave: s[5] || (s[5] = () => c(be)(!1))
+    }, [
+      e.value.userOptions.buttons.annotator && c(te) ? (r(), T(jt, {
+        key: 0,
+        color: e.value.style.chart.color,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        active: U.value,
+        svgRef: c(te),
+        onClose: re
+      }, null, 8, ["color", "backgroundColor", "active", "svgRef"])) : h("", !0),
+      p(l.$slots, "userConfig", {}, void 0, !0),
+      Qe.value ? (r(), n("div", {
+        key: 1,
+        ref_key: "noTitle",
+        ref: ve,
+        class: "vue-data-ui-no-title-space",
+        style: "height:36px; width: 100%;background:transparent"
+      }, null, 512)) : h("", !0),
+      e.value.style.chart.title.text ? (r(), n("div", {
+        key: 2,
+        ref_key: "chartTitle",
+        ref: ie,
+        style: "width:100%;background:transparent;padding-bottom:24px"
+      }, [
+        (r(), T(Jt, {
+          key: `title_${de.value}`,
+          config: {
+            title: {
+              cy: "ridgeline-div-title",
+              ...e.value.style.chart.title
+            },
+            subtitle: {
+              cy: "ridgeline-div-subtitle",
+              ...e.value.style.chart.title.subtitle
+            }
+          }
+        }, null, 8, ["config"]))
+      ], 512)) : h("", !0),
+      e.value.userOptions.show && O.value && (c(xe) || c(ee)) ? (r(), T(Et, {
+        ref: "details",
+        key: `user_option_${fe.value}`,
+        backgroundColor: e.value.style.chart.backgroundColor,
+        color: e.value.style.chart.color,
+        isPrinting: c(ke),
+        isImaging: c(Ae),
+        uid: C.value,
+        hasTooltip: !1,
+        hasPdf: e.value.userOptions.buttons.pdf,
+        hasImg: e.value.userOptions.buttons.img,
+        hasXls: e.value.userOptions.buttons.csv,
+        hasTable: e.value.userOptions.buttons.table,
+        hasLabel: !1,
+        hasFullscreen: e.value.userOptions.buttons.fullscreen,
+        isFullscreen: R.value,
+        chartElement: V.value,
+        position: e.value.userOptions.position,
+        isTooltip: !1,
+        titles: { ...e.value.userOptions.buttonTitles },
+        hasAnnotator: e.value.userOptions.buttons.annotator,
+        isAnnotation: U.value,
+        style: M({
+          visibility: c(xe) ? c(ee) ? "visible" : "hidden" : "visible"
+        }),
+        onToggleFullscreen: st,
+        onGeneratePdf: c($e),
+        onGenerateCsv: ze,
+        onGenerateImage: c(Ce),
+        onToggleTable: Oe,
+        onToggleAnnotator: re
+      }, Re({ _: 2 }, [
+        l.$slots.menuIcon ? {
+          name: "menuIcon",
+          fn: m(({ isOpen: t, color: o }) => [
+            p(l.$slots, "menuIcon", j(Y({ isOpen: t, color: o })), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        l.$slots.optionTooltip ? {
+          name: "optionTooltip",
+          fn: m(() => [
+            p(l.$slots, "optionTooltip", {}, void 0, !0)
+          ]),
+          key: "1"
+        } : void 0,
+        l.$slots.optionPdf ? {
+          name: "optionPdf",
+          fn: m(() => [
+            p(l.$slots, "optionPdf", {}, void 0, !0)
+          ]),
+          key: "2"
+        } : void 0,
+        l.$slots.optionCsv ? {
+          name: "optionCsv",
+          fn: m(() => [
+            p(l.$slots, "optionCsv", {}, void 0, !0)
+          ]),
+          key: "3"
+        } : void 0,
+        l.$slots.optionImg ? {
+          name: "optionImg",
+          fn: m(() => [
+            p(l.$slots, "optionImg", {}, void 0, !0)
+          ]),
+          key: "4"
+        } : void 0,
+        l.$slots.optionTable ? {
+          name: "optionTable",
+          fn: m(() => [
+            p(l.$slots, "optionTable", {}, void 0, !0)
+          ]),
+          key: "5"
+        } : void 0,
+        l.$slots.optionFullscreen ? {
+          name: "optionFullscreen",
+          fn: m(({ toggleFullscreen: t, isFullscreen: o }) => [
+            p(l.$slots, "optionFullscreen", j(Y({ toggleFullscreen: t, isFullscreen: o })), void 0, !0)
+          ]),
+          key: "6"
+        } : void 0,
+        l.$slots.optionAnnotator ? {
+          name: "optionAnnotator",
+          fn: m(({ toggleAnnotator: t, isAnnotator: o }) => [
+            p(l.$slots, "optionAnnotator", j(Y({ toggleAnnotator: t, isAnnotator: o })), void 0, !0)
+          ]),
+          key: "7"
+        } : void 0
+      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasImg", "hasXls", "hasTable", "hasFullscreen", "isFullscreen", "chartElement", "position", "titles", "hasAnnotator", "isAnnotation", "style", "onGeneratePdf", "onGenerateImage"])) : h("", !0),
+      O.value ? (r(), n("svg", {
+        key: 4,
+        ref_key: "svgRef",
+        ref: te,
+        xmlns: c(Ot),
+        class: W({ "vue-data-ui-fullscreen--on": R.value, "vue-data-ui-fulscreen--off": !R.value }),
+        viewBox: `0 0 ${y.value.width <= 0 ? 10 : y.value.width} ${k.value.fullHeight <= 0 ? 10 : k.value.fullHeight}`,
+        style: M(`max-width:100%;overflow:visible;background:transparent;color:${e.value.style.chart.color};${e.value.responsive ? `height: ${pe.value}px; width: 100%;` : ""}`)
+      }, [
+        d("defs", null, [
+          (r(!0), n(f, null, $(oe.value, (t, o) => (r(), n("linearGradient", {
+            id: `gradient-${t.id}-${C.value}`,
+            x1: "50%",
+            y1: "0%",
+            x2: "50%",
+            y2: "100%"
+          }, [
+            d("stop", {
+              offset: "0%",
+              "stop-color": t.color,
+              "stop-opacity": "1"
+            }, null, 8, ll),
+            d("stop", {
+              offset: "30%",
+              "stop-color": t.color,
+              "stop-opacity": "0.7"
+            }, null, 8, al),
+            d("stop", {
+              offset: "70%",
+              "stop-color": t.color,
+              "stop-opacity": "0.3"
+            }, null, 8, ol),
+            d("stop", {
+              offset: "100%",
+              "stop-color": t.color,
+              "stop-opacity": "0.1"
+            }, null, 8, sl)
+          ], 8, tl))), 256)),
+          (r(!0), n(f, null, $(I.value, (t, o) => (r(), n(f, null, [
+            (r(!0), n(f, null, $(t.datapoints, (a, u) => (r(), n("linearGradient", {
+              key: `grad${a.id}`,
+              id: `gradient-single-${C.value}-${a.uid}`,
+              x1: "50%",
+              y1: "0%",
+              x2: "50%",
+              y2: "100%"
+            }, [
+              d("stop", {
+                offset: "0%",
+                "stop-color": a.color,
+                "stop-opacity": "1"
+              }, null, 8, nl),
+              d("stop", {
+                offset: "30%",
+                "stop-color": a.color,
+                "stop-opacity": "0.7"
+              }, null, 8, ul),
+              d("stop", {
+                offset: "70%",
+                "stop-color": a.color,
+                "stop-opacity": "0.3"
+              }, null, 8, il),
+              d("stop", {
+                offset: "100%",
+                "stop-color": a.color,
+                "stop-opacity": "0.1"
+              }, null, 8, cl)
+            ], 8, rl))), 128))
+          ], 64))), 256))
+        ]),
+        (r(!0), n(f, null, $(I.value, (t, o) => (r(), n("g", {
+          key: `ds-${o}`
+        }, [
+          (r(!0), n(f, null, $(t.datapoints, (a, u) => (r(), n("g", {
+            key: a.id
+          }, [
+            l.$slots.pattern ? (r(), n("g", hl, [
+              d("defs", null, [
+                p(l.$slots, "pattern", Ee({ ref_for: !0 }, { datapointIndex: o, seriesIndex: u, patternId: `pattern_${C.value}_${a.uid}` }), void 0, !0)
+              ])
+            ])) : h("", !0),
+            d("path", {
+              fill: l.$slots.pattern ? `url(#pattern_${C.value}_${a.uid})` : e.value.style.chart.backgroundColor,
+              stroke: "none",
+              "stroke-linecap": "round",
+              d: e.value.style.chart.areas.smooth ? a.smoothPath : a.straightPath,
+              style: M({
+                opacity: e.value.style.chart.areas.opacity
+              })
+            }, null, 12, vl),
+            d("path", {
+              fill: "none",
+              stroke: e.value.style.chart.areas.stroke.useSerieColor ? a.color : e.value.style.chart.areas.stroke.color,
+              "stroke-width": e.value.style.chart.areas.strokeWidth,
+              d: e.value.style.chart.areas.smooth ? a.smoothPathRidge : a.straightPathRidge,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              class: W({ "vue-ui-ridgeline-animate": e.value.useCssAnimation }),
+              style: M({
+                strokeDasharray: a.pathLength,
+                strokeDashoffset: e.value.useCssAnimation ? a.pathLength : 0
+              })
+            }, null, 14, dl),
+            d("path", {
+              fill: e.value.style.chart.areas.useGradient ? e.value.style.chart.areas.useCommonColor ? `url(#gradient-${a.id}-${C.value})` : `url(#gradient-single-${C.value}-${a.uid})` : a.color,
+              stroke: "none",
+              d: e.value.style.chart.areas.smooth ? a.smoothPath : a.straightPath,
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round",
+              class: W({ "vue-ui-ridgeline-animate": e.value.useCssAnimation }),
+              style: M({
+                strokeDasharray: a.pathLength,
+                strokeDashoffset: e.value.useCssAnimation ? a.pathLength : 0
+              })
+            }, null, 14, yl),
+            e.value.style.chart.zeroLine.show ? (r(), n("path", {
+              key: 1,
+              stroke: e.value.style.chart.zeroLine.useSerieColor ? a.color : e.value.style.chart.zeroLine.stroke,
+              "stroke-dasharray": e.value.style.chart.zeroLine.strokeDasharray,
+              "stroke-width": e.value.style.chart.zeroLine.strokeWidth,
+              d: a.zeroPath,
+              "stroke-linecap": "round"
+            }, null, 8, fl)) : h("", !0),
+            e.value.style.chart.areas.maxPoint.show && a.plots.length > 1 ? (r(!0), n(f, { key: 2 }, $(a.plots, (A) => (r(), n(f, null, [
+              A.isMaxPoint ? (r(), n("line", {
+                key: 0,
+                x1: A.x,
+                y1: A.y,
+                x2: A.x,
+                y2: A.zero,
+                stroke: e.value.style.chart.areas.maxPoint.adaptStrokeToBackground ? c(St)(a.color) : e.value.style.chart.areas.maxPoint.stroke,
+                "stroke-width": e.value.style.chart.areas.maxPoint.strokeWidth,
+                "stroke-linecap": "round",
+                "stroke-dasharray": e.value.style.chart.areas.maxPoint.strokeDasharray
+              }, null, 8, gl)) : h("", !0)
+            ], 64))), 256)) : h("", !0),
+            a.plots.length === 1 ? (r(), n("circle", {
+              key: 3,
+              cx: a.plots[0].x,
+              cy: a.plots[0].y,
+              stroke: e.value.style.chart.selector.dot.stroke,
+              "stroke-width": e.value.style.chart.selector.dot.strokeWidth,
+              r: e.value.style.chart.selector.dot.radius,
+              fill: e.value.style.chart.selector.dot.useDatapointColor ? a.color : e.value.style.chart.selector.dot.fill,
+              style: {
+                pointerEvents: "none"
+              }
+            }, null, 8, pl)) : h("", !0)
+          ]))), 128)),
+          d("text", {
+            x: t.label.x,
+            y: t.label.y,
+            "text-anchor": "end",
+            "font-size": e.value.style.chart.yAxis.labels.fontSize,
+            "font-weight": e.value.style.chart.yAxis.labels.bold ? "bold" : "normal",
+            fill: e.value.style.chart.yAxis.labels.color,
+            style: M({
+              cursor: e.value.style.chart.dialog.show ? "pointer" : "default"
+            }),
+            "text-decoration": e.value.style.chart.dialog.show && (se.value === o || N.value && t.uid === N.value.uid) ? "underline" : "",
+            onMouseenter: (a) => nt(o),
+            onMouseleave: ut,
+            onClick: (a) => rt(t)
+          }, F(t.name), 45, ml)
+        ]))), 128)),
+        e.value.style.chart.xAxis.labels.values.length ? (r(), n("g", bl, [
+          (r(!0), n(f, null, $(D.value, (t, o) => p(l.$slots, "time-label", Ee({ ref_for: !0 }, {
+            show: t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && !e.value.style.chart.xAxis.labels.showOnlyAtModulo || t && e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && (o === 0 || o === D.value.length - 1) || t && v.value && v.value.index === o || t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && e.value.style.chart.xAxis.labels.showOnlyAtModulo && o % Math.floor(D.value.length / e.value.style.chart.xAxis.labels.modulo) === 0,
+            fontSize: e.value.style.chart.xAxis.labels.fontSize,
+            content: t.label,
+            textAnchor: e.value.style.chart.xAxis.labels.rotation > 0 ? "start" : e.value.style.chart.xAxis.labels.rotation < 0 ? "end" : "middle",
+            fill: e.value.style.chart.xAxis.labels.color,
+            transform: `translate(${t.selectorX}, ${k.value.top + t.height + e.value.style.chart.xAxis.labels.offsetY}), rotate(${e.value.style.chart.xAxis.labels.rotation})`,
+            x: t.selectorX,
+            y: k.value.top + t.height + e.value.style.chart.xAxis.labels.offsetY
+          }), () => [
+            t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && !e.value.style.chart.xAxis.labels.showOnlyAtModulo || t && e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && (o === 0 || o === D.value.length - 1) || t && v.value && v.value.index === o || t && !e.value.style.chart.xAxis.labels.showOnlyFirstAndLast && e.value.style.chart.xAxis.labels.showOnlyAtModulo && o % Math.floor(D.value.length / e.value.style.chart.xAxis.labels.modulo) === 0 ? (r(), n("text", {
+              key: 0,
+              "font-size": e.value.style.chart.xAxis.labels.fontSize,
+              fill: e.value.style.chart.xAxis.labels.color,
+              "font-weight": e.value.style.chart.xAxis.labels.bold ? "bold" : "normal",
+              transform: `translate(${t.selectorX}, ${k.value.top + t.height + e.value.style.chart.xAxis.labels.offsetY}), rotate(${e.value.style.chart.xAxis.labels.rotation})`,
+              "text-anchor": e.value.style.chart.xAxis.labels.rotation > 0 ? "start" : e.value.style.chart.xAxis.labels.rotation < 0 ? "end" : "middle",
+              style: M({
+                opacity: v.value ? v.value.index === o ? 1 : 0.2 : 1
+              })
+            }, F(t.label), 13, xl)) : h("", !0)
+          ], !0)), 256))
+        ])) : h("", !0),
+        d("g", null, [
+          (r(!0), n(f, null, $(D.value, (t, o) => (r(), n("rect", {
+            x: t.x,
+            y: t.y,
+            width: t.width < 0 ? 0.1 : t.width,
+            height: t.height < 0 ? 0.1 : t.height,
+            fill: "transparent",
+            onMouseenter: (a) => v.value = t,
+            onMouseleave: s[0] || (s[0] = (a) => v.value = null),
+            onClick: () => et(t)
+          }, null, 40, kl))), 256)),
+          e.value.style.chart.selector.show && v.value ? (r(), n("line", {
+            key: 0,
+            x1: v.value.selectorX,
+            x2: v.value.selectorX,
+            y1: v.value.y,
+            y2: v.value.y + v.value.height - w.value / 2,
+            stroke: e.value.style.chart.selector.stroke,
+            "stroke-width": e.value.style.chart.selector.strokeWidth,
+            "stroke-dasharray": e.value.style.chart.selector.strokeDasharray,
+            "stroke-linecap": "round",
+            style: { pointerEvents: "none" }
+          }, null, 8, Al)) : h("", !0),
+          v.value ? (r(!0), n(f, { key: 1 }, $(I.value, (t) => (r(), n(f, null, [
+            (r(!0), n(f, null, $(t.datapoints, (o) => (r(), n(f, null, [
+              (r(!0), n(f, null, $(o.plots, (a, u) => (r(), n(f, null, [
+                v.value && v.value.index === u ? (r(), n("circle", {
+                  key: 0,
+                  cx: a.x,
+                  cy: a.y,
+                  stroke: e.value.style.chart.selector.dot.stroke,
+                  "stroke-width": e.value.style.chart.selector.dot.strokeWidth,
+                  r: e.value.style.chart.selector.dot.radius,
+                  fill: e.value.style.chart.selector.dot.useDatapointColor ? o.color : e.value.style.chart.selector.dot.fill,
+                  style: {
+                    pointerEvents: "none"
+                  }
+                }, null, 8, $l)) : h("", !0),
+                v.value && v.value.index === u ? (r(), n("text", {
+                  key: 1,
+                  x: Me(
+                    a.x,
+                    c(J)(
+                      e.value.style.chart.selector.labels.formatter,
+                      a.value,
+                      c(K)({
+                        p: e.value.style.chart.xAxis.labels.prefix,
+                        v: a.value,
+                        s: e.value.style.chart.xAxis.labels.suffix,
+                        r: e.value.style.chart.selector.labels.rounding
+                      })
+                    ),
+                    e.value.style.chart.selector.labels.fontSize
+                  ) ? a.x - e.value.style.chart.selector.labels.fontSize / 2 : a.x + e.value.style.chart.selector.labels.fontSize / 2,
+                  y: a.y + e.value.style.chart.selector.labels.fontSize / 3,
+                  "text-anchor": Me(
+                    a.x,
+                    c(J)(
+                      e.value.style.chart.selector.labels.formatter,
+                      a.value,
+                      c(K)({
+                        p: e.value.style.chart.xAxis.labels.prefix,
+                        v: a.value,
+                        s: e.value.style.chart.xAxis.labels.suffix,
+                        r: e.value.style.chart.selector.labels.rounding
+                      })
+                    ),
+                    e.value.style.chart.selector.labels.fontSize
+                  ) ? "end" : "start",
+                  "font-size": e.value.style.chart.selector.labels.fontSize,
+                  fill: e.value.style.chart.selector.labels.color,
+                  style: {
+                    pointerEvents: "none"
+                  }
+                }, F(c(J)(
+                  e.value.style.chart.selector.labels.formatter,
+                  a.value,
+                  c(K)({
+                    p: e.value.style.chart.xAxis.labels.prefix,
+                    v: a.value,
+                    s: e.value.style.chart.xAxis.labels.suffix,
+                    r: e.value.style.chart.selector.labels.rounding
+                  })
+                )), 9, Cl)) : h("", !0)
+              ], 64))), 256))
+            ], 64))), 256))
+          ], 64))), 256)) : h("", !0)
+        ]),
+        p(l.$slots, "svg", { svg: y.value }, void 0, !0)
+      ], 14, el)) : h("", !0),
+      l.$slots.watermark ? (r(), n("div", wl, [
+        p(l.$slots, "watermark", j(Y({ isPrinting: c(ke) || c(Ae) })), void 0, !0)
+      ])) : h("", !0),
+      O.value ? h("", !0) : (r(), T(qt, {
+        key: 6,
+        config: {
+          type: "ridgeline",
+          style: {
+            backgroundColor: e.value.style.chart.backgroundColor,
+            ridgeline: {
+              color: "#CCCCCC"
+            }
+          }
+        }
+      }, null, 8, ["config"])),
+      d("div", {
+        ref_key: "chartLegend",
+        ref: ce
+      }, [
+        e.value.style.chart.legend.show ? (r(), T(Wt, {
+          key: `legend_${ye.value}`,
+          legendSet: oe.value,
+          config: ot.value,
+          onClickMarker: s[1] || (s[1] = ({ legend: t }) => we(t.id))
+        }, Re({
+          item: m(({ legend: t }) => [
+            d("div", {
+              style: M(`opacity:${P.value.includes(t.id) ? 0.5 : 1}`),
+              onClick: (o) => t.segregate()
+            }, F(t.name), 13, _l)
+          ]),
+          _: 2
+        }, [
+          l.$slots.pattern ? {
+            name: "legend-pattern",
+            fn: m(({ legend: t, index: o }) => [
+              kt(Yt, {
+                shape: t.shape,
+                radius: 30,
+                stroke: "none",
+                plot: { x: 30, y: 30 },
+                fill: `url(#pattern_${C.value}_${o})`
+              }, null, 8, ["shape", "fill"])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["legendSet", "config"])) : h("", !0),
+        p(l.$slots, "legend", { legend: oe.value }, void 0, !0)
+      ], 512),
+      l.$slots.source ? (r(), n("div", {
+        key: 7,
+        ref_key: "source",
+        ref: he,
+        dir: "auto"
+      }, [
+        p(l.$slots, "source", {}, void 0, !0)
+      ], 512)) : h("", !0),
+      O.value ? (r(), T(Bt, {
+        key: 8,
+        hideDetails: "",
+        config: {
+          open: X.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: m(() => [
+          (r(), T(Gt, {
+            key: `table_${Je.value}`,
+            colNames: G.value.colNames,
+            head: G.value.head,
+            body: G.value.body,
+            config: G.value.config,
+            title: `${e.value.style.chart.title.text}${e.value.style.chart.title.subtitle.text ? ` :${e.value.style.chart.title.subtitle.text}` : ""}`,
+            onClose: s[2] || (s[2] = (t) => X.value.showTable = !1)
+          }, {
+            th: m(({ th: t }) => [
+              d("div", { innerHTML: t }, null, 8, Ml)
+            ]),
+            td: m(({ td: t }) => [
+              He(F(t.name ? t.name : c(J)(
+                e.value.style.chart.selector.labels.formatter,
+                t,
+                c(K)({
+                  p: e.value.style.chart.xAxis.labels.prefix,
+                  v: t,
+                  s: e.value.style.chart.xAxis.labels.suffix,
+                  r: e.value.table.td.roundingValue
+                })
+              )), 1)
+            ]),
+            _: 1
+          }, 8, ["colNames", "head", "body", "config", "title"]))
+        ]),
+        _: 1
+      }, 8, ["config"])) : h("", !0),
+      e.value.style.chart.dialog.show ? (r(), T(Ut, {
+        key: 9,
+        ref_key: "dialog",
+        ref: Z,
+        onClose: s[3] || (s[3] = (t) => N.value = null),
+        backgroundColor: e.value.style.chart.dialog.backgroundColor,
+        color: e.value.style.chart.dialog.color,
+        headerBg: e.value.style.chart.dialog.header.backgroundColor,
+        headerColor: e.value.style.chart.dialog.header.color
+      }, {
+        title: m(() => [
+          He(F(N.value.name), 1)
+        ]),
+        default: m(() => [
+          N.value ? (r(), T(Kt, {
+            key: 0,
+            config: Te.value,
+            dataset: Pe.value
+          }, null, 8, ["config", "dataset"])) : h("", !0)
+        ]),
+        _: 1
+      }, 8, ["backgroundColor", "color", "headerBg", "headerColor"])) : h("", !0)
+    ], 46, Zt));
+  }
+}, Wl = /* @__PURE__ */ Qt(Tl, [["__scopeId", "data-v-9c3affc2"]]);
+export {
+  Wl as default
+};