fixing horizontal bar chart labels

elastic · Feb 15, 2017 · 3d437e5 · 3d437e5
1 parent 7e74262
commit 3d437e5
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js b/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js
@@ -55,7 +55,7 @@ export default function PointSeriesVisType(Private) {
             labels: {
               show: true,
               rotate: 75,
-              filter: false,
+              filter: true,
               truncate: 100
             },
             title: {}

diff --git a/src/ui/public/vislib/lib/axis/axis.js b/src/ui/public/vislib/lib/axis/axis.js
@@ -169,6 +169,7 @@ export default function AxisFactory(Private) {
     }
 
     draw() {
+      let svg;
       const self = this;
       const config = this.axisConfig;
       const style = config.get('style');
@@ -190,7 +191,7 @@ export default function AxisFactory(Private) {
           const axis = self.getAxis(length);
 
           if (config.get('show')) {
-            const svg = div.append('svg')
+            svg = div.append('svg')
             .attr('width', width)
             .attr('height', height);
 
@@ -211,13 +212,14 @@ export default function AxisFactory(Private) {
               .style('stroke-opacity', style.opacity);
             }
             if (self.axisLabels) self.axisLabels.render(svg);
-            svg.call(self.adjustSize());
           }
         });
 
         if (self.axisTitle && ['right', 'bottom'].includes(config.get('position'))) {
           self.axisTitle.render(selection);
         }
+
+        svg.call(self.adjustSize());
       };
     }
   }

diff --git a/src/ui/public/vislib/lib/axis/axis_labels.js b/src/ui/public/vislib/lib/axis/axis_labels.js
@@ -19,29 +19,37 @@ export default function AxisLabelsFactory(Private) {
 
         if (config.get('labels.rotate')) {
           text
-          .style('text-anchor', function () {
-            return config.get('labels.rotateAnchor') === 'center' ? 'center' : 'end';
-          })
-          .attr('dy', function () {
-            if (config.isHorizontal()) {
-              if (config.get('position') === 'top') return '-0.9em';
-              else return '0.3em';
+          .style('text-anchor', function (d, i) {
+            const currentValue = $(this).css('text-anchor');
+            const rotateDeg = config.get('labels.rotate');
+            if (!rotateDeg) return currentValue;
+            else {
+              const position = config.get('position');
+              switch (position) {
+                case 'top': return 'end';
+                case 'bottom': return 'end';
+                default:
+                  if (rotateDeg === 90 || rotateDeg === -90) return 'middle';
+                  return currentValue;
+              }
             }
-            return '0';
           })
-          .attr('dx', function () {
-            return config.isHorizontal() ? '-0.9em' : '0';
+          .attr('dy', function () {
+            return config.isHorizontal() ? '0.3em' : '0';
           })
           .attr('transform', function rotate(d, j) {
-            let rotateDeg = config.get('labels.rotate');
-            if (config.get('labels.rotateAnchor') === 'center') {
+            const position = config.get('position');
+            const rotateDeg = position === 'top' ? config.get('labels.rotate') : -config.get('labels.rotate');
+
+            if ($(this).css('text-anchor') === 'middle') {
               const coord = text[0][j].getBBox();
               const transX = ((coord.x) + (coord.width / 2));
               const transY = ((coord.y) + (coord.height / 2));
               return `rotate(${rotateDeg}, ${transX}, ${transY})`;
             } else {
-              rotateDeg = config.get('position') === 'top' ? rotateDeg : -rotateDeg;
-              return `rotate(${rotateDeg})`;
+              const transX = this.attributes.x.nodeValue;
+              const transY = this.attributes.y.nodeValue;
+              return `rotate(${rotateDeg}, ${transX}, ${transY})`;
             }
           });
         }