@quillsql/react 2.12.30 → 2.12.31

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

@@ -1,17 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 import { Area, CartesianGrid, ComposedChart as ReChartsAreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
-import { valueFormatter } from '../../utils/valueFormatter';
+import { DATE_FORMAT_TYPES, quillFormat, valueFormatter, } from '../../utils/valueFormatter';
 import { axisFormatter } from '../../utils/axisFormatter';
 import { selectColor } from '../../utils/color';
 import ChartTooltip from '../../components/Chart/ChartTooltip';
 import getDomain from '../../utils/getDomain';
 import { useEffect, useState } from 'react';
 import { hashCode } from '../../utils/crypto';
+function createLineForEmptyChart(yAxisFields, dateFilter, xAxisField, xAxisFormat) {
+    let lineChartData = [];
+    if (dateFilter &&
+        DATE_FORMAT_TYPES.includes(xAxisFormat || '') &&
+        (!lineChartData || lineChartData.length === 0)) {
+        const xAxis = xAxisField || '';
+        const yAxis = yAxisFields[0]?.field;
+        const startDate = quillFormat({
+            value: dateFilter?.startDate,
+            format: xAxisFormat,
+        });
+        const endDate = quillFormat({
+            value: dateFilter?.endDate,
+            format: xAxisFormat,
+        });
+        lineChartData = [
+            { [xAxis]: startDate, [yAxis]: '0' },
+            { [xAxis]: endDate, [yAxis]: '0' },
+        ];
+    }
+    return lineChartData;
+}
 export default function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', comparisonLineStyle = 'solid', cartesianGridLineColor, onClickChartElement = () => { }, dateFilter, }) {
     const [formattedData, setFormattedData] = useState(data);
     useEffect(() => {
         if (!data || data.length === 0) {
+            setFormattedData(createLineForEmptyChart(yAxisFields, dateFilter, xAxisField, xAxisFormat));
             return;
         }
         let newData = [...data];
@@ -31,7 +54,7 @@ export default function LineChart({ colors, colorMap = {}, yAxisFields, data, co
         }
         setFormattedData(newData);
     }, [data]);
-    if (!data || data.length === 0) {
+    if (!formattedData || formattedData.length === 0) {
         return (_jsx("div", { style: {
                 display: 'flex',
                 flex: '1 0 auto',
@@ -57,6 +80,7 @@ export default function LineChart({ colors, colorMap = {}, yAxisFields, data, co
                 key = 'comparisonGradientStart';
             if (index === 0 && gradient === 'stop')
                 key = 'comparisonGradientStop';
+            // @ts-ignore
             return colorMap[field][key];
         }
         return undefined; // use the default colors from the theme

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { QuillReport } from '../../Dashboard';
+import { QuillReport } from '../../models/Report';
 import { QuillTheme } from '../../QuillProvider';
 export type DataLoaderChildProps = {
     isLoading: boolean;
@@ -9,10 +9,10 @@ export type DataLoaderChildProps = {
         field: string;
         direction: string;
     }) => void;
-    data?: any;
+    data: QuillReport;
 };
-export default function DataLoader({ id, children, filters, }: {
-    id: string;
+export default function DataLoader({ item, children, filters, }: {
+    item: any;
     filters?: any;
     children: ({ isLoading, error, onPageChange, onSortChange, data, }: DataLoaderChildProps) => JSX.Element;
 }): JSX.Element;
@@ -29,11 +29,11 @@ type ColorMapType = {
 export type ChartDataLoaderChildProps = {
     isLoading: boolean;
     error?: string;
-    data?: any;
+    data: QuillReport;
     dateBucket?: string;
 };
-export declare const ChartDataLoader: ({ id, children, dateBucket, additionalProcessing, filters, }: {
-    id: string;
+export declare const ChartDataLoader: ({ item, children, dateBucket, additionalProcessing, filters, }: {
+    item: any;
     dateBucket?: string | undefined;
     mapColorsToFields?: ((_report: QuillReport, _theme: QuillTheme) => ColorMapType) | undefined;
     additionalProcessing?: any;

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":";AAOA,OAAO,EAAE,WAAW,EAAuB,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAUjD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,IAAI,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,CA4Hd;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;;mCAGC,WAAW,UACZ,UAAU,KACf,YAAY;2BACM,GAAG;cAChB,GAAG;wDAMV,yBAAyB,KAAK,WAAW;MAC1C,WAgEH,CAAC"}
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAuB,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAmCjD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,YAAY,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,OAAO,GACR,EAAE;IACD,IAAI,EAAE,GAAG,CAAC;IACV,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,CA4Id;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAIF,eAAO,MAAM,eAAe;UAOpB,GAAG;;mCAGE,WAAW,UACZ,UAAU,KACf,YAAY;2BACM,GAAG;cAChB,GAAG;wDAMV,yBAAyB,KAAK,WAAW;MAC1C,WAsEH,CAAC"}

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

@@ -2,17 +2,37 @@ 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 { fetchReport } from '../../utils/report';
+import { convertInternalReportToReport, EMPTY_REPORT, fetchReport, } from '../../utils/report';
 import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from '../../utils/paginationProcessing';
 import { fetchTableByReport } from '../../utils/tableProcessing';
-export default function DataLoader({ id, children, filters, }) {
+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 { dispatch, dashboard } = useContext(DashboardContext);
+    const [dashboard, dispatch] = useContext(DashboardContext);
     const [customFields] = useContext(CustomFieldContext);
     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: DEFAULT_PAGINATION,
     });
@@ -33,7 +53,7 @@ export default function DataLoader({ id, children, filters, }) {
         }
     };
     const onSortChange = (sort) => {
-        if (shouldSortInMemory(DEFAULT_PAGINATION, report.rowCount, report.pivot)) {
+        if (shouldSortInMemory(DEFAULT_PAGINATION, report.rowCount, !!report.pivot)) {
             return;
         }
         const updatedProcessing = { page: DEFAULT_PAGINATION, sort };
@@ -54,7 +74,11 @@ export default function DataLoader({ id, children, filters, }) {
                 if (resetRows) {
                     tempRows = paginatedRows.rows;
                 }
-                setReport({ ...report, rows: tempRows });
+                const convertedReport = convertInternalReportToReport({
+                    ...report,
+                    rows: tempRows,
+                });
+                setReport(convertedReport);
                 setAdditionProcessing(updatedProcessing);
                 setTimeout(() => {
                     setLoading(false);
@@ -67,70 +91,81 @@ export default function DataLoader({ id, children, filters, }) {
         }
     };
     const fetchReportHelper = async (useReportTask = true, processing) => {
-        if (!didFiltersChange(dashboard[id], filters) &&
+        if (dashboard[item._id] &&
+            !didFiltersChange(dashboard[item._id], filters) &&
             !loading &&
-            !dashboard[id].triggerReload) {
+            // @ts-ignore
+            !dashboard[item._id].triggerReload) {
             setLoading(false);
-            setReport(dashboard[id]);
+            const convertedReport = convertInternalReportToReport(
+            // @ts-ignore
+            dashboard[item._id]);
+            setReport(convertedReport);
             return;
         }
         setLoading(true);
-        const { report, error } = await fetchReport(id, client, useReportTask, filters, processing, undefined, customFields);
+        const { report, error } = await fetchReport(item._id, client, useReportTask, filters, processing, undefined, customFields);
         dispatch({
             type: 'UPDATE_DASHBOARD_ITEM',
-            id: id,
+            id: item._id,
             data: { ...report, triggerReload: false },
         });
-        setReport(report);
+        const convertedReport = convertInternalReportToReport(report);
+        setReport(convertedReport);
         setAdditionProcessing(processing);
         setError(error);
         setLoading(false);
     };
     useEffect(() => {
         fetchReportHelper(true, additionalProcessing);
-    }, [filters, id]);
+    }, [filters, item._id]);
     useEffect(() => {
-        if (dashboard[id] && dashboard[id].triggerReload) {
+        // @ts-ignore
+        if (dashboard[item._id] && dashboard[item._id].triggerReload) {
             fetchReportHelper(true, additionalProcessing);
         }
-    }, [dashboard[id]]);
+    }, [dashboard[item._id]]);
     return (_jsx(_Fragment, { children: children({
             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, 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 [report, setReport] = useState(dashboard[id]);
+    const [report, setReport] = useState(dashboard[item._id] ?? constructReportFromItem(item));
     const [client] = useContext(ClientContext);
     const [customFields] = useContext(CustomFieldContext);
     const fetchReportHelper = async (useReportTask = true) => {
-        if (!didFiltersChange(dashboard[id], filters) &&
-            !dashboard[id].triggerReload &&
+        const tempReport = dashboard[item._id];
+        if (tempReport &&
+            !didFiltersChange(tempReport, filters) &&
+            !tempReport.triggerReload &&
             dateBucket === localDateBucket &&
             additionalProcessing?.last === localAdditionalProcessing?.last) {
             setLoading(false);
-            setReport(dashboard[id]);
+            const convertedReport = convertInternalReportToReport(tempReport);
+            setReport(convertedReport);
             return;
         }
         setLoading(true);
-        const { report, error } = await fetchReport(id, client, useReportTask, filters, additionalProcessing, dateBucket, customFields);
+        const { report, error } = await fetchReport(item._id, client, useReportTask, filters, additionalProcessing, dateBucket, customFields);
         dispatch({
             type: 'UPDATE_DASHBOARD_ITEM',
-            id: id,
+            id: item._id,
             data: { ...report, triggerReload: false },
         });
-        setReport(report);
+        const convertedReport = convertInternalReportToReport(report);
+        setReport(convertedReport);
         setLocalDateBucket(dateBucket);
         setLocalAdditionalProcessing(additionalProcessing);
         setError(error);
@@ -139,15 +174,16 @@ export const ChartDataLoader = ({ id, children, dateBucket, additionalProcessing
     useEffect(() => {
         setInitialLoad(false);
         fetchReportHelper();
-    }, [filters, id, dateBucket, additionalProcessing]);
+    }, [filters, item._id, dateBucket, additionalProcessing]);
     useEffect(() => {
-        if (dashboard[id] && dashboard[id].triggerReload) {
+        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;AAQnD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA8PhC"}
+{"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("div", { children: _jsx(ChartError, { errorMessage: error }) })) : 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,5 +1,5 @@
 /// <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;

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":";AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAK9C,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,CAyId"}
+{"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',
@@ -78,7 +49,7 @@ export default function QuillTableComponent({ report, onClick, isLoading, error,
                 } })) : error ? (_jsx("div", { style: {
                     width: '100%',
                     height: '400px',
-                }, children: _jsx(ChartError, { errorMessage: error }) })) : (_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: () => {

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

@@ -1 +1 @@
-{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAW3D;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,yBAAyB,2CAqS3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAwDpB,CAAC"}
+{"version":3,"file":"QuillMultiSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillMultiSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAiC3D;;GAEG;AACH,wBAAgB,kCAAkC,CAAC,EACjD,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,GACN,EAAE,yBAAyB,2CAqS3B;AAED,eAAO,MAAM,gBAAgB;WAKpB,MAAM;kBACC,MAAM,KAAK,IAAI;iBAChB,MAAM;6CAwDpB,CAAC"}

package/dist/esm/components/QuillMultiSelectWithCombo.js

@@ -2,6 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useOnClickOutside } from '../hooks';
 import React, { useContext, useEffect, useRef, useState, } from 'react';
 import { ThemeContext } from '../Context';
+/**
+ * Helper function for displaying option labels
+ */
+function displaySelectedOptionLabels({ options, value, }) {
+    if (!value || !value.length) {
+        return 'Select';
+    }
+    const matchingOptions = options.filter((elem) => value.includes(elem.value));
+    if (!matchingOptions.length) {
+        return 'Select';
+    }
+    return matchingOptions
+        .map((elem) => elem.label)
+        .join(', ');
+}
 /**
  * A robust select component that implements the new minimal Select interface.
  */
@@ -100,7 +115,7 @@ export function QuillMultiSelectComponentWithCombo({ options, width, onChange, l
                             width: '100%',
                             textAlign: 'left',
                             zIndex: 1,
-                        }, children: value && value.length > 0 ? value.join(', ') : 'Select' }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: _jsx("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal && (_jsxs("div", { ref: modalRef, style: {
+                        }, children: displaySelectedOptionLabels({ options, value }) }), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", "data-slot": "icon", height: 20, width: 20, style: { minHeight: 20, minWidth: 20 }, children: _jsx("path", { fillRule: "evenodd", d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }) })] }), showModal && (_jsxs("div", { ref: modalRef, style: {
                     position: 'absolute',
                     width: '100%',
                     display: 'flex',

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

@@ -1 +1 @@
-{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAMtD;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,GACN,EAAE,oBAAoB,2CAgPtB"}
+{"version":3,"file":"QuillSelectWithCombo.d.ts","sourceRoot":"","sources":["../../../src/components/QuillSelectWithCombo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAYtD;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,EAC5C,OAAO,EACP,KAAK,EACL,KAAK,EACL,QAAQ,EACR,KAAK,GACN,EAAE,oBAAoB,2CAoPtB"}

package/dist/esm/components/QuillSelectWithCombo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useOnClickOutside } from '../hooks';
-import React, { useContext, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState, } from 'react';
 import { ThemeContext } from '../Context';
 import { ListboxTextInput } from './QuillMultiSelectWithCombo';
 /**
@@ -11,8 +11,11 @@ export function QuillSelectComponentWithCombo({ options, value, width, onChange,
     const [showModal, setShowModal] = useState(false);
     const modalRef = useRef(null);
     const [searchQuery, setSearchQuery] = React.useState('');
-    const [filteredItems, setFilteredItems] = React.useState(options.slice(0, 20));
+    const [filteredItems, setFilteredItems] = React.useState([]);
     useOnClickOutside(modalRef, () => setShowModal(false));
+    useEffect(() => {
+        setFilteredItems(options.slice(0, 20));
+    }, [options]);
     const handleSearchChange = (value) => {
         setSearchQuery(value);
         const curFilteredItems = value === ''

package/dist/esm/components/ReportBuilder/FilterModal.d.ts

@@ -1,11 +1,16 @@
 /// <reference types="react" />
-import { Filter } from '../../models/Filter';
+import { Filter, Operator } from '../../models/Filter';
 interface FilterModalProps {
     schema: any;
     filter?: Filter;
     fieldValuesMap: {
         [key: string]: string[];
+    } | {
+        [key: string]: {
+            [key: string]: string[];
+        };
     };
+    customOperatorOptions?: OperatorOptionsMap;
     onSubmitFilter: (filter: Filter) => void;
     onDeleteFilter: () => void;
     ButtonComponent: React.ComponentType<any>;
@@ -14,9 +19,12 @@ interface FilterModalProps {
     SecondaryButtonComponent?: React.ComponentType<any>;
     MultiSelectComponent: React.ComponentType<any>;
 }
+type OperatorOptionsMap = {
+    [key: string]: Operator[];
+};
 /**
  * Modal for adding, editing, and deleting Filters
  */
-export default function FilterModal({ schema, filter, fieldValuesMap, onSubmitFilter, onDeleteFilter, ButtonComponent, SelectComponent, TextInputComponent, SecondaryButtonComponent, MultiSelectComponent, }: FilterModalProps): import("react/jsx-runtime").JSX.Element;
+export default function FilterModal({ schema, filter, fieldValuesMap, customOperatorOptions, onSubmitFilter, onDeleteFilter, ButtonComponent, SelectComponent, TextInputComponent, SecondaryButtonComponent, MultiSelectComponent, }: FilterModalProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FilterModal.d.ts.map

package/dist/esm/components/ReportBuilder/FilterModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/FilterModal.tsx"],"names":[],"mappings":";AAIA,OAAO,EACL,MAAM,EAUP,MAAM,qBAAqB,CAAC;AAK7B,UAAU,gBAAgB;IACxB,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;KAAE,CAAC;IAC5C,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,kBAAkB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C,wBAAwB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACpD,oBAAoB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CAChD;AAWD;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,MAAM,EACN,cAAc,EACd,cAAc,EACd,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,wBAAwB,EACxB,oBAAoB,GACrB,EAAE,gBAAgB,2CAstBlB"}
+{"version":3,"file":"FilterModal.d.ts","sourceRoot":"","sources":["../../../../src/components/ReportBuilder/FilterModal.tsx"],"names":[],"mappings":";AAIA,OAAO,EACL,MAAM,EAIN,QAAQ,EAOT,MAAM,qBAAqB,CAAC;AAM7B,UAAU,gBAAgB;IACxB,MAAM,EAAE,GAAG,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,EACZ;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;KAAE,GACzB;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG;YAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;SAAE,CAAA;KAAE,CAAC;IACnD,qBAAqB,CAAC,EAAE,kBAAkB,CAAC;IAC3C,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,eAAe,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC1C,kBAAkB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C,wBAAwB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACpD,oBAAoB,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CAChD;AAQD,KAAK,kBAAkB,GAAG;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,EAAE,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,MAAM,EACN,cAAc,EACd,qBAAqB,EACrB,cAAc,EACd,cAAc,EACd,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,wBAAwB,EACxB,oBAAoB,GACrB,EAAE,gBAAgB,2CAwvBlB"}