@ledgerhq/lumen-ui-react-visualization 0.1.16 → 0.1.18

package/dist/lib/Components/CartesianChart/utils.js

@@ -1,12 +1,12 @@
 const l = 160, r = {
-  top: 50,
-  right: 50,
-  bottom: 50,
-  left: 50
+  top: 25,
+  right: 25,
+  bottom: 25,
+  left: 25
 }, f = {
   position: "relative",
-  top: -50,
-  left: -50
+  top: -25,
+  left: -25
 }, e = {
   top: 0,
   right: 0,

package/dist/lib/Components/LineChart/__stories__/chartStoryFixtures.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Shared fixtures for the Visualization Storybook stories.
+ *
+ * Every chart story renders through `<LineChart>` (never `<CartesianChart>`)
+ * and, where it makes sense, reuses the same dimensions and series so the
+ * examples stay visually consistent across the main component and its
+ * sub-components.
+ */
+/** Standard chart width (CSS length) shared by every story. */
+export declare const CHART_WIDTH = "100%";
+/** Standard chart height (px) shared by every story. */
+export declare const CHART_HEIGHT = 250;
+/**
+ * Canonical single-series dataset reused across stories. Declared with
+ * `satisfies` so `data` stays a concrete `number[]` (handy for index lookups
+ * in tooltip/label stories) while remaining assignable to `Series[]`.
+ */
+export declare const sampleSeries: {
+    id: string;
+    stroke: string;
+    data: number[];
+}[];
+/** Canonical two-series dataset for multi-line examples. */
+export declare const multiSeries: {
+    id: string;
+    label: string;
+    stroke: string;
+    data: number[];
+}[];
+/**
+ * Dense, deterministic single-series dataset (160 points) shaped like a real
+ * price series: a seeded random walk with mild mean reversion and occasional
+ * larger moves. Deterministic so stories (and visual snapshots) render
+ * identically every time. Useful for features that need many data points to
+ * read clearly, such as the magnetic scrubber: the scrubber glides over the
+ * many ordinary points but snaps onto the few magnetic ones.
+ */
+export declare const denseData: number[];
+export declare const denseSeries: {
+    id: string;
+    stroke: string;
+    data: number[];
+}[];
+/** Month labels aligned to the 14-point `sampleSeries`, for axis/scrubber stories. */
+export declare const monthLabels: string[];
+//# sourceMappingURL=chartStoryFixtures.d.ts.map

package/dist/lib/Components/LineChart/__stories__/chartStoryFixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chartStoryFixtures.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/LineChart/__stories__/chartStoryFixtures.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,+DAA+D;AAC/D,eAAO,MAAM,WAAW,SAAS,CAAC;AAElC,wDAAwD;AACxD,eAAO,MAAM,YAAY,MAAM,CAAC;AAEhC;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;;GAML,CAAC;AAErB,4DAA4D;AAC5D,eAAO,MAAM,WAAW;;;;;GAaJ,CAAC;AAErB;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,UAqBlB,CAAC;AAEL,eAAO,MAAM,WAAW;;;;GAEJ,CAAC;AAErB,sFAAsF;AACtF,eAAO,MAAM,WAAW,UAevB,CAAC"}

package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/ChartTooltipItem.js

@@ -3,30 +3,30 @@ import { memo as d } from "react";
 import { PADDING_X as n } from "./constants.js";
 import { cssVar as t } from "../../../../libs/design-core/dist/lib/cssVar/cssVar.js";
 const y = {
-  fontSize: t("var(--font-style-body-4-size)"),
+  fontSize: t("var(--font-style-body-3-size)"),
   fontFamily: t("var(--font-family-font)"),
   fill: t("var(--text-muted)")
 }, c = {
-  fontSize: t("var(--font-style-body-4-size)"),
+  fontSize: t("var(--font-style-body-3-size)"),
   fontFamily: t("var(--font-family-font)"),
   fill: t("var(--text-base)"),
-  fontWeight: t("var(--font-style-body-4-weight-medium)")
-}, b = d(function({
+  fontWeight: t("var(--font-style-body-3-weight-semi-bold)")
+}, L = d(function({
   label: r,
   value: f,
-  x: e = 0,
-  y: o = 0,
-  width: m,
-  labelRef: l,
+  x: o = 0,
+  y: e = 0,
+  width: l,
+  labelRef: m,
   valueRef: a
 }) {
   return /* @__PURE__ */ s("g", { children: [
     /* @__PURE__ */ i(
       "text",
       {
-        ref: l,
-        x: e + n,
-        y: o,
+        ref: m,
+        x: o + n,
+        y: e,
         dominantBaseline: "middle",
         style: y,
         children: r
@@ -36,8 +36,8 @@ const y = {
       "text",
       {
         ref: a,
-        x: e + m - n,
-        y: o,
+        x: o + l - n,
+        y: e,
         dominantBaseline: "middle",
         textAnchor: "end",
         style: c,
@@ -47,5 +47,5 @@ const y = {
   ] });
 });
 export {
-  b as ChartTooltipItem
+  L as ChartTooltipItem
 };

package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultScrubberTooltip.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA4BrD;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,WAAW,EACX,KAAK,EACL,KAAK,EACL,MAAuB,EACvB,QAAoC,GACrC,EAAE,QAAQ,CAAC,oBAAoB,CAAC,kDAiEhC"}
+{"version":3,"file":"DefaultScrubberTooltip.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA2BrD;;;;;;;;GAQG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,WAAW,EACX,KAAK,EACL,KAAK,EACL,MAAuB,EACvB,QAAoC,GACrC,EAAE,QAAQ,CAAC,oBAAoB,CAAC,kDAiEhC"}

package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/DefaultScrubberTooltip.js

@@ -1,74 +1,74 @@
-import { jsxs as D, jsx as a } from "react/jsx-runtime";
-import { ChartTooltipItem as x } from "./ChartTooltipItem.js";
-import { TOOLTIP_TRANSITION as O, BORDER_RADIUS as S, PADDING_Y as g, ROW_HEIGHT as f, PADDING_X as E, ROW_GAP as L, DEFAULT_OFFSET as W, DEFAULT_TOOLTIP_MIN_WIDTH as B } from "./constants.js";
-import { useTooltipMeasurement as F, useBuildRefSetters as u, computeTooltipWidth as H, computeTooltipHeight as N, computeTooltipX as P, computeItemsBaseY as A } from "./utils.js";
-import { cssVar as o } from "../../../../libs/design-core/dist/lib/cssVar/cssVar.js";
+import { jsxs as x, jsx as a } from "react/jsx-runtime";
+import { ChartTooltipItem as g } from "./ChartTooltipItem.js";
+import { TOOLTIP_TRANSITION as D, PADDING_Y as O, ROW_HEIGHT as f, PADDING_X as S, ROW_GAP as E, DEFAULT_OFFSET as L, DEFAULT_TOOLTIP_MIN_WIDTH as W } from "./constants.js";
+import { useTooltipMeasurement as F, useBuildRefSetters as c, computeTooltipWidth as H, computeTooltipHeight as N, computeTooltipX as P, computeItemsBaseY as B } from "./utils.js";
+import { cssVar as e } from "../../../../libs/design-core/dist/lib/cssVar/cssVar.js";
 const G = {
-  fontSize: o("var(--font-style-body-4-size)"),
-  fontFamily: o("var(--font-family-font)"),
-  fill: o("var(--text-base)"),
-  fontWeight: o("var(--font-style-body-4-weight-medium)")
+  fontSize: e("var(--font-style-body-3-size)"),
+  fontFamily: e("var(--font-family-font)"),
+  fill: e("var(--text-muted)"),
+  fontWeight: e("var(--font-style-body-3-weight-medium)")
 };
 function M({
-  pixelX: h,
+  pixelX: m,
   drawingArea: l,
-  title: n,
+  title: r,
   items: t,
-  offset: T = W,
-  minWidth: m = B
+  offset: d = L,
+  minWidth: h = W
 }) {
-  const e = n !== void 0, { widths: p, titleRef: d, labelRefs: y, valueRefs: R } = F(
+  const o = r !== void 0, { widths: p, titleRef: T, labelRefs: y, valueRefs: v } = F(
     t,
-    e,
-    n
-  ), I = u(y, t.length), v = u(R, t.length);
+    o,
+    r
+  ), I = c(y, t.length), b = c(v, t.length);
   if (t.length === 0)
     return null;
-  const s = H(p, e, m), r = P(h, T, s, l), b = N(t.length, e), _ = A(l.y, e);
-  return /* @__PURE__ */ D(
+  const n = H(p, o, h), s = P(m, d, n, l), R = N(t.length, o), _ = B(l.y, o);
+  return /* @__PURE__ */ x(
     "g",
     {
       "data-testid": "chart-tooltip",
       role: "tooltip",
       style: {
         opacity: p === null ? 0 : 1,
-        transition: O,
+        transition: D,
         pointerEvents: "none"
       },
       children: [
         /* @__PURE__ */ a(
           "rect",
           {
-            x: r,
+            x: s,
             y: l.y,
-            width: s,
-            height: b,
-            rx: S,
-            fill: o("var(--background-muted)")
+            width: n,
+            height: R,
+            rx: e("var(--border-radius-sm)"),
+            fill: e("var(--background-muted)")
           }
         ),
-        e && /* @__PURE__ */ a(
+        o && /* @__PURE__ */ a(
           "text",
           {
-            ref: d,
+            ref: T,
             "data-testid": "chart-tooltip-title",
-            x: r + E,
-            y: l.y + g + f / 2,
+            x: s + S,
+            y: l.y + O + f / 2,
             dominantBaseline: "middle",
             style: G,
-            children: n
+            children: r
           }
         ),
-        t.map((c, i) => /* @__PURE__ */ a(
-          x,
+        t.map((u, i) => /* @__PURE__ */ a(
+          g,
           {
-            label: c.label,
-            value: c.value,
-            x: r,
-            y: _ + i * (f + L) + f / 2,
-            width: s,
+            label: u.label,
+            value: u.value,
+            x: s,
+            y: _ + i * (f + E) + f / 2,
+            width: n,
             labelRef: I[i],
-            valueRef: v[i]
+            valueRef: b[i]
           },
           i
         ))

package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/constants.d.ts

@@ -2,9 +2,8 @@ export declare const DEFAULT_OFFSET = 10;
 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 ROW_GAP = 4;
 export declare const TITLE_GAP = 6;
-export declare const BORDER_RADIUS = 4;
 export declare const TOOLTIP_TRANSITION = "opacity 0.15s ease-out 0.05s";
 export declare const LABEL_VALUE_GAP = 12;
 export declare const DEFAULT_TOOLTIP_MIN_WIDTH = 80;

package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Scrubber/DefaultScrubberTooltip/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,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;AACjE,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,yBAAyB,KAAK,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/Scrubber/DefaultScrubberTooltip/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,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,kBAAkB,iCAAiC,CAAC;AACjE,eAAO,MAAM,eAAe,KAAK,CAAC;AAClC,eAAO,MAAM,yBAAyB,KAAK,CAAC"}

package/dist/lib/Components/Scrubber/DefaultScrubberTooltip/constants.js

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

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-react-visualization",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -33,8 +33,8 @@
     ]
   },
   "peerDependencies": {
-    "@ledgerhq/lumen-design-core": "0.1.15",
-    "@ledgerhq/lumen-ui-react": "0.1.36",
+    "@ledgerhq/lumen-design-core": "0.1.16",
+    "@ledgerhq/lumen-ui-react": "0.1.38",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "react": "^18.0.0 || ^19.0.0",
@@ -42,7 +42,7 @@
     "tailwind-merge": "^2.6.0"
   },
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.1.4",
+    "@ledgerhq/lumen-utils-shared": "0.1.5",
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0"

package/package.json

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