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

Merge branch 'feature/QQQ-38-app-home-widgets' into feature/sprint-10

Browse Source
This commit is contained in:
darin.kelkhoff
2022-08-31 16:09:34 -05:00
parent 3eb1cd73a7 b8cc274af4
commit 3e3951cf8b
38 changed files with 1021 additions and 509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/qqq/components/BaseLayout/index.tsx
View File

@ -20,14 +20,10 @@
*/
import {useState, useEffect, ReactNode} from "react";
// Material Dashboard 2 PRO React TS Base Styles
import breakpoints from "assets/theme/base/breakpoints";
// Material Dashboard 2 PRO React TS examples components
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import Navbar from "qqq/components/Navbar";
import Footer from "qqq/components/Footer";
import Navbar from "qqq/components/Navbar";
import MDBox from "../../../components/MDBox";
// Declaring props types for BaseLayout

2
src/qqq/components/Buttons/AuthenticationButton/index.tsx
View File

@ -20,8 +20,8 @@
*/
import {useAuth0} from "@auth0/auth0-react";
import React from "react";
import {Button} from "@mui/material";
import React from "react";
function AuthenticationButton()
{

58
src/qqq/components/EntityForm/index.tsx
View File

@ -1,36 +1,46 @@
// react components
import {useParams, useNavigate, useLocation} from "react-router-dom";
import React, {useReducer, useState} from "react";
/*
* 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/>.
*/
// misc components
import * as Yup from "yup";
import {
Form, Formik, useFormik, useFormikContext,
} from "formik";
// qqq components
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
import QDynamicForm from "qqq/components/QDynamicForm";
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
// @material-ui core components
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import {Alert} from "@mui/material";
import Avatar from "@mui/material/Avatar";
import Card from "@mui/material/Card";
import Grid from "@mui/material/Grid";
import {Alert} from "@mui/material";
// Material Dashboard 2 PRO React TS components
import Icon from "@mui/material/Icon";
import {Form, Formik} from "formik";
import React, {useReducer, useState} from "react";
import {useParams, useNavigate, useLocation} from "react-router-dom";
import * as Yup from "yup";
import colors from "assets/theme/base/colors";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import QClient from "qqq/utils/QClient";
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
import {QCancelButton, QSaveButton} from "qqq/components/QButtons";
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
import Avatar from "@mui/material/Avatar";
import Icon from "@mui/material/Icon";
import QDynamicForm from "qqq/components/QDynamicForm";
import DynamicFormUtils from "qqq/components/QDynamicForm/utils/DynamicFormUtils";
import QRecordSidebar from "qqq/components/QRecordSidebar";
import QClient from "qqq/utils/QClient";
import QTableUtils from "qqq/utils/QTableUtils";
import colors from "assets/theme/base/colors";
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
interface Props
{

33
src/qqq/components/Footer/index.tsx
View File

@ -19,28 +19,25 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// @mui material components
import Link from "@mui/material/Link";
import Icon from "@mui/material/Icon";
// Material Dashboard 2 PRO React TS components
import typography from "assets/theme/base/typography";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
// Material Dashboard 2 PRO React TS Base Styles
import typography from "assets/theme/base/typography";
// Declaring props types for Footer
interface Props {
company?: {
href: string;
name: string;
};
links?: {
href: string;
name: string;
}[];
[key: string]: any;
interface Props
{
company?: {
href: string;
name: string;
};
links?: {
href: string;
name: string;
}[];
[key: string]: any;
}
function Footer({company, links}: Props): JSX.Element
@ -85,9 +82,9 @@ function Footer({company, links}: Props): JSX.Element
,
<Link href={href} target="_blank">
<MDTypography variant="button" fontWeight="medium">
&nbsp;
&nbsp;
{name}
&nbsp;
&nbsp;
</MDTypography>
</Link>
</MDBox>

40
src/qqq/components/Navbar/index.tsx
View File

@ -19,45 +19,19 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {useState, useEffect} from "react";
// react-router components
import {useLocation} from "react-router-dom";
// @material-ui core components
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Icon from "@mui/material/Icon";
import IconButton from "@mui/material/IconButton";
import Menu from "@mui/material/Menu";
import Icon from "@mui/material/Icon";
// Material Dashboard 2 PRO React TS components
import Toolbar from "@mui/material/Toolbar";
import {useState, useEffect} from "react";
import {useLocation} from "react-router-dom";
import MDBadge from "components/MDBadge";
import MDBox from "components/MDBox";
import MDInput from "components/MDInput";
import MDBadge from "components/MDBadge";
// Material Dashboard 2 PRO React TS examples components
import {useMaterialUIController, setTransparentNavbar, setMiniSidenav, setOpenConfigurator,} from "context";
import NotificationItem from "examples/Items/NotificationItem";
// Custom styles for Navbar
import {
navbar,
navbarContainer,
navbarRow,
navbarIconButton,
navbarDesktopMenu,
navbarMobileMenu,
} from "qqq/components/Navbar/styles";
// Material Dashboard 2 PRO React context
import {
useMaterialUIController,
setTransparentNavbar,
setMiniSidenav,
setOpenConfigurator,
} from "context";
// qqq
import {navbar, navbarContainer, navbarRow, navbarIconButton, navbarDesktopMenu, navbarMobileMenu,} from "qqq/components/Navbar/styles";
import QBreadcrumbs, {routeToLabel} from "qqq/components/QBreadcrumbs";
// Declaring prop types for Navbar

1
src/qqq/components/Navbar/styles.ts
View File

@ -19,7 +19,6 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// @mui material components
import {Theme} from "@mui/material/styles";
function navbar(theme: Theme | any, ownerState: any)

5
src/qqq/components/ProcessLinkCard/index.tsx
View File

@ -18,14 +18,11 @@
* 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 {ReactNode} from "react";
// @mui material components
import Card from "@mui/material/Card";
import Divider from "@mui/material/Divider";
import Icon from "@mui/material/Icon";
// Material Dashboard 2 PRO React TS components
import {ReactNode} from "react";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";

5
src/qqq/components/QBreadcrumbs/index.tsx
View File

@ -19,11 +19,10 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {ReactNode} from "react";
import {Link} from "react-router-dom";
import {Breadcrumbs as MuiBreadcrumbs} from "@mui/material";
import Icon from "@mui/material/Icon";
import {ReactNode} from "react";
import {Link} from "react-router-dom";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";

7
src/qqq/components/QButtons/index.tsx
View File

@ -19,12 +19,11 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import MDBox from "components/MDBox";
import {Link} from "react-router-dom";
import MDButton from "components/MDButton";
import Icon from "@mui/material/Icon";
import React from "react";
import EntityForm from "qqq/components/EntityForm";
import {Link} from "react-router-dom";
import MDBox from "components/MDBox";
import MDButton from "components/MDButton";
// eslint-disable import/prefer-default-export

115
src/qqq/components/QDynamicForm/index.tsx
View File

@ -19,23 +19,19 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// @mui material components
import Grid from "@mui/material/Grid";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
// NewUser page components
import {useFormikContext} from "formik";
import React from "react";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import QDynamicFormField from "qqq/components/QDynamicFormField";
interface Props {
formLabel?: string;
formData: any;
bulkEditMode?: boolean;
bulkEditSwitchChangeHandler?: any
interface Props
{
formLabel?: string;
formData: any;
bulkEditMode?: boolean;
bulkEditSwitchChangeHandler?: any;
}
function QDynamicForm(props: Props): JSX.Element
@ -72,55 +68,55 @@ function QDynamicForm(props: Props): JSX.Element
<MDBox mt={1.625}>
<Grid container spacing={3}>
{formFields
&& Object.keys(formFields).length > 0
&& Object.keys(formFields).map((fieldName: any) =>
{
const field = formFields[fieldName];
if (values[fieldName] === undefined)
{
values[fieldName] = "";
}
&& Object.keys(formFields).length > 0
&& Object.keys(formFields).map((fieldName: any) =>
{
const field = formFields[fieldName];
if (values[fieldName] === undefined)
{
values[fieldName] = "";
}
if (field.type === "file")
{
return (
<Grid item xs={12} sm={6} key={fieldName}>
<MDBox mb={1.5}>
<input
id={fieldName}
if (field.type === "file")
{
return (
<Grid item xs={12} sm={6} key={fieldName}>
<MDBox mb={1.5}>
<input
id={fieldName}
name={fieldName}
type="file"
onChange={(event: React.FormEvent<HTMLInputElement>) => fileChanged(event, field)}
/>
<MDBox mt={0.75}>
<MDTypography component="div" variant="caption" color="error" fontWeight="regular">
{errors[fieldName] && <span>You must select a file to proceed</span>}
</MDTypography>
</MDBox>
</MDBox>
</Grid>
);
}
// todo? inputProps={{ autoComplete: "" }}
// todo? placeholder={password.placeholder}
return (
<Grid item xs={12} sm={6} key={fieldName}>
<QDynamicFormField
type={field.type}
label={field.label}
isEditable={field.isEditable}
name={fieldName}
type="file"
onChange={(event: React.FormEvent<HTMLInputElement>) => fileChanged(event, field)}
displayFormat={field.displayFormat}
value={values[fieldName]}
error={errors[fieldName] && touched[fieldName]}
bulkEditMode={bulkEditMode}
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
/>
<MDBox mt={0.75}>
<MDTypography component="div" variant="caption" color="error" fontWeight="regular">
{errors[fieldName] && <span>You must select a file to proceed</span>}
</MDTypography>
</MDBox>
</MDBox>
</Grid>
);
}
// todo? inputProps={{ autoComplete: "" }}
// todo? placeholder={password.placeholder}
return (
<Grid item xs={12} sm={6} key={fieldName}>
<QDynamicFormField
type={field.type}
label={field.label}
isEditable={field.isEditable}
name={fieldName}
displayFormat={field.displayFormat}
value={values[fieldName]}
error={errors[fieldName] && touched[fieldName]}
bulkEditMode={bulkEditMode}
bulkEditSwitchChangeHandler={bulkEditSwitchChanged}
success={`${values[fieldName]}` !== "" && !errors[fieldName] && touched[fieldName]}
/>
</Grid>
);
})}
</Grid>
);
})}
</Grid>
</MDBox>
</MDBox>
@ -131,7 +127,8 @@ QDynamicForm.defaultProps = {
formLabel: undefined,
bulkEditMode: false,
bulkEditSwitchChangeHandler: () =>
{},
{
},
};
export default QDynamicForm;

5
src/qqq/components/QDynamicForm/utils/DynamicFormUtils.ts
View File

@ -19,12 +19,9 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// misc imports
import * as Yup from "yup";
// qqq imports
import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
import * as Yup from "yup";
/*******************************************************************************
** Meta-data to represent a single field in a table.

15
src/qqq/components/QDynamicFormField/index.tsx
View File

@ -19,17 +19,14 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
// formik components
import {ErrorMessage, Field} from "formik";
// Material Dashboard 2 PRO React TS components
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import MDInput from "components/MDInput";
import React, {useState} from "react";
import {InputAdornment} from "@mui/material";
import Grid from "@mui/material/Grid";
import Switch from "@mui/material/Switch";
import {InputAdornment} from "@mui/material";
import {ErrorMessage, Field} from "formik";
import React, {useState} from "react";
import MDBox from "components/MDBox";
import MDInput from "components/MDInput";
import MDTypography from "components/MDTypography";
// Declaring props types for FormField
interface Props

11
src/qqq/components/QRecordSidebar/index.tsx
View File

@ -19,16 +19,15 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import React, {ReactNode} from "react";
import {Link} from "react-router-dom";
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
import {Breadcrumbs as MuiBreadcrumbs} from "@mui/material";
import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon";
import {Theme} from "@mui/material/styles";
import React, {ReactNode} from "react";
import {Link} from "react-router-dom";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import Card from "@mui/material/Card";
import {Theme} from "@mui/material/styles";
import {QSection} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QSection";
interface Props {
tableSections: QSection[];

99
src/qqq/components/Widgets/BarChart.tsx Normal file
View File

@ -0,0 +1,99 @@
/*
* 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 Icon from "@mui/material/Icon";
import {useMemo, ReactNode} from "react";
import {Bar} from "react-chartjs-2";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import configs from "qqq/components/Widgets/Configs/BarChartConfig";
// Declaring props types for ReportsBarChart
interface Props {
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
title: string;
description?: string | ReactNode;
date: string;
chart: {
labels: string[];
datasets: {
label: string;
data: number[];
};
};
[key: string]: any;
}
function ReportsBarChart({color, title, description, date, chart}: Props): JSX.Element
{
const {data, options} = configs(chart.labels || [], chart.datasets || {});
return (
<Card sx={{height: "100%"}}>
<MDBox padding="1rem">
{useMemo(
() => (
<MDBox
variant="gradient"
bgColor={color}
borderRadius="lg"
coloredShadow={color}
py={2}
pr={0.5}
mt={-5}
height="12.5rem"
>
<Bar data={data} options={options} />
</MDBox>
),
[chart, color]
)}
<MDBox pt={3} pb={1} px={1}>
<MDTypography variant="h6" textTransform="capitalize">
{title}
</MDTypography>
<MDTypography component="div" variant="button" color="text" fontWeight="light">
{description}
</MDTypography>
<Divider />
<MDBox display="flex" alignItems="center">
<MDTypography variant="button" color="text" lineHeight={1} sx={{mt: 0.15, mr: 0.5}}>
<Icon>schedule</Icon>
</MDTypography>
<MDTypography variant="button" color="text" fontWeight="light">
{date}
</MDTypography>
</MDBox>
</MDBox>
</MDBox>
</Card>
);
}
// Setting default values for the props of ReportsBarChart
ReportsBarChart.defaultProps = {
color: "dark",
description: "",
};
export default ReportsBarChart;

104
src/qqq/components/Widgets/Configs/BarChartConfig.ts Normal file
View File

@ -0,0 +1,104 @@
/*
* 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/>.
*/
function configs(labels: any, datasets: any)
{
return {
data: {
labels,
datasets: [
{
label: datasets.label,
tension: 0.4,
borderWidth: 0,
borderRadius: 4,
borderSkipped: false,
backgroundColor: "rgba(255, 255, 255, 0.8)",
data: datasets.data,
maxBarThickness: 6,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
interaction: {
intersect: false,
mode: "index",
},
scales: {
y: {
grid: {
drawBorder: false,
display: true,
drawOnChartArea: true,
drawTicks: false,
borderDash: [5, 5],
color: "rgba(255, 255, 255, .2)",
},
ticks: {
suggestedMin: 0,
suggestedMax: 500,
beginAtZero: true,
padding: 10,
font: {
size: 14,
weight: 300,
family: "Roboto",
style: "normal",
lineHeight: 2,
},
color: "#fff",
},
},
x: {
grid: {
drawBorder: false,
display: true,
drawOnChartArea: true,
drawTicks: false,
borderDash: [5, 5],
color: "rgba(255, 255, 255, .2)",
},
ticks: {
display: true,
color: "#f8f9fa",
padding: 10,
font: {
size: 14,
weight: 300,
family: "Roboto",
style: "normal",
lineHeight: 2,
},
},
},
},
},
};
}
export default configs;

100
src/qqq/components/Widgets/Configs/PieChartConfigs.ts Normal file
View File

@ -0,0 +1,100 @@
/*
* 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 colors from "assets/theme/base/colors";
const {gradients, dark} = colors;
function configs(labels: any, datasets: any)
{
const backgroundColors = [];
if (datasets.backgroundColors)
{
datasets.backgroundColors.forEach((color: string) =>
gradients[color]
? backgroundColors.push(gradients[color].state)
: backgroundColors.push(dark.main)
);
}
else
{
backgroundColors.push(dark.main);
}
return {
data: {
labels,
datasets: [
{
label: datasets.label,
weight: 9,
cutout: 0,
tension: 0.9,
pointRadius: 2,
borderWidth: 2,
backgroundColor: backgroundColors,
fill: false,
data: datasets.data,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
interaction: {
intersect: false,
mode: "index",
},
scales: {
y: {
grid: {
drawBorder: false,
display: false,
drawOnChartArea: false,
drawTicks: false,
},
ticks: {
display: false,
},
},
x: {
grid: {
drawBorder: false,
display: false,
drawOnChartArea: false,
drawTicks: false,
},
ticks: {
display: false,
},
},
},
},
};
}
export default configs;

110
src/qqq/components/Widgets/PieChart.tsx Normal file
View File

@ -0,0 +1,110 @@
/*
* 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 Icon from "@mui/material/Icon";
import {useMemo, ReactNode} from "react";
import {Pie} from "react-chartjs-2";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
import configs from "qqq/components/Widgets/Configs/PieChartConfigs"
// Declaring props types for PieChart
interface Props
{
icon?: {
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
component: ReactNode;
};
title?: string;
description?: string | ReactNode;
height?: string | number;
chart: {
labels: string[];
datasets: {
label: string;
backgroundColors: string[];
data: number[];
};
};
[key: string]: any;
}
function PieChart({icon, title, description, height, chart}: Props): JSX.Element
{
const {data, options} = configs(chart.labels || [], chart.datasets || {});
const renderChart = (
<MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
{title || description ? (
<MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
{icon.component && (
<MDBox
width="4rem"
height="4rem"
bgColor={icon.color || "info"}
variant="gradient"
coloredShadow={icon.color || "info"}
borderRadius="xl"
display="flex"
justifyContent="center"
alignItems="center"
color="white"
mt={-5}
mr={2}
>
<Icon fontSize="medium">{icon.component}</Icon>
</MDBox>
)}
<MDBox mt={icon.component ? -2 : 0}>
{title && <MDTypography variant="h6">{title}</MDTypography>}
<MDBox mb={2}>
<MDTypography component="div" variant="button" color="text">
{description}
</MDTypography>
</MDBox>
</MDBox>
</MDBox>
) : null}
{useMemo(
() => (
<MDBox height={height}>
<Pie data={data} options={options} />
</MDBox>
),
[chart, height]
)}
</MDBox>
);
return title || description ? <Card>{renderChart}</Card> : renderChart;
}
// Declaring default props for PieChart
PieChart.defaultProps = {
icon: {color: "info", component: ""},
title: "",
description: "",
height: "19.125rem",
};
export default PieChart;

57
src/qqq/components/Widgets/QuickSightChart.tsx Normal file
View File

@ -0,0 +1,57 @@
/*
* 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 React from "react";
import MDBox from "components/MDBox";
import MDTypography from "components/MDTypography";
interface Props
{
label: string;
url: string;
}
interface IframeProps
{
iframe: string;
}
function Iframe({iframe}: IframeProps)
{
return (<div dangerouslySetInnerHTML={{__html: iframe || ""}} />);
}
function QuickSightChart({label, url}: Props): JSX.Element
{
const iframe = `<iframe style='border: 0 solid #1A73E8; height: 411px; width: 99%' title=${label} src=${url} />`;
return (
<Card sx={{height: "100%"}}>
<MDBox padding="1rem">
<MDTypography variant="h5">{label}</MDTypography>
<Iframe iframe={iframe} />
</MDBox>
</Card>
);
}
export default QuickSightChart;