@trackunit/react-components 0.0.130 → 0.0.131

package/components/ValueBar/ValueBar.d.ts

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { LevelColors } from "./ValueBarTypes";
+import { CommonProps } from "../../common";
+export interface ValueBarProps extends CommonProps {
+    /**
+     * Value to display.
+     */
+    value: number;
+    /**
+     * Minimum value visible on the bar.
+     */
+    min?: number;
+    /**
+     * Maximum value visible on the bar.
+     */
+    max?: number;
+    /**
+     * Value unit. Visible only together with value if showValue parameter is set to true.
+     */
+    unit?: string;
+    /**
+     * Size of the tooltip
+     */
+    size?: "small" | "large";
+    /**
+     * Custom level colors. If this param is not provided then default values are used.
+     */
+    levelColors?: LevelColors;
+    /**
+     * Custom value color. If this param is not provided then default value is used.
+     */
+    valueColor?: string;
+    /**
+     * Show value with unit (if provided) on the bar in large version or after the bar in the small version.
+     */
+    showValue?: boolean;
+}
+/**
+ * ValueBar component is used to display value on a colorful bar within provided range.
+ *
+ * @param {ValueBarProps} props - The props for the ValueBar component
+ * @returns {JSX.Element} ValueBar component
+ */
+export declare const ValueBar: ({ value, min, max, unit, size, levelColors, valueColor, showValue, className, dataTestId }: ValueBarProps) => JSX.Element;

package/components/ValueBar/ValueBarHelper.d.ts

@@ -0,0 +1,42 @@
+import { LevelColors } from "./ValueBarTypes";
+/**
+ * Helper function to get normalized score in range 0-1 used by the ValueBar
+ *
+ * @param {number} value - value for which score should be returned
+ * @param {number} min - min range value
+ * @param {number} max - max range value
+ * @returns {number} normalized score
+ */
+export declare const getScore: (value: number, min: number, max: number) => number;
+/**
+ * Helper function to get default color used by the ValueBar
+ *
+ * @param {number} score - score number for which color should be returned
+ * @returns {string} color value
+ */
+export declare const getDefaultFillColor: (score: number) => string;
+/**
+ * Helper function to get normalized color
+ *
+ * @param {number} levelColor - color, ex --color-green-600
+ * @returns {string} normalized color value
+ */
+export declare const getNormalizedLevelColor: (levelColor: string) => string;
+/**
+ * Helper function to get custom color used by the ValueBar
+ *
+ * @param {number} score - score number for which color should be returned
+ * @param {LevelColors} levelColors - custom colors and levels definitions
+ * @returns {string} color value
+ */
+export declare const getFillColor: (score: number, levelColors: LevelColors) => string;
+/**
+ * Helper function to get color used by the ValueBar
+ *
+ * @param {number} value - value for which color should be returned
+ * @param {number} min - min range value
+ * @param {number} max - max range value
+ * @param {LevelColors} levelColors - level colors used to coloring the bar
+ * @returns {JSX.Element} ValueBar component
+ */
+export declare const getValueBarColorByValue: (value: number, min: number, max: number, levelColors: LevelColors) => string;

package/components/ValueBar/ValueBarTypes.d.ts

@@ -0,0 +1,9 @@
+export interface LevelColor {
+    level?: number;
+    color: string;
+}
+export interface LevelColors {
+    low?: LevelColor;
+    medium?: LevelColor;
+    high?: LevelColor;
+}

package/components/ValueBar/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./ValueBar";
+export * from "./ValueBarTypes";
+export { getValueBarColorByValue } from "./ValueBarHelper";

package/components/index.d.ts

@@ -39,3 +39,4 @@ export * from "./Timeline/Timeline";
 export * from "./Tip";
 export * from "./Toggle";
 export * from "./Tooltip";
+export * from "./ValueBar";

package/index.js

@@ -19,6 +19,7 @@ import ReactAsyncCreatableSelect from 'react-select/async-creatable';
 import ReactCreatableSelect from 'react-select/creatable';
 import ReactAsyncSelect from 'react-select/async';
 import { format, formatDistance } from 'date-fns';
+import { getColorValue } from '@trackunit/ui-design-tokens';
 
 const docs = {
   source: {
@@ -400,7 +401,7 @@ const Icon$1 = ({
       className: iconSizeClassName
     })
   }, {
-    children: jsx(Root$3, Object.assign({
+    children: jsx(Root$4, Object.assign({
       "$color": color,
       onClick: onClick,
       "data-testid": dataTestId,
@@ -419,7 +420,7 @@ const Icon$1 = ({
 const LoadingDot = tw.span`
   tu-loading-dot
 `;
-const Root$3 = tw.span`
+const Root$4 = tw.span`
   tu-icon
   ${({
   $color
@@ -581,7 +582,7 @@ const CustomIcon = tw(Icon$1)`
  * @returns {JSX.Element} Text component
  */
 
-const Text = ({
+const Text$1 = ({
   children,
   type = "p",
   size = "medium",
@@ -727,7 +728,7 @@ const Alert = ({
   };
 
   const body = inline ? jsxs("div", {
-    children: [title && jsx(Text, Object.assign({
+    children: [title && jsx(Text$1, Object.assign({
       weight: "bold"
     }, {
       children: title !== null && title !== void 0 ? title : children
@@ -738,7 +739,7 @@ const Alert = ({
       children: children
     }))]
   }) : jsxs(Fragment, {
-    children: [title && jsx(Text, Object.assign({
+    children: [title && jsx(Text$1, Object.assign({
       weight: "bold"
     }, {
       children: title !== null && title !== void 0 ? title : children
@@ -856,7 +857,7 @@ const ContentDetails = tw.div`
 const ContentBody = tw.div`
   tu-alert__content-body
 `;
-const Description$2 = tw(Text)`
+const Description$2 = tw(Text$1)`
   ${p => p.$hasTitle ? tws`tu-alert__description` : null}
 `;
 const RightAligned = tw.div`
@@ -1444,7 +1445,7 @@ const Chart = ({
     children: showLoading ? jsxs(SpinnerContainer, {
       children: [jsx(Spinner, {
         centered: true
-      }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && jsx(Text, Object.assign({
+      }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && jsx(Text$1, Object.assign({
         align: "center",
         subtle: true
       }, {
@@ -1492,7 +1493,7 @@ const Label$3 = ({
   disabled,
   isInvalid
 }) => {
-  return jsx(Root$2, Object.assign({
+  return jsx(Root$3, Object.assign({
     id: id || "",
     htmlFor: htmlFor || "",
     className: className,
@@ -1503,7 +1504,7 @@ const Label$3 = ({
     children: children
   }));
 };
-const Root$2 = tw.label`
+const Root$3 = tw.label`
 tu-label
 ${({
   $disabled
@@ -1704,7 +1705,7 @@ const Collapse = ({
       onClick: handleClick
     }, {
       children: jsxs(LabelContainer$2, {
-        children: [jsx(Text, Object.assign({
+        children: [jsx(Text$1, Object.assign({
           weight: "bold"
         }, {
           children: label
@@ -2220,7 +2221,7 @@ const PopoverListItem = ({
     })) : content
   }));
 };
-const StyledText$2 = tw(Text)`
+const StyledText$2 = tw(Text$1)`
   tu-popover-list-item__text
   ${p => p.$selected && tws`tu-popover-list-item__text--selected`}
 `;
@@ -2267,7 +2268,7 @@ const Container$6 = tw.div`
   tu-popover-title-container
   ${p => p.$divider && `tu-popover-title-container--divider`}
 `;
-const StyledText$1 = tw(Text)`
+const StyledText$1 = tw(Text$1)`
 tu-popover-title-text
 `;
 
@@ -2323,7 +2324,7 @@ const Tooltip = ({
       children: jsx(Content, Object.assign({
         "$mode": mode
       }, {
-        children: jsx(Text, Object.assign({
+        children: jsx(Text$1, Object.assign({
           inverted: mode === "dark",
           type: contentTextType
         }, {
@@ -2721,7 +2722,7 @@ const LegendItem = ({
   dataTestId
 }) => {
   const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
-  return jsxs(Root$1, Object.assign({
+  return jsxs(Root$2, Object.assign({
     "data-testid": dataTestId,
     disabled: disabled,
     className: className,
@@ -2737,7 +2738,7 @@ const LegendItem = ({
     })]
   }));
 };
-const Root$1 = tw.div`
+const Root$2 = tw.div`
   inline-flex
   items-center
   transition-all
@@ -3580,7 +3581,7 @@ const Container$1 = tw.label`
   $isDisabled
 }) => $isDisabled ? tws`tu-select--disabled` : null}
 `;
-const InformativeText = tw(Text)`
+const InformativeText = tw(Text$1)`
   tu-informative-text
   ${p => p.$hasError ? `tu-informative-text--error` : null}
 `;
@@ -4543,11 +4544,11 @@ const TextLengthIndicator = ({
   length,
   maxLength
 }) => {
-  return jsxs(Root, {
+  return jsxs(Root$1, {
     children: [length, "/", maxLength]
   });
 };
-const Root = tw.span`
+const Root$1 = tw.span`
  font-mono
 `;
 
@@ -4839,6 +4840,166 @@ ${({
 }) => $disabled && tws`tu-toggle__description--disabled`}
 `;
 
+/**
+ * Helper function to get normalized score in range 0-1 used by the ValueBar
+ *
+ * @param {number} value - value for which score should be returned
+ * @param {number} min - min range value
+ * @param {number} max - max range value
+ * @returns {number} normalized score
+ */
+
+const getScore = (value, min, max) => {
+  if (value <= min) {
+    return 0.01; // always render at least some small fragment
+  }
+
+  if (value >= max) {
+    return 1;
+  }
+
+  return (value - min) / (max - min);
+};
+/**
+ * Helper function to get default color used by the ValueBar
+ *
+ * @param {number} score - score number for which color should be returned
+ * @returns {string} color value
+ */
+
+const getDefaultFillColor = score => {
+  if (score < 0.3) {
+    return getColorValue("--color-red-500");
+  }
+
+  if (score >= 0.6) {
+    return getColorValue("--color-green-600");
+  }
+
+  return getColorValue("--color-amber-300");
+};
+/**
+ * Helper function to get normalized color
+ *
+ * @param {number} levelColor - color, ex --color-green-600
+ * @returns {string} normalized color value
+ */
+
+const getNormalizedLevelColor = levelColor => {
+  if (levelColor.startsWith("--color")) {
+    return getColorValue(levelColor);
+  }
+
+  return levelColor;
+};
+/**
+ * Helper function to get custom color used by the ValueBar
+ *
+ * @param {number} score - score number for which color should be returned
+ * @param {LevelColors} levelColors - custom colors and levels definitions
+ * @returns {string} color value
+ */
+
+const getFillColor = (score, levelColors) => {
+  var _a, _b;
+
+  if (levelColors.low && score < (levelColors.low.level || 0)) {
+    return getNormalizedLevelColor(levelColors.low.color);
+  }
+
+  if (levelColors.high && score >= (levelColors.high.level || 0)) {
+    return getNormalizedLevelColor(levelColors.high.color);
+  }
+
+  return getNormalizedLevelColor((_b = (_a = levelColors.medium) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : "--color-amber-300");
+};
+/**
+ * Helper function to get color used by the ValueBar
+ *
+ * @param {number} value - value for which color should be returned
+ * @param {number} min - min range value
+ * @param {number} max - max range value
+ * @param {LevelColors} levelColors - level colors used to coloring the bar
+ * @returns {JSX.Element} ValueBar component
+ */
+
+const getValueBarColorByValue = (value, min, max, levelColors) => {
+  const score = getScore(value, min, max);
+  return getFillColor(score, levelColors);
+};
+
+/**
+ * ValueBar component is used to display value on a colorful bar within provided range.
+ *
+ * @param {ValueBarProps} props - The props for the ValueBar component
+ * @returns {JSX.Element} ValueBar component
+ */
+
+const ValueBar = ({
+  value,
+  min = 0,
+  max = 100,
+  unit,
+  size = "small",
+  levelColors,
+  valueColor,
+  showValue,
+  className,
+  dataTestId
+}) => {
+  const score = getScore(value, min, max);
+  const barFillColor = levelColors ? getFillColor(score, levelColors) : getDefaultFillColor(score);
+  const barWidth = showValue && size === "small" ? 90 : 100;
+  return jsx(Root, Object.assign({
+    className: className,
+    "data-testid": dataTestId,
+    "$size": size
+  }, {
+    children: jsxs("g", {
+      children: [jsx(Background, {
+        width: `${barWidth}%`,
+        rx: "5"
+      }), jsx(Bar, {
+        width: `${score * barWidth}%`,
+        fill: barFillColor,
+        rx: "5"
+      }), showValue && size === "large" && jsxs(Text, Object.assign({
+        "$size": size,
+        x: "12",
+        y: "23",
+        fill: valueColor !== null && valueColor !== void 0 ? valueColor : "white"
+      }, {
+        children: [Number(value.toFixed(1)), unit || ""]
+      })), showValue && size === "small" && jsxs(Text, Object.assign({
+        "$size": size,
+        x: `${barWidth + 2}%`,
+        y: "11",
+        fill: valueColor !== null && valueColor !== void 0 ? valueColor : getColorValue("--color-neutral-400")
+      }, {
+        children: [Number(value.toFixed(1)), unit || ""]
+      }))]
+    })
+  }));
+};
+const Root = tw.svg`
+  tu-value-bar
+  ${({
+  $size
+}) => $size === "small" ? tws`tu-value-bar--small` : tws`tu-value-bar--large`}
+`;
+const Text = tw.text`
+  tu-value-bar__text
+  ${({
+  $size
+}) => $size === "small" ? tws`tu-value-bar__text--small` : tws`tu-value-bar__text--large`}
+`;
+const Background = tw.rect`
+  tu-value-bar__background
+`;
+const Bar = tw.rect`
+  tu-value-bar__bar
+`;
+
 /**
  * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
  *
@@ -5202,4 +5363,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-export { ActionButton, Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$3 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, getOrderedOptions, intentColors, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
+export { ActionButton, Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$3 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiSelectMenuItem, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SingleSelectMenuItem, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text$1 as Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, ValueBar, activityColors, colors, criticalityColors, docs, generalColors, getOrderedOptions, getValueBarColorByValue, intentColors, isMultiValue, useContainerProps, useCustomComponents, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };

package/package.json

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