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

package/Chart.vue_vue_type_style_index_0_scoped_df85e0af_lang.css

@@ -0,0 +1 @@
+.chart-container[data-v-df85e0af]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;height:388px;border-radius:0 0 6px 6px}.header-wrapper[data-v-df85e0af]{height:76px}.chart-content[data-v-df85e0af]{flex:1}.chart-sidebar[data-v-df85e0af]{border-left:1px solid var(--common-divider)}.chart[data-v-df85e0af]{width:100%;height:312px;position:relative}.chart__canvas[data-v-df85e0af]{width:100%;height:100%}.chart__tooltip[data-v-df85e0af]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px}

package/ChartHeader.vue_vue_type_style_index_0_scoped_2e3de9c5_lang.css

@@ -0,0 +1 @@
+.chart-header[data-v-2e3de9c5]{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 0}.header-texts[data-v-2e3de9c5]{display:flex;flex-direction:column;color:var(--text-primary);gap:4px}.type-switch[data-v-2e3de9c5]{display:flex;align-items:center;gap:4px}

package/DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_fd7a490e_lang.css

@@ -0,0 +1 @@
+.default-dropdown-wrapper[data-v-fd7a490e]{position:relative}.dropdown-trigger[data-v-fd7a490e]{width:100%;padding:.3125rem .4375rem;display:flex;column-gap:.25rem;max-width:100%;box-sizing:border-box;border-radius:var(--border-radius-md);border:1px solid var(--action-outlined-border);background:var(--default-main);cursor:pointer;user-select:none;position:relative}.dropdown-trigger[data-v-fd7a490e]:hover{border:1px solid var(--action-active);background:var(--action-hover)}.dropdown-trigger.small[data-v-fd7a490e]{padding:.1875rem .4375rem}.dropdown-trigger.large[data-v-fd7a490e]{padding:.5625rem .4375rem}.dropdown-trigger.disabled[data-v-fd7a490e]{border:1px solid var(--action-outlined-border, #bbb);background:var(--action-disabled-background, #f1f1f1);cursor:not-allowed}.dropdown-trigger.disabled .displayed-value[data-v-fd7a490e],.dropdown-trigger.disabled .caret-down[data-v-fd7a490e]{color:var(--text-disabled)}.dropdown-trigger.open[data-v-fd7a490e]{padding:.25rem .375rem;border:2px solid var(--primary-main)}.dropdown-trigger.open.small[data-v-fd7a490e]{padding:.125rem .375rem}.dropdown-trigger.open.large[data-v-fd7a490e]{padding:.5rem .375rem}.dropdown-trigger.state-error[data-v-fd7a490e],.dropdown-trigger.state-success[data-v-fd7a490e],.dropdown-trigger.state-warning[data-v-fd7a490e]{padding:4px 6px}.dropdown-trigger.state-error.small[data-v-fd7a490e],.dropdown-trigger.state-success.small[data-v-fd7a490e],.dropdown-trigger.state-warning.small[data-v-fd7a490e]{padding:.1875rem .4375rem}.dropdown-trigger.state-error.large[data-v-fd7a490e],.dropdown-trigger.state-success.large[data-v-fd7a490e],.dropdown-trigger.state-warning.large[data-v-fd7a490e]{padding:.5625rem .4375rem}.dropdown-trigger.state-error[data-v-fd7a490e]{border:2px solid var(--error-main)}.dropdown-trigger.state-success[data-v-fd7a490e]{border:2px solid var(--success-main)}.dropdown-trigger.state-warning[data-v-fd7a490e]{border:2px solid var(--warning-dark)}.dropdown-trigger .caret-down[data-v-fd7a490e]{color:var(--action-active)}.content[data-v-fd7a490e]{display:flex;flex:1;gap:.25rem;align-items:center;color:var(--text-primary)}.content .displayed-value[data-v-fd7a490e]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.content .image[data-v-fd7a490e]{width:20px;height:20px;flex:none}.content .image img[data-v-fd7a490e]{border-radius:4px;width:100%;height:100%}.content .start-icon[data-v-fd7a490e]{display:flex;color:var(--action-active)}.content .status-dot[data-v-fd7a490e]{padding-right:.25rem}.content .status-dot>div[data-v-fd7a490e]{position:relative;top:-1px}.dropdown-field-label[data-v-fd7a490e]{color:var(--text-primary)}.dropdown-field-help-text[data-v-fd7a490e]{margin-top:4px;position:absolute}

package/SettingsHeader.vue_vue_type_style_index_0_scoped_1791e4fe_lang.css

@@ -0,0 +1 @@
+.settings-header-container[data-v-1791e4fe]{display:flex;border:.0625rem solid var(--common-divider);border-radius:.375rem .375rem 0 0;border-bottom:none;background-color:var(--background-paper-elevation-0, #f9f9f9);justify-content:space-between}.settings-header-container .settings[data-v-1791e4fe]{display:flex;flex-direction:row;justify-content:space-between;height:4rem;padding:.75rem 0 .75rem 1.5rem;align-items:center;gap:.75rem;flex:1}.settings-header-container .settings .chart-type-selection[data-v-1791e4fe]{display:flex;height:1.75rem;max-width:8.125rem}.settings-header-container .settings .chart-type-selection[data-v-1791e4fe] .displayed-value{font-weight:600}.settings-header-container .settings-spacer[data-v-1791e4fe]{padding:.75rem 1.5rem}.settings-header-container .breakdowns[data-v-1791e4fe]{display:flex;width:13.8125rem;height:4rem;padding:0 .75rem;flex-direction:column;justify-content:center;align-items:flex-start;gap:.75rem}.settings-header-container .breakdowns-border[data-v-1791e4fe]{border-left:.0625rem solid var(--common-divider)}

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

@@ -1,5 +1,5 @@
 import { ChartDataSet, ChartType, ChartParsingConfig, ValueFormat } from './types';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     dataSets: ChartDataSet[];
     visibleIds: unknown[];
     chartType?: ChartType;
@@ -16,6 +16,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     noDataIcon?: string;
     noDataTitle?: string;
     noDataSubtitle?: string;
+    withSettingsHeader?: boolean;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -33,6 +34,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
+    withSettingsHeader: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:chartType": (chartType: ChartType) => void;
     "update:visibleIds": (visibleIds: unknown[]) => void;
@@ -53,6 +55,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     noDataIcon?: string;
     noDataTitle?: string;
     noDataSubtitle?: string;
+    withSettingsHeader?: boolean;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -70,6 +73,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
+    withSettingsHeader: boolean;
 }>>> & {
     "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
     "onUpdate:chartType"?: (chartType: ChartType) => any;
@@ -83,13 +87,17 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     minVisible: number;
     maxVisible: number;
     chartType: ChartType;
+    withSettingsHeader: boolean;
     subheader: string;
     dataSets: ChartDataSet[];
-    tickCount: number;
     hideLegend: boolean;
+    tickCount: number;
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
+}>, {
+    metric?(_: {}): any;
+    breakdowns?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -109,3 +117,8 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/chart/Chart.vue.js

@@ -1,7 +1,7 @@
 import o from "./Chart.vue2.js";
-/* empty css            */import _ from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../Chart.vue_vue_type_style_index_0_scoped_f06a4764_lang.css"; //*');
-const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-f06a4764"]]);
+/* empty css            */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../Chart.vue_vue_type_style_index_0_scoped_df85e0af_lang.css"; //*');
+const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-df85e0af"]]);
 export {
   a as default
 };

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