@dschz/solid-uplot 0.3.0 → 0.5.0

package/dist/index/index.d.ts

@@ -1,7 +1,6 @@
 import { V as VoidStruct, S as SolidUplotPluginBus, U as UplotPluginFactory } from '../createPluginBus-DdrjQANs.js';
 export { a as UplotPluginFactoryContext, c as createPluginBus } from '../createPluginBus-DdrjQANs.js';
-import { Ref } from '@solid-primitives/refs';
-import { ParentProps, JSX } from 'solid-js';
+import { ParentProps, JSX, Ref } from 'solid-js';
 import uPlot$1 from 'uplot';
 import { C as CursorData, S as SeriesDatum } from '../getSeriesData-04wGQord.js';
 import 'solid-js/store';
@@ -31,9 +30,25 @@ type SolidUplotPlugin<T extends VoidStruct = VoidStruct> = uPlot$1.Plugin | Uplo
  * @template T - The type of the plugin bus data structure
  */
 type SolidUplotOptions<T extends VoidStruct = VoidStruct> = Omit<uPlot$1.Options, "plugins" | "width" | "height" | "data"> & {
-    /** Chart width in pixels */
+    /**
+     * Chart width in pixels.
+     *
+     * Used as a fixed dimension when `autoResize` is disabled.
+     * Ignored when `autoResize` is enabled — the chart fills its
+     * container's width automatically.
+     *
+     * @default 600
+     */
     readonly width?: number;
-    /** Chart height in pixels */
+    /**
+     * Chart height in pixels.
+     *
+     * Used as a fixed dimension when `autoResize` is disabled.
+     * Ignored when `autoResize` is enabled — the chart fills its
+     * container's height automatically.
+     *
+     * @default 300
+     */
     readonly height?: number;
     /** Chart data - accepts AlignedData or number[][] */
     readonly data?: uPlot$1.AlignedData | number[][];
@@ -73,10 +88,13 @@ type SolidUplotProps<T extends VoidStruct = VoidStruct> = SolidUplotOptions<T> &
     /**
      * Enable automatic resizing to fit container.
      *
-     * When true:
-     * - Chart uses width/height props for initial render
-     * - Then automatically adapts to container size changes
-     * - If no width/height provided, uses sensible defaults (600x300)
+     * When enabled, the chart uses a ResizeObserver to continuously
+     * match its container's dimensions. The `width` and `height` props
+     * are ignored — the chart fills whatever space its container provides.
+     *
+     * The container **must** have defined dimensions (explicit height/width,
+     * flex layout, grid layout, etc.). If the container has no height, the
+     * chart will render at 0px and a development-mode warning will be logged.
      *
      * @default false
      */
@@ -109,16 +127,22 @@ type SolidUplotProps<T extends VoidStruct = VoidStruct> = SolidUplotOptions<T> &
  *
  * @example
  * ```tsx
+ * // Fixed size
  * <SolidUplot
  *   data={chartData}
+ *   width={600}
  *   height={400}
- *   autoResize
- *   series={[
- *     {},
- *     { label: "Series 1", stroke: "red" }
- *   ]}
- *   onCreate={(chart) => console.log("Chart created:", chart)}
+ *   series={[{}, { label: "Series 1", stroke: "red" }]}
  * />
+ *
+ * // Auto resize (container must have dimensions)
+ * <div style={{ height: "400px" }}>
+ *   <SolidUplot
+ *     data={chartData}
+ *     autoResize
+ *     series={[{}, { label: "Series 1", stroke: "red" }]}
+ *   />
+ * </div>
  * ```
  */
 declare const SolidUplot: <T extends VoidStruct = VoidStruct>(props: ParentProps<SolidUplotProps<T>>) => JSX.Element;

package/dist/index/index.js

@@ -1,9 +1,8 @@
 import '../chunk/IV6D7K4M.js';
 import { getSeriesData, getCursorData } from '../chunk/QELYARMN.js';
 import { createStore } from 'solid-js/store';
-import { template, use, insert, effect, className, style } from 'solid-js/web';
+import { use, insert, effect, className, style, template } from 'solid-js/web';
 import 'uplot/dist/uPlot.min.css';
-import { mergeRefs } from '@solid-primitives/refs';
 import { mergeProps, createUniqueId, splitProps, createMemo, createEffect, untrack, onCleanup } from 'solid-js';
 import uPlot from 'uplot';
 
@@ -26,7 +25,7 @@ var createCursorMovePlugin = (onCursorMove) => {
 };
 
 // src/SolidUplot.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div id=solid-uplot-root>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div id=solid-uplot-root style=display:flex><div class=solid-uplot-chart style=position:relative>`);
 var SolidUplot = (props) => {
   let container;
   const _props = mergeProps({
@@ -111,29 +110,42 @@ var SolidUplot = (props) => {
   });
   const classes = () => local.class ? `solid-uplot ${local.class}` : "solid-uplot";
   return (() => {
-    var _el$ = _tmpl$();
-    var _ref$ = mergeRefs(local.ref, (el) => container = el);
-    typeof _ref$ === "function" && use(_ref$, _el$);
-    insert(_el$, () => local.children);
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+    var _ref$ = local.ref;
+    typeof _ref$ === "function" ? use(_ref$, _el$) : local.ref = _el$;
+    insert(_el$, () => local.children, _el$2);
+    var _ref$2 = container;
+    typeof _ref$2 === "function" ? use(_ref$2, _el$2) : container = _el$2;
     effect((_p$) => {
       var _v$ = classes(), _v$2 = {
-        display: "flex",
         "flex-direction": local.childrenPlacement === "top" ? "column" : "column-reverse",
         // When autoResize is enabled, fill the parent container
         ...local.autoResize && {
           width: "100%",
           height: "100%",
-          "min-width": "0",
-          "min-height": "0"
+          "min-width": "0"
         },
         ...local.style
+      }, _v$3 = {
+        // When autoResize is enabled, use flex to fill remaining space.
+        // flex-basis: 0 prevents content from dictating size (fixes infinite height bug).
+        // min-width/min-height: 0 allow the chart to shrink freely within
+        // the flex container. The parent must provide dimensions — if it
+        // doesn't, the chart collapses to 0px (with a dev-mode warning).
+        ...local.autoResize && {
+          flex: "1 1 0",
+          "min-height": "0",
+          "min-width": "0"
+        }
       };
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _p$.t = style(_el$, _v$2, _p$.t);
+      _p$.a = style(_el$2, _v$3, _p$.a);
       return _p$;
     }, {
       e: void 0,
-      t: void 0
+      t: void 0,
+      a: void 0
     });
     return _el$;
   })();

package/dist/plugins/index.d.ts

@@ -384,6 +384,30 @@ type TooltipConfigOptions = {
      * @default false
      */
     readonly fixed?: boolean;
+    /**
+     * Optional callback to process or modify the calculated tooltip position.
+     * Receives the calculated position and placement preference, and should return a position object with the same structure.
+     * Use this to implement custom positioning logic or constraints.
+     *
+     * @param position - The calculated position with left and top coordinates
+     * @param placement - The placement preference that was used for calculation
+     * @returns Modified position object with left and top coordinates
+     *
+     * @example
+     * ```ts
+     * onPositionCalculated: (position, placement) => ({
+     *   left: Math.max(0, position.left), // Prevent negative positioning
+     *   top: placement.includes('top') ? position.top - 5 : position.top + 10
+     * })
+     * ```
+     */
+    readonly onPositionCalculated?: (position: {
+        left: number;
+        top: number;
+    }, placement: TooltipCursorPlacement) => {
+        left: number;
+        top: number;
+    };
 };
 /**
  * Combined options for the tooltip plugin including container props and behavior config.
@@ -400,6 +424,7 @@ type TooltipPluginOptions = TooltipRootProps & TooltipConfigOptions;
  * - Automatic positioning with edge detection and flipping
  * - Scroll-aware positioning that works with page scrolling
  * - Configurable placement preferences
+ * - Position callback for custom positioning logic or overrides
  * - Accessible tooltip with proper ARIA attributes
  * - Automatic cleanup and memory management
  *

package/dist/plugins/index.js

@@ -1,6 +1,6 @@
 import { getCursorData, getSeriesData } from '../chunk/QELYARMN.js';
 import { createRoot, createEffect, mergeProps, splitProps, Show } from 'solid-js';
-import { render, createComponent, template, use, insert, effect, setAttribute, className, style } from 'solid-js/web';
+import { render, createComponent, use, insert, effect, setAttribute, className, style, template } from 'solid-js/web';
 
 // src/plugins/cursor.ts
 var cursor = () => {
@@ -65,7 +65,7 @@ var seriesFocusRedraw = (u, options = {}) => {
     const target = focusTargets.find((t) => {
       if ("label" in t) return t.label === s.label;
       if ("zeroIndex" in t) return t.zeroIndex === i - 1;
-      if ("index" in t) return t.index === i;
+      return "index" in t && t.index === i;
     });
     s.alpha = target ? focusedAlpha : unfocusedAlpha;
   }
@@ -230,14 +230,14 @@ var legend = (Component, options = {}) => {
     };
   };
 };
-var _tmpl$2 = /* @__PURE__ */ template(`<div role=tooltip aria-label="Chart tooltip">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div role=tooltip aria-label="Chart tooltip"style=pointer-events:none>`);
 var TOOLTIP_OFFSET_X = 8;
 var TOOLTIP_OFFSET_Y = 8;
-var getTooltipPosition = (placement, left, top, tooltipWidth, tooltipHeight, isFixed = false) => {
+var getTooltipPosition = (placement, left, top, tooltipWidth, tooltipHeight, rootOffset) => {
   const baseX = placement.includes("left") ? left - tooltipWidth - TOOLTIP_OFFSET_X : left + TOOLTIP_OFFSET_X;
   const baseY = placement.includes("top") ? top - tooltipHeight - TOOLTIP_OFFSET_Y : top + TOOLTIP_OFFSET_Y;
-  const viewportX = isFixed ? baseX : baseX - window.scrollX;
-  const viewportY = isFixed ? baseY : baseY - window.scrollY;
+  const viewportX = baseX + rootOffset.left;
+  const viewportY = baseY + rootOffset.top;
   const overflowsLeft = viewportX < 0;
   const overflowsRight = viewportX + tooltipWidth > window.innerWidth;
   const overflowsTop = viewportY < 0;
@@ -279,7 +279,7 @@ var tooltip = (Component, options = {}) => {
               zIndex: 20
             }, options);
             const chartCursorData = () => bus.data.cursor?.state[u.root.id];
-            const [tooltipOptions, containerProps] = splitProps(_options, ["placement", "fixed"]);
+            const [tooltipOptions, containerProps] = splitProps(_options, ["placement", "fixed", "onPositionCalculated"]);
             return createComponent(Show, {
               get when() {
                 return chartCursorData();
@@ -287,13 +287,22 @@ var tooltip = (Component, options = {}) => {
               children: (cursor2) => {
                 const position = () => {
                   const overRect = u.over.getBoundingClientRect();
+                  const rootRect = u.root.getBoundingClientRect();
                   const tooltipWidth = tooltipRoot.offsetWidth ?? 0;
                   const tooltipHeight = tooltipRoot.offsetHeight ?? 0;
-                  const cursorLeft = overRect.left + cursor2().position.left;
-                  const cursorTop = overRect.top + cursor2().position.top;
-                  const absoluteLeft = tooltipOptions.fixed ? cursorLeft : cursorLeft + window.scrollX;
-                  const absoluteTop = tooltipOptions.fixed ? cursorTop : cursorTop + window.scrollY;
-                  return getTooltipPosition(tooltipOptions.placement, absoluteLeft, absoluteTop, tooltipWidth, tooltipHeight, tooltipOptions.fixed);
+                  const cursorViewportLeft = overRect.left + cursor2().position.left;
+                  const cursorViewportTop = overRect.top + cursor2().position.top;
+                  const positionedLeft = tooltipOptions.fixed ? cursorViewportLeft : cursorViewportLeft - rootRect.left;
+                  const positionedTop = tooltipOptions.fixed ? cursorViewportTop : cursorViewportTop - rootRect.top;
+                  const rootOffset = tooltipOptions.fixed ? {
+                    left: 0,
+                    top: 0
+                  } : {
+                    left: rootRect.left,
+                    top: rootRect.top
+                  };
+                  const calculatedPosition = getTooltipPosition(tooltipOptions.placement, positionedLeft, positionedTop, tooltipWidth, tooltipHeight, rootOffset);
+                  return tooltipOptions.onPositionCalculated ? tooltipOptions.onPositionCalculated(calculatedPosition, tooltipOptions.placement) : calculatedPosition;
                 };
                 return (() => {
                   var _el$ = _tmpl$2();
@@ -313,7 +322,6 @@ var tooltip = (Component, options = {}) => {
                     var _v$ = containerProps.id, _v$2 = containerProps.class, _v$3 = {
                       position: tooltipOptions.fixed ? "fixed" : "absolute",
                       "z-index": containerProps.zIndex,
-                      "pointer-events": "none",
                       left: `${position().left}px`,
                       top: `${position().top}px`,
                       ...containerProps.style

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dschz/solid-uplot",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "SolidJS wrapper for uPlot — ultra-fast, tiny time-series & charting library",
   "type": "module",
   "author": "Daniel Sanchez <dsanc89@pm.me>",
@@ -42,7 +42,8 @@
   "homepage": "https://github.com/dsnchz/solid-uplot#readme",
   "repository": {
     "type": "git",
-    "url": "https://github.com/dsnchz/solid-uplot.git"
+    "url": "https://github.com/dsnchz/solid-uplot.git",
+    "directory": "packages/solid-uplot"
   },
   "bugs": {
     "url": "https://github.com/dsnchz/solid-uplot/issues"
@@ -90,61 +91,32 @@
   "scripts": {
     "build": "tsup",
     "build:watch": "tsup --watch",
-    "dev": "vite",
-    "format": "prettier . --check",
-    "format:fix": "prettier . --write",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "pkg:changeset": "changeset",
-    "pkg:version": "changeset version",
-    "pkg:publish": "bun run build && changeset publish",
-    "serve": "vite preview",
-    "start": "vite",
     "test": "vitest run",
     "test:cov": "vitest run --coverage",
     "typecheck": "tsc --noEmit"
   },
+  "peerDependencies": {
+    "solid-js": ">=1.6.0",
+    "uplot": ">=1.6.32"
+  },
   "devDependencies": {
-    "@changesets/cli": "^2.29.7",
-    "@dschz/solid-auto-sizer": "^0.1.3",
-    "@solidjs/router": "^0.15.4",
+    "@dschz/tsconfig": "workspace:*",
     "@solidjs/testing-library": "^0.8.10",
-    "@tailwindcss/vite": "^4.1.17",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/bun": "^1.3.3",
-    "@types/prismjs": "^1.26.5",
-    "@typescript-eslint/eslint-plugin": "^8.47.0",
-    "@typescript-eslint/parser": "^8.47.0",
     "@vitest/coverage-istanbul": "^4.0.13",
     "@wessberg/pointer-events": "^1.0.9",
     "canvas": "^3.2.0",
-    "eslint": "^9.39.1",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-solid": "^0.14.5",
-    "globals": "^16.5.0",
-    "jiti": "^2.6.1",
     "jsdom": "^27.2.0",
     "path2d": "^0.3.1",
-    "prettier": "^3.6.2",
-    "prismjs": "^1.30.0",
     "solid-js": "^1.9.10",
-    "solid-prism-editor": "^2.1.0",
-    "tailwindcss": "^4.1.17",
     "tsup": "^8.5.1",
     "tsup-preset-solid": "^2.2.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.47.0",
     "uplot": "^1.6.32",
     "vite": "^7.2.4",
     "vite-plugin-solid": "^2.11.10",
     "vitest": "^4.0.13"
-  },
-  "peerDependencies": {
-    "solid-js": ">=1.6.0",
-    "uplot": ">=1.6.32"
-  },
-  "dependencies": {
-    "@solid-primitives/refs": "^1.1.2"
   }
 }