@dschz/solid-uplot 0.4.0 → 0.5.1

package/README.md

@@ -33,6 +33,30 @@ yarn install solid-js uplot @dschz/solid-uplot
 bun install solid-js uplot @dschz/solid-uplot
 ```
 
+## 🎮 Live Demo
+
+This repo ships with a **live, running playground** — a full showcase of every feature in the library. It's the fastest way to see `solid-uplot` in action and explore real, working examples of charts, plugins, responsive sizing, and external integrations.
+
+### Running the Playground
+
+```bash
+git clone https://github.com/dsnchz/solid-uplot.git
+cd solid-uplot
+
+# Install dependencies
+bun install
+
+# Start the playground
+bun start
+```
+
+The playground runs at `http://localhost:3000` and includes interactive demos for:
+
+- All built-in plugins (cursor, tooltip, legend, focus series)
+- Responsive and auto-resize chart patterns
+- Custom plugin development
+- External component integration via the plugin bus
+
 ## 📁 Package Structure
 
 This package provides three main export paths for different functionality:
@@ -187,6 +211,29 @@ import { AutoSizer } from "@dschz/solid-auto-sizer";
 </AutoSizer>;
 ```
 
+Alternatively, you can use [`createElementSize`](https://github.com/solidjs-community/solid-primitives/tree/main/packages/resize-observer) from `@solid-primitives/resize-observer` for a signal-based approach:
+
+```bash
+npm install @solid-primitives/resize-observer
+```
+
+```tsx
+import { createElementSize } from "@solid-primitives/resize-observer";
+
+const ResponsiveChart = () => {
+  let container!: HTMLDivElement;
+  const size = createElementSize(() => container);
+
+  return (
+    <div style={{ width: "100%", height: "400px" }}>
+      <div ref={container} style={{ width: "100%", height: "100%" }}>
+        <SolidUplot data={data} width={size.width ?? 0} height={size.height ?? 0} series={series} />
+      </div>
+    </div>
+  );
+};
+```
+
 ## 🔌 Enhanced Plugin System
 
 The cornerstone feature of `SolidUplot` is its refined plugin system that enables extensible functionality and inter-plugin communication through a reactive message bus.
@@ -721,55 +768,6 @@ const Dashboard = () => {
 };
 ```
 
-## 🎮 Interactive Playground
-
-This library includes a comprehensive playground application that demonstrates all features and provides interactive examples. The playground showcases:
-
-- **Basic Charts**: Simple line charts with different configurations
-- **Plugin Examples**: All built-in plugins working together
-- **Legend Showcase**: Various legend patterns and interactions
-- **Responsive Sizing**: Auto-resize and manual sizing examples
-- **Custom Plugins**: Examples of creating your own plugins
-- **External Integration**: Charts interacting with external components
-
-### Running the Playground Locally
-
-To explore the playground and see the library in action:
-
-```bash
-# Clone the repository
-git clone https://github.com/dsnchz/solid-uplot.git
-cd solid-uplot
-
-# Install dependencies
-npm install
-# or
-pnpm install
-# or
-yarn install
-# or
-bun install
-
-# Start the playground development server
-npm run start
-# or
-pnpm start
-# or
-yarn start
-# or
-bun start
-```
-
-The playground will be available at `http://localhost:3000` and includes:
-
-- **Live code examples** with syntax highlighting
-- **Interactive demos** you can modify in real-time
-- **Performance comparisons** between different configurations
-- **Best practices** and common patterns
-- **Plugin development examples** with step-by-step guides
-
-The playground source code also serves as a comprehensive reference for implementing various chart patterns and plugin combinations.
-
 ## 🤝 Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.

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.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;
@@ -287,13 +287,21 @@ 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;
-                  const calculatedPosition = 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 (() => {
@@ -314,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.4.0",
+  "version": "0.5.1",
   "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"
   }
 }