add popover for inidicators

src/javascript/app/App/Components/Elements/Popover/popover.jsx

@@ -37,6 +37,7 @@ class Popover extends React.PureComponent {
             classNameTargetIcon,
             has_error,
             icon,
+            is_hidden,
             margin,
             message,
         } = this.props;
@@ -63,7 +64,7 @@ class Popover extends React.PureComponent {
                     className={classNameBubble}
                     has_error={has_error}
                     icon={icon}
-                    is_open={this.state.is_open}
+                    is_open={this.state.is_open && !is_hidden}
                     target_rectangle={this.state.target_rectangle}
                     margin={margin}
                     message={message}
@@ -81,6 +82,7 @@ Popover.propTypes = {
     classNameTargetIcon: PropTypes.string,
     has_error          : PropTypes.bool,
     icon               : PropTypes.string,
+    is_hidden          : PropTypes.bool,
     margin             : PropTypes.number,
     message            : PropTypes.string,
 };

src/javascript/app/Modules/SmartChart/Components/control-widgets.jsx

@@ -10,15 +10,29 @@ import {
     Views }           from 'smartcharts-beta';
 import PropTypes      from 'prop-types';
 import React          from 'react';
+import { Popover }    from 'App/Components/Elements/Popover';
+import { localize }   from '_common/localize';
 
 const ControlWidgets = ({
+    hasReachedLimitListener,
+    is_study_limit_error_visible,
     updateChartType,
     updateGranularity,
 }) => (
     <React.Fragment>
         <CrosshairToggle />
         <ChartTypes onChange={updateChartType} />
-        <StudyLegend searchInputClassName='data-hj-whitelist' />
+        <StudyLegend
+            hasReachedLimitListener={hasReachedLimitListener}
+            ItemWrapper={Popover}
+            itemWrapperProps={{
+                message        : localize('You can\'t have more than 5 open Indicators.'),
+                alignment      : 'right',
+                classNameTarget: 'popover__study',
+                is_hidden      : !is_study_limit_error_visible,
+            }}
+            searchInputClassName='data-hj-whitelist'
+        />
         <Comparison searchInputClassName='data-hj-whitelist' />
         <DrawTools />
         <Views searchInputClassName='data-hj-whitelist' />
@@ -29,8 +43,10 @@ const ControlWidgets = ({
 );
 
 ControlWidgets.propTypes = {
-    updateChartType  : PropTypes.func,
-    updateGranularity: PropTypes.func,
+    hasReachedLimitListener     : PropTypes.func,
+    is_study_limit_error_visible: PropTypes.bool,
+    updateChartType             : PropTypes.func,
+    updateGranularity           : PropTypes.func,
 };
 
 export default ControlWidgets;

src/javascript/app/Modules/SmartChart/Containers/smart-chart.jsx

@@ -20,6 +20,8 @@ class Chart extends React.Component {
 
     chartControlsWidgets = () => (
         <ControlWidgets
+            hasReachedLimitListener={this.props.hasReachedLimitListener}
+            is_study_limit_error_visible={this.props.is_study_limit_error_visible}
             updateChartType={this.props.updateChartType}
             updateGranularity={this.props.updateGranularity}
         />
@@ -88,11 +90,13 @@ Chart.propTypes = {
     exportLayout                : PropTypes.func,
     getChartStatus              : PropTypes.func,
     granularity                 : PropTypes.number,
+    hasReachedLimitListener     : PropTypes.func,
     InfoBox                     : PropTypes.node,
     is_contract_mode            : PropTypes.bool,
     is_mobile                   : PropTypes.bool,
     is_socket_opened            : PropTypes.bool,
     is_static_chart             : PropTypes.bool,
+    is_study_limit_error_visible: PropTypes.bool,
     is_title_enabled            : PropTypes.bool,
     is_trade_page               : PropTypes.bool,
     margin                      : PropTypes.number,
@@ -120,26 +124,28 @@ Chart.propTypes = {
 
 export default connect(
     ({ modules, ui, common }) => ({
-        is_socket_opened    : common.is_socket_opened,
-        barriers_array      : modules.smart_chart.barriers_array,
-        exportLayout        : modules.smart_chart.exportLayout,
-        getChartStatus      : modules.smart_chart.getChartStatus,
-        is_contract_mode    : modules.smart_chart.is_contract_mode,
-        is_title_enabled    : modules.smart_chart.is_title_enabled,
-        margin              : modules.smart_chart.margin,
-        markers_array       : modules.smart_chart.markers_array,
-        onMount             : modules.smart_chart.onMount,
-        onUnmount           : modules.smart_chart.onUnmount,
-        settings            : modules.smart_chart.settings,
-        should_clear_chart  : modules.smart_chart.should_clear_chart,
-        should_export_layout: modules.smart_chart.should_export_layout,
-        should_import_layout: modules.smart_chart.should_import_layout,
-        trade_chart_layout  : modules.smart_chart.trade_chart_layout,
-        updateChartType     : modules.smart_chart.updateChartType,
-        updateGranularity   : modules.smart_chart.updateGranularity,
-        wsForget            : modules.smart_chart.wsForget,
-        wsSendRequest       : modules.smart_chart.wsSendRequest,
-        wsSubscribe         : modules.smart_chart.wsSubscribe,
-        is_mobile           : ui.is_mobile,
+        is_socket_opened            : common.is_socket_opened,
+        barriers_array              : modules.smart_chart.barriers_array,
+        exportLayout                : modules.smart_chart.exportLayout,
+        getChartStatus              : modules.smart_chart.getChartStatus,
+        hasReachedLimitListener     : modules.smart_chart.hasReachedLimitListener,
+        is_contract_mode            : modules.smart_chart.is_contract_mode,
+        is_study_limit_error_visible: modules.smart_chart.is_study_limit_error_visible,
+        is_title_enabled            : modules.smart_chart.is_title_enabled,
+        margin                      : modules.smart_chart.margin,
+        markers_array               : modules.smart_chart.markers_array,
+        onMount                     : modules.smart_chart.onMount,
+        onUnmount                   : modules.smart_chart.onUnmount,
+        settings                    : modules.smart_chart.settings,
+        should_clear_chart          : modules.smart_chart.should_clear_chart,
+        should_export_layout        : modules.smart_chart.should_export_layout,
+        should_import_layout        : modules.smart_chart.should_import_layout,
+        trade_chart_layout          : modules.smart_chart.trade_chart_layout,
+        updateChartType             : modules.smart_chart.updateChartType,
+        updateGranularity           : modules.smart_chart.updateGranularity,
+        wsForget                    : modules.smart_chart.wsForget,
+        wsSendRequest               : modules.smart_chart.wsSendRequest,
+        wsSubscribe                 : modules.smart_chart.wsSubscribe,
+        is_mobile                   : ui.is_mobile,
     })
 )(Chart);

src/javascript/app/Stores/Modules/SmartChart/smart-chart-store.js

@@ -22,6 +22,7 @@ export default class SmartChartStore extends BaseStore {
     @observable is_contract_mode = false;
     @observable is_static_chart  = false;
     @observable is_title_enabled = true;
+    @observable is_study_limit_error_visible = false;
 
     @observable start_epoch;
     @observable end_epoch;
@@ -85,6 +86,11 @@ export default class SmartChartStore extends BaseStore {
         this.setStaticChart(false);
     }
 
+    @action.bound
+    hasReachedLimitListener(hasReached) {
+        this.is_study_limit_error_visible = hasReached;
+    }
+
     @action.bound
     resetScrollToLeft() {
         this.scroll_to_left_epoch = null;

src/sass/app/_common/layout/layouts.scss

@@ -474,3 +474,10 @@
         }
     }
 }
+
+/** @define popover */
+.popover {
+    &__study {
+        height: 100% !important;
+    }
+}