sea-chart 2.0.40 → 2.0.43

package/dist/view/wrapper/area.js

@@ -44,9 +44,10 @@ class Area extends _chartComponent.default {
     this.drawChart = () => {
       let {
         result: data,
-        customRender
+        customRender,
+        chart
       } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      data = _utils.BaseUtils.formatEmptyName(data, chart.config.column_groupby_column_key, _intl.default.get('Empty'));
       if (!Array.isArray(data)) return;
       this.draw(data);
       (0, _utils.isFunction)(customRender) && customRender(this.chart);
@@ -89,12 +90,12 @@ class Area extends _chartComponent.default {
       // Y axis
       const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min || 0, y_axis_max || niceEnd]).range([chartHeight - insertPadding, insertPadding + marginTop]);
-      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
+      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', `translate(${insertPadding}, 0)`).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
 
       // X axis
       const xDomain = data.map(item => item.name);
       const x = d3.scaleBand().domain(xDomain).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
-      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0, ${chartHeight - insertPadding})`).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         this.ticksAddName(g);
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
@@ -138,7 +139,7 @@ class Area extends _chartComponent.default {
               } = g.node().getBoundingClientRect();
               const translateX = Number(curCircleEl.getAttribute('cx')) - width / 2;
               const translateY = Number(curCircleEl.getAttribute('cy')) - 10;
-              g.attr('transform', "translate(".concat(translateX, ", ").concat(translateY, ")"));
+              g.attr('transform', `translate(${translateX}, ${translateY})`);
             });
           }
         }).on('click', (event, data) => {

package/dist/view/wrapper/bar-compare.js

@@ -68,13 +68,13 @@ class BarCompare extends _chartComponent.default {
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding]);
 
       // Y axis
-      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _chartUtils.BaseUtils.getSummaryValueDisplayString(columnGroupbyColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
+      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', `translate(${insertPadding},0)`).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _chartUtils.BaseUtils.getSummaryValueDisplayString(columnGroupbyColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
       const fx = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       const color = d3.scaleOrdinal().domain(d3.group(data, d => d.group_name).keys()).range(_chartUtils.BaseUtils.getCurrentTheme(chartColorTheme).colors).unknown('#ccc');
       const x = d3.scaleBand().domain(d3.group(data, d => d.group_name).keys()).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
 
       // X axis
-      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0,${chartHeight - insertPadding})`).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
         g.selectAll('text').attr('font-size', theme.fontSize);
@@ -87,7 +87,7 @@ class BarCompare extends _chartComponent.default {
         let [name, dum] = _ref;
         // Each group is horizontally centered
         const offset = (fx.bandwidth() - dum.length * x.bandwidth()) / 2;
-        return "translate(".concat(fx(name) + offset, ",0)");
+        return `translate(${fx(name) + offset},0)`;
       })
       // rect item
       .selectAll().data(_ref2 => {
@@ -254,7 +254,7 @@ class BarCompare extends _chartComponent.default {
               } = g.node().getBoundingClientRect();
               const translateX = Number(curCircleEl.getAttribute('cx')) - width / 2;
               const translateY = Number(curCircleEl.getAttribute('cy')) - 10;
-              g.attr('transform', "translate(".concat(translateX, ", ").concat(translateY, ")"));
+              g.attr('transform', `translate(${translateX}, ${translateY})`);
             });
           }
         }).on('mouseover', event => {

package/dist/view/wrapper/bar-custom-stack.js

@@ -154,12 +154,12 @@ class BarCustom extends _chartComponent.default {
       const y = d3.scaleLinear().domain([0, niceEnd]).range([chartHeight - insertPadding, insertPadding]);
 
       // Y axis
-      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
+      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', `translate(${insertPadding},0)`).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
       const fx = d3.scaleBand().domain(new Set(organizedData.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       const x = d3.scaleBand().domain(new Set(data.map(d => d.y_axis_type))).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
 
       // X axis
-      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0,${chartHeight - insertPadding})`).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
         g.selectAll('text').attr('font-size', theme.fontSize);
@@ -172,7 +172,7 @@ class BarCustom extends _chartComponent.default {
         const {
           name
         } = d;
-        return "translate(".concat(fx(name), ",0)");
+        return `translate(${fx(name)},0)`;
       }).attr('data-transform', d => {
         const {
           name
@@ -282,7 +282,7 @@ class BarCustom extends _chartComponent.default {
       }).on('mouseleave', (event, data) => {
         this.hiddenTooltip();
         this.handleStacksAcitveAndInActiveState('active', event);
-      }).append('xhtml:div').attr('class', 'stack').attr('data-rectId', rect.getAttribute('data-rectId')).attr('style', "width: 100%; height: 100%; background-color: ".concat(rect.getAttribute('fill'), "; border-radius: ").concat(safeBorderRadius, "px ").concat(safeBorderRadius, "px 0px 0px"));
+      }).append('xhtml:div').attr('class', 'stack').attr('data-rectId', rect.getAttribute('data-rectId')).attr('style', `width: 100%; height: 100%; background-color: ${rect.getAttribute('fill')}; border-radius: ${safeBorderRadius}px ${safeBorderRadius}px 0px 0px`);
 
       // Remove old rect
       d3.select(rect).remove();

package/dist/view/wrapper/bar-group.js

@@ -101,12 +101,12 @@ class BarGroup extends _chartComponent.default {
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding + marginTop]);
 
       // Y axis
-      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
+      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', `translate(${insertPadding},0)`).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
       const fx = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.25).paddingOuter(0.1);
       const sortedData = _utils.BaseUtils.sortDataByGroupName((0, _lodashEs.cloneDeep)(data), 'group_name', columnGroupbyColumn, chart);
 
       // X axis
-      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0,${chartHeight - insertPadding})`).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
         g.selectAll('text').attr('font-size', theme.fontSize);
@@ -119,13 +119,17 @@ class BarGroup extends _chartComponent.default {
       const groupedData = d3.group(sortedData, d => d.name);
       const group = contentWrapper.selectAll().data(groupedData).join('g').attr('transform', _ref => {
         let [name] = _ref;
-        return "translate(".concat(fx(name), ",0)");
+        return `translate(${fx(name)},0)`;
       });
       group.each((_ref2, groupIndex, groupNodes) => {
         let [, dum] = _ref2;
         const groupNode = groupNodes[groupIndex];
         const localX = d3.scaleBand().domain(dum.map(d => d.group_name)).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
-        const rectSelection = d3.select(groupNode).selectAll('rect').data(dum).join('rect').attr('opacity', 1).attr('x', d => localX(d.group_name)).attr('y', d => y(d.value)).attr('width', localX.bandwidth()).attr('height', d => y(0) - y(d.value)).attr('fill', d => this.colorMap[d.group_name] || _constants.CHART_STYLE_COLORS[0]).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('data-slugid', d => d.slugId);
+        const rectSelection = d3.select(groupNode).selectAll('rect').data(dum).join('rect').attr('opacity', 1).attr('x', d => localX(d.group_name)).attr('y', d => y(d.value)).attr('width', localX.bandwidth()).attr('height', d => y(0) - y(d.value)).attr('fill', d => {
+          var _this$colorMap$colorK;
+          const colorKey = d.group_name || d.group_name === 0 ? d.group_name : '';
+          return (_this$colorMap$colorK = this.colorMap[colorKey]) !== null && _this$colorMap$colorK !== void 0 ? _this$colorMap$colorK : _constants.CHART_STYLE_COLORS[0];
+        }).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('data-slugid', d => d.slugId);
         const {
           borderRadius
         } = this.chartBoundingClientRect;

package/dist/view/wrapper/bar-stack.js

@@ -109,11 +109,11 @@ class BarStack extends _chartComponent.default {
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding + marginTop]);
 
       // Y axis
-      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
+      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', `translate(${insertPadding},0)`).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
       const x = d3.scaleBand().domain(d3.group(data, d => d.name).keys()).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
 
       // X axis
-      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0,${chartHeight - insertPadding})`).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
         g.selectAll('text').attr('font-size', theme.fontSize);
@@ -269,7 +269,7 @@ class BarStack extends _chartComponent.default {
       }).on('mouseleave', (event, data) => {
         this.hiddenTooltip();
         this.handleAcitveAndInActiveState('active', event);
-      }).append('xhtml:div').attr('style', "width: 100%; height: 100%; background-color: ".concat(rect.getAttribute('fill'), "; border-radius: ").concat(xWidth * borderRadius, "px ").concat(xWidth * borderRadius, "px 0px 0px"));
+      }).append('xhtml:div').attr('style', `width: 100%; height: 100%; background-color: ${rect.getAttribute('fill')}; border-radius: ${xWidth * borderRadius}px ${xWidth * borderRadius}px 0px 0px`);
 
       // Remove old rect
       d3.select(rect).remove();

package/dist/view/wrapper/bar.js

@@ -165,11 +165,11 @@ class Bar extends _chartComponent.default {
       const y = d3.scaleLinear().domain(y_axis_auto_range ? [0, d3.max(data, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding + marginTop]);
 
       // Y axis
-      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
+      this.chart.append('g').attr('class', 'y-axis-wrapper').attr('transform', `translate(${insertPadding}, 0)`).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, y_axis_summary_method))).call(g => this.drawYaxis(g, theme));
       const x = d3.scaleBand().domain(data.map(item => item.name)).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
 
       // X axis
-      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0, ${chartHeight - insertPadding})`).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
         g.selectAll('text').attr('font-size', theme.fontSize);

package/dist/view/wrapper/basic-number-card.js

@@ -146,11 +146,11 @@ class BasicNumericCard extends _react.Component {
         width: '100%',
         top: 'calc((100% - 25px)/2)',
         transform: 'translateY(-50%)',
-        fontSize: "".concat(font_size, "px"),
+        fontSize: `${font_size}px`,
         margin: '-8px 0 2px 0',
-        textAlign: "".concat(text_align),
-        fontWeight: "".concat(font_weight),
-        color: "".concat(font_color)
+        textAlign: `${text_align}`,
+        fontWeight: `${font_weight}`,
+        color: `${font_color}`
       }
     }, /*#__PURE__*/_react.default.createElement("span", {
       onClick: this.handleClickNumber,
@@ -164,10 +164,10 @@ class BasicNumericCard extends _react.Component {
         width: '100%',
         bottom: '0px',
         margin: '0',
-        transform: currentLineHeight ? "translateY(".concat(currentLabelHeight - currentLineHeight, "px)") : '',
-        fontSize: "".concat(card_label_font_size, "px"),
-        fontWeight: "".concat(label_font_weight),
-        textAlign: "".concat(label_text_align),
+        transform: currentLineHeight ? `translateY(${currentLabelHeight - currentLineHeight}px)` : '',
+        fontSize: `${card_label_font_size}px`,
+        fontWeight: `${label_font_weight}`,
+        textAlign: `${label_text_align}`,
         color: label_font_color,
         overflow: 'hidden',
         textOverflow: 'ellipsis',

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

@@ -85,7 +85,7 @@ class ChartComponent extends _react.Component {
           width,
           height
         } = 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');
+        this.chart.append('defs').append('mask').attr('id', `mask-wrapper-${previewType}-${this.chart.node().id}`).append('rect').attr('x', 0).attr('y', 0).attr('width', width).attr('height', height - 30).attr('fill', 'white');
       }
     };
     this.getChartDisplayLabels = (containerWidth, minItemWidth, charts) => {
@@ -248,8 +248,8 @@ class ChartComponent extends _react.Component {
       this.globalTheme === _constants.THEME_NAME_MAP.DARK ? textColor = '#fff' : textColor = '#999';
 
       // xAxis
-      const xAxisID = "chart-x-axis-label_".concat(chart.id);
-      const xLabel = chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.querySelector("#".concat(xAxisID));
+      const xAxisID = `chart-x-axis-label_${chart.id}`;
+      const xLabel = chartContainer === null || chartContainer === void 0 ? void 0 : chartContainer.querySelector(`#${xAxisID}`);
       const {
         width: containerWidth
       } = this.chartBoundingClientRect;
@@ -258,20 +258,20 @@ class ChartComponent extends _react.Component {
         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: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute; bottom: 0;"));
+        div.innerHTML = `${column ? column.name : ''}`;
+        div.setAttribute('style', `color:${textColor}; width: ${containerWidth}px; text-align: ${x_axis_label_position}; position: absolute; bottom: 0;`);
         chartContainer.appendChild(div);
       }
       if (xLabel && x_axis_show_label) {
-        xLabel.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(x_axis_label_position, "; position: absolute; bottom: 0;"));
+        xLabel.setAttribute('style', `color:${textColor}; width: ${containerWidth}px; text-align: ${x_axis_label_position}; position: absolute; bottom: 0;`);
       }
       if (xLabel && !x_axis_show_label) {
         xLabel.parentNode.removeChild(xLabel);
       }
 
       // yAxis
-      const yAxisID = "chart-y-axis-label_".concat(chart.id);
-      const yLabel = chartContainer.querySelector("#".concat(yAxisID));
+      const yAxisID = `chart-y-axis-label_${chart.id}`;
+      const yLabel = chartContainer.querySelector(`#${yAxisID}`);
       const divHeight = 20;
       if (!yLabel && y_axis_show_label) {
         const div = document.createElement('div');
@@ -293,7 +293,7 @@ class ChartComponent extends _react.Component {
         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; 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)"));
+        div.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
         chartContainer.appendChild(div);
       }
       if (yLabel && y_axis_show_label) {
@@ -303,15 +303,15 @@ class ChartComponent extends _react.Component {
         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; 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)"));
+        yLabel.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
       }
       if (yLabel && !y_axis_show_label) {
         yLabel.parentNode.removeChild(yLabel);
       }
 
       // yAxis(left) - combination chart
-      const yAxisLeftID = "chart-y-axis-left-label_".concat(chart.id);
-      const yAxisLeftLabel = chartContainer.querySelector("#".concat(yAxisLeftID));
+      const yAxisLeftID = `chart-y-axis-left-label_${chart.id}`;
+      const yAxisLeftLabel = chartContainer.querySelector(`#${yAxisLeftID}`);
       if (!yAxisLeftLabel && show_y_axis_left_label) {
         const div = document.createElement('div');
         div.id = yAxisLeftID;
@@ -326,7 +326,7 @@ class ChartComponent extends _react.Component {
         let textAlign = 'center';
         if (y_axis_left_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
         if (y_axis_left_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)"));
+        div.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
         chartContainer.appendChild(div);
       }
       if (yAxisLeftLabel && show_y_axis_left_label) {
@@ -334,15 +334,15 @@ class ChartComponent extends _react.Component {
         let textAlign = 'center';
         if (y_axis_left_label_position === 'bottom') textAlign = 'left';
         if (y_axis_left_label_position === 'top') textAlign = 'right';
-        yAxisLeftLabel.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)"));
+        yAxisLeftLabel.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
       }
       if (yAxisLeftLabel && !show_y_axis_left_label) {
         yAxisLeftLabel.parentNode.removeChild(yAxisLeftLabel);
       }
 
       // yAxis(right) - combination chart
-      const yAxisRightID = "chart-y-axis-right-label_".concat(chart.id);
-      const yAxisRightLabel = chartContainer.querySelector("#".concat(yAxisRightID));
+      const yAxisRightID = `chart-y-axis-right-label_${chart.id}`;
+      const yAxisRightLabel = chartContainer.querySelector(`#${yAxisRightID}`);
       if (!yAxisRightLabel && show_y_axis_right_label) {
         const div = document.createElement('div');
         div.id = yAxisRightID;
@@ -357,7 +357,7 @@ class ChartComponent extends _react.Component {
         let textAlign = 'center';
         if (y_axis_right_label_position === _constants.LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
         if (y_axis_right_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; right: 0; transform: translate(").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+        div.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; right: 0; transform: translate(${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
         chartContainer.appendChild(div);
       }
       if (yAxisRightLabel && show_y_axis_right_label) {
@@ -365,7 +365,7 @@ class ChartComponent extends _react.Component {
         let textAlign = 'center';
         if (y_axis_right_label_position === 'bottom') textAlign = 'left';
         if (y_axis_right_label_position === 'top') textAlign = 'right';
-        yAxisRightLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; height: ").concat(divHeight, "px; text-align: ").concat(textAlign, "; top: 0; right: 0; transform: translate(").concat(containerHeight / 2 - divHeight / 2, "px, ").concat(containerHeight / 2 - divHeight / 2, "px) rotate(-90deg)"));
+        yAxisRightLabel.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; right: 0; transform: translate(${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
       }
       if (yAxisRightLabel && !show_y_axis_right_label) {
         yAxisRightLabel.parentNode.removeChild(yAxisRightLabel);
@@ -385,8 +385,8 @@ class ChartComponent extends _react.Component {
       } = 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 xAxisID = `chart-x-axis-label_${chart.id}`;
+      const xLabel = chartContainer.querySelector(`#${xAxisID}`);
       const {
         width: containerWidth
       } = this.chartBoundingClientRect;
@@ -398,19 +398,19 @@ class ChartComponent extends _react.Component {
           div.innerHTML = _intl.default.get('Amount');
         } else {
           const column = (0, _dtableUtils.getTableColumnByKey)(table, horizontal_axis_column_key);
-          div.innerHTML = "".concat(column ? column.name : '');
+          div.innerHTML = `${column ? column.name : ''}`;
         }
-        div.setAttribute('style', "color:".concat(textColor, "; width: ").concat(containerWidth, "px; text-align: ").concat(horizontal_axis_label_position, "; position: absolute"));
+        div.setAttribute('style', `color:${textColor}; width: ${containerWidth}px; text-align: ${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"));
+        xLabel.setAttribute('style', `color:${textColor}; width: ${containerWidth}px; text-align: ${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 yAxisID = `chart-y-axis-label_${chart.id}`;
+      const yLabel = chartContainer.querySelector(`#${yAxisID}`);
       const divHeight = 20;
       if (!yLabel && show_vertical_axis_label) {
         const div = document.createElement('div');
@@ -424,7 +424,7 @@ class ChartComponent extends _react.Component {
         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)"));
+        div.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
         chartContainer.appendChild(div);
       }
       if (yLabel && show_horizontal_axis_label) {
@@ -434,7 +434,7 @@ class ChartComponent extends _react.Component {
         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)"));
+        yLabel.setAttribute('style', `color:${textColor}; position: absolute; width: ${containerHeight}px; height: ${divHeight}px; text-align: ${textAlign}; top: 0; left: 0; transform: translate(-${containerHeight / 2 - divHeight / 2}px, ${containerHeight / 2 - divHeight / 2}px) rotate(-90deg)`);
       }
       if (yLabel && !show_horizontal_axis_label) {
         yLabel.parentNode.removeChild(yLabel);
@@ -509,7 +509,7 @@ class ChartComponent extends _react.Component {
           if (groupsData.length === 1) {
             curTranslateX = (chartWidth - width - insertPadding * 2) / 2;
           }
-          legendWrapper.attr('transform', "translate(".concat(curTranslateX, ",").concat(curTranslateY, ")"));
+          legendWrapper.attr('transform', `translate(${curTranslateX},${curTranslateY})`);
         });
       }
 
@@ -532,7 +532,7 @@ class ChartComponent extends _react.Component {
         const pageNavigator = legendWrapper.append('g').attr('class', 'legend-flip-page');
 
         // count
-        pageNavigator.append('text').attr('class', 'legend-count').attr('x', 15).attr('y', legendItemTextPaddingTop).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text("".concat(curCount + 1, "/").concat(groupsData.length));
+        pageNavigator.append('text').attr('class', 'legend-count').attr('x', 15).attr('y', legendItemTextPaddingTop).attr('fill', theme.legendTextColor).attr('font-size', theme.legendFontSize).text(`${curCount + 1}/${groupsData.length}`);
 
         // prev page
         pageNavigator.append('polygon').attr('class', 'legend-prev-page').attr('points', this.calcEquilateralTriangle(5, 8, 12)).attr('fill', theme.legendPageNavigatorMarkerColor).attr('opacity', curCount === 0 ? 0.45 : 1).attr('style', 'cursor: pointer;').on('click', event => {
@@ -543,7 +543,7 @@ class ChartComponent extends _react.Component {
               groupData: groupsData[curCount],
               colorScale,
               theme,
-              text: "".concat(curCount + 1, "/").concat(groupsData.length)
+              text: `${curCount + 1}/${groupsData.length}`
             });
           }
         });
@@ -557,7 +557,7 @@ class ChartComponent extends _react.Component {
               groupData: groupsData[curCount],
               colorScale,
               theme,
-              text: "".concat(curCount + 1, "/").concat(groupsData.length)
+              text: `${curCount + 1}/${groupsData.length}`
             });
           }
         });
@@ -582,7 +582,7 @@ class ChartComponent extends _react.Component {
             } = g.node().parentNode.getBoundingClientRect();
             groupTranslateY = groupTranslateY + height + legendItemMargin;
           }
-          g.attr('transform', "translate(".concat(groupTranslateX, ",").concat(groupTranslateY, ")"));
+          g.attr('transform', `translate(${groupTranslateX},${groupTranslateY})`);
         });
       }
     };
@@ -654,7 +654,7 @@ class ChartComponent extends _react.Component {
               const prevTranslateY = Number(prevItem.getAttribute('data-translateY'));
               translateY = prevTranslateY + height + legendItemMargin;
             }
-            d3.select(item).attr('transform', "translate(".concat(start, ",").concat(translateY, ")")).attr('data-translateY', translateY);
+            d3.select(item).attr('transform', `translate(${start},${translateY})`).attr('data-translateY', translateY);
           });
         } else {
           // update g translateX
@@ -668,7 +668,7 @@ class ChartComponent extends _react.Component {
               const prevTranslateX = Number(prevItem.getAttribute('data-translateX'));
               translateX = prevTranslateX + width + legendItemMargin;
             }
-            d3.select(item).attr('transform', "translate(".concat(translateX, ",0)")).attr('data-translateX', translateX);
+            d3.select(item).attr('transform', `translate(${translateX},0)`).attr('data-translateX', translateX);
 
             // legend items add offset 
             if (legendPosition === 'top-right') {
@@ -815,7 +815,7 @@ class ChartComponent extends _react.Component {
       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('transform', `translate(${curTranslateX}, 0)`).attr('data-translateX', curTranslateX);
         d3.select(legendItem).attr('opacity', 1);
       });
     };
@@ -864,8 +864,9 @@ class ChartComponent extends _react.Component {
         colors = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors;
       }
       const colorMap = newData.reduce((acc, cur) => {
-        if (cur[groupName] && !acc[cur[groupName]]) {
-          acc[cur[groupName]] = colors[currentIdx++ % colors.length];
+        const key = cur[groupName] || cur[groupName] === 0 ? cur[groupName] : '';
+        if (!acc.hasOwnProperty(key)) {
+          acc[key] = colors[currentIdx++ % colors.length];
         }
         return acc;
       }, {});
@@ -996,7 +997,7 @@ class ChartComponent extends _react.Component {
       const {
         width: chartWidth
       } = this.chartBoundingClientRect;
-      const annotationWrapper = this.chart.append('g').attr('class', "annotation-wrapper");
+      const annotationWrapper = this.chart.append('g').attr('class', `annotation-wrapper`);
       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);
       });
@@ -1063,7 +1064,7 @@ class ChartComponent extends _react.Component {
         if (chartType === _constants.CHART_TYPE.BAR_STACK) {
           translateY = translateY;
         }
-        g.attr('transform', "translate(".concat(translateX, ", ").concat(translateY, ")"));
+        g.attr('transform', `translate(${translateX}, ${translateY})`);
       });
     };
     this.setActiveAndInActiveState = (state, allGroup, curGroupName, chartType) => {
@@ -1123,7 +1124,7 @@ class ChartComponent extends _react.Component {
       }
       const clipPath = d3.select(parentNode).append('clipPath').attr('opacity', 1).attr('id', rectId);
       clipPath.node().appendChild(clipRect.node());
-      d3.select(rect).attr('clip-path', "url(#".concat(rectId, ")"));
+      d3.select(rect).attr('clip-path', `url(#${rectId})`);
     };
     this.drawYaxis = function (g, theme) {
       let rightAxisOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
@@ -1144,7 +1145,7 @@ class ChartComponent extends _react.Component {
       g.selectAll('.tick line').clone().attr('x2', chartWidth - insertPadding * 2 - _this.horizontalOverflowOffset - rightAxisOffset).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
 
       // update g translateX
-      g.attr('transform', "translate(".concat(insertPadding + _this.horizontalOverflowOffset, ", 0)"));
+      g.attr('transform', `translate(${insertPadding + _this.horizontalOverflowOffset}, 0)`);
     };
     this.checkTextOverflow = allTextEl => {
       const {
@@ -1235,8 +1236,8 @@ class ChartComponent extends _react.Component {
         } = g.node().getBoundingClientRect();
         if (isRoateText && width > insertPadding) {
           const viewWidth = viewBox[viewBox.length - 2];
-          viewBox[0] = "-".concat(width - insertPadding);
-          viewBox[viewBox.length - 2] = "".concat(Number(viewWidth) + (width - insertPadding));
+          viewBox[0] = `-${width - insertPadding}`;
+          viewBox[viewBox.length - 2] = `${Number(viewWidth) + (width - insertPadding)}`;
           queueMicrotask(() => {
             if (!this.chart) return;
             this.chart.attr('viewBox', viewBox.join(','));
@@ -1269,7 +1270,7 @@ class ChartComponent extends _react.Component {
         } = g.node().getBoundingClientRect();
         if (height > insertPadding) {
           const viewHeight = viewBox[viewBox.length - 1];
-          viewBox[viewBox.length - 1] = "".concat(Number(viewHeight) + (height - insertPadding));
+          viewBox[viewBox.length - 1] = `${Number(viewHeight) + (height - insertPadding)}`;
           queueMicrotask(() => {
             if (!this.chart) return;
             this.chart.attr('viewBox', viewBox.join(','));

package/dist/view/wrapper/combination.js

@@ -112,7 +112,7 @@ class Combination extends _chartComponent.default {
       const rightY = d3.scaleLinear().domain(y_axis_auto_range_right ? [d3.min(data, d => d.value_right), rightNiceEnd] : [y_axis_min_right, y_axis_max_right]).range([chartHeight - insertPadding, insertPadding + marginTop]);
 
       // Y axis (right)
-      const rightAxisWrapper = this.chart.append('g').attr('class', 'y-axis-wrapper-right').attr('transform', "translate(".concat(chartWidth - insertPadding, ",0)")).call(d3.axisRight(rightY).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, d, y_axis_right_summary_column))).call(g => {
+      const rightAxisWrapper = this.chart.append('g').attr('class', 'y-axis-wrapper-right').attr('transform', `translate(${chartWidth - insertPadding},0)`).call(d3.axisRight(rightY).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(rightSummaryColumn, d, y_axis_right_summary_column))).call(g => {
         g.select('.domain').remove();
         g.selectAll('text').attr('font-size', theme.fontSize);
         g.selectAll('text').attr('fill', theme.textColor);
@@ -122,12 +122,12 @@ class Combination extends _chartComponent.default {
       const leftY = d3.scaleLinear().domain(y_axis_auto_range_left ? [0, leftNiceEnd] : [y_axis_min_left, y_axis_max_left]).range([chartHeight - insertPadding, insertPadding + marginTop]);
 
       // Y axis (left)
-      this.chart.append('g').attr('class', 'y-axis-wrapper-left').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(leftY).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, d, y_axis_left_summary_method))).call(g => this.drawYaxis(g, theme, rightAxisOffset));
+      this.chart.append('g').attr('class', 'y-axis-wrapper-left').attr('transform', `translate(${insertPadding},0)`).call(d3.axisLeft(leftY).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(leftSummaryColumn, d, y_axis_left_summary_method))).call(g => this.drawYaxis(g, theme, rightAxisOffset));
       const fx = d3.scaleBand().domain(new Set(data.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding - rightAxisOffset]).paddingInner(0.5).paddingOuter(0.1);
       const x = d3.scaleBand().domain(y_axis_left_group_by_multiple_numeric_column ? new Set(data.map(d => d.group_name)) : new Set([data[0]])).range([0, fx.bandwidth()]).paddingInner(y_axis_left_group_by_multiple_numeric_column ? 0.2 : 0).paddingOuter(0);
 
       // X axis
-      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0,${chartHeight - insertPadding})`).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
         g.selectAll('.domain').attr('stroke', theme.XAxisColor);
         g.selectAll('.tick line').attr('stroke', theme.XAxisColor);
         g.selectAll('text').attr('font-size', theme.fontSize);
@@ -138,7 +138,7 @@ class Combination extends _chartComponent.default {
       // Rect group
       this.chart.append('g').attr('class', 'content-wrapper').selectAll().data(d3.group(data, d => d.name)).join('g').attr('transform', _ref => {
         let [name, dum] = _ref;
-        return "translate(".concat(fx(name), ",0)");
+        return `translate(${fx(name)},0)`;
       })
       // rect item
       .selectAll().data(_ref2 => {
@@ -221,7 +221,7 @@ class Combination extends _chartComponent.default {
       let offset = 0;
       if (rightAxisWidth > insertPadding) {
         offset = rightAxisWidth - insertPadding;
-        rightAxisWrapper.attr('transform', "translate(".concat(chartWidth - insertPadding - offset, ",0)"));
+        rightAxisWrapper.attr('transform', `translate(${chartWidth - insertPadding - offset},0)`);
         return offset;
       }
       return offset;
@@ -328,7 +328,7 @@ class Combination extends _chartComponent.default {
               } = g.node().getBoundingClientRect();
               const translateX = Number(curCircleEl.getAttribute('cx')) - width / 2;
               const translateY = Number(curCircleEl.getAttribute('cy')) - 10;
-              g.attr('transform', "translate(".concat(translateX, ", ").concat(translateY, ")"));
+              g.attr('transform', `translate(${translateX}, ${translateY})`);
             });
           }
         }).on('mouseover', event => {