dtable-statistic 4.4.24 → 5.0.0-alpha.2

package/es/stat-editor/stat-settings/basic-chart-settings/y-axis-group-settings.js

@@ -1,366 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _DTableSelect = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
-var _groupbySettings = _interopRequireDefault(require("./groupby-settings"));
-var _summaryMethodSetting = _interopRequireDefault(require("./summary-method-setting"));
-var _numericSummaryItem = _interopRequireDefault(require("../public-setting/numeric-summary-item"));
-var _constants = require("../../../constants");
-const GROUP_TYPES = {
-  COUNT: 'count',
-  SINGLE_NUMERIC_COLUMN: 'single_numeric_column',
-  MULTIPLE_NUMERIC_COLUMN: 'multiple_numeric_column'
-};
-class GroupingSettings extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.getSummaryMethodsOptions = () => {
-      return _constants.SUMMARY_METHOD.map(m => {
-        return {
-          value: m,
-          label: /*#__PURE__*/_react.default.createElement("span", {
-            className: 'select-module select-module-name'
-          }, _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW[m]))
-        };
-      });
-    };
-    this.getDefaultColumnGroupbyType = _ref => {
-      let {
-        y_axis_summary_type
-      } = _ref;
-      if (y_axis_summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
-        return GROUP_TYPES.SINGLE_NUMERIC_COLUMN;
-      }
-      if (y_axis_summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
-        return GROUP_TYPES.SINGLE_NUMERIC_COLUMN;
-      }
-      return GROUP_TYPES.COUNT;
-    };
-    this.getGroupTypeOptions = () => {
-      return [{
-        value: GROUP_TYPES.COUNT,
-        label: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-          className: 'select-module select-module-name'
-        }, _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW['count'])), /*#__PURE__*/_react.default.createElement("div", {
-          className: "summary-type-explanation"
-        }, _reactIntlUniversal.default.get('Count_the_number_of_records_in_each_group')))
-      }, {
-        value: GROUP_TYPES.SINGLE_NUMERIC_COLUMN,
-        label: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-          className: 'select-module select-module-name'
-        }, _reactIntlUniversal.default.get(_constants.STATISTICS_COUNT_SHOW['advanced'])), /*#__PURE__*/_react.default.createElement("div", {
-          className: "summary-type-explanation"
-        }, _reactIntlUniversal.default.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_a_field')))
-      }, {
-        value: GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN,
-        label: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-          className: 'select-module select-module-name'
-        }, _reactIntlUniversal.default.get('Summarize_multiple_fields')), /*#__PURE__*/_react.default.createElement("div", {
-          className: "summary-type-explanation"
-        }, _reactIntlUniversal.default.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_multiple_fields')))
-      }];
-    };
-    this.onChangeGroupType = option => {
-      const value = option.value;
-      if (value === this.state.columnGroupbyType) return;
-      const {
-        statItem
-      } = this.props;
-      let {
-        column_groupby_column_key,
-        column_groupby_date_granularity,
-        column_groupby_geolocation_granularity,
-        column_groupby_multiple_numeric_column,
-        column_groupby_numeric_columns,
-        x_axis_column_key,
-        y_axis_summary_type,
-        y_axis_column_key,
-        y_axis_summary_method
-      } = this.props.statItem || {};
-      if (value === GROUP_TYPES.SINGLE_NUMERIC_COLUMN) {
-        y_axis_summary_type = _constants.SUMMARY_TYPE.ADVANCED;
-        y_axis_column_key = null;
-        column_groupby_multiple_numeric_column = false;
-        column_groupby_numeric_columns = [];
-        column_groupby_date_granularity = null;
-        column_groupby_column_key = null;
-        column_groupby_geolocation_granularity = null;
-        y_axis_summary_method = _constants.SUMMARY_METHOD[0];
-      } else if (value === GROUP_TYPES.COUNT) {
-        column_groupby_multiple_numeric_column = false;
-        column_groupby_numeric_columns = [];
-        const groupColumn = this.props.columnGroupbyColumnsOptions.find(column => {
-          const {
-            key,
-            type
-          } = column;
-          return key !== x_axis_column_key && (type !== 'date' || type !== 'geolocation');
-        }) || {};
-        column_groupby_column_key = groupColumn.key;
-        y_axis_summary_type = _constants.SUMMARY_TYPE.COUNT;
-        y_axis_column_key = null;
-        column_groupby_date_granularity = null;
-        column_groupby_geolocation_granularity = null;
-      } else if (value === GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN) {
-        y_axis_summary_type = _constants.SUMMARY_TYPE.ADVANCED;
-        column_groupby_multiple_numeric_column = true;
-        column_groupby_numeric_columns = [];
-        y_axis_summary_type = _constants.SUMMARY_TYPE.ADVANCED;
-        y_axis_column_key = this.props.numericColumnsOptions.length > 0 ? this.props.numericColumnsOptions[0].value.key : null;
-        column_groupby_date_granularity = null;
-        column_groupby_geolocation_granularity = null;
-        y_axis_summary_method = _constants.SUMMARY_METHOD[0];
-      }
-      let updated = {
-        column_groupby_column_key,
-        column_groupby_date_granularity,
-        column_groupby_geolocation_granularity,
-        column_groupby_multiple_numeric_column,
-        column_groupby_numeric_columns,
-        y_axis_summary_type,
-        y_axis_column_key,
-        y_axis_summary_method
-      };
-      this.setState({
-        columnGroupbyType: value
-      }, () => {
-        this.props.updateStatItem(Object.assign({}, statItem, updated));
-      });
-    };
-    this.getSelectedGroupType = () => {
-      const {
-        statItem
-      } = this.props;
-      const {
-        column_groupby_multiple_numeric_column,
-        y_axis_summary_type
-      } = statItem;
-      if (column_groupby_multiple_numeric_column) {
-        return this.groupTypeOptions.find(item => item.value === GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN);
-      }
-      if (y_axis_summary_type === _constants.SUMMARY_TYPE.COUNT) {
-        return this.groupTypeOptions[0];
-      }
-      if (y_axis_summary_type === _constants.SUMMARY_TYPE.ADVANCED) {
-        return this.groupTypeOptions[1];
-      }
-    };
-    this.onSelectGroupbyColumn = (type, groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity) => {
-      let updated = {
-        column_groupby_column_key: groupbyColumnKey,
-        column_groupby_date_granularity: groupbyDateGranularity,
-        column_groupby_geolocation_granularity: groupbyGeolocationGranularity
-      };
-      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
-    };
-    this.onSelectGroupbyDateGranularity = (type, dateGranularity) => {
-      let updated = {
-        column_groupby_date_granularity: dateGranularity
-      };
-      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
-    };
-    this.onSelectGroupbyGeolocationGranularity = (type, geolocationGranularity) => {
-      let updated = {
-        column_groupby_geolocation_granularity: geolocationGranularity
-      };
-      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
-    };
-    this.updateSummaryMethod = summaryMethod => {
-      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
-        y_axis_summary_method: summaryMethod
-      }));
-    };
-    this.updateSummaryColumn = summaryColumnKey => {
-      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
-        y_axis_column_key: summaryColumnKey
-      }));
-    };
-    this.renderGroupbyNumericColumns = () => {
-      const {
-        statItem
-      } = this.props;
-      let {
-        column_groupby_numeric_columns
-      } = statItem;
-      if (!column_groupby_numeric_columns || !Array.isArray(column_groupby_numeric_columns)) return null;
-      return column_groupby_numeric_columns.map((item, index) => {
-        return /*#__PURE__*/_react.default.createElement(_numericSummaryItem.default, {
-          statItem: statItem,
-          key: "number-column-".concat(index),
-          numericColumnsOptions: this.props.numericColumnsOptions,
-          summaryMethodOptions: this.summaryMethodsOptions,
-          index: index + 1,
-          numericColumnItem: item,
-          onDeleteNumericColumnItem: this.onDeleteNumericColumnItem,
-          onChangeColumnOption: this.onChangeGroupbyNumericColumn,
-          onChangeSummaryMethod: this.onChangeSummaryMethod
-        });
-      });
-    };
-    this.onAddNumericColumn = () => {
-      let {
-        statItem,
-        numericColumnsOptions
-      } = this.props;
-      let {
-        column_groupby_numeric_columns
-      } = statItem || {};
-      let newNumericColumnKey = numericColumnsOptions[0].value.key;
-      if (Array.isArray(column_groupby_numeric_columns)) {
-        column_groupby_numeric_columns = [...column_groupby_numeric_columns];
-        column_groupby_numeric_columns.push({
-          column_key: newNumericColumnKey,
-          summary_method: _constants.SUMMARY_METHOD[0]
-        });
-      } else {
-        column_groupby_numeric_columns = [{
-          column_key: newNumericColumnKey,
-          summary_method: _constants.SUMMARY_METHOD[0]
-        }];
-      }
-      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
-        column_groupby_numeric_columns: [...column_groupby_numeric_columns]
-      }));
-    };
-    this.onChangeGroupbyNumericColumn = (index, columnOption) => {
-      if (index === 0) {
-        this.props.updateStatItem(Object.assign({}, this.props.statItem, {
-          y_axis_column_key: columnOption.value.key
-        }));
-      } else {
-        let {
-          column_groupby_numeric_columns
-        } = this.props.statItem || {};
-        column_groupby_numeric_columns = column_groupby_numeric_columns || [];
-        column_groupby_numeric_columns = [...column_groupby_numeric_columns];
-        let selectedItem = column_groupby_numeric_columns[index - 1];
-        selectedItem = Object.assign({}, selectedItem, {
-          column_key: columnOption.value.key
-        });
-        column_groupby_numeric_columns[index - 1] = selectedItem;
-        this.props.updateStatItem(Object.assign({}, this.props.statItem, {
-          column_groupby_numeric_columns
-        }));
-      }
-    };
-    this.onDeleteNumericColumnItem = index => {
-      let {
-        column_groupby_numeric_columns
-      } = this.props.statItem || {};
-      column_groupby_numeric_columns = column_groupby_numeric_columns || [];
-      column_groupby_numeric_columns = [...column_groupby_numeric_columns];
-      column_groupby_numeric_columns.splice(index - 1, 1);
-      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
-        column_groupby_numeric_columns: [...column_groupby_numeric_columns]
-      }));
-    };
-    this.onChangeSummaryMethod = (index, option) => {
-      if (index === 0) {
-        this.props.updateStatItem(Object.assign({}, this.props.statItem, {
-          y_axis_summary_method: option.value
-        }));
-      } else {
-        let {
-          column_groupby_numeric_columns
-        } = this.props.statItem || {};
-        column_groupby_numeric_columns = column_groupby_numeric_columns || [];
-        column_groupby_numeric_columns = [...column_groupby_numeric_columns];
-        let selectedItem = column_groupby_numeric_columns[index - 1];
-        selectedItem = Object.assign({}, selectedItem, {
-          summary_method: option.value
-        });
-        column_groupby_numeric_columns[index - 1] = selectedItem;
-        this.props.updateStatItem(Object.assign({}, this.props.statItem, {
-          column_groupby_numeric_columns
-        }));
-      }
-    };
-    this.groupTypeOptions = this.getGroupTypeOptions();
-    this.summaryMethodsOptions = this.getSummaryMethodsOptions();
-    this.state = {
-      columnGroupbyType: this.getDefaultColumnGroupbyType(props.statItem)
-    };
-  }
-  render() {
-    let {
-      label,
-      statItem,
-      selectedTable,
-      columnGroupbyColumnsOptions,
-      numericColumnsOptions,
-      dateGranularityOptions,
-      geolocationGranularityOptions
-    } = this.props;
-    const selectedGroupItem = this.getSelectedGroupType();
-    let {
-      y_axis_summary_type,
-      y_axis_column_key,
-      y_axis_summary_method,
-      column_groupby_column_key,
-      column_groupby_date_granularity,
-      column_groupby_geolocation_granularity,
-      column_groupby_multiple_numeric_column
-    } = statItem || {};
-    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "statistic-chart-parameter-item"
-    }, /*#__PURE__*/_react.default.createElement("label", null, label), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
-      classNamePrefix: "statistic-chart-summary-types",
-      value: selectedGroupItem,
-      onChange: this.onChangeGroupType,
-      options: this.groupTypeOptions
-    })), y_axis_summary_type === _constants.SUMMARY_TYPE.ADVANCED && (column_groupby_multiple_numeric_column ? /*#__PURE__*/_react.default.createElement(_numericSummaryItem.default, {
-      statItem: statItem,
-      key: "number-column-".concat(0),
-      numericColumnsOptions: numericColumnsOptions,
-      summaryMethodOptions: this.summaryMethodsOptions,
-      index: 0,
-      numericColumnItem: {
-        column_key: y_axis_column_key,
-        summary_method: y_axis_summary_method
-      },
-      onChangeColumnOption: this.onChangeGroupbyNumericColumn,
-      onChangeSummaryMethod: this.onChangeSummaryMethod
-    }) : /*#__PURE__*/_react.default.createElement(_summaryMethodSetting.default, {
-      statItem: statItem,
-      numericColumnsOptions: numericColumnsOptions,
-      summaryType: y_axis_summary_type,
-      summaryColumnKey: y_axis_column_key,
-      summaryMethod: y_axis_summary_method,
-      getSelectedColumnOption: this.props.getSelectedColumnOption,
-      onChangeSummaryType: this.updatedSummaryType,
-      onSelectSummaryMethod: this.updateSummaryMethod,
-      onSelectNumericColumn: this.updateSummaryColumn,
-      updateStatItem: this.props.updateStatItem
-    })), column_groupby_multiple_numeric_column && /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-      className: "statistics-add-number"
-    }, this.renderGroupbyNumericColumns()), Array.isArray(numericColumnsOptions) && numericColumnsOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-      className: "statistics-add-number-column",
-      onClick: this.onAddNumericColumn
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "number-column-item dtable-font dtable-icon-add-table"
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: "number-column-item add-number-column-description"
-    }, _reactIntlUniversal.default.get('Add_new_numeric_column')))), (!column_groupby_multiple_numeric_column && y_axis_summary_type === _constants.SUMMARY_TYPE.ADVANCED || y_axis_summary_type === _constants.SUMMARY_TYPE.COUNT) && /*#__PURE__*/_react.default.createElement(_groupbySettings.default, {
-      selectedTable: selectedTable,
-      columnsOptions: columnGroupbyColumnsOptions,
-      dateGranularityOptions: dateGranularityOptions,
-      geolocationGranularityOptions: geolocationGranularityOptions,
-      label: _reactIntlUniversal.default.get('Group_by'),
-      groupbyColumnKey: column_groupby_column_key,
-      groupbyDateGranularity: column_groupby_date_granularity,
-      groupbyGeolocationGranularity: column_groupby_geolocation_granularity,
-      getSelectedColumnOption: this.props.getSelectedColumnOption,
-      onSelectGroupbyColumn: this.onSelectGroupbyColumn.bind(this, _constants.GROUPBY_TYPE.COLUMN),
-      onSelectGroupbyDateGranularity: this.onSelectGroupbyDateGranularity.bind(this, _constants.GROUPBY_TYPE.COLUMN),
-      onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, _constants.GROUPBY_TYPE.COLUMN)
-    }));
-  }
-}
-var _default = exports.default = GroupingSettings;

package/es/stat-editor/stat-settings/color-setting/color-group-selector.js

@@ -1,55 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
-var _DTableSelect = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
-var _constants = require("../../../constants");
-class ColorGroupSelector extends _react.Component {
-  constructor(props) {
-    super(props);
-    this.getColorOptions = () => {
-      return _constants.COLOR_OPTIONS.map(colorOption => {
-        return {
-          value: colorOption.name,
-          label: /*#__PURE__*/_react.default.createElement("div", {
-            className: "statistic-color-option d-flex"
-          }, colorOption.exampleColors.map((color, index) => {
-            return /*#__PURE__*/_react.default.createElement("span", {
-              className: "statistic-color-block",
-              key: index,
-              style: {
-                background: "".concat(color)
-              }
-            });
-          }))
-        };
-      });
-    };
-    this.changeColor = option => {
-      const selected = option.value;
-      this.props.onChangeColor(selected);
-    };
-    this.colorOptions = this.getColorOptions();
-  }
-  render() {
-    const {
-      currentColor
-    } = this.props;
-    const currentOption = this.colorOptions.filter(item => item.value === currentColor)[0] || this.colorOptions[0];
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "statistic-chart-parameter-item"
-    }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Color')), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
-      classNamePrefix: 'chart-color',
-      value: currentOption,
-      onChange: this.changeColor,
-      options: this.colorOptions
-    }));
-  }
-}
-var _default = exports.default = ColorGroupSelector;

package/es/stat-editor/stat-settings/color-setting/color-picker.js

@@ -1,130 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactColor = require("react-color");
-require("../../../assets/css/color-picker.css");
-const COVER = {
-  position: 'fixed',
-  top: '0px',
-  right: '0px',
-  bottom: '0px',
-  left: '0px'
-};
-class ColorPicker extends _react.default.PureComponent {
-  constructor(props) {
-    super(props);
-    this.onInputChanged = event => {
-      const value = event.target.value;
-      if (value === this.state.activeColor) return;
-
-      // todo valid color
-      this.updateColor(value);
-      this.setState({
-        activeColor: value
-      });
-    };
-    this.onPickColorToggle = () => {
-      const {
-        readOnly
-      } = this.props;
-      if (readOnly) return;
-      this.setState({
-        isShowColorPicker: !this.state.isShowColorPicker
-      });
-    };
-    this.onPickChanged = color => {
-      if (color.hex === this.state.activeColor) return;
-      this.updateColor(color);
-      this.setState({
-        activeColor: color.hex
-      });
-    };
-    this.updateColor = color => {
-      const {
-        isPickAllColor
-      } = this.props;
-      const colorValue = isPickAllColor ? color : color.hex;
-      this.props.onColorChanged(colorValue);
-    };
-    this.getPopoverStyle = () => {
-      if (!this.colorPickerContainerRef) return {};
-      const {
-        top,
-        height
-      } = this.colorPickerContainerRef.getBoundingClientRect();
-      const {
-        clientHeight
-      } = document.body;
-      const selectTop = top + height;
-      if (clientHeight - selectTop < 247) {
-        // 247: ChromePicker's height
-        return {
-          position: 'absolute',
-          left: 0,
-          bottom: '2.375rem',
-          zIndex: '2'
-        };
-      }
-      return {
-        position: 'absolute',
-        left: 0,
-        zIndex: '2'
-      };
-    };
-    this.state = {
-      isShowColorPicker: false,
-      activeColor: props.activeColor
-    };
-    this.colorPickerContainerRef = null;
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    this.setState({
-      activeColor: nextProps.activeColor
-    });
-  }
-  render() {
-    const {
-      activeColor
-    } = this.state;
-    const isWhiteColor = activeColor && activeColor.toUpperCase() === '#FFFFFF';
-    const {
-      readOnly
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "statistic-chart-color-picker-container",
-      ref: ref => this.colorPickerContainerRef = ref
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "picker-control ".concat(readOnly ? 'readOnly' : '')
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "color-control ".concat(isWhiteColor ? 'white-color' : '', " ").concat(readOnly ? 'readOnly' : ''),
-      onClick: this.onPickColorToggle,
-      style: {
-        background: activeColor
-      }
-    }), /*#__PURE__*/_react.default.createElement("input", {
-      className: "text-control",
-      type: "text",
-      value: activeColor,
-      onChange: this.onInputChanged,
-      readOnly: readOnly
-    })), this.state.isShowColorPicker && /*#__PURE__*/_react.default.createElement("div", {
-      style: this.getPopoverStyle()
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      style: COVER,
-      onClick: this.onPickColorToggle
-    }), /*#__PURE__*/_react.default.createElement(_reactColor.ChromePicker, {
-      disableAlpha: true,
-      color: activeColor,
-      onChange: this.onPickChanged
-    })));
-  }
-}
-ColorPicker.defaultProps = {
-  activeColor: '#000000'
-};
-var _default = exports.default = ColorPicker;