style: usage chart

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

@@ -126,7 +126,7 @@ const BarChart: React.FC<BarChartProps> = (props) => {
         left: 0,
         right: 0,
         top: title ? 30 : 10,
-        bottom: 28,
+        bottom: 0,
         containLabel: true
       },
       tooltip: {

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

@@ -45,12 +45,20 @@ const PieChart: React.FC<PieChartProps> = ({
   const options = useMemo(
     () => ({
       color: colors,
+      grid: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        containLabel: true
+      },
       tooltip: {
         trigger: 'item',
+        position: 'top',
         // Keep the tooltip inside the chart box — the donut sits on the left, so
         // a left-slice tooltip could otherwise spill out and get hidden behind
         // the side menu.
-        confine: true,
+        confine: false,
         backgroundColor: token.colorBgElevated,
         borderColor: 'transparent',
         formatter: (params: any) => {
@@ -97,7 +105,12 @@ const PieChart: React.FC<PieChartProps> = ({
           // No on-arc label — the percentage lives in the tooltip instead, so
           // hovering shows value + percent in one place.
           label: { show: false },
-          emphasis: { label: { show: false }, scale: false },
+          emphasis: {
+            label: {
+              show: false
+            },
+            scale: true
+          },
           labelLine: { show: false },
           data
         }

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

@@ -25,8 +25,9 @@ import useCoolColors from '@/hooks/use-cool-colors';
 import BarChart from '@/pages/_components/bar-chart';
 import PieChart from '@/pages/_components/pie-chart';
 import { formatLargeNumber } from '@/utils';
+import { CardWrapper } from '@gpustack/core-ui';
 import { useAccess, useIntl } from '@umijs/max';
-import { Card, Col, Empty, Row } from 'antd';
+import { Col, Empty, Row } from 'antd';
 import dayjs from 'dayjs';
 import React, { useEffect, useMemo, useState } from 'react';
 import { queryUsageTimeSeriesData } from '../apis';
@@ -128,7 +129,7 @@ const DomainSection: React.FC<{
     />
   );
   return (
-    <Card variant="borderless" styles={{ body: { padding: 16 } }}>
+    <CardWrapper style={{ paddingBlock: 16 }}>
       <div
         style={{
           display: 'flex',
@@ -185,7 +186,7 @@ const DomainSection: React.FC<{
                 { name: trendTitle, data: trendData, color: trendColor }
               ]}
               xAxisData={trendXAxis}
-              height={170}
+              height={180}
               title={trendTitle}
               labelFormatter={trendLabel(trendGran)}
               tooltipValueFormatter={(v) =>
@@ -195,7 +196,7 @@ const DomainSection: React.FC<{
           )}
         </div>
       </div>
-    </Card>
+    </CardWrapper>
   );
 };
 
@@ -384,9 +385,9 @@ const SummaryTab: React.FC = () => {
         onUsersChange={setSelectedUsers}
         onRefresh={() => setRefreshKey((k) => k + 1)}
       />
-      <div style={{ height: 16 }} />
+      <div style={{ height: 24 }} />
 
-      <Row gutter={[0, 12]}>
+      <Row gutter={[0, 24]}>
         <Col span={24}>
           <DomainSection
             title={t('usage.metric.tokens')}