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
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
|
||||
}
|
||||
Reference in New Issue
Block a user