@quillsql/react 2.12.19 → 2.12.21

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

@@ -1,12 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { COMPARISON_OPTIONS } from '../../DateRangePicker/dateRangePickerUtils';
-import { useComparisonRange, useDateFilter } from '../../Context';
 import { QuillMultiSelectComponent } from '../QuillMultiSelect';
 import { QuillSelectComponent } from '../QuillSelect';
 export function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponent, DateRangePickerComponent, theme, }) {
-    const { comparisonRange, setComparisonRange } = useComparisonRange();
-    const { setDateFilter } = useDateFilter();
     const [filterValue, setFilterValue] = useState(null);
     useEffect(() => {
         if (filter.filterType === 'string') {
@@ -17,18 +14,6 @@ export function DashboardFilter({ filter, onChangeFilter, SelectComponent = Quil
                 setFilterValue(filter.selectedValue);
             }
         }
-        if (filter.filterType === 'date_range') {
-            setDateFilter(filter.preset.label);
-            if (filter?.comparisonRange?.value) {
-                const newComparisonRange = COMPARISON_OPTIONS.find((option) => {
-                    return option.value === filter.comparisonRange.value;
-                });
-                setComparisonRange(newComparisonRange);
-            }
-            else {
-                setComparisonRange(null);
-            }
-        }
     }, [filter]);
     if (filter.filterType === 'string') {
         if (!filter.options) {
@@ -38,7 +23,7 @@ export function DashboardFilter({ filter, onChangeFilter, SelectComponent = Quil
             return (_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);
@@ -72,7 +57,7 @@ export function DashboardFilter({ filter, onChangeFilter, SelectComponent = Quil
                         onChangeFilter(filter, { preset: e.target.value });
                     }, presetOptions: filter.options.map((option) => {
                         return { label: option.label, value: option.label };
-                    }), selectWidth: 200 }), comparisonRange && (_jsxs("div", { style: {
+                    }), selectWidth: 200 }), filter.comparison && (_jsxs("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
                         alignItems: 'center',
@@ -88,7 +73,7 @@ export function DashboardFilter({ filter, onChangeFilter, SelectComponent = Quil
                                 whiteSpace: 'nowrap',
                                 minWidth: 80,
                                 justifyContent: 'center',
-                            }, children: "compared to" }), _jsx(SelectComponent, { value: comparisonRange.value, onChange: (e) => {
+                            }, children: "compared to" }), _jsx(SelectComponent, { value: filter.comparisonRange.value, onChange: (e) => {
                                 onChangeFilter(filter, null, COMPARISON_OPTIONS.find((option) => option.value === e.target.value));
                             }, options: COMPARISON_OPTIONS.map((compareOption) => ({
                                 value: compareOption.value,

package/dist/esm/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,13 +35,13 @@ export type ChartDataLoaderChildProps = {
     data?: any;
     dateBucket?: string;
 };
-export declare const ChartDataLoader: ({ id, children, hideDateRangeFilter, dateBucket, limit, additionalProcessing, }: {
+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/esm/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;QAQtB,MAAM;;;mCAIC,WAAW,UACZ,UAAU,KACf,YAAY;;2BAEM,GAAG;wDAMvB,yBAAyB,KAAK,WAAW;MAC1C,WA8FH,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,CAkId;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/esm/components/Dashboard/DataLoader.js

@@ -1,20 +1,22 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect, useState } from 'react';
 import { didFiltersChange } from '../../Chart';
-import { ClientContext, CustomFieldContext, DashboardContext, DashboardFiltersContext, } from '../../Context';
+import { ClientContext, CustomFieldContext, DashboardContext, } from '../../Context';
 import { useTheme } from '../../hooks';
 import { getData } from '../../utils/dataFetcher';
 import { mergeComparisonRange } from '../../utils/merge';
 import { processFilterErrorList } from '../../utils/errorProcessing';
-export default function DataLoader({ id, children, }) {
+import { cleanDashboardItem } from '../../utils/dashboard';
+export default function DataLoader({ id, children, filters, }) {
     const [client, _] = useContext(ClientContext);
     const { dispatch, dashboard } = useContext(DashboardContext);
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
+    // const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [customFields] = useContext(CustomFieldContext);
     const [isLoading, setIsLoading] = useState(true);
     const [isPaginationLoading, setIsPaginationLoading] = useState(true);
     const [error, setError] = useState(undefined);
     const [previousPage, setPreviousPage] = useState(0);
+    const [report, setReport] = useState(dashboard[id]);
     const [additionalProcessing, setAdditionProcessing] = useState({
         page: 0,
     });
@@ -32,11 +34,14 @@ export default function DataLoader({ id, children, }) {
         setPreviousPage(0);
     };
     const getChartOptions = async (processing) => {
-        setIsLoading(true);
-        if (!didFiltersChange(dashboard[id], dashboardFilters)) {
+        if (!didFiltersChange(dashboard[id], filters) &&
+            !isLoading &&
+            !dashboard[id].triggerReload) {
             setIsLoading(false);
+            setReport(dashboard[id]);
             return;
         }
+        setIsLoading(true);
         try {
             let updatedProcessing = { ...additionalProcessing, ...processing };
             if (processing && processing.sort) {
@@ -46,8 +51,8 @@ export default 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'];
@@ -80,15 +85,14 @@ export default function DataLoader({ id, children, }) {
                 if (resp.compareRows) {
                     mergeComparisonRange(resp);
                 }
+                const dashboardItem = { ...resp, filtersApplied: filters };
+                const cleanedReport = cleanDashboardItem(dashboardItem, filters);
                 dispatch({
                     type: 'UPDATE_DASHBOARD_ITEM',
                     id: id,
-                    data: {
-                        ...resp,
-                        filtersApplied: dashboardFilters,
-                        id: resp._id,
-                    },
+                    data: { ...cleanedReport, triggerReload: false },
                 });
+                setReport(cleanedReport);
             }
             else {
                 setError(resp?.errorMessage);
@@ -105,32 +109,33 @@ export default function DataLoader({ id, children, }) {
     };
     useEffect(() => {
         getChartOptions();
-    }, [dashboardFilters, client, id]);
-    return _jsx(_Fragment, { children: children({ isLoading, error, onPageChange, onSortChange }) });
+    }, [filters, id, dashboard[id]]);
+    return (_jsx(_Fragment, { children: children({
+            isLoading,
+            error,
+            onPageChange,
+            onSortChange,
+            data: report ?? undefined,
+        }) }));
 }
 // 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.
-export const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, dateBucket, limit, additionalProcessing, }) => {
+export const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, dateBucket, additionalProcessing, filters, }) => {
     const { dispatch, dashboard } = useContext(DashboardContext);
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
-    const [initialLoad, setInitialLoad] = useState(true);
+    // const [initialLoad, setInitialLoad] = useState(true);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(undefined);
     const [isComparison, setIsComparison] = useState(false);
+    const [report, setReport] = useState(dashboard[id]);
     const [client, _] = useContext(ClientContext);
     const [customFields] = useContext(CustomFieldContext);
     const theme = useTheme();
     const getChartOptions = async () => {
-        setLoading(true);
-        if (!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 };
@@ -142,6 +147,14 @@ export const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, dat
                     return newFilter;
                 })
                 : [];
+            if (!didFiltersChange(dashboard[id], filters) &&
+                !loading &&
+                !dashboard[id].triggerReload) {
+                setLoading(false);
+                setReport(dashboard[id]);
+                return;
+            }
+            setLoading(true);
             const hostedBody = {
                 metadata: {
                     dashboardItemId: id,
@@ -149,15 +162,14 @@ export const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, dat
                     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 getData(client, 'itempost', 'omit', hostedBody, cloudBody);
@@ -167,11 +179,13 @@ export const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, dat
                 if (resp.compareRows) {
                     mergeComparisonRange(resp);
                 }
-                const dashboardItem = { ...resp, filtersApplied: dashboardFilters };
+                const dashboardItem = { ...resp, filtersApplied: filters };
+                const cleanedReport = cleanDashboardItem(dashboardItem, filters);
+                setReport(cleanedReport);
                 dispatch({
                     type: 'UPDATE_DASHBOARD_ITEM',
                     id: id,
-                    data: dashboardItem,
+                    data: { ...cleanedReport, triggerReload: false },
                 });
             }
             else {
@@ -185,12 +199,14 @@ export const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, dat
         }
     };
     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/esm/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/esm/components/Dashboard/MetricComponent.js

@@ -1,40 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useMemo } from 'react';
+import { useEffect, useState } from 'react';
 import { COMPARISON_OPTIONS } from '../../DateRangePicker/dateRangePickerUtils';
 import { valueFormatter } from '../../utils/valueFormatter';
 import ChartError from '../Chart/ChartError';
 import ChartSkeleton from '../Chart/ChartSkeleton';
-import { generatePivotTable } from '../../internals/ReportBuilder/PivotModal';
-import { DashboardFiltersContext } from '../../Context';
 import { useTheme } from '../../hooks';
+import { usePivot } from '../../hooks/useQuill';
 export default function QuillMetricComponent({ report, onClick, error, isLoading, }) {
     const theme = useTheme();
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
-    const data = report;
-    const config = report;
-    const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
-    const pivotTable = useMemo(() => {
-        const pivot = config?.pivot;
-        const data = config;
-        return pivot && data?.rows
-            ? 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] = useState(report?.rows ?? []);
+    const pivotData = usePivot(report.id);
+    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 = 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 (_jsx("div", { onClick: () => onClick && onClick(report), style: {
             cursor: 'pointer',
             boxSizing: 'content-box',
@@ -72,7 +56,7 @@ export default function QuillMetricComponent({ report, onClick, error, isLoading
                                         display: 'block',
                                         maxWidth: '100%',
                                         overflow: 'hidden',
-                                    }, children: report?.name }), onClick ? (_jsx("div", { style: {
+                                    }, children: report?.name }), onClick && report?.name ? (_jsx("div", { style: {
                                         fontFamily: theme.fontFamily,
                                         color: theme.primaryTextColor,
                                         boxSizing: 'content-box',
@@ -85,7 +69,7 @@ export default function QuillMetricComponent({ report, onClick, error, isLoading
                                     }, children: 'view report →' })) : null] }), isLoading ? (_jsx(ChartSkeleton, { containerStyle: {
                                 maxHeight: '78px',
                                 height: '100%',
-                            } })) : error ? (_jsx(ChartError, {})) : rows?.length === 0 || rows[0][data.xAxisField] === null ? (_jsx("div", { style: {
+                            } })) : error ? (_jsx(ChartError, {})) : rows?.length === 0 || rows[0][report.xAxisField] === null ? (_jsx("div", { style: {
                                 display: 'flex',
                                 flex: '1 0 auto',
                                 height: '100%',
@@ -124,17 +108,17 @@ export default function QuillMetricComponent({ report, onClick, error, isLoading
                                             marginRight: 'auto',
                                         }, children: [_jsx("span", { children: rows.length > 0 &&
                                                     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 && (_jsx("span", { style: {
+                                                    }) }), dateFilter?.comparison && (_jsx("span", { style: {
                                                     fontSize: 13,
                                                     fontWeight: '500',
                                                     fontFamily: theme?.fontFamily,
@@ -142,7 +126,7 @@ export default function QuillMetricComponent({ report, onClick, error, isLoading
                                                     marginLeft: 2,
                                                 }, children: primaryMetricLabel
                                                     ? `in ${primaryMetricLabel.toLowerCase()}`
-                                                    : 'this period' }))] }), isComparison && (_jsxs("div", { style: {
+                                                    : 'this period' }))] }), dateFilter?.comparison && (_jsxs("div", { style: {
                                             display: 'flex',
                                             gap: 4,
                                             alignItems: 'baseline',
@@ -155,14 +139,14 @@ export default function QuillMetricComponent({ report, onClick, error, isLoading
                                                     color: theme?.secondaryTextColor,
                                                 }, children: rows.length > 0 &&
                                                     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',
                                                             },
                                                         ],
                                                     }) }), _jsx("span", { style: {

package/dist/esm/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,CAoJhC"}

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

@@ -1,62 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import QuillTable from '../QuillTable';
-import { generatePivotTable } from '../../internals/ReportBuilder/PivotModal';
-import { DashboardFiltersContext } from '../../Context';
 import { quillFormat } from '../../utils/valueFormatter';
 import ChartSkeleton from '../Chart/ChartSkeleton';
 import ChartError from '../Chart/ChartError';
 import { useTheme } from '../../hooks';
 import { useExport } from '../../hooks/useExport';
+import { usePivot } from '../../hooks/useQuill';
 export default function QuillTableComponent({ report, onClick, isLoading, error, onPageChange, onSortChange, }) {
     const theme = useTheme();
-    const { dashboardFilters } = useContext(DashboardFiltersContext);
     const [initialLoad, setInitialLoad] = useState(true);
     const { downloadCSV } = useExport(report?.id);
+    const pivotData = usePivot(report.id);
+    const [rows, setRows] = useState(report?.rows ?? []);
+    const [columns, setColumns] = useState(report?.columns ?? report?.yAxisFields ?? []);
+    useEffect(() => {
+        if (!report.rows || !report.columns) {
+            return;
+        }
+        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]);
     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 = useMemo(() => {
-        const pivot = config?.pivot;
-        const data = config;
-        return pivot && data?.rows
-            ? 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
@@ -69,14 +44,15 @@ export default function QuillTableComponent({ report, onClick, isLoading, error,
         }, {});
     });
     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 (_jsxs("div", { style: { cursor: 'pointer' }, onClick: () => onClick && onClick(report), children: [_jsxs("div", { style: {
@@ -98,7 +74,7 @@ export default function QuillTableComponent({ report, onClick, isLoading, error,
                             display: 'block',
                             maxWidth: '100%',
                             overflow: 'hidden',
-                        }, children: report?.name }), onClick ? (_jsx("div", { style: {
+                        }, children: report?.name }), onClick && report?.name ? (_jsx("div", { style: {
                             fontFamily: theme.fontFamily,
                             color: theme.primaryTextColor,
                             boxSizing: 'content-box',
@@ -114,7 +90,7 @@ export default function QuillTableComponent({ report, onClick, isLoading, error,
                 } })) : error ? (_jsx(ChartError, { containerStyle: {
                     width: '100%',
                     height: '400px',
-                } })) : (_jsx(QuillTable, { isLoading: isLoading, rows: formattedRows ?? [], numberOfRows: numberOfRows, columns: columns ?? data.yAxisFields, rowsPerPage: 10, containerStyle: {
+                } })) : (_jsx(QuillTable, { isLoading: isLoading, rows: formattedRows ?? [], numberOfRows: numberOfRows, columns: columns, rowsPerPage: 10, containerStyle: {
                     width: '100%',
                     height: '400px',
                 }, downloadCSV: () => {
@@ -123,5 +99,5 @@ export default function QuillTableComponent({ report, onClick, isLoading, error,
                     onPageChange && onPageChange(page);
                 }, onSortChange: (sort) => {
                     onSortChange && onSortChange(sort);
-                }, currentPage: data.page, sort: data.sort }))] }, report?.name));
+                }, currentPage: report?.page, sort: report?.sort }))] }, report?.name));
 }

package/dist/esm/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/esm/hooks/useDashboard.js

@@ -13,9 +13,9 @@ export 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({
@@ -34,14 +34,15 @@ export const useDashboard = (dashboardName) => {
             };
             const resp = await 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);
     }
     useEffect(() => {
         getDashboards(dashboardName);

package/dist/esm/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/esm/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"}