aliencharts 0.3.2 → 0.3.3

package/dist/vanilla.js

@@ -1742,19 +1742,24 @@ var getScaledYRangeForLayout = ({
   descriptor,
   state,
   plot,
+  yBaseRangeRef,
   yScaleRef,
   yCenterOffsetRef
-}) => applyYScale(
-  getYRange(
+}) => {
+  const automaticRange = getYRange(
     chart,
     state.xMin,
     state.xMax,
     getCategoryPixelLength(chart, plot, descriptor),
     descriptor
-  ),
-  yScaleRef.current.get(chart.id) ?? 1,
-  yCenterOffsetRef.current.get(chart.id) ?? 0
-);
+  );
+  const lockedRange = yBaseRangeRef?.current.get(chart.id);
+  return applyYScale(
+    lockedRange ? { ...automaticRange, ...lockedRange } : automaticRange,
+    yScaleRef.current.get(chart.id) ?? 1,
+    yCenterOffsetRef.current.get(chart.id) ?? 0
+  );
+};
 var applyRectangleZoom = ({
   chart,
   descriptor: suppliedDescriptor,
@@ -1763,6 +1768,7 @@ var applyRectangleZoom = ({
   end,
   initialVisiblePoints,
   viewStateRef,
+  yBaseRangeRef,
   yScaleRef,
   yCenterOffsetRef,
   yManualScaleRef
@@ -1779,6 +1785,7 @@ var applyRectangleZoom = ({
     descriptor,
     state,
     plot,
+    yBaseRangeRef,
     yScaleRef,
     yCenterOffsetRef
   });
@@ -1831,6 +1838,7 @@ var screenPointToDataPoint = ({
   plot,
   initialVisiblePoints,
   viewStateRef,
+  yBaseRangeRef,
   yScaleRef,
   yCenterOffsetRef
 }) => {
@@ -1841,6 +1849,7 @@ var screenPointToDataPoint = ({
     descriptor,
     state,
     plot,
+    yBaseRangeRef,
     yScaleRef,
     yCenterOffsetRef
   });
@@ -1957,6 +1966,7 @@ var drawChartLayouts = ({
   antialiasLines = false,
   layouts,
   viewStateRef,
+  yBaseRangeRef,
   yScaleRef,
   yCenterOffsetRef,
   initialVisiblePoints,
@@ -1994,17 +2004,15 @@ var drawChartLayouts = ({
       plot,
       descriptor
     );
-    const yRange = applyYScale(
-      getYRange(
-        chart,
-        state.xMin,
-        state.xMax,
-        categoryPixelLength,
-        descriptor
-      ),
-      yScaleRef.current.get(chart.id) ?? 1,
-      yCenterOffsetRef.current.get(chart.id) ?? 0
-    );
+    const yRange = getScaledYRangeForLayout({
+      chart,
+      descriptor,
+      state,
+      plot,
+      yBaseRangeRef,
+      yScaleRef,
+      yCenterOffsetRef
+    });
     gl.enable(gl.SCISSOR_TEST);
     gl.scissor(
       Math.floor(scaledPlot.x),
@@ -2244,6 +2252,7 @@ var ChartGridController = class {
     this.viewStates = /* @__PURE__ */ new Map();
     this.yScales = /* @__PURE__ */ new Map();
     this.yOffsets = /* @__PURE__ */ new Map();
+    this.yBaseRanges = /* @__PURE__ */ new Map();
     this.latestX = /* @__PURE__ */ new Map();
     this.axisOverlays = {};
     this.layouts = [];
@@ -2294,7 +2303,7 @@ var ChartGridController = class {
   }
   initializeChartState() {
     const ids = new Set(this.options.charts.map((chart) => chart.id));
-    [this.viewStates, this.yScales, this.yOffsets, this.latestX].forEach((map) => {
+    [this.viewStates, this.yScales, this.yOffsets, this.yBaseRanges, this.latestX].forEach((map) => {
       [...map.keys()].forEach((id) => {
         if (!ids.has(id)) map.delete(id);
       });
@@ -2481,6 +2490,7 @@ var ChartGridController = class {
       antialiasLines: this.options.antialiasLines,
       layouts,
       viewStateRef: { current: this.viewStates },
+      yBaseRangeRef: { current: this.yBaseRanges },
       yScaleRef: { current: this.yScales },
       yCenterOffsetRef: { current: this.yOffsets },
       initialVisiblePoints: this.options.initialVisiblePoints,
@@ -2626,8 +2636,11 @@ var ChartGridController = class {
       (item) => item.id === crosshair.chartId
     );
     const xAxisLabel = chart?.xAxisLabel ?? this.options.xAxisLabel;
+    const pointLayer = `<div data-crosshair-points class="pointer-events-none absolute z-30 overflow-hidden" style="left:${crosshair.plot.x}px;top:${crosshair.plot.y}px;width:${crosshair.plot.width}px;height:${crosshair.plot.height}px">
+      ${crosshair.points.map((point) => `<div data-crosshair-point class="absolute size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-background" style="left:${point.x - crosshair.plot.x}px;top:${point.y - crosshair.plot.y}px;background:${point.color}"></div>`).join("")}
+    </div>`;
     return `<div class="pointer-events-none absolute z-20 border-l border-foreground/40" style="left:${crosshair.x}px;top:0;height:100%"></div><div class="pointer-events-none absolute z-20 border-t border-foreground/40" style="top:${crosshair.y}px;left:0;width:100%"></div>
-      ${crosshair.points.map((point) => `<div class="pointer-events-none absolute z-30 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border border-background" style="left:${point.x}px;top:${point.y}px;background:${point.color}"></div>`).join("")}
+      ${pointLayer}
       <div data-crosshair-tooltip class="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}px;top:${crosshair.tooltipY}px"><div class="mb-1 font-medium">${escapeHtml(xAxisLabel)}: ${escapeHtml(crosshair.categoryLabel ?? this.options.formatXValue(crosshair.xValue))}</div>${crosshair.points.map((point) => `<div class="grid grid-cols-[auto_1fr] gap-x-2"><span class="mt-1 size-2 rounded-full" style="background:${point.color}"></span><div class="min-w-0"><div class="truncate text-muted-foreground">${escapeHtml(point.name)}</div><div class="tabular-nums">${escapeHtml(this.options.formatYValue(point.yValue))}</div></div></div>`).join("")}</div>`;
   }
   rectangleOverlayHtml() {
@@ -2658,22 +2671,42 @@ var ChartGridController = class {
     return this.getTransform(layout, state, range).dataToScreen(point);
   }
   getRange(layout, state = this.viewStates.get(layout.chart.id)) {
-    return applyYScale(
-      getYRange(
+    const automaticRange = getYRange(
+      layout.chart,
+      state.xMin,
+      state.xMax,
+      getCategoryPixelLength(
         layout.chart,
-        state.xMin,
-        state.xMax,
-        getCategoryPixelLength(
-          layout.chart,
-          layout.plot,
-          layout.descriptor
-        ),
+        layout.plot,
         layout.descriptor
       ),
+      layout.descriptor
+    );
+    const lockedRange = this.yBaseRanges.get(layout.chart.id);
+    return applyYScale(
+      lockedRange ? { ...automaticRange, ...lockedRange } : automaticRange,
       this.yScales.get(layout.chart.id),
       this.yOffsets.get(layout.chart.id)
     );
   }
+  lockYRange(layout, state = this.viewStates.get(layout.chart.id)) {
+    if (this.yBaseRanges.has(layout.chart.id)) return;
+    const range = getYRange(
+      layout.chart,
+      state.xMin,
+      state.xMax,
+      getCategoryPixelLength(
+        layout.chart,
+        layout.plot,
+        layout.descriptor
+      ),
+      layout.descriptor
+    );
+    this.yBaseRanges.set(layout.chart.id, {
+      minY: range.minY,
+      maxY: range.maxY
+    });
+  }
   getTransform(layout, state, range) {
     return createCoordinateTransform({
       orientation: layout.descriptor.orientation,
@@ -2776,7 +2809,7 @@ var ChartGridController = class {
     this.focusedChartId = layout.chart.id;
     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 (inPlot && this.activeDrawingTool && !this.options.disableDrawings && layout.descriptor.capabilities.drawings) {
-      const dataPoint = screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
+      const dataPoint = screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yBaseRangeRef: { current: this.yBaseRanges }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
       if (["hline", "vline", "pin"].includes(this.activeDrawingTool)) {
         this.commitDrawing(layout.chart.id, this.activeDrawingTool, dataPoint, dataPoint);
       } else if (this.drawingSession?.chartId === layout.chart.id) {
@@ -2799,7 +2832,17 @@ var ChartGridController = class {
       } else {
         this.selectedDrawingId = null;
         this.emit("onSelectedDrawingIdChange", null);
-        this.drag = { type: "pan", layout, start: point, state: { ...this.viewStates.get(layout.chart.id) }, yOffset: this.yOffsets.get(layout.chart.id) || 0 };
+        const state = { ...this.viewStates.get(layout.chart.id) };
+        const range = this.getRange(layout, state);
+        this.drag = {
+          type: "pan",
+          layout,
+          start: point,
+          state,
+          yOffset: this.yOffsets.get(layout.chart.id) || 0,
+          canPanY: this.yBaseRanges.has(layout.chart.id),
+          valueSpan: range.maxY - range.minY
+        };
       }
     } else if (layout.descriptor.orientation === "vertical" && point.x >= layout.plot.x + layout.plot.width) {
       this.drag = { type: "y-scale", layout, start: point, scale: this.yScales.get(layout.chart.id) || 1 };
@@ -2821,7 +2864,7 @@ var ChartGridController = class {
     const { layout, point } = context;
     if (this.drawingSession) {
       if (layout.chart.id !== this.drawingSession.chartId) return;
-      const end = screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
+      const end = screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yBaseRangeRef: { current: this.yBaseRanges }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
       this.draftDrawing = createDraftDrawing({ ...this.drawingSession, end });
       this.requestRender();
       return;
@@ -2829,7 +2872,7 @@ var ChartGridController = class {
     if (this.drag) {
       const { chart, descriptor, plot } = this.drag.layout;
       if (this.drag.type === "drawing-edit") {
-        const dataPoint = screenPointToDataPoint({ point, chart, descriptor, plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
+        const dataPoint = screenPointToDataPoint({ point, chart, descriptor, plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yBaseRangeRef: { current: this.yBaseRanges }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } });
         const next = updateDrawingById(this.drawings, this.drag.drawingId, (drawing) => {
           if (drawing.type === "hline") {
             const deltaX = (drawing.end?.x ?? drawing.start.x) - drawing.start.x;
@@ -2847,22 +2890,13 @@ var ChartGridController = class {
       }
       if (this.drag.type === "rectangle") this.rectangleZoomRect = { start: this.drag.start, end: point };
       if (this.drag.type === "pan") {
-        const span = this.drag.state.xMax - this.drag.state.xMin;
-        const baseRange = getYRange(
-          chart,
-          this.drag.state.xMin,
-          this.drag.state.xMax,
-          getCategoryPixelLength(chart, plot, descriptor),
-          descriptor
-        );
-        const rangeSpan = (baseRange.maxY - baseRange.minY) * (this.yScales.get(chart.id) || 1);
         const transform = createCoordinateTransform({
           orientation: descriptor.orientation,
           categoryRange: {
             min: this.drag.state.xMin,
             max: this.drag.state.xMax
           },
-          valueRange: { min: 0, max: rangeSpan },
+          valueRange: { min: 0, max: this.drag.valueSpan },
           plot
         });
         const categoryDelta = transform.categoryDragDelta(
@@ -2874,7 +2908,9 @@ var ChartGridController = class {
           point
         );
         this.viewStates.set(chart.id, { xMin: this.drag.state.xMin - categoryDelta, xMax: this.drag.state.xMax - categoryDelta });
-        this.yOffsets.set(chart.id, this.drag.yOffset + valueDelta);
+        if (this.drag.canPanY) {
+          this.yOffsets.set(chart.id, this.drag.yOffset + valueDelta);
+        }
       }
       if (this.drag.type === "y-scale") {
         const transform = createCoordinateTransform({
@@ -2884,6 +2920,7 @@ var ChartGridController = class {
           plot
         });
         const delta = transform.valueScaleDelta(this.drag.start, point);
+        if (delta !== 0) this.lockYRange(this.drag.layout);
         this.yScales.set(
           chart.id,
           scaleValueRange(
@@ -2926,7 +2963,7 @@ var ChartGridController = class {
       const normalized = normalizeRect(this.rectangleZoomRect.start, this.rectangleZoomRect.end);
       if (normalized?.width >= 4 && normalized?.height >= 4) {
         const layout = this.drag.layout;
-        applyRectangleZoom({
+        const zoomed = applyRectangleZoom({
           chart: layout.chart,
           descriptor: layout.descriptor,
           plot: layout.plot,
@@ -2934,10 +2971,12 @@ var ChartGridController = class {
           end: this.rectangleZoomRect.end,
           initialVisiblePoints: this.options.initialVisiblePoints,
           viewStateRef: { current: this.viewStates },
+          yBaseRangeRef: { current: this.yBaseRanges },
           yScaleRef: { current: this.yScales },
           yCenterOffsetRef: { current: this.yOffsets },
           yManualScaleRef: { current: /* @__PURE__ */ new Set() }
         });
+        if (zoomed) this.lockYRange(layout);
       }
       this.rectangleZoomChartId = null;
       this.rectangleZoomRect = null;
@@ -2958,6 +2997,7 @@ var ChartGridController = class {
     if (event.shiftKey) {
       const wheelDelta = event.deltaY || event.deltaX;
       const currentScale = this.yScales.get(layout.chart.id) || 1;
+      if (wheelDelta !== 0) this.lockYRange(layout);
       this.yScales.set(
         layout.chart.id,
         scaleValueRange(
@@ -2992,7 +3032,7 @@ var ChartGridController = class {
     event.preventDefault();
     const { layout, point } = context;
     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;
-    const data = inPlot ? screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } }) : null;
+    const data = inPlot ? screenPointToDataPoint({ point, chart: layout.chart, descriptor: layout.descriptor, plot: layout.plot, initialVisiblePoints: this.options.initialVisiblePoints, viewStateRef: { current: this.viewStates }, yBaseRangeRef: { current: this.yBaseRanges }, yScaleRef: { current: this.yScales }, yCenterOffsetRef: { current: this.yOffsets } }) : null;
     this.options.onChartContextMenu({ chart: layout.chart, event, point: data });
   }
   updateCrosshair(point, layout) {
@@ -3039,6 +3079,7 @@ var ChartGridController = class {
       xValue: nearest.xValue,
       categoryLabel: getCategoryLabel(layout.chart, nearest.xValue),
       points,
+      plot: { ...layout.plot },
       tooltipX: point.x + 232 > layout.rect.x + layout.rect.width ? point.x - 232 : point.x + 12,
       tooltipY: clamp(point.y + 12, layout.plot.y, layout.rect.y + layout.rect.height - 96)
     };
@@ -3106,6 +3147,7 @@ var ChartGridController = class {
     this.viewStates.set(chartId, getInitialView(chart, this.options.initialVisiblePoints));
     this.yScales.set(chartId, 1);
     this.yOffsets.set(chartId, 0);
+    this.yBaseRanges.delete(chartId);
     this.requestRender();
   }
   openFullscreen(chartId) {