@quillsql/react 1.4.7 → 1.4.9

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 (14) hide show
  1. package/lib/Chart.d.ts +1 -1
  2. package/lib/Chart.js +36 -23
  3. package/lib/Chart.js.map +1 -1
  4. package/lib/Context.js +2 -2
  5. package/lib/Context.js.map +1 -1
  6. package/lib/Dashboard.js +5 -4
  7. package/lib/Dashboard.js.map +1 -1
  8. package/lib/Table.js +627 -248
  9. package/lib/Table.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/Chart.tsx +46 -32
  12. package/src/Context.tsx +2 -2
  13. package/src/Dashboard.tsx +6 -3
  14. package/src/Table.tsx +0 -1
package/lib/Table.js CHANGED
@@ -1,283 +1,662 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
1
+ var __assign =
2
+ (this && this.__assign) ||
3
+ function () {
4
+ __assign =
5
+ Object.assign ||
6
+ function (t) {
3
7
  for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
8
+ s = arguments[i];
9
+ for (var p in s)
10
+ if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
7
11
  }
8
12
  return t;
9
- };
13
+ };
10
14
  return __assign.apply(this, arguments);
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); }); }
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
+ }
14
26
  return new (P || (P = Promise))(function (resolve, reject) {
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());
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());
19
47
  });
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]); }; }
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
+ }
25
78
  function step(op) {
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 };
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 };
46
147
  }
47
- };
48
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
148
+ };
149
+ import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';
49
150
  /* eslint-disable @typescript-eslint/ban-ts-comment */
50
151
  // @ts-nocheck
51
152
  import { useContext, useEffect, useMemo, useState } from 'react';
52
153
  import axios from 'axios';
53
- import { ClientContext, DashboardContext, ThemeContext, } from './Context';
154
+ import { ClientContext, DashboardContext, ThemeContext } from './Context';
54
155
  import Skeleton from 'react-loading-skeleton';
55
156
  import { valueFormatter } from './Chart';
56
157
  var Table = function (_a) {
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);
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(','));
91
182
  };
92
- return (_jsx(ChartUpdater, { dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, client: client, theme: theme, downloadCSV: downloadCSV }));
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
+ });
93
209
  };
94
210
  var ChartUpdater = function (_a) {
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,
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,
177
290
  });
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*/];
178
300
  }
179
- return fieldsWithFormattedValues;
301
+ });
180
302
  });
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: {
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,
205
358
  boxSizing: 'content-box',
206
- height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) || '100%',
207
- marginTop: 20,
208
- // overflow: 'hidden',
359
+ height: '100%',
209
360
  display: 'flex',
210
- marginLeft: '1rem',
211
361
  flexDirection: 'column',
212
- // justifyContent: 'space-between',
213
- } }, { children: _jsx(Columns, { columns: chartConfig.columns, data: memoizedData, theme: theme, handleDownloadCSV: handleDownloadCSV, numToShow: NUM_TO_SHOW }) })));
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
+ );
214
448
  };
215
449
  function Columns(_a) {
216
- var columns = _a.columns, data = _a.data, theme = _a.theme, handleDownloadCSV = _a.handleDownloadCSV, numToShow = _a.numToShow;
217
- console.log('NUM TO SHOW: ', numToShow);
218
- return (_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column', height: '100%' } }, { children: [_jsx("div", __assign({ style: {
219
- display: 'flex',
220
- flexDirection: 'row',
221
- // overflowX: 'scroll',
222
- // overflowY: 'hidden',
223
- overflow: 'scroll',
224
- height: '100%',
225
- } }, { children: columns.map(function (elem) { return (_jsx(Column, { column: elem, data: data, theme: theme }, elem.field)); }) })), _jsxs("div", __assign({ style: {
226
- display: 'flex',
227
- flexDirection: 'row',
228
- alignItems: 'center',
229
- justifyContent: 'space-between',
230
- // background: 'black',
231
- } }, { children: [data.length > numToShow && (_jsxs("div", __assign({ style: {
232
- color: theme === null || theme === void 0 ? void 0 : theme.chartLabelColor,
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,
233
509
  boxSizing: 'content-box',
234
- fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
235
- fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
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',
236
521
  marginLeft: 12,
237
522
  marginTop: 8,
238
- } }, { children: ["...", data.length - numToShow, " more"] }))), _jsx("div", __assign({ onClick: handleDownloadCSV, style: {
239
- height: 40,
240
- minHeight: 40,
241
- color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
242
- boxSizing: 'content-box',
243
- fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
244
- fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
245
- fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
246
- marginTop: 8,
247
- marginLeft: 20,
248
- cursor: 'pointer',
249
- } }, { children: "Download CSV" }))] }))] })));
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
+ );
250
572
  }
251
573
  function Column(_a) {
252
- var column = _a.column, data = _a.data, theme = _a.theme;
253
- return (_jsxs("div", __assign({ style: {
254
- paddingLeft: 20,
255
- paddingRight: 20,
256
- // width: 'max-content',
257
- display: 'inline-flex',
258
- flexDirection: 'column',
259
- whiteSpace: 'nowrap',
260
- } }, { children: [_jsx("div", __assign({ style: {
261
- height: 40,
262
- minHeight: 40,
263
- color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
264
- boxSizing: 'content-box',
265
- fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
266
- fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
267
- fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
268
- } }, { children: column.label })), data.map(function (elem) { return (_jsx(Cell, { item: elem[column.field], theme: theme })); })] })));
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
+ );
269
631
  }
270
632
  function Cell(_a) {
271
- var item = _a.item, theme = _a.theme;
272
- return (_jsx("div", __assign({ style: {
273
- height: 40,
274
- minHeight: 40,
275
- whiteSpace: 'nowrap',
276
- width: '100%',
277
- fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
278
- fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
279
- color: theme === null || theme === void 0 ? void 0 : theme.chartLabelColor,
280
- } }, { children: item })));
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
+ );
281
660
  }
282
661
  export default Table;
283
- //# sourceMappingURL=Table.js.map
662
+ //# sourceMappingURL=Table.js.map