@sis-cc/dotstatsuite-components 8.10.0 → 8.12.0

package/lib/app.js

@@ -6,20 +6,28 @@ var _react2 = _interopRequireDefault(_react);
 
 var _reactDom = require('react-dom');
 
-var _app = require('./viewer/src/app');
+var _app = require('./rules-driver/src/app');
 
 var _app2 = _interopRequireDefault(_app);
 
+var _app3 = require('./viewer/src/app');
+
+var _app4 = _interopRequireDefault(_app3);
+
+var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
+
+var _styles = require('@material-ui/core/styles');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var theme = (0, _styles.createMuiTheme)((0, _dotstatsuiteVisions.sisccTheme)({ rtl: 'ltr' }));
+
 var App = function App() {
   return _react2.default.createElement(
-    _react2.default.Fragment,
-    null,
+    _styles.ThemeProvider,
+    { theme: theme },
     _react2.default.createElement(_app2.default, null)
   );
 };
-//import RulesDriverApp from './rules-driver/src/app';
-
 
 (0, _reactDom.render)(_react2.default.createElement(App, null), document.getElementById('root'));

package/lib/rules/src/chart/getChartOptions.js

@@ -62,7 +62,7 @@ var getAnnotationOptions = function getAnnotationOptions(type, options) {
           return (0, _numeral2.default)(d).format('0,0.[00]');
         } }
     }
-  }), R.cond([[R.always(R.equals(_constants.SCATTER), type), R.mergeRight({ display: 'never' })], [R.always(R.equals(_constants.TIMELINE), type), R.mergeDeepRight({ format: { datapoint: { pattern: '.2f' } } })], [R.T, R.identity]]))(options);
+  }), R.cond([[R.always(R.equals(_constants.SCATTER, type)), R.mergeRight({ display: 'never' })], [R.always(R.equals(_constants.TIMELINE, type)), R.mergeDeepRight({ format: { datapoint: { pattern: '.2f' } } })], [R.T, R.identity]]))(options);
 };
 
 var getChartOptions = exports.getChartOptions = function getChartOptions(data, type, options, tooltipFonts, timeFormats, locale) {

package/lib/rules/src/properties/index.js

@@ -167,6 +167,7 @@ var initialState = exports.initialState = (0, _extends3.default)({
 }, _linear.initialState);
 
 var stateFromNewProps = exports.stateFromNewProps = function stateFromNewProps(props, state) {
+  if (R.isNil(props.data)) return state; // don't reset state
   var focusState = (0, _focus.sampleFocusStateFromNewProps)(props, state);
   var scatterState = (0, _scatter.scatterStateFromNewProps)(props, state);
   var symbolState = (0, _symbol.symbolStateFromNewProps)(props, state);

package/lib/rules-driver/src/app.js

@@ -3,201 +3,150 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = undefined;
 
 var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
 
-var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
 
-var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
-
-var _createClass2 = require('babel-runtime/helpers/createClass');
-
-var _createClass3 = _interopRequireDefault(_createClass2);
-
-var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
-
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
-var _inherits2 = require('babel-runtime/helpers/inherits');
-
-var _inherits3 = _interopRequireDefault(_inherits2);
+var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
 
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _reactDom = require('react-dom');
-
-var _core = require('@blueprintjs/core');
+var _ramda = require('ramda');
 
-require('@blueprintjs/core/dist/blueprint.css');
+var R = _interopRequireWildcard(_ramda);
 
-var _ramda = require('ramda');
+var _dotstatsuiteVisions = require('@sis-cc/dotstatsuite-visions');
 
 var _ = require('./');
 
 var _2 = _interopRequireDefault(_);
 
-var _oecd = require('./mocks/oecd.json');
-
-var _oecd2 = _interopRequireDefault(_oecd);
-
-var _oecdTime = require('./mocks/oecd-time.json');
-
-var _oecdTime2 = _interopRequireDefault(_oecdTime);
-
-var _menu = require('./app/menu');
+var _data = require('./mocks/data1.json');
 
-var _menu2 = _interopRequireDefault(_menu);
+var _data2 = _interopRequireDefault(_data);
 
-var _viewer = require('./app/viewer1');
+var _data3 = require('./mocks/data2.json');
 
-var _viewer2 = _interopRequireDefault(_viewer);
+var _data4 = _interopRequireDefault(_data3);
 
-var _viewer3 = require('./app/viewer2');
+var _3 = require('../../');
 
-var _viewer4 = _interopRequireDefault(_viewer3);
+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 }; }
 
-var App = function (_Component) {
-  (0, _inherits3.default)(App, _Component);
-
-  function App(props) {
-    (0, _classCallCheck3.default)(this, App);
-
-    var _this = (0, _possibleConstructorReturn3.default)(this, (App.__proto__ || (0, _getPrototypeOf2.default)(App)).call(this, props));
-
-    _this.availableDatas = { oecdData: _oecd2.default, oecdTimeData: _oecdTime2.default };
-
-    _this.sources = [{ label: 'oecd', value: 'oecdData', dataflowCode: 'KEI' }, { label: 'oecd quarter', value: 'oecdTimeData', dataflowCode: 'KEI' }];
-
-    _this.chartTypes = [{ label: 'Bar', value: 'BarChart' }, { label: 'Row', value: 'RowChart' }, { label: 'Scatter', value: 'ScatterChart' }, { label: 'Timeline', value: 'TimelineChart' }, { label: 'H Symbol', value: 'HorizontalSymbolChart' }, { label: 'V Symbol', value: 'VerticalSymbolChart' }, { label: 'Stacked Bar', value: 'StackedBarChart' }, { label: 'Non Chart Type', value: 'NonChartType' }];
-
-    _this.viewerOptions = [{ label: 'Old Classic OCC View', value: 'Viewer1' }, { label: 'Alternative Split', value: 'Viewer2' }];
-
-    _this.viewers = {
-      Viewer1: _viewer2.default,
-      Viewer2: _viewer4.default
-    };
-
-    _this.state = {
-      data: _oecd2.default,
-      display: 'label',
-      source: 'oecdData',
-      type: 'BarChart',
-      viewer: 'Viewer1'
-    };
-
-    _this.onChangeData = _this.onChangeData.bind(_this);
-    _this.onChangeType = _this.onChangeType.bind(_this);
-    _this.onChangeViewer = _this.onChangeViewer.bind(_this);
-    _this.onChangeDisplay = _this.onChangeDisplay.bind(_this);
-    return _this;
+var labels = {
+  focus: 'Chart Focus',
+  highlight: 'Highlights',
+  baseline: 'Baseline',
+  select: 'Select',
+  size: 'Chart Size',
+  width: 'Width',
+  height: 'Height',
+  series: 'Chart Series',
+  scatterDimension: 'Scatter Dimension',
+  scatterX: 'Scatter X',
+  scatterY: 'Scatter Y',
+  symbolDimension: 'Symbol Dimension',
+  stackedDimension: 'Stacked Dimension',
+  stackedMode: 'Stacked Mode',
+  stackedModeOptions: {
+    values: 'Values',
+    percent: 'Percent'
+  },
+  axisX: 'Chart X Axis',
+  axisY: 'Chart Y Axis',
+  max: 'Max',
+  min: 'Min',
+  pivot: 'Pivot',
+  step: 'Step',
+  frequency: 'Frequency',
+  freqStep: 'Frequency Step',
+  logo: 'Remove logo',
+  copyright: 'Remove copyright',
+  title: 'Title',
+  subtitle: 'Subtitle',
+  source: 'Source',
+  information: 'Information',
+  reset: 'reset label',
+  uniqFocusOption: 'serie',
+  display: 'Display',
+  displayOptions: {
+    name: 'Name',
+    code: 'Code',
+    both: 'Both'
   }
+};
 
-  (0, _createClass3.default)(App, [{
-    key: 'onChangeData',
-    value: function onChangeData(source) {
-      this.setState({ data: this.availableDatas[source], source: source });
-    }
-  }, {
-    key: 'onChangeType',
-    value: function onChangeType(type) {
-      this.setState({ type: type });
-    }
-  }, {
-    key: 'onChangeViewer',
-    value: function onChangeViewer(viewer) {
-      this.setState({ viewer: viewer });
-    }
-  }, {
-    key: 'onChangeDisplay',
-    value: function onChangeDisplay(display) {
-      this.setState({ display: display });
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _state = this.state,
-          data = _state.data,
-          source = _state.source,
-          type = _state.type,
-          viewer = _state.viewer,
-          display = _state.display;
-
-      var displayOptions = [{ label: 'label', value: 'label' }, { label: 'code', value: 'code' }, { label: 'both', value: 'both' }];
-      var displayProperties = {
-        display: {
-          isActive: true,
-          label: 'Display as',
-          onChange: this.onChangeDisplay,
-          options: displayOptions,
-          value: display
-        }
-      };
-      var dataflowCode = (0, _ramda.prop)('dataflowCode', (0, _ramda.find)((0, _ramda.propEq)('value', this.state.source), this.sources));
-      var Viewer = this.viewers[viewer];
-      return _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement(
-          'nav',
-          { className: 'pt-navbar pt-dark' },
-          _react2.default.createElement(_menu2.default, {
-            align: 'left',
-            items: this.viewerOptions,
-            onChange: this.onChangeViewer,
-            selected: viewer
-          }),
-          _react2.default.createElement('span', { className: 'pt-navbar-divider' }),
-          _react2.default.createElement(_menu2.default, {
-            align: 'right',
-            items: this.chartTypes,
-            onChange: this.onChangeType,
-            selected: type
+var renameKey = R.curry(function (oldKey, newKey, obj) {
+  return R.assoc(newKey, R.prop(oldKey, obj), R.dissoc(oldKey, obj));
+});
+
+var renameProperties = function renameProperties() {
+  var keys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return R.map(R.ifElse(R.pipe(R.prop('id'), R.flip(R.includes)(keys)), renameKey('onChange', 'onSubmit'), R.identity));
+};
+
+var propertiesKeys = ['width', 'height', 'freqStep', 'maxX', 'minX', 'pivotX', 'stepX', 'maxY', 'minY', 'pivotY', 'stepY', 'title', 'subtitle', 'source'];
+
+var App = function App() {
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray3.default)(_useState, 2),
+      toggle = _useState2[0],
+      setToggle = _useState2[1];
+
+  var dataflow = { id: "DF_KEI_21760", name: "Harmonised Unemployment Rate" };
+  var display = 'label';
+  var type = 'BarChart';
+  var props = { dataflow: dataflow, display: display, type: type };
+
+  return _react2.default.createElement(
+    'div',
+    null,
+    _react2.default.createElement(
+      'button',
+      { onClick: function onClick() {
+          return setToggle(function (prev) {
+            return !prev;
+          });
+        }, style: { marginBottom: '10px' } },
+      'Toggle Selection'
+    ),
+    _react2.default.createElement(_2.default, (0, _extends3.default)({
+      data: toggle ? _data2.default : _data4.default
+    }, props, {
+      display: display,
+      type: type,
+      render: function render(_ref) {
+        var properties = _ref.properties,
+            parsedProps = (0, _objectWithoutProperties3.default)(_ref, ['properties']);
+
+        return _react2.default.createElement(
+          'div',
+          null,
+          _react2.default.createElement(_dotstatsuiteVisions.ChartsConfig, {
+            properties: R.pipe(renameProperties(propertiesKeys))(properties),
+            labels: labels
           }),
-          _react2.default.createElement('span', { className: 'pt-navbar-divider' }),
-          _react2.default.createElement(_menu2.default, {
-            align: 'right',
-            iconName: 'import',
-            items: this.sources,
-            onChange: this.onChangeData,
-            selected: source
-          })
-        ),
-        _react2.default.createElement(_2.default, {
-          data: data,
-          dataflowCode: dataflowCode,
-          display: display,
-          options: { base: { height: 500 } },
-          type: type,
-          render: function render(_ref) {
-            var chartData = _ref.chartData,
-                chartOptions = _ref.chartOptions,
-                onChange = _ref.onChange,
-                properties = _ref.properties;
-            return _react2.default.createElement(Viewer, {
-              chartData: chartData,
-              chartOptions: chartOptions,
-              onChange: onChange,
-              properties: (0, _extends3.default)({}, properties, displayProperties),
-              type: type
-            });
-          }
-        })
-      );
-    }
-  }]);
-  return App;
-}(_react.Component);
-
-exports.default = App;
-;
+          _react2.default.createElement(_3.Viewer, (0, _extends3.default)({}, parsedProps, {
+            chartData: R.pick(['series', 'frequency'])(parsedProps.chartData),
+            properties: R.tap(console.log)(R.over(R.lensProp('baseline'), R.omit(['onChange']), properties)),
+            type: 'BarChart',
+            locale: 'en'
+          }))
+        );
+      }
+    }))
+  );
+};
+
+exports.default = App;

package/lib/viewer/src/app/use-case-3.js

@@ -0,0 +1,52 @@
+'use strict';
+
+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 _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _ = require('../');
+
+var _2 = _interopRequireDefault(_);
+
+var _row = require('../../mocks/row');
+
+var _row2 = _interopRequireDefault(_row);
+
+var _stack = require('../../mocks/stack');
+
+var _stack2 = _interopRequireDefault(_stack);
+
+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 }; }
+
+exports.default = function (_ref) {
+  var options = _ref.options;
+
+  return _react2.default.createElement(
+    'div',
+    { style: { display: 'flex' } },
+    _react2.default.createElement(
+      'div',
+      null,
+      _react2.default.createElement(_2.default, (0, _extends3.default)({}, (0, _row2.default)(), { chartOptions: options, type: 'RowChart' }))
+    ),
+    _react2.default.createElement(
+      'div',
+      null,
+      _react2.default.createElement(_2.default, (0, _extends3.default)({}, (0, _stack2.default)(), { chartOptions: options, type: 'StackedBarChart' }))
+    )
+  );
+};

package/lib/viewer/src/app.js

@@ -36,6 +36,10 @@ var _useCase3 = require('./app/use-case-2');
 
 var _useCase4 = _interopRequireDefault(_useCase3);
 
+var _useCase5 = require('./app/use-case-3');
+
+var _useCase6 = _interopRequireDefault(_useCase5);
+
 var _nodataRes = require('./app/nodata-res');
 
 var _nodataRes2 = _interopRequireDefault(_nodataRes);
@@ -117,6 +121,11 @@ exports.default = function () {
       _react2.default.createElement(
         _core.Tabs2,
         { renderActiveTabPanelOnly: false },
+        _react2.default.createElement(_core.Tab2, {
+          id: 'uc3',
+          title: _react2.default.createElement(AppTab, { label: 'fluid width', iconName: 'fullscreen' }),
+          panel: _react2.default.createElement(_useCase6.default, { isRtl: isRtl, config: config, style: style, options: options })
+        }),
         _react2.default.createElement(_core.Tab2, {
           id: 'uc1',
           title: _react2.default.createElement(AppTab, { label: 'full screen resizable chart', iconName: 'fullscreen' }),

package/lib/viewer/src/chartUtils/series.js

@@ -26,9 +26,7 @@ var isFocused = function isFocused(obj) {
 
 var sampleFilterSeries = function sampleFilterSeries(series) {
   return R.map(function (serie) {
-    var _datapoints = filter(serie.datapoints, function (dp) {
-      return isFocused(dp);
-    });
+    var _datapoints = R.filter(isFocused, serie.datapoints);
     return (0, _extends3.default)({}, serie, { datapoints: _datapoints });
   }, series);
 };
@@ -41,7 +39,7 @@ exports.default = function (series, type, options) {
   var minWidth = R.path(['base', 'minDisplayWidth'], options);
   var minHeight = R.path(['base', 'minDisplayHeight'], options);
   var filtered = void 0;
-  if (type === _constants.HSYMBOL) {
+  if (type === _constants.H_SYMBOL) {
     if (height < minHeight) {
       filtered = sampleFilterSeries(series);
       return R.isEmpty(filtered[0].datapoints) ? series : filtered;
@@ -51,7 +49,7 @@ exports.default = function (series, type, options) {
       filtered = lineFilterSeries(series);
       return R.isEmpty(filtered) ? series : filtered;
     }
-  } else if (type === _constants.VSYMBOL) {
+  } else if (type === _constants.V_SYMBOL) {
     if (width < minWidth) {
       filtered = sampleFilterSeries(series);
       return R.isEmpty(filtered[0].datapoints) ? series : filtered;

package/lib/viewer/src/index.js

@@ -87,7 +87,7 @@ var ViewContent = function ViewContent(_ref2) {
       rest = (0, _objectWithoutProperties3.default)(_ref2, ['loading', 'noData', 'type', 'width', 'errorMessage']);
 
   if (loading) return _react2.default.createElement(_dotstatsuiteVisions.Loading, { message: loading });
-
+  if (!width) return _react2.default.createElement(_dotstatsuiteVisions.Loading, { message: loading });
   if (errorMessage) return _react2.default.createElement(_dotstatsuiteVisions.NoData, { message: errorMessage });
 
   if (type === 'table') {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sis-cc/dotstatsuite-components",
   "description": "Set components based on React.",
-  "version": "8.10.0",
+  "version": "8.12.0",
   "main": "lib/index.js",
   "author": "OECD",
   "license": "MIT",
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@react-hook/size": "^2.1.1",
-    "@sis-cc/dotstatsuite-d3-charts": "^7.1.0",
+    "@sis-cc/dotstatsuite-d3-charts": "^7.3.0",
     "@sis-cc/dotstatsuite-sdmxjs": "^4.5.2",
     "@sis-cc/dotstatsuite-visions": "^5.15.1",
     "date-fns": "^1.30.1",

package/src/app.js

@@ -1,13 +1,18 @@
 import React from 'react';
 import { render } from 'react-dom';
-//import RulesDriverApp from './rules-driver/src/app';
+import RulesDriverApp from './rules-driver/src/app';
 import ViewerApp from './viewer/src/app';
+import { sisccTheme } from '@sis-cc/dotstatsuite-visions';
+import { ThemeProvider } from '@material-ui/core/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
+
+const theme = createMuiTheme(sisccTheme({ rtl: 'ltr' }));
 
 const App = () => (
-  <React.Fragment>
-    {/*<RulesDriverApp />*/}
-    <ViewerApp />
-  </React.Fragment>
+  <ThemeProvider theme={theme}>
+    <RulesDriverApp />
+    {/* <ViewerApp /> */}
+  </ThemeProvider>
 );
 
 render(<App />, document.getElementById('root'));

package/src/rules/src/chart/getChartOptions.js

@@ -49,11 +49,11 @@ const getAnnotationOptions = (type, options) => R.pipe(
   }),
   R.cond([
     [
-      R.always(R.equals(SCATTER), type),
+      R.always(R.equals(SCATTER, type)),
       R.mergeRight({ display: 'never' })
     ],
     [
-      R.always(R.equals(TIMELINE), type),
+      R.always(R.equals(TIMELINE, type)),
       R.mergeDeepRight({ format: { datapoint: { pattern: '.2f' } } })
     ],
     [R.T, R.identity]

package/src/rules/src/properties/index.js

@@ -205,6 +205,7 @@ export const initialState = {
 };
 
 export const stateFromNewProps = (props, state) => {
+  if (R.isNil(props.data)) return state; // don't reset state
   const focusState = sampleFocusStateFromNewProps(props, state);
   const scatterState = scatterStateFromNewProps(props, state);
   const symbolState = symbolStateFromNewProps(props, state);