@bikdotai/bik-component-library 0.0.455-beta.13 → 0.0.455-beta.14
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.
|
@@ -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"),n=require("../../assets/icons/arrow_down.svg.js"),s=require("../../assets/icons/arrow_up.svg.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("../tooltips/Tooltip.js"),l=require("../TypographyStyle.js"),c=require("./CommonStyles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=d(t);const y=r=>{let{percent:o,direction:a,timeline:c,customRange:d}=r;const g="negative"===a?n.default:s.default,y="negative"===a?i.COLORS.background.negative.vibrant:"positive"===a?i.COLORS.background.positive.vibrant:i.COLORS.content.placeholder,u=t.useRef("today"===c?"vs yesterday":"yesterday"===c?"vs 1 day before":"7 days"===c?"vs last 7 days":"30 days"===c?"vs last 30 days":"");return t.useEffect((()=>{if(console.log("storybook: getCustomDateRangeTimeLineText called"),!(d&&Array.isArray(d)&&(null==d?void 0:d[0])&&(null==d?void 0:d[1])&&"custom"===c))return;const e=new Date("string"==typeof d[0]?new Date(d[0]).getTime():d[0].getTime()),t=new Date("string"==typeof d[1]?new Date(d[1]).getTime():d[1].getTime());console.log("storybook: start - ",e),console.log("storybook: end - ",t);const i=864e5,n=Math.floor((t.getTime()-e.getTime())/i),s=new Date(e.getTime()-864e5),r=`${s.toLocaleString("default",{month:"short"})} ${s.getDate()}`,o=new Date(s.getTime()-n*i),a=`${o.toLocaleString("default",{month:"short"})} ${o.getDate()}`;u.current=`vs ${a} - ${r}`}),[c,d]),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row"}},{children:["number"==typeof o&&e.jsx(g,{color:y,height:20,width:20,style:{marginRight:2}}),"number"==typeof o&&a&&e.jsxs(l.TitleSmall,Object.assign({style:{color:y}},{children:["neutral"===a?0:o,"%"]})),c&&e.jsx(l.Caption,Object.assign({style:{marginLeft:4,color:i.COLORS.content.placeholder}},{children:u.current}))]}))};exports.AnalyticsTrend=t=>{let{title:n,value:s,trendPercent:d,type:u="horizontal",timeline:h,customRange:m,tooltip:p,card:j=!0,rightSeparator:b=!1,size:f="big",share:v=!1,formatVal:x,prefixSymbol:O,trailingIcon:T,onTrailIconClick:w,iconTooltipBody:R}=t;const C="big"===f?l.TitleLarge:l.TitleMedium,S=void 0!==d?d<0?"negative":0===d?"neutral":"positive":void 0,L=void 0!==d?v?Math.round(d):Math.abs(Math.round(d)):void 0;return e.jsx(c.AnalyticsTrendContainer,Object.assign({card:j},{children:e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,borderRightWidth:b?1:0,borderRightColor:i.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:j?0:24,paddingRight:j?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(l.BodySecondary,Object.assign({style:{color:i.COLORS.content.secondary}},{children:n})),p&&e.jsx(a.Tooltip,Object.assign({body:p,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"},v?{justifyContent:"space-between"}:{})},{children:[e.jsx(C,Object.assign({style:{color:i.COLORS.content.primary}},{children:void 0===s?"--":"number"==typeof s&&x?`${null!=O?O:""}${new Intl.NumberFormat("en-IN",{}).format(s)}`:`${null!=O?O:""}${s}`})),"horizontal"===u&&!v&&e.jsx(y,{timeline:h,customRange:m,percent:L,direction:S}),v&&void 0!==L&&e.jsx(o.Tag,{tagText:`${L} %`,theme:"light",type:"neutral"})]})),"vertical"===u&&!v&&e.jsx("div",Object.assign({style:{marginTop:12}},{children:e.jsx(y,{timeline:h,customRange:m,percent:L,direction:S})}))]})),R&&e.jsx(a.Tooltip,Object.assign({body:R,placement:"right"},{children:T&&e.jsx("div",Object.assign({className:"icon--holder",onClick:w},{children:g.default.createElement(T,{height:20,width:20,color:i.COLORS.content.secondary})}))}))]}))}))};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i,{
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import i,{useRef as o,useEffect as n}from"react";import{COLORS as r}from"../../constants/Theme.js";import s from"../../assets/icons/arrow_down.svg.js";import a from"../../assets/icons/arrow_up.svg.js";import l from"../../assets/icons/info.svg.js";import{Tag as c}from"../tag/Tag.js";import{Tooltip as g}from"../tooltips/Tooltip.js";import{BodySecondary as d,TitleSmall as m,Caption as h,TitleLarge as p,TitleMedium as y}from"../TypographyStyle.js";import{AnalyticsTrendContainer as b}from"./CommonStyles.js";const f=o=>{let{title:n,value:s,trendPercent:a,type:m="horizontal",timeline:h,customRange:f,tooltip:u,card:j=!0,rightSeparator:w=!1,size:T="big",share:x=!1,formatVal:O,prefixSymbol:D,trailingIcon:$,onTrailIconClick:R,iconTooltipBody:I}=o;const k="big"===T?p:y,C=void 0!==a?a<0?"negative":0===a?"neutral":"positive":void 0,S=void 0!==a?x?Math.round(a):Math.abs(Math.round(a)):void 0;return e(b,Object.assign({card:j},{children:t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,borderRightWidth:w?1:0,borderRightColor:r.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:r.content.secondary}},{children:n})),u&&e(g,Object.assign({body:u,placement:"right",width:300},{children:e("div",Object.assign({style:{display:"flex",alignItems:"center",cursor:"pointer"}},{children:e(l,{color:r.content.inactive,height:16,width:16})}))}))]})),t("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},x?{justifyContent:"space-between"}:{})},{children:[e(k,Object.assign({style:{color:r.content.primary}},{children:void 0===s?"--":"number"==typeof s&&O?`${null!=D?D:""}${new Intl.NumberFormat("en-IN",{}).format(s)}`:`${null!=D?D:""}${s}`})),"horizontal"===m&&!x&&e(v,{timeline:h,customRange:f,percent:S,direction:C}),x&&void 0!==S&&e(c,{tagText:`${S} %`,theme:"light",type:"neutral"})]})),"vertical"===m&&!x&&e("div",Object.assign({style:{marginTop:12}},{children:e(v,{timeline:h,customRange:f,percent:S,direction:C})}))]})),I&&e(g,Object.assign({body:I,placement:"right"},{children:$&&e("div",Object.assign({className:"icon--holder",onClick:R},{children:i.createElement($,{height:20,width:20,color:r.content.secondary})}))}))]}))}))},v=i=>{let{percent:l,direction:c,timeline:g,customRange:d}=i;const p="negative"===c?s:a,y="negative"===c?r.background.negative.vibrant:"positive"===c?r.background.positive.vibrant:r.content.placeholder,b=o("today"===g?"vs yesterday":"yesterday"===g?"vs 1 day before":"7 days"===g?"vs last 7 days":"30 days"===g?"vs last 30 days":"");return n((()=>{if(console.log("storybook: getCustomDateRangeTimeLineText called"),!(d&&Array.isArray(d)&&(null==d?void 0:d[0])&&(null==d?void 0:d[1])&&"custom"===g))return;const e=new Date("string"==typeof d[0]?new Date(d[0]).getTime():d[0].getTime()),t=new Date("string"==typeof d[1]?new Date(d[1]).getTime():d[1].getTime());console.log("storybook: start - ",e),console.log("storybook: end - ",t);const i=864e5,o=Math.floor((t.getTime()-e.getTime())/i),n=new Date(e.getTime()-864e5),r=`${n.toLocaleString("default",{month:"short"})} ${n.getDate()}`,s=new Date(n.getTime()-o*i),a=`${s.toLocaleString("default",{month:"short"})} ${s.getDate()}`;b.current=`vs ${a} - ${r}`}),[g,d]),t("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row"}},{children:["number"==typeof l&&e(p,{color:y,height:20,width:20,style:{marginRight:2}}),"number"==typeof l&&c&&t(m,Object.assign({style:{color:y}},{children:["neutral"===c?0:l,"%"]})),g&&e(h,Object.assign({style:{marginLeft:4,color:r.content.placeholder}},{children:b.current}))]}))};export{f as AnalyticsTrend};
|