feat: usage export data

src/pages/dashboard/components/usage-inner/export-data.tsx

@@ -0,0 +1,96 @@
+import ModalFooter from '@/components/modal-footer';
+import ScrollerModal from '@/components/scroller-modal';
+import useTableFetch from '@/hooks/use-table-fetch';
+import { useIntl } from '@umijs/max';
+import { DatePicker, Select, Space, Table } from 'antd';
+import React from 'react';
+import { queryDashboardUsageData } from '../../apis';
+import { exportTableColumns } from '../../config';
+
+const ExportData: React.FC<{
+  open: boolean;
+  onCancel: () => void;
+}> = (props) => {
+  const {
+    dataSource,
+    rowSelection,
+    queryParams,
+    modalRef,
+    handleDelete,
+    handleDeleteBatch,
+    fetchData,
+    handlePageChange,
+    handleTableChange,
+    handleSearch,
+    handleNameChange
+  } = useTableFetch({
+    fetchAPI: queryDashboardUsageData
+  });
+  const { open, onCancel } = props || {};
+  const intl = useIntl();
+
+  const handleSubmit = () => {};
+
+  return (
+    <ScrollerModal
+      title={'Export Data'}
+      open={open}
+      centered={false}
+      onCancel={onCancel}
+      destroyOnClose={true}
+      closeIcon={true}
+      maskClosable={false}
+      keyboard={false}
+      width={800}
+      styles={{
+        content: {
+          padding: '0px'
+        },
+        header: {
+          padding: 'var(--ant-modal-content-padding)',
+          paddingBottom: '0'
+        },
+        body: {
+          padding: '0 var(--ant-modal-content-padding)'
+        },
+        footer: {
+          padding: '0 var(--ant-modal-content-padding)'
+        }
+      }}
+      footer={
+        <ModalFooter
+          onOk={handleSubmit}
+          onCancel={onCancel}
+          okText={intl.formatMessage({ id: 'common.button.export' })}
+        ></ModalFooter>
+      }
+    >
+      <Space>
+        <DatePicker.RangePicker></DatePicker.RangePicker>
+        <Select placeholder="Select user"></Select>
+        <Select placeholder="Select model"></Select>
+      </Space>
+      <Table
+        columns={exportTableColumns}
+        tableLayout={dataSource.loadend ? 'auto' : 'fixed'}
+        style={{ width: '100%', marginTop: '16px' }}
+        dataSource={dataSource.dataList}
+        loading={dataSource.loading}
+        rowKey="id"
+        onChange={handleTableChange}
+        pagination={{
+          showSizeChanger: true,
+          pageSize: queryParams.perPage,
+          current: queryParams.page,
+          total: dataSource.total,
+          hideOnSinglePage: queryParams.perPage === 10,
+          onChange: handlePageChange
+        }}
+      >
+        {' '}
+      </Table>
+    </ScrollerModal>
+  );
+};
+
+export default ExportData;

src/pages/dashboard/components/usage-inner/index.tsx

@@ -1,21 +1,45 @@
 import PageTools from '@/components/page-tools';
+import { ExportOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Col, Row } from 'antd';
-import { FC, memo, useContext } from 'react';
+import { Button, Col, DatePicker, Row, Select } from 'antd';
+import { FC, memo, useContext, useState } from 'react';
+import styled from 'styled-components';
 import { DashboardContext } from '../../config/dashboard-context';
+import ExportData from './export-data';
 import RequestTokenInner from './request-token-inner';
 import TopUser from './top-user';
 import useUsageData from './use-usage-data';
 
+const FilterWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  .selection {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+`;
+
 const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
   const intl = useIntl();
 
   const { model_usage } = useContext(DashboardContext);
+  const [open, setOpen] = useState(false);
 
   const { requestTokenData, topUserData } = useUsageData(model_usage || {});
 
+  const handleOnCancel = () => {
+    setOpen(false);
+  };
+
+  const handleExport = () => {
+    setOpen(true);
+  };
+
   return (
-    <>
+    <div>
       <PageTools
         style={{ margin: '26px 0px' }}
         left={
@@ -33,6 +57,20 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
           xl={16}
           style={{ paddingRight: paddingRight }}
         >
+          <FilterWrapper>
+            <div className="selection">
+              <DatePicker.RangePicker></DatePicker.RangePicker>
+              <Select placeholder="Select user"></Select>
+              <Select placeholder="Select model"></Select>
+            </div>
+            <Button
+              type="text"
+              icon={<ExportOutlined />}
+              onClick={handleExport}
+            >
+              {intl.formatMessage({ id: 'common.button.export' })}
+            </Button>
+          </FilterWrapper>
           <RequestTokenInner
             requestData={requestTokenData.requestData}
             xAxisData={requestTokenData.xAxisData}
@@ -46,7 +84,8 @@ const UsageInner: FC<{ paddingRight: string }> = ({ paddingRight }) => {
           ></TopUser>
         </Col>
       </Row>
-    </>
+      <ExportData open={open} onCancel={handleOnCancel}></ExportData>
+    </div>
   );
 };
 

src/pages/dashboard/components/usage-inner/request-token-inner.tsx

@@ -1,8 +1,7 @@
 import CardWrapper from '@/components/card-wrapper';
-import BarChart from '@/components/echarts/bar-chart';
-import LineChart from '@/components/echarts/line-chart';
+import { SimpleCard } from '@/components/card-wrapper/simple-card';
+import MixLineBar from '@/components/echarts/mix-line-bar';
 import { useIntl } from '@umijs/max';
-import { Col, Row } from 'antd';
 import dayjs from 'dayjs';
 import React from 'react';
 
@@ -29,13 +28,19 @@ const dataList = [
   { label: '120K', value: 'API Requests' }
 ];
 
+const legendData = [
+  { name: 'Completion tokens', icon: 'roundRect' },
+  { name: 'Prompt tokens', icon: 'roundRect' },
+  { name: 'API requests', icon: 'circle' }
+];
+
 const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
   const { requestData, tokenData, xAxisData } = props;
   const intl = useIntl();
 
   return (
     <CardWrapper style={{ width: '100%' }}>
-      <Row style={{ width: '100%' }}>
+      {/* <Row style={{ width: '100%' }}>
         <Col span={12}>
           <LineChart
             title={intl.formatMessage({ id: 'dashboard.apirequest' })}
@@ -54,7 +59,20 @@ const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
             labelFormatter={labelFormatter}
           ></BarChart>
         </Col>
-      </Row>
+      </Row> */}
+      <SimpleCard dataList={dataList} height={80}></SimpleCard>
+      <MixLineBar
+        chartData={{
+          line: requestData,
+          bar: tokenData
+        }}
+        seriesData={[]}
+        xAxisData={xAxisData}
+        height={360}
+        smooth={true}
+        legendData={legendData}
+        labelFormatter={labelFormatter}
+      ></MixLineBar>
     </CardWrapper>
   );
 };

src/pages/dashboard/components/usage-inner/top-user.tsx

@@ -17,7 +17,7 @@ const TopUser: React.FC<TopUserProps> = (props) => {
         title={intl.formatMessage({ id: 'dashboard.topusers' })}
         seriesData={userData}
         xAxisData={topUserList}
-        height={360}
+        height={520}
       ></HBar>
     </CardWrapper>
   );

src/pages/dashboard/components/usage-inner/use-usage-data.ts

@@ -92,8 +92,10 @@ export default function useUseageData(data: any) {
       data: { time: string; value: number }[];
     } = {
       name: 'API requests',
-      areaStyle: {},
-      color: baseColorMap.base,
+      areaStyle: {
+        color: 'rgba(13,171,219,0.15)'
+      },
+      color: baseColorMap.baseR1,
       data: generateData(dateRange, generateValueMap(apiRequestHistory))
     };