@quillsql/react 2.11.23 → 2.11.25

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

@@ -13,11 +13,8 @@ const ChartTooltip_1 = __importDefault(require("../../components/Chart/ChartTool
 const getDomain_1 = __importDefault(require("../../utils/getDomain"));
 const react_1 = require("react");
 const crypto_1 = require("../../utils/crypto");
-function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, comparisonLineStyle = 'solid', }) {
+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] = (0, react_1.useState)([]);
-    if (!yAxisFields || !yAxisFields.length) {
-        return null;
-    }
     (0, react_1.useEffect)(() => {
         if (!data || data.length === 0) {
             return;
@@ -69,13 +66,13 @@ function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, c
         }
         return undefined; // use the default colors from the theme
     };
-    return ((0, jsx_runtime_1.jsx)("div", { style: { ...containerStyle }, className: className, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.ComposedChart, { data: formattedData, children: [!hideCartesianGrid && ((0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { horizontal: true, vertical: false, stroke: "#e5e7eb" })), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
+    return ((0, jsx_runtime_1.jsx)("div", { style: { ...containerStyle }, className: className, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.ComposedChart, { data: formattedData, children: [!hideCartesianGrid && ((0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { horizontal: !hideHorizontalCartesianGrid, vertical: !hideVerticalCartesianGrid, stroke: "#e5e7eb", strokeDasharray: cartesianGridLineStyle === 'dashed' ? '5 5' : undefined })), (0, jsx_runtime_1.jsx)(recharts_1.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 (0, axisFormatter_1.axisFormatter)({
                                 value: tick,
                                 field: xAxisField,
@@ -87,14 +84,16 @@ function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, c
                                 theme?.fontFamily ||
                                 'Inter; Helvetica',
                             color: theme?.chartLabelColor || '#666666',
-                        }, tickFormatter: (value) => (0, axisFormatter_1.axisFormatter)({
-                            value,
-                            field: yAxisFields[0].field,
-                            fields: [
-                                ...yAxisFields,
-                                { field: xAxisField, format: xAxisFormat },
-                            ],
-                        }) }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { wrapperStyle: { outline: 'none' }, isAnimationActive: false, cursor: { stroke: '#d1d5db', strokeWidth: 1 }, content: ({ active, payload, label }) => {
+                        }, tickFormatter: (value) => yAxisFields && yAxisFields.length > 0
+                            ? (0, axisFormatter_1.axisFormatter)({
+                                value,
+                                field: yAxisFields[0].field,
+                                fields: [
+                                    ...yAxisFields,
+                                    { field: xAxisField, format: xAxisFormat },
+                                ],
+                            })
+                            : value }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { wrapperStyle: { outline: 'none', zIndex: 2 }, isAnimationActive: false, cursor: { stroke: '#d1d5db', strokeWidth: 1 }, content: ({ active, payload, label }) => {
                             let label2;
                             if (comparison &&
                                 payload?.length > 1 &&
@@ -112,25 +111,27 @@ function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, c
                                         ...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) ??
-                            (0, color_1.selectColor)(elem, colors, index);
-                        const gradientStop = getCustomColor(index, elem.field, 'stop') ?? '#00000000';
-                        const uniqueId = `gradient_${(0, crypto_1.hashCode)(gradientStart)}_${(0, crypto_1.hashCode)(gradientStop)}`;
-                        return ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: uniqueId, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: gradientStart, stopOpacity: 0.4 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: gradientStop, stopOpacity: 0 })] }) }, `defs_${uniqueId}_${index}`));
-                    }), yAxisFields.map((elem, index) => {
-                        const gradientStart = (0, crypto_1.hashCode)(getCustomColor(index, elem.field, 'start') ??
-                            getCustomColor(index, elem.field) ??
-                            (0, color_1.selectColor)(elem, colors, index));
-                        const gradientStop = (0, crypto_1.hashCode)(getCustomColor(index, elem.field, 'stop') ?? '#00000000');
-                        const uniqueId = `gradient_${gradientStart}_${gradientStop}`;
-                        return ((0, jsx_runtime_1.jsx)(recharts_1.Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: getCustomColor(index, elem.field) ??
-                                (0, color_1.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) ??
+                                (0, color_1.selectColor)(elem, colors, index);
+                            const gradientStop = getCustomColor(index, elem.field, 'stop') ?? '#00000000';
+                            const uniqueId = `gradient_${(0, crypto_1.hashCode)(gradientStart)}_${(0, crypto_1.hashCode)(gradientStop)}`;
+                            return ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: uniqueId, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: gradientStart, stopOpacity: 0.4 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: gradientStop, stopOpacity: 0 })] }) }, `defs_${uniqueId}_${index}`));
+                        }), yAxisFields &&
+                        yAxisFields.map((elem, index) => {
+                            const gradientStart = (0, crypto_1.hashCode)(getCustomColor(index, elem.field, 'start') ??
+                                getCustomColor(index, elem.field) ??
+                                (0, color_1.selectColor)(elem, colors, index));
+                            const gradientStop = (0, crypto_1.hashCode)(getCustomColor(index, elem.field, 'stop') ?? '#00000000');
+                            const uniqueId = `gradient_${gradientStart}_${gradientStop}`;
+                            return ((0, jsx_runtime_1.jsx)(recharts_1.Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: getCustomColor(index, elem.field) ??
+                                    (0, color_1.selectColor)(elem, colors, index), fill: `url(#${uniqueId})`, strokeWidth: 2, dot: false, strokeDasharray: comparison && comparisonLineStyle === 'dashed' && index > 0
+                                    ? '5 5'
+                                    : undefined, isAnimationActive: isAnimationActive }, elem.field));
+                        })] }) }) }));
 }
 exports.default = LineChart;

package/dist/cjs/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/cjs/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/cjs/components/Dashboard/DashboardFilter.js

@@ -48,27 +48,27 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePic
                         onChangeFilter(filter, { preset: e.target.value });
                     }, presetOptions: filter.options.map((option) => {
                         return { label: option.label, value: option.label };
-                    }) }), comparisonRange && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                        }, children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: comparisonRange.value, onChange: (e) => {
-                                    onChangeFilter(filter, null, dateRangePickerUtils_1.COMPARISON_OPTIONS.find((option) => option.value === e.target.value));
-                                }, options: dateRangePickerUtils_1.COMPARISON_OPTIONS.map((compareOption) => ({
-                                    value: compareOption.value,
-                                    label: compareOption.text,
-                                })), width: 200 })] }) }))] }));
+                    }), selectWidth: 200 }), comparisonRange && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                    }, children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: comparisonRange.value, onChange: (e) => {
+                                onChangeFilter(filter, null, dateRangePickerUtils_1.COMPARISON_OPTIONS.find((option) => option.value === e.target.value));
+                            }, options: dateRangePickerUtils_1.COMPARISON_OPTIONS.map((compareOption) => ({
+                                value: compareOption.value,
+                                label: compareOption.text,
+                            })), width: 200 })] }))] }));
     }
     return null;
 }

package/dist/cjs/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/cjs/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/cjs/components/Dashboard/DataLoader.js

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartDataLoader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Chart_1 = require("../../Chart");
 const Context_1 = require("../../Context");
+const hooks_1 = require("../../hooks");
 const dataFetcher_1 = require("../../utils/dataFetcher");
 const merge_1 = require("../../utils/merge");
 function DataLoader({ id, children, }) {
@@ -76,3 +78,85 @@ function DataLoader({ id, children, }) {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({ isLoading, error }) });
 }
 exports.default = DataLoader;
+// 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.
+const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, }) => {
+    const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
+    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
+    const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(undefined);
+    const [isComparison, setIsComparison] = (0, react_1.useState)(false);
+    const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
+    const theme = (0, hooks_1.useTheme)();
+    (0, react_1.useEffect)(() => {
+        async function getChartOptions() {
+            setLoading(true);
+            if (!(0, Chart_1.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 (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
+                if (resp && resp.name !== 'error' && !resp.errorMessage) {
+                    setIsComparison(!!resp.compareRows?.length);
+                    if (resp.compareRows) {
+                        (0, merge_1.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,
+    });
+};
+exports.ChartDataLoader = ChartDataLoader;

package/dist/cjs/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/cjs/components/Dashboard/MetricComponent.js

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

package/dist/cjs/components/QuillSelect.js

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

package/dist/cjs/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/cjs/components/QuillTable.js

@@ -59,6 +59,7 @@ function QuillTable({ rows, columns, isLoading, showDownloadCSVButton, downloadF
     };
     if (isLoading || isPaginating) {
         return ((0, jsx_runtime_1.jsx)("div", { style: {
+                height: '100%',
                 ...containerStyle,
             }, className: className, children: (0, jsx_runtime_1.jsx)(LoadingComponent, {}) }));
     }
@@ -74,7 +75,7 @@ function QuillTable({ rows, columns, isLoading, showDownloadCSVButton, downloadF
                 width: '100%',
                 overflow: 'auto',
                 borderRadius: 6,
-                border: '1px solid rgb(229, 231, 235)',
+                border: '1px solid #E7E7E7',
                 padding: 0,
                 margin: 0,
                 boxSizing: 'border-box',
@@ -100,9 +101,9 @@ function QuillTable({ rows, columns, isLoading, showDownloadCSVButton, downloadF
                                                 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',
@@ -159,14 +160,12 @@ function QuillTable({ rows, columns, isLoading, showDownloadCSVButton, downloadF
                                                 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: (0, jsx_runtime_1.jsx)("div", { style: {
@@ -198,7 +197,7 @@ function QuillTable({ rows, columns, isLoading, showDownloadCSVButton, downloadF
                             display: 'flex',
                             minWidth: '100px',
                             height: 38,
-                            borderTop: '1px solid rgb(229, 231, 235)',
+                            borderTop: '1px solid #E7E7E7',
                             background: '#F9FAFB',
                             width: '100%',
                         }, children: (0, jsx_runtime_1.jsxs)("div", { style: {

package/dist/cjs/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/cjs/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/cjs/components/ReportBuilder/{AddColumnPopover.js → AddColumnModal.js}

@@ -7,8 +7,9 @@ const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 const Context_1 = require("../../Context");
+const UiComponents_1 = require("../UiComponents");
 const textProcessing_1 = require("../../utils/textProcessing");
-function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, TextInput, SelectColumn, SecondaryButton, Button, }) {
+function AddColumnModal({ onSave, orderedColumnNames, setOrderedColumnNames, selectedColumns, setSelectedColumns, isSelectedAllColumns, clearAllState, nameToColumn, baseAst, setBaseAst, pivot, initialTableName, defaultAST, defaultTable, setPivot, TextInput, SelectColumn, SecondaryButton, Button, ColumnSearchEmptyState = UiComponents_1.QuillColumnSearchEmptyState, }) {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [search, setSearch] = (0, react_1.useState)('');
     const [searchResults, setSearchResults] = (0, react_1.useState)(orderedColumnNames);
@@ -53,7 +54,10 @@ function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, s
             flexDirection: 'column',
             gap: 2,
             minWidth: 300,
-            maxHeight: 500,
+            maxHeight: 600,
+            paddingLeft: 16,
+            paddingRight: 16,
+            paddingBottom: 16,
         }, children: [(0, jsx_runtime_1.jsx)("div", { ref: textInputContainerRef, style: {
                     position: 'relative',
                     display: 'flex',
@@ -61,25 +65,25 @@ function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, s
                     alignItems: 'center',
                     marginTop: 2,
                     marginBottom: 6,
-                }, children: (0, jsx_runtime_1.jsx)(TextInput, { id: 'add_column_search_bar', value: search, placeholder: 'Search...', width: 300, onChange: (e) => setSearch(e.target.value) }) }), (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: orderedColumnNames, strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+                }, children: (0, jsx_runtime_1.jsx)(TextInput, { id: 'add_column_search_bar', value: search, placeholder: 'Search...', width: 400, onChange: (e) => setSearch(e.target.value) }) }), (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, onDragEnd: handleDragEnd, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: orderedColumnNames, strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                             display: 'flex',
                             flexDirection: 'column',
                             gap: 8,
                             overflowY: 'auto',
-                            maxWidth: '300px',
+                            maxWidth: '400px',
                         }, children: [searchResults.map((value) => {
                                 return ((0, jsx_runtime_1.jsx)(SortableItem, { selectedColumns: selectedColumns, setSelectedColumns: setSelectedColumns, id: value, label: value.replace('.', ' | '), SelectColumn: SelectColumn }, value));
-                            }), search.length > 0 && searchResults.length === 0 && ((0, jsx_runtime_1.jsx)("div", { style: { fontFamily: theme?.fontFamily }, children: "No results found" }))] }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                            }), search.length > 0 && searchResults.length === 0 && ((0, jsx_runtime_1.jsx)(ColumnSearchEmptyState, {}))] }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',
                     width: '100%',
                     flexDirection: 'row',
                     gap: 8,
                     justifyContent: 'end',
                     marginTop: 12,
-                }, children: [selectedColumns.length > 0 && !isSelectedAllColumns() && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => setSelectedColumns(searchResults.filter((row) => {
+                }, children: [selectedColumns.length > 0 && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => setSelectedColumns([]), label: "Clear" })), selectedColumns.length > 0 && !isSelectedAllColumns() && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => setSelectedColumns(searchResults.filter((row) => {
                             const [table, _column] = row.split('.');
                             return selectedColumns[0].startsWith(table);
-                        })), label: "Select all" })), selectedColumns.length > 0 && isSelectedAllColumns() && ((0, jsx_runtime_1.jsx)(SecondaryButton, { onClick: () => setSelectedColumns([]), label: "Clear" })), (0, jsx_runtime_1.jsx)(Button, { onClick: () => {
+                        })), label: "Select all" })), (0, jsx_runtime_1.jsx)(Button, { onClick: () => {
                             // follow the ordering of the ordered column names
                             let tableName = initialTableName;
                             const orderedSelectedColumns = [];
@@ -121,7 +125,7 @@ function AddColumnPopover({ onSave, orderedColumnNames, setOrderedColumnNames, s
                             onSave();
                         }, label: "Select columns" })] })] }));
 }
-exports.default = AddColumnPopover;
+exports.default = AddColumnModal;
 const SortableItem = ({ id, label, setSelectedColumns, selectedColumns, SelectColumn, }) => {
     const { attributes, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({ id: id });
     const style = {

package/dist/cjs/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/cjs/components/ReportBuilder/AddLimitPopover.js

@@ -25,7 +25,7 @@ const AddLimitPopover = ({ onSave, initialLimit = 10, isEdit = false, onDelete =
                     flexDirection: 'row',
                     gap: 12,
                     padding: '6px 0px',
-                }, children: (0, jsx_runtime_1.jsx)(TextInput, { id: 'add_limit_input', value: limit.toString() ?? initialLimit.toString(), width: 200, 
+                }, children: (0, jsx_runtime_1.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/cjs/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/cjs/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/cjs/components/ReportBuilder/AddSortPopover.js

@@ -34,25 +34,25 @@ const SortSentence = ({ sortData, keyPrefix, columns, handleDelete, setEditPopov
     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SortPopover, { isOpen: isOpen, setIsOpen: handleSetIsOpen, sortLabel: `${(0, textProcessing_1.snakeCaseToTitleCase)(sortData.expr.column) || (0, textProcessing_1.snakeCaseToTitleCase)(sortData.expr.value)} ${SORT_VALUE_TO_LABEL[sortData.type]}`, onClickDelete: handleClickDelete, popoverTitle: popoverTitle, popoverChildren: (0, jsx_runtime_1.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 }) }) }));
 };
 exports.SortSentence = SortSentence;
-const AddSortPopover = ({ onSave, columns, isEdit, onDelete, column, Select = QuillSelect_1.QuillSelectComponent, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, }) => {
+const AddSortPopover = ({ onSave, columns, isEdit, onDelete, column, direction, Select = QuillSelect_1.QuillSelectComponent, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, }) => {
     const [sortColumn, setSortColumn] = (0, react_1.useState)(column || '');
-    const [sortDirection, setSortDirection] = (0, react_1.useState)('ASC');
+    const [sortDirection, setSortDirection] = (0, react_1.useState)(direction || 'ASC');
     return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
                     gap: 12,
                     padding: '6px 0px',
-                }, children: [(0, jsx_runtime_1.jsx)(Select, { value: sortColumn, onChange: (e) => {
+                }, children: [(0, jsx_runtime_1.jsx)(Select, { label: "Sort Column", value: sortColumn, onChange: (e) => {
                             setSortColumn(e.target.value);
                         }, options: [
                             ...columns.map((column) => ({
                                 label: (0, textProcessing_1.snakeCaseToTitleCase)(column.split('.')[1] || ''),
                                 value: column.split('.')[1],
                             })),
-                        ], width: 200 }), (0, jsx_runtime_1.jsx)(Select, { value: sortDirection, onChange: (e) => {
+                        ], width: 200 }), (0, jsx_runtime_1.jsx)(Select, { label: "Sort Direction", value: sortDirection, onChange: (e) => {
                             setSortDirection(e.target.value);
                         }, options: [
                             { label: 'Ascending', value: 'ASC' },

package/dist/cjs/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