@rango-dev/charts 0.1.1-next.7 → 0.1.1-next.9
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 +1 -1
- 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 +6 -1
- package/dist/components/BarChart/BarChart.helpers.d.ts.map +1 -1
- package/dist/components/BarChart/BarChart.styles.d.ts.map +1 -1
- package/dist/components/BarChart/BarChart.types.d.ts +11 -1
- package/dist/components/BarChart/BarChart.types.d.ts.map +1 -1
- package/dist/components/BarChart/index.d.ts +2 -1
- package/dist/components/BarChart/index.d.ts.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.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 +2 -1
- package/src/components/BarChart/BarChart.helpers.ts +93 -1
- package/src/components/BarChart/BarChart.styles.ts +11 -4
- package/src/components/BarChart/BarChart.tsx +13 -19
- package/src/components/BarChart/BarChart.types.ts +13 -1
- package/src/components/BarChart/index.ts +4 -0
- package/src/index.ts +3 -1
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":909,"imports":[],"format":"esm"},"src/components/BarChart/BarChart.helpers.ts":{"bytes":4199,"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":11314,"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":32589},"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":3855},"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":1216},"src/components/BarChart/BarChart.styles.ts":{"bytesInOutput":754},"src/components/BarChart/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":7271}}}
|
|
@@ -6,7 +6,6 @@ export declare const DEFAULT_MARGIN: {
|
|
|
6
6
|
};
|
|
7
7
|
export declare const TOOLTIP_DELAY_MS = 100;
|
|
8
8
|
export declare const TOOLTIP_HIDE_DELAY_MS = 300;
|
|
9
|
-
export declare const TOOLTIP_SHADOW = "0px 5px 20px 0px rgba(130, 130, 130, 0.20)";
|
|
10
9
|
export declare const DEFAULT_CHART_COLORS: string[];
|
|
11
10
|
export declare const bottomAxisData: {
|
|
12
11
|
desktop: {
|
|
@@ -44,4 +43,5 @@ export declare const bottomAxisData: {
|
|
|
44
43
|
};
|
|
45
44
|
};
|
|
46
45
|
};
|
|
46
|
+
export declare const MAX_BAR_BUCKETS = 10;
|
|
47
47
|
//# sourceMappingURL=BarChart.constants.d.ts.map
|
|
@@ -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;
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAW1B,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,EAGlB,MAAM,qBAAqB,CAAC;AAa7B,OAAO,KAAsC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAGlB,MAAM,qBAAqB,CAAC;AAa7B,OAAO,KAAsC,MAAM,OAAO,CAAC;AAkC3D,eAAO,MAAM,QAAQ,UAAW,iBAAiB,6BA8UhD,CAAC"}
|
|
@@ -1,6 +1,11 @@
|
|
|
1
|
-
import type { BarStackDataType } from './BarChart.types.js';
|
|
1
|
+
import type { BarStackDataType, ChartOptionsType, ColorBucketMapType } from './BarChart.types.js';
|
|
2
2
|
export declare const getTotalValueDates: (data: BarStackDataType[], buckets: string[]) => number[];
|
|
3
3
|
export declare const generateTickValues: (dates: string[], start: number, interval: number) => string[];
|
|
4
4
|
export declare const getTotalValue: (dataColumn: BarStackDataType) => number;
|
|
5
5
|
export declare const getDaysRange: (lengthValue: number) => 7 | 30 | 90;
|
|
6
|
+
export declare const prepareBarChartData: (chartOption: ChartOptionsType) => {
|
|
7
|
+
chartData: BarStackDataType[];
|
|
8
|
+
colorBucketMap: ColorBucketMapType;
|
|
9
|
+
buckets: string[];
|
|
10
|
+
};
|
|
6
11
|
//# 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,
|
|
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.styles.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,KAEpB,CAAC;AAEH,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"BarChart.styles.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,KAEpB,CAAC;AAEH,eAAO,MAAM,gBAAgB,KAW3B,CAAC;AAEH,eAAO,MAAM,cAAc,KAQzB,CAAC;AAEH,eAAO,MAAM,IAAI,KAIf,CAAC;AAEH,eAAO,MAAM,aAAa,KAOxB,CAAC;AAEH,eAAO,MAAM,MAAM,KAIjB,CAAC;AAEH,eAAO,MAAM,WAAW,KAItB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { SeriesPoint } from '@visx/shape/lib/types';
|
|
1
|
+
import type { SeriesPoint } from '@visx/shape/lib/types/barStack.js';
|
|
2
2
|
export interface BarChartPropTypes {
|
|
3
3
|
data: BarStackDataType[];
|
|
4
4
|
width: number;
|
|
@@ -31,4 +31,14 @@ export type TooltipDataType = {
|
|
|
31
31
|
};
|
|
32
32
|
hoveredIndex: number;
|
|
33
33
|
};
|
|
34
|
+
export type DailyDataType = {
|
|
35
|
+
date: string;
|
|
36
|
+
bucket: string;
|
|
37
|
+
value: number;
|
|
38
|
+
};
|
|
39
|
+
export type ChartOptionsType = {
|
|
40
|
+
dailyData: DailyDataType[];
|
|
41
|
+
barChartColors: string[];
|
|
42
|
+
label?: string;
|
|
43
|
+
};
|
|
34
44
|
//# 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,
|
|
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,3 +1,4 @@
|
|
|
1
1
|
export { BarChart } from './BarChart.js';
|
|
2
|
-
export
|
|
2
|
+
export { prepareBarChartData } from './BarChart.helpers.js';
|
|
3
|
+
export type { BarStackDataType, ColorBucketMapType, BarChartPropTypes, ChartOptionsType, DailyDataType, } from './BarChart.types.js';
|
|
3
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,GACd,MAAM,qBAAqB,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export type { BarStackDataType, ColorBucketMapType, BarChartPropTypes, } from './components/BarChart/index.js';
|
|
2
|
-
export { BarChart } from './components/BarChart/index.js';
|
|
1
|
+
export type { BarStackDataType, ColorBucketMapType, BarChartPropTypes, ChartOptionsType, DailyDataType, } from './components/BarChart/index.js';
|
|
2
|
+
export { BarChart, prepareBarChartData } from './components/BarChart/index.js';
|
|
3
3
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,GACd,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var yt=Object.defineProperty;var a=(t,e)=>yt(t,"name",{value:e,configurable:!0});import{Divider as nt}from"@rango-dev/ui";import{AxisBottom as vt,AxisLeft as St}from"@visx/axis";import{localPoint as it}from"@visx/event";import{Grid as Mt}from"@visx/grid";import{Group as Et}from"@visx/group";import{scaleBand as Lt,scaleLinear as Nt,scaleOrdinal as wt}from"@visx/scale";import{BarStack as Ot}from"@visx/shape";import{TooltipWithBounds as Ft,useTooltip as It}from"@visx/tooltip";import st from"dayjs";import $t from"dayjs/plugin/utc.js";import r,{Fragment as _t,useEffect as Pt,useRef as Vt}from"react";import{useEffect as kt,useState as bt}from"react";var At=a(()=>{let[t,e]=bt(!1);return kt(()=>{let o=a(()=>{e(window.innerWidth<=640)},"handleResize");return o(),window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]),t},"useIsMobile"),z=At;var Dt=["","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)+Dt[o]}a(O,"AmountConverter");function G(t){return!t||isNaN(t)?"0":Intl.NumberFormat("en-US",{notation:"compact",maximumFractionDigits:1}).format(t)}a(G,"compactNumberFormat");function H(t){let e=new Date(t),o=e.toLocaleDateString("en-US",{month:"short"});return`${e.getDate()} ${o}`}a(H,"getDayOfMonth");var U={top:40,right:0,bottom:0,left:20},R=100,j=300,W=["#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 Y=a((t,e)=>t.reduce((l,m)=>{let B=e.reduce((i,f)=>(i+=isNaN(Number(m[f]))?0:Number(m[f]),i),0);return l.push(B),l},[]),"getTotalValueDates"),J=a((t,e,o)=>{let l=[];for(let m=e;m<t.length;m+=o)l.push(t[m]);return l},"generateTickValues"),K=a(t=>{let e=0;return Object.keys(t).forEach(o=>{if(o!=="date"){let l=t[o];isNaN(Number(l))||(e+=Number(l))}}),e},"getTotalValue"),X=a(t=>t<15?7:t<50?30:90,"getDaysRange"),q=a(t=>{let{dailyData:e,label:o="Count"}=t,l=[],m=new Map,B=[],{barChartColors:i}=t,f=new Map;e.forEach(n=>{let h=n.bucket||o,T=f.get(h)||0,c=n.value;f.set(h,T+c)});let d=Array.from(f).sort((n,h)=>h[1]-n[1]).map(n=>n[0]).slice(0,E),k=f.size;d.forEach((n,h)=>{m.set(n,i[h%i.length]),B.push(n)}),k>E&&(m.set("Others",i[i.length-1]),B.push("Others"));let C=new Map;return e.forEach(n=>{C.has(n.date)||C.set(n.date,[]),C.get(n.date)?.push(n)}),C.forEach((n,h)=>{let T={date:h};if(n.filter(c=>d.includes(c.bucket||o)).forEach(c=>{let g=c.value;T[c.bucket||o]=g?g.toString():"0"}),d.forEach(c=>{c in T||(T[c]="0")}),k>E){let g=n.filter(y=>y.bucket&&!d.includes(y.bucket)).map(y=>y.value).reduce((y,v)=>y+v,0);T.Others=g.toString()}l.push(T)}),{chartData:l,colorBucketMap:m,buckets:B}},"prepareBarChartData");import{darkTheme as Ct,styled as D}from"@rango-dev/ui";var Q=D("div",{position:"relative"}),Z=D("div",{width:165,borderRadius:"$sm",backgroundColor:"$background",$$color:"$colors$neutral500",[`.${Ct} &`]:{$$color:"$colors$neutral100"},boxShadow:"0px 5px 20px 0px $$color"}),tt=D("div",{display:"flex",alignItems:"center",fontSize:"$12",justifyContent:"space-between",padding:"$8 $10",fontWeight:"$medium",color:"$foreground"}),et=D("div",{height:1,width:"100%",backgroundColor:"$neutral300"}),ot=D("div",{display:"flex",alignItems:"center",justifyContent:"space-between",fontSize:"$10",padding:"$5 $10",color:"$foreground"}),rt=D("div",{width:"$6",height:"$6",borderRadius:3}),at=D("div",{display:"flex",alignItems:"center",justifyContent:"flex-start"});st.extend($t);var lt=a(t=>{let{data:e,width:o,height:l,colorBucketMap:m,buckets:B,margin:i=U,getLabel:f,isDarkTheme:L=!1}=t,d=z(),k=X(e.length),C=o<700?F.mobile[k]:F.desktop[k],{intervalBottomAxis:n,numBottomAxis:h,startBottomAxis:T}=C,c,g=Vt(null),y=o-i.left-20,v=l-i.top-30,N=a(s=>s.date,"getDate"),pt=e.map(N),ct=J(pt,T,n),{tooltipOpen:I,tooltipLeft:ut,tooltipTop:mt,tooltipData:b,hideTooltip:$,showTooltip:_}=It(),dt=Y(e,B),S=Lt({domain:e.map(N),paddingInner:k===7?.3:.46,paddingOuter:k===90?1:.3}),P=Math.max(...dt),M=Nt({domain:[0,P+P/5],nice:!0}),ft=wt({domain:B,range:W});if(Pt(()=>{function s(p){d&&g?.current&&!g.current.contains(p.target)&&$()}return a(s,"handleClickOutside"),document.addEventListener("click",s,!0),()=>{document.removeEventListener("click",s,!0)}},[g,d]),S.range([0,y]),M.range([v,0]),o<10)return null;let ht=a((s,p,u)=>{if(d){c&&clearTimeout(c);let x=it(s),A=p.x+p.width/2;setTimeout(()=>{_({tooltipData:{bar:p,hoveredIndex:u},tooltipTop:x?.y,tooltipLeft:A})},R)}},"handleBarClick"),xt=a(()=>{d||(c=window.setTimeout(()=>{$()},j))},"handleMouseLeave"),Bt=a((s,p,u)=>{if(!d){c&&clearTimeout(c);let x=it(s),A=p.x+p.width/2+40;_({tooltipData:{bar:p,hoveredIndex:u},tooltipTop:x?.y,tooltipLeft:A})}},"handleMouseMove"),V=a(s=>O(Number(K(s).toFixed(2))),"getFormattedTotalValue");return r.createElement(Q,null,r.createElement("svg",{width:o,height:l},r.createElement("rect",{x:0,y:0,width:o,height:l,fill:"transparent",rx:14}),r.createElement(Mt,{top:i.top,left:i.left+10,xScale:S,yScale:M,width:y,height:v,stroke:"black",strokeOpacity:.1,numTicksRows:5,numTicksColumns:0,columnLineStyle:{display:"none"},rowLineStyle:{stroke:"#B8B8B8"}}),r.createElement(Et,{top:i.top,left:i.left+10},r.createElement(Ot,{data:e,keys:B,x:N,xScale:S,yScale:M,color:ft},s=>s.map(p=>p.bars.map((u,x)=>{let Tt=!(b?.hoveredIndex===x)&&I,gt=m.get(p.key)||u.color;return r.createElement("rect",{key:`bar-stack-${p.index}-${u.index}`,x:u.x,y:u.y,height:u.height,width:u.width,fill:gt,opacity:Tt?.5:1,onClick:w=>ht(w,u,x),onMouseLeave:xt,onMouseMove:w=>Bt(w,u,x)})})))),r.createElement(vt,{top:v+i.top,left:i.left+10,scale:S,hideAxisLine:!0,hideTicks:!0,numTicks:h,tickValues:ct,tickFormat:s=>H(s),tickLabelProps:()=>({fontSize:d?10:12,fill:L?"#B8B8B8":"#A2A2A2",textAnchor:"middle"})}),r.createElement(St,{hideAxisLine:!0,hideTicks:!0,numTicks:d?3:5,top:i.top,left:i.left,scale:M,tickFormat:s=>G(Number(s)),tickLabelProps:()=>({fontSize:d?10:12,fill:L?"#B8B8B8":"#A2A2A2",textAnchor:"middle"})})),b&&I&&r.createElement(Ft,{top:mt,left:ut,style:{backgroundColor:"transparent",boxShadow:"none",position:"absolute",zIndex:"99999999"}},r.createElement(Z,{ref:g},b?.bar.bar.data.date&&r.createElement(tt,null,r.createElement("div",null,st.utc(b.bar.bar.data.date).local().format("YYYY/MM/DD").toString()),r.createElement("div",null,f?f(V(b.bar.bar.data)):V(b.bar.bar.data))),Array.from(m).map(s=>{let[p,u]=s,x=b?.bar.bar.data[p],A=isNaN(Number(x))?"0":O(Number(Number(x).toFixed(2)));return r.createElement(_t,{key:p},r.createElement(et,null),r.createElement(ot,null,r.createElement(at,null,r.createElement(rt,{style:{backgroundColor:u}}),r.createElement(nt,{direction:"horizontal",size:"4"}),r.createElement("span",null,p)),r.createElement(nt,{direction:"horizontal",size:"10"}),r.createElement("span",null,f?f(A):A)))}))))},"BarChart");export{lt 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 { useTooltip, useTooltipInPortal } 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 TOOLTIP_SHADOW,\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 = isMobile\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 const { containerRef, TooltipInPortal } = useTooltipInPortal({\n // TooltipInPortal is rendered in a separate child of <body />\n scroll: true,\n });\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 valueScale = scaleLinear<number>({\n domain: [0, totalValue + totalValue / 5],\n nice: true,\n });\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]);\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 ref={containerRef} 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 {tooltipOpen && tooltipData && (\n <TooltipInPortal\n top={tooltipTop}\n left={tooltipLeft}\n style={{\n backgroundColor: 'transparent',\n boxShadow: 'none',\n position: 'absolute',\n zIndex: '99999999',\n }}>\n <TooltipContainer\n ref={tooltipRef}\n style={{ boxShadow: TOOLTIP_SHADOW }}>\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 </TooltipInPortal>\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;\nexport const TOOLTIP_SHADOW = '0px 5px 20px 0px rgba(130, 130, 130, 0.20)';\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", "/* eslint-disable @typescript-eslint/no-magic-numbers */\nimport type { BarStackDataType } from './BarChart.types.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", "import { 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 backgroundColor: '$background',\n borderRadius: '$sm',\n});\n\nexport const TooltipInfoRow = styled('div', {\n display: 'flex',\n alignItems: 'center',\n fontSize: '$12',\n color: '$foreground',\n justifyContent: 'space-between',\n padding: '$8 $10',\n fontWeight: '$medium',\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 color: '$foreground',\n padding: '$5 $10',\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": "iFAQA,OAAS,WAAAA,OAAe,gBACxB,OAAS,cAAAC,GAAY,YAAAC,OAAgB,aACrC,OAAS,cAAAC,OAAkB,cAC3B,OAAS,QAAAC,OAAY,aACrB,OAAS,SAAAC,OAAa,cACtB,OAAS,aAAAC,GAAW,eAAAC,GAAa,gBAAAC,OAAoB,cACrD,OAAS,YAAAC,OAAgB,cACzB,OAAS,
|
|
6
|
-
"names": ["Divider", "AxisBottom", "AxisLeft", "localPoint", "Grid", "Group", "scaleBand", "scaleLinear", "scaleOrdinal", "BarStack", "
|
|
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 valueScale = scaleLinear<number>({\n domain: [0, totalValue + totalValue / 5],\n nice: true,\n });\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": "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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", "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", "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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rango-dev/charts",
|
|
3
|
-
"version": "0.1.1-next.
|
|
3
|
+
"version": "0.1.1-next.9",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"source": "./src/index.ts",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"react-dom": ">=16"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@rango-dev/ui": "^0.39.1-next.
|
|
29
|
+
"@rango-dev/ui": "^0.39.1-next.7",
|
|
30
30
|
"@visx/axis": "2.18.0",
|
|
31
31
|
"@visx/event": "2.17.0",
|
|
32
32
|
"@visx/grid": "2.18.0",
|
|
@@ -2,7 +2,6 @@ export const DEFAULT_MARGIN = { top: 40, right: 0, bottom: 0, left: 20 };
|
|
|
2
2
|
|
|
3
3
|
export const TOOLTIP_DELAY_MS = 100;
|
|
4
4
|
export const TOOLTIP_HIDE_DELAY_MS = 300;
|
|
5
|
-
export const TOOLTIP_SHADOW = '0px 5px 20px 0px rgba(130, 130, 130, 0.20)';
|
|
6
5
|
|
|
7
6
|
export const DEFAULT_CHART_COLORS: string[] = [
|
|
8
7
|
'#469BF5',
|
|
@@ -31,3 +30,5 @@ export const bottomAxisData = {
|
|
|
31
30
|
90: { numBottomAxis: 3, startBottomAxis: 10, intervalBottomAxis: 30 },
|
|
32
31
|
},
|
|
33
32
|
};
|
|
33
|
+
|
|
34
|
+
export const MAX_BAR_BUCKETS = 10;
|
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
/* eslint-disable @typescript-eslint/no-magic-numbers */
|
|
2
|
-
import type {
|
|
2
|
+
import type {
|
|
3
|
+
BarStackDataType,
|
|
4
|
+
ChartOptionsType,
|
|
5
|
+
ColorBucketMapType,
|
|
6
|
+
DailyDataType,
|
|
7
|
+
} from './BarChart.types.js';
|
|
8
|
+
|
|
9
|
+
import { MAX_BAR_BUCKETS } from './BarChart.constants.js';
|
|
3
10
|
|
|
4
11
|
export const getTotalValueDates = (
|
|
5
12
|
data: BarStackDataType[],
|
|
@@ -54,3 +61,88 @@ export const getDaysRange = (lengthValue: number) => {
|
|
|
54
61
|
}
|
|
55
62
|
return 90;
|
|
56
63
|
};
|
|
64
|
+
|
|
65
|
+
export const prepareBarChartData = (chartOption: ChartOptionsType) => {
|
|
66
|
+
const { dailyData, label = 'Count' } = chartOption;
|
|
67
|
+
const chartData: BarStackDataType[] = [];
|
|
68
|
+
const colorBucketMap: ColorBucketMapType = new Map();
|
|
69
|
+
const buckets: string[] = [];
|
|
70
|
+
|
|
71
|
+
const { barChartColors } = chartOption;
|
|
72
|
+
|
|
73
|
+
// map sum of value for each bucket
|
|
74
|
+
const sumBucketMap = new Map<string, number>();
|
|
75
|
+
dailyData.forEach((dailyItem) => {
|
|
76
|
+
const keyItem = dailyItem.bucket || label;
|
|
77
|
+
|
|
78
|
+
const sum = sumBucketMap.get(keyItem) || 0;
|
|
79
|
+
const newValue = dailyItem.value;
|
|
80
|
+
sumBucketMap.set(keyItem, sum + newValue);
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
const sortedBucket = Array.from(sumBucketMap).sort((a, b) => b[1] - a[1]);
|
|
84
|
+
|
|
85
|
+
// get top buckets for stack bars
|
|
86
|
+
const topBucket = sortedBucket
|
|
87
|
+
.map((sortedItem) => sortedItem[0])
|
|
88
|
+
.slice(0, MAX_BAR_BUCKETS);
|
|
89
|
+
|
|
90
|
+
const bucketCount = sumBucketMap.size;
|
|
91
|
+
|
|
92
|
+
// create map structure for assign color for each bucket
|
|
93
|
+
topBucket.forEach((bucketItem, index) => {
|
|
94
|
+
colorBucketMap.set(
|
|
95
|
+
bucketItem,
|
|
96
|
+
barChartColors[index % barChartColors.length]
|
|
97
|
+
);
|
|
98
|
+
buckets.push(bucketItem);
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
if (bucketCount > MAX_BAR_BUCKETS) {
|
|
102
|
+
colorBucketMap.set('Others', barChartColors[barChartColors.length - 1]);
|
|
103
|
+
buckets.push('Others');
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// create map structure for assign chart data for each date
|
|
107
|
+
const dateMap = new Map<string, DailyDataType[]>();
|
|
108
|
+
dailyData.forEach((dailyItem) => {
|
|
109
|
+
if (!dateMap.has(dailyItem.date)) {
|
|
110
|
+
dateMap.set(dailyItem.date, []);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
const dateItem = dateMap.get(dailyItem.date);
|
|
114
|
+
dateItem?.push(dailyItem);
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
// create data result for bar stack chart
|
|
118
|
+
dateMap.forEach((dateDailyList, keyDate) => {
|
|
119
|
+
const dataItem: BarStackDataType = { date: keyDate };
|
|
120
|
+
dateDailyList
|
|
121
|
+
.filter((dailyItem) => topBucket.includes(dailyItem.bucket || label))
|
|
122
|
+
.forEach((topDailyItem) => {
|
|
123
|
+
const bucketValue = topDailyItem.value;
|
|
124
|
+
dataItem[topDailyItem.bucket || label] = bucketValue
|
|
125
|
+
? bucketValue.toString()
|
|
126
|
+
: '0';
|
|
127
|
+
});
|
|
128
|
+
|
|
129
|
+
topBucket.forEach((topItem) => {
|
|
130
|
+
if (!(topItem in dataItem)) {
|
|
131
|
+
dataItem[topItem] = '0';
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
if (bucketCount > MAX_BAR_BUCKETS) {
|
|
136
|
+
const otherBuckets = dateDailyList.filter(
|
|
137
|
+
(dailyItem) => dailyItem.bucket && !topBucket.includes(dailyItem.bucket)
|
|
138
|
+
);
|
|
139
|
+
const othersValue = otherBuckets
|
|
140
|
+
.map((dailyItem) => dailyItem.value)
|
|
141
|
+
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
|
|
142
|
+
dataItem['Others'] = othersValue.toString();
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
chartData.push(dataItem);
|
|
146
|
+
});
|
|
147
|
+
return { chartData, colorBucketMap, buckets };
|
|
148
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { styled } from '@rango-dev/ui';
|
|
1
|
+
import { darkTheme, styled } from '@rango-dev/ui';
|
|
2
2
|
|
|
3
3
|
export const Container = styled('div', {
|
|
4
4
|
position: 'relative',
|
|
@@ -6,18 +6,25 @@ export const Container = styled('div', {
|
|
|
6
6
|
|
|
7
7
|
export const TooltipContainer = styled('div', {
|
|
8
8
|
width: 165,
|
|
9
|
-
backgroundColor: '$background',
|
|
10
9
|
borderRadius: '$sm',
|
|
10
|
+
backgroundColor: '$background',
|
|
11
|
+
|
|
12
|
+
$$color: '$colors$neutral500',
|
|
13
|
+
[`.${darkTheme} &`]: {
|
|
14
|
+
$$color: '$colors$neutral100',
|
|
15
|
+
},
|
|
16
|
+
|
|
17
|
+
boxShadow: '0px 5px 20px 0px $$color',
|
|
11
18
|
});
|
|
12
19
|
|
|
13
20
|
export const TooltipInfoRow = styled('div', {
|
|
14
21
|
display: 'flex',
|
|
15
22
|
alignItems: 'center',
|
|
16
23
|
fontSize: '$12',
|
|
17
|
-
color: '$foreground',
|
|
18
24
|
justifyContent: 'space-between',
|
|
19
25
|
padding: '$8 $10',
|
|
20
26
|
fontWeight: '$medium',
|
|
27
|
+
color: '$foreground',
|
|
21
28
|
});
|
|
22
29
|
|
|
23
30
|
export const Line = styled('div', {
|
|
@@ -31,8 +38,8 @@ export const InfoContainer = styled('div', {
|
|
|
31
38
|
alignItems: 'center',
|
|
32
39
|
justifyContent: 'space-between',
|
|
33
40
|
fontSize: '$10',
|
|
34
|
-
color: '$foreground',
|
|
35
41
|
padding: '$5 $10',
|
|
42
|
+
color: '$foreground',
|
|
36
43
|
});
|
|
37
44
|
|
|
38
45
|
export const Circle = styled('div', {
|
|
@@ -13,7 +13,7 @@ import { Grid } from '@visx/grid';
|
|
|
13
13
|
import { Group } from '@visx/group';
|
|
14
14
|
import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
|
|
15
15
|
import { BarStack } from '@visx/shape';
|
|
16
|
-
import {
|
|
16
|
+
import { TooltipWithBounds, useTooltip } from '@visx/tooltip';
|
|
17
17
|
import dayjs from 'dayjs';
|
|
18
18
|
import utc from 'dayjs/plugin/utc.js';
|
|
19
19
|
import React, { Fragment, useEffect, useRef } from 'react';
|
|
@@ -31,7 +31,6 @@ import {
|
|
|
31
31
|
DEFAULT_MARGIN,
|
|
32
32
|
TOOLTIP_DELAY_MS,
|
|
33
33
|
TOOLTIP_HIDE_DELAY_MS,
|
|
34
|
-
TOOLTIP_SHADOW,
|
|
35
34
|
} from './BarChart.constants.js';
|
|
36
35
|
import {
|
|
37
36
|
generateTickValues,
|
|
@@ -65,18 +64,15 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
65
64
|
|
|
66
65
|
const isMobile = useIsMobile();
|
|
67
66
|
const daysRange = getDaysRange(data.length);
|
|
68
|
-
const bottomAxis =
|
|
69
|
-
|
|
70
|
-
|
|
67
|
+
const bottomAxis =
|
|
68
|
+
width < 700
|
|
69
|
+
? bottomAxisData.mobile[daysRange]
|
|
70
|
+
: bottomAxisData.desktop[daysRange];
|
|
71
71
|
|
|
72
72
|
const { intervalBottomAxis, numBottomAxis, startBottomAxis } = bottomAxis;
|
|
73
73
|
|
|
74
74
|
let tooltipTimeout: number;
|
|
75
75
|
const tooltipRef = useRef<HTMLInputElement>(null);
|
|
76
|
-
const { containerRef, TooltipInPortal } = useTooltipInPortal({
|
|
77
|
-
// TooltipInPortal is rendered in a separate child of <body />
|
|
78
|
-
scroll: true,
|
|
79
|
-
});
|
|
80
76
|
|
|
81
77
|
// bounds
|
|
82
78
|
const xMax = width - margin.left - 20;
|
|
@@ -139,7 +135,7 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
139
135
|
return () => {
|
|
140
136
|
document.removeEventListener('click', handleClickOutside, true);
|
|
141
137
|
};
|
|
142
|
-
}, [tooltipRef]);
|
|
138
|
+
}, [tooltipRef, isMobile]);
|
|
143
139
|
|
|
144
140
|
dateScale.range([0, xMax]);
|
|
145
141
|
valueScale.range([yMax, 0]);
|
|
@@ -214,7 +210,7 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
214
210
|
|
|
215
211
|
return (
|
|
216
212
|
<Container>
|
|
217
|
-
<svg
|
|
213
|
+
<svg width={width} height={height}>
|
|
218
214
|
<rect
|
|
219
215
|
x={0}
|
|
220
216
|
y={0}
|
|
@@ -332,8 +328,8 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
332
328
|
/>
|
|
333
329
|
</svg>
|
|
334
330
|
|
|
335
|
-
{
|
|
336
|
-
<
|
|
331
|
+
{tooltipData && tooltipOpen && (
|
|
332
|
+
<TooltipWithBounds
|
|
337
333
|
top={tooltipTop}
|
|
338
334
|
left={tooltipLeft}
|
|
339
335
|
style={{
|
|
@@ -342,10 +338,8 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
342
338
|
position: 'absolute',
|
|
343
339
|
zIndex: '99999999',
|
|
344
340
|
}}>
|
|
345
|
-
<TooltipContainer
|
|
346
|
-
|
|
347
|
-
style={{ boxShadow: TOOLTIP_SHADOW }}>
|
|
348
|
-
{tooltipData.bar.bar.data.date && (
|
|
341
|
+
<TooltipContainer ref={tooltipRef}>
|
|
342
|
+
{tooltipData?.bar.bar.data.date && (
|
|
349
343
|
<TooltipInfoRow>
|
|
350
344
|
<div>
|
|
351
345
|
{dayjs
|
|
@@ -363,7 +357,7 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
363
357
|
)}
|
|
364
358
|
{Array.from(colorBucketMap).map((mapItem) => {
|
|
365
359
|
const [bucketItem, bucketColor] = mapItem;
|
|
366
|
-
const value = tooltipData
|
|
360
|
+
const value = tooltipData?.bar.bar.data[bucketItem];
|
|
367
361
|
const formattedValue = !isNaN(Number(value))
|
|
368
362
|
? AmountConverter(Number(Number(value).toFixed(2)))
|
|
369
363
|
: '0';
|
|
@@ -386,7 +380,7 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
386
380
|
);
|
|
387
381
|
})}
|
|
388
382
|
</TooltipContainer>
|
|
389
|
-
</
|
|
383
|
+
</TooltipWithBounds>
|
|
390
384
|
)}
|
|
391
385
|
</Container>
|
|
392
386
|
);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { SeriesPoint } from '@visx/shape/lib/types';
|
|
1
|
+
import type { SeriesPoint } from '@visx/shape/lib/types/barStack.js';
|
|
2
2
|
|
|
3
3
|
export interface BarChartPropTypes {
|
|
4
4
|
data: BarStackDataType[];
|
|
@@ -30,3 +30,15 @@ export type TooltipDataType = {
|
|
|
30
30
|
};
|
|
31
31
|
hoveredIndex: number;
|
|
32
32
|
};
|
|
33
|
+
|
|
34
|
+
export type DailyDataType = {
|
|
35
|
+
date: string;
|
|
36
|
+
bucket: string;
|
|
37
|
+
value: number;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
export type ChartOptionsType = {
|
|
41
|
+
dailyData: DailyDataType[];
|
|
42
|
+
barChartColors: string[];
|
|
43
|
+
label?: string;
|
|
44
|
+
};
|
package/src/index.ts
CHANGED
|
@@ -2,5 +2,7 @@ export type {
|
|
|
2
2
|
BarStackDataType,
|
|
3
3
|
ColorBucketMapType,
|
|
4
4
|
BarChartPropTypes,
|
|
5
|
+
ChartOptionsType,
|
|
6
|
+
DailyDataType,
|
|
5
7
|
} from './components/BarChart/index.js';
|
|
6
|
-
export { BarChart } from './components/BarChart/index.js';
|
|
8
|
+
export { BarChart, prepareBarChartData } from './components/BarChart/index.js';
|