sea-chart 2.0.59 → 2.0.60

package/dist/components/statistic-record-dialog/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _DTableSwitch2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableSwitch"));
 var _DTableEmptyTip2 = _interopRequireDefault(require("dtable-ui-component/lib/DTableEmptyTip"));
 var _toaster2 = _interopRequireDefault(require("dtable-ui-component/lib/toaster"));
 var _react = _interopRequireWildcard(require("react"));
@@ -19,6 +20,8 @@ var _loading = _interopRequireDefault(require("../loading"));
 var _search = require("../../utils/search");
 var _chartDataSql = _interopRequireDefault(require("../../utils/sql/chart-data-sql"));
 var _rowRecordUtils = require("../../utils/row-record-utils");
+var _icon = _interopRequireDefault(require("../icon"));
+var _hideColumnPopover = _interopRequireDefault(require("../popover/hide-column-popover/hide-column-popover"));
 var _rowCard = _interopRequireDefault(require("../row-card/row-card"));
 var _commonConstants = require("../../constants/common-constants");
 var _utils = require("../../utils");
@@ -26,7 +29,83 @@ var _constants = require("../../constants");
 require("./index.css");
 class StatisticRecordDialog extends _react.default.Component {
   constructor(_props) {
+    var _this;
     super(_props);
+    _this = this;
+    this.initSearchSettings = (chart, table) => {
+      const allColumnKeys = ((table === null || table === void 0 ? void 0 : table.columns) || []).map(column => column.key);
+      const searchSettingKey = `${chart === null || chart === void 0 ? void 0 : chart.id}-${table === null || table === void 0 ? void 0 : table._id}`;
+      const searchConfig = JSON.parse(window.localStorage.getItem('sea-chart-search-config') || '{}');
+      const searchSetting = searchConfig[searchSettingKey] || {};
+      const nameColumnKey = allColumnKeys[0];
+      const savedColumns = searchSetting.search_participate_columns || allColumnKeys;
+      const searchParticipateColumns = savedColumns.includes(nameColumnKey) ? savedColumns : [nameColumnKey, ...savedColumns];
+      return {
+        isExactSearch: !!searchSetting.is_exact,
+        searchParticipateColumns
+      };
+    };
+    this.onSaveSearchConfig = function () {
+      let updatedConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const {
+        chart
+      } = _this.props.chartRecordsParams || {};
+      if (!chart || !_this.table) return;
+      const searchSettingKey = `${chart.id}-${_this.table._id}`;
+      const searchConfig = JSON.parse(window.localStorage.getItem('sea-chart-search-config') || '{}');
+      window.localStorage.setItem('sea-chart-search-config', JSON.stringify({
+        ...searchConfig,
+        [searchSettingKey]: updatedConfig
+      }));
+    };
+    this.onChangeExactSearch = () => {
+      const isExactSearch = !this.state.isExactSearch;
+      const {
+        rows,
+        searchVal
+      } = this.state;
+      const searchedRowsIds = this.getSearchedRows(rows, searchVal, {
+        isExactSearch
+      });
+      this.setState({
+        isExactSearch,
+        searchedRowsIds
+      });
+      this.onSaveSearchConfig({
+        is_exact: isExactSearch,
+        search_participate_columns: this.state.searchParticipateColumns
+      });
+    };
+    this.modifySearchParticipateColumns = shownColumnKeys => {
+      var _this$table$columns$;
+      const nameColumnKey = (_this$table$columns$ = this.table.columns[0]) === null || _this$table$columns$ === void 0 ? void 0 : _this$table$columns$.key;
+      const searchParticipateColumns = shownColumnKeys.includes(nameColumnKey) ? shownColumnKeys : [nameColumnKey, ...shownColumnKeys];
+      const {
+        rows,
+        searchVal
+      } = this.state;
+      const searchedRowsIds = this.getSearchedRows(rows, searchVal, {
+        searchParticipateColumns
+      });
+      this.setState({
+        searchParticipateColumns,
+        searchedRowsIds
+      });
+      this.onSaveSearchConfig({
+        is_exact: this.state.isExactSearch,
+        search_participate_columns: searchParticipateColumns
+      });
+    };
+    this.toggleSearchHidePopover = () => {
+      this.setState({
+        isShowSearchHidePopover: !this.state.isShowSearchHidePopover
+      });
+    };
+    this.onToggleShowExactMatch = () => {
+      this.setState({
+        isShowExactMatch: !this.state.isShowExactMatch
+      });
+    };
     this.init = () => {
       const {
         chartRecordsParams,
@@ -186,10 +265,22 @@ class StatisticRecordDialog extends _react.default.Component {
         searchVal: ''
       });
     };
-    this.getSearchedRows = (rows, searchVal) => {
+    this.getSearchedRows = function (rows, searchVal) {
+      let settings = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       if (!Array.isArray(rows) || rows.length === 0) return [];
       if (searchVal) {
-        return (0, _search.searchRows)(rows, (0, _dtableUtils.getViewShownColumns)(this.view, this.table.columns), searchVal, row => {
+        var _settings$isExactSear, _settings$searchParti, _this$table$columns$2;
+        const isExactSearch = (_settings$isExactSear = settings.isExactSearch) !== null && _settings$isExactSear !== void 0 ? _settings$isExactSear : _this.state.isExactSearch;
+        const participateKeys = (_settings$searchParti = settings.searchParticipateColumns) !== null && _settings$searchParti !== void 0 ? _settings$searchParti : _this.state.searchParticipateColumns;
+        const nameColumnKey = (_this$table$columns$2 = _this.table.columns[0]) === null || _this$table$columns$2 === void 0 ? void 0 : _this$table$columns$2.key;
+        const searchParticipateColumns = participateKeys.includes(nameColumnKey) ? participateKeys : [nameColumnKey, ...participateKeys];
+        const searchColumns = (0, _dtableUtils.getViewShownColumns)(_this.view, _this.table.columns).filter(col => searchParticipateColumns.includes(col.key));
+        if (isExactSearch) {
+          return (0, _search.searchRowsByExactVal)(searchVal.trim().toLowerCase(), rows, searchColumns, {
+            formulaRows: _this.formulaRows
+          }).map(row => row._id);
+        }
+        return (0, _search.searchRows)(rows, searchColumns, searchVal, row => {
           return row;
         }).map(row => row._id);
       }
@@ -294,14 +385,25 @@ class StatisticRecordDialog extends _react.default.Component {
         formulaRows: view.formula_rows
       };
     };
+    this.getCachedSearchedRows = (searchedRowsIds, rows) => {
+      if (this.searchedRowsCache.searchedRowsIds !== searchedRowsIds || this.searchedRowsCache.rows !== rows) {
+        this.searchedRowsCache = {
+          searchedRowsIds,
+          rows,
+          result: this.getRowsByIds(searchedRowsIds)
+        };
+      }
+      return this.searchedRowsCache.result;
+    };
     this.renderRowsCards = () => {
       const {
         isCalculateByView
       } = this.props;
       const {
-        searchedRowsIds
+        searchedRowsIds,
+        rows
       } = this.state;
-      const searchedRows = this.getRowsByIds(searchedRowsIds);
+      const searchedRows = this.getCachedSearchedRows(searchedRowsIds, rows);
       if (searchedRows.length === 0) return /*#__PURE__*/_react.default.createElement("div", {
         className: "w-100 h-100"
       }, /*#__PURE__*/_react.default.createElement(_DTableEmptyTip2.default, {
@@ -317,22 +419,45 @@ class StatisticRecordDialog extends _react.default.Component {
         columns: this.renderedColumns,
         rows: searchedRows,
         isExpandRowDetail: isCalculateByView,
+        isVirtualized: true,
+        showScrollBtn: !window.isMobile,
         rowCardType: 'statistic'
       };
       return /*#__PURE__*/_react.default.createElement(_rowCard.default, props);
     };
+    const {
+      chartRecordsParams: _chartRecordsParams,
+      tables: _tables
+    } = _props;
+    const {
+      chart: _chart
+    } = _chartRecordsParams || {};
+    const _table = _chart ? (0, _dtableUtils.getTableById)(_tables, _chart.config.table_id) : null;
+    const {
+      isExactSearch: _isExactSearch,
+      searchParticipateColumns: _searchParticipateColumns
+    } = this.initSearchSettings(_chart, _table);
     this.state = {
       loading: true,
       title: '',
       rows: [],
       idRowMap: {},
       searchVal: '',
-      searchedRowsIds: []
+      searchedRowsIds: [],
+      isExactSearch: _isExactSearch,
+      searchParticipateColumns: _searchParticipateColumns,
+      isShowExactMatch: _isExactSearch,
+      isShowSearchHidePopover: false
     };
     this.table = null;
     this.valueChanged = false;
     this.renderedColumns = [];
     this.formulaRows = null;
+    this.searchedRowsCache = {
+      searchedRowsIds: null,
+      rows: null,
+      result: []
+    };
   }
   componentDidMount() {
     const {
@@ -348,10 +473,17 @@ class StatisticRecordDialog extends _react.default.Component {
     this.unsubscribeExpandRowDeleted && this.unsubscribeExpandRowDeleted();
   }
   render() {
+    var _this$table, _this$table2, _this$table2$columns, _this$table2$columns$;
     const {
       loading,
-      title
+      title,
+      isExactSearch,
+      searchParticipateColumns,
+      isShowExactMatch,
+      isShowSearchHidePopover
     } = this.state;
+    const searchableColumns = (((_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.columns) || []).filter(col => _search.SUPPORT_SEARCH_COLUMN_TYPES.includes(col.type));
+    const nameColumnKey = (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : (_this$table2$columns = _this$table2.columns) === null || _this$table2$columns === void 0 ? void 0 : (_this$table2$columns$ = _this$table2$columns[0]) === null || _this$table2$columns$ === void 0 ? void 0 : _this$table2$columns$.key;
     return /*#__PURE__*/_react.default.createElement(_reactstrap.Modal, {
       isOpen: true,
       autoFocus: false,
@@ -384,9 +516,40 @@ class StatisticRecordDialog extends _react.default.Component {
           }, /*#__PURE__*/_react.default.createElement("i", {
             className: "dtable-font dtable-icon-x-"
           }));
+        },
+        ExactMatchIndicator: () => {
+          return /*#__PURE__*/_react.default.createElement("span", {
+            className: "clear-search-text exact-match-search-text"
+          }, /*#__PURE__*/_react.default.createElement("div", {
+            className: "right-exact-button",
+            onClick: this.onToggleShowExactMatch
+          }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+            symbol: "exact-match"
+          })));
         }
       }
-    })), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
+    })), isShowExactMatch && /*#__PURE__*/_react.default.createElement("div", {
+      className: "search-settings-container d-flex align-items-center"
+    }, /*#__PURE__*/_react.default.createElement(_DTableSwitch2.default, {
+      size: "sm",
+      switchPosition: "left",
+      checked: isExactSearch,
+      placeholder: _intl.default.get('Exact_match'),
+      onChange: this.onChangeExactSearch
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "toolbar-btn exact-search-columns",
+      id: "statistic-search-hide-column",
+      onClick: this.toggleSearchHidePopover
+    }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+      symbol: "field-set"
+    }), /*#__PURE__*/_react.default.createElement("span", null, _intl.default.get('Searchable_columns')))), isShowSearchHidePopover && /*#__PURE__*/_react.default.createElement(_hideColumnPopover.default, {
+      columns: searchableColumns,
+      ignoreColumnsKeys: nameColumnKey ? [nameColumnKey] : [],
+      target: "statistic-search-hide-column",
+      shownColumnKeys: searchParticipateColumns,
+      modifyHiddenColumns: this.modifySearchParticipateColumns,
+      onPopoverToggle: this.toggleSearchHidePopover
+    }), /*#__PURE__*/_react.default.createElement(_reactstrap.ModalBody, {
       className: "sea-chart-statistic-records-container"
     }, loading ? /*#__PURE__*/_react.default.createElement("div", {
       className: "d-flex py-8"

package/dist/locale/lang/de.js

@@ -259,6 +259,10 @@ const de = {
   "Use_default_color": "Standardfarbe verwenden",
   "Use_colors_in_single_select_solumn": "Verwenden Sie Farben in einer einzelnen Auswahlspalte",
   "Search_records": "Einträge suchen",
+  "Exact_match": "Exakte Übereinstimmung",
+  "Searchable_columns": "Durchsuchbare Spalten",
+  "Clear_search_text": "Suchtext leeren",
+  "No_columns_available_to_be_hidden": "Es können keine Spalten ausgeblendet werden.",
   "Please_select_a_grouping_column": "Bitte Gruppierungsspalte auswählen",
   "View": "Sicht",
   "Funnel": "Trichterdiagramm",

package/dist/locale/lang/en.js

@@ -259,6 +259,10 @@ const en = {
   "Use_default_color": "Use default color",
   "Use_colors_in_single_select_solumn": "Use colors in single select column",
   "Search_records": "Search records",
+  "Exact_match": "Exact match",
+  "Searchable_columns": "Searchable columns",
+  "Clear_search_text": "Clear search text",
+  "No_columns_available_to_be_hidden": "No columns available to be hidden.",
   "Please_select_a_grouping_column": "Please select grouping column",
   "View": "View",
   "Funnel": "Funnel",

package/dist/locale/lang/es.js

@@ -259,6 +259,10 @@ const es = {
   "Use_default_color": "Use default color",
   "Use_colors_in_single_select_solumn": "Use colors in single select column",
   "Search_records": "Search records",
+  "Exact_match": "Coincidencia exacta",
+  "Searchable_columns": "Columnas de búsqueda",
+  "Clear_search_text": "Limpiar texto de búsqueda",
+  "No_columns_available_to_be_hidden": "No hay columnas disponibles para ocultar.",
   "Please_select_a_grouping_column": "Please select grouping column",
   "View": "View",
   "Funnel": "Funnel",

package/dist/locale/lang/fr.js

@@ -259,6 +259,10 @@ const fr = {
   "Use_default_color": "Utiliser la couleur par défaut",
   "Use_colors_in_single_select_solumn": "Utiliser les couleurs dans une colonne de sélection unique",
   "Search_records": "Rechercher des enregistrements",
+  "Exact_match": "Correspondence exacte",
+  "Searchable_columns": "Colonnes de recherche",
+  "Clear_search_text": "Effacer le texte de recherche",
+  "No_columns_available_to_be_hidden": "Aucune colonne ne peut être masquée.",
   "Please_select_a_grouping_column": "Veuillez sélectionner la colonne de regroupement",
   "View": "Voir",
   "Funnel": "Entonnoir",

package/dist/locale/lang/pt.js

@@ -259,6 +259,10 @@ const pt = {
   "Use_default_color": "Use default color",
   "Use_colors_in_single_select_solumn": "Use colors in single select column",
   "Search_records": "Search records",
+  "Exact_match": "Correspondência exacta",
+  "Searchable_columns": "Colunas pesquisáveis",
+  "Clear_search_text": "Limpar texto de pesquisa",
+  "No_columns_available_to_be_hidden": "Nenhuma coluna disponível para ser ocultada.",
   "Please_select_a_grouping_column": "Please select grouping column",
   "View": "View",
   "Funnel": "Funnel",

package/dist/locale/lang/ru.js

@@ -259,6 +259,10 @@ const ru = {
   "Use_default_color": "Use default color",
   "Use_colors_in_single_select_solumn": "Use colors in single select column",
   "Search_records": "Search records",
+  "Exact_match": "Точное соответствие",
+  "Searchable_columns": "Поиск столбцов",
+  "Clear_search_text": "Очистить текст поиска",
+  "No_columns_available_to_be_hidden": "Нет доступных столбцов для скрытия",
   "Please_select_a_grouping_column": "Please select grouping column",
   "View": "View",
   "Funnel": "Funnel",

package/dist/locale/lang/zh_CN.js

@@ -259,6 +259,10 @@ const zh_CN = {
   "Use_default_color": "使用默认颜色",
   "Use_colors_in_single_select_solumn": "使用列中的选项颜色",
   "Search_records": "搜索记录",
+  "Exact_match": "精确匹配",
+  "Searchable_columns": "可搜索的列",
+  "Clear_search_text": "清除搜索文本",
+  "No_columns_available_to_be_hidden": "没有列可以被隐藏。",
   "Please_select_a_grouping_column": "请选择一个分组列",
   "View": "视图",
   "Funnel": "漏斗图",

package/dist/utils/search.js

@@ -4,12 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.searchRows = void 0;
+exports.searchRowsByExactVal = exports.searchRows = exports.SUPPORT_SEARCH_COLUMN_TYPES = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
-var _context = _interopRequireDefault(require("../context"));
 var _dtableUtils = require("dtable-utils");
+var _context = _interopRequireDefault(require("../context"));
 var _columnUtils = require("./column-utils");
-const SUPPORT_SEARCH_COLUMN_TYPES = [_dtableUtils.CellType.DATE, _dtableUtils.CellType.TEXT, _dtableUtils.CellType.LONG_TEXT, _dtableUtils.CellType.NUMBER, _dtableUtils.CellType.URL, _dtableUtils.CellType.EMAIL, _dtableUtils.CellType.SINGLE_SELECT, _dtableUtils.CellType.CTIME, _dtableUtils.CellType.MTIME, _dtableUtils.CellType.MULTIPLE_SELECT, _dtableUtils.CellType.LAST_MODIFIER, _dtableUtils.CellType.CREATOR, _dtableUtils.CellType.COLLABORATOR, _dtableUtils.CellType.LINK, _dtableUtils.CellType.FORMULA, _dtableUtils.CellType.LINK_FORMULA, _dtableUtils.CellType.AUTO_NUMBER, _dtableUtils.CellType.GEOLOCATION, _dtableUtils.CellType.DURATION];
+var _cellFormatUtils = require("./cell-format-utils");
+const SUPPORT_SEARCH_COLUMN_TYPES = exports.SUPPORT_SEARCH_COLUMN_TYPES = [_dtableUtils.CellType.DATE, _dtableUtils.CellType.TEXT, _dtableUtils.CellType.LONG_TEXT, _dtableUtils.CellType.NUMBER, _dtableUtils.CellType.URL, _dtableUtils.CellType.EMAIL, _dtableUtils.CellType.SINGLE_SELECT, _dtableUtils.CellType.CTIME, _dtableUtils.CellType.MTIME, _dtableUtils.CellType.MULTIPLE_SELECT, _dtableUtils.CellType.LAST_MODIFIER, _dtableUtils.CellType.CREATOR, _dtableUtils.CellType.COLLABORATOR, _dtableUtils.CellType.LINK, _dtableUtils.CellType.FORMULA, _dtableUtils.CellType.LINK_FORMULA, _dtableUtils.CellType.AUTO_NUMBER, _dtableUtils.CellType.GEOLOCATION, _dtableUtils.CellType.DURATION];
 const searchRows = (rows, columns, val, processRow) => {
   let dtableCollaborators = _context.default.getCollaboratorFromCache() || [];
   let collaborators = _context.default.collaborators || [];
@@ -71,4 +72,35 @@ const searchRows = (rows, columns, val, processRow) => {
   });
   return searchResult;
 };
-exports.searchRows = searchRows;
+exports.searchRows = searchRows;
+const searchRowsByExactVal = function (searchValue) {
+  let rows = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  let columns = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  let {
+    formulaRows = {}
+  } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  // search matched rows from support columns
+  const validColumns = columns.filter(column => SUPPORT_SEARCH_COLUMN_TYPES.includes(column.type));
+  if (!Array.isArray(rows) || rows.length === 0) return [];
+  if (!searchValue) return rows;
+  const collaborators = [...(_context.default.getCollaboratorsFromCache() || []), ...(_context.default.collaborators || [])];
+  return rows.filter(row => {
+    for (const column of validColumns) {
+      const {
+        key,
+        type,
+        data
+      } = column;
+      const formattedCellValue = (0, _cellFormatUtils.getClientCellValueDisplayString)(row, type, key, {
+        formulaRows,
+        data,
+        collaborators
+      });
+      if (formattedCellValue && formattedCellValue.trim() && formattedCellValue.toLowerCase() === searchValue) {
+        return true;
+      }
+    }
+    return false;
+  });
+};
+exports.searchRowsByExactVal = searchRowsByExactVal;

package/dist/view/wrapper/chart-component.js

@@ -565,27 +565,63 @@ class ChartComponent extends _react.Component {
         return _intl.default.get(name) || name;
       }
     };
+    this.getSvgTextWidth = textNode => {
+      if (!textNode) return 0;
+      if (typeof textNode.getComputedTextLength === 'function') {
+        return textNode.getComputedTextLength();
+      }
+      return textNode.getBoundingClientRect().width;
+    };
+    this.getRightLegendLayout = _ref => {
+      let {
+        data,
+        legendName,
+        theme
+      } = _ref;
+      const {
+        width: chartWidth,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const legendRectWidth = 20;
+      const legendRecTextGap = 8;
+      const minChartWidth = 160;
+      const chartLegendGap = 30;
+      const measureText = text => {
+        const textNode = this.chart.append('text').attr('font-size', theme.legendFontSize).text(text).node();
+        const textWidth = this.getSvgTextWidth(textNode);
+        textNode.remove();
+        return textWidth;
+      };
+      const maxTextWidth = Array.from(new Set(data.map(item => item[legendName]))).reduce((maxWidth, name) => Math.max(maxWidth, measureText(this.formatterLegendName(name))), 0);
+      const desiredLegendSpace = legendRectWidth + legendRecTextGap + maxTextWidth;
+      const minLegendSpace = legendRectWidth + legendRecTextGap + measureText('...');
+      const maxLegendSpace = chartWidth - insertPadding * 2 - minChartWidth - chartLegendGap;
+      const rightLegendSpace = Math.min(desiredLegendSpace, Math.max(minLegendSpace, maxLegendSpace));
+      return {
+        rightLegendSpace,
+        chartLegendGap
+      };
+    };
     this.truncateLegendText = (textNode, maxWidth) => {
-      if (!textNode || !Number.isFinite(maxWidth) || maxWidth <= 0) return false;
+      if (!textNode || !Number.isFinite(maxWidth)) return false;
       const fullText = textNode.textContent || '';
-      const getTextWidth = () => {
-        if (typeof textNode.getComputedTextLength === 'function') {
-          return textNode.getComputedTextLength();
-        }
-        return textNode.getBoundingClientRect().width;
-      };
-      if (!fullText || getTextWidth() <= maxWidth) return false;
+      if (!fullText) return false;
+      if (maxWidth <= 0) {
+        textNode.textContent = '...';
+        return true;
+      }
+      if (this.getSvgTextWidth(textNode) <= maxWidth) return false;
       const ellipsis = '...';
       let textLength = fullText.length;
       while (textLength > 0) {
         textNode.textContent = `${fullText.slice(0, textLength)}${ellipsis}`;
-        if (getTextWidth() <= maxWidth) return true;
+        if (this.getSvgTextWidth(textNode) <= maxWidth) return true;
         textLength--;
       }
       textNode.textContent = ellipsis;
       return true;
     };
-    this.setLegend = _ref => {
+    this.setLegend = _ref2 => {
       var _chart$config, _chart$config2;
       let {
         legendName,
@@ -595,7 +631,7 @@ class ChartComponent extends _react.Component {
         colorScale,
         groupColumn,
         chart
-      } = _ref;
+      } = _ref2;
       if (!this.chart) return;
       this.legendConfig = {
         legendRectWidth: [_constants.CHART_TYPE.SCATTER, _constants.CHART_TYPE.MIRROR].includes(chart === null || chart === void 0 ? void 0 : (_chart$config = chart.config) === null || _chart$config === void 0 ? void 0 : _chart$config.type) ? 8 : 20,
@@ -732,14 +768,14 @@ class ChartComponent extends _react.Component {
         });
       }
     };
-    this.renderLegend = _ref2 => {
+    this.renderLegend = _ref3 => {
       let {
         legendWrapper,
         groupData,
         colorScale,
         theme,
         text
-      } = _ref2;
+      } = _ref3;
       const {
         legendItemPaddingTop,
         legendItemTextPaddingTop,
@@ -765,15 +801,15 @@ class ChartComponent extends _react.Component {
           d3.select(item).remove();
         });
       }
-      legendWrapper.selectAll().data(groupData).join('g').attr('data-groupName', _ref3 => {
-        let [groupName] = _ref3;
-        return groupName;
-      }).append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('y', legendItemPaddingTop).attr('rx', r).attr('fill', _ref4 => {
+      legendWrapper.selectAll().data(groupData).join('g').attr('data-groupName', _ref4 => {
         let [groupName] = _ref4;
+        return groupName;
+      }).append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('y', legendItemPaddingTop).attr('rx', r).attr('fill', _ref5 => {
+        let [groupName] = _ref5;
         if (colorScale) return colorScale(groupName);
         return this.colorMap[groupName] || _constants.CHART_STYLE_COLORS[0];
-      }).attr('data-text', _ref5 => {
-        let [groupName] = _ref5;
+      }).attr('data-text', _ref6 => {
+        let [groupName] = _ref6;
         return groupName;
       }).call(g => {
         const legendItems = Array.from(legendWrapper.node().children).filter(item => item.getAttribute('class') !== 'legend-flip-page');
@@ -783,8 +819,7 @@ class ChartComponent extends _react.Component {
           top,
           bottom
         } = this.getLegendBoundary(legendPosition);
-        const legendTranslateX = legendPosition === 'center-right' ? start - 50 : start;
-        const maxLegendTextWidth = legendPosition === 'center-right' ? end - legendTranslateX - legendRectWidth - legendRecTextGap : null;
+        const maxLegendTextWidth = legendPosition === 'center-right' ? end - start - legendRectWidth - legendRecTextGap : null;
 
         // Add text
         g.nodes().forEach(rect => {
@@ -807,8 +842,7 @@ class ChartComponent extends _react.Component {
               const prevTranslateY = Number(prevItem.getAttribute('data-translateY'));
               translateY = prevTranslateY + height + legendItemMargin;
             }
-            const translateX = legendPosition === 'center-right' ? start - 50 : start;
-            d3.select(item).attr('transform', `translate(${translateX},${translateY})`).attr('data-translateY', translateY);
+            d3.select(item).attr('transform', `translate(${start},${translateY})`).attr('data-translateY', translateY);
             this.bindLegendItemInteraction(item);
           });
         } else {
@@ -1153,7 +1187,7 @@ class ChartComponent extends _react.Component {
         annotationWrapper.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', yScale(goal_value) - 10).attr('fill', '#666').text(goal_label);
       });
     };
-    this.addLabelToRectTop = _ref6 => {
+    this.addLabelToRectTop = _ref7 => {
       let {
         container,
         x,
@@ -1162,7 +1196,7 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref6;
+      } = _ref7;
       d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('y', Number(y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         if (!g.node()) return;
         const {
@@ -1171,7 +1205,7 @@ class ChartComponent extends _react.Component {
         g.attr('x', Number(x) + Number(xWidth) / 2 - width / 2);
       });
     };
-    this.addLabelToRectRight = _ref7 => {
+    this.addLabelToRectRight = _ref8 => {
       let {
         container,
         x,
@@ -1181,7 +1215,7 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref7;
+      } = _ref8;
       d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('x', Number(x) + Number(xWidth) + 10).attr('y', Number(y)).attr('fill', theme.labelColor).attr('dominant-baseline', 'hanging').attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         if (g.node()) {
           var _g$node;
@@ -1192,7 +1226,7 @@ class ChartComponent extends _react.Component {
         }
       });
     };
-    this.addLabelToRectCenter = _ref8 => {
+    this.addLabelToRectCenter = _ref9 => {
       let {
         chartType,
         container,
@@ -1203,7 +1237,7 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref8;
+      } = _ref9;
       d3.select(container).append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         if (!g.node()) return;
         const {
@@ -1245,12 +1279,12 @@ class ChartComponent extends _react.Component {
         });
       }
     };
-    this.addClipPath = _ref9 => {
+    this.addClipPath = _ref0 => {
       let {
         rect,
         attr,
         borderRadiusVal
-      } = _ref9;
+      } = _ref0;
       return this.addRoundedClip(rect, attr === 'x' ? 'x' : 'y', null, borderRadiusVal);
     };
     this.addRoundedClip = function (rect, orient) {
@@ -1503,13 +1537,13 @@ class ChartComponent extends _react.Component {
       }).filter(Boolean).sort((a, b) => a.top - b.top);
       const keptTicks = [];
       let prevBottom = -Infinity;
-      visibleTicks.forEach(_ref0 => {
+      visibleTicks.forEach(_ref1 => {
         let {
           tick,
           index,
           top,
           bottom
-        } = _ref0;
+        } = _ref1;
         const shouldKeepFirstTick = index === 0;
         const shouldKeepLastTick = index === ticks.length - 1;
         const hasEnoughSpace = top > prevBottom + this.yAxisTickLabelGap;
@@ -1711,11 +1745,11 @@ class ChartComponent extends _react.Component {
       const annotationWrapper = contentWrapper.insert('g', ':first-child').attr('class', 'vertical-annotation-wrapper');
       annotationWrapper.append('line').attr('x1', x).attr('y1', insertPadding + marginTop).attr('x2', x).attr('y2', chartHeight - insertPadding).attr('stroke', theme.XAxisColor);
     };
-    this.setLegendForHeatMap = _ref1 => {
+    this.setLegendForHeatMap = _ref10 => {
       let {
         exampleColors,
         themeColors
-      } = _ref1;
+      } = _ref10;
       const legendOffsetY = 3;
       const legendItemTextWidth = 32;
       const legendItemWidth = 12;
@@ -1729,7 +1763,7 @@ class ChartComponent extends _react.Component {
       });
       legendWrapper.append('text').attr('x', 182).attr('y', 10).attr('fill', themeColors.textColor).attr('font-size', 12).attr('font-weight', 'bold').text(_intl.default.get('More'));
     };
-    this.setContinuousLegend = _ref10 => {
+    this.setContinuousLegend = _ref11 => {
       var _this$chart$node2;
       let {
         previewType,
@@ -1740,7 +1774,7 @@ class ChartComponent extends _react.Component {
         legendTextRange,
         bubbleColor,
         type
-      } = _ref10;
+      } = _ref11;
       const {
         width: chartWidth,
         height: chartHeight,