@embeddable.com/remarkable-ui 0.1.26 → 0.1.27

package/dist/LineChartComparisonDefaultPro.js

@@ -1,109 +1,111 @@
-import { useTheme as X, defineComponent as _ } from "@embeddable.com/react";
-import { m as Y, E, C as w, Z as G, _ as k, $ as I, i as U, r as q, j as O, a0 as z, d as K, a as S, X as A, a1 as B, z as J, W, U as Z, t as H, c as Q, s as aa, e as ea, f as sa, g as ta, x as oa, y as na, p as ia, q as ra, u as la, o as F } from "./component.constants-D7F6GsHW.js";
-import { C as ma } from "./ChartCard-DunjH70y.js";
-import { useEffect as da } from "react";
-import { g as ca } from "./timeRange.utils-KDn6xcVP.js";
-import { g as M } from "./formatter.utils--2w1e7GE.js";
-import { g as pa, a as ua } from "./object.utils-BNKDL7Y9.js";
-import { i as ga, s as ha } from "./color.utils-CVyp-fGP.js";
-import { u as N } from "./charts.newFillGaps.hooks-CJLaShd4.js";
-import { C as xa } from "./ComparisonPeriod.type.emb-CARBg093.js";
-const R = "mainAxis", P = "comparisonAxis", $ = (s, t) => {
-  var L, v, C, b;
-  const { data: o, measure: n, dimension: a, index: d, isPreviousPeriod: l, hasMinMaxYAxisRange: p, labels: e } = s, r = o == null ? void 0 : o.map((f) => f[a.name]), u = !!((L = n.inputs) != null && L.connectGaps), c = e ? e.map((f) => {
-    const y = o == null ? void 0 : o.find((T) => T[a.name] === f);
-    return (y == null ? void 0 : y[n.name]) ?? (u ? 0 : null);
-  }) : o == null ? void 0 : o.map((f) => f[n.name] ?? (u ? 0 : null)), h = M(t), i = pa(t), m = !!((v = n.inputs) != null && v[l ? "previousLineDashed" : "lineDashed"]), g = (C = n.inputs) == null ? void 0 : C[l ? "previousLineColor" : "lineColor"], x = ga(g) ? g : ua(
-    `${i}.charts.backgroundColors`,
-    n.name,
-    t.charts.backgroundColors ?? E,
-    d
-  );
+import { useTheme as _, defineComponent as G } from "@embeddable.com/react";
+import { m as E, E as U, C as w, U as q, _ as V, $ as I, i as z, r as K, j as M, a0 as J, d as W, a as S, Y as A, a1 as B, z as H, X as Q, W as Z, t as ee, c as ae, s as se, e as ne, f as ie, g as oe, x as te, y as re, p as le, q as me, u as de, V as F, o as N } from "./component.constants-XB5gaz8Z.js";
+import { C as ce } from "./ChartCard-Duhwxov3.js";
+import { useEffect as pe } from "react";
+import { g as ue } from "./timeRange.utils-Dtg_QyCm.js";
+import { g as O } from "./formatter.utils-BmqMNSUB.js";
+import { g as ge, a as he } from "./object.utils-BNKDL7Y9.js";
+import { i as be, s as xe } from "./color.utils-CVyp-fGP.js";
+import { g as Ce } from "./lines.utils-CFEUUo4k.js";
+import { u as $ } from "./charts.newFillGaps.hooks-CJLaShd4.js";
+import { C as fe } from "./ComparisonPeriod.type.emb-BsVeAHPK.js";
+const k = "mainAxis", P = "comparisonAxis", j = (a, i) => {
+  var v, R, x, g;
+  const { data: n, measure: o, dimension: s, index: c, isPreviousPeriod: r, hasMinMaxYAxisRange: b, labels: e } = a, p = n == null ? void 0 : n.map((C) => C[s.name]), l = !!((v = o.inputs) != null && v.connectGaps), u = e ? e.map((C) => {
+    const y = n == null ? void 0 : n.find((T) => T[s.name] === C);
+    return (y == null ? void 0 : y[o.name]) ?? (l ? 0 : null);
+  }) : n == null ? void 0 : n.map((C) => C[o.name] ?? (l ? 0 : null)), h = O(i), f = ge(i), t = !!((R = o.inputs) != null && R[r ? "previousLineDashed" : "lineDashed"]), m = (x = o.inputs) == null ? void 0 : x[r ? "previousLineColor" : "lineColor"], d = be(m) ? m : he(
+    `${f}.charts.backgroundColors`,
+    o.name,
+    i.charts.backgroundColors ?? U,
+    c
+  ), D = h.dimensionOrMeasureTitle(o);
   return {
-    xAxisID: l ? P : R,
-    labels: r,
-    label: (l ? `${G.t("common.compared")} ` : "") + h.dimensionOrMeasureTitle(n),
-    data: c,
-    backgroundColor: ha(
-      x,
+    xAxisID: r ? P : k,
+    labels: p,
+    rawLabel: D,
+    label: (r ? `${q.t("common.compared")} ` : "") + D,
+    data: u,
+    backgroundColor: xe(
+      d,
       w("--em-line-chart-line-fill-opacity")
     ),
-    pointBackgroundColor: x,
-    borderDash: m ? [
+    pointBackgroundColor: d,
+    borderDash: t ? [
       w("--em-line-chart-line-dash-length"),
       w("--em-line-chart-line-gap-length")
     ] : void 0,
-    borderColor: x,
-    fill: (b = n.inputs) == null ? void 0 : b.fillUnderLine,
-    clip: p
+    borderColor: d,
+    fill: (g = o.inputs) == null ? void 0 : g.fillUnderLine,
+    clip: b
   };
-}, ba = (s, t) => {
-  if (!s.data)
+}, De = (a, i) => {
+  if (!a.data)
     return { labels: [], datasets: [{ data: [] }] };
-  const { data: o, dataComparison: n, dimension: a, measures: d, hasMinMaxYAxisRange: l } = s, e = a.nativeType === "time" ? void 0 : n ? Array.from(
+  const { data: n, dataComparison: o, dimension: s, measures: c, hasMinMaxYAxisRange: r } = a, e = s.nativeType === "time" ? void 0 : o ? Array.from(
     /* @__PURE__ */ new Set([
-      ...o.map((c) => c[a.name]),
-      ...(n == null ? void 0 : n.map((c) => c[a.name])) ?? []
+      ...n.map((u) => u[s.name]),
+      ...(o == null ? void 0 : o.map((u) => u[s.name])) ?? []
     ])
-  ) : void 0, r = d.map(
-    (c, h) => $(
+  ) : void 0, p = c.map(
+    (u, h) => j(
       {
-        data: o,
-        measure: c,
-        dimension: a,
+        data: n,
+        measure: u,
+        dimension: s,
         labels: e,
-        hasMinMaxYAxisRange: l,
+        hasMinMaxYAxisRange: r,
         index: h
       },
-      t
+      i
     )
-  ), u = d.map(
-    (c, h) => $(
+  ), l = c.map(
+    (u, h) => j(
       {
-        data: n,
-        measure: c,
-        dimension: a,
+        data: o,
+        measure: u,
+        dimension: s,
         labels: e,
-        hasMinMaxYAxisRange: l,
+        hasMinMaxYAxisRange: r,
         index: h,
         isPreviousPeriod: !0
       },
-      t
+      i
     )
   );
   return {
-    labels: e ?? o.map((c) => c[a.name]),
-    datasets: [...r, ...u]
+    labels: e ?? n.map((u) => u[s.name]),
+    datasets: [...p, ...l]
   };
-}, Ca = (s, t) => {
-  const { dimension: o, data: n, measures: a, xAxisLabel: d } = s, l = M(t);
+}, ye = (a, i) => {
+  const { dimension: n, data: o, measures: s, xAxisLabel: c } = a, r = O(i);
   return {
     plugins: {
       legend: {
         labels: {
-          filter: (e, r) => {
+          filter: (e, p) => {
             if (!e) return !1;
-            const u = r.datasets[e.datasetIndex];
-            return Array.isArray(u.data) && u.data.length > 0;
+            const l = p.datasets[e.datasetIndex];
+            return Array.isArray(l.data) && l.data.length > 0;
           }
         }
       },
       datalabels: {
         labels: {
           value: {
-            formatter: (e, r) => {
-              const u = a[r.datasetIndex % a.length];
-              return l.data(u, e);
+            formatter: (e, p) => {
+              const l = s[p.datasetIndex % s.length];
+              return r.data(l, e);
             }
           }
         }
       },
       tooltip: {
         callbacks: {
-          title: (e) => e[0] ? l.data(o, e[0].label) : "",
+          title: (e) => e[0] ? r.data(n, e[0].label) : "",
           label: (e) => {
-            const r = a[e.datasetIndex % a.length], u = e.raw;
-            return `${e.dataset.label}: ${l.data(r, u)}`;
+            const p = s[e.datasetIndex % s.length], l = e.raw;
+            return `${e.dataset.label}: ${r.data(p, l)}`;
           }
         }
       }
@@ -112,18 +114,18 @@ const R = "mainAxis", P = "comparisonAxis", $ = (s, t) => {
       x: {
         display: !1
       },
-      [R]: {
+      [k]: {
         title: {
           ...I,
-          text: d,
-          display: !!d
+          text: c,
+          display: !!c
         },
         grid: { display: !1 },
         ticks: {
-          ...k,
+          ...V,
           callback(e) {
-            var r;
-            return l.data(o, (r = n.labels) == null ? void 0 : r[e]);
+            var p;
+            return r.data(n, (p = o.labels) == null ? void 0 : p[e]);
           }
         }
       },
@@ -132,182 +134,188 @@ const R = "mainAxis", P = "comparisonAxis", $ = (s, t) => {
       },
       y: {
         ticks: {
-          callback: (e) => l.data(a[0], e)
+          callback: (e) => r.data(s[0], e)
         }
       }
     }
   };
-}, fa = (s, t) => {
-  var c, h;
-  const { dimension: o, data: n, measures: a, xAxisLabel: d, showComparisonAxis: l } = s, p = M(t), e = ((c = n.datasets.find((i) => i.xAxisID === R)) == null ? void 0 : c.labels) ?? [], r = ((h = n.datasets.find((i) => i.xAxisID === P)) == null ? void 0 : h.labels) ?? [];
+}, Ae = (a, i) => {
+  var h, f;
+  const { dimension: n, data: o, measures: s, xAxisLabel: c, showComparisonAxis: r, showDataComparison: b } = a, e = O(i), p = ((h = o.datasets.find((t) => t.xAxisID === k)) == null ? void 0 : h.labels) ?? [], l = ((f = o.datasets.find((t) => t.xAxisID === P)) == null ? void 0 : f.labels) ?? [];
   return {
     plugins: {
       legend: {
         labels: {
-          filter: (i, m) => {
-            if (!i) return !1;
-            const g = m.datasets[i.datasetIndex];
-            return Array.isArray(g.data) && g.data.length > 0;
+          filter: (t, m) => {
+            if (!t) return !1;
+            const d = m.datasets[t.datasetIndex];
+            return Array.isArray(d.data) && d.data.length > 0;
           }
         }
       },
       datalabels: {
         labels: {
           value: {
-            formatter: (i, m) => {
-              const g = a[m.datasetIndex % a.length];
-              return p.data(g, i);
+            formatter: (t, m) => {
+              const d = s[m.datasetIndex % s.length];
+              return e.data(d, t);
             }
           }
         }
       },
       tooltip: {
         callbacks: {
-          title: (i) => {
-            var D;
-            const m = (D = i[0]) == null ? void 0 : D.dataIndex;
-            if (m === void 0) return "";
-            const g = e[m] && p.data(o, e[m]), x = r[m] && p.data(o, r[m]);
-            return `${g ?? "-"} vs ${x ?? "-"}`;
+          title: (t) => {
+            const m = t[0];
+            if (!b && m)
+              return e.data(n, m.label);
+            const d = m == null ? void 0 : m.dataIndex;
+            if (d === void 0) return "";
+            const D = p[d] && e.data(n, p[d]), L = l[d] && e.data(n, l[d]);
+            return `${D ?? "-"} vs ${L ?? "-"}`;
           },
-          label: (i) => {
-            const m = a[i.datasetIndex % a.length], g = i.raw;
-            return `${i.dataset.label}: ${p.data(m, g)}`;
+          label: (t) => {
+            const m = s[t.datasetIndex % s.length], d = t.raw;
+            return `${t.dataset.label}: ${e.data(m, d)}`;
           }
         }
       }
     },
     scales: {
       x: { display: !1 },
-      [R]: {
+      [k]: {
         title: {
           ...I,
-          text: d,
-          display: !!((!l || r.length === 0) && d)
+          text: c,
+          display: !!((!r || l.length === 0) && c)
         },
         grid: { display: !1 },
         ticks: {
-          ...k,
-          callback: (i) => p.data(o, e[Number(i)])
+          ...V,
+          callback: (t) => e.data(n, p[Number(t)])
         }
       },
       [P]: {
         title: {
           ...I,
-          text: d,
-          display: !!d
+          text: c,
+          display: !!c
         },
         grid: { display: !1 },
-        display: l && r.length > 0,
+        display: r && l.length > 0,
         ticks: {
-          ...k,
-          callback: (i) => {
-            if (r.length === 0)
+          ...V,
+          callback: (t) => {
+            if (l.length === 0)
               return "";
-            const m = r[Number(i)];
-            return m ? p.data(o, m) : "";
+            const m = l[Number(t)];
+            return m ? e.data(n, m) : "";
           }
         }
       },
       y: {
         ticks: {
-          callback: (i) => p.data(a[0], i)
+          callback: (t) => e.data(s[0], t)
         }
       }
     }
   };
-}, ya = (s, t) => {
-  var n, a;
-  const o = s.dimension.nativeType === "time" ? fa : Ca;
-  return Y(
-    o(s, t),
-    ((a = (n = t.charts) == null ? void 0 : n.lineChartComparisonDefaultPro) == null ? void 0 : a.options) || {}
+}, Le = (a, i) => {
+  var c, r;
+  const { onLineClicked: n, dimension: o } = a, s = o.nativeType === "time" ? Ae : ye;
+  return E(
+    Ce({ onLineClicked: n }),
+    s(a, i),
+    ((r = (c = i.charts) == null ? void 0 : c.lineChartComparisonDefaultPro) == null ? void 0 : r.options) || {}
   );
-}, Da = (s) => {
-  const t = X();
-  U(t);
-  const { title: o, description: n, xAxisLabel: a, yAxisLabel: d } = q(s), {
-    comparisonPeriod: l,
-    measures: p,
+}, ve = (a) => {
+  const i = _();
+  z(i);
+  const { title: n, description: o, xAxisLabel: s, yAxisLabel: c } = K(a), {
+    comparisonPeriod: r,
+    measures: b,
     xAxis: e,
-    reverseXAxis: r,
-    showLegend: u,
-    showLogarithmicScale: c,
+    reverseXAxis: p,
+    showLegend: l,
+    showLogarithmicScale: u,
     showTooltips: h,
-    showValueLabels: i,
-    yAxisRangeMax: m,
-    yAxisRangeMin: g,
-    primaryDateRange: x,
+    showValueLabels: f,
+    yAxisRangeMax: t,
+    yAxisRangeMin: m,
+    primaryDateRange: d,
     comparisonDateRange: D,
     showComparisonAxis: L,
-    setComparisonDateRange: v
-  } = s;
-  da(() => {
-    const V = ca(
-      x,
-      l,
-      t
+    setComparisonDateRange: v,
+    onLineClicked: R
+  } = a;
+  pe(() => {
+    const Y = ue(
+      d,
+      r,
+      i
     );
-    v(V);
-  }, [l, JSON.stringify(x), t]);
-  const C = N({ results: s.results, dimension: e }), b = N({
-    results: s.resultsComparison,
+    v(Y);
+  }, [r, JSON.stringify(d), i]);
+  const x = $({ results: a.results, dimension: e }), g = $({
+    results: a.resultsComparison,
     dimension: e,
     externalDateBounds: D
-  }), f = !!(x && l), y = ba(
+  }), C = !!(d && r), y = De(
     {
-      data: C.data,
-      dataComparison: f ? (b == null ? void 0 : b.data) ?? [] : void 0,
+      data: x.data,
+      dataComparison: C ? (g == null ? void 0 : g.data) ?? [] : void 0,
       dimension: e,
-      measures: p,
-      hasMinMaxYAxisRange: !!(g || m)
+      measures: b,
+      hasMinMaxYAxisRange: m !== void 0 || t !== void 0
     },
-    t
-  ), T = ya(
+    i
+  ), T = Le(
     {
       data: y,
       dimension: e,
-      measures: p,
-      xAxisLabel: a,
-      showComparisonAxis: L
+      measures: b,
+      xAxisLabel: s,
+      showComparisonAxis: L,
+      showDataComparison: C,
+      onLineClicked: R
     },
-    t
-  ), j = {
-    ...C,
-    data: [...C.data ?? [], ...(b == null ? void 0 : b.data) ?? []]
+    i
+  ), X = {
+    isLoading: x.isLoading,
+    data: x.isLoading ? void 0 : [...x.data ?? [], ...(g == null ? void 0 : g.data) ?? []]
   };
-  return /* @__PURE__ */ O.jsx(
-    ma,
+  return /* @__PURE__ */ M.jsx(
+    ce,
     {
-      data: j,
-      dimensionsAndMeasures: [...p, e],
-      errorMessage: C.error,
-      subtitle: n,
-      title: o,
-      children: /* @__PURE__ */ O.jsx(
-        z,
+      data: X,
+      dimensionsAndMeasures: [...b, e],
+      errorMessage: x.error || (g == null ? void 0 : g.error),
+      subtitle: o,
+      title: n,
+      children: /* @__PURE__ */ M.jsx(
+        J,
         {
           data: y,
-          reverseXAxis: r,
-          showLegend: u,
-          showLogarithmicScale: c,
+          reverseXAxis: p,
+          showLegend: l,
+          showLogarithmicScale: u,
           showTooltips: h,
-          showValueLabels: i,
-          xAxisLabel: a,
-          yAxisLabel: d,
-          yAxisRangeMax: m,
-          yAxisRangeMin: g,
+          showValueLabels: f,
+          xAxisLabel: s,
+          yAxisLabel: c,
+          yAxisRangeMax: t,
+          yAxisRangeMin: m,
           options: T
         }
       )
     }
   );
-}, Aa = {
+}, Re = {
   name: "LineChartComparisonDefaultPro",
   label: "Line Chart Comparison - Default",
   category: "Line Charts",
   inputs: [
-    K,
+    W,
     {
       ...S,
       inputs: [
@@ -334,9 +342,9 @@ const R = "mainAxis", P = "comparisonAxis", $ = (s, t) => {
         { ...A, name: "connectGaps", label: "Connect gaps", defaultValue: !0 }
       ]
     },
-    { ...J, label: "X-axis", name: "xAxis" },
+    { ...H, label: "X-axis", name: "xAxis" },
     {
-      ...W,
+      ...Q,
       name: "primaryDateRange",
       label: "Primary Date Range",
       description: "You can also connect this to a date range selector using its variable",
@@ -344,7 +352,7 @@ const R = "mainAxis", P = "comparisonAxis", $ = (s, t) => {
     },
     {
       name: "comparisonPeriod",
-      type: xa,
+      type: fe,
       label: "Comparison Period",
       description: "You can also connect this to a comparison period selector using its variable",
       category: "Component Data"
@@ -356,66 +364,90 @@ const R = "mainAxis", P = "comparisonAxis", $ = (s, t) => {
       description: "Choose the time property used for filtering comparison ranges. This will be ignored if your x-axis is already time-based.",
       required: !1
     },
-    H,
-    Q,
-    aa,
-    ea,
-    sa,
-    ta,
-    oa,
-    na,
-    ia,
-    ra,
-    la,
+    ee,
+    ae,
+    se,
+    ne,
+    ie,
+    oe,
+    te,
+    re,
+    le,
+    me,
+    de,
     {
       ...A,
       name: "showComparisonAxis",
       label: "Display a comparison X-axis",
       defaultValue: !0
     }
+  ],
+  events: [
+    {
+      name: "onLineClicked",
+      label: "A line is clicked",
+      properties: [
+        {
+          name: "axisDimensionValue",
+          label: "Clicked Axis Dimension Value",
+          type: "string"
+        },
+        {
+          name: "groupingDimensionValue",
+          label: "Clicked Grouping Dimension Value",
+          type: "string"
+        }
+      ]
+    }
   ]
-}, Sa = _(Da, Aa, {
+}, Ne = G(ve, Re, {
   /* @ts-expect-error - to be fixed in @embeddable.com/react */
-  props: (s, [t, o]) => {
-    const n = [
+  props: (a, [i, n]) => {
+    const o = [
       {
-        property: s.xAxis,
+        property: a.xAxis,
         direction: "asc"
       }
-    ], a = s.xAxis.nativeType === "time" ? s.xAxis : s.timePropertyForNonTimeDimensions;
+    ], s = a.xAxis.nativeType === "time" ? a.xAxis : a.timePropertyForNonTimeDimensions;
     return {
-      ...s,
-      comparisonDateRange: t == null ? void 0 : t.comparisonDateRange,
-      setComparisonDateRange: (d) => o({ comparisonDateRange: d }),
-      results: F({
-        from: s.dataset,
-        select: [...s.measures, s.xAxis],
-        orderBy: n,
-        filters: s.primaryDateRange && a ? [
+      ...a,
+      comparisonDateRange: i == null ? void 0 : i.comparisonDateRange,
+      setComparisonDateRange: (c) => n({ comparisonDateRange: c }),
+      results: N({
+        from: a.dataset,
+        select: [...a.measures, a.xAxis],
+        orderBy: o,
+        filters: a.primaryDateRange && s ? [
           {
-            property: a,
+            property: s,
             operator: "inDateRange",
-            value: s.primaryDateRange
+            value: a.primaryDateRange
           }
         ] : void 0
       }),
-      resultsComparison: s.primaryDateRange && a && (t != null && t.comparisonDateRange) ? F({
-        from: s.dataset,
-        select: [...s.measures, s.xAxis],
-        orderBy: n,
+      resultsComparison: a.primaryDateRange && s && (i != null && i.comparisonDateRange) ? N({
+        from: a.dataset,
+        select: [...a.measures, a.xAxis],
+        orderBy: o,
         filters: [
           {
-            property: a,
+            property: s,
             operator: "inDateRange",
-            value: t.comparisonDateRange
+            value: i.comparisonDateRange
           }
         ]
       }) : void 0
     };
+  },
+  events: {
+    onLineClicked: (a) => ({
+      axisDimensionValue: a.dimensionValue || F.noFilter(),
+      groupingDimensionValue: a.groupingDimensionValue || F.noFilter()
+    })
   }
 });
 export {
-  Sa as default,
-  Aa as meta
+  Ne as default,
+  Re as meta
 };
 //# sourceMappingURL=LineChartComparisonDefaultPro.js.map