@bikdotai/bik-component-library 0.0.718-beta.0 → 0.0.718-beta.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsDropdown.d.ts +2 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.d.ts +1 -0
- package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.js +1 -1
- package/dist/cjs/components/datePicker/DatePicker.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsDropdown.d.ts +2 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.d.ts +1 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.js +1 -1
- package/dist/esm/components/datePicker/DatePicker.js +1 -1
- package/package.json +1 -1
|
@@ -46,5 +46,6 @@ export declare const EachItem: React.FC<{
|
|
|
46
46
|
rangeSelection?: boolean;
|
|
47
47
|
isLastItem?: boolean;
|
|
48
48
|
isFirstItem?: boolean;
|
|
49
|
+
showTimePicker?: boolean;
|
|
49
50
|
}>;
|
|
50
|
-
export declare const formatDate: (dateVal: Date) => string;
|
|
51
|
+
export declare const formatDate: (dateVal: Date, includeTime?: boolean) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),o=require("react-bootstrap"),n=require("react-dom"),s=require("../../constants/Theme.js"),i=require("../datePicker/DatePicker.js");require("react-calendar"),require("../../utils/DateUtils.js");var r=require("../TypographyStyle.js");require("../datePicker/DatePickerWrapper.styled.js"),require("../datePicker/model.js"),require("../dropdown/DropdownPopover/index.js"),require("../dropdown/Dropdown.js"),require("../dropdown/ChipDropdown.js"),require("../zeroState/ZeroState.js"),require("../dropdown/OpenedDropdown/components/description/Description.styled.js"),require("../checkBox/CheckBox.styled.js"),require("../list-item/ListItem.js"),require("../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../dropdown/OpenedDropdown/components/menu/MenuItem.js"),require("../dropdown/OpenedDropdown/components/menu/MenuList.styled.js"),require("../button/Button.js"),require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js"),require("../icon-button/IconButton.js"),require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js"),require("../datePicker/DatePicker.styled.js");var d=require("./CommonStyles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(n);const c=t=>{let{eachOption:o,selectedOption:n,selectedDate:i,onClickingEachItem:l,rangeSelection:a,isLastItem:c,isFirstItem:p}=t;return e.jsxRuntimeExports.jsxs(d.ItemMenuContainer,Object.assign({isFirstItem:p,isLastItem:c,onClick:()=>l(o),isSelected:o.isCustom?o.key==(null==n?void 0:n.key)&&!!i:o.key==(null==n?void 0:n.key)},{children:[e.jsxRuntimeExports.jsx(r.BodySecondary,Object.assign({color:o.key==(null==n?void 0:n.key)?s.BASE_COLORS.positive[900]:s.BASE_COLORS.grayscale[900]},{children:o.label})),o.subLabel?e.jsxRuntimeExports.jsx(r.BodyCaption,Object.assign({style:{color:s.BASE_COLORS.grayscale[700]}},{children:o.subLabel})):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{}),i&&(null==n?void 0:n.isCustom)&&o.key==(null==n?void 0:n.key)&&e.jsxRuntimeExports.jsx(r.BodyCaption,{children:a?`${u(i[0])} to ${u(i[1])}`:`${u(i[0])}`})]}),o.key)},u=e=>e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});exports.AnalyticsDropdown=n=>{let{options:l,placeholder:p="Select an option",selected:m,onOptionSelected:j,resetDropdown:x,maxHeight:g,backgroundcolor:v,calendarPopperConfig:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),o=require("react-bootstrap"),n=require("react-dom"),s=require("../../constants/Theme.js"),i=require("../datePicker/DatePicker.js");require("react-calendar"),require("../../utils/DateUtils.js");var r=require("../TypographyStyle.js");require("../datePicker/DatePickerWrapper.styled.js"),require("../datePicker/model.js"),require("../dropdown/DropdownPopover/index.js"),require("../dropdown/Dropdown.js"),require("../dropdown/ChipDropdown.js"),require("../zeroState/ZeroState.js"),require("../dropdown/OpenedDropdown/components/description/Description.styled.js"),require("../checkBox/CheckBox.styled.js"),require("../list-item/ListItem.js"),require("../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../dropdown/OpenedDropdown/components/menu/MenuItem.js"),require("../dropdown/OpenedDropdown/components/menu/MenuList.styled.js"),require("../button/Button.js"),require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js"),require("../icon-button/IconButton.js"),require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js"),require("../datePicker/DatePicker.styled.js");var d=require("./CommonStyles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(n);const c=t=>{let{eachOption:o,selectedOption:n,selectedDate:i,onClickingEachItem:l,rangeSelection:a,isLastItem:c,isFirstItem:p,showTimePicker:m}=t;return e.jsxRuntimeExports.jsxs(d.ItemMenuContainer,Object.assign({isFirstItem:p,isLastItem:c,onClick:()=>l(o),isSelected:o.isCustom?o.key==(null==n?void 0:n.key)&&!!i:o.key==(null==n?void 0:n.key)},{children:[e.jsxRuntimeExports.jsx(r.BodySecondary,Object.assign({color:o.key==(null==n?void 0:n.key)?s.BASE_COLORS.positive[900]:s.BASE_COLORS.grayscale[900]},{children:o.label})),o.subLabel?e.jsxRuntimeExports.jsx(r.BodyCaption,Object.assign({style:{color:s.BASE_COLORS.grayscale[700]}},{children:o.subLabel})):e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{}),i&&(null==n?void 0:n.isCustom)&&o.key==(null==n?void 0:n.key)&&e.jsxRuntimeExports.jsx(r.BodyCaption,Object.assign({style:{whiteSpace:"normal",wordBreak:"break-word",textAlign:"left"}},{children:a?`${u(i[0],m)} to ${u(i[1],m)}`:`${u(i[0],m)}`}))]}),o.key)},u=(e,t)=>{const o=e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});if(t){return`${o} (${e.toLocaleString("default",{hour:"numeric",minute:"2-digit",hour12:!0})})`}return o};exports.AnalyticsDropdown=n=>{let{options:l,placeholder:p="Select an option",selected:m,onOptionSelected:j,resetDropdown:x,maxHeight:g,backgroundcolor:v,calendarPopperConfig:w,variant:O="default",datePickerPlacement:y,closeDropdown:D,labelColor:h,styleProps:b,showTimePicker:R=!1}=n;var S,E,f;const[k,q]=t.useState(!1),[C,I]=t.useState(m),[P,L]=t.useState(),[T,B]=t.useState(!1),[M,F]=t.useState(m),A=t.useRef(null),$="small"===O?r.Caption:r.BodySecondary;t.useEffect((()=>{x&&I(void 0)}),[x]),t.useEffect((()=>{var e;(null==m?void 0:m.isCustom)&&(null===(e=m.dateRangeSelectionOptions)||void 0===e?void 0:e.selectedDates)?L(m.dateRangeSelectionOptions.selectedDates):L(void 0),I(m)}),[m]),t.useEffect((()=>{B(!1),q(!1)}),[D]);const _=e=>{void 0!==e?(B(e),k&&q(!1)):B((e=>!e))},H=e=>{A.current&&!A.current.contains(e.target)&&(k&&q(!1),_(!1))};return t.useEffect((()=>(T&&document.addEventListener("mousedown",H),()=>{document.removeEventListener("mousedown",H)})),[T]),e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:e.jsxRuntimeExports.jsxs(d.MainDropdown,Object.assign({drop:"down",show:T,onToggle:_,bgColor:v,id:"analytic-dropdown"},{children:[e.jsxRuntimeExports.jsx(o.Dropdown.Toggle,Object.assign({id:"dropdown-autoclose-outside",className:"main--dropdown",style:"small"===O?{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",backgroundColor:"#FAFAFA",borderRadius:4,border:`1px solid ${s.DEFAULT_THEME.colorsV2.stroke.primary}`}:b||void 0},{children:e.jsxRuntimeExports.jsx($,Object.assign({style:"small"===O||h?{color:h||s.DEFAULT_THEME.colorsV2.content.secondary}:void 0},{children:(null==C?void 0:C.isCustom)?P?u(P[0],R)===u(P[1],R)?`${u(P[0],R)}`:`${u(P[0],R)} to ${u(P[1],R)}`:(null==M?void 0:M.label)?null==M?void 0:M.label:p:C?null==C?void 0:C.label:p}))})),a.default.createPortal(e.jsxRuntimeExports.jsx(o.Dropdown.Menu,Object.assign({className:"main--dropdown",style:{padding:0},ref:A},{children:e.jsxRuntimeExports.jsxs(d.MainDropdown,Object.assign({drop:null!=y?y:"end",id:"sub--dropdown",show:k,onToggle:e=>{!e&&B(!1),q(!k)}},{children:[e.jsxRuntimeExports.jsx("div",Object.assign({style:{maxHeight:g||"auto",overflowY:"scroll"}},{children:l.map(((t,n)=>{var s;return e.jsxRuntimeExports.jsx("div",{children:(null==t?void 0:t.isCustom)?e.jsxRuntimeExports.jsx(o.Dropdown.Toggle,Object.assign({className:"sub--dropdown"},{children:e.jsxRuntimeExports.jsx(c,{isFirstItem:0===n,isLastItem:n===l.length-1,eachOption:t,selectedOption:C,selectedDate:P,onClickingEachItem:e=>{I(e),q(!0)},rangeSelection:!!(null===(s=null==t?void 0:t.dateRangeSelectionOptions)||void 0===s?void 0:s.selectRange),showTimePicker:R})})):e.jsxRuntimeExports.jsx(c,{isFirstItem:0===n,isLastItem:n===l.length-1,eachOption:t,selectedOption:C,selectedDate:P,onClickingEachItem:e=>{if(L(void 0),I(e),F(e),_(),!e.noOfDays)return void j(e);const t=new Date,o=new Date;o.setDate(t.getDate()-e.noOfDays),j(Object.assign(Object.assign({},e),{selectedRange:[o,t]}))},showTimePicker:R})},null==t?void 0:t.key)}))})),e.jsxRuntimeExports.jsx(o.Dropdown.Menu,Object.assign({className:"sub--dropdown",popperConfig:{modifiers:[{name:"offset",options:{offset:[(null==w?void 0:w.offsetSkid)||0,(null==w?void 0:w.offsetDistance)||0]}}]}},{children:e.jsxRuntimeExports.jsx(i.DatePicker,{selectRange:(null===(S=null==C?void 0:C.dateRangeSelectionOptions)||void 0===S?void 0:S.selectRange)||!1,showTimePicker:R,maxDate:null===(E=null==C?void 0:C.dateRangeSelectionOptions)||void 0===E?void 0:E.maxDate,minDate:null===(f=null==C?void 0:C.dateRangeSelectionOptions)||void 0===f?void 0:f.minDate,selectedDates:P,onSelectRange:(e,t)=>{const o=[e,t];(null==C?void 0:C.dateRangeSelectionOptions)&&(C.dateRangeSelectionOptions.selectedDates=o,j(Object.assign(Object.assign({},C),{selectedRange:[e,t]}))),F(C),q(!1),L(o),B(!T)},onSelectDate:e=>{(null==C?void 0:C.dateRangeSelectionOptions)&&(C.dateRangeSelectionOptions.selectedDates=[e,e],j(Object.assign(Object.assign({},C),{selectedRange:[e,e]}))),F(C),q(!1),L([e,e]),B(!T)}})}))]}))})),document.body)]}))})},exports.EachItem=c,exports.formatDate=u;
|
|
@@ -29,5 +29,6 @@ export interface AnalyticsTrendInterface {
|
|
|
29
29
|
relativePercentageDiff?: number;
|
|
30
30
|
isInternationalStore?: boolean;
|
|
31
31
|
Icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
|
|
32
|
+
tooltipTimelineText?: string;
|
|
32
33
|
}
|
|
33
34
|
export declare const AnalyticsTrend: React.FC<AnalyticsTrendInterface>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),n=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),i=require("../../utils/DateUtils.js"),s=require("../../constants/Theme.js"),r=require("../../assets/icons/arrow_down.svg.js"),o=require("../../assets/icons/arrow_up.svg.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),n=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),i=require("../../utils/DateUtils.js"),s=require("../../constants/Theme.js"),r=require("../../assets/icons/arrow_down.svg.js"),o=require("../../assets/icons/arrow_up.svg.js"),l=require("../../assets/icons/info.svg.js"),a=require("../tag/Tag.js"),c=require("../tooltips/Tooltip.js"),x=require("../TypographyStyle.js"),u=require("./chart/utils/calcPercentage.js"),d=require("./CommonStyles.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=m(t);const j=n=>{let{percent:l,direction:a,timeline:d,customRange:m,trendRaw:p,prefixSymbol:j,trendIconStyle:g,isInternationalStore:h,tooltipTimelineText:y}=n;const R=()=>{const e=((null!=p?p:0)>0?"+":"")+(null!=j?j:"");return void 0===p?"--":`${null!=e?e:""}${(()=>{let e="--";if(p)return e=String(h?u.truncateValueForInternationalStore(Math.abs(p)):u.truncateValueForIndianStore(Math.abs(p))),p<0?"-"+e:e})()}`},[b,f]=t.useState(R()),[O,S]=t.useState("");t.useEffect((()=>{S("today"===d?"vs yesterday":"yesterday"===d?"vs 1 day before":"7 days"===d?"vs last 7 days":"30 days"===d?"vs last 30 days":"custom"===d&&m?i.default.getAnalyticsCustomDateTimelineText(m):"")}),[d,m]),t.useEffect((()=>{f(R())}),[p]);const v="negative"===a?r.default:o.default,E="negative"===a?s.COLORS.background.negative.vibrant:"positive"===a?s.COLORS.background.positive.vibrant:s.COLORS.content.placeholder;return e.jsxRuntimeExports.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"}},{children:["number"==typeof l&&e.jsxRuntimeExports.jsx(v,{color:E,height:16,width:16,style:Object.assign({marginRight:2},null!=g?g:{})}),"number"==typeof l&&a&&e.jsxRuntimeExports.jsxs(x.Caption,Object.assign({style:{color:E}},{children:["neutral"===a?0:l<1e3?l:">999","%"]})),!!p&&e.jsxRuntimeExports.jsx(x.Caption,Object.assign({style:{marginLeft:4,color:s.COLORS.content.placeholder}},{children:`(${b})`})),d&&(y?e.jsxRuntimeExports.jsx(c.Tooltip,Object.assign({body:y,placement:"bottom"},{children:e.jsxRuntimeExports.jsx(x.Caption,Object.assign({style:{marginLeft:4,color:s.COLORS.content.placeholder}},{children:O}))})):e.jsxRuntimeExports.jsx(x.Caption,Object.assign({style:{marginLeft:4,color:s.COLORS.content.placeholder}},{children:O})))]}))};exports.AnalyticsTrend=t=>{let{title:i,value:r,trendPercent:o,type:m="horizontal",timeline:g,customRange:h,tooltip:y,card:R=!0,rightSeparator:b=!1,size:f="big",share:O=!1,formatVal:S,prefixSymbol:v,trailingIcon:E,onTrailIconClick:T,iconTooltipBody:C,funnelPercent:w,isLoading:I,trendRaw:$,suffixText:L,trendStyle:q,trendContainerStyle:D,trendIconStyle:F,containerStyle:M,prevTrendDiff:k,relativePercentageDiff:P,isInternationalStore:V,Icon:_,iconContainerStyle:z,tooltipTimelineText:A}=t;const N="big"===f?x.TitleLarge:x.TitleMedium,B=void 0!==o?o<0?"negative":0===o?"neutral":"positive":void 0,W=void 0!==o?O?Math.round(o):Math.abs(Math.round(o)):void 0;return e.jsxRuntimeExports.jsx(d.AnalyticsTrendContainer,Object.assign({card:R,style:Object.assign({},M)},{children:e.jsxRuntimeExports.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:_?12:4,borderRightWidth:b?1:0,borderRightColor:s.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:R?0:24,paddingRight:R?0:24,height:"100%",justifyContent:_?"flex-start":"space-between",alignItems:"center"},null!=D?D:{})},{children:[!!_&&e.jsxRuntimeExports.jsx(d.IconContainer,Object.assign({style:Object.assign({},z)},{children:e.jsxRuntimeExports.jsx(_,{})})),e.jsxRuntimeExports.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"column",gap:4,height:"100%"},null!=q?q:{})},{children:[e.jsxRuntimeExports.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e.jsxRuntimeExports.jsx(x.BodyCaption,Object.assign({style:{color:s.COLORS.content.secondary}},{children:i})),y&&e.jsxRuntimeExports.jsx(c.Tooltip,Object.assign({body:y,placement:"right",width:300},{children:e.jsxRuntimeExports.jsx("div",Object.assign({style:{display:"flex",cursor:"pointer",height:"100%"}},{children:e.jsxRuntimeExports.jsx(l.default,{color:s.COLORS.content.primary,height:16,width:16})}))}))]})),e.jsxRuntimeExports.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},O?{justifyContent:"space-between"}:{})},{children:[I&&e.jsxRuntimeExports.jsx(n.ShimmerComponentStyled,{width:108,height:26}),!I&&e.jsxRuntimeExports.jsx(N,Object.assign({style:{color:s.COLORS.content.primary}},{children:void 0===r?"--":"number"==typeof r&&S?r>999?V?`${null!=v?v:""}${u.truncateValueForInternationalStore(r)} ${null!=L?L:""}`:`${null!=v?v:""}${u.truncateValueForIndianStore(r)} ${null!=L?L:""}`:`${null!=v?v:""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(r)} ${null!=L?L:""}`:`${null!=v?v:""}${r} ${null!=L?L:""}`})),"number"==typeof P&&e.jsxRuntimeExports.jsx(a.Tag,{tagText:`${P}%`,theme:"light",type:"neutral"}),"horizontal"===m&&!I&&!O&&e.jsxRuntimeExports.jsx(j,{timeline:g,customRange:h,percent:W,direction:B,trendRaw:$,prefixSymbol:v,trendIconStyle:F,isInternationalStore:V,tooltipTimelineText:A}),I&&!O&&"horizontal"===m&&e.jsxRuntimeExports.jsx(n.ShimmerComponentStyled,{height:20,width:141,marginTop:6}),"vertical"===m&&!I&&void 0!==w&&e.jsxRuntimeExports.jsx(a.Tag,{tagText:`${w} %`,theme:"light",type:"neutral"}),O&&!I&&void 0!==W&&e.jsxRuntimeExports.jsx(a.Tag,{tagText:`${W} %`,theme:"light",type:"neutral"}),O||I||!k||0==k?e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{}):e.jsxRuntimeExports.jsx(a.Tag,{tagText:(e=>{const t=Math.abs(e);return t%1!=0?`${t.toFixed(1)} %`:`${t} %`})(k),theme:"light",type:"neutral"})]})),"vertical"===m&&!I&&!O&&e.jsxRuntimeExports.jsx("div",Object.assign({style:{marginTop:10}},{children:e.jsxRuntimeExports.jsx(j,{timeline:g,customRange:h,percent:W,direction:B,trendRaw:$,prefixSymbol:v,trendIconStyle:F,isInternationalStore:V,tooltipTimelineText:A})})),I&&"vertical"===m&&e.jsxRuntimeExports.jsx(n.ShimmerComponentStyled,{height:20,width:141,marginTop:6})]})),C&&!I&&e.jsxRuntimeExports.jsx(c.Tooltip,Object.assign({body:C,placement:"right"},{children:E&&e.jsxRuntimeExports.jsx("div",Object.assign({className:"icon--holder",onClick:T},{children:p.default.createElement(E,{height:20,width:20,color:s.COLORS.content.secondary})}))}))]}))}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),s=require("react-calendar"),n=require("../button/Button.js"),i=require("./DatePicker.styled.js"),r=require("./TimePicker.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(s);exports.DatePicker=s=>{const[a,o]=t.useState(),[c,u]=t.useState("00:00"),[m,d]=t.useState("23:59");t.useEffect((()=>{if(s.selectedDates){if(o(s.selectedDates),s.showTimePicker){if(s.selectedDates[0]){const e=s.selectedDates[0].getHours(),t=s.selectedDates[0].getMinutes();u(`${e.toString().padStart(2,"0")}:${t.toString().padStart(2,"0")}`)}if(s.selectedDates[1]){const e=s.selectedDates[1].getHours(),t=s.selectedDates[1].getMinutes();d(`${e.toString().padStart(2,"0")}:${t.toString().padStart(2,"0")}`)}}}else o([null,null]),s.showTimePicker&&(u("00:00"),d("23:59"))}),[s.selectedDates,s.showTimePicker]);const[f,x]=t.useState(s.selectedDate),g=null===s.maxRangeLimit?null:void 0===s.maxRangeLimit?180:s.maxRangeLimit;function p(e,t){var n;if(Array.isArray(a)&&a[0]&&a[1]){if(e){const[t,s]=e.split(":").map(Number);a[0].setHours(t,s,0,0)}if(t){const[e,s]=t.split(":").map(Number);a[1].setHours(e,s,0,0)}s.showTimePicker||null===(n=s.onSelectRange)||void 0===n||n.call(s,a[0],a[1])}}return e.jsxRuntimeExports.jsxs(i.PickerContainer,Object.assign({selectRange:s.selectRange},{children:[e.jsxRuntimeExports.jsx(l.default,{onChange:e=>{s.selectRange&&s.onSelectRange?function(e){var t;if(s.showTimePicker&&c){const[t,s]=c.split(":").map(Number);e[0].setHours(t,s,0,0)}if(s.showTimePicker&&m){const[t,s]=m.split(":").map(Number);e[1].setHours(t,s,0,0)}s.showTimePicker||null===(t=s.onSelectRange)||void 0===t||t.call(s,e[0],e[1]),o([e[0],e[1]])}(e):s.onSelectDate&&function(e){var t;if(s.showTimePicker&&c){const[t,s]=c.split(":").map(Number);e.setHours(t,s,0,0)}s.showTimePicker||null===(t=s.onSelectDate)||void 0===t||t.call(s,e),x(e)}(e)},tileDisabled:e=>{let{date:t,view:s}=e;if(!Array.isArray(a))return!1;const[n,i]=a;if(n&&!i&&null!==g){const e=Math.round((t-n)/864e5);return"month"===s&&(e<-g||e>g)}return!1},onClickDay:function(e){if(!Array.isArray(a))return void o([e,null]);const[t,s]=a;o(t&&t&&!s?[t,e]:[e,null])},value:s.selectRange?a:f,selectRange:s.selectRange,minDate:s.minDate,maxDate:s.maxDate},"bik-calendar"),s.showTimePicker&&s.selectRange&&e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(r.TimePicker,{fromTime:c,toTime:m,onFromTimeChange:function(e){u(e),p(e,m)},onToTimeChange:function(e){d(e),p(c,e)},timeInterval:s.timeInterval}),e.jsxRuntimeExports.jsx("div",Object.assign({className:"date-picker-save-button-container",style:{display:"flex",justifyContent:"flex-end",padding:"16px"}},{children:e.jsxRuntimeExports.jsx(n.Button,{buttonType:"primary",size:"small",buttonText:"Save",onClick:function(){var e,t;s.selectRange&&Array.isArray(a)&&a[0]&&a[1]?null===(e=s.onSelectRange)||void 0===e||e.call(s,a[0],a[1]):!s.selectRange&&f&&(null===(t=s.onSelectDate)||void 0===t||t.call(s,f))}})}))]})]}))};
|
|
@@ -46,5 +46,6 @@ export declare const EachItem: React.FC<{
|
|
|
46
46
|
rangeSelection?: boolean;
|
|
47
47
|
isLastItem?: boolean;
|
|
48
48
|
isFirstItem?: boolean;
|
|
49
|
+
showTimePicker?: boolean;
|
|
49
50
|
}>;
|
|
50
|
-
export declare const formatDate: (dateVal: Date) => string;
|
|
51
|
+
export declare const formatDate: (dateVal: Date, includeTime?: boolean) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as e}from"../../node_modules/react/jsx-runtime.js";import{useState as o,useRef as t,useEffect as n}from"react";import{Dropdown as s}from"react-bootstrap";import i from"react-dom";import{DEFAULT_THEME as l,BASE_COLORS as
|
|
1
|
+
import{j as e}from"../../node_modules/react/jsx-runtime.js";import{useState as o,useRef as t,useEffect as n}from"react";import{Dropdown as s}from"react-bootstrap";import i from"react-dom";import{DEFAULT_THEME as l,BASE_COLORS as r}from"../../constants/Theme.js";import{DatePicker as d}from"../datePicker/DatePicker.js";import"react-calendar";import"../../utils/DateUtils.js";import{BodySecondary as a,BodyCaption as c,Caption as p}from"../TypographyStyle.js";import"../datePicker/DatePickerWrapper.styled.js";import"../datePicker/model.js";import"../dropdown/DropdownPopover/index.js";import"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"../zeroState/ZeroState.js";import"../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../icon-button/IconButton.js";import"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";import"../datePicker/DatePicker.styled.js";import{MainDropdown as m,ItemMenuContainer as u}from"./CommonStyles.js";const g=r=>{let{options:c,placeholder:u="Select an option",selected:g,onOptionSelected:w,resetDropdown:O,maxHeight:h,backgroundcolor:b,calendarPopperConfig:y,variant:D="default",datePickerPlacement:k,closeDropdown:x,labelColor:f,styleProps:S,showTimePicker:I=!1}=r;var P,R,C;const[L,F]=o(!1),[T,$]=o(g),[M,B]=o(),[E,A]=o(!1),[N,H]=o(g),V=t(null),z="small"===D?p:a;n((()=>{O&&$(void 0)}),[O]),n((()=>{var e;(null==g?void 0:g.isCustom)&&(null===(e=g.dateRangeSelectionOptions)||void 0===e?void 0:e.selectedDates)?B(g.dateRangeSelectionOptions.selectedDates):B(void 0),$(g)}),[g]),n((()=>{A(!1),F(!1)}),[x]);const U=e=>{void 0!==e?(A(e),L&&F(!1)):A((e=>!e))},W=e=>{V.current&&!V.current.contains(e.target)&&(L&&F(!1),U(!1))};return n((()=>(E&&document.addEventListener("mousedown",W),()=>{document.removeEventListener("mousedown",W)})),[E]),e.jsx(e.Fragment,{children:e.jsxs(m,Object.assign({drop:"down",show:E,onToggle:U,bgColor:b,id:"analytic-dropdown"},{children:[e.jsx(s.Toggle,Object.assign({id:"dropdown-autoclose-outside",className:"main--dropdown",style:"small"===D?{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",backgroundColor:"#FAFAFA",borderRadius:4,border:`1px solid ${l.colorsV2.stroke.primary}`}:S||void 0},{children:e.jsx(z,Object.assign({style:"small"===D||f?{color:f||l.colorsV2.content.secondary}:void 0},{children:(null==T?void 0:T.isCustom)?M?v(M[0],I)===v(M[1],I)?`${v(M[0],I)}`:`${v(M[0],I)} to ${v(M[1],I)}`:(null==N?void 0:N.label)?null==N?void 0:N.label:u:T?null==T?void 0:T.label:u}))})),i.createPortal(e.jsx(s.Menu,Object.assign({className:"main--dropdown",style:{padding:0},ref:V},{children:e.jsxs(m,Object.assign({drop:null!=k?k:"end",id:"sub--dropdown",show:L,onToggle:e=>{!e&&A(!1),F(!L)}},{children:[e.jsx("div",Object.assign({style:{maxHeight:h||"auto",overflowY:"scroll"}},{children:c.map(((o,t)=>{var n;return e.jsx("div",{children:(null==o?void 0:o.isCustom)?e.jsx(s.Toggle,Object.assign({className:"sub--dropdown"},{children:e.jsx(j,{isFirstItem:0===t,isLastItem:t===c.length-1,eachOption:o,selectedOption:T,selectedDate:M,onClickingEachItem:e=>{$(e),F(!0)},rangeSelection:!!(null===(n=null==o?void 0:o.dateRangeSelectionOptions)||void 0===n?void 0:n.selectRange),showTimePicker:I})})):e.jsx(j,{isFirstItem:0===t,isLastItem:t===c.length-1,eachOption:o,selectedOption:T,selectedDate:M,onClickingEachItem:e=>{if(B(void 0),$(e),H(e),U(),!e.noOfDays)return void w(e);const o=new Date,t=new Date;t.setDate(o.getDate()-e.noOfDays),w(Object.assign(Object.assign({},e),{selectedRange:[t,o]}))},showTimePicker:I})},null==o?void 0:o.key)}))})),e.jsx(s.Menu,Object.assign({className:"sub--dropdown",popperConfig:{modifiers:[{name:"offset",options:{offset:[(null==y?void 0:y.offsetSkid)||0,(null==y?void 0:y.offsetDistance)||0]}}]}},{children:e.jsx(d,{selectRange:(null===(P=null==T?void 0:T.dateRangeSelectionOptions)||void 0===P?void 0:P.selectRange)||!1,showTimePicker:I,maxDate:null===(R=null==T?void 0:T.dateRangeSelectionOptions)||void 0===R?void 0:R.maxDate,minDate:null===(C=null==T?void 0:T.dateRangeSelectionOptions)||void 0===C?void 0:C.minDate,selectedDates:M,onSelectRange:(e,o)=>{const t=[e,o];(null==T?void 0:T.dateRangeSelectionOptions)&&(T.dateRangeSelectionOptions.selectedDates=t,w(Object.assign(Object.assign({},T),{selectedRange:[e,o]}))),H(T),F(!1),B(t),A(!E)},onSelectDate:e=>{(null==T?void 0:T.dateRangeSelectionOptions)&&(T.dateRangeSelectionOptions.selectedDates=[e,e],w(Object.assign(Object.assign({},T),{selectedRange:[e,e]}))),H(T),F(!1),B([e,e]),A(!E)}})}))]}))})),document.body)]}))})},j=o=>{let{eachOption:t,selectedOption:n,selectedDate:s,onClickingEachItem:i,rangeSelection:l,isLastItem:d,isFirstItem:p,showTimePicker:m}=o;return e.jsxs(u,Object.assign({isFirstItem:p,isLastItem:d,onClick:()=>i(t),isSelected:t.isCustom?t.key==(null==n?void 0:n.key)&&!!s:t.key==(null==n?void 0:n.key)},{children:[e.jsx(a,Object.assign({color:t.key==(null==n?void 0:n.key)?r.positive[900]:r.grayscale[900]},{children:t.label})),t.subLabel?e.jsx(c,Object.assign({style:{color:r.grayscale[700]}},{children:t.subLabel})):e.jsx(e.Fragment,{}),s&&(null==n?void 0:n.isCustom)&&t.key==(null==n?void 0:n.key)&&e.jsx(c,Object.assign({style:{whiteSpace:"normal",wordBreak:"break-word",textAlign:"left"}},{children:l?`${v(s[0],m)} to ${v(s[1],m)}`:`${v(s[0],m)}`}))]}),t.key)},v=(e,o)=>{const t=e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});if(o){return`${t} (${e.toLocaleString("default",{hour:"numeric",minute:"2-digit",hour12:!0})})`}return t};export{g as AnalyticsDropdown,j as EachItem,v as formatDate};
|
|
@@ -29,5 +29,6 @@ export interface AnalyticsTrendInterface {
|
|
|
29
29
|
relativePercentageDiff?: number;
|
|
30
30
|
isInternationalStore?: boolean;
|
|
31
31
|
Icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
|
|
32
|
+
tooltipTimelineText?: string;
|
|
32
33
|
}
|
|
33
34
|
export declare const AnalyticsTrend: React.FC<AnalyticsTrendInterface>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as e}from"../../node_modules/react/jsx-runtime.js";import t,{useState as i,useEffect as n}from"react";import{ShimmerComponentStyled as r}from"../shimmer/ShimmerComponent/ShimmerStyled.js";import s from"../../utils/DateUtils.js";import{COLORS as o}from"../../constants/Theme.js";import l from"../../assets/icons/arrow_down.svg.js";import a from"../../assets/icons/arrow_up.svg.js";import c from"../../assets/icons/info.svg.js";import{Tag as d}from"../tag/Tag.js";import{Tooltip as
|
|
1
|
+
import{j as e}from"../../node_modules/react/jsx-runtime.js";import t,{useState as i,useEffect as n}from"react";import{ShimmerComponentStyled as r}from"../shimmer/ShimmerComponent/ShimmerStyled.js";import s from"../../utils/DateUtils.js";import{COLORS as o}from"../../constants/Theme.js";import l from"../../assets/icons/arrow_down.svg.js";import a from"../../assets/icons/arrow_up.svg.js";import c from"../../assets/icons/info.svg.js";import{Tag as d}from"../tag/Tag.js";import{Tooltip as m}from"../tooltips/Tooltip.js";import{BodyCaption as g,Caption as h,TitleLarge as p,TitleMedium as j}from"../TypographyStyle.js";import{truncateValueForInternationalStore as y,truncateValueForIndianStore as x}from"./chart/utils/calcPercentage.js";import{AnalyticsTrendContainer as b,IconContainer as u}from"./CommonStyles.js";const f=i=>{let{title:n,value:s,trendPercent:l,type:a="horizontal",timeline:h,customRange:f,tooltip:O,card:T=!0,rightSeparator:S=!1,size:w="big",share:$=!1,formatVal:I,prefixSymbol:R,trailingIcon:C,onTrailIconClick:D,iconTooltipBody:M,funnelPercent:k,isLoading:L,trendRaw:z,suffixText:F,trendStyle:P,trendContainerStyle:N,trendIconStyle:_,containerStyle:W,prevTrendDiff:A,relativePercentageDiff:B,isInternationalStore:E,Icon:U,iconContainerStyle:V,tooltipTimelineText:q}=i;const G="big"===w?p:j,H=void 0!==l?l<0?"negative":0===l?"neutral":"positive":void 0,J=void 0!==l?$?Math.round(l):Math.abs(Math.round(l)):void 0;return e.jsx(b,Object.assign({card:T,style:Object.assign({},W)},{children:e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:U?12:4,borderRightWidth:S?1:0,borderRightColor:o.stroke.primary,borderRightStyle:"solid",paddingLeft:T?0:24,paddingRight:T?0:24,height:"100%",justifyContent:U?"flex-start":"space-between",alignItems:"center"},null!=N?N:{})},{children:[!!U&&e.jsx(u,Object.assign({style:Object.assign({},V)},{children:e.jsx(U,{})})),e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"column",gap:4,height:"100%"},null!=P?P:{})},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e.jsx(g,Object.assign({style:{color:o.content.secondary}},{children:n})),O&&e.jsx(m,Object.assign({body:O,placement:"right",width:300},{children:e.jsx("div",Object.assign({style:{display:"flex",cursor:"pointer",height:"100%"}},{children:e.jsx(c,{color:o.content.primary,height:16,width:16})}))}))]})),e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},$?{justifyContent:"space-between"}:{})},{children:[L&&e.jsx(r,{width:108,height:26}),!L&&e.jsx(G,Object.assign({style:{color:o.content.primary}},{children:void 0===s?"--":"number"==typeof s&&I?s>999?E?`${null!=R?R:""}${y(s)} ${null!=F?F:""}`:`${null!=R?R:""}${x(s)} ${null!=F?F:""}`:`${null!=R?R:""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(s)} ${null!=F?F:""}`:`${null!=R?R:""}${s} ${null!=F?F:""}`})),"number"==typeof B&&e.jsx(d,{tagText:`${B}%`,theme:"light",type:"neutral"}),"horizontal"===a&&!L&&!$&&e.jsx(v,{timeline:h,customRange:f,percent:J,direction:H,trendRaw:z,prefixSymbol:R,trendIconStyle:_,isInternationalStore:E,tooltipTimelineText:q}),L&&!$&&"horizontal"===a&&e.jsx(r,{height:20,width:141,marginTop:6}),"vertical"===a&&!L&&void 0!==k&&e.jsx(d,{tagText:`${k} %`,theme:"light",type:"neutral"}),$&&!L&&void 0!==J&&e.jsx(d,{tagText:`${J} %`,theme:"light",type:"neutral"}),$||L||!A||0==A?e.jsx(e.Fragment,{}):e.jsx(d,{tagText:(e=>{const t=Math.abs(e);return t%1!=0?`${t.toFixed(1)} %`:`${t} %`})(A),theme:"light",type:"neutral"})]})),"vertical"===a&&!L&&!$&&e.jsx("div",Object.assign({style:{marginTop:10}},{children:e.jsx(v,{timeline:h,customRange:f,percent:J,direction:H,trendRaw:z,prefixSymbol:R,trendIconStyle:_,isInternationalStore:E,tooltipTimelineText:q})})),L&&"vertical"===a&&e.jsx(r,{height:20,width:141,marginTop:6})]})),M&&!L&&e.jsx(m,Object.assign({body:M,placement:"right"},{children:C&&e.jsx("div",Object.assign({className:"icon--holder",onClick:D},{children:t.createElement(C,{height:20,width:20,color:o.content.secondary})}))}))]}))}))},v=t=>{let{percent:r,direction:c,timeline:d,customRange:g,trendRaw:p,prefixSymbol:j,trendIconStyle:b,isInternationalStore:u,tooltipTimelineText:f}=t;const v=()=>{const e=((null!=p?p:0)>0?"+":"")+(null!=j?j:"");return void 0===p?"--":`${null!=e?e:""}${(()=>{let e="--";if(p)return e=String(u?y(Math.abs(p)):x(Math.abs(p))),p<0?"-"+e:e})()}`},[O,T]=i(v()),[S,w]=i("");n((()=>{w("today"===d?"vs yesterday":"yesterday"===d?"vs 1 day before":"7 days"===d?"vs last 7 days":"30 days"===d?"vs last 30 days":"custom"===d&&g?s.getAnalyticsCustomDateTimelineText(g):"")}),[d,g]),n((()=>{T(v())}),[p]);const $="negative"===c?l:a,I="negative"===c?o.background.negative.vibrant:"positive"===c?o.background.positive.vibrant:o.content.placeholder;return e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"}},{children:["number"==typeof r&&e.jsx($,{color:I,height:16,width:16,style:Object.assign({marginRight:2},null!=b?b:{})}),"number"==typeof r&&c&&e.jsxs(h,Object.assign({style:{color:I}},{children:["neutral"===c?0:r<1e3?r:">999","%"]})),!!p&&e.jsx(h,Object.assign({style:{marginLeft:4,color:o.content.placeholder}},{children:`(${O})`})),d&&(f?e.jsx(m,Object.assign({body:f,placement:"bottom"},{children:e.jsx(h,Object.assign({style:{marginLeft:4,color:o.content.placeholder}},{children:S}))})):e.jsx(h,Object.assign({style:{marginLeft:4,color:o.content.placeholder}},{children:S})))]}))};export{f as AnalyticsTrend};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as e}from"../../node_modules/react/jsx-runtime.js";import{useState as t,useEffect as n}from"react";import i from"react-calendar";import{Button as
|
|
1
|
+
import{j as e}from"../../node_modules/react/jsx-runtime.js";import{useState as t,useEffect as n}from"react";import i from"react-calendar";import{Button as s}from"../button/Button.js";import{PickerContainer as a}from"./DatePicker.styled.js";import{TimePicker as r}from"./TimePicker.js";const l=l=>{const[o,c]=t(),[m,u]=t("00:00"),[d,g]=t("23:59");n((()=>{if(l.selectedDates){if(c(l.selectedDates),l.showTimePicker){if(l.selectedDates[0]){const e=l.selectedDates[0].getHours(),t=l.selectedDates[0].getMinutes();u(`${e.toString().padStart(2,"0")}:${t.toString().padStart(2,"0")}`)}if(l.selectedDates[1]){const e=l.selectedDates[1].getHours(),t=l.selectedDates[1].getMinutes();g(`${e.toString().padStart(2,"0")}:${t.toString().padStart(2,"0")}`)}}}else c([null,null]),l.showTimePicker&&(u("00:00"),g("23:59"))}),[l.selectedDates,l.showTimePicker]);const[f,p]=t(l.selectedDate),D=null===l.maxRangeLimit?null:void 0===l.maxRangeLimit?180:l.maxRangeLimit;function h(e,t){var n;if(Array.isArray(o)&&o[0]&&o[1]){if(e){const[t,n]=e.split(":").map(Number);o[0].setHours(t,n,0,0)}if(t){const[e,n]=t.split(":").map(Number);o[1].setHours(e,n,0,0)}l.showTimePicker||null===(n=l.onSelectRange)||void 0===n||n.call(l,o[0],o[1])}}return e.jsxs(a,Object.assign({selectRange:l.selectRange},{children:[e.jsx(i,{onChange:e=>{l.selectRange&&l.onSelectRange?function(e){var t;if(l.showTimePicker&&m){const[t,n]=m.split(":").map(Number);e[0].setHours(t,n,0,0)}if(l.showTimePicker&&d){const[t,n]=d.split(":").map(Number);e[1].setHours(t,n,0,0)}l.showTimePicker||null===(t=l.onSelectRange)||void 0===t||t.call(l,e[0],e[1]),c([e[0],e[1]])}(e):l.onSelectDate&&function(e){var t;if(l.showTimePicker&&m){const[t,n]=m.split(":").map(Number);e.setHours(t,n,0,0)}l.showTimePicker||null===(t=l.onSelectDate)||void 0===t||t.call(l,e),p(e)}(e)},tileDisabled:e=>{let{date:t,view:n}=e;if(!Array.isArray(o))return!1;const[i,s]=o;if(i&&!s&&null!==D){const e=Math.round((t-i)/864e5);return"month"===n&&(e<-D||e>D)}return!1},onClickDay:function(e){if(!Array.isArray(o))return void c([e,null]);const[t,n]=o;c(t&&t&&!n?[t,e]:[e,null])},value:l.selectRange?o:f,selectRange:l.selectRange,minDate:l.minDate,maxDate:l.maxDate},"bik-calendar"),l.showTimePicker&&l.selectRange&&e.jsxs(e.Fragment,{children:[e.jsx(r,{fromTime:m,toTime:d,onFromTimeChange:function(e){u(e),h(e,d)},onToTimeChange:function(e){g(e),h(m,e)},timeInterval:l.timeInterval}),e.jsx("div",Object.assign({className:"date-picker-save-button-container",style:{display:"flex",justifyContent:"flex-end",padding:"16px"}},{children:e.jsx(s,{buttonType:"primary",size:"small",buttonText:"Save",onClick:function(){var e,t;l.selectRange&&Array.isArray(o)&&o[0]&&o[1]?null===(e=l.onSelectRange)||void 0===e||e.call(l,o[0],o[1]):!l.selectRange&&f&&(null===(t=l.onSelectDate)||void 0===t||t.call(l,f))}})}))]})]}))};export{l as DatePicker};
|