+
+ {metrics?.map(({ label, value, formatValue }) => {
+ return ;
+ })}
+
+ {ATTRIBUTION_PARAMS.map(({ value, label }) => {
+ const items = data[value];
+ const total = items.reduce((sum, { value }) => {
+ return +sum + +value;
+ }, 0);
+
+ const chartData = {
+ labels: items.map(({ name }) => name),
+ datasets: [
+ {
+ data: items.map(({ value }) => value),
+ backgroundColor: CHART_COLORS,
+ borderWidth: 0,
+ },
+ ],
+ };
+
+ return (
+
+
+
{label}
({
+ metric={formatMessage(currency ? labels.revenue : labels.visitors)}
+ currency={currency}
+ data={items.map(({ name, value }) => ({
x: name,
y: Number(value),
- z: (value / data?.total.sum) * 100,
+ z: (value / total) * 100,
}))}
- renderLabel={renderCountryName}
/>
-
-
- >
- )}
- {showTable && }
-
- >
+
+
+
+ );
+ })}
+