@servicetitan/marketing-ui 5.11.1 → 6.0.1

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

@@ -1,20 +1,22 @@
 import { useCallback, useMemo, useState, FC, Fragment } from 'react';
 import { tokens } from '@servicetitan/tokens/core';
-import { BodyText, Popover, Stack, StatusLight } from '@servicetitan/design-system';
+import { BodyText, Popover, Stack } from '@servicetitan/design-system';
 
 import { useClientRect } from '../../../../utils/use-client-rect';
 import { PieChartPopoverContentType, PiePiece, PopoverDirection } from '../utils/interface';
+import { ColorTag } from '../../common';
 
 const chartPadding = 8;
 const px = (value?: number) => `${value ?? 0}px`;
+const GAP_PX = 4;
 
 const PiePieceSvg: FC<{
     piece: PiePiece;
     selected?: boolean;
-}> = ({ piece: { id, color, opacity, points, text, path }, selected }) =>
+}> = ({ piece: { id, color, points, text, path }, selected }) =>
     points && path ? (
         <g id={id}>
-            {!!selected && (
+            {selected && (
                 <path
                     d={path}
                     fill={tokens.colorWhite}
@@ -25,25 +27,43 @@ const PiePieceSvg: FC<{
                 />
             )}
             <path d={path} fill={color} />
+            {points[4] && (
+                <g transform={`translate(${points[4][0]}, ${points[4][1]})`} pointerEvents="none">
+                    {(() => {
+                        const fontSize = 3;
+                        const height = 6;
+                        const radius = height / 2;
 
-            <svg
-                x={points[4][0] - 10}
-                y={points[4][1] - (points[4][1] > 0 ? 3 : 1)}
-                width={20}
-                height={6}
-            >
-                <text
-                    x="50%"
-                    y="50%"
-                    fontSize={4}
-                    fontWeight={600}
-                    fill={opacity > 0.3 ? tokens.colorWhite : tokens.colorBlack}
-                    dominantBaseline="middle"
-                    textAnchor="middle"
-                >
-                    {text}
-                </text>
-            </svg>
+                        const width = Math.max(8, text.length);
+
+                        return (
+                            <Fragment>
+                                <rect
+                                    x={-width / 2}
+                                    y={-height / 2}
+                                    width={width}
+                                    height={height}
+                                    rx={radius}
+                                    ry={radius}
+                                    fill="rgba(255,255,255,0.80)"
+                                    strokeWidth={0.6}
+                                />
+                                <text
+                                    x="0"
+                                    y="0"
+                                    fontSize={fontSize}
+                                    fontWeight={600}
+                                    textAnchor="middle"
+                                    dominantBaseline="middle"
+                                    fill={tokens.colorBlack}
+                                >
+                                    {text}
+                                </text>
+                            </Fragment>
+                        );
+                    })()}
+                </g>
+            )}
         </g>
     ) : null;
 
@@ -69,23 +89,65 @@ const PieSvg: FC<{
     pieces: PiePiece[];
     selectedIndex: number;
     radiusRelative: number;
-}> = ({ pieces, selectedIndex, radiusRelative }) => (
-    <svg
-        className="position-absolute"
-        style={{ inset: px(chartPadding) }}
-        viewBox={
-            `-${radiusRelative} -${radiusRelative} ` + `${radiusRelative * 2} ${radiusRelative * 2}`
-        }
-    >
-        {pieces.map((p, index) =>
-            p.path ? <PiePieceSvg piece={p} key={p.id} selected={index === selectedIndex} /> : null
-        )}
+}> = ({ pieces, selectedIndex, radiusRelative }) => {
+    const piePiece = pieces.find(p => p.points);
+    const innerR = piePiece ? Math.hypot(piePiece.points![3][0], piePiece.points![3][1]) : 0;
+    const outerR = piePiece ? Math.hypot(piePiece.points![1][0], piePiece.points![1][1]) : 0;
 
-        {selectedIndex >= 0 && selectedIndex < pieces.length && (
-            <use xlinkHref={pieces[selectedIndex].id} />
-        )}
-    </svg>
-);
+    const nonZeroPieces = pieces.filter(p => p.points && p.path);
+    const boundaries = nonZeroPieces.map(p => {
+        const [outerX, outerY] = p.points![1];
+        const len = Math.hypot(outerX, outerY) || 1;
+        return { x: outerX / len, y: outerY / len };
+    });
+
+    return (
+        <svg
+            className="position-absolute"
+            style={{ inset: `${chartPadding}px` }}
+            viewBox={`-${radiusRelative} -${radiusRelative} ${radiusRelative * 2} ${radiusRelative * 2}`}
+        >
+            {pieces.map((p, i) =>
+                p.path ? <PiePieceSvg piece={p} key={p.id} selected={i === selectedIndex} /> : null
+            )}
+            {nonZeroPieces.length > 1 && innerR > 0 && outerR > 0 && (
+                <Fragment>
+                    <defs>
+                        <mask id="ring-mask">
+                            <rect
+                                x={-outerR}
+                                y={-outerR}
+                                width={outerR * 2}
+                                height={outerR * 2}
+                                fill="black"
+                            />
+                            <circle cx="0" cy="0" r={outerR} fill="white" />
+                            <circle cx="0" cy="0" r={innerR} fill="black" />
+                        </mask>
+                    </defs>
+                    <g mask="url(#ring-mask)" pointerEvents="none">
+                        {boundaries.map(boundary => (
+                            <line
+                                key={`sep-${boundary.x}-${boundary.y}`}
+                                x1={boundary.x * innerR}
+                                y1={boundary.y * innerR}
+                                x2={boundary.x * outerR}
+                                y2={boundary.y * outerR}
+                                stroke="#fff"
+                                strokeWidth={GAP_PX}
+                                vectorEffect="non-scaling-stroke"
+                                strokeLinecap="round"
+                            />
+                        ))}
+                    </g>
+                </Fragment>
+            )}
+            {selectedIndex >= 0 && selectedIndex < pieces.length && (
+                <use xlinkHref={`#${pieces[selectedIndex].id}`} />
+            )}
+        </svg>
+    );
+};
 
 const PieSvgHover: FC<{
     pieces: PiePiece[];
@@ -140,7 +202,6 @@ export const Pie: FC<{
             styles: height
                 ? {
                       width: px(Math.max(250, height)),
-                      overflow: 'hidden',
                   }
                 : {},
         };
@@ -170,7 +231,7 @@ export const Pie: FC<{
     );
 
     return (
-        <div ref={ref} style={container.styles} className="position-relative">
+        <div ref={ref} style={container.styles} className="position-relative h-100">
             {pieces.every(p => !p.path) ? (
                 <Stack className="h-100" justifyContent="center" alignItems="center">
                     No Data
@@ -197,7 +258,10 @@ export const Pie: FC<{
                                             >
                                                 {!hideTitles && (
                                                     <Stack alignItems="center">
-                                                        <StatusLight color={pieces[ind].color} />
+                                                        <ColorTag
+                                                            label=""
+                                                            color={pieces[ind].color}
+                                                        />
                                                         <BodyText size="small" bold>
                                                             {pieces[ind].title}
                                                         </BodyText>

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

@@ -10,7 +10,7 @@ export default {
 export const pieChart5AutoColor = () => (
     <PieChart
         title="Pie Chart"
-        height={250}
+        height={220}
         sections={[
             { title: 'lorem', value: 99 },
             { title: 'ipsum', value: 88 },
@@ -25,7 +25,7 @@ export const pieChart5AutoColor = () => (
 export const pieChartWithContent = () => (
     <PieChart
         title="Pie Chart"
-        height={300}
+        height={284}
         sections={[
             { title: 'New Customer', value: 61 },
             { title: 'Existing Customer', value: 90 },
@@ -36,8 +36,7 @@ export const pieChartWithContent = () => (
                 <Eyebrow size="small">Total Leads</Eyebrow>
             </Stack>
         )}
-        radiusRelative={45}
-        hideTitles
+        radiusRelative={40}
     />
 );
 

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

@@ -4,7 +4,7 @@ import { formatNumber } from 'accounting';
 export const radiusRelativeDefault = 50;
 const radiusInt = 20;
 const getRadiusExt = (radiusRelative: number) => radiusRelative - 5; // need to have some space to stroke selected piece
-const getRadiusMid = (radiusRelative: number) => (3 * radiusRelative) / 4;
+const getRadiusMid = (radiusRelative: number) => (2.75 * radiusRelative) / 4;
 
 const angleInitial = -0.5;
 const lowestOpacity = 0.1;

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

@@ -10,6 +10,9 @@ import {
 } from '@servicetitan/design-system';
 import * as Styles from './stat-card.module.less';
 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';
 
 const calculateDiff = (
     value: number,
@@ -64,7 +67,26 @@ export const StatDiff: FC<StatDiffProps> = ({
 }) => {
     const percents = format === 'percent';
     const [absDiff, diffPercent, isIncrease] = calculateDiff(value ?? 0, prev ?? 0, percents);
-    const diff = absDiff === 0 ? '' : isIncrease ? '▲ ' : '▼ ';
+    const diff =
+        absDiff === 0 ? (
+            ''
+        ) : (
+            <Icon
+                svg={isIncrease ? TrendingUpSVG : TrendingDownSVG}
+                color={
+                    neutral
+                        ? 'neutral-200'
+                        : inverted
+                          ? isIncrease
+                              ? 'red'
+                              : 'green'
+                          : isIncrease
+                            ? 'green'
+                            : 'red'
+                }
+                className="m-r-half m-t-half"
+            />
+        );
     let text = '';
 
     if (percents) {
@@ -84,22 +106,28 @@ export const StatDiff: FC<StatDiffProps> = ({
     }
 
     return (
-        <BodyText
-            className={classNames(
-                Styles.statDiff,
-                {
-                    'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),
-                    'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),
-                    'c-neutral-200': !!neutral,
-                },
-                className
-            )}
-            size={size ?? 'small'}
-            data-cy="stat-diff-value"
+        <Stack
+            className={classNames(Styles.statDiff, className)}
+            justifyContent="center"
+            alignItems="center"
         >
-            <span>{diff}</span>
-            {value === undefined ? '\u00A0' : text}
-        </BodyText>
+            <Stack.Item>
+                <span>{diff}</span>
+            </Stack.Item>
+            <Stack.Item>
+                <BodyText
+                    size={size ?? 'small'}
+                    data-cy="stat-diff-value"
+                    className={classNames({
+                        'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),
+                        'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),
+                        'c-neutral-200': !!neutral,
+                    })}
+                >
+                    {value === undefined ? '\u00A0' : text}
+                </BodyText>
+            </Stack.Item>
+        </Stack>
     );
 };