@ironsource/shared-ui 2.1.12-rc.12 → 2.1.12-rc.14

package/components/chart/Chart.vue.d.ts

@@ -1,4 +1,5 @@
 import { ChartDataSet, ChartParsingConfig, ChartType, ValueFormat } from './types';
+import { TotalType } from '@/utils/totals';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     dataSets: ChartDataSet[];
     visibleIds: unknown[];
@@ -10,10 +11,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     loading?: boolean;
     withAnimation?: boolean;
     totalsChart?: boolean;
+    tooltipTotalType?: TotalType;
+    tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
     header?: string;
     subheader?: string;
+    subheaderTooltip?: {
+        header?: string;
+        text?: string;
+    };
     trendValue?: string | number;
     trendDirection?: "up" | "down";
+    trendTooltip?: {
+        header?: string;
+        rangeCurrent?: string;
+        rangePrevious?: string;
+    };
     noDataIcon?: string;
     noDataTitle?: string;
     noDataSubtitle?: string;
@@ -21,6 +33,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minVisible?: number;
     maxVisible?: number;
     maxLimitTooltipText?: string;
+    sortSelected?: unknown;
+    sortOptions?: unknown[];
+    sortOptionNameKey?: string;
     fullHeight?: boolean;
     withSettingsHeader?: boolean;
     extraCharts?: Record<string, unknown>[];
@@ -35,10 +50,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     loading: boolean;
     withAnimation: boolean;
     totalsChart: boolean;
+    tooltipTotalType: TotalType;
+    tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
     header: string;
     subheader: string;
+    subheaderTooltip: any;
     trendValue: any;
     trendDirection: string;
+    trendTooltip: any;
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
@@ -46,12 +65,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minVisible: number;
     maxVisible: number;
     maxLimitTooltipText: string;
+    sortSelected: any;
+    sortOptions: () => any[];
+    sortOptionNameKey: string;
     fullHeight: boolean;
     withSettingsHeader: boolean;
     extraCharts: () => any[];
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:chartType": (chartType: ChartType) => void;
     "update:visibleIds": (visibleIds: unknown[]) => void;
+    "update:sortSelected": (sortOption: unknown) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     dataSets: ChartDataSet[];
     visibleIds: unknown[];
@@ -63,10 +86,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     loading?: boolean;
     withAnimation?: boolean;
     totalsChart?: boolean;
+    tooltipTotalType?: TotalType;
+    tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
     header?: string;
     subheader?: string;
+    subheaderTooltip?: {
+        header?: string;
+        text?: string;
+    };
     trendValue?: string | number;
     trendDirection?: "up" | "down";
+    trendTooltip?: {
+        header?: string;
+        rangeCurrent?: string;
+        rangePrevious?: string;
+    };
     noDataIcon?: string;
     noDataTitle?: string;
     noDataSubtitle?: string;
@@ -74,6 +108,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minVisible?: number;
     maxVisible?: number;
     maxLimitTooltipText?: string;
+    sortSelected?: unknown;
+    sortOptions?: unknown[];
+    sortOptionNameKey?: string;
     fullHeight?: boolean;
     withSettingsHeader?: boolean;
     extraCharts?: Record<string, unknown>[];
@@ -88,10 +125,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     loading: boolean;
     withAnimation: boolean;
     totalsChart: boolean;
+    tooltipTotalType: TotalType;
+    tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
     header: string;
     subheader: string;
+    subheaderTooltip: any;
     trendValue: any;
     trendDirection: string;
+    trendTooltip: any;
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
@@ -99,11 +140,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minVisible: number;
     maxVisible: number;
     maxLimitTooltipText: string;
+    sortSelected: any;
+    sortOptions: () => any[];
+    sortOptionNameKey: string;
     fullHeight: boolean;
     withSettingsHeader: boolean;
     extraCharts: () => any[];
 }>>> & {
     "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
+    "onUpdate:sortSelected"?: (sortOption: unknown) => any;
     "onUpdate:chartType"?: (chartType: ChartType) => any;
 }, {
     header: string;
@@ -112,25 +157,33 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minVisible: number;
     maxVisible: number;
     maxLimitTooltipText: string;
+    sortSelected: any;
+    sortOptions: unknown[];
+    sortOptionNameKey: string;
     chartType: ChartType;
     hideLegend: boolean;
     xAxisFormat: ValueFormat;
     yAxisFormat: ValueFormat;
     parsing: ChartParsingConfig;
     dataSets: ChartDataSet[];
+    trendTooltip: any;
     subheader: string;
+    subheaderTooltip: any;
     trendValue: string | number;
     trendDirection: "up" | "down";
     tickCount: number;
-    withAnimation: boolean;
-    totalsChart: boolean;
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
+    withAnimation: boolean;
+    tooltipTotalType: TotalType;
+    tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
+    totalsChart: boolean;
     fullHeight: boolean;
     withSettingsHeader: boolean;
     extraCharts: Record<string, unknown>[];
 }>, {
+    "before-chart-type"?(_: {}): any;
     metric?(_: {}): any;
     breakdowns?(_: {}): any;
     "subheader-tooltip"?(_: {}): any;

package/components/chart/Chart.vue.js

@@ -1,7 +1,7 @@
-import o from "./Chart.vue2.js";
-/* empty css            */import _ from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../Chart.vue_vue_type_style_index_0_scoped_78d3f5a8_lang.css"; //*');
-const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-78d3f5a8"]]);
+import e from "./Chart.vue2.js";
+/* empty css            */import o from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../Chart.vue_vue_type_style_index_0_scoped_de950ffe_lang.css"; //*');
+const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-de950ffe"]]);
 export {
-  a as default
+  p as default
 };

package/components/chart/Chart.vue2.js

@@ -1,125 +1,152 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_78d3f5a8_lang.css"; import { defineComponent as V, computed as n, openBlock as s, createElementBlock as d, Fragment as C, createBlock as x, unref as a, isRef as v, withCtx as u, renderSlot as c, createCommentVNode as T, createElementVNode as I, mergeProps as h, normalizeClass as H, createVNode as S, renderList as E } from "vue";
-import { useVModel as U } from "@vueuse/core";
-import N from "./ChartLegend.vue.js";
-import P from "./SettingsHeader.vue.js";
-import D from "./ChartPlane.vue.js";
-import { useColorsMap as M } from "./composables/useColorsMap.js";
-import { DEFAULT_TICK_COUNT as $, DEFAULT_MIN_VISIBLE as z, DEFAULT_MAX_VISIBLE as K } from "./consts.js";
-import { ChartType as O } from "./types.js";
-import { useChartHeight as R } from "./composables/useChartHeight.js";
-const X = {
+ import "../../Chart.vue_vue_type_style_index_0_scoped_de950ffe_lang.css"; import { defineComponent as E, computed as n, openBlock as s, createElementBlock as m, Fragment as S, createBlock as x, unref as a, isRef as f, withCtx as d, renderSlot as u, createCommentVNode as I, createElementVNode as D, mergeProps as y, normalizeClass as N, createVNode as F, createSlots as U, renderList as M } from "vue";
+import { useVModel as L } from "@vueuse/core";
+import P from "./ChartLegend.vue.js";
+import O from "./SettingsHeader.vue.js";
+import k from "./ChartPlane.vue.js";
+import { useColorsMap as $ } from "./composables/useColorsMap.js";
+import { DEFAULT_TICK_COUNT as K, DEFAULT_MIN_VISIBLE as z, DEFAULT_MAX_VISIBLE as R } from "./consts.js";
+import { ChartType as X } from "./types.js";
+import { useChartHeight as j } from "./composables/useChartHeight.js";
+import { TotalType as q, calculateTotal as G } from "../../utils/totals.js";
+const J = {
   key: 0,
   class: "chart-sidebar"
-}, ee = /* @__PURE__ */ V({
+}, it = /* @__PURE__ */ E({
   __name: "Chart",
   props: {
     dataSets: { default: () => [] },
     visibleIds: { default: () => [] },
-    chartType: { default: O.Line },
+    chartType: { default: X.Line },
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
-    tickCount: { default: $ },
+    tickCount: { default: K },
     loading: { type: Boolean, default: !1 },
     withAnimation: { type: Boolean, default: !0 },
     totalsChart: { type: Boolean, default: !1 },
+    tooltipTotalType: { default: q.Total },
+    tooltipTotalCalcFn: { type: Function, default: G },
     header: { default: "" },
     subheader: { default: "" },
+    subheaderTooltip: { default: null },
     trendValue: { default: null },
     trendDirection: { default: "up" },
+    trendTooltip: { default: null },
     noDataIcon: { default: "file-search" },
     noDataTitle: { default: "No data to display" },
     noDataSubtitle: { default: "Search again with different filters" },
     hideLegend: { type: Boolean, default: !1 },
     minVisible: { default: z },
-    maxVisible: { default: K },
+    maxVisible: { default: R },
     maxLimitTooltipText: { default: "" },
+    sortSelected: { default: null },
+    sortOptions: { default: () => [] },
+    sortOptionNameKey: { default: "" },
     fullHeight: { type: Boolean, default: !1 },
     withSettingsHeader: { type: Boolean, default: !0 },
     extraCharts: { default: () => [] }
   },
-  emits: ["update:chartType", "update:visibleIds"],
-  setup(i, { emit: p }) {
-    const e = i, l = U(e, "chartType", p), m = n(() => ({
-      dataSets: e.dataSets,
-      visibleIds: e.visibleIds,
-      parsing: e.parsing,
-      xAxisFormat: e.xAxisFormat,
-      yAxisFormat: e.yAxisFormat,
-      tickCount: e.tickCount,
-      header: e.header,
-      subheader: e.subheader,
-      loading: e.loading,
-      noDataIcon: e.noDataIcon,
-      noDataTitle: e.noDataTitle,
-      noDataSubtitle: e.noDataSubtitle,
-      withAnimation: e.withAnimation,
-      typeSwitcher: !e.withSettingsHeader,
-      height: F.value,
-      compactHeader: y.value > 1,
-      trendValue: e.trendValue,
-      trendDirection: e.trendDirection,
-      totalsChart: e.totalsChart
-    })), L = n(() => e.dataSets), f = n(() => e.visibleIds), g = n(() => e.extraCharts.length), y = n(() => 1 + g.value), w = (t) => t === g.value - 1, { colorsMap: A } = M({ dataSets: L, visibleIds: f }), k = n(() => e.dataSets.map((t) => ({
-      id: t.id,
-      label: t.label,
-      caption: t.caption || null,
-      color: A.value[t.id] || null,
-      icon: t.icon || null,
-      iconType: t.iconType || "branded"
-    }))), { containerProps: B, eachPlaneHeight: F } = R({
-      chartPlanesCount: y,
-      useFullHeight: e.fullHeight
+  emits: ["update:chartType", "update:visibleIds", "update:sortSelected"],
+  setup(o, { emit: p }) {
+    const t = o, r = L(t, "chartType", p), c = L(t, "sortSelected", p), T = n(() => ({
+      dataSets: t.dataSets,
+      visibleIds: t.visibleIds,
+      parsing: t.parsing,
+      xAxisFormat: t.xAxisFormat,
+      yAxisFormat: t.yAxisFormat,
+      tickCount: t.tickCount,
+      header: t.header,
+      subheader: t.subheader,
+      loading: t.loading,
+      noDataIcon: t.noDataIcon,
+      noDataTitle: t.noDataTitle,
+      noDataSubtitle: t.noDataSubtitle,
+      withAnimation: t.withAnimation,
+      typeSwitcher: !t.withSettingsHeader,
+      height: H.value,
+      compactHeader: C.value > 1,
+      trendValue: t.trendValue,
+      trendDirection: t.trendDirection,
+      trendTooltip: t.trendTooltip,
+      totalsChart: t.totalsChart,
+      subheaderTooltip: t.subheaderTooltip,
+      colorsMap: h.value,
+      tooltipTotalType: t.tooltipTotalType,
+      tooltipTotalCalcFn: t.tooltipTotalCalcFn
+    })), w = n(() => t.dataSets), b = n(() => t.visibleIds), g = n(() => t.extraCharts.length), C = n(() => 1 + g.value), A = (e) => e === g.value - 1, { colorsMap: h } = $({
+      dataSets: w,
+      visibleIds: b
+    }), B = n(() => t.dataSets.map((e) => ({
+      id: e.id,
+      label: e.label,
+      caption: e.caption || null,
+      color: h.value[e.id] || null,
+      icon: e.icon || null,
+      iconType: e.iconType || "branded"
+    }))), { containerProps: V, eachPlaneHeight: H } = j({
+      chartPlanesCount: C,
+      useFullHeight: t.fullHeight
     });
-    return (t, r) => (s(), d(C, null, [
-      i.withSettingsHeader ? (s(), x(P, {
+    return (e, i) => (s(), m(S, null, [
+      o.withSettingsHeader ? (s(), x(O, {
         key: 0,
-        "chart-type": a(l),
-        "onUpdate:chart-type": r[0] || (r[0] = (o) => v(l) ? l.value = o : null),
-        "hide-legend": i.hideLegend
+        "chart-type": a(r),
+        "onUpdate:chart-type": i[0] || (i[0] = (l) => f(r) ? r.value = l : null),
+        "hide-legend": o.hideLegend
       }, {
-        metric: u(() => [
-          c(t.$slots, "metric", {}, void 0, !0)
+        "before-chart-type": d(() => [
+          u(e.$slots, "before-chart-type", {}, void 0, !0)
         ]),
-        breakdowns: u(() => [
-          c(t.$slots, "breakdowns", {}, void 0, !0)
+        metric: d(() => [
+          u(e.$slots, "metric", {}, void 0, !0)
+        ]),
+        breakdowns: d(() => [
+          u(e.$slots, "breakdowns", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["chart-type", "hide-legend"])) : T("", !0),
-      I("div", h({ class: "chart-container" }, a(B)), [
-        I("section", {
-          class: H(["chart-planes", [{ "with-legend": !i.hideLegend }]])
+      }, 8, ["chart-type", "hide-legend"])) : I("", !0),
+      D("div", y({ class: "chart-container" }, a(V)), [
+        D("section", {
+          class: N(["chart-planes", [{ "with-legend": !o.hideLegend }]])
         }, [
-          S(D, h({
-            "chart-type": a(l),
-            "onUpdate:chart-type": r[1] || (r[1] = (o) => v(l) ? l.value = o : null)
-          }, a(m)), {
-            "subheader-tooltip": u(() => [
-              c(t.$slots, "subheader-tooltip", {}, void 0, !0)
-            ]),
-            _: 3
-          }, 16, ["chart-type"]),
-          (s(!0), d(C, null, E(i.extraCharts, (o, b) => (s(), x(D, h({
-            key: b,
+          F(k, y({
+            "chart-type": a(r),
+            "onUpdate:chart-type": i[1] || (i[1] = (l) => f(r) ? r.value = l : null)
+          }, a(T)), U({ _: 2 }, [
+            e.$slots["subheader-tooltip"] ? {
+              name: "subheader-tooltip",
+              fn: d(() => [
+                u(e.$slots, "subheader-tooltip", {}, void 0, !0)
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1040, ["chart-type"]),
+          (s(!0), m(S, null, M(o.extraCharts, (l, v) => (s(), x(k, y({
+            key: v,
             class: "extra-chart-plane"
-          }, { ...a(m), ...o }, {
-            "chart-type": a(l),
+          }, { ...a(T), ...l }, {
+            "chart-type": a(r),
+            "colors-map": a(h),
             "type-switcher": !1,
-            "tooltip-respects-top-edge": !w(b)
-          }), null, 16, ["chart-type", "tooltip-respects-top-edge"]))), 128))
+            "tooltip-respects-top-edge": !A(v)
+          }), null, 16, ["chart-type", "colors-map", "tooltip-respects-top-edge"]))), 128))
         ], 2),
-        i.hideLegend ? T("", !0) : (s(), d("section", X, [
-          S(N, {
-            items: a(k),
-            "visible-ids": a(f),
-            "max-limit-tooltip-text": i.maxLimitTooltipText,
-            "onUpdate:visibleIds": r[2] || (r[2] = (o) => p("update:visibleIds", o))
-          }, null, 8, ["items", "visible-ids", "max-limit-tooltip-text"])
+        o.hideLegend ? I("", !0) : (s(), m("section", J, [
+          F(P, {
+            "sort-selected": a(c),
+            "onUpdate:sort-selected": i[2] || (i[2] = (l) => f(c) ? c.value = l : null),
+            items: a(B),
+            "visible-ids": a(b),
+            "max-limit-tooltip-text": o.maxLimitTooltipText,
+            "sort-options": o.sortOptions,
+            "sort-option-name-key": o.sortOptionNameKey,
+            "onUpdate:visibleIds": i[3] || (i[3] = (l) => p("update:visibleIds", l))
+          }, null, 8, ["sort-selected", "items", "visible-ids", "max-limit-tooltip-text", "sort-options", "sort-option-name-key"])
         ]))
       ], 16)
     ], 64));
   }
 });
 export {
-  ee as default
+  it as default
 };

package/components/chart/ChartHeader.vue.d.ts

@@ -4,6 +4,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     typeSwitcher: boolean;
     header?: string;
     subheader?: string;
+    subheaderTooltip?: {
+        header?: string;
+        text?: string;
+    };
+    trendTooltip?: {
+        header?: string;
+        rangeCurrent?: string;
+        rangePrevious?: string;
+    };
     compact: boolean;
     trendValue?: string | number;
     trendDirection?: "up" | "down";
@@ -12,6 +21,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     typeSwitcher: boolean;
     header: string;
     subheader: string;
+    subheaderTooltip: any;
+    trendTooltip: any;
     compact: boolean;
     trendValue: any;
     trendDirection: string;
@@ -22,6 +33,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     typeSwitcher: boolean;
     header?: string;
     subheader?: string;
+    subheaderTooltip?: {
+        header?: string;
+        text?: string;
+    };
+    trendTooltip?: {
+        header?: string;
+        rangeCurrent?: string;
+        rangePrevious?: string;
+    };
     compact: boolean;
     trendValue?: string | number;
     trendDirection?: "up" | "down";
@@ -30,6 +50,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     typeSwitcher: boolean;
     header: string;
     subheader: string;
+    subheaderTooltip: any;
+    trendTooltip: any;
     compact: boolean;
     trendValue: any;
     trendDirection: string;
@@ -39,8 +61,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     header: string;
     compact: boolean;
     chartType: ChartType;
+    trendTooltip: any;
     typeSwitcher: boolean;
     subheader: string;
+    subheaderTooltip: any;
     trendValue: string | number;
     trendDirection: "up" | "down";
 }>, {

package/components/chart/ChartHeader.vue.js

@@ -1,7 +1,7 @@
 import e from "./ChartHeader.vue2.js";
 /* empty css                  */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartHeader.vue_vue_type_style_index_0_scoped_32001725_lang.css"; //*');
-const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-32001725"]]);
+// import "../../ChartHeader.vue_vue_type_style_index_0_scoped_1ff0e54f_lang.css"; //*');
+const f = /* @__PURE__ */ o(e, [["__scopeId", "data-v-1ff0e54f"]]);
 export {
-  s as default
+  f as default
 };

package/components/chart/ChartHeader.vue2.js

@@ -1,53 +1,81 @@
- import "../../ChartHeader.vue_vue_type_style_index_0_scoped_32001725_lang.css"; import { defineComponent as b, computed as k, openBlock as r, createElementBlock as C, normalizeClass as w, createElementVNode as i, createVNode as n, unref as a, withCtx as d, renderSlot as B, createTextVNode as m, toDisplayString as f, createBlock as c, createCommentVNode as u, isRef as S } from "vue";
-import p from "../typography/v4/Typography.vue.js";
-import g from "../switch/v4/SwitchV4.vue.js";
-import { ChartType as l } from "./types.js";
-import x from "../tooltip/v4/TooltipV4.vue.js";
-import y from "./ChartHeaderTrend.vue.js";
-const D = { class: "header-texts" }, N = { class: "header-row" }, L = { class: "header-row" }, U = /* @__PURE__ */ b({
+ import "../../ChartHeader.vue_vue_type_style_index_0_scoped_1ff0e54f_lang.css"; import { defineComponent as B, useSlots as g, computed as m, openBlock as r, createElementBlock as N, normalizeClass as D, createElementVNode as n, createVNode as f, unref as t, withCtx as o, renderSlot as L, createBlock as d, createTextVNode as u, toDisplayString as c, createCommentVNode as i, normalizeProps as v, mergeProps as V, isRef as P } from "vue";
+import s from "../typography/v4/Typography.vue.js";
+import z from "../switch/v4/SwitchV4.vue.js";
+import { ChartType as h } from "./types.js";
+import E from "../tooltip/v4/TooltipV4.vue.js";
+import k from "./ChartHeaderTrend.vue.js";
+const H = { class: "header-texts" }, O = { class: "header-row" }, R = { class: "subheader-tooltip" }, U = { class: "header-row" }, I = /* @__PURE__ */ B({
   __name: "ChartHeader",
   props: {
-    chartType: { default: l.Line },
+    chartType: { default: h.Line },
     typeSwitcher: { type: Boolean, default: !0 },
     header: { default: "" },
     subheader: { default: "" },
+    subheaderTooltip: { default: null },
+    trendTooltip: { default: null },
     compact: { type: Boolean, default: !1 },
     trendValue: { default: null },
     trendDirection: { default: "up" }
   },
   emits: ["update:chartType"],
-  setup(e, { emit: v }) {
-    const V = e, h = [
-      { id: l.Line, icon: "chart-line-up" },
-      { id: l.Bar, icon: "chart-bar" },
-      { id: l.StackedLine, icon: "chart-line" }
-    ], o = k({
+  setup(e, { emit: x }) {
+    const a = e, S = g(), T = [
+      { id: h.Line, icon: "chart-line-up" },
+      { id: h.Bar, icon: "chart-bar" },
+      { id: h.StackedLine, icon: "chart-line" }
+    ], p = m({
       get() {
-        return h.find(({ id: t }) => t === V.chartType);
+        return T.find(({ id: l }) => l === a.chartType);
       },
-      set(t) {
-        v("update:chartType", t.id);
+      set(l) {
+        x("update:chartType", l.id);
       }
-    });
-    return (t, s) => (r(), C("div", {
-      class: w(["chart-header", { "chart-header--compact": e.compact }])
+    }), C = m(() => S["subheader-tooltip"] || a.subheaderTooltip?.text || a.subheaderTooltip?.header), y = m(() => ({
+      value: a.trendValue,
+      direction: a.trendDirection,
+      trendTooltip: a.trendTooltip
+    }));
+    return (l, b) => (r(), N("div", {
+      class: D(["chart-header", { "chart-header--compact": e.compact }])
     }, [
-      i("div", D, [
-        i("div", N, [
-          n(a(x), {
+      n("div", H, [
+        n("div", O, [
+          f(t(E), {
             placement: "right",
-            disabled: !t.$slots["subheader-tooltip"]
+            disabled: !t(C)
           }, {
-            tooltip: d(() => [
-              B(t.$slots, "subheader-tooltip", {}, void 0, !0)
+            tooltip: o(() => [
+              L(l.$slots, "subheader-tooltip", {}, () => [
+                n("div", R, [
+                  e.subheaderTooltip?.header ? (r(), d(t(s), {
+                    key: 0,
+                    variant: "h5"
+                  }, {
+                    default: o(() => [
+                      u(c(e.subheaderTooltip.header), 1)
+                    ]),
+                    _: 1
+                  })) : i("", !0),
+                  e.subheaderTooltip?.text ? (r(), d(t(s), {
+                    key: 1,
+                    variant: "body2",
+                    class: "subheader-tooltip__text"
+                  }, {
+                    default: o(() => [
+                      u(c(e.subheaderTooltip.text), 1)
+                    ]),
+                    _: 1
+                  })) : i("", !0)
+                ])
+              ], !0)
             ]),
-            default: d(() => [
-              n(a(p), {
+            default: o(() => [
+              f(t(s), {
                 class: "subheader",
                 variant: "h5"
               }, {
-                default: d(() => [
-                  m(f(e.subheader + (e.compact ? ":" : "")), 1)
+                default: o(() => [
+                  u(c(e.subheader + (e.compact ? ":" : "")), 1)
                 ]),
                 _: 1
               })
@@ -55,37 +83,29 @@ const D = { class: "header-texts" }, N = { class: "header-row" }, L = { class: "
             _: 3
           }, 8, ["disabled"])
         ]),
-        i("div", L, [
-          n(a(p), {
+        n("div", U, [
+          f(t(s), {
             class: "header-text",
             variant: e.compact ? "h5" : "chart2"
           }, {
-            default: d(() => [
-              m(f(e.header), 1)
+            default: o(() => [
+              u(c(e.header), 1)
             ]),
             _: 1
           }, 8, ["variant"]),
-          !e.compact && e.trendValue !== null ? (r(), c(y, {
-            key: 0,
-            value: e.trendValue,
-            direction: e.trendDirection
-          }, null, 8, ["value", "direction"])) : u("", !0)
+          !e.compact && e.trendValue !== null ? (r(), d(k, v(V({ key: 0 }, t(y))), null, 16)) : i("", !0)
         ]),
-        e.compact && e.trendValue !== null ? (r(), c(y, {
-          key: 0,
-          value: e.trendValue,
-          direction: e.trendDirection
-        }, null, 8, ["value", "direction"])) : u("", !0)
+        e.compact && e.trendValue !== null ? (r(), d(k, v(V({ key: 0 }, t(y))), null, 16)) : i("", !0)
       ]),
-      e.typeSwitcher ? (r(), c(a(g), {
+      e.typeSwitcher ? (r(), d(t(z), {
         key: 0,
-        modelValue: a(o),
-        "onUpdate:modelValue": s[0] || (s[0] = (T) => S(o) ? o.value = T : null),
-        options: h
-      }, null, 8, ["modelValue"])) : u("", !0)
+        modelValue: t(p),
+        "onUpdate:modelValue": b[0] || (b[0] = (w) => P(p) ? p.value = w : null),
+        options: T
+      }, null, 8, ["modelValue"])) : i("", !0)
     ], 2));
   }
 });
 export {
-  U as default
+  I as default
 };