@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
package/dist/BarList.js CHANGED
@@ -1,8 +1,14 @@
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.hexToRgbaWith10PercentAlpha = void 0;
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
2
8
  /* eslint-disable react/display-name */
3
9
  // @ts-nocheck
4
- import React from 'react';
5
- import { valueFormatter } from './Chart';
10
+ const react_1 = __importDefault(require("react"));
11
+ const Chart_1 = require("./Chart");
6
12
  const getWidthsFromValues = (dataValues) => {
7
13
  let maxValue = -Infinity;
8
14
  dataValues.forEach(value => {
@@ -23,7 +29,7 @@ function makeBarListClassName(componentName) {
23
29
  // return '$ ' + Intl.NumberFormat('us').format(number).toString();
24
30
  // return number.toFixed(0);
25
31
  // };
26
- export function hexToRgbaWith10PercentAlpha(hex) {
32
+ function hexToRgbaWith10PercentAlpha(hex) {
27
33
  // Convert the hex color to RGB
28
34
  const r = parseInt(hex.slice(1, 3), 16);
29
35
  const g = parseInt(hex.slice(3, 5), 16);
@@ -33,7 +39,8 @@ export function hexToRgbaWith10PercentAlpha(hex) {
33
39
  // Return the color as an rgba string
34
40
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
35
41
  }
36
- const BarList = React.forwardRef((props, ref) => {
42
+ exports.hexToRgbaWith10PercentAlpha = hexToRgbaWith10PercentAlpha;
43
+ const BarList = react_1.default.forwardRef((props, ref) => {
37
44
  const { data = [], yAxisFields, xAxisField, xAxisFormat, colors,
38
45
  // valueFormatter = (value: any) => value,valueFormatter
39
46
  showAnimation = true, className, containerStyle, theme, ...other } = props;
@@ -41,7 +48,7 @@ const BarList = React.forwardRef((props, ref) => {
41
48
  const NUM_TO_SHOW = Math.floor(containerStyle?.height / 40) - 1;
42
49
  if (yAxisFields.length > 1) {
43
50
  const widths2 = getWidthsFromValues(data.map(item => item[yAxisFields[1].field]));
44
- return (_jsxs("div", { ref: ref, style: {
51
+ return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: {
45
52
  ...containerStyle,
46
53
  // width: '100%',
47
54
  // height: '100%',
@@ -58,7 +65,7 @@ const BarList = React.forwardRef((props, ref) => {
58
65
  justifyContent: 'space-between',
59
66
  // marginLeft: '24px',
60
67
  // width: 'calc(100% - 24px)',
61
- }, ...other, children: [_jsxs("div", {
68
+ }, ...other, children: [(0, jsx_runtime_1.jsxs)("div", {
62
69
  // className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
63
70
  // className="qq-relative-w-full"
64
71
  style: {
@@ -70,19 +77,19 @@ const BarList = React.forwardRef((props, ref) => {
70
77
  }, children: [data.slice(0, Math.floor(NUM_TO_SHOW / 2)).map((item, idx) => {
71
78
  // const Icon = item.icon;
72
79
  const Icon = null;
73
- return (_jsxs("div", { style: {
80
+ return ((0, jsx_runtime_1.jsxs)("div", { style: {
74
81
  boxSizing: 'content-box',
75
82
  display: 'flex',
76
83
  flexDirection: 'row',
77
84
  alignItems: 'center',
78
85
  width: '100%',
79
- }, children: [_jsx("div", { title: item[xAxisField], style: {
86
+ }, children: [(0, jsx_runtime_1.jsx)("div", { title: item[xAxisField], style: {
80
87
  maxWidth: 130,
81
88
  boxSizing: 'content-box',
82
89
  minWidth: 130,
83
90
  overflow: 'hidden',
84
91
  width: '100%',
85
- }, children: _jsx("p", { style: {
92
+ }, children: (0, jsx_runtime_1.jsx)("p", { style: {
86
93
  color: theme?.chartLabelColor,
87
94
  boxSizing: 'content-box',
88
95
  whiteSpace: 'nowrap',
@@ -90,17 +97,17 @@ const BarList = React.forwardRef((props, ref) => {
90
97
  textOverflow: 'ellipsis',
91
98
  fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
92
99
  fontSize: theme?.fontSizeSmall || '14px',
93
- }, children: valueFormatter({
100
+ }, children: (0, Chart_1.valueFormatter)({
94
101
  value: item[xAxisField],
95
102
  field: xAxisField,
96
103
  fields: [{ field: xAxisField, format: xAxisFormat }],
97
- }) }) }), _jsxs("div", { style: {
104
+ }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
98
105
  width: '100%',
99
106
  height: '100%',
100
107
  boxSizing: 'content-box',
101
108
  display: 'flex',
102
109
  flexDirection: 'column',
103
- }, children: [_jsx("div", {
110
+ }, children: [(0, jsx_runtime_1.jsx)("div", {
104
111
  // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
105
112
  style: {
106
113
  display: 'flex',
@@ -112,13 +119,13 @@ const BarList = React.forwardRef((props, ref) => {
112
119
  transition: showAnimation ? 'all 2s' : '',
113
120
  backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
114
121
  boxSizing: 'content-box',
115
- }, children: _jsx("div", { style: {
122
+ }, children: (0, jsx_runtime_1.jsx)("div", { style: {
116
123
  position: 'absolute',
117
124
  display: 'flex',
118
125
  maxWidth: '100%',
119
126
  boxSizing: 'content-box',
120
127
  marginLeft: '8px',
121
- }, children: _jsx("p", { style: {
128
+ }, children: (0, jsx_runtime_1.jsx)("p", { style: {
122
129
  color: theme?.chartLabelColor,
123
130
  fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
124
131
  boxSizing: 'content-box',
@@ -126,7 +133,7 @@ const BarList = React.forwardRef((props, ref) => {
126
133
  overflow: 'hidden',
127
134
  textOverflow: 'ellipsis',
128
135
  fontSize: theme?.fontSizeSmall || '14px',
129
- }, children: yAxisFields[0].label }) }) }), _jsx("div", {
136
+ }, children: yAxisFields[0].label }) }) }), (0, jsx_runtime_1.jsx)("div", {
130
137
  // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
131
138
  style: {
132
139
  display: 'flex',
@@ -138,13 +145,13 @@ const BarList = React.forwardRef((props, ref) => {
138
145
  transition: showAnimation ? 'all 2s' : '',
139
146
  backgroundColor: hexToRgbaWith10PercentAlpha(colors[1]),
140
147
  boxSizing: 'content-box',
141
- }, children: _jsx("div", { style: {
148
+ }, children: (0, jsx_runtime_1.jsx)("div", { style: {
142
149
  boxSizing: 'content-box',
143
150
  position: 'absolute',
144
151
  maxWidth: '100%',
145
152
  display: 'flex',
146
153
  marginLeft: '8px',
147
- }, children: _jsx("p", { style: {
154
+ }, children: (0, jsx_runtime_1.jsx)("p", { style: {
148
155
  color: theme?.chartLabelColor,
149
156
  boxSizing: 'content-box',
150
157
  whiteSpace: 'nowrap',
@@ -153,24 +160,24 @@ const BarList = React.forwardRef((props, ref) => {
153
160
  fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
154
161
  fontSize: theme?.fontSizeSmall || '14px',
155
162
  }, children: yAxisFields[1].label }) }) })] })] }, item[xAxisField] + idx));
156
- }), data.length > NUM_TO_SHOW && (_jsxs("div", { style: {
163
+ }), data.length > NUM_TO_SHOW && ((0, jsx_runtime_1.jsxs)("div", { style: {
157
164
  color: theme?.chartLabelColor,
158
165
  boxSizing: 'content-box',
159
166
  fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
160
167
  fontSize: theme?.fontSizeSmall || '14px',
161
- }, children: ["...", data.length - NUM_TO_SHOW, " more"] }))] }), _jsx("div", { style: {
168
+ }, children: ["...", data.length - NUM_TO_SHOW, " more"] }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
162
169
  boxSizing: 'content-box',
163
170
  minWidth: 'min-content',
164
171
  textAlign: 'right',
165
172
  paddingLeft: 10,
166
- }, children: data.slice(0, NUM_TO_SHOW).map((item, idx) => (_jsx("div", { style: {
173
+ }, children: data.slice(0, NUM_TO_SHOW).map((item, idx) => ((0, jsx_runtime_1.jsx)("div", { style: {
167
174
  boxSizing: 'content-box',
168
175
  display: 'flex',
169
176
  justifyContent: 'flex-end',
170
177
  alignItems: 'center',
171
178
  marginBottom: idx === data.length - 1 ? 0 : '8px',
172
179
  height: '36px',
173
- }, children: _jsx("p", { style: {
180
+ }, children: (0, jsx_runtime_1.jsx)("p", { style: {
174
181
  color: theme?.chartLabelColor,
175
182
  boxSizing: 'content-box',
176
183
  fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
@@ -178,13 +185,13 @@ const BarList = React.forwardRef((props, ref) => {
178
185
  overflow: 'hidden',
179
186
  textOverflow: 'ellipsis',
180
187
  fontSize: theme?.fontSizeSmall || '14px',
181
- }, children: valueFormatter({
188
+ }, children: (0, Chart_1.valueFormatter)({
182
189
  value: item[yAxisFields[0].field],
183
190
  field: yAxisFields[0].field,
184
191
  fields: yAxisFields,
185
192
  }) }) }, item[xAxisField] + 'label' + idx))) })] }));
186
193
  }
187
- return (_jsx("div", { ref: ref, style: {
194
+ return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: {
188
195
  ...containerStyle,
189
196
  // width: '100%',
190
197
  boxSizing: 'content-box',
@@ -194,7 +201,7 @@ const BarList = React.forwardRef((props, ref) => {
194
201
  // background: 'red',
195
202
  // paddingRight: 25,
196
203
  // paddingRight: 25,
197
- }, ...other, children: _jsxs("div", { style: {
204
+ }, ...other, children: (0, jsx_runtime_1.jsxs)("div", { style: {
198
205
  display: 'flex',
199
206
  justifyContent: 'space-between',
200
207
  // paddingTop: 20,
@@ -202,7 +209,7 @@ const BarList = React.forwardRef((props, ref) => {
202
209
  boxSizing: 'content-box',
203
210
  overflow: 'hidden',
204
211
  width: '100%',
205
- }, children: [_jsxs("div", {
212
+ }, children: [(0, jsx_runtime_1.jsxs)("div", {
206
213
  // className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
207
214
  // className="qq-relative-w-full"
208
215
  style: {
@@ -214,7 +221,7 @@ const BarList = React.forwardRef((props, ref) => {
214
221
  }, children: [data.slice(0, NUM_TO_SHOW).map((item, idx) => {
215
222
  // const Icon = item.icon;
216
223
  const Icon = null;
217
- return (_jsx("div", {
224
+ return ((0, jsx_runtime_1.jsx)("div", {
218
225
  // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
219
226
  style: {
220
227
  width: `${widths[idx]}%`,
@@ -226,13 +233,13 @@ const BarList = React.forwardRef((props, ref) => {
226
233
  height: '36px',
227
234
  marginBottom: '8px',
228
235
  borderRadius: '4px',
229
- }, children: _jsx("div", { style: {
236
+ }, children: (0, jsx_runtime_1.jsx)("div", { style: {
230
237
  boxSizing: 'content-box',
231
238
  position: 'absolute',
232
239
  maxWidth: '100%',
233
240
  display: 'flex',
234
241
  marginLeft: '8px',
235
- }, children: _jsx("p", { style: {
242
+ }, children: (0, jsx_runtime_1.jsx)("p", { style: {
236
243
  color: theme?.chartLabelColor,
237
244
  boxSizing: 'content-box',
238
245
  whiteSpace: 'nowrap',
@@ -240,29 +247,29 @@ const BarList = React.forwardRef((props, ref) => {
240
247
  textOverflow: 'ellipsis',
241
248
  fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
242
249
  fontSize: theme?.fontSizeSmall || '14px',
243
- }, children: valueFormatter({
250
+ }, children: (0, Chart_1.valueFormatter)({
244
251
  value: item[xAxisField],
245
252
  field: xAxisField,
246
253
  fields: [{ field: xAxisField, format: xAxisFormat }],
247
254
  }) }) }) }, item[xAxisField] + 'label' + idx));
248
- }), data.length > NUM_TO_SHOW && (_jsxs("div", { style: {
255
+ }), data.length > NUM_TO_SHOW && ((0, jsx_runtime_1.jsxs)("div", { style: {
249
256
  color: theme?.chartLabelColor,
250
257
  boxSizing: 'content-box',
251
258
  fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
252
259
  fontSize: theme?.fontSizeSmall || '14px',
253
- }, children: ["...", data.length - NUM_TO_SHOW, " more"] }))] }), _jsx("div", { style: {
260
+ }, children: ["...", data.length - NUM_TO_SHOW, " more"] }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
254
261
  boxSizing: 'content-box',
255
262
  textAlign: 'right',
256
263
  minWidth: 'min-content',
257
264
  paddingLeft: 10,
258
- }, children: data.slice(0, NUM_TO_SHOW).map((item, idx) => (_jsx("div", { style: {
265
+ }, children: data.slice(0, NUM_TO_SHOW).map((item, idx) => ((0, jsx_runtime_1.jsx)("div", { style: {
259
266
  boxSizing: 'content-box',
260
267
  display: 'flex',
261
268
  alignItems: 'center',
262
269
  justifyContent: 'flex-end',
263
270
  marginBottom: idx === data.length - 1 ? 0 : '8px',
264
271
  height: '36px',
265
- }, children: _jsx("p", { style: {
272
+ }, children: (0, jsx_runtime_1.jsx)("p", { style: {
266
273
  color: theme?.chartLabelColor,
267
274
  boxSizing: 'content-box',
268
275
  fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
@@ -270,10 +277,11 @@ const BarList = React.forwardRef((props, ref) => {
270
277
  overflow: 'hidden',
271
278
  textOverflow: 'ellipsis',
272
279
  fontSize: theme?.fontSizeSmall || '14px',
273
- }, children: valueFormatter({
280
+ }, children: (0, Chart_1.valueFormatter)({
274
281
  value: item[yAxisFields[0].field],
275
282
  field: yAxisFields[0].field,
276
283
  fields: yAxisFields,
277
284
  }) }) }, item[xAxisField] + 'value' + idx))) })] }) }));
278
285
  });
279
- export default BarList;
286
+ exports.default = BarList;
287
+ //# sourceMappingURL=BarList.js.map