@bygd/nc-report-ui 0.1.2 → 0.1.4

package/dist/app/esm/index.js

@@ -656,7 +656,7 @@ var reactIs$2 = {exports: {}};
 
 var reactIs_production_min$1 = {};
 
-/** @license React v16.13.1
+/** @license React v17.0.2
  * react-is.production.min.js
  *
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -670,12 +670,12 @@ var hasRequiredReactIs_production_min$1;
 function requireReactIs_production_min$1 () {
 	if (hasRequiredReactIs_production_min$1) return reactIs_production_min$1;
 	hasRequiredReactIs_production_min$1 = 1;
-var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
-	Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
-	function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min$1.AsyncMode=l;reactIs_production_min$1.ConcurrentMode=m;reactIs_production_min$1.ContextConsumer=k;reactIs_production_min$1.ContextProvider=h;reactIs_production_min$1.Element=c;reactIs_production_min$1.ForwardRef=n;reactIs_production_min$1.Fragment=e;reactIs_production_min$1.Lazy=t;reactIs_production_min$1.Memo=r;reactIs_production_min$1.Portal=d;
-	reactIs_production_min$1.Profiler=g;reactIs_production_min$1.StrictMode=f;reactIs_production_min$1.Suspense=p;reactIs_production_min$1.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min$1.isConcurrentMode=A;reactIs_production_min$1.isContextConsumer=function(a){return z(a)===k};reactIs_production_min$1.isContextProvider=function(a){return z(a)===h};reactIs_production_min$1.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min$1.isForwardRef=function(a){return z(a)===n};reactIs_production_min$1.isFragment=function(a){return z(a)===e};reactIs_production_min$1.isLazy=function(a){return z(a)===t};
-	reactIs_production_min$1.isMemo=function(a){return z(a)===r};reactIs_production_min$1.isPortal=function(a){return z(a)===d};reactIs_production_min$1.isProfiler=function(a){return z(a)===g};reactIs_production_min$1.isStrictMode=function(a){return z(a)===f};reactIs_production_min$1.isSuspense=function(a){return z(a)===p};
-	reactIs_production_min$1.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min$1.typeOf=z;
+var b=60103,c=60106,d=60107,e=60108,f=60114,g=60109,h=60110,k=60112,l=60113,m=60120,n=60115,p=60116,q=60121,r=60122,u=60117,v=60129,w=60131;
+	if("function"===typeof Symbol&&Symbol.for){var x=Symbol.for;b=x("react.element");c=x("react.portal");d=x("react.fragment");e=x("react.strict_mode");f=x("react.profiler");g=x("react.provider");h=x("react.context");k=x("react.forward_ref");l=x("react.suspense");m=x("react.suspense_list");n=x("react.memo");p=x("react.lazy");q=x("react.block");r=x("react.server.block");u=x("react.fundamental");v=x("react.debug_trace_mode");w=x("react.legacy_hidden");}
+	function y(a){if("object"===typeof a&&null!==a){var t=a.$$typeof;switch(t){case b:switch(a=a.type,a){case d:case f:case e:case l:case m:return a;default:switch(a=a&&a.$$typeof,a){case h:case k:case p:case n:case g:return a;default:return t}}case c:return t}}}var z=g,A=b,B=k,C=d,D=p,E=n,F=c,G=f,H=e,I=l;reactIs_production_min$1.ContextConsumer=h;reactIs_production_min$1.ContextProvider=z;reactIs_production_min$1.Element=A;reactIs_production_min$1.ForwardRef=B;reactIs_production_min$1.Fragment=C;reactIs_production_min$1.Lazy=D;reactIs_production_min$1.Memo=E;reactIs_production_min$1.Portal=F;reactIs_production_min$1.Profiler=G;reactIs_production_min$1.StrictMode=H;
+	reactIs_production_min$1.Suspense=I;reactIs_production_min$1.isAsyncMode=function(){return  false};reactIs_production_min$1.isConcurrentMode=function(){return  false};reactIs_production_min$1.isContextConsumer=function(a){return y(a)===h};reactIs_production_min$1.isContextProvider=function(a){return y(a)===g};reactIs_production_min$1.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};reactIs_production_min$1.isForwardRef=function(a){return y(a)===k};reactIs_production_min$1.isFragment=function(a){return y(a)===d};reactIs_production_min$1.isLazy=function(a){return y(a)===p};reactIs_production_min$1.isMemo=function(a){return y(a)===n};
+	reactIs_production_min$1.isPortal=function(a){return y(a)===c};reactIs_production_min$1.isProfiler=function(a){return y(a)===f};reactIs_production_min$1.isStrictMode=function(a){return y(a)===e};reactIs_production_min$1.isSuspense=function(a){return y(a)===l};reactIs_production_min$1.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===v||a===e||a===l||a===m||a===w||"object"===typeof a&&null!==a&&(a.$$typeof===p||a.$$typeof===n||a.$$typeof===g||a.$$typeof===h||a.$$typeof===k||a.$$typeof===u||a.$$typeof===q||a[0]===r)?true:false};
+	reactIs_production_min$1.typeOf=y;
 	return reactIs_production_min$1;
 }
 

package/dist/default/cjs/index.cjs

@@ -25,6 +25,8 @@ var MenuItem = require('@mui/material/MenuItem');
 var FormControl = require('@mui/material/FormControl');
 var Select = require('@mui/material/Select');
 var EventEmitter = require('eventemitter3');
+var Grid = require('@material-ui/core/Grid');
+var Container = require('@material-ui/core/Container');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -64,6 +66,8 @@ var MenuItem__default = /*#__PURE__*/_interopDefault(MenuItem);
 var FormControl__default = /*#__PURE__*/_interopDefault(FormControl);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
 var EventEmitter__default = /*#__PURE__*/_interopDefault(EventEmitter);
+var Grid__default = /*#__PURE__*/_interopDefault(Grid);
+var Container__default = /*#__PURE__*/_interopDefault(Container);
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -970,8 +974,81 @@ var Chart = ({
   }), chartType));
 };
 
+function Dashboard({
+  id,
+  auth,
+  params
+}) {
+  const [dashboard, setDashboard] = React__namespace.default.useState();
+  //const [schema, setSchema] = React.useState();
+  const [schema] = React__namespace.default.useState();
+  const [rows, setRows] = React__namespace.default.useState([]);
+  const cache = React__namespace.default.useRef({});
+  const channel = useChannel();
+  useFilterManager(channel);
+  const init = async () => {
+    // get dashboard entity
+    const dashboardTemp = await Api.getDashboard({
+      id: id
+    });
+    cache.current[dashboardTemp?.id] = dashboardTemp;
+    setDashboard(dashboardTemp);
+
+    // create rows and columns
+    await create_rows_and_columns(dashboardTemp);
+  };
+  const create_rows_and_columns = async entity => {
+    const srcRows = entity?.doc?.rows || [];
+    const targetRows = [];
+    for (let i = 0; i < srcRows.length; i++) {
+      const row = srcRows[i];
+      row.columns?.forEach(column => {
+        // filter
+        if (column.override?.filter?.length) {
+          const filter = {};
+          column.override.filter.forEach(item => {
+            if (item.hasOwnProperty('value')) filter[item.field] = [item.value];
+            // else filter[item.field] = [sourceDataRow[item.field]];
+          });
+          column.filter = filter;
+        }
+      });
+      targetRows.push(row);
+    }
+    setRows(targetRows);
+  };
+  React__namespace.default.useEffect(() => {
+    if (!id) return;
+    init().catch(error => console.error(error.message));
+  }, [id]);
+  return /*#__PURE__*/React__namespace.default.createElement(Container__default.default, null, /*#__PURE__*/React__namespace.default.createElement(Grid__default.default, {
+    container: true
+  }, rows?.map((row, index) =>
+  /*#__PURE__*/
+  // hasResourceRole(row) &&
+  React__namespace.default.createElement(Grid__default.default, {
+    key: index,
+    container: true,
+    item: true
+  }, row?.columns?.map((column, index) => /*#__PURE__*/React__namespace.default.createElement(Grid__default.default, _extends({
+    key: index,
+    item: true
+  }, column.layout), /*#__PURE__*/React__namespace.default.createElement(Chart, {
+    auth: auth,
+    cache: cache.current,
+    id: column.id,
+    dashboard: dashboard,
+    schema: schema,
+    channel: null,
+    title: column.title,
+    filter: column.filter,
+    params: params
+  })))))));
+}
+
 var index = {
-  Chart
+  Chart,
+  Dashboard
 };
 
 exports.default = index;

package/dist/default/esm/index.js

@@ -22,6 +22,8 @@ import MenuItem from '@mui/material/MenuItem';
 import FormControl$1 from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
 import EventEmitter from 'eventemitter3';
+import Grid from '@material-ui/core/Grid';
+import Container from '@material-ui/core/Container';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -928,8 +930,81 @@ var Chart = ({
   }), chartType));
 };
 
+function Dashboard({
+  id,
+  auth,
+  params
+}) {
+  const [dashboard, setDashboard] = React__default.useState();
+  //const [schema, setSchema] = React.useState();
+  const [schema] = React__default.useState();
+  const [rows, setRows] = React__default.useState([]);
+  const cache = React__default.useRef({});
+  const channel = useChannel();
+  useFilterManager(channel);
+  const init = async () => {
+    // get dashboard entity
+    const dashboardTemp = await Api.getDashboard({
+      id: id
+    });
+    cache.current[dashboardTemp?.id] = dashboardTemp;
+    setDashboard(dashboardTemp);
+
+    // create rows and columns
+    await create_rows_and_columns(dashboardTemp);
+  };
+  const create_rows_and_columns = async entity => {
+    const srcRows = entity?.doc?.rows || [];
+    const targetRows = [];
+    for (let i = 0; i < srcRows.length; i++) {
+      const row = srcRows[i];
+      row.columns?.forEach(column => {
+        // filter
+        if (column.override?.filter?.length) {
+          const filter = {};
+          column.override.filter.forEach(item => {
+            if (item.hasOwnProperty('value')) filter[item.field] = [item.value];
+            // else filter[item.field] = [sourceDataRow[item.field]];
+          });
+          column.filter = filter;
+        }
+      });
+      targetRows.push(row);
+    }
+    setRows(targetRows);
+  };
+  React__default.useEffect(() => {
+    if (!id) return;
+    init().catch(error => console.error(error.message));
+  }, [id]);
+  return /*#__PURE__*/React__default.createElement(Container, null, /*#__PURE__*/React__default.createElement(Grid, {
+    container: true
+  }, rows?.map((row, index) =>
+  /*#__PURE__*/
+  // hasResourceRole(row) &&
+  React__default.createElement(Grid, {
+    key: index,
+    container: true,
+    item: true
+  }, row?.columns?.map((column, index) => /*#__PURE__*/React__default.createElement(Grid, _extends({
+    key: index,
+    item: true
+  }, column.layout), /*#__PURE__*/React__default.createElement(Chart, {
+    auth: auth,
+    cache: cache.current,
+    id: column.id,
+    dashboard: dashboard,
+    schema: schema,
+    channel: null,
+    title: column.title,
+    filter: column.filter,
+    params: params
+  })))))));
+}
+
 var index = {
-  Chart
+  Chart,
+  Dashboard
 };
 
 export { index as default };

package/dist/default/iife/index.js

@@ -231,7 +231,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 
 	var reactIs_production_min$1 = {};
 
-	/** @license React v16.13.1
+	/** @license React v17.0.2
 	 * react-is.production.min.js
 	 *
 	 * Copyright (c) Facebook, Inc. and its affiliates.
@@ -245,12 +245,12 @@ var _BYGD_NC_REPORT_UI = (function () {
 	function requireReactIs_production_min$1 () {
 		if (hasRequiredReactIs_production_min$1) return reactIs_production_min$1;
 		hasRequiredReactIs_production_min$1 = 1;
-	var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
-		Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
-		function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min$1.AsyncMode=l;reactIs_production_min$1.ConcurrentMode=m;reactIs_production_min$1.ContextConsumer=k;reactIs_production_min$1.ContextProvider=h;reactIs_production_min$1.Element=c;reactIs_production_min$1.ForwardRef=n;reactIs_production_min$1.Fragment=e;reactIs_production_min$1.Lazy=t;reactIs_production_min$1.Memo=r;reactIs_production_min$1.Portal=d;
-		reactIs_production_min$1.Profiler=g;reactIs_production_min$1.StrictMode=f;reactIs_production_min$1.Suspense=p;reactIs_production_min$1.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min$1.isConcurrentMode=A;reactIs_production_min$1.isContextConsumer=function(a){return z(a)===k};reactIs_production_min$1.isContextProvider=function(a){return z(a)===h};reactIs_production_min$1.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min$1.isForwardRef=function(a){return z(a)===n};reactIs_production_min$1.isFragment=function(a){return z(a)===e};reactIs_production_min$1.isLazy=function(a){return z(a)===t};
-		reactIs_production_min$1.isMemo=function(a){return z(a)===r};reactIs_production_min$1.isPortal=function(a){return z(a)===d};reactIs_production_min$1.isProfiler=function(a){return z(a)===g};reactIs_production_min$1.isStrictMode=function(a){return z(a)===f};reactIs_production_min$1.isSuspense=function(a){return z(a)===p};
-		reactIs_production_min$1.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min$1.typeOf=z;
+	var b=60103,c=60106,d=60107,e=60108,f=60114,g=60109,h=60110,k=60112,l=60113,m=60120,n=60115,p=60116,q=60121,r=60122,u=60117,v=60129,w=60131;
+		if("function"===typeof Symbol&&Symbol.for){var x=Symbol.for;b=x("react.element");c=x("react.portal");d=x("react.fragment");e=x("react.strict_mode");f=x("react.profiler");g=x("react.provider");h=x("react.context");k=x("react.forward_ref");l=x("react.suspense");m=x("react.suspense_list");n=x("react.memo");p=x("react.lazy");q=x("react.block");r=x("react.server.block");u=x("react.fundamental");v=x("react.debug_trace_mode");w=x("react.legacy_hidden");}
+		function y(a){if("object"===typeof a&&null!==a){var t=a.$$typeof;switch(t){case b:switch(a=a.type,a){case d:case f:case e:case l:case m:return a;default:switch(a=a&&a.$$typeof,a){case h:case k:case p:case n:case g:return a;default:return t}}case c:return t}}}var z=g,A=b,B=k,C=d,D=p,E=n,F=c,G=f,H=e,I=l;reactIs_production_min$1.ContextConsumer=h;reactIs_production_min$1.ContextProvider=z;reactIs_production_min$1.Element=A;reactIs_production_min$1.ForwardRef=B;reactIs_production_min$1.Fragment=C;reactIs_production_min$1.Lazy=D;reactIs_production_min$1.Memo=E;reactIs_production_min$1.Portal=F;reactIs_production_min$1.Profiler=G;reactIs_production_min$1.StrictMode=H;
+		reactIs_production_min$1.Suspense=I;reactIs_production_min$1.isAsyncMode=function(){return  false};reactIs_production_min$1.isConcurrentMode=function(){return  false};reactIs_production_min$1.isContextConsumer=function(a){return y(a)===h};reactIs_production_min$1.isContextProvider=function(a){return y(a)===g};reactIs_production_min$1.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};reactIs_production_min$1.isForwardRef=function(a){return y(a)===k};reactIs_production_min$1.isFragment=function(a){return y(a)===d};reactIs_production_min$1.isLazy=function(a){return y(a)===p};reactIs_production_min$1.isMemo=function(a){return y(a)===n};
+		reactIs_production_min$1.isPortal=function(a){return y(a)===c};reactIs_production_min$1.isProfiler=function(a){return y(a)===f};reactIs_production_min$1.isStrictMode=function(a){return y(a)===e};reactIs_production_min$1.isSuspense=function(a){return y(a)===l};reactIs_production_min$1.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===v||a===e||a===l||a===m||a===w||"object"===typeof a&&null!==a&&(a.$$typeof===p||a.$$typeof===n||a.$$typeof===g||a.$$typeof===h||a.$$typeof===k||a.$$typeof===u||a.$$typeof===q||a[0]===r)?true:false};
+		reactIs_production_min$1.typeOf=y;
 		return reactIs_production_min$1;
 	}
 
@@ -5425,7 +5425,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	  }, options));
 	}
 
-	var styles$p = function styles(theme) {
+	var styles$r = function styles(theme) {
 	  var elevations = {};
 	  theme.shadows.forEach(function (shadow, index) {
 	    elevations["elevation".concat(index)] = {
@@ -5469,7 +5469,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    ref: ref
 	  }, other));
 	});
-	var Paper$2 = withStyles(styles$p, {
+	var Paper$2 = withStyles(styles$r, {
 	  name: 'MuiPaper'
 	})(Paper$1);
 
@@ -5510,7 +5510,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 
 	var TRANSITION_DURATION = 4; // seconds
 
-	var styles$o = function styles(theme) {
+	var styles$q = function styles(theme) {
 	  var getColor = function getColor(color) {
 	    return theme.palette.type === 'light' ? lighten$1(color, 0.62) : darken$1(color, 0.5);
 	  };
@@ -5753,7 +5753,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    style: inlineStyles.bar2
 	  }));
 	});
-	var LinearProgress$1 = withStyles(styles$o, {
+	var LinearProgress$1 = withStyles(styles$q, {
 	  name: 'MuiLinearProgress'
 	})(LinearProgress);
 
@@ -11123,7 +11123,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	  }, chart?.doc.chart?.props)) : /*#__PURE__*/React.createElement("div", null);
 	}
 
-	var styles$n = function styles(theme) {
+	var styles$p = function styles(theme) {
 	  return {
 	    /* Styles applied to the root element. */
 	    root: {
@@ -11295,7 +11295,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    ref: ref
 	  }, other));
 	});
-	var Typography$1 = withStyles(styles$n, {
+	var Typography$1 = withStyles(styles$p, {
 	  name: 'MuiTypography'
 	})(Typography);
 
@@ -18601,7 +18601,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	  return reactExports.useContext(FormControlContext$1);
 	}
 
-	var styles$m = {
+	var styles$o = {
 	  /* Styles applied to the root element. */
 	  root: {
 	    display: 'inline-flex',
@@ -18777,7 +18777,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    ref: ref
 	  }, other), children));
 	});
-	var FormControl$2 = withStyles(styles$m, {
+	var FormControl$2 = withStyles(styles$o, {
 	  name: 'MuiFormControl'
 	})(FormControl$1);
 
@@ -19766,7 +19766,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	  }));
 	}
 
-	var styles$l = {
+	var styles$n = {
 	  /* Styles applied to the root element. */
 	  root: {
 	    zIndex: -1,
@@ -19798,7 +19798,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    "aria-hidden": true,
 	    ref: ref
 	  }, other, {
-	    style: _extends$1({}, styles$l.root, invisible ? styles$l.invisible : {}, other.style)
+	    style: _extends$1({}, styles$n.root, invisible ? styles$n.invisible : {}, other.style)
 	  })) : null;
 	});
 
@@ -19814,7 +19814,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 
 
 	var defaultManager = new ModalManager$1();
-	var styles$k = function styles(theme) {
+	var styles$m = function styles(theme) {
 	  return {
 	    /* Styles applied to the root element. */
 	    root: {
@@ -20015,7 +20015,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    }
 	  };
 
-	  var inlineStyle = styles$k(theme || {
+	  var inlineStyle = styles$m(theme || {
 	    zIndex: zIndex$1
 	  });
 	  var childProps = {};
@@ -20773,7 +20773,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	  return "scale(".concat(value, ", ").concat(Math.pow(value, 2), ")");
 	}
 
-	var styles$j = {
+	var styles$l = {
 	  entering: {
 	    opacity: 1,
 	    transform: getScale$1(1)
@@ -20935,7 +20935,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	        opacity: 0,
 	        transform: getScale$1(0.75),
 	        visibility: state === 'exited' && !inProp ? 'hidden' : undefined
-	      }, styles$j[state], style, children.props.style),
+	      }, styles$l[state], style, children.props.style),
 	      ref: handleRef
 	    }, childProps));
 	  });
@@ -20992,7 +20992,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	  return typeof anchorEl === 'function' ? anchorEl() : anchorEl;
 	}
 
-	var styles$i = {
+	var styles$k = {
 	  /* Styles applied to the root element. */
 	  root: {},
 
@@ -21252,7 +21252,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    className: clsx$3(classes.paper, PaperProps.className)
 	  }), children)));
 	});
-	var Popover$2 = withStyles(styles$i, {
+	var Popover$2 = withStyles(styles$k, {
 	  name: 'MuiPopover'
 	})(Popover$1);
 
@@ -21262,7 +21262,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 
 	var ListContext$1 = reactExports.createContext({});
 
-	var styles$h = {
+	var styles$j = {
 	  /* Styles applied to the root element. */
 	  root: {
 	    listStyle: 'none',
@@ -21310,7 +21310,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    ref: ref
 	  }, other), subheader, children));
 	});
-	var List$2 = withStyles(styles$h, {
+	var List$2 = withStyles(styles$j, {
 	  name: 'MuiList'
 	})(List$1);
 
@@ -21564,7 +21564,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	  vertical: 'top',
 	  horizontal: 'left'
 	};
-	var styles$g = {
+	var styles$i = {
 	  /* Styles applied to the `Paper` component. */
 	  paper: {
 	    // specZ: The maximum height of a simple menu should be one or more rows less than the view
@@ -21703,7 +21703,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    className: clsx$3(classes.list, MenuListProps.className)
 	  }), items));
 	});
-	var Menu$2 = withStyles(styles$g, {
+	var Menu$2 = withStyles(styles$i, {
 	  name: 'MuiMenu'
 	})(Menu$1);
 
@@ -22125,7 +22125,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	  }, {});
 	}
 
-	var styles$f = function styles(theme) {
+	var styles$h = function styles(theme) {
 	  return {
 	    /* Styles applied to the root element. */
 	    root: {
@@ -22209,7 +22209,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	  }, other), children, titleAccess ? /*#__PURE__*/reactExports.createElement("title", null, titleAccess) : null);
 	});
 	SvgIcon$1.muiName = 'SvgIcon';
-	var SvgIcon$2 = withStyles(styles$f, {
+	var SvgIcon$2 = withStyles(styles$h, {
 	  name: 'MuiSvgIcon'
 	})(SvgIcon$1);
 
@@ -22241,7 +22241,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	}
 
 	var useEnhancedEffect$4 = typeof window !== 'undefined' ? reactExports.useLayoutEffect : reactExports.useEffect;
-	var styles$e = {
+	var styles$g = {
 	  /* Styles applied to the shadow textarea element. */
 	  shadow: {
 	    // Visibility needed to hide the extra text area on iPads
@@ -22383,11 +22383,11 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    readOnly: true,
 	    ref: shadowRef,
 	    tabIndex: -1,
-	    style: _extends$1({}, styles$e.shadow, style)
+	    style: _extends$1({}, styles$g.shadow, style)
 	  }));
 	});
 
-	var styles$d = function styles(theme) {
+	var styles$f = function styles(theme) {
 	  var light = theme.palette.type === 'light';
 	  var placeholder = {
 	    color: 'currentColor',
@@ -22819,11 +22819,11 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    startAdornment: startAdornment
 	  })) : null);
 	});
-	var InputBase$2 = withStyles(styles$d, {
+	var InputBase$2 = withStyles(styles$f, {
 	  name: 'MuiInputBase'
 	})(InputBase$1);
 
-	var styles$c = function styles(theme) {
+	var styles$e = function styles(theme) {
 	  var light = theme.palette.type === 'light';
 	  var bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
 	  return {
@@ -22955,7 +22955,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	  }, other));
 	});
 	Input$1.muiName = 'Input';
-	var Input$2 = withStyles(styles$c, {
+	var Input$2 = withStyles(styles$e, {
 	  name: 'MuiInput'
 	})(Input$1);
 
@@ -22983,7 +22983,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	  }));
 	});
 
-	var styles$b = function styles(theme) {
+	var styles$d = function styles(theme) {
 	  return {
 	    /* Styles applied to the select component `root` class. */
 	    root: {},
@@ -23134,11 +23134,11 @@ var _BYGD_NC_REPORT_UI = (function () {
 	  }, other));
 	});
 	NativeSelect.muiName = 'Select';
-	withStyles(styles$b, {
+	withStyles(styles$d, {
 	  name: 'MuiNativeSelect'
 	})(NativeSelect);
 
-	var styles$a = function styles(theme) {
+	var styles$c = function styles(theme) {
 	  var light = theme.palette.type === 'light';
 	  var bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
 	  var backgroundColor = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.09)';
@@ -23324,11 +23324,11 @@ var _BYGD_NC_REPORT_UI = (function () {
 	  }, other));
 	});
 	FilledInput$1.muiName = 'Input';
-	var FilledInput$2 = withStyles(styles$a, {
+	var FilledInput$2 = withStyles(styles$c, {
 	  name: 'MuiFilledInput'
 	})(FilledInput$1);
 
-	var styles$9 = function styles(theme) {
+	var styles$b = function styles(theme) {
 	  return {
 	    /* Styles applied to the root element. */
 	    root: {
@@ -23443,11 +23443,11 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    }
 	  })));
 	});
-	var NotchedOutline$2 = withStyles(styles$9, {
+	var NotchedOutline$2 = withStyles(styles$b, {
 	  name: 'PrivateNotchedOutline'
 	})(NotchedOutline$1);
 
-	var styles$8 = function styles(theme) {
+	var styles$a = function styles(theme) {
 	  var borderColor = theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
 	  return {
 	    /* Styles applied to the root element. */
@@ -23588,11 +23588,11 @@ var _BYGD_NC_REPORT_UI = (function () {
 	  }, other));
 	});
 	OutlinedInput$1.muiName = 'Input';
-	var OutlinedInput$2 = withStyles(styles$8, {
+	var OutlinedInput$2 = withStyles(styles$a, {
 	  name: 'MuiOutlinedInput'
 	})(OutlinedInput$1);
 
-	var styles$7 = styles$b;
+	var styles$9 = styles$d;
 
 	var _ref = /*#__PURE__*/reactExports.createElement(Input$2, null);
 
@@ -23680,7 +23680,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	  }, other));
 	});
 	Select$1.muiName = 'Select';
-	var Select$2 = withStyles(styles$7, {
+	var Select$2 = withStyles(styles$9, {
 	  name: 'MuiSelect'
 	})(Select$1);
 
@@ -23880,7 +23880,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 
 	var DURATION$1 = 550;
 	var DELAY_RIPPLE$1 = 80;
-	var styles$6 = function styles(theme) {
+	var styles$8 = function styles(theme) {
 	  return {
 	    /* Styles applied to the root element. */
 	    root: {
@@ -24160,12 +24160,12 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    exit: true
 	  }, ripples));
 	});
-	var TouchRipple$2 = withStyles(styles$6, {
+	var TouchRipple$2 = withStyles(styles$8, {
 	  flip: false,
 	  name: 'MuiTouchRipple'
 	})( /*#__PURE__*/reactExports.memo(TouchRipple$1));
 
-	var styles$5 = {
+	var styles$7 = {
 	  /* Styles applied to the root element. */
 	  root: {
 	    display: 'inline-flex',
@@ -24469,11 +24469,11 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    center: centerRipple
 	  }, TouchRippleProps)) : null);
 	});
-	var ButtonBase$2 = withStyles(styles$5, {
+	var ButtonBase$2 = withStyles(styles$7, {
 	  name: 'MuiButtonBase'
 	})(ButtonBase$1);
 
-	var styles$4 = function styles(theme) {
+	var styles$6 = function styles(theme) {
 	  return {
 	    /* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
 	    root: {
@@ -24654,11 +24654,11 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    ref: handleRef
 	  }, componentProps), children));
 	});
-	var ListItem$1 = withStyles(styles$4, {
+	var ListItem$1 = withStyles(styles$6, {
 	  name: 'MuiListItem'
 	})(ListItem);
 
-	var styles$3 = function styles(theme) {
+	var styles$5 = function styles(theme) {
 	  return {
 	    /* Styles applied to the root element. */
 	    root: _extends$1({}, theme.typography.body1, _defineProperty({
@@ -24720,7 +24720,7 @@ var _BYGD_NC_REPORT_UI = (function () {
 	    ref: ref
 	  }, other));
 	});
-	var MenuItem$2 = withStyles(styles$3, {
+	var MenuItem$2 = withStyles(styles$5, {
 	  name: 'MuiMenuItem'
 	})(MenuItem$1);
 
@@ -45506,7 +45506,7 @@ export default theme;`;
 	function getStyleValue(value) {
 	  return parseInt(value, 10) || 0;
 	}
-	const styles$2 = {
+	const styles$4 = {
 	  shadow: {
 	    // Visibility needed to hide the extra text area on iPads
 	    visibility: 'hidden',
@@ -45705,7 +45705,7 @@ export default theme;`;
 	      ref: hiddenTextareaRef,
 	      tabIndex: -1,
 	      style: {
-	        ...styles$2.shadow,
+	        ...styles$4.shadow,
 	        ...style,
 	        paddingTop: 0,
 	        paddingBottom: 0
@@ -46999,7 +46999,7 @@ export default theme;`;
 	  });
 	});
 
-	const styles$1 = {
+	const styles$3 = {
 	  entering: {
 	    opacity: 1
 	  },
@@ -47111,7 +47111,7 @@ export default theme;`;
 	        style: {
 	          opacity: 0,
 	          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
-	          ...styles$1[state],
+	          ...styles$3[state],
 	          ...style,
 	          ...children.props.style
 	        },
@@ -49253,7 +49253,7 @@ export default theme;`;
 	function getScale(value) {
 	  return `scale(${value}, ${value ** 2})`;
 	}
-	const styles = {
+	const styles$2 = {
 	  entering: {
 	    opacity: 1,
 	    transform: getScale(1)
@@ -49412,7 +49412,7 @@ export default theme;`;
 	          opacity: 0,
 	          transform: getScale(0.75),
 	          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
-	          ...styles[state],
+	          ...styles$2[state],
 	          ...style,
 	          ...children.props.style
 	        },
@@ -53211,8 +53211,412 @@ export default theme;`;
 	  }), chartType));
 	};
 
+	var SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+	var GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+
+	function generateGrid(globalStyles, theme, breakpoint) {
+	  var styles = {};
+	  GRID_SIZES.forEach(function (size) {
+	    var key = "grid-".concat(breakpoint, "-").concat(size);
+
+	    if (size === true) {
+	      // For the auto layouting
+	      styles[key] = {
+	        flexBasis: 0,
+	        flexGrow: 1,
+	        maxWidth: '100%'
+	      };
+	      return;
+	    }
+
+	    if (size === 'auto') {
+	      styles[key] = {
+	        flexBasis: 'auto',
+	        flexGrow: 0,
+	        maxWidth: 'none'
+	      };
+	      return;
+	    } // Keep 7 significant numbers.
+
+
+	    var width = "".concat(Math.round(size / 12 * 10e7) / 10e5, "%"); // Close to the bootstrap implementation:
+	    // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
+
+	    styles[key] = {
+	      flexBasis: width,
+	      flexGrow: 0,
+	      maxWidth: width
+	    };
+	  }); // No need for a media query for the first size.
+
+	  if (breakpoint === 'xs') {
+	    _extends$1(globalStyles, styles);
+	  } else {
+	    globalStyles[theme.breakpoints.up(breakpoint)] = styles;
+	  }
+	}
+
+	function getOffset(val) {
+	  var div = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+	  var parse = parseFloat(val);
+	  return "".concat(parse / div).concat(String(val).replace(String(parse), '') || 'px');
+	}
+
+	function generateGutter(theme, breakpoint) {
+	  var styles = {};
+	  SPACINGS.forEach(function (spacing) {
+	    var themeSpacing = theme.spacing(spacing);
+
+	    if (themeSpacing === 0) {
+	      return;
+	    }
+
+	    styles["spacing-".concat(breakpoint, "-").concat(spacing)] = {
+	      margin: "-".concat(getOffset(themeSpacing, 2)),
+	      width: "calc(100% + ".concat(getOffset(themeSpacing), ")"),
+	      '& > $item': {
+	        padding: getOffset(themeSpacing, 2)
+	      }
+	    };
+	  });
+	  return styles;
+	} // Default CSS values
+	// flex: '0 1 auto',
+	// flexDirection: 'row',
+	// alignItems: 'flex-start',
+	// flexWrap: 'nowrap',
+	// justifyContent: 'flex-start',
+
+
+	var styles$1 = function styles(theme) {
+	  return _extends$1({
+	    /* Styles applied to the root element. */
+	    root: {},
+
+	    /* Styles applied to the root element if `container={true}`. */
+	    container: {
+	      boxSizing: 'border-box',
+	      display: 'flex',
+	      flexWrap: 'wrap',
+	      width: '100%'
+	    },
+
+	    /* Styles applied to the root element if `item={true}`. */
+	    item: {
+	      boxSizing: 'border-box',
+	      margin: '0' // For instance, it's useful when used with a `figure` element.
+
+	    },
+
+	    /* Styles applied to the root element if `zeroMinWidth={true}`. */
+	    zeroMinWidth: {
+	      minWidth: 0
+	    },
+
+	    /* Styles applied to the root element if `direction="column"`. */
+	    'direction-xs-column': {
+	      flexDirection: 'column'
+	    },
+
+	    /* Styles applied to the root element if `direction="column-reverse"`. */
+	    'direction-xs-column-reverse': {
+	      flexDirection: 'column-reverse'
+	    },
+
+	    /* Styles applied to the root element if `direction="row-reverse"`. */
+	    'direction-xs-row-reverse': {
+	      flexDirection: 'row-reverse'
+	    },
+
+	    /* Styles applied to the root element if `wrap="nowrap"`. */
+	    'wrap-xs-nowrap': {
+	      flexWrap: 'nowrap'
+	    },
+
+	    /* Styles applied to the root element if `wrap="reverse"`. */
+	    'wrap-xs-wrap-reverse': {
+	      flexWrap: 'wrap-reverse'
+	    },
+
+	    /* Styles applied to the root element if `alignItems="center"`. */
+	    'align-items-xs-center': {
+	      alignItems: 'center'
+	    },
+
+	    /* Styles applied to the root element if `alignItems="flex-start"`. */
+	    'align-items-xs-flex-start': {
+	      alignItems: 'flex-start'
+	    },
+
+	    /* Styles applied to the root element if `alignItems="flex-end"`. */
+	    'align-items-xs-flex-end': {
+	      alignItems: 'flex-end'
+	    },
+
+	    /* Styles applied to the root element if `alignItems="baseline"`. */
+	    'align-items-xs-baseline': {
+	      alignItems: 'baseline'
+	    },
+
+	    /* Styles applied to the root element if `alignContent="center"`. */
+	    'align-content-xs-center': {
+	      alignContent: 'center'
+	    },
+
+	    /* Styles applied to the root element if `alignContent="flex-start"`. */
+	    'align-content-xs-flex-start': {
+	      alignContent: 'flex-start'
+	    },
+
+	    /* Styles applied to the root element if `alignContent="flex-end"`. */
+	    'align-content-xs-flex-end': {
+	      alignContent: 'flex-end'
+	    },
+
+	    /* Styles applied to the root element if `alignContent="space-between"`. */
+	    'align-content-xs-space-between': {
+	      alignContent: 'space-between'
+	    },
+
+	    /* Styles applied to the root element if `alignContent="space-around"`. */
+	    'align-content-xs-space-around': {
+	      alignContent: 'space-around'
+	    },
+
+	    /* Styles applied to the root element if `justifyContent="center"`. */
+	    'justify-content-xs-center': {
+	      justifyContent: 'center'
+	    },
+
+	    /* Styles applied to the root element if `justifyContent="flex-end"`. */
+	    'justify-content-xs-flex-end': {
+	      justifyContent: 'flex-end'
+	    },
+
+	    /* Styles applied to the root element if `justifyContent="space-between"`. */
+	    'justify-content-xs-space-between': {
+	      justifyContent: 'space-between'
+	    },
+
+	    /* Styles applied to the root element if `justifyContent="space-around"`. */
+	    'justify-content-xs-space-around': {
+	      justifyContent: 'space-around'
+	    },
+
+	    /* Styles applied to the root element if `justifyContent="space-evenly"`. */
+	    'justify-content-xs-space-evenly': {
+	      justifyContent: 'space-evenly'
+	    }
+	  }, generateGutter(theme, 'xs'), theme.breakpoints.keys.reduce(function (accumulator, key) {
+	    // Use side effect over immutability for better performance.
+	    generateGrid(accumulator, theme, key);
+	    return accumulator;
+	  }, {}));
+	};
+	var Grid = /*#__PURE__*/reactExports.forwardRef(function Grid(props, ref) {
+	  var _props$alignContent = props.alignContent,
+	      alignContent = _props$alignContent === void 0 ? 'stretch' : _props$alignContent,
+	      _props$alignItems = props.alignItems,
+	      alignItems = _props$alignItems === void 0 ? 'stretch' : _props$alignItems,
+	      classes = props.classes,
+	      classNameProp = props.className,
+	      _props$component = props.component,
+	      Component = _props$component === void 0 ? 'div' : _props$component,
+	      _props$container = props.container,
+	      container = _props$container === void 0 ? false : _props$container,
+	      _props$direction = props.direction,
+	      direction = _props$direction === void 0 ? 'row' : _props$direction,
+	      _props$item = props.item,
+	      item = _props$item === void 0 ? false : _props$item,
+	      justify = props.justify,
+	      _props$justifyContent = props.justifyContent,
+	      justifyContent = _props$justifyContent === void 0 ? 'flex-start' : _props$justifyContent,
+	      _props$lg = props.lg,
+	      lg = _props$lg === void 0 ? false : _props$lg,
+	      _props$md = props.md,
+	      md = _props$md === void 0 ? false : _props$md,
+	      _props$sm = props.sm,
+	      sm = _props$sm === void 0 ? false : _props$sm,
+	      _props$spacing = props.spacing,
+	      spacing = _props$spacing === void 0 ? 0 : _props$spacing,
+	      _props$wrap = props.wrap,
+	      wrap = _props$wrap === void 0 ? 'wrap' : _props$wrap,
+	      _props$xl = props.xl,
+	      xl = _props$xl === void 0 ? false : _props$xl,
+	      _props$xs = props.xs,
+	      xs = _props$xs === void 0 ? false : _props$xs,
+	      _props$zeroMinWidth = props.zeroMinWidth,
+	      zeroMinWidth = _props$zeroMinWidth === void 0 ? false : _props$zeroMinWidth,
+	      other = _objectWithoutProperties(props, ["alignContent", "alignItems", "classes", "className", "component", "container", "direction", "item", "justify", "justifyContent", "lg", "md", "sm", "spacing", "wrap", "xl", "xs", "zeroMinWidth"]);
+
+	  var className = clsx$3(classes.root, classNameProp, container && [classes.container, spacing !== 0 && classes["spacing-xs-".concat(String(spacing))]], item && classes.item, zeroMinWidth && classes.zeroMinWidth, direction !== 'row' && classes["direction-xs-".concat(String(direction))], wrap !== 'wrap' && classes["wrap-xs-".concat(String(wrap))], alignItems !== 'stretch' && classes["align-items-xs-".concat(String(alignItems))], alignContent !== 'stretch' && classes["align-content-xs-".concat(String(alignContent))], (justify || justifyContent) !== 'flex-start' && classes["justify-content-xs-".concat(String(justify || justifyContent))], xs !== false && classes["grid-xs-".concat(String(xs))], sm !== false && classes["grid-sm-".concat(String(sm))], md !== false && classes["grid-md-".concat(String(md))], lg !== false && classes["grid-lg-".concat(String(lg))], xl !== false && classes["grid-xl-".concat(String(xl))]);
+	  return /*#__PURE__*/reactExports.createElement(Component, _extends$1({
+	    className: className,
+	    ref: ref
+	  }, other));
+	});
+	var StyledGrid = withStyles(styles$1, {
+	  name: 'MuiGrid'
+	})(Grid);
+
+	var styles = function styles(theme) {
+	  return {
+	    /* Styles applied to the root element. */
+	    root: _defineProperty({
+	      width: '100%',
+	      marginLeft: 'auto',
+	      boxSizing: 'border-box',
+	      marginRight: 'auto',
+	      paddingLeft: theme.spacing(2),
+	      paddingRight: theme.spacing(2),
+	      display: 'block'
+	    }, theme.breakpoints.up('sm'), {
+	      paddingLeft: theme.spacing(3),
+	      paddingRight: theme.spacing(3)
+	    }),
+
+	    /* Styles applied to the root element if `disableGutters={true}`. */
+	    disableGutters: {
+	      paddingLeft: 0,
+	      paddingRight: 0
+	    },
+
+	    /* Styles applied to the root element if `fixed={true}`. */
+	    fixed: Object.keys(theme.breakpoints.values).reduce(function (acc, breakpoint) {
+	      var value = theme.breakpoints.values[breakpoint];
+
+	      if (value !== 0) {
+	        acc[theme.breakpoints.up(breakpoint)] = {
+	          maxWidth: value
+	        };
+	      }
+
+	      return acc;
+	    }, {}),
+
+	    /* Styles applied to the root element if `maxWidth="xs"`. */
+	    maxWidthXs: _defineProperty({}, theme.breakpoints.up('xs'), {
+	      maxWidth: Math.max(theme.breakpoints.values.xs, 444)
+	    }),
+
+	    /* Styles applied to the root element if `maxWidth="sm"`. */
+	    maxWidthSm: _defineProperty({}, theme.breakpoints.up('sm'), {
+	      maxWidth: theme.breakpoints.values.sm
+	    }),
+
+	    /* Styles applied to the root element if `maxWidth="md"`. */
+	    maxWidthMd: _defineProperty({}, theme.breakpoints.up('md'), {
+	      maxWidth: theme.breakpoints.values.md
+	    }),
+
+	    /* Styles applied to the root element if `maxWidth="lg"`. */
+	    maxWidthLg: _defineProperty({}, theme.breakpoints.up('lg'), {
+	      maxWidth: theme.breakpoints.values.lg
+	    }),
+
+	    /* Styles applied to the root element if `maxWidth="xl"`. */
+	    maxWidthXl: _defineProperty({}, theme.breakpoints.up('xl'), {
+	      maxWidth: theme.breakpoints.values.xl
+	    })
+	  };
+	};
+	var Container = /*#__PURE__*/reactExports.forwardRef(function Container(props, ref) {
+	  var classes = props.classes,
+	      className = props.className,
+	      _props$component = props.component,
+	      Component = _props$component === void 0 ? 'div' : _props$component,
+	      _props$disableGutters = props.disableGutters,
+	      disableGutters = _props$disableGutters === void 0 ? false : _props$disableGutters,
+	      _props$fixed = props.fixed,
+	      fixed = _props$fixed === void 0 ? false : _props$fixed,
+	      _props$maxWidth = props.maxWidth,
+	      maxWidth = _props$maxWidth === void 0 ? 'lg' : _props$maxWidth,
+	      other = _objectWithoutProperties(props, ["classes", "className", "component", "disableGutters", "fixed", "maxWidth"]);
+
+	  return /*#__PURE__*/reactExports.createElement(Component, _extends$1({
+	    className: clsx$3(classes.root, className, fixed && classes.fixed, disableGutters && classes.disableGutters, maxWidth !== false && classes["maxWidth".concat(capitalize$1(String(maxWidth)))]),
+	    ref: ref
+	  }, other));
+	});
+	var Container$1 = withStyles(styles, {
+	  name: 'MuiContainer'
+	})(Container);
+
+	function Dashboard({
+	  id,
+	  auth,
+	  params
+	}) {
+	  const [dashboard, setDashboard] = React.useState();
+	  //const [schema, setSchema] = React.useState();
+	  const [schema] = React.useState();
+	  const [rows, setRows] = React.useState([]);
+	  const cache = React.useRef({});
+	  const channel = useChannel();
+	  useFilterManager(channel);
+	  const init = async () => {
+	    // get dashboard entity
+	    const dashboardTemp = await Api.getDashboard({
+	      id: id
+	    });
+	    cache.current[dashboardTemp?.id] = dashboardTemp;
+	    setDashboard(dashboardTemp);
+
+	    // create rows and columns
+	    await create_rows_and_columns(dashboardTemp);
+	  };
+	  const create_rows_and_columns = async entity => {
+	    const srcRows = entity?.doc?.rows || [];
+	    const targetRows = [];
+	    for (let i = 0; i < srcRows.length; i++) {
+	      const row = srcRows[i];
+	      row.columns?.forEach(column => {
+	        // filter
+	        if (column.override?.filter?.length) {
+	          const filter = {};
+	          column.override.filter.forEach(item => {
+	            if (item.hasOwnProperty('value')) filter[item.field] = [item.value];
+	            // else filter[item.field] = [sourceDataRow[item.field]];
+	          });
+	          column.filter = filter;
+	        }
+	      });
+	      targetRows.push(row);
+	    }
+	    setRows(targetRows);
+	  };
+	  React.useEffect(() => {
+	    if (!id) return;
+	    init().catch(error => console.error(error.message));
+	  }, [id]);
+	  return /*#__PURE__*/React.createElement(Container$1, null, /*#__PURE__*/React.createElement(StyledGrid, {
+	    container: true
+	  }, rows?.map((row, index) =>
+	  /*#__PURE__*/
+	  // hasResourceRole(row) &&
+	  React.createElement(StyledGrid, {
+	    key: index,
+	    container: true,
+	    item: true
+	  }, row?.columns?.map((column, index) => /*#__PURE__*/React.createElement(StyledGrid, _extends({
+	    key: index,
+	    item: true
+	  }, column.layout), /*#__PURE__*/React.createElement(Chart, {
+	    auth: auth,
+	    cache: cache.current,
+	    id: column.id,
+	    dashboard: dashboard,
+	    schema: schema,
+	    channel: null,
+	    title: column.title,
+	    filter: column.filter,
+	    params: params
+	  })))))));
+	}
+
 	var index = {
-	  Chart
+	  Chart,
+	  Dashboard
 	};
 
 	return index;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bygd/nc-report-ui",
-	"version": "0.1.2",
+	"version": "0.1.4",
 	"files": [
 		"dist/*",
 		"fnet/input.yaml",