Ecosystem/ai-gateway
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 ui: change the precision and color scheme of the bar card.

Browse Source
This commit is contained in:
MartialBE 2023-12-31 02:48:18 +08:00 committed by Buer
parent 08638ab27b
commit 3aef247fa9
2 changed files with 41 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/src/views/Dashboard/component/StatisticalBarChart.js
View File

@ -10,6 +10,7 @@ import Chart from 'react-apexcharts';
import SkeletonTotalGrowthBarChart from 'ui-component/cards/Skeleton/TotalGrowthBarChart'; import SkeletonTotalGrowthBarChart from 'ui-component/cards/Skeleton/TotalGrowthBarChart';
import MainCard from 'ui-component/cards/MainCard'; import MainCard from 'ui-component/cards/MainCard';
import { gridSpacing } from 'store/constant'; import { gridSpacing } from 'store/constant';
import { Box } from '@mui/material';
// ==============================|| DASHBOARD DEFAULT - TOTAL GROWTH BAR CHART ||============================== // // ==============================|| DASHBOARD DEFAULT - TOTAL GROWTH BAR CHART ||============================== //
@ -32,7 +33,22 @@ const StatisticalBarChart = ({ isLoading, chartDatas }) => {
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
{chartData.series ? (
<Chart {...chartData} /> <Chart {...chartData} />
) : (
<Box
sx={{
minHeight: '490px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Typography variant="h3" color={'#697586'}>
暂无数据
</Typography>
</Box>
)}
</Grid> </Grid>
</Grid> </Grid>
</MainCard> </MainCard>
@ -51,6 +67,29 @@ const chartData = {
height: 480, height: 480,
type: 'bar', type: 'bar',
options: { options: {
colors: [
'#008FFB',
'#00E396',
'#FEB019',
'#FF4560',
'#775DD0',
'#55efc4',
'#81ecec',
'#74b9ff',
'#a29bfe',
'#00b894',
'#00cec9',
'#0984e3',
'#6c5ce7',
'#ffeaa7',
'#fab1a0',
'#ff7675',
'#fd79a8',
'#fdcb6e',
'#e17055',
'#d63031',
'#e84393'
],
chart: { chart: {
id: 'bar-chart', id: 'bar-chart',
stacked: true, stacked: true,

2
web/src/views/Dashboard/index.js
View File

@ -160,7 +160,7 @@ function getBarDataGroup(data) {
} }
const index = lastSevenDays.indexOf(item.Day); const index = lastSevenDays.indexOf(item.Day);
if (index !== -1) { if (index !== -1) {
map.get(item.ModelName).data[index] = calculateQuota(item.Quota); map.get(item.ModelName).data[index] = calculateQuota(item.Quota, 3);
} }
} }