npm - @bikdotai/bik-component-library - Versions diffs - 0.0.814 → 0.0.815 - Mend

@bikdotai/bik-component-library 0.0.814 → 0.0.815

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.

Files changed (733) hide show

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");require("bootstrap/dist/css/bootstrap.min.css");const l=require("react"),b=require("react-bootstrap"),H=require("react-dom"),D=require("../../constants/Theme.js"),R=require("../TypographyStyle.js"),A=require("./CommonStyles.js"),U=require("../datePicker/DatePicker.js"),V=({options:n,placeholder:r="Select an option",selected:s,onOptionSelected:u,resetDropdown:x,maxHeight:w,backgroundcolor:E,calendarPopperConfig:m,variant:L="default",datePickerPlacement:N,closeDropdown:O,labelColor:q,styleProps:B,showTimePicker:f=!1})=>{const[j,g]=l.useState(!1),[o,C]=l.useState(s),[d,S]=l.useState(),[p,y]=l.useState(!1),[F,k]=l.useState(s),v=l.useRef(null),T=L==="small"?R.Caption:R.BodySecondary;l.useEffect(()=>{x&&C(void 0)},[x]),l.useEffect(()=>{s?.isCustom&&s.dateRangeSelectionOptions?.selectedDates?S(s.dateRangeSelectionOptions.selectedDates):S(void 0),C(s)},[s]),l.useEffect(()=>{y(!1),g(!1)},[O]);const h=e=>{e!==void 0?(y(e),j&&g(!1)):y(i=>!i)},M=e=>{v.current&&!v.current.contains(e.target)&&(j&&g(!1),h(!1))};return l.useEffect(()=>(p&&document.addEventListener("mousedown",M),()=>{document.removeEventListener("mousedown",M)}),[p]),t.jsx(t.Fragment,{children:t.jsxs(A.MainDropdown,{drop:"down",show:p,onToggle:h,bgColor:E,id:"analytic-dropdown",children:[t.jsx(b.Dropdown.Toggle,{id:"dropdown-autoclose-outside",className:"main--dropdown",style:L==="small"?{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",backgroundColor:"#FAFAFA",borderRadius:4,border:`1px solid ${D.DEFAULT_THEME.colorsV2.stroke.primary}`}:B||void 0,children:t.jsx(T,{style:L==="small"||q?{color:q||D.DEFAULT_THEME.colorsV2.content.secondary}:void 0,children:o?.isCustom?d?c(d[0],f)===c(d[1],f)?`${c(d[0],f)}`:`${c(d[0],f)} to ${c(d[1],f)}`:F?.label?F?.label:r:o?o?.label:r})}),H.createPortal(t.jsx(b.Dropdown.Menu,{className:"main--dropdown",style:{padding:0},ref:v,children:t.jsxs(A.MainDropdown,{drop:N??"end",id:"sub--dropdown",show:j,onToggle:e=>{!e&&y(!1),g(!j)},children:[t.jsx("div",{style:{maxHeight:w||"auto",overflowY:"scroll"},children:n.map((e,i)=>t.jsx("div",{children:e?.isCustom?t.jsx(b.Dropdown.Toggle,{className:"sub--dropdown",children:t.jsx(I,{isFirstItem:i===0,isLastItem:i===n.length-1,eachOption:e,selectedOption:o,selectedDate:d,onClickingEachItem:a=>{C(a),g(!0)},rangeSelection:!!e?.dateRangeSelectionOptions?.selectRange,showTimePicker:f})}):t.jsx(I,{isFirstItem:i===0,isLastItem:i===n.length-1,eachOption:e,selectedOption:o,selectedDate:d,onClickingEachItem:a=>{if(S(void 0),C(a),k(a),h(),!a.noOfDays){u(a);return}const $=new Date,_=new Date;_.setDate($.getDate()-a.noOfDays),u({...a,selectedRange:[_,$]})},showTimePicker:f})},e?.key))}),t.jsx(b.Dropdown.Menu,{className:"sub--dropdown",popperConfig:{modifiers:[{name:"offset",options:{offset:[m?.offsetSkid||0,m?.offsetDistance||0]}}]},children:t.jsx(U.DatePicker,{selectRange:o?.dateRangeSelectionOptions?.selectRange||!1,showTimePicker:f,maxDate:o?.dateRangeSelectionOptions?.maxDate,minDate:o?.dateRangeSelectionOptions?.minDate,selectedDates:d,onSelectRange:(e,i)=>{const a=[e,i];o?.dateRangeSelectionOptions&&(o.dateRangeSelectionOptions.selectedDates=a,u({...o,selectedRange:[e,i]})),k(o),g(!1),S(a),y(!p)},onSelectDate:e=>{o?.dateRangeSelectionOptions&&(o.dateRangeSelectionOptions.selectedDates=[e,e],u({...o,selectedRange:[e,e]})),k(o),g(!1),S([e,e]),y(!p)}})})]})}),document.body)]})})},I=({eachOption:n,selectedOption:r,selectedDate:s,onClickingEachItem:u,rangeSelection:x,isLastItem:w,isFirstItem:E,showTimePicker:m})=>t.jsxs(A.ItemMenuContainer,{isFirstItem:E,isLastItem:w,onClick:()=>u(n),isSelected:n.isCustom?n.key==r?.key&&!!s:n.key==r?.key,children:[t.jsx(R.BodySecondary,{color:n.key==r?.key?D.BASE_COLORS.positive[900]:D.BASE_COLORS.grayscale[900],children:n.label}),n.subLabel?t.jsx(R.BodyCaption,{style:{color:D.BASE_COLORS.grayscale[700]},children:n.subLabel}):t.jsx(t.Fragment,{}),s&&r?.isCustom&&n.key==r?.key&&t.jsx(R.BodyCaption,{style:{whiteSpace:"normal",wordBreak:"break-word",textAlign:"left"},children:x?`${c(s[0],m)} to ${c(s[1],m)}`:`${c(s[0],m)}`})]},n.key),c=(n,r)=>{const s=n.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});if(r){const u=n.toLocaleString("default",{hour:"numeric",minute:"2-digit",hour12:!0});return`${s} (${u})`}return s};exports.AnalyticsDropdown=V;exports.EachItem=I;exports.formatDate=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime");require("bootstrap/dist/css/bootstrap.min.css");const l=require("react"),b=require("react-bootstrap"),H=require("react-dom"),D=require("../../constants/Theme.js"),R=require("../TypographyStyle.js"),A=require("./CommonStyles.js"),U=require("../datePicker/DatePicker.js"),V=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},Y=V(H),z=({options:e,placeholder:r="Select an option",selected:n,onOptionSelected:u,resetDropdown:x,maxHeight:w,backgroundcolor:E,calendarPopperConfig:m,variant:L="default",datePickerPlacement:O,closeDropdown:N,labelColor:M,styleProps:q,showTimePicker:f=!1})=>{const[j,g]=l.useState(!1),[s,C]=l.useState(n),[d,S]=l.useState(),[p,y]=l.useState(!1),[B,k]=l.useState(n),v=l.useRef(null),T=L==="small"?R.Caption:R.BodySecondary;l.useEffect(()=>{x&&C(void 0)},[x]),l.useEffect(()=>{n?.isCustom&&n.dateRangeSelectionOptions?.selectedDates?S(n.dateRangeSelectionOptions.selectedDates):S(void 0),C(n)},[n]),l.useEffect(()=>{y(!1),g(!1)},[N]);const h=t=>{t!==void 0?(y(t),j&&g(!1)):y(i=>!i)},F=t=>{v.current&&!v.current.contains(t.target)&&(j&&g(!1),h(!1))};return l.useEffect(()=>(p&&document.addEventListener("mousedown",F),()=>{document.removeEventListener("mousedown",F)}),[p]),o.jsx(o.Fragment,{children:o.jsxs(A.MainDropdown,{drop:"down",show:p,onToggle:h,bgColor:E,id:"analytic-dropdown",children:[o.jsx(b.Dropdown.Toggle,{id:"dropdown-autoclose-outside",className:"main--dropdown",style:L==="small"?{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",backgroundColor:"#FAFAFA",borderRadius:4,border:`1px solid ${D.DEFAULT_THEME.colorsV2.stroke.primary}`}:q||void 0,children:o.jsx(T,{style:L==="small"||M?{color:M||D.DEFAULT_THEME.colorsV2.content.secondary}:void 0,children:s?.isCustom?d?c(d[0],f)===c(d[1],f)?`${c(d[0],f)}`:`${c(d[0],f)} to ${c(d[1],f)}`:B?.label?B?.label:r:s?s?.label:r})}),Y.default.createPortal(o.jsx(b.Dropdown.Menu,{className:"main--dropdown",style:{padding:0},ref:v,children:o.jsxs(A.MainDropdown,{drop:O??"end",id:"sub--dropdown",show:j,onToggle:t=>{!t&&y(!1),g(!j)},children:[o.jsx("div",{style:{maxHeight:w||"auto",overflowY:"scroll"},children:e.map((t,i)=>o.jsx("div",{children:t?.isCustom?o.jsx(b.Dropdown.Toggle,{className:"sub--dropdown",children:o.jsx(I,{isFirstItem:i===0,isLastItem:i===e.length-1,eachOption:t,selectedOption:s,selectedDate:d,onClickingEachItem:a=>{C(a),g(!0)},rangeSelection:!!t?.dateRangeSelectionOptions?.selectRange,showTimePicker:f})}):o.jsx(I,{isFirstItem:i===0,isLastItem:i===e.length-1,eachOption:t,selectedOption:s,selectedDate:d,onClickingEachItem:a=>{if(S(void 0),C(a),k(a),h(),!a.noOfDays){u(a);return}const $=new Date,_=new Date;_.setDate($.getDate()-a.noOfDays),u({...a,selectedRange:[_,$]})},showTimePicker:f})},t?.key))}),o.jsx(b.Dropdown.Menu,{className:"sub--dropdown",popperConfig:{modifiers:[{name:"offset",options:{offset:[m?.offsetSkid||0,m?.offsetDistance||0]}}]},children:o.jsx(U.DatePicker,{selectRange:s?.dateRangeSelectionOptions?.selectRange||!1,showTimePicker:f,maxDate:s?.dateRangeSelectionOptions?.maxDate,minDate:s?.dateRangeSelectionOptions?.minDate,selectedDates:d,onSelectRange:(t,i)=>{const a=[t,i];s?.dateRangeSelectionOptions&&(s.dateRangeSelectionOptions.selectedDates=a,u({...s,selectedRange:[t,i]})),k(s),g(!1),S(a),y(!p)},onSelectDate:t=>{s?.dateRangeSelectionOptions&&(s.dateRangeSelectionOptions.selectedDates=[t,t],u({...s,selectedRange:[t,t]})),k(s),g(!1),S([t,t]),y(!p)}})})]})}),document.body)]})})},I=({eachOption:e,selectedOption:r,selectedDate:n,onClickingEachItem:u,rangeSelection:x,isLastItem:w,isFirstItem:E,showTimePicker:m})=>o.jsxs(A.ItemMenuContainer,{isFirstItem:E,isLastItem:w,onClick:()=>u(e),isSelected:e.isCustom?e.key==r?.key&&!!n:e.key==r?.key,children:[o.jsx(R.BodySecondary,{color:e.key==r?.key?D.BASE_COLORS.positive[900]:D.BASE_COLORS.grayscale[900],children:e.label}),e.subLabel?o.jsx(R.BodyCaption,{style:{color:D.BASE_COLORS.grayscale[700]},children:e.subLabel}):o.jsx(o.Fragment,{}),n&&r?.isCustom&&e.key==r?.key&&o.jsx(R.BodyCaption,{style:{whiteSpace:"normal",wordBreak:"break-word",textAlign:"left"},children:x?`${c(n[0],m)} to ${c(n[1],m)}`:`${c(n[0],m)}`})]},e.key),c=(e,r)=>{const n=e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});if(r){const u=e.toLocaleString("default",{hour:"numeric",minute:"2-digit",hour12:!0});return`${n} (${u})`}return n};exports.AnalyticsDropdown=z;exports.EachItem=I;exports.formatDate=c;
 //# sourceMappingURL=AnalyticsDropdown.js.map

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnalyticsDropdown.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsDropdown.tsx"],"sourcesContent":["import 'bootstrap/dist/css/bootstrap.min.css';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Dropdown } from 'react-bootstrap';\nimport { DropDirection } from 'react-bootstrap/esm/DropdownContext';\nimport ReactDOM from 'react-dom';\nimport { BASE_COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { DatePicker } from '../datePicker';\nimport { BodyCaption, BodySecondary, Caption } from '../TypographyStyle';\nimport { ItemMenuContainer, MainDropdown } from './CommonStyles';\n\nexport interface DropdownOptions {\n\tlabel: string;\n\tsubLabel?: string;\n\tvalue: string;\n\tkey: string \| number;\n\tnoOfDays?: number;\n\tisCustom?: boolean;\n\tdateRangeSelectionOptions?: {\n\t\tselectRange: boolean;\n\t\tselectedDates?: Date[];\n\t\tselectedDate?: Date;\n\t\tminDate?: Date;\n\t\tmaxDate?: Date;\n\t};\n}\n\nexport interface AnalyticsDropdownInterface {\n\toptions: DropdownOptions[];\n\tselected?: DropdownOptions;\n\tplaceholder?: string;\n\tresetDropdown?: boolean;\n\tonOptionSelected: (\n\t\tchosen: DropdownOptions & {\n\t\t\tselectedRange?: [Date, Date];\n\t\t},\n\t) => void;\n\tmaxHeight?: string;\n\tbackgroundcolor?: string;\n\tcalendarPopperConfig?: {\n\t\toffsetSkid?: number;\n\t\toffsetDistance?: number;\n\t};\n\tvariant?: 'small' \| 'default';\n\tdatePickerPlacement?: DropDirection;\n\tcloseDropdown?: boolean;\n\tlabelColor?: string;\n\tstyleProps?: React.CSSProperties;\n\tshowTimePicker?: boolean;\n}\n\nexport const AnalyticsDropdown: React.FC<AnalyticsDropdownInterface> = ({\n\toptions,\n\tplaceholder = 'Select an option',\n\tselected,\n\tonOptionSelected,\n\tresetDropdown,\n\tmaxHeight,\n\tbackgroundcolor,\n\tcalendarPopperConfig,\n\tvariant = 'default',\n\tdatePickerPlacement,\n\tcloseDropdown,\n\tlabelColor,\n\tstyleProps,\n\tshowTimePicker = false,\n}) => {\n\tconst [openCalender, setCalender] = useState(false);\n\tconst [selectedOption, setSelectedOption] = useState(selected);\n\tconst [selectedDate, setSelectedDate] = useState<Date[]>();\n\tconst [showDropdown, setShowDropdown] = useState(false);\n\tconst [optionPlaceholder, setOptionPlaceholder] = useState(selected);\n\tconst dropdownRef = useRef<HTMLDivElement \| null>(null);\n\tconst LabelText = variant === 'small' ? Caption : BodySecondary;\n\n\tuseEffect(() => {\n\t\tresetDropdown && setSelectedOption(undefined);\n\t}, [resetDropdown]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\tselected?.isCustom &&\n\t\t\tselected.dateRangeSelectionOptions?.selectedDates\n\t\t) {\n\t\t\tsetSelectedDate(selected.dateRangeSelectionOptions.selectedDates);\n\t\t} else {\n\t\t\tsetSelectedDate(undefined);\n\t\t}\n\t\tsetSelectedOption(selected);\n\t}, [selected]);\n\n\tuseEffect(() => {\n\t\tsetShowDropdown(false);\n\t\tsetCalender(false);\n\t}, [closeDropdown]);\n\n\tconst setDropdown = (forceState?: boolean) => {\n\t\tif (forceState !== undefined) {\n\t\t\tsetShowDropdown(forceState);\n\t\t\topenCalender && setCalender(false);\n\t\t} else {\n\t\t\tsetShowDropdown((prevState) => !prevState);\n\t\t}\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (openCalender) {\n\t\t\t\tsetCalender(false);\n\t\t\t}\n\t\t\tsetDropdown(false);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (showDropdown) {\n\t\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\t}\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, [showDropdown]);\n\n\treturn (\n\t\t<>\n\t\t\t<MainDropdown\n\t\t\t\tdrop={'down'}\n\t\t\t\tshow={showDropdown}\n\t\t\t\tonToggle={setDropdown}\n\t\t\t\tbgColor={backgroundcolor}\n\t\t\t\tid=\"analytic-dropdown\"\n\t\t\t>\n\t\t\t\t<Dropdown.Toggle\n\t\t\t\t\tid=\"dropdown-autoclose-outside\"\n\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\tstyle={\n\t\t\t\t\t\tvariant === 'small'\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tgap: 6,\n\t\t\t\t\t\t\t\t\tpadding: '4px 8px',\n\t\t\t\t\t\t\t\t\tbackgroundColor: '#FAFAFA',\n\t\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t\t\tborder: `1px solid ${DEFAULT_THEME.colorsV2.stroke.primary}`,\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: styleProps\n\t\t\t\t\t\t\t? styleProps\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<LabelText\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tvariant === 'small' \|\| labelColor\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\tlabelColor \|\| DEFAULT_THEME.colorsV2.content.secondary,\n\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{selectedOption?.isCustom\n\t\t\t\t\t\t\t? selectedDate\n\t\t\t\t\t\t\t\t? formatDate(selectedDate[0], showTimePicker) ===\n\t\t\t\t\t\t\t\t formatDate(selectedDate[1], showTimePicker)\n\t\t\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)}`\n\t\t\t\t\t\t\t\t\t: `${formatDate(\n\t\t\t\t\t\t\t\t\t\t\tselectedDate[0],\n\t\t\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t\t\t )} to ${formatDate(selectedDate[1], showTimePicker)}`\n\t\t\t\t\t\t\t\t: optionPlaceholder?.label\n\t\t\t\t\t\t\t\t? optionPlaceholder?.label\n\t\t\t\t\t\t\t\t: placeholder\n\t\t\t\t\t\t\t: selectedOption\n\t\t\t\t\t\t\t? selectedOption?.label\n\t\t\t\t\t\t\t: placeholder}\n\t\t\t\t\t</LabelText>\n\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t{ReactDOM.createPortal(\n\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\t\tstyle={{ padding: 0 }}\n\t\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t<MainDropdown\n\t\t\t\t\t\t\tdrop={datePickerPlacement ?? 'end'}\n\t\t\t\t\t\t\tid=\"sub--dropdown\"\n\t\t\t\t\t\t\tshow={openCalender}\n\t\t\t\t\t\t\tonToggle={(toggleCalender) => {\n\t\t\t\t\t\t\t\t!toggleCalender && setShowDropdown(false);\n\t\t\t\t\t\t\t\tsetCalender(!openCalender);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmaxHeight: maxHeight ? maxHeight : 'auto',\n\t\t\t\t\t\t\t\t\toverflowY: 'scroll',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{options.map((eachOption, index) => (\n\t\t\t\t\t\t\t\t\t<div key={eachOption?.key}>\n\t\t\t\t\t\t\t\t\t\t{eachOption?.isCustom ? (\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Toggle className=\"sub--dropdown\">\n\t\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetCalender(true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\trangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\teachOption?.dateRangeSelectionOptions?.selectRange\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? true\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: false\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedDate(undefined);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetDropdown();\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!option.noOfDays) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst endDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst startDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tstartDate.setDate(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tendDate.getDate() - option.noOfDays,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...option,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [startDate, endDate],\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\t\t\tclassName=\"sub--dropdown\"\n\t\t\t\t\t\t\t\tpopperConfig={{\n\t\t\t\t\t\t\t\t\tmodifiers: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tname: 'offset',\n\t\t\t\t\t\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\t\t\t\t\t\toffset: [\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetSkid \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetDistance \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DatePicker\n\t\t\t\t\t\t\t\t\tselectRange={\n\t\t\t\t\t\t\t\t\t\tselectedOption?.dateRangeSelectionOptions?.selectRange \|\|\n\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\tmaxDate={selectedOption?.dateRangeSelectionOptions?.maxDate}\n\t\t\t\t\t\t\t\t\tminDate={selectedOption?.dateRangeSelectionOptions?.minDate}\n\t\t\t\t\t\t\t\t\tselectedDates={selectedDate}\n\t\t\t\t\t\t\t\t\tonSelectRange={(selectedStartDate, selectedEndDate) => {\n\t\t\t\t\t\t\t\t\t\tconst updatedDates = [selectedStartDate, selectedEndDate];\n\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates =\n\t\t\t\t\t\t\t\t\t\t\t\tupdatedDates;\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedStartDate, selectedEndDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate(updatedDates);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonSelectDate={(selectedDate) => {\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates = [\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedDate, selectedDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate([selectedDate, selectedDate]);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Dropdown.Menu>\n\t\t\t\t\t\t</MainDropdown>\n\t\t\t\t\t</Dropdown.Menu>,\n\t\t\t\t\tdocument.body,\n\t\t\t\t)}\n\t\t\t</MainDropdown>\n\t\t</>\n\t);\n};\n\nexport const EachItem: React.FC<{\n\teachOption: DropdownOptions;\n\tselectedOption: DropdownOptions \| undefined;\n\tselectedDate: Date[] \| undefined;\n\tonClickingEachItem: (optionSelected: DropdownOptions) => void;\n\trangeSelection?: boolean;\n\tisLastItem?: boolean;\n\tisFirstItem?: boolean;\n\tshowTimePicker?: boolean;\n}> = ({\n\teachOption,\n\tselectedOption,\n\tselectedDate,\n\tonClickingEachItem,\n\trangeSelection,\n\tisLastItem,\n\tisFirstItem,\n\tshowTimePicker,\n}) => {\n\treturn (\n\t\t<ItemMenuContainer\n\t\t\tisFirstItem={isFirstItem}\n\t\t\tisLastItem={isLastItem}\n\t\t\tkey={eachOption.key}\n\t\t\tonClick={() => onClickingEachItem(eachOption)}\n\t\t\tisSelected={\n\t\t\t\teachOption.isCustom\n\t\t\t\t\t? eachOption.key == selectedOption?.key && !!selectedDate\n\t\t\t\t\t: eachOption.key == selectedOption?.key\n\t\t\t}\n\t\t>\n\t\t\t<BodySecondary\n\t\t\t\tcolor={\n\t\t\t\t\teachOption.key == selectedOption?.key\n\t\t\t\t\t\t? BASE_COLORS.positive[900]\n\t\t\t\t\t\t: BASE_COLORS.grayscale[900]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{eachOption.label}\n\t\t\t</BodySecondary>\n\t\t\t{eachOption.subLabel ? (\n\t\t\t\t<BodyCaption style={{ color: BASE_COLORS.grayscale[700] }}>\n\t\t\t\t\t{eachOption.subLabel}\n\t\t\t\t</BodyCaption>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t\t{selectedDate &&\n\t\t\t\tselectedOption?.isCustom &&\n\t\t\t\teachOption.key == selectedOption?.key && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{rangeSelection\n\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)} to ${formatDate(\n\t\t\t\t\t\t\t\t\tselectedDate[1],\n\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t )}`\n\t\t\t\t\t\t\t: `${formatDate(selectedDate[0], showTimePicker)}`}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t</ItemMenuContainer>\n\t);\n};\n\nexport const formatDate = (dateVal: Date, includeTime?: boolean) => {\n\tconst dateString = dateVal.toLocaleString('default', {\n\t\tday: 'numeric',\n\t\tmonth: 'short',\n\t\tyear: 'numeric',\n\t});\n\n\tif (includeTime) {\n\t\tconst timeString = dateVal.toLocaleString('default', {\n\t\t\thour: 'numeric',\n\t\t\tminute: '2-digit',\n\t\t\thour12: true,\n\t\t});\n\t\treturn `${dateString} (${timeString})`;\n\t}\n\n\treturn dateString;\n};\n"],"names":["AnalyticsDropdown","options","placeholder","selected","onOptionSelected","resetDropdown","maxHeight","backgroundcolor","calendarPopperConfig","variant","datePickerPlacement","closeDropdown","labelColor","styleProps","showTimePicker","openCalender","setCalender","useState","selectedOption","setSelectedOption","selectedDate","setSelectedDate","showDropdown","setShowDropdown","optionPlaceholder","setOptionPlaceholder","dropdownRef","useRef","LabelText","Caption","BodySecondary","useEffect","setDropdown","forceState","prevState","handleClickOutside","event","jsx","Fragment","jsxs","MainDropdown","Dropdown","DEFAULT_THEME","formatDate","ReactDOM","toggleCalender","eachOption","index","EachItem","option","endDate","startDate","DatePicker","selectedStartDate","selectedEndDate","updatedDates","onClickingEachItem","rangeSelection","isLastItem","isFirstItem","ItemMenuContainer","BASE_COLORS","BodyCaption","dateVal","includeTime","dateString","timeString"],"mappings":"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"}
1	+ {"version":3,"file":"AnalyticsDropdown.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsDropdown.tsx"],"sourcesContent":["import 'bootstrap/dist/css/bootstrap.min.css';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Dropdown } from 'react-bootstrap';\nimport { DropDirection } from 'react-bootstrap/esm/DropdownContext';\nimport ReactDOM from 'react-dom';\nimport { BASE_COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { DatePicker } from '../datePicker';\nimport { BodyCaption, BodySecondary, Caption } from '../TypographyStyle';\nimport { ItemMenuContainer, MainDropdown } from './CommonStyles';\n\nexport interface DropdownOptions {\n\tlabel: string;\n\tsubLabel?: string;\n\tvalue: string;\n\tkey: string \| number;\n\tnoOfDays?: number;\n\tisCustom?: boolean;\n\tdateRangeSelectionOptions?: {\n\t\tselectRange: boolean;\n\t\tselectedDates?: Date[];\n\t\tselectedDate?: Date;\n\t\tminDate?: Date;\n\t\tmaxDate?: Date;\n\t};\n}\n\nexport interface AnalyticsDropdownInterface {\n\toptions: DropdownOptions[];\n\tselected?: DropdownOptions;\n\tplaceholder?: string;\n\tresetDropdown?: boolean;\n\tonOptionSelected: (\n\t\tchosen: DropdownOptions & {\n\t\t\tselectedRange?: [Date, Date];\n\t\t},\n\t) => void;\n\tmaxHeight?: string;\n\tbackgroundcolor?: string;\n\tcalendarPopperConfig?: {\n\t\toffsetSkid?: number;\n\t\toffsetDistance?: number;\n\t};\n\tvariant?: 'small' \| 'default';\n\tdatePickerPlacement?: DropDirection;\n\tcloseDropdown?: boolean;\n\tlabelColor?: string;\n\tstyleProps?: React.CSSProperties;\n\tshowTimePicker?: boolean;\n}\n\nexport const AnalyticsDropdown: React.FC<AnalyticsDropdownInterface> = ({\n\toptions,\n\tplaceholder = 'Select an option',\n\tselected,\n\tonOptionSelected,\n\tresetDropdown,\n\tmaxHeight,\n\tbackgroundcolor,\n\tcalendarPopperConfig,\n\tvariant = 'default',\n\tdatePickerPlacement,\n\tcloseDropdown,\n\tlabelColor,\n\tstyleProps,\n\tshowTimePicker = false,\n}) => {\n\tconst [openCalender, setCalender] = useState(false);\n\tconst [selectedOption, setSelectedOption] = useState(selected);\n\tconst [selectedDate, setSelectedDate] = useState<Date[]>();\n\tconst [showDropdown, setShowDropdown] = useState(false);\n\tconst [optionPlaceholder, setOptionPlaceholder] = useState(selected);\n\tconst dropdownRef = useRef<HTMLDivElement \| null>(null);\n\tconst LabelText = variant === 'small' ? Caption : BodySecondary;\n\n\tuseEffect(() => {\n\t\tresetDropdown && setSelectedOption(undefined);\n\t}, [resetDropdown]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\tselected?.isCustom &&\n\t\t\tselected.dateRangeSelectionOptions?.selectedDates\n\t\t) {\n\t\t\tsetSelectedDate(selected.dateRangeSelectionOptions.selectedDates);\n\t\t} else {\n\t\t\tsetSelectedDate(undefined);\n\t\t}\n\t\tsetSelectedOption(selected);\n\t}, [selected]);\n\n\tuseEffect(() => {\n\t\tsetShowDropdown(false);\n\t\tsetCalender(false);\n\t}, [closeDropdown]);\n\n\tconst setDropdown = (forceState?: boolean) => {\n\t\tif (forceState !== undefined) {\n\t\t\tsetShowDropdown(forceState);\n\t\t\topenCalender && setCalender(false);\n\t\t} else {\n\t\t\tsetShowDropdown((prevState) => !prevState);\n\t\t}\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (openCalender) {\n\t\t\t\tsetCalender(false);\n\t\t\t}\n\t\t\tsetDropdown(false);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (showDropdown) {\n\t\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\t}\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, [showDropdown]);\n\n\treturn (\n\t\t<>\n\t\t\t<MainDropdown\n\t\t\t\tdrop={'down'}\n\t\t\t\tshow={showDropdown}\n\t\t\t\tonToggle={setDropdown}\n\t\t\t\tbgColor={backgroundcolor}\n\t\t\t\tid=\"analytic-dropdown\"\n\t\t\t>\n\t\t\t\t<Dropdown.Toggle\n\t\t\t\t\tid=\"dropdown-autoclose-outside\"\n\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\tstyle={\n\t\t\t\t\t\tvariant === 'small'\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tgap: 6,\n\t\t\t\t\t\t\t\t\tpadding: '4px 8px',\n\t\t\t\t\t\t\t\t\tbackgroundColor: '#FAFAFA',\n\t\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t\t\tborder: `1px solid ${DEFAULT_THEME.colorsV2.stroke.primary}`,\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: styleProps\n\t\t\t\t\t\t\t? styleProps\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<LabelText\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tvariant === 'small' \|\| labelColor\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\tlabelColor \|\| DEFAULT_THEME.colorsV2.content.secondary,\n\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{selectedOption?.isCustom\n\t\t\t\t\t\t\t? selectedDate\n\t\t\t\t\t\t\t\t? formatDate(selectedDate[0], showTimePicker) ===\n\t\t\t\t\t\t\t\t formatDate(selectedDate[1], showTimePicker)\n\t\t\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)}`\n\t\t\t\t\t\t\t\t\t: `${formatDate(\n\t\t\t\t\t\t\t\t\t\t\tselectedDate[0],\n\t\t\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t\t\t )} to ${formatDate(selectedDate[1], showTimePicker)}`\n\t\t\t\t\t\t\t\t: optionPlaceholder?.label\n\t\t\t\t\t\t\t\t? optionPlaceholder?.label\n\t\t\t\t\t\t\t\t: placeholder\n\t\t\t\t\t\t\t: selectedOption\n\t\t\t\t\t\t\t? selectedOption?.label\n\t\t\t\t\t\t\t: placeholder}\n\t\t\t\t\t</LabelText>\n\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t{ReactDOM.createPortal(\n\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\tclassName=\"main--dropdown\"\n\t\t\t\t\t\tstyle={{ padding: 0 }}\n\t\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t<MainDropdown\n\t\t\t\t\t\t\tdrop={datePickerPlacement ?? 'end'}\n\t\t\t\t\t\t\tid=\"sub--dropdown\"\n\t\t\t\t\t\t\tshow={openCalender}\n\t\t\t\t\t\t\tonToggle={(toggleCalender) => {\n\t\t\t\t\t\t\t\t!toggleCalender && setShowDropdown(false);\n\t\t\t\t\t\t\t\tsetCalender(!openCalender);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmaxHeight: maxHeight ? maxHeight : 'auto',\n\t\t\t\t\t\t\t\t\toverflowY: 'scroll',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{options.map((eachOption, index) => (\n\t\t\t\t\t\t\t\t\t<div key={eachOption?.key}>\n\t\t\t\t\t\t\t\t\t\t{eachOption?.isCustom ? (\n\t\t\t\t\t\t\t\t\t\t\t<Dropdown.Toggle className=\"sub--dropdown\">\n\t\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetCalender(true);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\trangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\teachOption?.dateRangeSelectionOptions?.selectRange\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? true\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: false\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</Dropdown.Toggle>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<EachItem\n\t\t\t\t\t\t\t\t\t\t\t\tisFirstItem={index === 0}\n\t\t\t\t\t\t\t\t\t\t\t\tisLastItem={index === options.length - 1}\n\t\t\t\t\t\t\t\t\t\t\t\teachOption={eachOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedOption={selectedOption}\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate={selectedDate}\n\t\t\t\t\t\t\t\t\t\t\t\tonClickingEachItem={(option) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedDate(undefined);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedOption(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetDropdown();\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!option.noOfDays) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected(option);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst endDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst startDate = new Date();\n\t\t\t\t\t\t\t\t\t\t\t\t\tstartDate.setDate(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tendDate.getDate() - option.noOfDays,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t...option,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [startDate, endDate],\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<Dropdown.Menu\n\t\t\t\t\t\t\t\tclassName=\"sub--dropdown\"\n\t\t\t\t\t\t\t\tpopperConfig={{\n\t\t\t\t\t\t\t\t\tmodifiers: [\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\tname: 'offset',\n\t\t\t\t\t\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\t\t\t\t\t\toffset: [\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetSkid \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcalendarPopperConfig?.offsetDistance \|\| 0,\n\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<DatePicker\n\t\t\t\t\t\t\t\t\tselectRange={\n\t\t\t\t\t\t\t\t\t\tselectedOption?.dateRangeSelectionOptions?.selectRange \|\|\n\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tshowTimePicker={showTimePicker}\n\t\t\t\t\t\t\t\t\tmaxDate={selectedOption?.dateRangeSelectionOptions?.maxDate}\n\t\t\t\t\t\t\t\t\tminDate={selectedOption?.dateRangeSelectionOptions?.minDate}\n\t\t\t\t\t\t\t\t\tselectedDates={selectedDate}\n\t\t\t\t\t\t\t\t\tonSelectRange={(selectedStartDate, selectedEndDate) => {\n\t\t\t\t\t\t\t\t\t\tconst updatedDates = [selectedStartDate, selectedEndDate];\n\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates =\n\t\t\t\t\t\t\t\t\t\t\t\tupdatedDates;\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedStartDate, selectedEndDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate(updatedDates);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonSelectDate={(selectedDate) => {\n\t\t\t\t\t\t\t\t\t\tif (selectedOption?.dateRangeSelectionOptions) {\n\t\t\t\t\t\t\t\t\t\t\tselectedOption.dateRangeSelectionOptions.selectedDates = [\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedDate,\n\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t\tonOptionSelected({\n\t\t\t\t\t\t\t\t\t\t\t\t...selectedOption,\n\t\t\t\t\t\t\t\t\t\t\t\tselectedRange: [selectedDate, selectedDate],\n\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsetOptionPlaceholder(selectedOption);\n\t\t\t\t\t\t\t\t\t\tsetCalender(false);\n\t\t\t\t\t\t\t\t\t\tsetSelectedDate([selectedDate, selectedDate]);\n\t\t\t\t\t\t\t\t\t\tsetShowDropdown(!showDropdown);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Dropdown.Menu>\n\t\t\t\t\t\t</MainDropdown>\n\t\t\t\t\t</Dropdown.Menu>,\n\t\t\t\t\tdocument.body,\n\t\t\t\t)}\n\t\t\t</MainDropdown>\n\t\t</>\n\t);\n};\n\nexport const EachItem: React.FC<{\n\teachOption: DropdownOptions;\n\tselectedOption: DropdownOptions \| undefined;\n\tselectedDate: Date[] \| undefined;\n\tonClickingEachItem: (optionSelected: DropdownOptions) => void;\n\trangeSelection?: boolean;\n\tisLastItem?: boolean;\n\tisFirstItem?: boolean;\n\tshowTimePicker?: boolean;\n}> = ({\n\teachOption,\n\tselectedOption,\n\tselectedDate,\n\tonClickingEachItem,\n\trangeSelection,\n\tisLastItem,\n\tisFirstItem,\n\tshowTimePicker,\n}) => {\n\treturn (\n\t\t<ItemMenuContainer\n\t\t\tisFirstItem={isFirstItem}\n\t\t\tisLastItem={isLastItem}\n\t\t\tkey={eachOption.key}\n\t\t\tonClick={() => onClickingEachItem(eachOption)}\n\t\t\tisSelected={\n\t\t\t\teachOption.isCustom\n\t\t\t\t\t? eachOption.key == selectedOption?.key && !!selectedDate\n\t\t\t\t\t: eachOption.key == selectedOption?.key\n\t\t\t}\n\t\t>\n\t\t\t<BodySecondary\n\t\t\t\tcolor={\n\t\t\t\t\teachOption.key == selectedOption?.key\n\t\t\t\t\t\t? BASE_COLORS.positive[900]\n\t\t\t\t\t\t: BASE_COLORS.grayscale[900]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{eachOption.label}\n\t\t\t</BodySecondary>\n\t\t\t{eachOption.subLabel ? (\n\t\t\t\t<BodyCaption style={{ color: BASE_COLORS.grayscale[700] }}>\n\t\t\t\t\t{eachOption.subLabel}\n\t\t\t\t</BodyCaption>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t\t{selectedDate &&\n\t\t\t\tselectedOption?.isCustom &&\n\t\t\t\teachOption.key == selectedOption?.key && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{rangeSelection\n\t\t\t\t\t\t\t? `${formatDate(selectedDate[0], showTimePicker)} to ${formatDate(\n\t\t\t\t\t\t\t\t\tselectedDate[1],\n\t\t\t\t\t\t\t\t\tshowTimePicker,\n\t\t\t\t\t\t\t )}`\n\t\t\t\t\t\t\t: `${formatDate(selectedDate[0], showTimePicker)}`}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t</ItemMenuContainer>\n\t);\n};\n\nexport const formatDate = (dateVal: Date, includeTime?: boolean) => {\n\tconst dateString = dateVal.toLocaleString('default', {\n\t\tday: 'numeric',\n\t\tmonth: 'short',\n\t\tyear: 'numeric',\n\t});\n\n\tif (includeTime) {\n\t\tconst timeString = dateVal.toLocaleString('default', {\n\t\t\thour: 'numeric',\n\t\t\tminute: '2-digit',\n\t\t\thour12: true,\n\t\t});\n\t\treturn `${dateString} (${timeString})`;\n\t}\n\n\treturn dateString;\n};\n"],"names":["AnalyticsDropdown","options","placeholder","selected","onOptionSelected","resetDropdown","maxHeight","backgroundcolor","calendarPopperConfig","variant","datePickerPlacement","closeDropdown","labelColor","styleProps","showTimePicker","openCalender","setCalender","useState","selectedOption","setSelectedOption","selectedDate","setSelectedDate","showDropdown","setShowDropdown","optionPlaceholder","setOptionPlaceholder","dropdownRef","useRef","LabelText","Caption","BodySecondary","useEffect","setDropdown","forceState","prevState","handleClickOutside","event","jsx","Fragment","jsxs","MainDropdown","Dropdown","DEFAULT_THEME","formatDate","ReactDOM","toggleCalender","eachOption","index","EachItem","option","endDate","startDate","DatePicker","selectedStartDate","selectedEndDate","updatedDates","onClickingEachItem","rangeSelection","isLastItem","isFirstItem","ItemMenuContainer","BASE_COLORS","BodyCaption","dateVal","includeTime","dateString","timeString"],"mappings":"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"}

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsMetric.js CHANGED Viewed

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("styled-components"),M=require("../../constants/Theme.js"),a=require("../TypographyStyle.js"),q=require("./AnalyticsTrend.js"),A=v.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("styled-components"),M=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),q=require("./AnalyticsTrend.js"),A=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},R=A(v),S=R.default.div`
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-`,R=({title:n,trends:t,RightHeaderComponent:c,containerStyle:o,titleSize:d,titleColor:h,perRow:y,isLoading:g,trendStyle:p,trendContainerStyle:m,trendIconStyle:u,hideHeaderDiv:f,isInternationalStore:x})=>{const j=d==="large"?a.TitleMedium:a.TitleRegular,l=y||(t.length<=4?t.length:t.length%3==0?3:4),T=Math.ceil(t.length/l);return e.jsxs("div",{style:{paddingTop:24,paddingBottom:24,...o??{}},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between",paddingBottom:f?0:12},children:[n&&e.jsx(j,{color:h??M.COLORS.content.secondary,style:{paddingLeft:24,paddingRight:24},children:n}),c]}),e.jsx(A,{children:Array.from({length:T}).map((S,i)=>e.jsx(e.Fragment,{children:e.jsx("div",{style:{display:"flex",width:"100%",marginTop:i===0?0:16},children:t.slice(i*l,(i+1)*l).map((r,s)=>e.jsx("div",{style:{flex:1,maxWidth:t.length===1?"100%":"50%"},children:e.jsx(q.AnalyticsTrend,{...r,isLoading:g,card:!1,size:r.size??"small",rightSeparator:s+i*l<Math.min((i+1)*l-1,t.length-1),trendStyle:p,trendIconStyle:u,trendContainerStyle:m,isInternationalStore:x})},s))},i)}))})]})};exports.AnalyticsMetric=R;
+`,b=({title:t,trends:i,RightHeaderComponent:c,containerStyle:o,titleSize:d,titleColor:p,perRow:y,isLoading:h,trendStyle:g,trendContainerStyle:f,trendIconStyle:u,hideHeaderDiv:m,isInternationalStore:j})=>{const x=d==="large"?r.TitleMedium:r.TitleRegular,n=y||(i.length<=4?i.length:i.length%3==0?3:4),T=Math.ceil(i.length/n);return e.jsxs("div",{style:{paddingTop:24,paddingBottom:24,...o??{}},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between",paddingBottom:m?0:12},children:[t&&e.jsx(x,{color:p??M.COLORS.content.secondary,style:{paddingLeft:24,paddingRight:24},children:t}),c]}),e.jsx(S,{children:Array.from({length:T}).map((C,l)=>e.jsx(e.Fragment,{children:e.jsx("div",{style:{display:"flex",width:"100%",marginTop:l===0?0:16},children:i.slice(l*n,(l+1)*n).map((a,s)=>e.jsx("div",{style:{flex:1,maxWidth:i.length===1?"100%":"50%"},children:e.jsx(q.AnalyticsTrend,{...a,isLoading:h,card:!1,size:a.size??"small",rightSeparator:s+l*n<Math.min((l+1)*n-1,i.length-1),trendStyle:g,trendIconStyle:u,trendContainerStyle:f,isInternationalStore:j})},s))},l)}))})]})};exports.AnalyticsMetric=b;
 //# sourceMappingURL=AnalyticsMetric.js.map

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsMetric.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnalyticsMetric.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsMetric.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { TitleMedium, TitleRegular } from '../TypographyStyle';\nimport { AnalyticsTrend, AnalyticsTrendInterface } from './AnalyticsTrend';\n\nconst TrendContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n`;\n\nexport const AnalyticsMetric: React.FC<{\n\ttitle?: string;\n\tRightHeaderComponent?: React.ReactElement;\n\ttrends: AnalyticsTrendInterface[];\n\tcontainerStyle?: React.CSSProperties;\n\ttrendStyle?: React.CSSProperties;\n\ttrendContainerStyle?: React.CSSProperties;\n\ttrendIconStyle?: React.CSSProperties;\n\ttitleSize?: 'large' \| 'small';\n\ttitleColor?: string;\n\tperRow?: number;\n\tisLoading?: boolean;\n\thideHeaderDiv?: boolean;\n\trelativePercentageDiff?: number;\n\tisInternationalStore?: boolean;\n}> = ({\n\ttitle,\n\ttrends,\n\tRightHeaderComponent,\n\tcontainerStyle,\n\ttitleSize,\n\ttitleColor,\n\tperRow,\n\tisLoading,\n\ttrendStyle,\n\ttrendContainerStyle,\n\ttrendIconStyle,\n\thideHeaderDiv,\n\tisInternationalStore,\n}) => {\n\tconst Typo = titleSize === 'large' ? TitleMedium : TitleRegular;\n\tconst perRowLocal =\n\t\tperRow \|\|\n\t\t(trends.length <= 4 ? trends.length : trends.length % 3 == 0 ? 3 : 4);\n\tconst rows = Math.ceil(trends.length / perRowLocal);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tpaddingTop: 24,\n\t\t\t\tpaddingBottom: 24,\n\t\t\t\t...(containerStyle ?? {}),\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\tpaddingBottom: hideHeaderDiv ? 0 : 12,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{title && (\n\t\t\t\t\t<Typo\n\t\t\t\t\t\tcolor={titleColor ?? COLORS.content.secondary}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tpaddingLeft: 24,\n\t\t\t\t\t\t\tpaddingRight: 24,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</Typo>\n\t\t\t\t)}\n\t\t\t\t{RightHeaderComponent}\n\t\t\t</div>\n\t\t\t<TrendContainer>\n\t\t\t\t{Array.from({ length: rows }).map((_, rowIndex) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\tmarginTop: rowIndex === 0 ? 0 : 16,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkey={rowIndex}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{trends\n\t\t\t\t\t\t\t\t.slice(rowIndex * perRowLocal, (rowIndex + 1) * perRowLocal)\n\t\t\t\t\t\t\t\t.map((trend, i) => (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t\t\t\t\tmaxWidth: trends.length === 1 ? '100%' : '50%',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<AnalyticsTrend\n\t\t\t\t\t\t\t\t\t\t\t{...trend}\n\t\t\t\t\t\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\t\t\t\t\t\tcard={false}\n\t\t\t\t\t\t\t\t\t\t\tsize={trend.size ?? 'small'}\n\t\t\t\t\t\t\t\t\t\t\trightSeparator={\n\t\t\t\t\t\t\t\t\t\t\t\ti + rowIndex * perRowLocal <\n\t\t\t\t\t\t\t\t\t\t\t\tMath.min(\n\t\t\t\t\t\t\t\t\t\t\t\t\t(rowIndex + 1) * perRowLocal - 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttrends.length - 1,\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\ttrendStyle={trendStyle}\n\t\t\t\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\t\t\t\ttrendContainerStyle={trendContainerStyle}\n\t\t\t\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t))}\n\t\t\t</TrendContainer>\n\t\t</div>\n\t);\n};\n\n/\n Card < 4 => x x x x x x x x x x\n Card % 3 =>\n x x x x x x x x x\n x x x x x\n x\n else perRow => 2\n x x x x x x\n x x x x x\n x\n else\n x x x x x x x x x x x x x x x\n x x x x x x\n/\n"],"names":["TrendContainer","styled","AnalyticsMetric","title","trends","RightHeaderComponent","containerStyle","titleSize","titleColor","perRow","isLoading","trendStyle","trendContainerStyle","trendIconStyle","hideHeaderDiv","isInternationalStore","Typo","TitleMedium","TitleRegular","perRowLocal","rows","jsxs","jsx","COLORS","_","rowIndex","Fragment","trend","i","AnalyticsTrend"],"mappings":"~~8PAMMA~~,EAAiBC,~~EAAO~~;AAAA;AAAA;AAAA;AAAA,EAMjBC,EAeR,CAAC,CACL,MAAAC,EACA,OAAAC,EACA,qBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,WAAAC,EACA,OAAAC,EACA,UAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,eAAAC,EACA,cAAAC,EACA,qBAAAC,CACD,IAAM,CACL,MAAMC,EAAOT,IAAc,QAAUU,EAAAA,YAAcC,EAAAA,aAC7CC,EACLV,IACCL,EAAO,QAAU,EAAIA,EAAO,OAASA,EAAO,OAAS,GAAK,EAAI,EAAI,GAC9DgB,EAAO,KAAK,KAAKhB,EAAO,OAASe,CAAW,EAElD,OACCE,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,WAAY,GACZ,cAAe,GACf,GAAIf,GAAkB,CAAA,CAAC,EAGxB,SAAA,CAAAe,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,eAAgB,gBAChB,cAAeP,EAAgB,EAAI,EAAA,EAGnC,SAAA,CAAAX,GACAmB,EAAAA,IAACN,EAAA,CACA,MAAOR,GAAce,SAAO,QAAQ,UACpC,MAAO,CACN,YAAa,GACb,aAAc,EAAA,EAGd,SAAApB,CAAA,CAAA,EAGFE,CAAA,CAAA,CAAA,EAEFiB,EAAAA,IAACtB,EAAA,CACC,SAAA,MAAM,KAAK,CAAE,OAAQoB,CAAA,CAAM,EAAE,IAAI,CAACI,EAAGC,IACrCH,EAAAA,IAAAI,EAAAA,SAAA,CACC,SAAAJ,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,MAAO,OACP,UAAWG,IAAa,EAAI,EAAI,EAAA,EAIhC,SAAArB,EACC,MAAMqB,EAAWN,GAAcM,EAAW,GAAKN,CAAW,EAC1D,IAAI,CAACQ,EAAOC,IACZN,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,KAAM,EACN,SAAUlB,EAAO,SAAW,EAAI,OAAS,KAAA,EAI1C,SAAAkB,EAAAA,IAACO,EAAAA,eAAA,CACC,GAAGF,EACJ,UAAAjB,EACA,KAAM,GACN,KAAMiB,EAAM,MAAQ,QACpB,eACCC,EAAIH,EAAWN,EACf,KAAK,KACHM,EAAW,GAAKN,EAAc,EAC/Bf,EAAO,OAAS,CAAA,EAGlB,WAAAO,EACA,eAAAE,EACA,oBAAAD,EACA,qBAAAG,CAAA,CAAA,CACD,EAlBKa,CAAA,CAoBN,CAAA,EA9BGH,CAAA,CA+BN,CACD,CACA,CAAA,CACF,CAAA,CAAA,CAAA,CAGH"}
1	+ {"version":3,"file":"AnalyticsMetric.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsMetric.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { TitleMedium, TitleRegular } from '../TypographyStyle';\nimport { AnalyticsTrend, AnalyticsTrendInterface } from './AnalyticsTrend';\n\nconst TrendContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n`;\n\nexport const AnalyticsMetric: React.FC<{\n\ttitle?: string;\n\tRightHeaderComponent?: React.ReactElement;\n\ttrends: AnalyticsTrendInterface[];\n\tcontainerStyle?: React.CSSProperties;\n\ttrendStyle?: React.CSSProperties;\n\ttrendContainerStyle?: React.CSSProperties;\n\ttrendIconStyle?: React.CSSProperties;\n\ttitleSize?: 'large' \| 'small';\n\ttitleColor?: string;\n\tperRow?: number;\n\tisLoading?: boolean;\n\thideHeaderDiv?: boolean;\n\trelativePercentageDiff?: number;\n\tisInternationalStore?: boolean;\n}> = ({\n\ttitle,\n\ttrends,\n\tRightHeaderComponent,\n\tcontainerStyle,\n\ttitleSize,\n\ttitleColor,\n\tperRow,\n\tisLoading,\n\ttrendStyle,\n\ttrendContainerStyle,\n\ttrendIconStyle,\n\thideHeaderDiv,\n\tisInternationalStore,\n}) => {\n\tconst Typo = titleSize === 'large' ? TitleMedium : TitleRegular;\n\tconst perRowLocal =\n\t\tperRow \|\|\n\t\t(trends.length <= 4 ? trends.length : trends.length % 3 == 0 ? 3 : 4);\n\tconst rows = Math.ceil(trends.length / perRowLocal);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tpaddingTop: 24,\n\t\t\t\tpaddingBottom: 24,\n\t\t\t\t...(containerStyle ?? {}),\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\tpaddingBottom: hideHeaderDiv ? 0 : 12,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{title && (\n\t\t\t\t\t<Typo\n\t\t\t\t\t\tcolor={titleColor ?? COLORS.content.secondary}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tpaddingLeft: 24,\n\t\t\t\t\t\t\tpaddingRight: 24,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</Typo>\n\t\t\t\t)}\n\t\t\t\t{RightHeaderComponent}\n\t\t\t</div>\n\t\t\t<TrendContainer>\n\t\t\t\t{Array.from({ length: rows }).map((_, rowIndex) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\tmarginTop: rowIndex === 0 ? 0 : 16,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkey={rowIndex}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{trends\n\t\t\t\t\t\t\t\t.slice(rowIndex * perRowLocal, (rowIndex + 1) * perRowLocal)\n\t\t\t\t\t\t\t\t.map((trend, i) => (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t\t\t\t\tmaxWidth: trends.length === 1 ? '100%' : '50%',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<AnalyticsTrend\n\t\t\t\t\t\t\t\t\t\t\t{...trend}\n\t\t\t\t\t\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\t\t\t\t\t\tcard={false}\n\t\t\t\t\t\t\t\t\t\t\tsize={trend.size ?? 'small'}\n\t\t\t\t\t\t\t\t\t\t\trightSeparator={\n\t\t\t\t\t\t\t\t\t\t\t\ti + rowIndex * perRowLocal <\n\t\t\t\t\t\t\t\t\t\t\t\tMath.min(\n\t\t\t\t\t\t\t\t\t\t\t\t\t(rowIndex + 1) * perRowLocal - 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\ttrends.length - 1,\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\ttrendStyle={trendStyle}\n\t\t\t\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\t\t\t\ttrendContainerStyle={trendContainerStyle}\n\t\t\t\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t))}\n\t\t\t</TrendContainer>\n\t\t</div>\n\t);\n};\n\n/\n Card < 4 => x x x x x x x x x x\n Card % 3 =>\n x x x x x x x x x\n x x x x x\n x\n else perRow => 2\n x x x x x x\n x x x x x\n x\n else\n x x x x x x x x x x x x x x x\n x x x x x x\n/\n"],"names":["TrendContainer","styled","AnalyticsMetric","title","trends","RightHeaderComponent","containerStyle","titleSize","titleColor","perRow","isLoading","trendStyle","trendContainerStyle","trendIconStyle","hideHeaderDiv","isInternationalStore","Typo","TitleMedium","TitleRegular","perRowLocal","rows","jsxs","jsx","COLORS","_","rowIndex","Fragment","trend","i","AnalyticsTrend"],"mappings":"6TAMMA,EAAiBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMjBC,EAeR,CAAC,CACL,MAAAC,EACA,OAAAC,EACA,qBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,WAAAC,EACA,OAAAC,EACA,UAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,eAAAC,EACA,cAAAC,EACA,qBAAAC,CACD,IAAM,CACL,MAAMC,EAAOT,IAAc,QAAUU,EAAAA,YAAcC,EAAAA,aAC7CC,EACLV,IACCL,EAAO,QAAU,EAAIA,EAAO,OAASA,EAAO,OAAS,GAAK,EAAI,EAAI,GAC9DgB,EAAO,KAAK,KAAKhB,EAAO,OAASe,CAAW,EAElD,OACCE,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,WAAY,GACZ,cAAe,GACf,GAAIf,GAAkB,CAAA,CAAC,EAGxB,SAAA,CAAAe,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,eAAgB,gBAChB,cAAeP,EAAgB,EAAI,EAAA,EAGnC,SAAA,CAAAX,GACAmB,EAAAA,IAACN,EAAA,CACA,MAAOR,GAAce,SAAO,QAAQ,UACpC,MAAO,CACN,YAAa,GACb,aAAc,EAAA,EAGd,SAAApB,CAAA,CAAA,EAGFE,CAAA,CAAA,CAAA,EAEFiB,EAAAA,IAACtB,EAAA,CACC,SAAA,MAAM,KAAK,CAAE,OAAQoB,CAAA,CAAM,EAAE,IAAI,CAACI,EAAGC,IACrCH,EAAAA,IAAAI,EAAAA,SAAA,CACC,SAAAJ,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,MAAO,OACP,UAAWG,IAAa,EAAI,EAAI,EAAA,EAIhC,SAAArB,EACC,MAAMqB,EAAWN,GAAcM,EAAW,GAAKN,CAAW,EAC1D,IAAI,CAACQ,EAAOC,IACZN,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,KAAM,EACN,SAAUlB,EAAO,SAAW,EAAI,OAAS,KAAA,EAI1C,SAAAkB,EAAAA,IAACO,EAAAA,eAAA,CACC,GAAGF,EACJ,UAAAjB,EACA,KAAM,GACN,KAAMiB,EAAM,MAAQ,QACpB,eACCC,EAAIH,EAAWN,EACf,KAAK,KACHM,EAAW,GAAKN,EAAc,EAC/Bf,EAAO,OAAS,CAAA,EAGlB,WAAAO,EACA,eAAAE,EACA,oBAAAD,EACA,qBAAAG,CAAA,CAAA,CACD,EAlBKa,CAAA,CAoBN,CAAA,EA9BGH,CAAA,CA+BN,CACD,CACA,CAAA,CACF,CAAA,CAAA,CAAA,CAGH"}

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("react"),F=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),Q=require("../../utils/DateUtils.js"),s=require("../../constants/Theme.js"),X=require("../../assets/icons/arrow_down.svg.js"),Y=require("../../assets/icons/arrow_up.svg.js"),Z=require("../../assets/icons/info.svg.js"),d=require("../TypographyStyle.js"),$=require("./chart/utils/calcPercentage.js"),E=require("./CommonStyles.js"),M=require("../tooltips/Tooltip.js"),T=require("../tag/Tag.js"),P=({title:h,value:r,trendPercent:t,type:l="horizontal",timeline:n,customRange:y,tooltip:j,card:u=!0,rightSeparator:v=!1,size:m="big",share:o=!1,formatVal:w,prefixSymbol:a,trailingIcon:C,onTrailIconClick:q,iconTooltipBody:g,funnelPercent:O,isLoading:i,trendRaw:p,trendRawString:c,suffixText:f,trendStyle:W,trendContainerStyle:_,trendIconStyle:I,containerStyle:U,prevTrendDiff:R,relativePercentageDiff:A,isInternationalStore:L,Icon:b,iconContainerStyle:B,tooltipTimelineText:V,customTimelineText:k})=>{const G=m==="big"?d.TitleLarge:d.TitleMedium,z=typeof t<"u"?t<0?"negative":t===0?"neutral":"positive":void 0,S=typeof t<"u"?o?Math.round(t):Math.abs(Math.round(t)):void 0,H=()=>typeof r>"u"?"--":typeof r=="number"&&w?r>999?L?`${a??""}${$.truncateValueForInternationalStore(r)} ${f??""}`:`${a??""}${$.truncateValueForIndianStore(r)} ${f??""}`:`${a??""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(r)} ${f??""}`:`${a??""}${r} ${f??""}`,J=K=>{const D=Math.abs(K);return D%1!==0?`${D.toFixed(1)} %`:`${D} %`};return e.jsx(E.AnalyticsTrendContainer,{card:u,style:{...U},children:e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:b?12:4,borderRightWidth:v?1:0,borderRightColor:s.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:u?0:24,paddingRight:u?0:24,height:"100%",justifyContent:b?"flex-start":"space-between",alignItems:"center",..._??{}},children:[!!b&&e.jsx(E.IconContainer,{style:{...B},children:e.jsx(b,{})}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:4,height:"100%",...W??{}},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[e.jsx(d.BodyCaption,{style:{color:s.COLORS.content.secondary},children:h}),j&&e.jsx(M.Tooltip,{body:j,placement:"right",width:300,children:e.jsx("div",{style:{display:"flex",cursor:"pointer",height:"100%"},children:e.jsx(Z.default,{color:s.COLORS.content.primary,height:16,width:16})})})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:12,alignItems:"center",...o?{justifyContent:"space-between"}:{}},children:[i&&e.jsx(F.ShimmerComponentStyled,{width:108,height:26}),!i&&e.jsx(G,{style:{color:s.COLORS.content.primary},children:H()}),typeof A=="number"&&e.jsx(T.Tag,{tagText:`${A}%`,theme:"light",type:"neutral"}),l==="horizontal"&&!i&&!o&&e.jsx(N,{timeline:n,customRange:y,percent:S,direction:z,trendRaw:p,trendRawString:c,prefixSymbol:a,trendIconStyle:I,isInternationalStore:L,tooltipTimelineText:V,customTimelineText:k}),i&&!o&&l==="horizontal"&&e.jsx(F.ShimmerComponentStyled,{height:20,width:141,marginTop:6}),l==="vertical"&&!i&&typeof O<"u"&&e.jsx(T.Tag,{tagText:`${O} %`,theme:"light",type:"neutral"}),o&&!i&&typeof S<"u"&&e.jsx(T.Tag,{tagText:`${S} %`,theme:"light",type:"neutral"}),!o&&!i&&R&&R!=0?e.jsx(T.Tag,{tagText:J(R),theme:"light",type:"neutral"}):e.jsx(e.Fragment,{})]}),l==="vertical"&&!i&&!o&&e.jsx("div",{style:{marginTop:10},children:e.jsx(N,{timeline:n,customRange:y,percent:S,direction:z,trendRaw:p,trendRawString:c,prefixSymbol:a,trendIconStyle:I,isInternationalStore:L,tooltipTimelineText:V,customTimelineText:k})}),i&&l==="vertical"&&e.jsx(F.ShimmerComponentStyled,{height:20,width:141,marginTop:6})]}),g&&!i&&e.jsx(M.Tooltip,{body:g,placement:"right",children:C&&e.jsx("div",{className:"icon--holder",onClick:q,children:x.createElement(C,{height:20,width:20,color:s.COLORS.content.secondary})})})]})})},N=({percent:h,direction:r,timeline:t,customRange:l,trendRaw:n,trendRawString:y,prefixSymbol:j,trendIconStyle:u,isInternationalStore:v,tooltipTimelineText:m,customTimelineText:o})=>{const w=()=>{let c="--";if(n)return v?c=String($.truncateValueForInternationalStore(Math.abs(n))):c=String($.truncateValueForIndianStore(Math.abs(n))),n<0?"-"+c:c},a=()=>{const c=((n??0)>0?"+":"")+(j??"");return typeof n>"u"?"--":`${c??""}${w()}`},[C,q]=x.useState(a()),[g,O]=x.useState(o||"");x.useEffect(()=>{o||O(t==="today"?"vs yesterday":t==="yesterday"?"vs 1 day before":t==="7 days"?"vs last 7 days":t==="30 days"?"vs last 30 days":t==="custom"&&l?Q.default.getAnalyticsCustomDateTimelineText(l):"")},[t,l]),x.useEffect(()=>{q(a())},[n]);const i=r==="negative"?X.default:Y.default,p=r==="negative"?s.COLORS.background.negative.vibrant:r==="positive"?s.COLORS.background.positive.vibrant:s.COLORS.content.placeholder;return e.jsxs("div",{style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"},children:[typeof h=="number"&&e.jsx(i,{color:p,height:16,width:16,style:{marginRight:2,...u??{}}}),typeof h=="number"&&r&&e.jsxs(d.Caption,{style:{color:p},children:[r==="neutral"?0:h<1e3?h:">999","%"]}),!!n&&e.jsx(d.Caption,{style:{marginLeft:4,color:s.COLORS.content.placeholder},children:`(${C})`}),!n&&(y?.length||0)>0&&e.jsx(d.Caption,{style:{marginLeft:4,color:s.COLORS.content.placeholder},children:`${y}`}),t&&(m?e.jsx(M.Tooltip,{body:m,placement:"bottom",children:e.jsx(d.Caption,{style:{marginLeft:4,color:s.COLORS.content.placeholder},children:o||g})}):e.jsx(d.Caption,{style:{marginLeft:4,color:s.COLORS.content.placeholder},children:o||g}))]})};exports.AnalyticsTrend=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("react"),F=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),Q=require("../../utils/DateUtils.js"),l=require("../../constants/Theme.js"),X=require("../../assets/icons/arrow_down.svg.js"),Y=require("../../assets/icons/arrow_up.svg.js"),Z=require("../../assets/icons/info.svg.js"),h=require("../TypographyStyle.js"),$=require("./chart/utils/calcPercentage.js"),z=require("./CommonStyles.js"),M=require("../tooltips/Tooltip.js"),T=require("../tag/Tag.js"),P=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},ee=P(x),te=({title:n,value:r,trendPercent:t,type:a="horizontal",timeline:o,customRange:u,tooltip:j,card:y=!0,rightSeparator:v=!1,size:m="big",share:i=!1,formatVal:w,prefixSymbol:c,trailingIcon:C,onTrailIconClick:q,iconTooltipBody:f,funnelPercent:b,isLoading:s,trendRaw:g,trendRawString:d,suffixText:p,trendStyle:N,trendContainerStyle:W,trendIconStyle:I,containerStyle:U,prevTrendDiff:R,relativePercentageDiff:A,isInternationalStore:L,Icon:O,iconContainerStyle:B,tooltipTimelineText:V,customTimelineText:_})=>{const G=m==="big"?h.TitleLarge:h.TitleMedium,k=typeof t<"u"?t<0?"negative":t===0?"neutral":"positive":void 0,S=typeof t<"u"?i?Math.round(t):Math.abs(Math.round(t)):void 0,H=()=>typeof r>"u"?"--":typeof r=="number"&&w?r>999?L?`${c??""}${$.truncateValueForInternationalStore(r)} ${p??""}`:`${c??""}${$.truncateValueForIndianStore(r)} ${p??""}`:`${c??""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(r)} ${p??""}`:`${c??""}${r} ${p??""}`,J=K=>{const D=Math.abs(K);return D%1!==0?`${D.toFixed(1)} %`:`${D} %`};return e.jsx(z.AnalyticsTrendContainer,{card:y,style:{...U},children:e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:O?12:4,borderRightWidth:v?1:0,borderRightColor:l.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:y?0:24,paddingRight:y?0:24,height:"100%",justifyContent:O?"flex-start":"space-between",alignItems:"center",...W??{}},children:[!!O&&e.jsx(z.IconContainer,{style:{...B},children:e.jsx(O,{})}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:4,height:"100%",...N??{}},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[e.jsx(h.BodyCaption,{style:{color:l.COLORS.content.secondary},children:n}),j&&e.jsx(M.Tooltip,{body:j,placement:"right",width:300,children:e.jsx("div",{style:{display:"flex",cursor:"pointer",height:"100%"},children:e.jsx(Z.default,{color:l.COLORS.content.primary,height:16,width:16})})})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:12,alignItems:"center",...i?{justifyContent:"space-between"}:{}},children:[s&&e.jsx(F.ShimmerComponentStyled,{width:108,height:26}),!s&&e.jsx(G,{style:{color:l.COLORS.content.primary},children:H()}),typeof A=="number"&&e.jsx(T.Tag,{tagText:`${A}%`,theme:"light",type:"neutral"}),a==="horizontal"&&!s&&!i&&e.jsx(E,{timeline:o,customRange:u,percent:S,direction:k,trendRaw:g,trendRawString:d,prefixSymbol:c,trendIconStyle:I,isInternationalStore:L,tooltipTimelineText:V,customTimelineText:_}),s&&!i&&a==="horizontal"&&e.jsx(F.ShimmerComponentStyled,{height:20,width:141,marginTop:6}),a==="vertical"&&!s&&typeof b<"u"&&e.jsx(T.Tag,{tagText:`${b} %`,theme:"light",type:"neutral"}),i&&!s&&typeof S<"u"&&e.jsx(T.Tag,{tagText:`${S} %`,theme:"light",type:"neutral"}),!i&&!s&&R&&R!=0?e.jsx(T.Tag,{tagText:J(R),theme:"light",type:"neutral"}):e.jsx(e.Fragment,{})]}),a==="vertical"&&!s&&!i&&e.jsx("div",{style:{marginTop:10},children:e.jsx(E,{timeline:o,customRange:u,percent:S,direction:k,trendRaw:g,trendRawString:d,prefixSymbol:c,trendIconStyle:I,isInternationalStore:L,tooltipTimelineText:V,customTimelineText:_})}),s&&a==="vertical"&&e.jsx(F.ShimmerComponentStyled,{height:20,width:141,marginTop:6})]}),f&&!s&&e.jsx(M.Tooltip,{body:f,placement:"right",children:C&&e.jsx("div",{className:"icon--holder",onClick:q,children:ee.default.createElement(C,{height:20,width:20,color:l.COLORS.content.secondary})})})]})})},E=({percent:n,direction:r,timeline:t,customRange:a,trendRaw:o,trendRawString:u,prefixSymbol:j,trendIconStyle:y,isInternationalStore:v,tooltipTimelineText:m,customTimelineText:i})=>{const w=()=>{let d="--";if(o)return v?d=String($.truncateValueForInternationalStore(Math.abs(o))):d=String($.truncateValueForIndianStore(Math.abs(o))),o<0?"-"+d:d},c=()=>{const d=((o??0)>0?"+":"")+(j??"");return typeof o>"u"?"--":`${d??""}${w()}`},[C,q]=x.useState(c()),[f,b]=x.useState(i||"");x.useEffect(()=>{i||b(t==="today"?"vs yesterday":t==="yesterday"?"vs 1 day before":t==="7 days"?"vs last 7 days":t==="30 days"?"vs last 30 days":t==="custom"&&a?Q.default.getAnalyticsCustomDateTimelineText(a):"")},[t,a]),x.useEffect(()=>{q(c())},[o]);const s=r==="negative"?X.default:Y.default,g=r==="negative"?l.COLORS.background.negative.vibrant:r==="positive"?l.COLORS.background.positive.vibrant:l.COLORS.content.placeholder;return e.jsxs("div",{style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"},children:[typeof n=="number"&&e.jsx(s,{color:g,height:16,width:16,style:{marginRight:2,...y??{}}}),typeof n=="number"&&r&&e.jsxs(h.Caption,{style:{color:g},children:[r==="neutral"?0:n<1e3?n:">999","%"]}),!!o&&e.jsx(h.Caption,{style:{marginLeft:4,color:l.COLORS.content.placeholder},children:`(${C})`}),!o&&(u?.length||0)>0&&e.jsx(h.Caption,{style:{marginLeft:4,color:l.COLORS.content.placeholder},children:`${u}`}),t&&(m?e.jsx(M.Tooltip,{body:m,placement:"bottom",children:e.jsx(h.Caption,{style:{marginLeft:4,color:l.COLORS.content.placeholder},children:i||f})}):e.jsx(h.Caption,{style:{marginLeft:4,color:l.COLORS.content.placeholder},children:i||f}))]})};exports.AnalyticsTrend=te;
 //# sourceMappingURL=AnalyticsTrend.js.map

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnalyticsTrend.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsTrend.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ShimmerComponentStyled } from '@src/components/shimmer/ShimmerComponent/ShimmerStyled';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownArrowIcon from '../../assets/icons/arrow_down.svg';\nimport UpArrowIcon from '../../assets/icons/arrow_up.svg';\nimport InfoIcon from '../../assets/icons/info.svg';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport {\n\tBodyCaption,\n\tCaption,\n\tTitleLarge,\n\tTitleMedium,\n} from '../TypographyStyle';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from './chart/utils/calcPercentage';\nimport { AnalyticsTrendContainer, IconContainer } from './CommonStyles';\n\nexport interface AnalyticsTrendInterface {\n\ttitle: string;\n\tvalue?: number \| string;\n\ttrendPercent?: number;\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tformatVal?: boolean;\n\ttimeline?: 'today' \| 'yesterday' \| '7 days' \| '30 days' \| 'custom';\n\tcustomRange?: Date[];\n\ttype?: 'vertical' \| 'horizontal';\n\ttooltip?: string;\n\tcard?: boolean;\n\trightSeparator?: boolean;\n\tsize?: 'big' \| 'small';\n\tshare?: boolean;\n\tprefixSymbol?: string;\n\ttrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tonTrailIconClick?: () => void;\n\ticonTooltipBody?: string;\n\tfunnelPercent?: number;\n\tisLoading?: boolean;\n\tsuffixText?: string;\n\ttrendStyle?: React.CSSProperties;\n\ticonContainerStyle?: React.CSSProperties;\n\ttrendContainerStyle?: React.CSSProperties;\n\ttrendIconStyle?: React.CSSProperties;\n\tcontainerStyle?: React.CSSProperties;\n\tprevTrendDiff?: number;\n\trelativePercentageDiff?: number;\n\tisInternationalStore?: boolean;\n\tIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}\nexport const AnalyticsTrend: React.FC<AnalyticsTrendInterface> = ({\n\ttitle,\n\tvalue,\n\ttrendPercent,\n\ttype = 'horizontal',\n\ttimeline,\n\tcustomRange,\n\ttooltip,\n\tcard = true,\n\trightSeparator = false,\n\tsize = 'big',\n\tshare = false,\n\tformatVal,\n\tprefixSymbol,\n\ttrailingIcon,\n\tonTrailIconClick,\n\ticonTooltipBody,\n\tfunnelPercent,\n\tisLoading,\n\ttrendRaw,\n\ttrendRawString,\n\tsuffixText,\n\ttrendStyle,\n\ttrendContainerStyle,\n\ttrendIconStyle,\n\tcontainerStyle,\n\tprevTrendDiff,\n\trelativePercentageDiff,\n\tisInternationalStore,\n\tIcon,\n\ticonContainerStyle,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst ValueTypo = size === 'big' ? TitleLarge : TitleMedium;\n\tconst trendDirection =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? trendPercent < 0\n\t\t\t\t? 'negative'\n\t\t\t\t: trendPercent === 0\n\t\t\t\t? 'neutral'\n\t\t\t\t: 'positive'\n\t\t\t: undefined;\n\n\tconst percent =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? share\n\t\t\t\t? Math.round(trendPercent)\n\t\t\t\t: Math.abs(Math.round(trendPercent))\n\t\t\t: undefined;\n\n\tconst getDisplayValue = () => {\n\t\tif (typeof value === 'undefined') {\n\t\t\treturn '--';\n\t\t}\n\n\t\tif (typeof value === 'number') {\n\t\t\tif (formatVal) {\n\t\t\t\tif (value > 999) {\n\t\t\t\t\tif (isInternationalStore) {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForInternationalStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForIndianStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\treturn `${prefixSymbol ?? ''}${new Intl.NumberFormat('en-IN', {\n\t\t\t\t\t\tmaximumFractionDigits: 2,\n\t\t\t\t\t}).format(value)} ${suffixText ?? ''}`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn `${prefixSymbol ?? ''}${value} ${suffixText ?? ''}`;\n\t};\n\n\tconst formatTrendDiff = (trendDiff: number) => {\n\t\tconst diff = Math.abs(trendDiff);\n\t\tif (diff % 1 !== 0) {\n\t\t\treturn `${diff.toFixed(1)} %`;\n\t\t}\n\t\treturn `${diff} %`;\n\t};\n\n\treturn (\n\t\t<AnalyticsTrendContainer\n\t\t\tcard={card}\n\t\t\tstyle={{\n\t\t\t\t...containerStyle,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tgap: Icon ? 12 : 4,\n\t\t\t\t\tborderRightWidth: rightSeparator ? 1 : 0,\n\t\t\t\t\tborderRightColor: COLORS.stroke.primary,\n\t\t\t\t\tborderRightStyle: 'solid',\n\t\t\t\t\tpaddingLeft: !card ? 24 : 0,\n\t\t\t\t\tpaddingRight: !card ? 24 : 0,\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tjustifyContent: Icon ? 'flex-start' : 'space-between',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t...(trendContainerStyle ?? {}),\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!!Icon && (\n\t\t\t\t\t<IconContainer style={{ ...iconContainerStyle }}>\n\t\t\t\t\t\t<Icon />\n\t\t\t\t\t</IconContainer>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t...(trendStyle ?? {}),\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</BodyCaption>\n\n\t\t\t\t\t\t{tooltip && (\n\t\t\t\t\t\t\t<Tooltip body={tooltip} placement={'right'} width={300}>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 12,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t...(share ? { justifyContent: 'space-between' } : {}),\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isLoading && <ShimmerComponentStyled width={108} height={26} />}\n\t\t\t\t\t\t{!isLoading && (\n\t\t\t\t\t\t\t<ValueTypo\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t\t\t</ValueTypo>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{typeof relativePercentageDiff === 'number' && (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={`${relativePercentageDiff}%`}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'horizontal' && !isLoading && !share && (\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{isLoading && !share && type === 'horizontal' && (\n\t\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'vertical' &&\n\t\t\t\t\t\t\t!isLoading &&\n\t\t\t\t\t\t\ttypeof funnelPercent !== 'undefined' && (\n\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\ttagText={`${funnelPercent} %`}\n\t\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t{share && !isLoading && typeof percent !== 'undefined' && (\n\t\t\t\t\t\t\t<Tag tagText={`${percent} %`} theme=\"light\" type=\"neutral\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!share && !isLoading && prevTrendDiff && prevTrendDiff != 0 ? (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={formatTrendDiff(prevTrendDiff)}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{type === 'vertical' && !isLoading && !share && (\n\t\t\t\t\t\t<div style={{ marginTop: 10 }}>\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{isLoading && type === 'vertical' && (\n\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{iconTooltipBody && !isLoading && (\n\t\t\t\t\t<Tooltip body={iconTooltipBody} placement={'right'}>\n\t\t\t\t\t\t{trailingIcon && (\n\t\t\t\t\t\t\t<div className={'icon--holder'} onClick={onTrailIconClick}>\n\t\t\t\t\t\t\t\t{React.createElement(trailingIcon, {\n\t\t\t\t\t\t\t\t\theight: 20,\n\t\t\t\t\t\t\t\t\twidth: 20,\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</AnalyticsTrendContainer>\n\t);\n};\n\nconst Trend: React.FC<{\n\tpercent?: number;\n\tdirection?: 'positive' \| 'negative' \| 'neutral';\n\ttimeline?: AnalyticsTrendInterface['timeline'];\n\tcustomRange?: AnalyticsTrendInterface['customRange'];\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tprefixSymbol?: string;\n\ttrendIconStyle?: React.CSSProperties;\n\tisInternationalStore?: boolean;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}> = ({\n\tpercent,\n\tdirection,\n\ttimeline,\n\tcustomRange,\n\ttrendRaw,\n\ttrendRawString,\n\tprefixSymbol,\n\ttrendIconStyle,\n\tisInternationalStore,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst getTrendRawAbs = () => {\n\t\tlet trendRawAbs = '--';\n\t\tif (trendRaw) {\n\t\t\tif (isInternationalStore) {\n\t\t\t\ttrendRawAbs = String(\n\t\t\t\t\ttruncateValueForInternationalStore(Math.abs(trendRaw)),\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\ttrendRawAbs = String(truncateValueForIndianStore(Math.abs(trendRaw)));\n\t\t\t}\n\t\t\tif (trendRaw < 0) {\n\t\t\t\treturn '-' + trendRawAbs;\n\t\t\t} else {\n\t\t\t\treturn trendRawAbs;\n\t\t\t}\n\t\t}\n\t};\n\n\tconst generateTrendRawText = () => {\n\t\tconst prefixWithSign =\n\t\t\t((trendRaw ?? 0) > 0 ? '+' : '') + (prefixSymbol ?? '');\n\t\tconst trendRawTextInitial =\n\t\t\ttypeof trendRaw === 'undefined'\n\t\t\t\t? '--'\n\t\t\t\t: `${prefixWithSign ?? ''}${getTrendRawAbs()}`;\n\t\treturn trendRawTextInitial;\n\t};\n\n\tconst [trendRawText, setTrendRawText] = useState<string>(\n\t\tgenerateTrendRawText(),\n\t);\n\tconst [timeLineText, setTimeLineText] = useState<string>(\n\t\tcustomTimelineText \|\| '',\n\t);\n\n\tuseEffect(() => {\n\t\tif (customTimelineText) {\n\t\t\treturn;\n\t\t}\n\t\tsetTimeLineText(\n\t\t\ttimeline === 'today'\n\t\t\t\t? 'vs yesterday'\n\t\t\t\t: timeline === 'yesterday'\n\t\t\t\t? 'vs 1 day before'\n\t\t\t\t: timeline === '7 days'\n\t\t\t\t? 'vs last 7 days'\n\t\t\t\t: timeline === '30 days'\n\t\t\t\t? 'vs last 30 days'\n\t\t\t\t: timeline === 'custom' && customRange\n\t\t\t\t? DateUtils.getAnalyticsCustomDateTimelineText(customRange)\n\t\t\t\t: '',\n\t\t);\n\t}, [timeline, customRange]);\n\n\tuseEffect(() => {\n\t\tsetTrendRawText(generateTrendRawText());\n\t}, [trendRaw]);\n\n\tconst TrendIcon = direction === 'negative' ? DownArrowIcon : UpArrowIcon;\n\n\tconst color =\n\t\tdirection === 'negative'\n\t\t\t? COLORS.background.negative.vibrant\n\t\t\t: direction === 'positive'\n\t\t\t? COLORS.background.positive.vibrant\n\t\t\t: COLORS.content.placeholder;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t\tflexDirection: 'row',\n\t\t\t\tflexWrap: 'wrap',\n\t\t\t}}\n\t\t>\n\t\t\t{typeof percent === 'number' && (\n\t\t\t\t<TrendIcon\n\t\t\t\t\tcolor={color}\n\t\t\t\t\theight={16}\n\t\t\t\t\twidth={16}\n\t\t\t\t\tstyle={{ marginRight: 2, ...(trendIconStyle ?? {}) }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{typeof percent === 'number' && direction && (\n\t\t\t\t<Caption style={{ color }}>\n\t\t\t\t\t{direction === 'neutral' ? 0 : percent < 1000 ? percent : '>999'}\n\t\t\t\t\t{'%'}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!!trendRaw && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`(${trendRawText})`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!trendRaw && (trendRawString?.length \|\| 0) > 0 && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`${trendRawString}`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\n\t\t\t{timeline &&\n\t\t\t\t(tooltipTimelineText ? (\n\t\t\t\t\t<Tooltip body={tooltipTimelineText} placement=\"bottom\">\n\t\t\t\t\t\t<Caption\n\t\t\t\t\t\t\tstyle={{ marginLeft: 4, color: COLORS.content.placeholder }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customTimelineText \|\| timeLineText}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t{customTimelineText \|\| timeLineText}\n\t\t\t\t\t</Caption>\n\t\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["AnalyticsTrend","title","value","trendPercent","type","timeline","customRange","tooltip","card","rightSeparator","size","share","formatVal","prefixSymbol","trailingIcon","onTrailIconClick","iconTooltipBody","funnelPercent","isLoading","trendRaw","trendRawString","suffixText","trendStyle","trendContainerStyle","trendIconStyle","containerStyle","prevTrendDiff","relativePercentageDiff","isInternationalStore","Icon","iconContainerStyle","tooltipTimelineText","customTimelineText","ValueTypo","TitleLarge","TitleMedium","trendDirection","percent","getDisplayValue","truncateValueForInternationalStore","truncateValueForIndianStore","formatTrendDiff","trendDiff","diff","jsx","AnalyticsTrendContainer","jsxs","COLORS","IconContainer","BodyCaption","Tooltip","InfoIcon","ShimmerComponentStyled","Tag","Trend","Fragment","React","direction","getTrendRawAbs","trendRawAbs","generateTrendRawText","prefixWithSign","trendRawText","setTrendRawText","useState","timeLineText","setTimeLineText","useEffect","DateUtils","TrendIcon","DownArrowIcon","UpArrowIcon","color","Caption"],"mappings":"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"}
1	+ {"version":3,"file":"AnalyticsTrend.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsTrend.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ShimmerComponentStyled } from '@src/components/shimmer/ShimmerComponent/ShimmerStyled';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownArrowIcon from '../../assets/icons/arrow_down.svg';\nimport UpArrowIcon from '../../assets/icons/arrow_up.svg';\nimport InfoIcon from '../../assets/icons/info.svg';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport {\n\tBodyCaption,\n\tCaption,\n\tTitleLarge,\n\tTitleMedium,\n} from '../TypographyStyle';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from './chart/utils/calcPercentage';\nimport { AnalyticsTrendContainer, IconContainer } from './CommonStyles';\n\nexport interface AnalyticsTrendInterface {\n\ttitle: string;\n\tvalue?: number \| string;\n\ttrendPercent?: number;\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tformatVal?: boolean;\n\ttimeline?: 'today' \| 'yesterday' \| '7 days' \| '30 days' \| 'custom';\n\tcustomRange?: Date[];\n\ttype?: 'vertical' \| 'horizontal';\n\ttooltip?: string;\n\tcard?: boolean;\n\trightSeparator?: boolean;\n\tsize?: 'big' \| 'small';\n\tshare?: boolean;\n\tprefixSymbol?: string;\n\ttrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tonTrailIconClick?: () => void;\n\ticonTooltipBody?: string;\n\tfunnelPercent?: number;\n\tisLoading?: boolean;\n\tsuffixText?: string;\n\ttrendStyle?: React.CSSProperties;\n\ticonContainerStyle?: React.CSSProperties;\n\ttrendContainerStyle?: React.CSSProperties;\n\ttrendIconStyle?: React.CSSProperties;\n\tcontainerStyle?: React.CSSProperties;\n\tprevTrendDiff?: number;\n\trelativePercentageDiff?: number;\n\tisInternationalStore?: boolean;\n\tIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}\nexport const AnalyticsTrend: React.FC<AnalyticsTrendInterface> = ({\n\ttitle,\n\tvalue,\n\ttrendPercent,\n\ttype = 'horizontal',\n\ttimeline,\n\tcustomRange,\n\ttooltip,\n\tcard = true,\n\trightSeparator = false,\n\tsize = 'big',\n\tshare = false,\n\tformatVal,\n\tprefixSymbol,\n\ttrailingIcon,\n\tonTrailIconClick,\n\ticonTooltipBody,\n\tfunnelPercent,\n\tisLoading,\n\ttrendRaw,\n\ttrendRawString,\n\tsuffixText,\n\ttrendStyle,\n\ttrendContainerStyle,\n\ttrendIconStyle,\n\tcontainerStyle,\n\tprevTrendDiff,\n\trelativePercentageDiff,\n\tisInternationalStore,\n\tIcon,\n\ticonContainerStyle,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst ValueTypo = size === 'big' ? TitleLarge : TitleMedium;\n\tconst trendDirection =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? trendPercent < 0\n\t\t\t\t? 'negative'\n\t\t\t\t: trendPercent === 0\n\t\t\t\t? 'neutral'\n\t\t\t\t: 'positive'\n\t\t\t: undefined;\n\n\tconst percent =\n\t\ttypeof trendPercent !== 'undefined'\n\t\t\t? share\n\t\t\t\t? Math.round(trendPercent)\n\t\t\t\t: Math.abs(Math.round(trendPercent))\n\t\t\t: undefined;\n\n\tconst getDisplayValue = () => {\n\t\tif (typeof value === 'undefined') {\n\t\t\treturn '--';\n\t\t}\n\n\t\tif (typeof value === 'number') {\n\t\t\tif (formatVal) {\n\t\t\t\tif (value > 999) {\n\t\t\t\t\tif (isInternationalStore) {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForInternationalStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn `${prefixSymbol ?? ''}${truncateValueForIndianStore(\n\t\t\t\t\t\t\tvalue,\n\t\t\t\t\t\t)} ${suffixText ?? ''}`;\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\treturn `${prefixSymbol ?? ''}${new Intl.NumberFormat('en-IN', {\n\t\t\t\t\t\tmaximumFractionDigits: 2,\n\t\t\t\t\t}).format(value)} ${suffixText ?? ''}`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn `${prefixSymbol ?? ''}${value} ${suffixText ?? ''}`;\n\t};\n\n\tconst formatTrendDiff = (trendDiff: number) => {\n\t\tconst diff = Math.abs(trendDiff);\n\t\tif (diff % 1 !== 0) {\n\t\t\treturn `${diff.toFixed(1)} %`;\n\t\t}\n\t\treturn `${diff} %`;\n\t};\n\n\treturn (\n\t\t<AnalyticsTrendContainer\n\t\t\tcard={card}\n\t\t\tstyle={{\n\t\t\t\t...containerStyle,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tgap: Icon ? 12 : 4,\n\t\t\t\t\tborderRightWidth: rightSeparator ? 1 : 0,\n\t\t\t\t\tborderRightColor: COLORS.stroke.primary,\n\t\t\t\t\tborderRightStyle: 'solid',\n\t\t\t\t\tpaddingLeft: !card ? 24 : 0,\n\t\t\t\t\tpaddingRight: !card ? 24 : 0,\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tjustifyContent: Icon ? 'flex-start' : 'space-between',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t...(trendContainerStyle ?? {}),\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!!Icon && (\n\t\t\t\t\t<IconContainer style={{ ...iconContainerStyle }}>\n\t\t\t\t\t\t<Icon />\n\t\t\t\t\t</IconContainer>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t...(trendStyle ?? {}),\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 4,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</BodyCaption>\n\n\t\t\t\t\t\t{tooltip && (\n\t\t\t\t\t\t\t<Tooltip body={tooltip} placement={'right'} width={300}>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tgap: 12,\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t...(share ? { justifyContent: 'space-between' } : {}),\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{isLoading && <ShimmerComponentStyled width={108} height={26} />}\n\t\t\t\t\t\t{!isLoading && (\n\t\t\t\t\t\t\t<ValueTypo\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t\t\t</ValueTypo>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{typeof relativePercentageDiff === 'number' && (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={`${relativePercentageDiff}%`}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'horizontal' && !isLoading && !share && (\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{isLoading && !share && type === 'horizontal' && (\n\t\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{type === 'vertical' &&\n\t\t\t\t\t\t\t!isLoading &&\n\t\t\t\t\t\t\ttypeof funnelPercent !== 'undefined' && (\n\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\ttagText={`${funnelPercent} %`}\n\t\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t{share && !isLoading && typeof percent !== 'undefined' && (\n\t\t\t\t\t\t\t<Tag tagText={`${percent} %`} theme=\"light\" type=\"neutral\" />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!share && !isLoading && prevTrendDiff && prevTrendDiff != 0 ? (\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={formatTrendDiff(prevTrendDiff)}\n\t\t\t\t\t\t\t\ttheme=\"light\"\n\t\t\t\t\t\t\t\ttype=\"neutral\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{type === 'vertical' && !isLoading && !share && (\n\t\t\t\t\t\t<div style={{ marginTop: 10 }}>\n\t\t\t\t\t\t\t<Trend\n\t\t\t\t\t\t\t\ttimeline={timeline}\n\t\t\t\t\t\t\t\tcustomRange={customRange}\n\t\t\t\t\t\t\t\tpercent={percent}\n\t\t\t\t\t\t\t\tdirection={trendDirection}\n\t\t\t\t\t\t\t\ttrendRaw={trendRaw}\n\t\t\t\t\t\t\t\ttrendRawString={trendRawString}\n\t\t\t\t\t\t\t\tprefixSymbol={prefixSymbol}\n\t\t\t\t\t\t\t\ttrendIconStyle={trendIconStyle}\n\t\t\t\t\t\t\t\tisInternationalStore={isInternationalStore}\n\t\t\t\t\t\t\t\ttooltipTimelineText={tooltipTimelineText}\n\t\t\t\t\t\t\t\tcustomTimelineText={customTimelineText}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{isLoading && type === 'vertical' && (\n\t\t\t\t\t\t<ShimmerComponentStyled height={20} width={141} marginTop={6} />\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{iconTooltipBody && !isLoading && (\n\t\t\t\t\t<Tooltip body={iconTooltipBody} placement={'right'}>\n\t\t\t\t\t\t{trailingIcon && (\n\t\t\t\t\t\t\t<div className={'icon--holder'} onClick={onTrailIconClick}>\n\t\t\t\t\t\t\t\t{React.createElement(trailingIcon, {\n\t\t\t\t\t\t\t\t\theight: 20,\n\t\t\t\t\t\t\t\t\twidth: 20,\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</AnalyticsTrendContainer>\n\t);\n};\n\nconst Trend: React.FC<{\n\tpercent?: number;\n\tdirection?: 'positive' \| 'negative' \| 'neutral';\n\ttimeline?: AnalyticsTrendInterface['timeline'];\n\tcustomRange?: AnalyticsTrendInterface['customRange'];\n\ttrendRaw?: number;\n\ttrendRawString?: string;\n\tprefixSymbol?: string;\n\ttrendIconStyle?: React.CSSProperties;\n\tisInternationalStore?: boolean;\n\ttooltipTimelineText?: string;\n\tcustomTimelineText?: string;\n}> = ({\n\tpercent,\n\tdirection,\n\ttimeline,\n\tcustomRange,\n\ttrendRaw,\n\ttrendRawString,\n\tprefixSymbol,\n\ttrendIconStyle,\n\tisInternationalStore,\n\ttooltipTimelineText,\n\tcustomTimelineText,\n}) => {\n\tconst getTrendRawAbs = () => {\n\t\tlet trendRawAbs = '--';\n\t\tif (trendRaw) {\n\t\t\tif (isInternationalStore) {\n\t\t\t\ttrendRawAbs = String(\n\t\t\t\t\ttruncateValueForInternationalStore(Math.abs(trendRaw)),\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\ttrendRawAbs = String(truncateValueForIndianStore(Math.abs(trendRaw)));\n\t\t\t}\n\t\t\tif (trendRaw < 0) {\n\t\t\t\treturn '-' + trendRawAbs;\n\t\t\t} else {\n\t\t\t\treturn trendRawAbs;\n\t\t\t}\n\t\t}\n\t};\n\n\tconst generateTrendRawText = () => {\n\t\tconst prefixWithSign =\n\t\t\t((trendRaw ?? 0) > 0 ? '+' : '') + (prefixSymbol ?? '');\n\t\tconst trendRawTextInitial =\n\t\t\ttypeof trendRaw === 'undefined'\n\t\t\t\t? '--'\n\t\t\t\t: `${prefixWithSign ?? ''}${getTrendRawAbs()}`;\n\t\treturn trendRawTextInitial;\n\t};\n\n\tconst [trendRawText, setTrendRawText] = useState<string>(\n\t\tgenerateTrendRawText(),\n\t);\n\tconst [timeLineText, setTimeLineText] = useState<string>(\n\t\tcustomTimelineText \|\| '',\n\t);\n\n\tuseEffect(() => {\n\t\tif (customTimelineText) {\n\t\t\treturn;\n\t\t}\n\t\tsetTimeLineText(\n\t\t\ttimeline === 'today'\n\t\t\t\t? 'vs yesterday'\n\t\t\t\t: timeline === 'yesterday'\n\t\t\t\t? 'vs 1 day before'\n\t\t\t\t: timeline === '7 days'\n\t\t\t\t? 'vs last 7 days'\n\t\t\t\t: timeline === '30 days'\n\t\t\t\t? 'vs last 30 days'\n\t\t\t\t: timeline === 'custom' && customRange\n\t\t\t\t? DateUtils.getAnalyticsCustomDateTimelineText(customRange)\n\t\t\t\t: '',\n\t\t);\n\t}, [timeline, customRange]);\n\n\tuseEffect(() => {\n\t\tsetTrendRawText(generateTrendRawText());\n\t}, [trendRaw]);\n\n\tconst TrendIcon = direction === 'negative' ? DownArrowIcon : UpArrowIcon;\n\n\tconst color =\n\t\tdirection === 'negative'\n\t\t\t? COLORS.background.negative.vibrant\n\t\t\t: direction === 'positive'\n\t\t\t? COLORS.background.positive.vibrant\n\t\t\t: COLORS.content.placeholder;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t\tflexDirection: 'row',\n\t\t\t\tflexWrap: 'wrap',\n\t\t\t}}\n\t\t>\n\t\t\t{typeof percent === 'number' && (\n\t\t\t\t<TrendIcon\n\t\t\t\t\tcolor={color}\n\t\t\t\t\theight={16}\n\t\t\t\t\twidth={16}\n\t\t\t\t\tstyle={{ marginRight: 2, ...(trendIconStyle ?? {}) }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{typeof percent === 'number' && direction && (\n\t\t\t\t<Caption style={{ color }}>\n\t\t\t\t\t{direction === 'neutral' ? 0 : percent < 1000 ? percent : '>999'}\n\t\t\t\t\t{'%'}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!!trendRaw && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`(${trendRawText})`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\t\t\t{!trendRaw && (trendRawString?.length \|\| 0) > 0 && (\n\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t{`${trendRawString}`}\n\t\t\t\t</Caption>\n\t\t\t)}\n\n\t\t\t{timeline &&\n\t\t\t\t(tooltipTimelineText ? (\n\t\t\t\t\t<Tooltip body={tooltipTimelineText} placement=\"bottom\">\n\t\t\t\t\t\t<Caption\n\t\t\t\t\t\t\tstyle={{ marginLeft: 4, color: COLORS.content.placeholder }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customTimelineText \|\| timeLineText}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\t<Caption style={{ marginLeft: 4, color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t{customTimelineText \|\| timeLineText}\n\t\t\t\t\t</Caption>\n\t\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["AnalyticsTrend","title","value","trendPercent","type","timeline","customRange","tooltip","card","rightSeparator","size","share","formatVal","prefixSymbol","trailingIcon","onTrailIconClick","iconTooltipBody","funnelPercent","isLoading","trendRaw","trendRawString","suffixText","trendStyle","trendContainerStyle","trendIconStyle","containerStyle","prevTrendDiff","relativePercentageDiff","isInternationalStore","Icon","iconContainerStyle","tooltipTimelineText","customTimelineText","ValueTypo","TitleLarge","TitleMedium","trendDirection","percent","getDisplayValue","truncateValueForInternationalStore","truncateValueForIndianStore","formatTrendDiff","trendDiff","diff","jsx","AnalyticsTrendContainer","jsxs","COLORS","IconContainer","BodyCaption","Tooltip","InfoIcon","ShimmerComponentStyled","Tag","Trend","Fragment","React","direction","getTrendRawAbs","trendRawAbs","generateTrendRawText","prefixWithSign","trendRawText","setTrendRawText","useState","timeLineText","setTimeLineText","useEffect","DateUtils","TrendIcon","DownArrowIcon","UpArrowIcon","color","Caption"],"mappings":"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"}

package/dist/cjs/components/analytics-chips-and-dropdowns/CommonStyles.js CHANGED Viewed

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),r=require("../../constants/Theme.js"),o=require("../floating-action-button/FloatingActionButton.styles.js"),i=t.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),e=require("../../constants/Theme.js"),n=require("../floating-action-button/FloatingActionButton.styles.js"),i=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=i(o),d=r.default.div`
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: flex-start;
 	padding: 12px 16px;
 	gap: 8px;
-	background: ${e=>e.backgroundColor};
+	background: ${t=>t.backgroundColor};
 	border-radius: 8px;
-	width: ${e=>e.width?e.width:"224.67px"};
+	width: ${t=>t.width?t.width:"224.67px"};
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: initial;
@@ -19,14 +19,14 @@
 		gap: 4px;
 		align-items: baseline;
 	}
-`,n=t.div`
+`,a=r.default.div`
 	display: flex;
 	flex-direction: row;
 	align-items: flex-start;
 	padding: 0px;
 	gap: 16px;
 	flex-wrap: wrap;
-`,d=t(o.StyledDropdown)`
+`,p=r.default(n.StyledDropdown)`
 	.main--dropdown.dropdown-toggle::after {
 		display: unset !important;
 	}
@@ -38,14 +38,14 @@
 	.main--dropdown.btn-primary:focus,
 	.main--dropdown.btn-primary.dropdown-toggle,
 	.main--dropdown.show > main--dropdown.btn-primary.dropdown-toggle {
-		border: 1px solid ${r.BASE_COLORS.grayscale[200]};
+		border: 1px solid ${e.BASE_COLORS.grayscale[200]};
 		border-radius: 4px;
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		padding: 6px 8px;
 		gap: 8px;
-		background: ${e=>e.bgColor};
+		background: ${t=>t.bgColor};
 	}
 	.dropdown-menu {
 		border-radius: 3px;
@@ -68,28 +68,28 @@
 			align-items: center;
 		}
 	}
-`,a=t.div`
+`,s=r.default.div`
 	display: flex;
 	flex-direction: column;
 	align-items: flex-start;
 	padding: 12px 16px;
 	gap: 4px;
-	border-bottom: ${e=>e.isLastItem?"none":`1px solid ${r.BASE_COLORS.grayscale[200]}`};
+	border-bottom: ${t=>t.isLastItem?"none":`1px solid ${e.BASE_COLORS.grayscale[200]}`};
 	max-width: 240px;
 	cursor: pointer;
-	background-color: ${e=>e.isSelected?r.BASE_COLORS.positive[50]:r.BASE_COLORS.grayscale.white};
+	background-color: ${t=>t.isSelected?e.BASE_COLORS.positive[50]:e.BASE_COLORS.grayscale.white};
 	&:hover {
-		background-color: ${e=>e.isSelected?"":r.BASE_COLORS.grayscale[50]};
+		background-color: ${t=>t.isSelected?"":e.BASE_COLORS.grayscale[50]};
 	}
 	width: 100%;
-	border-top-left-radius: ${e=>e.isFirstItem?"4px":"0px"};
-	border-top-right-radius: ${e=>e.isFirstItem?"4px":"0px"};
-	border-bottom-left-radius: ${e=>e.isLastItem?"4px":"0px"};
-	border-bottom-right-radius: ${e=>e.isLastItem?"4px":"0px"};
-`,p=t.div`
-	border: ${e=>e.card?1:0}px solid ${r.COLORS.background.base};
+	border-top-left-radius: ${t=>t.isFirstItem?"4px":"0px"};
+	border-top-right-radius: ${t=>t.isFirstItem?"4px":"0px"};
+	border-bottom-left-radius: ${t=>t.isLastItem?"4px":"0px"};
+	border-bottom-right-radius: ${t=>t.isLastItem?"4px":"0px"};
+`,l=r.default.div`
+	border: ${t=>t.card?1:0}px solid ${e.COLORS.background.base};
 	height: 100%;
-	${e=>e.card?`
+	${t=>t.card?`
 			box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
 			border-radius: 8px;
 			padding: 16px 20px;`:""}
@@ -102,16 +102,16 @@
 		border-radius: 5px;
 		cursor: pointer;
 		:hover {
-			background-color: ${r.COLORS.surface.hovered};
+			background-color: ${e.COLORS.surface.hovered};
 		}
 	}
-`,s=t.div`
+`,c=r.default.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	width: 32px;
 	height: 32px;
-	background-color: ${r.COLORS.background.brandLight};
+	background-color: ${e.COLORS.background.brandLight};
 	border-radius: 4px;
-`;exports.AnalyticsChipContainer=i;exports.AnalyticsMultiWrapper=n;exports.AnalyticsTrendContainer=p;exports.IconContainer=s;exports.ItemMenuContainer=a;exports.MainDropdown=d;
+`;exports.AnalyticsChipContainer=d;exports.AnalyticsMultiWrapper=a;exports.AnalyticsTrendContainer=l;exports.IconContainer=c;exports.ItemMenuContainer=s;exports.MainDropdown=p;
 //# sourceMappingURL=CommonStyles.js.map

package/dist/cjs/components/analytics-chips-and-dropdowns/CommonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/CommonStyles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport { StyledDropdown } from '../floating-action-button';\n\nexport const AnalyticsChipContainer = styled.div<{\n\tbackgroundColor?: string;\n\twidth?: string \| number;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: flex-start;\n\tpadding: 12px 16px;\n\tgap: 8px;\n\tbackground: ${(props) => props.backgroundColor};\n\tborder-radius: 8px;\n\twidth: ${(props) => (props.width ? props.width : '224.67px')};\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: initial;\n\tmin-height: 88px;\n\t.sub--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\tgap: 4px;\n\t\talign-items: baseline;\n\t}\n`;\n\nexport const AnalyticsMultiWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: flex-start;\n\tpadding: 0px;\n\tgap: 16px;\n\tflex-wrap: wrap;\n`;\n\nexport const MainDropdown = styled(StyledDropdown)<{\n\theight?: string;\n\tbgColor?: string;\n}>`\n\t.main--dropdown.dropdown-toggle::after {\n\t\tdisplay: unset !important;\n\t}\n\t.main--dropdown.dropdown-toggle::before {\n\t\tdisplay: unset !important;\n\t}\n\t.main--dropdown.btn-primary:hover,\n\t.main--dropdown.btn-primary:active,\n\t.main--dropdown.btn-primary:focus,\n\t.main--dropdown.btn-primary.dropdown-toggle,\n\t.main--dropdown.show > main--dropdown.btn-primary.dropdown-toggle {\n\t\tborder: 1px solid ${BASE_COLORS.grayscale[200]};\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 6px 8px;\n\t\tgap: 8px;\n\t\tbackground: ${(props) => props.bgColor};\n\t}\n\t.dropdown-menu {\n\t\tborder-radius: 3px;\n\t\tpadding: 0 0;\n\t}\n\t.sub--dropdown.btn-primary {\n\t\twidth: 100%;\n\t\tpadding: 0px;\n\t}\n\t.sub--dropdown {\n\t\tbutton:not(.date-picker-save-button-container button) {\n\t\t\tborder-radius: 0;\n\t\t\tmax-width: 100%;\n\t\t\tpadding: 10px 6.6667px;\n\t\t\tbackground: none;\n\t\t\ttext-align: center;\n\t\t\tline-height: 16px;\n\t\t\tborder: none;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t}\n`;\n\nexport const ItemMenuContainer = styled.div<{\n\tisSelected?: boolean;\n\tisLastItem?: boolean;\n\tisFirstItem?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-start;\n\tpadding: 12px 16px;\n\tgap: 4px;\n\tborder-bottom: ${(props) =>\n\t\tprops.isLastItem ? 'none' : `1px solid ${BASE_COLORS.grayscale[200]}`};\n\tmax-width: 240px;\n\tcursor: pointer;\n\tbackground-color: ${(props) =>\n\t\tprops.isSelected ? BASE_COLORS.positive[50] : BASE_COLORS.grayscale.white};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isSelected ? '' : BASE_COLORS.grayscale[50]};\n\t}\n\twidth: 100%;\n\tborder-top-left-radius: ${(props) => (props.isFirstItem ? '4px' : '0px')};\n\tborder-top-right-radius: ${(props) => (props.isFirstItem ? '4px' : '0px')};\n\tborder-bottom-left-radius: ${(props) => (props.isLastItem ? '4px' : '0px')};\n\tborder-bottom-right-radius: ${(props) => (props.isLastItem ? '4px' : '0px')};\n`;\n\nexport const AnalyticsTrendContainer = styled.div<{\n\tcard: boolean;\n}>`\n\tborder: ${(props) => (props.card ? 1 : 0)}px solid ${COLORS.background.base};\n\theight: 100%;\n\t${(props) =>\n\t\tprops.card\n\t\t\t? `\n\t\t\tbox-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);\n\t\t\tborder-radius: 8px;\n\t\t\tpadding: 16px 20px;`\n\t\t\t: ''}\n\t.icon--holder {\n\t\theight: 32px;\n\t\twidth: 32px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 5px;\n\t\tcursor: pointer;\n\t\t:hover {\n\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t}\n\t}\n`;\n\nexport const IconContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 32px;\n\theight: 32px;\n\tbackground-color: ${COLORS.background.brandLight};\n\tborder-radius: 4px;\n`;\n"],"names":["AnalyticsChipContainer","styled","props","AnalyticsMultiWrapper","MainDropdown","StyledDropdown","BASE_COLORS","ItemMenuContainer","AnalyticsTrendContainer","COLORS","IconContainer"],"mappings":"~~iOAIaA~~,EAAyBC,~~EAAO~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAU7BC,GAAUA,EAAM,eAAe;AAAA;AAAA,UAEpCA,GAAWA,EAAM,MAAQA,EAAM,MAAQ,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAchDC,EAAwBF,~~EAAO~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS/BG,EAAeH,~~EAAOI~~,gBAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAe3BC,EAAAA,YAAY,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAO/BJ,GAAUA,EAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyB3BK,EAAoBN,~~EAAO~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUrBC,GACjBA,EAAM,WAAa,OAAS,aAAaI,cAAY,UAAU,GAAG,CAAC,EAAE;AAAA;AAAA;AAAA,qBAGjDJ,GACpBA,EAAM,WAAaI,EAAAA,YAAY,SAAS,EAAE,EAAIA,EAAAA,YAAY,UAAU,KAAK;AAAA;AAAA,sBAEpDJ,GACpBA,EAAM,WAAa,GAAKI,cAAY,UAAU,EAAE,CAAC;AAAA;AAAA;AAAA,2BAGxBJ,GAAWA,EAAM,YAAc,MAAQ,KAAM;AAAA,4BAC5CA,GAAWA,EAAM,YAAc,MAAQ,KAAM;AAAA,8BAC3CA,GAAWA,EAAM,WAAa,MAAQ,KAAM;AAAA,+BAC3CA,GAAWA,EAAM,WAAa,MAAQ,KAAM;AAAA,EAG/DM,EAA0BP,~~EAAO~~;AAAA,WAGlCC,GAAWA,EAAM,KAAO,EAAI,CAAE,YAAYO,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA,GAExEP,GACFA,EAAM,KACH;AAAA;AAAA;AAAA,wBAIA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAUgBO,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,EAKhCC,EAAgBT,~~EAAO~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMfQ,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA"}
1	+ {"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/CommonStyles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport { StyledDropdown } from '../floating-action-button';\n\nexport const AnalyticsChipContainer = styled.div<{\n\tbackgroundColor?: string;\n\twidth?: string \| number;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: flex-start;\n\tpadding: 12px 16px;\n\tgap: 8px;\n\tbackground: ${(props) => props.backgroundColor};\n\tborder-radius: 8px;\n\twidth: ${(props) => (props.width ? props.width : '224.67px')};\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: initial;\n\tmin-height: 88px;\n\t.sub--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\tgap: 4px;\n\t\talign-items: baseline;\n\t}\n`;\n\nexport const AnalyticsMultiWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: flex-start;\n\tpadding: 0px;\n\tgap: 16px;\n\tflex-wrap: wrap;\n`;\n\nexport const MainDropdown = styled(StyledDropdown)<{\n\theight?: string;\n\tbgColor?: string;\n}>`\n\t.main--dropdown.dropdown-toggle::after {\n\t\tdisplay: unset !important;\n\t}\n\t.main--dropdown.dropdown-toggle::before {\n\t\tdisplay: unset !important;\n\t}\n\t.main--dropdown.btn-primary:hover,\n\t.main--dropdown.btn-primary:active,\n\t.main--dropdown.btn-primary:focus,\n\t.main--dropdown.btn-primary.dropdown-toggle,\n\t.main--dropdown.show > main--dropdown.btn-primary.dropdown-toggle {\n\t\tborder: 1px solid ${BASE_COLORS.grayscale[200]};\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 6px 8px;\n\t\tgap: 8px;\n\t\tbackground: ${(props) => props.bgColor};\n\t}\n\t.dropdown-menu {\n\t\tborder-radius: 3px;\n\t\tpadding: 0 0;\n\t}\n\t.sub--dropdown.btn-primary {\n\t\twidth: 100%;\n\t\tpadding: 0px;\n\t}\n\t.sub--dropdown {\n\t\tbutton:not(.date-picker-save-button-container button) {\n\t\t\tborder-radius: 0;\n\t\t\tmax-width: 100%;\n\t\t\tpadding: 10px 6.6667px;\n\t\t\tbackground: none;\n\t\t\ttext-align: center;\n\t\t\tline-height: 16px;\n\t\t\tborder: none;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t}\n`;\n\nexport const ItemMenuContainer = styled.div<{\n\tisSelected?: boolean;\n\tisLastItem?: boolean;\n\tisFirstItem?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-start;\n\tpadding: 12px 16px;\n\tgap: 4px;\n\tborder-bottom: ${(props) =>\n\t\tprops.isLastItem ? 'none' : `1px solid ${BASE_COLORS.grayscale[200]}`};\n\tmax-width: 240px;\n\tcursor: pointer;\n\tbackground-color: ${(props) =>\n\t\tprops.isSelected ? BASE_COLORS.positive[50] : BASE_COLORS.grayscale.white};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isSelected ? '' : BASE_COLORS.grayscale[50]};\n\t}\n\twidth: 100%;\n\tborder-top-left-radius: ${(props) => (props.isFirstItem ? '4px' : '0px')};\n\tborder-top-right-radius: ${(props) => (props.isFirstItem ? '4px' : '0px')};\n\tborder-bottom-left-radius: ${(props) => (props.isLastItem ? '4px' : '0px')};\n\tborder-bottom-right-radius: ${(props) => (props.isLastItem ? '4px' : '0px')};\n`;\n\nexport const AnalyticsTrendContainer = styled.div<{\n\tcard: boolean;\n}>`\n\tborder: ${(props) => (props.card ? 1 : 0)}px solid ${COLORS.background.base};\n\theight: 100%;\n\t${(props) =>\n\t\tprops.card\n\t\t\t? `\n\t\t\tbox-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);\n\t\t\tborder-radius: 8px;\n\t\t\tpadding: 16px 20px;`\n\t\t\t: ''}\n\t.icon--holder {\n\t\theight: 32px;\n\t\twidth: 32px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 5px;\n\t\tcursor: pointer;\n\t\t:hover {\n\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t}\n\t}\n`;\n\nexport const IconContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 32px;\n\theight: 32px;\n\tbackground-color: ${COLORS.background.brandLight};\n\tborder-radius: 4px;\n`;\n"],"names":["AnalyticsChipContainer","styled","props","AnalyticsMultiWrapper","MainDropdown","StyledDropdown","BASE_COLORS","ItemMenuContainer","AnalyticsTrendContainer","COLORS","IconContainer"],"mappings":"gSAIaA,EAAyBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAU7BC,GAAUA,EAAM,eAAe;AAAA;AAAA,UAEpCA,GAAWA,EAAM,MAAQA,EAAM,MAAQ,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAchDC,EAAwBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS/BG,EAAeH,EAAAA,QAAOI,gBAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAe3BC,EAAAA,YAAY,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAO/BJ,GAAUA,EAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyB3BK,EAAoBN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUrBC,GACjBA,EAAM,WAAa,OAAS,aAAaI,cAAY,UAAU,GAAG,CAAC,EAAE;AAAA;AAAA;AAAA,qBAGjDJ,GACpBA,EAAM,WAAaI,EAAAA,YAAY,SAAS,EAAE,EAAIA,EAAAA,YAAY,UAAU,KAAK;AAAA;AAAA,sBAEpDJ,GACpBA,EAAM,WAAa,GAAKI,cAAY,UAAU,EAAE,CAAC;AAAA;AAAA;AAAA,2BAGxBJ,GAAWA,EAAM,YAAc,MAAQ,KAAM;AAAA,4BAC5CA,GAAWA,EAAM,YAAc,MAAQ,KAAM;AAAA,8BAC3CA,GAAWA,EAAM,WAAa,MAAQ,KAAM;AAAA,+BAC3CA,GAAWA,EAAM,WAAa,MAAQ,KAAM;AAAA,EAG/DM,EAA0BP,EAAAA,QAAO;AAAA,WAGlCC,GAAWA,EAAM,KAAO,EAAI,CAAE,YAAYO,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA,GAExEP,GACFA,EAAM,KACH;AAAA;AAAA;AAAA,wBAIA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAUgBO,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,EAKhCC,EAAgBT,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMfQ,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA"}

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),c=require("chart.js"),m=require("chartjs-plugin-datalabels"),O=require("react-chartjs-2"),z=require("../../../TypographyStyle.js"),n=require("../../../../constants/Theme.js"),u=require("../utils/calcPercentage.js"),R=require("./HorizontalGraph.styles.js");c.Chart.register(c.CategoryScale,c.LinearScale,c.BarElement,c.Tooltip,m);const D=t=>{const x=[250,1e3,800,1500,300,600],b=t.stacked&&t.stackedDatasets&&t.stackedDatasets.length>0&&t.stackedDatasets.some(a=>a.data.some(o=>o!==0)),C=t.xAxis.data.findIndex(a=>a!==0)!==-1,i=!b&&!C,h={min:0,max:2e3,stepSize:t.xAxis.stepSize??200},S={indexAxis:"y",elements:{},responsive:!0,maintainAspectRatio:t.maintainAspectRatio,layout:{padding:{right:t.showTotal?50:0}},plugins:{legend:{display:!1},tooltip:{enabled:!i,callbacks:{label:t.xAxis.toolTipCallback,footer:t.tooltipConfig?.footerCallback},footerFont:t.tooltipConfig?.footerStyles?.footerFont},datalabels:{display:(!i&&t.showTotal)??!1,anchor:"end",align:"end",clamp:!0,formatter:(a,o)=>{const r=o.datasetIndex,e=o.chart.data.datasets;if(r!==e.length-1)return"";const l=o.dataIndex;let s=0;for(let g=0;g<e.length;g++)s+=e[g].data[l]??0;return s?t.isInternationalStore?u.truncateValueForInternationalStore(s):u.truncateValueForIndianStore(s):""},color:n.COLORS.content.secondary}},scales:{y:{stacked:t.stacked??!1,title:{display:!!t.yAxis.title,text:t.yAxis.title,color:t.yAxis.titleColor,font:{size:n.FONTS.caption.fontSize,color:t.yAxis.titleColor},padding:{bottom:10}},grid:{display:!1,borderColor:n.COLORS.background.base},ticks:{fontSize:n.FONTS.caption.fontSize,color:t.yAxis.labelColor??n.COLORS.content.secondary}},x:{stacked:t.stacked??!1,title:{display:!!t.xAxis.title,text:t.xAxis.title,color:t.xAxis.titleColor,font:{size:n.FONTS.caption.fontSize},padding:{top:10}},grid:{borderColor:"white",color:n.COLORS.background.base},ticks:{callback:t.xAxis.ticksCallback,fontSize:n.FONTS.caption.fontSize,color:t.xAxis.labelColor??n.COLORS.content.secondary,...i?h:{max:t.xAxis.max,stepSize:t.xAxis.stepSize}}}},onClick:(a,o)=>{if(o.length>0&&t.onBarClick){const r=o[0].index;t.onBarClick(r)}}},f=a=>{const r=a.chart.ctx.createLinearGradient(0,0,0,200);let e="";if(i)e="rgba(0,0,0,0)";else if(t.barColorRGBA){const l=t.barColorRGBA;e=`rgba(${l.r}, ${l.g}, ${l.b}, ${l.a??"0.3"})`}return r.addColorStop(0,e||"rgba(146, 96, 237, 0.3)"),r.addColorStop(1,e||"rgba(146, 96, 237, 0.3)"),r},k=()=>i?"rgba(0,0,0,0)":t.barColors&&t.barColors.length>0?t.barColors:a=>f(a),y=()=>t.stacked&&t.stackedDatasets&&t.stackedDatasets.length>0?t.stackedDatasets.map(a=>({label:a.label||"",data:i?x:a.data,backgroundColor:a.backgroundColor,barPercentage:.4,categoryPercentage:1,borderRadius:4})):[{data:i?x:t.xAxis.data,backgroundColor:k(),barPercentage:.4,categoryPercentage:1,borderRadius:4}],A={labels:t.yAxis.data.map(a=>a.toString()),datasets:y()};return d.jsxs(R.GraphContainerWrapper,{padding:t.outerPadding,skipOuterLayout:t.skipOuterLayout,children:[t.chartHeading&&d.jsx(z.TitleRegular,{color:t.chartHeading.color??n.COLORS.content.secondary,children:t.chartHeading.heading}),d.jsx("div",{style:{height:t.maintainAspectRatio?void 0:t.graphCanvasHeight??500},children:d.jsx(O.Bar,{options:S,data:A})})]})};exports.HorizontalGraph=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),c=require("chart.js"),m=require("chartjs-plugin-datalabels"),O=require("react-chartjs-2"),z=require("../../../TypographyStyle.js"),n=require("../../../../constants/Theme.js"),x=require("../utils/calcPercentage.js"),R=require("./HorizontalGraph.styles.js"),D=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},L=D(m);c.Chart.register(c.CategoryScale,c.LinearScale,c.BarElement,c.Tooltip,L.default);const T=t=>{const u=[250,1e3,800,1500,300,600],b=t.stacked&&t.stackedDatasets&&t.stackedDatasets.length>0&&t.stackedDatasets.some(a=>a.data.some(o=>o!==0)),C=t.xAxis.data.findIndex(a=>a!==0)!==-1,i=!b&&!C,f={min:0,max:2e3,stepSize:t.xAxis.stepSize??200},h={indexAxis:"y",elements:{},responsive:!0,maintainAspectRatio:t.maintainAspectRatio,layout:{padding:{right:t.showTotal?50:0}},plugins:{legend:{display:!1},tooltip:{enabled:!i,callbacks:{label:t.xAxis.toolTipCallback,footer:t.tooltipConfig?.footerCallback},footerFont:t.tooltipConfig?.footerStyles?.footerFont},datalabels:{display:(!i&&t.showTotal)??!1,anchor:"end",align:"end",clamp:!0,formatter:(a,o)=>{const r=o.datasetIndex,e=o.chart.data.datasets;if(r!==e.length-1)return"";const l=o.dataIndex;let s=0;for(let g=0;g<e.length;g++)s+=e[g].data[l]??0;return s?t.isInternationalStore?x.truncateValueForInternationalStore(s):x.truncateValueForIndianStore(s):""},color:n.COLORS.content.secondary}},scales:{y:{stacked:t.stacked??!1,title:{display:!!t.yAxis.title,text:t.yAxis.title,color:t.yAxis.titleColor,font:{size:n.FONTS.caption.fontSize,color:t.yAxis.titleColor},padding:{bottom:10}},grid:{display:!1,borderColor:n.COLORS.background.base},ticks:{fontSize:n.FONTS.caption.fontSize,color:t.yAxis.labelColor??n.COLORS.content.secondary}},x:{stacked:t.stacked??!1,title:{display:!!t.xAxis.title,text:t.xAxis.title,color:t.xAxis.titleColor,font:{size:n.FONTS.caption.fontSize},padding:{top:10}},grid:{borderColor:"white",color:n.COLORS.background.base},ticks:{callback:t.xAxis.ticksCallback,fontSize:n.FONTS.caption.fontSize,color:t.xAxis.labelColor??n.COLORS.content.secondary,...i?f:{max:t.xAxis.max,stepSize:t.xAxis.stepSize}}}},onClick:(a,o)=>{if(o.length>0&&t.onBarClick){const r=o[0].index;t.onBarClick(r)}}},S=a=>{const r=a.chart.ctx.createLinearGradient(0,0,0,200);let e="";if(i)e="rgba(0,0,0,0)";else if(t.barColorRGBA){const l=t.barColorRGBA;e=`rgba(${l.r}, ${l.g}, ${l.b}, ${l.a??"0.3"})`}return r.addColorStop(0,e||"rgba(146, 96, 237, 0.3)"),r.addColorStop(1,e||"rgba(146, 96, 237, 0.3)"),r},y=()=>i?"rgba(0,0,0,0)":t.barColors&&t.barColors.length>0?t.barColors:a=>S(a),k=()=>t.stacked&&t.stackedDatasets&&t.stackedDatasets.length>0?t.stackedDatasets.map(a=>({label:a.label||"",data:i?u:a.data,backgroundColor:a.backgroundColor,barPercentage:.4,categoryPercentage:1,borderRadius:4})):[{data:i?u:t.xAxis.data,backgroundColor:y(),barPercentage:.4,categoryPercentage:1,borderRadius:4}],A={labels:t.yAxis.data.map(a=>a.toString()),datasets:k()};return d.jsxs(R.GraphContainerWrapper,{padding:t.outerPadding,skipOuterLayout:t.skipOuterLayout,children:[t.chartHeading&&d.jsx(z.TitleRegular,{color:t.chartHeading.color??n.COLORS.content.secondary,children:t.chartHeading.heading}),d.jsx("div",{style:{height:t.maintainAspectRatio?void 0:t.graphCanvasHeight??500},children:d.jsx(O.Bar,{options:h,data:A})})]})};exports.HorizontalGraph=T;
 //# sourceMappingURL=HorizontalGraph.js.map

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.tsx"],"sourcesContent":["import {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport React from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from '../utils/calcPercentage';\nimport { HorizontalGraphI } from './HorizontalGraph.d';\nimport { GraphContainerWrapper } from './HorizontalGraph.styles';\n\nChartJS.register(\n\tCategoryScale,\n\tLinearScale,\n\tBarElement,\n\tTooltip,\n\tChartDataLabels,\n);\n\nexport const HorizontalGraph: React.FC<HorizontalGraphI> = (props) => {\n\tconst dummyValues = [250, 1000, 800, 1500, 300, 600];\n\n\t// Check if data is present - consider both regular xAxis data and stacked datasets\n\tconst hasStackedData =\n\t\tprops.stacked &&\n\t\tprops.stackedDatasets &&\n\t\tprops.stackedDatasets.length > 0 &&\n\t\tprops.stackedDatasets.some((ds) => ds.data.some((val) => val !== 0));\n\n\tconst hasXAxisData = props.xAxis.data.findIndex((ele) => ele !== 0) !== -1;\n\n\tconst noDataPresent = !hasStackedData && !hasXAxisData;\n\tconst xAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: props.xAxis.stepSize ?? 200,\n\t};\n\tconst options = {\n\t\tindexAxis: 'y' as const,\n\t\telements: {},\n\t\tresponsive: true,\n\t\tmaintainAspectRatio: props.maintainAspectRatio,\n\t\tlayout: {\n\t\t\tpadding: {\n\t\t\t\tright: props.showTotal ? 50 : 0,\n\t\t\t},\n\t\t},\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresent,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.xAxis.toolTipCallback,\n\t\t\t\t\tfooter: props.tooltipConfig?.footerCallback,\n\t\t\t\t},\n\t\t\t\tfooterFont: props.tooltipConfig?.footerStyles?.footerFont,\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: (!noDataPresent && props.showTotal) ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tformatter: (_, context) => {\n\t\t\t\t\tconst datasetIndex = context.datasetIndex;\n\t\t\t\t\tconst datasets = context.chart.data.datasets;\n\t\t\t\t\tif (datasetIndex !== datasets.length - 1) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\tconst dataIndex = context.dataIndex;\n\t\t\t\t\tlet sum = 0;\n\t\t\t\t\tfor (let i = 0; i < datasets.length; i++) {\n\t\t\t\t\t\tsum += datasets[i].data[dataIndex] ?? 0;\n\t\t\t\t\t}\n\t\t\t\t\tif (!sum) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\treturn props.isInternationalStore\n\t\t\t\t\t\t? truncateValueForInternationalStore(sum)\n\t\t\t\t\t\t: truncateValueForIndianStore(sum);\n\t\t\t\t},\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\ty: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.yAxis.title,\n\t\t\t\t\ttext: props.yAxis.title,\n\t\t\t\t\tcolor: props.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize, color: props.yAxis.titleColor },\n\t\t\t\t\tpadding: { bottom: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\tx: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.xAxis.title,\n\t\t\t\t\ttext: props.xAxis.title,\n\t\t\t\t\tcolor: props.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t\tpadding: { top: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.xAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresent\n\t\t\t\t\t\t? xAxisConfigForNoData\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tmax: props.xAxis.max,\n\t\t\t\t\t\t\t\tstepSize: props.xAxis.stepSize,\n\t\t\t\t\t\t }),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tonClick: (_event: any, elements: any[]) => {\n\t\t\tif (elements.length > 0 && props.onBarClick) {\n\t\t\t\tconst index = elements[0].index;\n\t\t\t\tprops.onBarClick(index);\n\t\t\t}\n\t\t},\n\t} as any;\n\n\tconst getColorSpectrum = (context) => {\n\t\tconst ctx = context.chart.ctx;\n\t\tconst gradient = ctx.createLinearGradient(0, 0, 0, 200);\n\t\tlet rgbaColor = '';\n\t\tif (noDataPresent) {\n\t\t\trgbaColor = 'rgba(0,0,0,0)';\n\t\t} else if (props.barColorRGBA) {\n\t\t\tconst rgb = props.barColorRGBA;\n\t\t\trgbaColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a ?? '0.3'})`;\n\t\t}\n\n\t\tgradient.addColorStop(0, rgbaColor ? rgbaColor : 'rgba(146, 96, 237, 0.3)');\n\t\tgradient.addColorStop(1, rgbaColor ? rgbaColor : `rgba(146, 96, 237, 0.3)`);\n\n\t\treturn gradient;\n\t};\n\n\t// Get background color - supports per-bar colors via barColors array\n\tconst getBackgroundColor = () => {\n\t\tif (noDataPresent) {\n\t\t\treturn 'rgba(0,0,0,0)';\n\t\t}\n\t\t// If barColors array is provided, use it for per-bar coloring\n\t\tif (props.barColors && props.barColors.length > 0) {\n\t\t\treturn props.barColors;\n\t\t}\n\t\t// Fallback to single color via getColorSpectrum\n\t\treturn (context) => getColorSpectrum(context);\n\t};\n\n\t// Build datasets - support stacked datasets if provided\n\tconst buildDatasets = () => {\n\t\tif (\n\t\t\tprops.stacked &&\n\t\t\tprops.stackedDatasets &&\n\t\t\tprops.stackedDatasets.length > 0\n\t\t) {\n\t\t\treturn props.stackedDatasets.map((dataset) => ({\n\t\t\t\tlabel: dataset.label \|\| '',\n\t\t\t\tdata: noDataPresent ? dummyValues : dataset.data,\n\t\t\t\tbackgroundColor: dataset.backgroundColor,\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t}));\n\t\t}\n\t\t// Default single dataset\n\t\treturn [\n\t\t\t{\n\t\t\t\tdata: noDataPresent ? dummyValues : props.xAxis.data,\n\t\t\t\tbackgroundColor: getBackgroundColor(),\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t];\n\t};\n\n\tconst data = {\n\t\tlabels: props.yAxis.data.map((d) => d.toString()),\n\t\tdatasets: buildDatasets(),\n\t};\n\treturn (\n\t\t<GraphContainerWrapper\n\t\t\tpadding={props.outerPadding}\n\t\t\tskipOuterLayout={props.skipOuterLayout}\n\t\t>\n\t\t\t{props.chartHeading && (\n\t\t\t\t<TitleRegular\n\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t>\n\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t</TitleRegular>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: props.maintainAspectRatio\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: props.graphCanvasHeight ?? 500,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Bar options={options} data={data} />\n\t\t\t</div>\n\t\t</GraphContainerWrapper>\n\t);\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","BarElement","Tooltip","ChartDataLabels","HorizontalGraph","props","dummyValues","hasStackedData","ds","val","hasXAxisData","ele","noDataPresent","xAxisConfigForNoData","options","_","context","datasetIndex","datasets","dataIndex","sum","i","truncateValueForInternationalStore","truncateValueForIndianStore","COLORS","FONTS","_event","elements","index","getColorSpectrum","gradient","rgbaColor","rgb","getBackgroundColor","buildDatasets","dataset","data","d","jsxs","GraphContainerWrapper","jsx","TitleRegular","Bar"],"mappings":"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"}
1	+ {"version":3,"file":"HorizontalGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.tsx"],"sourcesContent":["import {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport React from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from '../utils/calcPercentage';\nimport { HorizontalGraphI } from './HorizontalGraph.d';\nimport { GraphContainerWrapper } from './HorizontalGraph.styles';\n\nChartJS.register(\n\tCategoryScale,\n\tLinearScale,\n\tBarElement,\n\tTooltip,\n\tChartDataLabels,\n);\n\nexport const HorizontalGraph: React.FC<HorizontalGraphI> = (props) => {\n\tconst dummyValues = [250, 1000, 800, 1500, 300, 600];\n\n\t// Check if data is present - consider both regular xAxis data and stacked datasets\n\tconst hasStackedData =\n\t\tprops.stacked &&\n\t\tprops.stackedDatasets &&\n\t\tprops.stackedDatasets.length > 0 &&\n\t\tprops.stackedDatasets.some((ds) => ds.data.some((val) => val !== 0));\n\n\tconst hasXAxisData = props.xAxis.data.findIndex((ele) => ele !== 0) !== -1;\n\n\tconst noDataPresent = !hasStackedData && !hasXAxisData;\n\tconst xAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: props.xAxis.stepSize ?? 200,\n\t};\n\tconst options = {\n\t\tindexAxis: 'y' as const,\n\t\telements: {},\n\t\tresponsive: true,\n\t\tmaintainAspectRatio: props.maintainAspectRatio,\n\t\tlayout: {\n\t\t\tpadding: {\n\t\t\t\tright: props.showTotal ? 50 : 0,\n\t\t\t},\n\t\t},\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresent,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.xAxis.toolTipCallback,\n\t\t\t\t\tfooter: props.tooltipConfig?.footerCallback,\n\t\t\t\t},\n\t\t\t\tfooterFont: props.tooltipConfig?.footerStyles?.footerFont,\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: (!noDataPresent && props.showTotal) ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tformatter: (_, context) => {\n\t\t\t\t\tconst datasetIndex = context.datasetIndex;\n\t\t\t\t\tconst datasets = context.chart.data.datasets;\n\t\t\t\t\tif (datasetIndex !== datasets.length - 1) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\tconst dataIndex = context.dataIndex;\n\t\t\t\t\tlet sum = 0;\n\t\t\t\t\tfor (let i = 0; i < datasets.length; i++) {\n\t\t\t\t\t\tsum += datasets[i].data[dataIndex] ?? 0;\n\t\t\t\t\t}\n\t\t\t\t\tif (!sum) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\treturn props.isInternationalStore\n\t\t\t\t\t\t? truncateValueForInternationalStore(sum)\n\t\t\t\t\t\t: truncateValueForIndianStore(sum);\n\t\t\t\t},\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\ty: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.yAxis.title,\n\t\t\t\t\ttext: props.yAxis.title,\n\t\t\t\t\tcolor: props.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize, color: props.yAxis.titleColor },\n\t\t\t\t\tpadding: { bottom: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\tx: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.xAxis.title,\n\t\t\t\t\ttext: props.xAxis.title,\n\t\t\t\t\tcolor: props.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t\tpadding: { top: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.xAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresent\n\t\t\t\t\t\t? xAxisConfigForNoData\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tmax: props.xAxis.max,\n\t\t\t\t\t\t\t\tstepSize: props.xAxis.stepSize,\n\t\t\t\t\t\t }),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tonClick: (_event: any, elements: any[]) => {\n\t\t\tif (elements.length > 0 && props.onBarClick) {\n\t\t\t\tconst index = elements[0].index;\n\t\t\t\tprops.onBarClick(index);\n\t\t\t}\n\t\t},\n\t} as any;\n\n\tconst getColorSpectrum = (context) => {\n\t\tconst ctx = context.chart.ctx;\n\t\tconst gradient = ctx.createLinearGradient(0, 0, 0, 200);\n\t\tlet rgbaColor = '';\n\t\tif (noDataPresent) {\n\t\t\trgbaColor = 'rgba(0,0,0,0)';\n\t\t} else if (props.barColorRGBA) {\n\t\t\tconst rgb = props.barColorRGBA;\n\t\t\trgbaColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a ?? '0.3'})`;\n\t\t}\n\n\t\tgradient.addColorStop(0, rgbaColor ? rgbaColor : 'rgba(146, 96, 237, 0.3)');\n\t\tgradient.addColorStop(1, rgbaColor ? rgbaColor : `rgba(146, 96, 237, 0.3)`);\n\n\t\treturn gradient;\n\t};\n\n\t// Get background color - supports per-bar colors via barColors array\n\tconst getBackgroundColor = () => {\n\t\tif (noDataPresent) {\n\t\t\treturn 'rgba(0,0,0,0)';\n\t\t}\n\t\t// If barColors array is provided, use it for per-bar coloring\n\t\tif (props.barColors && props.barColors.length > 0) {\n\t\t\treturn props.barColors;\n\t\t}\n\t\t// Fallback to single color via getColorSpectrum\n\t\treturn (context) => getColorSpectrum(context);\n\t};\n\n\t// Build datasets - support stacked datasets if provided\n\tconst buildDatasets = () => {\n\t\tif (\n\t\t\tprops.stacked &&\n\t\t\tprops.stackedDatasets &&\n\t\t\tprops.stackedDatasets.length > 0\n\t\t) {\n\t\t\treturn props.stackedDatasets.map((dataset) => ({\n\t\t\t\tlabel: dataset.label \|\| '',\n\t\t\t\tdata: noDataPresent ? dummyValues : dataset.data,\n\t\t\t\tbackgroundColor: dataset.backgroundColor,\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t}));\n\t\t}\n\t\t// Default single dataset\n\t\treturn [\n\t\t\t{\n\t\t\t\tdata: noDataPresent ? dummyValues : props.xAxis.data,\n\t\t\t\tbackgroundColor: getBackgroundColor(),\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t];\n\t};\n\n\tconst data = {\n\t\tlabels: props.yAxis.data.map((d) => d.toString()),\n\t\tdatasets: buildDatasets(),\n\t};\n\treturn (\n\t\t<GraphContainerWrapper\n\t\t\tpadding={props.outerPadding}\n\t\t\tskipOuterLayout={props.skipOuterLayout}\n\t\t>\n\t\t\t{props.chartHeading && (\n\t\t\t\t<TitleRegular\n\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t>\n\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t</TitleRegular>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: props.maintainAspectRatio\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: props.graphCanvasHeight ?? 500,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Bar options={options} data={data} />\n\t\t\t</div>\n\t\t</GraphContainerWrapper>\n\t);\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","BarElement","Tooltip","ChartDataLabels","HorizontalGraph","props","dummyValues","hasStackedData","ds","val","hasXAxisData","ele","noDataPresent","xAxisConfigForNoData","options","_","context","datasetIndex","datasets","dataIndex","sum","i","truncateValueForInternationalStore","truncateValueForIndianStore","COLORS","FONTS","_event","elements","index","getColorSpectrum","gradient","rgbaColor","rgb","getBackgroundColor","buildDatasets","dataset","data","d","jsxs","GraphContainerWrapper","jsx","TitleRegular","Bar"],"mappings":"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"}

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),a=require("../../../../constants/Theme.js"),t=e.div`
-	background-color: ${r=>r.skipOuterLayout?"transparent":a.COLORS.surface.standard};
-	padding: ${r=>r.padding??"24px"};
-`;exports.GraphContainerWrapper=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),r=require("../../../../constants/Theme.js"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},n=a(e),o=n.default.div`
+	background-color: ${t=>t.skipOuterLayout?"transparent":r.COLORS.surface.standard};
+	padding: ${t=>t.padding??"24px"};
+`;exports.GraphContainerWrapper=o;
 //# sourceMappingURL=HorizontalGraph.styles.js.map

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalGraph.styles.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const GraphContainerWrapper = styled.div<{\n\tpadding?: string;\n\tskipOuterLayout?: boolean;\n}>`\n\tbackground-color: ${(props) =>\n\t\tprops.skipOuterLayout ? 'transparent' : COLORS.surface.standard};\n\tpadding: ${(props) => props.padding ?? '24px'};\n`;\n"],"names":["GraphContainerWrapper","styled","props","COLORS"],"mappings":"~~iKAGaA~~,EAAwBC,~~EAAO~~;AAAA,qBAItBC,GACpBA,EAAM,gBAAkB,cAAgBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA,YACpDD,GAAUA,EAAM,SAAW,MAAM;AAAA"}
1	+ {"version":3,"file":"HorizontalGraph.styles.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const GraphContainerWrapper = styled.div<{\n\tpadding?: string;\n\tskipOuterLayout?: boolean;\n}>`\n\tbackground-color: ${(props) =>\n\t\tprops.skipOuterLayout ? 'transparent' : COLORS.surface.standard};\n\tpadding: ${(props) => props.padding ?? '24px'};\n`;\n"],"names":["GraphContainerWrapper","styled","props","COLORS"],"mappings":"gOAGaA,EAAwBC,EAAAA,QAAO;AAAA,qBAItBC,GACpBA,EAAM,gBAAkB,cAAgBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA,YACpDD,GAAUA,EAAM,SAAW,MAAM;AAAA"}

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/LazyCharts.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),t=r.lazy(()=>Promise.resolve().then(()=>require("./VerticalBarGraph/VerticalGraph.js")).then(e=>({default:e.VerticalGraph})));exports.LazyVerticalGraph=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},r=a(e),l=r.default.lazy(()=>Promise.resolve().then(()=>require("./VerticalBarGraph/VerticalGraph.js")).then(t=>({default:t.VerticalGraph})));exports.LazyVerticalGraph=l;
 //# sourceMappingURL=LazyCharts.js.map