470 lines
13 KiB
HTML
470 lines
13 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=100" />
|
|
|
|
<link href="css/site.compiled.css" rel="stylesheet" type="text/css" />
|
|
<link href="chart-client/css/chartclient_full.compiled.css" rel="stylesheet" type="text/css" />
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/widget.css" />
|
|
|
|
|
|
</head>
|
|
<body class="chart-page on-widget">
|
|
<div class="loading-indicator">
|
|
<img src="images/loading.gif" alt=""/>
|
|
</div>
|
|
<div id="library-container" class="chart-page">
|
|
<div class="tv-side-toolbar"></div>
|
|
<div class="tv-side-panel"></div>
|
|
<div class="tv-main-panel">
|
|
<div class="header-chart-panel">
|
|
<div class="right"></div>
|
|
<div class="left"></div>
|
|
</div>
|
|
<div id="chart-area"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var JSServer = {};
|
|
</script>
|
|
|
|
|
|
<script type="text/javascript" src="tv-chart.min.js"></script>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
pm = TradingView.postMessageWrapper(window.parent);
|
|
pm.__delayedMesssages = [];
|
|
|
|
pm.on('widgetReady', function(data, cb) {
|
|
pm.__delayedMesssages.push({
|
|
data: data,
|
|
cb: cb
|
|
});
|
|
});
|
|
|
|
|
|
function postMessageToParent(event, data) {
|
|
if (window && window.parent) {
|
|
pm.post(window.parent, event, data);
|
|
}
|
|
}
|
|
|
|
|
|
function createChart() {
|
|
|
|
if (!Modernizr.canvas || !Modernizr.canvastext) {
|
|
|
|
// TODO: emit an error message
|
|
window.location = '/badbrowser/';
|
|
}
|
|
|
|
is_authenticated = false;
|
|
|
|
headerChartPanel = $('.header-chart-panel');
|
|
widgetContainer = $('#library-container');
|
|
tvHeader = $(".tv-header");
|
|
footer = $("#footer-chart-panel");
|
|
|
|
ChartApiInstance = new JSServer.ChartApi(urlParams.datafeedUID);
|
|
|
|
if (urlParams.enabledStudies) {
|
|
ChartApiInstance.setEnabledStudiesList(JSON.parse(urlParams.enabledStudies));
|
|
}
|
|
if (urlParams.disabledStudies) {
|
|
ChartApiInstance.setDisabledStudiesList(JSON.parse(urlParams.disabledStudies));
|
|
}
|
|
|
|
TVSettings.moveFromLocalStorage();
|
|
|
|
__defaultsOverrides = JSON.parse(urlParams.overrides);
|
|
|
|
var savedContent = !!window.parent.__TVSavedChart
|
|
? window.parent.__TVSavedChart
|
|
: undefined;
|
|
|
|
delete window.parent.__TVSavedChart;
|
|
|
|
|
|
chartWidgetCollection = new TradingView.ChartWidgetCollection({
|
|
jqParent: $('#chart-area'),
|
|
onResize: function ($container){
|
|
var containerHeight = $(document.body).height() - 2;
|
|
widgetContainer.height(containerHeight);
|
|
var h = containerHeight - headerChartPanel.outerHeight() - tvHeader.outerHeight() - (footer.length ? footer.outerHeight() : 0);
|
|
h = Math.max(50, h);
|
|
$container.height(h);
|
|
},
|
|
padding: 5,
|
|
edge: 5,
|
|
content: savedContent,
|
|
widgetOptions: {
|
|
hideIdeas: true,
|
|
controlBar: true,
|
|
addVolume: true,
|
|
handleSessionErrors: true,
|
|
muteSessionErrors: true,
|
|
timezone: urlParams.timezone,
|
|
defSymbol: urlParams.symbol,
|
|
defInterval: urlParams.interval || 'D',
|
|
hideSymbolSearch: urlParams.hideSymbolSearch
|
|
}
|
|
});
|
|
|
|
|
|
chartWidget = chartWidgetCollection.activeChartWidget.value();
|
|
pro = new TradingView.Pro();
|
|
|
|
headerWidget = new TradingView.ChartHeaderWidgetRestricted({
|
|
chartWidgetCollection: chartWidgetCollection,
|
|
headerChartPanel: headerChartPanel,
|
|
hideStudyTemplates: true,
|
|
hideSymbolSearch: urlParams.hideSymbolSearch
|
|
});
|
|
|
|
TradingView.Linking.bindToChartWidgetCollection(chartWidgetCollection);
|
|
|
|
var createLogo = function() {};
|
|
if (urlParams.logo) {
|
|
|
|
createLogo = function () {
|
|
$('.onchart-custom-logo').remove();
|
|
|
|
var filename = (/\.png$/.test(urlParams.logo))
|
|
? urlParams.logo
|
|
: urlParams.logo + '.png'
|
|
;
|
|
var $logo = $(
|
|
'<a href="https://www.tradingview.com/" class="onchart-tv-logo" target="_blank">' +
|
|
'<img src="images/widget-logo/' + filename + '" class="custom-image">' +
|
|
'</a>'
|
|
).appendTo('.chart-widget');
|
|
|
|
var $img = $logo.find('img');
|
|
|
|
var additionLogoParams = ['left','bottom','width','height'];
|
|
for (var i = additionLogoParams.length - 1; i >= 0; i--) {
|
|
var param = additionLogoParams[i];
|
|
var paramWithPrefix = 'logo_' + param;
|
|
if (urlParams[paramWithPrefix]) {
|
|
if (param === 'left' || param === 'bottom') {
|
|
$logo.css(param, urlParams[paramWithPrefix]);
|
|
} else {
|
|
$img.css(param, urlParams[paramWithPrefix]);
|
|
}
|
|
}
|
|
};
|
|
}
|
|
} else {
|
|
|
|
createLogo = function () {
|
|
$('.onchart-tv-logo').remove();
|
|
var colorClass = urlParams.theme ? urlParams.theme.toLowerCase() : ''; // black, white, blue, grey
|
|
var $logo = $('<div class="onchart-tv-logo wrapper ' + colorClass + '">'+
|
|
'<div class="wrapper">'+
|
|
'<a class="inner" href="https://www.tradingview.com/" target="_blank">'+
|
|
|
|
'<img class="solid" src="images/logo-widget-copyright.png" alt="TradingView Logo">'+
|
|
'<img class="faded" src="images/logo-widget-copyright-faded.png" alt="TradingView Logo">'+
|
|
|
|
'<span class="text">'+
|
|
'charts by '+
|
|
'<span class="logo-highlighted">TradingView</span>'+
|
|
'</span>'+
|
|
'</a>'+
|
|
'</div>'+
|
|
'</div>')
|
|
.on('mouseenter', function() { $(this).addClass('expanded') })
|
|
.on('mouseleave', function() { $(this).removeClass('expanded') })
|
|
.appendTo('.chart-widget');
|
|
};
|
|
|
|
}
|
|
|
|
if (urlParams.disableLogo == "false") {
|
|
chartWidget.withModel(null, createLogo);
|
|
}
|
|
|
|
TradingView.tokenInitialized.resolve();
|
|
|
|
window.studyTemplates = new TradingView.StudyTemplates({chartWidgetCollection: chartWidgetCollection});
|
|
ChartApiInstance.start();
|
|
|
|
headerChartPanel.css('background-color', '#'+(urlParams.toolbarbg || 'F1F3F6'));
|
|
$("#footer-chart-panel").css('background-color', '#'+(urlParams.toolbarbg || 'F1F3F6'));
|
|
|
|
var sidetoolbar = new TradingView.ChartSideToolbarWidget({
|
|
container: $('.tv-side-toolbar'),
|
|
chartWidgetCollection: chartWidgetCollection,
|
|
onWidget: true,
|
|
enabledDrawings: urlParams.enabledDrawings ? JSON.parse(urlParams.enabledDrawings ) : [],
|
|
disabledDrawings: urlParams.disabledDrawings ? JSON.parse(urlParams.disabledDrawings ) : []
|
|
});
|
|
window.sideToolbar = sidetoolbar;
|
|
|
|
if (urlParams.hideSideToolbar == "true") {
|
|
sidetoolbar.fold(true);
|
|
}
|
|
|
|
window.lineToolPropertiesToolbar = new TradingView.LineToolPropertiesWidget(chartWidgetCollection);
|
|
|
|
chartWidget.onDisconnected().subscribe(null, function(critical_error) {
|
|
if (critical_error) {
|
|
showCriticalErrorMessage();
|
|
return;
|
|
}
|
|
});
|
|
|
|
$('.tv-content').bind('contextmenu', function(e) {
|
|
var $originalTarget = $(e.originalEvent.target);
|
|
if (!$originalTarget.is('input') && !$originalTarget.is('textarea')) {
|
|
return false;
|
|
}
|
|
});
|
|
|
|
|
|
$('<a class="tv-button getimage"><i class="icon"> </i></a>')
|
|
.click(function(e){
|
|
getImage(chartWidgetCollection, { snapshotUrl: urlParams.snapshotUrl });
|
|
e.preventDefault();
|
|
})
|
|
.appendTo(headerChartPanel.find('.right'));
|
|
|
|
ChartSaverInstance = new ChartSaver(chartWidgetCollection);
|
|
|
|
|
|
(function() {
|
|
|
|
pm.on('symbolInfo', function (data, callback) {
|
|
var symbolInfo = chartWidget.model().mainSeries().symbolInfo(),
|
|
interval = chartWidget.model().mainSeries().properties().interval.value(),
|
|
result = {
|
|
name: symbolInfo.name,
|
|
exchange: symbolInfo.exchange,
|
|
description: symbolInfo.description,
|
|
type: symbolInfo.type,
|
|
interval: interval
|
|
};
|
|
callback(result);
|
|
});
|
|
|
|
|
|
pm.on('initializationFinished', function() {
|
|
TradingView.UndoHistory.clearStack();
|
|
});
|
|
|
|
|
|
function onChartReadySubscriptionCalled(data, cb) {
|
|
chartWidget.withModel(null, function () {
|
|
if (chartWidget.model().mainSeries().bars().size() > 0) {
|
|
cb();
|
|
} else {
|
|
var eventHandler = function() {
|
|
cb();
|
|
chartWidget.model().mainSeries().onBarReceived().unsubscribe(null, eventHandler);
|
|
};
|
|
chartWidget.model().mainSeries().onBarReceived().subscribe(null, eventHandler);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
pm.on('widgetReady', function(data, cb) {
|
|
onChartReadySubscriptionCalled(data, cb);
|
|
});
|
|
|
|
for (var i=0; i < pm.__delayedMesssages.length; ++i) {
|
|
onChartReadySubscriptionCalled(pm.__delayedMesssages[i].data, pm.__delayedMesssages[i].cb);
|
|
}
|
|
|
|
|
|
pm.on('createStudy', function(options) {
|
|
var metainfo = StudyMetaInfo.findStudyMetaInfoByDescription(chartWidget.model().studiesMetaData(), options.name);
|
|
var study = chartWidget.model().insertStudy(metainfo, {}, false);
|
|
|
|
if (!!options.lock && options.lock) {
|
|
study.setUserEditEnabled(false);
|
|
}
|
|
});
|
|
|
|
|
|
pm.on('saveChart', function() {
|
|
var savedData = ChartSaverInstance.saveToJSON();
|
|
postMessageToParent('onChartSaved', JSON.parse(savedData.content));
|
|
});
|
|
|
|
|
|
pm.on('changeSymbol', function(data) {
|
|
TradingView.Linking.symbol.setValue(data.symbol);
|
|
TradingView.Linking.interval.setValue(data.interval);
|
|
});
|
|
|
|
|
|
pm.on('removeIcon', function(iconUID) {
|
|
;
|
|
});
|
|
|
|
pm.on('createShape', function(data) {
|
|
var barIndex = chartWidget.model().timeScale().timePointToIndex(data.point.time);
|
|
var point = { index: barIndex };
|
|
|
|
if (!!data.point.price) {
|
|
point.price = data.point.price;
|
|
}
|
|
else {
|
|
var indexes = ['open', 'high', 'low', 'close'];
|
|
|
|
var indexOffset = !!data.point.channel
|
|
? indexes.indexOf(data.point.channel) + 1
|
|
: 1;
|
|
|
|
if (indexOffset <= 0) {
|
|
indexOffset = 1;
|
|
}
|
|
|
|
point.price = chartWidget.model().mainSeries().data().valueAt(barIndex)[indexOffset];
|
|
}
|
|
|
|
var pane = chartWidget._paneWidgets[0]._state;
|
|
var properties = undefined;
|
|
|
|
var tools = {
|
|
'arrow_up': {
|
|
name: 'LineToolArrowMarkUp',
|
|
supportsText: true
|
|
},
|
|
'arrow_down': {
|
|
name: 'LineToolArrowMarkDown',
|
|
supportsText: true
|
|
},
|
|
'flag': {
|
|
name: 'LineToolFlagMark',
|
|
supportsText: false
|
|
},
|
|
'vertical_line': {
|
|
name: 'LineToolVertLine',
|
|
supportsText: false
|
|
}
|
|
};
|
|
|
|
var toolDescriptor = tools[data.options.shape] || tools['flag'];
|
|
|
|
// BEWARE: this code works with arrows only because of `linetoolarrowmark` property name. needs to be fixed.
|
|
if (toolDescriptor.supportsText && !!data.options.text) {
|
|
properties = new DefaultProperty("linetoolarrowmark");
|
|
properties.text.setValue(data.options.text);
|
|
}
|
|
|
|
var tool = chartWidget.model().createLineTool(pane, point, toolDescriptor.name, properties);
|
|
|
|
if (!!data.options.lock && data.options.lock) {
|
|
tool.setUserEditEnabled(false);
|
|
}
|
|
|
|
// TODO: assign onClick handler here
|
|
|
|
postMessageToParent('onIconCreated', "<icon_uid_here>");
|
|
});
|
|
})();
|
|
|
|
|
|
chartWidget.model().mainSeries().onSymbolResolved().subscribe(null, function() {
|
|
var symbolInfo = chartWidget.model().mainSeries().symbolInfo(),
|
|
interval = chartWidget.model().mainSeries().properties().interval.value(),
|
|
result = {
|
|
name: symbolInfo.name,
|
|
exchange: symbolInfo.exchange,
|
|
description: symbolInfo.description,
|
|
type: symbolInfo.type,
|
|
interval: interval
|
|
};
|
|
|
|
postMessageToParent('onSymbolChange', result);
|
|
});
|
|
|
|
TradingView.Linking.interval.subscribe(function(interval){
|
|
postMessageToParent('onIntervalChange', interval)
|
|
});
|
|
|
|
ChartApiInstance.on('realtime_tick', function(tick) {
|
|
postMessageToParent('onTick', tick);
|
|
});
|
|
|
|
ChartApiInstance.on('onAutoSaveNeeded', function() {
|
|
postMessageToParent('onAutoSaveNeeded');
|
|
});
|
|
|
|
GlobalEventsStorage.subscribe("onMarkClick", function(markID) {
|
|
postMessageToParent('onMarkClick', markID);
|
|
});
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- =============================================================================================== -->
|
|
<!-- =============================================================================================== -->
|
|
<!-- =============================================================================================== -->
|
|
|
|
<script type="text/javascript">
|
|
|
|
urlParams = (function () {
|
|
var match,
|
|
pl = /\+/g, // Regex for replacing addition symbol with a space
|
|
search = /([^&=]+)=?([^&]*)/g,
|
|
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
|
|
query = window.location.search.substring(1),
|
|
result = {};
|
|
|
|
while (match = search.exec(query)) {
|
|
result[decode(match[1])] = decode(match[2]);
|
|
}
|
|
return result;
|
|
})();
|
|
|
|
|
|
$(window).load(function(){
|
|
$(window).resize();
|
|
$('.loading-indicator').hide();
|
|
});
|
|
|
|
$(function() {
|
|
var options = {
|
|
lng: urlParams.locale,
|
|
load: 'unspecific',
|
|
resGetPath: "localization/translations/__lng__.json",
|
|
// debug: true,
|
|
keyseparator: "@",
|
|
nsseparator: "@",
|
|
fallbackLng: "en"
|
|
};
|
|
|
|
$.i18n.init(options, function(t) {
|
|
$("html").i18n();
|
|
createChart();
|
|
|
|
$(window).resize();
|
|
});
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
<!-- =============================================================================================== -->
|
|
<!-- =============================================================================================== -->
|
|
<!-- =============================================================================================== -->
|
|
|
|
|
|
|
|
</body>
|
|
</html>
|