llvy.ltd/casdoor
1
0
Fork 0
mirror of https://github.com/casdoor/casdoor.git synced 2025-07-03 20:50:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: support dashboard in homepage (#2207)

Browse Source 
* feat: support dashboard

* feat: support dashboard
This commit is contained in:
珩
2023-08-14 14:32:12 +08:00
committed by Yang Luo
parent 7a2a40edcc
commit 8ff0cfd6ec
7 changed files with 283 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
web/src/basic/HomePage.js
View File

@ -13,8 +13,11 @@
// limitations under the License.
import React from "react";
import {Card, Col, Row} from "antd";
import {Card, Col, Row, Spin, Statistic} from "antd";
import {ArrowUpOutlined} from "@ant-design/icons";
import * as ApplicationBackend from "../backend/ApplicationBackend";
import * as DashboardBackend from "../backend/DashboardBackend";
import * as echarts from "echarts";
import * as Setting from "../Setting";
import SingleCard from "./SingleCard";
import i18next from "i18next";
@ -25,11 +28,13 @@ class HomePage extends React.Component {
this.state = {
classes: props,
applications: null,
dashboardData: null,
};
}
UNSAFE_componentWillMount() {
this.getApplicationsByOrganization(this.props.account.owner);
this.getDashboard();
}
getApplicationsByOrganization(organizationName) {
@ -41,6 +46,21 @@ class HomePage extends React.Component {
});
}
getDashboard() {
DashboardBackend.getDashboard()
.then((res) => {
if (res.status === "ok") {
this.setState({
dashboardData: res.data,
}, () => {
this.renderEChart();
});
} else {
Setting.showMessage("error", res.msg);
}
});
}
getItems() {
let items = [];
if (Setting.isAdminUser(this.props.account)) {
@ -75,9 +95,53 @@ class HomePage extends React.Component {
return items;
}
renderEChart() {
const data = this.state.dashboardData;
const chartDom = document.getElementById("echarts-chart");
const myChart = echarts.init(chartDom);
const currentDate = new Date();
const dateArray = [];
for (let i = 30; i >= 0; i--) {
const date = new Date(currentDate);
date.setDate(date.getDate() - i);
const month = parseInt(date.getMonth()) + 1;
const day = parseInt(date.getDate());
const formattedDate = `${month}-${day}`;
dateArray.push(formattedDate);
}
const option = {
title: {text: i18next.t("home:Past 30 Days")},
tooltip: {trigger: "axis"},
legend: {data: [
i18next.t("general:Users"),
i18next.t("general:Providers"),
i18next.t("general:Applications"),
i18next.t("general:Organizations"),
i18next.t("general:Subscriptions"),
]},
grid: {left: "3%", right: "4%", bottom: "3%", containLabel: true},
xAxis: {type: "category", boundaryGap: false, data: dateArray},
yAxis: {type: "value"},
series: [
{name: i18next.t("general:Organizations"), type: "line", data: data?.organizationCounts},
{name: i18next.t("general:Users"), type: "line", data: data?.userCounts},
{name: i18next.t("general:Providers"), type: "line", data: data?.providerCounts},
{name: i18next.t("general:Applications"), type: "line", data: data?.applicationCounts},
{name: i18next.t("general:Subscriptions"), type: "line", data: data?.subscriptionCounts},
],
};
myChart.setOption(option);
}
renderCards() {
if (this.state.applications === null) {
return null;
const data = this.state.dashboardData;
if (data === null) {
return (
<div style={{display: "flex", justifyContent: "center", alignItems: "center", marginTop: "10%"}}>
<Spin size="large" tip={i18next.t("login:Loading")} style={{paddingTop: "10%"}} />
</div>
);
}
const items = this.getItems();
@ -96,24 +160,35 @@ class HomePage extends React.Component {
);
} else {
return (
<div style={{marginRight: "15px", marginLeft: "15px"}}>
<Row style={{marginLeft: "-20px", marginRight: "-20px", marginTop: "20px"}} gutter={24}>
{
items.map(item => {
return (
<SingleCard logo={item.logo} link={item.link} title={item.name} desc={item.organizer} time={item.createdTime} isSingle={items.length === 1} key={item.name} />
);
})
}
</Row>
</div>
<Row gutter={80}>
<Col span={50}>
<Card bordered={false} bodyStyle={{width: "100%", height: "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
<Statistic title={i18next.t("home:Total users")} fontSize="100px" value={data?.userCounts[30]} valueStyle={{fontSize: "30px"}} style={{width: "200px", paddingLeft: "10px"}} />
</Card>
</Col>
<Col span={50}>
<Card bordered={false} bodyStyle={{width: "100%", height: "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
<Statistic title={i18next.t("home:New users today")} fontSize="100px" value={data?.userCounts[30] - data?.userCounts[30 - 1]} valueStyle={{fontSize: "30px"}} prefix={<ArrowUpOutlined />} style={{width: "200px", paddingLeft: "10px"}} />
</Card>
</Col>
<Col span={50}>
<Card bordered={false} bodyStyle={{width: "100%", height: "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
<Statistic title={i18next.t("home:New users past 7 days")} value={data?.userCounts[30] - data?.userCounts[30 - 7]} valueStyle={{fontSize: "30px"}} prefix={<ArrowUpOutlined />} style={{width: "200px", paddingLeft: "10px"}} />
</Card>
</Col>
<Col span={50}>
<Card bordered={false} bodyStyle={{width: "100%", height: "150px", display: "flex", alignItems: "center", justifyContent: "center"}}>
<Statistic title={i18next.t("home:New users past 30 days")} value={data?.userCounts[30] - data?.userCounts[30 - 30]} valueStyle={{fontSize: "30px"}} prefix={<ArrowUpOutlined />} style={{width: "200px", paddingLeft: "10px"}} />
</Card>
</Col>
</Row>
);
}
}
render() {
return (
<div>
<div style={{display: "flex", justifyContent: "center", flexDirection: "column", alignItems: "center"}}>
<Row style={{width: "100%"}}>
<Col span={24} style={{display: "flex", justifyContent: "center"}} >
{
@ -121,6 +196,8 @@ class HomePage extends React.Component {
}
</Col>
</Row>
<div id="echarts-chart"
style={{width: "80%", height: "400px", textAlign: "center", marginTop: "20px"}}></div>
</div>
);
}