128 lines
3.1 KiB
TypeScript
128 lines
3.1 KiB
TypeScript
import { type FC, useEffect, useRef } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import ReactEcharts from 'echarts-for-react';
|
|
import * as echarts from 'echarts';
|
|
import Empty from '@/components/Empty'
|
|
|
|
import Card from './Card'
|
|
import type { StatisticsItem } from '../types'
|
|
|
|
interface LineCardProps {
|
|
chartData: StatisticsItem[];
|
|
type: string;
|
|
total: number;
|
|
}
|
|
|
|
const SeriesConfig = {
|
|
type: 'line',
|
|
stack: 'Total',
|
|
smooth: true,
|
|
lineStyle: {
|
|
width: 3
|
|
},
|
|
showSymbol: true,
|
|
label: {
|
|
show: false,
|
|
position: 'top'
|
|
},
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
}
|
|
|
|
const ColorObj: Record<string, string> = {
|
|
daily_conversations: '#FFB048',
|
|
daily_new_users: '#4DA8FF',
|
|
daily_api_calls: '#155EEF',
|
|
daily_tokens: '#AD88FF'
|
|
}
|
|
|
|
const LineCard: FC<LineCardProps> = ({ chartData, type, total }) => {
|
|
const { t } = useTranslation()
|
|
const chartRef = useRef<ReactEcharts>(null);
|
|
|
|
useEffect(() => {
|
|
|
|
}, [chartData])
|
|
|
|
const getSeries = () => {
|
|
return [{
|
|
...SeriesConfig,
|
|
name: t(`application.${type}`),
|
|
data: chartData.map(vo => vo.count),
|
|
areaStyle: {
|
|
opacity: 0.8,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{ offset: 0, color: ColorObj[type] },
|
|
{ offset: 1, color: '#FFFFFF' }
|
|
])
|
|
},
|
|
}]
|
|
}
|
|
|
|
return (
|
|
<Card
|
|
title={<div>{t(`application.${type}`)} <span className="rb:text-[#155EEF] rb:font-medium rb:text-[18px]">{total}</span></div>}
|
|
>
|
|
{chartData && chartData.length > 0 ? (
|
|
<ReactEcharts
|
|
ref={chartRef}
|
|
option={{
|
|
color: [ColorObj[type]],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
extraCssText: 'box-shadow: 0px 2px 6px 0px rgba(33,35,50,0.16); border-radius: 8px;',
|
|
axisPointer: {
|
|
type: 'line',
|
|
crossStyle: {
|
|
color: '#5F6266',
|
|
},
|
|
lineStyle: {
|
|
color: '#5F6266',
|
|
},
|
|
label: {
|
|
show: false
|
|
}
|
|
},
|
|
},
|
|
|
|
grid: {
|
|
top: 10,
|
|
left: 15,
|
|
right: 40,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: chartData.map(item => item.date),
|
|
boundaryGap: false,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: '#A8A9AA',
|
|
fontFamily: 'PingFangSC, PingFang SC',
|
|
align: 'right',
|
|
lineHeight: 17,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#EBEBEB',
|
|
}
|
|
},
|
|
},
|
|
series: getSeries()
|
|
}}
|
|
style={{ height: '265px', width: '100%', minWidth: '100%', boxSizing: 'border-box' }}
|
|
opts={{ renderer: 'canvas' }}
|
|
notMerge={true}
|
|
lazyUpdate={true}
|
|
/>
|
|
) : <Empty size={120} className="rb:mt-12 rb:mb-20.25" />}
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default LineCard
|