@adrienhobbs/candlekit 0.2.1 → 0.2.3

package/dist/index.js

@@ -327,6 +327,8 @@ function ChartComponent({
   const mouseDownPosRef = useRef(null);
   const heightRef = useRef(height);
   heightRef.current = height;
+  const lineEditEnabledRef = useRef(false);
+  lineEditEnabledRef.current = Boolean(onAddLine || onClearAllLines);
   useEffect(() => {
     if (!chartContainerRef.current) return;
     chartContainerRef.current.style.position = "relative";
@@ -344,6 +346,12 @@ 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).
+      localization: {
+        timeFormatter: localCrosshairTimeFormatter
+      },
       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
@@ -352,7 +360,8 @@ function ChartComponent({
       timeScale: {
         timeVisible: true,
         secondsVisible: true,
-        borderColor: "#334155"
+        borderColor: "#334155",
+        tickMarkFormatter: localTickMarkFormatter
       },
       rightPriceScale: {
         borderColor: "#334155"
@@ -416,6 +425,7 @@ function ChartComponent({
     const resizeObserver = new ResizeObserver(handleResize);
     resizeObserver.observe(chartContainerRef.current);
     const handleContextMenu = (e) => {
+      if (!lineEditEnabledRef.current) return;
       e.preventDefault();
       e.stopPropagation();
       if (!candlestickSeriesRef.current) {
@@ -527,16 +537,37 @@ function ChartComponent({
     if (!chartRef.current || !focusTradeId) return;
     const trade = trades.find((t) => t.id === focusTradeId);
     if (!trade) return;
-    const entrySec = trade.entryTime / 1e3;
-    const exitSec = trade.exitTime / 1e3;
-    const sorted = [...bars].sort((a, b) => a.timestamp - b.timestamp);
-    const stepSec = sorted.length > 1 ? (sorted[sorted.length - 1].timestamp - sorted[0].timestamp) / 1e3 / (sorted.length - 1) : 300;
-    const pad = Math.max(exitSec - entrySec, stepSec * 12);
+    const seen = /* @__PURE__ */ new Set();
+    const series = [];
+    for (const b of [...bars].sort((a, b2) => a.timestamp - b2.timestamp)) {
+      if (seen.has(b.timestamp)) continue;
+      seen.add(b.timestamp);
+      series.push(b.timestamp);
+    }
+    if (series.length === 0) return;
+    const nearestIdx = (ms) => {
+      let lo = 0;
+      let hi = series.length - 1;
+      let idx = series.length - 1;
+      while (lo <= hi) {
+        const mid = lo + hi >> 1;
+        if (series[mid] >= ms) {
+          idx = mid;
+          hi = mid - 1;
+        } else {
+          lo = mid + 1;
+        }
+      }
+      return idx;
+    };
+    const entryIdx = nearestIdx(trade.entryTime);
+    const exitIdx = Math.max(entryIdx, nearestIdx(trade.exitTime));
+    const PAD = 15;
     const raf = requestAnimationFrame(() => {
       try {
-        chartRef.current?.timeScale().setVisibleRange({
-          from: entrySec - pad,
-          to: exitSec + pad
+        chartRef.current?.timeScale().setVisibleLogicalRange({
+          from: entryIdx - PAD,
+          to: exitIdx + PAD
         });
       } catch {
       }
@@ -878,7 +909,7 @@ function ChartComponent({
         }
       )
     ] }),
-    chartContainerRef.current && lines.map((line) => {
+    onDeleteLine && chartContainerRef.current && lines.map((line) => {
       const pos = linePositions.get(line.id);
       if (!pos) return null;
       return createPortal(
@@ -983,6 +1014,31 @@ 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 localCrosshairTimeFormatter(time) {
+  return new Date(time * 1e3).toLocaleString(void 0, {
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false
+  });
+}
 var IndicatorCategory = /* @__PURE__ */ ((IndicatorCategory2) => {
   IndicatorCategory2["TREND"] = "Trend";
   IndicatorCategory2["MOMENTUM"] = "Momentum";