[packages/portal][l]: Moved portal folder to root dir

components/Chart.js

@@ -0,0 +1,31 @@
+import React, { useState, useEffect } from 'react';
+import createPlotlyComponent from "react-plotly.js/factory";
+
+let Plot;
+
+const Chart = (props) => {
+    const [plotCreated, setPlotCreated] = useState(0) //0: false, 1: true
+
+    useEffect(() => {
+        import(`plotly.js-basic-dist`).then(Plotly => { //import Plotly dist when Page has been generated
+            Plot = createPlotlyComponent(Plotly);
+            setPlotCreated(1)
+        });
+    }, [])
+
+    if (!plotCreated) {
+        return (<div>Loading...</div>)
+    }
+
+    return (
+        <div data-testid="plotlyChart">
+            <Plot {...props.spec}
+                layout={{ autosize: true }}
+                style={{ width: "100%", height: "100%" }}
+                useResizeHandler={true}
+            />
+        </div>
+    )
+}
+
+export default Chart 

components/Table.js

@@ -0,0 +1,28 @@
+/* eslint-disable max-len */
+import React from 'react';
+import { DataGrid } from '@material-ui/data-grid';
+/*
+ * @param schema: Frictionless Table Schmea
+ * @param data: an array of data objects e.g. [ {a: 1, b: 2}, {a: 5, b: 7} ]
+ */
+const Table = ({ schema, data }) => {
+  const columns = schema.fields.map((field) => (
+    {
+      field: field.title || field.name,
+      headerName: field.name,
+      width: 300
+    }
+  ))
+  data = data.map((item, index)=>{
+    item.id = index //Datagrid requires every row to have an ID
+    return item
+  })
+  
+  return (
+    <div data-testid="tableGrid" style={{ height: 400, width: '100%' }}>
+      <DataGrid rows={data} columns={columns} pageSize={5} />
+    </div>
+  );
+}
+
+export default Table