@ironsource/shared-ui 2.1.12-rc.2 → 2.1.12-rc.21

package/components/chart/SubHeader.vue2.js

@@ -0,0 +1,61 @@
+ import "../../SubHeader.vue_vue_type_style_index_0_scoped_e6008b6c_lang.css"; import { defineComponent as b, useSlots as f, computed as m, openBlock as a, createElementBlock as T, createVNode as u, unref as t, withCtx as o, renderSlot as x, createElementVNode as y, createBlock as i, createTextVNode as r, toDisplayString as d, createCommentVNode as h } from "vue";
+import l from "../typography/v4/Typography.vue.js";
+import S from "../tooltip/v4/TooltipV4.vue.js";
+const k = { class: "header-row" }, v = { class: "subheader-tooltip" }, g = /* @__PURE__ */ b({
+  __name: "SubHeader",
+  props: {
+    subheader: { default: "" },
+    subheaderTooltip: { default: null },
+    showSeparator: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const s = e, n = f(), c = m(() => n["subheader-tooltip"] || s.subheaderTooltip?.text || s.subheaderTooltip?.header);
+    return (p, w) => (a(), T("div", k, [
+      u(t(S), {
+        placement: "right",
+        disabled: !t(c)
+      }, {
+        tooltip: o(() => [
+          x(p.$slots, "subheader-tooltip", {}, () => [
+            y("div", v, [
+              e.subheaderTooltip?.header ? (a(), i(t(l), {
+                key: 0,
+                variant: "h5"
+              }, {
+                default: o(() => [
+                  r(d(e.subheaderTooltip.header), 1)
+                ]),
+                _: 1
+              })) : h("", !0),
+              e.subheaderTooltip?.text ? (a(), i(t(l), {
+                key: 1,
+                variant: "body2",
+                class: "subheader-tooltip__text"
+              }, {
+                default: o(() => [
+                  r(d(e.subheaderTooltip.text), 1)
+                ]),
+                _: 1
+              })) : h("", !0)
+            ])
+          ], !0)
+        ]),
+        default: o(() => [
+          u(t(l), {
+            class: "subheader",
+            variant: "h5"
+          }, {
+            default: o(() => [
+              r(d(e.subheader + (e.showSeparator ? ":" : "")), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 3
+      }, 8, ["disabled"])
+    ]));
+  }
+});
+export {
+  g as default
+};

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

@@ -0,0 +1,50 @@
+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;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/components/chart/TooltipHeader.vue.js

@@ -0,0 +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_3b15c693_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-3b15c693"]]);
+export {
+  s as default
+};

package/components/chart/TooltipHeader.vue2.js

@@ -0,0 +1,69 @@
+ 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";
+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(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(o)?.image
+        }, null, 8, L)) : s("", !0),
+        a.totalsChart && t(o)?.countryFlag ? (n(), u(t(k), {
+          key: 1,
+          "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(o)?.iconType,
+          name: t(o)?.icon,
+          size: "16px"
+        }, null, 8, ["type", "name"])) : s("", !0),
+        D(t(y), {
+          class: "title-text",
+          variant: "subtitle2"
+        }, {
+          default: d(() => [
+            x(p(t(h)), 1)
+          ]),
+          _: 1
+        })
+      ]),
+      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: d(() => [
+          x(p(t(r)(a.title, "day")), 1)
+        ]),
+        _: 1
+      })) : s("", !0)
+    ]));
+  }
+});
+export {
+  P as default
+};

package/components/chart/colorPalette.d.ts

@@ -0,0 +1,4 @@
+import { HexColor } from '@/components/chart/types';
+export declare const DEFAULT_CHART_COLOR: HexColor;
+export declare const COLOR_PALETTE: HexColor[];
+export declare const RESERVED_COLORS_MAP: Record<string, HexColor>;

package/components/chart/colorPalette.js

@@ -0,0 +1,54 @@
+import { NETWORK_UNITY_ADS as _, BIDDING_PREFIX as F, NETWORK_AD_MOB as N, NETWORK_IRON_SOURCE as E, NETWORK_MINTEGRAL as T, NETWORK_APPLOVIN as A, NETWORK_FACEBOOK_META as $, NETWORK_LIFTOFF as O, NETWORK_PANGLE as C, NETWORK_INMOBI as R, NETWORK_DT_EXCHANGE as B } from "./consts.js";
+const I = "#c9c9c9", K = [
+  "#80BCFE",
+  "#9999FF",
+  "#5883E4",
+  "#80CBC4",
+  "#FFC670",
+  "#FF7557",
+  "#0D7EA0",
+  "#673AFF",
+  "#CA80DC",
+  "#FEBBB2"
+], t = {
+  Total: "#646464",
+  // AB tests
+  A: "#FFC134",
+  B: "#4F4FF5",
+  // Countries
+  US: "#272EC4",
+  CN: "#F52E1E",
+  GB: "#0082FF",
+  DE: "#FFD600",
+  JP: "#BA0029",
+  AU: "#009BCB",
+  FR: "#34A853",
+  // Ad formats
+  Rewarded: "#0082FF",
+  Interstitial: "#009BCB",
+  Banner: "#9668FF",
+  Native: "#FF35A2",
+  // Ad sources
+  [`${_} ${F}`]: "#9668FF",
+  [`${N} ${F}`]: "#34A853",
+  [`${E} ${F}`]: "#272EC4",
+  [`${E}`]: "#5C63E7",
+  [`${T} ${F}`]: "#00D8B2",
+  [`${A} ${F}`]: "#009BCB",
+  [`${A}`]: "#80CDE5",
+  [`${$} ${F}`]: "#0082FF",
+  [`${$}`]: "#52AAFF",
+  [`${O} ${F}`]: "#FF35A2",
+  [`${O}`]: "#FF9AD1",
+  [`${C} ${F}`]: "#F52E1E",
+  [`${C}`]: "#FA9F97",
+  [`${R} ${F}`]: "#FFD600",
+  [`${R}`]: "#FFEC8A",
+  [`${B} ${F}`]: "#BA0029",
+  [`${B}`]: "#DD8094"
+};
+export {
+  K as COLOR_PALETTE,
+  I as DEFAULT_CHART_COLOR,
+  t as RESERVED_COLORS_MAP
+};

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

@@ -0,0 +1,5 @@
+import { UseChartHeightArgs } from '@/components/chart/types';
+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

@@ -0,0 +1,24 @@
+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,
+  bottomSpacing: i = 50
+}) => {
+  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: u.value }
+  })), a = o(() => e.value === 1 ? "100%" : c.value / e.value < r ? `${r}px` : 100 / e.value + "%");
+  return {
+    containerProps: h,
+    eachPlaneHeight: a
+  };
+};
+export {
+  T as useChartHeight
+};

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

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+import { ChartDataSet } from '@/components/chart';
+type UseColorsMapArgs = {
+    dataSets: Ref<ChartDataSet[]>;
+    visibleIds: Ref<unknown[]>;
+};
+export declare const useColorsMap: ({ dataSets, visibleIds }: UseColorsMapArgs) => {
+    colorsMap: Ref<Record<string, `#${string}`>>;
+};
+export {};

package/components/chart/composables/useColorsMap.js

@@ -0,0 +1,46 @@
+import { computed as n, ref as r, watch as E } from "vue";
+import { RESERVED_COLORS_MAP as c, COLOR_PALETTE as O, DEFAULT_CHART_COLOR as R } from "../colorPalette.js";
+const T = ({ dataSets: u, visibleIds: i }) => {
+  const a = n(
+    () => u.value.filter(
+      (o) => i.value.includes(o.id)
+    )
+  ), l = r({
+    ...c
+    // destructuring is important to avoid mutating the reserved colors object
+  }), s = r([]), v = n(
+    () => O.filter((o) => !s.value.includes(o))
+  ), d = () => {
+    a.value.forEach((o) => {
+      const e = String(o.id);
+      if (!l.value[e]) {
+        const t = o.color || v.value[0] || R;
+        C(e, t);
+      }
+    });
+  }, f = () => {
+    Object.keys(l.value).forEach((o) => {
+      const e = a.value.find((m) => String(m.id) === o), t = !!c[o];
+      !e && !t && p(o);
+    });
+  }, C = (o, e) => {
+    l.value[String(o)] = e, s.value.push(e);
+  }, p = (o) => {
+    const e = l.value[o];
+    delete l.value[o];
+    const t = s.value.indexOf(e);
+    t > -1 && s.value.splice(t, 1);
+  };
+  return E(
+    a,
+    () => {
+      f(), d();
+    },
+    { immediate: !0 }
+  ), {
+    colorsMap: l
+  };
+};
+export {
+  T as useColorsMap
+};

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

@@ -1,6 +1,6 @@
 import { Ref } from 'vue';
 import { TooltipModel } from 'chart.js';
-export declare const useTooltipPosition: (chartRef: Ref<HTMLCanvasElement | null>, tooltipRef: Ref<HTMLDivElement | null>, tooltipModel: Ref<TooltipModel<'line' | 'bar'>>) => {
+export declare const useTooltipPosition: (chartRef: Ref<HTMLCanvasElement | null>, tooltipRef: Ref<HTMLDivElement | null>, tooltipModel: Ref<TooltipModel<'line' | 'bar'>>, respectTop?: boolean) => {
     position: import("vue").ComputedRef<{
         top: number;
         left: number;

package/components/chart/composables/useTooltipPosition.js

@@ -1,22 +1,18 @@
-import { computed as c } from "vue";
-import { useElementSize as u } from "@vueuse/core";
-const a = (o, s, n) => {
-  const t = u(s);
+import { computed as h } from "vue";
+import { useElementSize as T } from "@vueuse/core";
+import { COMPACT_HEADER_HEIGHT as l } from "../consts.js";
+const D = (n, s, E, _ = !0) => {
+  const t = T(s);
   return {
-    position: c(() => {
-      if (!o.value || !n.value)
+    position: h(() => {
+      if (!n.value || !E.value)
         return { top: 0, left: 0 };
-      const i = o.value.getBoundingClientRect(), { caretX: F, caretY: e } = n.value, E = F + t.width.value + 20 >= i.width, _ = e + t.height.value + -20 >= i.height;
-      return {
-        left: F + (E ? -(t.width.value + 20) : 20),
-        top: e + (_ ? -1 * Math.min(
-          e - 8,
-          t.height.value + 8
-        ) : -20)
-      };
+      const e = n.value.getBoundingClientRect(), { caretX: F, caretY: o } = E.value, c = F + t.width.value + 20 >= e.width, r = o + t.height.value + -30 >= e.height, u = F + (c ? -(t.width.value + 20) : 20);
+      let i = o + (r ? -1 * (o + t.height.value + 8 - e.height) : -30);
+      return _ && (i = Math.max(i, -l + 8)), { left: u, top: i };
     })
   };
 };
 export {
-  a as useTooltipPosition
+  D as useTooltipPosition
 };

package/components/chart/consts.d.ts

@@ -1,14 +1,36 @@
-import { DropdownTypeOption } 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";
-export declare const TICK_LABEL_FONT: {
-    size: number;
-    weight: number;
-    family: string;
-};
-export declare const COLOR_PALETTE: string[];
+export declare const TICK_LABEL_FONT: Font;
 export declare const DEFAULT_TICK_COUNT = 4;
 export declare const DEFAULT_MIN_VISIBLE = 1;
 export declare const DEFAULT_MAX_VISIBLE = 5;
 export declare const DROPDOWN_TYPE_OPTIONS: DropdownTypeOption[];
+export declare const HEADER_HEIGHT = 76;
+export declare const COMPACT_HEADER_HEIGHT = 43;
+export declare const DEFAULT_CHART_PLANE_HEIGHT = 312;
+export declare const MIN_PLANE_HEIGHT = 187;
+export declare const TOTALS_HELPER_KEY = "__TOTALS_HELPER_KEY__";
+export declare const BASE_COLOR_KEY = "___BASE_COLOR__";
+export declare const BIDDING_PREFIX = "Bidding";
+export declare const NETWORK_IRON_SOURCE = "ironSource";
+export declare const NETWORK_UNITY_ADS = "UnityAds";
+export declare const NETWORK_FACEBOOK_META = "Meta";
+export declare const NETWORK_AD_MOB = "Google";
+export declare const NETWORK_MINTEGRAL = "Mintegral";
+export declare const NETWORK_APPLOVIN = "AppLovin";
+export declare const NETWORK_INMOBI = "InMobi";
+export declare const NETWORK_DT_EXCHANGE = "DT Exchange";
+export declare const NETWORK_PANGLE = "Pangle";
+export declare const NETWORK_LIFTOFF = "Liftoff Monetize";
+export declare const HOVER_TRANSPARENCY = 10;
+export declare const HOVER_AREA_TRANSPARENCY = 70;
+export declare const CHART_PADDING: {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+export declare const TICKS_EXTRA_PADDING = 6;
+export declare const LONG_DATE_FORMAT: ValueFormat;

package/components/chart/consts.js

@@ -1,27 +1,47 @@
-import { ChartType as L } from "./types.js";
-const _ = "#fcfcfc", n = "#E4E4E4", t = "#646464", O = {
+import { ChartType as _ } from "./types.js";
+const t = "#fcfcfc", n = "#E4E4E4", T = "#646464", o = {
   size: 12,
   weight: 400,
   family: "Inter"
-}, c = [
-  "#80BCFE",
-  "#9999FF",
-  "#5883E4",
-  "#80CBC4",
-  "#FFC670"
-], T = 4, C = 1, I = 5, e = [
-  { id: L.Line, name: "Line" },
-  { id: L.StackedLine, name: "Stack" },
-  { id: L.Bar, name: "Bar" }
-];
+}, O = 4, A = 1, R = 5, c = [
+  { id: _.Line, name: "Line" },
+  { id: _.StackedLine, name: "Stack" },
+  { id: _.Bar, name: "Bar" }
+], 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
+}, d = 6, g = "dateLong";
 export {
-  c as COLOR_PALETTE,
-  I as DEFAULT_MAX_VISIBLE,
-  C as DEFAULT_MIN_VISIBLE,
-  T as DEFAULT_TICK_COUNT,
-  e as DROPDOWN_TYPE_OPTIONS,
+  D as BASE_COLOR_KEY,
+  i as BIDDING_PREFIX,
+  f as CHART_PADDING,
+  L as COMPACT_HEADER_HEIGHT,
+  s as DEFAULT_CHART_PLANE_HEIGHT,
+  R as DEFAULT_MAX_VISIBLE,
+  A as DEFAULT_MIN_VISIBLE,
+  O as DEFAULT_TICK_COUNT,
+  c as DROPDOWN_TYPE_OPTIONS,
   n as GRID_LINE_COLOR,
-  _ as POINT_BORDER_COLOR,
-  t as TICK_LABEL_COLOR,
-  O as TICK_LABEL_FONT
+  N as HEADER_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,
+  a as NETWORK_APPLOVIN,
+  G as NETWORK_DT_EXCHANGE,
+  P as NETWORK_FACEBOOK_META,
+  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,
+  d as TICKS_EXTRA_PADDING,
+  T as TICK_LABEL_COLOR,
+  o as TICK_LABEL_FONT,
+  e as TOTALS_HELPER_KEY
 };