@rango-dev/charts 0.8.2-next.7 → 0.8.2-next.8
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.
- package/dist/charts.build.json +1 -1
- package/dist/components/BarChart/BarChart.constants.d.ts +3 -33
- package/dist/components/BarChart/BarChart.constants.d.ts.map +1 -1
- package/dist/components/BarChart/BarChart.d.ts.map +1 -1
- package/dist/components/BarChart/BarChart.helpers.d.ts +1 -0
- package/dist/components/BarChart/BarChart.helpers.d.ts.map +1 -1
- package/dist/components/BarChart/BarChart.types.d.ts +5 -0
- package/dist/components/BarChart/BarChart.types.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +3 -3
- package/package.json +2 -2
- package/src/components/BarChart/BarChart.constants.ts +7 -1
- package/src/components/BarChart/BarChart.helpers.ts +5 -0
- package/src/components/BarChart/BarChart.tsx +18 -4
- package/src/components/BarChart/BarChart.types.ts +6 -0
package/dist/charts.build.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"src/hooks/useIsMobile.ts":{"bytes":494,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/utils/amountConverter.ts":{"bytes":1092,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/utils/common.ts":{"bytes":381,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/components/BarChart/BarChart.constants.ts":{"bytes":
|
|
1
|
+
{"inputs":{"src/hooks/useIsMobile.ts":{"bytes":494,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/utils/amountConverter.ts":{"bytes":1092,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/utils/common.ts":{"bytes":381,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/components/BarChart/BarChart.constants.ts":{"bytes":1033,"imports":[],"format":"esm"},"src/components/BarChart/BarChart.helpers.ts":{"bytes":4337,"imports":[{"path":"src/components/BarChart/BarChart.constants.ts","kind":"import-statement","original":"./BarChart.constants.js"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/components/BarChart/BarChart.styles.ts":{"bytes":1117,"imports":[{"path":"@rango-dev/ui","kind":"import-statement","external":true}],"format":"esm"},"src/components/BarChart/BarChart.tsx":{"bytes":11717,"imports":[{"path":"@rango-dev/ui","kind":"import-statement","external":true},{"path":"@visx/axis","kind":"import-statement","external":true},{"path":"@visx/event","kind":"import-statement","external":true},{"path":"@visx/grid","kind":"import-statement","external":true},{"path":"@visx/group","kind":"import-statement","external":true},{"path":"@visx/scale","kind":"import-statement","external":true},{"path":"@visx/shape","kind":"import-statement","external":true},{"path":"@visx/tooltip","kind":"import-statement","external":true},{"path":"dayjs","kind":"import-statement","external":true},{"path":"dayjs/plugin/utc.js","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/hooks/useIsMobile.ts","kind":"import-statement","original":"../../hooks/useIsMobile.js"},{"path":"src/utils/amountConverter.ts","kind":"import-statement","original":"../../utils/amountConverter.js"},{"path":"src/utils/common.ts","kind":"import-statement","original":"../../utils/common.js"},{"path":"src/components/BarChart/BarChart.constants.ts","kind":"import-statement","original":"./BarChart.constants.js"},{"path":"src/components/BarChart/BarChart.helpers.ts","kind":"import-statement","original":"./BarChart.helpers.js"},{"path":"src/components/BarChart/BarChart.styles.ts","kind":"import-statement","original":"./BarChart.styles.js"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/components/BarChart/index.ts":{"bytes":248,"imports":[{"path":"src/components/BarChart/BarChart.tsx","kind":"import-statement","original":"./BarChart.js"},{"path":"src/components/BarChart/BarChart.helpers.ts","kind":"import-statement","original":"./BarChart.helpers.js"}],"format":"esm"},"src/index.ts":{"bytes":235,"imports":[{"path":"src/components/BarChart/index.ts","kind":"import-statement","original":"./components/BarChart/index.js"}],"format":"esm"}},"outputs":{"dist/index.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":33657},"dist/index.js":{"imports":[{"path":"@rango-dev/ui","kind":"import-statement","external":true},{"path":"@visx/axis","kind":"import-statement","external":true},{"path":"@visx/event","kind":"import-statement","external":true},{"path":"@visx/grid","kind":"import-statement","external":true},{"path":"@visx/group","kind":"import-statement","external":true},{"path":"@visx/scale","kind":"import-statement","external":true},{"path":"@visx/shape","kind":"import-statement","external":true},{"path":"@visx/tooltip","kind":"import-statement","external":true},{"path":"dayjs","kind":"import-statement","external":true},{"path":"dayjs/plugin/utc.js","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@rango-dev/ui","kind":"import-statement","external":true}],"exports":["BarChart","prepareBarChartData"],"entryPoint":"src/index.ts","inputs":{"src/components/BarChart/BarChart.tsx":{"bytesInOutput":3977},"src/hooks/useIsMobile.ts":{"bytesInOutput":269},"src/utils/amountConverter.ts":{"bytesInOutput":318},"src/utils/common.ts":{"bytesInOutput":129},"src/components/BarChart/BarChart.constants.ts":{"bytesInOutput":566},"src/components/BarChart/BarChart.helpers.ts":{"bytesInOutput":1285},"src/components/BarChart/BarChart.styles.ts":{"bytesInOutput":756},"src/components/BarChart/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":7464}}}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { BottomAxisData } from './BarChart.types.js';
|
|
1
2
|
export declare const DEFAULT_MARGIN: {
|
|
2
3
|
top: number;
|
|
3
4
|
right: number;
|
|
@@ -8,39 +9,8 @@ export declare const TOOLTIP_DELAY_MS = 100;
|
|
|
8
9
|
export declare const TOOLTIP_HIDE_DELAY_MS = 300;
|
|
9
10
|
export declare const DEFAULT_CHART_COLORS: string[];
|
|
10
11
|
export declare const bottomAxisData: {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
numBottomAxis: number;
|
|
14
|
-
startBottomAxis: number;
|
|
15
|
-
intervalBottomAxis: number;
|
|
16
|
-
};
|
|
17
|
-
30: {
|
|
18
|
-
numBottomAxis: number;
|
|
19
|
-
startBottomAxis: number;
|
|
20
|
-
intervalBottomAxis: number;
|
|
21
|
-
};
|
|
22
|
-
90: {
|
|
23
|
-
numBottomAxis: number;
|
|
24
|
-
startBottomAxis: number;
|
|
25
|
-
intervalBottomAxis: number;
|
|
26
|
-
};
|
|
27
|
-
};
|
|
28
|
-
mobile: {
|
|
29
|
-
7: {
|
|
30
|
-
numBottomAxis: number;
|
|
31
|
-
startBottomAxis: number;
|
|
32
|
-
intervalBottomAxis: number;
|
|
33
|
-
};
|
|
34
|
-
30: {
|
|
35
|
-
numBottomAxis: number;
|
|
36
|
-
startBottomAxis: number;
|
|
37
|
-
intervalBottomAxis: number;
|
|
38
|
-
};
|
|
39
|
-
90: {
|
|
40
|
-
numBottomAxis: number;
|
|
41
|
-
startBottomAxis: number;
|
|
42
|
-
intervalBottomAxis: number;
|
|
43
|
-
};
|
|
12
|
+
[key: string]: {
|
|
13
|
+
[key: number]: BottomAxisData;
|
|
44
14
|
};
|
|
45
15
|
};
|
|
46
16
|
export declare const MAX_BAR_BUCKETS = 10;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.constants.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc;;;;;CAA6C,CAAC;AAEzE,eAAO,MAAM,gBAAgB,MAAM,CAAC;AACpC,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAaxC,CAAC;AAEF,eAAO,MAAM,cAAc
|
|
1
|
+
{"version":3,"file":"BarChart.constants.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,eAAO,MAAM,cAAc;;;;;CAA6C,CAAC;AAEzE,eAAO,MAAM,gBAAgB,MAAM,CAAC;AACpC,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAaxC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,CAAC;KAC/B,CAAC;CAYH,CAAC;AAEF,eAAO,MAAM,eAAe,KAAK,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,
|
|
1
|
+
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAIlB,MAAM,qBAAqB,CAAC;AAa7B,OAAO,KAAsC,MAAM,OAAO,CAAC;AAmC3D,eAAO,MAAM,QAAQ,UAAW,iBAAiB,6BA0VhD,CAAC"}
|
|
@@ -8,4 +8,5 @@ export declare const prepareBarChartData: (chartOption: ChartOptionsType) => {
|
|
|
8
8
|
colorBucketMap: ColorBucketMapType;
|
|
9
9
|
buckets: string[];
|
|
10
10
|
};
|
|
11
|
+
export declare const getEvenlySpacedNumber: (max: number, count: number) => number;
|
|
11
12
|
//# sourceMappingURL=BarChart.helpers.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.helpers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,EAEnB,MAAM,qBAAqB,CAAC;AAI7B,eAAO,MAAM,kBAAkB,SACvB,gBAAgB,EAAE,WACf,MAAM,EAAE,aAclB,CAAC;AAGF,eAAO,MAAM,kBAAkB,UACtB,MAAM,EAAE,SACR,MAAM,YACH,MAAM,aAOjB,CAAC;AAEF,eAAO,MAAM,aAAa,eAAgB,gBAAgB,WAWzD,CAAC;AAEF,eAAO,MAAM,YAAY,gBAAiB,MAAM,gBAQ/C,CAAC;AAEF,eAAO,MAAM,mBAAmB,gBAAiB,gBAAgB;;;;CAmFhE,CAAC"}
|
|
1
|
+
{"version":3,"file":"BarChart.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.helpers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,EAEnB,MAAM,qBAAqB,CAAC;AAI7B,eAAO,MAAM,kBAAkB,SACvB,gBAAgB,EAAE,WACf,MAAM,EAAE,aAclB,CAAC;AAGF,eAAO,MAAM,kBAAkB,UACtB,MAAM,EAAE,SACR,MAAM,YACH,MAAM,aAOjB,CAAC;AAEF,eAAO,MAAM,aAAa,eAAgB,gBAAgB,WAWzD,CAAC;AAEF,eAAO,MAAM,YAAY,gBAAiB,MAAM,gBAQ/C,CAAC;AAEF,eAAO,MAAM,mBAAmB,gBAAiB,gBAAgB;;;;CAmFhE,CAAC;AAEF,eAAO,MAAM,qBAAqB,QAAS,MAAM,SAAS,MAAM,WAG/D,CAAC"}
|
|
@@ -41,4 +41,9 @@ export type ChartOptionsType = {
|
|
|
41
41
|
barChartColors: string[];
|
|
42
42
|
label?: string;
|
|
43
43
|
};
|
|
44
|
+
export interface BottomAxisData {
|
|
45
|
+
numBottomAxis: number;
|
|
46
|
+
startBottomAxis: number;
|
|
47
|
+
intervalBottomAxis: number;
|
|
48
|
+
}
|
|
44
49
|
//# sourceMappingURL=BarChart.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.types.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAErE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,kBAAkB,CAAC;IACnC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAErD,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE;QACH,GAAG,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;QACnC,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC"}
|
|
1
|
+
{"version":3,"file":"BarChart.types.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAErE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,kBAAkB,CAAC;IACnC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAErD,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE;QACH,GAAG,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;QACnC,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;CAC5B"}
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var kt=Object.defineProperty;var
|
|
1
|
+
var kt=Object.defineProperty;var r=(t,e)=>kt(t,"name",{value:e,configurable:!0});import{Divider as st}from"@rango-dev/ui";import{AxisBottom as Mt,AxisLeft as Et}from"@visx/axis";import{localPoint as lt}from"@visx/event";import{Grid as Lt}from"@visx/grid";import{Group as Nt}from"@visx/group";import{scaleBand as wt,scaleLinear as Ot,scaleOrdinal as Ft}from"@visx/scale";import{BarStack as It}from"@visx/shape";import{TooltipWithBounds as $t,useTooltip as _t}from"@visx/tooltip";import pt from"dayjs";import Pt from"dayjs/plugin/utc.js";import a,{Fragment as Vt,useEffect as zt,useRef as Gt}from"react";import{useEffect as At,useState as Dt}from"react";var Ct=r(()=>{let[t,e]=Dt(!1);return At(()=>{let o=r(()=>{e(window.innerWidth<=640)},"handleResize");return o(),window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]),t},"useIsMobile"),G=Ct;var vt=["","K","M","B"];function O(t){let e=Math.sign(t),o=0;for(;Math.abs(t)>1e3;)o=o+1,t=Math.floor(Math.abs(t)/10)/100;return e*Math.abs(t)+vt[o]}r(O,"AmountConverter");function H(t){return!t||isNaN(t)?"0":Intl.NumberFormat("en-US",{notation:"compact",maximumFractionDigits:1}).format(t)}r(H,"compactNumberFormat");function U(t){let e=new Date(t),o=e.toLocaleDateString("en-US",{month:"short"});return`${e.getDate()} ${o}`}r(U,"getDayOfMonth");var j={top:40,right:0,bottom:0,left:20},R=100,W=300,Y=["#469BF5","#29DABA","#D629DA","#4658F5","#9DF546","#F01DA8","#FF8B66","#44F1E6","#29DA7A","#F17606","#8B62FF","#F4C932"],F={desktop:{7:{numBottomAxis:7,startBottomAxis:0,intervalBottomAxis:1},30:{numBottomAxis:6,startBottomAxis:4,intervalBottomAxis:5},90:{numBottomAxis:8,startBottomAxis:5,intervalBottomAxis:10}},mobile:{7:{numBottomAxis:3,startBottomAxis:1,intervalBottomAxis:2},30:{numBottomAxis:3,startBottomAxis:3,intervalBottomAxis:10},90:{numBottomAxis:3,startBottomAxis:10,intervalBottomAxis:30}}},E=10;var J=r((t,e)=>t.reduce((p,m)=>{let B=e.reduce((l,h)=>(l+=isNaN(Number(m[h]))?0:Number(m[h]),l),0);return p.push(B),p},[]),"getTotalValueDates"),K=r((t,e,o)=>{let p=[];for(let m=e;m<t.length;m+=o)p.push(t[m]);return p},"generateTickValues"),X=r(t=>{let e=0;return Object.keys(t).forEach(o=>{if(o!=="date"){let p=t[o];isNaN(Number(p))||(e+=Number(p))}}),e},"getTotalValue"),q=r(t=>t<15?7:t<50?30:90,"getDaysRange"),Q=r(t=>{let{dailyData:e,label:o="Count"}=t,p=[],m=new Map,B=[],{barChartColors:l}=t,h=new Map;e.forEach(i=>{let f=i.bucket||o,g=h.get(f)||0,c=i.value;h.set(f,g+c)});let d=Array.from(h).sort((i,f)=>f[1]-i[1]).map(i=>i[0]).slice(0,E),k=h.size;d.forEach((i,f)=>{m.set(i,l[f%l.length]),B.push(i)}),k>E&&(m.set("Others",l[l.length-1]),B.push("Others"));let b=new Map;return e.forEach(i=>{b.has(i.date)||b.set(i.date,[]),b.get(i.date)?.push(i)}),b.forEach((i,f)=>{let g={date:f};if(i.filter(c=>d.includes(c.bucket||o)).forEach(c=>{let T=c.value;g[c.bucket||o]=T?T.toString():"0"}),d.forEach(c=>{c in g||(g[c]="0")}),k>E){let T=i.filter(y=>y.bucket&&!d.includes(y.bucket)).map(y=>y.value).reduce((y,v)=>y+v,0);g.Others=T.toString()}p.push(g)}),{chartData:p,colorBucketMap:m,buckets:B}},"prepareBarChartData"),Z=r((t,e)=>{let o=t/e;return Math.round(o)},"getEvenlySpacedNumber");import{darkTheme as St,styled as C}from"@rango-dev/ui";var tt=C("div",{position:"relative"}),et=C("div",{width:165,borderRadius:"$sm",backgroundColor:"$background",$$color:"$colors$neutral500",[`.${St} &`]:{$$color:"$colors$neutral100"},boxShadow:"0px 5px 20px 0px $$color"}),ot=C("div",{display:"flex",alignItems:"center",fontSize:"$12",justifyContent:"space-between",padding:"$8 $10",fontWeight:"$medium",color:"$foreground"}),rt=C("div",{height:1,width:"100%",backgroundColor:"$neutral300"}),at=C("div",{display:"flex",alignItems:"center",justifyContent:"space-between",fontSize:"$10",padding:"$5 $10",color:"$foreground"}),nt=C("div",{width:"$6",height:"$6",borderRadius:3}),it=C("div",{display:"flex",alignItems:"center",justifyContent:"flex-start"});pt.extend(Pt);var ct=r(t=>{let{data:e,width:o,height:p,colorBucketMap:m,buckets:B,margin:l=j,getLabel:h,isDarkTheme:L=!1}=t,d=G(),k=q(e.length),b;if(e.length>90){let n=Z(e.length,7);b={numBottomAxis:7,intervalBottomAxis:n,startBottomAxis:n-10}}else b=o<700?F.mobile[k]:F.desktop[k];let{intervalBottomAxis:i,numBottomAxis:f,startBottomAxis:g}=b,c,T=Gt(null),y=o-l.left-20,v=p-l.top-30,N=r(s=>s.date,"getDate"),ut=e.map(N),mt=K(ut,g,i),{tooltipOpen:I,tooltipLeft:dt,tooltipTop:ht,tooltipData:A,hideTooltip:$,showTooltip:_}=_t(),ft=J(e,B),S=wt({domain:e.map(N),paddingInner:k===7?.3:.46,paddingOuter:k===90?1:.3}),P=Math.max(...ft),V=P+P/5,M=Ot({domain:[0,V<.5?.5:V],nice:!0}),xt=Ft({domain:B,range:Y});if(zt(()=>{function s(n){d&&T?.current&&!T.current.contains(n.target)&&$()}return r(s,"handleClickOutside"),document.addEventListener("click",s,!0),()=>{document.removeEventListener("click",s,!0)}},[T,d]),S.range([0,y]),M.range([v,0]),o<10)return null;let Bt=r((s,n,u)=>{if(d){c&&clearTimeout(c);let x=lt(s),D=n.x+n.width/2;setTimeout(()=>{_({tooltipData:{bar:n,hoveredIndex:u},tooltipTop:x?.y,tooltipLeft:D})},R)}},"handleBarClick"),gt=r(()=>{d||(c=window.setTimeout(()=>{$()},W))},"handleMouseLeave"),Tt=r((s,n,u)=>{if(!d){c&&clearTimeout(c);let x=lt(s),D=n.x+n.width/2+40;_({tooltipData:{bar:n,hoveredIndex:u},tooltipTop:x?.y,tooltipLeft:D})}},"handleMouseMove"),z=r(s=>O(Number(X(s).toFixed(2))),"getFormattedTotalValue");return a.createElement(tt,null,a.createElement("svg",{width:o,height:p},a.createElement("rect",{x:0,y:0,width:o,height:p,fill:"transparent",rx:14}),a.createElement(Lt,{top:l.top,left:l.left+10,xScale:S,yScale:M,width:y,height:v,stroke:"black",strokeOpacity:.1,numTicksRows:5,numTicksColumns:0,columnLineStyle:{display:"none"},rowLineStyle:{stroke:"#B8B8B8"}}),a.createElement(Nt,{top:l.top,left:l.left+10},a.createElement(It,{data:e,keys:B,x:N,xScale:S,yScale:M,color:xt},s=>s.map(n=>n.bars.map((u,x)=>{let yt=!(A?.hoveredIndex===x)&&I,bt=m.get(n.key)||u.color;return a.createElement("rect",{key:`bar-stack-${n.index}-${u.index}`,x:u.x,y:u.y,height:u.height,width:u.width,fill:bt,opacity:yt?.5:1,onClick:w=>Bt(w,u,x),onMouseLeave:gt,onMouseMove:w=>Tt(w,u,x)})})))),a.createElement(Mt,{top:v+l.top,left:l.left+10,scale:S,hideAxisLine:!0,hideTicks:!0,numTicks:f,tickValues:mt,tickFormat:s=>U(s),tickLabelProps:()=>({fontSize:d?10:12,fill:L?"#B8B8B8":"#A2A2A2",textAnchor:"middle"})}),a.createElement(Et,{hideAxisLine:!0,hideTicks:!0,numTicks:d?3:5,top:l.top,left:l.left,scale:M,tickFormat:s=>H(Number(s)),tickLabelProps:()=>({fontSize:d?10:12,fill:L?"#B8B8B8":"#A2A2A2",textAnchor:"middle"})})),A&&I&&a.createElement($t,{top:ht,left:dt,style:{backgroundColor:"transparent",boxShadow:"none",position:"absolute",zIndex:"99999999"}},a.createElement(et,{ref:T},A?.bar.bar.data.date&&a.createElement(ot,null,a.createElement("div",null,pt.utc(A.bar.bar.data.date).local().format("YYYY/MM/DD").toString()),a.createElement("div",null,h?h(z(A.bar.bar.data)):z(A.bar.bar.data))),Array.from(m).map(s=>{let[n,u]=s,x=A?.bar.bar.data[n],D=isNaN(Number(x))?"0":O(Number(Number(x).toFixed(2)));return a.createElement(Vt,{key:n},a.createElement(rt,null),a.createElement(at,null,a.createElement(it,null,a.createElement(nt,{style:{backgroundColor:u}}),a.createElement(st,{direction:"horizontal",size:"4"}),a.createElement("span",null,n)),a.createElement(st,{direction:"horizontal",size:"10"}),a.createElement("span",null,h?h(D):D)))}))))},"BarChart");export{ct as BarChart,Q as prepareBarChartData};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/components/BarChart/BarChart.tsx", "../src/hooks/useIsMobile.ts", "../src/utils/amountConverter.ts", "../src/utils/common.ts", "../src/components/BarChart/BarChart.constants.ts", "../src/components/BarChart/BarChart.helpers.ts", "../src/components/BarChart/BarChart.styles.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-magic-numbers */\nimport type {\n BarChartPropTypes,\n BarStackDataType,\n TooltipDataType,\n} from './BarChart.types.js';\nimport type { BarGroupBar, SeriesPoint } from '@visx/shape/lib/types';\n\nimport { Divider } from '@rango-dev/ui';\nimport { AxisBottom, AxisLeft } from '@visx/axis';\nimport { localPoint } from '@visx/event';\nimport { Grid } from '@visx/grid';\nimport { Group } from '@visx/group';\nimport { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';\nimport { BarStack } from '@visx/shape';\nimport { TooltipWithBounds, useTooltip } from '@visx/tooltip';\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc.js';\nimport React, { Fragment, useEffect, useRef } from 'react';\n\nimport useIsMobile from '../../hooks/useIsMobile.js';\nimport {\n AmountConverter,\n compactNumberFormat,\n} from '../../utils/amountConverter.js';\nimport { getDayOfMonth } from '../../utils/common.js';\n\nimport {\n bottomAxisData,\n DEFAULT_CHART_COLORS,\n DEFAULT_MARGIN,\n TOOLTIP_DELAY_MS,\n TOOLTIP_HIDE_DELAY_MS,\n} from './BarChart.constants.js';\nimport {\n generateTickValues,\n getDaysRange,\n getTotalValue,\n getTotalValueDates,\n} from './BarChart.helpers.js';\nimport {\n Circle,\n Container,\n InfoContainer,\n Line,\n NameWrapper,\n TooltipContainer,\n TooltipInfoRow,\n} from './BarChart.styles.js';\n\ndayjs.extend(utc);\n\nexport const BarChart = (props: BarChartPropTypes) => {\n const {\n data,\n width,\n height,\n colorBucketMap,\n buckets,\n margin = DEFAULT_MARGIN,\n getLabel,\n isDarkTheme = false,\n } = props;\n\n const isMobile = useIsMobile();\n const daysRange = getDaysRange(data.length);\n const bottomAxis =\n width < 700\n ? bottomAxisData.mobile[daysRange]\n : bottomAxisData.desktop[daysRange];\n\n const { intervalBottomAxis, numBottomAxis, startBottomAxis } = bottomAxis;\n\n let tooltipTimeout: number;\n const tooltipRef = useRef<HTMLInputElement>(null);\n\n // bounds\n const xMax = width - margin.left - 20;\n const yMax = height - margin.top - 30;\n\n // accessors\n const getDate = (d: BarStackDataType) => d.date;\n\n // handle bottom axis data\n const allDate = data.map(getDate);\n\n const bottomAxisValue = generateTickValues(\n allDate,\n startBottomAxis,\n intervalBottomAxis\n );\n\n const {\n tooltipOpen,\n tooltipLeft,\n tooltipTop,\n tooltipData,\n hideTooltip,\n showTooltip,\n } = useTooltip<TooltipDataType>();\n\n const totalValueDates = getTotalValueDates(data, buckets);\n\n // scales\n const dateScale = scaleBand<string>({\n domain: data.map(getDate),\n paddingInner: daysRange === 7 ? 0.3 : 0.46,\n paddingOuter: daysRange === 90 ? 1 : 0.3,\n });\n\n const totalValue = Math.max(...totalValueDates);\n\n const scaledMaxValue = totalValue + totalValue / 5;\n const valueScale = scaleLinear<number>({\n domain: [0, scaledMaxValue < 0.5 ? 0.5 : scaledMaxValue],\n nice: true,\n });\n const colorScale = scaleOrdinal<string, string>({\n domain: buckets,\n range: DEFAULT_CHART_COLORS,\n });\n\n useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n function handleClickOutside(event: any) {\n if (\n isMobile &&\n tooltipRef?.current &&\n !tooltipRef.current.contains(event.target)\n ) {\n hideTooltip();\n }\n }\n document.addEventListener('click', handleClickOutside, true);\n return () => {\n document.removeEventListener('click', handleClickOutside, true);\n };\n }, [tooltipRef, isMobile]);\n\n dateScale.range([0, xMax]);\n valueScale.range([yMax, 0]);\n\n if (width < 10) {\n return null;\n }\n\n const handleBarClick = (\n event: React.MouseEvent<SVGRectElement, MouseEvent>,\n bar: Omit<BarGroupBar<string>, 'key' | 'value'> & {\n bar: SeriesPoint<BarStackDataType>;\n key: string;\n },\n index: number\n ) => {\n if (isMobile) {\n if (tooltipTimeout) {\n clearTimeout(tooltipTimeout);\n }\n const eventSvgCoords = localPoint(event);\n const left = bar.x + bar.width / 2;\n setTimeout(() => {\n showTooltip({\n tooltipData: { bar, hoveredIndex: index },\n tooltipTop: eventSvgCoords?.y,\n tooltipLeft: left,\n });\n }, TOOLTIP_DELAY_MS);\n }\n };\n\n const handleMouseLeave = () => {\n if (!isMobile) {\n tooltipTimeout = window.setTimeout(() => {\n hideTooltip();\n }, TOOLTIP_HIDE_DELAY_MS);\n }\n };\n\n const handleMouseMove = (\n event: React.MouseEvent<SVGRectElement, MouseEvent>,\n bar: Omit<BarGroupBar<string>, 'key' | 'value'> & {\n bar: SeriesPoint<BarStackDataType>;\n key: string;\n },\n index: number\n ) => {\n if (!isMobile) {\n if (tooltipTimeout) {\n clearTimeout(tooltipTimeout);\n }\n /*\n * TooltipInPortal expects coordinates to be relative to containerRef\n * localPoint returns coordinates relative to the nearest SVG, which\n * is what containerRef is set to in this example.\n */\n const eventSvgCoords = localPoint(event);\n const left = bar.x + bar.width / 2 + 40;\n\n // make sure to pass the index of the hovered bar\n showTooltip({\n tooltipData: { bar, hoveredIndex: index },\n tooltipTop: eventSvgCoords?.y,\n tooltipLeft: left,\n });\n }\n };\n\n const getFormattedTotalValue = (data: BarStackDataType) =>\n AmountConverter(Number(getTotalValue(data).toFixed(2)));\n\n return (\n <Container>\n <svg width={width} height={height}>\n <rect\n x={0}\n y={0}\n width={width}\n height={height}\n fill=\"transparent\"\n rx={14}\n />\n <Grid\n top={margin.top}\n left={margin.left + 10}\n xScale={dateScale}\n yScale={valueScale}\n width={xMax}\n height={yMax}\n stroke=\"black\"\n strokeOpacity={0.1}\n numTicksRows={5}\n numTicksColumns={0}\n columnLineStyle={{ display: 'none' }}\n rowLineStyle={{\n stroke: '#B8B8B8',\n }}\n />\n\n <Group top={margin.top} left={margin.left + 10}>\n <BarStack\n data={data}\n keys={buckets}\n x={getDate}\n xScale={dateScale}\n yScale={valueScale}\n color={colorScale}>\n {(barStacks) => {\n /*\n * barStacks returns an array of series objects broken down by key.\n */\n return barStacks.map((barStack) =>\n /*\n * each barStack contains an array of bars, which contain the data\n * for only that series for a given data point. the number of bars in a\n * given stack corresponds to the number of data points in our data array\n */\n\n barStack.bars.map((bar, index) => {\n /*\n * we can then assume that the data in each stack at a given index\n * is related to the data in all other stacks at that index.\n */\n const shouldBeHighlighted =\n tooltipData?.hoveredIndex === index;\n\n /*\n * we can then decide the opacity for our stacks based on whether the\n * tooltip is open, and whether the stack being hovered matches the\n * index passed to our tooltipData\n */\n const shouldHavePartialOpacity =\n !shouldBeHighlighted && tooltipOpen;\n\n const barColor =\n colorBucketMap.get(barStack.key) || bar.color;\n\n return (\n <rect\n key={`bar-stack-${barStack.index}-${bar.index}`}\n x={bar.x}\n y={bar.y}\n height={bar.height}\n width={bar.width}\n fill={barColor}\n opacity={shouldHavePartialOpacity ? 0.5 : 1}\n onClick={(event) => handleBarClick(event, bar, index)}\n onMouseLeave={handleMouseLeave}\n onMouseMove={(event) =>\n handleMouseMove(event, bar, index)\n }\n />\n );\n })\n );\n }}\n </BarStack>\n </Group>\n\n <AxisBottom\n top={yMax + margin.top}\n left={margin.left + 10}\n scale={dateScale}\n hideAxisLine\n hideTicks\n numTicks={numBottomAxis}\n tickValues={bottomAxisValue}\n tickFormat={(d) => getDayOfMonth(d)}\n tickLabelProps={() => ({\n fontSize: isMobile ? 10 : 12,\n fill: isDarkTheme ? '#B8B8B8' : '#A2A2A2',\n textAnchor: 'middle',\n })}\n />\n\n <AxisLeft\n hideAxisLine\n hideTicks\n numTicks={isMobile ? 3 : 5}\n top={margin.top}\n left={margin.left}\n scale={valueScale}\n tickFormat={(d) => compactNumberFormat(Number(d))}\n tickLabelProps={() => ({\n fontSize: isMobile ? 10 : 12,\n fill: isDarkTheme ? '#B8B8B8' : '#A2A2A2',\n textAnchor: 'middle',\n })}\n />\n </svg>\n\n {tooltipData && tooltipOpen && (\n <TooltipWithBounds\n top={tooltipTop}\n left={tooltipLeft}\n style={{\n backgroundColor: 'transparent',\n boxShadow: 'none',\n position: 'absolute',\n zIndex: '99999999',\n }}>\n <TooltipContainer ref={tooltipRef}>\n {tooltipData?.bar.bar.data.date && (\n <TooltipInfoRow>\n <div>\n {dayjs\n .utc(tooltipData.bar.bar.data.date)\n .local()\n .format('YYYY/MM/DD')\n .toString()}\n </div>\n <div>\n {getLabel\n ? getLabel(getFormattedTotalValue(tooltipData.bar.bar.data))\n : getFormattedTotalValue(tooltipData.bar.bar.data)}\n </div>\n </TooltipInfoRow>\n )}\n {Array.from(colorBucketMap).map((mapItem) => {\n const [bucketItem, bucketColor] = mapItem;\n const value = tooltipData?.bar.bar.data[bucketItem];\n const formattedValue = !isNaN(Number(value))\n ? AmountConverter(Number(Number(value).toFixed(2)))\n : '0';\n return (\n <Fragment key={bucketItem}>\n <Line />\n <InfoContainer>\n <NameWrapper>\n <Circle style={{ backgroundColor: bucketColor }} />\n <Divider direction=\"horizontal\" size={'4'} />\n <span>{bucketItem}</span>\n </NameWrapper>\n <Divider direction=\"horizontal\" size={'10'} />\n\n <span>\n {getLabel ? getLabel(formattedValue) : formattedValue}\n </span>\n </InfoContainer>\n </Fragment>\n );\n })}\n </TooltipContainer>\n </TooltipWithBounds>\n )}\n </Container>\n );\n};\n", "import { useEffect, useState } from 'react';\n\nconst useIsMobile = () => {\n const [isMobile, setIsMobile] = useState<boolean>(false);\n\n useEffect(() => {\n const handleResize = () => {\n const mobileBreakpoint = 640;\n setIsMobile(window.innerWidth <= mobileBreakpoint);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return isMobile;\n};\n\nexport default useIsMobile;\n", "const THRESHOLD = 1000;\nconst BASE_TEN = 10;\nconst PERCENTAGE_MULTIPLIER = 100;\n\nconst unitList = ['', 'K', 'M', 'B'];\nexport function AmountConverter(number: number) {\n const sign = Math.sign(number);\n let unit = 0;\n while (Math.abs(number) > THRESHOLD) {\n unit = unit + 1;\n number = Math.floor(Math.abs(number) / BASE_TEN) / PERCENTAGE_MULTIPLIER;\n }\n return sign * Math.abs(number) + unitList[unit];\n}\n\nexport function getPercentageChange(\n input: number | null,\n output: number | null\n) {\n if (!input || !output) {\n return null;\n }\n return parseFloat(\n Number((output / input - 1) * PERCENTAGE_MULTIPLIER).toFixed(2)\n );\n}\n\nexport function numberWithCommas(number: number) {\n if (!number || isNaN(number)) {\n return number;\n }\n\n return number.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n}\n\nexport function compactNumberFormat(number: number) {\n if (!number || isNaN(number)) {\n return '0';\n }\n\n const numberFormat = Intl.NumberFormat('en-US', {\n notation: 'compact',\n maximumFractionDigits: 1,\n }).format(number);\n\n return numberFormat;\n}\n", "export const monthsShort = [\n 'Jan',\n 'Feb',\n 'Mar',\n 'Apr',\n 'May',\n 'Jun',\n 'Jul',\n 'Aug',\n 'Sep',\n 'Oct',\n 'Nov',\n 'Dec',\n];\n\nexport function getDayOfMonth(dateString: string) {\n const date = new Date(dateString);\n const monthName = date.toLocaleDateString('en-US', { month: 'short' });\n const dayNumber = date.getDate();\n\n return `${dayNumber} ${monthName}`;\n}\n", "export const DEFAULT_MARGIN = { top: 40, right: 0, bottom: 0, left: 20 };\n\nexport const TOOLTIP_DELAY_MS = 100;\nexport const TOOLTIP_HIDE_DELAY_MS = 300;\n\nexport const DEFAULT_CHART_COLORS: string[] = [\n '#469BF5',\n '#29DABA',\n '#D629DA',\n '#4658F5',\n '#9DF546',\n '#F01DA8',\n '#FF8B66',\n '#44F1E6',\n '#29DA7A',\n '#F17606',\n '#8B62FF',\n '#F4C932',\n];\n\nexport const bottomAxisData = {\n desktop: {\n 7: { numBottomAxis: 7, startBottomAxis: 0, intervalBottomAxis: 1 },\n 30: { numBottomAxis: 6, startBottomAxis: 4, intervalBottomAxis: 5 },\n 90: { numBottomAxis: 8, startBottomAxis: 5, intervalBottomAxis: 10 },\n },\n mobile: {\n 7: { numBottomAxis: 3, startBottomAxis: 1, intervalBottomAxis: 2 },\n 30: { numBottomAxis: 3, startBottomAxis: 3, intervalBottomAxis: 10 },\n 90: { numBottomAxis: 3, startBottomAxis: 10, intervalBottomAxis: 30 },\n },\n};\n\nexport const MAX_BAR_BUCKETS = 10;\n", "/* eslint-disable @typescript-eslint/no-magic-numbers */\nimport type {\n BarStackDataType,\n ChartOptionsType,\n ColorBucketMapType,\n DailyDataType,\n} from './BarChart.types.js';\n\nimport { MAX_BAR_BUCKETS } from './BarChart.constants.js';\n\nexport const getTotalValueDates = (\n data: BarStackDataType[],\n buckets: string[]\n) => {\n const totalValueDates = data.reduce((accumulator, currentData) => {\n const totalValuePerDate = buckets.reduce((dailyTotal, currentBucket) => {\n dailyTotal += !isNaN(Number(currentData[currentBucket]))\n ? Number(currentData[currentBucket])\n : 0;\n return dailyTotal;\n }, 0);\n accumulator.push(totalValuePerDate);\n return accumulator;\n }, [] as number[]);\n\n return totalValueDates;\n};\n\n// Function to generate tick values at intervals of 5, starting from the 5th element\nexport const generateTickValues = (\n dates: string[],\n start: number,\n interval: number\n) => {\n const tickValues = [];\n for (let i = start; i < dates.length; i += interval) {\n tickValues.push(dates[i]);\n }\n return tickValues;\n};\n\nexport const getTotalValue = (dataColumn: BarStackDataType) => {\n let result = 0;\n Object.keys(dataColumn).forEach((key) => {\n if (key !== 'date') {\n const value = dataColumn[key];\n if (!isNaN(Number(value))) {\n result += Number(value);\n }\n }\n });\n return result;\n};\n\nexport const getDaysRange = (lengthValue: number) => {\n if (lengthValue < 15) {\n return 7;\n }\n if (lengthValue < 50) {\n return 30;\n }\n return 90;\n};\n\nexport const prepareBarChartData = (chartOption: ChartOptionsType) => {\n const { dailyData, label = 'Count' } = chartOption;\n const chartData: BarStackDataType[] = [];\n const colorBucketMap: ColorBucketMapType = new Map();\n const buckets: string[] = [];\n\n const { barChartColors } = chartOption;\n\n // map sum of value for each bucket\n const sumBucketMap = new Map<string, number>();\n dailyData.forEach((dailyItem) => {\n const keyItem = dailyItem.bucket || label;\n\n const sum = sumBucketMap.get(keyItem) || 0;\n const newValue = dailyItem.value;\n sumBucketMap.set(keyItem, sum + newValue);\n });\n\n const sortedBucket = Array.from(sumBucketMap).sort((a, b) => b[1] - a[1]);\n\n // get top buckets for stack bars\n const topBucket = sortedBucket\n .map((sortedItem) => sortedItem[0])\n .slice(0, MAX_BAR_BUCKETS);\n\n const bucketCount = sumBucketMap.size;\n\n // create map structure for assign color for each bucket\n topBucket.forEach((bucketItem, index) => {\n colorBucketMap.set(\n bucketItem,\n barChartColors[index % barChartColors.length]\n );\n buckets.push(bucketItem);\n });\n\n if (bucketCount > MAX_BAR_BUCKETS) {\n colorBucketMap.set('Others', barChartColors[barChartColors.length - 1]);\n buckets.push('Others');\n }\n\n // create map structure for assign chart data for each date\n const dateMap = new Map<string, DailyDataType[]>();\n dailyData.forEach((dailyItem) => {\n if (!dateMap.has(dailyItem.date)) {\n dateMap.set(dailyItem.date, []);\n }\n\n const dateItem = dateMap.get(dailyItem.date);\n dateItem?.push(dailyItem);\n });\n\n // create data result for bar stack chart\n dateMap.forEach((dateDailyList, keyDate) => {\n const dataItem: BarStackDataType = { date: keyDate };\n dateDailyList\n .filter((dailyItem) => topBucket.includes(dailyItem.bucket || label))\n .forEach((topDailyItem) => {\n const bucketValue = topDailyItem.value;\n dataItem[topDailyItem.bucket || label] = bucketValue\n ? bucketValue.toString()\n : '0';\n });\n\n topBucket.forEach((topItem) => {\n if (!(topItem in dataItem)) {\n dataItem[topItem] = '0';\n }\n });\n\n if (bucketCount > MAX_BAR_BUCKETS) {\n const otherBuckets = dateDailyList.filter(\n (dailyItem) => dailyItem.bucket && !topBucket.includes(dailyItem.bucket)\n );\n const othersValue = otherBuckets\n .map((dailyItem) => dailyItem.value)\n .reduce((accumulator, currentValue) => accumulator + currentValue, 0);\n dataItem['Others'] = othersValue.toString();\n }\n\n chartData.push(dataItem);\n });\n return { chartData, colorBucketMap, buckets };\n};\n", "import { darkTheme, styled } from '@rango-dev/ui';\n\nexport const Container = styled('div', {\n position: 'relative',\n});\n\nexport const TooltipContainer = styled('div', {\n width: 165,\n borderRadius: '$sm',\n backgroundColor: '$background',\n\n $$color: '$colors$neutral500',\n [`.${darkTheme} &`]: {\n $$color: '$colors$neutral100',\n },\n\n boxShadow: '0px 5px 20px 0px $$color',\n});\n\nexport const TooltipInfoRow = styled('div', {\n display: 'flex',\n alignItems: 'center',\n fontSize: '$12',\n justifyContent: 'space-between',\n padding: '$8 $10',\n fontWeight: '$medium',\n color: '$foreground',\n});\n\nexport const Line = styled('div', {\n height: 1,\n width: '100%',\n backgroundColor: '$neutral300',\n});\n\nexport const InfoContainer = styled('div', {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n fontSize: '$10',\n padding: '$5 $10',\n color: '$foreground',\n});\n\nexport const Circle = styled('div', {\n width: '$6',\n height: '$6',\n borderRadius: 3,\n});\n\nexport const NameWrapper = styled('div', {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n});\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Divider", "AxisBottom", "AxisLeft", "localPoint", "Grid", "Group", "scaleBand", "scaleLinear", "scaleOrdinal", "BarStack", "TooltipWithBounds", "useTooltip", "dayjs", "utc", "React", "Fragment", "useEffect", "useRef", "useEffect", "useState", "useIsMobile", "__name", "isMobile", "setIsMobile", "useState", "useEffect", "handleResize", "useIsMobile_default", "unitList", "AmountConverter", "number", "sign", "unit", "__name", "compactNumberFormat", "number", "__name", "getDayOfMonth", "dateString", "date", "monthName", "__name", "DEFAULT_MARGIN", "TOOLTIP_DELAY_MS", "TOOLTIP_HIDE_DELAY_MS", "DEFAULT_CHART_COLORS", "bottomAxisData", "MAX_BAR_BUCKETS", "getTotalValueDates", "__name", "data", "buckets", "accumulator", "currentData", "totalValuePerDate", "dailyTotal", "currentBucket", "generateTickValues", "dates", "start", "interval", "tickValues", "i", "getTotalValue", "dataColumn", "result", "key", "value", "getDaysRange", "lengthValue", "prepareBarChartData", "chartOption", "dailyData", "label", "chartData", "colorBucketMap", "barChartColors", "sumBucketMap", "dailyItem", "keyItem", "sum", "newValue", "topBucket", "a", "b", "sortedItem", "MAX_BAR_BUCKETS", "bucketCount", "bucketItem", "index", "dateMap", "dateDailyList", "keyDate", "dataItem", "topDailyItem", "bucketValue", "topItem", "othersValue", "currentValue", "darkTheme", "styled", "Container", "TooltipContainer", "TooltipInfoRow", "Line", "InfoContainer", "Circle", "NameWrapper", "dayjs", "utc", "BarChart", "__name", "props", "data", "width", "height", "colorBucketMap", "buckets", "margin", "DEFAULT_MARGIN", "getLabel", "isDarkTheme", "isMobile", "useIsMobile_default", "daysRange", "getDaysRange", "bottomAxis", "bottomAxisData", "intervalBottomAxis", "numBottomAxis", "startBottomAxis", "tooltipTimeout", "tooltipRef", "useRef", "xMax", "yMax", "getDate", "d", "allDate", "bottomAxisValue", "generateTickValues", "tooltipOpen", "tooltipLeft", "tooltipTop", "tooltipData", "hideTooltip", "showTooltip", "useTooltip", "totalValueDates", "getTotalValueDates", "dateScale", "scaleBand", "totalValue", "scaledMaxValue", "valueScale", "scaleLinear", "colorScale", "scaleOrdinal", "DEFAULT_CHART_COLORS", "useEffect", "handleClickOutside", "event", "handleBarClick", "bar", "index", "eventSvgCoords", "localPoint", "left", "TOOLTIP_DELAY_MS", "handleMouseLeave", "TOOLTIP_HIDE_DELAY_MS", "handleMouseMove", "getFormattedTotalValue", "AmountConverter", "getTotalValue", "React", "Container", "Grid", "Group", "BarStack", "barStacks", "barStack", "shouldHavePartialOpacity", "barColor", "AxisBottom", "getDayOfMonth", "AxisLeft", "compactNumberFormat", "TooltipWithBounds", "TooltipContainer", "TooltipInfoRow", "mapItem", "bucketItem", "bucketColor", "value", "formattedValue", "Fragment", "Line", "InfoContainer", "NameWrapper", "Circle", "Divider"]
|
|
4
|
+
"sourcesContent": ["/* eslint-disable @typescript-eslint/no-magic-numbers */\nimport type {\n BarChartPropTypes,\n BarStackDataType,\n BottomAxisData,\n TooltipDataType,\n} from './BarChart.types.js';\nimport type { BarGroupBar, SeriesPoint } from '@visx/shape/lib/types';\n\nimport { Divider } from '@rango-dev/ui';\nimport { AxisBottom, AxisLeft } from '@visx/axis';\nimport { localPoint } from '@visx/event';\nimport { Grid } from '@visx/grid';\nimport { Group } from '@visx/group';\nimport { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';\nimport { BarStack } from '@visx/shape';\nimport { TooltipWithBounds, useTooltip } from '@visx/tooltip';\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc.js';\nimport React, { Fragment, useEffect, useRef } from 'react';\n\nimport useIsMobile from '../../hooks/useIsMobile.js';\nimport {\n AmountConverter,\n compactNumberFormat,\n} from '../../utils/amountConverter.js';\nimport { getDayOfMonth } from '../../utils/common.js';\n\nimport {\n bottomAxisData,\n DEFAULT_CHART_COLORS,\n DEFAULT_MARGIN,\n TOOLTIP_DELAY_MS,\n TOOLTIP_HIDE_DELAY_MS,\n} from './BarChart.constants.js';\nimport {\n generateTickValues,\n getDaysRange,\n getEvenlySpacedNumber,\n getTotalValue,\n getTotalValueDates,\n} from './BarChart.helpers.js';\nimport {\n Circle,\n Container,\n InfoContainer,\n Line,\n NameWrapper,\n TooltipContainer,\n TooltipInfoRow,\n} from './BarChart.styles.js';\n\ndayjs.extend(utc);\n\nexport const BarChart = (props: BarChartPropTypes) => {\n const {\n data,\n width,\n height,\n colorBucketMap,\n buckets,\n margin = DEFAULT_MARGIN,\n getLabel,\n isDarkTheme = false,\n } = props;\n\n const isMobile = useIsMobile();\n const daysRange = getDaysRange(data.length);\n\n let bottomAxis: BottomAxisData;\n if (data.length > 90) {\n const count = 7;\n const interval = getEvenlySpacedNumber(data.length, count);\n bottomAxis = {\n numBottomAxis: count,\n intervalBottomAxis: interval,\n startBottomAxis: interval - 10,\n };\n } else {\n bottomAxis =\n width < 700\n ? bottomAxisData.mobile[daysRange]\n : bottomAxisData.desktop[daysRange];\n }\n\n const { intervalBottomAxis, numBottomAxis, startBottomAxis } = bottomAxis;\n\n let tooltipTimeout: number;\n const tooltipRef = useRef<HTMLInputElement>(null);\n\n // bounds\n const xMax = width - margin.left - 20;\n const yMax = height - margin.top - 30;\n\n // accessors\n const getDate = (d: BarStackDataType) => d.date;\n\n // handle bottom axis data\n const allDate = data.map(getDate);\n\n const bottomAxisValue = generateTickValues(\n allDate,\n startBottomAxis,\n intervalBottomAxis\n );\n\n const {\n tooltipOpen,\n tooltipLeft,\n tooltipTop,\n tooltipData,\n hideTooltip,\n showTooltip,\n } = useTooltip<TooltipDataType>();\n\n const totalValueDates = getTotalValueDates(data, buckets);\n\n // scales\n const dateScale = scaleBand<string>({\n domain: data.map(getDate),\n paddingInner: daysRange === 7 ? 0.3 : 0.46,\n paddingOuter: daysRange === 90 ? 1 : 0.3,\n });\n\n const totalValue = Math.max(...totalValueDates);\n\n const scaledMaxValue = totalValue + totalValue / 5;\n const valueScale = scaleLinear<number>({\n domain: [0, scaledMaxValue < 0.5 ? 0.5 : scaledMaxValue],\n nice: true,\n });\n const colorScale = scaleOrdinal<string, string>({\n domain: buckets,\n range: DEFAULT_CHART_COLORS,\n });\n\n useEffect(() => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n function handleClickOutside(event: any) {\n if (\n isMobile &&\n tooltipRef?.current &&\n !tooltipRef.current.contains(event.target)\n ) {\n hideTooltip();\n }\n }\n document.addEventListener('click', handleClickOutside, true);\n return () => {\n document.removeEventListener('click', handleClickOutside, true);\n };\n }, [tooltipRef, isMobile]);\n\n dateScale.range([0, xMax]);\n valueScale.range([yMax, 0]);\n\n if (width < 10) {\n return null;\n }\n\n const handleBarClick = (\n event: React.MouseEvent<SVGRectElement, MouseEvent>,\n bar: Omit<BarGroupBar<string>, 'key' | 'value'> & {\n bar: SeriesPoint<BarStackDataType>;\n key: string;\n },\n index: number\n ) => {\n if (isMobile) {\n if (tooltipTimeout) {\n clearTimeout(tooltipTimeout);\n }\n const eventSvgCoords = localPoint(event);\n const left = bar.x + bar.width / 2;\n setTimeout(() => {\n showTooltip({\n tooltipData: { bar, hoveredIndex: index },\n tooltipTop: eventSvgCoords?.y,\n tooltipLeft: left,\n });\n }, TOOLTIP_DELAY_MS);\n }\n };\n\n const handleMouseLeave = () => {\n if (!isMobile) {\n tooltipTimeout = window.setTimeout(() => {\n hideTooltip();\n }, TOOLTIP_HIDE_DELAY_MS);\n }\n };\n\n const handleMouseMove = (\n event: React.MouseEvent<SVGRectElement, MouseEvent>,\n bar: Omit<BarGroupBar<string>, 'key' | 'value'> & {\n bar: SeriesPoint<BarStackDataType>;\n key: string;\n },\n index: number\n ) => {\n if (!isMobile) {\n if (tooltipTimeout) {\n clearTimeout(tooltipTimeout);\n }\n /*\n * TooltipInPortal expects coordinates to be relative to containerRef\n * localPoint returns coordinates relative to the nearest SVG, which\n * is what containerRef is set to in this example.\n */\n const eventSvgCoords = localPoint(event);\n const left = bar.x + bar.width / 2 + 40;\n\n // make sure to pass the index of the hovered bar\n showTooltip({\n tooltipData: { bar, hoveredIndex: index },\n tooltipTop: eventSvgCoords?.y,\n tooltipLeft: left,\n });\n }\n };\n\n const getFormattedTotalValue = (data: BarStackDataType) =>\n AmountConverter(Number(getTotalValue(data).toFixed(2)));\n\n return (\n <Container>\n <svg width={width} height={height}>\n <rect\n x={0}\n y={0}\n width={width}\n height={height}\n fill=\"transparent\"\n rx={14}\n />\n <Grid\n top={margin.top}\n left={margin.left + 10}\n xScale={dateScale}\n yScale={valueScale}\n width={xMax}\n height={yMax}\n stroke=\"black\"\n strokeOpacity={0.1}\n numTicksRows={5}\n numTicksColumns={0}\n columnLineStyle={{ display: 'none' }}\n rowLineStyle={{\n stroke: '#B8B8B8',\n }}\n />\n\n <Group top={margin.top} left={margin.left + 10}>\n <BarStack\n data={data}\n keys={buckets}\n x={getDate}\n xScale={dateScale}\n yScale={valueScale}\n color={colorScale}>\n {(barStacks) => {\n /*\n * barStacks returns an array of series objects broken down by key.\n */\n return barStacks.map((barStack) =>\n /*\n * each barStack contains an array of bars, which contain the data\n * for only that series for a given data point. the number of bars in a\n * given stack corresponds to the number of data points in our data array\n */\n\n barStack.bars.map((bar, index) => {\n /*\n * we can then assume that the data in each stack at a given index\n * is related to the data in all other stacks at that index.\n */\n const shouldBeHighlighted =\n tooltipData?.hoveredIndex === index;\n\n /*\n * we can then decide the opacity for our stacks based on whether the\n * tooltip is open, and whether the stack being hovered matches the\n * index passed to our tooltipData\n */\n const shouldHavePartialOpacity =\n !shouldBeHighlighted && tooltipOpen;\n\n const barColor =\n colorBucketMap.get(barStack.key) || bar.color;\n\n return (\n <rect\n key={`bar-stack-${barStack.index}-${bar.index}`}\n x={bar.x}\n y={bar.y}\n height={bar.height}\n width={bar.width}\n fill={barColor}\n opacity={shouldHavePartialOpacity ? 0.5 : 1}\n onClick={(event) => handleBarClick(event, bar, index)}\n onMouseLeave={handleMouseLeave}\n onMouseMove={(event) =>\n handleMouseMove(event, bar, index)\n }\n />\n );\n })\n );\n }}\n </BarStack>\n </Group>\n\n <AxisBottom\n top={yMax + margin.top}\n left={margin.left + 10}\n scale={dateScale}\n hideAxisLine\n hideTicks\n numTicks={numBottomAxis}\n tickValues={bottomAxisValue}\n tickFormat={(d) => getDayOfMonth(d)}\n tickLabelProps={() => ({\n fontSize: isMobile ? 10 : 12,\n fill: isDarkTheme ? '#B8B8B8' : '#A2A2A2',\n textAnchor: 'middle',\n })}\n />\n\n <AxisLeft\n hideAxisLine\n hideTicks\n numTicks={isMobile ? 3 : 5}\n top={margin.top}\n left={margin.left}\n scale={valueScale}\n tickFormat={(d) => compactNumberFormat(Number(d))}\n tickLabelProps={() => ({\n fontSize: isMobile ? 10 : 12,\n fill: isDarkTheme ? '#B8B8B8' : '#A2A2A2',\n textAnchor: 'middle',\n })}\n />\n </svg>\n\n {tooltipData && tooltipOpen && (\n <TooltipWithBounds\n top={tooltipTop}\n left={tooltipLeft}\n style={{\n backgroundColor: 'transparent',\n boxShadow: 'none',\n position: 'absolute',\n zIndex: '99999999',\n }}>\n <TooltipContainer ref={tooltipRef}>\n {tooltipData?.bar.bar.data.date && (\n <TooltipInfoRow>\n <div>\n {dayjs\n .utc(tooltipData.bar.bar.data.date)\n .local()\n .format('YYYY/MM/DD')\n .toString()}\n </div>\n <div>\n {getLabel\n ? getLabel(getFormattedTotalValue(tooltipData.bar.bar.data))\n : getFormattedTotalValue(tooltipData.bar.bar.data)}\n </div>\n </TooltipInfoRow>\n )}\n {Array.from(colorBucketMap).map((mapItem) => {\n const [bucketItem, bucketColor] = mapItem;\n const value = tooltipData?.bar.bar.data[bucketItem];\n const formattedValue = !isNaN(Number(value))\n ? AmountConverter(Number(Number(value).toFixed(2)))\n : '0';\n return (\n <Fragment key={bucketItem}>\n <Line />\n <InfoContainer>\n <NameWrapper>\n <Circle style={{ backgroundColor: bucketColor }} />\n <Divider direction=\"horizontal\" size={'4'} />\n <span>{bucketItem}</span>\n </NameWrapper>\n <Divider direction=\"horizontal\" size={'10'} />\n\n <span>\n {getLabel ? getLabel(formattedValue) : formattedValue}\n </span>\n </InfoContainer>\n </Fragment>\n );\n })}\n </TooltipContainer>\n </TooltipWithBounds>\n )}\n </Container>\n );\n};\n", "import { useEffect, useState } from 'react';\n\nconst useIsMobile = () => {\n const [isMobile, setIsMobile] = useState<boolean>(false);\n\n useEffect(() => {\n const handleResize = () => {\n const mobileBreakpoint = 640;\n setIsMobile(window.innerWidth <= mobileBreakpoint);\n };\n\n handleResize();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n return isMobile;\n};\n\nexport default useIsMobile;\n", "const THRESHOLD = 1000;\nconst BASE_TEN = 10;\nconst PERCENTAGE_MULTIPLIER = 100;\n\nconst unitList = ['', 'K', 'M', 'B'];\nexport function AmountConverter(number: number) {\n const sign = Math.sign(number);\n let unit = 0;\n while (Math.abs(number) > THRESHOLD) {\n unit = unit + 1;\n number = Math.floor(Math.abs(number) / BASE_TEN) / PERCENTAGE_MULTIPLIER;\n }\n return sign * Math.abs(number) + unitList[unit];\n}\n\nexport function getPercentageChange(\n input: number | null,\n output: number | null\n) {\n if (!input || !output) {\n return null;\n }\n return parseFloat(\n Number((output / input - 1) * PERCENTAGE_MULTIPLIER).toFixed(2)\n );\n}\n\nexport function numberWithCommas(number: number) {\n if (!number || isNaN(number)) {\n return number;\n }\n\n return number.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n}\n\nexport function compactNumberFormat(number: number) {\n if (!number || isNaN(number)) {\n return '0';\n }\n\n const numberFormat = Intl.NumberFormat('en-US', {\n notation: 'compact',\n maximumFractionDigits: 1,\n }).format(number);\n\n return numberFormat;\n}\n", "export const monthsShort = [\n 'Jan',\n 'Feb',\n 'Mar',\n 'Apr',\n 'May',\n 'Jun',\n 'Jul',\n 'Aug',\n 'Sep',\n 'Oct',\n 'Nov',\n 'Dec',\n];\n\nexport function getDayOfMonth(dateString: string) {\n const date = new Date(dateString);\n const monthName = date.toLocaleDateString('en-US', { month: 'short' });\n const dayNumber = date.getDate();\n\n return `${dayNumber} ${monthName}`;\n}\n", "import type { BottomAxisData } from './BarChart.types.js';\n\nexport const DEFAULT_MARGIN = { top: 40, right: 0, bottom: 0, left: 20 };\n\nexport const TOOLTIP_DELAY_MS = 100;\nexport const TOOLTIP_HIDE_DELAY_MS = 300;\n\nexport const DEFAULT_CHART_COLORS: string[] = [\n '#469BF5',\n '#29DABA',\n '#D629DA',\n '#4658F5',\n '#9DF546',\n '#F01DA8',\n '#FF8B66',\n '#44F1E6',\n '#29DA7A',\n '#F17606',\n '#8B62FF',\n '#F4C932',\n];\n\nexport const bottomAxisData: {\n [key: string]: {\n [key: number]: BottomAxisData;\n };\n} = {\n desktop: {\n 7: { numBottomAxis: 7, startBottomAxis: 0, intervalBottomAxis: 1 },\n 30: { numBottomAxis: 6, startBottomAxis: 4, intervalBottomAxis: 5 },\n 90: { numBottomAxis: 8, startBottomAxis: 5, intervalBottomAxis: 10 },\n },\n mobile: {\n 7: { numBottomAxis: 3, startBottomAxis: 1, intervalBottomAxis: 2 },\n 30: { numBottomAxis: 3, startBottomAxis: 3, intervalBottomAxis: 10 },\n 90: { numBottomAxis: 3, startBottomAxis: 10, intervalBottomAxis: 30 },\n },\n};\n\nexport const MAX_BAR_BUCKETS = 10;\n", "/* eslint-disable @typescript-eslint/no-magic-numbers */\nimport type {\n BarStackDataType,\n ChartOptionsType,\n ColorBucketMapType,\n DailyDataType,\n} from './BarChart.types.js';\n\nimport { MAX_BAR_BUCKETS } from './BarChart.constants.js';\n\nexport const getTotalValueDates = (\n data: BarStackDataType[],\n buckets: string[]\n) => {\n const totalValueDates = data.reduce((accumulator, currentData) => {\n const totalValuePerDate = buckets.reduce((dailyTotal, currentBucket) => {\n dailyTotal += !isNaN(Number(currentData[currentBucket]))\n ? Number(currentData[currentBucket])\n : 0;\n return dailyTotal;\n }, 0);\n accumulator.push(totalValuePerDate);\n return accumulator;\n }, [] as number[]);\n\n return totalValueDates;\n};\n\n// Function to generate tick values at intervals of 5, starting from the 5th element\nexport const generateTickValues = (\n dates: string[],\n start: number,\n interval: number\n) => {\n const tickValues = [];\n for (let i = start; i < dates.length; i += interval) {\n tickValues.push(dates[i]);\n }\n return tickValues;\n};\n\nexport const getTotalValue = (dataColumn: BarStackDataType) => {\n let result = 0;\n Object.keys(dataColumn).forEach((key) => {\n if (key !== 'date') {\n const value = dataColumn[key];\n if (!isNaN(Number(value))) {\n result += Number(value);\n }\n }\n });\n return result;\n};\n\nexport const getDaysRange = (lengthValue: number) => {\n if (lengthValue < 15) {\n return 7;\n }\n if (lengthValue < 50) {\n return 30;\n }\n return 90;\n};\n\nexport const prepareBarChartData = (chartOption: ChartOptionsType) => {\n const { dailyData, label = 'Count' } = chartOption;\n const chartData: BarStackDataType[] = [];\n const colorBucketMap: ColorBucketMapType = new Map();\n const buckets: string[] = [];\n\n const { barChartColors } = chartOption;\n\n // map sum of value for each bucket\n const sumBucketMap = new Map<string, number>();\n dailyData.forEach((dailyItem) => {\n const keyItem = dailyItem.bucket || label;\n\n const sum = sumBucketMap.get(keyItem) || 0;\n const newValue = dailyItem.value;\n sumBucketMap.set(keyItem, sum + newValue);\n });\n\n const sortedBucket = Array.from(sumBucketMap).sort((a, b) => b[1] - a[1]);\n\n // get top buckets for stack bars\n const topBucket = sortedBucket\n .map((sortedItem) => sortedItem[0])\n .slice(0, MAX_BAR_BUCKETS);\n\n const bucketCount = sumBucketMap.size;\n\n // create map structure for assign color for each bucket\n topBucket.forEach((bucketItem, index) => {\n colorBucketMap.set(\n bucketItem,\n barChartColors[index % barChartColors.length]\n );\n buckets.push(bucketItem);\n });\n\n if (bucketCount > MAX_BAR_BUCKETS) {\n colorBucketMap.set('Others', barChartColors[barChartColors.length - 1]);\n buckets.push('Others');\n }\n\n // create map structure for assign chart data for each date\n const dateMap = new Map<string, DailyDataType[]>();\n dailyData.forEach((dailyItem) => {\n if (!dateMap.has(dailyItem.date)) {\n dateMap.set(dailyItem.date, []);\n }\n\n const dateItem = dateMap.get(dailyItem.date);\n dateItem?.push(dailyItem);\n });\n\n // create data result for bar stack chart\n dateMap.forEach((dateDailyList, keyDate) => {\n const dataItem: BarStackDataType = { date: keyDate };\n dateDailyList\n .filter((dailyItem) => topBucket.includes(dailyItem.bucket || label))\n .forEach((topDailyItem) => {\n const bucketValue = topDailyItem.value;\n dataItem[topDailyItem.bucket || label] = bucketValue\n ? bucketValue.toString()\n : '0';\n });\n\n topBucket.forEach((topItem) => {\n if (!(topItem in dataItem)) {\n dataItem[topItem] = '0';\n }\n });\n\n if (bucketCount > MAX_BAR_BUCKETS) {\n const otherBuckets = dateDailyList.filter(\n (dailyItem) => dailyItem.bucket && !topBucket.includes(dailyItem.bucket)\n );\n const othersValue = otherBuckets\n .map((dailyItem) => dailyItem.value)\n .reduce((accumulator, currentValue) => accumulator + currentValue, 0);\n dataItem['Others'] = othersValue.toString();\n }\n\n chartData.push(dataItem);\n });\n return { chartData, colorBucketMap, buckets };\n};\n\nexport const getEvenlySpacedNumber = (max: number, count: number) => {\n const interval = max / count;\n return Math.round(interval);\n};\n", "import { darkTheme, styled } from '@rango-dev/ui';\n\nexport const Container = styled('div', {\n position: 'relative',\n});\n\nexport const TooltipContainer = styled('div', {\n width: 165,\n borderRadius: '$sm',\n backgroundColor: '$background',\n\n $$color: '$colors$neutral500',\n [`.${darkTheme} &`]: {\n $$color: '$colors$neutral100',\n },\n\n boxShadow: '0px 5px 20px 0px $$color',\n});\n\nexport const TooltipInfoRow = styled('div', {\n display: 'flex',\n alignItems: 'center',\n fontSize: '$12',\n justifyContent: 'space-between',\n padding: '$8 $10',\n fontWeight: '$medium',\n color: '$foreground',\n});\n\nexport const Line = styled('div', {\n height: 1,\n width: '100%',\n backgroundColor: '$neutral300',\n});\n\nexport const InfoContainer = styled('div', {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n fontSize: '$10',\n padding: '$5 $10',\n color: '$foreground',\n});\n\nexport const Circle = styled('div', {\n width: '$6',\n height: '$6',\n borderRadius: 3,\n});\n\nexport const NameWrapper = styled('div', {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'flex-start',\n});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Divider", "AxisBottom", "AxisLeft", "localPoint", "Grid", "Group", "scaleBand", "scaleLinear", "scaleOrdinal", "BarStack", "TooltipWithBounds", "useTooltip", "dayjs", "utc", "React", "Fragment", "useEffect", "useRef", "useEffect", "useState", "useIsMobile", "__name", "isMobile", "setIsMobile", "useState", "useEffect", "handleResize", "useIsMobile_default", "unitList", "AmountConverter", "number", "sign", "unit", "__name", "compactNumberFormat", "number", "__name", "getDayOfMonth", "dateString", "date", "monthName", "__name", "DEFAULT_MARGIN", "TOOLTIP_DELAY_MS", "TOOLTIP_HIDE_DELAY_MS", "DEFAULT_CHART_COLORS", "bottomAxisData", "MAX_BAR_BUCKETS", "getTotalValueDates", "__name", "data", "buckets", "accumulator", "currentData", "totalValuePerDate", "dailyTotal", "currentBucket", "generateTickValues", "dates", "start", "interval", "tickValues", "i", "getTotalValue", "dataColumn", "result", "key", "value", "getDaysRange", "lengthValue", "prepareBarChartData", "chartOption", "dailyData", "label", "chartData", "colorBucketMap", "barChartColors", "sumBucketMap", "dailyItem", "keyItem", "sum", "newValue", "topBucket", "a", "b", "sortedItem", "MAX_BAR_BUCKETS", "bucketCount", "bucketItem", "index", "dateMap", "dateDailyList", "keyDate", "dataItem", "topDailyItem", "bucketValue", "topItem", "othersValue", "currentValue", "getEvenlySpacedNumber", "max", "count", "darkTheme", "styled", "Container", "TooltipContainer", "TooltipInfoRow", "Line", "InfoContainer", "Circle", "NameWrapper", "dayjs", "utc", "BarChart", "__name", "props", "data", "width", "height", "colorBucketMap", "buckets", "margin", "DEFAULT_MARGIN", "getLabel", "isDarkTheme", "isMobile", "useIsMobile_default", "daysRange", "getDaysRange", "bottomAxis", "interval", "getEvenlySpacedNumber", "bottomAxisData", "intervalBottomAxis", "numBottomAxis", "startBottomAxis", "tooltipTimeout", "tooltipRef", "useRef", "xMax", "yMax", "getDate", "d", "allDate", "bottomAxisValue", "generateTickValues", "tooltipOpen", "tooltipLeft", "tooltipTop", "tooltipData", "hideTooltip", "showTooltip", "useTooltip", "totalValueDates", "getTotalValueDates", "dateScale", "scaleBand", "totalValue", "scaledMaxValue", "valueScale", "scaleLinear", "colorScale", "scaleOrdinal", "DEFAULT_CHART_COLORS", "useEffect", "handleClickOutside", "event", "handleBarClick", "bar", "index", "eventSvgCoords", "localPoint", "left", "TOOLTIP_DELAY_MS", "handleMouseLeave", "TOOLTIP_HIDE_DELAY_MS", "handleMouseMove", "getFormattedTotalValue", "AmountConverter", "getTotalValue", "React", "Container", "Grid", "Group", "BarStack", "barStacks", "barStack", "shouldHavePartialOpacity", "barColor", "AxisBottom", "getDayOfMonth", "AxisLeft", "compactNumberFormat", "TooltipWithBounds", "TooltipContainer", "TooltipInfoRow", "mapItem", "bucketItem", "bucketColor", "value", "formattedValue", "Fragment", "Line", "InfoContainer", "NameWrapper", "Circle", "Divider"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import type { BottomAxisData } from './BarChart.types.js';
|
|
2
|
+
|
|
1
3
|
export const DEFAULT_MARGIN = { top: 40, right: 0, bottom: 0, left: 20 };
|
|
2
4
|
|
|
3
5
|
export const TOOLTIP_DELAY_MS = 100;
|
|
@@ -18,7 +20,11 @@ export const DEFAULT_CHART_COLORS: string[] = [
|
|
|
18
20
|
'#F4C932',
|
|
19
21
|
];
|
|
20
22
|
|
|
21
|
-
export const bottomAxisData
|
|
23
|
+
export const bottomAxisData: {
|
|
24
|
+
[key: string]: {
|
|
25
|
+
[key: number]: BottomAxisData;
|
|
26
|
+
};
|
|
27
|
+
} = {
|
|
22
28
|
desktop: {
|
|
23
29
|
7: { numBottomAxis: 7, startBottomAxis: 0, intervalBottomAxis: 1 },
|
|
24
30
|
30: { numBottomAxis: 6, startBottomAxis: 4, intervalBottomAxis: 5 },
|
|
@@ -146,3 +146,8 @@ export const prepareBarChartData = (chartOption: ChartOptionsType) => {
|
|
|
146
146
|
});
|
|
147
147
|
return { chartData, colorBucketMap, buckets };
|
|
148
148
|
};
|
|
149
|
+
|
|
150
|
+
export const getEvenlySpacedNumber = (max: number, count: number) => {
|
|
151
|
+
const interval = max / count;
|
|
152
|
+
return Math.round(interval);
|
|
153
|
+
};
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import type {
|
|
3
3
|
BarChartPropTypes,
|
|
4
4
|
BarStackDataType,
|
|
5
|
+
BottomAxisData,
|
|
5
6
|
TooltipDataType,
|
|
6
7
|
} from './BarChart.types.js';
|
|
7
8
|
import type { BarGroupBar, SeriesPoint } from '@visx/shape/lib/types';
|
|
@@ -35,6 +36,7 @@ import {
|
|
|
35
36
|
import {
|
|
36
37
|
generateTickValues,
|
|
37
38
|
getDaysRange,
|
|
39
|
+
getEvenlySpacedNumber,
|
|
38
40
|
getTotalValue,
|
|
39
41
|
getTotalValueDates,
|
|
40
42
|
} from './BarChart.helpers.js';
|
|
@@ -64,10 +66,22 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
64
66
|
|
|
65
67
|
const isMobile = useIsMobile();
|
|
66
68
|
const daysRange = getDaysRange(data.length);
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
|
|
70
|
+
let bottomAxis: BottomAxisData;
|
|
71
|
+
if (data.length > 90) {
|
|
72
|
+
const count = 7;
|
|
73
|
+
const interval = getEvenlySpacedNumber(data.length, count);
|
|
74
|
+
bottomAxis = {
|
|
75
|
+
numBottomAxis: count,
|
|
76
|
+
intervalBottomAxis: interval,
|
|
77
|
+
startBottomAxis: interval - 10,
|
|
78
|
+
};
|
|
79
|
+
} else {
|
|
80
|
+
bottomAxis =
|
|
81
|
+
width < 700
|
|
82
|
+
? bottomAxisData.mobile[daysRange]
|
|
83
|
+
: bottomAxisData.desktop[daysRange];
|
|
84
|
+
}
|
|
71
85
|
|
|
72
86
|
const { intervalBottomAxis, numBottomAxis, startBottomAxis } = bottomAxis;
|
|
73
87
|
|