@ledgerhq/lumen-ui-react-visualization 0.1.10 → 0.1.11

package/dist/index.js

@@ -1,11 +1,13 @@
-import { LineChart as e } from "./lib/Components/LineChart/LineChart.js";
-import { Point as b, PointLabel as x } from "./lib/Components/Point/Point.js";
-import { Scrubber as m } from "./lib/Components/Scrubber/Scrubber.js";
-import { useScrubberContext as p } from "./lib/Components/Scrubber/context/scrubberContext.js";
+import { ChartTooltip as t } from "./lib/Components/ChartTooltip/ChartTooltip.js";
+import { LineChart as p } from "./lib/Components/LineChart/LineChart.js";
+import { Point as b, PointLabel as f } from "./lib/Components/Point/Point.js";
+import { Scrubber as i } from "./lib/Components/Scrubber/Scrubber.js";
+import { useScrubberContext as a } from "./lib/Components/Scrubber/context/scrubberContext.js";
 export {
-  e as LineChart,
+  t as ChartTooltip,
+  p as LineChart,
   b as Point,
-  x as PointLabel,
-  m as Scrubber,
-  p as useScrubberContext
+  f as PointLabel,
+  i as Scrubber,
+  a as useScrubberContext
 };

package/dist/lib/Components/ChartTooltip/ChartTooltip.d.ts

@@ -0,0 +1,23 @@
+import { ChartTooltipProps } from './types';
+/**
+ * Renders a structured tooltip anchored to the scrubber line.
+ *
+ * Visible at every scrubber position by default. To limit which positions
+ * show a tooltip, return an empty array from `items` for unwanted indices.
+ *
+ * Must be used as a child of `LineChart` (or `CartesianChart`) with
+ * `enableScrubbing` enabled.
+ *
+ * @example
+ * ```tsx
+ * <LineChart series={series} enableScrubbing>
+ *   <Scrubber />
+ *   <ChartTooltip
+ *     title={(i) => `${count[i]} Transactions`}
+ *     items={(i) => [{ label: 'Index', value: i }]}
+ *   />
+ * </LineChart>
+ * ```
+ */
+export declare function ChartTooltip({ title, items, offset, side, tooltipWidth, }: Readonly<ChartTooltipProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChartTooltip.d.ts.map

package/dist/lib/Components/ChartTooltip/ChartTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ChartTooltip/ChartTooltip.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAwB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAwBvE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,MAAuB,EACvB,IAAa,EACb,YAAoC,GACrC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAqE7B"}

package/dist/lib/Components/ChartTooltip/ChartTooltip.js

@@ -0,0 +1,81 @@
+import { jsx as l, jsxs as P } from "react/jsx-runtime";
+import { resolvePixelX as b } from "../Scrubber/utils.js";
+import { ChartTooltipItem as A } from "./ChartTooltipItem.js";
+import { TOOLTIP_TRANSITION as L, BORDER_RADIUS as S, DEFAULT_TOOLTIP_WIDTH as C, PADDING_Y as d, ROW_HEIGHT as o, PADDING_X as R, ROW_GAP as I, DEFAULT_OFFSET as F, TITLE_GAP as G } from "./constants.js";
+import { useScrubberContext as H } from "../Scrubber/context/scrubberContext.js";
+import { useCartesianChartContext as X } from "../CartesianChart/context/cartesianChartContext.js";
+import { cssVar as e } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
+const p = /* @__PURE__ */ l(
+  "g",
+  {
+    "data-testid": "chart-tooltip",
+    role: "tooltip",
+    "aria-hidden": "true",
+    style: { opacity: 0, pointerEvents: "none", transition: "none" }
+  }
+), w = {
+  opacity: 1,
+  transition: L,
+  pointerEvents: "none"
+}, N = {
+  fontSize: e("var(--font-style-body-4-size)"),
+  fontFamily: e("var(--font-family-font)"),
+  fill: e("var(--text-base)"),
+  fontWeight: e("var(--font-style-body-4-weight-medium)")
+};
+function V({
+  title: s,
+  items: g,
+  offset: c = F,
+  side: f = "auto",
+  tooltipWidth: i = C
+}) {
+  const { scrubberPosition: n } = H(), { getXScale: v, getXAxisConfig: O, drawingArea: t } = X();
+  if (n === void 0) return p;
+  const r = b(n, v, O());
+  if (r === void 0) return p;
+  const a = g(n);
+  if (a.length === 0) return p;
+  const m = typeof s == "function" ? s(n) : s, h = m != null, _ = f === "left" || f === "auto" && r + c + i > t.x + t.width, T = Math.max(
+    t.x,
+    _ ? r - c - i : r + c
+  ), u = h ? o + G : 0, E = d * 2 + u + a.length * o + (a.length - 1) * I, D = t.y + d + u;
+  return /* @__PURE__ */ P("g", { "data-testid": "chart-tooltip", role: "tooltip", style: w, children: [
+    /* @__PURE__ */ l(
+      "rect",
+      {
+        x: T,
+        y: t.y,
+        width: i,
+        height: E,
+        rx: S,
+        fill: e("var(--background-muted)")
+      }
+    ),
+    h && /* @__PURE__ */ l(
+      "text",
+      {
+        "data-testid": "chart-tooltip-title",
+        x: T + R,
+        y: t.y + d + o / 2,
+        dominantBaseline: "middle",
+        style: N,
+        children: m
+      }
+    ),
+    a.map((y, x) => /* @__PURE__ */ l(
+      A,
+      {
+        label: y.label,
+        value: y.value,
+        x: T,
+        y: D + x * (o + I) + o / 2,
+        width: i
+      },
+      x
+    ))
+  ] });
+}
+export {
+  V as ChartTooltip
+};

package/dist/lib/Components/ChartTooltip/ChartTooltipItem.d.ts

@@ -0,0 +1,3 @@
+import { ChartTooltipItemProps } from './types';
+export declare function ChartTooltipItem({ label, value, x, y, width, }: Readonly<ChartTooltipItemProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChartTooltipItem.d.ts.map

package/dist/lib/Components/ChartTooltip/ChartTooltipItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltipItem.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ChartTooltip/ChartTooltipItem.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,CAAK,EACL,CAAK,EACL,KAAK,GACN,EAAE,QAAQ,CAAC,qBAAqB,CAAC,2CA+BjC"}

package/dist/lib/Components/ChartTooltip/ChartTooltipItem.js

@@ -0,0 +1,46 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { PADDING_X as n } from "./constants.js";
+import { cssVar as t } from "../../../libs/design-core/dist/lib/cssVar/cssVar.js";
+function y({
+  label: r,
+  value: l,
+  x: e = 0,
+  y: o = 0,
+  width: f
+}) {
+  return /* @__PURE__ */ a("g", { children: [
+    /* @__PURE__ */ i(
+      "text",
+      {
+        x: e + n,
+        y: o,
+        dominantBaseline: "middle",
+        style: {
+          fontSize: t("var(--font-style-body-4-size)"),
+          fontFamily: t("var(--font-family-font)"),
+          fill: t("var(--text-muted)")
+        },
+        children: r
+      }
+    ),
+    /* @__PURE__ */ i(
+      "text",
+      {
+        x: e + f - n,
+        y: o,
+        dominantBaseline: "middle",
+        textAnchor: "end",
+        style: {
+          fontSize: t("var(--font-style-body-4-size)"),
+          fontFamily: t("var(--font-family-font)"),
+          fill: t("var(--text-base)"),
+          fontWeight: t("var(--font-style-body-4-weight-medium)")
+        },
+        children: l
+      }
+    )
+  ] });
+}
+export {
+  y as ChartTooltipItem
+};

package/dist/lib/Components/ChartTooltip/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const DEFAULT_OFFSET = 10;
+export declare const DEFAULT_TOOLTIP_WIDTH = 120;
+export declare const PADDING_X = 8;
+export declare const PADDING_Y = 8;
+export declare const ROW_HEIGHT = 16;
+export declare const ROW_GAP = 6;
+export declare const TITLE_GAP = 6;
+export declare const BORDER_RADIUS = 4;
+export declare const TOOLTIP_TRANSITION = "opacity 0.15s ease-out 0.05s";
+//# sourceMappingURL=constants.d.ts.map

package/dist/lib/Components/ChartTooltip/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ChartTooltip/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,eAAO,MAAM,UAAU,KAAK,CAAC;AAC7B,eAAO,MAAM,OAAO,IAAI,CAAC;AACzB,eAAO,MAAM,SAAS,IAAI,CAAC;AAC3B,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,kBAAkB,iCAAiC,CAAC"}

package/dist/lib/Components/ChartTooltip/constants.js

@@ -0,0 +1,12 @@
+const T = 10, o = 120, s = 8, t = 8, c = 16, I = 6, _ = 6, n = 4, D = "opacity 0.15s ease-out 0.05s";
+export {
+  n as BORDER_RADIUS,
+  T as DEFAULT_OFFSET,
+  o as DEFAULT_TOOLTIP_WIDTH,
+  s as PADDING_X,
+  t as PADDING_Y,
+  I as ROW_GAP,
+  c as ROW_HEIGHT,
+  _ as TITLE_GAP,
+  D as TOOLTIP_TRANSITION
+};

package/dist/lib/Components/ChartTooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { ChartTooltip } from './ChartTooltip';
+export type { ChartTooltipProps, ChartTooltipItemData } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/Components/ChartTooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ChartTooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC"}

package/dist/lib/Components/ChartTooltip/types.d.ts

@@ -0,0 +1,61 @@
+import { ReactElement, SVGProps } from 'react';
+/**
+ * Valid content for an SVG `<text>` element: a plain string,
+ * a number, or a `<tspan>` element.
+ */
+export type SvgTextContent = string | number | ReactElement<SVGProps<SVGTSpanElement>, 'tspan'>;
+export type ChartTooltipItemData = {
+    /** Label displayed on the left side of the row. */
+    label: SvgTextContent;
+    /** Value displayed on the right side of the row. */
+    value: SvgTextContent;
+};
+export type ChartTooltipItemProps = ChartTooltipItemData & {
+    /**
+     * X position in SVG coordinate space.
+     * @default 0
+     */
+    x?: number;
+    /**
+     * Y midline position in SVG coordinate space.
+     * @default 0
+     */
+    y?: number;
+    /**
+     * Width allocated to this row, used to right-align the value text.
+     */
+    width: number;
+};
+export type ChartTooltipProps = {
+    /**
+     * Optional header rendered at the top of the tooltip card.
+     * Accepts a static value or a callback receiving the active data index.
+     * A callback may return `null` or `undefined` to suppress the title for a
+     * specific data index without unmounting the tooltip.
+     */
+    title?: SvgTextContent | ((index: number) => SvgTextContent | null | undefined);
+    /**
+     * Produces tooltip rows from the active data index.
+     * Each returned item is rendered as a `<ChartTooltipItem>`.
+     * Return an empty array to suppress the tooltip at a given index.
+     */
+    items: (index: number) => ChartTooltipItemData[];
+    /**
+     * Horizontal gap in pixels between the scrubber line and the tooltip box.
+     * @default 10
+     */
+    offset?: number;
+    /**
+     * Which side of the scrubber line the tooltip appears on.
+     * `'auto'` flips to the left when the right side would overflow.
+     * @default 'auto'
+     */
+    side?: 'auto' | 'left' | 'right';
+    /**
+     * Fixed width of the tooltip box in pixels.
+     * Used for flip-side detection and for right-aligning value text.
+     * @default 120
+     */
+    tooltipWidth?: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/Components/ChartTooltip/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/ChartTooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD;;;GAGG;AACH,MAAM,MAAM,cAAc,GACtB,MAAM,GACN,MAAM,GACN,YAAY,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,CAAC;AAErD,MAAM,MAAM,oBAAoB,GAAG;IACjC,mDAAmD;IACnD,KAAK,EAAE,cAAc,CAAC;IACtB,oDAAoD;IACpD,KAAK,EAAE,cAAc,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,oBAAoB,GAAG;IACzD;;;OAGG;IACH,CAAC,CAAC,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,CAAC,CAAC,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;OAKG;IACH,KAAK,CAAC,EACF,cAAc,GACd,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAC3D;;;;OAIG;IACH,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,oBAAoB,EAAE,CAAC;IACjD;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACjC;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC"}

package/dist/lib/Components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './ChartTooltip';
 export * from './LineChart';
 export * from './Point';
 export * from './Scrubber';

package/dist/lib/Components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC"}

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react-visualization",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -34,7 +34,7 @@
   },
   "peerDependencies": {
     "@ledgerhq/lumen-design-core": "0.1.13",
-    "@ledgerhq/lumen-ui-react": "0.1.30",
+    "@ledgerhq/lumen-ui-react": "0.1.31",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "react": "^18.0.0 || ^19.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react-visualization",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -33,8 +33,8 @@
     ]
   },
   "peerDependencies": {
-    "@ledgerhq/lumen-design-core": "0.1.13",
-    "@ledgerhq/lumen-ui-react": "0.1.31",
+    "@ledgerhq/lumen-design-core": "0.1.14",
+    "@ledgerhq/lumen-ui-react": "0.1.32",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "react": "^18.0.0 || ^19.0.0",