@sis-cc/dotstatsuite-components 16.7.0 → 16.8.1

package/lib/viewer/src/chart.js

@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _recompose = require('recompose');
-
 var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
@@ -54,36 +56,30 @@ var Chart = function Chart(_ref) {
   );
 };
 
-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) {
-      return h - heightOffsets.header - heightOffsets.footer - 2;
-    }, R.when(R.gt(0), R.always(300))), // 2 = borders
-    options)
-  };
-}), (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' });
+var ChartWrapper = function ChartWrapper() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var options = R.over( // adjust svg height regarding header and footer height
+  R.lensPath(['base', 'height']), R.pipe(function (h) {
+    return h - props.heightOffsets.header - props.heightOffsets.footer - 2;
+  }, R.when(R.gt(0), R.always(300))), // 2 = borders
+  props.options);
+
+  if ((0, _utils.isChartNoData)((0, _extends3.default)({}, props, { options: options }))) {
+    if (R.isNil(props.fixedHeight)) return _react2.default.createElement(_dotstatsuiteVisions.NoData, { message: props.noData || 'No Data' });
+
+    var height = R.path(['base', 'height'], options);
+    var style = R.equals(0, height) ? { height: 'auto' } : { height: height };
+    return _react2.default.createElement(
+      'div',
+      { style: style },
+      _react2.default.createElement(_dotstatsuiteVisions.NoData, { message: props.noData || 'No Data' })
+    );
   }
-  var height = R.path(['base', 'height'], options);
-  var style = R.equals(0, height) ? { height: 'auto' } : { height: height };
-  return _react2.default.createElement(
-    'div',
-    { style: style },
-    _react2.default.createElement(_dotstatsuiteVisions.NoData, { message: noData || 'No Data' })
-  );
-})), (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
-  };
-}))(Chart);
+
+  return _react2.default.createElement(Chart, (0, _extends3.default)({}, props, {
+    series: (0, _series2.default)(props.data.series, props.type, options) // responsive rule only display highlighted data
+  }));
+};
+
+exports.default = ChartWrapper;

package/lib/viewer/src/index.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
+
+var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
+
 var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
@@ -28,8 +32,6 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _recompose = require('recompose');
-
 var _reactSizeme = require('react-sizeme');
 
 var _reactSizeme2 = _interopRequireDefault(_reactSizeme);
@@ -165,50 +167,38 @@ var Viewer = function Viewer(_ref4) {
   );
 };
 
-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)),
-      header: R.when(R.isNil, R.always(0))
-    }, heightOffsets),
+var ViewerWrapper = function ViewerWrapper(_ref5) {
+  var chartOptions = _ref5.chartOptions,
+      type = _ref5.type,
+      props = (0, _objectWithoutProperties3.default)(_ref5, ['chartOptions', 'type']);
+
+  var theme = (0, _styles.useTheme)();
+
+  var _useState = (0, _react.useState)({ footer: 0, header: 0 }),
+      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
+      heightOffsets = _useState2[0],
+      setHeightOffsets = _useState2[1];
+
+  var extendedProps = (0, _extends3.default)({}, props, {
+    type: type,
     setFooterOffset: function setFooterOffset(offset) {
       return setHeightOffsets(R.assoc('footer', offset));
     },
     setHeaderOffset: function setHeaderOffset(offset) {
       return setHeightOffsets(R.assoc('header', offset));
-    }
-  };
-}), (0, _recompose.withProps)( // inject responsive size if needed for chart
-function (_ref6) {
-  var chartOptions = _ref6.chartOptions,
-      heightOffsets = _ref6.heightOffsets,
-      size = _ref6.size,
-      type = _ref6.type;
-
-  if (type === 'table') {
-    return {};
-  }
-  var offsets = heightOffsets.header + heightOffsets.footer;
-  return {
-    chartOptions: R.pipe(R.over(R.lensPath(['base', 'width']), R.when(R.anyPass([R.isNil, isNaN]), R.always(size.width || 0))), R.over(R.lensPath(['base', 'height']), R.when(R.anyPass([R.isNil, isNaN]), R.always(0))))(chartOptions),
+    },
+    heightOffsets: heightOffsets,
     fixedWidth: R.path(['base', 'width'], chartOptions),
     fixedHeight: R.path(['base', 'height'], chartOptions)
-  };
-}), (0, _recompose.withProps)( // compute all chart options regarding oecd design
-function (_ref7) {
-  var chartData = _ref7.chartData,
-      chartOptions = _ref7.chartOptions,
-      timeFormats = _ref7.timeFormats,
-      type = _ref7.type,
-      locale = _ref7.locale;
+  });
 
-  if (type === 'table') {
-    return {};
-  }
-  var theme = (0, _styles.useTheme)();
-  return {
-    chartOptions: (0, _options2.default)(chartOptions, chartData, type, theme, timeFormats, locale)
-  };
-}))(Viewer);
+  if (type === 'table') return _react2.default.createElement(Viewer, (0, _extends3.default)({}, extendedProps, { chartOptions: chartOptions }));
+
+  var preparedChartOptions = R.pipe(R.over(R.lensPath(['base', 'width']), R.when(R.anyPass([R.isNil, isNaN]), R.always(props.size.width || 0))), R.over(R.lensPath(['base', 'height']), R.when(R.anyPass([R.isNil, isNaN]), R.always(0))), function (chartOptions) {
+    return (0, _options2.default)(chartOptions, props.chartData, type, theme, props.timeFormats, props.locale);
+  })(chartOptions);
+
+  return _react2.default.createElement(Viewer, (0, _extends3.default)({}, extendedProps, { chartOptions: preparedChartOptions }));
+};
+
+exports.default = (0, _reactSizeme2.default)({ noPlaceholder: true, monitorWidth: true, monitorHeight: true })(ViewerWrapper);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sis-cc/dotstatsuite-components",
   "description": "Set components based on React.",
-  "version": "16.7.0",
+  "version": "16.8.1",
   "main": "lib/index.js",
   "author": "OECD",
   "license": "MIT",
@@ -13,10 +13,11 @@
   },
   "devDependencies": {
     "@blueprintjs/core": "^1.22.0",
+    "@material-ui/core": "^4.12.3",
     "@sis-cc/dotstatsuite-sdmxjs": "*",
     "@sis-cc/dotstatsuite-visions": "*",
-    "@material-ui/core": "^4.12.3",
     "react": "^16.11.0",
+    "react-addons-css-transition-group": "^15.6.2",
     "react-helmet": "^5.2.1",
     "web-component-env": "^2.0.0"
   },
@@ -31,13 +32,12 @@
     "prop-types": "^15.6.2",
     "ramda": "^0.26.1",
     "react-dom": "^16.5.2",
-    "react-sizeme": "^2.3.6",
-    "recompose": "^0.30.0"
+    "react-sizeme": "^2.3.6"
   },
   "peerDependencies": {
     "@material-ui/core": "^4.x",
-    "@sis-cc/dotstatsuite-visions": "^7.x",
     "@sis-cc/dotstatsuite-sdmxjs": "^8.x",
+    "@sis-cc/dotstatsuite-visions": "^7.x",
     "react": "16.x"
   }
 }

package/src/viewer/src/chart.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import { branch, compose, renderComponent, withProps } from 'recompose';
 import * as R from 'ramda';
 import { NoData } from '@sis-cc/dotstatsuite-visions';
 import * as charts from '../../bridge-d3-react/src';
@@ -25,30 +24,31 @@ const Chart = ({ options, series, type, width, getAxisOptions }) => {
   );
 };
 
-export default compose(
-  withProps(({ heightOffsets, options }) => ({
-    options: R.over( // adjust svg height regarding header and footer height
-      R.lensPath(['base', 'height']),
-      R.pipe(h => h - heightOffsets.header - heightOffsets.footer - 2, R.when(R.gt(0), R.always(300))), // 2 = borders
-      options
-    )
-  })),
-  branch(
-    isChartNoData,
-    renderComponent(({ noData, options, fixedHeight }) => {
-      if (R.isNil(fixedHeight)) {
-        return (<NoData message={noData || 'No Data'} />);
-      }
-      const height = R.path(['base', 'height'], options);
-      const style = R.equals(0, height) ? { height: 'auto' } : { height };
-      return (
-        <div style={style}>
-          <NoData message={noData || 'No Data'} />
-        </div>
-      );
-    })
-  ),
-  withProps(({ data, options, type }) => ({
-    series: filterSeriesRegardingDimensions(data.series, type, options), // responsive rule only display highlighted data
-  })),
-)(Chart);
+const ChartWrapper = (props = {}) => {
+  const options = R.over( // adjust svg height regarding header and footer height
+    R.lensPath(['base', 'height']),
+    R.pipe(h => h - props.heightOffsets.header - props.heightOffsets.footer - 2, R.when(R.gt(0), R.always(300))), // 2 = borders
+    props.options
+  );
+
+  if (isChartNoData({...props, options })) {
+    if (R.isNil(props.fixedHeight)) return <NoData message={props.noData || 'No Data'} />;
+
+    const height = R.path(['base', 'height'], options);
+    const style = R.equals(0, height) ? { height: 'auto' } : { height };
+    return (
+      <div style={style}>
+        <NoData message={props.noData || 'No Data'} />
+      </div>
+    );
+  }
+
+  return (
+    <Chart
+      {...props}
+      series={filterSeriesRegardingDimensions(props.data.series, props.type, options)} // responsive rule only display highlighted data
+    />
+  );
+};
+
+export default ChartWrapper;

package/src/viewer/src/index.js

@@ -1,7 +1,6 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } 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 { useTheme, makeStyles } from '@material-ui/core/styles';
@@ -95,44 +94,29 @@ const Viewer = ({ getResponsiveSize, setFooterOffset, setHeaderOffset, size, typ
   );
 };
 
-export default compose(
-  sizeMe({ noPlaceholder: true, monitorWidth: true, monitorHeight: true }),
-  withState(
-    'heightOffsets',
-    'setHeightOffsets',
-    { footer: undefined, header: undefined }
-  ),
-  withProps(({ heightOffsets, setHeightOffsets }) => ({
-    heightOffsets: R.evolve({
-      footer: R.when(R.isNil, R.always(0)),
-      header: R.when(R.isNil, R.always(0))
-    },heightOffsets),
+const ViewerWrapper = ({ chartOptions, type, ...props }) => {
+  const theme = useTheme();
+  const [heightOffsets, setHeightOffsets] = useState({ footer: 0, header: 0 });
+
+  const extendedProps = {
+    ...props,
+    type,
     setFooterOffset: offset => setHeightOffsets(R.assoc('footer', offset)),
     setHeaderOffset: offset => setHeightOffsets(R.assoc('header', offset)),
-  })),
-  withProps( // inject responsive size if needed for chart
-    ({ chartOptions, heightOffsets, size, type }) => {
-      if (type === 'table') {
-        return ({});
-      }
-      const offsets = heightOffsets.header + heightOffsets.footer;
-      return ({
-        chartOptions: R.pipe(
-          R.over(R.lensPath(['base', 'width']), R.when(R.anyPass([R.isNil, isNaN]), R.always(size.width || 0))),
-          R.over(R.lensPath(['base', 'height']), R.when(R.anyPass([R.isNil, isNaN]), R.always(0)))
-        )(chartOptions),
-        fixedWidth: R.path(['base', 'width'], chartOptions),
-        fixedHeight: R.path(['base', 'height'], chartOptions),
-      });
-  }),
-  withProps( // compute all chart options regarding oecd design
-    ({ chartData, chartOptions, timeFormats, type, locale }) => {
-      if (type === 'table') {
-        return ({});
-      }
-      const theme = useTheme();
-      return ({
-        chartOptions: getChartOptions(chartOptions, chartData, type, theme, timeFormats, locale)
-      });
-  })
-)(Viewer);
+    heightOffsets,
+    fixedWidth: R.path(['base', 'width'], chartOptions),
+    fixedHeight: R.path(['base', 'height'], chartOptions),
+  };
+
+  if (type === 'table') return <Viewer {...extendedProps} chartOptions={chartOptions} />;
+
+  const preparedChartOptions = R.pipe(
+    R.over(R.lensPath(['base', 'width']), R.when(R.anyPass([R.isNil, isNaN]), R.always(props.size.width || 0))),
+    R.over(R.lensPath(['base', 'height']), R.when(R.anyPass([R.isNil, isNaN]), R.always(0))),
+    chartOptions => getChartOptions(chartOptions, props.chartData, type, theme, props.timeFormats, props.locale),
+  )(chartOptions);
+
+  return <Viewer {...extendedProps} chartOptions={preparedChartOptions} />;
+};
+
+export default sizeMe({ noPlaceholder: true, monitorWidth: true, monitorHeight: true })(ViewerWrapper);