@quillsql/react 2.12.37 → 2.12.38

package/dist/esm/ChartEditor.d.ts

@@ -0,0 +1,209 @@
+import React, { ReactNode } from 'react';
+import { QuillReport } from './models/Report';
+/**
+ * Props for the Quill ChartEditor component.
+ */
+export interface ChartEditorProps {
+    /** Whether the modal is open. */
+    isOpen: boolean;
+    /** A callback that sets the isOpen state. */
+    setIsOpen: (isOpen: boolean) => void;
+    /** The id of the chart that is being edited. */
+    reportId: string;
+    /** Whether the editor has administrative priveleges. */
+    isAdmin?: boolean;
+    /** The title of the chart builder form. */
+    chartBuilderTitle?: string;
+    /** The button label for the chart builder. */
+    chartBuilderButtonLabel?: string;
+    /**
+     * A callback that is fired when the add to dashboard flow has been completed.
+     */
+    onAddToDashboardComplete?: (report: QuillReport) => void;
+    /** A callback function triggered when a chart element is clicked */
+    onClickChartElement?: (element: any) => void;
+    /** A callback function triggered when the chart error button is clicked */
+    onClickChartError?: (element: any) => void;
+    /** A callback that is fired when the item is deleted. */
+    onDelete?: () => void;
+    /** A select component. */
+    SelectComponent?: (props: {
+        value: string;
+        label?: string;
+        options: {
+            value: string;
+            label: string;
+        }[];
+        onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+        width: number;
+    }) => JSX.Element;
+    /** An input component to get text from your users. */
+    TextInputComponent?: (props: {
+        id: string;
+        width: number;
+        value: string;
+        label?: string;
+        placeholder?: string;
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    }) => JSX.Element;
+    /** A button component. */
+    ButtonComponent?: (props: {
+        onClick: () => void;
+        label: string;
+        disabled?: boolean;
+        icon?: ReactNode;
+    }) => JSX.Element;
+    /** A secondary button. */
+    SecondaryButtonComponent?: (props: {
+        onClick: () => void;
+        label: string;
+        disabled?: boolean;
+        icon?: ReactNode;
+    }) => JSX.Element;
+    /**
+     * A small delete button used to click out of things. Usually an "X" icon.
+     */
+    DeleteButtonComponent?: (props: {
+        onClick: () => void;
+    }) => JSX.Element;
+    /** A header component. */
+    HeaderComponent?: (props: {
+        label: string;
+    }) => JSX.Element;
+    /** A sub-header component describes a group of inputs. */
+    SubHeaderComponent?: (props: {
+        label: string;
+    }) => JSX.Element;
+    /** A label component. */
+    LabelComponent?: (props: {
+        label: string;
+    }) => JSX.Element;
+    /** A text component. */
+    TextComponent?: (props: {
+        label: string;
+    }) => JSX.Element;
+    /** A card component used as a dismissable container of pivot information. */
+    CardComponent?: (props: {
+        children: ReactNode;
+        onClick?: () => void;
+        onDelete?: () => void;
+    }) => JSX.Element;
+    /**
+     * A modal component.
+     */
+    ModalComponent?: (props: {
+        isOpen: boolean;
+        setIsOpen: (isOpen: boolean) => void;
+        title?: string | undefined;
+        children: ReactNode;
+        width?: number | undefined;
+        height?: number | undefined;
+    }) => JSX.Element;
+    /** A popover component. */
+    PopoverComponent?: (props: {
+        isOpen: boolean;
+        setIsOpen: (isOpen: boolean) => void;
+        triggerLabel?: string;
+        popoverTitle?: string;
+        popoverChildren: ReactNode;
+    }) => JSX.Element;
+    /** A table component. */
+    TableComponent?: (props: {
+        rows: {
+            [key: string]: any;
+        }[];
+        columns: {
+            field: string;
+            label: string;
+        }[];
+        isLoading?: boolean;
+    }) => JSX.Element;
+    /**
+     * A loading component to show in the pivot modal while suggestions load.
+     */
+    LoadingComponent?: () => JSX.Element;
+    /**
+     * A container for each row of inputs for the ChartBuilder form.
+     */
+    ChartBuilderInputRowContainer?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
+    /**
+     * A container for vertically-stacked rows of inputs for the ChartBuilder form.
+     */
+    ChartBuilderInputColumnContainer?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
+    /**
+     * A container for vertically-stacked sections of the chart builder form.
+     */
+    ChartBuilderFormContainer?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
+    /**
+     * A container for each row of inputs for the pivot form.
+     */
+    PivotRowContainer?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
+    /**
+     * A container for vertically-stacked rows of inputs for the pivot form.
+     */
+    PivotColumnContainer?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
+    /**
+     * A component that displays error messages.
+     */
+    ErrorMessageComponent?: (props: {
+        errorMessage: string;
+    }) => JSX.Element;
+    /**
+     * A component that displays when the chart errors.
+     */
+    ErrorComponent?: (props: {
+        className?: string;
+        containerStyle?: React.CSSProperties;
+        label?: string;
+        onClick?: (element: any) => void;
+        ButtonComponent?: React.ComponentType<any>;
+    }) => JSX.Element;
+    /** The default dashboard to add the item to. */
+    destinationDashboard?: string;
+    /** The name of the current organization. */
+    organizationName?: string;
+    /** Whether the ChartBuilder is in horizontal view mode. */
+    isHorizontalView?: boolean;
+    /** Whether to hide the delete button. */
+    hideDeleteButton?: boolean;
+    /** Whether to hide the submit button. */
+    hideSubmitButton?: boolean;
+}
+/**
+ * ### Quill Chart Editor
+ *
+ * Presents the Quill Chart Builder form as a modal.
+ *
+ * @example
+ * ```js
+ * // Usage without custom components
+ * <ChartEditor isOpen={true} reportId="1234" />
+ * ```
+ *
+ * @example
+ * ```js
+ * // You can also pass your own components
+ * <ChartEditor
+ *   isOpen={isOpen}
+ *   setIsOpen={setIsOpen}
+ *   reportId="1234"
+ *   Button={MyButton}
+ *   Modal={MyModal}
+ * />
+ * ```
+ *
+ * ### Chart Editor API
+ * @see https://docs.quillsql.com/components/chart-editor
+ */
+export default function ChartEditor({ isOpen, reportId, isAdmin, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, organizationName, isHorizontalView, onDelete, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, TextComponent, DeleteButtonComponent, ModalComponent, CardComponent, PopoverComponent, LoadingComponent, TableComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, ErrorMessageComponent, ChartBuilderFormContainer, ErrorComponent, hideDeleteButton, hideSubmitButton, onClickChartElement, onClickChartError, }: ChartEditorProps): import("react/jsx-runtime").JSX.Element;
+//# 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":"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"}

package/dist/esm/ChartEditor.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import ChartBuilder from './ChartBuilder';
+import { DashboardContext, DashboardFiltersContext, ClientContext, CustomFieldContext, } from './Context';
+import { MemoizedModal, QuillChartBuilderFormContainer, QuillChartBuilderInputColumnContainer, QuillChartBuilderInputRowContainer, QuillErrorMessageComponent, QuillLoadingComponent, QuillPivotColumnContainer, QuillPivotRowContainer, QuillTableComponent, } from './components/UiComponents';
+import { QuillCard } from './components/QuillCard';
+import { fetchTableByReport } from './utils/tableProcessing';
+import { QuillChartErrorWithAction } from './components/Chart/ChartError';
+import { fetchReport } from './utils/report';
+import { shouldFetchMore, DEFAULT_PAGINATION, shouldSortInMemory, } from './utils/paginationProcessing';
+/**
+ * ### Quill Chart Editor
+ *
+ * Presents the Quill Chart Builder form as a modal.
+ *
+ * @example
+ * ```js
+ * // Usage without custom components
+ * <ChartEditor isOpen={true} reportId="1234" />
+ * ```
+ *
+ * @example
+ * ```js
+ * // You can also pass your own components
+ * <ChartEditor
+ *   isOpen={isOpen}
+ *   setIsOpen={setIsOpen}
+ *   reportId="1234"
+ *   Button={MyButton}
+ *   Modal={MyModal}
+ * />
+ * ```
+ *
+ * ### Chart Editor API
+ * @see https://docs.quillsql.com/components/chart-editor
+ */
+export default function ChartEditor({ isOpen, reportId, isAdmin = false, destinationDashboard, chartBuilderTitle = 'Edit chart', chartBuilderButtonLabel, onAddToDashboardComplete, organizationName, isHorizontalView = true, onDelete, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, TextComponent, DeleteButtonComponent, ModalComponent = MemoizedModal, CardComponent = QuillCard, PopoverComponent, LoadingComponent = QuillLoadingComponent, TableComponent = QuillTableComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderFormContainer = QuillChartBuilderFormContainer, ErrorComponent = QuillChartErrorWithAction, hideDeleteButton = false, hideSubmitButton = false, onClickChartElement, onClickChartError, }) {
+    const parentRef = useRef(null);
+    const [modalWidth, setModalWidth] = useState(200);
+    const [modalHeight, setModalHeight] = useState(200);
+    const [dashboard] = useContext(DashboardContext);
+    const { dashboardFilters } = useContext(DashboardFiltersContext);
+    const specificDashboardFilter = useMemo(() => {
+        const tempReport = dashboard?.[reportId];
+        if (!tempReport) {
+            return [];
+        }
+        return dashboardFilters.filter((f) => f && tempReport.dashboardName === f.dashboardName);
+    }, [dashboardFilters]);
+    const [client] = useContext(ClientContext);
+    const [report, setReport] = useState(dashboard?.[reportId]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [additionalProcessing, setAdditionalProcessing] = useState({});
+    const [rowCount, setRowCount] = useState(undefined);
+    const [maxPage, setMaxPage] = useState(0);
+    const [customFields] = useContext(CustomFieldContext);
+    const dateFilter = Object.values(specificDashboardFilter).find((filter) => filter.filterType == 'date_range');
+    const dateRange = dateFilter?.startDate
+        ? { start: dateFilter.startDate, end: dateFilter.endDate }
+        : undefined;
+    useEffect(() => {
+        function handleResize() {
+            const screenSize = window.innerWidth;
+            if (screenSize >= 1200) {
+                setModalWidth(window.innerWidth - 80);
+            }
+            else {
+                setModalWidth(undefined); // use dynamic width of contents
+            }
+            setModalHeight(window.innerHeight - 80);
+        }
+        handleResize();
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    const onPageChange = (page) => {
+        if (additionalProcessing.page &&
+            shouldFetchMore(DEFAULT_PAGINATION, page, maxPage)) {
+            const newPagination = { ...additionalProcessing.page, page };
+            const updatedProcessing = {
+                ...additionalProcessing,
+                page: newPagination,
+            };
+            setAdditionalProcessing(updatedProcessing);
+            updateTableRows(updatedProcessing);
+        }
+        if (page > maxPage) {
+            setMaxPage(page);
+        }
+    };
+    const onSortChange = (sort) => {
+        if (shouldSortInMemory(DEFAULT_PAGINATION, report?.rowCount, !!report?.pivot)) {
+            return;
+        }
+        const updatedProcessing = { page: DEFAULT_PAGINATION, sort };
+        updateTableRows(updatedProcessing, true);
+        setAdditionalProcessing(updatedProcessing);
+        setMaxPage(0);
+    };
+    const updateTableRows = async (processing, resetRows = false) => {
+        if (!isLoading && report) {
+            setIsLoading(true);
+            try {
+                const updatedProcessing = { ...additionalProcessing, ...processing };
+                const paginatedRows = await fetchTableByReport(report.id, client, updatedProcessing, specificDashboardFilter, customFields);
+                if (paginatedRows.error) {
+                    throw new Error('Error fetching chart');
+                }
+                let tempRows = [...report.rows, ...paginatedRows.rows];
+                if (resetRows) {
+                    tempRows = paginatedRows.rows;
+                }
+                setReport({ ...report, rows: tempRows });
+                setTimeout(() => {
+                    setIsLoading(false);
+                }, 200);
+                setAdditionalProcessing(updatedProcessing);
+            }
+            catch (e) {
+                console.log(e);
+                setIsLoading(false);
+            }
+        }
+    };
+    const fetchReportHelper = async (useReportTask = true, processing) => {
+        if (isLoading) {
+            return;
+        }
+        setIsLoading(true);
+        const minimalFilters = Object.values(specificDashboardFilter).length
+            ? Object.values(specificDashboardFilter).map((filter) => {
+                const newFilter = { ...filter };
+                if (newFilter.filterType === 'date_range') {
+                    delete newFilter['field'];
+                    delete newFilter['options'];
+                    delete newFilter['selectedValue'];
+                }
+                return newFilter;
+            })
+            : [];
+        const { report, error } = await fetchReport(reportId, client, useReportTask, minimalFilters, processing, undefined, customFields);
+        if (error) {
+            setIsLoading(false);
+            return;
+        }
+        setReport(report);
+        setAdditionalProcessing(processing);
+        setIsLoading(false);
+    };
+    useEffect(() => {
+        if (!report) {
+            fetchReportHelper(true);
+        }
+        else {
+            if ((report.chartType === 'table' && report.pivot) || report.error) {
+                // USE PIVOT ROW COUNT WHEN TABLE AND PIVOT
+                setRowCount(undefined);
+            }
+            else {
+                const rowLength = report.rows ? report.rows.length : undefined;
+                setRowCount(report.rowCount ?? rowLength);
+            }
+        }
+        return;
+    }, [client, reportId]);
+    if (!report) {
+        return _jsx("div", {});
+    }
+    return (_jsx("div", { ref: parentRef, style: { height: '100%' }, children: _jsx(ModalComponent, { isOpen: isOpen, setIsOpen: setIsOpen, title: chartBuilderTitle || 'Add to dashboard', 
+            // For isHorizontalView, use full viewport size minus 80px for padding,
+            // otherwise use the default layout method of the modal (contents).
+            width: isHorizontalView ? modalWidth : undefined, height: isHorizontalView ? modalHeight : undefined, children: _jsx(ChartBuilder, { report: report, rows: report.rows, 
+                // @ts-ignore
+                columns: report.columns, query: report.queryString, pivot: report.pivot || undefined, isOpen: isOpen, isComparison: dateFilter?.comparisonRange, isLoading: isLoading, setIsOpen: setIsOpen, showTableFormatOptions: isAdmin, showDateFieldOptions: isAdmin, showAccessControlOptions: isAdmin, showDashboardDropdown: isAdmin, destinationDashboard: destinationDashboard, onAddToDashboardComplete: onAddToDashboardComplete, dateRange: dateRange, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, DeleteButtonComponent: DeleteButtonComponent, CardComponent: CardComponent, ModalComponent: ModalComponent, isHorizontalView: isHorizontalView, PopoverComponent: PopoverComponent, TableComponent: TableComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, ErrorMessageComponent: ErrorMessageComponent, LoadingComponent: LoadingComponent, ErrorComponent: ErrorComponent, onClickChartError: onClickChartError, onDelete: onDelete, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel, organizationName: organizationName, hideSubmitButton: hideSubmitButton, hideDeleteButton: hideDeleteButton, FormContainer: ChartBuilderFormContainer, onPageChange: onPageChange, onSortChange: onSortChange, rowCount: rowCount, onClickChartElement: onClickChartElement, pivotData: report.pivotColumns
+                    ? {
+                        rows: report.pivotRows || [],
+                        columns: report.pivotColumns,
+                    }
+                    : undefined }) }) }));
+}

package/dist/esm/Context.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { QuillReportInternal } from './models/Report';
+export declare const SchemaContext: React.Context<any>;
+export declare const CustomFieldContext: React.Context<any>;
+export declare const ThemeContext: React.Context<any>;
+export declare const ClientContext: React.Context<any>;
+export declare const DashboardDataContext: React.Context<any>;
+export declare const DashboardFiltersContext: React.Context<any>;
+export declare const ReportFiltersContext: React.Context<any>;
+export declare const DashboardContext: React.Context<[{
+    [key: string]: QuillReportInternal;
+}, 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,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAItD,eAAO,MAAM,aAAa,oBAAwC,CAAC;AACnE,eAAO,MAAM,kBAAkB,oBAAwC,CAAC;AACxE,eAAO,MAAM,YAAY,oBAA0C,CAAC;AACpE,eAAO,MAAM,aAAa,oBAA0C,CAAC;AACrE,eAAO,MAAM,oBAAoB,oBAAwC,CAAC;AAC1E,eAAO,MAAM,uBAAuB,oBAAwC,CAAC;AAC7E,eAAO,MAAM,oBAAoB,oBAAwC,CAAC;AAiC1E,eAAO,MAAM,gBAAgB;;QAEJ,CAAC;AAmE1B,eAAO,MAAM,eAAe,qIAWzB,GAAG,mDA6NL,CAAC"}