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

package/Chart.vue_vue_type_style_index_0_scoped_64205c96_lang.css

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

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

@@ -44,6 +44,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     sortOptions?: unknown[];
     sortOptionNameKey?: string;
     fullHeight?: boolean;
+    fullHeightBottomSpacing?: number;
     withSettingsHeader?: boolean;
     extraCharts?: Record<string, unknown>[];
 }>, {
@@ -83,6 +84,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     sortOptions: () => any[];
     sortOptionNameKey: string;
     fullHeight: boolean;
+    fullHeightBottomSpacing: number;
     withSettingsHeader: boolean;
     extraCharts: () => any[];
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -133,6 +135,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     sortOptions?: unknown[];
     sortOptionNameKey?: string;
     fullHeight?: boolean;
+    fullHeightBottomSpacing?: number;
     withSettingsHeader?: boolean;
     extraCharts?: Record<string, unknown>[];
 }>, {
@@ -172,6 +175,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     sortOptions: () => any[];
     sortOptionNameKey: string;
     fullHeight: boolean;
+    fullHeightBottomSpacing: number;
     withSettingsHeader: boolean;
     extraCharts: () => any[];
 }>>> & {
@@ -215,6 +219,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
     tooltipOrder: TooltipOrder;
     fullHeight: boolean;
+    fullHeightBottomSpacing: number;
     withSettingsHeader: boolean;
     extraCharts: Record<string, unknown>[];
 }>, {

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

package/components/chart/Chart.vue2.js

@@ -1,4 +1,4 @@
- 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 "../../Chart.vue_vue_type_style_index_0_scoped_64205c96_lang.css"; import { defineComponent as U, ref as O, computed as n, openBlock as s, createElementBlock as m, Fragment as C, 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";
@@ -50,6 +50,7 @@ const _ = {
     sortOptions: { default: () => [] },
     sortOptionNameKey: { default: "" },
     fullHeight: { type: Boolean, default: !1 },
+    fullHeightBottomSpacing: { default: 50 },
     withSettingsHeader: { type: Boolean, default: !0 },
     extraCharts: { default: () => [] }
   },
@@ -88,8 +89,8 @@ const _ = {
       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,
+    })), B = n(() => e.dataSets), v = n(() => e.visibleIds), T = n(() => e.extraCharts.length), x = n(() => 1 + T.value), F = (t) => t === T.value - 1, { colorsMap: f } = z({
+      dataSets: B,
       visibleIds: v
     }), w = n(() => e.dataSets.map((t) => ({
       id: t.id,
@@ -102,7 +103,7 @@ const _ = {
       chartPlanesCount: x,
       useFullHeight: e.fullHeight
     });
-    return (t, o) => (s(), m(S, null, [
+    return (t, o) => (s(), m(C, null, [
       a.withSettingsHeader ? (s(), I(K, {
         key: 0,
         "chart-type": i(r),
@@ -136,14 +137,14 @@ const _ = {
               key: "0"
             } : void 0
           ]), 1040, ["chart-type"]),
-          (s(!0), m(S, null, M(a.extraCharts, (l, C) => (s(), I(V, y({
-            key: C,
+          (s(!0), m(C, null, M(a.extraCharts, (l, S) => (s(), I(V, y({
+            key: S,
             class: "extra-chart-plane"
           }, { ...i(g), ...l }, {
             "chart-type": i(r),
             "colors-map": i(f),
             "type-switcher": !1,
-            "tooltip-respects-top-edge": !B(C)
+            "tooltip-respects-top-edge": !F(S)
           }), null, 16, ["chart-type", "colors-map", "tooltip-respects-top-edge"]))), 128))
         ], 2),
         a.hideLegend ? D("", !0) : (s(), m("section", _, [

package/components/chart/ChartStoryArgs.d.ts

@@ -142,6 +142,15 @@ export declare const chartStoryArgs: {
             type: string;
         };
     };
+    fullHeightBottomSpacing: {
+        table: {
+            category: string;
+        };
+        description: string;
+        control: {
+            type: string;
+        };
+    };
     withSettingsHeader: {
         table: {
             category: string;

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/index.d.ts

@@ -41,6 +41,7 @@ declare const ChartTypes: () => ({
             tooltipTotalCalcFn: (values: number[], totalType: import("../../utils/totals").TotalType) => number;
             tooltipOrder: TooltipOrder;
             fullHeight: boolean;
+            fullHeightBottomSpacing: number;
             withSettingsHeader: boolean;
             extraCharts: Record<string, unknown>[];
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
@@ -197,6 +198,10 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            fullHeightBottomSpacing: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
             withSettingsHeader: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -209,7 +214,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" | "valueSuffix" | "valuePrefix" | "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" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -377,6 +382,10 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<boolean>;
                 default: boolean;
             };
+            fullHeightBottomSpacing: {
+                type: import("vue").PropType<number>;
+                default: number;
+            };
             withSettingsHeader: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -430,6 +439,7 @@ declare const ChartTypes: () => ({
             tooltipTotalCalcFn: (values: number[], totalType: import("../../utils/totals").TotalType) => number;
             tooltipOrder: TooltipOrder;
             fullHeight: boolean;
+            fullHeightBottomSpacing: number;
             withSettingsHeader: boolean;
             extraCharts: Record<string, unknown>[];
         }, {}, string> & {
@@ -606,6 +616,10 @@ declare const ChartTypes: () => ({
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
+        fullHeightBottomSpacing: {
+            type: import("vue").PropType<number>;
+            default: number;
+        };
         withSettingsHeader: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -776,6 +790,10 @@ declare const ChartTypes: () => ({
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    fullHeightBottomSpacing: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
     withSettingsHeader: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -829,6 +847,7 @@ declare const ChartTypes: () => ({
     tooltipTotalCalcFn: (values: number[], totalType: import("../../utils/totals").TotalType) => number;
     tooltipOrder: TooltipOrder;
     fullHeight: boolean;
+    fullHeightBottomSpacing: number;
     withSettingsHeader: boolean;
     extraCharts: Record<string, unknown>[];
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {

package/components/chart/types.d.ts

@@ -62,6 +62,7 @@ export type DropdownTypeOption = {
 export type UseChartHeightArgs = {
     chartPlanesCount: Ref<number>;
     useFullHeight: boolean;
+    bottomSpacing?: number;
 };
 export type HexColor = `#${string}`;
 export type DataSetConfig = ChartDataset<'line'> & ChartDataSet;

package/index.js

@@ -1,4 +1,4 @@
-import './IncludeExcludeOption.vue_vue_type_style_index_0_scoped_91bc7787_lang.css';
+import './FloatingToolbar.vue_vue_type_style_index_0_scoped_04d485be_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.19",
+  "version": "2.1.12-rc.20",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/Chart.vue_vue_type_style_index_0_scoped_53316c89_lang.css

@@ -1 +0,0 @@
-.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)}