@carto/ps-react-ui 4.6.2 → 4.6.3

package/src/widgets/utils/chart-config/option-builders.test.ts

@@ -1,5 +1,10 @@
 import { describe, it, expect } from 'vitest'
-import { niceNum } from './option-builders'
+import type { CallbackDataParams } from 'echarts/types/dist/shared'
+import {
+  niceNum,
+  buildSeriesLabelConfig,
+  buildHistogramSeriesLabelConfig,
+} from './option-builders'
 
 describe('niceNum', () => {
   it('should return 0 for 0', () => {
@@ -38,3 +43,102 @@ describe('niceNum', () => {
     expect(niceNum(1)).toBe(1)
   })
 })
+
+describe('buildSeriesLabelConfig', () => {
+  it('should return empty object when no formatter provided', () => {
+    expect(buildSeriesLabelConfig()).toEqual({})
+    expect(buildSeriesLabelConfig(undefined)).toEqual({})
+  })
+
+  it('should return label config with formatter when formatter provided', () => {
+    const formatter = (v: number) => `$${v}`
+    const result = buildSeriesLabelConfig(formatter)
+    expect(result).toHaveProperty('label')
+    expect((result as { label: { formatter: unknown } }).label).toHaveProperty(
+      'formatter',
+    )
+  })
+
+  it('should format value from dataset params using y encode key', () => {
+    const formatter = (v: number) => `$${v}`
+    const result = buildSeriesLabelConfig(formatter, 'y')
+    const label = (
+      result as {
+        label: { formatter: (p: Partial<CallbackDataParams>) => string }
+      }
+    ).label
+    const params = {
+      encode: { y: [1] },
+      dimensionNames: ['category', 'amount'],
+      value: { category: 'A', amount: 42 },
+    }
+    expect(label.formatter(params as unknown as CallbackDataParams)).toBe('$42')
+  })
+
+  it('should format value from dataset params using x encode key', () => {
+    const formatter = (v: number) => `${v}%`
+    const result = buildSeriesLabelConfig(formatter, 'x')
+    const label = (
+      result as {
+        label: { formatter: (p: Partial<CallbackDataParams>) => string }
+      }
+    ).label
+    const params = {
+      encode: { x: [1] },
+      dimensionNames: ['name', 'value'],
+      value: { name: 'Foo', value: 75 },
+    }
+    expect(label.formatter(params as unknown as CallbackDataParams)).toBe('75%')
+  })
+
+  it('should return empty string when encode index is undefined', () => {
+    const formatter = (v: number) => `$${v}`
+    const result = buildSeriesLabelConfig(formatter, 'y')
+    const label = (
+      result as {
+        label: { formatter: (p: Partial<CallbackDataParams>) => string }
+      }
+    ).label
+    const params = {
+      encode: {},
+      dimensionNames: ['category', 'amount'],
+      value: { category: 'A', amount: 42 },
+    }
+    expect(label.formatter(params as unknown as CallbackDataParams)).toBe('')
+  })
+})
+
+describe('buildHistogramSeriesLabelConfig', () => {
+  it('should return empty object when no formatter provided', () => {
+    expect(buildHistogramSeriesLabelConfig()).toEqual({})
+    expect(buildHistogramSeriesLabelConfig(undefined)).toEqual({})
+  })
+
+  it('should format raw numeric value', () => {
+    const formatter = (v: number) => `${v} units`
+    const result = buildHistogramSeriesLabelConfig(formatter)
+    const label = (
+      result as {
+        label: { formatter: (p: Partial<CallbackDataParams>) => string }
+      }
+    ).label
+    const params = { value: 100 }
+    expect(label.formatter(params as unknown as CallbackDataParams)).toBe(
+      '100 units',
+    )
+  })
+
+  it('should stringify non-numeric values', () => {
+    const formatter = (v: number) => `${v} units`
+    const result = buildHistogramSeriesLabelConfig(formatter)
+    const label = (
+      result as {
+        label: { formatter: (p: Partial<CallbackDataParams>) => string }
+      }
+    ).label
+    const params = { value: 'text' }
+    expect(label.formatter(params as unknown as CallbackDataParams)).toBe(
+      'text',
+    )
+  })
+})

package/src/widgets/utils/chart-config/option-builders.ts

@@ -225,3 +225,59 @@ export function createTooltipFormatter(
     return tooltip(name, formattedValues.join(''))
   }
 }
+
+/**
+ * Builds a series `label` config that applies formatter to the data value
+ * extracted from a dataset row using ECharts encode/dimensionNames.
+ *
+ * Does not set `show` — labels remain hidden by default per ECharts defaults.
+ *
+ * @param formatter - Optional numeric value formatter
+ * @param encodeKey - The encode dimension key to extract ('y' for vertical charts, 'x' for horizontal)
+ */
+export function buildSeriesLabelConfig(
+  formatter?: (value: number) => string,
+  encodeKey = 'y',
+): { label: { formatter: (params: CallbackDataParams) => string } } | object {
+  if (!formatter) return {}
+
+  return {
+    label: {
+      formatter: (params: CallbackDataParams) => {
+        const encodeIndex = params.encode?.[encodeKey]?.[0]
+        if (encodeIndex === undefined) return ''
+        const dimName = params.dimensionNames?.[encodeIndex]
+        const row = params.value as Record<string, string | number>
+        const value = dimName ? row[dimName] : undefined
+        return typeof value === 'number'
+          ? formatter(value)
+          : String(value ?? '')
+      },
+    },
+  }
+}
+
+/**
+ * Builds a series `label` config that applies formatter to a raw numeric value.
+ * Used by histogram where series data is number[] (not datasets).
+ *
+ * Does not set `show` — labels remain hidden by default per ECharts defaults.
+ *
+ * @param formatter - Optional numeric value formatter
+ */
+export function buildHistogramSeriesLabelConfig(
+  formatter?: (value: number) => string,
+): { label: { formatter: (params: CallbackDataParams) => string } } | object {
+  if (!formatter) return {}
+
+  return {
+    label: {
+      formatter: (params: CallbackDataParams) => {
+        const value = params.value as number
+        return typeof value === 'number'
+          ? formatter(value)
+          : String(value ?? '')
+      },
+    },
+  }
+}

package/dist/options-D9wflre6.js

@@ -1,49 +0,0 @@
-function t({
-  theme: o
-}) {
-  return {
-    grid: {
-      left: parseInt(o.spacing(1)),
-      top: parseInt(o.spacing(3)),
-      right: parseInt(o.spacing(1)),
-      bottom: parseInt(o.spacing(4)),
-      containLabel: !0
-    },
-    toolbox: {
-      show: !1
-    },
-    tooltip: {
-      axisPointer: {
-        type: "shadow",
-        shadowStyle: {
-          color: "rgba(44,48,50, 0.08)"
-        }
-      },
-      backgroundColor: o.palette.grey[900],
-      borderWidth: 0,
-      padding: [parseInt(o.spacing(1)), parseInt(o.spacing(1))],
-      textStyle: {
-        color: o.palette.common.white,
-        fontSize: 11,
-        fontFamily: o.typography.caption.fontFamily
-      },
-      trigger: "axis"
-    },
-    legend: {
-      type: "scroll",
-      bottom: 0
-    },
-    axisPointer: {
-      lineStyle: {
-        color: o.palette.grey[400]
-      }
-    },
-    xAxis: {},
-    yAxis: {},
-    color: [o.palette.secondary.main, ...Object.values(o.palette.qualitative?.bold ?? {})]
-  };
-}
-export {
-  t as g
-};
-//# sourceMappingURL=options-D9wflre6.js.map

package/dist/options-D9wflre6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"options-D9wflre6.js","sources":["../src/widgets/echart/options.ts"],"sourcesContent":["import type { EchartOptionsProps, EchartWidgetOptionProps } from './types'\n\n/**\n * Returns the shared base ECharts options used across all EChart-based widgets (bar, pie, histogram, etc.).\n *\n * @remarks\n * Configures grid spacing, tooltip styling, legend, axis pointer, and the default color palette\n * derived from the MUI theme.\n */\nexport function getCommonOptions({\n  theme,\n}: EchartWidgetOptionProps<unknown>): EchartOptionsProps {\n  return {\n    grid: {\n      left: parseInt(theme.spacing(1)),\n      top: parseInt(theme.spacing(3)),\n      right: parseInt(theme.spacing(1)),\n      bottom: parseInt(theme.spacing(4)),\n      containLabel: true,\n    },\n    toolbox: {\n      show: false,\n    },\n    tooltip: {\n      axisPointer: {\n        type: 'shadow',\n        shadowStyle: {\n          color: 'rgba(44,48,50, 0.08)',\n        },\n      },\n      backgroundColor: theme.palette.grey[900],\n      borderWidth: 0,\n      padding: [parseInt(theme.spacing(1)), parseInt(theme.spacing(1))],\n      textStyle: {\n        color: theme.palette.common.white,\n        fontSize: 11,\n        fontFamily: theme.typography.caption.fontFamily,\n      },\n      trigger: 'axis',\n    },\n    legend: {\n      type: 'scroll',\n      bottom: 0,\n    },\n    axisPointer: {\n      lineStyle: {\n        color: theme.palette.grey[400],\n      },\n    },\n    xAxis: {},\n    yAxis: {},\n    color: [\n      theme.palette.secondary.main,\n      ...Object.values(\n        (theme.palette as { qualitative?: { bold?: Record<string, string> } })\n          .qualitative?.bold ?? {},\n      ),\n    ],\n  }\n}\n"],"names":["getCommonOptions","theme","grid","left","parseInt","spacing","top","right","bottom","containLabel","toolbox","show","tooltip","axisPointer","type","shadowStyle","color","backgroundColor","palette","grey","borderWidth","padding","textStyle","common","white","fontSize","fontFamily","typography","caption","trigger","legend","lineStyle","xAxis","yAxis","secondary","main","Object","values","qualitative","bold"],"mappings":"AASO,SAASA,EAAiB;AAAA,EAC/BC,OAAAA;AACgC,GAAuB;AACvD,SAAO;AAAA,IACLC,MAAM;AAAA,MACJC,MAAMC,SAASH,EAAMI,QAAQ,CAAC,CAAC;AAAA,MAC/BC,KAAKF,SAASH,EAAMI,QAAQ,CAAC,CAAC;AAAA,MAC9BE,OAAOH,SAASH,EAAMI,QAAQ,CAAC,CAAC;AAAA,MAChCG,QAAQJ,SAASH,EAAMI,QAAQ,CAAC,CAAC;AAAA,MACjCI,cAAc;AAAA,IAAA;AAAA,IAEhBC,SAAS;AAAA,MACPC,MAAM;AAAA,IAAA;AAAA,IAERC,SAAS;AAAA,MACPC,aAAa;AAAA,QACXC,MAAM;AAAA,QACNC,aAAa;AAAA,UACXC,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEFC,iBAAiBhB,EAAMiB,QAAQC,KAAK,GAAG;AAAA,MACvCC,aAAa;AAAA,MACbC,SAAS,CAACjB,SAASH,EAAMI,QAAQ,CAAC,CAAC,GAAGD,SAASH,EAAMI,QAAQ,CAAC,CAAC,CAAC;AAAA,MAChEiB,WAAW;AAAA,QACTN,OAAOf,EAAMiB,QAAQK,OAAOC;AAAAA,QAC5BC,UAAU;AAAA,QACVC,YAAYzB,EAAM0B,WAAWC,QAAQF;AAAAA,MAAAA;AAAAA,MAEvCG,SAAS;AAAA,IAAA;AAAA,IAEXC,QAAQ;AAAA,MACNhB,MAAM;AAAA,MACNN,QAAQ;AAAA,IAAA;AAAA,IAEVK,aAAa;AAAA,MACXkB,WAAW;AAAA,QACTf,OAAOf,EAAMiB,QAAQC,KAAK,GAAG;AAAA,MAAA;AAAA,IAC/B;AAAA,IAEFa,OAAO,CAAA;AAAA,IACPC,OAAO,CAAA;AAAA,IACPjB,OAAO,CACLf,EAAMiB,QAAQgB,UAAUC,MACxB,GAAGC,OAAOC,OACPpC,EAAMiB,QACJoB,aAAaC,QAAQ,CAAA,CAC1B,CAAC;AAAA,EAAA;AAGP;"}

package/dist/styles-Y8q7Jff3.js

@@ -1,118 +0,0 @@
-function u(t) {
-  if (t === 0) return 0;
-  const e = Math.abs(t), n = Math.pow(10, Math.floor(Math.log10(e))), i = Math.ceil(e / n) * n;
-  return t < 0 ? -i : i;
-}
-function d({
-  hasLegend: t,
-  labelFormatter: e
-}) {
-  return {
-    show: t,
-    icon: "circle",
-    left: 0,
-    bottom: 0,
-    orient: "horizontal",
-    type: "scroll",
-    ...e && {
-      formatter: (n) => String(e(n))
-    }
-  };
-}
-function x(t, e) {
-  return {
-    ...!t && {
-      bottom: parseInt(e.spacing(3))
-    },
-    ...t && {
-      bottom: parseInt(e.spacing(7))
-    }
-  };
-}
-function y(t) {
-  return function(e, n, i, o, a) {
-    const l = {
-      top: parseInt(t.spacing(0.5))
-    };
-    return a.contentSize[0] < a.viewSize[0] - e[0] ? l.left = e[0] : l.right = a.viewSize[0] - e[0], l;
-  };
-}
-function m(t) {
-  if (t)
-    return (e) => t(e);
-}
-function b(t, e) {
-  const n = t && !Array.isArray(t), i = t, o = e && n ? (a) => String(e(a)) : void 0;
-  return {
-    ...i,
-    axisLabel: {
-      ...typeof i.axisLabel == "object" && i.axisLabel ? i.axisLabel : {},
-      formatter: o
-    }
-  };
-}
-function F(t, e) {
-  let n = m(e);
-  const i = t && !Array.isArray(t), o = t;
-  return (!i || o.type !== "value") && (n = void 0), {
-    ...o,
-    axisLabel: {
-      ...typeof o.axisLabel == "object" && o.axisLabel ? o.axisLabel : {},
-      formatter: n
-    }
-  };
-}
-function v(t) {
-  return (e) => {
-    const n = Array.isArray(e) ? e : [e], i = (r, s) => `<div style="margin: 0px 0 0;line-height:1;">${r ? `<div style="font-size:11px;color:#FFFFFF;font-weight:400;line-height:1; margin-bottom: 10px">${r}</div>` : ""}<div style="margin: 0;line-height:1;">${s}</div><div style="clear:both"></div></div>`, o = n.map((r) => {
-      const {
-        name: s,
-        seriesName: c,
-        marker: f,
-        value: h
-      } = t(r, n);
-      return {
-        name: s,
-        seriesName: c,
-        marker: f,
-        value: h
-      };
-    }), a = o[0]?.name ?? "", p = a || n.length > 1 ? "margin: 10px 0 0;line-height:1;" : "margin: 0;line-height:1;", g = o.map(({
-      seriesName: r,
-      marker: s,
-      value: c
-    }) => `<div style="${p}"><div style="margin: 0px 0 0;line-height:1;">${s}${r ? `<span style="font-size:11px;color:#FFFFFF;font-weight:400;margin-left:2px;margin-right:10px">${r}</span>` : ""}<span style="float:right;margin-left:10px;font-size:11px;color:#FFFFFF;font-weight:900">${c}</span></div></div>`);
-    return i(a, g.join(""));
-  };
-}
-const w = {
-  graph: {
-    /**
-     * Common container style for chart widget skeletons
-     */
-    container: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      flexDirection: "column",
-      gap: ({
-        spacing: t
-      }) => t(1),
-      height: ({
-        spacing: t
-      }) => t(38)
-    }
-  }
-};
-export {
-  b as a,
-  F as b,
-  w as c,
-  x as d,
-  d as e,
-  m as f,
-  v as g,
-  y as h,
-  u as n
-};
-//# sourceMappingURL=styles-Y8q7Jff3.js.map