sea-chart 2.0.15 → 2.0.17

package/dist/view/wrapper/area.js

@@ -0,0 +1,400 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _lodashEs = require("lodash-es");
+var d3 = _interopRequireWildcard(require("d3"));
+var _constants = require("../../constants");
+var _intl = _interopRequireDefault(require("../../intl"));
+var _utils = require("../../utils");
+var _tooltip = _interopRequireDefault(require("../../components/tooltip"));
+var _chartComponent = _interopRequireDefault(require("./chart-component"));
+class Area extends _chartComponent.default {
+  constructor(props) {
+    super(props);
+    this.handleResize = () => {
+      this.chart.node() && this.chart.node().remove();
+      this.createChart();
+      this.drawChart();
+    };
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        y_axis_show_label,
+        x_axis_show_label,
+        y_axis_show_value
+      } = chart.config;
+      const initConfig = {
+        insertPadding: 30,
+        marginLeft: y_axis_show_label ? 20 : 0,
+        marginBottom: x_axis_show_label ? 20 : 0,
+        marginTop: y_axis_show_value ? 15 : 0
+      };
+      this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
+    };
+    this.drawChart = () => {
+      let {
+        result: data,
+        customRender
+      } = this.props;
+      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
+      if (!Array.isArray(data)) return;
+      this.draw(data);
+      (0, _utils.isFunction)(customRender) && customRender(this.chart);
+      this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
+    };
+    this.draw = data => {
+      const {
+        chart,
+        globalTheme,
+        tables
+      } = this.props;
+      const theme = _constants.CHART_THEME_COLOR[globalTheme];
+      const {
+        display_goal_line,
+        goal_label,
+        goal_value
+      } = chart.style_config || {};
+      const {
+        y_axis_summary_type,
+        y_axis_column_key,
+        y_axis_summary_column_key,
+        line_type,
+        y_axis_show_value,
+        label_font_size,
+        table_id,
+        y_axis_auto_range,
+        y_axis_min,
+        y_axis_max
+      } = chart.config;
+      const {
+        width: chartWidth,
+        height: chartHeight,
+        insertPadding,
+        marginTop
+      } = this.chartBoundingClientRect;
+      const tooltipTitle = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
+
+      // 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('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).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.ticksWrapper = this.chart.append('g').attr('transform', "translate(0, ".concat(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);
+        g.selectAll('text').attr('font-size', theme.fontSize);
+        g.selectAll('text').attr('fill', theme.textColor);
+        this.checkTickOverlap(g);
+      });
+      const rectsWrapper = this.chart.append('g').attr('class', "rects-wrapper-".concat(chart === null || chart === void 0 ? void 0 : chart.id));
+
+      // Line
+      const circleData = xDomain.map(() => ({}));
+      const line = d3.line().x((d, index) => {
+        const xVal = x(d.name) + x.bandwidth() / 2;
+        circleData[index]['x'] = xVal;
+        circleData[index]['name'] = d.name;
+        return xVal;
+      }).y((d, index) => {
+        const yVal = y(d.value);
+        circleData[index]['y'] = yVal;
+        circleData[index]['value'] = d.value;
+        return yVal;
+      }).curve(line_type === _constants.CHART_LINE_TYPES[1] ? d3.curveBumpX : d3.curveLinear);
+      this.Line = rectsWrapper.append('path').attr('fill', 'none').attr('stroke', this.getAreaColor()).attr('stroke-width', 2).attr('d', () => line(data));
+
+      // Area
+      const area = d3.area().x(d => {
+        const xVal = x(d.name) + x.bandwidth() / 2;
+        return xVal;
+      }).y0(y(0)).y1(d => y(d.value)).curve(line_type === _constants.CHART_LINE_TYPES[1] ? d3.curveBumpX : d3.curveLinear);
+      this.Area = rectsWrapper.append('path').attr('fill', this.getAreaColor()).attr('d', () => area(data)).attr('opacity', '0.3');
+
+      // circle
+      circleData.forEach(item => {
+        rectsWrapper.append('circle').attr('cx', item.x).attr('cy', item.y).attr('r', 3).attr('fill', this.getAreaColor()).attr('opacity', y_axis_show_value ? 1 : 0).attr('data-text', item.value).attr('data-name', item.name).call(g => {
+          // circle label
+          if (y_axis_show_value) {
+            const curCircleEl = g.node();
+            rectsWrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _utils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+              const {
+                width
+              } = 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, ")"));
+            });
+          }
+        }).on('click', (event, data) => {
+          this.props.toggleRecords(data);
+        });
+      });
+      this.chart.on('mouseover', event => {
+        this.updateCircleAndTickStyle({
+          event,
+          state: 'zoomIn',
+          circleData,
+          rectsWrapper,
+          eventState: 'over',
+          tooltipTitle
+        });
+      }).on('mousemove', event => {
+        this.updateCircleAndTickStyle({
+          event,
+          state: 'zoomIn',
+          circleData,
+          rectsWrapper,
+          eventState: 'move',
+          tooltipTitle
+        });
+      }).on('mouseleave', event => {
+        this.updateCircleAndTickStyle({
+          event,
+          state: 'zoomOut',
+          circleData,
+          rectsWrapper,
+          eventState: 'leave',
+          tooltipTitle
+        });
+      });
+      if (display_goal_line && goal_label && goal_value) {
+        this.setDispalyGoalLine(goal_label, goal_value, insertPadding, y);
+      }
+    };
+    this.updateCircleAndTickStyle = _ref => {
+      var _rectsWrapper$selectA, _this$ticksWrapper$se;
+      let {
+        event,
+        state,
+        circleData,
+        rectsWrapper,
+        eventState,
+        tooltipTitle
+      } = _ref;
+      const {
+        y_axis_show_value
+      } = this.props.chart.config;
+      const {
+        height: chartHeight,
+        insertPadding,
+        marginTop
+      } = this.chartBoundingClientRect;
+      const {
+        offsetX
+      } = event;
+      const minDistanceItem = this.getMinDistanceItem(offsetX, circleData);
+      const circleList = (_rectsWrapper$selectA = rectsWrapper.selectAll('circle')) === null || _rectsWrapper$selectA === void 0 ? void 0 : _rectsWrapper$selectA.nodes();
+      if (circleList.length !== 0) {
+        if (state === 'zoomIn') {
+          circleList.forEach(circle => {
+            const name = circle.getAttribute('data-name');
+            if (name === minDistanceItem.name) {
+              d3.select(circle).attr('opacity', 1);
+              d3.select(circle).attr('r', 5);
+            } else {
+              d3.select(circle).attr('opacity', 0.3);
+              d3.select(circle).attr('r', 3);
+            }
+          });
+          this.Area.attr('opacity', 0.1);
+          this.Line.attr('opacity', 0.3);
+        } else {
+          circleList.forEach(circle => {
+            if (!y_axis_show_value) {
+              d3.select(circle).attr('opacity', 0);
+            } else {
+              d3.select(circle).attr('opacity', 1);
+            }
+            d3.select(circle).attr('r', 3);
+          });
+          this.Area.attr('opacity', 0.3);
+          this.Line.attr('opacity', 1);
+        }
+      }
+      const ticks = (_this$ticksWrapper$se = this.ticksWrapper.selectAll('.tick line')) === null || _this$ticksWrapper$se === void 0 ? void 0 : _this$ticksWrapper$se.nodes();
+      if (ticks.length !== 0) {
+        if (state === 'zoomIn') {
+          ticks.forEach(tick => {
+            const name = tick.getAttribute('data-name');
+            if (name === minDistanceItem.name) {
+              d3.select(tick).attr('y2', -(chartHeight - insertPadding * 2 - marginTop));
+            } else {
+              d3.select(tick).attr('y2', 0);
+            }
+          });
+        } else {
+          ticks.forEach(tick => {
+            d3.select(tick).attr('y2', 0);
+          });
+        }
+      }
+
+      // tooltip
+      if (eventState === 'over') {
+        this.showTooltip(event, minDistanceItem, tooltipTitle);
+      }
+      if (eventState === 'move') {
+        this.moveTooltip(event, minDistanceItem, tooltipTitle);
+      }
+      if (eventState === 'leave') {
+        this.hiddenTooltip();
+      }
+    };
+    this.showTooltip = (event, data, title) => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const {
+        chart,
+        summaryColumn
+      } = this.props;
+      const {
+        y_axis_summary_method
+      } = chart.config;
+      const newTooltipData = {
+        title: title,
+        items: [{
+          color: this.getAreaColor(),
+          name: data.name,
+          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, data.value, y_axis_summary_method)
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.moveTooltip = (event, data, title) => {
+      const {
+        offsetX,
+        offsetY
+      } = event;
+      const {
+        chart,
+        summaryColumn
+      } = this.props;
+      const {
+        y_axis_summary_method
+      } = chart.config;
+      const newTooltipData = {
+        title: title,
+        items: [{
+          color: this.getAreaColor(),
+          name: data.name,
+          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, data.value, y_axis_summary_method)
+        }]
+      };
+      this.setState({
+        tooltipData: newTooltipData
+      });
+      this.setState({
+        toolTipPosition: {
+          offsetX,
+          offsetY
+        }
+      });
+    };
+    this.hiddenTooltip = event => {
+      this.setState({
+        toolTipPosition: null
+      });
+    };
+    this.getAreaColor = () => {
+      const {
+        chart,
+        chartColorTheme
+      } = this.props;
+      const {
+        y_axis_label_color,
+        color_option
+      } = chart.config;
+      let chartBarColor = _constants.CHART_STYLE_COLORS[0];
+      if (chartColorTheme) {
+        chartBarColor = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
+      }
+      if (color_option === _constants.TYPE_COLOR_USING.USE_SPECIFIC_COLORS && y_axis_label_color) {
+        chartBarColor = y_axis_label_color;
+      }
+      return chartBarColor;
+    };
+    this.chart = null;
+    this.state = {
+      tooltipData: null,
+      toolTipPosition: null
+    };
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+    this.debouncedHandleResize = (0, _lodashEs.debounce)(this.handleResize, 300);
+    window.addEventListener('resize', this.debouncedHandleResize);
+    super.componentDidMount();
+  }
+  componentDidUpdate(prevProps) {
+    super.componentDidUpdate(prevProps);
+    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.chart.node() && this.chart.node().remove();
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.chart.node() && this.chart.node().remove();
+    window.removeEventListener('resize', this.debouncedHandleResize);
+    super.componentWillUnmount();
+  }
+  render() {
+    const {
+      chart
+    } = this.props;
+    const {
+      tooltipData,
+      toolTipPosition
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      ref: ref => this.container = ref,
+      className: (0, _classnames.default)('sea-chart-container', {
+        'show-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      })
+    }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      tooltipData: tooltipData,
+      toolTipPosition: toolTipPosition,
+      chart: this.chart
+    }));
+  }
+}
+Area.propTypes = {
+  canvasStyle: _propTypes.default.object,
+  chart: _propTypes.default.object,
+  groupbyColumn: _propTypes.default.object,
+  columnGroupbyColumn: _propTypes.default.object,
+  summaryColumn: _propTypes.default.object,
+  result: _propTypes.default.array,
+  tables: _propTypes.default.array,
+  globalTheme: _propTypes.default.string,
+  chartColorTheme: _propTypes.default.string,
+  toggleRecords: _propTypes.default.func,
+  customRender: _propTypes.default.func
+};
+var _default = exports.default = Area;

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

@@ -67,9 +67,9 @@ class BarCompare extends _chartComponent.default {
 
       // Y axis
       this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).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.1).paddingOuter(0.1);
+      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()]);
+      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('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
@@ -206,7 +206,7 @@ class BarCompare extends _chartComponent.default {
         insertPadding
       } = this.chartBoundingClientRect;
       const circleData = increaseData.map(() => ({}));
-      const lineX = d3.scaleBand().domain(increaseData.map(d => d.name)).range([insertPadding, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
+      const lineX = d3.scaleBand().domain(increaseData.map(d => d.name)).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       const lineY = d3.scaleLinear().domain(y_axis_auto_range ? [d3.min(increaseData, d => d.value), d3.max(increaseData, d => d.value)] : [y_axis_min, y_axis_max]).range([chartHeight - insertPadding, insertPadding]);
       const line = d3.line().x((d, index) => {
         const x = lineX(d.name) + lineX.bandwidth() / 2;
@@ -230,7 +230,7 @@ class BarCompare extends _chartComponent.default {
           // circle label
           if (display_increase_percentage) {
             const curCircleEl = g.node();
-            wrapper.append('text').attr('fill', theme.labelColor).attr('font-size', _chartUtils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
+            wrapper.append('text').attr('stroke', '#fff').attr('stroke-width', 1).attr('paint-order', 'stroke').attr('fill', theme.labelColor).attr('font-size', _chartUtils.BaseUtils.getLabelFontSize(label_font_size)).text(curCircleEl.getAttribute('data-text')).call(g => {
               const {
                 width
               } = g.node().getBoundingClientRect();

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

@@ -147,8 +147,8 @@ class BarCustom extends _chartComponent.default {
 
       // Y axis
       this.chart.append('g').attr('transform', "translate(".concat(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.1).paddingOuter(0.1);
-      const x = d3.scaleBand().domain(new Set(data.map(d => d.y_axis_type))).range([0, fx.bandwidth()]);
+      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('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {

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

@@ -13,7 +13,6 @@ var _lodashEs = require("lodash-es");
 var d3 = _interopRequireWildcard(require("d3"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _intl = _interopRequireDefault(require("../../intl"));
-var _columnUtils = require("../../utils/column-utils");
 var _constants = require("../../constants");
 var _utils = require("../../utils");
 var _colorRules = require("../../constants/color-rules");
@@ -34,16 +33,14 @@ class BarGroup extends _chartComponent.default {
       const {
         y_axis_show_label,
         x_axis_show_label,
-        y_axis_show_value,
-        display_each_block_data,
-        type
+        y_axis_show_value
       } = chart.config;
       const initConfig = {
         insertPadding: 30,
         borderRadius: 0.2,
         marginLeft: y_axis_show_label ? 20 : 0,
         marginBottom: x_axis_show_label ? 20 : 0,
-        marginTop: y_axis_show_value || type === _constants.CHART_TYPE.BAR_STACK && display_each_block_data ? 15 : 0
+        marginTop: y_axis_show_value ? 15 : 0
       };
       this.initChart(this.container, chart === null || chart === void 0 ? void 0 : chart.id, initConfig);
     };
@@ -56,16 +53,6 @@ class BarGroup extends _chartComponent.default {
       } = this.props;
       data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
       if (!Array.isArray(data)) return;
-      const {
-        chart
-      } = this.props;
-      const {
-        sort_type,
-        type
-      } = chart.config;
-      if (type === _constants.CHART_TYPE.BAR_STACK && sort_type) {
-        data = (0, _columnUtils.sortDataByGroupSum)(data, sort_type);
-      }
       this.draw(data);
       this.renderAxisLabel(this.props.chart, this.props.tables, this.container);
       (0, _utils.isFunction)(customRender) && customRender(this.chart);
@@ -89,7 +76,6 @@ class BarGroup extends _chartComponent.default {
         marginTop
       } = this.chartBoundingClientRect;
       const {
-        type,
         y_axis_show_value,
         label_font_size,
         table_id,
@@ -97,8 +83,7 @@ class BarGroup extends _chartComponent.default {
         color_theme,
         y_axis_max,
         y_axis_min,
-        y_axis_auto_range,
-        display_each_block_data
+        y_axis_auto_range
       } = chart.config;
       const theme = _constants.CHART_THEME_COLOR[globalTheme];
       const column_groupby_column = this.getColumn(tables, table_id, column_groupby_column_key);
@@ -109,8 +94,8 @@ class BarGroup extends _chartComponent.default {
 
       // Y axis
       this.chart.append('g').attr('transform', "translate(".concat(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(data.map(d => d.name))).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.1).paddingOuter(0.1);
-      const x = d3.scaleBand().domain(new Set(data.map(d => d.group_name))).range([0, fx.bandwidth()]);
+      const fx = d3.scaleBand().domain(new Set(data.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.group_name))).range([0, fx.bandwidth()]).paddingInner(0).paddingOuter(0);
 
       // X axis
       this.chart.append('g').attr('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(fx).tickSizeOuter(0).tickSizeInner(5)).call(g => {
@@ -143,33 +128,6 @@ class BarGroup extends _chartComponent.default {
           });
 
           // Add label
-          if (type === _constants.CHART_TYPE.BAR_STACK) {
-            if (y_axis_show_value) {
-              this.addLabelToRectCenter({
-                chartType: _constants.CHART_TYPE.BAR_STACK,
-                container: parentNode,
-                x: Number(rect.getAttribute('x')),
-                y: Number(rect.getAttribute('y')),
-                xWidth: x.bandwidth(),
-                yheight: Number(rect.getAttribute('height')),
-                theme,
-                label_font_size,
-                text: rect.getAttribute('data-value')
-              });
-            }
-            if (display_each_block_data) {
-              this.addLabelToRectTop({
-                container: parentNode,
-                xWidth: Number(x.bandwidth()),
-                x: Number(rect.getAttribute('x')),
-                y: Number(rect.getAttribute('y')),
-                theme,
-                label_font_size,
-                text: rect.dataset.value
-              });
-            }
-            return;
-          }
           if (y_axis_show_value) {
             this.addLabelToRectTop({
               container: parentNode,

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

@@ -111,7 +111,7 @@ class BarStack extends _chartComponent.default {
 
       // Y axis
       this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ",0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).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.1).paddingOuter(0.1);
+      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('transform', "translate(0,".concat(chartHeight - insertPadding, ")")).call(d3.axisBottom(x).tickSizeOuter(0).tickSizeInner(5)).call(g => {

package/dist/view/wrapper/bar.js

@@ -155,7 +155,7 @@ class Bar extends _chartComponent.default {
       } = this.chartBoundingClientRect;
       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]);
       this.chart.append('g').attr('transform', "translate(".concat(insertPadding, ", 0)")).call(d3.axisLeft(y).tickSizeInner(0).ticks(5).tickFormat(d => d)).call(g => this.drawYaxis(g, theme));
-      const x = d3.scaleBand().domain(data.map(item => item.name)).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.4).paddingOuter(0.1);
+      const x = d3.scaleBand().domain(data.map(item => item.name)).range([insertPadding + this.horizontalOverflowOffset, chartWidth - insertPadding]).paddingInner(0.5).paddingOuter(0.1);
       this.chart.append('g').attr('transform', "translate(0, ".concat(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);