@quillsql/react 2.10.29 → 2.10.31

package/dist/esm/assets/XCircleIcon.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const XCircleIcon = ({ ...props }) => (_jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }));
-export default XCircleIcon;

package/dist/esm/assets/XIcon.d.ts

@@ -1,5 +0,0 @@
-declare const XIcon: ({ ...props }: {
-    [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export default XIcon;
-//# sourceMappingURL=XIcon.d.ts.map

package/dist/esm/assets/XIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"XIcon.d.ts","sourceRoot":"","sources":["../../../src/assets/XIcon.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,KAAK;;6CAcV,CAAC;AACF,eAAe,KAAK,CAAC"}

package/dist/esm/assets/XIcon.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const XIcon = ({ ...props }) => (_jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", height: "20", width: "20", children: _jsx("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }));
-export default XIcon;

package/dist/esm/assets/index.d.ts

@@ -1,22 +0,0 @@
-export { default as ArrowDownHeadIcon } from './ArrowDownHeadIcon';
-export { default as ArrowDownRightIcon } from './ArrowDownRightIcon';
-export { default as ArrowDownIcon } from './ArrowDownIcon';
-export { default as ArrowRightIcon } from './ArrowRightIcon';
-export { default as ArrowRightHeadIcon } from './ArrowRightHeadIcon';
-export { default as ArrowLeftHeadIcon } from './ArrowLeftHeadIcon';
-export { default as DoubleArrowLeftHeadIcon } from './DoubleArrowLeftHeadIcon';
-export { default as DoubleArrowRightHeadIcon } from './DoubleArrowRightHeadIcon';
-export { default as ArrowUpHeadIcon } from './ArrowUpHeadIcon';
-export { default as ArrowUpIcon } from './ArrowUpIcon';
-export { default as ArrowUpRightIcon } from './ArrowUpRightIcon';
-export { default as CalendarIcon } from './CalendarIcon';
-export { default as CalendarNormalIcon } from './CalendarNormalIcon';
-export { default as ExclamationFilledIcon } from './ExclamationFilledIcon';
-export { default as LoadingSpinner } from './LoadingSpinner';
-export { default as SearchIcon } from './SearchIcon';
-export { default as XCircleIcon } from './XCircleIcon';
-export { default as RefreshIcon } from './RefreshIcon';
-export { default as FilterIcon } from './FilterIcon';
-export { default as UpLeftArrowsIcon } from './UpLeftArrowsIcon';
-export { default as XIcon } from './XIcon';
-//# sourceMappingURL=index.d.ts.map

package/dist/esm/assets/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/assets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/esm/assets/index.js

@@ -1,21 +0,0 @@
-export { default as ArrowDownHeadIcon } from './ArrowDownHeadIcon';
-export { default as ArrowDownRightIcon } from './ArrowDownRightIcon';
-export { default as ArrowDownIcon } from './ArrowDownIcon';
-export { default as ArrowRightIcon } from './ArrowRightIcon';
-export { default as ArrowRightHeadIcon } from './ArrowRightHeadIcon';
-export { default as ArrowLeftHeadIcon } from './ArrowLeftHeadIcon';
-export { default as DoubleArrowLeftHeadIcon } from './DoubleArrowLeftHeadIcon';
-export { default as DoubleArrowRightHeadIcon } from './DoubleArrowRightHeadIcon';
-export { default as ArrowUpHeadIcon } from './ArrowUpHeadIcon';
-export { default as ArrowUpIcon } from './ArrowUpIcon';
-export { default as ArrowUpRightIcon } from './ArrowUpRightIcon';
-export { default as CalendarIcon } from './CalendarIcon';
-export { default as CalendarNormalIcon } from './CalendarNormalIcon';
-export { default as ExclamationFilledIcon } from './ExclamationFilledIcon';
-export { default as LoadingSpinner } from './LoadingSpinner';
-export { default as SearchIcon } from './SearchIcon';
-export { default as XCircleIcon } from './XCircleIcon';
-export { default as RefreshIcon } from './RefreshIcon';
-export { default as FilterIcon } from './FilterIcon';
-export { default as UpLeftArrowsIcon } from './UpLeftArrowsIcon';
-export { default as XIcon } from './XIcon';

package/dist/esm/components/Banner/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export default function Banner({ dashboardItemName, dashboardName, onExit, style, }: any): JSX.Element | null;
-//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/Banner/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Banner/index.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,iBAAiB,EACjB,aAAa,EACb,MAAM,EACN,KAAK,GACN,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA4D1B"}

package/dist/esm/components/Banner/index.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function Banner({ dashboardItemName, dashboardName, onExit, style, }) {
-    return (_jsx("div", { id: "quill-edit-banner", style: {
-            zIndex: 100,
-            display: 'flex',
-            paddingTop: '0.625rem',
-            paddingBottom: '0.625rem',
-            paddingLeft: '24px',
-            paddingRight: '24px',
-            alignItems: 'center',
-            backgroundColor: '#111827',
-            ...style,
-        }, children: _jsxs("p", { style: {
-                fontSize: '14px',
-                color: '#ffffff',
-            }, children: [_jsx("strong", { style: { fontWeight: 600 }, children: "Edit Mode" }), _jsx("svg", { viewBox: "0 0 2 2", style: {
-                        display: 'inline',
-                        marginLeft: '8px',
-                        marginRight: '8px',
-                        width: '2px',
-                        height: '2px',
-                        fill: 'currentColor',
-                    }, "aria-hidden": "true", children: _jsx("circle", { cx: 1, cy: 1, r: 1 }) }), `You are currently editing `, _jsx("strong", { style: { fontWeight: 600 }, children: dashboardItemName }), ` on the `, _jsx("strong", { style: { fontWeight: 600 }, children: dashboardName }), ` dashboard.`] }) }));
-}

package/dist/esm/components/BigModal/BigModal.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { HorizontalPosition } from '../../lib/inputTypes';
-export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
-    showModal: boolean;
-    setShowModal: React.Dispatch<React.SetStateAction<boolean>> | ((nextState: boolean) => void);
-    parentRef?: React.RefObject<HTMLElement>;
-    width?: number;
-    maxHeight?: string;
-    anchorPosition?: HorizontalPosition;
-    children: React.ReactNode;
-    theme: any;
-}
-declare const BigModal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
-export default BigModal;
-//# sourceMappingURL=BigModal.d.ts.map

package/dist/esm/components/BigModal/BigModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BigModal.d.ts","sourceRoot":"","sources":["../../../../src/components/BigModal/BigModal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG1D,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EACR,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,GAC7C,CAAC,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,QAAA,MAAM,QAAQ,mFAoFZ,CAAC;AAEH,eAAe,QAAQ,CAAC"}

package/dist/esm/components/BigModal/BigModal.js

@@ -1,62 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-nocheck
-/* eslint-disable react/display-name */
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useOnClickOutside, useOnWindowResize } from '../../hooks';
-import { mergeRefs } from '../../lib';
-const BigModal = React.forwardRef((props, ref) => {
-    const { showModal, setShowModal, parentRef, width, maxHeight = '18rem', children, className, theme, ...other } = props;
-    const [modalExceedsWindow, setModalExceedsWindow] = useState(false);
-    const modalRef = useRef(null);
-    const checkModalExceedsWindow = useCallback((modalWidth, windowWidth) => {
-        if (!parentRef.current) {
-            return false;
-        }
-        const modalBoundingRight = parentRef.current.getBoundingClientRect().left + modalWidth;
-        return windowWidth - modalBoundingRight < 0;
-    }, [parentRef]);
-    const getAbsoluteSpacing = () => {
-        return modalExceedsWindow ? '0' : '0';
-    };
-    useOnClickOutside(modalRef, e => {
-        // Exclude click on trigger button (e.g. Dropdown Button) from outside click handler
-        const isTriggerElem = parentRef
-            ? parentRef.current?.contains(e.target)
-            : false;
-        if (!isTriggerElem) {
-            setShowModal(false);
-        }
-    });
-    // Execute only when modal is of absolute size
-    useEffect(() => {
-        if (width) {
-            setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
-        }
-    }, [checkModalExceedsWindow, parentRef, width]);
-    useOnWindowResize(() => {
-        if (width) {
-            setModalExceedsWindow(checkModalExceedsWindow(width, window.innerWidth));
-        }
-    });
-    return showModal ? (_jsx("div", { ref: mergeRefs([modalRef, ref]), style: {
-            position: 'absolute',
-            zIndex: 10,
-            overflowY: 'auto',
-            backgroundColor: theme?.backgroundColor || 'white',
-            borderColor: theme?.borderColor || '#E5E7EB',
-            borderTopStyle: 'solid',
-            borderBottomStyle: 'solid',
-            borderLeftStyle: 'solid',
-            borderRightStyle: 'solid',
-            borderTopWidth: 1,
-            borderBottomWidth: 1,
-            borderLeftWidth: 1,
-            borderRightWidth: 1,
-            borderRadius: '0.375rem',
-            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-            top: '50%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-        }, ...other, children: children })) : null;
-});
-export default BigModal;

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

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-export default function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, }: {
-    colors: string[];
-    yAxisFields: any[];
-    data: any[];
-    containerStyle?: React.CSSProperties;
-    xAxisField: string;
-    xAxisLabel: string;
-    xAxisFormat: string;
-    theme: any;
-    comparison: boolean;
-    isStacked: boolean;
-    isAnimationActive: boolean;
-    hideXAxis: boolean;
-    hideYAxis: boolean;
-    hideCartesianGrid: boolean;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=BarChart.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarChart.tsx"],"names":[],"mappings":";AAiBA,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAM,EACN,WAAW,EACX,IAAI,EACJ,cAAc,EACd,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,GAC1B,EAAE;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,2CAkKA"}

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

@@ -1,75 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-nocheck
-import { CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis, Bar, BarChart as ReChartsBarChart, } from 'recharts';
-import { valueFormatter } from '../../utils/valueFormatter';
-import { axisFormatter } from '../../utils/axisFormatter';
-import { selectColor } from '../../utils/color';
-import ChartTooltip from '../../components/Chart/ChartTooltip';
-import getDomain from '../../utils/getDomain';
-import { useEffect, useState } from 'react';
-export default function BarChart({ colors, yAxisFields, data, containerStyle, xAxisField, xAxisFormat, theme, comparison, isStacked, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
-    const [formattedData, setFormattedData] = useState([]);
-    useEffect(() => {
-        if (!data || data.length === 0) {
-            return;
-        }
-        const curData = data.map((d) => {
-            const formatted = { ...d };
-            // NEED TO FORMAT FOR BIG QUERY
-            if (d[xAxisField] && typeof d[xAxisField] === 'object') {
-                formatted[xAxisField] = d[xAxisField].value;
-            }
-            return formatted;
-        });
-        setFormattedData(curData);
-    }, [data]);
-    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,
-            }, children: "No results found for specified time period." }));
-    }
-    return (_jsx("div", { style: {
-            ...containerStyle,
-            boxSizing: 'content-box',
-        }, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsBarChart, { data: formattedData, layout: 'horizontal', children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(YAxis, { width: 44, hide: hideYAxis, axisLine: false, tickLine: false, type: "number", domain: getDomain(data, yAxisFields), tick: { transform: 'translate(-3, 0)' }, style: {
-                            fontSize: '12px',
-                            fontFamily: theme.chartLabelFontFamily,
-                        }, tickFormatter: (tick) => axisFormatter({
-                            value: tick,
-                            field: yAxisFields[0].field || 'what',
-                            fields: yAxisFields,
-                        }) }), _jsx(XAxis, { hide: hideXAxis, dataKey: xAxisField, tick: { transform: 'translate(0, 6)' }, style: {
-                            fontSize: '12px',
-                            fontFamily: theme.chartLabelFontFamily,
-                            marginTop: '20px',
-                        }, tickLine: false, axisLine: false, tickFormatter: (tick) => axisFormatter({
-                            value: tick,
-                            field: xAxisField,
-                            fields: [{ field: xAxisField, format: xAxisFormat }],
-                        }) }), _jsx(Tooltip, { wrapperStyle: { outline: 'none', zIndex: 2 }, isAnimationActive: false, cursor: { fill: '#d1d5db', opacity: '0.15' }, content: ({ active, payload, label }) => {
-                            let label2;
-                            if (comparison &&
-                                payload?.length > 1 &&
-                                payload[0].payload[xAxisField + '2']) {
-                                label2 = payload[0].payload[xAxisField + '2'];
-                            }
-                            return (_jsx(ChartTooltip, { theme: theme, active: active, payload: payload, label: label, label2: label2, dateFormatter: (value) => valueFormatter({
-                                    value,
-                                    field: xAxisField,
-                                    fields: [{ field: xAxisField, format: xAxisFormat }],
-                                }), valueFormatter: (value) => valueFormatter({
-                                    value,
-                                    field: payload[0].dataKey,
-                                    fields: yAxisFields,
-                                }), xAxisFormat: xAxisFormat, xAxisField: xAxisField, colors: colors }));
-                        }, position: { y: 0 } }), yAxisFields.map((elem) => (_jsx(Bar, { name: elem.label, dataKey: elem.field, stackId: isStacked &&
-                            (elem.field?.replace('comparison_', '') ??
-                                'unknown'), type: "linear", fill: selectColor(elem, colors, yAxisFields.findIndex((field) => field.field === elem.field?.replace('comparison_', ''))), isAnimationActive: isAnimationActive }, elem.field)))] }) }) }));
-}

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

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export default function ChartError({ containerStyle }: any): JSX.Element;
-//# sourceMappingURL=ChartError.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ChartError.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartError.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,cAAc,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAoCvE"}

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

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { ThemeContext } from '../../Context';
-export default function ChartError({ containerStyle }) {
-    const [theme] = useContext(ThemeContext);
-    return (_jsx("div", { style: {
-            ...containerStyle,
-            boxSizing: 'content-box',
-            height: '100%',
-        }, children: _jsx("div", { style: {
-                height: containerStyle?.height,
-                width: '100%',
-                boxSizing: 'content-box',
-                borderRadius: 8,
-                overflow: 'hidden',
-            }, children: _jsx("div", { style: {
-                    paddingTop: '60px',
-                    display: 'flex',
-                    flex: '1 0 auto',
-                    margin: 'auto',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    fontSize: 13,
-                    color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
-                }, children: "Failed to fetch data." }) }) }));
-}

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

@@ -1,6 +0,0 @@
-import { CSSProperties } from 'react';
-export interface SkeletonComponentProps {
-    conatinerStyle?: CSSProperties;
-}
-export default function ChartSkeleton({ containerStyle }: any): JSX.Element;
-//# sourceMappingURL=ChartSkeleton.d.ts.map

package/dist/esm/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;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,cAAc,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAyE1E"}

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

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext } from 'react';
-import { ThemeContext } from '../../Context';
-export default function ChartSkeleton({ containerStyle }) {
-    const [theme] = useContext(ThemeContext);
-    return (_jsx("div", { style: {
-            ...containerStyle,
-            boxSizing: 'content-box',
-            height: '100%',
-        }, children: _jsx("div", { style: {
-                height: containerStyle?.height,
-                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

@@ -1,29 +0,0 @@
-export interface ChartTooltipProps {
-    active: boolean | undefined;
-    payload: PayloadItem[];
-    label: string;
-    label2?: string;
-    colors: string[];
-    valueFormatter: any;
-    dateFormatter: any;
-    xAxisFormat: string;
-    xAxisField: string;
-    theme: 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

@@ -1 +0,0 @@
-{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartTooltip.tsx"],"names":[],"mappings":"AAQA,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;CACZ;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;AAoUF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,iBAAiB,kDAM5D"}

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

@@ -1,229 +0,0 @@
-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 { useComparisonRange, useDateFilter } from '../../Context';
-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.dataKey.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 dataKey and use that key as the key in our map.
-    for (const item of props.payload) {
-        const key = item.dataKey.replace('comparison_', '');
-        const isComparison = 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 { comparisonRange } = useComparisonRange();
-    const { dateFilter } = useDateFilter();
-    const isDateXAxis = isDateFormat(props.xAxisFormat);
-    const altTooltipLabel = props.payload[0]?.dataKey
-        .replace('comparison_', '')
-        .replaceAll('_', ' ')
-        .toLowerCase();
-    const newRows = reformatComparisonPayload(props, dateFilter, convertComparisonRange(dateFilter, comparisonRange.text));
-    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) {
-    const { comparisonRange } = useComparisonRange();
-    if (!props.active || !props.payload)
-        return null;
-    if (comparisonRange)
-        return _jsx(ChartTooltipComparison, { ...props });
-    if (props.label2)
-        return _jsx(ChartTooltipSecondary, { ...props });
-    return _jsx(ChartTooltipPrimary, { ...props });
-}

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

@@ -1,6 +0,0 @@
-/// <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

@@ -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,2CAkBA"}