@orbis-systems/orbis-chart-react
Advanced tools
Comparing version 0.0.2 to 0.0.3
@@ -1,1 +0,76 @@ | ||
import t from"react";class e extends t.Component{constructor(){super(...arguments),this.containerId="orbis-chart-container-"+Math.random(),this.componentDidMount=()=>{this.appendScript(this.initWidget)},this.componentDidUpdate=()=>{this.cleanupWidget(),this.initWidget()},this.canUseDOM=()=>!("undefined"==typeof window||!window.document||!window.document.createElement),this.appendScript=t=>{var e;if(!this.canUseDOM())return void t();let i=document.getElementById("orbis-chart-script");if(null===i)i=document.createElement("script"),i.id="orbis-chart-script",i.type="text/javascript",i.async=!0,i.src=null!==(e=this.props.apiUrl)&&void 0!==e?e:"https://charts.orbis.dev/js/chart.js",i.onload=t,document.getElementsByTagName("head")[0].appendChild(i);else{if("undefined"==typeof TradingView){const e=i.onload;return void(i.onload=i=>{null==e||e.call(document,i),t()})}t()}},this.initWidget=()=>{if("undefined"==typeof TradingView||!document.getElementById(this.containerId))return;const{libPath:t="https://charts.orbis.dev/api/",quoteType:e="delayed",updateInterval:i=2e3,chartConfig:n}=this.props;new TradingView.widget(Object.assign(Object.assign({locale:"en",interval:"D",autosize:!0},n),{container_id:this.containerId,datafeed:new OrbisDatafeed(t,i,e)}))},this.cleanupWidget=()=>{if(!this.canUseDOM())return;const t=document.getElementById(this.containerId);t&&(t.innerHTML="")},this.getStyle=()=>{var t;return(null===(t=this.props.chartConfig)||void 0===t?void 0:t.autosize)?{width:"100%",height:"100%"}:{}},this.render=()=>t.createElement("div",{id:this.containerId,style:this.getStyle()})}}export default e; | ||
import React from 'react'; | ||
const SCRIPT_ID = 'orbis-chart-script'; | ||
const CONTAINER_ID = 'orbis-chart-container'; | ||
class OrbisChart extends React.Component { | ||
constructor() { | ||
super(...arguments); | ||
this.containerId = `${CONTAINER_ID}-${Math.random()}`; | ||
this.componentDidMount = () => { | ||
this.appendScript(this.initWidget); | ||
}; | ||
this.componentDidUpdate = () => { | ||
this.cleanupWidget(); | ||
this.initWidget(); | ||
}; | ||
this.canUseDOM = () => !!(typeof window !== 'undefined' && | ||
window.document && | ||
window.document.createElement); | ||
this.appendScript = (callback) => { | ||
var _a; | ||
if (!this.canUseDOM()) { | ||
callback(); | ||
return; | ||
} | ||
let script = document.getElementById(SCRIPT_ID); | ||
if (script !== null) { | ||
if (typeof TradingView === 'undefined') { | ||
const oldOnload = script.onload; | ||
script.onload = (event) => { | ||
oldOnload === null || oldOnload === void 0 ? void 0 : oldOnload.call(document, event); | ||
callback(); | ||
}; | ||
return; | ||
} | ||
callback(); | ||
return; | ||
} | ||
script = document.createElement('script'); | ||
script.id = SCRIPT_ID; | ||
script.type = 'text/javascript'; | ||
script.async = true; | ||
script.src = (_a = this.props.apiUrl) !== null && _a !== void 0 ? _a : 'https://charts.orbis.dev/js/chart.js'; | ||
script.onload = callback; | ||
document.getElementsByTagName('head')[0].appendChild(script); | ||
}; | ||
this.initWidget = () => { | ||
if (typeof TradingView === 'undefined' || !document.getElementById(this.containerId)) { | ||
return; | ||
} | ||
const { libPath = 'https://charts.orbis.dev/api/', quoteType = 'delayed', updateInterval = 2000, chartConfig, } = this.props; | ||
new TradingView.widget(Object.assign(Object.assign({ locale: 'en', interval: 'D', autosize: true }, chartConfig), { container_id: this.containerId, datafeed: new OrbisDatafeed(libPath, updateInterval, quoteType), library_path: 'charting/' })); | ||
}; | ||
this.cleanupWidget = () => { | ||
if (!this.canUseDOM()) { | ||
return; | ||
} | ||
const chartContainer = document.getElementById(this.containerId); | ||
if (chartContainer) { | ||
chartContainer.innerHTML = ''; | ||
} | ||
}; | ||
this.getStyle = () => { | ||
var _a; | ||
if (!((_a = this.props.chartConfig) === null || _a === void 0 ? void 0 : _a.autosize)) { | ||
return {}; | ||
} | ||
return { | ||
width: '100%', | ||
height: '100%' | ||
}; | ||
}; | ||
this.render = () => React.createElement("div", { id: this.containerId, style: this.getStyle() }); | ||
} | ||
} | ||
export default OrbisChart; |
@@ -8,3 +8,5 @@ import React from 'react'; | ||
updateInterval?: number; | ||
chartConfig: Partial<TradingTerminalWidgetOptions>; | ||
chartConfig: Partial<TradingTerminalWidgetOptions> & { | ||
symbol: string; | ||
}; | ||
}; | ||
@@ -11,0 +13,0 @@ declare class OrbisChart extends React.Component<Props> { |
{ | ||
"name": "@orbis-systems/orbis-chart-react", | ||
"version": "0.0.2", | ||
"version": "0.0.3", | ||
"description": "", | ||
@@ -15,3 +15,3 @@ "main": "dist/index.js", | ||
"clean": "rimraf ./dist && mkdir dist", | ||
"storybook": "start-storybook -p 6006", | ||
"storybook": "start-storybook -p 6006 -s ./public", | ||
"build-storybook": "build-storybook" | ||
@@ -18,0 +18,0 @@ }, |
61201
1640