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

package/components/chart/ChartPlane.vue2.js

@@ -1,31 +1,31 @@
- 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 "../../ChartPlane.vue_vue_type_style_index_0_scoped_0f3a67d5_lang.css"; import { defineComponent as Y, useCssVars as j, unref as c, computed as a, ref as g, onMounted as q, watch as T, nextTick as J, openBlock as h, createElementBlock as Q, createElementVNode as m, createVNode as X, isRef as ee, createSlots as te, withCtx as ae, renderSlot as oe, normalizeStyle as re, createBlock as b, createCommentVNode as H } from "vue";
+import { Chart as O, ArcElement as le, LineElement as ie, BarElement as ne, PointElement as se, LineController as ce, BarController as de, PieController as ue, ScatterController as pe, CategoryScale as fe, LinearScale as he, Filler as me, Tooltip as ve } from "chart.js";
+import { HoverVerticalLine as ye } from "./plugins/HoverVerticalLine.js";
+import { formatValue as I, calcStepSize as Ce } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as ge, TOTALS_HELPER_KEY as F, POINT_BORDER_COLOR as Te, TICK_LABEL_COLOR as P, TICK_LABEL_FONT as N, GRID_LINE_COLOR as _, HEADER_HEIGHT as be, COMPACT_HEADER_HEIGHT as ke } from "./consts.js";
+import { ChartType as n } from "./types.js";
+import { useTooltipPosition as xe } from "./composables/useTooltipPosition.js";
+import Se from "./ChartTooltip.vue.js";
+import { hexColorToRgba as Le } from "../../utils/color.js";
+import { useChartValues as Ee } 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 { useVModel as Be } from "@vueuse/core";
+import Re from "../emptyState/v4/EmptyStateV4.vue.js";
+import we from "./ChartLoader.vue.js";
+import { DEFAULT_CHART_COLOR as De } from "./colorPalette.js";
+const Ve = {
   key: 0,
   class: "chart-plane"
-}, He = { class: "header-wrapper" }, Oe = { class: "chart" }, Je = /* @__PURE__ */ j({
+}, He = { class: "header-wrapper" }, Oe = { class: "chart" }, qe = /* @__PURE__ */ Y({
   __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: ge },
     header: { default: "" },
     subheader: { default: "" },
     loading: { type: Boolean, default: !1 },
@@ -39,15 +39,17 @@ const Ie = {
     tooltipRespectsTopEdge: { type: Boolean, default: !0 },
     trendValue: { default: null },
     trendDirection: { default: "up" },
-    totalsChart: { type: Boolean, default: !1 }
+    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(
+  setup(o, { emit: M }) {
+    const t = o;
+    j((e) => ({
+      "0e9a8448": c(Z),
+      "5ae0eb9a": o.height
+    })), O.register(
+      le,
       ie,
       ne,
       se,
@@ -59,86 +61,85 @@ const Ie = {
       he,
       me,
       ve,
-      ye,
-      Ce
+      ye
     );
-    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 = Be(t, "chartType", M), z = a(
+      () => t.withAnimation ? "" : "none"
+    ), d = g(null);
+    let s = null;
+    const k = a(() => t.dataSets.length === 0), x = a(() => !t.loading && !k.value), y = () => {
+      d.value && (s && s.destroy(), s = new O(d.value, B.value));
+    }, K = () => {
+      s && (s.data.datasets = A.value, s.options = B.value.options, s.update(z.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) => ({
-        ...r,
-        [P]: t.label
+    q(y), T(() => t.chartType, y), T(x, async (e) => {
+      e && (await J(), y());
+    }), T([() => t.visibleIds, () => t.dataSets], K);
+    const u = a(() => t.totalsChart), p = a(
+      () => t.chartType === n.StackedLine || t.chartType === n.StackedBar || u.value
+    ), S = a(
+      () => t.chartType === n.Line || t.chartType === n.StackedLine
+    ), L = a(() => u.value ? { ...t.parsing, xAxisKey: F } : t.parsing), U = a(() => u.value ? t.dataSets.map((e) => ({
+      ...e,
+      data: e.data.map((l) => ({
+        ...l,
+        [F]: 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 = a(
+      () => U.value.filter((e) => t.visibleIds.includes(e.id))
+    ), $ = (e) => t.colorsMap[e] || De, E = a(
+      () => f.value.length && f.value.every(
+        (e) => e.data.length === 1
+      )
+    ), A = a(() => f.value.map((e, l) => {
+      const i = $(e.id), C = p.value ? l !== 0 ? "-1" : "start" : void 0;
       return {
-        ...t,
-        fill: u.value ? "start" : void 0,
-        backgroundColor: Ee(
-          r,
-          e.chartType === i.StackedLine ? 10 : 70
+        ...e,
+        fill: C,
+        backgroundColor: Le(
+          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(
       () => ({
-        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 }) => {
+                r.value = { ...e };
               },
               callbacks: {
-                footer: (t) => {
-                  const r = t.reduce((y, Y) => y + (Y.parsed.y || 0), 0);
-                  return ["Total", String(r)];
+                footer: (e) => {
+                  const l = e.reduce((i, C) => i + (C.parsed.y || 0), 0);
+                  return ["Total", String(l)];
                 }
               }
             }
@@ -160,7 +161,7 @@ const Ie = {
               tension: 0.3
             },
             point: {
-              radius: B.value ? 3 : 1,
+              radius: E.value ? 3 : 1,
               hitRadius: 8,
               borderWidth: 0,
               hoverRadius: 4,
@@ -175,25 +176,25 @@ 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 I(
+                    this.getLabelForValue(e),
+                    t.xAxisFormat
                   );
                 }
               },
               // grid lines
               grid: {
-                color: M,
+                color: _,
                 drawOnChartArea: !1,
                 drawTicks: !0,
                 drawBorder: !1,
@@ -205,21 +206,21 @@ 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) => I(e, t.yAxisFormat)
               },
               // grid lines
               grid: {
-                color: M,
+                color: _,
                 drawOnChartArea: !0,
                 drawTicks: !1
               }
@@ -227,80 +228,80 @@ const Ie = {
           }
         }
       })
-    ), R = C(null), l = C(null), { position: w } = Se(
-      c,
+    ), R = g(null), r = g(null), { position: w } = xe(
+      d,
       R,
-      l,
-      e.tooltipRespectsTopEdge
+      r,
+      t.tooltipRespectsTopEdge
     ), G = a(() => ({
       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)
+      opacity: r.value?.opacity || 0
+    })), { minValue: D, maxValue: W } = Ee({
+      parsingConfig: L.value,
+      dataSets: f,
+      isStacked: p
+    }), V = a(
+      () => Ce(D.value, W.value, t.tickCount)
     ), Z = a(
-      () => (e.compactHeader ? xe : ke) + "px"
+      () => (t.compactHeader ? ke : be) + "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),
+    return (e, l) => c(x) ? (h(), Q("section", Ve, [
+      m("div", He, [
+        X(Ae, {
+          "chart-type": c(v),
+          "onUpdate:chart-type": l[0] || (l[0] = (i) => ee(v) ? v.value = i : 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"] ? {
+        }, te({ _: 2 }, [
+          e.$slots["subheader-tooltip"] ? {
             name: "subheader-tooltip",
-            fn: oe(() => [
-              re(t.$slots, "subheader-tooltip", {}, void 0, !0)
+            fn: ae(() => [
+              oe(e.$slots, "subheader-tooltip", {}, void 0, !0)
             ]),
             key: "0"
           } : void 0
         ]), 1032, ["chart-type", "type-switcher", "header", "subheader", "compact", "trend-value", "trend-direction"])
       ]),
-      h("div", Oe, [
-        h("canvas", {
+      m("div", Oe, [
+        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: re(c(G))
         }, [
-          l.value ? (f(), b(Le, {
+          r.value ? (h(), b(Se, {
             key: 0,
-            title: String(l.value.title),
-            "data-points": l.value.dataPoints,
+            title: String(r.value.title),
+            "data-points": r.value.dataPoints,
             "x-axis-format": o.xAxisFormat,
             "y-axis-format": o.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)
+            "total-label": r.value.footer[0],
+            "total-value": Number(r.value.footer[1])
+          }, null, 8, ["title", "data-points", "x-axis-format", "y-axis-format", "total-label", "total-value"])) : H("", !0)
         ], 4)
       ])
-    ])) : o.loading ? (f(), b(Ve, {
+    ])) : o.loading ? (h(), b(we, {
       key: 1,
       class: "chart-loading"
-    })) : s(T) ? (f(), b(s(we), {
+    })) : c(k) ? (h(), b(c(Re), {
       key: 2,
       class: "chart-empty",
       title: o.noDataTitle,
       subtitle: o.noDataSubtitle,
       "icon-name": o.noDataIcon
-    }, null, 8, ["title", "subtitle", "icon-name"])) : I("", !0);
+    }, null, 8, ["title", "subtitle", "icon-name"])) : H("", !0);
   }
 });
 export {
-  Je as default
+  qe 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.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_0875167b_lang.css"; //*');
+const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-0875167b"]]);
 export {
-  d as default
+  p as default
 };

package/components/chart/SettingsHeader.vue2.js

@@ -1,4 +1,4 @@
- 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 "../../SettingsHeader.vue_vue_type_style_index_0_scoped_0875167b_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 "../dropdown/v4/DefaultDropdownTrigger.vue.js";
 import "../dropdown/v4/IconButtonDropdownTrigger.vue.js";

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>;

package/components/chart/colorPalette.js

@@ -0,0 +1,54 @@
+import { BIDDING_PREFIX as F, NETWORK_ID_UNITY_ADS as N, NETWORK_ID_AD_MOB as R, NETWORK_ID_IRON_SOURCE as $, NON_BIDDING_PREFIX as E, NETWORK_ID_MINTEGRAL as B, NETWORK_ID_APPLOVIN as _, NETWORK_ID_FACEBOOK_META as D, NETWORK_ID_LIFTOFF as A, NETWORK_ID_PANGLE as O, NETWORK_ID_INMOBI as I, NETWORK_ID_DT_EXCHANGE as C } from "./consts.js";
+const t = "#c9c9c9", K = [
+  "#80BCFE",
+  "#9999FF",
+  "#5883E4",
+  "#80CBC4",
+  "#FFC670",
+  "#FF7557",
+  "#0D7EA0",
+  "#673AFF",
+  "#CA80DC",
+  "#FEBBB2"
+], W = {
+  total: "#646464",
+  // AB tests
+  A: "#FFC134",
+  B: "#4F4FF5",
+  // Countries
+  US: "#272EC4",
+  CN: "#F52E1E",
+  GB: "#0082FF",
+  DE: "#FFD600",
+  JP: "#BA0029",
+  AU: "#009BCB",
+  FR: "#34A853",
+  // Ad formats
+  Rewarded: "#0082FF",
+  Interstitial: "#009BCB",
+  Banner: "#9668FF",
+  Native: "#FF35A2",
+  // Ad sources
+  [`${F}-${N}`]: "#9668FF",
+  [`${F}-${R}`]: "#34A853",
+  [`${F}-${$}`]: "#272EC4",
+  [`${E}-${$}`]: "#5C63E7",
+  [`${F}-${B}`]: "#00D8B2",
+  [`${F}-${_}`]: "#009BCB",
+  [`${E}-${_}`]: "#80CDE5",
+  [`${F}-${D}`]: "#0082FF",
+  [`${E}-${D}`]: "#52AAFF",
+  [`${F}-${A}`]: "#FF35A2",
+  [`${E}-${A}`]: "#FF9AD1",
+  [`${F}-${O}`]: "#F52E1E",
+  [`${E}-${O}`]: "#FA9F97",
+  [`${F}-${I}`]: "#FFD600",
+  [`${E}-${I}`]: "#FFEC8A",
+  [`${F}-${C}`]: "#BA0029",
+  [`${E}-${C}`]: "#DD8094"
+};
+export {
+  K as COLOR_PALETTE,
+  t as DEFAULT_CHART_COLOR,
+  W as RESERVED_COLORS_MAP
+};

package/components/chart/composables/useColorsMap.d.ts

@@ -1,10 +1,10 @@
 import { Ref } from 'vue';
-import { ChartDataSet } from '@is-ssp/chart';
+import { ChartDataSet } from '@/components/chart';
 type UseColorsMapArgs = {
     dataSets: Ref<ChartDataSet[]>;
     visibleIds: Ref<unknown[]>;
 };
 export declare const useColorsMap: ({ dataSets, visibleIds }: UseColorsMapArgs) => {
-    colorsMap: import("vue").ComputedRef<{}>;
+    colorsMap: Ref<Record<string, `#${string}`>>;
 };
 export {};

package/components/chart/composables/useColorsMap.js

@@ -1,17 +1,46 @@
-import { computed as e } from "vue";
-import { COLOR_PALETTE as a } from "../consts.js";
-const n = ({ dataSets: t, visibleIds: l }) => {
-  const c = e(
-    () => t.value.filter(
-      (o) => l.value.includes(o.id)
-    )
-  );
-  return {
-    colorsMap: e(
-      () => c.value.reduce((o, r, u) => (o[r.id] = r.color || a[u] || "#000000", o), {})
+import { computed as n, ref as r, watch as E } from "vue";
+import { RESERVED_COLORS_MAP as c, COLOR_PALETTE as O, DEFAULT_CHART_COLOR as R } from "../colorPalette.js";
+const T = ({ dataSets: u, visibleIds: i }) => {
+  const a = n(
+    () => u.value.filter(
+      (o) => i.value.includes(o.id)
     )
+  ), l = r({
+    ...c
+    // destructuring is important to avoid mutating the reserved colors object
+  }), s = r([]), v = n(
+    () => O.filter((o) => !s.value.includes(o))
+  ), d = () => {
+    a.value.forEach((o) => {
+      const e = String(o.id);
+      if (!l.value[e]) {
+        const t = o.color || v.value[0] || R;
+        C(e, t);
+      }
+    });
+  }, f = () => {
+    Object.keys(l.value).forEach((o) => {
+      const e = a.value.find((m) => String(m.id) === o), t = !!c[o];
+      !e && !t && p(o);
+    });
+  }, C = (o, e) => {
+    l.value[String(o)] = e, s.value.push(e);
+  }, p = (o) => {
+    const e = l.value[o];
+    delete l.value[o];
+    const t = s.value.indexOf(e);
+    t > -1 && s.value.splice(t, 1);
+  };
+  return E(
+    a,
+    () => {
+      f(), d();
+    },
+    { immediate: !0 }
+  ), {
+    colorsMap: l
   };
 };
 export {
-  n as useColorsMap
+  T as useColorsMap
 };