@quillsql/react 2.15.2 → 2.15.4

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

@@ -1,155 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.hexToRgbaWith10PercentAlpha = hexToRgbaWith10PercentAlpha;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const valueFormatter_1 = require("../../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);
-}
-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_1.default.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 ((0, jsx_runtime_1.jsx)("div", { style: {
-                display: 'flex',
-                flex: '1 0 auto',
-                // height: '100%',
-                margin: 'auto',
-                justifyContent: 'center',
-                alignItems: 'center',
-                fontSize: 13,
-                fontFamily: theme?.fontFamily,
-                color: theme.secondaryTextColor,
-                ...containerStyle,
-            }, className: className, children: "No results" }));
-    }
-    return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)("div", { style: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                boxSizing: 'content-box',
-                overflow: scrollable ? 'scroll' : 'hidden',
-                width: '100%',
-                height: '100%',
-            }, children: [(0, jsx_runtime_1.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 ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)("div", { style: {
-                                        boxSizing: 'content-box',
-                                        position: 'absolute',
-                                        maxWidth: '100%',
-                                        display: 'flex',
-                                        marginLeft: '8px',
-                                    }, children: (0, jsx_runtime_1.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: (0, valueFormatter_1.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 && ((0, jsx_runtime_1.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"] }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                        boxSizing: 'content-box',
-                        textAlign: 'right',
-                        minWidth: 'min-content',
-                        paddingLeft: 10,
-                    }, children: data.slice(0, NUM_TO_SHOW).map((item, idx) => ((0, jsx_runtime_1.jsx)("div", { style: {
-                            boxSizing: 'content-box',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'flex-end',
-                            marginBottom: idx === data.length - 1 ? 0 : '8px',
-                            height: '36px',
-                        }, children: (0, jsx_runtime_1.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: (0, valueFormatter_1.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))) })] }) }));
-});
-exports.default = BarList;

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

@@ -1,13 +0,0 @@
-import { CSSProperties } from 'react';
-export default function ChartError({ errorMessage, containerStyle, }: {
-    errorMessage: string;
-    containerStyle?: CSSProperties;
-}): 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/cjs/components/Chart/ChartError.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChartError.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartError.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAc,MAAM,OAAO,CAAC;AAIlD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,YAAsC,EACtC,cAAc,GACf,EAAE;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC,GAAG,GAAG,CAAC,OAAO,CAsCd;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,CAsDd"}

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

@@ -1,67 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = ChartError;
-exports.QuillChartErrorWithAction = QuillChartErrorWithAction;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const UiComponents_1 = require("../UiComponents");
-const Context_1 = require("../../Context");
-function ChartError({ errorMessage = 'Failed to fetch data.', containerStyle, }) {
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            boxSizing: 'content-box',
-            height: '100%',
-            width: '100%',
-            ...containerStyle,
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                height: containerStyle?.height || '100%',
-                width: '100%',
-                boxSizing: 'border-box',
-                borderRadius: 8,
-                border: '1px solid rgb(229, 229, 229)',
-                overflow: 'hidden',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                    paddingLeft: 12,
-                    paddingRight: 12,
-                    fontSize: 13,
-                    color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
-                    fontFamily: theme?.fontFamily,
-                }, children: errorMessage }) }) }));
-}
-function QuillChartErrorWithAction({ className, containerStyle, label = 'Failed to fetch data.', onClick, ButtonComponent = UiComponents_1.MemoizedButton, }) {
-    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            boxSizing: 'content-box',
-            height: '100%',
-            width: '100%',
-            ...containerStyle,
-        }, className: className, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                height: containerStyle?.height || '100%',
-                width: '100%',
-                boxSizing: 'border-box',
-                borderRadius: 8,
-                border: '1px solid rgb(229, 229, 229)',
-                overflow: 'hidden',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-            }, children: [(0, jsx_runtime_1.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('Virtual Table Error:') && ((0, jsx_runtime_1.jsx)(ButtonComponent, { label: "Edit Virtual Table", onClick: () => {
-                        const regex = /'([^']+)'/;
-                        const matches = regex.exec(label);
-                        if (matches && matches.length > 1) {
-                            matches[1];
-                            onClick(matches[1]);
-                            return;
-                        }
-                        onClick(undefined);
-                    } }))] }) }));
-}

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

@@ -1,8 +0,0 @@
-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/cjs/components/Chart/ChartSkeleton.d.ts.map

@@ -1 +0,0 @@
-{"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/cjs/components/Chart/ChartSkeleton.js

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltip.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEjD,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,cAAc,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACtD,aAAa,EAAE,GAAG,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,GAAG,CAAC;CACZ,CAAC;AAwQF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,kDAI5D"}

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

@@ -1,206 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = ChartTooltip;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const date_fns_1 = require("date-fns");
-const ChartTooltipFrame_1 = __importDefault(require("./ChartTooltipFrame"));
-const ChartTooltipRow_1 = __importDefault(require("./ChartTooltipRow"));
-const ChartTooltipGroup_1 = __importDefault(require("./ChartTooltipGroup"));
-const dates_1 = require("../../utils/dates");
-// The chart tooltip to display for primary labels (ie. not label2).
-const ChartTooltipPrimary = (props) => ((0, jsx_runtime_1.jsxs)(ChartTooltipFrame_1.default, { theme: props.theme, children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.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?.fontWeightBold || '500',
-                    paddingTop: 2,
-                    paddingBottom: 2,
-                }, children: !isNaN(new Date(props.label)) && props.dateFormatter
-                    ? props.dateFormatter(props.label)
-                    : !isNaN(new Date(props.label))
-                        ? (0, date_fns_1.format)(new Date(props.label), 'MMM yyyy')
-                        : props.label }) }), (0, jsx_runtime_1.jsx)("div", { style: {
-                paddingRight: '16px',
-                paddingLeft: '16px',
-                paddingTop: '8px',
-                paddingBottom: '8px',
-            }, children: props.payload.map(({ color, value, name }, idx) => ((0, jsx_runtime_1.jsx)(ChartTooltipRow_1.default, { value: props.valueFormatter(value, name), name: name, color: color || 'black', theme: props.theme, hideDot: props.hideDot }, `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 = (0, dates_1.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 itemName = item.name;
-            if (!itemName)
-                return;
-            const isComparison = itemName.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 = (0, date_fns_1.subDays)(new Date(primaryDate), days + 1);
-            const date = item.payload[nameKey] ?? (0, date_fns_1.format)(compDate, props.xAxisFormat);
-            const name = props.dateFormatter(date);
-            const color = item.color;
-            const value = props.valueFormatter(item.value, item.name);
-            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 || typeof key !== 'string') {
-            return;
-        }
-        if (key.includes('comparison_')) {
-            key = key.replace('comparison_', '');
-        }
-        else if (key.includes('Comparison ')) {
-            key = key.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, item.name);
-        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))
-                ? (0, date_fns_1.format)(new Date(altTooltipLabel), 'MMM yyyy')
-                : altTooltipLabel
-        : !isNaN(new Date(props.label)) && props.dateFormatter
-            ? props.dateFormatter(props.label)
-            : !isNaN(new Date(props.label))
-                ? (0, date_fns_1.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 = (0, dates_1.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, (0, dates_1.convertComparisonRange)(presetLabel, comparisonLabel)) ?? {};
-    return ((0, jsx_runtime_1.jsxs)(ChartTooltipFrame_1.default, { theme: props.theme, children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.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?.fontWeightBold || '500',
-                        textTransform: 'capitalize',
-                        paddingTop: 2,
-                        paddingBottom: 2,
-                    }, children: getTooltipLabel(props, altTooltipLabel ?? '', isDateXAxis) }) }), (0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsx)(ChartTooltipGroup_1.default, { name: key, items: value, theme: props.theme, hideDot: props.hideDot }, `id_${index}`))) })] }));
-}
-function ChartTooltip(props) {
-    if (!props.active || !props.payload)
-        return null;
-    if (props.comparison)
-        return (0, jsx_runtime_1.jsx)(ChartTooltipComparison, { ...props });
-    return (0, jsx_runtime_1.jsx)(ChartTooltipPrimary, { ...props });
-}

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

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

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

@@ -1 +0,0 @@
-{"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/cjs/components/Chart/ChartTooltipFrame.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = ChartTooltipFrame;
-const jsx_runtime_1 = require("react/jsx-runtime");
-function ChartTooltipFrame({ children, theme, }) {
-    return ((0, jsx_runtime_1.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/cjs/components/Chart/ChartTooltipGroup.d.ts

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

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

@@ -1 +0,0 @@
-{"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;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAe,GAChB,EAAE,sBAAsB,2CAwCxB"}

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

@@ -1,29 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = ChartTooltipGroup;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ChartTooltipRow_1 = __importDefault(require("./ChartTooltipRow"));
-function ChartTooltipGroup({ name, items, theme, hideDot = false, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { style: {
-            display: 'flex',
-            flexDirection: 'column',
-            width: '100%',
-            paddingTop: 2,
-            paddingBottom: 2,
-            marginRight: '24px',
-        }, children: [(0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsx)(ChartTooltipRow_1.default, { value: value, name: name, color: color, theme: theme, hideDot: hideDot }, `id-${idx}`)))] }));
-}

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

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

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

@@ -1 +0,0 @@
-{"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;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,KAAK,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAe,GAChB,EAAE,oBAAoB,2CA6DtB"}