@rsc-labs/medusa-store-analytics
Version:
Get analytics data about your store
57 lines (56 loc) • 3.29 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.OrdersPaymentProviderPieChart = 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 ui_1 = require("@medusajs/ui");
function convertToChartData(ordersPaymentProviders) {
if (ordersPaymentProviders.length) {
return ordersPaymentProviders.map(ordersPaymentProvider => {
return {
name: ordersPaymentProvider.paymentProviderId,
value: parseFloat(ordersPaymentProvider.percentage),
displayValue: ordersPaymentProvider.paymentProviderId,
orderCount: ordersPaymentProvider.orderCount,
};
});
}
return undefined;
}
const ChartCustomTooltip = ({ active, payload, label }) => {
if (active && payload && payload.length) {
return ((0, jsx_runtime_1.jsxs)(ui_1.Container, { children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { children: `${payload[0].payload.value}%` }), (0, jsx_runtime_1.jsx)(ui_1.Text, { children: `Provider: ${payload[0].payload.name}` }), (0, jsx_runtime_1.jsx)(ui_1.Text, { children: `Order count: ${payload[0].payload.orderCount}` })] }));
}
return null;
};
const OrdersPaymentProviderPieChart = ({ ordersPaymentProviderResponse, compareEnabled }) => {
const currentData = convertToChartData(ordersPaymentProviderResponse.analytics.current);
const previousData = convertToChartData(ordersPaymentProviderResponse.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 && ordersPaymentProviderResponse.analytics.dateRangeFromCompareTo &&
(0, jsx_runtime_1.jsx)(recharts_1.Pie, { data: previousData, dataKey: "value", cx: "50%", cy: "50%", outerRadius: 30, fill: "#8884d8" }), (compareEnabled && ordersPaymentProviderResponse.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, { content: (0, jsx_runtime_1.jsx)(ChartCustomTooltip, { active: false, payload: [], label: "" }) })] }));
};
exports.OrdersPaymentProviderPieChart = OrdersPaymentProviderPieChart;