dtable-statistic 4.3.2 → 4.3.4

package/es/calculator/workers/basic-chart-calculator-worker.js

@@ -311,7 +311,7 @@ function getGroupbyOneColumnChartResults(rows, formulaRows, groupbyColumn, inclu
     let formattedResult = {
       ...result
     };
-    if (columnGroupByColumn.type == CellType.SINGLE_SELECT) {
+    if (columnGroupByColumn.type === CellType.SINGLE_SELECT) {
       formattedResult.color = getColorFromSingleSelectColumn(columnGroupByColumn, groupName);
     }
     formattedResult.group_name = getFormattedLabel(columnGroupByColumn, groupName, value.collaborators);

package/es/components/dialog/chart-addition-widgets/chart-selector.js

@@ -127,12 +127,12 @@ class ChartSelector extends React.Component {
         type: STAT_TYPE.MAP,
         title: '中国地图',
         image: 'map.png',
-        hide: lang != 'zh-cn'
+        hide: lang !== 'zh-cn'
       }, {
         type: STAT_TYPE.MAP_BUBBLE,
         title: '中国地图(气泡图)',
         image: 'map-bubble.png',
-        hide: lang != 'zh-cn'
+        hide: lang !== 'zh-cn'
       }, {
         type: STAT_TYPE.WORLD_MAP,
         title: intl.get('World_map'),

package/es/components/dialog/new-view-dialog.js

@@ -31,7 +31,7 @@ class NewViewDialog extends React.Component {
       this.props.onNewViewCancel();
     };
     this.handleKeyDown = e => {
-      if (e.key == 'Enter') {
+      if (e.key === 'Enter') {
         e.preventDefault();
         this.handleSubmit();
       }

package/es/components/dropdown-menu/statistic-dropdown-menu.js

@@ -6,6 +6,10 @@ import Icon from '../icon';
 class StatisticDropdownMenu extends React.Component {
   constructor(props) {
     super(props);
+    this.onMouseDown = event => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
     this.onDropdownToggleClick = e => {
       if (e.target && this.viewsDropdownToggle && this.viewsDropdownToggle.contains(e.target)) {
         return;
@@ -53,9 +57,10 @@ class StatisticDropdownMenu extends React.Component {
     const otherViews = this.props.getOtherStatistics();
     const hasOtherViews = otherViews && otherViews.length > 0;
     return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
+      className: "dtable-dropdown-menu",
       isOpen: this.state.isItemMenuShow,
-      toggle: this.onDropdownToggleClick,
-      className: "dtable-dropdown-menu"
+      onMouseDown: this.onMouseDown,
+      toggle: this.onDropdownToggleClick
     }, /*#__PURE__*/React.createElement(DropdownToggle, {
       tag: "span",
       "data-toggle": "dropdown",

package/es/components/dtable-select.js

@@ -41,7 +41,8 @@ class DTableSelect extends React.Component {
       noOptionsMessage,
       classNamePrefix,
       innerRef,
-      isDisabled
+      isDisabled,
+      customFilterOption
     } = this.props;
     return /*#__PURE__*/React.createElement(Select, {
       value: value,
@@ -49,6 +50,7 @@ class DTableSelect extends React.Component {
       ref: innerRef,
       onChange: onChange,
       options: options,
+      filterOption: customFilterOption,
       isMulti: isMulti,
       classNamePrefix: classNamePrefix,
       styles: MenuSelectStyle,

package/es/components/popover/color-rules/rule-filters/filter.js

@@ -91,7 +91,7 @@ class Filter extends React.Component {
       switch (type) {
         case INPUT_CMP_TYPE_MAP.NUMBER:
           {
-            const number = filter_term || filter_term == 0 ? filter_term : '';
+            const number = filter_term || filter_term === 0 ? filter_term : '';
             return /*#__PURE__*/React.createElement(NumberInput, {
               value: number,
               onChange: this.onNumberFilterTermChanged

package/es/service/dashboard-service.js

@@ -299,7 +299,7 @@ class DashBoardService {
           const targetDashboard = this.getStatisticById(targetBoardId);
           const draggedDashboardIndex = this.statistics.indexOf(draggedDashboard);
           let targetDashboardIndex = this.statistics.indexOf(targetDashboard);
-          targetDashboardIndex += relativePosition == 'before' ? 0 : 1;
+          targetDashboardIndex += relativePosition === 'before' ? 0 : 1;
           let updatedStatistics = [...this.statistics];
           if (draggedDashboardIndex < targetDashboardIndex) {
             if (targetDashboardIndex < updatedStatistics.length) {

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

@@ -66,7 +66,7 @@ class BasicNumberCardSettings extends Component {
       }));
     };
     this.onKeyDown = e => {
-      if (e.key == 'Enter') {
+      if (e.key === 'Enter') {
         e.preventDefault();
         e.target.blur();
       }

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

@@ -99,7 +99,7 @@ class DashboardChartSettings extends Component {
       }));
     };
     this.onKeyDown = e => {
-      if (e.key == 'Enter') {
+      if (e.key === 'Enter') {
         e.preventDefault();
         e.target.blur();
       }

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

@@ -84,7 +84,7 @@ class CombinationChartStyle extends Component {
         statItem
       } = this.props;
       const updated = {
-        [key]: statItem[key] == undefined ? false : !statItem[key]
+        [key]: statItem[key] === undefined || statItem[key] === null ? false : !statItem[key]
       };
       this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
@@ -141,7 +141,7 @@ class CombinationChartStyle extends Component {
         y_axis_min_left,
         y_axis_max_left
       } = statItem;
-      const checked = y_axis_auto_range_left == undefined ? true : y_axis_auto_range_left;
+      const checked = y_axis_auto_range_left === undefined || y_axis_auto_range_left === null ? true : y_axis_auto_range_left;
       return /*#__PURE__*/React.createElement("div", {
         className: "mt-1"
       }, /*#__PURE__*/React.createElement(ToggleSetting, {
@@ -166,7 +166,7 @@ class CombinationChartStyle extends Component {
         y_axis_min_right,
         y_axis_max_right
       } = statItem;
-      const checked = y_axis_auto_range_right == undefined ? true : y_axis_auto_range_right;
+      const checked = y_axis_auto_range_right === undefined || y_axis_auto_range_right === null ? true : y_axis_auto_range_right;
       return /*#__PURE__*/React.createElement("div", {
         className: "mt-1"
       }, /*#__PURE__*/React.createElement(ToggleSetting, {

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

@@ -23,7 +23,7 @@ class HeatMapStyleSettings extends Component {
       const key = evt.target.name;
       const value = evt.target.value.trim().replace(/[^0-9]/g, '');
       const newValue = value ? Number(value) : null;
-      if (newValue == statItem[key]) {
+      if (newValue === statItem[key]) {
         return;
       }
       if (newValue) {
@@ -33,7 +33,7 @@ class HeatMapStyleSettings extends Component {
       }
     };
     this.onKeyDown = e => {
-      if (e.key == 'Enter') {
+      if (e.key === 'Enter') {
         e.preventDefault();
         e.target.blur();
       }

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

@@ -5,6 +5,12 @@ import { DTableSelect } from '../../../components';
 class GroupbySettings extends Component {
   constructor() {
     super(...arguments);
+    this.getCustomFilterOption = (option, input) => {
+      var _option$data, _option$data$value;
+      const labelValue = (option === null || option === void 0 ? void 0 : (_option$data = option.data) === null || _option$data === void 0 ? void 0 : (_option$data$value = _option$data.value) === null || _option$data$value === void 0 ? void 0 : _option$data$value.name) && option.data.value.name.trim().toLowerCase() || '';
+      const inputValue = typeof input === 'string' && input.trim().toLowerCase();
+      return labelValue.includes(inputValue);
+    };
     this.renderGroupby = () => {
       const {
         columnsOptions,
@@ -13,10 +19,13 @@ class GroupbySettings extends Component {
       } = this.props;
       const selectedColumnOption = this.props.getSelectedColumnOption(groupbyColumnKey, columnsOptions);
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("label", null, label), /*#__PURE__*/React.createElement(DTableSelect, {
+        isSearchable: true,
         placeholder: intl.get('Select_a_column'),
         value: selectedColumnOption,
         onChange: this.onSelectGroupbyColumn,
-        options: columnsOptions
+        options: columnsOptions,
+        customFilterOption: this.getCustomFilterOption,
+        noOptionsMessage: () => intl.get('No_options')
       }));
     };
     this.renderGroupbyDateGranularity = () => {

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

@@ -131,7 +131,7 @@ class HorizontalGroupBarChartSettings extends Component {
       onSelectGroupbyGeolocationGranularity: this.onSelectGroupbyGeolocationGranularity.bind(this, GROUPBY_TYPE.COLUMN),
       updatedColumnGroupbyNumericColumns: this.updatedColumnGroupbyNumericColumns,
       updateStatItem: this.props.updateStatItem
-    }), statItem.type == STAT_TYPE.STACKED_HORIZONTAL_BAR && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    }), statItem.type === STAT_TYPE.STACKED_HORIZONTAL_BAR && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: "statistic-chart-parameter-divider"
     }), /*#__PURE__*/React.createElement(DataSort, {
       statItem: statItem,

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

@@ -116,7 +116,7 @@ class PieSettings extends Component {
       summary_method
     } = statItem || {};
     if (settingType === 'style') {
-      if (statItem.type == STAT_TYPE.TREEMAP) {
+      if (statItem.type === STAT_TYPE.TREEMAP) {
         return null;
       }
       return /*#__PURE__*/React.createElement(StyleSettings, {

package/es/stat-editor/stat-settings/basic-chart-settings/pivot-table-settings.js

@@ -246,7 +246,7 @@ class PivotSettings extends Component {
           const {
             summary_method
           } = statItem || {};
-          if (summary_method == SUMMARY_METHOD_MAP.Sum || summary_method === SUMMARY_METHOD_MAP.Mean) {
+          if (summary_method === SUMMARY_METHOD_MAP.Sum || summary_method === SUMMARY_METHOD_MAP.Mean) {
             updated.summary_method = SUMMARY_METHOD_MAP.Min;
           }
         }

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

@@ -20,7 +20,7 @@ class BarChartStyle extends Component {
         y_axis_auto_range
       } = statItem || {};
       const updated = {
-        y_axis_auto_range: y_axis_auto_range == undefined ? false : !y_axis_auto_range
+        y_axis_auto_range: y_axis_auto_range === undefined || y_axis_auto_range === null ? false : !y_axis_auto_range
       };
       this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
@@ -57,7 +57,7 @@ class BarChartStyle extends Component {
         y_axis_min,
         y_axis_max
       } = statItem;
-      const checked = y_axis_auto_range == undefined ? true : y_axis_auto_range;
+      const checked = y_axis_auto_range === undefined || y_axis_auto_range === null ? true : y_axis_auto_range;
       return /*#__PURE__*/React.createElement("div", {
         className: "mt-1"
       }, /*#__PURE__*/React.createElement(ToggleSetting, {
@@ -190,7 +190,7 @@ class BarChartStyle extends Component {
       const {
         type: columnType
       } = groupByColumn;
-      if (columnType == CellType.SINGLE_SELECT) {
+      if (columnType === CellType.SINGLE_SELECT) {
         return true;
       }
       return false;
@@ -247,7 +247,7 @@ class BarChartStyle extends Component {
       isChecked: show_y_axis_label || false,
       handleToggleChange: this.onToggleYAxisLabel,
       label: intl.get('Display_title')
-    }), show_y_axis_label && (this.props.enableYAxisCustomTitle || chartType == STAT_TYPE.BAR_STACK) && /*#__PURE__*/React.createElement(CustomTitleSetting, {
+    }), show_y_axis_label && (this.props.enableYAxisCustomTitle || chartType === STAT_TYPE.BAR_STACK) && /*#__PURE__*/React.createElement(CustomTitleSetting, {
       titleName: title_name || '',
       updateTitleName: this.updateTitleName
     }), show_y_axis_label && /*#__PURE__*/React.createElement(AxisLabelPosition, {
@@ -266,7 +266,7 @@ class BarChartStyle extends Component {
       className: "statistic-chart-parameter-item"
     }, /*#__PURE__*/React.createElement(IndToggleSetting, {
       isChecked: display_data || false,
-      label: statItem.type == STAT_TYPE.BAR_STACK ? intl.get('Display_stack_total_value') : intl.get('Display_data'),
+      label: statItem.type === STAT_TYPE.BAR_STACK ? intl.get('Display_stack_total_value') : intl.get('Display_data'),
       handleToggleChange: this.onToggleDisplayData
     }), display_data && /*#__PURE__*/React.createElement(LabelFontSizeEditor, {
       fontSize: label_font_size,
@@ -278,7 +278,7 @@ class BarChartStyle extends Component {
       chart: statItem,
       labelColorConfigs: labelColorConfigs,
       updateChart: this.props.updateStatItem
-    })), (this.props.isDisplayEachBlockData || chartType == STAT_TYPE.BAR_STACK) && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    })), (this.props.isDisplayEachBlockData || chartType === STAT_TYPE.BAR_STACK) && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: "statistic-chart-parameter-divider"
     }), /*#__PURE__*/React.createElement("div", {
       className: "statistic-chart-parameter-item"

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

@@ -35,7 +35,7 @@ class CompletenessStyle extends Component {
         y_axis_auto_range
       } = statItem || {};
       const updated = {
-        y_axis_auto_range: y_axis_auto_range == undefined ? false : !y_axis_auto_range
+        y_axis_auto_range: y_axis_auto_range === undefined || y_axis_auto_range === null ? false : !y_axis_auto_range
       };
       this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
@@ -75,7 +75,7 @@ class CompletenessStyle extends Component {
       y_axis_min,
       y_axis_max
     } = statItem;
-    const checked = y_axis_auto_range == undefined ? true : y_axis_auto_range;
+    const checked = y_axis_auto_range === undefined || y_axis_auto_range === null ? true : y_axis_auto_range;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: "statistic-chart-parameter-item"
     }, /*#__PURE__*/React.createElement(IndToggleSetting, {

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

@@ -122,7 +122,7 @@ class HorizontalBarChartStyle extends Component {
         h_axis_auto_range
       } = statItem || {};
       const updated = {
-        h_axis_auto_range: h_axis_auto_range == undefined ? false : !h_axis_auto_range
+        h_axis_auto_range: h_axis_auto_range === undefined || h_axis_auto_range === null ? false : !h_axis_auto_range
       };
       this.props.updateStatItem(Object.assign({}, statItem, updated));
     };
@@ -166,7 +166,7 @@ class HorizontalBarChartStyle extends Component {
         table_id,
         column_groupby_column_key
       } = statItem;
-      if (type == STAT_TYPE.HORIZONTAL_GROUP_BAR || type == STAT_TYPE.STACKED_HORIZONTAL_BAR) {
+      if (type === STAT_TYPE.HORIZONTAL_GROUP_BAR || type === STAT_TYPE.STACKED_HORIZONTAL_BAR) {
         if (!column_groupby_column_key) {
           return false;
         }
@@ -175,7 +175,7 @@ class HorizontalBarChartStyle extends Component {
         const {
           type: columnType
         } = groupByColumn;
-        if (columnType == CellType.SINGLE_SELECT) {
+        if (columnType === CellType.SINGLE_SELECT) {
           return true;
         }
         return false;
@@ -191,7 +191,7 @@ class HorizontalBarChartStyle extends Component {
         h_axis_min,
         h_axis_max
       } = statItem;
-      const checked = h_axis_auto_range == undefined ? true : h_axis_auto_range;
+      const checked = h_axis_auto_range === undefined || h_axis_auto_range === null ? true : h_axis_auto_range;
       return /*#__PURE__*/React.createElement("div", {
         className: "mt-1"
       }, /*#__PURE__*/React.createElement(ToggleSetting, {
@@ -225,7 +225,7 @@ class HorizontalBarChartStyle extends Component {
       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, {
+    }), 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, {
@@ -256,7 +256,7 @@ class HorizontalBarChartStyle extends Component {
     }, /*#__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')
+      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,

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

@@ -15,7 +15,7 @@ class LabelFontSizeEditor extends Component {
       }
     };
     this.onKeyDown = e => {
-      if (e.key == 'Enter') {
+      if (e.key === 'Enter') {
         e.preventDefault();
         e.target.blur();
       }

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

@@ -136,7 +136,7 @@ class PieStyleSettings extends Component {
         return options[0]; // the 'percent' option
       }
 
-      return options.filter(option => option.value == label_format)[0] || options[0];
+      return options.filter(option => option.value === label_format)[0] || options[0];
     };
     this.onSelectLabelFormat = option => {
       const {
@@ -181,7 +181,7 @@ class PieStyleSettings extends Component {
       const {
         label_position
       } = this.props.statItem;
-      return options.filter(option => option.value == label_position)[0] || options[0];
+      return options.filter(option => option.value === label_position)[0] || options[0];
     };
     this.onSelectLabelPosition = option => {
       const {
@@ -261,7 +261,7 @@ class PieStyleSettings extends Component {
       const {
         type: columnType
       } = groupByColumn;
-      if (columnType == CellType.SINGLE_SELECT) {
+      if (columnType === CellType.SINGLE_SELECT) {
         return true;
       }
       return false;
@@ -292,7 +292,7 @@ class PieStyleSettings extends Component {
         display_annotation
       } = statItem;
       // for stat items created before `display_annotation` was added.
-      if (display_annotation == undefined) {
+      if (display_annotation === undefined || display_annotation === null) {
         display_annotation = true;
       }
       return display_annotation;
@@ -338,7 +338,7 @@ class PieStyleSettings extends Component {
     } = statItem;
     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", {
+    }), 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"

package/es/stat-editor/stat-settings/basic-chart-settings/summary-method-setting.js

@@ -36,7 +36,7 @@ class SummaryMethodSettings extends Component {
       let selectedColumnOption = this.props.getSelectedColumnOption(summaryColumnKey, numericColumnsOptions);
       if (selectedColumnOption && TIME_COLUMN_LIST.includes(selectedColumnOption.value.type)) {
         summaryMethodOption = summaryMethodOption.filter(option => {
-          return option.value == DATE_COLUMN_SUMMARY_METHOD[0] || option.value == DATE_COLUMN_SUMMARY_METHOD[1];
+          return option.value === DATE_COLUMN_SUMMARY_METHOD[0] || option.value === DATE_COLUMN_SUMMARY_METHOD[1];
         });
       }
       return /*#__PURE__*/React.createElement("div", {

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

@@ -29,7 +29,8 @@ class GroupingSettings extends Component {
       } = _ref;
       if (y_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
         return GROUP_TYPES.SINGLE_NUMERIC_COLUMN;
-      } else if (y_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
+      }
+      if (y_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
         return GROUP_TYPES.SINGLE_NUMERIC_COLUMN;
       }
       return GROUP_TYPES.COUNT;

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

@@ -33,7 +33,7 @@ class ColorGroupSelector extends Component {
     const {
       currentColor
     } = this.props;
-    const currentOption = this.colorOptions.filter(item => item.value == currentColor)[0] || this.colorOptions[0];
+    const currentOption = this.colorOptions.filter(item => 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, {

package/es/stat-list/chart-preview.js

@@ -7,6 +7,10 @@ import { STAT_TYPE } from '../constants';
 class ChartPreview extends Component {
   constructor() {
     super(...arguments);
+    this.onMouseDown = event => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
     this.onToggleShowEnlarged = event => {
       if (event) {
         event.preventDefault();
@@ -107,6 +111,7 @@ class ChartPreview extends Component {
       className: "statistic-chart-preview-operations"
     }, /*#__PURE__*/React.createElement("span", {
       className: "statistic-chart-preview-microscope",
+      onMouseDown: this.onMouseDown,
       onClick: this.onToggleShowEnlarged
     }, /*#__PURE__*/React.createElement("i", {
       className: "dtable-font dtable-icon-open"

package/es/stat-list/index.js

@@ -14,7 +14,7 @@ class StatList extends Component {
     this.getStatItemsLayout = statItems => {
       return Array.isArray(statItems) ? statItems.map(chart => {
         // eslint-disable-next-line
-        if (chart.layout.y == null) {
+        if (chart.layout.y === null || chart.layout.y === undefined) {
           return {
             ...chart.layout,
             y: Infinity

package/es/stat-view/area-chart.js

@@ -250,7 +250,7 @@ class AreaChart extends BaseChart {
       };
 
       // eslint-disable-next-line
-      if (y_axis_auto_range == undefined || y_axis_auto_range) {
+      if (y_axis_auto_range === undefined || y_axis_auto_range === null || y_axis_auto_range) {
         valueScaleOptions = Object.assign(valueScaleOptions, {
           nice: true
         });

package/es/stat-view/bar-chart.js

@@ -41,7 +41,7 @@ class BarChart extends BaseChart {
         sort_type
       } = statItem;
       let data = originalData;
-      if (type == STAT_TYPE.BAR_STACK && sort_type) {
+      if (type === STAT_TYPE.BAR_STACK && sort_type) {
         data = sortDataByGroupSum(originalData, sort_type);
       }
       this.initChartHandler();
@@ -206,7 +206,7 @@ class BarChart extends BaseChart {
         }
       };
       let displayData = display_data;
-      if (chartType == STAT_TYPE.BAR_STACK) {
+      if (chartType === STAT_TYPE.BAR_STACK) {
         displayData = display_each_block_data;
         if (displayData) {
           labelCfg.position = 'middle';
@@ -286,7 +286,7 @@ class BarChart extends BaseChart {
       };
 
       // eslint-disable-next-line
-      if (y_axis_auto_range == undefined || y_axis_auto_range) {
+      if (y_axis_auto_range === undefined || y_axis_auto_range) {
         valueScaleOptions = Object.assign(valueScaleOptions, {
           nice: true
         });

package/es/stat-view/combination-chart.js

@@ -291,7 +291,7 @@ class CombinationChart extends BaseChart {
             fill: themeColors.textColor
           },
           formatter: name => {
-            if (name === '' || name == null) {
+            if (name === '' || name === null || name === undefined) {
               return intl.get(EMPTY_NAME);
             }
             return name;
@@ -359,7 +359,7 @@ class CombinationChart extends BaseChart {
       }).adjust('dodge').tooltip('name*formatted_value_left', (name, value) => {
         return {
           value,
-          title: y_axis_left_summary_type == SUMMARY_TYPE.COUNT ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[y_axis_left_summary_method]),
+          title: y_axis_left_summary_type === SUMMARY_TYPE.COUNT ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[y_axis_left_summary_method]),
           name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
         };
       });
@@ -385,7 +385,7 @@ class CombinationChart extends BaseChart {
       this.chart.line().position('name*value_right').color(currentTheme && currentTheme.colors[1]).size(3).tooltip('name*formatted_value_right', (name, value) => {
         return {
           value,
-          title: y_axis_right_summary_type == SUMMARY_TYPE.COUNT ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[y_axis_right_summary_method]),
+          title: y_axis_right_summary_type === SUMMARY_TYPE.COUNT ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[y_axis_right_summary_method]),
           name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
         };
       });
@@ -399,7 +399,7 @@ class CombinationChart extends BaseChart {
       }).tooltip('name*formatted_value_right', (name, value) => {
         return {
           value,
-          title: y_axis_right_summary_type == SUMMARY_TYPE.COUNT ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[y_axis_right_summary_method]),
+          title: y_axis_right_summary_type === SUMMARY_TYPE.COUNT ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[y_axis_right_summary_method]),
           name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
         };
       });

package/es/stat-view/compare-chart.js

@@ -120,7 +120,7 @@ class CompareChart extends BaseChart {
       };
 
       // eslint-disable-next-line
-      if (y_axis_auto_range == undefined || y_axis_auto_range) {
+      if (y_axis_auto_range === undefined || y_axis_auto_range === null || y_axis_auto_range) {
         valueScaleOptions = Object.assign(valueScaleOptions, {
           nice: true
         });

package/es/stat-view/completeness-chart.js

@@ -23,14 +23,14 @@ class CompletenessChart extends BaseChart {
       this.chart = null;
     };
     this.sortData = (data, sortType) => {
-      const compareCompleteness = sortType == 'ascending' ? function (a, b) {
+      const compareCompleteness = sortType === 'ascending' ? function (a, b) {
         return a - b;
       } : function (a, b) {
         return b - a;
       };
       const sortBy = (a, b) => {
         if (a.name === b.name) {
-          return a.type == 'completed' ? -1 : 1;
+          return a.type === 'completed' ? -1 : 1;
         }
         const aCompleteness = a.current_value / a.target_value;
         const bCompleteness = b.current_value / b.target_value;

package/es/stat-view/heat-map.js

@@ -75,7 +75,7 @@ class HeatMap extends BaseChart {
         getTableById,
         statItem
       } = this.props;
-      const currentColorOption = COLOR_OPTIONS.filter(item => item.name == statItem.data_color)[0] || COLOR_OPTIONS[0];
+      const currentColorOption = COLOR_OPTIONS.filter(item => item.name === statItem.data_color)[0] || COLOR_OPTIONS[0];
       const {
         exampleColors
       } = currentColorOption;

package/es/stat-view/horizontal-bar-chart.js

@@ -39,7 +39,7 @@ class HorizontalBarChart extends BaseChart {
       } = statItem;
       this.initChartHandler();
       let data = originalData;
-      if (type == STAT_TYPE.STACKED_HORIZONTAL_BAR && sort_type) {
+      if (type === STAT_TYPE.STACKED_HORIZONTAL_BAR && sort_type) {
         let convertedSortType = sort_type;
         if (sort_type === DATA_SORT_TYPE.ASCENDING) {
           convertedSortType = DATA_SORT_TYPE.DESCENDING;
@@ -138,7 +138,7 @@ class HorizontalBarChart extends BaseChart {
           return this.getNumberDisplayString(value, summaryColumnData, horizontal_axis_summary_method);
         }
       };
-      if (h_axis_auto_range == undefined || h_axis_auto_range) {
+      if (h_axis_auto_range === undefined || h_axis_auto_range === null || h_axis_auto_range) {
         valueScaleOptions = Object.assign(valueScaleOptions, {
           // Automatically adjust the maximum and minimum values
           nice: true
@@ -243,7 +243,7 @@ class HorizontalBarChart extends BaseChart {
         }
       };
       let displayData = display_data;
-      if (statItem.type == STAT_TYPE.STACKED_HORIZONTAL_BAR) {
+      if (statItem.type === STAT_TYPE.STACKED_HORIZONTAL_BAR) {
         const {
           display_each_block_data
         } = statItem;
@@ -298,7 +298,7 @@ class HorizontalBarChart extends BaseChart {
       }).adjust([{
         reverseOrder: true,
         // for 'stack'. It only work for 'stack'.
-        type: statItem.type == STAT_TYPE.STACKED_HORIZONTAL_BAR ? 'stack' : 'dodge'
+        type: statItem.type === STAT_TYPE.STACKED_HORIZONTAL_BAR ? 'stack' : 'dodge'
       }]).state({
         active: {
           style: {

package/es/stat-view/line-chart.js

@@ -136,7 +136,7 @@ class LineChart extends BaseChart {
       };
 
       // eslint-disable-next-line
-      if (y_axis_auto_range == undefined || y_axis_auto_range) {
+      if (y_axis_auto_range === undefined || y_axis_auto_range === null || y_axis_auto_range) {
         valueScaleOptions = Object.assign(valueScaleOptions, {
           nice: true
         });

package/es/stat-view/map.js

@@ -89,7 +89,7 @@ class Map extends BaseChart {
         summary_method,
         summary_column
       } = this.props.statItem;
-      const currentColorOption = COLOR_OPTIONS.filter(item => item.name == data_color)[0] || COLOR_OPTIONS[0];
+      const currentColorOption = COLOR_OPTIONS.filter(item => item.name === data_color)[0] || COLOR_OPTIONS[0];
       const {
         exampleColors,
         highlightedBorderColor

package/es/stat-view/pie-chart.js

@@ -113,7 +113,7 @@ class PieChart extends BaseChart {
           content: this.getLabel(value, percent)
         };
       }, {
-        offset: !label_position || label_position == LABEL_POSITIONS[0] ? isCreating ? -10 : -2 : undefined,
+        offset: !label_position || label_position === LABEL_POSITIONS[0] ? isCreating ? -10 : -2 : undefined,
         style: {
           fill: themeColors.labelColor,
           fontSize: this.getLabelFontSize(),

package/es/stat-view/ring-chart.js

@@ -146,7 +146,7 @@ class RingChart extends BaseChart {
           content: this.getLabel(value, percent)
         };
       }, {
-        offset: !label_position || label_position == LABEL_POSITIONS[0] ? isCreating ? -10 : -2 : undefined,
+        offset: !label_position || label_position === LABEL_POSITIONS[0] ? isCreating ? -10 : -2 : undefined,
         style: {
           fill: themeColors.labelColor,
           fontSize: this.getLabelFontSize(),
@@ -180,7 +180,7 @@ class RingChart extends BaseChart {
         itemTpl: '<div class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</div>'
       });
       this.chart.interaction('element-active');
-      if (display_annotation == undefined || display_annotation) {
+      if (display_annotation === undefined || display_annotation === null || display_annotation) {
         this.setAnnotation({
           name: intl.get(TITLE_TOTAL),
           value: summaryColumn ? this.getNumberDisplayString(this.sum, summaryColumnData, summary_method) : this.sum

package/es/stat-view/treemap-chart.js

@@ -111,7 +111,7 @@ class TreemapChart extends BaseChart {
         children: newData.map(item => {
           let name = item.name;
           item.name = name || name === 0 ? name : intl.get(EMPTY_NAME);
-          if (name == 'Others') {
+          if (name === 'Others') {
             item.name = intl.get('Others');
           }
           return item;
@@ -167,7 +167,7 @@ class TreemapChart extends BaseChart {
       chart.polygon().position('x*y').color('name', colorSet).tooltip('name*formatted_value*percent', (name, value, percent) => {
         return {
           name,
-          info: summary_type == STATISTICS_COUNT_TYPE.COUNT ? "".concat(value) : "".concat(selectedNumericColumn.name, ": ").concat(value, " (").concat(percent, ")")
+          info: summary_type === STATISTICS_COUNT_TYPE.COUNT ? "".concat(value) : "".concat(selectedNumericColumn.name, ": ").concat(value, " (").concat(percent, ")")
         };
       }).style({
         lineWidth: 1,

package/es/stat-view/world-map.js

@@ -75,7 +75,7 @@ class WorldMap extends BaseChart {
         summary_method,
         summary_column
       } = this.props.statItem;
-      const currentColorOption = COLOR_OPTIONS.filter(item => item.name == data_color)[0] || COLOR_OPTIONS[0];
+      const currentColorOption = COLOR_OPTIONS.filter(item => item.name === data_color)[0] || COLOR_OPTIONS[0];
       const {
         exampleColors,
         highlightedBorderColor

package/es/tabs/tab.js

@@ -74,7 +74,7 @@ class DashBoardTab extends Component {
       const {
         _id
       } = this.props.item;
-      if (draggedDashboardId == _id) {
+      if (draggedDashboardId === _id) {
         return;
       }
       this.props.onMoveDashboard && this.props.onMoveDashboard(draggedDashboardId, _id, dropRelativePosition);
@@ -114,7 +114,7 @@ class DashBoardTab extends Component {
       onDragOver: this.onDragOver,
       onDragLeave: this.onDragLeave,
       onDrop: this.onDrop,
-      className: "\n          ".concat(styles['dashboard-tab'], "\n          ").concat(dropRelativePosition == 'before' ? styles['dashboard-tab-can-drop-before'] : '', "\n          ").concat(dropRelativePosition == 'after' ? styles['dashboard-tab-can-drop-after'] : '', "\n        ")
+      className: "\n          ".concat(styles['dashboard-tab'], "\n          ").concat(dropRelativePosition === 'before' ? styles['dashboard-tab-can-drop-before'] : '', "\n          ").concat(dropRelativePosition === 'after' ? styles['dashboard-tab-can-drop-after'] : '', "\n        ")
     }, /*#__PURE__*/React.createElement("div", {
       ref: this.props.setViewItem,
       onClick: this.props.onSelectDashboard,

package/es/utils/common-utils.js

@@ -331,8 +331,8 @@ export const getCurrentTheme = colorThemeName => {
 export const sortDataByGroupSum = (data, sortType) => {
   const nameSumMap = [];
   data.forEach(item => {
-    if (nameSumMap.filter(filteredItem => filteredItem.name == item.name).length == 0) {
-      const items = data.filter(originItem => originItem.name == item.name);
+    if (nameSumMap.filter(filteredItem => filteredItem.name === item.name).length === 0) {
+      const items = data.filter(originItem => originItem.name === item.name);
       const valueSum = items.reduce((accumulator, currentItem) => accumulator + currentItem.value, 0);
       nameSumMap.push({
         name: item.name,

package/es/utils/row-utils.js

@@ -73,7 +73,7 @@ export const getFormattedLabel = (column, name, collaborators) => {
       collaborators
     });
   } else if (columnType === CellType.CHECKBOX) {
-    return name == 'true' ? 'Checked' : 'Unchecked';
+    return name === 'true' ? 'Checked' : 'Unchecked';
   } else if (FORMULA_COLUMN_TYPES_MAP[columnType]) {
     const {
       result_type,

package/es/utils/stat-utils.js

@@ -195,6 +195,7 @@ class StatUtils {
             }
         }
       }
+      return 0;
     });
   }
   static sortDataByKey(data, key, sortType) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dtable-statistic",
-  "version": "4.3.2",
+  "version": "4.3.4",
   "description": "statistics",
   "main": "dist/dtable-statistic.js",
   "author": "seafile",
@@ -28,6 +28,74 @@
   "peerDependencies": {
     "@antv/scale": "0.3.14"
   },
+  "devDependencies": {
+    "@babel/cli": "7.22.15",
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
+    "@babel/plugin-transform-runtime": "7.22.10",
+    "@babel/runtime": "7.22.11",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@svgr/webpack": "8.1.0",
+    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "13.5.0",
+    "autoprefixer": "10.4.5",
+    "babel-eslint": "10.0.1",
+    "babel-jest": "^27.4.2",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-import": "^1.13.6",
+    "babel-plugin-named-asset-import": "^0.3.8",
+    "babel-plugin-on-demand-loading": "^0.0.9",
+    "babel-preset-react-app": "^10.0.1",
+    "bfj": "^7.0.2",
+    "browserslist": "^4.18.1",
+    "camelcase": "^6.2.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "css-loader": "^6.5.1",
+    "css-minimizer-webpack-plugin": "^3.2.0",
+    "dotenv": "^10.0.0",
+    "dotenv-expand": "^5.1.0",
+    "eslint": "^8.3.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-webpack-plugin": "^3.1.1",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^10.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^27.4.3",
+    "jest-resolve": "^27.4.2",
+    "jest-watch-typeahead": "^1.0.0",
+    "less": "^4.2.0",
+    "less-loader": "^11.1.3",
+    "mini-css-extract-plugin": "^2.4.5",
+    "node-polyfill-webpack-plugin": "2.0.1",
+    "postcss": "^8.4.31",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^6.2.1",
+    "postcss-normalize": "^10.0.1",
+    "postcss-preset-env": "^7.0.1",
+    "prompts": "^2.4.2",
+    "react-app-polyfill": "^3.0.0",
+    "react-dev-utils": "^12.0.1",
+    "react-refresh": "^0.11.0",
+    "resolve": "^1.20.0",
+    "resolve-url-loader": "^4.0.0",
+    "sass-loader": "^12.3.0",
+    "semver": "^7.3.5",
+    "source-map-loader": "^3.0.0",
+    "style-loader": "^3.3.1",
+    "svg-sprite-loader": "^6.0.11",
+    "svgo-loader": "^3.0.1",
+    "tailwindcss": "^3.0.2",
+    "terser-webpack-plugin": "^5.2.5",
+    "url-loader": "^4.1.1",
+    "web-vitals": "^2.1.4",
+    "webpack": "^5.64.4",
+    "webpack-dev-server": "^4.6.0",
+    "webpack-manifest-plugin": "^4.0.2",
+    "workbox-webpack-plugin": "^6.4.1",
+    "worker-loader": "3.0.8"
+  },
   "scripts": {
     "clean:esm": "rm -rf es && mkdir es",
     "clean:lib": "rm -rf lib && mkdir lib",
@@ -47,8 +115,20 @@
     "index.js",
     "package.json"
   ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/seatable/seatable-plugin-advanced-chart.git"
+  },
+  "keywords": [
+    "statistic",
+    "chart",
+    "pivot table"
+  ],
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
   "browserslist": {
     "production": [
@@ -61,128 +141,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "jest": {
-    "roots": [
-      "<rootDir>/src"
-    ],
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,ts,tsx}",
-      "!src/**/*.d.ts"
-    ],
-    "setupFiles": [
-      "react-app-polyfill/jsdom"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/src/setupTests.js"
-    ],
-    "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
-      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
-    ],
-    "testEnvironment": "jest-environment-jsdom-fourteen",
-    "transform": {
-      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
-      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
-    },
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
-      "^.+\\.module\\.(css|sass|scss)$"
-    ],
-    "modulePaths": [],
-    "moduleNameMapper": {
-      "^react-native$": "react-native-web",
-      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
-    },
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "web.ts",
-      "ts",
-      "web.tsx",
-      "tsx",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node"
-    ],
-    "watchPlugins": [
-      "jest-watch-typeahead/filename",
-      "jest-watch-typeahead/testname"
-    ]
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "7.4.3",
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/plugin-proposal-export-default-from": "^7.5.2",
-    "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.2",
-    "@babel/plugin-transform-member-expression-literals": "^7.2.0",
-    "@babel/plugin-transform-property-literals": "^7.2.0",
-    "@babel/plugin-transform-runtime": "^7.4.4",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/runtime": "^7.14.0",
-    "@svgr/webpack": "4.1.0",
-    "@typescript-eslint/eslint-plugin": "1.6.0",
-    "@typescript-eslint/parser": "1.6.0",
-    "babel-eslint": "10.0.1",
-    "babel-jest": "^24.8.0",
-    "babel-loader": "8.0.5",
-    "babel-plugin-named-asset-import": "^0.3.2",
-    "babel-preset-react-app": "^9.0.0",
-    "camelcase": "^5.2.0",
-    "case-sensitive-paths-webpack-plugin": "2.2.0",
-    "css-loader": "^3.0.0",
-    "debug": "^4.1.1",
-    "dotenv": "6.2.0",
-    "dotenv-expand": "4.2.0",
-    "eslint": "^5.16.0",
-    "eslint-config-react-app": "^4.0.1",
-    "eslint-loader": "2.1.2",
-    "eslint-plugin-flowtype": "2.50.1",
-    "eslint-plugin-import": "2.16.0",
-    "eslint-plugin-jsx-a11y": "6.2.1",
-    "eslint-plugin-react": "7.12.4",
-    "eslint-plugin-react-hooks": "^1.5.0",
-    "file-loader": "^4.0.0",
-    "fs-extra": "7.0.1",
-    "html-webpack-plugin": "4.0.0-beta.5",
-    "identity-obj-proxy": "3.0.0",
-    "is-wsl": "^1.1.0",
-    "jest": "24.7.1",
-    "jest-environment-jsdom-fourteen": "0.1.0",
-    "jest-resolve": "24.7.1",
-    "jest-watch-typeahead": "0.3.0",
-    "less": "^3.10.3",
-    "less-loader": "^5.0.0",
-    "mini-css-extract-plugin": "0.5.0",
-    "optimize-css-assets-webpack-plugin": "5.0.1",
-    "pnp-webpack-plugin": "1.2.1",
-    "postcss-flexbugs-fixes": "^4.1.0",
-    "postcss-loader": "^3.0.0",
-    "postcss-normalize": "7.0.1",
-    "postcss-preset-env": "6.6.0",
-    "postcss-safe-parser": "4.0.1",
-    "react-app-polyfill": "^3.0.0",
-    "react-dev-utils": "^9.0.1",
-    "resolve": "1.10.0",
-    "sass-loader": "^7.1.0",
-    "semver": "6.0.0",
-    "style-loader": "^0.23.1",
-    "svg-sprite-loader": "^6.0.11",
-    "svgo-loader": "^3.0.0",
-    "terser-webpack-plugin": "^1.2.3",
-    "ts-pnp": "1.1.2",
-    "url-loader": "^2.0.0",
-    "webpack": "4.29.6",
-    "webpack-bundle-analyzer": "^4.7.0",
-    "webpack-cli": "^3.3.4",
-    "webpack-dev-server": "3.2.1",
-    "webpack-manifest-plugin": "2.0.4",
-    "workbox-webpack-plugin": "4.2.0",
-    "worker-loader": "^3.0.8"
   }
 }