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

package/components/chart/ChartPlane.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[];
@@ -9,6 +10,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tickCount?: number;
     header?: string;
     subheader?: string;
+    subheaderTooltipHeader?: string;
+    subheaderTooltipText?: string;
     loading?: boolean;
     noDataIcon?: string;
     noDataTitle?: string;
@@ -18,9 +21,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     height?: string;
     compactHeader?: boolean;
     tooltipRespectsTopEdge?: boolean;
+    tooltipTotalType?: TotalType;
+    tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
     trendValue?: string | number;
     trendDirection?: "up" | "down";
+    trendTooltipHeader?: string;
+    trendTooltipRangeCurrent?: string;
+    trendTooltipRangePrevious?: string;
     totalsChart?: boolean;
+    colorsMap: Record<string, string>;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -31,7 +40,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tickCount: number;
     header: string;
     subheader: string;
-    subheaderTooltip: string;
+    subheaderTooltipHeader: any;
+    subheaderTooltipText: any;
     loading: boolean;
     noDataIcon: string;
     noDataTitle: string;
@@ -41,9 +51,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     height: string;
     compactHeader: boolean;
     tooltipRespectsTopEdge: boolean;
+    tooltipTotalType: TotalType;
+    tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
     trendValue: any;
     trendDirection: string;
+    trendTooltipHeader: any;
+    trendTooltipRangeCurrent: any;
+    trendTooltipRangePrevious: any;
     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<{
@@ -56,6 +72,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tickCount?: number;
     header?: string;
     subheader?: string;
+    subheaderTooltipHeader?: string;
+    subheaderTooltipText?: string;
     loading?: boolean;
     noDataIcon?: string;
     noDataTitle?: string;
@@ -65,9 +83,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     height?: string;
     compactHeader?: boolean;
     tooltipRespectsTopEdge?: boolean;
+    tooltipTotalType?: TotalType;
+    tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
     trendValue?: string | number;
     trendDirection?: "up" | "down";
+    trendTooltipHeader?: string;
+    trendTooltipRangeCurrent?: string;
+    trendTooltipRangePrevious?: string;
     totalsChart?: boolean;
+    colorsMap: Record<string, string>;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -78,7 +102,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tickCount: number;
     header: string;
     subheader: string;
-    subheaderTooltip: string;
+    subheaderTooltipHeader: any;
+    subheaderTooltipText: any;
     loading: boolean;
     noDataIcon: string;
     noDataTitle: string;
@@ -88,9 +113,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     height: string;
     compactHeader: boolean;
     tooltipRespectsTopEdge: boolean;
+    tooltipTotalType: TotalType;
+    tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
     trendValue: any;
     trendDirection: string;
+    trendTooltipHeader: any;
+    trendTooltipRangeCurrent: any;
+    trendTooltipRangePrevious: any;
     totalsChart: boolean;
+    colorsMap: () => {};
 }>>> & {
     "onUpdate:chartType"?: (chartType: ChartType) => any;
 }, {
@@ -105,16 +136,24 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     dataSets: ChartDataSet[];
     typeSwitcher: boolean;
     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;
     compactHeader: boolean;
     tooltipRespectsTopEdge: boolean;
+    tooltipTotalType: TotalType;
+    tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
+    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_bb382dc4_lang.css"; //*');
+const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-bb382dc4"]]);
 export {
-  s as default
+  a as default
 };

package/components/chart/ChartPlane.vue2.js

@@ -1,33 +1,36 @@
- import "../../ChartPlane.vue_vue_type_style_index_0_scoped_4396faf6_lang.css"; import { defineComponent as j, useCssVars as q, unref as s, computed as a, ref as C, onMounted as J, watch as g, nextTick as Q, openBlock as f, createElementBlock as X, createElementVNode as h, createVNode as ee, isRef as te, createSlots as ae, withCtx as oe, renderSlot as re, normalizeStyle as le, createBlock as b, createCommentVNode as I } from "vue";
-import { Chart as H, ArcElement as ie, LineElement as ne, BarElement as se, PointElement as ce, LineController as de, BarController as ue, PieController as pe, ScatterController as fe, CategoryScale as he, LinearScale as me, Filler as ve, Tooltip as ye } from "chart.js";
-import { HoverVerticalLine as Ce } from "./plugins/HoverVerticalLine.js";
-import { formatValue as O, calcStepSize as ge } from "./utils/utils.js";
-import { DEFAULT_TICK_COUNT as be, TOTALS_HELPER_KEY as P, POINT_BORDER_COLOR as Te, TICK_LABEL_COLOR as F, TICK_LABEL_FONT as N, GRID_LINE_COLOR as M, HEADER_HEIGHT as ke, COMPACT_HEADER_HEIGHT as xe } from "./consts.js";
-import { ChartType as i } from "./types.js";
-import { useTooltipPosition as Se } from "./composables/useTooltipPosition.js";
-import Le from "./ChartTooltip.vue.js";
+ import "../../ChartPlane.vue_vue_type_style_index_0_scoped_bb382dc4_lang.css"; import { defineComponent as J, useCssVars as Q, unref as d, computed as o, ref as g, onMounted as X, watch as C, nextTick as _, openBlock as h, createElementBlock as ee, createElementVNode as m, createVNode as te, isRef as ae, createSlots as oe, withCtx as le, renderSlot as re, normalizeStyle as ie, createBlock as b, createCommentVNode as V } from "vue";
+import { Chart as O, ArcElement as ne, LineElement as se, BarElement as de, PointElement as ue, LineController as ce, BarController as pe, PieController as fe, ScatterController as he, CategoryScale as me, LinearScale as ve, Filler as Te, Tooltip as ye } from "chart.js";
+import { HoverVerticalLine as ge } from "./plugins/HoverVerticalLine.js";
+import { formatValue as F, calcStepSize as Ce } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as be, TOTALS_HELPER_KEY as I, POINT_BORDER_COLOR as xe, TICK_LABEL_COLOR as P, TICK_LABEL_FONT as N, GRID_LINE_COLOR as M, HEADER_HEIGHT as ke, COMPACT_HEADER_HEIGHT as Se } from "./consts.js";
+import { ChartType as n } from "./types.js";
+import { useTooltipPosition as Le } from "./composables/useTooltipPosition.js";
+import Re from "./ChartTooltip.vue.js";
 import { hexColorToRgba as Ee } from "../../utils/color.js";
-import { useChartValues as Be } from "./composables/useChartValues.js";
-import Ae from "./ChartHeader.vue.js";
-import { useVModel as Re } from "@vueuse/core";
+import { useChartValues as Ae } from "./composables/useChartValues.js";
+import Be from "./ChartHeader.vue.js";
+import { useVModel as He } from "@vueuse/core";
 import we from "../emptyState/v4/EmptyStateV4.vue.js";
-import Ve from "./ChartLoader.vue.js";
-import { useColorsMap as De } from "./composables/useColorsMap.js";
-const Ie = {
+import De from "./ChartLoader.vue.js";
+import { DEFAULT_CHART_COLOR as Ve } from "./colorPalette.js";
+import { TotalType as z, calculateTotal as Oe } from "../../utils/totals.js";
+const Fe = {
   key: 0,
   class: "chart-plane"
-}, He = { class: "header-wrapper" }, Oe = { class: "chart" }, Je = /* @__PURE__ */ j({
+}, Ie = { class: "header-wrapper" }, Pe = { class: "chart" }, et = /* @__PURE__ */ J({
   __name: "ChartPlane",
   props: {
     dataSets: { default: () => [] },
     visibleIds: { default: () => [] },
-    chartType: { default: i.Line },
+    chartType: { default: n.Line },
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
     tickCount: { default: be },
     header: { default: "" },
     subheader: { default: "" },
+    subheaderTooltipHeader: { default: null },
+    subheaderTooltipText: { default: null },
     loading: { type: Boolean, default: !1 },
     noDataIcon: { default: "file-search" },
     noDataTitle: { default: "No data to display" },
@@ -37,97 +40,105 @@ const Ie = {
     height: { default: "100%" },
     compactHeader: { type: Boolean, default: !1 },
     tooltipRespectsTopEdge: { type: Boolean, default: !0 },
+    tooltipTotalType: { default: z.Total },
+    tooltipTotalCalcFn: { type: Function, default: Oe },
     trendValue: { default: null },
     trendDirection: { default: "up" },
-    totalsChart: { type: Boolean, default: !1 }
+    trendTooltipHeader: { default: null },
+    trendTooltipRangeCurrent: { default: null },
+    trendTooltipRangePrevious: { default: null },
+    totalsChart: { type: Boolean, default: !1 },
+    colorsMap: { default: () => ({}) }
   },
   emits: ["update:chartType"],
-  setup(o, { emit: z }) {
-    const e = o;
-    q((t) => ({
-      "86c5ce4e": s(Z),
-      "27543fc4": o.height
-    })), H.register(
-      ie,
+  setup(a, { emit: K }) {
+    const e = a;
+    Q((t) => ({
+      "1232aefa": d(q),
+      "0162f236": a.height
+    })), O.register(
       ne,
       se,
-      ce,
       de,
       ue,
+      ce,
       pe,
       fe,
       he,
       me,
       ve,
+      Te,
       ye,
-      Ce
+      ge
     );
-    const m = Re(e, "chartType", z), K = a(
+    const v = He(e, "chartType", K), U = o(
       () => e.withAnimation ? "" : "none"
-    ), c = C(null);
-    let n = null;
-    const T = a(() => e.dataSets.length === 0), k = a(() => !e.loading && !T.value), v = () => {
-      c.value && (n && n.destroy(), n = new H(c.value, A.value));
-    }, _ = () => {
-      n && (n.data.datasets = E.value, n.options = A.value.options, n.update(K.value));
+    ), u = g(null);
+    let s = null;
+    const x = o(() => e.dataSets.length === 0), k = o(() => !e.loading && !x.value), T = () => {
+      u.value && (s && s.destroy(), s = new O(u.value, A.value));
+    }, $ = () => {
+      s && (s.data.datasets = E.value, s.options = A.value.options, s.update(U.value));
     };
-    J(v), g(() => e.chartType, v), g(k, async (t) => {
-      t && (await Q(), v());
-    }), g([() => e.visibleIds, () => e.dataSets], _);
-    const d = a(() => e.totalsChart), u = a(
-      () => e.chartType === i.StackedLine || e.chartType === i.StackedBar || d.value
-    ), x = a(
-      () => e.chartType === i.Line || e.chartType === i.StackedLine
-    ), S = a(() => d.value ? { ...e.parsing, xAxisKey: P } : e.parsing), L = a(() => d.value ? e.dataSets.map((t) => ({
+    X(T), C(() => e.chartType, T), C(k, async (t) => {
+      t && (await _(), T());
+    }), C([() => e.visibleIds, () => e.dataSets], $);
+    const c = o(() => e.totalsChart), p = o(
+      () => e.chartType === n.StackedLine || e.chartType === n.StackedBar || c.value
+    ), S = o(
+      () => e.chartType === n.Line || e.chartType === n.StackedLine
+    ), L = o(() => c.value ? { ...e.parsing, xAxisKey: I } : e.parsing), G = o(() => c.value ? e.dataSets.map((t) => ({
       ...t,
       data: t.data.map((r) => ({
         ...r,
-        [P]: t.label
+        [I]: t.label
       }))
-    })) : e.dataSets), U = a(() => e.visibleIds || []), p = a(
-      () => L.value.filter((t) => e.visibleIds.includes(t.id))
-    ), { colorsMap: $ } = De({ dataSets: L, visibleIds: U }), E = a(() => p.value.map((t) => {
-      const r = $.value[t.id];
+    })) : e.dataSets), f = o(
+      () => G.value.filter((t) => e.visibleIds.includes(t.id))
+    ), W = (t) => e.colorsMap[t] || Ve, R = o(
+      () => f.value.length && f.value.every(
+        (t) => t.data.length === 1
+      )
+    ), E = o(() => f.value.map((t, r) => {
+      const i = W(t.id), y = p.value ? r !== 0 ? "-1" : "start" : void 0;
       return {
         ...t,
-        fill: u.value ? "start" : void 0,
+        fill: y,
         backgroundColor: Ee(
-          r,
-          e.chartType === i.StackedLine ? 10 : 70
+          i,
+          e.chartType === n.StackedLine ? 10 : 70
         ),
-        borderColor: r,
-        pointBackgroundColor: r,
-        pointHoverBorderColor: r,
+        borderColor: i,
+        pointBackgroundColor: i,
+        pointHoverBorderColor: i,
         maxBarThickness: 50,
         clip: 5,
         // draw a bit outside the chart area
         icon: t.icon || null,
         iconType: t.iconType || "branded"
       };
-    })), B = a(
-      () => p.value.length && p.value.every(
-        (t) => t.data.length === 1
-      )
-    ), A = a(
+    })), Z = o(
+      () => e.tooltipTotalType === z.Total ? "Total" : "Mean"
+    ), A = o(
       () => ({
-        type: e.chartType == i.Bar || e.chartType === i.StackedBar ? "bar" : "line",
+        type: e.chartType == n.Bar || e.chartType === n.StackedBar ? "bar" : "line",
         // Chart Data
         data: {
           datasets: E.value
         },
         // Chart Options
         options: {
-          parsing: S.value,
+          parsing: L.value,
           interaction: {
             intersect: !1,
-            mode: d.value ? "point" : "index",
+            mode: c.value ? "point" : "index",
             axis: "x"
           },
           // plugins
           plugins: {
             legend: { display: !1 },
             title: { display: !1 },
-            hoverVerticalLine: x.value,
+            hoverVerticalLine: S.value,
             // tooltip
             tooltip: {
               enabled: !1,
@@ -137,8 +148,11 @@ const Ie = {
               },
               callbacks: {
                 footer: (t) => {
-                  const r = t.reduce((y, Y) => y + (Y.parsed.y || 0), 0);
-                  return ["Total", String(r)];
+                  const r = t.map((y) => y.parsed.y || 0), i = e.tooltipTotalCalcFn(
+                    r,
+                    e.tooltipTotalType
+                  );
+                  return [Z.value, String(i)];
                 }
               }
             }
@@ -160,12 +174,12 @@ const Ie = {
               tension: 0.3
             },
             point: {
-              radius: B.value ? 3 : 1,
+              radius: R.value ? 3 : 1,
               hitRadius: 8,
               borderWidth: 0,
               hoverRadius: 4,
               hoverBorderWidth: 2,
-              pointHoverBackgroundColor: Te
+              pointHoverBackgroundColor: xe
             },
             bar: {
               borderRadius: 4
@@ -175,17 +189,17 @@ const Ie = {
             // Horizontal Axis (X)
             x: {
               beginAtZero: !0,
-              offset: !x.value || B.value,
+              offset: !S.value || R.value,
               border: { display: !1 },
-              stacked: u.value,
+              stacked: p.value,
               // stack on top of each other
               // ticks
               ticks: {
-                color: F,
+                color: P,
                 font: N,
                 padding: 4,
                 callback: function(t) {
-                  return O(
+                  return F(
                     this.getLabelForValue(t),
                     e.xAxisFormat
                   );
@@ -205,17 +219,17 @@ const Ie = {
               beginAtZero: !0,
               border: { display: !1 },
               // hide left borderline
-              stacked: u.value,
+              stacked: p.value,
               // stack on top of each other
               // ticks
               ticks: {
-                color: F,
+                color: P,
                 font: N,
                 padding: 8,
                 stepSize: D.value,
-                min: V.value,
+                min: w.value,
                 max: D.value * e.tickCount,
-                callback: (t) => O(t, e.yAxisFormat)
+                callback: (t) => F(t, e.yAxisFormat)
               },
               // grid lines
               grid: {
@@ -227,80 +241,85 @@ const Ie = {
           }
         }
       })
-    ), R = C(null), l = C(null), { position: w } = Se(
-      c,
-      R,
+    ), B = g(null), l = g(null), { position: H } = Le(
+      u,
+      B,
       l,
       e.tooltipRespectsTopEdge
-    ), G = a(() => ({
-      left: `${w.value.left}px`,
-      top: `${w.value.top}px`,
+    ), Y = o(() => ({
+      left: `${H.value.left}px`,
+      top: `${H.value.top}px`,
       opacity: l.value?.opacity || 0
-    })), { minValue: V, maxValue: W } = Be({
-      parsingConfig: S.value,
-      dataSets: p,
-      isStacked: u
-    }), D = a(
-      () => ge(V.value, W.value, e.tickCount)
-    ), Z = a(
-      () => (e.compactHeader ? xe : ke) + "px"
+    })), { minValue: w, maxValue: j } = Ae({
+      parsingConfig: L.value,
+      dataSets: f,
+      isStacked: p
+    }), D = o(
+      () => Ce(w.value, j.value, e.tickCount)
+    ), q = o(
+      () => (e.compactHeader ? Se : ke) + "px"
     );
-    return (t, r) => s(k) ? (f(), X("section", Ie, [
-      h("div", He, [
-        ee(Ae, {
-          "chart-type": s(m),
-          "onUpdate:chart-type": r[0] || (r[0] = (y) => te(m) ? m.value = y : null),
-          "type-switcher": o.typeSwitcher,
-          header: o.header,
-          subheader: o.subheader,
-          compact: o.compactHeader,
-          "trend-value": o.trendValue,
-          "trend-direction": o.trendDirection
-        }, ae({ _: 2 }, [
+    return (t, r) => d(k) ? (h(), ee("section", Fe, [
+      m("div", Ie, [
+        te(Be, {
+          "chart-type": d(v),
+          "onUpdate:chart-type": r[0] || (r[0] = (i) => ae(v) ? v.value = i : null),
+          "type-switcher": a.typeSwitcher,
+          header: a.header,
+          subheader: a.subheader,
+          "subheader-tooltip-header": a.subheaderTooltipHeader,
+          "subheader-tooltip-text": a.subheaderTooltipText,
+          "trend-tooltip-header": a.trendTooltipHeader,
+          "trend-tooltip-range-current": a.trendTooltipRangeCurrent,
+          "trend-tooltip-range-previous": a.trendTooltipRangePrevious,
+          compact: a.compactHeader,
+          "trend-value": a.trendValue,
+          "trend-direction": a.trendDirection
+        }, oe({ _: 2 }, [
           t.$slots["subheader-tooltip"] ? {
             name: "subheader-tooltip",
-            fn: oe(() => [
+            fn: le(() => [
               re(t.$slots, "subheader-tooltip", {}, void 0, !0)
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["chart-type", "type-switcher", "header", "subheader", "compact", "trend-value", "trend-direction"])
+        ]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip-header", "subheader-tooltip-text", "trend-tooltip-header", "trend-tooltip-range-current", "trend-tooltip-range-previous", "compact", "trend-value", "trend-direction"])
       ]),
-      h("div", Oe, [
-        h("canvas", {
+      m("div", Pe, [
+        m("canvas", {
           ref_key: "chartRef",
-          ref: c,
+          ref: u,
           class: "chart__canvas"
         }, null, 512),
-        h("div", {
+        m("div", {
           ref_key: "tooltipRef",
-          ref: R,
+          ref: B,
           class: "chart__tooltip",
-          style: le(s(G))
+          style: ie(d(Y))
         }, [
-          l.value ? (f(), b(Le, {
+          l.value ? (h(), b(Re, {
             key: 0,
             title: String(l.value.title),
             "data-points": l.value.dataPoints,
-            "x-axis-format": o.xAxisFormat,
-            "y-axis-format": o.yAxisFormat,
+            "x-axis-format": a.xAxisFormat,
+            "y-axis-format": a.yAxisFormat,
             "total-label": l.value.footer[0],
             "total-value": Number(l.value.footer[1])
-          }, null, 8, ["title", "data-points", "x-axis-format", "y-axis-format", "total-label", "total-value"])) : I("", !0)
+          }, null, 8, ["title", "data-points", "x-axis-format", "y-axis-format", "total-label", "total-value"])) : V("", !0)
         ], 4)
       ])
-    ])) : o.loading ? (f(), b(Ve, {
+    ])) : a.loading ? (h(), b(De, {
       key: 1,
       class: "chart-loading"
-    })) : s(T) ? (f(), b(s(we), {
+    })) : d(x) ? (h(), b(d(we), {
       key: 2,
       class: "chart-empty",
-      title: o.noDataTitle,
-      subtitle: o.noDataSubtitle,
-      "icon-name": o.noDataIcon
-    }, null, 8, ["title", "subtitle", "icon-name"])) : I("", !0);
+      title: a.noDataTitle,
+      subtitle: a.noDataSubtitle,
+      "icon-name": a.noDataIcon
+    }, null, 8, ["title", "subtitle", "icon-name"])) : V("", !0);
   }
 });
 export {
-  Je as default
+  et 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;
 }>;