@ironsource/shared-ui 2.1.12-test.1 → 2.1.12-test.101

package/components/chart/ChartPlane.vue2.js

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

package/components/chart/ChartStoryArgs.d.ts

@@ -176,4 +176,21 @@ export declare const chartStoryArgs: {
         };
         options: TooltipOrder[];
     };
+    colorVariant: {
+        description: string;
+        control: string;
+        options: string[];
+    };
+    indicateIncompleteData: {
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    tooltipExcludeTotalItem: {
+        description: string;
+        control: {
+            type: string;
+        };
+    };
 };

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

@@ -1,5 +1,5 @@
 import { DateInterval, MyTooltipItem, ValueFormat } from '@/components/chart/types';
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string;
     dataPoints: MyTooltipItem<'line'>[];
     xAxisFormat?: ValueFormat;
@@ -10,6 +10,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     totalsChart?: boolean;
     valueSuffix?: string;
     valuePrefix?: string;
+    testId?: string;
 }>, {
     title: string;
     dataPoints: () => any[];
@@ -21,7 +22,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     totalsChart: boolean;
     valueSuffix: string;
     valuePrefix: string;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    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'>[];
     xAxisFormat?: ValueFormat;
@@ -32,6 +34,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     totalsChart?: boolean;
     valueSuffix?: string;
     valuePrefix?: string;
+    testId?: string;
 }>, {
     title: string;
     dataPoints: () => any[];
@@ -43,8 +46,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     totalsChart: boolean;
     valueSuffix: string;
     valuePrefix: string;
-}>>> & Readonly<{}>, {
+    testId: string;
+}>>>, {
     title: string;
+    testId: string;
     xAxisFormat: ValueFormat;
     xAxisDateInterval: DateInterval;
     dataPoints: MyTooltipItem<'line'>[];
@@ -54,7 +59,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     totalValue: number;
     valueSuffix: string;
     valuePrefix: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {