feat: 新增数据看板

web/src/App.js

@@ -23,10 +23,10 @@ import Log from './pages/Log';
 import Chat from './pages/Chat';
 import {Layout} from "@douyinfe/semi-ui";
 import Midjourney from "./pages/Midjourney";
+import Detail from "./pages/Detail";
 
 const Home = lazy(() => import('./pages/Home'));
 const About = lazy(() => import('./pages/About'));
-
 function App() {
   const [userState, userDispatch] = useContext(UserContext);
   const [statusState, statusDispatch] = useContext(StatusContext);
@@ -49,6 +49,8 @@ function App() {
       localStorage.setItem('footer_html', data.footer_html);
       localStorage.setItem('quota_per_unit', data.quota_per_unit);
       localStorage.setItem('display_in_currency', data.display_in_currency);
+      localStorage.setItem('enable_drawing', data.enable_drawing);
+      localStorage.setItem('enable_data_export', data.enable_data_export);
       if (data.chat_link) {
         localStorage.setItem('chat_link', data.chat_link);
       } else {
@@ -228,6 +230,14 @@ function App() {
                         </PrivateRoute>
                     }
                 />
+                <Route
+                    path='/detail'
+                    element={
+                        <PrivateRoute>
+                            <Detail />
+                        </PrivateRoute>
+                    }
+                />
                 <Route
                     path='/midjourney'
                     element={

web/src/helpers/render.js

@@ -76,6 +76,12 @@ export function getQuotaPerUnit() {
   return quotaPerUnit;
 }
 
+export function getQuotaWithUnit(quota, digits = 6) {
+  let quotaPerUnit = localStorage.getItem('quota_per_unit');
+  quotaPerUnit = parseFloat(quotaPerUnit);
+  return (quota / quotaPerUnit).toFixed(digits);
+}
+
 export function renderQuota(quota, digits = 2) {
   let quotaPerUnit = localStorage.getItem('quota_per_unit');
   let displayInCurrency = localStorage.getItem('display_in_currency');

web/src/helpers/utils.js

@@ -171,6 +171,32 @@ export function timestamp2string(timestamp) {
   );
 }
 
+export function timestamp2string1(timestamp) {
+  let date = new Date(timestamp * 1000);
+  // let year = date.getFullYear().toString();
+  let month = (date.getMonth() + 1).toString();
+  let day = date.getDate().toString();
+  let hour = date.getHours().toString();
+  if (month.length === 1) {
+    month = '0' + month;
+  }
+  if (day.length === 1) {
+    day = '0' + day;
+  }
+  if (hour.length === 1) {
+    hour = '0' + hour;
+  }
+  return (
+      // year +
+      // '-' +
+      month +
+      '-' +
+      day +
+      ' ' +
+      hour + ":00"
+  );
+}
+
 export function downloadTextAsFile(text, filename) {
   let blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
   let url = URL.createObjectURL(blob);

web/src/index.js

@@ -1,7 +1,8 @@
+import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
+import VChart from "@visactor/vchart";
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {BrowserRouter} from 'react-router-dom';
-import {Container} from 'semantic-ui-react';
 import App from './App';
 import HeaderBar from './components/HeaderBar';
 import Footer from './components/Footer';
@@ -14,6 +15,11 @@ import {StatusProvider} from './context/Status';
 import {Layout} from "@douyinfe/semi-ui";
 import SiderBar from "./components/SiderBar";
 
+// initialization
+initVChartSemiTheme({
+    isWatchingThemeSwitch: true,
+});
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 const {Sider, Content, Header} = Layout;
 root.render(

web/src/pages/About/index.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { Header, Segment } from 'semantic-ui-react';
 import { API, showError } from '../../helpers';
 import { marked } from 'marked';
 import {Layout} from "@douyinfe/semi-ui";

web/src/pages/Detail/index.js

@@ -0,0 +1,257 @@
+import React, {useEffect, useState} from 'react';
+import {Button, Col, Form, Layout, Row} from "@douyinfe/semi-ui";
+import VChart from '@visactor/vchart';
+import {useEffectOnce} from "usehooks-ts";
+import {API, isAdmin, showError, timestamp2string, timestamp2string1} from "../../helpers";
+import {ITEMS_PER_PAGE} from "../../constants";
+import {getQuotaWithUnit} from "../../helpers/render";
+
+const Detail = (props) => {
+
+    let now = new Date();
+    const [inputs, setInputs] = useState({
+        username: '',
+        token_name: '',
+        model_name: '',
+        start_timestamp: timestamp2string(now.getTime() / 1000 - 86400),
+        end_timestamp: timestamp2string(now.getTime() / 1000 + 3600),
+        channel: ''
+    });
+    const {username, token_name, model_name, start_timestamp, end_timestamp, channel} = inputs;
+    const isAdminUser = isAdmin();
+    let modelDataChart = null;
+    let modelDataPieChart = null;
+    const [loading, setLoading] = useState(true);
+    const [quotaData, setQuotaData] = useState([]);
+    const [quotaDataPie, setQuotaDataPie] = useState([]);
+    const [quotaDataLine, setQuotaDataLine] = useState([]);
+
+    const handleInputChange = (value, name) => {
+        setInputs((inputs) => ({...inputs, [name]: value}));
+    };
+
+    const spec_line = {
+        type: 'bar',
+        data: [
+            {
+                id: 'barData',
+                values: [
+                ]
+            }
+        ],
+        xField: 'Time',
+        yField: 'Usage',
+        seriesField: 'Model',
+        stack: true,
+        legends: {
+            visible: true
+        },
+        title: {
+            visible: true,
+            text: '模型消耗分布'
+        },
+        bar: {
+            // The state style of bar
+            state: {
+                hover: {
+                    stroke: '#000',
+                    lineWidth: 1
+                }
+            }
+        }
+    };
+
+    const spec_pie = {
+        type: 'pie',
+        data: [
+            {
+                id: 'id0',
+                values: [
+                    { type: 'null', value: '0' },
+                ]
+            }
+        ],
+        outerRadius: 0.8,
+        innerRadius: 0.5,
+        padAngle: 0.6,
+        valueField: 'value',
+        categoryField: 'type',
+        pie: {
+            style: {
+                cornerRadius: 10
+            },
+            state: {
+                hover: {
+                    outerRadius: 0.85,
+                    stroke: '#000',
+                    lineWidth: 1
+                },
+                selected: {
+                    outerRadius: 0.85,
+                    stroke: '#000',
+                    lineWidth: 1
+                }
+            }
+        },
+        title: {
+            visible: true,
+            text: '模型调用次数占比'
+        },
+        legends: {
+            visible: true,
+            orient: 'left'
+        },
+        label: {
+            visible: true
+        },
+        tooltip: {
+            mark: {
+                content: [
+                    {
+                        key: datum => datum['type'],
+                        value: datum => datum['value']
+                    }
+                ]
+            }
+        }
+    };
+
+    const loadQuotaData = async () => {
+        setLoading(true);
+
+        let url = '';
+        let localStartTimestamp = Date.parse(start_timestamp) / 1000;
+        let localEndTimestamp = Date.parse(end_timestamp) / 1000;
+        if (isAdminUser) {
+            url = `/api/data`;
+        } else {
+            url = `/api/data/self`;
+        }
+        const res = await API.get(url);
+        const {success, message, data} = res.data;
+        if (success) {
+            setQuotaData(data);
+            updateChart(data);
+        } else {
+            showError(message);
+        }
+        setLoading(false);
+    };
+
+    const refresh = async () => {
+        await loadQuotaData();
+    };
+
+    const updateChart = (data) => {
+        if (isAdminUser) {
+            // 将所有用户的数据累加
+            let pieData = [];
+            let lineData = [];
+            for (let i = 0; i < data.length; i++) {
+                const item = data[i];
+                const {count, id, model_name, quota, user_id, username} = item;
+                // 合并model_name
+                let pieItem = pieData.find(item => item.model_name === model_name);
+                if (pieItem) {
+                    pieItem.count += count;
+                } else {
+                    pieData.push({
+                        "type": model_name,
+                        "value": count
+                    });
+                }
+                // 合并created_at和model_name 为 lineData, created_at 数据类型是小时的时间戳
+                // 转换日期格式
+                let createTime = timestamp2string1(item.created_at);
+                let lineItem = lineData.find(item => item.Time === item.createTime && item.Model === model_name);
+                if (lineItem) {
+                    lineItem.Usage += getQuotaWithUnit(quota);
+                } else {
+                    lineData.push({
+                        "Time": createTime,
+                        "Model": model_name,
+                        "Usage": getQuotaWithUnit(quota)
+                    });
+                }
+
+            }
+            // sort by count
+            pieData.sort((a, b) => b.value - a.value);
+            spec_line.data[0].values = lineData;
+            spec_pie.data[0].values = pieData;
+            // console.log('spec_line', spec_line);
+            console.log('spec_pie', spec_pie);
+            // modelDataChart.renderAsync();
+            modelDataPieChart.updateSpec(spec_pie);
+            modelDataChart.updateSpec(spec_line);
+        }
+    }
+
+    useEffect(() => {
+        refresh();
+    }, []);
+
+    useEffectOnce(() => {
+        // 创建 vchart 实例
+        if (!modelDataChart) {
+            modelDataChart = new VChart(spec_line, {dom: 'model_data'});
+            // 绘制
+            modelDataChart.renderAsync();
+        }
+
+        if (!modelDataPieChart) {
+            modelDataPieChart = new VChart(spec_pie, {dom: 'model_pie'});
+            // 绘制
+            modelDataPieChart.renderAsync();
+        }
+
+        console.log('render vchart');
+    })
+
+    return (
+        <>
+            <Layout>
+                <Layout.Header>
+                    <h3>数据看板(24H)</h3>
+                </Layout.Header>
+                <Layout.Content>
+                    <Form layout='horizontal' style={{marginTop: 10}}>
+                        <>
+                            <Form.DatePicker field="start_timestamp" label='起始时间' style={{width: 272}}
+                                             initValue={start_timestamp}
+                                             value={start_timestamp} type='dateTime'
+                                             name='start_timestamp'
+                                             onChange={value => handleInputChange(value, 'start_timestamp')}/>
+                            <Form.DatePicker field="end_timestamp" fluid label='结束时间' style={{width: 272}}
+                                             initValue={end_timestamp}
+                                             value={end_timestamp} type='dateTime'
+                                             name='end_timestamp'
+                                             onChange={value => handleInputChange(value, 'end_timestamp')}/>
+                            {/*<Form.Button fluid label='操作' width={2} onClick={refresh}>查询</Form.Button>*/}
+                            {/*{*/}
+                            {/*    isAdminUser && <>*/}
+                            {/*        <Form.Input field="username" label='用户名称' style={{width: 176}} value={username}*/}
+                            {/*                    placeholder={'可选值'} name='username'*/}
+                            {/*                    onChange={value => handleInputChange(value, 'username')}/>*/}
+                            {/*    </>*/}
+                            {/*}*/}
+                            {/*<Form.Section>*/}
+                            {/*    <Button label='查询' type="primary" htmlType="submit" className="btn-margin-right"*/}
+                            {/*            >查询</Button>*/}
+                            {/*</Form.Section>*/}
+                        </>
+                    </Form>
+                    <div style={{height: 500}}>
+                        <div id="model_pie" style={{width: '100%'}}></div>
+                    </div>
+                    <div style={{height: 500}}>
+                        <div id="model_data" style={{width: '100%'}}></div>
+                    </div>
+                </Layout.Content>
+            </Layout>
+        </>
+    );
+};
+
+
+export default Detail;