@carto/ps-react-ui 4.4.1 → 4.4.3

package/src/widgets/timeseries/config.ts

@@ -13,35 +13,28 @@ import {
   buildLegendConfig,
   buildGridConfig,
   createTooltipFormatter,
+  createChartDownloadConfig,
   applyYAxisFormatter,
-} from '../_shared/chart-config'
-import { downloadToCSV, downloadToPNG, type DownloadItem } from '../actions'
-import type { ConfigProps } from '../loader/types'
+  applyXAxisFormatter,
+} from '../utils/chart-config'
 
-export function timeseriesDownloadConfig({
-  refUI,
-}: ConfigProps): DownloadItem<TimeseriesWidgetData>[] {
-  return [
-    {
-      ...downloadToPNG,
-      modifier: () => downloadToPNG.modifier(refUI),
-    },
-    {
-      ...downloadToCSV,
-      modifier: async (data) => {
-        const rows = flattenObjectArrayToCSV(data)
-        return downloadToCSV.modifier(rows)
-      },
-    },
-  ]
-}
+export const timeseriesDownloadConfig =
+  createChartDownloadConfig<TimeseriesWidgetData>(flattenObjectArrayToCSV)
 
+/**
+ * Generates ECharts configuration for line and area chart widgets over time, with smooth curves, rotated axis labels, and CARTO qualitative color palette.
+ *
+ * @param props - Timeseries configuration including data and theme.
+ * @returns Widget config with ECharts option object.
+ */
 export function timeseriesConfig(
   props: TimeseriesConfig,
 ): TimeseriesWidgetConfig {
   return {
     type: 'timeseries',
     option: mergeEchartWidgetConfig(getCommonOptions(props), getOption(props)),
+    formatter: props.formatter,
+    labelFormatter: props.labelFormatter,
   }
 }
 
@@ -49,6 +42,7 @@ function getOption({
   data = [],
   theme,
   formatter,
+  labelFormatter,
 }: TimeseriesConfig): EchartOptionsProps {
   const hasLegend = (data?.length ?? 0) > 1
 
@@ -82,7 +76,7 @@ function getOption({
   }
 
   return {
-    legend: buildLegendConfig(hasLegend),
+    legend: buildLegendConfig({ hasLegend, labelFormatter }),
     grid: {
       ...buildGridConfig(hasLegend, theme),
       outerBounds: {
@@ -91,18 +85,21 @@ function getOption({
         top: parseInt(theme.spacing(2)),
       },
     },
-    xAxis: {
-      type: 'category',
-      axisTick: {
-        alignWithLabel: true,
-      },
-      axisLabel: {
-        show: true,
-        showMaxLabel: true,
-        showMinLabel: true,
-        rotate: 45,
+    xAxis: applyXAxisFormatter(
+      {
+        type: 'category',
+        axisTick: {
+          alignWithLabel: true,
+        },
+        axisLabel: {
+          show: true,
+          showMaxLabel: true,
+          showMinLabel: true,
+          rotate: 45,
+        },
       },
-    },
+      labelFormatter,
+    ),
     yAxis: applyYAxisFormatter(yAxis, formatter),
     tooltip: {
       formatter: createTooltipFormatter((item) => {
@@ -117,7 +114,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/timeseries/style.ts

@@ -1,5 +1,5 @@
 import type { SxProps, Theme } from '@mui/material'
-import { baseSkeletonStyles } from '../_shared/skeleton'
+import { baseSkeletonStyles } from '../utils/skeleton'
 
 export const styles = {
   skeleton: {

package/src/widgets/utils/chart-config/download-config.ts

@@ -0,0 +1,22 @@
+import { downloadToCSV, downloadToPNG, type DownloadItem } from '../../actions'
+import type { ConfigProps } from '../../loader/types'
+
+export function createChartDownloadConfig<TData>(
+  csvModifier: (data: TData) => string[][],
+) {
+  return function ({ refUI }: ConfigProps): DownloadItem<TData>[] {
+    return [
+      {
+        ...downloadToPNG,
+        modifier: () => downloadToPNG.modifier(refUI),
+      },
+      {
+        ...downloadToCSV,
+        modifier: async (data) => {
+          const rows = csvModifier(data)
+          return downloadToCSV.modifier(rows)
+        },
+      },
+    ]
+  }
+}

package/src/widgets/{_shared → utils}/chart-config/index.ts

@@ -2,6 +2,8 @@
  * Shared utilities for chart widget configuration
  */
 
+export { defaultFormatter, defaultLabelFormatter } from '../formatter'
+
 export { createChartWidgetConfig } from './config-factory'
 export type {
   ChartWidgetBaseConfig,
@@ -20,3 +22,5 @@ export {
   applyYAxisFormatter,
   niceNum,
 } from './option-builders'
+
+export { createChartDownloadConfig } from './download-config'

package/src/widgets/{_shared → utils}/chart-config/option-builders.ts

@@ -3,7 +3,7 @@ import type { LegendComponentOption } from 'echarts'
 import type {
   CallbackDataParams,
   TopLevelFormatterParams,
-} from 'node_modules/echarts/types/dist/shared'
+} from 'echarts/types/dist/shared'
 
 /**
  * Shared EChart configuration builders for chart widgets
@@ -26,10 +26,18 @@ export function niceNum(value: number): number {
 /**
  * Builds standard legend configuration for chart widgets
  *
- * @param hasLegend - Whether to show the legend
+ * @param params - Legend configuration parameters
+ * @param params.hasLegend - Whether to show the legend
+ * @param params.labelFormatter - Optional formatter for legend item names
  * @returns Legend configuration object
  */
-export function buildLegendConfig(hasLegend: boolean): LegendComponentOption {
+export function buildLegendConfig({
+  hasLegend,
+  labelFormatter,
+}: {
+  hasLegend: boolean
+  labelFormatter?: (value: string | number) => string | number
+}): LegendComponentOption {
   return {
     show: hasLegend,
     icon: 'circle' as const,
@@ -37,6 +45,9 @@ export function buildLegendConfig(hasLegend: boolean): LegendComponentOption {
     bottom: 0,
     orient: 'horizontal',
     type: 'scroll',
+    ...(labelFormatter && {
+      formatter: (name: string) => String(labelFormatter(name)),
+    }),
   }
 }
 
@@ -101,25 +112,24 @@ export function createAxisLabelFormatter(
 }
 
 /**
- * Applies formatter to xAxis configuration
- * Only applies to single axis objects (not arrays) with type 'value'
+ * Applies labelFormatter to xAxis configuration
+ * Applies to any xAxis regardless of axis type (category, value, etc.)
  *
  * @param xAxis - Existing xAxis configuration
- * @param formatter - Optional formatter function from widget config
- * @returns Updated xAxis configuration or undefined if no changes needed
+ * @param labelFormatter - Optional labelFormatter function from widget config
+ * @returns Updated xAxis configuration
  */
 export function applyXAxisFormatter(
   xAxis: unknown,
-  formatter?: (value: number) => string,
+  formatter?: (value: string | number) => string | number,
 ) {
-  let axisFormatter = createAxisLabelFormatter(formatter)
-
   const xAxisIsObject = xAxis && !Array.isArray(xAxis)
   const xAxisTyped = xAxis as { type?: string; axisLabel?: unknown }
 
-  if (!xAxisIsObject || xAxisTyped.type !== 'value') {
-    axisFormatter = undefined
-  }
+  const axisFormatter =
+    formatter && xAxisIsObject
+      ? (value: string | number) => String(formatter(value))
+      : undefined
 
   return {
     ...xAxisTyped,

package/src/widgets/utils/formatter.ts

@@ -0,0 +1,2 @@
+export const defaultFormatter = (value: number) => String(value)
+export const defaultLabelFormatter = (value: string | number) => value

package/src/widgets/utils/index.ts

@@ -0,0 +1,26 @@
+// Formatter
+export { defaultFormatter, defaultLabelFormatter } from './formatter'
+
+// Chart configuration
+export { createChartWidgetConfig } from './chart-config'
+export type {
+  ChartWidgetBaseConfig,
+  CreateChartWidgetConfigParams,
+} from './chart-config'
+export { flattenObjectArrayToCSV, scatterplotDataToCSV } from './chart-config'
+export {
+  buildLegendConfig,
+  buildGridConfig,
+  createTooltipPositioner,
+  createAxisLabelFormatter,
+  createTooltipFormatter,
+  applyXAxisFormatter,
+  applyYAxisFormatter,
+  niceNum,
+} from './chart-config'
+
+// Skeleton styles
+export { baseSkeletonStyles } from './skeleton'
+
+// Download config factory
+export { createChartDownloadConfig } from './chart-config'

package/src/widgets/wrapper/components/actions.tsx

@@ -4,6 +4,9 @@ import { styles } from '../styles'
 
 const EMPTY_ACTIONS: NonNullable<WrapperActionsProps['actions']> = []
 
+/**
+ * Renders action buttons in the widget wrapper header. Each action click event is stopped from propagating to the accordion.
+ */
 export function Actions({ actions = EMPTY_ACTIONS }: WrapperActionsProps) {
   return (
     <Box sx={styles.actions} className='widget-wrapper-actions'>

package/src/widgets/wrapper/components/options.tsx

@@ -12,6 +12,9 @@ import { styles } from '../styles'
 
 const EMPTY_OPTIONS: NonNullable<WrapperOptionsProps['options']> = []
 
+/**
+ * Renders a dropdown options menu in the widget wrapper header, triggered by a vertical ellipsis icon button.
+ */
 export function Options({
   labels,
   options = EMPTY_OPTIONS,

package/src/widgets/wrapper/components/title.tsx

@@ -4,6 +4,9 @@ import { SmartTooltip } from '../../../components'
 import type { ReactNode } from 'react'
 import type { WrapperOptionsProps } from '../types'
 
+/**
+ * Renders the widget title text inside the wrapper header with smart tooltip support for truncated titles.
+ */
 export function Title({
   label,
   children,

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

@@ -15,6 +15,20 @@ import { useShallow } from 'zustand/shallow'
 const EMPTY_ACTIONS: NonNullable<WrapperUIProps['actions']> = []
 const EMPTY_OPTIONS: NonNullable<WrapperUIProps['options']> = []
 
+/**
+ * Presentational wrapper component that renders the widget accordion UI with title, actions, options menu, and loading indicator. For uncontrolled usage without automatic widget store synchronization, use this instead of WidgetWrapper.
+ *
+ * @example
+ * ```tsx
+ * <WrapperUI
+ *   id="my-widget"
+ *   actions={[<Download key="download" id="my-widget" />]}
+ *   onChangeCollapsed={(e, collapsed) => console.log(collapsed)}
+ * >
+ *   <div>Content</div>
+ * </WrapperUI>
+ * ```
+ */
 export function WrapperUI({
   children,
   id,

package/src/widgets/wrapper/wrapper.tsx

@@ -3,6 +3,20 @@ import { WrapperUI } from './wrapper-ui'
 import { useWidgetStore } from '../stores/widget-store'
 import { useLayoutEffect } from 'react'
 
+/**
+ * Container component providing a collapsible header with title, action buttons, and options menu for widgets. Syncs collapse, disabled, and title state with the widget store.
+ *
+ * @example
+ * ```tsx
+ * <WidgetWrapper
+ *   id="my-widget"
+ *   title="Sales Overview"
+ *   actions={[<Download key="download" id="my-widget" items={downloads} />]}
+ * >
+ *   {children}
+ * </WidgetWrapper>
+ * ```
+ */
 export function WidgetWrapper({
   id,
   title,

package/dist/styles-CAroD5Rc.js

@@ -1,123 +0,0 @@
-function m(t) {
-  const e = [];
-  if (t.length > 0 && (t[0]?.length ?? 0) > 0) {
-    const n = t?.[0]?.[0] ?? {}, i = Object.keys(n);
-    e.push(i);
-  }
-  return t.forEach((n) => {
-    n.forEach((i) => {
-      const o = Object.values(i).map((r) => String(r));
-      e.push(o);
-    });
-  }), e;
-}
-function y(t) {
-  const e = [];
-  return e.push(["x", "y"]), t.forEach((n) => {
-    n.forEach((i) => {
-      e.push([String(i[0]), String(i[1])]);
-    });
-  }), e;
-}
-function b(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 F(t) {
-  return {
-    show: t,
-    icon: "circle",
-    left: 0,
-    bottom: 0,
-    orient: "horizontal",
-    type: "scroll"
-  };
-}
-function d(t, e) {
-  return {
-    ...!t && {
-      bottom: parseInt(e.spacing(3))
-    },
-    ...t && {
-      bottom: parseInt(e.spacing(7))
-    }
-  };
-}
-function x(t) {
-  return function(e, n, i, o, r) {
-    const c = {
-      top: parseInt(t.spacing(0.5))
-    };
-    return r.contentSize[0] < r.viewSize[0] - e[0] ? c.left = e[0] : c.right = r.viewSize[0] - e[0], c;
-  };
-}
-function u(t) {
-  if (t)
-    return (e) => t(e);
-}
-function v(t, e) {
-  let n = u(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 w(t) {
-  return (e) => {
-    const n = Array.isArray(e) ? e : [e], i = (s, a) => `<div style="margin: 0px 0 0;line-height:1;">${s ? `<div style="font-size:11px;color:#FFFFFF;font-weight:400;line-height:1; margin-bottom: 10px">${s}</div>` : ""}<div style="margin: 0;line-height:1;">${a}</div><div style="clear:both"></div></div>`, o = n.map((s) => {
-      const {
-        name: a,
-        seriesName: l,
-        marker: g,
-        value: h
-      } = t(s, n);
-      return {
-        name: a,
-        seriesName: l,
-        marker: g,
-        value: h
-      };
-    }), r = o[0]?.name ?? "", p = r || n.length > 1 ? "margin: 10px 0 0;line-height:1;" : "margin: 0;line-height:1;", f = o.map(({
-      seriesName: s,
-      marker: a,
-      value: l
-    }) => `<div style="${p}"><div style="margin: 0px 0 0;line-height:1;">${a}${s ? `<span style="font-size:11px;color:#FFFFFF;font-weight:400;margin-left:2px;margin-right:10px">${s}</span>` : ""}<span style="float:right;margin-left:10px;font-size:11px;color:#FFFFFF;font-weight:900">${l}</span></div></div>`);
-    return i(r, f.join(""));
-  };
-}
-const S = {
-  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 {
-  x as a,
-  d as b,
-  w as c,
-  F as d,
-  S as e,
-  m as f,
-  v as g,
-  b as n,
-  y as s
-};
-//# sourceMappingURL=styles-CAroD5Rc.js.map

package/dist/styles-CAroD5Rc.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles-CAroD5Rc.js","sources":["../src/widgets/_shared/chart-config/csv-modifiers.ts","../src/widgets/_shared/chart-config/option-builders.ts","../src/widgets/_shared/skeleton/styles.ts"],"sourcesContent":["/**\n * Shared CSV export modifiers for chart widgets\n */\n\n/**\n * Flattens object array data into CSV-ready rows.\n * Used by bar, pie, histogram, and timeseries widgets.\n *\n * @param data - Array of series, where each series is an array of data objects\n * @returns CSV rows with headers and values\n */\nexport function flattenObjectArrayToCSV<T extends Record<string, unknown>>(\n  data: T[][],\n): string[][] {\n  const rows: string[][] = []\n\n  // Add headers from first data point if available\n  if (data.length > 0 && (data[0]?.length ?? 0) > 0) {\n    const firstDataPoint = data?.[0]?.[0] ?? {}\n    const headers = Object.keys(firstDataPoint)\n    rows.push(headers)\n  }\n\n  // Add data rows from all series\n  data.forEach((series) => {\n    series.forEach((dataPoint) => {\n      const values = Object.values(dataPoint).map((v) => String(v))\n      rows.push(values)\n    })\n  })\n\n  return rows\n}\n\n/**\n * Creates CSV rows for scatterplot data.\n * Scatterplot uses array format [x, y] instead of objects.\n *\n * @param data - Array of series, where each series is an array of [x, y] tuples\n * @returns CSV rows with ['x', 'y'] headers\n */\nexport function scatterplotDataToCSV(data: number[][][]): string[][] {\n  const rows: string[][] = []\n\n  // Add headers\n  rows.push(['x', 'y'])\n\n  // Add data rows from all series\n  data.forEach((series) => {\n    series.forEach((dataPoint) => {\n      rows.push([String(dataPoint[0]), String(dataPoint[1])])\n    })\n  })\n\n  return rows\n}\n","import type { Theme } from '@mui/material'\nimport type { LegendComponentOption } from 'echarts'\nimport type {\n  CallbackDataParams,\n  TopLevelFormatterParams,\n} from 'node_modules/echarts/types/dist/shared'\n\n/**\n * Shared EChart configuration builders for chart widgets\n */\n\n/**\n * Rounds a value up to the nearest \"nice\" number.\n * A nice number is a multiple of 10^floor(log10(value)).\n *\n * Examples: 547 → 600, 200 → 200, 1200 → 2000, 18 → 20, 5 → 5, -547 → -500\n */\nexport function niceNum(value: number): number {\n  if (value === 0) return 0\n  const absValue = Math.abs(value)\n  const base = Math.pow(10, Math.floor(Math.log10(absValue)))\n  const rounded = Math.ceil(absValue / base) * base\n  return value < 0 ? -rounded : rounded\n}\n\n/**\n * Builds standard legend configuration for chart widgets\n *\n * @param hasLegend - Whether to show the legend\n * @returns Legend configuration object\n */\nexport function buildLegendConfig(hasLegend: boolean): LegendComponentOption {\n  return {\n    show: hasLegend,\n    icon: 'circle' as const,\n    left: 0,\n    bottom: 0,\n    orient: 'horizontal',\n    type: 'scroll',\n  }\n}\n\n/**\n * Builds standard grid configuration with legend-aware spacing\n *\n * @param hasLegend - Whether the chart has a legend\n * @param theme - MUI theme for spacing\n * @param additionalConfig - Additional grid configuration to merge\n * @returns Grid configuration object\n */\nexport function buildGridConfig(hasLegend: boolean, theme: Theme) {\n  return {\n    ...(!hasLegend && { bottom: parseInt(theme.spacing(3)) }),\n    ...(hasLegend && { bottom: parseInt(theme.spacing(7)) }),\n  }\n}\n\n/**\n * Creates a tooltip position calculator that handles overflow\n * Used by bar, histogram, and scatterplot widgets\n *\n * @param theme - MUI theme for spacing\n * @returns Tooltip position function\n */\nexport function createTooltipPositioner(theme: Theme) {\n  return function (\n    point: [number, number],\n    _params: unknown,\n    _dom: unknown,\n    _rect: unknown,\n    size: { contentSize: [number, number]; viewSize: [number, number] },\n  ) {\n    const position = { top: parseInt(theme.spacing(0.5)) } as Record<\n      string,\n      number\n    >\n\n    // Position tooltip left or right based on available space\n    if (size.contentSize[0] < size.viewSize[0] - point[0]) {\n      position.left = point[0]\n    } else {\n      position.right = size.viewSize[0] - point[0]\n    }\n\n    return position\n  }\n}\n\n/**\n * Creates an axis label formatter for ECharts\n * Used to format numeric axis labels with a widget formatter\n *\n * @param formatter - Optional formatter function from widget config\n * @returns Axis label formatter function or undefined\n */\nexport function createAxisLabelFormatter(\n  formatter?: (value: number) => string,\n) {\n  if (!formatter) return undefined\n  return (value: number) => formatter(value)\n}\n\n/**\n * Applies formatter to xAxis configuration\n * Only applies to single axis objects (not arrays) with type 'value'\n *\n * @param xAxis - Existing xAxis configuration\n * @param formatter - Optional formatter function from widget config\n * @returns Updated xAxis configuration or undefined if no changes needed\n */\nexport function applyXAxisFormatter(\n  xAxis: unknown,\n  formatter?: (value: number) => string,\n) {\n  let axisFormatter = createAxisLabelFormatter(formatter)\n\n  const xAxisIsObject = xAxis && !Array.isArray(xAxis)\n  const xAxisTyped = xAxis as { type?: string; axisLabel?: unknown }\n\n  if (!xAxisIsObject || xAxisTyped.type !== 'value') {\n    axisFormatter = undefined\n  }\n\n  return {\n    ...xAxisTyped,\n    axisLabel: {\n      ...(typeof xAxisTyped.axisLabel === 'object' && xAxisTyped.axisLabel\n        ? xAxisTyped.axisLabel\n        : {}),\n      formatter: axisFormatter,\n    },\n  }\n}\n\n/**\n * Applies formatter to yAxis configuration\n * Only applies to single axis objects (not arrays) with type 'value'\n *\n * @param yAxis - Existing yAxis configuration\n * @param formatter - Optional formatter function from widget config\n * @returns Updated yAxis configuration or undefined if no changes needed\n */\nexport function applyYAxisFormatter(\n  yAxis: unknown,\n  formatter?: (value: number) => string,\n) {\n  let axisFormatter = createAxisLabelFormatter(formatter)\n\n  const yAxisIsObject = yAxis && !Array.isArray(yAxis)\n  const yAxisTyped = yAxis as { type?: string; axisLabel?: unknown }\n\n  if (!yAxisIsObject || yAxisTyped.type !== 'value') {\n    axisFormatter = undefined\n  }\n\n  return {\n    ...yAxisTyped,\n    axisLabel: {\n      ...(typeof yAxisTyped.axisLabel === 'object' && yAxisTyped.axisLabel\n        ? yAxisTyped.axisLabel\n        : {}),\n      formatter: axisFormatter,\n    },\n  }\n}\n\n/**\n * Creates a tooltip formatter for ECharts\n * Formats numeric values in tooltip using widget formatter\n * Handles both axis trigger (array) and item trigger (object) modes\n *\n * @param formatter - Optional formatter function from widget config\n * @returns Tooltip formatter function or undefined\n */\nexport function createTooltipFormatter(\n  callback: (\n    item: CallbackDataParams,\n    items: CallbackDataParams[],\n  ) => {\n    name: string\n    seriesName: string\n    marker: string\n    value: string | number\n  },\n) {\n  return (params: TopLevelFormatterParams) => {\n    // Handle both array (axis trigger) and object (item trigger)\n    const items = Array.isArray(params) ? params : [params]\n\n    const tooltip = (name: string, callback: string) =>\n      `<div style=\"margin: 0px 0 0;line-height:1;\">${name ? `<div style=\"font-size:11px;color:#FFFFFF;font-weight:400;line-height:1; margin-bottom: 10px\">${name}</div>` : ''}<div style=\"margin: 0;line-height:1;\">${callback}</div><div style=\"clear:both\"></div></div>`\n\n    const values = items.map((item) => {\n      const { name, seriesName, marker, value } = callback(item, items)\n      return {\n        name,\n        seriesName,\n        marker,\n        value,\n      }\n    })\n\n    const name = values[0]?.name ?? ''\n    // Show margin if name exists or there are multiple items\n    const showMargin = name || items.length > 1\n    const marginStyle = showMargin\n      ? 'margin: 10px 0 0;line-height:1;'\n      : 'margin: 0;line-height:1;'\n\n    const formattedValues = values.map(\n      ({ seriesName, marker, value }) =>\n        `<div style=\"${marginStyle}\"><div style=\"margin: 0px 0 0;line-height:1;\">${marker}${seriesName ? `<span style=\"font-size:11px;color:#FFFFFF;font-weight:400;margin-left:2px;margin-right:10px\">${seriesName}</span>` : ''}<span style=\"float:right;margin-left:10px;font-size:11px;color:#FFFFFF;font-weight:900\">${value}</span></div></div>`,\n    )\n\n    return tooltip(name, formattedValues.join(''))\n  }\n}\n","import type { Theme } from '@mui/material'\n\n/**\n * Base skeleton styles shared across all chart widgets\n */\nexport const baseSkeletonStyles = {\n  graph: {\n    /**\n     * Common container style for chart widget skeletons\n     */\n    container: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      flexDirection: 'column',\n      gap: ({ spacing }: Theme) => spacing(1),\n      height: ({ spacing }: Theme) => spacing(38),\n    },\n  },\n} as const\n"],"names":["flattenObjectArrayToCSV","data","rows","length","firstDataPoint","headers","Object","keys","push","forEach","series","dataPoint","values","map","v","String","scatterplotDataToCSV","niceNum","value","absValue","Math","abs","base","pow","floor","log10","rounded","ceil","buildLegendConfig","hasLegend","show","icon","left","bottom","orient","type","buildGridConfig","theme","parseInt","spacing","createTooltipPositioner","point","_params","_dom","_rect","size","position","top","contentSize","viewSize","right","createAxisLabelFormatter","formatter","applyYAxisFormatter","yAxis","axisFormatter","yAxisIsObject","Array","isArray","yAxisTyped","undefined","axisLabel","createTooltipFormatter","callback","params","items","tooltip","name","item","seriesName","marker","marginStyle","formattedValues","join","baseSkeletonStyles","graph","container","display","alignItems","justifyContent","flexDirection","gap","height"],"mappings":"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"}