@ironsource/shared-ui 2.1.12-rc.18 → 2.1.12-rc.19

package/Chart.vue_vue_type_style_index_0_scoped_53316c89_lang.css

@@ -0,0 +1 @@
+.chart-container[data-v-53316c89]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;border-radius:0 0 6px 6px;width:100%}.chart-planes[data-v-53316c89]{width:100%;height:100%;overflow-y:auto}.chart-planes.with-legend[data-v-53316c89]{width:calc(100% - 221px)}.chart-planes .extra-chart-plane[data-v-53316c89]{border-top:1px solid var(--common-divider)}.chart-sidebar[data-v-53316c89]{border-left:1px solid var(--common-divider)}

package/ChartPlane.vue_vue_type_style_index_0_scoped_903fc6ae_lang.css

@@ -0,0 +1 @@
+.chart-plane-container[data-v-903fc6ae]{--headerHeight: var(--d271311a);width:100%;height:var(--6c5bc85e);position:relative}.header-wrapper[data-v-903fc6ae]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-903fc6ae]{padding-top:var(--headerHeight);height:100%}.chart[data-v-903fc6ae]{width:100%;height:100%;position:relative}.chart__canvas[data-v-903fc6ae]{width:100%;height:100%}.chart__tooltip[data-v-903fc6ae]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}

package/ChartTooltip.vue_vue_type_style_index_0_scoped_e53c6287_lang.css

@@ -0,0 +1 @@
+.chart-tooltip[data-v-e53c6287]{color:var(--text-primary);background:var(--common-white);box-shadow:0 4px 8px -2px #1018281f;border:1px solid var(--common-divider-elevation-0);border-radius:var(--border-radius-md);width:280px;padding:calc(var(--spacing-100) - 1px)}.color-box[data-v-e53c6287]{width:12px;height:12px;border-radius:2px;display:inline-block;margin-right:var(--spacing-100)}.color-box+.platform-icon[data-v-e53c6287]{margin-left:calc(var(--spacing-50) - var(--spacing-100))}.list[data-v-e53c6287]{list-style:none;margin:0;padding:0}.list__item[data-v-e53c6287]{display:flex;align-items:center;margin-bottom:var(--spacing-50);color:var(--text-secondary)}.list__item[data-v-e53c6287]:last-child{margin-bottom:0}.platform-icon[data-v-e53c6287]{color:var(--action-active);margin-right:var(--spacing-50)}.popover-label-wrapper[data-v-e53c6287]{display:flex;width:200px;flex-grow:1}.truncated-label[data-v-e53c6287]{max-width:90%}.tooltip-footer[data-v-e53c6287]{display:flex;align-items:center;margin-top:var(--spacing-100);color:var(--text-primary)}.flex-grow[data-v-e53c6287]{flex-grow:1}

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

@@ -17,6 +17,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tooltipTotalType?: TotalType;
     tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
     tooltipOrder?: TooltipOrder;
+    valueSuffix?: string;
+    valuePrefix?: string;
     header?: string;
     subheader?: string;
     subheaderTooltip?: {
@@ -61,6 +63,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tooltipTotalType: TotalType;
     tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
     tooltipOrder: TooltipOrder;
+    valueSuffix: string;
+    valuePrefix: string;
     header: string;
     subheader: string;
     subheaderTooltip: any;
@@ -102,6 +106,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tooltipTotalType?: TotalType;
     tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
     tooltipOrder?: TooltipOrder;
+    valueSuffix?: string;
+    valuePrefix?: string;
     header?: string;
     subheader?: string;
     subheaderTooltip?: {
@@ -146,6 +152,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tooltipTotalType: TotalType;
     tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
     tooltipOrder: TooltipOrder;
+    valueSuffix: string;
+    valuePrefix: string;
     header: string;
     subheader: string;
     subheaderTooltip: any;
@@ -187,6 +195,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     totalsChart: boolean;
     parsing: ChartParsingConfig;
     yAxisFormat: ValueFormat;
+    valueSuffix: string;
+    valuePrefix: string;
     dataSets: ChartDataSet[];
     trendTooltip: any;
     subheader: string;

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_5525b3bc_lang.css"; //*');
-const c = /* @__PURE__ */ _(o, [["__scopeId", "data-v-5525b3bc"]]);
+// import "../../Chart.vue_vue_type_style_index_0_scoped_53316c89_lang.css"; //*');
+const c = /* @__PURE__ */ _(o, [["__scopeId", "data-v-53316c89"]]);
 export {
   c as default
 };

package/components/chart/Chart.vue2.js

@@ -1,8 +1,8 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_5525b3bc_lang.css"; import { defineComponent as O, ref as E, computed as n, openBlock as s, createElementBlock as m, Fragment as S, createBlock as I, unref as l, isRef as y, withCtx as d, renderSlot as u, createCommentVNode as D, createElementVNode as k, mergeProps as b, normalizeClass as N, createVNode as L, createSlots as P, renderList as M } from "vue";
+ import "../../Chart.vue_vue_type_style_index_0_scoped_53316c89_lang.css"; import { defineComponent as U, ref as O, computed as n, openBlock as s, createElementBlock as m, Fragment as S, createBlock as I, unref as i, isRef as b, withCtx as d, renderSlot as u, createCommentVNode as D, createElementVNode as k, mergeProps as y, normalizeClass as E, createVNode as L, createSlots as N, renderList as M } from "vue";
 import { useVModel as A } from "@vueuse/core";
 import $ from "./ChartLegend.vue.js";
 import K from "./SettingsHeader.vue.js";
-import F from "./ChartPlane.vue.js";
+import V from "./ChartPlane.vue.js";
 import { useColorsMap as z } from "./composables/useColorsMap.js";
 import { DEFAULT_TICK_COUNT as R, DEFAULT_MIN_VISIBLE as X, DEFAULT_MAX_VISIBLE as Y } from "./consts.js";
 import { ChartType as j, DateInterval as q, TooltipOrder as G, TrendDirection as J } from "./types.js";
@@ -11,7 +11,7 @@ import { TotalType as W, calculateTotal as Z } from "../../utils/totals.js";
 const _ = {
   key: 0,
   class: "chart-sidebar"
-}, ue = /* @__PURE__ */ O({
+}, ue = /* @__PURE__ */ U({
   __name: "Chart",
   props: {
     dataSets: { default: () => [] },
@@ -22,7 +22,7 @@ const _ = {
     yAxisFormat: { default: "number" },
     xAxisDateInterval: { default: q.DAILY },
     tickCount: { default: R },
-    truncateTickLabels: { type: Boolean, default: !0 },
+    truncateTickLabels: { type: Boolean, default: !1 },
     loading: { type: Boolean, default: !1 },
     empty: { type: Boolean, default: !1 },
     withAnimation: { type: Boolean, default: !0 },
@@ -30,6 +30,8 @@ const _ = {
     tooltipTotalType: { default: W.Total },
     tooltipTotalCalcFn: { type: Function, default: Z },
     tooltipOrder: { default: G.Legend },
+    valueSuffix: { default: "" },
+    valuePrefix: { default: "" },
     header: { default: "" },
     subheader: { default: "" },
     subheaderTooltip: { default: null },
@@ -52,8 +54,8 @@ const _ = {
     extraCharts: { default: () => [] }
   },
   emits: ["update:chartType", "update:visibleIds", "update:sortSelected"],
-  setup(i, { emit: p }) {
-    const e = i, r = A(e, "chartType", p), h = A(e, "sortSelected", p), c = E(null), g = n(() => ({
+  setup(a, { emit: p }) {
+    const e = a, r = A(e, "chartType", p), h = A(e, "sortSelected", p), c = O(null), g = n(() => ({
       dataSets: e.dataSets,
       visibleIds: e.visibleIds,
       parsing: e.parsing,
@@ -71,8 +73,8 @@ const _ = {
       noDataSubtitle: e.noDataSubtitle,
       withAnimation: e.withAnimation,
       typeSwitcher: !e.withSettingsHeader,
-      height: U.value,
-      compactHeader: C.value > 1,
+      height: P.value,
+      compactHeader: x.value > 1,
       trendValue: e.trendValue,
       trendDirection: e.trendDirection,
       trendTooltip: e.trendTooltip,
@@ -83,10 +85,12 @@ const _ = {
       tooltipTotalType: e.tooltipTotalType,
       tooltipTotalCalcFn: e.tooltipTotalCalcFn,
       tooltipOrder: e.tooltipOrder,
-      highlightedId: c.value
-    })), B = n(() => e.dataSets), T = n(() => e.visibleIds), v = n(() => e.extraCharts.length), C = n(() => 1 + v.value), V = (t) => t === v.value - 1, { colorsMap: f } = z({
-      dataSets: B,
-      visibleIds: T
+      highlightedId: c.value,
+      valueSuffix: e.valueSuffix,
+      valuePrefix: e.valuePrefix
+    })), F = n(() => e.dataSets), v = n(() => e.visibleIds), T = n(() => e.extraCharts.length), x = n(() => 1 + T.value), B = (t) => t === T.value - 1, { colorsMap: f } = z({
+      dataSets: F,
+      visibleIds: v
     }), w = n(() => e.dataSets.map((t) => ({
       id: t.id,
       label: t.label,
@@ -94,16 +98,16 @@ const _ = {
       color: f.value[t.id] || null,
       icon: t.icon || null,
       iconType: t.iconType || "branded"
-    }))), { containerProps: H, eachPlaneHeight: U } = Q({
-      chartPlanesCount: C,
+    }))), { containerProps: H, eachPlaneHeight: P } = Q({
+      chartPlanesCount: x,
       useFullHeight: e.fullHeight
     });
     return (t, o) => (s(), m(S, null, [
-      i.withSettingsHeader ? (s(), I(K, {
+      a.withSettingsHeader ? (s(), I(K, {
         key: 0,
-        "chart-type": l(r),
-        "onUpdate:chart-type": o[0] || (o[0] = (a) => y(r) ? r.value = a : null),
-        "hide-legend": i.hideLegend
+        "chart-type": i(r),
+        "onUpdate:chart-type": o[0] || (o[0] = (l) => b(r) ? r.value = l : null),
+        "hide-legend": a.hideLegend
       }, {
         "before-chart-type": d(() => [
           u(t.$slots, "before-chart-type", {}, void 0, !0)
@@ -116,14 +120,14 @@ const _ = {
         ]),
         _: 3
       }, 8, ["chart-type", "hide-legend"])) : D("", !0),
-      k("div", b({ class: "chart-container" }, l(H)), [
+      k("div", y({ class: "chart-container" }, i(H)), [
         k("section", {
-          class: N(["chart-planes", [{ "with-legend": !i.hideLegend }]])
+          class: E(["chart-planes", [{ "with-legend": !a.hideLegend }]])
         }, [
-          L(F, b({
-            "chart-type": l(r),
-            "onUpdate:chart-type": o[1] || (o[1] = (a) => y(r) ? r.value = a : null)
-          }, l(g)), P({ _: 2 }, [
+          L(V, y({
+            "chart-type": i(r),
+            "onUpdate:chart-type": o[1] || (o[1] = (l) => b(r) ? r.value = l : null)
+          }, i(g)), N({ _: 2 }, [
             t.$slots["subheader-tooltip"] ? {
               name: "subheader-tooltip",
               fn: d(() => [
@@ -132,29 +136,31 @@ const _ = {
               key: "0"
             } : void 0
           ]), 1040, ["chart-type"]),
-          (s(!0), m(S, null, M(i.extraCharts, (a, x) => (s(), I(F, b({
-            key: x,
+          (s(!0), m(S, null, M(a.extraCharts, (l, C) => (s(), I(V, y({
+            key: C,
             class: "extra-chart-plane"
-          }, { ...l(g), ...a }, {
-            "chart-type": l(r),
-            "colors-map": l(f),
+          }, { ...i(g), ...l }, {
+            "chart-type": i(r),
+            "colors-map": i(f),
             "type-switcher": !1,
-            "tooltip-respects-top-edge": !V(x)
+            "tooltip-respects-top-edge": !B(C)
           }), null, 16, ["chart-type", "colors-map", "tooltip-respects-top-edge"]))), 128))
         ], 2),
-        i.hideLegend ? D("", !0) : (s(), m("section", _, [
+        a.hideLegend ? D("", !0) : (s(), m("section", _, [
           L($, {
-            "sort-selected": l(h),
-            "onUpdate:sort-selected": o[2] || (o[2] = (a) => y(h) ? h.value = a : null),
+            "sort-selected": i(h),
+            "onUpdate:sort-selected": o[2] || (o[2] = (l) => b(h) ? h.value = l : null),
             "highlighted-id": c.value,
-            "onUpdate:highlighted-id": o[3] || (o[3] = (a) => c.value = a),
-            items: l(w),
-            "visible-ids": l(T),
-            "max-limit-tooltip-text": i.maxLimitTooltipText,
-            "sort-options": i.sortOptions,
-            "sort-option-name-key": i.sortOptionNameKey,
-            "onUpdate:visibleIds": o[4] || (o[4] = (a) => p("update:visibleIds", a))
-          }, null, 8, ["sort-selected", "highlighted-id", "items", "visible-ids", "max-limit-tooltip-text", "sort-options", "sort-option-name-key"])
+            "onUpdate:highlighted-id": o[3] || (o[3] = (l) => c.value = l),
+            items: i(w),
+            "visible-ids": i(v),
+            "max-limit-tooltip-text": a.maxLimitTooltipText,
+            "sort-options": a.sortOptions,
+            "sort-option-name-key": a.sortOptionNameKey,
+            "min-visible": a.minVisible,
+            "max-visible": a.maxVisible,
+            "onUpdate:visibleIds": o[4] || (o[4] = (l) => p("update:visibleIds", l))
+          }, null, 8, ["sort-selected", "highlighted-id", "items", "visible-ids", "max-limit-tooltip-text", "sort-options", "sort-option-name-key", "min-visible", "max-visible"])
         ]))
       ], 16)
     ], 64));

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

@@ -40,6 +40,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     };
     totalsChart?: boolean;
     colorsMap: Record<string, string>;
+    valueSuffix?: string;
+    valuePrefix?: string;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -73,6 +75,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     trendTooltip: any;
     totalsChart: boolean;
     colorsMap: () => {};
+    valueSuffix: string;
+    valuePrefix: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:chartType": (chartType: ChartType) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -115,6 +119,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     };
     totalsChart?: boolean;
     colorsMap: Record<string, string>;
+    valueSuffix?: string;
+    valuePrefix?: string;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -148,6 +154,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     trendTooltip: any;
     totalsChart: boolean;
     colorsMap: () => {};
+    valueSuffix: string;
+    valuePrefix: string;
 }>>> & {
     "onUpdate:chartType"?: (chartType: ChartType) => any;
 }, {
@@ -162,6 +170,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     totalsChart: boolean;
     parsing: ChartParsingConfig;
     yAxisFormat: ValueFormat;
+    valueSuffix: string;
+    valuePrefix: string;
     dataSets: ChartDataSet[];
     trendTooltip: any;
     subheader: string;

package/components/chart/ChartPlane.vue.js

@@ -1,7 +1,7 @@
-import o from "./ChartPlane.vue2.js";
-/* empty css                 */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartPlane.vue_vue_type_style_index_0_scoped_fc79a730_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-fc79a730"]]);
+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_903fc6ae_lang.css"; //*');
+const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-903fc6ae"]]);
 export {
   s as default
 };

package/components/chart/ChartPlane.vue2.js

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

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

@@ -8,6 +8,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     totalLabel?: string;
     totalValue?: number;
     totalsChart?: boolean;
+    valueSuffix?: string;
+    valuePrefix?: string;
 }>, {
     title: string;
     dataPoints: () => any[];
@@ -17,6 +19,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     totalLabel: string;
     totalValue: any;
     totalsChart: boolean;
+    valueSuffix: string;
+    valuePrefix: 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'>[];
@@ -26,6 +30,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     totalLabel?: string;
     totalValue?: number;
     totalsChart?: boolean;
+    valueSuffix?: string;
+    valuePrefix?: string;
 }>, {
     title: string;
     dataPoints: () => any[];
@@ -35,6 +41,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     totalLabel: string;
     totalValue: any;
     totalsChart: boolean;
+    valueSuffix: string;
+    valuePrefix: string;
 }>>>, {
     title: string;
     xAxisFormat: ValueFormat;
@@ -44,6 +52,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     yAxisFormat: ValueFormat;
     totalLabel: string;
     totalValue: number;
+    valueSuffix: string;
+    valuePrefix: string;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/chart/ChartTooltip.vue.js

@@ -1,7 +1,7 @@
 import o from "./ChartTooltip.vue2.js";
-/* empty css                   */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_cb98e9e3_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-cb98e9e3"]]);
+/* empty css                   */import t from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_e53c6287_lang.css"; //*');
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-e53c6287"]]);
 export {
   s as default
 };

package/components/chart/ChartTooltip.vue2.js

@@ -1,16 +1,16 @@
- import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_cb98e9e3_lang.css"; import { defineComponent as x, openBlock as a, createElementBlock as o, createBlock as c, createCommentVNode as r, Fragment as y, renderList as h, createElementVNode as m, normalizeStyle as v, unref as l, createVNode as i, withCtx as s, createTextVNode as n, toDisplayString as d } from "vue";
-import u from "../typography/v4/Typography.vue.js";
+ import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_e53c6287_lang.css"; import { defineComponent as m, openBlock as a, createElementBlock as o, createBlock as c, createCommentVNode as r, Fragment as y, renderList as v, createElementVNode as f, normalizeStyle as h, unref as l, createVNode as i, withCtx as n, createTextVNode as s, toDisplayString as u } from "vue";
+import d from "../typography/v4/Typography.vue.js";
 import b from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
-import { formatValue as f } from "./utils/utils.js";
+import { formatValue as x } from "./utils/utils.js";
 import k from "./TooltipHeader.vue.js";
-const p = { class: "chart-tooltip" }, C = {
+const C = { class: "chart-tooltip" }, g = {
   key: 1,
   class: "list"
-}, g = { class: "popover-label-wrapper" }, V = {
+}, V = { class: "popover-label-wrapper" }, A = {
   key: 2,
   class: "tooltip-footer"
-}, L = /* @__PURE__ */ x({
+}, L = /* @__PURE__ */ m({
   __name: "ChartTooltip",
   props: {
     title: { default: "" },
@@ -20,10 +20,12 @@ const p = { class: "chart-tooltip" }, C = {
     xAxisDateInterval: { default: null },
     totalLabel: { default: "Total" },
     totalValue: { default: null },
-    totalsChart: { type: Boolean, default: !1 }
+    totalsChart: { type: Boolean, default: !1 },
+    valueSuffix: { default: "" },
+    valuePrefix: { default: "" }
   },
   setup(t) {
-    return (A, F) => (a(), o("div", p, [
+    return (F, S) => (a(), o("div", C, [
       t.title ? (a(), c(k, {
         key: 0,
         title: t.title,
@@ -32,14 +34,14 @@ const p = { class: "chart-tooltip" }, C = {
         "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", C, [
-        (a(!0), o(y, null, h(t.dataPoints, (e) => (a(), o("li", {
+      t.totalsChart ? r("", !0) : (a(), o("ul", g, [
+        (a(!0), o(y, null, v(t.dataPoints, (e) => (a(), o("li", {
           key: e.datasetIndex,
           class: "list__item"
         }, [
-          m("span", {
+          f("span", {
             class: "color-box",
-            style: v({
+            style: h({
               backgroundColor: String(e.dataset.pointBackgroundColor)
             })
           }, null, 4),
@@ -50,39 +52,39 @@ const p = { class: "chart-tooltip" }, C = {
             name: e.dataset.icon,
             size: "16px"
           }, null, 8, ["type", "name"])) : r("", !0),
-          m("div", g, [
-            i(l(u), {
+          f("div", V, [
+            i(l(d), {
               variant: "body2",
               class: "flex-grow truncated-label",
               "is-truncated": ""
             }, {
-              default: s(() => [
-                n(d(e.dataset.label), 1)
+              default: n(() => [
+                s(u(e.dataset.label), 1)
               ]),
               _: 2
             }, 1024)
           ]),
-          i(l(u), { variant: "body2" }, {
-            default: s(() => [
-              n(d(l(f)(e.parsed.y, t.yAxisFormat)), 1)
+          i(l(d), { variant: "body2" }, {
+            default: n(() => [
+              s(u(t.valuePrefix + l(x)(e.parsed.y, t.yAxisFormat) + t.valueSuffix), 1)
             ]),
             _: 2
           }, 1024)
         ]))), 128))
       ])),
-      t.totalValue !== null ? (a(), o("div", V, [
-        i(l(u), {
+      t.totalValue !== null ? (a(), o("div", A, [
+        i(l(d), {
           variant: "body2",
           class: "flex-grow"
         }, {
-          default: s(() => [
-            n(d(t.totalLabel), 1)
+          default: n(() => [
+            s(u(t.totalLabel), 1)
           ]),
           _: 1
         }),
-        i(l(u), { variant: "body2" }, {
-          default: s(() => [
-            n(d(l(f)(t.totalValue, t.yAxisFormat)), 1)
+        i(l(d), { variant: "body2" }, {
+          default: n(() => [
+            s(u(t.valuePrefix + l(x)(t.totalValue, t.yAxisFormat) + t.valueSuffix), 1)
           ]),
           _: 1
         })

package/components/chart/consts.d.ts

@@ -32,5 +32,5 @@ export declare const CHART_PADDING: {
     top: number;
     bottom: number;
 };
-export declare const TICKS_EXTRA_PADDING = 10;
+export declare const TICKS_EXTRA_PADDING = 6;
 export declare const LONG_DATE_FORMAT: ValueFormat;

package/components/chart/consts.js

@@ -12,7 +12,7 @@ const t = "#fcfcfc", n = "#E4E4E4", T = "#646464", o = {
   right: 18,
   top: 18,
   bottom: 11
-}, d = 10, g = "dateLong";
+}, d = 6, g = "dateLong";
 export {
   D as BASE_COLOR_KEY,
   i as BIDDING_PREFIX,

package/components/chart/index.d.ts

@@ -21,6 +21,8 @@ declare const ChartTypes: () => ({
             totalsChart: boolean;
             parsing: import("./types").ChartParsingConfig;
             yAxisFormat: import("./types").ValueFormat;
+            valueSuffix: string;
+            valuePrefix: string;
             dataSets: import("./types").ChartDataSet[];
             trendTooltip: any;
             subheader: string;
@@ -107,6 +109,14 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<import("./types").ValueFormat>;
                 default: string;
             };
+            valueSuffix: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            valuePrefix: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             dataSets: {
                 type: import("vue").PropType<import("./types").ChartDataSet[]>;
                 required: true;
@@ -199,7 +209,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" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "sortSelected" | "sortOptions" | "sortOptionNameKey" | "chartType" | "hideLegend" | "xAxisFormat" | "xAxisDateInterval" | "totalsChart" | "parsing" | "yAxisFormat" | "dataSets" | "trendTooltip" | "subheader" | "subheaderTooltip" | "trendValue" | "trendDirection" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "fullHeight" | "withSettingsHeader" | "extraCharts">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "sortSelected" | "sortOptions" | "sortOptionNameKey" | "chartType" | "hideLegend" | "xAxisFormat" | "xAxisDateInterval" | "totalsChart" | "parsing" | "yAxisFormat" | "valueSuffix" | "valuePrefix" | "dataSets" | "trendTooltip" | "subheader" | "subheaderTooltip" | "trendValue" | "trendDirection" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "fullHeight" | "withSettingsHeader" | "extraCharts">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -279,6 +289,14 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<import("./types").ValueFormat>;
                 default: string;
             };
+            valueSuffix: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            valuePrefix: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             dataSets: {
                 type: import("vue").PropType<import("./types").ChartDataSet[]>;
                 required: true;
@@ -392,6 +410,8 @@ declare const ChartTypes: () => ({
             totalsChart: boolean;
             parsing: import("./types").ChartParsingConfig;
             yAxisFormat: import("./types").ValueFormat;
+            valueSuffix: string;
+            valuePrefix: string;
             dataSets: import("./types").ChartDataSet[];
             trendTooltip: any;
             subheader: string;
@@ -498,6 +518,14 @@ declare const ChartTypes: () => ({
             type: import("vue").PropType<import("./types").ValueFormat>;
             default: string;
         };
+        valueSuffix: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        valuePrefix: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         dataSets: {
             type: import("vue").PropType<import("./types").ChartDataSet[]>;
             required: true;
@@ -660,6 +688,14 @@ declare const ChartTypes: () => ({
         type: import("vue").PropType<import("./types").ValueFormat>;
         default: string;
     };
+    valueSuffix: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    valuePrefix: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     dataSets: {
         type: import("vue").PropType<import("./types").ChartDataSet[]>;
         required: true;
@@ -773,6 +809,8 @@ declare const ChartTypes: () => ({
     totalsChart: boolean;
     parsing: import("./types").ChartParsingConfig;
     yAxisFormat: import("./types").ValueFormat;
+    valueSuffix: string;
+    valuePrefix: string;
     dataSets: import("./types").ChartDataSet[];
     trendTooltip: any;
     subheader: string;

package/components/chart/utils/utils.js

@@ -1,27 +1,27 @@
 import { format as f } from "date-fns";
-import { TICK_LABEL_FONT as a } from "../consts.js";
-import { nFormatter as c } from "../../../utils/formatNumbers.js";
-import { truncateTextToFit as d } from "../../../utils/text.js";
-import { REGEX_LINEBREAK as m } from "../../../consts/regex.js";
+import { TICK_LABEL_FONT as c } from "../consts.js";
+import { nFormatter as d } from "../../../utils/formatNumbers.js";
+import { truncateTextToFit as E } from "../../../utils/text.js";
+import { REGEX_LINEBREAK as i } from "../../../consts/regex.js";
 const g = (r, t, e) => {
   if (e === 0)
     return 0;
   const n = t - r, o = n / e * 0.4;
   return (n + o) / e;
-}, E = (r, t) => t === "day" ? f(new Date(r), "EEEE") : t === "number" ? c(r) : t === "date" ? f(new Date(r), "MMM dd") : t === "dateLong" ? f(new Date(r), "MMM dd, yyyy") : String(r), w = ({
+}, a = (r, t) => t === "day" ? f(new Date(r), "EEEE") : t === "number" ? d(r) : t === "date" ? f(new Date(r), "MMM dd") : t === "dateLong" ? f(new Date(r), "MMM dd, yyyy") : String(r), w = ({
   label: r,
   format: t,
   availableSpace: e,
   truncate: n = !1
 }) => {
-  const s = m.test(r), o = (p) => {
-    const i = E(p, t);
-    return n ? d(i, a, e) : i;
+  const s = i.test(r), o = (p) => {
+    const m = a(p, t);
+    return n && e > 0 ? E(m, c, e) : m;
   };
-  return s ? r.split(m).map(o) : o(r);
+  return s ? r.split(i).map(o) : o(r);
 };
 export {
   g as calcStepSize,
-  E as formatValue,
+  a as formatValue,
   w as prepareTickLabel
 };

package/index.js

@@ -1,4 +1,4 @@
-import './AppIcon.vue_vue_type_style_index_0_scoped_56ba337c_lang.css';
+import './IncludeExcludeOption.vue_vue_type_style_index_0_scoped_91bc7787_lang.css';
 import { AppTriggerTypes as eo } from "./components/appTrigger/index.js";
 import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
 import { MenuItemTypes as ao } from "./components/menuItem/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.1.12-rc.18",
+  "version": "2.1.12-rc.19",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/Chart.vue_vue_type_style_index_0_scoped_5525b3bc_lang.css

@@ -1 +0,0 @@
-.chart-container[data-v-5525b3bc]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;border-radius:0 0 6px 6px;width:100%}.chart-planes[data-v-5525b3bc]{width:100%;height:100%;overflow-y:auto}.chart-planes.with-legend[data-v-5525b3bc]{width:calc(100% - 221px)}.chart-planes .extra-chart-plane[data-v-5525b3bc]{border-top:1px solid var(--common-divider)}.chart-sidebar[data-v-5525b3bc]{border-left:1px solid var(--common-divider)}

package/ChartPlane.vue_vue_type_style_index_0_scoped_fc79a730_lang.css

@@ -1 +0,0 @@
-.chart-plane-container[data-v-fc79a730]{--headerHeight: var(--498cf638);width:100%;height:var(--b6d23262);position:relative}.header-wrapper[data-v-fc79a730]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-fc79a730]{padding-top:var(--headerHeight);height:100%}.chart[data-v-fc79a730]{width:100%;height:100%;position:relative}.chart__canvas[data-v-fc79a730]{width:100%;height:100%}.chart__tooltip[data-v-fc79a730]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}

package/ChartTooltip.vue_vue_type_style_index_0_scoped_cb98e9e3_lang.css

@@ -1 +0,0 @@
-.chart-tooltip[data-v-cb98e9e3]{color:var(--text-primary);background:var(--common-white);box-shadow:0 4px 8px -2px #1018281f;border:1px solid var(--common-divider-elevation-0);border-radius:var(--border-radius-md);width:280px;padding:calc(var(--spacing-100) - 1px)}.color-box[data-v-cb98e9e3]{width:12px;height:12px;border-radius:2px;display:inline-block;margin-right:var(--spacing-100)}.color-box+.platform-icon[data-v-cb98e9e3]{margin-left:calc(var(--spacing-50) - var(--spacing-100))}.list[data-v-cb98e9e3]{list-style:none;margin:0;padding:0}.list__item[data-v-cb98e9e3]{display:flex;align-items:center;margin-bottom:var(--spacing-50);color:var(--text-secondary)}.list__item[data-v-cb98e9e3]:last-child{margin-bottom:0}.platform-icon[data-v-cb98e9e3]{color:var(--action-active);margin-right:var(--spacing-50)}.popover-label-wrapper[data-v-cb98e9e3]{display:flex;width:200px;flex-grow:1}.truncated-label[data-v-cb98e9e3]{max-width:90%}.tooltip-footer[data-v-cb98e9e3]{display:flex;align-items:center;margin-top:var(--spacing-100);color:var(--text-primary)}.flex-grow[data-v-cb98e9e3]{flex-grow:1}