@servicetitan/marketing-ui 5.11.1 → 6.0.0

package/dist/components/charts/line-chart/components/svg-bars.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
 import { useDependencies } from '@servicetitan/react-ioc';
 import { keyVal } from '../utils/key';
@@ -8,27 +8,106 @@ export const SvgBars = observer(({ metrics, isStackedBarChart, isGroupedBarChart
     const { fpx, fpy, barWidth, length } = store;
     const barWidthHalf = barWidth / 2;
     const paths = [];
+    const patternDefs = metrics.filter((m)=>{
+        var _m_opts;
+        return ((_m_opts = m.opts) === null || _m_opts === void 0 ? void 0 : _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 /*#__PURE__*/ _jsxs("pattern", {
+            id: `stripe-pattern-${m.id}`,
+            patternUnits: "userSpaceOnUse",
+            width: tileW,
+            height: tileH,
+            patternTransform: `rotate(${rotation})`,
+            children: [
+                /*#__PURE__*/ _jsx("rect", {
+                    width: tileW,
+                    height: tileH,
+                    fill: m.color,
+                    opacity: tintOpacity
+                }),
+                /*#__PURE__*/ _jsx("rect", {
+                    width: stripeWidth,
+                    height: tileH,
+                    fill: m.color
+                })
+            ]
+        }, `pattern-${m.id}`);
+    });
     for(let i = 0; i < length; i++){
         const x = store.periodX(i);
         const values = metrics.map((m)=>{
-            var _m_valuesOpts_i, _m_valuesOpts;
+            var _m_valuesOpts_i, _m_valuesOpts, _m_opts, _m_opts1, _m_opts2;
             var _m_valuesOpts_i_color;
             return {
                 id: m.id,
                 color: (_m_valuesOpts_i_color = (_m_valuesOpts = m.valuesOpts) === null || _m_valuesOpts === void 0 ? void 0 : (_m_valuesOpts_i = _m_valuesOpts[i]) === null || _m_valuesOpts_i === void 0 ? void 0 : _m_valuesOpts_i.color) !== null && _m_valuesOpts_i_color !== void 0 ? _m_valuesOpts_i_color : m.color,
                 opacity: m.opacity,
-                val: store.periodY(m, i)
+                val: store.periodY(m, i),
+                pattern: (_m_opts = m.opts) === null || _m_opts === void 0 ? void 0 : _m_opts.pattern,
+                strokeColor: (_m_opts1 = m.opts) === null || _m_opts1 === void 0 ? void 0 : _m_opts1.strokeColor,
+                outlineColor: (_m_opts2 = m.opts) === null || _m_opts2 === void 0 ? void 0 : _m_opts2.outlineColor,
+                value: m.values[i]
             };
         });
         if (isStackedBarChart) {
-            let stackedBarHeight = values.reduce((sum, curr)=>sum + curr.val, 0);
-            for (const value of values){
-                paths.push(/*#__PURE__*/ _jsx("rect", {
-                    x: fpx(x - barWidthHalf),
-                    y: fpy(stackedBarHeight),
-                    width: fpx(barWidth),
-                    height: fpx(value.val),
-                    fill: value.color
+            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;
+                paths.push(/*#__PURE__*/ _jsx("g", {
+                    transform: `translate(${x},${yTop}) scale(${scaleX},${scaleY})`,
+                    pointerEvents: "none",
+                    children: /*#__PURE__*/ _jsx("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",
+                        children: Math.round(totalValue)
+                    })
+                }, `total-${i}`));
+            }
+            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}`,
+                    `L ${xLeft} ${yTop + r}`,
+                    `Q ${xLeft} ${yTop} ${xLeft + r / 2} ${yTop}`,
+                    `L ${xLeft + width - r / 2} ${yTop}`,
+                    `Q ${xLeft + width} ${yTop} ${xLeft + width} ${yTop + r}`,
+                    `L ${xLeft + width} ${yTop + height}`,
+                    'Z'
+                ].join(' ');
+                var _value_strokeColor;
+                paths.push(/*#__PURE__*/ _jsx("path", {
+                    d: d,
+                    fill: value.pattern === 'striped' ? `url(#stripe-pattern-${value.id})` : value.color,
+                    stroke: value.pattern === 'outline' ? value.outlineColor : (_value_strokeColor = value.strokeColor) !== null && _value_strokeColor !== void 0 ? _value_strokeColor : value.color,
+                    strokeWidth: 1,
+                    vectorEffect: "non-scaling-stroke",
+                    strokeLinejoin: "round"
                 }, keyVal(value.id, i)));
                 stackedBarHeight -= value.val;
             }
@@ -58,8 +137,13 @@ export const SvgBars = observer(({ metrics, isStackedBarChart, isGroupedBarChart
             }
         }
     }
-    return /*#__PURE__*/ _jsx("g", {
-        children: paths
+    return /*#__PURE__*/ _jsxs("g", {
+        children: [
+            patternDefs.length > 0 && /*#__PURE__*/ _jsx("defs", {
+                children: patternDefs
+            }),
+            paths
+        ]
     });
 });
 export const SvgBarsHover = observer(({ onHover, onLeave })=>{

package/dist/components/charts/line-chart/components/svg-bars.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/charts/line-chart/components/svg-bars.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { observer } from 'mobx-react';\nimport { useDependencies } from '@servicetitan/react-ioc';\nimport { ChartMetric } from '../utils/internal-interfaces';\nimport { keyVal } from '../utils/key';\nimport { SvgStore } from '../stores/svg.store';\n\ninterface SvgBarsProps {\n    metrics: ChartMetric[];\n    isStackedBarChart?: boolean;\n    isGroupedBarChart?: boolean;\n}\n\nexport const SvgBars: FC<SvgBarsProps> = observer(\n    ({ metrics, isStackedBarChart, isGroupedBarChart }) => {\n        const [store] = useDependencies(SvgStore);\n        const { fpx, fpy, barWidth, length } = store;\n        const barWidthHalf = barWidth / 2;\n        const paths = [];\n\n        for (let i = 0; i < length; i++) {\n            const x = store.periodX(i);\n            const values = metrics.map(m => ({\n                id: m.id,\n                color: m.valuesOpts?.[i]?.color ?? m.color,\n                opacity: m.opacity,\n                val: store.periodY(m, i),\n            }));\n\n            if (isStackedBarChart) {\n                let stackedBarHeight = values.reduce((sum, curr) => sum + curr.val, 0);\n\n                for (const value of values) {\n                    paths.push(\n                        <rect\n                            key={keyVal(value.id, i)}\n                            x={fpx(x - barWidthHalf)}\n                            y={fpy(stackedBarHeight)}\n                            width={fpx(barWidth)}\n                            height={fpx(value.val)}\n                            fill={value.color}\n                        />\n                    );\n                    stackedBarHeight -= value.val;\n                }\n            } else if (isGroupedBarChart) {\n                for (let j = 0; j < values.length; j++) {\n                    const groupedBarX = (j * barWidth) / values.length;\n                    const value = values[j];\n\n                    paths.push(\n                        <rect\n                            key={keyVal(value.id, i)}\n                            x={x + groupedBarX - barWidthHalf}\n                            y={fpy(value.val)}\n                            width={barWidth / values.length - 0.1}\n                            height={fpx(value.val)}\n                            fill={value.color}\n                            opacity={value.opacity}\n                        />\n                    );\n                }\n            } else {\n                values.sort((a, b) => b.val - a.val);\n                for (const value of values) {\n                    paths.push(\n                        <rect\n                            key={keyVal(value.id, i)}\n                            x={fpx(x - barWidthHalf)}\n                            y={fpy(value.val)}\n                            width={fpx(barWidth)}\n                            height={fpx(value.val)}\n                            fill={value.color}\n                        />\n                    );\n                }\n            }\n        }\n\n        return <g>{paths}</g>;\n    }\n);\n\ninterface SvgBarsHoverProps {\n    onHover(ind: number): void;\n    onLeave(ind: number): void;\n}\n\nexport const SvgBarsHover: FC<SvgBarsHoverProps> = observer(({ onHover, onLeave }) => {\n    const [store] = useDependencies(SvgStore);\n    const { fpx, fpy, barWidth, length } = store;\n    const barWidthHalf = barWidth / 2;\n    const paths = [];\n\n    for (let i = 0; i < length; i++) {\n        const x = store.periodX(i);\n\n        paths.push(\n            <rect\n                key={keyVal('_', i)}\n                onMouseEnter={() => onHover(i)}\n                onMouseLeave={() => onLeave(i)}\n                x={fpx(x - barWidthHalf)}\n                y={fpy(100)}\n                width={fpx(barWidth)}\n                height=\"100%\"\n                fill=\"white\"\n                fillOpacity=\"0\"\n            />\n        );\n    }\n\n    return <g>{paths}</g>;\n});\n"],"names":["observer","useDependencies","keyVal","SvgStore","SvgBars","metrics","isStackedBarChart","isGroupedBarChart","store","fpx","fpy","barWidth","length","barWidthHalf","paths","i","x","periodX","values","map","m","id","color","valuesOpts","opacity","val","periodY","stackedBarHeight","reduce","sum","curr","value","push","rect","y","width","height","fill","j","groupedBarX","sort","a","b","g","SvgBarsHover","onHover","onLeave","onMouseEnter","onMouseLeave","fillOpacity"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/charts/line-chart/components/svg-bars.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { observer } from 'mobx-react';\nimport { useDependencies } from '@servicetitan/react-ioc';\nimport { ChartMetric } from '../utils/internal-interfaces';\nimport { keyVal } from '../utils/key';\nimport { SvgStore } from '../stores/svg.store';\n\ninterface SvgBarsProps {\n    metrics: ChartMetric[];\n    isStackedBarChart?: boolean;\n    isGroupedBarChart?: boolean;\n}\n\nexport const SvgBars: FC<SvgBarsProps> = observer(\n    ({ metrics, isStackedBarChart, isGroupedBarChart }) => {\n        const [store] = useDependencies(SvgStore);\n        const { fpx, fpy, barWidth, length } = store;\n        const barWidthHalf = barWidth / 2;\n        const paths = [];\n\n        const patternDefs = metrics\n            .filter(m => m.opts?.pattern === 'striped')\n            .map(m => {\n                const rotation = 20;\n                const tileW = 0.6;\n                const tileH = 0.6;\n                const stripeWidth = Math.max(0.1, Math.floor(tileW / 20));\n                const tintOpacity = 0.06;\n\n                return (\n                    <pattern\n                        key={`pattern-${m.id}`}\n                        id={`stripe-pattern-${m.id}`}\n                        patternUnits=\"userSpaceOnUse\"\n                        width={tileW}\n                        height={tileH}\n                        patternTransform={`rotate(${rotation})`}\n                    >\n                        <rect width={tileW} height={tileH} fill={m.color} opacity={tintOpacity} />\n                        <rect width={stripeWidth} height={tileH} fill={m.color} />\n                    </pattern>\n                );\n            });\n\n        for (let i = 0; i < length; i++) {\n            const x = store.periodX(i);\n            const values = metrics.map(m => ({\n                id: m.id,\n                color: m.valuesOpts?.[i]?.color ?? m.color,\n                opacity: m.opacity,\n                val: store.periodY(m, i),\n                pattern: m.opts?.pattern,\n                strokeColor: m.opts?.strokeColor,\n                outlineColor: m.opts?.outlineColor,\n                value: m.values[i],\n            }));\n\n            if (isStackedBarChart) {\n                const spacingBetweenSegments = 1; // Approximately 4px in SVG coordinates\n                const totalSpacing = (values.length - 1) * spacingBetweenSegments;\n                let stackedBarHeight =\n                    values.reduce((sum, curr) => sum + curr.val, 0) + totalSpacing;\n\n                const totalValue = values.reduce((sum, curr) => sum + curr.value, 0);\n                if (totalValue > 0) {\n                    const yTop = +fpy(stackedBarHeight);\n                    const scaleX = 0.3;\n                    const scaleY = 1;\n\n                    paths.push(\n                        <g\n                            key={`total-${i}`}\n                            transform={`translate(${x},${yTop}) scale(${scaleX},${scaleY})`}\n                            pointerEvents=\"none\"\n                        >\n                            <text\n                                x={0}\n                                y={0}\n                                textAnchor=\"middle\"\n                                dominantBaseline=\"alphabetic\"\n                                fontSize=\"2.5\"\n                                fontWeight={600}\n                                fill=\"#111827\"\n                                stroke=\"white\"\n                                strokeWidth={0.8}\n                                paintOrder=\"stroke\"\n                                fontFamily=\"Nunito Sans\"\n                            >\n                                {Math.round(totalValue)}\n                            </text>\n                        </g>\n                    );\n                }\n\n                for (let j = 0; j < values.length; j++) {\n                    const value = values[j];\n                    stackedBarHeight -= spacingBetweenSegments;\n\n                    const TOP_RADIUS = 1;\n                    const xLeft = +fpx(x - barWidth / 2);\n                    const yTop = +fpy(stackedBarHeight) + (values.length - 2);\n                    const height = +fpx(value.val);\n                    const width = +fpx(barWidth);\n\n                    const r = j === 0 ? TOP_RADIUS : 0; // radius must be numeric\n\n                    const d = [\n                        `M ${xLeft} ${yTop + height}`, // bottom-left\n                        `L ${xLeft} ${yTop + r}`, // up left edge\n                        `Q ${xLeft} ${yTop} ${xLeft + r / 2} ${yTop}`, // top-left corner\n                        `L ${xLeft + width - r / 2} ${yTop}`, // across top\n                        `Q ${xLeft + width} ${yTop} ${xLeft + width} ${yTop + r}`, // top-right corner\n                        `L ${xLeft + width} ${yTop + height}`, // down right edge\n                        'Z',\n                    ].join(' ');\n                    paths.push(\n                        <path\n                            key={keyVal(value.id, i)}\n                            d={d}\n                            fill={\n                                value.pattern === 'striped'\n                                    ? `url(#stripe-pattern-${value.id})`\n                                    : value.color\n                            }\n                            stroke={\n                                value.pattern === 'outline'\n                                    ? value.outlineColor\n                                    : (value.strokeColor ?? value.color)\n                            }\n                            strokeWidth={1}\n                            vectorEffect=\"non-scaling-stroke\"\n                            strokeLinejoin=\"round\"\n                        />\n                    );\n\n                    stackedBarHeight -= value.val;\n                }\n            } else if (isGroupedBarChart) {\n                for (let j = 0; j < values.length; j++) {\n                    const groupedBarX = (j * barWidth) / values.length;\n                    const value = values[j];\n\n                    paths.push(\n                        <rect\n                            key={keyVal(value.id, i)}\n                            x={x + groupedBarX - barWidthHalf}\n                            y={fpy(value.val)}\n                            width={barWidth / values.length - 0.1}\n                            height={fpx(value.val)}\n                            fill={value.color}\n                            opacity={value.opacity}\n                        />\n                    );\n                }\n            } else {\n                values.sort((a, b) => b.val - a.val);\n                for (const value of values) {\n                    paths.push(\n                        <rect\n                            key={keyVal(value.id, i)}\n                            x={fpx(x - barWidthHalf)}\n                            y={fpy(value.val)}\n                            width={fpx(barWidth)}\n                            height={fpx(value.val)}\n                            fill={value.color}\n                        />\n                    );\n                }\n            }\n        }\n\n        return (\n            <g>\n                {patternDefs.length > 0 && <defs>{patternDefs}</defs>}\n                {paths}\n            </g>\n        );\n    }\n);\n\ninterface SvgBarsHoverProps {\n    onHover(ind: number): void;\n    onLeave(ind: number): void;\n}\n\nexport const SvgBarsHover: FC<SvgBarsHoverProps> = observer(({ onHover, onLeave }) => {\n    const [store] = useDependencies(SvgStore);\n    const { fpx, fpy, barWidth, length } = store;\n    const barWidthHalf = barWidth / 2;\n    const paths = [];\n\n    for (let i = 0; i < length; i++) {\n        const x = store.periodX(i);\n\n        paths.push(\n            <rect\n                key={keyVal('_', i)}\n                onMouseEnter={() => onHover(i)}\n                onMouseLeave={() => onLeave(i)}\n                x={fpx(x - barWidthHalf)}\n                y={fpy(100)}\n                width={fpx(barWidth)}\n                height=\"100%\"\n                fill=\"white\"\n                fillOpacity=\"0\"\n            />\n        );\n    }\n\n    return <g>{paths}</g>;\n});\n"],"names":["observer","useDependencies","keyVal","SvgStore","SvgBars","metrics","isStackedBarChart","isGroupedBarChart","store","fpx","fpy","barWidth","length","barWidthHalf","paths","patternDefs","filter","m","opts","pattern","map","rotation","tileW","tileH","stripeWidth","Math","max","floor","tintOpacity","id","patternUnits","width","height","patternTransform","rect","fill","color","opacity","i","x","periodX","values","valuesOpts","val","periodY","strokeColor","outlineColor","value","spacingBetweenSegments","totalSpacing","stackedBarHeight","reduce","sum","curr","totalValue","yTop","scaleX","scaleY","push","g","transform","pointerEvents","text","y","textAnchor","dominantBaseline","fontSize","fontWeight","stroke","strokeWidth","paintOrder","fontFamily","round","j","TOP_RADIUS","xLeft","r","d","join","path","vectorEffect","strokeLinejoin","groupedBarX","sort","a","b","defs","SvgBarsHover","onHover","onLeave","onMouseEnter","onMouseLeave","fillOpacity"],"mappings":"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"}

package/dist/components/charts/line-chart/line-chart.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"line-chart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/line-chart/line-chart.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;AAIrC,wBAIE;AAkFF,eAAO,MAAM,0BAA0B,+CA4BtC,CAAC;AAEF,eAAO,MAAM,gCAAgC,+CAkC5C,CAAC;AAEF,eAAO,MAAM,gCAAgC,+CAkC5C,CAAC;AAEF,eAAO,MAAM,eAAe,+CA2B3B,CAAC;AA2BF,eAAO,MAAM,mBAAmB,EAAE,EA8BjC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EA8B9B,CAAC"}
+{"version":3,"file":"line-chart.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/charts/line-chart/line-chart.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;AAKrC,wBAIE;AAkFF,eAAO,MAAM,0BAA0B,+CA4BtC,CAAC;AAEF,eAAO,MAAM,gCAAgC,+CAsC5C,CAAC;AAEF,eAAO,MAAM,gCAAgC,+CAkC5C,CAAC;AAEF,eAAO,MAAM,eAAe,+CA2B3B,CAAC;AA2BF,eAAO,MAAM,mBAAmB,EAAE,EA8BjC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EA8B9B,CAAC"}

package/dist/components/charts/line-chart/stores/line-chart.store.d.ts

@@ -6,11 +6,16 @@ export declare class LineChartStore {
     metrics: ChartMetric[];
     periods: LineChartPeriod[];
     resolution: LineChartResolution;
+    totalMetricName?: string;
     left?: SideMetricsSettings;
     right?: SideMetricsSettings;
     hoveredIndex: number;
+    get stackedTotals(): number[] | undefined;
+    get totalLabel(): string;
     constructor();
     init: (props: LineChartProps) => void;
     setHoveredIndex: (index: number, isHovered: boolean) => void;
+    formattedTotalAt: (index: number) => string;
+    private totalAt;
 }
 //# sourceMappingURL=line-chart.store.d.ts.map

package/dist/components/charts/line-chart/stores/line-chart.store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"line-chart.store.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/stores/line-chart.store.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACR,gBAAgB,EAGhB,eAAe,EACf,cAAc,EACd,mBAAmB,EACtB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAsErF,qBACa,cAAc;IACX,MAAM,UAAS;IACf,OAAO,EAAE,gBAAgB,CAAoB;IAC7C,OAAO,EAAE,WAAW,EAAE,CAAM;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAM;IAChC,UAAU,EAAE,mBAAmB,CAAS;IAExC,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAE5B,YAAY,SAAM;;IAMtB,IAAI,GAAI,OAAO,cAAc,UAsCnC;IAEM,eAAe,GAAI,OAAO,MAAM,EAAE,WAAW,OAAO,UAM1D;CACL"}
+{"version":3,"file":"line-chart.store.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/stores/line-chart.store.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACR,gBAAgB,EAGhB,eAAe,EACf,cAAc,EACd,mBAAmB,EACtB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,KAAK,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAsErF,qBACa,cAAc;IACX,MAAM,UAAS;IACf,OAAO,EAAE,gBAAgB,CAAoB;IAC7C,OAAO,EAAE,WAAW,EAAE,CAAM;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAM;IAChC,UAAU,EAAE,mBAAmB,CAAS;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAE5B,YAAY,SAAM;IAE9B,IAAc,aAAa,IAAI,MAAM,EAAE,GAAG,SAAS,CAoBlD;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;;IAMO,IAAI,GAAI,OAAO,cAAc,UAuCnC;IAEM,eAAe,GAAI,OAAO,MAAM,EAAE,WAAW,OAAO,UAM1D;IAEF,gBAAgB,GAAI,OAAO,MAAM,KAAG,MAAM,CAGxC;IAEF,OAAO,CAAC,OAAO,CAGH;CACf"}

package/dist/components/charts/line-chart/stores/line-chart.store.js

@@ -21,7 +21,7 @@ function _ts_metadata(k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }
 import { injectable } from '@servicetitan/react-ioc';
-import { action, observable, makeObservable } from 'mobx';
+import { action, observable, makeObservable, computed } from 'mobx';
 import { defaultDisplay } from '../utils/const';
 import { getFormatter } from '../utils/formatters';
 const getSideMetricsSettings = (metrics, values, range, title, format)=>{
@@ -65,12 +65,37 @@ const getSideMetricsSettings = (metrics, values, range, title, format)=>{
     };
 };
 export class LineChartStore {
+    get stackedTotals() {
+        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() {
+        var _this_totalMetricName;
+        return (_this_totalMetricName = this.totalMetricName) !== null && _this_totalMetricName !== void 0 ? _this_totalMetricName : 'Total';
+    }
     constructor(){
         _define_property(this, "isInit", false);
         _define_property(this, "display", defaultDisplay());
         _define_property(this, "metrics", []);
         _define_property(this, "periods", []);
         _define_property(this, "resolution", 'day');
+        _define_property(this, "totalMetricName", void 0);
         _define_property(this, "left", void 0);
         _define_property(this, "right", void 0);
         _define_property(this, "hoveredIndex", -1);
@@ -95,6 +120,7 @@ export class LineChartStore {
             this.left = getSideMetricsSettings(this.metrics.filter((m)=>!m.isRight), props.metricValues, props.maxRange, props.titleY, this.display.yLeftFormat);
             this.right = getSideMetricsSettings(this.metrics.filter((m)=>m.isRight), props.metricValues, props.maxRangeRight, props.titleYRight, this.display.yRightFormat);
             this.resolution = props.resolution;
+            this.totalMetricName = props.totalMetricName;
             this.periods = props.periods || [];
             this.hoveredIndex = -1;
             this.isInit = true;
@@ -106,6 +132,11 @@ export class LineChartStore {
                 this.hoveredIndex = -1;
             }
         });
+        _define_property(this, "formattedTotalAt", (index)=>{
+            const formatter = getFormatter(this.display.yLeftFormat);
+            return formatter(this.totalAt(index));
+        });
+        _define_property(this, "totalAt", (index)=>this.stackedTotals && index >= 0 && index < this.stackedTotals.length ? this.stackedTotals[index] : 0);
         makeObservable(this);
     }
 }
@@ -128,6 +159,10 @@ _ts_decorate([
     observable,
     _ts_metadata("design:type", typeof LineChartResolution === "undefined" ? Object : LineChartResolution)
 ], LineChartStore.prototype, "resolution", void 0);
+_ts_decorate([
+    observable,
+    _ts_metadata("design:type", String)
+], LineChartStore.prototype, "totalMetricName", void 0);
 _ts_decorate([
     observable,
     _ts_metadata("design:type", typeof SideMetricsSettings === "undefined" ? Object : SideMetricsSettings)
@@ -139,6 +174,11 @@ _ts_decorate([
 _ts_decorate([
     observable
 ], LineChartStore.prototype, "hoveredIndex", void 0);
+_ts_decorate([
+    computed,
+    _ts_metadata("design:type", Object),
+    _ts_metadata("design:paramtypes", [])
+], LineChartStore.prototype, "stackedTotals", null);
 _ts_decorate([
     action
 ], LineChartStore.prototype, "init", void 0);

package/dist/components/charts/line-chart/stores/line-chart.store.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/charts/line-chart/stores/line-chart.store.ts"],"sourcesContent":["import { injectable } from '@servicetitan/react-ioc';\nimport { action, observable, makeObservable } from 'mobx';\nimport type {\n    LineChartDisplay,\n    LineChartDisplayValueFormat,\n    LineChartMetricValues,\n    LineChartPeriod,\n    LineChartProps,\n    LineChartResolution,\n} from '../utils/interfaces';\nimport { defaultDisplay } from '../utils/const';\nimport type { ChartMetric, SideMetricsSettings } from '../utils/internal-interfaces';\nimport { getFormatter } from '../utils/formatters';\n\nconst getSideMetricsSettings = (\n    metrics: ChartMetric[],\n    values: LineChartMetricValues[],\n    range?: number,\n    title?: string,\n    format?: LineChartDisplayValueFormat\n): SideMetricsSettings | undefined => {\n    let maxRange = range ?? 0;\n    const lineBarMetricIDs = metrics\n        .filter(m => m.type === 'line' || m.type === 'bar' || m.type === 'grouped-bar')\n        .map(m => m.id);\n    const stackedBarMetricIDs = metrics.filter(m => m.type === 'stacked-bar').map(m => m.id);\n\n    if (!maxRange) {\n        maxRange = values.reduce(\n            (sum, metricValues) =>\n                lineBarMetricIDs.includes(metricValues.metricId)\n                    ? Math.max(\n                          sum,\n                          metricValues.values.reduce((acc, v) => Math.max(acc, v), 0)\n                      )\n                    : sum,\n            0\n        );\n    }\n\n    if (stackedBarMetricIDs.length) {\n        const stackChartMetricValues = values\n            .filter(metricValues => stackedBarMetricIDs.includes(metricValues.metricId))\n            .map(metric => metric.values);\n\n        const summedStackedMetrics = stackChartMetricValues[0]?.map((value, i) =>\n            stackChartMetricValues.reduce((sum, metricValues) => sum + metricValues[i], 0)\n        );\n\n        if (summedStackedMetrics?.length) {\n            maxRange = Math.max(...summedStackedMetrics, maxRange);\n        }\n    }\n\n    if (!maxRange) {\n        if (!lineBarMetricIDs.length && !stackedBarMetricIDs.length) {\n            return undefined;\n        }\n\n        maxRange = 10;\n    }\n\n    maxRange = Math.max(maxRange, 10);\n\n    if (format === 'moneyShort' && maxRange > 1000 && maxRange < 10000) {\n        maxRange = 10000;\n    }\n\n    const sums = [];\n    const step = maxRange / 10;\n    const formatter = getFormatter(format);\n\n    for (let i = 0; i < 10; i++) {\n        sums.push(formatter(maxRange - i * step));\n    }\n\n    const width = title ? 64 : 48;\n\n    return { maxRange, maxValue: 1.1 * maxRange, title: title ?? '', values: sums, width };\n};\n\n@injectable()\nexport class LineChartStore {\n    @observable isInit = false;\n    @observable display: LineChartDisplay = defaultDisplay();\n    @observable metrics: ChartMetric[] = [];\n    @observable periods: LineChartPeriod[] = [];\n    @observable resolution: LineChartResolution = 'day';\n\n    @observable left?: SideMetricsSettings;\n    @observable right?: SideMetricsSettings;\n\n    @observable hoveredIndex = -1;\n\n    constructor() {\n        makeObservable(this);\n    }\n\n    @action init = (props: LineChartProps) => {\n        this.display = {\n            ...defaultDisplay(),\n            ...(props.display ?? {}),\n        };\n\n        this.metrics = props.metrics.map(m => {\n            const mv = props.metricValues.find(mv => mv.metricId === m.id);\n\n            return {\n                ...m,\n                isRight: !!m.isRight,\n                type: m.type ?? 'line',\n                opts: m.opts ?? {},\n                values: mv?.values ?? [],\n                valuesOpts: mv?.opts,\n            };\n        });\n\n        this.left = getSideMetricsSettings(\n            this.metrics.filter(m => !m.isRight),\n            props.metricValues,\n            props.maxRange,\n            props.titleY,\n            this.display.yLeftFormat\n        );\n        this.right = getSideMetricsSettings(\n            this.metrics.filter(m => m.isRight),\n            props.metricValues,\n            props.maxRangeRight,\n            props.titleYRight,\n            this.display.yRightFormat\n        );\n\n        this.resolution = props.resolution;\n        this.periods = props.periods || [];\n        this.hoveredIndex = -1;\n        this.isInit = true;\n    };\n\n    @action setHoveredIndex = (index: number, isHovered: boolean) => {\n        if (isHovered) {\n            this.hoveredIndex = index;\n        } else if (index === this.hoveredIndex) {\n            this.hoveredIndex = -1;\n        }\n    };\n}\n"],"names":["injectable","action","observable","makeObservable","defaultDisplay","getFormatter","getSideMetricsSettings","metrics","values","range","title","format","maxRange","lineBarMetricIDs","filter","m","type","map","id","stackedBarMetricIDs","reduce","sum","metricValues","includes","metricId","Math","max","acc","v","length","stackChartMetricValues","metric","summedStackedMetrics","value","i","undefined","sums","step","formatter","push","width","maxValue","LineChartStore","isInit","display","periods","resolution","left","right","hoveredIndex","init","props","mv","find","isRight","opts","valuesOpts","titleY","yLeftFormat","maxRangeRight","titleYRight","yRightFormat","setHoveredIndex","index","isHovered"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/charts/line-chart/stores/line-chart.store.ts"],"sourcesContent":["import { injectable } from '@servicetitan/react-ioc';\nimport { action, observable, makeObservable, computed } from 'mobx';\nimport type {\n    LineChartDisplay,\n    LineChartDisplayValueFormat,\n    LineChartMetricValues,\n    LineChartPeriod,\n    LineChartProps,\n    LineChartResolution,\n} from '../utils/interfaces';\nimport { defaultDisplay } from '../utils/const';\nimport type { ChartMetric, SideMetricsSettings } from '../utils/internal-interfaces';\nimport { getFormatter } from '../utils/formatters';\n\nconst getSideMetricsSettings = (\n    metrics: ChartMetric[],\n    values: LineChartMetricValues[],\n    range?: number,\n    title?: string,\n    format?: LineChartDisplayValueFormat\n): SideMetricsSettings | undefined => {\n    let maxRange = range ?? 0;\n    const lineBarMetricIDs = metrics\n        .filter(m => m.type === 'line' || m.type === 'bar' || m.type === 'grouped-bar')\n        .map(m => m.id);\n    const stackedBarMetricIDs = metrics.filter(m => m.type === 'stacked-bar').map(m => m.id);\n\n    if (!maxRange) {\n        maxRange = values.reduce(\n            (sum, metricValues) =>\n                lineBarMetricIDs.includes(metricValues.metricId)\n                    ? Math.max(\n                          sum,\n                          metricValues.values.reduce((acc, v) => Math.max(acc, v), 0)\n                      )\n                    : sum,\n            0\n        );\n    }\n\n    if (stackedBarMetricIDs.length) {\n        const stackChartMetricValues = values\n            .filter(metricValues => stackedBarMetricIDs.includes(metricValues.metricId))\n            .map(metric => metric.values);\n\n        const summedStackedMetrics = stackChartMetricValues[0]?.map((value, i) =>\n            stackChartMetricValues.reduce((sum, metricValues) => sum + metricValues[i], 0)\n        );\n\n        if (summedStackedMetrics?.length) {\n            maxRange = Math.max(...summedStackedMetrics, maxRange);\n        }\n    }\n\n    if (!maxRange) {\n        if (!lineBarMetricIDs.length && !stackedBarMetricIDs.length) {\n            return undefined;\n        }\n\n        maxRange = 10;\n    }\n\n    maxRange = Math.max(maxRange, 10);\n\n    if (format === 'moneyShort' && maxRange > 1000 && maxRange < 10000) {\n        maxRange = 10000;\n    }\n\n    const sums = [];\n    const step = maxRange / 10;\n    const formatter = getFormatter(format);\n\n    for (let i = 0; i < 10; i++) {\n        sums.push(formatter(maxRange - i * step));\n    }\n\n    const width = title ? 64 : 48;\n\n    return { maxRange, maxValue: 1.1 * maxRange, title: title ?? '', values: sums, width };\n};\n\n@injectable()\nexport class LineChartStore {\n    @observable isInit = false;\n    @observable display: LineChartDisplay = defaultDisplay();\n    @observable metrics: ChartMetric[] = [];\n    @observable periods: LineChartPeriod[] = [];\n    @observable resolution: LineChartResolution = 'day';\n    @observable totalMetricName?: string;\n\n    @observable left?: SideMetricsSettings;\n    @observable right?: SideMetricsSettings;\n\n    @observable hoveredIndex = -1;\n\n    @computed get stackedTotals(): number[] | undefined {\n        const stackedSeries = this.metrics.filter(m => m.type === 'stacked-bar');\n        if (stackedSeries.length === 0) {\n            return undefined;\n        }\n        const length = Math.max(this.periods.length, ...stackedSeries.map(s => s.values.length));\n        if (length === 0) {\n            return [];\n        }\n\n        const totals = Array.from({ length }, () => 0);\n\n        for (let i = 0; i < length; i++) {\n            for (const s of stackedSeries) {\n                const v = s.values[i];\n                totals[i] += !Number.isNaN(v) ? v : 0;\n            }\n        }\n\n        return totals;\n    }\n\n    get totalLabel(): string {\n        return this.totalMetricName ?? 'Total';\n    }\n\n    constructor() {\n        makeObservable(this);\n    }\n\n    @action init = (props: LineChartProps) => {\n        this.display = {\n            ...defaultDisplay(),\n            ...(props.display ?? {}),\n        };\n\n        this.metrics = props.metrics.map(m => {\n            const mv = props.metricValues.find(mv => mv.metricId === m.id);\n\n            return {\n                ...m,\n                isRight: !!m.isRight,\n                type: m.type ?? 'line',\n                opts: m.opts ?? {},\n                values: mv?.values ?? [],\n                valuesOpts: mv?.opts,\n            };\n        });\n\n        this.left = getSideMetricsSettings(\n            this.metrics.filter(m => !m.isRight),\n            props.metricValues,\n            props.maxRange,\n            props.titleY,\n            this.display.yLeftFormat\n        );\n        this.right = getSideMetricsSettings(\n            this.metrics.filter(m => m.isRight),\n            props.metricValues,\n            props.maxRangeRight,\n            props.titleYRight,\n            this.display.yRightFormat\n        );\n\n        this.resolution = props.resolution;\n        this.totalMetricName = props.totalMetricName;\n        this.periods = props.periods || [];\n        this.hoveredIndex = -1;\n        this.isInit = true;\n    };\n\n    @action setHoveredIndex = (index: number, isHovered: boolean) => {\n        if (isHovered) {\n            this.hoveredIndex = index;\n        } else if (index === this.hoveredIndex) {\n            this.hoveredIndex = -1;\n        }\n    };\n\n    formattedTotalAt = (index: number): string => {\n        const formatter = getFormatter(this.display.yLeftFormat);\n        return formatter(this.totalAt(index));\n    };\n\n    private totalAt = (index: number): number =>\n        this.stackedTotals && index >= 0 && index < this.stackedTotals.length\n            ? this.stackedTotals[index]\n            : 0;\n}\n"],"names":["injectable","action","observable","makeObservable","computed","defaultDisplay","getFormatter","getSideMetricsSettings","metrics","values","range","title","format","maxRange","lineBarMetricIDs","filter","m","type","map","id","stackedBarMetricIDs","reduce","sum","metricValues","includes","metricId","Math","max","acc","v","length","stackChartMetricValues","metric","summedStackedMetrics","value","i","undefined","sums","step","formatter","push","width","maxValue","LineChartStore","stackedTotals","stackedSeries","periods","s","totals","Array","from","Number","isNaN","totalLabel","totalMetricName","isInit","display","resolution","left","right","hoveredIndex","init","props","mv","find","isRight","opts","valuesOpts","titleY","yLeftFormat","maxRangeRight","titleYRight","yRightFormat","setHoveredIndex","index","isHovered","formattedTotalAt","totalAt"],"mappings":"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"}

package/dist/components/charts/line-chart/utils/interfaces.d.ts

@@ -4,6 +4,9 @@ export type LineChartMetricType = 'line' | 'bar' | 'stacked-bar' | 'grouped-bar'
 export type LineChartMetricsTitlePosition = 'top' | 'top-right' | 'bottom';
 export interface LineChartMetricOpts {
     dashed?: boolean;
+    strokeColor?: string;
+    outlineColor?: string;
+    pattern?: 'solid' | 'striped' | 'outline';
 }
 export interface LineChartMetric {
     id: number;
@@ -31,6 +34,7 @@ export interface LineChartData {
     periods: LineChartPeriod[];
     metricValues: LineChartMetricValues[];
     resolution: LineChartResolution;
+    totalMetricName?: string;
 }
 export type LineChartDisplayValueFormatterName = 'number' | 'money' | 'moneyShort';
 export type LineChartDisplayValueFormatter = (val: number) => string;

package/dist/components/charts/line-chart/utils/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/utils/interfaces.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AACpE,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,KAAK,GAAG,aAAa,GAAG,aAAa,CAAC;AACjF,MAAM,MAAM,6BAA6B,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE3E,MAAM,WAAW,mBAAmB;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC9B;AAED,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,EAAE,CAAC,EAAE,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,wBAAwB,GAC9B,SAAS,GACT;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAER,MAAM,WAAW,qBAAqB;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,CAAC,EAAE,wBAAwB,EAAE,CAAC;CACrC;AAED,MAAM,WAAW,aAAa;IAC1B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,YAAY,EAAE,qBAAqB,EAAE,CAAC;IACtC,UAAU,EAAE,mBAAmB,CAAC;CACnC;AAED,MAAM,MAAM,kCAAkC,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AACnF,MAAM,MAAM,8BAA8B,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;AACrE,MAAM,MAAM,2BAA2B,GACjC,8BAA8B,GAC9B,kCAAkC,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,2BAA2B,CAAC;IAC1C,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C,oBAAoB,CAAC,EAAE,6BAA6B,CAAC;IACrD,iBAAiB,CAAC,EAAE,2BAA2B,CAAC;IAChD,kBAAkB,CAAC,EAAE,2BAA2B,CAAC;CACpD;AAED,MAAM,WAAW,cAAe,SAAQ,aAAa;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAmB,SAAQ,cAAc;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/line-chart/utils/interfaces.ts"],"names":[],"mappings":"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"}

package/dist/components/charts/line-chart/utils/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/charts/line-chart/utils/interfaces.ts"],"sourcesContent":["import { ReactElement } from 'react';\n\nexport type LineChartResolution = 'hour' | 'day' | 'week' | 'month';\nexport type LineChartMetricType = 'line' | 'bar' | 'stacked-bar' | 'grouped-bar';\nexport type LineChartMetricsTitlePosition = 'top' | 'top-right' | 'bottom';\n\nexport interface LineChartMetricOpts {\n    dashed?: boolean;\n}\n\nexport interface LineChartMetric {\n    id: number;\n    color: string;\n    title: string;\n    opacity?: number;\n    isRight?: boolean;\n    type?: LineChartMetricType;\n    opts?: LineChartMetricOpts;\n}\n\nexport interface LineChartPeriod {\n    from: Date;\n    to?: Date;\n    partial?: boolean;\n}\n\nexport type LineChartMetricValueOpts =\n    | undefined\n    | {\n          color?: string;\n      };\n\nexport interface LineChartMetricValues {\n    metricId: number;\n    values: number[];\n    opts?: LineChartMetricValueOpts[];\n}\n\nexport interface LineChartData {\n    periods: LineChartPeriod[];\n    metricValues: LineChartMetricValues[];\n    resolution: LineChartResolution;\n}\n\nexport type LineChartDisplayValueFormatterName = 'number' | 'money' | 'moneyShort';\nexport type LineChartDisplayValueFormatter = (val: number) => string;\nexport type LineChartDisplayValueFormat =\n    | LineChartDisplayValueFormatter\n    | LineChartDisplayValueFormatterName;\n\nexport interface LineChartDisplay {\n    xLabels: boolean;\n    yGrid: boolean;\n    yLeft: boolean;\n    yRight: boolean;\n    yLeftFormat?: LineChartDisplayValueFormat;\n    yRightFormat?: LineChartDisplayValueFormat;\n    metricsTitlePosition?: LineChartMetricsTitlePosition;\n    metricsLeftFormat?: LineChartDisplayValueFormat;\n    metricsRightFormat?: LineChartDisplayValueFormat;\n}\n\nexport interface LineChartProps extends LineChartData {\n    maxRange?: number;\n    titleY?: string;\n    maxRangeRight?: number;\n    titleYRight?: string;\n\n    metrics: LineChartMetric[];\n    from?: Date;\n    display?: Partial<LineChartDisplay>;\n    className?: string;\n    classNameTitle?: string;\n}\n\nexport interface LineChartCardProps extends LineChartProps {\n    title: string;\n    headerRight?: ReactElement;\n    loading?: boolean;\n    grayControls?: boolean;\n}\n"],"names":[],"mappings":"AA2EA,WAKC"}
+{"version":3,"sources":["../../../../../src/components/charts/line-chart/utils/interfaces.ts"],"sourcesContent":["import { ReactElement } from 'react';\n\nexport type LineChartResolution = 'hour' | 'day' | 'week' | 'month';\nexport type LineChartMetricType = 'line' | 'bar' | 'stacked-bar' | 'grouped-bar';\nexport type LineChartMetricsTitlePosition = 'top' | 'top-right' | 'bottom';\n\nexport interface LineChartMetricOpts {\n    dashed?: boolean;\n    strokeColor?: string;\n    outlineColor?: string;\n    pattern?: 'solid' | 'striped' | 'outline';\n}\n\nexport interface LineChartMetric {\n    id: number;\n    color: string;\n    title: string;\n    opacity?: number;\n    isRight?: boolean;\n    type?: LineChartMetricType;\n    opts?: LineChartMetricOpts;\n}\n\nexport interface LineChartPeriod {\n    from: Date;\n    to?: Date;\n    partial?: boolean;\n}\n\nexport type LineChartMetricValueOpts =\n    | undefined\n    | {\n          color?: string;\n      };\n\nexport interface LineChartMetricValues {\n    metricId: number;\n    values: number[];\n    opts?: LineChartMetricValueOpts[];\n}\n\nexport interface LineChartData {\n    periods: LineChartPeriod[];\n    metricValues: LineChartMetricValues[];\n    resolution: LineChartResolution;\n    totalMetricName?: string;\n}\n\nexport type LineChartDisplayValueFormatterName = 'number' | 'money' | 'moneyShort';\nexport type LineChartDisplayValueFormatter = (val: number) => string;\nexport type LineChartDisplayValueFormat =\n    | LineChartDisplayValueFormatter\n    | LineChartDisplayValueFormatterName;\n\nexport interface LineChartDisplay {\n    xLabels: boolean;\n    yGrid: boolean;\n    yLeft: boolean;\n    yRight: boolean;\n    yLeftFormat?: LineChartDisplayValueFormat;\n    yRightFormat?: LineChartDisplayValueFormat;\n    metricsTitlePosition?: LineChartMetricsTitlePosition;\n    metricsLeftFormat?: LineChartDisplayValueFormat;\n    metricsRightFormat?: LineChartDisplayValueFormat;\n}\n\nexport interface LineChartProps extends LineChartData {\n    maxRange?: number;\n    titleY?: string;\n    maxRangeRight?: number;\n    titleYRight?: string;\n\n    metrics: LineChartMetric[];\n    from?: Date;\n    display?: Partial<LineChartDisplay>;\n    className?: string;\n    classNameTitle?: string;\n}\n\nexport interface LineChartCardProps extends LineChartProps {\n    title: string;\n    headerRight?: ReactElement;\n    loading?: boolean;\n    grayControls?: boolean;\n}\n"],"names":[],"mappings":"AA+EA,WAKC"}

package/dist/components/charts/line-chart/utils/labels.js

@@ -93,7 +93,7 @@ export const getXLabels = (periods, resolution, width)=>{
 };
 export const periodDateTitleFormatter = {
     hour: (period)=>moment(period.from).format('MM/DD') + ' ' + 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/dist/components/charts/line-chart/utils/labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/charts/line-chart/utils/labels.ts"],"sourcesContent":["import moment from 'moment';\nimport { LineChartPeriod, LineChartResolution } from './interfaces';\nimport { ChartXLabels } from './internal-interfaces';\n\nconst xLabelFormats = {\n    hour: 'HH:mm',\n    day: 'MM/DD',\n    month: 'MMM',\n};\n\nexport const getXLabels = (\n    periods: LineChartPeriod[],\n    resolution: LineChartResolution,\n    width: number\n): ChartXLabels => {\n    let labels: [string, number][] = [];\n\n    if (resolution === 'hour') {\n        if (width / periods.length < 76) {\n            let day = -1;\n\n            for (const p of periods) {\n                const d = p.from.getDay();\n\n                if (d === day) {\n                    labels[labels.length - 1][1]++;\n\n                    continue;\n                }\n\n                day = d;\n                labels.push([moment(p.from).format(xLabelFormats.day), 1]);\n            }\n        } else {\n            labels = periods.map(p => [\n                moment(p.from).format(xLabelFormats.hour) +\n                    ' - ' +\n                    moment(p.to ?? p.from).format(xLabelFormats.hour),\n                1,\n            ]);\n        }\n    } else if (resolution === 'day') {\n        if (width / periods.length < 40) {\n            let month = -1;\n\n            for (const p of periods) {\n                const m = p.from.getMonth();\n\n                if (m === month) {\n                    labels[labels.length - 1][1]++;\n\n                    continue;\n                }\n\n                month = m;\n                labels.push([moment(p.from).format(xLabelFormats.month), 1]);\n            }\n        } else {\n            labels = periods.map(p => [moment(p.from).format(xLabelFormats.day), 1]);\n        }\n    } else if (resolution === 'week') {\n        if (width / periods.length < 76) {\n            let month = -1;\n\n            for (const p of periods) {\n                const m = p.from.getMonth();\n\n                if (m === month || (month > 0 && p.from.getDate() < 4)) {\n                    labels[labels.length - 1][1]++;\n\n                    continue;\n                }\n\n                if (p.to && p.to.getDate() > 3) {\n                    month = p.to.getMonth();\n                    labels.push([moment(p.to).format(xLabelFormats.month), 1]);\n                } else {\n                    month = m;\n                    labels.push([moment(p.from).format(xLabelFormats.month), 1]);\n                }\n            }\n        } else {\n            labels = periods.map(p => [\n                moment(p.from).format(xLabelFormats.day) +\n                    ' - ' +\n                    moment(p.to ?? p.from).format(xLabelFormats.day),\n                1,\n            ]);\n        }\n    } else if (resolution === 'month') {\n        labels = periods.map(p => [moment(p.from).format(xLabelFormats.month), 1]);\n    }\n\n    return labels;\n};\n\nexport const periodDateTitleFormatter: Record<\n    LineChartResolution,\n    (period: LineChartPeriod) => string\n> = {\n    hour: period =>\n        moment(period.from).format('MM/DD') +\n        ' ' +\n        moment(period.from).format('HH:mm') +\n        ' - ' +\n        moment(period.to).format('HH:mm'),\n    day: period => moment(period.from).format('MMMM DD, YYYY'),\n    month: period => moment(period.from).format('MMMM YYYY'),\n    week: period =>\n        moment(period.from).format('MM/DD/YYYY') + '-' + moment(period.to).format('MM/DD/YYYY'),\n};\n"],"names":["moment","xLabelFormats","hour","day","month","getXLabels","periods","resolution","width","labels","length","p","d","from","getDay","push","format","map","to","m","getMonth","getDate","periodDateTitleFormatter","period","week"],"mappings":"AAAA,OAAOA,YAAY,SAAS;AAI5B,MAAMC,gBAAgB;IAClBC,MAAM;IACNC,KAAK;IACLC,OAAO;AACX;AAEA,OAAO,MAAMC,aAAa,CACtBC,SACAC,YACAC;IAEA,IAAIC,SAA6B,EAAE;IAEnC,IAAIF,eAAe,QAAQ;QACvB,IAAIC,QAAQF,QAAQI,MAAM,GAAG,IAAI;YAC7B,IAAIP,MAAM,CAAC;YAEX,KAAK,MAAMQ,KAAKL,QAAS;gBACrB,MAAMM,IAAID,EAAEE,IAAI,CAACC,MAAM;gBAEvB,IAAIF,MAAMT,KAAK;oBACXM,MAAM,CAACA,OAAOC,MAAM,GAAG,EAAE,CAAC,EAAE;oBAE5B;gBACJ;gBAEAP,MAAMS;gBACNH,OAAOM,IAAI,CAAC;oBAACf,OAAOW,EAAEE,IAAI,EAAEG,MAAM,CAACf,cAAcE,GAAG;oBAAG;iBAAE;YAC7D;QACJ,OAAO;YACHM,SAASH,QAAQW,GAAG,CAACN,CAAAA;oBAGNA;uBAHW;oBACtBX,OAAOW,EAAEE,IAAI,EAAEG,MAAM,CAACf,cAAcC,IAAI,IACpC,QACAF,OAAOW,CAAAA,QAAAA,EAAEO,EAAE,cAAJP,mBAAAA,QAAQA,EAAEE,IAAI,EAAEG,MAAM,CAACf,cAAcC,IAAI;oBACpD;iBACH;;QACL;IACJ,OAAO,IAAIK,eAAe,OAAO;QAC7B,IAAIC,QAAQF,QAAQI,MAAM,GAAG,IAAI;YAC7B,IAAIN,QAAQ,CAAC;YAEb,KAAK,MAAMO,KAAKL,QAAS;gBACrB,MAAMa,IAAIR,EAAEE,IAAI,CAACO,QAAQ;gBAEzB,IAAID,MAAMf,OAAO;oBACbK,MAAM,CAACA,OAAOC,MAAM,GAAG,EAAE,CAAC,EAAE;oBAE5B;gBACJ;gBAEAN,QAAQe;gBACRV,OAAOM,IAAI,CAAC;oBAACf,OAAOW,EAAEE,IAAI,EAAEG,MAAM,CAACf,cAAcG,KAAK;oBAAG;iBAAE;YAC/D;QACJ,OAAO;YACHK,SAASH,QAAQW,GAAG,CAACN,CAAAA,IAAK;oBAACX,OAAOW,EAAEE,IAAI,EAAEG,MAAM,CAACf,cAAcE,GAAG;oBAAG;iBAAE;QAC3E;IACJ,OAAO,IAAII,eAAe,QAAQ;QAC9B,IAAIC,QAAQF,QAAQI,MAAM,GAAG,IAAI;YAC7B,IAAIN,QAAQ,CAAC;YAEb,KAAK,MAAMO,KAAKL,QAAS;gBACrB,MAAMa,IAAIR,EAAEE,IAAI,CAACO,QAAQ;gBAEzB,IAAID,MAAMf,SAAUA,QAAQ,KAAKO,EAAEE,IAAI,CAACQ,OAAO,KAAK,GAAI;oBACpDZ,MAAM,CAACA,OAAOC,MAAM,GAAG,EAAE,CAAC,EAAE;oBAE5B;gBACJ;gBAEA,IAAIC,EAAEO,EAAE,IAAIP,EAAEO,EAAE,CAACG,OAAO,KAAK,GAAG;oBAC5BjB,QAAQO,EAAEO,EAAE,CAACE,QAAQ;oBACrBX,OAAOM,IAAI,CAAC;wBAACf,OAAOW,EAAEO,EAAE,EAAEF,MAAM,CAACf,cAAcG,KAAK;wBAAG;qBAAE;gBAC7D,OAAO;oBACHA,QAAQe;oBACRV,OAAOM,IAAI,CAAC;wBAACf,OAAOW,EAAEE,IAAI,EAAEG,MAAM,CAACf,cAAcG,KAAK;wBAAG;qBAAE;gBAC/D;YACJ;QACJ,OAAO;YACHK,SAASH,QAAQW,GAAG,CAACN,CAAAA;oBAGNA;uBAHW;oBACtBX,OAAOW,EAAEE,IAAI,EAAEG,MAAM,CAACf,cAAcE,GAAG,IACnC,QACAH,OAAOW,CAAAA,QAAAA,EAAEO,EAAE,cAAJP,mBAAAA,QAAQA,EAAEE,IAAI,EAAEG,MAAM,CAACf,cAAcE,GAAG;oBACnD;iBACH;;QACL;IACJ,OAAO,IAAII,eAAe,SAAS;QAC/BE,SAASH,QAAQW,GAAG,CAACN,CAAAA,IAAK;gBAACX,OAAOW,EAAEE,IAAI,EAAEG,MAAM,CAACf,cAAcG,KAAK;gBAAG;aAAE;IAC7E;IAEA,OAAOK;AACX,EAAE;AAEF,OAAO,MAAMa,2BAGT;IACApB,MAAMqB,CAAAA,SACFvB,OAAOuB,OAAOV,IAAI,EAAEG,MAAM,CAAC,WAC3B,MACAhB,OAAOuB,OAAOV,IAAI,EAAEG,MAAM,CAAC,WAC3B,QACAhB,OAAOuB,OAAOL,EAAE,EAAEF,MAAM,CAAC;IAC7Bb,KAAKoB,CAAAA,SAAUvB,OAAOuB,OAAOV,IAAI,EAAEG,MAAM,CAAC;IAC1CZ,OAAOmB,CAAAA,SAAUvB,OAAOuB,OAAOV,IAAI,EAAEG,MAAM,CAAC;IAC5CQ,MAAMD,CAAAA,SACFvB,OAAOuB,OAAOV,IAAI,EAAEG,MAAM,CAAC,gBAAgB,MAAMhB,OAAOuB,OAAOL,EAAE,EAAEF,MAAM,CAAC;AAClF,EAAE"}
+{"version":3,"sources":["../../../../../src/components/charts/line-chart/utils/labels.ts"],"sourcesContent":["import moment from 'moment';\nimport { LineChartPeriod, LineChartResolution } from './interfaces';\nimport { ChartXLabels } from './internal-interfaces';\n\nconst xLabelFormats = {\n    hour: 'HH:mm',\n    day: 'MM/DD',\n    month: 'MMM',\n};\n\nexport const getXLabels = (\n    periods: LineChartPeriod[],\n    resolution: LineChartResolution,\n    width: number\n): ChartXLabels => {\n    let labels: [string, number][] = [];\n\n    if (resolution === 'hour') {\n        if (width / periods.length < 76) {\n            let day = -1;\n\n            for (const p of periods) {\n                const d = p.from.getDay();\n\n                if (d === day) {\n                    labels[labels.length - 1][1]++;\n\n                    continue;\n                }\n\n                day = d;\n                labels.push([moment(p.from).format(xLabelFormats.day), 1]);\n            }\n        } else {\n            labels = periods.map(p => [\n                moment(p.from).format(xLabelFormats.hour) +\n                    ' - ' +\n                    moment(p.to ?? p.from).format(xLabelFormats.hour),\n                1,\n            ]);\n        }\n    } else if (resolution === 'day') {\n        if (width / periods.length < 40) {\n            let month = -1;\n\n            for (const p of periods) {\n                const m = p.from.getMonth();\n\n                if (m === month) {\n                    labels[labels.length - 1][1]++;\n\n                    continue;\n                }\n\n                month = m;\n                labels.push([moment(p.from).format(xLabelFormats.month), 1]);\n            }\n        } else {\n            labels = periods.map(p => [moment(p.from).format(xLabelFormats.day), 1]);\n        }\n    } else if (resolution === 'week') {\n        if (width / periods.length < 76) {\n            let month = -1;\n\n            for (const p of periods) {\n                const m = p.from.getMonth();\n\n                if (m === month || (month > 0 && p.from.getDate() < 4)) {\n                    labels[labels.length - 1][1]++;\n\n                    continue;\n                }\n\n                if (p.to && p.to.getDate() > 3) {\n                    month = p.to.getMonth();\n                    labels.push([moment(p.to).format(xLabelFormats.month), 1]);\n                } else {\n                    month = m;\n                    labels.push([moment(p.from).format(xLabelFormats.month), 1]);\n                }\n            }\n        } else {\n            labels = periods.map(p => [\n                moment(p.from).format(xLabelFormats.day) +\n                    ' - ' +\n                    moment(p.to ?? p.from).format(xLabelFormats.day),\n                1,\n            ]);\n        }\n    } else if (resolution === 'month') {\n        labels = periods.map(p => [moment(p.from).format(xLabelFormats.month), 1]);\n    }\n\n    return labels;\n};\n\nexport const periodDateTitleFormatter: Record<\n    LineChartResolution,\n    (period: LineChartPeriod) => string\n> = {\n    hour: period =>\n        moment(period.from).format('MM/DD') +\n        ' ' +\n        moment(period.from).format('HH:mm') +\n        ' - ' +\n        moment(period.to).format('HH:mm'),\n    day: period => moment(period.from).format('MMM DD, YYYY'),\n    month: period => moment(period.from).format('MMMM YYYY'),\n    week: period =>\n        moment(period.from).format('MM/DD/YYYY') + '-' + moment(period.to).format('MM/DD/YYYY'),\n};\n"],"names":["moment","xLabelFormats","hour","day","month","getXLabels","periods","resolution","width","labels","length","p","d","from","getDay","push","format","map","to","m","getMonth","getDate","periodDateTitleFormatter","period","week"],"mappings":"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"}

package/dist/components/charts/pie-chart/components/pie-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pie-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAE,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAE,aAAa,EAAY,MAAM,oBAAoB,CAAC;AA2B7D,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA+BtC,CAAC"}
+{"version":3,"file":"pie-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie-chart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,EAAE,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,aAAa,EAAY,MAAM,oBAAoB,CAAC;AAoC7D,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAiCtC,CAAC"}

package/dist/components/charts/pie-chart/components/pie-chart.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import classNames from 'classnames';
 import { BodyText, Stack, StatusLight } from '@servicetitan/design-system';
 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 = ({ title, pieces })=>{
-    return /*#__PURE__*/ _jsx("div", {
+    return pieces.length > 2 ? /*#__PURE__*/ _jsx("div", {
         className: classNames(Styles.titleWrapper, 'of-y-auto p-t-2'),
         children: /*#__PURE__*/ _jsxs("div", {
             children: [
@@ -32,6 +34,13 @@ const PieTitles = ({ title, pieces })=>{
                     }, piece.title))
             ]
         })
+    }) : /*#__PURE__*/ _jsx(Flex, {
+        direction: "row",
+        gap: 8,
+        children: pieces.map((piece)=>/*#__PURE__*/ _jsx(ColorTag, {
+                label: piece.title,
+                color: piece.color
+            }, piece.title))
     });
 };
 export const PieChart = ({ height, width, title, sections, popoverContent, content, radiusRelative = radiusRelativeDefault, popoverDirection = 'rb', hideTitles = false })=>{
@@ -46,18 +55,20 @@ export const PieChart = ({ height, width, title, sections, popoverContent, conte
         height,
         width
     ]);
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "d-f flex-row",
-        style: style,
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: pieces.length > 2 ? 'row' : 'column',
         children: [
-            /*#__PURE__*/ _jsx(Pie, {
-                title: title,
-                pieces: pieces,
-                content: content,
-                popoverContent: popoverContent,
-                popoverDirection: popoverDirection,
-                radiusRelative: radiusRelative,
-                hideTitles: hideTitles
+            /*#__PURE__*/ _jsx("div", {
+                style: style,
+                children: /*#__PURE__*/ _jsx(Pie, {
+                    title: title,
+                    pieces: pieces,
+                    content: content,
+                    popoverContent: popoverContent,
+                    popoverDirection: popoverDirection,
+                    radiusRelative: radiusRelative,
+                    hideTitles: hideTitles
+                })
             }),
             !hideTitles && /*#__PURE__*/ _jsx(PieTitles, {
                 title: title,

package/dist/components/charts/pie-chart/components/pie-chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/charts/pie-chart/components/pie-chart.tsx"],"sourcesContent":["import { useMemo, FC } from 'react';\nimport classNames from 'classnames';\nimport { BodyText, Stack, StatusLight } from '@servicetitan/design-system';\nimport { PieChartProps, PiePiece } from '../utils/interface';\nimport { convertSessionsToPieces, radiusRelativeDefault } from '../utils/const';\nimport { Pie } from './pie';\nimport * as Styles from './pie-chart.module.less';\n\nconst PieTitles: FC<{ title: string; pieces: PiePiece[] }> = ({ title, pieces }) => {\n    return (\n        <div className={classNames(Styles.titleWrapper, 'of-y-auto p-t-2')}>\n            <div>\n                {!!pieces.length && (\n                    <Stack.Item className=\"p-l-1 p-b-1\">\n                        <BodyText bold>{title}</BodyText>\n                    </Stack.Item>\n                )}\n                {pieces.map(piece => (\n                    <Stack key={piece.title} alignItems=\"center\">\n                        <StatusLight color={piece.color} />\n                        <BodyText className=\"c-neutral-90\" size=\"medium\">\n                            {piece.title}\n                        </BodyText>\n                    </Stack>\n                ))}\n            </div>\n        </div>\n    );\n};\n\nexport const PieChart: FC<PieChartProps> = ({\n    height,\n    width,\n    title,\n    sections,\n    popoverContent,\n    content,\n    radiusRelative = radiusRelativeDefault,\n    popoverDirection = 'rb',\n    hideTitles = false,\n}) => {\n    const pieces = useMemo(\n        () => convertSessionsToPieces(sections, radiusRelative),\n        [sections, radiusRelative]\n    );\n    const style = useMemo(() => ({ height, width }), [height, width]);\n\n    return (\n        <div className=\"d-f flex-row\" style={style}>\n            <Pie\n                title={title}\n                pieces={pieces}\n                content={content}\n                popoverContent={popoverContent}\n                popoverDirection={popoverDirection}\n                radiusRelative={radiusRelative}\n                hideTitles={hideTitles}\n            />\n            {!hideTitles && <PieTitles title={title} pieces={pieces} />}\n        </div>\n    );\n};\n"],"names":["useMemo","classNames","BodyText","Stack","StatusLight","convertSessionsToPieces","radiusRelativeDefault","Pie","Styles","PieTitles","title","pieces","div","className","titleWrapper","length","Item","bold","map","piece","alignItems","color","size","PieChart","height","width","sections","popoverContent","content","radiusRelative","popoverDirection","hideTitles","style"],"mappings":";AAAA,SAASA,OAAO,QAAY,QAAQ;AACpC,OAAOC,gBAAgB,aAAa;AACpC,SAASC,QAAQ,EAAEC,KAAK,EAAEC,WAAW,QAAQ,8BAA8B;AAE3E,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,iBAAiB;AAChF,SAASC,GAAG,QAAQ,QAAQ;AAC5B,YAAYC,YAAY,0BAA0B;AAElD,MAAMC,YAAuD,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAAE;IAC3E,qBACI,KAACC;QAAIC,WAAWZ,WAAWO,OAAOM,YAAY,EAAE;kBAC5C,cAAA,MAACF;;gBACI,CAAC,CAACD,OAAOI,MAAM,kBACZ,KAACZ,MAAMa,IAAI;oBAACH,WAAU;8BAClB,cAAA,KAACX;wBAASe,IAAI;kCAAEP;;;gBAGvBC,OAAOO,GAAG,CAACC,CAAAA,sBACR,MAAChB;wBAAwBiB,YAAW;;0CAChC,KAAChB;gCAAYiB,OAAOF,MAAME,KAAK;;0CAC/B,KAACnB;gCAASW,WAAU;gCAAeS,MAAK;0CACnCH,MAAMT,KAAK;;;uBAHRS,MAAMT,KAAK;;;;AAU3C;AAEA,OAAO,MAAMa,WAA8B,CAAC,EACxCC,MAAM,EACNC,KAAK,EACLf,KAAK,EACLgB,QAAQ,EACRC,cAAc,EACdC,OAAO,EACPC,iBAAiBvB,qBAAqB,EACtCwB,mBAAmB,IAAI,EACvBC,aAAa,KAAK,EACrB;IACG,MAAMpB,SAASX,QACX,IAAMK,wBAAwBqB,UAAUG,iBACxC;QAACH;QAAUG;KAAe;IAE9B,MAAMG,QAAQhC,QAAQ,IAAO,CAAA;YAAEwB;YAAQC;QAAM,CAAA,GAAI;QAACD;QAAQC;KAAM;IAEhE,qBACI,MAACb;QAAIC,WAAU;QAAemB,OAAOA;;0BACjC,KAACzB;gBACGG,OAAOA;gBACPC,QAAQA;gBACRiB,SAASA;gBACTD,gBAAgBA;gBAChBG,kBAAkBA;gBAClBD,gBAAgBA;gBAChBE,YAAYA;;YAEf,CAACA,4BAAc,KAACtB;gBAAUC,OAAOA;gBAAOC,QAAQA;;;;AAG7D,EAAE"}
+{"version":3,"sources":["../../../../../src/components/charts/pie-chart/components/pie-chart.tsx"],"sourcesContent":["import { useMemo, FC } from 'react';\nimport { BodyText, Stack, StatusLight } from '@servicetitan/design-system';\nimport { PieChartProps, PiePiece } from '../utils/interface';\nimport { convertSessionsToPieces, radiusRelativeDefault } from '../utils/const';\nimport { Pie } from './pie';\nimport { Flex } from '@servicetitan/anvil2';\nimport classNames from 'classnames';\nimport * as Styles from './pie-chart.module.less';\nimport { ColorTag } from '../../common';\n\nconst PieTitles: FC<{ title: string; pieces: PiePiece[] }> = ({ title, pieces }) => {\n    return pieces.length > 2 ? (\n        <div className={classNames(Styles.titleWrapper, 'of-y-auto p-t-2')}>\n            <div>\n                {!!pieces.length && (\n                    <Stack.Item className=\"p-l-1 p-b-1\">\n                        <BodyText bold>{title}</BodyText>\n                    </Stack.Item>\n                )}\n                {pieces.map(piece => (\n                    <Stack key={piece.title} alignItems=\"center\">\n                        <StatusLight color={piece.color} />\n                        <BodyText className=\"c-neutral-90\" size=\"medium\">\n                            {piece.title}\n                        </BodyText>\n                    </Stack>\n                ))}\n            </div>\n        </div>\n    ) : (\n        <Flex direction=\"row\" gap={8}>\n            {pieces.map(piece => (\n                <ColorTag key={piece.title} label={piece.title} color={piece.color} />\n            ))}\n        </Flex>\n    );\n};\n\nexport const PieChart: FC<PieChartProps> = ({\n    height,\n    width,\n    title,\n    sections,\n    popoverContent,\n    content,\n    radiusRelative = radiusRelativeDefault,\n    popoverDirection = 'rb',\n    hideTitles = false,\n}) => {\n    const pieces = useMemo(\n        () => convertSessionsToPieces(sections, radiusRelative),\n        [sections, radiusRelative]\n    );\n    const style = useMemo(() => ({ height, width }), [height, width]);\n\n    return (\n        <Stack direction={pieces.length > 2 ? 'row' : 'column'}>\n            <div style={style}>\n                <Pie\n                    title={title}\n                    pieces={pieces}\n                    content={content}\n                    popoverContent={popoverContent}\n                    popoverDirection={popoverDirection}\n                    radiusRelative={radiusRelative}\n                    hideTitles={hideTitles}\n                />\n            </div>\n            {!hideTitles && <PieTitles title={title} pieces={pieces} />}\n        </Stack>\n    );\n};\n"],"names":["useMemo","BodyText","Stack","StatusLight","convertSessionsToPieces","radiusRelativeDefault","Pie","Flex","classNames","Styles","ColorTag","PieTitles","title","pieces","length","div","className","titleWrapper","Item","bold","map","piece","alignItems","color","size","direction","gap","label","PieChart","height","width","sections","popoverContent","content","radiusRelative","popoverDirection","hideTitles","style"],"mappings":";AAAA,SAASA,OAAO,QAAY,QAAQ;AACpC,SAASC,QAAQ,EAAEC,KAAK,EAAEC,WAAW,QAAQ,8BAA8B;AAE3E,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,iBAAiB;AAChF,SAASC,GAAG,QAAQ,QAAQ;AAC5B,SAASC,IAAI,QAAQ,uBAAuB;AAC5C,OAAOC,gBAAgB,aAAa;AACpC,YAAYC,YAAY,0BAA0B;AAClD,SAASC,QAAQ,QAAQ,eAAe;AAExC,MAAMC,YAAuD,CAAC,EAAEC,KAAK,EAAEC,MAAM,EAAE;IAC3E,OAAOA,OAAOC,MAAM,GAAG,kBACnB,KAACC;QAAIC,WAAWR,WAAWC,OAAOQ,YAAY,EAAE;kBAC5C,cAAA,MAACF;;gBACI,CAAC,CAACF,OAAOC,MAAM,kBACZ,KAACZ,MAAMgB,IAAI;oBAACF,WAAU;8BAClB,cAAA,KAACf;wBAASkB,IAAI;kCAAEP;;;gBAGvBC,OAAOO,GAAG,CAACC,CAAAA,sBACR,MAACnB;wBAAwBoB,YAAW;;0CAChC,KAACnB;gCAAYoB,OAAOF,MAAME,KAAK;;0CAC/B,KAACtB;gCAASe,WAAU;gCAAeQ,MAAK;0CACnCH,MAAMT,KAAK;;;uBAHRS,MAAMT,KAAK;;;uBAUnC,KAACL;QAAKkB,WAAU;QAAMC,KAAK;kBACtBb,OAAOO,GAAG,CAACC,CAAAA,sBACR,KAACX;gBAA2BiB,OAAON,MAAMT,KAAK;gBAAEW,OAAOF,MAAME,KAAK;eAAnDF,MAAMT,KAAK;;AAI1C;AAEA,OAAO,MAAMgB,WAA8B,CAAC,EACxCC,MAAM,EACNC,KAAK,EACLlB,KAAK,EACLmB,QAAQ,EACRC,cAAc,EACdC,OAAO,EACPC,iBAAiB7B,qBAAqB,EACtC8B,mBAAmB,IAAI,EACvBC,aAAa,KAAK,EACrB;IACG,MAAMvB,SAASb,QACX,IAAMI,wBAAwB2B,UAAUG,iBACxC;QAACH;QAAUG;KAAe;IAE9B,MAAMG,QAAQrC,QAAQ,IAAO,CAAA;YAAE6B;YAAQC;QAAM,CAAA,GAAI;QAACD;QAAQC;KAAM;IAEhE,qBACI,MAAC5B;QAAMuB,WAAWZ,OAAOC,MAAM,GAAG,IAAI,QAAQ;;0BAC1C,KAACC;gBAAIsB,OAAOA;0BACR,cAAA,KAAC/B;oBACGM,OAAOA;oBACPC,QAAQA;oBACRoB,SAASA;oBACTD,gBAAgBA;oBAChBG,kBAAkBA;oBAClBD,gBAAgBA;oBAChBE,YAAYA;;;YAGnB,CAACA,4BAAc,KAACzB;gBAAUC,OAAOA;gBAAOC,QAAQA;;;;AAG7D,EAAE"}

package/dist/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/dist/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/dist/components/charts/pie-chart/components/pie.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pie.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,EAAE,EAAY,MAAM,OAAO,CAAC;AAKrE,OAAO,EAAE,0BAA0B,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAsG5F,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,EAAE,CAAC;IACb,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACvC,CAyHA,CAAC"}
+{"version":3,"file":"pie.d.ts","sourceRoot":"","sources":["../../../../../src/components/charts/pie-chart/components/pie.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,EAAE,EAAY,MAAM,OAAO,CAAC;AAKrE,OAAO,EAAE,0BAA0B,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAsK5F,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,EAAE,CAAC;IACb,cAAc,CAAC,EAAE,0BAA0B,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACvC,CA2HA,CAAC"}