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

package/components/chart/ChartPlane.vue2.js

@@ -0,0 +1,306 @@
+ 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 = {
+  key: 0,
+  class: "chart-plane"
+}, He = { class: "header-wrapper" }, Oe = { class: "chart" }, Je = /* @__PURE__ */ j({
+  __name: "ChartPlane",
+  props: {
+    dataSets: { default: () => [] },
+    visibleIds: { default: () => [] },
+    chartType: { default: i.Line },
+    parsing: { default: void 0 },
+    xAxisFormat: { default: "string" },
+    yAxisFormat: { default: "number" },
+    tickCount: { default: be },
+    header: { default: "" },
+    subheader: { default: "" },
+    loading: { 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 },
+    trendValue: { default: null },
+    trendDirection: { default: "up" },
+    totalsChart: { type: Boolean, default: !1 }
+  },
+  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,
+      pe,
+      fe,
+      he,
+      me,
+      ve,
+      ye,
+      Ce
+    );
+    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));
+    };
+    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) => ({
+        ...r,
+        [P]: t.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];
+      return {
+        ...t,
+        fill: u.value ? "start" : void 0,
+        backgroundColor: Ee(
+          r,
+          e.chartType === i.StackedLine ? 10 : 70
+        ),
+        borderColor: r,
+        pointBackgroundColor: r,
+        pointHoverBorderColor: r,
+        maxBarThickness: 50,
+        clip: 5,
+        // draw a bit outside the chart area
+        icon: t.icon || null,
+        iconType: t.iconType || "branded"
+      };
+    })), 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
+        },
+        // 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)];
+                }
+              }
+            }
+          },
+          // chart layout
+          responsive: !0,
+          maintainAspectRatio: !1,
+          layout: {
+            padding: {
+              left: 18,
+              top: 18,
+              bottom: 11
+            }
+          },
+          // 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: !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: 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
+              }
+            }
+          }
+        }
+      })
+    ), 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"
+    );
+    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"] ? {
+            name: "subheader-tooltip",
+            fn: oe(() => [
+              re(t.$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);
+  }
+});
+export {
+  Je as default
+};

package/components/chart/ChartStoryArgs.d.ts

@@ -0,0 +1,135 @@
+import { ChartType } from '@/components/chart/types';
+export declare const chartStoryArgs: {
+    chartType: {
+        control: {
+            type: string;
+        };
+        options: ChartType[];
+    };
+    dataSets: {
+        description: string;
+    };
+    xAxisFormat: {
+        options: string[];
+        description: string;
+    };
+    yAxisFormat: {
+        options: string[];
+        description: string;
+    };
+    parsing: {
+        description: string;
+    };
+    hideLegend: {
+        table: {
+            category: string;
+        };
+    };
+    minVisible: {
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    maxVisible: {
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    maxLimitTooltipText: {
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    noDataIcon: {
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    noDataTitle: {
+        table: {
+            category: string;
+        };
+    };
+    noDataSubtitle: {
+        table: {
+            category: string;
+        };
+    };
+    header: {
+        table: {
+            category: string;
+        };
+    };
+    subheader: {
+        table: {
+            category: string;
+        };
+    };
+    trendValue: {
+        table: {
+            category: string;
+        };
+        description: string;
+    };
+    trendDirection: {
+        table: {
+            category: string;
+        };
+        description: string;
+        control: {
+            type: string;
+            options: string[];
+        };
+    };
+    tickCount: {
+        description: string;
+    };
+    loading: {
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    withAnimation: {
+        control: {
+            type: string;
+        };
+    };
+    totalsChart: {
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    fullHeight: {
+        table: {
+            category: string;
+        };
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    withSettingsHeader: {
+        table: {
+            category: string;
+        };
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+    extraCharts: {
+        table: {
+            category: string;
+        };
+        description: string;
+        control: {
+            type: string;
+        };
+    };
+};

package/components/chart/ChartTooltip.vue.js

@@ -1,7 +1,7 @@
 import o from "./ChartTooltip.vue2.js";
 /* empty css                   */import t from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_6744325c_lang.css"; //*');
-const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-6744325c"]]);
+// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_25d0e129_lang.css"; //*');
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-25d0e129"]]);
 export {
   s as default
 };

package/components/chart/ChartTooltip.vue2.js

@@ -1,15 +1,15 @@
- import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_6744325c_lang.css"; import { defineComponent as b, computed as x, openBlock as l, createElementBlock as c, createVNode as o, unref as t, withCtx as r, createTextVNode as i, toDisplayString as s, createCommentVNode as m, createElementVNode as f, Fragment as v, renderList as F, normalizeStyle as h, createBlock as g } from "vue";
-import n from "../typography/v4/Typography.vue.js";
-import { formatValue as d } from "./utils/utils.js";
-import k from "../icon/v4/IconV4.vue.js";
+ import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_25d0e129_lang.css"; import { defineComponent as F, computed as x, openBlock as l, createElementBlock as n, createVNode as u, unref as t, withCtx as o, createTextVNode as r, toDisplayString as i, createBlock as y, createCommentVNode as d, createElementVNode as f, Fragment as v, renderList as h, normalizeStyle as k } from "vue";
+import s from "../typography/v4/Typography.vue.js";
+import { formatValue as m } from "./utils/utils.js";
+import g from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
 const A = { class: "chart-tooltip" }, V = {
   key: 0,
   class: "tooltip-title-wrapper"
-}, C = { class: "list" }, T = { class: "popover-label-wrapper" }, _ = {
+}, C = { class: "list" }, T = { class: "popover-label-wrapper" }, w = {
   key: 1,
   class: "tooltip-footer"
-}, I = /* @__PURE__ */ b({
+}, I = /* @__PURE__ */ F({
   __name: "ChartTooltip",
   props: {
     title: { default: "" },
@@ -20,80 +20,81 @@ const A = { class: "chart-tooltip" }, V = {
     totalValue: { default: null }
   },
   setup(e) {
-    const u = e, y = x(() => u.xAxisFormat === "date" ? "dateLong" : u.xAxisFormat), p = x(() => u.xAxisFormat === "date" ? "day" : u.xAxisFormat);
-    return (w, B) => (l(), c("div", A, [
-      e.title ? (l(), c("div", V, [
-        o(t(n), { variant: "subtitle2" }, {
-          default: r(() => [
-            i(s(t(d)(e.title, t(y))), 1)
+    const c = e, p = x(() => c.xAxisFormat === "date" ? "dateLong" : c.xAxisFormat), b = x(() => c.xAxisFormat === "date" ? "day" : c.xAxisFormat);
+    return (B, L) => (l(), n("div", A, [
+      e.title ? (l(), n("div", V, [
+        u(t(s), { variant: "subtitle2" }, {
+          default: o(() => [
+            r(i(t(m)(e.title, t(p))), 1)
           ]),
           _: 1
         }),
-        o(t(n), {
+        e.xAxisFormat === "date" ? (l(), y(t(s), {
+          key: 0,
           class: "tooltip-sub-title",
           variant: "caption"
         }, {
-          default: r(() => [
-            i(s(t(d)(e.title, t(p))), 1)
+          default: o(() => [
+            r(i(t(m)(e.title, t(b))), 1)
           ]),
           _: 1
-        })
-      ])) : m("", !0),
+        })) : d("", !0)
+      ])) : d("", !0),
       f("ul", C, [
-        (l(!0), c(v, null, F(e.dataPoints, (a) => (l(), c("li", {
+        (l(!0), n(v, null, h(e.dataPoints, (a) => (l(), n("li", {
           key: a.datasetIndex,
           class: "list__item"
         }, [
           f("span", {
             class: "color-box",
-            style: h({
+            style: k({
               backgroundColor: String(a.dataset.pointBackgroundColor)
             })
           }, null, 4),
-          a.dataset.icon ? (l(), g(t(k), {
+          a.dataset.icon ? (l(), y(t(g), {
             key: 0,
             class: "platform-icon",
             type: a.dataset.iconType,
             name: a.dataset.icon,
             size: "16px"
-          }, null, 8, ["type", "name"])) : m("", !0),
+          }, null, 8, ["type", "name"])) : d("", !0),
           f("div", T, [
-            o(t(n), {
+            u(t(s), {
               variant: "body2",
               class: "flex-grow truncated-label",
               "is-truncated": ""
             }, {
-              default: r(() => [
-                i(s(a.dataset.label), 1)
+              default: o(() => [
+                r(i(a.dataset.label), 1)
               ]),
               _: 2
             }, 1024)
           ]),
-          o(t(n), { variant: "body2" }, {
-            default: r(() => [
-              i(s(t(d)(a.parsed.y, e.yAxisFormat)), 1)
+          u(t(s), { variant: "body2" }, {
+            default: o(() => [
+              r(i(t(m)(a.parsed.y, e.yAxisFormat)), 1)
             ]),
             _: 2
           }, 1024)
         ]))), 128))
       ]),
-      e.totalValue !== null ? (l(), c("div", _, [
-        o(t(n), {
+      e.totalValue !== null ? (l(), n("div", w, [
+        u(t(s), {
           variant: "body2",
           class: "flex-grow"
         }, {
-          default: r(() => [
-            i(s(e.totalLabel), 1)
+          default: o(() => [
+            r(i(e.totalLabel), 1)
           ]),
           _: 1
         }),
-        o(t(n), { variant: "body2" }, {
-          default: r(() => [
-            i(s(t(d)(e.totalValue, e.yAxisFormat)), 1)
+        u(t(s), { variant: "body2" }, {
+          default: o(() => [
+            r(i(t(m)(e.totalValue, e.yAxisFormat)), 1)
           ]),
           _: 1
         })
-      ])) : m("", !0)
+      ])) : d("", !0)
     ]));
   }
 });

package/components/chart/composables/useChartHeight.d.ts

@@ -0,0 +1,5 @@
+import { UseChartHeightArgs } from '@is-ssp/chart/types';
+export declare const useChartHeight: ({ chartPlanesCount, useFullHeight, }: UseChartHeightArgs) => {
+    containerProps: import("vue").ComputedRef<Record<string, unknown>>;
+    eachPlaneHeight: import("vue").ComputedRef<string>;
+};

package/components/chart/composables/useChartHeight.js

@@ -0,0 +1,22 @@
+import { ref as H, computed as o } from "vue";
+import { useElementBounding as g, useWindowScroll as m } from "@vueuse/core";
+import { useFullPageHeight as f } from "../../../composables/useFullPageHeight.js";
+import { DEFAULT_CHART_PLANE_HEIGHT as p, HEADER_HEIGHT as E, MIN_PLANE_HEIGHT as r } from "../consts.js";
+const P = ({
+  chartPlanesCount: e,
+  useFullHeight: n
+}) => {
+  const t = H(), { height: i } = g(t), { cssHeightValue: c } = f({
+    elem: t
+  }), { y: l } = m(), s = o(() => n && !l.value ? c.value : p + E + "px"), u = o(() => ({
+    ref: t,
+    style: { height: s.value }
+  })), h = o(() => e.value === 1 ? "100%" : i.value / e.value < r ? `${r}px` : 100 / e.value + "%");
+  return {
+    containerProps: u,
+    eachPlaneHeight: h
+  };
+};
+export {
+  P as useChartHeight
+};

package/components/chart/composables/useColorsMap.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'vue';
+import { ChartDataSet } from '@is-ssp/chart';
+type UseColorsMapArgs = {
+    dataSets: Ref<ChartDataSet[]>;
+    visibleIds: Ref<unknown[]>;
+};
+export declare const useColorsMap: ({ dataSets, visibleIds }: UseColorsMapArgs) => {
+    colorsMap: import("vue").ComputedRef<{}>;
+};
+export {};

package/components/chart/composables/useColorsMap.js

@@ -0,0 +1,17 @@
+import { computed as e } from "vue";
+import { COLOR_PALETTE as a } from "../consts.js";
+const n = ({ dataSets: t, visibleIds: l }) => {
+  const c = e(
+    () => t.value.filter(
+      (o) => l.value.includes(o.id)
+    )
+  );
+  return {
+    colorsMap: e(
+      () => c.value.reduce((o, r, u) => (o[r.id] = r.color || a[u] || "#000000", o), {})
+    )
+  };
+};
+export {
+  n as useColorsMap
+};

package/components/chart/composables/useTooltipPosition.d.ts

@@ -1,6 +1,6 @@
 import { Ref } from 'vue';
 import { TooltipModel } from 'chart.js';
-export declare const useTooltipPosition: (chartRef: Ref<HTMLCanvasElement | null>, tooltipRef: Ref<HTMLDivElement | null>, tooltipModel: Ref<TooltipModel<'line' | 'bar'>>) => {
+export declare const useTooltipPosition: (chartRef: Ref<HTMLCanvasElement | null>, tooltipRef: Ref<HTMLDivElement | null>, tooltipModel: Ref<TooltipModel<'line' | 'bar'>>, respectTop?: boolean) => {
     position: import("vue").ComputedRef<{
         top: number;
         left: number;