@bikdotai/bik-component-library 0.0.455-analyticsv3-09 → 0.0.455-analyticsv3-10
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.d.ts +1 -0
- package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.js +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.d.ts +1 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.js +1 -1
- package/package.json +1 -1
|
@@ -16,5 +16,6 @@ export interface AnalyticsTrendInterface {
|
|
|
16
16
|
trailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
|
|
17
17
|
onTrailIconClick?: () => void;
|
|
18
18
|
iconTooltipBody?: string;
|
|
19
|
+
funnelPercent?: number;
|
|
19
20
|
}
|
|
20
21
|
export declare const AnalyticsTrend: React.FC<AnalyticsTrendInterface>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../../constants/Theme.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../../constants/Theme.js"),n=require("../../assets/icons/arrow_down.svg.js"),s=require("../../assets/icons/arrow_up.svg.js"),r=require("../../assets/icons/info.svg.js"),o=require("../tag/Tag.js"),a=require("../template-context-mapper/utils/getFormattedMonthDate.js"),l=require("../tooltips/Tooltip.js"),c=require("../TypographyStyle.js"),d=require("./CommonStyles.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=g(t);const y=t=>{let{percent:r,direction:o,timeline:l,customRange:d}=t;const g="negative"===o?n.default:s.default,h="negative"===o?i.COLORS.background.negative.vibrant:"positive"===o?i.COLORS.background.positive.vibrant:i.COLORS.content.placeholder,y="today"===l?"vs yesterday":"yesterday"===l?"vs 1 day before":"7 days"===l?"vs last 7 days":"30 days"===l?"vs last 30 days":"custom"===l&&d?`vs ${a.getFormattedMonthDate(d[0])} - ${a.getFormattedMonthDate(d[1])}`:"";return e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row"}},{children:["number"==typeof r&&e.jsx(g,{color:h,height:20,width:20,style:{marginRight:2}}),"number"==typeof r&&o&&e.jsxs(c.TitleSmall,Object.assign({style:{color:h}},{children:["neutral"===o?0:r,"%"]})),l&&e.jsx(c.Caption,Object.assign({style:{marginLeft:4,color:i.COLORS.content.placeholder}},{children:y}))]}))};exports.AnalyticsTrend=t=>{let{title:n,value:s,trendPercent:a,type:g="horizontal",timeline:p,customRange:u,tooltip:j,card:m=!0,rightSeparator:v=!1,size:x="big",share:b=!1,formatVal:O,prefixSymbol:f,trailingIcon:R,onTrailIconClick:T,iconTooltipBody:C,funnelPercent:S}=t;const w="big"===x?c.TitleLarge:c.TitleMedium,L=void 0!==a?a<0?"negative":0===a?"neutral":"positive":void 0,q=void 0!==a?b?Math.round(a):Math.abs(Math.round(a)):void 0;return e.jsx(d.AnalyticsTrendContainer,Object.assign({card:m},{children:e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,borderRightWidth:v?1:0,borderRightColor:i.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:m?0:24,paddingRight:m?0:24,height:"100%",justifyContent:"space-between",alignItems:"center"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:4,height:"100%"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e.jsx(c.BodySecondary,Object.assign({style:{color:i.COLORS.content.secondary}},{children:n})),j&&e.jsx(l.Tooltip,Object.assign({body:j,placement:"right",width:300},{children:e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center",cursor:"pointer"}},{children:e.jsx(r.default,{color:i.COLORS.content.inactive,height:16,width:16})}))}))]})),e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},b?{justifyContent:"space-between"}:{})},{children:[e.jsx(w,Object.assign({style:{color:i.COLORS.content.primary}},{children:void 0===s?"--":"number"==typeof s&&O?`${null!=f?f:""}${new Intl.NumberFormat("en-IN",{}).format(s)}`:`${null!=f?f:""}${s}`})),"horizontal"===g&&!b&&e.jsx(y,{timeline:p,customRange:u,percent:q,direction:L}),"vertical"===g&&S&&void 0!==S&&e.jsx(o.Tag,{tagText:`${S} %`,theme:"light",type:"neutral"}),b&&void 0!==q&&e.jsx(o.Tag,{tagText:`${q} %`,theme:"light",type:"neutral"})]})),"vertical"===g&&!b&&e.jsx("div",Object.assign({style:{marginTop:6}},{children:e.jsx(y,{timeline:p,customRange:u,percent:q,direction:L})}))]})),C&&e.jsx(l.Tooltip,Object.assign({body:C,placement:"right"},{children:R&&e.jsx("div",Object.assign({className:"icon--holder",onClick:T},{children:h.default.createElement(R,{height:20,width:20,color:i.COLORS.content.secondary})}))}))]}))}))};
|
|
@@ -16,5 +16,6 @@ export interface AnalyticsTrendInterface {
|
|
|
16
16
|
trailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
|
|
17
17
|
onTrailIconClick?: () => void;
|
|
18
18
|
iconTooltipBody?: string;
|
|
19
|
+
funnelPercent?: number;
|
|
19
20
|
}
|
|
20
21
|
export declare const AnalyticsTrend: React.FC<AnalyticsTrendInterface>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import{COLORS as n}from"../../constants/Theme.js";import
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import{COLORS as n}from"../../constants/Theme.js";import r from"../../assets/icons/arrow_down.svg.js";import o from"../../assets/icons/arrow_up.svg.js";import s from"../../assets/icons/info.svg.js";import{Tag as a}from"../tag/Tag.js";import{getFormattedMonthDate as l}from"../template-context-mapper/utils/getFormattedMonthDate.js";import{Tooltip as c}from"../tooltips/Tooltip.js";import{BodySecondary as d,TitleSmall as g,Caption as m,TitleLarge as p,TitleMedium as h}from"../TypographyStyle.js";import{AnalyticsTrendContainer as y}from"./CommonStyles.js";const b=r=>{let{title:o,value:l,trendPercent:g,type:m="horizontal",timeline:b,customRange:f,tooltip:u,card:j=!0,rightSeparator:x=!1,size:O="big",share:w=!1,formatVal:I,prefixSymbol:R,trailingIcon:T,onTrailIconClick:$,iconTooltipBody:C,funnelPercent:D}=r;const k="big"===O?p:h,S=void 0!==g?g<0?"negative":0===g?"neutral":"positive":void 0,M=void 0!==g?w?Math.round(g):Math.abs(Math.round(g)):void 0;return e(y,Object.assign({card:j},{children:t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,borderRightWidth:x?1:0,borderRightColor:n.stroke.primary,borderRightStyle:"solid",paddingLeft:j?0:24,paddingRight:j?0:24,height:"100%",justifyContent:"space-between",alignItems:"center"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:4,height:"100%"}},{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e(d,Object.assign({style:{color:n.content.secondary}},{children:o})),u&&e(c,Object.assign({body:u,placement:"right",width:300},{children:e("div",Object.assign({style:{display:"flex",alignItems:"center",cursor:"pointer"}},{children:e(s,{color:n.content.inactive,height:16,width:16})}))}))]})),t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},w?{justifyContent:"space-between"}:{})},{children:[e(k,Object.assign({style:{color:n.content.primary}},{children:void 0===l?"--":"number"==typeof l&&I?`${null!=R?R:""}${new Intl.NumberFormat("en-IN",{}).format(l)}`:`${null!=R?R:""}${l}`})),"horizontal"===m&&!w&&e(v,{timeline:b,customRange:f,percent:M,direction:S}),"vertical"===m&&D&&void 0!==D&&e(a,{tagText:`${D} %`,theme:"light",type:"neutral"}),w&&void 0!==M&&e(a,{tagText:`${M} %`,theme:"light",type:"neutral"})]})),"vertical"===m&&!w&&e("div",Object.assign({style:{marginTop:6}},{children:e(v,{timeline:b,customRange:f,percent:M,direction:S})}))]})),C&&e(c,Object.assign({body:C,placement:"right"},{children:T&&e("div",Object.assign({className:"icon--holder",onClick:$},{children:i.createElement(T,{height:20,width:20,color:n.content.secondary})}))}))]}))}))},v=i=>{let{percent:s,direction:a,timeline:c,customRange:d}=i;const p="negative"===a?r:o,h="negative"===a?n.background.negative.vibrant:"positive"===a?n.background.positive.vibrant:n.content.placeholder,y="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&&d?`vs ${l(d[0])} - ${l(d[1])}`:"";return t("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row"}},{children:["number"==typeof s&&e(p,{color:h,height:20,width:20,style:{marginRight:2}}),"number"==typeof s&&a&&t(g,Object.assign({style:{color:h}},{children:["neutral"===a?0:s,"%"]})),c&&e(m,Object.assign({style:{marginLeft:4,color:n.content.placeholder}},{children:y}))]}))};export{b as AnalyticsTrend};
|