@servicetitan/marketing-ui 5.11.1 → 6.0.0

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

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

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

@@ -1,8 +1,10 @@
 export const __esModule: true;
 export const flex1: string;
+export const leftDiff: string;
+export const leftTitle: string;
+export const percentTextWrapper: string;
 export const pyramidBoxLeft: string;
 export const pyramidBoxRight: string;
-export const pyramidLine: string;
 export const pyramidWrapper: string;
 export const statTitle: string;
 export const title: string;

package/src/components/charts/funnel-chart/components/funnel-chart.tsx

@@ -1,16 +1,6 @@
-import { useMemo, useState, FC } from 'react';
+import { useMemo, useState, FC, Fragment } from 'react';
 import classNames from 'classnames';
-import {
-    BodyText,
-    Eyebrow,
-    Headline,
-    Icon,
-    Mask,
-    Popover,
-    Stack,
-    StatusLight,
-    Tooltip,
-} from '@servicetitan/design-system';
+import { BodyText, Eyebrow, Icon, Mask, Stack, Tooltip } from '@servicetitan/design-system';
 import { tokens } from '@servicetitan/tokens/core';
 import { formatValue } from '../../../../utils/formatters';
 import { StatDiff } from '../../../stat/stat-card';
@@ -18,6 +8,8 @@ import { FunnelChartProps } from '../utils/interface';
 import { defaultBottomSideLength, defaultTopSideLength } from '../utils/const';
 import { FunnelPyramidSvg } from './funnel-svg';
 import * as Styles from './funnel-chart.module.less';
+import { Popover } from '@servicetitan/anvil2';
+import { ColorTag } from '../../common';
 
 export const FunnelChart: FC<FunnelChartProps> = ({
     sections,
@@ -29,11 +21,16 @@ export const FunnelChart: FC<FunnelChartProps> = ({
     className,
 }) => {
     const [popoverShown, setPopoverShown] = useState<number | undefined>(undefined);
-
+    const [rowYs, setRowYs] = useState<number[]>([]);
     const colors = useMemo(() => sections.map(s => s.color), [sections]);
+    const outlineColors = useMemo(() => sections.map(s => s.outlineColor), [sections]);
     const hidePopover = () => setPopoverShown(undefined);
-    const pyramidTextsStyles = useMemo(
-        () => ({ left: `${100 - topSideLength}%` }),
+
+    const rightStyles = useMemo(
+        () => ({
+            left: `${100 - topSideLength}%`,
+            width: `${topSideLength}%`,
+        }),
         [topSideLength]
     );
 
@@ -48,8 +45,10 @@ export const FunnelChart: FC<FunnelChartProps> = ({
             <div className={Styles.pyramidWrapper}>
                 <FunnelPyramidSvg
                     colors={colors}
+                    outlineColors={outlineColors}
                     topSideLength={topSideLength}
                     bottomSideLength={bottomSideLength}
+                    onRowAnchors={setRowYs}
                 />
             </div>
 
@@ -58,9 +57,9 @@ export const FunnelChart: FC<FunnelChartProps> = ({
                     'd-f flex-column justify-content-around',
                     Styles.pyramidBoxRight
                 )}
-                style={pyramidTextsStyles}
+                style={rightStyles}
             >
-                {sections.map(({ id, title, value, color, prev, textClass, data }, ind) => (
+                {sections.map(({ id, title, value, color, prev, data, outlineColor }) => (
                     <Stack
                         key={title}
                         className={Styles.flex1}
@@ -69,75 +68,105 @@ export const FunnelChart: FC<FunnelChartProps> = ({
                         onMouseEnter={() => setPopoverShown(id)}
                         onMouseLeave={hidePopover}
                     >
-                        <Popover
-                            className="of-hidden"
-                            trigger={
-                                <Headline
-                                    size="small"
-                                    className={classNames('m-x-2 m-b-0-i', textClass)}
-                                    data-cy={`marketing-funnel-section-${id}-value`}
+                        <Popover open={popoverShown === id} openOnHover placement="right">
+                            <Popover.Trigger>
+                                {props => (
+                                    <span {...props}>
+                                        <div className={Styles.percentTextWrapper}>
+                                            <BodyText
+                                                className={classNames('m-x-2 m-b-0-i')}
+                                                data-cy={`marketing-funnel-section-${id}-value`}
+                                            >
+                                                {formatValue(value, format)}
+                                            </BodyText>
+                                        </div>
+                                    </span>
+                                )}
+                            </Popover.Trigger>
+                            <Popover.Content>
+                                <Stack
+                                    alignItems="flex-start"
+                                    justifyContent="flex-start"
+                                    direction="column"
+                                    data-cy={`marketing-funnel-popover-${id}-content`}
                                 >
-                                    {formatValue(value, format)}
-                                </Headline>
-                            }
-                            open={popoverShown === id}
-                            direction={ind === 0 ? 'lt' : 'lb'}
-                            padding="s"
-                            width="auto"
-                            portal
-                        >
-                            <Stack
-                                alignItems="center"
-                                justifyContent="flex-start"
-                                data-cy={`marketing-funnel-popover-${id}-content`}
-                            >
-                                <StatusLight color={color} />
-                                <BodyText bold className="m-r-half">
-                                    {formatValue(value, format)}
-                                </BodyText>
-                                <BodyText bold className="m-r-1">
-                                    {title}
-                                </BodyText>
-                                <StatDiff value={value} prev={prev} size="xsmall" format={format} />
-                            </Stack>
+                                    <Stack>
+                                        <ColorTag
+                                            label=""
+                                            color={color}
+                                            outlineColor={outlineColor}
+                                            pattern={outlineColor ? 'outline' : 'solid'}
+                                        />
+                                        <BodyText bold className="m-r-half">
+                                            {title} {formatValue(value, format)}
+                                        </BodyText>
+                                    </Stack>
+                                    <Stack.Item>
+                                        <StatDiff
+                                            value={value}
+                                            prev={prev}
+                                            size="xsmall"
+                                            format={format}
+                                        />
+                                    </Stack.Item>
+                                </Stack>
 
-                            {!!PopoverContent && (
-                                <PopoverContent
-                                    id={id}
-                                    value={value}
-                                    text={formatValue(value, format)}
-                                    data={data}
-                                />
-                            )}
+                                {!!PopoverContent && (
+                                    <PopoverContent
+                                        id={id}
+                                        value={value}
+                                        text={formatValue(value, format)}
+                                        data={data}
+                                    />
+                                )}
+                            </Popover.Content>
                         </Popover>
                     </Stack>
                 ))}
             </div>
-            <Stack className={Styles.pyramidBoxLeft} direction="column">
-                {sections.map(s => (
-                    <Stack
-                        key={s.id}
-                        className={Styles.flex1}
-                        justifyContent="flex-start"
-                        alignItems="flex-end"
-                    >
-                        <Eyebrow size="small" className={classNames(Styles.statTitle, 'm-r-half')}>
-                            {s.title}
-                        </Eyebrow>
+            <div className={Styles.pyramidBoxLeft} style={{ width: `${100 - topSideLength}%` }}>
+                {sections.map((s, i) => {
+                    const y = rowYs[i] ?? 0;
+                    const TITLE_UP = 24;
+                    const DIFF_DOWN = 4;
 
-                        <Tooltip direction="t" portal text={s.description}>
-                            <Icon
-                                name="info"
-                                className="m-r-1"
-                                size="14px"
-                                color={tokens.colorNeutral90}
-                            />
-                        </Tooltip>
+                    return (
+                        <Fragment key={s.id}>
+                            <div
+                                className={Styles.leftTitle}
+                                style={{ top: `calc(${y}% - ${TITLE_UP}px)` }}
+                            >
+                                <Eyebrow
+                                    size="small"
+                                    className={classNames(Styles.statTitle, 'm-r-half')}
+                                >
+                                    {s.title}
+                                </Eyebrow>
+                                <Tooltip direction="t" portal text={s.description}>
+                                    <Icon
+                                        name="info"
+                                        className="m-r-1"
+                                        size="14px"
+                                        color={tokens.colorNeutral90}
+                                    />
+                                </Tooltip>
+                            </div>
 
-                        <StatDiff value={s.value} prev={s.prev} size="xsmall" format={format} />
-                    </Stack>
-                ))}
-            </Stack>
+                            <div
+                                className={Styles.leftDiff}
+                                style={{ top: `calc(${y}% + ${DIFF_DOWN}px)` }}
+                            >
+                                <StatDiff
+                                    value={s.value}
+                                    prev={s.prev}
+                                    size="small"
+                                    format={format}
+                                />
+                            </div>
+                        </Fragment>
+                    );
+                })}
+            </div>
         </Mask>
     );
 };

package/src/components/charts/funnel-chart/components/funnel-svg.tsx

@@ -1,6 +1,7 @@
-import { useMemo, FC } from 'react';
+import { useMemo, FC, useEffect } from 'react';
 import { tokens } from '@servicetitan/tokens/core';
 import { defaultBottomSideLength, defaultTopSideLength } from '../utils/const';
+import { roundedPath } from '../utils/svg-rounded-path';
 
 const st = (v: number) => v.toFixed(2);
 
@@ -8,12 +9,16 @@ export interface FunnelPyramidSvgProps {
     colors: string[];
     topSideLength?: number;
     bottomSideLength?: number;
+    outlineColors?: (string | undefined)[];
+    onRowAnchors?: (ysPct: number[]) => void;
 }
 
 export const FunnelPyramidSvg: FC<FunnelPyramidSvgProps> = ({
     colors,
     topSideLength = defaultTopSideLength,
     bottomSideLength = defaultBottomSideLength,
+    outlineColors,
+    onRowAnchors,
 }) => {
     const sections = useMemo(() => {
         if (!colors.length) {
@@ -38,29 +43,39 @@ export const FunnelPyramidSvg: FC<FunnelPyramidSvgProps> = ({
         });
     }, [colors, topSideLength, bottomSideLength]);
 
-    const paths = useMemo(() => {
-        if (!sections.length) {
-            return [];
-        }
+    useEffect(() => {
+        onRowAnchors?.(sections.map(s => (s.yt + s.yb) / 2));
+    }, [onRowAnchors, sections]);
 
-        return sections.map((s, ind) => {
-            let path = '';
+    const pointAlong = (start: number, end: number, t: number) => (1 - t) * start + t * end;
+    const pxToViewBoxUnits = (px: number) => (px / 200) * 100;
 
-            path += `M${st(s.xtl)},${st(s.yt)} `;
-            path += `L${st(s.xtr)},${st(s.yt)} `;
-            path += `L${st(s.xbr)},${st(s.yb)} `;
-            path += `L${st(s.xbl)},${st(s.yb)} `;
-            path += 'Z';
+    const GAP_PX = 4;
+    const SEAM_PX = 1;
 
-            return {
-                key: ind.toString(),
-                path,
-                color: s.c,
-            };
+    const gapVU = pxToViewBoxUnits(GAP_PX);
+    const seamVU = pxToViewBoxUnits(SEAM_PX);
+
+    const lines = useMemo(() => {
+        return sections.map((section, i) => {
+            const y = (section.yt + section.yb) / 2;
+
+            const height = section.yb - section.yt;
+            const t = (y - section.yt) / height;
+            const xLeftAtMid = pointAlong(section.xtl, section.xbl, t);
+            const x2 = Math.max(0, xLeftAtMid - gapVU);
+
+            return { id: i, y, x2 };
         });
-    }, [sections]);
+    }, [sections, gapVU]);
 
-    const lines = useMemo(() => sections.slice(1).map((s, ind) => [ind, s.xtr, s.yt]), [sections]);
+    const seams = sections.slice(0, -1).map((s, i) => ({
+        key: i,
+        x1: s.xbl,
+        x2: s.xbr,
+        yTopEdge: s.yb - gapVU / 2 + seamVU / 2,
+        color: outlineColors?.[i],
+    }));
 
     return (
         <svg
@@ -78,9 +93,62 @@ export const FunnelPyramidSvg: FC<FunnelPyramidSvgProps> = ({
                 preserveAspectRatio="none"
                 xmlns="http://www.w3.org/2000/svg"
             >
-                {paths.map(({ key, path, color }) => (
-                    <path key={key} d={path} fill={color} />
+                {sections.map((section, i) => {
+                    const isTop = i === 0;
+                    const isBottom = i === sections.length - 1;
+
+                    const d = roundedPath(
+                        section.xtl,
+                        section.xtr,
+                        section.xbr,
+                        section.xbl,
+                        section.yt,
+                        section.yb,
+                        isTop,
+                        isBottom,
+                        2.5
+                    );
+
+                    return (
+                        <path
+                            key={`section-${section.xbl}-${section.yb}-${section.xbr}-${section.yb}`}
+                            d={d}
+                            fill={colors[i]}
+                            stroke={outlineColors?.[i]}
+                            strokeWidth={1}
+                            vectorEffect="non-scaling-stroke"
+                            strokeLinejoin="round"
+                        />
+                    );
+                })}
+                {sections.slice(0, -1).map(section => (
+                    <line
+                        key={`gap-${section.xbl}-${section.yb}-${section.xbr}-${section.yb}`}
+                        x1={st(section.xbl)}
+                        y1={st(section.yb)}
+                        x2={st(section.xbr)}
+                        y2={st(section.yb)}
+                        stroke="#fff"
+                        strokeWidth={GAP_PX}
+                        vectorEffect="non-scaling-stroke"
+                        strokeLinecap="round"
+                    />
                 ))}
+                {seams.map(({ key, x1, x2, yTopEdge, color }) =>
+                    color ? (
+                        <line
+                            key={`seam-${key}`}
+                            x1={st(x1)}
+                            y1={st(yTopEdge)}
+                            x2={st(x2)}
+                            y2={st(yTopEdge)}
+                            stroke={color}
+                            strokeWidth={SEAM_PX}
+                            vectorEffect="non-scaling-stroke"
+                            strokeLinecap="round"
+                        />
+                    ) : null
+                )}
             </svg>
             <svg
                 width="100%"
@@ -91,12 +159,12 @@ export const FunnelPyramidSvg: FC<FunnelPyramidSvgProps> = ({
                 preserveAspectRatio="none"
                 xmlns="http://www.w3.org/2000/svg"
             >
-                {lines.map(([id, x, y]) => (
+                {lines.map(({ id, x2, y }) => (
                     <line
                         key={id}
                         x1="0"
                         y1={st(y)}
-                        x2={st(x)}
+                        x2={st(x2)}
                         y2={st(y)}
                         stroke={tokens.colorNeutral60}
                         strokeWidth={0.5}

package/src/components/charts/funnel-chart/funnel-chart.stories.tsx

@@ -14,12 +14,13 @@ const w = (cb: () => ReactElement) => () => (
 const sections3 = (): FunnelChartSection<{ info: string[] }>[] => [
     {
         id: 1,
-        color: '#A9D1FF',
+        color: '#F2F9FF',
         title: 'Revenue',
         description: 'rate 1 description',
         value: 0.33,
         prev: 0.38,
         data: { info: ['random text 1'] },
+        outlineColor: '#3892F3',
     },
     {
         id: 2,
@@ -65,6 +66,7 @@ export const funnelChart4Sections = w(() => (
                 description: 'rate 1 description',
                 value: 0.33,
                 prev: 0.38,
+                outlineColor: '#D0D8DD',
             },
             {
                 id: 2,

package/src/components/charts/funnel-chart/utils/const.ts

@@ -1,2 +1,2 @@
-export const defaultTopSideLength = 66;
+export const defaultTopSideLength = 70;
 export const defaultBottomSideLength = 30;

package/src/components/charts/funnel-chart/utils/interface.ts

@@ -8,6 +8,7 @@ export interface FunnelChartSection<T> {
     value: number;
     prev?: number;
     color: string;
+    outlineColor?: string;
     textClass?: string;
     data?: T;
 }

package/src/components/charts/funnel-chart/utils/svg-rounded-path.ts

@@ -0,0 +1,86 @@
+const cornerRadius = (
+    xTopLeft: number,
+    xTopRight: number,
+    xBottomRight: number,
+    xBottomLeft: number,
+    yTop: number,
+    yBottom: number,
+    radius: number
+) => {
+    const topWidth = Math.max(0, xTopRight - xTopLeft);
+    const bottomWidth = Math.max(0, xBottomRight - xBottomLeft);
+    const height = Math.max(0, yBottom - yTop);
+    const maxAllowed = Math.min(topWidth / 2, bottomWidth / 2, height / 2);
+    return Math.max(0, Math.min(radius, maxAllowed));
+};
+
+export const roundedPath = (
+    xTopLeft: number,
+    xTopRight: number,
+    xBottomRight: number,
+    xBottomLeft: number,
+    yTop: number,
+    yBottom: number,
+    roundTop: boolean,
+    roundBottom: boolean,
+    radius: number
+) => {
+    const effectiveRadius = cornerRadius(
+        xTopLeft,
+        xTopRight,
+        xBottomRight,
+        xBottomLeft,
+        yTop,
+        yBottom,
+        roundBottom ? radius / 2 : radius
+    );
+
+    const insetTop = roundTop ? effectiveRadius : 0;
+    const insetBottom = roundBottom ? effectiveRadius : 0;
+
+    const fmt = (n: number) => n.toFixed(2);
+    const M = (x: number, y: number) => `M${fmt(x)},${fmt(y)}`;
+    const L = (x: number, y: number) => `L${fmt(x)},${fmt(y)}`;
+    const Q = (cx: number, cy: number, x: number, y: number) =>
+        `Q${fmt(cx)},${fmt(cy)} ${fmt(x)},${fmt(y)}`;
+
+    const path: string[] = [];
+
+    // top-left
+    path.push(M(xTopLeft + insetTop, yTop));
+
+    // Top edge → to top-right
+    path.push(L(xTopRight - insetTop, yTop));
+
+    // Top-right corner
+    if (roundTop && effectiveRadius > 0) {
+        path.push(Q(xTopRight, yTop, xTopRight, yTop + effectiveRadius));
+    }
+
+    // Right edge → down to bottom
+    path.push(L(xBottomRight, yBottom - insetBottom));
+
+    // Bottom-right corner
+    if (roundBottom && effectiveRadius > 0) {
+        path.push(Q(xBottomRight, yBottom, xBottomRight - effectiveRadius, yBottom));
+    }
+
+    // Bottom edge → to bottom-left
+    path.push(L(xBottomLeft + insetBottom, yBottom));
+
+    // Bottom-left corner
+    if (roundBottom && effectiveRadius > 0) {
+        path.push(Q(xBottomLeft, yBottom, xBottomLeft, yBottom - effectiveRadius));
+    }
+
+    // Left edge → up to top
+    path.push(L(xTopLeft, yTop + insetTop));
+
+    // Top-left corner
+    if (roundTop && effectiveRadius > 0) {
+        path.push(Q(xTopLeft, yTop, xTopLeft + effectiveRadius, yTop));
+    }
+
+    path.push('Z');
+    return path.join(' ');
+};

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

@@ -18,3 +18,13 @@
     width: 200px;
     top: 20%;
 }
+
+.color-tag {
+    width: 20px;
+    height: 6px;
+}
+
+.color-tag-outlined {
+    width: 18px;
+    height: 4px;
+}

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

@@ -1,4 +1,6 @@
 export const __esModule: true;
+export const colorTag: string;
+export const colorTagOutlined: string;
 export const line: string;
 export const popover: string;
 export const trigger: string;