@trackunit/react-components 1.17.20 → 1.17.22

package/index.cjs.js

@@ -7004,6 +7004,69 @@ const ToggleButton = ({ title, size, children, "data-testid": dataTestId, classN
     return (jsxRuntime.jsx("button", { className: tailwindMerge.twMerge("flex items-center justify-center gap-1 self-stretch", paddingClasses, className), "data-testid": dataTestId, title: isIconOnly ? title : undefined, type: "button", ...rest, children: isIconOnly ? (icon) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconPrefix, children] })) }));
 };
 
+const cvaSegmentedValueBar = cssClassVarianceUtilities.cvaMerge(["w-full", "overflow-hidden", "rounded", "bg-neutral-100", "flex"], {
+    variants: {
+        size: {
+            extraSmall: "h-1",
+            small: "h-3",
+            large: "h-9",
+        },
+    },
+    defaultVariants: {
+        size: "small",
+    },
+});
+
+/** Minimum fraction of the total a segment must occupy for value text to be overlaid inside it. */
+const MIN_RATIO_FOR_OVERLAY_ALIGNMENT = 0.2;
+const filterPositive = (segments) => segments.filter(segment => segment.value > 0);
+/** Formats a numeric value to one decimal place with an optional unit suffix. */
+const formatValue = (value, unit) => `${Number(value.toFixed(1))}${unit ?? ""}`;
+/** Returns the sum of all positive segment values. */
+const computeSum = (segments) => filterPositive(segments).reduce((acc, segment) => acc + segment.value, 0);
+/** Computes percentage widths for each positive segment, scaling proportionally when the sum exceeds total. */
+const computeSegments = (segments, total) => {
+    if (total <= 0)
+        return [];
+    const positiveSegments = filterPositive(segments);
+    const sum = computeSum(segments);
+    const scale = sum > total ? total / sum : 1;
+    return positiveSegments.map(segment => ({
+        width: (segment.value / total) * scale * 100,
+        value: segment.value,
+        color: segment.color,
+        label: segment.label,
+    }));
+};
+/** Determines the text variant size for value overlay placement on the bar. */
+const getValueTextVariant = (size, sum, segments, total) => {
+    if (size !== "large" || sum <= 0)
+        return "small";
+    const firstPositiveSegment = segments.find(segment => segment.value > 0);
+    const isFirstSegmentWideEnoughForOverlay = firstPositiveSegment !== undefined &&
+        total > 0 &&
+        firstPositiveSegment.value / total >= MIN_RATIO_FOR_OVERLAY_ALIGNMENT;
+    return isFirstSegmentWideEnoughForOverlay ? "large" : "small";
+};
+
+/**
+ * SegmentedValueBar displays multiple colored segments on a bar to visualize values relative to a total.
+ * Supports optional tooltips per segment, showing value and optionally a label.
+ */
+const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, unit, valueColor, showTooltip = false, className, "data-testid": dataTestId, }) => {
+    const computedSegments = computeSegments(segments, total);
+    const sum = total > 0 ? computeSum(segments) : 0;
+    const valueText = formatValue(sum, unit);
+    const canShowValue = showValue && size !== "extraSmall";
+    const valueTextClassName = cvaValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
+    return (jsxRuntime.jsxs("span", { className: "relative flex items-center gap-2", "data-testid": dataTestId, children: [jsxRuntime.jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
+                    const tooltipLabel = segment.label
+                        ? `${segment.label}: ${formatValue(segment.value, unit)}`
+                        : formatValue(segment.value, unit);
+                    return showTooltip ? (jsxRuntime.jsx(Tooltip, { label: tooltipLabel, placement: "top", children: jsxRuntime.jsx("div", { "data-testid": dataTestId ? `${dataTestId}-segment-${index}` : undefined, style: { backgroundColor: segment.color, width: `${segment.width}%`, height: "100%" } }) }, index)) : (jsxRuntime.jsx("div", { "data-testid": dataTestId ? `${dataTestId}-segment-${index}` : undefined, style: { backgroundColor: segment.color, width: `${segment.width}%`, height: "100%" } }, index));
+                }) }), canShowValue ? (jsxRuntime.jsx("span", { className: valueTextClassName, "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsxRuntime.jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
+};
+
 /**
  * Base64URL encode bytes to a URL-safe string
  */
@@ -8434,6 +8497,7 @@ exports.PreferenceCardSkeleton = PreferenceCardSkeleton;
 exports.Prompt = Prompt;
 exports.ROLE_CARD = ROLE_CARD;
 exports.SectionHeader = SectionHeader;
+exports.SegmentedValueBar = SegmentedValueBar;
 exports.Sidebar = Sidebar;
 exports.SkeletonBlock = SkeletonBlock;
 exports.SkeletonLabel = SkeletonLabel;

package/index.esm.js

@@ -7002,6 +7002,69 @@ const ToggleButton = ({ title, size, children, "data-testid": dataTestId, classN
     return (jsx("button", { className: twMerge("flex items-center justify-center gap-1 self-stretch", paddingClasses, className), "data-testid": dataTestId, title: isIconOnly ? title : undefined, type: "button", ...rest, children: isIconOnly ? (icon) : (jsxs(Fragment$1, { children: [iconPrefix, children] })) }));
 };
 
+const cvaSegmentedValueBar = cvaMerge(["w-full", "overflow-hidden", "rounded", "bg-neutral-100", "flex"], {
+    variants: {
+        size: {
+            extraSmall: "h-1",
+            small: "h-3",
+            large: "h-9",
+        },
+    },
+    defaultVariants: {
+        size: "small",
+    },
+});
+
+/** Minimum fraction of the total a segment must occupy for value text to be overlaid inside it. */
+const MIN_RATIO_FOR_OVERLAY_ALIGNMENT = 0.2;
+const filterPositive = (segments) => segments.filter(segment => segment.value > 0);
+/** Formats a numeric value to one decimal place with an optional unit suffix. */
+const formatValue = (value, unit) => `${Number(value.toFixed(1))}${unit ?? ""}`;
+/** Returns the sum of all positive segment values. */
+const computeSum = (segments) => filterPositive(segments).reduce((acc, segment) => acc + segment.value, 0);
+/** Computes percentage widths for each positive segment, scaling proportionally when the sum exceeds total. */
+const computeSegments = (segments, total) => {
+    if (total <= 0)
+        return [];
+    const positiveSegments = filterPositive(segments);
+    const sum = computeSum(segments);
+    const scale = sum > total ? total / sum : 1;
+    return positiveSegments.map(segment => ({
+        width: (segment.value / total) * scale * 100,
+        value: segment.value,
+        color: segment.color,
+        label: segment.label,
+    }));
+};
+/** Determines the text variant size for value overlay placement on the bar. */
+const getValueTextVariant = (size, sum, segments, total) => {
+    if (size !== "large" || sum <= 0)
+        return "small";
+    const firstPositiveSegment = segments.find(segment => segment.value > 0);
+    const isFirstSegmentWideEnoughForOverlay = firstPositiveSegment !== undefined &&
+        total > 0 &&
+        firstPositiveSegment.value / total >= MIN_RATIO_FOR_OVERLAY_ALIGNMENT;
+    return isFirstSegmentWideEnoughForOverlay ? "large" : "small";
+};
+
+/**
+ * SegmentedValueBar displays multiple colored segments on a bar to visualize values relative to a total.
+ * Supports optional tooltips per segment, showing value and optionally a label.
+ */
+const SegmentedValueBar = ({ segments, total, size = "small", showValue = false, unit, valueColor, showTooltip = false, className, "data-testid": dataTestId, }) => {
+    const computedSegments = computeSegments(segments, total);
+    const sum = total > 0 ? computeSum(segments) : 0;
+    const valueText = formatValue(sum, unit);
+    const canShowValue = showValue && size !== "extraSmall";
+    const valueTextClassName = cvaValueBarText({ size: getValueTextVariant(size, sum, segments, total) });
+    return (jsxs("span", { className: "relative flex items-center gap-2", "data-testid": dataTestId, children: [jsx("div", { "aria-label": valueText, className: cvaSegmentedValueBar({ className, size }), "data-testid": dataTestId ? `${dataTestId}-track` : undefined, children: computedSegments.map((segment, index) => {
+                    const tooltipLabel = segment.label
+                        ? `${segment.label}: ${formatValue(segment.value, unit)}`
+                        : formatValue(segment.value, unit);
+                    return showTooltip ? (jsx(Tooltip, { label: tooltipLabel, placement: "top", children: jsx("div", { "data-testid": dataTestId ? `${dataTestId}-segment-${index}` : undefined, style: { backgroundColor: segment.color, width: `${segment.width}%`, height: "100%" } }) }, index)) : (jsx("div", { "data-testid": dataTestId ? `${dataTestId}-segment-${index}` : undefined, style: { backgroundColor: segment.color, width: `${segment.width}%`, height: "100%" } }, index));
+                }) }), canShowValue ? (jsx("span", { className: valueTextClassName, "data-testid": dataTestId ? `${dataTestId}-value` : undefined, children: jsx("span", { style: valueColor ? { color: valueColor } : undefined, children: valueText }) })) : null] }));
+};
+
 /**
  * Base64URL encode bytes to a URL-safe string
  */
@@ -8377,4 +8440,4 @@ const useWindowActivity = ({ onFocus, onBlur, skip = false } = { onBlur: undefin
     return useMemo(() => ({ focused }), [focused]);
 };
 
-export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMergeRefs, useModifierKey, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSelfUpdatingRef, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };
+export { ActionRenderer, Alert, Badge, Breadcrumb, BreadcrumbContainer, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, DEFAULT_SKELETON_PREFERENCE_CARD_PROPS, DetailsList, EmptyState, EmptyValue, ExternalLink, GridAreas, Heading, Highlight, HorizontalOverflowScroller, Icon, IconButton, Indicator, KPI, KPICard, KPICardSkeleton, KPISkeleton, List, ListItem, MenuDivider, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, PageHeaderKpiMetrics, PageHeaderSecondaryActions, PageHeaderTitle, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Portal, PreferenceCard, PreferenceCardSkeleton, Prompt, ROLE_CARD, SectionHeader, SegmentedValueBar, Sidebar, SkeletonBlock, SkeletonLabel, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, ToggleGroup, Tooltip, TrendIndicator, TrendIndicators, ValueBar, ZStack, createGrid, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaContainerStyles, cvaContentContainer, cvaContentWrapper, cvaDescriptionCard, cvaIconBackground, cvaIconButton, cvaImgStyles, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInputContainer, cvaInteractableItem, cvaList, cvaListContainer, cvaListItem$1 as cvaListItem, cvaMenu, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, cvaMenuList, cvaMenuListDivider, cvaMenuListItem, cvaMenuListMultiSelect, cvaPageHeader, cvaPageHeaderContainer, cvaPageHeaderHeading, cvaPreferenceCard, cvaTitleCard, cvaToggleGroup, cvaToggleGroupWithSlidingBackground, cvaToggleItem, cvaToggleItemContent, cvaToggleItemText, cvaZStackContainer, cvaZStackItem, defaultPageSize, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, noPagination, preferenceCardGrid, useClickOutside, useContainerBreakpoints, useContinuousTimeout, useCopyToClipboard, useCustomEncoding, useDebounce, useDevicePixelRatio, useElevatedReducer, useElevatedState, useGridAreas, useHover, useInfiniteScroll, useIsFirstRender, useIsFullscreen, useIsTextTruncated, useKeyboardShortcut, useList, useListItemHeight, useLocalStorage, useLocalStorageReducer, useMeasure, useMergeRefs, useModifierKey, useOverflowItems, usePopoverContext, usePrevious, usePrompt, useRandomCSSLengths, useRelayPagination, useResize, useScrollBlock, useScrollDetection, useSelfUpdatingRef, useTextSearch, useTimeout, useViewportBreakpoints, useWatch, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.17.20",
+  "version": "1.17.22",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/ValueBar/SegmentedValueBar.d.ts

@@ -0,0 +1,40 @@
+import { ReactElement } from "react";
+import { CommonProps } from "../../common/CommonProps";
+import type { SegmentedValueBarSize, ValueBarSegment } from "./SegmentedValueBarTypes";
+export interface SegmentedValueBarProps extends CommonProps {
+    /**
+     * Array of segments to display. Each segment has a numeric value and a color and optionally a label.
+     * Segments render in the order they are provided; the component does not sort or reorder them.
+     */
+    readonly segments: Array<ValueBarSegment>;
+    /**
+     * The total value that segments are measured against.
+     */
+    readonly total: number;
+    /**
+     * Size of the bar. Determines height and whether value text can be displayed.
+     */
+    readonly size?: SegmentedValueBarSize;
+    /**
+     * Show the sum of segment values with unit (if provided) on the bar in large version or after the bar in the small version.
+     * Ignored when size is "extraSmall".
+     */
+    readonly showValue?: boolean;
+    /**
+     * Unit appended to the displayed value, e.g. "%", "h", "°C".
+     */
+    readonly unit?: string;
+    /**
+     * Custom color for the displayed value text.
+     */
+    readonly valueColor?: string;
+    /**
+     * Show a tooltip on hover with the individual segment value (and unit if provided). If a segment has a label, it is shown alongside the value.
+     */
+    readonly showTooltip?: boolean;
+}
+/**
+ * SegmentedValueBar displays multiple colored segments on a bar to visualize values relative to a total.
+ * Supports optional tooltips per segment, showing value and optionally a label.
+ */
+export declare const SegmentedValueBar: ({ segments, total, size, showValue, unit, valueColor, showTooltip, className, "data-testid": dataTestId, }: SegmentedValueBarProps) => ReactElement;

package/src/components/ValueBar/SegmentedValueBar.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const cvaSegmentedValueBar: (props?: ({
+    size?: "extraSmall" | "small" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/ValueBar/SegmentedValueBarHelper.d.ts

@@ -0,0 +1,16 @@
+import type { SegmentedValueBarSize, ValueBarSegment } from "./SegmentedValueBarTypes";
+type ComputedSegment = {
+    readonly width: number;
+    readonly value: number;
+    readonly color: string;
+    readonly label?: string;
+};
+/** Formats a numeric value to one decimal place with an optional unit suffix. */
+export declare const formatValue: (value: number, unit?: string) => string;
+/** Returns the sum of all positive segment values. */
+export declare const computeSum: (segments: Array<ValueBarSegment>) => number;
+/** Computes percentage widths for each positive segment, scaling proportionally when the sum exceeds total. */
+export declare const computeSegments: (segments: Array<ValueBarSegment>, total: number) => Array<ComputedSegment>;
+/** Determines the text variant size for value overlay placement on the bar. */
+export declare const getValueTextVariant: (size: SegmentedValueBarSize, sum: number, segments: Array<ValueBarSegment>, total: number) => "small" | "large";
+export {};

package/src/components/ValueBar/SegmentedValueBarTypes.d.ts

@@ -0,0 +1,6 @@
+export type ValueBarSegment = {
+    readonly value: number;
+    readonly color: string;
+    readonly label?: string;
+};
+export type SegmentedValueBarSize = "small" | "large" | "extraSmall";

package/src/index.d.ts

@@ -97,6 +97,8 @@ export * from "./components/Text/Text";
 export * from "./components/ToggleGroup/ToggleGroup";
 export * from "./components/ToggleGroup/ToggleGroup.variants";
 export * from "./components/Tooltip/Tooltip";
+export * from "./components/ValueBar/SegmentedValueBar";
+export * from "./components/ValueBar/SegmentedValueBarTypes";
 export * from "./components/ValueBar/ValueBar";
 export { getValueBarColorByValue } from "./components/ValueBar/ValueBarHelper";
 export * from "./components/ValueBar/ValueBarTypes";