[Src][s]: Move src to root folder

src/components/views/Chart.js

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import createPlotlyComponent from "react-plotly.js/factory";
+let Plot;
+
+const PlotlyChart = (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 { PlotlyChart }

src/components/views/Table.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { DataGrid } from '@material-ui/data-grid';
+
+/**
+ * Displays a table from a Frictionless dataset
+ * @param schema: Frictionless Table Schema
+ * @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