@adrienhobbs/candlekit 0.2.2 → 0.2.4

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,6 +347,12 @@ function ChartComponent({
         vertLines: { color: "#1e293b" },
         horzLines: { color: "#1e293b" }
       },
+      // 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: makeCrosshairTimeFormatter(timeZone)
+      },
       width: chartContainerRef.current.clientWidth,
       // Auto-fill the container's height unless an explicit `height` is given.
       // Fall back to 600 only when the container hasn't been laid out yet (a
@@ -354,7 +361,8 @@ function ChartComponent({
       timeScale: {
         timeVisible: true,
         secondsVisible: true,
-        borderColor: "#334155"
+        borderColor: "#334155",
+        tickMarkFormatter: makeTickMarkFormatter(timeZone)
       },
       rightPriceScale: {
         borderColor: "#334155"
@@ -680,6 +688,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) => {
@@ -880,6 +918,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",
         {
@@ -1007,6 +1053,39 @@ function getLineStyle(style) {
       return LineStyle.Solid;
   }
 }
+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 makeCrosshairTimeFormatter(timeZone) {
+  const fmt = new Intl.DateTimeFormat("en-US", {
+    timeZone,
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hourCycle: "h23"
+  });
+  return (t) => fmt.format(new Date(t * 1e3));
+}
 var IndicatorCategory = /* @__PURE__ */ ((IndicatorCategory2) => {
   IndicatorCategory2["TREND"] = "Trend";
   IndicatorCategory2["MOMENTUM"] = "Momentum";