@ironsource/shared-ui 2.1.12-rc.3 → 2.1.12-rc.30

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

@@ -0,0 +1,226 @@
+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;
+}>, {
+    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;
+}>, {}, 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;
+}>, {
+    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;
+}>>> & {
+    "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>;
+}>, {
+    "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 o from "./ChartPlane.vue2.js";
+/* empty css                 */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../ChartPlane.vue_vue_type_style_index_0_scoped_4f67d41d_lang.css"; //*');
+const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-4f67d41d"]]);
+export {
+  a as default
+};

package/components/chart/ChartPlane.vue2.js

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