@ironsource/shared-ui 2.1.12-rc.4 → 2.1.12-rc.6

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

@@ -12,3 +12,8 @@ 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__";

package/components/chart/consts.js

@@ -1,5 +1,5 @@
-import { ChartType as L } from "./types.js";
-const _ = "#fcfcfc", n = "#E4E4E4", t = "#646464", O = {
+import { ChartType as E } from "./types.js";
+const L = "#fcfcfc", T = "#E4E4E4", n = "#646464", t = {
   size: 12,
   weight: 400,
   family: "Inter"
@@ -9,19 +9,24 @@ const _ = "#fcfcfc", n = "#E4E4E4", t = "#646464", O = {
   "#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, I = 1, o = 5, A = [
+  { id: E.Line, name: "Line" },
+  { id: E.StackedLine, name: "Stack" },
+  { id: E.Bar, name: "Bar" }
+], C = 76, s = 43, H = 312, R = 187, e = "__TOTALS_HELPER_KEY__";
 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,
-  n as GRID_LINE_COLOR,
-  _ as POINT_BORDER_COLOR,
-  t as TICK_LABEL_COLOR,
-  O as TICK_LABEL_FONT
+  s as COMPACT_HEADER_HEIGHT,
+  H as DEFAULT_CHART_PLANE_HEIGHT,
+  o as DEFAULT_MAX_VISIBLE,
+  I as DEFAULT_MIN_VISIBLE,
+  O as DEFAULT_TICK_COUNT,
+  A as DROPDOWN_TYPE_OPTIONS,
+  T as GRID_LINE_COLOR,
+  C as HEADER_HEIGHT,
+  R as MIN_PLANE_HEIGHT,
+  L as POINT_BORDER_COLOR,
+  n as TICK_LABEL_COLOR,
+  t as TICK_LABEL_FONT,
+  e as TOTALS_HELPER_KEY
 };

package/components/chart/index.d.ts

@@ -6,24 +6,28 @@ declare const ChartTypes: () => ({
         $props: Partial<{
             header: string;
             loading: boolean;
-            xAxisFormat: import("./types").ValueFormat;
-            yAxisFormat: import("./types").ValueFormat;
-            parsing: import("./types").ChartParsingConfig;
             visibleIds: unknown[];
             minVisible: number;
             maxVisible: number;
             maxLimitTooltipText: string;
             chartType: import("./types").ChartType;
-            withSettingsHeader: boolean;
-            subheader: string;
-            withSubheaderTooltip: boolean;
-            dataSets: import("./types").ChartDataSet[];
             hideLegend: boolean;
+            xAxisFormat: import("./types").ValueFormat;
+            yAxisFormat: import("./types").ValueFormat;
+            parsing: import("./types").ChartParsingConfig;
+            dataSets: import("./types").ChartDataSet[];
+            subheader: string;
+            trendValue: string | number;
+            trendDirection: "up" | "down";
             tickCount: number;
+            withAnimation: boolean;
+            totalsChart: boolean;
             noDataIcon: string;
             noDataTitle: string;
             noDataSubtitle: string;
-            withAnimation: boolean;
+            fullHeight: boolean;
+            withSettingsHeader: boolean;
+            extraCharts: Record<string, unknown>[];
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             header: {
                 type: import("vue").PropType<string>;
@@ -33,18 +37,6 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
-            xAxisFormat: {
-                type: import("vue").PropType<import("./types").ValueFormat>;
-                default: string;
-            };
-            yAxisFormat: {
-                type: import("vue").PropType<import("./types").ValueFormat>;
-                default: string;
-            };
-            parsing: {
-                type: import("vue").PropType<import("./types").ChartParsingConfig>;
-                default: any;
-            };
             visibleIds: {
                 type: import("vue").PropType<unknown[]>;
                 required: true;
@@ -66,31 +58,51 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<import("./types").ChartType>;
                 default: import("./types").ChartType;
             };
-            withSettingsHeader: {
+            hideLegend: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
-            subheader: {
-                type: import("vue").PropType<string>;
+            xAxisFormat: {
+                type: import("vue").PropType<import("./types").ValueFormat>;
                 default: string;
             };
-            withSubheaderTooltip: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
+            yAxisFormat: {
+                type: import("vue").PropType<import("./types").ValueFormat>;
+                default: string;
+            };
+            parsing: {
+                type: import("vue").PropType<import("./types").ChartParsingConfig>;
+                default: any;
             };
             dataSets: {
                 type: import("vue").PropType<import("./types").ChartDataSet[]>;
                 required: true;
                 default: () => any[];
             };
-            hideLegend: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
+            subheader: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            trendValue: {
+                type: import("vue").PropType<string | number>;
+                default: any;
+            };
+            trendDirection: {
+                type: import("vue").PropType<"up" | "down">;
+                default: string;
             };
             tickCount: {
                 type: import("vue").PropType<number>;
                 default: number;
             };
+            withAnimation: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            totalsChart: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             noDataIcon: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -103,14 +115,22 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
-            withAnimation: {
+            fullHeight: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            withSettingsHeader: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            extraCharts: {
+                type: import("vue").PropType<Record<string, unknown>[]>;
+                default: () => any[];
+            };
         }>> & {
             "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
             "onUpdate:chartType"?: (chartType: import("./types").ChartType) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "xAxisFormat" | "yAxisFormat" | "parsing" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "chartType" | "withSettingsHeader" | "subheader" | "withSubheaderTooltip" | "dataSets" | "hideLegend" | "tickCount" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "chartType" | "hideLegend" | "xAxisFormat" | "yAxisFormat" | "parsing" | "dataSets" | "subheader" | "trendValue" | "trendDirection" | "tickCount" | "withAnimation" | "totalsChart" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "fullHeight" | "withSettingsHeader" | "extraCharts">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -133,18 +153,6 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
-            xAxisFormat: {
-                type: import("vue").PropType<import("./types").ValueFormat>;
-                default: string;
-            };
-            yAxisFormat: {
-                type: import("vue").PropType<import("./types").ValueFormat>;
-                default: string;
-            };
-            parsing: {
-                type: import("vue").PropType<import("./types").ChartParsingConfig>;
-                default: any;
-            };
             visibleIds: {
                 type: import("vue").PropType<unknown[]>;
                 required: true;
@@ -166,31 +174,51 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<import("./types").ChartType>;
                 default: import("./types").ChartType;
             };
-            withSettingsHeader: {
+            hideLegend: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
-            subheader: {
-                type: import("vue").PropType<string>;
+            xAxisFormat: {
+                type: import("vue").PropType<import("./types").ValueFormat>;
                 default: string;
             };
-            withSubheaderTooltip: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
+            yAxisFormat: {
+                type: import("vue").PropType<import("./types").ValueFormat>;
+                default: string;
+            };
+            parsing: {
+                type: import("vue").PropType<import("./types").ChartParsingConfig>;
+                default: any;
             };
             dataSets: {
                 type: import("vue").PropType<import("./types").ChartDataSet[]>;
                 required: true;
                 default: () => any[];
             };
-            hideLegend: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
+            subheader: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
+            trendValue: {
+                type: import("vue").PropType<string | number>;
+                default: any;
+            };
+            trendDirection: {
+                type: import("vue").PropType<"up" | "down">;
+                default: string;
             };
             tickCount: {
                 type: import("vue").PropType<number>;
                 default: number;
             };
+            withAnimation: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            totalsChart: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             noDataIcon: {
                 type: import("vue").PropType<string>;
                 default: string;
@@ -203,10 +231,18 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
-            withAnimation: {
+            fullHeight: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
+            withSettingsHeader: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            extraCharts: {
+                type: import("vue").PropType<Record<string, unknown>[]>;
+                default: () => any[];
+            };
         }>> & {
             "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
             "onUpdate:chartType"?: (chartType: import("./types").ChartType) => any;
@@ -216,24 +252,28 @@ declare const ChartTypes: () => ({
         }, string, {
             header: string;
             loading: boolean;
-            xAxisFormat: import("./types").ValueFormat;
-            yAxisFormat: import("./types").ValueFormat;
-            parsing: import("./types").ChartParsingConfig;
             visibleIds: unknown[];
             minVisible: number;
             maxVisible: number;
             maxLimitTooltipText: string;
             chartType: import("./types").ChartType;
-            withSettingsHeader: boolean;
-            subheader: string;
-            withSubheaderTooltip: boolean;
-            dataSets: import("./types").ChartDataSet[];
             hideLegend: boolean;
+            xAxisFormat: import("./types").ValueFormat;
+            yAxisFormat: import("./types").ValueFormat;
+            parsing: import("./types").ChartParsingConfig;
+            dataSets: import("./types").ChartDataSet[];
+            subheader: string;
+            trendValue: string | number;
+            trendDirection: "up" | "down";
             tickCount: number;
+            withAnimation: boolean;
+            totalsChart: boolean;
             noDataIcon: string;
             noDataTitle: string;
             noDataSubtitle: string;
-            withAnimation: boolean;
+            fullHeight: boolean;
+            withSettingsHeader: boolean;
+            extraCharts: Record<string, unknown>[];
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -263,18 +303,6 @@ declare const ChartTypes: () => ({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
-        xAxisFormat: {
-            type: import("vue").PropType<import("./types").ValueFormat>;
-            default: string;
-        };
-        yAxisFormat: {
-            type: import("vue").PropType<import("./types").ValueFormat>;
-            default: string;
-        };
-        parsing: {
-            type: import("vue").PropType<import("./types").ChartParsingConfig>;
-            default: any;
-        };
         visibleIds: {
             type: import("vue").PropType<unknown[]>;
             required: true;
@@ -296,31 +324,51 @@ declare const ChartTypes: () => ({
             type: import("vue").PropType<import("./types").ChartType>;
             default: import("./types").ChartType;
         };
-        withSettingsHeader: {
+        hideLegend: {
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
-        subheader: {
-            type: import("vue").PropType<string>;
+        xAxisFormat: {
+            type: import("vue").PropType<import("./types").ValueFormat>;
             default: string;
         };
-        withSubheaderTooltip: {
-            type: import("vue").PropType<boolean>;
-            default: boolean;
+        yAxisFormat: {
+            type: import("vue").PropType<import("./types").ValueFormat>;
+            default: string;
+        };
+        parsing: {
+            type: import("vue").PropType<import("./types").ChartParsingConfig>;
+            default: any;
         };
         dataSets: {
             type: import("vue").PropType<import("./types").ChartDataSet[]>;
             required: true;
             default: () => any[];
         };
-        hideLegend: {
-            type: import("vue").PropType<boolean>;
-            default: boolean;
+        subheader: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
+        trendValue: {
+            type: import("vue").PropType<string | number>;
+            default: any;
+        };
+        trendDirection: {
+            type: import("vue").PropType<"up" | "down">;
+            default: string;
         };
         tickCount: {
             type: import("vue").PropType<number>;
             default: number;
         };
+        withAnimation: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        totalsChart: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
         noDataIcon: {
             type: import("vue").PropType<string>;
             default: string;
@@ -333,10 +381,18 @@ declare const ChartTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
-        withAnimation: {
+        fullHeight: {
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        withSettingsHeader: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
+        extraCharts: {
+            type: import("vue").PropType<Record<string, unknown>[]>;
+            default: () => any[];
+        };
     }>> & {
         "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
         "onUpdate:chartType"?: (chartType: import("./types").ChartType) => any;
@@ -353,18 +409,6 @@ declare const ChartTypes: () => ({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    xAxisFormat: {
-        type: import("vue").PropType<import("./types").ValueFormat>;
-        default: string;
-    };
-    yAxisFormat: {
-        type: import("vue").PropType<import("./types").ValueFormat>;
-        default: string;
-    };
-    parsing: {
-        type: import("vue").PropType<import("./types").ChartParsingConfig>;
-        default: any;
-    };
     visibleIds: {
         type: import("vue").PropType<unknown[]>;
         required: true;
@@ -386,31 +430,51 @@ declare const ChartTypes: () => ({
         type: import("vue").PropType<import("./types").ChartType>;
         default: import("./types").ChartType;
     };
-    withSettingsHeader: {
+    hideLegend: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    subheader: {
-        type: import("vue").PropType<string>;
+    xAxisFormat: {
+        type: import("vue").PropType<import("./types").ValueFormat>;
         default: string;
     };
-    withSubheaderTooltip: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
+    yAxisFormat: {
+        type: import("vue").PropType<import("./types").ValueFormat>;
+        default: string;
+    };
+    parsing: {
+        type: import("vue").PropType<import("./types").ChartParsingConfig>;
+        default: any;
     };
     dataSets: {
         type: import("vue").PropType<import("./types").ChartDataSet[]>;
         required: true;
         default: () => any[];
     };
-    hideLegend: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
+    subheader: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    trendValue: {
+        type: import("vue").PropType<string | number>;
+        default: any;
+    };
+    trendDirection: {
+        type: import("vue").PropType<"up" | "down">;
+        default: string;
     };
     tickCount: {
         type: import("vue").PropType<number>;
         default: number;
     };
+    withAnimation: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    totalsChart: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     noDataIcon: {
         type: import("vue").PropType<string>;
         default: string;
@@ -423,10 +487,18 @@ declare const ChartTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
-    withAnimation: {
+    fullHeight: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    withSettingsHeader: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    extraCharts: {
+        type: import("vue").PropType<Record<string, unknown>[]>;
+        default: () => any[];
+    };
 }>> & {
     "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
     "onUpdate:chartType"?: (chartType: import("./types").ChartType) => any;
@@ -436,24 +508,28 @@ declare const ChartTypes: () => ({
 }, string, {
     header: string;
     loading: boolean;
-    xAxisFormat: import("./types").ValueFormat;
-    yAxisFormat: import("./types").ValueFormat;
-    parsing: import("./types").ChartParsingConfig;
     visibleIds: unknown[];
     minVisible: number;
     maxVisible: number;
     maxLimitTooltipText: string;
     chartType: import("./types").ChartType;
-    withSettingsHeader: boolean;
-    subheader: string;
-    withSubheaderTooltip: boolean;
-    dataSets: import("./types").ChartDataSet[];
     hideLegend: boolean;
+    xAxisFormat: import("./types").ValueFormat;
+    yAxisFormat: import("./types").ValueFormat;
+    parsing: import("./types").ChartParsingConfig;
+    dataSets: import("./types").ChartDataSet[];
+    subheader: string;
+    trendValue: string | number;
+    trendDirection: "up" | "down";
     tickCount: number;
+    withAnimation: boolean;
+    totalsChart: boolean;
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
-    withAnimation: boolean;
+    fullHeight: boolean;
+    withSettingsHeader: boolean;
+    extraCharts: Record<string, unknown>[];
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         metric?(_: {}): any;

package/components/chart/mockData.d.ts

@@ -7,10 +7,12 @@ export declare const SINGLE_DATASET_DATE: {
     color: string;
 }[];
 export declare const SINGLE_DATASET_COUNTRY: {
+    id: string;
     label: string;
     data: {
-        country: string;
         value: number;
+        value2: number;
+        value3: number;
     }[];
 }[];
 export declare const MULTIPLE_DATASETS_DATE: ({
@@ -21,6 +23,8 @@ export declare const MULTIPLE_DATASETS_DATE: ({
     data: {
         date: string;
         value: number;
+        value2: number;
+        value3: number;
     }[];
     iconType?: undefined;
 } | {
@@ -32,7 +36,19 @@ export declare const MULTIPLE_DATASETS_DATE: ({
     data: {
         date: string;
         value: number;
+        value2: number;
+        value3: number;
     }[];
+} | {
+    id: string;
+    label: string;
+    caption: string;
+    icon: string;
+    data: {
+        date: string;
+        value: number;
+    }[];
+    iconType?: undefined;
 })[];
 export declare const MULTIPLE_DATASETS_SINGLE_DATE: {
     id: string;
@@ -40,6 +56,16 @@ export declare const MULTIPLE_DATASETS_SINGLE_DATE: {
     data: {
         date: string;
         value: number;
+        value2: number;
+        value3: number;
     }[];
 }[];
 export declare const generateMockData: (numSeries?: number) => any[];
+export declare const metricOptions: {
+    id: string;
+    label: string;
+}[];
+export declare const breakdownsOptions: {
+    id: string;
+    label: string;
+}[];

package/components/chart/types.d.ts

@@ -55,3 +55,7 @@ export type DropdownTypeOption = {
     id: ChartType;
     name: string;
 };
+export type UseChartHeightArgs = {
+    chartPlanesCount: Ref<number>;
+    useFullHeight: boolean;
+};

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

@@ -1,2 +1 @@
 export declare const DEFAULT_FALLBACK = "N/A";
-export declare const formatNumber: (num: number | string, fallback?: string | null) => string;