Enhancements and Bug Fixes
Tables Feature - Added the `create_table` method, which returns a `Table` object. This can be used to display watchlists, order windows, position windows and more. - See the new page on the docs for more information! Bugs - Fixed a bug preventing the named column of a line to not work as a label of the series. - Fixed a bug causing drawings loaded from the minute timeframe to not show on a daily timeframe. - Fixed a bug causing `chart.exit` to not work. - Fixed a bug preventing the chart from being moved after placing a ray. - Fixed the ‘price in hoveringOver’ web console error. Enhancements - The date/time column can also be the `name` of the passed series object. - Added the `label` method to `HorizontalLine`, allowing for the price line label of horizontal lines to be updated. - `None` or an empty DataFrame can now be passed to `line.set` as a means to clear it. - Seperate Chart objects will now run on the same pywebview instance. This means that any Chart objects created after the first will inherit the first Chart’s API. - Reorganized the documentation for clarity.
This commit is contained in:
louisnw
@ -11,7 +11,6 @@ function makeSearchBox(chart) {
|
||||
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.borderRadius = '5px'
|
||||
@ -60,7 +59,7 @@ function makeSearchBox(chart) {
|
||||
else return false
|
||||
}
|
||||
else if (event.key === 'Enter') {
|
||||
chart.callbackFunction(`on_search_~_${chart.id}_~_${sBox.value}`)
|
||||
window.callbackFunction(`on_search_~_${chart.id}_~_${sBox.value}`)
|
||||
searchWindow.style.display = 'none'
|
||||
sBox.value = ''
|
||||
return true
|
||||
@ -145,7 +144,7 @@ function makeSwitcher(chart, items, activeItem, callbackName, activeBackgroundCo
|
||||
element.style.color = items[index] === item ? 'activeColor' : inactiveColor
|
||||
});
|
||||
activeItem = item;
|
||||
chart.callbackFunction(`${callbackName}_~_${chart.id}_~_${item}`);
|
||||
window.callbackFunction(`${callbackName}_~_${chart.id}_~_${item}`);
|
||||
}
|
||||
chart.topBar.appendChild(switcherElement)
|
||||
makeSeperator(chart.topBar)
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
function makeChart(callbackFunction, innerWidth, innerHeight, autoSize=true) {
|
||||
function makeChart(innerWidth, innerHeight, autoSize=true) {
|
||||
let chart = {
|
||||
markers: [],
|
||||
horizontal_lines: [],
|
||||
@ -9,7 +9,6 @@ function makeChart(callbackFunction, innerWidth, innerHeight, autoSize=true) {
|
||||
width: innerWidth,
|
||||
height: innerHeight,
|
||||
},
|
||||
callbackFunction: callbackFunction,
|
||||
candleData: [],
|
||||
commandFunctions: []
|
||||
}
|
||||
@ -64,6 +63,7 @@ function makeChart(callbackFunction, innerWidth, innerHeight, autoSize=true) {
|
||||
chart.wrapper.style.height = `${100*innerHeight}%`
|
||||
chart.wrapper.style.display = 'flex'
|
||||
chart.wrapper.style.flexDirection = 'column'
|
||||
chart.wrapper.style.position = 'relative'
|
||||
|
||||
chart.div.style.position = 'relative'
|
||||
chart.div.style.display = 'flex'
|
||||
@ -119,6 +119,12 @@ if (!window.HorizontalLine) {
|
||||
this.line = this.chart.series.createPriceLine(this.priceLine)
|
||||
}
|
||||
|
||||
updateLabel(text) {
|
||||
this.chart.series.removePriceLine(this.line)
|
||||
this.priceLine.title = text
|
||||
this.line = this.chart.series.createPriceLine(this.priceLine)
|
||||
}
|
||||
|
||||
deleteLine() {
|
||||
this.chart.series.removePriceLine(this.line)
|
||||
this.chart.horizontal_lines.splice(this.chart.horizontal_lines.indexOf(this))
|
||||
|
||||
139
lightweight_charts/js/table.js
Normal file
139
lightweight_charts/js/table.js
Normal file
@ -0,0 +1,139 @@
|
||||
if (!window.Table) {
|
||||
class Table {
|
||||
constructor(width, height, headings, widths, alignments, position, draggable = false, pythonMethod, chart) {
|
||||
this.container = document.createElement('div')
|
||||
this.pythonMethod = pythonMethod
|
||||
this.chart = chart
|
||||
|
||||
if (draggable) {
|
||||
this.container.style.position = 'absolute'
|
||||
this.container.style.cursor = 'move'
|
||||
} else {
|
||||
this.container.style.position = 'relative'
|
||||
this.container.style.float = position
|
||||
}
|
||||
|
||||
this.container.style.zIndex = '2000'
|
||||
this.container.style.width = width <= 1 ? width * 100 + '%' : width + 'px'
|
||||
this.container.style.height = height <= 1 ? height * 100 + '%' : height + 'px'
|
||||
this.container.style.display = 'flex'
|
||||
this.container.style.flexDirection = 'column'
|
||||
this.container.style.justifyContent = 'space-between'
|
||||
|
||||
this.container.style.backgroundColor = 'rgb(45, 45, 45)'
|
||||
this.container.style.borderRadius = '5px'
|
||||
this.container.style.color = 'white'
|
||||
this.container.style.fontSize = '12px'
|
||||
this.container.style.fontVariantNumeric = 'tabular-nums'
|
||||
|
||||
this.table = document.createElement('table')
|
||||
this.table.style.width = '100%'
|
||||
this.table.style.borderCollapse = 'collapse'
|
||||
this.table.style.border = '1px solid rgb(70, 70, 70)';
|
||||
this.rows = {}
|
||||
|
||||
this.headings = headings
|
||||
this.widths = widths.map((width) => `${width * 100}%`)
|
||||
this.alignments = alignments
|
||||
|
||||
let head = this.table.createTHead()
|
||||
let row = head.insertRow()
|
||||
|
||||
for (let i = 0; i < this.headings.length; i++) {
|
||||
let th = document.createElement('th')
|
||||
th.textContent = this.headings[i]
|
||||
th.style.width = this.widths[i]
|
||||
th.style.textAlign = 'center'
|
||||
row.appendChild(th)
|
||||
th.style.border = '1px solid rgb(70, 70, 70)'
|
||||
}
|
||||
|
||||
this.container.appendChild(this.table)
|
||||
document.getElementById('wrapper').appendChild(this.container)
|
||||
|
||||
if (!draggable) return
|
||||
|
||||
let offsetX, offsetY;
|
||||
|
||||
this.onMouseDown = (event) => {
|
||||
offsetX = event.clientX - this.container.offsetLeft;
|
||||
offsetY = event.clientY - this.container.offsetTop;
|
||||
|
||||
document.addEventListener('mousemove', onMouseMove);
|
||||
document.addEventListener('mouseup', onMouseUp);
|
||||
}
|
||||
|
||||
let onMouseMove = (event) => {
|
||||
this.container.style.left = (event.clientX - offsetX) + 'px';
|
||||
this.container.style.top = (event.clientY - offsetY) + 'px';
|
||||
}
|
||||
|
||||
let onMouseUp = () => {
|
||||
// Remove the event listeners for dragging
|
||||
document.removeEventListener('mousemove', onMouseMove);
|
||||
document.removeEventListener('mouseup', onMouseUp);
|
||||
}
|
||||
|
||||
this.container.addEventListener('mousedown', this.onMouseDown);
|
||||
|
||||
|
||||
}
|
||||
|
||||
newRow(vals, id) {
|
||||
let row = this.table.insertRow()
|
||||
row.style.cursor = 'default'
|
||||
|
||||
for (let i = 0; i < vals.length; i++) {
|
||||
row[this.headings[i]] = row.insertCell()
|
||||
row[this.headings[i]].textContent = vals[i]
|
||||
row[this.headings[i]].style.width = this.widths[i];
|
||||
row[this.headings[i]].style.textAlign = this.alignments[i];
|
||||
row[this.headings[i]].style.border = '1px solid rgb(70, 70, 70)'
|
||||
|
||||
}
|
||||
row.addEventListener('mouseover', () => row.style.backgroundColor = 'rgba(60, 60, 60, 0.6)')
|
||||
row.addEventListener('mouseout', () => row.style.backgroundColor = 'transparent')
|
||||
row.addEventListener('mousedown', () => {
|
||||
row.style.backgroundColor = 'rgba(60, 60, 60)'
|
||||
window.callbackFunction(`${this.pythonMethod}_~_${this.chart.id}_~_${id}`)
|
||||
})
|
||||
row.addEventListener('mouseup', () => row.style.backgroundColor = 'rgba(60, 60, 60, 0.6)')
|
||||
|
||||
this.rows[id] = row
|
||||
}
|
||||
|
||||
deleteRow(id) {
|
||||
this.table.deleteRow(this.rows[id].rowIndex)
|
||||
delete this.rows[id]
|
||||
}
|
||||
|
||||
clearRows() {
|
||||
let numRows = Object.keys(this.rows).length
|
||||
for (let i = 0; i < numRows; i++)
|
||||
this.table.deleteRow(-1)
|
||||
this.rows = {}
|
||||
}
|
||||
|
||||
updateCell(rowId, column, val) {
|
||||
this.rows[rowId][column].textContent = val
|
||||
}
|
||||
|
||||
makeFooter(numBoxes) {
|
||||
let footer = document.createElement('div')
|
||||
footer.style.display = 'flex'
|
||||
footer.style.width = '100%'
|
||||
footer.style.padding = '3px 0px'
|
||||
footer.style.backgroundColor = 'rgb(30, 30, 30)'
|
||||
this.container.appendChild(footer)
|
||||
|
||||
this.footer = []
|
||||
for (let i = 0; i < numBoxes; i++) {
|
||||
this.footer.push(document.createElement('div'))
|
||||
footer.appendChild(this.footer[i])
|
||||
this.footer[i].style.flex = '1'
|
||||
this.footer[i].style.textAlign = 'center'
|
||||
}
|
||||
}
|
||||
}
|
||||
window.Table = Table
|
||||
}
|
||||
@ -184,12 +184,12 @@ if (!window.ToolBox) {
|
||||
trendLine.line.setData(data)
|
||||
|
||||
if (logical) {
|
||||
this.chart.chart.applyOptions({handleScroll: true})
|
||||
this.chart.chart.applyOptions({handleScroll: false})
|
||||
setTimeout(() => {
|
||||
this.chart.chart.timeScale().setVisibleLogicalRange(logical)
|
||||
}, 1)
|
||||
setTimeout(() => {
|
||||
this.chart.chart.applyOptions({handleScroll: false})
|
||||
this.chart.chart.applyOptions({handleScroll: true})
|
||||
}, 50)
|
||||
}
|
||||
if (!ray) {
|
||||
@ -309,6 +309,10 @@ if (!window.ToolBox) {
|
||||
document.body.style.cursor = this.chart.cursor
|
||||
hoveringOver = null
|
||||
contextMenu.listen(false)
|
||||
if (!mouseDown) {
|
||||
document.removeEventListener('mousedown', checkForClick)
|
||||
document.removeEventListener('mouseup', checkForRelease)
|
||||
}
|
||||
}
|
||||
})
|
||||
this.chart.chart.subscribeCrosshairMove(hoverOver)
|
||||
@ -327,8 +331,6 @@ if (!window.ToolBox) {
|
||||
|
||||
this.chart.chart.unsubscribeCrosshairMove(hoverOver)
|
||||
|
||||
// let [x, y] = [event.clientX, event.clientY]
|
||||
// if ('topBar' in this.chart) y = y - this.chart.topBar.offsetHeight
|
||||
if ('price' in hoveringOver) {
|
||||
originalPrice = hoveringOver.price
|
||||
this.chart.chart.subscribeCrosshairMove(crosshairHandlerHorz)
|
||||
@ -352,7 +354,7 @@ if (!window.ToolBox) {
|
||||
|
||||
this.chart.chart.applyOptions({handleScroll: true})
|
||||
if (hoveringOver && 'price' in hoveringOver && hoveringOver.id !== 'toolBox') {
|
||||
this.chart.callbackFunction(`on_horizontal_line_move_~_${this.chart.id}_~_${hoveringOver.id};;;${hoveringOver.price.toFixed(8)}`);
|
||||
window.callbackFunction(`on_horizontal_line_move_~_${this.chart.id}_~_${hoveringOver.id};;;${hoveringOver.price.toFixed(8)}`);
|
||||
}
|
||||
hoveringOver = null
|
||||
document.removeEventListener('mousedown', checkForClick)
|
||||
@ -472,6 +474,8 @@ if (!window.ToolBox) {
|
||||
let startDate = dateToChartTime(new Date(Math.round(chartTimeToDate(item.from[0]).getTime() / this.interval) * this.interval), this.interval)
|
||||
let endDate = dateToChartTime(new Date(Math.round(chartTimeToDate(item.to[0]).getTime() / this.interval) * this.interval), this.interval)
|
||||
let data = calculateTrendLine(startDate, item.from[1], endDate, item.to[1], this.interval, this.chart, item.ray)
|
||||
item.from = [data[0].time, data[0].value]
|
||||
item.to = [data[data.length - 1].time, data[data.length-1].value]
|
||||
item.line.setData(data)
|
||||
})
|
||||
//this.chart.chart.timeScale().setVisibleLogicalRange(logical)
|
||||
@ -508,7 +512,7 @@ if (!window.ToolBox) {
|
||||
}
|
||||
return value;
|
||||
});
|
||||
this.chart.callbackFunction(`save_drawings_~_${this.chart.id}_~_${drawingsString}`)
|
||||
window.callbackFunction(`save_drawings_~_${this.chart.id}_~_${drawingsString}`)
|
||||
}
|
||||
|
||||
loadDrawings(drawings) {
|
||||
@ -537,6 +541,8 @@ if (!window.ToolBox) {
|
||||
let startDate = dateToChartTime(new Date(Math.round(chartTimeToDate(item.from[0]).getTime() / this.interval) * this.interval), this.interval)
|
||||
let endDate = dateToChartTime(new Date(Math.round(chartTimeToDate(item.to[0]).getTime() / this.interval) * this.interval), this.interval)
|
||||
let data = calculateTrendLine(startDate, item.from[1], endDate, item.to[1], this.interval, this.chart, item.ray)
|
||||
item.from = [data[0].time, data[0].value]
|
||||
item.to = [data[data.length - 1].time, data[data.length-1].value]
|
||||
item.line.setData(data)
|
||||
}
|
||||
})
|
||||
@ -546,6 +552,5 @@ if (!window.ToolBox) {
|
||||
this.chart.chart.timeScale().setVisibleLogicalRange(logical)
|
||||
}
|
||||
}
|
||||
|
||||
window.ToolBox = ToolBox
|
||||
}
|
||||
Reference in New Issue
Block a user