@ironsource/shared-ui 2.1.12-test.80 → 2.1.12-test.82
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/DataGrid.vue_vue_type_style_index_0_scoped_0963bb3c_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 -154
- package/components/chart/index.d.ts +24 -24
- package/components/chart/utils/utils.d.ts +0 -1
- package/components/chart/utils/utils.js +13 -19
- package/components/dropdown/v4/OptionV4.vue.js +3 -3
- package/components/dropdown/v4/OptionV4.vue2.js +35 -34
- 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 +4 -4
- package/components/table/v4/DataGrid.vue2.js +4 -4
- package/index.d.ts +36 -0
- package/mocks/optionsWithIcons.d.ts +1 -0
- package/package.json +1 -1
- package/ChartPlane.vue_vue_type_style_index_0_scoped_e2c0c2af_lang.css +0 -1
- package/DataGrid.vue_vue_type_style_index_0_scoped_5b72e35a_lang.css +0 -1
- package/OptionV4.vue_vue_type_style_index_0_scoped_a8de6151_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
|
+
.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
|
+
.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,72 +60,72 @@ 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
|
-
|
|
72
|
-
|
|
69
|
+
const _ = Ke(Se);
|
|
70
|
+
P.register(
|
|
71
|
+
fe,
|
|
72
|
+
pe,
|
|
73
|
+
he,
|
|
73
74
|
me,
|
|
75
|
+
ve,
|
|
74
76
|
ye,
|
|
75
77
|
Te,
|
|
76
78
|
Ce,
|
|
77
|
-
ge,
|
|
78
79
|
be,
|
|
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
|
|
91
|
-
|
|
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
|
-
}),
|
|
94
|
+
le(C), v(() => e.chartType, C), v(c, async (t) => {
|
|
95
|
+
t && (await re(), C());
|
|
96
|
+
}), v(
|
|
98
97
|
[
|
|
99
98
|
() => e.visibleIds,
|
|
100
99
|
() => e.dataSets,
|
|
101
100
|
() => e.valuePrefix,
|
|
102
101
|
() => e.valueSuffix
|
|
103
102
|
],
|
|
104
|
-
|
|
103
|
+
$
|
|
105
104
|
);
|
|
106
|
-
const
|
|
107
|
-
() => e.chartType ===
|
|
108
|
-
),
|
|
109
|
-
() => e.chartType ===
|
|
110
|
-
),
|
|
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) => ({
|
|
111
110
|
...t,
|
|
112
111
|
data: t.data.map((i) => ({
|
|
113
112
|
...i,
|
|
114
|
-
[
|
|
113
|
+
[w]: t.label
|
|
115
114
|
}))
|
|
116
|
-
})) : e.dataSets),
|
|
117
|
-
() =>
|
|
118
|
-
),
|
|
119
|
-
() =>
|
|
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(
|
|
120
119
|
(t) => t.data.length === 1
|
|
121
120
|
)
|
|
122
|
-
),
|
|
123
|
-
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;
|
|
124
123
|
return {
|
|
125
124
|
...t,
|
|
126
125
|
fill: r,
|
|
127
126
|
backgroundColor: h(
|
|
128
127
|
a,
|
|
129
|
-
e.chartType ===
|
|
128
|
+
e.chartType === d.StackedLine ? 10 : 70
|
|
130
129
|
),
|
|
131
130
|
borderColor: a,
|
|
132
131
|
pointBackgroundColor: a,
|
|
@@ -136,36 +135,36 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
136
135
|
// draw a bit outside the chart area
|
|
137
136
|
icon: t.icon || null,
|
|
138
137
|
iconType: t.iconType || "branded",
|
|
139
|
-
[
|
|
138
|
+
[V]: a
|
|
140
139
|
// store base color for later use
|
|
141
140
|
};
|
|
142
|
-
})),
|
|
143
|
-
() => e.tooltipTotalType ===
|
|
144
|
-
),
|
|
145
|
-
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",
|
|
146
145
|
// Chart Data
|
|
147
146
|
data: {
|
|
148
|
-
datasets:
|
|
147
|
+
datasets: D.value
|
|
149
148
|
},
|
|
150
149
|
// Chart Options
|
|
151
150
|
options: {
|
|
152
|
-
parsing:
|
|
151
|
+
parsing: z.value,
|
|
153
152
|
interaction: {
|
|
154
153
|
intersect: !1,
|
|
155
|
-
mode:
|
|
154
|
+
mode: f.value ? "point" : "index",
|
|
156
155
|
axis: "x"
|
|
157
156
|
},
|
|
158
157
|
// plugins
|
|
159
158
|
plugins: {
|
|
160
159
|
legend: { display: !1 },
|
|
161
160
|
title: { display: !1 },
|
|
162
|
-
hoverVerticalLine:
|
|
161
|
+
hoverVerticalLine: g.value,
|
|
163
162
|
// tooltip
|
|
164
163
|
tooltip: {
|
|
165
164
|
enabled: !1,
|
|
166
165
|
position: "average",
|
|
167
166
|
external: ({ tooltip: t }) => {
|
|
168
|
-
|
|
167
|
+
u.value = { ...t };
|
|
169
168
|
},
|
|
170
169
|
callbacks: {
|
|
171
170
|
footer: (t) => {
|
|
@@ -173,11 +172,11 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
173
172
|
i,
|
|
174
173
|
e.tooltipTotalType
|
|
175
174
|
);
|
|
176
|
-
return [
|
|
175
|
+
return [X.value, String(a)];
|
|
177
176
|
}
|
|
178
177
|
},
|
|
179
178
|
itemSort: (t, i) => {
|
|
180
|
-
if (e.tooltipOrder ===
|
|
179
|
+
if (e.tooltipOrder === M.YAxis) {
|
|
181
180
|
const a = t.parsed.y || 0, r = i.parsed.y || 0;
|
|
182
181
|
return a === r ? 0 : a > r ? -1 : 1;
|
|
183
182
|
}
|
|
@@ -189,7 +188,7 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
189
188
|
responsive: !0,
|
|
190
189
|
maintainAspectRatio: !1,
|
|
191
190
|
layout: {
|
|
192
|
-
padding:
|
|
191
|
+
padding: Re
|
|
193
192
|
},
|
|
194
193
|
// basic styles
|
|
195
194
|
elements: {
|
|
@@ -198,12 +197,12 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
198
197
|
tension: 0.3
|
|
199
198
|
},
|
|
200
199
|
point: {
|
|
201
|
-
radius:
|
|
200
|
+
radius: B.value ? 3 : 1,
|
|
202
201
|
hitRadius: 8,
|
|
203
202
|
borderWidth: 0,
|
|
204
203
|
hoverRadius: 4,
|
|
205
204
|
hoverBorderWidth: 2,
|
|
206
|
-
pointHoverBackgroundColor:
|
|
205
|
+
pointHoverBackgroundColor: Be
|
|
207
206
|
},
|
|
208
207
|
bar: {
|
|
209
208
|
borderRadius: 4
|
|
@@ -213,31 +212,31 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
213
212
|
// Horizontal Axis (X)
|
|
214
213
|
x: {
|
|
215
214
|
beginAtZero: !0,
|
|
216
|
-
offset: !
|
|
215
|
+
offset: !g.value || B.value,
|
|
217
216
|
border: { display: !1 },
|
|
218
|
-
stacked:
|
|
217
|
+
stacked: b.value,
|
|
219
218
|
// stack on top of each other
|
|
220
219
|
// ticks
|
|
221
220
|
ticks: {
|
|
222
|
-
color:
|
|
223
|
-
font:
|
|
221
|
+
color: N,
|
|
222
|
+
font: F,
|
|
224
223
|
padding: 4,
|
|
225
224
|
maxRotation: 0,
|
|
226
225
|
autoSkip: !e.truncateTickLabels,
|
|
227
226
|
autoSkipPadding: 8,
|
|
228
227
|
callback: function(t, i, a) {
|
|
229
|
-
const r = this.getLabelForValue(t),
|
|
230
|
-
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 _({
|
|
231
230
|
label: r,
|
|
232
231
|
format: e.xAxisFormat,
|
|
233
|
-
availableSpace:
|
|
232
|
+
availableSpace: te,
|
|
234
233
|
truncate: e.truncateTickLabels
|
|
235
234
|
});
|
|
236
235
|
}
|
|
237
236
|
},
|
|
238
237
|
// grid lines
|
|
239
238
|
grid: {
|
|
240
|
-
color:
|
|
239
|
+
color: K,
|
|
241
240
|
drawOnChartArea: !1,
|
|
242
241
|
drawTicks: !0,
|
|
243
242
|
drawBorder: !1,
|
|
@@ -249,133 +248,121 @@ const Qe = { class: "chart-plane-container" }, et = {
|
|
|
249
248
|
beginAtZero: !0,
|
|
250
249
|
border: { display: !1 },
|
|
251
250
|
// hide left borderline
|
|
252
|
-
stacked:
|
|
251
|
+
stacked: b.value,
|
|
253
252
|
// stack on top of each other
|
|
254
253
|
// ticks
|
|
255
254
|
ticks: {
|
|
256
|
-
color:
|
|
257
|
-
font:
|
|
255
|
+
color: N,
|
|
256
|
+
font: F,
|
|
257
|
+
count: e.tickCount + 1,
|
|
258
258
|
padding: 8,
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
max: S.value * e.tickCount,
|
|
262
|
-
callback: (t) => e.valuePrefix + Be(t, e.yAxisFormat, S.value < 1) + e.valueSuffix
|
|
259
|
+
min: 0,
|
|
260
|
+
callback: (t) => e.valuePrefix + Le(t, e.yAxisFormat) + e.valueSuffix
|
|
263
261
|
},
|
|
264
262
|
// grid lines
|
|
265
263
|
grid: {
|
|
266
|
-
color:
|
|
264
|
+
color: K,
|
|
267
265
|
drawOnChartArea: !0,
|
|
268
266
|
drawTicks: !1
|
|
269
267
|
}
|
|
270
268
|
}
|
|
271
269
|
}
|
|
272
270
|
}
|
|
273
|
-
})),
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
271
|
+
})), I = k(null), u = k(null), { position: H } = Ve(
|
|
272
|
+
m,
|
|
273
|
+
I,
|
|
274
|
+
u,
|
|
277
275
|
e.tooltipRespectsTopEdge
|
|
278
|
-
),
|
|
279
|
-
left: `${
|
|
280
|
-
top: `${
|
|
281
|
-
opacity:
|
|
282
|
-
})),
|
|
283
|
-
|
|
284
|
-
dataSets: y,
|
|
285
|
-
isStacked: m
|
|
286
|
-
}), S = l(() => {
|
|
287
|
-
const t = De(
|
|
288
|
-
isNaN(k.value) ? 0 : k.value,
|
|
289
|
-
isNaN(w.value) ? 0 : w.value,
|
|
290
|
-
e.tickCount
|
|
291
|
-
);
|
|
292
|
-
return console.log("stepSize", t), t;
|
|
293
|
-
}), ee = l(
|
|
294
|
-
() => (e.compactHeader ? Ne : Ve) + "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"
|
|
295
282
|
);
|
|
296
|
-
|
|
283
|
+
v(
|
|
297
284
|
() => e.highlightedId,
|
|
298
285
|
(t) => {
|
|
299
|
-
n && (
|
|
286
|
+
n && ($e(t) ? Q() : J(t), n.update());
|
|
300
287
|
}
|
|
301
288
|
);
|
|
302
|
-
const
|
|
289
|
+
const J = (t) => {
|
|
303
290
|
(n?.data.datasets || []).forEach((a) => {
|
|
304
|
-
|
|
305
|
-
const r = a[
|
|
306
|
-
a.id === t ? e.chartType ===
|
|
291
|
+
ze(a);
|
|
292
|
+
const r = a[V];
|
|
293
|
+
a.id === t ? e.chartType === d.StackedLine && (a.backgroundColor = h(
|
|
307
294
|
r,
|
|
308
|
-
|
|
309
|
-
)) : (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));
|
|
310
297
|
});
|
|
311
|
-
},
|
|
312
|
-
(n?.data.datasets || []).forEach(
|
|
298
|
+
}, Q = () => {
|
|
299
|
+
(n?.data.datasets || []).forEach(We);
|
|
313
300
|
};
|
|
314
|
-
return (t, i) => (
|
|
315
|
-
s(
|
|
316
|
-
|
|
317
|
-
"chart-type": s(
|
|
318
|
-
"onUpdate:chart-type": i[0] || (i[0] = (a) =>
|
|
319
|
-
"type-switcher": s(
|
|
320
|
-
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,
|
|
321
308
|
subheader: o.subheader,
|
|
322
309
|
"subheader-tooltip": o.subheaderTooltip,
|
|
323
310
|
"trend-tooltip": o.trendTooltip,
|
|
324
311
|
compact: o.compactHeader,
|
|
325
|
-
"trend-value": s(
|
|
312
|
+
"trend-value": s(c) ? o.trendValue : null,
|
|
326
313
|
"trend-direction": o.trendDirection
|
|
327
|
-
},
|
|
314
|
+
}, se({ _: 2 }, [
|
|
328
315
|
t.$slots["subheader-tooltip"] ? {
|
|
329
316
|
name: "subheader-tooltip",
|
|
330
|
-
fn:
|
|
331
|
-
|
|
317
|
+
fn: de(() => [
|
|
318
|
+
ue(t.$slots, "subheader-tooltip", {}, void 0, !0)
|
|
332
319
|
]),
|
|
333
320
|
key: "0"
|
|
334
321
|
} : void 0
|
|
335
322
|
]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction"])
|
|
336
|
-
])) :
|
|
337
|
-
s(
|
|
338
|
-
|
|
339
|
-
|
|
323
|
+
])) : S("", !0),
|
|
324
|
+
s(c) ? (p(), A("section", je, [
|
|
325
|
+
L("div", qe, [
|
|
326
|
+
L("canvas", {
|
|
340
327
|
ref_key: "chartRef",
|
|
341
|
-
ref:
|
|
328
|
+
ref: m,
|
|
342
329
|
class: "chart__canvas"
|
|
343
330
|
}, null, 512),
|
|
344
|
-
|
|
331
|
+
L("div", {
|
|
345
332
|
ref_key: "tooltipRef",
|
|
346
|
-
ref:
|
|
333
|
+
ref: I,
|
|
347
334
|
class: "chart__tooltip",
|
|
348
|
-
style:
|
|
335
|
+
style: ce(s(j))
|
|
349
336
|
}, [
|
|
350
|
-
|
|
337
|
+
u.value ? (p(), E(Ne, {
|
|
351
338
|
key: 0,
|
|
352
|
-
"totals-chart": s(
|
|
353
|
-
title: String(
|
|
354
|
-
"data-points":
|
|
339
|
+
"totals-chart": s(f),
|
|
340
|
+
title: String(u.value.title),
|
|
341
|
+
"data-points": u.value.dataPoints,
|
|
355
342
|
"x-axis-format": o.xAxisFormat,
|
|
356
343
|
"y-axis-format": o.yAxisFormat,
|
|
357
344
|
"x-axis-date-interval": o.xAxisDateInterval,
|
|
358
|
-
"total-label":
|
|
359
|
-
"total-value": Number(
|
|
345
|
+
"total-label": u.value.footer?.[0],
|
|
346
|
+
"total-value": Number(u.value.footer?.[1]),
|
|
360
347
|
"value-suffix": o.valueSuffix,
|
|
361
348
|
"value-prefix": o.valuePrefix
|
|
362
|
-
}, 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)
|
|
363
350
|
], 4)
|
|
364
351
|
])
|
|
365
|
-
])) : o.loading ? (
|
|
352
|
+
])) : o.loading ? (p(), E(Ye, {
|
|
366
353
|
key: 2,
|
|
367
354
|
class: "chart-loading"
|
|
368
|
-
})) : s(
|
|
355
|
+
})) : s(R) ? (p(), E(s(Ue), {
|
|
369
356
|
key: 3,
|
|
370
357
|
class: "chart-empty",
|
|
371
358
|
variant: null,
|
|
372
359
|
title: o.noDataTitle,
|
|
373
360
|
subtitle: o.noDataSubtitle,
|
|
374
361
|
"icon-name": o.noDataIcon
|
|
375
|
-
}, null, 8, ["title", "subtitle", "icon-name"])) :
|
|
362
|
+
}, null, 8, ["title", "subtitle", "icon-name"])) : S("", !0)
|
|
376
363
|
]));
|
|
377
364
|
}
|
|
378
365
|
});
|
|
379
366
|
export {
|
|
380
|
-
|
|
367
|
+
mt as default
|
|
381
368
|
};
|