@ironsource/shared-ui 2.2.0-test.2 → 2.2.0-test.4

package/components/chart/Chart.vue2.js

@@ -1,4 +1,4 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_060d02be_lang.css"; import { defineComponent as P, ref as U, computed as n, openBlock as d, 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_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 { useVModel as B } from "@vueuse/core";
 import K from "./ChartLegend.vue.js";
 import X from "./SettingsHeader.vue.js";
@@ -30,6 +30,7 @@ const at = {
     withAnimation: { type: Boolean, default: !0 },
     totalsChart: { type: Boolean, default: !1 },
     tooltipTotalType: { default: _.Total },
+    headerTooltip: { default: null },
     tooltipTotalCalcFn: { type: Function, default: tt },
     tooltipOrder: { default: Q.Legend },
     valueSuffix: { default: "" },
@@ -63,7 +64,7 @@ const at = {
   },
   emits: ["update:chartType", "update:visibleIds", "update:sortSelected"],
   setup(e, { emit: c }) {
-    const t = e, r = B(t, "chartType", c), f = B(t, "sortSelected", c), h = U(null), v = n(() => ({
+    const t = e, r = B(t, "chartType", c), f = B(t, "sortSelected", c), h = U(null), v = d(() => ({
       dataSets: t.dataSets,
       visibleIds: t.visibleIds,
       parsing: t.parsing,
@@ -99,12 +100,13 @@ const at = {
       valuePrefix: t.valuePrefix,
       indicateIncompleteData: t.indicateIncompleteData,
       tooltipExcludeTotalItem: t.tooltipExcludeTotalItem,
+      headerTooltip: t.headerTooltip,
       testId: t.testId
-    })), E = n(() => t.dataSets), I = n(() => t.visibleIds), x = n(() => t.extraCharts.length), C = n(() => 1 + x.value), F = (a) => a === x.value - 1, { colorsMap: m } = z({
+    })), E = d(() => t.dataSets), I = d(() => t.visibleIds), x = d(() => t.extraCharts.length), C = d(() => 1 + x.value), F = (a) => a === x.value - 1, { colorsMap: m } = z({
       dataSets: E,
       visibleIds: I,
       variant: t.colorVariant
-    }), w = n(() => t.dataSets.map((a) => ({
+    }), w = d(() => t.dataSets.map((a) => ({
       id: a.id,
       label: a.label,
       caption: a.caption || null,
@@ -116,8 +118,8 @@ const at = {
       useFullHeight: t.fullHeight,
       bottomSpacing: t.fullHeightBottomSpacing
     }), O = et(t.testId, p);
-    return (a, i) => (d(), b(S, null, [
-      e.withSettingsHeader ? (d(), D(X, {
+    return (a, i) => (n(), b(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),
@@ -154,7 +156,7 @@ const at = {
               key: "0"
             } : void 0
           ]), 1040, ["chart-type"]),
-          (d(!0), b(S, null, R(e.extraCharts, (o, T) => (d(), D(V, g({
+          (n(!0), b(S, null, R(e.extraCharts, (o, T) => (n(), D(V, g({
             key: T,
             class: "extra-chart-plane"
           }, { ...l(v), ...o }, {
@@ -165,7 +167,7 @@ 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) : (d(), b("section", at, [
+        e.hideLegend ? A("", !0) : (n(), b("section", at, [
           k(K, {
             "sort-selected": l(f),
             "onUpdate:sort-selected": i[2] || (i[2] = (o) => y(f) ? f.value = o : null),

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

@@ -3,6 +3,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     chartType: ChartType;
     typeSwitcher: boolean;
     header?: string;
+    headerTooltip?: string;
     subheader?: string;
     subheaderTooltip?: {
         header?: string;
@@ -24,6 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     header: string;
     subheader: string;
     subheaderTooltip: any;
+    headerTooltip: any;
     trendTooltip: any;
     compact: boolean;
     trendValue: any;
@@ -36,6 +38,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     chartType: ChartType;
     typeSwitcher: boolean;
     header?: string;
+    headerTooltip?: string;
     subheader?: string;
     subheaderTooltip?: {
         header?: string;
@@ -57,6 +60,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     header: string;
     subheader: string;
     subheaderTooltip: any;
+    headerTooltip: any;
     trendTooltip: any;
     compact: boolean;
     trendValue: any;
@@ -74,6 +78,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     subheader: string;
     subheaderTooltip: any;
     typeSwitcher: boolean;
+    headerTooltip: string;
     trendValue: string | number;
     trendDirection: TrendDirection;
     noteText: string;

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_d90c583e_lang.css"; //*');
-const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-d90c583e"]]);
+// import "../../ChartHeader.vue_vue_type_style_index_0_scoped_9a603520_lang.css"; //*');
+const r = /* @__PURE__ */ o(e, [["__scopeId", "data-v-9a603520"]]);
 export {
-  s as default
+  r as default
 };

package/components/chart/ChartHeader.vue2.js

@@ -1,93 +1,117 @@
- import "../../ChartHeader.vue_vue_type_style_index_0_scoped_d90c583e_lang.css"; import { defineComponent as I, computed as p, openBlock as o, createElementBlock as S, mergeProps as u, unref as t, createElementVNode as c, createVNode as T, createSlots as w, withCtx as y, renderSlot as x, createTextVNode as B, toDisplayString as E, createBlock as d, normalizeProps as b, createCommentVNode as l, isRef as D } from "vue";
-import H from "../typography/v4/Typography.vue.js";
+ import "../../ChartHeader.vue_vue_type_style_index_0_scoped_9a603520_lang.css"; import { defineComponent as g, computed as c, openBlock as r, createElementBlock as B, mergeProps as h, unref as t, createElementVNode as n, createVNode as m, createSlots as E, withCtx as d, renderSlot as H, createBlock as l, createTextVNode as b, toDisplayString as v, createCommentVNode as i, normalizeProps as V, isRef as D } from "vue";
+import k from "../typography/v4/Typography.vue.js";
 import N from "../switch/v4/SwitchV4.vue.js";
-import P from "../chip/v4/ChipV4.vue.js";
-import { ChartType as n, TrendDirection as $ } from "./types.js";
-import V from "./ChartHeaderTrend.vue.js";
-import g from "./SubHeader.vue.js";
-import { useTestIdAttrs as A } from "../../utils/testIds.js";
-import { ChartTestIdModifiers as s } from "../../testids/index.js";
-const L = { class: "header-texts" }, R = { class: "header-row" }, U = { class: "header-actions" }, J = /* @__PURE__ */ I({
+import P from "../tooltip/v4/TooltipV4.vue.js";
+import $ from "../chip/v4/ChipV4.vue.js";
+import { ChartType as u, TrendDirection as A } from "./types.js";
+import C from "./ChartHeaderTrend.vue.js";
+import L from "./SubHeader.vue.js";
+import { useTestIdAttrs as R } from "../../utils/testIds.js";
+import { ChartTestIdModifiers as p } from "../../testids/index.js";
+const U = { class: "header-texts" }, z = { class: "header-row" }, M = { class: "header-tooltip" }, O = { class: "header-actions" }, Z = /* @__PURE__ */ g({
   __name: "ChartHeader",
   props: {
-    chartType: { default: n.Line },
+    chartType: { default: u.Line },
     typeSwitcher: { type: Boolean, default: !0 },
     header: { default: "" },
+    headerTooltip: { default: null },
     subheader: { default: "" },
     subheaderTooltip: { default: null },
     trendTooltip: { default: null },
     compact: { type: Boolean, default: !1 },
     trendValue: { default: null },
-    trendDirection: { default: $.UP },
+    trendDirection: { default: A.UP },
     noteText: { default: "" },
     testId: { default: "" }
   },
   emits: ["update:chartType"],
-  setup(e, { emit: v }) {
-    const a = e, h = [
-      { id: n.Line, icon: "chart-line-up" },
-      { id: n.Bar, icon: "chart-bar" },
-      { id: n.StackedLine, icon: "chart-line" }
-    ], i = p({
+  setup(e, { emit: I }) {
+    const a = e, f = [
+      { id: u.Line, icon: "chart-line-up" },
+      { id: u.Bar, icon: "chart-bar" },
+      { id: u.StackedLine, icon: "chart-line" }
+    ], S = c(() => a.headerTooltip?.length > 0), s = c({
       get() {
-        return h.find(({ id: r }) => r === a.chartType);
+        return f.find(({ id: o }) => o === a.chartType);
       },
-      set(r) {
-        v("update:chartType", r.id);
+      set(o) {
+        I("update:chartType", o.id);
       }
-    }), m = p(() => ({
+    }), T = c(() => ({
       value: a.trendValue,
       direction: a.trendDirection,
       trendTooltip: a.trendTooltip,
       testId: a.testId
-    })), k = A(a.testId, s);
-    return (r, f) => (o(), S("div", u({
+    })), x = R(a.testId, p);
+    return (o, y) => (r(), B("div", h({
       class: ["chart-header", { "chart-header--compact": e.compact }]
-    }, t(k)[t(s).HEADER]), [
-      c("div", L, [
-        T(g, {
+    }, t(x)[t(p).HEADER]), [
+      n("div", U, [
+        m(L, {
           subheader: e.subheader,
           "subheader-tooltip": e.subheaderTooltip,
           "show-separator": e.compact && (!!e.header || !!e.trendValue)
-        }, w({ _: 2 }, [
-          r.$slots["subheader-tooltip"] ? {
+        }, E({ _: 2 }, [
+          o.$slots["subheader-tooltip"] ? {
             name: "subheader-tooltip",
-            fn: y(() => [
-              x(r.$slots, "subheader-tooltip", {}, void 0, !0)
+            fn: d(() => [
+              H(o.$slots, "subheader-tooltip", {}, void 0, !0)
             ]),
             key: "0"
           } : void 0
         ]), 1032, ["subheader", "subheader-tooltip", "show-separator"]),
-        c("div", R, [
-          T(t(H), {
-            class: "header-text",
-            variant: e.compact ? "h5" : "chart2"
+        n("div", z, [
+          m(t(P), {
+            placement: "right",
+            disabled: !t(S)
           }, {
-            default: y(() => [
-              B(E(e.header), 1)
+            tooltip: d(() => [
+              n("div", M, [
+                e.headerTooltip ? (r(), l(t(k), {
+                  key: 0,
+                  variant: "body2",
+                  class: "header-tooltip__text"
+                }, {
+                  default: d(() => [
+                    b(v(e.headerTooltip), 1)
+                  ]),
+                  _: 1
+                })) : i("", !0)
+              ])
+            ]),
+            default: d(() => [
+              m(t(k), {
+                class: "header-text",
+                variant: e.compact ? "h5" : "chart2"
+              }, {
+                default: d(() => [
+                  b(v(e.header), 1)
+                ]),
+                _: 1
+              }, 8, ["variant"])
             ]),
             _: 1
-          }, 8, ["variant"]),
-          !e.compact && e.trendValue !== null ? (o(), d(V, b(u({ key: 0 }, t(m))), null, 16)) : l("", !0)
+          }, 8, ["disabled"]),
+          !e.compact && e.trendValue !== null ? (r(), l(C, V(h({ key: 0 }, t(T))), null, 16)) : i("", !0)
         ]),
-        e.compact && e.trendValue !== null ? (o(), d(V, b(u({ key: 0 }, t(m))), null, 16)) : l("", !0)
+        e.compact && e.trendValue !== null ? (r(), l(C, V(h({ key: 0 }, t(T))), null, 16)) : i("", !0)
       ]),
-      c("div", U, [
-        e.noteText ? (o(), d(t(P), {
+      n("div", O, [
+        e.noteText ? (r(), l(t($), {
           key: 0,
           label: `Note: ${e.noteText}`
-        }, null, 8, ["label"])) : l("", !0),
-        e.typeSwitcher ? (o(), d(t(N), {
+        }, null, 8, ["label"])) : i("", !0),
+        e.typeSwitcher ? (r(), l(t(N), {
           key: 1,
-          modelValue: t(i),
-          "onUpdate:modelValue": f[0] || (f[0] = (C) => D(i) ? i.value = C : null),
-          options: h,
-          "test-id": `${e.testId}-${t(s).TYPE_SWITCHER}`
-        }, null, 8, ["modelValue", "test-id"])) : l("", !0)
+          modelValue: t(s),
+          "onUpdate:modelValue": y[0] || (y[0] = (w) => D(s) ? s.value = w : null),
+          options: f,
+          "test-id": `${e.testId}-${t(p).TYPE_SWITCHER}`
+        }, null, 8, ["modelValue", "test-id"])) : i("", !0)
       ])
     ], 16));
   }
 });
 export {
-  J as default
+  Z as default
 };

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

@@ -12,6 +12,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tickCount?: number;
     truncateTickLabels?: boolean;
     header?: string;
+    headerTooltip?: string;
     subheader?: string;
     subheaderTooltip?: {
         header?: string;
@@ -58,6 +59,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tickCount: number;
     truncateTickLabels: boolean;
     header: string;
+    headerTooltip: any;
     subheader: string;
     subheaderTooltip: any;
     keepSubheaderVisible: boolean;
@@ -99,6 +101,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tickCount?: number;
     truncateTickLabels?: boolean;
     header?: string;
+    headerTooltip?: string;
     subheader?: string;
     subheaderTooltip?: {
         header?: string;
@@ -145,6 +148,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tickCount: number;
     truncateTickLabels: boolean;
     header: string;
+    headerTooltip: any;
     subheader: string;
     subheaderTooltip: any;
     keepSubheaderVisible: boolean;
@@ -193,6 +197,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     subheader: string;
     subheaderTooltip: any;
     typeSwitcher: boolean;
+    headerTooltip: string;
     trendValue: string | number;
     trendDirection: TrendDirection;
     noteText: string;

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_3c887f7e_lang.css"; //*');
-const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-3c887f7e"]]);
+// import "../../ChartPlane.vue_vue_type_style_index_0_scoped_6de5cddb_lang.css"; //*');
+const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-6de5cddb"]]);
 export {
-  a as default
+  s as default
 };

package/components/chart/ChartPlane.vue2.js

@@ -1,9 +1,9 @@
- import "../../ChartPlane.vue_vue_type_style_index_0_scoped_3c887f7e_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 ce, openBlock as p, createElementBlock as S, createVNode as ue, 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 "../../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 _e } from "./consts.js";
-import { ChartType as d, DateInterval as Ge, TooltipOrder as _, TrendDirection as $e } from "./types.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 { useTooltipPosition as ze } from "./composables/useTooltipPosition.js";
 import We from "./ChartTooltip.vue.js";
 import { hexColorToRgba as h } from "../../utils/color.js";
@@ -12,7 +12,7 @@ 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 G, calculateTotal as et } from "../../utils/totals.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";
@@ -33,10 +33,11 @@ const rt = { class: "chart-plane-container" }, it = {
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
-    xAxisDateInterval: { default: Ge.DAILY },
+    xAxisDateInterval: { default: _e.DAILY },
     tickCount: { default: Pe },
     truncateTickLabels: { type: Boolean, default: !1 },
     header: { default: "" },
+    headerTooltip: { default: null },
     subheader: { default: "" },
     subheaderTooltip: { default: null },
     keepSubheaderVisible: { type: Boolean, default: !1 },
@@ -51,9 +52,9 @@ const rt = { class: "chart-plane-container" }, it = {
     compactHeader: { type: Boolean, default: !1 },
     noteText: { default: "" },
     tooltipRespectsTopEdge: { type: Boolean, default: !0 },
-    tooltipTotalType: { default: G.Total },
+    tooltipTotalType: { default: _.Total },
     tooltipTotalCalcFn: { type: Function, default: et },
-    tooltipOrder: { default: _.Legend },
+    tooltipOrder: { default: G.Legend },
     trendValue: { default: null },
     trendDirection: { default: $e.UP },
     trendTooltip: { default: null },
@@ -69,8 +70,8 @@ const rt = { class: "chart-plane-container" }, it = {
   setup(o, { emit: z }) {
     const e = o;
     se((t) => ({
-      "4efc2842": n(oe),
-      "60310e6c": o.height
+      f01f0522: n(oe),
+      "77889a5a": o.height
     }));
     const W = Xe(Be);
     V.register(
@@ -92,13 +93,13 @@ const rt = { class: "chart-plane-container" }, it = {
       () => e.withAnimation ? "" : "none"
     ), T = E(null);
     let s = null;
-    const D = i(() => e.empty || e.dataSets.length === 0), u = i(() => !e.loading && !D.value), g = () => {
+    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));
     };
-    de(g), v(() => e.chartType, g), v(u, async (t) => {
-      t && (await ce(), g());
+    de(g), v(() => e.chartType, g), v(c, async (t) => {
+      t && (await ue(), g());
     }), v(
       [
         () => e.visibleIds,
@@ -127,7 +128,7 @@ const rt = { class: "chart-plane-container" }, it = {
     ), Q = (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 = _e), h(t, l);
+      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) => {
@@ -152,7 +153,7 @@ const rt = { class: "chart-plane-container" }, it = {
         // store base color for later use
       };
     })), ee = i(
-      () => e.tooltipTotalType === G.Total ? "Total" : "Mean"
+      () => e.tooltipTotalType === _.Total ? "Total" : "Mean"
     ), te = (t) => t.filter(
       (r) => !r.dataset.isTotal
     ), P = i(() => ({
@@ -179,7 +180,7 @@ const rt = { class: "chart-plane-container" }, it = {
             enabled: !1,
             position: "average",
             external: ({ tooltip: t }) => {
-              c.value = { ...t };
+              u.value = { ...t };
             },
             callbacks: {
               footer: (t) => {
@@ -191,7 +192,7 @@ const rt = { class: "chart-plane-container" }, it = {
               }
             },
             itemSort: (t, r) => {
-              if (e.tooltipOrder === _.YAxis) {
+              if (e.tooltipOrder === G.YAxis) {
                 const a = t.parsed.y || 0, l = r.parsed.y || 0;
                 return a === l ? 0 : a > l ? -1 : 1;
               }
@@ -283,15 +284,15 @@ const rt = { class: "chart-plane-container" }, it = {
           }
         }
       }
-    })), N = E(null), c = E(null), { position: H } = ze(
+    })), N = E(null), u = E(null), { position: H } = ze(
       T,
       N,
-      c,
+      u,
       e.tooltipRespectsTopEdge
     ), ae = i(() => ({
       left: `${H.value.left}px`,
       top: `${H.value.top}px`,
-      opacity: c.value?.opacity || 0
+      opacity: u.value?.opacity || 0
     })), oe = i(
       () => (e.compactHeader ? Me : Fe) + "px"
     );
@@ -314,17 +315,18 @@ const rt = { class: "chart-plane-container" }, it = {
       (s?.data.datasets || []).forEach(ot);
     }, ie = lt(e.testId, $);
     return (t, r) => (p(), S("div", rt, [
-      n(u) || o.keepSubheaderVisible ? (p(), S("div", it, [
-        ue(Ze, {
+      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),
-          "type-switcher": n(u) ? o.typeSwitcher : !1,
-          header: n(u) ? o.header : null,
+          "type-switcher": n(c) ? o.typeSwitcher : !1,
+          header: n(c) ? o.header : null,
           subheader: o.subheader,
           "subheader-tooltip": o.subheaderTooltip,
+          "header-tooltip": o.headerTooltip,
           "trend-tooltip": o.trendTooltip,
           compact: o.compactHeader,
-          "trend-value": n(u) ? o.trendValue : null,
+          "trend-value": n(c) ? o.trendValue : null,
           "trend-direction": o.trendDirection,
           "note-text": o.noteText,
           "test-id": o.testId
@@ -336,9 +338,9 @@ const rt = { class: "chart-plane-container" }, it = {
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction", "note-text", "test-id"])
+        ]), 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(u) ? (p(), S("section", nt, [
+      n(c) ? (p(), S("section", nt, [
         R("div", st, [
           R("canvas", {
             ref_key: "chartRef",
@@ -351,16 +353,16 @@ const rt = { class: "chart-plane-container" }, it = {
             class: "chart__tooltip",
             style: Te(n(ae))
           }, [
-            c.value ? (p(), I(We, {
+            u.value ? (p(), I(We, {
               key: 0,
               "totals-chart": n(f),
-              title: String(c.value.title),
-              "data-points": c.value.dataPoints,
+              title: String(u.value.title),
+              "data-points": u.value.dataPoints,
               "x-axis-format": o.xAxisFormat,
               "y-axis-format": o.yAxisFormat,
               "x-axis-date-interval": o.xAxisDateInterval,
-              "total-label": c.value.footer?.[0],
-              "total-value": Number(c.value.footer?.[1]),
+              "total-label": u.value.footer?.[0],
+              "total-value": Number(u.value.footer?.[1]),
               "value-suffix": o.valueSuffix,
               "value-prefix": o.valuePrefix,
               "test-id": o.testId

package/components/chart/ChartStoryArgs.d.ts

@@ -68,6 +68,12 @@ export declare const chartStoryArgs: {
             category: string;
         };
     };
+    headerTooltip: {
+        table: {
+            category: string;
+        };
+        description: string;
+    };
     subheader: {
         table: {
             category: string;

package/components/chart/index.d.ts

@@ -27,6 +27,7 @@ declare const ChartTypes: () => ({
             trendTooltip: any;
             subheader: string;
             subheaderTooltip: any;
+            headerTooltip: string;
             trendValue: string | number;
             trendDirection: TrendDirection;
             noteText: string;
@@ -146,6 +147,10 @@ declare const ChartTypes: () => ({
                 }>;
                 default: any;
             };
+            headerTooltip: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
             trendValue: {
                 type: import("vue").PropType<string | number>;
                 default: any;
@@ -239,7 +244,7 @@ declare const ChartTypes: () => ({
             "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
             "onUpdate:sortSelected"?: (sortOption: unknown) => any;
             "onUpdate:chartType"?: (chartType: ChartType) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "testId" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "sortSelected" | "sortOptions" | "sortOptionNameKey" | "chartType" | "hideLegend" | "xAxisFormat" | "xAxisDateInterval" | "totalsChart" | "parsing" | "yAxisFormat" | "valueSuffix" | "valuePrefix" | "trendTooltip" | "subheader" | "subheaderTooltip" | "trendValue" | "trendDirection" | "noteText" | "dataSets" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "indicateIncompleteData" | "tooltipExcludeTotalItem" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts" | "colorVariant">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "testId" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "sortSelected" | "sortOptions" | "sortOptionNameKey" | "chartType" | "hideLegend" | "xAxisFormat" | "xAxisDateInterval" | "totalsChart" | "parsing" | "yAxisFormat" | "valueSuffix" | "valuePrefix" | "trendTooltip" | "subheader" | "subheaderTooltip" | "headerTooltip" | "trendValue" | "trendDirection" | "noteText" | "dataSets" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "indicateIncompleteData" | "tooltipExcludeTotalItem" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts" | "colorVariant">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -350,6 +355,10 @@ declare const ChartTypes: () => ({
                 }>;
                 default: any;
             };
+            headerTooltip: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
             trendValue: {
                 type: import("vue").PropType<string | number>;
                 default: any;
@@ -470,6 +479,7 @@ declare const ChartTypes: () => ({
             trendTooltip: any;
             subheader: string;
             subheaderTooltip: any;
+            headerTooltip: string;
             trendValue: string | number;
             trendDirection: TrendDirection;
             noteText: string;
@@ -609,6 +619,10 @@ declare const ChartTypes: () => ({
             }>;
             default: any;
         };
+        headerTooltip: {
+            type: import("vue").PropType<string>;
+            default: any;
+        };
         trendValue: {
             type: import("vue").PropType<string | number>;
             default: any;
@@ -803,6 +817,10 @@ declare const ChartTypes: () => ({
         }>;
         default: any;
     };
+    headerTooltip: {
+        type: import("vue").PropType<string>;
+        default: any;
+    };
     trendValue: {
         type: import("vue").PropType<string | number>;
         default: any;
@@ -923,6 +941,7 @@ declare const ChartTypes: () => ({
     trendTooltip: any;
     subheader: string;
     subheaderTooltip: any;
+    headerTooltip: string;
     trendValue: string | number;
     trendDirection: TrendDirection;
     noteText: string;

package/components/chip/v4/ChipV4.vue2.js

@@ -1,4 +1,4 @@
- import "../../../ChipV4.vue_vue_type_style_index_0_scoped_a221c649_lang.css"; import { defineComponent as i, openBlock as o, createElementBlock as d, mergeProps as s, unref as t, renderSlot as c, createVNode as f, withCtx as n, createTextVNode as p, toDisplayString as u } from "vue";
+ import "../../../ChipV4.vue_vue_type_style_index_0_scoped_a221c649_lang.css";  import "../../../ChipV4.vue_vue_type_style_index_0_scoped_a221c649_lang.css"; import { defineComponent as i, openBlock as o, createElementBlock as d, mergeProps as s, unref as t, renderSlot as c, createVNode as f, withCtx as n, createTextVNode as p, toDisplayString as u } from "vue";
 import { ChipTestIdModifiers as a } from "../../../testids/index.js";
 import { useTestIdAttrs as m } from "../../../utils/testIds.js";
 import h from "../../typography/v4/Typography.vue.js";