@ironsource/shared-ui 2.1.12-rc.9 → 2.1.12-test.58

package/ButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_0123c361_lang.css

@@ -0,0 +1 @@
+.button-trigger.open[data-v-0123c361]{background:var(--action-selected);outline:2px solid var(--action-active);outline-offset:-2px;transition:outline 0s}.button-trigger.open[data-v-0123c361]:hover{background:var(--action-selected)}.button-trigger .label-wrapper[data-v-0123c361]{display:block;width:100%}.button-trigger .label-wrapper .label-text[data-v-0123c361]{white-space:nowrap}.button-trigger[data-v-0123c361] .end-icon{color:var(--action-active)}

package/Chart.vue_vue_type_style_index_0_scoped_757e7752_lang.css

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

package/ChartHeader.vue_vue_type_style_index_0_scoped_92052479_lang.css

@@ -0,0 +1 @@
+.chart-header[data-v-92052479]{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 0}.chart-header .subheader[data-v-92052479]{color:var(--text-secondary)}.chart-header--compact[data-v-92052479]{padding-top:22px}.chart-header--compact .header-texts[data-v-92052479]{flex-direction:row}.chart-header--compact .header-text[data-v-92052479]{color:var(--text-secondary)}.header-row[data-v-92052479]{display:flex;align-items:flex-end;gap:4px}.header-texts[data-v-92052479]{display:flex;flex-direction:column;color:var(--text-primary);gap:4px;cursor:default}.type-switch[data-v-92052479]{display:flex;align-items:center;gap:4px}.subheader-tooltip[data-v-92052479]{display:flex;flex-direction:column;gap:.25rem}.subheader-tooltip__text[data-v-92052479]{color:var(--text-secondary)}

package/ChartHeaderTrend.vue_vue_type_style_index_0_scoped_d61ed404_lang.css

@@ -0,0 +1 @@
+.chart-trend[data-v-d61ed404]{display:flex}.chart-trend--up[data-v-d61ed404]{color:var(--success-contrast-text)}.chart-trend--up .trend-icon[data-v-d61ed404]{color:var(--success-darker)}.chart-trend--down[data-v-d61ed404]{color:var(--error-contrast-text)}.chart-trend--down .trend-icon[data-v-d61ed404]{color:var(--error-dark)}.chart-trend .trend-icon[data-v-d61ed404]{align-self:normal}.chart-trend-tooltip[data-v-d61ed404]{align-items:normal}.trend-tooltip[data-v-d61ed404]{display:flex;flex-direction:column}.trend-tooltip__header[data-v-d61ed404]{margin-bottom:.375rem}.trend-tooltip__text[data-v-d61ed404]{color:var(--text-secondary)}.separator[data-v-d61ed404]{display:flex;align-items:center;gap:.5rem;justify-content:center;height:1.1875rem}.separator__text[data-v-d61ed404]{display:block;color:var(--text-secondary)}.separator hr[data-v-d61ed404]{width:100%;height:1px;border:0;background:var(--common-divider)}

package/ChartLegend.vue_vue_type_style_index_0_scoped_da487aba_lang.css

@@ -0,0 +1 @@
+.disabled-tooltip[data-v-da487aba],.disabled-tooltip[data-v-da487aba] .container{width:100%}.chart-legend[data-v-da487aba]{display:flex;flex-direction:column;width:240px;height:100%;padding:0 8px 8px 12px}.search-box[data-v-da487aba]{padding:12px 0 4px;display:flex;align-items:center;gap:4px}.legend[data-v-da487aba]{overflow-y:auto;color:var(--text-primary);height:100%;overflow-x:hidden}.legend__list[data-v-da487aba]{list-style:none;padding:0}.legend__list>li[data-v-da487aba]{display:flex;align-items:center;gap:8px;padding:6px 8px}.legend__list>li[data-v-da487aba]:hover{background-color:var(--action-hover);border-radius:8px;cursor:pointer}.legend__list>li.disabled-item[data-v-da487aba]{cursor:not-allowed!important;opacity:.5;background:var(--background-paper)}.legend__list>li.empty-list[data-v-da487aba]{display:flex;align-items:center;justify-content:flex-start;height:32px;color:var(--text-disabled)}.legend__list>li.empty-list[data-v-da487aba]:hover{background-color:transparent;cursor:default}.legend__list>li .item-wrapper[data-v-da487aba]{display:flex;align-items:center;gap:8px;width:100%}.legend__list>li .item-wrapper .legend-label[data-v-da487aba]{width:80%}.legend__list>li .item-wrapper .icon-color[data-v-da487aba]{color:var(--action-active)}.legend__list>li .item-wrapper .label-container[data-v-da487aba]{display:flex;flex-direction:column;width:100%}.legend__list>li .item-wrapper .label-container .legend-caption[data-v-da487aba]{display:flex;color:var(--text-secondary)}

package/ChartPlane.vue_vue_type_style_index_0_scoped_bb382dc4_lang.css

@@ -0,0 +1 @@
+.chart-plane[data-v-bb382dc4]{--headerHeight: var(--1232aefa);width:100%}.chart-plane[data-v-bb382dc4],.chart-loading[data-v-bb382dc4],.chart-empty[data-v-bb382dc4]{height:var(--0162f236)}.header-wrapper[data-v-bb382dc4]{height:var(--headerHeight)}.chart[data-v-bb382dc4]{width:100%;height:calc(100% - var(--headerHeight));position:relative}.chart__canvas[data-v-bb382dc4]{width:100%;height:100%}.chart__tooltip[data-v-bb382dc4]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}

package/DataGrid.vue_vue_type_style_index_0_scoped_86ea5d2a_lang.css

@@ -0,0 +1 @@
+.sticky[data-v-86ea5d2a]{position:sticky}.table-container[data-v-86ea5d2a]{width:100%;position:relative;display:flex;flex-direction:column}.table-header[data-v-86ea5d2a]{display:flex;align-items:center;height:calc(var(--spacing-800) - 1px);border-bottom:1px solid var(--common-divider);background-color:var(--background-paper-elevation-0);position:sticky;left:0;padding:var(--spacing-300)}.table-header .table-title[data-v-86ea5d2a]{display:flex;flex:1;align-items:center;justify-content:flex-start;height:100%;color:var(--text-primary)}.table-header .table-header-right[data-v-86ea5d2a]{display:flex;align-items:center;height:100%}.table-header .search-wrapper[data-v-86ea5d2a]{width:13.75rem}.table-header.isStickyHeader[data-v-86ea5d2a]{z-index:calc(var(--1d1d1477) + 3);top:0}.table-head-container[data-v-86ea5d2a]{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary)}.table-footer[data-v-86ea5d2a]{color:var(--text-primary);background-color:var(--background-paper-elevation-0);padding:0 var(--spacing-300);display:flex;align-items:center;min-height:var(--spacing-600);border:1px solid var(--common-divider);border-radius:var(--border-radius-md);border-top-right-radius:0;border-top-left-radius:0}.table-body-wrapper[data-v-86ea5d2a]{display:inline-table}.table-header-pre-search-content[data-v-86ea5d2a]{margin-right:var(--spacing-100);display:flex;align-items:center}.table-header-actions[data-v-86ea5d2a]{margin-left:var(--spacing-100);display:flex;align-items:center}.table-row[data-v-86ea5d2a]{position:relative}.table-row.loading[data-v-86ea5d2a]{opacity:.7}.table-row:not(.expanded):last-child>td[data-v-86ea5d2a]{border-bottom:none}.table-row.expanded:last-child>.expanded-row[data-v-86ea5d2a]{border-bottom:none}.expanded-row[data-v-86ea5d2a]{grid-column:var(--2f1951ab);border-bottom:1px solid var(--common-divider);background-color:var(--background-default)}table[data-v-86ea5d2a]{position:relative;display:block;overflow:auto;background:var(--background-paper-elevation-0);border:1px solid var(--common-divider);color:var(--text-primary);text-align:left;table-layout:fixed;width:100%;max-height:100%;border-radius:var(--border-radius-md);border-collapse:collapse;border-spacing:0}table.hasFooter[data-v-86ea5d2a]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}table td[data-v-86ea5d2a],table th[data-v-86ea5d2a]{line-height:normal;padding:0 var(--spacing-200)}table td[data-v-86ea5d2a]:first-of-type,table th[data-v-86ea5d2a]:first-of-type{padding-left:var(--spacing-300)}table td[data-v-86ea5d2a]:last-of-type,table th[data-v-86ea5d2a]:last-of-type{padding-right:var(--spacing-300)}table td.expand-toggle-cell[data-v-86ea5d2a],table th.expand-toggle-cell[data-v-86ea5d2a]{padding-left:var(--spacing-150);padding-right:var(--spacing-75)}table>thead[data-v-86ea5d2a]{border-bottom:none;z-index:calc(var(--1d1d1477) + 1);display:inline-table;min-width:100%}table>thead>tr[data-v-86ea5d2a]{color:var(--text-primary);border-bottom:1px solid var(--common-divider);height:var(--spacing-500);display:grid;grid-template-columns:var(--d450b438)}table>thead>tr>th[data-v-86ea5d2a]{background:var(--background-paper-elevation-0);width:100%;display:flex;align-items:center;cursor:default}table>thead>tr>th.bordered[data-v-86ea5d2a]{border-right:1px solid var(--common-divider)}table>thead>tr>th.bordered.isStickyRight[data-v-86ea5d2a]{border-right:none;border-left:1px solid var(--common-divider)}table>thead>tr>th.isTextRight[data-v-86ea5d2a]{justify-content:flex-end}table>thead>tr>th.isSortable[data-v-86ea5d2a]{cursor:pointer}table>thead.sticky[data-v-86ea5d2a]{position:sticky;top:0;background:white}table>thead.isStickyHeader[data-v-86ea5d2a]{z-index:calc(var(--1d1d1477) + 2);top:calc(var(--spacing-800) - 1px)}table>tbody[data-v-86ea5d2a]{display:block}table>tbody>*>tr[data-v-86ea5d2a]{background-color:var(--background-default);min-height:var(--43af326c);height:auto;display:grid;align-items:center;grid-template-columns:var(--d450b438)}table>tbody>*>tr:nth-of-type(2n)>td[data-v-86ea5d2a]{background-color:var(--background-default)}table>tbody>*>tr:hover:not(.loading)>td[data-v-86ea5d2a],table>tbody>*>tr.activeMenu>td[data-v-86ea5d2a]{background-color:var(--background-paper-elevation-1)}table>tbody td[data-v-86ea5d2a]{background-color:var(--background-default);border:none;min-width:0;display:flex;min-height:var(--43af326c);height:auto;width:100%;place-items:center;border-bottom:1px solid var(--common-divider);justify-content:start}table>tbody td.bordered[data-v-86ea5d2a]{border-right:1px solid var(--common-divider)}table>tbody td.bordered.isStickyRight[data-v-86ea5d2a]{border-right:none;border-left:1px solid var(--common-divider)}table>tbody td.isTextRight[data-v-86ea5d2a]{justify-content:flex-end;text-align:right}.section-container[data-v-86ea5d2a]{left:0}.sections[data-v-86ea5d2a]{display:flex}.section[data-v-86ea5d2a]{padding:0 1.5rem;background:var(--background-default);left:0;height:32px;display:flex;align-items:flex-end;border-right:1px solid var(--common-divider)}.table-cell[data-v-86ea5d2a]{width:100%}.empty-state[data-v-86ea5d2a]{min-height:250px}.floating-row[data-v-86ea5d2a]{display:flex;inset:0;pointer-events:none;position:absolute;z-index:calc(var(--1d1d1477) + 1)}.floating-row *[data-v-86ea5d2a-s]{pointer-events:auto}

package/IconButtonDropdownTrigger.vue_vue_type_style_index_0_scoped_99e51ecc_lang.css

@@ -0,0 +1 @@
+div[data-v-99e51ecc]{display:block}

package/SettingsHeader.vue_vue_type_style_index_0_scoped_01f78cd7_lang.css

@@ -0,0 +1 @@
+.settings-header-container[data-v-01f78cd7]{display:flex;border:.0625rem solid var(--common-divider);border-radius:.375rem .375rem 0 0;border-bottom:none;background-color:var(--background-paper-elevation-0, #f9f9f9);justify-content:space-between}.settings-header-container .settings[data-v-01f78cd7]{display:flex;flex-direction:row;height:3.875rem;padding:.75rem 0 .75rem 1.5rem;align-items:center;gap:.75rem;flex:1}.settings-header-container .settings .chart-type-selection[data-v-01f78cd7]{display:flex;margin-right:auto;height:1.75rem;max-width:8.125rem}.settings-header-container .settings-spacer[data-v-01f78cd7]{padding:.75rem 1.5rem}.settings-header-container .breakdowns[data-v-01f78cd7]{display:flex;width:15.0625rem;height:3.875rem;padding:0 .75rem;flex-direction:column;justify-content:center;align-items:flex-start;gap:.75rem}.settings-header-container .breakdowns-border[data-v-01f78cd7]{border-left:.0625rem solid var(--common-divider)}

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

@@ -1,4 +1,5 @@
 import { ChartDataSet, ChartParsingConfig, ChartType, ValueFormat } from './types';
+import { TotalType } from '@/utils/totals';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     dataSets: ChartDataSet[];
     visibleIds: unknown[];
@@ -10,10 +11,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     loading?: boolean;
     withAnimation?: boolean;
     totalsChart?: boolean;
+    tooltipTotalType?: TotalType;
+    tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
     header?: string;
     subheader?: string;
+    subheaderTooltipHeader?: string;
+    subheaderTooltipText?: string;
     trendValue?: string | number;
     trendDirection?: "up" | "down";
+    trendTooltipHeader?: string;
+    trendTooltipRangeCurrent?: string;
+    trendTooltipRangePrevious?: string;
     noDataIcon?: string;
     noDataTitle?: string;
     noDataSubtitle?: string;
@@ -21,6 +29,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minVisible?: number;
     maxVisible?: number;
     maxLimitTooltipText?: string;
+    sortSelected?: unknown;
+    sortOptions?: unknown[];
+    sortOptionNameKey?: string;
     fullHeight?: boolean;
     withSettingsHeader?: boolean;
     extraCharts?: Record<string, unknown>[];
@@ -35,10 +46,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     loading: boolean;
     withAnimation: boolean;
     totalsChart: boolean;
+    tooltipTotalType: TotalType;
+    tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
     header: string;
     subheader: string;
+    subheaderTooltipHeader: any;
+    subheaderTooltipText: any;
     trendValue: any;
     trendDirection: string;
+    trendTooltipHeader: any;
+    trendTooltipRangeCurrent: any;
+    trendTooltipRangePrevious: any;
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
@@ -46,12 +64,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minVisible: number;
     maxVisible: number;
     maxLimitTooltipText: string;
+    sortSelected: any;
+    sortOptions: () => any[];
+    sortOptionNameKey: string;
     fullHeight: boolean;
     withSettingsHeader: boolean;
     extraCharts: () => any[];
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:chartType": (chartType: ChartType) => void;
     "update:visibleIds": (visibleIds: unknown[]) => void;
+    "update:sortSelected": (sortOption: unknown) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     dataSets: ChartDataSet[];
     visibleIds: unknown[];
@@ -63,10 +85,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     loading?: boolean;
     withAnimation?: boolean;
     totalsChart?: boolean;
+    tooltipTotalType?: TotalType;
+    tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
     header?: string;
     subheader?: string;
+    subheaderTooltipHeader?: string;
+    subheaderTooltipText?: string;
     trendValue?: string | number;
     trendDirection?: "up" | "down";
+    trendTooltipHeader?: string;
+    trendTooltipRangeCurrent?: string;
+    trendTooltipRangePrevious?: string;
     noDataIcon?: string;
     noDataTitle?: string;
     noDataSubtitle?: string;
@@ -74,6 +103,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minVisible?: number;
     maxVisible?: number;
     maxLimitTooltipText?: string;
+    sortSelected?: unknown;
+    sortOptions?: unknown[];
+    sortOptionNameKey?: string;
     fullHeight?: boolean;
     withSettingsHeader?: boolean;
     extraCharts?: Record<string, unknown>[];
@@ -88,10 +120,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     loading: boolean;
     withAnimation: boolean;
     totalsChart: boolean;
+    tooltipTotalType: TotalType;
+    tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
     header: string;
     subheader: string;
+    subheaderTooltipHeader: any;
+    subheaderTooltipText: any;
     trendValue: any;
     trendDirection: string;
+    trendTooltipHeader: any;
+    trendTooltipRangeCurrent: any;
+    trendTooltipRangePrevious: any;
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
@@ -99,11 +138,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minVisible: number;
     maxVisible: number;
     maxLimitTooltipText: string;
+    sortSelected: any;
+    sortOptions: () => any[];
+    sortOptionNameKey: string;
     fullHeight: boolean;
     withSettingsHeader: boolean;
     extraCharts: () => any[];
 }>>> & {
     "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
+    "onUpdate:sortSelected"?: (sortOption: unknown) => any;
     "onUpdate:chartType"?: (chartType: ChartType) => any;
 }, {
     header: string;
@@ -112,6 +155,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minVisible: number;
     maxVisible: number;
     maxLimitTooltipText: string;
+    sortSelected: any;
+    sortOptions: unknown[];
+    sortOptionNameKey: string;
     chartType: ChartType;
     hideLegend: boolean;
     xAxisFormat: ValueFormat;
@@ -119,18 +165,26 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     parsing: ChartParsingConfig;
     dataSets: ChartDataSet[];
     subheader: string;
+    subheaderTooltipHeader: string;
+    subheaderTooltipText: string;
+    trendTooltipHeader: string;
+    trendTooltipRangeCurrent: string;
+    trendTooltipRangePrevious: string;
     trendValue: string | number;
     trendDirection: "up" | "down";
     tickCount: number;
-    withAnimation: boolean;
-    totalsChart: boolean;
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
+    withAnimation: boolean;
+    tooltipTotalType: TotalType;
+    tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
+    totalsChart: boolean;
     fullHeight: boolean;
     withSettingsHeader: boolean;
     extraCharts: Record<string, unknown>[];
 }>, {
+    "before-chart-type"?(_: {}): any;
     metric?(_: {}): any;
     breakdowns?(_: {}): any;
     "subheader-tooltip"?(_: {}): any;

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_78d3f5a8_lang.css"; //*');
-const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-78d3f5a8"]]);
+/* empty css            */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../Chart.vue_vue_type_style_index_0_scoped_757e7752_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-757e7752"]]);
 export {
-  a as default
+  p as default
 };

package/components/chart/Chart.vue2.js

@@ -1,21 +1,22 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_78d3f5a8_lang.css"; import { defineComponent as V, computed as n, openBlock as s, createElementBlock as d, Fragment as C, createBlock as x, unref as a, isRef as v, withCtx as u, renderSlot as c, createCommentVNode as T, createElementVNode as I, mergeProps as h, normalizeClass as H, createVNode as S, renderList as E } from "vue";
-import { useVModel as U } from "@vueuse/core";
-import N from "./ChartLegend.vue.js";
-import P from "./SettingsHeader.vue.js";
-import D from "./ChartPlane.vue.js";
-import { useColorsMap as M } from "./composables/useColorsMap.js";
-import { DEFAULT_TICK_COUNT as $, DEFAULT_MIN_VISIBLE as z, DEFAULT_MAX_VISIBLE as K } from "./consts.js";
-import { ChartType as O } from "./types.js";
-import { useChartHeight as R } from "./composables/useChartHeight.js";
-const X = {
+ import "../../Chart.vue_vue_type_style_index_0_scoped_757e7752_lang.css"; import { defineComponent as P, computed as n, openBlock as s, createElementBlock as m, Fragment as x, createBlock as S, unref as o, isRef as f, withCtx as d, renderSlot as u, createCommentVNode as I, createElementVNode as H, mergeProps as T, normalizeClass as E, createVNode as D, createSlots as N, renderList as U } from "vue";
+import { useVModel as F } from "@vueuse/core";
+import R from "./ChartLegend.vue.js";
+import M from "./SettingsHeader.vue.js";
+import L from "./ChartPlane.vue.js";
+import { useColorsMap as O } from "./composables/useColorsMap.js";
+import { DEFAULT_TICK_COUNT as $, DEFAULT_MIN_VISIBLE as K, DEFAULT_MAX_VISIBLE as z } from "./consts.js";
+import { ChartType as X } from "./types.js";
+import { useChartHeight as j } from "./composables/useChartHeight.js";
+import { TotalType as q, calculateTotal as G } from "../../utils/totals.js";
+const J = {
   key: 0,
   class: "chart-sidebar"
-}, ee = /* @__PURE__ */ V({
+}, re = /* @__PURE__ */ P({
   __name: "Chart",
   props: {
     dataSets: { default: () => [] },
     visibleIds: { default: () => [] },
-    chartType: { default: O.Line },
+    chartType: { default: X.Line },
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
@@ -23,24 +24,34 @@ const X = {
     loading: { type: Boolean, default: !1 },
     withAnimation: { type: Boolean, default: !0 },
     totalsChart: { type: Boolean, default: !1 },
+    tooltipTotalType: { default: q.Total },
+    tooltipTotalCalcFn: { type: Function, default: G },
     header: { default: "" },
     subheader: { default: "" },
+    subheaderTooltipHeader: { default: null },
+    subheaderTooltipText: { default: null },
     trendValue: { default: null },
     trendDirection: { default: "up" },
+    trendTooltipHeader: { default: null },
+    trendTooltipRangeCurrent: { default: null },
+    trendTooltipRangePrevious: { default: null },
     noDataIcon: { default: "file-search" },
     noDataTitle: { default: "No data to display" },
     noDataSubtitle: { default: "Search again with different filters" },
     hideLegend: { type: Boolean, default: !1 },
-    minVisible: { default: z },
-    maxVisible: { default: K },
+    minVisible: { default: K },
+    maxVisible: { default: z },
     maxLimitTooltipText: { default: "" },
+    sortSelected: { default: null },
+    sortOptions: { default: () => [] },
+    sortOptionNameKey: { default: "" },
     fullHeight: { type: Boolean, default: !1 },
     withSettingsHeader: { type: Boolean, default: !0 },
     extraCharts: { default: () => [] }
   },
-  emits: ["update:chartType", "update:visibleIds"],
-  setup(i, { emit: p }) {
-    const e = i, l = U(e, "chartType", p), m = n(() => ({
+  emits: ["update:chartType", "update:visibleIds", "update:sortSelected"],
+  setup(a, { emit: p }) {
+    const e = a, i = F(e, "chartType", p), c = F(e, "sortSelected", p), y = n(() => ({
       dataSets: e.dataSets,
       visibleIds: e.visibleIds,
       parsing: e.parsing,
@@ -55,71 +66,93 @@ const X = {
       noDataSubtitle: e.noDataSubtitle,
       withAnimation: e.withAnimation,
       typeSwitcher: !e.withSettingsHeader,
-      height: F.value,
-      compactHeader: y.value > 1,
+      height: V.value,
+      compactHeader: C.value > 1,
       trendValue: e.trendValue,
       trendDirection: e.trendDirection,
-      totalsChart: e.totalsChart
-    })), L = n(() => e.dataSets), f = n(() => e.visibleIds), g = n(() => e.extraCharts.length), y = n(() => 1 + g.value), w = (t) => t === g.value - 1, { colorsMap: A } = M({ dataSets: L, visibleIds: f }), k = n(() => e.dataSets.map((t) => ({
+      trendTooltipHeader: e.trendTooltipHeader,
+      trendTooltipRangeCurrent: e.trendTooltipRangeCurrent,
+      trendTooltipRangePrevious: e.trendTooltipRangePrevious,
+      totalsChart: e.totalsChart,
+      subheaderTooltipHeader: e.subheaderTooltipHeader,
+      subheaderTooltipText: e.subheaderTooltipText,
+      colorsMap: h.value,
+      tooltipTotalType: e.tooltipTotalType,
+      tooltipTotalCalcFn: e.tooltipTotalCalcFn
+    })), k = n(() => e.dataSets), g = n(() => e.visibleIds), b = n(() => e.extraCharts.length), C = n(() => 1 + b.value), w = (t) => t === b.value - 1, { colorsMap: h } = O({
+      dataSets: k,
+      visibleIds: g
+    }), A = n(() => e.dataSets.map((t) => ({
       id: t.id,
       label: t.label,
       caption: t.caption || null,
-      color: A.value[t.id] || null,
+      color: h.value[t.id] || null,
       icon: t.icon || null,
       iconType: t.iconType || "branded"
-    }))), { containerProps: B, eachPlaneHeight: F } = R({
-      chartPlanesCount: y,
+    }))), { containerProps: B, eachPlaneHeight: V } = j({
+      chartPlanesCount: C,
       useFullHeight: e.fullHeight
     });
-    return (t, r) => (s(), d(C, null, [
-      i.withSettingsHeader ? (s(), x(P, {
+    return (t, r) => (s(), m(x, null, [
+      a.withSettingsHeader ? (s(), S(M, {
         key: 0,
-        "chart-type": a(l),
-        "onUpdate:chart-type": r[0] || (r[0] = (o) => v(l) ? l.value = o : null),
-        "hide-legend": i.hideLegend
+        "chart-type": o(i),
+        "onUpdate:chart-type": r[0] || (r[0] = (l) => f(i) ? i.value = l : null),
+        "hide-legend": a.hideLegend
       }, {
-        metric: u(() => [
-          c(t.$slots, "metric", {}, void 0, !0)
+        "before-chart-type": d(() => [
+          u(t.$slots, "before-chart-type", {}, void 0, !0)
         ]),
-        breakdowns: u(() => [
-          c(t.$slots, "breakdowns", {}, void 0, !0)
+        metric: d(() => [
+          u(t.$slots, "metric", {}, void 0, !0)
+        ]),
+        breakdowns: d(() => [
+          u(t.$slots, "breakdowns", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["chart-type", "hide-legend"])) : T("", !0),
-      I("div", h({ class: "chart-container" }, a(B)), [
-        I("section", {
-          class: H(["chart-planes", [{ "with-legend": !i.hideLegend }]])
+      }, 8, ["chart-type", "hide-legend"])) : I("", !0),
+      H("div", T({ class: "chart-container" }, o(B)), [
+        H("section", {
+          class: E(["chart-planes", [{ "with-legend": !a.hideLegend }]])
         }, [
-          S(D, h({
-            "chart-type": a(l),
-            "onUpdate:chart-type": r[1] || (r[1] = (o) => v(l) ? l.value = o : null)
-          }, a(m)), {
-            "subheader-tooltip": u(() => [
-              c(t.$slots, "subheader-tooltip", {}, void 0, !0)
-            ]),
-            _: 3
-          }, 16, ["chart-type"]),
-          (s(!0), d(C, null, E(i.extraCharts, (o, b) => (s(), x(D, h({
-            key: b,
+          D(L, T({
+            "chart-type": o(i),
+            "onUpdate:chart-type": r[1] || (r[1] = (l) => f(i) ? i.value = l : null)
+          }, o(y)), N({ _: 2 }, [
+            t.$slots["subheader-tooltip"] ? {
+              name: "subheader-tooltip",
+              fn: d(() => [
+                u(t.$slots, "subheader-tooltip", {}, void 0, !0)
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1040, ["chart-type"]),
+          (s(!0), m(x, null, U(a.extraCharts, (l, v) => (s(), S(L, T({
+            key: v,
             class: "extra-chart-plane"
-          }, { ...a(m), ...o }, {
-            "chart-type": a(l),
+          }, { ...o(y), ...l }, {
+            "chart-type": o(i),
+            "colors-map": o(h),
             "type-switcher": !1,
-            "tooltip-respects-top-edge": !w(b)
-          }), null, 16, ["chart-type", "tooltip-respects-top-edge"]))), 128))
+            "tooltip-respects-top-edge": !w(v)
+          }), null, 16, ["chart-type", "colors-map", "tooltip-respects-top-edge"]))), 128))
         ], 2),
-        i.hideLegend ? T("", !0) : (s(), d("section", X, [
-          S(N, {
-            items: a(k),
-            "visible-ids": a(f),
-            "max-limit-tooltip-text": i.maxLimitTooltipText,
-            "onUpdate:visibleIds": r[2] || (r[2] = (o) => p("update:visibleIds", o))
-          }, null, 8, ["items", "visible-ids", "max-limit-tooltip-text"])
+        a.hideLegend ? I("", !0) : (s(), m("section", J, [
+          D(R, {
+            "sort-selected": o(c),
+            "onUpdate:sort-selected": r[2] || (r[2] = (l) => f(c) ? c.value = l : null),
+            items: o(A),
+            "visible-ids": o(g),
+            "max-limit-tooltip-text": a.maxLimitTooltipText,
+            "sort-options": a.sortOptions,
+            "sort-option-name-key": a.sortOptionNameKey,
+            "onUpdate:visibleIds": r[3] || (r[3] = (l) => p("update:visibleIds", l))
+          }, null, 8, ["sort-selected", "items", "visible-ids", "max-limit-tooltip-text", "sort-options", "sort-option-name-key"])
         ]))
       ], 16)
     ], 64));
   }
 });
 export {
-  ee as default
+  re as default
 };

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

@@ -4,6 +4,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     typeSwitcher: boolean;
     header?: string;
     subheader?: string;
+    subheaderTooltipHeader?: string;
+    subheaderTooltipText?: string;
+    trendTooltipHeader?: string;
+    trendTooltipRangeCurrent?: string;
+    trendTooltipRangePrevious?: string;
     compact: boolean;
     trendValue?: string | number;
     trendDirection?: "up" | "down";
@@ -12,6 +17,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     typeSwitcher: boolean;
     header: string;
     subheader: string;
+    subheaderTooltipHeader: any;
+    subheaderTooltipText: any;
+    trendTooltipHeader: any;
+    trendTooltipRangeCurrent: any;
+    trendTooltipRangePrevious: any;
     compact: boolean;
     trendValue: any;
     trendDirection: string;
@@ -22,6 +32,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     typeSwitcher: boolean;
     header?: string;
     subheader?: string;
+    subheaderTooltipHeader?: string;
+    subheaderTooltipText?: string;
+    trendTooltipHeader?: string;
+    trendTooltipRangeCurrent?: string;
+    trendTooltipRangePrevious?: string;
     compact: boolean;
     trendValue?: string | number;
     trendDirection?: "up" | "down";
@@ -30,6 +45,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     typeSwitcher: boolean;
     header: string;
     subheader: string;
+    subheaderTooltipHeader: any;
+    subheaderTooltipText: any;
+    trendTooltipHeader: any;
+    trendTooltipRangeCurrent: any;
+    trendTooltipRangePrevious: any;
     compact: boolean;
     trendValue: any;
     trendDirection: string;
@@ -41,6 +61,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     chartType: ChartType;
     typeSwitcher: boolean;
     subheader: string;
+    subheaderTooltipHeader: string;
+    subheaderTooltipText: string;
+    trendTooltipHeader: string;
+    trendTooltipRangeCurrent: string;
+    trendTooltipRangePrevious: string;
     trendValue: string | number;
     trendDirection: "up" | "down";
 }>, {

package/components/chart/ChartHeader.vue.js

@@ -1,7 +1,7 @@
 import e from "./ChartHeader.vue2.js";
 /* empty css                  */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartHeader.vue_vue_type_style_index_0_scoped_32001725_lang.css"; //*');
-const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-32001725"]]);
+// import "../../ChartHeader.vue_vue_type_style_index_0_scoped_92052479_lang.css"; //*');
+const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-92052479"]]);
 export {
   s as default
 };