aliencharts 0.1.2 → 0.1.4

package/dist/index.js

@@ -1118,6 +1118,8 @@ var DASH_LENGTH_PX = 7;
 var DASH_GAP_PX = 5;
 var TOOLTIP_WIDTH = 220;
 var TOOLTIP_OFFSET = 12;
+var DEFAULT_GRID_X_SPACING = 80;
+var DEFAULT_GRID_Y_SPACING = 48;
 var DEFAULT_CHART_BACKGROUND = "#f5f9ff";
 var EMPTY_ARRAY = [];
 var EMPTY_OBJECT = {};
@@ -1995,6 +1997,9 @@ function ChartCell({
   hasDrawings = false,
   onClearDrawingsRequest,
   disableDrawings = false,
+  gridLines = false,
+  showToolbar = true,
+  showLatestValueLine = true,
   height = CHART_HEIGHT,
   isFullscreen = false,
   backgroundColor = DEFAULT_CHART_BACKGROUND,
@@ -2011,6 +2016,15 @@ function ChartCell({
     right: RIGHT_AXIS_WIDTH + 6,
     bottom: PLOT_PADDING.bottom + 6
   };
+  const gridOptions = gridLines === true ? EMPTY_OBJECT : gridLines;
+  const gridXSpacing = Math.max(
+    8,
+    Number(gridOptions?.xSpacing) || DEFAULT_GRID_X_SPACING
+  );
+  const gridYSpacing = Math.max(
+    8,
+    Number(gridOptions?.ySpacing) || DEFAULT_GRID_Y_SPACING
+  );
   return /* @__PURE__ */ React5.createElement(
     "div",
     {
@@ -2041,6 +2055,20 @@ function ChartCell({
         /* @__PURE__ */ React5.createElement("span", { className: "truncate" }, chart.title)
       )
     ),
+    gridLines ? /* @__PURE__ */ React5.createElement(
+      "div",
+      {
+        className: "pointer-events-none absolute text-border/40",
+        style: {
+          left: PLOT_PADDING.left,
+          right: PLOT_PADDING.right,
+          top: PLOT_PADDING.top,
+          bottom: PLOT_PADDING.bottom,
+          backgroundImage: "linear-gradient(to right, transparent calc(100% - 1px), currentColor calc(100% - 1px)), linear-gradient(to bottom, transparent calc(100% - 1px), currentColor calc(100% - 1px))",
+          backgroundSize: `${gridXSpacing}px 100%, 100% ${gridYSpacing}px`
+        }
+      }
+    ) : null,
     axisOverlay?.showJumpLatest ? /* @__PURE__ */ React5.createElement(
       "button",
       {
@@ -2063,7 +2091,7 @@ function ChartCell({
       },
       /* @__PURE__ */ React5.createElement(ArrowLineRightIcon, { size: 16, weight: "bold" })
     ) : null,
-    focused ? /* @__PURE__ */ React5.createElement(
+    focused && showToolbar ? /* @__PURE__ */ React5.createElement(
       ChartToolbar,
       {
         isFullscreen,
@@ -2080,8 +2108,7 @@ function ChartCell({
         disableDrawings
       }
     ) : null,
-    /* @__PURE__ */ React5.createElement("div", { className: "pointer-events-none absolute inset-y-8 left-9 border-l border-border/40" }),
-    axisOverlay?.latestValues.map(
+    showLatestValueLine && axisOverlay?.latestValues.map(
       (latest) => latest.left >= 0 && latest.left <= axisOverlay.plotWidth ? /* @__PURE__ */ React5.createElement(
         "div",
         {
@@ -2194,7 +2221,7 @@ function CrosshairOverlay({
   )), /* @__PURE__ */ React5.createElement(
     "div",
     {
-      className: "pointer-events-none absolute z-30 w-[220px] rounded-sm border border-border bg-popover px-2 py-1.5 text-xs text-popover-foreground shadow-sm",
+      className: "pointer-events-none absolute z-30 w-[220px] rounded-sm border border-border/70 bg-popover/80 px-2 py-1.5 text-xs text-popover-foreground shadow-sm backdrop-blur-sm",
       style: {
         left: crosshair.tooltipX,
         top: crosshair.tooltipY
@@ -2593,7 +2620,7 @@ var drawChartLayouts = ({
   }
   return nextAxisOverlays;
 };
-function LeanChartFullscreenOverlay({
+function ChartFullscreenOverlay({
   chart,
   dataRevision,
   renderRevision,
@@ -2626,6 +2653,10 @@ function LeanChartFullscreenOverlay({
   topMarkers = EMPTY_ARRAY,
   onTopMarkerClick,
   disableDrawings = false,
+  gridLines = false,
+  showToolbar = true,
+  showLatestValueLine = true,
+  showTooltips = true,
   formatXTick = formatCompactNumber,
   formatXValue = formatNumber,
   formatYValue = formatNumber
@@ -2651,6 +2682,9 @@ function LeanChartFullscreenOverlay({
   const chartDrawings = disableDrawings ? EMPTY_ARRAY : drawings;
   const chartActiveDrawingTool = disableDrawings ? null : activeDrawingTool;
   const chartSelectedDrawingId = disableDrawings ? null : selectedDrawingId;
+  useEffect3(() => {
+    if (!showTooltips) setCrosshair(null);
+  }, [showTooltips]);
   const requestRender = useCallback3(() => {
     setRevision((value) => value + 1);
   }, []);
@@ -2893,15 +2927,15 @@ function LeanChartFullscreenOverlay({
       }).filter(Boolean).filter(
         (nearestPoint) => nearestPoint.x >= layout.plot.x - 1 && nearestPoint.x <= layout.plot.x + layout.plot.width + 1 && nearestPoint.y >= layout.plot.y - 1 && nearestPoint.y <= layout.plot.y + layout.plot.height + 1
       );
-      const primaryPoint = nearestPoints[0];
-      const tooltipLeft = primaryPoint && primaryPoint.x + TOOLTIP_WIDTH + TOOLTIP_OFFSET > layout.rect.x + layout.rect.width ? primaryPoint.x - TOOLTIP_WIDTH - TOOLTIP_OFFSET : (primaryPoint?.x ?? point.x) + TOOLTIP_OFFSET;
+      const tooltipLeft = point.x + TOOLTIP_WIDTH + TOOLTIP_OFFSET > layout.rect.x + layout.rect.width ? point.x - TOOLTIP_WIDTH - TOOLTIP_OFFSET : point.x + TOOLTIP_OFFSET;
       const tooltipTop = Math.max(
         layout.rect.y + PLOT_PADDING.top,
         Math.min(
-          (primaryPoint?.y ?? point.y) + TOOLTIP_OFFSET,
+          point.y + TOOLTIP_OFFSET,
           layout.rect.y + layout.rect.height - 96
         )
       );
+      const primaryPoint = nearestPoints[0];
       setCrosshair({
         chartId: chart.id,
         title: chart.title,
@@ -3078,7 +3112,7 @@ function LeanChartFullscreenOverlay({
   );
   const handlePointerMove = useCallback3(
     (event) => {
-      updateCrosshair(event);
+      if (showTooltips) updateCrosshair(event);
       const drawingPoint = getLocalPoint(event);
       const drawingLayout = getLayout();
       if (drawingPoint && drawingLayout) {
@@ -3217,6 +3251,7 @@ function LeanChartFullscreenOverlay({
       initialVisiblePoints,
       onDrawingsChange,
       requestRender,
+      showTooltips,
       updateCrosshair,
       viewStateRef,
       yCenterOffsetRef,
@@ -3482,6 +3517,9 @@ function LeanChartFullscreenOverlay({
           hasDrawings: getDrawingsForChart(chartDrawings, chart.id).length > 0,
           onClearDrawingsRequest,
           disableDrawings,
+          gridLines,
+          showToolbar,
+          showLatestValueLine,
           formatXTick,
           formatYValue,
           setRef: (node) => {
@@ -3544,7 +3582,7 @@ function LeanChartFullscreenOverlay({
       /* @__PURE__ */ React5.createElement(
         CrosshairOverlay,
         {
-          crosshair,
+          crosshair: showTooltips ? crosshair : null,
           height: "100%",
           xAxisLabel,
           formatXValue,
@@ -3563,6 +3601,10 @@ function ChartGrid({
   initialVisiblePoints = null,
   backgroundColor = DEFAULT_CHART_BACKGROUND,
   antialiasLines = false,
+  gridLines = false,
+  showToolbar = true,
+  showLatestValueLine = true,
+  showTooltips = true,
   followLatest = false,
   followVisibleLatest = true,
   jumpToLatestRevision = 0,
@@ -3616,6 +3658,9 @@ function ChartGrid({
   const chartDrawings = disableDrawings ? EMPTY_ARRAY : drawings;
   const chartActiveDrawingTool = disableDrawings ? null : activeDrawingTool;
   const chartSelectedDrawingId = disableDrawings ? null : selectedDrawingId;
+  useEffect3(() => {
+    if (!showTooltips) setCrosshair(null);
+  }, [showTooltips]);
   const requestRender = useCallback3(() => {
     setRevision((value) => value + 1);
   }, []);
@@ -4084,15 +4129,15 @@ function ChartGrid({
       }).filter(Boolean).filter(
         (nearestPoint) => nearestPoint.x >= layout.plot.x - 1 && nearestPoint.x <= layout.plot.x + layout.plot.width + 1 && nearestPoint.y >= layout.plot.y - 1 && nearestPoint.y <= layout.plot.y + layout.plot.height + 1
       );
-      const primaryPoint = nearestPoints[0];
-      const tooltipLeft = primaryPoint && primaryPoint.x + TOOLTIP_WIDTH + TOOLTIP_OFFSET > layout.rect.x + layout.rect.width ? primaryPoint.x - TOOLTIP_WIDTH - TOOLTIP_OFFSET : (primaryPoint?.x ?? point.x) + TOOLTIP_OFFSET;
+      const tooltipLeft = point.x + TOOLTIP_WIDTH + TOOLTIP_OFFSET > layout.rect.x + layout.rect.width ? point.x - TOOLTIP_WIDTH - TOOLTIP_OFFSET : point.x + TOOLTIP_OFFSET;
       const tooltipTop = Math.max(
         layout.rect.y + PLOT_PADDING.top,
         Math.min(
-          (primaryPoint?.y ?? point.y) + TOOLTIP_OFFSET,
+          point.y + TOOLTIP_OFFSET,
           layout.rect.y + layout.rect.height - 96
         )
       );
+      const primaryPoint = nearestPoints[0];
       setCrosshair({
         chartId: layout.chart.id,
         title: layout.chart.title,
@@ -4345,7 +4390,7 @@ function ChartGrid({
   const handlePointerMove = useCallback3(
     (event) => {
       if (fullscreenChartId) return;
-      updateCrosshair(event);
+      if (showTooltips) updateCrosshair(event);
       const drawingPoint = getLocalPoint(event);
       if (drawingPoint) {
         if (drawingEditRef.current) {
@@ -4491,6 +4536,7 @@ function ChartGrid({
       initialVisiblePoints,
       onDrawingsChange,
       requestRender,
+      showTooltips,
       updateCrosshair
     ]
   );
@@ -4661,6 +4707,7 @@ function ChartGrid({
   );
   useEffect3(() => {
     const handleKeyDown = (event) => {
+      if (fullscreenChartId) return;
       const target = event.target;
       const editable = target instanceof HTMLElement && (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName));
       if (editable) {
@@ -4805,6 +4852,9 @@ function ChartGrid({
           hasDrawings: getDrawingsForChart(chartDrawings, chart.id).length > 0,
           onClearDrawingsRequest,
           disableDrawings,
+          gridLines,
+          showToolbar,
+          showLatestValueLine,
           formatXTick,
           formatYValue,
           setRef: (node) => {
@@ -4817,7 +4867,7 @@ function ChartGrid({
     /* @__PURE__ */ React5.createElement(
       CrosshairOverlay,
       {
-        crosshair: fullscreenChart ? null : crosshair,
+        crosshair: fullscreenChart || !showTooltips ? null : crosshair,
         height: containerRef.current?.scrollHeight ?? "100%",
         xAxisLabel,
         formatXValue,
@@ -4879,7 +4929,7 @@ function ChartGrid({
     })() : null,
     /* @__PURE__ */ React5.createElement(RectangleZoomOverlay, { rect: fullscreenChart ? null : rectangleZoomRect }),
     fullscreenChart ? /* @__PURE__ */ React5.createElement(
-      LeanChartFullscreenOverlay,
+      ChartFullscreenOverlay,
       {
         chart: fullscreenChart,
         dataRevision,
@@ -4913,6 +4963,10 @@ function ChartGrid({
         topMarkers,
         onTopMarkerClick,
         disableDrawings,
+        gridLines,
+        showToolbar,
+        showLatestValueLine,
+        showTooltips,
         formatXTick,
         formatXValue,
         formatYValue