@servicetitan/marketing-ui 1.3.0 → 1.6.1

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

@@ -42,6 +42,7 @@ interface SvgBodyProps {
 export const SvgBody: React.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 lineMetrics = metrics.filter(m => m.type === 'line');
 
     return (
@@ -53,6 +54,13 @@ export const SvgBody: React.FC<SvgBodyProps> = observer(({ horizontalGrid, metri
         >
             {horizontalGrid && <SvgGrid />}
             {!!barMetrics.length && <SvgBars key={keyVal('bars', key)} metrics={barMetrics} />}
+            {!!stackedBarMetrics.length && (
+                <SvgBars
+                    key={keyVal('stacked-bars', key)}
+                    metrics={stackedBarMetrics}
+                    isStackedBarChart
+                />
+            )}
             {!!lineMetrics.length && <SvgLines key={keyVal('lines', key)} metrics={lineMetrics} />}
         </svg>
     );

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

@@ -2,7 +2,6 @@
 
 .svg-hover {
     position: absolute;
-    z-index: @z-index-global-nav;
     inset: 0;
     height: 100%;
     width: 100%;

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

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { FC, useState } from 'react';
+import { Form } from '@servicetitan/design-system';
 import { LineChart, LineChartPeriod } from './index';
 
 export default {
@@ -33,6 +34,36 @@ const dailyValues = (() => {
     };
 })();
 
+const stackedBarChartValues = (() => {
+    const periods: LineChartPeriod[] = [];
+    const days = new Date(2021, 7, 0).getDate();
+
+    for (let i = 1; i <= days; i++) {
+        periods.push({
+            from: new Date(2021, 7, i),
+            to: new Date(2021, 7, i + 1),
+        });
+    }
+
+    return {
+        periods,
+        values: [
+            {
+                metricId: 2,
+                values: periods.map((_, index) => 15 + (index % 5) * 15),
+            },
+            {
+                metricId: 3,
+                values: periods.map((_, index) => 10 + (index % 5) * 10),
+            },
+            {
+                metricId: 4,
+                values: periods.map((_, index) => 5 + (index % 5) * 5),
+            },
+        ],
+    };
+})();
+
 const weeklyValues = (() => {
     const periods: LineChartPeriod[] = [];
 
@@ -73,10 +104,12 @@ export const lineChartDailyBottomTitles = () => (
                 title: 'Budget',
                 type: 'line',
                 opts: { dashed: true },
+                isRight: true,
             },
         ]}
         metricValues={dailyValues.values}
         periods={dailyValues.periods}
+        titleY="Left title"
         display={{
             yLeft: false,
             yLeftFormat: 'money',
@@ -85,6 +118,42 @@ export const lineChartDailyBottomTitles = () => (
     />
 );
 
+export const stackedBarChartDailyBottomTitles = () => {
+    return (
+        <LineChart
+            resolution="day"
+            metrics={[
+                {
+                    id: 2,
+                    title: 'Lead Calls',
+                    type: 'stacked-bar',
+                    color: '#D0D8DD',
+                },
+                {
+                    id: 3,
+                    title: 'Online Bookings',
+                    type: 'stacked-bar',
+                    color: '#08BFDF',
+                },
+                {
+                    id: 4,
+                    title: 'Manual Calls',
+                    type: 'stacked-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"
@@ -113,3 +182,92 @@ export const lineChartWeekly = () => (
         }}
     />
 );
+
+const CountrySelect = () => {
+    const [value, setValue] = useState<any>();
+    const options = [
+        { key: 1, group: 'Arcona', value: 1, text: 'Australia' },
+        { key: 2, group: 'Arcona', value: 2, text: 'America' },
+        { key: 3, group: 'Arcona', value: 3, text: 'New Zealand' },
+        { key: 4, group: 'Ewok', value: 4, text: 'Spain' },
+        { key: 5, group: 'Gungan', value: 5, text: 'Turkey' },
+        { key: 6, group: 'Gungan', value: 6, text: 'India' },
+    ];
+
+    return (
+        <Form.Select
+            width="4"
+            open
+            grouped
+            label="Clearable select with groups"
+            placeholder="Choose Country"
+            options={options}
+            onChange={(event, value) => setValue(value.value)}
+            value={value}
+        />
+    );
+};
+
+export const lineChartMergedDays: FC = () => (
+    <div style={{ width: '800px' }}>
+        <LineChart
+            resolution="week"
+            metrics={[
+                {
+                    id: 1,
+                    color: '#60dfa6',
+                    title: 'Revenue',
+                    type: 'bar',
+                },
+                {
+                    id: 2,
+                    color: '#737475',
+                    title: 'Numbers',
+                    type: 'line',
+                    isRight: true,
+                },
+            ]}
+            metricValues={weeklyValues.values}
+            periods={weeklyValues.periods}
+            titleY="Left title"
+            display={{
+                yLeft: true,
+                yRight: true,
+                yLeftFormat: 'moneyShort',
+                metricsTitlePosition: 'top',
+            }}
+        />
+    </div>
+);
+
+export const lineChartIndexes: FC = () => (
+    <div>
+        <CountrySelect />
+        <LineChart
+            resolution="week"
+            metrics={[
+                {
+                    id: 1,
+                    color: '#60dfa6',
+                    title: 'Revenue',
+                    type: 'bar',
+                },
+                {
+                    id: 2,
+                    color: '#737475',
+                    title: 'Numbers',
+                    type: 'line',
+                    isRight: true,
+                },
+            ]}
+            metricValues={weeklyValues.values}
+            periods={weeklyValues.periods}
+            display={{
+                yLeft: true,
+                yRight: true,
+                yLeftFormat: 'moneyShort',
+                metricsTitlePosition: 'top',
+            }}
+        />
+    </div>
+);

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

@@ -13,18 +13,22 @@ import { ChartMetric, SideMetricsSettings } from '../utils/internal-interfaces';
 import { getFormatter } from '../utils/formatters';
 
 const getSideMetricsSettings = (
-    ids: number[],
+    metrics: ChartMetric[],
     values: LineChartMetricValues[],
     range?: number,
     title?: string,
     format?: LineChartDisplayValueFormat
 ): SideMetricsSettings | undefined => {
     let maxRange = range ?? 0;
+    const lineBarMetricIDs = metrics
+        .filter(m => m.type === 'line' || m.type === 'bar')
+        .map(m => m.id);
+    const stackedBarMetricIDs = metrics.filter(m => m.type === 'stacked-bar').map(m => m.id);
 
     if (!maxRange) {
         maxRange = values.reduce(
             (sum, metricValues) =>
-                ids.includes(metricValues.metricId)
+                lineBarMetricIDs.includes(metricValues.metricId)
                     ? Math.max(
                           sum,
                           metricValues.values.reduce((acc, v) => Math.max(acc, v), 0)
@@ -34,8 +38,22 @@ const getSideMetricsSettings = (
         );
     }
 
+    if (stackedBarMetricIDs.length) {
+        const stackChartMetricValues = values
+            .filter(metricValues => stackedBarMetricIDs.includes(metricValues.metricId))
+            .map(metric => metric.values);
+
+        const summedStackedMetrics = stackChartMetricValues[0]?.map((value, i) =>
+            stackChartMetricValues.reduce((sum, metricValues) => sum + metricValues[i], 0)
+        );
+
+        if (summedStackedMetrics?.length) {
+            maxRange = Math.max(...summedStackedMetrics, maxRange);
+        }
+    }
+
     if (!maxRange) {
-        if (!ids.length) {
+        if (!lineBarMetricIDs.length && !stackedBarMetricIDs.length) {
             return undefined;
         }
 
@@ -56,7 +74,9 @@ const getSideMetricsSettings = (
         sums.push(formatter(maxRange - i * step));
     }
 
-    return { maxRange, maxValue: 1.1 * maxRange, title: title ?? '', values: sums };
+    const width = title ? 64 : 48;
+
+    return { maxRange, maxValue: 1.1 * maxRange, title: title ?? '', values: sums, width };
 };
 
 @injectable()
@@ -96,14 +116,14 @@ export class LineChartStore {
         });
 
         this.left = getSideMetricsSettings(
-            this.metrics.filter(m => !m.isRight).map(m => m.id),
+            this.metrics.filter(m => !m.isRight),
             props.metricValues,
             props.maxRange,
             props.titleY,
             this.display.yLeftFormat
         );
         this.right = getSideMetricsSettings(
-            this.metrics.filter(m => m.isRight).map(m => m.id),
+            this.metrics.filter(m => m.isRight),
             props.metricValues,
             props.maxRangeRight,
             props.titleYRight,

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

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

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

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

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

@@ -5,6 +5,7 @@ export interface SideMetricsSettings {
     maxValue: number;
     title: string;
     values: string[];
+    width: number;
 }
 
 export interface ChartMetric {

package/src/utils/__tests__/formatters.test.ts

@@ -35,7 +35,7 @@ describe('formatPercent', () => {
         [0, '0%'],
         [0.1, '10%'],
         [0.0011, '0.1%'],
-        [0.9999, '99%'],
+        [0.9999, '100%'],
     ];
 
     tc.map(([value, result]) =>

package/src/utils/formatters.ts

@@ -7,7 +7,7 @@ const formatPercentValue = (value: number): string => {
         return '0';
     }
 
-    const valueMain = value ? Math.abs(Math.floor(value)) : 0;
+    const valueMain = value ? Math.abs(Math.round(value)) : 0;
 
     if (valueMain > 0) {
         return accounting.formatNumber(valueMain, 0);