Merge branch 'dev' into simple-scrollbar

deriv-com · Nov 20, 2018 · 4182ffe · 4182ffe
2 parents 95d2834 + 0c69769
commit 4182ffe
Show file tree

Hide file tree

Showing 23 changed files with 186 additions and 53 deletions.
diff --git a/app/index.jsx b/app/index.jsx
@@ -15,6 +15,9 @@ import { // eslint-disable-line import/no-extraneous-dependencies,import/no-unre
     ChartTitle,
     AssetInformation,
     ComparisonList,
+    logEvent,
+    LogCategories,
+    LogActions,
 } from '@binary-com/smartcharts'; // eslint-disable-line import/no-unresolved
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
@@ -35,8 +38,10 @@ if (process.env.NODE_ENV !== 'production') {
     whyDidYouUpdate(React, { exclude: [/^RenderInsideChart$/, /^inject-/] });
 }
 
+const trackJSDomains = ['binary.com', 'binary.me'];
+window.isProductionWebsite = trackJSDomains.reduce((acc, val) => (acc || window.location.host.endsWith(val)), false);
 
-if (window.location.host.endsWith('binary.com')) {
+if (window.isProductionWebsite) {
     window._trackJs = { token: '346262e7ffef497d85874322fff3bbf8', application: 'smartcharts' };
     const s = document.createElement('script');
     s.src = 'https://cdn.trackjs.com/releases/current/tracker.js';
@@ -121,6 +126,7 @@ class App extends Component {
     */
 
     symbolChange = (symbol) => {
+        logEvent(LogCategories.ChartTitle, LogActions.MarketSelector, symbol);
         this.notifier.removeByCategory('activesymbol');
         this.setState({ symbol });
     };

diff --git a/chartiq/chartiq.js b/chartiq/chartiq.js
diff --git a/chartiq/chartiq.min.js b/chartiq/chartiq.min.js
diff --git a/index.html b/index.html
@@ -2,15 +2,6 @@
 <html lang="en">
 
 <head>
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-40877026-15"></script>
-    <script>
-        window.dataLayer = window.dataLayer || [];
-        function gtag(){dataLayer.push(arguments);}
-        gtag('js', new Date());
-
-        gtag('config', 'UA-40877026-15');
-    </script>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

diff --git a/loaders/exclude-block-loader.js b/loaders/exclude-block-loader.js
@@ -0,0 +1,13 @@
+var loaderUtils = require("loader-utils");
+
+function ExcludeBlockLoader(content) {
+    var options = loaderUtils.getOptions(this) || {};
+    if(!options.start || !options.end) {
+        throw new Error('Start and end options are required!');
+    }
+    var regexPattern = new RegExp("[\\t ]*\\/\\* ?" + options.start + " ?\\*\\/[\\s\\S]*?\\/\\* ?" + options.end + " ?\\*\\/[\\t ]*\\n?", "g");
+    content = content.replace(regexPattern, '');
+    return content;
+}
+
+module.exports = ExcludeBlockLoader;
diff --git a/src/Translation.js b/src/Translation.js
@@ -1,31 +1,6 @@
 import messages from '../translation/messages.pot';
-import de from '../translation/de.po';
-import fr from '../translation/fr.po';
-import id from '../translation/id.po';
-import it from '../translation/it.po';
-import nl from '../translation/nl.po';
-import pl from '../translation/pl.po';
-import pt from '../translation/pt.po';
-import ru from '../translation/ru.po';
-import th from '../translation/th.po';
-import vi from '../translation/vi.po';
-import zh_cn from '../translation/zh_cn.po';
-import zh_tw from '../translation/zh_tw.po';
 
-const lang_map = {
-    de,
-    fr,
-    id,
-    it,
-    nl,
-    pl,
-    pt,
-    ru,
-    th,
-    vi,
-    zh_cn,
-    zh_tw,
-};
+const lang_map = {};
 
 export class Translation {
     constructor(lang = 'en') {
@@ -36,7 +11,15 @@ export class Translation {
         if (lang_map[lang] || lang === 'en') {
             this.lang = lang;
         } else {
-            console.error('Unsupported language:', lang);
+            import(/* webpackChunkName: "[request]" */ `../translation/${lang}.po`)
+                .then((imported_lang) => {
+                    if (imported_lang) {
+                        lang_map[lang] = imported_lang;
+                        this.lang = lang;
+                    } else {
+                        console.error('Unsupported language:', lang);
+                    }
+                });
         }
     }
 

diff --git a/src/components/Chart.jsx b/src/components/Chart.jsx
@@ -16,6 +16,7 @@ import './ui';
 import ChartControls from './ChartControls.jsx';
 import Crosshair from './Crosshair.jsx';
 import { connect } from '../store/Connect';
+import { initGA, logPageView } from '../utils/ga';
 
 class Chart extends Component {
     constructor(props) {
@@ -26,6 +27,8 @@ class Chart extends Component {
 
     componentDidMount() {
         const { updateProps, init, ...props } = this.props;
+        initGA();
+        logPageView();
         updateProps(props);
         init(this.root.current, this.modalNode.current, props);
     }

diff --git a/src/components/Favorite.jsx b/src/components/Favorite.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { FavoriteIcon } from './Icons.jsx';
 import FavoriteStore from '../store/FavoriteStore';
+import { logEvent, LogCategories, LogActions } from '../utils/ga';
 
 class Favorite extends Component {
     store = FavoriteStore.getInstance();
@@ -27,6 +28,7 @@ class Favorite extends Component {
         const isFavorite = this.isFavorite(category, id);
         if (isFavorite !== this.state.isFavorite) {
             this.setState({ isFavorite });
+            logEvent(LogCategories.CategoricalDisplay, LogActions.Favorite, `${isFavorite ? 'Add ' : 'Remove '} ${id}`);
         }
     };
 

diff --git a/src/feed/Feed.js b/src/feed/Feed.js
@@ -1,7 +1,7 @@
 import EventEmitter from 'event-emitter-es6';
 import { reaction, when } from 'mobx';
 import { TickHistoryFormatter } from './TickHistoryFormatter';
-import { calculateGranularity, getUTCEpoch } from '../utils';
+import { calculateGranularity, getUTCEpoch, calculateTimeUnitInterval } from '../utils';
 import { RealtimeSubscription, DelayedSubscription } from './subscription';
 import ServerTime from '../utils/ServerTime';
 
@@ -11,6 +11,7 @@ class Feed {
     static get EVENT_ON_PAGINATION() { return 'EVENT_ON_PAGINATION'; }
     get startEpoch() { return this._mainStore.state.startEpoch; }
     get endEpoch() { return this._mainStore.state.endEpoch; }
+    get granularity() { return this._mainStore.chart.granularity; }
     get context() { return this._mainStore.chart.context; }
     _activeStreams = {};
     _isConnectionOpened = true;
@@ -32,7 +33,32 @@ class Feed {
     };
 
     onRangeChanged = () => {
-        console.log('RANGE CHANGE', this.startEpoch, this.endEpoch);
+        const now = this._serverTime.getEpoch();
+        if (this.endEpoch && this.endEpoch > now) {
+            // endEpoch cannot be set in the future or ChartIQ will
+            // trigger a fetchInitialData request in stx.setRange
+            return;
+        }
+
+        const periodicity = calculateTimeUnitInterval(this.granularity);
+        const rangeTime = ((this.granularity || 1) * this._stx.chart.maxTicks);
+
+        // If the endEpoch is undefined _and_ there are no active streams, we initiate streaming
+        if (this.endEpoch === undefined) {
+            if (Object.keys(this._activeStreams).length === 0) {
+                // Set the end range to the future to trigger ChartIQ to start streaming
+                const future = now + 10;
+                const dtRight = new Date(future * 1000);
+                const dtLeft =  new Date((this.startEpoch || now - rangeTime) * 1000);
+                this._stx.setRange({ dtLeft, dtRight, periodicity }, () => this._stx.home());
+            }
+            return;
+        }
+
+        const dtLeft =  new Date((this.startEpoch || this.endEpoch - rangeTime) * 1000);
+        const dtRight = new Date(this.endEpoch * 1000);
+
+        this._stx.setRange({ dtLeft, dtRight, periodicity }, () => this._stx.draw());
     };
 
     // although not used, subscribe is overridden so that unsubscribe will be called by ChartIQ
@@ -223,6 +249,9 @@ class Feed {
 
     _appendChartData(quotes, key, comparisonChartSymbol) {
         this._forgetIfEndEpoch(key);
+        if (!this._activeStreams[key]) {
+            quotes = [];
+        }
         if (comparisonChartSymbol) {
             this._stx.updateChartData(quotes, null, {
                 secondarySeries: comparisonChartSymbol,

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,4 @@
 /* eslint-disable no-new, react/jsx-indent, react/no-danger, react/jsx-indent-props */
-
 import Barrier from './components/Barrier.jsx';
 import PendingPromise from './utils/PendingPromise';
 import ChartTypes from './components/ChartTypes.jsx';
@@ -19,6 +18,7 @@ import AssetInformation from './components/AssetInformation.jsx';
 import Marker from './components/Marker.jsx';
 import CurrentSpot from './components/CurrentSpot.jsx';
 import { createObjectFromLocalStorage } from './utils';
+import { logEvent, LogCategories, LogActions } from './utils/ga';
 
 function setSmartChartsPublicPath(path) {
     __webpack_public_path__ = path; // eslint-disable-line
@@ -45,6 +45,9 @@ export {
     Timeperiod,
     CurrentSpot,
     Views,
+    logEvent,
+    LogCategories,
+    LogActions,
 };
 
 export default {
@@ -68,4 +71,7 @@ export default {
     Timeperiod,
     CurrentSpot,
     Views,
+    logEvent,
+    LogCategories,
+    LogActions,
 };
diff --git a/src/store/ChartSettingStore.js b/src/store/ChartSettingStore.js
@@ -3,6 +3,7 @@ import { observable, action, reaction } from 'mobx';
 import MenuStore from './MenuStore';
 import { FlagIcons } from '../components/Icons.jsx';
 import Menu from '../components/Menu.jsx';
+import { logEvent, LogCategories, LogActions } from '../utils/ga';
 
 export default class ChartSettingStore {
     constructor(mainStore) {
@@ -108,20 +109,23 @@ export default class ChartSettingStore {
         if (lng === this.language.key) { return; }
         this.language = this.languages.find(item => item.key === lng);
         t.setLanguage(lng);
+        logEvent(LogCategories.ChartControl, LogActions.ChartSetting, `Change language to ${lng}`);
         this.saveSetting();
     }
 
     @action.bound setTheme(theme) {
         if (this.theme === theme) { return; }
         this.theme = theme;
         if (this.context) { this.stx.clearStyles(); }
+        logEvent(LogCategories.ChartControl, LogActions.ChartSetting, `Change theme to ${theme}`);
         this.saveSetting();
     }
 
     @action.bound setPosition(value) {
         if (this.position === value) { return; }
         this.position = value;
         if (this.context) { this.stx.clearStyles(); }
+        logEvent(LogCategories.ChartControl, LogActions.ChartSetting, 'Change Position');
         this.saveSetting();
 
         /**
@@ -138,12 +142,15 @@ export default class ChartSettingStore {
     @action.bound setAssetInformation(value) {
         if (this.assetInformation === value) { return; }
         this.assetInformation = value;
+        logEvent(LogCategories.ChartControl, LogActions.ChartSetting, `${value ? 'Show'  : 'Hide'} Asset Information`);
         this.saveSetting();
     }
 
     @action.bound showCountdown(value) {
         if (this.countdown === value) { return; }
         this.countdown = value;
+        logEvent(LogCategories.ChartControl, LogActions.ChartSetting, `${value ? 'Show'  : 'Hide'} Countdown`);
+
         this.saveSetting();
     }
 }
diff --git a/src/store/ChartSizeStore.js b/src/store/ChartSizeStore.js
@@ -1,4 +1,5 @@
 import { observable, when, action } from 'mobx';
+import { logEvent, LogCategories, LogActions } from  '../utils/ga';
 
 export default class ChartSizeStore {
     @observable stx;
@@ -11,10 +12,12 @@ export default class ChartSizeStore {
     onContextReady = () => { this.stx = this.mainStore.chart.context.stx; };
 
     @action.bound zoomIn() {
+        logEvent(LogCategories.ChartControl, LogActions.ChartSize, 'zoom In');
         if (this.stx) { this.stx.zoomIn(); }
     }
 
     @action.bound zoomOut() {
+        logEvent(LogCategories.ChartControl, LogActions.ChartSize, 'zoom Out');
         if (this.stx) { this.stx.zoomOut(); }
     }
 }
diff --git a/src/store/ChartStore.js b/src/store/ChartStore.js
@@ -270,7 +270,7 @@ class ChartStore {
 
         // only one instance of keystrokeHub should exist
         if (ChartStore.keystrokeHub === undefined) {
-            ChartStore.keystrokeHub = new KeystrokeHub(document.body, context, {
+            ChartStore.keystrokeHub = new KeystrokeHub(document.body, null, {
                 cb: KeystrokeHub.defaultHotKeys,
             });
         }
@@ -299,8 +299,14 @@ class ChartStore {
                 }
 
                 this.context = context;
+
+                /*
+                // Disable key press events for chart until we can get it not to
+                // interfere with key presses outside the chart:
                 stxx.container.addEventListener('mouseenter', this.onMouseEnter);
                 stxx.container.addEventListener('mouseleave', this.onMouseLeave);
+                */
+
                 this.contextPromise.resolve(this.context);
                 this.resizeScreen();
 

diff --git a/src/store/ChartTypeStore.js b/src/store/ChartTypeStore.js
@@ -21,6 +21,7 @@ import SettingsDialogStore from './SettingsDialogStore';
 import List from '../components/List.jsx';
 import Menu from '../components/Menu.jsx';
 import SettingsDialog from '../components/SettingsDialog.jsx';
+import { logEvent, LogCategories, LogActions } from  '../utils/ga';
 
 function getChartTypes() {
     return [
@@ -184,6 +185,7 @@ export default class ChartTypeStore {
             }
         }
         this.type = type;
+        logEvent(LogCategories.ChartControl, LogActions.ChartType, type.text);
     }
 
     @action.bound showAggregateDialog(aggregateId) {

diff --git a/src/store/ComparisonStore.js b/src/store/ComparisonStore.js
@@ -4,6 +4,7 @@ import MenuStore from './MenuStore';
 import CategoricalDisplayStore from './CategoricalDisplayStore';
 import { CategoricalDisplay } from '../components/categoricaldisplay';
 import Menu from '../components/Menu.jsx';
+import { logEvent, LogCategories, LogActions } from  '../utils/ga';
 
 const swatchColors = [
     '#8ec648', '#00afed', '#ee652e', '#912a8e',
@@ -74,10 +75,12 @@ export default class ComparisonStore {
     }
 
     @action.bound onDeleteItem({ symbolObject }) {
+        logEvent(LogCategories.ChartControl, LogActions.Comparison, `Remove ${symbolObject.name}`);
         this.removeComparison(symbolObject);
     }
 
     @action.bound onSelectItem(symbolObject) {
+        logEvent(LogCategories.ChartControl, LogActions.Comparison, `Add ${symbolObject.name}`);
         const context = this.context;
         const pattern = null;
         const width = 1;
@@ -118,6 +121,7 @@ export default class ComparisonStore {
             });
         }
 
+
         this.menu.setOpen(false);
     }