@rango-dev/charts 0.0.0-experimental-936229e8-20251208

package/CHANGELOG.md

@@ -0,0 +1,98 @@
+# [0.20.0](https://github.com/rango-exchange/rango-client/compare/charts@0.19.1...charts@0.20.0) (2025-12-02)
+
+
+
+## [0.19.1](https://github.com/rango-exchange/rango-client/compare/charts@0.19.0...charts@0.19.1) (2025-11-22)
+
+
+
+# [0.17.0](https://github.com/rango-exchange/rango-client/compare/charts@0.16.0...charts@0.17.0) (2025-10-29)
+
+
+
+# [0.16.0](https://github.com/rango-exchange/rango-client/compare/charts@0.15.0...charts@0.16.0) (2025-09-29)
+
+
+
+# [0.15.0](https://github.com/rango-exchange/rango-client/compare/charts@0.14.0...charts@0.15.0) (2025-09-06)
+
+
+
+# [0.14.0](https://github.com/rango-exchange/rango-client/compare/charts@0.13.0...charts@0.14.0) (2025-08-27)
+
+
+
+# [0.13.0](https://github.com/rango-exchange/rango-client/compare/charts@0.12.0...charts@0.13.0) (2025-08-19)
+
+
+
+# [0.12.0](https://github.com/rango-exchange/rango-client/compare/charts@0.11.0...charts@0.12.0) (2025-08-05)
+
+
+
+# [0.11.0](https://github.com/rango-exchange/rango-client/compare/charts@0.10.0...charts@0.11.0) (2025-07-22)
+
+
+### Reverts
+
+* Revert "chore(release): publish" ([064ce15](https://github.com/rango-exchange/rango-client/commit/064ce157a2f819856f647f83aeb1c0410542e8d7))
+
+
+
+# [0.9.0](https://github.com/rango-exchange/rango-client/compare/charts@0.8.1...charts@0.9.0) (2025-06-09)
+
+
+### Bug Fixes
+
+* if data exceed 90 days, bottom axis should be shown correctly ([34c0606](https://github.com/rango-exchange/rango-client/commit/34c0606986b72aab97e5174a9bce2f1e1e5a159a))
+
+
+
+## [0.8.1](https://github.com/rango-exchange/rango-client/compare/charts@0.8.0...charts@0.8.1) (2025-05-04)
+
+
+
+# [0.8.0](https://github.com/rango-exchange/rango-client/compare/charts@0.7.0...charts@0.8.0) (2025-04-30)
+
+
+
+# [0.7.0](https://github.com/rango-exchange/rango-client/compare/charts@0.6.0...charts@0.7.0) (2025-03-11)
+
+
+
+# [0.6.0](https://github.com/rango-exchange/rango-client/compare/charts@0.5.0...charts@0.6.0) (2025-02-23)
+
+
+
+# [0.5.0](https://github.com/rango-exchange/rango-client/compare/charts@0.4.0...charts@0.5.0) (2024-12-30)
+
+
+
+# [0.4.0](https://github.com/rango-exchange/rango-client/compare/charts@0.3.0...charts@0.4.0) (2024-11-27)
+
+
+
+# [0.3.0](https://github.com/rango-exchange/rango-client/compare/charts@0.2.0...charts@0.3.0) (2024-11-12)
+
+
+### Bug Fixes
+
+* improve y-axis display for bar charts with smaller data sets ([ad13491](https://github.com/rango-exchange/rango-client/commit/ad1349157f38d172ae2028981881ae4276ddab8d))
+
+
+
+# 0.2.0 (2024-10-12)
+
+
+### Bug Fixes
+
+* add chart icon and handle dark theme in BarChart component ([fd4f246](https://github.com/rango-exchange/rango-client/commit/fd4f24684e42deb1b47fb9a6584ac4f9a1519599))
+* add prepare data function for chart package ([a9f8c6b](https://github.com/rango-exchange/rango-client/commit/a9f8c6b092ca5343756e220238c943dbc369a62b))
+
+
+### Features
+
+* add chart package ([f5ae7e4](https://github.com/rango-exchange/rango-client/commit/f5ae7e449ec1e385188ff904e9d59862fa8ef1d2))
+
+
+

package/dist/charts.build.json

@@ -0,0 +1 @@
+{"inputs":{"src/hooks/useIsMobile.ts":{"bytes":494,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/utils/amountConverter.ts":{"bytes":1092,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/utils/common.ts":{"bytes":381,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/components/BarChart/BarChart.constants.ts":{"bytes":1033,"imports":[],"format":"esm"},"src/components/BarChart/BarChart.helpers.ts":{"bytes":4337,"imports":[{"path":"src/components/BarChart/BarChart.constants.ts","kind":"import-statement","original":"./BarChart.constants.js"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/components/BarChart/BarChart.styles.ts":{"bytes":1117,"imports":[{"path":"@rango-dev/ui","kind":"import-statement","external":true}],"format":"esm"},"src/components/BarChart/BarChart.tsx":{"bytes":11717,"imports":[{"path":"@rango-dev/ui","kind":"import-statement","external":true},{"path":"@visx/axis","kind":"import-statement","external":true},{"path":"@visx/event","kind":"import-statement","external":true},{"path":"@visx/grid","kind":"import-statement","external":true},{"path":"@visx/group","kind":"import-statement","external":true},{"path":"@visx/scale","kind":"import-statement","external":true},{"path":"@visx/shape","kind":"import-statement","external":true},{"path":"@visx/tooltip","kind":"import-statement","external":true},{"path":"dayjs","kind":"import-statement","external":true},{"path":"dayjs/plugin/utc.js","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"src/hooks/useIsMobile.ts","kind":"import-statement","original":"../../hooks/useIsMobile.js"},{"path":"src/utils/amountConverter.ts","kind":"import-statement","original":"../../utils/amountConverter.js"},{"path":"src/utils/common.ts","kind":"import-statement","original":"../../utils/common.js"},{"path":"src/components/BarChart/BarChart.constants.ts","kind":"import-statement","original":"./BarChart.constants.js"},{"path":"src/components/BarChart/BarChart.helpers.ts","kind":"import-statement","original":"./BarChart.helpers.js"},{"path":"src/components/BarChart/BarChart.styles.ts","kind":"import-statement","original":"./BarChart.styles.js"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/components/BarChart/index.ts":{"bytes":248,"imports":[{"path":"src/components/BarChart/BarChart.tsx","kind":"import-statement","original":"./BarChart.js"},{"path":"src/components/BarChart/BarChart.helpers.ts","kind":"import-statement","original":"./BarChart.helpers.js"}],"format":"esm"},"src/index.ts":{"bytes":235,"imports":[{"path":"src/components/BarChart/index.ts","kind":"import-statement","original":"./components/BarChart/index.js"}],"format":"esm"}},"outputs":{"dist/index.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":33657},"dist/index.js":{"imports":[{"path":"@rango-dev/ui","kind":"import-statement","external":true},{"path":"@visx/axis","kind":"import-statement","external":true},{"path":"@visx/event","kind":"import-statement","external":true},{"path":"@visx/grid","kind":"import-statement","external":true},{"path":"@visx/group","kind":"import-statement","external":true},{"path":"@visx/scale","kind":"import-statement","external":true},{"path":"@visx/shape","kind":"import-statement","external":true},{"path":"@visx/tooltip","kind":"import-statement","external":true},{"path":"dayjs","kind":"import-statement","external":true},{"path":"dayjs/plugin/utc.js","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@rango-dev/ui","kind":"import-statement","external":true}],"exports":["BarChart","prepareBarChartData"],"entryPoint":"src/index.ts","inputs":{"src/components/BarChart/BarChart.tsx":{"bytesInOutput":3977},"src/hooks/useIsMobile.ts":{"bytesInOutput":269},"src/utils/amountConverter.ts":{"bytesInOutput":318},"src/utils/common.ts":{"bytesInOutput":129},"src/components/BarChart/BarChart.constants.ts":{"bytesInOutput":566},"src/components/BarChart/BarChart.helpers.ts":{"bytesInOutput":1285},"src/components/BarChart/BarChart.styles.ts":{"bytesInOutput":756},"src/components/BarChart/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":7464}}}

package/dist/components/BarChart/BarChart.constants.d.ts

@@ -0,0 +1,17 @@
+import type { BottomAxisData } from './BarChart.types.js';
+export declare const DEFAULT_MARGIN: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare const TOOLTIP_DELAY_MS = 100;
+export declare const TOOLTIP_HIDE_DELAY_MS = 300;
+export declare const DEFAULT_CHART_COLORS: string[];
+export declare const bottomAxisData: {
+    [key: string]: {
+        [key: number]: BottomAxisData;
+    };
+};
+export declare const MAX_BAR_BUCKETS = 10;
+//# sourceMappingURL=BarChart.constants.d.ts.map

package/dist/components/BarChart/BarChart.constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.constants.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,eAAO,MAAM,cAAc;;;;;CAA6C,CAAC;AAEzE,eAAO,MAAM,gBAAgB,MAAM,CAAC;AACpC,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAaxC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE;IAC3B,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,CAAC;KAC/B,CAAC;CAYH,CAAC;AAEF,eAAO,MAAM,eAAe,KAAK,CAAC"}

package/dist/components/BarChart/BarChart.d.ts

@@ -0,0 +1,4 @@
+import type { BarChartPropTypes } from './BarChart.types.js';
+import React from 'react';
+export declare const BarChart: (props: BarChartPropTypes) => React.JSX.Element | null;
+//# sourceMappingURL=BarChart.d.ts.map

package/dist/components/BarChart/BarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,iBAAiB,EAIlB,MAAM,qBAAqB,CAAC;AAa7B,OAAO,KAAsC,MAAM,OAAO,CAAC;AAmC3D,eAAO,MAAM,QAAQ,UAAW,iBAAiB,6BA0VhD,CAAC"}

package/dist/components/BarChart/BarChart.helpers.d.ts

@@ -0,0 +1,12 @@
+import type { BarStackDataType, ChartOptionsType, ColorBucketMapType } from './BarChart.types.js';
+export declare const getTotalValueDates: (data: BarStackDataType[], buckets: string[]) => number[];
+export declare const generateTickValues: (dates: string[], start: number, interval: number) => string[];
+export declare const getTotalValue: (dataColumn: BarStackDataType) => number;
+export declare const getDaysRange: (lengthValue: number) => 7 | 30 | 90;
+export declare const prepareBarChartData: (chartOption: ChartOptionsType) => {
+    chartData: BarStackDataType[];
+    colorBucketMap: ColorBucketMapType;
+    buckets: string[];
+};
+export declare const getEvenlySpacedNumber: (max: number, count: number) => number;
+//# sourceMappingURL=BarChart.helpers.d.ts.map

package/dist/components/BarChart/BarChart.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.helpers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,EAEnB,MAAM,qBAAqB,CAAC;AAI7B,eAAO,MAAM,kBAAkB,SACvB,gBAAgB,EAAE,WACf,MAAM,EAAE,aAclB,CAAC;AAGF,eAAO,MAAM,kBAAkB,UACtB,MAAM,EAAE,SACR,MAAM,YACH,MAAM,aAOjB,CAAC;AAEF,eAAO,MAAM,aAAa,eAAgB,gBAAgB,WAWzD,CAAC;AAEF,eAAO,MAAM,YAAY,gBAAiB,MAAM,gBAQ/C,CAAC;AAEF,eAAO,MAAM,mBAAmB,gBAAiB,gBAAgB;;;;CAmFhE,CAAC;AAEF,eAAO,MAAM,qBAAqB,QAAS,MAAM,SAAS,MAAM,WAG/D,CAAC"}

package/dist/components/BarChart/BarChart.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const Container: any;
+export declare const TooltipContainer: any;
+export declare const TooltipInfoRow: any;
+export declare const Line: any;
+export declare const InfoContainer: any;
+export declare const Circle: any;
+export declare const NameWrapper: any;
+//# sourceMappingURL=BarChart.styles.d.ts.map

package/dist/components/BarChart/BarChart.styles.d.ts.map

@@ -0,0 +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"}

package/dist/components/BarChart/BarChart.types.d.ts

@@ -0,0 +1,49 @@
+import type { SeriesPoint } from '@visx/shape/lib/types/barStack.js';
+export interface BarChartPropTypes {
+    data: BarStackDataType[];
+    width: number;
+    height: number;
+    colorBucketMap: ColorBucketMapType;
+    buckets: string[];
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    getLabel?: (value: string) => string;
+    isDarkTheme?: boolean;
+}
+export type BarStackDataType = {
+    [key: string]: string;
+};
+export type ColorBucketMapType = Map<string, string>;
+export type TooltipDataType = {
+    bar: {
+        bar: SeriesPoint<BarStackDataType>;
+        key: string;
+        index: number;
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+        color: string;
+    };
+    hoveredIndex: number;
+};
+export type DailyDataType = {
+    date: string;
+    bucket: string;
+    value: number;
+};
+export type ChartOptionsType = {
+    dailyData: DailyDataType[];
+    barChartColors: string[];
+    label?: string;
+};
+export interface BottomAxisData {
+    numBottomAxis: number;
+    startBottomAxis: number;
+    intervalBottomAxis: number;
+}
+//# sourceMappingURL=BarChart.types.d.ts.map

package/dist/components/BarChart/BarChart.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.types.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAErE,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,kBAAkB,CAAC;IACnC,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAErD,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE;QACH,GAAG,EAAE,WAAW,CAAC,gBAAgB,CAAC,CAAC;QACnC,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;QACV,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,EAAE,MAAM,CAAC;CAC5B"}

package/dist/components/BarChart/index.d.ts

@@ -0,0 +1,4 @@
+export { BarChart } from './BarChart.js';
+export { prepareBarChartData } from './BarChart.helpers.js';
+export type { BarStackDataType, ColorBucketMapType, BarChartPropTypes, ChartOptionsType, DailyDataType, } from './BarChart.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/BarChart/index.d.ts.map

@@ -0,0 +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/hooks/useIsMobile.d.ts

@@ -0,0 +1,3 @@
+declare const useIsMobile: () => boolean;
+export default useIsMobile;
+//# sourceMappingURL=useIsMobile.d.ts.map

package/dist/hooks/useIsMobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsMobile.d.ts","sourceRoot":"","sources":["../../src/hooks/useIsMobile.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,WAAW,eAehB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export type { BarStackDataType, ColorBucketMapType, BarChartPropTypes, ChartOptionsType, DailyDataType, } from './components/BarChart/index.js';
+export { BarChart, prepareBarChartData } from './components/BarChart/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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

@@ -0,0 +1,2 @@
+var kt=Object.defineProperty;var r=(t,e)=>kt(t,"name",{value:e,configurable:!0});import{Divider as st}from"@rango-dev/ui";import{AxisBottom as Mt,AxisLeft as Et}from"@visx/axis";import{localPoint as lt}from"@visx/event";import{Grid as Lt}from"@visx/grid";import{Group as Nt}from"@visx/group";import{scaleBand as wt,scaleLinear as Ot,scaleOrdinal as Ft}from"@visx/scale";import{BarStack as It}from"@visx/shape";import{TooltipWithBounds as $t,useTooltip as _t}from"@visx/tooltip";import pt from"dayjs";import Pt from"dayjs/plugin/utc.js";import a,{Fragment as Vt,useEffect as zt,useRef as Gt}from"react";import{useEffect as At,useState as Dt}from"react";var Ct=r(()=>{let[t,e]=Dt(!1);return At(()=>{let o=r(()=>{e(window.innerWidth<=640)},"handleResize");return o(),window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]),t},"useIsMobile"),G=Ct;var vt=["","K","M","B"];function O(t){let e=Math.sign(t),o=0;for(;Math.abs(t)>1e3;)o=o+1,t=Math.floor(Math.abs(t)/10)/100;return e*Math.abs(t)+vt[o]}r(O,"AmountConverter");function H(t){return!t||isNaN(t)?"0":Intl.NumberFormat("en-US",{notation:"compact",maximumFractionDigits:1}).format(t)}r(H,"compactNumberFormat");function U(t){let e=new Date(t),o=e.toLocaleDateString("en-US",{month:"short"});return`${e.getDate()} ${o}`}r(U,"getDayOfMonth");var j={top:40,right:0,bottom:0,left:20},R=100,W=300,Y=["#469BF5","#29DABA","#D629DA","#4658F5","#9DF546","#F01DA8","#FF8B66","#44F1E6","#29DA7A","#F17606","#8B62FF","#F4C932"],F={desktop:{7:{numBottomAxis:7,startBottomAxis:0,intervalBottomAxis:1},30:{numBottomAxis:6,startBottomAxis:4,intervalBottomAxis:5},90:{numBottomAxis:8,startBottomAxis:5,intervalBottomAxis:10}},mobile:{7:{numBottomAxis:3,startBottomAxis:1,intervalBottomAxis:2},30:{numBottomAxis:3,startBottomAxis:3,intervalBottomAxis:10},90:{numBottomAxis:3,startBottomAxis:10,intervalBottomAxis:30}}},E=10;var J=r((t,e)=>t.reduce((p,m)=>{let B=e.reduce((l,h)=>(l+=isNaN(Number(m[h]))?0:Number(m[h]),l),0);return p.push(B),p},[]),"getTotalValueDates"),K=r((t,e,o)=>{let p=[];for(let m=e;m<t.length;m+=o)p.push(t[m]);return p},"generateTickValues"),X=r(t=>{let e=0;return Object.keys(t).forEach(o=>{if(o!=="date"){let p=t[o];isNaN(Number(p))||(e+=Number(p))}}),e},"getTotalValue"),q=r(t=>t<15?7:t<50?30:90,"getDaysRange"),Q=r(t=>{let{dailyData:e,label:o="Count"}=t,p=[],m=new Map,B=[],{barChartColors:l}=t,h=new Map;e.forEach(i=>{let f=i.bucket||o,g=h.get(f)||0,c=i.value;h.set(f,g+c)});let d=Array.from(h).sort((i,f)=>f[1]-i[1]).map(i=>i[0]).slice(0,E),k=h.size;d.forEach((i,f)=>{m.set(i,l[f%l.length]),B.push(i)}),k>E&&(m.set("Others",l[l.length-1]),B.push("Others"));let b=new Map;return e.forEach(i=>{b.has(i.date)||b.set(i.date,[]),b.get(i.date)?.push(i)}),b.forEach((i,f)=>{let g={date:f};if(i.filter(c=>d.includes(c.bucket||o)).forEach(c=>{let T=c.value;g[c.bucket||o]=T?T.toString():"0"}),d.forEach(c=>{c in g||(g[c]="0")}),k>E){let T=i.filter(y=>y.bucket&&!d.includes(y.bucket)).map(y=>y.value).reduce((y,v)=>y+v,0);g.Others=T.toString()}p.push(g)}),{chartData:p,colorBucketMap:m,buckets:B}},"prepareBarChartData"),Z=r((t,e)=>{let o=t/e;return Math.round(o)},"getEvenlySpacedNumber");import{darkTheme as St,styled as C}from"@rango-dev/ui";var tt=C("div",{position:"relative"}),et=C("div",{width:165,borderRadius:"$sm",backgroundColor:"$background",$$color:"$colors$neutral500",[`.${St} &`]:{$$color:"$colors$neutral100"},boxShadow:"0px 5px 20px 0px $$color"}),ot=C("div",{display:"flex",alignItems:"center",fontSize:"$12",justifyContent:"space-between",padding:"$8 $10",fontWeight:"$medium",color:"$foreground"}),rt=C("div",{height:1,width:"100%",backgroundColor:"$neutral300"}),at=C("div",{display:"flex",alignItems:"center",justifyContent:"space-between",fontSize:"$10",padding:"$5 $10",color:"$foreground"}),nt=C("div",{width:"$6",height:"$6",borderRadius:3}),it=C("div",{display:"flex",alignItems:"center",justifyContent:"flex-start"});pt.extend(Pt);var ct=r(t=>{let{data:e,width:o,height:p,colorBucketMap:m,buckets:B,margin:l=j,getLabel:h,isDarkTheme:L=!1}=t,d=G(),k=q(e.length),b;if(e.length>90){let n=Z(e.length,7);b={numBottomAxis:7,intervalBottomAxis:n,startBottomAxis:n-10}}else b=o<700?F.mobile[k]:F.desktop[k];let{intervalBottomAxis:i,numBottomAxis:f,startBottomAxis:g}=b,c,T=Gt(null),y=o-l.left-20,v=p-l.top-30,N=r(s=>s.date,"getDate"),ut=e.map(N),mt=K(ut,g,i),{tooltipOpen:I,tooltipLeft:dt,tooltipTop:ht,tooltipData:A,hideTooltip:$,showTooltip:_}=_t(),ft=J(e,B),S=wt({domain:e.map(N),paddingInner:k===7?.3:.46,paddingOuter:k===90?1:.3}),P=Math.max(...ft),V=P+P/5,M=Ot({domain:[0,V<.5?.5:V],nice:!0}),xt=Ft({domain:B,range:Y});if(zt(()=>{function s(n){d&&T?.current&&!T.current.contains(n.target)&&$()}return r(s,"handleClickOutside"),document.addEventListener("click",s,!0),()=>{document.removeEventListener("click",s,!0)}},[T,d]),S.range([0,y]),M.range([v,0]),o<10)return null;let Bt=r((s,n,u)=>{if(d){c&&clearTimeout(c);let x=lt(s),D=n.x+n.width/2;setTimeout(()=>{_({tooltipData:{bar:n,hoveredIndex:u},tooltipTop:x?.y,tooltipLeft:D})},R)}},"handleBarClick"),gt=r(()=>{d||(c=window.setTimeout(()=>{$()},W))},"handleMouseLeave"),Tt=r((s,n,u)=>{if(!d){c&&clearTimeout(c);let x=lt(s),D=n.x+n.width/2+40;_({tooltipData:{bar:n,hoveredIndex:u},tooltipTop:x?.y,tooltipLeft:D})}},"handleMouseMove"),z=r(s=>O(Number(X(s).toFixed(2))),"getFormattedTotalValue");return a.createElement(tt,null,a.createElement("svg",{width:o,height:p},a.createElement("rect",{x:0,y:0,width:o,height:p,fill:"transparent",rx:14}),a.createElement(Lt,{top:l.top,left:l.left+10,xScale:S,yScale:M,width:y,height:v,stroke:"black",strokeOpacity:.1,numTicksRows:5,numTicksColumns:0,columnLineStyle:{display:"none"},rowLineStyle:{stroke:"#B8B8B8"}}),a.createElement(Nt,{top:l.top,left:l.left+10},a.createElement(It,{data:e,keys:B,x:N,xScale:S,yScale:M,color:xt},s=>s.map(n=>n.bars.map((u,x)=>{let yt=!(A?.hoveredIndex===x)&&I,bt=m.get(n.key)||u.color;return a.createElement("rect",{key:`bar-stack-${n.index}-${u.index}`,x:u.x,y:u.y,height:u.height,width:u.width,fill:bt,opacity:yt?.5:1,onClick:w=>Bt(w,u,x),onMouseLeave:gt,onMouseMove:w=>Tt(w,u,x)})})))),a.createElement(Mt,{top:v+l.top,left:l.left+10,scale:S,hideAxisLine:!0,hideTicks:!0,numTicks:f,tickValues:mt,tickFormat:s=>U(s),tickLabelProps:()=>({fontSize:d?10:12,fill:L?"#B8B8B8":"#A2A2A2",textAnchor:"middle"})}),a.createElement(Et,{hideAxisLine:!0,hideTicks:!0,numTicks:d?3:5,top:l.top,left:l.left,scale:M,tickFormat:s=>H(Number(s)),tickLabelProps:()=>({fontSize:d?10:12,fill:L?"#B8B8B8":"#A2A2A2",textAnchor:"middle"})})),A&&I&&a.createElement($t,{top:ht,left:dt,style:{backgroundColor:"transparent",boxShadow:"none",position:"absolute",zIndex:"99999999"}},a.createElement(et,{ref:T},A?.bar.bar.data.date&&a.createElement(ot,null,a.createElement("div",null,pt.utc(A.bar.bar.data.date).local().format("YYYY/MM/DD").toString()),a.createElement("div",null,h?h(z(A.bar.bar.data)):z(A.bar.bar.data))),Array.from(m).map(s=>{let[n,u]=s,x=A?.bar.bar.data[n],D=isNaN(Number(x))?"0":O(Number(Number(x).toFixed(2)));return a.createElement(Vt,{key:n},a.createElement(rt,null),a.createElement(at,null,a.createElement(it,null,a.createElement(nt,{style:{backgroundColor:u}}),a.createElement(st,{direction:"horizontal",size:"4"}),a.createElement("span",null,n)),a.createElement(st,{direction:"horizontal",size:"10"}),a.createElement("span",null,h?h(D):D)))}))))},"BarChart");export{ct as BarChart,Q as prepareBarChartData};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 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"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-magic-numbers */\nimport type {\n  BarChartPropTypes,\n  BarStackDataType,\n  BottomAxisData,\n  TooltipDataType,\n} from './BarChart.types.js';\nimport type { BarGroupBar, SeriesPoint } from '@visx/shape/lib/types';\n\nimport { Divider } from '@rango-dev/ui';\nimport { AxisBottom, AxisLeft } from '@visx/axis';\nimport { localPoint } from '@visx/event';\nimport { Grid } from '@visx/grid';\nimport { Group } from '@visx/group';\nimport { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';\nimport { BarStack } from '@visx/shape';\nimport { TooltipWithBounds, useTooltip } from '@visx/tooltip';\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc.js';\nimport React, { Fragment, useEffect, useRef } from 'react';\n\nimport useIsMobile from '../../hooks/useIsMobile.js';\nimport {\n  AmountConverter,\n  compactNumberFormat,\n} from '../../utils/amountConverter.js';\nimport { getDayOfMonth } from '../../utils/common.js';\n\nimport {\n  bottomAxisData,\n  DEFAULT_CHART_COLORS,\n  DEFAULT_MARGIN,\n  TOOLTIP_DELAY_MS,\n  TOOLTIP_HIDE_DELAY_MS,\n} from './BarChart.constants.js';\nimport {\n  generateTickValues,\n  getDaysRange,\n  getEvenlySpacedNumber,\n  getTotalValue,\n  getTotalValueDates,\n} from './BarChart.helpers.js';\nimport {\n  Circle,\n  Container,\n  InfoContainer,\n  Line,\n  NameWrapper,\n  TooltipContainer,\n  TooltipInfoRow,\n} from './BarChart.styles.js';\n\ndayjs.extend(utc);\n\nexport const BarChart = (props: BarChartPropTypes) => {\n  const {\n    data,\n    width,\n    height,\n    colorBucketMap,\n    buckets,\n    margin = DEFAULT_MARGIN,\n    getLabel,\n    isDarkTheme = false,\n  } = props;\n\n  const isMobile = useIsMobile();\n  const daysRange = getDaysRange(data.length);\n\n  let bottomAxis: BottomAxisData;\n  if (data.length > 90) {\n    const count = 7;\n    const interval = getEvenlySpacedNumber(data.length, count);\n    bottomAxis = {\n      numBottomAxis: count,\n      intervalBottomAxis: interval,\n      startBottomAxis: interval - 10,\n    };\n  } else {\n    bottomAxis =\n      width < 700\n        ? bottomAxisData.mobile[daysRange]\n        : bottomAxisData.desktop[daysRange];\n  }\n\n  const { intervalBottomAxis, numBottomAxis, startBottomAxis } = bottomAxis;\n\n  let tooltipTimeout: number;\n  const tooltipRef = useRef<HTMLInputElement>(null);\n\n  // bounds\n  const xMax = width - margin.left - 20;\n  const yMax = height - margin.top - 30;\n\n  // accessors\n  const getDate = (d: BarStackDataType) => d.date;\n\n  // handle bottom axis data\n  const allDate = data.map(getDate);\n\n  const bottomAxisValue = generateTickValues(\n    allDate,\n    startBottomAxis,\n    intervalBottomAxis\n  );\n\n  const {\n    tooltipOpen,\n    tooltipLeft,\n    tooltipTop,\n    tooltipData,\n    hideTooltip,\n    showTooltip,\n  } = useTooltip<TooltipDataType>();\n\n  const totalValueDates = getTotalValueDates(data, buckets);\n\n  // scales\n  const dateScale = scaleBand<string>({\n    domain: data.map(getDate),\n    paddingInner: daysRange === 7 ? 0.3 : 0.46,\n    paddingOuter: daysRange === 90 ? 1 : 0.3,\n  });\n\n  const totalValue = Math.max(...totalValueDates);\n\n  const scaledMaxValue = totalValue + totalValue / 5;\n  const valueScale = scaleLinear<number>({\n    domain: [0, scaledMaxValue < 0.5 ? 0.5 : scaledMaxValue],\n    nice: true,\n  });\n  const colorScale = scaleOrdinal<string, string>({\n    domain: buckets,\n    range: DEFAULT_CHART_COLORS,\n  });\n\n  useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    function handleClickOutside(event: any) {\n      if (\n        isMobile &&\n        tooltipRef?.current &&\n        !tooltipRef.current.contains(event.target)\n      ) {\n        hideTooltip();\n      }\n    }\n    document.addEventListener('click', handleClickOutside, true);\n    return () => {\n      document.removeEventListener('click', handleClickOutside, true);\n    };\n  }, [tooltipRef, isMobile]);\n\n  dateScale.range([0, xMax]);\n  valueScale.range([yMax, 0]);\n\n  if (width < 10) {\n    return null;\n  }\n\n  const handleBarClick = (\n    event: React.MouseEvent<SVGRectElement, MouseEvent>,\n    bar: Omit<BarGroupBar<string>, 'key' | 'value'> & {\n      bar: SeriesPoint<BarStackDataType>;\n      key: string;\n    },\n    index: number\n  ) => {\n    if (isMobile) {\n      if (tooltipTimeout) {\n        clearTimeout(tooltipTimeout);\n      }\n      const eventSvgCoords = localPoint(event);\n      const left = bar.x + bar.width / 2;\n      setTimeout(() => {\n        showTooltip({\n          tooltipData: { bar, hoveredIndex: index },\n          tooltipTop: eventSvgCoords?.y,\n          tooltipLeft: left,\n        });\n      }, TOOLTIP_DELAY_MS);\n    }\n  };\n\n  const handleMouseLeave = () => {\n    if (!isMobile) {\n      tooltipTimeout = window.setTimeout(() => {\n        hideTooltip();\n      }, TOOLTIP_HIDE_DELAY_MS);\n    }\n  };\n\n  const handleMouseMove = (\n    event: React.MouseEvent<SVGRectElement, MouseEvent>,\n    bar: Omit<BarGroupBar<string>, 'key' | 'value'> & {\n      bar: SeriesPoint<BarStackDataType>;\n      key: string;\n    },\n    index: number\n  ) => {\n    if (!isMobile) {\n      if (tooltipTimeout) {\n        clearTimeout(tooltipTimeout);\n      }\n      /*\n       * TooltipInPortal expects coordinates to be relative to containerRef\n       * localPoint returns coordinates relative to the nearest SVG, which\n       * is what containerRef is set to in this example.\n       */\n      const eventSvgCoords = localPoint(event);\n      const left = bar.x + bar.width / 2 + 40;\n\n      // make sure to pass the index of the hovered bar\n      showTooltip({\n        tooltipData: { bar, hoveredIndex: index },\n        tooltipTop: eventSvgCoords?.y,\n        tooltipLeft: left,\n      });\n    }\n  };\n\n  const getFormattedTotalValue = (data: BarStackDataType) =>\n    AmountConverter(Number(getTotalValue(data).toFixed(2)));\n\n  return (\n    <Container>\n      <svg width={width} height={height}>\n        <rect\n          x={0}\n          y={0}\n          width={width}\n          height={height}\n          fill=\"transparent\"\n          rx={14}\n        />\n        <Grid\n          top={margin.top}\n          left={margin.left + 10}\n          xScale={dateScale}\n          yScale={valueScale}\n          width={xMax}\n          height={yMax}\n          stroke=\"black\"\n          strokeOpacity={0.1}\n          numTicksRows={5}\n          numTicksColumns={0}\n          columnLineStyle={{ display: 'none' }}\n          rowLineStyle={{\n            stroke: '#B8B8B8',\n          }}\n        />\n\n        <Group top={margin.top} left={margin.left + 10}>\n          <BarStack\n            data={data}\n            keys={buckets}\n            x={getDate}\n            xScale={dateScale}\n            yScale={valueScale}\n            color={colorScale}>\n            {(barStacks) => {\n              /*\n               * barStacks returns an array of series objects broken down by key.\n               */\n              return barStacks.map((barStack) =>\n                /*\n                 * each barStack contains an array of bars, which contain the data\n                 * for only that series for a given data point. the number of bars in a\n                 * given stack corresponds to the number of data points in our data array\n                 */\n\n                barStack.bars.map((bar, index) => {\n                  /*\n                   * we can then assume that the data in each stack at a given index\n                   * is related to the data in all other stacks at that index.\n                   */\n                  const shouldBeHighlighted =\n                    tooltipData?.hoveredIndex === index;\n\n                  /*\n                   * we can then decide the opacity for our stacks based on whether the\n                   * tooltip is open, and whether the stack being hovered matches the\n                   * index passed to our tooltipData\n                   */\n                  const shouldHavePartialOpacity =\n                    !shouldBeHighlighted && tooltipOpen;\n\n                  const barColor =\n                    colorBucketMap.get(barStack.key) || bar.color;\n\n                  return (\n                    <rect\n                      key={`bar-stack-${barStack.index}-${bar.index}`}\n                      x={bar.x}\n                      y={bar.y}\n                      height={bar.height}\n                      width={bar.width}\n                      fill={barColor}\n                      opacity={shouldHavePartialOpacity ? 0.5 : 1}\n                      onClick={(event) => handleBarClick(event, bar, index)}\n                      onMouseLeave={handleMouseLeave}\n                      onMouseMove={(event) =>\n                        handleMouseMove(event, bar, index)\n                      }\n                    />\n                  );\n                })\n              );\n            }}\n          </BarStack>\n        </Group>\n\n        <AxisBottom\n          top={yMax + margin.top}\n          left={margin.left + 10}\n          scale={dateScale}\n          hideAxisLine\n          hideTicks\n          numTicks={numBottomAxis}\n          tickValues={bottomAxisValue}\n          tickFormat={(d) => getDayOfMonth(d)}\n          tickLabelProps={() => ({\n            fontSize: isMobile ? 10 : 12,\n            fill: isDarkTheme ? '#B8B8B8' : '#A2A2A2',\n            textAnchor: 'middle',\n          })}\n        />\n\n        <AxisLeft\n          hideAxisLine\n          hideTicks\n          numTicks={isMobile ? 3 : 5}\n          top={margin.top}\n          left={margin.left}\n          scale={valueScale}\n          tickFormat={(d) => compactNumberFormat(Number(d))}\n          tickLabelProps={() => ({\n            fontSize: isMobile ? 10 : 12,\n            fill: isDarkTheme ? '#B8B8B8' : '#A2A2A2',\n            textAnchor: 'middle',\n          })}\n        />\n      </svg>\n\n      {tooltipData && tooltipOpen && (\n        <TooltipWithBounds\n          top={tooltipTop}\n          left={tooltipLeft}\n          style={{\n            backgroundColor: 'transparent',\n            boxShadow: 'none',\n            position: 'absolute',\n            zIndex: '99999999',\n          }}>\n          <TooltipContainer ref={tooltipRef}>\n            {tooltipData?.bar.bar.data.date && (\n              <TooltipInfoRow>\n                <div>\n                  {dayjs\n                    .utc(tooltipData.bar.bar.data.date)\n                    .local()\n                    .format('YYYY/MM/DD')\n                    .toString()}\n                </div>\n                <div>\n                  {getLabel\n                    ? getLabel(getFormattedTotalValue(tooltipData.bar.bar.data))\n                    : getFormattedTotalValue(tooltipData.bar.bar.data)}\n                </div>\n              </TooltipInfoRow>\n            )}\n            {Array.from(colorBucketMap).map((mapItem) => {\n              const [bucketItem, bucketColor] = mapItem;\n              const value = tooltipData?.bar.bar.data[bucketItem];\n              const formattedValue = !isNaN(Number(value))\n                ? AmountConverter(Number(Number(value).toFixed(2)))\n                : '0';\n              return (\n                <Fragment key={bucketItem}>\n                  <Line />\n                  <InfoContainer>\n                    <NameWrapper>\n                      <Circle style={{ backgroundColor: bucketColor }} />\n                      <Divider direction=\"horizontal\" size={'4'} />\n                      <span>{bucketItem}</span>\n                    </NameWrapper>\n                    <Divider direction=\"horizontal\" size={'10'} />\n\n                    <span>\n                      {getLabel ? getLabel(formattedValue) : formattedValue}\n                    </span>\n                  </InfoContainer>\n                </Fragment>\n              );\n            })}\n          </TooltipContainer>\n        </TooltipWithBounds>\n      )}\n    </Container>\n  );\n};\n", "import { useEffect, useState } from 'react';\n\nconst useIsMobile = () => {\n  const [isMobile, setIsMobile] = useState<boolean>(false);\n\n  useEffect(() => {\n    const handleResize = () => {\n      const mobileBreakpoint = 640;\n      setIsMobile(window.innerWidth <= mobileBreakpoint);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return isMobile;\n};\n\nexport default useIsMobile;\n", "const THRESHOLD = 1000;\nconst BASE_TEN = 10;\nconst PERCENTAGE_MULTIPLIER = 100;\n\nconst unitList = ['', 'K', 'M', 'B'];\nexport function AmountConverter(number: number) {\n  const sign = Math.sign(number);\n  let unit = 0;\n  while (Math.abs(number) > THRESHOLD) {\n    unit = unit + 1;\n    number = Math.floor(Math.abs(number) / BASE_TEN) / PERCENTAGE_MULTIPLIER;\n  }\n  return sign * Math.abs(number) + unitList[unit];\n}\n\nexport function getPercentageChange(\n  input: number | null,\n  output: number | null\n) {\n  if (!input || !output) {\n    return null;\n  }\n  return parseFloat(\n    Number((output / input - 1) * PERCENTAGE_MULTIPLIER).toFixed(2)\n  );\n}\n\nexport function numberWithCommas(number: number) {\n  if (!number || isNaN(number)) {\n    return number;\n  }\n\n  return number.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\n}\n\nexport function compactNumberFormat(number: number) {\n  if (!number || isNaN(number)) {\n    return '0';\n  }\n\n  const numberFormat = Intl.NumberFormat('en-US', {\n    notation: 'compact',\n    maximumFractionDigits: 1,\n  }).format(number);\n\n  return numberFormat;\n}\n", "export const monthsShort = [\n  'Jan',\n  'Feb',\n  'Mar',\n  'Apr',\n  'May',\n  'Jun',\n  'Jul',\n  'Aug',\n  'Sep',\n  'Oct',\n  'Nov',\n  'Dec',\n];\n\nexport function getDayOfMonth(dateString: string) {\n  const date = new Date(dateString);\n  const monthName = date.toLocaleDateString('en-US', { month: 'short' });\n  const dayNumber = date.getDate();\n\n  return `${dayNumber} ${monthName}`;\n}\n", "import type { BottomAxisData } from './BarChart.types.js';\n\nexport const DEFAULT_MARGIN = { top: 40, right: 0, bottom: 0, left: 20 };\n\nexport const TOOLTIP_DELAY_MS = 100;\nexport const TOOLTIP_HIDE_DELAY_MS = 300;\n\nexport const DEFAULT_CHART_COLORS: string[] = [\n  '#469BF5',\n  '#29DABA',\n  '#D629DA',\n  '#4658F5',\n  '#9DF546',\n  '#F01DA8',\n  '#FF8B66',\n  '#44F1E6',\n  '#29DA7A',\n  '#F17606',\n  '#8B62FF',\n  '#F4C932',\n];\n\nexport const bottomAxisData: {\n  [key: string]: {\n    [key: number]: BottomAxisData;\n  };\n} = {\n  desktop: {\n    7: { numBottomAxis: 7, startBottomAxis: 0, intervalBottomAxis: 1 },\n    30: { numBottomAxis: 6, startBottomAxis: 4, intervalBottomAxis: 5 },\n    90: { numBottomAxis: 8, startBottomAxis: 5, intervalBottomAxis: 10 },\n  },\n  mobile: {\n    7: { numBottomAxis: 3, startBottomAxis: 1, intervalBottomAxis: 2 },\n    30: { numBottomAxis: 3, startBottomAxis: 3, intervalBottomAxis: 10 },\n    90: { numBottomAxis: 3, startBottomAxis: 10, intervalBottomAxis: 30 },\n  },\n};\n\nexport const MAX_BAR_BUCKETS = 10;\n", "/* eslint-disable @typescript-eslint/no-magic-numbers */\nimport type {\n  BarStackDataType,\n  ChartOptionsType,\n  ColorBucketMapType,\n  DailyDataType,\n} from './BarChart.types.js';\n\nimport { MAX_BAR_BUCKETS } from './BarChart.constants.js';\n\nexport const getTotalValueDates = (\n  data: BarStackDataType[],\n  buckets: string[]\n) => {\n  const totalValueDates = data.reduce((accumulator, currentData) => {\n    const totalValuePerDate = buckets.reduce((dailyTotal, currentBucket) => {\n      dailyTotal += !isNaN(Number(currentData[currentBucket]))\n        ? Number(currentData[currentBucket])\n        : 0;\n      return dailyTotal;\n    }, 0);\n    accumulator.push(totalValuePerDate);\n    return accumulator;\n  }, [] as number[]);\n\n  return totalValueDates;\n};\n\n// Function to generate tick values at intervals of 5, starting from the 5th element\nexport const generateTickValues = (\n  dates: string[],\n  start: number,\n  interval: number\n) => {\n  const tickValues = [];\n  for (let i = start; i < dates.length; i += interval) {\n    tickValues.push(dates[i]);\n  }\n  return tickValues;\n};\n\nexport const getTotalValue = (dataColumn: BarStackDataType) => {\n  let result = 0;\n  Object.keys(dataColumn).forEach((key) => {\n    if (key !== 'date') {\n      const value = dataColumn[key];\n      if (!isNaN(Number(value))) {\n        result += Number(value);\n      }\n    }\n  });\n  return result;\n};\n\nexport const getDaysRange = (lengthValue: number) => {\n  if (lengthValue < 15) {\n    return 7;\n  }\n  if (lengthValue < 50) {\n    return 30;\n  }\n  return 90;\n};\n\nexport const prepareBarChartData = (chartOption: ChartOptionsType) => {\n  const { dailyData, label = 'Count' } = chartOption;\n  const chartData: BarStackDataType[] = [];\n  const colorBucketMap: ColorBucketMapType = new Map();\n  const buckets: string[] = [];\n\n  const { barChartColors } = chartOption;\n\n  // map sum of value for each bucket\n  const sumBucketMap = new Map<string, number>();\n  dailyData.forEach((dailyItem) => {\n    const keyItem = dailyItem.bucket || label;\n\n    const sum = sumBucketMap.get(keyItem) || 0;\n    const newValue = dailyItem.value;\n    sumBucketMap.set(keyItem, sum + newValue);\n  });\n\n  const sortedBucket = Array.from(sumBucketMap).sort((a, b) => b[1] - a[1]);\n\n  // get top buckets for stack bars\n  const topBucket = sortedBucket\n    .map((sortedItem) => sortedItem[0])\n    .slice(0, MAX_BAR_BUCKETS);\n\n  const bucketCount = sumBucketMap.size;\n\n  // create map structure for assign color for each bucket\n  topBucket.forEach((bucketItem, index) => {\n    colorBucketMap.set(\n      bucketItem,\n      barChartColors[index % barChartColors.length]\n    );\n    buckets.push(bucketItem);\n  });\n\n  if (bucketCount > MAX_BAR_BUCKETS) {\n    colorBucketMap.set('Others', barChartColors[barChartColors.length - 1]);\n    buckets.push('Others');\n  }\n\n  // create map structure for assign chart data for each date\n  const dateMap = new Map<string, DailyDataType[]>();\n  dailyData.forEach((dailyItem) => {\n    if (!dateMap.has(dailyItem.date)) {\n      dateMap.set(dailyItem.date, []);\n    }\n\n    const dateItem = dateMap.get(dailyItem.date);\n    dateItem?.push(dailyItem);\n  });\n\n  // create data result for bar stack chart\n  dateMap.forEach((dateDailyList, keyDate) => {\n    const dataItem: BarStackDataType = { date: keyDate };\n    dateDailyList\n      .filter((dailyItem) => topBucket.includes(dailyItem.bucket || label))\n      .forEach((topDailyItem) => {\n        const bucketValue = topDailyItem.value;\n        dataItem[topDailyItem.bucket || label] = bucketValue\n          ? bucketValue.toString()\n          : '0';\n      });\n\n    topBucket.forEach((topItem) => {\n      if (!(topItem in dataItem)) {\n        dataItem[topItem] = '0';\n      }\n    });\n\n    if (bucketCount > MAX_BAR_BUCKETS) {\n      const otherBuckets = dateDailyList.filter(\n        (dailyItem) => dailyItem.bucket && !topBucket.includes(dailyItem.bucket)\n      );\n      const othersValue = otherBuckets\n        .map((dailyItem) => dailyItem.value)\n        .reduce((accumulator, currentValue) => accumulator + currentValue, 0);\n      dataItem['Others'] = othersValue.toString();\n    }\n\n    chartData.push(dataItem);\n  });\n  return { chartData, colorBucketMap, buckets };\n};\n\nexport const getEvenlySpacedNumber = (max: number, count: number) => {\n  const interval = max / count;\n  return Math.round(interval);\n};\n", "import { darkTheme, styled } from '@rango-dev/ui';\n\nexport const Container = styled('div', {\n  position: 'relative',\n});\n\nexport const TooltipContainer = styled('div', {\n  width: 165,\n  borderRadius: '$sm',\n  backgroundColor: '$background',\n\n  $$color: '$colors$neutral500',\n  [`.${darkTheme} &`]: {\n    $$color: '$colors$neutral100',\n  },\n\n  boxShadow: '0px 5px 20px 0px $$color',\n});\n\nexport const TooltipInfoRow = styled('div', {\n  display: 'flex',\n  alignItems: 'center',\n  fontSize: '$12',\n  justifyContent: 'space-between',\n  padding: '$8 $10',\n  fontWeight: '$medium',\n  color: '$foreground',\n});\n\nexport const Line = styled('div', {\n  height: 1,\n  width: '100%',\n  backgroundColor: '$neutral300',\n});\n\nexport const InfoContainer = styled('div', {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  fontSize: '$10',\n  padding: '$5 $10',\n  color: '$foreground',\n});\n\nexport const Circle = styled('div', {\n  width: '$6',\n  height: '$6',\n  borderRadius: 3,\n});\n\nexport const NameWrapper = styled('div', {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n});\n"],
+  "mappings": "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",
+  "names": ["Divider", "AxisBottom", "AxisLeft", "localPoint", "Grid", "Group", "scaleBand", "scaleLinear", "scaleOrdinal", "BarStack", "TooltipWithBounds", "useTooltip", "dayjs", "utc", "React", "Fragment", "useEffect", "useRef", "useEffect", "useState", "useIsMobile", "__name", "isMobile", "setIsMobile", "useState", "useEffect", "handleResize", "useIsMobile_default", "unitList", "AmountConverter", "number", "sign", "unit", "__name", "compactNumberFormat", "number", "__name", "getDayOfMonth", "dateString", "date", "monthName", "__name", "DEFAULT_MARGIN", "TOOLTIP_DELAY_MS", "TOOLTIP_HIDE_DELAY_MS", "DEFAULT_CHART_COLORS", "bottomAxisData", "MAX_BAR_BUCKETS", "getTotalValueDates", "__name", "data", "buckets", "accumulator", "currentData", "totalValuePerDate", "dailyTotal", "currentBucket", "generateTickValues", "dates", "start", "interval", "tickValues", "i", "getTotalValue", "dataColumn", "result", "key", "value", "getDaysRange", "lengthValue", "prepareBarChartData", "chartOption", "dailyData", "label", "chartData", "colorBucketMap", "barChartColors", "sumBucketMap", "dailyItem", "keyItem", "sum", "newValue", "topBucket", "a", "b", "sortedItem", "MAX_BAR_BUCKETS", "bucketCount", "bucketItem", "index", "dateMap", "dateDailyList", "keyDate", "dataItem", "topDailyItem", "bucketValue", "topItem", "othersValue", "currentValue", "getEvenlySpacedNumber", "max", "count", "darkTheme", "styled", "Container", "TooltipContainer", "TooltipInfoRow", "Line", "InfoContainer", "Circle", "NameWrapper", "dayjs", "utc", "BarChart", "__name", "props", "data", "width", "height", "colorBucketMap", "buckets", "margin", "DEFAULT_MARGIN", "getLabel", "isDarkTheme", "isMobile", "useIsMobile_default", "daysRange", "getDaysRange", "bottomAxis", "interval", "getEvenlySpacedNumber", "bottomAxisData", "intervalBottomAxis", "numBottomAxis", "startBottomAxis", "tooltipTimeout", "tooltipRef", "useRef", "xMax", "yMax", "getDate", "d", "allDate", "bottomAxisValue", "generateTickValues", "tooltipOpen", "tooltipLeft", "tooltipTop", "tooltipData", "hideTooltip", "showTooltip", "useTooltip", "totalValueDates", "getTotalValueDates", "dateScale", "scaleBand", "totalValue", "scaledMaxValue", "valueScale", "scaleLinear", "colorScale", "scaleOrdinal", "DEFAULT_CHART_COLORS", "useEffect", "handleClickOutside", "event", "handleBarClick", "bar", "index", "eventSvgCoords", "localPoint", "left", "TOOLTIP_DELAY_MS", "handleMouseLeave", "TOOLTIP_HIDE_DELAY_MS", "handleMouseMove", "getFormattedTotalValue", "AmountConverter", "getTotalValue", "React", "Container", "Grid", "Group", "BarStack", "barStacks", "barStack", "shouldHavePartialOpacity", "barColor", "AxisBottom", "getDayOfMonth", "AxisLeft", "compactNumberFormat", "TooltipWithBounds", "TooltipContainer", "TooltipInfoRow", "mapItem", "bucketItem", "bucketColor", "value", "formattedValue", "Fragment", "Line", "InfoContainer", "NameWrapper", "Circle", "Divider"]
+}

package/dist/utils/amountConverter.d.ts

@@ -0,0 +1,5 @@
+export declare function AmountConverter(number: number): string;
+export declare function getPercentageChange(input: number | null, output: number | null): number | null;
+export declare function numberWithCommas(number: number): string | number;
+export declare function compactNumberFormat(number: number): string;
+//# sourceMappingURL=amountConverter.d.ts.map

package/dist/utils/amountConverter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"amountConverter.d.ts","sourceRoot":"","sources":["../../src/utils/amountConverter.ts"],"names":[],"mappings":"AAKA,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,UAQ7C;AAED,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,MAAM,GAAG,IAAI,EACpB,MAAM,EAAE,MAAM,GAAG,IAAI,iBAQtB;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM,mBAM9C;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,UAWjD"}

package/dist/utils/common.d.ts

@@ -0,0 +1,3 @@
+export declare const monthsShort: string[];
+export declare function getDayOfMonth(dateString: string): string;
+//# sourceMappingURL=common.d.ts.map

package/dist/utils/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,UAavB,CAAC;AAEF,wBAAgB,aAAa,CAAC,UAAU,EAAE,MAAM,UAM/C"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@rango-dev/charts",
+  "version": "0.0.0-experimental-936229e8-20251208",
+  "license": "MIT",
+  "type": "module",
+  "source": "./src/index.ts",
+  "main": "./dist/index.js",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "default": "./dist/index.js"
+  },
+  "typings": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "node ../../scripts/build/command.mjs --path widget/charts",
+    "ts-check": "tsc --declaration --emitDeclarationOnly -p ./tsconfig.json",
+    "clean": "rimraf dist",
+    "format": "prettier --write '{.,src}/**/*.{ts,tsx}'",
+    "lint": "eslint \"**/*.{ts,tsx}\""
+  },
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16"
+  },
+  "dependencies": {
+    "@rango-dev/ui": "^0.0.0-experimental-936229e8-20251208",
+    "@visx/axis": "2.18.0",
+    "@visx/event": "2.17.0",
+    "@visx/grid": "2.18.0",
+    "@visx/scale": "2.18.0",
+    "@visx/shape": "2.18.0",
+    "@visx/tooltip": "2.17.0",
+    "dayjs": "^1.11.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/readme.md

@@ -0,0 +1,4 @@
+# @rango-dev/charts
+
+Rango charts
+

package/src/components/BarChart/BarChart.constants.ts

@@ -0,0 +1,40 @@
+import type { BottomAxisData } from './BarChart.types.js';
+
+export const DEFAULT_MARGIN = { top: 40, right: 0, bottom: 0, left: 20 };
+
+export const TOOLTIP_DELAY_MS = 100;
+export const TOOLTIP_HIDE_DELAY_MS = 300;
+
+export const DEFAULT_CHART_COLORS: string[] = [
+  '#469BF5',
+  '#29DABA',
+  '#D629DA',
+  '#4658F5',
+  '#9DF546',
+  '#F01DA8',
+  '#FF8B66',
+  '#44F1E6',
+  '#29DA7A',
+  '#F17606',
+  '#8B62FF',
+  '#F4C932',
+];
+
+export const bottomAxisData: {
+  [key: string]: {
+    [key: number]: BottomAxisData;
+  };
+} = {
+  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 },
+  },
+};
+
+export const MAX_BAR_BUCKETS = 10;

package/src/components/BarChart/BarChart.helpers.ts

@@ -0,0 +1,153 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type {
+  BarStackDataType,
+  ChartOptionsType,
+  ColorBucketMapType,
+  DailyDataType,
+} from './BarChart.types.js';
+
+import { MAX_BAR_BUCKETS } from './BarChart.constants.js';
+
+export const getTotalValueDates = (
+  data: BarStackDataType[],
+  buckets: string[]
+) => {
+  const totalValueDates = data.reduce((accumulator, currentData) => {
+    const totalValuePerDate = buckets.reduce((dailyTotal, currentBucket) => {
+      dailyTotal += !isNaN(Number(currentData[currentBucket]))
+        ? Number(currentData[currentBucket])
+        : 0;
+      return dailyTotal;
+    }, 0);
+    accumulator.push(totalValuePerDate);
+    return accumulator;
+  }, [] as number[]);
+
+  return totalValueDates;
+};
+
+// Function to generate tick values at intervals of 5, starting from the 5th element
+export const generateTickValues = (
+  dates: string[],
+  start: number,
+  interval: number
+) => {
+  const tickValues = [];
+  for (let i = start; i < dates.length; i += interval) {
+    tickValues.push(dates[i]);
+  }
+  return tickValues;
+};
+
+export const getTotalValue = (dataColumn: BarStackDataType) => {
+  let result = 0;
+  Object.keys(dataColumn).forEach((key) => {
+    if (key !== 'date') {
+      const value = dataColumn[key];
+      if (!isNaN(Number(value))) {
+        result += Number(value);
+      }
+    }
+  });
+  return result;
+};
+
+export const getDaysRange = (lengthValue: number) => {
+  if (lengthValue < 15) {
+    return 7;
+  }
+  if (lengthValue < 50) {
+    return 30;
+  }
+  return 90;
+};
+
+export const prepareBarChartData = (chartOption: ChartOptionsType) => {
+  const { dailyData, label = 'Count' } = chartOption;
+  const chartData: BarStackDataType[] = [];
+  const colorBucketMap: ColorBucketMapType = new Map();
+  const buckets: string[] = [];
+
+  const { barChartColors } = chartOption;
+
+  // map sum of value for each bucket
+  const sumBucketMap = new Map<string, number>();
+  dailyData.forEach((dailyItem) => {
+    const keyItem = dailyItem.bucket || label;
+
+    const sum = sumBucketMap.get(keyItem) || 0;
+    const newValue = dailyItem.value;
+    sumBucketMap.set(keyItem, sum + newValue);
+  });
+
+  const sortedBucket = Array.from(sumBucketMap).sort((a, b) => b[1] - a[1]);
+
+  // get top buckets for stack bars
+  const topBucket = sortedBucket
+    .map((sortedItem) => sortedItem[0])
+    .slice(0, MAX_BAR_BUCKETS);
+
+  const bucketCount = sumBucketMap.size;
+
+  // create map structure for assign color for each bucket
+  topBucket.forEach((bucketItem, index) => {
+    colorBucketMap.set(
+      bucketItem,
+      barChartColors[index % barChartColors.length]
+    );
+    buckets.push(bucketItem);
+  });
+
+  if (bucketCount > MAX_BAR_BUCKETS) {
+    colorBucketMap.set('Others', barChartColors[barChartColors.length - 1]);
+    buckets.push('Others');
+  }
+
+  // create map structure for assign chart data for each date
+  const dateMap = new Map<string, DailyDataType[]>();
+  dailyData.forEach((dailyItem) => {
+    if (!dateMap.has(dailyItem.date)) {
+      dateMap.set(dailyItem.date, []);
+    }
+
+    const dateItem = dateMap.get(dailyItem.date);
+    dateItem?.push(dailyItem);
+  });
+
+  // create data result for bar stack chart
+  dateMap.forEach((dateDailyList, keyDate) => {
+    const dataItem: BarStackDataType = { date: keyDate };
+    dateDailyList
+      .filter((dailyItem) => topBucket.includes(dailyItem.bucket || label))
+      .forEach((topDailyItem) => {
+        const bucketValue = topDailyItem.value;
+        dataItem[topDailyItem.bucket || label] = bucketValue
+          ? bucketValue.toString()
+          : '0';
+      });
+
+    topBucket.forEach((topItem) => {
+      if (!(topItem in dataItem)) {
+        dataItem[topItem] = '0';
+      }
+    });
+
+    if (bucketCount > MAX_BAR_BUCKETS) {
+      const otherBuckets = dateDailyList.filter(
+        (dailyItem) => dailyItem.bucket && !topBucket.includes(dailyItem.bucket)
+      );
+      const othersValue = otherBuckets
+        .map((dailyItem) => dailyItem.value)
+        .reduce((accumulator, currentValue) => accumulator + currentValue, 0);
+      dataItem['Others'] = othersValue.toString();
+    }
+
+    chartData.push(dataItem);
+  });
+  return { chartData, colorBucketMap, buckets };
+};
+
+export const getEvenlySpacedNumber = (max: number, count: number) => {
+  const interval = max / count;
+  return Math.round(interval);
+};

package/src/components/BarChart/BarChart.styles.ts

@@ -0,0 +1,55 @@
+import { darkTheme, styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  position: 'relative',
+});
+
+export const TooltipContainer = styled('div', {
+  width: 165,
+  borderRadius: '$sm',
+  backgroundColor: '$background',
+
+  $$color: '$colors$neutral500',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral100',
+  },
+
+  boxShadow: '0px 5px 20px 0px $$color',
+});
+
+export const TooltipInfoRow = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: '$12',
+  justifyContent: 'space-between',
+  padding: '$8 $10',
+  fontWeight: '$medium',
+  color: '$foreground',
+});
+
+export const Line = styled('div', {
+  height: 1,
+  width: '100%',
+  backgroundColor: '$neutral300',
+});
+
+export const InfoContainer = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  fontSize: '$10',
+  padding: '$5 $10',
+  color: '$foreground',
+});
+
+export const Circle = styled('div', {
+  width: '$6',
+  height: '$6',
+  borderRadius: 3,
+});
+
+export const NameWrapper = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+});

package/src/components/BarChart/BarChart.tsx

@@ -0,0 +1,401 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type {
+  BarChartPropTypes,
+  BarStackDataType,
+  BottomAxisData,
+  TooltipDataType,
+} from './BarChart.types.js';
+import type { BarGroupBar, SeriesPoint } from '@visx/shape/lib/types';
+
+import { Divider } from '@rango-dev/ui';
+import { AxisBottom, AxisLeft } from '@visx/axis';
+import { localPoint } from '@visx/event';
+import { Grid } from '@visx/grid';
+import { Group } from '@visx/group';
+import { scaleBand, scaleLinear, scaleOrdinal } from '@visx/scale';
+import { BarStack } from '@visx/shape';
+import { TooltipWithBounds, useTooltip } from '@visx/tooltip';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc.js';
+import React, { Fragment, useEffect, useRef } from 'react';
+
+import useIsMobile from '../../hooks/useIsMobile.js';
+import {
+  AmountConverter,
+  compactNumberFormat,
+} from '../../utils/amountConverter.js';
+import { getDayOfMonth } from '../../utils/common.js';
+
+import {
+  bottomAxisData,
+  DEFAULT_CHART_COLORS,
+  DEFAULT_MARGIN,
+  TOOLTIP_DELAY_MS,
+  TOOLTIP_HIDE_DELAY_MS,
+} from './BarChart.constants.js';
+import {
+  generateTickValues,
+  getDaysRange,
+  getEvenlySpacedNumber,
+  getTotalValue,
+  getTotalValueDates,
+} from './BarChart.helpers.js';
+import {
+  Circle,
+  Container,
+  InfoContainer,
+  Line,
+  NameWrapper,
+  TooltipContainer,
+  TooltipInfoRow,
+} from './BarChart.styles.js';
+
+dayjs.extend(utc);
+
+export const BarChart = (props: BarChartPropTypes) => {
+  const {
+    data,
+    width,
+    height,
+    colorBucketMap,
+    buckets,
+    margin = DEFAULT_MARGIN,
+    getLabel,
+    isDarkTheme = false,
+  } = props;
+
+  const isMobile = useIsMobile();
+  const daysRange = getDaysRange(data.length);
+
+  let bottomAxis: BottomAxisData;
+  if (data.length > 90) {
+    const count = 7;
+    const interval = getEvenlySpacedNumber(data.length, count);
+    bottomAxis = {
+      numBottomAxis: count,
+      intervalBottomAxis: interval,
+      startBottomAxis: interval - 10,
+    };
+  } else {
+    bottomAxis =
+      width < 700
+        ? bottomAxisData.mobile[daysRange]
+        : bottomAxisData.desktop[daysRange];
+  }
+
+  const { intervalBottomAxis, numBottomAxis, startBottomAxis } = bottomAxis;
+
+  let tooltipTimeout: number;
+  const tooltipRef = useRef<HTMLInputElement>(null);
+
+  // bounds
+  const xMax = width - margin.left - 20;
+  const yMax = height - margin.top - 30;
+
+  // accessors
+  const getDate = (d: BarStackDataType) => d.date;
+
+  // handle bottom axis data
+  const allDate = data.map(getDate);
+
+  const bottomAxisValue = generateTickValues(
+    allDate,
+    startBottomAxis,
+    intervalBottomAxis
+  );
+
+  const {
+    tooltipOpen,
+    tooltipLeft,
+    tooltipTop,
+    tooltipData,
+    hideTooltip,
+    showTooltip,
+  } = useTooltip<TooltipDataType>();
+
+  const totalValueDates = getTotalValueDates(data, buckets);
+
+  // scales
+  const dateScale = scaleBand<string>({
+    domain: data.map(getDate),
+    paddingInner: daysRange === 7 ? 0.3 : 0.46,
+    paddingOuter: daysRange === 90 ? 1 : 0.3,
+  });
+
+  const totalValue = Math.max(...totalValueDates);
+
+  const scaledMaxValue = totalValue + totalValue / 5;
+  const valueScale = scaleLinear<number>({
+    domain: [0, scaledMaxValue < 0.5 ? 0.5 : scaledMaxValue],
+    nice: true,
+  });
+  const colorScale = scaleOrdinal<string, string>({
+    domain: buckets,
+    range: DEFAULT_CHART_COLORS,
+  });
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function handleClickOutside(event: any) {
+      if (
+        isMobile &&
+        tooltipRef?.current &&
+        !tooltipRef.current.contains(event.target)
+      ) {
+        hideTooltip();
+      }
+    }
+    document.addEventListener('click', handleClickOutside, true);
+    return () => {
+      document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [tooltipRef, isMobile]);
+
+  dateScale.range([0, xMax]);
+  valueScale.range([yMax, 0]);
+
+  if (width < 10) {
+    return null;
+  }
+
+  const handleBarClick = (
+    event: React.MouseEvent<SVGRectElement, MouseEvent>,
+    bar: Omit<BarGroupBar<string>, 'key' | 'value'> & {
+      bar: SeriesPoint<BarStackDataType>;
+      key: string;
+    },
+    index: number
+  ) => {
+    if (isMobile) {
+      if (tooltipTimeout) {
+        clearTimeout(tooltipTimeout);
+      }
+      const eventSvgCoords = localPoint(event);
+      const left = bar.x + bar.width / 2;
+      setTimeout(() => {
+        showTooltip({
+          tooltipData: { bar, hoveredIndex: index },
+          tooltipTop: eventSvgCoords?.y,
+          tooltipLeft: left,
+        });
+      }, TOOLTIP_DELAY_MS);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (!isMobile) {
+      tooltipTimeout = window.setTimeout(() => {
+        hideTooltip();
+      }, TOOLTIP_HIDE_DELAY_MS);
+    }
+  };
+
+  const handleMouseMove = (
+    event: React.MouseEvent<SVGRectElement, MouseEvent>,
+    bar: Omit<BarGroupBar<string>, 'key' | 'value'> & {
+      bar: SeriesPoint<BarStackDataType>;
+      key: string;
+    },
+    index: number
+  ) => {
+    if (!isMobile) {
+      if (tooltipTimeout) {
+        clearTimeout(tooltipTimeout);
+      }
+      /*
+       * TooltipInPortal expects coordinates to be relative to containerRef
+       * localPoint returns coordinates relative to the nearest SVG, which
+       * is what containerRef is set to in this example.
+       */
+      const eventSvgCoords = localPoint(event);
+      const left = bar.x + bar.width / 2 + 40;
+
+      // make sure to pass the index of the hovered bar
+      showTooltip({
+        tooltipData: { bar, hoveredIndex: index },
+        tooltipTop: eventSvgCoords?.y,
+        tooltipLeft: left,
+      });
+    }
+  };
+
+  const getFormattedTotalValue = (data: BarStackDataType) =>
+    AmountConverter(Number(getTotalValue(data).toFixed(2)));
+
+  return (
+    <Container>
+      <svg width={width} height={height}>
+        <rect
+          x={0}
+          y={0}
+          width={width}
+          height={height}
+          fill="transparent"
+          rx={14}
+        />
+        <Grid
+          top={margin.top}
+          left={margin.left + 10}
+          xScale={dateScale}
+          yScale={valueScale}
+          width={xMax}
+          height={yMax}
+          stroke="black"
+          strokeOpacity={0.1}
+          numTicksRows={5}
+          numTicksColumns={0}
+          columnLineStyle={{ display: 'none' }}
+          rowLineStyle={{
+            stroke: '#B8B8B8',
+          }}
+        />
+
+        <Group top={margin.top} left={margin.left + 10}>
+          <BarStack
+            data={data}
+            keys={buckets}
+            x={getDate}
+            xScale={dateScale}
+            yScale={valueScale}
+            color={colorScale}>
+            {(barStacks) => {
+              /*
+               * barStacks returns an array of series objects broken down by key.
+               */
+              return barStacks.map((barStack) =>
+                /*
+                 * each barStack contains an array of bars, which contain the data
+                 * for only that series for a given data point. the number of bars in a
+                 * given stack corresponds to the number of data points in our data array
+                 */
+
+                barStack.bars.map((bar, index) => {
+                  /*
+                   * we can then assume that the data in each stack at a given index
+                   * is related to the data in all other stacks at that index.
+                   */
+                  const shouldBeHighlighted =
+                    tooltipData?.hoveredIndex === index;
+
+                  /*
+                   * we can then decide the opacity for our stacks based on whether the
+                   * tooltip is open, and whether the stack being hovered matches the
+                   * index passed to our tooltipData
+                   */
+                  const shouldHavePartialOpacity =
+                    !shouldBeHighlighted && tooltipOpen;
+
+                  const barColor =
+                    colorBucketMap.get(barStack.key) || bar.color;
+
+                  return (
+                    <rect
+                      key={`bar-stack-${barStack.index}-${bar.index}`}
+                      x={bar.x}
+                      y={bar.y}
+                      height={bar.height}
+                      width={bar.width}
+                      fill={barColor}
+                      opacity={shouldHavePartialOpacity ? 0.5 : 1}
+                      onClick={(event) => handleBarClick(event, bar, index)}
+                      onMouseLeave={handleMouseLeave}
+                      onMouseMove={(event) =>
+                        handleMouseMove(event, bar, index)
+                      }
+                    />
+                  );
+                })
+              );
+            }}
+          </BarStack>
+        </Group>
+
+        <AxisBottom
+          top={yMax + margin.top}
+          left={margin.left + 10}
+          scale={dateScale}
+          hideAxisLine
+          hideTicks
+          numTicks={numBottomAxis}
+          tickValues={bottomAxisValue}
+          tickFormat={(d) => getDayOfMonth(d)}
+          tickLabelProps={() => ({
+            fontSize: isMobile ? 10 : 12,
+            fill: isDarkTheme ? '#B8B8B8' : '#A2A2A2',
+            textAnchor: 'middle',
+          })}
+        />
+
+        <AxisLeft
+          hideAxisLine
+          hideTicks
+          numTicks={isMobile ? 3 : 5}
+          top={margin.top}
+          left={margin.left}
+          scale={valueScale}
+          tickFormat={(d) => compactNumberFormat(Number(d))}
+          tickLabelProps={() => ({
+            fontSize: isMobile ? 10 : 12,
+            fill: isDarkTheme ? '#B8B8B8' : '#A2A2A2',
+            textAnchor: 'middle',
+          })}
+        />
+      </svg>
+
+      {tooltipData && tooltipOpen && (
+        <TooltipWithBounds
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={{
+            backgroundColor: 'transparent',
+            boxShadow: 'none',
+            position: 'absolute',
+            zIndex: '99999999',
+          }}>
+          <TooltipContainer ref={tooltipRef}>
+            {tooltipData?.bar.bar.data.date && (
+              <TooltipInfoRow>
+                <div>
+                  {dayjs
+                    .utc(tooltipData.bar.bar.data.date)
+                    .local()
+                    .format('YYYY/MM/DD')
+                    .toString()}
+                </div>
+                <div>
+                  {getLabel
+                    ? getLabel(getFormattedTotalValue(tooltipData.bar.bar.data))
+                    : getFormattedTotalValue(tooltipData.bar.bar.data)}
+                </div>
+              </TooltipInfoRow>
+            )}
+            {Array.from(colorBucketMap).map((mapItem) => {
+              const [bucketItem, bucketColor] = mapItem;
+              const value = tooltipData?.bar.bar.data[bucketItem];
+              const formattedValue = !isNaN(Number(value))
+                ? AmountConverter(Number(Number(value).toFixed(2)))
+                : '0';
+              return (
+                <Fragment key={bucketItem}>
+                  <Line />
+                  <InfoContainer>
+                    <NameWrapper>
+                      <Circle style={{ backgroundColor: bucketColor }} />
+                      <Divider direction="horizontal" size={'4'} />
+                      <span>{bucketItem}</span>
+                    </NameWrapper>
+                    <Divider direction="horizontal" size={'10'} />
+
+                    <span>
+                      {getLabel ? getLabel(formattedValue) : formattedValue}
+                    </span>
+                  </InfoContainer>
+                </Fragment>
+              );
+            })}
+          </TooltipContainer>
+        </TooltipWithBounds>
+      )}
+    </Container>
+  );
+};

package/src/components/BarChart/BarChart.types.ts

@@ -0,0 +1,50 @@
+import type { SeriesPoint } from '@visx/shape/lib/types/barStack.js';
+
+export interface BarChartPropTypes {
+  data: BarStackDataType[];
+  width: number;
+  height: number;
+  colorBucketMap: ColorBucketMapType;
+  buckets: string[];
+  margin?: { top: number; right: number; bottom: number; left: number };
+  getLabel?: (value: string) => string;
+  isDarkTheme?: boolean;
+}
+
+export type BarStackDataType = {
+  [key: string]: string;
+};
+
+export type ColorBucketMapType = Map<string, string>;
+
+export type TooltipDataType = {
+  bar: {
+    bar: SeriesPoint<BarStackDataType>;
+    key: string;
+    index: number;
+    height: number;
+    width: number;
+    x: number;
+    y: number;
+    color: string;
+  };
+  hoveredIndex: number;
+};
+
+export type DailyDataType = {
+  date: string;
+  bucket: string;
+  value: number;
+};
+
+export type ChartOptionsType = {
+  dailyData: DailyDataType[];
+  barChartColors: string[];
+  label?: string;
+};
+
+export interface BottomAxisData {
+  numBottomAxis: number;
+  startBottomAxis: number;
+  intervalBottomAxis: number;
+}

package/src/components/BarChart/index.ts

@@ -0,0 +1,10 @@
+export { BarChart } from './BarChart.js';
+export { prepareBarChartData } from './BarChart.helpers.js';
+
+export type {
+  BarStackDataType,
+  ColorBucketMapType,
+  BarChartPropTypes,
+  ChartOptionsType,
+  DailyDataType,
+} from './BarChart.types.js';

package/src/hooks/useIsMobile.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+const useIsMobile = () => {
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const mobileBreakpoint = 640;
+      setIsMobile(window.innerWidth <= mobileBreakpoint);
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return isMobile;
+};
+
+export default useIsMobile;

package/src/index.ts

@@ -0,0 +1,8 @@
+export type {
+  BarStackDataType,
+  ColorBucketMapType,
+  BarChartPropTypes,
+  ChartOptionsType,
+  DailyDataType,
+} from './components/BarChart/index.js';
+export { BarChart, prepareBarChartData } from './components/BarChart/index.js';

package/src/utils/amountConverter.ts

@@ -0,0 +1,47 @@
+const THRESHOLD = 1000;
+const BASE_TEN = 10;
+const PERCENTAGE_MULTIPLIER = 100;
+
+const unitList = ['', 'K', 'M', 'B'];
+export function AmountConverter(number: number) {
+  const sign = Math.sign(number);
+  let unit = 0;
+  while (Math.abs(number) > THRESHOLD) {
+    unit = unit + 1;
+    number = Math.floor(Math.abs(number) / BASE_TEN) / PERCENTAGE_MULTIPLIER;
+  }
+  return sign * Math.abs(number) + unitList[unit];
+}
+
+export function getPercentageChange(
+  input: number | null,
+  output: number | null
+) {
+  if (!input || !output) {
+    return null;
+  }
+  return parseFloat(
+    Number((output / input - 1) * PERCENTAGE_MULTIPLIER).toFixed(2)
+  );
+}
+
+export function numberWithCommas(number: number) {
+  if (!number || isNaN(number)) {
+    return number;
+  }
+
+  return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+export function compactNumberFormat(number: number) {
+  if (!number || isNaN(number)) {
+    return '0';
+  }
+
+  const numberFormat = Intl.NumberFormat('en-US', {
+    notation: 'compact',
+    maximumFractionDigits: 1,
+  }).format(number);
+
+  return numberFormat;
+}

package/src/utils/common.ts

@@ -0,0 +1,22 @@
+export const monthsShort = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
+
+export function getDayOfMonth(dateString: string) {
+  const date = new Date(dateString);
+  const monthName = date.toLocaleDateString('en-US', { month: 'short' });
+  const dayNumber = date.getDate();
+
+  return `${dayNumber} ${monthName}`;
+}