UI: Updated Tier label in data insight chart (#9417)

openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx

@@ -37,6 +37,7 @@ import {
   BAR_CHART_MARGIN,
   DI_STRUCTURE,
   TIER_BAR_COLOR_MAP,
+  TIER_DATA,
 } from '../../constants/DataInsight.constants';
 import { DataReportIndex } from '../../generated/dataInsight/dataInsightChart';
 import {
@@ -140,11 +141,11 @@ const TierInsight: FC<Props> = ({ chartFilter, selectedDays }) => {
                 <YAxis
                   tickFormatter={(value) => axisTickFormatter(value, '%')}
                 />
-                <Tooltip content={<CustomTooltip isPercentage />} />
+                <Tooltip content={<CustomTooltip isPercentage isTier />} />
                 <Legend
                   align="left"
                   content={(props) =>
-                    renderLegend(props as LegendProps, activeKeys)
+                    renderLegend(props as LegendProps, activeKeys, true)
                   }
                   layout="horizontal"
                   verticalAlign="top"
@@ -202,7 +203,7 @@ const TierInsight: FC<Props> = ({ chartFilter, selectedDays }) => {
                       progress={latestData[tiers]}
                       showLabel={false}
                       startValue={Number(latestData[tiers]).toFixed(2)}
-                      successValue={tiers}
+                      successValue={TIER_DATA[tiers as keyof typeof TIER_DATA]}
                     />
                   </Col>
                 );

openmetadata-ui/src/main/resources/ui/src/constants/DataInsight.constants.ts

@@ -103,6 +103,15 @@ export const TIER_FILTER = {
   [i18n.t('label.tier-number', { tier: 5 })]: 'Tier.Tier5',
 };
 
+export const TIER_DATA = {
+  'Tier.Tier1': i18n.t('label.tier-number', { tier: 1 }),
+  'Tier.Tier2': i18n.t('label.tier-number', { tier: 2 }),
+  'Tier.Tier3': i18n.t('label.tier-number', { tier: 3 }),
+  'Tier.Tier4': i18n.t('label.tier-number', { tier: 4 }),
+  'Tier.Tier5': i18n.t('label.tier-number', { tier: 5 }),
+  NoTier: i18n.t('label.no-tier'),
+};
+
 export const INITIAL_CHART_FILTER: ChartFilter = {
   startTs: getPastDaysDateTimeMillis(DEFAULT_DAYS),
   endTs: getCurrentDateTimeMillis(),

openmetadata-ui/src/main/resources/ui/src/interface/data-insight.interface.ts

@@ -34,6 +34,7 @@ export interface ChartFilter {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface DataInsightChartTooltipProps extends TooltipProps<any, any> {
   isPercentage?: boolean;
+  isTier?: boolean;
   kpiTooltipRecord?: Record<string, KpiTargetType>;
 }
 

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -597,7 +597,8 @@
     "admin-plural": "Admins",
     "owner-plural": "Owners",
     "follower-plural": "Followers",
-    "email-plural": "Emails"
+    "email-plural": "Emails",
+    "no-tier": "No Tier"
   },
   "message": {
     "service-email-required": "Service account Email is required",

openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx

@@ -38,6 +38,7 @@ import {
 import {
   ENTITIES_SUMMARY_LIST,
   KPI_DATE_PICKER_FORMAT,
+  TIER_DATA,
   WEB_SUMMARY_LIST,
 } from '../constants/DataInsight.constants';
 import { KpiTargetType } from '../generated/api/dataInsight/kpi/createKpiRequest';
@@ -67,7 +68,8 @@ const checkIsPercentageGraph = (dataInsightChartType: DataInsightChartType) =>
 
 export const renderLegend = (
   legendData: LegendProps,
-  activeKeys = [] as string[]
+  activeKeys = [] as string[],
+  isTier = false
 ) => {
   const { payload = [] } = legendData;
 
@@ -101,7 +103,9 @@ export const renderLegend = (
               />
             </Surface>
             <span style={{ color: isActive ? 'inherit' : GRAYED_OUT_COLOR }}>
-              {entry.value}
+              {isTier
+                ? TIER_DATA[entry.value as keyof typeof TIER_DATA]
+                : entry.value}
             </span>
           </li>
         );
@@ -146,7 +150,13 @@ const getEntryFormattedValue = (
 };
 
 export const CustomTooltip = (props: DataInsightChartTooltipProps) => {
-  const { active, payload = [], isPercentage, kpiTooltipRecord } = props;
+  const {
+    active,
+    payload = [],
+    isPercentage,
+    kpiTooltipRecord,
+    isTier,
+  } = props;
 
   if (active && payload && payload.length) {
     const timestamp = getDateByTimeStamp(
@@ -166,7 +176,9 @@ export const CustomTooltip = (props: DataInsightChartTooltipProps) => {
               <Surface className="mr-2" height={12} version="1.1" width={12}>
                 <rect fill={entry.color} height="14" rx="2" width="14" />
               </Surface>
-              {entry.dataKey}
+              {isTier
+                ? TIER_DATA[entry.dataKey as keyof typeof TIER_DATA]
+                : entry.dataKey}
             </span>
             <span className="font-medium">
               {getEntryFormattedValue(