dtable-statistic 4.0.2-test-2

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

@@ -0,0 +1,243 @@
+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 { CellType, TableUtils } from 'dtable-store';
+import ToggleSetting from '../../public-setting/toggle-setting';
+import IndToggleSetting from '../../public-setting/ind-toggle-setting';
+import AxisLabelPosition from '../../public-setting/axis-label-position-setting';
+import MinMaxSetting from '../../public-setting/min-max-setting';
+import ColorUseTypeSelector from '../../color-setting/color-use-type-selector';
+import LabelFontSizeEditor from './label-font-size-editor';
+import CustomTitleSetting from '../../public-setting/custom-title-setting';
+import { LABEL_COLORS, LABEL_CONFIG_CHANGED, STAT_TYPE } from '../../../../constants';
+var HorizontalBarChartStyle = /*#__PURE__*/function (_Component) {
+  _inherits(HorizontalBarChartStyle, _Component);
+  var _super = _createSuper(HorizontalBarChartStyle);
+  function HorizontalBarChartStyle() {
+    var _this;
+    _classCallCheck(this, HorizontalBarChartStyle);
+    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.onToggleVerticalAxisLabel = function () {
+      var _this$props = _this.props,
+        statItem = _this$props.statItem,
+        eventBus = _this$props.eventBus;
+      var _ref = statItem || {},
+        show_vertical_axis_label = _ref.show_vertical_axis_label;
+      var updated = {
+        show_vertical_axis_label: !show_vertical_axis_label,
+        vertical_axis_label_position: !show_vertical_axis_label ? 'center' : null
+      };
+      var newStatItem = Object.assign({}, statItem, updated);
+      eventBus.dispatch(LABEL_CONFIG_CHANGED, newStatItem);
+      _this.props.updateStatItem(newStatItem);
+    };
+    _this.onToggleHorizontalAxisLabel = function () {
+      var _this$props2 = _this.props,
+        statItem = _this$props2.statItem,
+        eventBus = _this$props2.eventBus;
+      var _ref2 = statItem || {},
+        show_horizontal_axis_label = _ref2.show_horizontal_axis_label;
+      var updated = {
+        show_horizontal_axis_label: !show_horizontal_axis_label,
+        horizontal_axis_label_position: !show_horizontal_axis_label ? 'center' : null
+      };
+      var newStatItem = Object.assign({}, statItem, updated);
+      eventBus.dispatch(LABEL_CONFIG_CHANGED, newStatItem);
+      _this.props.updateStatItem(newStatItem);
+    };
+    _this.onSelectAxisLabelPosition = function (type, option) {
+      var updated;
+      if (type === 'vertical') {
+        updated = {
+          vertical_axis_label_position: option.value
+        };
+      } else {
+        updated = {
+          horizontal_axis_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.onToggleShowLabel = function () {
+      var statItem = _this.props.statItem;
+      var _ref3 = statItem || {},
+        horizontal_axis_show_label = _ref3.horizontal_axis_show_label,
+        horizontal_axis_label_color = _ref3.horizontal_axis_label_color;
+      horizontal_axis_show_label = !horizontal_axis_show_label;
+      if (horizontal_axis_show_label) {
+        horizontal_axis_label_color = LABEL_COLORS[0];
+      } else {
+        horizontal_axis_label_color = null;
+      }
+      _this.props.updateStatItem(Object.assign({}, statItem, {
+        horizontal_axis_show_label: horizontal_axis_show_label,
+        horizontal_axis_label_color: horizontal_axis_label_color
+      }));
+    };
+    _this.onToggleDisplayData = function () {
+      var statItem = _this.props.statItem;
+      var _ref4 = statItem || {},
+        display_data = _ref4.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.onToggleHAxisAutoRange = function () {
+      var statItem = _this.props.statItem;
+      var _ref5 = statItem || {},
+        h_axis_auto_range = _ref5.h_axis_auto_range;
+      var updated = {
+        h_axis_auto_range: h_axis_auto_range == undefined ? false : !h_axis_auto_range
+      };
+      _this.props.updateStatItem(Object.assign({}, statItem, updated));
+    };
+    _this.onHAxisMinChange = function (min) {
+      var newMin = parseInt(min);
+      if (!Number.isNaN(newMin)) {
+        var statItem = _this.props.statItem;
+        var updated = {
+          h_axis_min: newMin
+        };
+        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      }
+    };
+    _this.onHAxisMaxChange = function (max) {
+      var newMax = parseInt(max);
+      if (!Number.isNaN(newMax)) {
+        var statItem = _this.props.statItem;
+        var updated = {
+          h_axis_max: newMax
+        };
+        _this.props.updateStatItem(Object.assign({}, statItem, updated));
+      }
+    };
+    _this.updateTitleName = function (setting) {
+      var statItem = _this.props.statItem;
+      _this.props.updateStatItem(Object.assign({}, statItem, setting));
+    };
+    _this.displayColorSelector = function () {
+      var _this$props4 = _this.props,
+        statItem = _this$props4.statItem,
+        getTableById = _this$props4.getTableById;
+      var type = statItem.type,
+        table_id = statItem.table_id,
+        column_groupby_column_key = statItem.column_groupby_column_key;
+      if (type == STAT_TYPE.HORIZONTAL_GROUP_BAR || type == STAT_TYPE.STACKED_HORIZONTAL_BAR) {
+        if (!column_groupby_column_key) {
+          return false;
+        }
+        var table = getTableById(table_id);
+        var groupByColumn = TableUtils.getTableColumnByKey(table, column_groupby_column_key);
+        var columnType = groupByColumn.type;
+        if (columnType == CellType.SINGLE_SELECT) {
+          return true;
+        }
+        return false;
+      }
+      return false;
+    };
+    _this.renderAutoRange = function () {
+      var statItem = _this.props.statItem;
+      var h_axis_auto_range = statItem.h_axis_auto_range,
+        h_axis_min = statItem.h_axis_min,
+        h_axis_max = statItem.h_axis_max;
+      var checked = h_axis_auto_range == undefined ? true : h_axis_auto_range;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "mt-1"
+      }, /*#__PURE__*/React.createElement(ToggleSetting, {
+        isChecked: checked,
+        handleToggleChange: _this.onToggleHAxisAutoRange,
+        label: intl.get('Auto_range')
+      }), !checked && /*#__PURE__*/React.createElement(MinMaxSetting, {
+        min: h_axis_min,
+        max: h_axis_max,
+        onMinChange: _this.onHAxisMinChange,
+        onMaxChange: _this.onHAxisMaxChange
+      }));
+    };
+    return _this;
+  }
+  _createClass(HorizontalBarChartStyle, [{
+    key: "render",
+    value: function render() {
+      var _this$props5 = this.props,
+        statItem = _this$props5.statItem,
+        labelColorConfigs = _this$props5.labelColorConfigs;
+      var chartType = statItem.type,
+        show_vertical_axis_label = statItem.show_vertical_axis_label,
+        show_horizontal_axis_label = statItem.show_horizontal_axis_label,
+        display_data = statItem.display_data,
+        label_font_size = statItem.label_font_size,
+        title_name = statItem.title_name;
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Vertical_axis')), /*#__PURE__*/React.createElement(ToggleSetting, {
+        isChecked: show_vertical_axis_label || false,
+        handleToggleChange: this.onToggleVerticalAxisLabel,
+        label: intl.get('Display_title')
+      }), show_vertical_axis_label && chartType == STAT_TYPE.STACKED_HORIZONTAL_BAR && /*#__PURE__*/React.createElement(CustomTitleSetting, {
+        titleName: title_name,
+        updateTitleName: this.updateTitleName
+      }), show_vertical_axis_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
+        statItem: statItem,
+        axisType: 'vertical',
+        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('Horizontal_axis')), /*#__PURE__*/React.createElement(ToggleSetting, {
+        isChecked: show_horizontal_axis_label || false,
+        handleToggleChange: this.onToggleHorizontalAxisLabel,
+        label: intl.get('Display_title')
+      }), show_horizontal_axis_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
+        statItem: statItem,
+        axisType: 'horizontal',
+        onSelectAxisLabelPosition: this.onSelectAxisLabelPosition
+      }), chartType !== STAT_TYPE.STACKED_HORIZONTAL_BAR && this.renderAutoRange()), this.displayColorSelector() && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(ColorUseTypeSelector, {
+        chart: statItem,
+        updateChart: this.props.updateStatItem
+      })), /*#__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 || false,
+        handleToggleChange: this.onToggleDisplayData,
+        label: chartType == STAT_TYPE.STACKED_HORIZONTAL_BAR ? intl.get('Display_stack_total_value') : intl.get('Display_data')
+      }), display_data && /*#__PURE__*/React.createElement(LabelFontSizeEditor, {
+        className: "mt-3",
+        fontSize: label_font_size,
+        onChangeFontSize: this.onChangeLabelFontSize
+      })), chartType === STAT_TYPE.HORIZONTAL_BAR && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(ColorUseTypeSelector, {
+        chart: statItem,
+        labelColorConfigs: labelColorConfigs,
+        updateChart: this.props.updateStatItem
+      })));
+    }
+  }]);
+  return HorizontalBarChartStyle;
+}(Component);
+export default HorizontalBarChartStyle;

package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/label-font-size-editor.js

@@ -0,0 +1,65 @@
+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 { Form, FormGroup, Label } from 'reactstrap';
+var LabelFontSizeEditor = /*#__PURE__*/function (_Component) {
+  _inherits(LabelFontSizeEditor, _Component);
+  var _super = _createSuper(LabelFontSizeEditor);
+  function LabelFontSizeEditor() {
+    var _this;
+    _classCallCheck(this, LabelFontSizeEditor);
+    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.onChange = function (evt) {
+      var value = evt.target.value.trim().replace(/[^0-9]/g, '');
+      var fontSize = value ? Number(value) : null;
+      if (fontSize === _this.props.fontSize) {
+        return;
+      }
+      if (fontSize) {
+        _this.props.onChangeFontSize(fontSize);
+      }
+    };
+    _this.onKeyDown = function (e) {
+      if (e.key == 'Enter') {
+        e.preventDefault();
+        e.target.blur();
+      }
+    };
+    return _this;
+  }
+  _createClass(LabelFontSizeEditor, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        fontSize = _this$props.fontSize,
+        className = _this$props.className,
+        id = _this$props.id,
+        labelText = _this$props.labelText;
+      var inputID = id || 'label-font-size';
+      return /*#__PURE__*/React.createElement("div", {
+        className: "label-font-size-editor ".concat(className ? className : '')
+      }, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+        for: inputID
+      }, labelText || intl.get('Label_font_size')), /*#__PURE__*/React.createElement("div", {
+        className: "font-size-editor-wrapper"
+      }, /*#__PURE__*/React.createElement("input", {
+        type: "text",
+        className: "form-control",
+        id: inputID,
+        defaultValue: fontSize,
+        onBlur: this.onChange,
+        onKeyDown: this.onKeyDown
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "font-size-unit"
+      }, /*#__PURE__*/React.createElement("span", null, "px"))))));
+    }
+  }]);
+  return LabelFontSizeEditor;
+}(Component);
+export default LabelFontSizeEditor;

package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/pie-chart-style-settings.js

@@ -0,0 +1,318 @@
+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 { Form, FormGroup, Label } from 'reactstrap';
+import intl from 'react-intl-universal';
+import { CellType, TableUtils } from 'dtable-store';
+import { DTableSelect } from '../../../../components';
+import ToggleSetting from '../../public-setting/toggle-setting';
+import ColorUseTypeSelector from '../../color-setting/color-use-type-selector';
+import LabelFontSizeEditor from './label-font-size-editor';
+import { DEFAULT_ANNOTATION_SIZE, LABEL_FORMATS, LABEL_FORMATS_MAP, LABEL_POSITIONS, LABEL_POSITIONS_MAP, STAT_TYPE } from '../../../../constants';
+var PieStyleSettings = /*#__PURE__*/function (_Component) {
+  _inherits(PieStyleSettings, _Component);
+  var _super = _createSuper(PieStyleSettings);
+  function PieStyleSettings(props) {
+    var _this;
+    _classCallCheck(this, PieStyleSettings);
+    _this = _super.call(this, props);
+    _this.renderShowLegend = function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(ToggleSetting, {
+        isChecked: _this.props.statItem.show_legend || false,
+        handleToggleChange: _this.onToggleShowLegend,
+        label: intl.get('Display_legend')
+      }));
+    };
+    _this.replaceNumberNotAllowInput = function (value) {
+      if (!value) {
+        return '';
+      }
+      value = value.replace(/。/g, '.');
+      value = value.replace(/-/g, '');
+      return value.replace(/[^.-\d,]/g, '');
+    };
+    _this.renderMinimumPercent = function () {
+      var minimumSlicePercent = _this.state.minimumSlicePercent;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(Form, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+        for: "percent"
+      }, intl.get('Minimum_slice_percent')), /*#__PURE__*/React.createElement("input", {
+        className: "form-control",
+        id: "percent",
+        ref: function ref(_ref) {
+          return _this.inputRef = _ref;
+        },
+        type: "text",
+        autoComplete: "off",
+        onKeyDown: _this.onKeyDown,
+        onBlur: _this.onBlur,
+        value: minimumSlicePercent,
+        onChange: _this.onPercentChange
+      }))));
+    };
+    _this.labelFontSizeEditor = function () {
+      var statItem = _this.props.statItem;
+      var label_font_size = statItem.label_font_size;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(LabelFontSizeEditor, {
+        fontSize: label_font_size,
+        onChangeFontSize: _this.onChangeLabelFontSize
+      }));
+    };
+    _this.onKeyDown = function (event) {
+      if (event.keyCode === 13) {
+        event.preventDefault();
+        _this.inputRef.blur();
+        _this.onCommit();
+      }
+    };
+    _this.onPercentChange = function (e) {
+      var value = e.target.value;
+      value = _this.replaceNumberNotAllowInput(value);
+      _this.setState({
+        minimumSlicePercent: value
+      });
+    };
+    _this.onBlur = function () {
+      _this.onCommit();
+    };
+    _this.onCommit = function () {
+      var statItem = _this.props.statItem;
+      var minimumSlicePercent = _this.state.minimumSlicePercent;
+      if (minimumSlicePercent > 100) {
+        minimumSlicePercent = 100;
+      }
+      _this.setState({
+        minimumSlicePercent: Number(minimumSlicePercent)
+      });
+      if (minimumSlicePercent === statItem.minimum_slice_percent) return;
+      _this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        minimum_slice_percent: Number(minimumSlicePercent)
+      }));
+    };
+    _this.onToggleShowLegend = function () {
+      var statItem = _this.props.statItem;
+      var show_legend = !statItem.show_legend;
+      _this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        show_legend: show_legend
+      }));
+    };
+    _this.onChangeLabelFontSize = function (label_font_size) {
+      var statItem = _this.props.statItem;
+      _this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        label_font_size: label_font_size
+      }));
+    };
+    _this.getLabelFormatOptions = function () {
+      var options = LABEL_FORMATS.map(function (item) {
+        return {
+          value: item,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: 'select-module select-module-name'
+          }, intl.get(LABEL_FORMATS_MAP[item]))
+        };
+      });
+      return options;
+    };
+    _this.getSelectedLabelFormat = function () {
+      var options = _this.labelFormatOptions;
+      var _this$props$statItem = _this.props.statItem,
+        show_percent = _this$props$statItem.show_percent,
+        label_format = _this$props$statItem.label_format;
+
+      // be compatible with `show_percent`(the previous `display percent` setting option)
+      if (show_percent) {
+        return options[0]; // the 'percent' option
+      }
+
+      return options.filter(function (option) {
+        return option.value == label_format;
+      })[0] || options[0];
+    };
+    _this.onSelectLabelFormat = function (option) {
+      var statItem = _this.props.statItem;
+      var newObj = {
+        label_format: option.value
+      };
+
+      // make `show_percent` no longer work (as there is a 'percent' option in this 'label format selector')
+      var show_percent = statItem.show_percent;
+      if (show_percent) {
+        newObj.show_percent = false;
+      }
+      _this.props.updateStatisticsSettings(Object.assign({}, statItem, newObj));
+    };
+    _this.renderLabelFormatSelector = function () {
+      var selectedOption = _this.getSelectedLabelFormat();
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Label_format')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedOption,
+        onChange: _this.onSelectLabelFormat,
+        options: _this.labelFormatOptions
+      }));
+    };
+    _this.getLabelPositionOptions = function () {
+      var options = LABEL_POSITIONS.map(function (item) {
+        return {
+          value: item,
+          label: /*#__PURE__*/React.createElement("span", {
+            className: 'select-module select-module-name'
+          }, intl.get(LABEL_POSITIONS_MAP[item]))
+        };
+      });
+      return options;
+    };
+    _this.getSelectedLabelPosition = function () {
+      var options = _this.labelPositionOptions;
+      var label_position = _this.props.statItem.label_position;
+      return options.filter(function (option) {
+        return option.value == label_position;
+      })[0] || options[0];
+    };
+    _this.onSelectLabelPosition = function (option) {
+      var statItem = _this.props.statItem;
+      var newObj = {
+        label_position: option.value
+      };
+      _this.props.updateStatisticsSettings(Object.assign({}, statItem, newObj));
+    };
+    _this.renderLabelPositionSelector = function () {
+      var selectedOption = _this.getSelectedLabelPosition();
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement("label", null, intl.get('Label_position')), /*#__PURE__*/React.createElement(DTableSelect, {
+        value: selectedOption,
+        onChange: _this.onSelectLabelPosition,
+        options: _this.labelPositionOptions
+      }));
+    };
+    _this.onToggleDisplayLabel = function () {
+      var statItem = _this.props.statItem;
+      var display_label = statItem.display_label,
+        show_percent = statItem.show_percent;
+      var newObj;
+      // be compatible with the previous `show_percent`(the `display percent` option)
+      if (show_percent) {
+        newObj = {
+          show_percent: false,
+          display_label: false
+        };
+      } else {
+        newObj = {
+          display_label: !display_label
+        };
+      }
+      _this.props.updateStatisticsSettings(Object.assign({}, statItem, newObj));
+    };
+    _this.renderDisplayLabel = function () {
+      var statItem = _this.props.statItem;
+      var show_percent = statItem.show_percent,
+        display_label = statItem.display_label;
+      // be compatible with the previous `show_percent`(the `display percent` option)
+      if (show_percent) {
+        display_label = true;
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(ToggleSetting, {
+        isChecked: display_label || false,
+        handleToggleChange: _this.onToggleDisplayLabel,
+        label: intl.get('Display_label')
+      }));
+    };
+    _this.displayColorSelector = function () {
+      var _this$props = _this.props,
+        getTableById = _this$props.getTableById,
+        statItem = _this$props.statItem;
+      var table_id = statItem.table_id,
+        groupby_column_key = statItem.groupby_column_key;
+      if (!groupby_column_key) {
+        return false;
+      }
+      var table = getTableById(table_id);
+      var groupByColumn = TableUtils.getTableColumnByKey(table, groupby_column_key);
+      var columnType = groupByColumn.type;
+      if (columnType == CellType.SINGLE_SELECT) {
+        return true;
+      }
+      return false;
+    };
+    _this.renderDisplayAnnotation = function () {
+      var display_annotation = _this.getDisplayAnnotation();
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(ToggleSetting, {
+        isChecked: display_annotation,
+        handleToggleChange: _this.onToggleDisplayAnnotation,
+        label: intl.get('Display_annotation')
+      }));
+    };
+    _this.onToggleDisplayAnnotation = function (e) {
+      var statItem = _this.props.statItem;
+      _this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        display_annotation: e.target.checked
+      }));
+    };
+    _this.getDisplayAnnotation = function () {
+      var statItem = _this.props.statItem;
+      var display_annotation = statItem.display_annotation;
+      // for stat items created before `display_annotation` was added.
+      if (display_annotation == undefined) {
+        display_annotation = true;
+      }
+      return display_annotation;
+    };
+    _this.renderAnnotationFontSizeEditor = function () {
+      var statItem = _this.props.statItem;
+      var annotation_font_size = statItem.annotation_font_size;
+      return /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(LabelFontSizeEditor, {
+        id: 'annotation-font-size',
+        labelText: intl.get('Font_size'),
+        fontSize: annotation_font_size || DEFAULT_ANNOTATION_SIZE,
+        onChangeFontSize: _this.onChangeAnnotationFontSize
+      }));
+    };
+    _this.onChangeAnnotationFontSize = function (annotation_font_size) {
+      var statItem = _this.props.statItem;
+      _this.props.updateStatisticsSettings(Object.assign({}, statItem, {
+        annotation_font_size: annotation_font_size
+      }));
+    };
+    _this.labelFormatOptions = _this.getLabelFormatOptions();
+    _this.labelPositionOptions = _this.getLabelPositionOptions();
+    var _minimumSlicePercent = typeof props.statItem.minimum_slice_percent === 'number' ? props.statItem.minimum_slice_percent : 1.5;
+    _this.state = {
+      minimumSlicePercent: _minimumSlicePercent
+    };
+    return _this;
+  }
+  _createClass(PieStyleSettings, [{
+    key: "render",
+    value: function render() {
+      var statItem = this.props.statItem;
+      var show_percent = statItem.show_percent,
+        display_label = statItem.display_label;
+      return /*#__PURE__*/React.createElement(Fragment, null, this.renderShowLegend(), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), this.renderDisplayLabel(), (show_percent || display_label) && /*#__PURE__*/React.createElement(Fragment, null, this.renderLabelPositionSelector(), this.renderLabelFormatSelector(), this.renderMinimumPercent(), this.labelFontSizeEditor()), statItem.type == STAT_TYPE.RING && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), this.renderDisplayAnnotation(), this.getDisplayAnnotation() && this.renderAnnotationFontSizeEditor()), this.displayColorSelector() && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement(ColorUseTypeSelector, {
+        chart: statItem,
+        updateChart: this.props.updateStatisticsSettings
+      })));
+    }
+  }]);
+  return PieStyleSettings;
+}(Component);
+export default PieStyleSettings;

package/es/stat-editor/stat-settings/basic-chart-settings/style-setting/time-compare-style.js

@@ -0,0 +1,49 @@
+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 ToggleSetting from '../../public-setting/toggle-setting';
+var TimeCompareStyle = /*#__PURE__*/function (_Component) {
+  _inherits(TimeCompareStyle, _Component);
+  var _super = _createSuper(TimeCompareStyle);
+  function TimeCompareStyle() {
+    var _this;
+    _classCallCheck(this, TimeCompareStyle);
+    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.onToggleIncreaseLabel = function () {
+      var _this$props = _this.props,
+        statItem = _this$props.statItem,
+        updateStatItem = _this$props.updateStatItem;
+      var display_increase_percentage = statItem.display_increase_percentage;
+      updateStatItem(Object.assign({}, statItem, {
+        display_increase_percentage: !display_increase_percentage
+      }));
+    };
+    return _this;
+  }
+  _createClass(TimeCompareStyle, [{
+    key: "render",
+    value: function render() {
+      var statItem = this.props.statItem;
+      var display_increase = statItem.display_increase,
+        display_increase_percentage = statItem.display_increase_percentage;
+      if (!display_increase) return null;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-divider"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "statistic-chart-parameter-item"
+      }, /*#__PURE__*/React.createElement(ToggleSetting, {
+        isChecked: display_increase_percentage || false,
+        handleToggleChange: this.onToggleIncreaseLabel,
+        label: intl.get('Display_percentage_increase')
+      })));
+    }
+  }]);
+  return TimeCompareStyle;
+}(Component);
+export default TimeCompareStyle;