@quillsql/react 2.6.2 → 2.6.3

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.
Files changed (56) hide show
  1. package/lib/AddToDashboardModal.js +136 -243
  2. package/lib/AddToDashboardModal.js.map +1 -1
  3. package/lib/Chart.js +106 -139
  4. package/lib/Chart.js.map +1 -1
  5. package/lib/ChartBuilder.d.ts +36 -0
  6. package/lib/ChartBuilder.js +612 -0
  7. package/lib/ChartBuilder.js.map +1 -0
  8. package/lib/ChartEditor.d.ts +20 -0
  9. package/lib/ChartEditor.js +75 -0
  10. package/lib/ChartEditor.js.map +1 -0
  11. package/lib/Dashboard.d.ts +1 -0
  12. package/lib/Dashboard.js +37 -66
  13. package/lib/Dashboard.js.map +1 -1
  14. package/lib/DateRangePicker/dateRangePickerUtils.d.ts +1 -0
  15. package/lib/DateRangePicker/dateRangePickerUtils.js +6 -1
  16. package/lib/DateRangePicker/dateRangePickerUtils.js.map +1 -1
  17. package/lib/QuillProvider.d.ts +1 -0
  18. package/lib/QuillProvider.js +1 -0
  19. package/lib/QuillProvider.js.map +1 -1
  20. package/lib/ReportBuilder.d.ts +24 -34
  21. package/lib/ReportBuilder.js +248 -893
  22. package/lib/ReportBuilder.js.map +1 -1
  23. package/lib/SQLEditor.d.ts +5 -1
  24. package/lib/SQLEditor.js +91 -163
  25. package/lib/SQLEditor.js.map +1 -1
  26. package/lib/Table.js +56 -108
  27. package/lib/Table.js.map +1 -1
  28. package/lib/assets/XIcon.d.ts +4 -0
  29. package/lib/assets/XIcon.js +6 -0
  30. package/lib/assets/XIcon.js.map +1 -0
  31. package/lib/assets/index.d.ts +4 -0
  32. package/lib/assets/index.js +9 -1
  33. package/lib/assets/index.js.map +1 -1
  34. package/lib/components/QuillCard.d.ts +5 -2
  35. package/lib/components/QuillCard.js +43 -5
  36. package/lib/components/QuillCard.js.map +1 -1
  37. package/lib/components/UiComponents.d.ts +112 -0
  38. package/lib/components/UiComponents.js +255 -0
  39. package/lib/components/UiComponents.js.map +1 -0
  40. package/lib/hooks/useQuill.d.ts +1 -0
  41. package/lib/hooks/useQuill.js +15 -59
  42. package/lib/hooks/useQuill.js.map +1 -1
  43. package/lib/index.d.ts +2 -0
  44. package/lib/index.js +5 -1
  45. package/lib/index.js.map +1 -1
  46. package/lib/internals/ReportBuilder/PivotList.d.ts +27 -3
  47. package/lib/internals/ReportBuilder/PivotList.js +49 -39
  48. package/lib/internals/ReportBuilder/PivotList.js.map +1 -1
  49. package/lib/internals/ReportBuilder/PivotModal.d.ts +33 -3
  50. package/lib/internals/ReportBuilder/PivotModal.js +318 -226
  51. package/lib/internals/ReportBuilder/PivotModal.js.map +1 -1
  52. package/lib/internals/ReportBuilder/PivotModal.spec.js +19 -0
  53. package/lib/internals/ReportBuilder/PivotModal.spec.js.map +1 -1
  54. package/lib/utils/aggregate.js +1 -0
  55. package/lib/utils/aggregate.js.map +1 -1
  56. package/package.json +6 -3
@@ -31,6 +31,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
31
31
  // @ts-nocheck
32
32
  const react_1 = __importStar(require("react"));
33
33
  const date_fns_1 = require("date-fns");
34
+ const dataFetcher_1 = require("./utils/dataFetcher");
34
35
  const Context_1 = require("./Context");
35
36
  const date_fns_2 = require("date-fns");
36
37
  const Chart_1 = __importDefault(require("./Chart"));
@@ -144,39 +145,16 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
144
145
  const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
145
146
  // const [organization, setOrganization] = useState([]);
146
147
  const { dispatch } = (0, react_1.useContext)(Context_1.DashboardContext);
147
- const { publicKey, environment } = client;
148
148
  // showTableFormatOptions = false;
149
149
  // showDateFieldOptions = false;
150
150
  // showAccessControlOptions = false;3
151
151
  (0, react_1.useEffect)(() => {
152
152
  let isSubscribed = true;
153
153
  async function getSchema() {
154
- const { publicKey, environment } = client;
155
- if (!schema.length) {
156
- // const response3 = await axios.get(
157
- // `https://quill-344421.uc.r.appspot.com/schema2/${publicKey}/`,
158
- // {
159
- // headers: {
160
- // Authorization: `Bearer `,
161
- // environment: environment || undefined,
162
- // },
163
- // }
164
- // );
165
- const url = `https://quill-344421.uc.r.appspot.com/schema2/${publicKey}/`;
166
- const headers = {
167
- 'Content-Type': 'application/json',
168
- Authorization: 'Bearer ',
169
- };
170
- if (environment) {
171
- headers['environment'] = environment;
172
- }
173
- const response = await fetch(url, {
174
- method: 'GET',
175
- headers: headers,
176
- });
177
- const response3 = await response.json();
154
+ if (!schema || !schema.length) {
155
+ const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `schema2/${client.publicKey}/`, null, 'GET');
178
156
  if (isSubscribed) {
179
- setSchema(response3.tables);
157
+ setSchema(resp.tables);
180
158
  }
181
159
  }
182
160
  }
@@ -188,7 +166,7 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
188
166
  };
189
167
  }, [schema]);
190
168
  const editChart = async ({ report, setIsSubmitting, values, yAxisFields, columns, query, buckets, showTableFormatOptions, }) => {
191
- const { publicKey, customerId, authToken, queryEndpoint, queryHeaders, withCredentials, environment, databaseType, } = client;
169
+ const { publicKey, customerId } = client;
192
170
  const { xAxisLabel, chartName, chartType, xAxisField, xAxisFormat, dashboardName, dateFieldTable, dateField, template, } = values;
193
171
  if (!chartName) {
194
172
  alert('Please enter a chart name');
@@ -224,71 +202,17 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
224
202
  }
225
203
  let defaultDateField;
226
204
  if (!showDateFieldOptions) {
227
- const result = await getReferencedTables(query, databaseType, schema);
205
+ const result = await getReferencedTables(client, query, schema);
228
206
  defaultDateField = {
229
207
  table: result[0].name,
230
208
  field: result[0].columns[0].name,
231
209
  };
232
210
  }
233
- let responseData;
234
- if (queryEndpoint) {
235
- const url = queryEndpoint;
236
- const headers = {
237
- 'Content-Type': 'application/json',
238
- ...queryHeaders,
239
- };
240
- const body = JSON.stringify({
241
- metadata: customerId
242
- ? report
243
- ? {
244
- dashboardItemId: report._id,
245
- name: chartName,
246
- xAxisField,
247
- yAxisFields,
248
- xAxisLabel,
249
- xAxisFormat,
250
- chartType,
251
- dashboardName,
252
- columns: showTableFormatOptions && chartType !== 'table'
253
- ? columns
254
- : [
255
- ...yAxisFields,
256
- {
257
- field: xAxisField,
258
- label: xAxisLabel,
259
- format: xAxisFormat,
260
- },
261
- ],
262
- dateField: showDateFieldOptions
263
- ? { table: dateFieldTable, field: dateField }
264
- : defaultDateField,
265
- query: query,
266
- task: 'create',
267
- orgId: customerId,
268
- template: template,
269
- buckets,
270
- }
271
- : {
272
- name: chartName,
273
- xAxisField,
274
- yAxisFields,
275
- xAxisLabel,
276
- xAxisFormat,
277
- chartType,
278
- dashboardName,
279
- columns: showTableFormatOptions && chartType !== 'table'
280
- ? columns
281
- : [...yAxisFields],
282
- dateField: showDateFieldOptions
283
- ? { table: dateFieldTable, field: dateField }
284
- : defaultDateField,
285
- query: query,
286
- task: 'create',
287
- orgId: customerId,
288
- template: template,
289
- buckets,
290
- }
291
- : {
211
+ const hostedBody = {
212
+ metadata: customerId
213
+ ? report
214
+ ? {
215
+ dashboardItemId: report._id,
292
216
  name: chartName,
293
217
  xAxisField,
294
218
  yAxisFields,
@@ -311,76 +235,31 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
311
235
  : defaultDateField,
312
236
  query: query,
313
237
  task: 'create',
238
+ orgId: customerId,
314
239
  template: template,
315
240
  buckets,
316
- },
317
- });
318
- const response = await fetch(url, {
319
- method: 'POST',
320
- headers: headers,
321
- body: body,
322
- credentials: withCredentials ? 'include' : 'same-origin',
323
- });
324
- responseData = await response.json();
325
- dispatch({
326
- type: 'UPDATE_DASHBOARD_ITEM',
327
- id: responseData._id,
328
- data: {
329
- ...responseData,
330
- rows,
331
- fields,
332
- },
333
- });
334
- setIsOpen(false);
335
- if (onAddToDashboardComplete) {
336
- onAddToDashboardComplete();
337
- }
338
- }
339
- else {
340
- const url = new URL('https://quill-344421.uc.r.appspot.com/dashedit2');
341
- url.search = new URLSearchParams(customerId
342
- ? {
343
- clientId: publicKey,
344
- customerId: customerId,
345
- }
346
- : { clientId: publicKey }).toString();
347
- const headers = {
348
- 'Content-Type': 'application/json',
349
- };
350
- if (environment) {
351
- headers['environment'] = environment;
352
- }
353
- let body2;
354
- if (report) {
355
- body2 = JSON.stringify({
356
- dashboardItemId: report._id,
357
- name: chartName,
358
- xAxisField,
359
- yAxisFields,
360
- xAxisLabel,
361
- xAxisFormat,
362
- chartType,
363
- dashboardName,
364
- columns: showTableFormatOptions
365
- ? columns
366
- : [
367
- ...yAxisFields,
368
- {
369
- field: xAxisField,
370
- label: xAxisLabel,
371
- format: xAxisFormat,
372
- },
373
- ],
374
- dateField: showDateFieldOptions
375
- ? { table: dateFieldTable, field: dateField }
376
- : defaultDateField,
377
- query: query,
378
- template: template,
379
- buckets,
380
- });
381
- }
382
- else {
383
- body2 = JSON.stringify({
241
+ }
242
+ : {
243
+ name: chartName,
244
+ xAxisField,
245
+ yAxisFields,
246
+ xAxisLabel,
247
+ xAxisFormat,
248
+ chartType,
249
+ dashboardName,
250
+ columns: showTableFormatOptions && chartType !== 'table'
251
+ ? columns
252
+ : [...yAxisFields],
253
+ dateField: showDateFieldOptions
254
+ ? { table: dateFieldTable, field: dateField }
255
+ : defaultDateField,
256
+ query: query,
257
+ task: 'create',
258
+ orgId: customerId,
259
+ template: template,
260
+ buckets,
261
+ }
262
+ : {
384
263
  name: chartName,
385
264
  xAxisField,
386
265
  yAxisFields,
@@ -388,7 +267,7 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
388
267
  xAxisFormat,
389
268
  chartType,
390
269
  dashboardName,
391
- columns: showTableFormatOptions
270
+ columns: showTableFormatOptions && chartType !== 'table'
392
271
  ? columns
393
272
  : [
394
273
  ...yAxisFields,
@@ -402,36 +281,86 @@ function AddToDashboardModal({ isOpen, setIsOpen, SelectComponent, TextInputComp
402
281
  ? { table: dateFieldTable, field: dateField }
403
282
  : defaultDateField,
404
283
  query: query,
284
+ task: 'create',
405
285
  template: template,
406
286
  buckets,
407
- });
408
- }
409
- try {
410
- const response = await fetch(url, {
411
- method: 'POST',
412
- headers: headers,
413
- body: body2,
414
- });
415
- responseData = await response.json();
416
- dispatch({
417
- type: 'UPDATE_DASHBOARD_ITEM',
418
- id: responseData._id,
419
- data: {
420
- ...responseData,
421
- rows,
422
- fields,
423
- },
424
- });
425
- setIsOpen(false);
426
- if (onAddToDashboardComplete) {
427
- onAddToDashboardComplete();
428
- }
287
+ },
288
+ };
289
+ const cloudBody = report
290
+ ? {
291
+ dashboardItemId: report._id,
292
+ name: chartName,
293
+ xAxisField,
294
+ yAxisFields,
295
+ xAxisLabel,
296
+ xAxisFormat,
297
+ chartType,
298
+ dashboardName,
299
+ columns: showTableFormatOptions
300
+ ? columns
301
+ : [
302
+ ...yAxisFields,
303
+ {
304
+ field: xAxisField,
305
+ label: xAxisLabel,
306
+ format: xAxisFormat,
307
+ },
308
+ ],
309
+ dateField: showDateFieldOptions
310
+ ? { table: dateFieldTable, field: dateField }
311
+ : defaultDateField,
312
+ query: query,
313
+ template: template,
314
+ buckets,
429
315
  }
430
- catch (error) {
431
- console.error('Failed to parse JSON:', error);
316
+ : {
317
+ name: chartName,
318
+ xAxisField,
319
+ yAxisFields,
320
+ xAxisLabel,
321
+ xAxisFormat,
322
+ chartType,
323
+ dashboardName,
324
+ columns: showTableFormatOptions
325
+ ? columns
326
+ : [
327
+ ...yAxisFields,
328
+ {
329
+ field: xAxisField,
330
+ label: xAxisLabel,
331
+ format: xAxisFormat,
332
+ },
333
+ ],
334
+ dateField: showDateFieldOptions
335
+ ? { table: dateFieldTable, field: dateField }
336
+ : defaultDateField,
337
+ query: query,
338
+ template: template,
339
+ buckets,
340
+ };
341
+ const searchParams = new URLSearchParams(customerId
342
+ ? {
343
+ clientId: publicKey,
344
+ customerId: customerId,
432
345
  }
346
+ : { clientId: publicKey }).toString();
347
+ const resp = await (0, dataFetcher_1.getData)(client, `dashedit2?${searchParams}`, 'same-origin', hostedBody, cloudBody);
348
+ if (resp) {
349
+ dispatch({
350
+ type: 'UPDATE_DASHBOARD_ITEM',
351
+ id: resp._id,
352
+ data: {
353
+ ...resp,
354
+ rows,
355
+ fields,
356
+ },
357
+ });
358
+ }
359
+ setIsOpen(false);
360
+ if (onAddToDashboardComplete) {
361
+ onAddToDashboardComplete();
433
362
  }
434
- if (!responseData) {
363
+ if (!resp) {
435
364
  return;
436
365
  }
437
366
  };
@@ -566,7 +495,7 @@ function ChartForm({ data, fields, theme, saveVisualization, report, editChart,
566
495
  if (!query) {
567
496
  return;
568
497
  }
569
- const result = await getReferencedTables(query, 'PostgresQL', schema);
498
+ const result = await getReferencedTables(client, query, schema);
570
499
  setDateFieldOptions(result);
571
500
  };
572
501
  fetchReferencedTables();
@@ -691,19 +620,12 @@ const POSTGRES_DATE_TYPES = [
691
620
  'time',
692
621
  'timetz',
693
622
  ];
694
- async function getReferencedTables(sqlQuery, databaseType, dbTables) {
623
+ async function getReferencedTables(client, sqlQuery, dbTables) {
695
624
  // const parser = new Parser();
696
625
  const tables = [];
697
626
  const withAliases = [];
698
- const response = await fetch('https://quill-344421.uc.r.appspot.com/astify', {
699
- method: 'POST',
700
- headers: {
701
- 'Content-Type': 'application/json',
702
- },
703
- body: JSON.stringify({ query: sqlQuery }),
704
- });
705
- const data = await response.json();
706
- let ast = data.ast;
627
+ const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `astify`, { query: sqlQuery });
628
+ let ast = resp.ast;
707
629
  ast = ast.length ? ast[0] : ast;
708
630
  if (ast.with && ast.with.length) {
709
631
  for (let i = 0; i < ast.with.length; i++) {
@@ -779,7 +701,6 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
779
701
  const { dashboardFilters, dashboardFiltersDispatch } = (0, react_1.useContext)(Context_1.DashboardFiltersContext);
780
702
  const [rows, setRows] = (0, react_1.useState)(null);
781
703
  const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
782
- const { environment } = client;
783
704
  const [xAxisField, setXAxisField] = (0, react_1.useState)(report?.xAxisField ||
784
705
  (xAxisOptions && xAxisOptions.length && xAxisOptions[0].value) ||
785
706
  '');
@@ -900,46 +821,25 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
900
821
  const [selectedTabIndex, setSelectedTabIndex] = (0, react_1.useState)(report && report.template ? 1 : 0);
901
822
  react_1.default.useEffect(() => {
902
823
  async function getDashboards() {
903
- const { publicKey, customerId, environment, queryEndpoint, queryHeaders, withCredentials, } = client;
824
+ const { publicKey, customerId, queryEndpoint } = client;
904
825
  if (customerId || queryEndpoint) {
905
826
  try {
906
827
  let responseData;
907
- if (queryEndpoint) {
908
- const response = await fetch(queryEndpoint, {
909
- method: 'POST',
910
- headers: {
911
- ...queryHeaders,
912
- 'Content-Type': 'application/json',
913
- },
914
- body: JSON.stringify({
915
- metadata: customerId
916
- ? { orgId: customerId, name, task: 'config' }
917
- : { name: dashboardName, task: 'config' },
918
- }),
919
- credentials: withCredentials ? 'include' : 'omit', // If withCredentials is true, set to 'include'. Otherwise, set to 'omit'.
920
- });
921
- responseData = await response.json(); // If the server returns JSON data
922
- }
923
- else {
924
- const url = new URL('https://quill-344421.uc.r.appspot.com/dashconfig');
925
- // Add query parameters to the URL
926
- url.search = new URLSearchParams({
927
- publicKey: publicKey,
928
- orgId: customerId,
929
- name: dashboardName,
930
- }).toString();
931
- const response = await fetch(url, {
932
- method: 'GET',
933
- headers: {
934
- environment: environment || undefined,
935
- },
936
- });
937
- responseData = await response.json();
938
- }
828
+ // Add query parameters to the URL
829
+ const searchParams = new URLSearchParams({
830
+ publicKey: publicKey,
831
+ orgId: customerId,
832
+ name: name,
833
+ }).toString();
834
+ const hostedBody = {
835
+ metadata: customerId
836
+ ? { orgId: customerId, name, task: 'config' }
837
+ : { name: dashboardName, task: 'config' },
838
+ };
839
+ const resp = await (0, dataFetcher_1.getData)(client, `dashconfig?${searchParams}`, 'omit', hostedBody, null, 'GET');
939
840
  const bigFilterObj = {};
940
- if (responseData.dateFilter &&
941
- Object.keys(responseData.dateFilter).length) {
942
- if (responseData.dateFilter.initialRange === 'LAST_90_DAYS') {
841
+ if (resp.dateFilter && Object.keys(resp.dateFilter).length) {
842
+ if (resp.dateFilter.initialRange === 'LAST_90_DAYS') {
943
843
  const filter = {
944
844
  startDate: (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 90 }),
945
845
  endDate: new Date(),
@@ -962,7 +862,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
962
862
  setDateFilter(filter);
963
863
  bigFilterObj[filter.field] = filter;
964
864
  }
965
- else if (responseData.dateFilter.initialRange === 'LAST_30_DAYS') {
865
+ else if (resp.dateFilter.initialRange === 'LAST_30_DAYS') {
966
866
  const filter = {
967
867
  startDate: (0, date_fns_1.sub)((0, date_fns_1.startOfToday)(), { days: 30 }),
968
868
  endDate: new Date(),
@@ -987,7 +887,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
987
887
  bigFilterObj[filter.field] = filter;
988
888
  // return;
989
889
  }
990
- else if (responseData.dateFilter.initialRange === 'CURRENT_MONTH') {
890
+ else if (resp.dateFilter.initialRange === 'CURRENT_MONTH') {
991
891
  const filter = {
992
892
  startDate: (0, date_fns_2.startOfMonth)(new Date()),
993
893
  endDate: new Date(),
@@ -1032,8 +932,8 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
1032
932
  bigFilterObj[filter.field] = filter;
1033
933
  }
1034
934
  }
1035
- if (responseData.filters && responseData.filters.length) {
1036
- Object.values(responseData.filters)
935
+ if (resp.filters && resp.filters.length) {
936
+ Object.values(resp.filters)
1037
937
  .filter(filter => filter.filterType !== 'date')
1038
938
  .forEach(filter => {
1039
939
  // processFilter(filter);
@@ -1045,7 +945,7 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
1045
945
  id: 'tons',
1046
946
  data: bigFilterObj,
1047
947
  });
1048
- if (!responseData.dateFilter) {
948
+ if (!resp.dateFilter) {
1049
949
  setDateFilter(null);
1050
950
  }
1051
951
  }
@@ -1058,15 +958,8 @@ function FormikForm({ data, xAxisOptions, yAxisOptions, fieldOptions, dateFieldO
1058
958
  }, [dashboardName, client]);
1059
959
  (0, react_1.useEffect)(() => {
1060
960
  async function getDashNames() {
1061
- const response2 = await fetch(`https://quill-344421.uc.r.appspot.com/dashnames/${client.publicKey}/`, {
1062
- method: 'GET',
1063
- headers: {
1064
- Authorization: `Bearer `,
1065
- environment: environment,
1066
- },
1067
- });
1068
- const response2Data = await response2.json();
1069
- setDashboardOptions(response2Data.dashboardNames
961
+ const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `dashnames/${client.publicKey}/`, null, 'GET');
962
+ setDashboardOptions(resp.dashboardNames
1070
963
  .filter(elem => elem !== null)
1071
964
  .map(key => ({ label: key, value: key })));
1072
965
  }