bananas-commerce-admin
Version:
What's this, an admin for apes?
61 lines • 3.15 kB
JavaScript
import React, { useState } from "react";
import { useTheme } from "@mui/material/styles";
import BarChart from "../../../components/charts/BarChart";
import WidgetCard from "../../../components/WidgetCard";
import { useDashboardFilter } from "../../../contexts/DashboardFilterContext";
import { useI18n } from "../../../contexts/I18nContext";
import { granularityLabel } from "../../../types/dashboard";
const SubscriptionEventCountWidget = ({ data, sx, }) => {
const { filter } = useDashboardFilter();
const { t } = useI18n();
const theme = useTheme();
const [highlighted, setHighlighted] = useState("none");
const maxCount = Math.max(...data.map(({ created, started, cancelled, ended }) => Math.max(created, started, cancelled, ended)));
return (React.createElement(WidgetCard, { gridColumn: { md: "span 6", sm: "span 1" }, gridRow: "span 2", sx: sx, title: t(`${granularityLabel(filter.granularity)} Subscription Events`) },
React.createElement(BarChart, { dataKeyX: "timestamp", dataset: data.map(({ timestamp, ...stats }) => ({
timestamp: new Date(timestamp),
...stats,
})), granularity: filter.granularity, highlightedSerie: highlighted, legendProps: {
onItemClick: (_, context) => setHighlighted(highlighted !== context.seriesId ? context.seriesId : "none"),
}, series: [
{
id: "created",
label: "Created",
stack: "pending",
data: data.map(({ created }) => created),
color: theme.palette.info.light,
highlightScope: { fade: "global", highlight: "series" },
},
{
id: "started",
label: "Started",
stack: "running",
data: data.map(({ started }) => started),
color: theme.palette.success.main,
highlightScope: { fade: "global", highlight: "series" },
},
{
id: "cancelled",
label: "Cancelled",
stack: "pending",
data: data.map(({ cancelled }) => (cancelled === 0 ? 0 : -cancelled)),
color: theme.palette.warning.main,
highlightScope: { fade: "global", highlight: "series" },
},
{
id: "ended",
label: "Ended",
stack: "running",
data: data.map(({ ended }) => (ended === 0 ? 0 : -ended)),
color: theme.palette.error.light,
highlightScope: { fade: "global", highlight: "series" },
},
], yAxisOptions: {
min: maxCount < 10 ? -(maxCount + 1) : undefined,
max: maxCount < 10 ? maxCount + 1 : undefined,
tickNumber: undefined,
tickMinStep: 1,
} })));
};
export default SubscriptionEventCountWidget;
//# sourceMappingURL=SubscriptionEventCountWidget.js.map