react-crypto-chart - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

lib/cjs/index.d.ts

@@ -1,4 +0,4 @@
-import React from "react";
-import { Props } from "./utils/types";
+import React from 'react';
+import { Props } from './utils/types';
 declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

lib/cjs/index.js

@@ -68,3 +68,3 @@ "use strict";
 var TradeViewChart = function (_a) {
-    var _b = _a.pair, pair = _b === void 0 ? "BTCBUSD" : _b, _c = _a.interval, interval = _c === void 0 ? "1m" : _c, _d = _a.candleStickConfig, candleStickConfig = _d === void 0 ? constants_2.condleStickDefaultConfig : _d, _e = _a.histogramConfig, histogramConfig = _e === void 0 ? constants_2.histogramDefaultConfig : _e, _f = _a.chartLayout, chartLayout = _f === void 0 ? constants_2.defaultChartLayout : _f;
+    var _b = _a.pair, pair = _b === void 0 ? 'BTCBUSD' : _b, _c = _a.interval, interval = _c === void 0 ? '1m' : _c, _d = _a.candleStickConfig, candleStickConfig = _d === void 0 ? constants_2.condleStickDefaultConfig : _d, _e = _a.histogramConfig, histogramConfig = _e === void 0 ? constants_2.histogramDefaultConfig : _e, _f = _a.chartLayout, chartLayout = _f === void 0 ? constants_2.defaultChartLayout : _f, containerStyle = _a.containerStyle;
     var _g = (0, react_1.useState)(null), candleStickData = _g[0], setCandleData = _g[1];
@@ -102,4 +102,4 @@ var _h = (0, react_1.useState)(null), updatedata = _h[0], setUpdateData = _h[1];
     }
-    return (react_1.default.createElement(TradeView_1.default, { updatedata: updatedata, initialChartData: candleStickData, candleStickConfig: candleStickConfig, histogramConfig: histogramConfig, chartLayout: chartLayout }));
+    return (react_1.default.createElement(TradeView_1.default, { updatedata: updatedata, initialChartData: candleStickData, candleStickConfig: candleStickConfig, histogramConfig: histogramConfig, chartLayout: chartLayout, containerStyle: containerStyle }));
 };
 exports.default = (0, react_1.memo)(TradeViewChart);

lib/cjs/TradeView.js

@@ -37,4 +37,4 @@ "use strict";
     var initialChartData = _a.initialChartData, _b = _a.updatedata, updatedata = _b === void 0 ? null : _b, _c = _a.candleStickConfig, candleStickConfig = _c === void 0 ? {} : _c, _d = _a.histogramConfig, histogramConfig = _d === void 0 ? {} : _d, _e = _a.chartLayout, chartLayout = _e === void 0 ? {} : _e, _f = _a.containerStyle, containerStyle = _f === void 0 ? {
-        minWidth: '100%',
-        minHeight: '100vh',
+        maxWidth: '100%',
+        maxHeight: '100vh',
         display: 'flex',
@@ -41,0 +41,0 @@ justifyContent: 'center',

lib/cjs/utils/types.d.ts

@@ -56,2 +56,5 @@ import { CrosshairMode, LineStyle } from 'lightweight-charts';
     chartLayout: DeffaultChartLayout;
+    containerStyle?: {
+        [x: string]: any;
+    };
 }
@@ -58,0 +61,0 @@ export interface DeffaultChartLayout {

lib/esm/index.d.ts

@@ -1,4 +0,4 @@
-import React from "react";
-import { Props } from "./utils/types";
+import React from 'react';
+import { Props } from './utils/types';
 declare const _default: React.NamedExoticComponent<Props>;
 export default _default;

lib/esm/index.js

@@ -37,10 +37,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 };
-import React, { memo, useEffect, useCallback, useState } from "react";
-import { fetchCandleStickData } from "./utils/fetchService";
-import TradeView from "./TradeView";
-import { WS_URL } from "./utils/constants";
-import { candleSocketAdaptor } from "./utils/adaptor";
-import { condleStickDefaultConfig, histogramDefaultConfig, defaultChartLayout, } from "./utils/constants";
+import React, { memo, useEffect, useCallback, useState } from 'react';
+import { fetchCandleStickData } from './utils/fetchService';
+import TradeView from './TradeView';
+import { WS_URL } from './utils/constants';
+import { candleSocketAdaptor } from './utils/adaptor';
+import { condleStickDefaultConfig, histogramDefaultConfig, defaultChartLayout, } from './utils/constants';
 var TradeViewChart = function (_a) {
-    var _b = _a.pair, pair = _b === void 0 ? "BTCBUSD" : _b, _c = _a.interval, interval = _c === void 0 ? "1m" : _c, _d = _a.candleStickConfig, candleStickConfig = _d === void 0 ? condleStickDefaultConfig : _d, _e = _a.histogramConfig, histogramConfig = _e === void 0 ? histogramDefaultConfig : _e, _f = _a.chartLayout, chartLayout = _f === void 0 ? defaultChartLayout : _f;
+    var _b = _a.pair, pair = _b === void 0 ? 'BTCBUSD' : _b, _c = _a.interval, interval = _c === void 0 ? '1m' : _c, _d = _a.candleStickConfig, candleStickConfig = _d === void 0 ? condleStickDefaultConfig : _d, _e = _a.histogramConfig, histogramConfig = _e === void 0 ? histogramDefaultConfig : _e, _f = _a.chartLayout, chartLayout = _f === void 0 ? defaultChartLayout : _f, containerStyle = _a.containerStyle;
     var _g = useState(null), candleStickData = _g[0], setCandleData = _g[1];
@@ -78,4 +78,4 @@ var _h = useState(null), updatedata = _h[0], setUpdateData = _h[1];
     }
-    return (React.createElement(TradeView, { updatedata: updatedata, initialChartData: candleStickData, candleStickConfig: candleStickConfig, histogramConfig: histogramConfig, chartLayout: chartLayout }));
+    return (React.createElement(TradeView, { updatedata: updatedata, initialChartData: candleStickData, candleStickConfig: candleStickConfig, histogramConfig: histogramConfig, chartLayout: chartLayout, containerStyle: containerStyle }));
 };
 export default memo(TradeViewChart);

lib/esm/TradeView.js

@@ -16,4 +16,4 @@ var __assign = (this && this.__assign) || function () {
     var initialChartData = _a.initialChartData, _b = _a.updatedata, updatedata = _b === void 0 ? null : _b, _c = _a.candleStickConfig, candleStickConfig = _c === void 0 ? {} : _c, _d = _a.histogramConfig, histogramConfig = _d === void 0 ? {} : _d, _e = _a.chartLayout, chartLayout = _e === void 0 ? {} : _e, _f = _a.containerStyle, containerStyle = _f === void 0 ? {
-        minWidth: '100%',
-        minHeight: '100vh',
+        maxWidth: '100%',
+        maxHeight: '100vh',
         display: 'flex',
@@ -20,0 +20,0 @@ justifyContent: 'center',

lib/esm/utils/types.d.ts

@@ -56,2 +56,5 @@ import { CrosshairMode, LineStyle } from 'lightweight-charts';
     chartLayout: DeffaultChartLayout;
+    containerStyle?: {
+        [x: string]: any;
+    };
 }
@@ -58,0 +61,0 @@ export interface DeffaultChartLayout {

package.json

 {
   "name": "react-crypto-chart",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "crypto chart widget for react using binance api",
@@ -33,4 +33,4 @@ "main": "./lib/cjs/index.js",
   "dependencies": {
-    "lightweight-charts": "^3.3.0"
+    "lightweight-charts": "^3.8.0"
   }
 }

README.md

@@ -12,2 +12,14 @@ # React Crypto Chart
 
+### Example
+
+- Example App:
+
+```
+cd example
+npm install
+npm start
+```
+
+- [Stackblitz example](https://stackblitz.com/edit/react-crypto-chart)
+
 ## How To Install
@@ -28,3 +40,3 @@
 ```javascript
-import TradeViewChart from "react-crypto-chart";
+import TradeViewChart from 'react-crypto-chart';
 
@@ -131,2 +143,17 @@ <TradeViewChart pair="BTCBUSD" />;
   </tr>
+  <tr>
+    <td class="tg-0pky">containerStyle</td>
+    <td class="tg-0pky">No</td>
+    <td class="tg-0pky">Object</td>
+    <td class="tg-0pky">
+    <pre>
+    {
+      maxWidth: '100%',
+      maxHeight: '100vh',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }
+  </pre></td>
+  </tr>
 </tbody>
@@ -133,0 +160,0 @@ </table>

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48296

increased by1.5%

Lines of code

1002

increased by0.6%

Number of lines in readme file

172

increased by18.62%

Number of medium supply chain risk alerts

2

decreased by-33.33%

Dependency changes

• Updatedlightweight-charts@^3.8.0