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

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/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";
@@ -33,3 +33,4 @@ export declare const CHART_PADDING: {
     bottom: number;
 };
 export declare const TICKS_EXTRA_PADDING = 10;
+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 = 10, 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

package/components/chart/index.d.ts

@@ -17,6 +17,7 @@ declare const ChartTypes: () => ({
             chartType: ChartType;
             hideLegend: boolean;
             xAxisFormat: import("./types").ValueFormat;
+            xAxisDateInterval: import("./types").DateInterval;
             totalsChart: boolean;
             parsing: import("./types").ChartParsingConfig;
             yAxisFormat: import("./types").ValueFormat;
@@ -29,6 +30,7 @@ declare const ChartTypes: () => ({
             tickCount: number;
             truncateTickLabels: boolean;
             keepSubheaderVisible: boolean;
+            empty: boolean;
             noDataIcon: string;
             noDataTitle: string;
             noDataSubtitle: string;
@@ -89,6 +91,10 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<import("./types").ValueFormat>;
                 default: string;
             };
+            xAxisDateInterval: {
+                type: import("vue").PropType<import("./types").DateInterval>;
+                default: import("./types").DateInterval;
+            };
             totalsChart: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -145,6 +151,10 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            empty: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             noDataIcon: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -189,7 +199,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" | "totalsChart" | "parsing" | "yAxisFormat" | "dataSets" | "trendTooltip" | "subheader" | "subheaderTooltip" | "trendValue" | "trendDirection" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "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" | "dataSets" | "trendTooltip" | "subheader" | "subheaderTooltip" | "trendValue" | "trendDirection" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "fullHeight" | "withSettingsHeader" | "extraCharts">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -253,6 +263,10 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<import("./types").ValueFormat>;
                 default: string;
             };
+            xAxisDateInterval: {
+                type: import("vue").PropType<import("./types").DateInterval>;
+                default: import("./types").DateInterval;
+            };
             totalsChart: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -309,6 +323,10 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            empty: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             noDataIcon: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -370,6 +388,7 @@ declare const ChartTypes: () => ({
             chartType: ChartType;
             hideLegend: boolean;
             xAxisFormat: import("./types").ValueFormat;
+            xAxisDateInterval: import("./types").DateInterval;
             totalsChart: boolean;
             parsing: import("./types").ChartParsingConfig;
             yAxisFormat: import("./types").ValueFormat;
@@ -382,6 +401,7 @@ declare const ChartTypes: () => ({
             tickCount: number;
             truncateTickLabels: boolean;
             keepSubheaderVisible: boolean;
+            empty: boolean;
             noDataIcon: string;
             noDataTitle: string;
             noDataSubtitle: string;
@@ -462,6 +482,10 @@ declare const ChartTypes: () => ({
             type: import("vue").PropType<import("./types").ValueFormat>;
             default: string;
         };
+        xAxisDateInterval: {
+            type: import("vue").PropType<import("./types").DateInterval>;
+            default: import("./types").DateInterval;
+        };
         totalsChart: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -518,6 +542,10 @@ declare const ChartTypes: () => ({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        empty: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
         noDataIcon: {
             type: import("vue").PropType<string>;
             default: string;
@@ -616,6 +644,10 @@ declare const ChartTypes: () => ({
         type: import("vue").PropType<import("./types").ValueFormat>;
         default: string;
     };
+    xAxisDateInterval: {
+        type: import("vue").PropType<import("./types").DateInterval>;
+        default: import("./types").DateInterval;
+    };
     totalsChart: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -672,6 +704,10 @@ declare const ChartTypes: () => ({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    empty: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     noDataIcon: {
         type: import("vue").PropType<string>;
         default: string;
@@ -733,6 +769,7 @@ declare const ChartTypes: () => ({
     chartType: ChartType;
     hideLegend: boolean;
     xAxisFormat: import("./types").ValueFormat;
+    xAxisDateInterval: import("./types").DateInterval;
     totalsChart: boolean;
     parsing: import("./types").ChartParsingConfig;
     yAxisFormat: import("./types").ValueFormat;
@@ -745,6 +782,7 @@ declare const ChartTypes: () => ({
     tickCount: number;
     truncateTickLabels: boolean;
     keepSubheaderVisible: boolean;
+    empty: boolean;
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;

package/components/chart/mockData.d.ts

@@ -6,6 +6,14 @@ export declare const SINGLE_DATASET_DATE: {
         value: number;
     }[];
 }[];
+export declare const SINGLE_DATASET_DATE_MONTHLY: {
+    id: string;
+    label: string;
+    data: {
+        date: string;
+        value: number;
+    }[];
+}[];
 export declare const SINGLE_DATASET_COUNTRY: {
     id: string;
     countryFlag: string;

package/components/chart/types.d.ts

@@ -8,6 +8,11 @@ export declare enum ChartType {
     StackedLine = "stackedLine",
     StackedBar = "stackedBar"
 }
+export declare enum DateInterval {
+    DAILY = "daily",
+    WEEKLY = "weekly",
+    MONTHLY = "monthly"
+}
 export type ChartDataRecord = Record<string, unknown>;
 export type ChartDataSet = {
     id: string | number;

package/components/chart/types.js

@@ -1,6 +1,7 @@
-var e = /* @__PURE__ */ ((a) => (a.Line = "line", a.Bar = "bar", a.StackedLine = "stackedLine", a.StackedBar = "stackedBar", a))(e || {}), n = /* @__PURE__ */ ((a) => (a.Legend = "legend", a.YAxis = "yAxis", a))(n || {}), r = /* @__PURE__ */ ((a) => (a.UP = "up", a.DOWN = "down", a.NEUTRAL = "right", a))(r || {});
+var e = /* @__PURE__ */ ((L) => (L.Line = "line", L.Bar = "bar", L.StackedLine = "stackedLine", L.StackedBar = "stackedBar", L))(e || {}), r = /* @__PURE__ */ ((L) => (L.DAILY = "daily", L.WEEKLY = "weekly", L.MONTHLY = "monthly", L))(r || {}), a = /* @__PURE__ */ ((L) => (L.Legend = "legend", L.YAxis = "yAxis", L))(a || {}), n = /* @__PURE__ */ ((L) => (L.UP = "up", L.DOWN = "down", L.NEUTRAL = "right", L))(n || {});
 export {
   e as ChartType,
-  n as TooltipOrder,
-  r as TrendDirection
+  r as DateInterval,
+  a as TooltipOrder,
+  n as TrendDirection
 };

package/components/chart/utils/utils.d.ts

@@ -1,4 +1,4 @@
 import { PrepareTicksLabelArgs, ValueFormat } from '@/components/chart/types';
 export declare const calcStepSize: (min: number, max: number, tickCount: number) => number;
-export declare const formatValue: (value: number | string, valueFormat: ValueFormat) => string;
+export declare const formatValue: (value: number | string | Date, valueFormat: ValueFormat) => string;
 export declare const prepareTickLabel: ({ label, format, availableSpace, truncate, }: PrepareTicksLabelArgs) => string | string[];

package/index.js

@@ -1,4 +1,4 @@
-import './AppTrigger.vue_vue_type_style_index_0_scoped_121aac8b_lang.css';
+import './AppIcon.vue_vue_type_style_index_0_scoped_56ba337c_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.17",
+  "version": "2.1.12-rc.18",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/Chart.vue_vue_type_style_index_0_scoped_82f5b24e_lang.css

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

package/ChartPlane.vue_vue_type_style_index_0_scoped_5c80d8cd_lang.css

@@ -1 +0,0 @@
-.chart-plane-container[data-v-5c80d8cd]{--headerHeight: var(--1ae03326);width:100%;height:var(--42303d50);position:relative}.header-wrapper[data-v-5c80d8cd]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-5c80d8cd]{padding-top:var(--headerHeight);height:100%}.chart[data-v-5c80d8cd]{width:100%;height:100%;position:relative}.chart__canvas[data-v-5c80d8cd]{width:100%;height:100%}.chart__tooltip[data-v-5c80d8cd]{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_9e521454_lang.css

@@ -1 +0,0 @@
-.chart-tooltip[data-v-9e521454]{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-9e521454]{width:12px;height:12px;border-radius:2px;display:inline-block;margin-right:var(--spacing-100)}.color-box+.platform-icon[data-v-9e521454]{margin-left:calc(var(--spacing-50) - var(--spacing-100))}.list[data-v-9e521454]{list-style:none;margin:0;padding:0}.list__item[data-v-9e521454]{display:flex;align-items:center;margin-bottom:var(--spacing-50);color:var(--text-secondary)}.list__item[data-v-9e521454]:last-child{margin-bottom:0}.platform-icon[data-v-9e521454]{color:var(--action-active);margin-right:var(--spacing-50)}.popover-label-wrapper[data-v-9e521454]{display:flex;width:200px;flex-grow:1}.truncated-label[data-v-9e521454]{max-width:90%}.tooltip-footer[data-v-9e521454]{display:flex;align-items:center;margin-top:var(--spacing-100);color:var(--text-primary)}.flex-grow[data-v-9e521454]{flex-grow:1}

package/TooltipHeader.vue_vue_type_style_index_0_scoped_9f6cf389_lang.css

@@ -1 +0,0 @@
-.tooltip-title-wrapper[data-v-9f6cf389]{display:flex;flex-direction:column;color:var(--text-primary);margin-bottom:var(--spacing-100)}.tooltip-title-wrapper .main-title[data-v-9f6cf389]{display:flex;align-items:center;gap:.25rem}.tooltip-title-wrapper .title-text[data-v-9f6cf389]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tooltip-title-wrapper .title-image[data-v-9f6cf389]{width:20px;height:20px;border-radius:4px}.tooltip-title-wrapper .tooltip-sub-title[data-v-9f6cf389]{color:var(--text-secondary)}.tooltip-title-wrapper .platform-icon[data-v-9f6cf389]{color:var(--action-active)}