@servicetitan/marketing-ui 5.9.0 → 5.11.0

package/dist/components/ads/ads-stat.js

@@ -3,16 +3,27 @@ import { StatCard } from '../stat/stat-card';
 import { StatExtendedCard } from '../stat/stat-extended-card';
 import { adsStatDescriptions } from '../../utils/ads-texts';
 import { camelCaseToTitleCase } from '../../utils/string-case';
-export const AdsPerformanceStatCard = props => {
-    var _a, _b;
-    const titleText = (_a = props.title) !== null && _a !== void 0 ? _a : camelCaseToTitleCase(props.stat);
-    const hintText = (_b = props.description) !== null && _b !== void 0 ? _b : adsStatDescriptions[props.stat];
-    return _jsx(StatCard, { ...props, title: titleText, description: hintText });
+export const AdsPerformanceStatCard = (props)=>{
+    var _props_title;
+    const titleText = (_props_title = props.title) !== null && _props_title !== void 0 ? _props_title : camelCaseToTitleCase(props.stat);
+    var _props_description;
+    const hintText = (_props_description = props.description) !== null && _props_description !== void 0 ? _props_description : adsStatDescriptions[props.stat];
+    return /*#__PURE__*/ _jsx(StatCard, {
+        ...props,
+        title: titleText,
+        description: hintText
+    });
 };
-export const AdsPerformanceStatExtendedCard = props => {
-    var _a, _b;
-    const titleText = (_a = props.title) !== null && _a !== void 0 ? _a : camelCaseToTitleCase(props.stat);
-    const hintText = (_b = props.description) !== null && _b !== void 0 ? _b : adsStatDescriptions[props.stat];
-    return _jsx(StatExtendedCard, { ...props, title: titleText, description: hintText });
+export const AdsPerformanceStatExtendedCard = (props)=>{
+    var _props_title;
+    const titleText = (_props_title = props.title) !== null && _props_title !== void 0 ? _props_title : camelCaseToTitleCase(props.stat);
+    var _props_description;
+    const hintText = (_props_description = props.description) !== null && _props_description !== void 0 ? _props_description : adsStatDescriptions[props.stat];
+    return /*#__PURE__*/ _jsx(StatExtendedCard, {
+        ...props,
+        title: titleText,
+        description: hintText
+    });
 };
+
 //# sourceMappingURL=ads-stat.js.map

package/dist/components/ads/ads-stat.js.map

@@ -1 +1 @@
-{"version":3,"file":"ads-stat.js","sourceRoot":"","sources":["../../../src/components/ads/ads-stat.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAiB,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAyB,MAAM,4BAA4B,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAe,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAO/D,MAAM,CAAC,MAAM,sBAAsB,GAAgC,KAAK,CAAC,EAAE;;IACvE,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAClE,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,WAAW,mCAAI,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAEtE,OAAO,KAAC,QAAQ,OAAK,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,GAAI,CAAC;AAC5E,CAAC,CAAC;AAQF,MAAM,CAAC,MAAM,8BAA8B,GAAwC,KAAK,CAAC,EAAE;;IACvF,MAAM,SAAS,GAAG,MAAA,KAAK,CAAC,KAAK,mCAAI,oBAAoB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAClE,MAAM,QAAQ,GAAG,MAAA,KAAK,CAAC,WAAW,mCAAI,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAEtE,OAAO,KAAC,gBAAgB,OAAK,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,GAAI,CAAC;AACpF,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/ads/ads-stat.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { StatCard, StatCardProps } from '../stat/stat-card';\nimport { StatExtendedCard, StatExtendedCardProps } from '../stat/stat-extended-card';\nimport { adsStatDescriptions, AdsStatType } from '../../utils/ads-texts';\nimport { camelCaseToTitleCase } from '../../utils/string-case';\n\nexport interface AdsPerformanceStatProps extends Omit<StatCardProps, 'title'> {\n    stat: AdsStatType;\n    title?: string;\n}\n\nexport const AdsPerformanceStatCard: FC<AdsPerformanceStatProps> = props => {\n    const titleText = props.title ?? camelCaseToTitleCase(props.stat);\n    const hintText = props.description ?? adsStatDescriptions[props.stat];\n\n    return <StatCard {...props} title={titleText} description={hintText} />;\n};\n\nexport interface AdsPerformanceStatExtendedProps extends Omit<StatExtendedCardProps, 'title'> {\n    stat: AdsStatType;\n    title?: string;\n    title2: string;\n}\n\nexport const AdsPerformanceStatExtendedCard: FC<AdsPerformanceStatExtendedProps> = props => {\n    const titleText = props.title ?? camelCaseToTitleCase(props.stat);\n    const hintText = props.description ?? adsStatDescriptions[props.stat];\n\n    return <StatExtendedCard {...props} title={titleText} description={hintText} />;\n};\n"],"names":["StatCard","StatExtendedCard","adsStatDescriptions","camelCaseToTitleCase","AdsPerformanceStatCard","props","titleText","title","stat","hintText","description","AdsPerformanceStatExtendedCard"],"mappings":";AACA,SAASA,QAAQ,QAAuB,oBAAoB;AAC5D,SAASC,gBAAgB,QAA+B,6BAA6B;AACrF,SAASC,mBAAmB,QAAqB,wBAAwB;AACzE,SAASC,oBAAoB,QAAQ,0BAA0B;AAO/D,OAAO,MAAMC,yBAAsDC,CAAAA;QAC7CA;IAAlB,MAAMC,YAAYD,CAAAA,eAAAA,MAAME,KAAK,cAAXF,0BAAAA,eAAeF,qBAAqBE,MAAMG,IAAI;QAC/CH;IAAjB,MAAMI,WAAWJ,CAAAA,qBAAAA,MAAMK,WAAW,cAAjBL,gCAAAA,qBAAqBH,mBAAmB,CAACG,MAAMG,IAAI,CAAC;IAErE,qBAAO,KAACR;QAAU,GAAGK,KAAK;QAAEE,OAAOD;QAAWI,aAAaD;;AAC/D,EAAE;AAQF,OAAO,MAAME,iCAAsEN,CAAAA;QAC7DA;IAAlB,MAAMC,YAAYD,CAAAA,eAAAA,MAAME,KAAK,cAAXF,0BAAAA,eAAeF,qBAAqBE,MAAMG,IAAI;QAC/CH;IAAjB,MAAMI,WAAWJ,CAAAA,qBAAAA,MAAMK,WAAW,cAAjBL,gCAAAA,qBAAqBH,mBAAmB,CAACG,MAAMG,IAAI,CAAC;IAErE,qBAAO,KAACP;QAAkB,GAAGI,KAAK;QAAEE,OAAOD;QAAWI,aAAaD;;AACvE,EAAE"}

package/dist/components/charts/funnel-chart/components/funnel-chart.js

@@ -1,18 +1,130 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import classNames from 'classnames';
-import { BodyText, Eyebrow, Headline, Icon, Mask, Popover, Stack, StatusLight, Tooltip, } from '@servicetitan/design-system';
+import { BodyText, Eyebrow, Headline, Icon, Mask, Popover, Stack, StatusLight, Tooltip } from '@servicetitan/design-system';
 import { tokens } from '@servicetitan/tokens/core';
 import { formatValue } from '../../../../utils/formatters';
 import { StatDiff } from '../../../stat/stat-card';
 import { defaultBottomSideLength, defaultTopSideLength } from '../utils/const';
 import { FunnelPyramidSvg } from './funnel-svg';
 import * as Styles from './funnel-chart.module.less';
-export const FunnelChart = ({ sections, format, topSideLength = defaultTopSideLength, bottomSideLength = defaultBottomSideLength, popoverContent: PopoverContent, loading, className, }) => {
+export const FunnelChart = ({ sections, format, topSideLength = defaultTopSideLength, bottomSideLength = defaultBottomSideLength, popoverContent: PopoverContent, loading, className })=>{
     const [popoverShown, setPopoverShown] = useState(undefined);
-    const colors = useMemo(() => sections.map(s => s.color), [sections]);
-    const hidePopover = () => setPopoverShown(undefined);
-    const pyramidTextsStyles = useMemo(() => ({ left: `${100 - topSideLength}%` }), [topSideLength]);
-    return (_jsxs(Mask, { className: classNames('h-100 bg-white border border-radius-2 p-3 of-hidden position-relative', className), active: !!loading, children: [_jsx("div", { className: Styles.pyramidWrapper, children: _jsx(FunnelPyramidSvg, { colors: colors, topSideLength: topSideLength, bottomSideLength: bottomSideLength }) }), _jsx("div", { className: classNames('d-f flex-column justify-content-around', Styles.pyramidBoxRight), style: pyramidTextsStyles, children: sections.map(({ id, title, value, color, prev, textClass, data }, ind) => (_jsx(Stack, { className: Styles.flex1, justifyContent: "center", alignItems: "center", onMouseEnter: () => setPopoverShown(id), onMouseLeave: hidePopover, children: _jsxs(Popover, { className: "of-hidden", trigger: _jsx(Headline, { size: "small", className: classNames('m-x-2 m-b-0-i', textClass), "data-cy": `marketing-funnel-section-${id}-value`, children: formatValue(value, format) }), open: popoverShown === id, direction: ind === 0 ? 'lt' : 'lb', padding: "s", width: "auto", portal: true, children: [_jsxs(Stack, { alignItems: "center", justifyContent: "flex-start", "data-cy": `marketing-funnel-popover-${id}-content`, children: [_jsx(StatusLight, { color: color }), _jsx(BodyText, { bold: true, className: "m-r-half", children: formatValue(value, format) }), _jsx(BodyText, { bold: true, className: "m-r-1", children: title }), _jsx(StatDiff, { value: value, prev: prev, size: "xsmall", format: format })] }), !!PopoverContent && (_jsx(PopoverContent, { id: id, value: value, text: formatValue(value, format), data: data }))] }) }, title))) }), _jsx(Stack, { className: Styles.pyramidBoxLeft, direction: "column", children: sections.map(s => (_jsxs(Stack, { className: Styles.flex1, justifyContent: "flex-start", alignItems: "flex-end", children: [_jsx(Eyebrow, { size: "small", className: classNames(Styles.statTitle, 'm-r-half'), children: s.title }), _jsx(Tooltip, { direction: "t", portal: true, text: s.description, children: _jsx(Icon, { name: "info", className: "m-r-1", size: "14px", color: tokens.colorNeutral90 }) }), _jsx(StatDiff, { value: s.value, prev: s.prev, size: "xsmall", format: format })] }, s.id))) })] }));
+    const colors = useMemo(()=>sections.map((s)=>s.color), [
+        sections
+    ]);
+    const hidePopover = ()=>setPopoverShown(undefined);
+    const pyramidTextsStyles = useMemo(()=>({
+            left: `${100 - topSideLength}%`
+        }), [
+        topSideLength
+    ]);
+    return /*#__PURE__*/ _jsxs(Mask, {
+        className: classNames('h-100 bg-white border border-radius-2 p-3 of-hidden position-relative', className),
+        active: !!loading,
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: Styles.pyramidWrapper,
+                children: /*#__PURE__*/ _jsx(FunnelPyramidSvg, {
+                    colors: colors,
+                    topSideLength: topSideLength,
+                    bottomSideLength: bottomSideLength
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: classNames('d-f flex-column justify-content-around', Styles.pyramidBoxRight),
+                style: pyramidTextsStyles,
+                children: sections.map(({ id, title, value, color, prev, textClass, data }, ind)=>/*#__PURE__*/ _jsx(Stack, {
+                        className: Styles.flex1,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        onMouseEnter: ()=>setPopoverShown(id),
+                        onMouseLeave: hidePopover,
+                        children: /*#__PURE__*/ _jsxs(Popover, {
+                            className: "of-hidden",
+                            trigger: /*#__PURE__*/ _jsx(Headline, {
+                                size: "small",
+                                className: classNames('m-x-2 m-b-0-i', textClass),
+                                "data-cy": `marketing-funnel-section-${id}-value`,
+                                children: formatValue(value, format)
+                            }),
+                            open: popoverShown === id,
+                            direction: ind === 0 ? 'lt' : 'lb',
+                            padding: "s",
+                            width: "auto",
+                            portal: true,
+                            children: [
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    alignItems: "center",
+                                    justifyContent: "flex-start",
+                                    "data-cy": `marketing-funnel-popover-${id}-content`,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(StatusLight, {
+                                            color: color
+                                        }),
+                                        /*#__PURE__*/ _jsx(BodyText, {
+                                            bold: true,
+                                            className: "m-r-half",
+                                            children: formatValue(value, format)
+                                        }),
+                                        /*#__PURE__*/ _jsx(BodyText, {
+                                            bold: true,
+                                            className: "m-r-1",
+                                            children: title
+                                        }),
+                                        /*#__PURE__*/ _jsx(StatDiff, {
+                                            value: value,
+                                            prev: prev,
+                                            size: "xsmall",
+                                            format: format
+                                        })
+                                    ]
+                                }),
+                                !!PopoverContent && /*#__PURE__*/ _jsx(PopoverContent, {
+                                    id: id,
+                                    value: value,
+                                    text: formatValue(value, format),
+                                    data: data
+                                })
+                            ]
+                        })
+                    }, title))
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                className: Styles.pyramidBoxLeft,
+                direction: "column",
+                children: sections.map((s)=>/*#__PURE__*/ _jsxs(Stack, {
+                        className: Styles.flex1,
+                        justifyContent: "flex-start",
+                        alignItems: "flex-end",
+                        children: [
+                            /*#__PURE__*/ _jsx(Eyebrow, {
+                                size: "small",
+                                className: classNames(Styles.statTitle, 'm-r-half'),
+                                children: s.title
+                            }),
+                            /*#__PURE__*/ _jsx(Tooltip, {
+                                direction: "t",
+                                portal: true,
+                                text: s.description,
+                                children: /*#__PURE__*/ _jsx(Icon, {
+                                    name: "info",
+                                    className: "m-r-1",
+                                    size: "14px",
+                                    color: tokens.colorNeutral90
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(StatDiff, {
+                                value: s.value,
+                                prev: s.prev,
+                                size: "xsmall",
+                                format: format
+                            })
+                        ]
+                    }, s.id))
+            })
+        ]
+    });
 };
+
 //# sourceMappingURL=funnel-chart.js.map

package/dist/components/charts/funnel-chart/components/funnel-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"funnel-chart.js","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-chart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/charts/funnel-chart/components/funnel-chart.tsx"],"sourcesContent":["import { useMemo, useState, FC } from 'react';\nimport classNames from 'classnames';\nimport {\n    BodyText,\n    Eyebrow,\n    Headline,\n    Icon,\n    Mask,\n    Popover,\n    Stack,\n    StatusLight,\n    Tooltip,\n} from '@servicetitan/design-system';\nimport { tokens } from '@servicetitan/tokens/core';\nimport { formatValue } from '../../../../utils/formatters';\nimport { StatDiff } from '../../../stat/stat-card';\nimport { FunnelChartProps } from '../utils/interface';\nimport { defaultBottomSideLength, defaultTopSideLength } from '../utils/const';\nimport { FunnelPyramidSvg } from './funnel-svg';\nimport * as Styles from './funnel-chart.module.less';\n\nexport const FunnelChart: FC<FunnelChartProps> = ({\n    sections,\n    format,\n    topSideLength = defaultTopSideLength,\n    bottomSideLength = defaultBottomSideLength,\n    popoverContent: PopoverContent,\n    loading,\n    className,\n}) => {\n    const [popoverShown, setPopoverShown] = useState<number | undefined>(undefined);\n\n    const colors = useMemo(() => sections.map(s => s.color), [sections]);\n    const hidePopover = () => setPopoverShown(undefined);\n    const pyramidTextsStyles = useMemo(\n        () => ({ left: `${100 - topSideLength}%` }),\n        [topSideLength]\n    );\n\n    return (\n        <Mask\n            className={classNames(\n                'h-100 bg-white border border-radius-2 p-3 of-hidden position-relative',\n                className\n            )}\n            active={!!loading}\n        >\n            <div className={Styles.pyramidWrapper}>\n                <FunnelPyramidSvg\n                    colors={colors}\n                    topSideLength={topSideLength}\n                    bottomSideLength={bottomSideLength}\n                />\n            </div>\n\n            <div\n                className={classNames(\n                    'd-f flex-column justify-content-around',\n                    Styles.pyramidBoxRight\n                )}\n                style={pyramidTextsStyles}\n            >\n                {sections.map(({ id, title, value, color, prev, textClass, data }, ind) => (\n                    <Stack\n                        key={title}\n                        className={Styles.flex1}\n                        justifyContent=\"center\"\n                        alignItems=\"center\"\n                        onMouseEnter={() => setPopoverShown(id)}\n                        onMouseLeave={hidePopover}\n                    >\n                        <Popover\n                            className=\"of-hidden\"\n                            trigger={\n                                <Headline\n                                    size=\"small\"\n                                    className={classNames('m-x-2 m-b-0-i', textClass)}\n                                    data-cy={`marketing-funnel-section-${id}-value`}\n                                >\n                                    {formatValue(value, format)}\n                                </Headline>\n                            }\n                            open={popoverShown === id}\n                            direction={ind === 0 ? 'lt' : 'lb'}\n                            padding=\"s\"\n                            width=\"auto\"\n                            portal\n                        >\n                            <Stack\n                                alignItems=\"center\"\n                                justifyContent=\"flex-start\"\n                                data-cy={`marketing-funnel-popover-${id}-content`}\n                            >\n                                <StatusLight color={color} />\n                                <BodyText bold className=\"m-r-half\">\n                                    {formatValue(value, format)}\n                                </BodyText>\n                                <BodyText bold className=\"m-r-1\">\n                                    {title}\n                                </BodyText>\n                                <StatDiff value={value} prev={prev} size=\"xsmall\" format={format} />\n                            </Stack>\n\n                            {!!PopoverContent && (\n                                <PopoverContent\n                                    id={id}\n                                    value={value}\n                                    text={formatValue(value, format)}\n                                    data={data}\n                                />\n                            )}\n                        </Popover>\n                    </Stack>\n                ))}\n            </div>\n            <Stack className={Styles.pyramidBoxLeft} direction=\"column\">\n                {sections.map(s => (\n                    <Stack\n                        key={s.id}\n                        className={Styles.flex1}\n                        justifyContent=\"flex-start\"\n                        alignItems=\"flex-end\"\n                    >\n                        <Eyebrow size=\"small\" className={classNames(Styles.statTitle, 'm-r-half')}>\n                            {s.title}\n                        </Eyebrow>\n\n                        <Tooltip direction=\"t\" portal text={s.description}>\n                            <Icon\n                                name=\"info\"\n                                className=\"m-r-1\"\n                                size=\"14px\"\n                                color={tokens.colorNeutral90}\n                            />\n                        </Tooltip>\n\n                        <StatDiff value={s.value} prev={s.prev} size=\"xsmall\" format={format} />\n                    </Stack>\n                ))}\n            </Stack>\n        </Mask>\n    );\n};\n"],"names":["useMemo","useState","classNames","BodyText","Eyebrow","Headline","Icon","Mask","Popover","Stack","StatusLight","Tooltip","tokens","formatValue","StatDiff","defaultBottomSideLength","defaultTopSideLength","FunnelPyramidSvg","Styles","FunnelChart","sections","format","topSideLength","bottomSideLength","popoverContent","PopoverContent","loading","className","popoverShown","setPopoverShown","undefined","colors","map","s","color","hidePopover","pyramidTextsStyles","left","active","div","pyramidWrapper","pyramidBoxRight","style","id","title","value","prev","textClass","data","ind","flex1","justifyContent","alignItems","onMouseEnter","onMouseLeave","trigger","size","data-cy","open","direction","padding","width","portal","bold","text","pyramidBoxLeft","statTitle","description","name","colorNeutral90"],"mappings":"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"}

package/dist/components/charts/funnel-chart/components/funnel-chart.module.less.d.ts

@@ -0,0 +1,9 @@
+export const __esModule: true;
+export const flex1: string;
+export const pyramidBoxLeft: string;
+export const pyramidBoxRight: string;
+export const pyramidLine: string;
+export const pyramidWrapper: string;
+export const statTitle: string;
+export const title: string;
+

package/dist/components/charts/funnel-chart/components/funnel-svg.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { tokens } from '@servicetitan/tokens/core';
 import { defaultBottomSideLength, defaultTopSideLength } from '../utils/const';
-const st = (v) => v.toFixed(2);
-export const FunnelPyramidSvg = ({ colors, topSideLength = defaultTopSideLength, bottomSideLength = defaultBottomSideLength, }) => {
-    const sections = useMemo(() => {
+const st = (v)=>v.toFixed(2);
+export const FunnelPyramidSvg = ({ colors, topSideLength = defaultTopSideLength, bottomSideLength = defaultBottomSideLength })=>{
+    const sections = useMemo(()=>{
         if (!colors.length) {
             return [];
         }
@@ -12,7 +12,7 @@ export const FunnelPyramidSvg = ({ colors, topSideLength = defaultTopSideLength,
         const yStep = 100 / len;
         const lStep = (topSideLength - Math.min(bottomSideLength, topSideLength)) / (len * 2);
         const xOffset = 100 - topSideLength;
-        return colors.map((color, ind) => {
+        return colors.map((color, ind)=>{
             return {
                 yt: yStep * ind,
                 yb: ind === len - 1 ? 100 : yStep * (ind + 1),
@@ -20,15 +20,19 @@ export const FunnelPyramidSvg = ({ colors, topSideLength = defaultTopSideLength,
                 xtr: 100 - lStep * ind,
                 xbr: 100 - lStep * (ind + 1),
                 xbl: xOffset + lStep * (ind + 1),
-                c: color,
+                c: color
             };
         });
-    }, [colors, topSideLength, bottomSideLength]);
-    const paths = useMemo(() => {
+    }, [
+        colors,
+        topSideLength,
+        bottomSideLength
+    ]);
+    const paths = useMemo(()=>{
         if (!sections.length) {
             return [];
         }
-        return sections.map((s, ind) => {
+        return sections.map((s, ind)=>{
             let path = '';
             path += `M${st(s.xtl)},${st(s.yt)} `;
             path += `L${st(s.xtr)},${st(s.yt)} `;
@@ -38,11 +42,57 @@ export const FunnelPyramidSvg = ({ colors, topSideLength = defaultTopSideLength,
             return {
                 key: ind.toString(),
                 path,
-                color: s.c,
+                color: s.c
             };
         });
-    }, [sections]);
-    const lines = useMemo(() => sections.slice(1).map((s, ind) => [ind, s.xtr, s.yt]), [sections]);
-    return (_jsxs("svg", { width: "100%", height: "100%", preserveAspectRatio: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("svg", { width: "100%", height: "100%", x: "0%", y: "0", viewBox: "0 0 100 100", preserveAspectRatio: "none", xmlns: "http://www.w3.org/2000/svg", children: paths.map(({ key, path, color }) => (_jsx("path", { d: path, fill: color }, key))) }), _jsx("svg", { width: "100%", height: "100%", x: "0", y: "0", viewBox: "0 0 100 100", preserveAspectRatio: "none", xmlns: "http://www.w3.org/2000/svg", children: lines.map(([id, x, y]) => (_jsx("line", { x1: "0", y1: st(y), x2: st(x), y2: st(y), stroke: tokens.colorNeutral60, strokeWidth: 0.5 }, id))) })] }));
+    }, [
+        sections
+    ]);
+    const lines = useMemo(()=>sections.slice(1).map((s, ind)=>[
+                ind,
+                s.xtr,
+                s.yt
+            ]), [
+        sections
+    ]);
+    return /*#__PURE__*/ _jsxs("svg", {
+        width: "100%",
+        height: "100%",
+        preserveAspectRatio: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ _jsx("svg", {
+                width: "100%",
+                height: "100%",
+                x: "0%",
+                y: "0",
+                viewBox: "0 0 100 100",
+                preserveAspectRatio: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: paths.map(({ key, path, color })=>/*#__PURE__*/ _jsx("path", {
+                        d: path,
+                        fill: color
+                    }, key))
+            }),
+            /*#__PURE__*/ _jsx("svg", {
+                width: "100%",
+                height: "100%",
+                x: "0",
+                y: "0",
+                viewBox: "0 0 100 100",
+                preserveAspectRatio: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: lines.map(([id, x, y])=>/*#__PURE__*/ _jsx("line", {
+                        x1: "0",
+                        y1: st(y),
+                        x2: st(x),
+                        y2: st(y),
+                        stroke: tokens.colorNeutral60,
+                        strokeWidth: 0.5
+                    }, id))
+            })
+        ]
+    });
 };
+
 //# sourceMappingURL=funnel-svg.js.map

package/dist/components/charts/funnel-chart/components/funnel-svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"funnel-svg.js","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-svg.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/charts/funnel-chart/components/funnel-svg.tsx"],"sourcesContent":["import { useMemo, FC } from 'react';\nimport { tokens } from '@servicetitan/tokens/core';\nimport { defaultBottomSideLength, defaultTopSideLength } from '../utils/const';\n\nconst st = (v: number) => v.toFixed(2);\n\nexport interface FunnelPyramidSvgProps {\n    colors: string[];\n    topSideLength?: number;\n    bottomSideLength?: number;\n}\n\nexport const FunnelPyramidSvg: FC<FunnelPyramidSvgProps> = ({\n    colors,\n    topSideLength = defaultTopSideLength,\n    bottomSideLength = defaultBottomSideLength,\n}) => {\n    const sections = useMemo(() => {\n        if (!colors.length) {\n            return [];\n        }\n\n        const len = colors.length;\n        const yStep = 100 / len;\n        const lStep = (topSideLength - Math.min(bottomSideLength, topSideLength)) / (len * 2);\n        const xOffset = 100 - topSideLength;\n\n        return colors.map((color, ind) => {\n            return {\n                yt: yStep * ind,\n                yb: ind === len - 1 ? 100 : yStep * (ind + 1),\n                xtl: xOffset + lStep * ind,\n                xtr: 100 - lStep * ind,\n                xbr: 100 - lStep * (ind + 1),\n                xbl: xOffset + lStep * (ind + 1),\n                c: color,\n            };\n        });\n    }, [colors, topSideLength, bottomSideLength]);\n\n    const paths = useMemo(() => {\n        if (!sections.length) {\n            return [];\n        }\n\n        return sections.map((s, ind) => {\n            let path = '';\n\n            path += `M${st(s.xtl)},${st(s.yt)} `;\n            path += `L${st(s.xtr)},${st(s.yt)} `;\n            path += `L${st(s.xbr)},${st(s.yb)} `;\n            path += `L${st(s.xbl)},${st(s.yb)} `;\n            path += 'Z';\n\n            return {\n                key: ind.toString(),\n                path,\n                color: s.c,\n            };\n        });\n    }, [sections]);\n\n    const lines = useMemo(() => sections.slice(1).map((s, ind) => [ind, s.xtr, s.yt]), [sections]);\n\n    return (\n        <svg\n            width=\"100%\"\n            height=\"100%\"\n            preserveAspectRatio=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n        >\n            <svg\n                width=\"100%\"\n                height=\"100%\"\n                x=\"0%\"\n                y=\"0\"\n                viewBox=\"0 0 100 100\"\n                preserveAspectRatio=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n            >\n                {paths.map(({ key, path, color }) => (\n                    <path key={key} d={path} fill={color} />\n                ))}\n            </svg>\n            <svg\n                width=\"100%\"\n                height=\"100%\"\n                x=\"0\"\n                y=\"0\"\n                viewBox=\"0 0 100 100\"\n                preserveAspectRatio=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n            >\n                {lines.map(([id, x, y]) => (\n                    <line\n                        key={id}\n                        x1=\"0\"\n                        y1={st(y)}\n                        x2={st(x)}\n                        y2={st(y)}\n                        stroke={tokens.colorNeutral60}\n                        strokeWidth={0.5}\n                    />\n                ))}\n            </svg>\n        </svg>\n    );\n};\n"],"names":["useMemo","tokens","defaultBottomSideLength","defaultTopSideLength","st","v","toFixed","FunnelPyramidSvg","colors","topSideLength","bottomSideLength","sections","length","len","yStep","lStep","Math","min","xOffset","map","color","ind","yt","yb","xtl","xtr","xbr","xbl","c","paths","s","path","key","toString","lines","slice","svg","width","height","preserveAspectRatio","xmlns","x","y","viewBox","d","fill","id","line","x1","y1","x2","y2","stroke","colorNeutral60","strokeWidth"],"mappings":"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"}

package/dist/components/charts/funnel-chart/index.js

@@ -1,3 +1,4 @@
 export { FunnelChart } from './components/funnel-chart';
 export * from './utils/interface';
+
 //# sourceMappingURL=index.js.map

package/dist/components/charts/funnel-chart/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/charts/funnel-chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,cAAc,mBAAmB,CAAC"}
+{"version":3,"sources":["../../../../src/components/charts/funnel-chart/index.ts"],"sourcesContent":["export { FunnelChart } from './components/funnel-chart';\nexport * from './utils/interface';\n"],"names":["FunnelChart"],"mappings":"AAAA,SAASA,WAAW,QAAQ,4BAA4B;AACxD,cAAc,oBAAoB"}

package/dist/components/charts/funnel-chart/utils/const.js

@@ -1,3 +1,4 @@
 export const defaultTopSideLength = 66;
 export const defaultBottomSideLength = 30;
+
 //# sourceMappingURL=const.js.map

package/dist/components/charts/funnel-chart/utils/const.js.map

@@ -1 +1 @@
-{"version":3,"file":"const.js","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/utils/const.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC;AACvC,MAAM,CAAC,MAAM,uBAAuB,GAAG,EAAE,CAAC"}
+{"version":3,"sources":["../../../../../src/components/charts/funnel-chart/utils/const.ts"],"sourcesContent":["export const defaultTopSideLength = 66;\nexport const defaultBottomSideLength = 30;\n"],"names":["defaultTopSideLength","defaultBottomSideLength"],"mappings":"AAAA,OAAO,MAAMA,uBAAuB,GAAG;AACvC,OAAO,MAAMC,0BAA0B,GAAG"}

package/dist/components/charts/funnel-chart/utils/interface.js

@@ -1,2 +1,3 @@
-export {};
+export { };
+
 //# sourceMappingURL=interface.js.map

package/dist/components/charts/funnel-chart/utils/interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"interface.js","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/utils/interface.ts"],"names":[],"mappings":""}
+{"version":3,"sources":["../../../../../src/components/charts/funnel-chart/utils/interface.ts"],"sourcesContent":["import { FC } from 'react';\nimport { NumberFormatter } from '../../../../utils/formatters';\n\nexport interface FunnelChartSection<T> {\n    id: number;\n    title: string;\n    description: string;\n    value: number;\n    prev?: number;\n    color: string;\n    textClass?: string;\n    data?: T;\n}\n\nexport type FunnelChartPopoverContentType<T = any> = FC<{\n    id: number;\n    value: number;\n    text: string;\n    data?: T;\n}>;\n\nexport interface FunnelChartProps<T = any> {\n    sections: FunnelChartSection<T>[];\n    format: NumberFormatter;\n    popoverContent?: FunnelChartPopoverContentType<T>;\n    topSideLength?: number;\n    bottomSideLength?: number;\n    loading?: boolean;\n    className?: string;\n}\n"],"names":[],"mappings":"AAqBA,WAQC"}

package/dist/components/charts/line-chart/components/body.js

@@ -13,24 +13,113 @@ import { MetricsTitle, XAxisLabels } from './stuff';
 import { SvgBody, SvgBodyHover } from './svg-body';
 import { HoverPopover } from './hover-popover';
 import * as Styles from './body.module.less';
-export const Body = provide({ singletons: [SvgStore] })(observer(({ classNameTitle }) => {
-    var _a, _b, _c;
+export const Body = provide({
+    singletons: [
+        SvgStore
+    ]
+})(observer(({ classNameTitle })=>{
     const [{ display, metrics, left, right, periods, resolution, setHoveredIndex }, svgStore] = useDependencies(LineChartStore, SvgStore);
-    useEffect(() => {
-        var _a, _b;
-        svgStore.init(periods.length, metrics, (_a = left === null || left === void 0 ? void 0 : left.maxValue) !== null && _a !== void 0 ? _a : 0, (_b = right === null || right === void 0 ? void 0 : right.maxValue) !== null && _b !== void 0 ? _b : 0);
-    }, [svgStore, periods, metrics, left, right]);
+    useEffect(()=>{
+        var _left_maxValue, _right_maxValue;
+        svgStore.init(periods.length, metrics, (_left_maxValue = left === null || left === void 0 ? void 0 : left.maxValue) !== null && _left_maxValue !== void 0 ? _left_maxValue : 0, (_right_maxValue = right === null || right === void 0 ? void 0 : right.maxValue) !== null && _right_maxValue !== void 0 ? _right_maxValue : 0);
+    }, [
+        svgStore,
+        periods,
+        metrics,
+        left,
+        right
+    ]);
     const [rect, ref] = useClientRect();
-    const onBarHover = useCallback((ind) => setHoveredIndex(ind, true), [setHoveredIndex]);
-    const onBarLeave = useCallback((ind) => setHoveredIndex(ind, false), [setHoveredIndex]);
-    const labels = useMemo(() => { var _a; return (display.xLabels ? getXLabels(periods, resolution, (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0) : []); }, [display, periods, resolution, rect]);
-    return (_jsxs("div", { className: "d-f flex-column", children: [_jsxs(Stack, { alignItems: "stretch", children: [left && _jsx(Sidebar, { settings: left, classNameTitle: classNameTitle }), _jsx(Stack.Item, { fill: true, children: _jsx("div", { ref: ref, className: classNames(Styles.chartWrapper, 'border-bottom', {
+    const onBarHover = useCallback((ind)=>setHoveredIndex(ind, true), [
+        setHoveredIndex
+    ]);
+    const onBarLeave = useCallback((ind)=>setHoveredIndex(ind, false), [
+        setHoveredIndex
+    ]);
+    const labels = useMemo(()=>{
+        var _rect_width;
+        return display.xLabels ? getXLabels(periods, resolution, (_rect_width = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _rect_width !== void 0 ? _rect_width : 0) : [];
+    }, [
+        display,
+        periods,
+        resolution,
+        rect
+    ]);
+    var _rect_width, _left_width, _right_width;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "d-f flex-column",
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                alignItems: "stretch",
+                children: [
+                    left && /*#__PURE__*/ _jsx(Sidebar, {
+                        settings: left,
+                        classNameTitle: classNameTitle
+                    }),
+                    /*#__PURE__*/ _jsx(Stack.Item, {
+                        fill: true,
+                        children: /*#__PURE__*/ _jsx("div", {
+                            ref: ref,
+                            className: classNames(Styles.chartWrapper, 'border-bottom', {
                                 'border-left': !!left && display.yLeft,
-                                'border-right': !!right && display.yRight,
-                            }), children: periods.length ? (_jsxs(Fragment, { children: [periods.length !== labels.length && (_jsx("div", { className: Styles.labelBorders, children: labels
-                                            .map(([text, flex], ind) => [flex, `${ind}${text}`])
-                                            .map(([flex, key]) => (_jsx("div", { style: { flex } }, key))) })), _jsx(SvgBody, { horizontalGrid: display.yGrid, metrics: metrics }), _jsx(HoverPopover, {}), _jsx(SvgBodyHover, { onValueHover: onBarHover, onValueLeave: onBarLeave })] })) : (_jsx(Stack, { className: "h-100", justifyContent: "center", alignItems: "center", children: "No Data" })) }) }), right && _jsx(Sidebar, { settings: right, right: true, classNameTitle: classNameTitle })] }), display.xLabels && (_jsx(XAxisLabels, { labels: labels, width: (_a = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _a !== void 0 ? _a : 0, left: (_b = left === null || left === void 0 ? void 0 : left.width) !== null && _b !== void 0 ? _b : 0, right: (_c = right === null || right === void 0 ? void 0 : right.width) !== null && _c !== void 0 ? _c : 0, labelsMerged: periods.length !== labels.length, hasBars: !!metrics.filter(m => m.type === 'bar' ||
-                    m.type === 'stacked-bar' ||
-                    m.type === 'grouped-bar').length })), display.metricsTitlePosition === 'bottom' && (_jsx(Stack, { direction: "row", justifyContent: "center", className: "p-3", children: _jsx(MetricsTitle, { metrics: metrics }) }))] }));
+                                'border-right': !!right && display.yRight
+                            }),
+                            children: periods.length ? /*#__PURE__*/ _jsxs(Fragment, {
+                                children: [
+                                    periods.length !== labels.length && /*#__PURE__*/ _jsx("div", {
+                                        className: Styles.labelBorders,
+                                        children: labels.map(([text, flex], ind)=>[
+                                                flex,
+                                                `${ind}${text}`
+                                            ]).map(([flex, key])=>/*#__PURE__*/ _jsx("div", {
+                                                style: {
+                                                    flex
+                                                }
+                                            }, key))
+                                    }),
+                                    /*#__PURE__*/ _jsx(SvgBody, {
+                                        horizontalGrid: display.yGrid,
+                                        metrics: metrics
+                                    }),
+                                    /*#__PURE__*/ _jsx(HoverPopover, {}),
+                                    /*#__PURE__*/ _jsx(SvgBodyHover, {
+                                        onValueHover: onBarHover,
+                                        onValueLeave: onBarLeave
+                                    })
+                                ]
+                            }) : /*#__PURE__*/ _jsx(Stack, {
+                                className: "h-100",
+                                justifyContent: "center",
+                                alignItems: "center",
+                                children: "No Data"
+                            })
+                        })
+                    }),
+                    right && /*#__PURE__*/ _jsx(Sidebar, {
+                        settings: right,
+                        right: true,
+                        classNameTitle: classNameTitle
+                    })
+                ]
+            }),
+            display.xLabels && /*#__PURE__*/ _jsx(XAxisLabels, {
+                labels: labels,
+                width: (_rect_width = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _rect_width !== void 0 ? _rect_width : 0,
+                left: (_left_width = left === null || left === void 0 ? void 0 : left.width) !== null && _left_width !== void 0 ? _left_width : 0,
+                right: (_right_width = right === null || right === void 0 ? void 0 : right.width) !== null && _right_width !== void 0 ? _right_width : 0,
+                labelsMerged: periods.length !== labels.length,
+                hasBars: !!metrics.filter((m)=>m.type === 'bar' || m.type === 'stacked-bar' || m.type === 'grouped-bar').length
+            }),
+            display.metricsTitlePosition === 'bottom' && /*#__PURE__*/ _jsx(Stack, {
+                direction: "row",
+                justifyContent: "center",
+                className: "p-3",
+                children: /*#__PURE__*/ _jsx(MetricsTitle, {
+                    metrics: metrics
+                })
+            })
+        ]
+    });
 }));
+
 //# sourceMappingURL=body.js.map