dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,366 @@
+"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

@@ -0,0 +1,55 @@
+"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

@@ -0,0 +1,130 @@
+"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;