vue-data-ui-hq/dist/vue-ui-vertical-bar-Cs0ksRP-.js

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

import { useCssVars as le, computed as b, ref as u, watch as At, onMounted as oe, onBeforeUnmount as ne, openBlock as r, createElementBlock as d, normalizeClass as U, unref as t, normalizeStyle as c, createBlock as M, createCommentVNode as g, createSlots as se, withCtx as k, renderSlot as _, normalizeProps as H, guardReactiveProps as G, createElementVNode as s, toDisplayString as h, createVNode as ut, Fragment as j, renderList as W, withKeys as re, createTextVNode as ie } from "vue";
import { u as ue, c as de, t as ce, a as he, p as z, b as pe, o as Bt, e as Z, v as S, d as dt, i as tt, f as I, X as ve, s as ct, w as ge, x as ye, y as fe, q as be, r as me } from "./index-WrV3SAID.js";
import { t as _e, u as ke } from "./useResponsive-CoxXLe23.js";
import { _ as $e } from "./Title-BR-xoRp4.js";
import { u as xe, U as we } from "./usePrinter-kVpf1iV8.js";
import { _ as Ce } from "./Tooltip-ho4JxRm-.js";
import { L as Dt } from "./Legend-7H4oi6Sq.js";
import Te from "./vue-ui-skeleton-Qec_XSRf.js";
import Le from "./BaseIcon-MqKW8Nkx.js";
import Ne from "./vue-ui-accordion-BQCDXXDs.js";
import { u as Rt } from "./useNestedProp-Cj0kHD7k.js";
import { _ as Pe } from "./PackageVersion-1NslmM8M.js";
import { P as Se } from "./PenAndPaper-BF1ZRVm3.js";
import { u as Ve } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as Oe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const Fe = ["id"], Me = ["onClick"], ze = ["xmlns", "viewBox"], Ie = ["width", "height"], Ae = ["id"], Be = ["stop-color"], De = ["stop-color"], Re = ["x", "y", "width", "height", "fill", "rx"], Ue = ["x", "y", "width", "height", "fill", "rx", "stroke", "stroke-width"], Xe = ["x2", "y1", "y2", "stroke", "stroke-width"], Ee = ["x1", "x2", "y1", "y2", "stroke", "stroke-width"], He = ["x", "y", "text-anchor", "font-size", "fill", "font-weight"], Ge = ["x", "y", "font-size", "fill", "font-weight"], je = ["x", "y", "font-size", "fill", "font-weight"], We = ["x", "y", "font-size", "fill", "font-weight"], Ye = ["y", "width", "height", "fill", "onMouseenter"], qe = {
  key: 6,
  class: "vue-data-ui-watermark"
}, Ke = ["onClick"], Je = { style: "width:100%;padding-top: 36px;position:relative" }, Qe = { class: "vue-ui-data-table" }, Ze = { key: 0 }, ta = { style: { width: "100%" } }, ea = ["data-cell"], aa = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, la = ["data-cell"], oa = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, na = ["data-cell"], sa = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ra = ["data-cell"], ia = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ua = ["data-cell"], da = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ca = ["data-cell"], ha = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, pa = ["data-cell"], va = { style: { display: "flex", "align-items": "center", gap: "5px", "justify-content": "flex-end", width: "100%", "padding-right": "3px" } }, ga = {
  __name: "vue-ui-vertical-bar",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  emits: ["selectLegend"],
  setup(Ut, { expose: Xt, emit: Et }) {
    le((a) => ({
      "0e4b04ce": a.tdo
    }));
    const { vue_ui_vertical_bar: Ht } = ue(), w = Ut, Y = b(() => !!w.dataset && w.dataset.length), V = u(de()), Gt = u(null), et = u(!1), at = u(""), q = u(0), jt = u(null), ht = u(0), A = u(null), pt = u(null), lt = u(null), vt = u(null), gt = u(null), yt = u(0), ot = u(0), Wt = Et, e = b({
      get: () => mt(),
      set: (a) => a
    }), { userOptionsVisible: nt, setUserOptionsVisibility: ft, keepUserOptionState: bt } = Ve({ config: e.value });
    function mt() {
      const a = Rt({
        userConfig: w.config,
        defaultConfig: Ht
      });
      return a.theme ? {
        ...Rt({
          userConfig: ce.vue_ui_vertical_bar[a.theme] || w.config,
          defaultConfig: a
        }),
        customPalette: he[a.theme] || z
      } : a;
    }
    At(() => w.config, (a) => {
      e.value = mt(), nt.value = !e.value.showOnChartHover, Lt(), yt.value += 1, ot.value += 1, p.value = e.value.style.chart.layout.bars.height, f.value = e.value.style.chart.layout.bars.gap;
    }, { deep: !0 }), At(() => w.dataset, J, { deep: !0 });
    const { isPrinting: _t, isImaging: kt, generatePdf: $t, generateImage: xt } = xe({
      elementId: `vue-ui-vertical-bar_${V.value}`,
      fileName: e.value.style.chart.title.text || "vue-ui-vertical-bar"
    }), Yt = b(() => e.value.userOptions.show && !e.value.style.chart.title.text), wt = b(() => pe(e.value.customPalette)), Ct = u(null), Tt = u(!1), qt = b(() => e.value.table.responsiveBreakpoint), K = u(null);
    oe(() => {
      Lt();
    });
    function Lt() {
      if (Bt(w.dataset) && Z({
        componentName: "VueUiVerticalBar",
        type: "dataset"
      }), q.value = w.dataset.flatMap((a) => a.children && a.children.length > 0 ? a.children.length : 1).reduce((a, o) => a + o, 0), Kt(), e.value.responsive) {
        const a = _e(() => {
          const { width: o, height: l } = ke({
            chart: A.value,
            title: e.value.style.chart.title.text ? pt.value : null,
            legend: e.value.style.chart.legend.show ? lt.value : null,
            source: vt.value,
            noTitle: gt.value
          });
          St.value = o, p.value = l / q.value - f.value * 2;
        });
        K.value = new ResizeObserver(a), K.value.observe(A.value.parentNode);
      }
    }
    ne(() => {
      K.value && K.value.disconnect();
    });
    function Kt() {
      new ResizeObserver((o) => {
        o.forEach((l) => {
          Tt.value = l.contentRect.width < qt.value;
        });
      }).observe(Ct.value);
    }
    const x = u({
      showTable: e.value.table.show,
      sortDesc: e.value.style.chart.layout.bars.sort === "desc",
      showTooltip: e.value.style.chart.tooltip.show
    }), Nt = b(() => x.value.sortDesc), O = b(() => (w.dataset.forEach((a, o) => {
      !a.value && !a.children && Z({
        componentName: "VueUiVerticalBar",
        type: "datasetAttributeEmpty",
        property: `value (index ${o})`
      }), a.children && (Bt(a.children) ? Z({
        componentName: "VueUiVerticalBar",
        type: "datasetAttributeEmpty",
        property: `children (index ${o})`
      }) : a.children.forEach((l, n) => {
        [null, void 0].includes(l.name) && Z({
          componentName: "VueUiVerticalBar",
          type: "datasetSerieAttribute",
          property: "name",
          key: "children",
          index: n
        });
      }));
    }), w.dataset.map((a, o) => {
      const l = `vertical_parent_${o}_${V.value}`, n = a.children && a.children.length > 0, m = S(a.value ? a.value : n ? a.children.map(($) => $.value || 0).reduce(($, N) => $ + N, 0) : 0), y = m >= 0 ? 1 : -1;
      return {
        ...a,
        id: l,
        shape: "square",
        opacity: T.value.includes(l) ? 0.5 : 1,
        value: Math.abs(m),
        sign: y,
        hasChildren: n,
        isChild: !1,
        segregate: () => X(l),
        isSegregated: T.value.includes(l),
        color: dt(a.color) || wt.value[o] || z[o] || z[o % z.length],
        children: !a.children || !a.children.length ? [] : a.children.toSorted(($, N) => Nt.value ? N.value - $.value : $.value - N.value).map(($, N) => ({
          ...$,
          value: S(Math.abs($.value)),
          sign: $.value >= 0 ? 1 : -1,
          isChild: !0,
          parentId: l,
          parentName: a.name,
          parentValue: m,
          parentSign: y,
          id: `vertical_child_${o}_${N}_${V.value}`,
          childIndex: N,
          color: dt($.color) || dt(a.color) || wt.value[o] || z[o] || z[o % z.length]
        })).map(($, N) => ({
          ...$,
          isFirstChild: N === 0,
          isLastChild: N === a.children.length - 1
        }))
      };
    }).toSorted((a, o) => Nt.value ? o.value - a.value : a.value - o.value))), Pt = b(() => ({
      cy: "vertical-bar-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" : ""
    })), p = u(e.value.style.chart.layout.bars.height), f = u(e.value.style.chart.layout.bars.gap), Jt = b(() => (p.value + f.value) * q.value), St = u(512), v = b(() => ({
      width: St.value,
      height: Jt.value,
      padding: {
        top: 12,
        left: 128 + e.value.style.chart.layout.bars.offsetX,
        right: 64 + e.value.style.chart.layout.bars.paddingRight,
        bottom: 12
      }
    })), i = b(() => ({
      fullHeight: v.value.padding.top + v.value.padding.bottom + v.value.height,
      top: v.value.padding.top,
      left: v.value.padding.left,
      right: v.value.width - v.value.padding.right,
      bottom: v.value.padding.top + v.value.height,
      width: v.value.width - (v.value.padding.left + v.value.padding.right)
    }));
    function J() {
      q.value = F.value.flatMap((a) => a.children && a.children.length > 0 ? a.children.length : 1).reduce((a, o) => a + o, 0);
    }
    const T = u([]);
    function X(a) {
      T.value.includes(a) ? T.value = T.value.filter((o) => o !== a) : T.value.push(a), J(), Wt("selectLegend", F.value);
    }
    const F = b(() => O.value.filter((a) => !T.value.includes(a.id))), L = b(() => F.value.map((a) => Math.abs(a.value)).reduce((a, o) => a + o, 0));
    function Vt(a, o = !1, l = 0) {
      return o ? I({
        v: S(Math.abs(a) / L.value * 100),
        s: "%",
        r: l
      }) : Math.abs(a) / L.value;
    }
    const B = b(() => F.value.flatMap((a) => a.hasChildren ? a.children : a)), D = b(() => B.value.map((a) => a.sign).includes(-1)), Qt = b(() => Math.max(...F.value.flatMap((a) => a.children && a.children.length ? Math.max(...a.children.map((o) => o.value)) : a.value)));
    function P(a) {
      const o = a / Qt.value;
      return i.value.width / (D.value ? 2 : 1) * o;
    }
    function Zt(a) {
      return P(a) + i.value.left;
    }
    function E(a, o) {
      const l = F.value.find((y) => y.id === a.parentId), n = i.value.top + (f.value + p.value) * o, m = l.children.length * (f.value + p.value);
      return {
        y: n + m / 2 - e.value.style.chart.layout.bars.parentLabels.fontSize,
        name: l.name,
        value: [void 0, NaN, null].includes(l.value) ? "" : l.sign === 1 ? l.value : -l.value,
        percentageToTotal: isNaN(l.value / L.value) ? "" : Vt(l.value, !0, e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage),
        sign: l.sign
      };
    }
    function te() {
      return F.value;
    }
    const st = u(null), rt = u(null);
    function ee(a, o) {
      rt.value = {
        datapoint: a,
        seriesIndex: o,
        series: O.value,
        config: e.value
      }, et.value = !0, st.value = a.id;
      let l = "";
      const n = a.isChild ? a.parentName : a.name, m = a.isChild ? a.name : "", y = e.value.style.chart.tooltip.customFormat;
      ye(y) && fe(() => y({
        datapoint: a,
        series: O.value,
        config: e.value,
        seriesIndex: o
      })) ? at.value = y({
        datapoint: a,
        series: O.value,
        config: e.value,
        seriesIndex: o
      }) : (l += `<div style="width:100%;text-align:center;border-bottom:1px solid ${e.value.style.chart.tooltip.borderColor};padding-bottom:6px;margin-bottom:3px;text-align:left;">
                <div style="display:flex;align-items:center;gap:4px;"><svg viewBox="0 0 12 12" height="14" width="14"><rect x="0" y="0" height="12" width="12" rx="2" stroke="none" fill="${a.color}"/></svg> ${n}</div>
                ${m ? `<div>${m}</div>` : ""}
            </div>`, e.value.style.chart.tooltip.showValue && (l += `<div>${e.value.translations.value}: <b>${tt(
        e.value.style.chart.layout.bars.dataLabels.value.formatter,
        a.sign === 1 ? a.value : -a.value,
        I({
          p: e.value.style.chart.tooltip.prefix,
          v: a.sign === 1 ? a.value : -a.value,
          s: e.value.style.chart.tooltip.suffix,
          r: e.value.style.chart.tooltip.roundingValue
        }),
        { datapoint: a, seriesIndex: o }
      )}</b></div>`), e.value.style.chart.tooltip.showPercentage && (l += `<div>${e.value.translations.percentageToTotal} : <b>${I({
        v: Math.abs(a.value) / L.value * 100,
        s: "%",
        r: e.value.style.chart.tooltip.roundingPercentage
      })}</b></div>`, a.isChild && (l += `<div>${e.value.translations.percentageToSerie}: <b>${I({
        v: Math.abs(a.value) / Math.abs(a.parentValue) * 100,
        s: "%",
        r: e.value.style.chart.tooltip.roundingPercentage
      })}</b></div>`)), at.value = `<div style="text-align:left">${l}</div>`);
    }
    function Ot(a, o, l, n) {
      if (!e.value.style.chart.layout.bars.dataLabels.value.show)
        return "";
      const m = tt(
        e.value.style.chart.layout.bars.dataLabels.value.formatter,
        S(n === -1 && a >= 0 ? -a : a),
        I({
          p: e.value.style.chart.layout.bars.dataLabels.value.prefix,
          v: S(n === -1 && a >= 0 ? -a : a),
          s: e.value.style.chart.layout.bars.dataLabels.value.suffix,
          r: e.value.style.chart.layout.bars.dataLabels.value.roundingValue
        }),
        { datapoint: o, seriesIndex: l }
      ), y = `(${Vt(a, !0, e.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage)})`;
      return `${m}${e.value.style.chart.layout.bars.dataLabels.percentage.show ? ` ${y}` : ""}`;
    }
    const C = b(() => {
      const a = [
        e.value.translations.parentName,
        e.value.translations.value,
        e.value.translations.percentageToTotal,
        e.value.translations.childName,
        e.value.translations.value,
        e.value.translations.percentageToSerie,
        e.value.translations.percentageToTotal
      ], o = B.value.map((l) => l.isChild ? l.isFirstChild ? {
        color: l.color,
        parentName: l.parentName,
        parentValue: l.parentValue,
        percentageToTotal: l.parentValue / L.value,
        childName: l.name,
        childValue: l.sign === 1 ? l.value : -l.value,
        childPercentageToParent: Math.abs(l.value) / Math.abs(l.parentValue),
        childPercentageToTotal: Math.abs(l.value) / L.value
      } : {
        color: "",
        parentName: "",
        parentValue: "",
        percentageToTotal: "",
        childName: l.name,
        childValue: l.sign === 1 ? l.value : -l.value,
        childPercentageToParent: Math.abs(l.value) / Math.abs(l.parentValue),
        childPercentageToTotal: Math.abs(l.value) / L.value
      } : {
        color: l.color,
        parentName: l.name,
        parentValue: l.sign === 1 ? l.value : -l.value,
        percentageToTotal: Math.abs(l.value) / L.value,
        childName: "",
        childValue: "",
        childPercentageToParent: "",
        childPercentageToTotal: ""
      });
      return { head: a, body: o };
    });
    function Ft() {
      const a = [[e.value.style.chart.title.text], [e.value.style.chart.title.subtitle.text], [""]], o = C.value.head, l = C.value.body.map((y) => [
        y.parentName,
        y.parentValue,
        y.percentageToTotal,
        y.childName,
        y.childValue,
        y.childPercentageToParent,
        y.childPercentageToTotal
      ]), n = a.concat([o]).concat(l), m = be(n);
      me({ csvContent: m, title: e.value.style.chart.title.text || "vue-ui-vertical-bar" });
    }
    const R = u(!1);
    function ae(a) {
      R.value = a, ht.value += 1;
    }
    function Mt() {
      x.value.showTable = !x.value.showTable;
    }
    function zt() {
      x.value.sortDesc = !x.value.sortDesc, J();
    }
    function It() {
      x.value.showTooltip = !x.value.showTooltip;
    }
    const Q = u(!1);
    function it() {
      Q.value = !Q.value;
    }
    return Xt({
      getData: te,
      recalculateHeight: J,
      generatePdf: $t,
      generateCsv: Ft,
      generateImage: xt,
      toggleTable: Mt,
      toggleSort: zt,
      toggleTooltip: It,
      toggleAnnotator: it
    }), (a, o) => (r(), d("div", {
      class: U(`vue-ui-vertical-bar ${t(R) ? "vue-data-ui-wrapper-fullscreen" : ""} ${t(e).useCssAnimation ? "" : "vue-ui-dna"}`),
      ref_key: "verticalBarChart",
      ref: A,
      id: `vue-ui-vertical-bar_${t(V)}`,
      style: c(`font-family:${t(e).style.fontFamily};width:100%; text-align:center;background:${t(e).style.chart.backgroundColor};${t(e).responsive ? "height: 100%" : ""}`),
      onMouseenter: o[5] || (o[5] = () => t(ft)(!0)),
      onMouseleave: o[6] || (o[6] = () => t(ft)(!1))
    }, [
      t(e).userOptions.buttons.annotator ? (r(), M(Se, {
        key: 0,
        parent: t(A),
        backgroundColor: t(e).style.chart.backgroundColor,
        color: t(e).style.chart.color,
        active: t(Q),
        onClose: it
      }, null, 8, ["parent", "backgroundColor", "color", "active"])) : g("", !0),
      t(Yt) ? (r(), d("div", {
        key: 1,
        ref_key: "noTitle",
        ref: gt,
        class: "vue-data-ui-no-title-space",
        style: "height:36px; width: 100%;background:transparent"
      }, null, 512)) : g("", !0),
      t(e).style.chart.title.text ? (r(), d("div", {
        key: 2,
        ref_key: "chartTitle",
        ref: pt,
        style: "width:100%;background:transparent;padding-bottom:12px"
      }, [
        (r(), M($e, {
          key: `title_${t(yt)}`,
          config: {
            title: {
              cy: "vertical-bar-div-title",
              ...t(e).style.chart.title
            },
            subtitle: {
              cy: "vertical-bar-div-subtitle",
              ...t(e).style.chart.title.subtitle
            }
          }
        }, null, 8, ["config"]))
      ], 512)) : g("", !0),
      t(e).userOptions.show && t(Y) && (t(bt) || t(nt)) ? (r(), M(we, {
        ref_key: "details",
        ref: Gt,
        key: `user_options_${t(ht)}`,
        backgroundColor: t(e).style.chart.backgroundColor,
        color: t(e).style.chart.color,
        isImaging: t(kt),
        isPrinting: t(_t),
        uid: t(V),
        hasTooltip: t(e).userOptions.buttons.tooltip && t(e).style.chart.tooltip.show,
        hasPdf: t(e).userOptions.buttons.pdf,
        hasImg: t(e).userOptions.buttons.img,
        hasXls: t(e).userOptions.buttons.csv,
        hasTable: t(e).userOptions.buttons.table,
        hasSort: t(e).userOptions.buttons.sort,
        hasFullscreen: t(e).userOptions.buttons.fullscreen,
        isFullscreen: t(R),
        isTooltip: t(x).showTooltip,
        titles: { ...t(e).userOptions.buttonTitles },
        chartElement: t(A),
        position: t(e).userOptions.position,
        hasAnnotator: t(e).userOptions.buttons.annotator,
        isAnnotation: t(Q),
        onToggleFullscreen: ae,
        onGeneratePdf: t($t),
        onGenerateCsv: Ft,
        onGenerateImage: t(xt),
        onToggleTable: Mt,
        onToggleSort: zt,
        onToggleTooltip: It,
        onToggleAnnotator: it,
        style: c({
          visibility: t(bt) ? t(nt) ? "visible" : "hidden" : "visible"
        })
      }, se({ _: 2 }, [
        a.$slots.optionTooltip ? {
          name: "optionTooltip",
          fn: k(() => [
            _(a.$slots, "optionTooltip", {}, void 0, !0)
          ]),
          key: "0"
        } : void 0,
        a.$slots.optionPdf ? {
          name: "optionPdf",
          fn: k(() => [
            _(a.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        a.$slots.optionCsv ? {
          name: "optionCsv",
          fn: k(() => [
            _(a.$slots, "optionCsv", {}, void 0, !0)
          ]),
          key: "2"
        } : void 0,
        a.$slots.optionImg ? {
          name: "optionImg",
          fn: k(() => [
            _(a.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "3"
        } : void 0,
        a.$slots.optionTable ? {
          name: "optionTable",
          fn: k(() => [
            _(a.$slots, "optionTable", {}, void 0, !0)
          ]),
          key: "4"
        } : void 0,
        a.$slots.optionLabels ? {
          name: "optionLabels",
          fn: k(() => [
            _(a.$slots, "optionLabels", {}, void 0, !0)
          ]),
          key: "5"
        } : void 0,
        a.$slots.optionSort ? {
          name: "optionSort",
          fn: k(() => [
            _(a.$slots, "optionSort", {}, void 0, !0)
          ]),
          key: "6"
        } : void 0,
        a.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: k(({ toggleFullscreen: l, isFullscreen: n }) => [
            _(a.$slots, "optionFullscreen", H(G({ toggleFullscreen: l, isFullscreen: n })), void 0, !0)
          ]),
          key: "7"
        } : void 0,
        a.$slots.optionAnnotator ? {
          name: "optionAnnotator",
          fn: k(({ toggleAnnotator: l, isAnnotator: n }) => [
            _(a.$slots, "optionAnnotator", H(G({ toggleAnnotator: l, isAnnotator: n })), void 0, !0)
          ]),
          key: "8"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isImaging", "isPrinting", "uid", "hasTooltip", "hasPdf", "hasImg", "hasXls", "hasTable", "hasSort", "hasFullscreen", "isFullscreen", "isTooltip", "titles", "chartElement", "position", "hasAnnotator", "isAnnotation", "onGeneratePdf", "onGenerateImage", "style"])) : g("", !0),
      t(e).style.chart.legend.show && t(e).style.chart.legend.position === "top" ? (r(), d("div", {
        key: 4,
        ref_key: "chartLegend",
        ref: lt
      }, [
        (r(), M(Dt, {
          key: `legend_top_${t(ot)}`,
          legendSet: t(O),
          config: t(Pt),
          onClickMarker: o[0] || (o[0] = ({ legend: l }) => X(l.id))
        }, {
          item: k(({ legend: l, index: n }) => [
            s("div", {
              "data-cy-legend-item": "",
              onClick: (m) => X(l.id),
              style: c(`opacity:${t(T).includes(l.id) ? 0.5 : 1}`)
            }, h(l.name) + ": " + h(t(tt)(
              t(e).style.chart.layout.bars.dataLabels.value.formatter,
              l.value,
              t(I)({
                p: t(e).style.chart.legend.prefix,
                v: l.value,
                s: t(e).style.chart.legend.suffix,
                r: t(e).style.chart.legend.roundingValue
              }),
              { datapoint: l, seriesIndex: n }
            )), 13, Me)
          ]),
          _: 1
        }, 8, ["legendSet", "config"]))
      ], 512)) : g("", !0),
      t(Y) ? (r(), d("svg", {
        key: 5,
        xmlns: t(ve),
        class: U({ "vue-data-ui-fullscreen--on": t(R), "vue-data-ui-fulscreen--off": !t(R) }),
        viewBox: `0 0 ${t(v).width <= 0 ? 10 : t(v).width} ${t(i).fullHeight <= 0 ? 10 : t(i).fullHeight}`,
        style: c(`max-width:100%;overflow:visible;background:transparent;color:${t(e).style.chart.color}`)
      }, [
        ut(Pe),
        a.$slots["chart-background"] ? (r(), d("foreignObject", {
          key: 0,
          x: 0,
          y: 0,
          width: t(v).width <= 0 ? 10 : t(v).width,
          height: t(i).fullHeight <= 0 ? 10 : t(i).fullHeight,
          style: {
            pointerEvents: "none"
          }
        }, [
          _(a.$slots, "chart-background", {}, void 0, !0)
        ], 8, Ie)) : g("", !0),
        (r(!0), d(j, null, W(t(B), (l, n) => (r(), d("linearGradient", {
          x1: "0%",
          y1: "0%",
          x2: "100%",
          y2: "0%",
          id: `vertical_bar_gradient_${t(V)}_${n}`
        }, [
          s("stop", {
            offset: "0%",
            "stop-color": l.color
          }, null, 8, Be),
          s("stop", {
            offset: "100%",
            "stop-color": t(ct)(t(ge)(l.color, 0.03), 100 - t(e).style.chart.layout.bars.gradientIntensity)
          }, null, 8, De)
        ], 8, Ae))), 256)),
        (r(!0), d(j, null, W(t(B), (l, n) => (r(), d("g", null, [
          s("rect", {
            x: t(S)(t(D) ? t(i).left + t(i).width / 2 - (l.sign === 1 ? 0 : P(l.value) <= 0 ? 1e-4 : P(l.value)) : t(i).left),
            y: t(i).top + (t(f) + t(p)) * n,
            width: t(S)(P(l.value) <= 0 ? 1e-4 : P(l.value)),
            height: t(p) <= 0 ? 1e-4 : t(p),
            fill: t(e).style.chart.layout.bars.underlayerColor,
            rx: t(e).style.chart.layout.bars.borderRadius,
            class: U({ animated: t(e).useCssAnimation })
          }, null, 10, Re)
        ]))), 256)),
        (r(!0), d(j, null, W(t(B), (l, n) => (r(), d("g", null, [
          s("rect", {
            x: t(S)(t(D) ? t(i).left + t(i).width / 2 - (l.sign === 1 ? 0 : P(l.value) <= 0 ? 1e-4 : P(l.value)) : t(i).left),
            y: t(i).top + (t(f) + t(p)) * n,
            width: t(S)(P(l.value) <= 0 ? 1e-4 : P(l.value)),
            height: t(p) <= 0 ? 1e-4 : t(p),
            fill: t(e).style.chart.layout.bars.useGradient ? `url(#vertical_bar_gradient_${t(V)}_${n})` : t(ct)(l.color, t(e).style.chart.layout.bars.fillOpacity),
            rx: t(e).style.chart.layout.bars.borderRadius,
            stroke: t(e).style.chart.layout.bars.useStroke ? l.color : "none",
            "stroke-width": t(e).style.chart.layout.bars.useStroke ? t(e).style.chart.layout.bars.strokeWidth : 0,
            class: U({ animated: t(e).useCssAnimation })
          }, null, 10, Ue),
          (!l.isChild || l.isLastChild) && t(e).style.chart.layout.separators.show && n !== t(B).length - 1 ? (r(), d("line", {
            key: 0,
            x1: 0,
            x2: t(i).left,
            y1: t(p) + t(f) / 2 + t(i).top + (t(f) + t(p)) * n,
            y2: t(p) + t(f) / 2 + t(i).top + (t(f) + t(p)) * n,
            stroke: t(e).style.chart.layout.separators.color,
            "stroke-width": t(e).style.chart.layout.separators.strokeWidth,
            "stroke-linecap": "round"
          }, null, 8, Xe)) : g("", !0),
          t(D) && t(e).style.chart.layout.separators.show ? (r(), d("line", {
            key: 1,
            x1: t(i).left + t(i).width / 2,
            x2: t(i).left + t(i).width / 2,
            y1: t(i).top,
            y2: t(i).bottom,
            stroke: t(e).style.chart.layout.separators.color,
            "stroke-width": t(e).style.chart.layout.separators.strokeWidth,
            "stroke-linecap": "round"
          }, null, 8, Ee)) : g("", !0),
          s("text", {
            x: t(D) ? t(i).left + t(i).width / 2 + (l.sign === 1 ? -12 : 12) + (l.sign === 1 ? -t(e).style.chart.layout.bars.dataLabels.offsetX : t(e).style.chart.layout.bars.dataLabels.offsetX) : Zt(l.value) + 3 + t(e).style.chart.layout.bars.dataLabels.offsetX,
            y: t(i).top + (t(f) + t(p)) * n + t(p) / 2 + t(e).style.chart.layout.bars.dataLabels.fontSize / 2,
            "text-anchor": !t(D) || l.sign === -1 ? "start" : "end",
            "font-size": t(e).style.chart.layout.bars.dataLabels.fontSize,
            fill: t(e).style.chart.layout.bars.dataLabels.color,
            "font-weight": t(e).style.chart.layout.bars.dataLabels.bold ? "bold" : "normal"
          }, h(Ot(l.value, l, n, l.sign)), 9, He),
          (l.isChild || !l.hasChildren) && t(e).style.chart.layout.bars.nameLabels.show ? (r(), d("text", {
            key: 2,
            "text-anchor": "end",
            x: t(i).left - 3 + t(e).style.chart.layout.bars.nameLabels.offsetX,
            y: t(i).top + (t(f) + t(p)) * n + t(p) / 2 + t(e).style.chart.layout.bars.nameLabels.fontSize / 2,
            "font-size": t(e).style.chart.layout.bars.nameLabels.fontSize,
            fill: t(e).style.chart.layout.bars.nameLabels.color,
            "font-weight": t(e).style.chart.layout.bars.nameLabels.bold ? "bold" : "normal"
          }, h(l.name), 9, Ge)) : g("", !0),
          l.isChild && l.childIndex === 0 && t(e).style.chart.layout.bars.parentLabels.show ? (r(), d("text", {
            key: 3,
            x: 3 + t(e).style.chart.layout.bars.parentLabels.offsetX,
            y: E(l, n).y,
            "font-size": t(e).style.chart.layout.bars.parentLabels.fontSize,
            fill: t(e).style.chart.layout.bars.parentLabels.color,
            "font-weight": t(e).style.chart.layout.bars.parentLabels.bold ? "bold" : "normal",
            "text-anchor": "start"
          }, h(E(l, n).name), 9, je)) : g("", !0),
          l.isChild && l.childIndex === 0 && t(e).style.chart.layout.bars.parentLabels.show ? (r(), d("text", {
            key: 4,
            x: 3 + t(e).style.chart.layout.bars.parentLabels.offsetX,
            y: E(l, n).y + t(e).style.chart.layout.bars.parentLabels.fontSize + 6,
            "font-size": t(e).style.chart.layout.bars.parentLabels.fontSize,
            fill: t(e).style.chart.layout.bars.parentLabels.color,
            "font-weight": t(e).style.chart.layout.bars.dataLabels.bold ? "bold" : "normal",
            "text-anchor": "start"
          }, h(Ot(E(l, n).value), E(l, n), n, l.parentSign || l.sign), 9, We)) : g("", !0),
          s("rect", {
            "data-cy-trap": "",
            x: 0,
            y: t(i).top + (t(f) + t(p)) * n - t(f) / 2,
            width: t(v).width <= 0 ? 1e-4 : t(v).width,
            height: t(p) + t(f) <= 0 ? 1e-4 : t(p) + t(f),
            fill: t(st) === l.id ? t(ct)(t(e).style.chart.layout.highlighter.color, t(e).style.chart.layout.highlighter.opacity) : "transparent",
            onMouseenter: (m) => ee(l, n),
            onMouseleave: o[1] || (o[1] = (m) => {
              jt.value = null, et.value = !1, st.value = null;
            })
          }, null, 40, Ye)
        ]))), 256)),
        _(a.$slots, "svg", { svg: t(v) }, void 0, !0)
      ], 14, ze)) : g("", !0),
      a.$slots.watermark ? (r(), d("div", qe, [
        _(a.$slots, "watermark", H(G({ isPrinting: t(_t) || t(kt) })), void 0, !0)
      ])) : g("", !0),
      t(Y) ? g("", !0) : (r(), M(Te, {
        key: 7,
        config: {
          type: "verticalBar",
          style: {
            backgroundColor: t(e).style.chart.backgroundColor,
            verticalBar: {
              axis: {
                color: "#CCCCCC"
              },
              color: "#CCCCCC"
            }
          }
        }
      }, null, 8, ["config"])),
      t(e).style.chart.legend.show && t(e).style.chart.legend.position === "bottom" ? (r(), d("div", {
        key: 8,
        ref_key: "chartLegend",
        ref: lt
      }, [
        (r(), M(Dt, {
          key: `legend_bottom_${t(ot)}`,
          legendSet: t(O),
          config: t(Pt),
          onClickMarker: o[2] || (o[2] = ({ legend: l }) => X(l.id))
        }, {
          item: k(({ legend: l, index: n }) => [
            s("div", {
              onClick: (m) => X(l.id),
              style: c(`opacity:${t(T).includes(l.id) ? 0.5 : 1}`)
            }, h(l.name) + ": " + h(t(tt)(
              t(e).style.chart.layout.bars.dataLabels.value.formatter,
              l.value,
              t(I)({
                p: t(e).style.chart.legend.prefix,
                v: l.value,
                s: t(e).style.chart.legend.suffix,
                r: t(e).style.chart.legend.roundingValue
              }),
              { datapoint: l, seriesIndex: n }
            )), 13, Ke)
          ]),
          _: 1
        }, 8, ["legendSet", "config"]))
      ], 512)) : g("", !0),
      _(a.$slots, "legend", { legend: t(O) }, void 0, !0),
      a.$slots.source ? (r(), d("div", {
        key: 9,
        ref_key: "source",
        ref: vt,
        dir: "auto"
      }, [
        _(a.$slots, "source", {}, void 0, !0)
      ], 512)) : g("", !0),
      ut(Ce, {
        show: t(x).showTooltip && t(et) && t(T).length < w.dataset.length,
        backgroundColor: t(e).style.chart.tooltip.backgroundColor,
        color: t(e).style.chart.tooltip.color,
        borderRadius: t(e).style.chart.tooltip.borderRadius,
        borderColor: t(e).style.chart.tooltip.borderColor,
        borderWidth: t(e).style.chart.tooltip.borderWidth,
        fontSize: t(e).style.chart.tooltip.fontSize,
        backgroundOpacity: t(e).style.chart.tooltip.backgroundOpacity,
        position: t(e).style.chart.tooltip.position,
        offsetY: t(e).style.chart.tooltip.offsetY,
        parent: t(A),
        content: t(at),
        isFullscreen: t(R),
        isCustom: t(e).style.chart.tooltip.customFormat && typeof t(e).style.chart.tooltip.customFormat == "function"
      }, {
        "tooltip-before": k(() => [
          _(a.$slots, "tooltip-before", H(G({ ...t(rt) })), void 0, !0)
        ]),
        "tooltip-after": k(() => [
          _(a.$slots, "tooltip-after", H(G({ ...t(rt) })), void 0, !0)
        ]),
        _: 3
      }, 8, ["show", "backgroundColor", "color", "borderRadius", "borderColor", "borderWidth", "fontSize", "backgroundOpacity", "position", "offsetY", "parent", "content", "isFullscreen", "isCustom"]),
      t(Y) ? (r(), M(Ne, {
        key: 10,
        hideDetails: "",
        config: {
          open: t(x).showTable,
          maxHeight: 1e4,
          body: {
            backgroundColor: t(e).style.chart.backgroundColor,
            color: t(e).style.chart.color
          },
          head: {
            backgroundColor: t(e).style.chart.backgroundColor,
            color: t(e).style.chart.color
          }
        }
      }, {
        content: k(() => [
          s("div", {
            ref_key: "tableContainer",
            ref: Ct,
            class: "vue-ui-vertical-bar-table"
          }, [
            s("div", Je, [
              s("div", {
                role: "button",
                tabindex: "0",
                style: c(`width:32px; position: absolute; top: 0; right:4px; padding: 0 0px; display: flex; align-items:center;justify-content:center;height: 36px; width: 32px; cursor:pointer; background:${t(e).table.th.backgroundColor};`),
                onClick: o[3] || (o[3] = (l) => t(x).showTable = !1),
                onKeypress: o[4] || (o[4] = re((l) => t(x).showTable = !1, ["enter"]))
              }, [
                ut(Le, {
                  name: "close",
                  stroke: t(e).table.th.color,
                  "stroke-width": 2
                }, null, 8, ["stroke"])
              ], 36),
              s("div", {
                style: { width: "100%", "container-type": "inline-size" },
                class: U({ "vue-ui-responsive": t(Tt) })
              }, [
                s("table", Qe, [
                  s("caption", {
                    style: c({ backgroundColor: t(e).table.th.backgroundColor, color: t(e).table.th.color, outline: t(e).table.th.outline }),
                    class: "vue-ui-data-table__caption"
                  }, [
                    ie(h(t(e).style.chart.title.text) + " ", 1),
                    t(e).style.chart.title.subtitle.text ? (r(), d("span", Ze, h(t(e).style.chart.title.subtitle.text), 1)) : g("", !0)
                  ], 4),
                  s("thead", null, [
                    s("tr", {
                      role: "row",
                      style: c(`background:${t(e).table.th.backgroundColor};color:${t(e).table.th.color}`)
                    }, [
                      (r(!0), d(j, null, W(t(C).head, (l) => (r(), d("th", {
                        style: c(`outline:${t(e).table.th.outline}`)
                      }, [
                        s("div", ta, h(l), 1)
                      ], 4))), 256))
                    ], 4),
                    s("tr", null, [
                      s("th", {
                        style: c(`background:${t(e).table.th.backgroundColor};color:${t(e).table.th.color};outline:${t(e).table.th.outline}`)
                      }, null, 4),
                      s("th", {
                        style: c(`background:${t(e).table.th.backgroundColor};color:${t(e).table.th.color};outline:${t(e).table.th.outline};text-align:right;padding-right:5px;font-weight:bold`)
                      }, "∑ " + h(t(e).table.td.prefix) + h(isNaN(t(L)) ? "" : t(L).toFixed(t(e).table.td.roundingValue)) + h(t(e).table.td.suffix), 5),
                      s("th", {
                        style: c(`background:${t(e).table.th.backgroundColor};color:${t(e).table.th.color};outline:${t(e).table.th.outline};text-align:right;padding-right:5px;font-weight:bold`)
                      }, "100%", 4),
                      s("th", {
                        style: c(`background:${t(e).table.th.backgroundColor};color:${t(e).table.th.color};outline:${t(e).table.th.outline}`)
                      }, null, 4),
                      s("th", {
                        style: c(`background:${t(e).table.th.backgroundColor};color:${t(e).table.th.color};outline:${t(e).table.th.outline}`)
                      }, null, 4),
                      s("th", {
                        style: c(`background:${t(e).table.th.backgroundColor};color:${t(e).table.th.color};outline:${t(e).table.th.outline}`)
                      }, null, 4),
                      s("th", {
                        style: c(`background:${t(e).table.th.backgroundColor};color:${t(e).table.th.color};outline:${t(e).table.th.outline}`)
                      }, null, 4)
                    ])
                  ]),
                  s("tbody", null, [
                    (r(!0), d(j, null, W(t(C).body, (l, n) => (r(), d("tr", {
                      class: U({ "vue-ui-data-table__tbody__row": !0, "vue-ui-data-table__tbody__row-even": n % 2 === 0, "vue-ui-data-table__tbody__row-odd": n % 2 !== 0 }),
                      style: c(`background:${t(e).table.td.backgroundColor};color:${t(e).table.td.color}`)
                    }, [
                      s("td", {
                        class: "vue-ui-data-table__tbody__td",
                        style: c(`outline:${t(e).table.td.outline};font-variant-numeric: tabular-nums;`),
                        "data-cell": t(C).head[0] ?? ""
                      }, [
                        s("div", aa, [
                          l.color ? (r(), d("span", {
                            key: 0,
                            style: c(`color:${l.color};margin-right:3px`)
                          }, "⬤", 4)) : g("", !0),
                          s("span", null, h(l.parentName), 1)
                        ])
                      ], 12, ea),
                      s("td", {
                        class: "vue-ui-data-table__tbody__td",
                        style: c(`outline:${t(e).table.td.outline}`),
                        "data-cell": t(C).head[1] ?? ""
                      }, [
                        s("div", oa, h(t(e).table.td.prefix) + h(["", NaN, void 0].includes(l.parentValue) ? "" : l.parentValue.toFixed(t(e).table.td.roundingValue)) + h(t(e).table.td.suffix), 1)
                      ], 12, la),
                      s("td", {
                        class: "vue-ui-data-table__tbody__td",
                        style: c(`outline:${t(e).table.td.outline}`),
                        "data-cell": t(C).head[2] ?? ""
                      }, [
                        s("div", sa, h(["", NaN, void 0].includes(l.percentageToTotal) ? "" : `${(l.percentageToTotal * 100).toFixed(t(e).table.td.roundingPercentage)}%`), 1)
                      ], 12, na),
                      s("td", {
                        class: "vue-ui-data-table__tbody__td",
                        style: c(`outline:${t(e).table.td.outline}`),
                        "data-cell": t(C).head[3] ?? ""
                      }, [
                        s("div", ia, h(l.childName), 1)
                      ], 12, ra),
                      s("td", {
                        class: "vue-ui-data-table__tbody__td",
                        style: c(`outline:${t(e).table.td.outline}`),
                        "data-cell": t(C).head[4] ?? ""
                      }, [
                        s("div", da, h(t(e).table.td.prefix) + h(["", NaN, void 0].includes(l.childValue) ? "" : l.childValue.toFixed(t(e).table.td.roundingValue)) + h(t(e).table.td.suffix), 1)
                      ], 12, ua),
                      s("td", {
                        class: "vue-ui-data-table__tbody__td",
                        style: c(`outline:${t(e).table.td.outline}`),
                        "data-cell": t(C).head[5] ?? ""
                      }, [
                        s("div", ha, h(["", NaN, void 0].includes(l.childPercentageToParent) ? "" : `${(l.childPercentageToParent * 100).toFixed(t(e).table.td.roundingPercentage)}%`), 1)
                      ], 12, ca),
                      s("td", {
                        class: "vue-ui-data-table__tbody__td",
                        style: c(`outline:${t(e).table.td.outline}`),
                        "data-cell": t(C).head[6] ?? ""
                      }, [
                        s("div", va, h(["", NaN, void 0].includes(l.childPercentageToTotal) ? "" : `${(l.childPercentageToTotal * 100).toFixed(t(e).table.td.roundingPercentage)}%`), 1)
                      ], 12, pa)
                    ], 6))), 256))
                  ])
                ])
              ], 2)
            ])
          ], 512)
        ]),
        _: 1
      }, 8, ["config"])) : g("", !0)
    ], 46, Fe));
  }
}, Va = /* @__PURE__ */ Oe(ga, [["__scopeId", "data-v-2d5dac5b"]]);
export {
  Va as default
};