@sis-cc/dotstatsuite-visions 7.8.2 → 7.9.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright © OECD 2019-2021
+Copyright © OECD 2019-2022
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/es/Dataflow/Dataflow.js

@@ -148,7 +148,8 @@ var Dataflow = function Dataflow(_ref2) {
       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();
 
@@ -235,7 +236,7 @@ var Dataflow = function Dataflow(_ref2) {
           { className: classes.cardContent },
           R.map(function (_ref3) {
             var field = _ref3[0],
-                highlight = _ref3[1];
+                fieldHighlights = _ref3[1];
             return React.createElement(
               Typography,
               {
@@ -251,8 +252,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(
@@ -356,6 +358,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]),

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({

package/es/Logo/Logo.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import { makeStyles } from '@material-ui/core/styles';
 
 var useStyles = makeStyles(function () {
@@ -13,7 +14,12 @@ var useStyles = makeStyles(function () {
       maxHeight: function maxHeight(_ref) {
         var _maxHeight = _ref.maxHeight;
         return _maxHeight;
-      }
+      },
+      imageRendering: 'crisp-edges'
+    },
+    // https://caniuse.com/mdn-css_properties_image-rendering_crisp-edges
+    alternativeBrowserLogo: {
+      imageRendering: '-webkit-optimize-contrast'
     }
   };
 });
@@ -28,7 +34,7 @@ var Logo = function Logo(_ref2) {
   return React.createElement(
     'div',
     { className: classes.container },
-    React.createElement('img', { className: classes.logo, src: logo, alt: 'logo' }),
+    React.createElement('img', { className: cx(classes.logo, classes.alternativeBrowserLogo), src: logo, alt: 'logo' }),
     children
   );
 };

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

@@ -202,7 +202,8 @@ var Dataflow = function Dataflow(_ref2) {
       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();
 
@@ -289,7 +290,7 @@ var Dataflow = function Dataflow(_ref2) {
           { className: classes.cardContent },
           R.map(function (_ref3) {
             var field = _ref3[0],
-                highlight = _ref3[1];
+                fieldHighlights = _ref3[1];
             return _react2.default.createElement(
               _Typography2.default,
               {
@@ -305,8 +306,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(
@@ -410,6 +412,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]),

package/lib/Logo/Logo.js

@@ -10,6 +10,10 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _styles = require('@material-ui/core/styles');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,7 +29,12 @@ var useStyles = (0, _styles.makeStyles)(function () {
       maxHeight: function maxHeight(_ref) {
         var _maxHeight = _ref.maxHeight;
         return _maxHeight;
-      }
+      },
+      imageRendering: 'crisp-edges'
+    },
+    // https://caniuse.com/mdn-css_properties_image-rendering_crisp-edges
+    alternativeBrowserLogo: {
+      imageRendering: '-webkit-optimize-contrast'
     }
   };
 });
@@ -40,7 +49,7 @@ var Logo = function Logo(_ref2) {
   return _react2.default.createElement(
     'div',
     { className: classes.container },
-    _react2.default.createElement('img', { className: classes.logo, src: logo, alt: 'logo' }),
+    _react2.default.createElement('img', { className: (0, _classnames2.default)(classes.logo, classes.alternativeBrowserLogo), src: logo, alt: 'logo' }),
     children
   );
 };

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.2",
+  "version": "7.9.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",