@dbmx/toasts 0.0.17 → 0.0.19

package/cjs/_virtual/dependencyResolver.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+var dependencyResolver = {};
+
+exports.__exports = dependencyResolver;

package/cjs/_virtual/index.esm.cjs

@@ -0,0 +1,8 @@
+'use strict';
+
+var _commonjsHelpers = require('./_commonjsHelpers.cjs');
+var index_esm = require('../node_modules/@dbmx/semver/dist/index.esm.cjs');
+
+var require$$0 = /*@__PURE__*/_commonjsHelpers.getAugmentedNamespace(index_esm);
+
+module.exports = require$$0;

package/cjs/_virtual/items.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+var items = {};
+
+exports.__exports = items;

package/cjs/_virtual/sdmx.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+var sdmx = {};
+
+exports.__exports = sdmx;

package/cjs/components/SdmxDatagrid/LoadingBox.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var React = require('react');
+var core = require('@mantine/core');
+
+var useStyles = core.createStyles(function () {
+  return {
+    loadingContainer: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  };
+});
+var LoadingBox = function LoadingBox() {
+  var _useStyles = useStyles(),
+    classes = _useStyles.classes;
+  return /*#__PURE__*/React.createElement(core.Box, {
+    className: classes.loadingContainer
+  }, /*#__PURE__*/React.createElement(core.Loader, {
+    color: "blue",
+    size: "lg"
+  }));
+};
+
+module.exports = LoadingBox;

package/cjs/components/SdmxDatagrid/SDMXGrid.cjs

@@ -0,0 +1,121 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var mantineReactTable = require('mantine-react-table');
+var reactIntl = require('react-intl');
+var messages = require('./messages.cjs');
+var LoadingBox = require('./LoadingBox.cjs');
+var index = require('./utils/index.cjs');
+
+var SDMXGrid = function SDMXGrid(_ref) {
+  var dataStructure = _ref.dataStructure,
+    data = _ref.data,
+    pagination = _ref.pagination,
+    onPaginationChange = _ref.onPaginationChange,
+    observationCount = _ref.observationCount,
+    isLoading = _ref.isLoading;
+  if (!data) return /*#__PURE__*/React.createElement(LoadingBox, null);
+  var intl = reactIntl.useIntl();
+  var components = React.useMemo(function () {
+    return index.getSelectedComponents(dataStructure);
+  }, [dataStructure]);
+  var columns = React.useMemo(function () {
+    var _getColumns = index.getColumns(components),
+      dimensions = _getColumns.dimensions,
+      timeDimension = _getColumns.timeDimension,
+      measures = _getColumns.measures;
+    return [{
+      accessorKey: 'dimension',
+      header: intl.formatMessage(messages.dimension),
+      columns: dimensions.map(function (col) {
+        return {
+          accessorKey: col.id,
+          header: col.id || col.name,
+          Cell: function Cell(_ref2) {
+            var cell = _ref2.cell;
+            return index.getCellValue(cell);
+          }
+        };
+      })
+    }, {
+      accessorKey: 'timeDimension',
+      header: intl.formatMessage(messages.timeDimension),
+      columns: [{
+        accessorKey: timeDimension.id,
+        header: timeDimension.id || timeDimension.name,
+        Cell: function Cell(_ref3) {
+          var cell = _ref3.cell;
+          return index.getCellValue(cell);
+        }
+      }]
+    }, {
+      accessorKey: 'measure',
+      header: intl.formatMessage(messages.measure),
+      columns: measures.map(function (col) {
+        return {
+          accessorKey: col.id,
+          header: col.id || col.name,
+          Cell: function Cell(_ref4) {
+            var cell = _ref4.cell;
+            return index.getCellValue(cell);
+          }
+        };
+      })
+    }];
+  }, [components]);
+  return /*#__PURE__*/React.createElement(mantineReactTable.MantineReactTable, {
+    data: data,
+    columns: columns,
+    initialState: {
+      density: 'xs'
+    },
+    mantineTableProps: {
+      striped: true
+    },
+    enableStickyHeader: true,
+    enableColumnFilterModes: false,
+    enableColumnActions: false,
+    enableSorting: false,
+    enablePinning: true,
+    manualPagination: true,
+    rowCount: observationCount,
+    onPaginationChange: onPaginationChange,
+    state: {
+      pagination: pagination,
+      isLoading: isLoading
+    },
+    mantinePaginationProps: {
+      rowsPerPageOptions: ['100', '500', '1000', '2000'],
+      withEdges: true
+    },
+    renderToolbarInternalActions: function renderToolbarInternalActions(_ref5) {
+      var table = _ref5.table;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(mantineReactTable.MRT_ShowHideColumnsButton, {
+        table: table
+      }), /*#__PURE__*/React.createElement(mantineReactTable.MRT_ToggleFullScreenButton, {
+        table: table
+      }));
+    },
+    mantineTableContainerProps: {
+      sx: {
+        height: 'calc(100% - 110px)'
+      }
+    },
+    mantinePaperProps: {
+      sx: {
+        height: '100%'
+      }
+    }
+  });
+};
+SDMXGrid.propTypes = {
+  dataStructure: PropTypes.object,
+  data: PropTypes.array,
+  pagination: PropTypes.object.isRequired,
+  onPaginationChange: PropTypes.func.isRequired,
+  observationCount: PropTypes.number.isRequired,
+  isLoading: PropTypes.bool.isRequired
+};
+
+module.exports = SDMXGrid;

package/cjs/components/SdmxDatagrid/index.cjs

@@ -0,0 +1,169 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
+var PropTypes = require('prop-types');
+var core = require('@mantine/core');
+var iconsReact = require('@tabler/icons-react');
+var reactIntl = require('react-intl');
+var data = require('../../node_modules/@dbmx/sdmx/cjs/data.cjs');
+var messages = require('./messages.cjs');
+var SDMXGrid = require('./SDMXGrid.cjs');
+var index = require('./utils/index.cjs');
+var LoadingBox = require('./LoadingBox.cjs');
+
+var useStyles = core.createStyles(function (theme) {
+  return {
+    wrongContainer: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: theme.colors.gray[0]
+    },
+    alertIcon: {
+      width: core.rem(80),
+      height: core.rem(80),
+      color: theme.colors.gray[4]
+    },
+    alertMsg: {
+      marginTop: theme.spacing.sm,
+      color: theme.colors.gray[6]
+    }
+  };
+});
+var SdmxDatagrid = function SdmxDatagrid(_ref) {
+  var endpoint = _ref.endpoint,
+    resourceType = _ref.resourceType,
+    agencyID = _ref.agencyID,
+    id = _ref.id,
+    version = _ref.version;
+  var _useStyles = useStyles(),
+    classes = _useStyles.classes;
+  var intl = reactIntl.useIntl();
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    isError = _useState4[0],
+    setIsError = _useState4[1];
+  var _useState5 = React.useState(),
+    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+    dataflow = _useState6[0],
+    setDataflow = _useState6[1];
+  var _useState7 = React.useState(),
+    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+    dataStructure = _useState8[0],
+    setDataStructure = _useState8[1];
+  var _useState9 = React.useState(),
+    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+    data$1 = _useState10[0],
+    setData = _useState10[1];
+  var url = React.useMemo(function () {
+    if (!endpoint || !resourceType || !agencyID || !id || !version) return null;else return index.getSdmxUrl({
+      endpoint: endpoint,
+      resourceType: resourceType,
+      agencyID: agencyID,
+      id: id,
+      version: version
+    });
+  }, [endpoint, resourceType, agencyID, id, version]);
+  var _useState11 = React.useState({
+      pageIndex: 0,
+      pageSize: 100
+    }),
+    _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
+    pagination = _useState12[0],
+    setPagination = _useState12[1];
+  var range = React.useMemo(function () {
+    return index.getRange(pagination);
+  }, [pagination]);
+  var _useState13 = React.useState(0),
+    _useState14 = _rollupPluginBabelHelpers.slicedToArray(_useState13, 2),
+    observationCount = _useState14[0],
+    setObservationCount = _useState14[1];
+
+  // Initializing
+  React.useEffect(function () {
+    setDataflow();
+    setDataStructure();
+    setData();
+    setIsLoading(false);
+    setIsError(false);
+    if (url) {
+      setIsLoading(true);
+      index.getStructure(url).then(function (_ref2) {
+        var _structure$data;
+        var structure = _ref2.data;
+        var df = (_structure$data = structure.data) === null || _structure$data === void 0 || (_structure$data = _structure$data.dataflows) === null || _structure$data === void 0 ? void 0 : _structure$data[0];
+        var ds = index.getDataStructure(df, structure);
+        setDataflow(df);
+        setDataStructure(ds);
+      })["catch"](function () {
+        setIsError(true);
+        setIsLoading(false);
+      });
+    }
+  }, [url]);
+
+  // getting data
+  React.useEffect(function () {
+    if (dataflow) {
+      setIsLoading(true);
+      setIsError(false);
+      index.getData(dataflow, endpoint, range).then(function (_ref3) {
+        var dataStructure = _ref3.data,
+          responseHeaders = _ref3.responseHeaders;
+        setObservationCount(index.getObservationsCount(responseHeaders));
+        setData(_rollupPluginBabelHelpers.toConsumableArray(data.getObservations(dataStructure)));
+        setIsLoading(false);
+      })["catch"](function () {
+        setIsError(true);
+        setIsLoading(false);
+      });
+    }
+  }, [range, dataflow]);
+  var handlePaginationChange = function handlePaginationChange(options) {
+    return setPagination(options);
+  };
+  if (isLoading && !dataStructure) return /*#__PURE__*/React.createElement(LoadingBox, null);
+  if (!url) return /*#__PURE__*/React.createElement(core.Box, {
+    className: classes.wrongContainer
+  }, /*#__PURE__*/React.createElement(iconsReact.IconAlertCircleFilled, {
+    className: classes.alertIcon
+  }), /*#__PURE__*/React.createElement(core.Text, {
+    size: "sm",
+    className: classes.alertMsg
+  }, intl.formatMessage(messages.invalidComProps)));
+  if (isError && !data$1) {
+    return /*#__PURE__*/React.createElement(core.Box, {
+      className: classes.wrongContainer
+    }, /*#__PURE__*/React.createElement(iconsReact.IconThumbDown, {
+      className: classes.alertIcon
+    }), /*#__PURE__*/React.createElement(core.Text, {
+      size: "sm",
+      className: classes.alertMsg
+    }, intl.formatMessage(messages.noData)));
+  }
+  return /*#__PURE__*/React.createElement(SDMXGrid, {
+    dataStructure: dataStructure,
+    data: data$1,
+    pagination: pagination,
+    onPaginationChange: handlePaginationChange,
+    observationCount: observationCount,
+    isLoading: isLoading
+  });
+};
+SdmxDatagrid.propTypes = {
+  endpoint: PropTypes.string.isRequired,
+  resourceType: PropTypes.string.isRequired,
+  agencyID: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  version: PropTypes.string.isRequired
+};
+
+module.exports = SdmxDatagrid;

package/cjs/components/SdmxDatagrid/messages.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var reactIntl = require('react-intl');
+
+var messages = reactIntl.defineMessages({
+  urlIsRequired: {
+    id: 'components.SdmxComponent.urlIsRequired',
+    defaultMessage: 'URL Is Required!'
+  },
+  noData: {
+    id: 'components.SdmxComponent.noData',
+    defaultMessage: 'No Data Available!'
+  },
+  dimension: {
+    id: 'components.SdmxComponent.dimension',
+    defaultMessage: 'Dimension'
+  },
+  timeDimension: {
+    id: 'components.SdmxComponent.timeDimension',
+    defaultMessage: 'Time Dimension'
+  },
+  measure: {
+    id: 'components.SdmxComponent.measure',
+    defaultMessage: 'Measure'
+  },
+  invalidComProps: {
+    id: 'components.SdmxComponent.invalidComProps',
+    defaultMessage: 'Invalid component props!'
+  }
+});
+
+module.exports = messages;

package/cjs/components/SdmxDatagrid/utils/index.cjs

@@ -0,0 +1,175 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.cjs');
+var urljoin = require('url-join');
+var core = require('../../../node_modules/@dbmx/sdmx/esm/core.cjs');
+var datastructures = require('../../../node_modules/@dbmx/sdmx/esm/datastructures.cjs');
+var query = require('../../../node_modules/@dbmx/sdmx/esm/query.cjs');
+
+function sortByKey(array, key) {
+  return array.sort(function (a, b) {
+    var x = a[key];
+    var y = b[key];
+    return x < y ? -1 : x > y ? 1 : 0;
+  });
+}
+var getStructure = /*#__PURE__*/function () {
+  var _ref = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(url) {
+    var headers,
+      response,
+      data,
+      responseHeaders,
+      _iterator,
+      _step,
+      pair,
+      _args = arguments;
+    return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          headers = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
+          _context.next = 3;
+          return fetch(url, {
+            method: 'GET',
+            headers: _rollupPluginBabelHelpers.objectSpread2({
+              'Content-Type': 'application/json'
+            }, headers)
+          });
+        case 3:
+          response = _context.sent;
+          _context.next = 6;
+          return response.json();
+        case 6:
+          data = _context.sent;
+          responseHeaders = {};
+          _iterator = _rollupPluginBabelHelpers.createForOfIteratorHelper(response.headers.entries());
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              pair = _step.value;
+              responseHeaders[pair[0]] = pair[1];
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+          return _context.abrupt("return", {
+            data: data,
+            responseHeaders: responseHeaders
+          });
+        case 11:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getStructure(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var getDataStructure = function getDataStructure(dataflow, structure) {
+  if (!(dataflow !== null && dataflow !== void 0 && dataflow.structure)) throw new Error("Cannot get dataStructure from dataflow ".concat(core.ID(dataflow)));
+  var dsRef = core.urn2FullRef(dataflow.structure);
+  return core.resolveResourceFromStructure(structure, dataflow, dsRef, {
+    noError: true
+  });
+};
+var getColumns = function getColumns() {
+  var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var comps = Object.values(components);
+  var dimensions = comps.filter(function (comp) {
+    return comp.type === 'dimension';
+  });
+  var timeDimension = comps.filter(function (comp) {
+    return comp.type === 'timeDimension';
+  })[0];
+  var measures = comps.filter(function (comp) {
+    return comp.type === 'measure';
+  });
+  var sortedDimensions = sortByKey(dimensions, 'position');
+  var sortedMesures = sortByKey(measures, 'id');
+  return {
+    dimensions: sortedDimensions,
+    timeDimension: timeDimension,
+    measures: sortedMesures
+  };
+};
+var getSelectedComponents = function getSelectedComponents(resource) {
+  var components = datastructures.getComponents(resource);
+  return components.reduce(function (acc, component) {
+    return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, acc), {}, _rollupPluginBabelHelpers.defineProperty({}, component.id, component));
+  }, {});
+};
+var getData = /*#__PURE__*/function () {
+  var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee2(dataflow, endpoint) {
+    var range,
+      dataUrl,
+      min,
+      max,
+      _args2 = arguments;
+    return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          range = _args2.length > 2 && _args2[2] !== undefined ? _args2[2] : {
+            min: 1,
+            max: 100
+          };
+          dataUrl = query.dataQueryUrl(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+            context: 'dataflow'
+          }, core.getRef(dataflow)), {}, {
+            endpoint: endpoint
+          }));
+          min = range.min, max = range.max;
+          return _context2.abrupt("return", getStructure(dataUrl, {
+            'x-Range': "values=".concat(min, "-").concat(max)
+          }));
+        case 4:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return function getData(_x2, _x3) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+var getCellValue = function getCellValue(cell) {
+  var cellValue = cell.getValue();
+  return (cellValue === null || cellValue === void 0 ? void 0 : cellValue.name) || (cellValue === null || cellValue === void 0 ? void 0 : cellValue.id) || (cellValue === null || cellValue === void 0 ? void 0 : cellValue.value);
+};
+var getSdmxUrl = function getSdmxUrl(_ref3) {
+  var endpoint = _ref3.endpoint,
+    resourceType = _ref3.resourceType,
+    _ref3$agencyID = _ref3.agencyID,
+    agencyID = _ref3$agencyID === void 0 ? '*' : _ref3$agencyID,
+    _ref3$id = _ref3.id,
+    id = _ref3$id === void 0 ? '*' : _ref3$id,
+    _ref3$version = _ref3.version,
+    version = _ref3$version === void 0 ? '~' : _ref3$version;
+  if (!endpoint || !resourceType) throw new Error('endpoint & resourceType are required');
+  var url = urljoin(endpoint, 'structure', resourceType, agencyID, id, version, '?detail=full&references=all');
+  return url;
+};
+var getRange = function getRange(pagination) {
+  var pageIndex = pagination.pageIndex,
+    pageSize = pagination.pageSize;
+  var min = pageSize * pageIndex;
+  var max = pageSize * pageIndex + pageSize - 1;
+  return {
+    min: min,
+    max: max
+  };
+};
+var getObservationsCount = function getObservationsCount(responseHeaders) {
+  var contentRange = responseHeaders['content-range'];
+  return parseInt(contentRange.split('/')[1]);
+};
+
+exports.getCellValue = getCellValue;
+exports.getColumns = getColumns;
+exports.getData = getData;
+exports.getDataStructure = getDataStructure;
+exports.getObservationsCount = getObservationsCount;
+exports.getRange = getRange;
+exports.getSdmxUrl = getSdmxUrl;
+exports.getSelectedComponents = getSelectedComponents;
+exports.getStructure = getStructure;

package/cjs/index.cjs

@@ -1,9 +1,93 @@
 'use strict';
 
-var index = require('./index-S7zfiVIZ.js');
-require('react');
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.cjs');
+var React = require('react');
 
+function _interopNamespaceDefaultOnly (e) { return Object.freeze({ __proto__: null, default: e }); }
 
+var importPath = '@dbmx/toasts';
+var type = importPath;
+var tag = 'toast';
+var toasts = [{
+  id: 'sdmxDatagrid',
+  importPath: importPath,
+  type: type,
+  tag: tag,
+  name: 'SDMX Datagrid',
+  tech: 'react',
+  description: 'SDMX, which stands for Statistical Data and Metadata eXchange, is an international initiative that aims at standardising and modernising ("industrialising") the mechanisms and processes for the exchange of statistical data and metadata among international organisations and their member countries.',
+  component: /*#__PURE__*/React.lazy( /*#__PURE__*/_rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
+    var obj;
+    return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceDefaultOnly(require('./components/SdmxDatagrid/index.cjs')); });
+        case 2:
+          obj = _context.sent;
+          return _context.abrupt("return", typeof obj["default"] === 'function' ? obj : obj["default"]);
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }))),
+  image: '/images/toasts/sdmx_datagrid.png',
+  // TODO
+  props: {
+    endpoint: {
+      type: 'url',
+      required: true
+    },
+    resourceType: {
+      type: 'select',
+      required: true,
+      defaultValue: 'dataflow',
+      data: [{
+        value: 'dataflow',
+        label: 'Dataflow'
+      }, {
+        value: 'datastructure',
+        label: 'DataStructure'
+      }, {
+        value: 'dataproviderscheme',
+        label: 'DataProvider'
+      }]
+    },
+    agencyID: {
+      type: 'string',
+      required: true,
+      defaultValue: '*'
+    },
+    id: {
+      type: 'string',
+      required: true
+    },
+    version: {
+      type: 'string',
+      required: true,
+      defaultValue: '~'
+    }
+  }
+}, {
+  id: 'helloWorld',
+  importPath: '@dbmx/webComponents',
+  type: '@dbmx/webComponents',
+  tag: 'hello-world',
+  name: 'Hello World',
+  tech: 'web-component',
+  description: 'web component demonstration',
+  component: function component() {
+    return Promise.resolve().then(function () { return require('./webComponents/HelloWorld/index.cjs'); });
+  },
+  image: 'https://ui.mantine.dev/_next/static/media/comments-light.9c0747c0.svg',
+  props: {
+    name: {
+      type: 'string',
+      required: true,
+      "default": 'test'
+    }
+  }
+}];
 
-module.exports = index.toasts;
-//# sourceMappingURL=index.cjs.map
+module.exports = toasts;