rbro-tat-uds 2.2.21 → 2.2.22

package/build/cjs/components/UnitlinkGraph/UnitlinkGraph.cjs

@@ -36,7 +36,6 @@ const UnitLinkGraphStyled = styled.svg`
   .text-contribution {
     font-size: 12px;
     font-weight: 500;
-    fill: ${utils.colors.blue_600};
   }
   .text-action {
     font-size: 12px;
@@ -65,6 +64,7 @@ const UnitLinkGraph = ({
     header: "Placeholder",
     color_primary: utils.colors.purple_600,
     color_secondary: utils.colors.purple_50,
+    outline_color: utils.colors.white,
     percentage: 50,
     place_at_ani: 7,
     actions: [
@@ -87,6 +87,11 @@ const UnitLinkGraph = ({
   timeline_texts = {
     left: "Placeholder"
   },
+  timeline_text_color = {
+    left: utils.colors.blue_600,
+    right: utils.colors.blue_600
+  },
+  lineGraphAreaColor,
   ...rest
 }) => {
   const sliderActive = React.useMemo(() => {
@@ -222,7 +227,9 @@ const UnitLinkGraph = ({
             wrappedLabel,
             sublabel: item.sublabel,
             sublabel_x,
-            sublabel_y
+            sublabel_y,
+            bgColor: item.bgColor || void 0,
+            textColor: item.textColor || void 0
           };
         }
         return {
@@ -254,7 +261,8 @@ const UnitLinkGraph = ({
       const dynamic_pos_secondary_x = get_position_at_indicator - APPROXIMATE_BAR_STROKE_WIDTH - configurations.bars.width - configurations.area.indicators.margin;
       const dynamic_pos_main_x = get_position_at_indicator + APPROXIMATE_BAR_STROKE_WIDTH + configurations.area.indicators.strokeWidth + configurations.area.indicators.margin;
       const h = mainHeightGraph - configurations.bars.actionsGap - START_Y;
-      const calculate_filled_bar = floorToHalf(config.percentage / 100 * h);
+      const mainPercentage = (config?.secondary_percentage || 0) > 0 ? config.percentage - (config?.secondary_percentage || 0) : config.percentage;
+      const calculate_filled_bar = floorToHalf(mainPercentage / 100 * h);
       const x = floorToHalf(main ? dynamic_pos_main_x : dynamic_pos_secondary_x);
       const w = floorToHalf(configurations.bars.width);
       const outlined_y = START_Y + APPROXIMATE_BAR_STROKE_WIDTH + configurations.bars.actionsGap;
@@ -279,7 +287,9 @@ const UnitLinkGraph = ({
         filled_h: Math.max(filled_h, 0),
         colorPrimary: config.color_primary,
         colorSecondary: config.color_secondary,
+        outlineColor: config.outline_color || utils.colors.white,
         strokeWidth: configurations.bars.strokeWidth,
+        percentage: config.percentage,
         barActions: {
           header: {
             title: config.header,
@@ -310,7 +320,7 @@ const UnitLinkGraph = ({
         x1: floorToHalf(mainStart + configurations.area.outersPartsWidth),
         x2: floorToHalf(barMain.x - configurations.area.outersPartsWidth),
         y1: mainHeightGraph - configurations.area.strokeWidth,
-        y2: barMain.filled_y + 1 - configurations.area.additionalSpaceVisualize,
+        y2: (barMain.percentage === 100 ? barMain.outlined_y : barMain.filled_y) + 1 - configurations.area.additionalSpaceVisualize,
         strokeWidth: barMainConfiguration.percentage === 0 ? 0 : configurations.area.graphLineStrokeWidth
       };
       const part_3 = {
@@ -318,8 +328,8 @@ const UnitLinkGraph = ({
           barMain.x - configurations.area.outersPartsWidth - configurations.area.additionalSpaceVisualize
         ),
         x2: floorToHalf(barMain.x),
-        y1: barMain.filled_y + 1 - configurations.area.additionalSpaceVisualize,
-        y2: barMain.filled_y + 1 - configurations.area.additionalSpaceVisualize,
+        y1: (barMain.percentage === 100 ? barMain.outlined_y : barMain.filled_y) + 1 - configurations.area.additionalSpaceVisualize,
+        y2: (barMain.percentage === 100 ? barMain.outlined_y : barMain.filled_y) + 1 - configurations.area.additionalSpaceVisualize,
         strokeWidth: barMainConfiguration.percentage === 0 ? 0 : configurations.area.graphLineStrokeWidth
       };
       return {
@@ -525,7 +535,7 @@ const UnitLinkGraph = ({
               y1: graph.main.area.part_1.y1,
               y2: graph.main.area.part_1.y2,
               strokeWidth: graph.main.area.part_1.strokeWidth,
-              stroke: graph.main.bars.main.colorPrimary
+              stroke: lineGraphAreaColor || graph.main.bars.main.colorPrimary
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -536,7 +546,7 @@ const UnitLinkGraph = ({
               y1: graph.main.area.part_2.y1,
               y2: graph.main.area.part_2.y2,
               strokeWidth: graph.main.area.part_2.strokeWidth,
-              stroke: graph.main.bars.main.colorPrimary
+              stroke: lineGraphAreaColor || graph.main.bars.main.colorPrimary
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -547,15 +557,15 @@ const UnitLinkGraph = ({
               y1: graph.main.area.part_3.y1,
               y2: graph.main.area.part_3.y2,
               strokeWidth: graph.main.area.part_3.strokeWidth,
-              stroke: graph.main.bars.main.colorPrimary
+              stroke: lineGraphAreaColor || graph.main.bars.main.colorPrimary
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "polygon",
             {
               points: `
-            ${graph.main.area.part_2.x2},${graph.main.bars.main.filled_y + 1.5} 
-            ${graph.main.area.part_3.x2},${graph.main.bars.main.filled_y + 1.5}
+            ${graph.main.area.part_2.x2},${(graph.main.bars.main.percentage === 100 ? graph.main.bars.main.outlined_y : graph.main.bars.main.filled_y) + 1.5} 
+            ${graph.main.area.part_3.x2},${(graph.main.bars.main.percentage === 100 ? graph.main.bars.main.outlined_y : graph.main.bars.main.filled_y) + 1.5}
             ${graph.main.area.part_3.x2},${graph.mainHeightGraph} 
             ${graph.main.area.part_2.x1},${graph.mainHeightGraph}`,
               fill: graph.main.bars.main.colorSecondary
@@ -615,6 +625,7 @@ const UnitLinkGraph = ({
             className: "text-contribution",
             y: graph.timeline.text.left.y,
             x: graph.timeline.text.left.x,
+            fill: timeline_text_color.left,
             textAnchor: "end",
             children: timeline_texts.left
           }
@@ -625,6 +636,7 @@ const UnitLinkGraph = ({
             className: "text-contribution",
             y: graph.timeline.text.right.y,
             x: graph.timeline.text.right.x,
+            fill: timeline_text_color.right,
             textAnchor: "start",
             children: timeline_texts.right
           }
@@ -709,7 +721,7 @@ const RenderBar = ({
         y: bar.outlined_y,
         width: bar.w,
         height: bar.outlined_h,
-        fill: utils.colors.white,
+        fill: bar.outlineColor,
         stroke: bar.colorPrimary,
         strokeWidth: bar.strokeWidth
       }
@@ -737,6 +749,8 @@ const RenderBar = ({
     ),
     bar.barActions.actions.map((action, index) => {
       const isActive = activeAction === index;
+      const rectColor = isActive ? bar.colorPrimary : action.bgColor ? action.bgColor : bar.colorSecondary;
+      const textColor = isActive ? utils.colors.white : action.textColor ? action.textColor : bar.colorPrimary;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "g",
         {
@@ -746,7 +760,7 @@ const RenderBar = ({
             /* @__PURE__ */ jsxRuntime.jsx(
               "rect",
               {
-                fill: isActive ? bar.colorPrimary : bar.colorSecondary,
+                fill: rectColor,
                 rx: 4,
                 ry: 4,
                 height: action.actions_h,
@@ -761,7 +775,7 @@ const RenderBar = ({
                 className: "text-bar-actions-label",
                 x: action.label_x,
                 y: action.label_y,
-                fill: isActive ? utils.colors.white : bar.colorPrimary,
+                fill: textColor,
                 children: action.wrappedLabel?.map((line, lineIndex) => /* @__PURE__ */ jsxRuntime.jsx(
                   "tspan",
                   {
@@ -776,7 +790,7 @@ const RenderBar = ({
             action.sublabel && /* @__PURE__ */ jsxRuntime.jsx(
               "text",
               {
-                fill: isActive ? utils.colors.white : bar.colorPrimary,
+                fill: textColor,
                 className: "text-bar-actions-sublabel",
                 x: action.sublabel_x,
                 y: action.sublabel_y,

package/build/cjs/index.cjs

@@ -80803,7 +80803,6 @@ const UnitLinkGraphStyled = styled__default.default.svg`
   .text-contribution {
     font-size: 12px;
     font-weight: 500;
-    fill: ${utils.colors.blue_600};
   }
   .text-action {
     font-size: 12px;
@@ -80832,6 +80831,7 @@ const UnitLinkGraph = ({
     header: "Placeholder",
     color_primary: utils.colors.purple_600,
     color_secondary: utils.colors.purple_50,
+    outline_color: utils.colors.white,
     percentage: 50,
     place_at_ani: 7,
     actions: [
@@ -80854,6 +80854,11 @@ const UnitLinkGraph = ({
   timeline_texts = {
     left: "Placeholder"
   },
+  timeline_text_color = {
+    left: utils.colors.blue_600,
+    right: utils.colors.blue_600
+  },
+  lineGraphAreaColor,
   ...rest
 }) => {
   const sliderActive = React.useMemo(() => {
@@ -80989,7 +80994,9 @@ const UnitLinkGraph = ({
             wrappedLabel,
             sublabel: item.sublabel,
             sublabel_x,
-            sublabel_y
+            sublabel_y,
+            bgColor: item.bgColor || void 0,
+            textColor: item.textColor || void 0
           };
         }
         return {
@@ -81021,7 +81028,8 @@ const UnitLinkGraph = ({
       const dynamic_pos_secondary_x = get_position_at_indicator - APPROXIMATE_BAR_STROKE_WIDTH - configurations.bars.width - configurations.area.indicators.margin;
       const dynamic_pos_main_x = get_position_at_indicator + APPROXIMATE_BAR_STROKE_WIDTH + configurations.area.indicators.strokeWidth + configurations.area.indicators.margin;
       const h = mainHeightGraph - configurations.bars.actionsGap - START_Y;
-      const calculate_filled_bar = floorToHalf(config.percentage / 100 * h);
+      const mainPercentage = (config?.secondary_percentage || 0) > 0 ? config.percentage - (config?.secondary_percentage || 0) : config.percentage;
+      const calculate_filled_bar = floorToHalf(mainPercentage / 100 * h);
       const x = floorToHalf(main ? dynamic_pos_main_x : dynamic_pos_secondary_x);
       const w = floorToHalf(configurations.bars.width);
       const outlined_y = START_Y + APPROXIMATE_BAR_STROKE_WIDTH + configurations.bars.actionsGap;
@@ -81046,7 +81054,9 @@ const UnitLinkGraph = ({
         filled_h: Math.max(filled_h, 0),
         colorPrimary: config.color_primary,
         colorSecondary: config.color_secondary,
+        outlineColor: config.outline_color || utils.colors.white,
         strokeWidth: configurations.bars.strokeWidth,
+        percentage: config.percentage,
         barActions: {
           header: {
             title: config.header,
@@ -81077,7 +81087,7 @@ const UnitLinkGraph = ({
         x1: floorToHalf(mainStart + configurations.area.outersPartsWidth),
         x2: floorToHalf(barMain.x - configurations.area.outersPartsWidth),
         y1: mainHeightGraph - configurations.area.strokeWidth,
-        y2: barMain.filled_y + 1 - configurations.area.additionalSpaceVisualize,
+        y2: (barMain.percentage === 100 ? barMain.outlined_y : barMain.filled_y) + 1 - configurations.area.additionalSpaceVisualize,
         strokeWidth: barMainConfiguration.percentage === 0 ? 0 : configurations.area.graphLineStrokeWidth
       };
       const part_3 = {
@@ -81085,8 +81095,8 @@ const UnitLinkGraph = ({
           barMain.x - configurations.area.outersPartsWidth - configurations.area.additionalSpaceVisualize
         ),
         x2: floorToHalf(barMain.x),
-        y1: barMain.filled_y + 1 - configurations.area.additionalSpaceVisualize,
-        y2: barMain.filled_y + 1 - configurations.area.additionalSpaceVisualize,
+        y1: (barMain.percentage === 100 ? barMain.outlined_y : barMain.filled_y) + 1 - configurations.area.additionalSpaceVisualize,
+        y2: (barMain.percentage === 100 ? barMain.outlined_y : barMain.filled_y) + 1 - configurations.area.additionalSpaceVisualize,
         strokeWidth: barMainConfiguration.percentage === 0 ? 0 : configurations.area.graphLineStrokeWidth
       };
       return {
@@ -81292,7 +81302,7 @@ const UnitLinkGraph = ({
               y1: graph.main.area.part_1.y1,
               y2: graph.main.area.part_1.y2,
               strokeWidth: graph.main.area.part_1.strokeWidth,
-              stroke: graph.main.bars.main.colorPrimary
+              stroke: lineGraphAreaColor || graph.main.bars.main.colorPrimary
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -81303,7 +81313,7 @@ const UnitLinkGraph = ({
               y1: graph.main.area.part_2.y1,
               y2: graph.main.area.part_2.y2,
               strokeWidth: graph.main.area.part_2.strokeWidth,
-              stroke: graph.main.bars.main.colorPrimary
+              stroke: lineGraphAreaColor || graph.main.bars.main.colorPrimary
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -81314,15 +81324,15 @@ const UnitLinkGraph = ({
               y1: graph.main.area.part_3.y1,
               y2: graph.main.area.part_3.y2,
               strokeWidth: graph.main.area.part_3.strokeWidth,
-              stroke: graph.main.bars.main.colorPrimary
+              stroke: lineGraphAreaColor || graph.main.bars.main.colorPrimary
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "polygon",
             {
               points: `
-            ${graph.main.area.part_2.x2},${graph.main.bars.main.filled_y + 1.5} 
-            ${graph.main.area.part_3.x2},${graph.main.bars.main.filled_y + 1.5}
+            ${graph.main.area.part_2.x2},${(graph.main.bars.main.percentage === 100 ? graph.main.bars.main.outlined_y : graph.main.bars.main.filled_y) + 1.5} 
+            ${graph.main.area.part_3.x2},${(graph.main.bars.main.percentage === 100 ? graph.main.bars.main.outlined_y : graph.main.bars.main.filled_y) + 1.5}
             ${graph.main.area.part_3.x2},${graph.mainHeightGraph} 
             ${graph.main.area.part_2.x1},${graph.mainHeightGraph}`,
               fill: graph.main.bars.main.colorSecondary
@@ -81382,6 +81392,7 @@ const UnitLinkGraph = ({
             className: "text-contribution",
             y: graph.timeline.text.left.y,
             x: graph.timeline.text.left.x,
+            fill: timeline_text_color.left,
             textAnchor: "end",
             children: timeline_texts.left
           }
@@ -81392,6 +81403,7 @@ const UnitLinkGraph = ({
             className: "text-contribution",
             y: graph.timeline.text.right.y,
             x: graph.timeline.text.right.x,
+            fill: timeline_text_color.right,
             textAnchor: "start",
             children: timeline_texts.right
           }
@@ -81476,7 +81488,7 @@ const RenderBar = ({
         y: bar.outlined_y,
         width: bar.w,
         height: bar.outlined_h,
-        fill: utils.colors.white,
+        fill: bar.outlineColor,
         stroke: bar.colorPrimary,
         strokeWidth: bar.strokeWidth
       }
@@ -81504,6 +81516,8 @@ const RenderBar = ({
     ),
     bar.barActions.actions.map((action, index) => {
       const isActive = activeAction === index;
+      const rectColor = isActive ? bar.colorPrimary : action.bgColor ? action.bgColor : bar.colorSecondary;
+      const textColor = isActive ? utils.colors.white : action.textColor ? action.textColor : bar.colorPrimary;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "g",
         {
@@ -81513,7 +81527,7 @@ const RenderBar = ({
             /* @__PURE__ */ jsxRuntime.jsx(
               "rect",
               {
-                fill: isActive ? bar.colorPrimary : bar.colorSecondary,
+                fill: rectColor,
                 rx: 4,
                 ry: 4,
                 height: action.actions_h,
@@ -81528,7 +81542,7 @@ const RenderBar = ({
                 className: "text-bar-actions-label",
                 x: action.label_x,
                 y: action.label_y,
-                fill: isActive ? utils.colors.white : bar.colorPrimary,
+                fill: textColor,
                 children: action.wrappedLabel?.map((line, lineIndex) => /* @__PURE__ */ jsxRuntime.jsx(
                   "tspan",
                   {
@@ -81543,7 +81557,7 @@ const RenderBar = ({
             action.sublabel && /* @__PURE__ */ jsxRuntime.jsx(
               "text",
               {
-                fill: isActive ? utils.colors.white : bar.colorPrimary,
+                fill: textColor,
                 className: "text-bar-actions-sublabel",
                 x: action.sublabel_x,
                 y: action.sublabel_y,

package/build/esm/components/UnitlinkGraph/UnitlinkGraph.js

@@ -32,7 +32,6 @@ const UnitLinkGraphStyled = styled.svg`
   .text-contribution {
     font-size: 12px;
     font-weight: 500;
-    fill: ${colors.blue_600};
   }
   .text-action {
     font-size: 12px;
@@ -61,6 +60,7 @@ const UnitLinkGraph = ({
     header: "Placeholder",
     color_primary: colors.purple_600,
     color_secondary: colors.purple_50,
+    outline_color: colors.white,
     percentage: 50,
     place_at_ani: 7,
     actions: [
@@ -83,6 +83,11 @@ const UnitLinkGraph = ({
   timeline_texts = {
     left: "Placeholder"
   },
+  timeline_text_color = {
+    left: colors.blue_600,
+    right: colors.blue_600
+  },
+  lineGraphAreaColor,
   ...rest
 }) => {
   const sliderActive = useMemo(() => {
@@ -218,7 +223,9 @@ const UnitLinkGraph = ({
             wrappedLabel,
             sublabel: item.sublabel,
             sublabel_x,
-            sublabel_y
+            sublabel_y,
+            bgColor: item.bgColor || void 0,
+            textColor: item.textColor || void 0
           };
         }
         return {
@@ -250,7 +257,8 @@ const UnitLinkGraph = ({
       const dynamic_pos_secondary_x = get_position_at_indicator - APPROXIMATE_BAR_STROKE_WIDTH - configurations.bars.width - configurations.area.indicators.margin;
       const dynamic_pos_main_x = get_position_at_indicator + APPROXIMATE_BAR_STROKE_WIDTH + configurations.area.indicators.strokeWidth + configurations.area.indicators.margin;
       const h = mainHeightGraph - configurations.bars.actionsGap - START_Y;
-      const calculate_filled_bar = floorToHalf(config.percentage / 100 * h);
+      const mainPercentage = (config?.secondary_percentage || 0) > 0 ? config.percentage - (config?.secondary_percentage || 0) : config.percentage;
+      const calculate_filled_bar = floorToHalf(mainPercentage / 100 * h);
       const x = floorToHalf(main ? dynamic_pos_main_x : dynamic_pos_secondary_x);
       const w = floorToHalf(configurations.bars.width);
       const outlined_y = START_Y + APPROXIMATE_BAR_STROKE_WIDTH + configurations.bars.actionsGap;
@@ -275,7 +283,9 @@ const UnitLinkGraph = ({
         filled_h: Math.max(filled_h, 0),
         colorPrimary: config.color_primary,
         colorSecondary: config.color_secondary,
+        outlineColor: config.outline_color || colors.white,
         strokeWidth: configurations.bars.strokeWidth,
+        percentage: config.percentage,
         barActions: {
           header: {
             title: config.header,
@@ -306,7 +316,7 @@ const UnitLinkGraph = ({
         x1: floorToHalf(mainStart + configurations.area.outersPartsWidth),
         x2: floorToHalf(barMain.x - configurations.area.outersPartsWidth),
         y1: mainHeightGraph - configurations.area.strokeWidth,
-        y2: barMain.filled_y + 1 - configurations.area.additionalSpaceVisualize,
+        y2: (barMain.percentage === 100 ? barMain.outlined_y : barMain.filled_y) + 1 - configurations.area.additionalSpaceVisualize,
         strokeWidth: barMainConfiguration.percentage === 0 ? 0 : configurations.area.graphLineStrokeWidth
       };
       const part_3 = {
@@ -314,8 +324,8 @@ const UnitLinkGraph = ({
           barMain.x - configurations.area.outersPartsWidth - configurations.area.additionalSpaceVisualize
         ),
         x2: floorToHalf(barMain.x),
-        y1: barMain.filled_y + 1 - configurations.area.additionalSpaceVisualize,
-        y2: barMain.filled_y + 1 - configurations.area.additionalSpaceVisualize,
+        y1: (barMain.percentage === 100 ? barMain.outlined_y : barMain.filled_y) + 1 - configurations.area.additionalSpaceVisualize,
+        y2: (barMain.percentage === 100 ? barMain.outlined_y : barMain.filled_y) + 1 - configurations.area.additionalSpaceVisualize,
         strokeWidth: barMainConfiguration.percentage === 0 ? 0 : configurations.area.graphLineStrokeWidth
       };
       return {
@@ -521,7 +531,7 @@ const UnitLinkGraph = ({
               y1: graph.main.area.part_1.y1,
               y2: graph.main.area.part_1.y2,
               strokeWidth: graph.main.area.part_1.strokeWidth,
-              stroke: graph.main.bars.main.colorPrimary
+              stroke: lineGraphAreaColor || graph.main.bars.main.colorPrimary
             }
           ),
           /* @__PURE__ */ jsx(
@@ -532,7 +542,7 @@ const UnitLinkGraph = ({
               y1: graph.main.area.part_2.y1,
               y2: graph.main.area.part_2.y2,
               strokeWidth: graph.main.area.part_2.strokeWidth,
-              stroke: graph.main.bars.main.colorPrimary
+              stroke: lineGraphAreaColor || graph.main.bars.main.colorPrimary
             }
           ),
           /* @__PURE__ */ jsx(
@@ -543,15 +553,15 @@ const UnitLinkGraph = ({
               y1: graph.main.area.part_3.y1,
               y2: graph.main.area.part_3.y2,
               strokeWidth: graph.main.area.part_3.strokeWidth,
-              stroke: graph.main.bars.main.colorPrimary
+              stroke: lineGraphAreaColor || graph.main.bars.main.colorPrimary
             }
           ),
           /* @__PURE__ */ jsx(
             "polygon",
             {
               points: `
-            ${graph.main.area.part_2.x2},${graph.main.bars.main.filled_y + 1.5} 
-            ${graph.main.area.part_3.x2},${graph.main.bars.main.filled_y + 1.5}
+            ${graph.main.area.part_2.x2},${(graph.main.bars.main.percentage === 100 ? graph.main.bars.main.outlined_y : graph.main.bars.main.filled_y) + 1.5} 
+            ${graph.main.area.part_3.x2},${(graph.main.bars.main.percentage === 100 ? graph.main.bars.main.outlined_y : graph.main.bars.main.filled_y) + 1.5}
             ${graph.main.area.part_3.x2},${graph.mainHeightGraph} 
             ${graph.main.area.part_2.x1},${graph.mainHeightGraph}`,
               fill: graph.main.bars.main.colorSecondary
@@ -611,6 +621,7 @@ const UnitLinkGraph = ({
             className: "text-contribution",
             y: graph.timeline.text.left.y,
             x: graph.timeline.text.left.x,
+            fill: timeline_text_color.left,
             textAnchor: "end",
             children: timeline_texts.left
           }
@@ -621,6 +632,7 @@ const UnitLinkGraph = ({
             className: "text-contribution",
             y: graph.timeline.text.right.y,
             x: graph.timeline.text.right.x,
+            fill: timeline_text_color.right,
             textAnchor: "start",
             children: timeline_texts.right
           }
@@ -705,7 +717,7 @@ const RenderBar = ({
         y: bar.outlined_y,
         width: bar.w,
         height: bar.outlined_h,
-        fill: colors.white,
+        fill: bar.outlineColor,
         stroke: bar.colorPrimary,
         strokeWidth: bar.strokeWidth
       }
@@ -733,6 +745,8 @@ const RenderBar = ({
     ),
     bar.barActions.actions.map((action, index) => {
       const isActive = activeAction === index;
+      const rectColor = isActive ? bar.colorPrimary : action.bgColor ? action.bgColor : bar.colorSecondary;
+      const textColor = isActive ? colors.white : action.textColor ? action.textColor : bar.colorPrimary;
       return /* @__PURE__ */ jsxs(
         "g",
         {
@@ -742,7 +756,7 @@ const RenderBar = ({
             /* @__PURE__ */ jsx(
               "rect",
               {
-                fill: isActive ? bar.colorPrimary : bar.colorSecondary,
+                fill: rectColor,
                 rx: 4,
                 ry: 4,
                 height: action.actions_h,
@@ -757,7 +771,7 @@ const RenderBar = ({
                 className: "text-bar-actions-label",
                 x: action.label_x,
                 y: action.label_y,
-                fill: isActive ? colors.white : bar.colorPrimary,
+                fill: textColor,
                 children: action.wrappedLabel?.map((line, lineIndex) => /* @__PURE__ */ jsx(
                   "tspan",
                   {
@@ -772,7 +786,7 @@ const RenderBar = ({
             action.sublabel && /* @__PURE__ */ jsx(
               "text",
               {
-                fill: isActive ? colors.white : bar.colorPrimary,
+                fill: textColor,
                 className: "text-bar-actions-sublabel",
                 x: action.sublabel_x,
                 y: action.sublabel_y,

package/build/esm/index.js

@@ -80780,7 +80780,6 @@ const UnitLinkGraphStyled = styled.svg`
   .text-contribution {
     font-size: 12px;
     font-weight: 500;
-    fill: ${colors.blue_600};
   }
   .text-action {
     font-size: 12px;
@@ -80809,6 +80808,7 @@ const UnitLinkGraph = ({
     header: "Placeholder",
     color_primary: colors.purple_600,
     color_secondary: colors.purple_50,
+    outline_color: colors.white,
     percentage: 50,
     place_at_ani: 7,
     actions: [
@@ -80831,6 +80831,11 @@ const UnitLinkGraph = ({
   timeline_texts = {
     left: "Placeholder"
   },
+  timeline_text_color = {
+    left: colors.blue_600,
+    right: colors.blue_600
+  },
+  lineGraphAreaColor,
   ...rest
 }) => {
   const sliderActive = useMemo(() => {
@@ -80966,7 +80971,9 @@ const UnitLinkGraph = ({
             wrappedLabel,
             sublabel: item.sublabel,
             sublabel_x,
-            sublabel_y
+            sublabel_y,
+            bgColor: item.bgColor || void 0,
+            textColor: item.textColor || void 0
           };
         }
         return {
@@ -80998,7 +81005,8 @@ const UnitLinkGraph = ({
       const dynamic_pos_secondary_x = get_position_at_indicator - APPROXIMATE_BAR_STROKE_WIDTH - configurations.bars.width - configurations.area.indicators.margin;
       const dynamic_pos_main_x = get_position_at_indicator + APPROXIMATE_BAR_STROKE_WIDTH + configurations.area.indicators.strokeWidth + configurations.area.indicators.margin;
       const h = mainHeightGraph - configurations.bars.actionsGap - START_Y;
-      const calculate_filled_bar = floorToHalf(config.percentage / 100 * h);
+      const mainPercentage = (config?.secondary_percentage || 0) > 0 ? config.percentage - (config?.secondary_percentage || 0) : config.percentage;
+      const calculate_filled_bar = floorToHalf(mainPercentage / 100 * h);
       const x = floorToHalf(main ? dynamic_pos_main_x : dynamic_pos_secondary_x);
       const w = floorToHalf(configurations.bars.width);
       const outlined_y = START_Y + APPROXIMATE_BAR_STROKE_WIDTH + configurations.bars.actionsGap;
@@ -81023,7 +81031,9 @@ const UnitLinkGraph = ({
         filled_h: Math.max(filled_h, 0),
         colorPrimary: config.color_primary,
         colorSecondary: config.color_secondary,
+        outlineColor: config.outline_color || colors.white,
         strokeWidth: configurations.bars.strokeWidth,
+        percentage: config.percentage,
         barActions: {
           header: {
             title: config.header,
@@ -81054,7 +81064,7 @@ const UnitLinkGraph = ({
         x1: floorToHalf(mainStart + configurations.area.outersPartsWidth),
         x2: floorToHalf(barMain.x - configurations.area.outersPartsWidth),
         y1: mainHeightGraph - configurations.area.strokeWidth,
-        y2: barMain.filled_y + 1 - configurations.area.additionalSpaceVisualize,
+        y2: (barMain.percentage === 100 ? barMain.outlined_y : barMain.filled_y) + 1 - configurations.area.additionalSpaceVisualize,
         strokeWidth: barMainConfiguration.percentage === 0 ? 0 : configurations.area.graphLineStrokeWidth
       };
       const part_3 = {
@@ -81062,8 +81072,8 @@ const UnitLinkGraph = ({
           barMain.x - configurations.area.outersPartsWidth - configurations.area.additionalSpaceVisualize
         ),
         x2: floorToHalf(barMain.x),
-        y1: barMain.filled_y + 1 - configurations.area.additionalSpaceVisualize,
-        y2: barMain.filled_y + 1 - configurations.area.additionalSpaceVisualize,
+        y1: (barMain.percentage === 100 ? barMain.outlined_y : barMain.filled_y) + 1 - configurations.area.additionalSpaceVisualize,
+        y2: (barMain.percentage === 100 ? barMain.outlined_y : barMain.filled_y) + 1 - configurations.area.additionalSpaceVisualize,
         strokeWidth: barMainConfiguration.percentage === 0 ? 0 : configurations.area.graphLineStrokeWidth
       };
       return {
@@ -81269,7 +81279,7 @@ const UnitLinkGraph = ({
               y1: graph.main.area.part_1.y1,
               y2: graph.main.area.part_1.y2,
               strokeWidth: graph.main.area.part_1.strokeWidth,
-              stroke: graph.main.bars.main.colorPrimary
+              stroke: lineGraphAreaColor || graph.main.bars.main.colorPrimary
             }
           ),
           /* @__PURE__ */ jsx(
@@ -81280,7 +81290,7 @@ const UnitLinkGraph = ({
               y1: graph.main.area.part_2.y1,
               y2: graph.main.area.part_2.y2,
               strokeWidth: graph.main.area.part_2.strokeWidth,
-              stroke: graph.main.bars.main.colorPrimary
+              stroke: lineGraphAreaColor || graph.main.bars.main.colorPrimary
             }
           ),
           /* @__PURE__ */ jsx(
@@ -81291,15 +81301,15 @@ const UnitLinkGraph = ({
               y1: graph.main.area.part_3.y1,
               y2: graph.main.area.part_3.y2,
               strokeWidth: graph.main.area.part_3.strokeWidth,
-              stroke: graph.main.bars.main.colorPrimary
+              stroke: lineGraphAreaColor || graph.main.bars.main.colorPrimary
             }
           ),
           /* @__PURE__ */ jsx(
             "polygon",
             {
               points: `
-            ${graph.main.area.part_2.x2},${graph.main.bars.main.filled_y + 1.5} 
-            ${graph.main.area.part_3.x2},${graph.main.bars.main.filled_y + 1.5}
+            ${graph.main.area.part_2.x2},${(graph.main.bars.main.percentage === 100 ? graph.main.bars.main.outlined_y : graph.main.bars.main.filled_y) + 1.5} 
+            ${graph.main.area.part_3.x2},${(graph.main.bars.main.percentage === 100 ? graph.main.bars.main.outlined_y : graph.main.bars.main.filled_y) + 1.5}
             ${graph.main.area.part_3.x2},${graph.mainHeightGraph} 
             ${graph.main.area.part_2.x1},${graph.mainHeightGraph}`,
               fill: graph.main.bars.main.colorSecondary
@@ -81359,6 +81369,7 @@ const UnitLinkGraph = ({
             className: "text-contribution",
             y: graph.timeline.text.left.y,
             x: graph.timeline.text.left.x,
+            fill: timeline_text_color.left,
             textAnchor: "end",
             children: timeline_texts.left
           }
@@ -81369,6 +81380,7 @@ const UnitLinkGraph = ({
             className: "text-contribution",
             y: graph.timeline.text.right.y,
             x: graph.timeline.text.right.x,
+            fill: timeline_text_color.right,
             textAnchor: "start",
             children: timeline_texts.right
           }
@@ -81453,7 +81465,7 @@ const RenderBar = ({
         y: bar.outlined_y,
         width: bar.w,
         height: bar.outlined_h,
-        fill: colors.white,
+        fill: bar.outlineColor,
         stroke: bar.colorPrimary,
         strokeWidth: bar.strokeWidth
       }
@@ -81481,6 +81493,8 @@ const RenderBar = ({
     ),
     bar.barActions.actions.map((action, index) => {
       const isActive = activeAction === index;
+      const rectColor = isActive ? bar.colorPrimary : action.bgColor ? action.bgColor : bar.colorSecondary;
+      const textColor = isActive ? colors.white : action.textColor ? action.textColor : bar.colorPrimary;
       return /* @__PURE__ */ jsxs(
         "g",
         {
@@ -81490,7 +81504,7 @@ const RenderBar = ({
             /* @__PURE__ */ jsx(
               "rect",
               {
-                fill: isActive ? bar.colorPrimary : bar.colorSecondary,
+                fill: rectColor,
                 rx: 4,
                 ry: 4,
                 height: action.actions_h,
@@ -81505,7 +81519,7 @@ const RenderBar = ({
                 className: "text-bar-actions-label",
                 x: action.label_x,
                 y: action.label_y,
-                fill: isActive ? colors.white : bar.colorPrimary,
+                fill: textColor,
                 children: action.wrappedLabel?.map((line, lineIndex) => /* @__PURE__ */ jsx(
                   "tspan",
                   {
@@ -81520,7 +81534,7 @@ const RenderBar = ({
             action.sublabel && /* @__PURE__ */ jsx(
               "text",
               {
-                fill: isActive ? colors.white : bar.colorPrimary,
+                fill: textColor,
                 className: "text-bar-actions-sublabel",
                 x: action.sublabel_x,
                 y: action.sublabel_y,

package/build/types/components/UnitlinkGraph/UnitlinkGraph.d.ts

@@ -4,10 +4,14 @@ interface BarConfiguration {
     header: string;
     color_primary: string;
     color_secondary: string;
+    outline_color?: string;
     percentage: number;
+    secondary_percentage?: number;
     actions: Array<{
         label: string;
         sublabel?: string;
+        bgColor?: string;
+        textColor?: string;
     }>;
 }
 interface UnitLinkGraphProps extends HTMLAttributes<SVGSVGElement> {
@@ -27,7 +31,12 @@ interface UnitLinkGraphProps extends HTMLAttributes<SVGSVGElement> {
         left: string;
         right?: string;
     };
+    timeline_text_color?: {
+        left: string;
+        right: string;
+    };
     initialSliderValue?: number;
+    lineGraphAreaColor?: string;
 }
 declare const UnitLinkGraph: React.FC<UnitLinkGraphProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rbro-tat-uds",
-  "version": "2.2.21",
+  "version": "2.2.22",
   "type": "module",
   "main": "build/cjs/index.cjs",
   "module": "build/esm/index.js",