@sis-cc/dotstatsuite-components 14.3.7 → 15.0.1
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.
- package/lib/app.js +2 -6
- package/lib/index.js +9 -18
- package/lib/rules/src/date.js +7 -3
- package/lib/rules/src/index.js +142 -1
- package/lib/rules/src/properties/index.js +2 -5
- package/lib/rules/src/table/preparators/prepareData.js +4 -15
- package/lib/rules/src/v8-transformer.js +1 -1
- package/lib/rules2/src/duplicateObservations.js +22 -38
- package/lib/rules2/src/index.js +63 -0
- package/package.json +2 -2
- package/src/app.js +0 -2
- package/src/index.js +0 -1
- package/src/rules/src/date.js +4 -2
- package/src/rules/src/index.js +19 -0
- package/src/rules/src/properties/index.js +1 -4
- package/src/rules/src/table/preparators/prepareData.js +2 -10
- package/src/rules/src/v8-transformer.js +2 -2
- package/src/rules2/src/duplicateObservations.js +25 -39
- package/src/rules2/src/index.js +11 -0
- package/test/duplicateObs.test.js +83 -0
- package/test/mocks/table-prep-simple-duplicate--dimensions2.json +858 -0
- package/test/mocks/table-prep-simple-duplicate--duplicated2.json +77502 -0
- package/test/mocks/table-prep-simple-duplicate--observations2.json +60002 -0
- package/test/table-prep-duplicate-perf.test.js +8 -14
- package/lib/rules-driver/src/app.js +0 -152
- package/lib/rules-driver/src/index.js +0 -97
- package/src/rules-driver/README.md +0 -131
- package/src/rules-driver/src/app.js +0 -123
- package/src/rules-driver/src/index.js +0 -60
- package/src/rules-driver/src/mocks/data1.json +0 -332
- package/src/rules-driver/src/mocks/data2.json +0 -309
- package/test/duplicateObservations.test.js +0 -108
- package/test/mocks/table-prep-multi-duplicate--duplicated.json +0 -26938
- package/test/mocks/table-prep-multi-duplicate--indexes.json +0 -1417
- package/test/mocks/table-prep-multi-duplicate--observations.json +0 -20330
- package/test/mocks/table-prep-simple-duplicate--duplicated.json +0 -77502
- package/test/mocks/table-prep-simple-duplicate--indexes.json +0 -274
- package/test/mocks/table-prep-simple-duplicate--observations.json +0 -60002
|
@@ -1,21 +1,15 @@
|
|
|
1
1
|
import { expect } from 'chai';
|
|
2
|
-
import {
|
|
2
|
+
import { values } from 'ramda';
|
|
3
|
+
import { duplicateObs } from '../src/rules2/src/duplicateObservations';
|
|
3
4
|
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
import multiObservations from './mocks/table-prep-multi-duplicate--observations.json';
|
|
9
|
-
import multiIndexes from './mocks/table-prep-multi-duplicate--indexes.json';
|
|
10
|
-
import multiDuplicated from './mocks/table-prep-multi-duplicate--duplicated.json';
|
|
5
|
+
import simpleObservations2 from './mocks/table-prep-simple-duplicate--observations2.json';
|
|
6
|
+
import simpleDims2 from './mocks/table-prep-simple-duplicate--dimensions2.json';
|
|
7
|
+
import simpleDuplicated2 from './mocks/table-prep-simple-duplicate--duplicated2.json';
|
|
11
8
|
|
|
12
9
|
describe('duplicateObservations performance tests', () => {
|
|
13
10
|
it('simple duplication on 2500 observations', function() {
|
|
14
|
-
this.timeout(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
it('multi hierarchies duplication on 900 observations', function() {
|
|
18
|
-
this.timeout(30000);
|
|
19
|
-
expect(duplicateObservations(multiObservations, multiIndexes)).to.deep.equal(multiDuplicated);
|
|
11
|
+
this.timeout(150000);
|
|
12
|
+
const dims = values(simpleDims2);
|
|
13
|
+
expect(duplicateObs(dims, simpleObservations2)).to.deep.equal(simpleDuplicated2);
|
|
20
14
|
});
|
|
21
15
|
});
|
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
var _extends2 = require('babel-runtime/helpers/extends');
|
|
8
|
-
|
|
9
|
-
var _extends3 = _interopRequireDefault(_extends2);
|
|
10
|
-
|
|
11
|
-
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
|
12
|
-
|
|
13
|
-
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
|
14
|
-
|
|
15
|
-
var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
|
|
16
|
-
|
|
17
|
-
var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
|
|
18
|
-
|
|
19
|
-
var _react = require('react');
|
|
20
|
-
|
|
21
|
-
var _react2 = _interopRequireDefault(_react);
|
|
22
|
-
|
|
23
|
-
var _ramda = require('ramda');
|
|
24
|
-
|
|
25
|
-
var R = _interopRequireWildcard(_ramda);
|
|
26
|
-
|
|
27
|
-
var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
|
|
28
|
-
|
|
29
|
-
var _ = require('./');
|
|
30
|
-
|
|
31
|
-
var _2 = _interopRequireDefault(_);
|
|
32
|
-
|
|
33
|
-
var _data = require('./mocks/data1.json');
|
|
34
|
-
|
|
35
|
-
var _data2 = _interopRequireDefault(_data);
|
|
36
|
-
|
|
37
|
-
var _data3 = require('./mocks/data2.json');
|
|
38
|
-
|
|
39
|
-
var _data4 = _interopRequireDefault(_data3);
|
|
40
|
-
|
|
41
|
-
var _3 = require('../../');
|
|
42
|
-
|
|
43
|
-
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; } }
|
|
44
|
-
|
|
45
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
46
|
-
|
|
47
|
-
var labels = {
|
|
48
|
-
focus: 'Chart Focus',
|
|
49
|
-
highlight: 'Highlights',
|
|
50
|
-
baseline: 'Baseline',
|
|
51
|
-
select: 'Select',
|
|
52
|
-
size: 'Chart Size',
|
|
53
|
-
width: 'Width',
|
|
54
|
-
height: 'Height',
|
|
55
|
-
series: 'Chart Series',
|
|
56
|
-
scatterDimension: 'Scatter Dimension',
|
|
57
|
-
scatterX: 'Scatter X',
|
|
58
|
-
scatterY: 'Scatter Y',
|
|
59
|
-
symbolDimension: 'Symbol Dimension',
|
|
60
|
-
stackedDimension: 'Stacked Dimension',
|
|
61
|
-
stackedMode: 'Stacked Mode',
|
|
62
|
-
stackedModeOptions: {
|
|
63
|
-
values: 'Values',
|
|
64
|
-
percent: 'Percent'
|
|
65
|
-
},
|
|
66
|
-
axisX: 'Chart X Axis',
|
|
67
|
-
axisY: 'Chart Y Axis',
|
|
68
|
-
max: 'Max',
|
|
69
|
-
min: 'Min',
|
|
70
|
-
pivot: 'Pivot',
|
|
71
|
-
step: 'Step',
|
|
72
|
-
frequency: 'Frequency',
|
|
73
|
-
freqStep: 'Frequency Step',
|
|
74
|
-
logo: 'Remove logo',
|
|
75
|
-
copyright: 'Remove copyright',
|
|
76
|
-
title: 'Title',
|
|
77
|
-
subtitle: 'Subtitle',
|
|
78
|
-
source: 'Source',
|
|
79
|
-
information: 'Information',
|
|
80
|
-
reset: 'reset label',
|
|
81
|
-
uniqFocusOption: 'serie',
|
|
82
|
-
display: 'Display',
|
|
83
|
-
displayOptions: {
|
|
84
|
-
name: 'Name',
|
|
85
|
-
code: 'Code',
|
|
86
|
-
both: 'Both'
|
|
87
|
-
}
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
var renameKey = R.curry(function (oldKey, newKey, obj) {
|
|
91
|
-
return R.assoc(newKey, R.prop(oldKey, obj), R.dissoc(oldKey, obj));
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
var renameProperties = function renameProperties() {
|
|
95
|
-
var keys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
96
|
-
return R.map(R.ifElse(R.pipe(R.prop('id'), R.flip(R.includes)(keys)), renameKey('onChange', 'onSubmit'), R.identity));
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
var propertiesKeys = ['width', 'height', 'freqStep', 'maxX', 'minX', 'pivotX', 'stepX', 'maxY', 'minY', 'pivotY', 'stepY', 'title', 'subtitle', 'source'];
|
|
100
|
-
|
|
101
|
-
var App = function App() {
|
|
102
|
-
var _useState = (0, _react.useState)(true),
|
|
103
|
-
_useState2 = (0, _slicedToArray3.default)(_useState, 2),
|
|
104
|
-
toggle = _useState2[0],
|
|
105
|
-
setToggle = _useState2[1];
|
|
106
|
-
|
|
107
|
-
var dataflow = { id: "DF_KEI_21760", name: "Harmonised Unemployment Rate" };
|
|
108
|
-
var display = 'label';
|
|
109
|
-
var type = 'BarChart';
|
|
110
|
-
var props = { dataflow: dataflow, display: display, type: type };
|
|
111
|
-
|
|
112
|
-
return _react2.default.createElement(
|
|
113
|
-
'div',
|
|
114
|
-
null,
|
|
115
|
-
_react2.default.createElement(
|
|
116
|
-
'button',
|
|
117
|
-
{ onClick: function onClick() {
|
|
118
|
-
return setToggle(function (prev) {
|
|
119
|
-
return !prev;
|
|
120
|
-
});
|
|
121
|
-
}, style: { marginBottom: '10px' } },
|
|
122
|
-
'Toggle Selection'
|
|
123
|
-
),
|
|
124
|
-
_react2.default.createElement(_2.default, (0, _extends3.default)({
|
|
125
|
-
data: toggle ? _data2.default : _data4.default
|
|
126
|
-
}, props, {
|
|
127
|
-
display: display,
|
|
128
|
-
type: type,
|
|
129
|
-
render: function render(_ref) {
|
|
130
|
-
var properties = _ref.properties,
|
|
131
|
-
parsedProps = (0, _objectWithoutProperties3.default)(_ref, ['properties']);
|
|
132
|
-
|
|
133
|
-
return _react2.default.createElement(
|
|
134
|
-
'div',
|
|
135
|
-
null,
|
|
136
|
-
_react2.default.createElement(_dotstatsuiteVisions.ChartsConfig, {
|
|
137
|
-
properties: R.pipe(renameProperties(propertiesKeys))(properties),
|
|
138
|
-
labels: labels
|
|
139
|
-
}),
|
|
140
|
-
_react2.default.createElement(_3.Viewer, (0, _extends3.default)({}, parsedProps, {
|
|
141
|
-
chartData: R.pick(['series', 'frequency'])(parsedProps.chartData),
|
|
142
|
-
properties: R.tap(console.log)(R.over(R.lensProp('baseline'), R.omit(['onChange']), properties)),
|
|
143
|
-
type: 'BarChart',
|
|
144
|
-
locale: 'en'
|
|
145
|
-
}))
|
|
146
|
-
);
|
|
147
|
-
}
|
|
148
|
-
}))
|
|
149
|
-
);
|
|
150
|
-
};
|
|
151
|
-
|
|
152
|
-
exports.default = App;
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
|
|
8
|
-
|
|
9
|
-
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
|
|
10
|
-
|
|
11
|
-
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
|
12
|
-
|
|
13
|
-
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
|
14
|
-
|
|
15
|
-
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
|
16
|
-
|
|
17
|
-
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
|
18
|
-
|
|
19
|
-
var _inherits2 = require('babel-runtime/helpers/inherits');
|
|
20
|
-
|
|
21
|
-
var _inherits3 = _interopRequireDefault(_inherits2);
|
|
22
|
-
|
|
23
|
-
var _class, _temp, _initialiseProps;
|
|
24
|
-
|
|
25
|
-
var _react = require('react');
|
|
26
|
-
|
|
27
|
-
var _react2 = _interopRequireDefault(_react);
|
|
28
|
-
|
|
29
|
-
var _propTypes = require('prop-types');
|
|
30
|
-
|
|
31
|
-
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
32
|
-
|
|
33
|
-
var _src = require('../../rules/src');
|
|
34
|
-
|
|
35
|
-
var _getHeaderProps = require('../../rules/src/properties/getHeaderProps');
|
|
36
|
-
|
|
37
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
38
|
-
|
|
39
|
-
var RulesDriver = (_temp = _class = function (_Component) {
|
|
40
|
-
(0, _inherits3.default)(RulesDriver, _Component);
|
|
41
|
-
|
|
42
|
-
function RulesDriver(props) {
|
|
43
|
-
(0, _classCallCheck3.default)(this, RulesDriver);
|
|
44
|
-
|
|
45
|
-
var _this = (0, _possibleConstructorReturn3.default)(this, (RulesDriver.__proto__ || (0, _getPrototypeOf2.default)(RulesDriver)).call(this, props));
|
|
46
|
-
|
|
47
|
-
_initialiseProps.call(_this);
|
|
48
|
-
|
|
49
|
-
_this.state = _src.initialState;
|
|
50
|
-
return _this;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
return RulesDriver;
|
|
54
|
-
}(_react.Component), _initialiseProps = function _initialiseProps() {
|
|
55
|
-
var _this2 = this;
|
|
56
|
-
|
|
57
|
-
this.componentWillPrepare = function (props, state) {
|
|
58
|
-
_this2.setState((0, _src.stateFromNewProps)(props, state));
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
this.componentWillMount = function () {
|
|
62
|
-
_this2.componentWillPrepare(_this2.props, _this2.state);
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
this.componentWillReceiveProps = function (props) {
|
|
66
|
-
_this2.componentWillPrepare(props, _this2.state);
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
this.onChange = function (newState) {
|
|
70
|
-
_this2.setState(newState);
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
this.render = function () {
|
|
74
|
-
return _this2.props.render({
|
|
75
|
-
chartData: (0, _src.toChartData)(_this2.props, _this2.state),
|
|
76
|
-
chartOptions: (0, _src.toChartOptions)(_this2.props, _this2.state),
|
|
77
|
-
errors: (0, _src.getErrors)(_this2.props, _this2.state),
|
|
78
|
-
headerProps: (0, _getHeaderProps.getHeaderProps)(_this2.props, _this2.state),
|
|
79
|
-
footerProps: (0, _getHeaderProps.getFooterProps)(_this2.props, _this2.state),
|
|
80
|
-
isNonIdealState: (0, _src.isNonIdealState)(_this2.props.data, _this2.props.type),
|
|
81
|
-
onChange: (0, _src.onChangeProperties)(_this2.props, _this2.state, _this2.onChange),
|
|
82
|
-
properties: (0, _src.toProperties)(_this2.props, _this2.state, _this2.onChange)
|
|
83
|
-
});
|
|
84
|
-
};
|
|
85
|
-
}, _temp);
|
|
86
|
-
;
|
|
87
|
-
|
|
88
|
-
RulesDriver.propTypes = {
|
|
89
|
-
data: _propTypes2.default.object,
|
|
90
|
-
dataflow: _propTypes2.default.object,
|
|
91
|
-
display: _propTypes2.default.string,
|
|
92
|
-
formaterIds: _propTypes2.default.object,
|
|
93
|
-
options: _propTypes2.default.object,
|
|
94
|
-
type: _propTypes2.default.string.isRequired
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
exports.default = RulesDriver;
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
# rules-driver
|
|
2
|
-
|
|
3
|
-
A component that take business logic regarding sdmx from 'rules' library, and exposes
|
|
4
|
-
it into props for view components.
|
|
5
|
-
(For now only charts from `charts` are supported).
|
|
6
|
-
|
|
7
|
-
## usage
|
|
8
|
-
|
|
9
|
-
```javascript
|
|
10
|
-
import { RulesDriver } from '@sis-cc/dotstatsuite-components';
|
|
11
|
-
|
|
12
|
-
<RulesDriver
|
|
13
|
-
data={data}
|
|
14
|
-
dataflowCode={dataflowCode}
|
|
15
|
-
display={display}
|
|
16
|
-
options={options}
|
|
17
|
-
type={type}
|
|
18
|
-
render={
|
|
19
|
-
({ chartData, chartOptions, onChange, properties }) => (
|
|
20
|
-
<MyViewer
|
|
21
|
-
chartData={chartData}
|
|
22
|
-
chartOptions={chartOptions}
|
|
23
|
-
onChange={onChange}
|
|
24
|
-
properties={properties}
|
|
25
|
-
type={type}
|
|
26
|
-
/>
|
|
27
|
-
)
|
|
28
|
-
}
|
|
29
|
-
/>
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## props
|
|
33
|
-
|
|
34
|
-
### data
|
|
35
|
-
`[Object]`
|
|
36
|
-
sdmx json data
|
|
37
|
-
|
|
38
|
-
### dataflowCode
|
|
39
|
-
`[String]`
|
|
40
|
-
Sdmx code of the dataflow (not defined in sdmx data), used for `code` and `both` displays
|
|
41
|
-
of the default title.
|
|
42
|
-
|
|
43
|
-
### display
|
|
44
|
-
`[String]`
|
|
45
|
-
Way to display sdmx dimension and atribute values in Chart series and configs views, one of
|
|
46
|
-
- `label`
|
|
47
|
-
- `code`
|
|
48
|
-
- `both`
|
|
49
|
-
|
|
50
|
-
### options
|
|
51
|
-
`[Object]`
|
|
52
|
-
Chart engine default options. See `rcw-charts` props definition.
|
|
53
|
-
|
|
54
|
-
### type
|
|
55
|
-
`[String]`
|
|
56
|
-
Chart type, one of:
|
|
57
|
-
- `BarChart`
|
|
58
|
-
- `RowChart`
|
|
59
|
-
- `ScatterChart`
|
|
60
|
-
- `TimelineChart`
|
|
61
|
-
- `HorizontalSymbolChart`
|
|
62
|
-
- `VerticalSymbolChart`
|
|
63
|
-
- `StackedBarChart`
|
|
64
|
-
|
|
65
|
-
## render props
|
|
66
|
-
|
|
67
|
-
### chartData
|
|
68
|
-
`[Object]`
|
|
69
|
-
Chart derivated data. See `charts` data prop definition.
|
|
70
|
-
|
|
71
|
-
### chartOptions
|
|
72
|
-
`[Object]`
|
|
73
|
-
Chart engine derivated options.
|
|
74
|
-
|
|
75
|
-
### properties
|
|
76
|
-
`[Object]`
|
|
77
|
-
All property props required in order to render configs views allowing to
|
|
78
|
-
configure the current chart data and options.
|
|
79
|
-
|
|
80
|
-
```javascript
|
|
81
|
-
{
|
|
82
|
-
baseline: Object,
|
|
83
|
-
highlight: Object,
|
|
84
|
-
width: Object,
|
|
85
|
-
height: Object,
|
|
86
|
-
title: Object,
|
|
87
|
-
subtitle: Object,
|
|
88
|
-
freqStep: Object,
|
|
89
|
-
scatterDimension: Object,
|
|
90
|
-
scatterX: Object,
|
|
91
|
-
scatterY: Object,
|
|
92
|
-
symbolDimension: Object,
|
|
93
|
-
stackedDimension: Object,
|
|
94
|
-
stackedMode: Object*,
|
|
95
|
-
maxX: Object,
|
|
96
|
-
maxY: Object,
|
|
97
|
-
minX: Object,
|
|
98
|
-
minY: Object,
|
|
99
|
-
pivotX: Object,
|
|
100
|
-
pivotY: Object,
|
|
101
|
-
stepX: Object,
|
|
102
|
-
stepY: Object,
|
|
103
|
-
}
|
|
104
|
-
```
|
|
105
|
-
Each of these properties follows the same definition:
|
|
106
|
-
|
|
107
|
-
```javascript
|
|
108
|
-
property: {
|
|
109
|
-
id: String, // id of the property
|
|
110
|
-
isActive: Boolean, // if the property is Active, regarding the chart type
|
|
111
|
-
onChange: Function, // setter function in order to change the current value of the property
|
|
112
|
-
options: // The complete set of acceptable alternative value if relevant,
|
|
113
|
-
[{ label: String, value: String }] // for baseline, highlight, scatterDimension, scatterX, scatterY, symbolDimension, stackedDimension
|
|
114
|
-
|| undefined, // for width, height, title, subtitle, freqStep, maxX, maxY, minX, minY, pivotX, pivotY, stepX, stepY
|
|
115
|
-
value: // the current value of the property
|
|
116
|
-
String
|
|
117
|
-
|| { label: String, value: String } // for scatterDimension, scatterX, scatterY, symbolDimension, stackedDimension
|
|
118
|
-
|| [{ label: String, value: String }] // for baseline, highlight
|
|
119
|
-
}
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
`*` For `stackedMode` the property is not derivated from sdmx data, so options are fixed and always `[{ value: 'values' }, { value: 'percent' }]`,
|
|
123
|
-
without labels, as for value `{ value: 'values' || 'percent' }`, `values` being the default one.
|
|
124
|
-
|
|
125
|
-
### onChange
|
|
126
|
-
`[Function]`
|
|
127
|
-
Alternative to individual `properties` `onChange` setters. Can be used
|
|
128
|
-
to submit several `properties` at once. Useful for a submit form.
|
|
129
|
-
```javascript
|
|
130
|
-
onChange({ width: 500, height: 500, minY: 0, maxY: 5000, stepY: 500 });
|
|
131
|
-
```
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
2
|
-
import * as R from 'ramda';
|
|
3
|
-
import { ChartsConfig } from '@sis-cc/dotstatsuite-visions';
|
|
4
|
-
import RulesDriver from './';
|
|
5
|
-
import data1 from './mocks/data1.json';
|
|
6
|
-
import data2 from './mocks/data2.json';
|
|
7
|
-
import { Viewer } from '../../';
|
|
8
|
-
|
|
9
|
-
const labels = {
|
|
10
|
-
focus: 'Chart Focus',
|
|
11
|
-
highlight: 'Highlights',
|
|
12
|
-
baseline: 'Baseline',
|
|
13
|
-
select: 'Select',
|
|
14
|
-
size: 'Chart Size',
|
|
15
|
-
width: 'Width',
|
|
16
|
-
height: 'Height',
|
|
17
|
-
series: 'Chart Series',
|
|
18
|
-
scatterDimension: 'Scatter Dimension',
|
|
19
|
-
scatterX: 'Scatter X',
|
|
20
|
-
scatterY: 'Scatter Y',
|
|
21
|
-
symbolDimension: 'Symbol Dimension',
|
|
22
|
-
stackedDimension: 'Stacked Dimension',
|
|
23
|
-
stackedMode: 'Stacked Mode',
|
|
24
|
-
stackedModeOptions: {
|
|
25
|
-
values: 'Values',
|
|
26
|
-
percent: 'Percent',
|
|
27
|
-
},
|
|
28
|
-
axisX: 'Chart X Axis',
|
|
29
|
-
axisY: 'Chart Y Axis',
|
|
30
|
-
max: 'Max',
|
|
31
|
-
min: 'Min',
|
|
32
|
-
pivot: 'Pivot',
|
|
33
|
-
step: 'Step',
|
|
34
|
-
frequency: 'Frequency',
|
|
35
|
-
freqStep: 'Frequency Step',
|
|
36
|
-
logo: 'Remove logo',
|
|
37
|
-
copyright: 'Remove copyright',
|
|
38
|
-
title: 'Title',
|
|
39
|
-
subtitle: 'Subtitle',
|
|
40
|
-
source: 'Source',
|
|
41
|
-
information: 'Information',
|
|
42
|
-
reset: 'reset label',
|
|
43
|
-
uniqFocusOption: 'serie',
|
|
44
|
-
display: 'Display',
|
|
45
|
-
displayOptions: {
|
|
46
|
-
name: 'Name',
|
|
47
|
-
code: 'Code',
|
|
48
|
-
both: 'Both'
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
const renameKey = R.curry((oldKey, newKey, obj) =>
|
|
53
|
-
R.assoc(newKey, R.prop(oldKey, obj), R.dissoc(oldKey, obj)),
|
|
54
|
-
);
|
|
55
|
-
|
|
56
|
-
const renameProperties = (keys = []) =>
|
|
57
|
-
R.map(
|
|
58
|
-
R.ifElse(
|
|
59
|
-
R.pipe(R.prop('id'), R.flip(R.includes)(keys)),
|
|
60
|
-
renameKey('onChange', 'onSubmit'),
|
|
61
|
-
R.identity,
|
|
62
|
-
),
|
|
63
|
-
);
|
|
64
|
-
|
|
65
|
-
const propertiesKeys = [
|
|
66
|
-
'width',
|
|
67
|
-
'height',
|
|
68
|
-
'freqStep',
|
|
69
|
-
'maxX',
|
|
70
|
-
'minX',
|
|
71
|
-
'pivotX',
|
|
72
|
-
'stepX',
|
|
73
|
-
'maxY',
|
|
74
|
-
'minY',
|
|
75
|
-
'pivotY',
|
|
76
|
-
'stepY',
|
|
77
|
-
'title',
|
|
78
|
-
'subtitle',
|
|
79
|
-
'source',
|
|
80
|
-
];
|
|
81
|
-
|
|
82
|
-
const App = () => {
|
|
83
|
-
const [toggle, setToggle] = useState(true);
|
|
84
|
-
const dataflow = { id: "DF_KEI_21760", name: "Harmonised Unemployment Rate" };
|
|
85
|
-
const display = 'label';
|
|
86
|
-
const type = 'BarChart';
|
|
87
|
-
const props = { dataflow, display, type }
|
|
88
|
-
|
|
89
|
-
return (
|
|
90
|
-
<div>
|
|
91
|
-
<button onClick={() => setToggle(prev => !prev)} style={{ marginBottom: '10px' }}>Toggle Selection</button>
|
|
92
|
-
<RulesDriver
|
|
93
|
-
data={toggle ? data1 : data2}
|
|
94
|
-
{...props}
|
|
95
|
-
display={display}
|
|
96
|
-
type={type}
|
|
97
|
-
render={
|
|
98
|
-
({ properties, ...parsedProps }) => {
|
|
99
|
-
return (
|
|
100
|
-
<div>
|
|
101
|
-
<ChartsConfig
|
|
102
|
-
properties={R.pipe(
|
|
103
|
-
renameProperties(propertiesKeys),
|
|
104
|
-
)(properties)}
|
|
105
|
-
labels={labels}
|
|
106
|
-
/>
|
|
107
|
-
<Viewer
|
|
108
|
-
{...parsedProps}
|
|
109
|
-
chartData={R.pick(['series', 'frequency'])(parsedProps.chartData)}
|
|
110
|
-
properties={R.tap(console.log)(R.over(R.lensProp('baseline'), R.omit(['onChange']), properties))}
|
|
111
|
-
type='BarChart'
|
|
112
|
-
locale='en'
|
|
113
|
-
/>
|
|
114
|
-
</div>
|
|
115
|
-
);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
/>
|
|
119
|
-
</div>
|
|
120
|
-
)
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
export default App;
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import React, { Component } from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import {
|
|
4
|
-
getErrors,
|
|
5
|
-
initialState,
|
|
6
|
-
isNonIdealState,
|
|
7
|
-
stateFromNewProps,
|
|
8
|
-
onChangeProperties,
|
|
9
|
-
toProperties,
|
|
10
|
-
toChartData,
|
|
11
|
-
toChartOptions,
|
|
12
|
-
} from '../../rules/src';
|
|
13
|
-
import { getHeaderProps, getFooterProps } from '../../rules/src/properties/getHeaderProps';
|
|
14
|
-
|
|
15
|
-
class RulesDriver extends Component {
|
|
16
|
-
constructor(props) {
|
|
17
|
-
super(props);
|
|
18
|
-
this.state = initialState;
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
componentWillPrepare = (props, state) => {
|
|
22
|
-
this.setState(stateFromNewProps(props, state));
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
componentWillMount = () => {
|
|
26
|
-
this.componentWillPrepare(this.props, this.state);
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
componentWillReceiveProps = (props) => {
|
|
30
|
-
this.componentWillPrepare(props, this.state);
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
onChange = (newState) => {
|
|
34
|
-
this.setState(newState);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
render = () => {
|
|
38
|
-
return this.props.render({
|
|
39
|
-
chartData: toChartData(this.props, this.state),
|
|
40
|
-
chartOptions: toChartOptions(this.props, this.state),
|
|
41
|
-
errors: getErrors(this.props, this.state),
|
|
42
|
-
headerProps: getHeaderProps(this.props, this.state),
|
|
43
|
-
footerProps: getFooterProps(this.props, this.state),
|
|
44
|
-
isNonIdealState: isNonIdealState(this.props.data, this.props.type),
|
|
45
|
-
onChange: onChangeProperties(this.props, this.state, this.onChange),
|
|
46
|
-
properties: toProperties(this.props, this.state, this.onChange),
|
|
47
|
-
});
|
|
48
|
-
};
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
RulesDriver.propTypes = {
|
|
52
|
-
data: PropTypes.object,
|
|
53
|
-
dataflow: PropTypes.object,
|
|
54
|
-
display: PropTypes.string,
|
|
55
|
-
formaterIds: PropTypes.object,
|
|
56
|
-
options: PropTypes.object,
|
|
57
|
-
type: PropTypes.string.isRequired,
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
export default RulesDriver;
|