feat: CategoryBar now supports values more than 100 or less than 100 …

…(while more than 1) (#1036)

* feat: CategoryBar now supports values less than 100 or more than 100

* feat: CategoryBar tests for values more than 100 or less than 100

* feat: wrapping some variables into useMemo in CategoryBar

* fix: Consecutive typo in CategoryBar

* lint

* update comments

---------

Co-authored-by: severinlandolt <sev.landolt@gmail.com>

src/components/vis-elements/BarList/BarList.tsx

@@ -111,8 +111,9 @@ function BarListInner<T>(props: BarListProps<T>, ref: React.ForwardedRef<HTMLDiv
                   onValueChange && !(item.color || color)
                     ? "group-hover:bg-tremor-brand-subtle/30 group-hover:dark:bg-dark-tremor-brand-subtle/70"
                     : "",
-                  // margin and duration
+                  // margin
                   index === sortedData.length - 1 ? "mb-0" : "",
+                  // duration
                   showAnimation ? "duration-500" : "",
                 )}
                 style={{ width: `${widths[index]}%`, transition: showAnimation ? "all 1s" : "" }}

src/components/vis-elements/CategoryBar/CategoryBar.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useMemo } from "react";
 import Tooltip, { useTooltip } from "components/util-elements/Tooltip/Tooltip";
 import {
   getColorClassNames,
@@ -32,10 +32,13 @@ const getMarkerBgColor = (
   return "";
 };
 
+const getPositionLeft = (value: number | undefined, maxValue: number): number =>
+  value ? (value / maxValue) * 100 : 0;
+
 const BarLabels = ({ values }: { values: number[] }) => {
-  const sumValues = sumNumericArray(values);
+  const sumValues = useMemo(() => sumNumericArray(values), [values]);
   let prefixSum = 0;
-  let sumConsecutveHiddenLabels = 0;
+  let sumConsecutiveHiddenLabels = 0;
   return (
     <div
       className={tremorTwMerge(
@@ -51,16 +54,20 @@ const BarLabels = ({ values }: { values: number[] }) => {
       {values.slice(0, values.length).map((widthPercentage, idx) => {
         prefixSum += widthPercentage;
         const showLabel =
-          (widthPercentage >= 0.1 * sumValues || sumConsecutveHiddenLabels >= 0.09 * sumValues) &&
+          (widthPercentage >= 0.1 * sumValues || sumConsecutiveHiddenLabels >= 0.09 * sumValues) &&
           sumValues - prefixSum >= 0.15 * sumValues &&
           prefixSum >= 0.1 * sumValues;
-        sumConsecutveHiddenLabels = showLabel ? 0 : (sumConsecutveHiddenLabels += widthPercentage);
+        sumConsecutiveHiddenLabels = showLabel
+          ? 0
+          : (sumConsecutiveHiddenLabels += widthPercentage);
+
+        const widthPositionLeft = getPositionLeft(widthPercentage, sumValues);
 
         return (
           <div
             key={`item-${idx}`}
             className="flex items-center justify-end"
-            style={{ width: `${widthPercentage}%` }}
+            style={{ width: `${widthPositionLeft}%` }}
           >
             <span
               className={tremorTwMerge(showLabel ? "block" : "hidden", "left-1/2 translate-x-1/2")}
@@ -99,10 +106,20 @@ const CategoryBar = React.forwardRef<HTMLDivElement, CategoryBarProps>((props, r
     ...other
   } = props;
 
-  const markerBgColor = getMarkerBgColor(markerValue, values, colors);
+  const markerBgColor = useMemo(
+    () => getMarkerBgColor(markerValue, values, colors),
+    [markerValue, values, colors],
+  );
 
   const { tooltipProps, getReferenceProps } = useTooltip();
 
+  const maxValue = useMemo(() => sumNumericArray(values), [values]);
+
+  const markerPositionLeft: number = useMemo(
+    () => getPositionLeft(markerValue, maxValue),
+    [markerValue, maxValue],
+  );
+
   return (
     <>
       <Tooltip text={tooltip} {...tooltipProps} />
@@ -126,6 +143,7 @@ const CategoryBar = React.forwardRef<HTMLDivElement, CategoryBarProps>((props, r
           >
             {values.map((value, idx) => {
               const baseColor = colors[idx] ?? "gray";
+              const percentage = (value / maxValue) * 100;
               return (
                 <div
                   key={`item-${idx}`}
@@ -134,7 +152,7 @@ const CategoryBar = React.forwardRef<HTMLDivElement, CategoryBarProps>((props, r
                     "h-full",
                     getColorClassNames(baseColor, colorPalette.background).bgColor,
                   )}
-                  style={{ width: `${value}%` }}
+                  style={{ width: `${percentage}%` }}
                 />
               );
             })}
@@ -147,7 +165,7 @@ const CategoryBar = React.forwardRef<HTMLDivElement, CategoryBarProps>((props, r
                 "absolute right-1/2 -translate-x-1/2 w-5",
               )}
               style={{
-                left: `${markerValue}%`,
+                left: `${markerPositionLeft}%`,
                 transition: showAnimation ? "all 1s" : "",
               }}
               {...getReferenceProps}

src/stories/vis-elements/CategoryBar.stories.tsx

@@ -73,6 +73,26 @@ export const WithZeroValues: Story = {
   },
 };
 
+export const WithValuesMoreThan100: Story = {
+  args: {
+    values: [400, 400, 800],
+    colors: ["emerald", "yellow", "orange", "rose"],
+    markerValue: 1400,
+    tooltip: "90%",
+    className: "mt-5",
+  },
+};
+
+export const WithValuesLessThan100: Story = {
+  args: {
+    values: [8, 7, 9, 8],
+    colors: ["emerald", "yellow", "orange", "rose"],
+    markerValue: 20,
+    tooltip: "90%",
+    className: "mt-5",
+  },
+};
+
 export const WithConsecutiveSmallValues: Story = {
   args: {
     values: [10, 5, 5, 5, 5, 5, 50, 15, 0],

src/tests/vis-elements/CategoryBar.test.tsx

@@ -8,4 +8,10 @@ describe("CategoryBar", () => {
   test("renders the CategoryBar component with default props", () => {
     render(<CategoryBar values={[10, 25, 45, 20]} />);
   });
+  test("renders the CategoryBar component with values more than 100", () => {
+    render(<CategoryBar values={[400, 400, 800]} />);
+  });
+  test("renders the CategoryBar component with values less than 100", () => {
+    render(<CategoryBar values={[8, 7, 9, 8]} />);
+  });
 });