@ironsource/shared-ui 2.1.12-rc.9 → 2.1.12-test.1

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