@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
package/dist/esm/Chart.js
CHANGED
|
@@ -12,12 +12,13 @@ import { DATE_FORMAT_TYPES, valueFormatter } from './utils/valueFormatter';
|
|
|
12
12
|
import LineChart from './components/Chart/LineChart';
|
|
13
13
|
import BarChart from './components/Chart/BarChart';
|
|
14
14
|
import { mergeComparisonRange } from './utils/merge';
|
|
15
|
-
import
|
|
15
|
+
import { QuillLoadingSkeleton } from './components/Chart/ChartSkeleton';
|
|
16
16
|
import ChartError from './components/Chart/ChartError';
|
|
17
17
|
import { COMPARISON_OPTIONS } from './DateRangePicker/dateRangePickerUtils';
|
|
18
18
|
import { quillFormat } from './utils/valueFormatter';
|
|
19
19
|
import { downloadCSV } from './utils/csv';
|
|
20
20
|
import useTheme from './hooks/useTheme';
|
|
21
|
+
import { processFilterErrorList } from './utils/errorProcessing';
|
|
21
22
|
const MAX_ROWS_FOR_GENERIC_TABLE = 300;
|
|
22
23
|
// @ts-ignore
|
|
23
24
|
function sumByKey(arr, key) {
|
|
@@ -75,7 +76,7 @@ export function didFiltersChange(dashboardItem, filters) {
|
|
|
75
76
|
}
|
|
76
77
|
return !isEquivalent(dashboardItem.filtersApplied, filters);
|
|
77
78
|
}
|
|
78
|
-
function fallbackMapColorsToFields(
|
|
79
|
+
function fallbackMapColorsToFields(_report, _theme) {
|
|
79
80
|
// By default, if the key is not in the map we use the colors array.
|
|
80
81
|
return {};
|
|
81
82
|
}
|
|
@@ -87,13 +88,13 @@ function fallbackMapColorsToFields(_dashboardItem, _theme) {
|
|
|
87
88
|
* @example
|
|
88
89
|
* ```js
|
|
89
90
|
* // Usage with chart id (will auto-fetch data)
|
|
90
|
-
* <Chart
|
|
91
|
+
* <Chart reportId="12345" />
|
|
91
92
|
* ```
|
|
92
93
|
*
|
|
93
94
|
* @example
|
|
94
95
|
* ```js
|
|
95
|
-
* // Usage with a
|
|
96
|
-
* <Chart config={
|
|
96
|
+
* // Usage with a report (will not auto-fetch data)
|
|
97
|
+
* <Chart config={report} />
|
|
97
98
|
* ```
|
|
98
99
|
*
|
|
99
100
|
* ### Chart API
|
|
@@ -114,9 +115,9 @@ const Chart = (props) => {
|
|
|
114
115
|
? theme.chartColors
|
|
115
116
|
: ['#4E80EE', '#E14F62', '#55B5A6', '#E9A23B', '#6466E9', '#55B685'];
|
|
116
117
|
}, [data.colors]);
|
|
117
|
-
return (_jsx(ChartUpdater, {
|
|
118
|
+
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 }));
|
|
118
119
|
};
|
|
119
|
-
const ChartUpdater = ({ colors,
|
|
120
|
+
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, }) => {
|
|
120
121
|
const { dispatch, dashboard } = useContext(DashboardContext);
|
|
121
122
|
const { dashboardFilters } = useContext(DashboardFiltersContext);
|
|
122
123
|
const [initialLoad, setInitialLoad] = useState(true);
|
|
@@ -129,7 +130,7 @@ const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationA
|
|
|
129
130
|
useEffect(() => {
|
|
130
131
|
async function getChartOptions() {
|
|
131
132
|
setLoading(true);
|
|
132
|
-
if (!didFiltersChange(dashboard[
|
|
133
|
+
if (!didFiltersChange(dashboard[reportId], dashboardFilters)) {
|
|
133
134
|
setLoading(false);
|
|
134
135
|
return;
|
|
135
136
|
}
|
|
@@ -149,9 +150,12 @@ const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationA
|
|
|
149
150
|
return newFilter;
|
|
150
151
|
})
|
|
151
152
|
: [];
|
|
153
|
+
if (filters) {
|
|
154
|
+
minimalFilters.push(...filters);
|
|
155
|
+
}
|
|
152
156
|
const hostedBody = {
|
|
153
157
|
metadata: {
|
|
154
|
-
dashboardItemId:
|
|
158
|
+
dashboardItemId: reportId,
|
|
155
159
|
orgId: client.customerId || '*',
|
|
156
160
|
clientId: client.publicKey,
|
|
157
161
|
task: 'item',
|
|
@@ -160,20 +164,21 @@ const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationA
|
|
|
160
164
|
},
|
|
161
165
|
};
|
|
162
166
|
const cloudBody = {
|
|
163
|
-
id:
|
|
167
|
+
id: reportId,
|
|
164
168
|
filters: minimalFilters,
|
|
165
169
|
};
|
|
166
170
|
setError(undefined);
|
|
167
171
|
const resp = await getData(client, 'itempost', 'omit', hostedBody, cloudBody);
|
|
172
|
+
processFilterErrorList(resp);
|
|
168
173
|
if (resp && resp.name !== 'error' && !resp.errorMessage) {
|
|
169
174
|
setIsComparison(!!resp.compareRows?.length);
|
|
170
175
|
if (resp.compareRows) {
|
|
171
176
|
mergeComparisonRange(resp);
|
|
172
177
|
}
|
|
173
|
-
const dashboardItem = { ...resp, filtersApplied:
|
|
178
|
+
const dashboardItem = { ...resp, filtersApplied: minimalFilters };
|
|
174
179
|
dispatch({
|
|
175
180
|
type: 'UPDATE_DASHBOARD_ITEM',
|
|
176
|
-
id:
|
|
181
|
+
id: reportId,
|
|
177
182
|
data: dashboardItem,
|
|
178
183
|
});
|
|
179
184
|
if (mapColorsToFields) {
|
|
@@ -192,10 +197,10 @@ const ChartUpdater = ({ colors, chartId, className, containerStyle, isAnimationA
|
|
|
192
197
|
}
|
|
193
198
|
setInitialLoad(false);
|
|
194
199
|
getChartOptions();
|
|
195
|
-
}, [dashboardFilters, client,
|
|
196
|
-
return (_jsx(ChartDisplay, { config: dashboard[
|
|
200
|
+
}, [dashboardFilters, client, reportId]);
|
|
201
|
+
return (_jsx(ChartDisplay, { config: dashboard[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, error: error, colorMap: colorMap, LoadingComponent: LoadingComponent }));
|
|
197
202
|
};
|
|
198
|
-
const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', comparisonLineStyle, isAnimationActive, loading = false, error = undefined, isComparison = false, colorMap, }) => {
|
|
203
|
+
const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hideYAxis, hideCartesianGrid, hideDateRangeFilter = false, hideHorizontalCartesianGrid = false, hideVerticalCartesianGrid = true, hideSubsequentXAxisTicks = false, cartesianGridLineStyle = 'solid', cartesianGridLineColor, comparisonLineStyle, isAnimationActive, loading = false, error = undefined, isComparison = false, colorMap, LoadingComponent = QuillLoadingSkeleton, }) => {
|
|
199
204
|
const { dashboardFilters } = useContext(DashboardFiltersContext);
|
|
200
205
|
const theme = useTheme();
|
|
201
206
|
const chartColors = useMemo(() => {
|
|
@@ -240,12 +245,13 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
|
|
|
240
245
|
else if (!pivotTable &&
|
|
241
246
|
config &&
|
|
242
247
|
config?.chartType !== 'metric' &&
|
|
248
|
+
config?.chartType !== 'table' &&
|
|
243
249
|
config.rows &&
|
|
244
250
|
config.rows.length > MAX_ROWS_FOR_GENERIC_TABLE) {
|
|
245
251
|
return (_jsx(ChartError, { className: className, containerStyle: containerStyle, label: "Charts can only display 300 rows. Please add a pivot or modify the query." }));
|
|
246
252
|
}
|
|
247
253
|
else if (!config || loading) {
|
|
248
|
-
return (_jsx(
|
|
254
|
+
return (_jsx("div", { className: className, style: containerStyle, children: _jsx(LoadingComponent, {}) }));
|
|
249
255
|
}
|
|
250
256
|
const chartTypes = [config?.chartType];
|
|
251
257
|
if (chartTypes.includes('pie')) {
|
|
@@ -270,7 +276,7 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
|
|
|
270
276
|
columns.forEach((col, index) => {
|
|
271
277
|
// ADD THE RIGHT FIELD TYPE FOR THE VALUE COLUMNS
|
|
272
278
|
if ((valueFieldType ||
|
|
273
|
-
['min', 'max'].includes(config?.pivot
|
|
279
|
+
['min', 'max'].includes(config?.pivot?.aggregationType)) &&
|
|
274
280
|
index !== 0) {
|
|
275
281
|
col.format = valueFieldType || 'two_decimal_places';
|
|
276
282
|
}
|
|
@@ -296,6 +302,7 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
|
|
|
296
302
|
return (_jsx(QuillTable, { rows: formattedRows ?? [], columns: columns ?? data.yAxisFields, rowsPerPage: config?.rowsPerPage || 10, containerStyle: {
|
|
297
303
|
width: containerStyle?.width || '100%',
|
|
298
304
|
height: containerStyle?.height || '400px',
|
|
305
|
+
...containerStyle,
|
|
299
306
|
}, className: className, downloadCSV: () => {
|
|
300
307
|
downloadCSV({
|
|
301
308
|
rows: pivotTable?.rows ?? data.rows ?? [],
|
|
@@ -314,7 +321,7 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
|
|
|
314
321
|
if (yAxisFields[0].label === '' && config.yAxisFields.length === 1) {
|
|
315
322
|
yAxisFields[0].label = config.yAxisFields[0].label;
|
|
316
323
|
}
|
|
317
|
-
if (
|
|
324
|
+
if (dateFilter?.comparison) {
|
|
318
325
|
const sampleField = yAxisFields[0];
|
|
319
326
|
yAxisFields[yAxisFields.length] = {
|
|
320
327
|
...sampleField,
|
|
@@ -377,6 +384,7 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
|
|
|
377
384
|
display: 'flex',
|
|
378
385
|
width: '100%',
|
|
379
386
|
flexDirection: 'row',
|
|
387
|
+
...containerStyle,
|
|
380
388
|
}, className: className, children: [_jsxs("div", { style: {
|
|
381
389
|
display: 'flex',
|
|
382
390
|
gap: 4,
|
|
@@ -444,7 +452,9 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
|
|
|
444
452
|
(!data || data.length === 0)) {
|
|
445
453
|
const xAxis = config.xAxisField;
|
|
446
454
|
const yAxis = yAxisFields[0]?.field;
|
|
447
|
-
const format = config.
|
|
455
|
+
const format = config.pivot
|
|
456
|
+
? 'MMM_yyyy'
|
|
457
|
+
: config.columns.find((c) => c.field === xAxis).format;
|
|
448
458
|
const startDate = quillFormat({ value: dateFilter?.startDate, format });
|
|
449
459
|
const endDate = quillFormat({ value: dateFilter?.endDate, format });
|
|
450
460
|
lineChartData = [
|
|
@@ -452,6 +462,17 @@ const ChartDisplay = ({ config, colors, className, containerStyle, hideXAxis, hi
|
|
|
452
462
|
{ [xAxis]: endDate, [yAxis]: '0' },
|
|
453
463
|
];
|
|
454
464
|
}
|
|
455
|
-
return (_jsx(LineChart, { colors: chartColors, colorMap: colorMap, yAxisFields: yAxisFields, data: lineChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, className: className, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle ?? 'solid', comparisonLineStyle: comparisonLineStyle ?? 'solid' }));
|
|
465
|
+
return (_jsx(LineChart, { colors: chartColors, colorMap: colorMap, yAxisFields: yAxisFields.sort(sortComparisonFirst), data: lineChartData, xAxisField: config.xAxisField, xAxisLabel: config.xAxisLabel, xAxisFormat: config.xAxisFormat, containerStyle: containerStyle, className: className, theme: theme, comparison: dateFilter?.comparison, isAnimationActive: isAnimationActive, hideXAxis: hideXAxis, hideYAxis: hideYAxis, hideCartesianGrid: hideCartesianGrid, hideHorizontalCartesianGrid: hideHorizontalCartesianGrid, hideVerticalCartesianGrid: hideVerticalCartesianGrid, hideSubsequentXAxisTicks: hideSubsequentXAxisTicks, cartesianGridLineStyle: cartesianGridLineStyle ?? 'solid', comparisonLineStyle: comparisonLineStyle ?? 'solid', cartesianGridLineColor: cartesianGridLineColor }));
|
|
466
|
+
};
|
|
467
|
+
// Sort to put comparison first (ie. underneath) primary.
|
|
468
|
+
const sortComparisonFirst = (a, b) => {
|
|
469
|
+
const key = 'comparison_';
|
|
470
|
+
if (a.field.startsWith(key) && b.field.startsWith(key))
|
|
471
|
+
return 0;
|
|
472
|
+
if (a.field.startsWith(key))
|
|
473
|
+
return -1;
|
|
474
|
+
if (b.field.startsWith(key))
|
|
475
|
+
return 1;
|
|
476
|
+
return 0;
|
|
456
477
|
};
|
|
457
478
|
export default Chart;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
2
|
import { ColumnInternal } from './models/Columns';
|
|
3
|
-
import {
|
|
3
|
+
import { QuillReport } from './Dashboard';
|
|
4
4
|
export declare const numberFormatOptions: string[];
|
|
5
5
|
export declare const dateFormatOptions: string[];
|
|
6
6
|
/**
|
|
@@ -109,6 +109,10 @@ export interface ChartBuilderProps {
|
|
|
109
109
|
ErrorMessageComponent?: (props: {
|
|
110
110
|
errorMessage: string;
|
|
111
111
|
}) => JSX.Element;
|
|
112
|
+
/**
|
|
113
|
+
* A loading component to show in the pivot modal while suggestions load.
|
|
114
|
+
*/
|
|
115
|
+
LoadingComponent?: () => JSX.Element;
|
|
112
116
|
/**
|
|
113
117
|
* A container for each row of inputs for the ChartBuilder form.
|
|
114
118
|
*/
|
|
@@ -160,7 +164,7 @@ export interface ChartBuilderProps {
|
|
|
160
164
|
/** Whether to show the dashboard dropdown. */
|
|
161
165
|
showDashboardDropdown?: boolean;
|
|
162
166
|
/** A callback fired when the add to dashboard flow has been completed. */
|
|
163
|
-
onAddToDashboardComplete?: (
|
|
167
|
+
onAddToDashboardComplete?: (report: QuillReport) => void;
|
|
164
168
|
/** A callback fired when this chart is delete. */
|
|
165
169
|
onDelete?: () => void;
|
|
166
170
|
/** The pivot info applied to this data. */
|
|
@@ -187,8 +191,8 @@ export interface ChartBuilderProps {
|
|
|
187
191
|
start: Date;
|
|
188
192
|
end: Date;
|
|
189
193
|
} | undefined;
|
|
190
|
-
/** The
|
|
191
|
-
|
|
194
|
+
/** The report for this ChartBuilder. */
|
|
195
|
+
report?: QuillReport | any;
|
|
192
196
|
/** A list of generated pivots that were recommended as useful for this query. */
|
|
193
197
|
recommendedPivots?: {
|
|
194
198
|
rowField: string;
|
|
@@ -282,7 +286,7 @@ export declare function ChartBuilderWithModal(props: ChartBuilderProps): import(
|
|
|
282
286
|
* ### Chart Builder API
|
|
283
287
|
* @see https://docs.quillsql.com/components/chart-builder
|
|
284
288
|
*/
|
|
285
|
-
export default function ChartBuilder({ TextInputComponent, SelectComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, DeleteButtonComponent, TextComponent, PopoverComponent, CardComponent, TableComponent, ModalComponent, ErrorMessageComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, FormContainer, isOpen, isHorizontalView, pivot, setIsOpen, rows, columns, query, queryNoDateColumn, dateRange: dr, showTableFormatOptions, showDateFieldOptions, showAccessControlOptions, showDashboardDropdown, onAddToDashboardComplete, onDelete,
|
|
289
|
+
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, }: ChartBuilderProps): import("react/jsx-runtime").JSX.Element | null;
|
|
286
290
|
export declare function DashboardFilterModal({ isOpen, setIsOpen, issues, ModalComponent, ButtonComponent, }: {
|
|
287
291
|
isOpen: boolean;
|
|
288
292
|
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
|
@@ -6,7 +6,7 @@ import { getData, getDataFromCloud } from './utils/dataFetcher';
|
|
|
6
6
|
import { PivotModal, generatePivotTable, isDateField, } from './internals/ReportBuilder/PivotModal';
|
|
7
7
|
import { PivotCard } from './internals/ReportBuilder/PivotList';
|
|
8
8
|
import Chart from './Chart';
|
|
9
|
-
import { MemoizedModal, QuillTextInput, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, QuillTableComponent, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillChartBuilderFormContainer, } from './components/UiComponents';
|
|
9
|
+
import { MemoizedModal, QuillTextInput, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, QuillTableComponent, QuillChartBuilderInputRowContainer, QuillChartBuilderInputColumnContainer, MemoizedSubHeader, QuillErrorMessageComponent, QuillPivotRowContainer, QuillPivotColumnContainer, QuillChartBuilderFormContainer, QuillLoadingComponent, } from './components/UiComponents';
|
|
10
10
|
import { mergeComparisonRange } from './utils/merge';
|
|
11
11
|
import { removeDoubleQuotes, snakeCaseToTitleCase, } from './utils/textProcessing';
|
|
12
12
|
import { QuillSelectComponent } from './components/QuillSelect';
|
|
@@ -231,7 +231,7 @@ export function ChartBuilderWithModal(props) {
|
|
|
231
231
|
* ### Chart Builder API
|
|
232
232
|
* @see https://docs.quillsql.com/components/chart-builder
|
|
233
233
|
*/
|
|
234
|
-
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, 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,
|
|
234
|
+
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, }) {
|
|
235
235
|
const dateRange = dr;
|
|
236
236
|
const [client] = useContext(ClientContext);
|
|
237
237
|
const [theme] = useContext(ThemeContext);
|
|
@@ -303,7 +303,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
303
303
|
}, []);
|
|
304
304
|
// get dashboards
|
|
305
305
|
const [dashboardOptions, setDashboardOptions] = useState([]);
|
|
306
|
-
const [defaultDashboardName, setDefaultDashboardName] = useState(destinationDashboard ||
|
|
306
|
+
const [defaultDashboardName, setDefaultDashboardName] = useState(destinationDashboard || report?.dashboardName || '');
|
|
307
307
|
const { dashboardFilters } = useContext(DashboardFiltersContext);
|
|
308
308
|
const [dashboardFilters2, setDashboardFilters] = useState([]);
|
|
309
309
|
const [dashboardHasDateFilter, setDashboardHasDateFilter] = useState(false);
|
|
@@ -317,7 +317,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
317
317
|
const [tableName, setTableName] = useState(undefined);
|
|
318
318
|
const selectedTable = schema?.find((t) => t.displayName === tableName);
|
|
319
319
|
const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add pivot');
|
|
320
|
-
const [createdPivots, setCreatedPivots] = useState(pivot ? [pivot] :
|
|
320
|
+
const [createdPivots, setCreatedPivots] = useState(pivot ? [pivot] : report?.pivot ? [report.pivot] : cp);
|
|
321
321
|
const [recommendedPivots, setRecommendedPivots] = useState(rp);
|
|
322
322
|
const [pivotRowField, setPivotRowField] = useState(pivot?.rowField);
|
|
323
323
|
const [pivotColumnField, setPivotColumnField] = useState(pivot?.columnField);
|
|
@@ -382,15 +382,15 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
382
382
|
};
|
|
383
383
|
const pivotFormData = (pivot) => {
|
|
384
384
|
const yAxisField = pivot.columnField || pivot.valueField;
|
|
385
|
-
const yAxisLabel =
|
|
386
|
-
?
|
|
385
|
+
const yAxisLabel = report?.yAxisFields?.length > 0
|
|
386
|
+
? report.yAxisFields[0].label
|
|
387
387
|
: pivot.valueField;
|
|
388
388
|
// date labels for pivots should be treated like strings since they are
|
|
389
389
|
// formatted in generatePivotTable
|
|
390
390
|
const yAxisIsDate = pivot.columnField
|
|
391
391
|
? isDateField(pivot.columnFieldType || '')
|
|
392
392
|
: false;
|
|
393
|
-
const chartType =
|
|
393
|
+
const chartType = report?.chartType ?? (pivot.rowField ? 'column' : 'metric');
|
|
394
394
|
return {
|
|
395
395
|
pivot,
|
|
396
396
|
chartType: chartType,
|
|
@@ -399,15 +399,15 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
399
399
|
? 'string'
|
|
400
400
|
: columns.find((col) => col.field === pivot.rowField)?.format ||
|
|
401
401
|
'whole_number',
|
|
402
|
-
xAxisLabel:
|
|
402
|
+
xAxisLabel: report?.xAxisLabel || pivot.rowField,
|
|
403
403
|
yAxisFields: [
|
|
404
404
|
{
|
|
405
405
|
field: yAxisField,
|
|
406
406
|
label: yAxisLabel,
|
|
407
407
|
format: yAxisIsDate
|
|
408
408
|
? 'string'
|
|
409
|
-
:
|
|
410
|
-
?
|
|
409
|
+
: report?.yAxisFields?.length > 0
|
|
410
|
+
? report?.yAxisFields[0].format
|
|
411
411
|
: columns.find((col) => col.field === pivot.valueField)?.format ||
|
|
412
412
|
'whole_number',
|
|
413
413
|
},
|
|
@@ -417,11 +417,11 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
417
417
|
const [formData, setFormData] = useState(pivot
|
|
418
418
|
? {
|
|
419
419
|
...formEmptyState,
|
|
420
|
-
...
|
|
420
|
+
...report,
|
|
421
421
|
...pivotFormData(pivot),
|
|
422
422
|
...(destinationDashboard && { dashboardName: destinationDashboard }),
|
|
423
423
|
}
|
|
424
|
-
:
|
|
424
|
+
: report || formEmptyState);
|
|
425
425
|
useEffect(() => {
|
|
426
426
|
async function getFormData() {
|
|
427
427
|
const curFormData = formData;
|
|
@@ -430,19 +430,13 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
430
430
|
.filter((elem) => elem !== null)
|
|
431
431
|
.map((key) => ({ label: key, value: key }));
|
|
432
432
|
await updateDashboardFilters(destinationDashboard ??
|
|
433
|
-
(
|
|
434
|
-
? dashboardItem?.dashboardName
|
|
435
|
-
: dashboardOptions[0]?.label));
|
|
433
|
+
(report ? report?.dashboardName : dashboardOptions[0]?.label));
|
|
436
434
|
setDashboardOptions(dashboardOptions);
|
|
437
435
|
const dashboardName = destinationDashboard ??
|
|
438
|
-
(
|
|
439
|
-
? dashboardItem?.dashboardName
|
|
440
|
-
: dashboardOptions[0]?.label);
|
|
436
|
+
(report ? report?.dashboardName : dashboardOptions[0]?.label);
|
|
441
437
|
curFormData.dashboardName = dashboardName;
|
|
442
438
|
setDefaultDashboardName(destinationDashboard ??
|
|
443
|
-
(
|
|
444
|
-
? dashboardItem?.dashboardName
|
|
445
|
-
: dashboardOptions[0]?.label));
|
|
439
|
+
(report ? report?.dashboardName : dashboardOptions[0]?.label));
|
|
446
440
|
const { queryEndpoint, queryHeaders, publicKey } = client;
|
|
447
441
|
const response = await fetch(`${queryEndpoint}`, {
|
|
448
442
|
method: 'POST',
|
|
@@ -495,8 +489,8 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
495
489
|
curFormData.dateField = dateField;
|
|
496
490
|
setFormData({
|
|
497
491
|
...curFormData,
|
|
498
|
-
dashboardName:
|
|
499
|
-
?
|
|
492
|
+
dashboardName: report
|
|
493
|
+
? report?.dashboardName
|
|
500
494
|
: dashboardOptions[0]?.label,
|
|
501
495
|
});
|
|
502
496
|
}
|
|
@@ -713,12 +707,12 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
713
707
|
event.preventDefault();
|
|
714
708
|
};
|
|
715
709
|
const deleteChart = async () => {
|
|
716
|
-
if (!
|
|
710
|
+
if (!report._id || !client) {
|
|
717
711
|
return;
|
|
718
712
|
}
|
|
719
713
|
const { publicKey, customerId } = client;
|
|
720
714
|
const cloudBody = {
|
|
721
|
-
dashboardItemId:
|
|
715
|
+
dashboardItemId: report._id,
|
|
722
716
|
};
|
|
723
717
|
const searchParams = new URLSearchParams(customerId
|
|
724
718
|
? {
|
|
@@ -767,11 +761,10 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
767
761
|
return;
|
|
768
762
|
}
|
|
769
763
|
// If the dashbaordItem is a template but the editor isn't an admin, create a new dashboardItem and set the template to false
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
: undefined;
|
|
764
|
+
let dashboardItemId = report ? report._id : undefined;
|
|
765
|
+
if (report && !showDateFieldOptions && report.template) {
|
|
766
|
+
dashboardItemId = undefined;
|
|
767
|
+
}
|
|
775
768
|
const cloudBody = {
|
|
776
769
|
...formData,
|
|
777
770
|
...(formData.dateField?.table
|
|
@@ -786,7 +779,9 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
786
779
|
pivot: formData.pivot,
|
|
787
780
|
referencedTables: allTables,
|
|
788
781
|
referencedColumns,
|
|
789
|
-
template: !showDateFieldOptions &&
|
|
782
|
+
template: report && !showDateFieldOptions && report.template
|
|
783
|
+
? false
|
|
784
|
+
: formData.template,
|
|
790
785
|
customerId: customerId || '*',
|
|
791
786
|
};
|
|
792
787
|
// @ts-ignore
|
|
@@ -876,12 +871,15 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
876
871
|
height: formData.chartType === 'metric'
|
|
877
872
|
? 100
|
|
878
873
|
: isHorizontalView || !isOpen
|
|
879
|
-
?
|
|
874
|
+
? showTableFormatOptions
|
|
875
|
+
? 'calc(50% - 10px)'
|
|
876
|
+
: 'calc(100% - 10px)'
|
|
880
877
|
: 400,
|
|
881
878
|
...(isHorizontalView && { flexGrow: 1 }),
|
|
882
879
|
} })),
|
|
883
880
|
// Make sure to display non-pivoted table when using pivot chart
|
|
884
|
-
|
|
881
|
+
showTableFormatOptions &&
|
|
882
|
+
(isHorizontalView || (!isOpen && windowWidth < 1200)) && (_jsx("div", { style: {
|
|
885
883
|
width: '100%',
|
|
886
884
|
height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
|
|
887
885
|
flexGrow: 1,
|
|
@@ -920,7 +918,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
920
918
|
// marginTop: 6,
|
|
921
919
|
display: 'flex',
|
|
922
920
|
flexDirection: 'column',
|
|
923
|
-
}, 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, theme: theme, isOpen: showPivotPopover, setIsOpen: setShowPivotPopover, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, parentRef: parentRef, data: rows, columns: columns, 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: {
|
|
921
|
+
}, 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: columns, 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: {
|
|
924
922
|
pivot: formData.pivot,
|
|
925
923
|
rows: selectedPivotTable?.rows,
|
|
926
924
|
columns: selectedPivotTable?.columns,
|
|
@@ -972,9 +970,7 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
972
970
|
: ''
|
|
973
971
|
: yAxisField.format, onChange: (e) => handleChange(e.target.value, 'yAxisFields.format', index), options: formData.pivot
|
|
974
972
|
? NUMBER_OPTIONS
|
|
975
|
-
: formatOptions, width: 200 }), formData.pivot === null && (_jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), formData.pivot === null && (_jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] }))] })),
|
|
976
|
-
// Make sure to display non-pivoted table when using pivot chart
|
|
977
|
-
windowWidth < 1200 && (_jsx("div", { style: {
|
|
973
|
+
: formatOptions, width: 200 }), formData.pivot === null && (_jsx("div", { ref: deleteRef, style: { marginLeft: deleteButtonMargin }, children: _jsx(DeleteButtonComponent, { onClick: () => handleRemoveField('yAxisFields', index) }) }))] }, 'yAxisField' + index))), formData.pivot === null && (_jsx("div", { children: _jsx(SecondaryButtonComponent, { onClick: () => handleAddField('yAxisFields'), label: "Add field +" }) }))] })] }))] })), showTableFormatOptions && windowWidth < 1200 && (_jsx("div", { style: {
|
|
978
974
|
width: '100%',
|
|
979
975
|
height: isHorizontalView || !isOpen ? 'calc(50% - 10px)' : 400,
|
|
980
976
|
flexGrow: 1,
|
|
@@ -1035,9 +1031,9 @@ export default function ChartBuilder({ TextInputComponent = QuillTextInput, Sele
|
|
|
1035
1031
|
justifyContent: 'flex-end',
|
|
1036
1032
|
marginTop: 'auto',
|
|
1037
1033
|
gap: 10,
|
|
1038
|
-
}, children: [!hideDeleteButton && !isHorizontalView &&
|
|
1034
|
+
}, children: [!hideDeleteButton && !isHorizontalView && report && (_jsx(SecondaryButtonComponent, { onClick: deleteChart, label: 'Delete' })), !hideSubmitButton && (_jsx(ButtonComponent, { onClick: () => editChart(), label: buttonLabel
|
|
1039
1035
|
? buttonLabel
|
|
1040
|
-
:
|
|
1036
|
+
: report
|
|
1041
1037
|
? 'Save changes'
|
|
1042
1038
|
: 'Add to dashboard' }))] })] }))] }), _jsx(DashboardFilterModal, { isOpen: showFilterModal, setIsOpen: setShowFilterModal, issues: filterIssues, ButtonComponent: ButtonComponent })] }));
|
|
1043
1039
|
}
|
|
@@ -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 ChartEditor component.
|
|
5
5
|
*/
|
|
@@ -9,7 +9,7 @@ export interface ChartEditorProps {
|
|
|
9
9
|
/** A callback that sets the isOpen state. */
|
|
10
10
|
setIsOpen: (isOpen: boolean) => void;
|
|
11
11
|
/** The id of the chart that is being edited. */
|
|
12
|
-
|
|
12
|
+
reportId: string;
|
|
13
13
|
/** Whether the editor has administrative priveleges. */
|
|
14
14
|
isAdmin?: boolean;
|
|
15
15
|
/** The title of the chart builder form. */
|
|
@@ -19,7 +19,7 @@ export interface ChartEditorProps {
|
|
|
19
19
|
/**
|
|
20
20
|
* A callback that is fired when the add to dashboard flow has been completed.
|
|
21
21
|
*/
|
|
22
|
-
onAddToDashboardComplete?: (
|
|
22
|
+
onAddToDashboardComplete?: (report: QuillReport) => void;
|
|
23
23
|
/** A callback that is fired when the item is deleted. */
|
|
24
24
|
onDelete?: () => void;
|
|
25
25
|
/** A select component. */
|
|
@@ -114,6 +114,10 @@ export interface ChartEditorProps {
|
|
|
114
114
|
}[];
|
|
115
115
|
isLoading?: boolean;
|
|
116
116
|
}) => JSX.Element;
|
|
117
|
+
/**
|
|
118
|
+
* A loading component to show in the pivot modal while suggestions load.
|
|
119
|
+
*/
|
|
120
|
+
LoadingComponent?: () => JSX.Element;
|
|
117
121
|
/**
|
|
118
122
|
* A container for each row of inputs for the ChartBuilder form.
|
|
119
123
|
*/
|
|
@@ -169,7 +173,7 @@ export interface ChartEditorProps {
|
|
|
169
173
|
* @example
|
|
170
174
|
* ```js
|
|
171
175
|
* // Usage without custom components
|
|
172
|
-
* <ChartEditor isOpen={true}
|
|
176
|
+
* <ChartEditor isOpen={true} reportId="1234" />
|
|
173
177
|
* ```
|
|
174
178
|
*
|
|
175
179
|
* @example
|
|
@@ -178,7 +182,7 @@ export interface ChartEditorProps {
|
|
|
178
182
|
* <ChartEditor
|
|
179
183
|
* isOpen={isOpen}
|
|
180
184
|
* setIsOpen={setIsOpen}
|
|
181
|
-
*
|
|
185
|
+
* reportId="1234"
|
|
182
186
|
* Button={MyButton}
|
|
183
187
|
* Modal={MyModal}
|
|
184
188
|
* />
|
|
@@ -187,5 +191,5 @@ export interface ChartEditorProps {
|
|
|
187
191
|
* ### Chart Editor API
|
|
188
192
|
* @see https://docs.quillsql.com/components/chart-editor
|
|
189
193
|
*/
|
|
190
|
-
export default function ChartEditor({ isOpen,
|
|
194
|
+
export default function ChartEditor({ isOpen, reportId, isAdmin, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, onAddToDashboardComplete, organizationName, isHorizontalView, onDelete, setIsOpen, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, HeaderComponent, SubHeaderComponent, LabelComponent, TextComponent, DeleteButtonComponent, ModalComponent, CardComponent, PopoverComponent, LoadingComponent, TableComponent, ChartBuilderInputRowContainer, ChartBuilderInputColumnContainer, PivotRowContainer, PivotColumnContainer, ErrorMessageComponent, ChartBuilderFormContainer, hideDeleteButton, hideSubmitButton, }: ChartEditorProps): import("react/jsx-runtime").JSX.Element;
|
|
191
195
|
//# sourceMappingURL=ChartEditor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartEditor.d.ts","sourceRoot":"","sources":["../../src/ChartEditor.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,SAAS,EAKV,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ChartEditor.d.ts","sourceRoot":"","sources":["../../src/ChartEditor.tsx"],"names":[],"mappings":"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"}
|