- \n {children.map((item) => {\n const { title, path } = item;\n const isActiveSub = active(path);\n\n return (\n
- \n {navConfig.map((item) => (\n
\n
\n
\n
\n ![\"\"](\"/static/icons/upload.png\")
\n
\n \n \n {\n fileList.length > 0 ? (\n \n Drag & Drop your files here
\n\n
\n ) : null\n }\n \n Ready to upload\n
\n {\n fileList.map((item, index) => (\n\n [1]])
\n
\n ))\n }\n \n
\n fileRemove(item)}>x\n {item.name}
\n{item.size}B
\nLoading...
\n )}\n\n
\n \n \n
\n );\n}\n","/* eslint-disable array-callback-return */\n// react\nimport React from \"react\";\n// material\nimport { styled } from \"@mui/material/styles\";\nimport { Typography, Box } from \"@mui/material\";\n// Styles --------------------------------------------------\nconst DataWrapper = styled(Box)(({ theme }) => ({\n width: \"100%\",\n height: \"100%\",\n overflow: \"auto\",\n backgroundColor: theme.palette.grey[300],\n padding: theme.spacing(0.7),\n borderRadius: theme.spacing(0.7),\n marginTop: theme.spacing(0.5),\n}));\n\nexport default function ScalerWidget(props) {\n // states -----------------------------------------------------\n const [rows, setRows] = React.useState([]);\n const [columns, setColumns] = React.useState([]);\n function createData(name, calories, fat, carbs, protein) {\n return { name, calories, fat, carbs, protein };\n }\n \n const newRows = [\n createData('Frozen yoghurt', 159, 6.0, 24, 4.0),\n createData('Ice cream sandwich', 237, 9.0, 37, 4.3),\n createData('Eclair', 262, 16.0, 24, 6.0),\n createData('Cupcake', 305, 3.7, 67, 4.3),\n createData('Gingerbread', 356, 16.0, 49, 3.9),\n ];\n // functions --------------------------------------------------\n const generateColumns = (data) => {\n let tmpColumns = [];\n Object.keys(data).map((key) => {\n var channel = data[key];\n if (channel.checked) {\n tmpColumns.push({\n field: channel.name,\n headerName: channel.name,\n width: 150,\n channelId: channel.channelId,\n });\n }\n return null;\n });\n // console.log(\"tmpColumns: \", tmpColumns);\n return tmpColumns;\n };\n const generateRows = (data) => {\n let tmpRows = [];\n if (!data) {\n // console.log(\"no data\");\n return tmpRows;\n }\n Object.keys(data).map((rowKey) => {\n var row = data[rowKey];\n // console.log(\"row: \", row);\n var tmpRow = {\n id: rowKey,\n };\n // loop through the columns and check if they exist in the row\n Object.keys(columns).map((key) => {\n var column = columns[key];\n if (row[column.channelId]) {\n tmpRow[column.field] = row[column.channelId];\n } else {\n tmpRow[column.field] = \"\";\n }\n return null;\n });\n tmpRows.push(tmpRow);\n return null;\n });\n // console.log(\"tmpRows: \", tmpRows);\n return tmpRows;\n };\n // useEffect --------------------------------------------------\n React.useEffect(() => {\n // console.log(\"Data : \", props);\n setColumns(generateColumns(props.channelsState));\n setRows(generateRows(props.data));\n // console.log(\"****columns: \", columns);\n // console.log(\"****rows: \", rows);\n }, [props]);\n\n // return ------------------------------------------------------\n // generate a table with the data from the states\n return (\n \n
\n {channelName}
\n {channelValue}
\n | {column.headerName} | ;\n })}\n
|---|
| {row[column.channelId]} | ;\n })}\n