UI : Add Feedback text for kpi (#8871)

* UI : Add Feedback text for kpi

* Add util method for kpi result feedback.

* Address comment

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

@@ -205,12 +205,12 @@ const KPIChart: FC<Props> = ({ chartFilter }) => {
       {kpiList.length ? (
         <Row>
           {!isUndefined(kpiLatestResults) && !isEmpty(kpiLatestResults) && (
-            <Col span={6}>
+            <Col span={5}>
               <KPILatestResults kpiLatestResultsRecord={kpiLatestResults} />
             </Col>
           )}
 
-          <Col span={18}>
+          <Col span={19}>
             <ResponsiveContainer debounce={1} minHeight={400}>
               <LineChart data={graphData} margin={BAR_CHART_MARGIN}>
                 <CartesianGrid strokeDasharray="3 3" />

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

@@ -4,7 +4,7 @@ import { toNumber, uniqueId } from 'lodash';
 import React, { FC, useMemo } from 'react';
 import { KpiTargetType } from '../../generated/api/dataInsight/kpi/createKpiRequest';
 import { UIKpiResult } from '../../interface/data-insight.interface';
-import { pluralize } from '../../utils/CommonUtils';
+import { getKpiResultFeedback } from '../../utils/DataInsightUtils';
 import { getNumberOfDaysForTimestamp } from '../../utils/TimeUtils';
 
 interface Props {
@@ -46,6 +46,10 @@ const KPILatestResults: FC<Props> = ({ kpiLatestResultsRecord }) => {
         // value for number metric
         const calculatedNumberValue = (targetValue / targetMetValue) * 100;
 
+        const daysLeft = getNumberOfDaysForTimestamp(resultData.endDate);
+
+        const isTargetMet = targetResult.targetMet;
+
         return (
           <Space className="w-full" direction="vertical" key={uniqueId()}>
             <Typography.Text className="data-insight-label-text">
@@ -63,14 +67,10 @@ const KPILatestResults: FC<Props> = ({ kpiLatestResultsRecord }) => {
               percent={
                 isPercentage ? calculatedPercentage : calculatedNumberValue
               }
-              showInfo={false}
+              showInfo={isTargetMet}
             />
-            <Typography.Text>
+            <Typography.Text className="data-insight-label-text">
-              {pluralize(
+              {getKpiResultFeedback(daysLeft, Boolean(isTargetMet))}
-                getNumberOfDaysForTimestamp(resultData.endDate),
-                'day'
-              )}{' '}
-              left
             </Typography.Text>
           </Space>
         );

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

@@ -282,6 +282,10 @@
     "insights": "Insights",
     "govern": "Govern",
     "usage": "Usage",
+    "kpi-target-achieved": "Congratulations on achieving your goals!",
+    "kpi-target-achieved-before-time": "Awesome! You’ve reached your target well before time.",
+    "kpi-target-overdue": "Never mind. It’s time to restructure your goals and progress faster.",
+    "day-left": "{{day}} left",
     "edit-connection": "Edit Connection",
     "test-connection": "Test Connection",
     "database-name": "Database Name",

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

@@ -13,6 +13,7 @@
 
 import { Card, Typography } from 'antd';
 import { RangePickerProps } from 'antd/lib/date-picker';
+import { t } from 'i18next';
 import {
   groupBy,
   isEmpty,
@@ -44,6 +45,7 @@ import {
   ChartValue,
   DataInsightChartTooltipProps,
 } from '../interface/data-insight.interface';
+import { pluralize } from './CommonUtils';
 import { getFormattedDateFromMilliSeconds } from './TimeUtils';
 
 const checkIsPercentageGraph = (dataInsightChartType: DataInsightChartType) =>
@@ -505,3 +507,15 @@ export const getKpiTargetValueByMetricType = (
 
   return metricValue;
 };
+
+export const getKpiResultFeedback = (day: number, isTargetMet: boolean) => {
+  if (day > 0 && isTargetMet) {
+    return t('label.kpi-target-achieved-before-time');
+  } else if (day <= 0 && !isTargetMet) {
+    return t('label.kpi-target-overdue');
+  } else if (isTargetMet) {
+    return t('label.kpi-target-achieved');
+  } else {
+    return t('label.day-left', { day: pluralize(day, 'day') });
+  }
+};