@ironsource/shared-ui 2.1.12-rc.12 → 2.1.12-rc.14

package/components/chart/ChartPlane.vue2.js

@@ -1,33 +1,35 @@
- 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 { 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 we from "../emptyState/v4/EmptyStateV4.vue.js";
-import Ve from "./ChartLoader.vue.js";
-import { useColorsMap as De } from "./composables/useColorsMap.js";
-const Ie = {
+ import "../../ChartPlane.vue_vue_type_style_index_0_scoped_ae87f435_lang.css"; import { defineComponent as q, useCssVars as J, unref as c, computed as o, ref as C, onMounted as Q, watch as b, nextTick as X, openBlock as h, createElementBlock as tt, createElementVNode as m, createVNode as et, isRef as at, createSlots as ot, withCtx as lt, renderSlot as rt, normalizeStyle as it, createBlock as g, createCommentVNode as H } from "vue";
+import { Chart as O, ArcElement as nt, LineElement as st, BarElement as ct, PointElement as dt, LineController as ut, BarController as pt, PieController as ft, ScatterController as ht, CategoryScale as mt, LinearScale as vt, Filler as yt, Tooltip as Tt } from "chart.js";
+import { HoverVerticalLine as Ct } from "./plugins/HoverVerticalLine.js";
+import { formatValue as F, calcStepSize as bt } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as gt, TOTALS_HELPER_KEY as I, POINT_BORDER_COLOR as kt, TICK_LABEL_COLOR as P, TICK_LABEL_FONT as N, GRID_LINE_COLOR as M, HEADER_HEIGHT as xt, COMPACT_HEADER_HEIGHT as St } from "./consts.js";
+import { ChartType as n } from "./types.js";
+import { useTooltipPosition as Lt } from "./composables/useTooltipPosition.js";
+import Et from "./ChartTooltip.vue.js";
+import { hexColorToRgba as At } from "../../utils/color.js";
+import { useChartValues as Bt } from "./composables/useChartValues.js";
+import Rt from "./ChartHeader.vue.js";
+import { useVModel as wt } from "@vueuse/core";
+import Dt from "../emptyState/v4/EmptyStateV4.vue.js";
+import Vt from "./ChartLoader.vue.js";
+import { DEFAULT_CHART_COLOR as Ht } from "./colorPalette.js";
+import { TotalType as z, calculateTotal as Ot } from "../../utils/totals.js";
+const Ft = {
   key: 0,
   class: "chart-plane"
-}, He = { class: "header-wrapper" }, Oe = { class: "chart" }, Je = /* @__PURE__ */ j({
+}, It = { class: "header-wrapper" }, Pt = { class: "chart" }, te = /* @__PURE__ */ q({
   __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 },
+    tickCount: { default: gt },
     header: { default: "" },
     subheader: { default: "" },
+    subheaderTooltip: { default: null },
     loading: { type: Boolean, default: !1 },
     noDataIcon: { default: "file-search" },
     noDataTitle: { default: "No data to display" },
@@ -37,108 +39,117 @@ const Ie = {
     height: { default: "100%" },
     compactHeader: { type: Boolean, default: !1 },
     tooltipRespectsTopEdge: { type: Boolean, default: !0 },
+    tooltipTotalType: { default: z.Total },
+    tooltipTotalCalcFn: { type: Function, default: Ot },
     trendValue: { default: null },
     trendDirection: { default: "up" },
-    totalsChart: { type: Boolean, default: !1 }
+    trendTooltip: { 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,
-      ne,
-      se,
-      ce,
-      de,
-      ue,
-      pe,
-      fe,
-      he,
-      me,
-      ve,
-      ye,
-      Ce
+  setup(a, { emit: K }) {
+    const t = a;
+    J((e) => ({
+      "4640c185": c(j),
+      "07515470": a.height
+    })), O.register(
+      nt,
+      st,
+      ct,
+      dt,
+      ut,
+      pt,
+      ft,
+      ht,
+      mt,
+      vt,
+      yt,
+      Tt,
+      Ct
     );
-    const m = Re(e, "chartType", z), K = a(
-      () => 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));
+    const v = wt(t, "chartType", K), U = o(
+      () => t.withAnimation ? "" : "none"
+    ), d = C(null);
+    let s = null;
+    const k = o(() => t.dataSets.length === 0), x = o(() => !t.loading && !k.value), y = () => {
+      d.value && (s && s.destroy(), s = new O(d.value, B.value));
+    }, $ = () => {
+      s && (s.data.datasets = A.value, s.options = B.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) => ({
-      ...t,
-      data: t.data.map((r) => ({
+    Q(y), b(() => t.chartType, y), b(x, async (e) => {
+      e && (await X(), y());
+    }), b([() => t.visibleIds, () => t.dataSets], $);
+    const u = o(() => t.totalsChart), p = o(
+      () => t.chartType === n.StackedLine || t.chartType === n.StackedBar || u.value
+    ), S = o(
+      () => t.chartType === n.Line || t.chartType === n.StackedLine
+    ), L = o(() => u.value ? { ...t.parsing, xAxisKey: I } : t.parsing), G = o(() => u.value ? t.dataSets.map((e) => ({
+      ...e,
+      data: e.data.map((r) => ({
         ...r,
-        [P]: t.label
+        [I]: e.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];
+    })) : t.dataSets), f = o(
+      () => G.value.filter((e) => t.visibleIds.includes(e.id))
+    ), W = (e) => t.colorsMap[e] || Ht, E = o(
+      () => f.value.length && f.value.every(
+        (e) => e.data.length === 1
+      )
+    ), A = o(() => f.value.map((e, r) => {
+      const i = W(e.id), T = p.value ? r !== 0 ? "-1" : "start" : void 0;
       return {
-        ...t,
-        fill: u.value ? "start" : void 0,
-        backgroundColor: Ee(
-          r,
-          e.chartType === i.StackedLine ? 10 : 70
+        ...e,
+        fill: T,
+        backgroundColor: At(
+          i,
+          t.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"
+        icon: e.icon || null,
+        iconType: e.iconType || "branded"
       };
-    })), B = a(
-      () => p.value.length && p.value.every(
-        (t) => t.data.length === 1
-      )
-    ), A = a(
+    })), _ = o(
+      () => t.tooltipTotalType === z.Total ? "Total" : "Mean"
+    ), B = o(
       () => ({
-        type: e.chartType == i.Bar || e.chartType === i.StackedBar ? "bar" : "line",
+        type: t.chartType == n.Bar || t.chartType === n.StackedBar ? "bar" : "line",
         // Chart Data
         data: {
-          datasets: E.value
+          datasets: A.value
         },
         // Chart Options
         options: {
-          parsing: S.value,
+          parsing: L.value,
           interaction: {
             intersect: !1,
-            mode: d.value ? "point" : "index",
+            mode: u.value ? "point" : "index",
             axis: "x"
           },
           // plugins
           plugins: {
             legend: { display: !1 },
             title: { display: !1 },
-            hoverVerticalLine: x.value,
+            hoverVerticalLine: S.value,
             // tooltip
             tooltip: {
               enabled: !1,
               position: "average",
-              external: ({ tooltip: t }) => {
-                l.value = { ...t };
+              external: ({ tooltip: e }) => {
+                l.value = { ...e };
               },
               callbacks: {
-                footer: (t) => {
-                  const r = t.reduce((y, Y) => y + (Y.parsed.y || 0), 0);
-                  return ["Total", String(r)];
+                footer: (e) => {
+                  const r = e.map((T) => T.parsed.y || 0), i = t.tooltipTotalCalcFn(
+                    r,
+                    t.tooltipTotalType
+                  );
+                  return [_.value, String(i)];
                 }
               }
             }
@@ -160,12 +171,12 @@ const Ie = {
               tension: 0.3
             },
             point: {
-              radius: B.value ? 3 : 1,
+              radius: E.value ? 3 : 1,
               hitRadius: 8,
               borderWidth: 0,
               hoverRadius: 4,
               hoverBorderWidth: 2,
-              pointHoverBackgroundColor: Te
+              pointHoverBackgroundColor: kt
             },
             bar: {
               borderRadius: 4
@@ -175,19 +186,19 @@ const Ie = {
             // Horizontal Axis (X)
             x: {
               beginAtZero: !0,
-              offset: !x.value || B.value,
+              offset: !S.value || E.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(
-                    this.getLabelForValue(t),
-                    e.xAxisFormat
+                callback: function(e) {
+                  return F(
+                    this.getLabelForValue(e),
+                    t.xAxisFormat
                   );
                 }
               },
@@ -205,17 +216,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,
-                max: D.value * e.tickCount,
-                callback: (t) => O(t, e.yAxisFormat)
+                stepSize: V.value,
+                min: D.value,
+                max: V.value * t.tickCount,
+                callback: (e) => F(e, t.yAxisFormat)
               },
               // grid lines
               grid: {
@@ -227,80 +238,82 @@ const Ie = {
           }
         }
       })
-    ), R = C(null), l = C(null), { position: w } = Se(
-      c,
+    ), R = C(null), l = C(null), { position: w } = Lt(
+      d,
       R,
       l,
-      e.tooltipRespectsTopEdge
-    ), G = a(() => ({
+      t.tooltipRespectsTopEdge
+    ), Z = o(() => ({
       left: `${w.value.left}px`,
       top: `${w.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: D, maxValue: Y } = Bt({
+      parsingConfig: L.value,
+      dataSets: f,
+      isStacked: p
+    }), V = o(
+      () => bt(D.value, Y.value, t.tickCount)
+    ), j = o(
+      () => (t.compactHeader ? St : xt) + "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 }, [
-          t.$slots["subheader-tooltip"] ? {
+    return (e, r) => c(x) ? (h(), tt("section", Ft, [
+      m("div", It, [
+        et(Rt, {
+          "chart-type": c(v),
+          "onUpdate:chart-type": r[0] || (r[0] = (i) => at(v) ? v.value = i : null),
+          "type-switcher": a.typeSwitcher,
+          header: a.header,
+          subheader: a.subheader,
+          "subheader-tooltip": a.subheaderTooltip,
+          "trend-tooltip": a.trendTooltip,
+          compact: a.compactHeader,
+          "trend-value": a.trendValue,
+          "trend-direction": a.trendDirection
+        }, ot({ _: 2 }, [
+          e.$slots["subheader-tooltip"] ? {
             name: "subheader-tooltip",
-            fn: oe(() => [
-              re(t.$slots, "subheader-tooltip", {}, void 0, !0)
+            fn: lt(() => [
+              rt(e.$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", "trend-tooltip", "compact", "trend-value", "trend-direction"])
       ]),
-      h("div", Oe, [
-        h("canvas", {
+      m("div", Pt, [
+        m("canvas", {
           ref_key: "chartRef",
-          ref: c,
+          ref: d,
           class: "chart__canvas"
         }, null, 512),
-        h("div", {
+        m("div", {
           ref_key: "tooltipRef",
           ref: R,
           class: "chart__tooltip",
-          style: le(s(G))
+          style: it(c(Z))
         }, [
-          l.value ? (f(), b(Le, {
+          l.value ? (h(), g(Et, {
             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"])) : H("", !0)
         ], 4)
       ])
-    ])) : o.loading ? (f(), b(Ve, {
+    ])) : a.loading ? (h(), g(Vt, {
       key: 1,
       class: "chart-loading"
-    })) : s(T) ? (f(), b(s(we), {
+    })) : c(k) ? (h(), g(c(Dt), {
       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"])) : H("", !0);
   }
 });
 export {
-  Je as default
+  te 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/colorPalette.d.ts

@@ -0,0 +1,4 @@
+import { HexColor } from '@is-ssp/chart/types';
+export declare const DEFAULT_CHART_COLOR: HexColor;
+export declare const COLOR_PALETTE: HexColor[];
+export declare const RESERVED_COLORS_MAP: Record<string, HexColor>;