[DTRA]/ Merge flutter chart branch

.eslintignore

@@ -1,5 +1,4 @@
 dist
-chartiq
 node_modules
 design
 /**/*.d.ts

.eslintrc

@@ -99,6 +99,7 @@
                 "allowChildren": false
             }
         ],
+        "react/require-default-props": "off",
         "@typescript-eslint/explicit-module-boundary-types": "off",
         "@typescript-eslint/no-var-requires": "off"
     }

.gitignore

@@ -30,3 +30,5 @@ jsconfig.json
 CNAME
 .nyc_output
 **/*.swp
+
+chart_app/build/**

.npmignore

@@ -3,7 +3,7 @@
 .eslintrc
 .tern-project
 .travis.yml
-chartiq/
+chart_app/
 crowdin.yml
 css/
 design-v1.js

.stylelintrc

@@ -1,88 +1,141 @@
 {
-  "plugins": [
-    "stylelint-no-unsupported-browser-features"
-  ],
-  "rules": {
-    "at-rule-name-case"                                : "lower",
-    "at-rule-name-space-after"                         : "always",
-    "at-rule-semicolon-newline-after"                  : "always",
-    "block-closing-brace-newline-after"                : "always",
-    "block-closing-brace-newline-before"               : "always",
-    "block-no-empty"                                   : true,
-    "block-opening-brace-newline-after"                : "always",
-    "block-opening-brace-space-before"                 : "always",
-    "color-hex-case"                                   : "lower",
-    "color-named"                                      : "never",
-    "color-no-invalid-hex"                             : true,
-    "declaration-bang-space-after"                     : "never",
-    "declaration-bang-space-before"                    : "always",
-    "declaration-block-no-duplicate-properties"        : [true, { "ignore": ["consecutive-duplicates"] }],
-    "declaration-block-no-shorthand-property-overrides": true,
-    "declaration-block-semicolon-newline-after"        : "always",
-    "declaration-block-semicolon-newline-before"       : "never-multi-line",
-    "declaration-block-semicolon-space-after"          : "always-single-line",
-    "declaration-block-semicolon-space-before"         : "never",
-    "declaration-block-trailing-semicolon"             : "always",
-    "declaration-colon-space-after"                    : "always",
-    "declaration-colon-space-before"                   : "never",
-    "font-family-name-quotes"                          : "always-unless-keyword",
-    "function-calc-no-unspaced-operator"               : true,
-    "function-comma-space-after"                       : "always",
-    "function-comma-space-before"                      : "never",
-    "function-name-case"                               : "lower",
-    "function-parentheses-space-inside"                : "never",
-    "function-url-quotes"                              : "always",
-    "indentation"                                      : 4,
-    "max-empty-lines"                                  : 1,
-    "media-feature-colon-space-after"                  : "always",
-    "media-feature-colon-space-before"                 : "never",
-    "media-feature-range-operator-space-after"         : "always",
-    "media-feature-range-operator-space-before"        : "always",
-    "media-query-list-comma-newline-after"             : "never-multi-line",
-    "media-query-list-comma-newline-before"            : "never-multi-line",
-    "media-query-list-comma-space-after"               : "always",
-    "media-query-list-comma-space-before"              : "never",
-    "no-duplicate-selectors"                           : true,
-    "no-eol-whitespace"                                : true,
-    "no-extra-semicolons"                              : true,
-    "no-invalid-double-slash-comments"                 : true,
-    "number-leading-zero"                              : "always",
-    "number-max-precision"                             : 2,
-    "number-no-trailing-zeros"                         : true,
-    "property-case"                                    : "lower",
-    "plugin/no-unsupported-browser-features"           : [true, {
-      "severity": "error",
-      "ignore": ["calc", "user-select-none", "multicolumn", "css-appearance", "intrinsic-width"]
-    }],
-    "rule-empty-line-before"                           : ["always", { "ignore": ["after-comment"], "except": ["inside-block-and-after-rule", "first-nested"] }],
-    "selector-attribute-brackets-space-inside"         : "never",
-    "selector-attribute-operator-space-after"          : "never",
-    "selector-attribute-operator-space-before"         : "never",
-    "selector-combinator-space-after"                  : "always",
-    "selector-combinator-space-before"                 : "always",
-    "selector-list-comma-newline-before"               : "never-multi-line",
-    "selector-list-comma-space-before"                 : "never",
-    "selector-max-empty-lines"                         : 0,
-    "selector-pseudo-class-case"                       : "lower",
-    "selector-pseudo-class-no-unknown"                 : [true, {
-        "ignorePseudoClasses": ["export"]
-    }],
-    "selector-pseudo-class-parentheses-space-inside"   : "never",
-    "selector-pseudo-element-case"                     : "lower",
-    "selector-pseudo-element-colon-notation"           : "single",
-    "selector-pseudo-element-no-unknown"               : true,
-    "selector-type-case"                               : "lower",
-    "selector-type-no-unknown"                         : [true, { "ignoreTypes": ["from", "to", "0%", "50%", "100%", "_"] }],
-    "shorthand-property-no-redundant-values"           : true,
-    "string-no-newline"                                : true,
-    "string-quotes"                                    : "single",
-    "time-min-milliseconds"                            : 100,
-    "unit-case"                                        : "lower",
-    "unit-whitelist"                                   : ["fr", "px", "em", "rem", "%", "vw", "vh", "deg", "ms", "s"],
-    "value-keyword-case"                               : "lower",
-    "value-list-comma-newline-after"                   : "never-multi-line",
-    "value-list-comma-newline-before"                  : "never-multi-line",
-    "value-list-comma-space-after"                     : "always",
-    "value-list-comma-space-before"                    : "never"
-  }
+    "plugins": [
+        "stylelint-no-unsupported-browser-features"
+    ],
+    "rules": {
+        "at-rule-name-case": "lower",
+        "at-rule-name-space-after": "always",
+        "at-rule-semicolon-newline-after": "always",
+        "block-closing-brace-newline-after": "always",
+        "block-closing-brace-newline-before": "always",
+        "block-no-empty": true,
+        "block-opening-brace-newline-after": "always",
+        "block-opening-brace-space-before": "always",
+        "color-hex-case": "lower",
+        "color-named": "never",
+        "color-no-invalid-hex": true,
+        "declaration-bang-space-after": "never",
+        "declaration-bang-space-before": "always",
+        "declaration-block-no-duplicate-properties": [
+            true,
+            {
+                "ignore": [
+                    "consecutive-duplicates"
+                ]
+            }
+        ],
+        "declaration-block-no-shorthand-property-overrides": true,
+        "declaration-block-semicolon-newline-after": "always",
+        "declaration-block-semicolon-newline-before": "never-multi-line",
+        "declaration-block-semicolon-space-after": "always-single-line",
+        "declaration-block-semicolon-space-before": "never",
+        "declaration-block-trailing-semicolon": "always",
+        "declaration-colon-space-after": "always",
+        "declaration-colon-space-before": "never",
+        "font-family-name-quotes": "always-unless-keyword",
+        "function-calc-no-unspaced-operator": true,
+        "function-comma-space-before": "never",
+        "function-name-case": "lower",
+        "function-url-quotes": "always",
+        "indentation": 4,
+        "max-empty-lines": 1,
+        "media-feature-colon-space-after": "always",
+        "media-feature-colon-space-before": "never",
+        "media-feature-range-operator-space-after": "always",
+        "media-feature-range-operator-space-before": "always",
+        "media-query-list-comma-newline-after": "never-multi-line",
+        "media-query-list-comma-newline-before": "never-multi-line",
+        "media-query-list-comma-space-after": "always",
+        "media-query-list-comma-space-before": "never",
+        "no-duplicate-selectors": true,
+        "no-eol-whitespace": true,
+        "no-extra-semicolons": true,
+        "no-invalid-double-slash-comments": true,
+        "number-leading-zero": "always",
+        "number-max-precision": 2,
+        "number-no-trailing-zeros": true,
+        "property-case": "lower",
+        "plugin/no-unsupported-browser-features": [
+            true,
+            {
+                "severity": "error",
+                "ignore": [
+                    "calc",
+                    "user-select-none",
+                    "multicolumn",
+                    "css-appearance",
+                    "intrinsic-width"
+                ]
+            }
+        ],
+        "rule-empty-line-before": [
+            "always",
+            {
+                "ignore": [
+                    "after-comment"
+                ],
+                "except": [
+                    "inside-block-and-after-rule",
+                    "first-nested"
+                ]
+            }
+        ],
+        "selector-attribute-brackets-space-inside": "never",
+        "selector-attribute-operator-space-after": "never",
+        "selector-attribute-operator-space-before": "never",
+        "selector-combinator-space-after": "always",
+        "selector-combinator-space-before": "always",
+        "selector-list-comma-newline-before": "never-multi-line",
+        "selector-list-comma-space-before": "never",
+        "selector-max-empty-lines": 0,
+        "selector-pseudo-class-case": "lower",
+        "selector-pseudo-class-no-unknown": [
+            true,
+            {
+                "ignorePseudoClasses": [
+                    "export"
+                ]
+            }
+        ],
+        "selector-pseudo-class-parentheses-space-inside": "never",
+        "selector-pseudo-element-case": "lower",
+        "selector-pseudo-element-colon-notation": "single",
+        "selector-pseudo-element-no-unknown": true,
+        "selector-type-case": "lower",
+        "selector-type-no-unknown": [
+            true,
+            {
+                "ignoreTypes": [
+                    "from",
+                    "to",
+                    "0%",
+                    "50%",
+                    "100%",
+                    "_"
+                ]
+            }
+        ],
+        "shorthand-property-no-redundant-values": true,
+        "string-no-newline": true,
+        "string-quotes": "single",
+        "time-min-milliseconds": 100,
+        "unit-case": "lower",
+        "unit-whitelist": [
+            "fr",
+            "px",
+            "em",
+            "rem",
+            "%",
+            "vw",
+            "vh",
+            "deg",
+            "ms",
+            "s"
+        ],
+        "value-keyword-case": "lower",
+        "value-list-comma-newline-after": "never-multi-line",
+        "value-list-comma-newline-before": "never-multi-line",
+        "value-list-comma-space-after": "always",
+        "value-list-comma-space-before": "never"
+    }
 }

app/index.html

@@ -1,20 +1,20 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="referrer" content="origin" />
+        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
+        <meta
+            name="description"
+            content="Analyse the financial markets using beautiful visualisations and unique trading tools, powered by a fast and intuitive interface."
+        />
+        <link rel="stylesheet" type="text/css" href="./dist/smartcharts.css" media="screen" />
+        <link rel="stylesheet" type="text/css" href="./dist/styles.css" media="screen" />
+        <title>Library Test</title>
+    </head>
 
-<head>
-    <meta charset="utf-8" />
-    <meta name="referrer" content="origin">
-    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
-    <meta name="description" content="Analyse the financial markets using beautiful visualisations and unique trading tools, powered by a fast and intuitive interface." />
-    <link rel="stylesheet" type="text/css" href="./dist/smartcharts.css" media="screen" />
-    <link rel="stylesheet" type="text/css" href="./dist/styles.css" media="screen" />
-    <title>Library Test</title>
-</head>
-
-<body>
-<div id="root"></div>
-<script src="./dist/chartiq.min.js"></script>
-<script src="./dist/app.js"></script>
-</body>
-
+    <body>
+        <div id="root"></div>
+        <script src="./dist/app.js"></script>
+    </body>
 </html>

app/index.tsx

@@ -140,10 +140,11 @@ const App = () => {
     const memoizedValues = React.useMemo(() => {
         let endEpoch: number | undefined,
             granularity: number | undefined,
-            chartType = '';
+            chartType = '',
+            symbol = '';
         if (settingsRef.current.historical) {
             endEpoch = new Date(`${today}:00Z`).valueOf() / 1000;
-            chartType = 'mountain';
+            chartType = 'line';
             granularity = 0;
             if (layout) {
                 granularity =
@@ -153,25 +154,27 @@ const App = () => {
                               (layout.interval * IntervalEnum[layout.timeUnit as keyof typeof IntervalEnum]).toString(),
                               10
                           ); // eslint-disable-line
-                if (layout.chartType === 'candle' && layout.aggregationType !== 'ohlc') {
+                if (layout.chartType === 'candles' && layout.aggregationType !== 'ohlc') {
                     chartType = layout.aggregationType;
                 } else {
                     chartType = layout.chartType;
                 }
+                symbol = layout.symbol;
             }
         }
         return {
             chartType,
             granularity,
             endEpoch,
+            symbol,
         };
     }, [layout]);
     const [chartType, setChartType] = React.useState<string | undefined>(memoizedValues.chartType);
     const [granularity, setGranularity] = React.useState<TGranularity>(memoizedValues.granularity as TGranularity);
     const [endEpoch, setEndEpoch] = React.useState(memoizedValues.endEpoch);
     const [isConnectionOpened, setIsConnectionOpened] = React.useState(true);
     const [networkStatus, setNetworkStatus] = React.useState<TNetworkConfig>();
-    const [symbol, setSymbol] = React.useState<string>('');
+    const [symbol, setSymbol] = React.useState<string>(memoizedValues.symbol);
     const allTicks: keyof AuditDetailsForExpiredContract | [] = [];
     const contractInfo: keyof ProposalOpenContract | {} = {};
     React.useEffect(() => {
@@ -192,7 +195,7 @@ const App = () => {
         console.log('settings updated:', newSettings);
         localStorage.setItem('smartchart-setting', JSON.stringify(newSettings));
         if (!prevSetting.historical && newSettings.historical) {
-            setChartType('mountain');
+            setChartType('line');
             setGranularity(0);
             setEndEpoch(new Date(`${today}:00Z`).valueOf() / 1000);
         } else if (!newSettings.historical) {
@@ -252,6 +255,7 @@ const App = () => {
             });
         }
     };
+
     return (
         <SmartChart
             id={chartId}
@@ -278,6 +282,7 @@ const App = () => {
             networkStatus={networkStatus}
             shouldFetchTradingTimes
             shouldFetchTickHistory
+            isLive
             enabledChartFooter
             allTicks={allTicks}
             contractInfo={contractInfo}