@dschz/solid-uplot 0.1.7 → 0.3.0

package/README.md

@@ -462,26 +462,35 @@ const MyDashboard = () => {
 ### SolidUplot Component
 
 ```tsx
+type SolidUplotEvents = {
+  /** Callback fired when the uPlot instance is created */
+  readonly onCreate?: (u: uPlot, meta: OnCreateMeta) => void;
+  /** Callback fired when the cursor moves */
+  readonly onCursorMove?: (params: OnCursorMoveParams) => void;
+};
+
 // Main component props (extends all uPlot.Options except plugins, width, height)
-type SolidUplotProps<T extends VoidStruct = VoidStruct> = SolidUplotOptions<T> & {
-  // Ref callback to access the chart container element
-  ref?: (el: HTMLDivElement) => void;
+type SolidUplotProps<T extends VoidStruct = VoidStruct> = SolidUplotOptions<T> &
+  SolidUplotEvents & {
+    // Ref callback to access the chart container element
+    ref?: Ref<HTMLDivElement>;
 
-  // Callback fired when the uPlot instance is created
-  onCreate?: (u: uPlot, meta: { seriesData: SeriesDatum[] }) => void;
+    // CSS class name for the chart container (default: "solid-uplot")
+    // Additional classes will be appended to the default class
+    class?: string;
 
-  // Whether to reset scales when chart data is updated (default: true)
-  resetScales?: boolean;
+    // CSS styles for the chart container (position is managed internally)
+    style?: Omit<JSX.CSSProperties, "position">;
 
-  // CSS styles for the chart container (position is managed internally)
-  style?: Omit<JSX.CSSProperties, "position">;
+    // Enable automatic resizing to fit container (default: false)
+    autoResize?: boolean;
 
-  // Where to place children components relative to the chart (default: "top")
-  childrenPlacement?: "top" | "bottom";
+    // Whether to reset scales when chart data is updated (default: true)
+    resetScales?: boolean;
 
-  // Enable automatic resizing to fit container (default: false)
-  autoResize?: boolean;
-};
+    // Where to place children components relative to the chart (default: "top")
+    childrenPlacement?: "top" | "bottom";
+  };
 
 // Configuration options extending uPlot.Options with SolidJS enhancements
 type SolidUplotOptions<T extends VoidStruct = VoidStruct> = Omit<

package/dist/chunk/IV6D7K4M.js

@@ -0,0 +1,24 @@
+import 'uplot';
+
+// src/utils/getColorString.ts
+var getColorString = (fillOrStroke, fallback = "#888") => {
+  return typeof fillOrStroke === "string" ? fillOrStroke : fallback;
+};
+function getNewCalendarDayIndices(u) {
+  const xValues = u.data[0];
+  if (!xValues || !xValues.length) return [];
+  const seen = /* @__PURE__ */ new Set();
+  const indices = [];
+  for (let i = 0; i < xValues.length; i++) {
+    const ts = xValues[i];
+    const date = new Date(ts);
+    const dayString = date.toISOString().split("T")[0];
+    if (!seen.has(dayString)) {
+      seen.add(dayString);
+      indices.push(i);
+    }
+  }
+  return indices;
+}
+
+export { getColorString, getNewCalendarDayIndices };

package/dist/chunk/{A3AZKFSW.jsx → QELYARMN.js}

@@ -1,3 +1,17 @@
+// 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 = [];
@@ -20,8 +34,6 @@ var getSeriesData = (u, options = {}) => {
   }
   return series;
 };
-
-export {
-  getSeriesData
-};
 // istanbul ignore next -- @preserve
+
+export { getCursorData, getSeriesData };

package/dist/{getSeriesData-D1zBqQ9Y.d.ts → getSeriesData-04wGQord.d.ts}

@@ -1,3 +1,46 @@
+type CursorPosition = {
+    /**
+     * The cursor position left offset in CSS pixels (relative to plotting area)
+     */
+    readonly left: number;
+    /**
+     * The cursor position top offset in CSS pixels (relative to plotting area)
+     */
+    readonly top: number;
+};
+/**
+ * The cursor index data for a given uPlot instance.
+ */
+type CursorData = {
+    /**
+     * The id of the plot instance that the cursor message originates from.
+     */
+    readonly plotId: string;
+    /**
+     * The closest x-axis data index to cursor (closestIdx)
+     */
+    readonly idx: number;
+    /**
+     * The x-axis value of the cursor idx.
+     */
+    readonly xValue: number;
+    /**
+     * The position of the cursor.
+     */
+    readonly position: CursorPosition;
+    /**
+     * The visibility of the cursor.
+     */
+    readonly visible: boolean;
+};
+/**
+ * Get the cursor index data for a given uPlot instance.
+ *
+ * @param u - The uPlot instance.
+ * @returns The cursor data.
+ */
+declare const getCursorData: (u: uPlot) => CursorData | undefined;
+
 /**
  * Summary data for a given series.
  */
@@ -34,4 +77,4 @@ type GetSeriesDataOptions = {
  */
 declare const getSeriesData: (u: uPlot, options?: GetSeriesDataOptions) => SeriesDatum[];
 
-export { type SeriesDatum as S, getSeriesData as g };
+export { type CursorData as C, type SeriesDatum as S, getSeriesData as a, getCursorData as g };

package/dist/index/index.d.ts

@@ -1,10 +1,20 @@
 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 uPlot from 'uplot';
-import { S as SeriesDatum } from '../getSeriesData-D1zBqQ9Y.js';
+import uPlot$1 from 'uplot';
+import { C as CursorData, S as SeriesDatum } from '../getSeriesData-04wGQord.js';
 import 'solid-js/store';
 
+type OnCursorMoveParams = {
+    /** The uPlot instance */
+    readonly u: uPlot;
+    /** The cursor data */
+    readonly cursor: CursorData;
+    /** Array of series data extracted from the chart configuration */
+    readonly seriesData: SeriesDatum[];
+};
+
 /** Placement options for children components relative to the chart */
 type ChildrenPlacement = "top" | "bottom";
 /**
@@ -13,18 +23,20 @@ type ChildrenPlacement = "top" | "bottom";
  *
  * @template T - The type of the plugin bus data structure
  */
-type SolidUplotPlugin<T extends VoidStruct = VoidStruct> = uPlot.Plugin | UplotPluginFactory<T>;
+type SolidUplotPlugin<T extends VoidStruct = VoidStruct> = uPlot$1.Plugin | UplotPluginFactory<T>;
 /**
  * Configuration options for the SolidUplot component, extending uPlot.Options
  * with SolidJS-specific enhancements
  *
  * @template T - The type of the plugin bus data structure
  */
-type SolidUplotOptions<T extends VoidStruct = VoidStruct> = Omit<uPlot.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 */
@@ -37,28 +49,27 @@ type OnCreateMeta = {
     /** Array of series data extracted from the chart configuration */
     readonly seriesData: SeriesDatum[];
 };
+/**
+ * Events that can be passed to the SolidUplot component
+ */
+type SolidUplotEvents = {
+    /** Callback fired when the uPlot instance is created */
+    readonly onCreate?: (u: uPlot$1, meta: OnCreateMeta) => void;
+    /** Callback fired when the cursor moves */
+    readonly onCursorMove?: (params: OnCursorMoveParams) => void;
+};
 /**
  * Props for the SolidUplot component
  *
  * @template T - The type of the plugin bus data structure
  */
-type SolidUplotProps<T extends VoidStruct = VoidStruct> = SolidUplotOptions<T> & {
-    /** Ref callback to access the chart container element */
-    readonly ref?: (el: HTMLDivElement) => void;
-    /** Callback fired when the uPlot instance is created */
-    readonly onCreate?: (u: uPlot, meta: OnCreateMeta) => void;
-    /**
-     * Whether to reset scales when chart data is updated
-     * @default true
-     */
-    readonly resetScales?: boolean;
+type SolidUplotProps<T extends VoidStruct = VoidStruct> = SolidUplotOptions<T> & SolidUplotEvents & {
+    /** Class name for the chart container */
+    readonly class?: string;
     /** CSS styles for the chart container (position is managed internally) */
     readonly style?: Omit<JSX.CSSProperties, "position">;
-    /**
-     * Where to place children components relative to the chart
-     * @default "top"
-     */
-    readonly childrenPlacement?: ChildrenPlacement;
+    /** Ref callback to access the chart container element */
+    readonly ref?: Ref<HTMLDivElement>;
     /**
      * Enable automatic resizing to fit container.
      *
@@ -70,6 +81,16 @@ type SolidUplotProps<T extends VoidStruct = VoidStruct> = SolidUplotOptions<T> &
      * @default false
      */
     readonly autoResize?: boolean;
+    /**
+     * Whether to reset scales when chart data is updated
+     * @default true
+     */
+    readonly resetScales?: boolean;
+    /**
+     * Where to place children components relative to the chart
+     * @default "top"
+     */
+    readonly childrenPlacement?: ChildrenPlacement;
 };
 /**
  * A SolidJS wrapper component for uPlot charts with enhanced features

package/dist/index/index.js

@@ -1,17 +1,31 @@
-import { getSeriesData } from '../chunk/ZISGD6FJ.js';
+import '../chunk/IV6D7K4M.js';
+import { getSeriesData, getCursorData } from '../chunk/QELYARMN.js';
 import { createStore } from 'solid-js/store';
-import { template, use, insert, effect, style } from 'solid-js/web';
+import { template, use, insert, effect, className, style } 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';
 
 var createPluginBus = (initialData = {}) => {
   const [data, setData] = createStore(initialData);
+  return { data, setData };
+};
+
+// src/eventPlugins.ts
+var createCursorMovePlugin = (onCursorMove) => {
   return {
-    data,
-    setData
+    hooks: {
+      setCursor: (u) => {
+        const cursor = getCursorData(u);
+        if (!cursor) return;
+        onCursorMove?.({ u, cursor, seriesData: getSeriesData(u) });
+      }
+    }
   };
 };
+
+// src/SolidUplot.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div id=solid-uplot-root>`);
 var SolidUplot = (props) => {
   let container;
@@ -28,7 +42,7 @@ var SolidUplot = (props) => {
       show: false
     }
   }, props);
-  const [local, options] = splitProps(_props, ["children", "childrenPlacement", "autoResize", "onCreate", "style", "ref"]);
+  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 = () => ({
@@ -36,9 +50,13 @@ var SolidUplot = (props) => {
     height: updateableOptions.height
   });
   const chartPlugins = createMemo(() => {
-    return system.plugins.map((plugin) => typeof plugin === "function" ? plugin({
+    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 = () => {
@@ -91,25 +109,32 @@ var SolidUplot = (props) => {
       chart.destroy();
     });
   });
+  const classes = () => local.class ? `solid-uplot ${local.class}` : "solid-uplot";
   return (() => {
     var _el$ = _tmpl$();
-    use((el) => {
-      container = el;
-      local.ref?.(el);
-    }, _el$);
+    var _ref$ = mergeRefs(local.ref, (el) => container = el);
+    typeof _ref$ === "function" && use(_ref$, _el$);
     insert(_el$, () => local.children);
-    effect((_$p) => style(_el$, {
-      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
-    }, _$p));
+    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"
+        },
+        ...local.style
+      };
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0
+    });
     return _el$;
   })();
 };

package/dist/plugins/index.d.ts

@@ -1,8 +1,7 @@
 import { U as UplotPluginFactory, S as SolidUplotPluginBus } from '../createPluginBus-DdrjQANs.js';
-import { C as CursorData } from '../getCursorData-2qxURGuZ.js';
+import { C as CursorData, S as SeriesDatum } from '../getSeriesData-04wGQord.js';
 import { Component, JSX } from 'solid-js';
-import uPlot from 'uplot';
-import { S as SeriesDatum } from '../getSeriesData-D1zBqQ9Y.js';
+import uPlot$1 from 'uplot';
 import 'solid-js/store';
 
 /**
@@ -157,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.
@@ -184,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.
@@ -220,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
@@ -234,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>;
 };
@@ -307,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
@@ -361,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

@@ -1,5 +1,4 @@
-import { getCursorData } from '../chunk/3TJS44N7.js';
-import { getSeriesData } from '../chunk/ZISGD6FJ.js';
+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';
 
@@ -59,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;
     }
@@ -105,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
                 });
               }
             });
@@ -232,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;
@@ -272,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();
@@ -285,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();
@@ -307,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/dist/utils/index.d.ts

@@ -1,6 +1,5 @@
-export { C as CursorData, g as getCursorData } from '../getCursorData-2qxURGuZ.js';
+export { C as CursorData, S as SeriesDatum, g as getCursorData, a as getSeriesData } from '../getSeriesData-04wGQord.js';
 import uPlot from 'uplot';
-export { S as SeriesDatum, g as getSeriesData } from '../getSeriesData-D1zBqQ9Y.js';
 
 /**
  * Utility to get a color string from uPlot stroke or fill values

package/dist/utils/index.js

@@ -1,26 +1,2 @@
-export { getCursorData } from '../chunk/3TJS44N7.js';
-export { getSeriesData } from '../chunk/ZISGD6FJ.js';
-import 'uplot';
-
-// src/utils/getColorString.ts
-var getColorString = (fillOrStroke, fallback = "#888") => {
-  return typeof fillOrStroke === "string" ? fillOrStroke : fallback;
-};
-function getNewCalendarDayIndices(u) {
-  const xValues = u.data[0];
-  if (!xValues || !xValues.length) return [];
-  const seen = /* @__PURE__ */ new Set();
-  const indices = [];
-  for (let i = 0; i < xValues.length; i++) {
-    const ts = xValues[i];
-    const date = new Date(ts);
-    const dayString = date.toISOString().split("T")[0];
-    if (!seen.has(dayString)) {
-      seen.add(dayString);
-      indices.push(i);
-    }
-  }
-  return indices;
-}
-
-export { getColorString, getNewCalendarDayIndices };
+export { getColorString, getNewCalendarDayIndices } from '../chunk/IV6D7K4M.js';
+export { getCursorData, getSeriesData } from '../chunk/QELYARMN.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dschz/solid-uplot",
-  "version": "0.1.7",
+  "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,44 +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": {}
+  "dependencies": {
+    "@solid-primitives/refs": "^1.1.2"
+  }
 }

package/dist/chunk/3TJS44N7.js

@@ -1,15 +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 }
-  };
-};
-
-export { getCursorData };

package/dist/chunk/ZISGD6FJ.js

@@ -1,25 +0,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;
-};
-// istanbul ignore next -- @preserve
-
-export { getSeriesData };

package/dist/getCursorData-2qxURGuZ.d.ts

@@ -1,44 +0,0 @@
-type CursorPosition = {
-    /**
-     * The cursor position left offset in CSS pixels (relative to plotting area)
-     */
-    readonly left: number;
-    /**
-     * The cursor position top offset in CSS pixels (relative to plotting area)
-     */
-    readonly top: number;
-};
-/**
- * The cursor index data for a given uPlot instance.
- */
-type CursorData = {
-    /**
-     * The id of the plot instance that the cursor message originates from.
-     */
-    readonly plotId: string;
-    /**
-     * The closest x-axis data index to cursor (closestIdx)
-     */
-    readonly idx: number;
-    /**
-     * The x-axis value of the cursor idx.
-     */
-    readonly xValue: number;
-    /**
-     * The position of the cursor.
-     */
-    readonly position: CursorPosition;
-    /**
-     * The visibility of the cursor.
-     */
-    readonly visible: boolean;
-};
-/**
- * Get the cursor index data for a given uPlot instance.
- *
- * @param u - The uPlot instance.
- * @returns The cursor data.
- */
-declare const getCursorData: (u: uPlot) => CursorData | undefined;
-
-export { type CursorData as C, getCursorData as g };

package/dist/index/index.jsx

@@ -1,135 +0,0 @@
-import {
-  getSeriesData
-} from "../chunk/A3AZKFSW.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 {
-  createEffect,
-  createMemo,
-  createUniqueId,
-  mergeProps,
-  onCleanup,
-  splitProps,
-  untrack
-} from "solid-js";
-import uPlot from "uplot";
-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",
-    "autoResize",
-    "onCreate",
-    "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(() => {
-    return system.plugins.map(
-      (plugin) => typeof plugin === "function" ? plugin({ bus: system.pluginBus }) : plugin
-    );
-  });
-  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 uPlot(
-      {
-        ...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();
-    });
-  });
-  return <div
-    id="solid-uplot-root"
-    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
-    }}
-    ref={(el) => {
-      container = el;
-      local.ref?.(el);
-    }}
-  >
-      {local.children}
-    </div>;
-};
-export {
-  SolidUplot,
-  createPluginBus
-};

package/dist/plugins/index.jsx

@@ -1,347 +0,0 @@
-import {
-  getSeriesData
-} from "../chunk/A3AZKFSW.jsx";
-
-// 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/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
-};