@servicetitan/marketing-ui 7.2.0 → 7.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/marketing-ui",
-    "version": "7.2.0",
+    "version": "7.4.0",
     "description": "Marketing UI component and utils",
     "repository": {
         "type": "git",
@@ -32,7 +32,7 @@
     "devDependencies": {
         "@servicetitan/anvil2": "^2.0.1",
         "@servicetitan/design-system": "~14.5.1",
-        "@servicetitan/react-ioc": "^33.1.1",
+        "@servicetitan/react-ioc": "^34.0.1",
         "@servicetitan/tokens": ">=12.2.1",
         "@testing-library/react": "^14.2.1",
         "@types/accounting": "~0.4.2",
@@ -53,5 +53,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "a44925e37020acb2153c7e10215a31cd22d054c1"
+    "gitHead": "7e2b147613dc2f96854d2e2c4458a4891dc6aadc"
 }

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,21 @@
     margin-bottom: 2px;
 }
 
-.title {
-    border-bottom: 1px dashed @color-neutral-90;
+.title-row {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+}
+
+.value-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 8px;
+    margin-top: @spacing-1;
+}
+
+.card {
+    border-radius: 12px;
+    min-width: min-content;
 }

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

@@ -1,5 +1,7 @@
 export const __esModule: true;
+export const card: 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

@@ -4,6 +4,7 @@ import {
     BodyText,
     BodyTextPropsStrict,
     Eyebrow,
+    Headline,
     Popover,
     Stack,
     Tooltip,
@@ -13,6 +14,8 @@ import { formatValue, NumberFormatter } from '../../utils/formatters';
 import { Icon } 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,
@@ -168,57 +171,61 @@ export const StatCard: FC<StatCardProps> = ({
     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 = (
-        <Eyebrow
-            className={classNames(Styles.title, 'ta-center')}
-            data-cy={`marketing-stat-${title}-title`}
-            onMouseEnter={() => {
-                setPopoverShown(true);
-            }}
-        >
-            {title}
-        </Eyebrow>
-    );
+    const eyebrow = <Eyebrow data-cy={`marketing-stat-${title}-title`}>{title}</Eyebrow>;
+
+    const infoIcon = <Icon svg={InfoSVG} color={tokens.colorNeutral100} />;
+
+    const infoContent = popoverContent ? (
+        <Popover open={popoverShown} trigger={infoIcon} onMouseEnter={() => setPopoverShown(true)}>
+            {popoverContent}
+        </Popover>
+    ) : description ? (
+        <Tooltip text={description} data-cy={`marketing-stat-${title}-tooltip`}>
+            {infoIcon}
+        </Tooltip>
+    ) : 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="p-3">
+                <div className={Styles.titleRow}>
                     {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={Styles.valueRow}>
+                    <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}
+                        />
+                    )}
+                </div>
+            </div>
         </Stack>
     );
 };

package/src/utils/date/date-range-picker-state.ts

@@ -12,8 +12,9 @@ export interface DateRangePickerStateType {
     onChange(val?: DateRange): void;
 }
 
-export interface DateRangePickerOptionsStateType<OptionKeys extends string>
-    extends DateRangePickerStateType {
+export interface DateRangePickerOptionsStateType<
+    OptionKeys extends string,
+> extends DateRangePickerStateType {
     readonly options: DateRangePickerOptions<OptionKeys>;
     readonly selectedOption?: DateRangePickerOption<OptionKeys>;
 }