@quillsql/react 2.12.26 → 2.12.27

package/dist/esm/Chart.js

@@ -5,7 +5,7 @@ import { useExport } from './hooks/useExport';
 import { differenceInHours } from 'date-fns';
 import BarList from './components/Chart/BarList';
 import PieChart from './components/Chart/PieChart';
-import { ClientContext, CustomFieldContext, DashboardContext, DashboardFiltersContext, } from './Context';
+import { ClientContext, CustomFieldContext, DashboardContext, DashboardFiltersContext, ReportFiltersContext, } from './Context';
 import QuillTable from './components/QuillTable';
 import { getData } from './utils/dataFetcher';
 import { DATE_FORMAT_TYPES, valueFormatter } from './utils/valueFormatter';
@@ -14,12 +14,17 @@ import BarChart from './components/Chart/BarChart';
 import { mergeComparisonRange } from './utils/merge';
 import { QuillLoadingSkeleton } from './components/Chart/ChartSkeleton';
 import ChartError from './components/Chart/ChartError';
-import { COMPARISON_OPTIONS } from './DateRangePicker/dateRangePickerUtils';
+import { COMPARISON_OPTIONS, } from './DateRangePicker/dateRangePickerUtils';
 import { quillFormat } from './utils/valueFormatter';
 import useTheme from './hooks/useTheme';
 import { processFilterErrorList } from './utils/errorProcessing';
-import { findAndProcessDateFilter } from './utils/filterProcessing';
+import { findAndProcessDateFilter, processFilterFromBackend, updateFilter, } from './utils/filterProcessing';
 import { cleanDashboardItem } from './utils/dashboard';
+import { QuillFilterContainerComponent, } from './components/UiComponents';
+import { DashboardFilter } from './components/Dashboard/DashboardFilter';
+import { QuillSelectComponent } from './components/QuillSelect';
+import { QuillMultiSelectComponent } from './components/QuillMultiSelect';
+import { QuillDateRangePicker, } from './DateRangePicker/QuillDateRangePicker';
 const MAX_ROWS_FOR_GENERIC_TABLE = 300;
 // @ts-ignore
 function sumByKey(arr, key) {
@@ -148,17 +153,11 @@ const Chart = (props) => {
                 ? theme.chartColors
                 : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
     }, [data.colors]);
-    return (_jsx(ChartUpdater, { reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, colors: chartColors, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, hideHorizontalCartesianGrid: data.hideHorizontalCartesianGrid, hideVerticalCartesianGrid: data.hideVerticalCartesianGrid, hideSubsequentXAxisTicks: data.hideSubsequentXAxisTicks, hideDateRangeFilter: data.hideDateRangeFilter, cartesianGridLineStyle: data.cartesianGridLineStyle, cartesianGridLineColor: data.cartesianGridLineColor, comparisonLineStyle: data.comparisonLineStyle, mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields, LoadingComponent: data.LoadingComponent, filters: data.filters, onClickChartElement: props.onClickChartElement }));
+    return (_jsx(ChartUpdater, { reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, colors: chartColors, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, hideHorizontalCartesianGrid: data.hideHorizontalCartesianGrid, hideVerticalCartesianGrid: data.hideVerticalCartesianGrid, hideSubsequentXAxisTicks: data.hideSubsequentXAxisTicks, hideDateRangeFilter: data.hideDateRangeFilter, cartesianGridLineStyle: data.cartesianGridLineStyle, cartesianGridLineColor: data.cartesianGridLineColor, comparisonLineStyle: data.comparisonLineStyle, mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields, LoadingComponent: data.LoadingComponent, filters: data.filters, onClickChartElement: props.onClickChartElement, SelectComponent: data.SelectComponent, MultiSelectComponent: data.MultiSelectComponent, DateRangePickerComponent: data.DateRangePickerComponent, FilterContainerComponent: data.FilterContainerComponent, hideFilters: data.hideFilters }));
 };
-const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, hideDateRangeFilter = false, mapColorsToFields, LoadingComponent = QuillLoadingSkeleton, filters, onClickChartElement, }) => {
+const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, hideDateRangeFilter = false, hideFilters = false, mapColorsToFields, LoadingComponent = QuillLoadingSkeleton, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponent, DateRangePickerComponent = QuillDateRangePicker, FilterContainerComponent = QuillFilterContainerComponent, filters, onClickChartElement, }) => {
     const { dispatch, dashboard } = useContext(DashboardContext);
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
-    const specificDashboardFilter = useMemo(() => {
-        return dashboardFilters.filter((f) => dashboard &&
-            dashboard[reportId] &&
-            f &&
-            f.dashboardName === dashboard[reportId].dashboardName);
-    }, [dashboardFilters, dashboard]);
+    const { reportFiltersDispatch, reportFilters } = useContext(ReportFiltersContext);
     const [initialLoad, setInitialLoad] = useState(true);
     const [loading, setLoading] = useState(true);
     const [paginating, setPaginating] = useState(false);
@@ -171,7 +170,10 @@ const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimation
         page: 0,
     });
     const [report, setReport] = useState(undefined);
+    const [dateFilter, setDateFilter] = useState(undefined);
+    const [chartFilters, setChartFilters] = useState([]);
     const [previousPage, setPreviousPage] = useState(0);
+    const [filterUpdateIndex, setFilterUpdateIndex] = useState(-1);
     const theme = useTheme();
     const onPageChange = (page) => {
         if ((previousPage < page.currentPage &&
@@ -188,10 +190,6 @@ const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimation
     };
     const getChartDataPaginate = async (processing) => {
         setPaginating(true);
-        if (!didFiltersChange(dashboard[reportId], specificDashboardFilter)) {
-            setPaginating(false);
-            return;
-        }
         try {
             let updatedProcessing = { ...additionalProcessing, ...processing };
             if (processing && processing.sort) {
@@ -202,8 +200,8 @@ const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimation
             }
             // Remove extra fields on each filter so we don't confuse the backend.
             const allowDateRange = !hideDateRangeFilter;
-            const minimalFilters = Object.values(specificDashboardFilter).length
-                ? Object.values(specificDashboardFilter)
+            const minimalFilters = Object.values(dashboard.filters).length
+                ? Object.values(chartFilters)
                     .filter((f) => allowDateRange || f.filterType !== 'date_range')
                     .map((filter) => {
                     const newFilter = { ...filter };
@@ -249,11 +247,6 @@ const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimation
                 };
                 const cleanedReport = await cleanDashboardItem(dashboardItem, filters);
                 setReport(cleanedReport);
-                dispatch({
-                    type: 'UPDATE_DASHBOARD_ITEM',
-                    id: reportId,
-                    data: cleanedReport,
-                });
                 if (mapColorsToFields) {
                     setColorMap(mapColorsToFields(cleanedReport, theme));
                 }
@@ -271,85 +264,68 @@ const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimation
             setPaginating(false);
         }
     };
-    const getChartData = async (processing) => {
-        setLoading(true);
-        if (!didFiltersChange(dashboard[reportId], specificDashboardFilter)) {
-            setLoading(false);
-            return;
-        }
+    const getChartData = async (reportFilterInfo) => {
         try {
-            let updatedProcessing = { ...additionalProcessing, ...processing };
-            if (processing && processing.sort) {
-                if (!updatedProcessing.page) {
-                    updatedProcessing.page = {};
-                }
-                updatedProcessing.page.currentPage = 0;
-            }
-            // Remove extra fields on each filter so we don't confuse the backend.
-            const allowDateRange = !hideDateRangeFilter;
-            const minimalFilters = Object.values(specificDashboardFilter).length
-                ? Object.values(specificDashboardFilter)
-                    .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;
-                })
-                : [];
-            if (filters) {
-                minimalFilters.push(...filters);
+            if (filterUpdateIndex === reportFilterInfo.updateIndex) {
+                return;
             }
+            const filters = reportFilterInfo.filters;
+            setLoading(true);
             const hostedBody = {
                 metadata: {
                     dashboardItemId: reportId,
                     orgId: client.customerId || '*',
                     clientId: client.publicKey,
                     task: 'item',
-                    databaseType: client.databaseType,
-                    filters: minimalFilters.filter((f) => f.dashboardName === dashboard[reportId].dashboardName),
+                    getDefaultDashboardFilters: filters ? false : true,
+                    databaseType: client?.databaseType,
                     customFields,
-                    additionalProcessing: updatedProcessing,
-                    paginateTable: true,
+                    filters,
                 },
             };
             const cloudBody = {
                 id: reportId,
-                filters: minimalFilters.filter((f) => f.dashboardName === dashboard[reportId].dashboardName),
             };
-            setError(undefined);
-            const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
+            const resp = await getData(client, 'itempost', 'same-origin', hostedBody, cloudBody);
             processFilterErrorList(resp);
             if (resp && resp.name !== 'error' && !resp.errorMessage) {
                 setIsComparison(!!resp.compareRows?.length);
                 if (resp.compareRows) {
                     mergeComparisonRange(resp);
                 }
-                const dashboardItem = {
-                    ...resp,
-                    filtersApplied: minimalFilters.filter((f) => f.dashboardName === dashboard[reportId].dashboardName),
-                };
-                const cleanedReport = await cleanDashboardItem(dashboardItem, filters);
+                const cleanedReport = await cleanDashboardItem(resp, filters ? filters : resp.filters);
                 if (cleanedReport.chartType === 'table' && cleanedReport.pivot) {
                     cleanedReport.columns = cleanedReport.yAxisFields;
                 }
                 setReport(cleanedReport);
-                dispatch({
-                    type: 'UPDATE_DASHBOARD_ITEM',
-                    id: reportId,
-                    data: dashboardItem,
+                let filterArray = filters;
+                // THIS SHOULD ONLY BE UNDEFINED ON INITIAL LOAD
+                if (!filterArray) {
+                    filterArray = resp.filters.map((filter) => {
+                        return processFilterFromBackend(filter, resp.rows);
+                    });
+                    reportFiltersDispatch({
+                        type: 'UPDATE_REPORT_FILTER',
+                        id: reportId,
+                        data: {
+                            filters: filterArray,
+                            updateIndex: reportFilterInfo.updateIndex,
+                        },
+                    });
+                }
+                const dateFilter = filterArray.find((filter) => {
+                    return filter.filterType === 'date_range';
                 });
+                setFilterUpdateIndex(reportFilterInfo.updateIndex);
+                setDateFilter(dateFilter);
+                setChartFilters(filterArray);
                 if (mapColorsToFields) {
-                    setColorMap(mapColorsToFields(dashboardItem, theme));
+                    setColorMap(mapColorsToFields(resp, theme));
                 }
             }
             else {
                 setError(resp?.errorMessage);
             }
-            setAdditionProcessing(updatedProcessing);
             setLoading(false);
         }
         catch (e) {
@@ -358,12 +334,60 @@ const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimation
         }
     };
     useEffect(() => {
+        // IF WE HAVE THE DATA IN DASHBOARD CONTEXT AND IT IS THE INITIAL LAOD DON'T FETCH DATA
+        if (initialLoad && dashboard[reportId]) {
+            setInitialLoad(false);
+            return;
+        }
+        setInitialLoad(false);
+        let parsedReportFilters = reportFilters[reportId]
+            ? reportFilters[reportId]
+            : { updateIndex: 0 };
+        getChartData(parsedReportFilters);
+    }, [client.customerId, reportId, reportFilters[reportId]?.updateIndex]);
+    useEffect(() => {
+        if (!dashboard || !dashboard[reportId]) {
+            return;
+        }
         setInitialLoad(false);
-        getChartData();
-    }, [specificDashboardFilter, client, reportId]);
-    return (_jsx(ChartDisplay, { config: report, reportId: reportId, colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, cartesianGridLineColor: cartesianGridLineColor, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, paginating: paginating, error: error, colorMap: colorMap, LoadingComponent: LoadingComponent, onPageChange: onPageChange, onSortChange: onSortChange, onClickChartElement: onClickChartElement }));
+        setLoading(false);
+        setReport(dashboard[reportId]);
+        setChartFilters(dashboard[reportId].filtersApplied);
+        const dateFilter = dashboard[reportId].filtersApplied.find((filter) => {
+            return filter.filterType === 'date_range';
+        });
+        setDateFilter(dateFilter);
+    }, []);
+    return (_jsxs("div", { children: [!hideFilters && (_jsx("div", { style: {
+                    display: 'flex',
+                    boxSizing: 'content-box',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                }, children: _jsx(FilterContainerComponent, { children: chartFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: (filter, value = null, comparison = null) => {
+                            const updatedFilters = chartFilters.map((f) => {
+                                if (f.field === filter.field ||
+                                    (f.filterType === 'date_range' &&
+                                        filter.filterType === 'date_range')) {
+                                    return updateFilter(f, value, comparison);
+                                }
+                                return f;
+                            });
+                            setChartFilters(updatedFilters);
+                            getChartData({
+                                filters: updatedFilters,
+                                updateIndex: filterUpdateIndex + 1,
+                            });
+                            reportFiltersDispatch({
+                                type: 'UPDATE_REPORT_FILTER',
+                                id: reportId,
+                                data: {
+                                    filters: updatedFilters,
+                                    updateIndex: filterUpdateIndex + 1,
+                                },
+                            });
+                        }, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) }) })), _jsx(ChartDisplay, { config: report, reportId: reportId, colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, cartesianGridLineColor: cartesianGridLineColor, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, paginating: paginating, error: error, colorMap: colorMap, LoadingComponent: LoadingComponent, onPageChange: onPageChange, onSortChange: onSortChange, onClickChartElement: onClickChartElement, initialDateFilter: dateFilter })] }));
 };
-export const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading = false, paginating = false, error = undefined, isComparison = false, colorMap, LoadingComponent = QuillLoadingSkeleton, onPageChange, onSortChange, onClickChartElement, dateBucket, overrideTheme, }) => {
+export const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading = false, paginating = false, error = undefined, isComparison = false, colorMap, LoadingComponent = QuillLoadingSkeleton, onPageChange, onSortChange, onClickChartElement, dateBucket, overrideTheme, initialDateFilter, }) => {
     const { dashboardFilters } = useContext(DashboardFiltersContext);
     const specificDashboardFilter = useMemo(() => {
         if (!dashboardFilters) {
@@ -381,9 +405,14 @@ export const ChartDisplay = ({ reportId, config, colors, className, containerSty
                 : ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
     }, [colors]);
     const rows = config?.pivotRows ?? config?.rows ?? [];
-    const dateFilter = !hideDateRangeFilter &&
-        findAndProcessDateFilter(Object.values(specificDashboardFilter ?? []));
-    const getYAxisFields = () => {
+    const getDateFilter = () => {
+        if (!hideDateRangeFilter) {
+            return findAndProcessDateFilter(Object.values(specificDashboardFilter));
+        }
+        return undefined;
+    };
+    const [dateFilter, setDateFilter] = useState(initialDateFilter ?? getDateFilter());
+    const getYAxisFields = (curDateFilter) => {
         if (config && config.pivot && config.pivot.columnField) {
             return (config?.pivotColumns
                 .slice(1)
@@ -403,8 +432,8 @@ export const ChartDisplay = ({ reportId, config, colors, className, containerSty
             }) ?? []);
         }
         else {
-            if (dateFilter?.comparison &&
-                dateFilter.comparisonRange.value !== 'NO_COMPARISON') {
+            if (curDateFilter?.comparison &&
+                curDateFilter.comparisonRange.value !== 'NO_COMPARISON') {
                 const comparisonYAxisFields = config?.yAxisFields?.map((field) => {
                     return {
                         ...field,
@@ -421,10 +450,11 @@ export const ChartDisplay = ({ reportId, config, colors, className, containerSty
             return config?.pivotColumns ?? config?.yAxisFields ?? [];
         }
     };
-    const [yAxisFields, setYAxisFields] = useState(getYAxisFields());
+    const [yAxisFields, setYAxisFields] = useState(getYAxisFields(dateFilter ?? getDateFilter()));
     useEffect(() => {
-        setYAxisFields(getYAxisFields());
-    }, [config, specificDashboardFilter]);
+        setYAxisFields(getYAxisFields(initialDateFilter ?? getDateFilter()));
+        setDateFilter(initialDateFilter ?? getDateFilter());
+    }, [config, specificDashboardFilter, initialDateFilter]);
     if (error) {
         return _jsx(ChartError, { className: className, containerStyle: containerStyle });
     }

package/dist/esm/Context.d.ts

@@ -19,6 +19,7 @@ export declare const ReportBuilderQueryContext: React.Context<any>;
 export declare const SavedReportsQueryContext: React.Context<any>;
 export declare const DashboardContext: React.Context<any>;
 export declare const DashboardFiltersContext: React.Context<any>;
+export declare const ReportFiltersContext: React.Context<any>;
 export declare const ChartDateFiltersContext: React.Context<any>;
 export declare const useChartDateFilters: () => {
     getChartDateFilterById: (id: string) => any;

package/dist/esm/Context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAMf,eAAO,MAAM,iBAAiB,oBAAwC,CAAC;AACvE,eAAO,MAAM,aAAa,oBAAwC,CAAC;AACnE,eAAO,MAAM,kBAAkB,oBAAwC,CAAC;AACxE,eAAO,MAAM,cAAc,oBAA0C,CAAC;AACtE,eAAO,MAAM,WAAW,oBAA0C,CAAC;AACnE,eAAO,MAAM,2BAA2B,oBAAuC,CAAC;AAChF,eAAO,MAAM,cAAc,oBAAwC,CAAC;AACpE,eAAO,MAAM,mBAAmB,oBAAwC,CAAC;AACzE,eAAO,MAAM,2BAA2B,oBAGtC,CAAC;AACH,eAAO,MAAM,kBAAkB,oBAAwC,CAAC;AACxE,eAAO,MAAM,YAAY,oBAA0C,CAAC;AACpE,eAAO,MAAM,aAAa,oBAA0C,CAAC;AACrE,eAAO,MAAM,sCAAsC,oBAGjD,CAAC;AACH,eAAO,MAAM,0BAA0B,oBAGrC,CAAC;AACH,eAAO,MAAM,0BAA0B,oBAGrC,CAAC;AACH,eAAO,MAAM,oCAAoC,oBAG/C,CAAC;AACH,eAAO,MAAM,yBAAyB,oBAAwC,CAAC;AAC/E,eAAO,MAAM,wBAAwB,oBAAwC,CAAC;AAC9E,eAAO,MAAM,gBAAgB,oBAAwC,CAAC;AACtE,eAAO,MAAM,uBAAuB,oBAAwC,CAAC;AAC7E,eAAO,MAAM,uBAAuB,oBAAwC,CAAC;AAE7E,eAAO,MAAM,mBAAmB;iCAKM,MAAM;6BACV,MAAM,cAAc,GAAG;CAQxD,CAAC;AAkDF,eAAO,MAAM,eAAe,qIAWzB,GAAG,mDAuPL,CAAC"}
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAMf,eAAO,MAAM,iBAAiB,oBAAwC,CAAC;AACvE,eAAO,MAAM,aAAa,oBAAwC,CAAC;AACnE,eAAO,MAAM,kBAAkB,oBAAwC,CAAC;AACxE,eAAO,MAAM,cAAc,oBAA0C,CAAC;AACtE,eAAO,MAAM,WAAW,oBAA0C,CAAC;AACnE,eAAO,MAAM,2BAA2B,oBAAuC,CAAC;AAChF,eAAO,MAAM,cAAc,oBAAwC,CAAC;AACpE,eAAO,MAAM,mBAAmB,oBAAwC,CAAC;AACzE,eAAO,MAAM,2BAA2B,oBAGtC,CAAC;AACH,eAAO,MAAM,kBAAkB,oBAAwC,CAAC;AACxE,eAAO,MAAM,YAAY,oBAA0C,CAAC;AACpE,eAAO,MAAM,aAAa,oBAA0C,CAAC;AACrE,eAAO,MAAM,sCAAsC,oBAGjD,CAAC;AACH,eAAO,MAAM,0BAA0B,oBAGrC,CAAC;AACH,eAAO,MAAM,0BAA0B,oBAGrC,CAAC;AACH,eAAO,MAAM,oCAAoC,oBAG/C,CAAC;AACH,eAAO,MAAM,yBAAyB,oBAAwC,CAAC;AAC/E,eAAO,MAAM,wBAAwB,oBAAwC,CAAC;AAC9E,eAAO,MAAM,gBAAgB,oBAAwC,CAAC;AACtE,eAAO,MAAM,uBAAuB,oBAAwC,CAAC;AAC7E,eAAO,MAAM,oBAAoB,oBAAwC,CAAC;AAC1E,eAAO,MAAM,uBAAuB,oBAAwC,CAAC;AAE7E,eAAO,MAAM,mBAAmB;iCAKM,MAAM;6BACV,MAAM,cAAc,GAAG;CAQxD,CAAC;AA6DF,eAAO,MAAM,eAAe,qIAWzB,GAAG,mDAkQL,CAAC"}

package/dist/esm/Context.js

@@ -37,6 +37,7 @@ export const ReportBuilderQueryContext = createContext(['', dummySetter]);
 export const SavedReportsQueryContext = createContext(['', dummySetter]);
 export const DashboardContext = createContext([{}, dummySetter]);
 export const DashboardFiltersContext = createContext([[], dummySetter]);
+export const ReportFiltersContext = createContext([{}, dummySetter]);
 export const ChartDateFiltersContext = createContext([{}, dummySetter]);
 export const useChartDateFilters = () => {
     const { chartDateFilters, setChartDateFilters } = useContext(ChartDateFiltersContext);
@@ -70,6 +71,16 @@ const dashboardReducer = (state, action) => {
             return state;
     }
 };
+const reportFiltersReducer = (state, action) => {
+    switch (action.type) {
+        case 'UPDATE_REPORT_FILTER':
+            return { ...state, [action.id]: action.data };
+        case 'CLEAR_REPORT_FILTERS':
+            return {};
+        default:
+            return state;
+    }
+};
 const dashboardFiltersReducer = (state, action) => {
     switch (action.type) {
         case 'UPDATE_DASHBOARD_FILTER':
@@ -112,6 +123,7 @@ export const ContextProvider = ({ children, initialTheme, publicKey, environment
     const [editVisualizationModalVisible, setEditVisualizationModalVisible] = useState(false);
     const [dashboard, dispatch] = useReducer(dashboardReducer, {});
     const [dashboardFilters, dashboardFiltersDispatch] = useReducer(dashboardFiltersReducer, []);
+    const [reportFilters, reportFiltersDispatch] = useReducer(reportFiltersReducer, {});
     const customFieldHelper = async (client) => {
         const customFields = await getCustomFieldInfo(client, 'context');
         setCustomFields(customFields);
@@ -254,5 +266,8 @@ export const ContextProvider = ({ children, initialTheme, publicKey, environment
                                                                         ], children: _jsx(DashboardContext.Provider, { value: { dashboard, dispatch }, children: _jsx(DashboardFiltersContext.Provider, { value: {
                                                                                     dashboardFilters,
                                                                                     dashboardFiltersDispatch,
-                                                                                }, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+                                                                                }, children: _jsx(ReportFiltersContext.Provider, { value: {
+                                                                                        reportFilters,
+                                                                                        reportFiltersDispatch,
+                                                                                    }, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };

package/dist/esm/Table.d.ts

@@ -1,4 +1,6 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { MultiSelectComponentProps, SelectComponentProps } from './components/UiComponents';
+import { DateRangePickerComponentProps } from './DateRangePicker/QuillDateRangePicker';
 export interface TableColumn {
     label: string;
     field: string;
@@ -78,6 +80,8 @@ export interface TableProps {
      * Whether to show the download csv button.
      */
     hideCSVDownloadButton?: boolean;
+    /** Whether to hide the table filters component, deafulted to true */
+    hideFilters?: boolean;
     /**
      * Whether this table component is loading.
      */
@@ -90,6 +94,16 @@ export interface TableProps {
      * A loading component to show when the table is loading.
      */
     LoadingComponent?: () => JSX.Element;
+    /** A select component prop for the table filters */
+    SelectComponent?: (props: SelectComponentProps) => JSX.Element;
+    /** A multi select component prop for the table filters */
+    MultiSelectComponent?: (props: MultiSelectComponentProps) => JSX.Element;
+    /** A date range picker component prop for the table filters */
+    DateRangePickerComponent?: (props: DateRangePickerComponentProps) => JSX.Element;
+    /** A filter container component component prop for the table filters */
+    FilterContainerComponent?: ({ children, }: {
+        children: ReactNode;
+    }) => JSX.Element;
     /**
      * Styles the top-level container of the Table.
      *

package/dist/esm/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAe9D,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAyBD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IAEJ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAkC/B,CAAC;AA+GF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAuBf,OAAO,EACL,yBAAyB,EAEzB,oBAAoB,EACrB,MAAM,2BAA2B,CAAC;AAInC,OAAO,EACL,6BAA6B,EAE9B,MAAM,wCAAwC,CAAC;AAGhD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAoCD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IAEJ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC,oDAAoD;IACpD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAE/D,0DAA0D;IAC1D,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,GAAG,CAAC,OAAO,CAAC;IAEzE,+DAA+D;IAC/D,wBAAwB,CAAC,EAAE,CACzB,KAAK,EAAE,6BAA6B,KACjC,GAAG,CAAC,OAAO,CAAC;IAEjB,wEAAwE;IACxE,wBAAwB,CAAC,EAAE,CAAC,EAC1B,QAAQ,GACT,EAAE;QACD,QAAQ,EAAE,SAAS,CAAC;KACrB,KAAK,GAAG,CAAC,OAAO,CAAC;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAuC/B,CAAC;AA8OF,eAAe,KAAK,CAAC"}