@servicetitan/marketing-ui 1.18.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/marketing-ui",
-    "version": "1.18.0",
+    "version": "3.0.0",
     "description": "Marketing UI component and utils",
     "repository": {
         "type": "git",
@@ -19,9 +19,9 @@
         "react-image-crop": "8.6.5"
     },
     "peerDependencies": {
-        "@servicetitan/design-system": "~10.1.1",
+        "@servicetitan/design-system": ">=12.4.1",
         "@servicetitan/react-ioc": "~14.1.1",
-        "@servicetitan/tokens": "~10.1.1",
+        "@servicetitan/tokens": ">=12.1.11",
         "accounting": "~0.4.1",
         "mobx": "~6.3.2",
         "mobx-react": "~7.2.0",
@@ -29,9 +29,9 @@
         "react": "~17.0.2"
     },
     "devDependencies": {
-        "@servicetitan/design-system": "~10.1.1",
+        "@servicetitan/design-system": ">=12.4.1",
         "@servicetitan/react-ioc": "~14.1.1",
-        "@servicetitan/tokens": "~10.1.1",
+        "@servicetitan/tokens": ">=12.1.11",
         "@testing-library/react": "^12.0.0",
         "@types/accounting": "~0.4.2",
         "@types/history": "~4.7.7",
@@ -51,5 +51,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "1a8fcbd2b9718d5fc5fb87dbc1aa7974562cf4d1"
+    "gitHead": "ae922725e2ed2093afac0864d8f7d76b7e1f2430"
 }

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

@@ -1,4 +1,4 @@
-@import (reference) '~@servicetitan/tokens/dist/tokens.less';
+@import (reference) '~@servicetitan/tokens/core/tokens.less';
 
 .flex1 {
     flex: 1;

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

@@ -11,7 +11,7 @@ import {
     StatusLight,
     Tooltip,
 } from '@servicetitan/design-system';
-import tokens from '@servicetitan/tokens';
+import { tokens } from '@servicetitan/tokens/core';
 import { formatValue } from '../../../../utils/formatters';
 import { StatDiff } from '../../../stat/stat-card';
 import { FunnelChartProps } from '../utils/interface';

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

@@ -1,5 +1,5 @@
 import { useMemo, FC } from 'react';
-import tokens from '@servicetitan/tokens';
+import { tokens } from '@servicetitan/tokens/core';
 import { defaultBottomSideLength, defaultTopSideLength } from '../utils/const';
 
 const st = (v: number) => v.toFixed(2);

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

@@ -1,4 +1,4 @@
-@import (reference) '~@servicetitan/tokens/dist/tokens.less';
+@import (reference) '~@servicetitan/tokens/core/tokens.less';
 
 .chart-wrapper {
     height: 440px;

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

@@ -92,8 +92,12 @@ export const Body: FC<{ classNameTitle?: string }> = provide({ singletons: [SvgS
                         right={right?.width ?? 0}
                         labelsMerged={periods.length !== labels.length}
                         hasBars={
-                            !!metrics.filter(m => m.type === 'bar' || m.type === 'stacked-bar')
-                                .length
+                            !!metrics.filter(
+                                m =>
+                                    m.type === 'bar' ||
+                                    m.type === 'stacked-bar' ||
+                                    m.type === 'grouped-bar'
+                            ).length
                         }
                     />
                 )}

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

@@ -1,4 +1,4 @@
-@import (reference) '~@servicetitan/tokens/dist/tokens.less';
+@import (reference) '~@servicetitan/tokens/core/tokens.less';
 
 .line {
     position: absolute;

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

@@ -1,4 +1,4 @@
-@import (reference) '~@servicetitan/tokens/dist/tokens.less';
+@import (reference) '~@servicetitan/tokens/core/tokens.less';
 
 .sidebar {
     height: 100%;

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

@@ -1,4 +1,4 @@
-@import (reference) '~@servicetitan/tokens/dist/tokens.less';
+@import (reference) '~@servicetitan/tokens/core/tokens.less';
 
 .color-tag {
     width: @spacing-3;

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

@@ -8,57 +8,76 @@ import { SvgStore } from '../stores/svg.store';
 interface SvgBarsProps {
     metrics: ChartMetric[];
     isStackedBarChart?: boolean;
+    isGroupedBarChart?: boolean;
 }
 
-export const SvgBars: FC<SvgBarsProps> = observer(({ metrics, isStackedBarChart }) => {
-    const [store] = useDependencies(SvgStore);
-    const { fpx, fpy, barWidth, length } = store;
-    const barWidthHalf = barWidth / 2;
-    const paths = [];
+export const SvgBars: FC<SvgBarsProps> = observer(
+    ({ metrics, isStackedBarChart, isGroupedBarChart }) => {
+        const [store] = useDependencies(SvgStore);
+        const { fpx, fpy, barWidth, length } = store;
+        const barWidthHalf = barWidth / 2;
+        const paths = [];
 
-    for (let i = 0; i < length; i++) {
-        const x = store.periodX(i);
-        const values = metrics.map(m => ({
-            id: m.id,
-            color: m.valuesOpts?.[i]?.color ?? m.color,
-            val: store.periodY(m, i),
-        }));
+        for (let i = 0; i < length; i++) {
+            const x = store.periodX(i);
+            const values = metrics.map(m => ({
+                id: m.id,
+                color: m.valuesOpts?.[i]?.color ?? m.color,
+                val: store.periodY(m, i),
+            }));
 
-        if (isStackedBarChart) {
-            let stackedBarHeight = values.reduce((sum, curr) => sum + curr.val, 0);
+            if (isStackedBarChart) {
+                let stackedBarHeight = values.reduce((sum, curr) => sum + curr.val, 0);
 
-            for (const value of values) {
-                paths.push(
-                    <rect
-                        key={keyVal(value.id, i)}
-                        x={fpx(x - barWidthHalf)}
-                        y={fpy(stackedBarHeight)}
-                        width={fpx(barWidth)}
-                        height={fpx(value.val)}
-                        fill={value.color}
-                    />
-                );
-                stackedBarHeight -= value.val;
-            }
-        } else {
-            values.sort((a, b) => b.val - a.val);
-            for (const value of values) {
-                paths.push(
-                    <rect
-                        key={keyVal(value.id, i)}
-                        x={fpx(x - barWidthHalf)}
-                        y={fpy(value.val)}
-                        width={fpx(barWidth)}
-                        height={fpx(value.val)}
-                        fill={value.color}
-                    />
-                );
+                for (const value of values) {
+                    paths.push(
+                        <rect
+                            key={keyVal(value.id, i)}
+                            x={fpx(x - barWidthHalf)}
+                            y={fpy(stackedBarHeight)}
+                            width={fpx(barWidth)}
+                            height={fpx(value.val)}
+                            fill={value.color}
+                        />
+                    );
+                    stackedBarHeight -= value.val;
+                }
+            } else if (isGroupedBarChart) {
+                for (let j = 0; j < values.length; j++) {
+                    const groupedBarX = (j * barWidth) / values.length;
+                    const value = values[j];
+
+                    paths.push(
+                        <rect
+                            key={keyVal(value.id, i)}
+                            x={fpx(x + groupedBarX - barWidthHalf)}
+                            y={fpy(value.val)}
+                            width={fpx(barWidth / values.length)}
+                            height={fpx(value.val)}
+                            fill={value.color}
+                        />
+                    );
+                }
+            } else {
+                values.sort((a, b) => b.val - a.val);
+                for (const value of values) {
+                    paths.push(
+                        <rect
+                            key={keyVal(value.id, i)}
+                            x={fpx(x - barWidthHalf)}
+                            y={fpy(value.val)}
+                            width={fpx(barWidth)}
+                            height={fpx(value.val)}
+                            fill={value.color}
+                        />
+                    );
+                }
             }
         }
-    }
 
-    return <g>{paths}</g>;
-});
+        return <g>{paths}</g>;
+    }
+);
 
 interface SvgBarsHoverProps {
     onHover(ind: number): void;

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

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { observer } from 'mobx-react';
-import tokens from '@servicetitan/tokens';
+import { tokens } from '@servicetitan/tokens/core';
 import { useDependencies } from '@servicetitan/react-ioc';
 
 import { SvgStore } from '../stores/svg.store';
@@ -43,6 +43,7 @@ export const SvgBody: FC<SvgBodyProps> = observer(({ horizontalGrid, metrics })
     const [{ key }] = useDependencies(SvgStore);
     const barMetrics = metrics.filter(m => m.type === 'bar');
     const stackedBarMetrics = metrics.filter(m => m.type === 'stacked-bar');
+    const groupedBarMetrics = metrics.filter(m => m.type === 'grouped-bar');
     const lineMetrics = metrics.filter(m => m.type === 'line');
 
     return (
@@ -61,6 +62,13 @@ export const SvgBody: FC<SvgBodyProps> = observer(({ horizontalGrid, metrics })
                     isStackedBarChart
                 />
             )}
+            {!!groupedBarMetrics.length && (
+                <SvgBars
+                    key={keyVal('grouped-bars', key)}
+                    metrics={groupedBarMetrics}
+                    isGroupedBarChart
+                />
+            )}
             {!!lineMetrics.length && <SvgLines key={keyVal('lines', key)} metrics={lineMetrics} />}
         </svg>
     );

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

@@ -1,4 +1,4 @@
-@import (reference) '~@servicetitan/tokens/dist/tokens.less';
+@import (reference) '~@servicetitan/tokens/core/tokens.less';
 
 .svg-hover {
     position: absolute;

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

@@ -154,6 +154,42 @@ export const stackedBarChartDailyBottomTitles = () => {
     );
 };
 
+export const groupedBarChartDailyBottomTitles = () => {
+    return (
+        <LineChart
+            resolution="day"
+            metrics={[
+                {
+                    id: 2,
+                    title: 'Lead Calls',
+                    type: 'grouped-bar',
+                    color: '#D0D8DD',
+                },
+                {
+                    id: 3,
+                    title: 'Online Bookings',
+                    type: 'grouped-bar',
+                    color: '#08BFDF',
+                },
+                {
+                    id: 4,
+                    title: 'Manual Calls',
+                    type: 'grouped-bar',
+                    color: '#1FBC70',
+                },
+            ]}
+            metricValues={stackedBarChartValues.values}
+            periods={dailyValues.periods}
+            titleY="Left title"
+            display={{
+                yLeft: false,
+                yLeftFormat: 'number',
+                metricsTitlePosition: 'bottom',
+            }}
+        />
+    );
+};
+
 export const lineChartWeekly = () => (
     <LineChart
         resolution="week"

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

@@ -21,7 +21,7 @@ const getSideMetricsSettings = (
 ): SideMetricsSettings | undefined => {
     let maxRange = range ?? 0;
     const lineBarMetricIDs = metrics
-        .filter(m => m.type === 'line' || m.type === 'bar')
+        .filter(m => m.type === 'line' || m.type === 'bar' || m.type === 'grouped-bar')
         .map(m => m.id);
     const stackedBarMetricIDs = metrics.filter(m => m.type === 'stacked-bar').map(m => m.id);
 

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

@@ -29,7 +29,9 @@ export class SvgStore {
         this.length = length || 1;
         this.key = Date.now();
 
-        const hasBars = !!metrics.filter(m => m.type === 'bar' || m.type === 'stacked-bar').length;
+        const hasBars = !!metrics.filter(
+            m => m.type === 'bar' || m.type === 'stacked-bar' || m.type === 'grouped-bar'
+        ).length;
 
         if (hasBars) {
             this.fullBarWidth = 100 / this.length;

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

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 
 export type LineChartResolution = 'hour' | 'day' | 'week' | 'month';
-export type LineChartMetricType = 'line' | 'bar' | 'stacked-bar';
+export type LineChartMetricType = 'line' | 'bar' | 'stacked-bar' | 'grouped-bar';
 export type LineChartMetricsTitlePosition = 'top' | 'top-right' | 'bottom';
 
 export interface LineChartMetricOpts {

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

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState, FC, Fragment } from 'react';
-import tokens from '@servicetitan/tokens';
+import { tokens } from '@servicetitan/tokens/core';
 import { BodyText, Popover, Stack, StatusLight } from '@servicetitan/design-system';
 
 import { useClientRect } from '../../../../utils/use-client-rect';

package/src/components/stat/stat-card.module.less

@@ -1,4 +1,4 @@
-@import (reference) '~@servicetitan/tokens/dist/tokens.less';
+@import (reference) '~@servicetitan/tokens/core/tokens.less';
 
 .stat-diff {
     white-space: nowrap;

package/src/components/ui/action-button/action-button.module.less

@@ -1,4 +1,4 @@
-@import (reference) '@servicetitan/tokens/dist/tokens.less';
+@import (reference) '@servicetitan/tokens/core/tokens.less';
 
 .action-button {
     color: @color-neutral-80;

package/src/components/ui/date-range-picker/date-range-picker.module.less

@@ -1,4 +1,4 @@
-@import (reference) '~@servicetitan/tokens/dist/tokens';
+@import (reference) '~@servicetitan/tokens/core/tokens';
 
 /*
  *  Custom value text is not supported for DateRangePicker now (will be implemented in DS-699)

package/src/components/ui/label-with-hint/label-with-hint.tsx

@@ -1,5 +1,5 @@
 import { BodyText, Icon, Stack, Tooltip } from '@servicetitan/design-system';
-import tokens from '@servicetitan/tokens';
+import { tokens } from '@servicetitan/tokens/core';
 import { FC } from 'react';
 
 export interface LabelWithHintProps {

package/src/components/ui/line-text/line-text.module.less

@@ -1,4 +1,4 @@
-@import (reference) '~@servicetitan/tokens/dist/tokens';
+@import (reference) '~@servicetitan/tokens/core/tokens';
 
 .more-details-wrapper {
     position: absolute;

package/src/components/ui/title-popover/title-popover.module.less

@@ -1,4 +1,4 @@
-@import (reference) '@servicetitan/tokens/dist/tokens.less';
+@import (reference) '@servicetitan/tokens/core/tokens.less';
 
 .popover {
     padding: @spacing-0;