QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 13:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

SPRINT-12: added 'multi statitistics' widget

Browse Source
This commit is contained in:
Tim Chamberlain
2022-09-27 14:16:26 -05:00
parent 3e97c156a8
commit 1a0d8d9f3b
15 changed files with 172 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/qqq/pages/dashboards/Widgets/LocationCard.tsx
View File

@ -27,9 +27,9 @@ import {ReactNode} from "react";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
//////////////////////////////////////////
/////////////////////////////////////
// structure of location card data //
//////////////////////////////////////////
/////////////////////////////////////
export interface LocationCardData
{
imageUrl: string;

123
src/qqq/pages/dashboards/Widgets/MultiStatisticsCard.tsx Normal file
View File

@ -0,0 +1,123 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2022. Kingsrook, LLC
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
* contact@kingsrook.com
* https://github.com/Kingsrook/
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import Card from "@mui/material/Card";
import Divider from "@mui/material/Divider";
import Grid from "@mui/material/Grid";
import Icon from "@mui/material/Icon";
import React from "react";
import {NavLink} from "react-router-dom";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
/////////////////////////////////////
// structure of location card data //
/////////////////////////////////////
export interface MultiStatisticsCardData
{
imageUrl: string;
title: string;
statisticsGroupData: {
icon: string;
iconColor: string;
header: string;
subheader: string;
statisticList: {
label: string;
value: number;
url?: string;
}[]
}[];
}
/////////////////////////
// inputs and defaults //
/////////////////////////
interface Props
{
title: string;
data: MultiStatisticsCardData;
[key: string]: any;
}
function MultiStatisticsCard({title, data}: Props): JSX.Element
{
return (
<Card>
<Grid container>
<Grid item xs={12}>
<MDBox pt={3} px={3}>
<MDTypography variant="h5" fontWeight="medium">
{title}
</MDTypography>
</MDBox>
</Grid>
</Grid>
<Grid container>
{
data && data.statisticsGroupData && (
data.statisticsGroupData.map((statisticsGroup, i1) =>
<Grid key={`statgroup-${i1}`} item xs={3} lg={3} sx={{textAlign: "center"}}>
<MDBox p={3} pt={3} sx={{alignItems: "center"}}>
{
statisticsGroup.icon && (
<MDBox>
<MDTypography variant="h6">
<Icon sx={{fontSize: "30px", margin: "5px", color: statisticsGroup.iconColor}} fontSize="medium">{statisticsGroup.icon}</Icon>
</MDTypography>
</MDBox>
)
}
<MDBox>
<MDTypography variant="h6">
{statisticsGroup.header}
</MDTypography>
<MDTypography variant="subtitle2">
{statisticsGroup.subheader}
</MDTypography>
</MDBox>
<Divider sx={{margin: "10px"}}></Divider>
<MDBox sx={{alignItems: "center"}}>
{
statisticsGroup.statisticList.map((stat, i2) =>
<MDBox key={`stat-${i1}-${i2}`}>
<MDTypography variant="subtitle2">
{stat.label}: <NavLink to={stat.url}>{stat.value.toLocaleString()}</NavLink>
</MDTypography>
</MDBox>
)
}
</MDBox>
</MDBox>
</Grid>
)
)
}
</Grid>
</Card>
);
}
export default MultiStatisticsCard;

37
src/qqq/pages/dashboards/Widgets/TableCard.tsx
View File

@ -24,6 +24,7 @@ import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import parse from "html-react-parser";
import React, {useEffect, useState} from "react";
import DataTable, {TableDataInput} from "qqq/components/Temporary/DataTable";
import MDBox from "qqq/components/Temporary/MDBox";
@ -36,6 +37,7 @@ import MDTypography from "qqq/components/Temporary/MDTypography";
interface Props
{
title: string;
noRowsFoundHTML?: string;
data: TableDataInput;
dropdownOptions?: {
id: string,
@ -47,7 +49,7 @@ interface Props
[key: string]: any;
}
function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}: Props): JSX.Element
function TableCard({title, noRowsFoundHTML, data, dropdownOptions, dropdownOnChange, widgetIndex}: Props): JSX.Element
{
const openArrowIcon = "arrow_drop_down";
const closeArrowIcon = "arrow_drop_up";
@ -102,7 +104,6 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
}
}, [dropdownOptions]);
return (
<Card>
<Grid container>
@ -139,13 +140,31 @@ function TableCard({title, data, dropdownOptions, dropdownOnChange, widgetIndex}
</Grid>
</Grid>
<MDBox py={1}>
<DataTable
table={data}
entriesPerPage={false}
showTotalEntries={false}
isSorted={false}
noEndBorder
/>
{
data && data.rows ? (
<DataTable
table={data}
entriesPerPage={false}
showTotalEntries={false}
isSorted={false}
noEndBorder
/>
)
:
<MDBox p={3} pt={1} pb={1} sx={{textAlign: "center"}}>
<MDTypography
variant="subtitle2"
color="secondary"
fontWeight="regular"
>
{
noRowsFoundHTML ? (
parse(noRowsFoundHTML)
) : "No rows found"
}
</MDTypography>
</MDBox>
}
</MDBox>
</Card>
);