@ironsource/shared-ui 2.1.12-rc.17 → 2.1.12-rc.18

package/components/chart/ChartPlane.vue2.js

@@ -1,28 +1,28 @@
- import "../../ChartPlane.vue_vue_type_style_index_0_scoped_5c80d8cd_lang.css"; import { defineComponent as re, useCssVars as ie, unref as s, computed as l, ref as k, onMounted as ne, watch as T, nextTick as se, openBlock as p, createElementBlock as S, createVNode as ce, isRef as de, createSlots as ue, withCtx as pe, renderSlot as fe, createCommentVNode as A, createElementVNode as x, normalizeStyle as he, createBlock as L } from "vue";
-import { Chart as F, ArcElement as me, LineElement as ve, BarElement as ye, PointElement as Te, LineController as Ce, BarController as ge, PieController as be, ScatterController as ke, CategoryScale as Se, LinearScale as Ae, Filler as xe, Tooltip as Le } from "chart.js";
+ import "../../ChartPlane.vue_vue_type_style_index_0_scoped_fc79a730_lang.css"; import { defineComponent as re, useCssVars as ie, unref as s, computed as l, ref as k, onMounted as ne, watch as T, nextTick as se, openBlock as p, createElementBlock as x, createVNode as ce, isRef as de, createSlots as ue, withCtx as pe, renderSlot as fe, createCommentVNode as A, createElementVNode as S, normalizeStyle as he, createBlock as L } from "vue";
+import { Chart as F, ArcElement as me, LineElement as ve, BarElement as ye, PointElement as Te, LineController as Ce, BarController as ge, PieController as be, ScatterController as ke, CategoryScale as xe, LinearScale as Ae, Filler as Se, Tooltip as Le } from "chart.js";
 import { HoverVerticalLine as Ee } from "./plugins/HoverVerticalLine.js";
-import { prepareTickLabel as Re, formatValue as Be, calcStepSize as Oe } from "./utils/utils.js";
-import { DEFAULT_TICK_COUNT as De, TOTALS_HELPER_KEY as _, BASE_COLOR_KEY as K, CHART_PADDING as E, POINT_BORDER_COLOR as He, TICK_LABEL_COLOR as M, TICK_LABEL_FONT as U, TICKS_EXTRA_PADDING as Ve, GRID_LINE_COLOR as z, HEADER_HEIGHT as we, COMPACT_HEADER_HEIGHT as Ie, HOVER_AREA_TRANSPARENCY as Ne, HOVER_TRANSPARENCY as C } from "./consts.js";
-import { ChartType as c, TooltipOrder as G, TrendDirection as Pe } from "./types.js";
-import { useTooltipPosition as Fe } from "./composables/useTooltipPosition.js";
-import _e from "./ChartTooltip.vue.js";
+import { prepareTickLabel as Re, formatValue as Be, calcStepSize as De } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as Oe, TOTALS_HELPER_KEY as _, BASE_COLOR_KEY as K, CHART_PADDING as E, POINT_BORDER_COLOR as Ie, TICK_LABEL_COLOR as M, TICK_LABEL_FONT as U, TICKS_EXTRA_PADDING as He, GRID_LINE_COLOR as z, HEADER_HEIGHT as Ve, COMPACT_HEADER_HEIGHT as we, HOVER_AREA_TRANSPARENCY as Ne, HOVER_TRANSPARENCY as C } from "./consts.js";
+import { ChartType as c, DateInterval as Pe, TooltipOrder as Y, TrendDirection as Fe } from "./types.js";
+import { useTooltipPosition as _e } from "./composables/useTooltipPosition.js";
+import Ke from "./ChartTooltip.vue.js";
 import { hexColorToRgba as f } from "../../utils/color.js";
-import { useChartValues as Ke } from "./composables/useChartValues.js";
-import Me from "./ChartHeader.vue.js";
-import { useMemoize as Ue, useVModel as ze } from "@vueuse/core";
+import { useChartValues as Me } from "./composables/useChartValues.js";
+import Ue from "./ChartHeader.vue.js";
+import { useMemoize as ze, useVModel as Ye } from "@vueuse/core";
 import Ge from "../emptyState/v4/EmptyStateV4.vue.js";
-import Ye from "./ChartLoader.vue.js";
-import { DEFAULT_CHART_COLOR as $e } from "./colorPalette.js";
-import { TotalType as Y, calculateTotal as We } from "../../utils/totals.js";
-import { isNullOrUndefined as Ze } from "../../utils/utils.js";
-import { storeOriginalDatasetColors as Xe, restoreOriginalDatasetColors as je } from "./utils/highlightUtils.js";
-const qe = { class: "chart-plane-container" }, Je = {
+import $e from "./ChartLoader.vue.js";
+import { DEFAULT_CHART_COLOR as We } from "./colorPalette.js";
+import { TotalType as G, calculateTotal as Ze } from "../../utils/totals.js";
+import { isNullOrUndefined as Xe } from "../../utils/utils.js";
+import { storeOriginalDatasetColors as je, restoreOriginalDatasetColors as qe } from "./utils/highlightUtils.js";
+const Je = { class: "chart-plane-container" }, Qe = {
   key: 0,
   class: "header-wrapper"
-}, Qe = {
+}, et = {
   key: 1,
   class: "chart-plane"
-}, et = { class: "chart" }, Ct = /* @__PURE__ */ re({
+}, tt = { class: "chart" }, gt = /* @__PURE__ */ re({
   __name: "ChartPlane",
   props: {
     dataSets: { default: () => [] },
@@ -32,13 +32,15 @@ const qe = { class: "chart-plane-container" }, Je = {
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
-    tickCount: { default: De },
+    xAxisDateInterval: { default: Pe.DAILY },
+    tickCount: { default: Oe },
     truncateTickLabels: { type: Boolean, default: !0 },
     header: { default: "" },
     subheader: { default: "" },
     subheaderTooltip: { default: null },
     keepSubheaderVisible: { type: Boolean, default: !1 },
     loading: { type: Boolean, default: !1 },
+    empty: { type: Boolean, default: !1 },
     noDataIcon: { default: "file-search" },
     noDataTitle: { default: "No data to display" },
     noDataSubtitle: { default: "Search again with different filters" },
@@ -47,23 +49,23 @@ const qe = { class: "chart-plane-container" }, Je = {
     height: { default: "100%" },
     compactHeader: { type: Boolean, default: !1 },
     tooltipRespectsTopEdge: { type: Boolean, default: !0 },
-    tooltipTotalType: { default: Y.Total },
-    tooltipTotalCalcFn: { type: Function, default: We },
-    tooltipOrder: { default: G.Legend },
+    tooltipTotalType: { default: G.Total },
+    tooltipTotalCalcFn: { type: Function, default: Ze },
+    tooltipOrder: { default: Y.Legend },
     trendValue: { default: null },
-    trendDirection: { default: Pe.UP },
+    trendDirection: { default: Fe.UP },
     trendTooltip: { default: null },
     totalsChart: { type: Boolean, default: !1 },
     colorsMap: { default: () => ({}) }
   },
   emits: ["update:chartType"],
   setup(o, { emit: $ }) {
-    const t = o;
-    ie((e) => ({
-      "1ae03326": s(te),
-      "42303d50": o.height
+    const e = o;
+    ie((t) => ({
+      "498cf638": s(te),
+      b6d23262: o.height
     }));
-    const W = Ue(Re);
+    const W = ze(Re);
     F.register(
       me,
       ve,
@@ -73,48 +75,48 @@ const qe = { class: "chart-plane-container" }, Je = {
       ge,
       be,
       ke,
-      Se,
-      Ae,
       xe,
+      Ae,
+      Se,
       Le,
       Ee
     );
-    const g = ze(t, "chartType", $), Z = l(
-      () => t.withAnimation ? "" : "none"
+    const g = Ye(e, "chartType", $), Z = l(
+      () => e.withAnimation ? "" : "none"
     ), m = k(null);
     let n = null;
-    const R = l(() => t.dataSets.length === 0), u = l(() => !t.loading && !R.value), b = () => {
-      m.value && (n && n.destroy(), n = new F(m.value, V.value));
+    const R = l(() => e.empty || e.dataSets.length === 0), u = l(() => !e.loading && !R.value), b = () => {
+      m.value && (n && n.destroy(), n = new F(m.value, H.value));
     }, X = () => {
-      n && (n.data.datasets = H.value, n.options = V.value.options, n.update(Z.value));
+      n && (n.data.datasets = I.value, n.options = H.value.options, n.update(Z.value));
     };
-    ne(b), T(() => t.chartType, b), T(u, async (e) => {
-      e && (await se(), b());
-    }), T([() => t.visibleIds, () => t.dataSets], X);
-    const h = l(() => t.totalsChart), v = l(
-      () => t.chartType === c.StackedLine || t.chartType === c.StackedBar || h.value
+    ne(b), T(() => e.chartType, b), T(u, async (t) => {
+      t && (await se(), b());
+    }), T([() => e.visibleIds, () => e.dataSets], X);
+    const h = l(() => e.totalsChart), v = l(
+      () => e.chartType === c.StackedLine || e.chartType === c.StackedBar || h.value
     ), B = l(
-      () => t.chartType === c.Line || t.chartType === c.StackedLine
-    ), O = l(() => h.value && !t.parsing.xAxisKey ? { ...t.parsing, xAxisKey: _ } : t.parsing), j = l(() => h.value ? t.dataSets.map((e) => ({
-      ...e,
-      data: e.data.map((i) => ({
+      () => e.chartType === c.Line || e.chartType === c.StackedLine
+    ), D = l(() => h.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: _ } : e.parsing), j = l(() => h.value ? e.dataSets.map((t) => ({
+      ...t,
+      data: t.data.map((i) => ({
         ...i,
-        [_]: e.label
+        [_]: t.label
       }))
-    })) : t.dataSets), y = l(
-      () => j.value.filter((e) => t.visibleIds.includes(e.id))
-    ), q = (e) => t.colorsMap[e] || $e, D = l(
+    })) : e.dataSets), y = l(
+      () => j.value.filter((t) => e.visibleIds.includes(t.id))
+    ), q = (t) => e.colorsMap[t] || We, O = l(
       () => y.value.length && y.value.every(
-        (e) => e.data.length === 1
+        (t) => t.data.length === 1
       )
-    ), H = l(() => y.value.map((e, i) => {
-      const a = q(e.id), r = v.value ? i !== 0 ? "-1" : "start" : void 0;
+    ), I = l(() => y.value.map((t, i) => {
+      const a = q(t.id), r = v.value ? i !== 0 ? "-1" : "start" : void 0;
       return {
-        ...e,
+        ...t,
         fill: r,
         backgroundColor: f(
           a,
-          t.chartType === c.StackedLine ? 10 : 70
+          e.chartType === c.StackedLine ? 10 : 70
         ),
         borderColor: a,
         pointBackgroundColor: a,
@@ -122,22 +124,22 @@ const qe = { class: "chart-plane-container" }, Je = {
         maxBarThickness: 50,
         clip: 5,
         // draw a bit outside the chart area
-        icon: e.icon || null,
-        iconType: e.iconType || "branded",
+        icon: t.icon || null,
+        iconType: t.iconType || "branded",
         [K]: a
         // store base color for later use
       };
     })), J = l(
-      () => t.tooltipTotalType === Y.Total ? "Total" : "Mean"
-    ), V = l(() => ({
-      type: t.chartType == c.Bar || t.chartType === c.StackedBar ? "bar" : "line",
+      () => e.tooltipTotalType === G.Total ? "Total" : "Mean"
+    ), H = l(() => ({
+      type: e.chartType == c.Bar || e.chartType === c.StackedBar ? "bar" : "line",
       // Chart Data
       data: {
-        datasets: H.value
+        datasets: I.value
       },
       // Chart Options
       options: {
-        parsing: O.value,
+        parsing: D.value,
         interaction: {
           intersect: !1,
           mode: h.value ? "point" : "index",
@@ -152,21 +154,21 @@ const qe = { class: "chart-plane-container" }, Je = {
           tooltip: {
             enabled: !1,
             position: "average",
-            external: ({ tooltip: e }) => {
-              d.value = { ...e };
+            external: ({ tooltip: t }) => {
+              d.value = { ...t };
             },
             callbacks: {
-              footer: (e) => {
-                const i = e.map((r) => r.parsed.y || 0), a = t.tooltipTotalCalcFn(
+              footer: (t) => {
+                const i = t.map((r) => r.parsed.y || 0), a = e.tooltipTotalCalcFn(
                   i,
-                  t.tooltipTotalType
+                  e.tooltipTotalType
                 );
                 return [J.value, String(a)];
               }
             },
-            itemSort: (e, i) => {
-              if (t.tooltipOrder === G.YAxis) {
-                const a = e.parsed.y || 0, r = i.parsed.y || 0;
+            itemSort: (t, i) => {
+              if (e.tooltipOrder === Y.YAxis) {
+                const a = t.parsed.y || 0, r = i.parsed.y || 0;
                 return a === r ? 0 : a > r ? -1 : 1;
               }
               return 0;
@@ -186,12 +188,12 @@ const qe = { class: "chart-plane-container" }, Je = {
             tension: 0.3
           },
           point: {
-            radius: D.value ? 3 : 1,
+            radius: O.value ? 3 : 1,
             hitRadius: 8,
             borderWidth: 0,
             hoverRadius: 4,
             hoverBorderWidth: 2,
-            pointHoverBackgroundColor: He
+            pointHoverBackgroundColor: Ie
           },
           bar: {
             borderRadius: 4
@@ -201,7 +203,7 @@ const qe = { class: "chart-plane-container" }, Je = {
           // Horizontal Axis (X)
           x: {
             beginAtZero: !0,
-            offset: !B.value || D.value,
+            offset: !B.value || O.value,
             border: { display: !1 },
             stacked: v.value,
             // stack on top of each other
@@ -210,13 +212,13 @@ const qe = { class: "chart-plane-container" }, Je = {
               color: M,
               font: U,
               padding: 4,
-              callback: function(e, i, a) {
-                const r = this.getLabelForValue(e), le = this.chart.width / a.length - (E.left + E.right + Ve);
+              callback: function(t, i, a) {
+                const r = this.getLabelForValue(t), le = this.chart.width / a.length - (E.left + E.right + He);
                 return W({
                   label: r,
-                  format: t.xAxisFormat,
+                  format: e.xAxisFormat,
                   availableSpace: le,
-                  truncate: t.truncateTickLabels
+                  truncate: e.truncateTickLabels
                 });
               }
             },
@@ -243,8 +245,8 @@ const qe = { class: "chart-plane-container" }, Je = {
               padding: 8,
               stepSize: P.value,
               min: N.value,
-              max: P.value * t.tickCount,
-              callback: (e) => Be(e, t.yAxisFormat)
+              max: P.value * e.tickCount,
+              callback: (t) => Be(t, e.yAxisFormat)
             },
             // grid lines
             grid: {
@@ -255,45 +257,45 @@ const qe = { class: "chart-plane-container" }, Je = {
           }
         }
       }
-    })), w = k(null), d = k(null), { position: I } = Fe(
+    })), V = k(null), d = k(null), { position: w } = _e(
       m,
-      w,
+      V,
       d,
-      t.tooltipRespectsTopEdge
+      e.tooltipRespectsTopEdge
     ), Q = l(() => ({
-      left: `${I.value.left}px`,
-      top: `${I.value.top}px`,
+      left: `${w.value.left}px`,
+      top: `${w.value.top}px`,
       opacity: d.value?.opacity || 0
-    })), { minValue: N, maxValue: ee } = Ke({
-      parsingConfig: O.value,
+    })), { minValue: N, maxValue: ee } = Me({
+      parsingConfig: D.value,
       dataSets: y,
       isStacked: v
     }), P = l(
-      () => Oe(N.value, ee.value, t.tickCount)
+      () => De(N.value, ee.value, e.tickCount)
     ), te = l(
-      () => (t.compactHeader ? Ie : we) + "px"
+      () => (e.compactHeader ? we : Ve) + "px"
     );
     T(
-      () => t.highlightedId,
-      (e) => {
-        n && (Ze(e) ? oe() : ae(e), n.update());
+      () => e.highlightedId,
+      (t) => {
+        n && (Xe(t) ? oe() : ae(t), n.update());
       }
     );
-    const ae = (e) => {
+    const ae = (t) => {
       (n?.data.datasets || []).forEach((a) => {
-        Xe(a);
+        je(a);
         const r = a[K];
-        a.id === e ? t.chartType === c.StackedLine && (a.backgroundColor = f(
+        a.id === t ? e.chartType === c.StackedLine && (a.backgroundColor = f(
           r,
           Ne
         )) : (a.backgroundColor = f(r, C), a.borderColor = f(r, C), a.pointBackgroundColor = f(r, C), a.pointHoverBorderColor = f(r, C));
       });
     }, oe = () => {
-      (n?.data.datasets || []).forEach(je);
+      (n?.data.datasets || []).forEach(qe);
     };
-    return (e, i) => (p(), S("div", qe, [
-      s(u) || o.keepSubheaderVisible ? (p(), S("div", Je, [
-        ce(Me, {
+    return (t, i) => (p(), x("div", Je, [
+      s(u) || o.keepSubheaderVisible ? (p(), x("div", Qe, [
+        ce(Ue, {
           "chart-type": s(g),
           "onUpdate:chart-type": i[0] || (i[0] = (a) => de(g) ? g.value = a : null),
           "type-switcher": s(u) ? o.typeSwitcher : !1,
@@ -305,41 +307,42 @@ const qe = { class: "chart-plane-container" }, Je = {
           "trend-value": s(u) ? o.trendValue : null,
           "trend-direction": o.trendDirection
         }, ue({ _: 2 }, [
-          e.$slots["subheader-tooltip"] ? {
+          t.$slots["subheader-tooltip"] ? {
             name: "subheader-tooltip",
             fn: pe(() => [
-              fe(e.$slots, "subheader-tooltip", {}, void 0, !0)
+              fe(t.$slots, "subheader-tooltip", {}, void 0, !0)
             ]),
             key: "0"
           } : void 0
         ]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction"])
       ])) : A("", !0),
-      s(u) ? (p(), S("section", Qe, [
-        x("div", et, [
-          x("canvas", {
+      s(u) ? (p(), x("section", et, [
+        S("div", tt, [
+          S("canvas", {
             ref_key: "chartRef",
             ref: m,
             class: "chart__canvas"
           }, null, 512),
-          x("div", {
+          S("div", {
             ref_key: "tooltipRef",
-            ref: w,
+            ref: V,
             class: "chart__tooltip",
             style: he(s(Q))
           }, [
-            d.value ? (p(), L(_e, {
+            d.value ? (p(), L(Ke, {
               key: 0,
               "totals-chart": s(h),
               title: String(d.value.title),
               "data-points": d.value.dataPoints,
               "x-axis-format": o.xAxisFormat,
               "y-axis-format": o.yAxisFormat,
+              "x-axis-date-interval": o.xAxisDateInterval,
               "total-label": d.value.footer?.[0],
               "total-value": Number(d.value.footer?.[1])
-            }, null, 8, ["totals-chart", "title", "data-points", "x-axis-format", "y-axis-format", "total-label", "total-value"])) : A("", !0)
+            }, null, 8, ["totals-chart", "title", "data-points", "x-axis-format", "y-axis-format", "x-axis-date-interval", "total-label", "total-value"])) : A("", !0)
           ], 4)
         ])
-      ])) : o.loading ? (p(), L(Ye, {
+      ])) : o.loading ? (p(), L($e, {
         key: 2,
         class: "chart-loading"
       })) : s(R) ? (p(), L(s(Ge), {
@@ -353,5 +356,5 @@ const qe = { class: "chart-plane-container" }, Je = {
   }
 });
 export {
-  Ct as default
+  gt as default
 };

package/components/chart/ChartStoryArgs.d.ts

@@ -1,4 +1,4 @@
-import { ChartType, TooltipOrder, TrendDirection } from '@/components/chart/types';
+import { ChartType, DateInterval, TooltipOrder, TrendDirection } from '@/components/chart/types';
 export declare const chartStoryArgs: {
     chartType: {
         control: {
@@ -17,6 +17,10 @@ export declare const chartStoryArgs: {
         options: string[];
         description: string;
     };
+    xAxisDateInterval: {
+        options: DateInterval[];
+        description: string;
+    };
     parsing: {
         description: string;
     };
@@ -112,6 +116,12 @@ export declare const chartStoryArgs: {
             type: string;
         };
     };
+    empty: {
+        description: string;
+        control: {
+            type: string;
+        };
+    };
     withAnimation: {
         control: {
             type: string;

package/components/chart/ChartTooltip.vue.d.ts

@@ -1,9 +1,10 @@
-import { MyTooltipItem, ValueFormat } from '@/components/chart/types';
+import { DateInterval, MyTooltipItem, ValueFormat } from '@/components/chart/types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string;
     dataPoints: MyTooltipItem<'line'>[];
     xAxisFormat?: ValueFormat;
     yAxisFormat?: ValueFormat;
+    xAxisDateInterval?: DateInterval;
     totalLabel?: string;
     totalValue?: number;
     totalsChart?: boolean;
@@ -12,6 +13,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     dataPoints: () => any[];
     xAxisFormat: any;
     yAxisFormat: any;
+    xAxisDateInterval: any;
     totalLabel: string;
     totalValue: any;
     totalsChart: boolean;
@@ -20,6 +22,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     dataPoints: MyTooltipItem<'line'>[];
     xAxisFormat?: ValueFormat;
     yAxisFormat?: ValueFormat;
+    xAxisDateInterval?: DateInterval;
     totalLabel?: string;
     totalValue?: number;
     totalsChart?: boolean;
@@ -28,12 +31,14 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     dataPoints: () => any[];
     xAxisFormat: any;
     yAxisFormat: any;
+    xAxisDateInterval: any;
     totalLabel: string;
     totalValue: any;
     totalsChart: boolean;
 }>>>, {
     title: string;
     xAxisFormat: ValueFormat;
+    xAxisDateInterval: DateInterval;
     dataPoints: MyTooltipItem<'line'>[];
     totalsChart: boolean;
     yAxisFormat: ValueFormat;

package/components/chart/ChartTooltip.vue.js

@@ -1,7 +1,7 @@
 import o from "./ChartTooltip.vue2.js";
-/* empty css                   */import t from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_9e521454_lang.css"; //*');
-const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9e521454"]]);
+/* empty css                   */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_cb98e9e3_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-cb98e9e3"]]);
 export {
   s as default
 };

package/components/chart/ChartTooltip.vue2.js

@@ -1,67 +1,69 @@
- import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_9e521454_lang.css"; import { defineComponent as y, openBlock as a, createElementBlock as o, createBlock as u, createCommentVNode as r, Fragment as x, renderList as h, createElementVNode as m, normalizeStyle as p, unref as l, createVNode as s, withCtx as i, createTextVNode as n, toDisplayString as d } from "vue";
-import c from "../typography/v4/Typography.vue.js";
+ import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_cb98e9e3_lang.css"; import { defineComponent as x, openBlock as a, createElementBlock as o, createBlock as c, createCommentVNode as r, Fragment as y, renderList as h, createElementVNode as m, normalizeStyle as v, unref as l, createVNode as i, withCtx as s, createTextVNode as n, toDisplayString as d } from "vue";
+import u from "../typography/v4/Typography.vue.js";
 import b from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
 import { formatValue as f } from "./utils/utils.js";
 import k from "./TooltipHeader.vue.js";
-const C = { class: "chart-tooltip" }, g = {
+const p = { class: "chart-tooltip" }, C = {
   key: 1,
   class: "list"
-}, v = { class: "popover-label-wrapper" }, V = {
+}, g = { class: "popover-label-wrapper" }, V = {
   key: 2,
   class: "tooltip-footer"
-}, z = /* @__PURE__ */ y({
+}, L = /* @__PURE__ */ x({
   __name: "ChartTooltip",
   props: {
     title: { default: "" },
     dataPoints: { default: () => [] },
     xAxisFormat: { default: null },
     yAxisFormat: { default: null },
+    xAxisDateInterval: { default: null },
     totalLabel: { default: "Total" },
     totalValue: { default: null },
     totalsChart: { type: Boolean, default: !1 }
   },
   setup(t) {
-    return (F, T) => (a(), o("div", C, [
-      t.title ? (a(), u(k, {
+    return (A, F) => (a(), o("div", p, [
+      t.title ? (a(), c(k, {
         key: 0,
         title: t.title,
         "data-points": t.dataPoints,
         "totals-chart": t.totalsChart,
-        "x-axis-format": t.xAxisFormat
-      }, null, 8, ["title", "data-points", "totals-chart", "x-axis-format"])) : r("", !0),
-      t.totalsChart ? r("", !0) : (a(), o("ul", g, [
-        (a(!0), o(x, null, h(t.dataPoints, (e) => (a(), o("li", {
+        "x-axis-format": t.xAxisFormat,
+        "x-axis-date-interval": t.xAxisDateInterval
+      }, null, 8, ["title", "data-points", "totals-chart", "x-axis-format", "x-axis-date-interval"])) : r("", !0),
+      t.totalsChart ? r("", !0) : (a(), o("ul", C, [
+        (a(!0), o(y, null, h(t.dataPoints, (e) => (a(), o("li", {
           key: e.datasetIndex,
           class: "list__item"
         }, [
           m("span", {
             class: "color-box",
-            style: p({
+            style: v({
               backgroundColor: String(e.dataset.pointBackgroundColor)
             })
           }, null, 4),
-          e.dataset.icon ? (a(), u(l(b), {
+          e.dataset.icon ? (a(), c(l(b), {
             key: 0,
             class: "platform-icon",
             type: e.dataset.iconType,
             name: e.dataset.icon,
             size: "16px"
           }, null, 8, ["type", "name"])) : r("", !0),
-          m("div", v, [
-            s(l(c), {
+          m("div", g, [
+            i(l(u), {
               variant: "body2",
               class: "flex-grow truncated-label",
               "is-truncated": ""
             }, {
-              default: i(() => [
+              default: s(() => [
                 n(d(e.dataset.label), 1)
               ]),
               _: 2
             }, 1024)
           ]),
-          s(l(c), { variant: "body2" }, {
-            default: i(() => [
+          i(l(u), { variant: "body2" }, {
+            default: s(() => [
               n(d(l(f)(e.parsed.y, t.yAxisFormat)), 1)
             ]),
             _: 2
@@ -69,17 +71,17 @@ const C = { class: "chart-tooltip" }, g = {
         ]))), 128))
       ])),
       t.totalValue !== null ? (a(), o("div", V, [
-        s(l(c), {
+        i(l(u), {
           variant: "body2",
           class: "flex-grow"
         }, {
-          default: i(() => [
+          default: s(() => [
             n(d(t.totalLabel), 1)
           ]),
           _: 1
         }),
-        s(l(c), { variant: "body2" }, {
-          default: i(() => [
+        i(l(u), { variant: "body2" }, {
+          default: s(() => [
             n(d(l(f)(t.totalValue, t.yAxisFormat)), 1)
           ]),
           _: 1
@@ -89,5 +91,5 @@ const C = { class: "chart-tooltip" }, g = {
   }
 });
 export {
-  z as default
+  L as default
 };

package/components/chart/TooltipHeader.vue.d.ts

@@ -1,27 +1,32 @@
-import { MyTooltipItem, ValueFormat } from '@/components/chart/types';
+import { DateInterval, MyTooltipItem, ValueFormat } from '@/components/chart/types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     title?: string;
     xAxisFormat?: ValueFormat;
+    xAxisDateInterval?: DateInterval;
     dataPoints: MyTooltipItem<'line'>[];
     totalsChart?: boolean;
 }>, {
     title: string;
     xAxisFormat: any;
+    xAxisDateInterval: any;
     dataPoints: () => any[];
     totalsChart: boolean;
 }>, {}, 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<{
     title?: string;
     xAxisFormat?: ValueFormat;
+    xAxisDateInterval?: DateInterval;
     dataPoints: MyTooltipItem<'line'>[];
     totalsChart?: boolean;
 }>, {
     title: string;
     xAxisFormat: any;
+    xAxisDateInterval: any;
     dataPoints: () => any[];
     totalsChart: boolean;
 }>>>, {
     title: string;
     xAxisFormat: ValueFormat;
+    xAxisDateInterval: DateInterval;
     dataPoints: MyTooltipItem<'line'>[];
     totalsChart: boolean;
 }>;

package/components/chart/TooltipHeader.vue.js

@@ -1,7 +1,7 @@
 import o from "./TooltipHeader.vue2.js";
 /* empty css                    */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../TooltipHeader.vue_vue_type_style_index_0_scoped_9f6cf389_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-9f6cf389"]]);
+// import "../../TooltipHeader.vue_vue_type_style_index_0_scoped_3b15c693_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-3b15c693"]]);
 export {
   s as default
 };