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

QQQ-41: added app sections, wired all dashboards, implemented widgets that could be, upped version

Browse Source
This commit is contained in:
Tim Chamberlain
2022-09-16 10:27:50 -05:00
parent b3f32572dc
commit f1300d2db9
49 changed files with 33588 additions and 32045 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/qqq/pages/dashboards/Widgets/StatisticsCard.tsx
View File

@ -26,22 +26,67 @@ import {ReactNode} from "react";
import MDBox from "qqq/components/Temporary/MDBox";
import MDTypography from "qqq/components/Temporary/MDTypography";
// Declaring props types for CompleStatisticsCard
interface Props {
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
title: string;
count: string | number;
percentage?: {
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white";
amount: string | number;
label: string;
};
icon: ReactNode;
[key: string]: any;
///////////////////////////////////////////
// structure of expected stats card data //
///////////////////////////////////////////
export interface StatisticsCardData
{
title: string;
count: number;
percentageAmount: number;
percentageLabel: string;
}
function StatisticsCard({color, title, count, percentage, icon}: Props): JSX.Element
/////////////////////////
// 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>
<MDBox display="flex" justifyContent="space-between" pt={1} px={2}>
@ -66,34 +111,34 @@ function StatisticsCard({color, title, count, percentage, icon}: Props): JSX.Ele
<MDTypography variant="button" fontWeight="light" color="text">
{title}
</MDTypography>
<MDTypography variant="h4">{count}</MDTypography>
{
count !== undefined ? (
<MDTypography variant="h4">{count.toLocaleString()}</MDTypography>
) : null
}
</MDBox>
</MDBox>
<Divider />
<MDBox pb={2} px={2}>
<MDTypography component="p" variant="button" color="text" display="flex">
<MDTypography
component="span"
variant="button"
fontWeight="bold"
color={percentage.color}
>
{percentage.amount}
</MDTypography>
&nbsp;{percentage.label}
</MDTypography>
</MDBox>
{
percentageAmount !== undefined && percentageAmount !== 0 ? (
<MDBox pb={2} px={2}>
<MDTypography component="p" variant="button" color="text" display="flex">
<MDTypography
component="span"
variant="button"
fontWeight="bold"
color={percentColor}
>
{percentageString}
</MDTypography>
&nbsp;{percentageLabel}
</MDTypography>
</MDBox>
) : null
}
</Card>
);
}
StatisticsCard.defaultProps = {
color: "info",
percentage: {
color: "success",
text: "",
label: "",
},
};
export default StatisticsCard;