@quillsql/react 2.11.30 → 2.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Chart.d.ts +25 -18
- package/dist/cjs/Chart.d.ts.map +1 -1
- package/dist/cjs/Chart.js +25 -17
- package/dist/cjs/ChartBuilder.d.ts +9 -5
- package/dist/cjs/ChartBuilder.d.ts.map +1 -1
- package/dist/cjs/ChartBuilder.js +34 -38
- package/dist/cjs/ChartEditor.d.ts +10 -6
- package/dist/cjs/ChartEditor.d.ts.map +1 -1
- package/dist/cjs/ChartEditor.js +11 -9
- package/dist/cjs/Dashboard.d.ts +53 -38
- package/dist/cjs/Dashboard.d.ts.map +1 -1
- package/dist/cjs/Dashboard.js +36 -17
- package/dist/cjs/ReportBuilder.d.ts +3 -3
- package/dist/cjs/ReportBuilder.d.ts.map +1 -1
- package/dist/cjs/ReportBuilder.js +20 -22
- package/dist/cjs/SQLEditor.d.ts +5 -5
- package/dist/cjs/SQLEditor.d.ts.map +1 -1
- package/dist/cjs/SQLEditor.js +2 -2
- package/dist/cjs/Table.d.ts +6 -6
- package/dist/cjs/Table.d.ts.map +1 -1
- package/dist/cjs/Table.js +14 -12
- package/dist/cjs/components/Chart/BarChart.d.ts.map +1 -1
- package/dist/cjs/components/Chart/BarChart.js +8 -1
- package/dist/cjs/components/Chart/ChartSkeleton.d.ts +2 -1
- package/dist/cjs/components/Chart/ChartSkeleton.d.ts.map +1 -1
- package/dist/cjs/components/Chart/ChartSkeleton.js +5 -1
- package/dist/cjs/components/Dashboard/ChartComponent.d.ts +2 -2
- package/dist/cjs/components/Dashboard/ChartComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/ChartComponent.js +4 -4
- package/dist/cjs/components/Dashboard/DashboardFilter.d.ts +12 -1
- package/dist/cjs/components/Dashboard/DashboardFilter.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/DashboardFilter.js +26 -2
- package/dist/cjs/components/Dashboard/DataLoader.d.ts +2 -2
- package/dist/cjs/components/Dashboard/DataLoader.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/DataLoader.js +3 -0
- package/dist/cjs/components/Dashboard/MetricComponent.d.ts +2 -2
- package/dist/cjs/components/Dashboard/MetricComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/MetricComponent.js +6 -6
- package/dist/cjs/components/Dashboard/TableComponent.d.ts +2 -2
- package/dist/cjs/components/Dashboard/TableComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/TableComponent.js +6 -6
- package/dist/cjs/components/QuillMultiSelect.d.ts +11 -0
- package/dist/cjs/components/QuillMultiSelect.d.ts.map +1 -0
- package/dist/cjs/components/QuillMultiSelect.js +183 -0
- package/dist/cjs/components/QuillSelect.d.ts.map +1 -1
- package/dist/cjs/components/QuillSelect.js +0 -1
- package/dist/cjs/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/cjs/components/ReportBuilder/ui.js +1 -0
- package/dist/cjs/components/UiComponents.d.ts +10 -0
- package/dist/cjs/components/UiComponents.d.ts.map +1 -1
- package/dist/cjs/components/UiComponents.js +15 -17
- package/dist/cjs/hooks/useExport.d.ts +1 -1
- package/dist/cjs/hooks/useExport.d.ts.map +1 -1
- package/dist/cjs/hooks/useExport.js +2 -2
- package/dist/cjs/hooks/useFormat.d.ts +1 -1
- package/dist/cjs/hooks/useFormat.d.ts.map +1 -1
- package/dist/cjs/hooks/useFormat.js +2 -2
- package/dist/cjs/hooks/useQuill.d.ts +2 -2
- package/dist/cjs/hooks/useQuill.d.ts.map +1 -1
- package/dist/cjs/hooks/useQuill.js +12 -11
- package/dist/cjs/index.d.ts +1 -3
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +1 -3
- package/dist/cjs/models/Filter.d.ts +7 -0
- package/dist/cjs/models/Filter.d.ts.map +1 -0
- package/dist/cjs/models/Filter.js +2 -0
- package/dist/cjs/utils/dashboard.d.ts +2 -2
- package/dist/cjs/utils/dashboard.d.ts.map +1 -1
- package/dist/cjs/utils/dashboard.js +2 -14
- package/dist/cjs/utils/errorProcessing.d.ts +2 -0
- package/dist/cjs/utils/errorProcessing.d.ts.map +1 -0
- package/dist/cjs/utils/errorProcessing.js +12 -0
- package/dist/cjs/utils/valueFormatter.js +1 -1
- package/dist/esm/Chart.d.ts +25 -18
- package/dist/esm/Chart.d.ts.map +1 -1
- package/dist/esm/Chart.js +25 -17
- package/dist/esm/ChartBuilder.d.ts +9 -5
- package/dist/esm/ChartBuilder.d.ts.map +1 -1
- package/dist/esm/ChartBuilder.js +35 -39
- package/dist/esm/ChartEditor.d.ts +10 -6
- package/dist/esm/ChartEditor.d.ts.map +1 -1
- package/dist/esm/ChartEditor.js +12 -10
- package/dist/esm/Dashboard.d.ts +53 -38
- package/dist/esm/Dashboard.d.ts.map +1 -1
- package/dist/esm/Dashboard.js +36 -17
- package/dist/esm/ReportBuilder.d.ts +3 -3
- package/dist/esm/ReportBuilder.d.ts.map +1 -1
- package/dist/esm/ReportBuilder.js +20 -22
- package/dist/esm/SQLEditor.d.ts +5 -5
- package/dist/esm/SQLEditor.d.ts.map +1 -1
- package/dist/esm/SQLEditor.js +2 -2
- package/dist/esm/Table.d.ts +6 -6
- package/dist/esm/Table.d.ts.map +1 -1
- package/dist/esm/Table.js +14 -12
- package/dist/esm/components/Chart/BarChart.d.ts.map +1 -1
- package/dist/esm/components/Chart/BarChart.js +8 -1
- package/dist/esm/components/Chart/ChartSkeleton.d.ts +2 -1
- package/dist/esm/components/Chart/ChartSkeleton.d.ts.map +1 -1
- package/dist/esm/components/Chart/ChartSkeleton.js +3 -1
- package/dist/esm/components/Dashboard/ChartComponent.d.ts +2 -2
- package/dist/esm/components/Dashboard/ChartComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/ChartComponent.js +4 -4
- package/dist/esm/components/Dashboard/DashboardFilter.d.ts +12 -1
- package/dist/esm/components/Dashboard/DashboardFilter.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/DashboardFilter.js +26 -2
- package/dist/esm/components/Dashboard/DataLoader.d.ts +2 -2
- package/dist/esm/components/Dashboard/DataLoader.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/DataLoader.js +3 -0
- package/dist/esm/components/Dashboard/MetricComponent.d.ts +2 -2
- package/dist/esm/components/Dashboard/MetricComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/MetricComponent.js +6 -6
- package/dist/esm/components/Dashboard/TableComponent.d.ts +2 -2
- package/dist/esm/components/Dashboard/TableComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/TableComponent.js +6 -6
- package/dist/esm/components/QuillMultiSelect.d.ts +11 -0
- package/dist/esm/components/QuillMultiSelect.d.ts.map +1 -0
- package/dist/esm/components/QuillMultiSelect.js +178 -0
- package/dist/esm/components/QuillSelect.d.ts.map +1 -1
- package/dist/esm/components/QuillSelect.js +0 -1
- package/dist/esm/components/ReportBuilder/ui.d.ts.map +1 -1
- package/dist/esm/components/ReportBuilder/ui.js +1 -0
- package/dist/esm/components/UiComponents.d.ts +10 -0
- package/dist/esm/components/UiComponents.d.ts.map +1 -1
- package/dist/esm/components/UiComponents.js +15 -17
- package/dist/esm/hooks/useExport.d.ts +1 -1
- package/dist/esm/hooks/useExport.d.ts.map +1 -1
- package/dist/esm/hooks/useExport.js +2 -2
- package/dist/esm/hooks/useFormat.d.ts +1 -1
- package/dist/esm/hooks/useFormat.d.ts.map +1 -1
- package/dist/esm/hooks/useFormat.js +2 -2
- package/dist/esm/hooks/useQuill.d.ts +2 -2
- package/dist/esm/hooks/useQuill.d.ts.map +1 -1
- package/dist/esm/hooks/useQuill.js +12 -11
- package/dist/esm/index.d.ts +1 -3
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +0 -1
- package/dist/esm/models/Filter.d.ts +7 -0
- package/dist/esm/models/Filter.d.ts.map +1 -0
- package/dist/esm/models/Filter.js +1 -0
- package/dist/esm/utils/dashboard.d.ts +2 -2
- package/dist/esm/utils/dashboard.d.ts.map +1 -1
- package/dist/esm/utils/dashboard.js +2 -14
- package/dist/esm/utils/errorProcessing.d.ts +2 -0
- package/dist/esm/utils/errorProcessing.d.ts.map +1 -0
- package/dist/esm/utils/errorProcessing.js +8 -0
- package/dist/esm/utils/valueFormatter.js +1 -1
- package/package.json +1 -1
|
@@ -40,7 +40,7 @@ const dataFetcher_2 = require("./utils/dataFetcher");
|
|
|
40
40
|
const columnProcessing_1 = require("./utils/columnProcessing");
|
|
41
41
|
const astProcessing_1 = require("./utils/astProcessing");
|
|
42
42
|
const PivotForm_1 = __importDefault(require("./internals/ReportBuilder/PivotForm"));
|
|
43
|
-
exports.QUILL_SERVER = process
|
|
43
|
+
exports.QUILL_SERVER = process?.env?.QUILL_SERVER_HOST ?? 'https://quill-344421.uc.r.appspot.com';
|
|
44
44
|
/**
|
|
45
45
|
* Quill Report Builder
|
|
46
46
|
*
|
|
@@ -73,7 +73,7 @@ exports.QUILL_SERVER = process.env.QUILL_SERVER_HOST ?? 'https://quill-344421.uc
|
|
|
73
73
|
* @see https://docs.quillsql.com/components/report-builder
|
|
74
74
|
*/
|
|
75
75
|
function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void null, onSubmitCreateReport = (_) => void null, destinationDashboard = undefined, organizationName = '', ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, ModalComponent = UiComponents_1.MemoizedModal, TextInputComponent = UiComponents_2.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, TableComponent = UiComponents_1.QuillTableComponent, PopoverComponent = UiComponents_1.MemoizedPopover, TabsComponent = UiComponents_1.QuillTabs, CheckboxComponent = UiComponents_1.MemoizedCheckbox, SidebarComponent = ui_1.QuillSidebar, ContainerComponent = ui_1.CustomContainer, SelectColumnComponent = ui_1.QuillSelectColumn, DraggableColumnComponent = ui_1.QuillDraggableColumn, SidebarHeadingComponent = ui_1.QuillSidebarHeading, FilterPopoverComponent = ui_1.QuillFilterPopover, SortPopoverComponent = ui_1.QuillSortPopover, LimitPopoverComponent = ui_1.QuillLimitPopover, CardComponent = QuillCard_1.QuillCard, LabelComponent = UiComponents_1.MemoizedLabel, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, TextComponent = UiComponents_1.MemoizedText, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, LoadingComponent = UiComponents_1.QuillLoadingComponent, ColumnSearchEmptyState = UiComponents_1.QuillColumnSearchEmptyState, ChartBuilderFormContainer = UiComponents_1.QuillChartBuilderFormContainer, ChartBuilderModalComponent = UiComponents_1.MemoizedModal, isAdminEnabled = false, isAIEnabled = true, showChartBuilderTableFormatOptions = true, containerStyle, className, pivotRecommendationsEnabled = true, reportId, hideCopySQL = true, isChartBuilderHorizontalView = true, }) {
|
|
76
|
-
const { data:
|
|
76
|
+
const { data: report } = (0, useQuill_1.useQuill)(reportId || '');
|
|
77
77
|
const [aiPrompt, setAiPrompt] = (0, react_1.useState)('');
|
|
78
78
|
const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
|
|
79
79
|
const [baseAst, setBaseAst] = (0, react_1.useState)(null);
|
|
@@ -494,35 +494,35 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
|
|
|
494
494
|
(0, react_1.useEffect)(() => {
|
|
495
495
|
const loadChart = async () => {
|
|
496
496
|
setInitalChartLoad(true);
|
|
497
|
-
if (!
|
|
497
|
+
if (!report || report.referencedTables.length !== 1) {
|
|
498
498
|
setInitalChartLoad(false);
|
|
499
499
|
return;
|
|
500
500
|
}
|
|
501
|
-
const tableName =
|
|
501
|
+
const tableName = report.referencedTables[0];
|
|
502
502
|
if (!tableName) {
|
|
503
503
|
return;
|
|
504
504
|
}
|
|
505
505
|
const resp = await (0, dataFetcher_2.getDataFromCloud)(client, `astify`, {
|
|
506
|
-
query:
|
|
506
|
+
query: report.queryString,
|
|
507
507
|
});
|
|
508
508
|
const ast = (0, astProcessing_1.getSelectFromAST)(resp.ast);
|
|
509
|
-
let convertedAst = (0, astProcessing_1.processStarColumn)(ast,
|
|
509
|
+
let convertedAst = (0, astProcessing_1.processStarColumn)(ast, report.columns);
|
|
510
510
|
(0, astProcessing_1.processApostrophe)(convertedAst, ['type', 'value']);
|
|
511
511
|
convertedAst = (0, convert_1.convertBigQuery)(convertedAst);
|
|
512
512
|
let schemaInfo = schemaTables.length !== 0 ? schemaTables : await fetchSchema();
|
|
513
513
|
let newAst, groupByPivot;
|
|
514
514
|
({ ast: newAst, pivot: groupByPivot } = (0, convert_1.convertGroupBy)(convertedAst,
|
|
515
515
|
// @ts-ignore
|
|
516
|
-
|
|
516
|
+
report.pivot, schemaInfo));
|
|
517
517
|
if (convertedAst.where) {
|
|
518
518
|
setFormData((0, util_1.deepCopy)(convertedAst.where));
|
|
519
519
|
}
|
|
520
|
-
setActiveQuery(
|
|
520
|
+
setActiveQuery(report.queryString);
|
|
521
521
|
newAst = groupByPivot ? newAst : convertedAst;
|
|
522
522
|
setBaseAst(newAst);
|
|
523
523
|
const initialRows = await fetchUponChange(newAst, undefined);
|
|
524
|
-
// const initialRows = await handleAsk(
|
|
525
|
-
const stringColumns =
|
|
524
|
+
// const initialRows = await handleAsk(report.queryString);
|
|
525
|
+
const stringColumns = report.columns.filter((column) => {
|
|
526
526
|
return column.format === 'string';
|
|
527
527
|
});
|
|
528
528
|
if (stringColumns.length !== 0 && tableName) {
|
|
@@ -546,13 +546,13 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
|
|
|
546
546
|
// @ts-ignore
|
|
547
547
|
groupByPivot, initialRows, undefined, false);
|
|
548
548
|
setPivotData(pivotedData || []);
|
|
549
|
-
const formattedRows = formatRows(pivotedData.rows,
|
|
549
|
+
const formattedRows = formatRows(pivotedData.rows, report.columns, true,
|
|
550
550
|
// @ts-ignore
|
|
551
551
|
groupByPivot.aggregationType);
|
|
552
552
|
setFormattedRows(formattedRows);
|
|
553
553
|
}
|
|
554
554
|
else {
|
|
555
|
-
const formattedRows = formatRows(
|
|
555
|
+
const formattedRows = formatRows(report.rows, report.columns);
|
|
556
556
|
setFormattedRows(formattedRows);
|
|
557
557
|
}
|
|
558
558
|
setCurrentTable(tableName);
|
|
@@ -561,10 +561,10 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
|
|
|
561
561
|
setInitalChartLoad(false);
|
|
562
562
|
}, 500);
|
|
563
563
|
};
|
|
564
|
-
if (
|
|
564
|
+
if (report && report.referencedTables.length === 1) {
|
|
565
565
|
loadChart();
|
|
566
566
|
}
|
|
567
|
-
}, [
|
|
567
|
+
}, [report]);
|
|
568
568
|
(0, react_1.useEffect)(() => {
|
|
569
569
|
if (schemaTables.length === 0) {
|
|
570
570
|
fetchSchema();
|
|
@@ -2614,7 +2614,7 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
|
|
|
2614
2614
|
display: 'flex',
|
|
2615
2615
|
flexDirection: 'row',
|
|
2616
2616
|
gap: '12px',
|
|
2617
|
-
}, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), !hideCopySQL && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => copyToClipboard(activeQuery), label: isCopying ? '✅ Copied' : 'Copy SQL' })), (0, jsx_runtime_1.jsx)(ButtonComponent, { label:
|
|
2617
|
+
}, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } }), !hideCopySQL && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => copyToClipboard(activeQuery), label: isCopying ? '✅ Copied' : 'Copy SQL' })), (0, jsx_runtime_1.jsx)(ButtonComponent, { label: report ? 'Save changes' : 'Add to dashboard', onClick: () => { } })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` })] }));
|
|
2618
2618
|
}
|
|
2619
2619
|
return ((0, jsx_runtime_1.jsxs)("div", { style: { backgroundColor: theme.backgroundColor, ...containerStyle }, className: className, children: [(!isChartBuilderHorizontalView ||
|
|
2620
2620
|
(isChartBuilderHorizontalView && !isChartBuilderOpen)) && ((0, jsx_runtime_1.jsxs)("div", { ref: parentRef, style: {
|
|
@@ -3052,14 +3052,12 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
|
|
|
3052
3052
|
gap: 12,
|
|
3053
3053
|
}, children: [(0, jsx_runtime_1.jsx)(ErrorMessageComponent, { errorMessage: errorMessage }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: handleAsk, label: 'Retry' })] })) : ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%' } })), baseAst && dataDisplayed && !initalChartLoad && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!hideCopySQL && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: isCopying ? '✅ Copied' : 'Copy SQL', onClick: () => copyToClipboard(activeQuery) })), (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => {
|
|
3054
3054
|
setIsChartBuilderOpen(true);
|
|
3055
|
-
}, label:
|
|
3055
|
+
}, label: report ? 'Save changes' : 'Add to dashboard' })] }))] })] }), (0, jsx_runtime_1.jsx)("style", { children: `body{margin:0;}` })] })), (!isChartBuilderHorizontalView || isChartBuilderOpen) && ((0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { report: report
|
|
3056
3056
|
? {
|
|
3057
|
-
...
|
|
3057
|
+
...report,
|
|
3058
3058
|
pivot: pivot,
|
|
3059
|
-
yAxisFields:
|
|
3060
|
-
|
|
3061
|
-
: dashboardItem.yAxisFields,
|
|
3062
|
-
columns: dashboardItem.columns.filter((col) => {
|
|
3059
|
+
yAxisFields: report.pivot && !pivot ? [] : report.yAxisFields,
|
|
3060
|
+
columns: report.columns.filter((col) => {
|
|
3063
3061
|
return columns.find((c) => {
|
|
3064
3062
|
return col.field === c.field;
|
|
3065
3063
|
});
|
|
@@ -3067,6 +3065,6 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
|
|
|
3067
3065
|
queryString: activeQuery,
|
|
3068
3066
|
rows: rows,
|
|
3069
3067
|
}
|
|
3070
|
-
: undefined, rows: rows, columns: columns, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title:
|
|
3068
|
+
: undefined, rows: rows, columns: columns, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title: report ? 'Save changes' : 'Add to dashboard', isHorizontalView: true, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: report ? onSubmitEditReport : onSubmitCreateReport, destinationDashboard: destinationDashboard, organizationName: organizationName, pivotData: pivotData, initialUniqueValues: uniqueValues[currentTable], pivotRecommendationsEnabled: pivotRecommendationsEnabled && overrideRecommendations, SelectComponent: SelectComponent, TextInputComponent: TextInputComponent, ButtonComponent: ButtonComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, CardComponent: CardComponent, ModalComponent: ChartBuilderModalComponent, PopoverComponent: PopoverComponent, TableComponent: TableComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true, buttonLabel: report ? 'Save changes' : 'Add to dashboard' }))] }));
|
|
3071
3069
|
}
|
|
3072
3070
|
exports.default = ReportBuilder;
|
package/dist/cjs/SQLEditor.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { QuillReport } from './Dashboard';
|
|
3
3
|
/**
|
|
4
4
|
* Props for the Quill SQLEditor component.
|
|
5
5
|
*/
|
|
@@ -159,9 +159,9 @@ export interface SQLEditorProps {
|
|
|
159
159
|
*/
|
|
160
160
|
onChangeColumns?: (columns: object[]) => void;
|
|
161
161
|
/**
|
|
162
|
-
* A callback that is fired when a
|
|
162
|
+
* A callback that is fired when a report has been added to a dashboard.
|
|
163
163
|
*/
|
|
164
|
-
onAddToDashboardComplete?: (
|
|
164
|
+
onAddToDashboardComplete?: (report: QuillReport) => void;
|
|
165
165
|
/**
|
|
166
166
|
* Whether the chart builder is in horizontal view mode.
|
|
167
167
|
*
|
|
@@ -193,7 +193,7 @@ export interface SQLEditorProps {
|
|
|
193
193
|
/**
|
|
194
194
|
* A dashboard item.
|
|
195
195
|
*/
|
|
196
|
-
|
|
196
|
+
report?: QuillReport | any;
|
|
197
197
|
/**
|
|
198
198
|
* The default query to use as a placeholder.
|
|
199
199
|
*/
|
|
@@ -256,7 +256,7 @@ export interface SQLEditorProps {
|
|
|
256
256
|
* ### SQLEditor API
|
|
257
257
|
* @see https://docs.quillsql.com/components/sql-editor
|
|
258
258
|
*/
|
|
259
|
-
export default function SQLEditor({ ButtonComponent, SecondaryButtonComponent, DeleteButtonComponent, TextInputComponent, SelectComponent, TableComponent, isNewQueryEnabled, LoadingComponent, ModalComponent, PopoverComponent, CardComponent, LabelComponent, HeaderComponent, SubHeaderComponent, TextComponent, ErrorMessageComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, ChartBuilderFormContainer, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel,
|
|
259
|
+
export default function SQLEditor({ ButtonComponent, SecondaryButtonComponent, DeleteButtonComponent, TextInputComponent, SelectComponent, TableComponent, isNewQueryEnabled, LoadingComponent, ModalComponent, PopoverComponent, CardComponent, LabelComponent, HeaderComponent, SubHeaderComponent, TextComponent, ErrorMessageComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, ChartBuilderFormContainer, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel, report, organizationName, isChartBuilderHorizontalView, containerStyle, className, }: SQLEditorProps): import("react/jsx-runtime").JSX.Element;
|
|
260
260
|
export declare const SchemaListComponent: ({ schema, theme, loading, LoadingComponent, width, onClick, }: {
|
|
261
261
|
schema: any;
|
|
262
262
|
theme: any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAMZ,SAAS,EACV,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"SQLEditor.d.ts","sourceRoot":"","sources":["../../src/SQLEditor.tsx"],"names":[],"mappings":"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"}
|
package/dist/cjs/SQLEditor.js
CHANGED
|
@@ -69,7 +69,7 @@ function setEditorTheme(editor, monaco) {
|
|
|
69
69
|
* ### SQLEditor API
|
|
70
70
|
* @see https://docs.quillsql.com/components/sql-editor
|
|
71
71
|
*/
|
|
72
|
-
function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextInputComponent = UiComponents_2.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, TableComponent = UiComponents_1.QuillTableComponent, isNewQueryEnabled = false, LoadingComponent = UiComponents_1.QuillLoadingComponent, ModalComponent = UiComponents_1.MemoizedModal, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, LabelComponent = UiComponents_1.MemoizedLabel, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, TextComponent = UiComponents_1.MemoizedText, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, ChartBuilderFormContainer = UiComponents_1.QuillChartBuilderFormContainer, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard',
|
|
72
|
+
function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryButtonComponent = UiComponents_1.MemoizedSecondaryButton, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, TextInputComponent = UiComponents_2.QuillTextInput, SelectComponent = QuillSelect_1.QuillSelectComponent, TableComponent = UiComponents_1.QuillTableComponent, isNewQueryEnabled = false, LoadingComponent = UiComponents_1.QuillLoadingComponent, ModalComponent = UiComponents_1.MemoizedModal, PopoverComponent = UiComponents_1.MemoizedPopover, CardComponent = QuillCard_1.QuillCard, LabelComponent = UiComponents_1.MemoizedLabel, HeaderComponent = UiComponents_1.MemoizedHeader, SubHeaderComponent = UiComponents_1.MemoizedSubHeader, TextComponent = UiComponents_1.MemoizedText, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, ChartBuilderInputRowContainer = UiComponents_1.QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = UiComponents_1.QuillChartBuilderInputColumnContainer, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, ChartBuilderFormContainer = UiComponents_1.QuillChartBuilderFormContainer, defaultQuery, onChangeQuery, onChangeData, onChangeColumns, onChangeFields, isChartBuilderEnabled = false, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, addToDashboardButtonLabel = 'Add to dashboard', report = undefined, organizationName = undefined, isChartBuilderHorizontalView = true, containerStyle = { height: '100vh' }, className, }) {
|
|
73
73
|
const [sqlPrompt, setSqlPrompt] = (0, react_1.useState)('');
|
|
74
74
|
const [client] = (0, react_1.useContext)(Context_1.ClientContext);
|
|
75
75
|
const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
|
|
@@ -293,7 +293,7 @@ function SQLEditor({ ButtonComponent = UiComponents_1.MemoizedButton, SecondaryB
|
|
|
293
293
|
justifyContent: 'flex-end',
|
|
294
294
|
width: '100%',
|
|
295
295
|
height: '70px',
|
|
296
|
-
}, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel }) }))] })] }) }) })), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { rows: rows, columns: columns, query: query, isHorizontalView: isChartBuilderHorizontalView, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, buttonLabel: addToDashboardButtonLabel,
|
|
296
|
+
}, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: addToDashboardButtonLabel }) }))] })] }) }) })), (0, jsx_runtime_1.jsx)(ChartBuilder_1.ChartBuilderWithModal, { rows: rows, columns: columns, query: query, isHorizontalView: isChartBuilderHorizontalView, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, onAddToDashboardComplete: onAddToDashboardComplete, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, destinationDashboard: destinationDashboard, title: chartBuilderTitle, buttonLabel: addToDashboardButtonLabel, report: report, organizationName: organizationName, CardComponent: CardComponent, TableComponent: TableComponent, ModalComponent: ModalComponent, ButtonComponent: ButtonComponent, TextInputComponent: TextInputComponent, SelectComponent: SelectComponent, SecondaryButtonComponent: SecondaryButtonComponent, HeaderComponent: HeaderComponent, SubHeaderComponent: SubHeaderComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, PopoverComponent: PopoverComponent, DeleteButtonComponent: DeleteButtonComponent, LoadingComponent: LoadingComponent, ChartBuilderInputRowContainer: ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer: ChartBuilderInputColumnContainer, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, FormContainer: ChartBuilderFormContainer, hideDateRangeFilter: true })] }));
|
|
297
297
|
}
|
|
298
298
|
exports.default = SQLEditor;
|
|
299
299
|
const SQLEditorComponent = ({ query, setQuery, handleRunQuery, handleFixWithAI, handleClearQuery, defineEditorTheme, setEditorTheme, ButtonComponent, SecondaryButtonComponent, isNewQueryEnabled, theme, loading, LoadingComponent = UiComponents_1.QuillLoadingComponent, }) => {
|
package/dist/cjs/Table.d.ts
CHANGED
|
@@ -10,13 +10,13 @@ export interface TableProps {
|
|
|
10
10
|
/**
|
|
11
11
|
* The id of the table to render, if any.
|
|
12
12
|
*
|
|
13
|
-
* When a `
|
|
13
|
+
* When a `reportId` is passed, the table will first fetch the data necessary
|
|
14
14
|
* to render this table, and then it will render the rows and columns that it
|
|
15
15
|
* receives from the server.
|
|
16
16
|
*
|
|
17
|
-
* NOTE: A `
|
|
17
|
+
* NOTE: A `reportId` must be passed if `rows` and `columns` are not present.
|
|
18
18
|
*/
|
|
19
|
-
|
|
19
|
+
reportId?: string;
|
|
20
20
|
/**
|
|
21
21
|
* The rows of the table to show, if any.
|
|
22
22
|
*
|
|
@@ -24,7 +24,7 @@ export interface TableProps {
|
|
|
24
24
|
* dashboard item and will instead simply render the rows and columns it was
|
|
25
25
|
* given.
|
|
26
26
|
*
|
|
27
|
-
* NOTE: Both `rows` and `columns` must be passed if `
|
|
27
|
+
* NOTE: Both `rows` and `columns` must be passed if `reportId` is not present.
|
|
28
28
|
*
|
|
29
29
|
* @example
|
|
30
30
|
* ```js
|
|
@@ -50,7 +50,7 @@ export interface TableProps {
|
|
|
50
50
|
* dashboard item and will instead simply render the rows and columns it was
|
|
51
51
|
* given.
|
|
52
52
|
*
|
|
53
|
-
* NOTE: Both `rows` and `columns` must be passed if `
|
|
53
|
+
* NOTE: Both `rows` and `columns` must be passed if `reportId` is not present.
|
|
54
54
|
*
|
|
55
55
|
* @example
|
|
56
56
|
* ```js
|
|
@@ -109,7 +109,7 @@ export interface TableProps {
|
|
|
109
109
|
* @example
|
|
110
110
|
* ```js
|
|
111
111
|
* // Usage with chart id (will auto-fetch data)
|
|
112
|
-
* <Table
|
|
112
|
+
* <Table reportId="12345" />
|
|
113
113
|
* ```
|
|
114
114
|
*
|
|
115
115
|
* @example
|
package/dist/cjs/Table.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAarD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAyBD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IAEJ;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IAEzB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAErC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,KAAK,UAAW,UAAU,4CAmC/B,CAAC;AAmGF,eAAe,KAAK,CAAC"}
|
package/dist/cjs/Table.js
CHANGED
|
@@ -11,6 +11,7 @@ const merge_1 = require("./utils/merge");
|
|
|
11
11
|
const QuillTable_1 = __importDefault(require("./components/QuillTable"));
|
|
12
12
|
const useFormat_1 = require("./hooks/useFormat");
|
|
13
13
|
const useExport_1 = require("./hooks/useExport");
|
|
14
|
+
const errorProcessing_1 = require("./utils/errorProcessing");
|
|
14
15
|
/**
|
|
15
16
|
* ### Quill Table
|
|
16
17
|
*
|
|
@@ -19,7 +20,7 @@ const useExport_1 = require("./hooks/useExport");
|
|
|
19
20
|
* @example
|
|
20
21
|
* ```js
|
|
21
22
|
* // Usage with chart id (will auto-fetch data)
|
|
22
|
-
* <Table
|
|
23
|
+
* <Table reportId="12345" />
|
|
23
24
|
* ```
|
|
24
25
|
*
|
|
25
26
|
* @example
|
|
@@ -50,11 +51,11 @@ const Table = (props) => {
|
|
|
50
51
|
if ('rows' in data && 'columns' in data) {
|
|
51
52
|
return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { hideCSVDownloadButton: data.hideCSVDownloadButton, downloadFileName: data.csvFilename, columns: data.columns, rows: data.rows, className: data.className, containerStyle: data.containerStyle, LoadingComponent: data.LoadingComponent, isLoading: data.isLoading, downloadCSV: data.downloadCSV }));
|
|
52
53
|
}
|
|
53
|
-
return ((0, jsx_runtime_1.jsx)(ChartUpdater, { hideCSVDownloadButton: data.hideCSVDownloadButton, dispatch: dispatch, dashboard: dashboard,
|
|
54
|
+
return ((0, jsx_runtime_1.jsx)(ChartUpdater, { hideCSVDownloadButton: data.hideCSVDownloadButton, dispatch: dispatch, dashboard: dashboard, reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, dashboardFilters: dashboardFilters, client: client, csvFilename: data.csvFilename, LoadingComponent: data.LoadingComponent }));
|
|
54
55
|
};
|
|
55
|
-
const ChartUpdater = ({
|
|
56
|
-
const { rows, loading } = (0, useFormat_1.useMemoizedRows)(
|
|
57
|
-
const { downloadCSV } = (0, useExport_1.useExport)(
|
|
56
|
+
const ChartUpdater = ({ reportId, containerStyle, className, dashboard, dispatch, client, dashboardFilters, csvFilename, hideCSVDownloadButton = true, LoadingComponent, }) => {
|
|
57
|
+
const { rows, loading } = (0, useFormat_1.useMemoizedRows)(reportId);
|
|
58
|
+
const { downloadCSV } = (0, useExport_1.useExport)(reportId);
|
|
58
59
|
(0, react_1.useEffect)(() => {
|
|
59
60
|
let isSubscribed = true;
|
|
60
61
|
async function getChartOptions() {
|
|
@@ -62,7 +63,7 @@ const ChartUpdater = ({ chartId, containerStyle, className, dashboard, dispatch,
|
|
|
62
63
|
try {
|
|
63
64
|
const hostedBody = {
|
|
64
65
|
metadata: {
|
|
65
|
-
dashboardItemId:
|
|
66
|
+
dashboardItemId: reportId,
|
|
66
67
|
orgId: client.customerId || '*',
|
|
67
68
|
task: 'item',
|
|
68
69
|
filters: [...Object.values(dashboardFilters)],
|
|
@@ -71,17 +72,18 @@ const ChartUpdater = ({ chartId, containerStyle, className, dashboard, dispatch,
|
|
|
71
72
|
},
|
|
72
73
|
};
|
|
73
74
|
const cloudBody = {
|
|
74
|
-
id:
|
|
75
|
+
id: reportId,
|
|
75
76
|
filters: [...Object.values(dashboardFilters)],
|
|
76
77
|
};
|
|
77
78
|
const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
|
|
79
|
+
(0, errorProcessing_1.processFilterErrorList)(resp);
|
|
78
80
|
if (resp && resp.name !== 'error') {
|
|
79
81
|
if (resp.compareRows) {
|
|
80
82
|
(0, merge_1.mergeComparisonRange)(resp);
|
|
81
83
|
}
|
|
82
84
|
dispatch({
|
|
83
85
|
type: 'UPDATE_DASHBOARD_ITEM',
|
|
84
|
-
id:
|
|
86
|
+
id: reportId,
|
|
85
87
|
data: {
|
|
86
88
|
...resp,
|
|
87
89
|
filtersApplied: dashboardFilters,
|
|
@@ -98,13 +100,13 @@ const ChartUpdater = ({ chartId, containerStyle, className, dashboard, dispatch,
|
|
|
98
100
|
return () => {
|
|
99
101
|
isSubscribed = false;
|
|
100
102
|
};
|
|
101
|
-
}, [dashboardFilters, client.customerId,
|
|
103
|
+
}, [dashboardFilters, client.customerId, reportId]);
|
|
102
104
|
return ((0, jsx_runtime_1.jsx)(QuillTable_1.default, { hideCSVDownloadButton: hideCSVDownloadButton,
|
|
103
105
|
// @ts-ignore
|
|
104
|
-
downloadFileName: csvFilename || dashboard[
|
|
106
|
+
downloadFileName: csvFilename || dashboard[reportId]?.name || '',
|
|
105
107
|
// @ts-ignore
|
|
106
|
-
columns: dashboard[
|
|
108
|
+
columns: dashboard[reportId]?.columns || [],
|
|
107
109
|
// @ts-ignore
|
|
108
|
-
rows: rows || dashboard[
|
|
110
|
+
rows: rows || dashboard[reportId]?.rows || [], containerStyle: containerStyle, className: className, LoadingComponent: LoadingComponent, isLoading: loading, downloadCSV: downloadCSV }));
|
|
109
111
|
};
|
|
110
112
|
exports.default = Table;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,GAC1B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,
|
|
1
|
+
{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/BarChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,SAAS,EACT,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,GAC1B,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,WAAW,EAAE,GAAG,EAAE,CAAC;IACnB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,GAAG,CAAC;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;CAC5B,2CAqMA"}
|
|
@@ -35,6 +35,13 @@ function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, classNa
|
|
|
35
35
|
return colorMap[field][key];
|
|
36
36
|
return undefined;
|
|
37
37
|
};
|
|
38
|
+
const sortYAxisFields = (fields) => {
|
|
39
|
+
if (formattedData.length > 0) {
|
|
40
|
+
return fields.sort((a, b) => Object.keys(formattedData[0]).indexOf(a.field) -
|
|
41
|
+
Object.keys(formattedData[0]).indexOf(b.field));
|
|
42
|
+
}
|
|
43
|
+
return fields;
|
|
44
|
+
};
|
|
38
45
|
if (!data || data.length === 0) {
|
|
39
46
|
return ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
40
47
|
display: 'flex',
|
|
@@ -84,7 +91,7 @@ function BarChart({ colors, colorMap, yAxisFields, data, containerStyle, classNa
|
|
|
84
91
|
field: payload[0].dataKey,
|
|
85
92
|
fields: yAxisFields,
|
|
86
93
|
}), xAxisFormat: xAxisFormat, xAxisField: xAxisField, colors: colors, comparison: comparison }));
|
|
87
|
-
}, position: { y: 0 } }), yAxisFields.map((elem) => {
|
|
94
|
+
}, position: { y: 0 } }), sortYAxisFields(yAxisFields).map((elem) => {
|
|
88
95
|
return ((0, jsx_runtime_1.jsx)(recharts_1.Bar, { name: elem.label, dataKey: elem.field, stackId: isStacked &&
|
|
89
96
|
(elem.field?.replace('comparison_', '') ??
|
|
90
97
|
'unknown'), type: "linear", fill: getCustomColor(elem.field) ??
|
|
@@ -3,5 +3,6 @@ export interface SkeletonComponentProps {
|
|
|
3
3
|
conatinerStyle?: CSSProperties;
|
|
4
4
|
className?: string;
|
|
5
5
|
}
|
|
6
|
-
export
|
|
6
|
+
export declare const QuillLoadingSkeleton: () => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export default function ChartSkeleton({ className, containerStyle, }: any): JSX.Element;
|
|
7
8
|
//# sourceMappingURL=ChartSkeleton.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,
|
|
1
|
+
{"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;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,oBAAoB,+CAA0B,CAAC;AAE5D,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,SAAS,EACT,cAAc,GACf,EAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CA2EnB"}
|
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.QuillLoadingSkeleton = void 0;
|
|
3
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
5
|
const react_1 = require("react");
|
|
5
6
|
const Context_1 = require("../../Context");
|
|
6
|
-
|
|
7
|
+
const QuillLoadingSkeleton = () => (0, jsx_runtime_1.jsx)(ChartSkeleton, {});
|
|
8
|
+
exports.QuillLoadingSkeleton = QuillLoadingSkeleton;
|
|
9
|
+
function ChartSkeleton({ className, containerStyle, }) {
|
|
7
10
|
const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
|
|
8
11
|
return ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
9
12
|
boxSizing: 'content-box',
|
|
10
13
|
height: '100%',
|
|
14
|
+
width: '100%',
|
|
11
15
|
...containerStyle,
|
|
12
16
|
}, className: className, children: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
13
17
|
height: '100%',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
3
|
-
export default function QuillChartComponent({
|
|
2
|
+
import { QuillReportProps } from '../../Dashboard';
|
|
3
|
+
export default function QuillChartComponent({ report, onClick, children, }: QuillReportProps): JSX.Element;
|
|
4
4
|
//# sourceMappingURL=ChartComponent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/ChartComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ChartComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/ChartComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA8FhC"}
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
4
|
const hooks_1 = require("../../hooks");
|
|
5
|
-
function QuillChartComponent({
|
|
5
|
+
function QuillChartComponent({ report, onClick, children, }) {
|
|
6
6
|
const theme = (0, hooks_1.useTheme)();
|
|
7
|
-
return ((0, jsx_runtime_1.jsx)("div", { onClick: () => onClick && onClick(
|
|
7
|
+
return ((0, jsx_runtime_1.jsx)("div", { onClick: () => onClick && onClick(report), style: {
|
|
8
8
|
cursor: 'pointer',
|
|
9
9
|
boxSizing: 'content-box',
|
|
10
10
|
minHeight: 400,
|
|
@@ -41,7 +41,7 @@ function QuillChartComponent({ dashboardItem, onClick, children, }) {
|
|
|
41
41
|
display: 'block',
|
|
42
42
|
maxWidth: '100%',
|
|
43
43
|
overflow: 'hidden',
|
|
44
|
-
}, children:
|
|
44
|
+
}, children: report?.name }), onClick ? ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
45
45
|
fontFamily: theme.fontFamily,
|
|
46
46
|
color: theme.primaryTextColor,
|
|
47
47
|
boxSizing: 'content-box',
|
|
@@ -55,6 +55,6 @@ function QuillChartComponent({ dashboardItem, onClick, children, }) {
|
|
|
55
55
|
padding: 0,
|
|
56
56
|
height: '100%',
|
|
57
57
|
boxSizing: 'content-box',
|
|
58
|
-
}, children: children })] }) }) }) },
|
|
58
|
+
}, children: children })] }) }) }) }, report?.name));
|
|
59
59
|
}
|
|
60
60
|
exports.default = QuillChartComponent;
|
|
@@ -10,14 +10,25 @@ type SelectComponentType = ({ label, value, options, onChange, width, }: {
|
|
|
10
10
|
}[];
|
|
11
11
|
onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
|
|
12
12
|
}) => JSX.Element;
|
|
13
|
+
type MultiSelectComponentType = ({ label, value, options, onChange, width, }: {
|
|
14
|
+
value: string[];
|
|
15
|
+
label?: string | undefined;
|
|
16
|
+
width: number;
|
|
17
|
+
options: {
|
|
18
|
+
value: string;
|
|
19
|
+
label: string;
|
|
20
|
+
}[];
|
|
21
|
+
onChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
|
|
22
|
+
}) => JSX.Element;
|
|
13
23
|
type DateRangePickerComponentType = ({ dateRange, onChangeDateRange, presetOptions, onChangePreset, preset, selectWidth, }: DateRangePickerComponentProps) => JSX.Element;
|
|
14
24
|
interface DashboardFilterProps {
|
|
15
25
|
filter: any;
|
|
16
26
|
onChangeFilter: (...args: any[]) => void;
|
|
17
27
|
SelectComponent: SelectComponentType | React.MemoExoticComponent<SelectComponentType>;
|
|
28
|
+
MultiSelectComponent: MultiSelectComponentType | React.MemoExoticComponent<MultiSelectComponentType>;
|
|
18
29
|
DateRangePickerComponent: DateRangePickerComponentType | React.MemoExoticComponent<DateRangePickerComponentType>;
|
|
19
30
|
theme: any;
|
|
20
31
|
}
|
|
21
|
-
export declare function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePickerComponent, theme, }: DashboardFilterProps): import("react/jsx-runtime").JSX.Element | null;
|
|
32
|
+
export declare function DashboardFilter({ filter, onChangeFilter, SelectComponent, MultiSelectComponent, DateRangePickerComponent, theme, }: DashboardFilterProps): import("react/jsx-runtime").JSX.Element | null;
|
|
22
33
|
export {};
|
|
23
34
|
//# sourceMappingURL=DashboardFilter.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;
|
|
1
|
+
{"version":3,"file":"DashboardFilter.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DashboardFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAIhG,KAAK,mBAAmB,GAAG,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE,KAAK,GAAG,CAAC,OAAO,CAAC;AAElB,KAAK,wBAAwB,GAAG,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACjE,KAAK,GAAG,CAAC,OAAO,CAAC;AAElB,KAAK,4BAA4B,GAAG,CAAC,EACnC,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,cAAc,EACd,MAAM,EACN,WAAW,GACZ,EAAE,6BAA6B,KAAK,GAAG,CAAC,OAAO,CAAC;AAEjD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,GAAG,CAAC;IACZ,cAAc,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACzC,eAAe,EACX,mBAAmB,GACnB,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;IACnD,oBAAoB,EAChB,wBAAwB,GACxB,KAAK,CAAC,mBAAmB,CAAC,wBAAwB,CAAC,CAAC;IACxD,wBAAwB,EACpB,4BAA4B,GAC5B,KAAK,CAAC,mBAAmB,CAAC,4BAA4B,CAAC,CAAC;IAC5D,KAAK,EAAE,GAAG,CAAC;CACZ;AAED,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,cAAc,EACd,eAAsC,EACtC,oBAAgD,EAChD,wBAAwB,EACxB,KAAK,GACN,EAAE,oBAAoB,kDA6ItB"}
|
|
@@ -5,13 +5,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const react_1 = require("react");
|
|
6
6
|
const dateRangePickerUtils_1 = require("../../DateRangePicker/dateRangePickerUtils");
|
|
7
7
|
const Context_1 = require("../../Context");
|
|
8
|
-
|
|
8
|
+
const QuillMultiSelect_1 = require("../QuillMultiSelect");
|
|
9
|
+
const QuillSelect_1 = require("../QuillSelect");
|
|
10
|
+
function DashboardFilter({ filter, onChangeFilter, SelectComponent = QuillSelect_1.QuillSelectComponent, MultiSelectComponent = QuillMultiSelect_1.QuillMultiSelectComponent, DateRangePickerComponent, theme, }) {
|
|
9
11
|
const { comparisonRange, setComparisonRange } = (0, Context_1.useComparisonRange)();
|
|
10
12
|
const { setDateFilter } = (0, Context_1.useDateFilter)();
|
|
11
13
|
const [filterValue, setFilterValue] = (0, react_1.useState)(null);
|
|
12
14
|
(0, react_1.useEffect)(() => {
|
|
13
15
|
if (filter.filterType === 'string') {
|
|
14
|
-
|
|
16
|
+
if (filter.stringFilterType === 'multiselect') {
|
|
17
|
+
setFilterValue(filter.values);
|
|
18
|
+
}
|
|
19
|
+
else {
|
|
20
|
+
setFilterValue(filter.selectedValue);
|
|
21
|
+
}
|
|
15
22
|
}
|
|
16
23
|
if (filter.filterType === 'date_range') {
|
|
17
24
|
setDateFilter(filter.preset.label);
|
|
@@ -27,6 +34,23 @@ function DashboardFilter({ filter, onChangeFilter, SelectComponent, DateRangePic
|
|
|
27
34
|
}
|
|
28
35
|
}, [filter]);
|
|
29
36
|
if (filter.filterType === 'string') {
|
|
37
|
+
if (filter.stringFilterType === 'multiselect') {
|
|
38
|
+
return ((0, jsx_runtime_1.jsx)(MultiSelectComponent, { label: filter.label, value: filterValue, onChange: (e) => {
|
|
39
|
+
if (e.target.value === '') {
|
|
40
|
+
setFilterValue(null);
|
|
41
|
+
onChangeFilter(filter, "[]");
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
const jsonValue = JSON.parse(e.target.value);
|
|
45
|
+
setFilterValue(jsonValue);
|
|
46
|
+
onChangeFilter(filter, e.target.value);
|
|
47
|
+
}, options: [
|
|
48
|
+
...filter.options.map((elem) => ({
|
|
49
|
+
label: elem[filter.labelField],
|
|
50
|
+
value: elem[filter.field],
|
|
51
|
+
})),
|
|
52
|
+
], width: 200 }));
|
|
53
|
+
}
|
|
30
54
|
return ((0, jsx_runtime_1.jsx)(SelectComponent, { label: filter.label, value: filterValue, onChange: (e) => onChangeFilter(filter, e.target.value), options: [
|
|
31
55
|
...filter.options.map((elem) => ({
|
|
32
56
|
label: elem[filter.labelField],
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { QuillReport } from '../../Dashboard';
|
|
3
3
|
import { QuillTheme } from '../../QuillProvider';
|
|
4
4
|
export type DataLoaderChildProps = {
|
|
5
5
|
isLoading: boolean;
|
|
@@ -27,7 +27,7 @@ export type ChartDataLoaderChildProps = {
|
|
|
27
27
|
export declare const ChartDataLoader: ({ id, children, hideDateRangeFilter, }: {
|
|
28
28
|
id: string;
|
|
29
29
|
hideDateRangeFilter?: boolean | undefined;
|
|
30
|
-
mapColorsToFields?: ((
|
|
30
|
+
mapColorsToFields?: ((_report: QuillReport, _theme: QuillTheme) => ColorMapType) | undefined;
|
|
31
31
|
children: ({ isLoading, error, data, }: ChartDataLoaderChildProps) => JSX.Element;
|
|
32
32
|
}) => JSX.Element;
|
|
33
33
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"DataLoader.d.ts","sourceRoot":"","sources":["../../../../src/components/Dashboard/DataLoader.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAKjD,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,EAAE,EACF,QAAQ,GACT,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,oBAAoB,KAAK,GAAG,CAAC,OAAO,CAAC;CACvE,GAAG,GAAG,CAAC,OAAO,CAgFd;AAED,KAAK,YAAY,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;KACjC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ,CAAC;AAIF,eAAO,MAAM,eAAe;QAKtB,MAAM;;mCAGC,WAAW,UACZ,UAAU,KACf,YAAY;4CAKd,yBAAyB,KAAK,WAAW;MAC1C,WA2FH,CAAC"}
|
|
@@ -8,6 +8,7 @@ const Context_1 = require("../../Context");
|
|
|
8
8
|
const hooks_1 = require("../../hooks");
|
|
9
9
|
const dataFetcher_1 = require("../../utils/dataFetcher");
|
|
10
10
|
const merge_1 = require("../../utils/merge");
|
|
11
|
+
const errorProcessing_1 = require("../../utils/errorProcessing");
|
|
11
12
|
function DataLoader({ id, children, }) {
|
|
12
13
|
const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
|
|
13
14
|
const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
|
|
@@ -49,6 +50,7 @@ function DataLoader({ id, children, }) {
|
|
|
49
50
|
filters: minimalFilters,
|
|
50
51
|
};
|
|
51
52
|
const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
|
|
53
|
+
(0, errorProcessing_1.processFilterErrorList)(resp);
|
|
52
54
|
if (resp && resp.name !== 'error' && !resp.errorMessage) {
|
|
53
55
|
if (resp.compareRows) {
|
|
54
56
|
(0, merge_1.mergeComparisonRange)(resp);
|
|
@@ -128,6 +130,7 @@ const ChartDataLoader = ({ id, children, hideDateRangeFilter = false, }) => {
|
|
|
128
130
|
};
|
|
129
131
|
setError(undefined);
|
|
130
132
|
const resp = await (0, dataFetcher_1.getData)(client, 'itempost', 'omit', hostedBody, cloudBody);
|
|
133
|
+
(0, errorProcessing_1.processFilterErrorList)(resp);
|
|
131
134
|
if (resp && resp.name !== 'error' && !resp.errorMessage) {
|
|
132
135
|
setIsComparison(!!resp.compareRows?.length);
|
|
133
136
|
if (resp.compareRows) {
|