fix(style): chart style

src/pages/dashboard/components/new-usage.tsx

@@ -1,4 +1,3 @@
-import useQueryBreakdownList from '@/pages/usage/services/use-query-breakdown-list';
 import useQueryTimeSeriesData from '@/pages/usage/services/use-query-timeseries-data';
 import { PageTools } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
@@ -6,7 +5,13 @@ import { Col, Row } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
-import { DashboardUsageCommonParams } from '../config';
+import {
+  DashboardUsageCommonParams,
+  getUsageRankHeight,
+  getUsageRankSlotCount
+} from '../config';
+import useTopTokenUsageByApiKey from '../hooks/use-top-token-usage-by-api-key';
+import useTopTokenUsageByUser from '../hooks/use-top-token-usage-by-user';
 import ApiRequestsByModel from './usage-charts/api-requests-by-model';
 import TokenUsageByModel from './usage-charts/token-usage-by-model';
 import TopTokenUsageByApiKey from './usage-charts/top-token-usage-by-api-key';
@@ -21,9 +26,6 @@ const NewUsage = () => {
   const tokenByModelQuery = useQueryTimeSeriesData({
     key: 'tokenUsageByModelData'
   });
-  const activeUsersQuery = useQueryBreakdownList({
-    key: 'dashboardActiveUsersData'
-  });
 
   const dateRange = useMemo(
     () => ({
@@ -58,6 +60,23 @@ const NewUsage = () => {
     fetchData().catch(() => {});
   }, [commonParams, dateRange]);
 
+  const userUsage = useTopTokenUsageByUser(commonParams);
+  const apiKeyUsage = useTopTokenUsageByApiKey(commonParams);
+
+  const userCount = userUsage.rankData.names.length;
+  const apiKeyCount = apiKeyUsage.rankData.names.length;
+
+  const rankHeight = Math.max(
+    getUsageRankHeight(userCount),
+    getUsageRankHeight(apiKeyCount)
+  );
+
+  const rankMaxItems = Math.max(
+    getUsageRankSlotCount(rankHeight),
+    userCount,
+    apiKeyCount
+  );
+
   return (
     <>
       <PageTools
@@ -84,10 +103,20 @@ const NewUsage = () => {
       <Section>
         <Row gutter={[20, 20]}>
           <Col xs={24} sm={24} md={24} lg={12}>
-            <TopTokenUsageByUser commonParams={commonParams} height={460} />
+            <TopTokenUsageByUser
+              rankData={userUsage.rankData}
+              loading={userUsage.loading}
+              height={rankHeight}
+              maxItems={rankMaxItems}
+            />
           </Col>
           <Col xs={24} sm={24} md={24} lg={12}>
-            <TopTokenUsageByApiKey commonParams={commonParams} height={460} />
+            <TopTokenUsageByApiKey
+              rankData={apiKeyUsage.rankData}
+              loading={apiKeyUsage.loading}
+              height={rankHeight}
+              maxItems={rankMaxItems}
+            />
           </Col>
         </Row>
       </Section>

src/pages/dashboard/components/usage-charts/top-token-usage-by-api-key.tsx

@@ -1,72 +1,39 @@
-import useQueryTimeSeriesData from '@/pages/usage/services/use-query-timeseries-data';
 import { HBarChart } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
-import { useEffect, useMemo } from 'react';
-import {
-  baseColorMap,
-  DashboardUsageCommonParams,
-  toUsageRankData,
-  usageChartHeight
-} from '../../config';
+import { usageChartHeight, usageRankMaxItems } from '../../config';
+import type useTopTokenUsageByApiKey from '../../hooks/use-top-token-usage-by-api-key';
 import UsageChartCard, { ChartLoadingBox } from './shared';
 
+type RankData = ReturnType<typeof useTopTokenUsageByApiKey>['rankData'];
+
 interface TopTokenUsageByApiKeyProps {
-  commonParams: DashboardUsageCommonParams;
+  rankData: RankData;
+  loading: boolean;
   height?: number;
+  maxItems?: number;
 }
 
 const TopTokenUsageByApiKey: React.FC<TopTokenUsageByApiKeyProps> = ({
-  commonParams,
-  height = usageChartHeight
+  rankData,
+  loading,
+  height = usageChartHeight,
+  maxItems = usageRankMaxItems
 }) => {
   const intl = useIntl();
-  const query = useQueryTimeSeriesData({
-    key: 'topTokenUsageByApiKeyData'
-  });
-  const tokenUsageText = intl.formatMessage({ id: 'dashboard.tokens' });
-
-  useEffect(() => {
-    query
-      .fetchData({
-        ...commonParams,
-        metric: 'total_tokens',
-        group_by: ['date', 'api_key'],
-        page: 1,
-        perPage: 10,
-        sort_by: '-total_tokens'
-      })
-      .catch(() => {});
-  }, [commonParams]);
-
-  const rankData = useMemo(() => {
-    const data = toUsageRankData(
-      query.detailData,
-      'api_key',
-      tokenUsageText,
-      baseColorMap.baseR3
-    );
-    return {
-      names: data.names.filter((name) => name !== '-'),
-      series: data.series.map((item) => ({
-        ...item,
-        data: item.data.filter((point) => point.name !== '-')
-      }))
-    };
-  }, [query.detailData, tokenUsageText]);
 
   return (
     <UsageChartCard
       title={intl.formatMessage({ id: 'dashboard.topTokenUsageByApiKey' })}
       height={height + 52}
     >
-      {query.loading && rankData.names.length === 0 ? (
+      {loading && rankData.names.length === 0 ? (
         <ChartLoadingBox height={height} />
       ) : (
         <HBarChart
           seriesData={rankData.series}
           xAxisData={rankData.names}
           height={height}
-          maxItems={10}
+          maxItems={maxItems}
         />
       )}
     </UsageChartCard>

src/pages/dashboard/components/usage-charts/top-token-usage-by-user.tsx

@@ -1,67 +1,39 @@
-import useQueryTimeSeriesData from '@/pages/usage/services/use-query-timeseries-data';
 import { HBarChart } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
-import { useEffect, useMemo } from 'react';
-import {
-  baseColorMap,
-  DashboardUsageCommonParams,
-  toUsageRankData,
-  usageChartHeight
-} from '../../config';
+import { usageChartHeight, usageRankMaxItems } from '../../config';
+import type useTopTokenUsageByUser from '../../hooks/use-top-token-usage-by-user';
 import UsageChartCard, { ChartLoadingBox } from './shared';
 
+type RankData = ReturnType<typeof useTopTokenUsageByUser>['rankData'];
+
 interface TopTokenUsageByUserProps {
-  commonParams: DashboardUsageCommonParams;
+  rankData: RankData;
+  loading: boolean;
   height?: number;
+  maxItems?: number;
 }
 
 const TopTokenUsageByUser: React.FC<TopTokenUsageByUserProps> = ({
-  commonParams,
-  height = usageChartHeight
+  rankData,
+  loading,
+  height = usageChartHeight,
+  maxItems = usageRankMaxItems
 }) => {
   const intl = useIntl();
-  const query = useQueryTimeSeriesData({
-    key: 'topTokenUsageByUserData'
-  });
-  const tokenUsageText = intl.formatMessage({ id: 'dashboard.tokens' });
-
-  useEffect(() => {
-    query
-      .fetchData({
-        ...commonParams,
-        metric: 'total_tokens',
-        group_by: ['date', 'user'],
-        page: 1,
-        perPage: 10,
-        sort_by: '-total_tokens'
-      })
-      .catch(() => {});
-  }, [commonParams]);
-
-  const rankData = useMemo(
-    () =>
-      toUsageRankData(
-        query.detailData,
-        'user',
-        tokenUsageText,
-        baseColorMap.base
-      ),
-    [query.detailData, tokenUsageText]
-  );
 
   return (
     <UsageChartCard
       title={intl.formatMessage({ id: 'dashboard.topTokenUsageByUser' })}
       height={height + 52}
     >
-      {query.loading && rankData.names.length === 0 ? (
+      {loading && rankData.names.length === 0 ? (
         <ChartLoadingBox height={height} />
       ) : (
         <HBarChart
           seriesData={rankData.series}
           xAxisData={rankData.names}
           height={height}
-          maxItems={10}
+          maxItems={maxItems}
         />
       )}
     </UsageChartCard>