@ironsource/shared-ui 2.1.12-rc.3 → 2.1.12-rc.30

package/components/chart/ChartStoryArgs.d.ts

@@ -0,0 +1,184 @@
+import { ChartType, DateInterval, TooltipOrder, TrendDirection } from '@/components/chart/types';
+export declare const chartStoryArgs: {
+    chartType: {
+        control: {
+            type: string;
+        };
+        options: ChartType[];
+    };
+    dataSets: {
+        description: string;
+    };
+    xAxisFormat: {
+        options: string[];
+        description: string;
+    };
+    yAxisFormat: {
+        options: string[];
+        description: string;
+    };
+    xAxisDateInterval: {
+        options: DateInterval[];
+        description: string;
+    };
+    parsing: {
+        description: string;
+    };
+    hideLegend: {
+        table: {
+            category: string;
+        };
+    };
+    minVisible: {
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    maxVisible: {
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    maxLimitTooltipText: {
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    noDataIcon: {
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    noDataTitle: {
+        table: {
+            category: string;
+        };
+    };
+    noDataSubtitle: {
+        table: {
+            category: string;
+        };
+    };
+    header: {
+        table: {
+            category: string;
+        };
+    };
+    subheader: {
+        table: {
+            category: string;
+        };
+    };
+    subheaderTooltip: {
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    keepSubheaderVisible: {
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    trendValue: {
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    trendDirection: {
+        table: {
+            category: string;
+        };
+        description: string;
+        control: {
+            type: string;
+        };
+        options: TrendDirection[];
+    };
+    tickCount: {
+        description: string;
+    };
+    truncateTickLabels: {
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    loading: {
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    empty: {
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    withAnimation: {
+        control: {
+            type: string;
+        };
+    };
+    totalsChart: {
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    fullHeight: {
+        table: {
+            category: string;
+        };
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    fullHeightBottomSpacing: {
+        table: {
+            category: string;
+        };
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    withSettingsHeader: {
+        table: {
+            category: string;
+        };
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    extraCharts: {
+        table: {
+            category: string;
+        };
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    tooltipOrder: {
+        description: string;
+        control: {
+            type: string;
+        };
+        options: TooltipOrder[];
+    };
+    colorVariant: {
+        description: string;
+        control: string;
+        options: string[];
+    };
+};

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

@@ -1,39 +1,59 @@
-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;
     dataPoints: MyTooltipItem<'line'>[];
     xAxisFormat?: ValueFormat;
     yAxisFormat?: ValueFormat;
+    xAxisDateInterval?: DateInterval;
     totalLabel?: string;
     totalValue?: number;
+    totalsChart?: boolean;
+    valueSuffix?: string;
+    valuePrefix?: string;
 }>, {
     title: string;
     dataPoints: () => any[];
     xAxisFormat: any;
     yAxisFormat: any;
+    xAxisDateInterval: any;
     totalLabel: string;
     totalValue: any;
+    totalsChart: boolean;
+    valueSuffix: string;
+    valuePrefix: string;
 }>, {}, 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;
     dataPoints: MyTooltipItem<'line'>[];
     xAxisFormat?: ValueFormat;
     yAxisFormat?: ValueFormat;
+    xAxisDateInterval?: DateInterval;
     totalLabel?: string;
     totalValue?: number;
+    totalsChart?: boolean;
+    valueSuffix?: string;
+    valuePrefix?: string;
 }>, {
     title: string;
     dataPoints: () => any[];
     xAxisFormat: any;
     yAxisFormat: any;
+    xAxisDateInterval: any;
     totalLabel: string;
     totalValue: any;
+    totalsChart: boolean;
+    valueSuffix: string;
+    valuePrefix: string;
 }>>>, {
     title: string;
-    dataPoints: MyTooltipItem<'line'>[];
     xAxisFormat: ValueFormat;
+    xAxisDateInterval: DateInterval;
+    dataPoints: MyTooltipItem<'line'>[];
+    totalsChart: boolean;
     yAxisFormat: ValueFormat;
     totalLabel: string;
     totalValue: number;
+    valueSuffix: string;
+    valuePrefix: string;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/chart/ChartTooltip.vue.js

@@ -1,7 +1,7 @@
 import o from "./ChartTooltip.vue2.js";
 /* empty css                   */import t from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_6744325c_lang.css"; //*');
-const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-6744325c"]]);
+// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_3315b68f_lang.css"; //*');
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-3315b68f"]]);
 export {
   s as default
 };

package/components/chart/ChartTooltip.vue2.js

@@ -1,102 +1,97 @@
- import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_6744325c_lang.css"; import { defineComponent as b, computed as x, openBlock as l, createElementBlock as c, createVNode as o, unref as t, withCtx as r, createTextVNode as i, toDisplayString as s, createCommentVNode as m, createElementVNode as f, Fragment as v, renderList as F, normalizeStyle as h, createBlock as g } from "vue";
-import n from "../typography/v4/Typography.vue.js";
-import { formatValue as d } from "./utils/utils.js";
-import k from "../icon/v4/IconV4.vue.js";
+ import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_3315b68f_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 u, toDisplayString as s } from "vue";
+import d from "../typography/v4/Typography.vue.js";
+import b from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
-const A = { class: "chart-tooltip" }, V = {
-  key: 0,
-  class: "tooltip-title-wrapper"
-}, C = { class: "list" }, T = { class: "popover-label-wrapper" }, _ = {
+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" }, A = {
+  key: 2,
   class: "tooltip-footer"
-}, I = /* @__PURE__ */ b({
+}, 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 }
+    totalValue: { default: null },
+    totalsChart: { type: Boolean, default: !1 },
+    valueSuffix: { default: "" },
+    valuePrefix: { default: "" }
   },
-  setup(e) {
-    const u = e, y = x(() => u.xAxisFormat === "date" ? "dateLong" : u.xAxisFormat), p = x(() => u.xAxisFormat === "date" ? "day" : u.xAxisFormat);
-    return (w, B) => (l(), c("div", A, [
-      e.title ? (l(), c("div", V, [
-        o(t(n), { variant: "subtitle2" }, {
-          default: r(() => [
-            i(s(t(d)(e.title, t(y))), 1)
-          ]),
-          _: 1
-        }),
-        o(t(n), {
-          class: "tooltip-sub-title",
-          variant: "caption"
-        }, {
-          default: r(() => [
-            i(s(t(d)(e.title, t(p))), 1)
-          ]),
-          _: 1
-        })
-      ])) : m("", !0),
-      f("ul", C, [
-        (l(!0), c(v, null, F(e.dataPoints, (a) => (l(), c("li", {
-          key: a.datasetIndex,
+  setup(t) {
+    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,
+        "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(y, null, v(t.dataPoints, (e) => (a(), o("li", {
+          key: e.datasetIndex,
           class: "list__item"
         }, [
           f("span", {
             class: "color-box",
             style: h({
-              backgroundColor: String(a.dataset.pointBackgroundColor)
+              backgroundColor: String(e.dataset.pointBackgroundColor)
             })
           }, null, 4),
-          a.dataset.icon ? (l(), g(t(k), {
+          e.dataset.icon ? (a(), c(l(b), {
             key: 0,
             class: "platform-icon",
-            type: a.dataset.iconType,
-            name: a.dataset.icon,
+            type: e.dataset.iconType,
+            name: e.dataset.icon,
             size: "16px"
-          }, null, 8, ["type", "name"])) : m("", !0),
-          f("div", T, [
-            o(t(n), {
+          }, null, 8, ["type", "name"])) : r("", !0),
+          f("div", V, [
+            i(l(d), {
               variant: "body2",
               class: "flex-grow truncated-label",
               "is-truncated": ""
             }, {
-              default: r(() => [
-                i(s(a.dataset.label), 1)
+              default: n(() => [
+                u(s(e.dataset.label), 1)
               ]),
               _: 2
             }, 1024)
           ]),
-          o(t(n), { variant: "body2" }, {
-            default: r(() => [
-              i(s(t(d)(a.parsed.y, e.yAxisFormat)), 1)
+          i(l(d), { variant: "body2" }, {
+            default: n(() => [
+              u(s(t.valuePrefix + l(x)(e.parsed.y, t.yAxisFormat, !0) + t.valueSuffix), 1)
             ]),
             _: 2
           }, 1024)
         ]))), 128))
-      ]),
-      e.totalValue !== null ? (l(), c("div", _, [
-        o(t(n), {
+      ])),
+      t.totalValue !== null ? (a(), o("div", A, [
+        i(l(d), {
           variant: "body2",
           class: "flex-grow"
         }, {
-          default: r(() => [
-            i(s(e.totalLabel), 1)
+          default: n(() => [
+            u(s(t.totalLabel), 1)
           ]),
           _: 1
         }),
-        o(t(n), { variant: "body2" }, {
-          default: r(() => [
-            i(s(t(d)(e.totalValue, e.yAxisFormat)), 1)
+        i(l(d), { variant: "body2" }, {
+          default: n(() => [
+            u(s(t.valuePrefix + l(x)(t.totalValue, t.yAxisFormat, !0) + t.valueSuffix), 1)
           ]),
           _: 1
         })
-      ])) : m("", !0)
+      ])) : r("", !0)
     ]));
   }
 });
 export {
-  I as default
+  L as default
 };

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

@@ -0,0 +1,37 @@
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    selected: unknown;
+    options: unknown[];
+    optionNameKey: string;
+}>, {
+    options: () => any[];
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (option: unknown) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    selected: unknown;
+    options: unknown[];
+    optionNameKey: string;
+}>, {
+    options: () => any[];
+}>>> & {
+    "onUpdate:selected"?: (option: unknown) => any;
+}, {
+    options: unknown[];
+}>;
+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/LegendSorting.vue.js

@@ -0,0 +1,45 @@
+import { defineComponent as l, openBlock as m, createElementBlock as s, createVNode as r, unref as n, isRef as d, withCtx as a, mergeProps as c } from "vue";
+import u from "../dropdown/v4/DropdownV4.vue.js";
+import "../dropdown/v4/DefaultDropdownTrigger.vue.js";
+import f from "../dropdown/v4/IconButtonDropdownTrigger.vue.js";
+import "../dropdown/v4/ChipDropdownTrigger.vue.js";
+import "../dropdown/v4/AppDropdownTrigger.vue.js";
+import "../dropdown/v4/ButtonDropdownTrigger.vue.js";
+import "../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
+import "../dropdown/v4/TreeDropdown.vue.js";
+import "../dropdown/v4/OptionV4.vue.js";
+import "../dropdown/v4/ConditionalDropdown.vue.js";
+import { useVModel as g } from "@vueuse/core";
+const y = { class: "legend-sorting" }, L = /* @__PURE__ */ l({
+  __name: "LegendSorting",
+  props: {
+    selected: null,
+    options: { default: () => [] },
+    optionNameKey: null
+  },
+  emits: ["update:selected"],
+  setup(o, { emit: p }) {
+    const t = g(o, "selected", p);
+    return (v, i) => (m(), s("div", y, [
+      r(n(u), {
+        selected: n(t),
+        "onUpdate:selected": i[0] || (i[0] = (e) => d(t) ? t.value = e : null),
+        "display-value": (e) => e[o.optionNameKey],
+        options: o.options,
+        "option-name-key": o.optionNameKey,
+        placement: "bottom-end"
+      }, {
+        "dropdown-trigger": a(({ buttonTriggerProps: e }) => [
+          r(n(f), c(e, {
+            "icon-name": "funnel-simple",
+            "icon-type": "regular"
+          }), null, 16)
+        ]),
+        _: 1
+      }, 8, ["selected", "display-value", "options", "option-name-key"])
+    ]));
+  }
+});
+export {
+  L as default
+};

package/components/chart/LegendSorting.vue2.js

@@ -0,0 +1,4 @@
+import f from "./LegendSorting.vue.js";
+export {
+  f as default
+};

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

@@ -10,6 +10,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }>>> & {
     "onUpdate:chartType"?: (type: ChartType) => any;
 }, {}>, {
+    "before-chart-type"?(_: {}): any;
     metric?(_: {}): any;
     breakdowns?(_: {}): any;
 }>;

package/components/chart/SettingsHeader.vue.js

@@ -1,7 +1,7 @@
 import e from "./SettingsHeader.vue2.js";
 /* empty css                     */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_9b6cd9d9_lang.css"; //*');
-const d = /* @__PURE__ */ o(e, [["__scopeId", "data-v-9b6cd9d9"]]);
+// import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_01f78cd7_lang.css"; //*');
+const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-01f78cd7"]]);
 export {
-  d as default
+  c as default
 };

package/components/chart/SettingsHeader.vue2.js

@@ -1,5 +1,5 @@
- import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_9b6cd9d9_lang.css"; import { defineComponent as h, computed as g, openBlock as y, createElementBlock as f, createElementVNode as r, normalizeClass as a, createVNode as l, unref as t, isRef as v, withCtx as T, mergeProps as w, renderSlot as p } from "vue";
-import b from "../dropdown/v4/DropdownV4.vue.js";
+ import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_01f78cd7_lang.css"; import { defineComponent as h, computed as g, openBlock as y, createElementBlock as f, createElementVNode as r, normalizeClass as l, renderSlot as i, createVNode as p, unref as t, isRef as v, withCtx as T, mergeProps as b } from "vue";
+import w from "../dropdown/v4/DropdownV4.vue.js";
 import "../dropdown/v4/DefaultDropdownTrigger.vue.js";
 import "../dropdown/v4/IconButtonDropdownTrigger.vue.js";
 import "../dropdown/v4/ChipDropdownTrigger.vue.js";
@@ -10,7 +10,7 @@ import "../dropdown/v4/TreeDropdown.vue.js";
 import "../dropdown/v4/OptionV4.vue.js";
 import "../dropdown/v4/ConditionalDropdown.vue.js";
 import { DROPDOWN_TYPE_OPTIONS as c } from "./consts.js";
-const _ = { class: "settings-header-container" }, B = { class: "chart-type-selection" }, x = /* @__PURE__ */ h({
+const B = { class: "settings-header-container" }, C = { class: "chart-type-selection" }, H = /* @__PURE__ */ h({
   __name: "SettingsHeader",
   props: {
     chartType: null,
@@ -25,41 +25,42 @@ const _ = { class: "settings-header-container" }, B = { class: "chart-type-selec
       set(e) {
         m("update:chartType", e.id);
       }
-    }), i = (e) => `Chart: ${e.name}`;
-    return (e, d) => (y(), f("div", _, [
+    }), d = (e) => `Chart: ${e.name}`;
+    return (e, a) => (y(), f("div", B, [
       r("div", {
-        class: a(["settings", { "settings-spacer": !s.hideLegend }])
+        class: l(["settings", { "settings-spacer": !s.hideLegend }])
       }, [
-        r("div", B, [
-          l(t(b), {
+        i(e.$slots, "before-chart-type", {}, void 0, !0),
+        r("div", C, [
+          p(t(w), {
             selected: t(o),
-            "onUpdate:selected": d[0] || (d[0] = (n) => v(o) ? o.value = n : null),
+            "onUpdate:selected": a[0] || (a[0] = (n) => v(o) ? o.value = n : null),
             options: t(c),
             "option-name-key": "name",
-            "display-value": i,
+            "display-value": d,
             placeholder: "Select chart type",
             size: "small"
           }, {
             "dropdown-trigger": T(({ buttonTriggerProps: n }) => [
-              l(t(k), w(n, {
-                label: i(t(o))
+              p(t(k), b(n, {
+                label: d(t(o))
               }), null, 16, ["label"])
             ]),
             _: 1
           }, 8, ["selected", "options"])
         ]),
         r("div", null, [
-          p(e.$slots, "metric", {}, void 0, !0)
+          i(e.$slots, "metric", {}, void 0, !0)
         ])
       ], 2),
       r("div", {
-        class: a(["breakdowns", { "breakdowns-border": !s.hideLegend }])
+        class: l(["breakdowns", { "breakdowns-border": !s.hideLegend }])
       }, [
-        p(e.$slots, "breakdowns", {}, void 0, !0)
+        i(e.$slots, "breakdowns", {}, void 0, !0)
       ], 2)
     ]));
   }
 });
 export {
-  x as default
+  H as default
 };

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

@@ -0,0 +1,52 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    subheader: string;
+    subheaderTooltip?: {
+        header?: string;
+        text?: string;
+    };
+    showSeparator?: boolean;
+}>, {
+    subheader: string;
+    subheaderTooltip: any;
+    showSeparator: 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<{
+    subheader: string;
+    subheaderTooltip?: {
+        header?: string;
+        text?: string;
+    };
+    showSeparator?: boolean;
+}>, {
+    subheader: string;
+    subheaderTooltip: any;
+    showSeparator: boolean;
+}>>>, {
+    subheader: string;
+    subheaderTooltip: any;
+    showSeparator: boolean;
+}>, {
+    "subheader-tooltip"?(_: {}): any;
+}>;
+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];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/chart/SubHeader.vue.js

@@ -0,0 +1,7 @@
+import e from "./SubHeader.vue2.js";
+/* empty css                */import o from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../SubHeader.vue_vue_type_style_index_0_scoped_e6008b6c_lang.css"; //*');
+const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-e6008b6c"]]);
+export {
+  c as default
+};