@ironsource/shared-ui 2.1.12-test.61 → 2.1.12-test.62

package/components/chart/ChartPlane.vue2.js

@@ -1,35 +1,43 @@
- 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";
-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";
-import { HoverVerticalLine as Ct } from "./plugins/HoverVerticalLine.js";
-import { formatValue as F, calcStepSize as bt } from "./utils/utils.js";
-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";
-import { ChartType as n } from "./types.js";
-import { useTooltipPosition as Lt } from "./composables/useTooltipPosition.js";
-import Et from "./ChartTooltip.vue.js";
-import { hexColorToRgba as At } from "../../utils/color.js";
-import { useChartValues as Bt } from "./composables/useChartValues.js";
-import Rt from "./ChartHeader.vue.js";
-import { useVModel as wt } from "@vueuse/core";
-import Dt from "../emptyState/v4/EmptyStateV4.vue.js";
-import Vt from "./ChartLoader.vue.js";
-import { DEFAULT_CHART_COLOR as Ht } from "./colorPalette.js";
-import { TotalType as z, calculateTotal as Ot } from "../../utils/totals.js";
-const Ft = {
+ import "../../ChartPlane.vue_vue_type_style_index_0_scoped_10b18e17_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 { 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 { 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 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 = {
   key: 0,
+  class: "header-wrapper"
+}, Qe = {
+  key: 1,
   class: "chart-plane"
-}, It = { class: "header-wrapper" }, Pt = { class: "chart" }, te = /* @__PURE__ */ q({
+}, et = { class: "chart" }, Ct = /* @__PURE__ */ re({
   __name: "ChartPlane",
   props: {
     dataSets: { default: () => [] },
     visibleIds: { default: () => [] },
-    chartType: { default: n.Line },
+    highlightedId: { default: null },
+    chartType: { default: c.Line },
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
-    tickCount: { default: gt },
+    tickCount: { default: De },
+    truncateTickLabels: { type: Boolean, default: !0 },
     header: { default: "" },
     subheader: { default: "" },
     subheaderTooltip: { default: null },
+    keepSubheaderVisible: { type: Boolean, default: !1 },
     loading: { type: Boolean, default: !1 },
     noDataIcon: { default: "file-search" },
     noDataTitle: { default: "No data to display" },
@@ -39,281 +47,311 @@ const Ft = {
     height: { default: "100%" },
     compactHeader: { type: Boolean, default: !1 },
     tooltipRespectsTopEdge: { type: Boolean, default: !0 },
-    tooltipTotalType: { default: z.Total },
-    tooltipTotalCalcFn: { type: Function, default: Ot },
+    tooltipTotalType: { default: Y.Total },
+    tooltipTotalCalcFn: { type: Function, default: We },
+    tooltipOrder: { default: G.Legend },
     trendValue: { default: null },
-    trendDirection: { default: "up" },
+    trendDirection: { default: Pe.UP },
     trendTooltip: { default: null },
     totalsChart: { type: Boolean, default: !1 },
     colorsMap: { default: () => ({}) }
   },
   emits: ["update:chartType"],
-  setup(a, { emit: K }) {
-    const t = a;
-    J((e) => ({
-      "4640c185": c(j),
-      "07515470": a.height
-    })), O.register(
-      nt,
-      st,
-      ct,
-      dt,
-      ut,
-      pt,
-      ft,
-      ht,
-      mt,
-      vt,
-      yt,
-      Tt,
-      Ct
+  setup(o, { emit: $ }) {
+    const t = o;
+    ie((e) => ({
+      a21c731a: s(te),
+      "2855275e": o.height
+    }));
+    const W = Ue(Re);
+    F.register(
+      me,
+      ve,
+      ye,
+      Te,
+      Ce,
+      ge,
+      be,
+      ke,
+      Se,
+      Ae,
+      xe,
+      Le,
+      Ee
     );
-    const v = wt(t, "chartType", K), U = o(
+    const g = ze(t, "chartType", $), Z = l(
       () => t.withAnimation ? "" : "none"
-    ), d = C(null);
-    let s = null;
-    const k = o(() => t.dataSets.length === 0), x = o(() => !t.loading && !k.value), y = () => {
-      d.value && (s && s.destroy(), s = new O(d.value, B.value));
-    }, $ = () => {
-      s && (s.data.datasets = A.value, s.options = B.value.options, s.update(U.value));
+    ), 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));
+    }, X = () => {
+      n && (n.data.datasets = H.value, n.options = V.value.options, n.update(Z.value));
     };
-    Q(y), b(() => t.chartType, y), b(x, async (e) => {
-      e && (await X(), y());
-    }), b([() => t.visibleIds, () => t.dataSets], $);
-    const u = o(() => t.totalsChart), p = o(
-      () => t.chartType === n.StackedLine || t.chartType === n.StackedBar || u.value
-    ), S = o(
-      () => t.chartType === n.Line || t.chartType === n.StackedLine
-    ), L = o(() => u.value ? { ...t.parsing, xAxisKey: I } : t.parsing), G = o(() => u.value ? t.dataSets.map((e) => ({
+    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
+    ), 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((r) => ({
-        ...r,
-        [I]: e.label
+      data: e.data.map((i) => ({
+        ...i,
+        [_]: e.label
       }))
-    })) : t.dataSets), f = o(
-      () => G.value.filter((e) => t.visibleIds.includes(e.id))
-    ), W = (e) => t.colorsMap[e] || Ht, E = o(
-      () => f.value.length && f.value.every(
+    })) : t.dataSets), y = l(
+      () => j.value.filter((e) => t.visibleIds.includes(e.id))
+    ), q = (e) => t.colorsMap[e] || $e, D = l(
+      () => y.value.length && y.value.every(
         (e) => e.data.length === 1
       )
-    ), A = o(() => f.value.map((e, r) => {
-      const i = W(e.id), T = p.value ? r !== 0 ? "-1" : "start" : void 0;
+    ), H = l(() => y.value.map((e, i) => {
+      const a = q(e.id), r = v.value ? i !== 0 ? "-1" : "start" : void 0;
       return {
         ...e,
-        fill: T,
-        backgroundColor: At(
-          i,
-          t.chartType === n.StackedLine ? 10 : 70
+        fill: r,
+        backgroundColor: f(
+          a,
+          t.chartType === c.StackedLine ? 10 : 70
         ),
-        borderColor: i,
-        pointBackgroundColor: i,
-        pointHoverBorderColor: i,
+        borderColor: a,
+        pointBackgroundColor: a,
+        pointHoverBorderColor: a,
         maxBarThickness: 50,
         clip: 5,
         // draw a bit outside the chart area
         icon: e.icon || null,
-        iconType: e.iconType || "branded"
+        iconType: e.iconType || "branded",
+        [K]: a
+        // store base color for later use
       };
-    })), _ = o(
-      () => t.tooltipTotalType === z.Total ? "Total" : "Mean"
-    ), B = o(
-      () => ({
-        type: t.chartType == n.Bar || t.chartType === n.StackedBar ? "bar" : "line",
-        // Chart Data
-        data: {
-          datasets: A.value
+    })), J = l(
+      () => t.tooltipTotalType === Y.Total ? "Total" : "Mean"
+    ), V = l(() => ({
+      type: t.chartType == c.Bar || t.chartType === c.StackedBar ? "bar" : "line",
+      // Chart Data
+      data: {
+        datasets: H.value
+      },
+      // Chart Options
+      options: {
+        parsing: O.value,
+        interaction: {
+          intersect: !1,
+          mode: h.value ? "point" : "index",
+          axis: "x"
         },
-        // Chart Options
-        options: {
-          parsing: L.value,
-          interaction: {
-            intersect: !1,
-            mode: u.value ? "point" : "index",
-            axis: "x"
-          },
-          // plugins
-          plugins: {
-            legend: { display: !1 },
-            title: { display: !1 },
-            hoverVerticalLine: S.value,
-            // tooltip
-            tooltip: {
-              enabled: !1,
-              position: "average",
-              external: ({ tooltip: e }) => {
-                l.value = { ...e };
-              },
-              callbacks: {
-                footer: (e) => {
-                  const r = e.map((T) => T.parsed.y || 0), i = t.tooltipTotalCalcFn(
-                    r,
-                    t.tooltipTotalType
-                  );
-                  return [_.value, String(i)];
-                }
+        // plugins
+        plugins: {
+          legend: { display: !1 },
+          title: { display: !1 },
+          hoverVerticalLine: B.value,
+          // tooltip
+          tooltip: {
+            enabled: !1,
+            position: "average",
+            external: ({ tooltip: e }) => {
+              d.value = { ...e };
+            },
+            callbacks: {
+              footer: (e) => {
+                const i = e.map((r) => r.parsed.y || 0), a = t.tooltipTotalCalcFn(
+                  i,
+                  t.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;
+                return a === r ? 0 : a > r ? -1 : 1;
               }
+              return 0;
             }
+          }
+        },
+        // chart layout
+        responsive: !0,
+        maintainAspectRatio: !1,
+        layout: {
+          padding: E
+        },
+        // basic styles
+        elements: {
+          line: {
+            borderWidth: 2,
+            tension: 0.3
           },
-          // chart layout
-          responsive: !0,
-          maintainAspectRatio: !1,
-          layout: {
-            padding: {
-              left: 18,
-              top: 18,
-              bottom: 11
-            }
+          point: {
+            radius: D.value ? 3 : 1,
+            hitRadius: 8,
+            borderWidth: 0,
+            hoverRadius: 4,
+            hoverBorderWidth: 2,
+            pointHoverBackgroundColor: He
           },
-          // basic styles
-          elements: {
-            line: {
-              borderWidth: 2,
-              tension: 0.3
-            },
-            point: {
-              radius: E.value ? 3 : 1,
-              hitRadius: 8,
-              borderWidth: 0,
-              hoverRadius: 4,
-              hoverBorderWidth: 2,
-              pointHoverBackgroundColor: kt
+          bar: {
+            borderRadius: 4
+          }
+        },
+        scales: {
+          // Horizontal Axis (X)
+          x: {
+            beginAtZero: !0,
+            offset: !B.value || D.value,
+            border: { display: !1 },
+            stacked: v.value,
+            // stack on top of each other
+            // ticks
+            ticks: {
+              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);
+                return W({
+                  label: r,
+                  format: t.xAxisFormat,
+                  availableSpace: le,
+                  truncate: t.truncateTickLabels
+                });
+              }
             },
-            bar: {
-              borderRadius: 4
+            // grid lines
+            grid: {
+              color: z,
+              drawOnChartArea: !1,
+              drawTicks: !0,
+              drawBorder: !1,
+              tickLength: 7
             }
           },
-          scales: {
-            // Horizontal Axis (X)
-            x: {
-              beginAtZero: !0,
-              offset: !S.value || E.value,
-              border: { display: !1 },
-              stacked: p.value,
-              // stack on top of each other
-              // ticks
-              ticks: {
-                color: P,
-                font: N,
-                padding: 4,
-                callback: function(e) {
-                  return F(
-                    this.getLabelForValue(e),
-                    t.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: v.value,
+            // stack on top of each other
+            // ticks
+            ticks: {
+              color: M,
+              font: U,
+              padding: 8,
+              stepSize: P.value,
+              min: N.value,
+              max: P.value * t.tickCount,
+              callback: (e) => Be(e, t.yAxisFormat)
             },
-            // Vertical Axis (Y)
-            y: {
-              beginAtZero: !0,
-              border: { display: !1 },
-              // hide left borderline
-              stacked: p.value,
-              // stack on top of each other
-              // ticks
-              ticks: {
-                color: P,
-                font: N,
-                padding: 8,
-                stepSize: V.value,
-                min: D.value,
-                max: V.value * t.tickCount,
-                callback: (e) => F(e, t.yAxisFormat)
-              },
-              // grid lines
-              grid: {
-                color: M,
-                drawOnChartArea: !0,
-                drawTicks: !1
-              }
+            // grid lines
+            grid: {
+              color: z,
+              drawOnChartArea: !0,
+              drawTicks: !1
             }
           }
         }
-      })
-    ), R = C(null), l = C(null), { position: w } = Lt(
+      }
+    })), w = k(null), d = k(null), { position: I } = Fe(
+      m,
+      w,
       d,
-      R,
-      l,
       t.tooltipRespectsTopEdge
-    ), Z = o(() => ({
-      left: `${w.value.left}px`,
-      top: `${w.value.top}px`,
-      opacity: l.value?.opacity || 0
-    })), { minValue: D, maxValue: Y } = Bt({
-      parsingConfig: L.value,
-      dataSets: f,
-      isStacked: p
-    }), V = o(
-      () => bt(D.value, Y.value, t.tickCount)
-    ), j = o(
-      () => (t.compactHeader ? St : xt) + "px"
+    ), Q = l(() => ({
+      left: `${I.value.left}px`,
+      top: `${I.value.top}px`,
+      opacity: d.value?.opacity || 0
+    })), { minValue: N, maxValue: ee } = Ke({
+      parsingConfig: O.value,
+      dataSets: y,
+      isStacked: v
+    }), P = l(
+      () => Oe(N.value, ee.value, t.tickCount)
+    ), te = l(
+      () => (t.compactHeader ? Ie : we) + "px"
     );
-    return (e, r) => c(x) ? (h(), tt("section", Ft, [
-      m("div", It, [
-        et(Rt, {
-          "chart-type": c(v),
-          "onUpdate:chart-type": r[0] || (r[0] = (i) => at(v) ? v.value = i : null),
-          "type-switcher": a.typeSwitcher,
-          header: a.header,
-          subheader: a.subheader,
-          "subheader-tooltip": a.subheaderTooltip,
-          "trend-tooltip": a.trendTooltip,
-          compact: a.compactHeader,
-          "trend-value": a.trendValue,
-          "trend-direction": a.trendDirection
-        }, ot({ _: 2 }, [
+    T(
+      () => t.highlightedId,
+      (e) => {
+        n && (Ze(e) ? oe() : ae(e), n.update());
+      }
+    );
+    const ae = (e) => {
+      (n?.data.datasets || []).forEach((a) => {
+        Xe(a);
+        const r = a[K];
+        a.id === e ? t.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);
+    };
+    return (e, i) => (p(), S("div", qe, [
+      s(u) || o.keepSubheaderVisible ? (p(), S("div", Je, [
+        ce(Me, {
+          "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,
+          header: s(u) ? o.header : null,
+          subheader: o.subheader,
+          "subheader-tooltip": o.subheaderTooltip,
+          "trend-tooltip": o.trendTooltip,
+          compact: o.compactHeader,
+          "trend-value": s(u) ? o.trendValue : null,
+          "trend-direction": o.trendDirection
+        }, ue({ _: 2 }, [
           e.$slots["subheader-tooltip"] ? {
             name: "subheader-tooltip",
-            fn: lt(() => [
-              rt(e.$slots, "subheader-tooltip", {}, void 0, !0)
+            fn: pe(() => [
+              fe(e.$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"])
-      ]),
-      m("div", Pt, [
-        m("canvas", {
-          ref_key: "chartRef",
-          ref: d,
-          class: "chart__canvas"
-        }, null, 512),
-        m("div", {
-          ref_key: "tooltipRef",
-          ref: R,
-          class: "chart__tooltip",
-          style: it(c(Z))
-        }, [
-          l.value ? (h(), g(Et, {
-            key: 0,
-            title: String(l.value.title),
-            "data-points": l.value.dataPoints,
-            "x-axis-format": a.xAxisFormat,
-            "y-axis-format": a.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"])) : H("", !0)
-        ], 4)
-      ])
-    ])) : a.loading ? (h(), g(Vt, {
-      key: 1,
-      class: "chart-loading"
-    })) : c(k) ? (h(), g(c(Dt), {
-      key: 2,
-      class: "chart-empty",
-      title: a.noDataTitle,
-      subtitle: a.noDataSubtitle,
-      "icon-name": a.noDataIcon
-    }, null, 8, ["title", "subtitle", "icon-name"])) : H("", !0);
+      ])) : A("", !0),
+      s(u) ? (p(), S("section", Qe, [
+        x("div", et, [
+          x("canvas", {
+            ref_key: "chartRef",
+            ref: m,
+            class: "chart__canvas"
+          }, null, 512),
+          x("div", {
+            ref_key: "tooltipRef",
+            ref: w,
+            class: "chart__tooltip",
+            style: he(s(Q))
+          }, [
+            d.value ? (p(), L(_e, {
+              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,
+              "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)
+          ], 4)
+        ])
+      ])) : o.loading ? (p(), L(Ye, {
+        key: 2,
+        class: "chart-loading"
+      })) : s(R) ? (p(), L(s(Ge), {
+        key: 3,
+        class: "chart-empty",
+        title: o.noDataTitle,
+        subtitle: o.noDataSubtitle,
+        "icon-name": o.noDataIcon
+      }, null, 8, ["title", "subtitle", "icon-name"])) : A("", !0)
+    ]));
   }
 });
 export {
-  te as default
+  Ct as default
 };