style: top users chart compact

src/components/echarts/h-bar.tsx

@@ -5,7 +5,7 @@ import _ from 'lodash';
 import React, { memo, useMemo } from 'react';
 import { ChartProps } from './types';
 
-const BarChart: React.FC<ChartProps> = (props) => {
+const BarChart: React.FC<ChartProps & { maxItems?: number }> = (props) => {
   const {
     seriesData,
     xAxisData,
@@ -13,6 +13,7 @@ const BarChart: React.FC<ChartProps> = (props) => {
     width,
     labelFormatter,
     legendData,
+    maxItems,
     title
   } = props;
   const {
@@ -30,7 +31,13 @@ const BarChart: React.FC<ChartProps> = (props) => {
         ...titleConfig,
         left: 'start'
       },
-      grid,
+      grid: {
+        ...grid,
+        top: 0,
+        bottom: maxItems
+          ? `${(1 / maxItems) * (maxItems - xAxisData.length) * 100}%`
+          : 0
+      },
       tooltip: {
         ...tooltip
       },

src/pages/dashboard/components/usage-inner/top-user.tsx

@@ -11,7 +11,12 @@ const TopUser: React.FC<TopUserProps> = (props) => {
 
   return (
     <CardWrapper>
-      <HBar seriesData={userData} xAxisData={topUserList} height={440}></HBar>
+      <HBar
+        seriesData={userData}
+        xAxisData={topUserList}
+        height={440}
+        maxItems={10}
+      ></HBar>
     </CardWrapper>
   );
 };