@dschz/solid-uplot 0.1.7 → 0.2.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/{ZISGD6FJ.js → 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 = [];
@@ -22,4 +36,4 @@ var getSeriesData = (u, options = {}) => {
 };
 // istanbul ignore next -- @preserve
 
-export { getSeriesData };
+export { getCursorData, getSeriesData };

package/dist/chunk/{A3AZKFSW.jsx → X3NAOFDO.jsx}

@@ -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 = [];
@@ -22,6 +36,7 @@ var getSeriesData = (u, options = {}) => {
 };
 
 export {
+  getCursorData,
   getSeriesData
 };
 // istanbul ignore next -- @preserve

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,14 +23,14 @@ 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"> & {
     /** Chart width in pixels */
     readonly width?: number;
     /** Chart height in pixels */
@@ -37,28 +47,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 +79,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,7 +1,9 @@
-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';
 
@@ -12,6 +14,21 @@ var createPluginBus = (initialData = {}) => {
     setData
   };
 };
+
+// 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 _tmpl$ = /* @__PURE__ */ template(`<div id=solid-uplot-root>`);
 var SolidUplot = (props) => {
   let container;
@@ -28,7 +45,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 +53,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 +112,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/index/index.jsx

@@ -1,6 +1,7 @@
 import {
+  getCursorData,
   getSeriesData
-} from "../chunk/A3AZKFSW.jsx";
+} from "../chunk/X3NAOFDO.jsx";
 
 // src/createPluginBus.tsx
 import { createStore } from "solid-js/store";
@@ -11,6 +12,7 @@ var createPluginBus = (initialData = {}) => {
 
 // src/SolidUplot.tsx
 import "uplot/dist/uPlot.min.css";
+import { mergeRefs } from "@solid-primitives/refs";
 import {
   createEffect,
   createMemo,
@@ -20,7 +22,25 @@ import {
   splitProps,
   untrack
 } from "solid-js";
-import uPlot from "uplot";
+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(
@@ -42,8 +62,10 @@ var SolidUplot = (props) => {
   const [local, options] = splitProps(_props, [
     "children",
     "childrenPlacement",
+    "class",
     "autoResize",
     "onCreate",
+    "onCursorMove",
     "style",
     "ref"
   ]);
@@ -56,9 +78,13 @@ var SolidUplot = (props) => {
   const [system, chartOptions] = splitProps(newChartOptions, ["pluginBus", "plugins"]);
   const size = () => ({ width: updateableOptions.width, height: updateableOptions.height });
   const chartPlugins = createMemo(() => {
-    return system.plugins.map(
+    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 = () => {
@@ -73,7 +99,7 @@ var SolidUplot = (props) => {
     };
     const initialSize = getInitialSize();
     const initialData = untrack(() => updateableOptions.data);
-    const chart = new uPlot(
+    const chart = new uPlot2(
       {
         ...chartOptions,
         ...initialSize,
@@ -107,8 +133,11 @@ var SolidUplot = (props) => {
       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",
@@ -121,10 +150,6 @@ var SolidUplot = (props) => {
       },
       ...local.style
     }}
-    ref={(el) => {
-      container = el;
-      local.ref?.(el);
-    }}
   >
       {local.children}
     </div>;

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 'solid-js/store';
 
 /**

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';
 

package/dist/plugins/index.jsx

@@ -1,20 +1,7 @@
 import {
+  getCursorData,
   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 }
-  };
-};
+} from "../chunk/X3NAOFDO.jsx";
 
 // src/plugins/cursor.ts
 var cursor = () => {

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.2.0",
   "description": "SolidJS wrapper for uPlot — ultra-fast, tiny time-series & charting library",
   "type": "module",
   "author": "Daniel Sanchez <dsanc89@pm.me>",
@@ -146,5 +146,7 @@
     "solid-js": ">=1.6.0",
     "uplot": ">=1.6.32"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@solid-primitives/refs": "^1.1.1"
+  }
 }

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/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 };