@quillsql/react 2.12.25 → 2.12.27

package/dist/cjs/Table.js

@@ -7,12 +7,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Context_1 = require("./Context");
 const dataFetcher_1 = require("./utils/dataFetcher");
-const merge_1 = require("./utils/merge");
 const QuillTable_1 = __importDefault(require("./components/QuillTable"));
-const useFormat_1 = require("./hooks/useFormat");
 const useExport_1 = require("./hooks/useExport");
 const errorProcessing_1 = require("./utils/errorProcessing");
-const Chart_1 = require("./Chart");
+const dashboard_1 = require("./utils/dashboard");
+const valueFormatter_1 = require("./utils/valueFormatter");
+const filterProcessing_1 = require("./utils/filterProcessing");
+const UiComponents_1 = require("./components/UiComponents");
+const DashboardFilter_1 = require("./components/Dashboard/DashboardFilter");
+const QuillSelect_1 = require("./components/QuillSelect");
+const QuillMultiSelect_1 = require("./components/QuillMultiSelect");
+const QuillDateRangePicker_1 = require("./DateRangePicker/QuillDateRangePicker");
+const hooks_1 = require("./hooks");
 /**
  * ### Quill Table
  *
@@ -52,69 +58,137 @@ const Table = (props) => {
     if ('rows' in data && 'columns' in data) {
         return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { hideCSVDownloadButton: data.hideCSVDownloadButton, columns: data.columns, rows: data.rows, className: data.className, containerStyle: data.containerStyle, LoadingComponent: data.LoadingComponent, isLoading: data.isLoading, downloadCSV: data.downloadCSV }));
     }
-    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { hideCSVDownloadButton: data.hideCSVDownloadButton, dispatch: dispatch, dashboard: dashboard, reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, dashboardFilters: dashboardFilters, client: client, csvFilename: data.csvFilename, LoadingComponent: data.LoadingComponent }));
+    return ((0, jsx_runtime_1.jsx)(ChartUpdater, { hideCSVDownloadButton: data.hideCSVDownloadButton, dispatch: dispatch, dashboardContext: dashboard, reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, dashboardFilters: dashboardFilters, client: client, csvFilename: data.csvFilename, LoadingComponent: data.LoadingComponent, SelectComponent: data.SelectComponent, MultiSelectComponent: data.MultiSelectComponent, DateRangePickerComponent: data.DateRangePickerComponent, FilterContainerComponent: data.FilterContainerComponent, hideFilters: data.hideFilters }));
 };
-const ChartUpdater = ({ reportId, containerStyle, className, dashboard, dispatch, client, dashboardFilters, csvFilename, hideCSVDownloadButton = true, LoadingComponent, }) => {
-    const specificDashboardFilter = (0, react_1.useMemo)(() => {
-        return dashboardFilters
-            .sort((filter) => (filter.filterType === 'date_range' ? -1 : 1))
-            .filter((f) => dashboard &&
-            dashboard[reportId] &&
-            f &&
-            f.dashboardName === dashboard[reportId].dashboardName);
-    }, [dashboardFilters, dashboard]);
-    const { rows, loading } = (0, useFormat_1.useMemoizedRows)(reportId);
+const ChartUpdater = ({ reportId, containerStyle, className, dashboardContext, dispatch, client, dashboardFilters, csvFilename, hideCSVDownloadButton = true, hideFilters = true, LoadingComponent, SelectComponent = QuillSelect_1.QuillSelectComponent, MultiSelectComponent = QuillMultiSelect_1.QuillMultiSelectComponent, DateRangePickerComponent = QuillDateRangePicker_1.QuillDateRangePicker, FilterContainerComponent = UiComponents_1.QuillFilterContainerComponent, }) => {
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
     const { downloadCSV } = (0, useExport_1.useExport)(reportId);
     const [customFields] = (0, react_1.useContext)(Context_1.CustomFieldContext);
-    (0, react_1.useEffect)(() => {
-        let isSubscribed = true;
-        async function getChartOptions() {
-            if (!(0, Chart_1.didFiltersChange)(dashboard[reportId], specificDashboardFilter)) {
-                return;
-            }
-            if (isSubscribed) {
-                try {
-                    const hostedBody = {
-                        metadata: {
-                            dashboardItemId: reportId,
-                            orgId: client.customerId || '*',
-                            task: 'item',
-                            filters: [...Object.values(specificDashboardFilter)],
-                            clientId: client.publicKey,
-                            databaseType: client?.databaseType,
-                            customFields,
-                        },
-                    };
-                    const cloudBody = {
-                        id: reportId,
-                        filters: [...Object.values(specificDashboardFilter)],
-                    };
-                    const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
-                    (0, errorProcessing_1.processFilterErrorList)(resp);
-                    if (resp && resp.name !== 'error') {
-                        if (resp.compareRows) {
-                            (0, merge_1.mergeComparisonRange)(resp);
-                        }
-                        dispatch({
-                            type: 'UPDATE_DASHBOARD_ITEM',
-                            id: reportId,
-                            data: {
-                                ...resp,
-                                filtersApplied: specificDashboardFilter,
-                            },
-                        });
-                    }
+    const [rows, setRows] = (0, react_1.useState)([]);
+    const [columns, setColumns] = (0, react_1.useState)([]);
+    const [tableFilters, setTableFilters] = (0, react_1.useState)([]);
+    const [filterUpdateIndex, setFilterUpdateIndex] = (0, react_1.useState)(0);
+    const { reportFiltersDispatch, reportFilters } = (0, react_1.useContext)(Context_1.ReportFiltersContext);
+    const theme = (0, hooks_1.useTheme)();
+    const getChartData = async (reportFilterInfo) => {
+        try {
+            const filters = reportFilterInfo.filters;
+            setLoading(true);
+            const hostedBody = {
+                metadata: {
+                    dashboardItemId: reportId,
+                    orgId: client.customerId || '*',
+                    clientId: client.publicKey,
+                    task: 'item',
+                    getDefaultDashboardFilters: filters ? false : true,
+                    databaseType: client?.databaseType,
+                    customFields,
+                    filters,
+                },
+            };
+            const cloudBody = {
+                id: reportId,
+            };
+            const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'same-origin', hostedBody, cloudBody);
+            (0, errorProcessing_1.processFilterErrorList)(resp);
+            if (resp && resp.name !== 'error' && !resp.errorMessage) {
+                const cleanedReport = await (0, dashboard_1.cleanDashboardItem)(resp, filters ? filters : resp.filters);
+                if (cleanedReport.chartType === 'table' && cleanedReport.pivot) {
+                    cleanedReport.columns = cleanedReport.yAxisFields;
                 }
-                catch (e) {
-                    console.log('Error fetching chart: ', e);
+                let filterArray = filters;
+                if (!filterArray) {
+                    filterArray = resp.filters.map((filter) => {
+                        return (0, filterProcessing_1.processFilterFromBackend)(filter, resp.rows);
+                    });
+                    reportFiltersDispatch({
+                        type: 'UPDATE_REPORT_FILTER',
+                        id: reportId,
+                        data: {
+                            filters: filterArray,
+                            updateIndex: reportFilterInfo.updateIndex,
+                        },
+                    });
                 }
+                setFilterUpdateIndex(reportFilterInfo.updateIndex);
+                setTableFilters(filterArray);
             }
+            setRows(resp.rows.map((row) => {
+                return resp.columns.reduce((formattedRow, column) => {
+                    // Apply the format function to each field in the row
+                    const formattedValue = (0, valueFormatter_1.quillFormat)({
+                        value: row[column.field],
+                        format: column.format,
+                    });
+                    formattedRow[column.field] = formattedValue;
+                    return formattedRow;
+                }, {});
+            }));
+            setColumns(resp.columns);
+            setLoading(false);
+        }
+        catch (e) {
+            console.log('Error fetching chart: ', e);
+            setLoading(false);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        // IF WE HAVE THE DATA IN DASHBOARD CONTEXT AND IT IS THE INITIAL LAOD DON'T FETCH DATA
+        if (initialLoad && dashboardContext[reportId]) {
+            setInitialLoad(false);
+            return;
+        }
+        setInitialLoad(false);
+        let parsedReportFilters = reportFilters[reportId]
+            ? reportFilters[reportId]
+            : { updateIndex: 0 };
+        getChartData(parsedReportFilters);
+    }, [client.customerId, reportId, reportFilters[reportId]?.updateIndex]);
+    (0, react_1.useEffect)(() => {
+        if (!dashboardContext || !dashboardContext[reportId]) {
+            return;
         }
-        getChartOptions();
-        return () => {
-            isSubscribed = false;
-        };
-    }, [specificDashboardFilter, client.customerId, reportId]);
-    return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { hideCSVDownloadButton: hideCSVDownloadButton, columns: dashboard[reportId]?.columns || [], rows: rows || dashboard[reportId]?.rows || [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV }));
+        setRows(dashboardContext[reportId].rows.map((row) => {
+            return dashboardContext[reportId].columns.reduce((formattedRow, column) => {
+                // Apply the format function to each field in the row
+                const formattedValue = (0, valueFormatter_1.quillFormat)({
+                    value: row[column.field],
+                    format: column.format,
+                });
+                formattedRow[column.field] = formattedValue;
+                return formattedRow;
+            }, {});
+        }));
+        setColumns(dashboardContext[reportId].columns);
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [!hideFilters && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    display: 'flex',
+                    boxSizing: 'content-box',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                }, children: (0, jsx_runtime_1.jsx)(FilterContainerComponent, { children: tableFilters.map((filter, index) => ((0, jsx_runtime_1.jsx)(DashboardFilter_1.DashboardFilter, { filter: filter, onChangeFilter: (filter, value = null, comparison = null) => {
+                            const updatedFilters = tableFilters.map((f) => {
+                                if (f.field === filter.field ||
+                                    (f.filterType === 'date_range' &&
+                                        filter.filterType === 'date_range')) {
+                                    return (0, filterProcessing_1.updateFilter)(f, value, comparison);
+                                }
+                                return f;
+                            });
+                            setTableFilters(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))) }) })), (0, jsx_runtime_1.jsx)(QuillTable_1.default, { hideCSVDownloadButton: hideCSVDownloadButton, columns: columns ?? [], rows: rows ?? [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV })] }));
 };
 exports.default = Table;

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;AAEnD,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAIhG,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,wBAAwB,GAAG,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,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,oBAAoB,EAChB,wBAAwB,GACxB,KAAK,CAAC,mBAAmB,CAAC,wBAAwB,CAAC,CAAC;IACxD,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,eAAsC,EACtC,oBAAgD,EAChD,wBAAwB,EACxB,KAAK,GACN,EAAE,oBAAoB,kDAoItB"}
+{"version":3,"file":"DashboardFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAIhG,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,wBAAwB,GAAG,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,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,oBAAoB,EAChB,wBAAwB,GACxB,KAAK,CAAC,mBAAmB,CAAC,wBAAwB,CAAC,CAAC;IACxD,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,eAAsC,EACtC,oBAAgD,EAChD,wBAAwB,EACxB,KAAK,GACN,EAAE,oBAAoB,kDAmItB"}

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

@@ -19,7 +19,7 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelect
         }
     }, [filter]);
     if (filter.filterType === 'string') {
-        if (!filter.options) {
+        if (!filter.options || filter.options.length === 0) {
             return null;
         }
         if (filter.stringFilterType === 'multiselect') {

package/dist/cjs/utils/dashboard.d.ts

@@ -9,4 +9,5 @@ import { QuillReportInternal } from '../Dashboard';
 export declare function cleanDashboardItem(item: {
     [key: string]: any;
 } | undefined, dashboardFilters: any, client?: any, dateBucket?: string): Promise<QuillReportInternal>;
+export declare function getDashboard(dashboardName: string, client: any): Promise<any>;
 //# sourceMappingURL=dashboard.d.ts.map

package/dist/cjs/utils/dashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../../src/utils/dashboard.ts"],"names":[],"mappings":"AACA,OAAO,EAA2B,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAkC5E;;;;;;GAMG;AACH,wBAAsB,kBAAkB,CACtC,IAAI,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG,SAAS,EACxC,gBAAgB,EAAE,GAAG,EACrB,MAAM,CAAC,EAAE,GAAG,EACZ,UAAU,CAAC,EAAE,MAAM,GAClB,OAAO,CAAC,mBAAmB,CAAC,CA+C9B"}
+{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../../src/utils/dashboard.ts"],"names":[],"mappings":"AACA,OAAO,EAA2B,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAkC5E;;;;;;GAMG;AACH,wBAAsB,kBAAkB,CACtC,IAAI,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,GAAG,SAAS,EACxC,gBAAgB,EAAE,GAAG,EACrB,MAAM,CAAC,EAAE,GAAG,EACZ,UAAU,CAAC,EAAE,MAAM,GAClB,OAAO,CAAC,mBAAmB,CAAC,CA+C9B;AAwQD,wBAAsB,YAAY,CAAC,aAAa,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,GAAI,OAAO,CAAC,GAAG,CAAC,CA0BpF"}

package/dist/cjs/utils/dashboard.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cleanDashboardItem = void 0;
+exports.getDashboard = exports.cleanDashboardItem = void 0;
 const valueFormatter_1 = require("./valueFormatter");
 const PivotModal_1 = require("../internals/ReportBuilder/PivotModal");
 const textProcessing_1 = require("./textProcessing");
@@ -278,3 +278,22 @@ function extractPivotedYAxis(pivotTable, itemInfo, config = undefined) {
     }
     return fields;
 }
+async function getDashboard(dashboardName, client) {
+    const searchParams = new URLSearchParams({
+        publicKey: client.publicKey,
+        orgId: client.customerId,
+        name: dashboardName,
+    }).toString();
+    const hostedBody = {
+        metadata: {
+            name: dashboardName,
+            task: 'config',
+            clientId: client.publicKey,
+            orgId: client.customerId || '*',
+            databaseType: client.databaseType,
+        },
+    };
+    const resp = await (0, dataFetcher_1.getData)(client, `dashconfig?${searchParams}`, 'omit', hostedBody, null, 'GET');
+    return resp;
+}
+exports.getDashboard = getDashboard;

package/dist/cjs/utils/filterProcessing.d.ts

@@ -1,2 +1,4 @@
 export declare function findAndProcessDateFilter(filters: any[]): any;
+export declare function processFilterFromBackend(filter: any, rows: any[]): any;
+export declare function updateFilter(filter: any, value?: any, comparison?: any): any;
 //# sourceMappingURL=filterProcessing.d.ts.map

package/dist/cjs/utils/filterProcessing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filterProcessing.d.ts","sourceRoot":"","sources":["../../../src/utils/filterProcessing.ts"],"names":[],"mappings":"AAAA,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,GAAG,CAoB5D"}
+{"version":3,"file":"filterProcessing.d.ts","sourceRoot":"","sources":["../../../src/utils/filterProcessing.ts"],"names":[],"mappings":"AAQA,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,GAAG,CAoB5D;AAMD,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,OA4BhE;AAED,wBAAgB,YAAY,CAC1B,MAAM,EAAE,GAAG,EACX,KAAK,GAAE,GAAU,EACjB,UAAU,GAAE,GAAU,OAuGvB"}

package/dist/cjs/utils/filterProcessing.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.findAndProcessDateFilter = void 0;
+exports.updateFilter = exports.processFilterFromBackend = exports.findAndProcessDateFilter = void 0;
+const dateRangePickerUtils_1 = require("../DateRangePicker/dateRangePickerUtils");
 function findAndProcessDateFilter(filters) {
     let dateFilter = filters.find((filter) => filter.filterType === 'date_range');
     if (dateFilter) {
@@ -23,3 +24,130 @@ exports.findAndProcessDateFilter = findAndProcessDateFilter;
 function isValidDate(date) {
     return !isNaN(Date.parse(date));
 }
+function processFilterFromBackend(filter, rows) {
+    if (filter.filterType === 'date_range') {
+        return {
+            ...filter,
+            startDate: new Date(filter.startDate),
+            endDate: new Date(filter.endDate),
+            options: dateRangePickerUtils_1.defaultOptionsV2,
+            comparisonRange: {
+                ...filter.comparisonRange,
+                value: filter.defaultComparisonRange,
+            },
+        };
+    }
+    if (filter.filterType === 'string') {
+        const options = rows.map((row) => row[filter.field]);
+        const distinctOptions = Array.from(new Set(options)).filter((value) => value !== undefined && value !== null);
+        return {
+            ...filter,
+            options: distinctOptions.map((option) => ({
+                label: option,
+                value: option,
+            })),
+        };
+    }
+    return filter;
+}
+exports.processFilterFromBackend = processFilterFromBackend;
+function updateFilter(filter, value = null, comparison = null) {
+    //for dateObjects only, since values are arrays for dateObjects
+    const { selectedValue: _, operator, ...filterWithoutSelectedValue } = filter; // _ is a throwaway variable
+    if (filter.filterType === 'string') {
+        let selectedValue = {};
+        if (value) {
+            if (filter.stringFilterType === 'multiselect') {
+                const parsedValue = JSON.parse(value);
+                if (parsedValue.length === 0) {
+                    selectedValue = { values: [] };
+                }
+                else {
+                    selectedValue = { values: parsedValue, operator: 'IN' };
+                }
+            }
+            else {
+                selectedValue = { selectedValue: value };
+            }
+        }
+        return {
+            ...filterWithoutSelectedValue,
+            ...selectedValue,
+            dashboardName: name,
+        };
+    }
+    if (filter.filterType === 'date' || filter.filterType === 'date_range') {
+        let presetsOptions = dateRangePickerUtils_1.defaultOptionsV2;
+        if (filter.presetRanges) {
+            presetsOptions = filter.presetRanges.map((elem) => {
+                if (!elem.isStatic) {
+                    return {
+                        label: elem.label,
+                        value: elem.value,
+                        startDate: dateRangePickerUtils_1.PRIMARY_RANGE[elem.value].start,
+                        endDate: dateRangePickerUtils_1.PRIMARY_RANGE[elem.value].end,
+                    };
+                }
+                return {
+                    label: elem.label,
+                    value: elem.value,
+                    startDate: new Date(elem.startDate),
+                    endDate: new Date(elem.endDate),
+                };
+            });
+        }
+        if (comparison ||
+            (filter.comparison && filter.comparisonRange.value !== 'NO_COMPARISON')) {
+            let preset = '';
+            if (comparison) {
+                preset = filter.preset.label;
+            }
+            const key = comparison?.value || filter.comparisonRange.value;
+            let primaryRange = {
+                start: value ? value.startDate : filter.startDate,
+                end: value ? value.endDate : filter.endDate,
+            };
+            if (value && value.preset) {
+                preset = value.preset;
+                primaryRange = (0, dateRangePickerUtils_1.getRangeFromPresetOptions)(value.preset, presetsOptions);
+            }
+            return {
+                startDate: primaryRange.start,
+                endDate: primaryRange.end,
+                filterType: 'date_range',
+                label: 'Date',
+                field: 'date_range',
+                preset: { label: preset },
+                options: filter.options,
+                comparison: true,
+                comparisonRange: {
+                    startDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)?.start,
+                    endDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)?.end,
+                    value: key,
+                },
+                dashboardName: name,
+            };
+        }
+        else {
+            const primaryRange = value && value.preset
+                ? (0, dateRangePickerUtils_1.getRangeFromPresetOptions)(value.preset, presetsOptions)
+                : {
+                    start: value?.startDate || filter.startDate,
+                    end: value?.endDate || filter.endDate,
+                };
+            const preset = value?.preset ? value.preset : '';
+            return {
+                ...filter,
+                preset: { label: preset },
+                startDate: primaryRange.start,
+                endDate: primaryRange.end,
+                filterType: 'date_range',
+                field: 'date_range',
+                options: filter.options,
+                label: 'Date',
+                dashboardName: name,
+            };
+        }
+    }
+}
+exports.updateFilter = updateFilter;

package/dist/esm/Chart.d.ts

@@ -1,7 +1,9 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import { QuillTheme } from './QuillProvider';
 import { type QuillReport } from './Dashboard';
 import { Filter } from './models/Filter';
+import { MultiSelectComponentProps, SelectComponentProps } from './components/UiComponents';
+import { DateRangePickerComponentProps } from './DateRangePicker/QuillDateRangePicker';
 interface BaseChartProps {
     colors?: string[];
     containerStyle?: React.CSSProperties;
@@ -99,6 +101,8 @@ export interface ChartProps {
      * Whether the date range filter has been disabled.
      */
     hideDateRangeFilter?: boolean;
+    /** Whether to hide the table filters component, deafulted to true */
+    hideFilters?: boolean;
     /**
      * Whether the comparison range shows as dashed for date comparison line
      * charts (as opposed to the default solid line).
@@ -143,6 +147,16 @@ export interface ChartProps {
      * A loading component to show when the chart 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 Chart.
      *
@@ -199,7 +213,8 @@ interface ChartDisplayProps extends WithConfig {
     onClickChartElement?: (data: any) => void;
     dateBucket?: string;
     overrideTheme?: QuillTheme;
+    initialDateFilter?: any;
 }
-export declare const ChartDisplay: ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter, hideHorizontalCartesianGrid, hideVerticalCartesianGrid, hideSubsequentXAxisTicks, cartesianGridLineStyle, cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading, paginating, error, isComparison, colorMap, LoadingComponent, onPageChange, onSortChange, onClickChartElement, dateBucket, overrideTheme, }: ChartDisplayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChartDisplay: ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter, hideHorizontalCartesianGrid, hideVerticalCartesianGrid, hideSubsequentXAxisTicks, cartesianGridLineStyle, cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading, paginating, error, isComparison, colorMap, LoadingComponent, onPageChange, onSortChange, onClickChartElement, dateBucket, overrideTheme, initialDateFilter, }: ChartDisplayProps) => import("react/jsx-runtime").JSX.Element;
 export default Chart;
 //# sourceMappingURL=Chart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/Chart.tsx"],"names":[],"mappings":"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"}