@rango-dev/charts 0.1.1-next.1 → 0.1.1-next.11
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 +12 -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 +3 -3
- 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 +22 -23
- package/src/components/BarChart/BarChart.types.ts +14 -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;
|
|
@@ -12,6 +12,7 @@ export interface BarChartPropTypes {
|
|
|
12
12
|
left: number;
|
|
13
13
|
};
|
|
14
14
|
getLabel?: (value: string) => string;
|
|
15
|
+
isDarkTheme?: boolean;
|
|
15
16
|
}
|
|
16
17
|
export type BarStackDataType = {
|
|
17
18
|
[key: string]: string;
|
|
@@ -30,4 +31,14 @@ export type TooltipDataType = {
|
|
|
30
31
|
};
|
|
31
32
|
hoveredIndex: number;
|
|
32
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
|
+
};
|
|
33
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 } = 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);\n return () => {\n document.removeEventListener('click', handleClickOutside);\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 />\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: '#727272',\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: '#727272',\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 }}>\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,
|
|
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.11",
|
|
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.8",
|
|
30
30
|
"@visx/axis": "2.18.0",
|
|
31
31
|
"@visx/event": "2.17.0",
|
|
32
32
|
"@visx/grid": "2.18.0",
|
|
@@ -38,4 +38,4 @@
|
|
|
38
38
|
"publishConfig": {
|
|
39
39
|
"access": "public"
|
|
40
40
|
}
|
|
41
|
-
}
|
|
41
|
+
}
|
|
@@ -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,
|
|
@@ -60,22 +59,20 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
60
59
|
buckets,
|
|
61
60
|
margin = DEFAULT_MARGIN,
|
|
62
61
|
getLabel,
|
|
62
|
+
isDarkTheme = false,
|
|
63
63
|
} = props;
|
|
64
64
|
|
|
65
65
|
const isMobile = useIsMobile();
|
|
66
66
|
const daysRange = getDaysRange(data.length);
|
|
67
|
-
const bottomAxis =
|
|
68
|
-
|
|
69
|
-
|
|
67
|
+
const bottomAxis =
|
|
68
|
+
width < 700
|
|
69
|
+
? bottomAxisData.mobile[daysRange]
|
|
70
|
+
: bottomAxisData.desktop[daysRange];
|
|
70
71
|
|
|
71
72
|
const { intervalBottomAxis, numBottomAxis, startBottomAxis } = bottomAxis;
|
|
72
73
|
|
|
73
74
|
let tooltipTimeout: number;
|
|
74
75
|
const tooltipRef = useRef<HTMLInputElement>(null);
|
|
75
|
-
const { containerRef, TooltipInPortal } = useTooltipInPortal({
|
|
76
|
-
// TooltipInPortal is rendered in a separate child of <body />
|
|
77
|
-
scroll: true,
|
|
78
|
-
});
|
|
79
76
|
|
|
80
77
|
// bounds
|
|
81
78
|
const xMax = width - margin.left - 20;
|
|
@@ -134,11 +131,11 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
134
131
|
hideTooltip();
|
|
135
132
|
}
|
|
136
133
|
}
|
|
137
|
-
document.addEventListener('click', handleClickOutside);
|
|
134
|
+
document.addEventListener('click', handleClickOutside, true);
|
|
138
135
|
return () => {
|
|
139
|
-
document.removeEventListener('click', handleClickOutside);
|
|
136
|
+
document.removeEventListener('click', handleClickOutside, true);
|
|
140
137
|
};
|
|
141
|
-
}, [tooltipRef]);
|
|
138
|
+
}, [tooltipRef, isMobile]);
|
|
142
139
|
|
|
143
140
|
dateScale.range([0, xMax]);
|
|
144
141
|
valueScale.range([yMax, 0]);
|
|
@@ -213,7 +210,7 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
213
210
|
|
|
214
211
|
return (
|
|
215
212
|
<Container>
|
|
216
|
-
<svg
|
|
213
|
+
<svg width={width} height={height}>
|
|
217
214
|
<rect
|
|
218
215
|
x={0}
|
|
219
216
|
y={0}
|
|
@@ -234,6 +231,9 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
234
231
|
numTicksRows={5}
|
|
235
232
|
numTicksColumns={0}
|
|
236
233
|
columnLineStyle={{ display: 'none' }}
|
|
234
|
+
rowLineStyle={{
|
|
235
|
+
stroke: '#B8B8B8',
|
|
236
|
+
}}
|
|
237
237
|
/>
|
|
238
238
|
|
|
239
239
|
<Group top={margin.top} left={margin.left + 10}>
|
|
@@ -307,7 +307,7 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
307
307
|
tickFormat={(d) => getDayOfMonth(d)}
|
|
308
308
|
tickLabelProps={() => ({
|
|
309
309
|
fontSize: isMobile ? 10 : 12,
|
|
310
|
-
fill: '#
|
|
310
|
+
fill: isDarkTheme ? '#B8B8B8' : '#A2A2A2',
|
|
311
311
|
textAnchor: 'middle',
|
|
312
312
|
})}
|
|
313
313
|
/>
|
|
@@ -322,25 +322,24 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
322
322
|
tickFormat={(d) => compactNumberFormat(Number(d))}
|
|
323
323
|
tickLabelProps={() => ({
|
|
324
324
|
fontSize: isMobile ? 10 : 12,
|
|
325
|
-
fill: '#
|
|
325
|
+
fill: isDarkTheme ? '#B8B8B8' : '#A2A2A2',
|
|
326
326
|
textAnchor: 'middle',
|
|
327
327
|
})}
|
|
328
328
|
/>
|
|
329
329
|
</svg>
|
|
330
330
|
|
|
331
|
-
{
|
|
332
|
-
<
|
|
331
|
+
{tooltipData && tooltipOpen && (
|
|
332
|
+
<TooltipWithBounds
|
|
333
333
|
top={tooltipTop}
|
|
334
334
|
left={tooltipLeft}
|
|
335
335
|
style={{
|
|
336
336
|
backgroundColor: 'transparent',
|
|
337
337
|
boxShadow: 'none',
|
|
338
338
|
position: 'absolute',
|
|
339
|
+
zIndex: '99999999',
|
|
339
340
|
}}>
|
|
340
|
-
<TooltipContainer
|
|
341
|
-
|
|
342
|
-
style={{ boxShadow: TOOLTIP_SHADOW }}>
|
|
343
|
-
{tooltipData.bar.bar.data.date && (
|
|
341
|
+
<TooltipContainer ref={tooltipRef}>
|
|
342
|
+
{tooltipData?.bar.bar.data.date && (
|
|
344
343
|
<TooltipInfoRow>
|
|
345
344
|
<div>
|
|
346
345
|
{dayjs
|
|
@@ -358,7 +357,7 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
358
357
|
)}
|
|
359
358
|
{Array.from(colorBucketMap).map((mapItem) => {
|
|
360
359
|
const [bucketItem, bucketColor] = mapItem;
|
|
361
|
-
const value = tooltipData
|
|
360
|
+
const value = tooltipData?.bar.bar.data[bucketItem];
|
|
362
361
|
const formattedValue = !isNaN(Number(value))
|
|
363
362
|
? AmountConverter(Number(Number(value).toFixed(2)))
|
|
364
363
|
: '0';
|
|
@@ -381,7 +380,7 @@ export const BarChart = (props: BarChartPropTypes) => {
|
|
|
381
380
|
);
|
|
382
381
|
})}
|
|
383
382
|
</TooltipContainer>
|
|
384
|
-
</
|
|
383
|
+
</TooltipWithBounds>
|
|
385
384
|
)}
|
|
386
385
|
</Container>
|
|
387
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[];
|
|
@@ -8,6 +8,7 @@ export interface BarChartPropTypes {
|
|
|
8
8
|
buckets: string[];
|
|
9
9
|
margin?: { top: number; right: number; bottom: number; left: number };
|
|
10
10
|
getLabel?: (value: string) => string;
|
|
11
|
+
isDarkTheme?: boolean;
|
|
11
12
|
}
|
|
12
13
|
|
|
13
14
|
export type BarStackDataType = {
|
|
@@ -29,3 +30,15 @@ export type TooltipDataType = {
|
|
|
29
30
|
};
|
|
30
31
|
hoveredIndex: number;
|
|
31
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';
|