@ironsource/shared-ui 2.1.12-rc.5 → 2.1.12-rc.50

package/components/chart/ChartPlane.vue2.js

@@ -1,34 +1,45 @@
- import "../../ChartPlane.vue_vue_type_style_index_0_scoped_4396faf6_lang.css"; import { defineComponent as j, useCssVars as q, unref as s, computed as a, ref as C, onMounted as J, watch as g, nextTick as Q, openBlock as f, createElementBlock as X, createElementVNode as h, createVNode as ee, isRef as te, createSlots as ae, withCtx as oe, renderSlot as re, normalizeStyle as le, createBlock as b, createCommentVNode as I } from "vue";
-import { Chart as H, ArcElement as ie, LineElement as ne, BarElement as se, PointElement as ce, LineController as de, BarController as ue, PieController as pe, ScatterController as fe, CategoryScale as he, LinearScale as me, Filler as ve, Tooltip as ye } from "chart.js";
-import { HoverVerticalLine as Ce } from "./plugins/HoverVerticalLine.js";
-import { formatValue as O, calcStepSize as ge } from "./utils/utils.js";
-import { DEFAULT_TICK_COUNT as be, TOTALS_HELPER_KEY as P, POINT_BORDER_COLOR as Te, TICK_LABEL_COLOR as F, TICK_LABEL_FONT as N, GRID_LINE_COLOR as M, HEADER_HEIGHT as ke, COMPACT_HEADER_HEIGHT as xe } from "./consts.js";
-import { ChartType as i } from "./types.js";
-import { useTooltipPosition as Se } from "./composables/useTooltipPosition.js";
-import Le from "./ChartTooltip.vue.js";
-import { hexColorToRgba as Ee } from "../../utils/color.js";
-import { useChartValues as Be } from "./composables/useChartValues.js";
-import Ae from "./ChartHeader.vue.js";
-import { useVModel as Re } from "@vueuse/core";
-import we from "../emptyState/v4/EmptyStateV4.vue.js";
-import Ve from "./ChartLoader.vue.js";
-import { useColorsMap as De } from "./composables/useColorsMap.js";
-const Ie = {
+ import "../../ChartPlane.vue_vue_type_style_index_0_scoped_908ef54f_lang.css"; import { defineComponent as re, useCssVars as ie, unref as s, computed as i, ref as S, onMounted as ne, watch as T, nextTick as se, openBlock as p, createElementBlock as E, createVNode as de, isRef as ce, createSlots as ue, withCtx as fe, renderSlot as pe, createCommentVNode as L, createElementVNode as R, normalizeStyle as he, createBlock as D } from "vue";
+import { Chart as V, ArcElement as me, LineElement as ve, BarElement as Te, PointElement as ye, LineController as Ce, BarController as ge, PieController as be, ScatterController as xe, CategoryScale as Ae, LinearScale as ke, Filler as Se, Tooltip as Ee } from "chart.js";
+import { HoverVerticalLine as Le } from "./plugins/HoverVerticalLine.js";
+import { prepareTickLabel as Re, formatValue as De } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as Be, TOTALS_HELPER_KEY as F, LINE_DASH_STYLE as Ie, BASE_COLOR_KEY as _, CHART_PADDING as Oe, POINT_BORDER_COLOR as Ne, TICK_LABEL_COLOR as M, TICK_LABEL_FONT as Y, TICKS_EXTRA_PADDING as Pe, GRID_LINE_COLOR as K, HEADER_HEIGHT as He, COMPACT_HEADER_HEIGHT as we, HOVER_AREA_TRANSPARENCY as Ve, HOVER_TRANSPARENCY as y, CHART_ITEM_TRANSPARENCY as Fe, INCOMPLETE_DATA_BAR_TRANSPARENCY as _e, STACKED_LINE_TRANSPARENCY as Me } from "./consts.js";
+import { ChartType as d, DateInterval as Ye, TooltipOrder as U, TrendDirection as Ke } from "./types.js";
+import { useTooltipPosition as Ue } from "./composables/useTooltipPosition.js";
+import Ge from "./ChartTooltip.vue.js";
+import { hexColorToRgba as h } from "../../utils/color.js";
+import $e from "./ChartHeader.vue.js";
+import { useMemoize as ze, useVModel as We } from "@vueuse/core";
+import Ze from "../emptyState/v4/EmptyStateV4.vue.js";
+import Xe from "./ChartLoader.vue.js";
+import { DEFAULT_CHART_COLOR as je } from "./colorPalette.js";
+import { TotalType as G, calculateTotal as qe } from "../../utils/totals.js";
+import { isNullOrUndefined as Je } from "../../utils/utils.js";
+import { storeOriginalDatasetColors as Qe, restoreOriginalDatasetColors as et } from "./utils/highlightUtils.js";
+const tt = { class: "chart-plane-container" }, at = {
   key: 0,
+  class: "header-wrapper"
+}, ot = {
+  key: 1,
   class: "chart-plane"
-}, He = { class: "header-wrapper" }, Oe = { class: "chart" }, Je = /* @__PURE__ */ j({
+}, lt = { class: "chart" }, xt = /* @__PURE__ */ re({
   __name: "ChartPlane",
   props: {
     dataSets: { default: () => [] },
     visibleIds: { default: () => [] },
-    chartType: { default: i.Line },
+    highlightedId: { default: null },
+    chartType: { default: d.Line },
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
-    tickCount: { default: be },
+    xAxisDateInterval: { default: Ye.DAILY },
+    tickCount: { default: Be },
+    truncateTickLabels: { type: Boolean, default: !1 },
     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" },
@@ -36,271 +47,335 @@ const Ie = {
     typeSwitcher: { type: Boolean, default: !0 },
     height: { default: "100%" },
     compactHeader: { type: Boolean, default: !1 },
+    noteText: { default: "" },
     tooltipRespectsTopEdge: { type: Boolean, default: !0 },
+    tooltipTotalType: { default: G.Total },
+    tooltipTotalCalcFn: { type: Function, default: qe },
+    tooltipOrder: { default: U.Legend },
     trendValue: { default: null },
-    trendDirection: { default: "up" },
-    totalsChart: { type: Boolean, default: !1 }
+    trendDirection: { default: Ke.UP },
+    trendTooltip: { default: null },
+    totalsChart: { type: Boolean, default: !1 },
+    colorsMap: { default: () => ({}) },
+    valueSuffix: { default: "" },
+    valuePrefix: { default: "" },
+    indicateIncompleteData: { type: Boolean, default: !1 },
+    tooltipExcludeTotalItem: { type: Boolean, default: !1 }
   },
   emits: ["update:chartType"],
-  setup(o, { emit: z }) {
+  setup(o, { emit: $ }) {
     const e = o;
-    q((t) => ({
-      "86c5ce4e": s(Z),
-      "27543fc4": o.height
-    })), H.register(
-      ie,
-      ne,
-      se,
-      ce,
-      de,
-      ue,
-      pe,
-      fe,
-      he,
+    ie((t) => ({
+      "00ed3012": s(ae),
+      "38d88ce2": o.height
+    }));
+    const z = ze(Re);
+    V.register(
       me,
       ve,
+      Te,
       ye,
-      Ce
+      Ce,
+      ge,
+      be,
+      xe,
+      Ae,
+      ke,
+      Se,
+      Ee,
+      Le
     );
-    const m = Re(e, "chartType", z), K = a(
+    const C = We(e, "chartType", $), W = i(
       () => e.withAnimation ? "" : "none"
-    ), c = C(null);
+    ), v = S(null);
     let n = null;
-    const T = a(() => e.dataSets.length === 0), k = a(() => !e.loading && !T.value), v = () => {
-      c.value && (n && n.destroy(), n = new H(c.value, A.value));
-    }, _ = () => {
-      n && (n.data.datasets = E.value, n.options = A.value.options, n.update(K.value));
+    const B = i(() => e.empty || e.dataSets.length === 0), u = i(() => !e.loading && !B.value), g = () => {
+      v.value && (n && n.destroy(), n = new V(v.value, N.value));
+    }, Z = () => {
+      n && (n.data.datasets = O.value, n.options = N.value.options, n.update(W.value));
     };
-    J(v), g(() => e.chartType, v), g(k, async (t) => {
-      t && (await Q(), v());
-    }), g([() => e.visibleIds, () => e.dataSets], _);
-    const d = a(() => e.totalsChart), u = a(
-      () => e.chartType === i.StackedLine || e.chartType === i.StackedBar || d.value
-    ), x = a(
-      () => e.chartType === i.Line || e.chartType === i.StackedLine
-    ), S = a(() => d.value ? { ...e.parsing, xAxisKey: P } : e.parsing), L = a(() => d.value ? e.dataSets.map((t) => ({
+    ne(g), T(() => e.chartType, g), T(u, async (t) => {
+      t && (await se(), g());
+    }), T(
+      [
+        () => e.visibleIds,
+        () => e.dataSets,
+        () => e.valuePrefix,
+        () => e.valueSuffix
+      ],
+      Z
+    );
+    const f = i(() => e.totalsChart), b = i(
+      () => e.chartType === d.StackedLine || e.chartType === d.StackedBar || f.value
+    ), x = i(
+      () => e.chartType === d.Line || e.chartType === d.StackedLine
+    ), X = i(() => f.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: F } : e.parsing), j = i(() => f.value ? e.dataSets.map((t) => ({
       ...t,
       data: t.data.map((r) => ({
         ...r,
-        [P]: t.label
+        [F]: t.label
       }))
-    })) : e.dataSets), U = a(() => e.visibleIds || []), p = a(
-      () => L.value.filter((t) => e.visibleIds.includes(t.id))
-    ), { colorsMap: $ } = De({ dataSets: L, visibleIds: U }), E = a(() => p.value.map((t) => {
-      const r = $.value[t.id];
+    })) : e.dataSets), A = i(
+      () => j.value.filter((t) => e.visibleIds.includes(t.id))
+    ), q = (t) => e.colorsMap[t] || je, I = i(
+      () => A.value.length && A.value.every(
+        (t) => t.data.length === 1
+      )
+    ), J = (t) => (r) => {
+      const a = r.chart.data.labels.length - 1;
+      let l = Fe;
+      return e.chartType === d.Bar && e.indicateIncompleteData && r.index === a ? l = _e : e.chartType === d.StackedLine && (l = Me), h(t, l);
+    }, O = i(() => A.value.map((t, r) => {
+      const a = q(t.id), l = b.value ? r !== 0 ? "-1" : "start" : void 0, m = e.indicateIncompleteData ? {
+        borderDash: (w) => {
+          if (w.p1DataIndex === w.chart.data.labels.length - 1)
+            return Ie;
+        }
+      } : void 0, k = J(a);
       return {
         ...t,
-        fill: u.value ? "start" : void 0,
-        backgroundColor: Ee(
-          r,
-          e.chartType === i.StackedLine ? 10 : 70
-        ),
-        borderColor: r,
-        pointBackgroundColor: r,
-        pointHoverBorderColor: r,
+        fill: l,
+        segment: m,
+        backgroundColor: k,
+        borderColor: a,
+        pointBackgroundColor: a,
+        pointHoverBorderColor: a,
         maxBarThickness: 50,
         clip: 5,
         // draw a bit outside the chart area
         icon: t.icon || null,
-        iconType: t.iconType || "branded"
+        iconType: t.iconType || "branded",
+        [_]: a
+        // store base color for later use
       };
-    })), B = a(
-      () => p.value.length && p.value.every(
-        (t) => t.data.length === 1
-      )
-    ), A = a(
-      () => ({
-        type: e.chartType == i.Bar || e.chartType === i.StackedBar ? "bar" : "line",
-        // Chart Data
-        data: {
-          datasets: E.value
+    })), Q = i(
+      () => e.tooltipTotalType === G.Total ? "Total" : "Mean"
+    ), ee = (t) => t.filter(
+      (r) => !r.dataset.isTotal
+    ), N = i(() => ({
+      type: e.chartType == d.Bar || e.chartType === d.StackedBar ? "bar" : "line",
+      // Chart Data
+      data: {
+        datasets: O.value
+      },
+      // Chart Options
+      options: {
+        parsing: X.value,
+        interaction: {
+          intersect: !1,
+          mode: f.value ? "point" : "index",
+          axis: "x"
         },
-        // Chart Options
-        options: {
-          parsing: S.value,
-          interaction: {
-            intersect: !1,
-            mode: d.value ? "point" : "index",
-            axis: "x"
-          },
-          // plugins
-          plugins: {
-            legend: { display: !1 },
-            title: { display: !1 },
-            hoverVerticalLine: x.value,
-            // tooltip
-            tooltip: {
-              enabled: !1,
-              position: "average",
-              external: ({ tooltip: t }) => {
-                l.value = { ...t };
-              },
-              callbacks: {
-                footer: (t) => {
-                  const r = t.reduce((y, Y) => y + (Y.parsed.y || 0), 0);
-                  return ["Total", String(r)];
-                }
+        // plugins
+        plugins: {
+          legend: { display: !1 },
+          title: { display: !1 },
+          hoverVerticalLine: x.value,
+          // tooltip
+          tooltip: {
+            enabled: !1,
+            position: "average",
+            external: ({ tooltip: t }) => {
+              c.value = { ...t };
+            },
+            callbacks: {
+              footer: (t) => {
+                const a = (e.tooltipExcludeTotalItem && t.length > 1 ? ee(t) : t).map((m) => m.parsed.y || 0), l = e.tooltipTotalCalcFn(
+                  a,
+                  e.tooltipTotalType
+                );
+                return [Q.value, String(l)];
               }
+            },
+            itemSort: (t, r) => {
+              if (e.tooltipOrder === U.YAxis) {
+                const a = t.parsed.y || 0, l = r.parsed.y || 0;
+                return a === l ? 0 : a > l ? -1 : 1;
+              }
+              return 0;
             }
+          }
+        },
+        // chart layout
+        responsive: !0,
+        maintainAspectRatio: !1,
+        layout: {
+          padding: Oe
+        },
+        // basic styles
+        elements: {
+          line: {
+            borderWidth: 2,
+            tension: 0
           },
-          // chart layout
-          responsive: !0,
-          maintainAspectRatio: !1,
-          layout: {
-            padding: {
-              left: 18,
-              top: 18,
-              bottom: 11
-            }
+          point: {
+            radius: I.value ? 3 : 1,
+            hitRadius: 8,
+            borderWidth: 0,
+            hoverRadius: 4,
+            hoverBorderWidth: 2,
+            pointHoverBackgroundColor: Ne
           },
-          // basic styles
-          elements: {
-            line: {
-              borderWidth: 2,
-              tension: 0.3
-            },
-            point: {
-              radius: B.value ? 3 : 1,
-              hitRadius: 8,
-              borderWidth: 0,
-              hoverRadius: 4,
-              hoverBorderWidth: 2,
-              pointHoverBackgroundColor: Te
+          bar: {
+            borderRadius: 4
+          }
+        },
+        scales: {
+          // Horizontal Axis (X)
+          x: {
+            beginAtZero: !0,
+            offset: !x.value || I.value,
+            border: { display: !1 },
+            stacked: b.value,
+            // stack on top of each other
+            // ticks
+            ticks: {
+              color: M,
+              font: Y,
+              padding: 4,
+              maxRotation: 0,
+              autoSkip: !e.truncateTickLabels,
+              autoSkipPadding: 8,
+              callback: function(t, r, a) {
+                const l = this.getLabelForValue(t), m = x.value && !f.value ? a.length - 1 : a.length, k = this.chart.scales?.x?.width / m - Pe;
+                return z({
+                  label: l,
+                  format: e.xAxisFormat,
+                  availableSpace: k,
+                  truncate: e.truncateTickLabels
+                });
+              }
             },
-            bar: {
-              borderRadius: 4
+            // grid lines
+            grid: {
+              color: K,
+              drawOnChartArea: !1,
+              drawTicks: !0,
+              drawBorder: !1,
+              tickLength: 7
             }
           },
-          scales: {
-            // Horizontal Axis (X)
-            x: {
-              beginAtZero: !0,
-              offset: !x.value || B.value,
-              border: { display: !1 },
-              stacked: u.value,
-              // stack on top of each other
-              // ticks
-              ticks: {
-                color: F,
-                font: N,
-                padding: 4,
-                callback: function(t) {
-                  return O(
-                    this.getLabelForValue(t),
-                    e.xAxisFormat
-                  );
-                }
-              },
-              // grid lines
-              grid: {
-                color: M,
-                drawOnChartArea: !1,
-                drawTicks: !0,
-                drawBorder: !1,
-                tickLength: 7
-              }
+          // Vertical Axis (Y)
+          y: {
+            beginAtZero: !0,
+            border: { display: !1 },
+            // hide left borderline
+            stacked: b.value,
+            // stack on top of each other
+            // ticks
+            ticks: {
+              color: M,
+              font: Y,
+              count: e.tickCount + 1,
+              padding: 8,
+              min: 0,
+              callback: (t) => e.valuePrefix + De(t, e.yAxisFormat, !0) + e.valueSuffix
             },
-            // Vertical Axis (Y)
-            y: {
-              beginAtZero: !0,
-              border: { display: !1 },
-              // hide left borderline
-              stacked: u.value,
-              // stack on top of each other
-              // ticks
-              ticks: {
-                color: F,
-                font: N,
-                padding: 8,
-                stepSize: D.value,
-                min: V.value,
-                max: D.value * e.tickCount,
-                callback: (t) => O(t, e.yAxisFormat)
-              },
-              // grid lines
-              grid: {
-                color: M,
-                drawOnChartArea: !0,
-                drawTicks: !1
-              }
+            // grid lines
+            grid: {
+              color: K,
+              drawOnChartArea: !0,
+              drawTicks: !1
             }
           }
         }
-      })
-    ), R = C(null), l = C(null), { position: w } = Se(
+      }
+    })), P = S(null), c = S(null), { position: H } = Ue(
+      v,
+      P,
       c,
-      R,
-      l,
       e.tooltipRespectsTopEdge
-    ), G = a(() => ({
-      left: `${w.value.left}px`,
-      top: `${w.value.top}px`,
-      opacity: l.value?.opacity || 0
-    })), { minValue: V, maxValue: W } = Be({
-      parsingConfig: S.value,
-      dataSets: p,
-      isStacked: u
-    }), D = a(
-      () => ge(V.value, W.value, e.tickCount)
-    ), Z = a(
-      () => (e.compactHeader ? xe : ke) + "px"
+    ), te = i(() => ({
+      left: `${H.value.left}px`,
+      top: `${H.value.top}px`,
+      opacity: c.value?.opacity || 0
+    })), ae = i(
+      () => (e.compactHeader ? we : He) + "px"
     );
-    return (t, r) => s(k) ? (f(), X("section", Ie, [
-      h("div", He, [
-        ee(Ae, {
-          "chart-type": s(m),
-          "onUpdate:chart-type": r[0] || (r[0] = (y) => te(m) ? m.value = y : null),
-          "type-switcher": o.typeSwitcher,
-          header: o.header,
+    T(
+      () => e.highlightedId,
+      (t) => {
+        n && (Je(t) ? le() : oe(t), n.update());
+      }
+    );
+    const oe = (t) => {
+      (n?.data.datasets || []).forEach((a) => {
+        Qe(a);
+        const l = a[_];
+        a.id === t ? e.chartType === d.StackedLine && (a.backgroundColor = h(
+          l,
+          Ve
+        )) : (a.backgroundColor = h(l, y), a.borderColor = h(l, y), a.pointBackgroundColor = h(l, y), a.pointHoverBorderColor = h(l, y));
+      });
+    }, le = () => {
+      (n?.data.datasets || []).forEach(et);
+    };
+    return (t, r) => (p(), E("div", tt, [
+      s(u) || o.keepSubheaderVisible ? (p(), E("div", at, [
+        de($e, {
+          "chart-type": s(C),
+          "onUpdate:chart-type": r[0] || (r[0] = (a) => ce(C) ? C.value = a : null),
+          "type-switcher": s(u) ? o.typeSwitcher : !1,
+          header: s(u) ? o.header : null,
           subheader: o.subheader,
+          "subheader-tooltip": o.subheaderTooltip,
+          "trend-tooltip": o.trendTooltip,
           compact: o.compactHeader,
-          "trend-value": o.trendValue,
-          "trend-direction": o.trendDirection
-        }, ae({ _: 2 }, [
+          "trend-value": s(u) ? o.trendValue : null,
+          "trend-direction": o.trendDirection,
+          "note-text": o.noteText
+        }, ue({ _: 2 }, [
           t.$slots["subheader-tooltip"] ? {
             name: "subheader-tooltip",
-            fn: oe(() => [
-              re(t.$slots, "subheader-tooltip", {}, void 0, !0)
+            fn: fe(() => [
+              pe(t.$slots, "subheader-tooltip", {}, void 0, !0)
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["chart-type", "type-switcher", "header", "subheader", "compact", "trend-value", "trend-direction"])
-      ]),
-      h("div", Oe, [
-        h("canvas", {
-          ref_key: "chartRef",
-          ref: c,
-          class: "chart__canvas"
-        }, null, 512),
-        h("div", {
-          ref_key: "tooltipRef",
-          ref: R,
-          class: "chart__tooltip",
-          style: le(s(G))
-        }, [
-          l.value ? (f(), b(Le, {
-            key: 0,
-            title: String(l.value.title),
-            "data-points": l.value.dataPoints,
-            "x-axis-format": o.xAxisFormat,
-            "y-axis-format": o.yAxisFormat,
-            "total-label": l.value.footer[0],
-            "total-value": Number(l.value.footer[1])
-          }, null, 8, ["title", "data-points", "x-axis-format", "y-axis-format", "total-label", "total-value"])) : I("", !0)
-        ], 4)
-      ])
-    ])) : o.loading ? (f(), b(Ve, {
-      key: 1,
-      class: "chart-loading"
-    })) : s(T) ? (f(), b(s(we), {
-      key: 2,
-      class: "chart-empty",
-      title: o.noDataTitle,
-      subtitle: o.noDataSubtitle,
-      "icon-name": o.noDataIcon
-    }, null, 8, ["title", "subtitle", "icon-name"])) : I("", !0);
+        ]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction", "note-text"])
+      ])) : L("", !0),
+      s(u) ? (p(), E("section", ot, [
+        R("div", lt, [
+          R("canvas", {
+            ref_key: "chartRef",
+            ref: v,
+            class: "chart__canvas"
+          }, null, 512),
+          R("div", {
+            ref_key: "tooltipRef",
+            ref: P,
+            class: "chart__tooltip",
+            style: he(s(te))
+          }, [
+            c.value ? (p(), D(Ge, {
+              key: 0,
+              "totals-chart": s(f),
+              title: String(c.value.title),
+              "data-points": c.value.dataPoints,
+              "x-axis-format": o.xAxisFormat,
+              "y-axis-format": o.yAxisFormat,
+              "x-axis-date-interval": o.xAxisDateInterval,
+              "total-label": c.value.footer?.[0],
+              "total-value": Number(c.value.footer?.[1]),
+              "value-suffix": o.valueSuffix,
+              "value-prefix": o.valuePrefix
+            }, 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"])) : L("", !0)
+          ], 4)
+        ])
+      ])) : o.loading ? (p(), D(Xe, {
+        key: 2,
+        class: "chart-loading"
+      })) : s(B) ? (p(), D(s(Ze), {
+        key: 3,
+        class: "chart-empty",
+        variant: null,
+        title: o.noDataTitle,
+        subtitle: o.noDataSubtitle,
+        "icon-name": o.noDataIcon
+      }, null, 8, ["title", "subtitle", "icon-name"])) : L("", !0)
+    ]));
   }
 });
 export {
-  Je as default
+  xt as default
 };