@rsc-labs/medusa-store-analytics-v2/.medusa/server/ui-components/orders/orders-payment-provider-chart.js

Get analytics data about your store

import { jsxs, jsx } from "react/jsx-runtime";
import { getLegendName } from "../common/utils/chartUtils.js";
import { PieChart, Pie, Legend, Tooltip } from "recharts";
import { Container, Text } from "@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 void 0;
}
const ChartCustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return /* @__PURE__ */ jsxs(Container, { children: [
      /* @__PURE__ */ jsx(Text, { children: `${payload[0].payload.value}%` }),
      /* @__PURE__ */ jsx(Text, { children: `Provider: ${payload[0].payload.name}` }),
      /* @__PURE__ */ jsx(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 /* @__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 && ordersPaymentProviderResponse.analytics.dateRangeFromCompareTo && /* @__PURE__ */ jsx(Pie, { data: previousData, dataKey: "value", cx: "50%", cy: "50%", outerRadius: 30, fill: "#8884d8" }),
    compareEnabled && ordersPaymentProviderResponse.analytics.dateRangeFromCompareTo && /* @__PURE__ */ jsx(Legend, { payload: [
      {
        value: getLegendName(true),
        color: "#82ca9d"
      },
      {
        value: getLegendName(false),
        color: "#8884d8"
      }
    ], iconType: "circle" }),
    /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(ChartCustomTooltip, { active: false, payload: [], label: "" }) })
  ] });
};
export {
  OrdersPaymentProviderPieChart
};