Ensure files are read with UTF-8 Encoding
This commit is contained in:
@ -12,7 +12,7 @@ from lightweight_charts.util import LINE_STYLE, MARKER_POSITION, MARKER_SHAPE, C
|
||||
JS = {}
|
||||
current_dir = os.path.dirname(os.path.abspath(__file__))
|
||||
for file in ('pkg', 'funcs', 'callback'):
|
||||
with open(os.path.join(current_dir, 'js', f'{file}.js'), 'r') as f:
|
||||
with open(os.path.join(current_dir, 'js', f'{file}.js'), 'r', encoding='utf-8') as f:
|
||||
JS[file] = f.read()
|
||||
|
||||
HTML = f"""
|
||||
@ -674,6 +674,8 @@ class LWC(SeriesCommon):
|
||||
{f"{self.id}.legend.style.fontSize = {font_size}" if font_size else ''}
|
||||
{f"{self.id}.legend.style.fontFamily = '{font_family}'" if font_family else ''}
|
||||
|
||||
legendItemFormat = (num) => num.toFixed(2).toString().padStart(8, ' ')
|
||||
|
||||
{self.id}.chart.subscribeCrosshairMove((param) => {{
|
||||
if (param.time){{
|
||||
let data = param.seriesData.get({self.id}.series);
|
||||
|
||||
@ -8,38 +8,23 @@ function makeSearchBox(chart, callbackFunction) {
|
||||
searchWindow.style.margin = 'auto'
|
||||
searchWindow.style.width = '150px'
|
||||
searchWindow.style.height = '30px'
|
||||
searchWindow.style.padding = '10px'
|
||||
searchWindow.style.padding = '5px'
|
||||
searchWindow.style.zIndex = '1000'
|
||||
searchWindow.style.alignItems = 'center'
|
||||
searchWindow.style.alignItems = 'center'
|
||||
searchWindow.style.backgroundColor = 'rgba(30, 30, 30, 0.9)'
|
||||
searchWindow.style.border = '2px solid #3C434C'
|
||||
searchWindow.style.zIndex = '1000'
|
||||
searchWindow.style.display = 'none'
|
||||
searchWindow.style.borderRadius = '5px'
|
||||
searchWindow.style.display = 'none'
|
||||
|
||||
let magnifyingGlass = document.createElement('span');
|
||||
magnifyingGlass.style.display = 'inline-block';
|
||||
magnifyingGlass.style.width = '12px';
|
||||
magnifyingGlass.style.height = '12px';
|
||||
magnifyingGlass.style.border = '2px solid rgb(240, 240, 240)';
|
||||
magnifyingGlass.style.borderRadius = '50%';
|
||||
magnifyingGlass.style.position = 'relative';
|
||||
let handle = document.createElement('span');
|
||||
handle.style.display = 'block';
|
||||
handle.style.width = '7px';
|
||||
handle.style.height = '2px';
|
||||
handle.style.backgroundColor = 'rgb(240, 240, 240)';
|
||||
handle.style.position = 'absolute';
|
||||
handle.style.top = 'calc(50% + 7px)';
|
||||
handle.style.right = 'calc(50% - 11px)';
|
||||
handle.style.transform = 'rotate(45deg)';
|
||||
let magnifyingGlass = document.createElement('div');
|
||||
magnifyingGlass.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><path style="fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke:lightgray;stroke-opacity:1;stroke-miterlimit:4;" d="M 15 15 L 21 21 M 10 17 C 6.132812 17 3 13.867188 3 10 C 3 6.132812 6.132812 3 10 3 C 13.867188 3 17 6.132812 17 10 C 17 13.867188 13.867188 17 10 17 Z M 10 17 "/></svg>`
|
||||
|
||||
let sBox = document.createElement('input');
|
||||
sBox.type = 'text';
|
||||
sBox.style.position = 'relative';
|
||||
sBox.style.display = 'inline-block';
|
||||
sBox.style.zIndex = '1000';
|
||||
sBox.style.textAlign = 'center'
|
||||
sBox.style.width = '100px'
|
||||
sBox.style.marginLeft = '15px'
|
||||
sBox.style.marginLeft = '10px'
|
||||
sBox.style.backgroundColor = 'rgba(0, 122, 255, 0.3)'
|
||||
sBox.style.color = 'rgb(240,240,240)'
|
||||
sBox.style.fontSize = '20px'
|
||||
@ -48,7 +33,6 @@ function makeSearchBox(chart, callbackFunction) {
|
||||
sBox.style.borderRadius = '2px'
|
||||
|
||||
searchWindow.appendChild(magnifyingGlass)
|
||||
magnifyingGlass.appendChild(handle)
|
||||
searchWindow.appendChild(sBox)
|
||||
chart.div.appendChild(searchWindow);
|
||||
|
||||
@ -84,7 +68,7 @@ function makeSearchBox(chart, callbackFunction) {
|
||||
}
|
||||
if (searchWindow.style.display === 'none') {
|
||||
if (/^[a-zA-Z0-9]$/.test(event.key)) {
|
||||
searchWindow.style.display = 'block';
|
||||
searchWindow.style.display = 'flex';
|
||||
sBox.focus();
|
||||
}
|
||||
}
|
||||
@ -117,12 +101,12 @@ function makeSpinner(chart) {
|
||||
chart.spinner.style.position = 'absolute'
|
||||
chart.spinner.style.top = '50%'
|
||||
chart.spinner.style.left = '50%'
|
||||
chart.spinner.style.zIndex = 1000
|
||||
chart.spinner.style.zIndex = '1000'
|
||||
chart.spinner.style.transform = 'translate(-50%, -50%)'
|
||||
chart.spinner.style.display = 'none'
|
||||
chart.wrapper.appendChild(chart.spinner)
|
||||
let rotation = 0;
|
||||
const speed = 10; // Adjust this value to change the animation speed
|
||||
const speed = 10;
|
||||
function animateSpinner() {
|
||||
rotation += speed
|
||||
chart.spinner.style.transform = `translate(-50%, -50%) rotate(${rotation}deg)`
|
||||
@ -130,6 +114,7 @@ function makeSpinner(chart) {
|
||||
}
|
||||
animateSpinner();
|
||||
}
|
||||
|
||||
function makeSwitcher(chart, items, activeItem, callbackFunction, callbackName, activeBackgroundColor, activeColor, inactiveColor, hoverColor) {
|
||||
let switcherElement = document.createElement('div');
|
||||
switcherElement.style.margin = '4px 14px'
|
||||
@ -180,7 +165,6 @@ function makeSwitcher(chart, items, activeItem, callbackFunction, callbackName,
|
||||
function makeTextBoxWidget(chart, text) {
|
||||
let textBox = document.createElement('div')
|
||||
textBox.style.margin = '0px 18px'
|
||||
textBox.style.position = 'relative'
|
||||
textBox.style.fontSize = '16px'
|
||||
textBox.style.color = 'rgb(220, 220, 220)'
|
||||
textBox.innerText = text
|
||||
@ -188,6 +172,7 @@ function makeTextBoxWidget(chart, text) {
|
||||
makeSeperator(chart.topBar)
|
||||
return textBox
|
||||
}
|
||||
|
||||
function makeTopBar(chart) {
|
||||
chart.topBar = document.createElement('div')
|
||||
chart.topBar.style.backgroundColor = '#191B1E'
|
||||
@ -199,10 +184,8 @@ function makeTopBar(chart) {
|
||||
|
||||
function makeSeperator(topBar) {
|
||||
let seperator = document.createElement('div')
|
||||
seperator.style.width = '1px'
|
||||
seperator.style.height = '20px'
|
||||
seperator.style.backgroundColor = '#3C434C'
|
||||
topBar.appendChild(seperator)
|
||||
seperator.style.width = '1px'
|
||||
seperator.style.height = '20px'
|
||||
seperator.style.backgroundColor = '#3C434C'
|
||||
topBar.appendChild(seperator)
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -58,7 +58,7 @@ function makeChart(innerWidth, innerHeight, autoSize=true) {
|
||||
scaleMargins: {top: 0.8, bottom: 0},
|
||||
});
|
||||
chart.legend.style.position = 'absolute'
|
||||
chart.legend.style.zIndex = 1000
|
||||
chart.legend.style.zIndex = '1000'
|
||||
chart.legend.style.width = `${(chart.scale.width*100)-8}vw`
|
||||
chart.legend.style.top = '10px'
|
||||
chart.legend.style.left = '10px'
|
||||
@ -78,14 +78,11 @@ function makeChart(innerWidth, innerHeight, autoSize=true) {
|
||||
chart.wrapper.appendChild(chart.div)
|
||||
document.getElementById('wrapper').append(chart.wrapper)
|
||||
|
||||
if (!autoSize) {
|
||||
return chart
|
||||
}
|
||||
if (!autoSize) return chart
|
||||
|
||||
let topBarOffset = 0
|
||||
window.addEventListener('resize', function() {
|
||||
if ('topBar' in chart) {
|
||||
topBarOffset = chart.topBar.offsetHeight
|
||||
}
|
||||
if ('topBar' in chart) topBarOffset = chart.topBar.offsetHeight
|
||||
chart.chart.resize(window.innerWidth*innerWidth, (window.innerHeight*innerHeight)-topBarOffset)
|
||||
});
|
||||
return chart
|
||||
@ -106,61 +103,39 @@ function makeHorizontalLine(chart, lineId, price, color, width, style, axisLabel
|
||||
};
|
||||
chart.horizontal_lines.push(line)
|
||||
}
|
||||
function legendItemFormat(num) {
|
||||
return num.toFixed(2).toString().padStart(8, ' ')
|
||||
}
|
||||
function syncCrosshairs(childChart, parentChart) {
|
||||
function crosshairHandler (e, thisChart, otherChart, otherHandler) {
|
||||
thisChart.applyOptions({crosshair: { horzLine: {
|
||||
visible: true,
|
||||
labelVisible: true,
|
||||
}}})
|
||||
otherChart.applyOptions({crosshair: { horzLine: {
|
||||
visible: false,
|
||||
labelVisible: false,
|
||||
}}})
|
||||
|
||||
otherChart.unsubscribeCrosshairMove(otherHandler)
|
||||
if (e.time !== undefined) {
|
||||
let xx = otherChart.timeScale().timeToCoordinate(e.time);
|
||||
otherChart.setCrosshairXY(xx,300,true);
|
||||
} else if (e.point !== undefined){
|
||||
otherChart.setCrosshairXY(e.point.x,300,false);
|
||||
}
|
||||
otherChart.subscribeCrosshairMove(otherHandler)
|
||||
}
|
||||
let parent = 0
|
||||
let child = 0
|
||||
|
||||
let parentCrosshairHandler = (e) => {
|
||||
parent ++
|
||||
if (parent < 10) {
|
||||
return
|
||||
}
|
||||
if (parent < 10) return
|
||||
child = 0
|
||||
parentChart.applyOptions({crosshair: { horzLine: {
|
||||
visible: true,
|
||||
labelVisible: true,
|
||||
}}})
|
||||
childChart.applyOptions({crosshair: { horzLine: {
|
||||
visible: false,
|
||||
labelVisible: false,
|
||||
}}})
|
||||
|
||||
childChart.unsubscribeCrosshairMove(childCrosshairHandler)
|
||||
if (e.time !== undefined) {
|
||||
let xx = childChart.timeScale().timeToCoordinate(e.time);
|
||||
childChart.setCrosshairXY(xx,300,true);
|
||||
} else if (e.point !== undefined){
|
||||
childChart.setCrosshairXY(e.point.x,300,false);
|
||||
}
|
||||
childChart.subscribeCrosshairMove(childCrosshairHandler)
|
||||
crosshairHandler(e, parentChart, childChart, childCrosshairHandler)
|
||||
}
|
||||
|
||||
let childCrosshairHandler = (e) => {
|
||||
child ++
|
||||
if (child < 10) {
|
||||
return
|
||||
}
|
||||
if (child < 10) return
|
||||
parent = 0
|
||||
childChart.applyOptions({crosshair: {horzLine: {
|
||||
visible: true,
|
||||
labelVisible: true,
|
||||
}}})
|
||||
parentChart.applyOptions({crosshair: {horzLine: {
|
||||
visible: false,
|
||||
labelVisible: false,
|
||||
}}})
|
||||
|
||||
parentChart.unsubscribeCrosshairMove(parentCrosshairHandler)
|
||||
if (e.time !== undefined) {
|
||||
let xx = parentChart.timeScale().timeToCoordinate(e.time);
|
||||
parentChart.setCrosshairXY(xx,300,true);
|
||||
} else if (e.point !== undefined){
|
||||
parentChart.setCrosshairXY(e.point.x,300,false);
|
||||
}
|
||||
parentChart.subscribeCrosshairMove(parentCrosshairHandler)
|
||||
crosshairHandler(e, childChart, parentChart, parentCrosshairHandler)
|
||||
}
|
||||
parentChart.subscribeCrosshairMove(parentCrosshairHandler)
|
||||
childChart.subscribeCrosshairMove(childCrosshairHandler)
|
||||
|
||||
@ -322,7 +322,7 @@ class PolygonChart(Chart):
|
||||
{self.id}.search.box.style.backgroundColor = 'rgba(91, 98, 246, 0.5)'
|
||||
{self.id}.spinner.style.borderTop = '4px solid rgba(91, 98, 246, 0.8)'
|
||||
|
||||
{self.id}.search.window.style.display = "block"
|
||||
{self.id}.search.window.style.display = "flex"
|
||||
{self.id}.search.box.focus()
|
||||
|
||||
//let polyLogo = document.createElement('div')
|
||||
|
||||
Reference in New Issue
Block a user