@ironsource/shared-ui 2.1.12-test.69 → 2.1.12-test.71

package/components/chart/ChartTooltip.vue2.js

@@ -1,86 +1,90 @@
- import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_9e521454_lang.css"; import { defineComponent as y, openBlock as a, createElementBlock as o, createBlock as u, createCommentVNode as r, Fragment as x, renderList as h, createElementVNode as m, normalizeStyle as p, unref as l, createVNode as s, withCtx as i, createTextVNode as n, toDisplayString as d } from "vue";
-import c 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 C = { class: "chart-tooltip" }, g = {
   key: 1,
   class: "list"
-}, v = { class: "popover-label-wrapper" }, V = {
+}, V = { class: "popover-label-wrapper" }, A = {
   key: 2,
   class: "tooltip-footer"
-}, z = /* @__PURE__ */ y({
+}, L = /* @__PURE__ */ m({
   __name: "ChartTooltip",
   props: {
     title: { default: "" },
     dataPoints: { default: () => [] },
     xAxisFormat: { default: null },
     yAxisFormat: { default: null },
+    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 (F, T) => (a(), o("div", C, [
-      t.title ? (a(), u(k, {
+    return (F, S) => (a(), o("div", C, [
+      t.title ? (a(), c(k, {
         key: 0,
         title: t.title,
         "data-points": t.dataPoints,
         "totals-chart": t.totalsChart,
-        "x-axis-format": t.xAxisFormat
-      }, null, 8, ["title", "data-points", "totals-chart", "x-axis-format"])) : r("", !0),
+        "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(x, null, h(t.dataPoints, (e) => (a(), o("li", {
+        (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: p({
+            style: h({
               backgroundColor: String(e.dataset.pointBackgroundColor)
             })
           }, null, 4),
-          e.dataset.icon ? (a(), u(l(b), {
+          e.dataset.icon ? (a(), c(l(b), {
             key: 0,
             class: "platform-icon",
             type: e.dataset.iconType,
             name: e.dataset.icon,
             size: "16px"
           }, null, 8, ["type", "name"])) : r("", !0),
-          m("div", v, [
-            s(l(c), {
+          f("div", V, [
+            i(l(d), {
               variant: "body2",
               class: "flex-grow truncated-label",
               "is-truncated": ""
             }, {
-              default: i(() => [
-                n(d(e.dataset.label), 1)
+              default: n(() => [
+                s(u(e.dataset.label), 1)
               ]),
               _: 2
             }, 1024)
           ]),
-          s(l(c), { variant: "body2" }, {
-            default: i(() => [
-              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, [
-        s(l(c), {
+      t.totalValue !== null ? (a(), o("div", A, [
+        i(l(d), {
           variant: "body2",
           class: "flex-grow"
         }, {
-          default: i(() => [
-            n(d(t.totalLabel), 1)
+          default: n(() => [
+            s(u(t.totalLabel), 1)
           ]),
           _: 1
         }),
-        s(l(c), { variant: "body2" }, {
-          default: i(() => [
-            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
         })
@@ -89,5 +93,5 @@ const C = { class: "chart-tooltip" }, g = {
   }
 });
 export {
-  z as default
+  L as default
 };

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

@@ -1,27 +1,32 @@
-import { MyTooltipItem, ValueFormat } from '@/components/chart/types';
+import { DateInterval, MyTooltipItem, ValueFormat } from '@/components/chart/types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string;
     xAxisFormat?: ValueFormat;
+    xAxisDateInterval?: DateInterval;
     dataPoints: MyTooltipItem<'line'>[];
     totalsChart?: boolean;
 }>, {
     title: string;
     xAxisFormat: any;
+    xAxisDateInterval: any;
     dataPoints: () => any[];
     totalsChart: boolean;
 }>, {}, 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;
     xAxisFormat?: ValueFormat;
+    xAxisDateInterval?: DateInterval;
     dataPoints: MyTooltipItem<'line'>[];
     totalsChart?: boolean;
 }>, {
     title: string;
     xAxisFormat: any;
+    xAxisDateInterval: any;
     dataPoints: () => any[];
     totalsChart: boolean;
 }>>>, {
     title: string;
     xAxisFormat: ValueFormat;
+    xAxisDateInterval: DateInterval;
     dataPoints: MyTooltipItem<'line'>[];
     totalsChart: boolean;
 }>;

package/components/chart/TooltipHeader.vue.js

@@ -1,7 +1,7 @@
 import o from "./TooltipHeader.vue2.js";
 /* empty css                    */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../TooltipHeader.vue_vue_type_style_index_0_scoped_9f6cf389_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-9f6cf389"]]);
+// import "../../TooltipHeader.vue_vue_type_style_index_0_scoped_3b15c693_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-3b15c693"]]);
 export {
   s as default
 };

package/components/chart/TooltipHeader.vue2.js

@@ -1,59 +1,69 @@
- import "../../TooltipHeader.vue_vue_type_style_index_0_scoped_9f6cf389_lang.css"; import { defineComponent as h, computed as l, openBlock as r, createElementBlock as s, createElementVNode as g, unref as t, createCommentVNode as i, createBlock as n, createVNode as F, withCtx as c, createTextVNode as u, toDisplayString as m } from "vue";
-import { formatValue as d } from "./utils/utils.js";
-import f from "../typography/v4/Typography.vue.js";
-import C from "../icon/v4/IconV4.vue.js";
+ import "../../TooltipHeader.vue_vue_type_style_index_0_scoped_3b15c693_lang.css"; import { defineComponent as v, computed as m, openBlock as n, createElementBlock as f, createElementVNode as A, unref as t, createCommentVNode as s, createBlock as u, createVNode as D, withCtx as d, createTextVNode as x, toDisplayString as p } from "vue";
+import { formatValue as r } from "./utils/utils.js";
+import y from "../typography/v4/Typography.vue.js";
+import { DateInterval as c } from "./types.js";
+import T from "../icon/v4/IconV4.vue.js";
 import k from "../icon/v4/IconFlag.vue.js";
-const v = { class: "tooltip-title-wrapper" }, A = { class: "main-title" }, T = ["src"], D = /* @__PURE__ */ h({
+import { startOfWeek as C, endOfWeek as F, startOfMonth as I, endOfMonth as O } from "date-fns";
+import { LONG_DATE_FORMAT as i } from "./consts.js";
+const E = { class: "tooltip-title-wrapper" }, N = { class: "main-title" }, L = ["src"], P = /* @__PURE__ */ v({
   __name: "TooltipHeader",
   props: {
     title: { default: "" },
     xAxisFormat: { default: null },
+    xAxisDateInterval: { default: null },
     dataPoints: { default: () => [] },
     totalsChart: { type: Boolean, default: !1 }
   },
-  setup(o) {
-    const e = o, a = l(() => e.dataPoints.length ? e.dataPoints[0].dataset : null), p = l(() => e.xAxisFormat === "date" ? "dateLong" : e.xAxisFormat), x = l(() => e.xAxisFormat === "date" ? "day" : e.xAxisFormat), y = l(() => e.totalsChart ? a.value?.label || e.title : d(e.title, p.value));
-    return (V, b) => (r(), s("div", v, [
-      g("div", A, [
-        o.totalsChart && t(a)?.image ? (r(), s("img", {
+  setup(a) {
+    const e = a, o = m(() => e.dataPoints.length ? e.dataPoints[0].dataset : null), h = m(() => e.totalsChart ? o.value?.label || e.title : e.xAxisFormat === "date" ? g(new Date(e.title)) : r(e.title, e.xAxisFormat)), g = (l) => e.xAxisDateInterval === c.WEEKLY ? `
+      ${r(C(l), i)} -
+      ${r(F(l), i)}
+    ` : e.xAxisDateInterval === c.MONTHLY ? `
+      ${r(I(l), i)} -
+      ${r(O(l), i)}
+    ` : r(l, i);
+    return (l, M) => (n(), f("div", E, [
+      A("div", N, [
+        a.totalsChart && t(o)?.image ? (n(), f("img", {
           key: 0,
           class: "title-image",
-          src: t(a)?.image
-        }, null, 8, T)) : i("", !0),
-        o.totalsChart && t(a)?.countryFlag ? (r(), n(t(k), {
+          src: t(o)?.image
+        }, null, 8, L)) : s("", !0),
+        a.totalsChart && t(o)?.countryFlag ? (n(), u(t(k), {
           key: 1,
-          "country-code": t(a).countryFlag
-        }, null, 8, ["country-code"])) : i("", !0),
-        o.totalsChart && t(a)?.icon ? (r(), n(t(C), {
+          "country-code": t(o).countryFlag
+        }, null, 8, ["country-code"])) : s("", !0),
+        a.totalsChart && t(o)?.icon ? (n(), u(t(T), {
           key: 2,
           class: "platform-icon",
-          type: t(a)?.iconType,
-          name: t(a)?.icon,
+          type: t(o)?.iconType,
+          name: t(o)?.icon,
           size: "16px"
-        }, null, 8, ["type", "name"])) : i("", !0),
-        F(t(f), {
+        }, null, 8, ["type", "name"])) : s("", !0),
+        D(t(y), {
           class: "title-text",
           variant: "subtitle2"
         }, {
-          default: c(() => [
-            u(m(t(y)), 1)
+          default: d(() => [
+            x(p(t(h)), 1)
           ]),
           _: 1
         })
       ]),
-      o.xAxisFormat === "date" ? (r(), n(t(f), {
+      a.xAxisFormat === "date" && a.xAxisDateInterval !== t(c).WEEKLY && a.xAxisDateInterval !== t(c).MONTHLY ? (n(), u(t(y), {
         key: 0,
         class: "tooltip-sub-title",
         variant: "caption"
       }, {
-        default: c(() => [
-          u(m(t(d)(o.title, t(x))), 1)
+        default: d(() => [
+          x(p(t(r)(a.title, "day")), 1)
         ]),
         _: 1
-      })) : i("", !0)
+      })) : s("", !0)
     ]));
   }
 });
 export {
-  D as default
+  P as default
 };

package/components/chart/composables/useChartHeight.d.ts

@@ -1,5 +1,5 @@
 import { UseChartHeightArgs } from '@/components/chart/types';
-export declare const useChartHeight: ({ chartPlanesCount, useFullHeight, }: UseChartHeightArgs) => {
+export declare const useChartHeight: ({ chartPlanesCount, useFullHeight, bottomSpacing, }: UseChartHeightArgs) => {
     containerProps: import("vue").ComputedRef<Record<string, unknown>>;
     eachPlaneHeight: import("vue").ComputedRef<string>;
 };

package/components/chart/composables/useChartHeight.js

@@ -1,22 +1,24 @@
-import { ref as H, computed as o } from "vue";
-import { useElementBounding as g, useWindowScroll as m } from "@vueuse/core";
-import { useFullPageHeight as f } from "../../../composables/useFullPageHeight.js";
-import { DEFAULT_CHART_PLANE_HEIGHT as p, HEADER_HEIGHT as E, MIN_PLANE_HEIGHT as r } from "../consts.js";
-const P = ({
+import { ref as g, computed as o } from "vue";
+import { useElementBounding as m, useWindowScroll as f } from "@vueuse/core";
+import { useFullPageHeight as p } from "../../../composables/useFullPageHeight.js";
+import { DEFAULT_CHART_PLANE_HEIGHT as E, HEADER_HEIGHT as v, MIN_PLANE_HEIGHT as r } from "../consts.js";
+const T = ({
   chartPlanesCount: e,
-  useFullHeight: n
+  useFullHeight: n,
+  bottomSpacing: i = 50
 }) => {
-  const t = H(), { height: i } = g(t), { cssHeightValue: c } = f({
-    elem: t
-  }), { y: l } = m(), s = o(() => n && !l.value ? c.value : p + E + "px"), u = o(() => ({
+  const t = g(), { height: c } = m(t), { cssHeightValue: l } = p({
+    elem: t,
+    bottomSpacing: i
+  }), { y: s } = f(), u = o(() => n && !s.value ? l.value : E + v + "px"), h = o(() => ({
     ref: t,
-    style: { height: s.value }
-  })), h = o(() => e.value === 1 ? "100%" : i.value / e.value < r ? `${r}px` : 100 / e.value + "%");
+    style: { height: u.value }
+  })), a = o(() => e.value === 1 ? "100%" : c.value / e.value < r ? `${r}px` : 100 / e.value + "%");
   return {
-    containerProps: u,
-    eachPlaneHeight: h
+    containerProps: h,
+    eachPlaneHeight: a
   };
 };
 export {
-  P as useChartHeight
+  T as useChartHeight
 };

package/components/chart/consts.d.ts

@@ -1,4 +1,4 @@
-import { DropdownTypeOption, Font } from './types';
+import { DropdownTypeOption, Font, ValueFormat } from './types';
 export declare const POINT_BORDER_COLOR = "#fcfcfc";
 export declare const GRID_LINE_COLOR = "#E4E4E4";
 export declare const TICK_LABEL_COLOR = "#646464";
@@ -32,4 +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

@@ -7,17 +7,17 @@ const t = "#fcfcfc", n = "#E4E4E4", T = "#646464", o = {
   { id: _.Line, name: "Line" },
   { id: _.StackedLine, name: "Stack" },
   { id: _.Bar, name: "Bar" }
-], N = 76, I = 43, s = 312, L = 187, e = "__TOTALS_HELPER_KEY__", i = "___BASE_COLOR__", C = "Bidding", D = "ironSource", K = "UnityAds", P = "Meta", H = "Google", S = "Mintegral", B = "AppLovin", a = "InMobi", G = "DT Exchange", M = "Pangle", r = "Liftoff Monetize", W = 10, F = 70, f = {
+], N = 76, L = 43, s = 312, I = 187, e = "__TOTALS_HELPER_KEY__", D = "___BASE_COLOR__", i = "Bidding", C = "ironSource", K = "UnityAds", P = "Meta", H = "Google", S = "Mintegral", a = "AppLovin", B = "InMobi", G = "DT Exchange", M = "Pangle", r = "Liftoff Monetize", F = 10, W = 70, f = {
   left: 18,
   right: 18,
   top: 18,
   bottom: 11
-}, U = 10;
+}, d = 6, g = "dateLong";
 export {
-  i as BASE_COLOR_KEY,
-  C as BIDDING_PREFIX,
+  D as BASE_COLOR_KEY,
+  i as BIDDING_PREFIX,
   f as CHART_PADDING,
-  I as COMPACT_HEADER_HEIGHT,
+  L as COMPACT_HEADER_HEIGHT,
   s as DEFAULT_CHART_PLANE_HEIGHT,
   R as DEFAULT_MAX_VISIBLE,
   A as DEFAULT_MIN_VISIBLE,
@@ -25,21 +25,22 @@ export {
   c as DROPDOWN_TYPE_OPTIONS,
   n as GRID_LINE_COLOR,
   N as HEADER_HEIGHT,
-  F as HOVER_AREA_TRANSPARENCY,
-  W as HOVER_TRANSPARENCY,
-  L as MIN_PLANE_HEIGHT,
+  W as HOVER_AREA_TRANSPARENCY,
+  F as HOVER_TRANSPARENCY,
+  g as LONG_DATE_FORMAT,
+  I as MIN_PLANE_HEIGHT,
   H as NETWORK_AD_MOB,
-  B as NETWORK_APPLOVIN,
+  a as NETWORK_APPLOVIN,
   G as NETWORK_DT_EXCHANGE,
   P as NETWORK_FACEBOOK_META,
-  a as NETWORK_INMOBI,
-  D as NETWORK_IRON_SOURCE,
+  B as NETWORK_INMOBI,
+  C as NETWORK_IRON_SOURCE,
   r as NETWORK_LIFTOFF,
   S as NETWORK_MINTEGRAL,
   M as NETWORK_PANGLE,
   K as NETWORK_UNITY_ADS,
   t as POINT_BORDER_COLOR,
-  U as TICKS_EXTRA_PADDING,
+  d as TICKS_EXTRA_PADDING,
   T as TICK_LABEL_COLOR,
   o as TICK_LABEL_FONT,
   e as TOTALS_HELPER_KEY