@quillsql/react 2.11.29 → 2.12.0
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 +29 -18
- package/dist/cjs/Chart.d.ts.map +1 -1
- package/dist/cjs/Chart.js +41 -20
- 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 +38 -19
- package/dist/cjs/ReportBuilder.d.ts +3 -3
- package/dist/cjs/ReportBuilder.d.ts.map +1 -1
- package/dist/cjs/ReportBuilder.js +20 -20
- 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/Chart/LineChart.d.ts +2 -1
- package/dist/cjs/components/Chart/LineChart.d.ts.map +1 -1
- package/dist/cjs/components/Chart/LineChart.js +19 -11
- 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 +16 -18
- package/dist/cjs/hooks/useDashboard.d.ts +1 -1
- package/dist/cjs/hooks/useDashboard.d.ts.map +1 -1
- package/dist/cjs/hooks/useDashboard.js +4 -4
- 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/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
- package/dist/cjs/internals/ReportBuilder/PivotModal.js +3 -1
- 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/tableProcessing.d.ts.map +1 -1
- package/dist/cjs/utils/tableProcessing.js +3 -0
- package/dist/cjs/utils/valueFormatter.js +1 -1
- package/dist/esm/Chart.d.ts +29 -18
- package/dist/esm/Chart.d.ts.map +1 -1
- package/dist/esm/Chart.js +41 -20
- 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 +38 -19
- package/dist/esm/ReportBuilder.d.ts +3 -3
- package/dist/esm/ReportBuilder.d.ts.map +1 -1
- package/dist/esm/ReportBuilder.js +20 -20
- 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/Chart/LineChart.d.ts +2 -1
- package/dist/esm/components/Chart/LineChart.d.ts.map +1 -1
- package/dist/esm/components/Chart/LineChart.js +19 -11
- 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 +16 -18
- package/dist/esm/hooks/useDashboard.d.ts +1 -1
- package/dist/esm/hooks/useDashboard.d.ts.map +1 -1
- package/dist/esm/hooks/useDashboard.js +4 -4
- 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/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
- package/dist/esm/internals/ReportBuilder/PivotModal.js +3 -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/tableProcessing.d.ts.map +1 -1
- package/dist/esm/utils/tableProcessing.js +3 -0
- package/dist/esm/utils/valueFormatter.js +1 -1
- package/package.json +1 -1
|
@@ -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,14 @@ 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:
|
|
3059
|
+
yAxisFields: report.pivot && !pivot
|
|
3060
3060
|
? []
|
|
3061
|
-
:
|
|
3062
|
-
columns:
|
|
3061
|
+
: report.yAxisFields,
|
|
3062
|
+
columns: report.columns.filter((col) => {
|
|
3063
3063
|
return columns.find((c) => {
|
|
3064
3064
|
return col.field === c.field;
|
|
3065
3065
|
});
|
|
@@ -3067,6 +3067,6 @@ function ReportBuilder({ initialTableName = '', onSubmitEditReport = (_) => void
|
|
|
3067
3067
|
queryString: activeQuery,
|
|
3068
3068
|
rows: rows,
|
|
3069
3069
|
}
|
|
3070
|
-
: undefined, rows: rows, columns: columns, pivot: pivot, query: activeQuery, showTableFormatOptions: showChartBuilderTableFormatOptions, showDateFieldOptions: isAdminEnabled, showAccessControlOptions: isAdminEnabled, title:
|
|
3070
|
+
: 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
3071
|
}
|
|
3072
3072
|
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,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { type ColorMapType } from '../../Chart';
|
|
3
|
-
export default function LineChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid, hideVerticalCartesianGrid, hideSubsequentXAxisTicks, cartesianGridLineStyle, comparisonLineStyle, }: {
|
|
3
|
+
export default function LineChart({ colors, colorMap, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid, hideVerticalCartesianGrid, hideSubsequentXAxisTicks, cartesianGridLineStyle, comparisonLineStyle, cartesianGridLineColor, }: {
|
|
4
4
|
colors?: string[];
|
|
5
5
|
colorMap?: ColorMapType;
|
|
6
6
|
yAxisFields: any[];
|
|
@@ -21,5 +21,6 @@ export default function LineChart({ colors, colorMap, yAxisFields, data, contain
|
|
|
21
21
|
hideSubsequentXAxisTicks: boolean;
|
|
22
22
|
cartesianGridLineStyle: 'solid' | 'dashed';
|
|
23
23
|
comparisonLineStyle: 'solid' | 'dashed';
|
|
24
|
+
cartesianGridLineColor?: string;
|
|
24
25
|
}): import("react/jsx-runtime").JSX.Element;
|
|
25
26
|
//# sourceMappingURL=LineChart.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,2BAAmC,EACnC,yBAAgC,EAChC,wBAAgC,EAChC,sBAAgC,EAChC,mBAA6B,
|
|
1
|
+
{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Chart/LineChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,MAAM,EACN,QAAa,EACb,WAAW,EACX,IAAI,EACJ,cAAc,EACd,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,UAAU,EACV,iBAAwB,EACxB,SAAiB,EACjB,SAAiB,EACjB,iBAAyB,EACzB,2BAAmC,EACnC,yBAAgC,EAChC,wBAAgC,EAChC,sBAAgC,EAChC,mBAA6B,EAC7B,sBAAsB,GACvB,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,GAAG,CAAC;IAChB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,2BAA2B,EAAE,OAAO,CAAC;IACrC,yBAAyB,EAAE,OAAO,CAAC;IACnC,wBAAwB,EAAE,OAAO,CAAC;IAClC,sBAAsB,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC3C,mBAAmB,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC,2CA8PA"}
|
|
@@ -13,7 +13,7 @@ const ChartTooltip_1 = __importDefault(require("../../components/Chart/ChartTool
|
|
|
13
13
|
const getDomain_1 = __importDefault(require("../../utils/getDomain"));
|
|
14
14
|
const react_1 = require("react");
|
|
15
15
|
const crypto_1 = require("../../utils/crypto");
|
|
16
|
-
function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', comparisonLineStyle = 'solid', }) {
|
|
16
|
+
function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, className, xAxisField, xAxisFormat, theme, comparison, isAnimationActive = true, hideXAxis = false, hideYAxis = false, hideCartesianGrid = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', comparisonLineStyle = 'solid', cartesianGridLineColor, }) {
|
|
17
17
|
const [formattedData, setFormattedData] = (0, react_1.useState)([]);
|
|
18
18
|
(0, react_1.useEffect)(() => {
|
|
19
19
|
if (!data || data.length === 0) {
|
|
@@ -51,28 +51,36 @@ function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, c
|
|
|
51
51
|
}
|
|
52
52
|
// Allows the users to override the color scheme on a per-chart basis.
|
|
53
53
|
const getCustomColor = (index, field, gradient) => {
|
|
54
|
-
let key = index === 0 ? '
|
|
54
|
+
let key = index === 0 ? 'comparison' : 'primary';
|
|
55
55
|
field = field.replace('comparison_', '');
|
|
56
56
|
if (colorMap && colorMap[field]) {
|
|
57
|
-
if (index ===
|
|
57
|
+
if (index === 1 && gradient === 'start')
|
|
58
58
|
key = 'primaryGradientStart';
|
|
59
|
-
if (index ===
|
|
59
|
+
if (index === 1 && gradient === 'stop')
|
|
60
60
|
key = 'primaryGradientStop';
|
|
61
|
-
if (index ===
|
|
61
|
+
if (index === 0 && gradient === 'start')
|
|
62
62
|
key = 'comparisonGradientStart';
|
|
63
|
-
if (index ===
|
|
63
|
+
if (index === 0 && gradient === 'stop')
|
|
64
64
|
key = 'comparisonGradientStop';
|
|
65
65
|
return colorMap[field][key];
|
|
66
66
|
}
|
|
67
67
|
return undefined; // use the default colors from the theme
|
|
68
68
|
};
|
|
69
|
-
|
|
69
|
+
const numComparisons = yAxisFields.reduce((sum, x) => {
|
|
70
|
+
if (x.field?.startsWith('comparison_'))
|
|
71
|
+
return sum + 1;
|
|
72
|
+
return sum;
|
|
73
|
+
}, 0);
|
|
74
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: { ...containerStyle }, className: className, children: (0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: '100%', children: (0, jsx_runtime_1.jsxs)(recharts_1.ComposedChart, { data: formattedData, children: [!hideCartesianGrid && ((0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { horizontal: !hideHorizontalCartesianGrid, vertical: !hideVerticalCartesianGrid, stroke: cartesianGridLineColor ?? '#e5e7eb', strokeDasharray: cartesianGridLineStyle === 'dashed' ? '5 5' : undefined })), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: xAxisField, hide: hideXAxis, tick: { transform: 'translate(0, 6)' }, style: {
|
|
70
75
|
fontSize: '12px',
|
|
71
76
|
fontFamily: theme?.chartLabelFontFamily ||
|
|
72
77
|
theme?.fontFamily ||
|
|
73
78
|
'Inter; Helvetica',
|
|
74
79
|
color: theme?.chartLabelColor || '#666666',
|
|
75
|
-
},
|
|
80
|
+
}, tickLine: false, axisLine: false, minTickGap: 5, tickFormatter: (tick, i) => {
|
|
81
|
+
// Don't display subsequent ticks when hideSubXAxisTicks is true
|
|
82
|
+
if (hideSubsequentXAxisTicks && i !== 0)
|
|
83
|
+
return '';
|
|
76
84
|
return (0, axisFormatter_1.axisFormatter)({
|
|
77
85
|
value: tick,
|
|
78
86
|
field: xAxisField,
|
|
@@ -117,7 +125,7 @@ function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, c
|
|
|
117
125
|
// hash the color stops so they're stable, valid html ids
|
|
118
126
|
const gradientStart = getCustomColor(index, elem.field, 'start') ??
|
|
119
127
|
getCustomColor(index, elem.field) ??
|
|
120
|
-
(0, color_1.selectColor)(elem, colors, index);
|
|
128
|
+
(0, color_1.selectColor)(elem, colors, index - numComparisons);
|
|
121
129
|
const gradientStop = getCustomColor(index, elem.field, 'stop') ?? '#00000000';
|
|
122
130
|
const uniqueId = `gradient_${(0, crypto_1.hashCode)(gradientStart)}_${(0, crypto_1.hashCode)(gradientStop)}`;
|
|
123
131
|
return ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: uniqueId, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: gradientStart, stopOpacity: 0.4 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: gradientStop, stopOpacity: 0 })] }) }, `defs_${uniqueId}_${index}`));
|
|
@@ -125,11 +133,11 @@ function LineChart({ colors, colorMap = {}, yAxisFields, data, containerStyle, c
|
|
|
125
133
|
yAxisFields.map((elem, index) => {
|
|
126
134
|
const gradientStart = (0, crypto_1.hashCode)(getCustomColor(index, elem.field, 'start') ??
|
|
127
135
|
getCustomColor(index, elem.field) ??
|
|
128
|
-
(0, color_1.selectColor)(elem, colors, index));
|
|
136
|
+
(0, color_1.selectColor)(elem, colors, index - numComparisons));
|
|
129
137
|
const gradientStop = (0, crypto_1.hashCode)(getCustomColor(index, elem.field, 'stop') ?? '#00000000');
|
|
130
138
|
const uniqueId = `gradient_${gradientStart}_${gradientStop}`;
|
|
131
139
|
return ((0, jsx_runtime_1.jsx)(recharts_1.Area, { name: elem.label, type: "linear", dataKey: elem.field, stroke: getCustomColor(index, elem.field) ??
|
|
132
|
-
(0, color_1.selectColor)(elem, colors, index), fill: `url(#${uniqueId})`, strokeWidth: 2, dot: false, strokeDasharray: comparison && comparisonLineStyle === 'dashed' && index > 0
|
|
140
|
+
(0, color_1.selectColor)(elem, colors, index - numComparisons), fill: `url(#${uniqueId})`, strokeWidth: 2, dot: false, strokeDasharray: comparison && comparisonLineStyle === 'dashed' && index > 0
|
|
133
141
|
? '5 5'
|
|
134
142
|
: undefined, isAnimationActive: isAnimationActive }, elem.field));
|
|
135
143
|
})] }) }) }));
|
|
@@ -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
|