mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 13:20:43 +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
@ -21,13 +21,11 @@
|
||||
import {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
|
||||
import {Skeleton} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import parse from "html-react-parser";
|
||||
import React, {useEffect, useReducer, useState} from "react";
|
||||
import {useLocation} from "react-router-dom";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import MDBadgeDot from "qqq/components/legacy/MDBadgeDot";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
import BarChart from "qqq/components/widgets/charts/barchart/BarChart";
|
||||
import HorizontalBarChart from "qqq/components/widgets/charts/barchart/HorizontalBarChart";
|
||||
@ -44,7 +42,6 @@ import StepperCard from "qqq/components/widgets/misc/StepperCard";
|
||||
import USMapWidget from "qqq/components/widgets/misc/USMapWidget";
|
||||
import ParentWidget from "qqq/components/widgets/ParentWidget";
|
||||
import MultiStatisticsCard from "qqq/components/widgets/statistics/MultiStatisticsCard";
|
||||
import SimpleStatisticsCard from "qqq/components/widgets/statistics/SimpleStatisticsCard";
|
||||
import StatisticsCard from "qqq/components/widgets/statistics/StatisticsCard";
|
||||
import TableCard from "qqq/components/widgets/tables/TableCard";
|
||||
import Widget, {WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT} from "qqq/components/widgets/Widget";
|
||||
@ -62,6 +59,7 @@ interface Props
|
||||
omitWrappingGridContainer: boolean;
|
||||
areChildren?: boolean
|
||||
childUrlParams?: string
|
||||
parentWidgetMetaData?: QWidgetMetaData
|
||||
}
|
||||
|
||||
DashboardWidgets.defaultProps = {
|
||||
@ -70,10 +68,11 @@ DashboardWidgets.defaultProps = {
|
||||
entityPrimaryKey: null,
|
||||
omitWrappingGridContainer: false,
|
||||
areChildren: false,
|
||||
childUrlParams: ""
|
||||
childUrlParams: "",
|
||||
parentWidgetMetaData: null
|
||||
};
|
||||
|
||||
function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams}: Props): JSX.Element
|
||||
function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omitWrappingGridContainer, areChildren, childUrlParams, parentWidgetMetaData}: Props): JSX.Element
|
||||
{
|
||||
const location = useLocation();
|
||||
const [widgetData, setWidgetData] = useState([] as any[]);
|
||||
@ -103,18 +102,10 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
setWidgetData(widgetData);
|
||||
}, [widgetMetaDataList]);
|
||||
|
||||
useEffect(() =>
|
||||
const reloadWidget = async (index: number, data: string) =>
|
||||
{
|
||||
setWidgetData([] as any[]);
|
||||
}, [location.pathname]);
|
||||
|
||||
const reloadWidget = (index: number, data: string) =>
|
||||
{
|
||||
setTimeout(async () =>
|
||||
{
|
||||
widgetData[index] = await qController.widget(widgetMetaDataList[index].name, getQueryParams(null, data));
|
||||
setWidgetCounter(widgetCounter + 1);
|
||||
}, 1);
|
||||
widgetData[index] = await qController.widget(widgetMetaDataList[index].name, getQueryParams(null, data));
|
||||
forceUpdate();
|
||||
};
|
||||
|
||||
function getQueryParams(widgetMetaData: QWidgetMetaData, extraParams: string): string
|
||||
@ -146,12 +137,15 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
// see if local storage is used for any widget dropdowns, if so, look them //
|
||||
// up and append to the query string //
|
||||
/////////////////////////////////////////////////////////////////////////////
|
||||
if(widgetMetaData && widgetMetaData.storeDropdownSelections && widgetMetaData.dropdowns)
|
||||
let thisWidgetHasDropdowns = widgetMetaData && widgetMetaData.storeDropdownSelections && widgetMetaData.dropdowns;
|
||||
let parentWidgetHasDropdowns = parentWidgetMetaData && parentWidgetMetaData.storeDropdownSelections && parentWidgetMetaData.dropdowns;
|
||||
if(thisWidgetHasDropdowns || parentWidgetHasDropdowns)
|
||||
{
|
||||
for(let i = 0; i< widgetMetaData.dropdowns.length; i++)
|
||||
const metaDataToUse = (thisWidgetHasDropdowns) ? widgetMetaData : parentWidgetMetaData;
|
||||
for(let i = 0; i< metaDataToUse.dropdowns.length; i++)
|
||||
{
|
||||
const dropdownName = widgetMetaData.dropdowns[i].possibleValueSourceName;
|
||||
const localStorageKey = `${WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT}.${widgetMetaData.name}.${dropdownName}`;
|
||||
const dropdownName = metaDataToUse.dropdowns[i].possibleValueSourceName;
|
||||
const localStorageKey = `${WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT}.${metaDataToUse.name}.${dropdownName}`;
|
||||
const json = JSON.parse(localStorage.getItem(localStorageKey));
|
||||
if(json)
|
||||
{
|
||||
@ -235,18 +229,15 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "stepper" && (
|
||||
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
<Box padding="1rem">
|
||||
{
|
||||
widgetMetaData.label && (
|
||||
<MDTypography variant="h5" textTransform="capitalize">
|
||||
{widgetMetaData.label}
|
||||
</MDTypography>
|
||||
)
|
||||
}
|
||||
<StepperCard data={widgetData[i]} />
|
||||
<Widget
|
||||
widgetMetaData={widgetMetaData}
|
||||
widgetData={widgetData[i]}>
|
||||
<Box sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
<Box padding="1rem" sx={{width: "100%"}}>
|
||||
<StepperCard data={widgetData[i]} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</Widget>
|
||||
)
|
||||
}
|
||||
{
|
||||
@ -282,11 +273,10 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
widgetMetaData={widgetMetaData}
|
||||
widgetData={widgetData[i]}
|
||||
isChild={areChildren}
|
||||
reloadWidgetCallback={(data) => reloadWidget(i, data)}>
|
||||
|
||||
// reloadWidgetCallback={(data) => reloadWidget(i, data)}
|
||||
>
|
||||
<StatisticsCard
|
||||
title={widgetMetaData.label}
|
||||
color={colors.info.main}
|
||||
icon={widgetMetaData.icon}
|
||||
data={widgetData[i]}
|
||||
increaseIsGood={true}
|
||||
/>
|
||||
@ -294,18 +284,6 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
)
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "simpleStatistics" && (
|
||||
widgetData && widgetData[i] && (
|
||||
<SimpleStatisticsCard
|
||||
title={widgetMetaData.label}
|
||||
data={widgetData[i]}
|
||||
increaseIsGood={widgetData[i].increaseIsGood}
|
||||
isCurrency={widgetData[i].isCurrency}
|
||||
/>
|
||||
)
|
||||
)
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "multiStatistics" && (
|
||||
<MultiStatisticsCard
|
||||
@ -337,8 +315,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
widgetMetaData={widgetMetaData}
|
||||
widgetData={widgetData[i]}
|
||||
isChild={areChildren}
|
||||
reloadWidgetCallback={(data) => reloadWidget(i, data)}>
|
||||
|
||||
>
|
||||
<div>
|
||||
<PieChart
|
||||
chartData={widgetData[i]?.chartData}
|
||||
@ -367,26 +344,15 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
|
||||
}
|
||||
{
|
||||
widgetMetaData.type === "lineChart" && (
|
||||
widgetData && widgetData[i] && widgetData[i].chartData && widgetData[i].chartData?.datasets ? (
|
||||
<Widget
|
||||
widgetMetaData={widgetMetaData}
|
||||
widgetData={widgetData[i]}
|
||||
isChild={areChildren}>
|
||||
<DefaultLineChart sx={{alignItems: "center"}}
|
||||
title={widgetData[i].title}
|
||||
description={(
|
||||
<Box display="flex" justifyContent="space-between">
|
||||
<Box display="flex" ml={-1}>
|
||||
{
|
||||
widgetData[i].chartData.datasets.map((dataSet: any) => (
|
||||
<MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
|
||||
))
|
||||
}
|
||||
</Box>
|
||||
<Box mt={-4} mr={-1} position="absolute" right="1.5rem" />
|
||||
</Box>
|
||||
)}
|
||||
data={widgetData[i].chartData as { labels: string[]; datasets: { label: string; color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark"; data: number[]; }[]; }}
|
||||
isYAxisCurrency={widgetData[i].isYAxisCurrency}
|
||||
isChild={areChildren}
|
||||
data={widgetData[i]?.chartData}
|
||||
isYAxisCurrency={widgetData[i]?.isYAxisCurrency}
|
||||
/>
|
||||
) : null
|
||||
</Widget>
|
||||
)
|
||||
}
|
||||
{
|
||||
|
||||
@ -41,6 +41,7 @@ export interface ParentWidgetData
|
||||
}[][];
|
||||
childWidgetNameList: string[];
|
||||
dropdownNeedsSelectedText?: string;
|
||||
storeDropdownSelections?: boolean;
|
||||
icon?: string;
|
||||
}
|
||||
|
||||
@ -93,7 +94,6 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
|
||||
const parentReloadWidgetCallback = (data: string) =>
|
||||
{
|
||||
setChildUrlParams(data);
|
||||
|
||||
reloadWidgetCallback(widgetIndex, data);
|
||||
}
|
||||
|
||||
@ -107,7 +107,7 @@ function ParentWidget({urlParams, widgetMetaData, widgetIndex, data, reloadWidge
|
||||
reloadWidgetCallback={parentReloadWidgetCallback}
|
||||
>
|
||||
<Box sx={{height: "100%", width: "100%"}}>
|
||||
<DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} />
|
||||
<DashboardWidgets widgetMetaDataList={widgets} entityPrimaryKey={entityPrimaryKey} tableName={tableName} childUrlParams={childUrlParams} areChildren={true} parentWidgetMetaData={widgetMetaData}/>
|
||||
</Box>
|
||||
</Widget>
|
||||
) : null
|
||||
|
||||
@ -41,6 +41,7 @@ export interface WidgetData
|
||||
label: string
|
||||
}[][];
|
||||
dropdownNeedsSelectedText?: string;
|
||||
hasPermission?: boolean;
|
||||
}
|
||||
|
||||
|
||||
@ -172,9 +173,8 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
|
||||
|
||||
const dropdown = component as Dropdown
|
||||
return (
|
||||
<Box my={2} mr={2} sx={{float: "right"}}>
|
||||
<Box my={2} sx={{float: "right"}}>
|
||||
<DropdownMenu
|
||||
localStorageKey={localStorageKey}
|
||||
defaultValue={defaultValue}
|
||||
sx={{width: 200, marginLeft: "15px"}}
|
||||
label={`Select ${dropdown.label}`}
|
||||
@ -283,75 +283,103 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
|
||||
}
|
||||
}, [counter]);
|
||||
|
||||
const hasPermission = props.widgetData?.hasPermission === undefined || props.widgetData?.hasPermission === true;
|
||||
const widgetContent =
|
||||
<Box sx={{width: "100%"}}>
|
||||
<Box display="flex" justifyContent="space-between" alignItems="center" sx={{width: "100%"}}>
|
||||
<Box pr={3} display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%"}}>
|
||||
<Box pt={2}>
|
||||
{
|
||||
props.widgetMetaData?.icon && (
|
||||
<Box
|
||||
ml={3}
|
||||
mt={-4}
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "64px",
|
||||
height: "64px",
|
||||
borderRadius: "8px",
|
||||
background: colors.info.main,
|
||||
color: "#ffffff",
|
||||
float: "left"
|
||||
}}
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">
|
||||
{props.widgetMetaData.icon}
|
||||
</Icon>
|
||||
</Box>
|
||||
hasPermission ?
|
||||
props.widgetMetaData?.icon && (
|
||||
<Box
|
||||
ml={3}
|
||||
mt={-4}
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "64px",
|
||||
height: "64px",
|
||||
borderRadius: "8px",
|
||||
background: colors.info.main,
|
||||
color: "#ffffff",
|
||||
float: "left"
|
||||
}}
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">
|
||||
{props.widgetMetaData.icon}
|
||||
</Icon>
|
||||
</Box>
|
||||
|
||||
)
|
||||
) : (
|
||||
<Box
|
||||
ml={3}
|
||||
mt={-4}
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: "64px",
|
||||
height: "64px",
|
||||
borderRadius: "8px",
|
||||
background: colors.info.main,
|
||||
color: "#ffffff",
|
||||
float: "left"
|
||||
}}
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">lock</Icon>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
{
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
// first look for a label in the widget data, which would override that in the metadata //
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
props.widgetData?.label? (
|
||||
<Typography variant="h5" fontWeight="medium" pl={3} display="inline">
|
||||
hasPermission && props.widgetData?.label? (
|
||||
<Typography sx={{position: "relative", top: -4}} variant="h6" fontWeight="medium" pl={2} display="inline">
|
||||
{props.widgetData.label}
|
||||
</Typography>
|
||||
) : (
|
||||
props.widgetMetaData?.label && (
|
||||
<Typography variant="h5" fontWeight="medium" pl={3} display="inline">
|
||||
hasPermission && props.widgetMetaData?.label && (
|
||||
<Typography sx={{position: "relative", top: -4}} variant="h6" fontWeight="medium" pl={3} display="inline">
|
||||
{props.widgetMetaData.label}
|
||||
</Typography>
|
||||
)
|
||||
)
|
||||
}
|
||||
{
|
||||
props.labelAdditionalComponentsLeft.map((component, i) =>
|
||||
{
|
||||
return (<span key={i}>{renderComponent(component, i)}</span>);
|
||||
})
|
||||
hasPermission && (
|
||||
props.labelAdditionalComponentsLeft.map((component, i) =>
|
||||
{
|
||||
return (<span key={i}>{renderComponent(component, i)}</span>);
|
||||
})
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
<Box>
|
||||
{
|
||||
effectiveLabelAdditionalComponentsRight.map((component, i) =>
|
||||
{
|
||||
return (<span key={i}>{renderComponent(component, i)}</span>);
|
||||
})
|
||||
hasPermission && (
|
||||
effectiveLabelAdditionalComponentsRight.map((component, i) =>
|
||||
{
|
||||
return (<span key={i}>{renderComponent(component, i)}</span>);
|
||||
})
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
{
|
||||
props.widgetData?.dropdownNeedsSelectedText ? (
|
||||
hasPermission && props.widgetData?.dropdownNeedsSelectedText ? (
|
||||
<Box pb={3} pr={3} sx={{width: "100%", textAlign: "right"}}>
|
||||
<Typography variant="body2">
|
||||
{props.widgetData?.dropdownNeedsSelectedText}
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
props.children
|
||||
hasPermission ? (
|
||||
props.children
|
||||
) : (
|
||||
<Box mt={2} mb={5} sx={{display: "flex", justifyContent: "center"}}><Typography variant="body2">You do not have permission to view this data.</Typography></Box>
|
||||
)
|
||||
)
|
||||
}
|
||||
</Box>;
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
*/
|
||||
|
||||
|
||||
import {Skeleton} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import {BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip,} from "chart.js";
|
||||
import React, {useEffect, useState} from "react";
|
||||
@ -92,8 +93,8 @@ function StackedBarChart({data}: Props): JSX.Element
|
||||
|
||||
|
||||
return data ? (
|
||||
<Box p={3}><Bar data={data} options={options} /></Box>
|
||||
) : null;
|
||||
<Box p={3}><Bar data={data} options={options} getElementsAtEvent={handleClick} /></Box>
|
||||
) : <Skeleton sx={{marginLeft: "20px", marginRight: "20px", height: "200px"}} /> ;
|
||||
}
|
||||
|
||||
export default StackedBarChart;
|
||||
|
||||
@ -161,7 +161,7 @@ function BarChart({color, title, description, date, data}: Props): JSX.Element
|
||||
[data, color]
|
||||
)}
|
||||
<Box pt={3} pb={1} px={1}>
|
||||
<MDTypography variant="h5" textTransform="capitalize">
|
||||
<MDTypography variant="h6" textTransform="capitalize">
|
||||
{title}
|
||||
</MDTypography>
|
||||
<MDTypography component="div" variant="button" color="text" fontWeight="light">
|
||||
|
||||
@ -20,13 +20,10 @@
|
||||
*/
|
||||
|
||||
import Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import React, {ReactNode, useMemo} from "react";
|
||||
import {Line} from "react-chartjs-2";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import MDBadgeDot from "qqq/components/legacy/MDBadgeDot";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
|
||||
//////////////////////////////////////////
|
||||
// structure of default line chart data //
|
||||
@ -128,10 +125,9 @@ interface Props
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
component: ReactNode;
|
||||
};
|
||||
title?: string;
|
||||
height?: string | number;
|
||||
description?: any;
|
||||
isYAxisCurrency?: boolean;
|
||||
isChild?: boolean;
|
||||
data: DefaultLineChartData;
|
||||
|
||||
[key: string]: any;
|
||||
@ -139,12 +135,11 @@ interface Props
|
||||
|
||||
DefaultLineChart.defaultProps = {
|
||||
icon: {color: "info", component: ""},
|
||||
title: "",
|
||||
height: "19.125rem",
|
||||
};
|
||||
|
||||
|
||||
function DefaultLineChart({icon, title, height, data, isYAxisCurrency, isChild}: Props): JSX.Element
|
||||
function DefaultLineChart({data, height, isYAxisCurrency}: Props): JSX.Element
|
||||
{
|
||||
const allBackgroundColors = ["info", "warning", "primary", "success", "error", "secondary", "dark"];
|
||||
if (data && data.datasets)
|
||||
@ -156,6 +151,19 @@ function DefaultLineChart({icon, title, height, data, isYAxisCurrency, isChild}:
|
||||
});
|
||||
}
|
||||
|
||||
const description= (
|
||||
<Box display="flex" justifyContent="space-between">
|
||||
<Box display="flex" ml={-1}>
|
||||
{
|
||||
data?.datasets?.map((dataSet: any) => (
|
||||
<MDBadgeDot key={dataSet.label} color={dataSet.color} size="sm" badgeContent={dataSet.label} />
|
||||
))
|
||||
}
|
||||
</Box>
|
||||
<Box mt={-4} mr={-1} position="absolute" right="1.5rem" />
|
||||
</Box>
|
||||
);
|
||||
|
||||
const chartDatasets = data && data.datasets
|
||||
? data.datasets.map((dataset) => ({
|
||||
...dataset,
|
||||
@ -204,55 +212,9 @@ function DefaultLineChart({icon, title, height, data, isYAxisCurrency, isChild}:
|
||||
};
|
||||
}
|
||||
|
||||
const renderChart = (
|
||||
<Box py={2} pr={2} pl={icon.component ? 1 : 2}>
|
||||
|
||||
{title ? (
|
||||
<Box display="flex" px={0} pt={0}>
|
||||
{icon.component && (
|
||||
<Box
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
borderRadius="xl"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
color="white"
|
||||
mt={-5}
|
||||
mr={2}
|
||||
sx={{backgroundColor: icon.color || "info"}}
|
||||
>
|
||||
<Icon fontSize="medium">{icon.component}</Icon>
|
||||
</Box>
|
||||
)}
|
||||
<Box mt={icon.component ? -2 : 0}>
|
||||
{isChild ? (
|
||||
title && <MDTypography variant="h6">{title}</MDTypography>
|
||||
) : (
|
||||
title && <MDTypography variant="h5">{title}</MDTypography>
|
||||
)
|
||||
}
|
||||
<Box mb={2}>
|
||||
<MDTypography component="div" variant="button" color="text">
|
||||
<Box display="flex" justifyContent="space-between">
|
||||
<Box display="flex" ml={-1}>
|
||||
{
|
||||
data && data.lineLabels ? (
|
||||
(data.lineLabels.map((label: string, index: number) => (
|
||||
|
||||
<Box key={index}>
|
||||
<MDBadgeDot color={allBackgroundColors[index]} size="sm" badgeContent={label} />
|
||||
</Box>
|
||||
)
|
||||
))) : null
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
</MDTypography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
) : null}
|
||||
return (
|
||||
<Box py={2} pr={2} pl={2}>
|
||||
{description}
|
||||
{useMemo(
|
||||
() => (
|
||||
<Box height={height}>
|
||||
@ -264,12 +226,6 @@ function DefaultLineChart({icon, title, height, data, isYAxisCurrency, isChild}:
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
|
||||
return title ?
|
||||
<Card sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
|
||||
{renderChart}
|
||||
</Card>
|
||||
: renderChart;
|
||||
}
|
||||
|
||||
export default DefaultLineChart;
|
||||
|
||||
@ -77,7 +77,7 @@ function SmallLineChart({color, title, description, date, chart}: Props): JSX.El
|
||||
[chart, color]
|
||||
)}
|
||||
<Box pt={3} pb={1} px={1}>
|
||||
<MDTypography variant="h5" textTransform="capitalize">
|
||||
<MDTypography variant="h6" textTransform="capitalize">
|
||||
{title}
|
||||
</MDTypography>
|
||||
<MDTypography component="div" variant="button" color="text" fontWeight="light">
|
||||
|
||||
@ -19,12 +19,12 @@
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import {Card} from "@mui/material";
|
||||
import {Card, Skeleton} from "@mui/material";
|
||||
import Box from "@mui/material/Box";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import parse from "html-react-parser";
|
||||
import React, {useMemo} from "react";
|
||||
import React, {useEffect, useMemo, useState} from "react";
|
||||
import {Pie} from "react-chartjs-2";
|
||||
import {useNavigate} from "react-router-dom";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
@ -59,14 +59,22 @@ interface Props
|
||||
function PieChart({description, chartData}: Props): JSX.Element
|
||||
{
|
||||
const navigate = useNavigate();
|
||||
const [dataLoaded, setDataLoaded] = useState(false);
|
||||
|
||||
if (chartData && chartData.dataset)
|
||||
{
|
||||
chartData.dataset.backgroundColors = chartColors;
|
||||
}
|
||||
|
||||
const {data, options} = configs(chartData?.labels || [], chartData?.dataset || {});
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(chartData)
|
||||
{
|
||||
setDataLoaded(true);
|
||||
}
|
||||
}, [chartData]);
|
||||
|
||||
const handleClick = (e: Array<{}>) =>
|
||||
{
|
||||
if(e && e.length > 0 && chartData?.dataset?.urls && chartData?.dataset?.urls.length)
|
||||
@ -89,6 +97,19 @@ function PieChart({description, chartData}: Props): JSX.Element
|
||||
[chartData]
|
||||
)}
|
||||
</Box>
|
||||
{
|
||||
! chartData && (
|
||||
<Box sx={{
|
||||
position: "absolute",
|
||||
top: "40%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
display: "flex",
|
||||
justifyContent: "center"}}>
|
||||
<Skeleton sx={{width: "150px", height: "150px"}} variant="circular"/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Divider />
|
||||
|
||||
@ -23,7 +23,6 @@ import {Theme} from "@mui/material";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import {SxProps} from "@mui/system";
|
||||
import React from "react";
|
||||
|
||||
|
||||
export interface DropdownOption
|
||||
@ -38,18 +37,17 @@ export interface DropdownOption
|
||||
interface Props
|
||||
{
|
||||
defaultValue?: any;
|
||||
localStorageKey?: string;
|
||||
label?: string;
|
||||
dropdownOptions?: DropdownOption[];
|
||||
onChangeCallback?: (dropdownLabel: string, data: any) => void;
|
||||
sx?: SxProps<Theme>;
|
||||
}
|
||||
|
||||
function DropdownMenu({localStorageKey, defaultValue, label, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
|
||||
function DropdownMenu({defaultValue, label, dropdownOptions, onChangeCallback, sx}: Props): JSX.Element
|
||||
{
|
||||
const handleOnChange = (event: any, value: any, reason: string) =>
|
||||
const handleOnChange = (event: any, newValue: any, reason: string) =>
|
||||
{
|
||||
onChangeCallback(label, value);
|
||||
onChangeCallback(label, newValue);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -72,7 +72,7 @@ function StepperCard({data}: Props): JSX.Element
|
||||
// console.log(`data ${JSON.stringify(data)}`);
|
||||
|
||||
return (
|
||||
<Stepper connector={<CustomizedConnector />} activeStep={activeStep} alternativeLabel sx={{paddingBottom: "0px", boxShadow: "none", background: "white"}}>
|
||||
<Stepper connector={<CustomizedConnector />} activeStep={activeStep} alternativeLabel sx={{paddingBottom: "0px", boxShadow: "none", background: "none"}}>
|
||||
{
|
||||
data && data.steps ? (
|
||||
data.steps.map((step, index) => (
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -21,6 +21,7 @@
|
||||
|
||||
// Declaring props types for ProductCell
|
||||
import Box from "@mui/material/Box";
|
||||
import React from "react";
|
||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||
|
||||
interface Props
|
||||
@ -35,8 +36,12 @@ function ImageCell({imageUrl, label, total, totalType}: Props): JSX.Element
|
||||
{
|
||||
return (
|
||||
<Box display="flex" alignItems="center" pr={2}>
|
||||
<Box mr={2}>
|
||||
<img src={imageUrl} alt={label} />
|
||||
<Box sx={{width: "50px"}} mr={2}>
|
||||
{
|
||||
imageUrl && imageUrl !== "" && (
|
||||
<img src={imageUrl} alt={label} />
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
<Box display="flex" flexDirection="column">
|
||||
<MDTypography variant="button" fontWeight="medium">
|
||||
|
||||
Reference in New Issue
Block a user