@ironsource/shared-ui 2.1.12-test.80 → 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_e2c0c2af_lang.css"; //*');
4
- const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-e2c0c2af"]]);
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_e2c0c2af_lang.css"; import { defineComponent as re, useCssVars as ie, unref as s, computed as l, ref as A, onMounted as ne, watch as T, 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 ge, PieController as be, 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 z, TICK_LABEL_FONT as U, 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 C } 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 ze 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 Ue } 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" }, bt = /* @__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,66 +60,66 @@ 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
- "1ade29c0": s(ee),
68
- "0866490b": 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,
77
- ge,
78
79
  be,
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), b = () => {
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(b), T(() => e.chartType, b), T(d, async (t) => {
96
- t && (await se(), b());
97
- }), T(
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
- X
103
+ $
105
104
  );
106
- const p = l(() => e.totalsChart), m = l(
107
- () => e.chartType === u.StackedLine || e.chartType === u.StackedBar || p.value
108
- ), x = l(
105
+ const f = l(() => e.totalsChart), b = l(
106
+ () => e.chartType === u.StackedLine || e.chartType === u.StackedBar || f.value
107
+ ), g = l(
109
108
  () => e.chartType === u.Line || e.chartType === u.StackedLine
110
- ), 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) => ({
111
110
  ...t,
112
111
  data: t.data.map((i) => ({
113
112
  ...i,
114
- [K]: t.label
113
+ [w]: t.label
115
114
  }))
116
- })) : e.dataSets), y = l(
117
- () => j.value.filter((t) => e.visibleIds.includes(t.id))
118
- ), q = (t) => e.colorsMap[t] || Ze, I = l(
119
- () => 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(
120
119
  (t) => t.data.length === 1
121
120
  )
122
- ), H = l(() => y.value.map((t, i) => {
123
- 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;
124
123
  return {
125
124
  ...t,
126
125
  fill: r,
@@ -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
- [M]: a
138
+ [V]: a
140
139
  // store base color for later use
141
140
  };
142
- })), J = l(
143
- () => e.tooltipTotalType === G.Total ? "Total" : "Mean"
144
- ), P = l(() => ({
141
+ })), X = l(
142
+ () => e.tooltipTotalType === U.Total ? "Total" : "Mean"
143
+ ), O = l(() => ({
145
144
  type: e.chartType == u.Bar || e.chartType === u.StackedBar ? "bar" : "line",
146
145
  // Chart Data
147
146
  data: {
148
- datasets: H.value
147
+ datasets: D.value
149
148
  },
150
149
  // Chart Options
151
150
  options: {
152
- parsing: O.value,
151
+ parsing: z.value,
153
152
  interaction: {
154
153
  intersect: !1,
155
- mode: p.value ? "point" : "index",
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: x.value,
161
+ hoverVerticalLine: g.value,
163
162
  // tooltip
164
163
  tooltip: {
165
164
  enabled: !1,
166
165
  position: "average",
167
166
  external: ({ tooltip: t }) => {
168
- c.value = { ...t };
167
+ d.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 [J.value, String(a)];
175
+ return [X.value, String(a)];
177
176
  }
178
177
  },
179
178
  itemSort: (t, i) => {
180
- if (e.tooltipOrder === _.YAxis) {
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: Ie
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: I.value ? 3 : 1,
200
+ radius: B.value ? 3 : 1,
202
201
  hitRadius: 8,
203
202
  borderWidth: 0,
204
203
  hoverRadius: 4,
205
204
  hoverBorderWidth: 2,
206
- pointHoverBackgroundColor: He
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: !x.value || I.value,
215
+ offset: !g.value || B.value,
217
216
  border: { display: !1 },
218
- stacked: m.value,
217
+ stacked: b.value,
219
218
  // stack on top of each other
220
219
  // ticks
221
220
  ticks: {
222
- color: z,
223
- font: U,
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), oe = x.value && !p.value ? a.length - 1 : a.length, le = this.chart.scales?.x?.width / oe - Pe;
230
- 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 _({
231
230
  label: r,
232
231
  format: e.xAxisFormat,
233
- availableSpace: le,
232
+ availableSpace: te,
234
233
  truncate: e.truncateTickLabels
235
234
  });
236
235
  }
237
236
  },
238
237
  // grid lines
239
238
  grid: {
240
- color: Y,
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: m.value,
251
+ stacked: b.value,
253
252
  // stack on top of each other
254
253
  // ticks
255
254
  ticks: {
256
- color: z,
257
- font: U,
255
+ color: N,
256
+ font: F,
257
+ count: e.tickCount + 1,
258
258
  padding: 8,
259
- stepSize: S.value,
260
- min: k.value,
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: Y,
264
+ color: K,
267
265
  drawOnChartArea: !0,
268
266
  drawTicks: !1
269
267
  }
270
268
  }
271
269
  }
272
270
  }
273
- })), V = A(null), c = A(null), { position: N } = Me(
274
- v,
275
- V,
276
- c,
271
+ })), I = k(null), d = k(null), { position: H } = Ve(
272
+ m,
273
+ I,
274
+ d,
277
275
  e.tooltipRespectsTopEdge
278
- ), Q = l(() => ({
279
- left: `${N.value.left}px`,
280
- top: `${N.value.top}px`,
281
- opacity: c.value?.opacity || 0
282
- })), { minValue: k, maxValue: w } = Ue({
283
- parsingConfig: O.value,
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: d.value?.opacity || 0
280
+ })), q = l(
281
+ () => (e.compactHeader ? Ie : Oe) + "px"
295
282
  );
296
- T(
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, C), a.borderColor = h(r, C), a.pointBackgroundColor = h(r, C), a.pointHoverBorderColor = h(r, C));
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(ze, {
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
- bt 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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ironsource/shared-ui",
3
- "version": "2.1.12-test.80",
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-e2c0c2af]{--headerHeight: var(--1ade29c0);width:100%;height:var(--0866490b);position:relative}.header-wrapper[data-v-e2c0c2af]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-e2c0c2af]{padding-top:var(--headerHeight);height:100%}.chart[data-v-e2c0c2af]{width:100%;height:100%;position:relative}.chart__canvas[data-v-e2c0c2af]{width:100%;height:100%}.chart__tooltip[data-v-e2c0c2af]{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
- };