bananas-commerce-admin
Version:
What's this, an admin for apes?
61 lines • 4.17 kB
JavaScript
import React, { useMemo } from "react";
import { Stack, Typography } from "@mui/material";
import Chart from "../../../components/Chart";
import WidgetCard from "../../../components/WidgetCard";
import { useApi } from "../../../contexts/ApiContext";
import { useDashboardFilter } from "../../../contexts/DashboardFilterContext";
import { useI18n } from "../../../contexts/I18nContext";
import { useUser } from "../../../contexts/UserContext";
import { granularityLabel, pluralizeGranularity, } from "../../../types/dashboard";
import { hasPermission } from "../../../util/has_permission";
import { diffDatesByGranularityWithFilter } from "../utils/diffDatesByGranularity";
const PurchaseCountWidget = ({ data: initialData, sx }) => {
const { filter } = useDashboardFilter();
const data = initialData;
const { t } = useI18n();
const api = useApi();
const { user } = useUser();
const filteredAmount = useMemo(() => {
return diffDatesByGranularityWithFilter(filter);
}, [filter]);
const totalPurchases = useMemo(() => {
return data.reduce((acc, { count }) => acc + count, 0);
}, [data]);
const averagePurchases = useMemo(() => {
let average = totalPurchases / filteredAmount;
if (Number.isNaN(average))
average = 0;
const fixed = average.toFixed(1);
return Number.parseFloat(fixed).toString();
}, [totalPurchases, filteredAmount]);
const isFourColumn = useMemo(() => {
// Ugly check to see if the "Total Subscription Count" widget is present
if ("subscription.stats:total" in api.operations &&
"dashboard:stats:subscription:total" in api.contrib) {
const [{ component }] = Object.values(api.contrib["dashboard:stats:subscription:count"]);
if (component != null) {
return hasPermission(user, component.permission);
}
}
return false;
}, [api, user]);
return (React.createElement(React.Fragment, null,
React.createElement(WidgetCard, { gridColumn: { md: "span 6", sm: "span 1" }, gridRow: "span 2", sx: sx, title: t(`${granularityLabel(filter.granularity)} Purchases`) },
React.createElement(Chart, { charts: ["bar", "area"], csvFileName: "purchase_count", data: data.map((item) => ({ ...item })), dataKeyX: "date", dataKeyY: "count", dataTable: true })),
React.createElement(WidgetCard, { gridColumn: { md: isFourColumn ? "span 3" : "span 4", sm: "span 1" }, gridRow: "span 1", sx: sx, title: t("Purchase Count") },
React.createElement(Stack, { direction: "column", height: "100%", px: 2 },
React.createElement(Stack, { borderBottom: "1px solid", borderColor: "divider", height: "100%" },
React.createElement(Typography, { component: "p", fontSize: 28, fontWeight: 700, variant: "h5" }, totalPurchases.toLocaleString())),
React.createElement(Typography, { color: "textSecondary", variant: "overline" }, t(`Over ${pluralizeGranularity(filteredAmount, filter.granularity)}`)))),
React.createElement(WidgetCard, { gridColumn: { md: isFourColumn ? "span 3" : "span 4", sm: "span 1" }, gridRow: "span 1", sx: sx, title: t("Purchase Average") },
React.createElement(Stack, { height: "100%", px: 2 },
React.createElement(Stack, { borderBottom: "1px solid", borderColor: "divider", height: "100%" },
React.createElement(Stack, { alignItems: "baseline", direction: "row", flexWrap: "wrap", gap: 1 },
React.createElement(Typography, { component: "p", fontSize: 28, fontWeight: 700, variant: "h5" }, averagePurchases),
React.createElement(Typography, { color: "textSecondary", fontSize: 18, pb: 1, textTransform: "uppercase" },
"/\u00A0",
filter.granularity))),
React.createElement(Typography, { color: "textSecondary", variant: "overline" }, t(`Over ${pluralizeGranularity(filteredAmount, filter.granularity)}`))))));
};
export default PurchaseCountWidget;
//# sourceMappingURL=PurchaseCountWidget.js.map