@ironsource/shared-ui 2.1.12-rc.11 → 2.1.12-rc.13

package/Chart.vue_vue_type_style_index_0_scoped_a0b89669_lang.css

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

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

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_0875167b_lang.css

@@ -0,0 +1 @@
+.settings-header-container[data-v-0875167b]{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-0875167b]{display:flex;flex-direction:row;justify-content:space-between;height:3.9375rem;padding:.75rem 0 .75rem 1.5rem;align-items:center;gap:.75rem;flex:1}.settings-header-container .settings .chart-type-selection[data-v-0875167b]{display:flex;height:1.75rem;max-width:8.125rem}.settings-header-container .settings-spacer[data-v-0875167b]{padding:.75rem 1.5rem}.settings-header-container .breakdowns[data-v-0875167b]{display:flex;width:15.0625rem;height:3.9375rem;padding:0 .75rem;flex-direction:column;justify-content:center;align-items:flex-start;gap:.75rem}.settings-header-container .breakdowns-border[data-v-0875167b]{border-left:.0625rem solid var(--common-divider)}

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

@@ -21,6 +21,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>[];
@@ -46,12 +49,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[];
@@ -74,6 +81,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>[];
@@ -99,11 +109,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 +126,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;
@@ -122,11 +139,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     trendValue: string | number;
     trendDirection: "up" | "down";
     tickCount: number;
-    withAnimation: boolean;
-    totalsChart: boolean;
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
+    withAnimation: boolean;
+    totalsChart: boolean;
     fullHeight: boolean;
     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_78d3f5a8_lang.css"; //*');
-const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-78d3f5a8"]]);
+// import "../../Chart.vue_vue_type_style_index_0_scoped_a0b89669_lang.css"; //*');
+const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-a0b89669"]]);
 export {
   a as default
 };

package/components/chart/Chart.vue2.js

@@ -1,25 +1,25 @@
- 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 "../../Chart.vue_vue_type_style_index_0_scoped_a0b89669_lang.css"; import { defineComponent as E, computed as n, openBlock as s, createElementBlock as c, Fragment as S, createBlock as T, unref as a, isRef as h, withCtx as m, renderSlot as f, createCommentVNode as I, createElementVNode as D, mergeProps as y, normalizeClass as N, createVNode as L, renderList as U } from "vue";
+import { useVModel as k } from "@vueuse/core";
+import M 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 w from "./ChartPlane.vue.js";
+import { useColorsMap as O } from "./composables/useColorsMap.js";
+import { DEFAULT_TICK_COUNT as K, DEFAULT_MIN_VISIBLE as $, DEFAULT_MAX_VISIBLE as z } from "./consts.js";
+import { ChartType as R } from "./types.js";
+import { useChartHeight as X } from "./composables/useChartHeight.js";
+const j = {
   key: 0,
   class: "chart-sidebar"
-}, ee = /* @__PURE__ */ V({
+}, te = /* @__PURE__ */ E({
   __name: "Chart",
   props: {
     dataSets: { default: () => [] },
     visibleIds: { default: () => [] },
-    chartType: { default: O.Line },
+    chartType: { default: R.Line },
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
-    tickCount: { default: $ },
+    tickCount: { default: K },
     loading: { type: Boolean, default: !1 },
     withAnimation: { type: Boolean, default: !0 },
     totalsChart: { type: Boolean, default: !1 },
@@ -31,16 +31,19 @@ const X = {
     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: $ },
+    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(o, { emit: d }) {
+    const e = o, r = k(e, "chartType", d), u = k(e, "sortSelected", d), g = n(() => ({
       dataSets: e.dataSets,
       visibleIds: e.visibleIds,
       parsing: e.parsing,
@@ -55,71 +58,80 @@ const X = {
       noDataSubtitle: e.noDataSubtitle,
       withAnimation: e.withAnimation,
       typeSwitcher: !e.withSettingsHeader,
-      height: F.value,
-      compactHeader: y.value > 1,
+      height: H.value,
+      compactHeader: v.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) => ({
+      totalsChart: e.totalsChart,
+      colorsMap: p.value
+    })), A = n(() => e.dataSets), b = n(() => e.visibleIds), C = n(() => e.extraCharts.length), v = n(() => 1 + C.value), B = (t) => t === C.value - 1, { colorsMap: p } = O({
+      dataSets: A,
+      visibleIds: b
+    }), F = n(() => e.dataSets.map((t) => ({
       id: t.id,
       label: t.label,
       caption: t.caption || null,
-      color: A.value[t.id] || null,
+      color: p.value[t.id] || null,
       icon: t.icon || null,
       iconType: t.iconType || "branded"
-    }))), { containerProps: B, eachPlaneHeight: F } = R({
-      chartPlanesCount: y,
+    }))), { containerProps: V, eachPlaneHeight: H } = X({
+      chartPlanesCount: v,
       useFullHeight: e.fullHeight
     });
-    return (t, r) => (s(), d(C, null, [
-      i.withSettingsHeader ? (s(), x(P, {
+    return (t, i) => (s(), c(S, null, [
+      o.withSettingsHeader ? (s(), T(P, {
         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": a(r),
+        "onUpdate:chart-type": i[0] || (i[0] = (l) => h(r) ? r.value = l : null),
+        "hide-legend": o.hideLegend
       }, {
-        metric: u(() => [
-          c(t.$slots, "metric", {}, void 0, !0)
+        metric: m(() => [
+          f(t.$slots, "metric", {}, void 0, !0)
         ]),
-        breakdowns: u(() => [
-          c(t.$slots, "breakdowns", {}, void 0, !0)
+        breakdowns: m(() => [
+          f(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),
+      D("div", y({ class: "chart-container" }, a(V)), [
+        D("section", {
+          class: N(["chart-planes", [{ "with-legend": !o.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)
+          L(w, y({
+            "chart-type": a(r),
+            "onUpdate:chart-type": i[1] || (i[1] = (l) => h(r) ? r.value = l : null)
+          }, a(g)), {
+            "subheader-tooltip": m(() => [
+              f(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,
+          (s(!0), c(S, null, U(o.extraCharts, (l, x) => (s(), T(w, y({
+            key: x,
             class: "extra-chart-plane"
-          }, { ...a(m), ...o }, {
-            "chart-type": a(l),
+          }, { ...a(g), ...l }, {
+            "chart-type": a(r),
+            "colors-map": a(p),
             "type-switcher": !1,
-            "tooltip-respects-top-edge": !w(b)
-          }), null, 16, ["chart-type", "tooltip-respects-top-edge"]))), 128))
+            "tooltip-respects-top-edge": !B(x)
+          }), 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"])
+        o.hideLegend ? I("", !0) : (s(), c("section", j, [
+          L(M, {
+            "sort-selected": a(u),
+            "onUpdate:sort-selected": i[2] || (i[2] = (l) => h(u) ? u.value = l : null),
+            items: a(F),
+            "visible-ids": a(b),
+            "max-limit-tooltip-text": o.maxLimitTooltipText,
+            "sort-options": o.sortOptions,
+            "sort-option-name-key": o.sortOptionNameKey,
+            "onUpdate:visibleIds": i[3] || (i[3] = (l) => d("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
+  te as default
 };

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

@@ -5,34 +5,51 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     minVisible?: number;
     maxVisible?: number;
     maxLimitTooltipText?: string;
+    sortSelected?: unknown;
+    sortOptions?: unknown[];
+    sortOptionNameKey?: string;
 }>, {
     items: () => any[];
     visibleIds: () => any[];
     minVisible: number;
     maxVisible: number;
     maxLimitTooltipText: string;
+    sortSelected: any;
+    sortOptions: () => any[];
+    sortOptionNameKey: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "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<{
     items: LegendItem[];
     visibleIds: unknown[];
     minVisible?: number;
     maxVisible?: number;
     maxLimitTooltipText?: string;
+    sortSelected?: unknown;
+    sortOptions?: unknown[];
+    sortOptionNameKey?: string;
 }>, {
     items: () => any[];
     visibleIds: () => any[];
     minVisible: number;
     maxVisible: number;
     maxLimitTooltipText: string;
+    sortSelected: any;
+    sortOptions: () => any[];
+    sortOptionNameKey: string;
 }>>> & {
     "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
+    "onUpdate:sortSelected"?: (sortOption: unknown) => any;
 }, {
     items: LegendItem[];
     visibleIds: unknown[];
     minVisible: number;
     maxVisible: number;
     maxLimitTooltipText: string;
+    sortSelected: any;
+    sortOptions: unknown[];
+    sortOptionNameKey: string;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/chart/ChartLegend.vue.js

@@ -1,7 +1,7 @@
 import e from "./ChartLegend.vue2.js";
 /* empty css                  */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartLegend.vue_vue_type_style_index_0_scoped_532f23bc_lang.css"; //*');
-const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-532f23bc"]]);
+// import "../../ChartLegend.vue_vue_type_style_index_0_scoped_da487aba_lang.css"; //*');
+const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-da487aba"]]);
 export {
-  c as default
+  s as default
 };

package/components/chart/ChartLegend.vue2.js

@@ -1,124 +1,135 @@
- import "../../ChartLegend.vue_vue_type_style_index_0_scoped_532f23bc_lang.css"; import { defineComponent as S, ref as P, computed as m, openBlock as s, createElementBlock as c, createElementVNode as r, createVNode as d, unref as o, mergeProps as I, withCtx as p, createTextVNode as b, Fragment as A, renderList as F, normalizeClass as H, withModifiers as U, createBlock as k, createCommentVNode as L, toDisplayString as g } from "vue";
-import { useVirtualList as z } from "@vueuse/core";
-import f from "../typography/v4/Typography.vue.js";
-import R from "../checkbox/v4/CheckboxV4.vue.js";
+ import "../../ChartLegend.vue_vue_type_style_index_0_scoped_da487aba_lang.css"; import { defineComponent as O, ref as P, computed as b, openBlock as s, createElementBlock as p, createElementVNode as d, createVNode as c, unref as o, createBlock as v, isRef as U, createCommentVNode as h, mergeProps as T, withCtx as u, createTextVNode as x, Fragment as A, renderList as F, normalizeClass as H, withModifiers as R, toDisplayString as _ } from "vue";
+import { useVModel as z, useVirtualList as K } from "@vueuse/core";
+import k from "../typography/v4/Typography.vue.js";
+import $ from "../checkbox/v4/CheckboxV4.vue.js";
 import q from "../search/v4/SearchV4.vue.js";
 import { DEFAULT_MIN_VISIBLE as G, DEFAULT_MAX_VISIBLE as X } from "./consts.js";
-import $ from "../icon/v4/IconV4.vue.js";
+import j from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
-import j from "../tooltip/v4/TooltipV4.vue.js";
-const J = { class: "chart-legend" }, K = { class: "search-box" }, O = {
+import J from "../tooltip/v4/TooltipV4.vue.js";
+import Q from "./LegendSorting.vue.js";
+const W = { class: "chart-legend" }, Y = { class: "search-box" }, Z = {
   key: 0,
   class: "empty-list"
-}, Q = ["onClick"], W = { class: "label-container" }, ne = /* @__PURE__ */ S({
+}, ee = ["onClick"], te = { class: "label-container" }, ue = /* @__PURE__ */ O({
   __name: "ChartLegend",
   props: {
     items: { default: () => [] },
     visibleIds: { default: () => [] },
     minVisible: { default: G },
     maxVisible: { default: X },
-    maxLimitTooltipText: { default: "" }
+    maxLimitTooltipText: { default: "" },
+    sortSelected: { default: null },
+    sortOptions: { default: () => [] },
+    sortOptionNameKey: { default: "" }
   },
-  emits: ["update:visibleIds"],
-  setup(h, { emit: T }) {
-    const l = h, y = 32, u = P(""), C = m(() => {
-      const t = u.value.toLowerCase();
-      return l.items.filter(
-        (i) => i.label.toLowerCase().includes(t)
+  emits: ["update:visibleIds", "update:sortSelected"],
+  setup(a, { emit: y }) {
+    const i = a, V = 32, m = z(i, "sortSelected", y), f = P(""), C = b(() => {
+      const t = f.value.toLowerCase();
+      return i.items.filter(
+        (l) => l.label.toLowerCase().includes(t)
       );
-    }), a = (t) => l.visibleIds.includes(t.id), v = m(
-      () => l.visibleIds.length >= l.maxVisible
-    ), V = m(
-      () => l.visibleIds.length <= l.minVisible
-    ), n = (t) => V.value && a(t) || v.value && !a(t), w = (t) => !l.maxLimitTooltipText || a(t) || !v.value, E = (t, i) => {
-      T(
+    }), n = (t) => i.visibleIds.includes(t.id), I = b(
+      () => i.visibleIds.length >= i.maxVisible
+    ), w = b(
+      () => i.visibleIds.length <= i.minVisible
+    ), r = (t) => w.value && n(t) || I.value && !n(t), S = (t) => !i.maxLimitTooltipText || n(t) || !I.value, E = (t, l) => {
+      y(
         "update:visibleIds",
-        t ? [...l.visibleIds, i.id] : l.visibleIds.filter((e) => e !== i.id)
+        t ? [...i.visibleIds, l.id] : i.visibleIds.filter((e) => e !== l.id)
       );
-    }, { list: x, containerProps: N, wrapperProps: B } = z(C, {
-      itemHeight: y,
+    }, { list: g, containerProps: N, wrapperProps: M } = K(C, {
+      itemHeight: V,
       overscan: 10
-    }), D = (t) => {
-      n(t) || E(!a(t), t);
+    }), B = (t) => {
+      r(t) || E(!n(t), t);
     };
-    return (t, i) => (s(), c("div", J, [
-      r("div", K, [
-        d(o(q), {
-          modelValue: u.value,
-          "onUpdate:modelValue": i[0] || (i[0] = (e) => u.value = e)
-        }, null, 8, ["modelValue"])
+    return (t, l) => (s(), p("div", W, [
+      d("div", Y, [
+        c(o(q), {
+          modelValue: f.value,
+          "onUpdate:modelValue": l[0] || (l[0] = (e) => f.value = e)
+        }, null, 8, ["modelValue"]),
+        a.sortOptions?.length > 0 ? (s(), v(Q, {
+          key: 0,
+          selected: o(m),
+          "onUpdate:selected": l[1] || (l[1] = (e) => U(m) ? m.value = e : null),
+          options: a.sortOptions,
+          "option-name-key": a.sortOptionNameKey
+        }, null, 8, ["selected", "options", "option-name-key"])) : h("", !0)
       ]),
-      r("div", I({ class: "legend" }, o(N)), [
-        r("ul", I({ class: "legend__list" }, o(B)), [
-          o(x).length === 0 ? (s(), c("li", O, [
-            d(o(f), { variant: "body2" }, {
-              default: p(() => [
-                b("No results")
+      d("div", T({ class: "legend" }, o(N)), [
+        d("ul", T({ class: "legend__list" }, o(M)), [
+          o(g).length === 0 ? (s(), p("li", Z, [
+            c(o(k), { variant: "body2" }, {
+              default: u(() => [
+                x("No results")
               ]),
               _: 1
             })
-          ])) : (s(!0), c(A, { key: 1 }, F(o(x), ({ data: e, index: M }) => (s(), c("li", {
-            key: M,
-            class: H({ "disabled-item": n(e) })
+          ])) : (s(!0), p(A, { key: 1 }, F(o(g), ({ data: e, index: D }) => (s(), p("li", {
+            key: D,
+            class: H({ "disabled-item": r(e) })
           }, [
-            d(o(j), {
-              text: h.maxLimitTooltipText,
-              disabled: w(e),
+            c(o(J), {
+              text: a.maxLimitTooltipText,
+              disabled: S(e),
               class: "disabled-tooltip"
             }, {
-              default: p(() => [
-                r("div", {
+              default: u(() => [
+                d("div", {
                   class: "item-wrapper",
-                  onClick: (_) => D(e)
+                  onClick: (L) => B(e)
                 }, [
-                  d(o(R), {
+                  c(o($), {
                     color: e.color,
-                    "is-checked": a(e),
-                    disabled: n(e),
-                    onClick: i[1] || (i[1] = U(
-                      (_) => {
-                        _.stopPropagation();
+                    "is-checked": n(e),
+                    disabled: r(e),
+                    onClick: l[2] || (l[2] = R(
+                      (L) => {
+                        L.stopPropagation();
                       },
                       ["stop"]
                     ))
                   }, null, 8, ["color", "is-checked", "disabled"]),
-                  e.icon ? (s(), k(o($), {
+                  e.icon ? (s(), v(o(j), {
                     key: 0,
                     class: "icon-color",
                     type: e.iconType,
                     name: e.icon,
                     size: "16px"
-                  }, null, 8, ["type", "name"])) : L("", !0),
-                  r("div", W, [
-                    d(o(f), {
+                  }, null, 8, ["type", "name"])) : h("", !0),
+                  d("div", te, [
+                    c(o(k), {
                       variant: "body2",
                       class: "legend-label",
                       "is-truncated": "",
-                      "with-tooltip": !n(e),
+                      "with-tooltip": !r(e),
                       "tooltip-text": e.label,
                       "tooltip-placement": "left"
                     }, {
-                      default: p(() => [
-                        b(g(e.label), 1)
+                      default: u(() => [
+                        x(_(e.label), 1)
                       ]),
                       _: 2
                     }, 1032, ["with-tooltip", "tooltip-text"]),
-                    e.caption ? (s(), k(o(f), {
+                    e.caption ? (s(), v(o(k), {
                       key: 0,
                       variant: "caption",
                       class: "legend-caption legend-label",
                       "is-truncated": "",
-                      "with-tooltip": !n(e),
+                      "with-tooltip": !r(e),
                       "tooltip-text": e.caption,
                       "tooltip-placement": "left"
                     }, {
-                      default: p(() => [
-                        b(g(e.caption), 1)
+                      default: u(() => [
+                        x(_(e.caption), 1)
                       ]),
                       _: 2
-                    }, 1032, ["with-tooltip", "tooltip-text"])) : L("", !0)
+                    }, 1032, ["with-tooltip", "tooltip-text"])) : h("", !0)
                   ])
-                ], 8, Q)
+                ], 8, ee)
               ]),
               _: 2
             }, 1032, ["text", "disabled"])
@@ -129,5 +140,5 @@ const J = { class: "chart-legend" }, K = { class: "search-box" }, O = {
   }
 });
 export {
-  ne as default
+  ue as default
 };

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

@@ -21,6 +21,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     trendValue?: string | number;
     trendDirection?: "up" | "down";
     totalsChart?: boolean;
+    colorsMap: Record<string, string>;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -44,6 +45,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     trendValue: any;
     trendDirection: string;
     totalsChart: boolean;
+    colorsMap: () => {};
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:chartType": (chartType: ChartType) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -68,6 +70,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     trendValue?: string | number;
     trendDirection?: "up" | "down";
     totalsChart?: boolean;
+    colorsMap: Record<string, string>;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -91,6 +94,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     trendValue: any;
     trendDirection: string;
     totalsChart: boolean;
+    colorsMap: () => {};
 }>>> & {
     "onUpdate:chartType"?: (chartType: ChartType) => any;
 }, {
@@ -108,13 +112,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     trendValue: string | number;
     trendDirection: "up" | "down";
     tickCount: number;
-    withAnimation: boolean;
-    totalsChart: boolean;
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
+    withAnimation: boolean;
     compactHeader: boolean;
     tooltipRespectsTopEdge: boolean;
+    totalsChart: boolean;
+    colorsMap: Record<string, string>;
 }>, {
     "subheader-tooltip"?(_: {}): any;
 }>;

package/components/chart/ChartPlane.vue.js

@@ -1,7 +1,7 @@
 import o from "./ChartPlane.vue2.js";
 /* empty css                 */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartPlane.vue_vue_type_style_index_0_scoped_4396faf6_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-4396faf6"]]);
+// import "../../ChartPlane.vue_vue_type_style_index_0_scoped_0f3a67d5_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-0f3a67d5"]]);
 export {
   s as default
 };