Flatten

packages/leafcutter-common/components/RawDataViewer.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { FC } from "react";
+import { Box, Grid } from "@mui/material";
+import { DataGridPro } from "@mui/x-data-grid-pro";
+import { useTranslate } from "react-polyglot";
+
+interface RawDataViewerProps {
+  rows: any[];
+  height: number;
+}
+
+export const RawDataViewer: FC<RawDataViewerProps> = ({ rows, height }) => {
+  const t = useTranslate();
+  const columns = [
+    {
+      field: "date",
+      headerName: t("date"),
+      editable: false,
+      flex: 0.7,
+      valueFormatter: ({ value }: any) => new Date(value).toLocaleDateString(),
+    },
+    {
+      field: "incident",
+      headerName: t("incident"),
+      editable: false,
+      flex: 1,
+    },
+    {
+      field: "technology",
+      headerName: t("technology"),
+      editable: false,
+      flex: 0.8,
+    },
+    {
+      field: "targeted_group",
+      headerName: t("targetedGroup"),
+      editable: false,
+      flex: 1.3,
+    },
+    {
+      field: "country",
+      headerName: t("country"),
+      editable: false,
+      flex: 1,
+    },
+    {
+      field: "region",
+      headerName: t("subregion"),
+      editable: false,
+      flex: 1,
+    },
+    {
+      field: "continent",
+      headerName: t("continent"),
+      editable: false,
+      flex: 1,
+    },
+  ];
+
+  return (
+    <Grid item xs={12}>
+      <Box
+        sx={{ width: "100%", height }}
+        onClick={(e: any) => e.stopPropagation()}
+      >
+        <Grid container direction="column" spacing={2}>
+          <Grid item>
+            <DataGridPro
+              sx={{ width: "100%", height }}
+              rows={rows}
+              columns={columns}
+              density="compact"
+              pageSizeOptions={[100]}
+              disableRowSelectionOnClick
+              hideFooter
+              disableColumnMenu
+              scrollbarSize={10}
+              disableVirtualization
+            />
+          </Grid>
+        </Grid>
+      </Box>
+    </Grid>
+  );
+};