@sis-cc/dotstatsuite-components 11.0.0 → 12.1.1

package/lib/rules/src/table/factories/getLayoutWithFlags.js

@@ -25,7 +25,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var getLayoutSerieAttributes = exports.getLayoutSerieAttributes = function getLayoutSerieAttributes(layoutSerie, seriesAttributes) {
   var length = R.length(layoutSerie);
-  if (length === 0 || length === 1) {
+  if (length === 0) {
     return null;
   }
 
@@ -89,18 +89,27 @@ var getCoordinates = function getCoordinates(data, unitsId) {
 var getLayoutDataWithFlags = exports.getLayoutDataWithFlags = function getLayoutDataWithFlags(seriesAttributes, display, customAttributes, metadataCoordinates, unitsId) {
   var regularAttrsIds = R.concat(customAttributes.flags || [], customAttributes.footnotes || []);
   var formatSublayout = function formatSublayout(getAttributes) {
-    var supplData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var mCoordinates = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var supplData = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
     return function (data) {
       var attributes = getAttributes(data);
       var key = getSerieKey(data);
       var cells = getSublayoutDataCells(display, customAttributes)(data);
       var flags = getFlagsFromSeriesAttributes(display, customAttributes)(attributes);
       var coordinates = getCoordinates(R.concat(supplData, data), unitsId);
-      var hasMetadata = (0, _hasCellMetadata.hasCellMetadata)(metadataCoordinates, coordinates);
+      var hasMetadata = (0, _hasCellMetadata.hasCellMetadata)(mCoordinates, coordinates);
+      var dataAdvancedAttrs = R.reduce(function (acc, _ref) {
+        var dimension = _ref.dimension,
+            value = _ref.value;
+
+        var attrs = (0, _extends3.default)({}, dimension.attributes || {}, value.attributes || {});
+        var advAttrs = R.omit(regularAttrsIds, attrs);
+        return (0, _extends3.default)({}, acc, advAttrs);
+      }, {}, data);
       var advancedAttributesSeries = R.isNil(attributes) ? {} : R.filter(function (serie) {
         return !R.isEmpty(R.omit(regularAttrsIds, R.propOr({}, 'attributes', serie)));
       }, attributes);
-      var hasAdvancedAttributes = !R.isEmpty(advancedAttributesSeries);
+      var hasAdvancedAttributes = !R.isEmpty(advancedAttributesSeries) || !R.isEmpty(dataAdvancedAttrs);
       var sideProps = hasMetadata || hasAdvancedAttributes ? { hasAdvancedAttributes: hasAdvancedAttributes, hasMetadata: hasMetadata, coordinates: coordinates } : null;
 
       return { data: cells, key: key, flags: flags, sideProps: sideProps };
@@ -110,15 +119,15 @@ var getLayoutDataWithFlags = exports.getLayoutDataWithFlags = function getLayout
   return R.evolve({
     headerData: R.map(formatSublayout(function (data) {
       return getLayoutSerieAttributes(data, seriesAttributes);
-    })),
+    }, metadataCoordinates.header)),
     sectionsData: R.map(function (sectionData) {
       var sectionSerie = R.head(sectionData);
       var sectionAttributes = getLayoutSerieAttributes(sectionSerie, seriesAttributes);
       return [formatSublayout(function () {
         return sectionAttributes;
-      })(sectionSerie), R.map(formatSublayout(function (rowData) {
+      }, metadataCoordinates.sections)(sectionSerie), R.map(formatSublayout(function (rowData) {
         return getLayoutSerieAttributes(R.concat(sectionSerie, rowData), R.omit(R.keys(sectionAttributes), seriesAttributes));
-      }, sectionSerie))(R.last(sectionData))];
+      }, metadataCoordinates.rows, sectionSerie))(R.last(sectionData))];
     })
   });
 };

package/lib/rules/src/table/factories/getTableData.js

@@ -96,7 +96,7 @@ var getTableProps = exports.getTableProps = function getTableProps(_ref) {
     display: display, unitDimension: unitDimension, unitsDisplay: unitsLevelDisplay, unitsSeries: unitsSeries,
     unitsDefinitionCodes: unitsDefinitionCodes, unitsIndexes: unitsAttachmentIndexesInLayout,
     partialUnitSerieIndexes: partialUnitSerieIndexes, rejectedValueIds: rejectedValueIds, layoutIds: layoutIds
-  }), (0, _getLayoutWithFlags.getLayoutDataWithFlags)(seriesAttributesValues, display, customAttributes, refinedMetadataCoordinates.layout, unitDimension.id), (0, _cleanUnitsInLayoutData.cleanUnitsInLayoutData)({ unitsDisplay: unitsLevelDisplay, unitsLayoutIndexes: unitsIndexesInLayout }))(layout, R.propOr({}, 'observations', data));
+  }), (0, _getLayoutWithFlags.getLayoutDataWithFlags)(seriesAttributesValues, display, customAttributes, refinedMetadataCoordinates, unitDimension.id), (0, _cleanUnitsInLayoutData.cleanUnitsInLayoutData)({ unitsDisplay: unitsLevelDisplay, unitsLayoutIndexes: unitsIndexesInLayout }))(layout, R.propOr({}, 'observations', data));
 
   return (0, _extends3.default)({
     cells: (0, _getCuratedCells.getCuratedCells)({ layout: layout, observations: cells, shape: ['header', 'sections', 'rows'] }),

package/lib/rules/src/table/preparators/prepareData.js

@@ -112,13 +112,18 @@ var prepareData = exports.prepareData = function prepareData(sdmxJson, customAtt
 
   var seriesAttributesIds = R.propOr([], 'series', attributesIdsIndexedByTargets);
   var observationsAttributesIds = R.propOr([], 'observations', attributesIdsIndexedByTargets);
+  var obsUnitsIds = R.pipe(function (_ref) {
+    var attributes = _ref.attributes,
+        dimensions = _ref.dimensions;
+    return R.merge(attributes.series || {}, dimensions.series || {});
+  }, R.values, R.pluck('id'))(unitsArtefacts);
   var options = {
     attachmentSeriesIndexes: attachmentSeriesIndexes,
     customAttributes: customAttributes,
     noDisplayIndexes: noDisplayIndexes,
     notDisplayedCodes: notDisplayedCodes,
     attributesIds: R.concat(seriesAttributesIds, observationsAttributesIds),
-    unitsIds: unitsDefinitionCodes
+    unitsIds: obsUnitsIds
   };
 
   var _observations = (0, _getObservations.getObservations)(sdmxJson);

package/lib/rules2/src/constants.js

@@ -3,5 +3,5 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var SDMX_2_0_JSON_DATA_FORMAT = exports.SDMX_2_0_JSON_DATA_FORMAT = 'application/vnd.sdmx.data+json;version=2.0.0';
-var SDMX_2_0_CSV_DATA_FORMAT = exports.SDMX_2_0_CSV_DATA_FORMAT = 'application/vnd.sdmx.data+csv;version=2.0.0';
+var SDMX_3_0_JSON_DATA_FORMAT = exports.SDMX_3_0_JSON_DATA_FORMAT = 'application/vnd.sdmx.data+json;version=2.0';
+var SDMX_3_0_CSV_DATA_FORMAT = exports.SDMX_3_0_CSV_DATA_FORMAT = 'application/vnd.sdmx.data+csv;version=2.0';

package/lib/rules2/src/index.js

@@ -6,10 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 
 var _constants = require('./constants');
 
-Object.defineProperty(exports, 'SDMX_2_0_JSON_DATA_FORMAT', {
+Object.defineProperty(exports, 'SDMX_3_0_JSON_DATA_FORMAT', {
   enumerable: true,
   get: function get() {
-    return _constants.SDMX_2_0_JSON_DATA_FORMAT;
+    return _constants.SDMX_3_0_JSON_DATA_FORMAT;
+  }
+});
+Object.defineProperty(exports, 'SDMX_3_0_CSV_DATA_FORMAT', {
+  enumerable: true,
+  get: function get() {
+    return _constants.SDMX_3_0_CSV_DATA_FORMAT;
   }
 });
 
@@ -31,11 +37,11 @@ Object.defineProperty(exports, 'parseMetadataSeries', {
   }
 });
 
-var _json = require('./json2.0DataFormatPatch');
+var _sdmx = require('./sdmx3.0DataFormatPatch');
 
-Object.defineProperty(exports, 'json_2_0_0_DataFormatPatch', {
+Object.defineProperty(exports, 'sdmx_3_0_DataFormatPatch', {
   enumerable: true,
   get: function get() {
-    return _json.json_2_0_0_DataFormatPatch;
+    return _sdmx.sdmx_3_0_DataFormatPatch;
   }
 });

package/lib/rules2/src/refineMetadataCoordinates.js

@@ -19,16 +19,16 @@ var refineMetadataCoordinates = exports.refineMetadataCoordinates = function ref
     }
     var removedHeaderCodes = R.omit(layoutIds.header, refinedCoord);
     if (R.isEmpty(removedHeaderCodes)) {
-      return R.over(R.lensProp('layout'), R.append(refinedCoord))(acc);
+      return R.over(R.lensProp('header'), R.append(refinedCoord))(acc);
     }
     var removedSectionCodes = R.omit(layoutIds.sections, refinedCoord);
     if (R.isEmpty(removedSectionCodes)) {
-      return R.over(R.lensProp('layout'), R.append(refinedCoord))(acc);
+      return R.over(R.lensProp('sections'), R.append(refinedCoord))(acc);
     }
     var removedRowsCodes = R.omit(layoutIds.rows, removedSectionCodes);
     if (R.isEmpty(removedRowsCodes)) {
-      return R.over(R.lensProp('layout'), R.append(refinedCoord))(acc);
+      return R.over(R.lensProp('rows'), R.append(refinedCoord))(acc);
     }
     return R.over(R.lensProp('cells'), R.append(refinedCoord))(acc);
-  }, { cells: [], layout: [] }, metadataCoordinates);
+  }, { cells: [], header: [], sections: [], rows: [] }, metadataCoordinates);
 };

package/lib/rules2/src/{json2.0DataFormatPatch.js → sdmx3.0DataFormatPatch.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.json_2_0_0_DataFormatPatch = undefined;
+exports.sdmx_3_0_DataFormatPatch = undefined;
 
 var _ramda = require('ramda');
 
@@ -11,7 +11,7 @@ var R = _interopRequireWildcard(_ramda);
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
-var json_2_0_0_DataFormatPatch = exports.json_2_0_0_DataFormatPatch = function json_2_0_0_DataFormatPatch(sdmxJson) {
+var sdmx_3_0_DataFormatPatch = exports.sdmx_3_0_DataFormatPatch = function sdmx_3_0_DataFormatPatch(sdmxJson) {
   var dataSet = R.pipe(R.pathOr({}, ['data', 'dataSets']), R.head)(sdmxJson);
   var structureIndex = R.prop('structure', dataSet);
   var structure = R.pipe(R.pathOr([], ['data', 'structures']), R.nth(structureIndex))(sdmxJson);

package/lib/viewer/src/chart.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -14,9 +18,11 @@ var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
 
-var _glamorous = require('glamorous');
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
 
-var _glamorous2 = _interopRequireDefault(_glamorous);
+var _styles = require('@material-ui/core/styles');
 
 var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
 
@@ -40,46 +46,47 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Container = _glamorous2.default.div({
-  backgroundColor: 'none',
-  overflow: 'hidden',
-  position: 'relative',
-  direction: 'ltr !important'
-}, function (_ref) {
-  var type = _ref.type;
-
-  if (!R.equals(_constants.SCATTER, type)) return {};
+var useStyles = (0, _styles.makeStyles)(function () {
   return {
-    '& .rcw-chart__chart__line--x:last-of-type': {
-      visibility: 'hidden'
-    },
-    '& .rcw-chart__chart__line--y:last-of-type': {
-      visibility: 'hidden'
+    container: {
+      backgroundColor: 'none',
+      overflow: 'hidden',
+      position: 'relative',
+      direction: 'ltr !important'
     },
-    '& .rcw-chart__chart__axis--x': {
-      '& .tick:last-of-type': {
+    chartContainer: {
+      '& .rcw-chart__chart__line--x:last-of-type': {
         visibility: 'hidden'
-      }
-    },
-    '& .rcw-chart__chart__axis--y': {
-      '& .tick:last-of-type': {
+      },
+      '& .rcw-chart__chart__line--y:last-of-type': {
         visibility: 'hidden'
+      },
+      '& .rcw-chart__chart__axis--x': {
+        '& .tick:last-of-type': {
+          visibility: 'hidden'
+        }
+      },
+      '& .rcw-chart__chart__axis--y': {
+        '& .tick:last-of-type': {
+          visibility: 'hidden'
+        }
       }
     }
   };
 });
 
-var Chart = function Chart(_ref2) {
-  var options = _ref2.options,
-      series = _ref2.series,
-      type = _ref2.type,
-      width = _ref2.width,
-      getAxisOptions = _ref2.getAxisOptions;
+var Chart = function Chart(_ref) {
+  var options = _ref.options,
+      series = _ref.series,
+      type = _ref.type,
+      width = _ref.width,
+      getAxisOptions = _ref.getAxisOptions;
 
+  var classes = useStyles();
   var ChartClass = charts[type];
   return _react2.default.createElement(
-    Container,
-    { type: type },
+    'div',
+    { className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.chartContainer, !R.equals(_constants.SCATTER, type))) },
     _react2.default.createElement(ChartClass, {
       data: series,
       options: options,
@@ -89,9 +96,9 @@ var Chart = function Chart(_ref2) {
   );
 };
 
-exports.default = (0, _recompose.compose)((0, _recompose.withProps)(function (_ref3) {
-  var heightOffsets = _ref3.heightOffsets,
-      options = _ref3.options;
+exports.default = (0, _recompose.compose)((0, _recompose.withProps)(function (_ref2) {
+  var heightOffsets = _ref2.heightOffsets,
+      options = _ref2.options;
   return {
     options: R.over( // adjust svg height regarding header and footer height
     R.lensPath(['base', 'height']), R.pipe(function (h) {
@@ -99,10 +106,10 @@ exports.default = (0, _recompose.compose)((0, _recompose.withProps)(function (_r
     }, R.when(R.gt(0), R.always(300))), // 2 = borders
     options)
   };
-}), (0, _recompose.branch)(_utils.isChartNoData, (0, _recompose.renderComponent)(function (_ref4) {
-  var noData = _ref4.noData,
-      options = _ref4.options,
-      fixedHeight = _ref4.fixedHeight;
+}), (0, _recompose.branch)(_utils.isChartNoData, (0, _recompose.renderComponent)(function (_ref3) {
+  var noData = _ref3.noData,
+      options = _ref3.options,
+      fixedHeight = _ref3.fixedHeight;
 
   if (R.isNil(fixedHeight)) {
     return _react2.default.createElement(_dotstatsuiteVisions.NoData, { message: noData || 'No Data' });
@@ -114,10 +121,10 @@ exports.default = (0, _recompose.compose)((0, _recompose.withProps)(function (_r
     { style: style },
     _react2.default.createElement(_dotstatsuiteVisions.NoData, { message: noData || 'No Data' })
   );
-})), (0, _recompose.withProps)(function (_ref5) {
-  var data = _ref5.data,
-      options = _ref5.options,
-      type = _ref5.type;
+})), (0, _recompose.withProps)(function (_ref4) {
+  var data = _ref4.data,
+      options = _ref4.options,
+      type = _ref4.type;
   return {
     series: (0, _series2.default)(data.series, type, options) // responsive rule only display highlighted data
   };

package/lib/viewer/src/index.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
 var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
@@ -20,6 +24,10 @@ var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _recompose = require('recompose');
 
 var _reactSizeme = require('react-sizeme');
@@ -28,10 +36,6 @@ var _reactSizeme2 = _interopRequireDefault(_reactSizeme);
 
 var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
 
-var _glamorous = require('glamorous');
-
-var _glamorous2 = _interopRequireDefault(_glamorous);
-
 var _styles = require('@material-ui/core/styles');
 
 var _options = require('./chartUtils/options');
@@ -54,37 +58,45 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Container = _glamorous2.default.div({
-  borderColor: '#007bc7',
-  borderBottomWidth: 1,
-  borderLeftWidth: 0,
-  borderTopWidth: 1,
-  borderRightWidth: 0,
-  borderStyle: 'solid',
-  '& svg text::selection': {
-    background: 'none'
-  } }, function (_ref) {
-  var type = _ref.type,
-      fixedWidth = _ref.fixedWidth,
-      fixedHeight = _ref.fixedHeight;
-  return R.ifElse(R.always(type === 'table'), R.always({
-    minWidth: '100%',
-    minHeight: '100%'
-  }), R.always({
-    width: fixedWidth || '100%',
-    height: fixedHeight || '100%',
-    overflow: 'hidden'
-  }));
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    container: {
+      borderColor: '#007bc7',
+      borderBottomWidth: 1,
+      borderLeftWidth: 0,
+      borderTopWidth: 1,
+      borderRightWidth: 0,
+      borderStyle: 'solid',
+      '& svg text::selection': {
+        background: 'none'
+      }
+    },
+    tableContainer: {
+      minWidth: '100%',
+      minHeight: '100%'
+    },
+    chartContainer: {
+      width: function width(_ref) {
+        var fixedWidth = _ref.fixedWidth;
+        return fixedWidth || '100%';
+      },
+      height: function height(_ref2) {
+        var fixedHeight = _ref2.fixedHeight;
+        return fixedHeight || '100%';
+      },
+      overflow: 'hidden'
+    }
+  };
 });
 
-var ViewContent = function ViewContent(_ref2) {
-  var loading = _ref2.loading,
-      _ref2$noData = _ref2.noData,
-      noData = _ref2$noData === undefined ? 'No Data' : _ref2$noData,
-      type = _ref2.type,
-      width = _ref2.width,
-      errorMessage = _ref2.errorMessage,
-      rest = (0, _objectWithoutProperties3.default)(_ref2, ['loading', 'noData', 'type', 'width', 'errorMessage']);
+var ViewContent = function ViewContent(_ref3) {
+  var loading = _ref3.loading,
+      _ref3$noData = _ref3.noData,
+      noData = _ref3$noData === undefined ? 'No Data' : _ref3$noData,
+      type = _ref3.type,
+      width = _ref3.width,
+      errorMessage = _ref3.errorMessage,
+      rest = (0, _objectWithoutProperties3.default)(_ref3, ['loading', 'noData', 'type', 'width', 'errorMessage']);
 
   if (loading) return _react2.default.createElement(_dotstatsuiteVisions.Loading, { message: loading });
   if (!width) return _react2.default.createElement(_dotstatsuiteVisions.Loading, { message: loading });
@@ -109,14 +121,20 @@ var ViewContent = function ViewContent(_ref2) {
   });
 };
 
-var Viewer = function Viewer(_ref3) {
-  var getResponsiveSize = _ref3.getResponsiveSize,
-      setFooterOffset = _ref3.setFooterOffset,
-      setHeaderOffset = _ref3.setHeaderOffset,
-      size = _ref3.size,
-      type = _ref3.type,
-      rest = (0, _objectWithoutProperties3.default)(_ref3, ['getResponsiveSize', 'setFooterOffset', 'setHeaderOffset', 'size', 'type']);
+var Viewer = function Viewer(_ref4) {
+  var _cx;
 
+  var getResponsiveSize = _ref4.getResponsiveSize,
+      setFooterOffset = _ref4.setFooterOffset,
+      setHeaderOffset = _ref4.setHeaderOffset,
+      size = _ref4.size,
+      type = _ref4.type,
+      rest = (0, _objectWithoutProperties3.default)(_ref4, ['getResponsiveSize', 'setFooterOffset', 'setHeaderOffset', 'size', 'type']);
+
+  var classes = useStyles({
+    fixedWidth: rest.fixedWidth,
+    fixedHeight: rest.fixedHeight
+  });
   (0, _react.useEffect)(function () {
     if (R.is(Function, getResponsiveSize)) {
       getResponsiveSize({
@@ -127,8 +145,10 @@ var Viewer = function Viewer(_ref3) {
   });
 
   return _react2.default.createElement(
-    Container,
-    (0, _extends3.default)({ type: type }, R.pick(['fixedWidth', 'fixedHeight'], rest)),
+    'div',
+    {
+      className: (0, _classnames2.default)(classes.container, (_cx = {}, (0, _defineProperty3.default)(_cx, classes.tableContainer, type === 'table'), (0, _defineProperty3.default)(_cx, classes.chartContainer, type !== 'table'), _cx))
+    },
     _react2.default.createElement(_header2.default, (0, _extends3.default)({
       onSize: function onSize(size) {
         return setHeaderOffset(size.height);
@@ -146,9 +166,9 @@ var Viewer = function Viewer(_ref3) {
   );
 };
 
-exports.default = (0, _recompose.compose)((0, _reactSizeme2.default)({ noPlaceholder: true, monitorWidth: true, monitorHeight: true }), (0, _recompose.withState)('heightOffsets', 'setHeightOffsets', { footer: undefined, header: undefined }), (0, _recompose.withProps)(function (_ref4) {
-  var heightOffsets = _ref4.heightOffsets,
-      setHeightOffsets = _ref4.setHeightOffsets;
+exports.default = (0, _recompose.compose)((0, _reactSizeme2.default)({ noPlaceholder: true, monitorWidth: true, monitorHeight: true }), (0, _recompose.withState)('heightOffsets', 'setHeightOffsets', { footer: undefined, header: undefined }), (0, _recompose.withProps)(function (_ref5) {
+  var heightOffsets = _ref5.heightOffsets,
+      setHeightOffsets = _ref5.setHeightOffsets;
   return {
     heightOffsets: R.evolve({
       footer: R.when(R.isNil, R.always(0)),
@@ -162,11 +182,11 @@ exports.default = (0, _recompose.compose)((0, _reactSizeme2.default)({ noPlaceho
     }
   };
 }), (0, _recompose.withProps)( // inject responsive size if needed for chart
-function (_ref5) {
-  var chartOptions = _ref5.chartOptions,
-      heightOffsets = _ref5.heightOffsets,
-      size = _ref5.size,
-      type = _ref5.type;
+function (_ref6) {
+  var chartOptions = _ref6.chartOptions,
+      heightOffsets = _ref6.heightOffsets,
+      size = _ref6.size,
+      type = _ref6.type;
 
   if (type === 'table') {
     return {};
@@ -178,12 +198,12 @@ function (_ref5) {
     fixedHeight: R.path(['base', 'height'], chartOptions)
   };
 }), (0, _recompose.withProps)( // compute all chart options regarding oecd design
-function (_ref6) {
-  var chartData = _ref6.chartData,
-      chartOptions = _ref6.chartOptions,
-      timeFormats = _ref6.timeFormats,
-      type = _ref6.type,
-      locale = _ref6.locale;
+function (_ref7) {
+  var chartData = _ref7.chartData,
+      chartOptions = _ref7.chartOptions,
+      timeFormats = _ref7.timeFormats,
+      type = _ref7.type,
+      locale = _ref7.locale;
 
   if (type === 'table') {
     return {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sis-cc/dotstatsuite-components",
   "description": "Set components based on React.",
-  "version": "11.0.0",
+  "version": "12.1.1",
   "main": "lib/index.js",
   "author": "OECD",
   "license": "MIT",
@@ -24,24 +24,19 @@
     "@react-hook/size": "^2.1.1",
     "@sis-cc/dotstatsuite-d3-charts": "^8.0.0",
     "date-fns": "^1.30.1",
-    "glamor": "^2.20.40",
-    "glamorous": "^4.13.1",
     "lodash": "^4.17.2",
     "lodash.compose": "^2.4.1",
     "memoizee": "^0.4.4",
     "numeral": "^2.0.6",
     "prop-types": "^15.6.2",
-    "query-string": "^4.3.2",
     "ramda": "^0.26.1",
-    "react-addons-css-transition-group": "^15.6.2",
     "react-dom": "^16.5.2",
-    "react-select": "^1.2.1",
     "react-sizeme": "^2.3.6",
     "recompose": "^0.30.0"
   },
   "peerDependencies": {
     "@material-ui/core": "^4.x",
-    "@sis-cc/dotstatsuite-visions": "^6.x",
+    "@sis-cc/dotstatsuite-visions": "^7.x",
     "@sis-cc/dotstatsuite-sdmxjs": "^5.x",
     "react": "16.x"
   }

package/src/rules/src/table/factories/getLayoutWithFlags.js

@@ -5,7 +5,7 @@ import { hasCellMetadata } from '../../../../rules2/src/hasCellMetadata';
 
 export const getLayoutSerieAttributes  = (layoutSerie, seriesAttributes) => {
   const length = R.length(layoutSerie);
-  if (length === 0 || length === 1) {
+  if (length === 0) {
     return null;
   }
 
@@ -88,36 +88,47 @@ const getCoordinates = (data, unitsId) => R.reduce(
 
 export const getLayoutDataWithFlags = (seriesAttributes, display, customAttributes, metadataCoordinates, unitsId) => {
   const regularAttrsIds = R.concat(customAttributes.flags || [], customAttributes.footnotes || []);
-  const formatSublayout = (getAttributes, supplData = []) => data => {
+  const formatSublayout = (getAttributes, mCoordinates = [], supplData = []) => data => {
     const attributes = getAttributes(data);
     const key = getSerieKey(data);
     const cells = getSublayoutDataCells(display, customAttributes)(data);
     const flags = getFlagsFromSeriesAttributes(display, customAttributes)(attributes);
     const coordinates = getCoordinates(R.concat(supplData, data), unitsId);
-    const hasMetadata = hasCellMetadata(metadataCoordinates, coordinates);
+    const hasMetadata = hasCellMetadata(mCoordinates, coordinates);
+    const dataAdvancedAttrs = R.reduce(
+      (acc, { dimension, value }) => {
+        const attrs = { ...dimension.attributes || {}, ...value.attributes || {}};
+        const advAttrs = R.omit(regularAttrsIds, attrs);
+        return  ({ ...acc, ...advAttrs })
+      },
+      {},
+      data
+    );
     const advancedAttributesSeries = R.isNil(attributes)
       ? {}
       : R.filter(
         serie => !R.isEmpty(R.omit(regularAttrsIds, R.propOr({}, 'attributes', serie))),
         attributes
       );
-    const hasAdvancedAttributes = !R.isEmpty(advancedAttributesSeries);
+    const hasAdvancedAttributes = !R.isEmpty(advancedAttributesSeries) || !R.isEmpty(dataAdvancedAttrs);
     const sideProps = hasMetadata || hasAdvancedAttributes ? { hasAdvancedAttributes, hasMetadata, coordinates } : null;
 
     return ({ data: cells, key, flags, sideProps });
   };
 
   return R.evolve({
-  headerData: R.map(formatSublayout(data => getLayoutSerieAttributes(data, seriesAttributes))),
+  headerData: R.map(formatSublayout(data => getLayoutSerieAttributes(data, seriesAttributes), metadataCoordinates.header)),
   sectionsData: R.map(
     sectionData => {
       const sectionSerie = R.head(sectionData);
       const sectionAttributes = getLayoutSerieAttributes(sectionSerie, seriesAttributes);
       return ([
-        formatSublayout(() => sectionAttributes)(sectionSerie),
+        formatSublayout(() => sectionAttributes, metadataCoordinates.sections)(sectionSerie),
         R.map(
-          formatSublayout(rowData => getLayoutSerieAttributes(R.concat(sectionSerie, rowData), R.omit(R.keys(sectionAttributes), seriesAttributes)),
-          sectionSerie)
+          formatSublayout(
+            rowData => getLayoutSerieAttributes(R.concat(sectionSerie, rowData), R.omit(R.keys(sectionAttributes), seriesAttributes)),
+            metadataCoordinates.rows,
+            sectionSerie)
         )(R.last(sectionData))
       ]);
     }

package/src/rules/src/table/factories/getTableData.js

@@ -97,7 +97,7 @@ export const getTableProps = ({ data, layoutIds, display, customAttributes, limi
       unitsDefinitionCodes, unitsIndexes: unitsAttachmentIndexesInLayout,
       partialUnitSerieIndexes, rejectedValueIds, layoutIds
     }),
-    getLayoutDataWithFlags(seriesAttributesValues, display, customAttributes, refinedMetadataCoordinates.layout, unitDimension.id),
+    getLayoutDataWithFlags(seriesAttributesValues, display, customAttributes, refinedMetadataCoordinates, unitDimension.id),
     cleanUnitsInLayoutData({ unitsDisplay: unitsLevelDisplay, unitsLayoutIndexes: unitsIndexesInLayout }),
   )(layout, R.propOr({}, 'observations', data));
   

package/src/rules/src/table/preparators/prepareData.js

@@ -79,13 +79,18 @@ export const prepareData = (sdmxJson, customAttributes, unitsProps={}) => {
 
   const seriesAttributesIds = R.propOr([], 'series', attributesIdsIndexedByTargets);
   const observationsAttributesIds = R.propOr([], 'observations', attributesIdsIndexedByTargets);
+  const obsUnitsIds = R.pipe(
+    ({ attributes, dimensions }) => R.merge(attributes.series || {}, dimensions.series || {}),
+    R.values,
+    R.pluck('id')
+  )(unitsArtefacts);
   const options = {
     attachmentSeriesIndexes,
     customAttributes,
     noDisplayIndexes,
     notDisplayedCodes,
     attributesIds: R.concat(seriesAttributesIds, observationsAttributesIds),
-    unitsIds: unitsDefinitionCodes,
+    unitsIds: obsUnitsIds
   };
   
   const _observations = getObservations(sdmxJson);

package/src/rules2/src/constants.js

@@ -1,2 +1,2 @@
-export const SDMX_2_0_JSON_DATA_FORMAT = 'application/vnd.sdmx.data+json;version=2.0.0';
-export const SDMX_2_0_CSV_DATA_FORMAT = 'application/vnd.sdmx.data+csv;version=2.0.0';
+export const SDMX_3_0_JSON_DATA_FORMAT = 'application/vnd.sdmx.data+json;version=2.0';
+export const SDMX_3_0_CSV_DATA_FORMAT = 'application/vnd.sdmx.data+csv;version=2.0';

package/src/rules2/src/index.js

@@ -1,5 +1,8 @@
-export { SDMX_2_0_JSON_DATA_FORMAT } from './constants';
+export {
+  SDMX_3_0_JSON_DATA_FORMAT,
+  SDMX_3_0_CSV_DATA_FORMAT
+} from './constants';
 
 export { getSidebarData } from './getSidebarData';
 export { parseMetadataSeries } from './parseMetadataSeries';
-export { json_2_0_0_DataFormatPatch } from './json2.0DataFormatPatch';
+export { sdmx_3_0_DataFormatPatch } from './sdmx3.0DataFormatPatch';

package/src/rules2/src/refineMetadataCoordinates.js

@@ -9,19 +9,19 @@ export const refineMetadataCoordinates = (metadataCoordinates, layoutIds, header
       }
       const removedHeaderCodes = R.omit(layoutIds.header, refinedCoord);
       if (R.isEmpty(removedHeaderCodes)) {
-        return R.over(R.lensProp('layout'), R.append(refinedCoord))(acc);
+        return R.over(R.lensProp('header'), R.append(refinedCoord))(acc);
       }
       const removedSectionCodes = R.omit(layoutIds.sections, refinedCoord);
       if (R.isEmpty(removedSectionCodes)) {
-        return R.over(R.lensProp('layout'), R.append(refinedCoord))(acc);
+        return R.over(R.lensProp('sections'), R.append(refinedCoord))(acc);
       }
       const removedRowsCodes = R.omit(layoutIds.rows, removedSectionCodes);
       if (R.isEmpty(removedRowsCodes)) {
-        return R.over(R.lensProp('layout'), R.append(refinedCoord))(acc);
+        return R.over(R.lensProp('rows'), R.append(refinedCoord))(acc);
       }
       return R.over(R.lensProp('cells'), R.append(refinedCoord))(acc);
     }, 
-    { cells: [], layout: [] },
+    { cells: [], header: [], sections: [], rows: [] },
     metadataCoordinates
   );
 };

package/src/rules2/src/{json2.0DataFormatPatch.js → sdmx3.0DataFormatPatch.js}

@@ -1,6 +1,6 @@
 import * as R from 'ramda';
 
-export const json_2_0_0_DataFormatPatch = (sdmxJson) => {
+export const sdmx_3_0_DataFormatPatch = (sdmxJson) => {
   const dataSet = R.pipe(R.pathOr({}, ['data', 'dataSets']), R.head)(sdmxJson);
   const structureIndex = R.prop('structure', dataSet);
   const structure = R.pipe(R.pathOr([], ['data', 'structures']), R.nth(structureIndex))(sdmxJson);

package/src/viewer/src/chart.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { branch, compose, renderComponent, withProps } from 'recompose';
 import * as R from 'ramda';
-import glamorous from 'glamorous';
+import cx from 'classnames';
+import { makeStyles } from '@material-ui/core/styles';
 import { NoData } from '@sis-cc/dotstatsuite-visions';
 import * as charts from '../../bridge-d3-react/src';
 import { SCATTER } from '../../rules/src/constants';
@@ -9,15 +10,14 @@ import filterSeriesRegardingDimensions from './chartUtils/series';
 import AxisLegend from './legends/AxisLegend';
 import { isChartNoData } from './utils';
 
-const Container = glamorous.div({
-  backgroundColor: 'none',
-  overflow: 'hidden',
-  position: 'relative',
-  direction: 'ltr !important',
-}, ({ type }) => {
-  if (!R.equals(SCATTER, type))
-    return ({});
-  return ({
+const useStyles = makeStyles(() => ({
+  container: {
+    backgroundColor: 'none',
+    overflow: 'hidden',
+    position: 'relative',
+    direction: 'ltr !important',
+  },
+  chartContainer: {
     '& .rcw-chart__chart__line--x:last-of-type': {
       visibility: 'hidden',
     },
@@ -34,13 +34,14 @@ const Container = glamorous.div({
         visibility: 'hidden',
       }
     },
-  });
-});
+  }
+}));
 
 const Chart = ({ options, series, type, width, getAxisOptions }) => {
+  const classes = useStyles();
   const ChartClass = charts[type];
   return (
-    <Container type={type}>
+    <div className={cx({ [classes.chartContainer]: !R.equals(SCATTER, type) })}>
       <ChartClass
         data={series}
         options={options}
@@ -51,7 +52,7 @@ const Chart = ({ options, series, type, width, getAxisOptions }) => {
         ? null
         : <AxisLegend axis="y" data={{ series }} type={type} />
       }
-    </Container>
+    </div>
   );
 };
 

package/src/viewer/src/index.js

@@ -1,37 +1,37 @@
 import React, { useEffect } from 'react';
 import * as R from 'ramda';
+import cx from 'classnames';
 import { compose, withState, withProps } from 'recompose';
 import sizeMe from 'react-sizeme';
 import { Loading, NoData, TableHtml5 } from '@sis-cc/dotstatsuite-visions';
-import glamorous from 'glamorous';
-import { useTheme } from '@material-ui/core/styles';
+import { useTheme, makeStyles } from '@material-ui/core/styles';
 import getChartOptions from './chartUtils/options';
 import Header from './header';
 import Chart from './chart';
 import Footer from './footer';
 
-const Container = glamorous.div({
-  borderColor: '#007bc7',
-  borderBottomWidth: 1,
-  borderLeftWidth: 0,
-  borderTopWidth: 1,
-  borderRightWidth: 0,
-  borderStyle: 'solid',
-  '& svg text::selection': {
-    background: 'none'
-  }}, ({ type, fixedWidth, fixedHeight }) => R.ifElse(
-    R.always(type === 'table'),
-    R.always({
-      minWidth: '100%',
-      minHeight: '100%'
-    }),
-    R.always({
-      width: fixedWidth || '100%',
-      height: fixedHeight || '100%',
-      overflow: 'hidden'
-    })
-  )
-);
+const useStyles = makeStyles(theme => ({
+  container: {
+    borderColor: '#007bc7',
+    borderBottomWidth: 1,
+    borderLeftWidth: 0,
+    borderTopWidth: 1,
+    borderRightWidth: 0,
+    borderStyle: 'solid',
+    '& svg text::selection': {
+      background: 'none'
+    }
+  },
+  tableContainer: {
+    minWidth: '100%',
+    minHeight: '100%'
+  },
+  chartContainer: {
+    width: ({ fixedWidth }) => fixedWidth || '100%',
+    height: ({ fixedHeight }) => fixedHeight || '100%',
+    overflow: 'hidden'
+  }
+}));
 
 const ViewContent = ({ loading, noData = 'No Data', type, width, errorMessage, ...rest }) => {
   if (loading) return <Loading message={loading} />;
@@ -60,6 +60,10 @@ const ViewContent = ({ loading, noData = 'No Data', type, width, errorMessage, .
 };
 
 const Viewer = ({ getResponsiveSize, setFooterOffset, setHeaderOffset, size, type, ...rest }) => {
+  const classes = useStyles({ 
+    fixedWidth: rest.fixedWidth, 
+    fixedHeight: rest.fixedHeight
+  });
   useEffect(() => {
     if (R.is(Function, getResponsiveSize)) {
       getResponsiveSize({
@@ -70,7 +74,12 @@ const Viewer = ({ getResponsiveSize, setFooterOffset, setHeaderOffset, size, typ
   });
 
   return (
-    <Container type={type} {...R.pick(['fixedWidth', 'fixedHeight'], rest)}>
+    <div 
+      className={cx(classes.container, {
+        [classes.tableContainer]: type === 'table',
+        [classes.chartContainer]: type !== 'table'
+      })}
+    >
       <Header
         onSize={size => setHeaderOffset(size.height)}
         {...R.propOr({}, 'headerProps', rest)}
@@ -83,7 +92,7 @@ const Viewer = ({ getResponsiveSize, setFooterOffset, setHeaderOffset, size, typ
         chartOptions={R.prop('chartOptions', rest)}
         {...R.prop('footerProps', rest)}
       />
-    </Container>
+    </div>
   );
 };
 

package/test/getLayoutDataWithFlags.test.js

@@ -134,9 +134,9 @@ const expected = {
 
 describe('getLayoutDataWithFlags test', () => {
   it('empty', () => {
-    expect(getLayoutDataWithFlags({}, 'label', {})({ headerData: [], sectionsData: [] })).to.deep.equal({ headerData: [], sectionsData: [] });
+    expect(getLayoutDataWithFlags({}, 'label', {}, {}, [])({ headerData: [], sectionsData: [] })).to.deep.equal({ headerData: [], sectionsData: [] });
   });
   it('multi cases', () => {
-    expect(getLayoutDataWithFlags(attributesValues, 'code', customAttributes, [], [])(layoutData)).to.deep.equal(expected);
+    expect(getLayoutDataWithFlags(attributesValues, 'code', customAttributes, {}, [])(layoutData)).to.deep.equal(expected);
   });
 });