@rango-dev/charts 0.1.1-next.0

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":949,"imports":[],"format":"esm"},"src/components/BarChart/BarChart.helpers.ts":{"bytes":1418,"imports":[{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/components/BarChart/BarChart.styles.ts":{"bytes":965,"imports":[{"path":"@rango-dev/ui","kind":"import-statement","external":true}],"format":"esm"},"src/components/BarChart/BarChart.tsx":{"bytes":11352,"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":149,"imports":[{"path":"src/components/BarChart/BarChart.tsx","kind":"import-statement","original":"./BarChart.js"}],"format":"esm"},"src/index.ts":{"bytes":177,"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":27725},"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"],"entryPoint":"src/index.ts","inputs":{"src/components/BarChart/BarChart.tsx":{"bytesInOutput":3831},"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":608},"src/components/BarChart/BarChart.helpers.ts":{"bytesInOutput":414},"src/components/BarChart/BarChart.styles.ts":{"bytesInOutput":623},"src/components/BarChart/index.ts":{"bytesInOutput":0},"src/index.ts":{"bytesInOutput":0}},"bytes":6331}}}

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

@@ -0,0 +1,47 @@
+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 TOOLTIP_SHADOW = "0px 5px 20px 0px rgba(130, 130, 130, 0.20)";
+export declare const DEFAULT_CHART_COLORS: string[];
+export declare const bottomAxisData: {
+    desktop: {
+        7: {
+            numBottomAxis: number;
+            startBottomAxis: number;
+            intervalBottomAxis: number;
+        };
+        30: {
+            numBottomAxis: number;
+            startBottomAxis: number;
+            intervalBottomAxis: number;
+        };
+        90: {
+            numBottomAxis: number;
+            startBottomAxis: number;
+            intervalBottomAxis: number;
+        };
+    };
+    mobile: {
+        7: {
+            numBottomAxis: number;
+            startBottomAxis: number;
+            intervalBottomAxis: number;
+        };
+        30: {
+            numBottomAxis: number;
+            startBottomAxis: number;
+            intervalBottomAxis: number;
+        };
+        90: {
+            numBottomAxis: number;
+            startBottomAxis: number;
+            intervalBottomAxis: number;
+        };
+    };
+};
+//# 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,eAAO,MAAM,cAAc;;;;;CAA6C,CAAC;AAEzE,eAAO,MAAM,gBAAgB,MAAM,CAAC;AACpC,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,eAAO,MAAM,cAAc,+CAA+C,CAAC;AAE3E,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAaxC,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAW1B,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,EAGlB,MAAM,qBAAqB,CAAC;AAa7B,OAAO,KAAsC,MAAM,OAAO,CAAC;AAmC3D,eAAO,MAAM,QAAQ,UAAW,iBAAiB,6BA8UhD,CAAC"}

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

@@ -0,0 +1,6 @@
+import type { BarStackDataType } 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;
+//# 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,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,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"}

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,KAI3B,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,33 @@
+import type { SeriesPoint } from '@visx/shape/lib/types';
+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;
+}
+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;
+};
+//# 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,uBAAuB,CAAC;AAEzD,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;CACtC;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"}

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

@@ -0,0 +1,3 @@
+export { BarChart } from './BarChart.js';
+export type { BarStackDataType, ColorBucketMapType, BarChartPropTypes, } 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,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,iBAAiB,GAClB,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, } from './components/BarChart/index.js';
+export { BarChart } 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,GAClB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+var Bt=Object.defineProperty;var r=(t,e)=>Bt(t,"name",{value:e,configurable:!0});import{Divider as Z}from"@rango-dev/ui";import{AxisBottom as vt,AxisLeft as St}from"@visx/axis";import{localPoint as tt}from"@visx/event";import{Grid as Ct}from"@visx/grid";import{Group as Lt}from"@visx/group";import{scaleBand as Et,scaleLinear as Mt,scaleOrdinal as It}from"@visx/scale";import{BarStack as Nt}from"@visx/shape";import{useTooltip as Ot,useTooltipInPortal as Ft}from"@visx/tooltip";import ot from"dayjs";import wt from"dayjs/plugin/utc.js";import o,{Fragment as Pt,useEffect as _t,useRef as $t}from"react";import{useEffect as bt,useState as At}from"react";var Dt=r(()=>{let[t,e]=At(!1);return bt(()=>{let n=r(()=>{e(window.innerWidth<=640)},"handleResize");return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)},[]),t},"useIsMobile"),F=Dt;var kt=["","K","M","B"];function S(t){let e=Math.sign(t),n=0;for(;Math.abs(t)>1e3;)n=n+1,t=Math.floor(Math.abs(t)/10)/100;return e*Math.abs(t)+kt[n]}r(S,"AmountConverter");function w(t){return!t||isNaN(t)?"0":Intl.NumberFormat("en-US",{notation:"compact",maximumFractionDigits:1}).format(t)}r(w,"compactNumberFormat");function P(t){let e=new Date(t),n=e.toLocaleDateString("en-US",{month:"short"});return`${e.getDate()} ${n}`}r(P,"getDayOfMonth");var _={top:40,right:0,bottom:0,left:20},$=100,V=300,H="0px 5px 20px 0px rgba(130, 130, 130, 0.20)",G=["#469BF5","#29DABA","#D629DA","#4658F5","#9DF546","#F01DA8","#FF8B66","#44F1E6","#29DA7A","#F17606","#8B62FF","#F4C932"],C={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}}};var z=r((t,e)=>t.reduce((s,c)=>{let g=e.reduce((p,d)=>(p+=isNaN(Number(c[d]))?0:Number(c[d]),p),0);return s.push(g),s},[]),"getTotalValueDates"),j=r((t,e,n)=>{let s=[];for(let c=e;c<t.length;c+=n)s.push(t[c]);return s},"generateTickValues"),R=r(t=>{let e=0;return Object.keys(t).forEach(n=>{if(n!=="date"){let s=t[n];isNaN(Number(s))||(e+=Number(s))}}),e},"getTotalValue"),U=r(t=>t<15?7:t<50?30:90,"getDaysRange");import{styled as h}from"@rango-dev/ui";var W=h("div",{position:"relative"}),Y=h("div",{width:165,backgroundColor:"$background",borderRadius:"$sm"}),J=h("div",{display:"flex",alignItems:"center",fontSize:"$12",color:"$foreground",justifyContent:"space-between",padding:"$8 $10",fontWeight:"$medium"}),K=h("div",{height:1,width:"100%",backgroundColor:"$neutral300"}),q=h("div",{display:"flex",alignItems:"center",justifyContent:"space-between",fontSize:"$10",color:"$foreground",padding:"$5 $10"}),Q=h("div",{width:"$6",height:"$6",borderRadius:3}),X=h("div",{display:"flex",alignItems:"center",justifyContent:"flex-start"});ot.extend(wt);var et=r(t=>{let{data:e,width:n,height:s,colorBucketMap:c,buckets:g,margin:p=_,getLabel:d}=t,u=F(),y=U(e.length),rt=u?C.mobile[y]:C.desktop[y],{intervalBottomAxis:nt,numBottomAxis:at,startBottomAxis:it}=rt,T,B=$t(null),{containerRef:st,TooltipInPortal:lt}=Ft({scroll:!0}),L=n-p.left-20,D=s-p.top-30,k=r(a=>a.date,"getDate"),pt=e.map(k),mt=j(pt,it,nt),{tooltipOpen:E,tooltipLeft:ct,tooltipTop:ut,tooltipData:f,hideTooltip:M,showTooltip:I}=Ot(),dt=z(e,g),b=Et({domain:e.map(k),paddingInner:y===7?.3:.46,paddingOuter:y===90?1:.3}),N=Math.max(...dt),A=Mt({domain:[0,N+N/5],nice:!0}),ft=It({domain:g,range:G});if(_t(()=>{function a(i){u&&B?.current&&!B.current.contains(i.target)&&M()}return r(a,"handleClickOutside"),document.addEventListener("click",a),()=>{document.removeEventListener("click",a)}},[B]),b.range([0,L]),A.range([D,0]),n<10)return null;let xt=r((a,i,l)=>{if(u){T&&clearTimeout(T);let m=tt(a),x=i.x+i.width/2;setTimeout(()=>{I({tooltipData:{bar:i,hoveredIndex:l},tooltipTop:m?.y,tooltipLeft:x})},$)}},"handleBarClick"),ht=r(()=>{u||(T=window.setTimeout(()=>{M()},V))},"handleMouseLeave"),gt=r((a,i,l)=>{if(!u){T&&clearTimeout(T);let m=tt(a),x=i.x+i.width/2+40;I({tooltipData:{bar:i,hoveredIndex:l},tooltipTop:m?.y,tooltipLeft:x})}},"handleMouseMove"),O=r(a=>S(Number(R(a).toFixed(2))),"getFormattedTotalValue");return o.createElement(W,null,o.createElement("svg",{ref:st,width:n,height:s},o.createElement("rect",{x:0,y:0,width:n,height:s,fill:"transparent",rx:14}),o.createElement(Ct,{top:p.top,left:p.left+10,xScale:b,yScale:A,width:L,height:D,stroke:"black",strokeOpacity:.1,numTicksRows:5,numTicksColumns:0,columnLineStyle:{display:"none"}}),o.createElement(Lt,{top:p.top,left:p.left+10},o.createElement(Nt,{data:e,keys:g,x:k,xScale:b,yScale:A,color:ft},a=>a.map(i=>i.bars.map((l,m)=>{let Tt=!(f?.hoveredIndex===m)&&E,yt=c.get(i.key)||l.color;return o.createElement("rect",{key:`bar-stack-${i.index}-${l.index}`,x:l.x,y:l.y,height:l.height,width:l.width,fill:yt,opacity:Tt?.5:1,onClick:v=>xt(v,l,m),onMouseLeave:ht,onMouseMove:v=>gt(v,l,m)})})))),o.createElement(vt,{top:D+p.top,left:p.left+10,scale:b,hideAxisLine:!0,hideTicks:!0,numTicks:at,tickValues:mt,tickFormat:a=>P(a),tickLabelProps:()=>({fontSize:u?10:12,fill:"#727272",textAnchor:"middle"})}),o.createElement(St,{hideAxisLine:!0,hideTicks:!0,numTicks:u?3:5,top:p.top,left:p.left,scale:A,tickFormat:a=>w(Number(a)),tickLabelProps:()=>({fontSize:u?10:12,fill:"#727272",textAnchor:"middle"})})),E&&f&&o.createElement(lt,{top:ut,left:ct,style:{backgroundColor:"transparent",boxShadow:"none",position:"absolute"}},o.createElement(Y,{ref:B,style:{boxShadow:H}},f.bar.bar.data.date&&o.createElement(J,null,o.createElement("div",null,ot.utc(f.bar.bar.data.date).local().format("YYYY/MM/DD").toString()),o.createElement("div",null,d?d(O(f.bar.bar.data)):O(f.bar.bar.data))),Array.from(c).map(a=>{let[i,l]=a,m=f.bar.bar.data[i],x=isNaN(Number(m))?"0":S(Number(Number(m).toFixed(2)));return o.createElement(Pt,{key:i},o.createElement(K,null),o.createElement(q,null,o.createElement(X,null,o.createElement(Q,{style:{backgroundColor:l}}),o.createElement(Z,{direction:"horizontal",size:"4"}),o.createElement("span",null,i)),o.createElement(Z,{direction:"horizontal",size:"10"}),o.createElement("span",null,d?d(x):x)))}))))},"BarChart");export{et as BarChart};
+//# 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  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"],
+  "mappings": "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",
+  "names": ["Divider", "AxisBottom", "AxisLeft", "localPoint", "Grid", "Group", "scaleBand", "scaleLinear", "scaleOrdinal", "BarStack", "useTooltip", "useTooltipInPortal", "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", "TOOLTIP_SHADOW", "DEFAULT_CHART_COLORS", "bottomAxisData", "getTotalValueDates", "__name", "data", "buckets", "accumulator", "currentData", "totalValuePerDate", "dailyTotal", "currentBucket", "generateTickValues", "dates", "start", "interval", "tickValues", "i", "getTotalValue", "dataColumn", "result", "key", "value", "getDaysRange", "lengthValue", "styled", "Container", "TooltipContainer", "TooltipInfoRow", "Line", "InfoContainer", "Circle", "NameWrapper", "dayjs", "utc", "BarChart", "__name", "props", "data", "width", "height", "colorBucketMap", "buckets", "margin", "DEFAULT_MARGIN", "getLabel", "isMobile", "useIsMobile_default", "daysRange", "getDaysRange", "bottomAxis", "bottomAxisData", "intervalBottomAxis", "numBottomAxis", "startBottomAxis", "tooltipTimeout", "tooltipRef", "useRef", "containerRef", "TooltipInPortal", "useTooltipInPortal", "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", "TooltipContainer", "TOOLTIP_SHADOW", "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.1.1-next.0",
+  "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}\" --ignore-path ../../.eslintignore"
+  },
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16"
+  },
+  "dependencies": {
+    "@rango-dev/ui": "^0.37.1-next.2",
+    "@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,33 @@
+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 TOOLTIP_SHADOW = '0px 5px 20px 0px rgba(130, 130, 130, 0.20)';
+
+export const DEFAULT_CHART_COLORS: string[] = [
+  '#469BF5',
+  '#29DABA',
+  '#D629DA',
+  '#4658F5',
+  '#9DF546',
+  '#F01DA8',
+  '#FF8B66',
+  '#44F1E6',
+  '#29DA7A',
+  '#F17606',
+  '#8B62FF',
+  '#F4C932',
+];
+
+export const 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 },
+  },
+};

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

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { BarStackDataType } from './BarChart.types.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;
+};

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

@@ -0,0 +1,48 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  position: 'relative',
+});
+
+export const TooltipContainer = styled('div', {
+  width: 165,
+  backgroundColor: '$background',
+  borderRadius: '$sm',
+});
+
+export const TooltipInfoRow = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: '$12',
+  color: '$foreground',
+  justifyContent: 'space-between',
+  padding: '$8 $10',
+  fontWeight: '$medium',
+});
+
+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',
+  color: '$foreground',
+  padding: '$5 $10',
+});
+
+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,388 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type {
+  BarChartPropTypes,
+  BarStackDataType,
+  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 { useTooltip, useTooltipInPortal } 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,
+  TOOLTIP_SHADOW,
+} from './BarChart.constants.js';
+import {
+  generateTickValues,
+  getDaysRange,
+  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,
+  } = props;
+
+  const isMobile = useIsMobile();
+  const daysRange = getDaysRange(data.length);
+  const bottomAxis = isMobile
+    ? bottomAxisData.mobile[daysRange]
+    : bottomAxisData.desktop[daysRange];
+
+  const { intervalBottomAxis, numBottomAxis, startBottomAxis } = bottomAxis;
+
+  let tooltipTimeout: number;
+  const tooltipRef = useRef<HTMLInputElement>(null);
+  const { containerRef, TooltipInPortal } = useTooltipInPortal({
+    // TooltipInPortal is rendered in a separate child of <body />
+    scroll: true,
+  });
+
+  // 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 valueScale = scaleLinear<number>({
+    domain: [0, totalValue + totalValue / 5],
+    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);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [tooltipRef]);
+
+  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 ref={containerRef} 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' }}
+        />
+
+        <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: '#727272',
+            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: '#727272',
+            textAnchor: 'middle',
+          })}
+        />
+      </svg>
+
+      {tooltipOpen && tooltipData && (
+        <TooltipInPortal
+          top={tooltipTop}
+          left={tooltipLeft}
+          style={{
+            backgroundColor: 'transparent',
+            boxShadow: 'none',
+            position: 'absolute',
+          }}>
+          <TooltipContainer
+            ref={tooltipRef}
+            style={{ boxShadow: TOOLTIP_SHADOW }}>
+            {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>
+        </TooltipInPortal>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,31 @@
+import type { SeriesPoint } from '@visx/shape/lib/types';
+
+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;
+}
+
+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;
+};

package/src/components/BarChart/index.ts

@@ -0,0 +1,6 @@
+export { BarChart } from './BarChart.js';
+export type {
+  BarStackDataType,
+  ColorBucketMapType,
+  BarChartPropTypes,
+} 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,6 @@
+export type {
+  BarStackDataType,
+  ColorBucketMapType,
+  BarChartPropTypes,
+} from './components/BarChart/index.js';
+export { BarChart } 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}`;
+}