@sis-cc/dotstatsuite-visions 7.8.3 → 7.10.0

package/es/Dataflow/Dataflow.js

@@ -142,13 +142,16 @@ var Dataflow = function Dataflow(_ref2) {
       handleUrl = _ref2.handleUrl,
       label = _ref2.label,
       labels = _ref2.labels,
+      _ref2$dimensions = _ref2.dimensions,
+      dimensions = _ref2$dimensions === undefined ? [] : _ref2$dimensions,
       _ref2$highlights = _ref2.highlights,
       highlights = _ref2$highlights === undefined ? [] : _ref2$highlights,
       _ref2$categories = _ref2.categories,
       categories = _ref2$categories === undefined ? [] : _ref2$categories,
       children = _ref2.children,
       _ref2$HTMLRenderer = _ref2.HTMLRenderer,
-      HTMLRenderer = _ref2$HTMLRenderer === undefined ? BasicHTMLRenderer : _ref2$HTMLRenderer;
+      HTMLRenderer = _ref2$HTMLRenderer === undefined ? BasicHTMLRenderer : _ref2$HTMLRenderer,
+      id = _ref2.id;
 
   var classes = useStyles();
 
@@ -174,12 +177,7 @@ var Dataflow = function Dataflow(_ref2) {
             { className: classes.header, 'data-testid': testId + '_title' },
             React.createElement(
               Typography,
-              {
-                variant: 'h6',
-                color: 'primary',
-                display: 'inline',
-                className: classes.container
-              },
+              { variant: 'h6', color: 'primary', display: 'inline' },
               React.createElement(
                 Link,
                 {
@@ -233,16 +231,30 @@ var Dataflow = function Dataflow(_ref2) {
         React.createElement(
           CardContent,
           { className: classes.cardContent },
+          !R.isEmpty(dimensions) && React.createElement(
+            Typography,
+            {
+              variant: 'body2',
+              color: 'textSecondary',
+              'data-testid': testId + '_dimensions'
+            },
+            React.createElement(
+              'strong',
+              null,
+              R.prop('dimensions')(labels),
+              ':\xA0'
+            ),
+            React.createElement(HTMLRenderer, { html: R.join(', ', dimensions) })
+          ),
           R.map(function (_ref3) {
             var field = _ref3[0],
-                highlight = _ref3[1];
+                fieldHighlights = _ref3[1];
             return React.createElement(
               Typography,
               {
                 variant: 'body2',
                 key: field,
                 color: 'textSecondary',
-                className: classes.container,
                 'data-testid': testId + '_highlight_' + field
               },
               React.createElement(
@@ -251,8 +263,9 @@ var Dataflow = function Dataflow(_ref2) {
                 field,
                 ':\xA0'
               ),
-              ' ',
-              React.createElement(HTMLRenderer, { html: highlight })
+              R.map(function (fieldHighlight) {
+                return React.createElement(HTMLRenderer, { key: id + '-' + field, html: fieldHighlight });
+              }, fieldHighlights)
             );
           })(highlights),
           React.createElement(
@@ -264,12 +277,7 @@ var Dataflow = function Dataflow(_ref2) {
                   categorie = _ref4[1];
               return React.createElement(
                 Typography,
-                {
-                  variant: 'body2',
-                  key: field,
-                  color: 'textSecondary',
-                  className: classes.container
-                },
+                { variant: 'body2', key: field, color: 'textSecondary' },
                 React.createElement(
                   'strong',
                   null,
@@ -287,7 +295,7 @@ var Dataflow = function Dataflow(_ref2) {
             R.not(R.isEmpty(categories)) && React.createElement(Divider, { className: classes.divider }),
             label && React.createElement(
               Typography,
-              { variant: 'body2', color: 'textSecondary', className: classes.container },
+              { variant: 'body2', color: 'textSecondary' },
               React.createElement(
                 'strong',
                 null,
@@ -303,7 +311,7 @@ var Dataflow = function Dataflow(_ref2) {
               { className: classes.footer, disableSpacing: true },
               React.createElement(
                 Typography,
-                { variant: 'caption', color: 'textSecondary', className: classes.container },
+                { variant: 'caption', color: 'textSecondary' },
                 React.createElement(
                   'strong',
                   null,
@@ -319,7 +327,7 @@ var Dataflow = function Dataflow(_ref2) {
               ),
               React.createElement(
                 Typography,
-                { variant: 'caption', color: 'textSecondary', className: classes.container },
+                { variant: 'caption', color: 'textSecondary' },
                 R.prop('note')(labels)
               )
             )
@@ -356,6 +364,7 @@ var Dataflow = function Dataflow(_ref2) {
 
 Dataflow.propTypes = process.env.NODE_ENV !== "production" ? {
   testId: PropTypes.string,
+  id: PropTypes.string,
   title: PropTypes.string,
   body: PropTypes.shape({
     description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
@@ -371,6 +380,7 @@ Dataflow.propTypes = process.env.NODE_ENV !== "production" ? {
     date: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
   }),
   highlights: PropTypes.array,
+  dimensions: PropTypes.array,
   categories: PropTypes.array,
   children: PropTypes.node,
   HTMLRenderer: PropTypes.func

package/es/Dataflow/index.js

@@ -10,6 +10,7 @@
  * @api public
  * @props
  * Dataflow.propTypes = {
+ *   id: PropTypes.string,
  *   testId: PropTypes.string,
  *   title: PropTypes.string,
  *   body: PropTypes.shape({
@@ -26,6 +27,7 @@
  *     note: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  *     date: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  *   }),
+ *   dimensions: PropTypes.array,
  *   highlights: PropTypes.array,
  *   categories: PropTypes.array,
  *   HTMLRenderer: PropTypes.func,

package/es/TableHtml5/cell.js

@@ -2,11 +2,11 @@ import React from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import TableCell from '@material-ui/core/TableCell';
-import Typography from '@material-ui/core/Typography';
 import Link from '@material-ui/core/Link';
 import Flags from './flags';
+import { getIsRtl } from '../utils';
 
 var useStyles = makeStyles(function (theme) {
   return {
@@ -18,7 +18,8 @@ var useStyles = makeStyles(function (theme) {
       color: theme.palette.grey['A700'],
       '&:hover': {
         boxShadow: 'inset 0 0 0 2px ' + theme.palette.primary.main
-      }
+      },
+      whiteSpace: 'nowrap'
     },
     active: {
       boxShadow: 'inset 0 0 0 2px ' + theme.palette.primary.main
@@ -35,18 +36,22 @@ var useStyles = makeStyles(function (theme) {
     value: {
       overflow: 'inherit'
     },
-    textValue: {
-      textAlign: 'right',
-      whiteSpace: 'nowrap'
+    rightAlign: {
+      // only for rtl layout !
+      // changed by right in rtl mode
+      textAlign: 'left'
     }
   };
 });
 
+var isValidNumber = R.both(R.is(Number), R.complement(R.equals(NaN)));
+
 var Cell = function Cell(_ref) {
   var _cx;
 
   var flags = _ref.flags,
       value = _ref.value,
+      intValue = _ref.intValue,
       headers = _ref.headers,
       isOne = _ref.isOne,
       _ref$indexedDimValIds = _ref.indexedDimValIds,
@@ -60,6 +65,7 @@ var Cell = function Cell(_ref) {
       HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
+  var isRtl = getIsRtl(useTheme());
   var hasFlag = R.not(R.isEmpty(flags));
   var uiValue = R.is(Function, cellHandler) && !R.isEmpty(indexedDimValIds) ? React.createElement(
     Link,
@@ -79,26 +85,21 @@ var Cell = function Cell(_ref) {
   return React.createElement(
     TableCell,
     {
+      align: isValidNumber(intValue) ? 'right' : 'left',
       component: isOne ? 'div' : undefined,
-      className: cx(classes.cell, (_cx = {}, _cx[classes.oneCell] = isOne, _cx[classes.active] = isActive, _cx[classes.highlight] = isHighlight, _cx)),
+      className: cx(classes.cell, (_cx = {}, _cx[classes.oneCell] = isOne, _cx[classes.active] = isActive, _cx[classes.highlight] = isHighlight, _cx[classes.rightAlign] = isRtl, _cx)),
       headers: headers,
-      onClick: activeCellHandler
+      onClick: activeCellHandler,
+      tabIndex: 0
     },
-    React.createElement(
-      'div',
-      { className: classes.textValue },
-      React.createElement(
-        Typography,
-        { variant: 'body1', tabIndex: 0, noWrap: hasFlag },
-        !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: sideProps, className: classes.value }),
-        hasFlag && React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: flags }),
-        uiValue
-      )
-    )
+    !R.isNil(SideIcon) && React.createElement(SideIcon, { sideProps: sideProps, className: classes.value }),
+    hasFlag && React.createElement(Flags, { HTMLRenderer: HTMLRenderer, flags: flags }),
+    uiValue
   );
 };
 
 Cell.propTypes = process.env.NODE_ENV !== "production" ? {
+  intValue: PropTypes.number,
   flags: PropTypes.array,
   isOne: PropTypes.bool,
   value: PropTypes.string,

package/lib/Dataflow/Dataflow.js

@@ -196,13 +196,16 @@ var Dataflow = function Dataflow(_ref2) {
       handleUrl = _ref2.handleUrl,
       label = _ref2.label,
       labels = _ref2.labels,
+      _ref2$dimensions = _ref2.dimensions,
+      dimensions = _ref2$dimensions === undefined ? [] : _ref2$dimensions,
       _ref2$highlights = _ref2.highlights,
       highlights = _ref2$highlights === undefined ? [] : _ref2$highlights,
       _ref2$categories = _ref2.categories,
       categories = _ref2$categories === undefined ? [] : _ref2$categories,
       children = _ref2.children,
       _ref2$HTMLRenderer = _ref2.HTMLRenderer,
-      HTMLRenderer = _ref2$HTMLRenderer === undefined ? BasicHTMLRenderer : _ref2$HTMLRenderer;
+      HTMLRenderer = _ref2$HTMLRenderer === undefined ? BasicHTMLRenderer : _ref2$HTMLRenderer,
+      id = _ref2.id;
 
   var classes = useStyles();
 
@@ -228,12 +231,7 @@ var Dataflow = function Dataflow(_ref2) {
             { className: classes.header, 'data-testid': testId + '_title' },
             _react2.default.createElement(
               _Typography2.default,
-              {
-                variant: 'h6',
-                color: 'primary',
-                display: 'inline',
-                className: classes.container
-              },
+              { variant: 'h6', color: 'primary', display: 'inline' },
               _react2.default.createElement(
                 _Link2.default,
                 {
@@ -287,16 +285,30 @@ var Dataflow = function Dataflow(_ref2) {
         _react2.default.createElement(
           _CardContent2.default,
           { className: classes.cardContent },
+          !R.isEmpty(dimensions) && _react2.default.createElement(
+            _Typography2.default,
+            {
+              variant: 'body2',
+              color: 'textSecondary',
+              'data-testid': testId + '_dimensions'
+            },
+            _react2.default.createElement(
+              'strong',
+              null,
+              R.prop('dimensions')(labels),
+              ':\xA0'
+            ),
+            _react2.default.createElement(HTMLRenderer, { html: R.join(', ', dimensions) })
+          ),
           R.map(function (_ref3) {
             var field = _ref3[0],
-                highlight = _ref3[1];
+                fieldHighlights = _ref3[1];
             return _react2.default.createElement(
               _Typography2.default,
               {
                 variant: 'body2',
                 key: field,
                 color: 'textSecondary',
-                className: classes.container,
                 'data-testid': testId + '_highlight_' + field
               },
               _react2.default.createElement(
@@ -305,8 +317,9 @@ var Dataflow = function Dataflow(_ref2) {
                 field,
                 ':\xA0'
               ),
-              ' ',
-              _react2.default.createElement(HTMLRenderer, { html: highlight })
+              R.map(function (fieldHighlight) {
+                return _react2.default.createElement(HTMLRenderer, { key: id + '-' + field, html: fieldHighlight });
+              }, fieldHighlights)
             );
           })(highlights),
           _react2.default.createElement(
@@ -318,12 +331,7 @@ var Dataflow = function Dataflow(_ref2) {
                   categorie = _ref4[1];
               return _react2.default.createElement(
                 _Typography2.default,
-                {
-                  variant: 'body2',
-                  key: field,
-                  color: 'textSecondary',
-                  className: classes.container
-                },
+                { variant: 'body2', key: field, color: 'textSecondary' },
                 _react2.default.createElement(
                   'strong',
                   null,
@@ -341,7 +349,7 @@ var Dataflow = function Dataflow(_ref2) {
             R.not(R.isEmpty(categories)) && _react2.default.createElement(_Divider2.default, { className: classes.divider }),
             label && _react2.default.createElement(
               _Typography2.default,
-              { variant: 'body2', color: 'textSecondary', className: classes.container },
+              { variant: 'body2', color: 'textSecondary' },
               _react2.default.createElement(
                 'strong',
                 null,
@@ -357,7 +365,7 @@ var Dataflow = function Dataflow(_ref2) {
               { className: classes.footer, disableSpacing: true },
               _react2.default.createElement(
                 _Typography2.default,
-                { variant: 'caption', color: 'textSecondary', className: classes.container },
+                { variant: 'caption', color: 'textSecondary' },
                 _react2.default.createElement(
                   'strong',
                   null,
@@ -373,7 +381,7 @@ var Dataflow = function Dataflow(_ref2) {
               ),
               _react2.default.createElement(
                 _Typography2.default,
-                { variant: 'caption', color: 'textSecondary', className: classes.container },
+                { variant: 'caption', color: 'textSecondary' },
                 R.prop('note')(labels)
               )
             )
@@ -410,6 +418,7 @@ var Dataflow = function Dataflow(_ref2) {
 
 Dataflow.propTypes = process.env.NODE_ENV !== "production" ? {
   testId: _propTypes2.default.string,
+  id: _propTypes2.default.string,
   title: _propTypes2.default.string,
   body: _propTypes2.default.shape({
     description: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
@@ -425,6 +434,7 @@ Dataflow.propTypes = process.env.NODE_ENV !== "production" ? {
     date: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
   }),
   highlights: _propTypes2.default.array,
+  dimensions: _propTypes2.default.array,
   categories: _propTypes2.default.array,
   children: _propTypes2.default.node,
   HTMLRenderer: _propTypes2.default.func

package/lib/TableHtml5/cell.js

@@ -24,10 +24,6 @@ var _TableCell = require('@material-ui/core/TableCell');
 
 var _TableCell2 = _interopRequireDefault(_TableCell);
 
-var _Typography = require('@material-ui/core/Typography');
-
-var _Typography2 = _interopRequireDefault(_Typography);
-
 var _Link = require('@material-ui/core/Link');
 
 var _Link2 = _interopRequireDefault(_Link);
@@ -36,6 +32,8 @@ var _flags = require('./flags');
 
 var _flags2 = _interopRequireDefault(_flags);
 
+var _utils = require('../utils');
+
 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; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -50,7 +48,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       color: theme.palette.grey['A700'],
       '&:hover': {
         boxShadow: 'inset 0 0 0 2px ' + theme.palette.primary.main
-      }
+      },
+      whiteSpace: 'nowrap'
     },
     active: {
       boxShadow: 'inset 0 0 0 2px ' + theme.palette.primary.main
@@ -67,18 +66,22 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     value: {
       overflow: 'inherit'
     },
-    textValue: {
-      textAlign: 'right',
-      whiteSpace: 'nowrap'
+    rightAlign: {
+      // only for rtl layout !
+      // changed by right in rtl mode
+      textAlign: 'left'
     }
   };
 });
 
+var isValidNumber = R.both(R.is(Number), R.complement(R.equals(NaN)));
+
 var Cell = function Cell(_ref) {
   var _cx;
 
   var flags = _ref.flags,
       value = _ref.value,
+      intValue = _ref.intValue,
       headers = _ref.headers,
       isOne = _ref.isOne,
       _ref$indexedDimValIds = _ref.indexedDimValIds,
@@ -92,6 +95,7 @@ var Cell = function Cell(_ref) {
       HTMLRenderer = _ref.HTMLRenderer;
 
   var classes = useStyles();
+  var isRtl = (0, _utils.getIsRtl)((0, _styles.useTheme)());
   var hasFlag = R.not(R.isEmpty(flags));
   var uiValue = R.is(Function, cellHandler) && !R.isEmpty(indexedDimValIds) ? _react2.default.createElement(
     _Link2.default,
@@ -111,26 +115,21 @@ var Cell = function Cell(_ref) {
   return _react2.default.createElement(
     _TableCell2.default,
     {
+      align: isValidNumber(intValue) ? 'right' : 'left',
       component: isOne ? 'div' : undefined,
-      className: (0, _classnames2.default)(classes.cell, (_cx = {}, _cx[classes.oneCell] = isOne, _cx[classes.active] = isActive, _cx[classes.highlight] = isHighlight, _cx)),
+      className: (0, _classnames2.default)(classes.cell, (_cx = {}, _cx[classes.oneCell] = isOne, _cx[classes.active] = isActive, _cx[classes.highlight] = isHighlight, _cx[classes.rightAlign] = isRtl, _cx)),
       headers: headers,
-      onClick: activeCellHandler
+      onClick: activeCellHandler,
+      tabIndex: 0
     },
-    _react2.default.createElement(
-      'div',
-      { className: classes.textValue },
-      _react2.default.createElement(
-        _Typography2.default,
-        { variant: 'body1', tabIndex: 0, noWrap: hasFlag },
-        !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: sideProps, className: classes.value }),
-        hasFlag && _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: flags }),
-        uiValue
-      )
-    )
+    !R.isNil(SideIcon) && _react2.default.createElement(SideIcon, { sideProps: sideProps, className: classes.value }),
+    hasFlag && _react2.default.createElement(_flags2.default, { HTMLRenderer: HTMLRenderer, flags: flags }),
+    uiValue
   );
 };
 
 Cell.propTypes = process.env.NODE_ENV !== "production" ? {
+  intValue: _propTypes2.default.number,
   flags: _propTypes2.default.array,
   isOne: _propTypes2.default.bool,
   value: _propTypes2.default.string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "7.8.3",
+  "version": "7.10.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",