dtable-statistic 4.4.24-alpha.9 → 5.0.0

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

@@ -0,0 +1,374 @@
+"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 _classnames = _interopRequireDefault(require("classnames"));
+var _reactstrap = require("reactstrap");
+var _reactColor = _interopRequireDefault(require("react-color"));
+var _reactIntlUniversal = _interopRequireDefault(require("react-intl-universal"));
+var _DTableSelect = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
+var _colorRulesPopover = _interopRequireDefault(require("../../../components/popover/color-rules-popover"));
+var _colorUtils = require("../../../utils/color-utils");
+var _constants = require("../../../constants");
+var _colorRules = require("../../../constants/color-rules");
+const COVER = {
+  top: '0px',
+  right: '0px',
+  bottom: '0px',
+  left: '0px'
+};
+class ColorUseTypeSelector extends _react.Component {
+  constructor(props) {
+    super(props);
+    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: ReactColor's height
+        return {
+          position: 'absolute',
+          left: '20px',
+          bottom: '2.375rem',
+          zIndex: '2'
+        };
+      }
+      return {
+        position: 'absolute',
+        left: '20px',
+        zIndex: '2'
+      };
+    };
+    this.getUsableColorTypes = chartType => {
+      switch (chartType) {
+        case _constants.STAT_TYPE.BAR_GROUP:
+        case _constants.STAT_TYPE.BAR_STACK:
+        case _constants.STAT_TYPE.HORIZONTAL_GROUP_BAR:
+        case _constants.STAT_TYPE.STACKED_HORIZONTAL_BAR:
+        case _constants.STAT_TYPE.PIE:
+        case _constants.STAT_TYPE.RING:
+        case _constants.STAT_TYPE.GROUP_LINE:
+        case _constants.STAT_TYPE.AREA_GROUP_CHART:
+          {
+            return [_constants.TYPE_COLOR_USING.USE_DEFAULT, _constants.TYPE_COLOR_USING.USE_COLUMN_COLORS];
+          }
+        case _constants.STAT_TYPE.BAR:
+        case _constants.STAT_TYPE.HORIZONTAL_BAR:
+          {
+            return [_constants.TYPE_COLOR_USING.USE_DEFAULT, _constants.TYPE_COLOR_USING.USE_SPECIFIC_COLORS, _constants.TYPE_COLOR_USING.USE_RULES];
+          }
+        default:
+          {
+            return [_constants.TYPE_COLOR_USING.USE_DEFAULT];
+          }
+      }
+    };
+    this.initColorTypeOptions = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        type
+      } = chart;
+      const useableColorTypes = this.getUsableColorTypes(type);
+      return useableColorTypes.map(colorType => {
+        return {
+          value: colorType,
+          label: /*#__PURE__*/_react.default.createElement("span", {
+            className: "select-module select-module-name"
+          }, _reactIntlUniversal.default.get(_constants.TYPE_DISPLAY_COLOR_USING[colorType]))
+        };
+      });
+    };
+    this.getSelectedSpecificColor = () => {
+      const {
+        chart,
+        labelColorConfigs
+      } = this.props;
+      const {
+        type
+      } = chart;
+      switch (type) {
+        case _constants.STAT_TYPE.BAR:
+          {
+            const {
+              y_axis_label_color
+            } = chart;
+            if (y_axis_label_color) {
+              return y_axis_label_color.toUpperCase();
+            }
+            return labelColorConfigs[0].color;
+          }
+        case _constants.STAT_TYPE.HORIZONTAL_BAR:
+          {
+            const {
+              horizontal_axis_label_color
+            } = chart;
+            if (horizontal_axis_label_color) {
+              return horizontal_axis_label_color.toUpperCase();
+            }
+            return labelColorConfigs[0].color;
+          }
+        default:
+          {
+            return '';
+          }
+      }
+    };
+    this.getColorRules = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        type
+      } = chart;
+      switch (type) {
+        case _constants.STAT_TYPE.BAR:
+          {
+            return (0, _colorUtils.getValidColorRules)(chart.y_axis_label_color_rules);
+          }
+        case _constants.STAT_TYPE.HORIZONTAL_BAR:
+          {
+            return (0, _colorUtils.getValidColorRules)(chart.horizontal_axis_label_color_rules);
+          }
+        default:
+          {
+            return [];
+          }
+      }
+    };
+    this.getColorRuleTypes = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        type
+      } = chart;
+      switch (type) {
+        case _constants.STAT_TYPE.BAR:
+        case _constants.STAT_TYPE.HORIZONTAL_BAR:
+          {
+            return [_colorRules.COLOR_RULE_FILTER_TYPE_MAP.NUMERIC_VALUE];
+          }
+        default:
+          {
+            return [];
+          }
+      }
+    };
+    this.onSelectColorOption = _ref => {
+      let {
+        value: color_option
+      } = _ref;
+      const {
+        chart,
+        labelColorConfigs
+      } = this.props;
+      let updatedChart = Object.assign({}, chart, {
+        color_option
+      });
+      if (color_option === _constants.TYPE_COLOR_USING.USE_SPECIFIC_COLORS) {
+        switch (chart.type) {
+          case _constants.STAT_TYPE.BAR:
+            {
+              updatedChart.y_axis_label_color = updatedChart.y_axis_label_color || labelColorConfigs[0].color;
+              break;
+            }
+          case _constants.STAT_TYPE.HORIZONTAL_BAR:
+            {
+              updatedChart.horizontal_axis_label_color = updatedChart.horizontal_axis_label_color || labelColorConfigs[0].color;
+              break;
+            }
+          default:
+            {
+              break;
+            }
+        }
+      }
+      this.props.updateChart(updatedChart);
+    };
+    this.onToggleColorSelector = () => {
+      this.setState({
+        isShowColorSelector: !this.state.isShowColorSelector
+      }, () => {
+        if (!this.state.isShowColorSelector) {
+          this.modifySpecificColor(this.state.specificColor);
+        }
+      });
+    };
+    this.showColorRulesEditor = () => {
+      if (this.state.isShowColorRulesEditor) {
+        return;
+      }
+      this.setState({
+        isShowColorRulesEditor: true
+      });
+    };
+    this.hideColorRulesEditor = () => {
+      this.setState({
+        isShowColorRulesEditor: false
+      });
+    };
+    this.modifySpecificColor = color => {
+      const {
+        chart
+      } = this.props;
+      let updatedChart = Object.assign({}, chart);
+      switch (chart.type) {
+        case _constants.STAT_TYPE.BAR:
+          {
+            updatedChart.y_axis_label_color = color;
+            break;
+          }
+        case _constants.STAT_TYPE.HORIZONTAL_BAR:
+          {
+            updatedChart.horizontal_axis_label_color = color;
+            break;
+          }
+        default:
+          {
+            break;
+          }
+      }
+      this.setState({
+        specificColor: color
+      }, () => {
+        this.props.updateChart(updatedChart);
+      });
+    };
+    this.modifyHex = colorSelection => {
+      if (colorSelection.hex === this.state.specificColor) return;
+      this.setState({
+        specificColor: colorSelection.hex
+      });
+    };
+    this.modifyColorRules = colorRules => {
+      const {
+        chart
+      } = this.props;
+      let updatedChart = Object.assign({}, chart);
+      switch (chart.type) {
+        case _constants.STAT_TYPE.BAR:
+          {
+            updatedChart.y_axis_label_color_rules = colorRules;
+            break;
+          }
+        case _constants.STAT_TYPE.HORIZONTAL_BAR:
+          {
+            updatedChart.horizontal_axis_label_color_rules = colorRules;
+            break;
+          }
+        default:
+          {
+            break;
+          }
+      }
+      this.props.updateChart(updatedChart);
+    };
+    this.renderSpecificColorSelector = () => {
+      const {
+        specificColor
+      } = this.state;
+      const id = 'statistic_selected_specific_color';
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        id: id,
+        className: "selected-specific-color mt-1",
+        ref: ref => this.colorPickerContainerRef = ref
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "selected-specific-color-wrapper"
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: "specific-color-show",
+        style: {
+          backgroundColor: specificColor
+        },
+        onClick: this.onToggleColorSelector
+      }), /*#__PURE__*/_react.default.createElement(_reactstrap.Input, {
+        type: "text",
+        className: "specific-color-input",
+        value: specificColor,
+        onChange: event => this.modifySpecificColor(event.target.value)
+      }))), this.state.isShowColorSelector && /*#__PURE__*/_react.default.createElement("div", {
+        style: this.getPopoverStyle()
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "position-fixed",
+        style: COVER,
+        onClick: this.onToggleColorSelector
+      }), /*#__PURE__*/_react.default.createElement(_reactColor.default, {
+        disableAlpha: true,
+        color: specificColor,
+        onChange: this.modifyHex
+      })));
+    };
+    this.renderColorRulesEditor = () => {
+      const {
+        labelColorConfigs
+      } = this.props;
+      const colorRules = this.getColorRules();
+      const colorRuleTypes = this.getColorRuleTypes();
+      const rulesLen = colorRules ? colorRules.length : 0;
+      const hasRules = rulesLen > 0;
+      const id = 'statistic_color_rules_toggle';
+      let msg = _reactIntlUniversal.default.get('Add_rule');
+      if (rulesLen === 1) {
+        msg = _reactIntlUniversal.default.get('Added_1_rule');
+      } else if (rulesLen > 1) {
+        msg = _reactIntlUniversal.default.get('Added_xxx_rules', {
+          rules_count: rulesLen
+        });
+      }
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        id: id,
+        className: (0, _classnames.default)('statistic-color-rules-toggle', 'mt-1', hasRules ? 'statistic-edit-color-rule' : 'statistic-add-color-rule'),
+        onClick: this.showColorRulesEditor
+      }, hasRules ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, msg), /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-rename"
+      })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("i", {
+        className: "dtable-font dtable-icon-add-table"
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        className: "ml-2"
+      }, msg))), this.state.isShowColorRulesEditor && /*#__PURE__*/_react.default.createElement(_colorRulesPopover.default, {
+        target: id,
+        colorRules: colorRules,
+        colorRuleTypes: colorRuleTypes,
+        labelColorConfigs: labelColorConfigs,
+        hideColorRulesPopover: this.hideColorRulesEditor,
+        updateColorRules: this.modifyColorRules
+      }));
+    };
+    this.state = {
+      isShowColorSelector: false,
+      isShowColorRulesEditor: false,
+      specificColor: this.getSelectedSpecificColor()
+    };
+    this.colorOptions = this.initColorTypeOptions();
+    this.isToggleColorRulesEditor = false;
+  }
+  render() {
+    const {
+      chart
+    } = this.props;
+    const {
+      color_option
+    } = chart;
+    const selectedColorOption = this.colorOptions.find(colorOption => colorOption.value === color_option) || 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, {
+      value: selectedColorOption,
+      options: this.colorOptions,
+      onChange: this.onSelectColorOption
+    }), color_option === _constants.TYPE_COLOR_USING.USE_SPECIFIC_COLORS && this.renderSpecificColorSelector(), color_option === _constants.TYPE_COLOR_USING.USE_RULES && this.renderColorRulesEditor());
+  }
+}
+var _default = exports.default = ColorUseTypeSelector;

package/es/stat-editor/stat-settings/map/map-level.js

@@ -0,0 +1,72 @@
+"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 _DTableSelect = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
+var _map = require("../../../utils/map");
+var _map2 = require("../../../constants/map");
+const MAP_LEVELS = [{
+  key: _map2.MAP_LEVEL.COUNTRY,
+  name: '国家'
+}, {
+  key: _map2.MAP_LEVEL.PROVINCE,
+  name: '省级'
+}, {
+  key: _map2.MAP_LEVEL.CITY,
+  name: '市级'
+}];
+class MapLevelSettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.createMapLevelOptions = () => {
+      return MAP_LEVELS.map(mapLevel => {
+        return {
+          label: /*#__PURE__*/_react.default.createElement("span", {
+            className: "select-option-name"
+          }, mapLevel.name),
+          value: mapLevel.key
+        };
+      });
+    };
+    this.getSelectedMapLevelOption = () => {
+      const {
+        map_level
+      } = this.props.statItem;
+      const defaultOption = this.mapLevelOptions[0];
+      if (!map_level) return defaultOption;
+      return this.mapLevelOptions.find(option => option.value === map_level) || defaultOption;
+    };
+    this.onSelectMapLevel = option => {
+      const {
+        map_level,
+        map_location
+      } = this.props.statItem;
+      const newLevel = option.value;
+      if (newLevel === map_level) return;
+      const updated = {
+        map_level: newLevel,
+        geolocation_granularity: (0, _map.fixGeoGranularity)({
+          mapLevel: newLevel,
+          mapLocation: map_location
+        })
+      };
+      this.props.updateStatItem(Object.assign({}, this.props.statItem, updated));
+    };
+    this.mapLevelOptions = this.createMapLevelOptions();
+  }
+  render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("label", null, "\u5730\u56FE\u7EA7\u522B"), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+      value: this.getSelectedMapLevelOption(),
+      options: this.mapLevelOptions,
+      onChange: this.onSelectMapLevel
+    }));
+  }
+}
+var _default = exports.default = MapLevelSettings;

package/es/stat-editor/stat-settings/map/map-province-city.js

@@ -0,0 +1,151 @@
+"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 _DTableSelect = _interopRequireDefault(require("dtable-ui-component/lib/DTableSelect"));
+var _map = require("../../../constants/map");
+var _regions = require("../../../constants/regions");
+var _map2 = require("../../../utils/map");
+class MapProvinceCitySettings extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.isProvinceWithCities = province => {
+      const provinceWithCities = _regions.regions.find(provinceWithCities => provinceWithCities.name === province);
+      return provinceWithCities && provinceWithCities.cities.length > 0;
+    };
+    this.createProvinceOptions = () => {
+      return _regions.regions.map(provinceWithCities => {
+        const {
+          name
+        } = provinceWithCities;
+        return {
+          label: /*#__PURE__*/_react.default.createElement("span", {
+            className: "select-option-name"
+          }, name),
+          value: name
+        };
+      });
+    };
+    this.createProvinceCitiesOptions = province => {
+      const provinceWithCities = _regions.regions.find(provinceWithCities => provinceWithCities.name === province);
+      if (!provinceWithCities || provinceWithCities.cities.length === 0) return [];
+      return provinceWithCities.cities.map(city => {
+        const {
+          name
+        } = city;
+        return {
+          label: /*#__PURE__*/_react.default.createElement("span", {
+            className: "select-option-name"
+          }, name),
+          value: name
+        };
+      });
+    };
+    this.getProvinceCitiesOptions = province => {
+      if (this.provinceCitiesOptionsMap[province]) {
+        return this.provinceCitiesOptionsMap[province];
+      }
+      const citiesOptions = this.createProvinceCitiesOptions(province);
+      this.provinceCitiesOptionsMap[province] = citiesOptions;
+      return citiesOptions;
+    };
+    this.getSelectedProvinceOption = () => {
+      const {
+        map_location
+      } = this.props.statItem;
+      const province = map_location && map_location.province;
+      if (!province) return null;
+      return this.provinceOptions.find(option => option.value === province);
+    };
+    this.getSelectedCity = citiesOptions => {
+      const {
+        map_location
+      } = this.props.statItem;
+      const city = map_location && map_location.city;
+      if (!city) return null;
+      return citiesOptions.find(option => option.value === city);
+    };
+    this.onSelectProvince = option => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        map_level,
+        map_location
+      } = statItem;
+      const newMapLocation = {
+        province: option.value
+      };
+      if (map_location && newMapLocation.province === map_location.province) return;
+      const updated = {
+        map_location: newMapLocation,
+        geolocation_granularity: (0, _map2.fixGeoGranularity)({
+          mapLevel: map_level,
+          mapLocation: newMapLocation
+        })
+      };
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    this.onSelectCity = option => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        map_level,
+        map_location
+      } = statItem;
+      const newMapLocation = Object.assign({}, map_location, {
+        city: option.value
+      });
+      if (map_location && newMapLocation.city === map_location.city) return;
+      const updated = {
+        map_location: newMapLocation,
+        geolocation_granularity: (0, _map2.fixGeoGranularity)({
+          mapLevel: map_level,
+          mapLocation: newMapLocation
+        })
+      };
+      this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    this.renderCitySelector = () => {
+      const {
+        map_location
+      } = this.props.statItem;
+      const province = map_location && map_location.province;
+      const citiesOptions = this.getProvinceCitiesOptions(province);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+        value: this.getSelectedCity(citiesOptions),
+        options: citiesOptions,
+        onChange: this.onSelectCity,
+        placeholder: "\u8BF7\u9009\u62E9\u57CE\u5E02"
+      }));
+    };
+    this.provinceOptions = this.createProvinceOptions();
+    this.provinceCitiesOptionsMap = {};
+  }
+  render() {
+    const {
+      map_level
+    } = this.props.statItem;
+    if (map_level !== _map.MAP_LEVEL.PROVINCE && map_level !== _map.MAP_LEVEL.CITY) {
+      return null;
+    }
+    const isCity = map_level === _map.MAP_LEVEL.CITY;
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "statistic-chart-parameter-item"
+    }, /*#__PURE__*/_react.default.createElement("label", null, isCity ? '城市' : '省份'), /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+      value: this.getSelectedProvinceOption(),
+      options: this.provinceOptions,
+      onChange: this.onSelectProvince,
+      placeholder: "\u8BF7\u9009\u62E9\u7701\u4EFD"
+    })), isCity && this.renderCitySelector());
+  }
+}
+var _default = exports.default = MapProvinceCitySettings;

package/es/stat-editor/stat-settings/public-setting/axis-label-position-setting.js

@@ -0,0 +1,108 @@
+"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"));
+const LABEL_POSITIONS_X = ['left', 'center', 'right'];
+const LABEL_POSITIONS_Y = ['bottom', 'center', 'top'];
+const LABEL_POSITIONS_SHOW_X = {
+  left: 'Left',
+  center: 'Center',
+  right: 'Right'
+};
+const LABEL_POSITIONS_SHOW_Y = {
+  bottom: 'Bottom',
+  center: 'Center',
+  top: 'Top'
+};
+class AxisLabelPosition extends _react.Component {
+  constructor(props) {
+    super(props);
+    this.getLabelPositionOptions = () => {
+      let {
+        axisType
+      } = this.props;
+      let positions = LABEL_POSITIONS_X;
+      if (axisType.includes('y') || axisType === 'vertical') {
+        positions = LABEL_POSITIONS_Y;
+      }
+      if (axisType === 'x' || axisType === 'horizontal') {
+        return positions.map(g => {
+          return {
+            value: g,
+            label: /*#__PURE__*/_react.default.createElement("span", {
+              className: 'select-module select-module-name'
+            }, _reactIntlUniversal.default.get(LABEL_POSITIONS_SHOW_X[g]))
+          };
+        });
+      }
+      if (axisType.includes('y') || axisType === 'vertical') {
+        return positions.map(g => {
+          return {
+            value: g,
+            label: /*#__PURE__*/_react.default.createElement("span", {
+              className: 'select-module select-module-name'
+            }, _reactIntlUniversal.default.get(LABEL_POSITIONS_SHOW_Y[g]))
+          };
+        });
+      }
+    };
+    this.onSelectAxisPosition = option => {
+      let {
+        axisType
+      } = this.props;
+      this.props.onSelectAxisLabelPosition(axisType, option);
+    };
+    this.renderXAxisLabelPosition = () => {
+      let {
+        statItem,
+        axisType
+      } = this.props;
+      let selectedOption = null;
+      if (axisType === 'y' || axisType === 'vertical') {
+        const {
+          y_axis_label_position,
+          vertical_axis_label_position
+        } = statItem;
+        selectedOption = this.labelPositionOptions.find(item => {
+          return item.value === y_axis_label_position || item.value === vertical_axis_label_position;
+        });
+      } else if (axisType === 'y_left' || axisType === 'y_right') {
+        const {
+          y_axis_left_label_position,
+          y_axis_right_label_position
+        } = statItem;
+        let target = axisType === 'y_left' ? y_axis_left_label_position : y_axis_right_label_position;
+        selectedOption = this.labelPositionOptions.find(item => {
+          return item.value === target;
+        });
+      } else {
+        const {
+          x_axis_label_position,
+          horizontal_axis_label_position
+        } = statItem;
+        selectedOption = this.labelPositionOptions.find(item => {
+          return item.value === x_axis_label_position || item.value === horizontal_axis_label_position;
+        });
+      }
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "mt-1"
+      }, /*#__PURE__*/_react.default.createElement(_DTableSelect.default, {
+        value: selectedOption,
+        onChange: this.onSelectAxisPosition,
+        options: this.labelPositionOptions
+      }));
+    };
+    this.labelPositionOptions = this.getLabelPositionOptions();
+  }
+  render() {
+    return this.renderXAxisLabelPosition();
+  }
+}
+var _default = exports.default = AxisLabelPosition;