@embeddable.com/remarkable-ui 0.1.19 → 0.1.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@embeddable.com/remarkable-ui",
   "author": "embeddable (https://embeddable.com)",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -55,20 +55,21 @@
   },
   "dependencies": {
     "@changesets/cli": "^2.29.6",
+    "@embeddable.com/core": "^2.11.1",
+    "@embeddable.com/react": "^2.11.0",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@tabler/icons-react": "^3.34.1",
     "chart.js": "^4.5.0",
     "chartjs-plugin-annotation": "^3.1.0",
     "chartjs-plugin-datalabels": "^2.2.0",
+    "chroma-js": "^3.1.2",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.14",
     "dom-to-image-more": "^3.6.3",
     "i18next": "^25.3.2",
     "mergician": "^2.0.2",
     "react-chartjs-2": "^5.3.0",
-    "xlsx": "^0.18.5",
-    "@embeddable.com/core": "^2.11.1",
-    "@embeddable.com/react": "^2.11.0"
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@embeddable.com/sdk-core": "^4.1.2",
@@ -80,6 +81,7 @@
     "@storybook/react-webpack5": "^9.0.17",
     "@swc/cli": "^0.4.0",
     "@swc/core": "^1.4.0",
+    "@types/chroma-js": "^3.1.1",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "eslint": "^9.31.0",

package/dist/charts.fillGaps.hooks-BvYoaRpE.js

@@ -1,584 +0,0 @@
-import { B as g, C as v, m as R, D as Q, E as I, F as J, G as X, L as tt, H as et, I as at, J as rt, K as st, M as nt, N as ot, j as N, O as lt, P as it, Q as ct, R as Y } from "./component.constants-CL4mGURD.js";
-import { useRef as ut, useMemo as dt } from "react";
-import { r as mt, g as G, a as ft, b as H } from "./object.utils-CaoDr05j.js";
-import { g as B } from "./formatter.utils-BaAiNARZ.js";
-import { d as b } from "./utc-B2gCnkBk.js";
-import { useTheme as ht } from "@embeddable.com/react";
-const gt = {
-  datalabels: {
-    labels: {
-      total: {
-        anchor: (t) => t.dataset.data[t.dataIndex] >= 0 ? "end" : "start",
-        align: (t) => t.dataset.data[t.dataIndex] >= 0 ? "top" : "bottom"
-      },
-      value: {
-        anchor: (t) => t.dataset.data[t.dataIndex] >= 0 ? "end" : "start",
-        align: (t) => t.dataset.data[t.dataIndex] >= 0 ? "top" : "bottom"
-      }
-    }
-  }
-}, pt = {
-  display: !0,
-  color: v("--em-chart-grid-font-color-default"),
-  font: {
-    size: g("--em-chart-grid-font-subtitle-size"),
-    weight: g("--em-chart-grid-font-label-weight"),
-    lineHeight: `${g("--em-chart-grid-font-line-height")}px`
-    // TODO: fix family on dedicated ticket
-    // family: getStyle('--em-chart-grid-font-font-family'),
-  }
-}, bt = {
-  display: !0,
-  color: v("--em-chart-grid-font-color-muted"),
-  font: {
-    size: g("--em-chart-grid-font-subtitle-size"),
-    weight: g("--em-chart-grid-font-label-weight"),
-    lineHeight: `${g("--em-chart-grid-font-line-height")}px`
-    // TODO: fix family on dedicated ticket
-    // family: getStyle('--em-chart-grid-font-font-family'),
-  }
-}, U = {
-  color: v("--em-chart-grid-font-color-default"),
-  font: {
-    size: g("--em-chart-grid-font-title-size"),
-    weight: g("--em-chart-grid-font-title-weight"),
-    lineHeight: `${g("--em-chart-grid-font-line-height")}px`
-    // TODO: fix family on dedicated ticket
-    // family: getStyle('--em-chart-grid-font-font-family'),
-  }
-}, _ = {
-  color: v("--em-chart-grid-line-color-light"),
-  lineWidth: g("--em-chart-grid-line-width-default")
-}, Dt = {
-  x: {
-    grid: _,
-    title: U,
-    ticks: pt
-  },
-  y: {
-    grid: _,
-    title: U,
-    ticks: bt
-  }
-}, yt = R(Q, {
-  plugins: gt,
-  scales: Dt
-}), z = 30, Tt = (t) => {
-  var e;
-  return {
-    ...t,
-    datasets: (e = t.datasets) == null ? void 0 : e.map((r, n) => {
-      const a = I[n % I.length], s = {
-        ...r,
-        backgroundColor: a,
-        borderColor: a
-      };
-      return R(s, r);
-    })
-  };
-}, Ot = (t, e) => e && t.datasetIndex === t.chart.data.datasets.length - 1 ? "auto" : !1, St = (t, e) => {
-  const { datasets: r } = e.chart.data, n = e.dataIndex, a = r.reduce((s, c) => {
-    const l = c.data[n];
-    return s + (l || 0);
-  }, 0);
-  return a > 0 ? a : "";
-}, xt = (t) => ({
-  indexAxis: "x",
-  layout: {
-    padding: {
-      top: (t.stacked ? t.showTotalLabels : t.showValueLabels) ? z : 0
-    }
-  },
-  plugins: {
-    datalabels: {
-      labels: {
-        total: {
-          align: (e) => e.dataset.data[e.dataIndex] >= 0 ? "top" : "left"
-        },
-        value: {
-          align: (e) => t.stacked ? "center" : e.dataset.data[e.dataIndex] >= 0 ? "top" : "bottom"
-        }
-      }
-    }
-  },
-  scales: {
-    x: {
-      grid: { display: !1 },
-      ticks: {
-        color: v("--em-chart-grid-font-color-default")
-      },
-      reverse: t.reverseXAxis
-    },
-    y: {
-      grid: { display: !0 },
-      ticks: {
-        color: v("--em-chart-grid-font-color-muted")
-      },
-      min: t.yAxisRangeMin,
-      max: t.yAxisRangeMax,
-      type: t.showLogarithmicScale ? "logarithmic" : "linear"
-    }
-  }
-}), vt = (t) => ({
-  indexAxis: "y",
-  layout: {
-    padding: {
-      right: (t.stacked ? t.showTotalLabels : t.showValueLabels) ? z : 0
-    }
-  },
-  plugins: {
-    datalabels: {
-      labels: {
-        total: {
-          align: (e) => e.dataset.data[e.dataIndex] >= 0 ? "right" : "left"
-        },
-        value: {
-          align: (e) => t.stacked ? "center" : e.dataset.data[e.dataIndex] >= 0 ? "right" : "left"
-        }
-      }
-    }
-  },
-  scales: {
-    x: {
-      grid: { display: !0 },
-      ticks: {
-        color: v("--em-chart-grid-font-color-muted")
-      },
-      min: t.xAxisRangeMin,
-      max: t.xAxisRangeMax,
-      type: t.showLogarithmicScale ? "logarithmic" : "linear"
-    },
-    y: {
-      grid: { display: !1 },
-      ticks: {
-        color: v("--em-chart-grid-font-color-default")
-      },
-      reverse: t.reverseYAxis
-    }
-  }
-}), Ct = (t) => {
-  const e = {
-    elements: {
-      bar: {
-        borderRadius: g("--em-chart-style-border-radius-default")
-      }
-    },
-    plugins: {
-      legend: { display: t.showLegend },
-      tooltip: {
-        enabled: t.showTooltips
-      },
-      datalabels: {
-        display: (a) => t.showValueLabels && a.dataset.data[a.dataIndex] !== 0 ? "auto" : !1,
-        labels: {
-          total: {
-            display: (a) => Ot(a, t.showTotalLabels),
-            formatter: St,
-            anchor: (a) => a.dataset.data[a.dataIndex] >= 0 ? "end" : "start"
-          },
-          value: {
-            anchor: (a) => t.stacked ? "center" : a.dataset.data[a.dataIndex] >= 0 ? "end" : "start"
-          }
-        }
-      }
-    },
-    scales: {
-      x: {
-        stacked: !!t.stacked,
-        title: {
-          display: !!t.xAxisLabel,
-          text: t.xAxisLabel ?? ""
-        },
-        ticks: { display: !0 }
-      },
-      y: {
-        stacked: !!t.stacked,
-        title: {
-          display: !!t.yAxisLabel,
-          text: t.yAxisLabel ?? ""
-        },
-        ticks: { display: !0 }
-      }
-    }
-  }, n = (t.horizontal ? vt : xt)(t);
-  return R(yt, e, n);
-};
-J.register(
-  X,
-  tt,
-  et,
-  at,
-  rt,
-  st,
-  nt,
-  ot
-);
-const zt = ({ data: t, onSegmentClick: e, options: r = {}, ...n }) => {
-  const a = ut(null), s = R(Ct(n), r), c = (l) => {
-    const o = ct(l, a);
-    e == null || e(o);
-  };
-  return /* @__PURE__ */ N.jsx("div", { className: lt.chartContainer, children: /* @__PURE__ */ N.jsx(
-    it,
-    {
-      ref: a,
-      data: Tt(t),
-      options: s,
-      onClick: c
-    }
-  ) });
-}, Kt = (t, e) => {
-  const r = B(e), { data: n = [], dimension: a, groupDimension: s, measure: c } = t, l = [...new Set(n.map((d) => d[a.name]).filter(Boolean))].sort(), o = [...new Set(n.map((d) => d[s.name]))], u = G(e), m = o.map((d, T) => {
-    const O = H(
-      `${u}.charts.backgroundColors`,
-      `${s.name}.${d}`,
-      e.charts.backgroundColors ?? I,
-      T
-    ), C = H(
-      `${u}.charts.borderColors`,
-      `${s.name}.${d}`,
-      e.charts.borderColors ?? I,
-      T
-    );
-    return {
-      label: r.data(s, d),
-      rawLabel: d,
-      backgroundColor: O,
-      borderColor: C,
-      data: l.map((k) => {
-        const w = n.find(
-          (S) => S[s.name] === d && S[a.name] === k
-        );
-        return w ? Number(w[c.name]) : 0;
-      })
-    };
-  });
-  return {
-    labels: l,
-    datasets: m
-  };
-}, Vt = (t, e = mt) => {
-  const r = B(e);
-  if (!t.data)
-    return {
-      labels: [],
-      datasets: [{ data: [] }]
-    };
-  const n = G(e), a = ft(t.data, t.dimension, t.measures, t.maxItems);
-  return {
-    labels: a.map((s) => s[t.dimension.name]),
-    datasets: t.measures.map((s, c) => {
-      const l = H(
-        `${n}.charts.backgroundColors`,
-        s.name,
-        e.charts.backgroundColors ?? Y,
-        c
-      ), o = H(
-        `${n}.charts.borderColors`,
-        s.name,
-        e.charts.borderColors ?? Y,
-        c
-      );
-      return {
-        label: r.dimensionOrMeasureTitle(s),
-        data: a.map((u) => u[s.name]),
-        backgroundColor: l,
-        borderColor: o
-      };
-    })
-  };
-}, kt = (t, e) => {
-  const { datasets: r } = t.chart.data, n = t.dataIndex, a = r.reduce((s, c) => {
-    const l = c.data[n];
-    return s + (l || 0);
-  }, 0);
-  return e(a);
-}, Zt = (t, e) => {
-  const { onBarClicked: r, measure: n, dimension: a, horizontal: s, data: c } = t, l = B(e);
-  return {
-    plugins: {
-      legend: { position: e.charts.legendPosition ?? "bottom" },
-      datalabels: {
-        labels: {
-          total: {
-            formatter: (o, u) => kt(
-              u,
-              (m) => l.data(t.measure, m)
-            )
-          },
-          value: {
-            formatter: (o) => l.data(t.measure, o)
-          }
-        }
-      },
-      tooltip: {
-        callbacks: {
-          title: (o) => {
-            var m;
-            const u = (m = o[0]) == null ? void 0 : m.label;
-            return l.data(a, u);
-          },
-          label: (o) => {
-            const u = o.raw;
-            return `${l.data(a, o.dataset.label) || ""}: ${l.data(n, u)}`;
-          }
-        }
-      }
-    },
-    scales: {
-      x: {
-        ticks: {
-          callback: (o) => {
-            if (s)
-              return l.data(n, o);
-            if (!c || !c.labels) return;
-            const u = c.labels[Number(o)];
-            return l.data(a, u);
-          }
-        }
-      },
-      y: {
-        ticks: {
-          callback: (o) => {
-            if (!s)
-              return l.data(n, o);
-            if (!c || !c.labels) return;
-            const u = c.labels[Number(o)];
-            return l.data(a, u);
-          }
-        }
-      }
-    },
-    onClick: (o, u, m) => {
-      var C;
-      const d = u[0], T = d ? m.data.labels[d.index] : null, O = d ? (C = m.data.datasets[d.datasetIndex]) == null ? void 0 : C.rawLabel : null;
-      r({
-        axisDimensionValue: T,
-        groupingDimensionValue: O
-      });
-    }
-  };
-}, y = {
-  DEFAULT: "YYYY-MM-DDTHH:mm:ss.SSS",
-  WITH_TIMEZONE: "YYYY-MM-DDTHH:mm:ss.SSS[Z]",
-  WITHOUT_TIMEZONE: "YYYY-MM-DDTHH:mm:ss.SSS",
-  WITHOUT_MILLISECONDS: "YYYY-MM-DDTHH:mm:ss"
-}, j = {
-  second: "second",
-  minute: "minute",
-  hour: "hour",
-  day: "day",
-  week: "week",
-  month: "month",
-  quarter: "month",
-  // Will be handled specially
-  year: "year"
-}, wt = (t) => `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}-${String(t.getDate()).padStart(2, "0")}`, At = (t) => `${t.getUTCFullYear()}-${String(t.getUTCMonth() + 1).padStart(2, "0")}-${String(t.getUTCDate()).padStart(2, "0")}`, Mt = (t) => t.toISOString().includes("Z"), F = (t) => Mt(t) ? At(t) : wt(t), Et = (t) => t.startOf("month").month(Math.floor(t.month() / 3) * 3).startOf("month"), $ = (t, e) => {
-  const r = K(e);
-  return e === "week" ? t.startOf("week") : e === "quarter" ? Et(t) : t.startOf(r);
-}, It = (t, e) => {
-  var a, s;
-  const r = (a = t.inputs) == null ? void 0 : a.dateBounds;
-  if (!r) return;
-  if (r.from && r.to)
-    return r;
-  const n = r.relativeTimeString;
-  if (n) {
-    const l = (((s = e == null ? void 0 : e.defaults) == null ? void 0 : s.dateRangesOptions) ?? []).find((o) => o.value === n);
-    if (l) {
-      const o = l.getRange();
-      return {
-        from: o.from,
-        to: o.to,
-        relativeTimeString: n
-      };
-    }
-  }
-}, Ht = (t, e) => {
-  const { dimension: r, granularity: n = "day", sortOrder: a = "asc", dateBounds: s, theme: c } = e, l = s || It(r, c);
-  if (!t || t.length === 0)
-    return t;
-  if (!(r != null && r.name))
-    throw new Error("dimension.name is required");
-  const o = Rt(r.name, n, t), u = t.map((i) => {
-    const f = i[o];
-    if (typeof f != "string")
-      return null;
-    const h = b(f);
-    return h.isValid() ? { ...i, _parsedDate: h } : null;
-  }).filter(
-    (i) => i !== null
-  );
-  if (u.length === 0)
-    return console.warn("fillGaps: No valid dates found in data"), t;
-  let m, d;
-  if (l) {
-    const i = l.from instanceof Date ? l.from : new Date(l.from), f = l.to instanceof Date ? l.to : new Date(l.to);
-    if (n === "second" || n === "minute" || n === "hour")
-      m = b(i), d = b(f);
-    else {
-      const h = F(i), p = F(f);
-      m = b(h), d = b(p);
-    }
-    m = $(m, n), d = $(d, n);
-  } else {
-    const i = u[0];
-    if (!i)
-      return t;
-    let f = i._parsedDate, h = i._parsedDate;
-    for (let p = 1; p < u.length; p++) {
-      const A = u[p];
-      if (A) {
-        const x = A._parsedDate;
-        x.isBefore(f) && (f = x), x.isAfter(h) && (h = x);
-      }
-    }
-    m = f, d = h;
-  }
-  const T = [], O = K(n), C = m.startOf(O), k = d.startOf(O);
-  if (n === "week") {
-    let i = C;
-    for (; i.isBefore(k) || i.isSame(k, "day"); )
-      T.push(i), i = i.add(7, "day");
-  } else {
-    let i = C;
-    for (; i.isBefore(k) || i.isSame(k, O); )
-      T.push(i), n === "quarter" ? i = i.add(3, "month") : i = i.add(1, O);
-  }
-  const w = /* @__PURE__ */ new Map();
-  u.forEach((i) => {
-    const f = W(i._parsedDate);
-    w.set(f, i);
-  });
-  const S = [];
-  return T.forEach((i) => {
-    const f = W(i), h = w.get(f);
-    if (h) {
-      const p = { ...h };
-      delete p._parsedDate, S.push(p);
-    } else {
-      const p = Bt(t), A = Lt(i, p), x = {
-        [o]: A
-      }, q = r.name, L = t[0];
-      if (L)
-        for (const M of Object.keys(L))
-          M !== o && (M.startsWith(q) && M !== o ? x[M] = A : x[M] = null);
-      S.push(x);
-    }
-  }), a === "desc" ? S.sort(
-    (i, f) => b(f[o]).valueOf() - b(i[o]).valueOf()
-  ) : S.sort(
-    (i, f) => b(i[o]).valueOf() - b(f[o]).valueOf()
-  ), S;
-}, W = (t) => t.format("YYYY-MM-DDTHH:mm:ss"), Rt = (t, e, r) => {
-  if (!r || r.length === 0) return t;
-  const n = r[0];
-  if (!n) return t;
-  const a = `${t}.${e}`;
-  return a in n ? a : t;
-}, Bt = (t) => {
-  if (!(t != null && t.length)) return y.DEFAULT;
-  const e = t[0];
-  if (!e) return y.DEFAULT;
-  for (const r of Object.values(e))
-    if (typeof r == "string" && r.includes("T") && r.includes(":"))
-      return r.endsWith("Z") ? y.WITH_TIMEZONE : r.includes(".") ? y.WITHOUT_TIMEZONE : y.WITHOUT_MILLISECONDS;
-  return y.DEFAULT;
-}, Lt = (t, e) => e.includes("[Z]") ? t.format(y.WITH_TIMEZONE) : e.includes(".SSS") ? t.format(y.WITHOUT_TIMEZONE) : t.format(y.WITHOUT_MILLISECONDS), K = (t) => j[t] || j.day, Pt = (t, e) => {
-  const r = ht(), n = dt(() => {
-    var u, m;
-    const a = t.data;
-    if (e.nativeType !== "time" || !a || a.length === 0)
-      return a;
-    const s = ((u = e.inputs) == null ? void 0 : u.granularity) || Yt(a, e);
-    if (!s || !(((m = e.inputs) == null ? void 0 : m.dateBounds) ?? Nt(a, e, s)))
-      return a;
-    const o = {
-      dimension: e,
-      granularity: s,
-      sortOrder: "asc",
-      theme: r
-    };
-    try {
-      return Ht(a, o);
-    } catch (d) {
-      return console.warn("Failed to apply fillGaps to chart data:", d), a;
-    }
-  }, [t.data, e, r]);
-  return {
-    ...t,
-    data: n
-  };
-}, Nt = (t, e, r) => {
-  if (!t || t.length < 2)
-    return !1;
-  const n = e.name, a = t.map((c) => c[n]).filter(Boolean).map((c) => new Date(c)).filter((c) => !isNaN(c.getTime())).sort((c, l) => c.getTime() - l.getTime());
-  if (a.length < 2)
-    return !1;
-  const s = Ut(r);
-  for (let c = 1; c < a.length; c++) {
-    const l = a[c], o = a[c - 1];
-    if (l && o && l.getTime() - o.getTime() > s * 1.5)
-      return !0;
-  }
-  return !1;
-}, Yt = (t, e) => {
-  if (!t || t.length === 0) return null;
-  const r = t[0];
-  if (!r) return null;
-  const n = e.name, a = Object.keys(r).filter(
-    (s) => s.startsWith(n) && s !== n
-  );
-  for (const s of a) {
-    if (s.includes(".second")) return "second";
-    if (s.includes(".minute")) return "minute";
-    if (s.includes(".hour")) return "hour";
-    if (s.includes(".day")) return "day";
-    if (s.includes(".week")) return "week";
-    if (s.includes(".month")) return "month";
-    if (s.includes(".quarter")) return "quarter";
-    if (s.includes(".year")) return "year";
-  }
-  return null;
-}, V = 1e3, Z = 60 * V, P = 60 * Z, E = 24 * P, D = {
-  SECOND: V,
-  MINUTE: Z,
-  HOUR: P,
-  DAY: E,
-  WEEK: 7 * E,
-  MONTH: 30 * E,
-  // Approximate
-  QUARTER: 90 * E,
-  // Approximate
-  YEAR: 365 * E
-  // Approximate
-}, Ut = (t) => {
-  switch (t) {
-    case "second":
-      return D.SECOND;
-    case "minute":
-      return D.MINUTE;
-    case "hour":
-      return D.HOUR;
-    case "day":
-      return D.DAY;
-    case "week":
-      return D.WEEK;
-    case "month":
-      return D.MONTH;
-    case "quarter":
-      return D.QUARTER;
-    case "year":
-      return D.YEAR;
-    default:
-      return D.DAY;
-  }
-};
-export {
-  zt as B,
-  Zt as a,
-  Kt as b,
-  Vt as g,
-  Pt as u
-};
-//# sourceMappingURL=charts.fillGaps.hooks-BvYoaRpE.js.map