fix(style): chart style

2026-05-18 20:14:28 +08:00
parent abc3c2c25a
commit bcea46fa8f
10 changed files with 208 additions and 99 deletions
@@ -0,0 +1,52 @@
+import useQueryTimeSeriesData from '@/pages/usage/services/use-query-timeseries-data';
+import { useIntl } from '@umijs/max';
+import { useEffect, useMemo } from 'react';
+import {
+  baseColorMap,
+  DashboardUsageCommonParams,
+  toUsageRankData
+} from '../config';
+
+export default function useTopTokenUsageByApiKey(
+  commonParams: DashboardUsageCommonParams
+) {
+  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 {
+    rankData,
+    loading: query.loading
+  };
+}
@@ -0,0 +1,47 @@
+import useQueryTimeSeriesData from '@/pages/usage/services/use-query-timeseries-data';
+import { useIntl } from '@umijs/max';
+import { useEffect, useMemo } from 'react';
+import {
+  baseColorMap,
+  DashboardUsageCommonParams,
+  toUsageRankData
+} from '../config';
+
+export default function useTopTokenUsageByUser(
+  commonParams: DashboardUsageCommonParams
+) {
+  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 {
+    rankData,
+    loading: query.loading
+  };
+}