@servicetitan/marketing-ui 5.11.1 → 6.0.0

package/dist/components/charts/common/color-tag.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+interface ColorTagProps {
+    label: string;
+    color: string;
+    className?: string;
+    colorTagClassName?: string;
+    small?: boolean;
+    dashed?: boolean;
+    strokeColor?: string;
+    outlineColor?: string;
+    pattern?: 'solid' | 'striped' | 'outline';
+}
+export declare const ColorTag: FC<ColorTagProps>;
+export {};
+//# sourceMappingURL=color-tag.d.ts.map

package/dist/components/charts/common/color-tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-tag.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/common/color-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAS,MAAM,OAAO,CAAC;AAKlC,UAAU,aAAa;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;CAC7C;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA0EtC,CAAC"}

package/dist/components/charts/common/color-tag.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import classNames from 'classnames';
+import { BodyText, Stack } from '@servicetitan/design-system';
+import * as Styles from './color-tag.module.less';
+export const ColorTag = ({ label, color, className, small, dashed, outlineColor, pattern, strokeColor, colorTagClassName })=>{
+    const uid = useId();
+    const patternId = `pattern-${uid}`;
+    const width = small ? 50 : 22;
+    const height = small ? 10 : 25;
+    const radius = small ? 0 : 3;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        alignItems: "center",
+        className: className,
+        gap: 1,
+        children: [
+            pattern === 'striped' ? /*#__PURE__*/ _jsxs("svg", {
+                width: width,
+                height: height,
+                viewBox: `0 0 ${width} ${height}`,
+                className: classNames(Styles.colorTag, colorTagClassName),
+                "aria-hidden": true,
+                children: [
+                    /*#__PURE__*/ _jsx("defs", {
+                        children: /*#__PURE__*/ _jsxs("pattern", {
+                            id: patternId,
+                            patternUnits: "userSpaceOnUse",
+                            width: "8",
+                            height: "8",
+                            patternTransform: "rotate(45)",
+                            children: [
+                                /*#__PURE__*/ _jsx("rect", {
+                                    width: "4",
+                                    height: "8",
+                                    fill: color,
+                                    opacity: "0.08"
+                                }),
+                                /*#__PURE__*/ _jsx("rect", {
+                                    width: "2",
+                                    height: "8",
+                                    fill: color
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("rect", {
+                        x: "0",
+                        y: "0",
+                        width: width,
+                        height: height,
+                        rx: radius,
+                        ry: radius,
+                        fill: `url(#${patternId})`,
+                        stroke: strokeColor !== null && strokeColor !== void 0 ? strokeColor : color,
+                        strokeWidth: 1,
+                        vectorEffect: "non-scaling-stroke"
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsx("div", {
+                className: classNames(Styles.colorTag, small && Styles.colorTagSmall, dashed && Styles.colorTagDashed, pattern === 'outline' && Styles.colorTagOutline, colorTagClassName),
+                style: dashed ? {
+                    borderColor: strokeColor !== null && strokeColor !== void 0 ? strokeColor : color
+                } : pattern === 'outline' ? {
+                    borderColor: outlineColor !== null && outlineColor !== void 0 ? outlineColor : color,
+                    borderRadius: radius
+                } : {
+                    backgroundColor: color,
+                    borderRadius: radius
+                }
+            }),
+            /*#__PURE__*/ _jsx(BodyText, {
+                size: small ? 'xsmall' : 'small',
+                children: label
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=color-tag.js.map

package/dist/components/charts/common/color-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/charts/common/color-tag.tsx"],"sourcesContent":["import { FC, useId } from 'react';\nimport classNames from 'classnames';\nimport { BodyText, Stack } from '@servicetitan/design-system';\nimport * as Styles from './color-tag.module.less';\n\ninterface ColorTagProps {\n    label: string;\n    color: string;\n    className?: string;\n    colorTagClassName?: string;\n    small?: boolean;\n    dashed?: boolean;\n    strokeColor?: string;\n    outlineColor?: string;\n    pattern?: 'solid' | 'striped' | 'outline';\n}\n\nexport const ColorTag: FC<ColorTagProps> = ({\n    label,\n    color,\n    className,\n    small,\n    dashed,\n    outlineColor,\n    pattern,\n    strokeColor,\n    colorTagClassName,\n}) => {\n    const uid = useId();\n    const patternId = `pattern-${uid}`;\n\n    const width = small ? 50 : 22;\n    const height = small ? 10 : 25;\n    const radius = small ? 0 : 3;\n\n    return (\n        <Stack alignItems=\"center\" className={className} gap={1}>\n            {pattern === 'striped' ? (\n                <svg\n                    width={width}\n                    height={height}\n                    viewBox={`0 0 ${width} ${height}`}\n                    className={classNames(Styles.colorTag, colorTagClassName)}\n                    aria-hidden\n                >\n                    <defs>\n                        <pattern\n                            id={patternId}\n                            patternUnits=\"userSpaceOnUse\"\n                            width=\"8\"\n                            height=\"8\"\n                            patternTransform=\"rotate(45)\"\n                        >\n                            <rect width=\"4\" height=\"8\" fill={color} opacity=\"0.08\" />\n                            <rect width=\"2\" height=\"8\" fill={color} />\n                        </pattern>\n                    </defs>\n                    <rect\n                        x=\"0\"\n                        y=\"0\"\n                        width={width}\n                        height={height}\n                        rx={radius}\n                        ry={radius}\n                        fill={`url(#${patternId})`}\n                        stroke={strokeColor ?? color}\n                        strokeWidth={1}\n                        vectorEffect=\"non-scaling-stroke\"\n                    />\n                </svg>\n            ) : (\n                <div\n                    className={classNames(\n                        Styles.colorTag,\n                        small && Styles.colorTagSmall,\n                        dashed && Styles.colorTagDashed,\n                        pattern === 'outline' && Styles.colorTagOutline,\n                        colorTagClassName\n                    )}\n                    style={\n                        dashed\n                            ? { borderColor: strokeColor ?? color }\n                            : pattern === 'outline'\n                              ? { borderColor: outlineColor ?? color, borderRadius: radius }\n                              : { backgroundColor: color, borderRadius: radius }\n                    }\n                />\n            )}\n            <BodyText size={small ? 'xsmall' : 'small'}>{label}</BodyText>\n        </Stack>\n    );\n};\n"],"names":["useId","classNames","BodyText","Stack","Styles","ColorTag","label","color","className","small","dashed","outlineColor","pattern","strokeColor","colorTagClassName","uid","patternId","width","height","radius","alignItems","gap","svg","viewBox","colorTag","aria-hidden","defs","id","patternUnits","patternTransform","rect","fill","opacity","x","y","rx","ry","stroke","strokeWidth","vectorEffect","div","colorTagSmall","colorTagDashed","colorTagOutline","style","borderColor","borderRadius","backgroundColor","size"],"mappings":";AAAA,SAAaA,KAAK,QAAQ,QAAQ;AAClC,OAAOC,gBAAgB,aAAa;AACpC,SAASC,QAAQ,EAAEC,KAAK,QAAQ,8BAA8B;AAC9D,YAAYC,YAAY,0BAA0B;AAclD,OAAO,MAAMC,WAA8B,CAAC,EACxCC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,YAAY,EACZC,OAAO,EACPC,WAAW,EACXC,iBAAiB,EACpB;IACG,MAAMC,MAAMf;IACZ,MAAMgB,YAAY,CAAC,QAAQ,EAAED,KAAK;IAElC,MAAME,QAAQR,QAAQ,KAAK;IAC3B,MAAMS,SAAST,QAAQ,KAAK;IAC5B,MAAMU,SAASV,QAAQ,IAAI;IAE3B,qBACI,MAACN;QAAMiB,YAAW;QAASZ,WAAWA;QAAWa,KAAK;;YACjDT,YAAY,0BACT,MAACU;gBACGL,OAAOA;gBACPC,QAAQA;gBACRK,SAAS,CAAC,IAAI,EAAEN,MAAM,CAAC,EAAEC,QAAQ;gBACjCV,WAAWP,WAAWG,OAAOoB,QAAQ,EAAEV;gBACvCW,aAAW;;kCAEX,KAACC;kCACG,cAAA,MAACd;4BACGe,IAAIX;4BACJY,cAAa;4BACbX,OAAM;4BACNC,QAAO;4BACPW,kBAAiB;;8CAEjB,KAACC;oCAAKb,OAAM;oCAAIC,QAAO;oCAAIa,MAAMxB;oCAAOyB,SAAQ;;8CAChD,KAACF;oCAAKb,OAAM;oCAAIC,QAAO;oCAAIa,MAAMxB;;;;;kCAGzC,KAACuB;wBACGG,GAAE;wBACFC,GAAE;wBACFjB,OAAOA;wBACPC,QAAQA;wBACRiB,IAAIhB;wBACJiB,IAAIjB;wBACJY,MAAM,CAAC,KAAK,EAAEf,UAAU,CAAC,CAAC;wBAC1BqB,QAAQxB,wBAAAA,yBAAAA,cAAeN;wBACvB+B,aAAa;wBACbC,cAAa;;;+BAIrB,KAACC;gBACGhC,WAAWP,WACPG,OAAOoB,QAAQ,EACff,SAASL,OAAOqC,aAAa,EAC7B/B,UAAUN,OAAOsC,cAAc,EAC/B9B,YAAY,aAAaR,OAAOuC,eAAe,EAC/C7B;gBAEJ8B,OACIlC,SACM;oBAAEmC,aAAahC,wBAAAA,yBAAAA,cAAeN;gBAAM,IACpCK,YAAY,YACV;oBAAEiC,aAAalC,yBAAAA,0BAAAA,eAAgBJ;oBAAOuC,cAAc3B;gBAAO,IAC3D;oBAAE4B,iBAAiBxC;oBAAOuC,cAAc3B;gBAAO;;0BAInE,KAACjB;gBAAS8C,MAAMvC,QAAQ,WAAW;0BAAUH;;;;AAGzD,EAAE"}

package/dist/components/charts/common/color-tag.module.less

@@ -0,0 +1,23 @@
+@import (reference) '~@servicetitan/tokens/core/tokens.less';
+
+.color-tag {
+    width: 15px;
+    height: 15px;
+    margin-right: @spacing-1;
+    border-radius: 4px;
+}
+
+.color-tag-outline {
+    border-style: solid;
+    border-width: 1px;
+}
+
+.color-tag-dashed {
+    height: 0;
+    border-top-style: dashed;
+    border-top-width: 3px;
+}
+
+.color-tag-small {
+    width: @spacing-2;
+}

package/dist/components/charts/common/color-tag.module.less.d.ts

@@ -0,0 +1,6 @@
+export const __esModule: true;
+export const colorTag: string;
+export const colorTagDashed: string;
+export const colorTagOutline: string;
+export const colorTagSmall: string;
+

package/dist/components/charts/common/index.d.ts

@@ -0,0 +1,2 @@
+export { ColorTag } from './color-tag';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/charts/common/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/common/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/charts/common/index.js

@@ -0,0 +1,3 @@
+export { ColorTag } from './color-tag';
+
+//# sourceMappingURL=index.js.map

package/dist/components/charts/common/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/charts/common/index.ts"],"sourcesContent":["export { ColorTag } from './color-tag';\n"],"names":["ColorTag"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc"}

package/dist/components/charts/funnel-chart/components/funnel-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"funnel-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,EAAE,EAAE,MAAM,OAAO,CAAC;AAgB9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAKtD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAyH5C,CAAC"}
+{"version":3,"file":"funnel-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,EAAE,EAAY,MAAM,OAAO,CAAC;AAMxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAOtD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA8J5C,CAAC"}

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

@@ -1,21 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
+import { useMemo, useState, Fragment } from 'react';
 import classNames from 'classnames';
-import { BodyText, Eyebrow, Headline, Icon, Mask, Popover, Stack, StatusLight, Tooltip } from '@servicetitan/design-system';
+import { BodyText, Eyebrow, Icon, Mask, Stack, 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';
+import { Popover } from '@servicetitan/anvil2';
+import { ColorTag } from '../../common';
 export const FunnelChart = ({ sections, format, topSideLength = defaultTopSideLength, bottomSideLength = defaultBottomSideLength, popoverContent: PopoverContent, loading, className })=>{
     const [popoverShown, setPopoverShown] = useState(undefined);
+    const [rowYs, setRowYs] = useState([]);
     const colors = useMemo(()=>sections.map((s)=>s.color), [
         sections
     ]);
+    const outlineColors = useMemo(()=>sections.map((s)=>s.outlineColor), [
+        sections
+    ]);
     const hidePopover = ()=>setPopoverShown(undefined);
-    const pyramidTextsStyles = useMemo(()=>({
-            left: `${100 - topSideLength}%`
+    const rightStyles = useMemo(()=>({
+            left: `${100 - topSideLength}%`,
+            width: `${topSideLength}%`
         }), [
         topSideLength
     ]);
@@ -27,101 +34,139 @@ export const FunnelChart = ({ sections, format, topSideLength = defaultTopSideLe
                 className: Styles.pyramidWrapper,
                 children: /*#__PURE__*/ _jsx(FunnelPyramidSvg, {
                     colors: colors,
+                    outlineColors: outlineColors,
                     topSideLength: topSideLength,
-                    bottomSideLength: bottomSideLength
+                    bottomSideLength: bottomSideLength,
+                    onRowAnchors: setRowYs
                 })
             }),
             /*#__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, {
+                style: rightStyles,
+                children: sections.map(({ id, title, value, color, prev, data, outlineColor })=>/*#__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,
+                            openOnHover: true,
+                            placement: "right",
                             children: [
-                                /*#__PURE__*/ _jsxs(Stack, {
-                                    alignItems: "center",
-                                    justifyContent: "flex-start",
-                                    "data-cy": `marketing-funnel-popover-${id}-content`,
+                                /*#__PURE__*/ _jsx(Popover.Trigger, {
+                                    children: (props)=>/*#__PURE__*/ _jsx("span", {
+                                            ...props,
+                                            children: /*#__PURE__*/ _jsx("div", {
+                                                className: Styles.percentTextWrapper,
+                                                children: /*#__PURE__*/ _jsx(BodyText, {
+                                                    className: classNames('m-x-2 m-b-0-i'),
+                                                    "data-cy": `marketing-funnel-section-${id}-value`,
+                                                    children: formatValue(value, format)
+                                                })
+                                            })
+                                        })
+                                }),
+                                /*#__PURE__*/ _jsxs(Popover.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__*/ _jsxs(Stack, {
+                                            alignItems: "flex-start",
+                                            justifyContent: "flex-start",
+                                            direction: "column",
+                                            "data-cy": `marketing-funnel-popover-${id}-content`,
+                                            children: [
+                                                /*#__PURE__*/ _jsxs(Stack, {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(ColorTag, {
+                                                            label: "",
+                                                            color: color,
+                                                            outlineColor: outlineColor,
+                                                            pattern: outlineColor ? 'outline' : 'solid'
+                                                        }),
+                                                        /*#__PURE__*/ _jsxs(BodyText, {
+                                                            bold: true,
+                                                            className: "m-r-half",
+                                                            children: [
+                                                                title,
+                                                                " ",
+                                                                formatValue(value, format)
+                                                            ]
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsx(Stack.Item, {
+                                                    children: /*#__PURE__*/ _jsx(StatDiff, {
+                                                        value: value,
+                                                        prev: prev,
+                                                        size: "xsmall",
+                                                        format: format
+                                                    })
+                                                })
+                                            ]
                                         }),
-                                        /*#__PURE__*/ _jsx(StatDiff, {
+                                        !!PopoverContent && /*#__PURE__*/ _jsx(PopoverContent, {
+                                            id: id,
                                             value: value,
-                                            prev: prev,
-                                            size: "xsmall",
-                                            format: format
+                                            text: formatValue(value, format),
+                                            data: data
                                         })
                                     ]
-                                }),
-                                !!PopoverContent && /*#__PURE__*/ _jsx(PopoverContent, {
-                                    id: id,
-                                    value: value,
-                                    text: formatValue(value, format),
-                                    data: data
                                 })
                             ]
                         })
                     }, title))
             }),
-            /*#__PURE__*/ _jsx(Stack, {
+            /*#__PURE__*/ _jsx("div", {
                 className: Styles.pyramidBoxLeft,
-                direction: "column",
-                children: sections.map((s)=>/*#__PURE__*/ _jsxs(Stack, {
-                        className: Styles.flex1,
-                        justifyContent: "flex-start",
-                        alignItems: "flex-end",
+                style: {
+                    width: `${100 - topSideLength}%`
+                },
+                children: sections.map((s, i)=>{
+                    var _rowYs_i;
+                    const y = (_rowYs_i = rowYs[i]) !== null && _rowYs_i !== void 0 ? _rowYs_i : 0;
+                    const TITLE_UP = 24;
+                    const DIFF_DOWN = 4;
+                    return /*#__PURE__*/ _jsxs(Fragment, {
                         children: [
-                            /*#__PURE__*/ _jsx(Eyebrow, {
-                                size: "small",
-                                className: classNames(Styles.statTitle, 'm-r-half'),
-                                children: s.title
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: Styles.leftTitle,
+                                style: {
+                                    top: `calc(${y}% - ${TITLE_UP}px)`
+                                },
+                                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(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("div", {
+                                className: Styles.leftDiff,
+                                style: {
+                                    top: `calc(${y}% + ${DIFF_DOWN}px)`
+                                },
+                                children: /*#__PURE__*/ _jsx(StatDiff, {
+                                    value: s.value,
+                                    prev: s.prev,
+                                    size: "small",
+                                    format: format
                                 })
-                            }),
-                            /*#__PURE__*/ _jsx(StatDiff, {
-                                value: s.value,
-                                prev: s.prev,
-                                size: "xsmall",
-                                format: format
                             })
                         ]
-                    }, s.id))
+                    }, s.id);
+                })
             })
         ]
     });

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

@@ -1 +1 @@
-{"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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"}
+{"version":3,"sources":["../../../../../src/components/charts/funnel-chart/components/funnel-chart.tsx"],"sourcesContent":["import { useMemo, useState, FC, Fragment } from 'react';\nimport classNames from 'classnames';\nimport { BodyText, Eyebrow, Icon, Mask, Stack, Tooltip } 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';\nimport { Popover } from '@servicetitan/anvil2';\nimport { ColorTag } from '../../common';\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    const [rowYs, setRowYs] = useState<number[]>([]);\n    const colors = useMemo(() => sections.map(s => s.color), [sections]);\n    const outlineColors = useMemo(() => sections.map(s => s.outlineColor), [sections]);\n    const hidePopover = () => setPopoverShown(undefined);\n\n    const rightStyles = useMemo(\n        () => ({\n            left: `${100 - topSideLength}%`,\n            width: `${topSideLength}%`,\n        }),\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                    outlineColors={outlineColors}\n                    topSideLength={topSideLength}\n                    bottomSideLength={bottomSideLength}\n                    onRowAnchors={setRowYs}\n                />\n            </div>\n\n            <div\n                className={classNames(\n                    'd-f flex-column justify-content-around',\n                    Styles.pyramidBoxRight\n                )}\n                style={rightStyles}\n            >\n                {sections.map(({ id, title, value, color, prev, data, outlineColor }) => (\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 open={popoverShown === id} openOnHover placement=\"right\">\n                            <Popover.Trigger>\n                                {props => (\n                                    <span {...props}>\n                                        <div className={Styles.percentTextWrapper}>\n                                            <BodyText\n                                                className={classNames('m-x-2 m-b-0-i')}\n                                                data-cy={`marketing-funnel-section-${id}-value`}\n                                            >\n                                                {formatValue(value, format)}\n                                            </BodyText>\n                                        </div>\n                                    </span>\n                                )}\n                            </Popover.Trigger>\n                            <Popover.Content>\n                                <Stack\n                                    alignItems=\"flex-start\"\n                                    justifyContent=\"flex-start\"\n                                    direction=\"column\"\n                                    data-cy={`marketing-funnel-popover-${id}-content`}\n                                >\n                                    <Stack>\n                                        <ColorTag\n                                            label=\"\"\n                                            color={color}\n                                            outlineColor={outlineColor}\n                                            pattern={outlineColor ? 'outline' : 'solid'}\n                                        />\n                                        <BodyText bold className=\"m-r-half\">\n                                            {title} {formatValue(value, format)}\n                                        </BodyText>\n                                    </Stack>\n                                    <Stack.Item>\n                                        <StatDiff\n                                            value={value}\n                                            prev={prev}\n                                            size=\"xsmall\"\n                                            format={format}\n                                        />\n                                    </Stack.Item>\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.Content>\n                        </Popover>\n                    </Stack>\n                ))}\n            </div>\n            <div className={Styles.pyramidBoxLeft} style={{ width: `${100 - topSideLength}%` }}>\n                {sections.map((s, i) => {\n                    const y = rowYs[i] ?? 0;\n                    const TITLE_UP = 24;\n                    const DIFF_DOWN = 4;\n\n                    return (\n                        <Fragment key={s.id}>\n                            <div\n                                className={Styles.leftTitle}\n                                style={{ top: `calc(${y}% - ${TITLE_UP}px)` }}\n                            >\n                                <Eyebrow\n                                    size=\"small\"\n                                    className={classNames(Styles.statTitle, 'm-r-half')}\n                                >\n                                    {s.title}\n                                </Eyebrow>\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                            </div>\n\n                            <div\n                                className={Styles.leftDiff}\n                                style={{ top: `calc(${y}% + ${DIFF_DOWN}px)` }}\n                            >\n                                <StatDiff\n                                    value={s.value}\n                                    prev={s.prev}\n                                    size=\"small\"\n                                    format={format}\n                                />\n                            </div>\n                        </Fragment>\n                    );\n                })}\n            </div>\n        </Mask>\n    );\n};\n"],"names":["useMemo","useState","Fragment","classNames","BodyText","Eyebrow","Icon","Mask","Stack","Tooltip","tokens","formatValue","StatDiff","defaultBottomSideLength","defaultTopSideLength","FunnelPyramidSvg","Styles","Popover","ColorTag","FunnelChart","sections","format","topSideLength","bottomSideLength","popoverContent","PopoverContent","loading","className","popoverShown","setPopoverShown","undefined","rowYs","setRowYs","colors","map","s","color","outlineColors","outlineColor","hidePopover","rightStyles","left","width","active","div","pyramidWrapper","onRowAnchors","pyramidBoxRight","style","id","title","value","prev","data","flex1","justifyContent","alignItems","onMouseEnter","onMouseLeave","open","openOnHover","placement","Trigger","props","span","percentTextWrapper","data-cy","Content","direction","label","pattern","bold","Item","size","text","pyramidBoxLeft","i","y","TITLE_UP","DIFF_DOWN","leftTitle","top","statTitle","portal","description","name","colorNeutral90","leftDiff"],"mappings":"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"}

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

@@ -8,31 +8,49 @@
     border-style: dashed;
 }
 
+.percent-text-wrapper {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: @border-radius-circular;
+    background: rgba(255, 255, 255, 0.8);
+
+    :global(.BodyText) {
+        font-size: @typescale-0;
+    }
+}
+
 .stat-title {
     white-space: nowrap;
 }
 
 .pyramid-wrapper {
     position: absolute;
-    inset: @spacing-3;
-
-    .pyramid-line {
-        stroke: @color-neutral-60;
-        stroke-width: 2;
-    }
+    inset: @spacing-3; // your existing chart padding
 }
 
-.pyramid-box-left,
 .pyramid-box-right {
     position: absolute;
     inset: @spacing-3;
+    z-index: 5;
 }
 
 .pyramid-box-left {
+    position: absolute;
+    top: @spacing-3;
+    bottom: @spacing-3;
+    left: @spacing-3;
     z-index: 4;
-    width: 100%;
+    pointer-events: auto;
 }
 
-.pyramid-box-right {
-    z-index: 5;
+.leftTitle,
+.leftDiff {
+    position: absolute;
+    left: 0;
+    display: flex;
+    justify-content: flex-end;
+    align-items: end;
 }

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

@@ -1,8 +1,10 @@
 export const __esModule: true;
 export const flex1: string;
+export const leftDiff: string;
+export const leftTitle: string;
+export const percentTextWrapper: 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.d.ts

@@ -3,6 +3,8 @@ export interface FunnelPyramidSvgProps {
     colors: string[];
     topSideLength?: number;
     bottomSideLength?: number;
+    outlineColors?: (string | undefined)[];
+    onRowAnchors?: (ysPct: number[]) => void;
 }
 export declare const FunnelPyramidSvg: FC<FunnelPyramidSvgProps>;
 //# sourceMappingURL=funnel-svg.d.ts.map

package/dist/components/charts/funnel-chart/components/funnel-svg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"funnel-svg.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-svg.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAE,MAAM,OAAO,CAAC;AAMpC,MAAM,WAAW,qBAAqB;IAClC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA+FtD,CAAC"}
+{"version":3,"file":"funnel-svg.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/funnel-chart/components/funnel-svg.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAa,MAAM,OAAO,CAAC;AAO/C,MAAM,WAAW,qBAAqB;IAClC,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IACvC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5C;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAgKtD,CAAC"}