dtable-statistic 4.4.24-alpha.9 → 5.0.0

package/es/stat-editor/stat-settings/advance-chart-settings/world-map-settings.js

@@ -0,0 +1,109 @@
+"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 _baseSettings = _interopRequireDefault(require("../public-setting/base-settings"));
+var _columnSettings = _interopRequireDefault(require("../public-setting/column-settings"));
+var _summarySettings = _interopRequireDefault(require("./summary-settings"));
+var _mapSetting = _interopRequireDefault(require("./style-setting/map-setting"));
+var _columnUtils = require("../../../utils/column-utils");
+class WordMapSettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.getColumns = columns => {
+      if (!Array.isArray(columns) || columns.length === 0) return [];
+      return columns.filter(column => (0, _columnUtils.isWorldMapColumn)(column));
+    };
+    this.getSelectedTextColumnOption = () => {
+      return this.textColumnsOptions.find(option => option.value.key === this.props.statItem.column);
+    };
+    this.onSelectTextColumn = option => {
+      const {
+        column
+      } = this.props.statItem;
+      const new_column = option.value.key;
+      if (new_column === column) return;
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        column: new_column
+      }));
+    };
+    const {
+      getColumnsOptions,
+      columns: _columns
+    } = props;
+    const textColumns = this.getColumns(_columns);
+    this.textColumnsOptions = getColumnsOptions(textColumns);
+  }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.selectedTableId !== this.props.selectedTableId) {
+      const {
+        getColumnsOptions,
+        columns
+      } = nextProps;
+      const textColumns = this.getColumns(columns);
+      this.textColumnsOptions = getColumnsOptions(textColumns);
+    }
+  }
+  render() {
+    const {
+      getTables,
+      getViews,
+      settingType,
+      selectedTableId,
+      statItem,
+      getColumnsOptions,
+      numericColumns
+    } = this.props;
+    const selectedTextColumnOption = this.getSelectedTextColumnOption();
+    const {
+      view_id: selectedViewId
+    } = statItem;
+    if (settingType === 'style') {
+      return /*#__PURE__*/_react.default.createElement(_mapSetting.default, {
+        statItem: statItem,
+        currentColor: statItem.data_color,
+        onChangeColor: this.props.onChangeColor,
+        updateStatItem: this.props.updateStatItem
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseSettings.default, {
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      selectedViewId: selectedViewId,
+      getTables: getTables,
+      getViews: getViews,
+      getTableById: this.props.getTableById,
+      getConvertedChart: this.props.getConvertedChart,
+      updateStatItem: this.props.updateStatItem
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Location_field')), /*#__PURE__*/_react.default.createElement(_columnSettings.default, {
+      columnsOptions: this.textColumnsOptions,
+      selectedColumnOption: selectedTextColumnOption,
+      onChangeSelectedColumn: this.onSelectTextColumn
+    })), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_summarySettings.default, {
+      label: _reactIntlUniversal.default.get('Summary_method'),
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      numericColumns: numericColumns,
+      summaryType: statItem.summary_type,
+      summaryMethod: statItem.summary_method,
+      summaryColumn: statItem.summary_column,
+      getColumnsOptions: getColumnsOptions,
+      onChangeSummaryType: this.props.onChangeSummaryType,
+      onSelectSummaryColumn: this.props.onSelectSummaryColumn,
+      onSelectSummaryMethod: this.props.onSelectSummaryMethod
+    }));
+  }
+}
+var _default = exports.default = WordMapSettings;

package/es/stat-editor/stat-settings/basic-chart-settings/advance-bar-chart-settings.js

@@ -0,0 +1,153 @@
+"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 _baseSettings = _interopRequireDefault(require("../public-setting/base-settings"));
+var _dataSortSetting = _interopRequireDefault(require("../public-setting/data-sort-setting"));
+var _barChartStyleSetting = _interopRequireDefault(require("./style-setting/bar-chart-style-setting"));
+var _groupbySettings = _interopRequireDefault(require("./groupby-settings"));
+var _yAxisGroupSettings = _interopRequireDefault(require("./y-axis-group-settings"));
+var _constants = require("../../../constants");
+class AdvanceBarChartSettings extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.onSelectGroupbyColumn = (type, groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity) => {
+      let updated = {
+        x_axis_column_key: groupbyColumnKey,
+        x_axis_date_granularity: groupbyDateGranularity,
+        x_axis_geolocation_granularity: groupbyGeolocationGranularity
+      };
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
+    };
+    this.onSelectGroupbyDateGranularity = (type, dateGranularity) => {
+      let updated = {
+        x_axis_date_granularity: dateGranularity
+      };
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
+    };
+    this.onSelectGroupbyGeolocationGranularity = (type, geolocationGranularity) => {
+      let updated = {
+        x_axis_geolocation_granularity: geolocationGranularity
+      };
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
+    };
+    this.updatedSummaryType = (summaryType, summaryColumnKey, summaryMethod) => {
+      let {
+        statItem
+      } = this.props;
+      let updated = {
+        y_axis_summary_type: summaryType,
+        y_axis_column_key: summaryColumnKey,
+        y_axis_summary_method: summaryMethod
+      };
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    this.updateSummaryColumn = summaryColumnKey => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        y_axis_column_key: summaryColumnKey
+      }));
+    };
+    this.updateSummaryMethod = summaryMethod => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        y_axis_summary_method: summaryMethod
+      }));
+    };
+  }
+  render() {
+    let {
+      getTables,
+      getViews,
+      getTableById,
+      statItem,
+      labelColorConfigs,
+      eventBus,
+      selectedTable,
+      generalColumnsOptions,
+      numericColumnsOptions,
+      dateGranularityOptions,
+      geolocationGranularityOptions,
+      renderIncludeEmpty,
+      settingType,
+      columnGroupbyColumnsOptions
+    } = this.props;
+    let {
+      type,
+      table_id: selectedTableId,
+      view_id: selectedViewId,
+      x_axis_column_key,
+      x_axis_date_granularity,
+      x_axis_geolocation_granularity,
+      y_axis_summary_type,
+      y_axis_column_key,
+      y_axis_summary_method
+    } = statItem || {};
+    if (settingType === 'style') {
+      return /*#__PURE__*/_react.default.createElement(_barChartStyleSetting.default, {
+        showRangeSetting: type !== _constants.STAT_TYPE.BAR_STACK,
+        statItem: statItem,
+        labelColorConfigs: labelColorConfigs,
+        eventBus: eventBus,
+        getTableById: getTableById,
+        updateStatItem: this.props.updateStatItem
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseSettings.default, {
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      selectedViewId: selectedViewId,
+      getTables: getTables,
+      getViews: getViews,
+      getTableById: this.props.getTableById,
+      getConvertedChart: this.props.getConvertedChart,
+      updateStatItem: this.props.updateStatItem
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_groupbySettings.default, {
+      selectedTable: selectedTable,
+      columnsOptions: generalColumnsOptions,
+      dateGranularityOptions: dateGranularityOptions,
+      geolocationGranularityOptions: geolocationGranularityOptions,
+      label: _reactIntlUniversal.default.get('X-axis'),
+      groupbyColumnKey: x_axis_column_key,
+      groupbyDateGranularity: x_axis_date_granularity,
+      groupbyGeolocationGranularity: x_axis_geolocation_granularity,
+      getSelectedColumnOption: this.props.getSelectedColumnOption,
+      onSelectGroupbyColumn: this.onSelectGroupbyColumn.bind(this, _constants.GROUPBY_TYPE.ROW),
+      onSelectGroupbyDateGranularity: this.onSelectGroupbyDateGranularity.bind(this, _constants.GROUPBY_TYPE.ROW),
+      onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, _constants.GROUPBY_TYPE.ROW),
+      renderIncludeEmpty: renderIncludeEmpty
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_yAxisGroupSettings.default, {
+      label: _reactIntlUniversal.default.get('Y-axis'),
+      statItem: statItem,
+      selectedTable: selectedTable,
+      summaryType: y_axis_summary_type,
+      summaryColumnKey: y_axis_column_key,
+      summaryMethod: y_axis_summary_method,
+      columnGroupbyColumnsOptions: columnGroupbyColumnsOptions,
+      dateGranularityOptions: dateGranularityOptions,
+      geolocationGranularityOptions: geolocationGranularityOptions,
+      numericColumnsOptions: numericColumnsOptions,
+      getSelectedColumnOption: this.props.getSelectedColumnOption,
+      onChangeColumnGroupbyType: this.updateColumnGroupby,
+      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),
+      updatedColumnGroupbyNumericColumns: this.updatedColumnGroupbyNumericColumns,
+      updateStatItem: this.props.updateStatItem
+    }), type === _constants.STAT_TYPE.BAR_STACK && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_dataSortSetting.default, {
+      statItem: statItem,
+      updateStatItem: this.props.updateStatItem
+    })));
+  }
+}
+var _default = exports.default = AdvanceBarChartSettings;

package/es/stat-editor/stat-settings/basic-chart-settings/bar-settings.js

@@ -0,0 +1,144 @@
+"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 _baseSettings = _interopRequireDefault(require("../public-setting/base-settings"));
+var _barChartStyleSetting = _interopRequireDefault(require("./style-setting/bar-chart-style-setting"));
+var _groupbySettings = _interopRequireDefault(require("./groupby-settings"));
+var _summarySettings = _interopRequireDefault(require("./summary-settings"));
+var _dataSortSetting = _interopRequireDefault(require("../public-setting/data-sort-setting"));
+var _constants = require("../../../constants");
+class BarSettings extends _react.Component {
+  constructor() {
+    super(...arguments);
+    this.onSelectGroupbyColumn = (type, groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity) => {
+      let updated = {
+        x_axis_column_key: groupbyColumnKey,
+        x_axis_date_granularity: groupbyDateGranularity,
+        x_axis_geolocation_granularity: groupbyGeolocationGranularity
+      };
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
+    };
+    this.onSelectGroupbyDateGranularity = (type, dateGranularity) => {
+      let updated = {
+        x_axis_date_granularity: dateGranularity
+      };
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
+    };
+    this.onSelectGroupbyGeolocationGranularity = (type, geolocationGranularity) => {
+      let updated = {
+        x_axis_geolocation_granularity: geolocationGranularity
+      };
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
+    };
+    this.updatedSummaryType = (summaryType, summaryColumnKey, summaryMethod) => {
+      let {
+        statItem
+      } = this.props;
+      let updated = {
+        y_axis_summary_type: summaryType,
+        y_axis_column_key: summaryColumnKey,
+        y_axis_summary_method: summaryMethod
+      };
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    this.updateSummaryColumn = summaryColumnKey => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        y_axis_column_key: summaryColumnKey
+      }));
+    };
+    this.updateSummaryMethod = summaryMethod => {
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, {
+        y_axis_summary_method: summaryMethod
+      }));
+    };
+  }
+  render() {
+    let {
+      getTables,
+      getViews,
+      getTableById,
+      statItem,
+      labelColorConfigs,
+      eventBus,
+      selectedTable,
+      generalColumnsOptions,
+      numericColumnsOptions,
+      dateGranularityOptions,
+      geolocationGranularityOptions,
+      renderIncludeEmpty,
+      settingType
+    } = this.props;
+    let {
+      table_id: selectedTableId,
+      view_id: selectedViewId,
+      x_axis_column_key,
+      x_axis_date_granularity,
+      x_axis_geolocation_granularity,
+      y_axis_summary_type,
+      y_axis_column_key,
+      y_axis_summary_method
+    } = statItem || {};
+    if (settingType === 'style') {
+      return /*#__PURE__*/_react.default.createElement(_barChartStyleSetting.default, {
+        statItem: statItem,
+        labelColorConfigs: labelColorConfigs,
+        eventBus: eventBus,
+        getTableById: getTableById,
+        updateStatItem: this.props.updateStatItem
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseSettings.default, {
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      selectedViewId: selectedViewId,
+      getTables: getTables,
+      getViews: getViews,
+      getTableById: this.props.getTableById,
+      getConvertedChart: this.props.getConvertedChart,
+      updateStatItem: this.props.updateStatItem
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_groupbySettings.default, {
+      selectedTable: selectedTable,
+      columnsOptions: generalColumnsOptions,
+      dateGranularityOptions: dateGranularityOptions,
+      geolocationGranularityOptions: geolocationGranularityOptions,
+      label: _reactIntlUniversal.default.get('X-axis'),
+      placeholder: _reactIntlUniversal.default.get('Select_column'),
+      groupbyColumnKey: x_axis_column_key,
+      groupbyDateGranularity: x_axis_date_granularity,
+      groupbyGeolocationGranularity: x_axis_geolocation_granularity,
+      getSelectedColumnOption: this.props.getSelectedColumnOption,
+      onSelectGroupbyColumn: this.onSelectGroupbyColumn.bind(this, _constants.GROUPBY_TYPE.ROW),
+      onSelectGroupbyDateGranularity: this.onSelectGroupbyDateGranularity.bind(this, _constants.GROUPBY_TYPE.ROW),
+      onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, _constants.GROUPBY_TYPE.ROW),
+      renderIncludeEmpty: renderIncludeEmpty
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_summarySettings.default, {
+      statItem: statItem,
+      label: _reactIntlUniversal.default.get('Y-axis'),
+      numericColumnsOptions: numericColumnsOptions,
+      summaryType: y_axis_summary_type,
+      summaryColumnKey: y_axis_column_key,
+      summaryMethod: y_axis_summary_method,
+      getSelectedColumnOption: this.props.getSelectedColumnOption,
+      onChangeSummaryType: this.updatedSummaryType,
+      onSelectNumericColumn: this.updateSummaryColumn,
+      onSelectSummaryMethod: this.updateSummaryMethod
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_dataSortSetting.default, {
+      statItem: statItem,
+      updateStatItem: this.props.updateStatItem
+    }));
+  }
+}
+var _default = exports.default = BarSettings;

package/es/stat-editor/stat-settings/basic-chart-settings/completeness-chart-settings.js

@@ -0,0 +1,214 @@
+"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 _dtableUtils = require("dtable-utils");
+var _DTableSelect = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
+var _completenessStyle = _interopRequireDefault(require("./style-setting/completeness-style"));
+var _groupbySettings = _interopRequireDefault(require("./groupby-settings"));
+var _baseSettings = _interopRequireDefault(require("../public-setting/base-settings"));
+var _dataSortSetting = _interopRequireDefault(require("../public-setting/data-sort-setting"));
+var _constants = require("../../../constants");
+const COLUMN_TYPES = [_dtableUtils.CellType.TEXT, _dtableUtils.CellType.COLLABORATOR, _dtableUtils.CellType.SINGLE_SELECT];
+class CompletenessSetting extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.renderNameSettings = () => {
+      const {
+        statItem,
+        getSelectedColumnOption
+      } = this.props;
+      const {
+        name_column
+      } = statItem;
+      const selectedItem = getSelectedColumnOption(name_column, this.columnOptions);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Name_field')), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+        placeholder: _reactIntlUniversal.default.get('Select_column'),
+        value: selectedItem,
+        onChange: this.onSelectGroupColumn,
+        options: this.columnOptions
+      }));
+    };
+    this.onSelectGroupColumn = option => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
+        name_column: option.value.key
+      }));
+    };
+    this.renderCompletionSettings = () => {
+      const {
+        statItem,
+        getSelectedColumnOption
+      } = this.props;
+      const {
+        completed_column
+      } = statItem;
+      const selectedItem = getSelectedColumnOption(completed_column, this.props.numericColumnsOptions);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Completion_value_field')), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+        placeholder: _reactIntlUniversal.default.get('Select_column'),
+        value: selectedItem,
+        onChange: this.onSelectCompletionColumn,
+        options: this.props.numericColumnsOptions
+      }));
+    };
+    this.renderGroupSettings = () => {
+      const {
+        selectedTable,
+        columnGroupbyColumnsOptions,
+        dateGranularityOptions,
+        geolocationGranularityOptions,
+        statItem,
+        getSelectedColumnOption
+      } = this.props;
+      const {
+        group_column,
+        date_granularity,
+        geolocation_granularity
+      } = statItem;
+      return /*#__PURE__*/_react.default.createElement(_groupbySettings.default, {
+        selectedTable: selectedTable,
+        columnsOptions: columnGroupbyColumnsOptions,
+        dateGranularityOptions: dateGranularityOptions,
+        geolocationGranularityOptions: geolocationGranularityOptions,
+        label: _reactIntlUniversal.default.get('Group_by'),
+        groupbyColumnKey: group_column,
+        groupbyDateGranularity: date_granularity,
+        groupbyGeolocationGranularity: geolocation_granularity,
+        getSelectedColumnOption: getSelectedColumnOption,
+        onSelectGroupbyColumn: this.onSelectColumnGroupColumn,
+        onSelectGroupbyDateGranularity: this.onSelectDateGranularity,
+        onSelectGroupbyGeolocationGranularity: this.onSelectGeolocationGranularity
+      });
+    };
+    this.onSelectColumnGroupColumn = key => {
+      const {
+        statItem,
+        selectedTable
+      } = this.props;
+      if (key === statItem.group_column) return;
+      const selectedColumn = (0, _dtableUtils.getTableColumnByKey)(selectedTable, key);
+      const newStatItem = {};
+      if (selectedColumn && _constants.TIME_COLUMN_LIST.includes(selectedColumn.type)) {
+        newStatItem.date_granularity = 'month';
+      }
+      if (selectedColumn.type === _dtableUtils.CellType.GEOLOCATION) {
+        newStatItem.geolocation_granularity = 'district';
+      }
+      newStatItem.group_column = key;
+      this.props.updateStatItem(Object.assign({}, statItem, newStatItem));
+    };
+    this.onSelectDateGranularity = key => {
+      const {
+        statItem
+      } = this.props;
+      if (key === statItem.date_granularity) return;
+      this.props.updateStatItem(Object.assign({}, statItem, {
+        date_granularity: key
+      }));
+    };
+    this.onSelectGeolocationGranularity = key => {
+      const {
+        statItem
+      } = this.props;
+      if (key === statItem.geolocation_granularity) return;
+      this.props.updateStatItem(Object.assign({}, statItem, {
+        geolocation_granularity: key
+      }));
+    };
+    this.onSelectCompletionColumn = option => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
+        completed_column: option.value.key
+      }));
+    };
+    this.renderTotalValueSettings = () => {
+      const {
+        statItem,
+        getSelectedColumnOption
+      } = this.props;
+      const {
+        target_column
+      } = statItem;
+      const selectedItem = getSelectedColumnOption(target_column, this.props.numericColumnsOptions);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement("label", null, _reactIntlUniversal.default.get('Total_value_field')), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+        placeholder: _reactIntlUniversal.default.get('Select_column'),
+        value: selectedItem,
+        onChange: this.onSelectTotalColumn,
+        options: this.props.numericColumnsOptions
+      }));
+    };
+    this.onSelectTotalColumn = option => {
+      const {
+        statItem
+      } = this.props;
+      this.props.updateStatItem(Object.assign({}, statItem, {
+        target_column: option.value.key
+      }));
+    };
+    this.columnOptions = props.generalColumnsOptions.filter(item => {
+      return COLUMN_TYPES.includes(item.value.type);
+    });
+  }
+  componentWillReceiveProps(nextProps, props) {
+    if (nextProps.selectedTable._id !== this.props.selectedTable._id) {
+      this.columnOptions = nextProps.generalColumnsOptions.filter(item => {
+        return COLUMN_TYPES.includes(item.value.type);
+      });
+    }
+  }
+  render() {
+    let {
+      getTables,
+      getViews,
+      statItem,
+      settingType
+    } = this.props;
+    let {
+      table_id: selectedTableId,
+      view_id: selectedViewId
+    } = statItem || {};
+    const isGroupChart = statItem.type === _constants.STAT_TYPE.GROUP_COMPLETENESS_CHART;
+    if (settingType === 'style') {
+      return /*#__PURE__*/_react.default.createElement(_completenessStyle.default, {
+        statItem: statItem,
+        updateStatItem: this.props.updateStatItem
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_baseSettings.default, {
+      statItem: statItem,
+      selectedTableId: selectedTableId,
+      selectedViewId: selectedViewId,
+      getTables: getTables,
+      getViews: getViews,
+      getTableById: this.props.getTableById,
+      getConvertedChart: this.props.getConvertedChart,
+      updateStatItem: this.props.updateStatItem
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), this.renderNameSettings(), /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), this.renderCompletionSettings(), this.renderTotalValueSettings(), isGroupChart && this.renderGroupSettings(), !isGroupChart && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-divider"
+    }), /*#__PURE__*/_react.default.createElement(_dataSortSetting.default, {
+      statItem: statItem,
+      updateStatItem: this.props.updateStatItem
+    })));
+  }
+}
+var _default = exports.default = CompletenessSetting;