vue-data-ui/dist/vue-ui-table-heatmap-CUOXC4JX.js

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

import { useCssVars as de, computed as v, defineAsyncComponent as ce, ref as b, useSlots as pe, onMounted as R, watch as ve, createElementBlock as r, openBlock as s, unref as i, normalizeClass as U, normalizeStyle as y, createBlock as fe, createCommentVNode as f, createElementVNode as g, createSlots as me, withCtx as h, renderSlot as u, normalizeProps as B, guardReactiveProps as D, Fragment as k, renderList as F, mergeProps as m, createVNode as be, nextTick as ge } from "vue";
import { c as G, o as he, g as Ce, ao as ye, x as ke, am as _e, v as Ie, r as $e } from "./lib-2iaAPQ_c.js";
import { u as Fe, a as O } from "./useNestedProp-2p4Tjzc8.js";
import { u as Oe } from "./usePrinter-ChVMpU2f.js";
import { u as we } from "./useThemeCheck-DGJ31Vi5.js";
import { u as Ae } from "./useUserOptionState-BIvW1Kz7.js";
import { _ as xe } from "./Shape-12_eh8zD.js";
import { _ as Pe } from "./_plugin-vue_export-helper-CHgC5LLL.js";
const H = { style: { backgroundColor: "#1A1A1A", color: "#CCCCCC" }, table: { head: { backgroundColor: "#1A1A1A", color: "#CCCCCC" } } }, L = { style: { backgroundColor: "#FFF8E1", color: "#424242", heatmapColors: { min: "#FFECB3", max: "#D32F2F" } }, table: { head: { backgroundColor: "#FFF8E1", color: "#424242" } } }, X = { style: { backgroundColor: "#1A1A1A", color: "#99AA99", heatmapColors: { min: "#333333", max: "#66CC66" } }, table: { head: { backgroundColor: "#1A1A1A", color: "#99AA99" } } }, W = { style: { backgroundColor: "#fbfafa", color: "#8A9892", heatmapColors: { max: "#C09E85", min: "#DCDFE7" } }, table: { head: { backgroundColor: "#fbfafa", color: "#8A9892" } } }, q = { style: { backgroundColor: "#f6f6fb", color: "#50606C", heatmapColors: { max: "#4A6A75", min: "#EFECEC" } }, table: { head: { backgroundColor: "#f6f6fb", color: "#50606C" } } }, J = {
  default: {},
  dark: H,
  celebration: L,
  hack: X,
  zen: W,
  concrete: q
}, Ye = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  celebration: L,
  concrete: q,
  dark: H,
  default: J,
  hack: X,
  zen: W
}, Symbol.toStringTag, { value: "Module" })), Ee = ["id"], Se = { role: "cell" }, Te = { role: "row" }, Ne = ["data-cell"], Ve = {
  key: 0,
  style: { display: "flex", "flex-direction": "row", gap: "2px", "align-items": "center" }
}, Me = ["height", "width"], ze = {
  key: 0,
  role: "cell",
  "data-cell": "sum"
}, Re = {
  key: 1,
  role: "cell",
  "data-cell": "average"
}, Ue = {
  key: 2,
  role: "cell",
  "data-cell": "median"
}, Be = {
  key: 1,
  ref: "source",
  dir: "auto"
}, De = {
  __name: "vue-ui-table-heatmap",
  props: {
    config: {
      type: Object,
      default() {
        return {};
      }
    },
    dataset: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  setup(K, { expose: Q }) {
    de((e) => ({
      v7bb1d4dc: ue.value,
      v4b487b6d: re.value
    }));
    const Y = ce(() => import("./UserOptions-BQO4YFrn.js")), { vue_ui_table_heatmap: Z } = Fe(), { isThemeValid: j, warnInvalidTheme: ee } = we(), p = K, _ = b(G()), d = b(!1), C = b(null), I = b(!1), w = b(0), te = pe();
    R(() => {
      te["chart-background"] && console.warn("VueUiTableHeatmap does not support the #chart-background slot.");
    });
    const t = v({
      get: () => P(),
      set: (e) => e
    }), { userOptionsVisible: $, setUserOptionsVisibility: A, keepUserOptionState: x } = Ae({ config: t.value });
    function P() {
      const e = O({
        userConfig: p.config,
        defaultConfig: Z
      }), a = e.theme;
      if (!a) return e;
      if (!j.value(e))
        return ee(e), e;
      const o = O({
        userConfig: J[a] || p.config,
        defaultConfig: e
      });
      return O({
        userConfig: p.config,
        defaultConfig: o
      });
    }
    ve(() => p.config, (e) => {
      t.value = P(), $.value = !t.value.userOptions.showOnChartHover, T();
    }, { deep: !0 });
    const { isPrinting: oe, isImaging: ae, generatePdf: E, generateImage: S } = Oe({
      elementId: `table_heatmap_${_.value}`,
      fileName: "vue-ui-table-heatmap",
      options: t.value.userOptions.print
    }), ne = v(() => t.value.table.responsiveBreakpoint), se = v(() => !!p.dataset && p.dataset.length);
    R(() => {
      T();
    });
    function T() {
      he(p.dataset) && Ce({
        componentName: "VueUiTableHeatmap",
        type: "dataset"
      });
      const e = new ResizeObserver((a) => {
        a.forEach((o) => {
          d.value = o.contentRect.width < ne.value;
        });
      });
      C.value && e.observe(C.value);
    }
    const N = v(() => p.dataset.map((e) => {
      const a = e.values.map((n) => isNaN(n) ? 0 : n), o = a.reduce((n, l) => n + l, 0);
      return {
        ...e,
        values: a,
        serieExtremes: {
          max: Math.max(...a),
          min: Math.min(...a)
        },
        sum: o,
        average: o / a.length,
        median: ye(a),
        displayValues: [e.name, ...e.values],
        id: G()
      };
    })), V = v(() => {
      const e = N.value.flatMap((a) => a.values);
      return {
        min: Math.min(...e),
        max: Math.max(...e)
      };
    });
    function le(e, a) {
      const o = t.value.style.heatmapColors.useIndividualScale;
      return _e(t.value.style.heatmapColors.min, t.value.style.heatmapColors.max, o ? a.min : V.value.min, o ? a.max : V.value.max, e);
    }
    const M = v(() => N.value.map((e) => ({
      ...e,
      colors: e.displayValues.map((a) => isNaN(a) ? t.value.style.backgroundColor : le(a, e.serieExtremes))
    }))), re = v(() => t.value.style.backgroundColor), ue = v(() => `${t.value.table.borderWidth}px`);
    function z(e = null) {
      ge(() => {
        const a = M.value.map((l) => [
          [l.name],
          l.displayValues,
          [l.sum],
          [l.average],
          [l.median]
        ]), o = [[[""], t.value.table.head.values, ["sum"], ["average"], ["median"]]].concat(a), n = Ie(o);
        e ? e(n) : $e({ csvContent: n, title: "vue-ui-table-heatmap" });
      });
    }
    function ie(e) {
      I.value = e, w.value += 1;
    }
    return Q({
      generatePdf: E,
      generateCsv: z,
      generateImage: S
    }), (e, a) => (s(), r("div", {
      ref_key: "tableContainer",
      ref: C,
      style: y(`width:100%; overflow-x:auto; container-type: inline-size;padding-top:${t.value.userOptions.show ? "36px" : ""}; ${I.value ? "vue-data-ui-wrapper-fullscreen" : ""}; position:relative;`),
      class: U({ "vue-data-ui-component": !0, "vue-ui-responsive": d.value }),
      id: `table_heatmap_${_.value}`,
      onMouseenter: a[0] || (a[0] = () => i(A)(!0)),
      onMouseleave: a[1] || (a[1] = () => i(A)(!1))
    }, [
      t.value.userOptions.show && se.value && (i(x) || i($)) ? (s(), fe(i(Y), {
        ref: "details",
        key: `user_option_${w.value}`,
        backgroundColor: t.value.style.backgroundColor,
        color: t.value.style.color,
        isPrinting: i(oe),
        isImaging: i(ae),
        uid: _.value,
        hasPdf: t.value.userOptions.buttons.pdf,
        hasXls: t.value.userOptions.buttons.csv,
        hasImg: t.value.userOptions.buttons.img,
        hasFullscreen: t.value.userOptions.buttons.fullscreen,
        isFullscreen: I.value,
        titles: { ...t.value.userOptions.buttonTitles },
        chartElement: C.value,
        position: t.value.userOptions.position,
        callbacks: t.value.userOptions.callbacks,
        printScale: t.value.userOptions.print.scale,
        onToggleFullscreen: ie,
        onGeneratePdf: i(E),
        onGenerateCsv: z,
        onGenerateImage: i(S),
        style: y({
          visibility: i(x) ? i($) ? "visible" : "hidden" : "visible"
        })
      }, me({ _: 2 }, [
        e.$slots.menuIcon ? {
          name: "menuIcon",
          fn: h(({ isOpen: o, color: n }) => [
            u(e.$slots, "menuIcon", B(D({ isOpen: o, color: n })), void 0, !0)
          ]),
          key: "0"
        } : void 0,
        e.$slots.optionPdf ? {
          name: "optionPdf",
          fn: h(() => [
            u(e.$slots, "optionPdf", {}, void 0, !0)
          ]),
          key: "1"
        } : void 0,
        e.$slots.optionCsv ? {
          name: "optionCsv",
          fn: h(() => [
            u(e.$slots, "optionCsv", {}, void 0, !0)
          ]),
          key: "2"
        } : void 0,
        e.$slots.optionImg ? {
          name: "optionImg",
          fn: h(() => [
            u(e.$slots, "optionImg", {}, void 0, !0)
          ]),
          key: "3"
        } : void 0,
        e.$slots.optionFullscreen ? {
          name: "optionFullscreen",
          fn: h(({ toggleFullscreen: o, isFullscreen: n }) => [
            u(e.$slots, "optionFullscreen", B(D({ toggleFullscreen: o, isFullscreen: n })), void 0, !0)
          ]),
          key: "4"
        } : void 0
      ]), 1032, ["backgroundColor", "color", "isPrinting", "isImaging", "uid", "hasPdf", "hasXls", "hasImg", "hasFullscreen", "isFullscreen", "titles", "chartElement", "position", "callbacks", "printScale", "onGeneratePdf", "onGenerateImage", "style"])) : f("", !0),
      g("table", {
        class: U({ "vue-ui-table-heatmap": !0 }),
        style: y(`width:100%;font-family:${t.value.style.fontFamily};background:${t.value.style.backgroundColor};`)
      }, [
        g("caption", null, [
          u(e.$slots, "caption", {}, void 0, !0)
        ]),
        g("thead", null, [
          g("tr", {
            role: "row",
            style: y(`background:${t.value.table.head.backgroundColor};color:${t.value.table.head.color}`)
          }, [
            (s(!0), r(k, null, F(t.value.table.head.values, (o, n) => (s(), r("th", Se, [
              u(e.$slots, "head", m({ ref_for: !0 }, { value: o, rowIndex: n, type: typeof o, isResponsive: d.value }), void 0, !0)
            ]))), 256))
          ], 4)
        ]),
        g("tbody", null, [
          (s(!0), r(k, null, F(M.value, (o, n) => (s(), r("tr", Te, [
            (s(!0), r(k, null, F(o.displayValues, (l, c) => (s(), r("td", {
              role: "cell",
              "data-cell": t.value.table.head.values[c]
            }, [
              o.color && c === 0 ? (s(), r("div", Ve, [
                o.color ? (s(), r("svg", {
                  key: 0,
                  height: t.value.style.shapeSize,
                  width: t.value.style.shapeSize,
                  viewBox: "0 0 20 20",
                  style: { background: "none", overflow: "visible" }
                }, [
                  be(xe, {
                    plot: { x: 10, y: 10 },
                    color: o.color,
                    radius: 9,
                    shape: o.shape || "circle"
                  }, null, 8, ["color", "shape"])
                ], 8, Me)) : f("", !0),
                u(e.$slots, "rowTitle", m({ ref_for: !0 }, { value: l, rowIndex: n, colIndex: c, type: typeof l, isResponsive: d.value }), void 0, !0)
              ])) : (s(), r(k, { key: 1 }, [
                c === 0 ? u(e.$slots, "rowTitle", m({
                  key: 0,
                  ref_for: !0
                }, { value: l, rowIndex: n, colIndex: c, type: typeof l, isResponsive: d.value }), void 0, !0) : f("", !0),
                c > 0 ? u(e.$slots, "cell", m({
                  key: 1,
                  ref_for: !0
                }, { value: l, rowIndex: n, colIndex: c, type: typeof l, isResponsive: d.value, color: o.colors[c], textColor: i(ke)(o.colors[c]) }), void 0, !0) : f("", !0)
              ], 64))
            ], 8, Ne))), 256)),
            t.value.table.showSum ? (s(), r("td", ze, [
              u(e.$slots, "sum", m({ ref_for: !0 }, { value: o.sum, rowIndex: n, isResponsive: d.value }), void 0, !0)
            ])) : f("", !0),
            t.value.table.showAverage ? (s(), r("td", Re, [
              u(e.$slots, "average", m({ ref_for: !0 }, { value: o.average, rowIndex: n, isResponsive: d.value }), void 0, !0)
            ])) : f("", !0),
            t.value.table.showMedian ? (s(), r("td", Ue, [
              u(e.$slots, "median", m({ ref_for: !0 }, { value: o.median, rowIndex: n, isResponsive: d.value }), void 0, !0)
            ])) : f("", !0)
          ]))), 256))
        ])
      ], 4),
      e.$slots.source ? (s(), r("div", Be, [
        u(e.$slots, "source", {}, void 0, !0)
      ], 512)) : f("", !0)
    ], 46, Ee));
  }
}, Ge = /* @__PURE__ */ Pe(De, [["__scopeId", "data-v-9de1ab93"]]), Ze = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  default: Ge
}, Symbol.toStringTag, { value: "Module" }));
export {
  Ye as a,
  Ze as b,
  Ge as v
};