aliencharts 0.1.1 → 0.1.3

package/dist/index.js

@@ -309,7 +309,8 @@ function ChartToolbar({
   activeDrawingTool = null,
   onDrawingToolToggle,
   hasDrawings = false,
-  onClearDrawingsRequest
+  onClearDrawingsRequest,
+  disableDrawings = false
 }) {
   return /* @__PURE__ */ React.createElement("div", { className: "absolute left-2 top-12 z-30 flex flex-col gap-0.5 rounded-sm bg-background/80 p-0 pr-3 text-foreground shadow-sm backdrop-blur" }, /* @__PURE__ */ React.createElement(
     ToolbarAction,
@@ -328,7 +329,7 @@ function ChartToolbar({
       active: rectangleZoomActive
     },
     /* @__PURE__ */ React.createElement(MagnifyingGlassPlusIcon, { size: 16, weight: "bold" })
-  ), hasDrawings ? /* @__PURE__ */ React.createElement(
+  ), !disableDrawings && hasDrawings ? /* @__PURE__ */ React.createElement(
     ToolbarAction,
     {
       title: "Clear drawings",
@@ -336,7 +337,7 @@ function ChartToolbar({
       onClick: onClearDrawingsRequest
     },
     /* @__PURE__ */ React.createElement(BroomIcon, { size: 16, weight: "bold" })
-  ) : null, /* @__PURE__ */ React.createElement("div", { className: "my-1 h-px w-full" }), /* @__PURE__ */ React.createElement(
+  ) : null, !disableDrawings ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "my-1 h-px w-full" }), /* @__PURE__ */ React.createElement(
     ToolbarAction,
     {
       title: "Draw trendline",
@@ -372,7 +373,7 @@ function ChartToolbar({
       active: activeDrawingTool === "pin"
     },
     /* @__PURE__ */ React.createElement(MapPinIcon, { size: 16, weight: "bold" })
-  ), /* @__PURE__ */ React.createElement(
+  )) : null, !disableDrawings ? /* @__PURE__ */ React.createElement(
     ToolbarAction,
     {
       title: "Toggle moving average",
@@ -381,7 +382,7 @@ function ChartToolbar({
       active: movingAverageActive
     },
     /* @__PURE__ */ React.createElement(WaveSineIcon, { size: 16, weight: "bold" })
-  ));
+  ) : null);
 }
 
 // src/react/DrawingOptionsToolbar.jsx
@@ -1739,6 +1740,11 @@ var getYRange = (chart, xMin, xMax, width) => {
   if (!Number.isFinite(minY) || !Number.isFinite(maxY)) {
     return { minY: 0, maxY: 1, renderedPoints, bucketSize };
   }
+  const fixedMinY = Number(chart.yRange?.min);
+  const fixedMaxY = Number(chart.yRange?.max);
+  if (Number.isFinite(fixedMinY) && Number.isFinite(fixedMaxY) && fixedMinY < fixedMaxY) {
+    return { minY: fixedMinY, maxY: fixedMaxY, renderedPoints, bucketSize };
+  }
   if (minY === maxY) {
     minY -= 1;
     maxY += 1;
@@ -1988,9 +1994,12 @@ function ChartCell({
   onDrawingToolToggle,
   hasDrawings = false,
   onClearDrawingsRequest,
+  disableDrawings = false,
   height = CHART_HEIGHT,
   isFullscreen = false,
-  backgroundColor = DEFAULT_CHART_BACKGROUND
+  backgroundColor = DEFAULT_CHART_BACKGROUND,
+  formatXTick = formatCompactNumber,
+  formatYValue = formatNumber
 }) {
   const headerBackground = withAlpha(backgroundColor, 0.82);
   const controlBackground = withAlpha(backgroundColor, 0.78);
@@ -2067,7 +2076,8 @@ function ChartCell({
         activeDrawingTool,
         onDrawingToolToggle,
         hasDrawings,
-        onClearDrawingsRequest: () => onClearDrawingsRequest?.(chart.id)
+        onClearDrawingsRequest: () => onClearDrawingsRequest?.(chart.id),
+        disableDrawings
       }
     ) : null,
     /* @__PURE__ */ React5.createElement("div", { className: "pointer-events-none absolute inset-y-8 left-9 border-l border-border/40" }),
@@ -2106,7 +2116,7 @@ function ChartCell({
           className: "pointer-events-none absolute left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-[11px] font-medium tabular-nums text-foreground/70 dark:text-foreground/80",
           style: { top: tick.top }
         },
-        formatNumber(tick.value)
+        formatYValue(tick.value)
       )),
       axisOverlay?.latestValues.map((latest) => /* @__PURE__ */ React5.createElement(
         "div",
@@ -2119,7 +2129,7 @@ function ChartCell({
             color: latest.textColor
           }
         },
-        formatNumber(latest.value)
+        formatYValue(latest.value)
       ))
     ),
     /* @__PURE__ */ React5.createElement(
@@ -2141,7 +2151,7 @@ function ChartCell({
           className: "pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-[11px] font-medium tabular-nums text-foreground/70 dark:text-foreground/80",
           style: { left: tick.left }
         },
-        formatCompactNumber(tick.value)
+        formatXTick(tick.value)
       ))
     )
   );
@@ -2149,7 +2159,9 @@ function ChartCell({
 function CrosshairOverlay({
   crosshair,
   height = "100%",
-  xAxisLabel = "STEP"
+  xAxisLabel = "STEP",
+  formatXValue = formatNumber,
+  formatYValue = formatNumber
 }) {
   if (!crosshair) return null;
   return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(
@@ -2188,7 +2200,7 @@ function CrosshairOverlay({
         top: crosshair.tooltipY
       }
     },
-    /* @__PURE__ */ React5.createElement("div", { className: "mb-1 font-medium" }, xAxisLabel, ": ", formatNumber(crosshair.xValue)),
+    /* @__PURE__ */ React5.createElement("div", { className: "mb-1 font-medium" }, xAxisLabel, ": ", formatXValue(crosshair.xValue)),
     crosshair.points.map((point) => /* @__PURE__ */ React5.createElement(
       "div",
       {
@@ -2202,7 +2214,7 @@ function CrosshairOverlay({
           style: { backgroundColor: point.color }
         }
       ),
-      /* @__PURE__ */ React5.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React5.createElement("div", { className: "truncate text-muted-foreground" }, point.name), /* @__PURE__ */ React5.createElement("div", { className: "tabular-nums" }, formatNumber(point.yValue)))
+      /* @__PURE__ */ React5.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React5.createElement("div", { className: "truncate text-muted-foreground" }, point.name), /* @__PURE__ */ React5.createElement("div", { className: "tabular-nums" }, formatYValue(point.yValue)))
     ))
   ));
 }
@@ -2581,7 +2593,7 @@ var drawChartLayouts = ({
   }
   return nextAxisOverlays;
 };
-function LeanChartFullscreenOverlay({
+function ChartFullscreenOverlay({
   chart,
   dataRevision,
   renderRevision,
@@ -2612,7 +2624,11 @@ function LeanChartFullscreenOverlay({
   onClearDrawingsRequest,
   onChartContextMenu,
   topMarkers = EMPTY_ARRAY,
-  onTopMarkerClick
+  onTopMarkerClick,
+  disableDrawings = false,
+  formatXTick = formatCompactNumber,
+  formatXValue = formatNumber,
+  formatYValue = formatNumber
 }) {
   const containerRef = useRef4(null);
   const chartRef = useRef4(null);
@@ -2632,6 +2648,9 @@ function LeanChartFullscreenOverlay({
   const [visible, setVisible] = useState2(false);
   const [rectangleZoomActive, setRectangleZoomActive] = useState2(false);
   const [rectangleZoomRect, setRectangleZoomRect] = useState2(null);
+  const chartDrawings = disableDrawings ? EMPTY_ARRAY : drawings;
+  const chartActiveDrawingTool = disableDrawings ? null : activeDrawingTool;
+  const chartSelectedDrawingId = disableDrawings ? null : selectedDrawingId;
   const requestRender = useCallback3(() => {
     setRevision((value) => value + 1);
   }, []);
@@ -2653,11 +2672,11 @@ function LeanChartFullscreenOverlay({
     finishEditDrawing,
     deleteSelectedDrawing
   } = useDrawingInteractions({
-    drawings,
-    onDrawingsChange,
-    activeDrawingTool,
+    drawings: chartDrawings,
+    onDrawingsChange: disableDrawings ? void 0 : onDrawingsChange,
+    activeDrawingTool: chartActiveDrawingTool,
     onActiveDrawingToolChange,
-    selectedDrawingId,
+    selectedDrawingId: chartSelectedDrawingId,
     onSelectedDrawingIdChange,
     createDrawingId,
     onModeChange: () => {
@@ -2674,9 +2693,9 @@ function LeanChartFullscreenOverlay({
     onActiveDrawingToolChange?.(null);
   }, [clearDraft, onActiveDrawingToolChange]);
   const toggleSelectedDrawingExtend = useCallback3(() => {
-    if (!selectedDrawingId || !onDrawingsChange) return;
+    if (disableDrawings || !chartSelectedDrawingId || !onDrawingsChange) return;
     onDrawingsChange(
-      updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+      updateDrawingById(chartDrawings, chartSelectedDrawingId, (drawing) => ({
         ...drawing,
         style: {
           ...drawing.style,
@@ -2684,12 +2703,12 @@ function LeanChartFullscreenOverlay({
         }
       }))
     );
-  }, [drawings, onDrawingsChange, selectedDrawingId]);
+  }, [chartDrawings, chartSelectedDrawingId, disableDrawings, onDrawingsChange]);
   const updateSelectedDrawingColor = useCallback3(
     (color) => {
-      if (!selectedDrawingId || !onDrawingsChange) return;
+      if (disableDrawings || !chartSelectedDrawingId || !onDrawingsChange) return;
       onDrawingsChange(
-        updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+        updateDrawingById(chartDrawings, chartSelectedDrawingId, (drawing) => ({
           ...drawing,
           style: {
             ...drawing.style,
@@ -2698,13 +2717,13 @@ function LeanChartFullscreenOverlay({
         }))
       );
     },
-    [drawings, onDrawingsChange, selectedDrawingId]
+    [chartDrawings, chartSelectedDrawingId, disableDrawings, onDrawingsChange]
   );
   const updateSelectedDrawingText = useCallback3(
     (text) => {
-      if (!selectedDrawingId || !onDrawingsChange) return;
+      if (disableDrawings || !chartSelectedDrawingId || !onDrawingsChange) return;
       onDrawingsChange(
-        updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+        updateDrawingById(chartDrawings, chartSelectedDrawingId, (drawing) => ({
           ...drawing,
           style: {
             ...drawing.style,
@@ -2713,7 +2732,7 @@ function LeanChartFullscreenOverlay({
         }))
       );
     },
-    [drawings, onDrawingsChange, selectedDrawingId]
+    [chartDrawings, chartSelectedDrawingId, disableDrawings, onDrawingsChange]
   );
   useEffect3(() => {
     const frame = requestAnimationFrame(() => setVisible(true));
@@ -2912,7 +2931,7 @@ function LeanChartFullscreenOverlay({
       const layout = getLayout();
       if (!point || !layout) return;
       const inPlot = point.x >= layout.plot.x && point.x <= layout.plot.x + layout.plot.width && point.y >= layout.plot.y && point.y <= layout.plot.y + layout.plot.height;
-      if (activeDrawingTool && DRAWING_TOOLS.has(activeDrawingTool)) {
+      if (chartActiveDrawingTool && DRAWING_TOOLS.has(chartActiveDrawingTool)) {
         if (!inPlot || event.button !== 0) return;
         event.preventDefault();
         const dataPoint = screenPointToDataPoint({
@@ -2924,10 +2943,10 @@ function LeanChartFullscreenOverlay({
           yScaleRef,
           yCenterOffsetRef
         });
-        if (activeDrawingTool === "hline" || activeDrawingTool === "vline" || activeDrawingTool === "pin") {
+        if (chartActiveDrawingTool === "hline" || chartActiveDrawingTool === "vline" || chartActiveDrawingTool === "pin") {
           commitDrawing({
             chartId: chart.id,
-            type: activeDrawingTool,
+            type: chartActiveDrawingTool,
             start: dataPoint,
             end: dataPoint
           });
@@ -2950,12 +2969,12 @@ function LeanChartFullscreenOverlay({
         });
         return;
       }
-      if (inPlot && Array.isArray(drawings) && drawings.length > 0) {
-        const chartDrawings = getDrawingsForChart(drawings, chart.id);
-        for (let i = chartDrawings.length - 1; i >= 0; i -= 1) {
+      if (inPlot && Array.isArray(chartDrawings) && chartDrawings.length > 0) {
+        const hitDrawings = getDrawingsForChart(chartDrawings, chart.id);
+        for (let i = hitDrawings.length - 1; i >= 0; i -= 1) {
           const hit = hitTestDrawing({
             point,
-            drawing: chartDrawings[i],
+            drawing: hitDrawings[i],
             layout,
             projectPoint: (dataPoint, targetLayout) => projectDataPointToScreenPoint({
               point: dataPoint,
@@ -3046,10 +3065,9 @@ function LeanChartFullscreenOverlay({
       getLayout,
       getLocalPoint,
       initialVisiblePoints,
-      activeDrawingTool,
-      chart,
+      chartActiveDrawingTool,
+      chartDrawings,
       commitDrawing,
-      drawings,
       onSelectedDrawingIdChange,
       rectangleZoomActive,
       viewStateRef,
@@ -3075,7 +3093,7 @@ function LeanChartFullscreenOverlay({
             yCenterOffsetRef
           });
           const edit = drawingEditRef.current;
-          const nextDrawings = updateDrawingById(drawings, edit.id, (drawing) => {
+          const nextDrawings = updateDrawingById(chartDrawings, edit.id, (drawing) => {
             if (drawing.type === "hline") {
               const deltaX = (drawing.end?.x ?? drawing.start.x) - drawing.start.x;
               return {
@@ -3102,7 +3120,7 @@ function LeanChartFullscreenOverlay({
           onDrawingsChange?.(nextDrawings);
           return;
         }
-        if (activeDrawingTool && DRAWING_TOOLS.has(activeDrawingTool)) {
+        if (chartActiveDrawingTool && DRAWING_TOOLS.has(chartActiveDrawingTool)) {
           if (drawingPoint.x < drawingLayout.plot.x || drawingPoint.x > drawingLayout.plot.x + drawingLayout.plot.width || drawingPoint.y < drawingLayout.plot.y || drawingPoint.y > drawingLayout.plot.y + drawingLayout.plot.height) {
             return;
           }
@@ -3115,11 +3133,11 @@ function LeanChartFullscreenOverlay({
             yScaleRef,
             yCenterOffsetRef
           });
-          const startPoint = activeDrawingTool === "trendline" ? drawingSessionRef.current.startPoint : dataPoint;
-          if (startPoint || activeDrawingTool !== "trendline") {
+          const startPoint = chartActiveDrawingTool === "trendline" ? drawingSessionRef.current.startPoint : dataPoint;
+          if (startPoint || chartActiveDrawingTool !== "trendline") {
             updateDraftDrawing({
               chartId: chart.id,
-              type: activeDrawingTool,
+              type: chartActiveDrawingTool,
               start: startPoint || dataPoint,
               end: dataPoint
             });
@@ -3192,8 +3210,8 @@ function LeanChartFullscreenOverlay({
     [
       chart.id,
       chart,
-      activeDrawingTool,
-      drawings,
+      chartActiveDrawingTool,
+      chartDrawings,
       getLayout,
       getLocalPoint,
       initialVisiblePoints,
@@ -3356,27 +3374,27 @@ function LeanChartFullscreenOverlay({
         toggleRectangleZoom();
         return;
       }
-      if (event.key.toLowerCase() === "m") {
+      if (!disableDrawings && event.key.toLowerCase() === "m") {
         event.preventDefault();
         onMovingAverageToggle?.(chart.id);
         requestRender();
         return;
       }
-      if (["t", "h", "v", "p"].includes(event.key.toLowerCase())) {
+      if (!disableDrawings && ["t", "h", "v", "p"].includes(event.key.toLowerCase())) {
         event.preventDefault();
         const toolByKey = { t: "trendline", h: "hline", v: "vline", p: "pin" };
         toggleDrawingTool(toolByKey[event.key.toLowerCase()]);
         return;
       }
       if (event.key === "Delete" || event.key === "Backspace") {
-        if (!selectedDrawingId) return;
+        if (disableDrawings || !chartSelectedDrawingId) return;
         event.preventDefault();
         deleteSelectedDrawing();
         return;
       }
       if (event.key === "Escape" || event.key.toLowerCase() === "f") {
         event.preventDefault();
-        if (activeDrawingTool || draftDrawing || drawingEditRef.current) {
+        if (chartActiveDrawingTool || draftDrawing || drawingEditRef.current) {
           cancelDrawing();
           return;
         }
@@ -3394,23 +3412,24 @@ function LeanChartFullscreenOverlay({
   }, [
     chart.id,
     closeWithTransition,
-    activeDrawingTool,
+    chartActiveDrawingTool,
+    chartSelectedDrawingId,
     cancelDrawing,
     deleteSelectedDrawing,
+    disableDrawings,
     draftDrawing,
     onReset,
     onMovingAverageToggle,
     rectangleZoomActive,
     requestRender,
     toggleRectangleZoom,
-    toggleDrawingTool,
-    selectedDrawingId
+    toggleDrawingTool
   ]);
   const fullscreenLayout = getLayout();
   const selectedDrawingLayout = getSelectedDrawingLayout(
     fullscreenLayout ? [fullscreenLayout] : [],
-    drawings,
-    selectedDrawingId
+    chartDrawings,
+    chartSelectedDrawingId
   );
   return /* @__PURE__ */ React5.createElement(
     "div",
@@ -3423,7 +3442,7 @@ function LeanChartFullscreenOverlay({
         ref: containerRef,
         className: `relative h-full overflow-hidden transition-transform duration-150 ${visible ? "scale-100" : "scale-[0.985]"}`,
         style: {
-          cursor: rectangleZoomActive || activeDrawingTool ? "crosshair" : void 0
+          cursor: rectangleZoomActive || chartActiveDrawingTool ? "crosshair" : void 0
         },
         onPointerDown: handlePointerDown,
         onPointerMove: handlePointerMove,
@@ -3456,12 +3475,15 @@ function LeanChartFullscreenOverlay({
           onJumpLatest,
           onRectangleZoomToggle: toggleRectangleZoom,
           rectangleZoomActive,
-          movingAverage: movingAverageByChart?.[chart.id],
+          movingAverage: disableDrawings ? null : movingAverageByChart?.[chart.id],
           onMovingAverageToggle,
-          activeDrawingTool,
+          activeDrawingTool: chartActiveDrawingTool,
           onDrawingToolToggle: toggleDrawingTool,
-          hasDrawings: getDrawingsForChart(drawings, chart.id).length > 0,
+          hasDrawings: getDrawingsForChart(chartDrawings, chart.id).length > 0,
           onClearDrawingsRequest,
+          disableDrawings,
+          formatXTick,
+          formatYValue,
           setRef: (node) => {
             chartRef.current = node;
           }
@@ -3471,9 +3493,9 @@ function LeanChartFullscreenOverlay({
         DrawingOverlay,
         {
           layouts: fullscreenLayout ? [fullscreenLayout] : [],
-          drawings,
-          draftDrawing,
-          selectedDrawingId,
+          drawings: chartDrawings,
+          draftDrawing: disableDrawings ? null : draftDrawing,
+          selectedDrawingId: chartSelectedDrawingId,
           projectPoint: (dataPoint, targetLayout) => projectDataPointToScreenPoint({
             point: dataPoint,
             layout: targetLayout,
@@ -3511,7 +3533,7 @@ function LeanChartFullscreenOverlay({
           onTextChange: updateSelectedDrawingText
         }
       ) : null,
-      fullscreenLayout && movingAverageByChart?.[chart.id]?.enabled ? /* @__PURE__ */ React5.createElement(
+      !disableDrawings && fullscreenLayout && movingAverageByChart?.[chart.id]?.enabled ? /* @__PURE__ */ React5.createElement(
         MovingAverageOptionsToolbar,
         {
           movingAverage: movingAverageByChart[chart.id],
@@ -3524,7 +3546,9 @@ function LeanChartFullscreenOverlay({
         {
           crosshair,
           height: "100%",
-          xAxisLabel
+          xAxisLabel,
+          formatXValue,
+          formatYValue
         }
       ),
       /* @__PURE__ */ React5.createElement(RectangleZoomOverlay, { rect: rectangleZoomRect })
@@ -3557,7 +3581,11 @@ function ChartGrid({
   seriesOrderByChart = EMPTY_OBJECT,
   topMarkers = EMPTY_ARRAY,
   onTopMarkerClick,
-  xAxisLabel = "STEP"
+  xAxisLabel = "STEP",
+  disableDrawings = false,
+  formatXTick = formatCompactNumber,
+  formatXValue = formatNumber,
+  formatYValue = formatNumber
 }) {
   const containerRef = useRef4(null);
   const gridRef = useRef4(null);
@@ -3585,6 +3613,9 @@ function ChartGrid({
   const [fullscreenChartId, setFullscreenChartId] = useState2(null);
   const [rectangleZoomChartId, setRectangleZoomChartId] = useState2(null);
   const [rectangleZoomRect, setRectangleZoomRect] = useState2(null);
+  const chartDrawings = disableDrawings ? EMPTY_ARRAY : drawings;
+  const chartActiveDrawingTool = disableDrawings ? null : activeDrawingTool;
+  const chartSelectedDrawingId = disableDrawings ? null : selectedDrawingId;
   const requestRender = useCallback3(() => {
     setRevision((value) => value + 1);
   }, []);
@@ -3602,11 +3633,11 @@ function ChartGrid({
     finishEditDrawing,
     deleteSelectedDrawing
   } = useDrawingInteractions({
-    drawings,
-    onDrawingsChange,
-    activeDrawingTool,
+    drawings: chartDrawings,
+    onDrawingsChange: disableDrawings ? void 0 : onDrawingsChange,
+    activeDrawingTool: chartActiveDrawingTool,
     onActiveDrawingToolChange,
-    selectedDrawingId,
+    selectedDrawingId: chartSelectedDrawingId,
     onSelectedDrawingIdChange,
     createDrawingId,
     focusedChartId,
@@ -3660,9 +3691,9 @@ function ChartGrid({
     ]
   );
   const toggleSelectedDrawingExtend = useCallback3(() => {
-    if (!selectedDrawingId || !onDrawingsChange) return;
+    if (disableDrawings || !chartSelectedDrawingId || !onDrawingsChange) return;
     onDrawingsChange(
-      updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+      updateDrawingById(chartDrawings, chartSelectedDrawingId, (drawing) => ({
         ...drawing,
         style: {
           ...drawing.style,
@@ -3670,12 +3701,12 @@ function ChartGrid({
         }
       }))
     );
-  }, [drawings, onDrawingsChange, selectedDrawingId]);
+  }, [chartDrawings, chartSelectedDrawingId, disableDrawings, onDrawingsChange]);
   const updateSelectedDrawingColor = useCallback3(
     (color) => {
-      if (!selectedDrawingId || !onDrawingsChange) return;
+      if (disableDrawings || !chartSelectedDrawingId || !onDrawingsChange) return;
       onDrawingsChange(
-        updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+        updateDrawingById(chartDrawings, chartSelectedDrawingId, (drawing) => ({
           ...drawing,
           style: {
             ...drawing.style,
@@ -3684,13 +3715,13 @@ function ChartGrid({
         }))
       );
     },
-    [drawings, onDrawingsChange, selectedDrawingId]
+    [chartDrawings, chartSelectedDrawingId, disableDrawings, onDrawingsChange]
   );
   const updateSelectedDrawingText = useCallback3(
     (text) => {
-      if (!selectedDrawingId || !onDrawingsChange) return;
+      if (disableDrawings || !chartSelectedDrawingId || !onDrawingsChange) return;
       onDrawingsChange(
-        updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+        updateDrawingById(chartDrawings, chartSelectedDrawingId, (drawing) => ({
           ...drawing,
           style: {
             ...drawing.style,
@@ -3699,7 +3730,7 @@ function ChartGrid({
         }))
       );
     },
-    [drawings, onDrawingsChange, selectedDrawingId]
+    [chartDrawings, chartSelectedDrawingId, disableDrawings, onDrawingsChange]
   );
   const { getAppendAnimatedPoint } = useAppendAnimations({
     charts,
@@ -4151,7 +4182,7 @@ function ChartGrid({
       const point = getLocalPoint(event);
       if (!point) return;
       const drawingLayout = findLayoutAt(point.x, point.y);
-      if (drawingLayout && activeDrawingTool && DRAWING_TOOLS.has(activeDrawingTool)) {
+      if (drawingLayout && chartActiveDrawingTool && DRAWING_TOOLS.has(chartActiveDrawingTool)) {
         if (event.button !== 0) return;
         event.preventDefault();
         setFocusedChartId(drawingLayout.chart.id);
@@ -4164,10 +4195,10 @@ function ChartGrid({
           yScaleRef,
           yCenterOffsetRef
         });
-        if (activeDrawingTool === "hline" || activeDrawingTool === "vline" || activeDrawingTool === "pin") {
+        if (chartActiveDrawingTool === "hline" || chartActiveDrawingTool === "vline" || chartActiveDrawingTool === "pin") {
           commitDrawing({
             chartId: drawingLayout.chart.id,
-            type: activeDrawingTool,
+            type: chartActiveDrawingTool,
             start: dataPoint,
             end: dataPoint
           });
@@ -4191,15 +4222,15 @@ function ChartGrid({
         });
         return;
       }
-      if (drawingLayout && Array.isArray(drawings) && drawings.length > 0) {
-        const chartDrawings = getDrawingsForChart(
-          drawings,
+      if (drawingLayout && Array.isArray(chartDrawings) && chartDrawings.length > 0) {
+        const hitDrawings = getDrawingsForChart(
+          chartDrawings,
           drawingLayout.chart.id
         );
-        for (let i = chartDrawings.length - 1; i >= 0; i -= 1) {
+        for (let i = hitDrawings.length - 1; i >= 0; i -= 1) {
           const hit = hitTestDrawing({
             point,
-            drawing: chartDrawings[i],
+            drawing: hitDrawings[i],
             layout: drawingLayout,
             projectPoint: (dataPoint, targetLayout) => projectDataPointToScreenPoint({
               point: dataPoint,
@@ -4305,9 +4336,9 @@ function ChartGrid({
       initialVisiblePoints,
       fullscreenChartId,
       rectangleZoomChartId,
-      activeDrawingTool,
+      chartActiveDrawingTool,
+      chartDrawings,
       commitDrawing,
-      drawings,
       onSelectedDrawingIdChange
     ]
   );
@@ -4319,7 +4350,7 @@ function ChartGrid({
       if (drawingPoint) {
         if (drawingEditRef.current) {
           const editLayout = getChartLayout().find(
-            (layout) => getDrawingsForChart(drawings, layout.chart.id).some(
+            (layout) => getDrawingsForChart(chartDrawings, layout.chart.id).some(
               (drawing) => drawing.id === drawingEditRef.current.id
             )
           );
@@ -4334,7 +4365,7 @@ function ChartGrid({
               yCenterOffsetRef
             });
             const edit = drawingEditRef.current;
-            const nextDrawings = updateDrawingById(drawings, edit.id, (drawing) => {
+            const nextDrawings = updateDrawingById(chartDrawings, edit.id, (drawing) => {
               if (drawing.type === "hline") {
                 const deltaX = (drawing.end?.x ?? drawing.start.x) - drawing.start.x;
                 return {
@@ -4362,7 +4393,7 @@ function ChartGrid({
           }
           return;
         }
-        if (activeDrawingTool && DRAWING_TOOLS.has(activeDrawingTool)) {
+        if (chartActiveDrawingTool && DRAWING_TOOLS.has(chartActiveDrawingTool)) {
           const drawingLayout = findLayoutAt(drawingPoint.x, drawingPoint.y);
           if (!drawingLayout) return;
           const dataPoint = screenPointToDataPoint({
@@ -4375,11 +4406,11 @@ function ChartGrid({
             yCenterOffsetRef
           });
           const session = drawingSessionRef.current;
-          const startPoint = activeDrawingTool === "trendline" && session.chartId === drawingLayout.chart.id ? session.startPoint : dataPoint;
-          if (startPoint || activeDrawingTool !== "trendline") {
+          const startPoint = chartActiveDrawingTool === "trendline" && session.chartId === drawingLayout.chart.id ? session.startPoint : dataPoint;
+          if (startPoint || chartActiveDrawingTool !== "trendline") {
             updateDraftDrawing({
               chartId: drawingLayout.chart.id,
-              type: activeDrawingTool,
+              type: chartActiveDrawingTool,
               start: startPoint || dataPoint,
               end: dataPoint
             });
@@ -4452,8 +4483,8 @@ function ChartGrid({
     },
     [
       fullscreenChartId,
-      activeDrawingTool,
-      drawings,
+      chartActiveDrawingTool,
+      chartDrawings,
       findLayoutAt,
       getChartLayout,
       getLocalPoint,
@@ -4658,24 +4689,24 @@ function ChartGrid({
         toggleRectangleZoom(focusedChartId);
         return;
       }
-      if (event.key.toLowerCase() === "m") {
+      if (!disableDrawings && event.key.toLowerCase() === "m") {
         event.preventDefault();
         toggleMovingAverage(focusedChartId);
         return;
       }
-      if (["t", "h", "v", "p"].includes(event.key.toLowerCase())) {
+      if (!disableDrawings && ["t", "h", "v", "p"].includes(event.key.toLowerCase())) {
         event.preventDefault();
         const toolByKey = { t: "trendline", h: "hline", v: "vline", p: "pin" };
         toggleDrawingTool(toolByKey[event.key.toLowerCase()]);
         return;
       }
       if (event.key === "Delete" || event.key === "Backspace") {
-        if (!selectedDrawingId) return;
+        if (disableDrawings || !chartSelectedDrawingId) return;
         event.preventDefault();
         deleteSelectedDrawing();
         return;
       }
-      if (event.key === "Escape" && (activeDrawingTool || draftDrawing || drawingEditRef.current)) {
+      if (event.key === "Escape" && (chartActiveDrawingTool || draftDrawing || drawingEditRef.current)) {
         event.preventDefault();
         cancelDrawing();
         return;
@@ -4698,15 +4729,16 @@ function ChartGrid({
   }, [
     focusedChartId,
     fullscreenChartId,
-    activeDrawingTool,
+    chartActiveDrawingTool,
+    chartSelectedDrawingId,
     cancelDrawing,
     deleteSelectedDrawing,
+    disableDrawings,
     draftDrawing,
     focusChartByKeyboard,
     openFullscreen,
     rectangleZoomChartId,
     resetChartView,
-    selectedDrawingId,
     toggleMovingAverage,
     toggleDrawingTool,
     toggleRectangleZoom
@@ -4715,8 +4747,8 @@ function ChartGrid({
   const chartLayouts = fullscreenChart ? [] : getChartLayout();
   const selectedDrawingLayout = getSelectedDrawingLayout(
     chartLayouts,
-    drawings,
-    selectedDrawingId
+    chartDrawings,
+    chartSelectedDrawingId
   );
   return /* @__PURE__ */ React5.createElement(
     "div",
@@ -4724,7 +4756,7 @@ function ChartGrid({
       ref: containerRef,
       className: `aliencharts-root relative h-full overflow-y-auto ${className}`,
       style: {
-        cursor: rectangleZoomChartId || activeDrawingTool ? "crosshair" : void 0
+        cursor: rectangleZoomChartId || chartActiveDrawingTool ? "crosshair" : void 0
       },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
@@ -4766,12 +4798,15 @@ function ChartGrid({
           onJumpLatest: jumpChartToLatest,
           onRectangleZoomToggle: toggleRectangleZoom,
           rectangleZoomActive: rectangleZoomChartId === chart.id,
-          movingAverage: movingAverageByChart?.[chart.id],
+          movingAverage: disableDrawings ? null : movingAverageByChart?.[chart.id],
           onMovingAverageToggle: toggleMovingAverage,
-          activeDrawingTool: focusedChartId === chart.id ? activeDrawingTool : null,
+          activeDrawingTool: focusedChartId === chart.id ? chartActiveDrawingTool : null,
           onDrawingToolToggle: toggleDrawingTool,
-          hasDrawings: getDrawingsForChart(drawings, chart.id).length > 0,
+          hasDrawings: getDrawingsForChart(chartDrawings, chart.id).length > 0,
           onClearDrawingsRequest,
+          disableDrawings,
+          formatXTick,
+          formatYValue,
           setRef: (node) => {
             if (node) chartRefs.current.set(chart.id, node);
             else chartRefs.current.delete(chart.id);
@@ -4784,16 +4819,18 @@ function ChartGrid({
       {
         crosshair: fullscreenChart ? null : crosshair,
         height: containerRef.current?.scrollHeight ?? "100%",
-        xAxisLabel
+        xAxisLabel,
+        formatXValue,
+        formatYValue
       }
     ),
     /* @__PURE__ */ React5.createElement(
       DrawingOverlay,
       {
         layouts: chartLayouts,
-        drawings,
-        draftDrawing: fullscreenChart ? null : draftDrawing,
-        selectedDrawingId,
+        drawings: chartDrawings,
+        draftDrawing: fullscreenChart || disableDrawings ? null : draftDrawing,
+        selectedDrawingId: chartSelectedDrawingId,
         projectPoint: (dataPoint, targetLayout) => projectDataPointToScreenPoint({
           point: dataPoint,
           layout: targetLayout,
@@ -4826,7 +4863,7 @@ function ChartGrid({
         onTextChange: updateSelectedDrawingText
       }
     ) : null,
-    !fullscreenChart && focusedChartId && movingAverageByChart?.[focusedChartId]?.enabled ? (() => {
+    !disableDrawings && !fullscreenChart && focusedChartId && movingAverageByChart?.[focusedChartId]?.enabled ? (() => {
       const layout = chartLayouts.find(
         (candidate) => candidate.chart.id === focusedChartId
       );
@@ -4842,7 +4879,7 @@ function ChartGrid({
     })() : null,
     /* @__PURE__ */ React5.createElement(RectangleZoomOverlay, { rect: fullscreenChart ? null : rectangleZoomRect }),
     fullscreenChart ? /* @__PURE__ */ React5.createElement(
-      LeanChartFullscreenOverlay,
+      ChartFullscreenOverlay,
       {
         chart: fullscreenChart,
         dataRevision,
@@ -4864,17 +4901,21 @@ function ChartGrid({
         onReset: resetChartView,
         onJumpLatest: jumpChartToLatest,
         xAxisLabel,
-        drawings,
+        drawings: chartDrawings,
         onDrawingsChange,
-        activeDrawingTool,
+        activeDrawingTool: chartActiveDrawingTool,
         onActiveDrawingToolChange,
-        selectedDrawingId,
+        selectedDrawingId: chartSelectedDrawingId,
         onSelectedDrawingIdChange,
         createDrawingId,
         onClearDrawingsRequest,
         onChartContextMenu,
         topMarkers,
-        onTopMarkerClick
+        onTopMarkerClick,
+        disableDrawings,
+        formatXTick,
+        formatXValue,
+        formatYValue
       }
     ) : null
   );