dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,170 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component, Fragment } from 'react';
+import { CellType, FORMULA_RESULT_TYPE, FORMULA_COLUMN_TYPES } from 'dtable-store';
+import BaseSettings from '../public-setting/base-settings';
+import ColumnSettings from '../public-setting/column-settings';
+import GeoGranularitySettings from './geo-granularity-settings';
+import SummarySettings from './summary-settings';
+import MapStyleSetting from './style-setting/map-setting';
+import { GEOLOCATION_GRANULARITY } from '../../../constants';
+var MapSettings = /*#__PURE__*/function (_Component) {
+  _inherits(MapSettings, _Component);
+  var _super = _createSuper(MapSettings);
+  function MapSettings(props) {
+    var _this;
+    _classCallCheck(this, MapSettings);
+    _this = _super.call(this, props);
+    _this.getColumns = function (columns) {
+      var geoColumns = columns.filter(function (column) {
+        var type = column.type,
+          data = column.data;
+        if (type === CellType.GEOLOCATION) {
+          var _ref = data || {},
+            geo_format = _ref.geo_format;
+          if (geo_format === 'lng_lat' || geo_format === 'country_region') {
+            return false;
+          }
+          return true;
+        }
+        if (FORMULA_COLUMN_TYPES.includes(type)) {
+          var _ref2 = data || {},
+            result_type = _ref2.result_type,
+            array_type = _ref2.array_type,
+            array_data = _ref2.array_data;
+          if (result_type !== FORMULA_RESULT_TYPE.ARRAY || array_type !== CellType.GEOLOCATION) {
+            return false;
+          }
+          var _ref3 = array_data || {},
+            _geo_format = _ref3.geo_format;
+          if (_geo_format === 'lng_lat' || _geo_format === 'country_region') {
+            return false;
+          }
+          return true;
+        }
+        return false;
+      });
+      return geoColumns;
+    };
+    _this.getGeoGranularityOptions = function () {
+      return [{
+        id: GEOLOCATION_GRANULARITY.PROVINCE,
+        name: '按省'
+      }].map(function (granularity) {
+        return {
+          label: /*#__PURE__*/React.createElement("span", {
+            className: "select-option-name"
+          }, granularity.name),
+          value: granularity.id
+        };
+      });
+    };
+    _this.getSelectedGeoColumnOption = function () {
+      return _this.geoColumnsOptions.find(function (option) {
+        return option.value.key === _this.props.statItem.geo_column;
+      });
+    };
+    _this.getSelectedGeoGranularityOption = function () {
+      return _this.geoGranularityOptions.find(function (option) {
+        return option.value === _this.props.statItem.geolocation_granularity;
+      });
+    };
+    _this.onSelectGeoColumn = function (option) {
+      var geo_column = _this.props.statItem.geo_column;
+      var new_geo_column = option.value.key;
+      if (new_geo_column === geo_column) return;
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        geo_column: new_geo_column,
+        geolocation_granularity: GEOLOCATION_GRANULARITY.PROVINCE
+      }));
+    };
+    _this.onSelectGeoGranularity = function (option) {
+      var geolocation_granularity = _this.props.statItem.geolocation_granularity;
+      var new_geolocation_granularity = option.value;
+      if (new_geolocation_granularity === geolocation_granularity) return;
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        geolocation_granularity: new_geolocation_granularity
+      }));
+    };
+    var _columns = props.columns,
+      getColumnsOptions = props.getColumnsOptions;
+    var _geoColumns = _this.getColumns(_columns);
+    _this.geoColumnsOptions = getColumnsOptions(_geoColumns);
+    _this.geoGranularityOptions = _this.getGeoGranularityOptions();
+    return _this;
+  }
+  _createClass(MapSettings, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (nextProps.selectedTableId !== this.props.selectedTableId) {
+        var columns = nextProps.columns,
+          getColumnsOptions = nextProps.getColumnsOptions;
+        var geoColumns = this.getColumns(columns);
+        this.geoColumnsOptions = getColumnsOptions(geoColumns);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        getTables = _this$props.getTables,
+        getViews = _this$props.getViews,
+        settingType = _this$props.settingType,
+        selectedTableId = _this$props.selectedTableId,
+        statItem = _this$props.statItem,
+        getColumnsOptions = _this$props.getColumnsOptions,
+        numericColumns = _this$props.numericColumns;
+      var selectedViewId = statItem.view_id;
+      var selectedGeoColumnOption = this.getSelectedGeoColumnOption();
+      var selectedGeoGranularityOption = this.getSelectedGeoGranularityOption();
+      if (settingType === 'style') {
+        return /*#__PURE__*/React.createElement(MapStyleSetting, {
+          statItem: statItem,
+          onChangeColor: this.props.onChangeColor,
+          updateStatItem: this.props.updateStatItem
+        });
+      }
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+        statItem: statItem,
+        selectedTableId: selectedTableId,
+        selectedViewId: selectedViewId,
+        getTables: getTables,
+        getViews: getViews,
+        getTableById: this.props.getTableById,
+        updateStatItem: this.props.updateStatItem
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, "\u4F4D\u7F6E\u5B57\u6BB5"), /*#__PURE__*/React.createElement(ColumnSettings, {
+        columnsOptions: this.geoColumnsOptions,
+        selectedColumnOption: selectedGeoColumnOption,
+        onChangeSelectedColumn: this.onSelectGeoColumn
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(GeoGranularitySettings, {
+        geoGranularityOptions: this.geoGranularityOptions,
+        selectedGeoGranularityOption: selectedGeoGranularityOption,
+        onChangeGeoGranularity: this.onSelectGeoGranularity
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(SummarySettings, {
+        label: '归总方法',
+        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
+      }));
+    }
+  }]);
+  return MapSettings;
+}(Component);
+export default MapSettings;

package/es/stat-editor/stat-settings/advance-chart-settings/mirror-settings.js

@@ -0,0 +1,141 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component, Fragment } from 'react';
+import intl from 'react-intl-universal';
+import BaseSettings from '../public-setting/base-settings';
+import ColumnSettings from '../public-setting/column-settings';
+import SummarySettings from './summary-settings';
+import ToggleSetting from '../public-setting/toggle-setting';
+import { MIRROR_COLUMN_LIST } from '../../../constants';
+var MirrorSettings = /*#__PURE__*/function (_Component) {
+  _inherits(MirrorSettings, _Component);
+  var _super = _createSuper(MirrorSettings);
+  function MirrorSettings(props) {
+    var _this;
+    _classCallCheck(this, MirrorSettings);
+    _this = _super.call(this, props);
+    _this.getSelectedStatColumnOption = function () {
+      return _this.statColumnsOptions.find(function (option) {
+        return option.value.key === _this.props.statItem.column;
+      });
+    };
+    _this.getSelectedGroupColumnOption = function () {
+      return _this.groupColumnsOptions.find(function (option) {
+        return option.value.key === _this.props.statItem.group_column;
+      });
+    };
+    _this.onSelectStatColumn = function (option) {
+      var column = _this.props.statItem.column;
+      var new_column = option.value.key;
+      if (new_column === column) return;
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        column: new_column
+      }));
+    };
+    _this.onSelectGroupColumn = function (option) {
+      var group_column = _this.props.statItem.group_column;
+      var new_column = option.value.key;
+      if (new_column === group_column) return;
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        group_column: new_column
+      }));
+    };
+    _this.handleToggleChange = function (event) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        is_transpose: event.target.checked
+      }));
+    };
+    var columns = props.columns,
+      getColumnsOptions = props.getColumnsOptions;
+    var statColumns = columns.filter(function (column) {
+      return MIRROR_COLUMN_LIST.includes(column.type);
+    });
+    var groupColumns = columns.filter(function (column) {
+      return column.type === 'single-select';
+    });
+    _this.statColumnsOptions = getColumnsOptions(statColumns);
+    _this.groupColumnsOptions = getColumnsOptions(groupColumns);
+    return _this;
+  }
+  _createClass(MirrorSettings, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (nextProps.selectedTableId !== this.props.selectedTableId) {
+        var columns = nextProps.columns,
+          getColumnsOptions = nextProps.getColumnsOptions;
+        var statColumns = columns.filter(function (column) {
+          return MIRROR_COLUMN_LIST.includes(column.type);
+        });
+        this.statColumnsOptions = getColumnsOptions(statColumns);
+        var groupColumns = columns.filter(function (column) {
+          return column.type === 'single-select';
+        });
+        this.groupColumnsOptions = getColumnsOptions(groupColumns);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        getTables = _this$props.getTables,
+        getViews = _this$props.getViews,
+        settingType = _this$props.settingType,
+        selectedTableId = _this$props.selectedTableId,
+        statItem = _this$props.statItem,
+        getColumnsOptions = _this$props.getColumnsOptions,
+        numericColumns = _this$props.numericColumns;
+      var selectedColumnOption = this.getSelectedStatColumnOption();
+      var selectedGroupColumnOption = this.getSelectedGroupColumnOption();
+      if (settingType === 'style') {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(BaseSettings, {
+        statItem: statItem,
+        selectedTableId: statItem.table_id,
+        selectedViewId: statItem.view_id,
+        getTables: getTables,
+        getViews: getViews,
+        getTableById: this.props.getTableById,
+        updateStatItem: this.props.updateStatItem
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Statistic_field')), /*#__PURE__*/React.createElement(ColumnSettings, {
+        columnsOptions: this.statColumnsOptions,
+        selectedColumnOption: selectedColumnOption,
+        onChangeSelectedColumn: this.onSelectStatColumn
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(ToggleSetting, {
+        label: intl.get('Reversing'),
+        isChecked: statItem.is_transpose,
+        handleToggleChange: this.handleToggleChange
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Column_grouping_field')), /*#__PURE__*/React.createElement(ColumnSettings, {
+        columnsOptions: this.groupColumnsOptions,
+        selectedColumnOption: selectedGroupColumnOption,
+        onChangeSelectedColumn: this.onSelectGroupColumn
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(SummarySettings, {
+        label: intl.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
+      }));
+    }
+  }]);
+  return MirrorSettings;
+}(Component);
+export default MirrorSettings;

package/es/stat-editor/stat-settings/advance-chart-settings/style-setting/combination-style-setting.js

@@ -0,0 +1,219 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component, Fragment } from 'react';
+import intl from 'react-intl-universal';
+import ToggleSetting from '../../public-setting/toggle-setting';
+import AxisLabelPosition from '../../public-setting/axis-label-position-setting';
+import IndToggleSetting from '../../public-setting/ind-toggle-setting';
+import MinMaxSetting from '../../public-setting/min-max-setting';
+import LabelFontSizeEditor from '../../basic-chart-settings/style-setting/label-font-size-editor';
+import { LABEL_CONFIG_CHANGED } from '../../../../constants';
+var CombinationChartStyle = /*#__PURE__*/function (_Component) {
+  _inherits(CombinationChartStyle, _Component);
+  var _super = _createSuper(CombinationChartStyle);
+  function CombinationChartStyle() {
+    var _this;
+    _classCallCheck(this, CombinationChartStyle);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.renderShowAxisLabel = function (type, position) {
+      var statItem = _this.props.statItem;
+      var _ref = statItem || {},
+        show_x_axis_label = _ref.show_x_axis_label;
+      if (type === 'x') {
+        return /*#__PURE__*/React.createElement(ToggleSetting, {
+          isChecked: show_x_axis_label || false,
+          handleToggleChange: _this.onToggleXAxisLabel,
+          label: intl.get('Display_title')
+        });
+      } else {
+        var isChecked = _this.props.statItem["show_y_axis_".concat(position, "_label")] || false;
+        return /*#__PURE__*/React.createElement(ToggleSetting, {
+          isChecked: isChecked,
+          handleToggleChange: function handleToggleChange() {
+            return _this.onToggleYAxisLabel(position);
+          },
+          label: intl.get('Display_title')
+        });
+      }
+    };
+    _this.onToggleXAxisLabel = function () {
+      var _this$props = _this.props,
+        statItem = _this$props.statItem,
+        eventBus = _this$props.eventBus;
+      var _ref2 = statItem || {},
+        show_x_axis_label = _ref2.show_x_axis_label;
+      var updated = {
+        show_x_axis_label: !show_x_axis_label,
+        x_axis_label_position: !show_x_axis_label ? 'center' : null
+      };
+      var newStatItem = Object.assign({}, statItem, updated);
+      eventBus.dispatch(LABEL_CONFIG_CHANGED, newStatItem);
+      _this.props.updateStatItem(newStatItem);
+    };
+    _this.onToggleYAxisLabel = function (position) {
+      var _updated;
+      var _this$props2 = _this.props,
+        statItem = _this$props2.statItem,
+        eventBus = _this$props2.eventBus;
+      var updated = (_updated = {}, _defineProperty(_updated, "show_y_axis_".concat(position, "_label"), !statItem["show_y_axis_".concat(position, "_label")]), _defineProperty(_updated, "y_axis_".concat(position, "_label_position"), !statItem["show_y_axis_".concat(position, "_label")] ? 'center' : null), _updated);
+      var newStatItem = Object.assign({}, statItem, updated);
+      eventBus.dispatch(LABEL_CONFIG_CHANGED, newStatItem);
+      _this.props.updateStatItem(newStatItem);
+    };
+    _this.onSelectAxisLabelPosition = function (type, option, position) {
+      var updated;
+      if (type === 'x') {
+        updated = {
+          x_axis_label_position: option.value
+        };
+      } else {
+        updated = _defineProperty({}, "y_axis_".concat(position, "_label_position"), option.value);
+      }
+      var _this$props3 = _this.props,
+        statItem = _this$props3.statItem,
+        eventBus = _this$props3.eventBus;
+      var newStatItem = Object.assign({}, statItem, updated);
+      eventBus.dispatch(LABEL_CONFIG_CHANGED, newStatItem);
+      _this.props.updateStatItem(newStatItem);
+    };
+    _this.onToggleYAxisAutoRange = function (key) {
+      var statItem = _this.props.statItem;
+      var updated = _defineProperty({}, key, statItem[key] == undefined ? false : !statItem[key]);
+      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    _this.onYAxisMinChange = function (key, min) {
+      var newMin = parseInt(min);
+      if (!Number.isNaN(newMin)) {
+        var statItem = _this.props.statItem;
+        var updated = _defineProperty({}, key, newMin);
+        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      }
+    };
+    _this.onYAxisMaxChange = function (key, max) {
+      var newMax = parseInt(max);
+      if (!Number.isNaN(newMax)) {
+        var statItem = _this.props.statItem;
+        var updated = _defineProperty({}, key, newMax);
+        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      }
+    };
+    _this.onToggleDisplayData = function () {
+      var statItem = _this.props.statItem;
+      var _ref3 = statItem || {},
+        display_data = _ref3.display_data;
+      var updated = {
+        display_data: !display_data
+      };
+      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    _this.onChangeLabelFontSize = function (label_font_size) {
+      var statItem = _this.props.statItem;
+      _this.props.updateStatItem(Object.assign({}, statItem, {
+        label_font_size: label_font_size
+      }));
+    };
+    _this.renderLeftAutoRange = function () {
+      var statItem = _this.props.statItem;
+      var y_axis_auto_range_left = statItem.y_axis_auto_range_left,
+        y_axis_min_left = statItem.y_axis_min_left,
+        y_axis_max_left = statItem.y_axis_max_left;
+      var checked = y_axis_auto_range_left == undefined ? true : y_axis_auto_range_left;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "mt-1"
+      }, /*#__PURE__*/React.createElement(ToggleSetting, {
+        isChecked: checked,
+        handleToggleChange: function handleToggleChange() {
+          _this.onToggleYAxisAutoRange('y_axis_auto_range_left');
+        },
+        label: intl.get('Auto_range')
+      }), !checked && /*#__PURE__*/React.createElement(MinMaxSetting, {
+        min: y_axis_min_left,
+        max: y_axis_max_left,
+        onMinChange: _this.onYAxisMinChange.bind(_assertThisInitialized(_this), 'y_axis_min_left'),
+        onMaxChange: _this.onYAxisMaxChange.bind(_assertThisInitialized(_this), 'y_axis_max_left')
+      }));
+    };
+    _this.renderRightAutoRange = function () {
+      var statItem = _this.props.statItem;
+      var y_axis_auto_range_right = statItem.y_axis_auto_range_right,
+        y_axis_min_right = statItem.y_axis_min_right,
+        y_axis_max_right = statItem.y_axis_max_right;
+      var checked = y_axis_auto_range_right == undefined ? true : y_axis_auto_range_right;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "mt-1"
+      }, /*#__PURE__*/React.createElement(ToggleSetting, {
+        isChecked: checked,
+        handleToggleChange: function handleToggleChange() {
+          _this.onToggleYAxisAutoRange('y_axis_auto_range_right');
+        },
+        label: intl.get('Auto_range')
+      }), !checked && /*#__PURE__*/React.createElement(MinMaxSetting, {
+        min: y_axis_min_right,
+        max: y_axis_max_right,
+        onMinChange: _this.onYAxisMinChange.bind(_assertThisInitialized(_this), 'y_axis_min_right'),
+        onMaxChange: _this.onYAxisMaxChange.bind(_assertThisInitialized(_this), 'y_axis_max_right')
+      }));
+    };
+    return _this;
+  }
+  _createClass(CombinationChartStyle, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var statItem = this.props.statItem;
+      var show_x_axis_label = statItem.show_x_axis_label,
+        show_y_axis_left_label = statItem.show_y_axis_left_label,
+        show_y_axis_right_label = statItem.show_y_axis_right_label,
+        _statItem$display_dat = statItem.display_data,
+        display_data = _statItem$display_dat === void 0 ? false : _statItem$display_dat,
+        _statItem$label_font_ = statItem.label_font_size,
+        label_font_size = _statItem$label_font_ === void 0 ? 12 : _statItem$label_font_;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('X-axis')), this.renderShowAxisLabel('x'), show_x_axis_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
+        statItem: statItem,
+        axisType: 'x',
+        onSelectAxisLabelPosition: this.onSelectAxisLabelPosition
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Y-axis(left side)')), this.renderShowAxisLabel('y', 'left'), show_y_axis_left_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
+        statItem: statItem,
+        axisType: 'y_left',
+        onSelectAxisLabelPosition: function onSelectAxisLabelPosition(type, option) {
+          return _this2.onSelectAxisLabelPosition(type, option, 'left');
+        }
+      }), this.renderLeftAutoRange()), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Y-axis(right side)')), this.renderShowAxisLabel('y', 'right'), show_y_axis_right_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
+        statItem: statItem,
+        axisType: 'y_right',
+        onSelectAxisLabelPosition: function onSelectAxisLabelPosition(type, option) {
+          return _this2.onSelectAxisLabelPosition(type, option, 'right');
+        }
+      }), this.renderRightAutoRange()), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(IndToggleSetting, {
+        isChecked: display_data,
+        handleToggleChange: this.onToggleDisplayData,
+        label: intl.get('Display_data')
+      }), display_data && /*#__PURE__*/React.createElement(LabelFontSizeEditor, {
+        className: "mt-3",
+        fontSize: label_font_size,
+        onChangeFontSize: this.onChangeLabelFontSize
+      })));
+    }
+  }]);
+  return CombinationChartStyle;
+}(Component);
+export default CombinationChartStyle;

package/es/stat-editor/stat-settings/advance-chart-settings/style-setting/heat-map-settings.js

@@ -0,0 +1,89 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import intl from 'react-intl-universal';
+import { Label, Input, InputGroup, InputGroupAddon } from 'reactstrap';
+import ColorGroupSelector from '../../color-setting/color-group-selector';
+import { DEFAULT_GRID_DISTANCE, DEFAULT_GRID_SIZE } from '../../../../constants';
+var HeatMapStyleSettings = /*#__PURE__*/function (_Component) {
+  _inherits(HeatMapStyleSettings, _Component);
+  var _super = _createSuper(HeatMapStyleSettings);
+  function HeatMapStyleSettings() {
+    var _this;
+    _classCallCheck(this, HeatMapStyleSettings);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.renderColorSetting = function () {
+      var _this$props = _this.props,
+        onChangeColor = _this$props.onChangeColor,
+        statItem = _this$props.statItem;
+      return /*#__PURE__*/React.createElement(ColorGroupSelector, {
+        currentColor: statItem.data_color,
+        onChangeColor: onChangeColor
+      });
+    };
+    _this.onSubmit = function (evt) {
+      var statItem = _this.props.statItem;
+      var key = evt.target.name;
+      var value = evt.target.value.trim().replace(/[^0-9]/g, '');
+      var newValue = value ? Number(value) : null;
+      if (newValue == statItem[key]) {
+        return;
+      }
+      if (newValue) {
+        _this.props.updateStatItem(Object.assign({}, statItem, _defineProperty({}, key, newValue)));
+      }
+    };
+    _this.onKeyDown = function (e) {
+      if (e.key == 'Enter') {
+        e.preventDefault();
+        e.target.blur();
+      }
+    };
+    return _this;
+  }
+  _createClass(HeatMapStyleSettings, [{
+    key: "render",
+    value: function render() {
+      var statItem = this.props.statItem;
+      var grid_size = statItem.grid_size,
+        grid_distance = statItem.grid_distance;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderColorSetting(), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(Label, {
+        for: "grid-size"
+      }, intl.get('Grid_size')), /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(Input, {
+        type: "text",
+        id: "grid-size",
+        name: "grid_size",
+        defaultValue: grid_size || DEFAULT_GRID_SIZE,
+        onBlur: this.onSubmit,
+        onKeyDown: this.onKeyDown
+      }), /*#__PURE__*/React.createElement(InputGroupAddon, {
+        addonType: "append"
+      }, "px"))), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(Label, {
+        for: "grid-distance"
+      }, intl.get('Grid_distance')), /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(Input, {
+        type: "text",
+        id: "grid-distance",
+        name: "grid_distance",
+        defaultValue: grid_distance || DEFAULT_GRID_DISTANCE,
+        onBlur: this.onSubmit,
+        onKeyDown: this.onKeyDown
+      }), /*#__PURE__*/React.createElement(InputGroupAddon, {
+        addonType: "append"
+      }, "px"))));
+    }
+  }]);
+  return HeatMapStyleSettings;
+}(Component);
+export default HeatMapStyleSettings;