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

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/DataGrid.vue_vue_type_style_index_0_scoped_d27e1304_lang.css

@@ -0,0 +1 @@
+.sticky[data-v-d27e1304]{position:sticky}.table-container[data-v-d27e1304]{width:100%;position:relative;display:flex;flex-direction:column}.table-header[data-v-d27e1304]{display:flex;align-items:center;height:calc(var(--spacing-800) - 1px);border-bottom:1px solid var(--common-divider);background-color:var(--background-paper-elevation-0);position:sticky;left:0;padding:var(--spacing-300)}.table-header .table-title[data-v-d27e1304]{display:flex;flex:1;align-items:center;justify-content:flex-start;height:100%;color:var(--text-primary)}.table-header .table-header-right[data-v-d27e1304]{display:flex;align-items:center;height:100%}.table-header .search-wrapper[data-v-d27e1304]{width:13.75rem}.table-header.isStickyHeader[data-v-d27e1304]{z-index:calc(var(--189e28e1) + 3);top:0}.table-head-container[data-v-d27e1304]{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary)}.table-footer[data-v-d27e1304]{color:var(--text-primary);background-color:var(--background-paper-elevation-0);padding:0 var(--spacing-300);display:flex;align-items:center;min-height:var(--spacing-600);border:1px solid var(--common-divider);border-radius:var(--border-radius-md);border-top-right-radius:0;border-top-left-radius:0}.table-body-wrapper[data-v-d27e1304]{display:inline-table}.table-header-actions[data-v-d27e1304]{margin-left:var(--spacing-100);display:flex;align-items:center}.table-row[data-v-d27e1304]{position:relative}.table-row.loading[data-v-d27e1304]{opacity:.7}.table-row:not(.expanded):last-child>td[data-v-d27e1304]{border-bottom:none}.table-row.expanded:last-child>.expanded-row[data-v-d27e1304]{border-bottom:none}.expanded-row[data-v-d27e1304]{grid-column:var(--ac6022d6);border-bottom:1px solid var(--common-divider);background-color:var(--background-default)}table[data-v-d27e1304]{position:relative;display:block;overflow:auto;background:var(--background-paper-elevation-0);border:1px solid var(--common-divider);color:var(--text-primary);text-align:left;table-layout:fixed;width:100%;max-height:100%;border-radius:var(--border-radius-md);border-collapse:collapse;border-spacing:0}table.hasFooter[data-v-d27e1304]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}table td[data-v-d27e1304],table th[data-v-d27e1304]{line-height:normal;padding:0 var(--spacing-200)}table td[data-v-d27e1304]:first-of-type,table th[data-v-d27e1304]:first-of-type{padding-left:var(--spacing-300)}table td[data-v-d27e1304]:last-of-type,table th[data-v-d27e1304]:last-of-type{padding-right:var(--spacing-300)}table td.expand-toggle-cell[data-v-d27e1304],table th.expand-toggle-cell[data-v-d27e1304]{padding-left:var(--spacing-150);padding-right:var(--spacing-75)}table>thead[data-v-d27e1304]{border-bottom:none;z-index:calc(var(--189e28e1) + 1);display:inline-table;min-width:100%}table>thead>tr[data-v-d27e1304]{color:var(--text-primary);border-bottom:1px solid var(--common-divider);height:var(--spacing-500);display:grid;grid-template-columns:var(--3d5ab04e)}table>thead>tr>th[data-v-d27e1304]{background:var(--background-paper-elevation-0);width:100%;display:flex;align-items:center;cursor:default}table>thead>tr>th.bordered[data-v-d27e1304]{border-right:1px solid var(--common-divider)}table>thead>tr>th.bordered.isStickyRight[data-v-d27e1304]{border-right:none;border-left:1px solid var(--common-divider)}table>thead>tr>th.isTextRight[data-v-d27e1304]{justify-content:flex-end}table>thead>tr>th.isSortable[data-v-d27e1304]{cursor:pointer}table>thead.sticky[data-v-d27e1304]{position:sticky;top:0;background:white}table>thead.isStickyHeader[data-v-d27e1304]{z-index:calc(var(--189e28e1) + 2);top:calc(var(--spacing-800) - 1px)}table>tbody[data-v-d27e1304]{display:block}table>tbody>*>tr[data-v-d27e1304]{background-color:var(--background-default);min-height:var(--633cd456);height:auto;display:grid;align-items:center;grid-template-columns:var(--3d5ab04e)}table>tbody>*>tr:nth-of-type(2n)>td[data-v-d27e1304]{background-color:var(--background-default)}table>tbody>*>tr:hover:not(.loading)>td[data-v-d27e1304],table>tbody>*>tr.activeMenu>td[data-v-d27e1304]{background-color:var(--background-paper-elevation-1)}table>tbody td[data-v-d27e1304]{background-color:var(--background-default);border:none;min-width:0;display:flex;min-height:var(--633cd456);height:auto;width:100%;place-items:center;border-bottom:1px solid var(--common-divider);justify-content:start}table>tbody td.bordered[data-v-d27e1304]{border-right:1px solid var(--common-divider)}table>tbody td.bordered.isStickyRight[data-v-d27e1304]{border-right:none;border-left:1px solid var(--common-divider)}table>tbody td.isTextRight[data-v-d27e1304]{justify-content:flex-end;text-align:right}.section-container[data-v-d27e1304]{left:0}.sections[data-v-d27e1304]{display:flex}.section[data-v-d27e1304]{padding:0 1.5rem;background:var(--background-default);left:0;height:32px;display:flex;align-items:flex-end;border-right:1px solid var(--common-divider)}.table-cell[data-v-d27e1304]{width:100%}.empty-state[data-v-d27e1304]{min-height:250px}.floating-row[data-v-d27e1304]{display:flex;inset:0;pointer-events:none;position:absolute;z-index:calc(var(--189e28e1) + 1)}.floating-row *[data-v-d27e1304-s]{pointer-events:auto}

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/MultipleDataGrid.vue_vue_type_style_index_0_scoped_cfedf78b_lang.css

@@ -0,0 +1 @@
+.multi-table-container[data-v-cfedf78b]{border-radius:var(--border-radius-md);border:1px solid var(--common-divider);display:flex;flex-direction:column;overflow-y:auto;width:100%}.multi-table-container .table-header-container[data-v-cfedf78b]{align-items:center;background-color:var(--background-paper-elevation-0);display:flex;height:calc(var(--spacing-800) - 2px);justify-content:space-between;padding:var(--spacing-300);width:100%}.multi-table-container .table-header-container.sticky[data-v-cfedf78b]{position:sticky;top:0;z-index:calc(var(--6083f45c) + 3)}.multi-table-container[data-v-cfedf78b] table{display:table;border:unset;border-radius:unset}.multi-table-container[data-v-cfedf78b] thead{border-top:1px solid var(--common-divider)}.multi-table-container .tables-container[data-v-cfedf78b] thead.sticky{top:62px}.multi-table-container .empty-state[data-v-cfedf78b]{min-height:250px}.multi-table-container .table-header-right[data-v-cfedf78b]{align-items:center;display:flex;height:100%}.multi-table-container .table-header-right .table-header-actions[data-v-cfedf78b]{align-items:center;display:flex;margin-left:var(--spacing-100)}

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/Table.vue_vue_type_style_index_0_scoped_9375215d_lang.css

@@ -0,0 +1 @@
+.label[data-v-9375215d]{color:#41454d}.sticky[data-v-9375215d]{position:sticky}.table-container[data-v-9375215d]{width:100%;position:relative}.last.floating[data-v-9375215d]{max-width:100%}.table-header[data-v-9375215d]{display:flex;align-items:center;height:55px;border-bottom:1px solid #dddfe1;background-color:#fff;position:sticky;left:0}.table-header .table-title[data-v-9375215d]{display:flex;align-items:center;justify-content:center;height:100%;padding:1.25rem 1.5rem}.table-header .table-header-right[data-v-9375215d]{display:flex;align-items:center;height:100%}.table-header .table-header-right.border-search[data-v-9375215d]{border-left:1px solid #dddfe1}.table-header.isStickyHeader[data-v-9375215d]{z-index:199;top:0}.table-head-container[data-v-9375215d]{display:flex;align-items:center;white-space:nowrap}.table-body-wrapper[data-v-9375215d]{display:inline-table}.table-header-actions[data-v-9375215d]{margin-left:auto;margin-right:1rem;display:flex;align-items:center}.table-row[data-v-9375215d]{position:relative}.table-row.loading[data-v-9375215d]{opacity:.7}.floating-actions[data-v-9375215d]{position:absolute;z-index:10;max-width:max-content;transform:translateY(-50%) translate(calc(-100% - 12px));top:50%;left:0}table[data-v-9375215d]{position:relative;display:block;overflow:auto;background:#ffffff;border:1px solid #dddfe1;color:#53575b;text-align:left;table-layout:fixed;width:100%;max-height:100%;border-radius:1rem}table td[data-v-9375215d],table th[data-v-9375215d]{padding:0 1.5rem;line-height:normal}table thead[data-v-9375215d]{border-bottom:none;z-index:101;display:inline-table;min-width:100%}table thead tr[data-v-9375215d]{color:#626970;border-bottom:2px solid #dddfe1;height:2.5rem;display:grid;grid-template-columns:var(--0c2c9e92)}table thead tr th[data-v-9375215d]{background:#ffffff;width:100%;display:flex;align-items:center;cursor:default}table thead tr th.bordered[data-v-9375215d]{border-right:1px solid #dddfe1}table thead tr th.isTextRight[data-v-9375215d]{justify-content:flex-end}table thead tr th.isSortable[data-v-9375215d]{cursor:pointer}table thead.sticky[data-v-9375215d]{position:sticky;top:0;background:white}table thead.isStickyHeader[data-v-9375215d]{z-index:198px;top:55px}table tbody[data-v-9375215d]{height:100%;display:block}table tbody tr[data-v-9375215d]{background-color:#fff;min-height:3rem;height:auto;display:grid;align-items:center;grid-template-columns:var(--0c2c9e92)}table tbody tr:nth-of-type(2n) td[data-v-9375215d]{background-color:#fff}table tbody tr:hover:not(.loading) td[data-v-9375215d]{background-color:#f7f8f9}table tbody td[data-v-9375215d]{background-color:#fff;border:none;min-width:0;display:flex;height:100%;width:100%;place-items:center;border-bottom:1px solid #dddfe1;justify-content:start}table tbody td.bordered[data-v-9375215d]{border-right:1px solid #dddfe1}table tbody td.isTextRight[data-v-9375215d]{justify-content:flex-end}table tfoot[data-v-9375215d]{display:block;height:4.5rem;background-color:#fff;border:none}.section-container[data-v-9375215d]{left:0}.sections[data-v-9375215d]{display:flex}.section[data-v-9375215d]{padding:0 1.5rem;background:#ffffff;left:0;height:32px;display:flex;align-items:flex-end;border-right:1px solid #dddfe1}

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