@ironsource/shared-ui 2.1.12-rc.24 → 2.1.12-rc.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ChartPlane.vue_vue_type_style_index_0_scoped_ff7e556e_lang.css +1 -0
- package/ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_38354f10_lang.css +1 -0
- package/ConditionalDropdown.vue_vue_type_style_index_0_scoped_683b8a75_lang.css +1 -0
- package/DataGrid.vue_vue_type_style_index_0_scoped_0963bb3c_lang.css +1 -0
- package/DropdownV4.vue_vue_type_style_index_0_scoped_1f7f7f9c_lang.css +1 -0
- package/OptionV4.vue_vue_type_style_index_0_scoped_9560a062_lang.css +1 -0
- package/SwitchV4.vue_vue_type_style_index_0_scoped_cd6621a7_lang.css +1 -0
- package/components/chart/Chart.vue.d.ts +1 -1
- package/components/chart/ChartPlane.vue.d.ts +1 -1
- package/components/chart/ChartPlane.vue.js +3 -3
- package/components/chart/ChartPlane.vue2.js +141 -141
- package/components/chart/index.d.ts +24 -24
- package/components/chart/utils/utils.d.ts +1 -2
- package/components/chart/utils/utils.js +13 -19
- package/components/dropdown/v4/ChipDropdownTrigger.vue.d.ts +5 -0
- package/components/dropdown/v4/ChipDropdownTrigger.vue.js +3 -3
- package/components/dropdown/v4/ChipDropdownTrigger.vue2.js +64 -54
- package/components/dropdown/v4/ConditionalDropdown.vue.d.ts +22 -9
- package/components/dropdown/v4/ConditionalDropdown.vue.js +4 -4
- package/components/dropdown/v4/ConditionalDropdown.vue2.js +144 -131
- package/components/dropdown/v4/DropdownV4.vue.d.ts +10 -0
- package/components/dropdown/v4/DropdownV4.vue.js +2 -2
- package/components/dropdown/v4/DropdownV4.vue2.js +78 -74
- package/components/dropdown/v4/OptionV4.vue.js +3 -3
- package/components/dropdown/v4/OptionV4.vue2.js +41 -39
- package/components/dropdown/v4/dropdownStoryArgs.d.ts +8 -0
- package/components/dropdown/v4/index.d.ts +485 -103
- package/components/includeExclude/IncludeExclude.vue.d.ts +1 -1
- package/components/includeExclude/IncludeExcludeDragDrop.vue.d.ts +1 -1
- package/components/includeExclude/index.d.ts +40 -40
- package/components/switch/v4/SwitchV4.vue.d.ts +11 -0
- package/components/switch/v4/SwitchV4.vue.js +2 -2
- package/components/switch/v4/SwitchV4.vue2.js +39 -26
- package/components/switch/v4/index.d.ts +18 -0
- package/components/table/v4/DataGrid.vue.js +2 -2
- package/components/table/v4/DataGrid.vue2.js +5 -5
- package/index.d.ts +1010 -210
- package/index.js +1 -1
- package/mocks/optionsWithIcons.d.ts +1 -0
- package/package.json +1 -1
- package/ChartPlane.vue_vue_type_style_index_0_scoped_903fc6ae_lang.css +0 -1
- package/ChipDropdownTrigger.vue_vue_type_style_index_0_scoped_e43ac1c9_lang.css +0 -1
- package/ConditionalDropdown.vue_vue_type_style_index_0_scoped_8d5521da_lang.css +0 -1
- package/DataGrid.vue_vue_type_style_index_0_scoped_086c5b0d_lang.css +0 -1
- package/DropdownV4.vue_vue_type_style_index_0_scoped_86b82f0c_lang.css +0 -1
- package/OptionV4.vue_vue_type_style_index_0_scoped_3dc741c1_lang.css +0 -1
- package/SwitchV4.vue_vue_type_style_index_0_scoped_fa120cf6_lang.css +0 -1
- package/components/chart/composables/useChartValues.d.ts +0 -12
- package/components/chart/composables/useChartValues.js +0 -32
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chart-plane-container[data-v-ff7e556e]{--headerHeight: var(--2f09324f);width:100%;height:var(--0d942f3a);position:relative}.header-wrapper[data-v-ff7e556e]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-ff7e556e]{padding-top:var(--headerHeight);height:100%}.chart-empty[data-v-ff7e556e]{background:var(--background-paper)}.chart[data-v-ff7e556e]{width:100%;height:100%;position:relative}.chart__canvas[data-v-ff7e556e]{width:100%;height:100%}.chart__tooltip[data-v-ff7e556e]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chip-trigger[data-v-38354f10]{border:1px solid var(--default-outlined-border);padding:.3125rem .3125rem .3125rem .4375rem;border-radius:100px;cursor:pointer;user-select:none;display:inline-flex;max-width:250px}.chip-trigger[data-v-38354f10]:hover{border-color:var(--action-active);background:var(--action-selected)}.chip-trigger.active[data-v-38354f10]{border:none;background:var(--primary-light);padding:.375rem .375rem .375rem .5rem}.chip-trigger.active .chip-trigger--content[data-v-38354f10]{color:var(--primary-contrast-text)}.chip-trigger.active[data-v-38354f10]:hover{border:.0625rem solid var(--primary-main-50-p);padding:.3125rem .3125rem .3125rem .4375rem}.chip-trigger.open[data-v-38354f10]{border:.125rem solid var(--action-active);padding:.25rem .25rem .25rem .375rem;background:var(--action-selected)}.chip-trigger.open.active[data-v-38354f10]{border:.125rem solid var(--primary-main-50-p);background:var(--primary-light);padding:.25rem .25rem .25rem .375rem}.chip-trigger.disabled[data-v-38354f10]{cursor:auto}.chip-trigger--content[data-v-38354f10]{color:var(--text-primary);display:flex;width:100%}.chip-trigger--content .x-circle-wrapper[data-v-38354f10]{margin-left:4px;color:var(--primary-dark)}.chip-trigger--content .x-circle-wrapper[data-v-38354f10]:hover{color:var(--primary-darker)}.chip-trigger--text[data-v-38354f10]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;width:100%}.chip-trigger--suffix[data-v-38354f10]{white-space:nowrap}.chip-trigger--icon[data-v-38354f10]{margin-left:4px;color:var(--action-active)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.custom-list-area[data-v-683b8a75]{color:var(--text-secondary);width:100%;text-align:center;box-sizing:border-box;padding:63px 10px}.inline-search[data-v-683b8a75]{width:100%}.contain-accept[data-v-683b8a75]{padding:6px 8px;margin-bottom:4px;cursor:pointer}.contain-accept[data-v-683b8a75]:hover{background-color:var(--action-hover);border-radius:.5rem}.contain-accept--query[data-v-683b8a75]{margin-left:4px;display:inline-flex;color:var(--primary-main)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.sticky[data-v-0963bb3c]{position:sticky}.table-container[data-v-0963bb3c]{width:100%;position:relative;display:flex;flex-direction:column}.table-header[data-v-0963bb3c]{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-0963bb3c]{display:flex;flex:1;align-items:center;justify-content:flex-start;height:100%;color:var(--text-primary)}.table-header .table-header-right[data-v-0963bb3c]{display:flex;align-items:center;height:100%}.table-header .search-wrapper[data-v-0963bb3c]{width:13.75rem}.table-header.isStickyHeader[data-v-0963bb3c]{z-index:calc(var(--63c838b5) + 3);top:0}.table-head-container[data-v-0963bb3c]{display:flex;align-items:center;white-space:nowrap;color:var(--text-primary)}.table-footer[data-v-0963bb3c]{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-0963bb3c]{display:inline-table}.table-header-pre-search-content[data-v-0963bb3c]{margin-right:var(--spacing-100);display:flex;align-items:center}.table-header-actions[data-v-0963bb3c]{margin-left:var(--spacing-100);display:flex;align-items:center}.table-row[data-v-0963bb3c]{position:relative}.table-row.loading[data-v-0963bb3c]{opacity:.7}.table-row:not(.expanded):last-child>td[data-v-0963bb3c]{border-bottom:none}.table-row.expanded:last-child>.expanded-row[data-v-0963bb3c]{border-bottom:none}.expanded-row[data-v-0963bb3c]{grid-column:var(--8cc8612e);border-bottom:1px solid var(--common-divider);background-color:var(--background-default)}table[data-v-0963bb3c]{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-0963bb3c]{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}table td[data-v-0963bb3c],table th[data-v-0963bb3c]{line-height:normal;padding:0 var(--spacing-200)}table td[data-v-0963bb3c]:first-of-type,table th[data-v-0963bb3c]:first-of-type{padding-left:var(--spacing-300)}table td[data-v-0963bb3c]:last-of-type,table th[data-v-0963bb3c]:last-of-type{padding-right:var(--spacing-300)}table td.expand-toggle-cell[data-v-0963bb3c],table th.expand-toggle-cell[data-v-0963bb3c]{padding-left:var(--spacing-150);padding-right:var(--spacing-75)}table>thead[data-v-0963bb3c]{border-bottom:none;z-index:calc(var(--63c838b5) + 1);display:inline-table;min-width:100%}table>thead>tr[data-v-0963bb3c]{color:var(--text-primary);border-bottom:1px solid var(--common-divider);height:var(--spacing-500);display:grid;grid-template-columns:var(--ec9ca7bc)}table>thead>tr>th[data-v-0963bb3c]{background:var(--background-paper-elevation-0);width:100%;display:flex;align-items:center;cursor:default}table>thead>tr>th.isSortable[data-v-0963bb3c]{cursor:pointer}table>thead>tr>td[data-v-0963bb3c]{display:flex;align-items:center}table>thead>tr>th.bordered[data-v-0963bb3c],table>thead>tr>td.bordered[data-v-0963bb3c]{border-right:1px solid var(--common-divider)}table>thead>tr>th.bordered.isStickyRight[data-v-0963bb3c],table>thead>tr>td.bordered.isStickyRight[data-v-0963bb3c]{border-right:none;border-left:1px solid var(--common-divider)}table>thead>tr>th.isTextRight[data-v-0963bb3c],table>thead>tr>td.isTextRight[data-v-0963bb3c]{justify-content:flex-end}table>thead.sticky[data-v-0963bb3c]{position:sticky;top:0;background:var(--background-default)}table>thead.isStickyHeader[data-v-0963bb3c]{z-index:calc(var(--63c838b5) + 2);top:calc(var(--spacing-800) - 1px)}table .totals-row[data-v-0963bb3c]{height:40px}table .totals-row[data-v-0963bb3c]:hover{background:var(--background-paper-elevation-1)}table>tbody[data-v-0963bb3c]{display:block}table>tbody>*>tr[data-v-0963bb3c]{background-color:var(--background-default);height:auto;display:grid;align-items:center;grid-template-columns:var(--ec9ca7bc)}table>tbody>*>tr:nth-of-type(2n)>td[data-v-0963bb3c]{background-color:var(--background-default)}table>tbody>*>tr:hover:not(.loading)>td[data-v-0963bb3c],table>tbody>*>tr.activeMenu>td[data-v-0963bb3c]{background-color:var(--background-paper-elevation-1)}table>tbody td[data-v-0963bb3c]{background-color:var(--background-default);border:none;min-width:0;display:flex;height:auto;width:100%;place-items:center;border-bottom:1px solid var(--common-divider);justify-content:start}table>tbody td.bordered[data-v-0963bb3c]{border-right:1px solid var(--common-divider)}table>tbody td.bordered.isStickyRight[data-v-0963bb3c]{border-right:none;border-left:1px solid var(--common-divider)}table>tbody td.isTextRight[data-v-0963bb3c]{justify-content:flex-end;text-align:right}.underlined[data-v-0963bb3c]{border-bottom:.0625rem dashed var(--default-outlined-border)}.underlined[data-v-0963bb3c]:hover{cursor:help}.section-container[data-v-0963bb3c]{left:0}.sections[data-v-0963bb3c]{display:flex}.section[data-v-0963bb3c]{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-0963bb3c]{width:100%}.empty-state[data-v-0963bb3c]{min-height:250px}.floating-row[data-v-0963bb3c]{display:flex;inset:0;pointer-events:none;position:absolute;z-index:calc(var(--63c838b5) + 1)}.floating-row *[data-v-0963bb3c-s]{pointer-events:auto}.bg[data-v-0963bb3c]{background:var(--background-default)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.v-enter-active[data-v-1f7f7f9c],.v-leave-active[data-v-1f7f7f9c]{transition:opacity .25s ease}ol[data-v-1f7f7f9c],ul[data-v-1f7f7f9c],menu[data-v-1f7f7f9c]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-1f7f7f9c],.dropdown.full-width .button__container[data-v-1f7f7f9c]{width:100%}.dropdown-list-wrapper[data-v-1f7f7f9c]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-1f7f7f9c]{padding:.5rem}.list-container--multi[data-v-1f7f7f9c]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-1f7f7f9c]{display:flex;gap:4px;padding-bottom:.25rem}.inline-search .inline-search-wrapper .search-container[data-v-1f7f7f9c]{width:100%}.inline-search .list-container[data-v-1f7f7f9c]{padding-top:0}.no-result-container[data-v-1f7f7f9c]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-1f7f7f9c]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-1f7f7f9c]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-1f7f7f9c]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.list--with-conditions[data-v-1f7f7f9c]{min-height:0;margin-bottom:0}.image-slot[data-v-1f7f7f9c]{margin-right:.5rem}.actions-wrapper[data-v-1f7f7f9c]{display:flex;width:100%;padding:.5rem .5rem .5rem .125rem;padding-bottom:0;border-top:1px solid var(--common-divider);justify-content:space-between;margin-top:.25rem}.apply-button[data-v-1f7f7f9c]{margin-left:.5rem}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.label[data-v-9560a062]{color:#41454d}.item-container[data-v-9560a062]{width:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--border-radius-lg);margin-bottom:.25rem;color:var(--text-primary);padding:6px 8px}.item-container--disabled[data-v-9560a062]{cursor:initial;color:var(--text-disabled)}.item-container[data-v-9560a062]:hover:not(.item-container--disabled){background-color:var(--action-hover)}.item-container--active[data-v-9560a062],.item-container[data-v-9560a062]:active{background-color:var(--action-selected)}.item-container:not(.item-container--multi).item-container--selected[data-v-9560a062]{background-color:var(--action-selected)}.subtitle[data-v-9560a062]{color:#7b838c;line-height:1rem}.clear-button[data-v-9560a062]{display:flex;padding:0 4px;color:#7b838c;align-items:center;height:auto;background-image:none;min-width:auto;border:none;background-color:transparent}.clear-button[data-v-9560a062]:hover{color:#3083ff}.item[data-v-9560a062]{width:100%;display:flex;gap:.5rem;align-items:center}.item--with-icon[data-v-9560a062],.item--multi[data-v-9560a062]{display:flex;flex-direction:row;align-items:center;justify-content:start}.item .image[data-v-9560a062]{width:20px;height:20px;flex:none}.item .image img[data-v-9560a062]{width:20px;height:20px;border-radius:4px}.item .flag[data-v-9560a062]{width:16px;height:16px}.item .flag img[data-v-9560a062]{width:16px;height:16px;border-radius:50%}.item .start-icon[data-v-9560a062],.item .end-icon[data-v-9560a062]{display:flex;color:var(--action-active)}.item .end-text-icon[data-v-9560a062]{display:inline-flex}.item .option-text[data-v-9560a062]{line-height:1.1875rem}.text-container[data-v-9560a062]{width:100%;text-overflow:ellipsis;overflow:hidden}.v4-tooltip.tooltip-option[data-v-9560a062]{display:block}.tooltip-option[data-v-9560a062] .container{width:100%}.app-trigger--icon[data-v-9560a062]{color:var(--action-active);transform:rotate(-90deg);transition:transform .2s}.app-trigger--icon.expanded[data-v-9560a062]{transform:rotate(0)}.option-warning[data-v-9560a062]{display:flex}.option-warning__icon[data-v-9560a062]{color:var(--warning-main)}.option-content[data-v-9560a062]{display:flex}.option-content[data-v-9560a062]:not(.option-content-vertical){gap:.5rem;align-items:center}.option-content-horizontal[data-v-9560a062]{justify-content:space-between;gap:.5rem}.option-content-vertical[data-v-9560a062]{flex-direction:column}.option-text .main-text[data-v-9560a062]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.option-text .main-text .conditional-option-label[data-v-9560a062]{color:var(--text-secondary);display:inline-flex}.option-text .main-text .conditional-option-value[data-v-9560a062]{margin-left:4px;display:inline-flex;color:var(--primary-main)}.option-text .caption-text[data-v-9560a062]{color:var(--text-secondary)}.multiline-tooltip[data-v-9560a062]{display:flex;flex-direction:column}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.switch[data-v-cd6621a7]{position:relative;display:inline-flex;background:var(--default-main);border-radius:var(--border-radius-md);border:1px solid var(--default-outlined-border);overflow:hidden}.switch--variant-primary .option--selected[data-v-cd6621a7]{background:var(--primary-main-8-p)}.switch--variant-primary .option[data-v-cd6621a7]:hover{background:var(--primary-light)}.switch--variant-primary .option[data-v-cd6621a7]:hover .icon{color:var(--primary-main)}.switch--variant-default .option--selected[data-v-cd6621a7]{background:var(--action-selected)}.switch--variant-default .option--selected[data-v-cd6621a7] .icon{color:var(--text-primary)}.option[data-v-cd6621a7]{border-radius:0;padding:3px}.option-wrapper[data-v-cd6621a7]:not(:last-child){border-right:1px solid var(--default-outlined-border)}
|
|
@@ -201,12 +201,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
201
201
|
yAxisFormat: ValueFormat;
|
|
202
202
|
valueSuffix: string;
|
|
203
203
|
valuePrefix: string;
|
|
204
|
-
dataSets: ChartDataSet[];
|
|
205
204
|
trendTooltip: any;
|
|
206
205
|
subheader: string;
|
|
207
206
|
subheaderTooltip: any;
|
|
208
207
|
trendValue: string | number;
|
|
209
208
|
trendDirection: TrendDirection;
|
|
209
|
+
dataSets: ChartDataSet[];
|
|
210
210
|
tickCount: number;
|
|
211
211
|
truncateTickLabels: boolean;
|
|
212
212
|
keepSubheaderVisible: boolean;
|
|
@@ -172,13 +172,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
172
172
|
yAxisFormat: ValueFormat;
|
|
173
173
|
valueSuffix: string;
|
|
174
174
|
valuePrefix: string;
|
|
175
|
-
dataSets: ChartDataSet[];
|
|
176
175
|
trendTooltip: any;
|
|
177
176
|
subheader: string;
|
|
178
177
|
subheaderTooltip: any;
|
|
179
178
|
typeSwitcher: boolean;
|
|
180
179
|
trendValue: string | number;
|
|
181
180
|
trendDirection: TrendDirection;
|
|
181
|
+
dataSets: ChartDataSet[];
|
|
182
182
|
tickCount: number;
|
|
183
183
|
truncateTickLabels: boolean;
|
|
184
184
|
keepSubheaderVisible: boolean;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import e from "./ChartPlane.vue2.js";
|
|
2
2
|
/* empty css */import o from "../../_virtual/_plugin-vue_export-helper.js";
|
|
3
|
-
// import "../../ChartPlane.
|
|
4
|
-
const
|
|
3
|
+
// import "../../ChartPlane.vue_vue_type_style_index_0_scoped_ff7e556e_lang.css"; //*');
|
|
4
|
+
const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-ff7e556e"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
a as default
|
|
7
7
|
};
|
|
@@ -1,39 +1,38 @@
|
|
|
1
|
-
import "../../ChartPlane.
|
|
2
|
-
import { Chart as
|
|
3
|
-
import { HoverVerticalLine as
|
|
4
|
-
import { prepareTickLabel as
|
|
5
|
-
import { DEFAULT_TICK_COUNT as
|
|
6
|
-
import { ChartType as
|
|
7
|
-
import { useTooltipPosition as
|
|
8
|
-
import
|
|
1
|
+
import "../../ChartPlane.vue_vue_type_style_index_0_scoped_ff7e556e_lang.css"; import { defineComponent as ae, useCssVars as oe, unref as s, computed as l, ref as k, onMounted as le, watch as v, nextTick as re, openBlock as p, createElementBlock as A, createVNode as ie, isRef as ne, createSlots as se, withCtx as de, renderSlot as ue, createCommentVNode as S, createElementVNode as L, normalizeStyle as ce, createBlock as E } from "vue";
|
|
2
|
+
import { Chart as P, ArcElement as fe, LineElement as pe, BarElement as he, PointElement as me, LineController as ve, BarController as ye, PieController as Te, ScatterController as Ce, CategoryScale as be, LinearScale as ge, Filler as xe, Tooltip as ke } from "chart.js";
|
|
3
|
+
import { HoverVerticalLine as Ae } from "./plugins/HoverVerticalLine.js";
|
|
4
|
+
import { prepareTickLabel as Se, formatValue as Le } from "./utils/utils.js";
|
|
5
|
+
import { DEFAULT_TICK_COUNT as Ee, TOTALS_HELPER_KEY as w, BASE_COLOR_KEY as V, CHART_PADDING as Re, POINT_BORDER_COLOR as Be, TICK_LABEL_COLOR as N, TICK_LABEL_FONT as F, TICKS_EXTRA_PADDING as De, GRID_LINE_COLOR as K, HEADER_HEIGHT as Oe, COMPACT_HEADER_HEIGHT as Ie, HOVER_AREA_TRANSPARENCY as He, HOVER_TRANSPARENCY as y } from "./consts.js";
|
|
6
|
+
import { ChartType as d, DateInterval as Pe, TooltipOrder as M, TrendDirection as we } from "./types.js";
|
|
7
|
+
import { useTooltipPosition as Ve } from "./composables/useTooltipPosition.js";
|
|
8
|
+
import Ne from "./ChartTooltip.vue.js";
|
|
9
9
|
import { hexColorToRgba as h } from "../../utils/color.js";
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
|
|
19
|
-
const Qe = { class: "chart-plane-container" }, et = {
|
|
10
|
+
import Fe from "./ChartHeader.vue.js";
|
|
11
|
+
import { useMemoize as Ke, useVModel as Me } from "@vueuse/core";
|
|
12
|
+
import Ue from "../emptyState/v4/EmptyStateV4.vue.js";
|
|
13
|
+
import Ye from "./ChartLoader.vue.js";
|
|
14
|
+
import { DEFAULT_CHART_COLOR as _e } from "./colorPalette.js";
|
|
15
|
+
import { TotalType as U, calculateTotal as Ge } from "../../utils/totals.js";
|
|
16
|
+
import { isNullOrUndefined as $e } from "../../utils/utils.js";
|
|
17
|
+
import { storeOriginalDatasetColors as ze, restoreOriginalDatasetColors as We } from "./utils/highlightUtils.js";
|
|
18
|
+
const Ze = { class: "chart-plane-container" }, Xe = {
|
|
20
19
|
key: 0,
|
|
21
20
|
class: "header-wrapper"
|
|
22
|
-
},
|
|
21
|
+
}, je = {
|
|
23
22
|
key: 1,
|
|
24
23
|
class: "chart-plane"
|
|
25
|
-
},
|
|
24
|
+
}, qe = { class: "chart" }, mt = /* @__PURE__ */ ae({
|
|
26
25
|
__name: "ChartPlane",
|
|
27
26
|
props: {
|
|
28
27
|
dataSets: { default: () => [] },
|
|
29
28
|
visibleIds: { default: () => [] },
|
|
30
29
|
highlightedId: { default: null },
|
|
31
|
-
chartType: { default:
|
|
30
|
+
chartType: { default: d.Line },
|
|
32
31
|
parsing: { default: void 0 },
|
|
33
32
|
xAxisFormat: { default: "string" },
|
|
34
33
|
yAxisFormat: { default: "number" },
|
|
35
|
-
xAxisDateInterval: { default:
|
|
36
|
-
tickCount: { default:
|
|
34
|
+
xAxisDateInterval: { default: Pe.DAILY },
|
|
35
|
+
tickCount: { default: Ee },
|
|
37
36
|
truncateTickLabels: { type: Boolean, default: !1 },
|
|
38
37
|
header: { default: "" },
|
|
39
38
|
subheader: { default: "" },
|
|
@@ -49,11 +48,11 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
49
48
|
height: { default: "100%" },
|
|
50
49
|
compactHeader: { type: Boolean, default: !1 },
|
|
51
50
|
tooltipRespectsTopEdge: { type: Boolean, default: !0 },
|
|
52
|
-
tooltipTotalType: { default:
|
|
53
|
-
tooltipTotalCalcFn: { type: Function, default:
|
|
54
|
-
tooltipOrder: { default:
|
|
51
|
+
tooltipTotalType: { default: U.Total },
|
|
52
|
+
tooltipTotalCalcFn: { type: Function, default: Ge },
|
|
53
|
+
tooltipOrder: { default: M.Legend },
|
|
55
54
|
trendValue: { default: null },
|
|
56
|
-
trendDirection: { default:
|
|
55
|
+
trendDirection: { default: we.UP },
|
|
57
56
|
trendTooltip: { default: null },
|
|
58
57
|
totalsChart: { type: Boolean, default: !1 },
|
|
59
58
|
colorsMap: { default: () => ({}) },
|
|
@@ -61,14 +60,17 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
61
60
|
valuePrefix: { default: "" }
|
|
62
61
|
},
|
|
63
62
|
emits: ["update:chartType"],
|
|
64
|
-
setup(o, { emit:
|
|
63
|
+
setup(o, { emit: Y }) {
|
|
65
64
|
const e = o;
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
"
|
|
65
|
+
oe((t) => ({
|
|
66
|
+
"2f09324f": s(q),
|
|
67
|
+
"0d942f3a": o.height
|
|
69
68
|
}));
|
|
70
|
-
const
|
|
71
|
-
|
|
69
|
+
const _ = Ke(Se);
|
|
70
|
+
P.register(
|
|
71
|
+
fe,
|
|
72
|
+
pe,
|
|
73
|
+
he,
|
|
72
74
|
me,
|
|
73
75
|
ve,
|
|
74
76
|
ye,
|
|
@@ -78,47 +80,52 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
78
80
|
ge,
|
|
79
81
|
xe,
|
|
80
82
|
ke,
|
|
81
|
-
|
|
82
|
-
Ae,
|
|
83
|
-
Le,
|
|
84
|
-
Ee
|
|
83
|
+
Ae
|
|
85
84
|
);
|
|
86
|
-
const
|
|
85
|
+
const T = Me(e, "chartType", Y), G = l(
|
|
87
86
|
() => e.withAnimation ? "" : "none"
|
|
88
87
|
), m = k(null);
|
|
89
88
|
let n = null;
|
|
90
|
-
const R = l(() => e.empty || e.dataSets.length === 0),
|
|
91
|
-
m.value && (n && n.destroy(), n = new
|
|
92
|
-
},
|
|
93
|
-
n && (n.data.datasets =
|
|
89
|
+
const R = l(() => e.empty || e.dataSets.length === 0), c = l(() => !e.loading && !R.value), C = () => {
|
|
90
|
+
m.value && (n && n.destroy(), n = new P(m.value, O.value));
|
|
91
|
+
}, $ = () => {
|
|
92
|
+
n && (n.data.datasets = D.value, n.options = O.value.options, n.update(G.value));
|
|
94
93
|
};
|
|
95
|
-
|
|
96
|
-
t && (await
|
|
97
|
-
}),
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
94
|
+
le(C), v(() => e.chartType, C), v(c, async (t) => {
|
|
95
|
+
t && (await re(), C());
|
|
96
|
+
}), v(
|
|
97
|
+
[
|
|
98
|
+
() => e.visibleIds,
|
|
99
|
+
() => e.dataSets,
|
|
100
|
+
() => e.valuePrefix,
|
|
101
|
+
() => e.valueSuffix
|
|
102
|
+
],
|
|
103
|
+
$
|
|
104
|
+
);
|
|
105
|
+
const f = l(() => e.totalsChart), b = l(
|
|
106
|
+
() => e.chartType === d.StackedLine || e.chartType === d.StackedBar || f.value
|
|
107
|
+
), g = l(
|
|
108
|
+
() => e.chartType === d.Line || e.chartType === d.StackedLine
|
|
109
|
+
), z = l(() => f.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: w } : e.parsing), W = l(() => f.value ? e.dataSets.map((t) => ({
|
|
103
110
|
...t,
|
|
104
111
|
data: t.data.map((i) => ({
|
|
105
112
|
...i,
|
|
106
|
-
[
|
|
113
|
+
[w]: t.label
|
|
107
114
|
}))
|
|
108
|
-
})) : e.dataSets),
|
|
109
|
-
() =>
|
|
110
|
-
),
|
|
111
|
-
() =>
|
|
115
|
+
})) : e.dataSets), x = l(
|
|
116
|
+
() => W.value.filter((t) => e.visibleIds.includes(t.id))
|
|
117
|
+
), Z = (t) => e.colorsMap[t] || _e, B = l(
|
|
118
|
+
() => x.value.length && x.value.every(
|
|
112
119
|
(t) => t.data.length === 1
|
|
113
120
|
)
|
|
114
|
-
),
|
|
115
|
-
const a =
|
|
121
|
+
), D = l(() => x.value.map((t, i) => {
|
|
122
|
+
const a = Z(t.id), r = b.value ? i !== 0 ? "-1" : "start" : void 0;
|
|
116
123
|
return {
|
|
117
124
|
...t,
|
|
118
125
|
fill: r,
|
|
119
126
|
backgroundColor: h(
|
|
120
127
|
a,
|
|
121
|
-
e.chartType ===
|
|
128
|
+
e.chartType === d.StackedLine ? 10 : 70
|
|
122
129
|
),
|
|
123
130
|
borderColor: a,
|
|
124
131
|
pointBackgroundColor: a,
|
|
@@ -128,36 +135,36 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
128
135
|
// draw a bit outside the chart area
|
|
129
136
|
icon: t.icon || null,
|
|
130
137
|
iconType: t.iconType || "branded",
|
|
131
|
-
[
|
|
138
|
+
[V]: a
|
|
132
139
|
// store base color for later use
|
|
133
140
|
};
|
|
134
|
-
})),
|
|
135
|
-
() => e.tooltipTotalType ===
|
|
136
|
-
),
|
|
137
|
-
type: e.chartType ==
|
|
141
|
+
})), X = l(
|
|
142
|
+
() => e.tooltipTotalType === U.Total ? "Total" : "Mean"
|
|
143
|
+
), O = l(() => ({
|
|
144
|
+
type: e.chartType == d.Bar || e.chartType === d.StackedBar ? "bar" : "line",
|
|
138
145
|
// Chart Data
|
|
139
146
|
data: {
|
|
140
|
-
datasets:
|
|
147
|
+
datasets: D.value
|
|
141
148
|
},
|
|
142
149
|
// Chart Options
|
|
143
150
|
options: {
|
|
144
|
-
parsing:
|
|
151
|
+
parsing: z.value,
|
|
145
152
|
interaction: {
|
|
146
153
|
intersect: !1,
|
|
147
|
-
mode:
|
|
154
|
+
mode: f.value ? "point" : "index",
|
|
148
155
|
axis: "x"
|
|
149
156
|
},
|
|
150
157
|
// plugins
|
|
151
158
|
plugins: {
|
|
152
159
|
legend: { display: !1 },
|
|
153
160
|
title: { display: !1 },
|
|
154
|
-
hoverVerticalLine:
|
|
161
|
+
hoverVerticalLine: g.value,
|
|
155
162
|
// tooltip
|
|
156
163
|
tooltip: {
|
|
157
164
|
enabled: !1,
|
|
158
165
|
position: "average",
|
|
159
166
|
external: ({ tooltip: t }) => {
|
|
160
|
-
|
|
167
|
+
u.value = { ...t };
|
|
161
168
|
},
|
|
162
169
|
callbacks: {
|
|
163
170
|
footer: (t) => {
|
|
@@ -165,11 +172,11 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
165
172
|
i,
|
|
166
173
|
e.tooltipTotalType
|
|
167
174
|
);
|
|
168
|
-
return [
|
|
175
|
+
return [X.value, String(a)];
|
|
169
176
|
}
|
|
170
177
|
},
|
|
171
178
|
itemSort: (t, i) => {
|
|
172
|
-
if (e.tooltipOrder ===
|
|
179
|
+
if (e.tooltipOrder === M.YAxis) {
|
|
173
180
|
const a = t.parsed.y || 0, r = i.parsed.y || 0;
|
|
174
181
|
return a === r ? 0 : a > r ? -1 : 1;
|
|
175
182
|
}
|
|
@@ -181,7 +188,7 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
181
188
|
responsive: !0,
|
|
182
189
|
maintainAspectRatio: !1,
|
|
183
190
|
layout: {
|
|
184
|
-
padding:
|
|
191
|
+
padding: Re
|
|
185
192
|
},
|
|
186
193
|
// basic styles
|
|
187
194
|
elements: {
|
|
@@ -190,12 +197,12 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
190
197
|
tension: 0.3
|
|
191
198
|
},
|
|
192
199
|
point: {
|
|
193
|
-
radius:
|
|
200
|
+
radius: B.value ? 3 : 1,
|
|
194
201
|
hitRadius: 8,
|
|
195
202
|
borderWidth: 0,
|
|
196
203
|
hoverRadius: 4,
|
|
197
204
|
hoverBorderWidth: 2,
|
|
198
|
-
pointHoverBackgroundColor:
|
|
205
|
+
pointHoverBackgroundColor: Be
|
|
199
206
|
},
|
|
200
207
|
bar: {
|
|
201
208
|
borderRadius: 4
|
|
@@ -205,31 +212,31 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
205
212
|
// Horizontal Axis (X)
|
|
206
213
|
x: {
|
|
207
214
|
beginAtZero: !0,
|
|
208
|
-
offset: !
|
|
215
|
+
offset: !g.value || B.value,
|
|
209
216
|
border: { display: !1 },
|
|
210
|
-
stacked:
|
|
217
|
+
stacked: b.value,
|
|
211
218
|
// stack on top of each other
|
|
212
219
|
// ticks
|
|
213
220
|
ticks: {
|
|
214
|
-
color:
|
|
215
|
-
font:
|
|
221
|
+
color: N,
|
|
222
|
+
font: F,
|
|
216
223
|
padding: 4,
|
|
217
224
|
maxRotation: 0,
|
|
218
225
|
autoSkip: !e.truncateTickLabels,
|
|
219
226
|
autoSkipPadding: 8,
|
|
220
227
|
callback: function(t, i, a) {
|
|
221
|
-
const r = this.getLabelForValue(t),
|
|
222
|
-
return
|
|
228
|
+
const r = this.getLabelForValue(t), ee = g.value && !f.value ? a.length - 1 : a.length, te = this.chart.scales?.x?.width / ee - De;
|
|
229
|
+
return _({
|
|
223
230
|
label: r,
|
|
224
231
|
format: e.xAxisFormat,
|
|
225
|
-
availableSpace:
|
|
232
|
+
availableSpace: te,
|
|
226
233
|
truncate: e.truncateTickLabels
|
|
227
234
|
});
|
|
228
235
|
}
|
|
229
236
|
},
|
|
230
237
|
// grid lines
|
|
231
238
|
grid: {
|
|
232
|
-
color:
|
|
239
|
+
color: K,
|
|
233
240
|
drawOnChartArea: !1,
|
|
234
241
|
drawTicks: !0,
|
|
235
242
|
drawBorder: !1,
|
|
@@ -241,88 +248,81 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
241
248
|
beginAtZero: !0,
|
|
242
249
|
border: { display: !1 },
|
|
243
250
|
// hide left borderline
|
|
244
|
-
stacked:
|
|
251
|
+
stacked: b.value,
|
|
245
252
|
// stack on top of each other
|
|
246
253
|
// ticks
|
|
247
254
|
ticks: {
|
|
248
|
-
color:
|
|
249
|
-
font:
|
|
255
|
+
color: N,
|
|
256
|
+
font: F,
|
|
257
|
+
count: e.tickCount + 1,
|
|
250
258
|
padding: 8,
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
max: P.value * e.tickCount,
|
|
254
|
-
callback: (t) => Be(t, e.yAxisFormat)
|
|
259
|
+
min: 0,
|
|
260
|
+
callback: (t) => e.valuePrefix + Le(t, e.yAxisFormat) + e.valueSuffix
|
|
255
261
|
},
|
|
256
262
|
// grid lines
|
|
257
263
|
grid: {
|
|
258
|
-
color:
|
|
264
|
+
color: K,
|
|
259
265
|
drawOnChartArea: !0,
|
|
260
266
|
drawTicks: !1
|
|
261
267
|
}
|
|
262
268
|
}
|
|
263
269
|
}
|
|
264
270
|
}
|
|
265
|
-
})),
|
|
271
|
+
})), I = k(null), u = k(null), { position: H } = Ve(
|
|
266
272
|
m,
|
|
267
|
-
|
|
268
|
-
|
|
273
|
+
I,
|
|
274
|
+
u,
|
|
269
275
|
e.tooltipRespectsTopEdge
|
|
270
|
-
),
|
|
271
|
-
left: `${
|
|
272
|
-
top: `${
|
|
273
|
-
opacity:
|
|
274
|
-
})),
|
|
275
|
-
|
|
276
|
-
dataSets: y,
|
|
277
|
-
isStacked: v
|
|
278
|
-
}), P = l(
|
|
279
|
-
() => De(w.value, Q.value, e.tickCount)
|
|
280
|
-
), ee = l(
|
|
281
|
-
() => (e.compactHeader ? Pe : we) + "px"
|
|
276
|
+
), j = l(() => ({
|
|
277
|
+
left: `${H.value.left}px`,
|
|
278
|
+
top: `${H.value.top}px`,
|
|
279
|
+
opacity: u.value?.opacity || 0
|
|
280
|
+
})), q = l(
|
|
281
|
+
() => (e.compactHeader ? Ie : Oe) + "px"
|
|
282
282
|
);
|
|
283
|
-
|
|
283
|
+
v(
|
|
284
284
|
() => e.highlightedId,
|
|
285
285
|
(t) => {
|
|
286
|
-
n && (
|
|
286
|
+
n && ($e(t) ? Q() : J(t), n.update());
|
|
287
287
|
}
|
|
288
288
|
);
|
|
289
|
-
const
|
|
289
|
+
const J = (t) => {
|
|
290
290
|
(n?.data.datasets || []).forEach((a) => {
|
|
291
|
-
|
|
292
|
-
const r = a[
|
|
293
|
-
a.id === t ? e.chartType ===
|
|
291
|
+
ze(a);
|
|
292
|
+
const r = a[V];
|
|
293
|
+
a.id === t ? e.chartType === d.StackedLine && (a.backgroundColor = h(
|
|
294
294
|
r,
|
|
295
|
-
|
|
296
|
-
)) : (a.backgroundColor = h(r,
|
|
295
|
+
He
|
|
296
|
+
)) : (a.backgroundColor = h(r, y), a.borderColor = h(r, y), a.pointBackgroundColor = h(r, y), a.pointHoverBorderColor = h(r, y));
|
|
297
297
|
});
|
|
298
|
-
},
|
|
299
|
-
(n?.data.datasets || []).forEach(
|
|
298
|
+
}, Q = () => {
|
|
299
|
+
(n?.data.datasets || []).forEach(We);
|
|
300
300
|
};
|
|
301
|
-
return (t, i) => (
|
|
302
|
-
s(
|
|
303
|
-
|
|
304
|
-
"chart-type": s(
|
|
305
|
-
"onUpdate:chart-type": i[0] || (i[0] = (a) =>
|
|
306
|
-
"type-switcher": s(
|
|
307
|
-
header: s(
|
|
301
|
+
return (t, i) => (p(), A("div", Ze, [
|
|
302
|
+
s(c) || o.keepSubheaderVisible ? (p(), A("div", Xe, [
|
|
303
|
+
ie(Fe, {
|
|
304
|
+
"chart-type": s(T),
|
|
305
|
+
"onUpdate:chart-type": i[0] || (i[0] = (a) => ne(T) ? T.value = a : null),
|
|
306
|
+
"type-switcher": s(c) ? o.typeSwitcher : !1,
|
|
307
|
+
header: s(c) ? o.header : null,
|
|
308
308
|
subheader: o.subheader,
|
|
309
309
|
"subheader-tooltip": o.subheaderTooltip,
|
|
310
310
|
"trend-tooltip": o.trendTooltip,
|
|
311
311
|
compact: o.compactHeader,
|
|
312
|
-
"trend-value": s(
|
|
312
|
+
"trend-value": s(c) ? o.trendValue : null,
|
|
313
313
|
"trend-direction": o.trendDirection
|
|
314
|
-
},
|
|
314
|
+
}, se({ _: 2 }, [
|
|
315
315
|
t.$slots["subheader-tooltip"] ? {
|
|
316
316
|
name: "subheader-tooltip",
|
|
317
|
-
fn:
|
|
318
|
-
|
|
317
|
+
fn: de(() => [
|
|
318
|
+
ue(t.$slots, "subheader-tooltip", {}, void 0, !0)
|
|
319
319
|
]),
|
|
320
320
|
key: "0"
|
|
321
321
|
} : void 0
|
|
322
322
|
]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction"])
|
|
323
|
-
])) :
|
|
324
|
-
s(
|
|
325
|
-
L("div",
|
|
323
|
+
])) : S("", !0),
|
|
324
|
+
s(c) ? (p(), A("section", je, [
|
|
325
|
+
L("div", qe, [
|
|
326
326
|
L("canvas", {
|
|
327
327
|
ref_key: "chartRef",
|
|
328
328
|
ref: m,
|
|
@@ -330,39 +330,39 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
330
330
|
}, null, 512),
|
|
331
331
|
L("div", {
|
|
332
332
|
ref_key: "tooltipRef",
|
|
333
|
-
ref:
|
|
333
|
+
ref: I,
|
|
334
334
|
class: "chart__tooltip",
|
|
335
|
-
style:
|
|
335
|
+
style: ce(s(j))
|
|
336
336
|
}, [
|
|
337
|
-
|
|
337
|
+
u.value ? (p(), E(Ne, {
|
|
338
338
|
key: 0,
|
|
339
|
-
"totals-chart": s(
|
|
340
|
-
title: String(
|
|
341
|
-
"data-points":
|
|
339
|
+
"totals-chart": s(f),
|
|
340
|
+
title: String(u.value.title),
|
|
341
|
+
"data-points": u.value.dataPoints,
|
|
342
342
|
"x-axis-format": o.xAxisFormat,
|
|
343
343
|
"y-axis-format": o.yAxisFormat,
|
|
344
344
|
"x-axis-date-interval": o.xAxisDateInterval,
|
|
345
|
-
"total-label":
|
|
346
|
-
"total-value": Number(
|
|
345
|
+
"total-label": u.value.footer?.[0],
|
|
346
|
+
"total-value": Number(u.value.footer?.[1]),
|
|
347
347
|
"value-suffix": o.valueSuffix,
|
|
348
348
|
"value-prefix": o.valuePrefix
|
|
349
|
-
}, null, 8, ["totals-chart", "title", "data-points", "x-axis-format", "y-axis-format", "x-axis-date-interval", "total-label", "total-value", "value-suffix", "value-prefix"])) :
|
|
349
|
+
}, null, 8, ["totals-chart", "title", "data-points", "x-axis-format", "y-axis-format", "x-axis-date-interval", "total-label", "total-value", "value-suffix", "value-prefix"])) : S("", !0)
|
|
350
350
|
], 4)
|
|
351
351
|
])
|
|
352
|
-
])) : o.loading ? (
|
|
352
|
+
])) : o.loading ? (p(), E(Ye, {
|
|
353
353
|
key: 2,
|
|
354
354
|
class: "chart-loading"
|
|
355
|
-
})) : s(R) ? (
|
|
355
|
+
})) : s(R) ? (p(), E(s(Ue), {
|
|
356
356
|
key: 3,
|
|
357
357
|
class: "chart-empty",
|
|
358
358
|
variant: null,
|
|
359
359
|
title: o.noDataTitle,
|
|
360
360
|
subtitle: o.noDataSubtitle,
|
|
361
361
|
"icon-name": o.noDataIcon
|
|
362
|
-
}, null, 8, ["title", "subtitle", "icon-name"])) :
|
|
362
|
+
}, null, 8, ["title", "subtitle", "icon-name"])) : S("", !0)
|
|
363
363
|
]));
|
|
364
364
|
}
|
|
365
365
|
});
|
|
366
366
|
export {
|
|
367
|
-
|
|
367
|
+
mt as default
|
|
368
368
|
};
|