@dschz/solid-uplot 0.1.0

package/dist/chunk/3TJS44N7.js

@@ -0,0 +1,15 @@
+// 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/A3AZKFSW.jsx

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

package/dist/chunk/ZISGD6FJ.js

@@ -0,0 +1,25 @@
+// 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/createPluginBus-B_Gp5BCB.d.ts

@@ -0,0 +1,21 @@
+import { Store, SetStoreFunction } from 'solid-js/store';
+
+type VoidStruct = Record<string, unknown>;
+type PluginStore<T> = {
+    readonly data: Store<T>;
+    readonly setData: SetStoreFunction<T>;
+};
+/**
+ * Represents a reactive store shared across SolidUplot plugins.
+ *
+ * This store acts as a message bus, allowing plugins to publish and
+ * subscribe to typed messages based on agreed-upon keys (e.g., `tooltip`, `highlight`).
+ */
+declare const createPluginBus: <T extends VoidStruct = VoidStruct>(initialData?: T) => PluginStore<T>;
+type SolidUplotPluginBus<T extends VoidStruct = VoidStruct> = ReturnType<typeof createPluginBus<T>>;
+type PluginFactoryContext<T extends VoidStruct = VoidStruct> = {
+    readonly bus?: SolidUplotPluginBus<T>;
+};
+type PluginFactory<T extends VoidStruct = VoidStruct> = (ctx: PluginFactoryContext<T>) => uPlot.Plugin;
+
+export { type PluginFactory as P, type SolidUplotPluginBus as S, type VoidStruct as V, createPluginBus as c };

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

@@ -0,0 +1,44 @@
+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/getSeriesData-D1zBqQ9Y.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Summary data for a given series.
+ */
+type SeriesDatum = {
+    /** The index of the series if you were treating this as a zero-indexed array */
+    readonly idx: number;
+    /** The index of the series in the uPlot instance */
+    readonly seriesIdx: number;
+    /** The display label of the series */
+    readonly label: string;
+    /** The series stroke color */
+    readonly stroke: string | CanvasGradient | CanvasPattern;
+    /** The fill color */
+    readonly fill: string | CanvasGradient | CanvasPattern;
+    /** The stroke width of the series line */
+    readonly width?: number;
+    /** The dash pattern used for the line */
+    readonly dash?: number[];
+    /** The name of the associated scale (e.g. "y", "y2") */
+    readonly scale?: string;
+    /** Whether the series is shown */
+    readonly visible?: boolean;
+};
+type GetSeriesDataOptions = {
+    /** The function to transform the series label */
+    readonly labelTransform?: (label?: string | HTMLElement) => string;
+};
+/**
+ * Get the y-series data for a given uPlot instance.
+ *
+ * @param u - The uPlot instance.
+ * @param options - The options for the series data.
+ * @returns The series data.
+ */
+declare const getSeriesData: (u: uPlot, options?: GetSeriesDataOptions) => SeriesDatum[];
+
+export { type SeriesDatum as S, getSeriesData as g };

package/dist/index/index.d.ts

@@ -0,0 +1,44 @@
+import { V as VoidStruct, S as SolidUplotPluginBus, P as PluginFactory } from '../createPluginBus-B_Gp5BCB.js';
+export { c as createPluginBus } from '../createPluginBus-B_Gp5BCB.js';
+import { ParentProps, JSX } from 'solid-js';
+import uPlot from 'uplot';
+import { S as SeriesDatum } from '../getSeriesData-D1zBqQ9Y.js';
+import 'solid-js/store';
+
+type ChildrenPlacement = "top" | "bottom";
+type SolidUplotPlugin<T extends VoidStruct = VoidStruct> = uPlot.Plugin | PluginFactory<T>;
+type SolidUplotOptions<T extends VoidStruct = VoidStruct> = Omit<uPlot.Options, "plugins" | "width" | "height"> & {
+    readonly width?: number;
+    readonly height?: number;
+    readonly pluginBus?: SolidUplotPluginBus<T>;
+    readonly plugins?: SolidUplotPlugin<T>[];
+};
+type OnCreateMeta = {
+    readonly seriesData: SeriesDatum[];
+};
+type SolidUplotProps<T extends VoidStruct = VoidStruct> = SolidUplotOptions<T> & {
+    /** The ref of the uPlot instance */
+    readonly ref?: (el: HTMLDivElement) => void;
+    /** Callback when uPlot instance is created */
+    readonly onCreate?: (u: uPlot, meta: OnCreateMeta) => void;
+    /** Apply scale reset on redraw triggered by updated plot data (default: `true`) */
+    readonly resetScales?: boolean;
+    /** The style of the uPlot instance container */
+    readonly style?: Omit<JSX.CSSProperties, "position">;
+    /** The placement of the children container. Defaults to "top" */
+    readonly childrenPlacement?: ChildrenPlacement;
+    /**
+     * Enable automatic resizing to fit container.
+     *
+     * When true:
+     * - Chart uses width/height props for initial render
+     * - Then automatically adapts to container size changes
+     * - If no width/height provided, uses sensible defaults (600x300)
+     *
+     * @default false
+     */
+    readonly autoResize?: boolean;
+};
+declare const SolidUplot: <T extends VoidStruct = VoidStruct>(props: ParentProps<SolidUplotProps<T>>) => JSX.Element;
+
+export { SolidUplot, SolidUplotPluginBus, VoidStruct };

package/dist/index/index.js

@@ -0,0 +1,117 @@
+import { getSeriesData } from '../chunk/ZISGD6FJ.js';
+import { createStore } from 'solid-js/store';
+import { template, use, insert, effect, style } from 'solid-js/web';
+import 'uplot/dist/uPlot.min.css';
+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
+  };
+};
+var _tmpl$ = /* @__PURE__ */ template(`<div id=solid-uplot-root>`);
+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 (() => {
+    var _el$ = _tmpl$();
+    use((el) => {
+      container = el;
+      local.ref?.(el);
+    }, _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));
+    return _el$;
+  })();
+};
+
+export { SolidUplot, createPluginBus };

package/dist/index/index.jsx

@@ -0,0 +1,135 @@
+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
+};