@ironsource/shared-ui 2.1.8-rc.6 → 2.1.8-rc.8

package/components/chart/Chart.vue2.js

@@ -1,22 +1,23 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_f06a4764_lang.css"; import { defineComponent as W, ref as y, computed as r, onMounted as Z, watch as b, nextTick as $, openBlock as d, createElementBlock as C, unref as c, Fragment as G, createElementVNode as u, createVNode as V, isRef as X, normalizeStyle as j, createBlock as g, createCommentVNode as T } from "vue";
-import { useVModel as q } from "@vueuse/core";
-import { Chart as O, ArcElement as J, LineElement as Q, BarElement as Y, PointElement as ee, LineController as te, BarController as ae, PieController as oe, ScatterController as re, CategoryScale as ie, LinearScale as le, Filler as ne, Tooltip as se } from "chart.js";
-import { HoverVerticalLine as de } from "./plugins/HoverVerticalLine.js";
-import { formatValue as D, calcStepSize as ce } from "./utils/utils.js";
-import { DEFAULT_TICK_COUNT as ue, DEFAULT_MIN_VISIBLE as pe, DEFAULT_MAX_VISIBLE as fe, COLOR_PALETTE as me, POINT_BORDER_COLOR as he, TICK_LABEL_COLOR as F, TICK_LABEL_FONT as _, GRID_LINE_COLOR as w } from "./consts.js";
+ import "../../Chart.vue_vue_type_style_index_0_scoped_df85e0af_lang.css"; import { defineComponent as X, ref as g, computed as i, onMounted as j, watch as C, nextTick as q, openBlock as d, createElementBlock as k, Fragment as R, createBlock as h, unref as c, isRef as V, withCtx as O, renderSlot as D, createCommentVNode as v, createElementVNode as f, createVNode as F, normalizeStyle as J } from "vue";
+import { useVModel as Q } from "@vueuse/core";
+import { Chart as N, ArcElement as Y, LineElement as ee, BarElement as te, PointElement as ae, LineController as oe, BarController as re, PieController as ie, ScatterController as le, CategoryScale as ne, LinearScale as se, Filler as de, Tooltip as ce } from "chart.js";
+import { HoverVerticalLine as ue } from "./plugins/HoverVerticalLine.js";
+import { formatValue as H, calcStepSize as fe } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as pe, DEFAULT_MIN_VISIBLE as me, DEFAULT_MAX_VISIBLE as he, COLOR_PALETTE as ve, POINT_BORDER_COLOR as ye, TICK_LABEL_COLOR as P, TICK_LABEL_FONT as U, GRID_LINE_COLOR as M } from "./consts.js";
 import { ChartType as n } from "./types.js";
-import { useTooltipPosition as ve } from "./composables/useTooltipPosition.js";
-import ye from "./ChartTooltip.vue.js";
-import be from "./ChartLegend.vue.js";
-import Ce from "./ChartHeader.vue.js";
-import { hexColorToRgba as ge } from "../../utils/color.js";
+import { useTooltipPosition as be } from "./composables/useTooltipPosition.js";
+import ge from "./ChartTooltip.vue.js";
+import Ce from "./ChartLegend.vue.js";
+import ke from "./ChartHeader.vue.js";
+import { hexColorToRgba as Se } from "../../utils/color.js";
 import { useChartValues as Te } from "./composables/useChartValues.js";
-import ke from "./ChartLoader.vue.js";
-import Le from "../emptyState/v4/EmptyStateV4.vue.js";
-const xe = { class: "chart-container" }, Se = { class: "chart-content" }, Ie = { class: "header-wrapper" }, Be = { class: "chart" }, Ae = {
+import Le from "./ChartLoader.vue.js";
+import xe from "../emptyState/v4/EmptyStateV4.vue.js";
+import Be from "./SettingsHeader.vue.js";
+const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = { class: "header-wrapper" }, Ee = { class: "chart" }, Re = {
   key: 0,
   class: "chart-sidebar"
-}, We = /* @__PURE__ */ W({
+}, Xe = /* @__PURE__ */ X({
   __name: "Chart",
   props: {
     dataSets: { default: () => [] },
@@ -25,23 +26,22 @@ const xe = { class: "chart-container" }, Se = { class: "chart-content" }, Ie = {
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
-    tickCount: { default: ue },
+    tickCount: { default: pe },
     header: { default: "" },
     subheader: { default: "" },
     hideLegend: { type: Boolean, default: !1 },
-    minVisible: { default: pe },
-    maxVisible: { default: fe },
+    minVisible: { default: me },
+    maxVisible: { default: he },
     loading: { type: Boolean, default: !1 },
     noDataIcon: { default: "file-x" },
     noDataTitle: { default: "No data to display" },
-    noDataSubtitle: { default: "Search again with different filters" }
+    noDataSubtitle: { default: "Search again with different filters" },
+    withSettingsHeader: { type: Boolean, default: !0 }
   },
   emits: ["update:chartType", "update:visibleIds"],
-  setup(a, { emit: k }) {
-    const e = a;
-    O.register(
-      J,
-      Q,
+  setup(a, { emit: S }) {
+    const t = a;
+    N.register(
       Y,
       ee,
       te,
@@ -52,50 +52,52 @@ const xe = { class: "chart-container" }, Se = { class: "chart-content" }, Ie = {
       le,
       ne,
       se,
-      de
+      de,
+      ce,
+      ue
     );
-    const m = q(e, "chartType", k), p = y(null);
+    const u = Q(t, "chartType", S), p = g(null);
     let s = null;
-    const L = r(() => e.dataSets.length === 0), x = r(() => !e.loading && !L.value), h = () => {
-      p.value && (s && s.destroy(), s = new O(p.value, I.value));
-    }, N = () => {
-      s && (s.data.datasets = v.value, s.options = I.value.options, s.update());
+    const T = i(() => t.dataSets.length === 0), L = i(() => !t.loading && !T.value), y = () => {
+      p.value && (s && s.destroy(), s = new N(p.value, B.value));
+    }, z = () => {
+      s && (s.data.datasets = b.value, s.options = B.value.options, s.update());
     };
-    Z(h), b(() => e.chartType, h), b(x, async (t) => {
-      t && (await $(), h());
-    }), b([() => e.visibleIds, () => e.dataSets], N);
-    const f = r(
-      () => e.chartType === n.StackedLine || e.chartType === n.StackedBar
-    ), P = r(
-      () => e.chartType === n.Line || e.chartType === n.StackedLine
-    ), S = r(
-      () => e.dataSets.filter((t) => e.visibleIds.includes(t.id))
-    ), v = r(() => S.value.map((t, o) => {
-      const i = t.color || me[o] || "#000000";
+    j(y), C(() => t.chartType, y), C(L, async (e) => {
+      e && (await q(), y());
+    }), C([() => t.visibleIds, () => t.dataSets], z);
+    const m = i(
+      () => t.chartType === n.StackedLine || t.chartType === n.StackedBar
+    ), _ = i(
+      () => t.chartType === n.Line || t.chartType === n.StackedLine
+    ), x = i(
+      () => t.dataSets.filter((e) => t.visibleIds.includes(e.id))
+    ), b = i(() => x.value.map((e, o) => {
+      const r = e.color || ve[o] || "#000000";
       return {
-        ...t,
-        fill: f.value ? "start" : void 0,
-        backgroundColor: ge(
-          i,
-          e.chartType === n.StackedLine ? 10 : 70
+        ...e,
+        fill: m.value ? "start" : void 0,
+        backgroundColor: Se(
+          r,
+          t.chartType === n.StackedLine ? 10 : 70
         ),
-        borderColor: i,
-        pointBackgroundColor: i,
-        pointHoverBorderColor: i,
+        borderColor: r,
+        pointBackgroundColor: r,
+        pointHoverBorderColor: r,
         maxBarThickness: 50,
         clip: 5
         // draw a bit outside the chart area
       };
-    })), I = r(
+    })), B = i(
       () => ({
-        type: e.chartType == n.Bar || e.chartType === n.StackedBar ? "bar" : "line",
+        type: t.chartType == n.Bar || t.chartType === n.StackedBar ? "bar" : "line",
         // Chart Data
         data: {
-          datasets: v.value
+          datasets: b.value
         },
         // Chart Options
         options: {
-          parsing: e.parsing,
+          parsing: t.parsing,
           interaction: {
             intersect: !1,
             mode: "index",
@@ -105,17 +107,17 @@ const xe = { class: "chart-container" }, Se = { class: "chart-content" }, Ie = {
           plugins: {
             legend: { display: !1 },
             title: { display: !1 },
-            hoverVerticalLine: P.value,
+            hoverVerticalLine: _.value,
             // tooltip
             tooltip: {
               enabled: !1,
               position: "average",
-              external: ({ tooltip: t }) => {
-                l.value = { ...t };
+              external: ({ tooltip: e }) => {
+                l.value = { ...e };
               },
               callbacks: {
-                footer: (t) => {
-                  const o = t.reduce((i, K) => i + (K.parsed.y || 0), 0);
+                footer: (e) => {
+                  const o = e.reduce((r, G) => r + (G.parsed.y || 0), 0);
                   return ["Total", String(o)];
                 }
               }
@@ -143,7 +145,7 @@ const xe = { class: "chart-container" }, Se = { class: "chart-content" }, Ie = {
               borderWidth: 0,
               hoverRadius: 4,
               hoverBorderWidth: 2,
-              pointHoverBackgroundColor: he
+              pointHoverBackgroundColor: ye
             },
             bar: {
               borderRadius: 4
@@ -154,23 +156,23 @@ const xe = { class: "chart-container" }, Se = { class: "chart-content" }, Ie = {
             x: {
               beginAtZero: !0,
               border: { display: !1 },
-              stacked: f.value,
+              stacked: m.value,
               // stack on top of each other
               // ticks
               ticks: {
-                color: F,
-                font: _,
+                color: P,
+                font: U,
                 padding: 4,
-                callback: function(t) {
-                  return D(
-                    this.getLabelForValue(t),
-                    e.xAxisFormat
+                callback: function(e) {
+                  return H(
+                    this.getLabelForValue(e),
+                    t.xAxisFormat
                   );
                 }
               },
               // grid lines
               grid: {
-                color: w,
+                color: M,
                 drawOnChartArea: !1,
                 drawTicks: !0,
                 drawBorder: !1,
@@ -182,21 +184,21 @@ const xe = { class: "chart-container" }, Se = { class: "chart-content" }, Ie = {
               beginAtZero: !0,
               border: { display: !1 },
               // hide left borderline
-              stacked: f.value,
+              stacked: m.value,
               // stack on top of each other
               // ticks
               ticks: {
-                color: F,
-                font: _,
+                color: P,
+                font: U,
                 padding: 8,
-                stepSize: R.value,
-                min: E.value,
-                max: R.value * e.tickCount,
-                callback: (t) => D(t, e.yAxisFormat)
+                stepSize: E.value,
+                min: A.value,
+                max: E.value * t.tickCount,
+                callback: (e) => H(e, t.yAxisFormat)
               },
               // grid lines
               grid: {
-                color: w,
+                color: M,
                 drawOnChartArea: !0,
                 drawTicks: !1
               }
@@ -204,78 +206,95 @@ const xe = { class: "chart-container" }, Se = { class: "chart-content" }, Ie = {
           }
         }
       })
-    ), M = r(
-      () => v.value.reduce((t, o) => (t[o.id] = o.borderColor, t), {})
-    ), U = r(() => e.dataSets.map((t) => ({
-      id: t.id,
-      label: t.label,
-      color: M.value[t.id] || null
-    }))), B = y(null), l = y(null), { position: A } = ve(
+    ), $ = i(
+      () => b.value.reduce((e, o) => (e[o.id] = o.borderColor, e), {})
+    ), K = i(() => t.dataSets.map((e) => ({
+      id: e.id,
+      label: e.label,
+      color: $.value[e.id] || null
+    }))), I = g(null), l = g(null), { position: w } = be(
       p,
-      B,
+      I,
       l
-    ), z = r(() => ({
-      left: `${A.value.left}px`,
-      top: `${A.value.top}px`,
+    ), W = i(() => ({
+      left: `${w.value.left}px`,
+      top: `${w.value.top}px`,
       opacity: l.value?.opacity || 0
-    })), { minValue: E, maxValue: H } = Te({
-      parsingConfig: e.parsing,
-      dataSets: S,
-      isStacked: f
-    }), R = r(
-      () => ce(E.value, H.value, e.tickCount)
+    })), { minValue: A, maxValue: Z } = Te({
+      parsingConfig: t.parsing,
+      dataSets: x,
+      isStacked: m
+    }), E = i(
+      () => fe(A.value, Z.value, t.tickCount)
     );
-    return (t, o) => (d(), C("div", xe, [
-      c(x) ? (d(), C(G, { key: 0 }, [
-        u("section", Se, [
-          u("div", Ie, [
-            V(Ce, {
-              "chart-type": c(m),
-              "onUpdate:chart-type": o[0] || (o[0] = (i) => X(m) ? m.value = i : null),
-              header: a.header,
-              subheader: a.subheader
-            }, null, 8, ["chart-type", "header", "subheader"])
-          ]),
-          u("div", Be, [
-            u("canvas", {
-              ref_key: "chartRef",
-              ref: p,
-              class: "chart__canvas"
-            }, null, 512),
-            u("div", {
-              ref_key: "tooltipRef",
-              ref: B,
-              class: "chart__tooltip",
-              style: j(c(z))
-            }, [
-              l.value ? (d(), g(ye, {
-                key: 0,
-                title: String(l.value.title),
-                "data-points": l.value.dataPoints,
-                "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"])) : T("", !0)
-            ], 4)
-          ])
+    return (e, o) => (d(), k(R, null, [
+      a.withSettingsHeader ? (d(), h(Be, {
+        key: 0,
+        "chart-type": c(u),
+        "onUpdate:chart-type": o[0] || (o[0] = (r) => V(u) ? u.value = r : null),
+        "hide-legend": a.hideLegend
+      }, {
+        metric: O(() => [
+          D(e.$slots, "metric", {}, void 0, !0)
+        ]),
+        breakdowns: O(() => [
+          D(e.$slots, "breakdowns", {}, void 0, !0)
         ]),
-        a.hideLegend ? T("", !0) : (d(), C("section", Ae, [
-          V(be, {
-            items: c(U),
-            "visible-ids": a.visibleIds,
-            "onUpdate:visibleIds": o[1] || (o[1] = (i) => k("update:visibleIds", i))
-          }, null, 8, ["items", "visible-ids"])
-        ]))
-      ], 64)) : a.loading ? (d(), g(ke, { key: 1 })) : c(L) ? (d(), g(c(Le), {
-        key: 2,
-        title: a.noDataTitle,
-        subtitle: a.noDataSubtitle,
-        "icon-name": a.noDataIcon
-      }, null, 8, ["title", "subtitle", "icon-name"])) : T("", !0)
-    ]));
+        _: 3
+      }, 8, ["chart-type", "hide-legend"])) : v("", !0),
+      f("div", Ie, [
+        c(L) ? (d(), k(R, { key: 0 }, [
+          f("section", we, [
+            f("div", Ae, [
+              F(ke, {
+                "chart-type": c(u),
+                "onUpdate:chart-type": o[1] || (o[1] = (r) => V(u) ? u.value = r : null),
+                "with-settings-header": a.withSettingsHeader,
+                header: a.header,
+                subheader: a.subheader
+              }, null, 8, ["chart-type", "with-settings-header", "header", "subheader"])
+            ]),
+            f("div", Ee, [
+              f("canvas", {
+                ref_key: "chartRef",
+                ref: p,
+                class: "chart__canvas"
+              }, null, 512),
+              f("div", {
+                ref_key: "tooltipRef",
+                ref: I,
+                class: "chart__tooltip",
+                style: J(c(W))
+              }, [
+                l.value ? (d(), h(ge, {
+                  key: 0,
+                  title: String(l.value.title),
+                  "data-points": l.value.dataPoints,
+                  "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"])) : v("", !0)
+              ], 4)
+            ])
+          ]),
+          a.hideLegend ? v("", !0) : (d(), k("section", Re, [
+            F(Ce, {
+              items: c(K),
+              "visible-ids": a.visibleIds,
+              "onUpdate:visibleIds": o[2] || (o[2] = (r) => S("update:visibleIds", r))
+            }, null, 8, ["items", "visible-ids"])
+          ]))
+        ], 64)) : a.loading ? (d(), h(Le, { key: 1 })) : c(T) ? (d(), h(c(xe), {
+          key: 2,
+          title: a.noDataTitle,
+          subtitle: a.noDataSubtitle,
+          "icon-name": a.noDataIcon
+        }, null, 8, ["title", "subtitle", "icon-name"])) : v("", !0)
+      ])
+    ], 64));
   }
 });
 export {
-  We as default
+  Xe as default
 };

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

@@ -1,20 +1,24 @@
 import { ChartType } from '@/components/chart/types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     chartType: ChartType;
+    withSettingsHeader: boolean;
     header?: string;
     subheader?: string;
 }>, {
     chartType: ChartType;
+    withSettingsHeader: boolean;
     header: string;
     subheader: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:chartType": (type: ChartType) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     chartType: ChartType;
+    withSettingsHeader: boolean;
     header?: string;
     subheader?: string;
 }>, {
     chartType: ChartType;
+    withSettingsHeader: boolean;
     header: string;
     subheader: string;
 }>>> & {
@@ -22,6 +26,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }, {
     header: string;
     chartType: ChartType;
+    withSettingsHeader: boolean;
     subheader: string;
 }>;
 export default _default;

package/components/chart/ChartHeader.vue.js

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

package/components/chart/ChartHeader.vue2.js

@@ -1,51 +1,53 @@
- import "../../ChartHeader.vue_vue_type_style_index_0_scoped_88d4532f_lang.css"; import { defineComponent as f, computed as y, openBlock as T, createElementBlock as V, createElementVNode as _, createVNode as n, unref as t, withCtx as c, createTextVNode as l, toDisplayString as p, isRef as v } from "vue";
-import s from "../typography/v4/Typography.vue.js";
-import x from "../switch/v4/SwitchV4.vue.js";
-import { ChartType as a } from "./types.js";
-const C = { class: "chart-header" }, b = { class: "header-texts" }, N = /* @__PURE__ */ f({
+ import "../../ChartHeader.vue_vue_type_style_index_0_scoped_2e3de9c5_lang.css"; import { defineComponent as y, computed as T, openBlock as i, createElementBlock as V, createElementVNode as g, createVNode as c, unref as a, withCtx as l, createTextVNode as s, toDisplayString as u, createBlock as k, isRef as v, createCommentVNode as x } from "vue";
+import p from "../typography/v4/Typography.vue.js";
+import B from "../switch/v4/SwitchV4.vue.js";
+import { ChartType as r } from "./types.js";
+const C = { class: "chart-header" }, S = { class: "header-texts" }, H = /* @__PURE__ */ y({
   __name: "ChartHeader",
   props: {
-    chartType: { default: a.Line },
+    chartType: { default: r.Line },
+    withSettingsHeader: { type: Boolean, default: !0 },
     header: { default: "" },
     subheader: { default: "" }
   },
   emits: ["update:chartType"],
-  setup(r, { emit: u }) {
-    const h = r, d = [
-      { id: a.Line, icon: "chart-line-up" },
-      { id: a.Bar, icon: "chart-bar" },
-      { id: a.StackedLine, icon: "chart-line" }
-    ], o = y({
+  setup(e, { emit: h }) {
+    const m = e, n = [
+      { id: r.Line, icon: "chart-line-up" },
+      { id: r.Bar, icon: "chart-bar" },
+      { id: r.StackedLine, icon: "chart-line" }
+    ], o = T({
       get() {
-        return d.find(({ id: e }) => e === h.chartType);
+        return n.find(({ id: t }) => t === m.chartType);
       },
-      set(e) {
-        u("update:chartType", e.id);
+      set(t) {
+        h("update:chartType", t.id);
       }
     });
-    return (e, i) => (T(), V("div", C, [
-      _("div", b, [
-        n(t(s), { variant: "chart2" }, {
-          default: c(() => [
-            l(p(r.header), 1)
+    return (t, d) => (i(), V("div", C, [
+      g("div", S, [
+        c(a(p), { variant: "chart2" }, {
+          default: l(() => [
+            s(u(e.header), 1)
           ]),
           _: 1
         }),
-        n(t(s), { variant: "caption" }, {
-          default: c(() => [
-            l(p(r.subheader), 1)
+        c(a(p), { variant: "caption" }, {
+          default: l(() => [
+            s(u(e.subheader), 1)
           ]),
           _: 1
         })
       ]),
-      n(t(x), {
-        modelValue: t(o),
-        "onUpdate:modelValue": i[0] || (i[0] = (m) => v(o) ? o.value = m : null),
-        options: d
-      }, null, 8, ["modelValue"])
+      e.withSettingsHeader ? x("", !0) : (i(), k(a(B), {
+        key: 0,
+        modelValue: a(o),
+        "onUpdate:modelValue": d[0] || (d[0] = (f) => v(o) ? o.value = f : null),
+        options: n
+      }, null, 8, ["modelValue"]))
     ]));
   }
 });
 export {
-  N as default
+  H as default
 };

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

@@ -0,0 +1,30 @@
+import { ChartType } from './types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    chartType: ChartType;
+    hideLegend: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:chartType": (type: ChartType) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    chartType: ChartType;
+    hideLegend: boolean;
+}>>> & {
+    "onUpdate:chartType"?: (type: ChartType) => any;
+}, {}>, {
+    metric?(_: {}): any;
+    breakdowns?(_: {}): any;
+}>;
+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_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/chart/SettingsHeader.vue.js

@@ -0,0 +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_1791e4fe_lang.css"; //*');
+const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-1791e4fe"]]);
+export {
+  p as default
+};

package/components/chart/SettingsHeader.vue2.js

@@ -0,0 +1,57 @@
+ import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_1791e4fe_lang.css"; import { defineComponent as u, computed as h, openBlock as y, createElementBlock as f, createElementVNode as t, normalizeClass as i, createVNode as v, unref as r, isRef as g, renderSlot as a } from "vue";
+import T from "../dropdown/v4/DropdownV4.vue.js";
+import "../dropdown/v4/DefaultDropdownTrigger.vue.js";
+import "../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_TYPE_OPTIONS as d } from "./consts.js";
+const k = { class: "settings-header-container" }, b = { class: "chart-type-selection" }, V = /* @__PURE__ */ u({
+  __name: "SettingsHeader",
+  props: {
+    chartType: null,
+    hideLegend: { type: Boolean }
+  },
+  emits: ["update:chartType"],
+  setup(o, { emit: l }) {
+    const p = o, s = h({
+      get() {
+        return d.find(({ id: e }) => e === p.chartType);
+      },
+      set(e) {
+        l("update:chartType", e.id);
+      }
+    }), c = (e) => `Chart: ${e.name}`;
+    return (e, n) => (y(), f("div", k, [
+      t("div", {
+        class: i(["settings", { "settings-spacer": !o.hideLegend }])
+      }, [
+        t("div", b, [
+          v(r(T), {
+            selected: r(s),
+            "onUpdate:selected": n[0] || (n[0] = (m) => g(s) ? s.value = m : null),
+            options: r(d),
+            "option-name-key": "name",
+            "display-value": c,
+            placeholder: "Select chart type",
+            size: "small"
+          }, null, 8, ["selected", "options"])
+        ]),
+        t("div", null, [
+          a(e.$slots, "metric", {}, void 0, !0)
+        ])
+      ], 2),
+      t("div", {
+        class: i(["breakdowns", { "breakdowns-border": !o.hideLegend }])
+      }, [
+        a(e.$slots, "breakdowns", {}, void 0, !0)
+      ], 2)
+    ]));
+  }
+});
+export {
+  V as default
+};

package/components/chart/consts.d.ts

@@ -1,3 +1,4 @@
+import { DropdownTypeOption } from './types';
 export declare const POINT_BORDER_COLOR = "#fcfcfc";
 export declare const GRID_LINE_COLOR = "#E4E4E4";
 export declare const TICK_LABEL_COLOR = "#646464";
@@ -10,3 +11,4 @@ export declare const COLOR_PALETTE: string[];
 export declare const DEFAULT_TICK_COUNT = 4;
 export declare const DEFAULT_MIN_VISIBLE = 1;
 export declare const DEFAULT_MAX_VISIBLE = 5;
+export declare const DROPDOWN_TYPE_OPTIONS: DropdownTypeOption[];