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

packages/portal/.gitignore

@@ -30,4 +30,4 @@ yarn-error.log*
 .env.production.local
 
 # output
-dist/
+dist/*

packages/portal/dist/index.cjs.js

@@ -3,44 +3,385 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var dataGrid = require('@material-ui/data-grid');
+var ReactTable = require('react-table-v6');
+var Plotly = require('plotly.js-basic-dist');
+var createPlotlyComponent = require('react-plotly.js/factory');
+var reactPdfJs = require('react-pdf-js');
+var reactI18next = require('react-i18next');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactTable__default = /*#__PURE__*/_interopDefaultLegacy(ReactTable);
+var Plotly__default = /*#__PURE__*/_interopDefaultLegacy(Plotly);
+var createPlotlyComponent__default = /*#__PURE__*/_interopDefaultLegacy(createPlotlyComponent);
 
-/* eslint-disable max-len */
-/*
- * @param schema: Frictionless Table Schmea
- * @param data: an array of data objects e.g. [ {a: 1, b: 2}, {a: 5, b: 7} ]
- */
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
 
-var Table = function Table(_ref) {
-  var schema = _ref.schema,
-      data = _ref.data;
-  var columns = schema.fields.map(function (field) {
-    return {
-      field: field.title || field.name,
-      headerName: field.name,
-      width: 300
-    };
-  });
-  data = data.map(function (item, index) {
-    item.id = index; //Datagrid requires every row to have an ID
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
 
-    return item;
-  });
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    "data-testid": "tableGrid",
-    style: {
-      height: 400,
-      width: '100%'
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
-  }, /*#__PURE__*/React__default['default'].createElement(dataGrid.DataGrid, {
-    rows: data,
-    columns: columns,
-    pageSize: 5
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf(Derived),
+        result;
+
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
+
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+
+  var _s, _e;
+
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var Table = /*#__PURE__*/function (_React$Component) {
+  _inherits(Table, _React$Component);
+
+  var _super = _createSuper(Table);
+
+  function Table(props) {
+    var _this;
+
+    _classCallCheck(this, Table);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      data: _this.props.data,
+      schema: Object.assign({}, _this.props.schema)
+    };
+    return _this;
+  }
+
+  _createClass(Table, [{
+    key: "updateData",
+    value: function updateData(newData) {
+      this.setState({
+        data: newData
+      });
+    }
+  }, {
+    key: "getFields",
+    value: function getFields() {
+      if (this.state.schema && this.state.schema.fields) {
+        return this.state.schema.fields;
+      }
+
+      var fields = [];
+
+      for (var key in this.state.data[0]) {
+        fields.push({
+          name: key
+        });
+      }
+
+      return fields;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React__default['default'].createElement(ReactTable__default['default'], {
+        data: this.state.data,
+        columns: this.getFields().map(function (field) {
+          return {
+            Header: field.name,
+            id: field.name,
+            accessor: function accessor(val) {
+              return val[field.name];
+            },
+            Cell: function Cell(props) {
+              return /*#__PURE__*/React__default['default'].createElement("div", {
+                className: field.type || ''
+              }, /*#__PURE__*/React__default['default'].createElement("span", null, props.value));
+            }
+          };
+        }),
+        getTheadThProps: function getTheadThProps() {
+          return {
+            style: {
+              "wordWrap": "break-word",
+              "whiteSpace": "initial"
+            }
+          };
+        },
+        showPagination: false,
+        defaultPageSize: 100,
+        showPageSizeOptions: false,
+        minRows: 10
+      });
+    }
+  }]);
+
+  return Table;
+}(React__default['default'].Component);
+
+function Chart (props) {
+  var Plot = createPlotlyComponent__default['default'](Plotly__default['default']); // 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 /*#__PURE__*/React__default['default'].createElement(Plot, _extends({}, props.spec, {
+    layout: {
+      autosize: true
+    },
+    style: {
+      width: "100%",
+      height: "100%"
+    },
+    useResizeHandler: "true"
   }));
+}
+
+var PdfViewer = function PdfViewer(props) {
+  var _useState = React.useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      page = _useState2[0],
+      setPage = _useState2[1];
+
+  var _useState3 = React.useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      pages = _useState4[0],
+      setPages = _useState4[1];
+
+  var _useTranslation = reactI18next.useTranslation(),
+      t = _useTranslation.t;
+
+  var renderPagination = function renderPagination(page, pages) {
+    if (!pages) {
+      return null;
+    }
+
+    var previousButton = /*#__PURE__*/React__default['default'].createElement("li", {
+      className: "previous",
+      onClick: function onClick() {
+        return setPage(page - 1);
+      }
+    }, /*#__PURE__*/React__default['default'].createElement("a", {
+      href: "#previous"
+    }, /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "arrow-left"
+    }), " Previous"));
+
+    if (page === 1) {
+      previousButton = /*#__PURE__*/React__default['default'].createElement("li", {
+        className: "previous disabled"
+      }, /*#__PURE__*/React__default['default'].createElement("a", {
+        href: "#previous"
+      }, /*#__PURE__*/React__default['default'].createElement("span", {
+        className: "arrow-left"
+      }), " Previous"));
+    }
+
+    var nextButton = /*#__PURE__*/React__default['default'].createElement("li", {
+      className: "next",
+      onClick: function onClick() {
+        return setPage(page + 1);
+      }
+    }, /*#__PURE__*/React__default['default'].createElement("a", {
+      href: "#next"
+    }, "Next ", /*#__PURE__*/React__default['default'].createElement("span", {
+      className: "arrow-right"
+    })));
+
+    if (page === pages) {
+      nextButton = /*#__PURE__*/React__default['default'].createElement("li", {
+        className: "next disabled"
+      }, /*#__PURE__*/React__default['default'].createElement("a", {
+        href: "#next"
+      }, "Next ", /*#__PURE__*/React__default['default'].createElement("span", {
+        className: "arrow-right"
+      })));
+    }
+
+    return /*#__PURE__*/React__default['default'].createElement("nav", {
+      "aria-label": "Navigate pages: Previous/Next"
+    }, /*#__PURE__*/React__default['default'].createElement("ul", {
+      className: "pager"
+    }, previousButton, nextButton));
+  };
+
+  var canvasEl = React.useRef(null);
+
+  var _usePdf = reactPdfJs.usePdf({
+    file: props.file,
+    page: page,
+    canvasEl: canvasEl
+  }),
+      _usePdf2 = _slicedToArray(_usePdf, 2),
+      loading = _usePdf2[0],
+      numPages = _usePdf2[1];
+
+  React.useEffect(function () {
+    setPages(numPages);
+  }, [numPages]);
+  return /*#__PURE__*/React__default['default'].createElement("div", null, loading && /*#__PURE__*/React__default['default'].createElement("span", null, t('Loading...')), /*#__PURE__*/React__default['default'].createElement("canvas", {
+    ref: canvasEl
+  }), renderPagination(page, pages));
 };
 
+exports.Chart = Chart;
+exports.Document = PdfViewer;
 exports.Table = Table;

packages/portal/dist/index.esm.js

@@ -1,38 +1,374 @@
-import React from 'react';
-import { DataGrid } from '@material-ui/data-grid';
+import React, { useState, useRef, useEffect } from 'react';
+import ReactTable from 'react-table-v6';
+import Plotly from 'plotly.js-basic-dist';
+import createPlotlyComponent from 'react-plotly.js/factory';
+import { usePdf } from 'react-pdf-js';
+import { useTranslation } from 'react-i18next';
 
-/* eslint-disable max-len */
-/*
- * @param schema: Frictionless Table Schmea
- * @param data: an array of data objects e.g. [ {a: 1, b: 2}, {a: 5, b: 7} ]
- */
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
 
-var Table = function Table(_ref) {
-  var schema = _ref.schema,
-      data = _ref.data;
-  var columns = schema.fields.map(function (field) {
-    return {
-      field: field.title || field.name,
-      headerName: field.name,
-      width: 300
-    };
-  });
-  data = data.map(function (item, index) {
-    item.id = index; //Datagrid requires every row to have an ID
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
 
-    return item;
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": "tableGrid",
-    style: {
-      height: 400,
-      width: '100%'
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
-  }, /*#__PURE__*/React.createElement(DataGrid, {
-    rows: data,
-    columns: columns,
-    pageSize: 5
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf(Derived),
+        result;
+
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
+
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
+
+  var _s, _e;
+
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
+
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
+    try {
+      if (!_n && _i["return"] != null) _i["return"]();
+    } finally {
+      if (_d) throw _e;
+    }
+  }
+
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var Table = /*#__PURE__*/function (_React$Component) {
+  _inherits(Table, _React$Component);
+
+  var _super = _createSuper(Table);
+
+  function Table(props) {
+    var _this;
+
+    _classCallCheck(this, Table);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      data: _this.props.data,
+      schema: Object.assign({}, _this.props.schema)
+    };
+    return _this;
+  }
+
+  _createClass(Table, [{
+    key: "updateData",
+    value: function updateData(newData) {
+      this.setState({
+        data: newData
+      });
+    }
+  }, {
+    key: "getFields",
+    value: function getFields() {
+      if (this.state.schema && this.state.schema.fields) {
+        return this.state.schema.fields;
+      }
+
+      var fields = [];
+
+      for (var key in this.state.data[0]) {
+        fields.push({
+          name: key
+        });
+      }
+
+      return fields;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(ReactTable, {
+        data: this.state.data,
+        columns: this.getFields().map(function (field) {
+          return {
+            Header: field.name,
+            id: field.name,
+            accessor: function accessor(val) {
+              return val[field.name];
+            },
+            Cell: function Cell(props) {
+              return /*#__PURE__*/React.createElement("div", {
+                className: field.type || ''
+              }, /*#__PURE__*/React.createElement("span", null, props.value));
+            }
+          };
+        }),
+        getTheadThProps: function getTheadThProps() {
+          return {
+            style: {
+              "wordWrap": "break-word",
+              "whiteSpace": "initial"
+            }
+          };
+        },
+        showPagination: false,
+        defaultPageSize: 100,
+        showPageSizeOptions: false,
+        minRows: 10
+      });
+    }
+  }]);
+
+  return Table;
+}(React.Component);
+
+function Chart (props) {
+  var 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 /*#__PURE__*/React.createElement(Plot, _extends({}, props.spec, {
+    layout: {
+      autosize: true
+    },
+    style: {
+      width: "100%",
+      height: "100%"
+    },
+    useResizeHandler: "true"
   }));
+}
+
+var PdfViewer = function PdfViewer(props) {
+  var _useState = useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      page = _useState2[0],
+      setPage = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      pages = _useState4[0],
+      setPages = _useState4[1];
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var renderPagination = function renderPagination(page, pages) {
+    if (!pages) {
+      return null;
+    }
+
+    var previousButton = /*#__PURE__*/React.createElement("li", {
+      className: "previous",
+      onClick: function onClick() {
+        return setPage(page - 1);
+      }
+    }, /*#__PURE__*/React.createElement("a", {
+      href: "#previous"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "arrow-left"
+    }), " Previous"));
+
+    if (page === 1) {
+      previousButton = /*#__PURE__*/React.createElement("li", {
+        className: "previous disabled"
+      }, /*#__PURE__*/React.createElement("a", {
+        href: "#previous"
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "arrow-left"
+      }), " Previous"));
+    }
+
+    var nextButton = /*#__PURE__*/React.createElement("li", {
+      className: "next",
+      onClick: function onClick() {
+        return setPage(page + 1);
+      }
+    }, /*#__PURE__*/React.createElement("a", {
+      href: "#next"
+    }, "Next ", /*#__PURE__*/React.createElement("span", {
+      className: "arrow-right"
+    })));
+
+    if (page === pages) {
+      nextButton = /*#__PURE__*/React.createElement("li", {
+        className: "next disabled"
+      }, /*#__PURE__*/React.createElement("a", {
+        href: "#next"
+      }, "Next ", /*#__PURE__*/React.createElement("span", {
+        className: "arrow-right"
+      })));
+    }
+
+    return /*#__PURE__*/React.createElement("nav", {
+      "aria-label": "Navigate pages: Previous/Next"
+    }, /*#__PURE__*/React.createElement("ul", {
+      className: "pager"
+    }, previousButton, nextButton));
+  };
+
+  var canvasEl = useRef(null);
+
+  var _usePdf = usePdf({
+    file: props.file,
+    page: page,
+    canvasEl: canvasEl
+  }),
+      _usePdf2 = _slicedToArray(_usePdf, 2),
+      loading = _usePdf2[0],
+      numPages = _usePdf2[1];
+
+  useEffect(function () {
+    setPages(numPages);
+  }, [numPages]);
+  return /*#__PURE__*/React.createElement("div", null, loading && /*#__PURE__*/React.createElement("span", null, t('Loading...')), /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasEl
+  }), renderPagination(page, pages));
 };
 
-export { Table };
+export { Chart, PdfViewer as Document, Table };

packages/portal/package.json

@@ -15,18 +15,14 @@
   "eslintConfig": {
     "extends": "react-app"
   },
-  "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
-  },
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "react-scripts": "3.4.3",
+    "@datopian/datapackage-views-js": "git+https://github.com/datopian/datapackage-views-js.git",
     "@material-ui/core": "^4.11.3",
     "@material-ui/data-grid": "^4.0.0-alpha.20",
     "@tailwindcss/typography": "^0.4.0",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
     "autoprefixer": "^10.0.4",
     "chalk": "^4.1.0",
     "commander": "^6.2.0",
@@ -36,6 +32,7 @@
     "figlet": "^1.5.0",
     "filesize": "^6.1.0",
     "frictionless.js": "^0.13.4",
+    "leaflet": "^1.7.1",
     "listr": "^0.14.3",
     "next": "latest",
     "open": "^8.0.2",
@@ -43,8 +40,15 @@
     "plotly.js-basic-dist": "^1.58.4",
     "postcss": "^8.1.10",
     "prompts": "^2.4.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-i18next": "^11.8.14",
+    "react-leaflet": "^3.1.0",
+    "react-pdf-js": "^5.1.0",
     "react-plotly.js": "^2.5.1",
+    "react-scripts": "3.4.3",
     "react-table": "^7.6.3",
+    "react-table-v6": "^6.8.6",
     "react-vega": "^7.4.2",
     "remark": "^13.0.0",
     "remark-html": "^13.0.1",
@@ -55,6 +59,7 @@
   "devDependencies": {
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.13.16",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/preset-env": "^7.13.15",
     "@babel/preset-react": "^7.13.13",
     "@rollup/plugin-babel": "^5.3.0",
@@ -71,4 +76,4 @@
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4"
   }
-}
+}

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 }