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

QQQ-38 Update to load widgets & table counts from backend

Browse Source
This commit is contained in:
darin.kelkhoff
2022-08-22 11:13:32 -05:00
parent 246c722381
commit 9a00d297db
2 changed files with 191 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -226,7 +226,7 @@ export default function App()
name: `${app.label}`, name: `${app.label}`,
key: app.name, key: app.name,
route: path, route: path,
component: <AppHome app={app} />, component: <AppHome app={metaData.apps.get(app.name)} />,
}); });
} }
else if (app.type === QAppNodeType.TABLE) else if (app.type === QAppNodeType.TABLE)

166
src/qqq/pages/app-home/index.tsx
View File

@ -33,8 +33,6 @@ import MiniStatisticsCard from "examples/Cards/StatisticsCards/MiniStatisticsCar
import {Icon} from "@mui/material"; import {Icon} from "@mui/material";
import MDTypography from "components/MDTypography"; import MDTypography from "components/MDTypography";
import Card from "@mui/material/Card"; import Card from "@mui/material/Card";
import ComplexStatisticsCard from "examples/Cards/StatisticsCards/ComplexStatisticsCard";
import ReportsLineChart from "examples/Charts/LineCharts/ReportsLineChart";
import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart"; import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart";
import MDBadgeDot from "components/MDBadgeDot"; import MDBadgeDot from "components/MDBadgeDot";
import ReportsBarChart from "examples/Charts/BarCharts/ReportsBarChart"; import ReportsBarChart from "examples/Charts/BarCharts/ReportsBarChart";
@ -57,6 +55,9 @@ function AppHome({app}: Props): JSX.Element
const [tables, setTables] = useState([] as QTableMetaData[]); const [tables, setTables] = useState([] as QTableMetaData[]);
const [processes, setProcesses] = useState([] as QProcessMetaData[]); const [processes, setProcesses] = useState([] as QProcessMetaData[]);
const [childApps, setChildApps] = useState([] as QAppMetaData[]); const [childApps, setChildApps] = useState([] as QAppMetaData[]);
const [tableCounts, setTableCounts] = useState(new Map<string, { isLoading: boolean, value: number}>());
const [updatedTableCounts, setUpdatedTableCounts] = useState(new Date());
const [widgets, setWidgets] = useState([] as any[]);
const location = useLocation(); const location = useLocation();
@ -102,80 +103,128 @@ function AppHome({app}: Props): JSX.Element
setTables(newTables); setTables(newTables);
setProcesses(newProcesses); setProcesses(newProcesses);
setChildApps(newChildApps); setChildApps(newChildApps);
const tableCounts = new Map<string, { isLoading: boolean, value: number}>();
newTables.forEach((table) =>
{
tableCounts.set(table.name, {isLoading: true, value: null});
setTimeout(async () =>
{
const count = await qController.count(table.name);
tableCounts.set(table.name, {isLoading: false, value: count});
setTableCounts(tableCounts);
setUpdatedTableCounts(new Date());
}, 1);
});
setTableCounts(tableCounts);
console.log(app.widgets);
if (app.widgets)
{
const widgets: any[] = [];
for (let i = 0; i < app.widgets.length; i++)
{
widgets[i] = {};
setTimeout(async () =>
{
const widget = await qController.widget(app.widgets[i]);
widgets[i] = widget;
setUpdatedTableCounts(new Date());
}, 1);
}
setWidgets(widgets);
}
}, [qInstance, location]); }, [qInstance, location]);
const reportsBarChartData = { /*
labels: ["M", "T", "W", "T", "F", "S", "S"], const charts = [
datasets: {label: "Sales", data: [50, 20, 10, 22, 50, 10, 40]}, {
}; type: "barChart",
title: "Parcel Invoice Lines per Month",
interface Types { barChartData: {
labels: string[]; labels: ["Feb 22", "Mar 22", "Apr 22", "May 22", "Jun 22", "Jul 22", "Aug 22"],
datasets: { datasets: {label: "Parcel Invoice Lines", data: [50000, 22000, 11111, 22333, 40404, 9876, 2355]},
label: string; },
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; },
data: number[]; {
}[]; type: "lineChart",
} title: "Total Charges by Carrier per Month",
lineChartData: {
const demoLineChartData: Types = { labels: ["Feb 22", "Mar 22", "Apr 22", "May 22", "Jun 22", "Jul 22", "Aug 22"],
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [ datasets: [
{ {label: "UPS", color: "info", data: [50000, 22000, 11111, 22333, 40404, 9876, 2355]},
label: "Facebook Ads", {label: "FedEx", color: "dark", data: [5000, 22000, 31111, 32333, 20404, 19876, 24355]},
color: "info", {label: "LSO", color: "error", data: [500, 2200, 1111, 2333, 404, 17876, 2355]},
data: [50, 100, 200, 190, 400, 350, 500, 450, 700],
},
{
label: "Google Ads",
color: "dark",
data: [10, 30, 40, 120, 150, 220, 280, 250, 280],
},
], ],
}; },
},
];
*/
console.log(`Widgets: ${widgets} and tables: ${tables}`);
const haveWidgets = widgets && widgets.length;
const widgetCount = widgets ? widgets.length : 0;
// eslint-disable-next-line no-nested-ternary
const tileSizeLg = (widgetCount === 0 ? 3 : widgetCount === 1 ? 4 : 6);
return ( return (
<BaseLayout> <BaseLayout>
<MDBox mt={4}> <MDBox mt={4}>
<Grid container spacing={3}> <Grid container spacing={3}>
{
<Grid item xs={6} lg={6}> widgetCount > 0 ? (
<Grid item xs={12} lg={widgetCount === 1 ? 3 : 6}>
<Grid container spacing={3}> <Grid container spacing={3}>
{
<Grid item xs={6} lg={6}> widgets.map((chart) => (
<MDBox mb={3}> <Grid key={`${chart.type}-${chart.title}`} item xs={12} lg={widgetCount === 1 ? 12 : 6}>
<MDBox mb={3}> <MDBox mb={3}>
{
chart.type === "barChart" && (
<ReportsBarChart <ReportsBarChart
color="info" color="info"
title="Packages Shipped" title={chart.title}
description="Total outbound shipments" date={`As of ${new Date().toDateString()}`}
date="Updated at 7:04 a.m. ET" chart={chart.barChartData}
chart={reportsBarChartData}
/> />
</MDBox> )
</MDBox> }
</Grid> {
chart.type === "lineChart" && (
<Grid item xs={6} lg={6}>
<DefaultLineChart <DefaultLineChart
title="Revenue" title={chart.title}
description={( description={(
<MDBox display="flex" justifyContent="space-between"> <MDBox display="flex" justifyContent="space-between">
<MDBox display="flex" ml={-1}> <MDBox display="flex" ml={-1}>
<MDBadgeDot color="info" size="sm" badgeContent="UPS" /> {
<MDBadgeDot color="dark" size="sm" badgeContent="FedEx" /> chart.lineChartData.datasets.map((dataSet: any) => (
<MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
))
}
</MDBox> </MDBox>
<MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" /> <MDBox mt={-4} mr={-1} position="absolute" right="1.5rem" />
</MDBox> </MDBox>
)} )}
chart={demoLineChartData} chart={chart.lineChartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
/> />
)
}
</MDBox>
</Grid> </Grid>
))
}
</Grid>
</Grid>
) : null
}
</Grid> {
</Grid> tables.length > 0 || processes.length > 0 || childApps.length > 0 ? (
// eslint-disable-next-line no-nested-ternary
<Grid item xs={6} lg={6}> <Grid item xs={12} lg={widgetCount === 0 ? 12 : widgetCount === 1 ? 9 : 6}>
{ {
tables.length ? ( tables.length ? (
<MDBox mb={3}> <MDBox mb={3}>
@ -185,13 +234,13 @@ function AppHome({app}: Props): JSX.Element
</MDBox> </MDBox>
<Grid container spacing={3} padding={3} paddingTop={0}> <Grid container spacing={3} padding={3} paddingTop={0}>
{tables.map((table) => ( {tables.map((table) => (
<Grid key={table.name} item xs={12} md={12} lg={6}> <Grid key={table.name} item xs={12} md={12} lg={tileSizeLg}>
<Link to={table.name}> <Link to={table.name}>
<MDBox mb={3}> <MDBox mb={3}>
<MiniStatisticsCard <MiniStatisticsCard
title={{fontWeight: "bold", text: table.label}} title={{fontWeight: "bold", text: table.label}}
count="17,013" count={!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "..." : tableCounts.get(table.name).value.toLocaleString()}
percentage={{color: "info", text: "total records"}} percentage={{color: "info", text: (!tableCounts.has(table.name) || tableCounts.get(table.name).isLoading ? "" : "total records")}}
icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}} icon={{color: "info", component: <Icon>{table.iconName || app.iconName}</Icon>}}
direction="right" direction="right"
/> />
@ -214,7 +263,7 @@ function AppHome({app}: Props): JSX.Element
</MDBox> </MDBox>
<Grid container spacing={3} padding={3} paddingTop={3}> <Grid container spacing={3} padding={3} paddingTop={3}>
{processes.map((process) => ( {processes.map((process) => (
<Grid key={process.name} item xs={12} md={12} lg={6}> <Grid key={process.name} item xs={12} md={12} lg={tileSizeLg}>
<Link to={process.name}> <Link to={process.name}>
<ProcessLinkCard <ProcessLinkCard
icon={process.iconName || app.iconName} icon={process.iconName || app.iconName}
@ -233,9 +282,12 @@ function AppHome({app}: Props): JSX.Element
childApps.length ? ( childApps.length ? (
<MDBox mb={3}> <MDBox mb={3}>
<Card id="basic-info" sx={{overflow: "visible"}}> <Card id="basic-info" sx={{overflow: "visible"}}>
<MDBox p={3}>
<MDTypography variant="h5">Apps</MDTypography>
</MDBox>
<Grid container spacing={3} padding={3} paddingTop={3}> <Grid container spacing={3} padding={3} paddingTop={3}>
{childApps.map((childApp) => ( {childApps.map((childApp) => (
<Grid key={childApp.name} item xs={12} md={12} lg={6}> <Grid key={childApp.name} item xs={12} md={12} lg={tileSizeLg}>
<Link to={childApp.name}> <Link to={childApp.name}>
<DefaultInfoCard <DefaultInfoCard
icon={childApp.iconName || app.iconName} icon={childApp.iconName || app.iconName}
@ -250,6 +302,8 @@ function AppHome({app}: Props): JSX.Element
) : null ) : null
} }
</Grid> </Grid>
) : null
}
</Grid> </Grid>
</MDBox> </MDBox>