@quillsql/react 2.12.29 → 2.12.31

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

@@ -2,245 +2,188 @@ 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, } from '../../Context';
-import { useTheme } from '../../hooks';
-import { getData } from '../../utils/dataFetcher';
-import { mergeComparisonRange } from '../../utils/merge';
-import { processFilterErrorList } from '../../utils/errorProcessing';
-import { cleanDashboardItem } from '../../utils/dashboard';
-import { internalLog } from '../../utils/logging';
-import { MAX_COLUMN_ROWS_LIMIT } from '../../utils/constants';
-export default function DataLoader({ id, children, filters, }) {
-    const [client, _] = useContext(ClientContext);
-    const { dispatch, dashboard } = useContext(DashboardContext);
-    // const { dashboardFilters } = useContext(DashboardFiltersContext);
+import { convertInternalReportToReport, EMPTY_REPORT, fetchReport, } from '../../utils/report';
+import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from '../../utils/paginationProcessing';
+import { fetchTableByReport } from '../../utils/tableProcessing';
+const constructReportFromItem = (item) => {
+    return {
+        ...EMPTY_REPORT,
+        id: item._id,
+        name: item.name,
+        dashboardName: item.dashboardName,
+        rows: [],
+        columns: [],
+        chartType: item.chartType,
+        dateField: item.dateField,
+        pivot: item.pivot,
+        xAxisLabel: item.xAxisLabel,
+        xAxisField: item.xAxisField,
+        xAxisFormat: item.xAxisFormat,
+        yAxisFields: item.yAxisFields,
+        order: item.order,
+        compareRows: item.compareRows,
+        filtersApplied: item.filtersApplied,
+    };
+};
+export default function DataLoader({ item, children, filters, }) {
+    const [client] = useContext(ClientContext);
+    const [dashboard, dispatch] = useContext(DashboardContext);
     const [customFields] = useContext(CustomFieldContext);
-    const [isLoading, setIsLoading] = useState(false);
-    const [isPaginationLoading, setIsPaginationLoading] = useState(true);
+    const [loading, setLoading] = useState(false);
     const [error, setError] = useState(undefined);
     const [previousPage, setPreviousPage] = useState(0);
-    const [report, setReport] = useState(dashboard[id]);
+    const [report, setReport] = useState(dashboard[item._id] ?? constructReportFromItem(item));
     const [additionalProcessing, setAdditionProcessing] = useState({
-        page: 0,
+        page: DEFAULT_PAGINATION,
     });
     const onPageChange = (page) => {
-        if ((previousPage < page.currentPage &&
-            (page.currentPage * page.rowsPerPage) % MAX_COLUMN_ROWS_LIMIT === 0) ||
-            (previousPage > page.currentPage &&
-                (previousPage * page.rowsPerPage) % MAX_COLUMN_ROWS_LIMIT === 0)) {
-            getChartOptions(true, { page });
+        if (additionalProcessing &&
+            additionalProcessing.page &&
+            shouldFetchMore(DEFAULT_PAGINATION, page, previousPage)) {
+            const newPagination = { ...additionalProcessing.page, page };
+            const updatedProcessing = {
+                ...additionalProcessing,
+                page: newPagination,
+            };
+            setAdditionProcessing(updatedProcessing);
+            updateTableRows(updatedProcessing);
+        }
+        if (page > previousPage) {
+            setPreviousPage(page);
         }
-        setPreviousPage(page.currentPage);
     };
     const onSortChange = (sort) => {
-        getChartOptions(true, { sort });
-        setPreviousPage(0);
-    };
-    const getChartOptions = async (useReportTask = true, processing) => {
-        if (!didFiltersChange(dashboard[id], filters) &&
-            !isLoading &&
-            !dashboard[id].triggerReload &&
-            !processing) {
-            setIsLoading(false);
-            setReport(dashboard[id]);
+        if (shouldSortInMemory(DEFAULT_PAGINATION, report.rowCount, !!report.pivot)) {
             return;
         }
-        setIsLoading(true);
-        try {
-            let updatedProcessing = { ...additionalProcessing, ...processing };
-            if (processing && processing.sort) {
-                if (!updatedProcessing.page) {
-                    updatedProcessing.page = {};
+        const updatedProcessing = { page: DEFAULT_PAGINATION, sort };
+        fetchReportHelper(true, additionalProcessing);
+        updateTableRows(updatedProcessing, true);
+        setPreviousPage(0);
+    };
+    const updateTableRows = async (processing, resetRows = false) => {
+        if (!loading) {
+            setLoading(true);
+            try {
+                const updatedProcessing = { ...additionalProcessing, ...processing };
+                const paginatedRows = await fetchTableByReport(report.id, client, updatedProcessing, filters, customFields);
+                if (paginatedRows.error) {
+                    throw new Error('Error fetching chart');
                 }
-                updatedProcessing.page.currentPage = 0;
-            }
-            // Remove extra fields on each filter so we don't confuse the backend.
-            const minimalFilters = Object.values(filters).length
-                ? Object.values(filters).map((filter) => {
-                    const newFilter = { ...filter };
-                    if (newFilter.filterType === 'date_range') {
-                        delete newFilter['field'];
-                        delete newFilter['options'];
-                        delete newFilter['selectedValue'];
-                    }
-                    return newFilter;
-                })
-                : [];
-            const hostedBody = {
-                metadata: {
-                    reportId: id,
-                    dashboardItemId: id,
-                    orgId: client.customerId || '*',
-                    clientId: client.publicKey,
-                    task: useReportTask ? 'report' : 'item',
-                    databaseType: client.databaseType,
-                    filters: minimalFilters,
-                    customFields,
-                    paginateTable: true,
-                    additionalProcessing: updatedProcessing,
-                },
-            };
-            const cloudBody = {
-                id: id,
-                filters: minimalFilters,
-            };
-            const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody, 'POST', 'fetch-data');
-            processFilterErrorList(resp);
-            if (resp && resp.name !== 'error' && !resp.errorMessage) {
-                if (resp.compareRows) {
-                    mergeComparisonRange(resp);
+                let tempRows = [...report.rows, ...paginatedRows.rows];
+                if (resetRows) {
+                    tempRows = paginatedRows.rows;
                 }
-                const dashboardItem = { ...resp, filtersApplied: filters };
-                const cleanedReport = await cleanDashboardItem(dashboardItem, filters, client);
-                dispatch({
-                    type: 'UPDATE_DASHBOARD_ITEM',
-                    id: id,
-                    data: { ...cleanedReport, triggerReload: false },
+                const convertedReport = convertInternalReportToReport({
+                    ...report,
+                    rows: tempRows,
                 });
-                setReport(cleanedReport);
+                setReport(convertedReport);
+                setAdditionProcessing(updatedProcessing);
+                setTimeout(() => {
+                    setLoading(false);
+                }, 200);
             }
-            else {
-                if (useReportTask) {
-                    throw new Error(resp?.errorMessage);
-                }
-                setError(resp?.errorMessage);
+            catch (e) {
+                console.log(e);
+                setLoading(false);
             }
-            setAdditionProcessing(updatedProcessing);
-            setTimeout(() => {
-                setIsLoading(false);
-            }, 200);
         }
-        catch (e) {
-            if (useReportTask) {
-                internalLog('USING ITEM AS BACKUP');
-                getChartOptions(false, processing);
-            }
-            else {
-                console.log('Error fetching chart: ', e);
-                setError(e.message);
-            }
+    };
+    const fetchReportHelper = async (useReportTask = true, processing) => {
+        if (dashboard[item._id] &&
+            !didFiltersChange(dashboard[item._id], filters) &&
+            !loading &&
+            // @ts-ignore
+            !dashboard[item._id].triggerReload) {
+            setLoading(false);
+            const convertedReport = convertInternalReportToReport(
+            // @ts-ignore
+            dashboard[item._id]);
+            setReport(convertedReport);
+            return;
         }
+        setLoading(true);
+        const { report, error } = await fetchReport(item._id, client, useReportTask, filters, processing, undefined, customFields);
+        dispatch({
+            type: 'UPDATE_DASHBOARD_ITEM',
+            id: item._id,
+            data: { ...report, triggerReload: false },
+        });
+        const convertedReport = convertInternalReportToReport(report);
+        setReport(convertedReport);
+        setAdditionProcessing(processing);
+        setError(error);
+        setLoading(false);
     };
     useEffect(() => {
-        getChartOptions();
-    }, [filters, id]);
+        fetchReportHelper(true, additionalProcessing);
+    }, [filters, item._id]);
     useEffect(() => {
-        if (dashboard[id] && dashboard[id].triggerReload) {
-            getChartOptions();
+        // @ts-ignore
+        if (dashboard[item._id] && dashboard[item._id].triggerReload) {
+            fetchReportHelper(true, additionalProcessing);
         }
-    }, [dashboard[id]]);
+    }, [dashboard[item._id]]);
     return (_jsx(_Fragment, { children: children({
-            isLoading,
+            isLoading: loading,
             error,
             onPageChange,
             onSortChange,
-            data: report ?? undefined,
+            data: report,
         }) }));
 }
 // 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, additionalProcessing, filters, }) => {
-    const { dispatch, dashboard } = useContext(DashboardContext);
+export const ChartDataLoader = ({ item, children, dateBucket, additionalProcessing, filters, }) => {
+    const [dashboard, dispatch] = useContext(DashboardContext);
     const [initialLoad, setInitialLoad] = useState(true);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(undefined);
     const [localDateBucket, setLocalDateBucket] = useState(undefined);
     const [localAdditionalProcessing, setLocalAdditionalProcessing] = useState();
-    const [isComparison, setIsComparison] = useState(false);
-    const [report, setReport] = useState(dashboard[id]);
-    const [client, _] = useContext(ClientContext);
+    const [report, setReport] = useState(dashboard[item._id] ?? constructReportFromItem(item));
+    const [client] = useContext(ClientContext);
     const [customFields] = useContext(CustomFieldContext);
-    const theme = useTheme();
-    const getChartOptions = async (useReportTask = true) => {
-        try {
-            // Remove extra fields on each filter so we don't confuse the backend.
-            if (!didFiltersChange(dashboard[id], filters) &&
-                !loading &&
-                !dashboard[id].triggerReload &&
-                dateBucket === localDateBucket &&
-                additionalProcessing?.last === localAdditionalProcessing?.last) {
-                setLoading(false);
-                setReport(dashboard[id]);
-                return;
-            }
-            setLoading(true);
-            setLocalDateBucket(dateBucket);
-            setLocalAdditionalProcessing(additionalProcessing);
-            const hostedBody = {
-                metadata: {
-                    reportId: id,
-                    dashboardItemId: id,
-                    orgId: client.customerId || '*',
-                    clientId: client.publicKey,
-                    task: useReportTask ? 'report' : 'item',
-                    databaseType: client.databaseType,
-                    filters: filters,
-                    customFields,
-                    additionalProcessing,
-                },
-            };
-            const cloudBody = {
-                id: id,
-                filters: filters,
-            };
-            setError(undefined);
-            const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody, 'POST', 'fetch-data');
-            processFilterErrorList(resp);
-            if (resp && resp.name !== 'error' && !resp.errorMessage) {
-                setIsComparison(!!resp.compareRows?.length);
-                if (resp.compareRows) {
-                    mergeComparisonRange(resp);
-                }
-                const dashboardItem = { ...resp, filtersApplied: filters };
-                const cleanedReport = await cleanDashboardItem(dashboardItem, filters, client, dateBucket);
-                setReport(cleanedReport);
-                dispatch({
-                    type: 'UPDATE_DASHBOARD_ITEM',
-                    id: id,
-                    data: {
-                        ...cleanedReport,
-                        triggerReload: false,
-                    },
-                });
-            }
-            else {
-                if (useReportTask) {
-                    throw new Error(resp?.errorMessage);
-                }
-                setError(resp?.errorMessage);
-            }
-            setLoading(false);
-        }
-        catch (e) {
-            if (useReportTask) {
-                internalLog('USING ITEM AS BACKUP');
-                getChartOptions(false);
-            }
-            else {
-                console.log('Error fetching chart: ', e);
-                setError(e.message);
-            }
-        }
-    };
-    useEffect(() => {
-        if (dashboard[id] &&
-            !didFiltersChange(dashboard[id], filters) &&
+    const fetchReportHelper = async (useReportTask = true) => {
+        const tempReport = dashboard[item._id];
+        if (tempReport &&
+            !didFiltersChange(tempReport, filters) &&
+            !tempReport.triggerReload &&
             dateBucket === localDateBucket &&
             additionalProcessing?.last === localAdditionalProcessing?.last) {
-            setReport(dashboard[id]);
-            setInitialLoad(false);
+            setLoading(false);
+            const convertedReport = convertInternalReportToReport(tempReport);
+            setReport(convertedReport);
             return;
         }
+        setLoading(true);
+        const { report, error } = await fetchReport(item._id, client, useReportTask, filters, additionalProcessing, dateBucket, customFields);
+        dispatch({
+            type: 'UPDATE_DASHBOARD_ITEM',
+            id: item._id,
+            data: { ...report, triggerReload: false },
+        });
+        const convertedReport = convertInternalReportToReport(report);
+        setReport(convertedReport);
+        setLocalDateBucket(dateBucket);
+        setLocalAdditionalProcessing(additionalProcessing);
+        setError(error);
+        setLoading(false);
+    };
+    useEffect(() => {
         setInitialLoad(false);
-        getChartOptions();
-    }, [filters, id, dateBucket, additionalProcessing]);
+        fetchReportHelper();
+    }, [filters, item._id, dateBucket, additionalProcessing]);
     useEffect(() => {
-        if (dashboard[id] && dashboard[id].triggerReload) {
-            getChartOptions();
+        const tempReport = dashboard[item._id];
+        if (tempReport && tempReport.triggerReload) {
+            fetchReportHelper();
         }
-    }, [dashboard[id]]);
+    }, [dashboard[item._id]]);
     return children({
         isLoading: loading || initialLoad,
-        data: report ?? undefined,
+        data: report,
         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,CA4PhC"}
+{"version":3,"file":"MetricComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/MetricComponent.tsx"],"names":[],"mappings":";AAAA,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,CAgOhC"}

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

@@ -1,27 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 { useTheme } from '../../hooks';
-import { usePivot } from '../../hooks/useQuill';
 export default function QuillMetricComponent({ report, onClick, error, isLoading, }) {
     const theme = useTheme();
     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);
-        }
-        else if (report?.rows) {
-            setRows(report.rows);
-        }
-        else {
-            setRows([]);
-        }
-    }, [pivotData?.data?.rows, report?.rows]);
     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;
@@ -30,6 +14,7 @@ export default function QuillMetricComponent({ report, onClick, error, isLoading
             boxSizing: 'content-box',
             borderRadius: 8,
             paddingBottom: isLoading ? 0 : 30,
+            width: '100%',
         }, children: _jsx("div", { style: {
                 width: '100%',
                 height: '100%',
@@ -50,7 +35,7 @@ export default function QuillMetricComponent({ report, onClick, error, isLoading
                                 justifyContent: 'space-between',
                                 boxSizing: 'content-box',
                                 paddingBottom: 5,
-                            }, children: [_jsx("div", { style: {
+                            }, children: [onClick && (_jsx("div", { style: {
                                         fontFamily: theme.fontFamily,
                                         color: theme.primaryTextColor,
                                         boxSizing: 'content-box',
@@ -62,7 +47,7 @@ export default function QuillMetricComponent({ report, onClick, error, isLoading
                                         display: 'block',
                                         maxWidth: '100%',
                                         overflow: 'hidden',
-                                    }, children: report?.name }), onClick && report?.name ? (_jsx("div", { style: {
+                                    }, children: report?.name })), onClick && report?.name ? (_jsx("div", { style: {
                                         fontFamily: theme.fontFamily,
                                         color: theme.primaryTextColor,
                                         boxSizing: 'content-box',
@@ -75,7 +60,8 @@ 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][report.xAxisField] === null ? (_jsx("div", { style: {
+                            } })) : error ? (_jsx("div", { children: _jsx(ChartError, { errorMessage: error }) })) : report.rows?.length === 0 ||
+                            report.rows[0][report.xAxisField] === null ? (_jsx("div", { style: {
                                 display: 'flex',
                                 flex: '1 0 auto',
                                 height: '100%',
@@ -112,19 +98,9 @@ export default function QuillMetricComponent({ report, onClick, error, isLoading
                                             gap: 4,
                                             alignItems: 'baseline',
                                             marginRight: 'auto',
-                                        }, children: [_jsx("span", { children: rows.length > 0 &&
-                                                    valueFormatter({
-                                                        value: rows[0][report.xAxisField] ?? 0,
-                                                        field: report.xAxisField,
-                                                        fields: [
-                                                            {
-                                                                field: report.xAxisField,
-                                                                format: report.xAxisFormat,
-                                                                label: report.xAxisLabel,
-                                                                _id: report.id || 'dummy',
-                                                            },
-                                                        ],
-                                                    }) }), dateFilter?.comparison && (_jsx("span", { style: {
+                                        }, children: [_jsx("span", { children: (report.rows.length > 0 &&
+                                                    report.rows[0][report.xAxisField]) ??
+                                                    0 }), dateFilter?.comparison && (_jsx("span", { style: {
                                                     fontSize: 13,
                                                     fontWeight: '500',
                                                     fontFamily: theme?.fontFamily,
@@ -143,19 +119,9 @@ export default function QuillMetricComponent({ report, onClick, error, isLoading
                                                     fontWeight: '500',
                                                     fontFamily: theme?.fontFamily,
                                                     color: theme?.secondaryTextColor,
-                                                }, children: rows.length > 0 &&
-                                                    valueFormatter({
-                                                        value: rows[0][`comparison_${report.xAxisField}`] ?? 0,
-                                                        field: report.xAxisField,
-                                                        fields: [
-                                                            {
-                                                                field: report.xAxisField,
-                                                                format: report.xAxisFormat,
-                                                                label: report.xAxisLabel,
-                                                                _id: report.id || 'dummy',
-                                                            },
-                                                        ],
-                                                    }) }), _jsx("span", { style: {
+                                                }, children: (report.rows.length > 0 &&
+                                                    report.rows[0][`comparison_${report.xAxisField}`]) ??
+                                                    0 }), _jsx("span", { style: {
                                                     fontSize: 13,
                                                     fontWeight: '500',
                                                     fontFamily: theme?.fontFamily,

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

@@ -1,15 +1,12 @@
 /// <reference types="react" />
-import { QuillReport } from '../../Dashboard';
+import { QuillReport } from '../../models/Report';
 export default function QuillTableComponent({ report, onClick, isLoading, error, rowCount, onPageChange, onSortChange, }: {
     report: QuillReport;
     onClick?: (report: QuillReport) => void;
     isLoading?: boolean;
     error?: string;
     rowCount?: number;
-    onPageChange?: (page: {
-        currentPage: number;
-        rowsPerPage: number;
-    }) => void;
+    onPageChange?: (page: number) => void;
     onSortChange?: (sort: {
         field: string;
         direction: string;

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":";AAOA,OAAO,EAAE,WAAW,EAAoB,MAAM,iBAAiB,CAAC;AAKhE,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,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,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC5E,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,CAuId"}
+{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIlD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,SAAS,EACT,KAAK,EACL,QAAQ,EACR,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,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,CAwGd"}

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

@@ -1,48 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import QuillTable from '../QuillTable';
-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, rowCount, onPageChange, onSortChange, }) {
     const theme = useTheme();
     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 formattedRows = rows.map((row) => {
-        return columns.reduce((formattedRow, column) => {
-            // Apply the format function to each field in the row
-            const formattedValue = quillFormat({
-                value: row[column.field],
-                format: column.format,
-            });
-            formattedRow[column.field] = formattedValue;
-            return formattedRow;
-        }, {});
-    });
     return (_jsxs("div", { style: { cursor: 'pointer' }, onClick: () => onClick && onClick(report), children: [_jsxs("div", { style: {
                     display: 'flex',
                     flexDirection: 'row',
@@ -75,10 +46,10 @@ export default function QuillTableComponent({ report, onClick, isLoading, error,
                         }, children: 'view report →' })) : null] }), initialLoad ? (_jsx(ChartSkeleton, { containerStyle: {
                     width: '100%',
                     height: '400px',
-                } })) : error ? (_jsx(ChartError, { containerStyle: {
+                } })) : error ? (_jsx("div", { style: {
                     width: '100%',
                     height: '400px',
-                } })) : (_jsx(QuillTable, { isLoading: isLoading, rows: formattedRows ?? [], rowCount: rowCount, columns: columns, rowsPerPage: 10, containerStyle: {
+                }, children: _jsx(ChartError, { errorMessage: error }) })) : (_jsx(QuillTable, { isLoading: isLoading, rows: report.rows ?? [], rowCount: rowCount, columns: report.columns, rowsPerPage: 10, containerStyle: {
                     width: '100%',
                     height: '400px',
                 }, downloadCSV: () => {
@@ -87,5 +58,5 @@ export default function QuillTableComponent({ report, onClick, isLoading, error,
                     onPageChange && onPageChange(page);
                 }, onSortChange: (sort) => {
                     onSortChange && onSortChange(sort);
-                }, currentPage: report?.page, sort: report?.sort }))] }, report?.name));
+                }, currentPage: report?.pagination?.page, sort: report?.sort }))] }, report?.name));
 }

package/dist/esm/components/Dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAahD,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC;IACpD,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,QAAA,MAAM,QAAQ,sFA6Ib,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAahD,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC;IACpD,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,QAAA,MAAM,QAAQ,sFA4Ib,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/esm/components/Dropdown/Dropdown.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable react/display-name */
 import React, { useRef, useState } from 'react';
 import { HoveredValueContext, SelectedValueContext } from '../../contexts';
 import { useInternalState, useSelectOnKeyDown } from '../../hooks';
 import { ArrowDownHeadIcon } from '../../assets';
 import { mergeRefs } from '../../lib';
-import { constructValueToNameMapping, hasValue } from '../selectUtils';
+import { constructValueToNameMapping } from '../selectUtils';
 import Modal from '../Modal';
 const Dropdown = React.forwardRef((props, ref) => {
     const { defaultValue, value, onValueChange, placeholder = 'Select...', disabled = false, icon, children, className, theme, ...other } = props;
@@ -21,8 +20,7 @@ const Dropdown = React.forwardRef((props, ref) => {
         onValueChange?.(value);
     };
     const [hoveredValue, handleKeyDown] = useSelectOnKeyDown(handleValueChange, optionValues, isFocused, setIsFocused, selectedValue);
-    const hasSelection = hasValue(selectedValue);
-    return (_jsxs("div", { ref: mergeRefs([dropdownRef, ref]), onKeyDown: handleKeyDown, style: {
+    return (_jsxs("div", { className: className, ref: mergeRefs([dropdownRef, ref]), onKeyDown: handleKeyDown, style: {
             position: 'relative',
             width: '100%',
             minWidth: '10rem',

package/dist/esm/components/Dropdown/DropdownItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACzB,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,6FAsDjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"DropdownItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Dropdown/DropdownItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACzB,KAAK,EAAE,GAAG,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,6FAkDjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/esm/components/Dropdown/DropdownItem.js

@@ -1,15 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/* eslint-disable react/display-name */
 import React, { useContext } from 'react';
-import { HoveredValueContext, SelectedValueContext } from '../../contexts';
+import { SelectedValueContext } from '../../contexts';
 const DropdownItem = React.forwardRef((props, ref) => {
-    const { value, text, icon, className, theme, lastItem, ...other } = props;
-    const { selectedValue, handleValueChange } = useContext(SelectedValueContext);
-    const { hoveredValue } = useContext(HoveredValueContext);
-    const isActive = selectedValue === value;
-    const isHovered = hoveredValue === value;
-    const Icon = icon ? icon : null;
-    return (_jsx("button", { ref: ref, style: {
+    const { value, text, className, theme, lastItem, ...other } = props;
+    const { handleValueChange } = useContext(SelectedValueContext);
+    return (_jsx("button", { className: className, ref: ref, style: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'start',