@quillsql/react 2.12.37 → 2.12.38

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

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { COMPARISON_OPTIONS } from '../../DateRangePicker/dateRangePickerUtils';
+import { QuillMultiSelectComponent } from '../QuillMultiSelect';
+import { QuillSelectComponent } from '../QuillSelect';
+export function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponent, DateRangePickerComponent, theme, }) {
+    const [filterValue, setFilterValue] = useState(null);
+    useEffect(() => {
+        if (filter.filterType === 'string') {
+            if (filter.stringFilterType === 'multiselect') {
+                setFilterValue(filter.values);
+            }
+            else {
+                setFilterValue(filter.selectedValue);
+            }
+        }
+    }, [filter]);
+    if (filter.filterType === 'string') {
+        if (!filter.options || filter.options.length === 0) {
+            return null;
+        }
+        if (filter.stringFilterType === 'multiselect') {
+            return (_jsx(MultiSelectComponent, { label: filter.label, value: filterValue, onChange: (e) => {
+                    if (e.target.value === '') {
+                        setFilterValue(null);
+                        onChangeFilter(filter, []);
+                        return;
+                    }
+                    let jsonValue = e.target.value;
+                    if (typeof e.target.value === 'string') {
+                        jsonValue = e.target.value.split(',');
+                    }
+                    setFilterValue(jsonValue);
+                    onChangeFilter(filter, jsonValue);
+                }, options: [
+                    ...filter.options.map((elem) => ({
+                        label: elem[filter.labelField],
+                        value: elem[filter.field],
+                    })),
+                ], width: 200 }));
+        }
+        return (_jsx(SelectComponent, { label: filter.label, value: filterValue, onChange: (e) => {
+                onChangeFilter(filter, e.target.value);
+            }, options: [
+                ...filter.options.map((elem) => ({
+                    label: elem[filter.labelField],
+                    value: elem[filter.field],
+                })),
+            ], width: 200 }));
+    }
+    if (filter.filterType === 'date_range') {
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'flex-end',
+            }, children: [_jsx(DateRangePickerComponent, { label: filter.label, dateRange: { startDate: filter.startDate, endDate: filter.endDate }, preset: filter.preset.label, onChangeDateRange: (value) => {
+                        onChangeFilter(filter, {
+                            startDate: value.startDate,
+                            endDate: value.endDate,
+                        });
+                    }, onChangePreset: (e) => {
+                        onChangeFilter(filter, { preset: e.target.value });
+                    }, presetOptions: filter.options.map((option) => {
+                        return { label: option.label, value: option.label };
+                    }), selectWidth: 200 }), filter.comparison && (_jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                    }, children: [_jsx("div", { style: {
+                                paddingLeft: 16,
+                                paddingRight: 12,
+                                color: theme?.secondaryTextColor,
+                                fontFamily: theme?.fontFamily,
+                                fontSize: 14,
+                                display: 'flex',
+                                alignItems: 'center',
+                                flex: 1,
+                                whiteSpace: 'nowrap',
+                                minWidth: 80,
+                                justifyContent: 'center',
+                            }, 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,
+                                label: compareOption.text,
+                            })), width: 200 })] }))] }));
+    }
+    return null;
+}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface DashboardSectionComponentProps {
+    section: 'metrics' | 'charts' | 'tables';
+    children: React.ReactNode;
+}
+export default function DashboardSection({ section, children, }: DashboardSectionComponentProps): JSX.Element;
+//# sourceMappingURL=DashboardSection.d.ts.map

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

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

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DashboardSection({ section, children, }) {
+    // The default dashboard section uses a flex-based column layout for tables
+    if (section === 'tables')
+        return (_jsx("div", { style: {
+                boxSizing: 'content-box',
+                width: '100%',
+                gap: 40,
+                display: 'flex',
+                flexDirection: 'column',
+            }, children: children }));
+    // ... and a grid-based layout for charts and metrics.
+    return (_jsx("div", { style: {
+            boxSizing: 'content-box',
+            width: '100%',
+            listStyleType: 'none',
+            display: 'grid',
+            gap: 40,
+            gridTemplateColumns: 'repeat(auto-fill,minmax(400px, 1fr))',
+            gridTemplateRows: `repeat(${170}px)`,
+        }, children: children }));
+}

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function DashboardSectionContainer({ style, children, ...props }) {
+    return (_jsx("div", { style: {
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 40,
+            ...style,
+        }, ...props, children: children }));
+}

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

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+import { QuillReport } from '../../models/Report';
+import { QuillTheme } from '../../QuillProvider';
+export type DataLoaderChildProps = {
+    isLoading: boolean;
+    error?: string;
+    onPageChange: (page: number) => void;
+    onSortChange: (sort: {
+        field: string;
+        direction: string;
+    }) => void;
+    data: QuillReport;
+};
+export default function DataLoader({ item, children, filters, }: {
+    item: any;
+    filters?: any;
+    children: ({ isLoading, error, onPageChange, onSortChange, data, }: DataLoaderChildProps) => JSX.Element;
+}): JSX.Element;
+type ColorMapType = {
+    [key: string]: {
+        primary: string;
+        comparison?: string;
+        primaryGradientStart?: string;
+        primaryGradientStop?: string;
+        comparisonGradientStart?: string;
+        comparisonGradientStop?: string;
+    };
+};
+export type ChartDataLoaderChildProps = {
+    isLoading: boolean;
+    error?: string;
+    data: QuillReport;
+    dateBucket?: string;
+};
+export declare const ChartDataLoader: ({ item, children, dateBucket, additionalProcessing, filters, }: {
+    item: any;
+    dateBucket?: string | undefined;
+    mapColorsToFields?: ((_report: QuillReport, _theme: QuillTheme) => ColorMapType) | undefined;
+    additionalProcessing?: any;
+    filters?: any;
+    children: ({ isLoading, error, data, dateBucket, }: ChartDataLoaderChildProps) => JSX.Element;
+}) => JSX.Element;
+export {};
+//# sourceMappingURL=DataLoader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAuB,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;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

@@ -0,0 +1,190 @@
+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 { 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 [loading, setLoading] = useState(false);
+    const [error, setError] = useState(undefined);
+    const [previousPage, setPreviousPage] = useState(0);
+    const [report, setReport] = useState(dashboard[item._id] ?? constructReportFromItem(item));
+    const [additionalProcessing, setAdditionProcessing] = useState({
+        page: DEFAULT_PAGINATION,
+    });
+    const onPageChange = (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);
+        }
+    };
+    const onSortChange = (sort) => {
+        if (shouldSortInMemory(DEFAULT_PAGINATION, report.rowCount, !!report.pivot)) {
+            return;
+        }
+        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');
+                }
+                let tempRows = [...report.rows, ...paginatedRows.rows];
+                if (resetRows) {
+                    tempRows = paginatedRows.rows;
+                }
+                const convertedReport = convertInternalReportToReport({
+                    ...report,
+                    rows: tempRows,
+                });
+                setReport(convertedReport);
+                setAdditionProcessing(updatedProcessing);
+                setTimeout(() => {
+                    setLoading(false);
+                }, 200);
+            }
+            catch (e) {
+                console.log(e);
+                setLoading(false);
+            }
+        }
+    };
+    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(() => {
+        fetchReportHelper(true, additionalProcessing);
+    }, [filters, item._id]);
+    useEffect(() => {
+        // @ts-ignore
+        if (dashboard[item._id] && dashboard[item._id].triggerReload) {
+            fetchReportHelper(true, additionalProcessing);
+        }
+    }, [dashboard[item._id]]);
+    return (_jsx(_Fragment, { children: children({
+            isLoading: loading,
+            error,
+            onPageChange,
+            onSortChange,
+            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 = ({ 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[item._id] ?? constructReportFromItem(item));
+    const [client] = useContext(ClientContext);
+    const [customFields] = useContext(CustomFieldContext);
+    const fetchReportHelper = async (useReportTask = true) => {
+        const tempReport = dashboard[item._id];
+        if (tempReport &&
+            !didFiltersChange(tempReport, filters) &&
+            !tempReport.triggerReload &&
+            dateBucket === localDateBucket &&
+            additionalProcessing?.last === localAdditionalProcessing?.last) {
+            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);
+        fetchReportHelper();
+    }, [filters, item._id, dateBucket, additionalProcessing]);
+    useEffect(() => {
+        const tempReport = dashboard[item._id];
+        if (tempReport && tempReport.triggerReload) {
+            fetchReportHelper();
+        }
+    }, [dashboard[item._id]]);
+    return children({
+        isLoading: loading || initialLoad,
+        data: report,
+        error,
+        dateBucket,
+    });
+};

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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { COMPARISON_OPTIONS } from '../../DateRangePicker/dateRangePickerUtils';
+import ChartError from '../Chart/ChartError';
+import ChartSkeleton from '../Chart/ChartSkeleton';
+import { useTheme } from '../../hooks';
+export default function QuillMetricComponent({ report, onClick, error, isLoading, }) {
+    const theme = useTheme();
+    const dateFilter = report?.filtersApplied?.find((filter) => filter.filterType == 'date_range');
+    const primaryMetricLabel = report?.filtersApplied?.date_range?.preset?.label;
+    const comparisonKey = report?.filtersApplied?.date_range?.comparisonRange?.value;
+    const comparisonLabel = COMPARISON_OPTIONS.find((opt) => opt.value === comparisonKey)?.text;
+    return (_jsx("div", { onClick: () => onClick && onClick(report), style: {
+            cursor: 'pointer',
+            boxSizing: 'content-box',
+            borderRadius: 8,
+            paddingBottom: isLoading ? 0 : 30,
+            width: '100%',
+        }, children: _jsx("div", { style: {
+                width: '100%',
+                height: '100%',
+                boxSizing: 'content-box',
+            }, children: _jsx("div", { style: {
+                    width: '100%',
+                    height: '100%',
+                    boxSizing: 'content-box',
+                }, children: _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                        height: '100%',
+                        boxSizing: 'content-box',
+                    }, children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                flexDirection: 'row',
+                                justifyContent: 'space-between',
+                                boxSizing: 'content-box',
+                                paddingBottom: 5,
+                            }, children: [onClick && (_jsx("div", { style: {
+                                        fontFamily: theme.fontFamily,
+                                        color: theme.primaryTextColor,
+                                        boxSizing: 'content-box',
+                                        fontSize: 18,
+                                        fontWeight: '500',
+                                        textOverflow: 'ellipsis',
+                                        padding: 0,
+                                        whiteSpace: 'nowrap',
+                                        display: 'block',
+                                        maxWidth: '100%',
+                                        overflow: 'hidden',
+                                    }, children: report?.name })), onClick && report?.name ? (_jsx("div", { style: {
+                                        fontFamily: theme.fontFamily,
+                                        color: theme.primaryTextColor,
+                                        boxSizing: 'content-box',
+                                        fontWeight: '500',
+                                        fontSize: 14,
+                                        minWidth: 14 * 7,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'flex-end',
+                                    }, children: 'view report →' })) : null] }), isLoading ? (_jsx(ChartSkeleton, { containerStyle: {
+                                maxHeight: '78px',
+                                height: '100%',
+                            } })) : 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%',
+                                margin: 'auto',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                fontSize: 13,
+                                color: theme.secondaryTextColor,
+                                maxWidth: '100%',
+                                width: '100%',
+                            }, children: "No results" })) : (_jsx("div", { style: {
+                                padding: 0,
+                                height: '100%',
+                                width: '100%',
+                                boxSizing: 'content-box',
+                            }, children: _jsxs("div", { style: {
+                                    fontFamily: theme?.fontFamily,
+                                    fontSize: 32,
+                                    color: theme?.primaryTextColor,
+                                    fontWeight: '600',
+                                    textOverflow: 'ellipsis',
+                                    margin: 0,
+                                    whiteSpace: 'nowrap',
+                                    boxSizing: 'content-box',
+                                    maxWidth: '100%',
+                                    textAlign: 'left',
+                                    overflow: 'hidden',
+                                    height: '100%',
+                                    display: 'flex',
+                                    width: '100%',
+                                    flexDirection: 'row',
+                                }, children: [_jsxs("div", { style: {
+                                            display: 'flex',
+                                            gap: 4,
+                                            alignItems: 'baseline',
+                                            marginRight: 'auto',
+                                        }, 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,
+                                                    color: theme?.primaryTextColor,
+                                                    marginLeft: 2,
+                                                }, children: primaryMetricLabel
+                                                    ? `in ${primaryMetricLabel.toLowerCase()}`
+                                                    : 'this period' }))] }), dateFilter?.comparison && (_jsxs("div", { style: {
+                                            display: 'flex',
+                                            gap: 4,
+                                            alignItems: 'baseline',
+                                            paddingTop: 4,
+                                            color: theme?.secondaryTextColor,
+                                        }, children: [_jsx("span", { style: {
+                                                    fontSize: 28,
+                                                    fontWeight: '500',
+                                                    fontFamily: theme?.fontFamily,
+                                                    color: theme?.secondaryTextColor,
+                                                }, children: (report.rows.length > 0 &&
+                                                    report.rows[0][`comparison_${report.xAxisField}`]) ??
+                                                    0 }), _jsx("span", { style: {
+                                                    fontSize: 13,
+                                                    fontWeight: '500',
+                                                    fontFamily: theme?.fontFamily,
+                                                    color: theme?.secondaryTextColor,
+                                                    marginLeft: 2,
+                                                }, children: comparisonLabel
+                                                    ? 'in ' + comparisonLabel.toLowerCase()
+                                                    : 'previous period' })] }))] }) }))] }) }) }) }, report?.name));
+}

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+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: number) => void;
+    onSortChange?: (sort: {
+        field: string;
+        direction: string;
+    }) => void;
+}): JSX.Element;
+//# sourceMappingURL=TableComponent.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import QuillTable from '../QuillTable';
+import ChartSkeleton from '../Chart/ChartSkeleton';
+import ChartError from '../Chart/ChartError';
+import { useTheme } from '../../hooks';
+import { useExport } from '../../hooks/useExport';
+export default function QuillTableComponent({ report, onClick, isLoading, error, rowCount, onPageChange, onSortChange, }) {
+    const theme = useTheme();
+    const [initialLoad, setInitialLoad] = useState(true);
+    const { downloadCSV } = useExport(report?.id);
+    useEffect(() => {
+        if (!isLoading) {
+            setInitialLoad(false);
+        }
+    }, [isLoading]);
+    return (_jsxs("div", { style: { cursor: 'pointer' }, onClick: () => onClick && onClick(report), children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    boxSizing: 'content-box',
+                    paddingBottom: 20,
+                }, children: [_jsx("div", { style: {
+                            fontFamily: theme.fontFamily,
+                            color: theme.primaryTextColor,
+                            boxSizing: 'content-box',
+                            fontSize: 18,
+                            fontWeight: '500',
+                            textOverflow: 'ellipsis',
+                            padding: 0,
+                            whiteSpace: 'nowrap',
+                            display: 'block',
+                            maxWidth: '100%',
+                            overflow: 'hidden',
+                        }, children: report?.name }), onClick && report?.name ? (_jsx("div", { style: {
+                            fontFamily: theme.fontFamily,
+                            color: theme.primaryTextColor,
+                            boxSizing: 'content-box',
+                            fontWeight: '500',
+                            fontSize: 14,
+                            minWidth: 14 * 7,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'flex-end',
+                        }, children: 'view report →' })) : null] }), initialLoad ? (_jsx(ChartSkeleton, { containerStyle: {
+                    width: '100%',
+                    height: '400px',
+                } })) : error ? (_jsx("div", { style: {
+                    width: '100%',
+                    height: '400px',
+                }, 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: () => {
+                    downloadCSV();
+                }, onPageChange: (page) => {
+                    onPageChange && onPageChange(page);
+                }, onSortChange: (sort) => {
+                    onSortChange && onSortChange(sort);
+                }, currentPage: report?.pagination?.page, sort: report?.sort }))] }, report?.name));
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    icon?: React.JSXElementConstructor<any>;
+    children: React.ReactElement[] | React.ReactElement;
+    theme: any;
+}
+declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
+export default Dropdown;
+//# sourceMappingURL=Dropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"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"}