estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: resolve text clipping issues in overview chart components (#23907)

Browse Source
This commit is contained in:
lyzno1
2025-08-14 10:16:20 +08:00
committed by GitHub
parent d4756ba659
commit caf50ea01e
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/app/components/app/overview/app-chart.tsx
View File

@@ -123,7 +123,7 @@ const Chart: React.FC<IChartProps> = ({
dimensions: ['date', yField], dimensions: ['date', yField],
source: statistics, source: statistics,
}, },
grid: { top: 8, right: 36, bottom: 0, left: 0, containLabel: true }, grid: { top: 8, right: 36, bottom: 10, left: 25, containLabel: true },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
position: 'top', position: 'top',
@@ -165,7 +165,7 @@ const Chart: React.FC<IChartProps> = ({
lineStyle: { lineStyle: {
color: COMMON_COLOR_MAP.splitLineDark, color: COMMON_COLOR_MAP.splitLineDark,
}, },
interval(index, value) { interval(_index, value) {
return !!value return !!value
}, },
}, },
@@ -268,7 +268,7 @@ export const MessagesChart: FC<IBizChartProps> = ({ id, period }) => {
const noDataFlag = !response.data || response.data.length === 0 const noDataFlag = !response.data || response.data.length === 0
return <Chart return <Chart
basicInfo={{ title: t('appOverview.analysis.totalMessages.title'), explanation: t('appOverview.analysis.totalMessages.explanation'), timePeriod: period.name }} basicInfo={{ title: t('appOverview.analysis.totalMessages.title'), explanation: t('appOverview.analysis.totalMessages.explanation'), timePeriod: period.name }}
chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query ?? defaultPeriod) }} chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query ?? defaultPeriod) } as any}
chartType='messages' chartType='messages'
{...(noDataFlag && { yMax: 500 })} {...(noDataFlag && { yMax: 500 })}
/> />
@@ -282,7 +282,7 @@ export const ConversationsChart: FC<IBizChartProps> = ({ id, period }) => {
const noDataFlag = !response.data || response.data.length === 0 const noDataFlag = !response.data || response.data.length === 0
return <Chart return <Chart
basicInfo={{ title: t('appOverview.analysis.totalConversations.title'), explanation: t('appOverview.analysis.totalConversations.explanation'), timePeriod: period.name }} basicInfo={{ title: t('appOverview.analysis.totalConversations.title'), explanation: t('appOverview.analysis.totalConversations.explanation'), timePeriod: period.name }}
chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query ?? defaultPeriod) }} chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query ?? defaultPeriod) } as any}
chartType='conversations' chartType='conversations'
{...(noDataFlag && { yMax: 500 })} {...(noDataFlag && { yMax: 500 })}
/> />
@@ -297,7 +297,7 @@ export const EndUsersChart: FC<IBizChartProps> = ({ id, period }) => {
const noDataFlag = !response.data || response.data.length === 0 const noDataFlag = !response.data || response.data.length === 0
return <Chart return <Chart
basicInfo={{ title: t('appOverview.analysis.activeUsers.title'), explanation: t('appOverview.analysis.activeUsers.explanation'), timePeriod: period.name }} basicInfo={{ title: t('appOverview.analysis.activeUsers.title'), explanation: t('appOverview.analysis.activeUsers.explanation'), timePeriod: period.name }}
chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query ?? defaultPeriod) }} chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query ?? defaultPeriod) } as any}
chartType='endUsers' chartType='endUsers'
{...(noDataFlag && { yMax: 500 })} {...(noDataFlag && { yMax: 500 })}
/> />
@@ -380,7 +380,7 @@ export const CostChart: FC<IBizChartProps> = ({ id, period }) => {
const noDataFlag = !response.data || response.data.length === 0 const noDataFlag = !response.data || response.data.length === 0
return <Chart return <Chart
basicInfo={{ title: t('appOverview.analysis.tokenUsage.title'), explanation: t('appOverview.analysis.tokenUsage.explanation'), timePeriod: period.name }} basicInfo={{ title: t('appOverview.analysis.tokenUsage.title'), explanation: t('appOverview.analysis.tokenUsage.explanation'), timePeriod: period.name }}
chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query ?? defaultPeriod) }} chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query ?? defaultPeriod) } as any}
chartType='costs' chartType='costs'
{...(noDataFlag && { yMax: 100 })} {...(noDataFlag && { yMax: 100 })}
/> />
@@ -394,7 +394,7 @@ export const WorkflowMessagesChart: FC<IBizChartProps> = ({ id, period }) => {
const noDataFlag = !response.data || response.data.length === 0 const noDataFlag = !response.data || response.data.length === 0
return <Chart return <Chart
basicInfo={{ title: t('appOverview.analysis.totalMessages.title'), explanation: t('appOverview.analysis.totalMessages.explanation'), timePeriod: period.name }} basicInfo={{ title: t('appOverview.analysis.totalMessages.title'), explanation: t('appOverview.analysis.totalMessages.explanation'), timePeriod: period.name }}
chartData={!noDataFlag ? response : { data: getDefaultChartData({ ...(period.query ?? defaultPeriod), key: 'runs' }) }} chartData={!noDataFlag ? response : { data: getDefaultChartData({ ...(period.query ?? defaultPeriod), key: 'runs' }) } as any}
chartType='conversations' chartType='conversations'
valueKey='runs' valueKey='runs'
{...(noDataFlag && { yMax: 500 })} {...(noDataFlag && { yMax: 500 })}
@@ -410,7 +410,7 @@ export const WorkflowDailyTerminalsChart: FC<IBizChartProps> = ({ id, period })
const noDataFlag = !response.data || response.data.length === 0 const noDataFlag = !response.data || response.data.length === 0
return <Chart return <Chart
basicInfo={{ title: t('appOverview.analysis.activeUsers.title'), explanation: t('appOverview.analysis.activeUsers.explanation'), timePeriod: period.name }} basicInfo={{ title: t('appOverview.analysis.activeUsers.title'), explanation: t('appOverview.analysis.activeUsers.explanation'), timePeriod: period.name }}
chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query ?? defaultPeriod) }} chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query ?? defaultPeriod) } as any}
chartType='endUsers' chartType='endUsers'
{...(noDataFlag && { yMax: 500 })} {...(noDataFlag && { yMax: 500 })}
/> />
@@ -425,7 +425,7 @@ export const WorkflowCostChart: FC<IBizChartProps> = ({ id, period }) => {
const noDataFlag = !response.data || response.data.length === 0 const noDataFlag = !response.data || response.data.length === 0
return <Chart return <Chart
basicInfo={{ title: t('appOverview.analysis.tokenUsage.title'), explanation: t('appOverview.analysis.tokenUsage.explanation'), timePeriod: period.name }} basicInfo={{ title: t('appOverview.analysis.tokenUsage.title'), explanation: t('appOverview.analysis.tokenUsage.explanation'), timePeriod: period.name }}
chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query ?? defaultPeriod) }} chartData={!noDataFlag ? response : { data: getDefaultChartData(period.query ?? defaultPeriod) } as any}
chartType='workflowCosts' chartType='workflowCosts'
{...(noDataFlag && { yMax: 100 })} {...(noDataFlag && { yMax: 100 })}
/> />