@servicetitan/marketing-ui 5.11.0 → 6.0.0

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;

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

@@ -8,13 +8,23 @@ import { SvgStore } from '../stores/svg.store';
 import { getFormatter } from '../utils/formatters';
 import { periodDateTitleFormatter } from '../utils/labels';
 import * as Styles from './hover-popover.module.less';
-import { ColorTag } from './stuff';
+import { ColorTag } from '../../common';
+import { Text } from '@servicetitan/anvil2';
 
 export const HoverPopover: FC = observer(() => {
-    const [{ periods, resolution, hoveredIndex, metrics, display }, svgStore] = useDependencies(
-        LineChartStore,
-        SvgStore
-    );
+    const [
+        {
+            periods,
+            resolution,
+            hoveredIndex,
+            metrics,
+            display,
+            formattedTotalAt,
+            totalLabel,
+            stackedTotals,
+        },
+        svgStore,
+    ] = useDependencies(LineChartStore, SvgStore);
 
     const formatDateTitle = useMemo(() => periodDateTitleFormatter[resolution], [resolution]);
     const formatValue = useCallback(
@@ -51,9 +61,11 @@ export const HoverPopover: FC = observer(() => {
                 className={classNames(Styles.popover, 'bg-white border border-radius-1 p-1')}
                 style={popoverStyle}
             >
-                <BodyText size="small" bold>
-                    {formatDateTitle(period)}
-                </BodyText>
+                <Text size="small" variant="headline" el="h6">
+                    {stackedTotals
+                        ? `${formattedTotalAt(hoveredIndex)} ${totalLabel} | ${formatDateTitle(period)}`
+                        : formatDateTitle(period)}
+                </Text>
                 {partialWeek && (
                     <BodyText size="xsmall" subdued>
                         Partial week
@@ -63,12 +75,20 @@ export const HoverPopover: FC = observer(() => {
                     m =>
                         m.values[hoveredIndex] !== undefined && (
                             <ColorTag
+                                small
                                 label={formatValue(m.title, m.values[hoveredIndex], m.isRight)}
                                 color={m.color}
                                 key={m.title}
                                 className="m-t-1"
                                 dashed={m.opts?.dashed}
-                                small
+                                pattern={m.opts?.pattern}
+                                outlineColor={m.opts?.outlineColor}
+                                strokeColor={m.opts?.strokeColor}
+                                colorTagClassName={
+                                    m.opts?.pattern === 'outline'
+                                        ? Styles.colorTagOutlined
+                                        : Styles.colorTag
+                                }
                             />
                         )
                 )}

package/src/components/charts/line-chart/components/stuff.module.less

@@ -1,21 +1,5 @@
 @import (reference) '~@servicetitan/tokens/core/tokens.less';
 
-.color-tag {
-    width: @spacing-3;
-    margin-right: @spacing-1;
-    height: 3px;
-}
-
-.color-tag-dashed {
-    height: 0;
-    border-top-style: dashed;
-    border-top-width: 3px;
-}
-
-.color-tag-small {
-    width: @spacing-2;
-}
-
 .x-axis-label {
     font-size: @typescale-0;
     color: @color-neutral-90;

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

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

package/src/components/charts/line-chart/components/stuff.tsx

@@ -4,36 +4,7 @@ import { BodyText, Stack } from '@servicetitan/design-system';
 import * as Styles from './stuff.module.less';
 import { LineChartMetric } from '../utils/interfaces';
 import { ChartXLabels } from '../utils/internal-interfaces';
-
-interface ColorTagProps {
-    label: string;
-    color: string;
-    className?: string;
-    small?: boolean;
-    dashed?: boolean;
-}
-
-export const ColorTag: FC<ColorTagProps> = ({ label, color, className, small, dashed }) => (
-    <Stack alignItems="center" className={className}>
-        <div
-            style={
-                dashed
-                    ? {
-                          borderColor: color,
-                      }
-                    : {
-                          backgroundColor: color,
-                      }
-            }
-            className={classNames(
-                Styles.colorTag,
-                dashed && Styles.colorTagDashed,
-                small && Styles.colorTagSmall
-            )}
-        />
-        <BodyText size={small ? 'xsmall' : 'small'}>{label}</BodyText>
-    </Stack>
-);
+import { ColorTag } from '../../common';
 
 interface MetricsTitleProps {
     metrics: LineChartMetric[];
@@ -47,6 +18,9 @@ export const MetricsTitle: FC<MetricsTitleProps> = ({ metrics }) => (
                 label={m.title}
                 color={m.color}
                 dashed={m.opts?.dashed}
+                pattern={m.opts?.pattern}
+                outlineColor={m.opts?.outlineColor}
+                strokeColor={m.opts?.strokeColor}
                 className="m-r-4"
             />
         ))}

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

@@ -13,12 +13,35 @@ interface SvgBarsProps {
 
 export const SvgBars: FC<SvgBarsProps> = observer(
     ({ metrics, isStackedBarChart, isGroupedBarChart }) => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         const [store] = useDependencies(SvgStore);
         const { fpx, fpy, barWidth, length } = store;
         const barWidthHalf = barWidth / 2;
         const paths = [];
 
+        const patternDefs = metrics
+            .filter(m => m.opts?.pattern === 'striped')
+            .map(m => {
+                const rotation = 20;
+                const tileW = 0.6;
+                const tileH = 0.6;
+                const stripeWidth = Math.max(0.1, Math.floor(tileW / 20));
+                const tintOpacity = 0.06;
+
+                return (
+                    <pattern
+                        key={`pattern-${m.id}`}
+                        id={`stripe-pattern-${m.id}`}
+                        patternUnits="userSpaceOnUse"
+                        width={tileW}
+                        height={tileH}
+                        patternTransform={`rotate(${rotation})`}
+                    >
+                        <rect width={tileW} height={tileH} fill={m.color} opacity={tintOpacity} />
+                        <rect width={stripeWidth} height={tileH} fill={m.color} />
+                    </pattern>
+                );
+            });
+
         for (let i = 0; i < length; i++) {
             const x = store.periodX(i);
             const values = metrics.map(m => ({
@@ -26,22 +49,90 @@ export const SvgBars: FC<SvgBarsProps> = observer(
                 color: m.valuesOpts?.[i]?.color ?? m.color,
                 opacity: m.opacity,
                 val: store.periodY(m, i),
+                pattern: m.opts?.pattern,
+                strokeColor: m.opts?.strokeColor,
+                outlineColor: m.opts?.outlineColor,
+                value: m.values[i],
             }));
 
             if (isStackedBarChart) {
-                let stackedBarHeight = values.reduce((sum, curr) => sum + curr.val, 0);
+                const spacingBetweenSegments = 1; // Approximately 4px in SVG coordinates
+                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);
+                if (totalValue > 0) {
+                    const yTop = +fpy(stackedBarHeight);
+                    const scaleX = 0.3;
+                    const scaleY = 1;
 
-                for (const value of values) {
                     paths.push(
-                        <rect
+                        <g
+                            key={`total-${i}`}
+                            transform={`translate(${x},${yTop}) scale(${scaleX},${scaleY})`}
+                            pointerEvents="none"
+                        >
+                            <text
+                                x={0}
+                                y={0}
+                                textAnchor="middle"
+                                dominantBaseline="alphabetic"
+                                fontSize="2.5"
+                                fontWeight={600}
+                                fill="#111827"
+                                stroke="white"
+                                strokeWidth={0.8}
+                                paintOrder="stroke"
+                                fontFamily="Nunito Sans"
+                            >
+                                {Math.round(totalValue)}
+                            </text>
+                        </g>
+                    );
+                }
+
+                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 yTop = +fpy(stackedBarHeight) + (values.length - 2);
+                    const height = +fpx(value.val);
+                    const width = +fpx(barWidth);
+
+                    const r = j === 0 ? TOP_RADIUS : 0; // radius must be numeric
+
+                    const d = [
+                        `M ${xLeft} ${yTop + height}`, // bottom-left
+                        `L ${xLeft} ${yTop + r}`, // up left edge
+                        `Q ${xLeft} ${yTop} ${xLeft + r / 2} ${yTop}`, // top-left corner
+                        `L ${xLeft + width - r / 2} ${yTop}`, // across top
+                        `Q ${xLeft + width} ${yTop} ${xLeft + width} ${yTop + r}`, // top-right corner
+                        `L ${xLeft + width} ${yTop + height}`, // down right edge
+                        'Z',
+                    ].join(' ');
+                    paths.push(
+                        <path
                             key={keyVal(value.id, i)}
-                            x={fpx(x - barWidthHalf)}
-                            y={fpy(stackedBarHeight)}
-                            width={fpx(barWidth)}
-                            height={fpx(value.val)}
-                            fill={value.color}
+                            d={d}
+                            fill={
+                                value.pattern === 'striped'
+                                    ? `url(#stripe-pattern-${value.id})`
+                                    : value.color
+                            }
+                            stroke={
+                                value.pattern === 'outline'
+                                    ? value.outlineColor
+                                    : (value.strokeColor ?? value.color)
+                            }
+                            strokeWidth={1}
+                            vectorEffect="non-scaling-stroke"
+                            strokeLinejoin="round"
                         />
                     );
+
                     stackedBarHeight -= value.val;
                 }
             } else if (isGroupedBarChart) {
@@ -78,7 +169,12 @@ export const SvgBars: FC<SvgBarsProps> = observer(
             }
         }
 
-        return <g>{paths}</g>;
+        return (
+            <g>
+                {patternDefs.length > 0 && <defs>{patternDefs}</defs>}
+                {paths}
+            </g>
+        );
     }
 );
 
@@ -88,7 +184,6 @@ interface SvgBarsHoverProps {
 }
 
 export const SvgBarsHover: FC<SvgBarsHoverProps> = observer(({ onHover, onLeave }) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [store] = useDependencies(SvgStore);
     const { fpx, fpy, barWidth, length } = store;
     const barWidthHalf = barWidth / 2;

package/src/components/charts/line-chart/index.ts

@@ -1,2 +1,2 @@
-export * from './utils/interfaces';
+export type * from './utils/interfaces';
 export * from './components/container';

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

@@ -1,6 +1,7 @@
 import { FC, useState } from 'react';
 import { Form } from '@servicetitan/design-system';
 import { LineChart, LineChartPeriod } from './index';
+import { core } from '@servicetitan/anvil2/token';
 
 export default {
     title: 'Marketing UI/charts/LineChart',
@@ -122,24 +123,28 @@ export const stackedBarChartDailyBottomTitles = () => {
     return (
         <LineChart
             resolution="day"
+            totalMetricName="Leads"
             metrics={[
                 {
                     id: 2,
                     title: 'Lead Calls',
                     type: 'stacked-bar',
-                    color: '#D0D8DD',
-                },
-                {
-                    id: 3,
-                    title: 'Online Bookings',
-                    type: 'stacked-bar',
-                    color: '#08BFDF',
+                    color: '#3892F3',
+                    opts: {
+                        pattern: 'striped',
+                        strokeColor: core.semantic.ChartsMonochrome3Stroke.value,
+                    },
                 },
+                { id: 3, title: 'Online Bookings', type: 'stacked-bar', color: '#2B84E0' },
                 {
                     id: 4,
                     title: 'Manual Calls',
                     type: 'stacked-bar',
-                    color: '#1FBC70',
+                    color: '#F2F9FF',
+                    opts: {
+                        pattern: 'outline',
+                        outlineColor: core.semantic.ChartsMonochrome3Stroke.value,
+                    },
                 },
             ]}
             metricValues={stackedBarChartValues.values}

package/src/components/charts/line-chart/stores/line-chart.store.ts

@@ -1,6 +1,6 @@
 import { injectable } from '@servicetitan/react-ioc';
-import { action, observable, makeObservable } from 'mobx';
-import {
+import { action, observable, makeObservable, computed } from 'mobx';
+import type {
     LineChartDisplay,
     LineChartDisplayValueFormat,
     LineChartMetricValues,
@@ -9,7 +9,7 @@ import {
     LineChartResolution,
 } from '../utils/interfaces';
 import { defaultDisplay } from '../utils/const';
-import { ChartMetric, SideMetricsSettings } from '../utils/internal-interfaces';
+import type { ChartMetric, SideMetricsSettings } from '../utils/internal-interfaces';
 import { getFormatter } from '../utils/formatters';
 
 const getSideMetricsSettings = (
@@ -86,12 +86,39 @@ export class LineChartStore {
     @observable metrics: ChartMetric[] = [];
     @observable periods: LineChartPeriod[] = [];
     @observable resolution: LineChartResolution = 'day';
+    @observable totalMetricName?: string;
 
     @observable left?: SideMetricsSettings;
     @observable right?: SideMetricsSettings;
 
     @observable hoveredIndex = -1;
 
+    @computed get stackedTotals(): number[] | undefined {
+        const stackedSeries = this.metrics.filter(m => m.type === 'stacked-bar');
+        if (stackedSeries.length === 0) {
+            return undefined;
+        }
+        const length = Math.max(this.periods.length, ...stackedSeries.map(s => s.values.length));
+        if (length === 0) {
+            return [];
+        }
+
+        const totals = Array.from({ length }, () => 0);
+
+        for (let i = 0; i < length; i++) {
+            for (const s of stackedSeries) {
+                const v = s.values[i];
+                totals[i] += !Number.isNaN(v) ? v : 0;
+            }
+        }
+
+        return totals;
+    }
+
+    get totalLabel(): string {
+        return this.totalMetricName ?? 'Total';
+    }
+
     constructor() {
         makeObservable(this);
     }
@@ -131,6 +158,7 @@ export class LineChartStore {
         );
 
         this.resolution = props.resolution;
+        this.totalMetricName = props.totalMetricName;
         this.periods = props.periods || [];
         this.hoveredIndex = -1;
         this.isInit = true;
@@ -143,4 +171,14 @@ export class LineChartStore {
             this.hoveredIndex = -1;
         }
     };
+
+    formattedTotalAt = (index: number): string => {
+        const formatter = getFormatter(this.display.yLeftFormat);
+        return formatter(this.totalAt(index));
+    };
+
+    private totalAt = (index: number): number =>
+        this.stackedTotals && index >= 0 && index < this.stackedTotals.length
+            ? this.stackedTotals[index]
+            : 0;
 }

package/src/components/charts/line-chart/utils/interfaces.ts

@@ -6,6 +6,9 @@ export type LineChartMetricsTitlePosition = 'top' | 'top-right' | 'bottom';
 
 export interface LineChartMetricOpts {
     dashed?: boolean;
+    strokeColor?: string;
+    outlineColor?: string;
+    pattern?: 'solid' | 'striped' | 'outline';
 }
 
 export interface LineChartMetric {
@@ -40,6 +43,7 @@ export interface LineChartData {
     periods: LineChartPeriod[];
     metricValues: LineChartMetricValues[];
     resolution: LineChartResolution;
+    totalMetricName?: string;
 }
 
 export type LineChartDisplayValueFormatterName = 'number' | 'money' | 'moneyShort';

package/src/components/charts/line-chart/utils/labels.ts

@@ -104,7 +104,7 @@ export const periodDateTitleFormatter: Record<
         moment(period.from).format('HH:mm') +
         ' - ' +
         moment(period.to).format('HH:mm'),
-    day: period => moment(period.from).format('MMMM DD, YYYY'),
+    day: period => moment(period.from).format('MMM DD, YYYY'),
     month: period => moment(period.from).format('MMMM YYYY'),
     week: period =>
         moment(period.from).format('MM/DD/YYYY') + '-' + moment(period.to).format('MM/DD/YYYY'),

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

@@ -1,3 +1,18 @@
+@import (reference) '@servicetitan/tokens/core/tokens.less';
+
 .title-wrapper {
     max-width: 120px;
 }
+
+.percent-text-wrapper {
+    width: 32px;
+    height: 32px;
+    border-radius: @border-radius-circular;
+    background: @color-neutral-0;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: @spacing-0 auto;
+    box-shadow: 0 0 0 1px @color-neutral-0 inset;
+}

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

@@ -1,3 +1,4 @@
 export const __esModule: true;
+export const percentTextWrapper: string;
 export const titleWrapper: string;
 

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

@@ -1,13 +1,15 @@
 import { useMemo, FC } from 'react';
-import classNames from 'classnames';
 import { BodyText, Stack, StatusLight } from '@servicetitan/design-system';
 import { PieChartProps, PiePiece } from '../utils/interface';
 import { convertSessionsToPieces, radiusRelativeDefault } from '../utils/const';
 import { Pie } from './pie';
+import { Flex } from '@servicetitan/anvil2';
+import classNames from 'classnames';
 import * as Styles from './pie-chart.module.less';
+import { ColorTag } from '../../common';
 
 const PieTitles: FC<{ title: string; pieces: PiePiece[] }> = ({ title, pieces }) => {
-    return (
+    return pieces.length > 2 ? (
         <div className={classNames(Styles.titleWrapper, 'of-y-auto p-t-2')}>
             <div>
                 {!!pieces.length && (
@@ -25,6 +27,12 @@ const PieTitles: FC<{ title: string; pieces: PiePiece[] }> = ({ title, pieces })
                 ))}
             </div>
         </div>
+    ) : (
+        <Flex direction="row" gap={8}>
+            {pieces.map(piece => (
+                <ColorTag key={piece.title} label={piece.title} color={piece.color} />
+            ))}
+        </Flex>
     );
 };
 
@@ -46,17 +54,19 @@ export const PieChart: FC<PieChartProps> = ({
     const style = useMemo(() => ({ height, width }), [height, width]);
 
     return (
-        <div className="d-f flex-row" style={style}>
-            <Pie
-                title={title}
-                pieces={pieces}
-                content={content}
-                popoverContent={popoverContent}
-                popoverDirection={popoverDirection}
-                radiusRelative={radiusRelative}
-                hideTitles={hideTitles}
-            />
+        <Stack direction={pieces.length > 2 ? 'row' : 'column'}>
+            <div style={style}>
+                <Pie
+                    title={title}
+                    pieces={pieces}
+                    content={content}
+                    popoverContent={popoverContent}
+                    popoverDirection={popoverDirection}
+                    radiusRelative={radiusRelative}
+                    hideTitles={hideTitles}
+                />
+            </div>
             {!hideTitles && <PieTitles title={title} pieces={pieces} />}
-        </div>
+        </Stack>
     );
 };