@sis-cc/dotstatsuite-components 11.0.1 → 12.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/viewer/src/chart.js +48 -41
  2. package/lib/viewer/src/index.js +76 -56
  3. package/package.json +2 -7
  4. package/src/viewer/src/chart.js +15 -14
  5. package/src/viewer/src/index.js +35 -26
package/lib/viewer/src/chart.js CHANGED
@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
 
7
+ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
8
+
9
+ var _defineProperty3 = _interopRequireDefault(_defineProperty2);
10
+
7
11
  var _react = require('react');
8
12
 
9
13
  var _react2 = _interopRequireDefault(_react);
@@ -14,9 +18,11 @@ var _ramda = require('ramda');
14
18
 
15
19
  var R = _interopRequireWildcard(_ramda);
16
20
 
17
- var _glamorous = require('glamorous');
21
+ var _classnames = require('classnames');
22
+
23
+ var _classnames2 = _interopRequireDefault(_classnames);
18
24
 
19
- var _glamorous2 = _interopRequireDefault(_glamorous);
25
+ var _styles = require('@material-ui/core/styles');
20
26
 
21
27
  var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
22
28
 
@@ -40,46 +46,47 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
40
46
 
41
47
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
42
48
 
43
- var Container = _glamorous2.default.div({
44
- backgroundColor: 'none',
45
- overflow: 'hidden',
46
- position: 'relative',
47
- direction: 'ltr !important'
48
- }, function (_ref) {
49
- var type = _ref.type;
50
-
51
- if (!R.equals(_constants.SCATTER, type)) return {};
49
+ var useStyles = (0, _styles.makeStyles)(function () {
52
50
  return {
53
- '& .rcw-chart__chart__line--x:last-of-type': {
54
- visibility: 'hidden'
55
- },
56
- '& .rcw-chart__chart__line--y:last-of-type': {
57
- visibility: 'hidden'
51
+ container: {
52
+ backgroundColor: 'none',
53
+ overflow: 'hidden',
54
+ position: 'relative',
55
+ direction: 'ltr !important'
58
56
  },
59
- '& .rcw-chart__chart__axis--x': {
60
- '& .tick:last-of-type': {
57
+ chartContainer: {
58
+ '& .rcw-chart__chart__line--x:last-of-type': {
61
59
  visibility: 'hidden'
62
- }
63
- },
64
- '& .rcw-chart__chart__axis--y': {
65
- '& .tick:last-of-type': {
60
+ },
61
+ '& .rcw-chart__chart__line--y:last-of-type': {
66
62
  visibility: 'hidden'
63
+ },
64
+ '& .rcw-chart__chart__axis--x': {
65
+ '& .tick:last-of-type': {
66
+ visibility: 'hidden'
67
+ }
68
+ },
69
+ '& .rcw-chart__chart__axis--y': {
70
+ '& .tick:last-of-type': {
71
+ visibility: 'hidden'
72
+ }
67
73
  }
68
74
  }
69
75
  };
70
76
  });
71
77
 
72
- var Chart = function Chart(_ref2) {
73
- var options = _ref2.options,
74
- series = _ref2.series,
75
- type = _ref2.type,
76
- width = _ref2.width,
77
- getAxisOptions = _ref2.getAxisOptions;
78
+ var Chart = function Chart(_ref) {
79
+ var options = _ref.options,
80
+ series = _ref.series,
81
+ type = _ref.type,
82
+ width = _ref.width,
83
+ getAxisOptions = _ref.getAxisOptions;
78
84
 
85
+ var classes = useStyles();
79
86
  var ChartClass = charts[type];
80
87
  return _react2.default.createElement(
81
- Container,
82
- { type: type },
88
+ 'div',
89
+ { className: (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.chartContainer, !R.equals(_constants.SCATTER, type))) },
83
90
  _react2.default.createElement(ChartClass, {
84
91
  data: series,
85
92
  options: options,
@@ -89,9 +96,9 @@ var Chart = function Chart(_ref2) {
89
96
  );
90
97
  };
91
98
 
92
- exports.default = (0, _recompose.compose)((0, _recompose.withProps)(function (_ref3) {
93
- var heightOffsets = _ref3.heightOffsets,
94
- options = _ref3.options;
99
+ exports.default = (0, _recompose.compose)((0, _recompose.withProps)(function (_ref2) {
100
+ var heightOffsets = _ref2.heightOffsets,
101
+ options = _ref2.options;
95
102
  return {
96
103
  options: R.over( // adjust svg height regarding header and footer height
97
104
  R.lensPath(['base', 'height']), R.pipe(function (h) {
@@ -99,10 +106,10 @@ exports.default = (0, _recompose.compose)((0, _recompose.withProps)(function (_r
99
106
  }, R.when(R.gt(0), R.always(300))), // 2 = borders
100
107
  options)
101
108
  };
102
- }), (0, _recompose.branch)(_utils.isChartNoData, (0, _recompose.renderComponent)(function (_ref4) {
103
- var noData = _ref4.noData,
104
- options = _ref4.options,
105
- fixedHeight = _ref4.fixedHeight;
109
+ }), (0, _recompose.branch)(_utils.isChartNoData, (0, _recompose.renderComponent)(function (_ref3) {
110
+ var noData = _ref3.noData,
111
+ options = _ref3.options,
112
+ fixedHeight = _ref3.fixedHeight;
106
113
 
107
114
  if (R.isNil(fixedHeight)) {
108
115
  return _react2.default.createElement(_dotstatsuiteVisions.NoData, { message: noData || 'No Data' });
@@ -114,10 +121,10 @@ exports.default = (0, _recompose.compose)((0, _recompose.withProps)(function (_r
114
121
  { style: style },
115
122
  _react2.default.createElement(_dotstatsuiteVisions.NoData, { message: noData || 'No Data' })
116
123
  );
117
- })), (0, _recompose.withProps)(function (_ref5) {
118
- var data = _ref5.data,
119
- options = _ref5.options,
120
- type = _ref5.type;
124
+ })), (0, _recompose.withProps)(function (_ref4) {
125
+ var data = _ref4.data,
126
+ options = _ref4.options,
127
+ type = _ref4.type;
121
128
  return {
122
129
  series: (0, _series2.default)(data.series, type, options) // responsive rule only display highlighted data
123
130
  };
package/lib/viewer/src/index.js CHANGED
@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
 
7
+ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
8
+
9
+ var _defineProperty3 = _interopRequireDefault(_defineProperty2);
10
+
7
11
  var _extends2 = require('babel-runtime/helpers/extends');
8
12
 
9
13
  var _extends3 = _interopRequireDefault(_extends2);
@@ -20,6 +24,10 @@ var _ramda = require('ramda');
20
24
 
21
25
  var R = _interopRequireWildcard(_ramda);
22
26
 
27
+ var _classnames = require('classnames');
28
+
29
+ var _classnames2 = _interopRequireDefault(_classnames);
30
+
23
31
  var _recompose = require('recompose');
24
32
 
25
33
  var _reactSizeme = require('react-sizeme');
@@ -28,10 +36,6 @@ var _reactSizeme2 = _interopRequireDefault(_reactSizeme);
28
36
 
29
37
  var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
30
38
 
31
- var _glamorous = require('glamorous');
32
-
33
- var _glamorous2 = _interopRequireDefault(_glamorous);
34
-
35
39
  var _styles = require('@material-ui/core/styles');
36
40
 
37
41
  var _options = require('./chartUtils/options');
@@ -54,37 +58,45 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
54
58
 
55
59
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
56
60
 
57
- var Container = _glamorous2.default.div({
58
- borderColor: '#007bc7',
59
- borderBottomWidth: 1,
60
- borderLeftWidth: 0,
61
- borderTopWidth: 1,
62
- borderRightWidth: 0,
63
- borderStyle: 'solid',
64
- '& svg text::selection': {
65
- background: 'none'
66
- } }, function (_ref) {
67
- var type = _ref.type,
68
- fixedWidth = _ref.fixedWidth,
69
- fixedHeight = _ref.fixedHeight;
70
- return R.ifElse(R.always(type === 'table'), R.always({
71
- minWidth: '100%',
72
- minHeight: '100%'
73
- }), R.always({
74
- width: fixedWidth || '100%',
75
- height: fixedHeight || '100%',
76
- overflow: 'hidden'
77
- }));
61
+ var useStyles = (0, _styles.makeStyles)(function (theme) {
62
+ return {
63
+ container: {
64
+ borderColor: '#007bc7',
65
+ borderBottomWidth: 1,
66
+ borderLeftWidth: 0,
67
+ borderTopWidth: 1,
68
+ borderRightWidth: 0,
69
+ borderStyle: 'solid',
70
+ '& svg text::selection': {
71
+ background: 'none'
72
+ }
73
+ },
74
+ tableContainer: {
75
+ minWidth: '100%',
76
+ minHeight: '100%'
77
+ },
78
+ chartContainer: {
79
+ width: function width(_ref) {
80
+ var fixedWidth = _ref.fixedWidth;
81
+ return fixedWidth || '100%';
82
+ },
83
+ height: function height(_ref2) {
84
+ var fixedHeight = _ref2.fixedHeight;
85
+ return fixedHeight || '100%';
86
+ },
87
+ overflow: 'hidden'
88
+ }
89
+ };
78
90
  });
79
91
 
80
- var ViewContent = function ViewContent(_ref2) {
81
- var loading = _ref2.loading,
82
- _ref2$noData = _ref2.noData,
83
- noData = _ref2$noData === undefined ? 'No Data' : _ref2$noData,
84
- type = _ref2.type,
85
- width = _ref2.width,
86
- errorMessage = _ref2.errorMessage,
87
- rest = (0, _objectWithoutProperties3.default)(_ref2, ['loading', 'noData', 'type', 'width', 'errorMessage']);
92
+ var ViewContent = function ViewContent(_ref3) {
93
+ var loading = _ref3.loading,
94
+ _ref3$noData = _ref3.noData,
95
+ noData = _ref3$noData === undefined ? 'No Data' : _ref3$noData,
96
+ type = _ref3.type,
97
+ width = _ref3.width,
98
+ errorMessage = _ref3.errorMessage,
99
+ rest = (0, _objectWithoutProperties3.default)(_ref3, ['loading', 'noData', 'type', 'width', 'errorMessage']);
88
100
 
89
101
  if (loading) return _react2.default.createElement(_dotstatsuiteVisions.Loading, { message: loading });
90
102
  if (!width) return _react2.default.createElement(_dotstatsuiteVisions.Loading, { message: loading });
@@ -109,14 +121,20 @@ var ViewContent = function ViewContent(_ref2) {
109
121
  });
110
122
  };
111
123
 
112
- var Viewer = function Viewer(_ref3) {
113
- var getResponsiveSize = _ref3.getResponsiveSize,
114
- setFooterOffset = _ref3.setFooterOffset,
115
- setHeaderOffset = _ref3.setHeaderOffset,
116
- size = _ref3.size,
117
- type = _ref3.type,
118
- rest = (0, _objectWithoutProperties3.default)(_ref3, ['getResponsiveSize', 'setFooterOffset', 'setHeaderOffset', 'size', 'type']);
124
+ var Viewer = function Viewer(_ref4) {
125
+ var _cx;
119
126
 
127
+ var getResponsiveSize = _ref4.getResponsiveSize,
128
+ setFooterOffset = _ref4.setFooterOffset,
129
+ setHeaderOffset = _ref4.setHeaderOffset,
130
+ size = _ref4.size,
131
+ type = _ref4.type,
132
+ rest = (0, _objectWithoutProperties3.default)(_ref4, ['getResponsiveSize', 'setFooterOffset', 'setHeaderOffset', 'size', 'type']);
133
+
134
+ var classes = useStyles({
135
+ fixedWidth: rest.fixedWidth,
136
+ fixedHeight: rest.fixedHeight
137
+ });
120
138
  (0, _react.useEffect)(function () {
121
139
  if (R.is(Function, getResponsiveSize)) {
122
140
  getResponsiveSize({
@@ -127,8 +145,10 @@ var Viewer = function Viewer(_ref3) {
127
145
  });
128
146
 
129
147
  return _react2.default.createElement(
130
- Container,
131
- (0, _extends3.default)({ type: type }, R.pick(['fixedWidth', 'fixedHeight'], rest)),
148
+ 'div',
149
+ {
150
+ className: (0, _classnames2.default)(classes.container, (_cx = {}, (0, _defineProperty3.default)(_cx, classes.tableContainer, type === 'table'), (0, _defineProperty3.default)(_cx, classes.chartContainer, type !== 'table'), _cx))
151
+ },
132
152
  _react2.default.createElement(_header2.default, (0, _extends3.default)({
133
153
  onSize: function onSize(size) {
134
154
  return setHeaderOffset(size.height);
@@ -146,9 +166,9 @@ var Viewer = function Viewer(_ref3) {
146
166
  );
147
167
  };
148
168
 
149
- 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) {
150
- var heightOffsets = _ref4.heightOffsets,
151
- setHeightOffsets = _ref4.setHeightOffsets;
169
+ 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) {
170
+ var heightOffsets = _ref5.heightOffsets,
171
+ setHeightOffsets = _ref5.setHeightOffsets;
152
172
  return {
153
173
  heightOffsets: R.evolve({
154
174
  footer: R.when(R.isNil, R.always(0)),
@@ -162,11 +182,11 @@ exports.default = (0, _recompose.compose)((0, _reactSizeme2.default)({ noPlaceho
162
182
  }
163
183
  };
164
184
  }), (0, _recompose.withProps)( // inject responsive size if needed for chart
165
- function (_ref5) {
166
- var chartOptions = _ref5.chartOptions,
167
- heightOffsets = _ref5.heightOffsets,
168
- size = _ref5.size,
169
- type = _ref5.type;
185
+ function (_ref6) {
186
+ var chartOptions = _ref6.chartOptions,
187
+ heightOffsets = _ref6.heightOffsets,
188
+ size = _ref6.size,
189
+ type = _ref6.type;
170
190
 
171
191
  if (type === 'table') {
172
192
  return {};
@@ -178,12 +198,12 @@ function (_ref5) {
178
198
  fixedHeight: R.path(['base', 'height'], chartOptions)
179
199
  };
180
200
  }), (0, _recompose.withProps)( // compute all chart options regarding oecd design
181
- function (_ref6) {
182
- var chartData = _ref6.chartData,
183
- chartOptions = _ref6.chartOptions,
184
- timeFormats = _ref6.timeFormats,
185
- type = _ref6.type,
186
- locale = _ref6.locale;
201
+ function (_ref7) {
202
+ var chartData = _ref7.chartData,
203
+ chartOptions = _ref7.chartOptions,
204
+ timeFormats = _ref7.timeFormats,
205
+ type = _ref7.type,
206
+ locale = _ref7.locale;
187
207
 
188
208
  if (type === 'table') {
189
209
  return {};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sis-cc/dotstatsuite-components",
3
3
  "description": "Set components based on React.",
4
- "version": "11.0.1",
4
+ "version": "12.0.0",
5
5
  "main": "lib/index.js",
6
6
  "author": "OECD",
7
7
  "license": "MIT",
@@ -24,24 +24,19 @@
24
24
  "@react-hook/size": "^2.1.1",
25
25
  "@sis-cc/dotstatsuite-d3-charts": "^8.0.0",
26
26
  "date-fns": "^1.30.1",
27
- "glamor": "^2.20.40",
28
- "glamorous": "^4.13.1",
29
27
  "lodash": "^4.17.2",
30
28
  "lodash.compose": "^2.4.1",
31
29
  "memoizee": "^0.4.4",
32
30
  "numeral": "^2.0.6",
33
31
  "prop-types": "^15.6.2",
34
- "query-string": "^4.3.2",
35
32
  "ramda": "^0.26.1",
36
- "react-addons-css-transition-group": "^15.6.2",
37
33
  "react-dom": "^16.5.2",
38
- "react-select": "^1.2.1",
39
34
  "react-sizeme": "^2.3.6",
40
35
  "recompose": "^0.30.0"
41
36
  },
42
37
  "peerDependencies": {
43
38
  "@material-ui/core": "^4.x",
44
- "@sis-cc/dotstatsuite-visions": "^6.x",
39
+ "@sis-cc/dotstatsuite-visions": "^7.x",
45
40
  "@sis-cc/dotstatsuite-sdmxjs": "^5.x",
46
41
  "react": "16.x"
47
42
  }
package/src/viewer/src/chart.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from 'react';
2
2
  import { branch, compose, renderComponent, withProps } from 'recompose';
3
3
  import * as R from 'ramda';
4
- import glamorous from 'glamorous';
4
+ import cx from 'classnames';
5
+ import { makeStyles } from '@material-ui/core/styles';
5
6
  import { NoData } from '@sis-cc/dotstatsuite-visions';
6
7
  import * as charts from '../../bridge-d3-react/src';
7
8
  import { SCATTER } from '../../rules/src/constants';
@@ -9,15 +10,14 @@ import filterSeriesRegardingDimensions from './chartUtils/series';
9
10
  import AxisLegend from './legends/AxisLegend';
10
11
  import { isChartNoData } from './utils';
11
12
 
12
- const Container = glamorous.div({
13
- backgroundColor: 'none',
14
- overflow: 'hidden',
15
- position: 'relative',
16
- direction: 'ltr !important',
17
- }, ({ type }) => {
18
- if (!R.equals(SCATTER, type))
19
- return ({});
20
- return ({
13
+ const useStyles = makeStyles(() => ({
14
+ container: {
15
+ backgroundColor: 'none',
16
+ overflow: 'hidden',
17
+ position: 'relative',
18
+ direction: 'ltr !important',
19
+ },
20
+ chartContainer: {
21
21
  '& .rcw-chart__chart__line--x:last-of-type': {
22
22
  visibility: 'hidden',
23
23
  },
@@ -34,13 +34,14 @@ const Container = glamorous.div({
34
34
  visibility: 'hidden',
35
35
  }
36
36
  },
37
- });
38
- });
37
+ }
38
+ }));
39
39
 
40
40
  const Chart = ({ options, series, type, width, getAxisOptions }) => {
41
+ const classes = useStyles();
41
42
  const ChartClass = charts[type];
42
43
  return (
43
- <Container type={type}>
44
+ <div className={cx({ [classes.chartContainer]: !R.equals(SCATTER, type) })}>
44
45
  <ChartClass
45
46
  data={series}
46
47
  options={options}
@@ -51,7 +52,7 @@ const Chart = ({ options, series, type, width, getAxisOptions }) => {
51
52
  ? null
52
53
  : <AxisLegend axis="y" data={{ series }} type={type} />
53
54
  }
54
- </Container>
55
+ </div>
55
56
  );
56
57
  };
57
58
 
package/src/viewer/src/index.js CHANGED
@@ -1,37 +1,37 @@
1
1
  import React, { useEffect } from 'react';
2
2
  import * as R from 'ramda';
3
+ import cx from 'classnames';
3
4
  import { compose, withState, withProps } from 'recompose';
4
5
  import sizeMe from 'react-sizeme';
5
6
  import { Loading, NoData, TableHtml5 } from '@sis-cc/dotstatsuite-visions';
6
- import glamorous from 'glamorous';
7
- import { useTheme } from '@material-ui/core/styles';
7
+ import { useTheme, makeStyles } from '@material-ui/core/styles';
8
8
  import getChartOptions from './chartUtils/options';
9
9
  import Header from './header';
10
10
  import Chart from './chart';
11
11
  import Footer from './footer';
12
12
 
13
- const Container = glamorous.div({
14
- borderColor: '#007bc7',
15
- borderBottomWidth: 1,
16
- borderLeftWidth: 0,
17
- borderTopWidth: 1,
18
- borderRightWidth: 0,
19
- borderStyle: 'solid',
20
- '& svg text::selection': {
21
- background: 'none'
22
- }}, ({ type, fixedWidth, fixedHeight }) => R.ifElse(
23
- R.always(type === 'table'),
24
- R.always({
25
- minWidth: '100%',
26
- minHeight: '100%'
27
- }),
28
- R.always({
29
- width: fixedWidth || '100%',
30
- height: fixedHeight || '100%',
31
- overflow: 'hidden'
32
- })
33
- )
34
- );
13
+ const useStyles = makeStyles(theme => ({
14
+ container: {
15
+ borderColor: '#007bc7',
16
+ borderBottomWidth: 1,
17
+ borderLeftWidth: 0,
18
+ borderTopWidth: 1,
19
+ borderRightWidth: 0,
20
+ borderStyle: 'solid',
21
+ '& svg text::selection': {
22
+ background: 'none'
23
+ }
24
+ },
25
+ tableContainer: {
26
+ minWidth: '100%',
27
+ minHeight: '100%'
28
+ },
29
+ chartContainer: {
30
+ width: ({ fixedWidth }) => fixedWidth || '100%',
31
+ height: ({ fixedHeight }) => fixedHeight || '100%',
32
+ overflow: 'hidden'
33
+ }
34
+ }));
35
35
 
36
36
  const ViewContent = ({ loading, noData = 'No Data', type, width, errorMessage, ...rest }) => {
37
37
  if (loading) return <Loading message={loading} />;
@@ -60,6 +60,10 @@ const ViewContent = ({ loading, noData = 'No Data', type, width, errorMessage, .
60
60
  };
61
61
 
62
62
  const Viewer = ({ getResponsiveSize, setFooterOffset, setHeaderOffset, size, type, ...rest }) => {
63
+ const classes = useStyles({
64
+ fixedWidth: rest.fixedWidth,
65
+ fixedHeight: rest.fixedHeight
66
+ });
63
67
  useEffect(() => {
64
68
  if (R.is(Function, getResponsiveSize)) {
65
69
  getResponsiveSize({
@@ -70,7 +74,12 @@ const Viewer = ({ getResponsiveSize, setFooterOffset, setHeaderOffset, size, typ
70
74
  });
71
75
 
72
76
  return (
73
- <Container type={type} {...R.pick(['fixedWidth', 'fixedHeight'], rest)}>
77
+ <div
78
+ className={cx(classes.container, {
79
+ [classes.tableContainer]: type === 'table',
80
+ [classes.chartContainer]: type !== 'table'
81
+ })}
82
+ >
74
83
  <Header
75
84
  onSize={size => setHeaderOffset(size.height)}
76
85
  {...R.propOr({}, 'headerProps', rest)}
@@ -83,7 +92,7 @@ const Viewer = ({ getResponsiveSize, setFooterOffset, setHeaderOffset, size, typ
83
92
  chartOptions={R.prop('chartOptions', rest)}
84
93
  {...R.prop('footerProps', rest)}
85
94
  />
86
- </Container>
95
+ </div>
87
96
  );
88
97
  };
89
98