@carto/ps-react-ui 6.3.0 → 6.4.0

package/src/widgets/index.ts

@@ -155,6 +155,7 @@ export type {
   ZoomToggleProps,
   BrushToggleProps,
   RelativeDataProps,
+  RelativeScale,
   DownloadProps,
   DownloadItem,
   DownloadContext,

package/src/widgets/scatterplot/options.test.ts

@@ -213,6 +213,18 @@ describe('createScatterplotOptionFactory', () => {
     expect(out.yAxis.min).toBe(0)
   })
 
+  it("pins the y ends a config transform set (RelativeData 'total')", () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const out = merge({ yAxis: { min: -100, max: 100 } }, [
+      [
+        [1, 47],
+        [2, 3],
+      ],
+    ]) as { yAxis: { min: number; max: number } }
+    expect(out.yAxis.max).toBe(100)
+    expect(out.yAxis.min).toBe(0)
+  })
+
   it('always emits itemStyle.color as a callback (passthrough when no selection)', () => {
     const merge = createScatterplotOptionFactory({ theme })
     const out = merge({}, [[[1, 2]]]) as {

package/src/widgets/scatterplot/options.ts

@@ -21,6 +21,7 @@ import type {
   ScatterplotItem,
   ScatterplotWidgetData,
 } from './types'
+import { fixedAxisBounds } from '../actions/relative-data/scale'
 
 /**
  * Builds the **structural** ECharts option for a scatterplot widget — both
@@ -189,8 +190,12 @@ export function createScatterplotOptionFactory(
 
     const reactiveFormatter = ctx?.formatter
 
-    const { niceMinX, niceMaxX, niceMinY, niceMaxY } =
-      computeScatterBounds(seriesArr)
+    const { niceMinX, niceMaxX, niceMinY, niceMaxY } = computeScatterBounds(
+      seriesArr,
+      // A config transform (RelativeData's `'total'` scale) may pin the
+      // y ends; each applies only on the side the data reaches.
+      fixedAxisBounds(baseYAxis),
+    )
 
     // Dim non-selected points via `series.itemStyle.color`. The selection
     // key is `${seriesIndex}:${dataIndex}`; we read those off the params
@@ -410,6 +415,7 @@ function buildScatterTooltipFormatter(
 
 function computeScatterBounds(
   seriesArr: ScatterplotWidgetData<ScatterplotItem>,
+  fixedY: { min?: number; max?: number } = {},
 ): {
   niceMinX: number
   niceMaxX: number
@@ -439,8 +445,16 @@ function computeScatterBounds(
   // negative mins, and floor max=0 to 1 so the chart always has range.
   // Scatter can have free coordinates so we apply this per-axis.
   const niceMaxX = Number.isFinite(maxX) ? (maxX <= 0 ? 1 : niceNum(maxX)) : 1
-  const niceMaxY = Number.isFinite(maxY) ? (maxY <= 0 ? 1 : niceNum(maxY)) : 1
+  const niceMaxY = Number.isFinite(maxY)
+    ? maxY <= 0
+      ? 1
+      : (fixedY.max ?? niceNum(maxY))
+    : 1
   const niceMinX = Number.isFinite(minX) ? (minX < 0 ? niceNum(minX) : 0) : 0
-  const niceMinY = Number.isFinite(minY) ? (minY < 0 ? niceNum(minY) : 0) : 0
+  const niceMinY = Number.isFinite(minY)
+    ? minY < 0
+      ? (fixedY.min ?? niceNum(minY))
+      : 0
+    : 0
   return { niceMinX, niceMaxX, niceMinY, niceMaxY }
 }

package/src/widgets/timeseries/options.ts

@@ -20,6 +20,7 @@ import type {
   TimeseriesOptionsInput,
   TimeseriesWidgetData,
 } from './types'
+import { fixedAxisBounds } from '../actions/relative-data/scale'
 
 /**
  * Builds the **structural** ECharts option for a timeseries widget —
@@ -188,6 +189,7 @@ export function createTimeseriesOptionFactory(
       typeof option.yAxis === 'object' && !Array.isArray(option.yAxis)
         ? option.yAxis
         : {}
+    const fixedY = fixedAxisBounds(baseYAxis)
     const baseGrid =
       typeof option.grid === 'object' && !Array.isArray(option.grid)
         ? option.grid
@@ -302,12 +304,14 @@ export function createTimeseriesOptionFactory(
       ...(dataZoomLayout ? { dataZoom: dataZoomLayout } : {}),
       yAxis: {
         ...baseYAxis,
+        // A config transform (RelativeData's `'total'` scale) may pin the
+        // ends; each applies only on the side the data reaches.
         min: (extent: { min: number }) => {
-          niceMin = extent.min < 0 ? niceNum(extent.min) : 0
+          niceMin = extent.min < 0 ? (fixedY.min ?? niceNum(extent.min)) : 0
           return niceMin
         },
         max: (extent: { min: number; max: number }) => {
-          niceMax = extent.max <= 0 ? 1 : niceNum(extent.max)
+          niceMax = extent.max <= 0 ? 1 : (fixedY.max ?? niceNum(extent.max))
           return niceMax
         },
         axisLabel: {