notification in case labels were hidden

src/ui/public/vislib/lib/alerts.js

@@ -14,82 +14,57 @@ export default function AlertsFactory(Private) {
     constructor(vis, alertDefs) {
       this.vis = vis;
       this.data = vis.data;
-      this.binder = new Binder();
-      this.alertDefs = alertDefs || [];
 
-      this.binder.jqOn(vis.el, 'mouseenter', '.vis-alerts-tray', function () {
-        const $tray = $(this);
-        hide();
-        $(vis.el).on('mousemove', checkForExit);
-
-        function hide() {
-          $tray.css({
-            'pointer-events': 'none',
-            opacity: 0.3
-          });
-        }
-
-        function show() {
-          $(vis.el).off('mousemove', checkForExit);
-          $tray.css({
-            'pointer-events': 'auto',
-            opacity: 1
-          });
-        }
-
-        function checkForExit(event) {
-          const pos = $tray.offset();
-          if (pos.top > event.clientY || pos.left > event.clientX) return show();
-
-          const bottom = pos.top + $tray.height();
-          if (event.clientY > bottom) return show();
-
-          const right = pos.left + $tray.width();
-          if (event.clientX > right) return show();
-        }
-      });
+      this.alerts = _(alertDefs)
+        .map(alertDef => {
+          if (!alertDef) return;
+          if (alertDef.test && !alertDef.test(vis, this.data)) return;
+          return this._addAlert(alertDef);
+        })
+        .compact();
     }
 
-    /**
-     * Renders chart titles
-     *
-     * @method render
-     * @returns {D3.Selection|D3.Transition.Transition} DOM element with chart titles
-     */
+    _addAlert(alertDef) {
+      const type = alertDef.type || 'info';
+      const icon = alertDef.icon || type;
+      const msg = alertDef.msg;
+      // alert container
+      const $icon = $('<i>').addClass('vis-alerts-icon fa fa-' + icon);
+      const $text = $('<p>').addClass('vis-alerts-text').text(msg);
+      const $closeIcon =  $('<i>').addClass('fa fa-close');
+      const $closeDiv = $('<div>').addClass('vis-alerts-close').append($closeIcon);
+
+      const $alert = $('<div>').addClass('vis-alert vis-alert-' + type).append([$icon, $text, $closeDiv]);
+      $closeDiv.on('click', e => {
+        $alert.remove();
+      });
+
+      return $alert;
+    }
+
+    // renders initial alerts
     render() {
+      const alerts = this.alerts;
       const vis = this.vis;
-      const data = this.data;
-
-      const alerts = _(this.alertDefs)
-      .map(function (alertDef) {
-        if (!alertDef) return;
-        if (alertDef.test && !alertDef.test(vis, data)) return;
-
-        const type = alertDef.type || 'info';
-        const icon = alertDef.icon || type;
-        const msg = alertDef.msg;
-
-        // alert container
-        const $icon = $('<i>').addClass('vis-alerts-icon fa fa-' + icon);
-        const $text = $('<p>').addClass('vis-alerts-text').text(msg);
-
-        return $('<div>').addClass('vis-alert vis-alert-' + type).append([$icon, $text]);
-      })
-      .compact();
 
+      $(vis.el).find('.vis-alerts').append($('<div>').addClass('vis-alerts-tray'));
       if (!alerts.size()) return;
+      $(vis.el).find('.vis-alerts-tray').append(alerts.value());
+    }
 
-      $(vis.el).find('.vis-alerts').append(
-        $('<div>').addClass('vis-alerts-tray').append(alerts.value())
+    // shows new alert
+    show(msg, type) {
+      const vis = this.vis;
+      $(vis.el).find('.vis-alerts-tray').append(
+        this._addAlert({
+          msg: msg,
+          type: type
+        })
       );
     }
 
-    /**
-     * Tear down the Alerts
-     * @return {undefined}
-     */
     destroy() {
-      this.binder.destroy();
+      $(this.vis.el).find('.vis-alerts').remove();
     }
   }
 

src/ui/public/vislib/styles/_alerts.less

@@ -30,6 +30,10 @@
     padding: 0;
   }
 
+  .vis-alerts-close {
+    cursor: pointer;
+  }
+
   .vis-alert {
     margin: 0 10px 10px;
     padding: 5px 10px 5px 5px;

src/ui/public/vislib/visualizations/point_series/heatmap_chart.js

@@ -207,6 +207,7 @@ export default function HeatmapChartFactory(Private) {
             Math.abs(squareHeight / Math.cos(rotateRad))
         ) - cellPadding;
 
+        let hiddenLabels = false;
         squares.append('text')
           .text(d => zAxisFormatter(d.y))
           .style('display', function (d) {
@@ -214,11 +215,14 @@ export default function HeatmapChartFactory(Private) {
             const textHeight = this.getBBox().height;
             const textTooLong = textLength > maxLength;
             const textTooWide = textHeight > maxHeight;
+            if (!d.hide && (textTooLong || textTooWide)) {
+              hiddenLabels = true;
+            }
             return d.hide || textTooLong || textTooWide ? 'none' : 'initial';
           })
           .style('dominant-baseline', 'central')
           .style('text-anchor', 'middle')
-          .style('stroke', zAxisConfig.get('labels.color'))
+          .style('fill', zAxisConfig.get('labels.color'))
           .attr('x', function (d) {
             const center = x(d) + squareWidth / 2;
             return center;
@@ -232,6 +236,9 @@ export default function HeatmapChartFactory(Private) {
             const verticalCenter = y(d) + squareHeight / 2;
             return `rotate(${rotate},${horizontalCenter},${verticalCenter})`;
           });
+        if (hiddenLabels) {
+          this.baseChart.handler.alerts.show('Some labels were hidden due to size constrains');
+        }
       }
 
       if (isTooltip) {