dtable-statistic 4.0.3 → 4.0.5

package/es/stat-editor/index.js

@@ -57,6 +57,7 @@ var StatEditor = /*#__PURE__*/function (_Component) {
         getTables: getTables,
         getViews: getViews,
         getTableById: getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.modifyChart
       }) : /*#__PURE__*/React.createElement(AdvancedChartSettings, {
         statItem: statItem,
@@ -65,6 +66,7 @@ var StatEditor = /*#__PURE__*/function (_Component) {
         getTables: getTables,
         getViews: getViews,
         getTableById: getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.modifyChart
       }));
     }

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

@@ -130,6 +130,7 @@ var BasicNumberCardSettings = /*#__PURE__*/function (_Component) {
         getTables: this.props.getTables,
         getViews: this.props.getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -358,6 +358,7 @@ var CombinationSettings = /*#__PURE__*/function (_Component) {
         getTables: getTables,
         getViews: getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -164,6 +164,7 @@ var DashboardChartSettings = /*#__PURE__*/function (_Component) {
         getTables: getTables,
         getViews: getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -8,7 +8,7 @@ import BaseSettings from '../public-setting/base-settings';
 import ColumnSettings from '../public-setting/column-settings';
 import SummarySettings from './summary-settings';
 import StyleSettings from './style-setting/heat-map-settings';
-import { TIME_COLUMN_LIST } from '../../../constants';
+import { isStatisticDateColumn } from '../../../utils/column-utils';
 var HeatMapSettings = /*#__PURE__*/function (_Component) {
   _inherits(HeatMapSettings, _Component);
   var _super = _createSuper(HeatMapSettings);
@@ -32,7 +32,7 @@ var HeatMapSettings = /*#__PURE__*/function (_Component) {
     var columns = props.columns,
       getColumnsOptions = props.getColumnsOptions;
     var dateColumns = columns.filter(function (column) {
-      return TIME_COLUMN_LIST.includes(column.type);
+      return isStatisticDateColumn(column);
     });
     _this.dateColumnsOptions = getColumnsOptions(dateColumns);
     return _this;
@@ -44,7 +44,7 @@ var HeatMapSettings = /*#__PURE__*/function (_Component) {
         var columns = nextProps.columns,
           getColumnsOptions = nextProps.getColumnsOptions;
         var dateColumns = columns.filter(function (column) {
-          return TIME_COLUMN_LIST.includes(column.type);
+          return isStatisticDateColumn(column);
         });
         this.dateColumnsOptions = getColumnsOptions(dateColumns);
       }
@@ -76,6 +76,7 @@ var HeatMapSettings = /*#__PURE__*/function (_Component) {
         getTables: getTables,
         getViews: getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -26,13 +26,6 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
     var _this;
     _classCallCheck(this, AdvancedChartSettings);
     _this = _super.call(this, props);
-    _this.getDefaultColumnGroupbyType = function (_ref) {
-      var summary_type = _ref.summary_type;
-      if (summary_type === SUMMARY_TYPE.ADVANCED) {
-        return GROUP_TYPES.SINGLE_NUMERIC_COLUMN;
-      }
-      return GROUP_TYPES.COUNT;
-    };
     _this.getNumericColumns = function (columns) {
       if (!columns) return [];
       return columns.filter(function (column) {
@@ -67,6 +60,7 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
               getViews: getViews,
               getTableById: getTableById,
               getColumnsOptions: _this.getColumnsOptions,
+              getConvertedChart: _this.props.getConvertedChart,
               updateStatItem: updateStatItem,
               onChangeSummaryType: _this.onChangeSummaryType,
               onSelectSummaryColumn: _this.onSelectSummaryColumn,
@@ -89,6 +83,7 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
+              getConvertedChart: _this.props.getConvertedChart,
               updateStatItem: updateStatItem,
               onChangeSummaryType: _this.onChangeSummaryType,
               onSelectSummaryColumn: _this.onSelectSummaryColumn,
@@ -110,6 +105,7 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
+              getConvertedChart: _this.props.getConvertedChart,
               updateStatItem: updateStatItem,
               onChangeSummaryType: _this.onChangeSummaryType,
               onSelectSummaryColumn: _this.onSelectSummaryColumn,
@@ -131,6 +127,7 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
+              getConvertedChart: _this.props.getConvertedChart,
               updateStatItem: updateStatItem,
               onChangeSummaryType: _this.onChangeSummaryType,
               onSelectSummaryColumn: _this.onSelectSummaryColumn,
@@ -148,6 +145,7 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
+              getConvertedChart: _this.props.getConvertedChart,
               updateStatItem: updateStatItem,
               numericColumns: _this.numericColumns,
               getColumnsOptions: _this.getColumnsOptions,
@@ -167,6 +165,7 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
+              getConvertedChart: _this.props.getConvertedChart,
               updateStatItem: updateStatItem,
               numericColumns: _this.numericColumns,
               getColumnsOptions: _this.getColumnsOptions
@@ -186,6 +185,7 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
+              getConvertedChart: _this.props.getConvertedChart,
               updateStatItem: updateStatItem,
               onChangeSummaryType: _this.onChangeSummaryType,
               onSelectSummaryColumn: _this.onSelectSummaryColumn,
@@ -203,6 +203,7 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
+              getConvertedChart: _this.props.getConvertedChart,
               updateStatItem: updateStatItem,
               numericColumns: _this.numericColumns,
               getColumnsOptions: _this.getColumnsOptions
@@ -237,7 +238,7 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
         summary_type = _this$props$statItem.summary_type,
         summary_column = _this$props$statItem.summary_column,
         summary_method = _this$props$statItem.summary_method;
-      if (summaryType === _this.columnGroupbyType) return;
+      if (summaryType === summary_type) return;
       if (summaryType === GROUP_TYPES.SINGLE_NUMERIC_COLUMN) {
         var defaultColumn = _this.numericColumns[0];
         summary_column = defaultColumn ? defaultColumn.key : null;
@@ -248,7 +249,6 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
         summary_method = null;
         summary_column = null;
       }
-      _this.columnGroupbyType = summaryType;
       _this.props.updateStatItem(Object.assign({}, _this.props.statItem, {
         summary_type: summary_type,
         summary_column: summary_column,
@@ -287,7 +287,6 @@ var AdvancedChartSettings = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       settingType: 'data'
     };
-    _this.columnGroupbyType = _this.getDefaultColumnGroupbyType(_statItem);
     return _this;
   }
   _createClass(AdvancedChartSettings, [{

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

@@ -3,12 +3,12 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component, Fragment } from 'react';
-import { CellType, FORMULA_RESULT_TYPE, FORMULA_COLUMN_TYPES } from 'dtable-store';
 import BaseSettings from '../public-setting/base-settings';
 import ColumnSettings from '../public-setting/column-settings';
 import GeoGranularitySettings from './geo-granularity-settings';
 import SummarySettings from './summary-settings';
 import MapStyleSetting from './style-setting/map-setting';
+import { isMapColumn } from '../../../utils/column-utils';
 import { GEOLOCATION_GRANULARITY } from '../../../constants';
 var MapSettings = /*#__PURE__*/function (_Component) {
   _inherits(MapSettings, _Component);
@@ -18,35 +18,10 @@ var MapSettings = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, MapSettings);
     _this = _super.call(this, props);
     _this.getColumns = function (columns) {
-      var geoColumns = columns.filter(function (column) {
-        var type = column.type,
-          data = column.data;
-        if (type === CellType.GEOLOCATION) {
-          var _ref = data || {},
-            geo_format = _ref.geo_format;
-          if (geo_format === 'lng_lat' || geo_format === 'country_region') {
-            return false;
-          }
-          return true;
-        }
-        if (FORMULA_COLUMN_TYPES.includes(type)) {
-          var _ref2 = data || {},
-            result_type = _ref2.result_type,
-            array_type = _ref2.array_type,
-            array_data = _ref2.array_data;
-          if (result_type !== FORMULA_RESULT_TYPE.ARRAY || array_type !== CellType.GEOLOCATION) {
-            return false;
-          }
-          var _ref3 = array_data || {},
-            _geo_format = _ref3.geo_format;
-          if (_geo_format === 'lng_lat' || _geo_format === 'country_region') {
-            return false;
-          }
-          return true;
-        }
-        return false;
+      if (!Array.isArray(columns) || columns.length === 0) return [];
+      return columns.filter(function (column) {
+        return isMapColumn(column);
       });
-      return geoColumns;
     };
     _this.getGeoGranularityOptions = function () {
       return [{
@@ -90,8 +65,8 @@ var MapSettings = /*#__PURE__*/function (_Component) {
     };
     var _columns = props.columns,
       getColumnsOptions = props.getColumnsOptions;
-    var _geoColumns = _this.getColumns(_columns);
-    _this.geoColumnsOptions = getColumnsOptions(_geoColumns);
+    var geoColumns = _this.getColumns(_columns);
+    _this.geoColumnsOptions = getColumnsOptions(geoColumns);
     _this.geoGranularityOptions = _this.getGeoGranularityOptions();
     return _this;
   }
@@ -133,6 +108,7 @@ var MapSettings = /*#__PURE__*/function (_Component) {
         getTables: getTables,
         getViews: getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -8,7 +8,7 @@ import BaseSettings from '../public-setting/base-settings';
 import ColumnSettings from '../public-setting/column-settings';
 import SummarySettings from './summary-settings';
 import ToggleSetting from '../public-setting/toggle-setting';
-import { MIRROR_COLUMN_LIST } from '../../../constants';
+import { isMirrorColumn } from '../../../utils/column-utils';
 var MirrorSettings = /*#__PURE__*/function (_Component) {
   _inherits(MirrorSettings, _Component);
   var _super = _createSuper(MirrorSettings);
@@ -50,7 +50,7 @@ var MirrorSettings = /*#__PURE__*/function (_Component) {
     var columns = props.columns,
       getColumnsOptions = props.getColumnsOptions;
     var statColumns = columns.filter(function (column) {
-      return MIRROR_COLUMN_LIST.includes(column.type);
+      return isMirrorColumn(column);
     });
     var groupColumns = columns.filter(function (column) {
       return column.type === 'single-select';
@@ -66,7 +66,7 @@ var MirrorSettings = /*#__PURE__*/function (_Component) {
         var columns = nextProps.columns,
           getColumnsOptions = nextProps.getColumnsOptions;
         var statColumns = columns.filter(function (column) {
-          return MIRROR_COLUMN_LIST.includes(column.type);
+          return isMirrorColumn(column);
         });
         this.statColumnsOptions = getColumnsOptions(statColumns);
         var groupColumns = columns.filter(function (column) {
@@ -98,6 +98,7 @@ var MirrorSettings = /*#__PURE__*/function (_Component) {
         getTables: getTables,
         getViews: getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -10,7 +10,7 @@ import { DTableSelect } from '../../../components';
 import ColumnSettings from '../public-setting/column-settings';
 import BaseSettings from '../public-setting/base-settings';
 import SummarySettings from './summary-settings';
-import { TIME_COLUMN_LIST } from '../../../constants';
+import { isStatisticDateColumn } from '../../../utils/column-utils';
 var COMPARE_GRANULARITY = ['day', 'week', 'quarter', 'month', 'year', 'days_7', 'days_30'];
 var COMPARED_LIST = (_COMPARED_LIST = {}, _defineProperty(_COMPARED_LIST, COMPARE_GRANULARITY[0], 'Yesterday_vs_the_day_before_yesterday'), _defineProperty(_COMPARED_LIST, COMPARE_GRANULARITY[1], 'Last_week_vs_the_week_before_last'), _defineProperty(_COMPARED_LIST, COMPARE_GRANULARITY[3], 'Last_month_vs_the_month_before_last'), _defineProperty(_COMPARED_LIST, COMPARE_GRANULARITY[2], 'Last_quarter_vs_the_quarter_before_last'), _defineProperty(_COMPARED_LIST, COMPARE_GRANULARITY[4], 'Last_year_vs_the_year_before_last'), _defineProperty(_COMPARED_LIST, COMPARE_GRANULARITY[5], 'Last_7_days_vs_previous_7_days'), _defineProperty(_COMPARED_LIST, COMPARE_GRANULARITY[6], 'Last_30_days_vs_previous_30_days'), _COMPARED_LIST);
 var TrendSettings = /*#__PURE__*/function (_Component) {
@@ -67,7 +67,7 @@ var TrendSettings = /*#__PURE__*/function (_Component) {
     var columns = props.columns,
       getColumnsOptions = props.getColumnsOptions;
     var dateColumns = columns.filter(function (column) {
-      return TIME_COLUMN_LIST.includes(column.type);
+      return isStatisticDateColumn(column);
     });
     _this.dateColumnsOptions = getColumnsOptions(dateColumns);
     _this.dateGranularityOptions = _this.getGranularityOptions(COMPARE_GRANULARITY);
@@ -80,7 +80,7 @@ var TrendSettings = /*#__PURE__*/function (_Component) {
         var columns = nextProps.columns,
           getColumnsOptions = nextProps.getColumnsOptions;
         var dateColumns = columns.filter(function (column) {
-          return TIME_COLUMN_LIST.includes(column.type);
+          return isStatisticDateColumn(column);
         });
         this.dateColumnsOptions = getColumnsOptions(dateColumns);
       }
@@ -107,6 +107,7 @@ var TrendSettings = /*#__PURE__*/function (_Component) {
         getTables: getTables,
         getViews: getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -4,11 +4,11 @@ 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, FORMULA_RESULT_TYPE, FORMULA_COLUMN_TYPES } from 'dtable-store';
 import BaseSettings from '../public-setting/base-settings';
 import ColumnSettings from '../public-setting/column-settings';
 import SummarySettings from './summary-settings';
 import MapStyleSetting from './style-setting/map-setting';
+import { isWorldMapColumn } from '../../../utils/column-utils';
 var WordMapSettings = /*#__PURE__*/function (_Component) {
   _inherits(WordMapSettings, _Component);
   var _super = _createSuper(WordMapSettings);
@@ -17,35 +17,10 @@ var WordMapSettings = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, WordMapSettings);
     _this = _super.call(this, props);
     _this.getColumns = function (columns) {
-      var geoColumns = columns.filter(function (column) {
-        var type = column.type,
-          data = column.data;
-        if (type === CellType.TEXT) return true;
-        if (type === CellType.GEOLOCATION) {
-          var _ref = data || {},
-            geo_format = _ref.geo_format;
-          if (geo_format === 'country_region') {
-            return true;
-          }
-        }
-        if (FORMULA_COLUMN_TYPES.includes(type)) {
-          var _data = column.data;
-          var _ref2 = _data || {},
-            result_type = _ref2.result_type,
-            array_type = _ref2.array_type,
-            array_data = _ref2.array_data;
-          if (result_type !== FORMULA_RESULT_TYPE.ARRAY || array_type !== CellType.GEOLOCATION) {
-            return false;
-          }
-          var _ref3 = array_data || {},
-            _geo_format = _ref3.geo_format;
-          if (_geo_format === 'country_region') {
-            return true;
-          }
-        }
-        return false;
+      if (!Array.isArray(columns) || columns.length === 0) return [];
+      return columns.filter(function (column) {
+        return isWorldMapColumn(column);
       });
-      return geoColumns;
     };
     _this.getSelectedTextColumnOption = function () {
       return _this.textColumnsOptions.find(function (option) {
@@ -104,6 +79,7 @@ var WordMapSettings = /*#__PURE__*/function (_Component) {
         getTables: getTables,
         getViews: getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -106,6 +106,7 @@ var AdvanceBarChartSettings = /*#__PURE__*/function (_Component) {
         getTables: getTables,
         getViews: getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -103,6 +103,7 @@ var BarSettings = /*#__PURE__*/function (_Component) {
         getTables: getTables,
         getViews: getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -177,6 +177,7 @@ var CompletenessSetting = /*#__PURE__*/function (_Component) {
         getTables: getTables,
         getViews: getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -91,6 +91,7 @@ var CustomBarSettings = /*#__PURE__*/function (_Component) {
         getTableById: getTableById,
         getTables: getTables,
         getViews: getViews,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -102,6 +102,7 @@ var BarSettings = /*#__PURE__*/function (_Component) {
         getTables: getTables,
         getViews: getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -103,6 +103,7 @@ var HorizontalGroupBarChartSettings = /*#__PURE__*/function (_Component) {
         getTables: getTables,
         getViews: getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -180,6 +180,7 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               dateGranularityOptions: _this.dateGranularityOptions,
               geolocationGranularityOptions: _this.geolocationGranularityOptions,
               getSelectedColumnOption: _this.getSelectedColumnOption,
+              getConvertedChart: _this.props.getConvertedChart,
               updateStatItem: _this.props.updateStatItem,
               renderIncludeEmpty: _this.renderIncludeEmpty
             });
@@ -199,6 +200,7 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               numericColumnsOptions: _this.numericColumnsOptions,
               dateGranularityOptions: _this.dateGranularityOptions,
               getSelectedColumnOption: _this.getSelectedColumnOption,
+              getConvertedChart: _this.props.getConvertedChart,
               updateStatItem: _this.props.updateStatItem
             });
           }
@@ -223,6 +225,7 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               dateGranularityOptions: _this.dateGranularityOptions,
               geolocationGranularityOptions: _this.geolocationGranularityOptions,
               getSelectedColumnOption: _this.getSelectedColumnOption,
+              getConvertedChart: _this.props.getConvertedChart,
               updateStatItem: _this.props.updateStatItem,
               renderIncludeEmpty: _this.renderIncludeEmpty
             });
@@ -244,6 +247,7 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               dateGranularityOptions: _this.dateGranularityOptions,
               geolocationGranularityOptions: _this.geolocationGranularityOptions,
               getSelectedColumnOption: _this.getSelectedColumnOption,
+              getConvertedChart: _this.props.getConvertedChart,
               updateStatItem: _this.props.updateStatItem,
               renderIncludeEmpty: _this.renderIncludeEmpty
             });
@@ -261,6 +265,7 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               getViews: getViews,
               getTableById: getTableById,
               selectedTable: selectedTable,
+              getConvertedChart: _this.props.getConvertedChart,
               columnsOptions: _this.generalColumnsOptions,
               numericColumnsOptions: _this.numericColumnsOptions,
               dateGranularityOptions: _this.dateGranularityOptions,
@@ -280,6 +285,7 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
+              getConvertedChart: _this.props.getConvertedChart,
               numericColumnsOptions: _this.numericColumnsOptions,
               generalColumnsOptions: _this.generalColumnsOptions,
               columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
@@ -298,6 +304,7 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               getViews: getViews,
               getTableById: getTableById,
               selectedTable: selectedTable,
+              getConvertedChart: _this.props.getConvertedChart,
               generalColumnsOptions: _this.generalColumnsOptions,
               columnGroupbyColumnsOptions: _this.columnGroupbyColumnsOptions,
               numericColumnsOptions: _this.numericColumnsOptions,
@@ -327,6 +334,7 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               geolocationGranularityOptions: _this.geolocationGranularityOptions,
               getSelectedColumnOption: _this.getSelectedColumnOption,
               updateStatItem: _this.props.updateStatItem,
+              getConvertedChart: _this.props.getConvertedChart,
               renderIncludeEmpty: _this.renderIncludeEmpty
             });
           }
@@ -341,6 +349,7 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
+              getConvertedChart: _this.props.getConvertedChart,
               selectedTable: selectedTable,
               generalColumnsOptions: _this.generalColumnsOptions,
               numericColumnsOptions: _this.numericColumnsOptions,
@@ -361,6 +370,7 @@ var BasicChartSettings = /*#__PURE__*/function (_Component) {
               getTables: getTables,
               getViews: getViews,
               getTableById: getTableById,
+              getConvertedChart: _this.props.getConvertedChart,
               selectedTable: selectedTable,
               generalColumnsOptions: _this.generalColumnsOptions,
               pivotTableSummaryColumnOptions: _this.pivotTableSummaryColumnOptions,

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

@@ -140,6 +140,7 @@ var PieSettings = /*#__PURE__*/function (_Component) {
         getTables: this.props.getTables,
         getViews: this.props.getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.updateStatisticsSettings
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -441,6 +441,7 @@ var PivotSettings = /*#__PURE__*/function (_Component) {
         getTables: this.props.getTables,
         getViews: this.props.getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

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

@@ -82,6 +82,7 @@ var ScatterSettings = /*#__PURE__*/function (_Component) {
         getTables: this.props.getTables,
         getViews: this.props.getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

package/es/stat-editor/stat-settings/basic-chart-settings/time-comparison-settings.js

@@ -241,6 +241,7 @@ var TimeComparisonSettings = /*#__PURE__*/function (_Component) {
         getTables: this.props.getTables,
         getViews: this.props.getViews,
         getTableById: this.props.getTableById,
+        getConvertedChart: this.props.getConvertedChart,
         updateStatItem: this.props.updateStatItem
       }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-divider"

package/es/stat-editor/stat-settings/public-setting/base-settings.js

@@ -5,7 +5,9 @@ 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 TypeSettings from './type-settings';
 import { DTableSelect } from '../../../components';
+import ChartService from '../../../service/chart-service';
 import { INIT_STAT_ITEM } from '../../../constants';
 var BaseSettings = /*#__PURE__*/function (_Component) {
   _inherits(BaseSettings, _Component);
@@ -88,8 +90,23 @@ var BaseSettings = /*#__PURE__*/function (_Component) {
         view_id: id
       }));
     };
+    _this.onChangeType = function (type) {
+      var statItem = _this.props.statItem;
+      var table_id = statItem.table_id;
+      var activeTable = _this.props.getTableById(table_id);
+      var newStatistic = _this.props.getConvertedChart({
+        originalStatistic: statItem,
+        targetStatisticType: type,
+        activeTable: activeTable
+      });
+      _this.props.updateStatItem(newStatistic);
+    };
     _this.tablesOptions = _this.getTablesOptions();
     _this.viewsOptions = _this.getViewsOptions(_props);
+    var defaultChartTitle = intl.get('Untitled');
+    _this.charService = new ChartService({
+      defaultChartTitle: defaultChartTitle
+    });
     return _this;
   }
   _createClass(BaseSettings, [{
@@ -102,9 +119,13 @@ var BaseSettings = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
+      var statItem = this.props.statItem;
       var selectedTableOption = this.getSelectedTableOption();
       var selectedViewOption = this.getSelectedViewOption();
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TypeSettings, {
+        chart: statItem,
+        onChange: this.onChangeType
+      }), /*#__PURE__*/React.createElement("div", {
         className: "statistic-chart-parameter-item"
       }, /*#__PURE__*/React.createElement("label", null, intl.get('Table')), /*#__PURE__*/React.createElement(DTableSelect, {
         value: selectedTableOption,

package/es/stat-editor/stat-settings/public-setting/type-settings/index.css

@@ -0,0 +1,29 @@
+.statistic-chart-parameter-item .statistic-selected-type-container {
+  height: 38px;
+  border: 1px solid hsl(0, 0%, 80%);
+  border-radius: 4px;
+  padding-left: 8px;
+  padding-right: 3px;
+  justify-content: space-between;
+  background-color: #fff;
+}
+
+.statistic-chart-parameter-item .statistic-switch-type-container {
+  height: 24px;
+  width: 24px;
+  text-align: center;
+  line-height: 24px;
+  margin-left: 10px;
+}
+
+.statistic-chart-parameter-item .statistic-switch-type-container:hover {
+  cursor: pointer;
+}
+
+.statistic-chart-parameter-item .statistic-switch-type-container .statistic-type-switch-icon {
+  color: hsl(0, 0%, 80%);
+}
+
+.statistic-chart-parameter-item .statistic-switch-type-container:hover .statistic-type-switch-icon {
+  color: hsl(0, 0%, 60%);
+}