@quillsql/react 2.8.6 → 2.8.8

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 (82) hide show
  1. package/dist/AddToDashboardModal.js +181 -146
  2. package/dist/BarList.js +44 -36
  3. package/dist/Chart.js +132 -99
  4. package/dist/ChartBuilder.js +89 -80
  5. package/dist/ChartEditor.js +21 -14
  6. package/dist/Context.js +57 -52
  7. package/dist/Dashboard.js +213 -180
  8. package/dist/Dashboard.js.map +1 -1
  9. package/dist/DateRangePicker/Calendar.js +46 -41
  10. package/dist/DateRangePicker/DateRangePicker.js +61 -32
  11. package/dist/DateRangePicker/DateRangePickerButton.js +17 -14
  12. package/dist/DateRangePicker/dateRangePickerUtils.js +90 -76
  13. package/dist/DateRangePicker/dateRangePickerUtils.js.map +1 -1
  14. package/dist/DateRangePicker/index.js +9 -1
  15. package/dist/PieChart.js +70 -35
  16. package/dist/QuillProvider.js +7 -4
  17. package/dist/ReportBuilder.js +129 -120
  18. package/dist/SQLEditor.js +65 -56
  19. package/dist/Table.d.ts.map +1 -1
  20. package/dist/Table.js +71 -60
  21. package/dist/Table.js.map +1 -1
  22. package/dist/TableChart.js +45 -17
  23. package/dist/assets/ArrowDownHeadIcon.js +6 -3
  24. package/dist/assets/ArrowDownIcon.js +6 -3
  25. package/dist/assets/ArrowDownRightIcon.js +6 -3
  26. package/dist/assets/ArrowLeftHeadIcon.js +6 -3
  27. package/dist/assets/ArrowRightHeadIcon.js +6 -3
  28. package/dist/assets/ArrowRightIcon.js +6 -3
  29. package/dist/assets/ArrowUpHeadIcon.js +6 -3
  30. package/dist/assets/ArrowUpIcon.js +6 -3
  31. package/dist/assets/ArrowUpRightIcon.js +6 -3
  32. package/dist/assets/CalendarIcon.js +6 -3
  33. package/dist/assets/CalendarNormalIcon.js +6 -3
  34. package/dist/assets/DoubleArrowLeftHeadIcon.js +6 -3
  35. package/dist/assets/DoubleArrowRightHeadIcon.js +6 -3
  36. package/dist/assets/ExclamationFilledIcon.js +6 -3
  37. package/dist/assets/FilterIcon.js +6 -3
  38. package/dist/assets/LoadingSpinner.js +6 -3
  39. package/dist/assets/RefreshIcon.js +6 -3
  40. package/dist/assets/SearchIcon.js +6 -3
  41. package/dist/assets/UpLeftArrowsIcon.js +6 -3
  42. package/dist/assets/XCircleIcon.js +6 -3
  43. package/dist/assets/XIcon.js +6 -3
  44. package/dist/assets/index.js +49 -21
  45. package/dist/components/BigModal/BigModal.js +39 -13
  46. package/dist/components/Dropdown/Dropdown.js +53 -24
  47. package/dist/components/Dropdown/DropdownItem.js +35 -9
  48. package/dist/components/Dropdown/index.js +11 -2
  49. package/dist/components/Modal/Modal.js +39 -13
  50. package/dist/components/Modal/index.js +9 -1
  51. package/dist/components/QuillCard.js +13 -8
  52. package/dist/components/SqlTextEditor.js +11 -4
  53. package/dist/components/SqlTextEditor.js.map +1 -0
  54. package/dist/components/UiComponents.js +51 -37
  55. package/dist/components/selectUtils.js +17 -6
  56. package/dist/contexts/BaseColorContext.js +6 -3
  57. package/dist/contexts/HoveredValueContext.js +6 -3
  58. package/dist/contexts/RootStylesContext.js +6 -3
  59. package/dist/contexts/SelectedValueContext.js +6 -3
  60. package/dist/contexts/index.js +15 -4
  61. package/dist/hooks/index.js +15 -4
  62. package/dist/hooks/useDashboard.js +17 -11
  63. package/dist/hooks/useDashboard.js.map +1 -0
  64. package/dist/hooks/useInternalState.js +6 -3
  65. package/dist/hooks/useOnClickOutside.js +6 -3
  66. package/dist/hooks/useOnWindowResize.js +7 -4
  67. package/dist/hooks/useQuill.js +16 -11
  68. package/dist/hooks/useSelectOnKeyDown.js +7 -4
  69. package/dist/index.js +33 -13
  70. package/dist/index.js.map +1 -1
  71. package/dist/internals/ReportBuilder/PivotList.js +20 -14
  72. package/dist/internals/ReportBuilder/PivotModal.js +92 -84
  73. package/dist/internals/ReportBuilder/PivotModal.spec.js +73 -70
  74. package/dist/lib/font.js +6 -2
  75. package/dist/lib/index.js +20 -3
  76. package/dist/lib/inputTypes.js +3 -1
  77. package/dist/lib/utils.js +19 -8
  78. package/dist/utils/aggregate.js +35 -28
  79. package/dist/utils/colorToHex.js +5 -1
  80. package/dist/utils/dataFetcher.js +8 -2
  81. package/dist/utils/downloadCSV.js +6 -1
  82. package/package.json +2 -1
@@ -1,33 +1,39 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.getPostgresBasicType = void 0;
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
2
8
  // @ts-nocheck
3
- import { useState, useContext, useCallback, useEffect, useMemo, useRef, } from 'react';
9
+ const react_1 = require("react");
4
10
  // import './nightOwlLight.css';
5
- import { ClientContext, SchemaContext, ThemeContext } from './Context';
6
- import { convertPostgresColumn } from './SQLEditor';
7
- import { format } from 'date-fns';
8
- import { PivotModal, generatePivotTable, } from './internals/ReportBuilder/PivotModal';
9
- import { getData, getDataFromCloud } from './utils/dataFetcher';
10
- import { QuillDateRangePicker } from './Dashboard';
11
- import { getRangeFromPreset, reportBuilderOptions, } from './DateRangePicker/dateRangePickerUtils';
12
- import Table from './Table';
13
- import ChartBuilder from './ChartBuilder';
14
- import { MemoizedModal, MemoizedTextInput, MemoizedSelect, MemoizedButton, MemoizedSecondaryButton, MemoizedHeader, MemoizedLabel, MemoizedDeleteButton, MemoizedText, MemoizedPopover, } from './components/UiComponents';
15
- export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeLoading, onChangePivot, onDateFilterChange, onChangeFields, onError, TextInput = MemoizedTextInput, containerStyle, Select = MemoizedSelect, Button = MemoizedButton, SecondaryButton = MemoizedSecondaryButton, Header = MemoizedHeader, Label = MemoizedLabel, DeleteButton = MemoizedDeleteButton, Text = MemoizedText, Modal = MemoizedModal, Popover = MemoizedPopover, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, tagStyle, tableName, dateColumn, selectedTagBorderColor, chartBuilderEnabled = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, editSQLEnabled, navigateToSQLEditor, }) {
16
- const [data, setData] = useState([]);
17
- const [client, setClient] = useContext(ClientContext);
18
- const [schema, setSchema] = useContext(SchemaContext);
19
- const [theme] = useContext(ThemeContext);
20
- const [columns, setColumns] = useState([]);
21
- const [fields, setFields] = useState([]);
22
- const [loading, setLoading] = useState(false);
23
- const [selectedPivot, setSelectedPivot] = useState(null);
11
+ const Context_1 = require("./Context");
12
+ const SQLEditor_1 = require("./SQLEditor");
13
+ const date_fns_1 = require("date-fns");
14
+ const PivotModal_1 = require("./internals/ReportBuilder/PivotModal");
15
+ const dataFetcher_1 = require("./utils/dataFetcher");
16
+ const Dashboard_1 = require("./Dashboard");
17
+ const dateRangePickerUtils_1 = require("./DateRangePicker/dateRangePickerUtils");
18
+ const Table_1 = __importDefault(require("./Table"));
19
+ const ChartBuilder_1 = __importDefault(require("./ChartBuilder"));
20
+ const UiComponents_1 = require("./components/UiComponents");
21
+ function ReportBuilder({ onChangeQuery, onChangeData, onChangeColumns, onChangeLoading, onChangePivot, onDateFilterChange, onChangeFields, onError, TextInput = UiComponents_1.MemoizedTextInput, containerStyle, Select = UiComponents_1.MemoizedSelect, Button = UiComponents_1.MemoizedButton, SecondaryButton = UiComponents_1.MemoizedSecondaryButton, Header = UiComponents_1.MemoizedHeader, Label = UiComponents_1.MemoizedLabel, DeleteButton = UiComponents_1.MemoizedDeleteButton, Text = UiComponents_1.MemoizedText, Modal = UiComponents_1.MemoizedModal, Popover = UiComponents_1.MemoizedPopover, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, tagStyle, tableName, dateColumn, selectedTagBorderColor, chartBuilderEnabled = false, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, editSQLEnabled, navigateToSQLEditor, }) {
22
+ const [data, setData] = (0, react_1.useState)([]);
23
+ const [client, setClient] = (0, react_1.useContext)(Context_1.ClientContext);
24
+ const [schema, setSchema] = (0, react_1.useContext)(Context_1.SchemaContext);
25
+ const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
26
+ const [columns, setColumns] = (0, react_1.useState)([]);
27
+ const [fields, setFields] = (0, react_1.useState)([]);
28
+ const [loading, setLoading] = (0, react_1.useState)(false);
29
+ const [selectedPivot, setSelectedPivot] = (0, react_1.useState)(null);
24
30
  const defaultDateRange = [null, null, null];
25
- const [dateRange, setDateRange] = useState(defaultDateRange);
26
- useEffect(() => {
31
+ const [dateRange, setDateRange] = (0, react_1.useState)(defaultDateRange);
32
+ (0, react_1.useEffect)(() => {
27
33
  let isSubscribed = true;
28
34
  async function getClient() {
29
35
  try {
30
- const resp = await getDataFromCloud(client, `client/${client.publicKey}/`, null, 'GET');
36
+ const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `client/${client.publicKey}/`, null, 'GET');
31
37
  if (resp) {
32
38
  setClient({ ...client, ...resp.client });
33
39
  }
@@ -43,10 +49,10 @@ export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeCol
43
49
  isSubscribed = false;
44
50
  };
45
51
  }, []);
46
- useEffect(() => {
52
+ (0, react_1.useEffect)(() => {
47
53
  let isSubscribed = true;
48
54
  async function getSchema() {
49
- const resp = await getDataFromCloud(client, `schema2/${client.publicKey}/`, null, 'GET');
55
+ const resp = await (0, dataFetcher_1.getDataFromCloud)(client, `schema2/${client.publicKey}/`, null, 'GET');
50
56
  if (isSubscribed) {
51
57
  setSchema(resp.tables);
52
58
  }
@@ -58,17 +64,17 @@ export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeCol
58
64
  isSubscribed = false;
59
65
  };
60
66
  }, []);
61
- useEffect(() => {
67
+ (0, react_1.useEffect)(() => {
62
68
  if (onDateFilterChange) {
63
69
  onDateFilterChange(dateRange);
64
70
  }
65
71
  }, [dateRange]);
66
- useEffect(() => {
72
+ (0, react_1.useEffect)(() => {
67
73
  if (onDateFilterChange) {
68
74
  onDateFilterChange(defaultDateRange);
69
75
  }
70
76
  }, []);
71
- useEffect(() => {
77
+ (0, react_1.useEffect)(() => {
72
78
  setColumns([]);
73
79
  }, [tableName]);
74
80
  const runQuery = async (query) => {
@@ -79,7 +85,7 @@ export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeCol
79
85
  : { query, task: 'query' },
80
86
  };
81
87
  const cloudBody = { query };
82
- const resp = await getData(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
88
+ const resp = await (0, dataFetcher_1.getData)(client, 'dashquery', 'same-origin', hostedBody, cloudBody);
83
89
  if (resp && resp.errorMessage) {
84
90
  onError(resp.errorMessage);
85
91
  setData([]);
@@ -94,9 +100,9 @@ export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeCol
94
100
  return;
95
101
  }
96
102
  setData(resp.rows);
97
- setColumns(resp.fields.map(elem => convertPostgresColumn(elem)));
103
+ setColumns(resp.fields.map(elem => (0, SQLEditor_1.convertPostgresColumn)(elem)));
98
104
  if (selectedPivot) {
99
- const { rows, columns } = generatePivotTable(selectedPivot, resp.rows, dateRange);
105
+ const { rows, columns } = (0, PivotModal_1.generatePivotTable)(selectedPivot, resp.rows, dateRange);
100
106
  if (onChangePivot) {
101
107
  onChangePivot(selectedPivot, columns, rows);
102
108
  }
@@ -106,7 +112,7 @@ export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeCol
106
112
  onChangeData(resp.rows);
107
113
  }
108
114
  if (onChangeColumns) {
109
- onChangeColumns(resp.fields.map(elem => convertPostgresColumn(elem)));
115
+ onChangeColumns(resp.fields.map(elem => (0, SQLEditor_1.convertPostgresColumn)(elem)));
110
116
  }
111
117
  }
112
118
  setFields(resp.fields);
@@ -115,7 +121,7 @@ export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeCol
115
121
  }
116
122
  setLoading(false);
117
123
  };
118
- useEffect(() => {
124
+ (0, react_1.useEffect)(() => {
119
125
  if (onChangeLoading) {
120
126
  onChangeLoading(loading);
121
127
  }
@@ -123,17 +129,18 @@ export default function ReportBuilder({ onChangeQuery, onChangeData, onChangeCol
123
129
  if (!schema || !schema.length || !tableName) {
124
130
  return null;
125
131
  }
126
- return (_jsx(ReportingTool, { containerStyle: containerStyle, destinationDashboard: destinationDashboard, client: client, editSQLEnabled: editSQLEnabled, navigateToSQLEditor: navigateToSQLEditor, theme: theme, data: data, columns: columns, fields: fields, chartBuilderTitle: chartBuilderTitle, chartBuilderButtonLabel: chartBuilderButtonLabel, onChangeData: onChangeData, onChangeColumns: onChangeColumns, onChangePivot: onChangePivot, selectedPivot: selectedPivot, setSelectedPivot: pivot => {
132
+ return ((0, jsx_runtime_1.jsx)(ReportingTool, { containerStyle: containerStyle, destinationDashboard: destinationDashboard, client: client, editSQLEnabled: editSQLEnabled, navigateToSQLEditor: navigateToSQLEditor, theme: theme, data: data, columns: columns, fields: fields, chartBuilderTitle: chartBuilderTitle, chartBuilderButtonLabel: chartBuilderButtonLabel, onChangeData: onChangeData, onChangeColumns: onChangeColumns, onChangePivot: onChangePivot, selectedPivot: selectedPivot, setSelectedPivot: pivot => {
127
133
  setSelectedPivot(pivot);
128
134
  if (onChangePivot) {
129
135
  const table = pivot
130
- ? generatePivotTable(pivot, data, dateRange)
136
+ ? (0, PivotModal_1.generatePivotTable)(pivot, data, dateRange)
131
137
  : { rows: null, columns: null };
132
138
  onChangePivot(pivot, table.columns, table.rows);
133
139
  }
134
140
  }, schema: schema, tableName: tableName, dateColumn: dateColumn, selectedTagBorderColor: selectedTagBorderColor, onChangeQuery: onChangeQuery, runQuery: runQuery, dateRange: dateRange, setDateRange: setDateRange, defaultDateRange: defaultDateRange, chartBuilderEnabled: chartBuilderEnabled, HeaderComponent: Header, LabelComponent: Label, SelectComponent: Select, TextComponent: Text, ButtonComponent: Button, SecondaryButtonComponent: SecondaryButton, ModalComponent: Modal, PopoverComponent: Popover, TextInputComponent: TextInput, tagStyle: tagStyle, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions }));
135
141
  }
136
- export function getPostgresBasicType(column) {
142
+ exports.default = ReportBuilder;
143
+ function getPostgresBasicType(column) {
137
144
  let format;
138
145
  // first check if column.dataTypeID exists
139
146
  if (column.dataTypeID) {
@@ -181,6 +188,7 @@ export function getPostgresBasicType(column) {
181
188
  }
182
189
  return format;
183
190
  }
191
+ exports.getPostgresBasicType = getPostgresBasicType;
184
192
  const newDateWhereAST = (column, dateRange, databaseType) => {
185
193
  // all time means no filter
186
194
  if (dateRange[2] === 'at') {
@@ -188,7 +196,7 @@ const newDateWhereAST = (column, dateRange, databaseType) => {
188
196
  }
189
197
  // if using preset
190
198
  if (dateRange[2]) {
191
- const timeInterval = reportBuilderOptions.find(elem => elem.value === dateRange[2])?.dayInterval;
199
+ const timeInterval = dateRangePickerUtils_1.reportBuilderOptions.find(elem => elem.value === dateRange[2])?.dayInterval;
192
200
  switch (databaseType) {
193
201
  case 'BigQuery': {
194
202
  return {
@@ -320,11 +328,11 @@ const newDateWhereAST = (column, dateRange, databaseType) => {
320
328
  value: [
321
329
  {
322
330
  type: 'single_quote_string',
323
- value: format(new Date(dateRange[0]), 'MM/dd/yyyy'),
331
+ value: (0, date_fns_1.format)(new Date(dateRange[0]), 'MM/dd/yyyy'),
324
332
  },
325
333
  {
326
334
  type: 'single_quote_string',
327
- value: format(new Date(dateRange[1]), 'MM/dd/yyyy'),
335
+ value: (0, date_fns_1.format)(new Date(dateRange[1]), 'MM/dd/yyyy'),
328
336
  },
329
337
  ],
330
338
  },
@@ -332,11 +340,11 @@ const newDateWhereAST = (column, dateRange, databaseType) => {
332
340
  }
333
341
  };
334
342
  function ReportingTool({ schema, data, columns, runQuery, SelectComponent, ButtonComponent, SecondaryButtonComponent, editSQLEnabled, navigateToSQLEditor, onChangeQuery, onChangePivot, selectedPivot, setSelectedPivot, theme, ModalComponent, HeaderComponent, PopoverComponent, TextComponent, TextInputComponent, LabelComponent, tagStyle, tableName, dateColumn, selectedTagBorderColor, dateRange, setDateRange, defaultDateRange, chartBuilderEnabled, fields, containerStyle, showTableFormatOptions = false, showDateFieldOptions = false, showAccessControlOptions = false, client, destinationDashboard, chartBuilderTitle, chartBuilderButtonLabel, }) {
335
- const selectedTable = useMemo(() => schema.find(t => t.displayName === tableName), [schema, tableName]);
336
- const [selectedColumn, setSelectedColumn] = useState(schema[0].columns.find(elem => elem.name !== 'id'));
337
- const parentRef = useRef();
338
- const [filters, setFilters] = useState([]);
339
- const [AST, setAST] = useState({
343
+ const selectedTable = (0, react_1.useMemo)(() => schema.find(t => t.displayName === tableName), [schema, tableName]);
344
+ const [selectedColumn, setSelectedColumn] = (0, react_1.useState)(schema[0].columns.find(elem => elem.name !== 'id'));
345
+ const parentRef = (0, react_1.useRef)();
346
+ const [filters, setFilters] = (0, react_1.useState)([]);
347
+ const [AST, setAST] = (0, react_1.useState)({
340
348
  with: null,
341
349
  type: 'select',
342
350
  options: null,
@@ -352,32 +360,32 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
352
360
  limit: { seperator: '', value: [] },
353
361
  window: null,
354
362
  });
355
- const [ASTNoDateColumn, setASTNoDateColumn] = useState(AST);
356
- const [numberStart, setNumberStart] = useState(0);
357
- const [numberEnd, setNumberEnd] = useState(0);
358
- const [filterDateRange, setFilterDateRange] = useState(getRangeFromPreset('90d'));
359
- const [computedColumns, setComputedColumns] = useState({});
360
- const [stringFilterValues, setStringFilterValues] = useState([]);
361
- const [columnType, setColumnType] = useState(getPostgresBasicType(schema[0].columns[0]));
362
- const [sqlQuery, setSqlQuery] = useState('');
363
- const [sqlQueryNoDateColumn, setSqlQueryNoDateColumn] = useState('');
364
- const [indexBeingEdited, setIndexBeingEdited] = useState(-1);
365
- const [isAddFilterModalOpen, setIsAddFilterModalOpen] = useState(false);
366
- const [isEdittingPivot, setIsEdittingPivot] = useState(false);
367
- const [isPivotModalOpen, setIsPivotModalOpen] = useState(false);
368
- const [isChartBuilderOpen, setIsChartBuilderOpen] = useState(false);
369
- const [selectedPivotIndex, setSelectedPivotIndex] = useState(-1);
370
- const [createdPivots, setCreatedPivots] = useState([]);
371
- const [recommendedPivots, setRecommendedPivots] = useState([]);
372
- const [pivotRowField, setPivotRowField] = useState(undefined);
373
- const [pivotColumnField, setPivotColumnField] = useState(undefined);
374
- const [pivotValueField, setPivotValueField] = useState(undefined);
375
- const [pivotAggregation, setPivotAggregation] = useState(undefined);
376
- const [pivotPopUpTitle, setPivotPopUpTitle] = useState('Add Pivot');
377
- useEffect(() => {
363
+ const [ASTNoDateColumn, setASTNoDateColumn] = (0, react_1.useState)(AST);
364
+ const [numberStart, setNumberStart] = (0, react_1.useState)(0);
365
+ const [numberEnd, setNumberEnd] = (0, react_1.useState)(0);
366
+ const [filterDateRange, setFilterDateRange] = (0, react_1.useState)((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
367
+ const [computedColumns, setComputedColumns] = (0, react_1.useState)({});
368
+ const [stringFilterValues, setStringFilterValues] = (0, react_1.useState)([]);
369
+ const [columnType, setColumnType] = (0, react_1.useState)(getPostgresBasicType(schema[0].columns[0]));
370
+ const [sqlQuery, setSqlQuery] = (0, react_1.useState)('');
371
+ const [sqlQueryNoDateColumn, setSqlQueryNoDateColumn] = (0, react_1.useState)('');
372
+ const [indexBeingEdited, setIndexBeingEdited] = (0, react_1.useState)(-1);
373
+ const [isAddFilterModalOpen, setIsAddFilterModalOpen] = (0, react_1.useState)(false);
374
+ const [isEdittingPivot, setIsEdittingPivot] = (0, react_1.useState)(false);
375
+ const [isPivotModalOpen, setIsPivotModalOpen] = (0, react_1.useState)(false);
376
+ const [isChartBuilderOpen, setIsChartBuilderOpen] = (0, react_1.useState)(false);
377
+ const [selectedPivotIndex, setSelectedPivotIndex] = (0, react_1.useState)(-1);
378
+ const [createdPivots, setCreatedPivots] = (0, react_1.useState)([]);
379
+ const [recommendedPivots, setRecommendedPivots] = (0, react_1.useState)([]);
380
+ const [pivotRowField, setPivotRowField] = (0, react_1.useState)(undefined);
381
+ const [pivotColumnField, setPivotColumnField] = (0, react_1.useState)(undefined);
382
+ const [pivotValueField, setPivotValueField] = (0, react_1.useState)(undefined);
383
+ const [pivotAggregation, setPivotAggregation] = (0, react_1.useState)(undefined);
384
+ const [pivotPopUpTitle, setPivotPopUpTitle] = (0, react_1.useState)('Add Pivot');
385
+ (0, react_1.useEffect)(() => {
378
386
  setColumnType(getPostgresBasicType(selectedColumn));
379
387
  }, [selectedColumn]);
380
- useEffect(() => {
388
+ (0, react_1.useEffect)(() => {
381
389
  removePivot();
382
390
  setCreatedPivots([]);
383
391
  setRecommendedPivots([]);
@@ -390,7 +398,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
390
398
  setStringFilterValues([]);
391
399
  setNumberStart(0);
392
400
  setNumberEnd(0);
393
- setFilterDateRange(getRangeFromPreset('90d'));
401
+ setFilterDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
394
402
  return;
395
403
  }
396
404
  setSelectedColumn(matchingColumn);
@@ -408,9 +416,9 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
408
416
  setIndexBeingEdited(index);
409
417
  }
410
418
  };
411
- const selectedPivotTable = useMemo(() => {
419
+ const selectedPivotTable = (0, react_1.useMemo)(() => {
412
420
  if (selectedPivot && data) {
413
- return generatePivotTable(selectedPivot, data, dateRange);
421
+ return (0, PivotModal_1.generatePivotTable)(selectedPivot, data, dateRange);
414
422
  }
415
423
  else {
416
424
  return {};
@@ -426,7 +434,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
426
434
  const selectPivot = (pivot, index) => {
427
435
  setSelectedPivotIndex(index);
428
436
  setSelectedPivot(pivot);
429
- const pivotTable = generatePivotTable(pivot, data, dateRange);
437
+ const pivotTable = (0, PivotModal_1.generatePivotTable)(pivot, data, dateRange);
430
438
  if (onChangePivot) {
431
439
  onChangePivot(pivot, pivotTable.columns, pivotTable.rows);
432
440
  }
@@ -460,9 +468,9 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
460
468
  }
461
469
  else if (columnType === 'date') {
462
470
  const label = filterDateRange[2]
463
- ? reportBuilderOptions.find(elem => elem.value === filterDateRange[2])
471
+ ? dateRangePickerUtils_1.reportBuilderOptions.find(elem => elem.value === filterDateRange[2])
464
472
  ?.text
465
- : `${format(new Date(filterDateRange[0]), 'MMM dd')} - ${format(new Date(filterDateRange[1]), 'MMM dd')}`;
473
+ : `${(0, date_fns_1.format)(new Date(filterDateRange[0]), 'MMM dd')} - ${(0, date_fns_1.format)(new Date(filterDateRange[1]), 'MMM dd')}`;
466
474
  setFilters(filters => {
467
475
  const newFilters = [...filters];
468
476
  newFilters[index] = {
@@ -477,7 +485,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
477
485
  setStringFilterValues([]);
478
486
  setNumberStart(0);
479
487
  setNumberEnd(0);
480
- setFilterDateRange(getRangeFromPreset('90d'));
488
+ setFilterDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
481
489
  setIndexBeingEdited(-1);
482
490
  return;
483
491
  }
@@ -502,7 +510,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
502
510
  setStringFilterValues([]);
503
511
  setNumberStart(0);
504
512
  setNumberEnd(0);
505
- setFilterDateRange(getRangeFromPreset('90d'));
513
+ setFilterDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
506
514
  return;
507
515
  }
508
516
  else if (columnType === 'number') {
@@ -521,14 +529,14 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
521
529
  setStringFilterValues([]);
522
530
  setNumberStart(0);
523
531
  setNumberEnd(0);
524
- setFilterDateRange(getRangeFromPreset('90d'));
532
+ setFilterDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
525
533
  return;
526
534
  }
527
535
  else if (columnType === 'date') {
528
536
  const label = filterDateRange[2]
529
- ? reportBuilderOptions.find(elem => elem.value === filterDateRange[2])
537
+ ? dateRangePickerUtils_1.reportBuilderOptions.find(elem => elem.value === filterDateRange[2])
530
538
  ?.text
531
- : `${format(new Date(filterDateRange[0]), 'MMM dd')} - ${format(new Date(filterDateRange[1]), 'MMM dd')}`;
539
+ : `${(0, date_fns_1.format)(new Date(filterDateRange[0]), 'MMM dd')} - ${(0, date_fns_1.format)(new Date(filterDateRange[1]), 'MMM dd')}`;
532
540
  setFilters(filters => {
533
541
  return [
534
542
  ...filters,
@@ -543,7 +551,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
543
551
  setStringFilterValues([]);
544
552
  setNumberStart(0);
545
553
  setNumberEnd(0);
546
- setFilterDateRange(getRangeFromPreset('90d'));
554
+ setFilterDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)('90d'));
547
555
  }
548
556
  }
549
557
  };
@@ -553,7 +561,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
553
561
  runQuery(queryToUse);
554
562
  }
555
563
  };
556
- useEffect(() => {
564
+ (0, react_1.useEffect)(() => {
557
565
  // if selected table changes, clear everything
558
566
  if (selectedTable.displayName !== AST.from.table) {
559
567
  setSelectedColumn(selectedTable.columns.find(elem => elem.name !== 'id'));
@@ -661,7 +669,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
661
669
  }
662
670
  };
663
671
  // USE EFFECT HOOK THAT TRANSFORMS "FILTERS ARRAY INTO AST"
664
- useEffect(() => {
672
+ (0, react_1.useEffect)(() => {
665
673
  if (filters.length || dateRange) {
666
674
  setAST(generateNewAST(true));
667
675
  setASTNoDateColumn(generateNewAST(false));
@@ -675,7 +683,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
675
683
  });
676
684
  setIndexBeingEdited(-1);
677
685
  };
678
- const computeStats = useCallback(column => {
686
+ const computeStats = (0, react_1.useCallback)(column => {
679
687
  if ((!computedColumns[column.name] ||
680
688
  computedColumns[column.name].length === 0) &&
681
689
  data) {
@@ -713,7 +721,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
713
721
  }
714
722
  }, [data, computedColumns]);
715
723
  // Call this function whenever the selected column changes
716
- useEffect(() => {
724
+ (0, react_1.useEffect)(() => {
717
725
  computeStats(selectedColumn);
718
726
  }, [selectedColumn, data]);
719
727
  // Use the results directly in your component
@@ -728,11 +736,11 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
728
736
  // }
729
737
  // }
730
738
  // }, [AST]);
731
- useEffect(() => {
739
+ (0, react_1.useEffect)(() => {
732
740
  const getSqlQueryFromAST = async () => {
733
741
  try {
734
742
  if (AST && AST.from[0].table) {
735
- const resp = await getDataFromCloud(client, 'sqlify', {
743
+ const resp = await (0, dataFetcher_1.getDataFromCloud)(client, 'sqlify', {
736
744
  ast: AST,
737
745
  });
738
746
  const newSqlQuery = resp.query; // assuming the response contains the SQL query
@@ -749,11 +757,11 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
749
757
  };
750
758
  getSqlQueryFromAST();
751
759
  }, [AST]);
752
- useEffect(() => {
760
+ (0, react_1.useEffect)(() => {
753
761
  const getSqlQueryFromAST = async () => {
754
762
  try {
755
763
  if (ASTNoDateColumn && ASTNoDateColumn.from[0].table) {
756
- const resp = await getDataFromCloud(client, 'sqlify', {
764
+ const resp = await (0, dataFetcher_1.getDataFromCloud)(client, 'sqlify', {
757
765
  ast: ASTNoDateColumn,
758
766
  });
759
767
  const newSqlQuery = resp.query; // assuming the response contains the SQL query
@@ -771,19 +779,19 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
771
779
  if (!schema || !schema.length) {
772
780
  return null;
773
781
  }
774
- return (_jsxs("div", { style: { fontFamily: theme?.fontFamily, ...containerStyle }, ref: parentRef, children: [_jsx("div", { style: {
782
+ return ((0, jsx_runtime_1.jsxs)("div", { style: { fontFamily: theme?.fontFamily, ...containerStyle }, ref: parentRef, children: [(0, jsx_runtime_1.jsx)("div", { style: {
775
783
  display: 'flex',
776
784
  // marginLeft: '25px',
777
785
  // marginRight: '25px',
778
786
  justifyContent: 'end',
779
- }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: '12px' }, children: [editSQLEnabled && (_jsx(SecondaryButtonComponent, { onClick: () => {
787
+ }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'row', gap: '12px' }, children: [editSQLEnabled && ((0, jsx_runtime_1.jsx)(SecondaryButtonComponent, { onClick: () => {
780
788
  if (navigateToSQLEditor) {
781
789
  navigateToSQLEditor(sqlQuery);
782
790
  }
783
- }, label: "Edit Query" })), _jsx(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, setDateRange: setFilterDateRange, dateRange: filterDateRange, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, parentRef: parentRef, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextInputComponent: TextInputComponent, LabelComponent: LabelComponent, tagStyle: tagStyle, theme: theme, setIsOpen: setIsAddFilterModalOpen, isOpen: isAddFilterModalOpen, selectedTagBorderColor: selectedTagBorderColor }), _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, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, TextComponent: TextComponent, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, theme: theme, data: data, parentRef: parentRef, columns: columns, setIsOpen: setIsPivotModalOpen, isOpen: isPivotModalOpen, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: removePivot, selectPivot: selectPivot, dateRange: dateRange, rightAlign: true })] }) }), _jsx(Table, { rows: selectedPivotTable?.rows || data, columns: selectedPivotTable?.columns || columns, containerStyle: {
791
+ }, label: "Edit Query" })), (0, jsx_runtime_1.jsx)(AddFilterModal2, { filters: filters, selectedColumn: selectedColumn, numberStart: numberStart, numberEnd: numberEnd, setDateRange: setFilterDateRange, dateRange: filterDateRange, columnStats: columnStats, stringFilterValues: stringFilterValues, setStringFilterValues: setStringFilterValues, addFilter: addFilter, parentRef: parentRef, setSelectedColumn: setSelectedColumn, setNumberStart: setNumberStart, setNumberEnd: setNumberEnd, selectedTable: selectedTable, columnType: columnType, removeFilter: removeFilter, selectFilter: selectFilter, indexBeingEdited: indexBeingEdited, updateFilter: updateFilter, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, TextInputComponent: TextInputComponent, LabelComponent: LabelComponent, tagStyle: tagStyle, theme: theme, setIsOpen: setIsAddFilterModalOpen, isOpen: isAddFilterModalOpen, selectedTagBorderColor: selectedTagBorderColor }), (0, jsx_runtime_1.jsx)(PivotModal_1.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, selectedTable: selectedTable, SelectComponent: SelectComponent, ButtonComponent: ButtonComponent, PopoverComponent: PopoverComponent, LabelComponent: LabelComponent, HeaderComponent: HeaderComponent, TextComponent: TextComponent, popUpTitle: pivotPopUpTitle, setPopUpTitle: setPivotPopUpTitle, theme: theme, data: data, parentRef: parentRef, columns: columns, setIsOpen: setIsPivotModalOpen, isOpen: isPivotModalOpen, showUpdatePivot: isEdittingPivot, setShowUpdatePivot: setIsEdittingPivot, selectedPivotIndex: selectedPivotIndex, setSelectedPivotIndex: setSelectedPivotIndex, removePivot: removePivot, selectPivot: selectPivot, dateRange: dateRange, rightAlign: true })] }) }), (0, jsx_runtime_1.jsx)(Table_1.default, { rows: selectedPivotTable?.rows || data, columns: selectedPivotTable?.columns || columns, containerStyle: {
784
792
  height: 400,
785
793
  marginTop: 10,
786
- } }), chartBuilderEnabled && columns.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: {
794
+ } }), chartBuilderEnabled && columns.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: {
787
795
  display: 'flex',
788
796
  flexDirection: 'row',
789
797
  alignItems: 'center',
@@ -791,7 +799,7 @@ function ReportingTool({ schema, data, columns, runQuery, SelectComponent, Butto
791
799
  width: '100%',
792
800
  height: '70px',
793
801
  gap: '8px',
794
- }, children: _jsx(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: "Add to dashboard" }) }), _jsx(ChartBuilder, { rows: data, columns: columns, fields: fields, query: sqlQuery, queryNoDateColumn: sqlQueryNoDateColumn, pivot: selectedPivot, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, dateRange: dateRange, recommendedPivots: recommendedPivots, destinationDashboard: destinationDashboard, dateColumn: dateColumn })] }))] }));
802
+ }, children: (0, jsx_runtime_1.jsx)(ButtonComponent, { onClick: () => setIsChartBuilderOpen(true), label: "Add to dashboard" }) }), (0, jsx_runtime_1.jsx)(ChartBuilder_1.default, { rows: data, columns: columns, fields: fields, query: sqlQuery, queryNoDateColumn: sqlQueryNoDateColumn, pivot: selectedPivot, title: chartBuilderTitle, buttonLabel: chartBuilderButtonLabel, isOpen: isChartBuilderOpen, setIsOpen: setIsChartBuilderOpen, showTableFormatOptions: showTableFormatOptions, showDateFieldOptions: showDateFieldOptions, showAccessControlOptions: showAccessControlOptions, dateRange: dateRange, recommendedPivots: recommendedPivots, destinationDashboard: destinationDashboard, dateColumn: dateColumn })] }))] }));
795
803
  }
796
804
  function FilterTag({ Label, id, label, removeFilter, isSelected, index, setIsOpen, selectFilter, theme, tagStyle, selectedTagBorderColor, }) {
797
805
  const handleRemoveFilter = () => {
@@ -825,11 +833,11 @@ function FilterTag({ Label, id, label, removeFilter, isSelected, index, setIsOpe
825
833
  ? selectedTagBorderColor || '#B3B4BD'
826
834
  : styles.borderColor || '#EFF0FC',
827
835
  };
828
- return (_jsxs("div", { id: id, onClick: handleSelectFilter, style: { ...styles, ...borderColor }, children: [_jsx("div", { style: {
836
+ return ((0, jsx_runtime_1.jsxs)("div", { id: id, onClick: handleSelectFilter, style: { ...styles, ...borderColor }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
829
837
  textOverflow: 'ellipsis',
830
838
  whiteSpace: 'nowrap',
831
839
  overflow: 'hidden',
832
- }, children: label }), _jsx("div", {
840
+ }, children: label }), (0, jsx_runtime_1.jsx)("div", {
833
841
  // onClick={handleRemoveFilter}
834
842
  onClick: e => {
835
843
  e.stopPropagation(); // Prevents the event from bubbling up to the parent
@@ -840,19 +848,19 @@ function FilterTag({ Label, id, label, removeFilter, isSelected, index, setIsOpe
840
848
  alignItems: 'center',
841
849
  cursor: 'pointer',
842
850
  paddingLeft: '6px',
843
- }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: tagStyle?.color || theme?.primaryTextColor, height: "20", width: "20", children: _jsx("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }));
851
+ }, children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: tagStyle?.color || theme?.primaryTextColor, height: "20", width: "20", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z", clipRule: "evenodd" }) }) })] }));
844
852
  }
845
853
  const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, setDateRange, dateRange, columnStats, stringFilterValues, setStringFilterValues, addFilter, setSelectedColumn, setNumberStart, setNumberEnd, selectedTable, columnType, removeFilter, selectFilter, indexBeingEdited, updateFilter, SelectComponent, ButtonComponent, PopoverComponent, LabelComponent, theme, TextInputComponent, tagStyle, selectedTagBorderColor, parentRef, }) => {
846
- const [isOpen, setIsOpen] = useState(false);
847
- return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { style: {
854
+ const [isOpen, setIsOpen] = (0, react_1.useState)(false);
855
+ return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
848
856
  position: 'relative',
849
857
  display: 'inline-block',
850
858
  textAlign: 'left',
851
- }, children: [_jsx("div", { style: {
859
+ }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
852
860
  display: 'flex',
853
861
  flexDirection: 'row',
854
862
  alignItems: 'center',
855
- }, children: filters.length > 0 && (_jsx("span", { style: {
863
+ }, children: filters.length > 0 && ((0, jsx_runtime_1.jsx)("span", { style: {
856
864
  height: 10,
857
865
  width: 10,
858
866
  backgroundColor: theme.primaryButtonColor,
@@ -860,11 +868,11 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, setD
860
868
  position: 'absolute',
861
869
  top: -2,
862
870
  right: -2,
863
- } })) }), _jsx(PopoverComponent, { parentRef: parentRef, label: "Add filter", style: { right: 0, minWidth: 400, overflow: 'visible' }, isOpen: isOpen, onClose: () => setIsOpen(false), title: "Add filter", setIsOpen: setIsOpen, children: _jsxs("div", { style: {
871
+ } })) }), (0, jsx_runtime_1.jsx)(PopoverComponent, { parentRef: parentRef, label: "Add filter", style: { right: 0, minWidth: 400, overflow: 'visible' }, isOpen: isOpen, onClose: () => setIsOpen(false), title: "Add filter", setIsOpen: setIsOpen, children: (0, jsx_runtime_1.jsxs)("div", { style: {
864
872
  backgroundColor: 'rgb(255, 255, 255)',
865
873
  display: 'flex',
866
874
  flexDirection: 'column',
867
- }, children: [filters.length > 0 && (_jsx("div", { style: { paddingBottom: 20 }, children: _jsx("div", { style: {
875
+ }, children: [filters.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: 20 }, children: (0, jsx_runtime_1.jsx)("div", { style: {
868
876
  overflowY: 'scroll',
869
877
  maxHeight: '300px',
870
878
  display: 'flex',
@@ -872,38 +880,38 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, setD
872
880
  flexDirection: 'row',
873
881
  flexWrap: 'wrap',
874
882
  alignItems: 'center',
875
- }, children: filters.map((elem, index) => (_jsx(FilterTag, { id: "filter-tag", Label: LabelComponent, label: elem.tag, removeFilter: removeFilter, selectFilter: selectFilter, isSelected: index === indexBeingEdited, index: index, theme: theme, setIsOpen: setIsOpen, tagStyle: tagStyle, selectedTagBorderColor: selectedTagBorderColor }, 'filter' + index))) }) })), _jsx(LabelComponent, { children: "Column" }), _jsx(SelectComponent, { label: 'Column', id: "custom-select", value: selectedColumn.name, onChange: e => {
883
+ }, children: filters.map((elem, index) => ((0, jsx_runtime_1.jsx)(FilterTag, { id: "filter-tag", Label: LabelComponent, label: elem.tag, removeFilter: removeFilter, selectFilter: selectFilter, isSelected: index === indexBeingEdited, index: index, theme: theme, setIsOpen: setIsOpen, tagStyle: tagStyle, selectedTagBorderColor: selectedTagBorderColor }, 'filter' + index))) }) })), (0, jsx_runtime_1.jsx)(LabelComponent, { children: "Column" }), (0, jsx_runtime_1.jsx)(SelectComponent, { label: 'Column', id: "custom-select", value: selectedColumn.name, onChange: e => {
876
884
  const column = selectedTable.columns.find(c => c.name === e);
877
885
  setSelectedColumn(column);
878
886
  }, options: selectedTable.columns
879
887
  .filter(elem => !(elem.name === 'id' || elem.name.endsWith('_id')))
880
888
  .map(elem => {
881
889
  return { label: elem.name, value: elem.name };
882
- }) }), columnType === 'number' && (_jsx("div", { children: _jsxs("div", { style: {
890
+ }) }), columnType === 'number' && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: {
883
891
  display: 'flex',
884
892
  flexDirection: 'row',
885
893
  alignItems: 'center',
886
894
  justifyContent: 'space-between',
887
- }, children: [_jsxs("div", { style: {
895
+ }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
888
896
  display: 'flex',
889
897
  flexDirection: 'column',
890
898
  marginTop: '20px',
891
- }, children: [_jsx(LabelComponent, { children: "Minimum" }), _jsx(TextInputComponent, { id: "min-input", value: numberStart, placeholder: "Minimum", onChange: value => setNumberStart(value) })] }), _jsx("div", { style: { width: 16 } }), _jsxs("div", { style: {
899
+ }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Minimum" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "min-input", value: numberStart, placeholder: "Minimum", onChange: value => setNumberStart(value) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: 16 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
892
900
  display: 'flex',
893
901
  flexDirection: 'column',
894
902
  marginTop: '20px',
895
- }, children: [_jsx(LabelComponent, { children: "Maximum" }), _jsx(TextInputComponent, { id: "max-input", placeholder: "Maximum", value: numberEnd, onChange: value => setNumberEnd(value) })] })] }) })), columnType === 'date' && (_jsx("div", { style: {
903
+ }, children: [(0, jsx_runtime_1.jsx)(LabelComponent, { children: "Maximum" }), (0, jsx_runtime_1.jsx)(TextInputComponent, { id: "max-input", placeholder: "Maximum", value: numberEnd, onChange: value => setNumberEnd(value) })] })] }) })), columnType === 'date' && ((0, jsx_runtime_1.jsx)("div", { style: {
896
904
  display: 'flex',
897
905
  flexDirection: 'row',
898
906
  justifyContent: 'space-between',
899
907
  marginTop: 20,
900
- }, children: _jsx(QuillDateRangePicker, { dateRange: dateRange ? [dateRange[0], dateRange[1]] : [null, null], label: '', onChangeDateRange: dateRange => {
908
+ }, children: (0, jsx_runtime_1.jsx)(Dashboard_1.QuillDateRangePicker, { dateRange: dateRange ? [dateRange[0], dateRange[1]] : [null, null], label: '', onChangeDateRange: dateRange => {
901
909
  setDateRange([dateRange[0], dateRange[1], null]);
902
910
  }, preset: dateRange && dateRange.length === 3 && dateRange[2] !== null
903
911
  ? dateRange[2]
904
912
  : '', onChangePreset: preset => {
905
913
  if (typeof preset === 'string') {
906
- setDateRange(getRangeFromPreset(preset));
914
+ setDateRange((0, dateRangePickerUtils_1.getRangeFromPreset)(preset));
907
915
  return;
908
916
  }
909
917
  setDateRange([
@@ -911,28 +919,28 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, setD
911
919
  new Date(),
912
920
  preset?.value || '',
913
921
  ]);
914
- }, presetOptions: reportBuilderOptions }) })), columnType === 'string' &&
922
+ }, presetOptions: dateRangePickerUtils_1.reportBuilderOptions }) })), columnType === 'string' &&
915
923
  columnStats &&
916
- columnStats.length > 0 && (_jsx("div", { style: {
924
+ columnStats.length > 0 && ((0, jsx_runtime_1.jsx)("div", { style: {
917
925
  flex: 'flex',
918
926
  flexDirection: 'column',
919
927
  marginTop: '14px',
920
928
  overflow: 'hidden',
921
- }, children: columnStats.map(value => (_jsx("div", { style: {
929
+ }, children: columnStats.map(value => ((0, jsx_runtime_1.jsx)("div", { style: {
922
930
  display: 'flex',
923
931
  flexDirection: 'row',
924
932
  alignItems: 'center',
925
- }, children: _jsxs("div", { style: {
933
+ }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
926
934
  display: 'flex',
927
935
  flexDirection: 'row',
928
936
  alignItems: 'center',
929
937
  paddingTop: 6,
930
938
  paddingBottom: 6,
931
- }, children: [_jsx(DivCheckbox, { theme: theme, checked: stringFilterValues.includes(value), onChange: () => {
939
+ }, children: [(0, jsx_runtime_1.jsx)(DivCheckbox, { theme: theme, checked: stringFilterValues.includes(value), onChange: () => {
932
940
  setStringFilterValues(prev => prev.includes(value)
933
941
  ? prev.filter(v => v !== value)
934
942
  : [...prev, value]);
935
- } }), _jsx("div", { style: {
943
+ } }), (0, jsx_runtime_1.jsx)("div", { style: {
936
944
  marginLeft: 6,
937
945
  display: 'block',
938
946
  overflow: 'hidden',
@@ -940,7 +948,7 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, setD
940
948
  whiteSpace: 'nowrap',
941
949
  color: theme?.primaryTextColor,
942
950
  fontFamily: theme?.fontFamily,
943
- }, children: value })] }, value) }, value))) })), _jsx("div", { style: { height: 20 } }), _jsx("div", { children: _jsx(ButtonComponent, { id: "custom-button", onClick: () => {
951
+ }, children: value })] }, value) }, value))) })), (0, jsx_runtime_1.jsx)("div", { style: { height: 20 } }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ButtonComponent, { id: "custom-button", onClick: () => {
944
952
  if (columnType === 'date' && !dateRange) {
945
953
  return;
946
954
  }
@@ -949,7 +957,7 @@ const AddFilterModal2 = ({ filters, selectedColumn, numberStart, numberEnd, setD
949
957
  return;
950
958
  }
951
959
  addFilter();
952
- }, label: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' }) })] }) })] }), _jsx("div", { style: { height: '12px' } })] }));
960
+ }, label: indexBeingEdited > -1 ? 'Edit filter' : 'Add filter' }) })] }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: '12px' } })] }));
953
961
  };
954
962
  const DivCheckbox = ({ onChange, checked, theme }) => {
955
963
  const toggleCheckbox = () => {
@@ -973,7 +981,7 @@ const DivCheckbox = ({ onChange, checked, theme }) => {
973
981
  alignItems: 'center',
974
982
  justifyContent: 'center',
975
983
  };
976
- return (_jsx("div", { style: style, onClick: toggleCheckbox, "aria-checked": checked,
984
+ return ((0, jsx_runtime_1.jsx)("div", { style: style, onClick: toggleCheckbox, "aria-checked": checked,
977
985
  // className="shadow-sm"
978
986
  role: "checkbox", children: checked && (
979
987
  // <CheckIcon
@@ -981,5 +989,6 @@ const DivCheckbox = ({ onChange, checked, theme }) => {
981
989
  // className="text-white"
982
990
  // aria-hidden="true"
983
991
  // />
984
- _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme?.backgroundColor, height: "16", width: "16", children: _jsx("path", { fillRule: "evenodd", d: "M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z", clipRule: "evenodd" }) })) }));
992
+ (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: theme?.backgroundColor, height: "16", width: "16", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z", clipRule: "evenodd" }) })) }));
985
993
  };
994
+ //# sourceMappingURL=ReportBuilder.js.map