@adrienhobbs/candlekit 0.2.3 → 0.2.5

package/dist/index.d.ts

@@ -21,6 +21,16 @@ interface ChartLine {
     title?: string;
     type?: 'entry' | 'stopLoss' | 'takeProfit' | 'mfe' | 'mae';
 }
+/** A shaded horizontal price band (e.g. an MFE↔MAE excursion zone). */
+interface PriceBand {
+    id: string;
+    /** Upper price bound of the band. */
+    top: number;
+    /** Lower price bound of the band. */
+    bottom: number;
+    /** CSS color (use an rgba/low-opacity fill so candles show through). */
+    color: string;
+}
 interface ChartTrade {
     id: string;
     entryTime: number;
@@ -177,8 +187,15 @@ interface ChartComponentProps {
      * view. Pairs with `selectedTradeId` to drive both selection and focus.
      */
     focusTradeId?: string | null;
+    /**
+     * IANA timezone (e.g. "America/New_York") for the axis ticks + crosshair
+     * labels. Omit to use the viewer's local timezone.
+     */
+    timeZone?: string;
+    /** Shaded horizontal price bands (e.g. an MFE↔MAE excursion zone). */
+    priceBands?: PriceBand[];
 }
-declare function ChartComponent({ bars, onLoadMoreData, indicators, lines, onBarUpdate, onNewBar, onDeleteLine, onAddLine, onClearAllLines, enableBarSelection, onBarClick, trades, selectedTradeId, renderTradePopup, height, focusTradeId, }: ChartComponentProps): react_jsx_runtime.JSX.Element;
+declare function ChartComponent({ bars, onLoadMoreData, indicators, lines, onBarUpdate, onNewBar, onDeleteLine, onAddLine, onClearAllLines, enableBarSelection, onBarClick, trades, selectedTradeId, renderTradePopup, height, focusTradeId, timeZone, priceBands, }: ChartComponentProps): react_jsx_runtime.JSX.Element;
 
 interface IndicatorBrowserProps {
     isOpen: boolean;
@@ -445,4 +462,4 @@ declare function getOldestBar(bars: OHLCVBar[]): OHLCVBar | null;
 declare function getNewestBar(bars: OHLCVBar[]): OHLCVBar | null;
 declare function updateCurrentBar(bars: OHLCVBar[], tradePrice: number, tradeVolume: number): OHLCVBar[];
 
-export { ADXIndicator, ATRIndicator, AlpacaBarAdapter, type BarDataAdapter, type BarDataAdapterOptions, BollingerBandsIndicator, CCIIndicator, ChartComponent, type ChartLine, ChartSeriesType, type ChartTrade, DonchianChannelsIndicator, EMAIndicator, ForceIndexIndicator, type HistoricalDataParams, IchimokuIndicator, IndicatorBrowser, type IndicatorCalculation, IndicatorCategory, type IndicatorDefinition, type IndicatorInstance, IndicatorInstanceSchema, type IndicatorMetadata, IndicatorMetadataSchema, type IndicatorOutput, type IndicatorPanel, type IndicatorSettings$1 as IndicatorSettings, IndicatorSettingsForm, IndicatorSettingsSchema, KeltnerChannelsIndicator, type LineStyle, LineStyleSchema, LocalStoragePersistenceAdapter, MACDIndicator, MFIIndicator, MockAdapter, NoOpPersistenceAdapter, OBVIndicator, type OHLCVBar, PSARIndicator, type PersistenceAdapter, ROCIndicator, RSIIndicator, type RealtimeHandlers, type RealtimeSubscription, type RenderConfig, RenderConfigSchema, SMAIndicator, type SettingField, SettingFieldSchema, type SettingFieldType, SettingFieldTypeSchema, SettingsDialog, StochRSIIndicator, StochasticIndicator, SuperTrendIndicator, VWAPIndicator, WMAIndicator, WilliamsRIndicator, appendBar, calculateBollingerBands, calculateEMA, calculateRSI, calculateSMA, calculateStandardDeviation, createPersistenceAdapter, deduplicateBars, displaceArray, getNewestBar, getOldestBar, indicatorCalculator, indicatorRegistry, isValidBar, mergeBars, normalizeTimestamp, padIndicatorArray, prependBars, registerBuiltInIndicators, sortBars, updateBarInArray, updateCurrentBar, useBarsData, useChartAPI, useRealtimeUpdates, validateAndNormalizeBars, validateBar };
+export { ADXIndicator, ATRIndicator, AlpacaBarAdapter, type BarDataAdapter, type BarDataAdapterOptions, BollingerBandsIndicator, CCIIndicator, ChartComponent, type ChartLine, ChartSeriesType, type ChartTrade, DonchianChannelsIndicator, EMAIndicator, ForceIndexIndicator, type HistoricalDataParams, IchimokuIndicator, IndicatorBrowser, type IndicatorCalculation, IndicatorCategory, type IndicatorDefinition, type IndicatorInstance, IndicatorInstanceSchema, type IndicatorMetadata, IndicatorMetadataSchema, type IndicatorOutput, type IndicatorPanel, type IndicatorSettings$1 as IndicatorSettings, IndicatorSettingsForm, IndicatorSettingsSchema, KeltnerChannelsIndicator, type LineStyle, LineStyleSchema, LocalStoragePersistenceAdapter, MACDIndicator, MFIIndicator, MockAdapter, NoOpPersistenceAdapter, OBVIndicator, type OHLCVBar, PSARIndicator, type PersistenceAdapter, type PriceBand, ROCIndicator, RSIIndicator, type RealtimeHandlers, type RealtimeSubscription, type RenderConfig, RenderConfigSchema, SMAIndicator, type SettingField, SettingFieldSchema, type SettingFieldType, SettingFieldTypeSchema, SettingsDialog, StochRSIIndicator, StochasticIndicator, SuperTrendIndicator, VWAPIndicator, WMAIndicator, WilliamsRIndicator, appendBar, calculateBollingerBands, calculateEMA, calculateRSI, calculateSMA, calculateStandardDeviation, createPersistenceAdapter, deduplicateBars, displaceArray, getNewestBar, getOldestBar, indicatorCalculator, indicatorRegistry, isValidBar, mergeBars, normalizeTimestamp, padIndicatorArray, prependBars, registerBuiltInIndicators, sortBars, updateBarInArray, updateCurrentBar, useBarsData, useChartAPI, useRealtimeUpdates, validateAndNormalizeBars, validateBar };

package/dist/index.js

@@ -260,13 +260,11 @@ var BandsPrimitive = class {
 // src/components/trade-markers.ts
 var WIN = "#10b981";
 var LOSS = "#ef4444";
-var SEL = "#3b82f6";
 function buildTradeMarkers(trades, selectedTradeId) {
   const markers = [];
   for (const t of trades) {
     const selected = t.id === selectedTradeId;
-    const base = t.outcome === "win" ? WIN : LOSS;
-    const color = selected ? SEL : base;
+    const color = t.outcome === "win" ? WIN : LOSS;
     markers.push({
       time: t.entryTime / 1e3,
       position: "belowBar",
@@ -301,7 +299,9 @@ function ChartComponent({
   selectedTradeId = null,
   renderTradePopup,
   height,
-  focusTradeId = null
+  focusTradeId = null,
+  timeZone,
+  priceBands = []
 }) {
   const chartContainerRef = useRef(null);
   const chartRef = useRef(null);
@@ -315,6 +315,7 @@ function ChartComponent({
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const [contextMenu, setContextMenu] = useState(null);
   const [linePositions, setLinePositions] = useState(/* @__PURE__ */ new Map());
+  const [bandRects, setBandRects] = useState([]);
   const [selectedBar, setSelectedBar] = useState(null);
   const selectedBarRef = useRef(null);
   const [spotlightPosition, setSpotlightPosition] = useState(null);
@@ -346,11 +347,11 @@ function ChartComponent({
         vertLines: { color: "#1e293b" },
         horzLines: { color: "#1e293b" }
       },
-      // Render axis ticks + crosshair in the viewer's LOCAL timezone (lightweight-
-      // charts otherwise renders numeric times as UTC, which mismatches any
-      // local-time table/labels alongside the chart).
+      // Render axis ticks + crosshair in `timeZone` (default: the viewer's local
+      // timezone). lightweight-charts otherwise renders numeric times as UTC,
+      // which mismatches local/exchange-time labels alongside the chart.
       localization: {
-        timeFormatter: localCrosshairTimeFormatter
+        timeFormatter: makeCrosshairTimeFormatter(timeZone)
       },
       width: chartContainerRef.current.clientWidth,
       // Auto-fill the container's height unless an explicit `height` is given.
@@ -361,7 +362,7 @@ function ChartComponent({
         timeVisible: true,
         secondsVisible: true,
         borderColor: "#334155",
-        tickMarkFormatter: localTickMarkFormatter
+        tickMarkFormatter: makeTickMarkFormatter(timeZone)
       },
       rightPriceScale: {
         borderColor: "#334155"
@@ -523,6 +524,9 @@ function ChartComponent({
       container.removeEventListener("mouseup", handleMouseUp, true);
       container.removeEventListener("click", handleClick, true);
       chart.remove();
+      indicatorSeriesRef.current.clear();
+      indicatorPaneIndexRef.current.clear();
+      nextPaneIndexRef.current = 2;
     };
   }, []);
   useEffect(() => {
@@ -687,6 +691,36 @@ function ChartComponent({
       window.removeEventListener("resize", updatePositions);
     };
   }, [lines]);
+  useEffect(() => {
+    const series = candlestickSeriesRef.current;
+    if (!chartRef.current || !series) return;
+    if (priceBands.length === 0) {
+      setBandRects([]);
+      return;
+    }
+    const recompute = () => {
+      if (!candlestickSeriesRef.current) return;
+      const rects = [];
+      for (const band of priceBands) {
+        const yTop = candlestickSeriesRef.current.priceToCoordinate(band.top);
+        const yBottom = candlestickSeriesRef.current.priceToCoordinate(band.bottom);
+        if (yTop == null || yBottom == null) continue;
+        const top = Math.min(yTop, yBottom);
+        const height2 = Math.abs(yBottom - yTop);
+        rects.push({ id: band.id, top, height: height2, color: band.color });
+      }
+      setBandRects(rects);
+    };
+    const raf = requestAnimationFrame(recompute);
+    const timeScale = chartRef.current.timeScale();
+    timeScale.subscribeVisibleLogicalRangeChange(recompute);
+    window.addEventListener("resize", recompute);
+    return () => {
+      cancelAnimationFrame(raf);
+      chartRef.current?.timeScale().unsubscribeVisibleLogicalRangeChange(recompute);
+      window.removeEventListener("resize", recompute);
+    };
+  }, [priceBands]);
   useEffect(() => {
     if (!chartRef.current) return;
     indicatorSeriesRef.current.forEach((series) => {
@@ -714,7 +748,7 @@ function ChartComponent({
             lineWidth: indicator.settings.lineWidth || 2,
             title: indicator.name
           }, paneIndex);
-          const lineData = data.map((d) => ({ time: d.time, value: d.value }));
+          const lineData = data.map((d) => ({ time: d.time, value: d.value })).filter((d) => Number.isFinite(d.value));
           series.setData(lineData);
           indicatorSeriesRef.current.set(indicator.id, series);
         } else if (definition.renderConfig.hasBandFill && definition.renderConfig.fillBands) {
@@ -757,7 +791,7 @@ function ChartComponent({
           color: indicator.settings.color || "#8b5cf6",
           title: indicator.name
         }, paneIndex);
-        const histData = data.map((d) => ({ time: d.time, value: d.value }));
+        const histData = data.map((d) => ({ time: d.time, value: d.value })).filter((d) => Number.isFinite(d.value));
         series.setData(histData);
         indicatorSeriesRef.current.set(indicator.id, series);
       } else if (seriesType === "area") {
@@ -768,7 +802,7 @@ function ChartComponent({
           lineWidth: indicator.settings.lineWidth || 2,
           title: indicator.name
         }, paneIndex);
-        const areaData = data.map((d) => ({ time: d.time, value: d.value }));
+        const areaData = data.map((d) => ({ time: d.time, value: d.value })).filter((d) => Number.isFinite(d.value));
         series.setData(areaData);
         indicatorSeriesRef.current.set(indicator.id, series);
       }
@@ -784,7 +818,7 @@ function ChartComponent({
       if (definition.renderConfig.outputCount === 1) {
         const series = indicatorSeriesRef.current.get(indicator.id);
         if (series) {
-          const lineData = data.map((d) => ({ time: d.time, value: d.value }));
+          const lineData = data.map((d) => ({ time: d.time, value: d.value })).filter((d) => Number.isFinite(d.value));
           series.setData(lineData);
         }
       } else if (definition.renderConfig.hasBandFill && definition.renderConfig.fillBands) {
@@ -887,6 +921,14 @@ function ChartComponent({
     isLoadingMore && /* @__PURE__ */ jsx("div", { className: "absolute top-4 left-1/2 transform -translate-x-1/2 bg-slate-800 text-slate-200 px-4 py-2 rounded-lg shadow-lg z-10", children: "Loading more data..." }),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx("div", { ref: chartContainerRef, className: "w-full" }),
+      bandRects.map((b) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute left-0 right-0 pointer-events-none z-4",
+          style: { top: `${b.top}px`, height: `${b.height}px`, background: b.color }
+        },
+        b.id
+      )),
       enableBarSelection && spotlightPosition && /* @__PURE__ */ jsx(
         "div",
         {
@@ -1014,30 +1056,38 @@ function getLineStyle(style) {
       return LineStyle.Solid;
   }
 }
-var pad2 = (n) => String(n).padStart(2, "0");
-function localTickMarkFormatter(time, tickMarkType) {
-  const d = new Date(time * 1e3);
-  switch (tickMarkType) {
-    case 0:
-      return String(d.getFullYear());
-    case 1:
-      return d.toLocaleString(void 0, { month: "short" });
-    case 2:
-      return d.toLocaleString(void 0, { month: "short", day: "numeric" });
-    case 4:
-      return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
-    default:
-      return `${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
-  }
+function makeTickMarkFormatter(timeZone) {
+  const time = new Intl.DateTimeFormat("en-US", { timeZone, hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
+  const timeSec = new Intl.DateTimeFormat("en-US", { timeZone, hour: "2-digit", minute: "2-digit", second: "2-digit", hourCycle: "h23" });
+  const month = new Intl.DateTimeFormat("en-US", { timeZone, month: "short" });
+  const day = new Intl.DateTimeFormat("en-US", { timeZone, month: "short", day: "numeric" });
+  const year = new Intl.DateTimeFormat("en-US", { timeZone, year: "numeric" });
+  return (t, tickMarkType) => {
+    const d = new Date(t * 1e3);
+    switch (tickMarkType) {
+      case 0:
+        return year.format(d);
+      case 1:
+        return month.format(d);
+      case 2:
+        return day.format(d);
+      case 4:
+        return timeSec.format(d);
+      default:
+        return time.format(d);
+    }
+  };
 }
-function localCrosshairTimeFormatter(time) {
-  return new Date(time * 1e3).toLocaleString(void 0, {
+function makeCrosshairTimeFormatter(timeZone) {
+  const fmt = new Intl.DateTimeFormat("en-US", {
+    timeZone,
     month: "short",
     day: "2-digit",
     hour: "2-digit",
     minute: "2-digit",
-    hour12: false
+    hourCycle: "h23"
   });
+  return (t) => fmt.format(new Date(t * 1e3));
 }
 var IndicatorCategory = /* @__PURE__ */ ((IndicatorCategory2) => {
   IndicatorCategory2["TREND"] = "Trend";