@dschz/solid-uplot 0.2.0 → 0.3.0

package/dist/index/index.d.ts

@@ -30,11 +30,13 @@ 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"> & {
+type SolidUplotOptions<T extends VoidStruct = VoidStruct> = Omit<uPlot$1.Options, "plugins" | "width" | "height" | "data"> & {
     /** Chart width in pixels */
     readonly width?: number;
     /** Chart height in pixels */
     readonly height?: number;
+    /** Chart data - accepts AlignedData or number[][] */
+    readonly data?: uPlot$1.AlignedData | number[][];
     /** Plugin communication bus for coordinating between plugins */
     readonly pluginBus?: SolidUplotPluginBus<T>;
     /** Array of plugins to apply to the chart */

package/dist/index/index.js

@@ -9,10 +9,7 @@ import uPlot from 'uplot';
 
 var createPluginBus = (initialData = {}) => {
   const [data, setData] = createStore(initialData);
-  return {
-    data,
-    setData
-  };
+  return { data, setData };
 };
 
 // src/eventPlugins.ts

package/dist/plugins/index.d.ts

@@ -1,7 +1,7 @@
 import { U as UplotPluginFactory, S as SolidUplotPluginBus } from '../createPluginBus-DdrjQANs.js';
 import { C as CursorData, S as SeriesDatum } from '../getSeriesData-04wGQord.js';
 import { Component, JSX } from 'solid-js';
-import uPlot from 'uplot';
+import uPlot$1 from 'uplot';
 import 'solid-js/store';
 
 /**
@@ -156,7 +156,7 @@ type FocusSeriesPluginMessageBus = {
 /**
  * Configuration options for the focus series plugin.
  */
-type FocusSeriesPluginOptions = {
+type FocusSeriesPluginOptions<T extends CursorPluginMessageBus & FocusSeriesPluginMessageBus> = {
     /**
      * The vertical distance in pixels required to focus a series.
      * If the cursor's Y position is within this threshold of a Y value, that series is considered focused.
@@ -183,6 +183,24 @@ type FocusSeriesPluginOptions = {
      * @default false
      */
     readonly rebuildPaths?: boolean;
+    /**
+     *
+     * For charts that are configured with this plugin, this callback is used to determine if the chart
+     * should redraw when the plugin bus updates. It is an additional condition to the base condition `cursor?.sourceId !== u.root.id`
+     * which is always applied first to prevent the source chart from redrawing twice.
+     *
+     * This can be used to add filtering logic, such as only reacting to specific source charts.
+     *
+     * @default undefined (always redraw for non-source charts)
+     */
+    readonly shouldRedrawOnBusUpdate?: (params: {
+        /** The current chart instance (the one evaluating whether to redraw) */
+        readonly u: uPlot;
+        /** Current cursor state from the bus (may be from another chart) */
+        readonly cursor: T["cursor"];
+        /** Current focus series state from the bus */
+        readonly focusSeries: T["focusSeries"];
+    }) => boolean;
 };
 /**
  * Creates a focus series plugin that visually highlights series based on cursor proximity.
@@ -219,7 +237,7 @@ type FocusSeriesPluginOptions = {
  * @param options - Configuration options for focus behavior
  * @returns A plugin factory function that creates the focus series plugin instance
  */
-declare const focusSeries: (options?: FocusSeriesPluginOptions) => UplotPluginFactory<CursorPluginMessageBus & FocusSeriesPluginMessageBus>;
+declare const focusSeries: (options?: FocusSeriesPluginOptions<CursorPluginMessageBus & FocusSeriesPluginMessageBus>) => UplotPluginFactory<CursorPluginMessageBus & FocusSeriesPluginMessageBus>;
 
 /**
  * Simple legend placement options - only top corners to avoid axis conflicts
@@ -233,7 +251,7 @@ type LegendPlacement = "top-left" | "top-right";
  * data flow where series data changes immediately trigger legend updates with fresh data information.
  */
 type LegendProps = {
-    readonly u: uPlot;
+    readonly u: uPlot$1;
     readonly seriesData: SeriesDatum[];
     readonly bus: SolidUplotPluginBus<CursorPluginMessageBus & FocusSeriesPluginMessageBus>;
 };
@@ -306,7 +324,7 @@ type TooltipCursorPlacement = "top-left" | "top-right" | "bottom-left" | "bottom
  */
 type TooltipProps = {
     /** The uPlot instance for accessing chart configuration and data */
-    readonly u: uPlot;
+    readonly u: uPlot$1;
     /**
      * Current cursor data including position and data index, automatically updated
      * by the cursor plugin and passed via the plugin bus system
@@ -360,6 +378,12 @@ type TooltipConfigOptions = {
      * @default "top-left"
      */
     readonly placement?: TooltipCursorPlacement;
+    /**
+     * Use fixed positioning for the tooltip. Set to true when the chart is in a
+     * fixed positioning context (like a dialog or modal) to prevent tooltip clipping.
+     * @default false
+     */
+    readonly fixed?: boolean;
 };
 /**
  * Combined options for the tooltip plugin including container props and behavior config.

package/dist/plugins/index.js

@@ -58,7 +58,7 @@ var seriesFocusRedraw = (u, options = {}) => {
   } = options;
   for (let i = 1; i < u.series.length; i++) {
     const s = u.series[i];
-    if (!focusTargets || !focusTargets.length) {
+    if (!focusTargets?.length) {
       s.alpha = 1;
       continue;
     }
@@ -104,13 +104,15 @@ var focusSeries = (options = {}) => {
           dispose = createRoot((dispose2) => {
             createEffect(() => {
               const cursor2 = bus.data.cursor;
-              const focus = bus.data.focusSeries;
-              if (cursor2?.sourceId !== u.root.id) {
+              const focusSeries2 = bus.data.focusSeries;
+              const isNotSourceChart = cursor2?.sourceId !== u.root.id;
+              const userRedrawCondition = options.shouldRedrawOnBusUpdate?.({ u, cursor: cursor2, focusSeries: focusSeries2 }) ?? true;
+              if (isNotSourceChart && userRedrawCondition) {
                 seriesFocusRedraw(u, {
                   unfocusedAlpha,
                   focusedAlpha,
                   rebuildPaths,
-                  focusTargets: focus?.targets
+                  focusTargets: focusSeries2?.targets
                 });
               }
             });
@@ -231,11 +233,11 @@ var legend = (Component, options = {}) => {
 var _tmpl$2 = /* @__PURE__ */ template(`<div role=tooltip aria-label="Chart tooltip">`);
 var TOOLTIP_OFFSET_X = 8;
 var TOOLTIP_OFFSET_Y = 8;
-var getTooltipPosition = (placement, left, top, tooltipWidth, tooltipHeight) => {
+var getTooltipPosition = (placement, left, top, tooltipWidth, tooltipHeight, isFixed = false) => {
   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 = baseX - window.scrollX;
-  const viewportY = baseY - window.scrollY;
+  const viewportX = isFixed ? baseX : baseX - window.scrollX;
+  const viewportY = isFixed ? baseY : baseY - window.scrollY;
   const overflowsLeft = viewportX < 0;
   const overflowsRight = viewportX + tooltipWidth > window.innerWidth;
   const overflowsTop = viewportY < 0;
@@ -271,12 +273,13 @@ var tooltip = (Component, options = {}) => {
           const TooltipRoot = () => {
             const _options = mergeProps({
               placement: "top-left",
+              fixed: false,
               id: "solid-uplot-tooltip-root",
               style: {},
               zIndex: 20
             }, options);
             const chartCursorData = () => bus.data.cursor?.state[u.root.id];
-            const [tooltipOptions, containerProps] = splitProps(_options, ["placement"]);
+            const [tooltipOptions, containerProps] = splitProps(_options, ["placement", "fixed"]);
             return createComponent(Show, {
               get when() {
                 return chartCursorData();
@@ -284,11 +287,13 @@ var tooltip = (Component, options = {}) => {
               children: (cursor2) => {
                 const position = () => {
                   const overRect = u.over.getBoundingClientRect();
-                  const absoluteLeft = overRect.left + cursor2().position.left + window.scrollX;
-                  const absoluteTop = overRect.top + cursor2().position.top + window.scrollY;
                   const tooltipWidth = tooltipRoot.offsetWidth ?? 0;
                   const tooltipHeight = tooltipRoot.offsetHeight ?? 0;
-                  return getTooltipPosition(tooltipOptions.placement, absoluteLeft, absoluteTop, tooltipWidth, tooltipHeight);
+                  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);
                 };
                 return (() => {
                   var _el$ = _tmpl$2();
@@ -306,11 +311,11 @@ var tooltip = (Component, options = {}) => {
                   }));
                   effect((_p$) => {
                     var _v$ = containerProps.id, _v$2 = containerProps.class, _v$3 = {
-                      position: "absolute",
+                      position: tooltipOptions.fixed ? "fixed" : "absolute",
                       "z-index": containerProps.zIndex,
+                      "pointer-events": "none",
                       left: `${position().left}px`,
                       top: `${position().top}px`,
-                      "pointer-events": "none",
                       ...containerProps.style
                     };
                     _v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dschz/solid-uplot",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "SolidJS wrapper for uPlot — ultra-fast, tiny time-series & charting library",
   "type": "module",
   "author": "Daniel Sanchez <dsanc89@pm.me>",
@@ -59,14 +59,12 @@
   "browser": {},
   "exports": {
     ".": {
-      "solid": "./dist/index/index.jsx",
       "import": {
         "types": "./dist/index/index.d.ts",
         "default": "./dist/index/index.js"
       }
     },
     "./plugins": {
-      "solid": "./dist/plugins/index.jsx",
       "import": {
         "types": "./dist/plugins/index.d.ts",
         "default": "./dist/plugins/index.js"
@@ -107,46 +105,46 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.3",
-    "@dschz/solid-auto-sizer": "^0.1.0",
-    "@solidjs/router": "^0.15.3",
+    "@changesets/cli": "^2.29.7",
+    "@dschz/solid-auto-sizer": "^0.1.3",
+    "@solidjs/router": "^0.15.4",
     "@solidjs/testing-library": "^0.8.10",
-    "@tailwindcss/vite": "^4.1.5",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@tailwindcss/vite": "^4.1.17",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/bun": "^1.2.12",
-    "@types/prismjs": "^1.26.3",
-    "@typescript-eslint/eslint-plugin": "^8.32.0",
-    "@typescript-eslint/parser": "^8.32.0",
-    "@vitest/coverage-istanbul": "^3.1.3",
+    "@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.1.0",
-    "eslint": "^9.26.0",
+    "canvas": "^3.2.0",
+    "eslint": "^9.39.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-solid": "^0.14.5",
-    "globals": "^16.1.0",
-    "jiti": "^2.4.2",
-    "jsdom": "^26.1.0",
-    "path2d": "^0.2.2",
-    "prettier": "^3.5.3",
-    "prismjs": "^1.29.0",
-    "solid-js": "^1.9.6",
-    "solid-prism-editor": "^2.0.0",
-    "tailwindcss": "^4.1.5",
-    "tsup": "^8.4.0",
+    "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.8.3",
-    "typescript-eslint": "^8.32.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.47.0",
     "uplot": "^1.6.32",
-    "vite": "^6.3.5",
-    "vite-plugin-solid": "^2.11.6",
-    "vitest": "^3.1.3"
+    "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.1"
+    "@solid-primitives/refs": "^1.1.2"
   }
 }

package/dist/chunk/X3NAOFDO.jsx

@@ -1,42 +0,0 @@
-// src/utils/getCursorData.ts
-var getCursorData = (u) => {
-  const idx = u.cursor.idx;
-  const xValues = u.data[0];
-  const isValid = idx != null && xValues && idx < xValues.length;
-  return !isValid ? void 0 : {
-    plotId: u.root.id,
-    idx,
-    xValue: xValues[idx],
-    visible: Boolean(u.cursor.show),
-    position: { left: u.cursor.left || 0, top: u.cursor.top || 0 }
-  };
-};
-
-// src/utils/getSeriesData.ts
-var getSeriesData = (u, options = {}) => {
-  const series = [];
-  for (let i = 1; i < u.series.length; i++) {
-    const s = u.series[i];
-    const stroke = typeof s.stroke === "function" ? s.stroke(u, i) : s.stroke;
-    const fill = typeof s.fill === "function" ? s.fill(u, i) : s.fill;
-    const label = options.labelTransform?.(s.label) || s.label?.toString() || `Series ${i}`;
-    series.push({
-      idx: i - 1,
-      seriesIdx: i,
-      label,
-      stroke: stroke ?? "#000",
-      fill: fill ?? "transparent",
-      width: s.width,
-      dash: s.dash,
-      scale: s.scale,
-      visible: Boolean(s.show)
-    });
-  }
-  return series;
-};
-
-export {
-  getCursorData,
-  getSeriesData
-};
-// istanbul ignore next -- @preserve

package/dist/index/index.jsx

@@ -1,160 +0,0 @@
-import {
-  getCursorData,
-  getSeriesData
-} from "../chunk/X3NAOFDO.jsx";
-
-// src/createPluginBus.tsx
-import { createStore } from "solid-js/store";
-var createPluginBus = (initialData = {}) => {
-  const [data, setData] = createStore(initialData);
-  return { data, setData };
-};
-
-// src/SolidUplot.tsx
-import "uplot/dist/uPlot.min.css";
-import { mergeRefs } from "@solid-primitives/refs";
-import {
-  createEffect,
-  createMemo,
-  createUniqueId,
-  mergeProps,
-  onCleanup,
-  splitProps,
-  untrack
-} from "solid-js";
-import uPlot2 from "uplot";
-
-// src/utils/getNewCalendarDayIndices.ts
-import "uplot";
-
-// src/eventPlugins.ts
-var createCursorMovePlugin = (onCursorMove) => {
-  return {
-    hooks: {
-      setCursor: (u) => {
-        const cursor = getCursorData(u);
-        if (!cursor) return;
-        onCursorMove?.({ u, cursor, seriesData: getSeriesData(u) });
-      }
-    }
-  };
-};
-
-// src/SolidUplot.tsx
-var SolidUplot = (props) => {
-  let container;
-  const _props = mergeProps(
-    {
-      id: createUniqueId(),
-      childrenPlacement: "top",
-      width: 600,
-      height: 300,
-      autoResize: false,
-      data: [],
-      resetScales: true,
-      plugins: [],
-      legend: {
-        show: false
-      }
-    },
-    props
-  );
-  const [local, options] = splitProps(_props, [
-    "children",
-    "childrenPlacement",
-    "class",
-    "autoResize",
-    "onCreate",
-    "onCursorMove",
-    "style",
-    "ref"
-  ]);
-  const [updateableOptions, newChartOptions] = splitProps(options, [
-    "data",
-    "width",
-    "height",
-    "resetScales"
-  ]);
-  const [system, chartOptions] = splitProps(newChartOptions, ["pluginBus", "plugins"]);
-  const size = () => ({ width: updateableOptions.width, height: updateableOptions.height });
-  const chartPlugins = createMemo(() => {
-    const plugins = system.plugins.map(
-      (plugin) => typeof plugin === "function" ? plugin({ bus: system.pluginBus }) : plugin
-    );
-    if (local.onCursorMove) {
-      plugins.push(createCursorMovePlugin(local.onCursorMove));
-    }
-    return plugins;
-  });
-  createEffect(() => {
-    const getInitialSize = () => {
-      if (local.autoResize) {
-        const rect = container.getBoundingClientRect();
-        return {
-          width: rect.width > 0 ? Math.floor(rect.width) : 600,
-          height: rect.height > 0 ? Math.floor(rect.height) : 300
-        };
-      }
-      return untrack(size);
-    };
-    const initialSize = getInitialSize();
-    const initialData = untrack(() => updateableOptions.data);
-    const chart = new uPlot2(
-      {
-        ...chartOptions,
-        ...initialSize,
-        plugins: chartPlugins()
-      },
-      initialData,
-      container
-    );
-    local.onCreate?.(chart, { seriesData: getSeriesData(chart) });
-    createEffect(() => {
-      if (local.autoResize) return;
-      chart.setSize(size());
-    });
-    createEffect(() => {
-      if (!local.autoResize) return;
-      const resizeObserver = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          const { width, height } = entry.contentRect;
-          chart.setSize({ width: Math.floor(width), height: Math.floor(height) });
-        }
-      });
-      resizeObserver.observe(container);
-      onCleanup(() => {
-        resizeObserver.disconnect();
-      });
-    });
-    createEffect(() => {
-      chart.setData(updateableOptions.data, updateableOptions.resetScales);
-    });
-    onCleanup(() => {
-      chart.destroy();
-    });
-  });
-  const classes = () => local.class ? `solid-uplot ${local.class}` : "solid-uplot";
-  return <div
-    id="solid-uplot-root"
-    ref={mergeRefs(local.ref, (el) => container = el)}
-    class={classes()}
-    style={{
-      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"
-      },
-      ...local.style
-    }}
-  >
-      {local.children}
-    </div>;
-};
-export {
-  SolidUplot,
-  createPluginBus
-};

package/dist/plugins/index.jsx

@@ -1,334 +0,0 @@
-import {
-  getCursorData,
-  getSeriesData
-} from "../chunk/X3NAOFDO.jsx";
-
-// src/plugins/cursor.ts
-var cursor = () => {
-  return ({ bus }) => {
-    if (!bus) {
-      return { hooks: {} };
-    }
-    bus.setData("cursor", {
-      state: {}
-    });
-    let pointerEnter;
-    let pointerLeave;
-    return {
-      hooks: {
-        ready: (u) => {
-          pointerEnter = () => {
-            bus.setData("cursor", { sourceId: u.root.id });
-          };
-          pointerLeave = () => {
-            bus.setData("cursor", { sourceId: void 0 });
-          };
-          u.over.addEventListener("pointerenter", pointerEnter);
-          u.over.addEventListener("pointerleave", pointerLeave);
-        },
-        setCursor: (u) => {
-          bus.setData("cursor", "state", u.root.id, getCursorData(u));
-        },
-        setData: (u) => {
-          bus.setData("cursor", (prev) => ({
-            ...prev ?? {},
-            state: {
-              ...prev?.state ?? {},
-              [u.root.id]: getCursorData(u)
-            }
-          }));
-        },
-        destroy: (u) => {
-          bus.setData("cursor", "state", u.root.id, void 0);
-          u.over.removeEventListener("pointerenter", pointerEnter);
-          u.over.removeEventListener("pointerleave", pointerLeave);
-        }
-      }
-    };
-  };
-};
-
-// src/plugins/focusSeries.ts
-import { createEffect, createRoot } from "solid-js";
-var DEFAULT_UNFOCUSED_ALPHA = 0.1;
-var DEFAULT_FOCUSED_ALPHA = 1;
-var DEFAULT_REBUILD_PATHS = false;
-var seriesFocusRedraw = (u, options = {}) => {
-  const {
-    unfocusedAlpha = DEFAULT_UNFOCUSED_ALPHA,
-    focusedAlpha = DEFAULT_FOCUSED_ALPHA,
-    rebuildPaths = DEFAULT_REBUILD_PATHS,
-    focusTargets
-  } = options;
-  for (let i = 1; i < u.series.length; i++) {
-    const s = u.series[i];
-    if (!focusTargets || !focusTargets.length) {
-      s.alpha = 1;
-      continue;
-    }
-    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;
-    });
-    s.alpha = target ? focusedAlpha : unfocusedAlpha;
-  }
-  u.redraw(rebuildPaths);
-};
-var focusSeries = (options = {}) => {
-  return ({ bus }) => {
-    if (!bus) {
-      return { hooks: {} };
-    }
-    const {
-      pxThreshold = 5,
-      unfocusedAlpha = DEFAULT_UNFOCUSED_ALPHA,
-      focusedAlpha = DEFAULT_FOCUSED_ALPHA,
-      rebuildPaths = DEFAULT_REBUILD_PATHS
-    } = options;
-    let dispose;
-    let pointerLeave;
-    return {
-      hooks: {
-        ready: (u) => {
-          pointerLeave = () => {
-            bus.setData("focusSeries", void 0);
-          };
-          queueMicrotask(() => {
-            if (bus.data.focusSeries) {
-              seriesFocusRedraw(u, {
-                unfocusedAlpha,
-                focusedAlpha,
-                rebuildPaths,
-                focusTargets: bus.data.focusSeries.targets
-              });
-            }
-          });
-          u.over.addEventListener("pointerleave", pointerLeave);
-          dispose = createRoot((dispose2) => {
-            createEffect(() => {
-              const cursor2 = bus.data.cursor;
-              const focus = bus.data.focusSeries;
-              if (cursor2?.sourceId !== u.root.id) {
-                seriesFocusRedraw(u, {
-                  unfocusedAlpha,
-                  focusedAlpha,
-                  rebuildPaths,
-                  focusTargets: focus?.targets
-                });
-              }
-            });
-            return dispose2;
-          });
-        },
-        setCursor: (u) => {
-          const cursor2 = bus.data.cursor;
-          const chartCursor = cursor2?.state[u.root.id];
-          if (!cursor2 || !chartCursor || cursor2.sourceId !== u.root.id) return;
-          const focusTargets = [];
-          for (let i = 1; i < u.series.length; i++) {
-            const s = u.series[i];
-            const yVals = u.data[i];
-            const val = yVals?.[chartCursor.idx];
-            if (!s.show || !yVals || val == null) continue;
-            const yPos = u.valToPos(val, s.scale);
-            const dist = Math.abs(yPos - chartCursor.position.top);
-            if (dist <= pxThreshold) {
-              if (s.label != null) {
-                focusTargets.push({ label: s.label });
-              } else {
-                focusTargets.push({ index: i });
-              }
-            }
-          }
-          seriesFocusRedraw(u, {
-            unfocusedAlpha,
-            focusedAlpha,
-            rebuildPaths,
-            focusTargets
-          });
-          bus.setData("focusSeries", {
-            sourceId: u.root.id,
-            targets: focusTargets
-          });
-        },
-        destroy: (u) => {
-          dispose();
-          u.over.removeEventListener("pointerleave", pointerLeave);
-        }
-      }
-    };
-  };
-};
-
-// src/plugins/legend.tsx
-import { mergeProps, splitProps } from "solid-js";
-import { render } from "solid-js/web";
-import "uplot";
-var legend = (Component, options = {}) => {
-  return ({ bus }) => {
-    if (!bus) {
-      return { hooks: {} };
-    }
-    let legendRoot;
-    let dispose;
-    return {
-      hooks: {
-        ready: (u) => {
-          const seriesData = getSeriesData(u);
-          const LegendRoot = () => {
-            const _options = mergeProps(
-              {
-                placement: "top-left",
-                pxOffset: 8,
-                id: "solid-uplot-legend-root",
-                zIndex: 10
-              },
-              options
-            );
-            const [legendOptions, containerProps] = splitProps(_options, ["placement", "pxOffset"]);
-            const containerStyle = () => {
-              const overRect = u.over.getBoundingClientRect();
-              const offset = legendOptions.pxOffset;
-              return {
-                position: "absolute",
-                [legendOptions.placement === "top-left" ? "left" : "right"]: `${offset}px`,
-                top: `${offset}px`,
-                "max-width": `${overRect.width - offset * 2}px`,
-                "max-height": `${overRect.height - offset * 2}px`,
-                "z-index": containerProps.zIndex,
-                "pointer-events": "auto",
-                overflow: "auto",
-                ...containerProps.style
-              };
-            };
-            return <div
-              ref={legendRoot}
-              id={containerProps.id}
-              class={containerProps.class}
-              role="group"
-              aria-label="Chart legend"
-              style={containerStyle()}
-            >
-                <Component u={u} seriesData={seriesData} bus={bus} />
-              </div>;
-          };
-          dispose = render(() => <LegendRoot />, u.over);
-        },
-        destroy: () => {
-          dispose();
-          legendRoot?.remove();
-        }
-      }
-    };
-  };
-};
-
-// src/plugins/tooltip.tsx
-import { mergeProps as mergeProps2, Show, splitProps as splitProps2 } from "solid-js";
-import { render as render2 } from "solid-js/web";
-import "uplot";
-var TOOLTIP_OFFSET_X = 8;
-var TOOLTIP_OFFSET_Y = 8;
-var getTooltipPosition = (placement, left, top, tooltipWidth, tooltipHeight) => {
-  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 = baseX - window.scrollX;
-  const viewportY = baseY - window.scrollY;
-  const overflowsLeft = viewportX < 0;
-  const overflowsRight = viewportX + tooltipWidth > window.innerWidth;
-  const overflowsTop = viewportY < 0;
-  const overflowsBottom = viewportY + tooltipHeight > window.innerHeight;
-  let flipX = false;
-  let flipY = false;
-  if (placement.includes("left") && overflowsLeft) flipX = true;
-  if (placement.includes("right") && overflowsRight) flipX = true;
-  if (placement.includes("top") && overflowsTop) flipY = true;
-  if (placement.includes("bottom") && overflowsBottom) flipY = true;
-  const finalX = flipX && placement.includes("left") ? left + TOOLTIP_OFFSET_X : flipX && placement.includes("right") ? left - tooltipWidth - TOOLTIP_OFFSET_X : baseX;
-  const finalY = flipY && placement.includes("top") ? top + TOOLTIP_OFFSET_Y : flipY && placement.includes("bottom") ? top - tooltipHeight - TOOLTIP_OFFSET_Y : baseY;
-  return {
-    left: finalX,
-    top: finalY
-  };
-};
-var tooltip = (Component, options = {}) => {
-  return ({ bus }) => {
-    if (!bus) {
-      return { hooks: {} };
-    }
-    let tooltipRoot;
-    let dispose;
-    return {
-      hooks: {
-        ready: (u) => {
-          const seriesData = getSeriesData(u);
-          const TooltipRoot = () => {
-            const _options = mergeProps2(
-              {
-                placement: "top-left",
-                id: "solid-uplot-tooltip-root",
-                style: {},
-                zIndex: 20
-              },
-              options
-            );
-            const chartCursorData = () => bus.data.cursor?.state[u.root.id];
-            const [tooltipOptions, containerProps] = splitProps2(_options, ["placement"]);
-            return <Show when={chartCursorData()}>
-                {(cursor2) => {
-              const position = () => {
-                const overRect = u.over.getBoundingClientRect();
-                const absoluteLeft = overRect.left + cursor2().position.left + window.scrollX;
-                const absoluteTop = overRect.top + cursor2().position.top + window.scrollY;
-                const tooltipWidth = tooltipRoot.offsetWidth ?? 0;
-                const tooltipHeight = tooltipRoot.offsetHeight ?? 0;
-                return getTooltipPosition(
-                  tooltipOptions.placement,
-                  absoluteLeft,
-                  absoluteTop,
-                  tooltipWidth,
-                  tooltipHeight
-                );
-              };
-              return <div
-                ref={tooltipRoot}
-                id={containerProps.id}
-                class={containerProps.class}
-                role="tooltip"
-                aria-label="Chart tooltip"
-                style={{
-                  position: "absolute",
-                  "z-index": containerProps.zIndex,
-                  left: `${position().left}px`,
-                  top: `${position().top}px`,
-                  "pointer-events": "none",
-                  ...containerProps.style
-                }}
-              >
-                      <Component
-                u={u}
-                seriesData={seriesData}
-                cursor={cursor2()}
-                focusedSeries={bus.data.focusSeries}
-              />
-                    </div>;
-            }}
-              </Show>;
-          };
-          dispose = render2(() => <TooltipRoot />, u.root);
-        },
-        destroy: () => {
-          dispose();
-          tooltipRoot?.remove();
-        }
-      }
-    };
-  };
-};
-export {
-  cursor,
-  focusSeries,
-  legend,
-  tooltip
-};