@quillsql/react 2.13.7 → 2.13.9

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

@@ -1,32 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DashboardFilter = void 0;
+exports.DashboardFilter = DashboardFilter;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const dateRangePickerUtils_1 = require("../../DateRangePicker/dateRangePickerUtils");
 const QuillDateRangePicker_1 = require("../../DateRangePicker/QuillDateRangePicker");
 const QuillMultiSelect_1 = require("../QuillMultiSelect");
 const QuillSelect_1 = require("../QuillSelect");
 function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelect_1.QuillSelectComponent, MultiSelectComponent = QuillMultiSelect_1.QuillMultiSelectComponent, DateRangePickerComponent = QuillDateRangePicker_1.QuillDateRangePicker, theme, isLoading, }) {
-    const [filterValue, setFilterValue] = (0, react_1.useState)(undefined);
-    (0, react_1.useEffect)(() => {
-        if (filter.filterType === 'string') {
-            if (filter.stringFilterType === 'multiselect') {
-                setFilterValue(filter.values);
-            }
-            else {
-                setFilterValue(filter.selectedValue);
-            }
-        }
-    }, [filter]);
     if (!filter.options && !isLoading) {
         return null;
     }
     if (filter.filterType === 'string') {
         if (filter.stringFilterType === 'multiselect') {
-            return ((0, jsx_runtime_1.jsx)(MultiSelectComponent, { label: filter.label, value: filterValue ? filterValue : [], onChange: (e) => {
-                    if (e.target.value === '') {
-                        setFilterValue(null);
+            return ((0, jsx_runtime_1.jsx)(MultiSelectComponent, { label: filter.label, value: filter.values ?? [], onChange: (e) => {
+                    if (e.target.value === '' ||
+                        (Array.isArray(e.target.value) && e.target.value.length === 0)) {
                         onChangeFilter(filter, undefined);
                         return;
                     }
@@ -34,7 +22,6 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelect
                     if (typeof e.target.value === 'string') {
                         jsonValue = e.target.value.split(',');
                     }
-                    setFilterValue(jsonValue);
                     onChangeFilter(filter, jsonValue);
                 }, options: [
                     ...(filter.options
@@ -45,18 +32,18 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelect
                         : []),
                 ], width: 200, isLoading: isLoading }));
         }
-        return ((0, jsx_runtime_1.jsx)(SelectComponent, { label: filter.label, value: filterValue, onChange: (e) => {
+        return ((0, jsx_runtime_1.jsx)(SelectComponent, { label: filter.label, value: filter.selectedValue, onChange: (e) => {
                 onChangeFilter(filter, e.target.value);
             }, options: [
                 ...(filter.options
                     ? filter.options.map((elem) => ({
-                        label: elem[filter.labelField],
-                        value: elem[filter.field],
+                        label: elem[filter.labelField] ?? elem[filter.field] ?? '',
+                        value: elem[filter.field] ?? '',
                     }))
                     : []),
             ], width: 200, isLoading: isLoading }));
     }
-    if (filter.filterType === 'date_range') {
+    else if (filter.filterType === 'date_range') {
         return ((0, jsx_runtime_1.jsxs)("div", { style: {
                 display: 'flex',
                 flexDirection: 'row',
@@ -87,7 +74,7 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelect
                                 minWidth: 80,
                                 justifyContent: 'center',
                             }, children: "compared to" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: filter.comparisonRange?.value ?? 'NO_COMPARISON', onChange: (e) => {
-                                onChangeFilter(filter, null, dateRangePickerUtils_1.COMPARISON_OPTIONS.find((option) => option.value === e.target.value));
+                                onChangeFilter(filter, undefined, dateRangePickerUtils_1.COMPARISON_OPTIONS.find((option) => option.value === e.target.value));
                             }, options: dateRangePickerUtils_1.COMPARISON_OPTIONS.map((compareOption) => ({
                                 value: compareOption.value,
                                 label: compareOption.text,
@@ -95,4 +82,3 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelect
     }
     return null;
 }
-exports.DashboardFilter = DashboardFilter;

package/dist/cjs/components/Dashboard/DashboardSection.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface DashboardSectionComponentProps {
     section: 'metrics' | 'charts' | 'tables';
     children: React.ReactNode;

package/dist/cjs/components/Dashboard/DashboardSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardSection.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardSection.tsx"],"names":[],"mappings":";AAAA,MAAM,WAAW,8BAA8B;IAC7C,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,QAAQ,GACT,EAAE,8BAA8B,GAAG,GAAG,CAAC,OAAO,CAiC9C"}
+{"version":3,"file":"DashboardSection.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardSection.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,8BAA8B;IAC7C,OAAO,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,QAAQ,GACT,EAAE,8BAA8B,GAAG,GAAG,CAAC,OAAO,CAiC9C"}

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DashboardSection;
 const jsx_runtime_1 = require("react/jsx-runtime");
 function DashboardSection({ section, children, }) {
     // The default dashboard section uses a flex-based column layout for tables
@@ -22,4 +23,3 @@ function DashboardSection({ section, children, }) {
             gridTemplateRows: `repeat(${170}px)`,
         }, children: children }));
 }
-exports.default = DashboardSection;

package/dist/cjs/components/Dashboard/DashboardSectionContainer.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export default function DashboardSectionContainer({ style, children, ...props }: any): JSX.Element;
 //# sourceMappingURL=DashboardSectionContainer.d.ts.map

package/dist/cjs/components/Dashboard/DashboardSectionContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardSectionContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardSectionContainer.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAenB"}
+{"version":3,"file":"DashboardSectionContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardSectionContainer.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAenB"}

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = DashboardSectionContainer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 function DashboardSectionContainer({ style, children, ...props }) {
     return ((0, jsx_runtime_1.jsx)("div", { style: {
@@ -10,4 +11,3 @@ function DashboardSectionContainer({ style, children, ...props }) {
             ...style,
         }, ...props, children: children }));
 }
-exports.default = DashboardSectionContainer;

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = QuillDashboardTemplate;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const util_1 = require("./util");
@@ -65,4 +66,3 @@ function QuillDashboardTemplate({ name, originDashboard, client, appliedFilters,
                         }
                     } }) })] })) : null;
 }
-exports.default = QuillDashboardTemplate;

package/dist/cjs/components/Dashboard/DataLoader.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
 import { QuillReport } from '../../models/Report';
 import { QuillTheme } from '../../QuillProvider';
 import { AdditionalProcessing } from '../../utils/tableProcessing';
+import { DashboardFilter, InternalFilter } from '../../models/Filter';
 export type DataLoaderChildProps = {
     isLoading: boolean;
     error?: string;
@@ -14,9 +14,10 @@ export type DataLoaderChildProps = {
     rowCount?: number;
     rowCountIsLoading?: boolean;
 };
-export default function DataLoader({ item, children, filters, additionalProcessing: defaultAdditionalProcessing, }: {
+export default function DataLoader({ item, children, filters, userFilters, additionalProcessing: defaultAdditionalProcessing, }: {
     item: QuillReport;
-    filters: any[] | null;
+    filters: DashboardFilter[];
+    userFilters?: InternalFilter[];
     additionalProcessing: AdditionalProcessing;
     children: ({ isLoading, error, onPageChange, onSortChange, data, }: DataLoaderChildProps) => JSX.Element;
 }): JSX.Element;
@@ -38,12 +39,13 @@ export type ChartDataLoaderChildProps = {
     rowCount?: number;
     rowCountIsLoading?: boolean;
 };
-export declare const ChartDataLoader: ({ item, children, dateBucket, additionalProcessing, filters, }: {
+export declare const ChartDataLoader: ({ item, children, dateBucket, additionalProcessing, filters, userFilters, }: {
     item: QuillReport;
-    dateBucket?: string | undefined;
-    mapColorsToFields?: ((_report: QuillReport, _theme: QuillTheme) => ColorMapType) | undefined;
+    dateBucket?: string;
+    mapColorsToFields?: (_report: QuillReport, _theme: QuillTheme) => ColorMapType;
     additionalProcessing: AdditionalProcessing;
-    filters: any[] | null;
+    filters: DashboardFilter[];
+    userFilters?: InternalFilter[];
     children: ({ isLoading, error, data, dateBucket, rowCount, rowCountIsLoading, }: ChartDataLoaderChildProps) => JSX.Element;
 }) => JSX.Element;
 export {};

package/dist/cjs/components/Dashboard/DataLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAuB,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAajD,OAAO,EACL,oBAAoB,EAErB,MAAM,6BAA6B,CAAC;AAuBrC,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAoCF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,oBAAoB,EAAE,2BAA2B,GAClD,EAAE;IACD,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IACtB,oBAAoB,EAAE,oBAAoB,CAAC;IAC3C,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,IAAI,GACL,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACzC,GAAG,GAAG,CAAC,OAAO,CAiPd;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAIF,eAAO,MAAM,eAAe;UAOpB,WAAW;;mCAGN,WAAW,UACZ,UAAU,KACf,YAAY;0BACK,oBAAoB;aACjC,GAAG,EAAE,GAAG,IAAI;qFAQlB,yBAAyB,KAAK,WAAW;MAC1C,WAmGH,CAAC"}
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAuB,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAajD,OAAO,EACL,oBAAoB,EAErB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AA0BtE,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAuFF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,WAAW,EACX,oBAAoB,EAAE,2BAA2B,GAClD,EAAE;IACD,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,oBAAoB,EAAE,oBAAoB,CAAC;IAC3C,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,IAAI,GACL,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACzC,GAAG,GAAG,CAAC,OAAO,CA8Pd;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AAIF,eAAO,MAAM,eAAe,gFAOzB;IACD,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,CAClB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,KACf,YAAY,CAAC;IAClB,oBAAoB,EAAE,oBAAoB,CAAC;IAC3C,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,cAAc,EAAE,CAAC;IAC/B,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,iBAAiB,GAClB,EAAE,yBAAyB,KAAK,GAAG,CAAC,OAAO,CAAC;CAC9C,KAAG,GAAG,CAAC,OA8GP,CAAC"}

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

@@ -1,13 +1,19 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChartDataLoader = void 0;
+exports.default = DataLoader;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Chart_1 = require("../../Chart");
 const Context_1 = require("../../Context");
 const report_1 = require("../../utils/report");
 const paginationProcessing_1 = require("../../utils/paginationProcessing");
 const tableProcessing_1 = require("../../utils/tableProcessing");
+const Chart_1 = require("../../Chart");
+const merge_1 = require("../../utils/merge");
+const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 const constructReportFromItem = (item) => {
     return {
         ...report_1.EMPTY_INTERNAL_REPORT,
@@ -52,24 +58,57 @@ function filterValuesEquivalent(filters1, filters2) {
             mappedFilters1[key].filterType !== mappedFilters2[key]?.filterType ||
             mappedFilters1[key].startDate !== mappedFilters2[key]?.startDate ||
             mappedFilters1[key].endDate !== mappedFilters2[key]?.endDate ||
-            mappedFilters1[key].comparisonRange !==
-                mappedFilters2[key]?.comparisonRange) {
+            !(0, fast_deep_equal_1.default)(mappedFilters1[key].comparisonRange, mappedFilters2[key]?.comparisonRange)) {
+            return false;
+        }
+    }
+    return true;
+}
+function userFilterValuesEquivalent(filters1, filters2) {
+    if (!filters1 && !filters2) {
+        return true;
+    }
+    if (filters1?.length !== filters2?.length) {
+        return false;
+    }
+    if (!filters1 || !filters2) {
+        return false;
+    }
+    // The two filters arrays aren't necessarily in the same order
+    // we can build two dictionaries of [{table, field}, filter] and compare them
+    const mappedFilters1 = filters1.reduce((acc, filter) => {
+        acc[`${filter.table}.${filter.field}`] = filter;
+        return acc;
+    }, {});
+    const mappedFilters2 = filters2.reduce((acc, filter) => {
+        acc[`${filter.table}.${filter.field}`] = filter;
+        return acc;
+    }, {});
+    for (const key in mappedFilters1) {
+        if (mappedFilters1[key]?.value !== mappedFilters2[key]?.value ||
+            mappedFilters1[key]?.operator !== mappedFilters2[key]?.operator ||
+            mappedFilters1[key]?.fieldType !== mappedFilters2[key]?.fieldType ||
+            mappedFilters1[key]?.filterType !== mappedFilters2[key]?.filterType) {
             return false;
         }
     }
     return true;
 }
-function DataLoader({ item, children, filters, additionalProcessing: defaultAdditionalProcessing, }) {
+function DataLoader({ item, children, filters, userFilters, additionalProcessing: defaultAdditionalProcessing, }) {
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [dashboard, dispatch] = (0, react_1.useContext)(Context_1.DashboardContext);
+    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
     const [schemaData] = (0, react_1.useContext)(Context_1.SchemaDataContext);
-    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [loading, setLoading] = (0, react_1.useState)(!dashboard[item.id]);
     const [error, setError] = (0, react_1.useState)(undefined);
     const [previousPage, setPreviousPage] = (0, react_1.useState)(0);
-    const [report, setReport] = (0, react_1.useState)(dashboard[item.id] ?? constructReportFromItem(item));
-    const [additionalProcessing, setAdditionProcessing] = (0, react_1.useState)(defaultAdditionalProcessing);
+    const [additionalProcessing, setAdditionalProcessing] = (0, react_1.useState)(defaultAdditionalProcessing);
+    const chartReport = (0, react_1.useMemo)(() => {
+        const report = dashboard[item.id] ?? constructReportFromItem(item);
+        return (0, report_1.convertInternalReportToReport)((0, merge_1.mergeComparisonRange)(report));
+    }, [dashboard[item.id]]);
     const previousFilters = (0, react_1.useRef)(null);
-    const [rowCount, setRowCount] = (0, react_1.useState)(dashboard[item.id]?.rowCount ?? 0);
+    const previousUserFilters = (0, react_1.useRef)(null);
     const [rowCountIsLoading, setRowCountIsLoading] = (0, react_1.useState)(false);
     const rowsRequestId = (0, react_1.useRef)(0);
     const rowsAbortController = (0, react_1.useRef)(null);
@@ -87,7 +126,7 @@ function DataLoader({ item, children, filters, additionalProcessing: defaultAddi
         rowCountAbortController.current?.abort();
         rowCountAbortController.current = new AbortController();
         try {
-            const rowCount = await (0, report_1.fetchReportRowCount)(item.id, client, true, filters, processing, schemaData.customFields, rowCountAbortController.current.signal);
+            const rowCount = await (0, report_1.fetchReportRowCount)(item.id, client, true, filters.concat(userFilters ?? []), processing, schemaData.customFields, rowCountAbortController.current.signal);
             rowCountAbortController.current = null;
             if (rowCount) {
                 dispatch({
@@ -95,12 +134,10 @@ function DataLoader({ item, children, filters, additionalProcessing: defaultAddi
                     id: item.id,
                     data: { rowCount },
                 });
-                setRowCount(rowCount);
             }
         }
         catch (e) {
             if (e instanceof Error && e.name === 'AbortError') {
-                // console.log('Aborted fetching row count');
                 return;
             }
         }
@@ -119,7 +156,7 @@ function DataLoader({ item, children, filters, additionalProcessing: defaultAddi
                 ...additionalProcessing,
                 page: newPagination,
             };
-            setAdditionProcessing(updatedProcessing);
+            setAdditionalProcessing(updatedProcessing);
             updateTableRows(updatedProcessing);
         }
         if (page > previousPage) {
@@ -127,7 +164,8 @@ function DataLoader({ item, children, filters, additionalProcessing: defaultAddi
         }
     };
     const onSortChange = (sort) => {
-        if ((0, paginationProcessing_1.shouldSortInMemory)(additionalProcessing.page ?? paginationProcessing_1.DEFAULT_PAGINATION, report.rowCount, !!report.pivot)) {
+        const report = dashboard[item.id];
+        if ((0, paginationProcessing_1.shouldSortInMemory)(additionalProcessing.page ?? paginationProcessing_1.DEFAULT_PAGINATION, report?.rowCount, !!report?.pivot)) {
             return;
         }
         const updatedProcessing = { page: additionalProcessing.page, sort };
@@ -147,17 +185,24 @@ function DataLoader({ item, children, filters, additionalProcessing: defaultAddi
                 updateTableRowsAbortController.current?.abort();
                 updateTableRowsAbortController.current = new AbortController();
                 const updatedProcessing = { ...additionalProcessing, ...processing };
-                const paginatedRows = await (0, tableProcessing_1.fetchResultsByReport)(report.id, client, updatedProcessing, filters, schemaData.customFields, true, undefined, updateTableRowsAbortController.current.signal);
+                const paginatedRows = await (0, tableProcessing_1.fetchResultsByReport)(item.id, client, updatedProcessing, filters.concat(userFilters ?? []), schemaData.customFields, true, undefined, updateTableRowsAbortController.current.signal);
                 updateTableRowsAbortController.current = null;
                 if (paginatedRows.error) {
                     throw new Error('Error fetching chart');
                 }
-                let tempRows = [...report.rows, ...paginatedRows.rows];
+                let tempRows = [
+                    ...(dashboard[item.id]?.rows ?? []),
+                    ...paginatedRows.rows,
+                ];
                 if (resetRows) {
                     tempRows = paginatedRows.rows;
                 }
-                setReport({ ...report, rows: tempRows });
-                setAdditionProcessing(updatedProcessing);
+                dispatch({
+                    type: 'UPDATE_DASHBOARD_ITEM',
+                    id: item.id,
+                    data: { rows: tempRows },
+                });
+                setAdditionalProcessing(updatedProcessing);
             }
             catch (e) {
                 console.log(e);
@@ -173,41 +218,34 @@ function DataLoader({ item, children, filters, additionalProcessing: defaultAddi
         if (!client || !filters) {
             return;
         }
-        if (dashboard[item.id] &&
-            !(0, Chart_1.didFiltersChange)(dashboard[item.id], filters) &&
-            !loading &&
-            // @ts-ignore
-            !dashboard[item.id].triggerReload) {
+        const fetchRowsRequestId = rowsRequestId.current + 1;
+        rowsRequestId.current = fetchRowsRequestId;
+        const tempReport = dashboard[item.id];
+        if (tempReport &&
+            !(0, Chart_1.didFiltersChange)(tempReport, filters) &&
+            userFilterValuesEquivalent(userFilters ?? [], previousUserFilters.current ?? []) &&
+            !tempReport.triggerReload) {
             setLoading(false);
-            const convertedReport = (0, report_1.convertInternalReportToReport)(
-            // @ts-ignore
-            dashboard[item.id]);
-            setReport(convertedReport);
             return;
         }
-        const fetchRowsRequestId = rowsRequestId.current + 1;
-        rowsRequestId.current = fetchRowsRequestId;
         setLoading(true);
-        // console.log('fetching', item.id, filters);
+        previousUserFilters.current = userFilters ?? null;
         rowsAbortController.current?.abort();
         rowsAbortController.current = new AbortController();
         try {
-            const { report: fetchedReport, error } = await (0, report_1.fetchReport)(item.id, client, true, filters, processing, undefined, schemaData.customFields, true, false, rowsAbortController.current.signal);
+            const { report: fetchedReport, error } = await (0, report_1.fetchReport)(item.id, client, true, filters.concat(userFilters ?? []), processing, undefined, schemaData.customFields, true, false, rowsAbortController.current.signal);
             rowsAbortController.current = null;
+            fetchRowCount(processing);
             dispatch({
                 type: 'ADD_DASHBOARD_ITEM',
                 id: item.id,
                 data: { ...fetchedReport, triggerReload: false, rowCount: 0 }, // rowCount 0 indicates it's still loading if row length is nonzero
             });
-            fetchRowCount(processing);
-            const convertedReport = (0, report_1.convertInternalReportToReport)(fetchedReport);
-            setReport(convertedReport);
-            setAdditionProcessing(processing);
+            setAdditionalProcessing(processing);
             setError(error);
         }
         catch (e) {
             if (e instanceof Error && e.name === 'AbortError') {
-                // console.log('Aborted fetching rows');
                 return;
             }
             throw e;
@@ -222,14 +260,17 @@ function DataLoader({ item, children, filters, additionalProcessing: defaultAddi
         if (!filters) {
             return;
         }
-        if (previousFilters.current &&
-            filterValuesEquivalent(previousFilters.current, filters)) {
+        if ((previousFilters.current || dashboard[item.id]?.rows?.length) &&
+            filterValuesEquivalent(previousFilters.current ??
+                Object.values(dashboardFilters[item.dashboardName] ?? {}).map((f) => f.filter), filters) &&
+            userFilterValuesEquivalent(previousUserFilters.current ?? [], userFilters ?? [])) {
+            previousFilters.current = filters;
             return;
         }
         previousFilters.current = filters;
         setPreviousPage(0);
         fetchReportHelper(additionalProcessing);
-    }, [filters, item.id]);
+    }, [filters, userFilters, item.id]);
     (0, react_1.useEffect)(() => {
         if (dashboard[item.id]?.triggerReload) {
             fetchReportHelper(additionalProcessing);
@@ -240,25 +281,28 @@ function DataLoader({ item, children, filters, additionalProcessing: defaultAddi
             error,
             onPageChange,
             onSortChange,
-            data: report,
-            rowCount: report.pivot ? report.rowCount : rowCount,
+            data: chartReport,
+            rowCount: chartReport.rowCount,
             rowCountIsLoading,
         }) }));
 }
-exports.default = DataLoader;
 // The same data-loader pattern as above, but with special logic for charts
 // At some point these may be able to get merged into one function.
-const ChartDataLoader = ({ item, children, dateBucket, additionalProcessing, filters, }) => {
+const ChartDataLoader = ({ item, children, dateBucket, additionalProcessing, filters, userFilters, }) => {
     const [dashboard, dispatch] = (0, react_1.useContext)(Context_1.DashboardContext);
-    const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
-    const [loading, setLoading] = (0, react_1.useState)(false);
+    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
+    const [loading, setLoading] = (0, react_1.useState)(!dashboard[item.id]);
     const [error, setError] = (0, react_1.useState)(undefined);
-    const [localDateBucket, setLocalDateBucket] = (0, react_1.useState)(undefined);
-    const [report, setReport] = (0, react_1.useState)(dashboard[item.id] ?? constructReportFromItem(item));
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [schemaData] = (0, react_1.useContext)(Context_1.SchemaDataContext);
     const previousFilters = (0, react_1.useRef)(null);
+    const previousUserFilters = (0, react_1.useRef)(null);
+    const previousDateBucket = (0, react_1.useRef)(undefined);
     const fetchReportAbortController = (0, react_1.useRef)(null);
+    const chartReport = (0, react_1.useMemo)(() => {
+        const report = dashboard[item.id] ?? constructReportFromItem(item);
+        return (0, report_1.convertInternalReportToReport)((0, merge_1.mergeComparisonRange)(report));
+    }, [dashboard[item.id]]);
     const fetchReportHelper = async (useReportTask = true) => {
         if (!client || !filters) {
             return;
@@ -266,18 +310,17 @@ const ChartDataLoader = ({ item, children, dateBucket, additionalProcessing, fil
         const tempReport = dashboard[item.id];
         if (tempReport &&
             !(0, Chart_1.didFiltersChange)(tempReport, filters) &&
-            !tempReport.triggerReload &&
-            dateBucket === localDateBucket) {
+            userFilterValuesEquivalent(userFilters ?? [], previousUserFilters.current ?? []) &&
+            !tempReport.triggerReload) {
             setLoading(false);
-            const convertedReport = (0, report_1.convertInternalReportToReport)(tempReport);
-            setReport(convertedReport);
             return;
         }
+        previousUserFilters.current = userFilters ?? null;
         setLoading(true);
         fetchReportAbortController.current?.abort();
         fetchReportAbortController.current = new AbortController();
         try {
-            const { report, error } = await (0, report_1.fetchReport)(item.id, client, useReportTask, filters, {
+            const { report, error } = await (0, report_1.fetchReport)(item.id, client, useReportTask, filters.concat(userFilters ?? []), {
                 ...additionalProcessing,
                 ...(item.pivot ? {} : { page: paginationProcessing_1.DEFAULT_PAGINATION }),
             }, dateBucket, schemaData.customFields, undefined, undefined, fetchReportAbortController.current.signal);
@@ -287,14 +330,10 @@ const ChartDataLoader = ({ item, children, dateBucket, additionalProcessing, fil
                 id: item.id,
                 data: { ...report, triggerReload: false },
             });
-            const convertedReport = (0, report_1.convertInternalReportToReport)(report);
-            setReport(convertedReport);
-            setLocalDateBucket(dateBucket);
             setError(error);
         }
         catch (e) {
             if (e instanceof Error && e.name === 'AbortError') {
-                // console.log('Aborted fetching rows for chart');
                 return;
             }
             throw e;
@@ -307,14 +346,18 @@ const ChartDataLoader = ({ item, children, dateBucket, additionalProcessing, fil
         if (!filters) {
             return;
         }
-        if (previousFilters.current &&
-            filterValuesEquivalent(previousFilters.current, filters)) {
+        if ((previousFilters.current || dashboard[item.id]?.rows?.length) &&
+            filterValuesEquivalent(previousFilters.current ??
+                Object.values(dashboardFilters[item.dashboardName] ?? {}).map((f) => f.filter), filters) &&
+            userFilterValuesEquivalent(previousUserFilters.current ?? [], userFilters ?? []) &&
+            previousDateBucket.current === dateBucket) {
+            previousFilters.current = filters;
             return;
         }
         previousFilters.current = filters;
-        setInitialLoad(false);
+        previousDateBucket.current = dateBucket;
         fetchReportHelper();
-    }, [filters, item.id, dateBucket]);
+    }, [filters, userFilters, item.id, dateBucket]);
     (0, react_1.useEffect)(() => {
         const tempReport = dashboard[item.id];
         if (tempReport && tempReport.triggerReload) {
@@ -322,8 +365,8 @@ const ChartDataLoader = ({ item, children, dateBucket, additionalProcessing, fil
         }
     }, [dashboard[item.id]]);
     return children({
-        isLoading: loading || initialLoad,
-        data: report,
+        isLoading: loading,
+        data: chartReport,
         error,
         dateBucket,
     });

package/dist/cjs/components/Dashboard/MetricComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QuillReportProps } from '../../Dashboard';
 export default function QuillMetricComponent({ report, onClick, error, isLoading, }: QuillReportProps): JSX.Element;
 //# sourceMappingURL=MetricComponent.d.ts.map

package/dist/cjs/components/Dashboard/MetricComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAMnD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA2NhC"}
+{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAMnD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA0NhC"}

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = QuillMetricComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const dateRangePickerUtils_1 = require("../../DateRangePicker/dateRangePickerUtils");
@@ -12,8 +13,8 @@ const Context_1 = require("../../Context");
 function QuillMetricComponent({ report, onClick, error, isLoading, }) {
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
     const dateFilter = report?.filtersApplied?.find((filter) => filter.filterType == 'date_range');
-    const primaryMetricLabel = report?.filtersApplied?.date_range?.preset?.label;
-    const comparisonKey = report?.filtersApplied?.date_range?.comparisonRange?.value;
+    const primaryMetricLabel = dateFilter?.preset?.label;
+    const comparisonKey = dateFilter?.comparisonRange?.value;
     const comparisonLabel = dateRangePickerUtils_1.COMPARISON_OPTIONS.find((opt) => opt.value === comparisonKey)?.text;
     return ((0, jsx_runtime_1.jsx)("div", { onClick: () => onClick && onClick(report), style: {
             cursor: !onClick ? 'default' : 'pointer',
@@ -138,4 +139,3 @@ function QuillMetricComponent({ report, onClick, error, isLoading, }) {
                                                     ? 'in ' + comparisonLabel.toLowerCase()
                                                     : 'previous period' })] }))] }) }))] }) }) }) }, report?.name));
 }
-exports.default = QuillMetricComponent;

package/dist/cjs/components/Dashboard/TableComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QuillReport } from '../../models/Report';
 export default function QuillTableComponent({ report, onClick, isLoading, error, rowCount, rowCountIsLoading, onPageChange, onSortChange, }: {
     report: QuillReport;

package/dist/cjs/components/Dashboard/TableComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAKlD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,YAAY,EACZ,YAAY,GACb,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE,GAAG,GAAG,CAAC,OAAO,CAkGd"}
+{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAKlD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,iBAAiB,EACjB,YAAY,EACZ,YAAY,GACb,EAAE;IACD,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACrE,GAAG,GAAG,CAAC,OAAO,CAkGd"}

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = QuillTableComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const QuillTable_1 = __importDefault(require("../QuillTable"));
@@ -63,4 +64,3 @@ function QuillTableComponent({ report, onClick, isLoading, error, rowCount, rowC
                     onSortChange && onSortChange(sort);
                 }, currentPage: report?.pagination?.page ?? page, sort: report?.sort }))] }, report?.name));
 }
-exports.default = QuillTableComponent;

package/dist/cjs/components/Dashboard/TemplateChartComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QuillReportProps } from '../../Dashboard';
 export default function QuillTemplateChartComponent({ report, onClick, children, isLoading, }: QuillReportProps): JSX.Element;
 //# sourceMappingURL=TemplateChartComponent.d.ts.map

package/dist/cjs/components/Dashboard/TemplateChartComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateChartComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TemplateChartComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAAC,EAClD,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAyBhC"}
+{"version":3,"file":"TemplateChartComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TemplateChartComponent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,2BAA2B,CAAC,EAClD,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAyBhC"}

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = QuillTemplateChartComponent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ChartComponent_1 = __importDefault(require("./ChartComponent"));
@@ -20,4 +21,3 @@ function QuillTemplateChartComponent({ report, onClick, children, isLoading, })
             cursor: 'pointer',
         }, children: (0, jsx_runtime_1.jsx)(ChartComponent_1.default, { report: report, children: children, isLoading: isLoading }) }));
 }
-exports.default = QuillTemplateChartComponent;

package/dist/cjs/components/Dashboard/TemplateMetricComponent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QuillReportProps } from '../../Dashboard';
 export default function QuillTemplateMetricComponent({ report, onClick, children, isLoading, }: QuillReportProps): JSX.Element;
 //# sourceMappingURL=TemplateMetricComponent.d.ts.map

package/dist/cjs/components/Dashboard/TemplateMetricComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateMetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TemplateMetricComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,4BAA4B,CAAC,EACnD,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAyBhC"}
+{"version":3,"file":"TemplateMetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TemplateMetricComponent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,4BAA4B,CAAC,EACnD,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAyBhC"}