@servicetitan/marketing-ui 5.11.0 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/marketing-ui",
-    "version": "5.11.0",
+    "version": "6.0.0",
     "description": "Marketing UI component and utils",
     "repository": {
         "type": "git",
@@ -18,6 +18,7 @@
         "react-image-crop": "8.6.5"
     },
     "peerDependencies": {
+        "@servicetitan/anvil2": "^1.42.0",
         "@servicetitan/design-system": ">=13.2.1",
         "@servicetitan/react-ioc": ">=14.1.1",
         "@servicetitan/tokens": ">=12.2.1",
@@ -29,8 +30,9 @@
         "react": ">=17.0.2"
     },
     "devDependencies": {
+        "@servicetitan/anvil2": "^1.42.0",
         "@servicetitan/design-system": "~14.5.1",
-        "@servicetitan/react-ioc": "^31.6.0",
+        "@servicetitan/react-ioc": "^32.2.0",
         "@servicetitan/tokens": ">=12.2.1",
         "@testing-library/react": "^14.2.1",
         "@types/accounting": "~0.4.2",
@@ -51,5 +53,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "3dab3310534a39aaacb0069e1d377579fe0a7fab"
+    "gitHead": "39c8bee0e01ce314dbdd07049e1d0851a03225ab"
 }

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

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

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

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

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

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

package/src/components/charts/common/index.ts

@@ -0,0 +1 @@
+export { ColorTag } from './color-tag';

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/index.ts

@@ -1,2 +1,2 @@
 export { FunnelChart } from './components/funnel-chart';
-export * from './utils/interface';
+export type * from './utils/interface';

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;