Maryia/dtra-369/Send chart events using stateChangeListener for analytics collection

src/Constant.tsx

@@ -552,11 +552,26 @@ export const Languages = [
 ];
 
 export const STATE = {
+    CHART_INTERVAL_CHANGE: 'CHART_INTERVAL_CHANGE',
+    CHART_MODE_TOGGLE: 'CHART_MODE_TOGGLE',
+    CHART_TYPE_CHANGE: 'CHART_TYPE_CHANGE',
+    FAVORITE_MARKETS_TOGGLE: 'FAVORITE_MARKETS_TOGGLE',
+    INDICATOR_ADDED: 'INDICATOR_ADDED',
+    INDICATOR_DELETED: 'INDICATOR_DELETED',
+    INDICATOR_INFO_TOGGLE: 'INDICATOR_INFO_TOGGLE',
+    INDICATOR_SEARCH: 'INDICATOR_SEARCH',
+    INDICATOR_SETTINGS_OPEN: 'INDICATOR_SETTINGS_OPEN',
+    INDICATORS_CLEAR_ALL: 'INDICATORS_CLEAR_ALL',
+    INDICATORS_MODAL_TOGGLE: 'INDICATORS_MODAL_TOGGLE',
     INITIAL: 'INITIAL',
+    MARKET_INFO_REDIRECT: 'MARKET_INFO_REDIRECT',
+    MARKET_SEARCH: 'MARKET_SEARCH',
+    MARKET_STATE_CHANGE: 'MARKET_STATE_CHANGE',
+    MARKETS_LIST_TOGGLE: 'MARKETS_LIST_TOGGLE',
     READY: 'READY',
     SCROLL_TO_LEFT: 'SCROLL_TO_LEFT',
-    MARKET_STATE_CHANGE: 'MARKET_STATE_CHANGE',
-};
+    SYMBOL_CHANGE: 'SYMBOL_CHANGE',
+} as const;
 
 export const TooltipsContent = {
     predictionIndicator: t.translate(

src/components/ChartTitle.tsx

@@ -4,6 +4,8 @@ import ReactDOM from 'react-dom';
 import { TProcessedSymbolItem } from 'src/binaryapi/ActiveSymbols';
 import { useStores } from 'src/store';
 import { TOpenMarket } from 'src/types';
+import { getSymbolMarketCategory } from 'src/utils';
+import { STATE } from 'src/Constant';
 import '../../sass/components/_chart-title.scss';
 import { CategoricalDisplay } from './categoricaldisplay';
 import Menu from './Menu';
@@ -21,9 +23,8 @@ export type TChartTitleProps = {
 };
 
 const ChartTitle = (props: TChartTitleProps) => {
-    const { chartTitle, chart, chartSetting } = useStores();
+    const { chartTitle, chart, chartSetting, state } = useStores();
     const { isMobile } = chart;
-
     const { theme } = chartSetting;
     const {
         menuStore,
@@ -36,7 +37,6 @@ const ChartTitle = (props: TChartTitleProps) => {
     } = chartTitle;
     const onChange = props.onChange || setSymbol;
     const setMenuOpen = menuStore.setOpen;
-
     const { containerId, enabled, portalNodeId, searchInputClassName, open, open_market, isNestedList } = props;
 
     React.useEffect(() => {
@@ -68,9 +68,14 @@ const ChartTitle = (props: TChartTitleProps) => {
                     store={categoricalDisplay}
                     isNestedList={isNestedList}
                     searchInputClassName={searchInputClassName}
-                    onSelectItem={(x: TProcessedSymbolItem) => {
-                        if (x.symbol !== currentSymbol.symbol) {
-                            onChange(x.symbol);
+                    onSelectItem={(symbol_object: TProcessedSymbolItem, category_id: string) => {
+                        if (symbol_object.symbol !== currentSymbol.symbol) {
+                            onChange(symbol_object.symbol);
+                            state.stateChange(STATE.SYMBOL_CHANGE, {
+                                tab_market_name:
+                                    category_id === 'favorite' ? 'favorites' : getSymbolMarketCategory(symbol_object),
+                                market_type_name: symbol_object.symbol,
+                            });
                         }
                         setMenuOpen(false);
                     }}

src/components/ChartTypes.tsx

@@ -3,7 +3,9 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStores } from 'src/store';
 import { ChartType, TIcon } from 'src/types';
+import { getTimeIntervalName } from 'src/utils';
 import { TListItem } from 'src/store/ListStore';
+import { Intervals, STATE } from 'src/Constant';
 import Tooltip from './Tooltip';
 import '../../sass/components/_chart-types.scss';
 import List from './List';
@@ -23,7 +25,7 @@ type TChartTypesProps = {
 };
 
 const ChartTypes = ({ enabled, newDesign, onChange: onChangeFn }: TChartTypesProps) => {
-    const { chartType, chart } = useStores();
+    const { chartType, chart, state } = useStores();
 
     const { listStore, setTypeFromUI, updateProps, types, type, menuStore } = chartType;
     const { open: menuOpen, setOpen } = chartType.menuStore;
@@ -35,6 +37,12 @@ const ChartTypes = ({ enabled, newDesign, onChange: onChangeFn }: TChartTypesPro
 
     const onItemClick = (chart_type: ChartType) => {
         if (type.id !== chart_type.id) {
+            if (chart_type.id) {
+                state.stateChange(STATE.CHART_TYPE_CHANGE, {
+                    chart_type_name: chart_type.id === 'colored_bar' ? chart_type.text : chart_type.text.toLowerCase(),
+                    time_interval_name: getTimeIntervalName(state.granularity, Intervals),
+                });
+            }
             onChange(chart_type.id);
         }
         setOpen(false);

src/components/Favorite.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
+import { useStores } from 'src/store';
+import { STATE } from 'src/Constant';
 import { FavoriteIcon } from './Icons';
 import FavoriteStore from '../store/FavoriteStore';
 import { logEvent, LogCategories, LogActions } from '../utils/ga';
@@ -11,6 +13,7 @@ type TFavoriteProps = {
 };
 
 const Favorite = ({ category, id }: TFavoriteProps) => {
+    const { chart, state } = useStores();
     const [store] = React.useState(FavoriteStore.getInstance());
     const [is_favorite, setFavorite] = React.useState(false);
 
@@ -19,8 +22,12 @@ const Favorite = ({ category, id }: TFavoriteProps) => {
             e.stopPropagation();
             (e as TCustomEvent).nativeEvent.isHandledByDialog = true; // prevent close dialog
             store.toggleFavorite(category, id);
+            state.stateChange(STATE.FAVORITE_MARKETS_TOGGLE, {
+                is_favorite: store.isFavorite(category, id),
+                market_type_name: chart.activeSymbols?.symbolMap[id]?.symbol,
+            });
         },
-        [store, category, id]
+        [chart, state, store, category, id]
     );
     const onFavoriteUpdate = React.useCallback(() => {
         const isFavorite = store.isFavorite(category, id);

src/components/StudyLegend.tsx

@@ -10,7 +10,7 @@ import Tooltip from './Tooltip';
 import Scroll from './Scroll';
 import { IndicatorIcon, ActiveIcon, EmptyStateIcon, SettingIcon, DeleteIcon, InfoCircleIcon, BackIcon } from './Icons';
 import '../../sass/components/_studylegend.scss';
-import { TActiveItem, TooltipsContent } from '../Constant';
+import { STATE, TActiveItem, TooltipsContent } from '../Constant';
 import Menu from './Menu';
 import SearchInput from './SearchInput';
 
@@ -109,7 +109,9 @@ const IndicatorList = ({
                     }
                     content={
                         Item.isPrediction && isTick
-                            ? t.translate('This indicator does not support 1-tick intervals. To use this indicator, change your chart time interval to 1 minute or more.')
+                            ? t.translate(
+                                  'This indicator does not support 1-tick intervals. To use this indicator, change your chart time interval to 1 minute or more.'
+                              )
                             : `${Item.name} ${Item.bars ? `(${Item.bars})` : ''}`
                     }
                 >
@@ -259,7 +261,7 @@ const TabularDisplay = ({
 );
 
 const StudyLegend = ({ portalNodeId }: TStudyLegendProps) => {
-    const { studies, chart, timeperiod } = useStores();
+    const { studies, chart, state, timeperiod } = useStores();
 
     const {
         menuStore,
@@ -286,6 +288,18 @@ const StudyLegend = ({ portalNodeId }: TStudyLegendProps) => {
     const activeStudiesNo = activeItems.length;
 
     updatePortalNode(portalNodeId);
+
+    const getIndicatorCategoryName = (id: string) =>
+        items.find(i => i.items.some(el => el.id === id))?.id.replace('-', ' ') ?? '';
+
+    const handleStateChange = (id: string, type: string, payload?: { is_info_open: boolean }) => {
+        state.stateChange(type, {
+            indicator_type_name: id,
+            indicators_category_name: getIndicatorCategoryName(id),
+            ...(payload ?? {}),
+        });
+    };
+
     return (
         <Menu
             store={menuStore}
@@ -298,7 +312,12 @@ const StudyLegend = ({ portalNodeId }: TStudyLegendProps) => {
             customHead={
                 infoItem ? (
                     <div className='sc-dialog__head--info'>
-                        <BackIcon onClick={() => onInfoItem(null)} />
+                        <BackIcon
+                            onClick={() => {
+                                onInfoItem(null);
+                                handleStateChange(infoItem.id, STATE.INDICATOR_INFO_TOGGLE);
+                            }}
+                        />
                         {infoItem.name}
                     </div>
                 ) : (
@@ -331,7 +350,10 @@ const StudyLegend = ({ portalNodeId }: TStudyLegendProps) => {
                                 <button
                                     type='button'
                                     className='sc-btn sc-btn--primary sc-btn--w100'
-                                    onClick={() => onSelectItem(infoItem?.id)}
+                                    onClick={() => {
+                                        onSelectItem(infoItem?.id);
+                                        handleStateChange(infoItem?.id, STATE.INDICATOR_ADDED, { is_info_open: true });
+                                    }}
                                     disabled={infoItem?.disabledAddBtn}
                                 >
                                     {t.translate('Add')}
@@ -345,10 +367,22 @@ const StudyLegend = ({ portalNodeId }: TStudyLegendProps) => {
                     selectedTab={selectedTab}
                     categories={items}
                     searchedCategories={searchedItems}
-                    onSelectItem={onSelectItem}
-                    onDeleteItem={deleteStudy}
-                    onEditItem={editStudy}
-                    onInfoItem={onInfoItem}
+                    onSelectItem={(id: string) => {
+                        onSelectItem(id);
+                        handleStateChange(id, STATE.INDICATOR_ADDED);
+                    }}
+                    onDeleteItem={(item: TActiveItem['dataObject']['sd']) => {
+                        deleteStudy(item);
+                        handleStateChange(item.type, STATE.INDICATOR_DELETED);
+                    }}
+                    onEditItem={(study: TActiveItem['dataObject']) => {
+                        editStudy(study);
+                        handleStateChange(study.sd.type, STATE.INDICATOR_SETTINGS_OPEN);
+                    }}
+                    onInfoItem={(item: TActiveItem) => {
+                        onInfoItem(item);
+                        handleStateChange(item.id, STATE.INDICATOR_INFO_TOGGLE, { is_info_open: true });
+                    }}
                     activeItems={activeItems}
                     clearAll={deleteAll}
                     searchQuery={searchQuery}

src/components/categoricaldisplay/CategoricalDisplay.tsx

@@ -14,7 +14,7 @@ type TCategoricalDisplayProps = {
     searchInputClassName?: string;
     isNestedList?: boolean;
     id?: string;
-    onSelectItem?: (item: TProcessedSymbolItem) => void;
+    onSelectItem?: (item: TProcessedSymbolItem, category_id: string) => void;
     disableAll?: boolean;
 };
 
@@ -50,8 +50,8 @@ const CategoricalDisplay = ({
 
     const innerPanel = (
         <ResultsPanel
-            onSelectItem={(item: TProcessedSymbolItem) => {
-                onSelectItem?.(item);
+            onSelectItem={(item: TProcessedSymbolItem, category_id: string) => {
+                onSelectItem?.(item, category_id);
                 setFilterText('');
             }}
             disableAll={disableAll}