@quillsql/react 2.10.31 → 2.10.33

package/dist/esm/ChartEditor.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { SelectComponentProps, TextInputComponentProps, ButtonComponentProps, ModalComponentProps, HeaderProps, LabelProps, TextProps, DeleteButtonProps, PopoverComponentProps } from './components/UiComponents';
+interface ChartEditorProps {
+    isOpen: boolean;
+    chartId: string;
+    admin?: boolean;
+    isEditMode?: boolean;
+    chartBuilderTitle?: string;
+    chartBuilderButtonLabel?: string;
+    onDelete?: () => void;
+    setIsOpen: (isOpen: boolean) => void;
+    Select?: (props: SelectComponentProps) => JSX.Element;
+    TextInput?: (props: TextInputComponentProps) => JSX.Element;
+    Button?: (props: ButtonComponentProps) => JSX.Element;
+    SecondaryButton?: (props: ButtonComponentProps) => JSX.Element;
+    Header?: (props: HeaderProps) => JSX.Element;
+    Label?: (props: LabelProps) => JSX.Element;
+    Text?: (props: TextProps) => JSX.Element;
+    DeleteButton?: (props: DeleteButtonProps) => JSX.Element;
+    Modal?: (props: ModalComponentProps) => JSX.Element;
+    Popover?: (props: PopoverComponentProps) => JSX.Element;
+    destinationDashboard?: string;
+    organizationName?: string;
+}
+export default function ChartEditor({ isOpen, chartId, isEditMode, admin, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, organizationName, onDelete, setIsOpen, Select, TextInput, Button, SecondaryButton, Header, Label, Text, DeleteButton, Modal, Popover, }: ChartEditorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChartEditor.d.ts.map

package/dist/esm/ChartEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartEditor.d.ts","sourceRoot":"","sources":["../../src/ChartEditor.tsx"],"names":[],"mappings":";AAQA,OAAO,EACL,oBAAoB,EACpB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,WAAW,EACX,UAAU,EACV,SAAS,EACT,iBAAiB,EACjB,qBAAqB,EACtB,MAAM,2BAA2B,CAAC;AAInC,UAAU,gBAAgB;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC5D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACtD,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7C,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC,OAAO,CAAC;IAC3C,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,GAAG,CAAC,OAAO,CAAC;IACzD,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,GAAG,CAAC,OAAO,CAAC;IACxD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,OAAO,EACP,UAAU,EACV,KAAa,EACb,oBAAoB,EACpB,iBAAgC,EAChC,uBAAuB,EACvB,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,MAAM,EACN,eAAe,EACf,MAAM,EACN,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,OAAO,GACR,EAAE,gBAAgB,2CAgHlB"}

package/dist/esm/ChartEditor.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import { useContext, useEffect, useState } from 'react';
+import ChartBuilder from './ChartBuilder';
+import { DashboardContext, DashboardFiltersContext, ClientContext, } from './Context';
+import { getData } from './utils/dataFetcher';
+import { mergeComparisonRange } from './utils/merge';
+export default function ChartEditor({ isOpen, chartId, isEditMode, admin = false, destinationDashboard, chartBuilderTitle = 'Edit chart', chartBuilderButtonLabel, organizationName, onDelete, setIsOpen, Select, TextInput, Button, SecondaryButton, Header, Label, Text, DeleteButton, Modal, Popover, }) {
+    const { dispatch, dashboard } = useContext(DashboardContext);
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const [client, _] = useContext(ClientContext);
+    const [dashboardItem, setDashboardItem] = useState(dashboard?.[chartId]);
+    const [isLoading, setIsLoading] = useState(false);
+    const dateFilter = Object.values(dashboardFilters).find((filter) => filter.filterType == 'date_range');
+    const dateRange = dateFilter?.startDate
+        ? [dateFilter?.startDate, dateFilter?.endDate, null]
+        : [null, null, null];
+    useEffect(() => {
+        let isSubscribed = true;
+        async function getChartOptions() {
+            if (isSubscribed && !isLoading) {
+                setIsLoading(true);
+                try {
+                    const hostedBody = {
+                        metadata: {
+                            dashboardItemId: chartId,
+                            orgId: client?.customerId || '*',
+                            task: 'item',
+                            filters: [],
+                            clientId: client?.publicKey,
+                            databaseType: client?.databaseType,
+                        },
+                    };
+                    const cloudBody = {
+                        id: chartId,
+                        filters: [],
+                    };
+                    const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
+                    if (resp && resp.name !== 'error') {
+                        if (resp.compareRows) {
+                            mergeComparisonRange(resp);
+                        }
+                        setDashboardItem({
+                            ...resp,
+                            filtersApplied: dashboardFilters,
+                        });
+                        dispatch({
+                            type: 'UPDATE_DASHBOARD_ITEM',
+                            id: chartId,
+                            data: {
+                                ...resp,
+                                filtersApplied: dashboardFilters,
+                            },
+                        });
+                    }
+                    setIsLoading(false);
+                }
+                catch (e) {
+                    console.log('Error fetching chart: ', e);
+                    setIsLoading(false);
+                }
+            }
+        }
+        if (!dashboardItem) {
+            getChartOptions();
+        }
+        return () => {
+            isSubscribed = false;
+        };
+    }, [client, chartId]);
+    return (_jsx("div", { children: dashboardItem && (_jsx(ChartBuilder, { dashboardItem: dashboardItem, rows: dashboardItem.rows, columns: dashboardItem.columns, fields: dashboardItem.fields, query: dashboardItem.queryString, isOpen: isOpen, isEditMode: isEditMode, setIsOpen: setIsOpen, showTableFormatOptions: admin, showDateFieldOptions: admin, showAccessControlOptions: admin, showDashboardDropdown: admin, destinationDashboard: destinationDashboard, dateRange: dateRange, Select: Select, TextInput: TextInput, Button: Button, SecondaryButton: SecondaryButton, Header: Header, Label: Label, Text: Text, DeleteButton: DeleteButton, Modal: Modal, Popover: Popover, onDelete: onDelete, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel, organizationName: organizationName })) }));
+}

package/dist/esm/Context.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+export declare const DateFilterContext: React.Context<any>;
+export declare const SchemaContext: React.Context<any>;
+export declare const ColumnsContext: React.Context<any>;
+export declare const RowsContext: React.Context<any>;
+export declare const SelectedSidebarIndexContext: React.Context<any>;
+export declare const HistoryContext: React.Context<any>;
+export declare const SavedQueriesContext: React.Context<any>;
+export declare const SaveQueryModalStatusContext: React.Context<any>;
+export declare const EditorQueryContext: React.Context<any>;
+export declare const ThemeContext: React.Context<any>;
+export declare const ClientContext: React.Context<any>;
+export declare const CreateVisualizationModalVisibleContext: React.Context<any>;
+export declare const ActiveVisualizationContext: React.Context<any>;
+export declare const QueryResultsLoadingContext: React.Context<any>;
+export declare const EditVisualizationModalVisibleContext: React.Context<any>;
+export declare const ReportBuilderQueryContext: React.Context<any>;
+export declare const SavedReportsQueryContext: React.Context<any>;
+export declare const DashboardContext: React.Context<any>;
+export declare const DashboardFiltersContext: React.Context<any>;
+export declare const ChartDateFiltersContext: React.Context<any>;
+export declare const useChartDateFilters: () => {
+    getChartDateFilterById: (id: string) => any;
+    setChartDateFilter: (id: string, dateFilter: any) => void;
+};
+export declare const ComparisonRangeContext: React.Context<any>;
+export declare const useDateFilter: () => {
+    dateFilter: any;
+    setDateFilter: any;
+};
+export declare const useComparisonRange: () => {
+    comparisonRange: any;
+    setComparisonRange: any;
+};
+export declare const ContextProvider: ({ children, initialTheme, publicKey, environment, authToken, customerId, userId, queryEndpoint, queryHeaders, withCredentials, }: any) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Context.d.ts.map

package/dist/esm/Context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../src/Context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAKf,eAAO,MAAM,iBAAiB,oBAAwC,CAAC;AACvE,eAAO,MAAM,aAAa,oBAAwC,CAAC;AACnE,eAAO,MAAM,cAAc,oBAA0C,CAAC;AACtE,eAAO,MAAM,WAAW,oBAA0C,CAAC;AACnE,eAAO,MAAM,2BAA2B,oBAAuC,CAAC;AAChF,eAAO,MAAM,cAAc,oBAAwC,CAAC;AACpE,eAAO,MAAM,mBAAmB,oBAAwC,CAAC;AACzE,eAAO,MAAM,2BAA2B,oBAGtC,CAAC;AACH,eAAO,MAAM,kBAAkB,oBAAwC,CAAC;AACxE,eAAO,MAAM,YAAY,oBAA0C,CAAC;AACpE,eAAO,MAAM,aAAa,oBAA0C,CAAC;AACrE,eAAO,MAAM,sCAAsC,oBAGjD,CAAC;AACH,eAAO,MAAM,0BAA0B,oBAGrC,CAAC;AACH,eAAO,MAAM,0BAA0B,oBAGrC,CAAC;AACH,eAAO,MAAM,oCAAoC,oBAG/C,CAAC;AACH,eAAO,MAAM,yBAAyB,oBAAwC,CAAC;AAC/E,eAAO,MAAM,wBAAwB,oBAAwC,CAAC;AAC9E,eAAO,MAAM,gBAAgB,oBAAwC,CAAC;AACtE,eAAO,MAAM,uBAAuB,oBAAwC,CAAC;AAC7E,eAAO,MAAM,uBAAuB,oBAAwC,CAAC;AAE7E,eAAO,MAAM,mBAAmB;iCAKM,MAAM;6BACV,MAAM,cAAc,GAAG;CAQxD,CAAC;AAEF,eAAO,MAAM,sBAAsB,oBAA2B,CAAC;AAE/D,eAAO,MAAM,aAAa;;;CAGzB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;CAK9B,CAAC;AAuDF,eAAO,MAAM,eAAe,qIAWzB,GAAG,mDAqML,CAAC"}

package/dist/esm/Context.js

@@ -0,0 +1,223 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, createContext, useEffect, useReducer, useContext, } from 'react';
+const dummySetter = () => { };
+export const DateFilterContext = createContext([[], dummySetter]);
+export const SchemaContext = createContext([[], dummySetter]);
+export const ColumnsContext = createContext([null, dummySetter]);
+export const RowsContext = createContext([null, dummySetter]);
+export const SelectedSidebarIndexContext = createContext([0, dummySetter]);
+export const HistoryContext = createContext([[], dummySetter]);
+export const SavedQueriesContext = createContext([[], dummySetter]);
+export const SaveQueryModalStatusContext = createContext([
+    'HIDDEN',
+    dummySetter,
+]);
+export const EditorQueryContext = createContext(['', dummySetter]);
+export const ThemeContext = createContext([null, dummySetter]);
+export const ClientContext = createContext([null, dummySetter]);
+export const CreateVisualizationModalVisibleContext = createContext([
+    false,
+    dummySetter,
+]);
+export const ActiveVisualizationContext = createContext([
+    null,
+    dummySetter,
+]);
+export const QueryResultsLoadingContext = createContext([
+    false,
+    dummySetter,
+]);
+export const EditVisualizationModalVisibleContext = createContext([
+    false,
+    dummySetter,
+]);
+export const ReportBuilderQueryContext = createContext(['', dummySetter]);
+export const SavedReportsQueryContext = createContext(['', dummySetter]);
+export const DashboardContext = createContext([{}, dummySetter]);
+export const DashboardFiltersContext = createContext([{}, dummySetter]);
+export const ChartDateFiltersContext = createContext([{}, dummySetter]);
+export const useChartDateFilters = () => {
+    const { chartDateFilters, setChartDateFilters } = useContext(ChartDateFiltersContext);
+    const getChartDateFilterById = (id) => chartDateFilters[id];
+    const setChartDateFilter = (id, dateFilter) => {
+        setChartDateFilters((prev) => ({ ...prev, [id]: dateFilter }));
+    };
+    return {
+        getChartDateFilterById,
+        setChartDateFilter,
+    };
+};
+export const ComparisonRangeContext = createContext(null);
+export const useDateFilter = () => {
+    const { dateFilter, setDateFilter } = useContext(DateFilterContext);
+    return { dateFilter, setDateFilter };
+};
+export const useComparisonRange = () => {
+    const { comparisonRange, setComparisonRange } = useContext(ComparisonRangeContext);
+    return { comparisonRange, setComparisonRange };
+};
+const dashboardReducer = (state, action) => {
+    switch (action.type) {
+        case 'UPDATE_DASHBOARD_ITEM':
+            return {
+                ...state,
+                [action.id]: {
+                    ...state[action.id],
+                    ...action.data,
+                },
+            };
+        case 'ADD_DASHBOARD_ITEM':
+            return {
+                ...state,
+                [action.id]: action.data,
+            };
+        case 'CLEAR_DASHBOARD':
+            return {};
+        default:
+            return state;
+    }
+};
+const dashboardFiltersReducer = (state, action) => {
+    switch (action.type) {
+        case 'UPDATE_DASHBOARD_FILTER':
+            return {
+                ...state,
+                [action.id]: {
+                    ...state[action.id],
+                    ...action.data,
+                },
+            };
+        case 'ADD_DASHBOARD_FILTERS':
+            return {
+                ...action.data,
+            };
+        case 'UPDATE_DASHBOARD_FILTERS':
+            return {
+                ...state,
+                ...action.data,
+            };
+        case 'ADD_DASHBOARD_FILTER':
+            return {
+                ...state,
+                [action.id]: action.data,
+            };
+        case 'CLEAR_DASHBOARD_FILTERS':
+            return {};
+        default:
+            return state;
+    }
+};
+export const ContextProvider = ({ children, initialTheme, publicKey, environment, authToken, customerId, userId, queryEndpoint, queryHeaders, withCredentials, }) => {
+    const [client, setClient] = useState(null);
+    const [theme, setTheme] = useState(null);
+    const [columns, setColumns] = useState(null);
+    const [rows, setRows] = useState(null);
+    const [schema, setSchema] = useState([]);
+    const [selectedSidebarIndex, setSelectedSidebarIndex] = useState(0);
+    const [history, setHistory] = useState([]);
+    const [savedQueries, setSavedQueries] = useState([]);
+    // REPORT_BUILDER, SQL_EDITOR, HIDDEN
+    const [saveQueryModalStatus, setSaveQueryModalStatus] = useState('HIDDEN');
+    const [editorQuery, setEditorQuery] = useState('');
+    const [savedReportsQuery, setSavedReportsQuery] = useState('');
+    const [reportBuilderQuery, setReportBuilderQuery] = useState('');
+    const [createVisualizationModalVisible, setCreateVisualizationModalVisible] = useState(false);
+    const [activeVisualization, setActiveVisualization] = useState(null);
+    const [queryResultsLoading, setQueryResultsLoading] = useState(false);
+    const [editVisualizationModalVisible, setEditVisualizationModalVisible] = useState(false);
+    const [dashboard, dispatch] = useReducer(dashboardReducer, {});
+    const [dashboardFilters, dashboardFiltersDispatch] = useReducer(dashboardFiltersReducer, {});
+    const [dateFilter, setDateFilter] = useState(null);
+    const [comparisonRange, setComparisonRange] = useState(null);
+    // SETS INITIAL THEME
+    useEffect(() => {
+        if (!theme) {
+            // Create a copy of initialTheme
+            const newTheme = { ...initialTheme };
+            // Check if chartColors field is missing or empty, and set default values if needed
+            if (!newTheme.chartColors || newTheme.chartColors.length === 0) {
+                newTheme.chartColors = [
+                    '#4E80EE',
+                    '#E14F62',
+                    '#55B5A6',
+                    '#E9A23B',
+                    '#6466E9',
+                    '#55B685',
+                ];
+            }
+            // Update the theme state
+            setTheme(newTheme);
+        }
+    }, [initialTheme]);
+    // SETS INITIAL CLIENT
+    useEffect(() => {
+        if (!client) {
+            setClient({
+                customerId,
+                userId,
+                authToken,
+                publicKey,
+                environment,
+                queryEndpoint,
+                queryHeaders,
+                withCredentials,
+            });
+        }
+        if (client && client.publicKey !== publicKey) {
+            setClient((client) => ({ ...client, publicKey }));
+        }
+        if (client && client.customerId !== customerId) {
+            setClient((client) => ({ ...client, customerId }));
+        }
+    }, [
+        customerId,
+        userId,
+        authToken,
+        publicKey,
+        client,
+        environment,
+        queryEndpoint,
+        queryHeaders,
+        withCredentials,
+    ]);
+    // DYNAMICALLY CHANGE ORG
+    useEffect(() => {
+        setClient((client) => {
+            return { ...client, customerId, environment };
+        });
+        if (Object.keys(dashboard).length > 0) {
+            dispatch({ type: 'CLEAR_DASHBOARD' });
+        }
+    }, [customerId, environment]);
+    if (!theme || !client) {
+        return null;
+    }
+    return (_jsx(ClientContext.Provider, { value: [client, setClient], children: _jsx(ThemeContext.Provider, { value: [theme, setTheme], children: _jsx(SchemaContext.Provider, { value: [schema, setSchema], children: _jsx(ColumnsContext.Provider, { value: [columns, setColumns], children: _jsx(RowsContext.Provider, { value: [rows, setRows], children: _jsx(SelectedSidebarIndexContext.Provider, { value: [selectedSidebarIndex, setSelectedSidebarIndex], children: _jsx(HistoryContext.Provider, { value: [history, setHistory], children: _jsx(SavedQueriesContext.Provider, { value: [savedQueries, setSavedQueries], children: _jsx(SaveQueryModalStatusContext.Provider, { value: [saveQueryModalStatus, setSaveQueryModalStatus], children: _jsx(CreateVisualizationModalVisibleContext.Provider, { value: [
+                                                createVisualizationModalVisible,
+                                                setCreateVisualizationModalVisible,
+                                            ], children: _jsx(EditorQueryContext.Provider, { value: [editorQuery, setEditorQuery], children: _jsx(ActiveVisualizationContext.Provider, { value: [
+                                                        activeVisualization,
+                                                        setActiveVisualization,
+                                                    ], children: _jsx(QueryResultsLoadingContext.Provider, { value: [
+                                                            queryResultsLoading,
+                                                            setQueryResultsLoading,
+                                                        ], children: _jsx(EditVisualizationModalVisibleContext.Provider, { value: [
+                                                                editVisualizationModalVisible,
+                                                                setEditVisualizationModalVisible,
+                                                            ], children: _jsx(ReportBuilderQueryContext.Provider, { value: [
+                                                                    reportBuilderQuery,
+                                                                    setReportBuilderQuery,
+                                                                ], children: _jsx(SavedReportsQueryContext.Provider, { value: [
+                                                                        savedReportsQuery,
+                                                                        setSavedReportsQuery,
+                                                                    ], children: _jsx(DashboardContext.Provider, { value: { dashboard, dispatch }, children: _jsx(DashboardFiltersContext.Provider, { value: {
+                                                                                dashboardFilters,
+                                                                                dashboardFiltersDispatch,
+                                                                            }, children: _jsx(DateFilterContext.Provider, { value: {
+                                                                                    dateFilter,
+                                                                                    setDateFilter,
+                                                                                }, children: _jsx(ComparisonRangeContext.Provider, { value: {
+                                                                                        comparisonRange,
+                                                                                        setComparisonRange,
+                                                                                    }, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+};

package/dist/esm/Dashboard.d.ts

@@ -0,0 +1,178 @@
+import React from 'react';
+import { SkeletonComponentProps } from './components/Chart/ChartSkeleton';
+interface QuillOption {
+    value: string;
+    label: string;
+}
+interface SelectComponentProps {
+    label?: string;
+    onChange: (_: string) => void;
+    value: string;
+    options: QuillOption[];
+}
+export interface DateRangePickerComponentProps {
+    dateRange: {
+        startDate: Date;
+        endDate: Date;
+    };
+    label?: string;
+    onChangeDateRange: (_: {
+        startDate: Date;
+        endDate: Date;
+    }) => void;
+    presetOptions: {
+        label: string;
+        value: string;
+    }[];
+    onChangePreset: (_: string) => void;
+    preset: string;
+}
+interface FilterButtonComponentProps {
+    onClick: () => void;
+    label: string;
+}
+interface ModalComponentProps {
+    children: any;
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+}
+export type AxisFormat = 'percent' | 'dollar_amount' | 'dollar_cents' | 'whole_number' | 'one_decimal_place' | 'two_decimal_places' | 'string' | 'yyyy' | 'MMM_yyyy' | 'MMM_dd_yyyy' | 'hh_ap_pm' | 'MMM_dd-MMM_dd' | 'MMM_dd_hh:mm_ap_pm' | 'wo, yyyy';
+/**
+ * A dashboard item represents an individual item on a dashboard.
+ *
+ * Dashboard items can be charts, metric tiles, tables, etc. and can be styled
+ * however you'd like.
+ */
+export interface DashboardItem {
+    /** The dashboard item's unique id. */
+    id: string;
+    /** The name of the dashboard item. */
+    name: string;
+    /** The name of the dashboard this item belongs to. */
+    dashboardName: string;
+    /** The rows of data returned from this item's query. */
+    rows: {
+        [key: string]: string;
+    }[];
+    /** The columns data returned from this item's query. */
+    columns: any[];
+    /** The type of this chart. */
+    chartType: string;
+    /** The table and field this chart uses for date filtering */
+    dateField: {
+        table: string;
+        field: string;
+    } | null;
+    /** The pivot used in this query */
+    pivot: {
+        title: string;
+        aggregationType: 'sum' | 'average' | 'count';
+        rowField: string;
+        rowFieldType: string;
+        columnField: string | undefined;
+        columnFieldType: string | undefined;
+        valueField: string;
+    } | null;
+    /** The formatted primary range aggregation value, if any. */
+    primaryAggregation?: string;
+    /** The formatted comparison range aggregation value, if any. */
+    comparisonAggregation?: string;
+    /** The percent change in the aggragations, if any. */
+    aggregationPercentChange?: string;
+    /** The label of the xAxis. */
+    xAxisLabel: string;
+    /** The field to use for this item's xAxis. */
+    xAxisField: string;
+    /** The format for this item's xAxis. */
+    xAxisFormat: AxisFormat;
+    /**
+     * A list of metadata about the yAxes of this item.
+     */
+    yAxisFields: {
+        /** The field for this yAxis. */
+        field: string;
+        /** The label to use for this yAxis. */
+        label: string;
+        /** The format of the data in this yAxis. */
+        format: AxisFormat;
+    }[];
+    /**
+     * The relative ordering of this dashboard item in relation to its sibling
+     * dashboard items. Ordering starts at 1 and counts up.
+     *
+     * Also note that dashboard items in the same section are first grouped by
+     * `chartType` and then each group is sorted by `order`. Currently, the first
+     * group is the `metric` items and the last group is the `table` items with
+     * the rest of the items in between.
+     */
+    order: number;
+    /**
+     * The rows of data returned from this item's query over the comparison date
+     * range as opposed to the primary date range.
+     */
+    compareRows: {
+        [key: string]: string;
+    }[];
+    /** A map of filters that have been applied to this query. */
+    filtersApplied: {
+        [key: string]: any;
+    };
+}
+export interface DashboardItemProps {
+    dashboardItem: DashboardItem;
+    onClickDashboardItem?: any;
+    children?: any;
+    theme?: any;
+    style?: any;
+}
+export interface DashboardProps {
+    /** The name of the dashboard. Must be unique. */
+    name?: string;
+    /**
+     * The styles for the dashboard container.
+     *
+     * This container is the parent of all the filtering buttons as well as any
+     * dashboard sections. The passed style can either be an object of React-style
+     * CSSProperties or a TailwindCSS-style classname string.
+     */
+    containerStyle?: React.CSSProperties | string;
+    metricContainerStyle?: React.CSSProperties;
+    chartContainerStyle?: React.CSSProperties;
+    maxColumnWidth?: number;
+    rowHeight?: number;
+    onClickDashboardItem?: (_: any) => void;
+    hideFilters?: boolean;
+    dateRangeFilterDisabled?: boolean;
+    EmptyDashboardComponent?: () => JSX.Element;
+    SelectComponent?: (_: SelectComponentProps) => JSX.Element;
+    MetricComponent?: (_: DashboardItemProps) => JSX.Element;
+    ChartComponent?: (_: DashboardItemProps) => JSX.Element;
+    TableComponent?: (_: DashboardItemProps) => JSX.Element;
+    DateRangePickerComponent?: (_: DateRangePickerComponentProps) => JSX.Element;
+    FilterButtonComponent?: (_: FilterButtonComponentProps) => JSX.Element;
+    FilterModalComponent?: (_: ModalComponentProps) => JSX.Element;
+    DashboardSectionContainerComponent?: (_: any) => JSX.Element;
+    DashboardSectionComponent?: (_: any) => JSX.Element;
+    onChangeLoading?: (_: boolean) => void;
+    hideXAxis?: boolean;
+    hideYAxis?: boolean;
+    hideCartesianGrid?: boolean;
+    SkeletonComponent?: (_: SkeletonComponentProps) => JSX.Element;
+}
+type SelectComponentType = ({ label, onChange, value, options, }: SelectComponentProps) => JSX.Element;
+type DateRangePickerComponentType = ({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, }: DateRangePickerComponentProps) => JSX.Element;
+interface DashboardFilterProps {
+    filter: any;
+    onChangeFilter: (...args: any[]) => void;
+    SelectComponent: SelectComponentType | React.MemoExoticComponent<SelectComponentType>;
+    DateRangePickerComponent: DateRangePickerComponentType | React.MemoExoticComponent<DateRangePickerComponentType>;
+    theme: any;
+}
+export declare function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePickerComponent, theme, }: DashboardFilterProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Quill Dashboard.
+ */
+export default function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, dateRangeFilterDisabled, SelectComponent, EmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, MetricComponent, ChartComponent, TableComponent, SkeletonComponent, DashboardSectionContainerComponent, DashboardSectionComponent, hideXAxis, hideYAxis, hideCartesianGrid, }: DashboardProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=Dashboard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../src/Dashboard.tsx"],"names":[],"mappings":"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"}