@quillsql/react 2.12.18 → 2.12.20

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

@@ -4,12 +4,9 @@ exports.DashboardFilter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const dateRangePickerUtils_1 = require("../../DateRangePicker/dateRangePickerUtils");
-const Context_1 = require("../../Context");
 const QuillMultiSelect_1 = require("../QuillMultiSelect");
 const QuillSelect_1 = require("../QuillSelect");
 function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelect_1.QuillSelectComponent, MultiSelectComponent = QuillMultiSelect_1.QuillMultiSelectComponent, DateRangePickerComponent, theme, }) {
-    const { comparisonRange, setComparisonRange } = (0, Context_1.useComparisonRange)();
-    const { setDateFilter } = (0, Context_1.useDateFilter)();
     const [filterValue, setFilterValue] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         if (filter.filterType === 'string') {
@@ -20,18 +17,6 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelect
                 setFilterValue(filter.selectedValue);
             }
         }
-        if (filter.filterType === 'date_range') {
-            setDateFilter(filter.preset.label);
-            if (filter?.comparisonRange?.value) {
-                const newComparisonRange = dateRangePickerUtils_1.COMPARISON_OPTIONS.find((option) => {
-                    return option.value === filter.comparisonRange.value;
-                });
-                setComparisonRange(newComparisonRange);
-            }
-            else {
-                setComparisonRange(null);
-            }
-        }
     }, [filter]);
     if (filter.filterType === 'string') {
         if (!filter.options) {
@@ -41,7 +26,7 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelect
             return ((0, jsx_runtime_1.jsx)(MultiSelectComponent, { label: filter.label, value: filterValue, onChange: (e) => {
                     if (e.target.value === '') {
                         setFilterValue(null);
-                        onChangeFilter(filter, "[]");
+                        onChangeFilter(filter, '[]');
                         return;
                     }
                     const jsonValue = JSON.parse(e.target.value);
@@ -75,7 +60,7 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelect
                         onChangeFilter(filter, { preset: e.target.value });
                     }, presetOptions: filter.options.map((option) => {
                         return { label: option.label, value: option.label };
-                    }), selectWidth: 200 }), comparisonRange && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                    }), selectWidth: 200 }), filter.comparison && ((0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
@@ -91,7 +76,7 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelect
                                 whiteSpace: 'nowrap',
                                 minWidth: 80,
                                 justifyContent: 'center',
-                            }, children: "compared to" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: comparisonRange.value, onChange: (e) => {
+                            }, children: "compared to" }), (0, jsx_runtime_1.jsx)(SelectComponent, { value: filter.comparisonRange.value, onChange: (e) => {
                                 onChangeFilter(filter, null, dateRangePickerUtils_1.COMPARISON_OPTIONS.find((option) => option.value === e.target.value));
                             }, options: dateRangePickerUtils_1.COMPARISON_OPTIONS.map((compareOption) => ({
                                 value: compareOption.value,

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

@@ -12,10 +12,12 @@ export type DataLoaderChildProps = {
         field: string;
         direction: string;
     }) => void;
+    data?: any;
 };
-export default function DataLoader({ id, children, }: {
+export default function DataLoader({ id, children, filters, }: {
     id: string;
-    children: ({ isLoading, error, onPageChange, onSortChange, }: DataLoaderChildProps) => JSX.Element;
+    filters?: any;
+    children: ({ isLoading, error, onPageChange, onSortChange, data, }: DataLoaderChildProps) => JSX.Element;
 }): JSX.Element;
 type ColorMapType = {
     [key: string]: {
@@ -33,12 +35,13 @@ export type ChartDataLoaderChildProps = {
     data?: any;
     dateBucket?: string;
 };
-export declare const ChartDataLoader: ({ id, children, hideDateRangeFilter, dateBucket, limit, }: {
+export declare const ChartDataLoader: ({ id, children, hideDateRangeFilter, dateBucket, additionalProcessing, filters, }: {
     id: string;
     hideDateRangeFilter?: boolean | undefined;
     dateBucket?: string | undefined;
     mapColorsToFields?: ((_report: QuillReport, _theme: QuillTheme) => ColorMapType) | undefined;
-    limit?: number | undefined;
+    additionalProcessing?: any;
+    filters?: any;
     children: ({ isLoading, error, data, dateBucket, }: 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":";AAQA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAKjD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACpE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,EAAE,EACF,QAAQ,GACT,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,CAAC,EACT,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,GACb,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACzC,GAAG,GAAG,CAAC,OAAO,CAmHd;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,CAAC,EAAE,GAAG,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAIF,eAAO,MAAM,eAAe;QAOtB,MAAM;;;mCAIC,WAAW,UACZ,UAAU,KACf,YAAY;;wDAOd,yBAAyB,KAAK,WAAW;MAC1C,WA6FH,CAAC"}
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,WAAW,EAAuB,MAAM,iBAAiB,CAAC;AAEnE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAOjD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3E,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,EAAE,EACF,QAAQ,EACR,OAAO,GACR,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,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,CA8Hd;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,CAAC,EAAE,GAAG,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAIF,eAAO,MAAM,eAAe;QAQtB,MAAM;;;mCAIC,WAAW,UACZ,UAAU,KACf,YAAY;2BACM,GAAG;cAChB,GAAG;wDAMV,yBAAyB,KAAK,WAAW;MAC1C,WAuGH,CAAC"}

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

@@ -9,15 +9,17 @@ const hooks_1 = require("../../hooks");
 const dataFetcher_1 = require("../../utils/dataFetcher");
 const merge_1 = require("../../utils/merge");
 const errorProcessing_1 = require("../../utils/errorProcessing");
-function DataLoader({ id, children, }) {
+const dashboard_1 = require("../../utils/dashboard");
+function DataLoader({ id, children, filters, }) {
     const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
     const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
-    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
+    // const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [customFields] = (0, react_1.useContext)(Context_1.CustomFieldContext);
     const [isLoading, setIsLoading] = (0, react_1.useState)(true);
     const [isPaginationLoading, setIsPaginationLoading] = (0, react_1.useState)(true);
     const [error, setError] = (0, react_1.useState)(undefined);
     const [previousPage, setPreviousPage] = (0, react_1.useState)(0);
+    const [report, setReport] = (0, react_1.useState)(dashboard[id]);
     const [additionalProcessing, setAdditionProcessing] = (0, react_1.useState)({
         page: 0,
     });
@@ -35,11 +37,12 @@ function DataLoader({ id, children, }) {
         setPreviousPage(0);
     };
     const getChartOptions = async (processing) => {
-        setIsLoading(true);
-        if (!(0, Chart_1.didFiltersChange)(dashboard[id], dashboardFilters)) {
+        if (!(0, Chart_1.didFiltersChange)(dashboard[id], filters) && !isLoading) {
             setIsLoading(false);
+            setReport(dashboard[id]);
             return;
         }
+        setIsLoading(true);
         try {
             let updatedProcessing = { ...additionalProcessing, ...processing };
             if (processing && processing.sort) {
@@ -49,8 +52,8 @@ function DataLoader({ id, children, }) {
                 updatedProcessing.page.currentPage = 0;
             }
             // Remove extra fields on each filter so we don't confuse the backend.
-            const minimalFilters = Object.values(dashboardFilters).length
-                ? Object.values(dashboardFilters).map((filter) => {
+            const minimalFilters = Object.values(filters).length
+                ? Object.values(filters).map((filter) => {
                     const newFilter = { ...filter };
                     if (newFilter.filterType === 'date_range') {
                         delete newFilter['field'];
@@ -83,15 +86,14 @@ function DataLoader({ id, children, }) {
                 if (resp.compareRows) {
                     (0, merge_1.mergeComparisonRange)(resp);
                 }
+                const dashboardItem = { ...resp, filtersApplied: filters };
+                const cleanedReport = (0, dashboard_1.cleanDashboardItem)(dashboardItem, filters);
                 dispatch({
                     type: 'UPDATE_DASHBOARD_ITEM',
                     id: id,
-                    data: {
-                        ...resp,
-                        filtersApplied: dashboardFilters,
-                        id: resp._id,
-                    },
+                    data: cleanedReport,
                 });
+                setReport(cleanedReport);
             }
             else {
                 setError(resp?.errorMessage);
@@ -108,33 +110,34 @@ function DataLoader({ id, children, }) {
     };
     (0, react_1.useEffect)(() => {
         getChartOptions();
-    }, [dashboardFilters, client, id]);
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({ isLoading, error, onPageChange, onSortChange }) });
+    }, [filters, id, dashboard[id]]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children({
+            isLoading,
+            error,
+            onPageChange,
+            onSortChange,
+            data: report ?? undefined,
+        }) }));
 }
 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 = ({ id, children, hideDateRangeFilter = false, dateBucket, limit, }) => {
+const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, dateBucket, additionalProcessing, filters, }) => {
     const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
-    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
+    // const [initialLoad, setInitialLoad] = useState(true);
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)(undefined);
     const [isComparison, setIsComparison] = (0, react_1.useState)(false);
+    const [report, setReport] = (0, react_1.useState)(dashboard[id]);
     const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
     const [customFields] = (0, react_1.useContext)(Context_1.CustomFieldContext);
     const theme = (0, hooks_1.useTheme)();
     const getChartOptions = async () => {
-        setLoading(true);
-        if (!(0, Chart_1.didFiltersChange)(dashboard[id], dashboardFilters)) {
-            setLoading(false);
-            return;
-        }
         try {
             // Remove extra fields on each filter so we don't confuse the backend.
             const allowDateRange = !hideDateRangeFilter;
-            const minimalFilters = Object.values(dashboardFilters).length
-                ? Object.values(dashboardFilters)
+            const minimalFilters = Object.values(filters).length
+                ? Object.values(filters)
                     .filter((f) => allowDateRange || f.filterType !== 'date_range')
                     .map((filter) => {
                     const newFilter = { ...filter };
@@ -146,6 +149,14 @@ const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, dateBucket
                     return newFilter;
                 })
                 : [];
+            if (!(0, Chart_1.didFiltersChange)(dashboard[id], filters) &&
+                !loading &&
+                !dashboard[id].triggerReload) {
+                setLoading(false);
+                setReport(dashboard[id]);
+                return;
+            }
+            setLoading(true);
             const hostedBody = {
                 metadata: {
                     dashboardItemId: id,
@@ -153,14 +164,14 @@ const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, dateBucket
                     clientId: client.publicKey,
                     task: 'item',
                     databaseType: client.databaseType,
-                    filters: minimalFilters,
+                    filters: filters,
                     customFields,
-                    runQueryConfig: limit ? { limitBy: limit } : undefined,
+                    additionalProcessing,
                 },
             };
             const cloudBody = {
                 id: id,
-                filters: minimalFilters,
+                filters: filters,
             };
             setError(undefined);
             const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
@@ -170,11 +181,13 @@ const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, dateBucket
                 if (resp.compareRows) {
                     (0, merge_1.mergeComparisonRange)(resp);
                 }
-                const dashboardItem = { ...resp, filtersApplied: dashboardFilters };
+                const dashboardItem = { ...resp, filtersApplied: filters };
+                const cleanedReport = (0, dashboard_1.cleanDashboardItem)(dashboardItem, filters);
+                setReport(cleanedReport);
                 dispatch({
                     type: 'UPDATE_DASHBOARD_ITEM',
                     id: id,
-                    data: dashboardItem,
+                    data: { ...cleanedReport, triggerReload: false },
                 });
             }
             else {
@@ -188,12 +201,14 @@ const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, dateBucket
         }
     };
     (0, react_1.useEffect)(() => {
-        setInitialLoad(false);
+        if (loading) {
+            return;
+        }
         getChartOptions();
-    }, [dashboardFilters, client, id, limit]);
+    }, [filters, id, dashboard[id]]);
     return children({
-        isLoading: loading || initialLoad,
-        data: loading || initialLoad ? undefined : dashboard[id],
+        isLoading: loading,
+        data: report ?? undefined,
         error,
         dateBucket,
     });

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;AASnD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA6QhC"}
+{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AASnD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAwPhC"}

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

@@ -9,37 +9,21 @@ const dateRangePickerUtils_1 = require("../../DateRangePicker/dateRangePickerUti
 const valueFormatter_1 = require("../../utils/valueFormatter");
 const ChartError_1 = __importDefault(require("../Chart/ChartError"));
 const ChartSkeleton_1 = __importDefault(require("../Chart/ChartSkeleton"));
-const PivotModal_1 = require("../../internals/ReportBuilder/PivotModal");
-const Context_1 = require("../../Context");
 const hooks_1 = require("../../hooks");
+const useQuill_1 = require("../../hooks/useQuill");
 function QuillMetricComponent({ report, onClick, error, isLoading, }) {
     const theme = (0, hooks_1.useTheme)();
-    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
-    const data = report;
-    const config = report;
-    const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
-    const pivotTable = (0, react_1.useMemo)(() => {
-        const pivot = config?.pivot;
-        const data = config;
-        return pivot && data?.rows
-            ? (0, PivotModal_1.generatePivotTable)(pivot, JSON.parse(JSON.stringify(data.rows)), // deep copy
-            dateFilter
-                ? { start: dateFilter.startDate, end: dateFilter.endDate }
-                : undefined, Boolean(dateFilter?.comparisonRange?.startDate), -1, dateFilter?.comparisonRange?.startDate &&
-                dateFilter?.comparisonRange?.endDate
-                ? {
-                    start: dateFilter.comparisonRange.startDate,
-                    end: dateFilter.comparisonRange.endDate,
-                }
-                : undefined)
-            : null;
-    }, [config?.pivot]);
-    const primaryMetricLabel = data?.filtersApplied?.date_range?.preset?.label;
-    const comparisonKey = data?.filtersApplied?.date_range?.comparisonRange?.value;
+    const dateFilter = report?.filtersApplied?.find((filter) => filter.filterType == 'date_range');
+    const [rows, setRows] = (0, react_1.useState)(report?.rows ?? []);
+    const pivotData = (0, useQuill_1.usePivot)(report.id);
+    (0, react_1.useEffect)(() => {
+        if (pivotData.data) {
+            setRows(pivotData.data.rows);
+        }
+    }, [pivotData]);
+    const primaryMetricLabel = report?.filtersApplied?.date_range?.preset?.label;
+    const comparisonKey = report?.filtersApplied?.date_range?.comparisonRange?.value;
     const comparisonLabel = dateRangePickerUtils_1.COMPARISON_OPTIONS.find((opt) => opt.value === comparisonKey)?.text;
-    const rows = pivotTable?.rows ?? data.rows ?? [];
-    const isComparison = rows.length > 0 &&
-        Object.keys(rows[0]).includes(`comparison_${data.xAxisField}`);
     return ((0, jsx_runtime_1.jsx)("div", { onClick: () => onClick && onClick(report), style: {
             cursor: 'pointer',
             boxSizing: 'content-box',
@@ -77,7 +61,7 @@ function QuillMetricComponent({ report, onClick, error, isLoading, }) {
                                         display: 'block',
                                         maxWidth: '100%',
                                         overflow: 'hidden',
-                                    }, children: report?.name }), onClick ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                                    }, children: report?.name }), onClick && report?.name ? ((0, jsx_runtime_1.jsx)("div", { style: {
                                         fontFamily: theme.fontFamily,
                                         color: theme.primaryTextColor,
                                         boxSizing: 'content-box',
@@ -90,7 +74,7 @@ function QuillMetricComponent({ report, onClick, error, isLoading, }) {
                                     }, children: 'view report →' })) : null] }), isLoading ? ((0, jsx_runtime_1.jsx)(ChartSkeleton_1.default, { containerStyle: {
                                 maxHeight: '78px',
                                 height: '100%',
-                            } })) : error ? ((0, jsx_runtime_1.jsx)(ChartError_1.default, {})) : rows?.length === 0 || rows[0][data.xAxisField] === null ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                            } })) : error ? ((0, jsx_runtime_1.jsx)(ChartError_1.default, {})) : rows?.length === 0 || rows[0][report.xAxisField] === null ? ((0, jsx_runtime_1.jsx)("div", { style: {
                                 display: 'flex',
                                 flex: '1 0 auto',
                                 height: '100%',
@@ -129,17 +113,17 @@ function QuillMetricComponent({ report, onClick, error, isLoading, }) {
                                             marginRight: 'auto',
                                         }, children: [(0, jsx_runtime_1.jsx)("span", { children: rows.length > 0 &&
                                                     (0, valueFormatter_1.valueFormatter)({
-                                                        value: rows[0][data.xAxisField] ?? 0,
-                                                        field: data.xAxisField,
+                                                        value: rows[0][report.xAxisField] ?? 0,
+                                                        field: report.xAxisField,
                                                         fields: [
                                                             {
-                                                                field: data.xAxisField,
-                                                                format: data.xAxisFormat,
-                                                                label: data.xAxisLabel,
-                                                                _id: data.id || 'dummy',
+                                                                field: report.xAxisField,
+                                                                format: report.xAxisFormat,
+                                                                label: report.xAxisLabel,
+                                                                _id: report.id || 'dummy',
                                                             },
                                                         ],
-                                                    }) }), isComparison && ((0, jsx_runtime_1.jsx)("span", { style: {
+                                                    }) }), dateFilter?.comparison && ((0, jsx_runtime_1.jsx)("span", { style: {
                                                     fontSize: 13,
                                                     fontWeight: '500',
                                                     fontFamily: theme?.fontFamily,
@@ -147,7 +131,7 @@ function QuillMetricComponent({ report, onClick, error, isLoading, }) {
                                                     marginLeft: 2,
                                                 }, children: primaryMetricLabel
                                                     ? `in ${primaryMetricLabel.toLowerCase()}`
-                                                    : 'this period' }))] }), isComparison && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                                    : 'this period' }))] }), dateFilter?.comparison && ((0, jsx_runtime_1.jsxs)("div", { style: {
                                             display: 'flex',
                                             gap: 4,
                                             alignItems: 'baseline',
@@ -160,14 +144,14 @@ function QuillMetricComponent({ report, onClick, error, isLoading, }) {
                                                     color: theme?.secondaryTextColor,
                                                 }, children: rows.length > 0 &&
                                                     (0, valueFormatter_1.valueFormatter)({
-                                                        value: rows[0][`comparison_${data.xAxisField}`] ?? 0,
-                                                        field: data.xAxisField,
+                                                        value: rows[0][`comparison_${report.xAxisField}`] ?? 0,
+                                                        field: report.xAxisField,
                                                         fields: [
                                                             {
-                                                                field: data.xAxisField,
-                                                                format: data.xAxisFormat,
-                                                                label: data.xAxisLabel,
-                                                                _id: data.id || 'dummy',
+                                                                field: report.xAxisField,
+                                                                format: report.xAxisFormat,
+                                                                label: report.xAxisLabel,
+                                                                _id: report.id || 'dummy',
                                                             },
                                                         ],
                                                     }) }), (0, jsx_runtime_1.jsx)("span", { style: {

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":";AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAInD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,GACb,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAuLhC"}
+{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAKnD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,YAAY,EACZ,YAAY,GACb,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAiJhC"}

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

@@ -6,62 +6,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const QuillTable_1 = __importDefault(require("../QuillTable"));
-const PivotModal_1 = require("../../internals/ReportBuilder/PivotModal");
-const Context_1 = require("../../Context");
 const valueFormatter_1 = require("../../utils/valueFormatter");
 const ChartSkeleton_1 = __importDefault(require("../Chart/ChartSkeleton"));
 const ChartError_1 = __importDefault(require("../Chart/ChartError"));
 const hooks_1 = require("../../hooks");
 const useExport_1 = require("../../hooks/useExport");
+const useQuill_1 = require("../../hooks/useQuill");
 function QuillTableComponent({ report, onClick, isLoading, error, onPageChange, onSortChange, }) {
     const theme = (0, hooks_1.useTheme)();
-    const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
     const [initialLoad, setInitialLoad] = (0, react_1.useState)(true);
     const { downloadCSV } = (0, useExport_1.useExport)(report?.id);
+    const pivotData = (0, useQuill_1.usePivot)(report.id);
+    const [rows, setRows] = (0, react_1.useState)(report?.rows ?? []);
+    const [columns, setColumns] = (0, react_1.useState)(report?.columns ?? report?.yAxisFields ?? []);
+    (0, react_1.useEffect)(() => {
+        if (report.pivot !== null && pivotData.data) {
+            setRows(pivotData.data.rows);
+            setColumns(pivotData.data.columns);
+        }
+        else {
+            setRows(report?.rows ?? []);
+            setColumns(report?.columns ?? report?.yAxisFields ?? []);
+        }
+    }, [pivotData, report]);
     (0, react_1.useEffect)(() => {
         if (!isLoading) {
             setInitialLoad(false);
         }
     }, [isLoading]);
-    const config = report;
-    const data = report;
-    const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
-    const pivotTable = (0, react_1.useMemo)(() => {
-        const pivot = config?.pivot;
-        const data = config;
-        return pivot && data?.rows
-            ? (0, PivotModal_1.generatePivotTable)(pivot, JSON.parse(JSON.stringify(data.rows)), // deep copy
-            dateFilter
-                ? { start: dateFilter.startDate, end: dateFilter.endDate }
-                : undefined, Boolean(dateFilter?.comparisonRange?.startDate), -1, dateFilter?.comparisonRange?.startDate &&
-                dateFilter?.comparisonRange?.endDate
-                ? {
-                    start: dateFilter.comparisonRange.startDate,
-                    end: dateFilter.comparisonRange.endDate,
-                }
-                : undefined)
-            : null;
-    }, [config?.pivot]);
-    const columns = pivotTable?.columns ?? data.columns ?? data.yAxisFields;
-    const rows = pivotTable?.rows ?? data.rows ?? [];
-    // FOR PIVOTS - ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
-    const valueFieldType = config?.pivot?.valueFieldType || undefined;
-    // Walk through data.columns and pick off the labels from yAxisFields
-    columns.forEach((col, index) => {
-        // ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
-        if ((valueFieldType ||
-            ['min', 'max'].includes(config?.pivot?.aggregationType || '')) &&
-            index !== 0) {
-            col.format = valueFieldType || 'two_decimal_places';
-        }
-        if (!data.yAxisFields)
-            return;
-        const matchingCol = data.yAxisFields.find((c) => c.field === col.field);
-        if (!col.label && matchingCol) {
-            col.label = matchingCol.label;
-            col.format = matchingCol.format;
-        }
-    });
     const formattedRows = rows.map((row) => {
         return columns.reduce((formattedRow, column) => {
             // Apply the format function to each field in the row
@@ -74,14 +46,15 @@ function QuillTableComponent({ report, onClick, isLoading, error, onPageChange,
         }, {});
     });
     let numberOfRows = undefined;
-    if (data.compareRows &&
-        data.compareRows[0] &&
-        (data.compareRows[0].count || data.compareRows[0].COUNT)) {
-        if (data.compareRows[0].COUNT) {
-            numberOfRows = parseInt(data.compareRows[0].COUNT);
+    if (report &&
+        report.compareRows &&
+        report.compareRows[0] &&
+        (report.compareRows[0].count || report.compareRows[0].COUNT)) {
+        if (report.compareRows[0].COUNT) {
+            numberOfRows = parseInt(report.compareRows[0].COUNT);
         }
-        else if (data.compareRows[0].count) {
-            numberOfRows = parseInt(data.compareRows[0].count);
+        else if (report.compareRows[0].count) {
+            numberOfRows = parseInt(report.compareRows[0].count);
         }
     }
     return ((0, jsx_runtime_1.jsxs)("div", { style: { cursor: 'pointer' }, onClick: () => onClick && onClick(report), children: [(0, jsx_runtime_1.jsxs)("div", { style: {
@@ -103,7 +76,7 @@ function QuillTableComponent({ report, onClick, isLoading, error, onPageChange,
                             display: 'block',
                             maxWidth: '100%',
                             overflow: 'hidden',
-                        }, children: report?.name }), onClick ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                        }, children: report?.name }), onClick && report?.name ? ((0, jsx_runtime_1.jsx)("div", { style: {
                             fontFamily: theme.fontFamily,
                             color: theme.primaryTextColor,
                             boxSizing: 'content-box',
@@ -119,7 +92,7 @@ function QuillTableComponent({ report, onClick, isLoading, error, onPageChange,
                 } })) : error ? ((0, jsx_runtime_1.jsx)(ChartError_1.default, { containerStyle: {
                     width: '100%',
                     height: '400px',
-                } })) : ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { isLoading: isLoading, rows: formattedRows ?? [], numberOfRows: numberOfRows, columns: columns ?? data.yAxisFields, rowsPerPage: 10, containerStyle: {
+                } })) : ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { isLoading: isLoading, rows: formattedRows ?? [], numberOfRows: numberOfRows, columns: columns, rowsPerPage: 10, containerStyle: {
                     width: '100%',
                     height: '400px',
                 }, downloadCSV: () => {
@@ -128,6 +101,6 @@ function QuillTableComponent({ report, onClick, isLoading, error, onPageChange,
                     onPageChange && onPageChange(page);
                 }, onSortChange: (sort) => {
                     onSortChange && onSortChange(sort);
-                }, currentPage: data.page, sort: data.sort }))] }, report?.name));
+                }, currentPage: report?.page, sort: report?.sort }))] }, report?.name));
 }
 exports.default = QuillTableComponent;

package/dist/cjs/hooks/useDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDashboard.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDashboard.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,kBAAmB,MAAM;;;;qCASF,MAAM;CAiDrD,CAAC"}
+{"version":3,"file":"useDashboard.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDashboard.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,kBAAmB,MAAM;;;;qCASF,MAAM;CAkDrD,CAAC"}

package/dist/cjs/hooks/useDashboard.js

@@ -16,9 +16,9 @@ const useDashboard = (dashboardName) => {
         getDashboards(overrideDashboardName ?? dashboardName);
     };
     async function getDashboards(dashboardName) {
+        setIsLoading(true);
         if (dashboardName === null || dashboardName === undefined)
             return;
-        setIsLoading(true);
         const { databaseType, publicKey, customerId } = client;
         try {
             const searchParams = new URLSearchParams({
@@ -37,14 +37,15 @@ const useDashboard = (dashboardName) => {
             };
             const resp = await (0, dataFetcher_1.getData)(client, `dashconfig?${searchParams}`, 'omit', hostedBody, null, 'GET');
             setData(resp);
+            setIsLoading(false);
             setError(null);
         }
         catch (error) {
             setError(null);
+            setIsLoading(false);
             setError(error);
             console.error('Error fetching data:', error);
         }
-        setIsLoading(false);
     }
     (0, react_1.useEffect)(() => {
         getDashboards(dashboardName);

package/dist/cjs/hooks/useQuill.d.ts

@@ -43,5 +43,12 @@ export declare const useQuill: (reportId?: string) => {
     loading: boolean;
     error: string | null;
 };
+export declare const usePivot: (reportId?: string) => {
+    data: {
+        rows: any[];
+        columns: Column[];
+    } | undefined;
+    error: string | undefined;
+};
 export {};
 //# sourceMappingURL=useQuill.d.ts.map

package/dist/cjs/hooks/useQuill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useQuill.d.ts","sourceRoot":"","sources":["../../../src/hooks/useQuill.ts"],"names":[],"mappings":"AAWA,UAAU,MAAM;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,eAAO,MAAM,QAAQ,cACR,MAAM;UAEX,WAAW,GAAG,IAAI;aACf,OAAO;WACT,MAAM,GAAG,IAAI;CA0FrB,CAAC"}
+{"version":3,"file":"useQuill.d.ts","sourceRoot":"","sources":["../../../src/hooks/useQuill.ts"],"names":[],"mappings":"AAWA,UAAU,MAAM;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,eAAO,MAAM,QAAQ,cACR,MAAM;UAEX,WAAW,GAAG,IAAI;aACf,OAAO;WACT,MAAM,GAAG,IAAI;CAkGrB,CAAC;AAaF,eAAO,MAAM,QAAQ,cACR,MAAM;UAEX;QAAE,IAAI,EAAE,GAAG,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,EAAE,CAAA;KAAE,GAAG,SAAS;WAC7C,MAAM,GAAG,SAAS;CA4C1B,CAAC"}