mirror of
https://github.com/inventree/InvenTree.git
synced 2026-06-11 19:27:02 +00:00
Remove built-in dashboard history widgets (#12114)
This commit is contained in:
@@ -8,7 +8,6 @@ import ColorToggleDashboardWidget from './widgets/ColorToggleWidget';
|
|||||||
import GetStartedWidget from './widgets/GetStartedWidget';
|
import GetStartedWidget from './widgets/GetStartedWidget';
|
||||||
import LanguageSelectDashboardWidget from './widgets/LanguageSelectWidget';
|
import LanguageSelectDashboardWidget from './widgets/LanguageSelectWidget';
|
||||||
import NewsWidget from './widgets/NewsWidget';
|
import NewsWidget from './widgets/NewsWidget';
|
||||||
import OrderHistoryWidget from './widgets/OrderHistoryWidget';
|
|
||||||
import QueryCountDashboardWidget from './widgets/QueryCountDashboardWidget';
|
import QueryCountDashboardWidget from './widgets/QueryCountDashboardWidget';
|
||||||
import QueryDashboardWidget from './widgets/QueryDashboardWidget';
|
import QueryDashboardWidget from './widgets/QueryDashboardWidget';
|
||||||
import StocktakeDashboardWidget from './widgets/StocktakeDashboardWidget';
|
import StocktakeDashboardWidget from './widgets/StocktakeDashboardWidget';
|
||||||
@@ -218,26 +217,6 @@ function BuiltinQueryCountWidgets(): DashboardWidgetProps[] {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function BuiltinHistoryWidgets(): DashboardWidgetProps[] {
|
|
||||||
return [
|
|
||||||
OrderHistoryWidget({
|
|
||||||
modelType: ModelType.build
|
|
||||||
}),
|
|
||||||
OrderHistoryWidget({
|
|
||||||
modelType: ModelType.salesorder
|
|
||||||
}),
|
|
||||||
OrderHistoryWidget({
|
|
||||||
modelType: ModelType.purchaseorder
|
|
||||||
}),
|
|
||||||
OrderHistoryWidget({
|
|
||||||
modelType: ModelType.returnorder
|
|
||||||
}),
|
|
||||||
OrderHistoryWidget({
|
|
||||||
modelType: ModelType.transferorder
|
|
||||||
})
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
function BuiltinGettingStartedWidgets(): DashboardWidgetProps[] {
|
function BuiltinGettingStartedWidgets(): DashboardWidgetProps[] {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
@@ -276,7 +255,6 @@ function BuiltinActionWidgets(): DashboardWidgetProps[] {
|
|||||||
export default function DashboardWidgetLibrary(): DashboardWidgetProps[] {
|
export default function DashboardWidgetLibrary(): DashboardWidgetProps[] {
|
||||||
return [
|
return [
|
||||||
...BuiltinQueryCountWidgets(),
|
...BuiltinQueryCountWidgets(),
|
||||||
...BuiltinHistoryWidgets(),
|
|
||||||
...BuiltinGettingStartedWidgets(),
|
...BuiltinGettingStartedWidgets(),
|
||||||
...BuiltinSettingsWidgets(),
|
...BuiltinSettingsWidgets(),
|
||||||
...BuiltinActionWidgets()
|
...BuiltinActionWidgets()
|
||||||
|
|||||||
@@ -1,135 +0,0 @@
|
|||||||
import { ModelInformationDict } from '@lib/enums/ModelInformation';
|
|
||||||
import type { ModelType } from '@lib/enums/ModelType';
|
|
||||||
import { apiUrl } from '@lib/functions/Api';
|
|
||||||
import { StylishText } from '@lib/index';
|
|
||||||
import { t } from '@lingui/core/macro';
|
|
||||||
import { BarChart } from '@mantine/charts';
|
|
||||||
import { Box, LoadingOverlay, Stack } from '@mantine/core';
|
|
||||||
import { useDocumentVisibility } from '@mantine/hooks';
|
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import dayjs from 'dayjs';
|
|
||||||
import { useMemo } from 'react';
|
|
||||||
import { useApi } from '../../../contexts/ApiContext';
|
|
||||||
import { useUserState } from '../../../states/UserState';
|
|
||||||
import type { DashboardWidgetProps } from '../DashboardWidget';
|
|
||||||
|
|
||||||
function OrderHistoryComponent({
|
|
||||||
modelType,
|
|
||||||
title
|
|
||||||
}: {
|
|
||||||
modelType: ModelType;
|
|
||||||
title: string;
|
|
||||||
}) {
|
|
||||||
const modelInfo = useMemo(() => {
|
|
||||||
return ModelInformationDict[modelType];
|
|
||||||
}, [modelType]);
|
|
||||||
|
|
||||||
const url = useMemo(() => {
|
|
||||||
return apiUrl(modelInfo.api_endpoint);
|
|
||||||
}, [modelInfo]);
|
|
||||||
|
|
||||||
const api = useApi();
|
|
||||||
const visibility = useDocumentVisibility();
|
|
||||||
|
|
||||||
const endDate = dayjs().add(1, 'day').format('YYYY-MM-DD');
|
|
||||||
const startDate = dayjs()
|
|
||||||
.subtract(12, 'month')
|
|
||||||
.subtract(1, 'day')
|
|
||||||
.format('YYYY-MM-DD');
|
|
||||||
|
|
||||||
const params = {
|
|
||||||
completed_after: startDate,
|
|
||||||
completed_before: endDate
|
|
||||||
};
|
|
||||||
|
|
||||||
const query = useQuery({
|
|
||||||
queryKey: ['dashboard-order-summary', modelType, params, visibility],
|
|
||||||
enabled: visibility === 'visible',
|
|
||||||
refetchOnWindowFocus: true,
|
|
||||||
refetchOnMount: true,
|
|
||||||
refetchInterval: 10 * 60 * 1000, // 10 minute refetch interval
|
|
||||||
staleTime: 5 * 60 * 1000, // 5 minute stale time
|
|
||||||
queryFn: () => {
|
|
||||||
if (visibility !== 'visible') {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
return api.get(url, { params }).then((res) => {
|
|
||||||
return res.data ?? [];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const chartData = useMemo(() => {
|
|
||||||
const months = Array.from({ length: 13 }, (_, i) => ({
|
|
||||||
month: dayjs()
|
|
||||||
.subtract(12 - i, 'month')
|
|
||||||
.format('MMM YY'),
|
|
||||||
count: 0
|
|
||||||
}));
|
|
||||||
|
|
||||||
for (const order of query.data || []) {
|
|
||||||
// Build orders use `completion_date`; all other order types use `complete_date`
|
|
||||||
const dateStr =
|
|
||||||
order.complete_date ?? order.completion_date ?? order.shipment_date;
|
|
||||||
if (!dateStr) continue;
|
|
||||||
const label = dayjs(dateStr).format('MMM YY');
|
|
||||||
const entry = months.find((m) => m.month === label);
|
|
||||||
if (entry) entry.count++;
|
|
||||||
}
|
|
||||||
|
|
||||||
return months;
|
|
||||||
}, [query.data]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Stack gap='xs'>
|
|
||||||
<StylishText size='md'>{title}</StylishText>
|
|
||||||
<Box>
|
|
||||||
<LoadingOverlay visible={query.isLoading || query.isFetching} />
|
|
||||||
<BarChart
|
|
||||||
h={200}
|
|
||||||
data={chartData}
|
|
||||||
dataKey='month'
|
|
||||||
series={[{ name: 'count', label: t`Completed`, color: 'blue.6' }]}
|
|
||||||
withYAxis={false}
|
|
||||||
yAxisProps={{ domain: [0, 'auto'] }}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Display a simple chart of the number of completed orders per month, for the last 12 months.
|
|
||||||
*/
|
|
||||||
export default function OrderHistoryWidget({
|
|
||||||
modelType
|
|
||||||
}: {
|
|
||||||
modelType: ModelType;
|
|
||||||
}): DashboardWidgetProps {
|
|
||||||
const user = useUserState();
|
|
||||||
|
|
||||||
const modelInfo = useMemo(() => {
|
|
||||||
return ModelInformationDict[modelType];
|
|
||||||
}, [modelType]);
|
|
||||||
|
|
||||||
// Extract translated model labels
|
|
||||||
const models = modelInfo.label_multiple();
|
|
||||||
|
|
||||||
return {
|
|
||||||
label: `${modelType}-history`,
|
|
||||||
title: t`Completed ${models}`,
|
|
||||||
description: t`Display number of completed ${models} per month`,
|
|
||||||
minHeight: 2,
|
|
||||||
minWidth: 3,
|
|
||||||
modelType: modelType,
|
|
||||||
icon: 'chart_bar',
|
|
||||||
visible: () => user.hasViewPermission(modelType),
|
|
||||||
render: () => (
|
|
||||||
<OrderHistoryComponent
|
|
||||||
modelType={modelType}
|
|
||||||
title={t`Completed ${models}`}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user