@quillsql/react 1.4.9 → 1.5.1

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 (20) hide show
  1. package/lib/Chart.js +70 -15
  2. package/lib/Chart.js.map +1 -1
  3. package/lib/Context.d.ts +1 -0
  4. package/lib/Context.js +19 -1
  5. package/lib/Context.js.map +1 -1
  6. package/lib/Dashboard.d.ts +2 -1
  7. package/lib/Dashboard.js +134 -10
  8. package/lib/Dashboard.js.map +1 -1
  9. package/lib/Table.js +247 -627
  10. package/lib/components/Dropdown/DropdownItem.js +1 -1
  11. package/lib/components/Dropdown/DropdownItem.js.map +1 -1
  12. package/lib/hooks/useQuill.d.ts +13 -1
  13. package/lib/hooks/useQuill.js +36 -10
  14. package/lib/hooks/useQuill.js.map +1 -1
  15. package/package.json +1 -1
  16. package/src/Chart.tsx +94 -12
  17. package/src/Context.tsx +35 -1
  18. package/src/Dashboard.tsx +281 -10
  19. package/src/components/Dropdown/DropdownItem.tsx +1 -1
  20. package/src/hooks/useQuill.ts +53 -19
package/lib/Table.js CHANGED
@@ -1,662 +1,282 @@
1
- var __assign =
2
- (this && this.__assign) ||
3
- function () {
4
- __assign =
5
- Object.assign ||
6
- function (t) {
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
7
3
  for (var s, i = 1, n = arguments.length; i < n; i++) {
8
- s = arguments[i];
9
- for (var p in s)
10
- if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
11
7
  }
12
8
  return t;
13
- };
9
+ };
14
10
  return __assign.apply(this, arguments);
15
- };
16
- var __awaiter =
17
- (this && this.__awaiter) ||
18
- function (thisArg, _arguments, P, generator) {
19
- function adopt(value) {
20
- return value instanceof P
21
- ? value
22
- : new P(function (resolve) {
23
- resolve(value);
24
- });
25
- }
11
+ };
12
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
13
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
26
14
  return new (P || (P = Promise))(function (resolve, reject) {
27
- function fulfilled(value) {
28
- try {
29
- step(generator.next(value));
30
- } catch (e) {
31
- reject(e);
32
- }
33
- }
34
- function rejected(value) {
35
- try {
36
- step(generator['throw'](value));
37
- } catch (e) {
38
- reject(e);
39
- }
40
- }
41
- function step(result) {
42
- result.done
43
- ? resolve(result.value)
44
- : adopt(result.value).then(fulfilled, rejected);
45
- }
46
- step((generator = generator.apply(thisArg, _arguments || [])).next());
15
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
16
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
17
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
18
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
47
19
  });
48
- };
49
- var __generator =
50
- (this && this.__generator) ||
51
- function (thisArg, body) {
52
- var _ = {
53
- label: 0,
54
- sent: function () {
55
- if (t[0] & 1) throw t[1];
56
- return t[1];
57
- },
58
- trys: [],
59
- ops: [],
60
- },
61
- f,
62
- y,
63
- t,
64
- g;
65
- return (
66
- (g = { next: verb(0), throw: verb(1), return: verb(2) }),
67
- typeof Symbol === 'function' &&
68
- (g[Symbol.iterator] = function () {
69
- return this;
70
- }),
71
- g
72
- );
73
- function verb(n) {
74
- return function (v) {
75
- return step([n, v]);
76
- };
77
- }
20
+ };
21
+ var __generator = (this && this.__generator) || function (thisArg, body) {
22
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
23
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
24
+ function verb(n) { return function (v) { return step([n, v]); }; }
78
25
  function step(op) {
79
- if (f) throw new TypeError('Generator is already executing.');
80
- while ((g && ((g = 0), op[0] && (_ = 0)), _))
81
- try {
82
- if (
83
- ((f = 1),
84
- y &&
85
- (t =
86
- op[0] & 2
87
- ? y['return']
88
- : op[0]
89
- ? y['throw'] || ((t = y['return']) && t.call(y), 0)
90
- : y.next) &&
91
- !(t = t.call(y, op[1])).done)
92
- )
93
- return t;
94
- if (((y = 0), t)) op = [op[0] & 2, t.value];
95
- switch (op[0]) {
96
- case 0:
97
- case 1:
98
- t = op;
99
- break;
100
- case 4:
101
- _.label++;
102
- return { value: op[1], done: false };
103
- case 5:
104
- _.label++;
105
- y = op[1];
106
- op = [0];
107
- continue;
108
- case 7:
109
- op = _.ops.pop();
110
- _.trys.pop();
111
- continue;
112
- default:
113
- if (
114
- !((t = _.trys), (t = t.length > 0 && t[t.length - 1])) &&
115
- (op[0] === 6 || op[0] === 2)
116
- ) {
117
- _ = 0;
118
- continue;
119
- }
120
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
121
- _.label = op[1];
122
- break;
123
- }
124
- if (op[0] === 6 && _.label < t[1]) {
125
- _.label = t[1];
126
- t = op;
127
- break;
128
- }
129
- if (t && _.label < t[2]) {
130
- _.label = t[2];
131
- _.ops.push(op);
132
- break;
133
- }
134
- if (t[2]) _.ops.pop();
135
- _.trys.pop();
136
- continue;
137
- }
138
- op = body.call(thisArg, _);
139
- } catch (e) {
140
- op = [6, e];
141
- y = 0;
142
- } finally {
143
- f = t = 0;
144
- }
145
- if (op[0] & 5) throw op[1];
146
- return { value: op[0] ? op[1] : void 0, done: true };
26
+ if (f) throw new TypeError("Generator is already executing.");
27
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
28
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
29
+ if (y = 0, t) op = [op[0] & 2, t.value];
30
+ switch (op[0]) {
31
+ case 0: case 1: t = op; break;
32
+ case 4: _.label++; return { value: op[1], done: false };
33
+ case 5: _.label++; y = op[1]; op = [0]; continue;
34
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
35
+ default:
36
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
37
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
38
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
39
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
40
+ if (t[2]) _.ops.pop();
41
+ _.trys.pop(); continue;
42
+ }
43
+ op = body.call(thisArg, _);
44
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
45
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
147
46
  }
148
- };
149
- import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
47
+ };
48
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
150
49
  /* eslint-disable @typescript-eslint/ban-ts-comment */
151
50
  // @ts-nocheck
152
51
  import { useContext, useEffect, useMemo, useState } from 'react';
153
52
  import axios from 'axios';
154
- import { ClientContext, DashboardContext, ThemeContext } from './Context';
53
+ import { ClientContext, DashboardContext, ThemeContext, } from './Context';
155
54
  import Skeleton from 'react-loading-skeleton';
156
55
  import { valueFormatter } from './Chart';
157
56
  var Table = function (_a) {
158
- var chartId = _a.chartId,
159
- containerStyle = _a.containerStyle;
160
- var _b = useContext(DashboardContext),
161
- dispatch = _b.dispatch,
162
- dashboard = _b.dashboard;
163
- var _c = useContext(ClientContext),
164
- client = _c[0],
165
- _ = _c[1];
166
- var theme = useContext(ThemeContext)[0];
167
- var downloadCSV = function (rows, name) {
168
- // report.rows
169
- if (!rows.length) {
170
- return;
171
- }
172
- var json = rows; // JSON data passed as a prop
173
- var fields = Object.keys(json[0]); // Assumes all objects have same keys
174
- var csvRows = [];
175
- // Header row
176
- csvRows.push(fields.join(','));
177
- var _loop_1 = function (row) {
178
- var values = fields.map(function (field) {
179
- return JSON.stringify(row[field] || '');
180
- });
181
- csvRows.push(values.join(','));
57
+ var chartId = _a.chartId, containerStyle = _a.containerStyle;
58
+ var _b = useContext(DashboardContext), dispatch = _b.dispatch, dashboard = _b.dashboard;
59
+ var _c = useContext(ClientContext), client = _c[0], _ = _c[1];
60
+ var theme = useContext(ThemeContext)[0];
61
+ var downloadCSV = function (rows, name) {
62
+ // report.rows
63
+ if (!rows.length) {
64
+ return;
65
+ }
66
+ var json = rows; // JSON data passed as a prop
67
+ var fields = Object.keys(json[0]); // Assumes all objects have same keys
68
+ var csvRows = [];
69
+ // Header row
70
+ csvRows.push(fields.join(','));
71
+ var _loop_1 = function (row) {
72
+ var values = fields.map(function (field) { return JSON.stringify(row[field] || ''); });
73
+ csvRows.push(values.join(','));
74
+ };
75
+ // Data rows
76
+ for (var _i = 0, json_1 = json; _i < json_1.length; _i++) {
77
+ var row = json_1[_i];
78
+ _loop_1(row);
79
+ }
80
+ // Create CSV string and create a 'blob' with it
81
+ var csvString = csvRows.join('\r\n');
82
+ var csvBlob = new Blob([csvString], { type: 'text/csv' });
83
+ // Create a download link and click it
84
+ var downloadLink = document.createElement('a');
85
+ downloadLink.download = "".concat(name, ".csv");
86
+ downloadLink.href = URL.createObjectURL(csvBlob);
87
+ downloadLink.style.display = 'none';
88
+ document.body.appendChild(downloadLink);
89
+ downloadLink.click();
90
+ document.body.removeChild(downloadLink);
182
91
  };
183
- // Data rows
184
- for (var _i = 0, json_1 = json; _i < json_1.length; _i++) {
185
- var row = json_1[_i];
186
- _loop_1(row);
187
- }
188
- // Create CSV string and create a 'blob' with it
189
- var csvString = csvRows.join('\r\n');
190
- var csvBlob = new Blob([csvString], { type: 'text/csv' });
191
- // Create a download link and click it
192
- var downloadLink = document.createElement('a');
193
- downloadLink.download = ''.concat(name, '.csv');
194
- downloadLink.href = URL.createObjectURL(csvBlob);
195
- downloadLink.style.display = 'none';
196
- document.body.appendChild(downloadLink);
197
- downloadLink.click();
198
- document.body.removeChild(downloadLink);
199
- };
200
- return _jsx(ChartUpdater, {
201
- dispatch: dispatch,
202
- dashboard: dashboard,
203
- chartId: chartId,
204
- containerStyle: containerStyle,
205
- client: client,
206
- theme: theme,
207
- downloadCSV: downloadCSV,
208
- });
92
+ return (_jsx(ChartUpdater, { dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, client: client, theme: theme, downloadCSV: downloadCSV }));
209
93
  };
210
94
  var ChartUpdater = function (_a) {
211
- var chartId = _a.chartId,
212
- containerStyle = _a.containerStyle,
213
- dashboard = _a.dashboard,
214
- dispatch = _a.dispatch,
215
- client = _a.client,
216
- theme = _a.theme,
217
- downloadCSV = _a.downloadCSV;
218
- var _b = useState(null),
219
- chartConfig = _b[0],
220
- setChartConfig = _b[1];
221
- var _c = useState(true),
222
- loading = _c[0],
223
- setLoading = _c[1];
224
- useEffect(
225
- function () {
226
- var isSubscribed = true;
227
- function getChartOptions(id) {
228
- return __awaiter(this, void 0, void 0, function () {
229
- var _a,
230
- columns,
231
- rows,
232
- name_1,
233
- publicKey,
234
- customerId,
235
- environment,
236
- resp,
237
- _b,
238
- columns,
239
- rows,
240
- name_2,
241
- e_1;
242
- return __generator(this, function (_c) {
243
- switch (_c.label) {
244
- case 0:
245
- if (!isSubscribed) return [3 /*break*/, 4];
246
- // @ts-ignore
247
- if (dashboard && dashboard[id]) {
248
- (_a = dashboard[id]),
249
- (columns = _a.columns),
250
- (rows = _a.rows),
251
- (name_1 = _a.name);
252
- setChartConfig({
253
- columns: columns,
254
- rows: rows,
255
- name: name_1,
256
- });
257
- setLoading(false);
258
- return [2 /*return*/];
259
- }
260
- (publicKey = client.publicKey),
261
- (customerId = client.customerId),
262
- (environment = client.environment);
263
- setLoading(true);
264
- _c.label = 1;
265
- case 1:
266
- _c.trys.push([1, 3, , 4]);
267
- return [
268
- 4 /*yield*/,
269
- axios.get('https://quill-344421.uc.r.appspot.com/item', {
270
- params: {
271
- id: chartId,
272
- orgId: customerId,
273
- publicKey: publicKey,
274
- },
275
- headers: {
276
- environment: environment || undefined,
277
- },
278
- }),
279
- ];
280
- case 2:
281
- resp = _c.sent();
282
- (_b = resp.data),
283
- (columns = _b.columns),
284
- (rows = _b.rows),
285
- (name_2 = _b.name);
286
- setChartConfig({
287
- columns: columns,
288
- rows: rows,
289
- name: name_2,
95
+ var chartId = _a.chartId, containerStyle = _a.containerStyle, dashboard = _a.dashboard, dispatch = _a.dispatch, client = _a.client, theme = _a.theme, downloadCSV = _a.downloadCSV;
96
+ var _b = useState(null), chartConfig = _b[0], setChartConfig = _b[1];
97
+ var _c = useState(true), loading = _c[0], setLoading = _c[1];
98
+ useEffect(function () {
99
+ var isSubscribed = true;
100
+ function getChartOptions(id) {
101
+ return __awaiter(this, void 0, void 0, function () {
102
+ var _a, columns, rows, name_1, publicKey, customerId, environment, resp, _b, columns, rows, name_2, e_1;
103
+ return __generator(this, function (_c) {
104
+ switch (_c.label) {
105
+ case 0:
106
+ if (!isSubscribed) return [3 /*break*/, 4];
107
+ // @ts-ignore
108
+ if (dashboard && dashboard[id]) {
109
+ _a = dashboard[id], columns = _a.columns, rows = _a.rows, name_1 = _a.name;
110
+ setChartConfig({
111
+ columns: columns,
112
+ rows: rows,
113
+ name: name_1,
114
+ });
115
+ setLoading(false);
116
+ return [2 /*return*/];
117
+ }
118
+ publicKey = client.publicKey, customerId = client.customerId, environment = client.environment;
119
+ setLoading(true);
120
+ _c.label = 1;
121
+ case 1:
122
+ _c.trys.push([1, 3, , 4]);
123
+ return [4 /*yield*/, axios.get('https://quill-344421.uc.r.appspot.com/item', {
124
+ params: {
125
+ id: chartId,
126
+ orgId: customerId,
127
+ publicKey: publicKey,
128
+ },
129
+ headers: {
130
+ environment: environment || undefined,
131
+ },
132
+ })];
133
+ case 2:
134
+ resp = _c.sent();
135
+ _b = resp.data, columns = _b.columns, rows = _b.rows, name_2 = _b.name;
136
+ setChartConfig({
137
+ columns: columns,
138
+ rows: rows,
139
+ name: name_2,
140
+ });
141
+ setLoading(false);
142
+ return [3 /*break*/, 4];
143
+ case 3:
144
+ e_1 = _c.sent();
145
+ console.log('Error fetching chart: ', e_1);
146
+ setLoading(false);
147
+ return [3 /*break*/, 4];
148
+ case 4: return [2 /*return*/];
149
+ }
150
+ });
151
+ });
152
+ }
153
+ if (chartId && !chartConfig) {
154
+ getChartOptions(chartId);
155
+ }
156
+ return function () {
157
+ isSubscribed = false;
158
+ };
159
+ }, [chartConfig]);
160
+ var NUM_TO_SHOW = (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height)
161
+ ? Math.floor(containerStyle.height / 40) - 1
162
+ : 6;
163
+ var memoizedData = useMemo(function () {
164
+ // Deep copy of data
165
+ var copiedData = JSON.parse(JSON.stringify(chartConfig && chartConfig.rows && chartConfig.rows.length
166
+ ? chartConfig.rows
167
+ : []));
168
+ return copiedData.slice(0, NUM_TO_SHOW).map(function (item) {
169
+ var fieldsWithFormattedValues = {};
170
+ for (var _i = 0, _a = chartConfig.columns; _i < _a.length; _i++) {
171
+ var field = _a[_i];
172
+ var value = item[field.field];
173
+ fieldsWithFormattedValues[field.field] = valueFormatter({
174
+ value: value,
175
+ field: field.field,
176
+ fields: chartConfig.columns,
290
177
  });
291
- setLoading(false);
292
- return [3 /*break*/, 4];
293
- case 3:
294
- e_1 = _c.sent();
295
- console.log('Error fetching chart: ', e_1);
296
- setLoading(false);
297
- return [3 /*break*/, 4];
298
- case 4:
299
- return [2 /*return*/];
300
178
  }
301
- });
179
+ return fieldsWithFormattedValues;
302
180
  });
303
- }
304
- if (chartId && !chartConfig) {
305
- getChartOptions(chartId);
306
- }
307
- return function () {
308
- isSubscribed = false;
309
- };
310
- },
311
- [chartConfig]
312
- );
313
- var NUM_TO_SHOW = (
314
- containerStyle === null || containerStyle === void 0
315
- ? void 0
316
- : containerStyle.height
317
- )
318
- ? Math.floor(containerStyle.height / 40) - 1
319
- : 6;
320
- var memoizedData = useMemo(
321
- function () {
322
- // Deep copy of data
323
- var copiedData = JSON.parse(
324
- JSON.stringify(
325
- chartConfig && chartConfig.rows && chartConfig.rows.length
326
- ? chartConfig.rows
327
- : []
328
- )
329
- );
330
- return copiedData.slice(0, NUM_TO_SHOW).map(function (item) {
331
- var fieldsWithFormattedValues = {};
332
- for (var _i = 0, _a = chartConfig.columns; _i < _a.length; _i++) {
333
- var field = _a[_i];
334
- var value = item[field.field];
335
- fieldsWithFormattedValues[field.field] = valueFormatter({
336
- value: value,
337
- field: field.field,
338
- fields: chartConfig.columns,
339
- });
340
- }
341
- return fieldsWithFormattedValues;
342
- });
343
- },
344
- [chartConfig, NUM_TO_SHOW]
345
- );
346
- var handleDownloadCSV = function () {
347
- downloadCSV(memoizedData, chartConfig.name);
348
- };
349
- if (!chartConfig || loading || !memoizedData.length) {
350
- return _jsx(
351
- 'div',
352
- __assign(
353
- {
354
- // className="flex flex-col flex-1 h-[100%]"
355
- style: __assign(__assign({}, containerStyle), {
356
- marginLeft: 25,
357
- marginRight: 25,
181
+ }, [chartConfig, NUM_TO_SHOW]);
182
+ var handleDownloadCSV = function () {
183
+ downloadCSV(memoizedData, chartConfig.name);
184
+ };
185
+ if (!chartConfig || loading || !memoizedData.length) {
186
+ return (_jsx("div", __assign({
187
+ // className="flex flex-col flex-1 h-[100%]"
188
+ style: __assign(__assign({}, containerStyle), { marginLeft: 25, marginRight: 25, boxSizing: 'content-box', height: '100%', display: 'flex', flexDirection: 'column', flex: 1 }) }, { children: _jsx("div", __assign({ style: {
189
+ height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) || 300,
190
+ width: '100%',
191
+ boxSizing: 'content-box',
192
+ } }, { children: _jsx(Skeleton, { count: 1,
193
+ // height={containerStyle?.height}
194
+ height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) && (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.marginTop)
195
+ ? (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) + (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.marginTop)
196
+ : (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height)
197
+ ? containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height
198
+ : 300, borderRadius: 8,
199
+ // highlightColor="#F7F7F8"
200
+ highlightColor: "#FDFDFD",
201
+ // baseColor="#F3F4F6"
202
+ baseColor: "#F9F9FA", width: "100%" }) })) })));
203
+ }
204
+ return (_jsx("div", __assign({ style: {
358
205
  boxSizing: 'content-box',
359
- height: '100%',
206
+ height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) || '100%',
207
+ marginTop: 20,
208
+ // overflow: 'hidden',
360
209
  display: 'flex',
210
+ marginLeft: '1rem',
361
211
  flexDirection: 'column',
362
- flex: 1,
363
- }),
364
- },
365
- {
366
- children: _jsx(
367
- 'div',
368
- __assign(
369
- {
370
- style: {
371
- height:
372
- (containerStyle === null || containerStyle === void 0
373
- ? void 0
374
- : containerStyle.height) || 300,
375
- width: '100%',
376
- boxSizing: 'content-box',
377
- },
378
- },
379
- {
380
- children: _jsx(Skeleton, {
381
- count: 1,
382
- // height={containerStyle?.height}
383
- height:
384
- (containerStyle === null || containerStyle === void 0
385
- ? void 0
386
- : containerStyle.height) &&
387
- (containerStyle === null || containerStyle === void 0
388
- ? void 0
389
- : containerStyle.marginTop)
390
- ? (containerStyle === null || containerStyle === void 0
391
- ? void 0
392
- : containerStyle.height) +
393
- (containerStyle === null || containerStyle === void 0
394
- ? void 0
395
- : containerStyle.marginTop)
396
- : (
397
- containerStyle === null || containerStyle === void 0
398
- ? void 0
399
- : containerStyle.height
400
- )
401
- ? containerStyle === null || containerStyle === void 0
402
- ? void 0
403
- : containerStyle.height
404
- : 300,
405
- borderRadius: 8,
406
- // highlightColor="#F7F7F8"
407
- highlightColor: '#FDFDFD',
408
- // baseColor="#F3F4F6"
409
- baseColor: '#F9F9FA',
410
- width: '100%',
411
- }),
412
- }
413
- )
414
- ),
415
- }
416
- )
417
- );
418
- }
419
- return _jsx(
420
- 'div',
421
- __assign(
422
- {
423
- style: {
424
- boxSizing: 'content-box',
425
- height:
426
- (containerStyle === null || containerStyle === void 0
427
- ? void 0
428
- : containerStyle.height) || '100%',
429
- marginTop: 20,
430
- // overflow: 'hidden',
431
- display: 'flex',
432
- marginLeft: '1rem',
433
- flexDirection: 'column',
434
- // justifyContent: 'space-between',
435
- },
436
- },
437
- {
438
- children: _jsx(Columns, {
439
- columns: chartConfig.columns,
440
- data: memoizedData,
441
- theme: theme,
442
- handleDownloadCSV: handleDownloadCSV,
443
- numToShow: NUM_TO_SHOW,
444
- }),
445
- }
446
- )
447
- );
212
+ // justifyContent: 'space-between',
213
+ } }, { children: _jsx(Columns, { columns: chartConfig.columns, data: memoizedData, theme: theme, handleDownloadCSV: handleDownloadCSV, numToShow: NUM_TO_SHOW }) })));
448
214
  };
449
215
  function Columns(_a) {
450
- var columns = _a.columns,
451
- data = _a.data,
452
- theme = _a.theme,
453
- handleDownloadCSV = _a.handleDownloadCSV,
454
- numToShow = _a.numToShow;
455
- return _jsxs(
456
- 'div',
457
- __assign(
458
- { style: { display: 'flex', flexDirection: 'column', height: '100%' } },
459
- {
460
- children: [
461
- _jsx(
462
- 'div',
463
- __assign(
464
- {
465
- style: {
466
- display: 'flex',
467
- flexDirection: 'row',
468
- // overflowX: 'scroll',
469
- // overflowY: 'hidden',
470
- overflow: 'scroll',
471
- height: '100%',
472
- },
473
- },
474
- {
475
- children: columns.map(function (elem) {
476
- return _jsx(
477
- Column,
478
- { column: elem, data: data, theme: theme },
479
- elem.field
480
- );
481
- }),
482
- }
483
- )
484
- ),
485
- _jsxs(
486
- 'div',
487
- __assign(
488
- {
489
- style: {
490
- display: 'flex',
491
- flexDirection: 'row',
492
- alignItems: 'center',
493
- justifyContent: 'space-between',
494
- // background: 'black',
495
- },
496
- },
497
- {
498
- children: [
499
- data.length > numToShow &&
500
- _jsxs(
501
- 'div',
502
- __assign(
503
- {
504
- style: {
505
- color:
506
- theme === null || theme === void 0
507
- ? void 0
508
- : theme.chartLabelColor,
216
+ var columns = _a.columns, data = _a.data, theme = _a.theme, handleDownloadCSV = _a.handleDownloadCSV, numToShow = _a.numToShow;
217
+ return (_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column', height: '100%' } }, { children: [_jsx("div", __assign({ style: {
218
+ display: 'flex',
219
+ flexDirection: 'row',
220
+ // overflowX: 'scroll',
221
+ // overflowY: 'hidden',
222
+ overflow: 'scroll',
223
+ height: '100%',
224
+ } }, { children: columns.map(function (elem) { return (_jsx(Column, { column: elem, data: data, theme: theme }, elem.field)); }) })), _jsxs("div", __assign({ style: {
225
+ display: 'flex',
226
+ flexDirection: 'row',
227
+ alignItems: 'center',
228
+ justifyContent: 'space-between',
229
+ // background: 'black',
230
+ } }, { children: [data.length > numToShow && (_jsxs("div", __assign({ style: {
231
+ color: theme === null || theme === void 0 ? void 0 : theme.chartLabelColor,
509
232
  boxSizing: 'content-box',
510
- fontFamily:
511
- (theme === null || theme === void 0
512
- ? void 0
513
- : theme.chartLabelFontFamily) ||
514
- (theme === null || theme === void 0
515
- ? void 0
516
- : theme.fontFamily),
517
- fontSize:
518
- (theme === null || theme === void 0
519
- ? void 0
520
- : theme.fontSizeSmall) || '0.875rem',
233
+ fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
234
+ fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
521
235
  marginLeft: 12,
522
236
  marginTop: 8,
523
- },
524
- },
525
- { children: ['...', data.length - numToShow, ' more'] }
526
- )
527
- ),
528
- _jsx(
529
- 'div',
530
- __assign(
531
- {
532
- onClick: handleDownloadCSV,
533
- style: {
534
- height: 40,
535
- minHeight: 40,
536
- color:
537
- theme === null || theme === void 0
538
- ? void 0
539
- : theme.primaryTextColor,
540
- boxSizing: 'content-box',
541
- fontFamily:
542
- (theme === null || theme === void 0
543
- ? void 0
544
- : theme.chartLabelFontFamily) ||
545
- (theme === null || theme === void 0
546
- ? void 0
547
- : theme.fontFamily),
548
- fontSize:
549
- (theme === null || theme === void 0
550
- ? void 0
551
- : theme.fontSizeSmall) || '0.875rem',
552
- fontWeight:
553
- (theme === null || theme === void 0
554
- ? void 0
555
- : theme.fontWeightMedium) || '500',
556
- marginTop: 8,
557
- marginLeft: 20,
558
- cursor: 'pointer',
559
- },
560
- },
561
- { children: 'Download CSV' }
562
- )
563
- ),
564
- ],
565
- }
566
- )
567
- ),
568
- ],
569
- }
570
- )
571
- );
237
+ } }, { children: ["...", data.length - numToShow, " more"] }))), _jsx("div", __assign({ onClick: handleDownloadCSV, style: {
238
+ height: 40,
239
+ minHeight: 40,
240
+ color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
241
+ boxSizing: 'content-box',
242
+ fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
243
+ fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
244
+ fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
245
+ marginTop: 8,
246
+ marginLeft: 20,
247
+ cursor: 'pointer',
248
+ } }, { children: "Download CSV" }))] }))] })));
572
249
  }
573
250
  function Column(_a) {
574
- var column = _a.column,
575
- data = _a.data,
576
- theme = _a.theme;
577
- return _jsxs(
578
- 'div',
579
- __assign(
580
- {
581
- style: {
582
- paddingLeft: 20,
583
- paddingRight: 20,
584
- // width: 'max-content',
585
- display: 'inline-flex',
586
- flexDirection: 'column',
587
- whiteSpace: 'nowrap',
588
- },
589
- },
590
- {
591
- children: [
592
- _jsx(
593
- 'div',
594
- __assign(
595
- {
596
- style: {
597
- height: 40,
598
- minHeight: 40,
599
- color:
600
- theme === null || theme === void 0
601
- ? void 0
602
- : theme.primaryTextColor,
603
- boxSizing: 'content-box',
604
- fontFamily:
605
- (theme === null || theme === void 0
606
- ? void 0
607
- : theme.chartLabelFontFamily) ||
608
- (theme === null || theme === void 0
609
- ? void 0
610
- : theme.fontFamily),
611
- fontSize:
612
- (theme === null || theme === void 0
613
- ? void 0
614
- : theme.fontSizeSmall) || '0.875rem',
615
- fontWeight:
616
- (theme === null || theme === void 0
617
- ? void 0
618
- : theme.fontWeightMedium) || '500',
619
- },
620
- },
621
- { children: column.label }
622
- )
623
- ),
624
- data.map(function (elem) {
625
- return _jsx(Cell, { item: elem[column.field], theme: theme });
626
- }),
627
- ],
628
- }
629
- )
630
- );
251
+ var column = _a.column, data = _a.data, theme = _a.theme;
252
+ return (_jsxs("div", __assign({ style: {
253
+ paddingLeft: 20,
254
+ paddingRight: 20,
255
+ // width: 'max-content',
256
+ display: 'inline-flex',
257
+ flexDirection: 'column',
258
+ whiteSpace: 'nowrap',
259
+ } }, { children: [_jsx("div", __assign({ style: {
260
+ height: 40,
261
+ minHeight: 40,
262
+ color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
263
+ boxSizing: 'content-box',
264
+ fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
265
+ fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
266
+ fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
267
+ } }, { children: column.label })), data.map(function (elem) { return (_jsx(Cell, { item: elem[column.field], theme: theme })); })] })));
631
268
  }
632
269
  function Cell(_a) {
633
- var item = _a.item,
634
- theme = _a.theme;
635
- return _jsx(
636
- 'div',
637
- __assign(
638
- {
639
- style: {
640
- height: 40,
641
- minHeight: 40,
642
- whiteSpace: 'nowrap',
643
- width: '100%',
644
- fontFamily:
645
- (theme === null || theme === void 0
646
- ? void 0
647
- : theme.chartLabelFontFamily) ||
648
- (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
649
- fontSize:
650
- (theme === null || theme === void 0
651
- ? void 0
652
- : theme.fontSizeSmall) || '0.875rem',
653
- color:
654
- theme === null || theme === void 0 ? void 0 : theme.chartLabelColor,
655
- },
656
- },
657
- { children: item }
658
- )
659
- );
270
+ var item = _a.item, theme = _a.theme;
271
+ return (_jsx("div", __assign({ style: {
272
+ height: 40,
273
+ minHeight: 40,
274
+ whiteSpace: 'nowrap',
275
+ width: '100%',
276
+ fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
277
+ fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
278
+ color: theme === null || theme === void 0 ? void 0 : theme.chartLabelColor,
279
+ } }, { children: item })));
660
280
  }
661
281
  export default Table;
662
- //# sourceMappingURL=Table.js.map
282
+ //# sourceMappingURL=Table.js.map