@ironsource/shared-ui 2.1.12-rc.4 → 2.1.12-rc.40

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

@@ -0,0 +1,236 @@
+import { ChartDataSet, ChartParsingConfig, ChartType, DateInterval, TooltipOrder, TrendDirection, ValueFormat } from './types';
+import { TotalType } from '@/utils/totals';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    dataSets: ChartDataSet[];
+    visibleIds: unknown[];
+    highlightedId?: string | number;
+    chartType?: ChartType;
+    parsing?: ChartParsingConfig;
+    xAxisFormat?: ValueFormat;
+    yAxisFormat?: ValueFormat;
+    xAxisDateInterval?: DateInterval;
+    tickCount?: number;
+    truncateTickLabels?: boolean;
+    header?: string;
+    subheader?: string;
+    subheaderTooltip?: {
+        header?: string;
+        text?: string;
+    };
+    keepSubheaderVisible?: boolean;
+    loading?: boolean;
+    empty?: boolean;
+    noDataIcon?: string;
+    noDataTitle?: string;
+    noDataSubtitle?: string;
+    withAnimation?: boolean;
+    typeSwitcher?: boolean;
+    height?: string;
+    compactHeader?: boolean;
+    noteText?: string;
+    tooltipRespectsTopEdge?: boolean;
+    tooltipTotalType?: TotalType;
+    tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
+    tooltipOrder?: TooltipOrder;
+    trendValue?: string | number;
+    trendDirection?: TrendDirection;
+    trendTooltip?: {
+        header?: string;
+        rangeCurrent?: string;
+        rangePrevious?: string;
+    };
+    totalsChart?: boolean;
+    colorsMap: Record<string, string>;
+    valueSuffix?: string;
+    valuePrefix?: string;
+    indicateIncompleteData?: boolean;
+    tooltipExcludeTotalItem?: boolean;
+}>, {
+    chartType: ChartType;
+    dataSets: () => any[];
+    visibleIds: () => any[];
+    highlightedId: any;
+    xAxisFormat: string;
+    yAxisFormat: string;
+    xAxisDateInterval: DateInterval;
+    parsing: any;
+    tickCount: number;
+    truncateTickLabels: boolean;
+    header: string;
+    subheader: string;
+    subheaderTooltip: any;
+    keepSubheaderVisible: boolean;
+    loading: boolean;
+    empty: boolean;
+    noDataIcon: string;
+    noDataTitle: string;
+    noDataSubtitle: string;
+    withAnimation: boolean;
+    typeSwitcher: boolean;
+    height: string;
+    compactHeader: boolean;
+    noteText: string;
+    tooltipRespectsTopEdge: boolean;
+    tooltipTotalType: TotalType;
+    tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
+    tooltipOrder: TooltipOrder;
+    trendValue: any;
+    trendDirection: TrendDirection;
+    trendTooltip: any;
+    totalsChart: boolean;
+    colorsMap: () => {};
+    valueSuffix: string;
+    valuePrefix: string;
+    indicateIncompleteData: boolean;
+    tooltipExcludeTotalItem: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:chartType": (chartType: ChartType) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    dataSets: ChartDataSet[];
+    visibleIds: unknown[];
+    highlightedId?: string | number;
+    chartType?: ChartType;
+    parsing?: ChartParsingConfig;
+    xAxisFormat?: ValueFormat;
+    yAxisFormat?: ValueFormat;
+    xAxisDateInterval?: DateInterval;
+    tickCount?: number;
+    truncateTickLabels?: boolean;
+    header?: string;
+    subheader?: string;
+    subheaderTooltip?: {
+        header?: string;
+        text?: string;
+    };
+    keepSubheaderVisible?: boolean;
+    loading?: boolean;
+    empty?: boolean;
+    noDataIcon?: string;
+    noDataTitle?: string;
+    noDataSubtitle?: string;
+    withAnimation?: boolean;
+    typeSwitcher?: boolean;
+    height?: string;
+    compactHeader?: boolean;
+    noteText?: string;
+    tooltipRespectsTopEdge?: boolean;
+    tooltipTotalType?: TotalType;
+    tooltipTotalCalcFn?: (values: number[], totalType: TotalType) => number;
+    tooltipOrder?: TooltipOrder;
+    trendValue?: string | number;
+    trendDirection?: TrendDirection;
+    trendTooltip?: {
+        header?: string;
+        rangeCurrent?: string;
+        rangePrevious?: string;
+    };
+    totalsChart?: boolean;
+    colorsMap: Record<string, string>;
+    valueSuffix?: string;
+    valuePrefix?: string;
+    indicateIncompleteData?: boolean;
+    tooltipExcludeTotalItem?: boolean;
+}>, {
+    chartType: ChartType;
+    dataSets: () => any[];
+    visibleIds: () => any[];
+    highlightedId: any;
+    xAxisFormat: string;
+    yAxisFormat: string;
+    xAxisDateInterval: DateInterval;
+    parsing: any;
+    tickCount: number;
+    truncateTickLabels: boolean;
+    header: string;
+    subheader: string;
+    subheaderTooltip: any;
+    keepSubheaderVisible: boolean;
+    loading: boolean;
+    empty: boolean;
+    noDataIcon: string;
+    noDataTitle: string;
+    noDataSubtitle: string;
+    withAnimation: boolean;
+    typeSwitcher: boolean;
+    height: string;
+    compactHeader: boolean;
+    noteText: string;
+    tooltipRespectsTopEdge: boolean;
+    tooltipTotalType: TotalType;
+    tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
+    tooltipOrder: TooltipOrder;
+    trendValue: any;
+    trendDirection: TrendDirection;
+    trendTooltip: any;
+    totalsChart: boolean;
+    colorsMap: () => {};
+    valueSuffix: string;
+    valuePrefix: string;
+    indicateIncompleteData: boolean;
+    tooltipExcludeTotalItem: boolean;
+}>>> & {
+    "onUpdate:chartType"?: (chartType: ChartType) => any;
+}, {
+    header: string;
+    height: string;
+    loading: boolean;
+    visibleIds: unknown[];
+    highlightedId: string | number;
+    chartType: ChartType;
+    xAxisFormat: ValueFormat;
+    xAxisDateInterval: DateInterval;
+    totalsChart: boolean;
+    parsing: ChartParsingConfig;
+    yAxisFormat: ValueFormat;
+    valueSuffix: string;
+    valuePrefix: string;
+    trendTooltip: any;
+    subheader: string;
+    subheaderTooltip: any;
+    typeSwitcher: boolean;
+    trendValue: string | number;
+    trendDirection: TrendDirection;
+    noteText: string;
+    dataSets: ChartDataSet[];
+    tickCount: number;
+    truncateTickLabels: boolean;
+    keepSubheaderVisible: boolean;
+    empty: boolean;
+    noDataIcon: string;
+    noDataTitle: string;
+    noDataSubtitle: string;
+    withAnimation: boolean;
+    compactHeader: boolean;
+    tooltipRespectsTopEdge: boolean;
+    tooltipTotalType: TotalType;
+    tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
+    tooltipOrder: TooltipOrder;
+    colorsMap: Record<string, string>;
+    indicateIncompleteData: boolean;
+    tooltipExcludeTotalItem: boolean;
+}>, {
+    "subheader-tooltip"?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/chart/ChartPlane.vue.js

@@ -0,0 +1,7 @@
+import e from "./ChartPlane.vue2.js";
+/* empty css                 */import o from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../ChartPlane.vue_vue_type_style_index_0_scoped_dd60ff0e_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-dd60ff0e"]]);
+export {
+  a as default
+};

package/components/chart/ChartPlane.vue2.js

@@ -0,0 +1,381 @@
+ import "../../ChartPlane.vue_vue_type_style_index_0_scoped_dd60ff0e_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"
+}, lt = { class: "chart" }, xt = /* @__PURE__ */ re({
+  __name: "ChartPlane",
+  props: {
+    dataSets: { default: () => [] },
+    visibleIds: { default: () => [] },
+    highlightedId: { default: null },
+    chartType: { default: d.Line },
+    parsing: { default: void 0 },
+    xAxisFormat: { default: "string" },
+    yAxisFormat: { default: "number" },
+    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" },
+    withAnimation: { type: Boolean, default: !0 },
+    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: 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: $ }) {
+    const e = o;
+    ie((t) => ({
+      "53e851a1": s(ae),
+      "45a8c08c": o.height
+    }));
+    const z = ze(Re);
+    V.register(
+      me,
+      ve,
+      Te,
+      ye,
+      Ce,
+      ge,
+      be,
+      xe,
+      Ae,
+      ke,
+      Se,
+      Ee,
+      Le
+    );
+    const C = We(e, "chartType", $), W = i(
+      () => e.withAnimation ? "" : "none"
+    ), v = S(null);
+    let n = null;
+    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));
+    };
+    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,
+        [F]: t.label
+      }))
+    })) : 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: 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",
+        [_]: a
+        // store base color for later use
+      };
+    })), 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"
+        },
+        // 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
+          },
+          point: {
+            radius: I.value ? 3 : 1,
+            hitRadius: 8,
+            borderWidth: 0,
+            hoverRadius: 4,
+            hoverBorderWidth: 2,
+            pointHoverBackgroundColor: Ne
+          },
+          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
+                });
+              }
+            },
+            // grid lines
+            grid: {
+              color: K,
+              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) + e.valueSuffix
+            },
+            // grid lines
+            grid: {
+              color: K,
+              drawOnChartArea: !0,
+              drawTicks: !1
+            }
+          }
+        }
+      }
+    })), P = S(null), c = S(null), { position: H } = Ue(
+      v,
+      P,
+      c,
+      e.tooltipRespectsTopEdge
+    ), te = i(() => ({
+      left: `${H.value.left}px`,
+      top: `${H.value.top}px`,
+      opacity: c.value?.opacity || 0
+    })), ae = i(
+      () => (e.compactHeader ? we : He) + "px"
+    );
+    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": s(u) ? o.trendValue : null,
+          "trend-direction": o.trendDirection,
+          "note-text": o.noteText
+        }, ue({ _: 2 }, [
+          t.$slots["subheader-tooltip"] ? {
+            name: "subheader-tooltip",
+            fn: fe(() => [
+              pe(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", "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 {
+  xt as default
+};