@binary-com/smartcharts - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

app/doorbell.js

@@ -18,3 +18,3 @@ window.doorbellOptions = {
     if (w.attachEvent) { w.attachEvent('onload', l); } else if (w.addEventListener) { w.addEventListener('load', l, false); } else { l(); }
-    if (d.readyState == 'complete') { l(); }
+    if (d.readyState === 'complete') { l(); }
 }(window, document, 'script'));

app/index.jsx

 import { // eslint-disable-line import/no-extraneous-dependencies,import/no-unresolved
     SmartChart,
-    // Barrier,
-    // TradeStartLine,
-    // TradeEndLine,
     ChartTypes,
@@ -24,2 +21,9 @@ StudyLegend,
 
+if (window.location.host.endsWith('binary.com')) {
+    window._trackJs = { token: '346262e7ffef497d85874322fff3bbf8', application: 'smartcharts' };
+    const s = document.createElement('script');
+    s.src = 'https://cdn.trackjs.com/releases/current/tracker.js';
+    document.body.appendChild(s);
+}
+
 configure({ enforceActions: true });
@@ -71,2 +75,3 @@
         isMobile={CIQ.isMobile}
+        enableRouting
         chartControlsWidgets={renderControls}
@@ -73,0 +78,0 @@ requestAPI={requestAPI}

app/test.jsx

@@ -66,8 +66,8 @@ import { configure } from 'mobx';
     state = {
-        barrierType: undefined,
         highLow: {},
+        draggable: true,
     };
 
     onPriceLineDisableChange = (evt) => {
-        this.setState({ disablePriceLines: evt.target.checked });
+        this.setState({ hidePriceLines: evt.target.checked });
     };
@@ -84,2 +84,6 @@
 
+    onDraggableChange = (evt) => {
+        this.setState({ draggable: evt.target.checked });
+    };
+
     handleBarrierChange = (evt) => {
@@ -96,10 +100,12 @@ this.setState({ highLow: evt });
     render() {
-        const { barrierType, highLow : { high, low }, disablePriceLines, relative } = this.state;
+        const { barrierType, highLow : { high, low }, hidePriceLines, draggable, relative } = this.state;
         const barriers = barrierType ? [{
             shade: barrierType,
-            onBarrierChange: this.handleBarrierChange,
+            shadeColor: 'red',
+            color: '#f44336',
+            onChange: this.handleBarrierChange,
             relative,
-            // draggable: false,
+            draggable,
             lineStyle: 'dotted',
-            hidePriceLines: disablePriceLines,
+            hidePriceLines,
             high,
@@ -137,4 +143,5 @@ low,
                         <b>high:</b> <input id="high" type="number" value={high === undefined ? '' : high} onChange={this.onHighLowChange} />;
-                        No PriceLine: <input type="checkbox" onChange={this.onPriceLineDisableChange} />
-                        Relative: <input type="checkbox" onChange={this.onRelativeChange} />
+                        No PriceLine: <input type="checkbox" checked={hidePriceLines === undefined ? '' : hidePriceLines} onChange={this.onPriceLineDisableChange} />
+                        Relative: <input type="checkbox" checked={relative === undefined ? '' : relative} onChange={this.onRelativeChange} />
+                        Draggable: <input type="checkbox" checked={draggable === undefined ? '' : draggable} onChange={this.onDraggableChange} />
                     </label>
@@ -141,0 +148,0 @@ </div>

package.json

 {
   "name": "@binary-com/smartcharts",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "main": "dist/smartcharts.js",
@@ -99,2 +99,3 @@ "author": "[e-mail]",
     "event-emitter-es6": "^1.1.5",
+    "lodash.debounce": "^4.0.8",
     "perfect-scrollbar": "^1.3.0",
@@ -101,0 +102,0 @@ "prop-types": "^15.6.0",

README.md

@@ -96,2 +96,3 @@ # SmartCharts
 barriers | Draw chart barriers. Refer to [Barriers API](#barriers-api) for usage details
+enableRouting | Enable routing for dialogs. Defaults to `false`
 
@@ -107,3 +108,3 @@ #### Barriers API
         shade:'above',
-        disablePriceLines: false, // default false
+        hidePriceLines: false, // default false
         onChange:console.warn.bind(console),
@@ -114,7 +115,10 @@ }]}
 
+Attributes marked with `*` are **mandatory**:
+
 | Attribute | Description |
 --------|--------------
-color | Barrier shade color
+shadeColor | Barrier shade color; choose between `green` and `red`. Defaults to `green`.
+color | Price line color. Defaults to `#000`.
 shade | Shade type; choose between `NONE_SINGLE`, `NONE_DOUBLE`, `ABOVE`, `BELOW`, `OUTSIDE` or `BETWEEN`. Defaults to `NONE_SINGLE`.
-disablePriceLines | hide/show the price lines. Defaults to `false`.
+hidePriceLines | hide/show the price lines. Defaults to `false`.
 lineStyle | Sets the style of the price lines; choose between `dotted`, `dashed`, or `solid`. Defaults to `dashed`.
@@ -124,6 +128,34 @@ onChange | When price of high or low barrier changes (including when switched toggling `relative` or setting `high\|low`), `onChange` will pass the high and low barriers as `{ high, low }`.
 draggable | Toggles whether users can drag the price lines and change the barrier directly from the chart. Defaults to `true`.
-high | Sets the price of the high barrier.
-low | Sets the price of the low barrier.
+high* | Sets the price of the high barrier.
+low* | Sets the price of the low barrier.
 
+#### Marker API
 
+Markers provide a way for developers to place DOM elements inside the chart that are positioned based on date, values or tick location. Unlike [CharIQ's Markers](http://documentation.chartiq.com/tutorial-Markers.html#main), we only allow markers to be placed on the main chart. Also note that this Marker implementation does not factor the width and height of the marker; this is expensive to calculate, so we expect you to offset this in CSS.
+
+```jsx
+<SmartChart>
+    <Marker
+        x={new Date(2018, 5, 20)}
+        yPositioner="none"
+        className="chart-line vertical trade-start-line"
+    >
+        {/* Place marker content here */}
+        <div className="drag-line" />
+        <div className="trade-text">Trade Start</div>
+    </Marker>
+</SmartChart>
+```
+
+| Attribute | Description |
+--------|--------------
+className | Adds custom class name to marker. All markers have class name `stx-marker`.
+x | x position of the chart; depends on `xPositioner`.
+xPositioner | Determines x position. Choose between `date` or `none`. Defaults to `date`.
+y | y position of the chart; depends on `yPositioner`.
+yPositioner | Determines y position. Choose between `value` or `none`. Defaults to `value`.
+
+There are more options for `xPositioner` and `yPositioner` in [ChartIQ docs](http://documentation.chartiq.com/CIQ.Marker.html#main). What we document here is the most common use case.
+
+
 ### Customising Components
@@ -130,0 +162,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

312

increased by11.43%

Worsened metrics

Total package byte prevSize

3351495

decreased by-0.49%

Dependency count

11

increased by10%

Lines of code

18334

decreased by-0.32%

Number of medium supply chain risk alerts

6

increased by20%

Dependency changes

• + Addedlodash.debounce@^4.0.8

• + Addedlodash.debounce@4.0.8(transitive)