@rsc-labs/medusa-store-analytics-v2
Version:
Get analytics data about your store
52 lines (51 loc) • 2.23 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { getLegendName } from "../../common/utils/chartUtils.js";
import { PieChart, Pie, Legend, Tooltip } from "recharts";
const ONE_TIME_LABEL_NAME = "One-time purchase";
const REPEAT_LABEL_NAME = "Repeat purchase";
function convertToChartData(distributions) {
if (distributions) {
if (distributions.orderOneTimeFrequency || distributions.orderRepeatFrequency) {
const oneTimeValue = distributions.orderOneTimeFrequency ? parseInt(distributions.orderOneTimeFrequency) : 0;
const repeatValue = distributions.orderRepeatFrequency ? parseInt(distributions.orderRepeatFrequency) : 0;
return [
{
name: ONE_TIME_LABEL_NAME,
value: oneTimeValue,
displayValue: ONE_TIME_LABEL_NAME
},
{
name: REPEAT_LABEL_NAME,
value: repeatValue,
displayValue: REPEAT_LABEL_NAME
}
];
}
}
return void 0;
}
const OrderFrequencyDistributionPieChart = ({ repeatCustomerRateResponse, compareEnabled }) => {
const currentData = convertToChartData(repeatCustomerRateResponse.analytics.current);
const previousData = convertToChartData(repeatCustomerRateResponse.analytics.previous);
const renderLabel = function(entry) {
return entry.displayValue;
};
return /* @__PURE__ */ jsxs(PieChart, { width: 500, height: 300, children: [
/* @__PURE__ */ jsx(Pie, { data: currentData, dataKey: "value", cx: "50%", cy: "50%", innerRadius: 40, outerRadius: 90, fill: "#82ca9d", label: renderLabel }),
compareEnabled && repeatCustomerRateResponse.analytics.dateRangeFromCompareTo && currentData !== void 0 && /* @__PURE__ */ jsx(Pie, { data: previousData, dataKey: "value", cx: "50%", cy: "50%", outerRadius: 30, fill: "#8884d8" }),
compareEnabled && repeatCustomerRateResponse.analytics.dateRangeFromCompareTo && /* @__PURE__ */ jsx(Legend, { payload: [
{
value: getLegendName(true),
color: "#82ca9d"
},
{
value: getLegendName(false),
color: "#8884d8"
}
], iconType: "circle" }),
/* @__PURE__ */ jsx(Tooltip, { formatter: (value) => `${value}%` })
] });
};
export {
OrderFrequencyDistributionPieChart
};