@sis-cc/dotstatsuite-visions 7.17.13 → 7.18.0

package/es/ChartsConfig/ChartsConfig.js

@@ -1,136 +1,395 @@
 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, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import Grid from '@material-ui/core/Grid';
-import Divider from '@material-ui/core/Divider';
 import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
 import ArrowUpwardIcon from '@material-ui/icons/ArrowUpward';
-import ButtonGroup from './ButtonGroup';
-import FocusConfig from './Focus';
-import SizeConfig from './Size';
-import SeriesConfig from './Series';
-import FrequencyConfig from './Frequency';
-import AxisConfig from './Axis';
+import Title from './Title';
+import { Button, InputAdornment, Typography } from '@material-ui/core';
+import useFocusOptions from './useFocusOptions';
+import Select from '../Select';
+import { extractMultipleValue, getValue } from './utils';
+import useDimensionOptions from './useDimensionOptions';
+import InputProxy from './InputProxy';
+import Proxy from './Proxy';
+import useAxisOptions from './useAxisOptions';
+import { makeStyles } from '@material-ui/core/styles';
 import DataEdit from '../DataEdit';
-import { isActivePanel, seriesProperties, isActive } from './utils';
-import { useStyles } from './styles';
-import { withBlank } from '../utils';
 
-var ChartsConfig = function ChartsConfig(_ref) {
-  var labels = _ref.labels,
-      properties = _ref.properties;
+export var useStyles = makeStyles(function (theme) {
+  return {
+    greyVariant: {
+      backgroundColor: theme.palette.secondary.dark,
+      color: theme.palette.grey[600]
+    }
+  };
+});
+
+var ChartConfig = function ChartConfig(_ref) {
+  var _ref$labels = _ref.labels,
+      labels = _ref$labels === undefined ? {} : _ref$labels,
+      _ref$properties = _ref.properties,
+      properties = _ref$properties === undefined ? {} : _ref$properties;
 
   var classes = useStyles();
+
+  var _useDimensionOptions = useDimensionOptions(properties),
+      dimensions = _useDimensionOptions[0];
+
+  var xKeys = useAxisOptions(properties, 'X');
+  var yKeys = useAxisOptions(properties, 'Y');
+
+  var highlight = properties.highlight,
+      baseline = properties.baseline;
+
+  var _useFocusOptions = useFocusOptions(highlight, labels),
+      highlightOptions = _useFocusOptions[0],
+      xhighlightOptions = _useFocusOptions[1];
+
+  var _useFocusOptions2 = useFocusOptions(baseline, labels),
+      baselineOptions = _useFocusOptions2[0],
+      xbaselineOptions = _useFocusOptions2[1];
+
+  var _properties$stackedMo = properties.stackedMode,
+      stackedMode = _properties$stackedMo === undefined ? {} : _properties$stackedMo;
+  var _stackedMode$options = stackedMode.options,
+      stackedModeOptions = _stackedMode$options === undefined ? [] : _stackedMode$options;
+  var _properties$displayMo = properties.displayMode,
+      displayMode = _properties$displayMo === undefined ? {} : _properties$displayMo;
+  var _displayMode$options = displayMode.options,
+      displayModeOptions = _displayMode$options === undefined ? [] : _displayMode$options;
+
+
+  var dKeys = ['dimensions', 'stackedDimension', 'scatterDimension', 'symbolDimension'];
+  var eKeys = ['title', 'subtitle', 'source', 'logo', 'copyright'];
+
+  if (R.isEmpty(properties)) return null;
+
   return React.createElement(
     Grid,
-    { 'data-testid': 'charts-config-test-id', spacing: 2, container: true, className: classes.root },
-    isActivePanel(seriesProperties, properties) && React.createElement(
-      Grid,
-      {
-        item: true,
-        xs: 12,
-        sm: 12,
-        md: 12,
-        lg: isActivePanel(['highlight', 'baseline', 'width', 'height'], properties) ? 6 : 12
-      },
-      React.createElement(SeriesConfig, { labels: labels, properties: R.pick(seriesProperties, properties) })
-    ),
-    isActivePanel(['highlight', 'baseline', 'width', 'height'], properties) && React.createElement(
-      Grid,
-      {
-        item: true,
-        xs: 12,
-        sm: 12,
-        md: 12,
-        lg: isActivePanel(seriesProperties, properties) ? 6 : 12
-      },
+    { container: true, spacing: 3, 'data-testid': 'charts-config-test-id' },
+    React.createElement(
+      Proxy,
+      { keys: dKeys, properties: properties },
       React.createElement(
         Grid,
-        { container: true, spacing: 2 },
-        isActivePanel(['highlight', 'baseline'], properties) && React.createElement(FocusConfig, {
-          baseline: R.prop('baseline', properties),
-          highlight: R.prop('highlight', properties),
-          labels: labels
-        }),
-        isActivePanel(['width', 'height'], properties) && React.createElement(SizeConfig, {
-          height: R.prop('height', properties),
-          labels: labels,
-          width: R.prop('width', properties)
-        })
+        { item: true, xs: 12, container: true, spacing: 2 },
+        React.createElement(
+          Grid,
+          { item: true, xs: 12, container: true },
+          React.createElement(
+            Grid,
+            { item: true, xs: 12 },
+            React.createElement(Title, { label: labels.series })
+          ),
+          React.createElement(
+            Grid,
+            { item: true, xs: 12 },
+            React.createElement(
+              Grid,
+              { container: true, spacing: 1 },
+              React.createElement(
+                Proxy,
+                { keys: ['stackedMode'], properties: properties },
+                React.createElement(
+                  Grid,
+                  { item: true, container: true, spacing: 1, alignItems: 'center', style: { minWidth: 320 } },
+                  React.createElement(
+                    Grid,
+                    { item: true, xs: true },
+                    React.createElement(
+                      Typography,
+                      { variant: 'body2' },
+                      labels.stackedMode
+                    )
+                  ),
+                  R.map(function (option) {
+                    return React.createElement(
+                      Grid,
+                      { item: true, key: option.value },
+                      React.createElement(
+                        Button,
+                        {
+                          variant: option.value === stackedMode.value ? 'contained' : 'outlined',
+                          onClick: function onClick() {
+                            return stackedMode.onChange(option.value);
+                          },
+                          color: 'primary'
+                        },
+                        React.createElement(
+                          Typography,
+                          { variant: 'body2' },
+                          R.path(['stackedModeOptions', option.value], labels)
+                        )
+                      )
+                    );
+                  }, stackedModeOptions)
+                )
+              ),
+              R.map(function (_ref2) {
+                var key = _ref2[0],
+                    dimension = _ref2[1];
+                return React.createElement(
+                  Grid,
+                  { item: true, xs: 12, style: { minWidth: 320 }, key: key },
+                  React.createElement(Select, _extends({}, dimension, {
+                    onChange: dimension.onChange,
+                    label: R.prop(key, labels),
+                    value: getValue(dimension.value),
+                    items: dimension.options
+                  }))
+                );
+              }, dimensions)
+            )
+          )
+        )
       )
     ),
     React.createElement(
       Grid,
-      { container: true, spacing: 2 },
-      isActivePanel(['maxX', 'minX', 'pivotX', 'stepX'], properties) && React.createElement(
-        Grid,
-        {
-          item: true,
-          xs: 12,
-          sm: 12,
-          md: 12,
-          lg: isActivePanel(['maxY', 'minY', 'pivotY', 'stepY'], properties) ? 6 : 12
-        },
-        React.createElement(AxisConfig, {
-          icon: React.createElement(ArrowForwardIcon, null),
-          label: R.prop('axisX', labels),
-          labels: labels,
-          max: R.prop('maxX', properties),
-          min: R.prop('minX', properties),
-          pivot: R.prop('pivotX', properties),
-          step: R.prop('stepX', properties)
-        })
+      { item: true, xs: 12, container: true, spacing: 2 },
+      React.createElement(
+        Proxy,
+        { keys: ['highlight', 'baseline'], properties: properties },
+        React.createElement(
+          Grid,
+          { item: true, xs: 12, md: 8, container: true, alignContent: 'flex-start' },
+          React.createElement(
+            Grid,
+            { item: true, xs: 12 },
+            React.createElement(Title, { label: labels.focus })
+          ),
+          React.createElement(
+            Grid,
+            { item: true, xs: 12 },
+            React.createElement(
+              Grid,
+              { container: true, spacing: 1 },
+              React.createElement(
+                Grid,
+                { item: true, xs: 12, style: { minWidth: 320 } },
+                React.createElement(Select, _extends({}, highlight, {
+                  onChange: function onChange(ids) {
+                    return highlight.onChange(R.props(ids, xhighlightOptions));
+                  },
+                  value: extractMultipleValue(highlight),
+                  items: highlightOptions,
+                  isMultiple: true,
+                  isClearable: true,
+                  label: R.prop('highlight', labels),
+                  placeholder: R.prop('select', labels),
+                  optionsKey: 'highlight'
+                }))
+              ),
+              React.createElement(
+                Grid,
+                { item: true, xs: 12, style: { minWidth: 320 } },
+                React.createElement(Select, _extends({}, baseline, {
+                  onChange: function onChange(id) {
+                    return baseline.onChange(R.pipe(R.props([id]), R.without(baseline.value))(xbaselineOptions));
+                  },
+                  value: extractMultipleValue(baseline),
+                  items: baselineOptions,
+                  isClearable: true,
+                  label: R.prop('baseline', labels),
+                  placeholder: R.prop('select', labels),
+                  optionsKey: 'baseline'
+                }))
+              )
+            )
+          )
+        )
       ),
-      isActivePanel(['freqStep'], properties) && React.createElement(
+      React.createElement(
         Grid,
-        {
-          item: true,
-          xs: 12,
-          sm: 12,
-          md: 12,
-          lg: isActivePanel(['maxY', 'minY', 'pivotY', 'stepY'], properties) ? 6 : 12
-        },
-        React.createElement(FrequencyConfig, {
-          freqStep: R.prop('freqStep', properties),
-          icon: React.createElement(ArrowForwardIcon, null),
-          labels: labels
-        })
+        { item: true, xs: 12, md: true, container: true, alignContent: 'flex-start' },
+        React.createElement(
+          Grid,
+          { item: true, xs: 12 },
+          React.createElement(Title, { label: labels.size })
+        ),
+        React.createElement(
+          Grid,
+          { item: true, xs: 12 },
+          React.createElement(
+            Grid,
+            { container: true, spacing: 1 },
+            React.createElement(InputProxy, {
+              pkey: 'width',
+              labels: labels,
+              properties: properties,
+              InputProps: {
+                endAdornment: React.createElement(
+                  InputAdornment,
+                  { position: 'end' },
+                  'px'
+                )
+              }
+            }),
+            React.createElement(InputProxy, {
+              pkey: 'height',
+              labels: labels,
+              properties: properties,
+              InputProps: {
+                endAdornment: React.createElement(
+                  InputAdornment,
+                  { position: 'end' },
+                  'px'
+                )
+              }
+            })
+          )
+        )
+      )
+    ),
+    React.createElement(
+      Grid,
+      { item: true, xs: 12, container: true, spacing: 2 },
+      React.createElement(
+        Proxy,
+        { keys: xKeys, properties: properties },
+        React.createElement(
+          Grid,
+          { item: true, xs: 12, md: true, container: true, className: classes.greyVariant },
+          React.createElement(
+            Grid,
+            { item: true, xs: 12 },
+            React.createElement(Title, { label: labels.axisX, icon: React.createElement(ArrowForwardIcon, null) })
+          ),
+          React.createElement(
+            Grid,
+            { item: true, xs: 12 },
+            React.createElement(
+              Grid,
+              { container: true, spacing: 1 },
+              R.map(function (key) {
+                return React.createElement(InputProxy, {
+                  pkey: key,
+                  mkey: R.init(key),
+                  key: key,
+                  sm: 12 / R.length(xKeys),
+                  labels: labels,
+                  properties: properties
+                });
+              }, xKeys)
+            )
+          )
+        )
       ),
-      isActivePanel(['maxY', 'minY', 'pivotY', 'stepY'], properties) && React.createElement(
-        Grid,
-        {
-          item: true,
-          xs: 12,
-          sm: 12,
-          md: 12,
-          lg: isActivePanel(['maxX', 'minX', 'pivotX', 'stepX', 'freqStep'], properties) ? 6 : 12
-        },
-        React.createElement(AxisConfig, {
-          icon: React.createElement(ArrowUpwardIcon, null),
-          label: R.prop('axisY', labels),
-          labels: labels,
-          max: R.prop('maxY', properties),
-          min: R.prop('minY', properties),
-          pivot: R.prop('pivotY', properties),
-          step: R.prop('stepY', properties)
-        })
+      React.createElement(
+        Proxy,
+        { keys: ['freqStep'], properties: properties },
+        React.createElement(
+          Grid,
+          { item: true, xs: 12, container: true, className: classes.greyVariant },
+          React.createElement(
+            Grid,
+            { item: true, xs: 12 },
+            React.createElement(Title, { label: labels.axisX, icon: React.createElement(ArrowForwardIcon, null) })
+          ),
+          React.createElement(
+            Grid,
+            { item: true, xs: 12 },
+            React.createElement(
+              Grid,
+              { container: true, spacing: 1 },
+              React.createElement(InputProxy, { pkey: 'freqStep', labels: labels, properties: properties })
+            )
+          )
+        )
       ),
-      isActive(R.prop('display', properties)) && React.createElement(
+      React.createElement(
+        Proxy,
+        { keys: yKeys, properties: properties },
+        React.createElement(
+          Grid,
+          { item: true, xs: 12, md: true, container: true, className: classes.greyVariant },
+          React.createElement(
+            Grid,
+            { item: true, xs: 12 },
+            React.createElement(Title, { label: labels.axisY, icon: React.createElement(ArrowUpwardIcon, null) })
+          ),
+          React.createElement(
+            Grid,
+            { item: true, xs: 12 },
+            React.createElement(
+              Grid,
+              { container: true, spacing: 1 },
+              R.map(function (key) {
+                return React.createElement(InputProxy, {
+                  pkey: key,
+                  mkey: R.init(key),
+                  key: key,
+                  sm: 12 / R.length(yKeys),
+                  labels: labels,
+                  properties: properties
+                });
+              }, yKeys)
+            )
+          )
+        )
+      )
+    ),
+    React.createElement(
+      Proxy,
+      { keys: eKeys, properties: properties },
+      React.createElement(
         Grid,
-        { item: true, xs: 12, className: classes.gridItemSpace },
-        React.createElement(ButtonGroup, _extends({}, R.prop('display', properties), {
-          label: R.prop('display', labels),
-          labels: R.prop('displayOptions', labels)
-        }))
+        { item: true, xs: 12, container: true, spacing: 2 },
+        React.createElement(
+          Grid,
+          { item: true, xs: 12, container: true },
+          React.createElement(DataEdit, { labels: labels, properties: properties })
+        )
       )
     ),
-    isActivePanel(['title', 'subtitle', 'source', 'logo', 'copyright'], properties) && React.createElement(
-      Fragment,
-      null,
-      React.createElement(Divider, { className: classes.divider }),
-      React.createElement(DataEdit, { labels: labels, properties: properties })
+    React.createElement(
+      Proxy,
+      { keys: ['displayMode'], properties: properties },
+      React.createElement(
+        Grid,
+        { item: true, xs: 12, container: true, spacing: 2 },
+        React.createElement(
+          Grid,
+          { item: true, xs: 12, container: true },
+          React.createElement(
+            Grid,
+            { item: true, container: true, spacing: 1, alignItems: 'center', style: { minWidth: 320 } },
+            React.createElement(
+              Grid,
+              { item: true, xs: true },
+              React.createElement(
+                Typography,
+                { variant: 'body2' },
+                labels.display
+              )
+            ),
+            R.map(function (option) {
+              return React.createElement(
+                Grid,
+                { item: true, key: option.value },
+                React.createElement(
+                  Button,
+                  {
+                    variant: option.value === displayMode.value ? 'contained' : 'outlined',
+                    onClick: function onClick() {
+                      return displayMode.onChange(option.value);
+                    },
+                    color: 'primary'
+                  },
+                  React.createElement(
+                    Typography,
+                    { variant: 'body2' },
+                    R.path(['displayOptions', option.value], labels)
+                  )
+                )
+              );
+            }, displayModeOptions)
+          )
+        )
+      )
     )
   );
 };
@@ -170,7 +429,7 @@ var multiSelectableInputProptypes = PropTypes.shape({
   }))
 });
 
-ChartsConfig.propTypes = process.env.NODE_ENV !== "production" ? {
+ChartConfig.propTypes = process.env.NODE_ENV !== "production" ? {
   labels: PropTypes.object,
   properties: PropTypes.shape({
     highlight: multiSelectableInputProptypes,
@@ -206,11 +465,4 @@ ChartsConfig.propTypes = process.env.NODE_ENV !== "production" ? {
   })
 } : {};
 
-export default withBlank(function (_ref2) {
-  var isBlank = _ref2.isBlank,
-      _ref2$properties = _ref2.properties,
-      properties = _ref2$properties === undefined ? {} : _ref2$properties;
-  return {
-    isBlank: R.or(isBlank, R.isEmpty(properties))
-  };
-})(ChartsConfig);
+export default ChartConfig;

package/es/ChartsConfig/Input.js

@@ -125,6 +125,7 @@ var MyInput = function MyInput(_ref3) {
     },
     onBlur: handleBlur,
     margin: 'dense',
+    size: 'small',
     variant: 'outlined',
     onKeyPress: onEnterLabel,
     onChange: handleChange,

package/es/ChartsConfig/InputProxy.js

@@ -0,0 +1,54 @@
+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 { Grid } from '@material-ui/core';
+import Input from './Input';
+
+var InputProxy = function InputProxy(_ref) {
+  var _ref$minWidth = _ref.minWidth,
+      minWidth = _ref$minWidth === undefined ? 220 : _ref$minWidth,
+      _ref$properties = _ref.properties,
+      properties = _ref$properties === undefined ? {} : _ref$properties,
+      _ref$labels = _ref.labels,
+      labels = _ref$labels === undefined ? {} : _ref$labels,
+      pkey = _ref.pkey,
+      mkey = _ref.mkey,
+      _ref$xs = _ref.xs,
+      xs = _ref$xs === undefined ? 12 : _ref$xs,
+      _ref$sm = _ref.sm,
+      sm = _ref$sm === undefined ? 12 : _ref$sm,
+      _ref$InputProps = _ref.InputProps,
+      InputProps = _ref$InputProps === undefined ? {} : _ref$InputProps;
+
+  if (R.isNil(pkey)) return null;
+  if (!R.has(pkey, properties)) return null;
+
+  var prop = R.propOr({}, pkey, properties);
+
+  return React.createElement(
+    Grid,
+    { item: true, xs: xs, sm: sm, style: { minWidth: minWidth } },
+    React.createElement(Input, _extends({}, prop, {
+      value: R.when(R.isNil, R.always(''))(prop.value),
+      type: 'number',
+      label: R.prop(mkey || pkey, labels),
+      fullWidth: true,
+      InputProps: R.mergeRight({ endAdornment: null }, InputProps)
+    }))
+  );
+};
+
+InputProxy.propTypes = process.env.NODE_ENV !== "production" ? {
+  minWidth: PropTypes.number,
+  properties: PropTypes.object,
+  labels: PropTypes.object,
+  pkey: PropTypes.string,
+  mkey: PropTypes.string,
+  xs: PropTypes.number,
+  sm: PropTypes.number,
+  InputProps: PropTypes.object
+} : {};
+
+export default InputProxy;

package/es/ChartsConfig/Proxy.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import * as R from 'ramda';
+
+var Proxy = function Proxy(_ref) {
+  var keys = _ref.keys,
+      properties = _ref.properties,
+      children = _ref.children;
+
+  if (!R.any(R.flip(R.has)(properties), keys)) return null;
+
+  return children;
+};
+
+Proxy.propTypes = {
+  children: PropTypes.node,
+  keys: PropTypes.array,
+  properties: PropTypes.object
+};
+
+export default Proxy;

package/es/ChartsConfig/Title.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as R from 'ramda';
+import { makeStyles } from '@material-ui/core/styles';
+import { Grid, Typography } from '@material-ui/core';
+
+export var useStyles = makeStyles(function () {
+  return {
+    title: {
+      fontFamily: 'inherit'
+    }
+  };
+});
+
+var Title = function Title(_ref) {
+  var icon = _ref.icon,
+      label = _ref.label;
+
+  var classes = useStyles();
+
+  return React.createElement(
+    Grid,
+    { container: true },
+    !R.isNil(icon) && icon,
+    React.createElement(
+      Typography,
+      { variant: 'h6', className: classes.title, inline: 'true' },
+      label
+    )
+  );
+};
+
+Title.propTypes = process.env.NODE_ENV !== "production" ? {
+  label: PropTypes.string,
+  icon: PropTypes.node
+} : {};
+
+export default Title;

package/es/ChartsConfig/index.js

@@ -203,7 +203,7 @@
  *    mixins: {
  *      chartsConfig: {
  *        root: {
- *          // font, color of the complete composant execpt "Axis" part
+ *          // font, color of the complete component except "Axis" part
  *        }
  *      }
  *    }

package/es/ChartsConfig/useAxisOptions.js

@@ -0,0 +1,9 @@
+import * as R from 'ramda';
+
+var useAxisOptions = function useAxisOptions(properties, suffix) {
+  var keys = ['min' + suffix, 'max' + suffix, 'pivot' + suffix, 'step' + suffix];
+
+  return R.pipe(R.pick(keys), R.keys)(properties);
+};
+
+export default useAxisOptions;

package/es/ChartsConfig/useDimensionOptions.js

@@ -0,0 +1,12 @@
+import { useMemo } from 'react';
+import * as R from 'ramda';
+
+var useDimensionOptions = function useDimensionOptions(properties) {
+  var dimensions = useMemo(function () {
+    return R.pipe(R.pick(['scatterDimension', 'scatterX', 'scatterY', 'symbolDimension', 'stackedDimension']), R.toPairs)(properties);
+  }, [properties]);
+
+  return [dimensions];
+};
+
+export default useDimensionOptions;