@optiaxiom/proteus 0.2.0 → 0.2.1

package/dist/esm/assets/src/proteus-chart/{ProteusChartTooltipContent.css.ts.vanilla-BxCxymWg.css → ProteusChartTooltipContent.css.ts.vanilla-JTr7n2a8.css}

@@ -2,6 +2,7 @@
 @layer optiaxiom._155jno1 {
   .ProteusChartTooltipContent__1gsvq810 {
     min-width: 128px;
+    position: absolute;
   }
   .ProteusChartTooltipContent__1gsvq811 {
     font-variant-numeric: tabular-nums;

package/dist/esm/proteus-chart/ProteusChart.js

@@ -2,8 +2,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Box, theme } from '@optiaxiom/react';
 import { get } from 'jsonpointer';
+import { useRef } from 'react';
 import { ResponsiveContainer, BarChart, LineChart, CartesianGrid, YAxis, XAxis, Tooltip, Bar, Line } from 'recharts';
 import { chart } from './ProteusChart-css.js';
+import { ProteusChartContext } from './ProteusChartContext.js';
 import { ProteusChartTooltipContent } from './ProteusChartTooltipContent.js';
 
 const DEFAULT_COLORS = ["#096DD9", "#E59700", "#38C56C", "#D1D8DE"];
@@ -20,11 +22,12 @@ const ProteusChart = ({
   const Chart = type === "bar" ? Bar : Line;
   const CategoryAxis = isVertical ? YAxis : XAxis;
   const ValueAxis = isVertical ? XAxis : YAxis;
-  return /* @__PURE__ */ jsx(Box, { asChild: true, ...chart(), children: /* @__PURE__ */ jsx(ResponsiveContainer, { aspect: 16 / 9, width: "100%", children: /* @__PURE__ */ jsxs(ChartComponent, { data, layout, children: [
+  const containerRef = useRef(null);
+  return /* @__PURE__ */ jsx(ProteusChartContext.Provider, { value: containerRef, children: /* @__PURE__ */ jsx(Box, { asChild: true, ref: containerRef, ...chart(), children: /* @__PURE__ */ jsx(ResponsiveContainer, { aspect: 16 / 9, width: "100%", children: /* @__PURE__ */ jsxs(ChartComponent, { data, layout, children: [
     /* @__PURE__ */ jsx(
       CartesianGrid,
       {
-        stroke: "#E0E0E0",
+        stroke: theme.colors["border.secondary"],
         strokeDasharray: "4 4",
         vertical: false
       }
@@ -36,6 +39,7 @@ const ProteusChart = ({
         dataKey: (row) => get(row, "/" + xAxisKey),
         padding: { left: 16, right: 16 },
         tick: { fill: theme.colors["fg.secondary"] },
+        tickFormatter: (value) => value.length > 30 ? value.slice(0, 30) + "\u2026" : value,
         tickLine: false,
         tickMargin: 8,
         type: "category",
@@ -45,7 +49,7 @@ const ProteusChart = ({
     /* @__PURE__ */ jsx(
       ValueAxis,
       {
-        axisLine: { stroke: "#CBD5E1" },
+        axisLine: { stroke: theme.colors["border.default"] },
         minTickGap: 32,
         tick: { fill: theme.colors["fg.secondary"] },
         tickFormatter: (value) => new Intl.NumberFormat(void 0, {
@@ -57,7 +61,14 @@ const ProteusChart = ({
         width: isVertical ? void 0 : "auto"
       }
     ),
-    /* @__PURE__ */ jsx(Tooltip, { content: ProteusChartTooltipContent, cursor: false }),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: ProteusChartTooltipContent,
+        cursor: false,
+        portal: document.body
+      }
+    ),
     series.map((s, i) => /* @__PURE__ */ jsx(
       Chart,
       {
@@ -70,7 +81,7 @@ const ProteusChart = ({
       },
       i
     ))
-  ] }) }) });
+  ] }) }) }) });
 };
 ProteusChart.displayName = "@optiaxiom/proteus/ProteusChart";
 

package/dist/esm/proteus-chart/ProteusChartContext.js

@@ -0,0 +1,7 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+const ProteusChartContext = createContext(void 0);
+const useProteusChartContainer = () => useContext(ProteusChartContext);
+
+export { ProteusChartContext, useProteusChartContainer };

package/dist/esm/proteus-chart/ProteusChartTooltipContent-css.js

@@ -1,7 +1,7 @@
-import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-BxCxymWg.css';
+import './../assets/src/proteus-chart/ProteusChartTooltipContent.css.ts.vanilla-JTr7n2a8.css';
 import { recipe } from '@optiaxiom/react/css-runtime';
 
-var tooltip = recipe({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'grid',fontSize:'sm',gap:'6',px:'8',py:'10',rounded:'lg',shadow:'lg'},'ProteusChartTooltipContent__1gsvq810']});
+var tooltip = recipe({base:[{bg:'bg.default',border:'1',borderColor:'border.secondary',display:'grid',fontSize:'sm',gap:'6',pointerEvents:'none',px:'8',py:'10',rounded:'lg',shadow:'lg',transition:'all'},'ProteusChartTooltipContent__1gsvq810']});
 var value = recipe({base:[{color:'fg.default',fontWeight:'500'},'ProteusChartTooltipContent__1gsvq811']});
 
 export { tooltip, value };

package/dist/esm/proteus-chart/ProteusChartTooltipContent.js

@@ -1,45 +1,70 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Box, Group } from '@optiaxiom/react';
+import { useRef } from 'react';
 import { applyFormatter } from '../proteus-document/getProteusValue.js';
+import { useProteusChartContainer } from './ProteusChartContext.js';
 import { value, tooltip } from './ProteusChartTooltipContent-css.js';
 
+const OFFSET = 10;
 function ProteusChartTooltipContent({
   active,
+  coordinate,
   label,
   payload
 }) {
+  const containerRef = useProteusChartContainer();
+  const ref = useRef(null);
   if (!active || !payload?.length) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Box, { ...tooltip(), children: [
-    label && /* @__PURE__ */ jsx(Box, { fontWeight: "500", children: label }),
-    /* @__PURE__ */ jsx("div", { children: payload.filter((item) => item.type !== "none").map((item, i) => /* @__PURE__ */ jsxs(
-      Box,
-      {
-        alignItems: "center",
-        display: "flex",
-        gap: "8",
-        justifyContent: "space-between",
-        children: [
-          /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
-            /* @__PURE__ */ jsx(
-              Box,
-              {
-                flex: "none",
-                rounded: "xs",
-                size: "10",
-                style: { backgroundColor: item.color }
-              }
-            ),
-            /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", children: item.name ?? String(item.dataKey) })
-          ] }),
-          /* @__PURE__ */ jsx(Box, { ...value(), children: applyFormatter(item.value, "Number") })
-        ]
+  const wrapperRect = containerRef?.current?.querySelector(".recharts-wrapper")?.getBoundingClientRect();
+  const tooltipRect = ref.current?.getBoundingClientRect();
+  const cx = coordinate?.x ?? 0;
+  const cy = coordinate?.y ?? 0;
+  const th = tooltipRect?.height ?? 0;
+  const translateX = cx + OFFSET;
+  const translateY = cy - th / 2;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref,
+      style: {
+        left: 0,
+        top: 0,
+        transform: `translate(${(wrapperRect?.left ?? 0) + translateX + window.scrollX}px, ${(wrapperRect?.top ?? 0) + translateY + window.scrollY}px)`
       },
-      i
-    )) })
-  ] });
+      ...tooltip(),
+      children: [
+        label && /* @__PURE__ */ jsx(Box, { fontWeight: "500", children: label }),
+        /* @__PURE__ */ jsx("div", { children: payload.filter((item) => item.type !== "none").map((item, i) => /* @__PURE__ */ jsxs(
+          Box,
+          {
+            alignItems: "center",
+            display: "flex",
+            gap: "8",
+            justifyContent: "space-between",
+            children: [
+              /* @__PURE__ */ jsxs(Group, { gap: "8", children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    flex: "none",
+                    rounded: "xs",
+                    size: "10",
+                    style: { backgroundColor: item.color }
+                  }
+                ),
+                /* @__PURE__ */ jsx(Box, { color: "fg.tertiary", children: item.name ?? String(item.dataKey) })
+              ] }),
+              /* @__PURE__ */ jsx(Box, { ...value(), children: applyFormatter(item.value, "Number") })
+            ]
+          },
+          i
+        )) })
+      ]
+    }
+  );
 }
 
 export { ProteusChartTooltipContent };

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/optimizely-axiom/optiaxiom.git"
   },
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "files": [
     "dist/**",
     "LICENSE"
@@ -38,8 +38,8 @@
     "embla-carousel-react": "^8.6.0",
     "jsonpointer": "^5.0.1",
     "recharts": "^3.8.1",
-    "@optiaxiom/react": "1.9.28",
-    "@optiaxiom/icons": "1.1.1"
+    "@optiaxiom/icons": "1.1.1",
+    "@optiaxiom/react": "1.9.28"
   },
   "devDependencies": {
     "@emotion/hash": "^0.9.2",