@licklist/design 0.44.530 → 0.44.532
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SourceOfSalesChart.d.ts","sourceRoot":"","sources":["../../../src/sales/source-of-sales/SourceOfSalesChart.tsx"],"names":[],"mappings":";AAMA,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,YAAY,EAAE,CAAC;CACtB;AAcD,iBAAS,kBAAkB,CAAC,EAAE,IAAI,EAAE,EAAE,kBAAkB,
|
|
1
|
+
{"version":3,"file":"SourceOfSalesChart.d.ts","sourceRoot":"","sources":["../../../src/sales/source-of-sales/SourceOfSalesChart.tsx"],"names":[],"mappings":";AAMA,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,YAAY,EAAE,CAAC;CACtB;AAcD,iBAAS,kBAAkB,CAAC,EAAE,IAAI,EAAE,EAAE,kBAAkB,eA4FvD;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("tslib"),t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-i18next"),c=require("react-intl"),l=require("recharts"),o="affiliates";exports.SourceOfSalesChart=function(e){var i=e.data,s=t.useMemo((function(){return a.__spreadArray(a.__spreadArray([],a.__read(i),!1),[{source:2,name:o}],!1)}),[i]),u=n.useTranslation("Design").t,d=c.useIntl().formatNumber,m=a.__read(t.useState(44),2),p=m[0],f=m[1];return t.useEffect((function(){s.length>0&&f(44-22*s.length)}),[s]),r.createElement("div",{className:"source-of-sales"},r.createElement("div",{className:"source-of-sales__header"},u("sourceOfSales")),r.createElement("div",{className:"source-of-sales__pie-chart"}
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,a=require("tslib"),t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-i18next"),c=require("react-intl"),l=require("recharts"),o="affiliates";exports.SourceOfSalesChart=function(e){var i=e.data,s=t.useMemo((function(){return a.__spreadArray(a.__spreadArray([],a.__read(i),!1),[{source:2,name:o}],!1)}),[i.length]),u=n.useTranslation("Design").t,d=c.useIntl().formatNumber,m=a.__read(t.useState(44),2),p=m[0],f=m[1];return t.useEffect((function(){s.length>0&&f(44-22*s.length)}),[s]),r.createElement("div",{className:"source-of-sales"},r.createElement("div",{className:"source-of-sales__header"},u("sourceOfSales")),r.createElement("div",{className:"source-of-sales__pie-chart"},!!i.length&&r.createElement(l.ResponsiveContainer,{debounce:100,width:"100%",height:"100%"},r.createElement(l.PieChart,null,r.createElement(l.Legend,{iconType:"circle",wrapperStyle:{left:170,top:20},layout:"vertical",verticalAlign:"top",content:function(e){var a=e.payload;return r.createElement(r.Fragment,null,a.map((function(e,a){var t,n,c,l=(null===(t=e.payload)||void 0===t?void 0:t.name)===o?"":" - ".concat(d(null===(n=e.payload)||void 0===n?void 0:n.percent,{style:"percent"})),i="iframe"===e.payload.name?"website":e.payload.name;return r.createElement("div",{className:"legend",key:"item-".concat(e.payload.source)},r.createElement("div",{className:"bullet-point colors-".concat((null===(c=e.payload)||void 0===c?void 0:c.name)===o?"pink":a%4)}),"".concat(u("".concat(i)),"\n ").concat(l))})))}}),r.createElement(l.Pie,{data:s,cx:80,cy:p,innerRadius:40,outerRadius:48,dataKey:"percentage"},i.map((function(e,a){var t=e.source;return r.createElement(l.Cell,{className:"colors-".concat(a%4),key:"cell-".concat(t)})})))))))};
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useState, useMemo, useEffect } from "react";
|
|
2
2
|
import { useTranslation } from "react-i18next";
|
|
3
3
|
import { useIntl } from "react-intl";
|
|
4
4
|
|
|
@@ -35,7 +35,8 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
|
|
|
35
35
|
name: AFFILIATES,
|
|
36
36
|
},
|
|
37
37
|
],
|
|
38
|
-
|
|
38
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
39
|
+
[data.length]
|
|
39
40
|
);
|
|
40
41
|
const { t } = useTranslation("Design");
|
|
41
42
|
const { formatNumber } = useIntl();
|
|
@@ -86,32 +87,34 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
|
|
|
86
87
|
<div className="source-of-sales">
|
|
87
88
|
<div className="source-of-sales__header">{t("sourceOfSales")}</div>
|
|
88
89
|
<div className="source-of-sales__pie-chart">
|
|
89
|
-
|
|
90
|
-
<
|
|
91
|
-
<
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
90
|
+
{!!data.length && (
|
|
91
|
+
<ResponsiveContainer debounce={100} width="100%" height="100%">
|
|
92
|
+
<PieChart>
|
|
93
|
+
<Legend
|
|
94
|
+
iconType="circle"
|
|
95
|
+
wrapperStyle={{ left: 170, top: 20 }}
|
|
96
|
+
layout="vertical"
|
|
97
|
+
verticalAlign="top"
|
|
98
|
+
content={legendRenderer}
|
|
99
|
+
/>
|
|
100
|
+
<Pie
|
|
101
|
+
data={extendedData}
|
|
102
|
+
cx={80}
|
|
103
|
+
cy={defaultCYPosition}
|
|
104
|
+
innerRadius={40}
|
|
105
|
+
outerRadius={48}
|
|
106
|
+
dataKey="percentage"
|
|
107
|
+
>
|
|
108
|
+
{data.map(({ source }: PieChartData, index) => (
|
|
109
|
+
<Cell
|
|
110
|
+
className={`colors-${index % 4}`}
|
|
111
|
+
key={`cell-${source}`}
|
|
112
|
+
/>
|
|
113
|
+
))}
|
|
114
|
+
</Pie>
|
|
115
|
+
</PieChart>
|
|
116
|
+
</ResponsiveContainer>
|
|
117
|
+
)}
|
|
115
118
|
</div>
|
|
116
119
|
</div>
|
|
117
120
|
);
|