440 lines
12 KiB
HTML
440 lines
12 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.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">
|
|
|
|
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();
|
|
|
|
if (urlParams.enabledStudies) {
|
|
ChartApiInstance.setEnabledStudiesList(JSON.parse(urlParams.enabledStudies));
|
|
}
|
|
|
|
|
|
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: false,
|
|
muteSessionErrors: true,
|
|
timezone: urlParams.timezone,
|
|
defSymbol: urlParams.symbol || 'MSF',
|
|
defInterval: urlParams.interval || 'D'
|
|
}
|
|
});
|
|
|
|
|
|
chartWidget = chartWidgetCollection.activeChartWidget.value();
|
|
pro = new TradingView.Pro();
|
|
|
|
headerWidget = new TradingView.ChartHeaderWidgetRestricted({
|
|
chartWidgetCollection: chartWidgetCollection,
|
|
headerChartPanel: headerChartPanel,
|
|
hideStudyTemplates: true,
|
|
});
|
|
|
|
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');
|
|
;
|
|
|
|
function showAndHideLogo(data) {
|
|
if (data.method == 'series_completed') {
|
|
chartWidget.model().mainSeries().onDataLoaded().unsubscribe(this, showAndHideLogo);
|
|
setTimeout(function() {
|
|
$('.onchart-tv-logo').addClass('expanded');
|
|
}, 0.5 * 1000);
|
|
setTimeout(function() {
|
|
var $logo = $('.onchart-tv-logo');
|
|
if ($logo.is(':not(:hover)')) {
|
|
$logo.removeClass('expanded');
|
|
}
|
|
}, 20 * 1000);
|
|
}
|
|
}
|
|
|
|
chartWidget.model().mainSeries().onDataLoaded().subscribe(this, showAndHideLogo);
|
|
};
|
|
|
|
}
|
|
|
|
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'));
|
|
|
|
|
|
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.lineToolPropertiesToolbar = new TradingView.LineToolPropertiesWidget(chartWidgetCollection);
|
|
$('.tv-main-panel').css('margin-left', sidetoolbar.element().width() + 'px');
|
|
|
|
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;
|
|
}
|
|
});
|
|
|
|
|
|
if (!urlParams.saveimage) {
|
|
$('<a class="tv-button getimage"><i class="icon"> </i></a>')
|
|
.click(function(e){
|
|
getImage(chartWidgetCollection);
|
|
e.preventDefault();
|
|
})
|
|
.appendTo(headerChartPanel.find('.right'));
|
|
}
|
|
|
|
ChartSaverInstance = new ChartSaver(chartWidgetCollection);
|
|
|
|
pm = TradingView.postMessageWrapper(window.parent);
|
|
|
|
(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();
|
|
});
|
|
|
|
|
|
pm.on('widgetReady', function(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('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('loadChart', function(content) {
|
|
reloadChart(content);
|
|
});
|
|
|
|
|
|
pm.on('saveChart', function() {
|
|
var savedData = ChartSaverInstance.saveToJSON();
|
|
pm.post(window.parent, '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': 'LineToolArrowMarkUp',
|
|
'arrow_down': 'LineToolArrowMarkDown',
|
|
'flag': 'LineToolFlagMark'
|
|
};
|
|
|
|
var toolName = tools[data.options.shape];
|
|
|
|
if (typeof toolName == "undefined") {
|
|
toolName = tools['flag'];
|
|
}
|
|
|
|
if (toolName != tools['flag'] && !!data.options.text) {
|
|
properties = new DefaultProperty("linetoolarrowmark");
|
|
properties.text.setValue(data.options.text);
|
|
}
|
|
|
|
var tool = chartWidget.model().createLineTool(pane, point, toolName, properties);
|
|
|
|
if (!!data.options.lock && data.options.lock) {
|
|
tool.setUserEditEnabled(false);
|
|
}
|
|
|
|
// TODO: assign onClick handler here
|
|
|
|
pm.post(window.parent, '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
|
|
};
|
|
|
|
pm.post(window.parent, 'onSymbolChange', result);
|
|
});
|
|
|
|
|
|
ChartApiInstance.on('realtime_tick', function(tick) {
|
|
pm.post(window.parent, 'onTick', tick);
|
|
});
|
|
|
|
ChartApiInstance.on('onAutoSaveNeeded', function(tick) {
|
|
pm.post(window.parent, 'onAutoSaveNeeded', tick);
|
|
});
|
|
|
|
|
|
})();
|
|
};
|
|
|
|
|
|
</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> |