TradingView: custom indicators (#662)

* getIsPaperPair util fn

* refactor

* ask for clear backtest results if user change pair

* add new properties for Chart

* use constructor labels

* generate custom study name for TV

* local TV url for testing

* Remove hardcoded close price source from MACD indicator

* Update config.js

src/components/Chart/Chart.js

@@ -26,6 +26,7 @@ const Chart = ({
   hideResolutions,
   hideIndicators,
   hideDeleteIndicator,
+  isStrategyChart,
   onClosePosition,
   position,
   chartRange,
@@ -51,6 +52,7 @@ const Chart = ({
     hideResolutions,
     hideIndicators,
     hideDeleteIndicator,
+    isStrategyChart,
   }).toString()
 
   useEffect(() => {
@@ -80,6 +82,7 @@ Chart.propTypes = {
   hideResolutions: PropTypes.bool,
   hideIndicators: PropTypes.bool,
   hideDeleteIndicator: PropTypes.bool,
+  isStrategyChart: PropTypes.bool,
   position: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   chartRange: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   onClosePosition: PropTypes.func,
@@ -98,6 +101,7 @@ Chart.defaultProps = {
   hideResolutions: false,
   hideIndicators: false,
   hideDeleteIndicator: false,
+  isStrategyChart: false,
   position: null,
   chartRange: null,
   onClosePosition: null,

src/components/StrategyEditor/StrategyEditor.js

@@ -234,7 +234,7 @@ const StrategyEditor = (props) => {
 
       // Need to delete inherited execution data of parent strategy
       delete newStrategy.executionId
-      delete newStrategy.results
+      newStrategy.results = {}
       delete newStrategy.startedOn
       delete newStrategy.stoppedOn
 
@@ -350,12 +350,14 @@ const StrategyEditor = (props) => {
 
   const saveStrategyOptions = useCallback(
     (newOptions) => {
-      onSaveAsStrategy({
+      const newStrategy = {
         ...strategy,
         strategyOptions: { ...strategyOptions, ...newOptions },
-      })
+      }
+      saveStrategy(newStrategy)
+      onLoadStrategy(newStrategy, false)
     },
-    [onSaveAsStrategy, strategy, strategyOptions],
+    [onLoadStrategy, saveStrategy, strategy, strategyOptions],
   )
 
   const onBacktestStart = useCallback(() => {

src/components/StrategyEditor/tabs/BacktestTab.js

@@ -84,6 +84,7 @@ const BacktestTab = (props) => {
               exitFullscreenChart={hideFullscreenChart}
               trades={trades}
               isBacktest
+              isExecuting={false}
             />
           )
 

src/components/StrategyEditor/tabs/StrategyTab/StrategyLiveTab.js

@@ -95,6 +95,7 @@ const StrategyLiveTab = (props) => {
               fullscreenChart={fullscreenChart}
               exitFullscreenChart={unsetFullScreenChart}
               trades={trades}
+              isExecuting={executing}
             />
           )
 

src/components/StrategyLiveChart/StrategyLiveChart.helpers.js

@@ -1,30 +1,24 @@
 import memoizeOne from 'memoize-one'
 import _map from 'lodash/map'
 import _find from 'lodash/find'
+import _isEmpty from 'lodash/isEmpty'
 
+const generateCustomStudyName = (name, args) => {
+  if (_isEmpty(args)) {
+    return `${name}_`
+  }
+  return `${name} ${args.join(' ')}`
+}
 export const prepareTVIndicators = (indicators) => {
   return _map(indicators, (i) => {
     const transformed = [
       ...i,
     ]
 
     const instance = i[0] && new i[0]()
-    let name = instance?.label
-    if (instance?.label === 'EMA') {
-      name = 'Moving Average Exponential'
-    } else if (instance?.label === 'ROC') {
-      name = 'Rate Of Change'
-    }
+    const name = instance?.label
     transformed[0] = name
-
-    if (instance?.label === 'MACD') {
-      transformed[1] = [
-        transformed?.[1]?.[0],
-        transformed?.[1]?.[1],
-        'close',
-        transformed?.[1]?.[2],
-      ]
-    }
+    transformed[3] = generateCustomStudyName(name, transformed[1])
     return transformed
   })
 }

src/components/StrategyLiveChart/StrategyLiveChart.js

@@ -32,6 +32,7 @@ const StrategyLiveChart = ({
   lastOpenPosition,
   trades,
   isBacktest,
+  isExecuting,
 }) => {
   const {
     strategyOptions: {
@@ -43,9 +44,13 @@ const StrategyLiveChart = ({
     stoppedOn,
   } = strategy
   const start = isBacktest ? new Date(startDate).getTime() : startedOn
-  const end = isBacktest ? new Date(endDate).getTime() : stoppedOn
+  const end = isBacktest
+    ? new Date(endDate).getTime()
+    : isExecuting
+      ? null
+      : stoppedOn
   const chartRange = useMemo(() => {
-    if (start && end) {
+    if (start || end) {
       return {
         start,
         end,
@@ -59,7 +64,9 @@ const StrategyLiveChart = ({
     () => prepareTVIndicators(indicators),
     [indicators],
   )
-  const interval = TIMEFRAME_INTERVAL_MAPPING[timeframe] || '15'
+  const interval = isBacktest
+    ? TIMEFRAME_INTERVAL_MAPPING[timeframe] || '15'
+    : '1'
 
   const {
     wsID, uiID, base, quote,
@@ -134,6 +141,7 @@ const StrategyLiveChart = ({
           hideResolutions
           hideDeleteIndicator
           hideIndicators
+          isStrategyChart
           chartRange={chartRange}
           key={executionId}
         />
@@ -151,12 +159,14 @@ StrategyLiveChart.propTypes = {
   exitFullscreenChart: PropTypes.func.isRequired,
   lastOpenPosition: PropTypes.object, // eslint-disable-line
   isBacktest: PropTypes.bool,
+  isExecuting: PropTypes.bool,
 }
 
 StrategyLiveChart.defaultProps = {
   indicators: [],
   isBacktest: false,
   lastOpenPosition: null,
+  isExecuting: false,
 }
 
 export default memo(StrategyLiveChart)

src/redux/config.js

@@ -63,7 +63,6 @@ const DISCUSSION_BOARD_URL = 'https://bit.ly/42p9YiV'
 const DISCORD_URL = 'https://bit.ly/400Xj49'
 
 const CHART_URL = isElectronApp ? 'https://bitfinexcom.github.io/bfx-hf-tradingview/' : process.env.REACT_APP_CHART_URL
-// const CHART_URL = 'http://localhost:3001/bfx-hf-tradingview/'
 
 const HONEY_AUTH_URL = `${process.env.REACT_APP_UFX_API_URL}/honey`