@quillsql/react 2.12.37 → 2.12.39

package/dist/esm/hooks/useSelectOnKeyDown.js

@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+const useSelectOnKeyDown = (onValueChange, optionValues, isFocused, handleFocusChange, value) => {
+    const NO_SELECTION_IDX = -1;
+    const [hoveredIdx, setHoveredIdx] = useState(NO_SELECTION_IDX);
+    const getHoveredValue = (hoveredIdx, optionValues) => {
+        if (hoveredIdx < 0)
+            return undefined;
+        return optionValues[hoveredIdx];
+    };
+    useEffect(() => {
+        const getIndexOfSelectedValue = () => {
+            if (!isFocused) {
+                setHoveredIdx(NO_SELECTION_IDX);
+            }
+            if (!value)
+                return NO_SELECTION_IDX;
+            const indexOfValue = optionValues.indexOf(value);
+            return indexOfValue === -1 ? NO_SELECTION_IDX : indexOfValue;
+        };
+        setHoveredIdx(getIndexOfSelectedValue());
+    }, [value, isFocused]);
+    const hoveredValue = getHoveredValue(hoveredIdx, optionValues);
+    const getNextIdx = () => {
+        const nextIdx = hoveredIdx + 1;
+        return Math.min(nextIdx, optionValues.length - 1);
+    };
+    const getPrevIdx = () => {
+        const prevIdx = hoveredIdx - 1;
+        return Math.max(prevIdx, 0);
+    };
+    const handleKeyDown = (e) => {
+        if (!isFocused) {
+            return;
+        }
+        switch (e.key) {
+            case 'ArrowUp': {
+                e.preventDefault();
+                setHoveredIdx(getPrevIdx());
+                break;
+            }
+            case 'ArrowDown': {
+                e.preventDefault();
+                setHoveredIdx(getNextIdx());
+                break;
+            }
+            case 'Enter': {
+                e.preventDefault();
+                if (hoveredValue) {
+                    onValueChange(hoveredValue);
+                }
+                break;
+            }
+            case 'Escape': {
+                e.preventDefault();
+                handleFocusChange(false);
+                setHoveredIdx(NO_SELECTION_IDX);
+                break;
+            }
+        }
+    };
+    return [hoveredValue, handleKeyDown];
+};
+export default useSelectOnKeyDown;

package/dist/esm/hooks/useTheme.d.ts

@@ -0,0 +1,7 @@
+import { type QuillTheme } from '../QuillProvider';
+/**
+ * A simple hook to get the theme without all that noise.
+ */
+declare const useTheme: () => QuillTheme;
+export default useTheme;
+//# sourceMappingURL=useTheme.d.ts.map

package/dist/esm/hooks/useTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;GAEG;AACH,QAAA,MAAM,QAAQ,QAAO,UAIpB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/esm/hooks/useTheme.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { ThemeContext } from '../Context';
+/**
+ * A simple hook to get the theme without all that noise.
+ */
+const useTheme = () => {
+    const [theme] = useContext(ThemeContext);
+    return theme;
+};
+export default useTheme;

package/dist/esm/index.d.ts

@@ -0,0 +1,29 @@
+export { default as Dashboard } from './Dashboard';
+export type { DashboardProps, QuillReportProps, AxisFormat } from './Dashboard';
+export type { QuillReport } from './models/Report';
+export { default as QuillProvider } from './QuillProvider';
+export type { QuillProviderProps, QuillTheme } from './QuillProvider';
+export { default as Chart } from './Chart';
+export type { ColorMapType, ChartProps } from './Chart';
+export { default as Table } from './Table';
+export type { TableProps } from './Table';
+export { default as SQLEditor, SchemaListComponent } from './SQLEditor';
+export type { SQLEditorProps } from './SQLEditor';
+export { default as ReportBuilder } from './ReportBuilder';
+export type { ReportBuilderProps } from './ReportBuilder';
+export { default as ChartEditor } from './ChartEditor';
+export type { ChartEditorProps } from './ChartEditor';
+export { quillFormat as format } from './utils/valueFormatter';
+export { useDashboard } from './hooks/useDashboard';
+export { useQuill, usePivot } from './hooks/useQuill';
+export { useExport } from './hooks/useExport';
+export { useMemoizedRows } from './hooks/useFormat';
+export { downloadCSV } from './utils/csv';
+export { ThemeContext } from './Context';
+export type { TextInputComponentProps, ButtonComponentProps, DeleteButtonComponentProps, SelectComponentProps, PopoverComponentProps, TabsComponentProps, CheckboxComponentProps, SidebarComponentProps, ContainerComponentProps, HeaderComponentProps, LabelComponentProps, TextComponentProps, Option, ModalComponentProps, HeaderProps, } from './components/UiComponents';
+export type { SelectColumnComponentProps, DraggableColumnComponentProps, SidebarHeadingComponentProps, FilterPopoverComponentProps, SortPopoverComponentProps, LimitPopoverComponentProps, } from './components/ReportBuilder/ui';
+export type { TableComponentProps } from './components/QuillTable';
+export type { DateRangePickerProps, DateRangePickerOption, DateRange, } from './DateRangePicker/DateRangePicker';
+export type { DashboardSectionComponentProps } from './components/Dashboard/DashboardSection';
+export { Calculation } from './utils/dataProcessing';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAChF,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AACxE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,YAAY,EACV,uBAAuB,EACvB,oBAAoB,EACpB,0BAA0B,EAC1B,oBAAoB,EACpB,qBAAqB,EACrB,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,MAAM,EACN,mBAAmB,EACnB,WAAW,GACZ,MAAM,2BAA2B,CAAC;AACnC,YAAY,EACV,0BAA0B,EAC1B,6BAA6B,EAC7B,4BAA4B,EAC5B,2BAA2B,EAC3B,yBAAyB,EACzB,0BAA0B,GAC3B,MAAM,+BAA+B,CAAC;AACvC,YAAY,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,YAAY,EACV,oBAAoB,EACpB,qBAAqB,EACrB,SAAS,GACV,MAAM,mCAAmC,CAAC;AAC3C,YAAY,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAC9F,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,16 @@
+// src/index.ts
+export { default as Dashboard } from './Dashboard';
+export { default as QuillProvider } from './QuillProvider';
+export { default as Chart } from './Chart';
+export { default as Table } from './Table';
+export { default as SQLEditor, SchemaListComponent } from './SQLEditor';
+export { default as ReportBuilder } from './ReportBuilder';
+export { default as ChartEditor } from './ChartEditor';
+export { quillFormat as format } from './utils/valueFormatter';
+export { useDashboard } from './hooks/useDashboard';
+export { useQuill, usePivot } from './hooks/useQuill';
+export { useExport } from './hooks/useExport';
+export { useMemoizedRows } from './hooks/useFormat';
+export { downloadCSV } from './utils/csv';
+export { ThemeContext } from './Context';
+export { Calculation } from './utils/dataProcessing';

package/dist/esm/internals/ReportBuilder/PivotForm.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { ColumnInternal } from '../../models/Columns';
+interface PivotFormProps {
+    pivotRowField: any;
+    setPivotRowField: any;
+    pivotColumnField: any;
+    setPivotColumnField: any;
+    pivotValueField: any;
+    setPivotValueField: any;
+    pivotAggregation: any;
+    setPivotAggregation: any;
+    columns: ColumnInternal[];
+    uniqueValues?: any;
+    onDelete: any;
+    SecondaryButtonComponent: (props: {
+        onClick: () => void;
+        label: string;
+        disabled?: boolean;
+        icon?: ReactNode;
+    }) => JSX.Element;
+    SelectComponent: any;
+    PivotColumnContainer?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
+}
+export default function PivotForm({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotValueField, setPivotValueField, pivotAggregation, setPivotAggregation, columns, uniqueValues, onDelete, SecondaryButtonComponent, SelectComponent, PivotColumnContainer, }: PivotFormProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PivotForm.d.ts.map

package/dist/esm/internals/ReportBuilder/PivotForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotForm.d.ts","sourceRoot":"","sources":["../../../../src/internals/ReportBuilder/PivotForm.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAG9D,OAAO,EAAU,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI9D,UAAU,cAAc;IACtB,aAAa,EAAE,GAAG,CAAC;IACnB,gBAAgB,EAAE,GAAG,CAAC;IACtB,gBAAgB,EAAE,GAAG,CAAC;IACtB,mBAAmB,EAAE,GAAG,CAAC;IACzB,eAAe,EAAE,GAAG,CAAC;IACrB,kBAAkB,EAAE,GAAG,CAAC;IACxB,gBAAgB,EAAE,GAAG,CAAC;IACtB,mBAAmB,EAAE,GAAG,CAAC;IACzB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,QAAQ,EAAE,GAAG,CAAC;IACd,wBAAwB,EAAE,CAAC,KAAK,EAAE;QAChC,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,IAAI,CAAC,EAAE,SAAS,CAAC;KAClB,KAAK,GAAG,CAAC,OAAO,CAAC;IAClB,eAAe,EAAE,GAAG,CAAC;IACrB,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;CACxE;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,kBAAkB,EAClB,gBAAgB,EAChB,mBAAmB,EACnB,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,wBAAwB,EACxB,eAAe,EACf,oBAAgD,GACjD,EAAE,cAAc,2CA0GhB"}

package/dist/esm/internals/ReportBuilder/PivotForm.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { QuillPivotColumnContainer } from '../../components/UiComponents';
+import { snakeAndCamelCaseToTitleCase } from '../../utils/textProcessing';
+import { numberFormatOptions } from '../../ChartBuilder';
+import { getPossiblePivotFieldOptions } from '../../utils/pivotProcessing';
+export default function PivotForm({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotValueField, setPivotValueField, pivotAggregation, setPivotAggregation, columns, uniqueValues, onDelete, SecondaryButtonComponent, SelectComponent, PivotColumnContainer = QuillPivotColumnContainer, }) {
+    const [allowedColumnFields, setAllowedColumnFields] = useState([]);
+    const [allowedRowFields, setAllowedRowFields] = useState([]);
+    const [allowedValueFields, setAllowedValueFields] = useState([]);
+    useEffect(() => {
+        const possibleColumns = getPossiblePivotFieldOptions(columns, uniqueValues);
+        setAllowedRowFields(possibleColumns.rowFields);
+        setAllowedColumnFields(possibleColumns.columnFields);
+        setAllowedValueFields(possibleColumns.valueFields);
+    }, [columns, uniqueValues]);
+    return (_jsxs(PivotColumnContainer, { children: [_jsx(SelectComponent, { id: "pivot-row-field", label: "Row field", value: pivotRowField, onChange: (e) => {
+                    setPivotRowField(e.target.value === '' ? undefined : e.target.value);
+                }, options: allowedRowFields.map((field) => {
+                    return {
+                        label: snakeAndCamelCaseToTitleCase(field),
+                        value: field,
+                    };
+                }), width: 200 }), _jsx(SelectComponent, { id: "pivot-row-field", label: "Column field", value: pivotColumnField, onChange: (e) => {
+                    setPivotColumnField(e.target.value === '' ? undefined : e.target.value);
+                }, options: allowedColumnFields.map((field) => {
+                    return {
+                        label: snakeAndCamelCaseToTitleCase(field),
+                        value: field,
+                    };
+                }), width: 200 }), _jsx(SelectComponent, { id: "pivot-row-field", label: "Value field", value: pivotValueField, onChange: (e) => {
+                    setPivotValueField(e.target.value === '' ? undefined : e.target.value);
+                }, options: allowedValueFields.map((field) => {
+                    return {
+                        label: snakeAndCamelCaseToTitleCase(field),
+                        value: field,
+                    };
+                }), width: 200 }), _jsx(SelectComponent, { id: "pivot-row-field", label: "Aggregation type", value: pivotAggregation, onChange: (e) => {
+                    if (e.target.value !== 'count' &&
+                        pivotValueField &&
+                        !numberFormatOptions.includes(columns.find((col) => col.field === pivotValueField)
+                            .format)) {
+                        setPivotValueField(null);
+                    }
+                    setPivotAggregation(e.target.value === '' ? undefined : e.target.value);
+                }, options: [
+                    ...['sum', 'average', 'count', 'max', 'min']
+                        .map((option) => {
+                        return { label: option, value: option };
+                    })
+                        .filter((option) => {
+                        if (!pivotValueField && option.value !== 'count') {
+                            return false;
+                        }
+                        return true;
+                    }),
+                ], width: 200 }), _jsx("div", { style: {
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    flexDirection: 'column',
+                }, children: _jsx(SecondaryButtonComponent, { onClick: onDelete, label: "Delete Pivot" }) })] }));
+}

package/dist/esm/internals/ReportBuilder/PivotList.d.ts

@@ -0,0 +1,39 @@
+type PivotCardProps = {
+    pivotTable: any;
+    theme: any;
+    index: number;
+    onSelectPivot?: (pivot: any, index: number) => void;
+    selectedPivotIndex: number;
+    onEditPivot: (pivot: any, index: number) => void;
+    ButtonComponent: any;
+    showEdit?: boolean;
+    clickable?: boolean;
+    onClose?: () => void;
+    minHeight?: number;
+    CardComponent?: any;
+    LabelComponent: any;
+    TextComponent: any;
+    HeaderComponent: any;
+};
+export declare const PivotCard: ({ pivotTable, index, onSelectPivot, onEditPivot, ButtonComponent, showEdit, onClose, minHeight, CardComponent, LabelComponent, TextComponent, HeaderComponent, }: PivotCardProps) => import("react/jsx-runtime").JSX.Element;
+type PivotListProps = {
+    recommendedPivotTables: any[];
+    createdPivotTables: any[];
+    onSelectRecommendedPivot: (pivot: any, index: number) => void;
+    onSelectCreatedPivot: (pivot: any, index: number) => void;
+    theme: any;
+    selectedPivotIndex: number;
+    selectedPivotType: string;
+    ButtonComponent: any;
+    showCreatePivot?: boolean;
+    onEditRecommendedPivot: (pivot: any, index: number | null) => void;
+    onEditCreatedPivot: (pivot: any, index: number | null) => void;
+    showPivotEditButton?: boolean;
+    CardComponent?: any;
+    LabelComponent: any;
+    TextComponent: any;
+    HeaderComponent: any;
+};
+export declare const PivotList: ({ recommendedPivotTables, createdPivotTables, onSelectRecommendedPivot, onSelectCreatedPivot, theme, selectedPivotIndex, selectedPivotType, ButtonComponent, onEditRecommendedPivot, onEditCreatedPivot, CardComponent, LabelComponent, TextComponent, HeaderComponent, }: PivotListProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PivotList.d.ts.map

package/dist/esm/internals/ReportBuilder/PivotList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotList.d.ts","sourceRoot":"","sources":["../../../../src/internals/ReportBuilder/PivotList.tsx"],"names":[],"mappings":"AAKA,KAAK,cAAc,GAAG;IACpB,UAAU,EAAE,GAAG,CAAC;IAChB,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,eAAe,EAAE,GAAG,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,cAAc,EAAE,GAAG,CAAC;IACpB,aAAa,EAAE,GAAG,CAAC;IACnB,eAAe,EAAE,GAAG,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,SAAS,qKAanB,cAAc,4CA8MhB,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,sBAAsB,EAAE,GAAG,EAAE,CAAC;IAC9B,kBAAkB,EAAE,GAAG,EAAE,CAAC;IAC1B,wBAAwB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,oBAAoB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,KAAK,EAAE,GAAG,CAAC;IACX,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,sBAAsB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACnE,kBAAkB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,cAAc,EAAE,GAAG,CAAC;IACpB,aAAa,EAAE,GAAG,CAAC;IACnB,eAAe,EAAE,GAAG,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,SAAS,8QAenB,cAAc,4CAoDhB,CAAC"}

package/dist/esm/internals/ReportBuilder/PivotList.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { quillFormat } from '../../utils/valueFormatter';
+import { snakeAndCamelCaseToTitleCase } from '../../utils/textProcessing';
+import { QuillCard } from '../../components/QuillCard';
+export const PivotCard = ({ pivotTable, index, onSelectPivot, onEditPivot, ButtonComponent, showEdit = false, onClose, minHeight = 0, CardComponent = QuillCard, LabelComponent, TextComponent, HeaderComponent, }) => {
+    const defaultValueField = pivotTable.pivot && pivotTable.pivot.aggregationType === 'count'
+        ? 'whole_number'
+        : 'two_decimal_places';
+    const maxRowsInPivotPeak = 5;
+    return (_jsx(CardComponent, { onClick: onSelectPivot ? () => onSelectPivot(pivotTable.pivot, index) : undefined, onDelete: onClose, children: _jsxs("div", { style: {
+                fontSize: 14,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                height: minHeight,
+            }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [pivotTable.pivot.title && (_jsx("div", { style: {
+                                display: 'flex',
+                                flex: 1,
+                                justifyContent: 'space-between',
+                                flexDirection: 'row',
+                                whiteSpace: 'nowrap',
+                                textOverflow: 'ellipsis',
+                                paddingBottom: 6,
+                                maxWidth: '300px',
+                                overflow: 'visible',
+                            }, children: _jsx(HeaderComponent, { label: pivotTable.pivot.title }) })), pivotTable.columns.length === 0 ? (_jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [pivotTable.pivot.rowField && (_jsx("th", { style: {
+                                                    fontWeight: 600,
+                                                    paddingRight: 5,
+                                                    flex: 1,
+                                                    textAlign: 'left',
+                                                    whiteSpace: 'nowrap',
+                                                    textOverflow: 'ellipsis',
+                                                }, children: _jsx(LabelComponent, { label: snakeAndCamelCaseToTitleCase(pivotTable.pivot.rowField) }) }, pivotTable.pivot.rowField)), pivotTable.pivot.columnField && (_jsx("th", { style: {
+                                                    fontWeight: 600,
+                                                    paddingRight: 5,
+                                                    flex: 1,
+                                                    textAlign: 'left',
+                                                    whiteSpace: 'nowrap',
+                                                    textOverflow: 'ellipsis',
+                                                }, children: _jsx(LabelComponent, { label: snakeAndCamelCaseToTitleCase(pivotTable.pivot.columnField) }) }, pivotTable.pivot.columnField)), !pivotTable.pivot.columnField &&
+                                                pivotTable.pivot.valueField && (_jsx("th", { style: {
+                                                    fontWeight: 600,
+                                                    paddingRight: 5,
+                                                    flex: 1,
+                                                    textAlign: 'left',
+                                                    whiteSpace: 'nowrap',
+                                                    textOverflow: 'ellipsis',
+                                                }, children: _jsx(LabelComponent, { label: snakeAndCamelCaseToTitleCase(pivotTable.pivot.valueField) }) }, pivotTable.pivot.valueField))] }) }), _jsx("div", { style: {
+                                        paddingLeft: '2px',
+                                        width: '100%',
+                                    }, children: _jsx(TextComponent, { label: 'No results' }) })] })) : (_jsxs("table", { children: [_jsx("thead", { children: _jsx("tr", { children: pivotTable.columns.map((column) => (_jsx("th", { style: {
+                                                fontWeight: 600,
+                                                paddingRight: 5,
+                                                flex: 1,
+                                                textAlign: 'left',
+                                                whiteSpace: 'nowrap',
+                                                textOverflow: 'ellipsis',
+                                            }, children: _jsx(LabelComponent, { label: column.label }) }, column.field))) }) }), _jsx("tbody", { children: pivotTable.rows
+                                        .slice(0, maxRowsInPivotPeak)
+                                        .map((row, index) => (_jsx("tr", { children: pivotTable.columns.map((column, i) => (_jsx("td", { style: {
+                                                paddingRight: 5,
+                                                flex: 1,
+                                                whiteSpace: 'nowrap',
+                                                textOverflow: 'ellipsis',
+                                                maxWidth: 120,
+                                            }, children: _jsx(TextComponent, { label: i !== 0
+                                                    ? quillFormat({
+                                                        value: row[column.field],
+                                                        format: pivotTable.pivot.valueFieldType ||
+                                                            defaultValueField,
+                                                    })
+                                                    : row[column.field] }) }, i))) }, index))) })] }))] }), _jsxs("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                    }, children: [pivotTable.rows.length > maxRowsInPivotPeak ? (_jsx("div", { children: _jsx(TextComponent, { label: `... ${pivotTable.rows.length - maxRowsInPivotPeak < 5
+                                    ? ''
+                                    : pivotTable.rows.length - maxRowsInPivotPeak} more rows` }) })) : (_jsx("div", {})), showEdit && (_jsx("div", { children: _jsx(ButtonComponent, { id: "edit-pivot", primary: false, onClick: (e) => {
+                                    e.stopPropagation();
+                                    onEditPivot(pivotTable.pivot, index);
+                                }, label: 'Edit' }) }))] })] }) }));
+};
+export const PivotList = ({ recommendedPivotTables, createdPivotTables, onSelectRecommendedPivot, onSelectCreatedPivot, theme, selectedPivotIndex, selectedPivotType, ButtonComponent, onEditRecommendedPivot, onEditCreatedPivot, CardComponent = QuillCard, LabelComponent, TextComponent, HeaderComponent, }) => {
+    return (_jsx("div", { children: _jsxs("div", { style: {
+                display: 'grid',
+                gridTemplateColumns: 'repeat(2, 1fr)',
+                gap: 16,
+                gridAutoRows: '220px',
+            }, children: [recommendedPivotTables.map((pivotTable, index) => (_jsx(PivotCard, { pivotTable: pivotTable, theme: theme, index: index, onSelectPivot: onSelectRecommendedPivot, selectedPivotIndex: selectedPivotType === 'recommended' ? selectedPivotIndex : -1, onEditPivot: onEditRecommendedPivot, ButtonComponent: ButtonComponent, minHeight: 180, CardComponent: CardComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent }, index))), createdPivotTables.map((pivotTable, index) => (_jsx(PivotCard, { pivotTable: pivotTable, theme: theme, index: index, onSelectPivot: onSelectCreatedPivot, selectedPivotIndex: selectedPivotType === 'created' ? selectedPivotIndex : -1, onEditPivot: onEditCreatedPivot, ButtonComponent: ButtonComponent, minHeight: 180, CardComponent: CardComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent }, index)))] }) }));
+};

package/dist/esm/internals/ReportBuilder/PivotModal.d.ts

@@ -0,0 +1,146 @@
+import { ReactNode } from 'react';
+import { ButtonComponentProps } from '../../components/UiComponents';
+import { ColumnInternal } from '../../models/Columns';
+import { AxisFormat } from '../../Dashboard';
+export interface Pivot {
+    rowField: string;
+    rowFieldType: string;
+    columnField?: string;
+    columnFieldType?: string;
+    valueField: string;
+    valueFieldType?: string;
+    aggregationType: string;
+    title?: string;
+    triggerButtonText?: string;
+    sort?: string;
+    sortDirection?: string;
+    sortField?: string;
+    sortFieldType?: string;
+}
+export interface PivotModalProps {
+    pivotRowField: any;
+    setPivotRowField: any;
+    pivotColumnField: any;
+    setPivotColumnField: any;
+    pivotValueField: any;
+    setPivotValueField: any;
+    pivotAggregation: any;
+    setPivotAggregation: any;
+    popUpTitle: any;
+    setPopUpTitle: any;
+    selectedTable: any;
+    SelectComponent: any;
+    ButtonComponent: any;
+    CardComponent: any;
+    SecondaryButtonComponent: (props: ButtonComponentProps) => JSX.Element;
+    PopoverComponent: (props: {
+        isOpen: boolean;
+        setIsOpen: (isOpen: boolean) => void;
+        triggerLabel?: string | undefined;
+        popoverTitle?: string | undefined;
+        popoverChildren: ReactNode;
+    }) => JSX.Element;
+    HeaderComponent: (props: {
+        label: string;
+    }) => JSX.Element;
+    LabelComponent: (props: {
+        label: string;
+    }) => JSX.Element;
+    TextComponent: (props: {
+        label: string;
+    }) => JSX.Element;
+    ErrorMessageComponent?: (props: {
+        errorMessage: string;
+    }) => JSX.Element;
+    PivotRowContainer?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
+    PivotColumnContainer?: (props: {
+        children: ReactNode;
+    }) => JSX.Element;
+    LoadingComponent?: () => JSX.Element;
+    selectedPivotIndex: any;
+    setSelectedPivotIndex: any;
+    removePivot: any;
+    selectPivot: any;
+    showUpdatePivot: any;
+    setShowUpdatePivot: any;
+    data: any;
+    columns: ColumnInternal[];
+    theme: any;
+    isOpen: any;
+    setIsOpen: any;
+    dateRange: any;
+    createdPivots: any;
+    setCreatedPivots: any;
+    recommendedPivots: any;
+    setRecommendedPivots: any;
+    triggerButtonText?: string;
+    showPivotEditButton?: boolean;
+    showEditOnPivotClick?: boolean;
+    selectPivotOnEdit?: boolean;
+    showTrigger?: boolean;
+    rightAlign?: boolean;
+    parentRef: any;
+    pivotCountRequest?: number;
+    query?: string;
+    initialUniqueValues?: any;
+    initialSelectedPivotTable?: any;
+    disabled?: boolean;
+    pivotRecommendationsEnabled?: boolean;
+    report?: any;
+}
+export declare const PivotModal: ({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotValueField, setPivotValueField, pivotAggregation, setPivotAggregation, popUpTitle, setPopUpTitle, selectedTable, SelectComponent, ButtonComponent, SecondaryButtonComponent, PopoverComponent, ErrorMessageComponent, PivotRowContainer, PivotColumnContainer, LoadingComponent, CardComponent, HeaderComponent, LabelComponent, TextComponent, selectedPivotIndex, setSelectedPivotIndex, removePivot, selectPivot, showUpdatePivot, setShowUpdatePivot, data, columns, theme, isOpen, setIsOpen, dateRange, createdPivots, setCreatedPivots, recommendedPivots, setRecommendedPivots, triggerButtonText, showPivotEditButton, showEditOnPivotClick, showTrigger, pivotCountRequest, query, initialUniqueValues, initialSelectedPivotTable, disabled, pivotRecommendationsEnabled, report, }: PivotModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare function generatePivotTableYAxis(pivot: Pivot, cols: {
+    label: string;
+    field: string;
+}[], yAxisField: {
+    field: string;
+    label: string;
+    format: AxisFormat;
+}): {
+    field: string;
+    label: string;
+    format: AxisFormat;
+}[];
+export declare function generatePivotTitle(pivot: Pivot): string;
+export declare function getDateRange(dateRange: {
+    start: Date;
+    end: Date;
+} | undefined, column: string, data: any): {
+    start: Date;
+    end: Date;
+};
+export declare function getDateBuckets(dateRange: {
+    start: Date;
+    end: Date;
+} | undefined, column: string, data: any, dateBucket?: string): Date[];
+export declare function getDateString(value: string, dateRange?: {
+    start: Date;
+    end: Date;
+}, dateBucket?: string): string;
+export declare function isDateField(fieldType: string): boolean;
+export declare function generatePivotTable(pivot: Pivot, data: any, dateRange: {
+    start: Date;
+    end: Date;
+} | undefined, isComparison: boolean, rowLimit?: number, compRange?: {
+    start: Date;
+    end: Date;
+} | undefined, dateBucket?: string, report?: any, client?: any, uniqueValues?: any): Promise<{
+    rows: any;
+    columns: any;
+}>;
+export declare function generatePivotTableInMemory(pivot: Pivot, data: any, dateRange: {
+    start: Date;
+    end: Date;
+} | undefined, isComparison: boolean, rowLimit?: number, compRange?: {
+    start: Date;
+    end: Date;
+} | undefined, dateBucket?: string): {
+    rows: any[];
+    columns: {
+        label: string;
+        field: any;
+    }[];
+};
+//# sourceMappingURL=PivotModal.d.ts.map

package/dist/esm/internals/ReportBuilder/PivotModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PivotModal.d.ts","sourceRoot":"","sources":["../../../../src/internals/ReportBuilder/PivotModal.tsx"],"names":[],"mappings":"AAAA,OAAc,EAOZ,SAAS,EACV,MAAM,OAAO,CAAC;AAiBf,OAAO,EACL,oBAAoB,EAKrB,MAAM,+BAA+B,CAAC;AAcvC,OAAO,EAAU,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAI7C,MAAM,WAAW,KAAK;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,eAAe;IAC9B,aAAa,EAAE,GAAG,CAAC;IACnB,gBAAgB,EAAE,GAAG,CAAC;IACtB,gBAAgB,EAAE,GAAG,CAAC;IACtB,mBAAmB,EAAE,GAAG,CAAC;IACzB,eAAe,EAAE,GAAG,CAAC;IACrB,kBAAkB,EAAE,GAAG,CAAC;IACxB,gBAAgB,EAAE,GAAG,CAAC;IACtB,mBAAmB,EAAE,GAAG,CAAC;IACzB,UAAU,EAAE,GAAG,CAAC;IAChB,aAAa,EAAE,GAAG,CAAC;IACnB,aAAa,EAAE,GAAG,CAAC;IACnB,eAAe,EAAE,GAAG,CAAC;IACrB,eAAe,EAAE,GAAG,CAAC;IACrB,aAAa,EAAE,GAAG,CAAC;IACnB,wBAAwB,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IACvE,gBAAgB,EAAE,CAAC,KAAK,EAAE;QACxB,MAAM,EAAE,OAAO,CAAC;QAChB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;QACrC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAClC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAClC,eAAe,EAAE,SAAS,CAAC;KAC5B,KAAK,GAAG,CAAC,OAAO,CAAC;IAClB,eAAe,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IAC3D,cAAc,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IAC1D,aAAa,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IACzD,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IACzE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IACpE,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE,KAAK,GAAG,CAAC,OAAO,CAAC;IACvE,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,kBAAkB,EAAE,GAAG,CAAC;IACxB,qBAAqB,EAAE,GAAG,CAAC;IAC3B,WAAW,EAAE,GAAG,CAAC;IACjB,WAAW,EAAE,GAAG,CAAC;IACjB,eAAe,EAAE,GAAG,CAAC;IACrB,kBAAkB,EAAE,GAAG,CAAC;IACxB,IAAI,EAAE,GAAG,CAAC;IACV,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,KAAK,EAAE,GAAG,CAAC;IACX,MAAM,EAAE,GAAG,CAAC;IACZ,SAAS,EAAE,GAAG,CAAC;IACf,SAAS,EAAE,GAAG,CAAC;IACf,aAAa,EAAE,GAAG,CAAC;IACnB,gBAAgB,EAAE,GAAG,CAAC;IACtB,iBAAiB,EAAE,GAAG,CAAC;IACvB,oBAAoB,EAAE,GAAG,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,GAAG,CAAC;IACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mBAAmB,CAAC,EAAE,GAAG,CAAC;IAC1B,yBAAyB,CAAC,EAAE,GAAG,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,MAAM,CAAC,EAAE,GAAG,CAAC;CACd;AAED,eAAO,MAAM,UAAU,i1BAmDpB,eAAe,4CAg6BjB,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,EACH,UAAU,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,UAAU,CAAA;CAAE;;;;IAqBjE;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAiBvD;AAoBD,wBAAgB,YAAY,CAC1B,SAAS,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,GAAG,SAAS,EACjD,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,GAAG,GACR;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,CAuD5B;AAoBD,wBAAgB,cAAc,CAC5B,SAAS,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,GAAG,SAAS,EACjD,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,GAAG,EACT,UAAU,CAAC,EAAE,MAAM,UAgBpB;AA+BD,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,SAAS,CAAC,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,EACtC,UAAU,CAAC,EAAE,MAAM,UA+CpB;AAED,wBAAgB,WAAW,CAAC,SAAS,EAAE,MAAM,WAY5C;AAgCD,wBAAsB,kBAAkB,CACtC,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,GAAG,EACT,SAAS,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,GAAG,SAAS,EACjD,YAAY,EAAE,OAAO,EACrB,QAAQ,SAAK,EACb,SAAS,GAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,GAAG,SAAqB,EAC7D,UAAU,CAAC,EAAE,MAAM,EACnB,MAAM,CAAC,EAAE,GAAG,EACZ,MAAM,CAAC,EAAE,GAAG,EACZ,YAAY,CAAC,EAAE,GAAG;;;GAmCnB;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,GAAG,EACT,SAAS,EAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,GAAG,SAAS,EACjD,YAAY,EAAE,OAAO,EACrB,QAAQ,SAAK,EACb,SAAS,GAAE;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,GAAG,SAAqB,EAC7D,UAAU,CAAC,EAAE,MAAM;;;;;;EAqdpB"}