aliencharts 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -337,7 +337,8 @@ function ChartToolbar({
   activeDrawingTool = null,
   onDrawingToolToggle,
   hasDrawings = false,
-  onClearDrawingsRequest
+  onClearDrawingsRequest,
+  disableDrawings = false
 }) {
   return /* @__PURE__ */ import_react.default.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__ */ import_react.default.createElement(
     ToolbarAction,
@@ -356,7 +357,7 @@ function ChartToolbar({
       active: rectangleZoomActive
     },
     /* @__PURE__ */ import_react.default.createElement(import_react2.MagnifyingGlassPlusIcon, { size: 16, weight: "bold" })
-  ), hasDrawings ? /* @__PURE__ */ import_react.default.createElement(
+  ), !disableDrawings && hasDrawings ? /* @__PURE__ */ import_react.default.createElement(
     ToolbarAction,
     {
       title: "Clear drawings",
@@ -364,7 +365,7 @@ function ChartToolbar({
       onClick: onClearDrawingsRequest
     },
     /* @__PURE__ */ import_react.default.createElement(import_react2.BroomIcon, { size: 16, weight: "bold" })
-  ) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "my-1 h-px w-full" }), /* @__PURE__ */ import_react.default.createElement(
+  ) : null, !disableDrawings ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "my-1 h-px w-full" }), /* @__PURE__ */ import_react.default.createElement(
     ToolbarAction,
     {
       title: "Draw trendline",
@@ -400,7 +401,7 @@ function ChartToolbar({
       active: activeDrawingTool === "pin"
     },
     /* @__PURE__ */ import_react.default.createElement(import_react2.MapPinIcon, { size: 16, weight: "bold" })
-  ), /* @__PURE__ */ import_react.default.createElement(
+  )) : null, !disableDrawings ? /* @__PURE__ */ import_react.default.createElement(
     ToolbarAction,
     {
       title: "Toggle moving average",
@@ -409,7 +410,7 @@ function ChartToolbar({
       active: movingAverageActive
     },
     /* @__PURE__ */ import_react.default.createElement(import_react2.WaveSineIcon, { size: 16, weight: "bold" })
-  ));
+  ) : null);
 }
 
 // src/react/DrawingOptionsToolbar.jsx
@@ -1767,6 +1768,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;
@@ -2016,9 +2022,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);
@@ -2095,7 +2104,8 @@ function ChartCell({
         activeDrawingTool,
         onDrawingToolToggle,
         hasDrawings,
-        onClearDrawingsRequest: () => onClearDrawingsRequest?.(chart.id)
+        onClearDrawingsRequest: () => onClearDrawingsRequest?.(chart.id),
+        disableDrawings
       }
     ) : null,
     /* @__PURE__ */ import_react9.default.createElement("div", { className: "pointer-events-none absolute inset-y-8 left-9 border-l border-border/40" }),
@@ -2134,7 +2144,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__ */ import_react9.default.createElement(
         "div",
@@ -2147,7 +2157,7 @@ function ChartCell({
             color: latest.textColor
           }
         },
-        formatNumber(latest.value)
+        formatYValue(latest.value)
       ))
     ),
     /* @__PURE__ */ import_react9.default.createElement(
@@ -2169,7 +2179,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)
       ))
     )
   );
@@ -2177,7 +2187,9 @@ function ChartCell({
 function CrosshairOverlay({
   crosshair,
   height = "100%",
-  xAxisLabel = "STEP"
+  xAxisLabel = "STEP",
+  formatXValue = formatNumber,
+  formatYValue = formatNumber
 }) {
   if (!crosshair) return null;
   return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(
@@ -2216,7 +2228,7 @@ function CrosshairOverlay({
         top: crosshair.tooltipY
       }
     },
-    /* @__PURE__ */ import_react9.default.createElement("div", { className: "mb-1 font-medium" }, xAxisLabel, ": ", formatNumber(crosshair.xValue)),
+    /* @__PURE__ */ import_react9.default.createElement("div", { className: "mb-1 font-medium" }, xAxisLabel, ": ", formatXValue(crosshair.xValue)),
     crosshair.points.map((point) => /* @__PURE__ */ import_react9.default.createElement(
       "div",
       {
@@ -2230,7 +2242,7 @@ function CrosshairOverlay({
           style: { backgroundColor: point.color }
         }
       ),
-      /* @__PURE__ */ import_react9.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "truncate text-muted-foreground" }, point.name), /* @__PURE__ */ import_react9.default.createElement("div", { className: "tabular-nums" }, formatNumber(point.yValue)))
+      /* @__PURE__ */ import_react9.default.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "truncate text-muted-foreground" }, point.name), /* @__PURE__ */ import_react9.default.createElement("div", { className: "tabular-nums" }, formatYValue(point.yValue)))
     ))
   ));
 }
@@ -2609,7 +2621,7 @@ var drawChartLayouts = ({
   }
   return nextAxisOverlays;
 };
-function LeanChartFullscreenOverlay({
+function ChartFullscreenOverlay({
   chart,
   dataRevision,
   renderRevision,
@@ -2640,7 +2652,11 @@ function LeanChartFullscreenOverlay({
   onClearDrawingsRequest,
   onChartContextMenu,
   topMarkers = EMPTY_ARRAY,
-  onTopMarkerClick
+  onTopMarkerClick,
+  disableDrawings = false,
+  formatXTick = formatCompactNumber,
+  formatXValue = formatNumber,
+  formatYValue = formatNumber
 }) {
   const containerRef = (0, import_react9.useRef)(null);
   const chartRef = (0, import_react9.useRef)(null);
@@ -2660,6 +2676,9 @@ function LeanChartFullscreenOverlay({
   const [visible, setVisible] = (0, import_react9.useState)(false);
   const [rectangleZoomActive, setRectangleZoomActive] = (0, import_react9.useState)(false);
   const [rectangleZoomRect, setRectangleZoomRect] = (0, import_react9.useState)(null);
+  const chartDrawings = disableDrawings ? EMPTY_ARRAY : drawings;
+  const chartActiveDrawingTool = disableDrawings ? null : activeDrawingTool;
+  const chartSelectedDrawingId = disableDrawings ? null : selectedDrawingId;
   const requestRender = (0, import_react9.useCallback)(() => {
     setRevision((value) => value + 1);
   }, []);
@@ -2681,11 +2700,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: () => {
@@ -2702,9 +2721,9 @@ function LeanChartFullscreenOverlay({
     onActiveDrawingToolChange?.(null);
   }, [clearDraft, onActiveDrawingToolChange]);
   const toggleSelectedDrawingExtend = (0, import_react9.useCallback)(() => {
-    if (!selectedDrawingId || !onDrawingsChange) return;
+    if (disableDrawings || !chartSelectedDrawingId || !onDrawingsChange) return;
     onDrawingsChange(
-      updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+      updateDrawingById(chartDrawings, chartSelectedDrawingId, (drawing) => ({
         ...drawing,
         style: {
           ...drawing.style,
@@ -2712,12 +2731,12 @@ function LeanChartFullscreenOverlay({
         }
       }))
     );
-  }, [drawings, onDrawingsChange, selectedDrawingId]);
+  }, [chartDrawings, chartSelectedDrawingId, disableDrawings, onDrawingsChange]);
   const updateSelectedDrawingColor = (0, import_react9.useCallback)(
     (color) => {
-      if (!selectedDrawingId || !onDrawingsChange) return;
+      if (disableDrawings || !chartSelectedDrawingId || !onDrawingsChange) return;
       onDrawingsChange(
-        updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+        updateDrawingById(chartDrawings, chartSelectedDrawingId, (drawing) => ({
           ...drawing,
           style: {
             ...drawing.style,
@@ -2726,13 +2745,13 @@ function LeanChartFullscreenOverlay({
         }))
       );
     },
-    [drawings, onDrawingsChange, selectedDrawingId]
+    [chartDrawings, chartSelectedDrawingId, disableDrawings, onDrawingsChange]
   );
   const updateSelectedDrawingText = (0, import_react9.useCallback)(
     (text) => {
-      if (!selectedDrawingId || !onDrawingsChange) return;
+      if (disableDrawings || !chartSelectedDrawingId || !onDrawingsChange) return;
       onDrawingsChange(
-        updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+        updateDrawingById(chartDrawings, chartSelectedDrawingId, (drawing) => ({
           ...drawing,
           style: {
             ...drawing.style,
@@ -2741,7 +2760,7 @@ function LeanChartFullscreenOverlay({
         }))
       );
     },
-    [drawings, onDrawingsChange, selectedDrawingId]
+    [chartDrawings, chartSelectedDrawingId, disableDrawings, onDrawingsChange]
   );
   (0, import_react9.useEffect)(() => {
     const frame = requestAnimationFrame(() => setVisible(true));
@@ -2940,7 +2959,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({
@@ -2952,10 +2971,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
           });
@@ -2978,12 +2997,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,
@@ -3074,10 +3093,9 @@ function LeanChartFullscreenOverlay({
       getLayout,
       getLocalPoint,
       initialVisiblePoints,
-      activeDrawingTool,
-      chart,
+      chartActiveDrawingTool,
+      chartDrawings,
       commitDrawing,
-      drawings,
       onSelectedDrawingIdChange,
       rectangleZoomActive,
       viewStateRef,
@@ -3103,7 +3121,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 {
@@ -3130,7 +3148,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;
           }
@@ -3143,11 +3161,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
             });
@@ -3220,8 +3238,8 @@ function LeanChartFullscreenOverlay({
     [
       chart.id,
       chart,
-      activeDrawingTool,
-      drawings,
+      chartActiveDrawingTool,
+      chartDrawings,
       getLayout,
       getLocalPoint,
       initialVisiblePoints,
@@ -3384,27 +3402,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;
         }
@@ -3422,23 +3440,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__ */ import_react9.default.createElement(
     "div",
@@ -3451,7 +3470,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,
@@ -3484,12 +3503,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;
           }
@@ -3499,9 +3521,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,
@@ -3539,7 +3561,7 @@ function LeanChartFullscreenOverlay({
           onTextChange: updateSelectedDrawingText
         }
       ) : null,
-      fullscreenLayout && movingAverageByChart?.[chart.id]?.enabled ? /* @__PURE__ */ import_react9.default.createElement(
+      !disableDrawings && fullscreenLayout && movingAverageByChart?.[chart.id]?.enabled ? /* @__PURE__ */ import_react9.default.createElement(
         MovingAverageOptionsToolbar,
         {
           movingAverage: movingAverageByChart[chart.id],
@@ -3552,7 +3574,9 @@ function LeanChartFullscreenOverlay({
         {
           crosshair,
           height: "100%",
-          xAxisLabel
+          xAxisLabel,
+          formatXValue,
+          formatYValue
         }
       ),
       /* @__PURE__ */ import_react9.default.createElement(RectangleZoomOverlay, { rect: rectangleZoomRect })
@@ -3585,7 +3609,11 @@ function ChartGrid({
   seriesOrderByChart = EMPTY_OBJECT,
   topMarkers = EMPTY_ARRAY,
   onTopMarkerClick,
-  xAxisLabel = "STEP"
+  xAxisLabel = "STEP",
+  disableDrawings = false,
+  formatXTick = formatCompactNumber,
+  formatXValue = formatNumber,
+  formatYValue = formatNumber
 }) {
   const containerRef = (0, import_react9.useRef)(null);
   const gridRef = (0, import_react9.useRef)(null);
@@ -3613,6 +3641,9 @@ function ChartGrid({
   const [fullscreenChartId, setFullscreenChartId] = (0, import_react9.useState)(null);
   const [rectangleZoomChartId, setRectangleZoomChartId] = (0, import_react9.useState)(null);
   const [rectangleZoomRect, setRectangleZoomRect] = (0, import_react9.useState)(null);
+  const chartDrawings = disableDrawings ? EMPTY_ARRAY : drawings;
+  const chartActiveDrawingTool = disableDrawings ? null : activeDrawingTool;
+  const chartSelectedDrawingId = disableDrawings ? null : selectedDrawingId;
   const requestRender = (0, import_react9.useCallback)(() => {
     setRevision((value) => value + 1);
   }, []);
@@ -3630,11 +3661,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,
@@ -3688,9 +3719,9 @@ function ChartGrid({
     ]
   );
   const toggleSelectedDrawingExtend = (0, import_react9.useCallback)(() => {
-    if (!selectedDrawingId || !onDrawingsChange) return;
+    if (disableDrawings || !chartSelectedDrawingId || !onDrawingsChange) return;
     onDrawingsChange(
-      updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+      updateDrawingById(chartDrawings, chartSelectedDrawingId, (drawing) => ({
         ...drawing,
         style: {
           ...drawing.style,
@@ -3698,12 +3729,12 @@ function ChartGrid({
         }
       }))
     );
-  }, [drawings, onDrawingsChange, selectedDrawingId]);
+  }, [chartDrawings, chartSelectedDrawingId, disableDrawings, onDrawingsChange]);
   const updateSelectedDrawingColor = (0, import_react9.useCallback)(
     (color) => {
-      if (!selectedDrawingId || !onDrawingsChange) return;
+      if (disableDrawings || !chartSelectedDrawingId || !onDrawingsChange) return;
       onDrawingsChange(
-        updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+        updateDrawingById(chartDrawings, chartSelectedDrawingId, (drawing) => ({
           ...drawing,
           style: {
             ...drawing.style,
@@ -3712,13 +3743,13 @@ function ChartGrid({
         }))
       );
     },
-    [drawings, onDrawingsChange, selectedDrawingId]
+    [chartDrawings, chartSelectedDrawingId, disableDrawings, onDrawingsChange]
   );
   const updateSelectedDrawingText = (0, import_react9.useCallback)(
     (text) => {
-      if (!selectedDrawingId || !onDrawingsChange) return;
+      if (disableDrawings || !chartSelectedDrawingId || !onDrawingsChange) return;
       onDrawingsChange(
-        updateDrawingById(drawings, selectedDrawingId, (drawing) => ({
+        updateDrawingById(chartDrawings, chartSelectedDrawingId, (drawing) => ({
           ...drawing,
           style: {
             ...drawing.style,
@@ -3727,7 +3758,7 @@ function ChartGrid({
         }))
       );
     },
-    [drawings, onDrawingsChange, selectedDrawingId]
+    [chartDrawings, chartSelectedDrawingId, disableDrawings, onDrawingsChange]
   );
   const { getAppendAnimatedPoint } = useAppendAnimations({
     charts,
@@ -4179,7 +4210,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);
@@ -4192,10 +4223,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
           });
@@ -4219,15 +4250,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,
@@ -4333,9 +4364,9 @@ function ChartGrid({
       initialVisiblePoints,
       fullscreenChartId,
       rectangleZoomChartId,
-      activeDrawingTool,
+      chartActiveDrawingTool,
+      chartDrawings,
       commitDrawing,
-      drawings,
       onSelectedDrawingIdChange
     ]
   );
@@ -4347,7 +4378,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
             )
           );
@@ -4362,7 +4393,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 {
@@ -4390,7 +4421,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({
@@ -4403,11 +4434,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
             });
@@ -4480,8 +4511,8 @@ function ChartGrid({
     },
     [
       fullscreenChartId,
-      activeDrawingTool,
-      drawings,
+      chartActiveDrawingTool,
+      chartDrawings,
       findLayoutAt,
       getChartLayout,
       getLocalPoint,
@@ -4686,24 +4717,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;
@@ -4726,15 +4757,16 @@ function ChartGrid({
   }, [
     focusedChartId,
     fullscreenChartId,
-    activeDrawingTool,
+    chartActiveDrawingTool,
+    chartSelectedDrawingId,
     cancelDrawing,
     deleteSelectedDrawing,
+    disableDrawings,
     draftDrawing,
     focusChartByKeyboard,
     openFullscreen,
     rectangleZoomChartId,
     resetChartView,
-    selectedDrawingId,
     toggleMovingAverage,
     toggleDrawingTool,
     toggleRectangleZoom
@@ -4743,8 +4775,8 @@ function ChartGrid({
   const chartLayouts = fullscreenChart ? [] : getChartLayout();
   const selectedDrawingLayout = getSelectedDrawingLayout(
     chartLayouts,
-    drawings,
-    selectedDrawingId
+    chartDrawings,
+    chartSelectedDrawingId
   );
   return /* @__PURE__ */ import_react9.default.createElement(
     "div",
@@ -4752,7 +4784,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,
@@ -4794,12 +4826,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);
@@ -4812,16 +4847,18 @@ function ChartGrid({
       {
         crosshair: fullscreenChart ? null : crosshair,
         height: containerRef.current?.scrollHeight ?? "100%",
-        xAxisLabel
+        xAxisLabel,
+        formatXValue,
+        formatYValue
       }
     ),
     /* @__PURE__ */ import_react9.default.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,
@@ -4854,7 +4891,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
       );
@@ -4870,7 +4907,7 @@ function ChartGrid({
     })() : null,
     /* @__PURE__ */ import_react9.default.createElement(RectangleZoomOverlay, { rect: fullscreenChart ? null : rectangleZoomRect }),
     fullscreenChart ? /* @__PURE__ */ import_react9.default.createElement(
-      LeanChartFullscreenOverlay,
+      ChartFullscreenOverlay,
       {
         chart: fullscreenChart,
         dataRevision,
@@ -4892,17 +4929,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
   );