@bikdotai/bik-component-library 0.0.859 → 0.0.860-beta.0

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.js

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

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.js.map

@@ -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\n\t\t\t\t\t\t\t\tdata-test=\"analytics-trend-trailing-icon\"\n\t\t\t\t\t\t\t\tclassName={'icon--holder'}\n\t\t\t\t\t\t\t\tonClick={onTrailIconClick}\n\t\t\t\t\t\t\t>\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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"}
+{"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 { Placement, 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\ttooltipPlacement?: Placement;\n\ttooltipWidth?: number;\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\ttooltipPlacement = 'right',\n\ttooltipWidth = 300,\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\n\t\t\t\t\t\t\t\tbody={tooltip}\n\t\t\t\t\t\t\t\tplacement={tooltipPlacement}\n\t\t\t\t\t\t\t\twidth={tooltipWidth}\n\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\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\n\t\t\t\t\t\t\t\tdata-test=\"analytics-trend-trailing-icon\"\n\t\t\t\t\t\t\t\tclassName={'icon--holder'}\n\t\t\t\t\t\t\t\tonClick={onTrailIconClick}\n\t\t\t\t\t\t\t>\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","tooltipPlacement","tooltipWidth","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/esm/components/analytics-chips-and-dropdowns/chart/ChartLayout.d.ts

@@ -0,0 +1,16 @@
+import { default as React, CSSProperties, ReactNode } from 'react';
+interface ChartCardProps {
+    title?: string;
+    padding: CSSProperties['padding'];
+    gap: number;
+    dataTest: string;
+    wrapperStyle?: CSSProperties;
+    children: ReactNode;
+}
+export declare const ChartCard: React.FC<ChartCardProps>;
+interface ChartValueRowProps {
+    value: ReactNode;
+    chip?: ReactNode;
+}
+export declare const ChartValueRow: React.FC<ChartValueRowProps>;
+export {};