sea-chart 2.0.11 → 2.0.12

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

@@ -77,6 +77,7 @@ class BarCompare extends _chartComponent.default {
         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);
       });
 
       // Rect group

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

@@ -156,6 +156,7 @@ class BarCustom extends _chartComponent.default {
         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);
       });
 
       // Rect group

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

@@ -109,7 +109,7 @@ 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);
+      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()]);
 
       // X axis
@@ -118,6 +118,7 @@ class BarGroup extends _chartComponent.default {
         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);
       });
 
       // Rect group

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

@@ -119,6 +119,7 @@ class BarStack extends _chartComponent.default {
         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);
       });
 
       // Rect group

package/dist/view/wrapper/bar.js

@@ -161,6 +161,7 @@ class Bar extends _chartComponent.default {
         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));
       rectsWrapper.selectAll().data(data).join('rect').attr('fill', d => d3.color(this.getFillColor(d))).attr('data-x', d => x(d.name)).attr('data-y', d => y(d.value)).attr('data-width', x.bandwidth()).attr('data-value', d => d.value).attr('data-groupName', d => d.name).attr('data-slugid', d => d.slugId).attr('x', d => x(d.name)).attr('y', d => y(d.value)).attr('width', x.bandwidth()).attr('height', d => y(0) - y(d.value)).call(g => {

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

@@ -740,25 +740,26 @@ class ChartComponent extends _react.Component {
         } = this.getLegendBoundary(legendPosition);
         legendItems.forEach((item, index) => {
           let translateX = start;
-          const lastItem = legendItems[index - 1];
+          const prevItem = legendItems[index - 1];
           if (index > 0) {
             const {
               width
-            } = lastItem.getBoundingClientRect();
-            const prevTranslateX = Number(lastItem.getAttribute('data-translateX'));
+            } = prevItem.getBoundingClientRect();
+            const prevTranslateX = Number(prevItem.getAttribute('data-translateX'));
             translateX = prevTranslateX + width + legendItemMargin;
           }
+          d3.select(item).attr('transform', "translate(".concat(translateX, ",0)")).attr('data-translateX', translateX);
 
           // legend items add offset 
           if (legendPosition === 'top-right') {
             d3.select(item).attr('opacity', 0);
+            // Execute only once
             if (index === legendItems.length - 1) {
               queueMicrotask(() => {
                 this.setLegendItemOffset(legendItems, end);
               });
             }
           }
-          d3.select(item).attr('transform', "translate(".concat(translateX, ",0)")).attr('data-translateX', translateX);
         });
       });
     };
@@ -1202,6 +1203,66 @@ class ChartComponent extends _react.Component {
         this.horizontalOverflowOffset = offset;
       }
     };
+    this.checkTickOverlap = g => {
+      const allTicks = g.selectAll('.tick').nodes();
+      // Hide overlapping ticks
+      for (let i = 0; i < allTicks.length; i++) {
+        const curText = d3.select(allTicks[i]).select('text').node();
+        const {
+          right: curRight
+        } = curText.getBoundingClientRect();
+        for (let j = i + 1; j < allTicks.length; j++) {
+          const nextText = d3.select(allTicks[j]).select('text').node();
+          if (curText && nextText) {
+            const {
+              left: nextLeft
+            } = nextText.getBoundingClientRect();
+            if (curRight >= nextLeft) {
+              i = j;
+              d3.select(nextText.parentNode).attr('opacity', 0);
+            }
+          }
+        }
+      }
+      const {
+        width: maxWidth
+      } = g.node().getBoundingClientRect();
+      let allWidth = 0;
+      // Can't fit tilted text
+      for (let tick of allTicks) {
+        const {
+          width
+        } = tick.getBoundingClientRect();
+        allWidth = allWidth + width;
+        if (allWidth > maxWidth) break;
+      }
+      if (allWidth > maxWidth) {
+        allTicks.forEach(tick => {
+          const opacityVal = tick.getAttribute('opacity');
+          if (Number(opacityVal) !== 0) {
+            // roate 
+            d3.select(tick).select('text').attr('transform', 'rotate(45)').style('text-anchor', 'start').attr('dy', '0.4em').attr('dx', '0.4em');
+          }
+        });
+      }
+
+      // Text overflow
+      const {
+        height
+      } = g.node().getBoundingClientRect();
+      const {
+        insertPadding
+      } = this.chartBoundingClientRect;
+      if (height > insertPadding) {
+        const viewBox = this.chart.node().getAttribute('viewBox').split(',');
+        const viewHeight = viewBox[viewBox.length - 1];
+        const newViewHeight = Number(viewHeight) + (height - insertPadding);
+        viewBox[viewBox.length - 1] = "".concat(newViewHeight);
+        queueMicrotask(() => {
+          this.chart.attr('viewBox', viewBox.join(','));
+        });
+      }
+    };
     this.initLabelStroke(props === null || props === void 0 ? void 0 : props.globalTheme);
     this.chartBoundingClientRect = {};
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "2.0.11",
+  "version": "2.0.12",
   "main": "./dist/index.js",
   "dependencies": {
     "@dnd-kit/core": "^6.1.0",