fix: dashboard colors, users rank

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

@@ -1,20 +1,12 @@
-import { activeModelsAtom } from '@/atoms/dashboard';
 import useQueryBreakdownList from '@/pages/usage/services/use-query-breakdown-list';
 import useQueryTimeSeriesData from '@/pages/usage/services/use-query-timeseries-data';
-import { formatLargeNumber } from '@/utils';
 import { PageTools } from '@gpustack/core-ui';
 import { useIntl } from '@umijs/max';
 import { Col, Row } from 'antd';
 import dayjs from 'dayjs';
-import { useAtomValue } from 'jotai';
-import { useContext, useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
-import {
-  baseColorMap,
-  DashboardUsageCommonParams,
-  getUsageSummary
-} from '../config';
-import { DashboardContext } from '../config/dashboard-context';
+import { DashboardUsageCommonParams } from '../config';
 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';
@@ -26,9 +18,6 @@ const Section = styled.div`
 
 const NewUsage = () => {
   const intl = useIntl();
-  const activeModelsFromAtom = useAtomValue(activeModelsAtom);
-  const { active_models: activeModelsFromContext = [] } =
-    useContext(DashboardContext);
   const tokenByModelQuery = useQueryTimeSeriesData({
     key: 'tokenUsageByModelData'
   });
@@ -54,10 +43,6 @@ const NewUsage = () => {
     [dateRange]
   );
 
-  const activeModels = activeModelsFromAtom.length
-    ? activeModelsFromAtom
-    : activeModelsFromContext;
-
   useEffect(() => {
     const fetchData = async () => {
       await Promise.all([
@@ -66,15 +51,6 @@ const NewUsage = () => {
           metric: 'total_tokens',
           group_by: ['date', 'model'],
           sort_by: '-total_tokens'
-        }),
-        activeUsersQuery.fetchData({
-          ...dateRange,
-          scope: 'all',
-          group_by: ['user'],
-          page: 1,
-          perPage: 10,
-          sort_by: '-total_tokens',
-          filters: {}
         })
       ]);
     };
@@ -82,41 +58,6 @@ const NewUsage = () => {
     fetchData().catch(() => {});
   }, [commonParams, dateRange]);
 
-  const summaryCards = useMemo(() => {
-    const summary = getUsageSummary(tokenByModelQuery.detailData) || {
-      total_tokens: 0,
-      api_requests: 0
-    };
-
-    return [
-      {
-        label: formatLargeNumber(summary.total_tokens) as string,
-        value: intl.formatMessage({ id: 'dashboard.tokens' }),
-        color: baseColorMap.base
-      },
-      {
-        label: formatLargeNumber(summary.api_requests) as string,
-        value: intl.formatMessage({ id: 'dashboard.apirequest' }),
-        color: baseColorMap.baseR1
-      },
-      {
-        label: formatLargeNumber(activeModels.length) as string,
-        value: intl.formatMessage({ id: 'dashboard.activeModels' }),
-        color: baseColorMap.baseR2
-      },
-      {
-        label: formatLargeNumber(activeUsersQuery.dataSource.total) as string,
-        value: intl.formatMessage({ id: 'dashboard.activeUsers' }),
-        color: baseColorMap.baseR3
-      }
-    ];
-  }, [
-    activeModels.length,
-    activeUsersQuery.dataSource.total,
-    intl,
-    tokenByModelQuery.detailData
-  ]);
-
   return (
     <>
       <PageTools
@@ -143,10 +84,10 @@ const NewUsage = () => {
       <Section>
         <Row gutter={[20, 20]}>
           <Col xs={24} sm={24} md={24} lg={12}>
-            <TopTokenUsageByUser commonParams={commonParams} height={450} />
+            <TopTokenUsageByUser commonParams={commonParams} height={460} />
           </Col>
           <Col xs={24} sm={24} md={24} lg={12}>
-            <TopTokenUsageByApiKey commonParams={commonParams} height={450} />
+            <TopTokenUsageByApiKey commonParams={commonParams} height={460} />
           </Col>
         </Row>
       </Section>

src/pages/dashboard/components/usage-charts/api-requests-by-model.tsx

@@ -53,7 +53,7 @@ const ApiRequestsByModel: React.FC<ApiRequestsByModelProps> = ({
         data={chartData}
         height={usageChartHeight}
         loading={query.loading}
-        colorOffset={1}
+        colorOffset={5}
         total={total}
       />
     </UsageChartCard>

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

@@ -38,7 +38,7 @@ const TokenUsageByModel: React.FC<TokenUsageByModelProps> = ({
         data={chartData}
         height={usageChartHeight}
         loading={loading}
-        colorOffset={3}
+        colorOffset={2}
         total={total}
       />
     </UsageChartCard>