@quillsql/react 2.12.26 → 2.12.28
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 +17 -2
- package/dist/cjs/Chart.d.ts.map +1 -1
- package/dist/cjs/Chart.js +137 -90
- package/dist/cjs/ChartBuilder.d.ts +3 -3
- package/dist/cjs/ChartBuilder.d.ts.map +1 -1
- package/dist/cjs/ChartBuilder.js +30 -23
- package/dist/cjs/ChartEditor.d.ts.map +1 -1
- package/dist/cjs/ChartEditor.js +66 -26
- package/dist/cjs/Context.d.ts +1 -0
- package/dist/cjs/Context.d.ts.map +1 -1
- package/dist/cjs/Context.js +17 -2
- package/dist/cjs/Dashboard.d.ts +6 -1
- package/dist/cjs/Dashboard.d.ts.map +1 -1
- package/dist/cjs/Dashboard.js +3 -1
- package/dist/cjs/ReportBuilder.d.ts +1 -1
- package/dist/cjs/ReportBuilder.d.ts.map +1 -1
- package/dist/cjs/ReportBuilder.js +12 -10
- package/dist/cjs/SQLEditor.d.ts +10 -1
- package/dist/cjs/SQLEditor.d.ts.map +1 -1
- package/dist/cjs/SQLEditor.js +27 -3
- package/dist/cjs/Table.d.ts +15 -1
- package/dist/cjs/Table.d.ts.map +1 -1
- package/dist/cjs/Table.js +143 -59
- package/dist/cjs/components/Chart/ChartTooltip.d.ts.map +1 -1
- package/dist/cjs/components/Chart/ChartTooltip.js +5 -4
- package/dist/cjs/components/Dashboard/DashboardFilter.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/DashboardFilter.js +1 -1
- package/dist/cjs/components/Dashboard/DataLoader.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/DataLoader.js +52 -15
- package/dist/cjs/components/Dashboard/MetricComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/MetricComponent.js +7 -1
- package/dist/cjs/components/Dashboard/TableComponent.d.ts +16 -2
- package/dist/cjs/components/Dashboard/TableComponent.d.ts.map +1 -1
- package/dist/cjs/components/Dashboard/TableComponent.js +2 -14
- package/dist/cjs/components/QuillTable.d.ts +2 -2
- package/dist/cjs/components/QuillTable.d.ts.map +1 -1
- package/dist/cjs/components/QuillTable.js +7 -5
- package/dist/cjs/components/UiComponents.d.ts +3 -3
- package/dist/cjs/components/UiComponents.d.ts.map +1 -1
- package/dist/cjs/components/UiComponents.js +4 -4
- package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts +16 -1
- package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
- package/dist/cjs/internals/ReportBuilder/PivotModal.js +155 -80
- package/dist/cjs/utils/constants.d.ts +2 -0
- package/dist/cjs/utils/constants.d.ts.map +1 -0
- package/dist/cjs/utils/constants.js +4 -0
- package/dist/cjs/utils/dashboard.d.ts +1 -0
- package/dist/cjs/utils/dashboard.d.ts.map +1 -1
- package/dist/cjs/utils/dashboard.js +46 -97
- package/dist/cjs/utils/dataFetcher.d.ts.map +1 -1
- package/dist/cjs/utils/dataFetcher.js +56 -13
- package/dist/cjs/utils/dates.d.ts +8 -0
- package/dist/cjs/utils/dates.d.ts.map +1 -1
- package/dist/cjs/utils/dates.js +34 -1
- package/dist/cjs/utils/filterProcessing.d.ts +2 -0
- package/dist/cjs/utils/filterProcessing.d.ts.map +1 -1
- package/dist/cjs/utils/filterProcessing.js +129 -1
- package/dist/cjs/utils/logging.d.ts +2 -0
- package/dist/cjs/utils/logging.d.ts.map +1 -0
- package/dist/cjs/utils/logging.js +10 -0
- package/dist/cjs/utils/pivotConstructor.d.ts +6 -0
- package/dist/cjs/utils/pivotConstructor.d.ts.map +1 -0
- package/dist/cjs/utils/pivotConstructor.js +87 -0
- package/dist/cjs/utils/queryConstructor.d.ts +2 -1
- package/dist/cjs/utils/queryConstructor.d.ts.map +1 -1
- package/dist/cjs/utils/queryConstructor.js +46 -11
- package/dist/cjs/utils/tableProcessing.d.ts +22 -0
- package/dist/cjs/utils/tableProcessing.d.ts.map +1 -1
- package/dist/cjs/utils/tableProcessing.js +87 -1
- package/dist/esm/Chart.d.ts +17 -2
- package/dist/esm/Chart.d.ts.map +1 -1
- package/dist/esm/Chart.js +140 -93
- package/dist/esm/ChartBuilder.d.ts +3 -3
- package/dist/esm/ChartBuilder.d.ts.map +1 -1
- package/dist/esm/ChartBuilder.js +30 -23
- package/dist/esm/ChartEditor.d.ts.map +1 -1
- package/dist/esm/ChartEditor.js +66 -26
- package/dist/esm/Context.d.ts +1 -0
- package/dist/esm/Context.d.ts.map +1 -1
- package/dist/esm/Context.js +16 -1
- package/dist/esm/Dashboard.d.ts +6 -1
- package/dist/esm/Dashboard.d.ts.map +1 -1
- package/dist/esm/Dashboard.js +3 -1
- package/dist/esm/ReportBuilder.d.ts +1 -1
- package/dist/esm/ReportBuilder.d.ts.map +1 -1
- package/dist/esm/ReportBuilder.js +13 -11
- package/dist/esm/SQLEditor.d.ts +10 -1
- package/dist/esm/SQLEditor.d.ts.map +1 -1
- package/dist/esm/SQLEditor.js +27 -3
- package/dist/esm/Table.d.ts +15 -1
- package/dist/esm/Table.d.ts.map +1 -1
- package/dist/esm/Table.js +146 -62
- package/dist/esm/components/Chart/ChartTooltip.d.ts.map +1 -1
- package/dist/esm/components/Chart/ChartTooltip.js +5 -4
- package/dist/esm/components/Dashboard/DashboardFilter.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/DashboardFilter.js +1 -1
- package/dist/esm/components/Dashboard/DataLoader.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/DataLoader.js +52 -15
- package/dist/esm/components/Dashboard/MetricComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/MetricComponent.js +7 -1
- package/dist/esm/components/Dashboard/TableComponent.d.ts +16 -2
- package/dist/esm/components/Dashboard/TableComponent.d.ts.map +1 -1
- package/dist/esm/components/Dashboard/TableComponent.js +2 -14
- package/dist/esm/components/QuillTable.d.ts +2 -2
- package/dist/esm/components/QuillTable.d.ts.map +1 -1
- package/dist/esm/components/QuillTable.js +7 -5
- package/dist/esm/components/UiComponents.d.ts +3 -3
- package/dist/esm/components/UiComponents.d.ts.map +1 -1
- package/dist/esm/components/UiComponents.js +4 -4
- package/dist/esm/internals/ReportBuilder/PivotModal.d.ts +16 -1
- package/dist/esm/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
- package/dist/esm/internals/ReportBuilder/PivotModal.js +153 -80
- package/dist/esm/utils/constants.d.ts +2 -0
- package/dist/esm/utils/constants.d.ts.map +1 -0
- package/dist/esm/utils/constants.js +1 -0
- package/dist/esm/utils/dashboard.d.ts +1 -0
- package/dist/esm/utils/dashboard.d.ts.map +1 -1
- package/dist/esm/utils/dashboard.js +45 -97
- package/dist/esm/utils/dataFetcher.d.ts.map +1 -1
- package/dist/esm/utils/dataFetcher.js +56 -13
- package/dist/esm/utils/dates.d.ts +8 -0
- package/dist/esm/utils/dates.d.ts.map +1 -1
- package/dist/esm/utils/dates.js +31 -0
- package/dist/esm/utils/filterProcessing.d.ts +2 -0
- package/dist/esm/utils/filterProcessing.d.ts.map +1 -1
- package/dist/esm/utils/filterProcessing.js +126 -0
- package/dist/esm/utils/logging.d.ts +2 -0
- package/dist/esm/utils/logging.d.ts.map +1 -0
- package/dist/esm/utils/logging.js +6 -0
- package/dist/esm/utils/pivotConstructor.d.ts +6 -0
- package/dist/esm/utils/pivotConstructor.d.ts.map +1 -0
- package/dist/esm/utils/pivotConstructor.js +83 -0
- package/dist/esm/utils/queryConstructor.d.ts +2 -1
- package/dist/esm/utils/queryConstructor.d.ts.map +1 -1
- package/dist/esm/utils/queryConstructor.js +44 -10
- package/dist/esm/utils/tableProcessing.d.ts +22 -0
- package/dist/esm/utils/tableProcessing.d.ts.map +1 -1
- package/dist/esm/utils/tableProcessing.js +85 -1
- package/package.json +1 -1
package/dist/esm/Chart.js
CHANGED
|
@@ -5,7 +5,7 @@ import { useExport } from './hooks/useExport';
|
|
|
5
5
|
import { differenceInHours } from 'date-fns';
|
|
6
6
|
import BarList from './components/Chart/BarList';
|
|
7
7
|
import PieChart from './components/Chart/PieChart';
|
|
8
|
-
import { ClientContext, CustomFieldContext, DashboardContext, DashboardFiltersContext, } from './Context';
|
|
8
|
+
import { ClientContext, CustomFieldContext, DashboardContext, DashboardFiltersContext, ReportFiltersContext, } from './Context';
|
|
9
9
|
import QuillTable from './components/QuillTable';
|
|
10
10
|
import { getData } from './utils/dataFetcher';
|
|
11
11
|
import { DATE_FORMAT_TYPES, valueFormatter } from './utils/valueFormatter';
|
|
@@ -14,13 +14,19 @@ import BarChart from './components/Chart/BarChart';
|
|
|
14
14
|
import { mergeComparisonRange } from './utils/merge';
|
|
15
15
|
import { QuillLoadingSkeleton } from './components/Chart/ChartSkeleton';
|
|
16
16
|
import ChartError from './components/Chart/ChartError';
|
|
17
|
-
import { COMPARISON_OPTIONS } from './DateRangePicker/dateRangePickerUtils';
|
|
17
|
+
import { COMPARISON_OPTIONS, } from './DateRangePicker/dateRangePickerUtils';
|
|
18
18
|
import { quillFormat } from './utils/valueFormatter';
|
|
19
19
|
import useTheme from './hooks/useTheme';
|
|
20
20
|
import { processFilterErrorList } from './utils/errorProcessing';
|
|
21
|
-
import { findAndProcessDateFilter } from './utils/filterProcessing';
|
|
21
|
+
import { findAndProcessDateFilter, processFilterFromBackend, updateFilter, } from './utils/filterProcessing';
|
|
22
22
|
import { cleanDashboardItem } from './utils/dashboard';
|
|
23
|
-
|
|
23
|
+
import { QuillFilterContainerComponent, } from './components/UiComponents';
|
|
24
|
+
import { DashboardFilter } from './components/Dashboard/DashboardFilter';
|
|
25
|
+
import { QuillSelectComponent } from './components/QuillSelect';
|
|
26
|
+
import { QuillMultiSelectComponent } from './components/QuillMultiSelect';
|
|
27
|
+
import { QuillDateRangePicker, } from './DateRangePicker/QuillDateRangePicker';
|
|
28
|
+
import { MAX_COLUMN_ROWS_LIMIT } from './utils/constants';
|
|
29
|
+
const MAX_ROWS_FOR_GENERIC_TABLE = 500;
|
|
24
30
|
// @ts-ignore
|
|
25
31
|
function sumByKey(arr, key) {
|
|
26
32
|
// @ts-ignore
|
|
@@ -148,17 +154,11 @@ const Chart = (props) => {
|
|
|
148
154
|
? theme.chartColors
|
|
149
155
|
: ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
|
|
150
156
|
}, [data.colors]);
|
|
151
|
-
return (_jsx(ChartUpdater, { reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, colors: chartColors, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, hideHorizontalCartesianGrid: data.hideHorizontalCartesianGrid, hideVerticalCartesianGrid: data.hideVerticalCartesianGrid, hideSubsequentXAxisTicks: data.hideSubsequentXAxisTicks, hideDateRangeFilter: data.hideDateRangeFilter, cartesianGridLineStyle: data.cartesianGridLineStyle, cartesianGridLineColor: data.cartesianGridLineColor, comparisonLineStyle: data.comparisonLineStyle, mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields, LoadingComponent: data.LoadingComponent, filters: data.filters, onClickChartElement: props.onClickChartElement }));
|
|
157
|
+
return (_jsx(ChartUpdater, { reportId: data.reportId, className: data.className, containerStyle: data.containerStyle, colors: chartColors, isAnimationActive: data.isAnimationActive, hideXAxis: data.hideXAxis, hideYAxis: data.hideYAxis, hideCartesianGrid: data.hideCartesianGrid, hideHorizontalCartesianGrid: data.hideHorizontalCartesianGrid, hideVerticalCartesianGrid: data.hideVerticalCartesianGrid, hideSubsequentXAxisTicks: data.hideSubsequentXAxisTicks, hideDateRangeFilter: data.hideDateRangeFilter, cartesianGridLineStyle: data.cartesianGridLineStyle, cartesianGridLineColor: data.cartesianGridLineColor, comparisonLineStyle: data.comparisonLineStyle, mapColorsToFields: data.mapColorsToFields ?? fallbackMapColorsToFields, LoadingComponent: data.LoadingComponent, filters: data.filters, onClickChartElement: props.onClickChartElement, SelectComponent: data.SelectComponent, MultiSelectComponent: data.MultiSelectComponent, DateRangePickerComponent: data.DateRangePickerComponent, FilterContainerComponent: data.FilterContainerComponent, hideFilters: data.hideFilters }));
|
|
152
158
|
};
|
|
153
|
-
const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, hideDateRangeFilter = false, mapColorsToFields, LoadingComponent = QuillLoadingSkeleton, filters, onClickChartElement, }) => {
|
|
159
|
+
const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimationActive, hideXAxis, hideYAxis, hideCartesianGrid, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, hideDateRangeFilter = false, hideFilters = false, mapColorsToFields, LoadingComponent = QuillLoadingSkeleton, SelectComponent = QuillSelectComponent, MultiSelectComponent = QuillMultiSelectComponent, DateRangePickerComponent = QuillDateRangePicker, FilterContainerComponent = QuillFilterContainerComponent, filters, onClickChartElement, }) => {
|
|
154
160
|
const { dispatch, dashboard } = useContext(DashboardContext);
|
|
155
|
-
const {
|
|
156
|
-
const specificDashboardFilter = useMemo(() => {
|
|
157
|
-
return dashboardFilters.filter((f) => dashboard &&
|
|
158
|
-
dashboard[reportId] &&
|
|
159
|
-
f &&
|
|
160
|
-
f.dashboardName === dashboard[reportId].dashboardName);
|
|
161
|
-
}, [dashboardFilters, dashboard]);
|
|
161
|
+
const { reportFiltersDispatch, reportFilters } = useContext(ReportFiltersContext);
|
|
162
162
|
const [initialLoad, setInitialLoad] = useState(true);
|
|
163
163
|
const [loading, setLoading] = useState(true);
|
|
164
164
|
const [paginating, setPaginating] = useState(false);
|
|
@@ -171,13 +171,17 @@ const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimation
|
|
|
171
171
|
page: 0,
|
|
172
172
|
});
|
|
173
173
|
const [report, setReport] = useState(undefined);
|
|
174
|
+
const [dateFilter, setDateFilter] = useState(undefined);
|
|
175
|
+
const [chartFilters, setChartFilters] = useState([]);
|
|
174
176
|
const [previousPage, setPreviousPage] = useState(0);
|
|
177
|
+
const [filterUpdateIndex, setFilterUpdateIndex] = useState(-1);
|
|
178
|
+
const [useReport, setUseReport] = useState(true);
|
|
175
179
|
const theme = useTheme();
|
|
176
180
|
const onPageChange = (page) => {
|
|
177
181
|
if ((previousPage < page.currentPage &&
|
|
178
|
-
(page.currentPage * page.rowsPerPage) %
|
|
182
|
+
(page.currentPage * page.rowsPerPage) % MAX_COLUMN_ROWS_LIMIT === 0) ||
|
|
179
183
|
(previousPage > page.currentPage &&
|
|
180
|
-
(previousPage * page.rowsPerPage) %
|
|
184
|
+
(previousPage * page.rowsPerPage) % MAX_COLUMN_ROWS_LIMIT === 0)) {
|
|
181
185
|
getChartDataPaginate({ page });
|
|
182
186
|
}
|
|
183
187
|
setPreviousPage(page.currentPage);
|
|
@@ -188,10 +192,6 @@ const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimation
|
|
|
188
192
|
};
|
|
189
193
|
const getChartDataPaginate = async (processing) => {
|
|
190
194
|
setPaginating(true);
|
|
191
|
-
if (!didFiltersChange(dashboard[reportId], specificDashboardFilter)) {
|
|
192
|
-
setPaginating(false);
|
|
193
|
-
return;
|
|
194
|
-
}
|
|
195
195
|
try {
|
|
196
196
|
let updatedProcessing = { ...additionalProcessing, ...processing };
|
|
197
197
|
if (processing && processing.sort) {
|
|
@@ -202,8 +202,8 @@ const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimation
|
|
|
202
202
|
}
|
|
203
203
|
// Remove extra fields on each filter so we don't confuse the backend.
|
|
204
204
|
const allowDateRange = !hideDateRangeFilter;
|
|
205
|
-
const minimalFilters = Object.values(
|
|
206
|
-
? Object.values(
|
|
205
|
+
const minimalFilters = Object.values(dashboard.filters).length
|
|
206
|
+
? Object.values(chartFilters)
|
|
207
207
|
.filter((f) => allowDateRange || f.filterType !== 'date_range')
|
|
208
208
|
.map((filter) => {
|
|
209
209
|
const newFilter = { ...filter };
|
|
@@ -249,11 +249,6 @@ const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimation
|
|
|
249
249
|
};
|
|
250
250
|
const cleanedReport = await cleanDashboardItem(dashboardItem, filters);
|
|
251
251
|
setReport(cleanedReport);
|
|
252
|
-
dispatch({
|
|
253
|
-
type: 'UPDATE_DASHBOARD_ITEM',
|
|
254
|
-
id: reportId,
|
|
255
|
-
data: cleanedReport,
|
|
256
|
-
});
|
|
257
252
|
if (mapColorsToFields) {
|
|
258
253
|
setColorMap(mapColorsToFields(cleanedReport, theme));
|
|
259
254
|
}
|
|
@@ -271,99 +266,142 @@ const ChartUpdater = ({ colors, reportId, className, containerStyle, isAnimation
|
|
|
271
266
|
setPaginating(false);
|
|
272
267
|
}
|
|
273
268
|
};
|
|
274
|
-
const getChartData = async (
|
|
275
|
-
setLoading(true);
|
|
276
|
-
if (!didFiltersChange(dashboard[reportId], specificDashboardFilter)) {
|
|
277
|
-
setLoading(false);
|
|
278
|
-
return;
|
|
279
|
-
}
|
|
269
|
+
const getChartData = async (useReportTask = true, reportFilterInfo) => {
|
|
280
270
|
try {
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
if (!updatedProcessing.page) {
|
|
284
|
-
updatedProcessing.page = {};
|
|
285
|
-
}
|
|
286
|
-
updatedProcessing.page.currentPage = 0;
|
|
271
|
+
if (filterUpdateIndex === reportFilterInfo.updateIndex) {
|
|
272
|
+
return;
|
|
287
273
|
}
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
.map((filter) => {
|
|
294
|
-
const newFilter = { ...filter };
|
|
295
|
-
if (newFilter.filterType === 'date_range') {
|
|
296
|
-
delete newFilter['field'];
|
|
297
|
-
delete newFilter['options'];
|
|
298
|
-
delete newFilter['selectedValue'];
|
|
299
|
-
}
|
|
300
|
-
return newFilter;
|
|
301
|
-
})
|
|
302
|
-
: [];
|
|
303
|
-
if (filters) {
|
|
304
|
-
minimalFilters.push(...filters);
|
|
274
|
+
const filters = reportFilterInfo.filters;
|
|
275
|
+
setLoading(true);
|
|
276
|
+
if (!client.databaseType ||
|
|
277
|
+
client.databaseType.toLowerCase() !== 'postgresql') {
|
|
278
|
+
useReportTask = false;
|
|
305
279
|
}
|
|
306
280
|
const hostedBody = {
|
|
307
281
|
metadata: {
|
|
282
|
+
reportId,
|
|
308
283
|
dashboardItemId: reportId,
|
|
309
284
|
orgId: client.customerId || '*',
|
|
310
285
|
clientId: client.publicKey,
|
|
311
|
-
task: 'item',
|
|
312
|
-
|
|
313
|
-
|
|
286
|
+
task: useReportTask ? 'report' : 'item',
|
|
287
|
+
getDefaultDashboardFilters: filters ? false : true,
|
|
288
|
+
databaseType: client?.databaseType,
|
|
314
289
|
customFields,
|
|
315
|
-
|
|
316
|
-
paginateTable: true,
|
|
290
|
+
filters,
|
|
317
291
|
},
|
|
318
292
|
};
|
|
319
293
|
const cloudBody = {
|
|
320
294
|
id: reportId,
|
|
321
|
-
filters: minimalFilters.filter((f) => f.dashboardName === dashboard[reportId].dashboardName),
|
|
322
295
|
};
|
|
323
|
-
|
|
324
|
-
const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
|
|
296
|
+
const resp = await getData(client, 'itempost', 'same-origin', hostedBody, cloudBody);
|
|
325
297
|
processFilterErrorList(resp);
|
|
326
298
|
if (resp && resp.name !== 'error' && !resp.errorMessage) {
|
|
327
299
|
setIsComparison(!!resp.compareRows?.length);
|
|
328
300
|
if (resp.compareRows) {
|
|
329
301
|
mergeComparisonRange(resp);
|
|
330
302
|
}
|
|
331
|
-
const
|
|
332
|
-
...resp,
|
|
333
|
-
filtersApplied: minimalFilters.filter((f) => f.dashboardName === dashboard[reportId].dashboardName),
|
|
334
|
-
};
|
|
335
|
-
const cleanedReport = await cleanDashboardItem(dashboardItem, filters);
|
|
303
|
+
const cleanedReport = await cleanDashboardItem(resp, filters ? filters : resp.filters);
|
|
336
304
|
if (cleanedReport.chartType === 'table' && cleanedReport.pivot) {
|
|
337
305
|
cleanedReport.columns = cleanedReport.yAxisFields;
|
|
338
306
|
}
|
|
339
307
|
setReport(cleanedReport);
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
308
|
+
let filterArray = filters;
|
|
309
|
+
// THIS SHOULD ONLY BE UNDEFINED ON INITIAL LOAD
|
|
310
|
+
if (!filterArray) {
|
|
311
|
+
filterArray = resp.filters
|
|
312
|
+
? resp.filters.map((filter) => {
|
|
313
|
+
return processFilterFromBackend(filter, resp.rows);
|
|
314
|
+
})
|
|
315
|
+
: [];
|
|
316
|
+
reportFiltersDispatch({
|
|
317
|
+
type: 'UPDATE_REPORT_FILTER',
|
|
318
|
+
id: reportId,
|
|
319
|
+
data: {
|
|
320
|
+
filters: filterArray,
|
|
321
|
+
updateIndex: reportFilterInfo.updateIndex,
|
|
322
|
+
},
|
|
323
|
+
});
|
|
324
|
+
}
|
|
325
|
+
const dateFilter = filterArray.find((filter) => {
|
|
326
|
+
return filter.filterType === 'date_range';
|
|
344
327
|
});
|
|
328
|
+
setFilterUpdateIndex(reportFilterInfo.updateIndex);
|
|
329
|
+
setDateFilter(dateFilter);
|
|
330
|
+
setChartFilters(filterArray);
|
|
345
331
|
if (mapColorsToFields) {
|
|
346
|
-
setColorMap(mapColorsToFields(
|
|
332
|
+
setColorMap(mapColorsToFields(resp, theme));
|
|
347
333
|
}
|
|
348
334
|
}
|
|
349
335
|
else {
|
|
350
336
|
setError(resp?.errorMessage);
|
|
351
337
|
}
|
|
352
|
-
setAdditionProcessing(updatedProcessing);
|
|
353
338
|
setLoading(false);
|
|
354
339
|
}
|
|
355
340
|
catch (e) {
|
|
356
|
-
|
|
357
|
-
|
|
341
|
+
if (useReportTask) {
|
|
342
|
+
getChartData(false, reportFilterInfo);
|
|
343
|
+
}
|
|
344
|
+
else {
|
|
345
|
+
console.log('Error fetching chart: ', e);
|
|
346
|
+
setLoading(false);
|
|
347
|
+
}
|
|
358
348
|
}
|
|
359
349
|
};
|
|
360
350
|
useEffect(() => {
|
|
351
|
+
// IF WE HAVE THE DATA IN DASHBOARD CONTEXT AND IT IS THE INITIAL LAOD DON'T FETCH DATA
|
|
352
|
+
if (initialLoad && dashboard[reportId]) {
|
|
353
|
+
setInitialLoad(false);
|
|
354
|
+
return;
|
|
355
|
+
}
|
|
361
356
|
setInitialLoad(false);
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
357
|
+
let parsedReportFilters = reportFilters[reportId]
|
|
358
|
+
? reportFilters[reportId]
|
|
359
|
+
: { updateIndex: 0 };
|
|
360
|
+
getChartData(true, parsedReportFilters);
|
|
361
|
+
}, [client.customerId, reportId, reportFilters[reportId]?.updateIndex]);
|
|
362
|
+
useEffect(() => {
|
|
363
|
+
if (!dashboard || !dashboard[reportId]) {
|
|
364
|
+
return;
|
|
365
|
+
}
|
|
366
|
+
setInitialLoad(false);
|
|
367
|
+
setLoading(false);
|
|
368
|
+
setReport(dashboard[reportId]);
|
|
369
|
+
setChartFilters(dashboard[reportId].filtersApplied);
|
|
370
|
+
const dateFilter = dashboard[reportId].filtersApplied.find((filter) => {
|
|
371
|
+
return filter.filterType === 'date_range';
|
|
372
|
+
});
|
|
373
|
+
setDateFilter(dateFilter);
|
|
374
|
+
}, []);
|
|
375
|
+
return (_jsxs("div", { children: [!hideFilters && (_jsx("div", { style: {
|
|
376
|
+
display: 'flex',
|
|
377
|
+
boxSizing: 'content-box',
|
|
378
|
+
flexDirection: 'row',
|
|
379
|
+
alignItems: 'center',
|
|
380
|
+
}, children: _jsx(FilterContainerComponent, { children: chartFilters.map((filter, index) => (_jsx(DashboardFilter, { filter: filter, onChangeFilter: (filter, value = null, comparison = null) => {
|
|
381
|
+
const updatedFilters = chartFilters.map((f) => {
|
|
382
|
+
if (f.field === filter.field ||
|
|
383
|
+
(f.filterType === 'date_range' &&
|
|
384
|
+
filter.filterType === 'date_range')) {
|
|
385
|
+
return updateFilter(f, value, comparison);
|
|
386
|
+
}
|
|
387
|
+
return f;
|
|
388
|
+
});
|
|
389
|
+
setChartFilters(updatedFilters);
|
|
390
|
+
getChartData(true, {
|
|
391
|
+
filters: updatedFilters,
|
|
392
|
+
updateIndex: filterUpdateIndex + 1,
|
|
393
|
+
});
|
|
394
|
+
reportFiltersDispatch({
|
|
395
|
+
type: 'UPDATE_REPORT_FILTER',
|
|
396
|
+
id: reportId,
|
|
397
|
+
data: {
|
|
398
|
+
filters: updatedFilters,
|
|
399
|
+
updateIndex: filterUpdateIndex + 1,
|
|
400
|
+
},
|
|
401
|
+
});
|
|
402
|
+
}, theme: theme, SelectComponent: SelectComponent, MultiSelectComponent: MultiSelectComponent, DateRangePickerComponent: DateRangePickerComponent }, index))) }) })), _jsx(ChartDisplay, { config: report, reportId: reportId, colors: colors, className: className, containerStyle: containerStyle, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle, cartesianGridLineColor: cartesianGridLineColor, hideDateRangeFilter: hideDateRangeFilter, comparisonLineStyle: comparisonLineStyle, isAnimationActive: isAnimationActive, isComparison: isComparison, loading: loading || initialLoad, paginating: paginating, error: error, colorMap: colorMap, LoadingComponent: LoadingComponent, onPageChange: onPageChange, onSortChange: onSortChange, onClickChartElement: onClickChartElement, initialDateFilter: dateFilter })] }));
|
|
365
403
|
};
|
|
366
|
-
export const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading = false, paginating = false, error = undefined, isComparison = false, colorMap, LoadingComponent = QuillLoadingSkeleton, onPageChange, onSortChange, onClickChartElement, dateBucket, overrideTheme, }) => {
|
|
404
|
+
export const ChartDisplay = ({ reportId, config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading = false, paginating = false, error = undefined, isComparison = false, colorMap, LoadingComponent = QuillLoadingSkeleton, onPageChange, onSortChange, onClickChartElement, dateBucket, overrideTheme, initialDateFilter, }) => {
|
|
367
405
|
const { dashboardFilters } = useContext(DashboardFiltersContext);
|
|
368
406
|
const specificDashboardFilter = useMemo(() => {
|
|
369
407
|
if (!dashboardFilters) {
|
|
@@ -381,17 +419,25 @@ export const ChartDisplay = ({ reportId, config, colors, className, containerSty
|
|
|
381
419
|
: ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
|
|
382
420
|
}, [colors]);
|
|
383
421
|
const rows = config?.pivotRows ?? config?.rows ?? [];
|
|
384
|
-
const
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
422
|
+
const getDateFilter = () => {
|
|
423
|
+
if (!hideDateRangeFilter) {
|
|
424
|
+
return findAndProcessDateFilter(Object.values(specificDashboardFilter));
|
|
425
|
+
}
|
|
426
|
+
return undefined;
|
|
427
|
+
};
|
|
428
|
+
const [dateFilter, setDateFilter] = useState(initialDateFilter ?? getDateFilter());
|
|
429
|
+
const getYAxisFields = (curDateFilter) => {
|
|
430
|
+
if (config &&
|
|
431
|
+
config.pivot &&
|
|
432
|
+
config.pivotColumns &&
|
|
433
|
+
config.pivot.columnField) {
|
|
388
434
|
return (config?.pivotColumns
|
|
389
435
|
.slice(1)
|
|
390
436
|
.map((column) => {
|
|
391
437
|
return { ...column, format: config?.yAxisFields[0].format };
|
|
392
438
|
}) ?? []);
|
|
393
439
|
}
|
|
394
|
-
else if (config && config.pivot) {
|
|
440
|
+
else if (config && config.pivot && config.pivotColumns) {
|
|
395
441
|
return (config?.pivotColumns
|
|
396
442
|
.slice(1)
|
|
397
443
|
.map((column) => {
|
|
@@ -403,8 +449,8 @@ export const ChartDisplay = ({ reportId, config, colors, className, containerSty
|
|
|
403
449
|
}) ?? []);
|
|
404
450
|
}
|
|
405
451
|
else {
|
|
406
|
-
if (
|
|
407
|
-
|
|
452
|
+
if (curDateFilter?.comparison &&
|
|
453
|
+
curDateFilter.comparisonRange.value !== 'NO_COMPARISON') {
|
|
408
454
|
const comparisonYAxisFields = config?.yAxisFields?.map((field) => {
|
|
409
455
|
return {
|
|
410
456
|
...field,
|
|
@@ -421,10 +467,11 @@ export const ChartDisplay = ({ reportId, config, colors, className, containerSty
|
|
|
421
467
|
return config?.pivotColumns ?? config?.yAxisFields ?? [];
|
|
422
468
|
}
|
|
423
469
|
};
|
|
424
|
-
const [yAxisFields, setYAxisFields] = useState(getYAxisFields());
|
|
470
|
+
const [yAxisFields, setYAxisFields] = useState(getYAxisFields(dateFilter ?? getDateFilter()));
|
|
425
471
|
useEffect(() => {
|
|
426
|
-
setYAxisFields(getYAxisFields());
|
|
427
|
-
|
|
472
|
+
setYAxisFields(getYAxisFields(initialDateFilter ?? getDateFilter()));
|
|
473
|
+
setDateFilter(initialDateFilter ?? getDateFilter());
|
|
474
|
+
}, [config, specificDashboardFilter, initialDateFilter]);
|
|
428
475
|
if (error) {
|
|
429
476
|
return _jsx(ChartError, { className: className, containerStyle: containerStyle });
|
|
430
477
|
}
|
|
@@ -432,8 +479,8 @@ export const ChartDisplay = ({ reportId, config, colors, className, containerSty
|
|
|
432
479
|
!config.pivot &&
|
|
433
480
|
config?.chartType !== 'metric' &&
|
|
434
481
|
config?.chartType !== 'table' &&
|
|
435
|
-
|
|
436
|
-
|
|
482
|
+
(config.rowCount > MAX_ROWS_FOR_GENERIC_TABLE ||
|
|
483
|
+
(rows && rows.length > MAX_ROWS_FOR_GENERIC_TABLE))) {
|
|
437
484
|
return (_jsx(ChartError, { className: className, containerStyle: containerStyle, label: `Charts can only display ${MAX_ROWS_FOR_GENERIC_TABLE} rows. Please add a pivot or modify the query.` }));
|
|
438
485
|
}
|
|
439
486
|
else if (!config || loading) {
|
|
@@ -490,7 +537,7 @@ export const ChartDisplay = ({ reportId, config, colors, className, containerSty
|
|
|
490
537
|
numberOfRows = parseInt(config.compareRows[0].count);
|
|
491
538
|
}
|
|
492
539
|
}
|
|
493
|
-
return (_jsx(QuillTable, { rows: formattedRows ?? [],
|
|
540
|
+
return (_jsx(QuillTable, { rows: formattedRows ?? [], rowCount: numberOfRows, columns: columns ?? yAxisFields, currentPage: config.page, sort: config.sort, rowsPerPage: config?.rowsPerPage || 10, containerStyle: {
|
|
494
541
|
width: containerStyle?.width || '100%',
|
|
495
542
|
height: containerStyle?.height || '400px',
|
|
496
543
|
...containerStyle,
|
|
@@ -110,7 +110,7 @@ export interface ChartBuilderProps {
|
|
|
110
110
|
field: string;
|
|
111
111
|
direction: string;
|
|
112
112
|
}) => void;
|
|
113
|
-
|
|
113
|
+
rowCount?: number;
|
|
114
114
|
}) => JSX.Element;
|
|
115
115
|
/**
|
|
116
116
|
* A component that displays error messages.
|
|
@@ -257,7 +257,7 @@ export interface ChartBuilderProps {
|
|
|
257
257
|
direction: string;
|
|
258
258
|
}) => void;
|
|
259
259
|
/** A number used to determine the number of pages in a table for SQL pagination */
|
|
260
|
-
|
|
260
|
+
rowCount?: number;
|
|
261
261
|
/** Loading prop used by the table component */
|
|
262
262
|
isLoading?: boolean;
|
|
263
263
|
/** A callback function triggered when a chart element is clicked */
|
|
@@ -313,7 +313,7 @@ export declare function ChartBuilderWithModal(props: ChartBuilderProps): import(
|
|
|
313
313
|
* ### Chart Builder API
|
|
314
314
|
* @see https://docs.quillsql.com/components/chart-builder
|
|
315
315
|
*/
|
|
316
|
-
export default function ChartBuilder({ TextInputComponent, SelectComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, DeleteButtonComponent, TextComponent, PopoverComponent, CardComponent, TableComponent, ModalComponent, LoadingComponent, ErrorMessageComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, FormContainer, isOpen, isHorizontalView, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, showDashboardDropdown, onAddToDashboardComplete, onDelete, report, recommendedPivots: rp, createdPivots: cp, destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton, hideSubmitButton, hideDateRangeFilter, initialUniqueValues, pivotRecommendationsEnabled, onSortChange, onPageChange,
|
|
316
|
+
export default function ChartBuilder({ TextInputComponent, SelectComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, DeleteButtonComponent, TextComponent, PopoverComponent, CardComponent, TableComponent, ModalComponent, LoadingComponent, ErrorMessageComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, FormContainer, isOpen, isHorizontalView, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, showDashboardDropdown, onAddToDashboardComplete, onDelete, report, recommendedPivots: rp, createdPivots: cp, destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton, hideSubmitButton, hideDateRangeFilter, initialUniqueValues, pivotRecommendationsEnabled, onSortChange, onPageChange, rowCount, isLoading, isComparison, onClickChartElement, }: ChartBuilderProps): import("react/jsx-runtime").JSX.Element | null;
|
|
317
317
|
export declare function DashboardFilterModal({ isOpen, setIsOpen, issues, ModalComponent, ButtonComponent, }: {
|
|
318
318
|
isOpen: boolean;
|
|
319
319
|
setIsOpen: (e: boolean) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartBuilder.d.ts","sourceRoot":"","sources":["../../src/ChartBuilder.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAOZ,SAAS,EACV,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ChartBuilder.d.ts","sourceRoot":"","sources":["../../src/ChartBuilder.tsx"],"names":[],"mappings":"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"}
|
package/dist/esm/ChartBuilder.js
CHANGED
|
@@ -15,6 +15,7 @@ import { quillFormat } from './utils/valueFormatter';
|
|
|
15
15
|
import { convertColumnInfoToColumnInternal, convertFieldTypeToJSType, } from './utils/columnProcessing';
|
|
16
16
|
import { createTableNameToTableAliasMap, getColumnsByTableFromASTAndSchema, getSelectFromAST, } from './utils/astProcessing';
|
|
17
17
|
import { getSchemaInfoWithCustomFields } from './utils/schema';
|
|
18
|
+
import { getDateBucketFromRange } from './utils/dates';
|
|
18
19
|
const CHART_TYPES = ['column', 'line', 'table', 'metric', 'bar', 'pie'];
|
|
19
20
|
const POSTGRES_DATE_TYPES = [
|
|
20
21
|
'timestamp',
|
|
@@ -235,7 +236,7 @@ export function ChartBuilderWithModal(props) {
|
|
|
235
236
|
* ### Chart Builder API
|
|
236
237
|
* @see https://docs.quillsql.com/components/chart-builder
|
|
237
238
|
*/
|
|
238
|
-
export default function ChartBuilder({ TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, LabelComponent = MemoizedLabel, DeleteButtonComponent = MemoizedDeleteButton, TextComponent = MemoizedText, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, TableComponent = QuillTableComponent, ModalComponent, LoadingComponent = QuillLoadingComponent, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, FormContainer = QuillChartBuilderFormContainer, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, report = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, initialUniqueValues, pivotRecommendationsEnabled = true, onSortChange, onPageChange,
|
|
239
|
+
export default function ChartBuilder({ TextInputComponent = QuillTextInput, SelectComponent = QuillSelectComponent, ButtonComponent = MemoizedButton, SecondaryButtonComponent = MemoizedSecondaryButton, HeaderComponent = MemoizedHeader, SubHeaderComponent = MemoizedSubHeader, LabelComponent = MemoizedLabel, DeleteButtonComponent = MemoizedDeleteButton, TextComponent = MemoizedText, PopoverComponent = MemoizedPopover, CardComponent = QuillCard, TableComponent = QuillTableComponent, ModalComponent, LoadingComponent = QuillLoadingComponent, ErrorMessageComponent = QuillErrorMessageComponent, ChartBuilderInputRowContainer = QuillChartBuilderInputRowContainer, ChartBuilderInputColumnContainer = QuillChartBuilderInputColumnContainer, PivotRowContainer = QuillPivotRowContainer, PivotColumnContainer = QuillPivotColumnContainer, FormContainer = QuillChartBuilderFormContainer, isOpen, isHorizontalView = true, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, showDashboardDropdown = true, onAddToDashboardComplete, onDelete, report = undefined, recommendedPivots: rp = [], createdPivots: cp = [], destinationDashboard, dateColumn, buttonLabel, organizationName, pivotData, hideDeleteButton = false, hideSubmitButton = false, hideDateRangeFilter = false, initialUniqueValues, pivotRecommendationsEnabled = true, onSortChange, onPageChange, rowCount, isLoading, isComparison, onClickChartElement, }) {
|
|
239
240
|
const dateRange = dr;
|
|
240
241
|
const [client] = useContext(ClientContext);
|
|
241
242
|
const [theme] = useContext(ThemeContext);
|
|
@@ -336,6 +337,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
336
337
|
const [dashboardOptions, setDashboardOptions] = useState([]);
|
|
337
338
|
const [defaultDashboardName, setDefaultDashboardName] = useState(destinationDashboard || report?.dashboardName || '');
|
|
338
339
|
const { dashboardFilters } = useContext(DashboardFiltersContext);
|
|
340
|
+
const [chartRows, setChartRows] = useState(rows);
|
|
339
341
|
const specificDashboardFilter = useMemo(() => {
|
|
340
342
|
return dashboardFilters.filter((f) => f && defaultDashboardName === f.dashboardName);
|
|
341
343
|
}, [dashboardFilters]);
|
|
@@ -548,26 +550,29 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
548
550
|
}
|
|
549
551
|
getFormData();
|
|
550
552
|
}, []);
|
|
551
|
-
const selectedPivotTable =
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
553
|
+
const [selectedPivotTable, setSelectedPivotTable] = useState(pivotData || undefined);
|
|
554
|
+
const fetchPivotData = async (pivot, uniqueValues, overrideDateRange) => {
|
|
555
|
+
if (pivot && rows) {
|
|
556
|
+
setInitialLoad(false);
|
|
557
|
+
const dateFilter = report
|
|
558
|
+
? report.filtersApplied.find((filter) => {
|
|
559
|
+
return filter.filterType === 'date_range';
|
|
560
|
+
})
|
|
561
|
+
: undefined;
|
|
562
|
+
let dateBucket = undefined;
|
|
563
|
+
if (overrideDateRange) {
|
|
564
|
+
dateBucket = getDateBucketFromRange(overrideDateRange);
|
|
563
565
|
}
|
|
566
|
+
setSelectedPivotTable(await generatePivotTable(pivot, rows, overrideDateRange ?? dateRange, isComparison ?? false, -1, dateFilter ? dateFilter.comparisonRange : undefined, dateBucket, report, client, uniqueValues));
|
|
564
567
|
}
|
|
565
568
|
else {
|
|
566
|
-
|
|
569
|
+
setSelectedPivotTable(undefined);
|
|
567
570
|
}
|
|
568
|
-
}
|
|
571
|
+
};
|
|
569
572
|
const formattedRows = useMemo(() => {
|
|
570
|
-
if (selectedPivotTable &&
|
|
573
|
+
if (selectedPivotTable &&
|
|
574
|
+
selectedPivotTable.columns &&
|
|
575
|
+
formData.chartType === 'table') {
|
|
571
576
|
const columns = selectedPivotTable.columns;
|
|
572
577
|
columns.forEach((col, index) => {
|
|
573
578
|
// ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
|
|
@@ -687,7 +692,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
687
692
|
setFormData({ ...formData, [fieldName]: value });
|
|
688
693
|
}
|
|
689
694
|
};
|
|
690
|
-
const handleAddPivot = (pivot) => {
|
|
695
|
+
const handleAddPivot = (pivot, uniqueValues, dateRange) => {
|
|
691
696
|
const newPivotFormData = pivotFormData(pivot);
|
|
692
697
|
// Only keep the old chart type if the shapes of the pivots are the same
|
|
693
698
|
// since the valid chart types for some pivots might have changed (eg. going
|
|
@@ -702,6 +707,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
702
707
|
...newPivotFormData,
|
|
703
708
|
...(keepOldChartType && { chartType: formData.chartType }),
|
|
704
709
|
}));
|
|
710
|
+
fetchPivotData(pivot, uniqueValues, dateRange);
|
|
705
711
|
};
|
|
706
712
|
const handleDeletePivot = () => {
|
|
707
713
|
if (!formData.pivot) {
|
|
@@ -712,6 +718,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
712
718
|
dashboardName: formData.dashboardName,
|
|
713
719
|
pivot: null,
|
|
714
720
|
});
|
|
721
|
+
setSelectedPivotTable(undefined);
|
|
715
722
|
};
|
|
716
723
|
const handleAddField = (fieldName) => {
|
|
717
724
|
if (fieldName === 'columns') {
|
|
@@ -930,7 +937,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
930
937
|
}, children: [((!isHorizontalView && windowWidth >= 1200) ||
|
|
931
938
|
formData.chartType !== 'table') && (_jsx(Chart, { colors: theme.chartColors, config: {
|
|
932
939
|
...formData,
|
|
933
|
-
rows:
|
|
940
|
+
rows: chartRows,
|
|
934
941
|
pivotRows: selectedPivotTable?.rows || undefined,
|
|
935
942
|
pivotColumns: selectedPivotTable?.columns || undefined,
|
|
936
943
|
}, hideDateRangeFilter: hideDateRangeFilter, containerStyle: {
|
|
@@ -954,13 +961,13 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
954
961
|
onPageChange && onPageChange(page);
|
|
955
962
|
}, onSortChange: (sort) => {
|
|
956
963
|
onSortChange && onSortChange(sort);
|
|
957
|
-
},
|
|
964
|
+
}, rowCount: rowCount, isLoading: isLoading })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
|
|
958
965
|
? selectedPivotTable.columns
|
|
959
966
|
: formData.columns, onPageChange: (page) => {
|
|
960
967
|
onPageChange && onPageChange(page);
|
|
961
968
|
}, onSortChange: (sort) => {
|
|
962
969
|
onSortChange && onSortChange(sort);
|
|
963
|
-
},
|
|
970
|
+
}, rowCount: rowCount, isLoading: isLoading })) }))] }), isOpen && (_jsxs("form", { ref: parentRef, id: "quill-chart-form", onSubmit: handleSubmit, style: {
|
|
964
971
|
display: 'flex',
|
|
965
972
|
flexDirection: 'column',
|
|
966
973
|
gap: 20,
|
|
@@ -993,7 +1000,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
993
1000
|
// marginTop: 6,
|
|
994
1001
|
display: 'flex',
|
|
995
1002
|
flexDirection: 'column',
|
|
996
|
-
}, children: _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processedColumns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot, query: query, pivotCountRequest: 4, initialUniqueValues: initialUniqueValues, initialSelectedPivotTable: selectedPivotTable, pivotRecommendationsEnabled: pivotRecommendationsEnabled }) }), formData.pivot && (_jsx("div", { children: _jsx("div", { style: { width: pivotCardWidth }, children: _jsx(PivotCard, { pivotTable: {
|
|
1003
|
+
}, children: _jsx(PivotModal, { pivotRowField: pivotRowField, setPivotRowField: setPivotRowField, pivotColumnField: pivotColumnField, setPivotColumnField: setPivotColumnField, pivotValueField: pivotValueField, setPivotValueField: setPivotValueField, pivotAggregation: pivotAggregation, setPivotAggregation: setPivotAggregation, createdPivots: createdPivots, setCreatedPivots: setCreatedPivots, recommendedPivots: recommendedPivots, setRecommendedPivots: setRecommendedPivots, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, CardComponent: CardComponent, SecondaryButtonComponent: SecondaryButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, ErrorMessageComponent: ErrorMessageComponent, PivotRowContainer: PivotRowContainer, PivotColumnContainer: PivotColumnContainer, LoadingComponent: LoadingComponent, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: processedColumns, triggerButtonText: 'Add pivot +', selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: handleDeletePivot, selectPivot: handleAddPivot, dateRange: dateRange, selectPivotOnEdit: true, showTrigger: !formData.pivot, query: query, pivotCountRequest: 4, initialUniqueValues: initialUniqueValues, initialSelectedPivotTable: selectedPivotTable, pivotRecommendationsEnabled: pivotRecommendationsEnabled, report: report }) }), formData.pivot && selectedPivotTable && (_jsx("div", { children: _jsx("div", { style: { width: pivotCardWidth }, children: _jsx(PivotCard, { pivotTable: {
|
|
997
1004
|
pivot: formData.pivot,
|
|
998
1005
|
rows: selectedPivotTable?.rows,
|
|
999
1006
|
columns: selectedPivotTable?.columns,
|
|
@@ -1053,13 +1060,13 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
1053
1060
|
onPageChange && onPageChange(page);
|
|
1054
1061
|
}, onSortChange: (sort) => {
|
|
1055
1062
|
onSortChange && onSortChange(sort);
|
|
1056
|
-
},
|
|
1063
|
+
}, rowCount: rowCount, isLoading: isLoading })) : (_jsx(TableComponent, { rows: formattedRows, columns: selectedPivotTable
|
|
1057
1064
|
? selectedPivotTable.columns
|
|
1058
1065
|
: formData.columns, onPageChange: (page) => {
|
|
1059
1066
|
onPageChange && onPageChange(page);
|
|
1060
1067
|
}, onSortChange: (sort) => {
|
|
1061
1068
|
onSortChange && onSortChange(sort);
|
|
1062
|
-
},
|
|
1069
|
+
}, rowCount: rowCount, isLoading: isLoading })) })), showTableFormatOptions && (_jsxs("div", { children: [_jsxs("div", { style: {
|
|
1063
1070
|
display: 'flex',
|
|
1064
1071
|
flexDirection: 'column',
|
|
1065
1072
|
}, children: [_jsx(HeaderComponent, { label: "Table" }), _jsx(SubHeaderComponent, { label: "Columns" })] }), _jsxs(ChartBuilderInputColumnContainer, { children: [formData.pivot &&
|