clickable chart overlay

src/modules/MQTT/components/Chart/index.js

@@ -59,7 +59,7 @@ class Chart extends PureComponent {
         };
 
         return (
-            <TextOverlay showLoader={!isConnected} text="MQTT is not connected" >
+            <TextOverlay showLoader={!isConnected} text="MQTT is not connected" forwardMouseEvent >
                 <div className={classNames('text-muted', className)}>
                     <label>Accelerometer</label>
                     <C3Chart key={Math.random()} data={data} size={{

src/modules/UIKit/components/Overlay/Overlay.js

 import React from 'react';
 
 import styled from 'styled-components';
+import PropTypes from "prop-types";
 
 
 const Overlay = styled.div`
@@ -10,7 +11,16 @@ const Overlay = styled.div`
   background-color: rgba(255, 255, 255, 0.5);
   z-index: 2;
   cursor: not-allowed;
+  
+  pointer-events: ${props => props.forwardMouseEvent ? 'none' : 'all'};
 `;
 
+Overlay.propTypes = {
+    forwardMouseEvent: PropTypes.bool,
+};
+
+Overlay.defaultProps = {
+    forwardMouseEvent: false
+};
 
 export default Overlay;
\ No newline at end of file

src/modules/UIKit/components/Overlay/TextOverlay.js

@@ -16,7 +16,7 @@ const CenteredText = styled.div`
 
 const TextOverlay = ({className, showLoader, children, text}) => (
     <div className={className}>
-        {showLoader ? <Overlay><CenteredText className="text-muted">{text}</CenteredText></Overlay> : null}
+        {showLoader ? <Overlay forwardMouseEvent><CenteredText className="text-muted">{text}</CenteredText></Overlay> : null}
         {children}
     </div>
 );
@@ -25,6 +25,7 @@ TextOverlay.propTypes = {
     showLoader: PropTypes.bool,
     className: PropTypes.string,
     text: PropTypes.string,
+    forwardMouseEvent: PropTypes.bool,
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node