@quillsql/react 2.12.37 → 2.12.39

package/dist/esm/components/Chart/BarList.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { valueFormatter } from '../../utils/valueFormatter';
+const getWidthsFromValues = (dataValues) => {
+    let maxValue = -Infinity;
+    dataValues.forEach((value) => {
+        maxValue = Math.max(maxValue, value);
+    });
+    return dataValues.map((value) => {
+        if (value === 0)
+            return 0;
+        return Math.max((value / maxValue) * 100, 1);
+    });
+};
+// const valueFormatter = (number: number) => {
+// return '$ ' + Intl.NumberFormat('us').format(number).toString();
+//   return number.toFixed(0);
+// };
+function getColors(colorMap, xAxisField, colors) {
+    if (colorMap && colorMap[xAxisField] && colorMap[xAxisField]['primary']) {
+        return colorMap[xAxisField]['primary'];
+    }
+    else if (colors) {
+        return hexToRgbaWith10PercentAlpha(colors[0]);
+    }
+    return hexToRgbaWith10PercentAlpha(undefined);
+}
+export function hexToRgbaWith10PercentAlpha(hex) {
+    // Convert the hex color to RGB
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    // Set the alpha value to 10%
+    const alpha = 0.1;
+    // Return the color as an rgba string
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+const BarList = React.forwardRef((props, ref) => {
+    const { data = [], yAxisFields, xAxisField, xAxisFormat, colors, colorMap = {}, 
+    // valueFormatter = (value: any) => value,valueFormatter
+    showAnimation = true, className, containerStyle, theme, onClickChartElement, scrollable, ...other } = props;
+    const widths = getWidthsFromValues(data.map((item) => {
+        if (yAxisFields && yAxisFields[0] && yAxisFields[0].field) {
+            return item[yAxisFields[0].field];
+        }
+        return 0;
+    }));
+    const NUM_TO_SHOW = scrollable ? 500 : 5;
+    if (!data || data.length === 0) {
+        return (_jsx("div", { style: {
+                display: 'flex',
+                flex: '1 0 auto',
+                height: '100%',
+                margin: 'auto',
+                justifyContent: 'center',
+                alignItems: 'center',
+                fontSize: 13,
+                color: theme.secondaryTextColor,
+                ...containerStyle,
+            }, className: className, children: "No results found for specified time period." }));
+    }
+    return (_jsx("div", { ref: ref, className: className, style: {
+            // width: '100%',
+            boxSizing: 'content-box',
+            height: '100%',
+            // marginLeft: 25,
+            // background: 'red',
+            // paddingRight: 25,
+            // paddingRight: 25,
+            ...containerStyle,
+        }, ...other, children: _jsxs("div", { style: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                boxSizing: 'content-box',
+                overflow: scrollable ? 'scroll' : 'hidden',
+                width: '100%',
+                height: '100%',
+            }, children: [_jsxs("div", { style: {
+                        width: '100%',
+                        boxSizing: 'content-box',
+                        height: '100%',
+                        position: 'relative',
+                        paddingRight: 25,
+                    }, children: [data.slice(0, NUM_TO_SHOW).map((item, idx) => {
+                            return (_jsx("div", { style: {
+                                    width: `${widths[idx]}%`,
+                                    transition: showAnimation ? 'all 2s' : '',
+                                    boxSizing: 'content-box',
+                                    backgroundColor: getColors(colorMap, xAxisField, colors),
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    height: '36px',
+                                    marginBottom: '8px',
+                                    borderRadius: '4px',
+                                }, onClick: () => onClickChartElement?.(item), children: _jsx("div", { style: {
+                                        boxSizing: 'content-box',
+                                        position: 'absolute',
+                                        maxWidth: '100%',
+                                        display: 'flex',
+                                        marginLeft: '8px',
+                                    }, children: _jsx("p", { style: {
+                                            color: theme?.chartLabelColor,
+                                            boxSizing: 'content-box',
+                                            whiteSpace: 'nowrap',
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+                                            fontSize: theme?.fontSizeSmall || '14px',
+                                        }, children: valueFormatter({
+                                            value: item[xAxisField] ?? item[`comparison_${xAxisField}`],
+                                            field: xAxisField,
+                                            // @ts-ignore
+                                            fields: [{ field: xAxisField, format: xAxisFormat }],
+                                        }) }) }) }, item[xAxisField] + 'label' + idx));
+                        }), data.length > NUM_TO_SHOW && (_jsxs("div", { style: {
+                                color: theme?.chartLabelColor,
+                                boxSizing: 'content-box',
+                                fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+                                fontSize: theme?.fontSizeSmall || '14px',
+                            }, children: ["...", data.length - NUM_TO_SHOW, " more"] }))] }), _jsx("div", { style: {
+                        boxSizing: 'content-box',
+                        textAlign: 'right',
+                        minWidth: 'min-content',
+                        paddingLeft: 10,
+                    }, children: data.slice(0, NUM_TO_SHOW).map((item, idx) => (_jsx("div", { style: {
+                            boxSizing: 'content-box',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'flex-end',
+                            marginBottom: idx === data.length - 1 ? 0 : '8px',
+                            height: '36px',
+                        }, children: _jsx("p", { style: {
+                                color: theme?.chartLabelColor,
+                                boxSizing: 'content-box',
+                                fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                fontSize: theme?.fontSizeSmall || '14px',
+                            }, children: valueFormatter({
+                                value: yAxisFields && yAxisFields[0] && item[yAxisFields[0].field]
+                                    ? item[yAxisFields[0].field]
+                                    : 0,
+                                field: yAxisFields && yAxisFields[0] && yAxisFields[0].field,
+                                fields: yAxisFields,
+                            }) }) }, item[xAxisField] + 'value' + idx))) })] }) }));
+});
+export default BarList;

package/dist/esm/components/Chart/ChartError.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export default function ChartError({ errorMessage, }: any): JSX.Element;
+export declare function QuillChartErrorWithAction({ className, containerStyle, label, onClick, ButtonComponent, }: {
+    className?: string;
+    containerStyle?: React.CSSProperties;
+    label?: string;
+    onClick?: (element: any) => void;
+    ButtonComponent?: React.ComponentType<any>;
+}): JSX.Element;
+//# sourceMappingURL=ChartError.d.ts.map

package/dist/esm/components/Chart/ChartError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartError.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartError.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,YAAsC,GACvC,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CA0CnB;AAED,wBAAgB,yBAAyB,CAAC,EACxC,SAAS,EACT,cAAc,EACd,KAA+B,EAC/B,OAAO,EACP,eAAgC,GACjC,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CAC5C,GAAG,GAAG,CAAC,OAAO,CAqDd"}

package/dist/esm/components/Chart/ChartError.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '../../hooks';
+import { MemoizedButton } from '../UiComponents';
+export default function ChartError({ errorMessage = 'Failed to fetch data.', }) {
+    const theme = useTheme();
+    return (_jsx("div", { style: {
+            boxSizing: 'content-box',
+            height: '100%',
+        }, children: _jsx("div", { style: {
+                height: '100%',
+                width: '100%',
+                boxSizing: 'content-box',
+                borderRadius: 8,
+                overflow: 'hidden',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+            }, children: _jsx("div", { style: {
+                    width: '100%',
+                    paddingLeft: 12,
+                    paddingRight: 12,
+                    display: 'flex',
+                    flex: '1 0 auto',
+                    margin: 'auto',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    textAlign: 'center',
+                    fontSize: 13,
+                    color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
+                    fontFamily: theme.fontFamily,
+                }, children: errorMessage }) }) }));
+}
+export function QuillChartErrorWithAction({ className, containerStyle, label = 'Failed to fetch data.', onClick, ButtonComponent = MemoizedButton, }) {
+    const theme = useTheme();
+    return (_jsx("div", { style: {
+            boxSizing: 'content-box',
+            height: '100%',
+            width: '100%',
+            ...containerStyle,
+        }, className: className, children: _jsxs("div", { style: {
+                height: containerStyle?.height || '100%',
+                width: '100%',
+                boxSizing: 'content-box',
+                borderRadius: 8,
+                overflow: 'hidden',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+            }, children: [_jsx("div", { style: {
+                        paddingLeft: 12,
+                        paddingRight: 12,
+                        fontSize: 13,
+                        color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
+                        fontFamily: theme.fontFamily,
+                    }, children: label }), onClick && label && label.startsWith('SQL View Error:') && (_jsx(ButtonComponent, { label: "Edit View", onClick: () => {
+                        const regex = /'([^']+)'/;
+                        const matches = regex.exec(label);
+                        if (matches && matches.length > 1) {
+                            matches[1];
+                            onClick(matches[1]);
+                            return;
+                        }
+                        onClick(undefined);
+                    } }))] }) }));
+}

package/dist/esm/components/Chart/ChartSkeleton.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+export interface SkeletonComponentProps {
+    conatinerStyle?: CSSProperties;
+    className?: string;
+}
+export declare const QuillLoadingSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export default function ChartSkeleton({ className, containerStyle, }: any): JSX.Element;
+//# sourceMappingURL=ChartSkeleton.d.ts.map

package/dist/esm/components/Chart/ChartSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,aAAa,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,WAAW,sBAAsB;IACrC,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,oBAAoB,+CAA0B,CAAC;AAE5D,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,SAAS,EACT,cAAc,GACf,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CA2EnB"}

package/dist/esm/components/Chart/ChartSkeleton.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ThemeContext } from '../../Context';
+export const QuillLoadingSkeleton = () => _jsx(ChartSkeleton, {});
+export default function ChartSkeleton({ className, containerStyle, }) {
+    const [theme] = useContext(ThemeContext);
+    return (_jsx("div", { style: {
+            boxSizing: 'content-box',
+            height: '100%',
+            width: '100%',
+            ...containerStyle,
+        }, className: className, children: _jsx("div", { style: {
+                height: '100%',
+                width: '100%',
+                boxSizing: 'content-box',
+                borderRadius: 8,
+                overflow: 'hidden',
+            }, children: _jsxs("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [_jsx("rect", { width: "100%", height: "100%", fill: theme?.loadingStateBackgroundColor || '#F9F9FA' }), _jsx("defs", { fill: theme?.loadingStateBackgroundColor || '#F9F9FA', children: _jsxs("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0%", stopColor: "rgba(255,255,255,0)" }), _jsx("stop", { offset: "50%", stopColor: "#FEFEFE" }), _jsx("stop", { offset: "100%", stopColor: "rgba(255,255,255,0)" }), _jsx("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), _jsx("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), _jsx("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: _jsx("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }));
+}

package/dist/esm/components/Chart/ChartTooltip.d.ts

@@ -0,0 +1,31 @@
+export interface ChartTooltipProps {
+    active: boolean | undefined;
+    payload: PayloadItem[];
+    label: string;
+    label2?: string;
+    colors: string[];
+    valueFormatter: any;
+    dateFormatter: any;
+    xAxisFormat: string;
+    xAxisField: string;
+    theme: any;
+    comparison?: boolean;
+    dateFilter?: any;
+}
+type PayloadItem = {
+    chartType: string | undefined;
+    color: string;
+    dataKey: string;
+    fill: string;
+    formatter: () => void;
+    name: string;
+    payload: {
+        [key: string]: any;
+    };
+    type: string;
+    unit: string;
+    value: any;
+};
+export default function ChartTooltip(props: ChartTooltipProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ChartTooltip.d.ts.map

package/dist/esm/components/Chart/ChartTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltip.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,GAAG,CAAC;IACpB,aAAa,EAAE,GAAG,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB;AAED,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;CACZ,CAAC;AA4UF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,kDAK5D"}

package/dist/esm/components/Chart/ChartTooltip.js

@@ -0,0 +1,234 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { format, subDays } from 'date-fns';
+import ChartTooltipFrame from './ChartTooltipFrame';
+import ChartTooltipRow from './ChartTooltipRow';
+import ChartTooltipGroup from './ChartTooltipGroup';
+import { convertComparisonRange, isDateFormat } from '../../utils/dates';
+// The chart tooltip to display for primary labels (ie. not label2).
+const ChartTooltipPrimary = (props) => (_jsxs(ChartTooltipFrame, { theme: props.theme, children: [_jsx("div", { style: {
+                borderStyle: 'solid',
+                borderBottomColor: props.theme?.borderColor || '#E5E7EB',
+                background: props.theme?.backgroundColor || 'white',
+                borderTop: 'none',
+                borderLeft: 'none',
+                borderRight: 'none',
+                borderBottomWidth: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                paddingLeft: '16px',
+                paddingRight: '16px',
+                paddingTop: '8px',
+                paddingBottom: '8px',
+            }, children: _jsx("p", { style: {
+                    textAlign: 'left',
+                    marginTop: 0,
+                    marginBottom: 0,
+                    fontFamily: props.theme?.fontFamily,
+                    color: props.theme?.primaryTextColor,
+                    fontSize: props.theme?.fontSizeSmall || '14px',
+                    fontWeight: props.theme?.boldFontWeight || '500',
+                    paddingTop: 2,
+                    paddingBottom: 2,
+                }, children: !isNaN(new Date(props.label)) && props.dateFormatter
+                    ? props.dateFormatter(props.label)
+                    : !isNaN(new Date(props.label))
+                        ? format(new Date(props.label), 'MMM yyyy')
+                        : props.label }) }), _jsx("div", { style: {
+                paddingRight: '16px',
+                paddingLeft: '16px',
+                paddingTop: '8px',
+                paddingBottom: '8px',
+            }, children: props.payload.map(({ color, value, name }, idx) => (_jsx(ChartTooltipRow, { value: props.valueFormatter(value), name: name, color: color, theme: props.theme }, `id-${idx}`))) })] }));
+// The chart tooltip to display for secondary labels (ie. label2).
+const ChartTooltipSecondary = (props) => (_jsx(ChartTooltipFrame, { theme: props.theme, children: props.payload.map(({ color, value, name }, idx) => (_jsxs(_Fragment, { children: [idx === 0 && (_jsx("div", { style: {
+                    borderStyle: 'solid',
+                    borderBottomColor: props.theme?.borderColor || '#E5E7EB',
+                    background: props.theme?.backgroundColor || 'white',
+                    borderTop: 'none',
+                    borderLeft: 'none',
+                    borderRight: 'none',
+                    borderBottomWidth: 1,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingLeft: '16px',
+                    paddingRight: '16px',
+                    paddingTop: '8px',
+                    paddingBottom: '8px',
+                }, children: _jsx("p", { style: {
+                        textAlign: 'left',
+                        marginTop: 0,
+                        marginBottom: 0,
+                        fontFamily: props.theme?.fontFamily,
+                        color: props.theme?.primaryTextColor,
+                        fontSize: props.theme?.fontSizeSmall || '14px',
+                        fontWeight: props.theme?.boldFontWeight || '500',
+                        paddingTop: 2,
+                        paddingBottom: 2,
+                    }, children: name }) })), _jsx("div", { style: {
+                    paddingRight: '16px',
+                    paddingLeft: '16px',
+                    paddingBottom: '8px',
+                    ...(idx === 0 && { paddingTop: '8px' }),
+                }, children: _jsx(ChartTooltipRow, { name: props.valueFormatter(value), value: !isNaN(new Date(idx === 0 ? props.label : props.label2)) &&
+                        props.dateFormatter
+                        ? props.dateFormatter(idx === 0 ? props.label : props.label2)
+                        : !isNaN(new Date(idx === 0 ? props.label : props.label2))
+                            ? format(new Date(idx === 0 ? props.label : props.label2), 'MMM yyyy')
+                            : idx === 0
+                                ? props.label
+                                : props.label2, color: color, theme: props.theme }, `id-${idx}`) })] }))) }));
+const LABEL_TO_DAYS = {
+    'This week': 7,
+    'This month': 30,
+    'This year': 365,
+    'Last 7 days': 7,
+    'Last 30 days': 30,
+    'Last 90 days': 90,
+    'Last 6 months': 180,
+    'All time': 0,
+};
+/**
+ * Transforms a list of payload items where some payload items have a dataKey
+ * prefixed with "comparison_" into an object where the keys are the grouped
+ * data keys (ie. "Fuel" and "comparison_Fuel" both map to the key "Fuel") and
+ * the values are a list of chart tooltip row items for that key.
+ *
+ * For example:
+ * [
+ *   { dataKey: "Fuel", value: 178 }
+ *   { dataKey: "Food", value: 58 }
+ *   { dataKey: "comparison_Fuel", value: 145 }
+ *   { dataKey: "comparison_Food", value: 72 }
+ * ]
+ *
+ * transforms into this
+ * {
+ *   "Fuel": [
+ *     { color: "blue", value: 178, name: "Last 6 months" }
+ *     { color: "blue", value: 145, name: "Previous Period" }
+ *   ]
+ *   "Food": [
+ *     { color: "red", value: 58, name: "Last 6 months" }
+ *     { color: "red", value: 72, name: "Previous Period" }
+ *   ]
+ * }
+ */
+function reformatComparisonPayload(props, primaryLabel, comparisonLabel) {
+    const columnsByKey = {};
+    const isDateXAxis = isDateFormat(props.xAxisFormat);
+    // When there is exactly one pair of entries for a comparison, we don't group
+    // them by section, and we flip things around so the label goes on top and the
+    // name of each colored tag is the date if the xAxis is a date format.
+    if (props.payload.length <= 2 && isDateXAxis) {
+        for (const item of props.payload) {
+            const isComparison = item.name.toLowerCase().includes('comparison ');
+            const nameKey = isComparison
+                ? `comparison_${props.xAxisField}`
+                : props.xAxisField;
+            const days = LABEL_TO_DAYS[primaryLabel] ?? 0;
+            const primaryDate = item.payload[props.xAxisField] ?? 0;
+            const compDate = subDays(new Date(primaryDate), days + 1);
+            const date = item.payload[nameKey] ?? format(compDate, props.xAxisFormat);
+            const name = props.dateFormatter(date);
+            const color = item.color;
+            const value = props.valueFormatter(item.value);
+            if (!columnsByKey['']) {
+                columnsByKey[''] = [];
+            }
+            columnsByKey[''].push({ color, name, value });
+        }
+        return columnsByKey;
+    }
+    // When there are more than one pair of entries in payload, we group them
+    // by the name and use that key as the key in our map.
+    for (const item of props.payload) {
+        let key = item.name;
+        if (key.includes('comparison ')) {
+            key = key.replace('comparison ', '');
+        }
+        else if (key.includes('Comparison ')) {
+            key = item.name.replace('Comparison ', '');
+        }
+        const isComparison = item.name.includes('comparison ') || item.dataKey.includes('comparison_');
+        const name = isComparison ? comparisonLabel : primaryLabel;
+        const color = item.color;
+        const value = props.valueFormatter(item.value);
+        if (!columnsByKey[key]) {
+            columnsByKey[key] = [];
+        }
+        columnsByKey[key].push({ color, name, value });
+    }
+    return columnsByKey;
+}
+/**
+ * Returns the label for the chart tooltip.
+ */
+function getTooltipLabel(props, altTooltipLabel, isDateXAxis) {
+    // TODO: clean me
+    return props.payload.length <= 2 && altTooltipLabel && isDateXAxis
+        ? !isNaN(new Date(altTooltipLabel)) && props.dateFormatter
+            ? props.dateFormatter(altTooltipLabel)
+            : !isNaN(new Date(altTooltipLabel))
+                ? format(new Date(altTooltipLabel), 'MMM yyyy')
+                : altTooltipLabel
+        : !isNaN(new Date(props.label)) && props.dateFormatter
+            ? props.dateFormatter(props.label)
+            : !isNaN(new Date(props.label))
+                ? format(new Date(props.label), 'MMM yyyy')
+                : props.label;
+}
+// The chart tooltip to display for comparison labels (eg. "previous period").
+function ChartTooltipComparison(props) {
+    const isDateXAxis = isDateFormat(props.xAxisFormat);
+    const altTooltipLabel = props.payload[0]?.name.replace('comparison ', '') ||
+        props.payload[0]?.dataKey
+            .replace('comparison_', '')
+            .replaceAll('_', ' ')
+            .toLowerCase();
+    const presetLabel = props.dateFilter?.preset?.label || '';
+    const comparisonLabel = props.dateFilter?.comparisonRange?.value || '';
+    const newRows = reformatComparisonPayload(props, presetLabel, convertComparisonRange(presetLabel, comparisonLabel));
+    return (_jsxs(ChartTooltipFrame, { theme: props.theme, children: [_jsx("div", { style: {
+                    borderStyle: 'solid',
+                    borderBottomColor: props.theme?.borderColor || '#E5E7EB',
+                    background: props.theme?.backgroundColor || 'white',
+                    borderTop: 'none',
+                    borderLeft: 'none',
+                    borderRight: 'none',
+                    borderBottomWidth: 1,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    paddingLeft: '16px',
+                    paddingRight: '16px',
+                    paddingTop: '8px',
+                    paddingBottom: '8px',
+                }, children: _jsx("p", { style: {
+                        textAlign: 'left',
+                        marginTop: 0,
+                        marginBottom: 0,
+                        fontFamily: props.theme?.fontFamily,
+                        color: props.theme?.primaryTextColor,
+                        fontSize: props.theme?.fontSizeSmall || '14px',
+                        fontWeight: props.theme?.boldFontWeight || '500',
+                        textTransform: 'capitalize',
+                        paddingTop: 2,
+                        paddingBottom: 2,
+                    }, children: getTooltipLabel(props, altTooltipLabel ?? '', isDateXAxis) }) }), _jsx("div", { style: {
+                    paddingRight: '16px',
+                    paddingLeft: '16px',
+                    paddingTop: '8px',
+                    paddingBottom: '8px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 4,
+                }, children: Object.entries(newRows).map(([key, value], index) => (_jsx(ChartTooltipGroup, { name: key, items: value, theme: props.theme }, `id_${index}`))) })] }));
+}
+export default function ChartTooltip(props) {
+    if (!props.active || !props.payload)
+        return null;
+    if (props.comparison)
+        return _jsx(ChartTooltipComparison, { ...props });
+    if (props.label2)
+        return _jsx(ChartTooltipSecondary, { ...props });
+    return _jsx(ChartTooltipPrimary, { ...props });
+}

package/dist/esm/components/Chart/ChartTooltipFrame.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export default function ChartTooltipFrame({ children, theme, }: {
+    children: React.ReactNode;
+    theme: any;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChartTooltipFrame.d.ts.map

package/dist/esm/components/Chart/ChartTooltipFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltipFrame.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltipFrame.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,QAAQ,EACR,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,GAAG,CAAC;CACZ,2CAmBA"}

package/dist/esm/components/Chart/ChartTooltipFrame.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ChartTooltipFrame({ children, theme, }) {
+    return (_jsx("div", { style: {
+            borderStyle: 'solid',
+            borderColor: theme?.borderColor || '#E5E7EB',
+            overflow: 'hidden',
+            borderWidth: 1,
+            background: theme?.backgroundColor || '#ffffff',
+            borderRadius: '6px',
+            zIndex: 40,
+            display: 'block',
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+        }, children: children }));
+}

package/dist/esm/components/Chart/ChartTooltipGroup.d.ts

@@ -0,0 +1,11 @@
+export interface ChartTooltipGroupProps {
+    name: string;
+    items: {
+        color: string;
+        name: string;
+        value: any;
+    }[];
+    theme: any;
+}
+export default function ChartTooltipGroup({ name, items, theme, }: ChartTooltipGroupProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChartTooltipGroup.d.ts.map

package/dist/esm/components/Chart/ChartTooltipGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltipGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltipGroup.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,GAAG,CAAA;KAAE,EAAE,CAAC;IACrD,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,IAAI,EACJ,KAAK,EACL,KAAK,GACN,EAAE,sBAAsB,2CAuCxB"}

package/dist/esm/components/Chart/ChartTooltipGroup.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ChartTooltipRow from './ChartTooltipRow';
+export default function ChartTooltipGroup({ name, items, theme, }) {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: '100%',
+            paddingTop: 2,
+            paddingBottom: 2,
+            marginRight: '24px',
+        }, children: [_jsx("p", { style: {
+                    textAlign: 'left',
+                    marginTop: 0,
+                    marginBottom: 0,
+                    fontFamily: theme?.fontFamily,
+                    color: theme?.primaryTextColor,
+                    fontSize: theme?.fontSizeSmall || '14px',
+                    fontWeight: theme?.boldFontWeight || '500',
+                    paddingTop: 2,
+                    paddingBottom: 2,
+                    textTransform: 'capitalize',
+                }, children: name.replaceAll('_', ' ').toLowerCase() }), items.map(({ color, value, name }, idx) => (_jsx(ChartTooltipRow, { value: value, name: name, color: color, theme: theme }, `id-${idx}`)))] }));
+}

package/dist/esm/components/Chart/ChartTooltipRow.d.ts

@@ -0,0 +1,8 @@
+export interface ChartTooltipRowProps {
+    value: string;
+    name: string;
+    color: string;
+    theme: any;
+}
+export default function ChartTooltipRow({ value, name, color, theme, }: ChartTooltipRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ChartTooltipRow.d.ts.map

package/dist/esm/components/Chart/ChartTooltipRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltipRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltipRow.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,GACN,EAAE,oBAAoB,2CA2DtB"}