fix(style): bar chart legend gap

src/pages/_components/bar-chart/index.tsx

@@ -21,6 +21,13 @@ export interface BarChartProps {
   labelFormatter?: (val: any, index?: number) => string;
   tooltipValueFormatter?: (val: any) => string;
   title?: string;
+  grid?: {
+    left?: number | string;
+    right?: number | string;
+    top?: number | string;
+    bottom?: number | string;
+    containLabel?: boolean;
+  };
   legendIsolate?: boolean;
 }
 
@@ -34,6 +41,7 @@ const BarChart: React.FC<BarChartProps> = (props) => {
     labelFormatter,
     tooltipValueFormatter,
     title,
+    grid,
     legendIsolate
   } = props;
   const { token } = theme.useToken();
@@ -126,8 +134,9 @@ const BarChart: React.FC<BarChartProps> = (props) => {
         left: 0,
         right: 0,
         top: title ? 30 : 10,
-        bottom: 0,
+        bottom: 8,
-        containLabel: true
+        containLabel: true,
+        ...grid
       },
       tooltip: {
         trigger: 'axis',

src/pages/usage/components/daily-usage.tsx

@@ -314,6 +314,9 @@ const DailyUsage: React.FC<DailyUsageProps> = (props) => {
           seriesData={seriesData}
           xAxisData={xAxisData}
           height={280}
+          grid={{
+            bottom: 28
+          }}
           legendData={legendData}
           labelFormatter={labelFormatter}
           legendIsolate={metric === CACHED_METRIC}

src/pages/usage/components/summary-tab.tsx

@@ -187,6 +187,9 @@ const DomainSection: React.FC<{
               ]}
               xAxisData={trendXAxis}
               height={180}
+              grid={{
+                bottom: 0
+              }}
               title={trendTitle}
               labelFormatter={trendLabel(trendGran)}
               tooltipValueFormatter={(v) =>