sea-chart 2.0.9 → 2.0.11

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

@@ -13,6 +13,7 @@ var _dtableUtils = require("dtable-utils");
 var _utils = require("../../utils");
 var _constants = require("../../constants");
 var _intl = _interopRequireDefault(require("../../intl"));
+var _columnUtils = require("../../utils/column-utils");
 require("../../assets/css/sea-chart-d3-tooltip.css");
 class ChartComponent extends _react.Component {
   constructor(props) {
@@ -51,14 +52,22 @@ class ChartComponent extends _react.Component {
     this.initChart = function (container, id) {
       let initConfig = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       const {
-        width,
-        height
+        width: containerWidth,
+        height: containerHeight
       } = container.getBoundingClientRect();
+      const {
+        marginLeft = 0,
+        marginBottom = 0
+      } = initConfig;
+      const width = containerWidth - marginLeft;
+      const height = containerHeight - marginBottom;
       _this.chart = d3.create('svg').attr('id', id).attr('class', "svg-wrapper-".concat(id)).attr('width', width).attr('height', height).attr('viewBox', [0, 0, width, height]);
       _this.container.appendChild(_this.chart.node());
       _this.chartBoundingClientRect = {
         ...JSON.parse(JSON.stringify(_this.chart.node().getBoundingClientRect())),
-        ...initConfig
+        ...initConfig,
+        width,
+        height
       };
     };
     this.initDefs = () => {
@@ -70,7 +79,7 @@ class ChartComponent extends _react.Component {
         const {
           width,
           height
-        } = this.container.getBoundingClientRect();
+        } = this.chartBoundingClientRect;
         this.chart.append('defs').append('mask').attr('id', "mask-wrapper-".concat(previewType, "-").concat(this.chart.node().id)).append('rect').attr('x', 0).attr('y', 0).attr('width', width).attr('height', height - 30).attr('fill', 'white');
       }
     };
@@ -216,7 +225,6 @@ class ChartComponent extends _react.Component {
       }
     };
     this.renderAxisLabel = (chart, tables, chartContainer) => {
-      var _this$chart2;
       if (!this.chart || !chart) return;
       let {
         table_id,
@@ -237,30 +245,31 @@ class ChartComponent extends _react.Component {
         y_axis_column_key = y_axis_summary_column_key;
       }
       const table = (0, _dtableUtils.getTableById)(tables, table_id);
-      const autoPadding = ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) || {
-        bottom: 0
-      };
       let textColor;
       this.globalTheme === _constants.THEME_NAME_MAP.DARK ? textColor = '#fff' : textColor = '#999';
       const xAxisID = "chart-x-axis-label_".concat(chart.id);
       const xLabel = chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.querySelector("#".concat(xAxisID));
+      const {
+        width: containerWidth
+      } = this.chartBoundingClientRect;
       if (!xLabel && x_axis_show_label) {
         const div = document.createElement('div');
         div.id = xAxisID;
         div.className = 'chart-axis-label';
         const column = (0, _dtableUtils.getTableColumnByKey)(table, x_axis_column_key);
         div.innerHTML = "".concat(column ? column.name : '');
-        div.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
+        div.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute"));
         chartContainer.appendChild(div);
       }
       if (xLabel && x_axis_show_label) {
-        xLabel.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute"));
       }
       if (xLabel && !x_axis_show_label) {
         xLabel.parentNode.removeChild(xLabel);
       }
       const yAxisID = "chart-y-axis-label_".concat(chart.id);
       const yLabel = chartContainer.querySelector("#".concat(yAxisID));
+      const divHeight = 20;
       if (!yLabel && y_axis_show_label) {
         const div = document.createElement('div');
         div.id = yAxisID;
@@ -274,24 +283,103 @@ class ChartComponent extends _react.Component {
             div.innerHTML = title_name || '';
           }
         }
-        const containerHeight = chartContainer.offsetHeight;
+        const {
+          height: containerHeight
+        } = this.chartBoundingClientRect;
         let textAlign = 'center';
         if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
         if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+        div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
         chartContainer.appendChild(div);
       }
       if (yLabel && y_axis_show_label) {
-        const containerHeight = chartContainer.offsetHeight;
+        const {
+          height: containerHeight
+        } = this.chartBoundingClientRect;
         let textAlign = 'center';
         if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
         if (y_axis_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
-        yLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+        yLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
       }
       if (yLabel && !y_axis_show_label) {
         yLabel.parentNode.removeChild(yLabel);
       }
     };
+    this.renderHorizontalLabel = (chart, tables, chartContainer) => {
+      if (!this.chart || !chart) return;
+      const {
+        table_id,
+        vertical_axis_column_key,
+        horizontal_axis_column_key,
+        horizontal_axis_summary_type,
+        horizontal_axis_label_position,
+        vertical_axis_label_position,
+        show_vertical_axis_label,
+        show_horizontal_axis_label
+      } = chart.config;
+      const table = (0, _dtableUtils.getTableById)(tables, table_id);
+      const textColor = '#999999';
+      const xAxisID = "chart-x-axis-label_".concat(chart.id);
+      const xLabel = chartContainer.querySelector("#".concat(xAxisID));
+      const {
+        width: containerWidth
+      } = this.chartBoundingClientRect;
+      if (!xLabel && show_horizontal_axis_label) {
+        const div = document.createElement('div');
+        div.id = xAxisID;
+        div.className = 'chart-axis-label';
+        if (horizontal_axis_summary_type === _constants.CHART_SUMMARY_TYPE.COUNT) {
+          div.innerHTML = _intl.default.get('Amount');
+        } else {
+          const column = (0, _dtableUtils.getTableColumnByKey)(table, horizontal_axis_column_key);
+          div.innerHTML = "".concat(column ? column.name : '');
+        }
+        div.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(horizontal_axis_label_position, "; position: absolute"));
+        chartContainer.appendChild(div);
+      }
+      if (xLabel && show_horizontal_axis_label) {
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(horizontal_axis_label_position, "; position: absolute"));
+      }
+      if (xLabel && !show_horizontal_axis_label) {
+        xLabel.parentNode.removeChild(xLabel);
+      }
+      const yAxisID = "chart-y-axis-label_".concat(chart.id);
+      const yLabel = chartContainer.querySelector("#".concat(yAxisID));
+      const divHeight = 20;
+      if (!yLabel && show_vertical_axis_label) {
+        const div = document.createElement('div');
+        div.id = yAxisID;
+        div.className = 'chart-axis-label';
+        const column = (0, _dtableUtils.getTableColumnByKey)(table, vertical_axis_column_key) || {};
+        div.innerHTML = column.name || '';
+        const {
+          height: containerHeight
+        } = this.chartBoundingClientRect;
+        let textAlign = 'center';
+        if (vertical_axis_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
+        if (vertical_axis_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
+        div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+        chartContainer.appendChild(div);
+      }
+      if (yLabel && show_horizontal_axis_label) {
+        const {
+          height: containerHeight
+        } = this.chartBoundingClientRect;
+        let textAlign = 'center';
+        if (vertical_axis_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
+        if (vertical_axis_label_position === _constants.LABEL_POSITION_TYPE.TOP) textAlign = 'right';
+        yLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+      }
+      if (yLabel && !show_horizontal_axis_label) {
+        yLabel.parentNode.removeChild(yLabel);
+      }
+    };
+    this.isShowVerticalAxisLabel = chart => {
+      return !!(chart && chart.config && chart.config.show_vertical_axis_label);
+    };
+    this.isShowHorizontalAxisLabel = chart => {
+      return !!(chart && chart.config && chart.config.show_horizontal_axis_label);
+    };
     // Automatic adjustment of maximum and minimum values
     this.autoAdjustDataOptions = function (chart) {
       let data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -481,93 +569,292 @@ class ChartComponent extends _react.Component {
         return _intl.default.get(name) || name;
       }
     };
-    this.getOthersLegendItemWidth = (curIndex, allLegendItems, direction) => {
-      let width = 0;
-      let otherItems = [];
-      if (direction === 1) {
-        otherItems = allLegendItems.slice(0, curIndex);
-      }
-      if (direction === -1) {
-        otherItems = allLegendItems.slice(curIndex);
-      }
-      otherItems.forEach(item => {
-        const {
-          width: legendItemWidth
-        } = item.getBoundingClientRect();
-        width = width + legendItemWidth;
+    this.sortLegend = (result, groupColumn, legendName) => {
+      result.forEach(item => {
+        const option = groupColumn.data.options.find(option => option.name === item[legendName]);
+        if (option !== null && option !== void 0 && option.id) {
+          item['group_name_id'] = option.id;
+          item['oldName'] = item.name;
+          item.name = item['group_name_id'];
+        }
+      });
+      _utils.BaseUtils.sortCharts(result, groupColumn, 'name');
+      result.forEach(item => {
+        item.name = item['oldName'];
       });
-      return width;
     };
     // set legend
-    this.setLegend = function (legendName) {
+    this.setLegend = _ref => {
       var _this$chart$node;
-      let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.CHART_THEME_COLOR['light'];
-      let legendPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'top-left';
-      let data = arguments.length > 3 ? arguments[3] : undefined;
-      let colorScale = arguments.length > 4 ? arguments[4] : undefined;
-      if (!_this.chart) return;
+      let {
+        legendName,
+        theme = _constants.CHART_THEME_COLOR['light'],
+        legendPosition = 'top-left',
+        data,
+        colorScale,
+        groupColumn
+      } = _ref;
+      if (!this.chart) return;
+      const legendData = (0, _lodashEs.cloneDeep)(data);
+      this.legendConfig = {
+        legendRectWidth: 20,
+        legendRectHeight: 6,
+        r: 3,
+        legendItemPaddingTop: 3,
+        legendItemMargin: 20,
+        legendRecTextGap: 8,
+        legendPageNavWrapperWidth: 100,
+        legendPosition,
+        legendName,
+        theme
+      };
+
+      // sort legend data
+      if (groupColumn && [_dtableUtils.CellType.SINGLE_SELECT].includes(groupColumn.type)) {
+        this.sortLegend(legendData, groupColumn, legendName);
+      }
       const {
         width: chartWidth,
         insertPadding
-      } = _this.chartBoundingClientRect;
-      const legendItemPaddingTop = 8;
-      const legendItemSpacing = 30;
-      const legendRectWidth = 18;
-      const legendRectHeight = 6;
-      const r = 3;
-      let translateX = 0;
-      let legendData = [];
-      let direction = 0; // 1 means left, -1 means right
-      if (legendPosition === 'top-left') {
-        translateX = insertPadding;
-        legendData = d3.group(data, d => d[legendName]);
-        direction = 1;
+      } = this.chartBoundingClientRect;
+      const groupsData = this.getLegendDataGroups(legendData);
+      const legendWrapper = this.chart.append('g').attr('class', "legend-wrapper-".concat((_this$chart$node = this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id));
+
+      // Render first group legend
+      this.renderLegend({
+        legendWrapper,
+        groupData: groupsData[0],
+        colorScale,
+        theme
+      });
+
+      // Render Page navigator
+      if (groupsData.length > 1) {
+        const {
+          legendPageNavWrapperWidth
+        } = this.legendConfig;
+        let curCount = 0;
+        const pageNavigator = legendWrapper.append('g').attr('class', 'legend-flip-page');
+
+        // count
+        pageNavigator.append('text').attr('class', 'legend-count').attr('dominant-baseline', 'hanging').attr('x', 15).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text("".concat(curCount + 1, "/").concat(groupsData.length));
+
+        // prev page
+        pageNavigator.append('polygon').attr('class', 'legend-prev-page').attr('points', this.calcEquilateralTriangle(5, 5, 12)).attr('fill', theme.legendPageNavigatorMarkerColor).attr('opacity', curCount === 0 ? 0.45 : 1).attr('style', 'cursor: pointer;').on('click', event => {
+          if (curCount > 0) {
+            curCount--;
+            this.renderLegend({
+              legendWrapper,
+              groupData: groupsData[curCount],
+              colorScale,
+              theme,
+              text: "".concat(curCount + 1, "/").concat(groupsData.length)
+            });
+          }
+        });
+
+        // next page
+        pageNavigator.append('polygon').attr('class', 'legend-next-page').attr('points', this.calcEquilateralTriangle(45, 5, 12, 'bottom')).attr('fill', theme.legendPageNavigatorMarkerColor).attr('opacity', curCount === groupsData.length - 1 ? 0.45 : 1).attr('style', 'cursor: pointer;').on('click', event => {
+          if (curCount < groupsData.length - 1) {
+            curCount++;
+            this.renderLegend({
+              legendWrapper,
+              groupData: groupsData[curCount],
+              colorScale,
+              theme,
+              text: "".concat(curCount + 1, "/").concat(groupsData.length)
+            });
+          }
+        });
+
+        // update pageNavigator transform
+        pageNavigator.call(g => {
+          let groupTranslateX = 0;
+          if (legendPosition === 'top-right') {
+            groupTranslateX = insertPadding;
+          } else if (legendPosition === 'top-left') {
+            groupTranslateX = chartWidth - insertPadding - legendPageNavWrapperWidth;
+            const {
+              width
+            } = g.node().getBoundingClientRect();
+            const offset = legendPageNavWrapperWidth - width;
+            groupTranslateX = groupTranslateX + offset;
+          }
+          g.attr('transform', "translate(".concat(groupTranslateX, ", 0)"));
+        });
       }
-      if (legendPosition === 'top-right') {
-        translateX = chartWidth;
-        legendData = d3.group(data, d => d[legendName]);
-        direction = -1;
+    };
+    this.renderLegend = _ref2 => {
+      let {
+        legendWrapper,
+        groupData,
+        colorScale,
+        theme,
+        text
+      } = _ref2;
+      const {
+        legendItemPaddingTop,
+        legendRectWidth,
+        legendRectHeight,
+        r,
+        legendRecTextGap,
+        legendItemMargin,
+        legendPosition
+      } = this.legendConfig;
+
+      // clear old legends
+      const oldChildren = Array.from(legendWrapper.node().children);
+      if (oldChildren.length !== 0) {
+        oldChildren.forEach(item => {
+          // update navigator button opacity and text
+          if (item.getAttribute('class') == 'legend-flip-page') {
+            this.handleNavigatorOpacity(item, text);
+            d3.select(item).selectAll('text').text(text);
+            return;
+          }
+          // remove old legend item
+          d3.select(item).remove();
+        });
       }
-      const legendWrapper = _this.chart.append('g').attr('class', "legend-wrapper-".concat((_this$chart$node = _this.chart.node()) === null || _this$chart$node === void 0 ? void 0 : _this$chart$node.id)).attr('transform', "translate(".concat(translateX, ", 0)"));
-      legendWrapper.selectAll().data(legendData).join('g').append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('rx', r).attr('fill', _ref => {
-        let [groupName] = _ref;
+      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 => {
+        let [groupName] = _ref4;
         if (colorScale) return colorScale(groupName);
-        return _this.colorMap[groupName] || _constants.CHART_STYLE_COLORS[0];
-      }).attr('data-text', _ref2 => {
-        let [groupName] = _ref2;
+        return this.colorMap[groupName] || _constants.CHART_STYLE_COLORS[0];
+      }).attr('data-text', _ref5 => {
+        let [groupName] = _ref5;
         return groupName;
       }).call(g => {
-        const legendItems = Array.from(legendWrapper.node().children);
-        const legendItemCount = legendItems.length;
-
         // Add text
         g.nodes().forEach(rect => {
           const parentNode = rect.parentNode;
-          let textHeight = 0;
-          let textWidth = 0;
-          d3.select(parentNode).append('text').attr('x', legendRectWidth).attr('width', 30).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text(_this.formatterLegendName(rect.dataset.text)).attr('data-text', rect.dataset.text).call(g => {
-            // set text y position
+          d3.select(parentNode).append('text').attr('x', legendRectWidth + legendRecTextGap).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text(this.formatterLegendName(rect.dataset.text)).attr('data-text', rect.dataset.text).attr('dominant-baseline', 'hanging');
+        });
+        // update g translateX
+        const legendItems = Array.from(legendWrapper.node().children).filter(item => item.getAttribute('class') !== 'legend-flip-page');
+        const {
+          start,
+          end
+        } = this.getLegendBoundary(legendPosition);
+        legendItems.forEach((item, index) => {
+          let translateX = start;
+          const lastItem = legendItems[index - 1];
+          if (index > 0) {
             const {
-              height,
               width
-            } = g.node().getBoundingClientRect();
-            textHeight = height;
-            textWidth = width;
-            g.attr('y', textHeight / 2);
-          });
-        });
+            } = lastItem.getBoundingClientRect();
+            const prevTranslateX = Number(lastItem.getAttribute('data-translateX'));
+            translateX = prevTranslateX + width + legendItemMargin;
+          }
 
-        // set g position
-        legendItems.forEach((item, index) => {
-          const otherslegendItemWidth = _this.getOthersLegendItemWidth(index, legendItems, direction);
-          d3.select(item).attr('transform', () => {
-            const gaps = direction === 1 ? index : legendItemCount - index;
-            const translateX = direction * (otherslegendItemWidth + gaps * legendItemSpacing);
-            return "translate(".concat(translateX, ", ").concat(legendItemPaddingTop, ")");
-          });
+          // legend items add offset 
+          if (legendPosition === 'top-right') {
+            d3.select(item).attr('opacity', 0);
+            if (index === legendItems.length - 1) {
+              queueMicrotask(() => {
+                this.setLegendItemOffset(legendItems, end);
+              });
+            }
+          }
+          d3.select(item).attr('transform', "translate(".concat(translateX, ",0)")).attr('data-translateX', translateX);
         });
       });
     };
+    this.getLegendDataGroups = legendData => {
+      const {
+        legendName,
+        theme,
+        legendPosition
+      } = this.legendConfig;
+      legendData = d3.groups(legendData, d => d[legendName]);
+      const {
+        legendItemMargin,
+        legendRectWidth,
+        legendRectHeight,
+        r,
+        legendRecTextGap
+      } = this.legendConfig;
+      const {
+        start,
+        end
+      } = this.getLegendBoundary(legendPosition);
+      let allWidth = start;
+      const groupsData = [];
+      const newLegendData = (0, _lodashEs.cloneDeep)(legendData);
+      let lastIndex = 0;
+      legendData.forEach((item, index) => {
+        const virtualLegend = this.chart.append('g').attr('opacity', 0);
+        virtualLegend.append('rect').attr('width', legendRectWidth).attr('height', legendRectHeight).attr('rx', r);
+        virtualLegend.append('text').attr('x', legendRectWidth + legendRecTextGap).attr('font-size', theme.legendFontSize).text(this.formatterLegendName(item[0]));
+        const {
+          width
+        } = virtualLegend.node().getBoundingClientRect();
+        const itemWidth = index === legendData.length - 1 ? width : width + legendItemMargin; // last item no used margin
+        allWidth = allWidth + itemWidth;
+        if (allWidth > end) {
+          groupsData.push(newLegendData.slice(0, index - lastIndex));
+          newLegendData.splice(0, index - lastIndex);
+          lastIndex = index;
+          allWidth = start + itemWidth;
+        }
+        virtualLegend.remove();
+      });
+      const restLegendItems = newLegendData.slice(0);
+      restLegendItems.length !== 0 && groupsData.push(restLegendItems);
+      return groupsData;
+    };
+    this.getLegendBoundary = legendPosition => {
+      const {
+        legendPageNavWrapperWidth
+      } = this.legendConfig;
+      const {
+        width: chartWidth,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      let start = 0;
+      let end = 0;
+      if (legendPosition === 'top-left') {
+        start = insertPadding;
+        end = chartWidth - insertPadding - legendPageNavWrapperWidth;
+      }
+      if (legendPosition === 'top-right') {
+        start = insertPadding + legendPageNavWrapperWidth;
+        end = chartWidth - insertPadding;
+      }
+      return {
+        start,
+        end
+      };
+    };
+    this.handleNavigatorOpacity = (navigator, text) => {
+      const curCount = text.split('/')[0];
+      const allCount = text.split('/')[1];
+      if (Number(curCount) === 0) {
+        d3.select(navigator).selectAll('.legend-prev-page').attr('opacity', 0.45);
+        d3.select(navigator).selectAll('.legend-next-page').attr('opacity', 1);
+      } else if (Number(curCount) === Number(allCount)) {
+        d3.select(navigator).selectAll('.legend-prev-page').attr('opacity', 1);
+        d3.select(navigator).selectAll('.legend-next-page').attr('opacity', 0.45);
+      } else {
+        d3.select(navigator).selectAll('.legend-prev-page').attr('opacity', 1);
+        d3.select(navigator).selectAll('.legend-next-page').attr('opacity', 1);
+      }
+    };
+    this.setLegendItemOffset = (legendItems, end) => {
+      const endItem = legendItems[legendItems.length - 1];
+      const endTranslateX = Number(endItem.getAttribute('data-translateX'));
+      const {
+        width: endWidth
+      } = endItem.getBoundingClientRect();
+      const offset = end - (endTranslateX + endWidth);
+      legendItems.forEach(legendItem => {
+        const curTranslateX = Number(legendItem.getAttribute('data-translateX')) + offset;
+        d3.select(legendItem).attr('transform', "translate(".concat(curTranslateX, ",0)")).attr('data-translateX', curTranslateX);
+        d3.select(legendItem).attr('opacity', 1);
+      });
+    };
     // theta is pie or ring chart
     this.setLegendForTheta = function (legendName) {
       let theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.CHART_THEME_COLOR['light'];
@@ -581,6 +868,13 @@ class ChartComponent extends _react.Component {
       basicLegendConfig.itemName.style.fontSize = theme.fontSize;
       _this.chart.legend(legendName, basicLegendConfig);
     };
+    this.calcEquilateralTriangle = (cx, cy, size, direction) => {
+      const height = size * Math.sqrt(3) / 2;
+      if (direction === 'bottom') {
+        return [[cx, cy + height / 2], [cx - size / 2, cy - height / 2], [cx + size / 2, cy - height / 2]];
+      }
+      return [[cx, cy - height / 2], [cx - size / 2, cy + height / 2], [cx + size / 2, cy + height / 2]];
+    };
     this.setColorMap = (data, chartColorTheme) => {
       let currentIdx = 0;
       const defaultColors = _constants.CHART_STYLE_COLORS;
@@ -762,11 +1056,11 @@ class ChartComponent extends _react.Component {
         width: chartWidth
       } = this.chartBoundingClientRect;
       const annotationWrapper = this.chart.append('g').attr('class', "annotation-wrapper-".concat((_this$chart$node2 = this.chart.node()) === null || _this$chart$node2 === void 0 ? void 0 : _this$chart$node2.id));
-      annotationWrapper.append('line').attr('stroke', '#aaa').attr('x1', insertPadding).attr('y1', yScale(goal_value)).attr('x2', chartWidth - insertPadding).attr('y2', yScale(goal_value)).call(g => {
+      annotationWrapper.append('line').attr('stroke', '#aaa').attr('x1', insertPadding).attr('y1', yScale(goal_value)).attr('x2', chartWidth - insertPadding).attr('y2', yScale(goal_value)).attr('stroke-dasharray', '8,3').call(g => {
         annotationWrapper.append('text').attr('x', chartWidth - insertPadding - 30).attr('y', yScale(goal_value) - 10).attr('fill', '#666').text(goal_label);
       });
     };
-    this.addLabelToRectTop = _ref3 => {
+    this.addLabelToRectTop = _ref6 => {
       let {
         container,
         x,
@@ -775,7 +1069,7 @@ class ChartComponent extends _react.Component {
         theme,
         label_font_size,
         text
-      } = _ref3;
+      } = _ref6;
       d3.select(container).append('text').attr('y', Number(y) - 10).attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         const {
           width
@@ -783,7 +1077,24 @@ class ChartComponent extends _react.Component {
         g.attr('x', Number(x) + Number(xWidth) / 2 - width / 2);
       });
     };
-    this.addLabelToRectCenter = _ref4 => {
+    this.addLabelToRectRight = _ref7 => {
+      let {
+        container,
+        y,
+        xWidth,
+        yHeight,
+        theme,
+        label_font_size,
+        text
+      } = _ref7;
+      d3.select(container).append('text').attr('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 => {
+        const {
+          height
+        } = g.node().getBoundingClientRect();
+        g.attr('y', Number(y) + Number(yHeight) / 2 - height / 2);
+      });
+    };
+    this.addLabelToRectCenter = _ref8 => {
       let {
         chartType,
         container,
@@ -791,11 +1102,10 @@ class ChartComponent extends _react.Component {
         y,
         xWidth,
         yheight,
-        overflowHeight,
         theme,
         label_font_size,
         text
-      } = _ref4;
+      } = _ref8;
       d3.select(container).append('text').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(text).call(g => {
         const {
           width,
@@ -804,7 +1114,7 @@ class ChartComponent extends _react.Component {
         const translateX = Number(x) + xWidth / 2 - width / 2;
         let translateY = Number(y) + Number(yheight / 2) + height / 2;
         if (chartType === _constants.CHART_TYPE.BAR_STACK) {
-          translateY = translateY - overflowHeight / 2;
+          translateY = translateY;
         }
         g.attr('transform', "translate(".concat(translateX, ", ").concat(translateY, ")"));
       });
@@ -829,6 +1139,69 @@ class ChartComponent extends _react.Component {
         });
       }
     };
+    // Use clipPath to make rectangle rounded corners
+    this.addClipPath = _ref9 => {
+      let {
+        rect,
+        parentNode,
+        attr,
+        rectId
+      } = _ref9;
+      const {
+        borderRadius
+      } = this.chartBoundingClientRect;
+      const clipRect = d3.select(rect.cloneNode());
+      if (attr === 'x') {
+        const borderRadiusVal = Number(rect.getAttribute('height')) * borderRadius;
+        clipRect.attr('rx', borderRadiusVal);
+        clipRect.attr('x', Number(rect.getAttribute('x')) - borderRadiusVal).attr('width', Number(rect.getAttribute('width')) + borderRadiusVal);
+      } else {
+        const borderRadiusVal = Number(rect.getAttribute('width')) * borderRadius;
+        clipRect.attr('rx', borderRadiusVal);
+        clipRect.attr('height', Number(rect.getAttribute('height')) + borderRadiusVal);
+      }
+      const clipPath = d3.select(parentNode).append('clipPath').attr('id', rectId);
+      clipPath.node().appendChild(clipRect.node());
+      d3.select(rect).attr('clip-path', "url(#".concat(rectId, ")"));
+    };
+    this.drawYaxis = (g, theme) => {
+      const {
+        width: chartWidth,
+        insertPadding
+      } = this.chartBoundingClientRect;
+      // remove domain
+      g.select('.domain').remove();
+
+      // add text
+      g.selectAll('text').attr('font-size', theme.fontSize);
+      g.selectAll('text').attr('fill', theme.textColor);
+      this.checkTextOverflow(g.selectAll('text').nodes());
+
+      // line
+      g.selectAll('line').node() && g.selectAll('line').node().remove(); // delete the first line
+      g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2 - this.horizontalOverflowOffset).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
+
+      // update g translateX
+      g.attr('transform', "translate(".concat(insertPadding + this.horizontalOverflowOffset, ", 0)"));
+    };
+    this.checkTextOverflow = allTextEl => {
+      const {
+        insertPadding
+      } = this.chartBoundingClientRect;
+      const allTextWidth = allTextEl.map(item => {
+        const {
+          width
+        } = item.getBoundingClientRect();
+        return width;
+      });
+      const maxTextWidth = Math.max(...allTextWidth);
+      this.horizontalOverflowOffset = 0;
+      if (maxTextWidth > insertPadding) {
+        // horizontal overflow
+        const offset = maxTextWidth + 3 - insertPadding; // 3 is text and line default spacing
+        this.horizontalOverflowOffset = offset;
+      }
+    };
     this.initLabelStroke(props === null || props === void 0 ? void 0 : props.globalTheme);
     this.chartBoundingClientRect = {};
   }