@servicetitan/marketing-ui 6.0.1 → 6.1.0

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, FC, Fragment } from 'react';
+import { useCallback, useMemo, useRef, useLayoutEffect, useState, FC, CSSProperties } from 'react';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 import { useDependencies } from '@servicetitan/react-ioc';
@@ -11,6 +11,9 @@ import * as Styles from './hover-popover.module.less';
 import { ColorTag } from '../../common';
 import { Text } from '@servicetitan/anvil2';
 
+const CHART_HEIGHT_PX = 400;
+const OFFSET_PX = 16;
+
 export const HoverPopover: FC = observer(() => {
     const [
         {
@@ -25,6 +28,7 @@ export const HoverPopover: FC = observer(() => {
         },
         svgStore,
     ] = useDependencies(LineChartStore, SvgStore);
+    const isChartLeftSide = hoveredIndex < periods.length / 2;
 
     const formatDateTitle = useMemo(() => periodDateTitleFormatter[resolution], [resolution]);
     const formatValue = useCallback(
@@ -34,15 +38,48 @@ export const HoverPopover: FC = observer(() => {
             title,
         [display]
     );
-    const popoverStyle = useMemo(() => {
-        const pos = svgStore.periodX(hoveredIndex);
 
-        if (hoveredIndex < periods.length / 2) {
-            return { left: `${svgStore.fpx(pos + 2)}%` };
+    const popRef = useRef<HTMLDivElement | null>(null);
+    const [popH, setPopH] = useState(0);
+
+    useLayoutEffect(() => {
+        if (!popRef.current) {
+            return;
+        }
+        const rect = popRef.current.getBoundingClientRect();
+        if (rect.height && Math.abs(rect.height - popH) > 0.5) {
+            setPopH(rect.height);
         }
+    }, [hoveredIndex, metrics, display, popH]);
+
+    const popoverStyle = useMemo<CSSProperties>(() => {
+        const posX = svgStore.periodX(hoveredIndex);
+
+        const yHeights = metrics
+            .filter(m => m.values[hoveredIndex] !== undefined)
+            .map(m => svgStore.periodY(m, hoveredIndex));
+
+        const barHeight = yHeights.length
+            ? stackedTotals
+                ? yHeights.reduce((a, b) => a + b, 0)
+                : Math.max(...yHeights)
+            : 0;
+        const barHeightPercentRaw = svgStore.fpy(Math.max(0, Math.min(100, barHeight)));
+        const barHeightPercent = Math.max(0, Math.min(100, Number(barHeightPercentRaw) || 0));
 
-        return { right: `${svgStore.fpx(102 - pos)}%` };
-    }, [svgStore, hoveredIndex, periods.length]);
+        const barTopPositionPx = (barHeightPercent / 100) * CHART_HEIGHT_PX;
+        const availableSpaceBelow = Math.max(0, CHART_HEIGHT_PX - barTopPositionPx - popH);
+        const popoverOffsetPx = Math.min(OFFSET_PX, availableSpaceBelow);
+
+        return {
+            top: `${barHeightPercent}%`,
+            transform: `translateY(${popoverOffsetPx}px)`,
+            position: 'absolute',
+            ...(isChartLeftSide
+                ? { left: `${svgStore.fpx(posX + 2)}%` }
+                : { right: `${svgStore.fpx(102 - posX)}%` }),
+        };
+    }, [svgStore, hoveredIndex, isChartLeftSide, metrics, stackedTotals, popH]);
 
     if (hoveredIndex < 0 || hoveredIndex >= periods.length) {
         return null;
@@ -52,47 +89,48 @@ export const HoverPopover: FC = observer(() => {
     const partialWeek = !!period.partial;
 
     return (
-        <Fragment>
-            <div
-                className={Styles.line}
-                style={{ left: svgStore.fpx(svgStore.periodX(hoveredIndex)) + '%' }}
-            />
+        <div
+            ref={popRef}
+            className={classNames(Styles.popover, 'border border-radius-1 p-1')}
+            style={popoverStyle}
+        >
             <div
-                className={classNames(Styles.popover, 'bg-white border border-radius-1 p-1')}
-                style={popoverStyle}
-            >
-                <Text size="small" variant="headline" el="h6">
-                    {stackedTotals
-                        ? `${formattedTotalAt(hoveredIndex)} ${totalLabel} | ${formatDateTitle(period)}`
-                        : formatDateTitle(period)}
-                </Text>
-                {partialWeek && (
-                    <BodyText size="xsmall" subdued>
-                        Partial week
-                    </BodyText>
+                className={classNames(
+                    Styles.arrow,
+                    isChartLeftSide ? Styles.arrowLeft : Styles.arrowRight
                 )}
-                {metrics.map(
-                    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}
-                                pattern={m.opts?.pattern}
-                                outlineColor={m.opts?.outlineColor}
-                                strokeColor={m.opts?.strokeColor}
-                                colorTagClassName={
-                                    m.opts?.pattern === 'outline'
-                                        ? Styles.colorTagOutlined
-                                        : Styles.colorTag
-                                }
-                            />
-                        )
-                )}
-            </div>
-        </Fragment>
+            />
+            <Text size="small" variant="headline" el="h6">
+                {stackedTotals
+                    ? `${formattedTotalAt(hoveredIndex)} ${totalLabel} | ${formatDateTitle(period)}`
+                    : formatDateTitle(period)}
+            </Text>
+            {partialWeek && (
+                <BodyText size="xsmall" subdued>
+                    Partial week
+                </BodyText>
+            )}
+            {metrics.map(
+                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}
+                            pattern={m.opts?.pattern}
+                            outlineColor={m.opts?.outlineColor}
+                            strokeColor={m.opts?.strokeColor}
+                            colorTagClassName={
+                                m.opts?.pattern === 'outline'
+                                    ? Styles.colorTagOutlined
+                                    : Styles.colorTag
+                            }
+                        />
+                    )
+            )}
+        </div>
     );
 });

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

@@ -11,7 +11,7 @@ interface MetricsTitleProps {
 }
 
 export const MetricsTitle: FC<MetricsTitleProps> = ({ metrics }) => (
-    <Stack alignItems="center">
+    <Stack alignItems="flex-start" className="m-l-half">
         {metrics.map(m => (
             <ColorTag
                 key={m.id}

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

@@ -99,7 +99,7 @@ export const SvgBars: FC<SvgBarsProps> = observer(
                     const TOP_RADIUS = 1;
                     const xLeft = +fpx(x - barWidth / 2);
                     const yTop = +fpy(stackedBarHeight) + (values.length - 2);
-                    const height = +fpx(value.val);
+                    const height = j === values.length - 1 ? +fpx(value.val - 2) : +fpx(value.val);
                     const width = +fpx(barWidth);
 
                     const r = j === 0 ? TOP_RADIUS : 0; // radius must be numeric

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

@@ -4,6 +4,10 @@
     max-width: 120px;
 }
 
+.title-wrapper-color-tags {
+    max-width: 380px;
+}
+
 .percent-text-wrapper {
     width: 32px;
     height: 32px;
@@ -16,3 +20,7 @@
     margin: @spacing-0 auto;
     box-shadow: 0 0 0 1px @color-neutral-0 inset;
 }
+
+.popover {
+    background-color: @color-neutral-30;
+}

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

@@ -1,4 +1,6 @@
 export const __esModule: true;
 export const percentTextWrapper: string;
+export const popover: string;
 export const titleWrapper: string;
+export const titleWrapperColorTags: string;
 

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

@@ -28,7 +28,7 @@ const PieTitles: FC<{ title: string; pieces: PiePiece[] }> = ({ title, pieces })
             </div>
         </div>
     ) : (
-        <Flex direction="row" gap={8}>
+        <Flex direction="row" gap={8} className={Styles.titleWrapperColorTags}>
             {pieces.map(piece => (
                 <ColorTag key={piece.title} label={piece.title} color={piece.color} />
             ))}

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

@@ -5,6 +5,7 @@ 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';
+import * as Styles from './pie-chart.module.less';
 
 const chartPadding = 8;
 const px = (value?: number) => `${value ?? 0}px`;
@@ -250,6 +251,7 @@ export const Pie: FC<{
                                         direction={popoverDirection}
                                         padding="s"
                                         width="auto"
+                                        className={Styles.popover}
                                     >
                                         {selectedIndex === ind && (
                                             <Stack

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

@@ -84,7 +84,6 @@ export const StatDiff: FC<StatDiffProps> = ({
                             ? 'green'
                             : 'red'
                 }
-                className="m-r-half m-t-half"
             />
         );
     let text = '';
@@ -111,7 +110,7 @@ export const StatDiff: FC<StatDiffProps> = ({
             justifyContent="center"
             alignItems="center"
         >
-            <Stack.Item>
+            <Stack.Item className="m-r-half m-t-half">
                 <span>{diff}</span>
             </Stack.Item>
             <Stack.Item>