bananas-commerce-admin 0.17.5 → 0.17.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5,20 +5,27 @@ import WidgetCard from "../../../components/WidgetCard";
|
|
|
5
5
|
import { useDashboardFilter } from "../../../contexts/DashboardFilterContext";
|
|
6
6
|
import { useI18n } from "../../../contexts/I18nContext";
|
|
7
7
|
import { granularityLabel } from "../../../types/dashboard";
|
|
8
|
-
const
|
|
8
|
+
const calculateStep = (value, steps = 5) => {
|
|
9
|
+
const exponent = Math.floor(Math.log10(value / steps));
|
|
10
|
+
const base = 10 ** exponent;
|
|
11
|
+
return Math.ceil(value / steps / base) * base;
|
|
12
|
+
};
|
|
13
|
+
const ceilToStep = (value, step) => value + (step - (value % step));
|
|
9
14
|
const RunningSubscriptionCountWidget = ({ data, }) => {
|
|
10
15
|
const { filter } = useDashboardFilter();
|
|
11
16
|
const { t } = useI18n();
|
|
12
17
|
const theme = useTheme();
|
|
13
18
|
const [highlighted, setHighlighted] = useState("none");
|
|
14
|
-
const [series, yMax] = useMemo(() => {
|
|
19
|
+
const [series, yMax, yTickStep] = useMemo(() => {
|
|
15
20
|
const pendingMax = Math.max(...data.map(({ pending }) => pending));
|
|
16
21
|
const runningMax = Math.max(...data.map(({ running }) => running));
|
|
17
|
-
const
|
|
18
|
-
?
|
|
22
|
+
const max = highlighted === "none"
|
|
23
|
+
? Math.max(pendingMax, runningMax)
|
|
19
24
|
: highlighted === "pending"
|
|
20
|
-
?
|
|
21
|
-
:
|
|
25
|
+
? pendingMax
|
|
26
|
+
: runningMax;
|
|
27
|
+
const yTickStep = Math.max(calculateStep(max, 5), 1);
|
|
28
|
+
const yMax = ceilToStep(max, yTickStep);
|
|
22
29
|
const showPending = ["none", "pending"].includes(highlighted);
|
|
23
30
|
const showRunning = ["none", "running"].includes(highlighted);
|
|
24
31
|
const series = [
|
|
@@ -41,9 +48,9 @@ const RunningSubscriptionCountWidget = ({ data, }) => {
|
|
|
41
48
|
color: theme.palette.success.main,
|
|
42
49
|
},
|
|
43
50
|
];
|
|
44
|
-
return [series, yMax];
|
|
51
|
+
return [series, yMax, yTickStep];
|
|
45
52
|
}, [data, highlighted]);
|
|
46
|
-
return (React.createElement(WidgetCard, { gridColumn: { md: "1 / span 6", sm: "span 1" }, gridRow: { md: "1", xs: "1" }, title: t(`${granularityLabel(filter.granularity)}
|
|
53
|
+
return (React.createElement(WidgetCard, { gridColumn: { md: "1 / span 6", sm: "span 1" }, gridRow: { md: "1", xs: "1" }, title: t(`${granularityLabel(filter.granularity)} Subscriptions`) },
|
|
47
54
|
React.createElement(LineChart, { dataKeyX: "timestamp", dataset: data.map(({ timestamp, ...stats }) => ({
|
|
48
55
|
timestamp: new Date(timestamp),
|
|
49
56
|
...stats,
|
|
@@ -51,6 +58,7 @@ const RunningSubscriptionCountWidget = ({ data, }) => {
|
|
|
51
58
|
onItemClick: (_, context) => setHighlighted(highlighted !== context.seriesId ? context.seriesId : "none"),
|
|
52
59
|
}, series: series, yAxisOptions: {
|
|
53
60
|
max: yMax,
|
|
61
|
+
tickMinStep: yTickStep,
|
|
54
62
|
} })));
|
|
55
63
|
};
|
|
56
64
|
export default RunningSubscriptionCountWidget;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RunningSubscriptionCountWidget.js","sourceRoot":"","sources":["../../../../../src/extensions/subscription/contrib/RunningSubscriptionCountWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIhD,OAAO,SAAS,MAAM,sCAAsC,CAAC;AAC7D,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,MAAM,
|
|
1
|
+
{"version":3,"file":"RunningSubscriptionCountWidget.js","sourceRoot":"","sources":["../../../../../src/extensions/subscription/contrib/RunningSubscriptionCountWidget.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -12,7 +12,13 @@ import { ContribComponent } from "../../../types";
|
|
|
12
12
|
import { granularityLabel } from "../../../types/dashboard";
|
|
13
13
|
import { SubscriptionStateCountItem } from "../types/stats";
|
|
14
14
|
|
|
15
|
-
const
|
|
15
|
+
const calculateStep = (value: number, steps: number = 5) => {
|
|
16
|
+
const exponent = Math.floor(Math.log10(value / steps));
|
|
17
|
+
const base = 10 ** exponent;
|
|
18
|
+
return Math.ceil(value / steps / base) * base;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
const ceilToStep = (value: number, step: number) => value + (step - (value % step));
|
|
16
22
|
|
|
17
23
|
const RunningSubscriptionCountWidget: ContribComponent<SubscriptionStateCountItem[]> = ({
|
|
18
24
|
data,
|
|
@@ -23,15 +29,19 @@ const RunningSubscriptionCountWidget: ContribComponent<SubscriptionStateCountIte
|
|
|
23
29
|
|
|
24
30
|
const [highlighted, setHighlighted] = useState<SeriesId>("none");
|
|
25
31
|
|
|
26
|
-
const [series, yMax] = useMemo(() => {
|
|
32
|
+
const [series, yMax, yTickStep] = useMemo(() => {
|
|
27
33
|
const pendingMax = Math.max(...data.map(({ pending }) => pending));
|
|
28
34
|
const runningMax = Math.max(...data.map(({ running }) => running));
|
|
29
|
-
|
|
35
|
+
|
|
36
|
+
const max =
|
|
30
37
|
highlighted === "none"
|
|
31
|
-
?
|
|
38
|
+
? Math.max(pendingMax, runningMax)
|
|
32
39
|
: highlighted === "pending"
|
|
33
|
-
?
|
|
34
|
-
:
|
|
40
|
+
? pendingMax
|
|
41
|
+
: runningMax;
|
|
42
|
+
|
|
43
|
+
const yTickStep = Math.max(calculateStep(max, 5), 1);
|
|
44
|
+
const yMax = ceilToStep(max, yTickStep);
|
|
35
45
|
|
|
36
46
|
const showPending = (["none", "pending"] as SeriesId[]).includes(highlighted);
|
|
37
47
|
const showRunning = (["none", "running"] as SeriesId[]).includes(highlighted);
|
|
@@ -57,14 +67,14 @@ const RunningSubscriptionCountWidget: ContribComponent<SubscriptionStateCountIte
|
|
|
57
67
|
},
|
|
58
68
|
] as LineSeriesType[];
|
|
59
69
|
|
|
60
|
-
return [series, yMax];
|
|
70
|
+
return [series, yMax, yTickStep];
|
|
61
71
|
}, [data, highlighted]);
|
|
62
72
|
|
|
63
73
|
return (
|
|
64
74
|
<WidgetCard
|
|
65
75
|
gridColumn={{ md: "1 / span 6", sm: "span 1" }}
|
|
66
76
|
gridRow={{ md: "1", xs: "1" }}
|
|
67
|
-
title={t(`${granularityLabel(filter.granularity)}
|
|
77
|
+
title={t(`${granularityLabel(filter.granularity)} Subscriptions`)}
|
|
68
78
|
>
|
|
69
79
|
<LineChart
|
|
70
80
|
dataKeyX="timestamp"
|
|
@@ -80,6 +90,7 @@ const RunningSubscriptionCountWidget: ContribComponent<SubscriptionStateCountIte
|
|
|
80
90
|
series={series}
|
|
81
91
|
yAxisOptions={{
|
|
82
92
|
max: yMax,
|
|
93
|
+
tickMinStep: yTickStep,
|
|
83
94
|
}}
|
|
84
95
|
/>
|
|
85
96
|
</WidgetCard>
|