@ironsource/shared-ui 2.2.0-test.9 → 2.2.0-test.91

package/components/chart/Chart.vue2.js

@@ -1,4 +1,4 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_22477735_lang.css"; import { defineComponent as P, ref as U, computed as d, openBlock as n, createElementBlock as b, Fragment as S, createBlock as D, unref as l, isRef as y, withCtx as s, renderSlot as u, createCommentVNode as A, createElementVNode as L, mergeProps as g, normalizeClass as $, createVNode as k, createSlots as M, renderList as R } from "vue";
+ import "../../Chart.vue_vue_type_style_index_0_scoped_a4d7b67a_lang.css"; import { defineComponent as P, ref as U, computed as d, openBlock as n, createElementBlock as g, Fragment as S, createBlock as D, unref as l, isRef as b, withCtx as s, renderSlot as u, createCommentVNode as A, createElementVNode as L, mergeProps as y, normalizeClass as $, createVNode as k, createSlots as M, renderList as R } from "vue";
 import { useVModel as B } from "@vueuse/core";
 import K from "./ChartLegend.vue.js";
 import X from "./SettingsHeader.vue.js";
@@ -60,7 +60,8 @@ const at = {
     fullHeightBottomSpacing: { default: 50 },
     withSettingsHeader: { type: Boolean, default: !0 },
     extraCharts: { default: () => [] },
-    colorVariant: { default: "default" }
+    colorVariant: { default: "default" },
+    height: { default: void 0 }
   },
   emits: ["update:chartType", "update:visibleIds", "update:sortSelected"],
   setup(e, { emit: c }) {
@@ -106,23 +107,24 @@ const at = {
       dataSets: E,
       visibleIds: I,
       variant: t.colorVariant
-    }), w = d(() => t.dataSets.map((a) => ({
+    }), H = d(() => t.dataSets.map((a) => ({
       id: a.id,
       label: a.label,
       caption: a.caption || null,
       color: m.value[a.id] || null,
       icon: a.icon || null,
       iconType: a.iconType || "branded"
-    }))), { containerProps: H, eachPlaneHeight: N } = Z({
+    }))), { containerProps: w, eachPlaneHeight: N } = Z({
       chartPlanesCount: C,
       useFullHeight: t.fullHeight,
-      bottomSpacing: t.fullHeightBottomSpacing
+      bottomSpacing: t.fullHeightBottomSpacing,
+      customHeight: t.height
     }), O = et(t.testId, p);
-    return (a, i) => (n(), b(S, null, [
+    return (a, i) => (n(), g(S, null, [
       e.withSettingsHeader ? (n(), D(X, {
         key: 0,
         "chart-type": l(r),
-        "onUpdate:chart-type": i[0] || (i[0] = (o) => y(r) ? r.value = o : null),
+        "onUpdate:chart-type": i[0] || (i[0] = (o) => b(r) ? r.value = o : null),
         "hide-legend": e.hideLegend,
         "test-id": e.testId
       }, {
@@ -137,16 +139,16 @@ const at = {
         ]),
         _: 3
       }, 8, ["chart-type", "hide-legend", "test-id"])) : A("", !0),
-      L("div", g({ class: "chart-container" }, {
-        ...l(H),
+      L("div", y({ class: "chart-container" }, {
+        ...l(w),
         ...l(O)[l(p).CONTAINER]
       }), [
         L("section", {
           class: $(["chart-planes", [{ "with-legend": !e.hideLegend }]])
         }, [
-          k(V, g({
+          k(V, y({
             "chart-type": l(r),
-            "onUpdate:chart-type": i[1] || (i[1] = (o) => y(r) ? r.value = o : null)
+            "onUpdate:chart-type": i[1] || (i[1] = (o) => b(r) ? r.value = o : null)
           }, l(v)), M({ _: 2 }, [
             a.$slots["subheader-tooltip"] ? {
               name: "subheader-tooltip",
@@ -156,7 +158,7 @@ const at = {
               key: "0"
             } : void 0
           ]), 1040, ["chart-type"]),
-          (n(!0), b(S, null, R(e.extraCharts, (o, T) => (n(), D(V, g({
+          (n(!0), g(S, null, R(e.extraCharts, (o, T) => (n(), D(V, y({
             key: T,
             class: "extra-chart-plane"
           }, { ...l(v), ...o }, {
@@ -167,13 +169,13 @@ const at = {
             "test-id": `${e.testId}-${l(p).EXTRA_CHART}-${T}`
           }), null, 16, ["chart-type", "colors-map", "tooltip-respects-top-edge", "test-id"]))), 128))
         ], 2),
-        e.hideLegend ? A("", !0) : (n(), b("section", at, [
+        e.hideLegend ? A("", !0) : (n(), g("section", at, [
           k(K, {
             "sort-selected": l(f),
-            "onUpdate:sort-selected": i[2] || (i[2] = (o) => y(f) ? f.value = o : null),
+            "onUpdate:sort-selected": i[2] || (i[2] = (o) => b(f) ? f.value = o : null),
             "highlighted-id": h.value,
             "onUpdate:highlighted-id": i[3] || (i[3] = (o) => h.value = o),
-            items: l(w),
+            items: l(H),
             "visible-ids": l(I),
             "max-limit-tooltip-text": e.maxLimitTooltipText,
             "sort-options": e.sortOptions,

package/components/chart/ChartPlane.vue.js

@@ -1,7 +1,7 @@
-import e from "./ChartPlane.vue2.js";
-/* empty css                 */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartPlane.vue_vue_type_style_index_0_scoped_6de5cddb_lang.css"; //*');
-const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-6de5cddb"]]);
+import o from "./ChartPlane.vue2.js";
+/* empty css                 */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../ChartPlane.vue_vue_type_style_index_0_scoped_1fcb0465_lang.css"; //*');
+const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-1fcb0465"]]);
 export {
-  s as default
+  a as default
 };

package/components/chart/ChartPlane.vue2.js

@@ -1,29 +1,31 @@
- import "../../ChartPlane.vue_vue_type_style_index_0_scoped_6de5cddb_lang.css"; import { defineComponent as ne, useCssVars as se, unref as n, computed as i, ref as E, onMounted as de, watch as v, nextTick as ue, openBlock as p, createElementBlock as S, createVNode as ce, isRef as fe, createSlots as pe, withCtx as he, renderSlot as me, createCommentVNode as L, createElementVNode as R, normalizeStyle as Te, createBlock as I, mergeProps as ve } from "vue";
-import { Chart as V, ArcElement as ye, LineElement as Ce, BarElement as ge, PointElement as be, LineController as xe, BarController as Ae, PieController as ke, ScatterController as Ee, CategoryScale as Se, LinearScale as Le, Filler as Re, Tooltip as Ie } from "chart.js";
-import { HoverVerticalLine as De } from "./plugins/HoverVerticalLine.js";
-import { prepareTickLabel as Be, formatValue as Oe } from "./utils/utils.js";
-import { DEFAULT_TICK_COUNT as Pe, TOTALS_HELPER_KEY as F, LINE_DASH_STYLE as Ne, BASE_COLOR_KEY as M, CHART_PADDING as He, POINT_BORDER_COLOR as we, TICK_LABEL_COLOR as Y, TICK_LABEL_FONT as K, TICKS_EXTRA_PADDING as Ve, GRID_LINE_COLOR as U, HEADER_HEIGHT as Fe, COMPACT_HEADER_HEIGHT as Me, HOVER_AREA_TRANSPARENCY as Ye, HOVER_TRANSPARENCY as y, CHART_ITEM_TRANSPARENCY as Ke, INCOMPLETE_DATA_BAR_TRANSPARENCY as Ue, STACKED_LINE_TRANSPARENCY as Ge } from "./consts.js";
-import { ChartType as d, DateInterval as _e, TooltipOrder as G, TrendDirection as $e } from "./types.js";
+ import "../../ChartPlane.vue_vue_type_style_index_0_scoped_1fcb0465_lang.css"; import { defineComponent as se, useCssVars as de, unref as n, computed as i, ref as E, onMounted as ue, watch as y, nextTick as M, openBlock as p, createElementBlock as L, createVNode as ce, isRef as fe, createSlots as pe, withCtx as he, renderSlot as me, createCommentVNode as D, createElementVNode as I, normalizeStyle as ve, createBlock as R, mergeProps as Te } from "vue";
+import { Chart as Y, ArcElement as ye, LineElement as Ce, BarElement as ge, PointElement as be, LineController as xe, BarController as Ae, PieController as ke, ScatterController as Se, CategoryScale as Ee, LinearScale as Le, Filler as De, Tooltip as Ie } from "chart.js";
+import { HoverVerticalLine as Re } from "./plugins/HoverVerticalLine.js";
+import { prepareTickLabel as Be, formatValue as Pe } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as He, TOTALS_HELPER_KEY as K, LINE_DASH_STYLE as Ne, BASE_COLOR_KEY as U, CHART_PADDING as we, TICK_LABEL_FONT as G, TICKS_EXTRA_PADDING as Oe, HEADER_HEIGHT as Ve, COMPACT_HEADER_HEIGHT as Fe, HOVER_AREA_TRANSPARENCY as Me, HOVER_TRANSPARENCY as C, CHART_ITEM_TRANSPARENCY as Ye, INCOMPLETE_DATA_BAR_TRANSPARENCY as Ke, STACKED_LINE_TRANSPARENCY as Ue } from "./consts.js";
+import { ChartType as d, DateInterval as Ge, TooltipOrder as $, TrendDirection as $e } from "./types.js";
 import { useTooltipPosition as ze } from "./composables/useTooltipPosition.js";
-import We from "./ChartTooltip.vue.js";
+import { useChartThemeColors as We } from "./composables/useChartThemeColors.js";
+import { useThemeStore as Ze } from "../ThemeWrapper/ThemeStrore.js";
+import Xe from "./ChartTooltip.vue.js";
 import { hexColorToRgba as h } from "../../utils/color.js";
-import Ze from "./ChartHeader.vue.js";
-import { useMemoize as Xe, useVModel as je } from "@vueuse/core";
-import qe from "../emptyState/v4/EmptyStateV4.vue.js";
-import Je from "./ChartLoader.vue.js";
-import { DEFAULT_CHART_COLOR as Qe } from "./colorPalette.js";
-import { TotalType as _, calculateTotal as et } from "../../utils/totals.js";
-import { isNullOrUndefined as tt } from "../../utils/utils.js";
-import { storeOriginalDatasetColors as at, restoreOriginalDatasetColors as ot } from "./utils/highlightUtils.js";
-import { useTestIdAttrs as lt } from "../../utils/testIds.js";
-import { ChartTestIdModifiers as $ } from "../../testids/index.js";
-const rt = { class: "chart-plane-container" }, it = {
+import je from "./ChartHeader.vue.js";
+import { useMemoize as qe, useVModel as Je } from "@vueuse/core";
+import Qe from "../emptyState/v4/EmptyStateV4.vue.js";
+import _e from "./ChartLoader.vue.js";
+import { DEFAULT_CHART_COLOR as et } from "./colorPalette.js";
+import { TotalType as z, calculateTotal as tt } from "../../utils/totals.js";
+import { isNullOrUndefined as at } from "../../utils/utils.js";
+import { storeOriginalDatasetColors as ot, restoreOriginalDatasetColors as lt } from "./utils/highlightUtils.js";
+import { useTestIdAttrs as rt } from "../../utils/testIds.js";
+import { ChartTestIdModifiers as W } from "../../testids/index.js";
+const it = { class: "chart-plane-container" }, nt = {
   key: 0,
   class: "header-wrapper"
-}, nt = {
+}, st = {
   key: 1,
   class: "chart-plane"
-}, st = { class: "chart" }, Rt = /* @__PURE__ */ ne({
+}, dt = { class: "chart" }, Bt = /* @__PURE__ */ se({
   __name: "ChartPlane",
   props: {
     dataSets: { default: () => [] },
@@ -33,8 +35,8 @@ const rt = { class: "chart-plane-container" }, it = {
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
-    xAxisDateInterval: { default: _e.DAILY },
-    tickCount: { default: Pe },
+    xAxisDateInterval: { default: Ge.DAILY },
+    tickCount: { default: He },
     truncateTickLabels: { type: Boolean, default: !1 },
     header: { default: "" },
     headerTooltip: { default: null },
@@ -52,9 +54,9 @@ const rt = { class: "chart-plane-container" }, it = {
     compactHeader: { type: Boolean, default: !1 },
     noteText: { default: "" },
     tooltipRespectsTopEdge: { type: Boolean, default: !0 },
-    tooltipTotalType: { default: _.Total },
-    tooltipTotalCalcFn: { type: Function, default: et },
-    tooltipOrder: { default: G.Legend },
+    tooltipTotalType: { default: z.Total },
+    tooltipTotalCalcFn: { type: Function, default: tt },
+    tooltipOrder: { default: $.Legend },
     trendValue: { default: null },
     trendDirection: { default: $e.UP },
     trendTooltip: { default: null },
@@ -67,14 +69,14 @@ const rt = { class: "chart-plane-container" }, it = {
     testId: { default: "" }
   },
   emits: ["update:chartType"],
-  setup(o, { emit: z }) {
+  setup(o, { emit: Z }) {
     const e = o;
-    se((t) => ({
-      f01f0522: n(oe),
-      "77889a5a": o.height
+    de((t) => ({
+      "88f7e4ae": n(le),
+      ccb5f6d8: o.height
     }));
-    const W = Xe(Be);
-    V.register(
+    const X = qe(Be);
+    Y.register(
       ye,
       Ce,
       ge,
@@ -82,65 +84,67 @@ const rt = { class: "chart-plane-container" }, it = {
       xe,
       Ae,
       ke,
-      Ee,
       Se,
+      Ee,
       Le,
-      Re,
+      De,
       Ie,
-      De
+      Re
     );
-    const C = je(e, "chartType", z), Z = i(
+    const g = Je(e, "chartType", Z), j = i(
       () => e.withAnimation ? "" : "none"
-    ), T = E(null);
+    ), m = E(null), v = We(m), { theme: q } = Ze();
     let s = null;
-    const D = i(() => e.empty || e.dataSets.length === 0), c = i(() => !e.loading && !D.value), g = () => {
-      T.value && (s && s.destroy(), s = new V(T.value, P.value));
-    }, X = () => {
-      s && (s.data.datasets = O.value, s.options = P.value.options, s.update(Z.value));
+    const B = i(() => e.empty || e.dataSets.length === 0), c = i(() => !e.loading && !B.value), b = () => {
+      m.value && (s && s.destroy(), s = new Y(m.value, w.value));
+    }, P = () => {
+      s && (s.data.datasets = N.value, s.options = w.value.options, s.update(j.value));
     };
-    de(g), v(() => e.chartType, g), v(c, async (t) => {
-      t && (await ue(), g());
-    }), v(
+    ue(b), y(() => e.chartType, b), y(c, async (t) => {
+      t && (await M(), b());
+    }), y(
       [
         () => e.visibleIds,
         () => e.dataSets,
         () => e.valuePrefix,
         () => e.valueSuffix
       ],
-      X
-    );
-    const f = i(() => e.totalsChart), b = i(
+      P
+    ), y(q, async () => {
+      await M(), P();
+    });
+    const f = i(() => e.totalsChart), x = i(
       () => e.chartType === d.StackedLine || e.chartType === d.StackedBar || f.value
-    ), x = i(
+    ), A = i(
       () => e.chartType === d.Line || e.chartType === d.StackedLine
-    ), j = i(() => f.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: F } : e.parsing), q = i(() => f.value ? e.dataSets.map((t) => ({
+    ), J = i(() => f.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: K } : e.parsing), Q = i(() => f.value ? e.dataSets.map((t) => ({
       ...t,
       data: t.data.map((r) => ({
         ...r,
-        [F]: t.label
+        [K]: t.label
       }))
-    })) : e.dataSets), A = i(
-      () => q.value.filter((t) => e.visibleIds.includes(t.id))
-    ), J = (t) => e.colorsMap[t] || Qe, B = i(
-      () => A.value.length && A.value.every(
+    })) : e.dataSets), k = i(
+      () => Q.value.filter((t) => e.visibleIds.includes(t.id))
+    ), _ = (t) => e.colorsMap[t] || et, H = i(
+      () => k.value.length && k.value.every(
         (t) => t.data.length === 1
       )
-    ), Q = (t) => (r) => {
+    ), ee = (t) => (r) => {
       const a = r.chart.data.labels.length - 1;
-      let l = Ke;
-      return e.chartType === d.Bar && e.indicateIncompleteData && r.index === a ? l = Ue : e.chartType === d.StackedLine && (l = Ge), h(t, l);
-    }, O = i(() => A.value.map((t, r) => {
-      const a = J(t.id), l = b.value ? r !== 0 ? "-1" : "start" : void 0, m = e.indicateIncompleteData ? {
-        borderDash: (w) => {
-          if (w.p1DataIndex === w.chart.data.labels.length - 1)
+      let l = Ye;
+      return e.chartType === d.Bar && e.indicateIncompleteData && r.index === a ? l = Ke : e.chartType === d.StackedLine && (l = Ue), h(t, l);
+    }, N = i(() => k.value.map((t, r) => {
+      const a = _(t.id), l = x.value ? r !== 0 ? "-1" : "start" : void 0, T = e.indicateIncompleteData ? {
+        borderDash: (F) => {
+          if (F.p1DataIndex === F.chart.data.labels.length - 1)
             return Ne;
         }
-      } : void 0, k = Q(a);
+      } : void 0, S = ee(a);
       return {
         ...t,
         fill: l,
-        segment: m,
-        backgroundColor: k,
+        segment: T,
+        backgroundColor: S,
         borderColor: a,
         pointBackgroundColor: a,
         pointHoverBorderColor: a,
@@ -149,22 +153,22 @@ const rt = { class: "chart-plane-container" }, it = {
         // draw a bit outside the chart area
         icon: t.icon || null,
         iconType: t.iconType || "branded",
-        [M]: a
+        [U]: a
         // store base color for later use
       };
-    })), ee = i(
-      () => e.tooltipTotalType === _.Total ? "Total" : "Mean"
-    ), te = (t) => t.filter(
+    })), te = i(
+      () => e.tooltipTotalType === z.Total ? "Total" : "Mean"
+    ), ae = (t) => t.filter(
       (r) => !r.dataset.isTotal
-    ), P = i(() => ({
+    ), w = i(() => ({
       type: e.chartType == d.Bar || e.chartType === d.StackedBar ? "bar" : "line",
       // Chart Data
       data: {
-        datasets: O.value
+        datasets: N.value
       },
       // Chart Options
       options: {
-        parsing: j.value,
+        parsing: J.value,
         interaction: {
           intersect: !1,
           mode: f.value ? "point" : "index",
@@ -174,7 +178,7 @@ const rt = { class: "chart-plane-container" }, it = {
         plugins: {
           legend: { display: !1 },
           title: { display: !1 },
-          hoverVerticalLine: x.value,
+          hoverVerticalLine: A.value,
           // tooltip
           tooltip: {
             enabled: !1,
@@ -184,15 +188,15 @@ const rt = { class: "chart-plane-container" }, it = {
             },
             callbacks: {
               footer: (t) => {
-                const a = (e.tooltipExcludeTotalItem && t.length > 1 ? te(t) : t).map((m) => m.parsed.y || 0), l = e.tooltipTotalCalcFn(
+                const a = (e.tooltipExcludeTotalItem && t.length > 1 ? ae(t) : t).map((T) => T.parsed.y || 0), l = e.tooltipTotalCalcFn(
                   a,
                   e.tooltipTotalType
                 );
-                return [ee.value, String(l)];
+                return [te.value, String(l)];
               }
             },
             itemSort: (t, r) => {
-              if (e.tooltipOrder === G.YAxis) {
+              if (e.tooltipOrder === $.YAxis) {
                 const a = t.parsed.y || 0, l = r.parsed.y || 0;
                 return a === l ? 0 : a > l ? -1 : 1;
               }
@@ -204,7 +208,7 @@ const rt = { class: "chart-plane-container" }, it = {
         responsive: !0,
         maintainAspectRatio: !1,
         layout: {
-          padding: He
+          padding: we
         },
         // basic styles
         elements: {
@@ -213,12 +217,12 @@ const rt = { class: "chart-plane-container" }, it = {
             tension: 0
           },
           point: {
-            radius: B.value ? 3 : 1,
+            radius: H.value ? 3 : 1,
             hitRadius: 8,
             borderWidth: 0,
             hoverRadius: 4,
             hoverBorderWidth: 2,
-            pointHoverBackgroundColor: we
+            pointHoverBackgroundColor: v.value.pointBorderColor
           },
           bar: {
             borderRadius: 4
@@ -228,31 +232,31 @@ const rt = { class: "chart-plane-container" }, it = {
           // Horizontal Axis (X)
           x: {
             beginAtZero: !0,
-            offset: !x.value || B.value,
+            offset: !A.value || H.value,
             border: { display: !1 },
-            stacked: b.value,
+            stacked: x.value,
             // stack on top of each other
             // ticks
             ticks: {
-              color: Y,
-              font: K,
+              color: v.value.tickLabelColor,
+              font: G,
               padding: 4,
               maxRotation: 0,
               autoSkip: !e.truncateTickLabels,
               autoSkipPadding: 8,
               callback: function(t, r, a) {
-                const l = this.getLabelForValue(t), m = x.value && !f.value ? a.length - 1 : a.length, k = this.chart.scales?.x?.width / m - Ve;
-                return W({
+                const l = this.getLabelForValue(t), T = A.value && !f.value ? a.length - 1 : a.length, S = this.chart.scales?.x?.width / T - Oe;
+                return X({
                   label: l,
                   format: e.xAxisFormat,
-                  availableSpace: k,
+                  availableSpace: S,
                   truncate: e.truncateTickLabels
                 });
               }
             },
             // grid lines
             grid: {
-              color: U,
+              color: v.value.gridLineColor,
               drawOnChartArea: !1,
               drawTicks: !0,
               drawBorder: !1,
@@ -264,61 +268,61 @@ const rt = { class: "chart-plane-container" }, it = {
             beginAtZero: !0,
             border: { display: !1 },
             // hide left borderline
-            stacked: b.value,
+            stacked: x.value,
             // stack on top of each other
             // ticks
             ticks: {
-              color: Y,
-              font: K,
+              color: v.value.tickLabelColor,
+              font: G,
               count: e.tickCount + 1,
               padding: 8,
               min: 0,
-              callback: (t) => e.valuePrefix + Oe(t, e.yAxisFormat, { formatLowDigits: !0 }) + e.valueSuffix
+              callback: (t) => e.valuePrefix + Pe(t, e.yAxisFormat, { formatLowDigits: !0 }) + e.valueSuffix
             },
             // grid lines
             grid: {
-              color: U,
+              color: v.value.gridLineColor,
               drawOnChartArea: !0,
               drawTicks: !1
             }
           }
         }
       }
-    })), N = E(null), u = E(null), { position: H } = ze(
-      T,
-      N,
+    })), O = E(null), u = E(null), { position: V } = ze(
+      m,
+      O,
       u,
       e.tooltipRespectsTopEdge
-    ), ae = i(() => ({
-      left: `${H.value.left}px`,
-      top: `${H.value.top}px`,
+    ), oe = i(() => ({
+      left: `${V.value.left}px`,
+      top: `${V.value.top}px`,
       opacity: u.value?.opacity || 0
-    })), oe = i(
-      () => (e.compactHeader ? Me : Fe) + "px"
+    })), le = i(
+      () => (e.compactHeader ? Fe : Ve) + "px"
     );
-    v(
+    y(
       () => e.highlightedId,
       (t) => {
-        s && (tt(t) ? re() : le(t), s.update());
+        s && (at(t) ? ie() : re(t), s.update());
       }
     );
-    const le = (t) => {
+    const re = (t) => {
       (s?.data.datasets || []).forEach((a) => {
-        at(a);
-        const l = a[M];
+        ot(a);
+        const l = a[U];
         a.id === t ? e.chartType === d.StackedLine && (a.backgroundColor = h(
           l,
-          Ye
-        )) : (a.backgroundColor = h(l, y), a.borderColor = h(l, y), a.pointBackgroundColor = h(l, y), a.pointHoverBorderColor = h(l, y));
+          Me
+        )) : (a.backgroundColor = h(l, C), a.borderColor = h(l, C), a.pointBackgroundColor = h(l, C), a.pointHoverBorderColor = h(l, C));
       });
-    }, re = () => {
-      (s?.data.datasets || []).forEach(ot);
-    }, ie = lt(e.testId, $);
-    return (t, r) => (p(), S("div", rt, [
-      n(c) || o.keepSubheaderVisible ? (p(), S("div", it, [
-        ce(Ze, {
-          "chart-type": n(C),
-          "onUpdate:chart-type": r[0] || (r[0] = (a) => fe(C) ? C.value = a : null),
+    }, ie = () => {
+      (s?.data.datasets || []).forEach(lt);
+    }, ne = rt(e.testId, W);
+    return (t, r) => (p(), L("div", it, [
+      n(c) || o.keepSubheaderVisible ? (p(), L("div", nt, [
+        ce(je, {
+          "chart-type": n(g),
+          "onUpdate:chart-type": r[0] || (r[0] = (a) => fe(g) ? g.value = a : null),
           "type-switcher": n(c) ? o.typeSwitcher : !1,
           header: n(c) ? o.header : null,
           subheader: o.subheader,
@@ -339,21 +343,21 @@ const rt = { class: "chart-plane-container" }, it = {
             key: "0"
           } : void 0
         ]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "header-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction", "note-text", "test-id"])
-      ])) : L("", !0),
-      n(c) ? (p(), S("section", nt, [
-        R("div", st, [
-          R("canvas", {
+      ])) : D("", !0),
+      n(c) ? (p(), L("section", st, [
+        I("div", dt, [
+          I("canvas", {
             ref_key: "chartRef",
-            ref: T,
+            ref: m,
             class: "chart__canvas"
           }, null, 512),
-          R("div", {
+          I("div", {
             ref_key: "tooltipRef",
-            ref: N,
+            ref: O,
             class: "chart__tooltip",
-            style: Te(n(ae))
+            style: ve(n(oe))
           }, [
-            u.value ? (p(), I(We, {
+            u.value ? (p(), R(Xe, {
               key: 0,
               "totals-chart": n(f),
               title: String(u.value.title),
@@ -366,13 +370,13 @@ const rt = { class: "chart-plane-container" }, it = {
               "value-suffix": o.valueSuffix,
               "value-prefix": o.valuePrefix,
               "test-id": o.testId
-            }, null, 8, ["totals-chart", "title", "data-points", "x-axis-format", "y-axis-format", "x-axis-date-interval", "total-label", "total-value", "value-suffix", "value-prefix", "test-id"])) : L("", !0)
+            }, null, 8, ["totals-chart", "title", "data-points", "x-axis-format", "y-axis-format", "x-axis-date-interval", "total-label", "total-value", "value-suffix", "value-prefix", "test-id"])) : D("", !0)
           ], 4)
         ])
-      ])) : o.loading ? (p(), I(Je, ve({
+      ])) : o.loading ? (p(), R(_e, Te({
         key: 2,
         class: "chart-loading"
-      }, n(ie)[n($).LOADER]), null, 16)) : n(D) ? (p(), I(n(qe), {
+      }, n(ne)[n(W).LOADER]), null, 16)) : n(B) ? (p(), R(n(Qe), {
         key: 3,
         class: "chart-empty",
         variant: null,
@@ -380,10 +384,10 @@ const rt = { class: "chart-plane-container" }, it = {
         subtitle: o.noDataSubtitle,
         "icon-name": o.noDataIcon,
         "test-id": o.testId
-      }, null, 8, ["title", "subtitle", "icon-name", "test-id"])) : L("", !0)
+      }, null, 8, ["title", "subtitle", "icon-name", "test-id"])) : D("", !0)
     ]));
   }
 });
 export {
-  Rt as default
+  Bt as default
 };

package/components/chart/composables/useChartHeight.d.ts

@@ -1,5 +1,5 @@
 import { UseChartHeightArgs } from '@/components/chart/types';
-export declare const useChartHeight: ({ chartPlanesCount, useFullHeight, bottomSpacing, }: UseChartHeightArgs) => {
+export declare const useChartHeight: ({ chartPlanesCount, useFullHeight, bottomSpacing, customHeight, }: UseChartHeightArgs) => {
     containerProps: import("vue").ComputedRef<Record<string, unknown>>;
     eachPlaneHeight: import("vue").ComputedRef<string>;
 };

package/components/chart/composables/useChartHeight.js

@@ -1,24 +1,25 @@
-import { ref as g, computed as o } from "vue";
-import { useElementBounding as m, useWindowScroll as f } from "@vueuse/core";
-import { useFullPageHeight as p } from "../../../composables/useFullPageHeight.js";
-import { DEFAULT_CHART_PLANE_HEIGHT as E, HEADER_HEIGHT as v, MIN_PLANE_HEIGHT as r } from "../consts.js";
-const T = ({
+import { ref as f, computed as r } from "vue";
+import { useElementBounding as m, useWindowScroll as p } from "@vueuse/core";
+import { useFullPageHeight as E } from "../../../composables/useFullPageHeight.js";
+import { DEFAULT_CHART_PLANE_HEIGHT as v, HEADER_HEIGHT as d, MIN_PLANE_HEIGHT as n } from "../consts.js";
+const I = ({
   chartPlanesCount: e,
-  useFullHeight: n,
-  bottomSpacing: i = 50
+  useFullHeight: i,
+  bottomSpacing: c = 50,
+  customHeight: o
 }) => {
-  const t = g(), { height: c } = m(t), { cssHeightValue: l } = p({
+  const t = f(), { height: l } = m(t), { cssHeightValue: u } = E({
     elem: t,
-    bottomSpacing: i
-  }), { y: s } = f(), u = o(() => n && !s.value ? l.value : E + v + "px"), h = o(() => ({
+    bottomSpacing: c
+  }), { y: s } = p(), h = r(() => o || (i && !s.value ? u.value : v + d + "px")), a = r(() => ({
     ref: t,
-    style: { height: u.value }
-  })), a = o(() => e.value === 1 ? "100%" : c.value / e.value < r ? `${r}px` : 100 / e.value + "%");
+    style: { height: h.value }
+  })), H = r(() => e.value === 1 ? "100%" : l.value / e.value < n ? `${n}px` : 100 / e.value + "%");
   return {
-    containerProps: h,
-    eachPlaneHeight: a
+    containerProps: a,
+    eachPlaneHeight: H
   };
 };
 export {
-  T as useChartHeight
+  I as useChartHeight
 };

package/components/chart/composables/useChartThemeColors.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from 'vue';
+export declare const useChartThemeColors: (elRef: Ref<HTMLElement | null>) => import("vue").ComputedRef<{
+    gridLineColor: string;
+    tickLabelColor: string;
+    pointBorderColor: string;
+}>;