@carto/ps-react-ui 4.22.0 → 4.24.0

package/dist/echart-CgOQw9XB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"echart-CgOQw9XB.js","names":["echarts","ECharts","EChartsOption","EdgeAlignment","alignMinLabel","alignMaxLabel","CENTERED","SAFETY_MARGIN_PX","decideEdgeAlignment","args","firstLabel","lastLabel","font","firstTickX","lastTickX","width","halfFirst","format","getTextRect","halfLast","AxisLabel","formatter","value","fontSize","fontFamily","fontWeight","CategoryXAxis","type","axisLabel","SeriesLike","encode","x","datasetIndex","Cell","firstOf","T","Array","isArray","firstXAxis","option","axis","xAxis","undefined","hasDataZoom","dz","dataZoom","length","cellToText","fmt","String","resolveEdgeLabels","count","series0","series","encodeX","allDatasets","dataset","source","rows","Record","size","family","weight","clampEdgeLabels","chart","prev","next","computeAlignment","setOption","lazyUpdate","labels","convertToPixel","xAxisIndex","getWidth","Number","isFinite","ResizeCallback","callbacks","Map","Element","observer","ResizeObserver","getObserver","entries","entry","callback","get","target","NOOP_CLEANUP","undefined","observeResize","element","ro","set","observe","delete","unobserve","size","disconnect","__resetSharedResizeObserver","clear","SxProps","Theme","styles","root","width","flex","minHeight","isolation","Record","useEffect","useEffectEvent","useRef","Box","SxProps","Theme","echarts","clampEdgeLabels","CENTERED","EdgeAlignment","observeResize","styles","DEFAULT_INIT_OPTS","renderer","EChartsInitOpts","EchartsEventHandler","event","EchartUIProps","option","EChartsOption","replaceMerge","onEvents","Record","init","onInstance","chart","ECharts","className","sx","EchartUI","t0","$","_c","containerRef","chartRef","seriesFingerprintRef","datasetFingerprintRef","optionRef","edgeAlignRef","t1","notifyInstance","t2","current","chart_0","onFinished","on","onLegendSelectChanged","params","selected","names","Object","keys","length","every","name","dispatchAction","type","off","dispose","t3","t4","t5","seriesFp","computeSeriesFingerprint","datasetFp","computeDatasetFingerprint","augmented","Set","add","setOption","notMerge","lazyUpdate","size","Array","from","undefined","t6","t7","Symbol","for","node","resize","t8","t9","chart_1","handler","entries","event_0","handler_0","t10","root","t11","series","isArray","map","s","String","o","datasetIndex","stack","JSON","stringify","encode","join","dataset","useCallback","useMemo","SxProps","Theme","echarts","applyTransforms","setEchartInstance","useWidgetId","useWidgetShallow","Transform","EchartUI","EchartsEventHandler","DEFAULT_REPLACE_MERGE","OptionFactoryContext","formatter","value","labelFormatter","OptionFactory","option","EChartsOption","data","ctx","EchartProps","optionFactory","onEvents","Record","init","EChartsInitOpts","className","sx","EchartSlice","configTransforms","echartSelector","s","Echart","t0","$","_c","id","slice","t1","chart","onInstance","sliceData","sliceFormatter","sliceLabelFormatter","t2","undefined","structural","t3","transformed","t4","keys","Set","xf","enabled","replaceMergeKeys","length","k","add","Array","from","sort","replaceMerge","t5","t6","useCallback","useMemo","useRef","CallbackDataParams","EchartsEventHandler","SelectionKey","UseChartSelectionOptions","selection","K","onSelectionChange","next","keyFromClick","params","keysFromBrush","selected","seriesIndex","dataIndex","ChartSelectionWiring","onEvents","Record","useChartSelection","t0","$","_c","t1","event","key","current","idx","indexOf","slice","handleClick","t2","Symbol","for","latestBrushedRef","t3","event_0","params_0","batch","handleBrushSelected","t4","handleBrushEnd","t5","click","brushSelected","brushEnd","wiringSelection","length","t6"],"sources":["../src/widgets-v2/echart/edge-label-clamp.ts","../src/widgets-v2/echart/shared-resize-observer.ts","../src/widgets-v2/echart/style.ts","../src/widgets-v2/echart/echart-ui.tsx","../src/widgets-v2/echart/echart.tsx","../src/widgets-v2/echart/use-chart-selection.ts"],"sourcesContent":["import * as echarts from 'echarts'\nimport type { ECharts, EChartsOption } from 'echarts'\n\n/**\n * Render-time clamp that stops the first/last **category x-axis** labels from\n * clipping at the chart edges — *only when they actually overflow*.\n *\n * ECharts centers each category label on its tick; the first/last ticks sit at\n * the plot boundary, so a wide edge label spills past the chart and is cut off.\n * `grid.containLabel` does not contain this horizontal overflow and the v6\n * `outerBounds` shrink is unreliable, so we measure at render time and anchor\n * the overflowing edge label inward (`alignMinLabel: 'left'` /\n * `alignMaxLabel: 'right'`). Labels that fit stay centered.\n *\n * Lives in the generic bridge because the verdict needs the laid-out chart\n * (`convertToPixel`, `getWidth`); everything else is read from the `option`.\n * Auto-targets bar + histogram (category x-axis); pie's horizontal-bar fallback\n * (category *y*-axis), scatterplot (value) and timeseries (time) are skipped.\n */\n\nexport interface EdgeAlignment {\n  alignMinLabel: 'left' | null\n  alignMaxLabel: 'right' | null\n}\n\nexport const CENTERED: EdgeAlignment = {\n  alignMinLabel: null,\n  alignMaxLabel: null,\n}\n\n// Small cushion biasing toward anchoring when borderline: clipping is worse\n// than a hair of off-centering, and the measured width can differ slightly\n// from the final render (mainly when the web font isn't loaded yet at measure\n// time). Kept to 1px — a wider margin anchored labels that only just clear the\n// edge, and an anchored edge label can then be dropped by the axis\n// `hideOverlap`, leaving a gap. 1px guards measurement error without that.\nconst SAFETY_MARGIN_PX = 1\n\n/**\n * Pure overflow decision. Inputs are anchor-independent (tick centers and text\n * width don't depend on the label's current `text-anchor`), so feeding the\n * result back via `setOption` doesn't change them — the next pass yields the\n * same verdict, keeping the clamp loop-stable.\n */\nexport function decideEdgeAlignment(args: {\n  firstLabel: string\n  lastLabel: string\n  font: string\n  firstTickX: number\n  lastTickX: number\n  width: number\n}): EdgeAlignment {\n  const halfFirst =\n    echarts.format.getTextRect(args.firstLabel, args.font).width / 2\n  const halfLast =\n    echarts.format.getTextRect(args.lastLabel, args.font).width / 2\n  return {\n    alignMinLabel:\n      halfFirst + SAFETY_MARGIN_PX > args.firstTickX ? 'left' : null,\n    alignMaxLabel:\n      halfLast + SAFETY_MARGIN_PX > args.width - args.lastTickX\n        ? 'right'\n        : null,\n  }\n}\n\ninterface AxisLabel {\n  formatter?: (value: string | number) => string | number\n  fontSize?: number | string\n  fontFamily?: string\n  fontWeight?: number | string\n}\n\ninterface CategoryXAxis {\n  type?: string\n  axisLabel?: AxisLabel\n}\n\ninterface SeriesLike {\n  encode?: { x?: string | number }\n  datasetIndex?: number\n}\n\ntype Cell = string | number | null | undefined\n\nfunction firstOf<T>(value: T | T[] | undefined): T | undefined {\n  if (Array.isArray(value)) return value[0]\n  return value\n}\n\nfunction firstXAxis(option: EChartsOption): CategoryXAxis | undefined {\n  const axis = firstOf(\n    option.xAxis as CategoryXAxis | CategoryXAxis[] | undefined,\n  )\n  return axis && typeof axis === 'object' ? axis : undefined\n}\n\nfunction hasDataZoom(option: EChartsOption): boolean {\n  const dz = option.dataZoom\n  return Array.isArray(dz) ? dz.length > 0 : dz != null\n}\n\nfunction cellToText(value: Cell, fmt: AxisLabel['formatter']): string {\n  if (typeof fmt === 'function') return String(fmt(value ?? ''))\n  return value == null ? '' : String(value)\n}\n\n/**\n * Extracts the displayed first/last category strings and the label font from\n * the option, reading categories generically via `series[0].encode.x` into the\n * referenced dataset (`'name'` for bar, `0` for histogram). Returns `null` when\n * the option isn't a measurable category x-axis (fewer than 2 categories, no\n * dataset, etc.).\n */\nexport function resolveEdgeLabels(option: EChartsOption): {\n  firstLabel: string\n  lastLabel: string\n  font: string\n  count: number\n} | null {\n  const xAxis = firstXAxis(option)\n  if (!xAxis) return null\n  if (xAxis.type !== 'category') return null\n\n  const series0 = firstOf(\n    option.series as SeriesLike | SeriesLike[] | undefined,\n  )\n  const encodeX = series0?.encode?.x\n  if (encodeX == null) return null\n\n  const datasetIndex = series0?.datasetIndex ?? 0\n  const allDatasets = option.dataset as\n    | { source?: unknown }\n    | { source?: unknown }[]\n    | undefined\n  const dataset = Array.isArray(allDatasets)\n    ? allDatasets[datasetIndex]\n    : allDatasets\n  const source = dataset?.source\n  if (!Array.isArray(source) || source.length < 2) return null\n\n  const rows = source as Record<string | number, Cell>[]\n  const fmt = xAxis.axisLabel?.formatter\n  const axisLabel = xAxis.axisLabel ?? {}\n  const size =\n    typeof axisLabel.fontSize === 'number'\n      ? `${axisLabel.fontSize}px`\n      : (axisLabel.fontSize ?? '12px')\n  const family = axisLabel.fontFamily ?? 'sans-serif'\n  const weight = axisLabel.fontWeight != null ? `${axisLabel.fontWeight} ` : ''\n\n  return {\n    firstLabel: cellToText(rows[0]?.[encodeX], fmt),\n    lastLabel: cellToText(rows[rows.length - 1]?.[encodeX], fmt),\n    font: `${weight}${size} ${family}`,\n    count: source.length,\n  }\n}\n\n/**\n * Measures the rendered chart and, when the edge labels would clip, applies\n * `alignMinLabel`/`alignMaxLabel` (or clears them) via an imperative merge\n * `setOption`. Returns the alignment now in effect so the caller can keep a\n * `prev` ref and skip redundant `setOption`s. Should be invoked from the\n * chart's `finished` event (layout is settled, so `convertToPixel` is valid).\n */\nexport function clampEdgeLabels(\n  chart: ECharts,\n  option: EChartsOption,\n  prev: EdgeAlignment,\n): EdgeAlignment {\n  const next = computeAlignment(chart, option)\n  if (\n    next.alignMinLabel === prev.alignMinLabel &&\n    next.alignMaxLabel === prev.alignMaxLabel\n  ) {\n    return prev\n  }\n  chart.setOption({ xAxis: { axisLabel: { ...next } } } as EChartsOption, {\n    lazyUpdate: true,\n  })\n  return next\n}\n\nfunction computeAlignment(\n  chart: ECharts,\n  option: EChartsOption,\n): EdgeAlignment {\n  // Under dataZoom, convertToPixel on the absolute first/last index returns\n  // off-plot pixels, so the overflow math is invalid — reset to centered.\n  if (hasDataZoom(option)) return CENTERED\n\n  const labels = resolveEdgeLabels(option)\n  if (!labels) return CENTERED\n\n  const firstTickX = chart.convertToPixel({ xAxisIndex: 0 }, 0)\n  const lastTickX = chart.convertToPixel({ xAxisIndex: 0 }, labels.count - 1)\n  const width = chart.getWidth()\n  // Layout not measurable yet (defensive — `finished` normally fires after\n  // layout). Fall back to centered; a later `finished` re-measures.\n  if (\n    typeof firstTickX !== 'number' ||\n    typeof lastTickX !== 'number' ||\n    !Number.isFinite(firstTickX) ||\n    !Number.isFinite(lastTickX) ||\n    !width\n  ) {\n    return CENTERED\n  }\n\n  return decideEdgeAlignment({\n    firstLabel: labels.firstLabel,\n    lastLabel: labels.lastLabel,\n    font: labels.font,\n    firstTickX,\n    lastTickX,\n    width,\n  })\n}\n","type ResizeCallback = () => void\n\nconst callbacks = new Map<Element, ResizeCallback>()\nlet observer: ResizeObserver | null = null\n\n/**\n * Returns the singleton ResizeObserver, lazily constructing it on first use.\n * Returns `null` when `ResizeObserver` is not available in the global scope\n * (SSR, very old browsers, or tests that intentionally remove it).\n */\nfunction getObserver(): ResizeObserver | null {\n  if (typeof ResizeObserver === 'undefined') return null\n  observer ??= new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      const callback = callbacks.get(entry.target)\n      callback?.()\n    }\n  })\n  return observer\n}\n\nconst NOOP_CLEANUP = (): void => undefined\n\nexport function observeResize(\n  element: Element,\n  callback: ResizeCallback,\n): () => void {\n  const ro = getObserver()\n  // Gracefully degrade when no ResizeObserver is available — consumers\n  // still see one initial measure() pass via their own effect; we just\n  // skip the subsequent resize-driven re-measures.\n  if (!ro) return NOOP_CLEANUP\n  callbacks.set(element, callback)\n  ro.observe(element)\n  return () => {\n    callbacks.delete(element)\n    if (observer) {\n      observer.unobserve(element)\n      // Disconnect the singleton once the last subscriber leaves so the\n      // observer doesn't outlive its consumers in SSR teardown / micro-\n      // frontend unmount scenarios. A subsequent observeResize() will\n      // lazily re-create it via getObserver().\n      if (callbacks.size === 0) {\n        observer.disconnect()\n        observer = null\n      }\n    }\n  }\n}\n\n/** @internal — for tests only. */\nexport function __resetSharedResizeObserver(): void {\n  if (observer) observer.disconnect()\n  callbacks.clear()\n  observer = null\n}\n","import type { SxProps, Theme } from '@mui/material'\n\nexport const styles = {\n  root: {\n    width: '100%',\n    // `flex: 1` lets the chart fill a parent that has a definite height —\n    // the fullscreen dialog. Inline it has none (Widget.Content is an\n    // auto-height flex column), so flex-basis resolves to the content box,\n    // which is empty until ECharts measures it: at `min-height: 0` the\n    // container is 0px tall, ECharts draws nothing and the widget renders\n    // blank. 304 is not a new magic number — it's the height `init.height`\n    // used to pin, kept so cards look exactly as before. Override per widget\n    // with `<Widget.Echart sx={{ minHeight }} />`.\n    flex: 1,\n    minHeight: 304,\n    // ECharts puts its tooltip inside this box at `z-index: 9999999`. With\n    // no stacking context of its own, that number competes page-wide and\n    // beats MUI's modal layer — under `FullScreen.Slot` the card's chart\n    // mirrors the dialog's tooltip (echarts.connect) and it painted over\n    // the dialog. Isolating keeps the tooltip above its own chart only.\n    isolation: 'isolate',\n  },\n} satisfies Record<string, SxProps<Theme>>\n","import { useEffect, useEffectEvent, useRef } from 'react'\nimport { Box, type SxProps, type Theme } from '@mui/material'\nimport * as echarts from 'echarts'\nimport {\n  clampEdgeLabels,\n  CENTERED,\n  type EdgeAlignment,\n} from './edge-label-clamp'\nimport { observeResize } from './shared-resize-observer'\nimport { styles } from './style'\n\n// No `height`: a numeric height here is stored in zrender's init opts, and\n// every later `resize()` resolves back to it — the chart would stay that tall\n// inside a fullscreen dialog. Height comes from the container instead\n// (`styles.root`'s `min-height` inline, `flex: 1` when the parent has one).\nexport const DEFAULT_INIT_OPTS = {\n  renderer: 'svg',\n} satisfies echarts.EChartsInitOpts\n\nexport type EchartsEventHandler = (event: unknown) => void\n\nexport interface EchartUIProps {\n  option: echarts.EChartsOption\n  /**\n   * Keys to merge as arrays (replace by index) instead of by id. The middleware\n   * memoizes this content-stably, so identical sets don't re-trigger setOption.\n   */\n  replaceMerge?: readonly string[]\n  /**\n   * Opaque ECharts event passthrough — handlers fire untransformed.\n   *\n   * **Must be referentially stable** (memoize it with `useMemo` /\n   * `useCallback`, or hoist to module scope). The binding effect depends on\n   * the `onEvents` object identity; an inline `{ click: handler }` literal\n   * recreates the object on every render and causes every listener to be\n   * detached and re-attached each commit.\n   */\n  onEvents?: Record<string, EchartsEventHandler>\n  /**\n   * Init options forwarded to echarts.init. Captured at mount only — to change\n   * `renderer` or `height` after mount, unmount and remount the chart.\n   * Defaults: `{ renderer: 'svg' }` — height is container-driven, so prefer\n   * `sx={{ minHeight }}` over pinning `height` here.\n   */\n  init?: echarts.EChartsInitOpts\n  /**\n   * Optional callback fired once after the ECharts instance is created\n   * (`onInstance(chart)`) and once when it's about to be disposed\n   * (`onInstance(null)`). Used by `Widget.Echart` to publish the live\n   * instance to the per-widget registry so other actions (e.g.\n   * `ZoomToggle`'s disable handler) can reach it without DOM lookups.\n   * No need to memoize — the bridge wraps it in `useEffectEvent` so an\n   * unstable reference does not re-init the chart.\n   */\n  onInstance?: (chart: echarts.ECharts | null) => void\n  className?: string\n  sx?: SxProps<Theme>\n}\n\nexport function EchartUI({\n  option,\n  replaceMerge,\n  onEvents,\n  init,\n  onInstance,\n  className,\n  sx,\n}: EchartUIProps) {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const chartRef = useRef<echarts.ECharts | null>(null)\n\n  // Structural fingerprint of the last applied series / dataset arrays.\n  // Used to decide whether the next `setOption` should *replace* those\n  // components (when their shape changed) or *merge* them (when only\n  // styling-level fields differ — e.g. a new `itemStyle.color` callback\n  // from a selection update). Replacing wipes ECharts' per-series runtime\n  // state (hover, animation cache, brush areas), so we want to do it only\n  // when the structure actually moved.\n  const seriesFingerprintRef = useRef<string | null>(null)\n  const datasetFingerprintRef = useRef<string | null>(null)\n\n  // Latest applied option (read by the `finished` clamp listener, which is\n  // bound once and must see the current option) + the edge-label alignment\n  // currently applied to the chart (so the clamp skips redundant setOptions).\n  const optionRef = useRef<echarts.EChartsOption>(option)\n  const edgeAlignRef = useRef<EdgeAlignment>(CENTERED)\n\n  // Stable notify wrapper — always reads the latest `onInstance` prop\n  // without forcing the init effect below to re-run when the parent\n  // passes a fresh function reference. The init effect now only fires\n  // when `init` actually changes (documented as mount-only anyway).\n  const notifyInstance = useEffectEvent(\n    (chart: echarts.ECharts | null): void => {\n      onInstance?.(chart)\n    },\n  )\n\n  // Init / dispose. `init` is captured once at mount.\n  useEffect(() => {\n    if (!containerRef.current) return undefined\n    const chart = echarts.init(containerRef.current, null, {\n      ...DEFAULT_INIT_OPTS,\n      ...init,\n    })\n    chartRef.current = chart\n    notifyInstance(chart)\n    // Edge-label clamp: after each layout settles (option change OR resize both\n    // end in a render → `finished`), measure the category x-axis edge labels\n    // and anchor them inward only if they'd clip. `finished` (not rAF) so\n    // `convertToPixel` sees the flushed `lazyUpdate` layout. Loop-safe: the\n    // verdict is anchor-independent, so our own clamp setOption recomputes the\n    // same result and the ref guard short-circuits.\n    const onFinished = (): void => {\n      edgeAlignRef.current = clampEdgeLabels(\n        chart,\n        optionRef.current,\n        edgeAlignRef.current,\n      )\n    }\n    chart.on('finished', onFinished)\n    // Never let the legend end up with every item hidden — a user can click\n    // series off one by one until the chart goes blank. `selected` on this\n    // event is always the FULL name→boolean map (not just the clicked item),\n    // so \"every value false\" reliably means \"nothing left visible\". Restore\n    // all of them instead. `legendAllSelect` fires its own `legendselectall`\n    // event, not `legendselectchanged`, so this can't re-trigger itself.\n    // Always-on and independent of the consumer's `onEvents` — applies to\n    // every ECharts widget in the library for free. A widget that disables\n    // legend clicks entirely (e.g. Pie's `selectedMode: false`) never fires\n    // `legendselectchanged`, so this is a no-op there.\n    const onLegendSelectChanged = (params: unknown): void => {\n      const { selected } = params as { selected?: Record<string, boolean> }\n      if (!selected) return\n      const names = Object.keys(selected)\n      if (names.length > 0 && names.every((name) => !selected[name])) {\n        chart.dispatchAction({ type: 'legendAllSelect' })\n      }\n    }\n    chart.on('legendselectchanged', onLegendSelectChanged)\n    return () => {\n      chart.off('finished', onFinished)\n      chart.off('legendselectchanged', onLegendSelectChanged)\n      // Notify observers *before* disposal so any queued imperative\n      // dispatches (e.g. ZoomToggle's `setOption` cleanup) see the\n      // instance disappear before its DOM is torn down.\n      notifyInstance(null)\n      chart.dispose()\n      chartRef.current = null\n    }\n  }, [init])\n\n  // Apply option / replaceMerge changes via merge mode (no remount required).\n  useEffect(() => {\n    const seriesFp = computeSeriesFingerprint(option)\n    const datasetFp = computeDatasetFingerprint(option)\n    const augmented = new Set<string>(replaceMerge ?? [])\n    if (seriesFp !== seriesFingerprintRef.current) augmented.add('series')\n    if (datasetFp !== datasetFingerprintRef.current) augmented.add('dataset')\n    seriesFingerprintRef.current = seriesFp\n    datasetFingerprintRef.current = datasetFp\n    // Expose the latest option to the `finished` clamp listener (bound once).\n    optionRef.current = option\n    chartRef.current?.setOption(option, {\n      notMerge: false,\n      lazyUpdate: true,\n      replaceMerge: augmented.size > 0 ? Array.from(augmented) : undefined,\n    })\n  }, [option, replaceMerge])\n\n  // Resize via shared singleton observer.\n  useEffect(() => {\n    const node = containerRef.current\n    if (!node) return undefined\n    return observeResize(node, () => {\n      chartRef.current?.resize()\n    })\n  }, [])\n\n  // Bind / unbind opaque event handlers.\n  useEffect(() => {\n    const chart = chartRef.current\n    if (!chart || !onEvents) return undefined\n    for (const [event, handler] of Object.entries(onEvents)) {\n      chart.on(event, handler)\n    }\n    return () => {\n      for (const [event, handler] of Object.entries(onEvents)) {\n        chart.off(event, handler)\n      }\n    }\n  }, [onEvents])\n\n  return (\n    <Box\n      ref={containerRef}\n      className={className}\n      sx={{ ...styles.root, ...sx }}\n    />\n  )\n}\n\n/**\n * Cheap structural digest of the option's `series` array — covers the fields\n * that actually demand a `replaceMerge` (length, type, datasetIndex, name,\n * stack, encode). Excludes runtime-style fields like `itemStyle` (callbacks\n * have unstable identity but don't change structure).\n */\nfunction computeSeriesFingerprint(option: echarts.EChartsOption): string {\n  const series = option.series\n  if (!Array.isArray(series)) return series ? '1' : ''\n  return series\n    .map((s) => {\n      if (s == null || typeof s !== 'object') return String(s)\n      const o = s as Record<string, unknown>\n      return [\n        o.type,\n        o.datasetIndex,\n        o.name,\n        o.stack,\n        // `encode` is small; stringify is cheap and stable for plain objects.\n        JSON.stringify(o.encode ?? null),\n      ].join('|')\n    })\n    .join('||')\n}\n\n/**\n * Structural digest of the option's `dataset` array — count is the only\n * thing that needs `replaceMerge` here. Row-level changes are picked up by\n * ECharts' default merge.\n */\nfunction computeDatasetFingerprint(option: echarts.EChartsOption): string {\n  const dataset = option.dataset\n  if (!Array.isArray(dataset)) return dataset ? '1' : ''\n  return String(dataset.length)\n}\n","import { useCallback, useMemo } from 'react'\nimport type { SxProps, Theme } from '@mui/material'\nimport type * as echarts from 'echarts'\nimport {\n  applyTransforms,\n  setEchartInstance,\n  useWidgetId,\n  useWidgetShallow,\n  type Transform,\n} from '../stores'\nimport { EchartUI, type EchartsEventHandler } from './echart-ui'\n\n/**\n * Default ECharts `replaceMerge` keys for every widget. `dataZoom` and\n * `brush` are omitted so ZoomToggle / BrushToggle's user-driven runtime\n * state (slider range, brushed areas in `multiple` mode) survives unrelated\n * re-renders. `series` and `dataset` are also omitted: EchartUI fingerprints\n * them per-render and adds them to `replaceMerge` only when their shape\n * actually changes, keeping ECharts' per-series runtime state alive when\n * only callback-style fields differ.\n *\n * Lives in this module (not the generic store) because it's an ECharts\n * concept. Module-private — callers should not need it.\n */\nconst DEFAULT_REPLACE_MERGE: readonly string[] = ['toolbox']\n\n/**\n * Reactive context passed to every {@link OptionFactory} call so the\n * factory can rebuild render-time pieces (axis label / tooltip formatters)\n * from the live store. Drives RelativeData / consumer-formatter changes\n * through to the chart without rebuilding the structural option.\n */\nexport interface OptionFactoryContext {\n  formatter?: (value: number) => string\n  labelFormatter?: (value: string | number) => string | number\n}\n\n/**\n * The per-widget option factory — a single callable that owns BOTH phases\n * of option construction:\n *\n * - **Structural phase** — when `option == null`, return the theme-aware\n *   structural option (tooltip / legend / color palette / series\n *   template, optionally merged with a consumer-supplied `optionsOverride`).\n *   No data is read. `<Widget.Echart>` calls the factory with\n *   `(undefined, undefined)` synchronously during render to derive the\n *   structural base; `configTransforms` (Stack/Zoom/Brush) then mutate it\n *   in the same render pass.\n * - **Merge phase** — when `option` is defined, fuse `data` into the\n *   post-configTransforms option at fusion time. `<Widget.Echart>` calls\n *   the factory with `(transformed, data, ctx)` on every render.\n *\n * The two phases share a closure (the factory creator captures `theme`,\n * `formatter`, `labelFormatter`, `seriesNames`, `selection`, `optionsOverride`,\n * …), so structural and merge agree on the same widget configuration.\n *\n * The third arg `ctx` carries the **live** store-side formatters at the\n * call site — distinct from the closure-time formatters because actions\n * like RelativeData can install a percent formatter on the store after\n * the factory was constructed. The merge phase reads from `ctx`; the\n * structural phase typically uses the closure-time values.\n */\nexport type OptionFactory = (\n  option: echarts.EChartsOption | undefined,\n  data: unknown,\n  ctx?: OptionFactoryContext,\n) => echarts.EChartsOption\n\nexport interface EchartProps {\n  /**\n   * The per-widget {@link OptionFactory}. Required — `<Widget.Echart>`\n   * derives the structural option from it (so configTransforms have a base\n   * to mutate) and fuses `state.data` into the post-pipeline option at\n   * render time. Wrap the factory creator in `useMemo` so its identity is\n   * stable across renders.\n   */\n  optionFactory: OptionFactory\n  onEvents?: Record<string, EchartsEventHandler>\n  init?: echarts.EChartsInitOpts\n  className?: string\n  /**\n   * Styles for the chart container — this is where its height comes from.\n   * `min-height` defaults to the card height (304px) and `flex: 1` lets the\n   * chart fill a taller parent; override either here, e.g.\n   * `sx={{ minHeight: 400 }}` for a taller card.\n   */\n  sx?: SxProps<Theme>\n}\n\ninterface EchartSlice {\n  data: unknown\n  configTransforms: readonly Transform[]\n  formatter?: (value: number) => string\n  labelFormatter?: (value: string | number) => string | number\n}\n\nconst echartSelector = (s: {\n  data: unknown\n  configTransforms: readonly Transform[]\n  formatter?: (value: number) => string\n  labelFormatter?: (value: string | number) => string | number\n}): EchartSlice => ({\n  data: s.data,\n  configTransforms: s.configTransforms,\n  formatter: s.formatter,\n  labelFormatter: s.labelFormatter,\n})\n\n/**\n * Stateful Echart bridge — owns the entire ECharts coupling. The whole\n * option pipeline lives here, not in the store:\n *\n * 1. **Structural** — `optionFactory(undefined, undefined)` produces the\n *    theme-aware base. Memoized on the factory identity, so the consumer's\n *    `useMemo` ID gates the rebuild.\n * 2. **Transformed** — `applyTransforms(structural, configTransforms)`\n *    applies any registered configTransforms (Stack/Zoom/Brush) over the\n *    structural base. Memoized on `[structural, configTransforms]`.\n * 3. **`replaceMerge`** — derived from the enabled configTransforms'\n *    `replaceMergeKeys`, deduped and sorted, seeded with\n *    {@link DEFAULT_REPLACE_MERGE}. Memoized on `[configTransforms]` so\n *    ECharts sees a stable array reference across non-transform changes.\n * 4. **Merge** — `optionFactory(transformed, data, ctx)` fuses post-\n *    pipeline data into the option. Reactive `ctx` carries the live store\n *    formatters so RelativeData's percent formatter flows through without\n *    a structural rebuild.\n *\n * The `<Widget.Provider>` doesn't know about the factory at all: it stays\n * a renderer-agnostic shell. The `ProviderProps` surface has no ECharts\n * coupling, so non-Echart widgets don't transitively import the type.\n */\nexport function Echart({\n  optionFactory,\n  onEvents,\n  init,\n  className,\n  sx,\n}: EchartProps) {\n  const id = useWidgetId()\n  const slice = useWidgetShallow(id, echartSelector)\n\n  // Publish the live ECharts instance to the per-id registry so actions\n  // (e.g. `ZoomToggle`'s disable handler) can reach it imperatively. The\n  // callback identity is stable across renders (only `id` is in deps), so\n  // EchartUI's init effect doesn't see a fresh `onInstance` and re-init.\n  const onInstance = useCallback(\n    (chart: echarts.ECharts | null) => setEchartInstance(id, chart),\n    [id],\n  )\n\n  // Destructure so React Compiler sees specific deps instead of inferring\n  // the whole `slice` object. `useWidgetShallow` already shallow-compares\n  // the slice, so per-field deps drive each memo exactly when its inputs\n  // change.\n  const {\n    data: sliceData,\n    configTransforms,\n    formatter: sliceFormatter,\n    labelFormatter: sliceLabelFormatter,\n  } = slice\n\n  const structural = useMemo(\n    () => optionFactory(undefined, undefined),\n    [optionFactory],\n  )\n\n  const transformed = useMemo(\n    () =>\n      applyTransforms(structural, configTransforms) as echarts.EChartsOption,\n    [structural, configTransforms],\n  )\n\n  const replaceMerge = useMemo(() => {\n    const keys = new Set<string>(DEFAULT_REPLACE_MERGE)\n    for (const xf of configTransforms) {\n      if (xf.enabled && xf.replaceMergeKeys?.length) {\n        for (const k of xf.replaceMergeKeys) keys.add(k)\n      }\n    }\n    return Array.from(keys).sort()\n  }, [configTransforms])\n\n  const option = useMemo(\n    () =>\n      optionFactory(transformed, sliceData, {\n        formatter: sliceFormatter,\n        labelFormatter: sliceLabelFormatter,\n      }),\n    [\n      optionFactory,\n      transformed,\n      sliceData,\n      sliceFormatter,\n      sliceLabelFormatter,\n    ],\n  )\n\n  return (\n    <EchartUI\n      option={option}\n      replaceMerge={replaceMerge}\n      onEvents={onEvents}\n      init={init}\n      onInstance={onInstance}\n      className={className}\n      sx={sx}\n    />\n  )\n}\n","import { useCallback, useMemo, useRef } from 'react'\nimport type { CallbackDataParams } from 'echarts/types/dist/shared'\nimport type { EchartsEventHandler } from './echart-ui'\n\nexport type SelectionKey = string | number\n\nexport interface UseChartSelectionOptions<K extends SelectionKey> {\n  /**\n   * Controlled selection. `undefined`/`null`/an explicit `[]` all mean \"no\n   * selection interaction\" — every current merger already treats an empty\n   * selection as \"nothing excluded,\" so this hook collapses all three to\n   * `null` rather than promising per-merger `[]` semantics it doesn't\n   * implement.\n   */\n  selection?: readonly K[]\n  /** Receives the next selection. When omitted the wiring is a no-op. */\n  onSelectionChange?: (next: readonly K[]) => void\n  /**\n   * Pull a selection key out of an ECharts `click` event. Return `null` to\n   * skip (e.g. a click on empty plot area). For Bar/Pie/Timeseries this is\n   * usually `(p) => p.name`; for Histogram/Scatterplot it's the dataIndex.\n   */\n  keyFromClick: (params: CallbackDataParams) => K | null\n  /**\n   * Map a `brushSelected` payload's `selected[*]` entries (each carrying a\n   * `seriesIndex` + `dataIndex[]`) into the full set of selection keys for\n   * the brushed area. Called once per brush event.\n   */\n  keysFromBrush: (\n    selected: readonly { seriesIndex: number; dataIndex: number[] }[],\n  ) => K[]\n}\n\nexport interface ChartSelectionWiring<K extends SelectionKey> {\n  /**\n   * Pass straight to `<Widget.Echart onEvents={…}>`. Wires `click` and\n   * `brushSelected` so the user's interactions reach `onSelectionChange`.\n   */\n  onEvents: Record<string, EchartsEventHandler>\n  /**\n   * The current selection — `null` for \"no selection interaction\"\n   * (`undefined`/`null`/an explicit `[]`), or a non-empty array meaning\n   * \"render only these as fully opaque, dim the rest\".\n   */\n  selection: readonly K[] | null\n}\n\n/**\n * Translate ECharts' click + brush events into a consumer-owned selection\n * with the expected dashboard semantics:\n *\n *   - **Click toggles** — clicking an item adds it to the selection if\n *     absent, removes it if present.\n *   - **Brush replaces** — finishing a brush stroke overwrites the selection\n *     with whatever the brush covered (drag-to-empty clears).\n *\n * Wire the returned `onEvents` into `<Widget.Echart>` and feed\n * `wiring.selection` to the widget's option factory so the merger can dim\n * non-selected rows at fusion time.\n */\nexport function useChartSelection<K extends SelectionKey>({\n  selection,\n  onSelectionChange,\n  keyFromClick,\n  keysFromBrush,\n}: UseChartSelectionOptions<K>): ChartSelectionWiring<K> {\n  const handleClick = useCallback(\n    (event: unknown) => {\n      if (!onSelectionChange) return\n      const params = event as CallbackDataParams\n      const key = keyFromClick(params)\n      if (key == null) return\n      const current = selection ?? []\n      const idx = current.indexOf(key)\n      const next =\n        idx === -1\n          ? [...current, key]\n          : [...current.slice(0, idx), ...current.slice(idx + 1)]\n      onSelectionChange(next)\n    },\n    [selection, onSelectionChange, keyFromClick],\n  )\n\n  // ECharts fires `brushSelected` on every pointer-move while the user is\n  // drawing a brush, but we only want to push to `onSelectionChange` once\n  // the gesture ends. Cache the latest `brushSelected` payload here, then\n  // commit on `brushEnd`.\n  const latestBrushedRef = useRef<\n    readonly { seriesIndex: number; dataIndex: number[] }[]\n  >([])\n\n  const handleBrushSelected = useCallback((event: unknown) => {\n    const params = event as {\n      batch?: {\n        selected?: { seriesIndex: number; dataIndex: number[] }[]\n      }[]\n    }\n    latestBrushedRef.current = params.batch?.[0]?.selected ?? []\n  }, [])\n\n  const handleBrushEnd = useCallback(() => {\n    if (!onSelectionChange) return\n    onSelectionChange(keysFromBrush(latestBrushedRef.current))\n  }, [onSelectionChange, keysFromBrush])\n\n  const onEvents = useMemo<Record<string, EchartsEventHandler>>(\n    () => ({\n      click: handleClick,\n      brushSelected: handleBrushSelected,\n      brushEnd: handleBrushEnd,\n    }),\n    [handleClick, handleBrushSelected, handleBrushEnd],\n  )\n\n  const wiringSelection = useMemo(\n    () => (selection && selection.length > 0 ? selection : null),\n    [selection],\n  )\n\n  return { onEvents, selection: wiringSelection }\n}\n"],"mappings":"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"}

package/dist/{formula-Cqj84ZGX.js → formula-DRuMIVo8.js}

@@ -1,5 +1,5 @@
 import { C as e, T as t } from "./stores-BVFMfgyo.js";
-import { n, t as r } from "./download-C7he8mSh.js";
+import { n, t as r } from "./download--wRRnf19.js";
 import { c as i } from "react/compiler-runtime";
 import { Avatar as a, Box as o, Chip as s, Skeleton as c, Typography as l } from "@mui/material";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
@@ -258,8 +258,8 @@ function A(e) {
 		backgroundColor: e.pngBackgroundColor
 	})), t.push(r({
 		filename: e.filename,
-		getRows: () => {
-			let t = e.getData(), n = [[
+		getRows: (t) => {
+			let n = e.getData(t), r = [[
 				"series",
 				"prefix",
 				"value",
@@ -267,7 +267,7 @@ function A(e) {
 				"note",
 				"delta"
 			]];
-			for (let e of t) n.push([
+			for (let e of n) r.push([
 				e.series?.name ?? "",
 				e.prefix ?? "",
 				e.value,
@@ -275,11 +275,11 @@ function A(e) {
 				e.note ?? "",
 				e.delta?.value ?? ""
 			]);
-			return n;
+			return r;
 		}
 	})), t;
 }
 //#endregion
 export { S as a, v as c, m as d, C as i, _ as l, O as n, x as o, E as r, b as s, A as t, g as u };
 
-//# sourceMappingURL=formula-Cqj84ZGX.js.map
+//# sourceMappingURL=formula-DRuMIVo8.js.map

package/dist/formula-DRuMIVo8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formula-DRuMIVo8.js","names":["Chip","ChipProps","DeltaSeverity","DeltaProps","value","label","severity","format","defaultPercentFormatter","Intl","NumberFormat","undefined","style","signDisplay","maximumFractionDigits","SEVERITY_TO_COLOR","Record","positive","negative","neutral","Delta","t0","$","_c","chipProps","resolvedSeverity","inferSeverity","t1","text","t2","t3","Symbol","for","fontWeight","t4","Typography","TypographyProps","ReactNode","NoteProps","children","Note","t0","$","_c","t1","Symbol","for","m","t2","Typography","TypographyProps","ReactNode","PrefixProps","children","Prefix","t0","$","_c","t1","Symbol","for","fontWeight","color","lineHeight","t2","Avatar","AvatarProps","Theme","SeriesProps","name","color","size","Series","t0","$","_c","t1","avatarProps","undefined","t2","charAt","toUpperCase","letter","t3","t4","t5","theme","palette","getContrastText","toCssColor","t6","width","height","fontSize","fontWeight","bgcolor","t7","value","includes","parts","split","cur","p","Record","Typography","TypographyProps","ReactNode","SuffixProps","children","Suffix","t0","$","_c","t1","Symbol","for","fontWeight","color","lineHeight","t2","Typography","TypographyProps","ReactNode","ValueProps","children","color","Value","t0","$","_c","t1","t2","fontWeight","lineHeight","t3","SxProps","Theme","styles","root","display","flexDirection","gap","alignItems","row","body","flex","minWidth","valueRow","delta","alignSelf","flexShrink","Record","Box","Ref","FormulaDataItem","Delta","Note","Prefix","Series","Suffix","Value","styles","FormulaUIProps","items","formatter","value","ref","HTMLDivElement","FormulaUI","t0","$","_c","t1","t2","item","i","series","name","prefix","suffix","row","color","body","valueRow","String","note","delta","label","severity","map","root","useWidgetId","useWidgetShallow","FormulaUI","FormulaWidgetData","FormulaSlice","data","formatter","value","EMPTY_DATA","Object","freeze","formulaSelector","s","Formula","$","_c","id","slice","t0","Box","Skeleton","SxProps","Theme","styles","root","display","gap","alignItems","minHeight","py","block","width","height","Record","FormulaSkeletonProps","count","FormulaSkeleton","t0","$","_c","t1","undefined","t2","Array","from","length","map","_temp","_","i","buildCsvDownloadItem","buildPngDownloadItem","DownloadContext","DownloadItem","FormulaWidgetData","FormulaDownloadConfigArgs","filename","getData","ctx","getCaptureEl","HTMLElement","pngPixelRatio","pngBackgroundColor","createFormulaDownloadConfig","args","items","push","pixelRatio","backgroundColor","getRows","data","rows","d","series","name","prefix","value","suffix","note","delta"],"sources":["../src/widgets-v2/formula/delta.tsx","../src/widgets-v2/formula/note.tsx","../src/widgets-v2/formula/prefix.tsx","../src/widgets-v2/formula/series.tsx","../src/widgets-v2/formula/suffix.tsx","../src/widgets-v2/formula/value.tsx","../src/widgets-v2/formula/style.ts","../src/widgets-v2/formula/formula-ui.tsx","../src/widgets-v2/formula/formula.tsx","../src/widgets-v2/formula/skeleton.tsx","../src/widgets-v2/formula/download.tsx"],"sourcesContent":["import { Chip, type ChipProps } from '@mui/material'\nimport type { DeltaSeverity } from './types'\n\nexport interface DeltaProps {\n  /** Numeric magnitude. Used for the default percent label and severity inference. */\n  value: number\n  /** Pre-formatted label override; skips the default percent formatter. */\n  label?: string\n  /**\n   * Visual treatment. When omitted it's derived from the sign of `value`:\n   * `>0 → 'positive'`, `<0 → 'negative'`, `=0 → 'neutral'`.\n   */\n  severity?: DeltaSeverity\n  /** Override the default `Intl.NumberFormat({style:'percent'})` formatter. */\n  format?: (value: number) => string\n  ChipProps?: ChipProps\n}\n\nconst defaultPercentFormatter = new Intl.NumberFormat(undefined, {\n  style: 'percent',\n  signDisplay: 'always',\n  maximumFractionDigits: 1,\n})\n\nconst SEVERITY_TO_COLOR: Record<DeltaSeverity, ChipProps['color']> = {\n  positive: 'success',\n  negative: 'error',\n  neutral: 'default',\n}\n\n/**\n * Comparative delta rendered as a small filled chip. Colour is driven by\n * `severity` (or the sign of `value`); content is `label`, the result of\n * `format(value)`, or the default percent format.\n */\nexport function Delta({\n  value,\n  label,\n  severity,\n  format,\n  ChipProps: chipProps,\n}: DeltaProps) {\n  const resolvedSeverity = severity ?? inferSeverity(value)\n  const text =\n    label ?? (format ? format(value) : defaultPercentFormatter.format(value))\n  return (\n    <Chip\n      size='small'\n      color={SEVERITY_TO_COLOR[resolvedSeverity]}\n      label={text}\n      sx={{ fontWeight: 600 }}\n      {...chipProps}\n    />\n  )\n}\n\nfunction inferSeverity(value: number): DeltaSeverity {\n  if (value > 0) return 'positive'\n  if (value < 0) return 'negative'\n  return 'neutral'\n}\n","import { Typography, type TypographyProps } from '@mui/material'\nimport type { ReactNode } from 'react'\n\nexport interface NoteProps {\n  children: ReactNode\n  TypographyProps?: TypographyProps\n}\n\n/**\n * Small subdued caption rendered below a Formula value. Use for short\n * descriptive text (e.g. \"Last 7 days\", \"Excludes refunds\").\n */\nexport function Note({ children, TypographyProps }: NoteProps) {\n  return (\n    <Typography\n      variant='caption'\n      component='p'\n      color='text.secondary'\n      sx={{ m: 0 }}\n      {...TypographyProps}\n    >\n      {children}\n    </Typography>\n  )\n}\n","import { Typography, type TypographyProps } from '@mui/material'\nimport type { ReactNode } from 'react'\n\nexport interface PrefixProps {\n  children: ReactNode\n  TypographyProps?: TypographyProps\n}\n\n/**\n * Prefix slot for a Formula KPI — large, bold, muted (`text.secondary`).\n * Composable building block for custom formula layouts; the canonical\n * {@link FormulaUI} renders one of these per item when `prefix` is set.\n */\nexport function Prefix({ children, TypographyProps }: PrefixProps) {\n  return (\n    <Typography\n      variant='h5'\n      component='span'\n      sx={{ fontWeight: 600, color: 'text.secondary', lineHeight: 1 }}\n      {...TypographyProps}\n    >\n      {children}\n    </Typography>\n  )\n}\n","import { Avatar, type AvatarProps, type Theme } from '@mui/material'\n\nexport interface SeriesProps {\n  /** Used for the avatar's first-letter glyph and as accessible label. */\n  name: string\n  /** Avatar background colour (any MUI palette path or CSS colour). */\n  color?: string\n  /** Diameter in px. Default `24`. */\n  size?: number\n  AvatarProps?: AvatarProps\n}\n\n/**\n * Series indicator — circular avatar showing the first letter of `name`.\n * Background colour is `color` (consumer-supplied) or a neutral disabled\n * colour, with text colour computed for contrast against it.\n */\nexport function Series({\n  name,\n  color,\n  size = 24,\n  AvatarProps: avatarProps,\n}: SeriesProps) {\n  const letter = name.charAt(0).toUpperCase()\n  return (\n    <Avatar\n      aria-label={name}\n      sx={{\n        width: size,\n        height: size,\n        fontSize: size * 0.5,\n        fontWeight: 600,\n        bgcolor: color ?? 'action.disabledBackground',\n        color: color\n          ? (theme: Theme) =>\n              theme.palette.getContrastText(toCssColor(theme, color))\n          : 'text.primary',\n      }}\n      {...avatarProps}\n    >\n      {letter}\n    </Avatar>\n  )\n}\n\n/**\n * Resolve a palette path (e.g. `\"primary.main\"`) to a hex/rgb string so that\n * `getContrastText` — which doesn't accept dotted paths — produces a sensible\n * text colour. Non-palette strings (raw `#hex`, `rgb(...)`) pass through.\n */\nfunction toCssColor(theme: Theme, value: string): string {\n  if (!value.includes('.')) return value\n  const parts = value.split('.')\n  let cur: unknown = theme.palette\n  for (const p of parts) {\n    if (\n      cur &&\n      typeof cur === 'object' &&\n      p in (cur as Record<string, unknown>)\n    ) {\n      cur = (cur as Record<string, unknown>)[p]\n    } else {\n      return value\n    }\n  }\n  return typeof cur === 'string' ? cur : value\n}\n","import { Typography, type TypographyProps } from '@mui/material'\nimport type { ReactNode } from 'react'\n\nexport interface SuffixProps {\n  children: ReactNode\n  TypographyProps?: TypographyProps\n}\n\n/**\n * Suffix slot for a Formula KPI — large, bold, muted (`text.secondary`).\n * Composable building block for custom formula layouts; the canonical\n * {@link FormulaUI} renders one of these per item when `suffix` is set.\n */\nexport function Suffix({ children, TypographyProps }: SuffixProps) {\n  return (\n    <Typography\n      variant='h5'\n      component='span'\n      sx={{ fontWeight: 600, color: 'text.secondary', lineHeight: 1 }}\n      {...TypographyProps}\n    >\n      {children}\n    </Typography>\n  )\n}\n","import { Typography, type TypographyProps } from '@mui/material'\nimport type { ReactNode } from 'react'\n\nexport interface ValueProps {\n  children: ReactNode\n  /** Override the default `text.primary` color — useful for sparkline tints. */\n  color?: string\n  TypographyProps?: TypographyProps\n}\n\n/**\n * Value slot for a Formula KPI — large, bold, primary text color. Composable\n * building block for custom formula layouts; the canonical {@link FormulaUI}\n * renders one of these per item.\n */\nexport function Value({ children, color, TypographyProps }: ValueProps) {\n  return (\n    <Typography\n      variant='h5'\n      component='span'\n      sx={{\n        fontWeight: 600,\n        color: color ?? 'text.primary',\n        lineHeight: 1,\n      }}\n      {...TypographyProps}\n    >\n      {children}\n    </Typography>\n  )\n}\n","import type { SxProps, Theme } from '@mui/material'\n\nexport const styles = {\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 2,\n    alignItems: 'stretch',\n  },\n  row: {\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: 1.5,\n  },\n  body: {\n    flex: 1,\n    minWidth: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 0.25,\n  },\n  valueRow: {\n    display: 'inline-flex',\n    alignItems: 'baseline',\n    gap: 0.25,\n  },\n  delta: {\n    alignSelf: 'center',\n    flexShrink: 0,\n  },\n} satisfies Record<string, SxProps<Theme>>\n","import { Box } from '@mui/material'\nimport type { Ref } from 'react'\nimport type { FormulaDataItem } from './types'\nimport { Delta } from './delta'\nimport { Note } from './note'\nimport { Prefix } from './prefix'\nimport { Series } from './series'\nimport { Suffix } from './suffix'\nimport { Value } from './value'\nimport { styles } from './style'\n\nexport interface FormulaUIProps {\n  items: readonly FormulaDataItem[]\n  /** Number formatter — applied to each item's `value`. */\n  formatter?: (value: number) => string\n  /** Forwarded to the root `<Box>` so consumers can capture the DOM (PNG export). */\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * Pure presentational component for the Formula widget. Each item renders as\n * a row containing (in order): optional `Series` avatar, a body with\n * `[prefix] value [suffix]` plus optional `Note`, and an optional `Delta`\n * chip pushed to the right edge.\n *\n * For fully custom layouts, compose {@link Series}, {@link Prefix},\n * {@link Value}, {@link Suffix}, {@link Note}, and {@link Delta} directly\n * instead of passing `items`.\n */\nexport function FormulaUI({ items, formatter, ref }: FormulaUIProps) {\n  return (\n    <Box ref={ref} sx={styles.root}>\n      {items.map((item, i) => (\n        // Series name is the closest stable id; fall back to the literal\n        // value (numeric KPIs rarely repeat with the same prefix/suffix).\n        <Box\n          key={`formula-${item.series?.name ?? `${item.prefix ?? ''}${item.value}${item.suffix ?? ''}`}-${i}`}\n          sx={styles.row}\n        >\n          {item.series ? (\n            <Series name={item.series.name} color={item.series.color} />\n          ) : null}\n          <Box sx={styles.body}>\n            <Box sx={styles.valueRow}>\n              {item.prefix ? <Prefix>{item.prefix}</Prefix> : null}\n              <Value color={item.color}>\n                {formatter ? formatter(item.value) : String(item.value)}\n              </Value>\n              {item.suffix ? <Suffix>{item.suffix}</Suffix> : null}\n            </Box>\n            {item.note ? <Note>{item.note}</Note> : null}\n          </Box>\n          {item.delta ? (\n            <Box sx={styles.delta}>\n              <Delta\n                value={item.delta.value}\n                label={item.delta.label}\n                severity={item.delta.severity}\n              />\n            </Box>\n          ) : null}\n        </Box>\n      ))}\n    </Box>\n  )\n}\n","import { useWidgetId, useWidgetShallow } from '../stores'\nimport { FormulaUI } from './formula-ui'\nimport type { FormulaWidgetData } from './types'\n\ninterface FormulaSlice {\n  data: FormulaWidgetData\n  formatter?: (value: number) => string\n}\n\n// Stable empty-data sentinel — keeps the slice's `data` reference stable\n// when the underlying store value is null/undefined so the shallow-equality\n// gate in `useWidgetShallow` doesn't re-render every commit.\nconst EMPTY_DATA: FormulaWidgetData = Object.freeze([]) as FormulaWidgetData\n\nconst formulaSelector = (s: {\n  data: unknown\n  formatter?: (value: number) => string\n}): FormulaSlice => ({\n  data: (s.data ?? EMPTY_DATA) as FormulaWidgetData,\n  formatter: s.formatter,\n})\n\n/**\n * Stateful Formula bridge — reads `data` (post-pipeline) and `formatter` from\n * the per-widget store and forwards them to the pure {@link FormulaUI}. Sits\n * inside `<Widget.Provider>`. Demonstrates that the composition shell\n * (Provider, Wrapper, State) doesn't care whether the rendered child is\n * ECharts (Bar) or a custom DOM tree (Formula).\n */\nexport function Formula() {\n  const id = useWidgetId()\n  const slice = useWidgetShallow(id, formulaSelector)\n  return <FormulaUI items={slice.data} formatter={slice.formatter} />\n}\n","import { Box, Skeleton } from '@mui/material'\nimport type { SxProps, Theme } from '@mui/material'\n\nconst styles = {\n  root: {\n    display: 'flex',\n    gap: 3,\n    alignItems: 'baseline',\n    minHeight: 64,\n    py: 1,\n  },\n  block: { width: 120, height: 36 },\n} satisfies Record<string, SxProps<Theme>>\n\nexport interface FormulaSkeletonProps {\n  count?: number\n}\n\nexport function FormulaSkeleton({ count = 1 }: FormulaSkeletonProps) {\n  return (\n    <Box sx={styles.root}>\n      {Array.from({ length: count }).map((_, i) => (\n        <Skeleton key={`row-${i}`} variant='rectangular' sx={styles.block} />\n      ))}\n    </Box>\n  )\n}\n","import {\n  buildCsvDownloadItem,\n  buildPngDownloadItem,\n  type DownloadContext,\n  type DownloadItem,\n} from '../actions/download'\nimport type { FormulaWidgetData } from './types'\n\nexport interface FormulaDownloadConfigArgs {\n  filename: string\n  getData: (ctx: DownloadContext) => FormulaWidgetData\n  /**\n   * Optional getter for the widget's capture element (registered by\n   * `Widget.State`). When provided, a PNG item is prepended.\n   */\n  getCaptureEl?: (ctx: DownloadContext) => HTMLElement | null\n  pngPixelRatio?: number\n  pngBackgroundColor?: string | null\n}\n\n/**\n * Builds download items for the Formula widget. Always includes a CSV item\n * with one row per KPI (`prefix`, `value`, `suffix`, `note`, `delta`).\n * When `getCaptureEl` is supplied, prepends a PNG item that rasterises the\n * captured element via `html2canvas`.\n */\nexport function createFormulaDownloadConfig(\n  args: FormulaDownloadConfigArgs,\n): DownloadItem[] {\n  const items: DownloadItem[] = []\n  if (args.getCaptureEl) {\n    items.push(\n      buildPngDownloadItem({\n        filename: args.filename,\n        getCaptureEl: args.getCaptureEl,\n        pixelRatio: args.pngPixelRatio,\n        backgroundColor: args.pngBackgroundColor,\n      }),\n    )\n  }\n  items.push(\n    buildCsvDownloadItem({\n      filename: args.filename,\n      getRows: (ctx) => {\n        const data = args.getData(ctx)\n        const rows: unknown[][] = [\n          ['series', 'prefix', 'value', 'suffix', 'note', 'delta'],\n        ]\n        for (const d of data) {\n          rows.push([\n            d.series?.name ?? '',\n            d.prefix ?? '',\n            d.value,\n            d.suffix ?? '',\n            d.note ?? '',\n            d.delta?.value ?? '',\n          ])\n        }\n        return rows\n      },\n    }),\n  )\n  return items\n}\n"],"mappings":"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"}

package/dist/legend.js

@@ -1864,12 +1864,15 @@ function Bt(e) {
 	return Math.min(100, Math.max(0, a));
 }
 function Vt(t) {
-	let n = y(40), { data: r, labels: i } = t, a = i === void 0 ? ye : i, { colors: o, stops: s, isContinuous: c, attribute: l, formatValue: u } = r, d = u === void 0 ? String : u, f;
+	let n = y(42), { data: r, labels: i } = t, a = i === void 0 ? ye : i, { colors: o, stops: s, isContinuous: c, attribute: l, formatValue: u } = r, d = u === void 0 ? String : u, f;
 	n[0] === r ? f = n[1] : (f = Bt(r), n[0] = r, n[1] = f);
 	let p = f, m = s[0], h = s[s.length - 1], g;
 	n[2] === o ? g = n[3] : (g = o.join(", "), n[2] = o, n[3] = g);
 	let _ = `linear-gradient(90deg, ${g})`, v = !c && s.length === o.length + 1, b = !c && !v, x;
-	n[4] === s ? x = n[5] : (x = (e) => `${s[e]?.label ?? ""} – ${s[e + 1]?.label ?? ""}`, n[4] = s, n[5] = x);
+	if (n[4] !== s) {
+		let e = (e) => s[e].label || String(s[e].value);
+		x = (t) => `${e(t)} – ${e(t + 1)}`, n[4] = s, n[5] = x;
+	} else x = n[5];
 	let S = x, C;
 	n[6] !== l || n[7] !== a ? (C = l && /* @__PURE__ */ H(k, {
 		sx: Q.attribute,
@@ -1903,7 +1906,7 @@ function Vt(t) {
 		}), n[12] = w, n[13] = r, n[14] = i) : i = n[14], i;
 	}
 	let T;
-	n[15] !== o || n[16] !== _ || n[17] !== c || n[18] !== a || n[19] !== S ? (T = c ? /* @__PURE__ */ V(k, {
+	n[15] !== o || n[16] !== d || n[17] !== _ || n[18] !== c || n[19] !== a || n[20] !== S || n[21] !== s ? (T = c ? /* @__PURE__ */ V(k, {
 		role: "img",
 		"aria-label": a.colorGradient,
 		sx: {
@@ -1911,21 +1914,31 @@ function Vt(t) {
 			height: "100%",
 			background: _
 		}
-	}) : o.map((e, t) => /* @__PURE__ */ V(k, {
-		role: "img",
-		"aria-label": S(t),
-		sx: {
-			...Q.step,
-			backgroundColor: e
-		}
-	}, t)), n[15] = o, n[16] = _, n[17] = c, n[18] = a, n[19] = S, n[20] = T) : T = n[20];
+	}) : o.map((t, n) => /* @__PURE__ */ V(e, {
+		title: /* @__PURE__ */ H(B, { children: [
+			d(s[n].value),
+			" –",
+			" ",
+			d(s[n + 1].value)
+		] }),
+		placement: "top",
+		arrow: !0,
+		children: /* @__PURE__ */ V(k, {
+			role: "img",
+			"aria-label": S(n),
+			sx: {
+				...Q.step,
+				backgroundColor: t
+			}
+		})
+	}, n)), n[15] = o, n[16] = d, n[17] = _, n[18] = c, n[19] = a, n[20] = S, n[21] = s, n[22] = T) : T = n[22];
 	let E;
-	n[21] === T ? E = n[22] : (E = /* @__PURE__ */ V(k, {
+	n[23] === T ? E = n[24] : (E = /* @__PURE__ */ V(k, {
 		sx: Q.bar,
 		children: T
-	}), n[21] = T, n[22] = E);
+	}), n[23] = T, n[24] = E);
 	let D;
-	n[23] !== p || n[24] !== r.avg || n[25] !== d ? (D = p != null && r.avg != null && /* @__PURE__ */ V(e, {
+	n[25] !== p || n[26] !== r.avg || n[27] !== d ? (D = p != null && r.avg != null && /* @__PURE__ */ V(e, {
 		title: d(r.avg),
 		placement: "top",
 		arrow: !0,
@@ -1933,14 +1946,14 @@ function Vt(t) {
 			sx: Q.avgLine,
 			style: { left: `${p}%` }
 		})
-	}), n[23] = p, n[24] = r.avg, n[25] = d, n[26] = D) : D = n[26];
+	}), n[25] = p, n[26] = r.avg, n[27] = d, n[28] = D) : D = n[28];
 	let O;
-	n[27] !== E || n[28] !== D ? (O = /* @__PURE__ */ H(k, {
+	n[29] !== E || n[30] !== D ? (O = /* @__PURE__ */ H(k, {
 		sx: Q.barWrap,
 		children: [E, D]
-	}), n[27] = E, n[28] = D, n[29] = O) : O = n[29];
+	}), n[29] = E, n[30] = D, n[31] = O) : O = n[31];
 	let A;
-	n[30] !== o.length || n[31] !== m?.label || n[32] !== v || n[33] !== h?.label || n[34] !== s ? (A = v ? /* @__PURE__ */ V(k, {
+	n[32] !== o.length || n[33] !== m?.label || n[34] !== v || n[35] !== h?.label || n[36] !== s ? (A = v ? /* @__PURE__ */ V(k, {
 		sx: Q.boundaryLabels,
 		children: s.map((e, t) => {
 			let n = t === s.length - 1, r = t === 0 ? void 0 : n ? "translateX(-100%)" : "translateX(-50%)";
@@ -1966,16 +1979,16 @@ function Vt(t) {
 			color: "text.secondary",
 			children: h?.label
 		})]
-	}), n[30] = o.length, n[31] = m?.label, n[32] = v, n[33] = h?.label, n[34] = s, n[35] = A) : A = n[35];
+	}), n[32] = o.length, n[33] = m?.label, n[34] = v, n[35] = h?.label, n[36] = s, n[37] = A) : A = n[37];
 	let j;
-	return n[36] !== w || n[37] !== O || n[38] !== A ? (j = /* @__PURE__ */ H(k, {
+	return n[38] !== w || n[39] !== O || n[40] !== A ? (j = /* @__PURE__ */ H(k, {
 		sx: Q.container,
 		children: [
 			w,
 			O,
 			A
 		]
-	}), n[36] = w, n[37] = O, n[38] = A, n[39] = j) : j = n[39], j;
+	}), n[38] = w, n[39] = O, n[40] = A, n[41] = j) : j = n[41], j;
 }
 //#endregion
 //#region src/legend/components/legend-proportion/styles.ts