dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,351 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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 { DTableSelect } from '../../../components';
+import GroupbySettings from './groupby-settings';
+import SummaryMethodSettings from './summary-method-setting';
+import NumericSummaryItem from '../public-setting/numeric-summary-item';
+import { GROUPBY_TYPE, STATISTICS_COUNT_SHOW, SUMMARY_METHOD, SUMMARY_TYPE } from '../../../constants';
+var GROUP_TYPES = {
+  COUNT: 'count',
+  SINGLE_NUMERIC_COLUMN: 'single_numeric_column',
+  MULTIPLE_NUMERIC_COLUMN: 'multiple_numeric_column'
+};
+var GroupingSettings = /*#__PURE__*/function (_Component) {
+  _inherits(GroupingSettings, _Component);
+  var _super = _createSuper(GroupingSettings);
+  function GroupingSettings(props) {
+    var _this;
+    _classCallCheck(this, GroupingSettings);
+    _this = _super.call(this, props);
+    _this.getSummaryMethodsOptions = function () {
+      return SUMMARY_METHOD.map(function (m) {
+        return {
+          value: m,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: 'select-module select-module-name'
+          }, intl.get(STATISTICS_COUNT_SHOW[m]))
+        };
+      });
+    };
+    _this.getDefaultColumnGroupbyType = function (_ref) {
+      var y_axis_summary_type = _ref.y_axis_summary_type;
+      if (y_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
+        return GROUP_TYPES.SINGLE_NUMERIC_COLUMN;
+      } else if (y_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
+        return GROUP_TYPES.SINGLE_NUMERIC_COLUMN;
+      }
+      return GROUP_TYPES.COUNT;
+    };
+    _this.getGroupTypeOptions = function () {
+      return [{
+        value: GROUP_TYPES.COUNT,
+        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: 'select-module select-module-name'
+        }, intl.get(STATISTICS_COUNT_SHOW['count'])), /*#__PURE__*/React.createElement("div", {
+          className: "summary-type-explanation"
+        }, intl.get('Count_the_number_of_records_in_each_group')))
+      }, {
+        value: GROUP_TYPES.SINGLE_NUMERIC_COLUMN,
+        label: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: 'select-module select-module-name'
+        }, intl.get(STATISTICS_COUNT_SHOW['advanced'])), /*#__PURE__*/React.createElement("div", {
+          className: "summary-type-explanation"
+        }, intl.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.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          className: 'select-module select-module-name'
+        }, intl.get('Summarize_multiple_fields')), /*#__PURE__*/React.createElement("div", {
+          className: "summary-type-explanation"
+        }, intl.get('Compute_the_sum_maximum_or_minimum_value_of_records_in_each_group_by_multiple_fields')))
+      }];
+    };
+    _this.onChangeGroupType = function (option) {
+      var value = option.value;
+      if (value === _this.state.columnGroupbyType) return;
+      var statItem = _this.props.statItem;
+      var _ref2 = _this.props.statItem || {},
+        column_groupby_column_key = _ref2.column_groupby_column_key,
+        column_groupby_date_granularity = _ref2.column_groupby_date_granularity,
+        column_groupby_geolocation_granularity = _ref2.column_groupby_geolocation_granularity,
+        column_groupby_multiple_numeric_column = _ref2.column_groupby_multiple_numeric_column,
+        column_groupby_numeric_columns = _ref2.column_groupby_numeric_columns,
+        x_axis_column_key = _ref2.x_axis_column_key,
+        y_axis_summary_type = _ref2.y_axis_summary_type,
+        y_axis_column_key = _ref2.y_axis_column_key,
+        y_axis_summary_method = _ref2.y_axis_summary_method;
+      if (value === GROUP_TYPES.SINGLE_NUMERIC_COLUMN) {
+        y_axis_summary_type = 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 = SUMMARY_METHOD[0];
+      } else if (value === GROUP_TYPES.COUNT) {
+        column_groupby_multiple_numeric_column = false;
+        column_groupby_numeric_columns = [];
+        var groupColumn = _this.props.columnGroupbyColumnsOptions.find(function (column) {
+          var key = column.key,
+            type = column.type;
+          return key !== x_axis_column_key && (type !== 'date' || type !== 'geolocation');
+        }) || {};
+        column_groupby_column_key = groupColumn.key;
+        y_axis_summary_type = 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 = SUMMARY_TYPE.ADVANCED;
+        column_groupby_multiple_numeric_column = true;
+        column_groupby_numeric_columns = [];
+        y_axis_summary_type = 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 = SUMMARY_METHOD[0];
+      }
+      var updated = {
+        column_groupby_column_key: column_groupby_column_key,
+        column_groupby_date_granularity: column_groupby_date_granularity,
+        column_groupby_geolocation_granularity: column_groupby_geolocation_granularity,
+        column_groupby_multiple_numeric_column: column_groupby_multiple_numeric_column,
+        column_groupby_numeric_columns: column_groupby_numeric_columns,
+        y_axis_summary_type: y_axis_summary_type,
+        y_axis_column_key: y_axis_column_key,
+        y_axis_summary_method: y_axis_summary_method
+      };
+      _this.setState({
+        columnGroupbyType: value
+      }, function () {
+        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      });
+    };
+    _this.getSelectedGroupType = function () {
+      var statItem = _this.props.statItem;
+      var column_groupby_multiple_numeric_column = statItem.column_groupby_multiple_numeric_column,
+        y_axis_summary_type = statItem.y_axis_summary_type;
+      if (column_groupby_multiple_numeric_column) {
+        return _this.groupTypeOptions.find(function (item) {
+          return item.value === GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN;
+        });
+      }
+      if (y_axis_summary_type === SUMMARY_TYPE.COUNT) {
+        return _this.groupTypeOptions[0];
+      }
+      if (y_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
+        return _this.groupTypeOptions[1];
+      }
+    };
+    _this.onSelectGroupbyColumn = function (type, groupbyColumnKey, groupbyDateGranularity, groupbyGeolocationGranularity) {
+      var 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 = function (type, dateGranularity) {
+      var updated = {
+        column_groupby_date_granularity: dateGranularity
+      };
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.onSelectGroupbyGeolocationGranularity = function (type, geolocationGranularity) {
+      var updated = {
+        column_groupby_geolocation_granularity: geolocationGranularity
+      };
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, updated));
+    };
+    _this.updateSummaryMethod = function (summaryMethod) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        y_axis_summary_method: summaryMethod
+      }));
+    };
+    _this.updateSummaryColumn = function (summaryColumnKey) {
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        y_axis_column_key: summaryColumnKey
+      }));
+    };
+    _this.renderGroupbyNumericColumns = function () {
+      var statItem = _this.props.statItem;
+      var column_groupby_numeric_columns = statItem.column_groupby_numeric_columns;
+      if (!column_groupby_numeric_columns || !Array.isArray(column_groupby_numeric_columns)) return null;
+      return column_groupby_numeric_columns.map(function (item, index) {
+        return /*#__PURE__*/React.createElement(NumericSummaryItem, {
+          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 = function () {
+      var _this$props = _this.props,
+        statItem = _this$props.statItem,
+        numericColumnsOptions = _this$props.numericColumnsOptions;
+      var _ref3 = statItem || {},
+        column_groupby_numeric_columns = _ref3.column_groupby_numeric_columns;
+      var newNumericColumnKey = numericColumnsOptions[0].value.key;
+      if (Array.isArray(column_groupby_numeric_columns)) {
+        column_groupby_numeric_columns = _toConsumableArray(column_groupby_numeric_columns);
+        column_groupby_numeric_columns.push({
+          column_key: newNumericColumnKey,
+          summary_method: SUMMARY_METHOD[0]
+        });
+      } else {
+        column_groupby_numeric_columns = [{
+          column_key: newNumericColumnKey,
+          summary_method: SUMMARY_METHOD[0]
+        }];
+      }
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        column_groupby_numeric_columns: _toConsumableArray(column_groupby_numeric_columns)
+      }));
+    };
+    _this.onChangeGroupbyNumericColumn = function (index, columnOption) {
+      if (index === 0) {
+        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+          y_axis_column_key: columnOption.value.key
+        }));
+      } else {
+        var _ref4 = _this.props.statItem || {},
+          column_groupby_numeric_columns = _ref4.column_groupby_numeric_columns;
+        column_groupby_numeric_columns = column_groupby_numeric_columns || [];
+        column_groupby_numeric_columns = _toConsumableArray(column_groupby_numeric_columns);
+        var 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: column_groupby_numeric_columns
+        }));
+      }
+    };
+    _this.onDeleteNumericColumnItem = function (index) {
+      var _ref5 = _this.props.statItem || {},
+        column_groupby_numeric_columns = _ref5.column_groupby_numeric_columns;
+      column_groupby_numeric_columns = column_groupby_numeric_columns || [];
+      column_groupby_numeric_columns = _toConsumableArray(column_groupby_numeric_columns);
+      column_groupby_numeric_columns.splice(index - 1, 1);
+      _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+        column_groupby_numeric_columns: _toConsumableArray(column_groupby_numeric_columns)
+      }));
+    };
+    _this.onChangeSummaryMethod = function (index, option) {
+      if (index === 0) {
+        _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
+          y_axis_summary_method: option.value
+        }));
+      } else {
+        var _ref6 = _this.props.statItem || {},
+          column_groupby_numeric_columns = _ref6.column_groupby_numeric_columns;
+        column_groupby_numeric_columns = column_groupby_numeric_columns || [];
+        column_groupby_numeric_columns = _toConsumableArray(column_groupby_numeric_columns);
+        var 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: column_groupby_numeric_columns
+        }));
+      }
+    };
+    _this.groupTypeOptions = _this.getGroupTypeOptions();
+    _this.summaryMethodsOptions = _this.getSummaryMethodsOptions();
+    _this.state = {
+      columnGroupbyType: _this.getDefaultColumnGroupbyType(props.statItem)
+    };
+    return _this;
+  }
+  _createClass(GroupingSettings, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        label = _this$props2.label,
+        statItem = _this$props2.statItem,
+        selectedTable = _this$props2.selectedTable,
+        columnGroupbyColumnsOptions = _this$props2.columnGroupbyColumnsOptions,
+        numericColumnsOptions = _this$props2.numericColumnsOptions,
+        dateGranularityOptions = _this$props2.dateGranularityOptions,
+        geolocationGranularityOptions = _this$props2.geolocationGranularityOptions;
+      var selectedGroupItem = this.getSelectedGroupType();
+      var _ref7 = statItem || {},
+        y_axis_summary_type = _ref7.y_axis_summary_type,
+        y_axis_column_key = _ref7.y_axis_column_key,
+        y_axis_summary_method = _ref7.y_axis_summary_method,
+        column_groupby_column_key = _ref7.column_groupby_column_key,
+        column_groupby_date_granularity = _ref7.column_groupby_date_granularity,
+        column_groupby_geolocation_granularity = _ref7.column_groupby_geolocation_granularity,
+        column_groupby_multiple_numeric_column = _ref7.column_groupby_multiple_numeric_column;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, label), /*#__PURE__*/React.createElement(DTableSelect, {
+        classNamePrefix: "statistic-chart-summary-types",
+        value: selectedGroupItem,
+        onChange: this.onChangeGroupType,
+        options: this.groupTypeOptions
+      })), y_axis_summary_type === SUMMARY_TYPE.ADVANCED && (column_groupby_multiple_numeric_column ? /*#__PURE__*/React.createElement(NumericSummaryItem, {
+        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.createElement(SummaryMethodSettings, {
+        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.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistics-add-number"
+      }, this.renderGroupbyNumericColumns()), Array.isArray(numericColumnsOptions) && numericColumnsOptions.length > 0 && /*#__PURE__*/React.createElement("div", {
+        className: "statistics-add-number-column",
+        onClick: this.onAddNumericColumn
+      }, /*#__PURE__*/React.createElement("span", {
+        className: "number-column-item dtable-font dtable-icon-add-table"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "number-column-item add-number-column-description"
+      }, intl.get('Add_new_numeric_column')))), (!column_groupby_multiple_numeric_column && y_axis_summary_type === SUMMARY_TYPE.ADVANCED || y_axis_summary_type === SUMMARY_TYPE.COUNT) && /*#__PURE__*/React.createElement(GroupbySettings, {
+        selectedTable: selectedTable,
+        columnsOptions: columnGroupbyColumnsOptions,
+        dateGranularityOptions: dateGranularityOptions,
+        geolocationGranularityOptions: geolocationGranularityOptions,
+        label: intl.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, GROUPBY_TYPE.COLUMN),
+        onSelectGroupbyDateGranularity: this.onSelectGroupbyDateGranularity.bind(this, GROUPBY_TYPE.COLUMN),
+        onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, GROUPBY_TYPE.COLUMN)
+      }));
+    }
+  }]);
+  return GroupingSettings;
+}(Component);
+export default GroupingSettings;

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

@@ -0,0 +1,60 @@
+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 { DTableSelect } from '../../../components';
+import { COLOR_OPTIONS } from '../../../constants';
+var ColorGroupSelector = /*#__PURE__*/function (_Component) {
+  _inherits(ColorGroupSelector, _Component);
+  var _super = _createSuper(ColorGroupSelector);
+  function ColorGroupSelector(props) {
+    var _this;
+    _classCallCheck(this, ColorGroupSelector);
+    _this = _super.call(this, props);
+    _this.getColorOptions = function () {
+      return COLOR_OPTIONS.map(function (colorOption) {
+        return {
+          value: colorOption.name,
+          label: /*#__PURE__*/React.createElement("div", {
+            className: "statistic-color-option d-flex"
+          }, colorOption.exampleColors.map(function (color, index) {
+            return /*#__PURE__*/React.createElement("span", {
+              className: "statistic-color-block",
+              key: index,
+              style: {
+                background: "".concat(color)
+              }
+            });
+          }))
+        };
+      });
+    };
+    _this.changeColor = function (option) {
+      var selected = option.value;
+      _this.props.onChangeColor(selected);
+    };
+    _this.colorOptions = _this.getColorOptions();
+    return _this;
+  }
+  _createClass(ColorGroupSelector, [{
+    key: "render",
+    value: function render() {
+      var currentColor = this.props.currentColor;
+      var currentOption = this.colorOptions.filter(function (item) {
+        return item.value == currentColor;
+      })[0] || this.colorOptions[0];
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Color')), /*#__PURE__*/React.createElement(DTableSelect, {
+        classNamePrefix: 'chart-color',
+        value: currentOption,
+        onChange: this.changeColor,
+        options: this.colorOptions
+      }));
+    }
+  }]);
+  return ColorGroupSelector;
+}(Component);
+export default ColorGroupSelector;

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

@@ -0,0 +1,129 @@
+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 from 'react';
+import { ChromePicker } from 'react-color';
+import '../../../assets/css/color-picker.css';
+var COVER = {
+  position: 'fixed',
+  top: '0px',
+  right: '0px',
+  bottom: '0px',
+  left: '0px'
+};
+var ColorPicker = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(ColorPicker, _React$PureComponent);
+  var _super = _createSuper(ColorPicker);
+  function ColorPicker(props) {
+    var _this;
+    _classCallCheck(this, ColorPicker);
+    _this = _super.call(this, props);
+    _this.onInputChanged = function (event) {
+      var value = event.target.value;
+      if (value === _this.state.activeColor) return;
+      // todo valid color
+      _this.updateColor(value);
+      _this.setState({
+        activeColor: value
+      });
+    };
+    _this.onPickColorToggle = function () {
+      var readOnly = _this.props.readOnly;
+      if (readOnly) return;
+      _this.setState({
+        isShowColorPicker: !_this.state.isShowColorPicker
+      });
+    };
+    _this.onPickChanged = function (color) {
+      if (color.hex === _this.state.activeColor) return;
+      _this.updateColor(color);
+      _this.setState({
+        activeColor: color.hex
+      });
+    };
+    _this.updateColor = function (color) {
+      var isPickAllColor = _this.props.isPickAllColor;
+      var colorValue = isPickAllColor ? color : color.hex;
+      _this.props.onColorChanged(colorValue);
+    };
+    _this.getPopoverStyle = function () {
+      if (!_this.colorPickerContainerRef) return {};
+      var _this$colorPickerCont = _this.colorPickerContainerRef.getBoundingClientRect(),
+        top = _this$colorPickerCont.top,
+        height = _this$colorPickerCont.height;
+      var clientHeight = document.body.clientHeight;
+      var 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;
+    return _this;
+  }
+  _createClass(ColorPicker, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      this.setState({
+        activeColor: nextProps.activeColor
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var activeColor = this.state.activeColor;
+      var isWhiteColor = activeColor && activeColor.toUpperCase() === '#FFFFFF';
+      var readOnly = this.props.readOnly;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-color-picker-container",
+        ref: function ref(_ref) {
+          return _this2.colorPickerContainerRef = _ref;
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "picker-control ".concat(readOnly ? 'readOnly' : '')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "color-control ".concat(isWhiteColor ? 'white-color' : '', " ").concat(readOnly ? 'readOnly' : ''),
+        onClick: this.onPickColorToggle,
+        style: {
+          background: activeColor
+        }
+      }), /*#__PURE__*/React.createElement("input", {
+        className: "text-control",
+        type: "text",
+        value: activeColor,
+        onChange: this.onInputChanged,
+        readOnly: readOnly
+      })), this.state.isShowColorPicker && /*#__PURE__*/React.createElement("div", {
+        style: this.getPopoverStyle()
+      }, /*#__PURE__*/React.createElement("div", {
+        style: COVER,
+        onClick: this.onPickColorToggle
+      }), /*#__PURE__*/React.createElement(ChromePicker, {
+        disableAlpha: true,
+        color: activeColor,
+        onChange: this.onPickChanged
+      })));
+    }
+  }]);
+  return ColorPicker;
+}(React.PureComponent);
+ColorPicker.defaultProps = {
+  activeColor: '#000000'
+};
+export default ColorPicker;