@quillsql/react 2.14.17 → 2.15.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.
Files changed (241) hide show
  1. package/dist/cjs/Chart.d.ts.map +1 -1
  2. package/dist/cjs/Chart.js +12 -0
  3. package/dist/cjs/ChartBuilder.d.ts +3 -2
  4. package/dist/cjs/ChartBuilder.d.ts.map +1 -1
  5. package/dist/cjs/ChartBuilder.js +112 -18
  6. package/dist/cjs/ChartEditor.d.ts.map +1 -1
  7. package/dist/cjs/ChartEditor.js +2 -0
  8. package/dist/cjs/Context.d.ts +6 -2
  9. package/dist/cjs/Context.d.ts.map +1 -1
  10. package/dist/cjs/Context.js +160 -33
  11. package/dist/cjs/Dashboard.d.ts.map +1 -1
  12. package/dist/cjs/Dashboard.js +99 -19
  13. package/dist/cjs/QuillProvider.d.ts +38 -1
  14. package/dist/cjs/QuillProvider.d.ts.map +1 -1
  15. package/dist/cjs/QuillProvider.js +2 -2
  16. package/dist/cjs/ReportBuilder.d.ts +7 -2
  17. package/dist/cjs/ReportBuilder.d.ts.map +1 -1
  18. package/dist/cjs/ReportBuilder.js +104 -1273
  19. package/dist/cjs/SQLEditor.d.ts +9 -2
  20. package/dist/cjs/SQLEditor.d.ts.map +1 -1
  21. package/dist/cjs/SQLEditor.js +67 -10
  22. package/dist/cjs/Table.d.ts.map +1 -1
  23. package/dist/cjs/Table.js +12 -0
  24. package/dist/cjs/components/Chart/InternalChart.d.ts.map +1 -1
  25. package/dist/cjs/components/Chart/InternalChart.js +24 -1
  26. package/dist/cjs/components/Dashboard/DashboardTemplate.d.ts.map +1 -1
  27. package/dist/cjs/components/Dashboard/DashboardTemplate.js +2 -1
  28. package/dist/cjs/components/Dashboard/DataLoader.d.ts.map +1 -1
  29. package/dist/cjs/components/Dashboard/DataLoader.js +73 -2
  30. package/dist/cjs/components/Dashboard/util.d.ts +2 -1
  31. package/dist/cjs/components/Dashboard/util.d.ts.map +1 -1
  32. package/dist/cjs/components/Dashboard/util.js +12 -1
  33. package/dist/cjs/components/QuillTable.d.ts +2 -1
  34. package/dist/cjs/components/QuillTable.d.ts.map +1 -1
  35. package/dist/cjs/components/QuillTable.js +2 -2
  36. package/dist/cjs/components/ReportBuilder/AddColumnModal.d.ts +2 -1
  37. package/dist/cjs/components/ReportBuilder/AddColumnModal.d.ts.map +1 -1
  38. package/dist/cjs/components/ReportBuilder/AddColumnModal.js +28 -3
  39. package/dist/cjs/components/ReportBuilder/ColumnComponent.d.ts +49 -0
  40. package/dist/cjs/components/ReportBuilder/ColumnComponent.d.ts.map +1 -0
  41. package/dist/cjs/components/ReportBuilder/ColumnComponent.js +46 -0
  42. package/dist/cjs/components/ReportBuilder/FilterComponent.d.ts +65 -0
  43. package/dist/cjs/components/ReportBuilder/FilterComponent.d.ts.map +1 -0
  44. package/dist/cjs/components/ReportBuilder/FilterComponent.js +51 -0
  45. package/dist/cjs/components/ReportBuilder/LimitComponent.d.ts +42 -0
  46. package/dist/cjs/components/ReportBuilder/LimitComponent.d.ts.map +1 -0
  47. package/dist/cjs/components/ReportBuilder/LimitComponent.js +50 -0
  48. package/dist/cjs/components/ReportBuilder/PivotComponent.d.ts +66 -0
  49. package/dist/cjs/components/ReportBuilder/PivotComponent.d.ts.map +1 -0
  50. package/dist/cjs/components/ReportBuilder/PivotComponent.js +47 -0
  51. package/dist/cjs/components/ReportBuilder/SaveReport.d.ts +162 -0
  52. package/dist/cjs/components/ReportBuilder/SaveReport.d.ts.map +1 -0
  53. package/dist/cjs/components/ReportBuilder/SaveReport.js +31 -0
  54. package/dist/cjs/components/ReportBuilder/SortComponent.d.ts +42 -0
  55. package/dist/cjs/components/ReportBuilder/SortComponent.d.ts.map +1 -0
  56. package/dist/cjs/components/ReportBuilder/SortComponent.js +50 -0
  57. package/dist/cjs/components/ReportBuilder/TableComponent.d.ts +28 -0
  58. package/dist/cjs/components/ReportBuilder/TableComponent.d.ts.map +1 -0
  59. package/dist/cjs/components/ReportBuilder/TableComponent.js +24 -0
  60. package/dist/cjs/components/ReportBuilder/ui.d.ts.map +1 -1
  61. package/dist/cjs/components/ReportBuilder/ui.js +3 -1
  62. package/dist/cjs/components/UiComponents.d.ts +5 -2
  63. package/dist/cjs/components/UiComponents.d.ts.map +1 -1
  64. package/dist/cjs/components/UiComponents.js +7 -5
  65. package/dist/cjs/hooks/useAskQuill.d.ts.map +1 -1
  66. package/dist/cjs/hooks/useAskQuill.js +38 -0
  67. package/dist/cjs/hooks/useDashboard.d.ts +1 -1
  68. package/dist/cjs/hooks/useDashboard.d.ts.map +1 -1
  69. package/dist/cjs/hooks/useDashboard.js +62 -6
  70. package/dist/cjs/hooks/useExport.d.ts.map +1 -1
  71. package/dist/cjs/hooks/useExport.js +5 -2
  72. package/dist/cjs/hooks/useLongLoading.d.ts +13 -0
  73. package/dist/cjs/hooks/useLongLoading.d.ts.map +1 -0
  74. package/dist/cjs/hooks/useLongLoading.js +67 -0
  75. package/dist/cjs/hooks/useQuill.d.ts.map +1 -1
  76. package/dist/cjs/hooks/useQuill.js +25 -1
  77. package/dist/cjs/hooks/useReportBuilder.d.ts +178 -0
  78. package/dist/cjs/hooks/useReportBuilder.d.ts.map +1 -0
  79. package/dist/cjs/hooks/useReportBuilder.js +1495 -0
  80. package/dist/cjs/hooks/useVirtualTables.d.ts.map +1 -1
  81. package/dist/cjs/hooks/useVirtualTables.js +27 -2
  82. package/dist/cjs/index.d.ts +11 -0
  83. package/dist/cjs/index.d.ts.map +1 -1
  84. package/dist/cjs/index.js +17 -1
  85. package/dist/cjs/internals/ReportBuilder/PivotForm.d.ts +14 -1
  86. package/dist/cjs/internals/ReportBuilder/PivotForm.d.ts.map +1 -1
  87. package/dist/cjs/internals/ReportBuilder/PivotForm.js +86 -3
  88. package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts +18 -2
  89. package/dist/cjs/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
  90. package/dist/cjs/internals/ReportBuilder/PivotModal.js +421 -142
  91. package/dist/cjs/models/Filter.d.ts +1 -1
  92. package/dist/cjs/models/Filter.d.ts.map +1 -1
  93. package/dist/cjs/models/Filter.js +3 -3
  94. package/dist/cjs/utils/astFilterProcessing.d.ts.map +1 -1
  95. package/dist/cjs/utils/astFilterProcessing.js +25 -4
  96. package/dist/cjs/utils/astProcessing.d.ts +4 -2
  97. package/dist/cjs/utils/astProcessing.d.ts.map +1 -1
  98. package/dist/cjs/utils/astProcessing.js +25 -2
  99. package/dist/cjs/utils/client.d.ts +2 -1
  100. package/dist/cjs/utils/client.d.ts.map +1 -1
  101. package/dist/cjs/utils/client.js +12 -1
  102. package/dist/cjs/utils/dashboard.d.ts +3 -1
  103. package/dist/cjs/utils/dashboard.d.ts.map +1 -1
  104. package/dist/cjs/utils/dashboard.js +44 -3
  105. package/dist/cjs/utils/filterProcessing.d.ts +2 -1
  106. package/dist/cjs/utils/filterProcessing.d.ts.map +1 -1
  107. package/dist/cjs/utils/filterProcessing.js +12 -1
  108. package/dist/cjs/utils/pivotConstructor.d.ts.map +1 -1
  109. package/dist/cjs/utils/pivotConstructor.js +11 -9
  110. package/dist/cjs/utils/report.d.ts +10 -5
  111. package/dist/cjs/utils/report.d.ts.map +1 -1
  112. package/dist/cjs/utils/report.js +55 -7
  113. package/dist/cjs/utils/reportBuilder.d.ts.map +1 -1
  114. package/dist/cjs/utils/reportBuilder.js +5 -2
  115. package/dist/cjs/utils/schema.d.ts +5 -2
  116. package/dist/cjs/utils/schema.d.ts.map +1 -1
  117. package/dist/cjs/utils/schema.js +14 -2
  118. package/dist/cjs/utils/tableProcessing.d.ts +17 -10
  119. package/dist/cjs/utils/tableProcessing.d.ts.map +1 -1
  120. package/dist/cjs/utils/tableProcessing.js +99 -17
  121. package/dist/esm/Chart.d.ts.map +1 -1
  122. package/dist/esm/Chart.js +13 -1
  123. package/dist/esm/ChartBuilder.d.ts +3 -2
  124. package/dist/esm/ChartBuilder.d.ts.map +1 -1
  125. package/dist/esm/ChartBuilder.js +114 -20
  126. package/dist/esm/ChartEditor.d.ts.map +1 -1
  127. package/dist/esm/ChartEditor.js +3 -1
  128. package/dist/esm/Context.d.ts +6 -2
  129. package/dist/esm/Context.d.ts.map +1 -1
  130. package/dist/esm/Context.js +159 -32
  131. package/dist/esm/Dashboard.d.ts.map +1 -1
  132. package/dist/esm/Dashboard.js +100 -20
  133. package/dist/esm/QuillProvider.d.ts +38 -1
  134. package/dist/esm/QuillProvider.d.ts.map +1 -1
  135. package/dist/esm/QuillProvider.js +2 -2
  136. package/dist/esm/ReportBuilder.d.ts +7 -2
  137. package/dist/esm/ReportBuilder.d.ts.map +1 -1
  138. package/dist/esm/ReportBuilder.js +107 -1273
  139. package/dist/esm/SQLEditor.d.ts +9 -2
  140. package/dist/esm/SQLEditor.d.ts.map +1 -1
  141. package/dist/esm/SQLEditor.js +68 -11
  142. package/dist/esm/Table.d.ts.map +1 -1
  143. package/dist/esm/Table.js +13 -1
  144. package/dist/esm/components/Chart/InternalChart.d.ts.map +1 -1
  145. package/dist/esm/components/Chart/InternalChart.js +25 -2
  146. package/dist/esm/components/Dashboard/DashboardTemplate.d.ts.map +1 -1
  147. package/dist/esm/components/Dashboard/DashboardTemplate.js +3 -2
  148. package/dist/esm/components/Dashboard/DataLoader.d.ts.map +1 -1
  149. package/dist/esm/components/Dashboard/DataLoader.js +74 -3
  150. package/dist/esm/components/Dashboard/util.d.ts +2 -1
  151. package/dist/esm/components/Dashboard/util.d.ts.map +1 -1
  152. package/dist/esm/components/Dashboard/util.js +12 -1
  153. package/dist/esm/components/QuillTable.d.ts +2 -1
  154. package/dist/esm/components/QuillTable.d.ts.map +1 -1
  155. package/dist/esm/components/QuillTable.js +2 -2
  156. package/dist/esm/components/ReportBuilder/AddColumnModal.d.ts +2 -1
  157. package/dist/esm/components/ReportBuilder/AddColumnModal.d.ts.map +1 -1
  158. package/dist/esm/components/ReportBuilder/AddColumnModal.js +29 -4
  159. package/dist/esm/components/ReportBuilder/ColumnComponent.d.ts +49 -0
  160. package/dist/esm/components/ReportBuilder/ColumnComponent.d.ts.map +1 -0
  161. package/dist/esm/components/ReportBuilder/ColumnComponent.js +39 -0
  162. package/dist/esm/components/ReportBuilder/FilterComponent.d.ts +65 -0
  163. package/dist/esm/components/ReportBuilder/FilterComponent.d.ts.map +1 -0
  164. package/dist/esm/components/ReportBuilder/FilterComponent.js +44 -0
  165. package/dist/esm/components/ReportBuilder/LimitComponent.d.ts +42 -0
  166. package/dist/esm/components/ReportBuilder/LimitComponent.d.ts.map +1 -0
  167. package/dist/esm/components/ReportBuilder/LimitComponent.js +46 -0
  168. package/dist/esm/components/ReportBuilder/PivotComponent.d.ts +66 -0
  169. package/dist/esm/components/ReportBuilder/PivotComponent.d.ts.map +1 -0
  170. package/dist/esm/components/ReportBuilder/PivotComponent.js +40 -0
  171. package/dist/esm/components/ReportBuilder/SaveReport.d.ts +162 -0
  172. package/dist/esm/components/ReportBuilder/SaveReport.d.ts.map +1 -0
  173. package/dist/esm/components/ReportBuilder/SaveReport.js +31 -0
  174. package/dist/esm/components/ReportBuilder/SortComponent.d.ts +42 -0
  175. package/dist/esm/components/ReportBuilder/SortComponent.d.ts.map +1 -0
  176. package/dist/esm/components/ReportBuilder/SortComponent.js +46 -0
  177. package/dist/esm/components/ReportBuilder/TableComponent.d.ts +28 -0
  178. package/dist/esm/components/ReportBuilder/TableComponent.d.ts.map +1 -0
  179. package/dist/esm/components/ReportBuilder/TableComponent.js +20 -0
  180. package/dist/esm/components/ReportBuilder/ui.d.ts.map +1 -1
  181. package/dist/esm/components/ReportBuilder/ui.js +4 -2
  182. package/dist/esm/components/UiComponents.d.ts +5 -2
  183. package/dist/esm/components/UiComponents.d.ts.map +1 -1
  184. package/dist/esm/components/UiComponents.js +7 -5
  185. package/dist/esm/hooks/useAskQuill.d.ts.map +1 -1
  186. package/dist/esm/hooks/useAskQuill.js +39 -1
  187. package/dist/esm/hooks/useDashboard.d.ts +1 -1
  188. package/dist/esm/hooks/useDashboard.d.ts.map +1 -1
  189. package/dist/esm/hooks/useDashboard.js +63 -7
  190. package/dist/esm/hooks/useExport.d.ts.map +1 -1
  191. package/dist/esm/hooks/useExport.js +6 -3
  192. package/dist/esm/hooks/useLongLoading.d.ts +13 -0
  193. package/dist/esm/hooks/useLongLoading.d.ts.map +1 -0
  194. package/dist/esm/hooks/useLongLoading.js +64 -0
  195. package/dist/esm/hooks/useQuill.d.ts.map +1 -1
  196. package/dist/esm/hooks/useQuill.js +26 -2
  197. package/dist/esm/hooks/useReportBuilder.d.ts +178 -0
  198. package/dist/esm/hooks/useReportBuilder.d.ts.map +1 -0
  199. package/dist/esm/hooks/useReportBuilder.js +1490 -0
  200. package/dist/esm/hooks/useVirtualTables.d.ts.map +1 -1
  201. package/dist/esm/hooks/useVirtualTables.js +28 -3
  202. package/dist/esm/index.d.ts +11 -0
  203. package/dist/esm/index.d.ts.map +1 -1
  204. package/dist/esm/index.js +8 -0
  205. package/dist/esm/internals/ReportBuilder/PivotForm.d.ts +14 -1
  206. package/dist/esm/internals/ReportBuilder/PivotForm.d.ts.map +1 -1
  207. package/dist/esm/internals/ReportBuilder/PivotForm.js +87 -4
  208. package/dist/esm/internals/ReportBuilder/PivotModal.d.ts +18 -2
  209. package/dist/esm/internals/ReportBuilder/PivotModal.d.ts.map +1 -1
  210. package/dist/esm/internals/ReportBuilder/PivotModal.js +423 -144
  211. package/dist/esm/models/Filter.d.ts +1 -1
  212. package/dist/esm/models/Filter.d.ts.map +1 -1
  213. package/dist/esm/models/Filter.js +3 -3
  214. package/dist/esm/utils/astFilterProcessing.d.ts.map +1 -1
  215. package/dist/esm/utils/astFilterProcessing.js +25 -4
  216. package/dist/esm/utils/astProcessing.d.ts +4 -2
  217. package/dist/esm/utils/astProcessing.d.ts.map +1 -1
  218. package/dist/esm/utils/astProcessing.js +25 -2
  219. package/dist/esm/utils/client.d.ts +2 -1
  220. package/dist/esm/utils/client.d.ts.map +1 -1
  221. package/dist/esm/utils/client.js +12 -1
  222. package/dist/esm/utils/dashboard.d.ts +3 -1
  223. package/dist/esm/utils/dashboard.d.ts.map +1 -1
  224. package/dist/esm/utils/dashboard.js +44 -3
  225. package/dist/esm/utils/filterProcessing.d.ts +2 -1
  226. package/dist/esm/utils/filterProcessing.d.ts.map +1 -1
  227. package/dist/esm/utils/filterProcessing.js +12 -1
  228. package/dist/esm/utils/pivotConstructor.d.ts.map +1 -1
  229. package/dist/esm/utils/pivotConstructor.js +11 -9
  230. package/dist/esm/utils/report.d.ts +10 -5
  231. package/dist/esm/utils/report.d.ts.map +1 -1
  232. package/dist/esm/utils/report.js +55 -7
  233. package/dist/esm/utils/reportBuilder.d.ts.map +1 -1
  234. package/dist/esm/utils/reportBuilder.js +5 -2
  235. package/dist/esm/utils/schema.d.ts +5 -2
  236. package/dist/esm/utils/schema.d.ts.map +1 -1
  237. package/dist/esm/utils/schema.js +14 -2
  238. package/dist/esm/utils/tableProcessing.d.ts +17 -10
  239. package/dist/esm/utils/tableProcessing.d.ts.map +1 -1
  240. package/dist/esm/utils/tableProcessing.js +99 -17
  241. package/package.json +1 -1
@@ -27,7 +27,7 @@ const pivotConstructor_1 = require("../../utils/pivotConstructor");
27
27
  const dates_1 = require("../../utils/dates");
28
28
  const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
29
29
  const columnProcessing_1 = require("../../utils/columnProcessing");
30
- const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotAggregations, setPivotAggregations, popUpTitle, setPopUpTitle, selectedTable, SelectComponent, ButtonComponent, SecondaryButtonComponent, PopoverComponent, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, LoadingComponent = UiComponents_1.QuillLoadingComponent, CardComponent = QuillCard_1.QuillCard, HeaderComponent, SubheaderComponent = UiComponents_1.MemoizedSubHeader, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, LabelComponent, TextComponent, selectedPivotIndex, setSelectedPivotIndex, removePivot, selectPivot, showUpdatePivot, setShowUpdatePivot, data, columns, theme, isOpen, setIsOpen, dateRange, createdPivots, setCreatedPivots, recommendedPivots, setRecommendedPivots, triggerButtonText = 'Pivot', showPivotEditButton = false, showEditOnPivotClick = true, showTrigger = true, pivotCountRequest = 6, query, initialUniqueValues, uniqueValuesIsLoading, initialSelectedPivotTable, disabled = false, pivotRecommendationsEnabled = true, report, dashboardName, dateFilter, }) => {
30
+ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivotColumnField, pivotAggregations, setPivotAggregations, pivotSort, setPivotSort, pivotLimit, setPivotLimit, popUpTitle, setPopUpTitle, selectedTable, SelectComponent, TextInputComponent, ButtonComponent, SecondaryButtonComponent, PopoverComponent, ErrorMessageComponent = UiComponents_1.QuillErrorMessageComponent, PivotRowContainer = UiComponents_1.QuillPivotRowContainer, PivotColumnContainer = UiComponents_1.QuillPivotColumnContainer, LoadingComponent = UiComponents_1.QuillLoadingComponent, CardComponent = QuillCard_1.QuillCard, HeaderComponent, SubheaderComponent = UiComponents_1.MemoizedSubHeader, DeleteButtonComponent = UiComponents_1.MemoizedDeleteButton, LabelComponent, TextComponent, selectedPivotIndex, setSelectedPivotIndex, removePivot, selectPivot, showUpdatePivot, setShowUpdatePivot, data, columns, theme, isOpen, setIsOpen, dateRange, createdPivots, setCreatedPivots, recommendedPivots, setRecommendedPivots, triggerButtonText = 'Pivot', showPivotEditButton = false, showEditOnPivotClick = true, showTrigger = true, pivotCountRequest = 6, query, initialUniqueValues, uniqueValuesIsLoading, initialSelectedPivotTable, disabled = false, pivotRecommendationsEnabled = true, report, dashboardName, dateFilter, parentRef, heightAdjustment = 0, }) => {
31
31
  const { getToken, quillFetchWithToken } = (0, react_1.useContext)(Context_1.FetchContext);
32
32
  const [isLoading, setIsLoading] = (0, react_1.useState)(false);
33
33
  const [previewLoading, setPreviewLoading] = (0, react_1.useState)(false);
@@ -37,6 +37,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
37
37
  const [client] = (0, react_1.useContext)(Context_1.ClientContext);
38
38
  const [schemaData] = (0, react_1.useContext)(Context_1.SchemaDataContext);
39
39
  const { tenants } = (0, react_1.useContext)(Context_1.TenantContext);
40
+ const { eventTracking } = (0, react_1.useContext)(Context_1.EventTrackingContext);
40
41
  const rowFieldRef = (0, react_1.useRef)(null);
41
42
  const colFieldRef = (0, react_1.useRef)(null);
42
43
  const [pivotCardWidth, setPivotCardWidth] = (0, react_1.useState)(420);
@@ -51,6 +52,15 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
51
52
  // const percentageAggButtonRef = useRef<HTMLDivElement>(null);
52
53
  const [dateRanges, setDateRanges] = (0, react_1.useState)({});
53
54
  const [pivotError, setPivotError] = (0, react_1.useState)('');
55
+ const [limitInput, setLimitInput] = (0, react_1.useState)(pivotLimit?.toString() ?? '100');
56
+ const [sortFieldInput, setSortFieldInput] = (0, react_1.useState)(pivotSort?.sortField ?? '');
57
+ const [sortDirectionInput, setSortDirectionInput] = (0, react_1.useState)(pivotSort?.sortDirection ?? 'ASC');
58
+ const [showLimitInput, setShowLimitInput] = (0, react_1.useState)(!!pivotLimit);
59
+ const [showSortInput, setShowSortInput] = (0, react_1.useState)(!!pivotSort);
60
+ const [availableHeight, setAvailableHeight] = (0, react_1.useState)(0);
61
+ const [pivotModalTopHeight, setPivotModalTopHeight] = (0, react_1.useState)(450);
62
+ const [popoverPosition, setPopoverPosition] = (0, react_1.useState)('bottom');
63
+ const popoverRef = (0, react_1.useRef)(null);
54
64
  const getDistinctValues = async (fetchDistinct) => {
55
65
  if (!client) {
56
66
  return {
@@ -71,7 +81,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
71
81
  }
72
82
  let newUniqueValues = uniqueValues ?? null;
73
83
  if (fetchDistinct || !uniqueValues) {
74
- const { filteredColumns: smallStringColumns, exceededColumns } = await (0, tableProcessing_1.getCountsByColumns)(stringColumns, query || '', client, getToken, tenants, schemaData.customFields ?? {}, dashboardName);
84
+ const { filteredColumns: smallStringColumns, exceededColumns } = await (0, tableProcessing_1.getCountsByColumns)(stringColumns, query || '', client, getToken, tenants, schemaData.customFields ?? {}, eventTracking, dashboardName);
75
85
  newUniqueValues = await (0, tableProcessing_1.getUniqueValuesByQuery)({
76
86
  columns: smallStringColumns,
77
87
  query: query || '',
@@ -80,6 +90,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
80
90
  tenants,
81
91
  customFields: schemaData.customFields ?? {},
82
92
  dashboardName,
93
+ eventTracking,
83
94
  });
84
95
  exceededColumns?.forEach((column) => {
85
96
  if (newUniqueValues) {
@@ -111,7 +122,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
111
122
  if (dateColumns.length === 0) {
112
123
  return;
113
124
  }
114
- const dateRangeByColumn = await (0, tableProcessing_1.getQueryDateRangeByColumns)(dateColumns, query || '', client, getToken, tenants, schemaData.customFields ?? {}, dashboardName);
125
+ const dateRangeByColumn = await (0, tableProcessing_1.getQueryDateRangeByColumns)(dateColumns, query || '', client, getToken, tenants, eventTracking, schemaData.customFields ?? {}, dashboardName);
115
126
  setDateRanges(dateRangeByColumn || {});
116
127
  }
117
128
  };
@@ -177,10 +188,22 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
177
188
  page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
178
189
  }, // limit preview
179
190
  getToken,
191
+ eventTracking,
180
192
  });
181
193
  setSamplePivotTable({ pivot: pivot, rows, columns });
182
194
  }
183
195
  catch (e) {
196
+ eventTracking?.logError?.({
197
+ type: 'bug', // TODO: determine type
198
+ severity: 'high',
199
+ message: 'Error fetching pivot data',
200
+ errorMessage: e.message,
201
+ errorStack: e.stack,
202
+ errorData: {
203
+ caller: 'PivotModal',
204
+ function: 'fetchPivotData',
205
+ },
206
+ });
184
207
  if (e instanceof Error) {
185
208
  setPivotError(e.message);
186
209
  return;
@@ -238,10 +261,22 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
238
261
  page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
239
262
  }, // limit preview
240
263
  getToken,
264
+ eventTracking,
241
265
  });
242
266
  setSamplePivotTable({ pivot: pivot, rows, columns });
243
267
  }
244
268
  catch (e) {
269
+ eventTracking?.logError?.({
270
+ type: 'bug', // TODO: determine type
271
+ severity: 'high',
272
+ message: 'Error fetching pivot data',
273
+ errorMessage: e.message,
274
+ errorStack: e.stack,
275
+ errorData: {
276
+ caller: 'PivotModal',
277
+ function: 'fetchPivotData',
278
+ },
279
+ });
245
280
  if (e instanceof Error) {
246
281
  setPivotError(e.message);
247
282
  return;
@@ -309,6 +344,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
309
344
  page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
310
345
  }, // limit preview
311
346
  getToken,
347
+ eventTracking,
312
348
  });
313
349
  setSelectedPivotTable({
314
350
  pivot: pivot,
@@ -317,6 +353,17 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
317
353
  });
318
354
  }
319
355
  catch (e) {
356
+ eventTracking?.logError?.({
357
+ type: 'bug', // TODO: determine type
358
+ severity: 'high',
359
+ message: 'Error fetching pivot tables',
360
+ errorMessage: e.message,
361
+ errorStack: e.stack,
362
+ errorData: {
363
+ caller: 'PivotModal',
364
+ function: 'fetchPivotTables',
365
+ },
366
+ });
320
367
  if (e instanceof Error) {
321
368
  setPivotError(e.message);
322
369
  return;
@@ -379,11 +426,18 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
379
426
  if (pivotColumnField && !columnsToShow[pivotColumnField]) {
380
427
  errors.push('Error in column field: undefined type');
381
428
  }
429
+ if (showLimitInput && limitInput && !Number.isInteger(Number(limitInput))) {
430
+ errors.push('Limit must be an integer');
431
+ }
382
432
  if (errors.length === 0 &&
383
433
  pivotAggregations?.every((p) => p.aggregationType &&
384
434
  (p.valueField ||
385
435
  p.aggregationType === 'count' ||
386
436
  p.aggregationType === 'percentage'))) {
437
+ const sort = showSortInput && !!sortFieldInput && !!sortDirectionInput;
438
+ const sortField = sort ? sortFieldInput : undefined;
439
+ const sortDirection = sort ? sortDirectionInput : undefined;
440
+ const rowLimit = showLimitInput && limitInput ? Number(limitInput) : undefined;
387
441
  const pivot = {
388
442
  rowField: pivotRowField,
389
443
  rowFieldType: columnTypes[pivotRowField ?? ''],
@@ -396,6 +450,10 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
396
450
  valueField2Type: columnTypes[p.valueField2 ?? ''],
397
451
  aggregationType: p.aggregationType,
398
452
  })),
453
+ sort,
454
+ sortField,
455
+ sortDirection,
456
+ rowLimit,
399
457
  // For backwards compatibility
400
458
  valueField: pivotAggregations?.[0]?.valueField,
401
459
  valueFieldType: columnTypes[pivotAggregations?.[0]?.valueField ?? ''],
@@ -416,7 +474,16 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
416
474
  }
417
475
  }
418
476
  setErrors(errors);
419
- }, [pivotRowField, pivotColumnField, pivotAggregations]);
477
+ }, [
478
+ pivotRowField,
479
+ pivotColumnField,
480
+ pivotAggregations,
481
+ sortFieldInput,
482
+ sortDirectionInput,
483
+ showSortInput,
484
+ showLimitInput,
485
+ limitInput,
486
+ ]);
420
487
  const onEditPivot = async (pivot, index, pivotType) => {
421
488
  setIsLoading(false);
422
489
  setErrors([]);
@@ -449,11 +516,23 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
449
516
  page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
450
517
  }, // limit preview
451
518
  getToken,
519
+ eventTracking,
452
520
  });
453
521
  setSamplePivotTable({ pivot, rows, columns });
454
522
  return;
455
523
  }
456
524
  catch (e) {
525
+ eventTracking?.logError?.({
526
+ type: 'bug', // TODO: determine type
527
+ severity: 'high',
528
+ message: 'Error fetching pivot data',
529
+ errorMessage: e.message,
530
+ errorStack: e.stack,
531
+ errorData: {
532
+ caller: 'PivotModal',
533
+ function: 'onEditPivot',
534
+ },
535
+ });
457
536
  if (e instanceof Error) {
458
537
  setPivotError(e.message);
459
538
  setSamplePivotTable(null);
@@ -563,10 +642,22 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
563
642
  page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
564
643
  }, // limit preview
565
644
  getToken,
645
+ eventTracking,
566
646
  });
567
647
  return { pivot: p, rows, columns };
568
648
  }
569
649
  catch (e) {
650
+ eventTracking?.logError?.({
651
+ type: 'bug', // TODO: determine type
652
+ severity: 'high',
653
+ message: 'Error fetching pivot data',
654
+ errorMessage: e.message,
655
+ errorStack: e.stack,
656
+ errorData: {
657
+ caller: 'PivotModal',
658
+ function: 'refreshPivots',
659
+ },
660
+ });
570
661
  return undefined;
571
662
  }
572
663
  }));
@@ -590,6 +681,17 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
590
681
  setSelectedPivotIndex(-1);
591
682
  }
592
683
  catch (e) {
684
+ eventTracking?.logError?.({
685
+ type: 'bug', // TODO: determine type
686
+ severity: 'high',
687
+ message: 'Error fetching pivot recommendations',
688
+ errorMessage: e.message,
689
+ errorStack: e.stack,
690
+ errorData: {
691
+ caller: 'PivotModal',
692
+ function: 'refreshPivots',
693
+ },
694
+ });
593
695
  setPivotError('Failed to fetch pivot recommendations');
594
696
  console.error('Failed parsing pivotai response', e);
595
697
  }
@@ -706,10 +808,22 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
706
808
  page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
707
809
  }, // limit preview
708
810
  getToken,
811
+ eventTracking,
709
812
  });
710
813
  setSamplePivotTable({ pivot, rows, columns });
711
814
  }
712
815
  catch (e) {
816
+ eventTracking?.logError?.({
817
+ type: 'bug', // TODO: determine type
818
+ severity: 'high',
819
+ message: 'Error fetching pivot data',
820
+ errorMessage: e.message,
821
+ errorStack: e.stack,
822
+ errorData: {
823
+ caller: 'PivotModal',
824
+ function: 'pivotFieldChange',
825
+ },
826
+ });
713
827
  if (e instanceof Error) {
714
828
  console.log('error', e);
715
829
  setPivotError(e.message);
@@ -740,10 +854,22 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
740
854
  page: { rowsPerPage: 6, rowsPerRequest: 6, page: 0 },
741
855
  },
742
856
  getToken,
857
+ eventTracking,
743
858
  });
744
859
  return { pivot: p, rows, columns };
745
860
  }
746
861
  catch (e) {
862
+ eventTracking?.logError?.({
863
+ type: 'bug', // TODO: determine type
864
+ severity: 'high',
865
+ message: 'Error fetching pivot data',
866
+ errorMessage: e.message,
867
+ errorStack: e.stack,
868
+ errorData: {
869
+ caller: 'PivotModal',
870
+ function: 'fetchPivotTables',
871
+ },
872
+ });
747
873
  return undefined;
748
874
  }
749
875
  }));
@@ -751,6 +877,58 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
751
877
  };
752
878
  fetchPivotTables();
753
879
  }, [createdPivots, dateRange]);
880
+ const handleResize = () => {
881
+ const parentRefElement = parentRef?.current;
882
+ const popoverRefElement = popoverRef?.current;
883
+ if (parentRefElement && popoverRefElement) {
884
+ const parentRect = parentRefElement.getBoundingClientRect();
885
+ const popoverRect = popoverRefElement.getBoundingClientRect();
886
+ const topOffset = popoverRect.top - parentRect.top;
887
+ const availableHeight = parentRect.height - topOffset;
888
+ setAvailableHeight(availableHeight);
889
+ calculatePopoverPosition();
890
+ }
891
+ };
892
+ const calculatePopoverPosition = () => {
893
+ if (!buttonRef.current)
894
+ return;
895
+ const buttonRect = buttonRef.current.getBoundingClientRect();
896
+ const parentRefElement = parentRef?.current;
897
+ if (!parentRefElement)
898
+ return;
899
+ const parentRect = parentRefElement.getBoundingClientRect();
900
+ // Calculate available space above and below
901
+ const spaceBelow = parentRect.bottom - buttonRect.bottom;
902
+ const spaceAbove = buttonRect.top - parentRect.top;
903
+ const desiredHeight = Math.max(450, spaceAbove - 20);
904
+ setPivotModalTopHeight(desiredHeight);
905
+ // If there's not enough space below but more space above, position above
906
+ if (spaceBelow < desiredHeight && spaceAbove > desiredHeight) {
907
+ setPopoverPosition('top');
908
+ }
909
+ else {
910
+ setPopoverPosition('bottom');
911
+ }
912
+ };
913
+ (0, react_1.useEffect)(() => {
914
+ handleResize();
915
+ window.addEventListener('resize', handleResize);
916
+ // Add scroll listener to the parent element if it exists
917
+ const parentElement = parentRef?.current;
918
+ if (parentElement) {
919
+ parentElement.addEventListener('scroll', handleResize);
920
+ }
921
+ return () => {
922
+ window.removeEventListener('resize', handleResize);
923
+ if (parentElement) {
924
+ parentElement.removeEventListener('scroll', handleResize);
925
+ }
926
+ };
927
+ }, [
928
+ parentRef?.current,
929
+ popoverRef?.current,
930
+ buttonRef?.current?.getBoundingClientRect().top,
931
+ ]);
754
932
  return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
755
933
  position: 'relative',
756
934
  display: 'inline-block',
@@ -785,9 +963,15 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
785
963
  }
786
964
  setIsOpen(!isOpen);
787
965
  setShowUpdatePivot(false);
788
- }, label: triggerButtonText }) })), (0, jsx_runtime_1.jsx)("div", { style: {
789
- position: 'relative',
790
- ...(isOpen && showTrigger && { top: 12 }),
966
+ }, label: triggerButtonText }) })), (0, jsx_runtime_1.jsx)("div", { ref: popoverRef, style: {
967
+ position: 'absolute', // Change from 'relative' to 'absolute'
968
+ ...(isOpen &&
969
+ showTrigger && {
970
+ top: popoverPosition === 'bottom' ? '100%' : 'auto',
971
+ bottom: popoverPosition === 'top' ? '100%' : 'auto',
972
+ marginBottom: popoverPosition === 'top' ? pivotModalTopHeight : 0,
973
+ marginTop: popoverPosition === 'bottom' ? 8 : 0,
974
+ }),
791
975
  }, children: (0, jsx_runtime_1.jsx)(PopoverComponent, { isOpen: isOpen, setIsOpen: (isOpen) => {
792
976
  if (!isOpen) {
793
977
  setShowUpdatePivot(false);
@@ -796,7 +980,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
796
980
  setIsOpen(isOpen);
797
981
  }, ignoredRefs: [buttonRef], popoverTitle: showUpdatePivot || !pivotRecommendationsEnabled
798
982
  ? popUpTitle
799
- : 'Recommended pivots', popoverChildren: (0, jsx_runtime_1.jsx)("div", { style: {
983
+ : 'Recommended pivots', horizontalPadding: 0, titlePaddingLeft: 20, popoverChildren: (0, jsx_runtime_1.jsx)("div", { style: {
800
984
  paddingTop: showUpdatePivot || !pivotRecommendationsEnabled ? 0 : 20,
801
985
  position: 'relative',
802
986
  }, children: showUpdatePivot || !pivotRecommendationsEnabled ? ((0, jsx_runtime_1.jsxs)("div", { style: {
@@ -804,145 +988,223 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
804
988
  display: 'flex',
805
989
  flexDirection: 'column',
806
990
  gap: 20,
807
- }, children: [previewLoading && (0, jsx_runtime_1.jsx)(LoadingComponent, {}), samplePivotTable && !previewLoading && ((0, jsx_runtime_1.jsx)("div", { style: {
808
- width: pivotCardWidth,
809
- minHeight: 160,
810
- }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: samplePivotTable, theme: theme, index: 0, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, showEdit: false, clickable: false, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, CardComponent: CardComponent, onSelectPivot: () => { }, onClose: () => {
811
- setPivotAggregations([
812
- {
813
- valueField: undefined,
814
- valueField2: undefined,
815
- aggregationType: undefined,
816
- },
817
- ]);
818
- setPivotRowField(undefined);
819
- setPivotColumnField(undefined);
820
- setSamplePivotTable(undefined);
821
- } }) })), (0, jsx_runtime_1.jsxs)(PivotColumnContainer, { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
822
- display: 'flex',
823
- flexDirection: 'column',
824
- gap: 4,
825
- }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Groupings" }), (0, jsx_runtime_1.jsxs)(PivotRowContainer, { children: [(0, jsx_runtime_1.jsx)("div", { ref: rowFieldRef, children: (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", label: "Group rows by", value: pivotRowField, onChange: (e) => {
826
- pivotFieldChange('rowField', e.target.value);
827
- setPivotRowField(e.target.value === ''
828
- ? undefined
829
- : e.target.value);
830
- }, options: allowedRowFields
831
- .filter((field) => field !== pivotColumnField)
832
- .map((field) => {
833
- return {
834
- label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(field),
835
- value: field,
836
- };
837
- }), isLoading: uniqueValuesIsLoading, width: 200 }) }), (0, jsx_runtime_1.jsx)("div", { ref: colFieldRef, children: (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-column-field", label: "Group columns by", value: pivotColumnField, onChange: (e) => {
838
- pivotFieldChange('columnField', e.target.value);
839
- setPivotColumnField(e.target.value === ''
840
- ? undefined
841
- : e.target.value);
842
- }, options: allowedColumnFields
843
- .filter((field) => field !== pivotRowField)
844
- .map((field) => {
845
- return {
846
- label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(field),
847
- value: field,
848
- };
849
- }), isLoading: uniqueValuesIsLoading, width: 200, disabled: pivotRowField === undefined }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
850
- display: 'flex',
851
- flexDirection: 'column',
852
- gap: 4,
853
- }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Aggregations" }), (0, jsx_runtime_1.jsxs)(PivotRowContainer, { children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 200 }, children: (0, jsx_runtime_1.jsx)(SubheaderComponent, { label: "Aggregation Type" }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 200 }, children: (0, jsx_runtime_1.jsx)(SubheaderComponent, { label: "Value Field" }) })] }), pivotAggregations?.map((agg, index) => ((0, jsx_runtime_1.jsxs)(PivotRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-aggregation-type", value: agg.aggregationType, onChange: (e) => {
854
- // if (
855
- // e.target.value !== 'count' &&
856
- // agg.valueField &&
857
- // !numberFormatOptions.includes(
858
- // columns.find(
859
- // (col: Column) =>
860
- // col.field === agg.valueField,
861
- // )!.format,
862
- // )
863
- // ) {
864
- // setPivotValueField(undefined);
865
- // }
866
- const newAgg = [
867
- ...pivotAggregations.slice(0, index),
868
- {
869
- ...agg,
870
- aggregationType: e.target.value === ''
871
- ? undefined
872
- : e.target.value,
873
- },
874
- ...pivotAggregations.slice(index + 1),
875
- ];
876
- pivotFieldChange('aggregations', newAgg);
877
- setPivotAggregations(newAgg);
878
- }, options: [
879
- ...[
880
- 'sum',
881
- 'average',
882
- 'count',
883
- 'max',
884
- 'min',
885
- 'percentage',
886
- ].map((option) => {
887
- return { label: option, value: option };
888
- }),
889
- ], width: 200 }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-value-field", value: agg.valueField, onChange: (e) => {
890
- const newAgg = [
891
- ...pivotAggregations.slice(0, index),
892
- {
893
- ...agg,
894
- valueField: e.target.value === ''
895
- ? undefined
896
- : e.target.value,
897
- },
898
- ...pivotAggregations.slice(index + 1),
899
- ];
900
- pivotFieldChange('aggregations', newAgg);
901
- setPivotAggregations(newAgg);
902
- }, options: allowedValueFields.map((field) => {
903
- return {
904
- label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(field),
905
- value: field,
906
- };
907
- }), isLoading: uniqueValuesIsLoading, width: 200 }), (0, jsx_runtime_1.jsx)("div", { style: {
908
- marginLeft: -16,
909
- marginRight: -16,
910
- visibility: index > 0 ? 'visible' : 'hidden',
911
- }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => {
912
- setPivotAggregations([
913
- ...pivotAggregations.slice(0, index),
914
- ...pivotAggregations.slice(index + 1),
915
- ]);
916
- } }) })] }, index)))] })] }), (0, jsx_runtime_1.jsx)("div", { style: {
917
- display: 'flex',
918
- flexDirection: 'row',
919
- marginRight: 'auto',
920
- }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Add Aggregation", onClick: () => {
921
- setPivotAggregations([
922
- ...pivotAggregations,
923
- {
924
- aggregationType: undefined,
925
- valueField: undefined,
926
- valueField2: undefined,
927
- },
928
- ]);
929
- } }) }), errors.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
930
- display: 'flex',
931
- flexDirection: 'column',
932
- gap: 8,
933
- paddingTop: 8,
934
- width: pivotCardWidth,
935
- maxWidth: pivotCardWidth,
936
- }, children: errors.map((error, index) => ((0, jsx_runtime_1.jsx)(ErrorMessageComponent, { errorMessage: error }, `error_message_${index}`))) })), (0, jsx_runtime_1.jsxs)("div", { style: {
991
+ position: 'relative',
992
+ height: '100%',
993
+ overflow: 'auto',
994
+ }, children: [(0, jsx_runtime_1.jsx)(UiComponents_1.OverflowContainer, { style: {
995
+ height: popoverPosition === 'bottom'
996
+ ? Math.max(availableHeight - heightAdjustment, 250)
997
+ : pivotModalTopHeight - 140,
998
+ }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
999
+ display: 'flex',
1000
+ flexDirection: 'column',
1001
+ paddingLeft: 20,
1002
+ paddingRight: 20,
1003
+ }, children: [previewLoading && (0, jsx_runtime_1.jsx)(LoadingComponent, {}), samplePivotTable && !previewLoading && ((0, jsx_runtime_1.jsx)("div", { style: {
1004
+ width: pivotCardWidth,
1005
+ // minHeight: 160,
1006
+ paddingBottom: 20,
1007
+ }, children: (0, jsx_runtime_1.jsx)(PivotList_1.PivotCard, { pivotTable: samplePivotTable, theme: theme, index: 0, selectedPivotIndex: -1, onEditPivot: () => { }, ButtonComponent: ButtonComponent, showEdit: false, clickable: false, minHeight: 180, LabelComponent: LabelComponent, TextComponent: TextComponent, HeaderComponent: HeaderComponent, CardComponent: CardComponent, onSelectPivot: () => { }, onClose: () => {
1008
+ setPivotAggregations([
1009
+ {
1010
+ valueField: undefined,
1011
+ valueField2: undefined,
1012
+ aggregationType: undefined,
1013
+ },
1014
+ ]);
1015
+ setPivotRowField(undefined);
1016
+ setPivotColumnField(undefined);
1017
+ setSamplePivotTable(undefined);
1018
+ setPivotSort(undefined);
1019
+ setPivotLimit(undefined);
1020
+ } }) })), (0, jsx_runtime_1.jsxs)(PivotColumnContainer, { children: [(0, jsx_runtime_1.jsxs)("div", { style: {
1021
+ display: 'flex',
1022
+ flexDirection: 'column',
1023
+ gap: 4,
1024
+ }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Groupings" }), (0, jsx_runtime_1.jsxs)(PivotRowContainer, { children: [(0, jsx_runtime_1.jsx)("div", { ref: rowFieldRef, children: (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-row-field", label: "Group rows by", value: pivotRowField, onChange: (e) => {
1025
+ pivotFieldChange('rowField', e.target.value);
1026
+ setPivotRowField(e.target.value === ''
1027
+ ? undefined
1028
+ : e.target.value);
1029
+ }, options: allowedRowFields
1030
+ .filter((field) => field !== pivotColumnField)
1031
+ .map((field) => {
1032
+ return {
1033
+ label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(field),
1034
+ value: field,
1035
+ };
1036
+ }), isLoading: uniqueValuesIsLoading, width: 200 }) }), (0, jsx_runtime_1.jsx)("div", { ref: colFieldRef, children: (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-column-field", label: "Group columns by", value: pivotColumnField, onChange: (e) => {
1037
+ pivotFieldChange('columnField', e.target.value);
1038
+ setPivotColumnField(e.target.value === ''
1039
+ ? undefined
1040
+ : e.target.value);
1041
+ }, options: allowedColumnFields
1042
+ .filter((field) => field !== pivotRowField)
1043
+ .map((field) => {
1044
+ return {
1045
+ label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(field),
1046
+ value: field,
1047
+ };
1048
+ }), isLoading: uniqueValuesIsLoading, width: 200, disabled: pivotRowField === undefined }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
1049
+ display: 'flex',
1050
+ flexDirection: 'column',
1051
+ gap: 4,
1052
+ paddingBottom: 20,
1053
+ }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Aggregations" }), (0, jsx_runtime_1.jsxs)(PivotRowContainer, { children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 200 }, children: (0, jsx_runtime_1.jsx)(SubheaderComponent, { label: "Aggregation Type" }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 200 }, children: (0, jsx_runtime_1.jsx)(SubheaderComponent, { label: "Value Field" }) })] }), pivotAggregations?.map((agg, index) => ((0, jsx_runtime_1.jsxs)(PivotRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-aggregation-type", value: agg.aggregationType, onChange: (e) => {
1054
+ const newAgg = [
1055
+ ...pivotAggregations.slice(0, index),
1056
+ {
1057
+ ...agg,
1058
+ aggregationType: e.target.value === ''
1059
+ ? undefined
1060
+ : e.target.value,
1061
+ },
1062
+ ...pivotAggregations.slice(index + 1),
1063
+ ];
1064
+ pivotFieldChange('aggregations', newAgg);
1065
+ setPivotAggregations(newAgg);
1066
+ }, options: [
1067
+ ...[
1068
+ 'sum',
1069
+ 'average',
1070
+ 'count',
1071
+ 'max',
1072
+ 'min',
1073
+ 'percentage',
1074
+ ].map((option) => {
1075
+ return { label: option, value: option };
1076
+ }),
1077
+ ], width: 200 }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-value-field", value: agg.valueField, onChange: (e) => {
1078
+ const newAgg = [
1079
+ ...pivotAggregations.slice(0, index),
1080
+ {
1081
+ ...agg,
1082
+ valueField: e.target.value === ''
1083
+ ? undefined
1084
+ : e.target.value,
1085
+ },
1086
+ ...pivotAggregations.slice(index + 1),
1087
+ ];
1088
+ pivotFieldChange('aggregations', newAgg);
1089
+ setPivotAggregations(newAgg);
1090
+ }, options: allowedValueFields.map((field) => {
1091
+ return {
1092
+ label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(field),
1093
+ value: field,
1094
+ };
1095
+ }), isLoading: uniqueValuesIsLoading, width: 200 }), (0, jsx_runtime_1.jsx)("div", { style: {
1096
+ marginLeft: -16,
1097
+ marginRight: -16,
1098
+ visibility: index > 0 ? 'visible' : 'hidden',
1099
+ }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => {
1100
+ setPivotAggregations([
1101
+ ...pivotAggregations.slice(0, index),
1102
+ ...pivotAggregations.slice(index + 1),
1103
+ ]);
1104
+ } }) })] }, index)))] })] }), (0, jsx_runtime_1.jsx)("div", { style: {
1105
+ display: 'flex',
1106
+ flexDirection: 'row',
1107
+ marginRight: 'auto',
1108
+ paddingBottom: 20,
1109
+ }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Add Aggregation", onClick: () => {
1110
+ setPivotAggregations([
1111
+ ...pivotAggregations,
1112
+ {
1113
+ aggregationType: undefined,
1114
+ valueField: undefined,
1115
+ valueField2: undefined,
1116
+ },
1117
+ ]);
1118
+ } }) }), (0, jsx_runtime_1.jsx)(PivotColumnContainer, { children: (0, jsx_runtime_1.jsxs)("div", { style: {
1119
+ display: 'flex',
1120
+ flexDirection: 'column',
1121
+ gap: 4,
1122
+ paddingBottom: 20,
1123
+ }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Sort" }), !showSortInput ? ((0, jsx_runtime_1.jsx)("div", { style: { width: 200 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => setShowSortInput(true), disabled: disabled, label: "Add Sort" }) })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(PivotRowContainer, { children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 200 }, children: (0, jsx_runtime_1.jsx)(SubheaderComponent, { label: "Sort Field" }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 200 }, children: (0, jsx_runtime_1.jsx)(SubheaderComponent, { label: "Sort Direction" }) })] }), (0, jsx_runtime_1.jsxs)(PivotRowContainer, { children: [(0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-sort-field", value: sortFieldInput, onChange: (e) => {
1124
+ setSortFieldInput(e.target.value);
1125
+ if (e.target.value &&
1126
+ sortDirectionInput) {
1127
+ setPivotSort({
1128
+ sortField: e.target.value,
1129
+ sortDirection: sortDirectionInput,
1130
+ });
1131
+ }
1132
+ }, options: (samplePivotTable?.columns ?? []).map((column) => ({
1133
+ label: (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(column.field),
1134
+ value: column.field,
1135
+ })), width: 200 }), (0, jsx_runtime_1.jsx)(SelectComponent, { id: "pivot-sort-direction", value: sortDirectionInput, onChange: (e) => {
1136
+ setSortDirectionInput(e.target.value);
1137
+ if (sortFieldInput && e.target.value) {
1138
+ setPivotSort({
1139
+ sortField: sortFieldInput,
1140
+ sortDirection: e.target.value,
1141
+ });
1142
+ }
1143
+ }, options: [
1144
+ { label: 'Ascending', value: 'ASC' },
1145
+ { label: 'Descending', value: 'DESC' },
1146
+ ], hideEmptyOption: true, width: 200 }), (0, jsx_runtime_1.jsx)("div", { style: {
1147
+ marginLeft: -16,
1148
+ marginRight: -16,
1149
+ }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => {
1150
+ if (pivotSort !== undefined) {
1151
+ setPivotSort(undefined);
1152
+ }
1153
+ setShowSortInput(false);
1154
+ setSortFieldInput('');
1155
+ setSortDirectionInput('ASC');
1156
+ } }) })] })] }))] }) }), (0, jsx_runtime_1.jsx)(PivotColumnContainer, { children: (0, jsx_runtime_1.jsxs)("div", { style: {
1157
+ display: 'flex',
1158
+ flexDirection: 'column',
1159
+ gap: 4,
1160
+ paddingBottom: 20,
1161
+ }, children: [(0, jsx_runtime_1.jsx)(HeaderComponent, { label: "Limit" }), !showLimitInput ? ((0, jsx_runtime_1.jsx)("div", { style: { width: 200 }, children: (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => setShowLimitInput(true), disabled: disabled, label: "Add Limit" }) })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(PivotRowContainer, { children: (0, jsx_runtime_1.jsx)("div", { style: { width: 200 }, children: (0, jsx_runtime_1.jsx)(SubheaderComponent, { label: "Pivot row limit" }) }) }), (0, jsx_runtime_1.jsxs)(PivotRowContainer, { children: [(0, jsx_runtime_1.jsx)(TextInputComponent, { id: "pivot-limit", value: limitInput, width: 180, onChange: (e) => {
1162
+ setLimitInput(e.target.value);
1163
+ const limit = parseInt(e.target.value);
1164
+ if (limit) {
1165
+ setPivotLimit(limit);
1166
+ }
1167
+ else {
1168
+ setPivotLimit(undefined);
1169
+ }
1170
+ } }), (0, jsx_runtime_1.jsx)("div", { style: {
1171
+ marginLeft: -16,
1172
+ marginRight: -16,
1173
+ }, children: (0, jsx_runtime_1.jsx)(DeleteButtonComponent, { onClick: () => {
1174
+ if (pivotLimit !== undefined) {
1175
+ setPivotLimit(undefined);
1176
+ }
1177
+ setShowLimitInput(false);
1178
+ setLimitInput('100');
1179
+ } }) })] })] }))] }) }), errors.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
1180
+ display: 'flex',
1181
+ flexDirection: 'column',
1182
+ gap: 8,
1183
+ paddingTop: 8,
1184
+ width: pivotCardWidth,
1185
+ maxWidth: pivotCardWidth,
1186
+ paddingBottom: 20,
1187
+ }, children: errors.map((error, index) => ((0, jsx_runtime_1.jsx)(ErrorMessageComponent, { errorMessage: error }, `error_message_${index}`))) }))] }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
1188
+ position: 'sticky',
937
1189
  display: 'flex',
938
1190
  flexDirection: 'row',
1191
+ justifyContent: 'flex-end',
939
1192
  marginLeft: 'auto',
940
1193
  gap: 8,
1194
+ bottom: 0,
1195
+ right: 0,
1196
+ backgroundColor: 'white',
1197
+ width: '100%',
1198
+ paddingRight: 20,
941
1199
  }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
942
1200
  setPivotError('');
943
1201
  setIsOpen(false);
944
1202
  setPopUpTitle('Add pivot');
945
- }, label: "Cancel" }), (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: onCommitPivot, label: 'Save', disabled: !(pivotAggregations?.length > 0) ||
1203
+ }, label: "Cancel" }), (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: onCommitPivot, label: 'Save', disabled: (showSortInput &&
1204
+ (!sortFieldInput ||
1205
+ !(samplePivotTable?.columns ?? []).some((c) => c.field === sortFieldInput) ||
1206
+ !sortDirectionInput)) ||
1207
+ !(pivotAggregations?.length > 0) ||
946
1208
  pivotAggregations.some((agg) => !agg.aggregationType ||
947
1209
  (!agg.valueField &&
948
1210
  agg.aggregationType !== 'count' &&
@@ -954,8 +1216,13 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
954
1216
  fontFamily: theme?.fontFamily,
955
1217
  color: theme?.primaryTextColor,
956
1218
  width: selectedPivotTable ? 500 : 600,
957
- maxHeight: 600,
1219
+ minHeight: pivotModalTopHeight - 100,
1220
+ maxHeight: popoverPosition === 'bottom'
1221
+ ? 600
1222
+ : pivotModalTopHeight - 100,
958
1223
  overflowY: 'scroll',
1224
+ paddingRight: 20,
1225
+ paddingLeft: 20,
959
1226
  }, children: selectedPivotIndex >= 0 ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { onClick: () => {
960
1227
  setPopUpTitle('Edit pivot');
961
1228
  onEditPivot(createdPivots[0], 0);
@@ -969,6 +1236,7 @@ const PivotModal = ({ pivotRowField, setPivotRowField, pivotColumnField, setPivo
969
1236
  display: 'flex',
970
1237
  flexDirection: 'row',
971
1238
  gap: 8,
1239
+ paddingRight: 20,
972
1240
  }, children: [(0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Regenerate", onClick: refreshPivots, icon: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", style: { width: 16, height: 16 }, children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M9 4.5a.75.75 0 0 1 .721.544l.813 2.846a3.75 3.75 0 0 0 2.576 2.576l2.846.813a.75.75 0 0 1 0 1.442l-2.846.813a3.75 3.75 0 0 0-2.576 2.576l-.813 2.846a.75.75 0 0 1-1.442 0l-.813-2.846a3.75 3.75 0 0 0-2.576-2.576l-2.846-.813a.75.75 0 0 1 0-1.442l2.846-.813A3.75 3.75 0 0 0 7.466 7.89l.813-2.846A.75.75 0 0 1 9 4.5ZM18 1.5a.75.75 0 0 1 .728.568l.258 1.036c.236.94.97 1.674 1.91 1.91l1.036.258a.75.75 0 0 1 0 1.456l-1.036.258c-.94.236-1.674.97-1.91 1.91l-.258 1.036a.75.75 0 0 1-1.456 0l-.258-1.036a2.625 2.625 0 0 0-1.91-1.91l-1.036-.258a.75.75 0 0 1 0-1.456l1.036-.258a2.625 2.625 0 0 0 1.91-1.91l.258-1.036A.75.75 0 0 1 18 1.5ZM16.5 15a.75.75 0 0 1 .712.513l.394 1.183c.15.447.5.799.948.948l1.183.395a.75.75 0 0 1 0 1.422l-1.183.395c-.447.15-.799.5-.948.948l-.395 1.183a.75.75 0 0 1-1.422 0l-.395-1.183a1.5 1.5 0 0 0-.948-.948l-1.183-.395a.75.75 0 0 1 0-1.422l1.183-.395c.447-.15.799-.5.948-.948l.395-1.183A.75.75 0 0 1 16.5 15Z", clipRule: "evenodd" }) }) }), (0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { label: "Create pivot +", onClick: () => onEditPivot({ aggregations: [{}] }, null) })] }), isLoading || uniqueValuesIsLoading ? ((0, jsx_runtime_1.jsx)(LoadingComponent, {})) : pivotError ? ((0, jsx_runtime_1.jsx)("div", { style: {
973
1241
  width: '100%',
974
1242
  height: '140px',
@@ -1021,7 +1289,7 @@ function generatePivotTitle(pivot) {
1021
1289
  return (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(`${pivot.aggregations[0].aggregationType} of ${pivot.aggregations[0].valueField}
1022
1290
  `);
1023
1291
  }
1024
- return (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(`${pivot.aggregations?.[0]?.aggregationType ?? 'Aggregation'} of ${pivot.aggregations?.[0]?.valueField ?? 'value'} by ${pivot.rowField}${pivot.columnField ? ` and ${pivot.columnField}` : ''}`);
1292
+ return (0, textProcessing_1.snakeAndCamelCaseToTitleCase)(`${pivot.aggregations?.[0]?.aggregationType ?? 'Aggregation'} of ${pivot.aggregations?.[0]?.valueField ?? 'value'}${pivot.rowField ? ` by ${pivot.rowField}` : ''}${pivot.columnField ? ` and ${pivot.columnField}` : ''}`);
1025
1293
  }
1026
1294
  function castValueToDate(value) {
1027
1295
  if (!value) {
@@ -1262,7 +1530,7 @@ function isDateField(fieldType) {
1262
1530
  // }
1263
1531
  // return newData;
1264
1532
  // };
1265
- async function generatePivotTable({ pivot, dateBucket, dateFilter, report, client, getToken, uniqueValues, dashboardName, tenants, additionalProcessing, caller, pivotQuery, }) {
1533
+ async function generatePivotTable({ pivot, dateBucket, dateFilter, report, client, getToken, eventTracking, uniqueValues, dashboardName, tenants, additionalProcessing, caller, pivotQuery, }) {
1266
1534
  try {
1267
1535
  if (report && client) {
1268
1536
  const pivotTable = await (0, pivotConstructor_1.generatePivotWithSQL)({
@@ -1285,6 +1553,17 @@ async function generatePivotTable({ pivot, dateBucket, dateFilter, report, clien
1285
1553
  }
1286
1554
  }
1287
1555
  catch (e) {
1556
+ eventTracking?.logError?.({
1557
+ type: 'bug', // TODO: determine type
1558
+ severity: 'high',
1559
+ message: 'Error generating pivot table',
1560
+ errorMessage: e.message,
1561
+ errorStack: e.stack,
1562
+ errorData: {
1563
+ caller: 'PivotModal',
1564
+ function: 'generatePivotTable',
1565
+ },
1566
+ });
1288
1567
  throw Error(`Failed to generate pivot table with SQL: ${e}`);
1289
1568
  }
1290
1569
  throw Error('Failed to generate pivot table: invalid report');