@ironsource/shared-ui 2.1.12-test.79 → 2.1.12-test.81

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.
@@ -0,0 +1 @@
1
+ .chart-plane-container[data-v-d6b5dadd]{--headerHeight: var(--3fe18254);width:100%;height:var(--87e95782);position:relative}.header-wrapper[data-v-d6b5dadd]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-d6b5dadd]{padding-top:var(--headerHeight);height:100%}.chart[data-v-d6b5dadd]{width:100%;height:100%;position:relative}.chart__canvas[data-v-d6b5dadd]{width:100%;height:100%}.chart__tooltip[data-v-d6b5dadd]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}
@@ -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
- import e from "./ChartPlane.vue2.js";
2
- /* empty css */import o from "../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../ChartPlane.vue_vue_type_style_index_0_scoped_c6aaec38_lang.css"; //*');
4
- const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-c6aaec38"]]);
1
+ import o from "./ChartPlane.vue2.js";
2
+ /* empty css */import d from "../../_virtual/_plugin-vue_export-helper.js";
3
+ // import "../../ChartPlane.vue_vue_type_style_index_0_scoped_d6b5dadd_lang.css"; //*');
4
+ const a = /* @__PURE__ */ d(o, [["__scopeId", "data-v-d6b5dadd"]]);
5
5
  export {
6
- c as default
6
+ a as default
7
7
  };
@@ -1,28 +1,27 @@
1
- import "../../ChartPlane.vue_vue_type_style_index_0_scoped_c6aaec38_lang.css"; import { defineComponent as re, useCssVars as ie, unref as s, computed as l, ref as A, onMounted as ne, watch as C, nextTick as se, openBlock as f, createElementBlock as L, createVNode as ue, isRef as ce, createSlots as de, withCtx as pe, renderSlot as fe, createCommentVNode as E, createElementVNode as R, normalizeStyle as he, createBlock as B } from "vue";
2
- import { Chart as F, ArcElement as ve, LineElement as me, BarElement as ye, PointElement as Te, LineController as Ce, BarController as be, PieController as ge, ScatterController as xe, CategoryScale as ke, LinearScale as Se, Filler as Ae, Tooltip as Le } from "chart.js";
3
- import { HoverVerticalLine as Ee } from "./plugins/HoverVerticalLine.js";
4
- import { prepareTickLabel as Re, formatValue as Be, calcStepSize as De } from "./utils/utils.js";
5
- import { DEFAULT_TICK_COUNT as Oe, TOTALS_HELPER_KEY as K, BASE_COLOR_KEY as M, CHART_PADDING as Ie, POINT_BORDER_COLOR as He, TICK_LABEL_COLOR as U, TICK_LABEL_FONT as z, TICKS_EXTRA_PADDING as Pe, GRID_LINE_COLOR as Y, HEADER_HEIGHT as Ve, COMPACT_HEADER_HEIGHT as Ne, HOVER_AREA_TRANSPARENCY as we, HOVER_TRANSPARENCY as b } from "./consts.js";
6
- import { ChartType as u, DateInterval as Fe, TooltipOrder as _, TrendDirection as Ke } from "./types.js";
7
- import { useTooltipPosition as Me } from "./composables/useTooltipPosition.js";
8
- import Ue from "./ChartTooltip.vue.js";
1
+ import "../../ChartPlane.vue_vue_type_style_index_0_scoped_d6b5dadd_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 ue, renderSlot as de, 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 u, 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 { useChartValues as ze } from "./composables/useChartValues.js";
11
- import Ye from "./ChartHeader.vue.js";
12
- import { useMemoize as _e, useVModel as Ge } from "@vueuse/core";
13
- import $e from "../emptyState/v4/EmptyStateV4.vue.js";
14
- import We from "./ChartLoader.vue.js";
15
- import { DEFAULT_CHART_COLOR as Ze } from "./colorPalette.js";
16
- import { TotalType as G, calculateTotal as Xe } from "../../utils/totals.js";
17
- import { isNullOrUndefined as je } from "../../utils/utils.js";
18
- import { storeOriginalDatasetColors as qe, restoreOriginalDatasetColors as Je } from "./utils/highlightUtils.js";
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
- }, tt = {
21
+ }, je = {
23
22
  key: 1,
24
23
  class: "chart-plane"
25
- }, at = { class: "chart" }, gt = /* @__PURE__ */ re({
24
+ }, qe = { class: "chart" }, mt = /* @__PURE__ */ ae({
26
25
  __name: "ChartPlane",
27
26
  props: {
28
27
  dataSets: { default: () => [] },
@@ -32,8 +31,8 @@ const Qe = { class: "chart-plane-container" }, et = {
32
31
  parsing: { default: void 0 },
33
32
  xAxisFormat: { default: "string" },
34
33
  yAxisFormat: { default: "number" },
35
- xAxisDateInterval: { default: Fe.DAILY },
36
- tickCount: { default: Oe },
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: G.Total },
53
- tooltipTotalCalcFn: { type: Function, default: Xe },
54
- tooltipOrder: { default: _.Legend },
51
+ tooltipTotalType: { default: U.Total },
52
+ tooltipTotalCalcFn: { type: Function, default: Ge },
53
+ tooltipOrder: { default: M.Legend },
55
54
  trendValue: { default: null },
56
- trendDirection: { default: Ke.UP },
55
+ trendDirection: { default: we.UP },
57
56
  trendTooltip: { default: null },
58
57
  totalsChart: { type: Boolean, default: !1 },
59
58
  colorsMap: { default: () => ({}) },
@@ -61,16 +60,19 @@ 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
- ie((t) => ({
67
- "1b72bc70": s(ee),
68
- e61db09a: o.height
65
+ oe((t) => ({
66
+ "3fe18254": s(q),
67
+ "87e95782": o.height
69
68
  }));
70
- const W = _e(Re);
71
- F.register(
72
- ve,
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,
@@ -78,50 +80,46 @@ const Qe = { class: "chart-plane-container" }, et = {
78
80
  ge,
79
81
  xe,
80
82
  ke,
81
- Se,
82
- Ae,
83
- Le,
84
- Ee
83
+ Ae
85
84
  );
86
- const g = Ge(e, "chartType", $), Z = l(
85
+ const T = Me(e, "chartType", Y), G = l(
87
86
  () => e.withAnimation ? "" : "none"
88
- ), v = A(null);
87
+ ), m = k(null);
89
88
  let n = null;
90
- const D = l(() => e.empty || e.dataSets.length === 0), d = l(() => !e.loading && !D.value), x = () => {
91
- v.value && (n && n.destroy(), n = new F(v.value, P.value));
92
- }, X = () => {
93
- n && (n.data.datasets = H.value, n.options = P.value.options, n.update(Z.value));
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
- ne(x), C(() => e.chartType, x), C(d, async (t) => {
96
- t && (await se(), x());
97
- }), C(
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
- () => e.valueSuffix,
103
- () => T.value
101
+ () => e.valueSuffix
104
102
  ],
105
- X
103
+ $
106
104
  );
107
- const p = l(() => e.totalsChart), m = l(
108
- () => e.chartType === u.StackedLine || e.chartType === u.StackedBar || p.value
109
- ), k = l(
105
+ const f = l(() => e.totalsChart), b = l(
106
+ () => e.chartType === u.StackedLine || e.chartType === u.StackedBar || f.value
107
+ ), g = l(
110
108
  () => e.chartType === u.Line || e.chartType === u.StackedLine
111
- ), O = l(() => p.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: K } : e.parsing), j = l(() => p.value ? e.dataSets.map((t) => ({
109
+ ), z = l(() => f.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: w } : e.parsing), W = l(() => f.value ? e.dataSets.map((t) => ({
112
110
  ...t,
113
111
  data: t.data.map((i) => ({
114
112
  ...i,
115
- [K]: t.label
113
+ [w]: t.label
116
114
  }))
117
- })) : e.dataSets), y = l(
118
- () => j.value.filter((t) => e.visibleIds.includes(t.id))
119
- ), q = (t) => e.colorsMap[t] || Ze, I = l(
120
- () => y.value.length && y.value.every(
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(
121
119
  (t) => t.data.length === 1
122
120
  )
123
- ), H = l(() => y.value.map((t, i) => {
124
- const a = q(t.id), r = m.value ? i !== 0 ? "-1" : "start" : void 0;
121
+ ), D = l(() => x.value.map((t, i) => {
122
+ const a = Z(t.id), r = b.value ? i !== 0 ? "-1" : "start" : void 0;
125
123
  return {
126
124
  ...t,
127
125
  fill: r,
@@ -137,36 +135,36 @@ const Qe = { class: "chart-plane-container" }, et = {
137
135
  // draw a bit outside the chart area
138
136
  icon: t.icon || null,
139
137
  iconType: t.iconType || "branded",
140
- [M]: a
138
+ [V]: a
141
139
  // store base color for later use
142
140
  };
143
- })), J = l(
144
- () => e.tooltipTotalType === G.Total ? "Total" : "Mean"
145
- ), P = l(() => ({
141
+ })), X = l(
142
+ () => e.tooltipTotalType === U.Total ? "Total" : "Mean"
143
+ ), O = l(() => ({
146
144
  type: e.chartType == u.Bar || e.chartType === u.StackedBar ? "bar" : "line",
147
145
  // Chart Data
148
146
  data: {
149
- datasets: H.value
147
+ datasets: D.value
150
148
  },
151
149
  // Chart Options
152
150
  options: {
153
- parsing: O.value,
151
+ parsing: z.value,
154
152
  interaction: {
155
153
  intersect: !1,
156
- mode: p.value ? "point" : "index",
154
+ mode: f.value ? "point" : "index",
157
155
  axis: "x"
158
156
  },
159
157
  // plugins
160
158
  plugins: {
161
159
  legend: { display: !1 },
162
160
  title: { display: !1 },
163
- hoverVerticalLine: k.value,
161
+ hoverVerticalLine: g.value,
164
162
  // tooltip
165
163
  tooltip: {
166
164
  enabled: !1,
167
165
  position: "average",
168
166
  external: ({ tooltip: t }) => {
169
- c.value = { ...t };
167
+ d.value = { ...t };
170
168
  },
171
169
  callbacks: {
172
170
  footer: (t) => {
@@ -174,11 +172,11 @@ const Qe = { class: "chart-plane-container" }, et = {
174
172
  i,
175
173
  e.tooltipTotalType
176
174
  );
177
- return [J.value, String(a)];
175
+ return [X.value, String(a)];
178
176
  }
179
177
  },
180
178
  itemSort: (t, i) => {
181
- if (e.tooltipOrder === _.YAxis) {
179
+ if (e.tooltipOrder === M.YAxis) {
182
180
  const a = t.parsed.y || 0, r = i.parsed.y || 0;
183
181
  return a === r ? 0 : a > r ? -1 : 1;
184
182
  }
@@ -190,7 +188,7 @@ const Qe = { class: "chart-plane-container" }, et = {
190
188
  responsive: !0,
191
189
  maintainAspectRatio: !1,
192
190
  layout: {
193
- padding: Ie
191
+ padding: Re
194
192
  },
195
193
  // basic styles
196
194
  elements: {
@@ -199,12 +197,12 @@ const Qe = { class: "chart-plane-container" }, et = {
199
197
  tension: 0.3
200
198
  },
201
199
  point: {
202
- radius: I.value ? 3 : 1,
200
+ radius: B.value ? 3 : 1,
203
201
  hitRadius: 8,
204
202
  borderWidth: 0,
205
203
  hoverRadius: 4,
206
204
  hoverBorderWidth: 2,
207
- pointHoverBackgroundColor: He
205
+ pointHoverBackgroundColor: Be
208
206
  },
209
207
  bar: {
210
208
  borderRadius: 4
@@ -214,31 +212,31 @@ const Qe = { class: "chart-plane-container" }, et = {
214
212
  // Horizontal Axis (X)
215
213
  x: {
216
214
  beginAtZero: !0,
217
- offset: !k.value || I.value,
215
+ offset: !g.value || B.value,
218
216
  border: { display: !1 },
219
- stacked: m.value,
217
+ stacked: b.value,
220
218
  // stack on top of each other
221
219
  // ticks
222
220
  ticks: {
223
- color: U,
224
- font: z,
221
+ color: N,
222
+ font: F,
225
223
  padding: 4,
226
224
  maxRotation: 0,
227
225
  autoSkip: !e.truncateTickLabels,
228
226
  autoSkipPadding: 8,
229
227
  callback: function(t, i, a) {
230
- const r = this.getLabelForValue(t), oe = k.value && !p.value ? a.length - 1 : a.length, le = this.chart.scales?.x?.width / oe - Pe;
231
- return W({
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 _({
232
230
  label: r,
233
231
  format: e.xAxisFormat,
234
- availableSpace: le,
232
+ availableSpace: te,
235
233
  truncate: e.truncateTickLabels
236
234
  });
237
235
  }
238
236
  },
239
237
  // grid lines
240
238
  grid: {
241
- color: Y,
239
+ color: K,
242
240
  drawOnChartArea: !1,
243
241
  drawTicks: !0,
244
242
  drawBorder: !1,
@@ -250,132 +248,121 @@ const Qe = { class: "chart-plane-container" }, et = {
250
248
  beginAtZero: !0,
251
249
  border: { display: !1 },
252
250
  // hide left borderline
253
- stacked: m.value,
251
+ stacked: b.value,
254
252
  // stack on top of each other
255
253
  // ticks
256
254
  ticks: {
257
- color: U,
258
- font: z,
255
+ color: N,
256
+ font: F,
257
+ count: e.tickCount + 1,
259
258
  padding: 8,
260
- stepSize: T.value,
261
- min: S.value,
262
- max: T.value * e.tickCount,
263
- callback: (t) => e.valuePrefix + Be(t, e.yAxisFormat, T.value < 1) + e.valueSuffix
259
+ min: 0,
260
+ callback: (t) => e.valuePrefix + Le(t, e.yAxisFormat) + e.valueSuffix
264
261
  },
265
262
  // grid lines
266
263
  grid: {
267
- color: Y,
264
+ color: K,
268
265
  drawOnChartArea: !0,
269
266
  drawTicks: !1
270
267
  }
271
268
  }
272
269
  }
273
270
  }
274
- })), V = A(null), c = A(null), { position: N } = Me(
275
- v,
276
- V,
277
- c,
271
+ })), I = k(null), d = k(null), { position: H } = Ve(
272
+ m,
273
+ I,
274
+ d,
278
275
  e.tooltipRespectsTopEdge
279
- ), Q = l(() => ({
280
- left: `${N.value.left}px`,
281
- top: `${N.value.top}px`,
282
- opacity: c.value?.opacity || 0
283
- })), { minValue: S, maxValue: w } = ze({
284
- parsingConfig: O.value,
285
- dataSets: y,
286
- isStacked: m
287
- }), T = l(
288
- () => De(
289
- isNaN(S.value) ? 0 : S.value,
290
- isNaN(w.value) ? 0 : w.value,
291
- e.tickCount
292
- )
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: d.value?.opacity || 0
280
+ })), q = l(
281
+ () => (e.compactHeader ? Ie : Oe) + "px"
295
282
  );
296
- C(
283
+ v(
297
284
  () => e.highlightedId,
298
285
  (t) => {
299
- n && (je(t) ? ae() : te(t), n.update());
286
+ n && ($e(t) ? Q() : J(t), n.update());
300
287
  }
301
288
  );
302
- const te = (t) => {
289
+ const J = (t) => {
303
290
  (n?.data.datasets || []).forEach((a) => {
304
- qe(a);
305
- const r = a[M];
291
+ ze(a);
292
+ const r = a[V];
306
293
  a.id === t ? e.chartType === u.StackedLine && (a.backgroundColor = h(
307
294
  r,
308
- we
309
- )) : (a.backgroundColor = h(r, b), a.borderColor = h(r, b), a.pointBackgroundColor = h(r, b), a.pointHoverBorderColor = h(r, b));
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
- }, ae = () => {
312
- (n?.data.datasets || []).forEach(Je);
298
+ }, Q = () => {
299
+ (n?.data.datasets || []).forEach(We);
313
300
  };
314
- return (t, i) => (f(), L("div", Qe, [
315
- s(d) || o.keepSubheaderVisible ? (f(), L("div", et, [
316
- ue(Ye, {
317
- "chart-type": s(g),
318
- "onUpdate:chart-type": i[0] || (i[0] = (a) => ce(g) ? g.value = a : null),
319
- "type-switcher": s(d) ? o.typeSwitcher : !1,
320
- header: s(d) ? o.header : null,
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(d) ? o.trendValue : null,
312
+ "trend-value": s(c) ? o.trendValue : null,
326
313
  "trend-direction": o.trendDirection
327
- }, de({ _: 2 }, [
314
+ }, se({ _: 2 }, [
328
315
  t.$slots["subheader-tooltip"] ? {
329
316
  name: "subheader-tooltip",
330
- fn: pe(() => [
331
- fe(t.$slots, "subheader-tooltip", {}, void 0, !0)
317
+ fn: ue(() => [
318
+ de(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
- ])) : E("", !0),
337
- s(d) ? (f(), L("section", tt, [
338
- R("div", at, [
339
- R("canvas", {
323
+ ])) : S("", !0),
324
+ s(c) ? (p(), A("section", je, [
325
+ L("div", qe, [
326
+ L("canvas", {
340
327
  ref_key: "chartRef",
341
- ref: v,
328
+ ref: m,
342
329
  class: "chart__canvas"
343
330
  }, null, 512),
344
- R("div", {
331
+ L("div", {
345
332
  ref_key: "tooltipRef",
346
- ref: V,
333
+ ref: I,
347
334
  class: "chart__tooltip",
348
- style: he(s(Q))
335
+ style: ce(s(j))
349
336
  }, [
350
- c.value ? (f(), B(Ue, {
337
+ d.value ? (p(), E(Ne, {
351
338
  key: 0,
352
- "totals-chart": s(p),
353
- title: String(c.value.title),
354
- "data-points": c.value.dataPoints,
339
+ "totals-chart": s(f),
340
+ title: String(d.value.title),
341
+ "data-points": d.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": c.value.footer?.[0],
359
- "total-value": Number(c.value.footer?.[1]),
345
+ "total-label": d.value.footer?.[0],
346
+ "total-value": Number(d.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"])) : E("", !0)
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 ? (f(), B(We, {
352
+ ])) : o.loading ? (p(), E(Ye, {
366
353
  key: 2,
367
354
  class: "chart-loading"
368
- })) : s(D) ? (f(), B(s($e), {
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"])) : E("", !0)
362
+ }, null, 8, ["title", "subtitle", "icon-name"])) : S("", !0)
376
363
  ]));
377
364
  }
378
365
  });
379
366
  export {
380
- gt as default
367
+ mt as default
381
368
  };
@@ -23,12 +23,12 @@ declare const ChartTypes: () => ({
23
23
  yAxisFormat: import("./types").ValueFormat;
24
24
  valueSuffix: string;
25
25
  valuePrefix: string;
26
- dataSets: import("./types").ChartDataSet[];
27
26
  trendTooltip: any;
28
27
  subheader: string;
29
28
  subheaderTooltip: any;
30
29
  trendValue: string | number;
31
30
  trendDirection: TrendDirection;
31
+ dataSets: import("./types").ChartDataSet[];
32
32
  tickCount: number;
33
33
  truncateTickLabels: boolean;
34
34
  keepSubheaderVisible: boolean;
@@ -118,11 +118,6 @@ declare const ChartTypes: () => ({
118
118
  type: import("vue").PropType<string>;
119
119
  default: string;
120
120
  };
121
- dataSets: {
122
- type: import("vue").PropType<import("./types").ChartDataSet[]>;
123
- required: true;
124
- default: () => any[];
125
- };
126
121
  trendTooltip: {
127
122
  type: import("vue").PropType<{
128
123
  header?: string;
@@ -150,6 +145,11 @@ declare const ChartTypes: () => ({
150
145
  type: import("vue").PropType<TrendDirection>;
151
146
  default: TrendDirection;
152
147
  };
148
+ dataSets: {
149
+ type: import("vue").PropType<import("./types").ChartDataSet[]>;
150
+ required: true;
151
+ default: () => any[];
152
+ };
153
153
  tickCount: {
154
154
  type: import("vue").PropType<number>;
155
155
  default: number;
@@ -214,7 +214,7 @@ declare const ChartTypes: () => ({
214
214
  "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
215
215
  "onUpdate:sortSelected"?: (sortOption: unknown) => any;
216
216
  "onUpdate:chartType"?: (chartType: ChartType) => any;
217
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "sortSelected" | "sortOptions" | "sortOptionNameKey" | "chartType" | "hideLegend" | "xAxisFormat" | "xAxisDateInterval" | "totalsChart" | "parsing" | "yAxisFormat" | "valueSuffix" | "valuePrefix" | "dataSets" | "trendTooltip" | "subheader" | "subheaderTooltip" | "trendValue" | "trendDirection" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts">;
217
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "sortSelected" | "sortOptions" | "sortOptionNameKey" | "chartType" | "hideLegend" | "xAxisFormat" | "xAxisDateInterval" | "totalsChart" | "parsing" | "yAxisFormat" | "valueSuffix" | "valuePrefix" | "trendTooltip" | "subheader" | "subheaderTooltip" | "trendValue" | "trendDirection" | "dataSets" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts">;
218
218
  $attrs: {
219
219
  [x: string]: unknown;
220
220
  };
@@ -302,11 +302,6 @@ declare const ChartTypes: () => ({
302
302
  type: import("vue").PropType<string>;
303
303
  default: string;
304
304
  };
305
- dataSets: {
306
- type: import("vue").PropType<import("./types").ChartDataSet[]>;
307
- required: true;
308
- default: () => any[];
309
- };
310
305
  trendTooltip: {
311
306
  type: import("vue").PropType<{
312
307
  header?: string;
@@ -334,6 +329,11 @@ declare const ChartTypes: () => ({
334
329
  type: import("vue").PropType<TrendDirection>;
335
330
  default: TrendDirection;
336
331
  };
332
+ dataSets: {
333
+ type: import("vue").PropType<import("./types").ChartDataSet[]>;
334
+ required: true;
335
+ default: () => any[];
336
+ };
337
337
  tickCount: {
338
338
  type: import("vue").PropType<number>;
339
339
  default: number;
@@ -421,12 +421,12 @@ declare const ChartTypes: () => ({
421
421
  yAxisFormat: import("./types").ValueFormat;
422
422
  valueSuffix: string;
423
423
  valuePrefix: string;
424
- dataSets: import("./types").ChartDataSet[];
425
424
  trendTooltip: any;
426
425
  subheader: string;
427
426
  subheaderTooltip: any;
428
427
  trendValue: string | number;
429
428
  trendDirection: TrendDirection;
429
+ dataSets: import("./types").ChartDataSet[];
430
430
  tickCount: number;
431
431
  truncateTickLabels: boolean;
432
432
  keepSubheaderVisible: boolean;
@@ -536,11 +536,6 @@ declare const ChartTypes: () => ({
536
536
  type: import("vue").PropType<string>;
537
537
  default: string;
538
538
  };
539
- dataSets: {
540
- type: import("vue").PropType<import("./types").ChartDataSet[]>;
541
- required: true;
542
- default: () => any[];
543
- };
544
539
  trendTooltip: {
545
540
  type: import("vue").PropType<{
546
541
  header?: string;
@@ -568,6 +563,11 @@ declare const ChartTypes: () => ({
568
563
  type: import("vue").PropType<TrendDirection>;
569
564
  default: TrendDirection;
570
565
  };
566
+ dataSets: {
567
+ type: import("vue").PropType<import("./types").ChartDataSet[]>;
568
+ required: true;
569
+ default: () => any[];
570
+ };
571
571
  tickCount: {
572
572
  type: import("vue").PropType<number>;
573
573
  default: number;
@@ -710,11 +710,6 @@ declare const ChartTypes: () => ({
710
710
  type: import("vue").PropType<string>;
711
711
  default: string;
712
712
  };
713
- dataSets: {
714
- type: import("vue").PropType<import("./types").ChartDataSet[]>;
715
- required: true;
716
- default: () => any[];
717
- };
718
713
  trendTooltip: {
719
714
  type: import("vue").PropType<{
720
715
  header?: string;
@@ -742,6 +737,11 @@ declare const ChartTypes: () => ({
742
737
  type: import("vue").PropType<TrendDirection>;
743
738
  default: TrendDirection;
744
739
  };
740
+ dataSets: {
741
+ type: import("vue").PropType<import("./types").ChartDataSet[]>;
742
+ required: true;
743
+ default: () => any[];
744
+ };
745
745
  tickCount: {
746
746
  type: import("vue").PropType<number>;
747
747
  default: number;
@@ -829,12 +829,12 @@ declare const ChartTypes: () => ({
829
829
  yAxisFormat: import("./types").ValueFormat;
830
830
  valueSuffix: string;
831
831
  valuePrefix: string;
832
- dataSets: import("./types").ChartDataSet[];
833
832
  trendTooltip: any;
834
833
  subheader: string;
835
834
  subheaderTooltip: any;
836
835
  trendValue: string | number;
837
836
  trendDirection: TrendDirection;
837
+ dataSets: import("./types").ChartDataSet[];
838
838
  tickCount: number;
839
839
  truncateTickLabels: boolean;
840
840
  keepSubheaderVisible: boolean;
@@ -1,4 +1,3 @@
1
1
  import { PrepareTicksLabelArgs, ValueFormat } from '@/components/chart/types';
2
- export declare const calcStepSize: (min: number, max: number, tickCount: number) => number;
3
2
  export declare const formatValue: (value: number | string | Date, valueFormat: ValueFormat, formatLowDigits?: boolean) => string;
4
3
  export declare const prepareTickLabel: ({ label, format, availableSpace, truncate, }: PrepareTicksLabelArgs) => string | string[];
@@ -1,27 +1,21 @@
1
- import { format as m } from "date-fns";
2
- import { TICK_LABEL_FONT as c } from "../consts.js";
3
- import { nFormatter as p } from "../../../utils/formatNumbers.js";
4
- import { truncateTextToFit as d } from "../../../utils/text.js";
5
- import { REGEX_LINEBREAK as i } from "../../../consts/regex.js";
6
- const g = (r, t, e) => {
7
- if (e === 0)
8
- return 0;
9
- const n = Math.max(t - r, 1), f = n / e, o = n > 1 ? f * 0.4 : 0;
10
- return (n + o) / e;
11
- }, E = (r, t, e = !1) => t === "day" ? m(new Date(r), "EEEE") : t === "number" ? p(r, e) : t === "date" ? m(new Date(r), "MMM dd") : t === "dateLong" ? m(new Date(r), "MMM dd, yyyy") : String(r), w = ({
1
+ import { format as e } from "date-fns";
2
+ import { TICK_LABEL_FONT as p } from "../consts.js";
3
+ import { nFormatter as E } from "../../../utils/formatNumbers.js";
4
+ import { truncateTextToFit as a } from "../../../utils/text.js";
5
+ import { REGEX_LINEBREAK as m } from "../../../consts/regex.js";
6
+ const c = (r, t, n = !1) => t === "day" ? e(new Date(r), "EEEE") : t === "number" ? E(r, n) : t === "date" ? e(new Date(r), "MMM dd") : t === "dateLong" ? e(new Date(r), "MMM dd, yyyy") : String(r), w = ({
12
7
  label: r,
13
8
  format: t,
14
- availableSpace: e,
15
- truncate: n = !1
9
+ availableSpace: n,
10
+ truncate: i = !1
16
11
  }) => {
17
- const f = i.test(r), o = (a) => {
18
- const s = E(a, t);
19
- return n && e > 0 ? d(s, c, e) : s;
12
+ const s = m.test(r), o = (d) => {
13
+ const f = c(d, t);
14
+ return i && n > 0 ? a(f, p, n) : f;
20
15
  };
21
- return f ? r.split(i).map(o) : o(r);
16
+ return s ? r.split(m).map(o) : o(r);
22
17
  };
23
18
  export {
24
- g as calcStepSize,
25
- E as formatValue,
19
+ c as formatValue,
26
20
  w as prepareTickLabel
27
21
  };
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import './MenuItem.vue_vue_type_style_index_0_scoped_67e53b85_lang.css';
1
+ import './AutocompleteDropdown.vue_vue_type_style_index_0_scoped_214ddaf4_lang.css';
2
2
  import { AppTriggerTypes as eo } from "./components/appTrigger/index.js";
3
3
  import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
4
4
  import { MenuItemTypes as ao } from "./components/menuItem/index.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ironsource/shared-ui",
3
- "version": "2.1.12-test.79",
3
+ "version": "2.1.12-test.81",
4
4
  "engines": {
5
5
  "npm": ">=7.0.0",
6
6
  "node": ">=16.0.0"
@@ -1 +0,0 @@
1
- .chart-plane-container[data-v-c6aaec38]{--headerHeight: var(--1b72bc70);width:100%;height:var(--e61db09a);position:relative}.header-wrapper[data-v-c6aaec38]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-c6aaec38]{padding-top:var(--headerHeight);height:100%}.chart[data-v-c6aaec38]{width:100%;height:100%;position:relative}.chart__canvas[data-v-c6aaec38]{width:100%;height:100%}.chart__tooltip[data-v-c6aaec38]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}
@@ -1,12 +0,0 @@
1
- import { Ref } from 'vue';
2
- import { ChartDataRecord, ChartDataSet, ChartParsingConfig } from '@/components/chart/types';
3
- export declare const useChartValues: ({ parsingConfig, dataSets, isStacked, }: {
4
- parsingConfig: ChartParsingConfig;
5
- dataSets: Ref<ChartDataSet[]>;
6
- isStacked: Ref<boolean>;
7
- }) => {
8
- getXValue: (record: ChartDataRecord) => unknown;
9
- getYValue: (record: ChartDataRecord) => unknown;
10
- minValue: import("vue").ComputedRef<number>;
11
- maxValue: import("vue").ComputedRef<number>;
12
- };
@@ -1,32 +0,0 @@
1
- import { computed as t } from "vue";
2
- const V = ({
3
- parsingConfig: s,
4
- dataSets: m,
5
- isStacked: v
6
- }) => {
7
- const l = (e) => e ? e[s?.yAxisKey] : null, r = (e) => e ? e[s?.xAxisKey] : null, o = t(
8
- () => m.value.flatMap(
9
- (e) => e.data.map(l)
10
- )
11
- ), p = t(() => m.value.reduce((e, n) => (n.data.forEach((a) => {
12
- const u = String(r(a));
13
- e[u] || (e[u] = []), e[u].push(l(a));
14
- }), e), {})), x = t(() => Math.min(0, ...o.value.map(Number))), h = t(() => {
15
- if (v.value) {
16
- const e = Object.values(p.value).map(
17
- (n) => n.reduce((a, u) => a + u, 0)
18
- );
19
- return Math.max(...e);
20
- }
21
- return Math.max(...o.value.map(Number));
22
- });
23
- return {
24
- getXValue: r,
25
- getYValue: l,
26
- minValue: x,
27
- maxValue: h
28
- };
29
- };
30
- export {
31
- V as useChartValues
32
- };