@bpfdev/oly-ui 1.0.15 → 1.0.16

package/dist/index.d.mts

@@ -3957,6 +3957,39 @@ type PeakBillingHoursProps = {
      * `0` = horizontal (default), `-90` = vertical.
      */
     barValueLabelAngle?: number;
+    /**
+     * Formats the bar-top value label. Defaults to rounding to the nearest
+     * integer (`Math.round`). Pass e.g. `(v) => v.toFixed(1)` for metrics that
+     * are meaningfully fractional, such as an average queue time in minutes.
+     *
+     * Used as-is when rendering a single series via `data`. When rendering
+     * multiple tabs via `seriesByTabId`, this is the fallback for any tab not
+     * present in `valueFormattersByTabId`.
+     */
+    barValueLabelFormatter?: (value: number) => string;
+    /**
+     * Per-tab bar-top value label formatters, keyed by tab id (mirrors
+     * `seriesByTabId`). Only the active tab's formatter is used at a time. A
+     * tab with no entry here falls back to `barValueLabelFormatter`, then to
+     * rounding to the nearest integer. Use this when some tabs are
+     * whole-number metrics and others are fractional, e.g.:
+     * `{ queue: (v) => v.toFixed(1) }`.
+     */
+    valueFormattersByTabId?: Record<string, (value: number) => string>;
+    /**
+     * Formats the "Total" value in the default tooltip. Defaults to rounding
+     * to the nearest integer with thousands separators. Ignored when
+     * `renderTooltip` is provided. Used as-is for a single series via `data`;
+     * for `seriesByTabId`, this is the fallback for any tab not present in
+     * `tooltipValueFormattersByTabId`.
+     */
+    tooltipValueFormatter?: (value: number) => string;
+    /**
+     * Per-tab default-tooltip value formatters, keyed by tab id (mirrors
+     * `valueFormattersByTabId`, but for the tooltip's "Total" line rather than
+     * the bar-top label). Ignored when `renderTooltip` is provided.
+     */
+    tooltipValueFormattersByTabId?: Record<string, (value: number) => string>;
     yAxisDomain?: [number, number];
     yAxisTicks?: number[];
     infoPopover?: ChartWidgetInfoPopoverContent | null;
@@ -3977,7 +4010,7 @@ declare const peakBillingHoursMockSeriesByTabId: Record<string, PeakBillingHours
  * Peak billing hours card: title + subtitle, info control, violet segmented tabs (intrinsic),
  * vertical bar chart with square tops, value labels, and panel tooltip.
  */
-declare function PeakBillingHours({ title, subtitle, tabs, activeTabId, onTabChange, data, isLoading, seriesByTabId, chartMargin, yAxisTickDx, yAxisTickStyle, xAxisTickDx, xAxisTickStyle, barValueLabelAngle, yAxisDomain, yAxisTicks, infoPopover, renderTooltip, emptyStatePlaceholderProps, customization, }: PeakBillingHoursProps): React$1.ReactElement;
+declare function PeakBillingHours({ title, subtitle, tabs, activeTabId, onTabChange, data, isLoading, seriesByTabId, chartMargin, yAxisTickDx, yAxisTickStyle, xAxisTickDx, xAxisTickStyle, barValueLabelAngle, barValueLabelFormatter, valueFormattersByTabId, tooltipValueFormatter, tooltipValueFormattersByTabId, yAxisDomain, yAxisTicks, infoPopover, renderTooltip, emptyStatePlaceholderProps, customization, }: PeakBillingHoursProps): React$1.ReactElement;
 
 type PeakBillingHoursCustomizationProviderProps = {
     value: PeakBillingHoursCustomization;

package/dist/index.d.ts

@@ -3957,6 +3957,39 @@ type PeakBillingHoursProps = {
      * `0` = horizontal (default), `-90` = vertical.
      */
     barValueLabelAngle?: number;
+    /**
+     * Formats the bar-top value label. Defaults to rounding to the nearest
+     * integer (`Math.round`). Pass e.g. `(v) => v.toFixed(1)` for metrics that
+     * are meaningfully fractional, such as an average queue time in minutes.
+     *
+     * Used as-is when rendering a single series via `data`. When rendering
+     * multiple tabs via `seriesByTabId`, this is the fallback for any tab not
+     * present in `valueFormattersByTabId`.
+     */
+    barValueLabelFormatter?: (value: number) => string;
+    /**
+     * Per-tab bar-top value label formatters, keyed by tab id (mirrors
+     * `seriesByTabId`). Only the active tab's formatter is used at a time. A
+     * tab with no entry here falls back to `barValueLabelFormatter`, then to
+     * rounding to the nearest integer. Use this when some tabs are
+     * whole-number metrics and others are fractional, e.g.:
+     * `{ queue: (v) => v.toFixed(1) }`.
+     */
+    valueFormattersByTabId?: Record<string, (value: number) => string>;
+    /**
+     * Formats the "Total" value in the default tooltip. Defaults to rounding
+     * to the nearest integer with thousands separators. Ignored when
+     * `renderTooltip` is provided. Used as-is for a single series via `data`;
+     * for `seriesByTabId`, this is the fallback for any tab not present in
+     * `tooltipValueFormattersByTabId`.
+     */
+    tooltipValueFormatter?: (value: number) => string;
+    /**
+     * Per-tab default-tooltip value formatters, keyed by tab id (mirrors
+     * `valueFormattersByTabId`, but for the tooltip's "Total" line rather than
+     * the bar-top label). Ignored when `renderTooltip` is provided.
+     */
+    tooltipValueFormattersByTabId?: Record<string, (value: number) => string>;
     yAxisDomain?: [number, number];
     yAxisTicks?: number[];
     infoPopover?: ChartWidgetInfoPopoverContent | null;
@@ -3977,7 +4010,7 @@ declare const peakBillingHoursMockSeriesByTabId: Record<string, PeakBillingHours
  * Peak billing hours card: title + subtitle, info control, violet segmented tabs (intrinsic),
  * vertical bar chart with square tops, value labels, and panel tooltip.
  */
-declare function PeakBillingHours({ title, subtitle, tabs, activeTabId, onTabChange, data, isLoading, seriesByTabId, chartMargin, yAxisTickDx, yAxisTickStyle, xAxisTickDx, xAxisTickStyle, barValueLabelAngle, yAxisDomain, yAxisTicks, infoPopover, renderTooltip, emptyStatePlaceholderProps, customization, }: PeakBillingHoursProps): React$1.ReactElement;
+declare function PeakBillingHours({ title, subtitle, tabs, activeTabId, onTabChange, data, isLoading, seriesByTabId, chartMargin, yAxisTickDx, yAxisTickStyle, xAxisTickDx, xAxisTickStyle, barValueLabelAngle, barValueLabelFormatter, valueFormattersByTabId, tooltipValueFormatter, tooltipValueFormattersByTabId, yAxisDomain, yAxisTicks, infoPopover, renderTooltip, emptyStatePlaceholderProps, customization, }: PeakBillingHoursProps): React$1.ReactElement;
 
 type PeakBillingHoursCustomizationProviderProps = {
     value: PeakBillingHoursCustomization;

package/dist/index.js

@@ -17053,7 +17053,7 @@ function formatTooltipValue2(n) {
   );
 }
 function PeakBillingHoursTooltip(props) {
-  const { active, payload, label } = props;
+  const { active, payload, label, formatValue: formatValue3 } = props;
   const { barChart: bc } = usePeakBillingHoursCustomization();
   const tt = bc?.tooltip;
   if (!active || !payload?.length) {
@@ -17130,7 +17130,7 @@ function PeakBillingHoursTooltip(props) {
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { style: { ...rowStyle, marginTop: gap }, children: [
                 /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { style: { color: prefixCol, fontWeight: prefixFw }, children: totalP }),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: formatTooltipValue2(num) })
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { style: { color: valueCol, fontWeight: valueFw }, children: formatValue3 ? formatValue3(num) : formatTooltipValue2(num) })
               ] })
             ] })
           ]
@@ -17153,7 +17153,17 @@ function toNum5(n) {
   return typeof n === "number" ? n : Number(n);
 }
 function PeakBarTopLabel(props) {
-  const { x, y, width, value, fill, fontSize, fontWeight, angle = 0 } = props;
+  const {
+    x,
+    y,
+    width,
+    value,
+    fill,
+    fontSize,
+    fontWeight,
+    angle = 0,
+    formatValue: formatValue3
+  } = props;
   const nx = toNum5(x);
   const ny = toNum5(y);
   const nw = toNum5(width);
@@ -17177,7 +17187,7 @@ function PeakBarTopLabel(props) {
       fontWeight,
       textAnchor: isHorizontal ? "middle" : "start",
       transform: isHorizontal ? void 0 : `rotate(${angle} ${cx} ${cy})`,
-      children: String(Math.round(n))
+      children: formatValue3 ? formatValue3(n) : String(Math.round(n))
     }
   );
 }
@@ -17192,7 +17202,9 @@ function BarPlot2({
   yAxisTickStyle,
   xAxisTickDx = 0,
   xAxisTickStyle,
-  barValueLabelAngle = 0
+  barValueLabelAngle = 0,
+  barValueLabelFormatter,
+  tooltipValueFormatter
 }) {
   const { barChart: bc } = usePeakBillingHoursCustomization();
   const height = bc?.heightPx ?? 320;
@@ -17274,7 +17286,13 @@ function BarPlot2({
                 });
                 return customTooltip == null ? null : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_jsx_runtime55.Fragment, { children: customTooltip });
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(PeakBillingHoursTooltip, { ...tooltipProps });
+              return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                PeakBillingHoursTooltip,
+                {
+                  ...tooltipProps,
+                  formatValue: tooltipValueFormatter
+                }
+              );
             },
             cursor: {
               fill: hoverBandFill,
@@ -17304,7 +17322,8 @@ function BarPlot2({
                     fill: labelFill,
                     fontSize: labelFs,
                     fontWeight: 500,
-                    angle: barValueLabelAngle
+                    angle: barValueLabelAngle,
+                    formatValue: barValueLabelFormatter
                   }
                 )
               }
@@ -17330,6 +17349,10 @@ function PeakBillingHours({
   xAxisTickDx = 0,
   xAxisTickStyle,
   barValueLabelAngle = 0,
+  barValueLabelFormatter,
+  valueFormattersByTabId,
+  tooltipValueFormatter,
+  tooltipValueFormattersByTabId,
   yAxisDomain = [0, 50],
   yAxisTicks = [0, 10, 20, 30, 40, 50],
   infoPopover,
@@ -17343,6 +17366,8 @@ function PeakBillingHours({
     }
     return data ?? [];
   }, [seriesByTabId, data, activeTabId]);
+  const resolvedBarValueLabelFormatter = valueFormattersByTabId?.[activeTabId] ?? barValueLabelFormatter;
+  const resolvedTooltipValueFormatter = tooltipValueFormattersByTabId?.[activeTabId] ?? tooltipValueFormatter;
   const resolvedInfo = infoPopover === void 0 ? DEFAULT_PEAK_BILLING_HOURS_INFO_POPOVER : infoPopover;
   const rootSx = mergeSx3(
     {
@@ -17441,7 +17466,9 @@ function PeakBillingHours({
         yAxisTickStyle,
         xAxisTickDx,
         xAxisTickStyle,
-        barValueLabelAngle
+        barValueLabelAngle,
+        barValueLabelFormatter: resolvedBarValueLabelFormatter,
+        tooltipValueFormatter: resolvedTooltipValueFormatter
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       ChartEmptyState,