chore: cluster map

Author: shivani170

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.3.0-beta-11",
+    "version": "1.3.0-beta-12",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -39,18 +39,18 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
 
     const renderValue = (value: string | number, label: string) => (
         <span className={countClassName} data-testid={`segmented-bar-chart-${label}-value`}>
-            {value}
+            {value}/{total}
         </span>
     )
 
     const renderContent = (entity: Entity) => {
-        if (entity.proportionalValue) {
+        if (isProportional) {
             if (entity.value === 0) {
                 return null
             }
             return (
                 <>
-                    {renderValue(entity.proportionalValue, entity.label)}
+                    {renderValue(entity.value, entity.label)}
                     <div className="flex left dc__gap-6">
                         <span style={{ backgroundColor: entity.color }} className="h-12 dc__border-radius-2 w-4" />
                         {renderLabel(entity.label)}
@@ -71,9 +71,7 @@ const SegmentedBarChart: React.FC<SegmentedBarChartProps> = ({
         <div className={`flexbox-col w-100 dc__gap-12 ${rootClassName}`}>
             <div className={`flexbox ${isProportional ? 'dc__gap-24' : 'dc__gap-16'}`}>
                 {entities?.map((entity) => (
-                    <div
-                        className={`${entity.proportionalValue ? 'flexbox-col' : 'flexbox  dc__gap-4 dc__align-items-center'}`}
-                    >
+                    <div className={`${isProportional ? 'flexbox-col' : 'flexbox  dc__gap-4 dc__align-items-center'}`}>
                         {renderContent(entity)}
                     </div>
                 ))}

src/Common/SegmentedBarChart/SegmentedBarChart.tsx

@@ -18,5 +18,4 @@ export const FALLBACK_ENTITY = {
     color: '#B1B7BC',
     label: '-',
     value: 0,
-    proportionalValue: '0/1',
 }

src/Common/SegmentedBarChart/constants.ts

@@ -18,7 +18,6 @@ export type Entity = {
     color: string
     label: string
     value: number
-    proportionalValue?: string
 }
 
 export interface SegmentedBarChartProps {