@ironsource/shared-ui 2.1.12-rc.2 → 2.1.12-rc.20

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

@@ -0,0 +1,221 @@
+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;
+    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;
+    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;
+    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;
+    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;
+    dataSets: ChartDataSet[];
+    trendTooltip: any;
+    subheader: string;
+    subheaderTooltip: any;
+    typeSwitcher: boolean;
+    trendValue: string | number;
+    trendDirection: TrendDirection;
+    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 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_903fc6ae_lang.css"; //*');
+const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-903fc6ae"]]);
+export {
+  s as default
+};

package/components/chart/ChartPlane.vue2.js

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