@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.
- package/lib/AddToDashboardModal.js +249 -369
- package/lib/AddToDashboardModal.js.map +1 -1
- package/lib/BarList.js +92 -109
- package/lib/BarList.js.map +1 -1
- package/lib/Chart.d.ts +0 -1
- package/lib/Chart.js +359 -419
- package/lib/Chart.js.map +1 -1
- package/lib/Context.d.ts +1 -2
- package/lib/Context.js +91 -85
- package/lib/Context.js.map +1 -1
- package/lib/Dashboard.js +181 -209
- package/lib/Dashboard.js.map +1 -1
- package/lib/DateRangePicker/Calendar.js +87 -91
- package/lib/DateRangePicker/Calendar.js.map +1 -1
- package/lib/DateRangePicker/DateRangePicker.js +70 -68
- package/lib/DateRangePicker/DateRangePicker.js.map +1 -1
- package/lib/DateRangePicker/DateRangePickerButton.js +46 -57
- package/lib/DateRangePicker/DateRangePickerButton.js.map +1 -1
- package/lib/DateRangePicker/dateRangePickerUtils.js +105 -99
- package/lib/DateRangePicker/dateRangePickerUtils.js.map +1 -1
- package/lib/DateRangePicker/index.js +8 -1
- package/lib/DateRangePicker/index.js.map +1 -1
- package/lib/PieChart.js +221 -225
- package/lib/PieChart.js.map +1 -1
- package/lib/QuillProvider.d.ts +1 -2
- package/lib/QuillProvider.js +8 -18
- package/lib/QuillProvider.js.map +1 -1
- package/lib/ReportBuilder.js +430 -526
- package/lib/ReportBuilder.js.map +1 -1
- package/lib/SQLEditor.js +182 -268
- package/lib/SQLEditor.js.map +1 -1
- package/lib/Table.js +207 -261
- package/lib/Table.js.map +1 -1
- package/lib/TableChart.js +76 -75
- package/lib/TableChart.js.map +1 -1
- package/lib/assets/ArrowDownHeadIcon.js +5 -28
- package/lib/assets/ArrowDownHeadIcon.js.map +1 -1
- package/lib/assets/ArrowDownIcon.js +5 -28
- package/lib/assets/ArrowDownIcon.js.map +1 -1
- package/lib/assets/ArrowDownRightIcon.js +5 -28
- package/lib/assets/ArrowDownRightIcon.js.map +1 -1
- package/lib/assets/ArrowLeftHeadIcon.js +5 -28
- package/lib/assets/ArrowLeftHeadIcon.js.map +1 -1
- package/lib/assets/ArrowRightHeadIcon.js +5 -28
- package/lib/assets/ArrowRightHeadIcon.js.map +1 -1
- package/lib/assets/ArrowRightIcon.js +5 -28
- package/lib/assets/ArrowRightIcon.js.map +1 -1
- package/lib/assets/ArrowUpHeadIcon.js +5 -28
- package/lib/assets/ArrowUpHeadIcon.js.map +1 -1
- package/lib/assets/ArrowUpIcon.js +5 -28
- package/lib/assets/ArrowUpIcon.js.map +1 -1
- package/lib/assets/ArrowUpRightIcon.js +5 -28
- package/lib/assets/ArrowUpRightIcon.js.map +1 -1
- package/lib/assets/CalendarIcon.js +5 -28
- package/lib/assets/CalendarIcon.js.map +1 -1
- package/lib/assets/DoubleArrowLeftHeadIcon.js +5 -28
- package/lib/assets/DoubleArrowLeftHeadIcon.js.map +1 -1
- package/lib/assets/DoubleArrowRightHeadIcon.js +5 -28
- package/lib/assets/DoubleArrowRightHeadIcon.js.map +1 -1
- package/lib/assets/ExclamationFilledIcon.js +5 -28
- package/lib/assets/ExclamationFilledIcon.js.map +1 -1
- package/lib/assets/LoadingSpinner.js +5 -28
- package/lib/assets/LoadingSpinner.js.map +1 -1
- package/lib/assets/SearchIcon.js +5 -28
- package/lib/assets/SearchIcon.js.map +1 -1
- package/lib/assets/XCircleIcon.js +5 -28
- package/lib/assets/XCircleIcon.js.map +1 -1
- package/lib/assets/index.js +38 -16
- package/lib/assets/index.js.map +1 -1
- package/lib/components/BigModal/BigModal.js +45 -43
- package/lib/components/BigModal/BigModal.js.map +1 -1
- package/lib/components/Dropdown/Dropdown.js +57 -53
- package/lib/components/Dropdown/Dropdown.js.map +1 -1
- package/lib/components/Dropdown/DropdownItem.js +43 -40
- package/lib/components/Dropdown/DropdownItem.js.map +1 -1
- package/lib/components/Dropdown/index.js +10 -2
- package/lib/components/Dropdown/index.js.map +1 -1
- package/lib/components/Modal/Modal.js +45 -43
- package/lib/components/Modal/Modal.js.map +1 -1
- package/lib/components/Modal/index.js +8 -1
- package/lib/components/Modal/index.js.map +1 -1
- package/lib/components/selectUtils.js +20 -15
- package/lib/components/selectUtils.js.map +1 -1
- package/lib/contexts/BaseColorContext.js +5 -3
- package/lib/contexts/BaseColorContext.js.map +1 -1
- package/lib/contexts/HoveredValueContext.js +5 -3
- package/lib/contexts/HoveredValueContext.js.map +1 -1
- package/lib/contexts/RootStylesContext.js +5 -3
- package/lib/contexts/RootStylesContext.js.map +1 -1
- package/lib/contexts/SelectedValueContext.js +5 -3
- package/lib/contexts/SelectedValueContext.js.map +1 -1
- package/lib/contexts/index.js +14 -4
- package/lib/contexts/index.js.map +1 -1
- package/lib/hooks/index.js +14 -4
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useInternalState.js +9 -7
- package/lib/hooks/useInternalState.js.map +1 -1
- package/lib/hooks/useOnClickOutside.js +8 -6
- package/lib/hooks/useOnClickOutside.js.map +1 -1
- package/lib/hooks/useOnWindowResize.js +9 -7
- package/lib/hooks/useOnWindowResize.js.map +1 -1
- package/lib/hooks/useQuill.js +60 -111
- package/lib/hooks/useQuill.js.map +1 -1
- package/lib/hooks/useSelectOnKeyDown.js +17 -15
- package/lib/hooks/useSelectOnKeyDown.js.map +1 -1
- package/lib/index.js +22 -8
- package/lib/index.js.map +1 -1
- package/lib/lib/font.d.ts +13 -0
- package/lib/lib/font.js +17 -0
- package/lib/lib/font.js.map +1 -0
- package/lib/lib/index.d.ts +3 -0
- package/lib/lib/index.js +20 -0
- package/lib/lib/index.js.map +1 -0
- package/lib/lib/inputTypes.d.ts +20 -0
- package/lib/lib/inputTypes.js +57 -0
- package/lib/lib/inputTypes.js.map +1 -0
- package/lib/lib/utils.d.ts +9 -0
- package/lib/lib/utils.js +46 -0
- package/lib/lib/utils.js.map +1 -0
- package/package.json +6 -13
- package/src/AddToDashboardModal.tsx +2 -9
- package/src/Chart.tsx +49 -20
- package/src/Context.tsx +0 -3
- package/src/Dashboard.tsx +2 -3
- package/src/PieChart.tsx +2 -2
- package/src/QuillProvider.tsx +0 -3
- package/src/ReportBuilder.tsx +3 -9
- package/src/SQLEditor.tsx +99 -12
- package/src/Table.tsx +99 -10
- package/src/hooks/useQuill.ts +1 -2
- package/src/lib/font.ts +14 -0
- package/src/lib/index.ts +3 -0
- package/src/lib/inputTypes.ts +81 -0
- package/src/lib/utils.tsx +46 -0
- package/tsconfig.json +3 -3
- package/rollup.config.ts +0 -21
package/lib/Table.js
CHANGED
|
@@ -1,89 +1,42 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
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
|
-
|
|
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
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
import Skeleton from 'react-loading-skeleton';
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
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
|
-
|
|
68
|
-
|
|
69
|
-
|
|
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 (
|
|
78
|
-
|
|
79
|
-
|
|
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
|
-
|
|
83
|
-
|
|
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
|
-
|
|
86
|
-
downloadLink.download =
|
|
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 (
|
|
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 (
|
|
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
|
-
|
|
99
|
-
|
|
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
|
-
|
|
106
|
-
|
|
107
|
-
|
|
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 (
|
|
116
|
-
|
|
117
|
-
|
|
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
|
-
|
|
121
|
-
|
|
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
|
-
|
|
124
|
-
downloadLink.download =
|
|
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 (
|
|
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%',
|
|
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
|
-
}
|
|
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 (
|
|
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',
|
|
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
|
-
}
|
|
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
|
|
136
|
+
color: theme?.primaryTextColor,
|
|
177
137
|
boxSizing: 'content-box',
|
|
178
|
-
fontFamily:
|
|
179
|
-
fontSize:
|
|
180
|
-
fontWeight:
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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
|
|
186
|
+
fontFamily: theme?.fontFamily,
|
|
227
187
|
// color: 'rgb(55, 65, 81)',
|
|
228
|
-
color: theme
|
|
188
|
+
color: theme?.primaryTextColor,
|
|
229
189
|
textDecoration: 'none',
|
|
230
|
-
fontSize:
|
|
231
|
-
fontWeight:
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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"
|
|
260
|
-
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:
|
|
224
|
+
color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
|
|
265
225
|
textDecoration: 'none',
|
|
266
226
|
fontWeight: 400,
|
|
267
|
-
fontSize:
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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"
|
|
300
|
-
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:
|
|
264
|
+
color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
|
|
305
265
|
textDecoration: 'none',
|
|
306
266
|
fontWeight: 400,
|
|
307
|
-
fontSize:
|
|
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
|
-
}
|
|
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] })
|
|
279
|
+
: row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex)))) })] }) })] }));
|
|
320
280
|
}
|
|
321
|
-
return (
|
|
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',
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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
|
|
332
|
+
fontFamily: theme?.fontFamily,
|
|
367
333
|
// color: 'rgb(55, 65, 81)',
|
|
368
|
-
color: theme
|
|
334
|
+
color: theme?.primaryTextColor,
|
|
369
335
|
textDecoration: 'none',
|
|
370
|
-
fontSize:
|
|
371
|
-
fontWeight:
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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
|
-
}
|
|
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"
|
|
400
|
-
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:
|
|
370
|
+
color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
|
|
405
371
|
textDecoration: 'none',
|
|
406
372
|
fontWeight: 400,
|
|
407
|
-
fontSize:
|
|
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
|
-
}
|
|
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] })
|
|
385
|
+
: row[column.field] }) }) }, 'sqlcell' + columnIndex))) }, 'sqlrow' + rowIndex))) })] }) }) }));
|
|
420
386
|
}
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
function getChartOptions(id) {
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
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
|
|
437
|
+
return () => {
|
|
484
438
|
isSubscribed = false;
|
|
485
439
|
};
|
|
486
440
|
}, [chartConfig]);
|
|
487
|
-
|
|
441
|
+
const NUM_TO_SHOW = containerStyle?.height
|
|
488
442
|
? Math.floor(containerStyle.height / 40) - 1
|
|
489
443
|
: 6;
|
|
490
|
-
|
|
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
|
-
|
|
449
|
+
const copiedData = JSON.parse(JSON.stringify(chartConfig && chartConfig.rows && chartConfig.rows.length
|
|
496
450
|
? chartConfig.rows
|
|
497
451
|
: []));
|
|
498
|
-
return copiedData.map(
|
|
499
|
-
|
|
500
|
-
for (
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
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
|
-
|
|
465
|
+
const handleDownloadCSV = () => {
|
|
513
466
|
downloadCSV(memoizedData, chartConfig.name);
|
|
514
467
|
};
|
|
515
468
|
if (!chartConfig || loading) {
|
|
516
|
-
return (
|
|
469
|
+
return ((0, jsx_runtime_1.jsx)("div", {
|
|
517
470
|
// className="flex flex-col flex-1 h-[100%]"
|
|
518
|
-
style:
|
|
471
|
+
style: {
|
|
472
|
+
...containerStyle,
|
|
519
473
|
// marginLeft: 25,
|
|
520
474
|
// marginRight: 25,
|
|
521
|
-
boxSizing: 'content-box',
|
|
522
|
-
|
|
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:
|
|
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 (
|
|
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(
|
|
540
|
-
|
|
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
|
-
}
|
|
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
|
-
}
|
|
555
|
-
color: theme
|
|
502
|
+
}, children: [data.length > numToShow && ((0, jsx_runtime_1.jsxs)("div", { style: {
|
|
503
|
+
color: theme?.chartLabelColor,
|
|
556
504
|
boxSizing: 'content-box',
|
|
557
|
-
fontFamily:
|
|
558
|
-
fontSize:
|
|
505
|
+
fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
506
|
+
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
559
507
|
marginLeft: 12,
|
|
560
508
|
marginTop: 8,
|
|
561
|
-
}
|
|
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
|
|
512
|
+
color: theme?.primaryTextColor,
|
|
565
513
|
boxSizing: 'content-box',
|
|
566
|
-
fontFamily:
|
|
567
|
-
fontSize:
|
|
568
|
-
fontWeight:
|
|
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
|
-
}
|
|
520
|
+
}, children: "Download CSV" })] })] }));
|
|
573
521
|
}
|
|
574
|
-
function Column(
|
|
575
|
-
|
|
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
|
-
}
|
|
530
|
+
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
|
|
584
531
|
height: 40,
|
|
585
532
|
minHeight: 40,
|
|
586
|
-
color: theme
|
|
533
|
+
color: theme?.primaryTextColor,
|
|
587
534
|
boxSizing: 'content-box',
|
|
588
|
-
fontFamily:
|
|
589
|
-
fontSize:
|
|
590
|
-
fontWeight:
|
|
591
|
-
}
|
|
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(
|
|
594
|
-
|
|
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:
|
|
601
|
-
fontSize:
|
|
602
|
-
color: theme
|
|
603
|
-
}
|
|
546
|
+
fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
|
|
547
|
+
fontSize: theme?.fontSizeSmall || '0.875rem',
|
|
548
|
+
color: theme?.chartLabelColor,
|
|
549
|
+
}, children: item }));
|
|
604
550
|
}
|
|
605
|
-
|
|
551
|
+
exports.default = Table;
|
|
606
552
|
//# sourceMappingURL=Table.js.map
|