Merge pull request #2634 from nijil-binary/smartcharts-update

Nijil/Smartcharts update

Author: Aaron

gulp/bundle.js

@@ -31,7 +31,7 @@ gulp.task(
 gulp.task(
     'copy-js',
     gulp.parallel(done => {
-        gulp.src(['./node_modules/@binary-com/smartcharts/dist/*.smartcharts.*']).pipe(gulp.dest('www/js/'));
+        gulp.src(['./node_modules/smartcharts-beta/dist/*.smartcharts.*']).pipe(gulp.dest('www/js/'));
         done();
     })
 );
@@ -41,7 +41,7 @@ gulp.task(
     gulp.parallel(done => {
         gulp.src([
             'node_modules/jquery-ui-css/jquery-ui.min.css',
-            './node_modules/@binary-com/smartcharts/dist/smartcharts.css',
+            './node_modules/smartcharts-beta/dist/smartcharts.css',
         ])
             .pipe(concatCss('bundle.css'))
             .pipe(rev())

package-lock.json

@@ -102,7 +102,7 @@
     "webpack-stream": "^4.0.0"
   },
   "dependencies": {
-    "@binary-com/smartcharts": "^0.6.1",
+    "smartcharts-beta": "^0.8.0-betam.10",
     "binary-style": "^0.2.4",
     "blockly": "github:google/blockly#59e5ac6",
     "clone": "aminmarashi/clone#d97b4f",

package.json

@@ -1,15 +1,12 @@
 import {
     SmartChart,
     setSmartChartsPublicPath,
-    ChartTypes,
     StudyLegend,
     Views,
-    Timeperiod,
     DrawTools,
     Share,
-    CrosshairToggle,
-    ChartSize,
-} from '@binary-com/smartcharts';
+    ChartMode,
+} from 'smartcharts-beta';
 import React, { PureComponent } from 'react';
 import { translate } from '../../../common/i18n';
 import Dialog from './Dialog';
@@ -121,14 +118,14 @@ class ChartContent extends PureComponent {
 
     renderControls = () => (
         <React.Fragment>
-            <CrosshairToggle />
-            <ChartTypes enabled={true} onChange={chartType => this.setState({ chartType })} />
-            <Timeperiod enabled={true} onChange={granularity => this.setState({ granularity })} />
-            <StudyLegend />
+            <ChartMode
+                onChartType={chartType => this.setState({ chartType })}
+                onGranularity={granularity => this.setState({ granularity })}
+            />
+            <StudyLegend searchInputClassName="data-hj-whitelist" />
             <DrawTools />
-            <Views />
+            <Views searchInputClassName="data-hj-whitelist" />
             <Share />
-            <ChartSize />
         </React.Fragment>
     );
 
@@ -151,18 +148,18 @@ class ChartContent extends PureComponent {
 
         return (
             <SmartChart
-                id={this.chartId}
+                barriers={barriers}
+                chartControlsWidgets={this.renderControls}
                 chartType={this.state.chartType}
                 granularity={this.state.granularity}
-                symbol={this.state.symbol}
-                isMobile={true}
-                topWidgets={this.renderTopWidgets}
-                chartControlsWidgets={this.renderControls}
+                id={this.chartId}
+                isMobile={false}
                 requestAPI={this.requestAPI.bind(this)}
-                requestSubscribe={this.requestSubscribe.bind(this)}
                 requestForget={this.requestForget.bind(this)}
-                barriers={barriers}
+                requestSubscribe={this.requestSubscribe.bind(this)}
                 settings={this.settings}
+                symbol={this.state.symbol}
+                topWidgets={this.renderTopWidgets}
             />
         );
     }

src/botPage/common/symbolApi/__tests__/activeSymbols.js

@@ -1,64 +1,28 @@
-.smartcharts-mobile {
-    font-size: 10px;
+.cq-chart-control-bottom .cq-chart-controls .ciq-menu .cq-menu-dropdown.cq-menu-dropdown-enter-done, .cq-chart-control-bottom .cq-chart-controls .ciq-menu .cq-menu-dropdown.cq-menu-dropdown-enter-active {
+    transform: translateX(-40%) translateY(0em);
+}
 
-    /*
-      chart controls should still
-      be visible when its dropdown shows up.
-     */
-    .ciq-period, 
-    .cq-download, 
-    .ciq-views, 
-    .ciq-drawtools, 
-    .ciq-studies, 
-    .cq-chart-setting, 
-    .ciq-draw-tools, 
-    .cq-comparison-new, 
-    .ciq-chart-types {
-        .cq-menu-overlay {
-            height: calc(100% - 40px);
-        }
-    }
+.ciq-list .ciq-list-item {
+    font-size: 0.8em;
+}
 
-    .cq-modal-dropdown {
-        position: absolute !important;
+.cq-categorical-display {
+    .cq-item, 
+    .cq-active-item,
+    .empty-category,
+    .cq-filter,
+    .cq-lookup-input>input,
+    .category-title,
+    .empty-category {
+        font-size: 0.8em;
     }
-
-    .drag-price > .price {
-        font-size: 10px;
-        padding: 1px 5px;
+    .category-title {
+        font-weight: bold;
     }
-
-    .ic-icon > svg {
-        box-sizing: content-box !important;
+    .empty-category {
+        padding: 0 0.8em 0.8em;
     }
-
-    .cq-chart-controls {
-        .cq-menu-btn > .cq-toggle {
-            padding: 0.35em 0em !important;
-        }
-
-        .cq-chart-size > :first-child {
-            margin-right: 2em !important;
-        }
-        
-        .ic-icon-with-sub {
-            &:hover .ic-subtitle {
-                visibility: visible;
-            }
-            .ic-subtitle {
-                visibility: hidden;
-                width: 60px;
-                color: #fff !important;
-                background: #15212d;
-                padding: 5px 0;
-                border-radius: 5px;
-                position: absolute;
-                z-index: 1;
-                bottom: 40px;
-                left: -15px;
-                display: block;
-                margin-bottom: 5px;
-            }
-        }
+    .category.category-has-subtitle {
+        padding-top: 4em
     }
 }