@carto/ps-react-ui 6.1.1 → 6.2.0

package/src/widgets/category/components/category-bar-stacked.tsx

@@ -2,6 +2,7 @@ import type { CssColor } from '../../../components/types'
 import { Box } from '@mui/material'
 import type { CategorySize } from '../types'
 import { styles } from '../style'
+import { ZeroTickWrap } from './category-bar'
 
 export interface CategoryBarStackedProps {
   /** One value per series. Zero values render no segment (visually + in the DOM). */
@@ -14,6 +15,13 @@ export interface CategoryBarStackedProps {
    * so cross-row comparison is preserved.
    */
   maxValue: number
+  /**
+   * Where the zero sits, as a percentage of the track. `0` (default) is the
+   * positive-only layout. Positive segments stack rightwards from it and
+   * negative ones leftwards, both scaled by `maxValue` against the full
+   * track width.
+   */
+  zeroPct?: number
   /** Visual density. Forwarded to the track styling; segments inherit height. */
   size?: CategorySize
 }
@@ -34,41 +42,46 @@ export function CategoryBarStacked({
   values,
   colors,
   maxValue,
+  zeroPct = 0,
   size = 'small',
 }: CategoryBarStackedProps) {
-  // Cumulative offsets pre-computed up front so the render map function
-  // stays pure (no mutable closure variable — keeps the React Compiler
-  // immutability check happy).
-  const offsets: number[] = []
+  // Left edges pre-computed up front so the render map function stays pure
+  // (no mutable closure variable — keeps the React Compiler immutability
+  // check happy). Each sign keeps its own running sum away from the zero.
+  const lefts: number[] = []
   {
-    let acc = 0
+    let pos = 0
+    let neg = 0
     for (const v of values) {
-      offsets.push(acc)
-      acc += v
+      if (v < 0) neg -= v
+      lefts.push(v < 0 ? -neg : pos)
+      if (v > 0) pos += v
     }
   }
   return (
-    <Box sx={styles.bar[size]} data-size={size}>
-      {values.map((v, i) => {
-        if (v <= 0) return null
-        const leftPct = maxValue > 0 ? (offsets[i]! / maxValue) * 100 : 0
-        const pct = maxValue > 0 ? (v / maxValue) * 100 : 0
-        return (
-          <Box
-            // Segments are keyed by per-series colour (the only stable
-            // distinguishing field on this side) plus the segment index for
-            // when callers reuse palette colours across series.
-            key={`seg-${colors[i] ?? 'none'}-${i}`}
-            sx={styles.stackedSegment[size]}
-            style={{
-              left: `${leftPct}%`,
-              width: `${pct}%`,
-              backgroundColor: colors[i] ?? '',
-            }}
-            data-bar-fill='true'
-          />
-        )
-      })}
-    </Box>
+    <ZeroTickWrap zeroPct={zeroPct > 0 && zeroPct < 100 ? zeroPct : undefined}>
+      <Box sx={styles.bar[size]} data-size={size}>
+        {values.map((v, i) => {
+          if (v === 0 || maxValue <= 0) return null
+          const leftPct = zeroPct + (lefts[i]! / maxValue) * 100
+          const pct = (Math.abs(v) / maxValue) * 100
+          return (
+            <Box
+              // Segments are keyed by per-series colour (the only stable
+              // distinguishing field on this side) plus the segment index for
+              // when callers reuse palette colours across series.
+              key={`seg-${colors[i] ?? 'none'}-${i}`}
+              sx={styles.stackedSegment[size]}
+              style={{
+                left: `${leftPct}%`,
+                width: `${pct}%`,
+                backgroundColor: colors[i] ?? '',
+              }}
+              data-bar-fill='true'
+            />
+          )
+        })}
+      </Box>
+    </ZeroTickWrap>
   )
 }

package/src/widgets/category/components/category-bar.test.tsx

@@ -61,4 +61,70 @@ describe('<CategoryBar>', () => {
     expect(track).toBeTruthy()
     expect(track!.getAttribute('data-size')).toBe('medium')
   })
+
+  describe('signed domain (minValue < 0)', () => {
+    it('grows a positive value rightwards from the zero', () => {
+      const { container } = render(
+        <CategoryBar
+          value={0.5}
+          minValue={-1}
+          maxValue={1}
+          color='rgb(0, 0, 0)'
+        />,
+      )
+      const fill = getFill(container)!
+      expect(fill.style.left).toBe('50%')
+      expect(fill.style.width).toBe('25%')
+    })
+
+    it('grows a negative value leftwards from the zero, in the same color', () => {
+      const { container } = render(
+        <CategoryBar
+          value={-0.5}
+          minValue={-1}
+          maxValue={1}
+          color='rgb(0, 200, 0)'
+        />,
+      )
+      const fill = getFill(container)!
+      expect(fill.style.left).toBe('25%')
+      expect(fill.style.width).toBe('25%')
+      expect(fill.style.backgroundColor).toBe('rgb(0, 200, 0)')
+    })
+
+    it('squares the end that grows out of the zero', () => {
+      const { container: pos } = render(
+        <CategoryBar value={1} minValue={-1} maxValue={1} color='red' />,
+      )
+      const { container: neg } = render(
+        <CategoryBar value={-1} minValue={-1} maxValue={1} color='red' />,
+      )
+      expect(getFill(pos)!.style.borderTopLeftRadius).toBe('0px')
+      expect(getFill(pos)!.style.borderTopRightRadius).toBe('')
+      expect(getFill(neg)!.style.borderTopRightRadius).toBe('0px')
+      expect(getFill(neg)!.style.borderTopLeftRadius).toBe('')
+    })
+
+    it('puts the zero tick before the track so the bar paints over it', () => {
+      const { container } = render(
+        <CategoryBar value={1} minValue={-1} maxValue={1} color='red' />,
+      )
+      const tick = container.querySelector('[data-zero-tick="true"]')!
+      expect(tick.nextElementSibling!.getAttribute('data-size')).toBe('small')
+    })
+
+    it('hangs from the right edge when the domain is negative-only', () => {
+      const { container } = render(
+        <CategoryBar
+          value={-1}
+          minValue={-4}
+          maxValue={0}
+          color='rgb(0, 0, 0)'
+        />,
+      )
+      const fill = getFill(container)!
+      expect(fill.style.left).toBe('75%')
+      expect(fill.style.width).toBe('25%')
+    })
+  })
 })

package/src/widgets/category/components/category-bar.tsx

@@ -1,4 +1,5 @@
 import type { CssColor } from '../../../components/types'
+import type { ReactNode } from 'react'
 import { Box } from '@mui/material'
 import type { CategorySize } from '../types'
 import { styles } from '../style'
@@ -6,8 +7,15 @@ import { styles } from '../style'
 export interface CategoryBarProps {
   /** Numeric value driving the fill width. */
   value: number
-  /** Denominator for the percentage fill. `0` → empty bar (no division by zero). */
+  /** Upper end of the domain. `maxValue === minValue` → empty bar (no division by zero). */
   maxValue: number
+  /**
+   * Lower end of the domain. `0` (default) keeps the positive-only bar
+   * anchored at the left edge; a negative value moves the zero to
+   * `-minValue / (maxValue - minValue)` and bars grow from there in either
+   * direction, keeping the fill `color` whatever the sign.
+   */
+  minValue?: number
   /** Fill color, already resolved by `CategoryUI.colorAt`. */
   color: CssColor
   /**
@@ -17,6 +25,11 @@ export interface CategoryBarProps {
    * size-invariant.
    */
   size?: CategorySize
+  /**
+   * Draw the zero tick when the domain is signed. `false` when the parent
+   * draws its own zero line (multi-series rows span it across every bar).
+   */
+  zeroTick?: boolean
 }
 
 /**
@@ -28,23 +41,66 @@ export interface CategoryBarProps {
 export function CategoryBar({
   value,
   maxValue,
+  minValue = 0,
   color,
   size = 'small',
+  zeroTick = true,
 }: CategoryBarProps) {
-  const pct = maxValue > 0 ? (value / maxValue) * 100 : 0
+  const range = maxValue - minValue
+  const leftPct =
+    range > 0 ? ((Math.min(0, value) - minValue) / range) * 100 : 0
+  const pct = range > 0 ? (Math.abs(value) / range) * 100 : 0
+  const hasZeroTick = zeroTick && minValue < 0 && maxValue > 0
   // Width + color rendered as inline `style` (not `sx`) to avoid
   // generating a new emotion class for every distinct value/color pair
   // — also makes the rendered DOM testable without computed-style math.
   return (
-    <Box sx={styles.bar[size]} data-size={size}>
+    <ZeroTickWrap zeroPct={hasZeroTick ? (-minValue / range) * 100 : undefined}>
+      <Box sx={styles.bar[size]} data-size={size}>
+        <Box
+          sx={styles.barFill[size]}
+          style={{
+            left: `${leftPct}%`,
+            width: `${pct}%`,
+            backgroundColor: color,
+            // The end that grows out of the zero is square; only the far
+            // end keeps the rounded corners.
+            ...(value < 0
+              ? { borderTopRightRadius: 0, borderBottomRightRadius: 0 }
+              : { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }),
+          }}
+          // Tag the fill so an ancestor row's `:hover` selector can target
+          // it (`&:hover [data-bar-fill]`) — the brightening affordance now
+          // fires from anywhere in the row, not only the bar track.
+          data-bar-fill='true'
+        />
+      </Box>
+    </ZeroTickWrap>
+  )
+}
+
+/**
+ * Wraps a bar track and, when `zeroPct` is set, marks the zero with a tick
+ * that overhangs the track. Positive-only, negative-only and all-zero bars
+ * pass `undefined` and get no tick.
+ */
+export function ZeroTickWrap({
+  zeroPct,
+  children,
+}: {
+  zeroPct: number | undefined
+  children: ReactNode
+}) {
+  if (zeroPct === undefined) return children
+  return (
+    <Box sx={styles.barWrap}>
       <Box
-        sx={styles.barFill[size]}
-        style={{ width: `${pct}%`, backgroundColor: color }}
-        // Tag the fill so an ancestor row's `:hover` selector can target
-        // it (`&:hover [data-bar-fill]`) — the brightening affordance now
-        // fires from anywhere in the row, not only the bar track.
-        data-bar-fill='true'
+        aria-hidden
+        data-zero-tick='true'
+        sx={styles.zeroTick}
+        style={{ left: `${zeroPct}%` }}
       />
+      {children}
     </Box>
   )
 }

package/src/widgets/category/components/category-row-multi.tsx

@@ -16,6 +16,8 @@ export interface CategoryRowMultiProps {
   colors: readonly CssColor[]
   /** Shared max across all series + rows (or `maxOverride`). */
   maxValue: number
+  /** Lower end of the shared domain (`0` for positive-only data). */
+  minValue?: number
   formatter: (n: number) => string
   selected: boolean
   onToggle: (name: CategoryKey) => void
@@ -41,11 +43,13 @@ export function CategoryRowMulti({
   values,
   colors,
   maxValue,
+  minValue,
   formatter,
   selected,
   onToggle,
   size,
 }: CategoryRowMultiProps) {
+  const min = minValue ?? 0
   const handleKey = (e: KeyboardEvent<HTMLDivElement>): void => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault()
@@ -64,6 +68,21 @@ export function CategoryRowMulti({
       <Typography variant='body2' sx={styles.multiName}>
         {displayName ?? name}
       </Typography>
+      {min < 0 && maxValue > 0 && (
+        <Box
+          aria-hidden
+          sx={styles.multiZeroArea}
+          // Row 1 is the label; the bars fill the next `values.length` rows.
+          // Placed before the bars so their tracks paint over the line.
+          style={{ gridRow: `2 / span ${values.length}` }}
+        >
+          <Box
+            data-zero-tick='true'
+            sx={styles.zeroTick}
+            style={{ left: `${(-min / (maxValue - min)) * 100}%` }}
+          />
+        </Box>
+      )}
       {values.map((v, i) => (
         // Multi-bar rows iterate per series — the bar belongs to series `i`,
         // and the row is keyed on the parent's `name`, so a composite of
@@ -73,8 +92,10 @@ export function CategoryRowMulti({
             <CategoryBar
               value={v}
               maxValue={maxValue}
+              minValue={minValue}
               color={colors[i] ?? ''}
               size={size}
+              zeroTick={false}
             />
           </Box>
           <Typography variant='body2' sx={styles.value}>

package/src/widgets/category/components/category-row-single.tsx

@@ -12,6 +12,8 @@ export interface CategoryRowSingleProps {
   displayName?: string | number
   value: number
   maxValue: number
+  /** Lower end of the shared domain (`0` for positive-only data). */
+  minValue?: number
   color: CssColor
   formatter: (n: number) => string
   selected: boolean
@@ -37,6 +39,7 @@ export function CategoryRowSingle({
   displayName,
   value,
   maxValue,
+  minValue,
   color,
   formatter,
   selected,
@@ -69,6 +72,7 @@ export function CategoryRowSingle({
       <CategoryBar
         value={value}
         maxValue={maxValue}
+        minValue={minValue}
         color={color}
         size={size}
       />

package/src/widgets/category/components/category-row-stacked.tsx

@@ -26,6 +26,11 @@ export interface CategoryRowStackedProps {
   onToggle: (name: CategoryKey) => void
   /** Bar visual density. Forwarded to the inner {@link CategoryBarStacked}. */
   size?: CategorySize
+  /**
+   * Where the list's zero sits (% of the track), shared by every row so the
+   * zero lines up: `0` positive-only, `50` signed, `100` negative-only.
+   */
+  zeroPct?: number
 }
 
 /**
@@ -41,6 +46,10 @@ export interface CategoryRowStackedProps {
  * total relative to other rows. The total numeric value is still shown in
  * the header so the per-row magnitude isn't lost.
  *
+ * Signed data diverges from `zeroPct`: positives stack rightwards and
+ * negatives leftwards, and whichever side is longer reaches its edge of the
+ * track. The header total is the signed sum.
+ *
  * Visual selection / dim signal lives entirely in the segment colors
  * (`colors` prop) — every series in a dimmed row receives
  * `theme.palette.action.disabled`. The bar visually collapses to a single
@@ -57,6 +66,7 @@ export function CategoryRowStacked({
   selected,
   onToggle,
   size,
+  zeroPct = 0,
 }: CategoryRowStackedProps) {
   const handleKey = (e: KeyboardEvent<HTMLDivElement>): void => {
     if (e.key === 'Enter' || e.key === ' ') {
@@ -65,6 +75,18 @@ export function CategoryRowStacked({
     }
   }
   const total = values.reduce((a, b) => a + b, 0)
+  let pos = 0
+  let neg = 0
+  for (const v of values) {
+    if (v > 0) pos += v
+    else neg -= v
+  }
+  // Magnitude that would fill the whole track, picked so the longer side
+  // just reaches its edge: `pos` spans `100 - zeroPct`, `neg` spans `zeroPct`.
+  const scale = Math.max(
+    zeroPct < 100 ? (pos * 100) / (100 - zeroPct) : 0,
+    zeroPct > 0 ? (neg * 100) / zeroPct : 0,
+  )
   return (
     <Box
       role='button'
@@ -85,7 +107,8 @@ export function CategoryRowStacked({
       <CategoryBarStacked
         values={values}
         colors={colors}
-        maxValue={total}
+        maxValue={scale}
+        zeroPct={zeroPct}
         size={size}
       />
       <Box sx={styles.stackedBreakdown}>

package/src/widgets/category/style.ts

@@ -28,17 +28,19 @@ const bar: Record<CategorySize, SxProps<Theme>> = {
 const barFill: Record<CategorySize, SxProps<Theme>> = {
   small: {
     position: 'absolute',
-    inset: '0 auto 0 0',
+    top: 0,
+    bottom: 0,
     borderRadius: 1,
     transition:
-      'width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease',
+      'left 300ms ease-in-out, width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease',
   },
   medium: {
     position: 'absolute',
-    inset: '0 auto 0 0',
+    top: 0,
+    bottom: 0,
     borderRadius: 0.25,
     transition:
-      'width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease',
+      'left 300ms ease-in-out, width 300ms ease-in-out, background-color 150ms ease, filter 150ms ease',
   },
 }
 
@@ -71,13 +73,47 @@ export const styles = {
     position: 'relative',
     width: '100%',
   },
-  // Flat list of category rows. Holds both single + multi rows.
+  // Flat list of category rows. A grid rather than a flex column so the
+  // multi-series rows can share one value column through `subgrid`: with
+  // every bar track the same width, the zero ticks line up across rows.
   list: {
-    display: 'flex',
-    flexDirection: 'column',
+    position: 'relative',
+    display: 'grid',
+    gridTemplateColumns: 'minmax(0, 1fr)',
     gap: 1,
     py: 0.5,
   },
+  // Layered on `list` for unstacked multi-series: bars | values.
+  listMulti: {
+    gridTemplateColumns: 'minmax(0, 1fr) max-content',
+  },
+  // Zero tick for signed data: one per bar track, drawn outside the track's
+  // `overflow: hidden` so it can stand 6px proud of it on both sides.
+  // Tracks share a width (see `listMulti`), so the ticks line up by rows.
+  barWrap: {
+    position: 'relative',
+  },
+  // Multi-series rows draw one zero line through every series bar instead
+  // of a tick per bar: this box is the row's bar column (grid area set
+  // inline) and holds a `zeroTick`, so the line stays out of the label.
+  multiZeroArea: {
+    position: 'absolute',
+    inset: 0,
+    gridColumn: '1 / 2',
+    pointerEvents: 'none',
+  },
+  zeroTick: {
+    position: 'absolute',
+    top: -6,
+    bottom: -6,
+    width: '1px',
+    // Centred on the zero so both halves of the bar meet it evenly. No
+    // z-index: it comes before the track in the DOM, so the bar paints over
+    // it and only the overhang shows.
+    transform: 'translateX(-50%)',
+    bgcolor: 'text.disabled',
+    pointerEvents: 'none',
+  },
   // Layered on `list` only in scroll mode (`maxItems === 0`): right padding
   // so the bars + right-aligned values clear the scrollbar. Right side only
   // — the left edge stays at 0 so content stays aligned with the capped
@@ -91,6 +127,7 @@ export const styles = {
   // bar fills the row width below. Mirrors `rowMulti` for visual
   // consistency.
   rowSingle: {
+    gridColumn: '1 / -1',
     display: 'flex',
     flexDirection: 'column',
     gap: 0.5,
@@ -124,10 +161,14 @@ export const styles = {
   // Flex column: label fills the top row; bar+value pairs stack below.
   // Bars get full track width — better legibility for N>=2 series than a
   // shared grid would give.
+  // Spans the list and adopts its columns, so every row's value column is
+  // as wide as the widest value in the list.
   rowMulti: {
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 0.5,
+    position: 'relative',
+    gridColumn: '1 / -1',
+    display: 'grid',
+    gridTemplateColumns: 'subgrid',
+    rowGap: 0.5,
     // py: 0.5,
     // px: 0.5,
     cursor: 'pointer',
@@ -155,6 +196,7 @@ export const styles = {
     fontWeight: 'medium',
   },
   multiName: {
+    gridColumn: '1 / -1',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
@@ -171,6 +213,7 @@ export const styles = {
     // minWidth here is also harmless in that context.
     minWidth: 48,
     textAlign: 'right',
+    alignSelf: 'center',
   },
 
   // ── Bar (track + fill) ────────────────────────────────────────────
@@ -184,13 +227,12 @@ export const styles = {
 
   // ── Multi-series internals ────────────────────────────────────────
   // One [bar | value] flex row per series, inside `rowMulti`'s column.
+  // `contents` hands the bar and the value to `rowMulti`'s subgrid cells.
   multiBarRow: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 1,
+    display: 'contents',
   },
   multiBarContainer: {
-    flex: 1,
+    alignSelf: 'center',
   },
 
   // ── Stacked-mode row ──────────────────────────────────────────────
@@ -198,6 +240,7 @@ export const styles = {
   // focus ring) but stack three children vertically: header line, bar,
   // breakdown line.
   rowStacked: {
+    gridColumn: '1 / -1',
     display: 'flex',
     flexDirection: 'column',
     gap: 0.5,
@@ -285,6 +328,7 @@ export const styles = {
   // (no parentheses). Only the label is the click target when interactive;
   // the count is always static text beside it.
   otherRow: {
+    gridColumn: '1 / -1',
     display: 'flex',
     alignItems: 'center',
     gap: 1,