@sis-cc/dotstatsuite-visions 7.22.6 → 7.23.0

package/es/Mode/Mode.js

@@ -0,0 +1,89 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as R from 'ramda';
+import { makeStyles } from '@material-ui/core/styles';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
+import { Tooltip } from '../';
+
+var useStyles = makeStyles(function (theme) {
+  return {
+    title: _extends({
+      padding: 0
+    }, R.pathOr({}, ['mixins', 'share', 'title'], theme)),
+    label: theme.typography.body2,
+    icon: {
+      marginLeft: theme.spacing(0.5)
+    }
+  };
+});
+
+var Warning = function Warning(_ref) {
+  var title = _ref.title,
+      children = _ref.children;
+
+  var classes = useStyles();
+  return React.createElement(
+    Tooltip,
+    { className: classes.icon, title: title, variant: 'light' },
+    children
+  );
+};
+
+Warning.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: PropTypes.string,
+  children: PropTypes.node
+} : {};
+
+var Mode = function Mode(_ref2) {
+  var changeMode = _ref2.changeMode,
+      mode = _ref2.mode,
+      _ref2$modes = _ref2.modes,
+      modes = _ref2$modes === undefined ? [] : _ref2$modes,
+      children = _ref2.children;
+
+  var classes = useStyles();
+  return React.createElement(
+    RadioGroup,
+    { onChange: function onChange(e) {
+        return changeMode(e.target.value);
+      }, value: mode },
+    R.map(function (_ref3) {
+      var label = _ref3.label,
+          value = _ref3.value,
+          popperLabel = _ref3.popperLabel;
+      return React.createElement(FormControlLabel, {
+        classes: { label: classes.label },
+        key: value,
+        control: React.createElement(Radio, { variant: 'outlined', color: 'primary' }),
+        label: React.createElement(
+          'span',
+          null,
+          label,
+          popperLabel && React.createElement(
+            Warning,
+            { title: popperLabel },
+            children
+          )
+        ),
+        value: value
+      });
+    })(modes)
+  );
+};
+
+Mode.propTypes = process.env.NODE_ENV !== "production" ? {
+  changeMode: PropTypes.func,
+  children: PropTypes.node,
+  mode: PropTypes.string,
+  modes: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    value: PropTypes.string,
+    popperLabel: PropTypes.string
+  }))
+} : {};
+
+export default Mode;

package/es/Mode/index.js

@@ -0,0 +1,24 @@
+/**
+ * NoData component is a basic placeholder to use when there is nothing to display.
+ *
+ * @memberOf VISIONS
+ * @name Mode
+ * @tag component
+ * @api public
+ * @props
+ * Mode.propTypes = {
+ * changeMode: PropTypes.func,
+ * mode: PropTypes.string,
+ * modes: PropTypes.arrayOf(
+ *  PropTypes.shape({
+ *    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *    value: PropTypes.string,
+ *    popperLabel: PropTypes.string,
+ *  }),
+ * ,
+ * }
+ * @theme
+ * // no custom theme there
+ */
+
+export { default } from './Mode';

package/es/PeriodPicker/PeriodPicker.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
+import dateFns from 'date-fns';
 import Grid from '@material-ui/core/Grid';
 import { numeralFormat } from './lib';
 import { Select } from '../';
@@ -37,10 +38,6 @@ var Period = function Period(_ref) {
   var startDate = R.head(period);
   var endDate = R.last(period);
 
-  var startPeriodAvailableBoundaries = [R.head(availableBoundaries), R.defaultTo(R.last(availableBoundaries), endDate)];
-  var endPeriodAvailableBoundaries = [R.defaultTo(R.head(availableBoundaries), startDate), R.last(availableBoundaries)];
-  var availableRanges = [getRange(startPeriodAvailableBoundaries, startDate), getRange(endPeriodAvailableBoundaries, endDate)];
-
   var startPeriodBoundaries = [R.head(boundaries), R.defaultTo(R.last(boundaries), endDate)];
   var endPeriodBoundaries = [R.defaultTo(R.head(boundaries), startDate), R.last(boundaries)];
   var ranges = [getRange(startPeriodBoundaries, startDate), getRange(endPeriodBoundaries, endDate)];
@@ -50,6 +47,22 @@ var Period = function Period(_ref) {
   var onChangeFrequency = function onChangeFrequency(value) {
     if (R.is(Function, changeFrequency)) return changeFrequency(value);
   };
+  var _getIsDisabled = function _getIsDisabled(getter) {
+    return function (value, id) {
+      var _getDate;
+
+      var fn = R.prop(getter)({ start: R.head, end: R.last });
+      if (!isValidNumber(Number(value)) || R.length(availableBoundaries) !== 2) {
+        return false;
+      }
+      var dateValue = getPeriodValue(fn(destructuringDates));
+      var date = getDate(frequency, dateValue, (_getDate = {}, _getDate[id] = Number(value), _getDate), getter === 'end');
+      var availableStart = availableBoundaries[0],
+          availableEnd = availableBoundaries[1];
+
+      return dateFns.compareAsc(date, availableStart) === -1 || dateFns.compareDesc(date, availableEnd) === -1;
+    };
+  };
   var onChangePeriod = function onChangePeriod(getter, id) {
     return function (value) {
       var fn = R.prop(getter)({ start: R.head, end: R.last });
@@ -98,7 +111,8 @@ var Period = function Period(_ref) {
           layout = _ref3.layout,
           label = _ref3.label,
           value = _ref3.value,
-          testId = _ref3.testId;
+          testId = _ref3.testId,
+          getIsDisabled = _ref3.getIsDisabled;
       return React.createElement(
         Grid,
         { key: getter, item: true, xs: 12, 'data-testid': testId },
@@ -127,8 +141,7 @@ var Period = function Period(_ref) {
               R.map(function (row) {
                 return R.map(function (_ref4) {
                   var id = _ref4.id,
-                      values = _ref4.values,
-                      availableValues = _ref4.availableValues;
+                      values = _ref4.values;
 
                   var selectedValue = R.isNil(R.prop(id)(value)) ? R.head(values) : R.prop(id)(value);
                   return React.createElement(
@@ -149,7 +162,7 @@ var Period = function Period(_ref) {
                         return {
                           id: id,
                           value: option,
-                          disabled: !R.isEmpty(availableValues) ? !R.includes(option, availableValues) : false,
+                          disabled: getIsDisabled(option, id),
                           label: R.ifElse(R.is(String), R.identity, R.prop(id)(numeralFormat))(option)
                         };
                       })(values)
@@ -164,15 +177,17 @@ var Period = function Period(_ref) {
     })([{
       getter: 'start',
       testId: 'period-picker-start-period-test-id',
-      layout: getLayout(frequency, R.head(ranges), R.head(availableRanges)),
+      layout: getLayout(frequency, R.head(ranges)),
       label: R.prop('start')(labels),
-      value: getPeriodValue(R.head(destructuringDates))
+      value: getPeriodValue(R.head(destructuringDates)),
+      getIsDisabled: _getIsDisabled('start')
     }, {
       getter: 'end',
       testId: 'period-picker-end-period-test-id',
-      layout: getLayout(frequency, R.last(ranges), R.last(availableRanges)),
+      layout: getLayout(frequency, R.last(ranges), /*R.last(availableRanges)*/[]),
       label: R.prop('end')(labels),
-      value: getPeriodValue(R.last(destructuringDates))
+      value: getPeriodValue(R.last(destructuringDates)),
+      getIsDisabled: _getIsDisabled('end')
     }])
   );
 };

package/es/PeriodPicker/constants.js

@@ -22,15 +22,15 @@ export var HOUR = 'hour';
 export var MINUTE = 'minute';
 
 export var layoutFrequencies = {
-  S: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: SEMESTERS, availableValues: SEMESTERS, id: SEMESTER }]],
-  A: [[{ values: YEARS, availableValues: YEARS, id: YEAR }]],
-  Q: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: QUARTERS, availableValues: QUARTERS, id: QUARTER }]],
-  M: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: MONTHS, availableValues: YEARS, id: MONTH }]],
-  W: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: WEEKS, availableValues: WEEKS, id: WEEK }]],
-  B: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: WEEKS, availableValues: WEEKS, id: WEEK }]],
-  D: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: MONTHS, availableValues: MONTHS, id: MONTH }, { values: DAYS, availableValues: DAYS, id: DAY }]],
-  H: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: MONTHS, availableValues: MONTHS, id: MONTH }, { values: DAYS, availableValues: DAYS, id: DAY }], [{ values: FULL_HOURS, availableValues: FULL_HOURS, id: FULL_HOUR }]],
-  N: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: MONTHS, availableValues: WEEKS, id: MONTH }, { values: DAYS, availableValues: DAYS, id: DAY }], [{ values: HOURS, availableValues: HOURS, id: HOUR }, { values: MINUTES, availableValues: MINUTES, id: MINUTE }]]
+  S: [[{ values: YEARS, id: YEAR }, { values: SEMESTERS, id: SEMESTER }]],
+  A: [[{ values: YEARS, id: YEAR }]],
+  Q: [[{ values: YEARS, id: YEAR }, { values: QUARTERS, id: QUARTER }]],
+  M: [[{ values: YEARS, id: YEAR }, { values: MONTHS, id: MONTH }]],
+  W: [[{ values: YEARS, id: YEAR }, { values: WEEKS, id: WEEK }]],
+  B: [[{ values: YEARS, id: YEAR }, { values: WEEKS, id: WEEK }]],
+  D: [[{ values: YEARS, id: YEAR }, { values: MONTHS, id: MONTH }, { values: DAYS, id: DAY }]],
+  H: [[{ values: YEARS, id: YEAR }, { values: MONTHS, id: MONTH }, { values: DAYS, id: DAY }], [{ values: FULL_HOURS, id: FULL_HOUR }]],
+  N: [[{ values: YEARS, id: YEAR }, { values: MONTHS, id: MONTH }, { values: DAYS, id: DAY }], [{ values: HOURS, id: HOUR }, { values: MINUTES, id: MINUTE }]]
 };
 
 export var defaultOutputValues = (_defaultOutputValues = {}, _defaultOutputValues[YEARS] = '----', _defaultOutputValues[SEMESTERS] = '-', _defaultOutputValues[QUARTERS] = '-', _defaultOutputValues[MONTHS] = '--', _defaultOutputValues[WEEKS] = '--', _defaultOutputValues[DAYS] = '--', _defaultOutputValues[FULL_HOURS] = '--:00', _defaultOutputValues[HOURS] = '--', _defaultOutputValues[MINUTES] = '--', _defaultOutputValues);

package/es/PeriodPicker/lib.js

@@ -133,15 +133,12 @@ export var getFrequencyOptions = function getFrequencyOptions(frequencyoptions,
   return options;
 };
 
-export var getLayout = function getLayout(type, range, availableRange) {
+export var getLayout = function getLayout(type, range) {
   var layoutPeriods = R.propOr([], type)(layoutFrequencies);
   var hasYear = R.complement(R.isEmpty)(getRanges(range.years));
   return R.map(R.reduce(function (acc, period) {
-    if (hasYear) return R.append(R.evolve({ values: setRange(range), availableValues: setRange(availableRange) }, period), acc);
-    return R.append(R.evolve({
-      values: R.pipe(R.flip(R.prop)(defaultOutputValues), R.flip(R.append)([])),
-      availableValues: R.pipe(R.flip(R.prop)(defaultOutputValues), R.flip(R.append)([]))
-    }, period), acc);
+    if (hasYear) return R.append(R.evolve({ values: setRange(range) }, period), acc);
+    return R.append(R.evolve({ values: R.pipe(R.flip(R.prop)(defaultOutputValues), R.flip(R.append)([])) }, period), acc);
   }, []))(layoutPeriods);
 };
 

package/es/index.js

@@ -24,6 +24,7 @@ export { default as LabelDivider } from './LabelDivider';
 export { default as Loading } from './Loading';
 export { default as Logo } from './Logo';
 export { default as NoData } from './NoData';
+export { default as Mode } from './Mode';
 export { default as Pagination } from './Pagination';
 export { default as PeriodPicker } from './PeriodPicker';
 export { spotlightScopeListEngine, reduceChildren } from './utils';

package/lib/Mode/Mode.js

@@ -0,0 +1,117 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _styles = require('@material-ui/core/styles');
+
+var _RadioGroup = require('@material-ui/core/RadioGroup');
+
+var _RadioGroup2 = _interopRequireDefault(_RadioGroup);
+
+var _FormControlLabel = require('@material-ui/core/FormControlLabel');
+
+var _FormControlLabel2 = _interopRequireDefault(_FormControlLabel);
+
+var _Radio = require('@material-ui/core/Radio');
+
+var _Radio2 = _interopRequireDefault(_Radio);
+
+var _ = require('../');
+
+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 useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    title: _extends({
+      padding: 0
+    }, R.pathOr({}, ['mixins', 'share', 'title'], theme)),
+    label: theme.typography.body2,
+    icon: {
+      marginLeft: theme.spacing(0.5)
+    }
+  };
+});
+
+var Warning = function Warning(_ref) {
+  var title = _ref.title,
+      children = _ref.children;
+
+  var classes = useStyles();
+  return _react2.default.createElement(
+    _.Tooltip,
+    { className: classes.icon, title: title, variant: 'light' },
+    children
+  );
+};
+
+Warning.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: _propTypes2.default.string,
+  children: _propTypes2.default.node
+} : {};
+
+var Mode = function Mode(_ref2) {
+  var changeMode = _ref2.changeMode,
+      mode = _ref2.mode,
+      _ref2$modes = _ref2.modes,
+      modes = _ref2$modes === undefined ? [] : _ref2$modes,
+      children = _ref2.children;
+
+  var classes = useStyles();
+  return _react2.default.createElement(
+    _RadioGroup2.default,
+    { onChange: function onChange(e) {
+        return changeMode(e.target.value);
+      }, value: mode },
+    R.map(function (_ref3) {
+      var label = _ref3.label,
+          value = _ref3.value,
+          popperLabel = _ref3.popperLabel;
+      return _react2.default.createElement(_FormControlLabel2.default, {
+        classes: { label: classes.label },
+        key: value,
+        control: _react2.default.createElement(_Radio2.default, { variant: 'outlined', color: 'primary' }),
+        label: _react2.default.createElement(
+          'span',
+          null,
+          label,
+          popperLabel && _react2.default.createElement(
+            Warning,
+            { title: popperLabel },
+            children
+          )
+        ),
+        value: value
+      });
+    })(modes)
+  );
+};
+
+Mode.propTypes = process.env.NODE_ENV !== "production" ? {
+  changeMode: _propTypes2.default.func,
+  children: _propTypes2.default.node,
+  mode: _propTypes2.default.string,
+  modes: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+    value: _propTypes2.default.string,
+    popperLabel: _propTypes2.default.string
+  }))
+} : {};
+
+exports.default = Mode;
+module.exports = exports['default'];

package/lib/Mode/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _Mode = require('./Mode');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Mode).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = exports['default'];

package/lib/PeriodPicker/PeriodPicker.js

@@ -14,6 +14,10 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _dateFns = require('date-fns');
+
+var _dateFns2 = _interopRequireDefault(_dateFns);
+
 var _Grid = require('@material-ui/core/Grid');
 
 var _Grid2 = _interopRequireDefault(_Grid);
@@ -62,10 +66,6 @@ var Period = function Period(_ref) {
   var startDate = R.head(period);
   var endDate = R.last(period);
 
-  var startPeriodAvailableBoundaries = [R.head(availableBoundaries), R.defaultTo(R.last(availableBoundaries), endDate)];
-  var endPeriodAvailableBoundaries = [R.defaultTo(R.head(availableBoundaries), startDate), R.last(availableBoundaries)];
-  var availableRanges = [(0, _lib.getRange)(startPeriodAvailableBoundaries, startDate), (0, _lib.getRange)(endPeriodAvailableBoundaries, endDate)];
-
   var startPeriodBoundaries = [R.head(boundaries), R.defaultTo(R.last(boundaries), endDate)];
   var endPeriodBoundaries = [R.defaultTo(R.head(boundaries), startDate), R.last(boundaries)];
   var ranges = [(0, _lib.getRange)(startPeriodBoundaries, startDate), (0, _lib.getRange)(endPeriodBoundaries, endDate)];
@@ -75,6 +75,22 @@ var Period = function Period(_ref) {
   var onChangeFrequency = function onChangeFrequency(value) {
     if (R.is(Function, changeFrequency)) return changeFrequency(value);
   };
+  var _getIsDisabled = function _getIsDisabled(getter) {
+    return function (value, id) {
+      var _getDate;
+
+      var fn = R.prop(getter)({ start: R.head, end: R.last });
+      if (!(0, _lib.isValidNumber)(Number(value)) || R.length(availableBoundaries) !== 2) {
+        return false;
+      }
+      var dateValue = (0, _lib.getPeriodValue)(fn(destructuringDates));
+      var date = (0, _lib.getDate)(frequency, dateValue, (_getDate = {}, _getDate[id] = Number(value), _getDate), getter === 'end');
+      var availableStart = availableBoundaries[0],
+          availableEnd = availableBoundaries[1];
+
+      return _dateFns2.default.compareAsc(date, availableStart) === -1 || _dateFns2.default.compareDesc(date, availableEnd) === -1;
+    };
+  };
   var onChangePeriod = function onChangePeriod(getter, id) {
     return function (value) {
       var fn = R.prop(getter)({ start: R.head, end: R.last });
@@ -123,7 +139,8 @@ var Period = function Period(_ref) {
           layout = _ref3.layout,
           label = _ref3.label,
           value = _ref3.value,
-          testId = _ref3.testId;
+          testId = _ref3.testId,
+          getIsDisabled = _ref3.getIsDisabled;
       return _react2.default.createElement(
         _Grid2.default,
         { key: getter, item: true, xs: 12, 'data-testid': testId },
@@ -152,8 +169,7 @@ var Period = function Period(_ref) {
               R.map(function (row) {
                 return R.map(function (_ref4) {
                   var id = _ref4.id,
-                      values = _ref4.values,
-                      availableValues = _ref4.availableValues;
+                      values = _ref4.values;
 
                   var selectedValue = R.isNil(R.prop(id)(value)) ? R.head(values) : R.prop(id)(value);
                   return _react2.default.createElement(
@@ -174,7 +190,7 @@ var Period = function Period(_ref) {
                         return {
                           id: id,
                           value: option,
-                          disabled: !R.isEmpty(availableValues) ? !R.includes(option, availableValues) : false,
+                          disabled: getIsDisabled(option, id),
                           label: R.ifElse(R.is(String), R.identity, R.prop(id)(_lib.numeralFormat))(option)
                         };
                       })(values)
@@ -189,15 +205,17 @@ var Period = function Period(_ref) {
     })([{
       getter: 'start',
       testId: 'period-picker-start-period-test-id',
-      layout: (0, _lib.getLayout)(frequency, R.head(ranges), R.head(availableRanges)),
+      layout: (0, _lib.getLayout)(frequency, R.head(ranges)),
       label: R.prop('start')(labels),
-      value: (0, _lib.getPeriodValue)(R.head(destructuringDates))
+      value: (0, _lib.getPeriodValue)(R.head(destructuringDates)),
+      getIsDisabled: _getIsDisabled('start')
     }, {
       getter: 'end',
       testId: 'period-picker-end-period-test-id',
-      layout: (0, _lib.getLayout)(frequency, R.last(ranges), R.last(availableRanges)),
+      layout: (0, _lib.getLayout)(frequency, R.last(ranges), /*R.last(availableRanges)*/[]),
       label: R.prop('end')(labels),
-      value: (0, _lib.getPeriodValue)(R.last(destructuringDates))
+      value: (0, _lib.getPeriodValue)(R.last(destructuringDates)),
+      getIsDisabled: _getIsDisabled('end')
     }])
   );
 };

package/lib/PeriodPicker/constants.js

@@ -26,15 +26,15 @@ var HOUR = exports.HOUR = 'hour';
 var MINUTE = exports.MINUTE = 'minute';
 
 var layoutFrequencies = exports.layoutFrequencies = {
-  S: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: SEMESTERS, availableValues: SEMESTERS, id: SEMESTER }]],
-  A: [[{ values: YEARS, availableValues: YEARS, id: YEAR }]],
-  Q: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: QUARTERS, availableValues: QUARTERS, id: QUARTER }]],
-  M: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: MONTHS, availableValues: YEARS, id: MONTH }]],
-  W: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: WEEKS, availableValues: WEEKS, id: WEEK }]],
-  B: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: WEEKS, availableValues: WEEKS, id: WEEK }]],
-  D: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: MONTHS, availableValues: MONTHS, id: MONTH }, { values: DAYS, availableValues: DAYS, id: DAY }]],
-  H: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: MONTHS, availableValues: MONTHS, id: MONTH }, { values: DAYS, availableValues: DAYS, id: DAY }], [{ values: FULL_HOURS, availableValues: FULL_HOURS, id: FULL_HOUR }]],
-  N: [[{ values: YEARS, availableValues: YEARS, id: YEAR }, { values: MONTHS, availableValues: WEEKS, id: MONTH }, { values: DAYS, availableValues: DAYS, id: DAY }], [{ values: HOURS, availableValues: HOURS, id: HOUR }, { values: MINUTES, availableValues: MINUTES, id: MINUTE }]]
+  S: [[{ values: YEARS, id: YEAR }, { values: SEMESTERS, id: SEMESTER }]],
+  A: [[{ values: YEARS, id: YEAR }]],
+  Q: [[{ values: YEARS, id: YEAR }, { values: QUARTERS, id: QUARTER }]],
+  M: [[{ values: YEARS, id: YEAR }, { values: MONTHS, id: MONTH }]],
+  W: [[{ values: YEARS, id: YEAR }, { values: WEEKS, id: WEEK }]],
+  B: [[{ values: YEARS, id: YEAR }, { values: WEEKS, id: WEEK }]],
+  D: [[{ values: YEARS, id: YEAR }, { values: MONTHS, id: MONTH }, { values: DAYS, id: DAY }]],
+  H: [[{ values: YEARS, id: YEAR }, { values: MONTHS, id: MONTH }, { values: DAYS, id: DAY }], [{ values: FULL_HOURS, id: FULL_HOUR }]],
+  N: [[{ values: YEARS, id: YEAR }, { values: MONTHS, id: MONTH }, { values: DAYS, id: DAY }], [{ values: HOURS, id: HOUR }, { values: MINUTES, id: MINUTE }]]
 };
 
 var defaultOutputValues = exports.defaultOutputValues = (_defaultOutputValues = {}, _defaultOutputValues[YEARS] = '----', _defaultOutputValues[SEMESTERS] = '-', _defaultOutputValues[QUARTERS] = '-', _defaultOutputValues[MONTHS] = '--', _defaultOutputValues[WEEKS] = '--', _defaultOutputValues[DAYS] = '--', _defaultOutputValues[FULL_HOURS] = '--:00', _defaultOutputValues[HOURS] = '--', _defaultOutputValues[MINUTES] = '--', _defaultOutputValues);

package/lib/PeriodPicker/lib.js

@@ -151,15 +151,12 @@ var getFrequencyOptions = exports.getFrequencyOptions = function getFrequencyOpt
   return options;
 };
 
-var getLayout = exports.getLayout = function getLayout(type, range, availableRange) {
+var getLayout = exports.getLayout = function getLayout(type, range) {
   var layoutPeriods = R.propOr([], type)(_constants.layoutFrequencies);
   var hasYear = R.complement(R.isEmpty)(getRanges(range.years));
   return R.map(R.reduce(function (acc, period) {
-    if (hasYear) return R.append(R.evolve({ values: setRange(range), availableValues: setRange(availableRange) }, period), acc);
-    return R.append(R.evolve({
-      values: R.pipe(R.flip(R.prop)(_constants.defaultOutputValues), R.flip(R.append)([])),
-      availableValues: R.pipe(R.flip(R.prop)(_constants.defaultOutputValues), R.flip(R.append)([]))
-    }, period), acc);
+    if (hasYear) return R.append(R.evolve({ values: setRange(range) }, period), acc);
+    return R.append(R.evolve({ values: R.pipe(R.flip(R.prop)(_constants.defaultOutputValues), R.flip(R.append)([])) }, period), acc);
   }, []))(layoutPeriods);
 };
 

package/lib/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 exports.__esModule = true;
-exports.T4_BREAKPOINTS = exports.innerPalette = exports.sisccTheme = exports.HierarchicalFilter = exports.AdvancedFilterDialog = exports.VirtualizedTree = exports.AuthDialog = exports.VerticalButton = exports.UserRightForm = exports.Tooltip = exports.ToggleButton = exports.Tag = exports.TablePreview = exports.TableLayout = exports.Cell = exports.TableHtml5 = exports.TableHeader = exports.TableFooter = exports.Spotlight = exports.SisccFooter = exports.Share = exports.Select = exports.ScopeList = exports.reduceChildren = exports.spotlightScopeListEngine = exports.PeriodPicker = exports.Pagination = exports.NoData = exports.Logo = exports.Loading = exports.LabelDivider = exports.InputNumber = exports.Input = exports.ExpansionPanel = exports.DataFooter = exports.DataHeader = exports.Dataflow = exports.DataEdit = exports.Contact = exports.CollapsibleTree = exports.CollapseButtons = exports.GroupedChips = exports.DeleteAllChip = exports.ChartsConfig = exports.Button = exports.Breadcrumbs = exports.ApiQueries = exports.Alert = undefined;
+exports.T4_BREAKPOINTS = exports.innerPalette = exports.sisccTheme = exports.HierarchicalFilter = exports.AdvancedFilterDialog = exports.VirtualizedTree = exports.AuthDialog = exports.VerticalButton = exports.UserRightForm = exports.Tooltip = exports.ToggleButton = exports.Tag = exports.TablePreview = exports.TableLayout = exports.Cell = exports.TableHtml5 = exports.TableHeader = exports.TableFooter = exports.Spotlight = exports.SisccFooter = exports.Share = exports.Select = exports.ScopeList = exports.reduceChildren = exports.spotlightScopeListEngine = exports.PeriodPicker = exports.Pagination = exports.Mode = exports.NoData = exports.Logo = exports.Loading = exports.LabelDivider = exports.InputNumber = exports.Input = exports.ExpansionPanel = exports.DataFooter = exports.DataHeader = exports.Dataflow = exports.DataEdit = exports.Contact = exports.CollapsibleTree = exports.CollapseButtons = exports.GroupedChips = exports.DeleteAllChip = exports.ChartsConfig = exports.Button = exports.Breadcrumbs = exports.ApiQueries = exports.Alert = undefined;
 
 var _Alert = require('./Alert');
 
@@ -201,6 +201,15 @@ Object.defineProperty(exports, 'NoData', {
   }
 });
 
+var _Mode = require('./Mode');
+
+Object.defineProperty(exports, 'Mode', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Mode).default;
+  }
+});
+
 var _Pagination = require('./Pagination');
 
 Object.defineProperty(exports, 'Pagination', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "7.22.6",
+  "version": "7.23.0",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",
@@ -206,6 +206,7 @@
     ]
   },
   "prettier": {
+    "endOfLine": "lf",
     "useTabs": false,
     "printWidth": 100,
     "tabWidth": 2,