@rsc-labs/medusa-store-analytics
Version:
Get analytics data about your store
60 lines (59 loc) • 3.17 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.OrderFrequencyDistributionPieChart = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/*
* Copyright 2024 RSC-Labs, https://rsoftcon.com/
*
* MIT License
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const chartUtils_1 = require("../../common/utils/chartUtils");
const recharts_1 = require("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 undefined;
}
const OrderFrequencyDistributionPieChart = ({ repeatCustomerRateResponse, compareEnabled }) => {
const currentData = convertToChartData(repeatCustomerRateResponse.analytics.current);
const previousData = convertToChartData(repeatCustomerRateResponse.analytics.previous);
const renderLabel = function (entry) {
return entry.displayValue;
};
return ((0, jsx_runtime_1.jsxs)(recharts_1.PieChart, { width: 500, height: 300, children: [(0, jsx_runtime_1.jsx)(recharts_1.Pie, { data: currentData, dataKey: "value", cx: "50%", cy: "50%", innerRadius: 40, outerRadius: 90, fill: "#82ca9d", label: renderLabel }), compareEnabled && repeatCustomerRateResponse.analytics.dateRangeFromCompareTo && currentData !== undefined &&
(0, jsx_runtime_1.jsx)(recharts_1.Pie, { data: previousData, dataKey: "value", cx: "50%", cy: "50%", outerRadius: 30, fill: "#8884d8" }), (compareEnabled && repeatCustomerRateResponse.analytics.dateRangeFromCompareTo) && (0, jsx_runtime_1.jsx)(recharts_1.Legend, { payload: [
{
value: (0, chartUtils_1.getLegendName)(true),
color: "#82ca9d"
},
{
value: (0, chartUtils_1.getLegendName)(false),
color: "#8884d8"
}
], iconType: "circle" }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { formatter: (value) => `${value}%` })] }));
};
exports.OrderFrequencyDistributionPieChart = OrderFrequencyDistributionPieChart;