@quillsql/react 1.7.2 → 1.7.4

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 (136) hide show
  1. package/lib/AddToDashboardModal.js +249 -369
  2. package/lib/AddToDashboardModal.js.map +1 -1
  3. package/lib/BarList.js +92 -109
  4. package/lib/BarList.js.map +1 -1
  5. package/lib/Chart.d.ts +0 -1
  6. package/lib/Chart.js +359 -419
  7. package/lib/Chart.js.map +1 -1
  8. package/lib/Context.d.ts +1 -2
  9. package/lib/Context.js +91 -85
  10. package/lib/Context.js.map +1 -1
  11. package/lib/Dashboard.js +181 -209
  12. package/lib/Dashboard.js.map +1 -1
  13. package/lib/DateRangePicker/Calendar.js +87 -91
  14. package/lib/DateRangePicker/Calendar.js.map +1 -1
  15. package/lib/DateRangePicker/DateRangePicker.js +70 -68
  16. package/lib/DateRangePicker/DateRangePicker.js.map +1 -1
  17. package/lib/DateRangePicker/DateRangePickerButton.js +46 -57
  18. package/lib/DateRangePicker/DateRangePickerButton.js.map +1 -1
  19. package/lib/DateRangePicker/dateRangePickerUtils.js +105 -99
  20. package/lib/DateRangePicker/dateRangePickerUtils.js.map +1 -1
  21. package/lib/DateRangePicker/index.js +8 -1
  22. package/lib/DateRangePicker/index.js.map +1 -1
  23. package/lib/PieChart.js +221 -225
  24. package/lib/PieChart.js.map +1 -1
  25. package/lib/QuillProvider.d.ts +1 -2
  26. package/lib/QuillProvider.js +8 -18
  27. package/lib/QuillProvider.js.map +1 -1
  28. package/lib/ReportBuilder.js +430 -526
  29. package/lib/ReportBuilder.js.map +1 -1
  30. package/lib/SQLEditor.js +182 -268
  31. package/lib/SQLEditor.js.map +1 -1
  32. package/lib/Table.js +207 -261
  33. package/lib/Table.js.map +1 -1
  34. package/lib/TableChart.js +76 -75
  35. package/lib/TableChart.js.map +1 -1
  36. package/lib/assets/ArrowDownHeadIcon.js +5 -28
  37. package/lib/assets/ArrowDownHeadIcon.js.map +1 -1
  38. package/lib/assets/ArrowDownIcon.js +5 -28
  39. package/lib/assets/ArrowDownIcon.js.map +1 -1
  40. package/lib/assets/ArrowDownRightIcon.js +5 -28
  41. package/lib/assets/ArrowDownRightIcon.js.map +1 -1
  42. package/lib/assets/ArrowLeftHeadIcon.js +5 -28
  43. package/lib/assets/ArrowLeftHeadIcon.js.map +1 -1
  44. package/lib/assets/ArrowRightHeadIcon.js +5 -28
  45. package/lib/assets/ArrowRightHeadIcon.js.map +1 -1
  46. package/lib/assets/ArrowRightIcon.js +5 -28
  47. package/lib/assets/ArrowRightIcon.js.map +1 -1
  48. package/lib/assets/ArrowUpHeadIcon.js +5 -28
  49. package/lib/assets/ArrowUpHeadIcon.js.map +1 -1
  50. package/lib/assets/ArrowUpIcon.js +5 -28
  51. package/lib/assets/ArrowUpIcon.js.map +1 -1
  52. package/lib/assets/ArrowUpRightIcon.js +5 -28
  53. package/lib/assets/ArrowUpRightIcon.js.map +1 -1
  54. package/lib/assets/CalendarIcon.js +5 -28
  55. package/lib/assets/CalendarIcon.js.map +1 -1
  56. package/lib/assets/DoubleArrowLeftHeadIcon.js +5 -28
  57. package/lib/assets/DoubleArrowLeftHeadIcon.js.map +1 -1
  58. package/lib/assets/DoubleArrowRightHeadIcon.js +5 -28
  59. package/lib/assets/DoubleArrowRightHeadIcon.js.map +1 -1
  60. package/lib/assets/ExclamationFilledIcon.js +5 -28
  61. package/lib/assets/ExclamationFilledIcon.js.map +1 -1
  62. package/lib/assets/LoadingSpinner.js +5 -28
  63. package/lib/assets/LoadingSpinner.js.map +1 -1
  64. package/lib/assets/SearchIcon.js +5 -28
  65. package/lib/assets/SearchIcon.js.map +1 -1
  66. package/lib/assets/XCircleIcon.js +5 -28
  67. package/lib/assets/XCircleIcon.js.map +1 -1
  68. package/lib/assets/index.js +38 -16
  69. package/lib/assets/index.js.map +1 -1
  70. package/lib/components/BigModal/BigModal.js +45 -43
  71. package/lib/components/BigModal/BigModal.js.map +1 -1
  72. package/lib/components/Dropdown/Dropdown.js +57 -53
  73. package/lib/components/Dropdown/Dropdown.js.map +1 -1
  74. package/lib/components/Dropdown/DropdownItem.js +43 -40
  75. package/lib/components/Dropdown/DropdownItem.js.map +1 -1
  76. package/lib/components/Dropdown/index.js +10 -2
  77. package/lib/components/Dropdown/index.js.map +1 -1
  78. package/lib/components/Modal/Modal.js +45 -43
  79. package/lib/components/Modal/Modal.js.map +1 -1
  80. package/lib/components/Modal/index.js +8 -1
  81. package/lib/components/Modal/index.js.map +1 -1
  82. package/lib/components/selectUtils.js +20 -15
  83. package/lib/components/selectUtils.js.map +1 -1
  84. package/lib/contexts/BaseColorContext.js +5 -3
  85. package/lib/contexts/BaseColorContext.js.map +1 -1
  86. package/lib/contexts/HoveredValueContext.js +5 -3
  87. package/lib/contexts/HoveredValueContext.js.map +1 -1
  88. package/lib/contexts/RootStylesContext.js +5 -3
  89. package/lib/contexts/RootStylesContext.js.map +1 -1
  90. package/lib/contexts/SelectedValueContext.js +5 -3
  91. package/lib/contexts/SelectedValueContext.js.map +1 -1
  92. package/lib/contexts/index.js +14 -4
  93. package/lib/contexts/index.js.map +1 -1
  94. package/lib/hooks/index.js +14 -4
  95. package/lib/hooks/index.js.map +1 -1
  96. package/lib/hooks/useInternalState.js +9 -7
  97. package/lib/hooks/useInternalState.js.map +1 -1
  98. package/lib/hooks/useOnClickOutside.js +8 -6
  99. package/lib/hooks/useOnClickOutside.js.map +1 -1
  100. package/lib/hooks/useOnWindowResize.js +9 -7
  101. package/lib/hooks/useOnWindowResize.js.map +1 -1
  102. package/lib/hooks/useQuill.js +60 -111
  103. package/lib/hooks/useQuill.js.map +1 -1
  104. package/lib/hooks/useSelectOnKeyDown.js +17 -15
  105. package/lib/hooks/useSelectOnKeyDown.js.map +1 -1
  106. package/lib/index.js +22 -8
  107. package/lib/index.js.map +1 -1
  108. package/lib/lib/font.d.ts +13 -0
  109. package/lib/lib/font.js +17 -0
  110. package/lib/lib/font.js.map +1 -0
  111. package/lib/lib/index.d.ts +3 -0
  112. package/lib/lib/index.js +20 -0
  113. package/lib/lib/index.js.map +1 -0
  114. package/lib/lib/inputTypes.d.ts +20 -0
  115. package/lib/lib/inputTypes.js +57 -0
  116. package/lib/lib/inputTypes.js.map +1 -0
  117. package/lib/lib/utils.d.ts +9 -0
  118. package/lib/lib/utils.js +46 -0
  119. package/lib/lib/utils.js.map +1 -0
  120. package/package.json +6 -13
  121. package/src/AddToDashboardModal.tsx +2 -9
  122. package/src/Chart.tsx +49 -20
  123. package/src/Context.tsx +0 -3
  124. package/src/Dashboard.tsx +2 -3
  125. package/src/PieChart.tsx +2 -2
  126. package/src/QuillProvider.tsx +0 -3
  127. package/src/ReportBuilder.tsx +3 -9
  128. package/src/SQLEditor.tsx +99 -12
  129. package/src/Table.tsx +99 -10
  130. package/src/hooks/useQuill.ts +1 -2
  131. package/src/lib/font.ts +14 -0
  132. package/src/lib/index.ts +3 -0
  133. package/src/lib/inputTypes.ts +81 -0
  134. package/src/lib/utils.tsx +46 -0
  135. package/tsconfig.json +3 -3
  136. package/rollup.config.ts +0 -21
package/lib/Table.js CHANGED
@@ -1,89 +1,42 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- 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];
7
- }
8
- return t;
9
- };
10
- 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); }); }
14
- 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());
19
- });
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]); }; }
25
- 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 };
46
- }
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
47
4
  };
48
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.SpecialTable = void 0;
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
49
8
  /* eslint-disable @typescript-eslint/ban-ts-comment */
50
9
  // @ts-nocheck
51
- import { useContext, useEffect, useMemo, useState } from 'react';
52
- import axios from 'axios';
53
- import { ClientContext, DashboardContext, ThemeContext, } from './Context';
54
- import Skeleton from 'react-loading-skeleton';
55
- import { valueFormatter } from './Chart';
56
- import { TailSpin } from 'react-loader-spinner';
57
- var Table = function (_a) {
58
- var chartId = _a.chartId, columns = _a.columns, rows = _a.rows, containerStyle = _a.containerStyle, csvFilename = _a.csvFilename;
59
- var _b = useContext(DashboardContext), dispatch = _b.dispatch, dashboard = _b.dashboard;
60
- var _c = useContext(ClientContext), client = _c[0], _ = _c[1];
61
- var theme = useContext(ThemeContext)[0];
62
- var downloadCSV = function (rows, name) {
10
+ const react_1 = require("react");
11
+ const axios_1 = __importDefault(require("axios"));
12
+ const Context_1 = require("./Context");
13
+ // import Skeleton from 'react-loading-skeleton';
14
+ const Chart_1 = require("./Chart");
15
+ const Table = ({ chartId, columns, rows, containerStyle, csvFilename, }) => {
16
+ const { dispatch, dashboard } = (0, react_1.useContext)(Context_1.DashboardContext);
17
+ const [client, _] = (0, react_1.useContext)(Context_1.ClientContext);
18
+ const [theme] = (0, react_1.useContext)(Context_1.ThemeContext);
19
+ const downloadCSV = (rows, name) => {
63
20
  // report.rows
64
21
  if (!rows.length) {
65
22
  return;
66
23
  }
67
- var json = rows; // JSON data passed as a prop
68
- var fields = Object.keys(json[0]); // Assumes all objects have same keys
69
- var csvRows = [];
24
+ const json = rows; // JSON data passed as a prop
25
+ const fields = Object.keys(json[0]); // Assumes all objects have same keys
26
+ const csvRows = [];
70
27
  // Header row
71
28
  csvRows.push(fields.join(','));
72
- var _loop_1 = function (row) {
73
- var values = fields.map(function (field) { return JSON.stringify(row[field] || ''); });
74
- csvRows.push(values.join(','));
75
- };
76
29
  // Data rows
77
- for (var _i = 0, json_1 = json; _i < json_1.length; _i++) {
78
- var row = json_1[_i];
79
- _loop_1(row);
30
+ for (const row of json) {
31
+ const values = fields.map(field => JSON.stringify(row[field] || ''));
32
+ csvRows.push(values.join(','));
80
33
  }
81
34
  // Create CSV string and create a 'blob' with it
82
- var csvString = csvRows.join('\r\n');
83
- var csvBlob = new Blob([csvString], { type: 'text/csv' });
35
+ const csvString = csvRows.join('\r\n');
36
+ const csvBlob = new Blob([csvString], { type: 'text/csv' });
84
37
  // Create a download link and click it
85
- var downloadLink = document.createElement('a');
86
- downloadLink.download = "".concat(name, ".csv");
38
+ const downloadLink = document.createElement('a');
39
+ downloadLink.download = `${name}.csv`;
87
40
  downloadLink.href = URL.createObjectURL(csvBlob);
88
41
  downloadLink.style.display = 'none';
89
42
  document.body.appendChild(downloadLink);
@@ -91,37 +44,32 @@ var Table = function (_a) {
91
44
  document.body.removeChild(downloadLink);
92
45
  };
93
46
  if (!chartId && rows && columns) {
94
- return (_jsx(SpecialTable, { showDownloadCsvButton: true, csvFilename: csvFilename || 'table', columns: columns, rows: rows, height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) || '100%', theme: theme }));
47
+ return ((0, jsx_runtime_1.jsx)(SpecialTable, { showDownloadCsvButton: true, csvFilename: csvFilename || 'table', columns: columns, rows: rows, height: containerStyle?.height || '100%', theme: theme }));
95
48
  }
96
- return (_jsx(ChartUpdater, { dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, client: client, theme: theme, downloadCSV: downloadCSV, csvFilename: csvFilename }));
49
+ return ((0, jsx_runtime_1.jsx)(ChartUpdater, { dispatch: dispatch, dashboard: dashboard, chartId: chartId, containerStyle: containerStyle, client: client, theme: theme, downloadCSV: downloadCSV, csvFilename: csvFilename }));
97
50
  };
98
- export function SpecialTable(_a) {
99
- var columns = _a.columns, rows = _a.rows, height = _a.height, containerStyle = _a.containerStyle, loading = _a.loading, LoadingComponent = _a.LoadingComponent, theme = _a.theme, showDownloadCsvButton = _a.showDownloadCsvButton, csvFilename = _a.csvFilename, DownloadCSVButtonComponent = _a.DownloadCSVButtonComponent, AddToDashboardButtonComponent = _a.AddToDashboardButtonComponent;
100
- var downloadCSV = function () {
51
+ function SpecialTable({ columns, rows, height, containerStyle, loading, LoadingComponent, theme, showDownloadCsvButton, csvFilename, DownloadCSVButtonComponent, AddToDashboardButtonComponent, }) {
52
+ const downloadCSV = () => {
101
53
  // report.rows
102
54
  if (!rows.length) {
103
55
  return;
104
56
  }
105
- var json = rows; // JSON data passed as a prop
106
- var fields = Object.keys(json[0]); // Assumes all objects have same keys
107
- var csvRows = [];
57
+ const json = rows; // JSON data passed as a prop
58
+ const fields = Object.keys(json[0]); // Assumes all objects have same keys
59
+ const csvRows = [];
108
60
  // Header row
109
61
  csvRows.push(fields.join(','));
110
- var _loop_2 = function (row) {
111
- var values = fields.map(function (field) { return JSON.stringify(row[field] || ''); });
112
- csvRows.push(values.join(','));
113
- };
114
62
  // Data rows
115
- for (var _i = 0, json_2 = json; _i < json_2.length; _i++) {
116
- var row = json_2[_i];
117
- _loop_2(row);
63
+ for (const row of json) {
64
+ const values = fields.map(field => JSON.stringify(row[field] || ''));
65
+ csvRows.push(values.join(','));
118
66
  }
119
67
  // Create CSV string and create a 'blob' with it
120
- var csvString = csvRows.join('\r\n');
121
- var csvBlob = new Blob([csvString], { type: 'text/csv' });
68
+ const csvString = csvRows.join('\r\n');
69
+ const csvBlob = new Blob([csvString], { type: 'text/csv' });
122
70
  // Create a download link and click it
123
- var downloadLink = document.createElement('a');
124
- downloadLink.download = "".concat(csvFilename, ".csv");
71
+ const downloadLink = document.createElement('a');
72
+ downloadLink.download = `${csvFilename}.csv`;
125
73
  downloadLink.href = URL.createObjectURL(csvBlob);
126
74
  downloadLink.style.display = 'none';
127
75
  document.body.appendChild(downloadLink);
@@ -129,13 +77,19 @@ export function SpecialTable(_a) {
129
77
  document.body.removeChild(downloadLink);
130
78
  };
131
79
  if (loading) {
132
- return (_jsx("div", __assign({ style: __assign(__assign({}, containerStyle), {
80
+ return ((0, jsx_runtime_1.jsx)("div", { style: {
81
+ ...containerStyle,
133
82
  // paddingLeft: 25,
134
83
  // paddingRight: 25,
135
84
  // borderRadius: 8,
136
85
  // marginTop: 25,
137
86
  // overflow: 'visible',
138
- width: '100%', height: height }) }, { children: _jsxs("div", __assign({ style: {
87
+ width: '100%',
88
+ height: height,
89
+ // overflow: 'hidden',
90
+ // @ts-ignore
91
+ // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
92
+ }, children: (0, jsx_runtime_1.jsxs)("div", { style: {
139
93
  height: '100%',
140
94
  overflow: 'scroll',
141
95
  borderRadius: 6,
@@ -150,18 +104,24 @@ export function SpecialTable(_a) {
150
104
  justifyContent: 'center',
151
105
  alignItems: 'center',
152
106
  // maxHeight: 600,
153
- } }, { children: [LoadingComponent && _jsx(LoadingComponent, {}), !LoadingComponent && (_jsx(TailSpin, { height: 36, width: 36, color: "#364153" }))] })) })));
107
+ }, children: [LoadingComponent && (0, jsx_runtime_1.jsx)(LoadingComponent, {}), !LoadingComponent && ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsxs)("linearGradient", { id: "circleGradient", gradientUnits: "objectBoundingBox", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", "stop-color": "#F9F9FA" }), (0, jsx_runtime_1.jsx)("stop", { offset: "5%", "stop-color": "#F9F9FA" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", "stop-color": "#D1D1D1" })] }), (0, jsx_runtime_1.jsxs)("mask", { id: "mask", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "12", fill: "white" }), (0, jsx_runtime_1.jsx)("path", { id: "sector", fill: "black", d: "M15,15 L15,1.8 A13.2,13.2 0 0,1 15,1.8 Z", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "d", from: "M15,15 L15,1.8 A13.2,13.2 0 0,0 15,1.8 Z", to: "M15,15 L15,1.8 A13.2,13.2 0 1,1 15,1.8 Z", dur: "2s", repeatCount: "indefinite" }) })] })] }), (0, jsx_runtime_1.jsxs)("g", { transform: "rotate(0 15 15)", children: [(0, jsx_runtime_1.jsx)("animateTransform", { attributeName: "transform", attributeType: "XML", type: "rotate", from: "0 12 12", to: "360 12 12", dur: "2s", repeatCount: "indefinite" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "12", fill: "none", stroke: "url(#circleGradient)", "stroke-width": "8", mask: "url(#mask)" })] })] }))] }) }));
154
108
  }
155
109
  if (!columns || !columns.length || !rows) {
156
110
  return null;
157
111
  }
158
112
  if (showDownloadCsvButton) {
159
- return (_jsxs("div", __assign({ style: __assign(__assign({}, containerStyle), {
113
+ return ((0, jsx_runtime_1.jsxs)("div", { style: {
114
+ ...containerStyle,
160
115
  // paddingLeft: 25,
161
116
  // paddingRight: 25,
162
117
  // borderRadius: 8,
163
118
  // marginTop: 25,
164
- overflow: 'visible', height: height }) }, { children: [_jsx("div", __assign({ style: { height: 50, background: 'white' }, className: "thead" }, { children: _jsxs("div", __assign({ role: "row", className: "tr", style: {
119
+ overflow: 'visible',
120
+ height: height,
121
+ // overflow: 'hidden',
122
+ // @ts-ignore
123
+ // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
124
+ }, children: [(0, jsx_runtime_1.jsx)("div", { style: { height: 50, background: 'white' }, className: "thead", children: (0, jsx_runtime_1.jsxs)("div", { role: "row", className: "tr", style: {
165
125
  display: 'flex',
166
126
  flex: '1 0 auto',
167
127
  minWidth: '100px',
@@ -170,20 +130,20 @@ export function SpecialTable(_a) {
170
130
  height: 50,
171
131
  // position: 'absolute',
172
132
  // bottom: 0,
173
- } }, { children: [DownloadCSVButtonComponent && (_jsx(DownloadCSVButtonComponent, { onClick: downloadCSV })), !DownloadCSVButtonComponent && (_jsx("div", __assign({ onClick: downloadCSV, style: {
133
+ }, children: [DownloadCSVButtonComponent && ((0, jsx_runtime_1.jsx)(DownloadCSVButtonComponent, { onClick: downloadCSV })), !DownloadCSVButtonComponent && ((0, jsx_runtime_1.jsx)("div", { onClick: downloadCSV, style: {
174
134
  height: 40,
175
135
  minHeight: 40,
176
- color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
136
+ color: theme?.primaryTextColor,
177
137
  boxSizing: 'content-box',
178
- fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
179
- fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
180
- fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
138
+ fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
139
+ fontSize: theme?.fontSizeSmall || '14px',
140
+ fontWeight: theme?.fontWeightMedium || '500',
181
141
  // marginTop: 8,
182
142
  marginLeft: 20,
183
143
  alignItems: 'center',
184
144
  display: 'flex',
185
145
  cursor: 'pointer',
186
- } }, { children: "Download CSV" })))] })) })), _jsx("div", __assign({ style: {
146
+ }, children: "Download CSV" }))] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
187
147
  height: 'calc(100% - 50px)',
188
148
  overflow: 'scroll',
189
149
  borderRadius: 6,
@@ -194,12 +154,12 @@ export function SpecialTable(_a) {
194
154
  boxSizing: 'border-box',
195
155
  outline: 'none',
196
156
  // maxHeight: 600,
197
- } }, { children: _jsxs("div", __assign({ role: "table", className: "table", style: { minWidth: '0px' } }, { children: [_jsx("div", __assign({ className: "thead" }, { children: _jsx("div", __assign({ role: "row", className: "tr", style: {
157
+ }, children: (0, jsx_runtime_1.jsxs)("div", { role: "table", className: "table", style: { minWidth: '0px' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "thead", children: (0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
198
158
  display: 'flex',
199
159
  flex: '1 0 auto',
200
160
  minWidth: '100px',
201
161
  boxSizing: 'border-box',
202
- } }, { children: columns.map(function (column, index) { return (_jsxs("div", __assign({
162
+ }, children: columns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", {
203
163
  // @ts-ignore
204
164
  style: {
205
165
  boxSizing: 'border-box',
@@ -217,28 +177,28 @@ export function SpecialTable(_a) {
217
177
  margin: '0px',
218
178
  textOverflow: 'ellipsis',
219
179
  minHeight: '36px',
220
- } }, { children: [_jsx("div", { style: { width: 16 } }), _jsx("div", __assign({ "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown",
180
+ }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 16 } }), (0, jsx_runtime_1.jsx)("div", { "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown",
221
181
  // @ts-ignore
222
182
  style: {
223
183
  // fontFamily:
224
184
  // 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
225
185
  WebkitTapHighlightColor: 'transparent',
226
- fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
186
+ fontFamily: theme?.fontFamily,
227
187
  // color: 'rgb(55, 65, 81)',
228
- color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
188
+ color: theme?.primaryTextColor,
229
189
  textDecoration: 'none',
230
- fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
231
- fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
190
+ fontSize: theme?.fontSizeSmall || '14px',
191
+ fontWeight: theme?.fontWeightMedium || '500',
232
192
  lineHeight: '20px',
233
193
  textOverflow: 'ellipsis',
234
194
  whiteSpace: 'nowrap',
235
195
  overflow: 'hidden',
236
- } }, { children: column.label }))] }), 'sqlcol' + index)); }) })) })), _jsx("div", __assign({ role: "rowgroup", className: "tbody" }, { children: !rows.length ? (_jsx("div", __assign({ role: "row", className: "tr", style: {
196
+ }, children: column.label })] }, 'sqlcol' + index))) }) }), (0, jsx_runtime_1.jsx)("div", { role: "rowgroup", className: "tbody", children: !rows.length ? ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
237
197
  display: 'flex',
238
198
  flex: '1 0 auto',
239
199
  minWidth: '100px',
240
200
  boxSizing: 'border-box',
241
- } }, { children: _jsx("div", __assign({ role: "cell", className: "td airplane-1h7muk6", style: {
201
+ }, children: (0, jsx_runtime_1.jsx)("div", { role: "cell", className: "td airplane-1h7muk6", style: {
242
202
  boxSizing: 'border-box',
243
203
  flex: '150 0 auto',
244
204
  minWidth: '50px',
@@ -250,32 +210,32 @@ export function SpecialTable(_a) {
250
210
  borderRight: '1px solid rgb(229, 231, 235)',
251
211
  overflow: 'hidden',
252
212
  borderTop: '1px solid rgb(229, 231, 235)',
253
- } }, { children: _jsx("div", __assign({ style: {
213
+ }, children: (0, jsx_runtime_1.jsx)("div", { style: {
254
214
  lineHeight: '24px',
255
215
  width: '100%',
256
216
  display: 'flex',
257
217
  cursor: 'default',
258
218
  position: 'relative',
259
- }, className: "airplane-gowkln", "data-testid": "static-cell" }, { children: _jsx("div", __assign({ className: "airplane-Text-root airplane-mzqt6k", "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r8-dropdown", id: "mantine-r8-target", style: {
260
- fontFamily: (theme === null || theme === void 0 ? void 0 : theme.fontFamily) ||
219
+ }, className: "airplane-gowkln", "data-testid": "static-cell", children: (0, jsx_runtime_1.jsx)("div", { className: "airplane-Text-root airplane-mzqt6k", "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r8-dropdown", id: "mantine-r8-target", style: {
220
+ fontFamily: theme?.fontFamily ||
261
221
  'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
262
222
  WebkitTapHighlightColor: 'transparent',
263
223
  // color: 'rgb(55, 65, 81)',
264
- color: (theme === null || theme === void 0 ? void 0 : theme.secondaryTextColor) || 'rgb(55, 65, 81)',
224
+ color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
265
225
  textDecoration: 'none',
266
226
  fontWeight: 400,
267
- fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
227
+ fontSize: theme?.fontSizeSmall || '14px',
268
228
  lineHeight: '20px',
269
229
  textOverflow: 'ellipsis',
270
230
  whiteSpace: 'nowrap',
271
231
  overflow: 'hidden',
272
232
  padding: '8px 16px',
273
- } }, { children: "No rows returned" })) })) }), 'sqlcell0') }), 'sqlrow0')) : (rows.map(function (row, rowIndex) { return (_jsx("div", __assign({ role: "row", className: "tr", style: {
233
+ }, children: "No rows returned" }) }) }, 'sqlcell0') }, 'sqlrow0')) : (rows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
274
234
  display: 'flex',
275
235
  flex: '1 0 auto',
276
236
  minWidth: '100px',
277
237
  boxSizing: 'border-box',
278
- } }, { children: columns.map(function (column, columnIndex) { return (_jsx("div", __assign({ role: "cell", className: "td airplane-1h7muk6", style: {
238
+ }, children: columns.map((column, columnIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "cell", className: "td airplane-1h7muk6", style: {
279
239
  boxSizing: 'border-box',
280
240
  flex: '150 0 auto',
281
241
  minWidth: '50px',
@@ -290,40 +250,46 @@ export function SpecialTable(_a) {
290
250
  borderBottom: rowIndex === rows.length - 1
291
251
  ? '1px solid rgb(229, 231, 235)'
292
252
  : undefined,
293
- } }, { children: _jsx("div", __assign({ style: {
253
+ }, children: (0, jsx_runtime_1.jsx)("div", { style: {
294
254
  lineHeight: '24px',
295
255
  width: '100%',
296
256
  display: 'flex',
297
257
  cursor: 'default',
298
258
  position: 'relative',
299
- }, className: "airplane-gowkln", "data-testid": "static-cell" }, { children: _jsx("div", __assign({ className: "airplane-Text-root airplane-mzqt6k", "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r8-dropdown", id: "mantine-r8-target", style: {
300
- fontFamily: (theme === null || theme === void 0 ? void 0 : theme.fontFamily) ||
259
+ }, className: "airplane-gowkln", "data-testid": "static-cell", children: (0, jsx_runtime_1.jsx)("div", { className: "airplane-Text-root airplane-mzqt6k", "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r8-dropdown", id: "mantine-r8-target", style: {
260
+ fontFamily: theme?.fontFamily ||
301
261
  'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
302
262
  WebkitTapHighlightColor: 'transparent',
303
263
  // color: 'rgb(55, 65, 81)',
304
- color: (theme === null || theme === void 0 ? void 0 : theme.secondaryTextColor) || 'rgb(55, 65, 81)',
264
+ color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
305
265
  textDecoration: 'none',
306
266
  fontWeight: 400,
307
- fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
267
+ fontSize: theme?.fontSizeSmall || '14px',
308
268
  lineHeight: '20px',
309
269
  textOverflow: 'ellipsis',
310
270
  whiteSpace: 'nowrap',
311
271
  overflow: 'hidden',
312
272
  padding: '8px 16px',
313
- } }, { children: typeof row[column.field] === 'object'
273
+ }, children: typeof row[column.field] === 'object'
314
274
  ? JSON.stringify(row[column.field]).length > 55
315
275
  ? JSON.stringify(row[column.field]).substring(0, 52) + '...'
316
276
  : JSON.stringify(row[column.field])
317
277
  : row[column.field].length > 55
318
278
  ? row[column.field].substring(0, 52) + '...'
319
- : row[column.field] })) })) }), 'sqlcell' + columnIndex)); }) }), 'sqlrow' + rowIndex)); })) }))] })) }))] })));
279
+ : row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex)))) })] }) })] }));
320
280
  }
321
- return (_jsx("div", __assign({ style: __assign(__assign({}, containerStyle), {
281
+ return ((0, jsx_runtime_1.jsx)("div", { style: {
282
+ ...containerStyle,
322
283
  // paddingLeft: 25,
323
284
  // paddingRight: 25,
324
285
  // borderRadius: 8,
325
286
  // marginTop: 25,
326
- overflow: 'visible', height: height }) }, { children: _jsx("div", __assign({ style: {
287
+ overflow: 'visible',
288
+ height: height,
289
+ // overflow: 'hidden',
290
+ // @ts-ignore
291
+ // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
292
+ }, children: (0, jsx_runtime_1.jsx)("div", { style: {
327
293
  height: '100%',
328
294
  overflow: 'scroll',
329
295
  borderRadius: 6,
@@ -334,12 +300,12 @@ export function SpecialTable(_a) {
334
300
  boxSizing: 'border-box',
335
301
  outline: 'none',
336
302
  // maxHeight: 600,
337
- } }, { children: _jsxs("div", __assign({ role: "table", className: "table", style: { minWidth: '0px' } }, { children: [_jsx("div", __assign({ className: "thead" }, { children: _jsx("div", __assign({ role: "row", className: "tr", style: {
303
+ }, children: (0, jsx_runtime_1.jsxs)("div", { role: "table", className: "table", style: { minWidth: '0px' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "thead", children: (0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
338
304
  display: 'flex',
339
305
  flex: '1 0 auto',
340
306
  minWidth: '100px',
341
307
  boxSizing: 'border-box',
342
- } }, { children: columns.map(function (column, index) { return (_jsxs("div", __assign({
308
+ }, children: columns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", {
343
309
  // @ts-ignore
344
310
  style: {
345
311
  boxSizing: 'border-box',
@@ -357,28 +323,28 @@ export function SpecialTable(_a) {
357
323
  margin: '0px',
358
324
  textOverflow: 'ellipsis',
359
325
  minHeight: '36px',
360
- } }, { children: [_jsx("div", { style: { width: 16 } }), _jsx("div", __assign({ "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown",
326
+ }, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 16 } }), (0, jsx_runtime_1.jsx)("div", { "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r6-dropdown",
361
327
  // @ts-ignore
362
328
  style: {
363
329
  // fontFamily:
364
330
  // 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
365
331
  WebkitTapHighlightColor: 'transparent',
366
- fontFamily: theme === null || theme === void 0 ? void 0 : theme.fontFamily,
332
+ fontFamily: theme?.fontFamily,
367
333
  // color: 'rgb(55, 65, 81)',
368
- color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
334
+ color: theme?.primaryTextColor,
369
335
  textDecoration: 'none',
370
- fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
371
- fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
336
+ fontSize: theme?.fontSizeSmall || '14px',
337
+ fontWeight: theme?.fontWeightMedium || '500',
372
338
  lineHeight: '20px',
373
339
  textOverflow: 'ellipsis',
374
340
  whiteSpace: 'nowrap',
375
341
  overflow: 'hidden',
376
- } }, { children: column.label }))] }), 'sqlcol' + index)); }) })) })), _jsx("div", __assign({ role: "rowgroup", className: "tbody" }, { children: rows.map(function (row, rowIndex) { return (_jsx("div", __assign({ role: "row", className: "tr", style: {
342
+ }, children: column.label })] }, 'sqlcol' + index))) }) }), (0, jsx_runtime_1.jsx)("div", { role: "rowgroup", className: "tbody", children: rows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "row", className: "tr", style: {
377
343
  display: 'flex',
378
344
  flex: '1 0 auto',
379
345
  minWidth: '100px',
380
346
  boxSizing: 'border-box',
381
- } }, { children: columns.map(function (column, columnIndex) { return (_jsx("div", __assign({ role: "cell", className: "td airplane-1h7muk6", style: {
347
+ }, children: columns.map((column, columnIndex) => ((0, jsx_runtime_1.jsx)("div", { role: "cell", className: "td airplane-1h7muk6", style: {
382
348
  boxSizing: 'border-box',
383
349
  flex: '150 0 auto',
384
350
  minWidth: '50px',
@@ -390,118 +356,105 @@ export function SpecialTable(_a) {
390
356
  borderRight: '1px solid rgb(229, 231, 235)',
391
357
  overflow: 'hidden',
392
358
  borderTop: '1px solid rgb(229, 231, 235)',
393
- } }, { children: _jsx("div", __assign({ style: {
359
+ }, children: (0, jsx_runtime_1.jsx)("div", { style: {
394
360
  lineHeight: '24px',
395
361
  width: '100%',
396
362
  display: 'flex',
397
363
  cursor: 'default',
398
364
  position: 'relative',
399
- }, className: "airplane-gowkln", "data-testid": "static-cell" }, { children: _jsx("div", __assign({ className: "airplane-Text-root airplane-mzqt6k", "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r8-dropdown", id: "mantine-r8-target", style: {
400
- fontFamily: (theme === null || theme === void 0 ? void 0 : theme.fontFamily) ||
365
+ }, className: "airplane-gowkln", "data-testid": "static-cell", children: (0, jsx_runtime_1.jsx)("div", { className: "airplane-Text-root airplane-mzqt6k", "aria-haspopup": "dialog", "aria-expanded": "false", "aria-controls": "mantine-r8-dropdown", id: "mantine-r8-target", style: {
366
+ fontFamily: theme?.fontFamily ||
401
367
  'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
402
368
  WebkitTapHighlightColor: 'transparent',
403
369
  // color: 'rgb(55, 65, 81)',
404
- color: (theme === null || theme === void 0 ? void 0 : theme.secondaryTextColor) || 'rgb(55, 65, 81)',
370
+ color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
405
371
  textDecoration: 'none',
406
372
  fontWeight: 400,
407
- fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '14px',
373
+ fontSize: theme?.fontSizeSmall || '14px',
408
374
  lineHeight: '20px',
409
375
  textOverflow: 'ellipsis',
410
376
  whiteSpace: 'nowrap',
411
377
  overflow: 'hidden',
412
378
  padding: '8px 16px',
413
- } }, { children: typeof row[column.field] === 'object'
379
+ }, children: typeof row[column.field] === 'object'
414
380
  ? JSON.stringify(row[column.field]).length > 55
415
381
  ? JSON.stringify(row[column.field]).substring(0, 52) + '...'
416
382
  : JSON.stringify(row[column.field])
417
383
  : row[column.field].length > 55
418
384
  ? row[column.field].substring(0, 52) + '...'
419
- : row[column.field] })) })) }), 'sqlcell' + columnIndex)); }) }), 'sqlrow' + rowIndex)); }) }))] })) })) })));
385
+ : row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex))) })] }) }) }));
420
386
  }
421
- var ChartUpdater = function (_a) {
422
- var chartId = _a.chartId, containerStyle = _a.containerStyle, dashboard = _a.dashboard, dispatch = _a.dispatch, client = _a.client, theme = _a.theme, downloadCSV = _a.downloadCSV, csvFilename = _a.csvFilename;
423
- var _b = useState(null), chartConfig = _b[0], setChartConfig = _b[1];
424
- var _c = useState(true), loading = _c[0], setLoading = _c[1];
425
- useEffect(function () {
426
- var isSubscribed = true;
427
- function getChartOptions(id) {
428
- return __awaiter(this, void 0, void 0, function () {
429
- var _a, columns, rows, name_1, publicKey, customerId, environment, resp, _b, columns, rows, name_2, e_1;
430
- return __generator(this, function (_c) {
431
- switch (_c.label) {
432
- case 0:
433
- if (!isSubscribed) return [3 /*break*/, 4];
434
- // @ts-ignore
435
- if (dashboard && dashboard[id]) {
436
- _a = dashboard[id], columns = _a.columns, rows = _a.rows, name_1 = _a.name;
437
- setChartConfig({
438
- columns: columns,
439
- rows: rows,
440
- name: name_1,
441
- });
442
- setLoading(false);
443
- return [2 /*return*/];
444
- }
445
- publicKey = client.publicKey, customerId = client.customerId, environment = client.environment;
446
- setLoading(true);
447
- _c.label = 1;
448
- case 1:
449
- _c.trys.push([1, 3, , 4]);
450
- return [4 /*yield*/, axios.get('https://quill-344421.uc.r.appspot.com/item', {
451
- params: {
452
- id: chartId,
453
- orgId: customerId,
454
- publicKey: publicKey,
455
- },
456
- headers: {
457
- environment: environment || undefined,
458
- },
459
- })];
460
- case 2:
461
- resp = _c.sent();
462
- _b = resp.data, columns = _b.columns, rows = _b.rows, name_2 = _b.name;
463
- setChartConfig({
464
- columns: columns,
465
- rows: rows,
466
- name: name_2,
467
- });
468
- setLoading(false);
469
- return [3 /*break*/, 4];
470
- case 3:
471
- e_1 = _c.sent();
472
- console.log('Error fetching chart: ', e_1);
473
- setLoading(false);
474
- return [3 /*break*/, 4];
475
- case 4: return [2 /*return*/];
476
- }
477
- });
478
- });
387
+ exports.SpecialTable = SpecialTable;
388
+ const ChartUpdater = ({ chartId, containerStyle, dashboard, dispatch, client, theme, downloadCSV, csvFilename, }) => {
389
+ const [chartConfig, setChartConfig] = (0, react_1.useState)(null);
390
+ const [loading, setLoading] = (0, react_1.useState)(true);
391
+ (0, react_1.useEffect)(() => {
392
+ let isSubscribed = true;
393
+ async function getChartOptions(id) {
394
+ if (isSubscribed) {
395
+ // @ts-ignore
396
+ if (dashboard && dashboard[id]) {
397
+ const { columns, rows, name } = dashboard[id];
398
+ setChartConfig({
399
+ columns,
400
+ rows,
401
+ name,
402
+ });
403
+ setLoading(false);
404
+ return;
405
+ }
406
+ const { publicKey, customerId, environment } = client;
407
+ setLoading(true);
408
+ try {
409
+ const resp = await axios_1.default.get('https://quill-344421.uc.r.appspot.com/item', {
410
+ params: {
411
+ id: chartId,
412
+ orgId: customerId,
413
+ publicKey: publicKey,
414
+ },
415
+ headers: {
416
+ environment: environment || undefined,
417
+ },
418
+ });
419
+ const { columns, rows, name } = resp.data;
420
+ setChartConfig({
421
+ columns,
422
+ rows,
423
+ name,
424
+ });
425
+ setLoading(false);
426
+ // dispatch({ type: 'UPDATE_DASHBOARD_ITEM', id, data: resp.data });
427
+ }
428
+ catch (e) {
429
+ console.log('Error fetching chart: ', e);
430
+ setLoading(false);
431
+ }
432
+ }
479
433
  }
480
434
  if (chartId && !chartConfig) {
481
435
  getChartOptions(chartId);
482
436
  }
483
- return function () {
437
+ return () => {
484
438
  isSubscribed = false;
485
439
  };
486
440
  }, [chartConfig]);
487
- var NUM_TO_SHOW = (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height)
441
+ const NUM_TO_SHOW = containerStyle?.height
488
442
  ? Math.floor(containerStyle.height / 40) - 1
489
443
  : 6;
490
- var memoizedData = useMemo(function () {
444
+ const memoizedData = (0, react_1.useMemo)(() => {
491
445
  if (!chartConfig || !chartConfig.rows || !chartConfig.rows.length) {
492
446
  return [];
493
447
  }
494
448
  // Deep copy of data
495
- var copiedData = JSON.parse(JSON.stringify(chartConfig && chartConfig.rows && chartConfig.rows.length
449
+ const copiedData = JSON.parse(JSON.stringify(chartConfig && chartConfig.rows && chartConfig.rows.length
496
450
  ? chartConfig.rows
497
451
  : []));
498
- return copiedData.map(function (item) {
499
- var fieldsWithFormattedValues = {};
500
- for (var _i = 0, _a = chartConfig.columns; _i < _a.length; _i++) {
501
- var field = _a[_i];
502
- var value = item[field.field];
503
- fieldsWithFormattedValues[field.field] = valueFormatter({
504
- value: value,
452
+ return copiedData.map(item => {
453
+ const fieldsWithFormattedValues = {};
454
+ for (const field of chartConfig.columns) {
455
+ const value = item[field.field];
456
+ fieldsWithFormattedValues[field.field] = (0, Chart_1.valueFormatter)({
457
+ value,
505
458
  field: field.field,
506
459
  fields: chartConfig.columns,
507
460
  });
@@ -509,98 +462,91 @@ var ChartUpdater = function (_a) {
509
462
  return fieldsWithFormattedValues;
510
463
  });
511
464
  }, [chartConfig]);
512
- var handleDownloadCSV = function () {
465
+ const handleDownloadCSV = () => {
513
466
  downloadCSV(memoizedData, chartConfig.name);
514
467
  };
515
468
  if (!chartConfig || loading) {
516
- return (_jsx("div", __assign({
469
+ return ((0, jsx_runtime_1.jsx)("div", {
517
470
  // className="flex flex-col flex-1 h-[100%]"
518
- style: __assign(__assign({}, containerStyle), {
471
+ style: {
472
+ ...containerStyle,
519
473
  // marginLeft: 25,
520
474
  // marginRight: 25,
521
- boxSizing: 'content-box', height: '100%', display: 'flex', flexDirection: 'column', flex: 1 }) }, { children: _jsx("div", __assign({ style: {
522
- height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) || 300,
475
+ boxSizing: 'content-box',
476
+ height: '100%',
477
+ display: 'flex',
478
+ flexDirection: 'column',
479
+ flex: 1,
480
+ }, children: (0, jsx_runtime_1.jsx)("div", { style: {
481
+ height: containerStyle?.height || 300,
523
482
  width: '100%',
524
483
  boxSizing: 'content-box',
525
- } }, { children: _jsx(Skeleton, { count: 1,
526
- // height={containerStyle?.height}
527
- height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) && (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.marginTop)
528
- ? (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) + (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.marginTop)
529
- : (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height)
530
- ? containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height
531
- : 300, borderRadius: 8,
532
- // highlightColor="#F7F7F8"
533
- highlightColor: "#FDFDFD",
534
- // baseColor="#F3F4F6"
535
- baseColor: "#F9F9FA", width: "100%" }) })) })));
484
+ }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", "xmlns:xlink": "http://www.w3.org/1999/xlink", children: [(0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: "#F9F9FA" }), (0, jsx_runtime_1.jsx)("defs", { fill: "#F9F9FA", children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "10%", y2: "0%", gradientUnits: "userSpaceOnUse", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", "stop-color": "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", "stop-color": "#FEFEFE" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", "stop-color": "rgba(255,255,255,0)" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x1", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }), (0, jsx_runtime_1.jsx)("animate", { attributeName: "x2", from: "-50%", to: "150%", dur: "2s", repeatCount: "indefinite" })] }) }), (0, jsx_runtime_1.jsx)("rect", { width: "50%", height: "100%", fill: "url(#skeletonGradient)", children: (0, jsx_runtime_1.jsx)("animate", { attributeName: "x", from: "-100%", to: "100%", dur: "2s", repeatCount: "indefinite" }) })] }) }) }));
536
485
  }
537
- return (_jsx(SpecialTable, { showDownloadCsvButton: true, csvFilename: csvFilename || chartConfig.name, columns: chartConfig.columns, rows: memoizedData, height: (containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.height) || '100%', theme: theme }));
486
+ return ((0, jsx_runtime_1.jsx)(SpecialTable, { showDownloadCsvButton: true, csvFilename: csvFilename || chartConfig.name, columns: chartConfig.columns, rows: memoizedData, height: containerStyle?.height || '100%', theme: theme }));
538
487
  };
539
- function Columns(_a) {
540
- var columns = _a.columns, data = _a.data, theme = _a.theme, handleDownloadCSV = _a.handleDownloadCSV, numToShow = _a.numToShow;
541
- return (_jsxs("div", __assign({ style: { display: 'flex', flexDirection: 'column', height: '100%' } }, { children: [_jsx("div", __assign({ style: {
488
+ function Columns({ columns, data, theme, handleDownloadCSV, numToShow }) {
489
+ return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
542
490
  display: 'flex',
543
491
  flexDirection: 'row',
544
492
  // overflowX: 'scroll',
545
493
  // overflowY: 'hidden',
546
494
  overflow: 'scroll',
547
495
  height: '100%',
548
- } }, { children: columns.map(function (elem) { return (_jsx(Column, { column: elem, data: data, theme: theme }, elem.field)); }) })), _jsxs("div", __assign({ style: {
496
+ }, children: columns.map(elem => ((0, jsx_runtime_1.jsx)(Column, { column: elem, data: data, theme: theme }, elem.field))) }), (0, jsx_runtime_1.jsxs)("div", { style: {
549
497
  display: 'flex',
550
498
  flexDirection: 'row',
551
499
  alignItems: 'center',
552
500
  justifyContent: 'space-between',
553
501
  // background: 'black',
554
- } }, { children: [data.length > numToShow && (_jsxs("div", __assign({ style: {
555
- color: theme === null || theme === void 0 ? void 0 : theme.chartLabelColor,
502
+ }, children: [data.length > numToShow && ((0, jsx_runtime_1.jsxs)("div", { style: {
503
+ color: theme?.chartLabelColor,
556
504
  boxSizing: 'content-box',
557
- fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
558
- fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
505
+ fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
506
+ fontSize: theme?.fontSizeSmall || '0.875rem',
559
507
  marginLeft: 12,
560
508
  marginTop: 8,
561
- } }, { children: ["...", data.length - numToShow, " more"] }))), _jsx("div", __assign({ onClick: handleDownloadCSV, style: {
509
+ }, children: ["...", data.length - numToShow, " more"] })), (0, jsx_runtime_1.jsx)("div", { onClick: handleDownloadCSV, style: {
562
510
  height: 40,
563
511
  minHeight: 40,
564
- color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
512
+ color: theme?.primaryTextColor,
565
513
  boxSizing: 'content-box',
566
- fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
567
- fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
568
- fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
514
+ fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
515
+ fontSize: theme?.fontSizeSmall || '0.875rem',
516
+ fontWeight: theme?.fontWeightMedium || '500',
569
517
  marginTop: 8,
570
518
  marginLeft: 20,
571
519
  cursor: 'pointer',
572
- } }, { children: "Download CSV" }))] }))] })));
520
+ }, children: "Download CSV" })] })] }));
573
521
  }
574
- function Column(_a) {
575
- var column = _a.column, data = _a.data, theme = _a.theme;
576
- return (_jsxs("div", __assign({ style: {
522
+ function Column({ column, data, theme }) {
523
+ return ((0, jsx_runtime_1.jsxs)("div", { style: {
577
524
  paddingLeft: 20,
578
525
  paddingRight: 20,
579
526
  // width: 'max-content',
580
527
  display: 'inline-flex',
581
528
  flexDirection: 'column',
582
529
  whiteSpace: 'nowrap',
583
- } }, { children: [_jsx("div", __assign({ style: {
530
+ }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
584
531
  height: 40,
585
532
  minHeight: 40,
586
- color: theme === null || theme === void 0 ? void 0 : theme.primaryTextColor,
533
+ color: theme?.primaryTextColor,
587
534
  boxSizing: 'content-box',
588
- fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
589
- fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
590
- fontWeight: (theme === null || theme === void 0 ? void 0 : theme.fontWeightMedium) || '500',
591
- } }, { children: column.label })), data.map(function (elem) { return (_jsx(Cell, { item: elem[column.field], theme: theme })); })] })));
535
+ fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
536
+ fontSize: theme?.fontSizeSmall || '0.875rem',
537
+ fontWeight: theme?.fontWeightMedium || '500',
538
+ }, children: column.label }), data.map(elem => ((0, jsx_runtime_1.jsx)(Cell, { item: elem[column.field], theme: theme })))] }));
592
539
  }
593
- function Cell(_a) {
594
- var item = _a.item, theme = _a.theme;
595
- return (_jsx("div", __assign({ style: {
540
+ function Cell({ item, theme }) {
541
+ return ((0, jsx_runtime_1.jsx)("div", { style: {
596
542
  height: 40,
597
543
  minHeight: 40,
598
544
  whiteSpace: 'nowrap',
599
545
  width: '100%',
600
- fontFamily: (theme === null || theme === void 0 ? void 0 : theme.chartLabelFontFamily) || (theme === null || theme === void 0 ? void 0 : theme.fontFamily),
601
- fontSize: (theme === null || theme === void 0 ? void 0 : theme.fontSizeSmall) || '0.875rem',
602
- color: theme === null || theme === void 0 ? void 0 : theme.chartLabelColor,
603
- } }, { children: item })));
546
+ fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
547
+ fontSize: theme?.fontSizeSmall || '0.875rem',
548
+ color: theme?.chartLabelColor,
549
+ }, children: item }));
604
550
  }
605
- export default Table;
551
+ exports.default = Table;
606
552
  //# sourceMappingURL=Table.js.map