yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-28 10:56:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI : Add Feedback text for kpi (#8871)

Browse Source 
* UI : Add Feedback text for kpi

* Add util method for kpi result feedback.

* Address comment
This commit is contained in:
Sachin Chaurasiya 2022-11-18 17:58:16 +05:30 committed by GitHub
parent eb55a2a20e
commit e3ea6d0699
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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" />

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

@ -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>
{pluralize(
getNumberOfDaysForTimestamp(resultData.endDate),
'day'
)}{' '}
left
<Typography.Text className="data-insight-label-text">
{getKpiResultFeedback(daysLeft, Boolean(isTargetMet))}
</Typography.Text>
</Space>
);

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

@ -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",

14
openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx
View File

@ -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') });
}
};