@quillsql/react 2.10.28 → 2.10.30

package/dist/cjs/Chart.js

@@ -11,7 +11,7 @@ const date_fns_1 = require("date-fns");
 const BarList_1 = __importDefault(require("./BarList"));
 const PieChart_1 = __importDefault(require("./PieChart"));
 const Context_1 = require("./Context");
-const Table_1 = require("./Table");
+const QuillTable_1 = __importDefault(require("./components/QuillTable"));
 const dataFetcher_1 = require("./utils/dataFetcher");
 const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
 const valueFormatter_1 = require("./utils/valueFormatter");
@@ -235,9 +235,10 @@ const ChartUpdater = ({ colors, chartId, config, containerStyle, dashboard, disp
                 col.format = matchingCol.format;
             }
         });
-        return ((0, jsx_runtime_1.jsx)(Table_1.SpecialTable, { rows: pivotTable?.rows ?? data.rows ?? [], columns: pivotTable?.columns ?? data.columns ?? data.yAxisFields, height: '400px', containerStyle: {
-                ...containerStyle,
-            }, theme: theme, csvFilename: data.name }));
+        return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { rows: pivotTable?.rows ?? data.rows ?? [], columns: pivotTable?.columns ?? data.columns ?? data.yAxisFields, containerStyle: {
+                height: '400px',
+                width: containerStyle?.width || '100%',
+            }, downloadFileName: data.name, showDownloadCSVButton: true }));
     }
     if (chartTypes.includes('bar')) {
         return ((0, jsx_runtime_1.jsx)(BarList_1.default, { data: pivotTable

package/dist/cjs/ChartBuilder.js

@@ -113,7 +113,7 @@ function ChartBuilder(props) {
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.Modal ? ((0, jsx_runtime_1.jsx)(props.Modal, { isOpen: props.isOpen, setIsOpen: props.setIsOpen, title: props.title || 'Add to dashboard', onClose: () => props.setIsOpen(false), theme: theme, children: (0, jsx_runtime_1.jsx)(ChartBuilderForm, { ...props }) })) : ((0, jsx_runtime_1.jsx)(UiComponents_1.MemoizedModal, { setIsOpen: props.setIsOpen, isOpen: props.isOpen, onClose: () => props.setIsOpen(false), title: props.title || 'Add to dashboard', theme: theme, children: (0, jsx_runtime_1.jsx)(ChartBuilderForm, { ...props }) })) }));
 }
 exports.default = ChartBuilder;
-function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select = UiComponents_1.MemoizedSelect, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, Header = UiComponents_1.MemoizedHeader, Label = UiComponents_1.MemoizedLabel, DeleteButton = UiComponents_1.MemoizedDeleteButton, Text = UiComponents_1.MemoizedText, Modal = UiComponents_1.MemoizedModal, Popover = UiComponents_1.MemoizedPopover, isOpen, isEditMode, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, formHeaderStyle, formLabelStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName }) {
+function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select = UiComponents_1.MemoizedSelect, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, Header = UiComponents_1.MemoizedHeader, Label = UiComponents_1.MemoizedLabel, DeleteButton = UiComponents_1.MemoizedDeleteButton, Text = UiComponents_1.MemoizedText, Modal = UiComponents_1.MemoizedModal, Popover = UiComponents_1.MemoizedPopover, isOpen, isEditMode, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, formHeaderStyle, formLabelStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, fields: fieldsProp, dashboardItem = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, }) {
     const dateRange = dr || [null, null, null];
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
     const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
@@ -174,9 +174,14 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
                         },
                     }),
                 });
-                const data = await response.json();
+                const results = await response.json();
                 if (isSubscribed) {
-                    setSchema(data.data.tables);
+                    if (results.data?.data) {
+                        setSchema(results.data.data.tables);
+                    }
+                    else {
+                        setSchema(results.data.tables);
+                    }
                 }
             }
         }
@@ -481,7 +486,7 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
                 clientId: publicKey,
                 databaseType: databaseType,
                 ...cloudBody,
-                orgId: customerId || "*",
+                orgId: customerId || '*',
             },
         };
         const searchParams = new URLSearchParams(customerId
@@ -641,7 +646,7 @@ function ChartBuilderForm({ TextInput = UiComponents_1.MemoizedTextInput, Select
                                         ? 'Save changes'
                                         : 'Add to dashboard' })] })] })] }));
 }
-function SegmentedControl({ onChange, value, theme, organizationName = 'This Organization' }) {
+function SegmentedControl({ onChange, value, theme, organizationName = 'This Organization', }) {
     return ((0, jsx_runtime_1.jsxs)("div", { style: {
             display: 'flex',
             flexDirection: 'row',

package/dist/cjs/Dashboard.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SkeletonComponentProps } from './components/Chart/ChartSkeleton';
 interface QuillOption {
     value: string;
     label: string;
@@ -157,6 +158,7 @@ export interface DashboardProps {
     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;
@@ -171,6 +173,6 @@ export declare function DashboardFilter({ filter, onChangeFilter, SelectComponen
 /**
  * Quill Dashboard.
  */
-export default function Dashboard({ name, containerStyle, chartContainerStyle, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, dateRangeFilterDisabled, SelectComponent, EmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, MetricComponent, ChartComponent, TableComponent, DashboardSectionContainerComponent, DashboardSectionComponent, hideXAxis, hideYAxis, hideCartesianGrid, }: DashboardProps): import("react/jsx-runtime").JSX.Element | null;
+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/cjs/Dashboard.d.ts.map

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

package/dist/cjs/Dashboard.js

@@ -22,6 +22,7 @@ const dashboard_1 = require("./utils/dashboard");
 const QuillDateRangePicker_1 = require("./DateRangePicker/QuillDateRangePicker");
 const DataLoader_1 = __importDefault(require("./components/Dashboard/DataLoader"));
 const QuillSelect_1 = require("./components/QuillSelect");
+const ChartSkeleton_1 = __importDefault(require("./components/Chart/ChartSkeleton"));
 function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePickerComponent, theme, }) {
     const { comparisonRange, setComparisonRange } = (0, Context_1.useComparisonRange)();
     const { setDateFilter } = (0, Context_1.useDateFilter)();
@@ -161,7 +162,7 @@ const defaultChartContainerStyles = {
 /**
  * Quill Dashboard.
  */
-function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartContainerStyles, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, dateRangeFilterDisabled = false, SelectComponent, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, MetricComponent = MetricComponent_1.default, ChartComponent = ChartComponent_1.default, TableComponent = TableComponent_1.default, DashboardSectionContainerComponent = DashboardSectionContainer_1.default, DashboardSectionComponent = DashboardSection_1.default, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
+function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartContainerStyles, metricContainerStyle, maxColumnWidth, rowHeight, onClickDashboardItem, hideFilters, dateRangeFilterDisabled = false, SelectComponent, EmptyDashboardComponent = QuillEmptyDashboardComponent, DateRangePickerComponent, FilterButtonComponent, FilterModalComponent, onChangeLoading, MetricComponent = MetricComponent_1.default, ChartComponent = ChartComponent_1.default, TableComponent = TableComponent_1.default, SkeletonComponent = ChartSkeleton_1.default, DashboardSectionContainerComponent = DashboardSectionContainer_1.default, DashboardSectionComponent = DashboardSection_1.default, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, }) {
     const { dateFilter } = (0, Context_1.useDateFilter)();
     const { dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
     const { isLoading: isDataLoading, data, reload, } = (0, useDashboard_1.useDashboard)(name);
@@ -491,15 +492,7 @@ function Dashboard({ name, containerStyle, chartContainerStyle = defaultChartCon
                                 gap: 20,
                                 display: 'flex',
                                 flexDirection: 'column',
-                            }, children: tables(section).map((item, index) => ((0, jsx_runtime_1.jsx)(DataLoader_1.default, { id: item._id, children: dashboard[item._id] && ((0, jsx_runtime_1.jsx)(TableComponent, { theme: theme, dashboardItem: dashboard[item._id], onClickDashboardItem: onClickDashboardItem
-                                        ? () => handleOnClickDashboardItem(item)
-                                        : void null, children: (0, jsx_runtime_1.jsx)(Chart_1.default, { containerStyle: {
-                                            display: 'flex',
-                                            width: '100%',
-                                            height: '400px',
-                                        }, chartId: item._id, colors: theme.chartColors?.length
-                                            ? theme.chartColors
-                                            : undefined, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid }) })) }, `${item.name}${index}`))) }))] }, section + '' + sectionIndex));
+                            }, children: tables(section).map((item, index) => ((0, jsx_runtime_1.jsx)(DataLoader_1.default, { id: item._id, name: item.name, TableComponent: TableComponent, SkeletonComponent: SkeletonComponent, handleOnClickDashboardItem: handleOnClickDashboardItem, onClickDashboardItem: onClickDashboardItem, theme: theme }, `${item.name}${index}`))) }))] }, section + '' + sectionIndex));
             })] }));
 }
 exports.default = Dashboard;

package/dist/cjs/ReportBuilder.d.ts.map

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

package/dist/cjs/ReportBuilder.js

@@ -14,7 +14,6 @@ const date_fns_1 = require("date-fns");
 const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
 const dataFetcher_1 = require("./utils/dataFetcher");
 const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
-const Table_1 = __importDefault(require("./Table"));
 const ChartBuilder_1 = __importDefault(require("./ChartBuilder"));
 const UiComponents_1 = require("./components/UiComponents");
 function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeLoading, onChangePivot, onDateFilterChange, onChangeFields, onError, TextInput = UiComponents_1.MemoizedTextInput, containerStyle, Select = UiComponents_1.MemoizedSelect, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, Header = UiComponents_1.MemoizedHeader, Label = UiComponents_1.MemoizedLabel, DeleteButton = UiComponents_1.MemoizedDeleteButton, Text = UiComponents_1.MemoizedText, Modal = UiComponents_1.MemoizedModal, Popover = UiComponents_1.MemoizedPopover, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, tagStyle, tableName, dateColumn, selectedTagBorderColor, chartBuilderEnabled = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, editSQLEnabled, navigateToSQLEditor, }) {
@@ -803,10 +802,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
                                 if (navigateToSQLEditor) {
                                     navigateToSQLEditor(sqlQuery);
                                 }
-                            }, label: "Edit Query" })), (0, jsx_runtime_1.jsx)(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, setDateRange: setFilterDateRange, dateRange: filterDateRange, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, parentRef: parentRef, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextInputComponent: TextInputComponent, LabelComponent: LabelComponent, tagStyle: tagStyle, theme: theme, setIsOpen: setIsAddFilterModalOpen, isOpen: isAddFilterModalOpen, selectedTagBorderColor: selectedTagBorderColor }), (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, TextComponent: TextComponent, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, theme: theme, data: data, parentRef: parentRef, columns: columns, setIsOpen: setIsPivotModalOpen, isOpen: isPivotModalOpen, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: removePivot, selectPivot: selectPivot, dateRange: dateRange, rightAlign: true })] }) }), (0, jsx_runtime_1.jsx)(Table_1.default, { rows: selectedPivotTable?.rows || data, columns: selectedPivotTable?.columns || columns, containerStyle: {
-                    height: 400,
-                    marginTop: 10,
-                } }), chartBuilderEnabled && columns.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                            }, label: "Edit Query" })), (0, jsx_runtime_1.jsx)(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, setDateRange: setFilterDateRange, dateRange: filterDateRange, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, parentRef: parentRef, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextInputComponent: TextInputComponent, LabelComponent: LabelComponent, tagStyle: tagStyle, theme: theme, setIsOpen: setIsAddFilterModalOpen, isOpen: isAddFilterModalOpen, selectedTagBorderColor: selectedTagBorderColor }), (0, jsx_runtime_1.jsx)(PivotModal_1.PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, TextComponent: TextComponent, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, theme: theme, data: data, parentRef: parentRef, columns: columns, setIsOpen: setIsPivotModalOpen, isOpen: isPivotModalOpen, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: removePivot, selectPivot: selectPivot, dateRange: dateRange, rightAlign: true })] }) }), chartBuilderEnabled && columns.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
                             display: 'flex',
                             flexDirection: 'row',
                             alignItems: 'center',

package/dist/cjs/SQLEditor.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TableComponentProps } from './components/UiComponents';
 export declare function convertPostgresColumn(column: any): {
     label: any;
     field: any;
@@ -35,11 +36,6 @@ interface SQLEditorProps {
     onAddToDashboardComplete?: () => void;
     organizationName?: string;
 }
-interface TableComponentProps {
-    rows: any[];
-    columns: any[];
-    height: string;
-}
 interface TextInputComponentProps {
     onChange: (e: any) => void;
     value: string;

package/dist/cjs/SQLEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAUxE,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AA2BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAQD,UAAU,mBAAmB;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,OAAO,EAAE,GAAG,EAAE,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+ED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAe,EACf,wBAAwB,EACxB,kBAAkB,EAClB,cAAc,EACd,eAAuB,EACvB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAkB,EAClB,mBAA2B,EAC3B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,GAC7B,EAAE,cAAc,2CAgVhB;AA8LD,eAAO,MAAM,mBAAmB;;;;;;6CAqG/B,CAAC"}
+{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAQxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAGhE,wBAAgB,qBAAqB,CAAC,MAAM,KAAA;;;;;EAwE3C;AA2BD,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC;IAEpC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC/D,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;IAExE,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,GAAG,CAAC,OAAO,CAAC;IACrE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,GAAG,CAAC,OAAO,CAAC;IAC7D,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAQD,UAAU,uBAAuB;IAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+ED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,cAAoC,EACpC,eAAe,EACf,wBAAwB,EACxB,kBAAkB,EAClB,cAA2B,EAC3B,eAAuB,EACvB,gBAAgB,EAChB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAkB,EAClB,mBAA2B,EAC3B,sBAA8B,EAC9B,oBAA4B,EAC5B,wBAAgC,EAChC,oBAAoB,EACpB,iBAAiB,EACjB,uBAAuB,EACvB,wBAAwB,EACxB,yBAA8C,EAC9C,aAAyB,EACzB,gBAA4B,GAC7B,EAAE,cAAc,2CA0UhB;AA8LD,eAAO,MAAM,mBAAmB;;;;;;6CAqG/B,CAAC"}

package/dist/cjs/SQLEditor.js

@@ -11,7 +11,7 @@ const react_1 = require("react");
 const react_2 = __importDefault(require("@monaco-editor/react"));
 // import './nightOwlLight.css';
 const Context_1 = require("./Context");
-const Table_1 = require("./Table");
+const QuillTable_1 = __importDefault(require("./components/QuillTable"));
 const dataFetcher_1 = require("./utils/dataFetcher");
 const ChartBuilder_1 = __importDefault(require("./ChartBuilder"));
 function convertPostgresColumn(column) {
@@ -148,7 +148,7 @@ const QuillTextInput = ({ onChange, value, id, placeholder, theme, }) => {
             borderRadius: '6px',
         }, id: id, onChange: onChange, value: value, placeholder: placeholder }));
 };
-function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent, newQueryEnabled = false, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode = false, chartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, }) {
+function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, SecondaryButtonComponent, TextInputComponent, TableComponent = QuillTable_1.default, newQueryEnabled = false, LoadingComponent, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isEditMode = false, chartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', dashboardItem = undefined, organizationName = undefined, }) {
     const [sqlPrompt, setSqlPrompt] = (0, react_1.useState)('');
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [client] = (0, react_1.useContext)(Context_1.ClientContext);
@@ -163,6 +163,7 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
     const [sqlQueryLoading, setSqlQueryLoading] = (0, react_1.useState)(false);
     const [schemaLoading, setSchemaLoading] = (0, react_1.useState)(false);
     const [isChartBuilderOpen, setIsChartBuilderOpen] = (0, react_1.useState)(false);
+    const [displayTable, setDisplayTable] = (0, react_1.useState)(false);
     const getSchema = async (isSubscribed) => {
         setSchemaLoading(true);
         const { queryEndpoint, queryHeaders, publicKey } = client;
@@ -180,10 +181,16 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
                 },
             }),
         });
-        const data = await response.json();
+        const results = await response.json();
         if (isSubscribed) {
-            setSchema(data.data.tables);
-            setSchemaLoading(false);
+            if (results.data?.data) {
+                setSchema(results.data.data.tables);
+                setSchemaLoading(false);
+            }
+            else {
+                setSchema(results.data.tables);
+                setSchemaLoading(false);
+            }
         }
     };
     (0, react_1.useEffect)(() => {
@@ -208,6 +215,7 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
     };
     const handleRunQuery = async () => {
         try {
+            setDisplayTable(true);
             setSqlQueryLoading(true);
             setErrorMessage('');
             const hostedBody = {
@@ -252,9 +260,6 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
             return;
         }
     };
-    const handleAddToDashboard = () => {
-        setIsOpen(true);
-    };
     /* all your useState and useContext calls and your useEffect hooks */
     (0, react_1.useEffect)(() => {
         if (onChangeQuery) {
@@ -309,11 +314,7 @@ function QueryEditor({ containerStyle = { height: '100vh' }, ButtonComponent, Se
                                                         borderRadius: 6,
                                                         color: theme?.primaryTextColor,
                                                         fontFamily: theme?.fontFamily,
-                                                    }, children: errorMessage }) })), errorMessage
-                                                ? null
-                                                : (TableComponent && ((0, jsx_runtime_1.jsx)(TableComponent, { rows: rows, columns: columns, height: "calc(100%)" }))) || ((0, jsx_runtime_1.jsx)(Table_1.SpecialTable, { rows: rows ?? [], columns: columns, height: "calc(100%)", LoadingComponent: LoadingComponent, loading: sqlQueryLoading, 
-                                                    // loading={true}
-                                                    theme: theme }))] }), chartBuilderEnabled && rows.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                                    }, children: errorMessage }) })), errorMessage || !displayTable ? null : ((0, jsx_runtime_1.jsx)(TableComponent, { rows: rows, columns: columns, containerStyle: { height: 'calc(100%)' }, LoadingComponent: LoadingComponent, loading: sqlQueryLoading, showDownloadCSVButton: true }))] }), chartBuilderEnabled && rows.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
                                             display: 'flex',
                                             flexDirection: 'row',
                                             alignItems: 'center',

package/dist/cjs/components/Chart/ChartSkeleton.d.ts

@@ -1,3 +1,6 @@
-/// <reference types="react" />
+import { CSSProperties } from 'react';
+export interface SkeletonComponentProps {
+    conatinerStyle?: CSSProperties;
+}
 export default function ChartSkeleton({ containerStyle }: any): JSX.Element;
 //# sourceMappingURL=ChartSkeleton.d.ts.map

package/dist/cjs/components/Chart/ChartSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartSkeleton.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,cAAc,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAyE1E"}
+{"version":3,"file":"ChartSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/ChartSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,aAAa,EAAE,MAAM,OAAO,CAAC;AAGlD,MAAM,WAAW,sBAAsB;IACrC,cAAc,CAAC,EAAE,aAAa,CAAC;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,cAAc,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAyE1E"}

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export default function DataLoader({ id, children }: any): JSX.Element;
+export default function DataLoader({ id, SkeletonComponent, handleOnClickDashboardItem, onClickDashboardItem, TableComponent, name, theme, }: any): JSX.Element;
 //# sourceMappingURL=DataLoader.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAWA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAuErE"}
+{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAWA,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,EAAE,EACF,iBAAiB,EACjB,0BAA0B,EAC1B,oBAAoB,EACpB,cAAc,EACd,IAAI,EACJ,KAAK,GACN,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAsFnB"}

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

@@ -6,10 +6,11 @@ const Chart_1 = require("../../Chart");
 const Context_1 = require("../../Context");
 const dataFetcher_1 = require("../../utils/dataFetcher");
 const merge_1 = require("../../utils/merge");
-function DataLoader({ id, children }) {
+function DataLoader({ id, SkeletonComponent, handleOnClickDashboardItem, onClickDashboardItem, TableComponent, name, theme, }) {
     const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
     const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
     const { dashboardFilters } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
+    const [loading, setLoading] = (0, react_1.useState)(true);
     (0, react_1.useEffect)(() => {
         async function getChartOptions() {
             if (!(0, Chart_1.didFiltersChange)(dashboard[id], dashboardFilters)) {
@@ -42,6 +43,7 @@ function DataLoader({ id, children }) {
                     id: id,
                     filters: minimalFilters,
                 };
+                setLoading(true);
                 const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
                 if (resp && resp.name !== 'error') {
                     if (resp.compareRows) {
@@ -56,6 +58,7 @@ function DataLoader({ id, children }) {
                             id: resp._id,
                         },
                     });
+                    setLoading(false);
                 }
             }
             catch (e) {
@@ -64,6 +67,8 @@ function DataLoader({ id, children }) {
         }
         getChartOptions();
     }, [dashboardFilters, client, id]);
-    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    return ((0, jsx_runtime_1.jsx)(TableComponent, { theme: theme, loading: loading, dashboardItem: dashboard[id], name: name, SkeletonComponent: SkeletonComponent, onClickDashboardItem: onClickDashboardItem
+            ? () => handleOnClickDashboardItem(dashboard[id])
+            : void null }));
 }
 exports.default = DataLoader;

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export default function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, children, }: any): JSX.Element;
+export default function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, loading, name, SkeletonComponent, }: any): JSX.Element;
 //# sourceMappingURL=TableComponent.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,KAAK,EACL,QAAQ,GACT,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAqGnB"}
+{"version":3,"file":"TableComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/TableComponent.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,aAAa,EACb,oBAAoB,EACpB,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,iBAAiB,GAClB,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAgDnB"}

package/dist/cjs/components/Dashboard/TableComponent.js

@@ -1,64 +1,35 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, children, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { onClick: onClickDashboardItem
+const QuillTable_1 = __importDefault(require("../QuillTable"));
+function DashboardItem({ dashboardItem, onClickDashboardItem, theme, style, loading, name, SkeletonComponent, }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { onClick: onClickDashboardItem
             ? () => onClickDashboardItem(dashboardItem)
-            : () => { }, style: {
-            // height: '100%',
-            cursor: 'pointer',
-            boxSizing: 'content-box',
-            paddingRight: 25,
-            minHeight: 400,
-            borderRadius: 8,
-            paddingTop: 20,
-            ...style,
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                width: '100%',
-                height: '100%',
-                boxSizing: 'content-box',
-            }, children: (0, jsx_runtime_1.jsx)("div", { style: {
-                    width: '100%',
-                    height: '100%',
+            : () => { }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                    fontFamily: theme.fontFamily,
+                    color: theme.primaryTextColor,
                     boxSizing: 'content-box',
-                }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        justifyContent: 'space-between',
-                        height: '100%',
-                        boxSizing: 'content-box',
-                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
-                                display: 'flex',
-                                flexDirection: 'row',
-                                justifyContent: 'space-between',
-                                boxSizing: 'content-box',
-                                paddingBottom: 20,
-                            }, children: [(0, jsx_runtime_1.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: dashboardItem?.name }), onClickDashboardItem ? ((0, jsx_runtime_1.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] }), (0, jsx_runtime_1.jsx)("div", { style: {
-                                padding: 0,
-                                height: '100%',
-                                boxSizing: 'content-box',
-                            }, children: children })] }) }) }) }, dashboardItem?.name));
+                    fontSize: 18,
+                    fontWeight: '500',
+                    textOverflow: 'ellipsis',
+                    padding: 0,
+                    whiteSpace: 'nowrap',
+                    display: 'block',
+                    maxWidth: '100%',
+                    overflow: 'hidden',
+                    paddingBottom: 20,
+                }, children: name }), loading ? ((0, jsx_runtime_1.jsx)(SkeletonComponent, { containerStyle: { height: 390 } })) : dashboardItem ? ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { containerStyle: {
+                    // height: '100%',
+                    cursor: 'pointer',
+                    boxSizing: 'content-box',
+                    paddingRight: 25,
+                    minHeight: 400,
+                    height: 400,
+                    borderRadius: 8,
+                    ...style,
+                }, rows: dashboardItem?.rows, columns: dashboardItem?.columns })) : null] }, dashboardItem?.name));
 }
 exports.default = DashboardItem;

package/dist/cjs/components/QuillTable.d.ts

@@ -0,0 +1,3 @@
+import { TableComponentProps } from './UiComponents';
+export default function QuillTable({ rows, columns, loading, showDownloadCSVButton, downloadFileName, containerStyle, LoadingComponent, }: TableComponentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=QuillTable.d.ts.map

package/dist/cjs/components/QuillTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"QuillTable.d.ts","sourceRoot":"","sources":["../../../src/components/QuillTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAKrE,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACd,gBAA2C,GAC5C,EAAE,mBAAmB,2CA+arB"}