@wick-charts/react - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

src/ui/Navigator.tsx

+import { type CSSProperties, useEffect, useLayoutEffect, useRef } from 'react';
+
+import { NavigatorController, type NavigatorData } from '@wick-charts/core';
+
+import { useChartInstance } from '../context';
+import { useTheme } from '../ThemeContext';
+
+export interface NavigatorProps {
+  /**
+   * Data to render in the miniature view. Shape:
+   *   { type: 'line' | 'bar',     points: { time, value }[] }
+   *   { type: 'candlestick',      points: { time, open, high, low, close }[] }
+   *
+   * Usually the same series you feed into the main chart.
+   */
+  data: NavigatorData;
+  /** Strip height in CSS pixels. Defaults to `theme.navigator.height` (60). */
+  height?: number;
+  /** Style override for the outer wrapper div. */
+  style?: CSSProperties;
+  /** Extra class on the outer wrapper div. */
+  className?: string;
+}
+
+/**
+ * Miniature navigator strip with a draggable window indicator for the main
+ * chart's visible range. Must be rendered as a child of `<ChartContainer>`
+ * so the chart instance is available via context.
+ *
+ * `ChartContainer` sifts this element out of its children and places it as a
+ * flex sibling below the canvas area — it does not render inline.
+ */
+export function Navigator({ data, height, style, className }: NavigatorProps) {
+  const chart = useChartInstance();
+  // Subscribe to theme via context so a `<ThemeProvider>` swap re-renders the
+  // strip with the new default height. Reading from `chart.getTheme()` would
+  // miss those updates because the chart instance reference is stable.
+  const theme = useTheme();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const controllerRef = useRef<NavigatorController | null>(null);
+
+  useLayoutEffect(() => {
+    if (!containerRef.current) return;
+    const controller = new NavigatorController({
+      container: containerRef.current,
+      chart,
+      data,
+      options: height !== undefined ? { height } : undefined,
+    });
+    controllerRef.current = controller;
+
+    return () => {
+      controller.destroy();
+      controllerRef.current = null;
+    };
+    // Mount-only. Data/height changes are synced by the two effects below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chart]);
+
+  useEffect(() => {
+    controllerRef.current?.setData(data);
+  }, [data]);
+
+  useEffect(() => {
+    controllerRef.current?.setOptions(height !== undefined ? { height } : {});
+  }, [height]);
+
+  const resolvedHeight = height ?? theme.navigator.height;
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      data-chart-navigator=""
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: resolvedHeight,
+        flexShrink: 0,
+        ...style,
+      }}
+    />
+  );
+}

package.json

 {
   "name": "@wick-charts/react",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "High-performance canvas timeseries charts for React — candlestick, line, bar, pie. Tree-shakeable, zero runtime deps.",
@@ -52,3 +52,3 @@ "license": "MIT",
   "devDependencies": {
-    "@wick-charts/core": "^0.3.1"
+    "@wick-charts/core": "^0.3.2"
   },
@@ -55,0 +55,0 @@ "scripts": {

src/BarSeries.tsx

@@ -10,2 +10,3 @@ import { useEffect, useLayoutEffect, useRef } from 'react';
   data: TimePoint[][];
+  /** Visual options override — colours per layer, bar-width ratio, stacking, entrance animation, smoothing. */
   options?: Partial<BarSeriesOptions>;
@@ -12,0 +13,0 @@ /** Stable series ID — same value across remounts. */

src/CandlestickSeries.tsx

@@ -15,3 +15,5 @@ import { useEffect, useLayoutEffect, useRef } from 'react';
 export interface CandlestickSeriesProps {
+  /** OHLC candles to render. Each element carries `time/open/high/low/close` and an optional `volume`. */
   data: OHLCInput[];
+  /** Visual options override — colours, body width, entrance animation, smoothing. Merged onto theme defaults. */
   options?: Partial<CandlestickSeriesOptions>;
@@ -18,0 +20,0 @@ /** Stable series ID — same value across remounts. */

src/ChartContainer.tsx

@@ -22,2 +22,3 @@ import {
 import { Legend, type LegendProps } from './ui/Legend';
+import { Navigator } from './ui/Navigator';
 import { PieLegend, type PieLegendProps } from './ui/PieLegend';
@@ -35,10 +36,24 @@ import { Title } from './ui/Title';
   /**
-   * Viewport padding. `top`/`bottom` are in pixels. `left`/`right` accept either pixels (`50`)
-   * or data intervals (`{ intervals: 3 }`). Set to 0 for edge-to-edge sparklines. Applied on mount only.
-   * Defaults: `{ top: 20, bottom: 20, right: { intervals: 3 }, left: { intervals: 0 } }`.
+   * Viewport padding around the plot area. Applied on mount only — changing
+   * this prop after mount is ignored. Set every side to `0` for an
+   * edge-to-edge sparkline.
+   *
+   * @default `{ top: 20, bottom: 20, right: { intervals: 3 }, left: { intervals: 0 } }`
    */
   padding?: {
+    /** Pixels of empty space above the plot area. Default `20`. */
     top?: number;
+    /** Pixels of empty space below the plot area. Default `20`. */
     bottom?: number;
+    /**
+     * Empty space on the right edge. A `number` is pixels (e.g. `50`); an
+     * object pads by data intervals on the time axis (e.g. `{ intervals: 3 }`
+     * leaves room for three more bars/candles past the latest point). Default
+     * `{ intervals: 3 }`.
+     */
     right?: number | { intervals: number };
+    /**
+     * Empty space on the left edge. A `number` is pixels; an object pads by
+     * data intervals on the time axis. Default `{ intervals: 0 }`.
+     */
     left?: number | { intervals: number };
@@ -51,3 +66,6 @@ };
   /** Background grid configuration. Default: `{ visible: true }`. */
-  grid?: { visible: boolean };
+  grid?: {
+    /** Whether the background grid is rendered. Default: `true`. */
+    visible: boolean;
+  };
   /**
@@ -72,3 +90,5 @@ * How `<Title>` and `<InfoBar>` are positioned relative to the canvas.
   perf?: PerfOption;
+  /** Inline style for the chart's outer wrapper element. */
   style?: CSSProperties;
+  /** Extra class for the chart's outer wrapper element. */
   className?: string;
@@ -95,2 +115,3 @@ }
   tooltipLegendEl: ReactElement | null;
+  navigatorEl: ReactElement | null;
   overlay: ReactNode[];
@@ -102,2 +123,3 @@ } {
   let tooltipLegendEl: ReactElement | null = null;
+  let navigatorEl: ReactElement | null = null;
   const overlay: ReactNode[] = [];
@@ -136,2 +158,6 @@
       }
+      if (child.type === Navigator) {
+        navigatorEl = child;
+        return;
+      }
     }
@@ -142,3 +168,3 @@ overlay.push(child);
   Children.forEach(children, visit);
-  return { titleEl, legendEl, pieLegendEl, tooltipLegendEl, overlay };
+  return { titleEl, legendEl, pieLegendEl, tooltipLegendEl, navigatorEl, overlay };
 }
@@ -265,3 +291,3 @@
 
-  const { titleEl, legendEl, pieLegendEl, tooltipLegendEl, overlay } = siftContainerChildren(children);
+  const { titleEl, legendEl, pieLegendEl, tooltipLegendEl, navigatorEl, overlay } = siftContainerChildren(children);
   const legendPosition = legendEl?.props.position ?? 'bottom';
@@ -402,2 +428,8 @@ const pieLegendPosition = pieLegendEl?.props.position ?? 'bottom';
 
+  const hoistedNavigator = chart && navigatorEl && (
+    <ChartContext.Provider value={chart}>
+      <ThemeProvider value={resolvedTheme ?? chart.getTheme()}>{navigatorEl}</ThemeProvider>
+    </ChartContext.Provider>
+  );
+
   return (
@@ -435,4 +467,5 @@ <div
       </div>
+      {hoistedNavigator}
     </div>
   );
 }

src/index.ts

@@ -29,2 +29,8 @@ /**
   LineSeriesOptions,
+  NavigatorCandlePoint,
+  NavigatorControllerParams,
+  NavigatorData,
+  NavigatorLinePoint,
+  NavigatorOptions,
+  NavigatorSeriesType,
   OHLCData,
@@ -57,2 +63,3 @@ OHLCInput,
   ChartInstance,
+  NavigatorController,
   andromeda,
@@ -120,2 +127,4 @@ autoGradient,
 export { Legend } from './ui/Legend';
+export type { NavigatorProps } from './ui/Navigator';
+export { Navigator } from './ui/Navigator';
 export { NumberFlow } from './ui/NumberFlow';
@@ -122,0 +131,0 @@ export type { PieLegendMode, PieLegendPosition, PieLegendProps, PieLegendRenderContext } from './ui/PieLegend';

src/LineSeries.tsx

@@ -10,2 +10,3 @@ import { useEffect, useLayoutEffect, useRef } from 'react';
   data: TimePoint[][];
+  /** Visual options override — colours per layer, stroke width, area fill, stacking, entrance animation, smoothing. */
   options?: Partial<LineSeriesOptions>;
@@ -12,0 +13,0 @@ /** Stable series ID — same value across remounts. */

src/PieSeries.tsx

@@ -8,3 +8,5 @@ import { useEffect, useLayoutEffect, useRef } from 'react';
 export interface PieSeriesProps {
+  /** Slices to render. A flat array of `{ label, value, color? }` entries. */
   data: PieSliceData[];
+  /** Visual options override — palette, donut hole, slice gap, label rendering, hover/entrance animations. */
   options?: Partial<PieSeriesOptions>;
@@ -11,0 +13,0 @@ /** Stable series ID — same value across remounts. */

src/ui/NumberFlow.tsx

 import { type CSSProperties, useEffect, useMemo, useRef } from 'react';
 
 export interface NumberFlowProps {
+  /** Numeric value to display. Each digit that changes between renders animates with a vertical spin. */
   value: number;
@@ -15,5 +16,9 @@ /**
   format?: ((value: number) => string) | Intl.NumberFormatOptions;
+  /** BCP 47 locale tag used by the default formatter. Defaults to `'en-US'`. */
   locale?: string;
+  /** Per-digit spin animation duration in milliseconds. Defaults to `350`. */
   spinDuration?: number;
+  /** Extra class on the root `<span>`. */
   className?: string;
+  /** Inline style on the root `<span>`. Useful for `fontVariantNumeric: 'tabular-nums'`. */
   style?: CSSProperties;
@@ -20,0 +25,0 @@ }

src/ui/Sparkline.tsx

@@ -13,3 +13,5 @@ import { type CSSProperties, useMemo } from 'react';
 export interface SparklineProps {
+  /** Data points plotted by the sparkline. A flat `TimePoint[]` — the sparkline only ever shows one tiny line/bar. */
   data: TimePoint[];
+  /** Visual theme. Drives series colour, background gradient, and the change-direction colours used in the value block. */
   theme: ChartTheme;
@@ -31,3 +33,6 @@ /** 'line' (default) or 'bar' */
   /** Show area fill under line */
-  area?: { visible: boolean };
+  area?: {
+    /** Whether the area fill is rendered under the sparkline. Defaults to `true`. */
+    visible: boolean;
+  };
   /** @deprecated Use {@link area} instead. */
@@ -34,0 +39,0 @@ areaFill?: boolean;

New alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

640247

10.54%

Number of package files

28

3.7%

Lines of code

12430

8.68%

Worsened metrics

Number of low supply chain risk alerts

37

19.35%

No dependency changes