[#812,package][xl]: initial versioning of the package

packages/components-old/src/components/views/Chart.js

@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import createPlotlyComponent from "react-plotly.js/factory";
+let Plot;
+
+const PlotlyChart = ({spec}) => {
+  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 {...spec}
+        layout={{ autosize: true }}
+        style={{ width: "100%", height: "100%" }}
+        useResizeHandler={true}
+      />
+    </div>
+  )
+}
+
+PlotlyChart.propTypes = {
+  spec: PropTypes.object.isRequired
+}
+export { PlotlyChart }

packages/components-old/src/components/views/Table.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import PropTypes from 'prop-types';
+
+/**
+ * Displays dataset in tabular form using data grid
+ * @param columns: An array of column names with properties: e.g [{field: "col1", headerName: "col1"}, {field: "col2", headerName: "col2"}]
+ * @param data: an array of data objects e.g. [ {col1: 1, col2: 2}, {col1: 5, col2: 7} ]
+ */
+const Table = ({ columns, data, height, width }) => {
+  let rows = [...data,]
+  rows = rows.map((row, i) => {
+    row['id'] = i
+    return row
+  })
+  return (
+    <div style={{ height, width }} data-testid="tableGrid">
+      <DataGrid rows={rows} columns={columns} pageSize={5} />
+    </div>
+  );
+}
+
+Table.propTypes = {
+  columns: PropTypes.array.isRequired,
+  data: PropTypes.array.isRequired
+}
+
+export default Table