@ironsource/shared-ui 2.1.12-test.53 → 2.1.12-test.54

package/components/chart/ChartPlane.vue2.js

@@ -1,27 +1,29 @@
- import "../../ChartPlane.vue_vue_type_style_index_0_scoped_dd60ff0e_lang.css"; import { defineComponent as re, useCssVars as ie, unref as s, computed as i, ref as S, onMounted as ne, watch as T, nextTick as se, openBlock as p, createElementBlock as E, createVNode as de, isRef as ce, createSlots as ue, withCtx as fe, renderSlot as pe, createCommentVNode as L, createElementVNode as R, normalizeStyle as he, createBlock as D } from "vue";
-import { Chart as V, ArcElement as me, LineElement as ve, BarElement as Te, PointElement as ye, LineController as Ce, BarController as ge, PieController as be, ScatterController as xe, CategoryScale as Ae, LinearScale as ke, Filler as Se, Tooltip as Ee } from "chart.js";
-import { HoverVerticalLine as Le } from "./plugins/HoverVerticalLine.js";
-import { prepareTickLabel as Re, formatValue as De } from "./utils/utils.js";
-import { DEFAULT_TICK_COUNT as Be, TOTALS_HELPER_KEY as F, LINE_DASH_STYLE as Ie, BASE_COLOR_KEY as _, CHART_PADDING as Oe, POINT_BORDER_COLOR as Ne, TICK_LABEL_COLOR as M, TICK_LABEL_FONT as Y, TICKS_EXTRA_PADDING as Pe, GRID_LINE_COLOR as K, HEADER_HEIGHT as He, COMPACT_HEADER_HEIGHT as we, HOVER_AREA_TRANSPARENCY as Ve, HOVER_TRANSPARENCY as y, CHART_ITEM_TRANSPARENCY as Fe, INCOMPLETE_DATA_BAR_TRANSPARENCY as _e, STACKED_LINE_TRANSPARENCY as Me } from "./consts.js";
-import { ChartType as d, DateInterval as Ye, TooltipOrder as U, TrendDirection as Ke } from "./types.js";
-import { useTooltipPosition as Ue } from "./composables/useTooltipPosition.js";
-import Ge from "./ChartTooltip.vue.js";
+ import "../../ChartPlane.vue_vue_type_style_index_0_scoped_a685cf5e_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 { 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 { useTooltipPosition as ze } from "./composables/useTooltipPosition.js";
+import We from "./ChartTooltip.vue.js";
 import { hexColorToRgba as h } from "../../utils/color.js";
-import $e from "./ChartHeader.vue.js";
-import { useMemoize as ze, useVModel as We } from "@vueuse/core";
-import Ze from "../emptyState/v4/EmptyStateV4.vue.js";
-import Xe from "./ChartLoader.vue.js";
-import { DEFAULT_CHART_COLOR as je } from "./colorPalette.js";
-import { TotalType as G, calculateTotal as qe } from "../../utils/totals.js";
-import { isNullOrUndefined as Je } from "../../utils/utils.js";
-import { storeOriginalDatasetColors as Qe, restoreOriginalDatasetColors as et } from "./utils/highlightUtils.js";
-const tt = { class: "chart-plane-container" }, at = {
+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 G, 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 = {
   key: 0,
   class: "header-wrapper"
-}, ot = {
+}, nt = {
   key: 1,
   class: "chart-plane"
-}, lt = { class: "chart" }, xt = /* @__PURE__ */ re({
+}, st = { class: "chart" }, Rt = /* @__PURE__ */ ne({
   __name: "ChartPlane",
   props: {
     dataSets: { default: () => [] },
@@ -31,8 +33,8 @@ const tt = { class: "chart-plane-container" }, at = {
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
-    xAxisDateInterval: { default: Ye.DAILY },
-    tickCount: { default: Be },
+    xAxisDateInterval: { default: Ge.DAILY },
+    tickCount: { default: Pe },
     truncateTickLabels: { type: Boolean, default: !1 },
     header: { default: "" },
     subheader: { default: "" },
@@ -50,30 +52,28 @@ const tt = { class: "chart-plane-container" }, at = {
     noteText: { default: "" },
     tooltipRespectsTopEdge: { type: Boolean, default: !0 },
     tooltipTotalType: { default: G.Total },
-    tooltipTotalCalcFn: { type: Function, default: qe },
-    tooltipOrder: { default: U.Legend },
+    tooltipTotalCalcFn: { type: Function, default: et },
+    tooltipOrder: { default: _.Legend },
     trendValue: { default: null },
-    trendDirection: { default: Ke.UP },
+    trendDirection: { default: $e.UP },
     trendTooltip: { default: null },
     totalsChart: { type: Boolean, default: !1 },
     colorsMap: { default: () => ({}) },
     valueSuffix: { default: "" },
     valuePrefix: { default: "" },
     indicateIncompleteData: { type: Boolean, default: !1 },
-    tooltipExcludeTotalItem: { type: Boolean, default: !1 }
+    tooltipExcludeTotalItem: { type: Boolean, default: !1 },
+    testId: { default: "" }
   },
   emits: ["update:chartType"],
-  setup(o, { emit: $ }) {
+  setup(o, { emit: z }) {
     const e = o;
-    ie((t) => ({
-      "53e851a1": s(ae),
-      "45a8c08c": o.height
+    se((t) => ({
+      "6a964917": n(oe),
+      "322ee3fc": o.height
     }));
-    const z = ze(Re);
+    const W = Xe(Be);
     V.register(
-      me,
-      ve,
-      Te,
       ye,
       Ce,
       ge,
@@ -81,57 +81,60 @@ const tt = { class: "chart-plane-container" }, at = {
       xe,
       Ae,
       ke,
-      Se,
       Ee,
-      Le
+      Se,
+      Le,
+      Re,
+      Ie,
+      De
     );
-    const C = We(e, "chartType", $), W = i(
+    const C = je(e, "chartType", z), Z = i(
       () => e.withAnimation ? "" : "none"
-    ), v = S(null);
-    let n = null;
-    const B = i(() => e.empty || e.dataSets.length === 0), u = i(() => !e.loading && !B.value), g = () => {
-      v.value && (n && n.destroy(), n = new V(v.value, N.value));
-    }, Z = () => {
-      n && (n.data.datasets = O.value, n.options = N.value.options, n.update(W.value));
+    ), T = E(null);
+    let s = null;
+    const D = i(() => e.empty || e.dataSets.length === 0), u = 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));
     };
-    ne(g), T(() => e.chartType, g), T(u, async (t) => {
-      t && (await se(), g());
-    }), T(
+    de(g), v(() => e.chartType, g), v(u, async (t) => {
+      t && (await ce(), g());
+    }), v(
       [
         () => e.visibleIds,
         () => e.dataSets,
         () => e.valuePrefix,
         () => e.valueSuffix
       ],
-      Z
+      X
     );
     const f = i(() => e.totalsChart), b = i(
       () => e.chartType === d.StackedLine || e.chartType === d.StackedBar || f.value
     ), x = i(
       () => e.chartType === d.Line || e.chartType === d.StackedLine
-    ), X = i(() => f.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: F } : e.parsing), j = i(() => f.value ? e.dataSets.map((t) => ({
+    ), j = i(() => f.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: F } : e.parsing), q = i(() => f.value ? e.dataSets.map((t) => ({
       ...t,
       data: t.data.map((r) => ({
         ...r,
         [F]: t.label
       }))
     })) : e.dataSets), A = i(
-      () => j.value.filter((t) => e.visibleIds.includes(t.id))
-    ), q = (t) => e.colorsMap[t] || je, I = i(
+      () => q.value.filter((t) => e.visibleIds.includes(t.id))
+    ), J = (t) => e.colorsMap[t] || Qe, B = i(
       () => A.value.length && A.value.every(
         (t) => t.data.length === 1
       )
-    ), J = (t) => (r) => {
+    ), Q = (t) => (r) => {
       const a = r.chart.data.labels.length - 1;
-      let l = Fe;
-      return e.chartType === d.Bar && e.indicateIncompleteData && r.index === a ? l = _e : e.chartType === d.StackedLine && (l = Me), h(t, l);
+      let l = Ke;
+      return e.chartType === d.Bar && e.indicateIncompleteData && r.index === a ? l = Ue : e.chartType === d.StackedLine && (l = _e), h(t, l);
     }, O = i(() => A.value.map((t, r) => {
-      const a = q(t.id), l = b.value ? r !== 0 ? "-1" : "start" : void 0, m = e.indicateIncompleteData ? {
+      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)
-            return Ie;
+            return Ne;
         }
-      } : void 0, k = J(a);
+      } : void 0, k = Q(a);
       return {
         ...t,
         fill: l,
@@ -145,14 +148,14 @@ const tt = { class: "chart-plane-container" }, at = {
         // draw a bit outside the chart area
         icon: t.icon || null,
         iconType: t.iconType || "branded",
-        [_]: a
+        [M]: a
         // store base color for later use
       };
-    })), Q = i(
+    })), ee = i(
       () => e.tooltipTotalType === G.Total ? "Total" : "Mean"
-    ), ee = (t) => t.filter(
+    ), te = (t) => t.filter(
       (r) => !r.dataset.isTotal
-    ), N = i(() => ({
+    ), P = i(() => ({
       type: e.chartType == d.Bar || e.chartType === d.StackedBar ? "bar" : "line",
       // Chart Data
       data: {
@@ -160,7 +163,7 @@ const tt = { class: "chart-plane-container" }, at = {
       },
       // Chart Options
       options: {
-        parsing: X.value,
+        parsing: j.value,
         interaction: {
           intersect: !1,
           mode: f.value ? "point" : "index",
@@ -180,15 +183,15 @@ const tt = { class: "chart-plane-container" }, at = {
             },
             callbacks: {
               footer: (t) => {
-                const a = (e.tooltipExcludeTotalItem && t.length > 1 ? ee(t) : t).map((m) => m.parsed.y || 0), l = e.tooltipTotalCalcFn(
+                const a = (e.tooltipExcludeTotalItem && t.length > 1 ? te(t) : t).map((m) => m.parsed.y || 0), l = e.tooltipTotalCalcFn(
                   a,
                   e.tooltipTotalType
                 );
-                return [Q.value, String(l)];
+                return [ee.value, String(l)];
               }
             },
             itemSort: (t, r) => {
-              if (e.tooltipOrder === U.YAxis) {
+              if (e.tooltipOrder === _.YAxis) {
                 const a = t.parsed.y || 0, l = r.parsed.y || 0;
                 return a === l ? 0 : a > l ? -1 : 1;
               }
@@ -200,7 +203,7 @@ const tt = { class: "chart-plane-container" }, at = {
         responsive: !0,
         maintainAspectRatio: !1,
         layout: {
-          padding: Oe
+          padding: He
         },
         // basic styles
         elements: {
@@ -209,12 +212,12 @@ const tt = { class: "chart-plane-container" }, at = {
             tension: 0
           },
           point: {
-            radius: I.value ? 3 : 1,
+            radius: B.value ? 3 : 1,
             hitRadius: 8,
             borderWidth: 0,
             hoverRadius: 4,
             hoverBorderWidth: 2,
-            pointHoverBackgroundColor: Ne
+            pointHoverBackgroundColor: we
           },
           bar: {
             borderRadius: 4
@@ -224,21 +227,21 @@ const tt = { class: "chart-plane-container" }, at = {
           // Horizontal Axis (X)
           x: {
             beginAtZero: !0,
-            offset: !x.value || I.value,
+            offset: !x.value || B.value,
             border: { display: !1 },
             stacked: b.value,
             // stack on top of each other
             // ticks
             ticks: {
-              color: M,
-              font: Y,
+              color: Y,
+              font: K,
               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 - Pe;
-                return z({
+                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({
                   label: l,
                   format: e.xAxisFormat,
                   availableSpace: k,
@@ -248,7 +251,7 @@ const tt = { class: "chart-plane-container" }, at = {
             },
             // grid lines
             grid: {
-              color: K,
+              color: U,
               drawOnChartArea: !1,
               drawTicks: !0,
               drawBorder: !1,
@@ -264,92 +267,93 @@ const tt = { class: "chart-plane-container" }, at = {
             // stack on top of each other
             // ticks
             ticks: {
-              color: M,
-              font: Y,
+              color: Y,
+              font: K,
               count: e.tickCount + 1,
               padding: 8,
               min: 0,
-              callback: (t) => e.valuePrefix + De(t, e.yAxisFormat) + e.valueSuffix
+              callback: (t) => e.valuePrefix + Oe(t, e.yAxisFormat, !0) + e.valueSuffix
             },
             // grid lines
             grid: {
-              color: K,
+              color: U,
               drawOnChartArea: !0,
               drawTicks: !1
             }
           }
         }
       }
-    })), P = S(null), c = S(null), { position: H } = Ue(
-      v,
-      P,
+    })), N = E(null), c = E(null), { position: H } = ze(
+      T,
+      N,
       c,
       e.tooltipRespectsTopEdge
-    ), te = i(() => ({
+    ), ae = i(() => ({
       left: `${H.value.left}px`,
       top: `${H.value.top}px`,
       opacity: c.value?.opacity || 0
-    })), ae = i(
-      () => (e.compactHeader ? we : He) + "px"
+    })), oe = i(
+      () => (e.compactHeader ? Me : Fe) + "px"
     );
-    T(
+    v(
       () => e.highlightedId,
       (t) => {
-        n && (Je(t) ? le() : oe(t), n.update());
+        s && (tt(t) ? re() : le(t), s.update());
       }
     );
-    const oe = (t) => {
-      (n?.data.datasets || []).forEach((a) => {
-        Qe(a);
-        const l = a[_];
+    const le = (t) => {
+      (s?.data.datasets || []).forEach((a) => {
+        at(a);
+        const l = a[M];
         a.id === t ? e.chartType === d.StackedLine && (a.backgroundColor = h(
           l,
-          Ve
+          Ye
         )) : (a.backgroundColor = h(l, y), a.borderColor = h(l, y), a.pointBackgroundColor = h(l, y), a.pointHoverBorderColor = h(l, y));
       });
-    }, le = () => {
-      (n?.data.datasets || []).forEach(et);
-    };
-    return (t, r) => (p(), E("div", tt, [
-      s(u) || o.keepSubheaderVisible ? (p(), E("div", at, [
-        de($e, {
-          "chart-type": s(C),
-          "onUpdate:chart-type": r[0] || (r[0] = (a) => ce(C) ? C.value = a : null),
-          "type-switcher": s(u) ? o.typeSwitcher : !1,
-          header: s(u) ? o.header : null,
+    }, re = () => {
+      (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, {
+          "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,
           subheader: o.subheader,
           "subheader-tooltip": o.subheaderTooltip,
           "trend-tooltip": o.trendTooltip,
           compact: o.compactHeader,
-          "trend-value": s(u) ? o.trendValue : null,
+          "trend-value": n(u) ? o.trendValue : null,
           "trend-direction": o.trendDirection,
-          "note-text": o.noteText
-        }, ue({ _: 2 }, [
+          "note-text": o.noteText,
+          "test-id": o.testId
+        }, pe({ _: 2 }, [
           t.$slots["subheader-tooltip"] ? {
             name: "subheader-tooltip",
-            fn: fe(() => [
-              pe(t.$slots, "subheader-tooltip", {}, void 0, !0)
+            fn: he(() => [
+              me(t.$slots, "subheader-tooltip", {}, void 0, !0)
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction", "note-text"])
+        ]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction", "note-text", "test-id"])
       ])) : L("", !0),
-      s(u) ? (p(), E("section", ot, [
-        R("div", lt, [
+      n(u) ? (p(), S("section", nt, [
+        R("div", st, [
           R("canvas", {
             ref_key: "chartRef",
-            ref: v,
+            ref: T,
             class: "chart__canvas"
           }, null, 512),
           R("div", {
             ref_key: "tooltipRef",
-            ref: P,
+            ref: N,
             class: "chart__tooltip",
-            style: he(s(te))
+            style: Te(n(ae))
           }, [
-            c.value ? (p(), D(Ge, {
+            c.value ? (p(), I(We, {
               key: 0,
-              "totals-chart": s(f),
+              "totals-chart": n(f),
               title: String(c.value.title),
               "data-points": c.value.dataPoints,
               "x-axis-format": o.xAxisFormat,
@@ -358,24 +362,26 @@ const tt = { class: "chart-plane-container" }, at = {
               "total-label": c.value.footer?.[0],
               "total-value": Number(c.value.footer?.[1]),
               "value-suffix": o.valueSuffix,
-              "value-prefix": o.valuePrefix
-            }, 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"])) : L("", !0)
+              "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)
           ], 4)
         ])
-      ])) : o.loading ? (p(), D(Xe, {
+      ])) : o.loading ? (p(), I(Je, ve({
         key: 2,
         class: "chart-loading"
-      })) : s(B) ? (p(), D(s(Ze), {
+      }, n(ie)[n($).LOADER]), null, 16)) : n(D) ? (p(), I(n(qe), {
         key: 3,
         class: "chart-empty",
         variant: null,
         title: o.noDataTitle,
         subtitle: o.noDataSubtitle,
-        "icon-name": o.noDataIcon
-      }, null, 8, ["title", "subtitle", "icon-name"])) : L("", !0)
+        "icon-name": o.noDataIcon,
+        "test-id": o.testId
+      }, null, 8, ["title", "subtitle", "icon-name", "test-id"])) : L("", !0)
     ]));
   }
 });
 export {
-  xt as default
+  Rt as default
 };

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

@@ -10,6 +10,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     totalsChart?: boolean;
     valueSuffix?: string;
     valuePrefix?: string;
+    testId?: string;
 }>, {
     title: string;
     dataPoints: () => any[];
@@ -21,6 +22,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     totalsChart: boolean;
     valueSuffix: string;
     valuePrefix: string;
+    testId: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string;
     dataPoints: MyTooltipItem<'line'>[];
@@ -32,6 +34,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     totalsChart?: boolean;
     valueSuffix?: string;
     valuePrefix?: string;
+    testId?: string;
 }>, {
     title: string;
     dataPoints: () => any[];
@@ -43,8 +46,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     totalsChart: boolean;
     valueSuffix: string;
     valuePrefix: string;
+    testId: string;
 }>>>, {
     title: string;
+    testId: string;
     xAxisFormat: ValueFormat;
     xAxisDateInterval: DateInterval;
     dataPoints: MyTooltipItem<'line'>[];

package/components/chart/ChartTooltip.vue.js

@@ -1,7 +1,7 @@
 import o from "./ChartTooltip.vue2.js";
 /* empty css                   */import t from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_3d0780bb_lang.css"; //*');
-const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-3d0780bb"]]);
+// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_9623dbbd_lang.css"; //*');
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9623dbbd"]]);
 export {
   s as default
 };

package/components/chart/ChartTooltip.vue2.js

@@ -1,16 +1,18 @@
- import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_3d0780bb_lang.css"; import { defineComponent as m, openBlock as a, createElementBlock as o, createBlock as f, createCommentVNode as r, Fragment as y, renderList as v, createElementVNode as c, normalizeStyle as h, unref as l, createVNode as i, withCtx as n, createTextVNode as u, toDisplayString as s } from "vue";
+ import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_9623dbbd_lang.css"; import { defineComponent as v, openBlock as l, createElementBlock as o, mergeProps as h, unref as e, createBlock as f, createCommentVNode as r, Fragment as b, renderList as C, createElementVNode as c, normalizeStyle as k, createVNode as i, withCtx as s, createTextVNode as u, toDisplayString as n } from "vue";
 import d from "../typography/v4/Typography.vue.js";
-import b from "../icon/v4/IconV4.vue.js";
+import A from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
-import { formatValue as x } from "./utils/utils.js";
-import k from "./TooltipHeader.vue.js";
-const C = { class: "chart-tooltip" }, g = {
+import { formatValue as m } from "./utils/utils.js";
+import I from "./TooltipHeader.vue.js";
+import { useTestIdAttrs as T } from "../../utils/testIds.js";
+import { ChartTooltipTestIdModifiers as x } from "../../testids/index.js";
+const g = {
   key: 1,
   class: "list"
-}, V = { class: "popover-label-wrapper" }, A = {
+}, p = { class: "popover-label-wrapper" }, V = {
   key: 2,
   class: "tooltip-footer"
-}, L = /* @__PURE__ */ m({
+}, O = /* @__PURE__ */ v({
   __name: "ChartTooltip",
   props: {
     title: { default: "" },
@@ -22,11 +24,13 @@ const C = { class: "chart-tooltip" }, g = {
     totalValue: { default: null },
     totalsChart: { type: Boolean, default: !1 },
     valueSuffix: { default: "" },
-    valuePrefix: { default: "" }
+    valuePrefix: { default: "" },
+    testId: { default: "" }
   },
   setup(t) {
-    return (F, S) => (a(), o("div", C, [
-      t.title ? (a(), f(k, {
+    const y = T(t.testId, x);
+    return (N, S) => (l(), o("div", h({ class: "chart-tooltip" }, e(y)[e(x).CONTAINER]), [
+      t.title ? (l(), f(I, {
         key: 0,
         title: t.title,
         "data-points": t.dataPoints,
@@ -34,64 +38,64 @@ const C = { class: "chart-tooltip" }, g = {
         "x-axis-format": t.xAxisFormat,
         "x-axis-date-interval": t.xAxisDateInterval
       }, null, 8, ["title", "data-points", "totals-chart", "x-axis-format", "x-axis-date-interval"])) : r("", !0),
-      t.totalsChart ? r("", !0) : (a(), o("ul", g, [
-        (a(!0), o(y, null, v(t.dataPoints, (e) => (a(), o("li", {
-          key: e.datasetIndex,
+      t.totalsChart ? r("", !0) : (l(), o("ul", g, [
+        (l(!0), o(b, null, C(t.dataPoints, (a) => (l(), o("li", {
+          key: a.datasetIndex,
           class: "list__item"
         }, [
           c("span", {
             class: "color-box",
-            style: h({
-              backgroundColor: String(e.dataset.pointBackgroundColor)
+            style: k({
+              backgroundColor: String(a.dataset.pointBackgroundColor)
             })
           }, null, 4),
-          e.dataset.icon ? (a(), f(l(b), {
+          a.dataset.icon ? (l(), f(e(A), {
             key: 0,
             class: "platform-icon",
-            type: e.dataset.iconType,
-            name: e.dataset.icon,
+            type: a.dataset.iconType,
+            name: a.dataset.icon,
             size: "16px"
           }, null, 8, ["type", "name"])) : r("", !0),
-          c("div", V, [
-            i(l(d), {
+          c("div", p, [
+            i(e(d), {
               variant: "body2",
               class: "flex-grow truncated-label",
               "is-truncated": ""
             }, {
-              default: n(() => [
-                u(s(e.dataset.label), 1)
+              default: s(() => [
+                u(n(a.dataset.label), 1)
               ]),
               _: 2
             }, 1024)
           ]),
-          i(l(d), { variant: "body2" }, {
-            default: n(() => [
-              u(s(t.valuePrefix + l(x)(e.parsed.y, t.yAxisFormat, !0, !1) + t.valueSuffix), 1)
+          i(e(d), { variant: "body2" }, {
+            default: s(() => [
+              u(n(t.valuePrefix + e(m)(a.parsed.y, t.yAxisFormat, !0, !1) + t.valueSuffix), 1)
             ]),
             _: 2
           }, 1024)
         ]))), 128))
       ])),
-      t.totalValue !== null ? (a(), o("div", A, [
-        i(l(d), {
+      t.totalValue !== null ? (l(), o("div", V, [
+        i(e(d), {
           variant: "body2",
           class: "flex-grow"
         }, {
-          default: n(() => [
-            u(s(t.totalLabel), 1)
+          default: s(() => [
+            u(n(t.totalLabel), 1)
           ]),
           _: 1
         }),
-        i(l(d), { variant: "body2" }, {
-          default: n(() => [
-            u(s(t.valuePrefix + l(x)(t.totalValue, t.yAxisFormat, !0) + t.valueSuffix), 1)
+        i(e(d), { variant: "body2" }, {
+          default: s(() => [
+            u(n(t.valuePrefix + e(m)(t.totalValue, t.yAxisFormat, !0) + t.valueSuffix), 1)
           ]),
           _: 1
         })
       ])) : r("", !0)
-    ]));
+    ], 16));
   }
 });
 export {
-  L as default
+  O as default
 };