@sis-cc/dotstatsuite-components 17.8.0 → 17.9.0

package/lib/viewer/src/chart.js

@@ -59,17 +59,13 @@ var Chart = function Chart(_ref) {
 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 options = R.over(R.lensPath(['base', 'height']), R.when(function (h) {
+    return h < 0;
+  }, R.always(300)))(props.options);
 
+  if ((0, _utils.isChartNoData)(props)) {
     var height = R.path(['base', 'height'], options);
-    var style = R.equals(0, height) ? { height: 'auto' } : { height: height };
+    var style = { height: height };
     return _react2.default.createElement(
       'div',
       { style: style },

package/lib/viewer/src/footer.js

@@ -4,10 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
-
-var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
-
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -16,10 +12,6 @@ var _ramda = require('ramda');
 
 var R = _interopRequireWildcard(_ramda);
 
-var _size = require('@react-hook/size');
-
-var _size2 = _interopRequireDefault(_size);
-
 var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
 
 var _ChartLegends = require('./legends/ChartLegends');
@@ -38,27 +30,17 @@ var Footer = function Footer(_ref) {
       source = _ref.source,
       logo = _ref.logo,
       copyright = _ref.copyright,
-      onSize = _ref.onSize,
       chartOptions = _ref.chartOptions,
-      isSticky = _ref.isSticky;
-
-  var target = _react2.default.useRef(null);
-
-  var _useSize = (0, _size2.default)(target),
-      _useSize2 = (0, _slicedToArray3.default)(_useSize, 2),
-      width = _useSize2[0],
-      height = _useSize2[1];
-
-  _react2.default.useEffect(function () {
-    if (R.is(Function, onSize)) onSize({ width: width, height: height });
-  }, [height]);
+      isSticky = _ref.isSticky,
+      target = _ref.target,
+      width = _ref.width;
 
   var hasNoLegend = type === 'table' || (0, _utils.isChartNoData)({ data: chartData, type: type });
   var legend = hasNoLegend ? null : _react2.default.createElement(_ChartLegends2.default, { data: chartData, options: chartOptions, type: type, width: width });
 
   return _react2.default.createElement(
     'div',
-    { ref: target },
+    target ? { ref: target } : {},
     _react2.default.createElement(_dotstatsuiteVisions.DataFooter, {
       source: source,
       logo: logo,

package/lib/viewer/src/header.js

@@ -4,28 +4,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _react = require('react');
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
 
-var _react2 = _interopRequireDefault(_react);
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
 
-var _reactSizeme = require('react-sizeme');
+var _react = require('react');
 
-var _reactSizeme2 = _interopRequireDefault(_reactSizeme);
+var _react2 = _interopRequireDefault(_react);
 
 var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var Header = function Header(props) {
+var Header = function Header(_ref) {
+  var target = _ref.target,
+      props = (0, _objectWithoutProperties3.default)(_ref, ['target']);
   return _react2.default.createElement(
     'div',
-    null,
+    target ? { ref: target } : {},
     _react2.default.createElement(_dotstatsuiteVisions.DataHeader, props)
   );
 };
-/*
-  putting DataHeader under a div is necessary because sizeMe add a hidden DOM element that
-  mess up the Header layout
-*/
 
-exports.default = (0, _reactSizeme2.default)({ noPlaceholder: true, monitorHeight: true, monitorWidth: false })(Header);
+exports.default = Header;

package/lib/viewer/src/index.js

@@ -32,9 +32,9 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
-var _reactSizeme = require('react-sizeme');
+var _size = require('@react-hook/size');
 
-var _reactSizeme2 = _interopRequireDefault(_reactSizeme);
+var _size2 = _interopRequireDefault(_size);
 
 var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
 
@@ -56,6 +56,8 @@ var _footer = require('./footer');
 
 var _footer2 = _interopRequireDefault(_footer);
 
+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 }; }
@@ -86,7 +88,8 @@ var useStyles = (0, _styles.makeStyles)(function () {
         var fixedHeight = _ref2.fixedHeight;
         return fixedHeight || '100%';
       },
-      overflow: 'hidden'
+      overflow: 'hidden',
+      position: 'relative'
     }
   };
 });
@@ -101,7 +104,6 @@ var ViewContent = function ViewContent(_ref3) {
       rest = (0, _objectWithoutProperties3.default)(_ref3, ['loading', 'loadingProps', 'type', 'width', 'errorMessage']);
 
   if (loading) return _react2.default.createElement(_dotstatsuiteVisions.Loading, (0, _extends3.default)({ message: loading }, loadingProps));
-  if (!width) return _react2.default.createElement(_dotstatsuiteVisions.Loading, (0, _extends3.default)({ message: loading }, loadingProps));
   if (errorMessage) return _react2.default.createElement(_dotstatsuiteVisions.NoData, { message: errorMessage });
 
   if (type === 'table') {
@@ -111,9 +113,11 @@ var ViewContent = function ViewContent(_ref3) {
 
     return _react2.default.createElement(_dotstatsuiteVisions.TableHtml5, (0, _extends3.default)({ isRtl: R.prop('isRtl', rest) }, tableProps));
   }
+  if ((0, _utils.isChartDataNotReady)({ data: R.prop('chartData', rest) }) || !width) {
+    return _react2.default.createElement(_dotstatsuiteVisions.Loading, null);
+  }
   return _react2.default.createElement(_chart2.default, {
     data: R.prop('chartData', rest),
-    fixedHeight: R.prop('fixedHeight', rest),
     getAxisOptions: R.prop('getAxisOptions', rest),
     heightOffsets: R.prop('heightOffsets', rest),
     options: R.prop('chartOptions', rest),
@@ -125,41 +129,29 @@ var ViewContent = function ViewContent(_ref3) {
 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 type = _ref4.type,
+      _ref4$targets = _ref4.targets,
+      targets = _ref4$targets === undefined ? {} : _ref4$targets,
+      width = _ref4.width,
+      rest = (0, _objectWithoutProperties3.default)(_ref4, ['type', 'targets', 'width']);
 
   var classes = useStyles({
     fixedWidth: rest.fixedWidth,
     fixedHeight: rest.fixedHeight
   });
-  (0, _react.useEffect)(function () {
-    if (R.is(Function, getResponsiveSize)) {
-      getResponsiveSize({
-        responsiveWidth: size.width,
-        responsiveHeight: size.height
-      });
-    }
-  });
 
   return _react2.default.createElement(
     'div',
-    {
+    (0, _extends3.default)({}, targets.viewer ? { ref: targets.viewer } : {}, {
       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);
-      }
+      target: targets.header
     }, R.propOr({}, 'headerProps', rest))),
-    _react2.default.createElement(ViewContent, (0, _extends3.default)({ type: type, width: size.width }, rest)),
+    _react2.default.createElement(ViewContent, (0, _extends3.default)({ type: type, width: width }, rest)),
     _react2.default.createElement(_footer2.default, (0, _extends3.default)({
-      onSize: function onSize(size) {
-        return setFooterOffset(size.height);
-      },
+      width: width,
+      target: targets.footer,
       type: type,
       chartData: R.prop('chartData', rest),
       chartOptions: R.prop('chartOptions', rest)
@@ -167,38 +159,84 @@ var Viewer = function Viewer(_ref4) {
   );
 };
 
+var defaultChartHeight = function defaultChartHeight(chartOptions) {
+  return R.pipe(R.path(['base', 'height']), function (h) {
+    return R.isNil(h) || isNaN(h) ? 0 : h;
+  })(chartOptions);
+};
+
 var ViewerWrapper = function ViewerWrapper(_ref5) {
   var chartOptions = _ref5.chartOptions,
       type = _ref5.type,
-      props = (0, _objectWithoutProperties3.default)(_ref5, ['chartOptions', 'type']);
+      getResponsiveSize = _ref5.getResponsiveSize,
+      props = (0, _objectWithoutProperties3.default)(_ref5, ['chartOptions', 'type', 'getResponsiveSize']);
 
   var theme = (0, _styles.useTheme)();
-
-  var _useState = (0, _react.useState)({ footer: 0, header: 0 }),
+  var viewerTarget = _react2.default.useRef(null);
+  var headerTarget = _react2.default.useRef(null);
+  var footerTarget = _react2.default.useRef(null);
+
+  var _useSize = (0, _size2.default)(viewerTarget),
+      _useSize2 = (0, _slicedToArray3.default)(_useSize, 2),
+      viewerWidth = _useSize2[0],
+      viewerHeight = _useSize2[1];
+
+  var _useSize3 = (0, _size2.default)(headerTarget, { initialHeight: -1 }),
+      _useSize4 = (0, _slicedToArray3.default)(_useSize3, 2),
+      _ = _useSize4[0],
+      headerHeight = _useSize4[1];
+
+  var _useSize5 = (0, _size2.default)(footerTarget, { initialHeight: -1 }),
+      _useSize6 = (0, _slicedToArray3.default)(_useSize5, 2),
+      ___ = _useSize6[0],
+      footerHeight = _useSize6[1];
+
+  var _useState = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray3.default)(_useState, 2),
-      heightOffsets = _useState2[0],
-      setHeightOffsets = _useState2[1];
+      chartSvgHeight = _useState2[0],
+      setChartSvgHeight = _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));
-    },
-    heightOffsets: heightOffsets,
-    fixedWidth: R.path(['base', 'width'], chartOptions),
-    fixedHeight: R.path(['base', 'height'], chartOptions)
-  });
+  var defChartHeight = defaultChartHeight(chartOptions);
+
+  (0, _react.useEffect)(function () {
+    if (R.is(Function, getResponsiveSize) && viewerWidth && headerHeight !== -1 && footerHeight !== -1) {
+      getResponsiveSize({
+        responsiveWidth: viewerWidth,
+        responsiveHeight: viewerHeight
+      });
+    }
+  }, [viewerWidth, viewerHeight]);
 
-  if (type === 'table') return _react2.default.createElement(Viewer, (0, _extends3.default)({}, extendedProps, { chartOptions: chartOptions }));
+  (0, _react.useEffect)(function () {
+    if (headerHeight !== -1 && footerHeight !== -1 && !isNaN(headerHeight) && !isNaN(footerHeight)) {
+      var nextHeight = defChartHeight - headerHeight - footerHeight - 2;
+      setChartSvgHeight(nextHeight);
+    }
+  }, [headerHeight, footerHeight, defChartHeight]);
+
+  if (type === 'table') {
+    return _react2.default.createElement(Viewer, (0, _extends3.default)({}, props, {
+      width: viewerWidth,
+      type: type
+    }));
+  }
 
-  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) {
+  var preparedChartOptions = R.pipe(R.over(R.lensPath(['base', 'width']), R.when(R.anyPass([R.isNil, isNaN]), R.always(viewerWidth || 0))), R.set(R.lensPath(['base', 'height']), chartSvgHeight), 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 }));
+  return _react2.default.createElement(Viewer, (0, _extends3.default)({}, props, {
+    type: type,
+    chartOptions: preparedChartOptions,
+    fixedWidth: R.path(['base', 'width'], chartOptions),
+    fixedHeight: defChartHeight,
+    targets: {
+      viewer: viewerTarget,
+      header: headerTarget,
+      footer: footerTarget
+    },
+    width: viewerWidth
+  }));
 };
 
-exports.default = (0, _reactSizeme2.default)({ noPlaceholder: true, monitorWidth: true, monitorHeight: true })(ViewerWrapper);
+exports.default = ViewerWrapper;

package/lib/viewer/src/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getOptionsFromFont = exports.getFontFromTheme = exports.isChartNoData = undefined;
+exports.getOptionsFromFont = exports.getFontFromTheme = exports.isChartDataNotReady = exports.isChartNoData = undefined;
 
 var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
 
@@ -17,7 +17,9 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var isChartNoData = exports.isChartNoData = R.anyPass([R.pipe(R.path(['data', 'series']), R.anyPass([R.isNil, R.isEmpty])), R.allPass([R.pipe(R.prop('type'), R.equals('ChoroplethChart'), R.not), R.pipe(R.path(['data', 'series', 0, 'datapoints']), R.anyPass([R.isNil, R.isEmpty]))])]);
+var isChartNoData = exports.isChartNoData = R.anyPass([R.pipe(R.path(['data', 'series']), R.isEmpty), R.allPass([R.pipe(R.prop('type'), R.equals('ChoroplethChart'), R.not), R.pipe(R.path(['data', 'series', 0, 'datapoints']), R.anyPass([R.isNil, R.isEmpty]))])]);
+
+var isChartDataNotReady = exports.isChartDataNotReady = R.pipe(R.path(['data', 'series']), R.isNil);
 
 var getFontFromTheme = exports.getFontFromTheme = function getFontFromTheme(customPath) {
   return R.converge(R.mergeRight, [R.pathOr({}, ['mixins', 'chart', 'main']), R.pathOr({}, R.concat(['mixins', 'chart'], customPath))]);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sis-cc/dotstatsuite-components",
   "description": "Set components based on React.",
-  "version": "17.8.0",
+  "version": "17.9.0",
   "main": "lib/index.js",
   "author": "OECD",
   "license": "MIT",
@@ -31,8 +31,7 @@
     "memoizee": "^0.4.4",
     "numeral": "^2.0.6",
     "prop-types": "^15.6.2",
-    "ramda": "^0.26.1",
-    "react-sizeme": "^2.3.6"
+    "ramda": "^0.26.1"
   },
   "peerDependencies": {
     "@material-ui/core": "^4",

package/src/viewer/src/chart.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as R from 'ramda';
-import { NoData } from '@sis-cc/dotstatsuite-visions';
+import { NoData, Loading } from '@sis-cc/dotstatsuite-visions';
 import * as charts from '../../bridge-d3-react/src';
 import filterSeriesRegardingDimensions from './chartUtils/series';
 import AxisLegend from './legends/AxisLegend';
@@ -25,17 +25,14 @@ const Chart = ({ options, series, type, width, getAxisOptions }) => {
 };
 
 const ChartWrapper = (props = {}) => {
-  const options = R.over( // adjust svg height regarding header and footer height
+  const options = R.over(
     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'} />;
+    R.when(h => h < 0, R.always(300))
+  )(props.options);
 
+  if (isChartNoData(props)) {
     const height = R.path(['base', 'height'], options);
-    const style = R.equals(0, height) ? { height: 'auto' } : { height };
+    const style = { height };
     return (
       <div style={style}>
         <NoData message={props.noData || 'No Data'} />

package/src/viewer/src/footer.js

@@ -1,23 +1,15 @@
 import React from 'react';
 import * as R from 'ramda';
-import useSize from '@react-hook/size';
 import { DataFooter } from '@sis-cc/dotstatsuite-visions';
 import ChartLegends from './legends/ChartLegends';
 import { isChartNoData } from './utils';
 
-const Footer = ({ type, chartData, source, logo, copyright, onSize, chartOptions, isSticky }) => {
-  const target = React.useRef(null);
-  const [width, height] = useSize(target);
-
-  React.useEffect(() => {
-    if (R.is(Function, onSize)) onSize({width, height});
-  }, [height]);
-
+const Footer = ({ type, chartData, source, logo, copyright, chartOptions, isSticky, target, width }) => {
   const hasNoLegend = type === 'table' || isChartNoData({ data: chartData, type });
   const legend = hasNoLegend ? null : <ChartLegends data={chartData} options={chartOptions} type={type} width={width} />;
 
   return (
-    <div ref={target}>
+    <div {...(target ? { ref: target } : {})}>
       <DataFooter
         source={source}
         logo={logo}

package/src/viewer/src/header.js

@@ -1,15 +1,10 @@
 import React from 'react';
-import sizeMe from 'react-sizeme';
 import { DataHeader } from '@sis-cc/dotstatsuite-visions';
 
-const Header = (props) => (
-  <div>
+const Header = ({ target, ...props }) => (
+  <div {...(target ? { ref: target } : {})}>
     <DataHeader {...props} />
   </div>
 );
-/*
-  putting DataHeader under a div is necessary because sizeMe add a hidden DOM element that
-  mess up the Header layout
-*/
 
-export default sizeMe({ noPlaceholder: true, monitorHeight: true, monitorWidth: false })(Header);
+export default Header;

package/src/viewer/src/index.js

@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import * as R from 'ramda';
 import cx from 'classnames';
-import sizeMe from 'react-sizeme';
+import useSize from '@react-hook/size';
 import { Loading, NoData, TableHtml5 } from '@sis-cc/dotstatsuite-visions';
 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';
+import { isChartDataNotReady } from './utils';
 
 const useStyles = makeStyles(() => ({
   container: {
@@ -28,14 +29,16 @@ const useStyles = makeStyles(() => ({
   chartContainer: {
     width: ({ fixedWidth }) => fixedWidth || '100%',
     height: ({ fixedHeight }) => fixedHeight || '100%',
-    overflow: 'hidden'
+    overflow: 'hidden',
+    position: 'relative'
   }
 }));
 
 const ViewContent = ({ loading, loadingProps={}, type, width, errorMessage, ...rest }) => {
-  if (loading) return <Loading message={loading} {...loadingProps} />;
-  if (!width) return <Loading message={loading} {...loadingProps} />;
-  if (errorMessage) return <NoData message={errorMessage} />;
+  if (loading)
+    return <Loading message={loading} {...loadingProps} />;
+  if (errorMessage)
+    return <NoData message={errorMessage} />;
 
   if (type === 'table') {
     const tableProps = R.propOr({}, 'tableProps', rest);
@@ -44,10 +47,12 @@ const ViewContent = ({ loading, loadingProps={}, type, width, errorMessage, ...r
 
     return <TableHtml5 isRtl={R.prop('isRtl', rest)} {...tableProps} />;
   }
+  if (isChartDataNotReady({ data: R.prop('chartData', rest) }) || !width) {
+    return <Loading />;
+  }
   return (
     <Chart
       data={R.prop('chartData', rest)}
-      fixedHeight={R.prop('fixedHeight', rest)}
       getAxisOptions={R.prop('getAxisOptions', rest)}
       heightOffsets={R.prop('heightOffsets', rest)}
       options={R.prop('chartOptions', rest)}
@@ -57,34 +62,28 @@ const ViewContent = ({ loading, loadingProps={}, type, width, errorMessage, ...r
   );
 };
 
-const Viewer = ({ getResponsiveSize, setFooterOffset, setHeaderOffset, size, type, ...rest }) => {
+const Viewer = ({ type, targets={}, width, ...rest }) => {
   const classes = useStyles({
     fixedWidth: rest.fixedWidth,
     fixedHeight: rest.fixedHeight
   });
-  useEffect(() => {
-    if (R.is(Function, getResponsiveSize)) {
-      getResponsiveSize({
-        responsiveWidth: size.width,
-        responsiveHeight: size.height
-      });
-    }
-  });
 
   return (
     <div
+      {...(targets.viewer ? { ref: targets.viewer } : {})}
       className={cx(classes.container, {
         [classes.tableContainer]: type === 'table',
         [classes.chartContainer]: type !== 'table'
       })}
     >
       <Header
-        onSize={size => setHeaderOffset(size.height)}
+        target={targets.header}
         {...R.propOr({}, 'headerProps', rest)}
       />
-      <ViewContent type={type} width={size.width} {...rest} />
+      <ViewContent type={type} width={width} {...rest} />
       <Footer
-        onSize={size => setFooterOffset(size.height)}
+        width={width}
+        target={targets.footer}
         type={type}
         chartData={R.prop('chartData', rest)}
         chartOptions={R.prop('chartOptions', rest)}
@@ -94,29 +93,66 @@ const Viewer = ({ getResponsiveSize, setFooterOffset, setHeaderOffset, size, typ
   );
 };
 
-const ViewerWrapper = ({ chartOptions, type, ...props }) => {
+const defaultChartHeight = chartOptions => R.pipe(
+  R.path(['base', 'height']),
+  h => (R.isNil(h) || isNaN(h)) ? 0 : h
+)(chartOptions);
+
+const ViewerWrapper = ({ chartOptions, type, getResponsiveSize, ...props }) => {
   const theme = useTheme();
-  const [heightOffsets, setHeightOffsets] = useState({ footer: 0, header: 0 });
+  const viewerTarget = React.useRef(null);
+  const headerTarget = React.useRef(null);
+  const footerTarget = React.useRef(null);
+  const [viewerWidth, viewerHeight] = useSize(viewerTarget);
+  const [_, headerHeight] = useSize(headerTarget, { initialHeight: -1 });
+  const [___, footerHeight] = useSize(footerTarget, { initialHeight: -1 });
+  const [chartSvgHeight, setChartSvgHeight] = useState(0);
+  const defChartHeight = defaultChartHeight(chartOptions);
+
+  useEffect(() => {
+    if (R.is(Function, getResponsiveSize) && viewerWidth && headerHeight !== -1 && footerHeight !== -1) {
+      getResponsiveSize({
+        responsiveWidth: viewerWidth,
+        responsiveHeight: viewerHeight
+      });
+    }
+  }, [viewerWidth, viewerHeight]);
 
-  const extendedProps = {
-    ...props,
-    type,
-    setFooterOffset: offset => setHeightOffsets(R.assoc('footer', offset)),
-    setHeaderOffset: offset => setHeightOffsets(R.assoc('header', offset)),
-    heightOffsets,
-    fixedWidth: R.path(['base', 'width'], chartOptions),
-    fixedHeight: R.path(['base', 'height'], chartOptions),
-  };
+  useEffect(() => {
+    if (headerHeight !== -1 && footerHeight !== -1 && !isNaN(headerHeight) && !isNaN(footerHeight)) {
+      const nextHeight = defChartHeight - headerHeight - footerHeight - 2;
+      setChartSvgHeight(nextHeight);
+    }
+  }, [headerHeight, footerHeight, defChartHeight]);
 
-  if (type === 'table') return <Viewer {...extendedProps} chartOptions={chartOptions} />;
+
+  if (type === 'table') {
+    return <Viewer
+      {...props}
+      width={viewerWidth}
+      type={type}
+    />;
+  }
 
   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))),
+    R.over(R.lensPath(['base', 'width']), R.when(R.anyPass([R.isNil, isNaN]), R.always(viewerWidth || 0))),
+    R.set(R.lensPath(['base', 'height']), chartSvgHeight),
     chartOptions => getChartOptions(chartOptions, props.chartData, type, theme, props.timeFormats, props.locale),
   )(chartOptions);
 
-  return <Viewer {...extendedProps} chartOptions={preparedChartOptions} />;
+  return <Viewer
+    {...props}
+    type={type}
+    chartOptions={preparedChartOptions}
+    fixedWidth={R.path(['base', 'width'], chartOptions)}
+    fixedHeight={defChartHeight}
+    targets={{
+      viewer: viewerTarget,
+      header: headerTarget,
+      footer: footerTarget
+    }}
+    width={viewerWidth}
+  />;
 };
 
-export default sizeMe({ noPlaceholder: true, monitorWidth: true, monitorHeight: true })(ViewerWrapper);
+export default ViewerWrapper;

package/src/viewer/src/utils.js

@@ -1,13 +1,15 @@
 import * as R from 'ramda';
 
 export const isChartNoData = R.anyPass([
-  R.pipe(R.path(['data', 'series']), R.anyPass([R.isNil, R.isEmpty])),
+  R.pipe(R.path(['data', 'series']), R.isEmpty),
   R.allPass([
     R.pipe(R.prop('type'), R.equals('ChoroplethChart'), R.not),
     R.pipe(R.path(['data', 'series', 0, 'datapoints']), R.anyPass([R.isNil, R.isEmpty]))
   ])
 ]);
 
+export const isChartDataNotReady = R.pipe(R.path(['data', 'series']), R.isNil);
+
 export const getFontFromTheme = customPath => R.converge(
   R.mergeRight,
   [R.pathOr({}, ['mixins', 'chart', 'main']), R.pathOr({}, R.concat(['mixins', 'chart'], customPath))]