LPD-1195 Creating Legend-text-color class and assigning this in recha…

…rt legend
liferay · May 20, 2024 · e2c0fa8 · e2c0fa8
1 parent bcd7627
commit e2c0fa8
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/css/_chart_legend.scss b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/css/_chart_legend.scss
@@ -102,3 +102,7 @@ $circleSize: 8px;
 		}
 	}
 }
+
+.legend-text-color{
+	color: $mainLighten28;
+}
diff --git a/...-faro/osb-faro-web/src/main/js/individual/dashboard/components/ActiveIndividualsChart.tsx b/...-faro/osb-faro-web/src/main/js/individual/dashboard/components/ActiveIndividualsChart.tsx
@@ -211,6 +211,9 @@ const ActiveIndividualsChart: React.FC<IActiveIndividualsChartProps> = ({
 
 					<Legend
 						align='right'
+						formatter={dataKey => (
+							<span className='legend-text-color'>{dataKey}</span>
+						)}
 						iconSize={8}
 						onMouseEnter={({dataKey}) =>
 							setLegendHoverItem(dataKey)

diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/segment/components/Growth.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/segment/components/Growth.tsx
@@ -401,7 +401,7 @@ export const SegmentGrowthChart: React.FC<ISegmentGrowthChartProps> = ({
 					<Legend
 						align='left'
 						formatter={(value, {count}) => (
-							<span>
+							<span className='legend-text-color'>
 								{`${value}:`}
 
 								<b className='ml-1'>{count}</b>

diff --git a/.../apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/metric-card/MetricChart.tsx b/.../apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/metric-card/MetricChart.tsx
@@ -216,9 +216,12 @@ export const MetricChart: React.FC<IMetricChartProps> = ({
 
 								return (
 									<>
-										{`${label}:`}
-
-										<b className='ml-1'>{value}</b>
+										<span className='legend-text-color'>
+											{label}
+											<b className='ml-1'>
+												{value}
+											</b>
+										</span>
 									</>
 								);
 							}