@carto/ps-react-ui 4.4.2 → 4.4.3

package/dist/widgets/utils.js

@@ -1,5 +1,6 @@
-import { d as i } from "../formatter-B1Xh8XDH.js";
-import { a as l, b as p, c, d as f, e as d, f as m, g as u, h as C, i as b, j as g, n as x, s as F } from "../styles-C_8vOEep.js";
+import { d as i, a as n } from "../formatter-B9Bxn1k7.js";
+import { c as f, f as p, s as c } from "../download-config-Dqu78h2a.js";
+import { a as m, b as u, c as C, d as b, e as x, f as g, g as F, h as y, n as A } from "../styles-Y8q7Jff3.js";
 function r({
   type: a,
   getOptions: e
@@ -13,19 +14,20 @@ function r({
   };
 }
 export {
-  l as applyXAxisFormatter,
-  p as applyYAxisFormatter,
-  c as baseSkeletonStyles,
-  f as buildGridConfig,
-  d as buildLegendConfig,
-  m as createAxisLabelFormatter,
-  u as createChartDownloadConfig,
+  m as applyXAxisFormatter,
+  u as applyYAxisFormatter,
+  C as baseSkeletonStyles,
+  b as buildGridConfig,
+  x as buildLegendConfig,
+  g as createAxisLabelFormatter,
+  f as createChartDownloadConfig,
   r as createChartWidgetConfig,
-  C as createTooltipFormatter,
-  b as createTooltipPositioner,
+  F as createTooltipFormatter,
+  y as createTooltipPositioner,
   i as defaultFormatter,
-  g as flattenObjectArrayToCSV,
-  x as niceNum,
-  F as scatterplotDataToCSV
+  n as defaultLabelFormatter,
+  p as flattenObjectArrayToCSV,
+  A as niceNum,
+  c as scatterplotDataToCSV
 };
 //# sourceMappingURL=utils.js.map

package/dist/widgets/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/widgets/utils/chart-config/config-factory.ts"],"sourcesContent":["import type { EchartOptionsProps, EchartWidgetData } from '../../echart'\n\n/**\n * Base configuration interface for chart widgets\n */\nexport interface ChartWidgetBaseConfig<TData = EchartWidgetData> {\n  data?: TData\n}\n\n/**\n * Parameters for creating a chart widget configuration\n */\nexport interface CreateChartWidgetConfigParams<\n  TData = EchartWidgetData,\n  TConfig extends ChartWidgetBaseConfig<TData> = ChartWidgetBaseConfig<TData>,\n  TType extends string = string,\n> {\n  /** Widget type identifier (e.g., 'bar', 'pie', 'histogram') */\n  type: TType\n  /** Function to get EChart options from config */\n  getOptions: (config: TConfig) => EchartOptionsProps\n}\n\n/**\n * Return type of the chart widget config function\n */\nexport type ChartWidgetConfigResult<\n  TData = EchartWidgetData,\n  TConfig extends ChartWidgetBaseConfig<TData> = ChartWidgetBaseConfig<TData>,\n  TType extends string = string,\n> = TConfig & {\n  type: TType\n}\n\n/**\n * Factory function to create a standardized chart widget config function.\n * This eliminates duplication across chart widgets by providing a common structure.\n *\n * @example\n * ```ts\n * export const barConfig = createChartWidgetConfig({\n *   type: 'bar' as const,\n *   getOptions: ({ data, theme }) => ({\n *     // EChart configuration\n *   }),\n *   csvModifier: (data) => flattenObjectArrayToCSV(data),\n * })\n * ```\n */\nexport function createChartWidgetConfig<\n  TData = EchartWidgetData,\n  TConfig extends ChartWidgetBaseConfig<TData> = ChartWidgetBaseConfig<TData>,\n  TType extends string = string,\n>({\n  type,\n  getOptions,\n}: CreateChartWidgetConfigParams<TData, TConfig, TType>): (\n  config: TConfig,\n) => ChartWidgetConfigResult<TData, TConfig, TType> {\n  return function (config: TConfig) {\n    return {\n      ...config,\n      option: getOptions(config),\n      type: type,\n    } as ChartWidgetConfigResult<TData, TConfig, TType>\n  }\n}\n"],"names":["createChartWidgetConfig","type","getOptions","config","option"],"mappings":";;AAiDO,SAASA,EAId;AAAA,EACAC,MAAAA;AAAAA,EACAC,YAAAA;AACoD,GAEF;AAClD,SAAO,SAAUC,GAAiB;AAChC,WAAO;AAAA,MACL,GAAGA;AAAAA,MACHC,QAAQF,EAAWC,CAAM;AAAA,MACzBF,MAAAA;AAAAA,IAAAA;AAAAA,EAEJ;AACF;"}
+{"version":3,"file":"utils.js","sources":["../../src/widgets/utils/chart-config/config-factory.ts"],"sourcesContent":["import type { EchartOptionsProps, EchartWidgetData } from '../../echart'\n\n/**\n * Base configuration interface for chart widgets\n */\nexport interface ChartWidgetBaseConfig<TData = EchartWidgetData> {\n  data?: TData\n}\n\n/**\n * Parameters for creating a chart widget configuration\n */\nexport interface CreateChartWidgetConfigParams<\n  TData = EchartWidgetData,\n  TConfig extends ChartWidgetBaseConfig<TData> = ChartWidgetBaseConfig<TData>,\n  TType extends string = string,\n> {\n  /** Widget type identifier (e.g., 'bar', 'pie', 'histogram') */\n  type: TType\n  /** Function to get EChart options from config */\n  getOptions: (config: TConfig) => EchartOptionsProps\n}\n\n/**\n * Return type of the chart widget config function\n */\nexport type ChartWidgetConfigResult<\n  TData = EchartWidgetData,\n  TConfig extends ChartWidgetBaseConfig<TData> = ChartWidgetBaseConfig<TData>,\n  TType extends string = string,\n> = TConfig & {\n  type: TType\n}\n\n/**\n * Factory function to create a standardized chart widget config function.\n * This eliminates duplication across chart widgets by providing a common structure.\n *\n * @example\n * ```ts\n * export const barConfig = createChartWidgetConfig({\n *   type: 'bar' as const,\n *   getOptions: ({ data, theme }) => ({\n *     // EChart configuration\n *   }),\n *   csvModifier: (data) => flattenObjectArrayToCSV(data),\n * })\n * ```\n */\nexport function createChartWidgetConfig<\n  TData = EchartWidgetData,\n  TConfig extends ChartWidgetBaseConfig<TData> = ChartWidgetBaseConfig<TData>,\n  TType extends string = string,\n>({\n  type,\n  getOptions,\n}: CreateChartWidgetConfigParams<TData, TConfig, TType>): (\n  config: TConfig,\n) => ChartWidgetConfigResult<TData, TConfig, TType> {\n  return function (config: TConfig) {\n    return {\n      ...config,\n      option: getOptions(config),\n      type: type,\n    } as ChartWidgetConfigResult<TData, TConfig, TType>\n  }\n}\n"],"names":["createChartWidgetConfig","type","getOptions","config","option"],"mappings":";;;AAiDO,SAASA,EAId;AAAA,EACAC,MAAAA;AAAAA,EACAC,YAAAA;AACoD,GAEF;AAClD,SAAO,SAAUC,GAAiB;AAChC,WAAO;AAAA,MACL,GAAGA;AAAAA,MACHC,QAAQF,EAAWC,CAAM;AAAA,MACzBF,MAAAA;AAAAA,IAAAA;AAAAA,EAEJ;AACF;"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "4.4.2",
+  "version": "4.4.3",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {
-    "@carto/meridian-ds": "2.10.1",
+    "@carto/meridian-ds": "2.14.0",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
@@ -14,15 +14,16 @@
     "echarts": "6.0.0",
     "html2canvas": "1.4.1",
     "react-markdown": "10.1.0",
-    "zustand": "5.0.11",
+    "zustand": "5.0.12",
     "@carto/ps-common-types": "1.0.0",
     "@carto/ps-utils": "2.0.1"
   },
   "peerDependencies": {
+    "@carto/meridian-ds": "^2.0.0",
     "@dnd-kit/core": "^6.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.0.0",
-    "@emotion/styled": "^11.14.1",
+    "@emotion/styled": "^11.0.0",
     "@mui/icons-material": "^5.0.0",
     "@mui/material": "^5.0.0",
     "echarts": "^6.0.0",

package/src/widgets/README.md

@@ -70,7 +70,7 @@ export const myWidgetConfig = createChartWidgetConfig({
   type: 'my-widget',
   getOptions: ({ data, theme }) => ({
     // EChart configuration
-    legend: buildLegendConfig(hasLegend),
+    legend: buildLegendConfig({ hasLegend }),
     // ...
   }),
   csvModifier: (data) => flattenObjectArrayToCSV(data),
@@ -88,7 +88,7 @@ export const myWidgetConfig = createChartWidgetConfig({
 
 **File:** `utils/chart-config/option-builders.ts`
 
-- `buildLegendConfig(hasLegend)` - Standard legend configuration
+- `buildLegendConfig({ hasLegend, labelFormatter? })` - Standard legend configuration
 - `buildGridConfig(hasLegend, theme, additionalConfig?)` - Grid with legend-aware spacing
 - `createTooltipPositioner(theme)` - Tooltip positioning with overflow handling
 
@@ -159,7 +159,7 @@ export const myWidgetConfig = createChartWidgetConfig({
    }: Omit<MyConfig, 'refUI'>): EchartOptionsProps {
      const hasLegend = (data?.length ?? 0) > 1
      return {
-       legend: buildLegendConfig(hasLegend),
+       legend: buildLegendConfig({ hasLegend }),
        grid: buildGridConfig(hasLegend, theme),
        // ... widget-specific configuration
      }

package/src/widgets/actions/brush-toggle/brush-toggle.tsx

@@ -2,15 +2,11 @@ import { Box, IconButton } from '@mui/material'
 import { HighlightAltOutlined } from '@mui/icons-material'
 import { useEffect, useCallback, useRef } from 'react'
 import { useWidgetStore } from '../../stores/widget-store'
-import type { BrushToggleProps } from './types'
+import type { BrushSelectedItems, BrushToggleProps } from './types'
 import { styles } from './style'
 import { Tooltip } from '../../../components'
 import { getEChartBrushConfig } from '../../echart/utils'
-import type {
-  EchartOptionsProps,
-  EchartWidgetData,
-  EchartWidgetState,
-} from '../../echart/types'
+import type { EchartOptionsProps, EchartWidgetState } from '../../echart/types'
 import { useShallow } from 'zustand/shallow'
 
 export const BRUSH_TOGGLE_TOOL_ID = 'brush-toggle'
@@ -44,7 +40,7 @@ export function BrushToggle({
   const registerTool = useWidgetStore((state) => state.registerTool)
   const unregisterTool = useWidgetStore((state) => state.unregisterTool)
   const setToolEnabled = useWidgetStore((state) => state.setToolEnabled)
-  const selected = useRef<(string | number)[]>([])
+  const selected = useRef<BrushSelectedItems>({ dataIndex: [], seriesIndex: 0 })
 
   const brushTool = useWidgetStore(
     useShallow((state) => {
@@ -67,7 +63,7 @@ export function BrushToggle({
     toggleTool(newBrush)
 
     if (newBrush) {
-      onBrushSelected?.([])
+      onBrushSelected?.({ dataIndex: [], seriesIndex: 0 }) // Clear selection when enabling brush
     }
   }, [brush, onBrushSelected, toggleTool])
 
@@ -102,46 +98,47 @@ export function BrushToggle({
   }, [brush, getWidget, id])
 
   // Handle brushSelected event to capture selected bar indices
-  const handleBrushSelected = useCallback(
-    (event: unknown) => {
-      const brushEvent = event as {
-        batch?: {
-          selected?: {
-            dataIndex?: number[]
-            seriesIndex?: number
-          }[]
+  const handleBrushSelected = useCallback((event: unknown) => {
+    const brushEvent = event as {
+      batch?: {
+        selected?: {
+          dataIndex?: number[]
+          seriesIndex?: number
         }[]
+      }[]
+    }
+
+    const allSelected =
+      brushEvent.batch?.flatMap((batchItem) => batchItem.selected ?? []) ?? []
+
+    if (!allSelected.length) {
+      selected.current = {
+        dataIndex: [],
+        seriesIndex: 0,
       }
+      return
+    }
 
-      // Resolve names from the widget dataset
-      const widget = getWidget(id)
-      const data = (widget?.data ?? []) as EchartWidgetData
-
-      const items = [
-        ...new Set(
-          brushEvent.batch?.flatMap(
-            (batch) =>
-              batch.selected?.flatMap(
-                (sel) =>
-                  sel.dataIndex?.map((dataIndex) => {
-                    const row = data[sel.seriesIndex ?? 0]?.[dataIndex]
-                    const firstValue = row ? Object.values(row)[0] : undefined
-                    const name =
-                      typeof firstValue === 'string' ||
-                      typeof firstValue === 'number'
-                        ? String(firstValue)
-                        : String(dataIndex)
-                    return name
-                  }) ?? [],
-              ) ?? [],
-          ),
-        ),
-      ]
-
-      selected.current = items ?? []
-    },
-    [getWidget, id],
-  )
+    // Use the first seriesIndex as the primary one (matches previous behavior)
+    const primarySeriesIndex = allSelected[0]?.seriesIndex ?? 0
+
+    const mergedDataIndex = Array.from(
+      new Set(
+        allSelected
+          .filter(
+            (item) =>
+              item.seriesIndex === undefined ||
+              item.seriesIndex === primarySeriesIndex,
+          )
+          .flatMap((item) => item.dataIndex ?? []),
+      ),
+    )
+
+    selected.current = {
+      dataIndex: mergedDataIndex,
+      seriesIndex: primarySeriesIndex,
+    }
+  }, [])
 
   const handleBrushEnd = useCallback(() => {
     onBrushSelected?.(selected.current)
@@ -169,8 +166,6 @@ export function BrushToggle({
 
         const brushConfig = getEChartBrushConfig()
 
-        const onEventsWithoutBrush = { ...currentOnEvents }
-        delete onEventsWithoutBrush.brushSelected
         const onEvents = {
           ...currentOnEvents,
           brushSelected: handleBrushSelected,

package/src/widgets/actions/brush-toggle/types.ts

@@ -3,9 +3,15 @@ import type { ReactNode } from 'react'
 import type { BaseWidgetState } from '../../stores/types'
 
 /**
- * Represents a single item selected by the brush
+ * Brush selection result emitted by BrushToggle.
+ * Contains raw indices so consumers can resolve data according to their widget type.
  */
-export type BrushSelectedItems = (string | number)[]
+export interface BrushSelectedItems {
+  /** Data indices of the selected items in the dataset */
+  dataIndex: number[]
+  /** Series index from the brush event (defaults to 0) */
+  seriesIndex: number
+}
 
 /**
  * State stored in widget store for brush functionality

package/src/widgets/bar/config.ts

@@ -11,6 +11,7 @@ import {
   createTooltipPositioner,
   createTooltipFormatter,
   createChartDownloadConfig,
+  applyXAxisFormatter,
   niceNum,
 } from '../utils/chart-config'
 
@@ -29,6 +30,7 @@ export function barConfig(props: BarConfig): BarWidgetConfig {
     type: 'bar',
     option: mergeEchartWidgetConfig(getCommonOptions(props), getOption(props)),
     formatter: props.formatter,
+    labelFormatter: props.labelFormatter,
   }
 }
 
@@ -36,6 +38,7 @@ function getOption({
   data = [],
   theme,
   formatter,
+  labelFormatter,
 }: BarConfig): EchartOptionsProps {
   const hasLegend = (data?.length ?? 0) > 1
 
@@ -43,21 +46,24 @@ function getOption({
   let niceMax = 1
 
   return {
-    legend: buildLegendConfig(hasLegend),
+    legend: buildLegendConfig({ hasLegend, labelFormatter }),
     grid: buildGridConfig(hasLegend, theme),
-    xAxis: {
-      type: 'category',
-      axisLine: {
-        show: false,
-      },
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],
-        margin: 0,
+    xAxis: applyXAxisFormatter(
+      {
+        type: 'category',
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],
+          margin: 0,
+        },
       },
-    },
+      labelFormatter,
+    ),
     yAxis: {
       type: 'value' as const,
       min: (extent: { min: number }) => {
@@ -110,7 +116,9 @@ function getOption({
 
         const marker = typeof item.marker === 'string' ? item.marker : ''
         const seriesName = item.seriesName ? `${item.seriesName}: ` : ''
-        const name = item.name ?? ''
+        const name = labelFormatter
+          ? String(labelFormatter(item.name ?? ''))
+          : (item.name ?? '')
 
         return { name, seriesName, marker, value: formattedValue }
       }),

package/src/widgets/category/category-ui.tsx

@@ -10,7 +10,7 @@ import {
 } from './components'
 import { useShallow } from 'zustand/shallow'
 import { useState } from 'react'
-import { defaultFormatter } from '../utils/formatter'
+import { defaultFormatter, defaultLabelFormatter } from '../utils/formatter'
 
 /**
  * Renders a category widget displaying horizontal bars for categorical data with support for single and multi-series layouts, selection, and overflow grouping.
@@ -20,6 +20,11 @@ export function CategoryUI({ id }: CategoryUIProps) {
   const _formatter = useWidgetStore(
     useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.formatter),
   )
+  const _labelFormatter = useWidgetStore(
+    useShallow(
+      (state) => state.getWidget<CategoryWidgetState>(id)?.labelFormatter,
+    ),
+  )
   const _series = useWidgetStore(
     useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.series),
   )
@@ -43,6 +48,7 @@ export function CategoryUI({ id }: CategoryUIProps) {
   )
 
   const formatter = _formatter ?? defaultFormatter
+  const labelFormatter = _labelFormatter ?? defaultLabelFormatter
   const series = _series ?? []
 
   const [maxHeight] = useState<string | number | undefined>(
@@ -100,6 +106,7 @@ export function CategoryUI({ id }: CategoryUIProps) {
                 maxValue={maxValue}
                 colors={colors}
                 formatter={formatter}
+                labelFormatter={labelFormatter}
                 onClick={onRowClick}
                 selected={selected?.(item.name) ?? true}
               />
@@ -113,6 +120,7 @@ export function CategoryUI({ id }: CategoryUIProps) {
                 maxValue={maxValue}
                 color={colors[0]!}
                 formatter={formatter}
+                labelFormatter={labelFormatter}
                 onClick={onRowClick}
               />
             ))}

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

@@ -9,6 +9,7 @@ export interface CategoryRowMultiProps {
   maxValue: number
   colors: string[]
   formatter: NonNullable<CategoryWidgetConfig['formatter']>
+  labelFormatter?: CategoryWidgetConfig['labelFormatter']
   onClick?: CategoryWidgetConfig['onRowClick']
   selected?: boolean
 }
@@ -22,6 +23,7 @@ export function CategoryRowMulti({
   maxValue,
   colors,
   formatter,
+  labelFormatter,
   onClick,
   selected = true,
 }: CategoryRowMultiProps) {
@@ -30,10 +32,12 @@ export function CategoryRowMulti({
 
   return (
     <Box sx={rowStyle} onClick={handleClick}>
-      <Typography sx={styles.rowLabel}>{name}</Typography>
+      <Typography sx={styles.rowLabel}>
+        {labelFormatter ? labelFormatter(name) : name}
+      </Typography>
       <Box sx={styles.barContainer}>
         {values.map((value, index) => (
-          <Box key={`${name}-${value}`} sx={styles.multiBarRow}>
+          <Box key={`${name}-${value}-${index}`} sx={styles.multiBarRow}>
             <Box sx={styles.multiBarContainer}>
               <CategoryBar
                 value={value}

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

@@ -9,6 +9,7 @@ export interface CategoryRowSingleProps {
   maxValue: number
   color: string
   formatter: NonNullable<CategoryWidgetConfig['formatter']>
+  labelFormatter?: CategoryWidgetConfig['labelFormatter']
   onClick?: CategoryWidgetConfig['onRowClick']
   selected?: boolean
 }
@@ -22,6 +23,7 @@ export function CategoryRowSingle({
   maxValue,
   color,
   formatter,
+  labelFormatter,
   onClick,
   selected = true,
 }: CategoryRowSingleProps) {
@@ -36,7 +38,9 @@ export function CategoryRowSingle({
   return (
     <Box sx={rowStyle} onClick={handleClick}>
       <Box sx={styles.rowHeader}>
-        <Typography sx={styles.rowLabel}>{name}</Typography>
+        <Typography sx={styles.rowLabel}>
+          {labelFormatter ? labelFormatter(name) : name}
+        </Typography>
         <Typography sx={styles.rowValue}>{formatter(value)}</Typography>
       </Box>
       <CategoryBar

package/src/widgets/category/types.ts

@@ -29,6 +29,7 @@ export type CategoryWidgetState = BaseWidgetState<
 
 export interface CategoryWidgetConfig {
   formatter?: (value: number) => string
+  labelFormatter?: (value: string | number) => string | number
   series?: CategorySeriesConfig[]
   maxItems?: number
   labels?: CategoryLabels

package/src/widgets/echart/types.ts

@@ -33,6 +33,7 @@ export interface EchartWidgetOptionProps<D> {
   data?: D
   theme: typeof CartoTheme
   formatter?: (value: number) => string
+  labelFormatter?: (value: string | number) => string | number
 }
 
 export interface EchartWidgetProps {
@@ -40,4 +41,5 @@ export interface EchartWidgetProps {
   option: EchartUIProps['option']
   onEvents?: EchartUIProps['onEvents']
   formatter?: (value: number) => string
+  labelFormatter?: (value: string | number) => string | number
 }

package/src/widgets/histogram/config.ts

@@ -3,27 +3,104 @@ import {
   mergeEchartWidgetConfig,
   type EchartOptionsProps,
 } from '../echart'
-import type {
-  HistogramConfig,
-  HistogramWidgetConfig,
-  HistogramWidgetData,
-} from './types'
+import type { HistogramConfig, HistogramWidgetConfig } from './types'
 import {
-  flattenObjectArrayToCSV,
   buildLegendConfig,
   buildGridConfig,
   createTooltipPositioner,
   createTooltipFormatter,
-  createChartDownloadConfig,
   niceNum,
 } from '../utils/chart-config'
+import { downloadToCSV, downloadToPNG, type DownloadItem } from '../actions'
+import type { ConfigProps } from '../loader/types'
+
+export interface HistogramDownloadConfigProps extends ConfigProps {
+  ticks: number[]
+  labelFormatter?: (value: string | number) => string | number
+}
+
+export function histogramDataToCSV(
+  data: number[][],
+  ticks: number[],
+  labelFormatter?: (value: string | number) => string | number,
+): string[][] {
+  if (!data?.length || data[0]?.length === 0) return []
+
+  const dataLength = data[0]?.length ?? 0
+  const labels = createAxisLabels(dataLength, ticks, labelFormatter)
+  const seriesCount = data.length
+  const isMulti = seriesCount > 1
+
+  const headers = isMulti
+    ? [
+        'Bin',
+        ...Array.from({ length: seriesCount }, (_, i) => `Series ${i + 1}`),
+      ]
+    : ['Bin', 'Value']
+
+  return [
+    headers,
+    ...labels.map((label, i) => [
+      label,
+      ...data.map((series) => String(series[i] ?? 0)),
+    ]),
+  ]
+}
+
+export function histogramDownloadConfig({
+  refUI,
+  ticks,
+  labelFormatter,
+}: HistogramDownloadConfigProps): DownloadItem<number[][]>[] {
+  return [
+    {
+      ...downloadToPNG,
+      modifier: () => downloadToPNG.modifier(refUI),
+    },
+    {
+      ...downloadToCSV,
+      modifier: async (data) =>
+        downloadToCSV.modifier(histogramDataToCSV(data, ticks, labelFormatter)),
+    },
+  ]
+}
 
-export const histogramDownloadConfig =
-  createChartDownloadConfig<HistogramWidgetData>(flattenObjectArrayToCSV)
 /**
- * Generates ECharts configuration for distribution histogram widgets with adjacent bars (minimal gap) and axis formatting styled with the CARTO theme.
+ * Creates formatted axis labels from tick boundaries.
  *
- * @param props - Histogram configuration including bin data and theme.
+ * @param dataLength - Number of data points (determines number of labels).
+ * @param ticks - Bin boundaries. If `ticks.length === dataLength + 1`, all
+ *   bins are ranges. If `ticks.length === dataLength`, the last bin is
+ *   open-ended (`+`). A last tick of `Infinity` also produces `+`.
+ * @param labelFormatter - Optional formatter applied to each individual tick
+ *   value when building the bin range label.
+ */
+function createAxisLabels(
+  dataLength: number,
+  ticks: number[],
+  labelFormatter?: (value: string | number) => string | number,
+): string[] {
+  const fmt = (v: number) =>
+    labelFormatter ? String(labelFormatter(v)) : String(v)
+
+  return Array.from({ length: dataLength }, (_, i) => {
+    const low = ticks[i] ?? i
+    const high = ticks[i + 1]
+    return high !== undefined && isFinite(high)
+      ? `${fmt(low)}-${fmt(high)}`
+      : `${fmt(low)}+`
+  })
+}
+
+/**
+ * Generates ECharts configuration for distribution histogram widgets with
+ * adjacent bars (minimal gap) and axis formatting styled with the CARTO theme.
+ *
+ * Accepts raw `number[][]` data and `ticks` boundaries. The ticks and
+ * `labelFormatter` are used to create the x-axis category labels; the raw
+ * numeric data is embedded directly in each series.
+ *
+ * @param props - Histogram configuration including raw data, ticks, and theme.
  * @returns Widget config with ECharts option object.
  */
 export function histogramConfig(props: HistogramConfig): HistogramWidgetConfig {
@@ -33,21 +110,27 @@ export function histogramConfig(props: HistogramConfig): HistogramWidgetConfig {
     formatter: props.formatter,
   }
 }
+
 function getOption({
   data = [],
+  ticks,
   theme,
   formatter,
+  labelFormatter,
 }: HistogramConfig): EchartOptionsProps {
   const hasLegend = (data?.length ?? 0) > 1
+  const dataLength = data[0]?.length ?? 0
+  const axisLabels = createAxisLabels(dataLength, ticks, labelFormatter)
 
   let niceMin = 0
   let niceMax = 1
 
   return {
-    legend: buildLegendConfig(hasLegend),
+    legend: buildLegendConfig({ hasLegend }),
     grid: buildGridConfig(hasLegend, theme),
     xAxis: {
       type: 'category',
+      data: axisLabels,
       axisLine: {
         show: false,
       },
@@ -117,14 +200,12 @@ function getOption({
     tooltip: {
       position: createTooltipPositioner(theme),
       formatter: createTooltipFormatter((item) => {
-        const value = item.value as Record<string, string | number>
-        const index = item.dimensionNames?.[item.encode?.y?.at(0) ?? 1]
-        const _value = value[index ?? '']
+        const _value = item.value as number
 
         const formattedValue =
           typeof _value === 'number' && formatter
             ? formatter(_value)
-            : (_value ?? '')
+            : String(_value ?? '')
 
         const marker = typeof item.marker === 'string' ? item.marker : ''
         const seriesName = item.seriesName ? `${item.seriesName}: ` : ''
@@ -133,11 +214,11 @@ function getOption({
         return { name, seriesName, marker, value: formattedValue }
       }),
     },
-    series: data.map((_: unknown, index: number) => ({
-      datasetIndex: index,
+    series: data.map((seriesData: number[]) => ({
       type: 'bar',
-      barGap: '1%', // No gap between bars in histogram
-      barCategoryGap: '1%', // No gap between categories in histogram
+      data: seriesData,
+      barGap: '1%',
+      barCategoryGap: '1%',
       emphasis: {
         focus: 'series',
       },

package/src/widgets/histogram/index.ts

@@ -4,5 +4,10 @@ export type {
   HistogramWidgetData,
   HistogramWidgetState,
 } from './types'
-export { histogramConfig, histogramDownloadConfig } from './config'
+export type { HistogramDownloadConfigProps } from './config'
+export {
+  histogramConfig,
+  histogramDataToCSV,
+  histogramDownloadConfig,
+} from './config'
 export { HistogramSkeleton } from './skeleton'