mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-08-16 21:25:58 +08:00
fix(ui): improve chart text spacing and prevent unnecessary truncation (#16894)
This commit is contained in:
parent
7f70cadacb
commit
7f8bfb6e4a
@ -54,7 +54,7 @@ const ICON_MAP = {
|
||||
notion: <AppIcon innerIcon={NotionSvg} className='!border-[0.5px] !border-indigo-100 !bg-white' />,
|
||||
}
|
||||
|
||||
export default function AppBasic({ icon, icon_background, name, isExternal, type, hoverTip, textStyle, mode = 'expand', iconType = 'app' }: IAppBasicProps) {
|
||||
export default function AppBasic({ icon, icon_background, name, isExternal, type, hoverTip, textStyle, isExtraInLine, mode = 'expand', iconType = 'app' }: IAppBasicProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
@ -70,9 +70,9 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
|
||||
</div>
|
||||
|
||||
}
|
||||
{mode === 'expand' && <div className="group">
|
||||
{mode === 'expand' && <div className="group w-full">
|
||||
<div className={`system-md-semibold flex flex-row items-center text-text-secondary group-hover:text-text-primary ${textStyle?.main ?? ''}`}>
|
||||
<div className="max-w-[180px] truncate">
|
||||
<div className="min-w-0 overflow-hidden text-ellipsis break-normal">
|
||||
{name}
|
||||
</div>
|
||||
{hoverTip
|
||||
@ -88,7 +88,11 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
<div className='system-2xs-medium-uppercase text-text-tertiary'>{isExternal ? t('dataset.externalTag') : ''}</div>
|
||||
{isExtraInLine ? (
|
||||
<div className="system-2xs-medium-uppercase flex text-text-tertiary">{type}</div>
|
||||
) : (
|
||||
<div className='system-2xs-medium-uppercase text-text-tertiary'>{isExternal ? t('dataset.externalTag') : type}</div>
|
||||
)}
|
||||
</div>}
|
||||
</div>
|
||||
)
|
||||
|
@ -237,7 +237,7 @@ const Chart: React.FC<IChartProps> = ({
|
||||
<div className='mb-4 flex-1'>
|
||||
<Basic
|
||||
isExtraInLine={CHART_TYPE_CONFIG[chartType].showTokens}
|
||||
name={chartType !== 'costs' ? (sumData.toLocaleString() + unit) : `${sumData < 1000 ? sumData : (`${formatNumber(Math.round(sumData / 1000))}k`)}`}
|
||||
name={chartType !== 'costs' ? (`${sumData.toLocaleString()} ${unit}`) : `${sumData < 1000 ? sumData : (`${formatNumber(Math.round(sumData / 1000))}k`)}`}
|
||||
type={!CHART_TYPE_CONFIG[chartType].showTokens
|
||||
? ''
|
||||
: <span>{t('appOverview.analysis.tokenUsage.consumed')} Tokens<span className='text-sm'>
|
||||
@ -350,6 +350,7 @@ export const TokenPerSecond: FC<IBizChartProps> = ({ id, period }) => {
|
||||
isAvg
|
||||
unit={t('appOverview.analysis.tokenPS') as string}
|
||||
{...(noDataFlag && { yMax: 100 })}
|
||||
className="min-w-0"
|
||||
/>
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user