@quillsql/react 2.12.26 → 2.12.27

package/dist/esm/Table.js

@@ -1,13 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo } from 'react';
-import { ClientContext, CustomFieldContext, DashboardContext, DashboardFiltersContext, } from './Context';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useState, } from 'react';
+import { ClientContext, CustomFieldContext, DashboardContext, DashboardFiltersContext, ReportFiltersContext, } from './Context';
 import { getData } from './utils/dataFetcher';
-import { mergeComparisonRange } from './utils/merge';
 import QuillTable from './components/QuillTable';
-import { useMemoizedRows } from './hooks/useFormat';
 import { useExport } from './hooks/useExport';
 import { processFilterErrorList } from './utils/errorProcessing';
-import { didFiltersChange } from './Chart';
+import { cleanDashboardItem } from './utils/dashboard';
+import { quillFormat } from './utils/valueFormatter';
+import { processFilterFromBackend, updateFilter, } from './utils/filterProcessing';
+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';
+import { useTheme } from './hooks';
 /**
  * ### Quill Table
  *
@@ -47,69 +53,137 @@ const Table = (props) => {
     if ('rows' in data && 'columns' in data) {
         return (_jsx(QuillTable, { 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 (_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 (_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 = 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 } = useMemoizedRows(reportId);
+const ChartUpdater = ({ reportId, containerStyle, className, dashboardContext, dispatch, client, dashboardFilters, csvFilename, hideCSVDownloadButton = true, hideFilters = true, LoadingComponent, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponent, DateRangePickerComponent = QuillDateRangePicker, FilterContainerComponent = QuillFilterContainerComponent, }) => {
+    const [loading, setLoading] = useState(false);
+    const [initialLoad, setInitialLoad] = useState(true);
     const { downloadCSV } = useExport(reportId);
     const [customFields] = useContext(CustomFieldContext);
-    useEffect(() => {
-        let isSubscribed = true;
-        async function getChartOptions() {
-            if (!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 getData(client, 'itempost', 'omit', hostedBody, cloudBody);
-                    processFilterErrorList(resp);
-                    if (resp && resp.name !== 'error') {
-                        if (resp.compareRows) {
-                            mergeComparisonRange(resp);
-                        }
-                        dispatch({
-                            type: 'UPDATE_DASHBOARD_ITEM',
-                            id: reportId,
-                            data: {
-                                ...resp,
-                                filtersApplied: specificDashboardFilter,
-                            },
-                        });
-                    }
+    const [rows, setRows] = useState([]);
+    const [columns, setColumns] = useState([]);
+    const [tableFilters, setTableFilters] = useState([]);
+    const [filterUpdateIndex, setFilterUpdateIndex] = useState(0);
+    const { reportFiltersDispatch, reportFilters } = useContext(ReportFiltersContext);
+    const theme = 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 getData(client, 'itempost', 'same-origin', hostedBody, cloudBody);
+            processFilterErrorList(resp);
+            if (resp && resp.name !== 'error' && !resp.errorMessage) {
+                const cleanedReport = await 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 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 = 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);
+        }
+    };
+    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]);
+    useEffect(() => {
+        if (!dashboardContext || !dashboardContext[reportId]) {
+            return;
         }
-        getChartOptions();
-        return () => {
-            isSubscribed = false;
-        };
-    }, [specificDashboardFilter, client.customerId, reportId]);
-    return (_jsx(QuillTable, { 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 = quillFormat({
+                    value: row[column.field],
+                    format: column.format,
+                });
+                formattedRow[column.field] = formattedValue;
+                return formattedRow;
+            }, {});
+        }));
+        setColumns(dashboardContext[reportId].columns);
+    }, []);
+    return (_jsxs("div", { children: [!hideFilters && (_jsx("div", { style: {
+                    display: 'flex',
+                    boxSizing: 'content-box',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                }, children: _jsx(FilterContainerComponent, { children: tableFilters.map((filter, index) => (_jsx(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 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))) }) })), _jsx(QuillTable, { hideCSVDownloadButton: hideCSVDownloadButton, columns: columns ?? [], rows: rows ?? [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV })] }));
 };
 export default Table;

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;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/esm/components/Dashboard/DashboardFilter.js

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

package/dist/esm/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/esm/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/esm/utils/dashboard.js

@@ -274,3 +274,21 @@ function extractPivotedYAxis(pivotTable, itemInfo, config = undefined) {
     }
     return fields;
 }
+export 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 getData(client, `dashconfig?${searchParams}`, 'omit', hostedBody, null, 'GET');
+    return resp;
+}

package/dist/esm/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/esm/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/esm/utils/filterProcessing.js

@@ -1,3 +1,4 @@
+import { COMPARISON_RANGE, PRIMARY_RANGE, defaultOptionsV2, getRangeFromPresetOptions, } from '../DateRangePicker/dateRangePickerUtils';
 export function findAndProcessDateFilter(filters) {
     let dateFilter = filters.find((filter) => filter.filterType === 'date_range');
     if (dateFilter) {
@@ -19,3 +20,128 @@ export function findAndProcessDateFilter(filters) {
 function isValidDate(date) {
     return !isNaN(Date.parse(date));
 }
+export function processFilterFromBackend(filter, rows) {
+    if (filter.filterType === 'date_range') {
+        return {
+            ...filter,
+            startDate: new Date(filter.startDate),
+            endDate: new Date(filter.endDate),
+            options: 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;
+}
+export 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 = defaultOptionsV2;
+        if (filter.presetRanges) {
+            presetsOptions = filter.presetRanges.map((elem) => {
+                if (!elem.isStatic) {
+                    return {
+                        label: elem.label,
+                        value: elem.value,
+                        startDate: PRIMARY_RANGE[elem.value].start,
+                        endDate: 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 = 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: COMPARISON_RANGE[key](primaryRange)?.start,
+                    endDate: COMPARISON_RANGE[key](primaryRange)?.end,
+                    value: key,
+                },
+                dashboardName: name,
+            };
+        }
+        else {
+            const primaryRange = value && value.preset
+                ? 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,
+            };
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "2.12.26",
+  "version": "2.12.27",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",