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

Merge pull request #18 from Kingsrook/feature/CTLE-477-need-to-see-demand-for-boxes

Browse Source 
Feature/ctle 477 need to see demand for boxes
This commit is contained in:
darin.kelkhoff
2023-05-19 11:52:09 -05:00
committed by GitHub
parent 96bc57f5f9 3a7cadf5c2
commit a32d576f4f
9 changed files with 412 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -6,7 +6,7 @@
"@auth0/auth0-react": "1.10.2",
"@emotion/react": "11.7.1",
"@emotion/styled": "11.6.0",
"@kingsrook/qqq-frontend-core": "1.0.63",
"@kingsrook/qqq-frontend-core": "1.0.66",
"@mui/icons-material": "5.4.1",
"@mui/material": "5.11.1",
"@mui/styles": "5.11.1",
@ -30,6 +30,7 @@
"form-data": "4.0.0",
"formik": "2.2.9",
"html-react-parser": "1.4.8",
"html-to-text": "^9.0.5",
"http-proxy-middleware": "2.0.6",
"rapidoc": "9.3.4",
"react": "17.0.2",

1
src/App.tsx
View File

@ -567,6 +567,7 @@ export default function App()
icon={branding.icon}
logo={branding.logo}
appName={branding.appName}
branding={branding}
routes={sideNavRoutes}
onMouseEnter={handleOnMouseEnter}
onMouseLeave={handleOnMouseLeave}

10
src/qqq/components/horseshoe/sidenav/SideNav.tsx
View File

@ -19,6 +19,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData";
import Box from "@mui/material/Box";
import Divider from "@mui/material/Divider";
import Icon from "@mui/material/Icon";
@ -42,6 +43,7 @@ interface Props
icon?: string;
logo?: string;
appName?: string;
branding?: QBrandingMetaData;
routes: {
[key: string]:
| ReactNode
@ -64,7 +66,7 @@ interface Props
[key: string]: any;
}
function Sidenav({color, icon, logo, appName, routes, ...rest}: Props): JSX.Element
function Sidenav({color, icon, logo, appName, branding, routes, ...rest}: Props): JSX.Element
{
const [openCollapse, setOpenCollapse] = useState<boolean | string>(false);
const [openNestedCollapse, setOpenNestedCollapse] = useState<boolean | string>(false);
@ -328,6 +330,12 @@ function Sidenav({color, icon, logo, appName, routes, ...rest}: Props): JSX.Elem
</Box>
}
</Box>
{
branding && branding.environmentBannerText &&
<Box mt={2} bgcolor={branding.environmentBannerColor} borderRadius={2}>
{branding.environmentBannerText}
</Box>
}
</Box>
<Divider
light={

34
src/qqq/components/widgets/DashboardWidgets.tsx
View File

@ -44,10 +44,10 @@ import USMapWidget from "qqq/components/widgets/misc/USMapWidget";
import ParentWidget from "qqq/components/widgets/ParentWidget";
import MultiStatisticsCard from "qqq/components/widgets/statistics/MultiStatisticsCard";
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";
import ProcessRun from "qqq/pages/processes/ProcessRun";
import Client from "qqq/utils/qqq/Client";
import TableWidget from "./tables/TableWidget";
const qController = Client.getInstance();
@ -255,20 +255,12 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
}
{
widgetMetaData.type === "table" && (
<Widget
<TableWidget
widgetMetaData={widgetMetaData}
widgetData={widgetData[i]}
reloadWidgetCallback={(data) => reloadWidget(i, data)}
footerHTML={widgetData[i]?.footerHTML}
isChild={areChildren}
>
<TableCard
noRowsFoundHTML={widgetData[i]?.noRowsFoundHTML}
rowsPerPage={widgetData[i]?.rowsPerPage}
hidePaginationDropdown={widgetData[i]?.hidePaginationDropdown}
data={widgetData[i]}
/>
</Widget>
)
}
{
@ -288,7 +280,9 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
<Widget
widgetMetaData={widgetMetaData}
widgetData={widgetData[i]}
reloadWidgetCallback={(data) => reloadWidget(i, data)}>
reloadWidgetCallback={(data) => reloadWidget(i, data)}
showReloadControl={false}
>
<div className="widgetProcessMidDiv" style={{height: "100%"}}>
<ProcessRun process={widgetData[i]?.processMetaData} defaultProcessValues={widgetData[i]?.defaultValues} isWidget={true} forceReInit={widgetCounter} />
</div>
@ -299,7 +293,9 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
widgetMetaData.type === "stepper" && (
<Widget
widgetMetaData={widgetMetaData}
widgetData={widgetData[i]}>
widgetData={widgetData[i]}
reloadWidgetCallback={(data) => reloadWidget(i, data)}
>
<Box sx={{alignItems: "stretch", flexGrow: 1, display: "flex", marginTop: "0px", paddingTop: "0px"}}>
<Box padding="1rem" sx={{width: "100%"}}>
<StepperCard data={widgetData[i]} />
@ -310,7 +306,11 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
}
{
widgetMetaData.type === "html" && (
<Widget widgetMetaData={widgetMetaData}>
<Widget
widgetMetaData={widgetMetaData}
reloadWidgetCallback={(data) => reloadWidget(i, data)}
widgetData={widgetData[i]}
>
<Box px={3} pt={0} pb={2}>
<MDTypography component="div" variant="button" color="text" fontWeight="light">
{
@ -340,8 +340,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
widgetMetaData={widgetMetaData}
widgetData={widgetData[i]}
isChild={areChildren}
// reloadWidgetCallback={(data) => reloadWidget(i, data)}
reloadWidgetCallback={(data) => reloadWidget(i, data)}
>
<StatisticsCard
data={widgetData[i]}
@ -380,6 +379,7 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
<Widget
widgetMetaData={widgetMetaData}
widgetData={widgetData[i]}
reloadWidgetCallback={(data) => reloadWidget(i, data)}
isChild={areChildren}
>
<div>
@ -413,7 +413,9 @@ function DashboardWidgets({widgetMetaDataList, tableName, entityPrimaryKey, omit
<Widget
widgetMetaData={widgetMetaData}
widgetData={widgetData[i]}
isChild={areChildren}>
reloadWidgetCallback={(data) => reloadWidget(i, data)}
isChild={areChildren}
>
<DefaultLineChart sx={{alignItems: "center"}}
data={widgetData[i]?.chartData}
isYAxisCurrency={widgetData[i]?.isYAxisCurrency}

237
src/qqq/components/widgets/Widget.tsx
View File

@ -25,10 +25,13 @@ import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon";
import LinearProgress from "@mui/material/LinearProgress";
import Tooltip from "@mui/material/Tooltip/Tooltip";
import Typography from "@mui/material/Typography";
import parse from "html-react-parser";
import React, {useState} from "react";
import {Link, useNavigate} from "react-router-dom";
import React, {useEffect, useState} from "react";
import {Link, useNavigate, NavigateFunction} from "react-router-dom";
import {bool} from "yup";
import colors from "qqq/components/legacy/colors";
import DropdownMenu, {DropdownOption} from "qqq/components/widgets/components/DropdownMenu";
@ -44,6 +47,7 @@ export interface WidgetData
dropdownNeedsSelectedText?: string;
hasPermission?: boolean;
errorLoading?: boolean;
[other: string]: any;
}
@ -55,6 +59,7 @@ interface Props
widgetData?: WidgetData;
children: JSX.Element;
reloadWidgetCallback?: (params: string) => void;
showReloadControl: boolean;
isChild?: boolean;
footerHTML?: string;
storeDropdownSelections?: boolean;
@ -62,6 +67,7 @@ interface Props
Widget.defaultProps = {
isChild: false,
showReloadControl: true,
widgetMetaData: {},
widgetData: {},
labelAdditionalComponentsLeft: [],
@ -69,9 +75,22 @@ Widget.defaultProps = {
};
interface LabelComponentRenderArgs
{
navigate: NavigateFunction;
widgetProps: Props;
dropdownData: any[];
componentIndex: number;
reloadFunction: () => void;
}
export class LabelComponent
{
render = (args: LabelComponentRenderArgs): JSX.Element =>
{
return (<div>Unsupported component type</div>)
}
}
@ -87,6 +106,15 @@ export class HeaderLink extends LabelComponent
this.label = label;
this.to = to;
}
render = (args: LabelComponentRenderArgs): JSX.Element =>
{
return (
<Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative" top="-0.25rem">
{this.to ? <Link to={this.to}>{this.label}</Link> : null}
</Typography>
);
}
}
@ -98,6 +126,7 @@ export class AddNewRecordButton extends LabelComponent
defaultValues: any;
disabledFields: any;
constructor(table: QTableMetaData, defaultValues: any, label: string = "Add new", disabledFields: any = defaultValues)
{
super();
@ -106,6 +135,45 @@ export class AddNewRecordButton extends LabelComponent
this.defaultValues = defaultValues;
this.disabledFields = disabledFields;
}
openEditForm = (navigate: any, table: QTableMetaData, id: any = null, defaultValues: any, disabledFields: any) =>
{
navigate(`#/createChild=${table.name}/defaultValues=${JSON.stringify(defaultValues)}/disabledFields=${JSON.stringify(disabledFields)}`)
}
render = (args: LabelComponentRenderArgs): JSX.Element =>
{
return (
<Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="0.25rem">
<Button sx={{mt: 0.75}} onClick={() => this.openEditForm(args.navigate, this.table, null, this.defaultValues, this.disabledFields)}>{this.label}</Button>
</Typography>
);
}
}
export class ExportDataButton extends LabelComponent
{
callbackToExport: any;
label: string;
isDisabled: boolean;
constructor(callbackToExport: any, isDisabled = false, label: string = "Export")
{
super();
this.callbackToExport = callbackToExport;
this.isDisabled = isDisabled;
this.label = label;
}
render = (args: LabelComponentRenderArgs): JSX.Element =>
{
return (
<Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.375rem">
<Tooltip title="Export"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callbackToExport()} disabled={this.isDisabled}><Icon>save_alt</Icon></Button></Tooltip>
</Typography>
);
}
}
@ -122,6 +190,55 @@ export class Dropdown extends LabelComponent
this.options = options;
this.onChangeCallback = onChangeCallback;
}
render = (args: LabelComponentRenderArgs): JSX.Element =>
{
let defaultValue = null;
const dropdownName = args.widgetProps.widgetData.dropdownNameList[args.componentIndex];
const localStorageKey = `${WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT}.${args.widgetProps.widgetMetaData.name}.${dropdownName}`;
if(args.widgetProps.storeDropdownSelections)
{
///////////////////////////////////////////////////////////////////////////////////////
// see if an existing value is stored in local storage, and if so set it in dropdown //
///////////////////////////////////////////////////////////////////////////////////////
defaultValue = JSON.parse(localStorage.getItem(localStorageKey));
args.dropdownData[args.componentIndex] = defaultValue?.id;
}
return (
<Box my={2} sx={{float: "right"}}>
<DropdownMenu
name={dropdownName}
defaultValue={defaultValue}
sx={{width: 200, marginLeft: "15px"}}
label={`Select ${this.label}`}
dropdownOptions={this.options}
onChangeCallback={this.onChangeCallback}
/>
</Box>
);
}
}
export class ReloadControl extends LabelComponent
{
callback: () => void;
constructor(callback: () => void)
{
super();
this.callback = callback;
}
render = (args: LabelComponentRenderArgs): JSX.Element =>
{
return (
<Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.375rem">
<Tooltip title="Refresh"><Button sx={{px: 1, py:0, minWidth: "initial"}} onClick={() => this.callback()}><Icon>refresh</Icon></Button></Tooltip>
</Typography>
);
}
}
@ -133,64 +250,11 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
const navigate = useNavigate();
const [dropdownData, setDropdownData] = useState([]);
const [fullScreenWidgetClassName, setFullScreenWidgetClassName] = useState("");
const [reloading, setReloading] = useState(false);
function openEditForm(table: QTableMetaData, id: any = null, defaultValues: any, disabledFields: any)
function renderComponent(component: LabelComponent, componentIndex: number)
{
navigate(`#/createChild=${table.name}/defaultValues=${JSON.stringify(defaultValues)}/disabledFields=${JSON.stringify(disabledFields)}`)
}
function renderComponent(component: LabelComponent, index: number)
{
if(component instanceof HeaderLink)
{
const link = component as HeaderLink
return (
<Typography variant="body2" p={2} display="inline" fontSize=".875rem" pt="0" position="relative" top="-0.25rem">
{link.to ? <Link to={link.to}>{link.label}</Link> : null}
</Typography>
);
}
if (component instanceof AddNewRecordButton)
{
const addNewRecordButton = component as AddNewRecordButton
return (
<Typography variant="body2" p={2} pr={0} display="inline" position="relative" top="0.25rem">
<Button sx={{mt: 0.75}} onClick={() => openEditForm(addNewRecordButton.table, null, addNewRecordButton.defaultValues, addNewRecordButton.disabledFields)}>{addNewRecordButton.label}</Button>
</Typography>
);
}
if (component instanceof Dropdown)
{
let defaultValue = null;
const dropdownName = props.widgetData.dropdownNameList[index];
const localStorageKey = `${WIDGET_DROPDOWN_SELECTION_LOCAL_STORAGE_KEY_ROOT}.${props.widgetMetaData.name}.${dropdownName}`;
if(props.storeDropdownSelections)
{
///////////////////////////////////////////////////////////////////////////////////////
// see if an existing value is stored in local storage, and if so set it in dropdown //
///////////////////////////////////////////////////////////////////////////////////////
defaultValue = JSON.parse(localStorage.getItem(localStorageKey));
dropdownData[index] = defaultValue?.id;
}
const dropdown = component as Dropdown
return (
<Box my={2} sx={{float: "right"}}>
<DropdownMenu
name={dropdownName}
defaultValue={defaultValue}
sx={{width: 200, marginLeft: "15px"}}
label={`Select ${dropdown.label}`}
dropdownOptions={dropdown.options}
onChangeCallback={dropdown.onChangeCallback}
/>
</Box>
);
}
return (<div>Unsupported component type.</div>)
return component.render({navigate: navigate, widgetProps: props, dropdownData: dropdownData, componentIndex: componentIndex, reloadFunction: doReload})
}
@ -210,6 +274,26 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
});
}
const doReload = () =>
{
setReloading(true);
reloadWidget(dropdownData);
}
useEffect(() =>
{
setReloading(false);
}, [props.widgetData]);
const effectiveLabelAdditionalComponentsLeft: LabelComponent[] = [];
if(props.reloadWidgetCallback && props.widgetData && props.showReloadControl && props.widgetMetaData.showReloadButton)
{
effectiveLabelAdditionalComponentsLeft.push(new ReloadControl(doReload))
}
if(props.labelAdditionalComponentsLeft)
{
props.labelAdditionalComponentsLeft.map((component) => effectiveLabelAdditionalComponentsLeft.push(component));
}
function handleDataChange(dropdownLabel: string, changedData: any)
{
@ -298,10 +382,31 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
}
const hasPermission = props.widgetData?.hasPermission === undefined || props.widgetData?.hasPermission === true;
const isSet = (v: any): boolean =>
{
return(v !== null && v !== undefined);
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// to avoid taking up the space of the Box with the label and icon and label-components (since it has a height), only output that box if we need any of the components //
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
let needLabelBox = false;
if(hasPermission)
{
needLabelBox ||= (effectiveLabelAdditionalComponentsLeft && effectiveLabelAdditionalComponentsLeft.length > 0);
needLabelBox ||= (effectiveLabelAdditionalComponentsRight && effectiveLabelAdditionalComponentsRight.length > 0);
needLabelBox ||= isSet(props.widgetMetaData?.icon);
needLabelBox ||= isSet(props.widgetData?.label);
needLabelBox ||= isSet(props.widgetMetaData?.label);
}
const errorLoading = props.widgetData?.errorLoading !== undefined && props.widgetData?.errorLoading === true;
const widgetContent =
<Box sx={{width: "100%", height: "100%", minHeight: props.widgetMetaData?.minHeight ? props.widgetMetaData?.minHeight : "initial"}}>
<Box pr={2} display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%"}}>
{
needLabelBox &&
<Box pr={2} display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%"}} height={"3.5rem"}>
<Box pt={2} pb={1}>
{
hasPermission ?
@ -364,7 +469,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
}
{
hasPermission && (
props.labelAdditionalComponentsLeft.map((component, i) =>
effectiveLabelAdditionalComponentsLeft.map((component, i) =>
{
return (<span key={i}>{renderComponent(component, i)}</span>);
})
@ -382,6 +487,10 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
}
</Box>
</Box>
}
{
props.widgetMetaData?.isCard && (reloading ? <LinearProgress color="info" sx={{overflow: "hidden", borderRadius: "0"}} /> : <Box height="0.375rem"/>)
}
{
errorLoading ? (
<Box pb={3} sx={{display: "flex", justifyContent: "center", alignItems: "flex-start"}}>
@ -411,7 +520,11 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
}
</Box>;
return props.widgetMetaData?.isCard ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%"}} className={fullScreenWidgetClassName}>{widgetContent}</Card> : widgetContent;
return props.widgetMetaData?.isCard
? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%"}} className={fullScreenWidgetClassName}>
{widgetContent}
</Card>
: widgetContent;
}
export default Widget;

1
src/qqq/components/widgets/misc/RecordGridWidget.tsx
View File

@ -123,6 +123,7 @@ function RecordGridWidget({widgetMetaData, data}: Props): JSX.Element
return (
<Widget
widgetMetaData={widgetMetaData}
widgetData={data}
labelAdditionalComponentsLeft={labelAdditionalComponentsLeft}
labelAdditionalComponentsRight={labelAdditionalComponentsRight}
>

145
src/qqq/components/widgets/tables/TableWidget.tsx Normal file
View File

@ -0,0 +1,145 @@
/*
* QQQ - Low-code Application Framework for Engineers.
* Copyright (C) 2021-2023. 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 {QWidgetMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QWidgetMetaData";
// @ts-ignore
import {htmlToText} from "html-to-text";
import React, {useEffect, useState} from "react";
import TableCard from "qqq/components/widgets/tables/TableCard";
import Widget, {ExportDataButton, WidgetData} from "qqq/components/widgets/Widget";
import ValueUtils from "qqq/utils/qqq/ValueUtils";
interface Props
{
widgetMetaData?: QWidgetMetaData;
widgetData?: WidgetData;
reloadWidgetCallback?: (params: string) => void;
isChild?: boolean;
}
TableWidget.defaultProps = {
foo: null,
};
function download(filename: string, text: string)
{
var element = document.createElement("a");
element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
element.setAttribute("download", filename);
element.style.display = "none";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
function TableWidget(props: Props): JSX.Element
{
const [isExportDisabled, setIsExportDisabled] = useState(true);
const rows = props.widgetData?.rows;
const columns = props.widgetData?.columns;
useEffect(() =>
{
let isExportDisabled = true;
if (props.widgetData && columns && rows && rows.length > 0)
{
isExportDisabled = false;
}
setIsExportDisabled(isExportDisabled);
}, [props.widgetMetaData, props.widgetData]);
const exportCallback = () =>
{
if (props.widgetData && rows && columns)
{
console.log(props.widgetData);
let csv = "";
for (let j = 0; j < columns.length; j++)
{
if (j > 0)
{
csv += ",";
}
csv += `"${columns[j].header}"`;
}
csv += "\n";
for (let i = 0; i < rows.length; i++)
{
for (let j = 0; j < columns.length; j++)
{
if (j > 0)
{
csv += ",";
}
const cell = rows[i][columns[j].accessor];
const text = htmlToText(cell,
{
selectors: [
{selector: "a", format: "inline"},
{selector: ".MuiIcon-root", format: "skip"},
{selector: ".button", format: "skip"}
]
});
csv += `"${ValueUtils.cleanForCsv(text)}"`;
}
csv += "\n";
}
console.log(csv);
const fileName = (props.widgetData.label ?? props.widgetMetaData.label) + " " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
download(fileName, csv);
}
else
{
alert("There is no data available to export.");
}
};
return (
<Widget
widgetMetaData={props.widgetMetaData}
widgetData={props.widgetData}
reloadWidgetCallback={(data) => props.reloadWidgetCallback(data)}
footerHTML={props.widgetData?.footerHTML}
isChild={props.isChild}
labelAdditionalComponentsLeft={props.widgetMetaData?.showExportButton ? [new ExportDataButton(() => exportCallback(), isExportDisabled)] : []}
>
<TableCard
noRowsFoundHTML={props.widgetData?.noRowsFoundHTML}
rowsPerPage={props.widgetData?.rowsPerPage}
hidePaginationDropdown={props.widgetData?.hidePaginationDropdown}
data={{columns: props.widgetData?.columns, rows: props.widgetData?.rows}}
/>
</Widget>
);
}
export default TableWidget;

36
src/qqq/pages/records/query/ColumnStats.tsx
View File

@ -54,6 +54,21 @@ ColumnStats.defaultProps = {
const qController = Client.getInstance();
// todo - merge w/ same function in TableWidget
function download(filename: string, text: string)
{
var element = document.createElement("a");
element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
element.setAttribute("download", filename);
element.style.display = "none";
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
function ColumnStats({tableMetaData, fieldMetaData, fieldTableName, filter}: Props): JSX.Element
{
const [statusString, setStatusString] = useState("Calculating statistics...");
@ -97,6 +112,8 @@ function ColumnStats({tableMetaData, fieldMetaData, fieldTableName, filter}: Pro
}
else
{
// todo - job running!
const result = processResult as QJobComplete;
const statFieldObjects = result.values.statsFields;
@ -174,6 +191,20 @@ function ColumnStats({tableMetaData, fieldMetaData, fieldTableName, filter}: Pro
setStatusString("Refreshing...")
}
const doExport = () =>
{
let csv = `"${ValueUtils.cleanForCsv(fieldMetaData.label)}","Count"\n`;
for (let i = 0; i < valueCounts.length; i++)
{
const fieldValue = valueCounts[i].displayValues.get(fieldMetaData.name);
const count = valueCounts[i].values.get("count");
csv += `"${ValueUtils.cleanForCsv(fieldValue)}",${count}\n`;
}
const fileName = tableMetaData.label + " - " + fieldMetaData.label + " Column Stats " + ValueUtils.formatDateTimeForFileName(new Date()) + ".csv";
download(fileName, csv);
}
function Loading()
{
return (
@ -200,9 +231,14 @@ function ColumnStats({tableMetaData, fieldMetaData, fieldTableName, filter}: Pro
{statusString ?? <>&nbsp;</>}
</Typography>
</Typography>
<Box>
<Button onClick={() => refresh()} startIcon={<Icon>refresh</Icon>}>
Refresh
</Button>
<Button onClick={() => doExport()} startIcon={<Icon>save_alt</Icon>} disabled={valueCounts == null || valueCounts.length == 0}>
Export
</Button>
</Box>
</Box>
<Grid container>
<Grid item xs={8}>

21
src/qqq/utils/qqq/ValueUtils.tsx
View File

@ -273,6 +273,14 @@ class ValueUtils
return (`${date.toString("yyyy-MM-ddTHH:mm:ssZ")}`);
}
public static formatDateTimeForFileName(date: Date)
{
const zp = (value: number): string => (value < 10 ? `0${value}` : `${value}`);
const d = new Date();
const dateString = `${d.getFullYear()}-${zp(d.getMonth() + 1)}-${zp(d.getDate())} ${zp(d.getHours())}${zp(d.getMinutes())}`;
return (dateString);
}
public static getFullWeekday(date: Date)
{
if (!(date instanceof Date))
@ -410,6 +418,19 @@ class ValueUtils
return toPush;
}
/*******************************************************************************
** for building CSV in frontends, cleanse null & undefined, and escape "'s
*******************************************************************************/
public static cleanForCsv(param: any): string
{
if(param === undefined || param === null)
{
return ("");
}
return (String(param).replaceAll(/"/g, "\"\""));
}
}
////////////////////////////////////////////////////////////////////////////////////////////////