@bikdotai/bik-component-library 0.0.640-beta.help-attr.11 → 0.0.640-beta.help-attr.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js +1 -1
- package/dist/cjs/components/bik-layout/MockMenus.d.ts +1 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js +1 -1
- package/dist/esm/components/bik-layout/MockMenus.d.ts +1 -0
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),i=require("../../utils/DateUtils.js"),r=require("../../constants/Theme.js"),s=require("../../assets/icons/arrow_down.svg.js"),a=require("../../assets/icons/arrow_up.svg.js"),l=require("../../assets/icons/info.svg.js"),o=require("../tag/Tag.js"),c=require("../tooltips/Tooltip.js"),d=require("../TypographyStyle.js"),g=require("./chart/utils/calcPercentage.js"),u=require("./CommonStyles.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y=h(t);const m=n=>{let{percent:l,direction:o,timeline:c,customRange:u,trendRaw:h,prefixSymbol:y,trendIconStyle:m,isInternationalStore:p}=n;const j="negative"===o?s.default:a.default,x="negative"===o?r.COLORS.background.negative.vibrant:"positive"===o?r.COLORS.background.positive.vibrant:r.COLORS.content.placeholder,[b
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),i=require("../../utils/DateUtils.js"),r=require("../../constants/Theme.js"),s=require("../../assets/icons/arrow_down.svg.js"),a=require("../../assets/icons/arrow_up.svg.js"),l=require("../../assets/icons/info.svg.js"),o=require("../tag/Tag.js"),c=require("../tooltips/Tooltip.js"),d=require("../TypographyStyle.js"),g=require("./chart/utils/calcPercentage.js"),u=require("./CommonStyles.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y=h(t);const m=n=>{let{percent:l,direction:o,timeline:c,customRange:u,trendRaw:h,prefixSymbol:y,trendIconStyle:m,isInternationalStore:p}=n;const j="negative"===o?s.default:a.default,x="negative"===o?r.COLORS.background.negative.vibrant:"positive"===o?r.COLORS.background.positive.vibrant:r.COLORS.content.placeholder,[f,b]=t.useState("");t.useEffect((()=>{b("today"===c?"vs yesterday":"yesterday"===c?"vs 1 day before":"7 days"===c?"vs last 7 days":"30 days"===c?"vs last 30 days":"custom"===c&&u?i.default.getAnalyticsCustomDateTimelineText(u):"")}),[c,u]);const S=()=>{const e=((null!=h?h:0)>0?"+":"")+(null!=y?y:"");return void 0===h?"--":`${null!=e?e:""}${O()}`},O=()=>{let e="--";if(h)return e=String(p?g.truncateValueForInternationalStore(Math.abs(h)):g.truncateValueForIndianStore(Math.abs(h))),h<0?"-"+e:e},[v,C]=t.useState(S());return t.useEffect((()=>{C(S())}),[h]),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"}},{children:["number"==typeof l&&e.jsx(j,{color:x,height:16,width:16,style:Object.assign({marginRight:2},null!=m?m:{})}),"number"==typeof l&&o&&e.jsxs(d.Caption,Object.assign({style:{color:x}},{children:["neutral"===o?0:l<1e3?l:">999","%"]})),!!h&&e.jsx(d.Caption,Object.assign({style:{marginLeft:4,color:r.COLORS.content.placeholder}},{children:`(${v})`})),c&&e.jsx(d.Caption,Object.assign({style:{marginLeft:4,color:r.COLORS.content.placeholder}},{children:f}))]}))};exports.AnalyticsTrend=t=>{let{title:i,value:s,trendPercent:a,type:h="horizontal",timeline:p,customRange:j,tooltip:x,card:f=!0,rightSeparator:b=!1,size:S="big",share:O=!1,formatVal:v,prefixSymbol:C,trailingIcon:T,onTrailIconClick:R,iconTooltipBody:w,funnelPercent:I,isLoading:$,trendRaw:L,suffixText:q,trendStyle:D,trendContainerStyle:F,trendIconStyle:M,containerStyle:k,prevTrendDiff:P,relativePercentageDiff:V,isInternationalStore:z}=t;const _="big"===S?d.TitleLarge:d.TitleMedium,A=void 0!==a?a<0?"negative":0===a?"neutral":"positive":void 0,E=void 0!==a?O?Math.round(a):Math.abs(Math.round(a)):void 0;return e.jsx(u.AnalyticsTrendContainer,Object.assign({card:f,style:Object.assign({},k)},{children:e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:4,borderRightWidth:b?1:0,borderRightColor:r.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:f?0:24,paddingRight:f?0:24,height:"100%",justifyContent:"space-between",alignItems:"center"},null!=F?F:{})},{children:[e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"column",gap:4,height:"100%"},null!=D?D:{})},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e.jsx(d.BodyCaption,Object.assign({style:{color:r.COLORS.content.secondary}},{children:i})),x&&e.jsx(c.Tooltip,Object.assign({body:x,placement:"right",width:300},{children:e.jsx("div",Object.assign({style:{display:"flex",cursor:"pointer",height:"100%"}},{children:e.jsx(l.default,{color:r.COLORS.content.primary,height:16,width:16})}))}))]})),e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},O?{justifyContent:"space-between"}:{})},{children:[$&&e.jsx(n.ShimmerComponentStyled,{width:108,height:26}),!$&&e.jsx(_,Object.assign({style:{color:r.COLORS.content.primary}},{children:void 0===s?"--":"number"==typeof s&&v?s>999?z?`${null!=C?C:""}${g.truncateValueForInternationalStore(s)} ${null!=q?q:""}`:`${null!=C?C:""}${g.truncateValueForIndianStore(s)} ${null!=q?q:""}`:`${null!=C?C:""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(s)} ${null!=q?q:""}`:`${null!=C?C:""}${s} ${null!=q?q:""}`})),"number"==typeof V&&e.jsx(o.Tag,{tagText:`${V}%`,theme:"light",type:"neutral"}),"horizontal"===h&&!$&&!O&&e.jsx(m,{timeline:p,customRange:j,percent:E,direction:A,trendRaw:L,prefixSymbol:C,trendIconStyle:M,isInternationalStore:z}),$&&!O&&"horizontal"===h&&e.jsx(n.ShimmerComponentStyled,{height:20,width:141,marginTop:6}),"vertical"===h&&!$&&void 0!==I&&e.jsx(o.Tag,{tagText:`${I} %`,theme:"light",type:"neutral"}),O&&!$&&void 0!==E&&e.jsx(o.Tag,{tagText:`${E} %`,theme:"light",type:"neutral"}),O||$||!P||0==P?e.jsx(e.Fragment,{}):e.jsx(o.Tag,{tagText:(e=>{const t=Math.abs(e);return t%1!=0?`${t.toFixed(1)} %`:`${t} %`})(P),theme:"light",type:"neutral"})]})),"vertical"===h&&!$&&!O&&e.jsx("div",Object.assign({style:{marginTop:10}},{children:e.jsx(m,{timeline:p,customRange:j,percent:E,direction:A,trendRaw:L,prefixSymbol:C,trendIconStyle:M,isInternationalStore:z})})),$&&"vertical"===h&&e.jsx(n.ShimmerComponentStyled,{height:20,width:141,marginTop:6})]})),w&&!$&&e.jsx(c.Tooltip,Object.assign({body:w,placement:"right"},{children:T&&e.jsx("div",Object.assign({className:"icon--holder",onClick:R},{children:y.default.createElement(T,{height:20,width:20,color:r.COLORS.content.secondary})}))}))]}))}))};
|
package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../../../assets/icons/ChartBar.svg.js"),i=require("../../../../assets/icons/ChartPie.svg.js"),o=require("../../../../assets/icons/maximize.svg.js"),a=require("chart.js"),l=require("react"),s=require("react-chartjs-2"),n=require("../Pie/PieChartAnalytics.js"),r=require("../../../icon-button/IconButton.js"),d=require("../../../modals/styledModal.js"),c=require("../../../TypographyStyle.js"),p=require("../../../../constants/Theme.js"),u=require("./VerticalGraph.styles.js");a.Chart.register(a.CategoryScale,a.LinearScale,a.BarElement,a.Tooltip);exports.VerticalGraph=a=>{var x,g,v,b,y,
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../../../assets/icons/ChartBar.svg.js"),i=require("../../../../assets/icons/ChartPie.svg.js"),o=require("../../../../assets/icons/maximize.svg.js"),a=require("chart.js"),l=require("react"),s=require("react-chartjs-2"),n=require("../Pie/PieChartAnalytics.js"),r=require("../../../icon-button/IconButton.js"),d=require("../../../modals/styledModal.js"),c=require("../../../TypographyStyle.js"),p=require("../../../../constants/Theme.js"),u=require("./VerticalGraph.styles.js");a.Chart.register(a.CategoryScale,a.LinearScale,a.BarElement,a.Tooltip);exports.VerticalGraph=a=>{var x,g,v,b,h,y,C,S,A,f,j,O,k,m,z,$,D,T,R,P,q,B,F,L;const[I,N]=l.useState(!1),[H,w]=l.useState(!1),[E,G]=l.useState();l.useEffect((()=>{var t;const e=[];H&&(null===(t=a.popupData)||void 0===t||t.xAxis.data.forEach(((t,i)=>{var o;e.push({name:t.toString(),count:Number(null===(o=a.popupData)||void 0===o?void 0:o.yAxis.data[i])||0})})),G(e))}),[H,null===(x=a.popupData)||void 0===x?void 0:x.xAxis.data,null===(g=a.popupData)||void 0===g?void 0:g.yAxis.data]);const M=[250,1e3,800,1500,300,600],V=-1===a.yAxis.data.findIndex((t=>0!==t)),_=-1===(null===(v=a.popupData)||void 0===v?void 0:v.yAxis.data.findIndex((t=>0!==t))),W={min:0,max:2e3,stepSize:200},J={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!V,callbacks:{label:a.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!a.xAxis.title,text:a.xAxis.title,color:a.xAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{display:!1,borderColor:p.COLORS.background.base},ticks:{fontSize:p.FONTS.caption.fontSize,color:null!==(b=a.yAxis.labelColor)&&void 0!==b?b:p.COLORS.content.secondary}},y:{title:{display:!!a.yAxis.title,text:a.yAxis.title,color:a.yAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{borderColor:"white",color:p.COLORS.background.base},ticks:Object.assign({callback:a.yAxis.ticksCallback,fontSize:p.FONTS.caption.fontSize,color:null!==(h=a.xAxis.labelColor)&&void 0!==h?h:p.COLORS.content.secondary},V?W:{})}},maintainAspectRatio:!1},K={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!_,callbacks:{label:a.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!(null===(y=a.popupData)||void 0===y?void 0:y.xAxis.title),text:null===(C=a.popupData)||void 0===C?void 0:C.xAxis.title,color:null===(S=a.popupData)||void 0===S?void 0:S.xAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{display:!1,borderColor:p.COLORS.background.base},ticks:{fontSize:p.FONTS.caption.fontSize,color:null!==(f=null===(A=a.popupData)||void 0===A?void 0:A.yAxis.labelColor)&&void 0!==f?f:p.COLORS.content.secondary}},y:{title:{display:!!(null===(j=a.popupData)||void 0===j?void 0:j.yAxis.title),text:null===(O=a.popupData)||void 0===O?void 0:O.yAxis.title,color:null===(k=a.popupData)||void 0===k?void 0:k.yAxis.titleColor,font:{size:p.FONTS.caption.fontSize}},grid:{borderColor:"white",color:p.COLORS.background.base},ticks:Object.assign({callback:null===(m=a.popupData)||void 0===m?void 0:m.yAxis.ticksCallback,fontSize:p.FONTS.caption.fontSize,color:null!==($=null===(z=a.popupData)||void 0===z?void 0:z.xAxis.labelColor)&&void 0!==$?$:p.COLORS.content.secondary},_?W:{})}},maintainAspectRatio:!1},Q={labels:a.xAxis.data.map((t=>t.toString())),datasets:[{data:V?M:a.yAxis.data,backgroundColor:t=>{var e;const i=a.barColorRGBA;let o=[];const l=a.xAxis.data.length;if(V)return"rgba(0,0,0,0)";if(a.isFunnel){let t=+(l>10?.1:(1/l).toFixed(2));const e=`rgba(${i.r}, ${i.g}, ${i.b}`;for(let i=1;i<l+1;i++){let a="";i>10?a=`${e},1)`:(a=`${e},${t})`,t+=.1),o.push(a)}}else{const t=`rgba(${i.r}, ${i.g}, ${i.b}, ${null!==(e=i.a)&&void 0!==e?e:"1"})`;o=Array(l).fill(t)}return o},barPercentage:.4,categoryPercentage:1,borderRadius:4}]},U={labels:null===(D=a.popupData)||void 0===D?void 0:D.xAxis.data.map((t=>t.toString())),datasets:[{data:_?M:null===(T=a.popupData)||void 0===T?void 0:T.yAxis.data,backgroundColor:t=>{var e,i;const o=a.barColorRGBA;let l=[];const s=(null===(e=a.popupData)||void 0===e?void 0:e.xAxis.data.length)||0;if(V)return"rgba(0,0,0,0)";if(a.isFunnel){let t=+(s>10?.1:(1/s).toFixed(2));const e=`rgba(${o.r}, ${o.g}, ${o.b}`;for(let i=1;i<s+1;i++){let o="";i>10?o=`${e},1)`:(o=`${e},${t})`,t+=.1),l.push(o)}}else{const t=`rgba(${o.r}, ${o.g}, ${o.b}, ${null!==(i=o.a)&&void 0!==i?i:"1"})`;l=Array(s).fill(t)}return l},barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return t.jsxs(u.GraphContainerWrapper,Object.assign({padding:a.outerPadding},{children:[a.chartHeading&&t.jsx("div",Object.assign({style:{marginBottom:24}},{children:t.jsx(c.TitleMedium,Object.assign({color:null!==(R=a.chartHeading.color)&&void 0!==R?R:p.COLORS.content.secondary},{children:a.chartHeading.heading}))})),t.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"flex-end"}},{children:[a.showConvertToPieChart&&t.jsx(r.IconButton,{Icon:i.default,onClick:()=>{w(!0),N(!0)}}),a.allowChartPopup&&t.jsx(r.IconButton,{Icon:o.default,onClick:()=>{N(!0)}})]})),t.jsx("div",Object.assign({style:{height:null!==(P=a.graphCanvasHeight)&&void 0!==P?P:500}},{children:t.jsx(s.Bar,{options:J,data:Q})})),I&&t.jsxs(d.StyledModal,Object.assign({open:I,onClose:()=>{N(!1),w(!1)},closeOnOutsideClick:!0,headingTitle:null===(q=a.popupData)||void 0===q?void 0:q.chartHeading,width:"75%",headerRightCustomElement:a.showConvertToPieChart?H?t.jsx(r.IconButton,{Icon:e.default,onClick:()=>{w(!1)}}):t.jsx(r.IconButton,{Icon:i.default,onClick:()=>{w(!0)}}):null,headerLeftCustomElement:null===(B=a.popupData)||void 0===B?void 0:B.headerLeftCustomElement},{children:[H&&E&&t.jsx("div",Object.assign({style:{height:null!==(F=a.graphCanvasHeight)&&void 0!==F?F:500,padding:"24px"}},{children:t.jsx(n.PieChartAnalytics,{slices:E,size:a.pieChartSize,hideTitle:!0,currencyProps:a.currencyProps})})),!H&&t.jsx("div",Object.assign({style:{height:null!==(L=a.graphCanvasHeight)&&void 0!==L?L:500}},{children:t.jsx(s.Bar,{options:K,data:U})}))]}))]}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import n,{useState as r,useEffect as o}from"react";import{ShimmerComponentStyled as l}from"../shimmer/ShimmerComponent/ShimmerStyled.js";import a from"../../utils/DateUtils.js";import{COLORS as s}from"../../constants/Theme.js";import c from"../../assets/icons/arrow_down.svg.js";import d from"../../assets/icons/arrow_up.svg.js";import g from"../../assets/icons/info.svg.js";import{Tag as m}from"../tag/Tag.js";import{Tooltip as h}from"../tooltips/Tooltip.js";import{BodyCaption as p,Caption as y,TitleLarge as u,TitleMedium as f}from"../TypographyStyle.js";import{truncateValueForInternationalStore as b,truncateValueForIndianStore as v}from"./chart/utils/calcPercentage.js";import{AnalyticsTrendContainer as j}from"./CommonStyles.js";const x=r=>{let{title:o,value:a,trendPercent:c,type:d="horizontal",timeline:y,customRange:x,tooltip:
|
|
1
|
+
import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import n,{useState as r,useEffect as o}from"react";import{ShimmerComponentStyled as l}from"../shimmer/ShimmerComponent/ShimmerStyled.js";import a from"../../utils/DateUtils.js";import{COLORS as s}from"../../constants/Theme.js";import c from"../../assets/icons/arrow_down.svg.js";import d from"../../assets/icons/arrow_up.svg.js";import g from"../../assets/icons/info.svg.js";import{Tag as m}from"../tag/Tag.js";import{Tooltip as h}from"../tooltips/Tooltip.js";import{BodyCaption as p,Caption as y,TitleLarge as u,TitleMedium as f}from"../TypographyStyle.js";import{truncateValueForInternationalStore as b,truncateValueForIndianStore as v}from"./chart/utils/calcPercentage.js";import{AnalyticsTrendContainer as j}from"./CommonStyles.js";const x=r=>{let{title:o,value:a,trendPercent:c,type:d="horizontal",timeline:y,customRange:x,tooltip:w,card:O=!0,rightSeparator:$=!1,size:T="big",share:I=!1,formatVal:R,prefixSymbol:D,trailingIcon:C,onTrailIconClick:M,iconTooltipBody:k,funnelPercent:z,isLoading:L,trendRaw:P,suffixText:F,trendStyle:N,trendContainerStyle:W,trendIconStyle:_,containerStyle:A,prevTrendDiff:B,relativePercentageDiff:E,isInternationalStore:U}=r;const V="big"===T?u:f,q=void 0!==c?c<0?"negative":0===c?"neutral":"positive":void 0,G=void 0!==c?I?Math.round(c):Math.abs(Math.round(c)):void 0;return e(j,Object.assign({card:O,style:Object.assign({},A)},{children:t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:4,borderRightWidth:$?1:0,borderRightColor:s.stroke.primary,borderRightStyle:"solid",paddingLeft:O?0:24,paddingRight:O?0:24,height:"100%",justifyContent:"space-between",alignItems:"center"},null!=W?W:{})},{children:[t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"column",gap:4,height:"100%"},null!=N?N:{})},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e(p,Object.assign({style:{color:s.content.secondary}},{children:o})),w&&e(h,Object.assign({body:w,placement:"right",width:300},{children:e("div",Object.assign({style:{display:"flex",cursor:"pointer",height:"100%"}},{children:e(g,{color:s.content.primary,height:16,width:16})}))}))]})),t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},I?{justifyContent:"space-between"}:{})},{children:[L&&e(l,{width:108,height:26}),!L&&e(V,Object.assign({style:{color:s.content.primary}},{children:void 0===a?"--":"number"==typeof a&&R?a>999?U?`${null!=D?D:""}${b(a)} ${null!=F?F:""}`:`${null!=D?D:""}${v(a)} ${null!=F?F:""}`:`${null!=D?D:""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(a)} ${null!=F?F:""}`:`${null!=D?D:""}${a} ${null!=F?F:""}`})),"number"==typeof E&&e(m,{tagText:`${E}%`,theme:"light",type:"neutral"}),"horizontal"===d&&!L&&!I&&e(S,{timeline:y,customRange:x,percent:G,direction:q,trendRaw:P,prefixSymbol:D,trendIconStyle:_,isInternationalStore:U}),L&&!I&&"horizontal"===d&&e(l,{height:20,width:141,marginTop:6}),"vertical"===d&&!L&&void 0!==z&&e(m,{tagText:`${z} %`,theme:"light",type:"neutral"}),I&&!L&&void 0!==G&&e(m,{tagText:`${G} %`,theme:"light",type:"neutral"}),I||L||!B||0==B?e(i,{}):e(m,{tagText:(e=>{const t=Math.abs(e);return t%1!=0?`${t.toFixed(1)} %`:`${t} %`})(B),theme:"light",type:"neutral"})]})),"vertical"===d&&!L&&!I&&e("div",Object.assign({style:{marginTop:10}},{children:e(S,{timeline:y,customRange:x,percent:G,direction:q,trendRaw:P,prefixSymbol:D,trendIconStyle:_,isInternationalStore:U})})),L&&"vertical"===d&&e(l,{height:20,width:141,marginTop:6})]})),k&&!L&&e(h,Object.assign({body:k,placement:"right"},{children:C&&e("div",Object.assign({className:"icon--holder",onClick:M},{children:n.createElement(C,{height:20,width:20,color:s.content.secondary})}))}))]}))}))},S=i=>{let{percent:n,direction:l,timeline:g,customRange:m,trendRaw:h,prefixSymbol:p,trendIconStyle:u,isInternationalStore:f}=i;const j="negative"===l?c:d,x="negative"===l?s.background.negative.vibrant:"positive"===l?s.background.positive.vibrant:s.content.placeholder,[S,w]=r("");o((()=>{w("today"===g?"vs yesterday":"yesterday"===g?"vs 1 day before":"7 days"===g?"vs last 7 days":"30 days"===g?"vs last 30 days":"custom"===g&&m?a.getAnalyticsCustomDateTimelineText(m):"")}),[g,m]);const O=()=>{const e=((null!=h?h:0)>0?"+":"")+(null!=p?p:"");return void 0===h?"--":`${null!=e?e:""}${$()}`},$=()=>{let e="--";if(h)return e=String(f?b(Math.abs(h)):v(Math.abs(h))),h<0?"-"+e:e},[T,I]=r(O());return o((()=>{I(O())}),[h]),t("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"}},{children:["number"==typeof n&&e(j,{color:x,height:16,width:16,style:Object.assign({marginRight:2},null!=u?u:{})}),"number"==typeof n&&l&&t(y,Object.assign({style:{color:x}},{children:["neutral"===l?0:n<1e3?n:">999","%"]})),!!h&&e(y,Object.assign({style:{marginLeft:4,color:s.content.placeholder}},{children:`(${T})`})),g&&e(y,Object.assign({style:{marginLeft:4,color:s.content.placeholder}},{children:S}))]}))};export{x as AnalyticsTrend};
|
package/dist/esm/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as o,jsx as t}from"react/jsx-runtime";import i from"../../../../assets/icons/ChartBar.svg.js";import a from"../../../../assets/icons/ChartPie.svg.js";import e from"../../../../assets/icons/maximize.svg.js";import{Chart as l,CategoryScale as n,LinearScale as s,BarElement as r,Tooltip as d}from"chart.js";import{useState as c,useEffect as p}from"react";import{Bar as u}from"react-chartjs-2";import{PieChartAnalytics as g}from"../Pie/PieChartAnalytics.js";import{IconButton as v}from"../../../icon-button/IconButton.js";import{StyledModal as x}from"../../../modals/styledModal.js";import{TitleMedium as b}from"../../../TypographyStyle.js";import{FONTS as
|
|
1
|
+
import{jsxs as o,jsx as t}from"react/jsx-runtime";import i from"../../../../assets/icons/ChartBar.svg.js";import a from"../../../../assets/icons/ChartPie.svg.js";import e from"../../../../assets/icons/maximize.svg.js";import{Chart as l,CategoryScale as n,LinearScale as s,BarElement as r,Tooltip as d}from"chart.js";import{useState as c,useEffect as p}from"react";import{Bar as u}from"react-chartjs-2";import{PieChartAnalytics as g}from"../Pie/PieChartAnalytics.js";import{IconButton as v}from"../../../icon-button/IconButton.js";import{StyledModal as x}from"../../../modals/styledModal.js";import{TitleMedium as b}from"../../../TypographyStyle.js";import{FONTS as h,COLORS as y}from"../../../../constants/Theme.js";import{GraphContainerWrapper as m}from"./VerticalGraph.styles.js";l.register(n,s,r,d);const f=l=>{var n,s,r,d,f,C,A,k,j,z,$,D,S,P,O,T,H,I,R,w,B,E,F,G;const[L,M]=c(!1),[N,V]=c(!1),[q,J]=c();p((()=>{var o;const t=[];N&&(null===(o=l.popupData)||void 0===o||o.xAxis.data.forEach(((o,i)=>{var a;t.push({name:o.toString(),count:Number(null===(a=l.popupData)||void 0===a?void 0:a.yAxis.data[i])||0})})),J(t))}),[N,null===(n=l.popupData)||void 0===n?void 0:n.xAxis.data,null===(s=l.popupData)||void 0===s?void 0:s.yAxis.data]);const K=[250,1e3,800,1500,300,600],Q=-1===l.yAxis.data.findIndex((o=>0!==o)),U=-1===(null===(r=l.popupData)||void 0===r?void 0:r.yAxis.data.findIndex((o=>0!==o))),W={min:0,max:2e3,stepSize:200},X={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!Q,callbacks:{label:l.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!l.xAxis.title,text:l.xAxis.title,color:l.xAxis.titleColor,font:{size:h.caption.fontSize}},grid:{display:!1,borderColor:y.background.base},ticks:{fontSize:h.caption.fontSize,color:null!==(d=l.yAxis.labelColor)&&void 0!==d?d:y.content.secondary}},y:{title:{display:!!l.yAxis.title,text:l.yAxis.title,color:l.yAxis.titleColor,font:{size:h.caption.fontSize}},grid:{borderColor:"white",color:y.background.base},ticks:Object.assign({callback:l.yAxis.ticksCallback,fontSize:h.caption.fontSize,color:null!==(f=l.xAxis.labelColor)&&void 0!==f?f:y.content.secondary},Q?W:{})}},maintainAspectRatio:!1},Y={responsive:!0,plugins:{legend:{display:!1},tooltip:{enabled:!U,callbacks:{label:l.yAxis.toolTipCallback}}},scales:{x:{title:{display:!!(null===(C=l.popupData)||void 0===C?void 0:C.xAxis.title),text:null===(A=l.popupData)||void 0===A?void 0:A.xAxis.title,color:null===(k=l.popupData)||void 0===k?void 0:k.xAxis.titleColor,font:{size:h.caption.fontSize}},grid:{display:!1,borderColor:y.background.base},ticks:{fontSize:h.caption.fontSize,color:null!==(z=null===(j=l.popupData)||void 0===j?void 0:j.yAxis.labelColor)&&void 0!==z?z:y.content.secondary}},y:{title:{display:!!(null===($=l.popupData)||void 0===$?void 0:$.yAxis.title),text:null===(D=l.popupData)||void 0===D?void 0:D.yAxis.title,color:null===(S=l.popupData)||void 0===S?void 0:S.yAxis.titleColor,font:{size:h.caption.fontSize}},grid:{borderColor:"white",color:y.background.base},ticks:Object.assign({callback:null===(P=l.popupData)||void 0===P?void 0:P.yAxis.ticksCallback,fontSize:h.caption.fontSize,color:null!==(T=null===(O=l.popupData)||void 0===O?void 0:O.xAxis.labelColor)&&void 0!==T?T:y.content.secondary},U?W:{})}},maintainAspectRatio:!1},Z={labels:l.xAxis.data.map((o=>o.toString())),datasets:[{data:Q?K:l.yAxis.data,backgroundColor:o=>{var t;const i=l.barColorRGBA;let a=[];const e=l.xAxis.data.length;if(Q)return"rgba(0,0,0,0)";if(l.isFunnel){let o=+(e>10?.1:(1/e).toFixed(2));const t=`rgba(${i.r}, ${i.g}, ${i.b}`;for(let i=1;i<e+1;i++){let e="";i>10?e=`${t},1)`:(e=`${t},${o})`,o+=.1),a.push(e)}}else{const o=`rgba(${i.r}, ${i.g}, ${i.b}, ${null!==(t=i.a)&&void 0!==t?t:"1"})`;a=Array(e).fill(o)}return a},barPercentage:.4,categoryPercentage:1,borderRadius:4}]},_={labels:null===(H=l.popupData)||void 0===H?void 0:H.xAxis.data.map((o=>o.toString())),datasets:[{data:U?K:null===(I=l.popupData)||void 0===I?void 0:I.yAxis.data,backgroundColor:o=>{var t,i;const a=l.barColorRGBA;let e=[];const n=(null===(t=l.popupData)||void 0===t?void 0:t.xAxis.data.length)||0;if(Q)return"rgba(0,0,0,0)";if(l.isFunnel){let o=+(n>10?.1:(1/n).toFixed(2));const t=`rgba(${a.r}, ${a.g}, ${a.b}`;for(let i=1;i<n+1;i++){let a="";i>10?a=`${t},1)`:(a=`${t},${o})`,o+=.1),e.push(a)}}else{const o=`rgba(${a.r}, ${a.g}, ${a.b}, ${null!==(i=a.a)&&void 0!==i?i:"1"})`;e=Array(n).fill(o)}return e},barPercentage:.4,categoryPercentage:1,borderRadius:4}]};return o(m,Object.assign({padding:l.outerPadding},{children:[l.chartHeading&&t("div",Object.assign({style:{marginBottom:24}},{children:t(b,Object.assign({color:null!==(R=l.chartHeading.color)&&void 0!==R?R:y.content.secondary},{children:l.chartHeading.heading}))})),o("div",Object.assign({style:{display:"flex",justifyContent:"flex-end"}},{children:[l.showConvertToPieChart&&t(v,{Icon:a,onClick:()=>{V(!0),M(!0)}}),l.allowChartPopup&&t(v,{Icon:e,onClick:()=>{M(!0)}})]})),t("div",Object.assign({style:{height:null!==(w=l.graphCanvasHeight)&&void 0!==w?w:500}},{children:t(u,{options:X,data:Z})})),L&&o(x,Object.assign({open:L,onClose:()=>{M(!1),V(!1)},closeOnOutsideClick:!0,headingTitle:null===(B=l.popupData)||void 0===B?void 0:B.chartHeading,width:"75%",headerRightCustomElement:l.showConvertToPieChart?t(v,N?{Icon:i,onClick:()=>{V(!1)}}:{Icon:a,onClick:()=>{V(!0)}}):null,headerLeftCustomElement:null===(E=l.popupData)||void 0===E?void 0:E.headerLeftCustomElement},{children:[N&&q&&t("div",Object.assign({style:{height:null!==(F=l.graphCanvasHeight)&&void 0!==F?F:500,padding:"24px"}},{children:t(g,{slices:q,size:l.pieChartSize,hideTitle:!0,currencyProps:l.currencyProps})})),!N&&t("div",Object.assign({style:{height:null!==(G=l.graphCanvasHeight)&&void 0!==G?G:500}},{children:t(u,{options:Y,data:_})}))]}))]}))};export{f as VerticalGraph};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bikdotai/bik-component-library",
|
|
3
|
-
"version": "0.0.640-beta.help-attr.
|
|
3
|
+
"version": "0.0.640-beta.help-attr.13",
|
|
4
4
|
"description": "Bik Component Library",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -175,4 +175,4 @@
|
|
|
175
175
|
"engines": {
|
|
176
176
|
"node": ">=20"
|
|
177
177
|
}
|
|
178
|
-
}
|
|
178
|
+
}
|