mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-19 05:40:44 +00:00
SPRINT-18: fixed to dashboards, removed and moved around all the things
This commit is contained in:
Tim Chamberlain
158
src/qqq/components/widgets/statistics/MiniStatisticsCard.tsx
Normal file
158
src/qqq/components/widgets/statistics/MiniStatisticsCard.tsx
Normal file
@ -0,0 +1,158 @@
|
||||
/*
|
||||
* 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 Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import {ReactNode} from "react";
|
||||
import {useMaterialUIController} from "qqq/context";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
|
||||
|
||||
// Decalaring props types for MiniStatisticsCard
|
||||
interface Props {
|
||||
bgColor?: "white" | "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
title?: {
|
||||
fontWeight?: "light" | "regular" | "medium" | "bold";
|
||||
text?: string;
|
||||
};
|
||||
count: string | number;
|
||||
percentage?: {
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white";
|
||||
text: string | number;
|
||||
};
|
||||
icon: {
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
component: ReactNode;
|
||||
};
|
||||
direction?: "right" | "left";
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function MiniStatisticsCard({
|
||||
bgColor,
|
||||
title,
|
||||
count,
|
||||
percentage,
|
||||
icon,
|
||||
direction,
|
||||
}: Props): JSX.Element
|
||||
{
|
||||
const [controller] = useMaterialUIController();
|
||||
const {darkMode} = controller;
|
||||
|
||||
return (
|
||||
<Card sx={{overflow: "hidden"}}>
|
||||
<Box
|
||||
sx={({palette: {background}}: { palette: any }) => ({
|
||||
background: darkMode && background.card,
|
||||
backgroundColor: bgColor
|
||||
})}
|
||||
>
|
||||
<Box p={2}>
|
||||
<Grid container alignItems="center">
|
||||
{direction === "left" ? (
|
||||
<Grid item xs={4}>
|
||||
<Box
|
||||
color={bgColor === "white" ? "white" : "dark"}
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
borderRadius="md"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
sx={{backgroundColor: bgColor === "white" ? icon.color : "white"}}
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">
|
||||
{icon.component}
|
||||
</Icon>
|
||||
</Box>
|
||||
</Grid>
|
||||
) : null}
|
||||
<Grid item xs={8}>
|
||||
<Box
|
||||
ml={direction === "left" ? 2 : 0}
|
||||
lineHeight={1}
|
||||
textAlign={direction === "left" ? "right" : "left"}
|
||||
>
|
||||
<MDTypography
|
||||
variant="button"
|
||||
color={bgColor === "white" ? "text" : "white"}
|
||||
opacity={bgColor === "white" ? 1 : 0.7}
|
||||
textTransform="capitalize"
|
||||
fontWeight={title.fontWeight}
|
||||
>
|
||||
{title.text}
|
||||
</MDTypography>
|
||||
<MDTypography
|
||||
variant="h5"
|
||||
fontWeight="bold"
|
||||
color={bgColor === "white" ? "dark" : "white"}
|
||||
>
|
||||
{count}{" "}
|
||||
<MDTypography variant="button" color={percentage.color} fontWeight="bold">
|
||||
{percentage.text}
|
||||
</MDTypography>
|
||||
</MDTypography>
|
||||
</Box>
|
||||
</Grid>
|
||||
{direction === "right" ? (
|
||||
<Grid item xs={4}>
|
||||
<Box
|
||||
color={bgColor === "white" ? "white" : "dark"}
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
marginLeft="auto"
|
||||
borderRadius="md"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
sx={{backgroundColor: bgColor === "white" ? icon.color : "white"}}
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">
|
||||
{icon.component}
|
||||
</Icon>
|
||||
</Box>
|
||||
</Grid>
|
||||
) : null}
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for MiniStatisticsCard
|
||||
MiniStatisticsCard.defaultProps = {
|
||||
bgColor: "white",
|
||||
title: {
|
||||
fontWeight: "light",
|
||||
text: "",
|
||||
},
|
||||
percentage: {
|
||||
color: "success",
|
||||
text: "",
|
||||
},
|
||||
direction: "right",
|
||||
};
|
||||
|
||||
export default MiniStatisticsCard;
|
||||
153
src/qqq/components/widgets/statistics/MultiStatisticsCard.tsx
Normal file
153
src/qqq/components/widgets/statistics/MultiStatisticsCard.tsx
Normal file
@ -0,0 +1,153 @@
|
||||
/*
|
||||
* 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 {Skeleton} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
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 MDTypography from "qqq/components/legacy/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 sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<Box pt={3} px={3}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
{title}
|
||||
</MDTypography>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid container>
|
||||
{
|
||||
data && data.statisticsGroupData ? (
|
||||
data.statisticsGroupData.map((statisticsGroup, i1) =>
|
||||
<Grid key={`statgroup-${i1}`} item xs={3} lg={3} sx={{textAlign: "center"}}>
|
||||
<Box p={3} pt={3} sx={{alignItems: "center"}}>
|
||||
{
|
||||
statisticsGroup.icon && (
|
||||
<Box>
|
||||
<MDTypography variant="h6">
|
||||
<Icon sx={{fontSize: "30px", margin: "5px", color: statisticsGroup.iconColor}} fontSize="medium">{statisticsGroup.icon}</Icon>
|
||||
</MDTypography>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
<Box>
|
||||
<MDTypography variant="h6">
|
||||
{statisticsGroup.header}
|
||||
</MDTypography>
|
||||
<MDTypography variant="subtitle2">
|
||||
{statisticsGroup.subheader}
|
||||
</MDTypography>
|
||||
</Box>
|
||||
<Divider sx={{margin: "10px"}}></Divider>
|
||||
<Box sx={{alignItems: "center"}}>
|
||||
{
|
||||
statisticsGroup.statisticList.map((stat, i2) =>
|
||||
<Box key={`stat-${i1}-${i2}`}>
|
||||
<MDTypography variant="subtitle2">
|
||||
{stat.label}: <NavLink to={stat.url}>{stat.value.toLocaleString()}</NavLink>
|
||||
</MDTypography>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
)
|
||||
) : (
|
||||
Array(4).fill(0).map((_, i) =>
|
||||
<Grid key={`item-${i}`} item xs={3} lg={3} sx={{textAlign: "center"}}>
|
||||
<Box p={3} pt={3} sx={{alignItems: "center"}}>
|
||||
<Box>
|
||||
<MDTypography variant="h6">
|
||||
<Icon sx={{fontSize: "30px", margin: "5px", color: "grey"}} fontSize="medium">pending</Icon>
|
||||
</MDTypography>
|
||||
</Box>
|
||||
<Box>
|
||||
<MDTypography variant="h6">
|
||||
<Skeleton />
|
||||
</MDTypography>
|
||||
<MDTypography variant="subtitle2">
|
||||
<Skeleton />
|
||||
</MDTypography>
|
||||
</Box>
|
||||
<Divider sx={{margin: "10px"}}></Divider>
|
||||
<Box sx={{alignItems: "center"}}>
|
||||
<Box key={`stat-${i}`}>
|
||||
<MDTypography variant="subtitle2">
|
||||
<Skeleton />
|
||||
</MDTypography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
)
|
||||
)
|
||||
}
|
||||
</Grid>
|
||||
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default MultiStatisticsCard;
|
||||
149
src/qqq/components/widgets/statistics/SimpleStatisticsCard.tsx
Normal file
149
src/qqq/components/widgets/statistics/SimpleStatisticsCard.tsx
Normal file
@ -0,0 +1,149 @@
|
||||
/*
|
||||
* 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 Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import {ReactNode} from "react";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
import {StatisticsCardData} from "qqq/components/widgets/statistics/StatisticsCard";
|
||||
|
||||
interface Props
|
||||
{
|
||||
title: string;
|
||||
data: StatisticsCardData;
|
||||
increaseIsGood: boolean;
|
||||
isCurrency?: boolean;
|
||||
dropdown?: {
|
||||
action: (...args: any) => void;
|
||||
menu: ReactNode;
|
||||
value: string;
|
||||
};
|
||||
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function SimpleStatisticsCard({title, data, increaseIsGood, isCurrency, dropdown}: Props): JSX.Element
|
||||
{
|
||||
const {count, percentageAmount, percentageLabel} = data;
|
||||
|
||||
let percentageString = "";
|
||||
if (percentageAmount)
|
||||
{
|
||||
percentageString = percentageAmount.toLocaleString() + "%";
|
||||
if (percentageAmount > 0)
|
||||
{
|
||||
percentageString = "+" + percentageString;
|
||||
}
|
||||
}
|
||||
|
||||
let percentColor: string;
|
||||
if (increaseIsGood)
|
||||
{
|
||||
percentColor = (percentageAmount > 0) ? "success" : "warning";
|
||||
}
|
||||
else
|
||||
{
|
||||
percentColor = (percentageAmount < 0) ? "success" : "warning";
|
||||
}
|
||||
|
||||
return (
|
||||
<Card sx={{height: "fit-content", alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
<Box p={2}>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<Box mb={0.5} lineHeight={1}>
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="medium"
|
||||
color="text"
|
||||
textTransform="capitalize"
|
||||
>
|
||||
{title}
|
||||
</MDTypography>
|
||||
</Box>
|
||||
<Box lineHeight={1}>
|
||||
{
|
||||
count !== undefined ? (
|
||||
isCurrency ? (
|
||||
<MDTypography variant="h5" fontWeight="bold">
|
||||
{count.toLocaleString("en-US", {style: "currency", currency: "USD"})}
|
||||
</MDTypography>
|
||||
) : (
|
||||
|
||||
<MDTypography variant="h5" fontWeight="bold">
|
||||
{count.toLocaleString()}
|
||||
</MDTypography>
|
||||
)
|
||||
) : null
|
||||
}
|
||||
{
|
||||
count !== undefined ? (
|
||||
<MDTypography variant="button" fontWeight="bold" color={percentColor}>
|
||||
{percentageString}
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color={"secondary"}
|
||||
>
|
||||
{percentageLabel}
|
||||
</MDTypography>
|
||||
</MDTypography>
|
||||
):(
|
||||
<MDTypography variant="button" fontWeight="regular">
|
||||
<i>Loading.</i>
|
||||
</MDTypography>
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
</Grid>
|
||||
{dropdown && (
|
||||
<Grid item xs={5}>
|
||||
<Box width="100%" textAlign="right" lineHeight={1}>
|
||||
<MDTypography
|
||||
variant="caption"
|
||||
color="secondary"
|
||||
fontWeight="regular"
|
||||
sx={{cursor: "pointer"}}
|
||||
onClick={dropdown.action}
|
||||
>
|
||||
{dropdown.value}
|
||||
</MDTypography>
|
||||
{dropdown.menu}
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</Box>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
SimpleStatisticsCard.defaultProps = {
|
||||
percentage: {
|
||||
color: "success",
|
||||
value: "",
|
||||
label: "",
|
||||
},
|
||||
dropdown: false,
|
||||
};
|
||||
|
||||
export default SimpleStatisticsCard;
|
||||
143
src/qqq/components/widgets/statistics/StatisticsCard.tsx
Normal file
143
src/qqq/components/widgets/statistics/StatisticsCard.tsx
Normal file
@ -0,0 +1,143 @@
|
||||
/*
|
||||
* 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 Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import {ReactNode} from "react";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
|
||||
///////////////////////////////////////////
|
||||
// structure of expected stats card data //
|
||||
///////////////////////////////////////////
|
||||
export interface StatisticsCardData
|
||||
{
|
||||
title: string;
|
||||
count: number;
|
||||
percentageAmount: number;
|
||||
percentageLabel: string;
|
||||
}
|
||||
|
||||
/////////////////////////
|
||||
// inputs and defaults //
|
||||
/////////////////////////
|
||||
interface Props
|
||||
{
|
||||
data: StatisticsCardData;
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
icon: ReactNode;
|
||||
increaseIsGood: boolean;
|
||||
dropdown?: {
|
||||
action: (...args: any) => void;
|
||||
menu: ReactNode;
|
||||
value: string;
|
||||
};
|
||||
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
StatisticsCard.defaultProps = {
|
||||
color: "info",
|
||||
increaseIsGood: true
|
||||
};
|
||||
|
||||
function StatisticsCard({data, color, icon, increaseIsGood}: Props): JSX.Element
|
||||
{
|
||||
const {title, count, percentageAmount, percentageLabel} = data;
|
||||
|
||||
let percentageString = "";
|
||||
if (percentageAmount)
|
||||
{
|
||||
percentageString = percentageAmount.toLocaleString() + "%";
|
||||
if (percentageAmount > 0)
|
||||
{
|
||||
percentageString = "+" + percentageString;
|
||||
}
|
||||
}
|
||||
|
||||
let percentColor = "dark";
|
||||
if (percentageAmount !== 0)
|
||||
{
|
||||
if (increaseIsGood)
|
||||
{
|
||||
percentColor = (percentageAmount > 0) ? "success" : "warning";
|
||||
}
|
||||
else
|
||||
{
|
||||
percentColor = (percentageAmount < 0) ? "success" : "warning";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
<Card sx={{height: "100%", alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: 3, paddingTop: "0px"}}>
|
||||
<Box display="flex" justifyContent="space-between" pt={1} px={2}>
|
||||
<Box
|
||||
color="#ffffff"
|
||||
borderRadius="xl"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
mt={-3}
|
||||
sx={{borderRadius: "10px", backgroundColor: color}}
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">
|
||||
{icon}
|
||||
</Icon>
|
||||
</Box>
|
||||
<Box textAlign="right" lineHeight={1.25}>
|
||||
<MDTypography variant="button" fontWeight="light" color="text">
|
||||
{title}
|
||||
</MDTypography>
|
||||
{
|
||||
count !== undefined ? (
|
||||
<MDTypography variant="h4">{count.toLocaleString()}</MDTypography>
|
||||
) : null
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
{
|
||||
percentageAmount !== undefined && percentageAmount !== 0 ? (
|
||||
<Box px={2}>
|
||||
<Divider />
|
||||
<MDTypography component="p" variant="button" color="text" display="flex">
|
||||
<MDTypography
|
||||
component="span"
|
||||
variant="button"
|
||||
fontWeight="bold"
|
||||
color={percentColor}
|
||||
>
|
||||
{percentageString}
|
||||
</MDTypography>
|
||||
{percentageLabel}
|
||||
</MDTypography>
|
||||
</Box>
|
||||
) : null
|
||||
}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
export default StatisticsCard;
|
||||
Reference in New Issue
Block a user