@ironsource/shared-ui 2.1.7-rc.4 → 2.1.7-rc.5

package/Chart.vue_vue_type_style_index_0_scoped_f06a4764_lang.css

@@ -0,0 +1 @@
+.chart-container[data-v-f06a4764]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;height:388px}.header-wrapper[data-v-f06a4764]{height:76px}.chart-content[data-v-f06a4764]{flex:1}.chart-sidebar[data-v-f06a4764]{border-left:1px solid var(--common-divider)}.chart[data-v-f06a4764]{width:100%;height:312px;position:relative}.chart__canvas[data-v-f06a4764]{width:100%;height:100%}.chart__tooltip[data-v-f06a4764]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px}

package/ChartHeader.vue_vue_type_style_index_0_scoped_88d4532f_lang.css

@@ -0,0 +1 @@
+.chart-header[data-v-88d4532f]{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 0}.header-texts[data-v-88d4532f]{display:flex;flex-direction:column;color:var(--text-primary);gap:4px}.type-switch[data-v-88d4532f]{display:flex;align-items:center;gap:4px}

package/ChartLegend.vue_vue_type_style_index_0_scoped_efc608f9_lang.css

@@ -0,0 +1 @@
+.chart-legend[data-v-efc608f9]{display:flex;flex-direction:column;width:220px;height:100%;padding-bottom:8px}.search-box[data-v-efc608f9]{padding:12px 12px 4px}.legend[data-v-efc608f9]{overflow-y:auto;color:var(--text-primary)}.legend__list[data-v-efc608f9]{list-style:none;padding:0 12px 0 20px}.legend__list>li[data-v-efc608f9]{display:flex;align-items:center;gap:8px;height:32px}

package/ChartLoader.vue_vue_type_style_index_0_scoped_142c444a_lang.css

@@ -0,0 +1 @@
+.label[data-v-142c444a]{color:#41454d}.chart-loader[data-v-142c444a]{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:80px 31px 31px}.chart-loader[data-v-142c444a]:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer-142c444a 2s infinite;content:""}@keyframes shimmer-142c444a{to{transform:translate(100%)}}

package/ChartTooltip.vue_vue_type_style_index_0_scoped_ec636f18_lang.css

@@ -0,0 +1 @@
+.chart-tooltip[data-v-ec636f18]{color:var(--text-primary);background:var(--common-white);box-shadow:0 4px 8px -2px #1018281f;border:1px solid var(--common-divider-elevation-0);border-radius:var(--border-radius-md);padding:calc(var(--spacing-100) - 1px)}.tooltip-title[data-v-ec636f18]{color:var(--text-primary);margin-bottom:var(--spacing-100)}.color-box[data-v-ec636f18]{width:var(--spacing-150);height:var(--spacing-150);border-radius:2px;display:inline-block;margin-right:var(--spacing-100)}.list[data-v-ec636f18]{list-style:none;margin:0;padding:0}.list__item[data-v-ec636f18]{display:flex;align-items:center;margin-bottom:var(--spacing-50);color:var(--text-secondary)}.list__item[data-v-ec636f18]:last-child{margin-bottom:0}.tooltip-footer[data-v-ec636f18]{display:flex;align-items:center;margin-top:var(--spacing-100);color:var(--text-primary)}.flex-grow[data-v-ec636f18]{flex-grow:1}

package/SortableItem.vue_vue_type_style_index_0_scoped_9dd4d372_lang.css

@@ -0,0 +1 @@
+.sortable-item[data-v-9dd4d372]{display:flex;position:relative;flex-direction:column;border:1px solid var(--common-divider);border-radius:var(--border-radius-sm);background:var(--background-paper)}.sortable-item--selected[data-v-9dd4d372]{outline:2px solid var(--primary-main);outline-offset:-2px}.sortable-item--hovered[data-v-9dd4d372]{border-color:var(--action-active)}.sortable-item.sortable-drag[data-v-9dd4d372]{border-color:var(--common-divider)!important}.sortable-item.sortable-drag .child-list[data-v-9dd4d372]{display:none}.sortable-item--hovered .drag-allowed .draggable-handle[data-v-9dd4d372],.sortable-item.sortable-drag .drag-allowed .draggable-handle[data-v-9dd4d372]{display:flex}.sortable-item--hovered .drag-allowed .order-num[data-v-9dd4d372],.sortable-item.sortable-drag .drag-allowed .order-num[data-v-9dd4d372]{display:none}.item[data-v-9dd4d372]{height:38px;display:flex;align-items:center}.item__prefix[data-v-9dd4d372]{width:36px;display:flex;align-items:center;justify-content:center}.item__text[data-v-9dd4d372]{flex:1;height:38px;display:flex;align-items:center}.item__menu[data-v-9dd4d372]{width:26px}.country-flag[data-v-9dd4d372]{margin-right:var(--spacing-100)}.child-list[data-v-9dd4d372]{max-height:176px}.child-list ul[data-v-9dd4d372]{list-style:none;display:flex;flex-direction:column;padding-left:16px;padding-right:8px;margin-bottom:4px;gap:2px}.child-list li[data-v-9dd4d372]{min-height:32px;display:flex;align-items:center;border-radius:var(--border-radius-lg);padding:0 8px}.child-list li[data-v-9dd4d372]:hover{cursor:pointer;background:var(--action-selected)}.child-list li.selected[data-v-9dd4d372]{background:var(--action-selected)}.expand-icon[data-v-9dd4d372]{cursor:pointer;padding-right:7px;padding-left:1px;height:38px;display:flex;justify-content:center;align-items:center;color:var(--action-active)}.expand-icon[data-v-9dd4d372]:hover{color:var(--text-primary)}.locked-icon[data-v-9dd4d372]{color:var(--action-active)}.draggable-handle[data-v-9dd4d372]{display:none;align-items:center;justify-content:center;position:absolute;left:0;top:0;width:36px;height:38px;color:var(--action-active)}.draggable-handle[data-v-9dd4d372]:hover{cursor:grab;color:var(--text-primary)}.sortable-ghost[data-v-9dd4d372]{position:relative;outline:none}.sortable-ghost[data-v-9dd4d372]:after{content:"";display:block;position:absolute;z-index:10;inset:-1px;background:rgb(242,242,242);border-radius:var(--border-radius-sm)}

package/SortableItemLabel.vue_vue_type_style_index_0_scoped_1386ae20_lang.css

@@ -0,0 +1 @@
+.decorated-text[data-v-1386ae20]{border-bottom:1px dashed var(--action-active)}.tooltip-content[data-v-1386ae20]{max-width:260px}.help[data-v-1386ae20]{margin-bottom:8px}.help__title[data-v-1386ae20]{margin-bottom:4px}.help__text[data-v-1386ae20]{color:var(--text-secondary)}.help[data-v-1386ae20]:last-child{margin-bottom:0}

package/SortableList.vue_vue_type_style_index_0_scoped_21842d59_lang.css

@@ -0,0 +1 @@
+.list-search[data-v-21842d59]{margin-bottom:var(--spacing-100)}.sortable-list[data-v-21842d59],.locked-list[data-v-21842d59]{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-75);color:var(--text-primary)}.locked-list[data-v-21842d59]{margin-top:var(--spacing-75)}.force-grabbing-cursor *[data-v-21842d59]{cursor:move!important;cursor:-webkit-grabbing!important;cursor:-moz-grabbing!important;cursor:grabbing!important}

package/components/chart/Chart.vue.js

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

package/components/chart/Chart.vue2.js

@@ -0,0 +1,281 @@
+ import "../../Chart.vue_vue_type_style_index_0_scoped_f06a4764_lang.css"; import { defineComponent as W, ref as y, computed as r, onMounted as Z, watch as b, nextTick as $, openBlock as d, createElementBlock as C, unref as c, Fragment as G, createElementVNode as u, createVNode as V, isRef as X, normalizeStyle as j, createBlock as g, createCommentVNode as T } from "vue";
+import { useVModel as q } from "@vueuse/core";
+import { Chart as O, ArcElement as J, LineElement as Q, BarElement as Y, PointElement as ee, LineController as te, BarController as ae, PieController as oe, ScatterController as re, CategoryScale as ie, LinearScale as le, Filler as ne, Tooltip as se } from "chart.js";
+import { HoverVerticalLine as de } from "./plugins/HoverVerticalLine.js";
+import { formatValue as D, calcStepSize as ce } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as ue, DEFAULT_MIN_VISIBLE as pe, DEFAULT_MAX_VISIBLE as fe, COLOR_PALETTE as me, POINT_BORDER_COLOR as he, TICK_LABEL_COLOR as F, TICK_LABEL_FONT as _, GRID_LINE_COLOR as w } from "./consts.js";
+import { ChartType as n } from "./types.js";
+import { useTooltipPosition as ve } from "./composables/useTooltipPosition.js";
+import ye from "./ChartTooltip.vue.js";
+import be from "./ChartLegend.vue.js";
+import Ce from "./ChartHeader.vue.js";
+import { hexColorToRgba as ge } from "../../utils/color.js";
+import { useChartValues as Te } from "./composables/useChartValues.js";
+import ke from "./ChartLoader.vue.js";
+import Le from "../emptyState/v4/EmptyStateV4.vue.js";
+const xe = { class: "chart-container" }, Se = { class: "chart-content" }, Ie = { class: "header-wrapper" }, Be = { class: "chart" }, Ae = {
+  key: 0,
+  class: "chart-sidebar"
+}, We = /* @__PURE__ */ W({
+  __name: "Chart",
+  props: {
+    dataSets: { default: () => [] },
+    visibleIds: { default: () => [] },
+    chartType: { default: n.Line },
+    parsing: { default: void 0 },
+    xAxisFormat: { default: "string" },
+    yAxisFormat: { default: "number" },
+    tickCount: { default: ue },
+    header: { default: "" },
+    subheader: { default: "" },
+    hideLegend: { type: Boolean, default: !1 },
+    minVisible: { default: pe },
+    maxVisible: { default: fe },
+    loading: { type: Boolean, default: !1 },
+    noDataIcon: { default: "file-x" },
+    noDataTitle: { default: "No data to display" },
+    noDataSubtitle: { default: "Search again with different filters" }
+  },
+  emits: ["update:chartType", "update:visibleIds"],
+  setup(a, { emit: k }) {
+    const e = a;
+    O.register(
+      J,
+      Q,
+      Y,
+      ee,
+      te,
+      ae,
+      oe,
+      re,
+      ie,
+      le,
+      ne,
+      se,
+      de
+    );
+    const m = q(e, "chartType", k), p = y(null);
+    let s = null;
+    const L = r(() => e.dataSets.length === 0), x = r(() => !e.loading && !L.value), h = () => {
+      p.value && (s && s.destroy(), s = new O(p.value, I.value));
+    }, N = () => {
+      s && (s.data.datasets = v.value, s.options = I.value.options, s.update());
+    };
+    Z(h), b(() => e.chartType, h), b(x, async (t) => {
+      t && (await $(), h());
+    }), b([() => e.visibleIds, () => e.dataSets], N);
+    const f = r(
+      () => e.chartType === n.StackedLine || e.chartType === n.StackedBar
+    ), P = r(
+      () => e.chartType === n.Line || e.chartType === n.StackedLine
+    ), S = r(
+      () => e.dataSets.filter((t) => e.visibleIds.includes(t.id))
+    ), v = r(() => S.value.map((t, o) => {
+      const i = t.color || me[o] || "#000000";
+      return {
+        ...t,
+        fill: f.value ? "start" : void 0,
+        backgroundColor: ge(
+          i,
+          e.chartType === n.StackedLine ? 10 : 70
+        ),
+        borderColor: i,
+        pointBackgroundColor: i,
+        pointHoverBorderColor: i,
+        maxBarThickness: 50,
+        clip: 5
+        // draw a bit outside the chart area
+      };
+    })), I = r(
+      () => ({
+        type: e.chartType == n.Bar || e.chartType === n.StackedBar ? "bar" : "line",
+        // Chart Data
+        data: {
+          datasets: v.value
+        },
+        // Chart Options
+        options: {
+          parsing: e.parsing,
+          interaction: {
+            intersect: !1,
+            mode: "index",
+            axis: "x"
+          },
+          // plugins
+          plugins: {
+            legend: { display: !1 },
+            title: { display: !1 },
+            hoverVerticalLine: P.value,
+            // tooltip
+            tooltip: {
+              enabled: !1,
+              position: "average",
+              external: ({ tooltip: t }) => {
+                l.value = { ...t };
+              },
+              callbacks: {
+                footer: (t) => {
+                  const o = t.reduce((i, K) => i + (K.parsed.y || 0), 0);
+                  return ["Total", String(o)];
+                }
+              }
+            }
+          },
+          // chart layout
+          responsive: !0,
+          maintainAspectRatio: !1,
+          layout: {
+            padding: {
+              left: 18,
+              top: 18,
+              bottom: 13
+            }
+          },
+          // basic styles
+          elements: {
+            line: {
+              borderWidth: 2,
+              tension: 0.3
+            },
+            point: {
+              radius: 1,
+              hitRadius: 8,
+              borderWidth: 0,
+              hoverRadius: 4,
+              hoverBorderWidth: 2,
+              pointHoverBackgroundColor: he
+            },
+            bar: {
+              borderRadius: 4
+            }
+          },
+          scales: {
+            // Horizontal Axis (X)
+            x: {
+              beginAtZero: !0,
+              border: { display: !1 },
+              stacked: f.value,
+              // stack on top of each other
+              // ticks
+              ticks: {
+                color: F,
+                font: _,
+                padding: 4,
+                callback: function(t) {
+                  return D(
+                    this.getLabelForValue(t),
+                    e.xAxisFormat
+                  );
+                }
+              },
+              // grid lines
+              grid: {
+                color: w,
+                drawOnChartArea: !1,
+                drawTicks: !0,
+                drawBorder: !1,
+                tickLength: 7
+              }
+            },
+            // Vertical Axis (Y)
+            y: {
+              beginAtZero: !0,
+              border: { display: !1 },
+              // hide left borderline
+              stacked: f.value,
+              // stack on top of each other
+              // ticks
+              ticks: {
+                color: F,
+                font: _,
+                padding: 8,
+                stepSize: R.value,
+                min: E.value,
+                max: R.value * e.tickCount,
+                callback: (t) => D(t, e.yAxisFormat)
+              },
+              // grid lines
+              grid: {
+                color: w,
+                drawOnChartArea: !0,
+                drawTicks: !1
+              }
+            }
+          }
+        }
+      })
+    ), M = r(
+      () => v.value.reduce((t, o) => (t[o.id] = o.borderColor, t), {})
+    ), U = r(() => e.dataSets.map((t) => ({
+      id: t.id,
+      label: t.label,
+      color: M.value[t.id] || null
+    }))), B = y(null), l = y(null), { position: A } = ve(
+      p,
+      B,
+      l
+    ), z = r(() => ({
+      left: `${A.value.left}px`,
+      top: `${A.value.top}px`,
+      opacity: l.value?.opacity || 0
+    })), { minValue: E, maxValue: H } = Te({
+      parsingConfig: e.parsing,
+      dataSets: S,
+      isStacked: f
+    }), R = r(
+      () => ce(E.value, H.value, e.tickCount)
+    );
+    return (t, o) => (d(), C("div", xe, [
+      c(x) ? (d(), C(G, { key: 0 }, [
+        u("section", Se, [
+          u("div", Ie, [
+            V(Ce, {
+              "chart-type": c(m),
+              "onUpdate:chart-type": o[0] || (o[0] = (i) => X(m) ? m.value = i : null),
+              header: a.header,
+              subheader: a.subheader
+            }, null, 8, ["chart-type", "header", "subheader"])
+          ]),
+          u("div", Be, [
+            u("canvas", {
+              ref_key: "chartRef",
+              ref: p,
+              class: "chart__canvas"
+            }, null, 512),
+            u("div", {
+              ref_key: "tooltipRef",
+              ref: B,
+              class: "chart__tooltip",
+              style: j(c(z))
+            }, [
+              l.value ? (d(), g(ye, {
+                key: 0,
+                title: String(l.value.title),
+                "data-points": l.value.dataPoints,
+                "x-axis-format": a.xAxisFormat,
+                "y-axis-format": a.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"])) : T("", !0)
+            ], 4)
+          ])
+        ]),
+        a.hideLegend ? T("", !0) : (d(), C("section", Ae, [
+          V(be, {
+            items: c(U),
+            "visible-ids": a.visibleIds,
+            "onUpdate:visibleIds": o[1] || (o[1] = (i) => k("update:visibleIds", i))
+          }, null, 8, ["items", "visible-ids"])
+        ]))
+      ], 64)) : a.loading ? (d(), g(ke, { key: 1 })) : c(L) ? (d(), g(c(Le), {
+        key: 2,
+        title: a.noDataTitle,
+        subtitle: a.noDataSubtitle,
+        "icon-name": a.noDataIcon
+      }, null, 8, ["title", "subtitle", "icon-name"])) : T("", !0)
+    ]));
+  }
+});
+export {
+  We as default
+};

package/components/chart/ChartHeader.vue.js

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

package/components/chart/ChartHeader.vue2.js

@@ -0,0 +1,51 @@
+ import "../../ChartHeader.vue_vue_type_style_index_0_scoped_88d4532f_lang.css"; import { defineComponent as f, computed as y, openBlock as T, createElementBlock as V, createElementVNode as _, createVNode as n, unref as t, withCtx as c, createTextVNode as l, toDisplayString as p, isRef as v } from "vue";
+import s from "../typography/v4/Typography.vue.js";
+import x from "../switch/v4/SwitchV4.vue.js";
+import { ChartType as a } from "./types.js";
+const C = { class: "chart-header" }, b = { class: "header-texts" }, N = /* @__PURE__ */ f({
+  __name: "ChartHeader",
+  props: {
+    chartType: { default: a.Line },
+    header: { default: "" },
+    subheader: { default: "" }
+  },
+  emits: ["update:chartType"],
+  setup(r, { emit: u }) {
+    const h = r, d = [
+      { id: a.Line, icon: "chart-line-up" },
+      { id: a.Bar, icon: "chart-bar" },
+      { id: a.StackedLine, icon: "chart-line" }
+    ], o = y({
+      get() {
+        return d.find(({ id: e }) => e === h.chartType);
+      },
+      set(e) {
+        u("update:chartType", e.id);
+      }
+    });
+    return (e, i) => (T(), V("div", C, [
+      _("div", b, [
+        n(t(s), { variant: "chart2" }, {
+          default: c(() => [
+            l(p(r.header), 1)
+          ]),
+          _: 1
+        }),
+        n(t(s), { variant: "caption" }, {
+          default: c(() => [
+            l(p(r.subheader), 1)
+          ]),
+          _: 1
+        })
+      ]),
+      n(t(x), {
+        modelValue: t(o),
+        "onUpdate:modelValue": i[0] || (i[0] = (m) => v(o) ? o.value = m : null),
+        options: d
+      }, null, 8, ["modelValue"])
+    ]));
+  }
+});
+export {
+  N as default
+};

package/components/chart/ChartLegend.vue.js

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

package/components/chart/ChartLegend.vue2.js

@@ -0,0 +1,65 @@
+ import "../../ChartLegend.vue_vue_type_style_index_0_scoped_efc608f9_lang.css"; import { defineComponent as E, ref as T, computed as a, openBlock as d, createElementBlock as n, createElementVNode as c, createVNode as u, unref as l, mergeProps as m, Fragment as y, renderList as S, withCtx as U, createTextVNode as w, toDisplayString as B } from "vue";
+import { useVirtualList as D } from "@vueuse/core";
+import N from "../typography/v4/Typography.vue.js";
+import A from "../checkbox/v4/CheckboxV4.vue.js";
+import F from "../search/v4/SearchV4.vue.js";
+import { DEFAULT_MIN_VISIBLE as H, DEFAULT_MAX_VISIBLE as M } from "./consts.js";
+const P = { class: "chart-legend" }, R = { class: "search-box" }, K = /* @__PURE__ */ E({
+  __name: "ChartLegend",
+  props: {
+    items: { default: () => [] },
+    visibleIds: { default: () => [] },
+    minVisible: { default: H },
+    maxVisible: { default: M }
+  },
+  emits: ["update:visibleIds"],
+  setup(p, { emit: b }) {
+    const t = p, h = 32, o = T(""), f = a(() => {
+      const e = o.value.toLowerCase();
+      return t.items.filter(
+        (i) => i.label.toLowerCase().includes(e)
+      );
+    }), r = (e) => t.visibleIds.includes(e.id), v = a(
+      () => t.visibleIds.length >= t.maxVisible
+    ), I = a(
+      () => t.visibleIds.length <= t.minVisible
+    ), _ = (e) => I.value && r(e) || v.value && !r(e), V = (e, i) => {
+      b(
+        "update:visibleIds",
+        e ? [...t.visibleIds, i.id] : t.visibleIds.filter((s) => s !== i.id)
+      );
+    }, { list: L, containerProps: g, wrapperProps: k } = D(f, {
+      itemHeight: h,
+      overscan: 10
+    });
+    return (e, i) => (d(), n("div", P, [
+      c("div", R, [
+        u(l(F), {
+          modelValue: o.value,
+          "onUpdate:modelValue": i[0] || (i[0] = (s) => o.value = s)
+        }, null, 8, ["modelValue"])
+      ]),
+      c("div", m({ class: "legend" }, l(g)), [
+        c("ul", m({ class: "legend__list" }, l(k)), [
+          (d(!0), n(y, null, S(l(L), ({ data: s, index: C }) => (d(), n("li", { key: C }, [
+            u(l(A), {
+              color: s.color,
+              "is-checked": r(s),
+              disabled: _(s),
+              "onUpdate:isChecked": (x) => V(x, s)
+            }, null, 8, ["color", "is-checked", "disabled", "onUpdate:isChecked"]),
+            u(l(N), { variant: "body2" }, {
+              default: U(() => [
+                w(B(s.label), 1)
+              ]),
+              _: 2
+            }, 1024)
+          ]))), 128))
+        ], 16)
+      ], 16)
+    ]));
+  }
+});
+export {
+  K as default
+};

package/components/chart/ChartLoader.vue.js

@@ -0,0 +1,25 @@
+import { openBlock as o, createElementBlock as c, pushScopeId as r, popScopeId as s, createElementVNode as t } from "vue";
+/* empty css                  */import a from "../../_virtual/_plugin-vue_export-helper.js";
+const d = {}, i = (e) => (r("data-v-142c444a"), e = e(), s(), e), n = { class: "chart-loader" }, p = /* @__PURE__ */ i(() => /* @__PURE__ */ t("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1072 275",
+  preserveAspectRatio: "none",
+  width: "100%",
+  height: "100%",
+  fill: "none"
+}, [
+  /* @__PURE__ */ t("path", {
+    d: "M499.744 87.7024L499 87.4816C399.137 70.0475 293 138.418 218 173.72C120 219.848 87 235.892 0 275L1072 275C979 -57.3526 836.258 -31.5829 732 59.404C648.885 131.939 570.549 108.704 499.744 87.7024Z",
+    fill: "black",
+    "fill-opacity": "0.05"
+  })
+], -1)), _ = [
+  p
+];
+function l(e, h) {
+  return o(), c("div", n, _);
+}
+const w = /* @__PURE__ */ a(d, [["render", l], ["__scopeId", "data-v-142c444a"]]);
+export {
+  w as default
+};

package/components/chart/ChartTooltip.vue.js

@@ -0,0 +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_ec636f18_lang.css"; //*');
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ec636f18"]]);
+export {
+  s as default
+};

package/components/chart/ChartTooltip.vue2.js

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

package/components/chart/composables/useChartValues.js

@@ -0,0 +1,32 @@
+import { computed as t } from "vue";
+const V = ({
+  parsingConfig: s,
+  dataSets: m,
+  isStacked: v
+}) => {
+  const l = (e) => e ? e[s?.yAxisKey] : null, r = (e) => e ? e[s?.xAxisKey] : null, o = t(
+    () => m.value.flatMap(
+      (e) => e.data.map(l)
+    )
+  ), p = t(() => m.value.reduce((e, n) => (n.data.forEach((a) => {
+    const u = String(r(a));
+    e[u] || (e[u] = []), e[u].push(l(a));
+  }), e), {})), x = t(() => Math.min(0, ...o.value.map(Number))), h = t(() => {
+    if (v.value) {
+      const e = Object.values(p.value).map(
+        (n) => n.reduce((a, u) => a + u, 0)
+      );
+      return Math.max(...e);
+    }
+    return Math.max(...o.value.map(Number));
+  });
+  return {
+    getXValue: r,
+    getYValue: l,
+    minValue: x,
+    maxValue: h
+  };
+};
+export {
+  V as useChartValues
+};

package/components/chart/composables/useTooltipPosition.js

@@ -0,0 +1,22 @@
+import { computed as c } from "vue";
+import { useElementSize as u } from "@vueuse/core";
+const a = (o, s, n) => {
+  const t = u(s);
+  return {
+    position: c(() => {
+      if (!o.value || !n.value)
+        return { top: 0, left: 0 };
+      const i = o.value.getBoundingClientRect(), { caretX: F, caretY: e } = n.value, E = F + t.width.value + 20 >= i.width, _ = e + t.height.value + -20 >= i.height;
+      return {
+        left: F + (E ? -(t.width.value + 20) : 20),
+        top: e + (_ ? -1 * Math.min(
+          e - 8,
+          t.height.value + 8
+        ) : -20)
+      };
+    })
+  };
+};
+export {
+  a as useTooltipPosition
+};

package/components/chart/consts.js

@@ -0,0 +1,21 @@
+const E = "#fcfcfc", L = "#E4E4E4", _ = "#646464", C = {
+  size: 12,
+  weight: 400,
+  family: "Inter"
+}, I = [
+  "#80BCFE",
+  "#9999FF",
+  "#5883E4",
+  "#80CBC4",
+  "#FFC670"
+], O = 4, c = 1, t = 5;
+export {
+  I as COLOR_PALETTE,
+  t as DEFAULT_MAX_VISIBLE,
+  c as DEFAULT_MIN_VISIBLE,
+  O as DEFAULT_TICK_COUNT,
+  L as GRID_LINE_COLOR,
+  E as POINT_BORDER_COLOR,
+  _ as TICK_LABEL_COLOR,
+  C as TICK_LABEL_FONT
+};

package/components/chart/index.js

@@ -0,0 +1,6 @@
+import r from "./Chart.vue.js";
+const o = () => [r];
+export {
+  r as Chart,
+  o as ChartTypes
+};