mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-19 05:40:44 +00:00
SPRINT-20: several widget updates, saved filters updates, updates unified widget/view/edit record screen section/widget headers
This commit is contained in:
Tim Chamberlain
@ -70,7 +70,7 @@ function MultiStatisticsCard({title, data}: Props): JSX.Element
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<Box pt={3} px={3}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
<MDTypography variant="h6" fontWeight="medium">
|
||||
{title}
|
||||
</MDTypography>
|
||||
</Box>
|
||||
@ -105,7 +105,13 @@ function MultiStatisticsCard({title, data}: Props): JSX.Element
|
||||
statisticsGroup.statisticList.map((stat, i2) =>
|
||||
<Box key={`stat-${i1}-${i2}`}>
|
||||
<MDTypography variant="subtitle2">
|
||||
{stat.label}: <NavLink to={stat.url}>{stat.value.toLocaleString()}</NavLink>
|
||||
{
|
||||
stat && stat.url ? (
|
||||
<Box>{stat.label}: <NavLink to={stat?.url}>{stat.value.toLocaleString()}</NavLink></Box>
|
||||
):(
|
||||
<Box>{stat.label}: {stat.value.toLocaleString()}</Box>
|
||||
)
|
||||
}
|
||||
</MDTypography>
|
||||
</Box>
|
||||
)
|
||||
|
||||
@ -1,149 +0,0 @@
|
||||
/*
|
||||
* 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;
|
||||
@ -22,7 +22,7 @@
|
||||
import {CircularProgress, Typography} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import React, {ReactNode} from "react";
|
||||
import React from "react";
|
||||
import {NavLink} from "react-router-dom";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
|
||||
@ -44,15 +44,7 @@ export interface StatisticsCardData
|
||||
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;
|
||||
}
|
||||
|
||||
@ -61,7 +53,7 @@ StatisticsCard.defaultProps = {
|
||||
increaseIsGood: true
|
||||
};
|
||||
|
||||
function StatisticsCard({data, color, icon, increaseIsGood}: Props): JSX.Element
|
||||
function StatisticsCard({data, increaseIsGood}: Props): JSX.Element
|
||||
{
|
||||
const {count, percentageAmount, percentageLabel} = data;
|
||||
|
||||
@ -94,7 +86,7 @@ function StatisticsCard({data, color, icon, increaseIsGood}: Props): JSX.Element
|
||||
<Box mt={0} display="flex" justifyContent="center">
|
||||
{
|
||||
count !== undefined ? (
|
||||
<Typography mt={0} sx={{color: "#344767", display: "flex", alignContent: "flex-end", fontSize: data?.countFontSize ? data?.countFontSize : "40px"}}>
|
||||
<Typography pb={1} mt={0} sx={{color: "#344767", display: "flex", alignContent: "flex-end", fontSize: data?.countFontSize ? data?.countFontSize : "30px"}}>
|
||||
{
|
||||
data.countURL ? (
|
||||
<NavLink to={data.countURL}>{count.toLocaleString()}</NavLink>
|
||||
|
||||
Reference in New Issue
Block a user