@quillsql/react 2.13.25 → 2.13.26

package/dist/cjs/SQLEditor.js

@@ -16,6 +16,7 @@ const ChartBuilder_1 = require("./ChartBuilder");
 const UiComponents_1 = require("./components/UiComponents");
 const UiComponents_2 = require("./components/UiComponents");
 const width_1 = require("./utils/width");
+const Report_1 = require("./models/Report");
 const QuillCard_1 = require("./components/QuillCard");
 const QuillSelect_1 = require("./components/QuillSelect");
 const tableProcessing_1 = require("./utils/tableProcessing");
@@ -90,17 +91,17 @@ function setEditorTheme(_editor, monaco, schema, databaseType, clientName) {
  * ### SQLEditor API
  * @see https://docs.quillsql.com/components/sql-editor
  */
-function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextInputComponent = UiComponents_2.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, TableComponent = UiComponents_1.QuillTableSQLEditorComponent, isNewQueryEnabled = false, LoadingComponent = UiComponents_1.QuillLoadingComponent, ModalComponent = UiComponents_1.MemoizedModal, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, LabelComponent = UiComponents_1.MemoizedLabel, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, TextComponent = UiComponents_1.MemoizedText, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, ChartBuilderFormContainer = UiComponents_1.QuillChartBuilderFormContainer, defaultQuery, destinationDashboard, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, onDiscardChanges, onSaveChanges, onCloseChartBuilder, isChartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, isAdminEnabled = false, chartBuilderTitle, runQueryOnMount = false, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', report = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, className, onClickChartElement, }) {
+function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextInputComponent = UiComponents_2.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, TableComponent = UiComponents_1.QuillTableSQLEditorComponent, isNewQueryEnabled = false, LoadingComponent = UiComponents_1.QuillLoadingComponent, ModalComponent = UiComponents_1.MemoizedModal, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, LabelComponent = UiComponents_1.MemoizedLabel, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, TextComponent = UiComponents_1.MemoizedText, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, ChartBuilderFormContainer = UiComponents_1.QuillChartBuilderFormContainer, defaultQuery, destinationDashboard, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, onDiscardChanges, onSaveChanges, onCloseChartBuilder, isChartBuilderEnabled = false, isAdminEnabled = false, chartBuilderTitle, runQueryOnMount = false, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', report = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, className, onClickChartElement, }) {
     const [sqlPrompt, setSqlPrompt] = (0, react_1.useState)('');
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const [query, setQuery] = (0, react_1.useState)(defaultQuery);
     const [rows, setRows] = (0, react_1.useState)([]);
-    const [filteredRows, setFilteredRows] = (0, react_1.useState)([]);
-    const [chartBuilderInFilteredPreview, setChartBuilderInFilteredPreview] = (0, react_1.useState)(true);
+    const [filtersEnabled, setFiltersEnabled] = (0, react_1.useState)(!!report);
     const [columns, setColumns] = (0, react_1.useState)([]);
     const [schemaData] = (0, react_1.useContext)(Context_1.SchemaDataContext);
     const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
+    const [, dashboardDispatch] = (0, react_1.useContext)(Context_1.DashboardContext);
     const specificDashboardFilters = (0, react_1.useMemo)(() => {
         return Object.values(dashboardFilters[report?.dashboardName ?? destinationDashboard ?? ''] ??
             {}).map((f) => f.filter);
@@ -181,7 +182,6 @@ function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryB
     (0, react_1.useEffect)(() => {
         if (client) {
             setRows([]);
-            setFilteredRows([]);
             setColumns([]);
             setDisplayTable(false);
         }
@@ -218,7 +218,7 @@ function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryB
         }
     };
     const onSortChange = (sort) => {
-        if (tempReport && (0, paginationProcessing_1.shouldSortInMemory)(pagination, rowCount, false)) {
+        if (tempReport && (0, paginationProcessing_1.shouldSortInMemory)(pagination, rowCount)) {
             return;
         }
         const updatedProcessing = { page: pagination, sort };
@@ -226,9 +226,6 @@ function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryB
         setCurrentProcessing(updatedProcessing);
         setMaxPage(0);
     };
-    const onFilterPreviewChange = (preview) => {
-        setChartBuilderInFilteredPreview(preview);
-    };
     const fetchRowCount = async (processing, includeFilters) => {
         if (!client || !query) {
             return;
@@ -257,27 +254,25 @@ function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryB
                 setMaxPage(1);
             }
             const tableInfo = await (0, tableProcessing_1.fetchResultsByQuery)(query, client, processing, schemaData.customFields, undefined, undefined, true);
-            const filteredTableInfo = await (0, tableProcessing_1.fetchResultsByQuery)(query, client, processing, schemaData.customFields, specificDashboardFilters, tempReport.dateField ?? report?.dateField, true);
             if (!!tableInfo.error) {
                 throw new Error(tableInfo.error);
             }
-            else if (filteredTableInfo.error) {
-                throw new Error(filteredTableInfo.error);
+            // Search through tableInfo.columns for any two columns with the same 'field' value
+            const duplicateColumns = tableInfo.columns
+                .map((col) => col.field)
+                .filter((field, index, self) => self.indexOf(field) !== index);
+            if (duplicateColumns.length > 0) {
+                setErrorMessage(`Column named "${duplicateColumns[0]}" occurs more than once in results.`);
+                return;
             }
-            // else if (tableInfo.rows.length === 0) {
-            //   throw new Error('No data found');
-            // }
             fetchRowCount(processing, includeFilters);
             setSqlQueryLoading(false);
             setCurrentProcessing(processing);
             let tempRows = [...rows, ...tableInfo.rows];
-            let tempFilteredRows = [...filteredRows, ...filteredTableInfo.rows];
             if (resetRows) {
                 tempRows = tableInfo.rows;
-                tempFilteredRows = filteredTableInfo.rows;
             }
             setRows(tempRows);
-            setFilteredRows(tempFilteredRows);
             setFormattedRows((0, report_1.formatRowsFromReport)({ rows: tempRows, columns: tableInfo.columns }));
             if (onChangeData) {
                 onChangeData(tempRows);
@@ -297,7 +292,6 @@ function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryB
                 ...formData,
                 itemQuery: tableInfo.itemQuery,
                 rowCount: tableInfo.rowCount ?? tableInfo.rows.length,
-                filtersApplied: tempReport.filtersApplied ?? [],
                 rows: tempRows,
                 columns: tableInfo.columns,
             };
@@ -429,6 +423,21 @@ function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryB
                                                                     }, label: "Run query" })), isNewQueryEnabled && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleClearQuery, label: "Clear query" })), addToDashboardButtonLabel ===
                                                                     'Add to dashboard' && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: async () => {
                                                                         onSaveChanges && onSaveChanges();
+                                                                        dashboardDispatch({
+                                                                            id: Report_1.TEMP_REPORT_ID,
+                                                                            type: 'ADD_DASHBOARD_ITEM',
+                                                                            data: {
+                                                                                ...tempReport,
+                                                                                id: Report_1.TEMP_REPORT_ID,
+                                                                                rows,
+                                                                                columns: columns,
+                                                                                columnInternal: columns,
+                                                                                rowCount: rowCount ?? 0,
+                                                                                queryString: query ?? '',
+                                                                                dashboardName: report?.dashboardName ??
+                                                                                    destinationDashboard,
+                                                                            },
+                                                                        });
                                                                         setIsChartBuilderOpen(true);
                                                                     }, label: addToDashboardButtonLabel, disabled: !!errorMessage ||
                                                                         !(lastSuccessfulQuery === query) ||
@@ -478,13 +487,27 @@ function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryB
                                             marginBottom: 5,
                                         }, children: [onDiscardChanges && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: onDiscardChanges, label: "Discard changes" })), addToDashboardButtonLabel !== 'Add to dashboard' && ((0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: async () => {
                                                     onSaveChanges && onSaveChanges();
+                                                    dashboardDispatch({
+                                                        id: Report_1.TEMP_REPORT_ID,
+                                                        type: 'ADD_DASHBOARD_ITEM',
+                                                        data: {
+                                                            ...tempReport,
+                                                            id: Report_1.TEMP_REPORT_ID,
+                                                            rows,
+                                                            columns: columns,
+                                                            columnInternal: columns,
+                                                            rowCount: rowCount ?? 0,
+                                                            queryString: query ?? '',
+                                                            dashboardName: report?.dashboardName ?? destinationDashboard,
+                                                        },
+                                                    });
                                                     setIsChartBuilderOpen(true);
-                                                }, label: addToDashboardButtonLabel, disabled: !!errorMessage || !(lastSuccessfulQuery === query) }))] }))] })] }) }) })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && ((0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { rows: chartBuilderInFilteredPreview ? filteredRows : rows, columns: columns, query: query, isHorizontalView: isChartBuilderHorizontalView, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, isAdmin: isAdminEnabled, destinationDashboard: destinationDashboard, title: chartBuilderTitle, buttonLabel: addToDashboardButtonLabel, report: tempReport, pivot: tempReport?.pivot ?? undefined, pivotData: tempReport?.pivotRows && tempReport?.pivotColumns
-                    ? {
-                        rows: tempReport.pivotRows,
-                        columns: tempReport.pivotColumns,
-                    }
-                    : undefined, organizationName: organizationName, CardComponent: CardComponent, TableComponent: TableComponent, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, TextInputComponent: TextInputComponent, SelectComponent: SelectComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, PopoverComponent: PopoverComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, onClickChartElement: onClickChartElement, rowCount: rowCount, onPageChange: onPageChange, onSortChange: onSortChange, onFilterPreviewChange: onFilterPreviewChange, isLoading: sqlQueryLoading, isEditingMode: true }))] }));
+                                                }, label: addToDashboardButtonLabel, disabled: !!errorMessage || !(lastSuccessfulQuery === query) }))] }))] })] }) }) })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && ((0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { isHorizontalView: isChartBuilderHorizontalView, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, isAdmin: isAdminEnabled, title: chartBuilderTitle, buttonLabel: addToDashboardButtonLabel, reportId: report?.id, organizationName: organizationName, CardComponent: CardComponent, TableComponent: TableComponent, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, TextInputComponent: TextInputComponent, SelectComponent: SelectComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, PopoverComponent: PopoverComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, onClickChartElement: onClickChartElement, 
+                // onPageChange={onPageChange}
+                // onSortChange={onSortChange}
+                filtersEnabled: filtersEnabled, onFiltersEnabledChanged: (enabled) => setFiltersEnabled(enabled), 
+                // isLoading={sqlQueryLoading}
+                isEditingMode: true }))] }));
 }
 const SQLEditorComponent = ({ query, schema, databaseType, clientName, setQuery, setEditorMounted, handleRunQuery, defineEditorTheme, setEditorTheme, runQueryOnMount = false, theme, loading, LoadingComponent = UiComponents_1.QuillLoadingComponent, }) => {
     const [editorKey, setEditorKey] = (0, react_1.useState)(0);

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

@@ -45,7 +45,7 @@ function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, classNa
     return ((0, jsx_runtime_1.jsx)("div", { style: {
             boxSizing: 'content-box',
             ...containerStyle,
-        }, className: className, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { data: data ?? [], layout: 'horizontal', onClick: (event) => onClickChartElement
+        }, className: className, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.BarChart, { data: data ?? [], layout: 'horizontal', onClick: (event) => onClickChartElement
                     ? onClickChartElement(event?.activePayload
                         ? event.activePayload[0].payload
                         : undefined)

package/dist/cjs/components/Chart/InternalChart.d.ts

@@ -0,0 +1,25 @@
+import { ChartProps } from '../../Chart';
+import { QuillReport } from '../../models/Report';
+export declare function isEquivalent(filters1: any[], filters2: any[]): boolean;
+export declare function didFiltersChange(dashboardItem: any, filters: any[]): boolean;
+export type ColorMapType = {
+    [key: string]: {
+        primary: string;
+        comparison?: string;
+        primaryGradientStart?: string;
+        primaryGradientStop?: string;
+        comparisonGradientStart?: string;
+        comparisonGradientStop?: string;
+    };
+};
+export default function InternalChart({ report, colors, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid, hideVerticalCartesianGrid, hideSubsequentXAxisTicks, cartesianGridLineStyle, cartesianGridLineColor, comparisonLineStyle, hideDateRangeFilter, filtersEnabled, setFiltersEnabled, mapColorsToFields, LoadingComponent, SelectComponent, MultiSelectComponent, DateRangePickerComponent, MetricComponent, filters, onDashboardFilterChange, onClickChartElement, loading, error, isAdmin, filterToggleDisabled, }: Omit<ChartProps, 'reportId'> & {
+    report: QuillReport;
+    loading: boolean;
+    error?: string;
+    filtersEnabled: boolean;
+    setFiltersEnabled: (hide: boolean) => void;
+    isAdmin?: boolean;
+    onDashboardFilterChange: (label: string, value: any) => void;
+    filterToggleDisabled?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=InternalChart.d.ts.map

package/dist/cjs/components/Chart/InternalChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/InternalChart.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAgB,UAAU,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,WAAW,EAAkB,MAAM,qBAAqB,CAAC;AAMlE,wBAAgB,YAAY,CAAC,QAAQ,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,WAiH5D;AAED,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,WAKlE;AAkFD,MAAM,MAAM,YAAY,GAAG;IACzB,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,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,MAAM,EACN,MAAM,EACN,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,2BAAmC,EACnC,yBAAgC,EAChC,wBAAgC,EAChC,sBAAgC,EAChC,sBAAsB,EACtB,mBAAmB,EACnB,mBAA2B,EAC3B,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,gBAAuC,EACvC,eAAsC,EACtC,oBAAgD,EAChD,wBAA+C,EAC/C,eAAsC,EACtC,OAAO,EACP,uBAAuB,EACvB,mBAAmB,EACnB,OAAO,EACP,KAAK,EACL,OAAO,EACP,oBAAoB,GACrB,EAAE,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG;IAChC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uBAAuB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7D,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,2CA8VA"}

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

@@ -0,0 +1,385 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isEquivalent = isEquivalent;
+exports.didFiltersChange = didFiltersChange;
+exports.default = InternalChart;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const date_fns_1 = require("date-fns");
+const Context_1 = require("../../Context");
+const ChartSkeleton_1 = require("../../components/Chart/ChartSkeleton");
+const ChartError_1 = __importDefault(require("../../components/Chart/ChartError"));
+const Filter_1 = require("../../models/Filter");
+const filterProcessing_1 = require("../../utils/filterProcessing");
+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 MetricComponent_1 = __importDefault(require("../../components/Dashboard/MetricComponent"));
+const dateRangePickerUtils_1 = require("../../DateRangePicker/dateRangePickerUtils");
+const Chart_1 = require("../../Chart");
+const Report_1 = require("../../models/Report");
+function areDatesNearby(date1, date2) {
+    return Math.abs((0, date_fns_1.differenceInHours)(date1, date2)) < 24;
+}
+function isEquivalent(filters1, filters2) {
+    if (filters2.length !== filters1.length) {
+        return false;
+    }
+    // const filterKeys = Object.keys(filters2);
+    for (let i = 0; i < filters1.length; i++) {
+        const filter1 = filters1[i];
+        if (!filter1) {
+            return false;
+        }
+        const filter2 = filters2[i];
+        if (filter1.isUserFilter !== filter2.isUserFilter) {
+            return false;
+        }
+        else if (filter1.isUserFilter) {
+            if (filter1.operator !== filter2.operator ||
+                filter1.value !== filter2.value) {
+                return false;
+            }
+        }
+        const filterType = filter2.filterType;
+        if (filterType === 'string') {
+            if (filter1.stringFilterType === 'multiselect') {
+                if (filter1.values &&
+                    filter2.values &&
+                    filter1.values.length !== filter2.values.length) {
+                    return false;
+                }
+                if ((filter1.values && !filter2.values) ||
+                    (filter2.values && !filter1.values)) {
+                    return false;
+                }
+                // make sure that filter1.values is equivalent to filter2.values ignoring order
+                const sortedValues1 = filter1.values?.slice().sort() || [];
+                const sortedValues2 = filter2.values?.slice().sort() || [];
+                if (!sortedValues1.every((value, index) => value === sortedValues2[index])) {
+                    return false;
+                }
+            }
+            if (filter1.selectedValue !== filter2.selectedValue) {
+                return false;
+            }
+        }
+        else if (filter1?.operator === 'BETWEEN' &&
+            filter2?.operator === 'BETWEEN') {
+            if (!filter1?.values && !filter2?.values) {
+                continue;
+            }
+            else if (!filter1?.values || !filter2?.values) {
+                return false;
+            }
+            if (filter1?.values && filter2?.values) {
+                if (!areDatesNearby(filter1.values[0], filter2.values[0]) ||
+                    !areDatesNearby(filter1.values[1], filter2.values[1])) {
+                    return false;
+                }
+            }
+        }
+        else if (filterType === 'date_range') {
+            if (!filter1.startDate && !filter2.startDate) {
+                continue;
+            }
+            if (!areDatesNearby(filter1.startDate, filter2.startDate) ||
+                !areDatesNearby(filter1.endDate, filter2.endDate)) {
+                return false;
+            }
+            if (filter1.comparison !== filter2.comparison) {
+                return false;
+            }
+            if (filter1.comparisonRange && !filter2.comparisonRange) {
+                return false;
+            }
+            if (!filter1.comparisonRange && filter2.comparisonRange) {
+                return false;
+            }
+            if (filter1.comparisonRange && filter2.comparisonRange) {
+                if (!filter1.comparisonRange.startDate &&
+                    !filter2.comparisonRange.endDate) {
+                    continue;
+                }
+                if (!areDatesNearby(filter1.comparisonRange.startDate, filter2.comparisonRange.startDate) ||
+                    !areDatesNearby(filter1.comparisonRange.endDate, filter2.comparisonRange.endDate)) {
+                    return false;
+                }
+            }
+        }
+    }
+    return true;
+}
+function didFiltersChange(dashboardItem, filters) {
+    if (!dashboardItem?.filtersApplied || !filters) {
+        return true;
+    }
+    return !isEquivalent(dashboardItem.filtersApplied, filters);
+}
+const TogglePrimitive = ({ value, onClick, style, disabled, }) => {
+    const toggleStyle = {
+        container: {
+            display: 'inline-block',
+            position: 'relative',
+            width: '30px',
+            height: '18px',
+            borderRadius: '24px',
+            backgroundColor: value ? '#212121' : '#ccc',
+            cursor: 'pointer',
+            transition: 'background-color 0.4s',
+            // Fade out the toggle when disabled
+            opacity: disabled ? 0.5 : 1,
+            ...style,
+        },
+        circle: {
+            position: 'absolute',
+            top: '3px',
+            left: value ? '15px' : '3px',
+            width: '12px',
+            height: '12px',
+            borderRadius: '50%',
+            backgroundColor: '#FFF',
+            transition: 'left 0.4s',
+        },
+        icon: {
+            position: 'absolute',
+            top: '3px',
+            left: '3px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '20px',
+            height: '20px',
+            color: '#FFF',
+        },
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: toggleStyle.container, onClick: disabled ? () => { } : onClick, "aria-checked": value, role: "switch", "aria-label": "Toggle", children: [(0, jsx_runtime_1.jsx)("div", { style: toggleStyle.circle }), value ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                    ...toggleStyle.icon,
+                    left: '35px',
+                    color: '#FFC107',
+                } })) : ((0, jsx_runtime_1.jsx)("div", { style: {
+                    ...toggleStyle.icon,
+                    color: '#607D8B',
+                } }))] }));
+};
+function InternalChart({ report, colors, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, hideDateRangeFilter = false, filtersEnabled, setFiltersEnabled, mapColorsToFields, LoadingComponent = ChartSkeleton_1.QuillLoadingSkeleton, SelectComponent = QuillSelect_1.QuillSelectComponent, MultiSelectComponent = QuillMultiSelect_1.QuillMultiSelectComponent, DateRangePickerComponent = QuillDateRangePicker_1.QuillDateRangePicker, MetricComponent = MetricComponent_1.default, filters, onDashboardFilterChange, onClickChartElement, loading, error, isAdmin, filterToggleDisabled, }) {
+    const { reportFilters } = (0, react_1.useContext)(Context_1.ReportFiltersContext);
+    const { dashboardConfig } = (0, react_1.useContext)(Context_1.DashboardConfigContext);
+    const currentReportFilters = (0, react_1.useMemo)(() => {
+        const dashFilters = dashboardConfig[report?.dashboardName ?? '']?.config.filters;
+        if (!dashFilters)
+            return Object.values(reportFilters[report?.id ?? ''] ?? {});
+        // Sort the filters with "date_range" type first, followed by the rest in the same order as the dashFilters, by label.
+        return Object.values(reportFilters[report?.id ?? ''] ?? {}).sort((a, b) => {
+            if (a.filter.filterType === 'date_range' &&
+                b.filter.filterType !== 'date_range') {
+                return -1;
+            }
+            else if (a.filter.filterType !== 'date_range' &&
+                b.filter.filterType === 'date_range') {
+                return 1;
+            }
+            else {
+                return (dashFilters.findIndex((f) => f.label === a.filter.label) -
+                    dashFilters.findIndex((f) => f.label === b.filter.label));
+            }
+        });
+    }, [reportFilters, report?.id]);
+    const reportDateFilter = (0, react_1.useMemo)(() => {
+        return Object.values(reportFilters[report?.id ?? ''] ?? {}).find((f) => f.filter.filterType === 'date_range')?.filter;
+    }, [reportFilters, report?.id]);
+    const presetOptions = (0, react_1.useMemo)(() => {
+        return reportDateFilter
+            ? (reportDateFilter.presetRanges?.map((elem) => {
+                if (!elem.isStatic) {
+                    return {
+                        label: elem.label,
+                        value: elem.value,
+                        startDate: dateRangePickerUtils_1.PRIMARY_RANGE[elem.value]?.startDate ??
+                            dateRangePickerUtils_1.PRIMARY_RANGE['LAST_30_DAYS'].startDate,
+                        endDate: dateRangePickerUtils_1.PRIMARY_RANGE[elem.value]?.endDate ??
+                            dateRangePickerUtils_1.PRIMARY_RANGE['LAST_30_DAYS'].endDate,
+                    };
+                }
+                return {
+                    label: elem.label,
+                    value: elem.value,
+                    startDate: new Date(elem.startDate),
+                    endDate: new Date(elem.endDate),
+                };
+            }) ?? dateRangePickerUtils_1.defaultOptionsV2)
+            : dateRangePickerUtils_1.defaultOptionsV2;
+    }, [reportDateFilter]);
+    // const userFilters = useMemo(() => {
+    //   return filters?.filter(
+    //     (f) =>
+    //       f.filterType !== FilterType.DateCustomFilter &&
+    //       f.filterType !== FilterType.DateFilter &&
+    //       f.filterType !== FilterType.DateComparisonFilter,
+    //   );
+    // }, [filters]);
+    // A filter value can either be a string, an array of strings for a multiselect, or a date range (that could have a comparison range)
+    const [filterValues, setFilterValues] = (0, react_1.useState)({});
+    (0, react_1.useEffect)(() => {
+        if (reportDateFilter) {
+            // Filter for custom date filter that applies to the report's dateField
+            const customDateFilter = filters?.find((f) => f.filterType === Filter_1.FilterType.DateCustomFilter ||
+                f.filterType === Filter_1.FilterType.DateFilter ||
+                f.filterType === Filter_1.FilterType.DateComparisonFilter);
+            if (!customDateFilter) {
+                return;
+            }
+            const newFilter = (0, filterProcessing_1.applyCustomFilterToDashDateFilter)(customDateFilter, reportDateFilter);
+            setFilterValues((filterValues) => ({
+                ...filterValues,
+                [reportDateFilter.label]: {
+                    startDate: newFilter.startDate,
+                    endDate: newFilter.endDate,
+                    preset: newFilter.preset,
+                    comparisonRange: newFilter.comparisonRange,
+                },
+            }));
+        }
+    }, [filters]);
+    const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
+    const colorMap = (0, react_1.useMemo)(() => {
+        if (mapColorsToFields && report && theme) {
+            return mapColorsToFields(report, theme);
+        }
+    }, [report, theme]);
+    const updateFilter = (filter, value, comparison) => {
+        let filterValue = {};
+        if (filter.filterType === Filter_1.DashboardFilterType.String) {
+            if (filter.stringFilterType === 'multiselect') {
+                if ((value?.length ?? 0) === 0) {
+                    filterValue = { values: undefined, operator: undefined };
+                }
+                else {
+                    filterValue = { values: value, operator: 'IN' };
+                }
+            }
+            else {
+                filterValue = { selectedValue: value };
+            }
+        }
+        else if (filter.filterType === Filter_1.DashboardFilterType.Date) {
+            if (comparison ||
+                (filter.comparison &&
+                    (filter.comparisonRange?.value ?? 'NO_COMPARISON') !==
+                        'NO_COMPARISON')) {
+                let preset = '';
+                if (comparison) {
+                    preset = filter.preset.value;
+                }
+                const key = comparison?.value ||
+                    (filter.comparisonRange?.value ?? 'NO_COMPARISON');
+                let primaryRange = {
+                    startDate: value ? value.startDate : filter.startDate,
+                    endDate: value ? value.endDate : filter.endDate,
+                };
+                if (value && value.preset) {
+                    preset = value.preset;
+                    primaryRange = (0, dateRangePickerUtils_1.getRangeFromPresetOptions)(value.preset, presetOptions);
+                }
+                filterValue = {
+                    startDate: primaryRange.startDate,
+                    endDate: primaryRange.endDate,
+                    preset: {
+                        label: presetOptions.find((o) => o.value === preset)?.label ?? preset,
+                        value: preset,
+                    },
+                    comparisonRange: {
+                        startDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)
+                            ?.startDate,
+                        endDate: dateRangePickerUtils_1.COMPARISON_RANGE[key](primaryRange)
+                            ?.endDate,
+                        value: key,
+                    },
+                };
+            }
+            else {
+                const primaryRange = value && value.preset
+                    ? (0, dateRangePickerUtils_1.getRangeFromPresetOptions)(value.preset, presetOptions)
+                    : {
+                        startDate: value?.startDate || filter.startDate,
+                        endDate: value?.endDate || filter.endDate,
+                    };
+                const preset = value?.preset ? value.preset : '';
+                filterValue = {
+                    startDate: primaryRange.startDate,
+                    endDate: primaryRange.endDate,
+                    preset: {
+                        label: presetOptions.find((o) => o.value === preset)?.label ?? preset,
+                        value: preset,
+                    },
+                };
+            }
+        }
+        setFilterValues((filterValues) => ({
+            ...filterValues,
+            [filter.label]: filterValue,
+        }));
+        onDashboardFilterChange(filter.label, filterValue);
+    };
+    if (error) {
+        return ((0, jsx_runtime_1.jsx)("div", { style: containerStyle, className: className, children: (0, jsx_runtime_1.jsx)(ChartError_1.default, { errorMessage: error }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            ...containerStyle,
+        }, id: `quill-internal-chart-${report.id}`, className: className, children: [isAdmin && !!currentReportFilters?.length && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    maxWidth: 'fit-content',
+                    marginBottom: 25,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 4,
+                    alignItems: 'flex-start',
+                    flexWrap: 'wrap',
+                    border: filtersEnabled
+                        ? `1px solid ${theme?.borderColor ?? 'black'}`
+                        : 'none',
+                    padding: filtersEnabled ? 12 : 0,
+                    borderRadius: 6,
+                    opacity: filterToggleDisabled ? 0.5 : 1,
+                }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            gap: 8,
+                            border: `1px solid ${theme?.borderColor ?? 'black'}`,
+                            padding: 8,
+                            borderRadius: 6,
+                        }, children: [(0, jsx_runtime_1.jsx)(TogglePrimitive, { value: filtersEnabled, onClick: () => setFiltersEnabled(!filtersEnabled), style: {
+                                    marginTop: 2,
+                                    cursor: filterToggleDisabled ? 'not-allowed' : 'pointer',
+                                }, disabled: filterToggleDisabled }), (0, jsx_runtime_1.jsx)("h1", { style: {
+                                    fontSize: 14,
+                                    fontWeight: 600,
+                                    fontFamily: theme?.fontFamily,
+                                    color: theme?.primaryTextColor || '#575E6A',
+                                    userSelect: 'none',
+                                    margin: 0,
+                                }, children: filtersEnabled
+                                    ? 'Previewing with dashboard filters'
+                                    : 'Previewing without dashboard filters' })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'flex-end',
+                            flexWrap: 'wrap',
+                            gap: 12,
+                        }, children: filtersEnabled &&
+                            currentReportFilters.map((filter, index) => ((0, jsx_runtime_1.jsx)(DashboardFilter_1.DashboardFilter, { filter: {
+                                    ...filter.filter,
+                                    ...(filter.filter.filterType === 'date_range' && {
+                                        options: presetOptions,
+                                    }),
+                                    ...filterValues[filter.filter.label],
+                                }, isLoading: filter.loading, onChangeFilter: updateFilter, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent, disabled: !filtersEnabled }, index))) })] })), loading || !report ? ((0, jsx_runtime_1.jsx)(LoadingComponent, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ['metric' === report.chartType && ((0, jsx_runtime_1.jsx)(MetricComponent, { error: error, isLoading: loading, report: report })), report.chartType !== 'table' && report.chartType !== 'metric' && ((0, jsx_runtime_1.jsx)(Chart_1.ChartDisplay, { config: report, containerStyle: {
+                            width: '100%',
+                            height: '100%',
+                        }, reportId: Report_1.TEMP_REPORT_ID, colors: colors, className: className, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, cartesianGridLineColor: cartesianGridLineColor, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, loading: loading, scrollable: true, colorMap: colorMap, LoadingComponent: LoadingComponent, onClickChartElement: onClickChartElement }))] }))] }));
+}

package/dist/cjs/components/Chart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAyB7C,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,2BAAmC,EACnC,yBAAgC,EAChC,wBAAgC,EAChC,sBAAgC,EAChC,mBAA6B,EAC7B,sBAAsB,EACtB,mBAA8B,EAC9B,UAAU,GACX,EAAE;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,2BAA2B,EAAE,OAAO,CAAC;IACrC,yBAAyB,EAAE,OAAO,CAAC;IACnC,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3C,mBAAmB,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB,2CAsRA"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AA2B7C,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,2BAAmC,EACnC,yBAAgC,EAChC,wBAAgC,EAChC,sBAAgC,EAChC,mBAA6B,EAC7B,sBAAsB,EACtB,mBAA8B,EAC9B,UAAU,GACX,EAAE;IACD,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,2BAA2B,EAAE,OAAO,CAAC;IACrC,yBAAyB,EAAE,OAAO,CAAC;IACnC,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3C,mBAAmB,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB,2CAsRA"}

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

@@ -15,7 +15,9 @@ const crypto_1 = require("../../utils/crypto");
 const react_1 = require("react");
 function createLineForEmptyChart(yAxisFields, dateFilter, xAxisField, xAxisFormat) {
     let lineChartData = [];
-    if (dateFilter && dateFilter.startDate && dateFilter.endDate &&
+    if (dateFilter &&
+        dateFilter.startDate &&
+        dateFilter.endDate &&
         valueFormatter_1.DATE_FORMAT_TYPES.includes(xAxisFormat || '') &&
         (!lineChartData || lineChartData.length === 0)) {
         const xAxis = xAxisField || '';