saydata
Version:
Saydata seamlessly integrates AI-driven analytics for your customers into your app. Designed for beautiful visualization. Engineered for simplicity.
98 lines (97 loc) • 5.36 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DataGrid, useGridApiContext, } from "@mui/x-data-grid";
import classes from "./RowsView.module.scss";
import { Button, LinearProgress, } from "@mui/material";
import noData from "../icons/nodata.svg";
import { AddCircleOutlineRounded, DownloadRounded } from "@mui/icons-material";
import { useState } from "react";
export default function RowsView(_a) {
var rows = _a.rows, blockId = _a.blockId, _b = _a.loading, loading = _b === void 0 ? false : _b, chat = _a.chat, _c = _a.showFooter, showFooter = _c === void 0 ? true : _c, _d = _a.showExport, showExport = _d === void 0 ? true : _d, _e = _a.dashboardId, dashboardId = _e === void 0 ? "" : _e, _f = _a.gridHeight, gridHeight = _f === void 0 ? "40vh" : _f, _g = _a.addChartToDashboard, addChartToDashboard = _g === void 0 ? function () { } : _g;
function CustomToolbar() {
var apiRef = useGridApiContext();
var _a = useState(null), anchorElTable = _a[0], setAnchorElTable = _a[1];
var handleExport = function (options) {
return apiRef.current.exportDataAsCsv(options);
};
return (_jsxs("div", __assign({ className: classes.customToolbar }, { children: [_jsx(Button, __assign({ className: classes.textButton, size: "small", onClick: function () {
return handleExport({
delimiter: ";",
utf8WithBom: true,
fileName: "export",
});
}, startIcon: _jsx(DownloadRounded, { sx: { fontSize: 18, paddingLeft: "5px" } }) }, { children: "Export" })), chat && (_jsx(Button, __assign({ style: { marginLeft: "auto" }, className: classes.textButton, onClick: function (e) { return addChartToDashboard(dashboardId, chat, "table"); }, size: "small", startIcon: _jsx(AddCircleOutlineRounded, {}) }, { children: "Add to Dashboard" })))] })));
}
function CustomLinearProgress() {
return (_jsx(LinearProgress, { classes: {
colorPrimary: classes.linearPrimary,
barColorPrimary: classes.linearBarPrimary,
}, sx: { borderRadius: 4 } }));
}
var columns = (rows === null || rows === void 0 ? void 0 : rows.length) > 0
? Array.from(Object.keys(rows === null || rows === void 0 ? void 0 : rows[0])).map(function (col_name) {
return {
field: col_name,
headerName: col_name,
flex: 1,
headerClassName: "table-header",
align: "center",
headerAlign: "center",
cellClassName: "cell-class",
minWidth: 150,
disableColumnMenu: true,
};
})
: [];
var modifiedRows = rows === null || rows === void 0 ? void 0 : rows.map(function (row, index) {
return __assign(__assign({}, row), { id: blockId + "-" + index });
});
return (_jsx("div", __assign({ className: classes.root }, { children: _jsx(DataGrid, { style: (rows === null || rows === void 0 ? void 0 : rows.length) === 0
? { maxHeight: "40vh", minHeight: "25vh" }
: { maxHeight: gridHeight }, rows: modifiedRows, columns: columns, sx: {
fontSize: 14,
border: "none",
padding: "4px",
"& .table-header": {
background: "#F6F2F9",
},
"& .MuiDataGrid-columnHeaderTitle": {
fontWeight: 600,
},
"& .MuiDataGrid-columnHeaders": {
borderBottom: "none",
},
"& .cell-class": {
color: "rgba(0, 0, 0, 0.56)",
},
"& .MuiDataGrid-footerContainer": {
minHeight: "unset",
height: "30px",
},
}, initialState: {
pagination: { paginationModel: { pageSize: 50 } },
}, columnHeaderHeight: 30, hideFooter: !showFooter || (rows === null || rows === void 0 ? void 0 : rows.length) === 0, rowHeight: 30, rowSelection: false, pageSizeOptions: [50], slots: showExport && (rows === null || rows === void 0 ? void 0 : rows.length) > 0
? {
toolbar: CustomToolbar,
loadingOverlay: CustomLinearProgress,
}
: {
loadingOverlay: CustomLinearProgress,
noRowsOverlay: function () { return (_jsx("div", __assign({ style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "100%",
} }, { children: _jsx("img", { src: noData, alt: "No Data" }) }))); },
}, loading: loading }) })));
}