sea-chart 2.0.40 → 2.0.43

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

@@ -94,7 +94,7 @@ class Completeness extends _chartComponent.default {
         const {
           width: axisWidth
         } = g.node().getBoundingClientRect();
-        g.attr('transform', "translate(".concat(axisWidth, ", 0)")).attr('data-axisWidth', axisWidth);
+        g.attr('transform', `translate(${axisWidth}, 0)`).attr('data-axisWidth', axisWidth);
         this.checkTickOverlap(g, 'yAxis');
       });
 
@@ -102,7 +102,7 @@ class Completeness extends _chartComponent.default {
       const allSeries = this.getAllSeries(newSeries);
       const niceEnd = d3.nice(0, d3.max(allSeries, d => d.sumValue), 5)[1];
       const x = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min || 0, y_axis_max || niceEnd]).range([Number(yAxis.node().getAttribute('data-axisWidth')), chartWidth - insertPadding - marginRight]);
-      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeInner(0).ticks(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0, ${chartHeight - insertPadding})`).call(d3.axisBottom(x).tickSizeInner(0).ticks(5)).call(g => {
         g.selectAll('.domain').remove();
         g.selectAll('.tick line').node() && g.selectAll('.tick line').node().remove(); // delete the first line
         g.selectAll('.tick line').attr('y2', -(chartHeight - insertPadding * 2)).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
@@ -111,13 +111,13 @@ class Completeness extends _chartComponent.default {
       });
 
       // Rect group
-      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', `translate(${Number(yAxis.node().getAttribute('data-axisWidth'))}, 0)`);
       const mainGroups = contentWrapper.selectAll().data(newSeries).join('g').attr('transform', _ref => {
         let [name] = _ref;
-        return "translate(0, ".concat(fy(name), ")");
+        return `translate(0, ${fy(name)})`;
       }).attr('data-transform', _ref2 => {
         let [name] = _ref2;
-        return "".concat(fy(name));
+        return `${fy(name)}`;
       });
       const colorMap = this.colorMap;
       const self = this;
@@ -143,7 +143,7 @@ class Completeness extends _chartComponent.default {
           const completedValue = completedItem ? Number(((_completedItem$rawDat = completedItem.rawData) === null || _completedItem$rawDat === void 0 ? void 0 : _completedItem$rawDat.value) || 0) : 0;
           const targetValue = restValue + completedValue;
           if (!targetValue) return '';
-          return "".concat(Math.round(completedValue / targetValue * 100), "%");
+          return `${Math.round(completedValue / targetValue * 100)}%`;
         }).selectAll().data(_ref6 => {
           let [_, d] = _ref6;
           return d;
@@ -391,7 +391,7 @@ class Completeness extends _chartComponent.default {
       }).on('mouseleave', event => {
         this.hiddenTooltip();
         this.handleAcitveAndInActiveState('active', event);
-      }).append('xhtml:div').attr('style', "width: 100%; height: 100%; background-color: ".concat(rect.getAttribute('fill'), "; border-radius: 0px ").concat(xWidth * borderRadius, "px ").concat(xWidth * borderRadius, "px 0px"));
+      }).append('xhtml:div').attr('style', `width: 100%; height: 100%; background-color: ${rect.getAttribute('fill')}; border-radius: 0px ${xWidth * borderRadius}px ${xWidth * borderRadius}px 0px`);
 
       // Remove old rect
       d3.select(rect).remove();

package/dist/view/wrapper/completeness.js

@@ -86,14 +86,14 @@ class Completeness extends _chartComponent.default {
         const {
           width: axisWidth
         } = g.node().getBoundingClientRect();
-        g.attr('transform', "translate(".concat(axisWidth, ", 0)")).attr('data-axisWidth', axisWidth);
+        g.attr('transform', `translate(${axisWidth}, 0)`).attr('data-axisWidth', axisWidth);
         this.checkTickOverlap(g, 'yAxis');
       });
 
       // X axis
       const niceEnd = d3.nice(0, d3.max(newSeries, d => d[1].sumValue), 5)[1];
       const x = d3.scaleLinear().domain(y_axis_auto_range ? [0, niceEnd] : [y_axis_min || 0, y_axis_max || niceEnd]).range([Number(yAxis.node().getAttribute('data-axisWidth')), chartWidth - insertPadding - marginRight]);
-      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeInner(0).ticks(5)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0, ${chartHeight - insertPadding})`).call(d3.axisBottom(x).tickSizeInner(0).ticks(5)).call(g => {
         g.selectAll('.domain').remove();
         g.selectAll('.tick line').node() && g.selectAll('.tick line').node().remove(); // delete the first line
         g.selectAll('.tick line').attr('y2', -(chartHeight - insertPadding * 2)).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
@@ -102,7 +102,7 @@ class Completeness extends _chartComponent.default {
       });
 
       // Rect group
-      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', `translate(${Number(yAxis.node().getAttribute('data-axisWidth'))}, 0)`);
       contentWrapper.selectAll().data(newSeries).join('g').attr('data-completedRate', d => {
         const restData = d[1].find(item => item.key === 'rest');
         const completedRate = restData.data.completedRate;
@@ -279,7 +279,7 @@ class Completeness extends _chartComponent.default {
       }).on('mouseleave', event => {
         this.hiddenTooltip();
         this.handleAcitveAndInActiveState('active', event);
-      }).append('xhtml:div').attr('style', "width: 100%; height: 100%; background-color: ".concat(rect.getAttribute('fill'), "; border-radius: 0px ").concat(xWidth * borderRadius, "px ").concat(xWidth * borderRadius, "px 0px"));
+      }).append('xhtml:div').attr('style', `width: 100%; height: 100%; background-color: ${rect.getAttribute('fill')}; border-radius: 0px ${xWidth * borderRadius}px ${xWidth * borderRadius}px 0px`);
 
       // Remove old rect
       d3.select(rect).remove();

package/dist/view/wrapper/dashboard.js

@@ -89,7 +89,7 @@ class Dashboard extends _chartComponent.default {
         const top = height / 2 + insertPadding;
         const offsetX = (chartWidth - insertPadding - insertPadding - width) / 2;
         const offsetY = (chartHeight - insertPadding - insertPadding - height) / 2;
-        d3.select(g.node().parentNode).attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")"));
+        d3.select(g.node().parentNode).attr('transform', `translate(${left + offsetX}, ${top + offsetY})`);
 
         // Draw uncompleted path
         if (formatValue < 100) {
@@ -117,8 +117,11 @@ class Dashboard extends _chartComponent.default {
       }, (_, i) => i);
       const lineInnerRadius = arc.innerRadius()();
       const x = d3.scaleBand().domain(ticks).range([startAngle, endAngle]).paddingInner(1).paddingOuter(0);
-      this.chart.append('g').attr('class', 'ticks-line-wrapper').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).selectAll().data(x.domain()).join('g').attr('transform', (d, index) => {
-        return "\n        rotate(".concat(x(d) * 180 / Math.PI - 90, ")\n        translate(").concat(lineInnerRadius, ",0)\n      ");
+      this.chart.append('g').attr('class', 'ticks-line-wrapper').attr('transform', `translate(${left + offsetX}, ${top + offsetY})`).selectAll().data(x.domain()).join('g').attr('transform', (d, index) => {
+        return `
+        rotate(${x(d) * 180 / Math.PI - 90})
+        translate(${lineInnerRadius},0)
+      `;
       }).attr('data-value', d => d).call(g => {
         g.nodes().forEach(group => {
           const value = Number(group.getAttribute('data-value'));
@@ -131,16 +134,16 @@ class Dashboard extends _chartComponent.default {
             const rotateVal = ((x(value) + x.bandwidth() / 2) * 180 / Math.PI - 90) * -1; // -1 is Rotate the text
             d3.select(group).append('text').attr('transform', () => {
               if (x(value) <= -(Math.PI / 4)) {
-                return "translate(-25,-5) rotate(".concat(rotateVal, ")");
+                return `translate(-25,-5) rotate(${rotateVal})`;
               }
               if (x(value) <= 0) {
-                return "translate(-30,-5) rotate(".concat(rotateVal, ")");
+                return `translate(-30,-5) rotate(${rotateVal})`;
               }
               if (x(value) <= Math.PI / 4) {
-                return "translate(-30,-2) rotate(".concat(rotateVal, ")");
+                return `translate(-30,-2) rotate(${rotateVal})`;
               }
               if (x(value) <= Math.PI) {
-                return "translate(-30,3) rotate(".concat(rotateVal, ")");
+                return `translate(-30,3) rotate(${rotateVal})`;
               }
             }).text(text).attr('fill', theme.textColor);
           }
@@ -155,7 +158,7 @@ class Dashboard extends _chartComponent.default {
 
       // Pointer
       d3.select(wrapper).append('g').attr('class', 'pointer-wrapper').append('rect').attr('x', -2).attr('y', -78).attr('width', 6).attr('height', 70).attr('fill', '#1890FF').attr('rx', 3).attr('transform', () => {
-        return "rotate(".concat(rotate, ")");
+        return `rotate(${rotate})`;
       });
     };
     this.drawUncompletedPath = (wrapper, innerRadius, outerRadius, startAngle, endAngle) => {
@@ -219,7 +222,7 @@ class Dashboard extends _chartComponent.default {
       totalWrapper.append('text').attr('fill', label_font_color || theme.textColor).attr('font-size', card_label_font_size || (chartHeight > 240 ? 20 : 12)).attr('font-weight', label_font_weight).attr('text-anchor', titleAlign.textAnchor).attr('x', titleAlign.x).text(name).attr('dy', 50);
 
       // total
-      totalWrapper.append('text').attr('fill', font_color || theme.textColor).attr('font-size', font_size || (chartHeight > 240 ? 36 : 16)).attr('font-weight', font_weight).attr('text-anchor', numberAlign.textAnchor).attr('x', numberAlign.x).text("".concat(formatValue, "%")).attr('dy', 90).style('cursor', toggleRecords ? 'pointer' : 'default').on('click', () => {
+      totalWrapper.append('text').attr('fill', font_color || theme.textColor).attr('font-size', font_size || (chartHeight > 240 ? 36 : 16)).attr('font-weight', font_weight).attr('text-anchor', numberAlign.textAnchor).attr('x', numberAlign.x).text(`${formatValue}%`).attr('dy', 90).style('cursor', toggleRecords ? 'pointer' : 'default').on('click', () => {
         if (toggleRecords) {
           this.handleClickNumber();
         }

package/dist/view/wrapper/funnel.js

@@ -155,7 +155,12 @@ class Funnel extends _chartComponent.default {
           points4X = x(0) + nextOffsetX;
           points4Y = y(nextName);
         }
-        contentWrapper.append('polygon').attr('opacity', 1).attr('fill', colorScale(curName)).attr('points', "\n          ".concat(x(0) + curOffsetX, ",").concat(y(curName), "\n          ").concat(x(curValue) + curOffsetX, ",").concat(y(curName), "\n          ").concat(points3X, ",").concat(points3Y, "\n          ").concat(points4X, ",").concat(points4Y, "\n        ")).attr('data-left', "".concat(Math.min(x(0) + curOffsetX, points4X))).attr('data-top', "".concat(y(curName))).attr('data-name', curName).call(g => {
+        contentWrapper.append('polygon').attr('opacity', 1).attr('fill', colorScale(curName)).attr('points', `
+          ${x(0) + curOffsetX},${y(curName)}
+          ${x(curValue) + curOffsetX},${y(curName)}
+          ${points3X},${points3Y}
+          ${points4X},${points4Y}
+        `).attr('data-left', `${Math.min(x(0) + curOffsetX, points4X)}`).attr('data-top', `${y(curName)}`).attr('data-name', curName).call(g => {
           Array.from(g.node().parentNode.children).forEach((g, index) => {
             // Add label
             if (funnel_show_labels) {
@@ -247,7 +252,7 @@ class Funnel extends _chartComponent.default {
     this.contentFormatterMap = {
       [_constants.FUNNEL_LABEL_FORMAT.NUMBER]: obj => obj === null || obj === void 0 ? void 0 : obj.value,
       [_constants.FUNNEL_LABEL_FORMAT.PERCENTAGE]: obj => ((obj === null || obj === void 0 ? void 0 : obj.percent) || 0) + '%',
-      [_constants.FUNNEL_LABEL_FORMAT.NUMBER_AND_PERCENTAGE]: obj => "".concat(obj === null || obj === void 0 ? void 0 : obj.value, " (").concat((obj === null || obj === void 0 ? void 0 : obj.percent) || 0, "%)")
+      [_constants.FUNNEL_LABEL_FORMAT.NUMBER_AND_PERCENTAGE]: obj => `${obj === null || obj === void 0 ? void 0 : obj.value} (${(obj === null || obj === void 0 ? void 0 : obj.percent) || 0}%)`
     };
   }
   componentDidMount() {

package/dist/view/wrapper/heat-map.js

@@ -161,7 +161,7 @@ class HeatMap extends _chartComponent.default {
       Array.from(fyDomain).forEach((year, index) => {
         // Y axis
         const y = d3.scaleBand().domain(this.weeks).range([fy(year), fy(year) + (fy.bandwidth() - monthAxisHeight)]).paddingInner(0).paddingOuter(0);
-        yAxisWrapper.append('g').attr('class', "y-axis-".concat(year)).attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).tickSizeOuter(0).tickFormat(d => _intl.default.get(d))).call(g => {
+        yAxisWrapper.append('g').attr('class', `y-axis-${year}`).attr('transform', `translate(${insertPadding}, 0)`).call(d3.axisLeft(y).tickSizeInner(0).tickSizeOuter(0).tickFormat(d => _intl.default.get(d))).call(g => {
           g.select('.domain').remove();
           g.selectAll('text').attr('font-size', 12);
           g.selectAll('text').attr('fill', themeColors.textColor);
@@ -176,14 +176,14 @@ class HeatMap extends _chartComponent.default {
         const weekScale = d3.scaleBand().domain(weekDomain).range([insertPadding, chartWidth - insertPadding]).paddingInner(0).paddingOuter(0);
 
         // year
-        const yearWrapper = contentWrapper.append('g').attr('class', "year-wrapper-".concat(year));
+        const yearWrapper = contentWrapper.append('g').attr('class', `year-wrapper-${year}`);
         dates.forEach(_ref => {
           let [monthIndex, days] = _ref;
           // month
-          const monthWrapper = yearWrapper.append('g').attr('class', "month-".concat(this.months[monthIndex]));
+          const monthWrapper = yearWrapper.append('g').attr('class', `month-${this.months[monthIndex]}`);
           // day
           days.forEach((d, index) => {
-            monthWrapper.append('rect').attr('class', () => "day-".concat((0, _dayjs.default)(d).dayOfYear())).attr('x', () => {
+            monthWrapper.append('rect').attr('class', () => `day-${(0, _dayjs.default)(d).dayOfYear()}`).attr('x', () => {
               let curWeek = (0, _dayjs.default)(d).week();
               // The last few days are the first week of the next year
               if (monthIndex === 11 && curWeek === 1) {
@@ -219,18 +219,18 @@ class HeatMap extends _chartComponent.default {
 
         // X axis
         const x = d3.scalePoint().domain(this.months).range([insertPadding, chartWidth - insertPadding]);
-        xAxisWrapper.append('g').attr('class', "x-axis-".concat(year)).attr('transform', "translate(0, ".concat(fy(year) + fy.bandwidth() - monthAxisHeight, ")")).call(d3.axisBottom(x).tickSizeInner(0).tickSizeOuter(0).tickFormat(d => _intl.default.get(d))).call(g => {
+        xAxisWrapper.append('g').attr('class', `x-axis-${year}`).attr('transform', `translate(0, ${fy(year) + fy.bandwidth() - monthAxisHeight})`).call(d3.axisBottom(x).tickSizeInner(0).tickSizeOuter(0).tickFormat(d => _intl.default.get(d))).call(g => {
           g.select('.domain').remove();
           g.selectAll('.tick').nodes().forEach((item, index) => {
             const curTranslateX = monthTranslateX[index] + weekScale.bandwidth() / 2;
-            d3.select(item).attr('transform', "translate(".concat(curTranslateX, ", 0)"));
+            d3.select(item).attr('transform', `translate(${curTranslateX}, 0)`);
           });
           g.selectAll('text').attr('font-size', 12);
           g.selectAll('text').attr('fill', themeColors.textColor);
         });
 
         // Title
-        titleWrapper.append('text').attr('class', "text-".concat(year)).attr('x', 0).attr('y', fy(year) + fy.bandwidth()).attr('fill', '#000').attr('font-size', 12).attr('font-weight', 500).text(year);
+        titleWrapper.append('text').attr('class', `text-${year}`).attr('x', 0).attr('y', fy(year) + fy.bandwidth()).attr('fill', '#000').attr('font-size', 12).attr('font-weight', 500).text(year);
       });
       this.setLegendForHeatMap({
         exampleColors: ['#EBEDF0', ...exampleColors],
@@ -239,7 +239,7 @@ class HeatMap extends _chartComponent.default {
     };
     this.generateYearDates = year => {
       const dates = [];
-      let current = (0, _dayjs.default)("".concat(year, "-01-01"));
+      let current = (0, _dayjs.default)(`${year}-01-01`);
       while (current.year() === year) {
         dates.push(current);
         current = current.add(1, 'day');

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

@@ -127,14 +127,14 @@ class HorizontalBarGroup extends _chartComponent.default {
         const {
           width: axisWidth
         } = g.node().getBoundingClientRect();
-        g.attr('transform', "translate(".concat(axisWidth, ", 0)")).attr('data-axisWidth', axisWidth);
+        g.attr('transform', `translate(${axisWidth}, 0)`).attr('data-axisWidth', axisWidth);
         this.checkTickOverlap(g, 'yAxis');
       });
       const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
       const x = d3.scaleLinear().domain(horizontal_axis_auto_range ? [0, niceEnd] : [horizontal_axis_min || 0, horizontal_axis_max || niceEnd]).range([Number(yAxis.node().getAttribute('data-axisWidth')), chartWidth - insertPadding - marginRight]);
 
       // X axis
-      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, horizontal_axis_summary_method))).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0, ${chartHeight - insertPadding})`).call(d3.axisBottom(x).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, horizontal_axis_summary_method))).call(g => {
         g.selectAll('.domain').remove();
         g.selectAll('.tick line').node() && g.selectAll('.tick line').node().remove(); // delete the first line
         g.selectAll('.tick line').attr('y2', -(chartHeight - insertPadding * 2)).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
@@ -143,18 +143,20 @@ class HorizontalBarGroup extends _chartComponent.default {
       });
 
       // Rect group
-      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', `translate(${Number(yAxis.node().getAttribute('data-axisWidth'))}, 0)`);
       contentWrapper.selectAll().data(d3.group(sortedData, d => d.name)).join('g').attr('transform', _ref => {
         let [name, dum] = _ref;
         const offset = (fy.bandwidth() - dum.length * y.bandwidth()) / 2;
-        return "translate(0, ".concat(fy(name) + offset, ")");
+        return `translate(0, ${fy(name) + offset})`;
       })
       // rect item
       .selectAll().data(_ref2 => {
         let [_, d] = _ref2;
         return d;
       }).join('rect').attr('opacity', 1).attr('x', 0).attr('y', (d, index) => index * y.bandwidth()).attr('width', d => x(d.value) - x(0)).attr('height', y.bandwidth()).attr('fill', d => {
-        return this.colorMap[d.group_name] || _constants.CHART_STYLE_COLORS[0];
+        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('value', d => d.value).attr('data-slugid', d => d.slugId).attr('data-groupName', d => d.name).call(g => {
         // add rect borderRadius
         g.nodes().forEach(rect => {

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

@@ -110,14 +110,14 @@ class HorizontalBarStack extends _chartComponent.default {
         const {
           width: axisWidth
         } = g.node().getBoundingClientRect();
-        g.attr('transform', "translate(".concat(axisWidth, ", 0)")).attr('data-axisWidth', axisWidth);
+        g.attr('transform', `translate(${axisWidth}, 0)`).attr('data-axisWidth', axisWidth);
         this.checkTickOverlap(g, 'yAxis');
       });
 
       // X axis
       const niceEnd = d3.nice(0, d3.max(newSeries, d => d[1].sumValue), 5)[1];
       const x = d3.scaleLinear().domain(horizontal_axis_auto_range ? [0, niceEnd] : [horizontal_axis_min || 0, horizontal_axis_max || niceEnd]).range([Number(yAxis.node().getAttribute('data-axisWidth')), chartWidth - insertPadding]);
-      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, horizontal_axis_summary_method))).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0, ${chartHeight - insertPadding})`).call(d3.axisBottom(x).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, horizontal_axis_summary_method))).call(g => {
         g.selectAll('.domain').remove();
         g.selectAll('.tick line').node() && g.selectAll('.tick line').node().remove(); // delete the first line
         g.selectAll('.tick line').attr('y2', -(chartHeight - insertPadding * 2)).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
@@ -126,7 +126,7 @@ class HorizontalBarStack extends _chartComponent.default {
       });
 
       // Rect group
-      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', `translate(${Number(yAxis.node().getAttribute('data-axisWidth'))}, 0)`);
       contentWrapper.selectAll().data(newSeries).join('g')
       // rect item
       .selectAll().data(_ref2 => {
@@ -308,7 +308,7 @@ class HorizontalBarStack extends _chartComponent.default {
       }).on('mouseleave', event => {
         this.hiddenTooltip();
         this.handleAcitveAndInActiveState('active', event);
-      }).append('xhtml:div').attr('style', "width: 100%; height: 100%; background-color: ".concat(rect.getAttribute('fill'), "; border-radius: 0px ").concat(xWidth * borderRadius, "px ").concat(xWidth * borderRadius, "px 0px"));
+      }).append('xhtml:div').attr('style', `width: 100%; height: 100%; background-color: ${rect.getAttribute('fill')}; border-radius: 0px ${xWidth * borderRadius}px ${xWidth * borderRadius}px 0px`);
 
       // Remove old rect
       d3.select(rect).remove();

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

@@ -102,21 +102,21 @@ class HorizontalBar extends _chartComponent.default {
         const {
           width: axisWidth
         } = g.node().getBoundingClientRect();
-        g.attr('transform', "translate(".concat(axisWidth, ", 0)")).attr('data-axisWidth', axisWidth);
+        g.attr('transform', `translate(${axisWidth}, 0)`).attr('data-axisWidth', axisWidth);
         this.checkTickOverlap(g, 'yAxis');
       });
       const niceEnd = d3.nice(0, d3.max(data, d => d.value), 5)[1];
       const x = d3.scaleLinear().domain(horizontal_axis_auto_range ? [0, niceEnd] : [horizontal_axis_min || 0, horizontal_axis_max || niceEnd]).range([Number(yAxis.node().getAttribute('data-axisWidth')), chartWidth - insertPadding - marginRight]);
 
       // X axis
-      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0, ".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, horizontal_axis_summary_method))).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0, ${chartHeight - insertPadding})`).call(d3.axisBottom(x).tickSizeInner(0).ticks(5).tickFormat(d => _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, d, horizontal_axis_summary_method))).call(g => {
         g.selectAll('.domain').remove();
         g.selectAll('.tick line').node() && g.selectAll('.tick line').node().remove(); // delete the first line
         g.selectAll('.tick line').attr('y2', -(chartHeight - insertPadding * 2)).attr('stroke', theme.gridColor).attr('stroke-dasharray', '8,3');
         g.selectAll('text').attr('font-size', theme.fontSize);
         g.selectAll('text').attr('fill', theme.textColor);
       });
-      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', "translate(".concat(Number(yAxis.node().getAttribute('data-axisWidth')), ", 0)"));
+      const contentWrapper = this.chart.append('g').attr('class', 'content-wrapper').attr('transform', `translate(${Number(yAxis.node().getAttribute('data-axisWidth'))}, 0)`);
       contentWrapper.selectAll().data(data).join('rect').attr('opacity', 1).attr('x', 0).attr('y', d => y(d.name)).attr('width', d => x(d.value) - x(0)).attr('height', y.bandwidth()).attr('fill', d => {
         const color = (0, _colorUtils.getLabelColor)({
           chart: chart.config,

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

@@ -171,12 +171,12 @@ class LineGroup 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.4).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);
@@ -204,7 +204,10 @@ class LineGroup extends _chartComponent.default {
         }).curve(line_type === _constants.CHART_LINE_TYPES[1] ? d3.curveBumpX : d3.curveLinear);
         const group_name = item[0];
         const data = item[1];
-        contentWrapper.append('path').attr('fill', 'none').attr('stroke', this.colorMap[group_name]).attr('stroke-width', 2).attr('d', () => line(data));
+        contentWrapper.append('path').attr('fill', 'none').attr('stroke', () => {
+          const colorKey = group_name || group_name === 0 ? group_name : '';
+          return this.colorMap[colorKey];
+        }).attr('stroke-width', 2).attr('d', () => line(data));
         circleDatas.push({
           group_name,
           circleData
@@ -219,7 +222,10 @@ class LineGroup extends _chartComponent.default {
         } = _ref;
         circleData.forEach(item => {
           if (Object.keys(item).length > 0) {
-            contentWrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', this.colorMap[group_name]).attr('opacity', y_axis_show_value ? 1 : 0).attr('data-groupName', group_name).attr('data-text', item.value).attr('data-name', item.name).call(g => {
+            contentWrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', () => {
+              const colorKey = group_name || group_name === 0 ? group_name : '';
+              return this.colorMap[colorKey];
+            }).attr('opacity', y_axis_show_value ? 1 : 0).attr('data-groupName', group_name).attr('data-text', item.value).attr('data-name', item.name).call(g => {
               // circle label
               if (y_axis_show_value) {
                 const curCircleEl = g.node();
@@ -229,7 +235,7 @@ class LineGroup 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/line.js

@@ -157,12 +157,12 @@ class Line 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.4).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);
@@ -199,7 +199,7 @@ class Line 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/mirror.js

@@ -130,13 +130,13 @@ class Mirror extends _chartComponent.default {
       const scaleLinear1 = d3.scaleLinear().domain([maxDomain, 0]).range([scaleBand(scaleBandDomain[0]), scaleBand.bandwidth()]);
       const scaleLinear2 = d3.scaleLinear().domain([0, maxDomain]).range([scaleBand(scaleBandDomain[1]), scaleBand(scaleBandDomain[1]) + scaleBand.bandwidth()]);
       const scaleLinearWrapper = this.chart.append('g').attr('class', 'scale-linear-axis-wrapper');
-      scaleLinearWrapper.append('g').attr('class', 'scale-linear-1').attr('transform', is_transpose ? "translate(0, ".concat(chartHeight - insertPadding - bottomLegendSpace, ")") : "translate(".concat(insertPadding, ", 0)")).call(is_transpose ? d3.axisBottom(scaleLinear1).tickSizeInner(0).tickSizeOuter(0).ticks(5) : d3.axisLeft(scaleLinear1).tickSizeInner(0).tickSizeOuter(0).ticks(5)).call(g => {
+      scaleLinearWrapper.append('g').attr('class', 'scale-linear-1').attr('transform', is_transpose ? `translate(0, ${chartHeight - insertPadding - bottomLegendSpace})` : `translate(${insertPadding}, 0)`).call(is_transpose ? d3.axisBottom(scaleLinear1).tickSizeInner(0).tickSizeOuter(0).ticks(5) : d3.axisLeft(scaleLinear1).tickSizeInner(0).tickSizeOuter(0).ticks(5)).call(g => {
         g.select('.domain').remove();
         g.selectAll('text').attr('font-size', themeColors.fontSize).attr('fill', themeColors.textColor);
         g.selectAll('.tick line').attr('stroke', themeColors.gridColor);
         is_transpose ? g.selectAll('.tick line').attr('y2', -(chartHeight - insertPadding - insertPadding - bottomLegendSpace)) : g.selectAll('.tick line').attr('x2', chartWidth - insertPadding - insertPadding);
       });
-      scaleLinearWrapper.append('g').attr('class', 'scale-linear-2').attr('transform', is_transpose ? "translate(0, ".concat(chartHeight - insertPadding - bottomLegendSpace, ")") : "translate(".concat(insertPadding, ", 0)")).call(is_transpose ? d3.axisBottom(scaleLinear2).tickSizeInner(0).tickSizeOuter(0).ticks(5).tickFormat(t => (0, _dtableUtils.getNumberDisplayString)(t, columnData)) : d3.axisLeft(scaleLinear2).tickSizeInner(0).tickSizeOuter(0).ticks(5).tickFormat(t => (0, _dtableUtils.getNumberDisplayString)(t, columnData))).call(g => {
+      scaleLinearWrapper.append('g').attr('class', 'scale-linear-2').attr('transform', is_transpose ? `translate(0, ${chartHeight - insertPadding - bottomLegendSpace})` : `translate(${insertPadding}, 0)`).call(is_transpose ? d3.axisBottom(scaleLinear2).tickSizeInner(0).tickSizeOuter(0).ticks(5).tickFormat(t => (0, _dtableUtils.getNumberDisplayString)(t, columnData)) : d3.axisLeft(scaleLinear2).tickSizeInner(0).tickSizeOuter(0).ticks(5).tickFormat(t => (0, _dtableUtils.getNumberDisplayString)(t, columnData))).call(g => {
         g.select('.domain').remove();
         g.selectAll('text').attr('font-size', themeColors.fontSize).attr('fill', themeColors.textColor);
         g.selectAll('.tick line').attr('stroke', themeColors.gridColor);
@@ -145,12 +145,12 @@ class Mirror extends _chartComponent.default {
 
       // ScaleBand Center axis
       const scaleBandCenter = d3.scaleBand().domain(new Set(data.map(d => d.name))).range(is_transpose ? [insertPadding, chartHeight - insertPadding - bottomLegendSpace] : [insertPadding, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
-      this.chart.append('g').attr('class', 'scale-band-center-axis-wrapper').attr('transform', is_transpose ? "translate(".concat(scaleLinear1(0), ", 0)") : "translate(0, ".concat(scaleLinear1(0), ")")).call(is_transpose ? d3.axisRight(scaleBandCenter).tickSizeInner(4).tickSizeOuter(0).tickFormat(t => {
+      this.chart.append('g').attr('class', 'scale-band-center-axis-wrapper').attr('transform', is_transpose ? `translate(${scaleLinear1(0)}, 0)` : `translate(0, ${scaleLinear1(0)})`).call(is_transpose ? d3.axisRight(scaleBandCenter).tickSizeInner(4).tickSizeOuter(0).tickFormat(t => {
         const name = String(t);
-        return name.length > 5 ? "".concat(name.slice(0, 5), "...") : name;
+        return name.length > 5 ? `${name.slice(0, 5)}...` : name;
       }) : d3.axisBottom(scaleBandCenter).tickSizeInner(4).tickSizeOuter(0).tickFormat(t => {
         const name = String(t);
-        return name.length > 5 ? "".concat(name.slice(0, 5), "...") : name;
+        return name.length > 5 ? `${name.slice(0, 5)}...` : name;
       })).call(g => {
         g.select('.domain').remove();
         g.selectAll('.tick line').attr('stroke', themeColors.XAxisColor);

package/dist/view/wrapper/pie.js

@@ -96,13 +96,13 @@ class Pie extends _chartComponent.default {
         const top = height / 2 + insertPadding;
         const offsetX = (chartWidth - (insertPadding + rightLegendSpace) - insertPadding - width) / 2;
         const offsetY = (chartHeight - insertPadding - insertPadding - height) / 2;
-        d3.select(g.node().parentNode).attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")"));
+        d3.select(g.node().parentNode).attr('transform', `translate(${left + offsetX}, ${top + offsetY})`);
 
         // Draw label
         if (display_label) {
           const labelRadius = this.isInnerLabel ? arc.outerRadius()() * 0.7 : arc.outerRadius()() * 1.2;
           const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius);
-          this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
+          this.chart.append('g').attr('transform', `translate(${left + offsetX}, ${top + offsetY})`).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('transform', d => `translate(${arcLabel.centroid(d)})`).text(d => {
             const {
               value,
               percent
@@ -114,7 +114,7 @@ class Pie extends _chartComponent.default {
           if (!this.isInnerLabel) {
             const lineRadius = arc.outerRadius()() * 0.5;
             const arcLine = d3.arc().innerRadius(lineRadius).outerRadius(lineRadius);
-            this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).selectAll().data(arcs).join('line').attr('transform', d => "translate(".concat(arcLine.centroid(d), ")")).attr('x1', d => arcLine.centroid(d)[0]).attr('y1', d => arcLine.centroid(d)[1]).attr('x2', d => arcLine.centroid(d)[0] * 1.2).attr('y2', d => arcLine.centroid(d)[1] * 1.2).attr('stroke', d => color(d.data.name)).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size));
+            this.chart.append('g').attr('transform', `translate(${left + offsetX}, ${top + offsetY})`).selectAll().data(arcs).join('line').attr('transform', d => `translate(${arcLine.centroid(d)})`).attr('x1', d => arcLine.centroid(d)[0]).attr('y1', d => arcLine.centroid(d)[1]).attr('x2', d => arcLine.centroid(d)[0] * 1.2).attr('y2', d => arcLine.centroid(d)[1] * 1.2).attr('stroke', d => color(d.data.name)).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size));
           }
         }
       }).on('click', (event, rowData) => {
@@ -207,7 +207,7 @@ class Pie extends _chartComponent.default {
         case _constants.CHART_LABEL_FORMATS[1]:
           return value;
         case _constants.CHART_LABEL_FORMATS[2]:
-          return "".concat(value, " (").concat(percent, ")");
+          return `${value} (${percent})`;
         default:
           return percent;
       }

package/dist/view/wrapper/ring.js

@@ -97,7 +97,7 @@ class Ring extends _chartComponent.default {
         const top = height / 2 + insertPadding;
         const offsetX = (chartWidth - (insertPadding + rightLegendSpace) - insertPadding - width) / 2;
         const offsetY = (chartHeight - insertPadding - insertPadding - height) / 2;
-        d3.select(g.node().parentNode).attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")"));
+        d3.select(g.node().parentNode).attr('transform', `translate(${left + offsetX}, ${top + offsetY})`);
 
         // Draw total
         this.setAnnotationTotal(g.node().parentNode, {
@@ -108,7 +108,7 @@ class Ring extends _chartComponent.default {
         if (display_label) {
           const labelRadius = this.isInnerLabel ? arc.outerRadius()() * 1.2 : arc.outerRadius()() * 1.65;
           const arcLabel = d3.arc().innerRadius(labelRadius).outerRadius(labelRadius);
-          this.chart.append('g').attr('class', 'label-wrapper').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('class', 'label').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('transform', d => "translate(".concat(arcLabel.centroid(d), ")")).text(d => {
+          this.chart.append('g').attr('class', 'label-wrapper').attr('transform', `translate(${left + offsetX}, ${top + offsetY})`).attr('text-anchor', 'middle').selectAll().data(arcs).join('text').attr('class', 'label').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('transform', d => `translate(${arcLabel.centroid(d)})`).text(d => {
             const {
               value,
               percent
@@ -120,7 +120,7 @@ class Ring extends _chartComponent.default {
           if (!this.isInnerLabel) {
             const lineRadius = arc.outerRadius()() * 0.7;
             const arcLine = d3.arc().innerRadius(lineRadius).outerRadius(lineRadius);
-            this.chart.append('g').attr('transform', "translate(".concat(left + offsetX, ", ").concat(top + offsetY, ")")).selectAll().data(arcs).join('line').attr('transform', d => "translate(".concat(arcLine.centroid(d), ")")).attr('x1', d => arcLine.centroid(d)[0]).attr('y1', d => arcLine.centroid(d)[1]).attr('x2', d => arcLine.centroid(d)[0] * 1.2).attr('y2', d => arcLine.centroid(d)[1] * 1.2).attr('stroke', d => color(d.data.name)).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size));
+            this.chart.append('g').attr('transform', `translate(${left + offsetX}, ${top + offsetY})`).selectAll().data(arcs).join('line').attr('transform', d => `translate(${arcLine.centroid(d)})`).attr('x1', d => arcLine.centroid(d)[0]).attr('y1', d => arcLine.centroid(d)[1]).attr('x2', d => arcLine.centroid(d)[0] * 1.2).attr('y2', d => arcLine.centroid(d)[1] * 1.2).attr('stroke', d => color(d.data.name)).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size));
           }
         }
       }).on('click', (event, rowData) => {
@@ -221,7 +221,7 @@ class Ring extends _chartComponent.default {
         case _constants.CHART_LABEL_FORMATS[1]:
           return value;
         case _constants.CHART_LABEL_FORMATS[2]:
-          return "".concat(value, " (").concat(percent, ")");
+          return `${value} (${percent})`;
         default:
           return percent;
       }
@@ -262,7 +262,7 @@ class Ring extends _chartComponent.default {
         const {
           width
         } = (_g$node = g.node()) === null || _g$node === void 0 ? void 0 : _g$node.getBoundingClientRect();
-        g.attr('transform', "translate(".concat(-(width / 2), ", ").concat(-20, ")"));
+        g.attr('transform', `translate(${-(width / 2)}, ${-20})`);
       });
 
       // Text this.getLabel(value, percent)
@@ -271,7 +271,7 @@ class Ring extends _chartComponent.default {
         const {
           width
         } = (_g$node2 = g.node()) === null || _g$node2 === void 0 ? void 0 : _g$node2.getBoundingClientRect();
-        g.attr('transform', "translate(".concat(-(width / 2), ", ", 10, ")"));
+        g.attr('transform', `translate(${-(width / 2)}, ${10})`);
       });
     };
     this.chart = null;

package/dist/view/wrapper/scatter.js

@@ -212,12 +212,12 @@ class Scatter extends _chartComponent.default {
 
       // Y axis
       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 - bottomLegendSpace, 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 => 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));
 
       // X axis
       const niceEnd = d3.nice(0, d3.max(data, d => d.name), 5)[1];
       const x = d3.scaleLinear().domain([0, niceEnd]).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]);
-      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', "translate(0, ".concat(chartHeight - insertPadding - bottomLegendSpace, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5).ticks(5).tickFormat(d => d)).call(g => {
+      this.chart.append('g').attr('class', 'x-axis-wrapper').attr('transform', `translate(0, ${chartHeight - insertPadding - bottomLegendSpace})`).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5).ticks(5).tickFormat(d => d)).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/table/index.js

@@ -54,7 +54,7 @@ class Table extends _react.PureComponent {
       result
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "sea-chart-table-wrapper sea-chart-".concat(result.dimensions, "-table-wrapper")
+      className: `sea-chart-table-wrapper sea-chart-${result.dimensions}-table-wrapper`
     }, this.renderContainer());
   }
 }