@ironsource/shared-ui 2.1.12-rc.15 → 2.1.12-rc.16

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.
Files changed (57) hide show
  1. package/Chart.vue_vue_type_style_index_0_scoped_4e9ce62f_lang.css +1 -0
  2. package/ChartLegend.vue_vue_type_style_index_0_scoped_fd9e4ea2_lang.css +1 -0
  3. package/ChartPlane.vue_vue_type_style_index_0_scoped_64dcfb5d_lang.css +1 -0
  4. package/ChartTooltip.vue_vue_type_style_index_0_scoped_81cdfd5e_lang.css +1 -0
  5. package/DropdownV4.vue_vue_type_style_index_0_scoped_08cb822e_lang.css +1 -0
  6. package/OptionV4.vue_vue_type_style_index_0_scoped_9cdf3a94_lang.css +1 -0
  7. package/TooltipHeader.vue_vue_type_style_index_0_scoped_40d98a66_lang.css +1 -0
  8. package/components/chart/Chart.vue.d.ts +7 -2
  9. package/components/chart/Chart.vue.js +3 -3
  10. package/components/chart/Chart.vue2.js +64 -59
  11. package/components/chart/ChartLegend.vue.d.ts +7 -0
  12. package/components/chart/ChartLegend.vue.js +3 -3
  13. package/components/chart/ChartLegend.vue2.js +75 -68
  14. package/components/chart/ChartPlane.vue.d.ts +12 -2
  15. package/components/chart/ChartPlane.vue.js +5 -5
  16. package/components/chart/ChartPlane.vue2.js +182 -156
  17. package/components/chart/ChartStoryArgs.d.ts +6 -0
  18. package/components/chart/ChartTooltip.vue.d.ts +6 -1
  19. package/components/chart/ChartTooltip.vue.js +2 -2
  20. package/components/chart/ChartTooltip.vue2.js +48 -58
  21. package/components/chart/components/TooltipHeader.vue.d.ts +45 -0
  22. package/components/chart/components/TooltipHeader.vue.js +7 -0
  23. package/components/chart/components/TooltipHeader.vue2.js +59 -0
  24. package/components/chart/consts.d.ts +12 -6
  25. package/components/chart/consts.js +31 -21
  26. package/components/chart/index.d.ts +54 -35
  27. package/components/chart/mockData.d.ts +11 -0
  28. package/components/chart/types.d.ts +16 -5
  29. package/components/chart/utils/highlightUtils.d.ts +3 -0
  30. package/components/chart/utils/highlightUtils.js +18 -0
  31. package/components/chart/utils/utils.d.ts +2 -1
  32. package/components/chart/utils/utils.js +23 -8
  33. package/components/dropdown/v4/DropdownV4.vue.d.ts +5 -0
  34. package/components/dropdown/v4/DropdownV4.vue.js +3 -3
  35. package/components/dropdown/v4/DropdownV4.vue2.js +102 -97
  36. package/components/dropdown/v4/OptionV4.vue.d.ts +5 -0
  37. package/components/dropdown/v4/OptionV4.vue.js +3 -3
  38. package/components/dropdown/v4/OptionV4.vue2.js +83 -64
  39. package/components/dropdown/v4/index.d.ts +40 -2
  40. package/composables/useFormValidation.js +21 -19
  41. package/consts/common.d.ts +1 -0
  42. package/consts/common.js +4 -0
  43. package/consts/regex.d.ts +1 -0
  44. package/consts/regex.js +2 -1
  45. package/index.d.ts +80 -4
  46. package/index.js +1 -1
  47. package/package.json +1 -1
  48. package/utils/text.d.ts +3 -0
  49. package/utils/text.js +24 -5
  50. package/utils/utils.d.ts +1 -0
  51. package/utils/utils.js +4 -0
  52. package/Chart.vue_vue_type_style_index_0_scoped_de950ffe_lang.css +0 -1
  53. package/ChartLegend.vue_vue_type_style_index_0_scoped_da487aba_lang.css +0 -1
  54. package/ChartPlane.vue_vue_type_style_index_0_scoped_ae87f435_lang.css +0 -1
  55. package/ChartTooltip.vue_vue_type_style_index_0_scoped_25d0e129_lang.css +0 -1
  56. package/DropdownV4.vue_vue_type_style_index_0_scoped_4de6dfb8_lang.css +0 -1
  57. package/OptionV4.vue_vue_type_style_index_0_scoped_8ba7e191_lang.css +0 -1
@@ -3,11 +3,13 @@ import { TotalType } from '@/utils/totals';
3
3
  declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
4
4
  dataSets: ChartDataSet[];
5
5
  visibleIds: unknown[];
6
+ highlightedId?: string | number;
6
7
  chartType?: ChartType;
7
8
  parsing?: ChartParsingConfig;
8
9
  xAxisFormat?: ValueFormat;
9
10
  yAxisFormat?: ValueFormat;
10
11
  tickCount?: number;
12
+ truncateTickLabels?: boolean;
11
13
  header?: string;
12
14
  subheader?: string;
13
15
  subheaderTooltip?: {
@@ -38,10 +40,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
38
40
  chartType: ChartType;
39
41
  dataSets: () => any[];
40
42
  visibleIds: () => any[];
43
+ highlightedId: any;
41
44
  xAxisFormat: string;
42
45
  yAxisFormat: string;
43
46
  parsing: any;
44
47
  tickCount: number;
48
+ truncateTickLabels: boolean;
45
49
  header: string;
46
50
  subheader: string;
47
51
  subheaderTooltip: any;
@@ -66,11 +70,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
66
70
  }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
67
71
  dataSets: ChartDataSet[];
68
72
  visibleIds: unknown[];
73
+ highlightedId?: string | number;
69
74
  chartType?: ChartType;
70
75
  parsing?: ChartParsingConfig;
71
76
  xAxisFormat?: ValueFormat;
72
77
  yAxisFormat?: ValueFormat;
73
78
  tickCount?: number;
79
+ truncateTickLabels?: boolean;
74
80
  header?: string;
75
81
  subheader?: string;
76
82
  subheaderTooltip?: {
@@ -101,10 +107,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
101
107
  chartType: ChartType;
102
108
  dataSets: () => any[];
103
109
  visibleIds: () => any[];
110
+ highlightedId: any;
104
111
  xAxisFormat: string;
105
112
  yAxisFormat: string;
106
113
  parsing: any;
107
114
  tickCount: number;
115
+ truncateTickLabels: boolean;
108
116
  header: string;
109
117
  subheader: string;
110
118
  subheaderTooltip: any;
@@ -131,10 +139,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
131
139
  height: string;
132
140
  loading: boolean;
133
141
  visibleIds: unknown[];
142
+ highlightedId: string | number;
134
143
  chartType: ChartType;
135
144
  xAxisFormat: ValueFormat;
136
- yAxisFormat: ValueFormat;
145
+ totalsChart: boolean;
137
146
  parsing: ChartParsingConfig;
147
+ yAxisFormat: ValueFormat;
138
148
  dataSets: ChartDataSet[];
139
149
  trendTooltip: any;
140
150
  typeSwitcher: boolean;
@@ -143,6 +153,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
143
153
  trendValue: string | number;
144
154
  trendDirection: "up" | "down";
145
155
  tickCount: number;
156
+ truncateTickLabels: boolean;
146
157
  noDataIcon: string;
147
158
  noDataTitle: string;
148
159
  noDataSubtitle: string;
@@ -151,7 +162,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
151
162
  tooltipRespectsTopEdge: boolean;
152
163
  tooltipTotalType: TotalType;
153
164
  tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
154
- totalsChart: boolean;
155
165
  colorsMap: Record<string, string>;
156
166
  }>, {
157
167
  "subheader-tooltip"?(_: {}): any;
@@ -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_ae87f435_lang.css"; //*');
4
- const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-ae87f435"]]);
1
+ import o from "./ChartPlane.vue2.js";
2
+ /* empty css */import e from "../../_virtual/_plugin-vue_export-helper.js";
3
+ // import "../../ChartPlane.vue_vue_type_style_index_0_scoped_64dcfb5d_lang.css"; //*');
4
+ const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-64dcfb5d"]]);
5
5
  export {
6
- s as default
6
+ a as default
7
7
  };
@@ -1,32 +1,36 @@
1
- import "../../ChartPlane.vue_vue_type_style_index_0_scoped_ae87f435_lang.css"; import { defineComponent as q, useCssVars as J, unref as c, computed as o, ref as C, onMounted as Q, watch as b, nextTick as X, openBlock as h, createElementBlock as tt, createElementVNode as m, createVNode as et, isRef as at, createSlots as ot, withCtx as lt, renderSlot as rt, normalizeStyle as it, createBlock as g, createCommentVNode as H } from "vue";
2
- import { Chart as O, ArcElement as nt, LineElement as st, BarElement as ct, PointElement as dt, LineController as ut, BarController as pt, PieController as ft, ScatterController as ht, CategoryScale as mt, LinearScale as vt, Filler as yt, Tooltip as Tt } from "chart.js";
3
- import { HoverVerticalLine as Ct } from "./plugins/HoverVerticalLine.js";
4
- import { formatValue as F, calcStepSize as bt } from "./utils/utils.js";
5
- import { DEFAULT_TICK_COUNT as gt, TOTALS_HELPER_KEY as I, POINT_BORDER_COLOR as kt, TICK_LABEL_COLOR as P, TICK_LABEL_FONT as N, GRID_LINE_COLOR as M, HEADER_HEIGHT as xt, COMPACT_HEADER_HEIGHT as St } from "./consts.js";
6
- import { ChartType as n } from "./types.js";
7
- import { useTooltipPosition as Lt } from "./composables/useTooltipPosition.js";
8
- import Et from "./ChartTooltip.vue.js";
9
- import { hexColorToRgba as At } from "../../utils/color.js";
10
- import { useChartValues as Bt } from "./composables/useChartValues.js";
11
- import Rt from "./ChartHeader.vue.js";
12
- import { useVModel as wt } from "@vueuse/core";
13
- import Dt from "../emptyState/v4/EmptyStateV4.vue.js";
14
- import Vt from "./ChartLoader.vue.js";
15
- import { DEFAULT_CHART_COLOR as Ht } from "./colorPalette.js";
16
- import { TotalType as z, calculateTotal as Ot } from "../../utils/totals.js";
17
- const Ft = {
1
+ import "../../ChartPlane.vue_vue_type_style_index_0_scoped_64dcfb5d_lang.css"; import { defineComponent as ot, useCssVars as lt, unref as d, computed as l, ref as k, onMounted as rt, watch as v, nextTick as it, openBlock as y, createElementBlock as nt, createElementVNode as T, createVNode as st, isRef as ct, createSlots as dt, withCtx as ut, renderSlot as pt, normalizeStyle as ft, createBlock as S, createCommentVNode as N } from "vue";
2
+ import { Chart as P, ArcElement as ht, LineElement as mt, BarElement as vt, PointElement as yt, LineController as Tt, BarController as Ct, PieController as gt, ScatterController as bt, CategoryScale as kt, LinearScale as St, Filler as At, Tooltip as xt } from "chart.js";
3
+ import { HoverVerticalLine as Et } from "./plugins/HoverVerticalLine.js";
4
+ import { prepareTickLabel as Lt, formatValue as Rt, calcStepSize as Bt } from "./utils/utils.js";
5
+ import { DEFAULT_TICK_COUNT as Dt, TOTALS_HELPER_KEY as F, BASE_COLOR_KEY as _, CHART_PADDING as A, POINT_BORDER_COLOR as Ot, TICK_LABEL_COLOR as K, TICK_LABEL_FONT as M, TICKS_EXTRA_PADDING as Ht, GRID_LINE_COLOR as z, HEADER_HEIGHT as wt, COMPACT_HEADER_HEIGHT as Vt, HOVER_AREA_TRANSPARENCY as It, HOVER_TRANSPARENCY as C } from "./consts.js";
6
+ import { ChartType as s } from "./types.js";
7
+ import { useTooltipPosition as Nt } from "./composables/useTooltipPosition.js";
8
+ import Pt from "./ChartTooltip.vue.js";
9
+ import { hexColorToRgba as u } from "../../utils/color.js";
10
+ import { useChartValues as Ft } from "./composables/useChartValues.js";
11
+ import _t from "./ChartHeader.vue.js";
12
+ import { useMemoize as Kt, useVModel as Mt } from "@vueuse/core";
13
+ import zt from "../emptyState/v4/EmptyStateV4.vue.js";
14
+ import Ut from "./ChartLoader.vue.js";
15
+ import { DEFAULT_CHART_COLOR as Gt } from "./colorPalette.js";
16
+ import { TotalType as U, calculateTotal as Yt } from "../../utils/totals.js";
17
+ import { isNullOrUndefined as $t } from "../../utils/utils.js";
18
+ import { storeOriginalDatasetColors as Wt, restoreOriginalDatasetColors as Zt } from "./utils/highlightUtils.js";
19
+ const Xt = {
18
20
  key: 0,
19
21
  class: "chart-plane"
20
- }, It = { class: "header-wrapper" }, Pt = { class: "chart" }, te = /* @__PURE__ */ q({
22
+ }, jt = { class: "header-wrapper" }, qt = { class: "chart" }, ve = /* @__PURE__ */ ot({
21
23
  __name: "ChartPlane",
22
24
  props: {
23
25
  dataSets: { default: () => [] },
24
26
  visibleIds: { default: () => [] },
25
- chartType: { default: n.Line },
27
+ highlightedId: { default: null },
28
+ chartType: { default: s.Line },
26
29
  parsing: { default: void 0 },
27
30
  xAxisFormat: { default: "string" },
28
31
  yAxisFormat: { default: "number" },
29
- tickCount: { default: gt },
32
+ tickCount: { default: Dt },
33
+ truncateTickLabels: { type: Boolean, default: !0 },
30
34
  header: { default: "" },
31
35
  subheader: { default: "" },
32
36
  subheaderTooltip: { default: null },
@@ -39,8 +43,8 @@ const Ft = {
39
43
  height: { default: "100%" },
40
44
  compactHeader: { type: Boolean, default: !1 },
41
45
  tooltipRespectsTopEdge: { type: Boolean, default: !0 },
42
- tooltipTotalType: { default: z.Total },
43
- tooltipTotalCalcFn: { type: Function, default: Ot },
46
+ tooltipTotalType: { default: U.Total },
47
+ tooltipTotalCalcFn: { type: Function, default: Yt },
44
48
  trendValue: { default: null },
45
49
  trendDirection: { default: "up" },
46
50
  trendTooltip: { default: null },
@@ -48,108 +52,112 @@ const Ft = {
48
52
  colorsMap: { default: () => ({}) }
49
53
  },
50
54
  emits: ["update:chartType"],
51
- setup(a, { emit: K }) {
52
- const t = a;
53
- J((e) => ({
54
- "4640c185": c(j),
55
- "07515470": a.height
56
- })), O.register(
57
- nt,
58
- st,
59
- ct,
60
- dt,
61
- ut,
62
- pt,
63
- ft,
55
+ setup(o, { emit: G }) {
56
+ const t = o;
57
+ lt((e) => ({
58
+ "2e8f327a": d(Q),
59
+ f7b2eb36: o.height
60
+ }));
61
+ const Y = Kt(Lt);
62
+ P.register(
64
63
  ht,
65
64
  mt,
66
65
  vt,
67
66
  yt,
68
67
  Tt,
69
- Ct
68
+ Ct,
69
+ gt,
70
+ bt,
71
+ kt,
72
+ St,
73
+ At,
74
+ xt,
75
+ Et
70
76
  );
71
- const v = wt(t, "chartType", K), U = o(
77
+ const g = Mt(t, "chartType", G), $ = l(
72
78
  () => t.withAnimation ? "" : "none"
73
- ), d = C(null);
74
- let s = null;
75
- const k = o(() => t.dataSets.length === 0), x = o(() => !t.loading && !k.value), y = () => {
76
- d.value && (s && s.destroy(), s = new O(d.value, B.value));
77
- }, $ = () => {
78
- s && (s.data.datasets = A.value, s.options = B.value.options, s.update(U.value));
79
+ ), f = k(null);
80
+ let r = null;
81
+ const x = l(() => t.dataSets.length === 0), E = l(() => !t.loading && !x.value), b = () => {
82
+ f.value && (r && r.destroy(), r = new P(f.value, O.value));
83
+ }, W = () => {
84
+ r && (r.data.datasets = D.value, r.options = O.value.options, r.update($.value));
79
85
  };
80
- Q(y), b(() => t.chartType, y), b(x, async (e) => {
81
- e && (await X(), y());
82
- }), b([() => t.visibleIds, () => t.dataSets], $);
83
- const u = o(() => t.totalsChart), p = o(
84
- () => t.chartType === n.StackedLine || t.chartType === n.StackedBar || u.value
85
- ), S = o(
86
- () => t.chartType === n.Line || t.chartType === n.StackedLine
87
- ), L = o(() => u.value ? { ...t.parsing, xAxisKey: I } : t.parsing), G = o(() => u.value ? t.dataSets.map((e) => ({
86
+ rt(b), v(() => t.chartType, b), v(E, async (e) => {
87
+ e && (await it(), b());
88
+ }), v([() => t.visibleIds, () => t.dataSets], W);
89
+ const p = l(() => t.totalsChart), h = l(
90
+ () => t.chartType === s.StackedLine || t.chartType === s.StackedBar || p.value
91
+ ), L = l(
92
+ () => t.chartType === s.Line || t.chartType === s.StackedLine
93
+ ), R = l(() => p.value && !t.parsing.xAxisKey ? { ...t.parsing, xAxisKey: F } : t.parsing), Z = l(() => p.value ? t.dataSets.map((e) => ({
88
94
  ...e,
89
- data: e.data.map((r) => ({
90
- ...r,
91
- [I]: e.label
95
+ data: e.data.map((n) => ({
96
+ ...n,
97
+ [F]: e.label
92
98
  }))
93
- })) : t.dataSets), f = o(
94
- () => G.value.filter((e) => t.visibleIds.includes(e.id))
95
- ), W = (e) => t.colorsMap[e] || Ht, E = o(
96
- () => f.value.length && f.value.every(
99
+ })) : t.dataSets), m = l(
100
+ () => Z.value.filter((e) => t.visibleIds.includes(e.id))
101
+ ), X = (e) => t.colorsMap[e] || Gt, B = l(
102
+ () => m.value.length && m.value.every(
97
103
  (e) => e.data.length === 1
98
104
  )
99
- ), A = o(() => f.value.map((e, r) => {
100
- const i = W(e.id), T = p.value ? r !== 0 ? "-1" : "start" : void 0;
105
+ ), D = l(() => m.value.map((e, n) => {
106
+ const a = X(e.id), i = h.value ? n !== 0 ? "-1" : "start" : void 0;
101
107
  return {
102
108
  ...e,
103
- fill: T,
104
- backgroundColor: At(
105
- i,
106
- t.chartType === n.StackedLine ? 10 : 70
109
+ fill: i,
110
+ backgroundColor: u(
111
+ a,
112
+ t.chartType === s.StackedLine ? 10 : 70
107
113
  ),
108
- borderColor: i,
109
- pointBackgroundColor: i,
110
- pointHoverBorderColor: i,
114
+ borderColor: a,
115
+ pointBackgroundColor: a,
116
+ pointHoverBorderColor: a,
111
117
  maxBarThickness: 50,
112
118
  clip: 5,
113
119
  // draw a bit outside the chart area
114
120
  icon: e.icon || null,
115
- iconType: e.iconType || "branded"
121
+ iconType: e.iconType || "branded",
122
+ [_]: a
123
+ // store base color for later use
116
124
  };
117
- })), _ = o(
118
- () => t.tooltipTotalType === z.Total ? "Total" : "Mean"
119
- ), B = o(
125
+ })), j = l(
126
+ () => t.tooltipTotalType === U.Total ? "Total" : "Mean"
127
+ ), O = l(
120
128
  () => ({
121
- type: t.chartType == n.Bar || t.chartType === n.StackedBar ? "bar" : "line",
129
+ type: t.chartType == s.Bar || t.chartType === s.StackedBar ? "bar" : "line",
122
130
  // Chart Data
123
131
  data: {
124
- datasets: A.value
132
+ datasets: D.value
125
133
  },
126
134
  // Chart Options
127
135
  options: {
128
- parsing: L.value,
136
+ parsing: R.value,
129
137
  interaction: {
130
138
  intersect: !1,
131
- mode: u.value ? "point" : "index",
139
+ mode: p.value ? "point" : "index",
132
140
  axis: "x"
133
141
  },
134
142
  // plugins
135
143
  plugins: {
136
144
  legend: { display: !1 },
137
145
  title: { display: !1 },
138
- hoverVerticalLine: S.value,
146
+ hoverVerticalLine: L.value,
139
147
  // tooltip
140
148
  tooltip: {
141
149
  enabled: !1,
142
150
  position: "average",
143
151
  external: ({ tooltip: e }) => {
144
- l.value = { ...e };
152
+ c.value = { ...e };
145
153
  },
146
154
  callbacks: {
147
155
  footer: (e) => {
148
- const r = e.map((T) => T.parsed.y || 0), i = t.tooltipTotalCalcFn(
149
- r,
156
+ const n = e.map((i) => i.parsed.y || 0), a = t.tooltipTotalCalcFn(
157
+ n,
150
158
  t.tooltipTotalType
151
159
  );
152
- return [_.value, String(i)];
160
+ return [j.value, String(a)];
153
161
  }
154
162
  }
155
163
  }
@@ -158,11 +166,7 @@ const Ft = {
158
166
  responsive: !0,
159
167
  maintainAspectRatio: !1,
160
168
  layout: {
161
- padding: {
162
- left: 18,
163
- top: 18,
164
- bottom: 11
165
- }
169
+ padding: A
166
170
  },
167
171
  // basic styles
168
172
  elements: {
@@ -171,12 +175,12 @@ const Ft = {
171
175
  tension: 0.3
172
176
  },
173
177
  point: {
174
- radius: E.value ? 3 : 1,
178
+ radius: B.value ? 3 : 1,
175
179
  hitRadius: 8,
176
180
  borderWidth: 0,
177
181
  hoverRadius: 4,
178
182
  hoverBorderWidth: 2,
179
- pointHoverBackgroundColor: kt
183
+ pointHoverBackgroundColor: Ot
180
184
  },
181
185
  bar: {
182
186
  borderRadius: 4
@@ -186,25 +190,28 @@ const Ft = {
186
190
  // Horizontal Axis (X)
187
191
  x: {
188
192
  beginAtZero: !0,
189
- offset: !S.value || E.value,
193
+ offset: !L.value || B.value,
190
194
  border: { display: !1 },
191
- stacked: p.value,
195
+ stacked: h.value,
192
196
  // stack on top of each other
193
197
  // ticks
194
198
  ticks: {
195
- color: P,
196
- font: N,
199
+ color: K,
200
+ font: M,
197
201
  padding: 4,
198
- callback: function(e) {
199
- return F(
200
- this.getLabelForValue(e),
201
- t.xAxisFormat
202
- );
202
+ callback: function(e, n, a) {
203
+ const i = this.getLabelForValue(e), at = this.chart.width / a.length - (A.left + A.right + Ht);
204
+ return Y({
205
+ label: i,
206
+ format: t.xAxisFormat,
207
+ availableSpace: at,
208
+ truncate: t.truncateTickLabels
209
+ });
203
210
  }
204
211
  },
205
212
  // grid lines
206
213
  grid: {
207
- color: M,
214
+ color: z,
208
215
  drawOnChartArea: !1,
209
216
  drawTicks: !0,
210
217
  drawBorder: !1,
@@ -216,21 +223,21 @@ const Ft = {
216
223
  beginAtZero: !0,
217
224
  border: { display: !1 },
218
225
  // hide left borderline
219
- stacked: p.value,
226
+ stacked: h.value,
220
227
  // stack on top of each other
221
228
  // ticks
222
229
  ticks: {
223
- color: P,
224
- font: N,
230
+ color: K,
231
+ font: M,
225
232
  padding: 8,
226
- stepSize: V.value,
227
- min: D.value,
228
- max: V.value * t.tickCount,
229
- callback: (e) => F(e, t.yAxisFormat)
233
+ stepSize: I.value,
234
+ min: V.value,
235
+ max: I.value * t.tickCount,
236
+ callback: (e) => Rt(e, t.yAxisFormat)
230
237
  },
231
238
  // grid lines
232
239
  grid: {
233
- color: M,
240
+ color: z,
234
241
  drawOnChartArea: !0,
235
242
  drawTicks: !1
236
243
  }
@@ -238,82 +245,101 @@ const Ft = {
238
245
  }
239
246
  }
240
247
  })
241
- ), R = C(null), l = C(null), { position: w } = Lt(
242
- d,
243
- R,
244
- l,
248
+ ), H = k(null), c = k(null), { position: w } = Nt(
249
+ f,
250
+ H,
251
+ c,
245
252
  t.tooltipRespectsTopEdge
246
- ), Z = o(() => ({
253
+ ), q = l(() => ({
247
254
  left: `${w.value.left}px`,
248
255
  top: `${w.value.top}px`,
249
- opacity: l.value?.opacity || 0
250
- })), { minValue: D, maxValue: Y } = Bt({
251
- parsingConfig: L.value,
252
- dataSets: f,
253
- isStacked: p
254
- }), V = o(
255
- () => bt(D.value, Y.value, t.tickCount)
256
- ), j = o(
257
- () => (t.compactHeader ? St : xt) + "px"
256
+ opacity: c.value?.opacity || 0
257
+ })), { minValue: V, maxValue: J } = Ft({
258
+ parsingConfig: R.value,
259
+ dataSets: m,
260
+ isStacked: h
261
+ }), I = l(
262
+ () => Bt(V.value, J.value, t.tickCount)
263
+ ), Q = l(
264
+ () => (t.compactHeader ? Vt : wt) + "px"
258
265
  );
259
- return (e, r) => c(x) ? (h(), tt("section", Ft, [
260
- m("div", It, [
261
- et(Rt, {
262
- "chart-type": c(v),
263
- "onUpdate:chart-type": r[0] || (r[0] = (i) => at(v) ? v.value = i : null),
264
- "type-switcher": a.typeSwitcher,
265
- header: a.header,
266
- subheader: a.subheader,
267
- "subheader-tooltip": a.subheaderTooltip,
268
- "trend-tooltip": a.trendTooltip,
269
- compact: a.compactHeader,
270
- "trend-value": a.trendValue,
271
- "trend-direction": a.trendDirection
272
- }, ot({ _: 2 }, [
266
+ v(
267
+ () => t.highlightedId,
268
+ (e) => {
269
+ r && ($t(e) ? et() : tt(e), r.update());
270
+ }
271
+ );
272
+ const tt = (e) => {
273
+ (r?.data.datasets || []).forEach((a) => {
274
+ Wt(a);
275
+ const i = a[_];
276
+ a.id === e ? t.chartType === s.StackedLine && (a.backgroundColor = u(
277
+ i,
278
+ It
279
+ )) : (a.backgroundColor = u(i, C), a.borderColor = u(i, C), a.pointBackgroundColor = u(i, C), a.pointHoverBorderColor = u(i, C));
280
+ });
281
+ }, et = () => {
282
+ (r?.data.datasets || []).forEach(Zt);
283
+ };
284
+ return (e, n) => d(E) ? (y(), nt("section", Xt, [
285
+ T("div", jt, [
286
+ st(_t, {
287
+ "chart-type": d(g),
288
+ "onUpdate:chart-type": n[0] || (n[0] = (a) => ct(g) ? g.value = a : null),
289
+ "type-switcher": o.typeSwitcher,
290
+ header: o.header,
291
+ subheader: o.subheader,
292
+ "subheader-tooltip": o.subheaderTooltip,
293
+ "trend-tooltip": o.trendTooltip,
294
+ compact: o.compactHeader,
295
+ "trend-value": o.trendValue,
296
+ "trend-direction": o.trendDirection
297
+ }, dt({ _: 2 }, [
273
298
  e.$slots["subheader-tooltip"] ? {
274
299
  name: "subheader-tooltip",
275
- fn: lt(() => [
276
- rt(e.$slots, "subheader-tooltip", {}, void 0, !0)
300
+ fn: ut(() => [
301
+ pt(e.$slots, "subheader-tooltip", {}, void 0, !0)
277
302
  ]),
278
303
  key: "0"
279
304
  } : void 0
280
305
  ]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction"])
281
306
  ]),
282
- m("div", Pt, [
283
- m("canvas", {
307
+ T("div", qt, [
308
+ T("canvas", {
284
309
  ref_key: "chartRef",
285
- ref: d,
310
+ ref: f,
286
311
  class: "chart__canvas"
287
312
  }, null, 512),
288
- m("div", {
313
+ T("div", {
289
314
  ref_key: "tooltipRef",
290
- ref: R,
315
+ ref: H,
291
316
  class: "chart__tooltip",
292
- style: it(c(Z))
317
+ style: ft(d(q))
293
318
  }, [
294
- l.value ? (h(), g(Et, {
319
+ c.value ? (y(), S(Pt, {
295
320
  key: 0,
296
- title: String(l.value.title),
297
- "data-points": l.value.dataPoints,
298
- "x-axis-format": a.xAxisFormat,
299
- "y-axis-format": a.yAxisFormat,
300
- "total-label": l.value.footer[0],
301
- "total-value": Number(l.value.footer[1])
302
- }, null, 8, ["title", "data-points", "x-axis-format", "y-axis-format", "total-label", "total-value"])) : H("", !0)
321
+ "totals-chart": d(p),
322
+ title: String(c.value.title),
323
+ "data-points": c.value.dataPoints,
324
+ "x-axis-format": o.xAxisFormat,
325
+ "y-axis-format": o.yAxisFormat,
326
+ "total-label": c.value.footer[0],
327
+ "total-value": Number(c.value.footer[1])
328
+ }, null, 8, ["totals-chart", "title", "data-points", "x-axis-format", "y-axis-format", "total-label", "total-value"])) : N("", !0)
303
329
  ], 4)
304
330
  ])
305
- ])) : a.loading ? (h(), g(Vt, {
331
+ ])) : o.loading ? (y(), S(Ut, {
306
332
  key: 1,
307
333
  class: "chart-loading"
308
- })) : c(k) ? (h(), g(c(Dt), {
334
+ })) : d(x) ? (y(), S(d(zt), {
309
335
  key: 2,
310
336
  class: "chart-empty",
311
- title: a.noDataTitle,
312
- subtitle: a.noDataSubtitle,
313
- "icon-name": a.noDataIcon
314
- }, null, 8, ["title", "subtitle", "icon-name"])) : H("", !0);
337
+ title: o.noDataTitle,
338
+ subtitle: o.noDataSubtitle,
339
+ "icon-name": o.noDataIcon
340
+ }, null, 8, ["title", "subtitle", "icon-name"])) : N("", !0);
315
341
  }
316
342
  });
317
343
  export {
318
- te as default
344
+ ve as default
319
345
  };
@@ -88,6 +88,12 @@ export declare const chartStoryArgs: {
88
88
  tickCount: {
89
89
  description: string;
90
90
  };
91
+ truncateTickLabels: {
92
+ description: string;
93
+ control: {
94
+ type: string;
95
+ };
96
+ };
91
97
  loading: {
92
98
  description: string;
93
99
  control: {
@@ -6,6 +6,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
6
6
  yAxisFormat?: ValueFormat;
7
7
  totalLabel?: string;
8
8
  totalValue?: number;
9
+ totalsChart?: boolean;
9
10
  }>, {
10
11
  title: string;
11
12
  dataPoints: () => any[];
@@ -13,6 +14,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
13
14
  yAxisFormat: any;
14
15
  totalLabel: string;
15
16
  totalValue: any;
17
+ totalsChart: boolean;
16
18
  }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
17
19
  title?: string;
18
20
  dataPoints: MyTooltipItem<'line'>[];
@@ -20,6 +22,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
20
22
  yAxisFormat?: ValueFormat;
21
23
  totalLabel?: string;
22
24
  totalValue?: number;
25
+ totalsChart?: boolean;
23
26
  }>, {
24
27
  title: string;
25
28
  dataPoints: () => any[];
@@ -27,10 +30,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
27
30
  yAxisFormat: any;
28
31
  totalLabel: string;
29
32
  totalValue: any;
33
+ totalsChart: boolean;
30
34
  }>>>, {
31
35
  title: string;
32
- dataPoints: MyTooltipItem<'line'>[];
33
36
  xAxisFormat: ValueFormat;
37
+ dataPoints: MyTooltipItem<'line'>[];
38
+ totalsChart: boolean;
34
39
  yAxisFormat: ValueFormat;
35
40
  totalLabel: string;
36
41
  totalValue: number;
@@ -1,7 +1,7 @@
1
1
  import o from "./ChartTooltip.vue2.js";
2
2
  /* empty css */import t from "../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_25d0e129_lang.css"; //*');
4
- const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-25d0e129"]]);
3
+ // import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_81cdfd5e_lang.css"; //*');
4
+ const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-81cdfd5e"]]);
5
5
  export {
6
6
  s as default
7
7
  };