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

chore(ui): improve data insight chart and tooltip rendering (#19143)

Browse Source
This commit is contained in:
Chirag Madlani 2024-12-19 18:58:06 +05:30 committed by GitHub
parent 6fab88a3d1
commit 2b6cdea802
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
openmetadata-ui/src/main/resources/ui/src/components/DataInsight/TotalEntityInsightSummary.component.tsx
View File

@ -13,7 +13,7 @@
import { Button, Col, Row } from 'antd'; import { Button, Col, Row } from 'antd';
import { Gutter } from 'antd/lib/grid/row'; import { Gutter } from 'antd/lib/grid/row';
import classNames from 'classnames'; import classNames from 'classnames';
import { includes, toLower } from 'lodash'; import { includes, startCase, toLower } from 'lodash';
import React, { useMemo, useState } from 'react'; import React, { useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { updateActiveChartFilter } from '../../utils/ChartUtils'; import { updateActiveChartFilter } from '../../utils/ChartUtils';
@ -114,7 +114,7 @@ const TotalEntityInsightSummary = ({
onMouseEnter={() => handleLegendMouseEnter(entity)} onMouseEnter={() => handleLegendMouseEnter(entity)}
onMouseLeave={handleLegendMouseLeave}> onMouseLeave={handleLegendMouseLeave}>
<EntitySummaryProgressBar <EntitySummaryProgressBar
entity={entity} entity={startCase(entity)}
isActive={ isActive={
activeKeys?.length ? activeKeys.includes(entity) : true activeKeys?.length ? activeKeys.includes(entity) : true
} }

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

@ -44,6 +44,7 @@ export interface DataInsightChartTooltipProps extends TooltipProps<any, any> {
dateTimeFormatter?: (date?: number) => string; dateTimeFormatter?: (date?: number) => string;
valueFormatter?: (value: number | string, key?: string) => string | number; valueFormatter?: (value: number | string, key?: string) => string | number;
timeStampKey?: string; timeStampKey?: string;
transformLabel?: boolean;
} }
export interface UIKpiResult extends KpiResult { export interface UIKpiResult extends KpiResult {

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

@ -149,6 +149,7 @@ export const CustomTooltip = (props: DataInsightChartTooltipProps) => {
dateTimeFormatter = formatDate, dateTimeFormatter = formatDate,
isPercentage, isPercentage,
timeStampKey = 'timestampValue', timeStampKey = 'timestampValue',
transformLabel = true,
} = props; } = props;
if (active && payload && payload.length) { if (active && payload && payload.length) {
@ -172,7 +173,9 @@ export const CustomTooltip = (props: DataInsightChartTooltipProps) => {
<Surface className="mr-2" height={12} version="1.1" width={12}> <Surface className="mr-2" height={12} version="1.1" width={12}>
<rect fill={entry.color} height="14" rx="2" width="14" /> <rect fill={entry.color} height="14" rx="2" width="14" />
</Surface> </Surface>
{startCase(entry.name ?? (entry.dataKey as string))} {transformLabel
? startCase(entry.name ?? (entry.dataKey as string))
: entry.name ?? (entry.dataKey as string)}
</span> </span>
<span className="font-medium"> <span className="font-medium">
{valueFormatter {valueFormatter