@servicetitan/marketing-ui 7.3.0 → 7.5.0

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

@@ -1 +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"}
+{"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,CA8EtC,CAAC"}

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

@@ -62,6 +62,7 @@ export const ColorTag = ({ label, color, className, small, dashed, outlineColor,
                     borderColor: strokeColor !== null && strokeColor !== void 0 ? strokeColor : color
                 } : pattern === 'outline' ? {
                     borderColor: outlineColor !== null && outlineColor !== void 0 ? outlineColor : color,
+                    backgroundColor: color,
                     borderRadius: radius
                 } : {
                     backgroundColor: color,

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

@@ -1 +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,MAAM,EAAExB,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,WAAW,EAAEhC,wBAAAA,yBAAAA,cAAeN;gBAAM,IACpCK,YAAY,YACV;oBAAEiC,WAAW,EAAElC,yBAAAA,0BAAAA,eAAgBJ;oBAAOuC,cAAc3B;gBAAO,IAC3D;oBAAE4B,iBAAiBxC;oBAAOuC,cAAc3B;gBAAO;;0BAInE,KAACjB;gBAAS8C,MAAMvC,QAAQ,WAAW;0BAAUH;;;;AAGzD,EAAE"}
+{"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                              ? {\n                                    borderColor: outlineColor ?? color,\n                                    backgroundColor: color,\n                                    borderRadius: radius,\n                                }\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","backgroundColor","borderRadius","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,MAAM,EAAExB,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,WAAW,EAAEhC,wBAAAA,yBAAAA,cAAeN;gBAAM,IACpCK,YAAY,YACV;oBACIiC,WAAW,EAAElC,yBAAAA,0BAAAA,eAAgBJ;oBAC7BuC,iBAAiBvC;oBACjBwC,cAAc5B;gBAClB,IACA;oBAAE2B,iBAAiBvC;oBAAOwC,cAAc5B;gBAAO;;0BAInE,KAACjB;gBAAS8C,MAAMvC,QAAQ,WAAW;0BAAUH;;;;AAGzD,EAAE"}

package/dist/components/charts/line-chart/components/hover-popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hover-popover.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/hover-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2D,EAAE,EAAiB,MAAM,OAAO,CAAC;AAgBnG,eAAO,MAAM,YAAY,EAAE,EAuHzB,CAAC"}
+{"version":3,"file":"hover-popover.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/hover-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2D,EAAE,EAAE,MAAM,OAAO,CAAC;AAgBpF,eAAO,MAAM,YAAY,EAAE,EAkIzB,CAAC"}

package/dist/components/charts/line-chart/components/hover-popover.js

@@ -38,24 +38,30 @@ export const HoverPopover = observer(()=>{
         display,
         popH
     ]);
-    const popoverStyle = useMemo(()=>{
+    const { popoverStyle, arrowPosition } = useMemo(()=>{
         const posX = svgStore.periodX(hoveredIndex);
         const yHeights = metrics.filter((m)=>m.values[hoveredIndex] !== undefined).map((m)=>svgStore.periodY(m, hoveredIndex));
         const barHeight = yHeights.length ? stackedTotals ? yHeights.reduce((a, b)=>a + b, 0) : Math.max(...yHeights) : 0;
         const barHeightPercentRaw = svgStore.fpy(Math.max(0, Math.min(100, barHeight)));
         const barHeightPercent = Math.max(0, Math.min(100, Number(barHeightPercentRaw) || 0));
-        const barTopPositionPx = barHeightPercent / 100 * CHART_HEIGHT_PX;
-        const availableSpaceBelow = Math.max(0, CHART_HEIGHT_PX - barTopPositionPx - popH);
-        const popoverOffsetPx = Math.min(OFFSET_PX, availableSpaceBelow);
+        const barTopPx = barHeightPercent / 100 * CHART_HEIGHT_PX;
+        const idealTopPx = barTopPx + OFFSET_PX;
+        const maxTopPx = Math.max(0, CHART_HEIGHT_PX - popH);
+        const popoverRepositioned = idealTopPx > maxTopPx;
+        const clampedTopPx = Math.min(idealTopPx, maxTopPx);
+        const topPercent = clampedTopPx / CHART_HEIGHT_PX * 100;
         return {
-            top: `${barHeightPercent}%`,
-            transform: `translateY(${popoverOffsetPx}px)`,
-            position: 'absolute',
-            ...isChartLeftSide ? {
-                left: `${svgStore.fpx(posX + 2)}%`
-            } : {
-                right: `${svgStore.fpx(102 - posX)}%`
-            }
+            popoverStyle: {
+                top: `${topPercent.toFixed(1)}%`,
+                transform: 'translateY(0)',
+                position: 'absolute',
+                ...isChartLeftSide ? {
+                    left: `${svgStore.fpx(posX + 2)}%`
+                } : {
+                    right: `${svgStore.fpx(102 - posX)}%`
+                }
+            },
+            arrowPosition: popoverRepositioned ? 'bottom' : 'top'
         };
     }, [
         svgStore,
@@ -68,6 +74,9 @@ export const HoverPopover = observer(()=>{
     if (hoveredIndex < 0 || hoveredIndex >= periods.length) {
         return null;
     }
+    if ((stackedTotals === null || stackedTotals === void 0 ? void 0 : stackedTotals[hoveredIndex]) === 0) {
+        return null;
+    }
     const period = periods[hoveredIndex];
     const partialWeek = !!period.partial;
     return /*#__PURE__*/ _jsxs("div", {
@@ -76,7 +85,7 @@ export const HoverPopover = observer(()=>{
         style: popoverStyle,
         children: [
             /*#__PURE__*/ _jsx("div", {
-                className: classNames(Styles.arrow, isChartLeftSide ? Styles.arrowLeft : Styles.arrowRight)
+                className: classNames(Styles.arrow, isChartLeftSide ? Styles.arrowLeft : Styles.arrowRight, arrowPosition === 'bottom' && Styles.arrowBottom)
             }),
             /*#__PURE__*/ _jsx(Text, {
                 size: "small",

package/dist/components/charts/line-chart/components/hover-popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/charts/line-chart/components/hover-popover.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useLayoutEffect, useState, FC, CSSProperties } from 'react';\nimport classNames from 'classnames';\nimport { observer } from 'mobx-react';\nimport { useDependencies } from '@servicetitan/react-ioc';\nimport { BodyText } from '@servicetitan/design-system';\nimport { LineChartStore } from '../stores/line-chart.store';\nimport { SvgStore } from '../stores/svg.store';\nimport { getFormatter } from '../utils/formatters';\nimport { periodDateTitleFormatter } from '../utils/labels';\nimport * as Styles from './hover-popover.module.less';\nimport { ColorTag } from '../../common';\nimport { Text } from '@servicetitan/anvil2';\n\nconst CHART_HEIGHT_PX = 400;\nconst OFFSET_PX = 16;\n\nexport const HoverPopover: FC = observer(() => {\n    const [\n        {\n            periods,\n            resolution,\n            hoveredIndex,\n            metrics,\n            display,\n            formattedTotalAt,\n            totalLabel,\n            stackedTotals,\n        },\n        svgStore,\n    ] = useDependencies(LineChartStore, SvgStore);\n    const isChartLeftSide = hoveredIndex < periods.length / 2;\n\n    const formatDateTitle = useMemo(() => periodDateTitleFormatter[resolution], [resolution]);\n    const formatValue = useCallback(\n        (title: string, value: number, isRight: boolean) =>\n            getFormatter(isRight ? display.metricsRightFormat : display.metricsLeftFormat)(value) +\n            ' ' +\n            title,\n        [display]\n    );\n\n    const popRef = useRef<HTMLDivElement | null>(null);\n    const [popH, setPopH] = useState(0);\n\n    useLayoutEffect(() => {\n        if (!popRef.current) {\n            return;\n        }\n        const rect = popRef.current.getBoundingClientRect();\n        if (rect.height && Math.abs(rect.height - popH) > 0.5) {\n            setPopH(rect.height);\n        }\n    }, [hoveredIndex, metrics, display, popH]);\n\n    const popoverStyle = useMemo<CSSProperties>(() => {\n        const posX = svgStore.periodX(hoveredIndex);\n\n        const yHeights = metrics\n            .filter(m => m.values[hoveredIndex] !== undefined)\n            .map(m => svgStore.periodY(m, hoveredIndex));\n\n        const barHeight = yHeights.length\n            ? stackedTotals\n                ? yHeights.reduce((a, b) => a + b, 0)\n                : Math.max(...yHeights)\n            : 0;\n        const barHeightPercentRaw = svgStore.fpy(Math.max(0, Math.min(100, barHeight)));\n        const barHeightPercent = Math.max(0, Math.min(100, Number(barHeightPercentRaw) || 0));\n\n        const barTopPositionPx = (barHeightPercent / 100) * CHART_HEIGHT_PX;\n        const availableSpaceBelow = Math.max(0, CHART_HEIGHT_PX - barTopPositionPx - popH);\n        const popoverOffsetPx = Math.min(OFFSET_PX, availableSpaceBelow);\n\n        return {\n            top: `${barHeightPercent}%`,\n            transform: `translateY(${popoverOffsetPx}px)`,\n            position: 'absolute',\n            ...(isChartLeftSide\n                ? { left: `${svgStore.fpx(posX + 2)}%` }\n                : { right: `${svgStore.fpx(102 - posX)}%` }),\n        };\n    }, [svgStore, hoveredIndex, isChartLeftSide, metrics, stackedTotals, popH]);\n\n    if (hoveredIndex < 0 || hoveredIndex >= periods.length) {\n        return null;\n    }\n\n    const period = periods[hoveredIndex]!;\n    const partialWeek = !!period.partial;\n\n    return (\n        <div\n            ref={popRef}\n            className={classNames(Styles.popover, 'border border-radius-1 p-1')}\n            style={popoverStyle}\n        >\n            <div\n                className={classNames(\n                    Styles.arrow,\n                    isChartLeftSide ? Styles.arrowLeft : Styles.arrowRight\n                )}\n            />\n            <Text size=\"small\" variant=\"headline\" el=\"h6\">\n                {stackedTotals\n                    ? `${formattedTotalAt(hoveredIndex)} ${totalLabel} | ${formatDateTitle(period)}`\n                    : formatDateTitle(period)}\n            </Text>\n            {partialWeek && (\n                <BodyText size=\"xsmall\" subdued>\n                    Partial week\n                </BodyText>\n            )}\n            {metrics.map(\n                m =>\n                    m.values[hoveredIndex] !== undefined && (\n                        <ColorTag\n                            small\n                            label={formatValue(m.title, m.values[hoveredIndex], m.isRight)}\n                            color={m.color}\n                            key={m.title}\n                            className=\"m-t-1\"\n                            dashed={m.opts?.dashed}\n                            pattern={m.opts?.pattern}\n                            outlineColor={m.opts?.outlineColor}\n                            strokeColor={m.opts?.strokeColor}\n                            colorTagClassName={\n                                m.opts?.pattern === 'outline'\n                                    ? Styles.colorTagOutlined\n                                    : Styles.colorTag\n                            }\n                        />\n                    )\n            )}\n        </div>\n    );\n});\n"],"names":["useCallback","useMemo","useRef","useLayoutEffect","useState","classNames","observer","useDependencies","BodyText","LineChartStore","SvgStore","getFormatter","periodDateTitleFormatter","Styles","ColorTag","Text","CHART_HEIGHT_PX","OFFSET_PX","HoverPopover","periods","resolution","hoveredIndex","metrics","display","formattedTotalAt","totalLabel","stackedTotals","svgStore","isChartLeftSide","length","formatDateTitle","formatValue","title","value","isRight","metricsRightFormat","metricsLeftFormat","popRef","popH","setPopH","current","rect","getBoundingClientRect","height","Math","abs","popoverStyle","posX","periodX","yHeights","filter","m","values","undefined","map","periodY","barHeight","reduce","a","b","max","barHeightPercentRaw","fpy","min","barHeightPercent","Number","barTopPositionPx","availableSpaceBelow","popoverOffsetPx","top","transform","position","left","fpx","right","period","partialWeek","partial","div","ref","className","popover","style","arrow","arrowLeft","arrowRight","size","variant","el","subdued","small","label","color","dashed","opts","pattern","outlineColor","strokeColor","colorTagClassName","colorTagOutlined","colorTag"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/charts/line-chart/components/hover-popover.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useLayoutEffect, useState, FC } from 'react';\nimport classNames from 'classnames';\nimport { observer } from 'mobx-react';\nimport { useDependencies } from '@servicetitan/react-ioc';\nimport { BodyText } from '@servicetitan/design-system';\nimport { LineChartStore } from '../stores/line-chart.store';\nimport { SvgStore } from '../stores/svg.store';\nimport { getFormatter } from '../utils/formatters';\nimport { periodDateTitleFormatter } from '../utils/labels';\nimport * as Styles from './hover-popover.module.less';\nimport { ColorTag } from '../../common';\nimport { Text } from '@servicetitan/anvil2';\n\nconst CHART_HEIGHT_PX = 400;\nconst OFFSET_PX = 16;\n\nexport const HoverPopover: FC = observer(() => {\n    const [\n        {\n            periods,\n            resolution,\n            hoveredIndex,\n            metrics,\n            display,\n            formattedTotalAt,\n            totalLabel,\n            stackedTotals,\n        },\n        svgStore,\n    ] = useDependencies(LineChartStore, SvgStore);\n    const isChartLeftSide = hoveredIndex < periods.length / 2;\n\n    const formatDateTitle = useMemo(() => periodDateTitleFormatter[resolution], [resolution]);\n    const formatValue = useCallback(\n        (title: string, value: number, isRight: boolean) =>\n            getFormatter(isRight ? display.metricsRightFormat : display.metricsLeftFormat)(value) +\n            ' ' +\n            title,\n        [display]\n    );\n\n    const popRef = useRef<HTMLDivElement | null>(null);\n    const [popH, setPopH] = useState(0);\n\n    useLayoutEffect(() => {\n        if (!popRef.current) {\n            return;\n        }\n        const rect = popRef.current.getBoundingClientRect();\n        if (rect.height && Math.abs(rect.height - popH) > 0.5) {\n            setPopH(rect.height);\n        }\n    }, [hoveredIndex, metrics, display, popH]);\n\n    const { popoverStyle, arrowPosition } = useMemo(() => {\n        const posX = svgStore.periodX(hoveredIndex);\n\n        const yHeights = metrics\n            .filter(m => m.values[hoveredIndex] !== undefined)\n            .map(m => svgStore.periodY(m, hoveredIndex));\n\n        const barHeight = yHeights.length\n            ? stackedTotals\n                ? yHeights.reduce((a, b) => a + b, 0)\n                : Math.max(...yHeights)\n            : 0;\n        const barHeightPercentRaw = svgStore.fpy(Math.max(0, Math.min(100, barHeight)));\n        const barHeightPercent = Math.max(0, Math.min(100, Number(barHeightPercentRaw) || 0));\n\n        const barTopPx = (barHeightPercent / 100) * CHART_HEIGHT_PX;\n        const idealTopPx = barTopPx + OFFSET_PX;\n        const maxTopPx = Math.max(0, CHART_HEIGHT_PX - popH);\n        const popoverRepositioned = idealTopPx > maxTopPx;\n        const clampedTopPx = Math.min(idealTopPx, maxTopPx);\n        const topPercent = (clampedTopPx / CHART_HEIGHT_PX) * 100;\n\n        return {\n            popoverStyle: {\n                top: `${topPercent.toFixed(1)}%`,\n                transform: 'translateY(0)',\n                position: 'absolute' as const,\n                ...(isChartLeftSide\n                    ? { left: `${svgStore.fpx(posX + 2)}%` }\n                    : { right: `${svgStore.fpx(102 - posX)}%` }),\n            },\n            arrowPosition: popoverRepositioned ? 'bottom' : 'top',\n        };\n    }, [svgStore, hoveredIndex, isChartLeftSide, metrics, stackedTotals, popH]);\n\n    if (hoveredIndex < 0 || hoveredIndex >= periods.length) {\n        return null;\n    }\n\n    if (stackedTotals?.[hoveredIndex] === 0) {\n        return null;\n    }\n\n    const period = periods[hoveredIndex]!;\n    const partialWeek = !!period.partial;\n\n    return (\n        <div\n            ref={popRef}\n            className={classNames(Styles.popover, 'border border-radius-1 p-1')}\n            style={popoverStyle}\n        >\n            <div\n                className={classNames(\n                    Styles.arrow,\n                    isChartLeftSide ? Styles.arrowLeft : Styles.arrowRight,\n                    arrowPosition === 'bottom' && Styles.arrowBottom\n                )}\n            />\n            <Text size=\"small\" variant=\"headline\" el=\"h6\">\n                {stackedTotals\n                    ? `${formattedTotalAt(hoveredIndex)} ${totalLabel} | ${formatDateTitle(period)}`\n                    : formatDateTitle(period)}\n            </Text>\n            {partialWeek && (\n                <BodyText size=\"xsmall\" subdued>\n                    Partial week\n                </BodyText>\n            )}\n            {metrics.map(\n                m =>\n                    m.values[hoveredIndex] !== undefined && (\n                        <ColorTag\n                            small\n                            label={formatValue(m.title, m.values[hoveredIndex], m.isRight)}\n                            color={m.color}\n                            key={m.title}\n                            className=\"m-t-1\"\n                            dashed={m.opts?.dashed}\n                            pattern={m.opts?.pattern}\n                            outlineColor={m.opts?.outlineColor}\n                            strokeColor={m.opts?.strokeColor}\n                            colorTagClassName={\n                                m.opts?.pattern === 'outline'\n                                    ? Styles.colorTagOutlined\n                                    : Styles.colorTag\n                            }\n                        />\n                    )\n            )}\n        </div>\n    );\n});\n"],"names":["useCallback","useMemo","useRef","useLayoutEffect","useState","classNames","observer","useDependencies","BodyText","LineChartStore","SvgStore","getFormatter","periodDateTitleFormatter","Styles","ColorTag","Text","CHART_HEIGHT_PX","OFFSET_PX","HoverPopover","periods","resolution","hoveredIndex","metrics","display","formattedTotalAt","totalLabel","stackedTotals","svgStore","isChartLeftSide","length","formatDateTitle","formatValue","title","value","isRight","metricsRightFormat","metricsLeftFormat","popRef","popH","setPopH","current","rect","getBoundingClientRect","height","Math","abs","popoverStyle","arrowPosition","posX","periodX","yHeights","filter","m","values","undefined","map","periodY","barHeight","reduce","a","b","max","barHeightPercentRaw","fpy","min","barHeightPercent","Number","barTopPx","idealTopPx","maxTopPx","popoverRepositioned","clampedTopPx","topPercent","top","toFixed","transform","position","left","fpx","right","period","partialWeek","partial","div","ref","className","popover","style","arrow","arrowLeft","arrowRight","arrowBottom","size","variant","el","subdued","small","label","color","dashed","opts","pattern","outlineColor","strokeColor","colorTagClassName","colorTagOutlined","colorTag"],"mappings":"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"}

package/dist/components/charts/line-chart/components/hover-popover.module.less

@@ -44,6 +44,11 @@
     transform: rotate(135deg);
 }
 
+.arrow-bottom {
+    top: auto;
+    bottom: 12px;
+}
+
 .color-tag {
     width: 20px;
     height: 6px;

package/dist/components/charts/line-chart/components/hover-popover.module.less.d.ts

@@ -1,5 +1,6 @@
 export const __esModule: true;
 export const arrow: string;
+export const arrowBottom: string;
 export const arrowLeft: string;
 export const arrowRight: string;
 export const colorTag: string;

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

@@ -1 +1 @@
-{"version":3,"file":"svg-bars.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/svg-bars.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAI3D,UAAU,YAAY;IAClB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAuMpC,CAAC;AAEF,UAAU,iBAAiB;IACvB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAyB7C,CAAC"}
+{"version":3,"file":"svg-bars.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/components/svg-bars.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAG3B,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAI3D,UAAU,YAAY;IAClB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAsLpC,CAAC;AAEF,UAAU,iBAAiB;IACvB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAyB7C,CAAC"}

package/dist/components/charts/line-chart/components/svg-bars.js

@@ -55,23 +55,13 @@ export const SvgBars = observer(({ metrics, isStackedBarChart, isGroupedBarChart
             };
         });
         if (isStackedBarChart) {
-            // Use ORIGINAL calculations - keep all spacing/positioning unchanged
             const spacingBetweenSegments = 1;
-            const totalSpacing = (values.length - 1) * spacingBetweenSegments;
-            let stackedBarHeight = values.reduce((sum, curr)=>sum + curr.val, 0) + totalSpacing;
-            // Find first/last non-zero indices for visual styling
+            const totalValue = values.reduce((sum, curr)=>sum + curr.value, 0);
+            const totalYValue = values.reduce((sum, curr)=>sum + curr.val, 0);
             const firstNonZeroIdx = values.findIndex((v)=>v.value > 0);
             const lastNonZeroIdx = values.reduce((last, v, idx)=>v.value > 0 ? idx : last, -1);
-            // Count 0-value segments below first non-zero (for text position adjustment)
-            const zeroSegmentsBelowFirst = firstNonZeroIdx >= 0 ? values.slice(firstNonZeroIdx + 1).filter((v)=>v.value <= 0).length : 0;
-            const totalValue = values.reduce((sum, curr)=>sum + curr.value, 0);
             if (totalValue > 0) {
-                /*
-                     * Adjust text position to maintain consistent gap with first rendered segment:
-                     * 1. Subtract spacing for skipped segments from fpy argument
-                     * 2. Add pixel offset for zeros below first non-zero
-                     */ const textStackedBarHeight = stackedBarHeight - (firstNonZeroIdx > 0 ? firstNonZeroIdx : 0) * spacingBetweenSegments;
-                const yTop = +fpy(textStackedBarHeight) + zeroSegmentsBelowFirst * spacingBetweenSegments;
+                const yTop = +fpy(totalYValue) - 2;
                 const scaleX = 0.3;
                 const scaleY = 1;
                 paths.push(/*#__PURE__*/ _jsx("g", {
@@ -93,21 +83,25 @@ export const SvgBars = observer(({ metrics, isStackedBarChart, isGroupedBarChart
                     })
                 }, `total-${i}`));
             }
+            let stackedBarHeight = totalYValue;
+            let isFirstRendered = true;
+            const nonZeroCount = values.filter((v)=>v.value > 0).length;
+            const bottomTrim = Math.max(0, nonZeroCount - 1) * spacingBetweenSegments;
             for(let j = 0; j < values.length; j++){
                 var _value_strokeColor;
                 const value = values[j];
-                stackedBarHeight -= spacingBetweenSegments;
-                const TOP_RADIUS = 1;
-                const xLeft = +fpx(x - barWidth / 2);
-                const width = +fpx(barWidth);
                 if (value.value <= 0) {
-                    stackedBarHeight -= value.val;
                     continue;
                 }
-                const zeroSegments = values.slice(j + 1).filter((v)=>v.value <= 0).length;
-                // Adjust yTop: move down by the space 0-value segments would occupy
-                const yTop = +fpy(stackedBarHeight) + (values.length - 2) + zeroSegments * spacingBetweenSegments;
-                const height = j === lastNonZeroIdx ? +fpx(value.val - 2) : +fpx(value.val);
+                if (!isFirstRendered) {
+                    stackedBarHeight -= spacingBetweenSegments;
+                }
+                isFirstRendered = false;
+                const TOP_RADIUS = 1;
+                const xLeft = +fpx(x - barWidth / 2);
+                const width = +fpx(barWidth);
+                const yTop = +fpy(stackedBarHeight);
+                const height = j === lastNonZeroIdx ? +fpx(value.val - bottomTrim) : +fpx(value.val);
                 const r = j === firstNonZeroIdx ? TOP_RADIUS : 0;
                 const d = [
                     `M ${xLeft} ${yTop + height}`,

package/dist/components/charts/line-chart/components/svg-bars.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/charts/line-chart/components/svg-bars.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { observer } from 'mobx-react';\nimport { useDependencies } from '@servicetitan/react-ioc';\nimport { ChartMetric } from '../utils/internal-interfaces';\nimport { keyVal } from '../utils/key';\nimport { SvgStore } from '../stores/svg.store';\n\ninterface SvgBarsProps {\n    metrics: ChartMetric[];\n    isStackedBarChart?: boolean;\n    isGroupedBarChart?: boolean;\n}\n\nexport const SvgBars: FC<SvgBarsProps> = observer(\n    ({ metrics, isStackedBarChart, isGroupedBarChart }) => {\n        const [store] = useDependencies(SvgStore);\n        const { fpx, fpy, barWidth, length } = store;\n        const barWidthHalf = barWidth / 2;\n        const paths = [];\n\n        const patternDefs = metrics\n            .filter(m => m.opts?.pattern === 'striped')\n            .map(m => {\n                const rotation = 20;\n                const tileW = 0.6;\n                const tileH = 0.6;\n                const stripeWidth = Math.max(0.1, Math.floor(tileW / 20));\n                const tintOpacity = 0.06;\n\n                return (\n                    <pattern\n                        key={`pattern-${m.id}`}\n                        id={`stripe-pattern-${m.id}`}\n                        patternUnits=\"userSpaceOnUse\"\n                        width={tileW}\n                        height={tileH}\n                        patternTransform={`rotate(${rotation})`}\n                    >\n                        <rect width={tileW} height={tileH} fill={m.color} opacity={tintOpacity} />\n                        <rect width={stripeWidth} height={tileH} fill={m.color} />\n                    </pattern>\n                );\n            });\n\n        for (let i = 0; i < length; i++) {\n            const x = store.periodX(i);\n            const values = metrics.map(m => ({\n                id: m.id,\n                color: m.valuesOpts?.[i]?.color ?? m.color,\n                opacity: m.opacity,\n                val: store.periodY(m, i),\n                pattern: m.opts?.pattern,\n                strokeColor: m.opts?.strokeColor,\n                outlineColor: m.opts?.outlineColor,\n                value: m.values[i],\n            }));\n\n            if (isStackedBarChart) {\n                // Use ORIGINAL calculations - keep all spacing/positioning unchanged\n                const spacingBetweenSegments = 1;\n                const totalSpacing = (values.length - 1) * spacingBetweenSegments;\n                let stackedBarHeight =\n                    values.reduce((sum, curr) => sum + curr.val, 0) + totalSpacing;\n\n                // Find first/last non-zero indices for visual styling\n                const firstNonZeroIdx = values.findIndex(v => v.value > 0);\n                const lastNonZeroIdx = values.reduce(\n                    (last, v, idx) => (v.value > 0 ? idx : last),\n                    -1\n                );\n\n                // Count 0-value segments below first non-zero (for text position adjustment)\n                const zeroSegmentsBelowFirst =\n                    firstNonZeroIdx >= 0\n                        ? values.slice(firstNonZeroIdx + 1).filter(v => v.value <= 0).length\n                        : 0;\n\n                const totalValue = values.reduce((sum, curr) => sum + curr.value, 0);\n                if (totalValue > 0) {\n                    /*\n                     * Adjust text position to maintain consistent gap with first rendered segment:\n                     * 1. Subtract spacing for skipped segments from fpy argument\n                     * 2. Add pixel offset for zeros below first non-zero\n                     */\n                    const textStackedBarHeight =\n                        stackedBarHeight -\n                        (firstNonZeroIdx > 0 ? firstNonZeroIdx : 0) * spacingBetweenSegments;\n                    const yTop =\n                        +fpy(textStackedBarHeight) +\n                        zeroSegmentsBelowFirst * spacingBetweenSegments;\n                    const scaleX = 0.3;\n                    const scaleY = 1;\n\n                    paths.push(\n                        <g\n                            key={`total-${i}`}\n                            transform={`translate(${x},${yTop}) scale(${scaleX},${scaleY})`}\n                            pointerEvents=\"none\"\n                        >\n                            <text\n                                x={0}\n                                y={0}\n                                textAnchor=\"middle\"\n                                dominantBaseline=\"alphabetic\"\n                                fontSize=\"2.5\"\n                                fontWeight={600}\n                                fill=\"#111827\"\n                                stroke=\"white\"\n                                strokeWidth={0.8}\n                                paintOrder=\"stroke\"\n                                fontFamily=\"Nunito Sans\"\n                            >\n                                {Math.round(totalValue)}\n                            </text>\n                        </g>\n                    );\n                }\n\n                for (let j = 0; j < values.length; j++) {\n                    const value = values[j];\n                    stackedBarHeight -= spacingBetweenSegments;\n\n                    const TOP_RADIUS = 1;\n                    const xLeft = +fpx(x - barWidth / 2);\n                    const width = +fpx(barWidth);\n\n                    if (value.value <= 0) {\n                        stackedBarHeight -= value.val;\n                        continue;\n                    }\n                    const zeroSegments = values.slice(j + 1).filter(v => v.value <= 0).length;\n\n                    // Adjust yTop: move down by the space 0-value segments would occupy\n                    const yTop =\n                        +fpy(stackedBarHeight) +\n                        (values.length - 2) +\n                        zeroSegments * spacingBetweenSegments;\n                    const height = j === lastNonZeroIdx ? +fpx(value.val - 2) : +fpx(value.val);\n                    const r = j === firstNonZeroIdx ? TOP_RADIUS : 0;\n\n                    const d = [\n                        `M ${xLeft} ${yTop + height}`, // bottom-left\n                        `L ${xLeft} ${yTop + r}`, // up left edge\n                        `Q ${xLeft} ${yTop} ${xLeft + r / 2} ${yTop}`, // top-left corner\n                        `L ${xLeft + width - r / 2} ${yTop}`, // across top\n                        `Q ${xLeft + width} ${yTop} ${xLeft + width} ${yTop + r}`, // top-right corner\n                        `L ${xLeft + width} ${yTop + height}`, // down right edge\n                        'Z',\n                    ].join(' ');\n                    paths.push(\n                        <path\n                            key={keyVal(value.id, i)}\n                            d={d}\n                            fill={\n                                value.pattern === 'striped'\n                                    ? `url(#stripe-pattern-${value.id})`\n                                    : value.color\n                            }\n                            stroke={\n                                value.pattern === 'outline'\n                                    ? value.outlineColor\n                                    : (value.strokeColor ?? value.color)\n                            }\n                            strokeWidth={1}\n                            vectorEffect=\"non-scaling-stroke\"\n                            strokeLinejoin=\"round\"\n                        />\n                    );\n\n                    stackedBarHeight -= value.val;\n                }\n            } else if (isGroupedBarChart) {\n                for (let j = 0; j < values.length; j++) {\n                    const groupedBarX = (j * barWidth) / values.length;\n                    const value = values[j];\n\n                    paths.push(\n                        <rect\n                            key={keyVal(value.id, i)}\n                            x={x + groupedBarX - barWidthHalf}\n                            y={fpy(value.val)}\n                            width={barWidth / values.length - 0.1}\n                            height={fpx(value.val)}\n                            fill={value.color}\n                            opacity={value.opacity}\n                        />\n                    );\n                }\n            } else {\n                values.sort((a, b) => b.val - a.val);\n                for (const value of values) {\n                    paths.push(\n                        <rect\n                            key={keyVal(value.id, i)}\n                            x={fpx(x - barWidthHalf)}\n                            y={fpy(value.val)}\n                            width={fpx(barWidth)}\n                            height={fpx(value.val)}\n                            fill={value.color}\n                        />\n                    );\n                }\n            }\n        }\n\n        return (\n            <g>\n                {patternDefs.length > 0 && <defs>{patternDefs}</defs>}\n                {paths}\n            </g>\n        );\n    }\n);\n\ninterface SvgBarsHoverProps {\n    onHover(ind: number): void;\n    onLeave(ind: number): void;\n}\n\nexport const SvgBarsHover: FC<SvgBarsHoverProps> = observer(({ onHover, onLeave }) => {\n    const [store] = useDependencies(SvgStore);\n    const { fpx, fpy, barWidth, length } = store;\n    const barWidthHalf = barWidth / 2;\n    const paths = [];\n\n    for (let i = 0; i < length; i++) {\n        const x = store.periodX(i);\n\n        paths.push(\n            <rect\n                key={keyVal('_', i)}\n                onMouseEnter={() => onHover(i)}\n                onMouseLeave={() => onLeave(i)}\n                x={fpx(x - barWidthHalf)}\n                y={fpy(100)}\n                width={fpx(barWidth)}\n                height=\"100%\"\n                fill=\"white\"\n                fillOpacity=\"0\"\n            />\n        );\n    }\n\n    return <g>{paths}</g>;\n});\n"],"names":["observer","useDependencies","keyVal","SvgStore","SvgBars","metrics","isStackedBarChart","isGroupedBarChart","store","fpx","fpy","barWidth","length","barWidthHalf","paths","patternDefs","filter","m","opts","pattern","map","rotation","tileW","tileH","stripeWidth","Math","max","floor","tintOpacity","id","patternUnits","width","height","patternTransform","rect","fill","color","opacity","i","x","periodX","values","valuesOpts","val","periodY","strokeColor","outlineColor","value","spacingBetweenSegments","totalSpacing","stackedBarHeight","reduce","sum","curr","firstNonZeroIdx","findIndex","v","lastNonZeroIdx","last","idx","zeroSegmentsBelowFirst","slice","totalValue","textStackedBarHeight","yTop","scaleX","scaleY","push","g","transform","pointerEvents","text","y","textAnchor","dominantBaseline","fontSize","fontWeight","stroke","strokeWidth","paintOrder","fontFamily","round","j","TOP_RADIUS","xLeft","zeroSegments","r","d","join","path","vectorEffect","strokeLinejoin","groupedBarX","sort","a","b","defs","SvgBarsHover","onHover","onLeave","onMouseEnter","onMouseLeave","fillOpacity"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/charts/line-chart/components/svg-bars.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { observer } from 'mobx-react';\nimport { useDependencies } from '@servicetitan/react-ioc';\nimport { ChartMetric } from '../utils/internal-interfaces';\nimport { keyVal } from '../utils/key';\nimport { SvgStore } from '../stores/svg.store';\n\ninterface SvgBarsProps {\n    metrics: ChartMetric[];\n    isStackedBarChart?: boolean;\n    isGroupedBarChart?: boolean;\n}\n\nexport const SvgBars: FC<SvgBarsProps> = observer(\n    ({ metrics, isStackedBarChart, isGroupedBarChart }) => {\n        const [store] = useDependencies(SvgStore);\n        const { fpx, fpy, barWidth, length } = store;\n        const barWidthHalf = barWidth / 2;\n        const paths = [];\n\n        const patternDefs = metrics\n            .filter(m => m.opts?.pattern === 'striped')\n            .map(m => {\n                const rotation = 20;\n                const tileW = 0.6;\n                const tileH = 0.6;\n                const stripeWidth = Math.max(0.1, Math.floor(tileW / 20));\n                const tintOpacity = 0.06;\n\n                return (\n                    <pattern\n                        key={`pattern-${m.id}`}\n                        id={`stripe-pattern-${m.id}`}\n                        patternUnits=\"userSpaceOnUse\"\n                        width={tileW}\n                        height={tileH}\n                        patternTransform={`rotate(${rotation})`}\n                    >\n                        <rect width={tileW} height={tileH} fill={m.color} opacity={tintOpacity} />\n                        <rect width={stripeWidth} height={tileH} fill={m.color} />\n                    </pattern>\n                );\n            });\n\n        for (let i = 0; i < length; i++) {\n            const x = store.periodX(i);\n            const values = metrics.map(m => ({\n                id: m.id,\n                color: m.valuesOpts?.[i]?.color ?? m.color,\n                opacity: m.opacity,\n                val: store.periodY(m, i),\n                pattern: m.opts?.pattern,\n                strokeColor: m.opts?.strokeColor,\n                outlineColor: m.opts?.outlineColor,\n                value: m.values[i],\n            }));\n\n            if (isStackedBarChart) {\n                const spacingBetweenSegments = 1;\n                const totalValue = values.reduce((sum, curr) => sum + curr.value, 0);\n                const totalYValue = values.reduce((sum, curr) => sum + curr.val, 0);\n\n                const firstNonZeroIdx = values.findIndex(v => v.value > 0);\n                const lastNonZeroIdx = values.reduce(\n                    (last, v, idx) => (v.value > 0 ? idx : last),\n                    -1\n                );\n\n                if (totalValue > 0) {\n                    const yTop = +fpy(totalYValue) - 2;\n                    const scaleX = 0.3;\n                    const scaleY = 1;\n\n                    paths.push(\n                        <g\n                            key={`total-${i}`}\n                            transform={`translate(${x},${yTop}) scale(${scaleX},${scaleY})`}\n                            pointerEvents=\"none\"\n                        >\n                            <text\n                                x={0}\n                                y={0}\n                                textAnchor=\"middle\"\n                                dominantBaseline=\"alphabetic\"\n                                fontSize=\"2.5\"\n                                fontWeight={600}\n                                fill=\"#111827\"\n                                stroke=\"white\"\n                                strokeWidth={0.8}\n                                paintOrder=\"stroke\"\n                                fontFamily=\"Nunito Sans\"\n                            >\n                                {Math.round(totalValue)}\n                            </text>\n                        </g>\n                    );\n                }\n\n                let stackedBarHeight = totalYValue;\n                let isFirstRendered = true;\n                const nonZeroCount = values.filter(v => v.value > 0).length;\n                const bottomTrim = Math.max(0, nonZeroCount - 1) * spacingBetweenSegments;\n\n                for (let j = 0; j < values.length; j++) {\n                    const value = values[j];\n\n                    if (value.value <= 0) {\n                        continue;\n                    }\n\n                    if (!isFirstRendered) {\n                        stackedBarHeight -= spacingBetweenSegments;\n                    }\n                    isFirstRendered = false;\n\n                    const TOP_RADIUS = 1;\n                    const xLeft = +fpx(x - barWidth / 2);\n                    const width = +fpx(barWidth);\n                    const yTop = +fpy(stackedBarHeight);\n                    const height =\n                        j === lastNonZeroIdx ? +fpx(value.val - bottomTrim) : +fpx(value.val);\n                    const r = j === firstNonZeroIdx ? TOP_RADIUS : 0;\n\n                    const d = [\n                        `M ${xLeft} ${yTop + height}`, // bottom-left\n                        `L ${xLeft} ${yTop + r}`, // up left edge\n                        `Q ${xLeft} ${yTop} ${xLeft + r / 2} ${yTop}`, // top-left corner\n                        `L ${xLeft + width - r / 2} ${yTop}`, // across top\n                        `Q ${xLeft + width} ${yTop} ${xLeft + width} ${yTop + r}`, // top-right corner\n                        `L ${xLeft + width} ${yTop + height}`, // down right edge\n                        'Z',\n                    ].join(' ');\n                    paths.push(\n                        <path\n                            key={keyVal(value.id, i)}\n                            d={d}\n                            fill={\n                                value.pattern === 'striped'\n                                    ? `url(#stripe-pattern-${value.id})`\n                                    : value.color\n                            }\n                            stroke={\n                                value.pattern === 'outline'\n                                    ? value.outlineColor\n                                    : (value.strokeColor ?? value.color)\n                            }\n                            strokeWidth={1}\n                            vectorEffect=\"non-scaling-stroke\"\n                            strokeLinejoin=\"round\"\n                        />\n                    );\n\n                    stackedBarHeight -= value.val;\n                }\n            } else if (isGroupedBarChart) {\n                for (let j = 0; j < values.length; j++) {\n                    const groupedBarX = (j * barWidth) / values.length;\n                    const value = values[j];\n\n                    paths.push(\n                        <rect\n                            key={keyVal(value.id, i)}\n                            x={x + groupedBarX - barWidthHalf}\n                            y={fpy(value.val)}\n                            width={barWidth / values.length - 0.1}\n                            height={fpx(value.val)}\n                            fill={value.color}\n                            opacity={value.opacity}\n                        />\n                    );\n                }\n            } else {\n                values.sort((a, b) => b.val - a.val);\n                for (const value of values) {\n                    paths.push(\n                        <rect\n                            key={keyVal(value.id, i)}\n                            x={fpx(x - barWidthHalf)}\n                            y={fpy(value.val)}\n                            width={fpx(barWidth)}\n                            height={fpx(value.val)}\n                            fill={value.color}\n                        />\n                    );\n                }\n            }\n        }\n\n        return (\n            <g>\n                {patternDefs.length > 0 && <defs>{patternDefs}</defs>}\n                {paths}\n            </g>\n        );\n    }\n);\n\ninterface SvgBarsHoverProps {\n    onHover(ind: number): void;\n    onLeave(ind: number): void;\n}\n\nexport const SvgBarsHover: FC<SvgBarsHoverProps> = observer(({ onHover, onLeave }) => {\n    const [store] = useDependencies(SvgStore);\n    const { fpx, fpy, barWidth, length } = store;\n    const barWidthHalf = barWidth / 2;\n    const paths = [];\n\n    for (let i = 0; i < length; i++) {\n        const x = store.periodX(i);\n\n        paths.push(\n            <rect\n                key={keyVal('_', i)}\n                onMouseEnter={() => onHover(i)}\n                onMouseLeave={() => onLeave(i)}\n                x={fpx(x - barWidthHalf)}\n                y={fpy(100)}\n                width={fpx(barWidth)}\n                height=\"100%\"\n                fill=\"white\"\n                fillOpacity=\"0\"\n            />\n        );\n    }\n\n    return <g>{paths}</g>;\n});\n"],"names":["observer","useDependencies","keyVal","SvgStore","SvgBars","metrics","isStackedBarChart","isGroupedBarChart","store","fpx","fpy","barWidth","length","barWidthHalf","paths","patternDefs","filter","m","opts","pattern","map","rotation","tileW","tileH","stripeWidth","Math","max","floor","tintOpacity","id","patternUnits","width","height","patternTransform","rect","fill","color","opacity","i","x","periodX","values","valuesOpts","val","periodY","strokeColor","outlineColor","value","spacingBetweenSegments","totalValue","reduce","sum","curr","totalYValue","firstNonZeroIdx","findIndex","v","lastNonZeroIdx","last","idx","yTop","scaleX","scaleY","push","g","transform","pointerEvents","text","y","textAnchor","dominantBaseline","fontSize","fontWeight","stroke","strokeWidth","paintOrder","fontFamily","round","stackedBarHeight","isFirstRendered","nonZeroCount","bottomTrim","j","TOP_RADIUS","xLeft","r","d","join","path","vectorEffect","strokeLinejoin","groupedBarX","sort","a","b","defs","SvgBarsHover","onHover","onLeave","onMouseEnter","onMouseLeave","fillOpacity"],"mappings":"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"}

package/dist/components/stat/stat-card.d.ts

@@ -28,6 +28,8 @@ export interface StatCardProps {
     valueOnly?: boolean;
     className?: string;
     diffPercentOnly?: boolean;
+    centered?: boolean;
+    loading?: boolean;
 }
 export declare const StatCard: FC<StatCardProps>;
 export {};

package/dist/components/stat/stat-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEH,mBAAmB,EAKtB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAe,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAmCtE,UAAU,aAAa;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAyEtC,CAAC;AAEF,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAyEtC,CAAC"}
+{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAY,SAAS,EAAY,MAAM,OAAO,CAAC;AAE1D,OAAO,EAEH,mBAAmB,EAMtB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAe,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAqCtE,UAAU,aAAa;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAyEtC,CAAC;AAEF,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA6FtC,CAAC"}

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

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import classNames from 'classnames';
-import { BodyText, Eyebrow, Popover, Stack, Tooltip } from '@servicetitan/design-system';
+import { BodyText, Eyebrow, Headline, Popover, Stack, Tooltip } from '@servicetitan/design-system';
 import * as Styles from './stat-card.module.less';
 import { formatValue } from '../../utils/formatters';
-import { Icon } from '@servicetitan/anvil2';
+import { Icon, Skeleton } from '@servicetitan/anvil2';
 import TrendingUpSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_up.svg';
 import TrendingDownSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_down.svg';
+import InfoSVG from '@servicetitan/anvil2/assets/icons/material/round/info.svg';
+import { tokens } from '@servicetitan/tokens/core/index';
 const calculateDiff = (value, prev, percents)=>{
     const diff = (value - prev) * (percents ? 100 : 1);
     const absDiff = Math.abs(diff);
@@ -78,50 +80,83 @@ export const StatDiff = ({ value, prev, size, format, inverted, neutral, classNa
         ]
     });
 };
-export const StatCard = ({ title, description, popoverContent, value, percent, money, rate, prev, clean, inverted, neutral, fill, valueOnly, className, diffPercentOnly = false })=>{
+export const StatCard = ({ title, description, popoverContent, value, percent, money, rate, prev, clean, inverted, neutral, fill, valueOnly, className, diffPercentOnly = false, centered, loading })=>{
     const [popoverShown, setPopoverShown] = useState(false);
     const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
     const val = value === undefined ? '\u00A0' : formatValue(value, format);
+    const hasInfo = !!description || !!popoverContent;
     const eyebrow = /*#__PURE__*/ _jsx(Eyebrow, {
-        className: classNames(Styles.title, 'ta-center'),
         "data-cy": `marketing-stat-${title}-title`,
-        onMouseEnter: ()=>{
-            setPopoverShown(true);
-        },
         children: title
     });
-    return /*#__PURE__*/ _jsxs(Stack, {
+    const infoIcon = /*#__PURE__*/ _jsx(Icon, {
+        svg: InfoSVG,
+        color: tokens.colorNeutral100
+    });
+    const infoContent = popoverContent ? /*#__PURE__*/ _jsx("div", {
+        className: Styles.infoIcon,
+        children: /*#__PURE__*/ _jsx(Popover, {
+            open: popoverShown,
+            trigger: infoIcon,
+            onMouseEnter: ()=>setPopoverShown(true),
+            children: popoverContent
+        })
+    }) : description ? /*#__PURE__*/ _jsx("div", {
+        className: Styles.infoIcon,
+        children: /*#__PURE__*/ _jsx(Tooltip, {
+            text: description,
+            "data-cy": `marketing-stat-${title}-tooltip`,
+            children: infoIcon
+        })
+    }) : null;
+    return /*#__PURE__*/ _jsx(Stack, {
         direction: "column",
-        alignItems: "center",
-        className: classNames('p-y-3', {
-            'bg-white border-radius-2 border': !clean,
+        className: classNames('p-2', {
+            'bg-white border': !clean,
+            [Styles.card]: !clean,
             'flex-grow-1 flex-basis-0': fill
         }, className),
         onMouseLeave: ()=>setPopoverShown(false),
-        children: [
-            popoverContent ? /*#__PURE__*/ _jsx(Popover, {
-                open: popoverShown,
-                trigger: eyebrow,
-                children: popoverContent
-            }) : description ? /*#__PURE__*/ _jsx(Tooltip, {
-                text: description,
-                "data-cy": `marketing-stat-${title}-tooltip`,
-                children: eyebrow
-            }) : eyebrow,
-            /*#__PURE__*/ _jsx(BodyText, {
-                className: "fs-6-i ff-display",
-                "data-cy": `marketing-stat-${title}-value`,
-                children: val
-            }),
-            !valueOnly && /*#__PURE__*/ _jsx(StatDiff, {
-                value: value,
-                prev: prev,
-                format: format,
-                inverted: inverted,
-                neutral: neutral,
-                diffPercentOnly: diffPercentOnly
-            })
-        ]
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: classNames('p-3', Styles.content),
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: classNames(Styles.titleRow, {
+                        [Styles.centered]: centered
+                    }),
+                    children: [
+                        eyebrow,
+                        hasInfo && infoContent
+                    ]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: classNames(Styles.valueRow, {
+                        [Styles.centered]: centered
+                    }),
+                    children: loading ? /*#__PURE__*/ _jsx(Skeleton.Text, {
+                        variant: "headline",
+                        className: "w-33"
+                    }) : /*#__PURE__*/ _jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Headline, {
+                                size: "xlarge",
+                                className: "m-b-0-i",
+                                "data-cy": `marketing-stat-${title}-value`,
+                                children: val
+                            }),
+                            !valueOnly && /*#__PURE__*/ _jsx(StatDiff, {
+                                value: value,
+                                prev: prev,
+                                format: format,
+                                inverted: inverted,
+                                neutral: neutral,
+                                diffPercentOnly: diffPercentOnly
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
     });
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/stat/stat-card.tsx"],"sourcesContent":["import { FC, ReactNode, useState } from 'react';\nimport classNames from 'classnames';\nimport {\n    BodyText,\n    BodyTextPropsStrict,\n    Eyebrow,\n    Popover,\n    Stack,\n    Tooltip,\n} from '@servicetitan/design-system';\nimport * as Styles from './stat-card.module.less';\nimport { formatValue, NumberFormatter } from '../../utils/formatters';\nimport { Icon } from '@servicetitan/anvil2';\nimport TrendingUpSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_up.svg';\nimport TrendingDownSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_down.svg';\n\nconst calculateDiff = (\n    value: number,\n    prev: number,\n    percents?: boolean\n): [number, number, boolean] => {\n    const diff = (value - prev) * (percents ? 100 : 1);\n    const absDiff = Math.abs(diff);\n    let diffPercent = 0;\n\n    if (percents) {\n        diffPercent = diff;\n    } else if (absDiff) {\n        diffPercent = prev ? (100 * absDiff) / prev : 100;\n    }\n\n    return [absDiff, diffPercent, diff >= 0];\n};\n\nconst formatDifference = (value: number, isPlus: boolean, format: NumberFormatter): string => {\n    return (isPlus ? '+' : '-') + formatValue(value, format);\n};\n\nconst formatDifferencePercentage = (value: number, isPlus: boolean): string => {\n    if (!value) {\n        return '';\n    }\n\n    return (isPlus ? '+' : '-') + formatValue(value, 'percent-100');\n};\n\ninterface StatDiffProps {\n    value?: number;\n    prev?: number;\n    size?: BodyTextPropsStrict['size'];\n    format: NumberFormatter;\n    inverted?: boolean;\n    neutral?: boolean;\n    className?: string;\n    diffPercentOnly?: boolean;\n}\n\nexport const StatDiff: FC<StatDiffProps> = ({\n    value,\n    prev,\n    size,\n    format,\n    inverted,\n    neutral,\n    className,\n    diffPercentOnly = false,\n}) => {\n    const percents = format === 'percent';\n    const [absDiff, diffPercent, isIncrease] = calculateDiff(value ?? 0, prev ?? 0, percents);\n    const diff =\n        absDiff === 0 ? (\n            ''\n        ) : (\n            <Icon\n                svg={isIncrease ? TrendingUpSVG : TrendingDownSVG}\n                color={\n                    neutral\n                        ? 'neutral-200'\n                        : inverted\n                          ? isIncrease\n                              ? 'red'\n                              : 'green'\n                          : isIncrease\n                            ? 'green'\n                            : 'red'\n                }\n            />\n        );\n    let text = '';\n\n    if (percents) {\n        text += formatDifferencePercentage(absDiff, isIncrease);\n    } else {\n        const diffPercentage = formatDifferencePercentage(diffPercent, isIncrease);\n\n        if (diffPercentOnly) {\n            text += `${diffPercentage}`;\n        } else {\n            text += `${formatDifference(absDiff, isIncrease, format)}`;\n\n            if (diffPercent !== 0) {\n                text += ` (${diffPercentage})`;\n            }\n        }\n    }\n\n    return (\n        <Stack\n            className={classNames(Styles.statDiff, className)}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n        >\n            <Stack.Item className=\"m-r-half m-t-half\">\n                <span>{diff}</span>\n            </Stack.Item>\n            <Stack.Item>\n                <BodyText\n                    size={size ?? 'small'}\n                    data-cy=\"stat-diff-value\"\n                    className={classNames({\n                        'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),\n                        'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),\n                        'c-neutral-200': !!neutral,\n                    })}\n                >\n                    {value === undefined ? '\\u00A0' : text}\n                </BodyText>\n            </Stack.Item>\n        </Stack>\n    );\n};\n\nexport interface StatCardProps {\n    title: string;\n    description?: string;\n    popoverContent?: ReactNode;\n    value?: number;\n    prev?: number;\n    percent?: boolean;\n    money?: boolean;\n    rate?: boolean;\n    clean?: boolean;\n    inverted?: boolean;\n    neutral?: boolean;\n    fill?: boolean;\n    valueOnly?: boolean;\n    className?: string;\n    diffPercentOnly?: boolean;\n}\n\nexport const StatCard: FC<StatCardProps> = ({\n    title,\n    description,\n    popoverContent,\n    value,\n    percent,\n    money,\n    rate,\n    prev,\n    clean,\n    inverted,\n    neutral,\n    fill,\n    valueOnly,\n    className,\n    diffPercentOnly = false,\n}) => {\n    const [popoverShown, setPopoverShown] = useState(false);\n    const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';\n    const val = value === undefined ? '\\u00A0' : formatValue(value, format);\n\n    const eyebrow = (\n        <Eyebrow\n            className={classNames(Styles.title, 'ta-center')}\n            data-cy={`marketing-stat-${title}-title`}\n            onMouseEnter={() => {\n                setPopoverShown(true);\n            }}\n        >\n            {title}\n        </Eyebrow>\n    );\n\n    return (\n        <Stack\n            direction=\"column\"\n            alignItems=\"center\"\n            className={classNames(\n                'p-y-3',\n                {\n                    'bg-white border-radius-2 border': !clean,\n                    'flex-grow-1 flex-basis-0': fill,\n                },\n                className\n            )}\n            onMouseLeave={() => setPopoverShown(false)}\n        >\n            {popoverContent ? (\n                <Popover open={popoverShown} trigger={eyebrow}>\n                    {popoverContent}\n                </Popover>\n            ) : description ? (\n                <Tooltip text={description} data-cy={`marketing-stat-${title}-tooltip`}>\n                    {eyebrow}\n                </Tooltip>\n            ) : (\n                eyebrow\n            )}\n            <BodyText className=\"fs-6-i ff-display\" data-cy={`marketing-stat-${title}-value`}>\n                {val}\n            </BodyText>\n            {!valueOnly && (\n                <StatDiff\n                    value={value}\n                    prev={prev}\n                    format={format}\n                    inverted={inverted}\n                    neutral={neutral}\n                    diffPercentOnly={diffPercentOnly}\n                />\n            )}\n        </Stack>\n    );\n};\n"],"names":["useState","classNames","BodyText","Eyebrow","Popover","Stack","Tooltip","Styles","formatValue","Icon","TrendingUpSVG","TrendingDownSVG","calculateDiff","value","prev","percents","diff","absDiff","Math","abs","diffPercent","formatDifference","isPlus","format","formatDifferencePercentage","StatDiff","size","inverted","neutral","className","diffPercentOnly","isIncrease","svg","color","text","diffPercentage","statDiff","justifyContent","alignItems","Item","span","data-cy","undefined","StatCard","title","description","popoverContent","percent","money","rate","clean","fill","valueOnly","popoverShown","setPopoverShown","val","eyebrow","onMouseEnter","direction","onMouseLeave","open","trigger"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/stat/stat-card.tsx"],"sourcesContent":["import { FC, Fragment, ReactNode, useState } from 'react';\nimport classNames from 'classnames';\nimport {\n    BodyText,\n    BodyTextPropsStrict,\n    Eyebrow,\n    Headline,\n    Popover,\n    Stack,\n    Tooltip,\n} from '@servicetitan/design-system';\nimport * as Styles from './stat-card.module.less';\nimport { formatValue, NumberFormatter } from '../../utils/formatters';\nimport { Icon, Skeleton } from '@servicetitan/anvil2';\nimport TrendingUpSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_up.svg';\nimport TrendingDownSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_down.svg';\nimport InfoSVG from '@servicetitan/anvil2/assets/icons/material/round/info.svg';\nimport { tokens } from '@servicetitan/tokens/core/index';\n\nconst calculateDiff = (\n    value: number,\n    prev: number,\n    percents?: boolean\n): [number, number, boolean] => {\n    const diff = (value - prev) * (percents ? 100 : 1);\n    const absDiff = Math.abs(diff);\n    let diffPercent = 0;\n\n    if (percents) {\n        diffPercent = diff;\n    } else if (absDiff) {\n        diffPercent = prev ? (100 * absDiff) / prev : 100;\n    }\n\n    return [absDiff, diffPercent, diff >= 0];\n};\n\nconst formatDifference = (value: number, isPlus: boolean, format: NumberFormatter): string => {\n    return (isPlus ? '+' : '-') + formatValue(value, format);\n};\n\nconst formatDifferencePercentage = (value: number, isPlus: boolean): string => {\n    if (!value) {\n        return '';\n    }\n\n    return (isPlus ? '+' : '-') + formatValue(value, 'percent-100');\n};\n\ninterface StatDiffProps {\n    value?: number;\n    prev?: number;\n    size?: BodyTextPropsStrict['size'];\n    format: NumberFormatter;\n    inverted?: boolean;\n    neutral?: boolean;\n    className?: string;\n    diffPercentOnly?: boolean;\n}\n\nexport const StatDiff: FC<StatDiffProps> = ({\n    value,\n    prev,\n    size,\n    format,\n    inverted,\n    neutral,\n    className,\n    diffPercentOnly = false,\n}) => {\n    const percents = format === 'percent';\n    const [absDiff, diffPercent, isIncrease] = calculateDiff(value ?? 0, prev ?? 0, percents);\n    const diff =\n        absDiff === 0 ? (\n            ''\n        ) : (\n            <Icon\n                svg={isIncrease ? TrendingUpSVG : TrendingDownSVG}\n                color={\n                    neutral\n                        ? 'neutral-200'\n                        : inverted\n                          ? isIncrease\n                              ? 'red'\n                              : 'green'\n                          : isIncrease\n                            ? 'green'\n                            : 'red'\n                }\n            />\n        );\n    let text = '';\n\n    if (percents) {\n        text += formatDifferencePercentage(absDiff, isIncrease);\n    } else {\n        const diffPercentage = formatDifferencePercentage(diffPercent, isIncrease);\n\n        if (diffPercentOnly) {\n            text += `${diffPercentage}`;\n        } else {\n            text += `${formatDifference(absDiff, isIncrease, format)}`;\n\n            if (diffPercent !== 0) {\n                text += ` (${diffPercentage})`;\n            }\n        }\n    }\n\n    return (\n        <Stack\n            className={classNames(Styles.statDiff, className)}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n        >\n            <Stack.Item className=\"m-r-half m-t-half\">\n                <span>{diff}</span>\n            </Stack.Item>\n            <Stack.Item>\n                <BodyText\n                    size={size ?? 'small'}\n                    data-cy=\"stat-diff-value\"\n                    className={classNames({\n                        'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),\n                        'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),\n                        'c-neutral-200': !!neutral,\n                    })}\n                >\n                    {value === undefined ? '\\u00A0' : text}\n                </BodyText>\n            </Stack.Item>\n        </Stack>\n    );\n};\n\nexport interface StatCardProps {\n    title: string;\n    description?: string;\n    popoverContent?: ReactNode;\n    value?: number;\n    prev?: number;\n    percent?: boolean;\n    money?: boolean;\n    rate?: boolean;\n    clean?: boolean;\n    inverted?: boolean;\n    neutral?: boolean;\n    fill?: boolean;\n    valueOnly?: boolean;\n    className?: string;\n    diffPercentOnly?: boolean;\n    centered?: boolean;\n    loading?: boolean;\n}\n\nexport const StatCard: FC<StatCardProps> = ({\n    title,\n    description,\n    popoverContent,\n    value,\n    percent,\n    money,\n    rate,\n    prev,\n    clean,\n    inverted,\n    neutral,\n    fill,\n    valueOnly,\n    className,\n    diffPercentOnly = false,\n    centered,\n    loading,\n}) => {\n    const [popoverShown, setPopoverShown] = useState(false);\n    const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';\n    const val = value === undefined ? '\\u00A0' : formatValue(value, format);\n    const hasInfo = !!description || !!popoverContent;\n\n    const eyebrow = <Eyebrow data-cy={`marketing-stat-${title}-title`}>{title}</Eyebrow>;\n\n    const infoIcon = <Icon svg={InfoSVG} color={tokens.colorNeutral100} />;\n\n    const infoContent = popoverContent ? (\n        <div className={Styles.infoIcon}>\n            <Popover\n                open={popoverShown}\n                trigger={infoIcon}\n                onMouseEnter={() => setPopoverShown(true)}\n            >\n                {popoverContent}\n            </Popover>\n        </div>\n    ) : description ? (\n        <div className={Styles.infoIcon}>\n            <Tooltip text={description} data-cy={`marketing-stat-${title}-tooltip`}>\n                {infoIcon}\n            </Tooltip>\n        </div>\n    ) : null;\n\n    return (\n        <Stack\n            direction=\"column\"\n            className={classNames(\n                'p-2',\n                {\n                    'bg-white border': !clean,\n                    [Styles.card]: !clean,\n                    'flex-grow-1 flex-basis-0': fill,\n                },\n                className\n            )}\n            onMouseLeave={() => setPopoverShown(false)}\n        >\n            <div className={classNames('p-3', Styles.content)}>\n                <div className={classNames(Styles.titleRow, { [Styles.centered]: centered })}>\n                    {eyebrow}\n                    {hasInfo && infoContent}\n                </div>\n                <div className={classNames(Styles.valueRow, { [Styles.centered]: centered })}>\n                    {loading ? (\n                        <Skeleton.Text variant=\"headline\" className=\"w-33\" />\n                    ) : (\n                        <Fragment>\n                            <Headline\n                                size=\"xlarge\"\n                                className=\"m-b-0-i\"\n                                data-cy={`marketing-stat-${title}-value`}\n                            >\n                                {val}\n                            </Headline>\n                            {!valueOnly && (\n                                <StatDiff\n                                    value={value}\n                                    prev={prev}\n                                    format={format}\n                                    inverted={inverted}\n                                    neutral={neutral}\n                                    diffPercentOnly={diffPercentOnly}\n                                />\n                            )}\n                        </Fragment>\n                    )}\n                </div>\n            </div>\n        </Stack>\n    );\n};\n"],"names":["Fragment","useState","classNames","BodyText","Eyebrow","Headline","Popover","Stack","Tooltip","Styles","formatValue","Icon","Skeleton","TrendingUpSVG","TrendingDownSVG","InfoSVG","tokens","calculateDiff","value","prev","percents","diff","absDiff","Math","abs","diffPercent","formatDifference","isPlus","format","formatDifferencePercentage","StatDiff","size","inverted","neutral","className","diffPercentOnly","isIncrease","svg","color","text","diffPercentage","statDiff","justifyContent","alignItems","Item","span","data-cy","undefined","StatCard","title","description","popoverContent","percent","money","rate","clean","fill","valueOnly","centered","loading","popoverShown","setPopoverShown","val","hasInfo","eyebrow","infoIcon","colorNeutral100","infoContent","div","open","trigger","onMouseEnter","direction","card","onMouseLeave","content","titleRow","valueRow","Text","variant"],"mappings":"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"}

package/dist/components/stat/stat-card.module.less

@@ -11,6 +11,37 @@
     margin-bottom: 2px;
 }
 
-.title {
-    border-bottom: 1px dashed @color-neutral-90;
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.title-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.value-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 8px;
+    min-height: 40px;
+}
+
+.info-icon {
+    display: flex;
+    align-items: center;
+    line-height: 0;
+}
+
+.centered {
+    justify-content: center;
+}
+
+.card {
+    border-radius: 12px;
+    min-width: min-content;
 }

package/dist/components/stat/stat-card.module.less.d.ts

@@ -1,5 +1,10 @@
 export const __esModule: true;
+export const card: string;
+export const centered: string;
+export const content: string;
+export const infoIcon: string;
 export const statDiff: string;
 export const statExtendedDiff: string;
-export const title: string;
+export const titleRow: string;
+export const valueRow: string;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/marketing-ui",
-    "version": "7.3.0",
+    "version": "7.5.0",
     "description": "Marketing UI component and utils",
     "repository": {
         "type": "git",
@@ -53,5 +53,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "b013c9f39c05c44f888a5bca5ff6aadb89cd7a6f"
+    "gitHead": "eda155d4c358a9d29f685892a1e07dac8e9e526d"
 }

package/src/components/charts/common/color-tag.tsx

@@ -81,7 +81,11 @@ export const ColorTag: FC<ColorTagProps> = ({
                         dashed
                             ? { borderColor: strokeColor ?? color }
                             : pattern === 'outline'
-                              ? { borderColor: outlineColor ?? color, borderRadius: radius }
+                              ? {
+                                    borderColor: outlineColor ?? color,
+                                    backgroundColor: color,
+                                    borderRadius: radius,
+                                }
                               : { backgroundColor: color, borderRadius: radius }
                     }
                 />

package/src/components/charts/line-chart/components/hover-popover.module.less

@@ -44,6 +44,11 @@
     transform: rotate(135deg);
 }
 
+.arrow-bottom {
+    top: auto;
+    bottom: 12px;
+}
+
 .color-tag {
     width: 20px;
     height: 6px;

package/src/components/charts/line-chart/components/hover-popover.module.less.d.ts

@@ -1,5 +1,6 @@
 export const __esModule: true;
 export const arrow: string;
+export const arrowBottom: string;
 export const arrowLeft: string;
 export const arrowRight: string;
 export const colorTag: string;

package/src/components/charts/line-chart/components/hover-popover.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useLayoutEffect, useState, FC, CSSProperties } from 'react';
+import { useCallback, useMemo, useRef, useLayoutEffect, useState, FC } from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 import { useDependencies } from '@servicetitan/react-ioc';
@@ -52,7 +52,7 @@ export const HoverPopover: FC = observer(() => {
         }
     }, [hoveredIndex, metrics, display, popH]);
 
-    const popoverStyle = useMemo<CSSProperties>(() => {
+    const { popoverStyle, arrowPosition } = useMemo(() => {
         const posX = svgStore.periodX(hoveredIndex);
 
         const yHeights = metrics
@@ -67,17 +67,23 @@ export const HoverPopover: FC = observer(() => {
         const barHeightPercentRaw = svgStore.fpy(Math.max(0, Math.min(100, barHeight)));
         const barHeightPercent = Math.max(0, Math.min(100, Number(barHeightPercentRaw) || 0));
 
-        const barTopPositionPx = (barHeightPercent / 100) * CHART_HEIGHT_PX;
-        const availableSpaceBelow = Math.max(0, CHART_HEIGHT_PX - barTopPositionPx - popH);
-        const popoverOffsetPx = Math.min(OFFSET_PX, availableSpaceBelow);
+        const barTopPx = (barHeightPercent / 100) * CHART_HEIGHT_PX;
+        const idealTopPx = barTopPx + OFFSET_PX;
+        const maxTopPx = Math.max(0, CHART_HEIGHT_PX - popH);
+        const popoverRepositioned = idealTopPx > maxTopPx;
+        const clampedTopPx = Math.min(idealTopPx, maxTopPx);
+        const topPercent = (clampedTopPx / CHART_HEIGHT_PX) * 100;
 
         return {
-            top: `${barHeightPercent}%`,
-            transform: `translateY(${popoverOffsetPx}px)`,
-            position: 'absolute',
-            ...(isChartLeftSide
-                ? { left: `${svgStore.fpx(posX + 2)}%` }
-                : { right: `${svgStore.fpx(102 - posX)}%` }),
+            popoverStyle: {
+                top: `${topPercent.toFixed(1)}%`,
+                transform: 'translateY(0)',
+                position: 'absolute' as const,
+                ...(isChartLeftSide
+                    ? { left: `${svgStore.fpx(posX + 2)}%` }
+                    : { right: `${svgStore.fpx(102 - posX)}%` }),
+            },
+            arrowPosition: popoverRepositioned ? 'bottom' : 'top',
         };
     }, [svgStore, hoveredIndex, isChartLeftSide, metrics, stackedTotals, popH]);
 
@@ -85,6 +91,10 @@ export const HoverPopover: FC = observer(() => {
         return null;
     }
 
+    if (stackedTotals?.[hoveredIndex] === 0) {
+        return null;
+    }
+
     const period = periods[hoveredIndex]!;
     const partialWeek = !!period.partial;
 
@@ -97,7 +107,8 @@ export const HoverPopover: FC = observer(() => {
             <div
                 className={classNames(
                     Styles.arrow,
-                    isChartLeftSide ? Styles.arrowLeft : Styles.arrowRight
+                    isChartLeftSide ? Styles.arrowLeft : Styles.arrowRight,
+                    arrowPosition === 'bottom' && Styles.arrowBottom
                 )}
             />
             <Text size="small" variant="headline" el="h6">

package/src/components/charts/line-chart/components/svg-bars.tsx

@@ -56,38 +56,18 @@ export const SvgBars: FC<SvgBarsProps> = observer(
             }));
 
             if (isStackedBarChart) {
-                // Use ORIGINAL calculations - keep all spacing/positioning unchanged
                 const spacingBetweenSegments = 1;
-                const totalSpacing = (values.length - 1) * spacingBetweenSegments;
-                let stackedBarHeight =
-                    values.reduce((sum, curr) => sum + curr.val, 0) + totalSpacing;
+                const totalValue = values.reduce((sum, curr) => sum + curr.value, 0);
+                const totalYValue = values.reduce((sum, curr) => sum + curr.val, 0);
 
-                // Find first/last non-zero indices for visual styling
                 const firstNonZeroIdx = values.findIndex(v => v.value > 0);
                 const lastNonZeroIdx = values.reduce(
                     (last, v, idx) => (v.value > 0 ? idx : last),
                     -1
                 );
 
-                // Count 0-value segments below first non-zero (for text position adjustment)
-                const zeroSegmentsBelowFirst =
-                    firstNonZeroIdx >= 0
-                        ? values.slice(firstNonZeroIdx + 1).filter(v => v.value <= 0).length
-                        : 0;
-
-                const totalValue = values.reduce((sum, curr) => sum + curr.value, 0);
                 if (totalValue > 0) {
-                    /*
-                     * Adjust text position to maintain consistent gap with first rendered segment:
-                     * 1. Subtract spacing for skipped segments from fpy argument
-                     * 2. Add pixel offset for zeros below first non-zero
-                     */
-                    const textStackedBarHeight =
-                        stackedBarHeight -
-                        (firstNonZeroIdx > 0 ? firstNonZeroIdx : 0) * spacingBetweenSegments;
-                    const yTop =
-                        +fpy(textStackedBarHeight) +
-                        zeroSegmentsBelowFirst * spacingBetweenSegments;
+                    const yTop = +fpy(totalYValue) - 2;
                     const scaleX = 0.3;
                     const scaleY = 1;
 
@@ -116,26 +96,29 @@ export const SvgBars: FC<SvgBarsProps> = observer(
                     );
                 }
 
+                let stackedBarHeight = totalYValue;
+                let isFirstRendered = true;
+                const nonZeroCount = values.filter(v => v.value > 0).length;
+                const bottomTrim = Math.max(0, nonZeroCount - 1) * spacingBetweenSegments;
+
                 for (let j = 0; j < values.length; j++) {
                     const value = values[j];
-                    stackedBarHeight -= spacingBetweenSegments;
-
-                    const TOP_RADIUS = 1;
-                    const xLeft = +fpx(x - barWidth / 2);
-                    const width = +fpx(barWidth);
 
                     if (value.value <= 0) {
-                        stackedBarHeight -= value.val;
                         continue;
                     }
-                    const zeroSegments = values.slice(j + 1).filter(v => v.value <= 0).length;
-
-                    // Adjust yTop: move down by the space 0-value segments would occupy
-                    const yTop =
-                        +fpy(stackedBarHeight) +
-                        (values.length - 2) +
-                        zeroSegments * spacingBetweenSegments;
-                    const height = j === lastNonZeroIdx ? +fpx(value.val - 2) : +fpx(value.val);
+
+                    if (!isFirstRendered) {
+                        stackedBarHeight -= spacingBetweenSegments;
+                    }
+                    isFirstRendered = false;
+
+                    const TOP_RADIUS = 1;
+                    const xLeft = +fpx(x - barWidth / 2);
+                    const width = +fpx(barWidth);
+                    const yTop = +fpy(stackedBarHeight);
+                    const height =
+                        j === lastNonZeroIdx ? +fpx(value.val - bottomTrim) : +fpx(value.val);
                     const r = j === firstNonZeroIdx ? TOP_RADIUS : 0;
 
                     const d = [

package/src/components/stat/stat-card.module.less

@@ -11,6 +11,37 @@
     margin-bottom: 2px;
 }
 
-.title {
-    border-bottom: 1px dashed @color-neutral-90;
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.title-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.value-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 8px;
+    min-height: 40px;
+}
+
+.info-icon {
+    display: flex;
+    align-items: center;
+    line-height: 0;
+}
+
+.centered {
+    justify-content: center;
+}
+
+.card {
+    border-radius: 12px;
+    min-width: min-content;
 }

package/src/components/stat/stat-card.module.less.d.ts

@@ -1,5 +1,10 @@
 export const __esModule: true;
+export const card: string;
+export const centered: string;
+export const content: string;
+export const infoIcon: string;
 export const statDiff: string;
 export const statExtendedDiff: string;
-export const title: string;
+export const titleRow: string;
+export const valueRow: string;
 

package/src/components/stat/stat-card.tsx

@@ -1,18 +1,21 @@
-import { FC, ReactNode, useState } from 'react';
+import { FC, Fragment, ReactNode, useState } from 'react';
 import classNames from 'classnames';
 import {
     BodyText,
     BodyTextPropsStrict,
     Eyebrow,
+    Headline,
     Popover,
     Stack,
     Tooltip,
 } from '@servicetitan/design-system';
 import * as Styles from './stat-card.module.less';
 import { formatValue, NumberFormatter } from '../../utils/formatters';
-import { Icon } from '@servicetitan/anvil2';
+import { Icon, Skeleton } from '@servicetitan/anvil2';
 import TrendingUpSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_up.svg';
 import TrendingDownSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_down.svg';
+import InfoSVG from '@servicetitan/anvil2/assets/icons/material/round/info.svg';
+import { tokens } from '@servicetitan/tokens/core/index';
 
 const calculateDiff = (
     value: number,
@@ -146,6 +149,8 @@ export interface StatCardProps {
     valueOnly?: boolean;
     className?: string;
     diffPercentOnly?: boolean;
+    centered?: boolean;
+    loading?: boolean;
 }
 
 export const StatCard: FC<StatCardProps> = ({
@@ -164,61 +169,81 @@ export const StatCard: FC<StatCardProps> = ({
     valueOnly,
     className,
     diffPercentOnly = false,
+    centered,
+    loading,
 }) => {
     const [popoverShown, setPopoverShown] = useState(false);
     const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
     const val = value === undefined ? '\u00A0' : formatValue(value, format);
-
-    const eyebrow = (
-        <Eyebrow
-            className={classNames(Styles.title, 'ta-center')}
-            data-cy={`marketing-stat-${title}-title`}
-            onMouseEnter={() => {
-                setPopoverShown(true);
-            }}
-        >
-            {title}
-        </Eyebrow>
-    );
+    const hasInfo = !!description || !!popoverContent;
+
+    const eyebrow = <Eyebrow data-cy={`marketing-stat-${title}-title`}>{title}</Eyebrow>;
+
+    const infoIcon = <Icon svg={InfoSVG} color={tokens.colorNeutral100} />;
+
+    const infoContent = popoverContent ? (
+        <div className={Styles.infoIcon}>
+            <Popover
+                open={popoverShown}
+                trigger={infoIcon}
+                onMouseEnter={() => setPopoverShown(true)}
+            >
+                {popoverContent}
+            </Popover>
+        </div>
+    ) : description ? (
+        <div className={Styles.infoIcon}>
+            <Tooltip text={description} data-cy={`marketing-stat-${title}-tooltip`}>
+                {infoIcon}
+            </Tooltip>
+        </div>
+    ) : null;
 
     return (
         <Stack
             direction="column"
-            alignItems="center"
             className={classNames(
-                'p-y-3',
+                'p-2',
                 {
-                    'bg-white border-radius-2 border': !clean,
+                    'bg-white border': !clean,
+                    [Styles.card]: !clean,
                     'flex-grow-1 flex-basis-0': fill,
                 },
                 className
             )}
             onMouseLeave={() => setPopoverShown(false)}
         >
-            {popoverContent ? (
-                <Popover open={popoverShown} trigger={eyebrow}>
-                    {popoverContent}
-                </Popover>
-            ) : description ? (
-                <Tooltip text={description} data-cy={`marketing-stat-${title}-tooltip`}>
+            <div className={classNames('p-3', Styles.content)}>
+                <div className={classNames(Styles.titleRow, { [Styles.centered]: centered })}>
                     {eyebrow}
-                </Tooltip>
-            ) : (
-                eyebrow
-            )}
-            <BodyText className="fs-6-i ff-display" data-cy={`marketing-stat-${title}-value`}>
-                {val}
-            </BodyText>
-            {!valueOnly && (
-                <StatDiff
-                    value={value}
-                    prev={prev}
-                    format={format}
-                    inverted={inverted}
-                    neutral={neutral}
-                    diffPercentOnly={diffPercentOnly}
-                />
-            )}
+                    {hasInfo && infoContent}
+                </div>
+                <div className={classNames(Styles.valueRow, { [Styles.centered]: centered })}>
+                    {loading ? (
+                        <Skeleton.Text variant="headline" className="w-33" />
+                    ) : (
+                        <Fragment>
+                            <Headline
+                                size="xlarge"
+                                className="m-b-0-i"
+                                data-cy={`marketing-stat-${title}-value`}
+                            >
+                                {val}
+                            </Headline>
+                            {!valueOnly && (
+                                <StatDiff
+                                    value={value}
+                                    prev={prev}
+                                    format={format}
+                                    inverted={inverted}
+                                    neutral={neutral}
+                                    diffPercentOnly={diffPercentOnly}
+                                />
+                            )}
+                        </Fragment>
+                    )}
+                </div>
+            </div>
         </Stack>
     );
 };