[views][l]: Add chart, table and document component

packages/portal/src/components/explorer/Table/index.js

@@ -1,28 +0,0 @@
-/* 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} ]
- */
-export 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>
-  );
-}
-

packages/portal/src/components/views/Chart.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Plotly from 'plotly.js-basic-dist';
+import createPlotlyComponent from "react-plotly.js/factory";
+
+
+export default function (props) {
+  const Plot = createPlotlyComponent(Plotly);
+
+  // removes produced with plotly logo by default
+  if (!props.spec.config || !props.spec.config.displaylogo) {
+    props.spec.config = Object.assign(props.spec.config || {}, {displaylogo: false});
+  }
+
+  return (
+    <Plot {...props.spec}
+      layout = { {autosize: true} }
+      style = { {width: "100%", height: "100%"} }
+      useResizeHandler = "true"
+    />
+  )
+}

packages/portal/src/components/views/Document.js

@@ -0,0 +1,54 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { usePdf } from 'react-pdf-js';
+import {useTranslation} from "react-i18next"
+
+const PdfViewer = (props) => {
+  const [page, setPage] = useState(1);
+  const [pages, setPages] = useState(null);
+
+  const { t } = useTranslation();
+
+  const renderPagination = (page, pages) => {
+    if (!pages) {
+      return null;
+    }
+    let previousButton = <li className="previous" onClick={() => setPage(page - 1)}><a href="#previous"><span className="arrow-left"></span> Previous</a></li>;
+    if (page === 1) {
+      previousButton = <li className="previous disabled"><a href="#previous"><span className="arrow-left"></span> Previous</a></li>;
+    }
+    let nextButton = <li className="next" onClick={() => setPage(page + 1)}><a href="#next">Next <span className="arrow-right"></span></a></li>;
+    if (page === pages) {
+      nextButton = <li className="next disabled"><a href="#next">Next <span className="arrow-right"></span></a></li>;
+    }
+    return (
+      <nav aria-label="Navigate pages: Previous/Next">
+        <ul className="pager">
+          {previousButton}
+          {nextButton}
+        </ul>
+      </nav>
+    );
+  }
+
+  const canvasEl = useRef(null);
+
+  const [loading, numPages] = usePdf({
+    file: props.file,
+    page,
+    canvasEl
+  });
+
+  useEffect(() => {
+    setPages(numPages);
+  }, [numPages]);
+
+  return (
+    <div>
+      {loading && <span>{t('Loading...')}</span>}
+      <canvas ref={canvasEl} />
+      {renderPagination(page, pages)}
+    </div>
+  );
+}
+
+export default PdfViewer;

packages/portal/src/components/views/Table.js

@@ -0,0 +1,58 @@
+import React from "react"
+import ReactTable from 'react-table-v6'
+// import 'react-table-v6/react-table.css'
+
+
+export default class Table extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: this.props.data,
+      schema: Object.assign({}, this.props.schema)
+    };
+  }
+
+  updateData(newData) {
+    this.setState({
+      data: newData
+    })
+  }
+
+  getFields() {
+    if (this.state.schema && this.state.schema.fields) {
+      return this.state.schema.fields
+    }
+    const fields = []
+    for (let key in this.state.data[0]) {
+      fields.push({
+        name: key
+      })
+    }
+    return fields
+  }
+
+  render() {
+    return (
+      <ReactTable
+        data={this.state.data}
+        columns={this.getFields().map(field => {
+          return {
+            Header: field.name,
+            id: field.name,
+            accessor: val => val[field.name],
+            Cell: props => <div className={field.type || ''}>
+              <span>{props.value}</span>
+            </div>
+          }
+        })}
+        getTheadThProps={() => {
+          return { style: { "wordWrap": "break-word", "whiteSpace": "initial" } }
+        }}
+        showPagination={false}
+        defaultPageSize={100}
+        showPageSizeOptions={false}
+        minRows={10}
+      />
+    )
+  }
+}

packages/portal/src/index.js

@@ -1,3 +1,6 @@
-import { Table } from './components/explorer/Table/index'
+//Components
+import Table from './components/views/Table'
+import Chart from './components/views/Chart'
+import Document from './components/views/Document'
 
-export { Table }
+export { Table, Chart, Document }