@quillsql/react 2.11.23 → 2.11.25

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

@@ -8,11 +8,8 @@ import ChartTooltip from '../../components/Chart/ChartTooltip';
 import getDomain from '../../utils/getDomain';
 import { useEffect, useState } from 'react';
 import { hashCode } from '../../utils/crypto';
-export default function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', }) {
+export default function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', comparisonLineStyle = 'solid', }) {
     const [formattedData, setFormattedData] = useState([]);
-    if (!yAxisFields || !yAxisFields.length) {
-        return null;
-    }
     useEffect(() => {
         if (!data || data.length === 0) {
             return;
@@ -64,13 +61,13 @@ export default function LineChart({ colors, colorMap = {}, yAxisFields, data, co
         }
         return undefined; // use the default colors from the theme
     };
-    return (_jsx("div", { style: { ...containerStyle }, className: className, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsAreaChart, { data: formattedData, children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), _jsx(XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
+    return (_jsx("div", { style: { ...containerStyle }, className: className, children: _jsx(ResponsiveContainer, { width: "100%", height: '100%', children: _jsxs(ReChartsAreaChart, { data: formattedData, children: [!hideCartesianGrid && (_jsx(CartesianGrid, { horizontal: !hideHorizontalCartesianGrid, vertical: !hideVerticalCartesianGrid, stroke: "#e5e7eb", strokeDasharray: cartesianGridLineStyle === 'dashed' ? '5 5' : undefined })), _jsx(XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
                             fontSize: '12px',
                             fontFamily: theme?.chartLabelFontFamily ||
                                 theme?.fontFamily ||
                                 'Inter; Helvetica',
                             color: theme?.chartLabelColor || '#666666',
-                        }, interval: "preserveStartEnd", tickLine: false, axisLine: false, padding: { left: 10, right: 10 }, minTickGap: 5, tickFormatter: (tick) => {
+                        }, interval: hideSubsequentXAxisTicks ? 999 : 'preserveStartEnd', tickLine: false, axisLine: false, minTickGap: 5, tickFormatter: (tick) => {
                             return axisFormatter({
                                 value: tick,
                                 field: xAxisField,
@@ -82,14 +79,16 @@ export default function LineChart({ colors, colorMap = {}, yAxisFields, data, co
                                 theme?.fontFamily ||
                                 'Inter; Helvetica',
                             color: theme?.chartLabelColor || '#666666',
-                        }, tickFormatter: (value) => axisFormatter({
-                            value,
-                            field: yAxisFields[0].field,
-                            fields: [
-                                ...yAxisFields,
-                                { field: xAxisField, format: xAxisFormat },
-                            ],
-                        }) }), _jsx(Tooltip, { wrapperStyle: { outline: 'none' }, isAnimationActive: false, cursor: { stroke: '#d1d5db', strokeWidth: 1 }, content: ({ active, payload, label }) => {
+                        }, tickFormatter: (value) => yAxisFields && yAxisFields.length > 0
+                            ? axisFormatter({
+                                value,
+                                field: yAxisFields[0].field,
+                                fields: [
+                                    ...yAxisFields,
+                                    { field: xAxisField, format: xAxisFormat },
+                                ],
+                            })
+                            : value }), _jsx(Tooltip, { wrapperStyle: { outline: 'none', zIndex: 2 }, isAnimationActive: false, cursor: { stroke: '#d1d5db', strokeWidth: 1 }, content: ({ active, payload, label }) => {
                             let label2;
                             if (comparison &&
                                 payload?.length > 1 &&
@@ -107,24 +106,26 @@ export default function LineChart({ colors, colorMap = {}, yAxisFields, data, co
                                         ...yAxisFields,
                                         { field: xAxisField, format: xAxisFormat },
                                     ],
-                                }), xAxisFormat: xAxisFormat, xAxisField: xAxisField, colors: colors, theme: theme }));
-                        }, position: { y: 0 } }), yAxisFields.map((elem, index) => {
-                        // hash the color stops so they're stable, valid html ids
-                        const gradientStart = getCustomColor(index, elem.field, 'start') ??
-                            getCustomColor(index, elem.field) ??
-                            selectColor(elem, colors, index);
-                        const gradientStop = getCustomColor(index, elem.field, 'stop') ?? '#00000000';
-                        const uniqueId = `gradient_${hashCode(gradientStart)}_${hashCode(gradientStop)}`;
-                        return (_jsx("defs", { children: _jsxs("linearGradient", { id: uniqueId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: gradientStart, stopOpacity: 0.4 }), _jsx("stop", { offset: "95%", stopColor: gradientStop, stopOpacity: 0 })] }) }, `defs_${uniqueId}_${index}`));
-                    }), yAxisFields.map((elem, index) => {
-                        const gradientStart = hashCode(getCustomColor(index, elem.field, 'start') ??
-                            getCustomColor(index, elem.field) ??
-                            selectColor(elem, colors, index));
-                        const gradientStop = hashCode(getCustomColor(index, elem.field, 'stop') ?? '#00000000');
-                        const uniqueId = `gradient_${gradientStart}_${gradientStop}`;
-                        return (_jsx(Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: getCustomColor(index, elem.field) ??
-                                selectColor(elem, colors, index), fill: `url(#${uniqueId})`, strokeWidth: 2, dot: false, strokeDasharray: comparison && comparisonLineStyle === 'dashed' && index > 0
-                                ? '5 5'
-                                : undefined, isAnimationActive: isAnimationActive }, elem.field));
-                    })] }) }) }));
+                                }), xAxisFormat: xAxisFormat, xAxisField: xAxisField, colors: colors, theme: theme, comparison: comparison }));
+                        }, position: { y: 0 } }), yAxisFields &&
+                        yAxisFields.map((elem, index) => {
+                            // hash the color stops so they're stable, valid html ids
+                            const gradientStart = getCustomColor(index, elem.field, 'start') ??
+                                getCustomColor(index, elem.field) ??
+                                selectColor(elem, colors, index);
+                            const gradientStop = getCustomColor(index, elem.field, 'stop') ?? '#00000000';
+                            const uniqueId = `gradient_${hashCode(gradientStart)}_${hashCode(gradientStop)}`;
+                            return (_jsx("defs", { children: _jsxs("linearGradient", { id: uniqueId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: gradientStart, stopOpacity: 0.4 }), _jsx("stop", { offset: "95%", stopColor: gradientStop, stopOpacity: 0 })] }) }, `defs_${uniqueId}_${index}`));
+                        }), yAxisFields &&
+                        yAxisFields.map((elem, index) => {
+                            const gradientStart = hashCode(getCustomColor(index, elem.field, 'start') ??
+                                getCustomColor(index, elem.field) ??
+                                selectColor(elem, colors, index));
+                            const gradientStop = hashCode(getCustomColor(index, elem.field, 'stop') ?? '#00000000');
+                            const uniqueId = `gradient_${gradientStart}_${gradientStop}`;
+                            return (_jsx(Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: getCustomColor(index, elem.field) ??
+                                    selectColor(elem, colors, index), fill: `url(#${uniqueId})`, strokeWidth: 2, dot: false, strokeDasharray: comparison && comparisonLineStyle === 'dashed' && index > 0
+                                    ? '5 5'
+                                    : undefined, isAnimationActive: isAnimationActive }, elem.field));
+                        })] }) }) }));
 }

package/dist/esm/components/Dashboard/DashboardFilter.d.ts

@@ -10,7 +10,7 @@ type SelectComponentType = ({ label, value, options, onChange, width, }: {
     }[];
     onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
 }) => JSX.Element;
-type DateRangePickerComponentType = ({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, }: DateRangePickerComponentProps) => JSX.Element;
+type DateRangePickerComponentType = ({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, selectWidth, }: DateRangePickerComponentProps) => JSX.Element;
 interface DashboardFilterProps {
     filter: any;
     onChangeFilter: (...args: any[]) => void;

package/dist/esm/components/Dashboard/DashboardFilter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAEhG,KAAK,mBAAmB,GAAG,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE,KAAK,GAAG,CAAC,OAAO,CAAC;AAElB,KAAK,4BAA4B,GAAG,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,GACP,EAAE,6BAA6B,KAAK,GAAG,CAAC,OAAO,CAAC;AAEjD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,GAAG,CAAC;IACZ,cAAc,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACzC,eAAe,EACX,mBAAmB,GACnB,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;IACnD,wBAAwB,EACpB,4BAA4B,GAC5B,KAAK,CAAC,mBAAmB,CAAC,4BAA4B,CAAC,CAAC;IAC5D,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,cAAc,EACd,eAAe,EACf,wBAAwB,EACxB,KAAK,GACN,EAAE,oBAAoB,kDAiHtB"}
+{"version":3,"file":"DashboardFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAEhG,KAAK,mBAAmB,GAAG,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE,KAAK,GAAG,CAAC,OAAO,CAAC;AAElB,KAAK,4BAA4B,GAAG,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,WAAW,GACZ,EAAE,6BAA6B,KAAK,GAAG,CAAC,OAAO,CAAC;AAEjD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,GAAG,CAAC;IACZ,cAAc,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACzC,eAAe,EACX,mBAAmB,GACnB,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;IACnD,wBAAwB,EACpB,4BAA4B,GAC5B,KAAK,CAAC,mBAAmB,CAAC,4BAA4B,CAAC,CAAC;IAC5D,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,cAAc,EACd,eAAe,EACf,wBAAwB,EACxB,KAAK,GACN,EAAE,oBAAoB,kDAgHtB"}

package/dist/esm/components/Dashboard/DashboardFilter.js

@@ -45,27 +45,27 @@ export function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateR
                         onChangeFilter(filter, { preset: e.target.value });
                     }, presetOptions: filter.options.map((option) => {
                         return { label: option.label, value: option.label };
-                    }) }), comparisonRange && (_jsx("div", { children: _jsxs("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                        }, children: [_jsx("div", { style: {
-                                    paddingLeft: 16,
-                                    paddingRight: 12,
-                                    color: theme?.secondaryTextColor,
-                                    fontFamily: theme?.fontFamily,
-                                    fontSize: 14,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    flex: 1,
-                                    minWidth: 80,
-                                    justifyContent: 'center',
-                                }, children: "compared to" }), _jsx(SelectComponent, { value: comparisonRange.value, onChange: (e) => {
-                                    onChangeFilter(filter, null, COMPARISON_OPTIONS.find((option) => option.value === e.target.value));
-                                }, options: COMPARISON_OPTIONS.map((compareOption) => ({
-                                    value: compareOption.value,
-                                    label: compareOption.text,
-                                })), width: 200 })] }) }))] }));
+                    }), selectWidth: 200 }), comparisonRange && (_jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                    }, children: [_jsx("div", { style: {
+                                paddingLeft: 16,
+                                paddingRight: 12,
+                                color: theme?.secondaryTextColor,
+                                fontFamily: theme?.fontFamily,
+                                fontSize: 14,
+                                display: 'flex',
+                                alignItems: 'center',
+                                flex: 1,
+                                minWidth: 80,
+                                justifyContent: 'center',
+                            }, children: "compared to" }), _jsx(SelectComponent, { value: comparisonRange.value, onChange: (e) => {
+                                onChangeFilter(filter, null, COMPARISON_OPTIONS.find((option) => option.value === e.target.value));
+                            }, options: COMPARISON_OPTIONS.map((compareOption) => ({
+                                value: compareOption.value,
+                                label: compareOption.text,
+                            })), width: 200 })] }))] }));
     }
     return null;
 }

package/dist/esm/components/Dashboard/DataLoader.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
+import { DashboardItem } from '../../Dashboard';
+import { QuillTheme } from '../../QuillProvider';
 export type DataLoaderChildProps = {
     isLoading: boolean;
     error?: string;
@@ -7,4 +9,26 @@ export default function DataLoader({ id, children, }: {
     id: string;
     children: ({ isLoading, error }: DataLoaderChildProps) => JSX.Element;
 }): JSX.Element;
+type ColorMapType = {
+    [key: string]: {
+        primary: string;
+        comparison?: string;
+        primaryGradientStart?: string;
+        primaryGradientStop?: string;
+        comparisonGradientStart?: string;
+        comparisonGradientStop?: string;
+    };
+};
+export type ChartDataLoaderChildProps = {
+    isLoading: boolean;
+    error?: string;
+    data?: any;
+};
+export declare const ChartDataLoader: ({ id, children, hideDateRangeFilter, }: {
+    id: string;
+    hideDateRangeFilter?: boolean | undefined;
+    mapColorsToFields?: ((_dashboardItem: DashboardItem, _theme: QuillTheme) => ColorMapType) | undefined;
+    children: ({ isLoading, error, data, }: ChartDataLoaderChildProps) => JSX.Element;
+}) => JSX.Element;
+export {};
 //# sourceMappingURL=DataLoader.d.ts.map

package/dist/esm/components/Dashboard/DataLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAUA,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,EAAE,EACF,QAAQ,GACT,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACvE,GAAG,GAAG,CAAC,OAAO,CA+Ed"}
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAIjD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,EAAE,EACF,QAAQ,GACT,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACvE,GAAG,GAAG,CAAC,OAAO,CA+Ed;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC;AAIF,eAAO,MAAM,eAAe;QAKtB,MAAM;;0CAGQ,aAAa,UACrB,UAAU,KACf,YAAY;4CAKd,yBAAyB,KAAK,WAAW;MAC1C,WA0FH,CAAC"}

package/dist/esm/components/Dashboard/DataLoader.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect, useState } from 'react';
 import { didFiltersChange } from '../../Chart';
 import { ClientContext, DashboardContext, DashboardFiltersContext, } from '../../Context';
+import { useTheme } from '../../hooks';
 import { getData } from '../../utils/dataFetcher';
 import { mergeComparisonRange } from '../../utils/merge';
 export default function DataLoader({ id, children, }) {
@@ -73,3 +74,84 @@ export default function DataLoader({ id, children, }) {
     }, [dashboardFilters, client, id]);
     return _jsx(_Fragment, { children: children({ isLoading, error }) });
 }
+// The same data-loader pattern as above, but with special logic for charts
+// At some point these may be able to get merged into one function.
+export const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, }) => {
+    const { dispatch, dashboard } = useContext(DashboardContext);
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const [initialLoad, setInitialLoad] = useState(true);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(undefined);
+    const [isComparison, setIsComparison] = useState(false);
+    const [client, _] = useContext(ClientContext);
+    const theme = useTheme();
+    useEffect(() => {
+        async function getChartOptions() {
+            setLoading(true);
+            if (!didFiltersChange(dashboard[id], dashboardFilters)) {
+                setLoading(false);
+                return;
+            }
+            try {
+                // Remove extra fields on each filter so we don't confuse the backend.
+                const allowDateRange = !hideDateRangeFilter;
+                const minimalFilters = Object.values(dashboardFilters).length
+                    ? Object.values(dashboardFilters)
+                        .filter((f) => allowDateRange || f.filterType !== 'date_range')
+                        .map((filter) => {
+                        const newFilter = { ...filter };
+                        if (newFilter.filterType === 'date_range') {
+                            delete newFilter['field'];
+                            delete newFilter['options'];
+                            delete newFilter['selectedValue'];
+                        }
+                        return newFilter;
+                    })
+                    : [];
+                const hostedBody = {
+                    metadata: {
+                        dashboardItemId: id,
+                        orgId: client.customerId || '*',
+                        clientId: client.publicKey,
+                        task: 'item',
+                        databaseType: client.databaseType,
+                        filters: minimalFilters,
+                    },
+                };
+                const cloudBody = {
+                    id: id,
+                    filters: minimalFilters,
+                };
+                setError(undefined);
+                const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
+                if (resp && resp.name !== 'error' && !resp.errorMessage) {
+                    setIsComparison(!!resp.compareRows?.length);
+                    if (resp.compareRows) {
+                        mergeComparisonRange(resp);
+                    }
+                    const dashboardItem = { ...resp, filtersApplied: dashboardFilters };
+                    dispatch({
+                        type: 'UPDATE_DASHBOARD_ITEM',
+                        id: id,
+                        data: dashboardItem,
+                    });
+                }
+                else {
+                    setError(resp?.errorMessage);
+                }
+                setLoading(false);
+            }
+            catch (e) {
+                console.log('Error fetching chart: ', e);
+                setLoading(false);
+            }
+        }
+        setInitialLoad(false);
+        getChartOptions();
+    }, [dashboardFilters, client, id]);
+    return children({
+        isLoading: loading || initialLoad,
+        data: loading || initialLoad ? undefined : dashboard[id],
+        error,
+    });
+};

package/dist/esm/components/Dashboard/MetricComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AASrD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,aAAa,EACb,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA6QlC"}
+{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AASrD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,aAAa,EACb,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAqRlC"}

package/dist/esm/components/Dashboard/MetricComponent.js

@@ -96,7 +96,10 @@ export default function QuillMetricComponent({ dashboardItem, onClick, error, is
                                 color: theme.secondaryTextColor,
                                 maxWidth: '100%',
                                 width: '100%',
-                            }, children: "No results" })) : (_jsx("div", { style: {
+                            }, children: "No results" })) : !pivotTable && rows && rows.length > 100 ? (_jsx(ChartError, { containerStyle: {
+                                maxHeight: '78px',
+                                height: '100%',
+                            }, label: "Charts can only display 100 rows. Please add a pivot or modify the query." })) : (_jsx("div", { style: {
                                 padding: 0,
                                 height: '100%',
                                 width: '100%',

package/dist/esm/components/QuillSelect.js

@@ -19,7 +19,7 @@ export function QuillSelectComponent({ options, value, width, onChange, label, }
             minWidth: width,
         }, children: [label && (_jsx("div", { style: {
                     fontSize: 14,
-                    color: theme.primaryTextColor,
+                    color: theme.secondaryTextColor,
                     fontFamily: theme.fontFamily,
                     paddingBottom: 5,
                     fontWeight: 600,

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

@@ -1 +1 @@
-{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,gBAA0C,EAC1C,WAAgB,EAChB,eAA8B,EAC9B,WAAW,GACZ,EAAE,mBAAmB,2CA0ZrB"}
+{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,0BAA0B,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,gBAA0C,EAC1C,WAAgB,EAChB,eAA8B,EAC9B,WAAW,GACZ,EAAE,mBAAmB,2CAyZrB"}

package/dist/esm/components/QuillTable.js

@@ -54,6 +54,7 @@ export default function QuillTable({ rows, columns, isLoading, showDownloadCSVBu
     };
     if (isLoading || isPaginating) {
         return (_jsx("div", { style: {
+                height: '100%',
                 ...containerStyle,
             }, className: className, children: _jsx(LoadingComponent, {}) }));
     }
@@ -69,7 +70,7 @@ export default function QuillTable({ rows, columns, isLoading, showDownloadCSVBu
                 width: '100%',
                 overflow: 'auto',
                 borderRadius: 6,
-                border: '1px solid rgb(229, 231, 235)',
+                border: '1px solid #E7E7E7',
                 padding: 0,
                 margin: 0,
                 boxSizing: 'border-box',
@@ -95,9 +96,9 @@ export default function QuillTable({ rows, columns, isLoading, showDownloadCSVBu
                                                 cursor: 'pointer',
                                                 background: 'rgb(249, 250, 251)',
                                                 borderRight: index + 1 === columns.length
-                                                    ? '0px solid rgb(229, 231, 235)'
-                                                    : '1px solid rgb(229, 231, 235)',
-                                                borderBottom: '1px solid rgb(229, 231, 235)',
+                                                    ? '0px solid #E7E7E7'
+                                                    : '1px solid #E7E7E7',
+                                                borderBottom: '1px solid #E7E7E7',
                                                 whiteSpace: 'nowrap',
                                                 alignItems: 'center',
                                                 overflowX: 'visible',
@@ -154,14 +155,12 @@ export default function QuillTable({ rows, columns, isLoading, showDownloadCSVBu
                                                 textOverflow: 'ellipsis',
                                                 minHeight: '36px',
                                                 borderRight: columnIndex + 1 === columns.length
-                                                    ? '0px solid rgb(229, 231, 235)'
-                                                    : '1px solid rgb(229, 231, 235)',
+                                                    ? '0px solid #E7E7E7'
+                                                    : '1px solid #E7E7E7',
                                                 overflow: 'hidden',
-                                                borderTop: rowIndex > 0
-                                                    ? '1px solid rgb(229, 231, 235)'
-                                                    : undefined,
-                                                borderBottom: rowIndex === rows?.length - 1
-                                                    ? '1px solid rgb(229, 231, 235)'
+                                                borderTop: rowIndex > 0 ? '1px solid #E7E7E7' : undefined,
+                                                borderBottom: rowIndex === activeRows?.length - 1
+                                                    ? '1px solid #E7E7E7'
                                                     : undefined,
                                                 userSelect: 'none',
                                             }, children: _jsx("div", { style: {
@@ -193,7 +192,7 @@ export default function QuillTable({ rows, columns, isLoading, showDownloadCSVBu
                             display: 'flex',
                             minWidth: '100px',
                             height: 38,
-                            borderTop: '1px solid rgb(229, 231, 235)',
+                            borderTop: '1px solid #E7E7E7',
                             background: '#F9FAFB',
                             width: '100%',
                         }, children: _jsxs("div", { style: {

package/dist/esm/components/ReportBuilder/{AddColumnPopover.d.ts → AddColumnModal.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TextInputComponentProps } from '../UiComponents';
-export default function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, TextInput, SelectColumn, SecondaryButton, Button, }: {
+export default function AddColumnModal({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, TextInput, SelectColumn, SecondaryButton, Button, ColumnSearchEmptyState, }: {
     onSave: any;
     orderedColumnNames: any;
     setOrderedColumnNames: any;
@@ -27,5 +27,6 @@ export default function AddColumnPopover({ onSave, orderedColumnNames, setOrdere
     }) => JSX.Element;
     SecondaryButton: any;
     Button: any;
+    ColumnSearchEmptyState: () => JSX.Element;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=AddColumnPopover.d.ts.map
+//# sourceMappingURL=AddColumnModal.d.ts.map

package/dist/esm/components/ReportBuilder/AddColumnModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddColumnModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddColumnModal.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAEL,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,MAAM,EACN,kBAAkB,EAClB,qBAAqB,EACrB,eAAe,EACf,kBAAkB,EAClB,oBAAoB,EACpB,aAAa,EACb,YAAY,EACZ,OAAO,EACP,UAAU,EACV,KAAK,EACL,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,MAAM,EACN,sBAAoD,GACrD,EAAE;IACD,MAAM,EAAE,GAAG,CAAC;IACZ,kBAAkB,EAAE,GAAG,CAAC;IACxB,qBAAqB,EAAE,GAAG,CAAC;IAC3B,eAAe,EAAE,GAAG,CAAC;IACrB,kBAAkB,EAAE,GAAG,CAAC;IACxB,oBAAoB,EAAE,GAAG,CAAC;IAC1B,aAAa,EAAE,GAAG,CAAC;IACnB,YAAY,EAAE,GAAG,CAAC;IAClB,OAAO,EAAE,GAAG,CAAC;IACb,UAAU,EAAE,GAAG,CAAC;IAChB,KAAK,EAAE,GAAG,CAAC;IACX,gBAAgB,EAAE,GAAG,CAAC;IACtB,UAAU,EAAE,GAAG,CAAC;IAChB,YAAY,EAAE,GAAG,CAAC;IAClB,QAAQ,EAAE,GAAG,CAAC;IACd,SAAS,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC3D,YAAY,EAAE,CAAC,KAAK,EAAE;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,OAAO,CAAC;QACpB,WAAW,EAAE,MAAM,IAAI,CAAC;QACxB,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE;YAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,OAAO,CAAA;SAAE,KAAK,GAAG,CAAC,OAAO,CAAC;KAC5E,KAAK,GAAG,CAAC,OAAO,CAAC;IAClB,eAAe,EAAE,GAAG,CAAC;IACrB,MAAM,EAAE,GAAG,CAAC;IACZ,sBAAsB,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;CAC3C,2CA+MA"}

package/dist/esm/components/ReportBuilder/{AddColumnPopover.js → AddColumnModal.js}

@@ -5,8 +5,9 @@ import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, us
 import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable, } from '@dnd-kit/sortable';
 import { CSS as DND_CSS } from '@dnd-kit/utilities';
 import { ThemeContext } from '../../Context';
+import { QuillColumnSearchEmptyState, } from '../UiComponents';
 import { snakeCaseToTitleCase } from '../../utils/textProcessing';
-export default function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, TextInput, SelectColumn, SecondaryButton, Button, }) {
+export default function AddColumnModal({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, TextInput, SelectColumn, SecondaryButton, Button, ColumnSearchEmptyState = QuillColumnSearchEmptyState, }) {
     const [theme] = useContext(ThemeContext);
     const [search, setSearch] = useState('');
     const [searchResults, setSearchResults] = useState(orderedColumnNames);
@@ -51,7 +52,10 @@ export default function AddColumnPopover({ onSave, orderedColumnNames, setOrdere
             flexDirection: 'column',
             gap: 2,
             minWidth: 300,
-            maxHeight: 500,
+            maxHeight: 600,
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingBottom: 16,
         }, children: [_jsx("div", { ref: textInputContainerRef, style: {
                     position: 'relative',
                     display: 'flex',
@@ -59,25 +63,25 @@ export default function AddColumnPopover({ onSave, orderedColumnNames, setOrdere
                     alignItems: 'center',
                     marginTop: 2,
                     marginBottom: 6,
-                }, children: _jsx(TextInput, { id: 'add_column_search_bar', value: search, placeholder: 'Search...', width: 300, onChange: (e) => setSearch(e.target.value) }) }), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: orderedColumnNames, strategy: verticalListSortingStrategy, children: _jsxs("div", { style: {
+                }, children: _jsx(TextInput, { id: 'add_column_search_bar', value: search, placeholder: 'Search...', width: 400, onChange: (e) => setSearch(e.target.value) }) }), _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: orderedColumnNames, strategy: verticalListSortingStrategy, children: _jsxs("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 8,
                             overflowY: 'auto',
-                            maxWidth: '300px',
+                            maxWidth: '400px',
                         }, children: [searchResults.map((value) => {
                                 return (_jsx(SortableItem, { selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value.replace('.', ' | '), SelectColumn: SelectColumn }, value));
-                            }), search.length > 0 && searchResults.length === 0 && (_jsx("div", { style: { fontFamily: theme?.fontFamily }, children: "No results found" }))] }) }) }), _jsxs("div", { style: {
+                            }), search.length > 0 && searchResults.length === 0 && (_jsx(ColumnSearchEmptyState, {}))] }) }) }), _jsxs("div", { style: {
                     display: 'flex',
                     width: '100%',
                     flexDirection: 'row',
                     gap: 8,
                     justifyContent: 'end',
                     marginTop: 12,
-                }, children: [selectedColumns.length > 0 && !isSelectedAllColumns() && (_jsx(SecondaryButton, { onClick: () => setSelectedColumns(searchResults.filter((row) => {
+                }, children: [selectedColumns.length > 0 && (_jsx(SecondaryButton, { onClick: () => setSelectedColumns([]), label: "Clear" })), selectedColumns.length > 0 && !isSelectedAllColumns() && (_jsx(SecondaryButton, { onClick: () => setSelectedColumns(searchResults.filter((row) => {
                             const [table, _column] = row.split('.');
                             return selectedColumns[0].startsWith(table);
-                        })), label: "Select all" })), selectedColumns.length > 0 && isSelectedAllColumns() && (_jsx(SecondaryButton, { onClick: () => setSelectedColumns([]), label: "Clear" })), _jsx(Button, { onClick: () => {
+                        })), label: "Select all" })), _jsx(Button, { onClick: () => {
                             // follow the ordering of the ordered column names
                             let tableName = initialTableName;
                             const orderedSelectedColumns = [];

package/dist/esm/components/ReportBuilder/AddLimitPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddLimitPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddLimitPopover.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,oBAAoB,EAIpB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,MAAM,CAAC;AAElD,eAAO,MAAM,aAAa;WAYjB,GAAG;kBACI,MAAM,IAAI;0BACF,GAAG,KAAK,IAAI;qBACjB,GAAG,aAAa,GAAG,KAAK,IAAI;;0BAEvB,0BAA0B,KAAK,WAAW;iBACnD,GAAG;eACL,GAAG;oBACE,oBAAoB,KAAK,WAAW;6BAC3B,oBAAoB,KAAK,WAAW;6CAiC9D,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CAChE;AAED,eAAO,MAAM,eAAe,oFAQzB,oBAAoB,4CA8CtB,CAAC"}
+{"version":3,"file":"AddLimitPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddLimitPopover.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,oBAAoB,EAIpB,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,MAAM,CAAC;AAElD,eAAO,MAAM,aAAa;WAYjB,GAAG;kBACI,MAAM,IAAI;0BACF,GAAG,KAAK,IAAI;qBACjB,GAAG,aAAa,GAAG,KAAK,IAAI;;0BAEvB,0BAA0B,KAAK,WAAW;iBACnD,GAAG;eACL,GAAG;oBACE,oBAAoB,KAAK,WAAW;6BAC3B,oBAAoB,KAAK,WAAW;6CAiC9D,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CAChE;AAED,eAAO,MAAM,eAAe,oFAQzB,oBAAoB,4CA+CtB,CAAC"}

package/dist/esm/components/ReportBuilder/AddLimitPopover.js

@@ -21,7 +21,7 @@ export const AddLimitPopover = ({ onSave, initialLimit = 10, isEdit = false, onD
                     flexDirection: 'row',
                     gap: 12,
                     padding: '6px 0px',
-                }, children: _jsx(TextInput, { id: 'add_limit_input', value: limit.toString() ?? initialLimit.toString(), width: 200, 
+                }, children: _jsx(TextInput, { id: 'add_limit_input', label: "Limit", value: limit.toString() ?? initialLimit.toString(), width: 200, 
                     // style={{ minHeight: 32, padding: '6px 12px' }}
                     onChange: (e) => {
                         if (Number.isNaN(parseFloat(e.target.value || '0'))) {

package/dist/esm/components/ReportBuilder/AddSortPopover.d.ts

@@ -19,5 +19,5 @@ export declare const SortSentence: ({ sortData, keyPrefix, columns, handleDelete
     Button?: ((props: ButtonComponentProps) => JSX.Element) | undefined;
     SecondaryButton?: ((props: ButtonComponentProps) => JSX.Element) | undefined;
 }) => import("react/jsx-runtime").JSX.Element | null;
-export declare const AddSortPopover: ({ onSave, columns, isEdit, onDelete, column, Select, Button, SecondaryButton, }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const AddSortPopover: ({ onSave, columns, isEdit, onDelete, column, direction, Select, Button, SecondaryButton, }: any) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AddSortPopover.d.ts.map

package/dist/esm/components/ReportBuilder/AddSortPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AddSortPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddSortPopover.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,oBAAoB,EAGpB,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,yBAAyB,EAAE,MAAM,MAAM,CAAC;AAOjD,eAAO,MAAM,YAAY;cAkBb,GAAG;aACJ,GAAG;kBACE,GAAG;uBACE,GAAG;uBACH,GAAG;oBACN,GAAG;mBACJ,GAAG;gBACN,GAAG;kBACD,GAAG;YACT,GAAG;;yBAEU,yBAAyB,KAAK,WAAW;iBACjD,GAAG;sBACC,oBAAoB,KAAK,WAAW;sBACpC,oBAAoB,KAAK,WAAW;+BAC3B,oBAAoB,KAAK,WAAW;oDAoD/D,CAAC;AAEF,eAAO,MAAM,cAAc,oFASxB,GAAG,4CA+DL,CAAC"}
+{"version":3,"file":"AddSortPopover.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/AddSortPopover.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,oBAAoB,EAGpB,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,yBAAyB,EAAE,MAAM,MAAM,CAAC;AAOjD,eAAO,MAAM,YAAY;cAkBb,GAAG;aACJ,GAAG;kBACE,GAAG;uBACE,GAAG;uBACH,GAAG;oBACN,GAAG;mBACJ,GAAG;gBACN,GAAG;kBACD,GAAG;YACT,GAAG;;yBAEU,yBAAyB,KAAK,WAAW;iBACjD,GAAG;sBACC,oBAAoB,KAAK,WAAW;sBACpC,oBAAoB,KAAK,WAAW;+BAC3B,oBAAoB,KAAK,WAAW;oDAqD/D,CAAC;AAEF,eAAO,MAAM,cAAc,+FAUxB,GAAG,4CAmEL,CAAC"}

package/dist/esm/components/ReportBuilder/AddSortPopover.js

@@ -31,24 +31,24 @@ export const SortSentence = ({ sortData, keyPrefix, columns, handleDelete, setEd
     return (_jsx("div", { children: _jsx(SortPopover, { isOpen: isOpen, setIsOpen: handleSetIsOpen, sortLabel: `${snakeCaseToTitleCase(sortData.expr.column) || snakeCaseToTitleCase(sortData.expr.value)} ${SORT_VALUE_TO_LABEL[sortData.type]}`, onClickDelete: handleClickDelete, popoverTitle: popoverTitle, popoverChildren: _jsx(EditPopover, { onSave: (column, direction) => {
                     setIsOpen(false);
                     onSave(column, direction);
-                }, columns: columns, isEdit: true, onDelete: handleClickDelete, column: sortData.expr.column || sortData.expr.value, Select: Select, Button: Button, SecondaryButton: SecondaryButton }) }) }));
+                }, columns: columns, isEdit: true, onDelete: handleClickDelete, column: sortData.expr.column || sortData.expr.value, direction: sortData.type, Select: Select, Button: Button, SecondaryButton: SecondaryButton }) }) }));
 };
-export const AddSortPopover = ({ onSave, columns, isEdit, onDelete, column, Select = QuillSelectComponent, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, }) => {
+export const AddSortPopover = ({ onSave, columns, isEdit, onDelete, column, direction, Select = QuillSelectComponent, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, }) => {
     const [sortColumn, setSortColumn] = useState(column || '');
-    const [sortDirection, setSortDirection] = useState('ASC');
+    const [sortDirection, setSortDirection] = useState(direction || 'ASC');
     return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: [_jsxs("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
                     gap: 12,
                     padding: '6px 0px',
-                }, children: [_jsx(Select, { value: sortColumn, onChange: (e) => {
+                }, children: [_jsx(Select, { label: "Sort Column", value: sortColumn, onChange: (e) => {
                             setSortColumn(e.target.value);
                         }, options: [
                             ...columns.map((column) => ({
                                 label: snakeCaseToTitleCase(column.split('.')[1] || ''),
                                 value: column.split('.')[1],
                             })),
-                        ], width: 200 }), _jsx(Select, { value: sortDirection, onChange: (e) => {
+                        ], width: 200 }), _jsx(Select, { label: "Sort Direction", value: sortDirection, onChange: (e) => {
                             setSortDirection(e.target.value);
                         }, options: [
                             { label: 'Ascending', value: 'ASC' },

package/dist/esm/components/ReportBuilder/ast.d.ts

@@ -493,6 +493,12 @@ export declare const extractColumnish: (expr_value: NodeSQLParser.ExpressionValu
  * @returns true or false
  */
 export declare const isNumericColumnType: (columnType: string | undefined) => boolean;
+/**
+ * Returns whether the given columnType is a numeric bool.
+ * @param columnType the type of the column
+ * @returns true or false
+ */
+export declare const isBoolColumnType: (columnType: string | undefined) => boolean;
 /**
  * Returns whether the given columnType is a text type (ie. text-ish).
  * @param columnType the type of the column