dwker/lightweight-charts-python
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactoring/Enhancements/Fixes

Browse Source 
Breaking Changes:
- Removed the `api` parameter; callbacks no longer need to be in a specific class.
- Topbar callbacks now take a chart as an argument (see updated callback examples)
- Removed the `topbar` parameter from chart declaration. The Topbar will be automatically created upon declaration of a topbar widget.
- Removed the `searchbox` parameter from charts. It will be created upon subscribing to it in `chart.events`.
- Removed `dynamic_loading`.
- Removed ‘volume_enabled’ parameter. Volume will be enabled if the volumn column is present in the dataframe.
- Widgets’ `func` parameter is now declared last.
- Switchers take a tuple of options rather than a variable number of arguments.
- `add_hotkey` renamed to `hotkey`
- Horizontal lines now take a `func` argument rather than `interactive`. This event will emit the Line object that was moved.
- Removed the `name` parameter from `line.set`. Line object names are now declared upon creation.

Enhancements:
- Added the `button` widget to the Topbar.
- Added the color picker to the drawing context menu.
- Charts now have a `candle_data` method, which returns the current data displayed on the chart as a DataFrame.
- Fixed callbacks are now located in the `chart.events` object:
    - search (e.g `chart.events.search += on_search`)
    - new_bar
    - range_change
- Added volume to the legend
- Drawings can now be accessed through `chart.toolbox.drawings`
- added the `style` and `name` parameters to `create_line`

Bug Fixes:
- Fixed a bug causing new charts not to load after `exit` was called.
- Refactored rayline placement to ensure they do not move the visible range.
- Fixed a bug causing the visible range to shift when trendlines are moved past the final candlestick.
- Fixed a bug preventing trendlines and raylines on irregular timeframes.
- Fixed a bug causing the legend to prevent mouse input into the chart.
This commit is contained in:
louisnw
2023-08-14 16:06:16 +01:00
parent 06b605d3a7
commit 34ce3f7199
22 changed files with 1024 additions and 784 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
README.md
View File

@ -21,16 +21,14 @@ pip install lightweight-charts
___
## Features
1. Simple and easy to use.
2. Blocking or non-blocking GUI.
3. Streamlined for live data, with methods for updating directly from tick data.
4. Multi-Pane Charts using the [`SubChart`](https://lightweight-charts-python.readthedocs.io/en/latest/common_methods.html#create-subchart-subchart).
5. The Toolbox, allowing for trendlines, rays and horizontal lines to be drawn directly onto charts.
6. [Callbacks](https://lightweight-charts-python.readthedocs.io/en/latest/callbacks.html) allowing for timeframe (1min, 5min, 30min etc.) selectors, searching, hotkeys, and more.
7. Tables for watchlists, order entry, and trade management.
7. Direct integration of market data through [Polygon.io's](https://polygon.io/?utm_source=affiliate&utm_campaign=pythonlwcharts) market data API.
1. Streamlined for live data, with methods for updating directly from tick data.
2. Multi-pane charts using [Subcharts](https://lightweight-charts-python.readthedocs.io/en/latest/common_methods.html#create-subchart-subchart).
3. The [Toolbox](https://lightweight-charts-python.readthedocs.io/en/latest/toolbox.html), allowing for trendlines, rays and horizontal lines to be drawn directly onto charts.
4. [Callbacks](https://lightweight-charts-python.readthedocs.io/en/latest/callbacks.html) allowing for timeframe selectors (1min, 5min, 30min etc.), searching, hotkeys, and more.
5. [Tables](https://lightweight-charts-python.readthedocs.io/en/latest/tables.html) for watchlists, order entry, and trade management.
6. Direct integration of market data through [Polygon.io's](https://polygon.io/?utm_source=affiliate&utm_campaign=pythonlwcharts) market data API.
__Supports:__ Jupyter Notebooks, PyQt, wxPython, Streamlit, and asyncio.
__Supports:__ Jupyter Notebooks, PyQt5, PySide6, wxPython, Streamlit, and asyncio.
PartTimeLarry: [Interactive Brokers API and TradingView Charts in Python](https://www.youtube.com/watch?v=TlhDI3PforA)
___
@ -46,7 +44,7 @@ if __name__ == '__main__':
chart = Chart()
# Columns: | time | open | high | low | close | volume (if volume is enabled) |
# Columns: time | open | high | low | close | volume
df = pd.read_csv('ohlcv.csv')
chart.set(df)
@ -102,10 +100,10 @@ if __name__ == '__main__':
df1 = pd.read_csv('ohlc.csv')
# Columns: | time | price | volume (if volume is enabled) |
# Columns: time | price
df2 = pd.read_csv('ticks.csv')
chart = Chart(volume_enabled=False)
chart = Chart()
chart.set(df1)
@ -114,7 +112,7 @@ if __name__ == '__main__':
for i, tick in df2.iterrows():
chart.update_from_tick(tick)
sleep(0.3)
sleep(0.03)
```
![tick data gif](https://raw.githubusercontent.com/louisnw01/lightweight-charts-python/main/examples/3_tick_data/tick_data.gif)
@ -127,15 +125,11 @@ import pandas as pd
from lightweight_charts import Chart
def calculate_sma(data: pd.DataFrame, period: int = 50):
def avg(d: pd.DataFrame):
return d['close'].mean()
result = []
for i in range(period - 1, len(data)):
val = avg(data.iloc[i - period + 1:i])
result.append({'time': data.iloc[i]['date'], f'SMA {period}': val})
return pd.DataFrame(result)
def calculate_sma(df, period: int = 50):
return pd.DataFrame({
'time': df['date'],
f'SMA {period}': df['close'].rolling(window=period).mean()
}).dropna()
if __name__ == '__main__':
@ -145,9 +139,9 @@ if __name__ == '__main__':
df = pd.read_csv('ohlcv.csv')
chart.set(df)
line = chart.create_line()
line = chart.create_line('SMA 50')
sma_data = calculate_sma(df, period=50)
line.set(sma_data, name='SMA 50')
line.set(sma_data)
chart.show(block=True)
@ -164,7 +158,7 @@ from lightweight_charts import Chart
if __name__ == '__main__':
chart = Chart(debug=True)
chart = Chart()
df = pd.read_csv('ohlcv.csv')
@ -203,43 +197,42 @@ def get_bar_data(symbol, timeframe):
if symbol not in ('AAPL', 'GOOGL', 'TSLA'):
print(f'No data for "{symbol}"')
return pd.DataFrame()
return pd.read_csv(f'../examples/6_callbacks/bar_data/{symbol}_{timeframe}.csv')
return pd.read_csv(f'bar_data/{symbol}_{timeframe}.csv')
class API:
def __init__(self):
self.chart = None # Changes after each callback.
def on_search(self, searched_string): # Called when the user searches.
new_data = get_bar_data(searched_string, self.chart.topbar['timeframe'].value)
def on_search(chart, searched_string): # Called when the user searches.
new_data = get_bar_data(searched_string, chart.topbar['timeframe'].value)
if new_data.empty:
return
self.chart.topbar['symbol'].set(searched_string)
self.chart.set(new_data)
chart.topbar['symbol'].set(searched_string)
chart.set(new_data)
def on_timeframe_selection(self): # Called when the user changes the timeframe.
new_data = get_bar_data(self.chart.topbar['symbol'].value, self.chart.topbar['timeframe'].value)
def on_timeframe_selection(chart): # Called when the user changes the timeframe.
new_data = get_bar_data(chart.topbar['symbol'].value, chart.topbar['timeframe'].value)
if new_data.empty:
return
self.chart.set(new_data, True)
chart.set(new_data, True)
def on_horizontal_line_move(self, line_id, price):
print(f'Horizontal line moved to: {price}')
def on_horizontal_line_move(chart, line):
print(f'Horizontal line moved to: {line.price}')
if __name__ == '__main__':
api = API()
chart = Chart(api=api, topbar=True, searchbox=True, toolbox=True)
chart = Chart(toolbox=True)
chart.legend(True)
chart.events.search += on_search
chart.topbar.textbox('symbol', 'TSLA')
chart.topbar.switcher('timeframe', api.on_timeframe_selection, '1min', '5min', '30min', default='5min')
chart.topbar.switcher('timeframe', ('1min', '5min', '30min'), default='5min',
func=on_timeframe_selection)
df = get_bar_data('TSLA', '5min')
chart.set(df)
chart.horizontal_line(200, interactive=True)
chart.horizontal_line(200, func=on_horizontal_line_move)
chart.show(block=True)

124
docs/source/callbacks.md
View File

@ -1,74 +1,92 @@
# Callbacks
# Events
The `Chart` object allows for asynchronous and synchronous callbacks to be passed back to python, allowing for more sophisticated chart layouts including searching, timeframe selectors text boxes, and hotkeys using the `add_hotkey` method.
`QtChart`and `WxChart` can also use callbacks.
A variety of the parameters below should be passed to the Chart upon decaration.
* `api`: The class object that the fixed callbacks will always be emitted to.
* `topbar`: Adds a [TopBar](#topbar) to the `Chart` or `SubChart` and allows use of the `create_switcher` method.
* `searchbox`: Adds a search box onto the `Chart` or `SubChart` that is activated by typing.
Events allow asynchronous and synchronous callbacks to be passed back into python.
___
## How to use Callbacks
## `chart.events`
Fixed Callbacks are emitted to the class given as the `api` parameter shown above.
`events.search` `->` `chart` | `string`: Fires upon searching. Searchbox will be automatically created.
`events.new_bar` `->` `chart`: Fires when a new candlestick is added to the chart.
`events.range_change` `->` `chart` | `bars_before` | `bars_after`: Fires when the range (visibleLogicalRange) changes.
Chart events can be subscribed to using: `chart.events.<name> += <callable>`
___
## How to use Events
Take a look at this minimal example:
```python
class API:
def __init__(self):
self.chart = None
from lightweight_charts import Chart
def on_search(chart, string):
print(f'Search Text: "{string}" | Chart/SubChart ID: "{chart.id}"')
if __name__ == '__main__':
chart = Chart()
chart.events.search += on_search
chart.show(block=True)
def on_search(self, string):
print(f'Search Text: "{string}" | Chart/SubChart ID: "{self.chart.id}"')
```
Upon searching in a pane, the expected output would be akin to:
```
Search Text: "AAPL" | Chart/SubChart ID: "window.blyjagcr"
```
The ID shown above will change depending upon which pane was used to search, due to the instance of `self.chart` dynamically updating to the latest pane which triggered the callback.
`self.chart` will update upon each callback, allowing for access to the specific pane in question.
The ID shown above will change depending upon which pane was used to search, allowing for access to the object in question.
```{important}
* When using `show` rather than `show_async`, block should be set to `True` (`chart.show(block=True)`).
* `API` class methods can be either coroutines or normal methods.
* Non fixed callbacks (switchers, hotkeys) can be methods, coroutines, or regular functions.
* Event callables can be either coroutines, methods, or functions.
```
There are certain callbacks which are always emitted to a specifically named method of API:
* Search callbacks: `on_search`
* Interactive Horizontal Line callbacks: `on_horizontal_line_move`
___
## `TopBar`
The `TopBar` class represents the top bar shown on the chart when using callbacks:
The `TopBar` class represents the top bar shown on the chart:
![topbar](https://i.imgur.com/Qu2FW9Y.png)
This class is accessed from the `topbar` attribute of the chart object (`chart.topbar.<method>`), after setting the topbar parameter to `True` upon declaration of the chart.
This object is accessed from the `topbar` attribute of the chart object (`chart.topbar.<method>`).
Switchers and text boxes can be created within the top bar, and their instances can be accessed through the `topbar` dictionary. For example:
Switchers, text boxes and buttons can be added to the top bar, and their instances can be accessed through the `topbar` dictionary. For example:
```python
chart = Chart(api=api, topbar=True)
chart.topbar.textbox('symbol', 'AAPL') # Declares a textbox displaying 'AAPL'.
print(chart.topbar['symbol'].value) # Prints the value within ('AAPL')
chart.topbar['symbol'].set('MSFT') # Sets the 'symbol' textbox to 'MSFT'
print(chart.topbar['symbol'].value) # Prints the value again ('MSFT')
```
Events can also be emitted from the topbar. For example:
```python
from lightweight_charts import Chart
def on_button_press(chart):
new_button_value = 'On' if chart.topbar['my_button'].value == 'Off' else 'Off'
chart.topbar['my_button'].set(new_button_value)
print(f'Turned something {new_button_value.lower()}.')
if __name__ == '__main__':
chart = Chart()
chart.topbar.button('my_button', 'Off', func=on_button_press)
chart.show(block=True)
```
___
### `switcher`
`name: str` | `method: function` | `*options: str` | `default: str`
`name: str` | `options: tuple` | `default: str` | `func: callable`
* `name`: the name of the switcher which can be used to access it from the `topbar` dictionary.
* `method`: The function from the `api` class given to the constructor that will receive the callback.
* `options`: The strings to be displayed within the switcher. This may be a variety of timeframes, security types, or whatever needs to be updated directly from the chart.
* `options`: The options for each switcher item.
* `default`: The initial switcher option set.
___
@ -79,6 +97,15 @@ ___
* `initial_text`: The text to show within the text box.
___
### `button`
`name: str` | `button_text: str` | `separator: bool` | `func: callable`
* `name`: the name of the text box to access it from the `topbar` dictionary.
* `button_text`: Text to show within the button.
* `separator`: places a separator line to the right of the button.
* `func`: The event handler which will be executed upon a button click.
___
## Callbacks Example:
```python
@ -93,40 +120,37 @@ def get_bar_data(symbol, timeframe):
return pd.read_csv(f'../examples/6_callbacks/bar_data/{symbol}_{timeframe}.csv')
class API:
def __init__(self):
self.chart = None # Changes after each callback.
def on_search(self, searched_string): # Called when the user searches.
new_data = get_bar_data(searched_string, self.chart.topbar['timeframe'].value)
def on_search(chart, searched_string):
new_data = get_bar_data(searched_string, chart.topbar['timeframe'].value)
if new_data.empty:
return
self.chart.topbar['symbol'].set(searched_string)
self.chart.set(new_data)
chart.topbar['symbol'].set(searched_string)
chart.set(new_data)
def on_timeframe_selection(self): # Called when the user changes the timeframe.
new_data = get_bar_data(self.chart.topbar['symbol'].value, self.chart.topbar['timeframe'].value)
def on_timeframe_selection(chart):
new_data = get_bar_data(chart.topbar['symbol'].value, chart.topbar['timeframe'].value)
if new_data.empty:
return
self.chart.set(new_data, True)
chart.set(new_data, True)
def on_horizontal_line_move(self, line_id, price):
print(f'Horizontal line moved to: {price}')
def on_horizontal_line_move(chart, line):
print(f'Horizontal line moved to: {line.price}')
if __name__ == '__main__':
api = API()
chart = Chart(api=api, topbar=True, searchbox=True, toolbox=True)
chart = Chart(toolbox=True)
chart.legend(True)
chart.topbar.textbox('symbol', 'TSLA')
chart.topbar.switcher('timeframe', api.on_timeframe_selection, '1min', '5min', '30min', default='5min')
chart.topbar.switcher('timeframe', ('1min', '5min', '30min'), default='5min',
func=on_timeframe_selection)
df = get_bar_data('TSLA', '5min')
chart.set(df)
chart.horizontal_line(200, interactive=True)
chart.horizontal_line(200, func=on_horizontal_line_move)
chart.show(block=True)
```

18
docs/source/charts.md
View File

@ -5,8 +5,7 @@ This page contains a reference to all chart objects that can be used within the
___
## Chart
`volume_enabled: bool` | `width: int` | `height: int` | `x: int` | `y: int` | `on_top: bool` | `maximize: bool` | `debug: bool` |
`api: object` | `topbar: bool` | `searchbox: bool` | `toolbox: bool`
`width: int` | `height: int` | `x: int` | `y: int` | `on_top: bool` | `maximize: bool` | `debug: bool` | `toolbox: bool`
The main object used for the normal functionality of lightweight-charts-python, built on the pywebview library.
@ -61,11 +60,13 @@ This method should be called after the chart window has loaded.
___
## QtChart
`widget: QWidget` | `volume_enabled: bool`
`widget: QWidget`
The `QtChart` object allows the use of charts within a `QMainWindow` object, and has similar functionality to the `Chart` and `ChartAsync` objects for manipulating data, configuring and styling.
The `QtChart` object allows the use of charts within a `QMainWindow` object, and has similar functionality to the `Chart` object for manipulating data, configuring and styling.
Callbacks can be recieved through the Qt event loop.
Either the `PyQt5` or `PySide6` libraries will work with this chart.
Callbacks can be received through the Qt event loop.
___
### `get_webview`
@ -107,11 +108,11 @@ app.exec_()
___
## WxChart
`parent: wx.Panel` | `volume_enabled: bool`
`parent: wx.Panel`
The WxChart object allows the use of charts within a `wx.Frame` object, and has similar functionality to the `Chart` and `ChartAsync` objects for manipulating data, configuring and styling.
The WxChart object allows the use of charts within a `wx.Frame` object, and has similar functionality to the `Chart` object for manipulating data, configuring and styling.
Callbacks can be recieved through the Wx event loop.
Callbacks can be received through the Wx event loop.
___
### `get_webview`
@ -157,7 +158,6 @@ if __name__ == '__main__':
___
## StreamlitChart
`parent: wx.Panel` | `volume_enabled: bool`
The `StreamlitChart` object allows the use of charts within a Streamlit app, and has similar functionality to the `Chart` object for manipulating data, configuring and styling.

34
docs/source/common_methods.md
View File

@ -43,32 +43,30 @@ If `cumulative_volume` is used, the volume data given will be added onto the lat
___
## `create_line` (Line)
`color: str` | `width: int` | `price_line: bool` | `price_label: bool` | `-> Line`
`name: str` | `color: str` | `style: LINE_STYLE`| `width: int` | `price_line: bool` | `price_label: bool` | `-> Line`
Creates and returns a `Line` object, representing a `LineSeries` object in Lightweight Charts and can be used to create indicators. As well as the methods described below, the `Line` object also has access to:
[`title`](#title), [`marker`](#marker), [`horizontal_line`](#horizontal-line) [`hide_data`](#hide-data), [`show_data`](#show-data) and[`price_line`](#price-line).
Its instance should only be accessed from this method.
### `set`
`data: pd.DataFrame` `name: str`
`data: pd.DataFrame`
Sets the data for the line.
When not using the `name` parameter, the columns should be named: `time | value` (Not case sensitive).
When a name has not been set upon declaration, the columns should be named: `time | value` (Not case sensitive).
Otherwise, the method will use the column named after the string given in `name`. This name will also be used within the legend of the chart. For example:
```python
line = chart.create_line()
line = chart.create_line('SMA 50')
# DataFrame with columns: date | SMA 50
df = pd.read_csv('sma50.csv')
line.set(df, name='SMA 50')
line.set(df)
```
### `update`
`series: pd.Series`
@ -76,7 +74,6 @@ Updates the data for the line.
This should be given as a Series object, with labels akin to the `line.set()` function.
### `delete`
Irreversibly deletes the line.
@ -263,8 +260,8 @@ ___
Shows the hidden candles on the chart.
___
## `add_hotkey`
`modifier: 'ctrl'/'shift'/'alt'/'meta'` | `key: str/int/tuple` | `method: object`
## `hotkey`
`modifier: 'ctrl'/'shift'/'alt'/'meta'` | `key: str/int/tuple` | `func: callable`
Adds a global hotkey to the chart window, which will execute the method or function given.
@ -279,20 +276,23 @@ def place_sell_order(key):
print(f'Sell all shares, because I pressed {key}.')
chart.add_hotkey('shift', (1, 2, 3), place_buy_order)
chart.add_hotkey('shift', 'X', place_sell_order)
if __name__ == '__main__':
chart = Chart()
chart.hotkey('shift', (1, 2, 3), place_buy_order)
chart.hotkey('shift', 'X', place_sell_order)
chart.show(block=True)
```
___
## `create_table`
`width: int/float` | `height: int/float` | `headings: tuple[str]` | `widths: tuple[float]` | `alignments: tuple[str]` | `position: 'left'/'right'/'top'/'bottom'` | `draggable: bool` | `method: object`
`width: int/float` | `height: int/float` | `headings: tuple[str]` | `widths: tuple[float]` | `alignments: tuple[str]` | `position: 'left'/'right'/'top'/'bottom'` | `draggable: bool` | `func: callable` | `-> Table`
Creates and returns a [`Table`](https://lightweight-charts-python.readthedocs.io/en/latest/tables.html) object.
___
## `create_subchart` (SubChart)
`volume_enabled: bool` | `position: 'left'/'right'/'top'/'bottom'`, `width: float` | `height: float` | `sync: bool/str` | `-> SubChart`
`position: 'left'/'right'/'top'/'bottom'`, `width: float` | `height: float` | `sync: bool/str` | `scale_candles_only: bool`|`toolbox: bool` | `-> SubChart`
Creates and returns a `SubChart` object, placing it adjacent to the previous `Chart` or `SubChart`. This allows for the use of multiple chart panels within the same `Chart` window. Its instance should only be accessed by using this method.
@ -335,7 +335,6 @@ if __name__ == '__main__':
```
### Synced Line Chart Example:
```python
@ -346,17 +345,16 @@ if __name__ == '__main__':
chart = Chart(inner_width=1, inner_height=0.8)
chart.time_scale(visible=False)
chart2 = chart.create_subchart(width=1, height=0.2, sync=True, volume_enabled=False)
chart2 = chart.create_subchart(width=1, height=0.2, sync=True)
line = chart2.create_line()
df = pd.read_csv('ohlcv.csv')
df2 = pd.read_csv('rsi.csv')
chart.set(df)
line = chart2.create_line()
line.set(df2)
chart.show(block=True)
```

2
docs/source/conf.py
View File

@ -1,7 +1,7 @@
project = 'lightweight-charts-python'
copyright = '2023, louisnw'
author = 'louisnw'
release = '1.0.15'
release = '1.0.16'
extensions = ["myst_parser"]

28
docs/source/tables.md
View File

@ -1,11 +1,9 @@
# Table
`width: int/float` | `height: int/float` | `headings: tuple[str]` | `widths: tuple[float]` | `alignments: tuple[str]` | `position: 'left'/'right'/'top'/'bottom'` | `draggable: bool` | `method: object`
`width: int/float` | `height: int/float` | `headings: tuple[str]` | `widths: tuple[float]` | `alignments: tuple[str]` | `position: 'left'/'right'/'top'/'bottom'` | `draggable: bool` | `func: callable`
Tables are panes that can be used to gain further functionality from charts. They are intended to be used for watchlists, order management, or position management. It should be accessed from the `create_table` common method.
The `Table` and `Row` objects inherit from dictionaries, and can be manipulated as such.
The `Table` and `Row` objects act as dictionaries, and can be manipulated as such.
`width`/`height`: Either given as a percentage (a `float` between 0 and 1) or as an integer representing pixel size.
@ -15,7 +13,7 @@ The `Table` and `Row` objects inherit from dictionaries, and can be manipulated
`draggable`: If `True`, then the window can be dragged to any position within the window.
`method`: If given this will be called when a row is clicked.
`func`: If given this will be called when a row is clicked, returning the `Row` object in question.
___
## `new_row` (Row)
@ -25,11 +23,22 @@ Creates a new row within the table, and returns a `Row` object.
if `id` is passed it should be unique to all other rows. Otherwise, the `id` will be randomly generated.
Rows can be passed a string (header) item or a tuple to set multiple headings:
```python
row['Symbol'] = 'AAPL'
row['Symbol', 'Action'] = 'AAPL', 'BUY'
```
### `background_color`
`column: str` | `color: str`
Sets the background color of the Row cell at the given column.
Sets the background color of the row cell.
### `text_color`
`column: str` | `color: str`
Sets the foreground color of the row cell.
### `delete`
Deletes the row.
@ -77,10 +86,7 @@ ___
import pandas as pd
from lightweight_charts import Chart
def on_row_click(row_id):
row = table.get(row_id)
print(row)
def on_row_click(row):
row['PL'] = round(row['PL']+1, 2)
row.background_color('PL', 'green' if row['PL'] > 0 else 'red')
@ -97,7 +103,7 @@ if __name__ == '__main__':
headings=('Ticker', 'Quantity', 'Status', '%', 'PL'),
widths=(0.2, 0.1, 0.2, 0.2, 0.3),
alignments=('center', 'center', 'right', 'right', 'right'),
position='left', method=on_row_click)
position='left', func=on_row_click)
table.format('PL', f'£ {table.VALUE}')
table.format('%', f'{table.VALUE} %')

36
docs/source/toolbox.md
View File

@ -3,15 +3,15 @@ The Toolbox allows for trendlines, ray lines and horizontal lines to be drawn an
It can be used within any Chart object, and is enabled by setting the `toolbox` parameter to `True` upon Chart declaration.
The Toolbox should only be accessed from the `toolbox` attribute of the chart object. (`chart.toolbox.<method>`)
The following hotkeys can also be used when the Toolbox is enabled:
* Alt+T: Trendline
* Alt+H: Horizontal Line
* Alt+R: Ray Line
* Meta+Z or Ctrl+Z: Undo
Drawings can also be deleted by right-clicking on them, which brings up a context menu.
Right-clicking on a drawing will open a context menu, allowing for color selection and deletion.
___
## `save_drawings_under`
@ -58,33 +58,29 @@ def get_bar_data(symbol, timeframe):
return pd.read_csv(f'bar_data/{symbol}_{timeframe}.csv')
class API:
def __init__(self):
self.chart: Chart = None
def on_search(self, searched_string):
new_data = get_bar_data(searched_string, self.chart.topbar['timeframe'].value)
def on_search(chart, searched_string):
new_data = get_bar_data(searched_string, chart.topbar['timeframe'].value)
if new_data.empty:
return
self.chart.topbar['symbol'].set(searched_string)
self.chart.set(new_data)
self.chart.toolbox.load_drawings(searched_string) # Loads the drawings saved under the symbol.
chart.topbar['symbol'].set(searched_string)
chart.set(new_data)
chart.toolbox.load_drawings(searched_string) # Loads the drawings saved under the symbol.
def on_timeframe_selection(self):
new_data = get_bar_data(self.chart.topbar['symbol'].value, self.chart.topbar['timeframe'].value)
def on_timeframe_selection(chart):
new_data = get_bar_data(chart.topbar['symbol'].value, chart.topbar['timeframe'].value)
if new_data.empty:
return
self.chart.set(new_data, render_drawings=True) # The symbol has not changed, so we want to re-render the drawings.
chart.set(new_data, render_drawings=True) # The symbol has not changed, so we want to re-render the drawings.
if __name__ == '__main__':
api = API()
chart = Chart(api=api, topbar=True, searchbox=True, toolbox=True)
chart = Chart(toolbox=True)
chart.legend(True)
chart.events.search += on_search
chart.topbar.textbox('symbol', 'TSLA')
chart.topbar.switcher('timeframe', api.on_timeframe_selection, '1min', '5min', '30min', default='5min')
chart.topbar.switcher('timeframe', ('1min', '5min', '30min'), default='5min', func=on_timeframe_selection)
df = get_bar_data('TSLA', '5min')
@ -97,6 +93,6 @@ if __name__ == '__main__':
chart.show(block=True)
chart.toolbox.export_drawings('drawings.json') # Exports the drawings to the JSON file.
chart.toolbox.export_drawings('drawings.json') # Exports the drawings to the JSON file upon close.
```

3
examples/1_setting_data/setting_data.py
View File

@ -2,10 +2,9 @@ import pandas as pd
from lightweight_charts import Chart
if __name__ == '__main__':
chart = Chart()
# Columns: | time | open | high | low | close | volume (if volume is enabled) |
# Columns: time | open | high | low | close | volume
df = pd.read_csv('ohlcv.csv')
chart.set(df)

7
examples/3_tick_data/tick_data.py
View File

@ -2,15 +2,14 @@ import pandas as pd
from time import sleep
from lightweight_charts import Chart
if __name__ == '__main__':
df1 = pd.read_csv('ohlc.csv')
# Columns: | time | price | volume (if volume is enabled) |
# Columns: time | price
df2 = pd.read_csv('ticks.csv')
chart = Chart(volume_enabled=False)
chart = Chart()
chart.set(df1)
@ -18,6 +17,4 @@ if __name__ == '__main__':
for i, tick in df2.iterrows():
chart.update_from_tick(tick)
sleep(0.03)

20
examples/4_line_indicators/line_indicators.py
View File

@ -2,26 +2,22 @@ import pandas as pd
from lightweight_charts import Chart
def calculate_sma(data: pd.DataFrame, period: int = 50):
def avg(d: pd.DataFrame):
return d['close'].mean()
result = []
for i in range(period - 1, len(data)):
val = avg(data.iloc[i - period + 1:i])
result.append({'time': data.iloc[i]['date'], f'SMA {period}': val})
return pd.DataFrame(result)
def calculate_sma(df, period: int = 50):
return pd.DataFrame({
'time': df['date'],
f'SMA {period}': df['close'].rolling(window=period).mean()
}).dropna()
if __name__ == '__main__':
chart = Chart(debug=True)
chart = Chart()
chart.legend(visible=True)
df = pd.read_csv('ohlcv.csv')
chart.set(df)
line = chart.create_line()
line = chart.create_line('SMA 50')
sma_data = calculate_sma(df, period=50)
line.set(sma_data, name='SMA 50')
line.set(sma_data)
chart.show(block=True)

35
examples/6_callbacks/callbacks.py
View File

@ -9,39 +9,38 @@ def get_bar_data(symbol, timeframe):
return pd.read_csv(f'bar_data/{symbol}_{timeframe}.csv')
class API:
def __init__(self):
self.chart: Chart = None # Changes after each callback.
def on_search(self, searched_string): # Called when the user searches.
new_data = get_bar_data(searched_string, self.chart.topbar['timeframe'].value)
def on_search(chart, searched_string): # Called when the user searches.
new_data = get_bar_data(searched_string, chart.topbar['timeframe'].value)
if new_data.empty:
return
self.chart.topbar['symbol'].set(searched_string)
self.chart.set(new_data)
chart.topbar['symbol'].set(searched_string)
chart.set(new_data)
def on_timeframe_selection(self): # Called when the user changes the timeframe.
new_data = get_bar_data(self.chart.topbar['symbol'].value, self.chart.topbar['timeframe'].value)
def on_timeframe_selection(chart): # Called when the user changes the timeframe.
new_data = get_bar_data(chart.topbar['symbol'].value, chart.topbar['timeframe'].value)
if new_data.empty:
return
self.chart.set(new_data, True)
chart.set(new_data, True)
def on_horizontal_line_move(self, line_id, price):
print(f'Horizontal line moved to: {price}')
def on_horizontal_line_move(chart, line):
print(f'Horizontal line moved to: {line.price}')
if __name__ == '__main__':
api = API()
chart = Chart(api=api, topbar=True, searchbox=True, toolbox=True)
chart = Chart(toolbox=True)
chart.legend(True)
chart.events.search += on_search
chart.topbar.textbox('symbol', 'TSLA')
chart.topbar.switcher('timeframe', api.on_timeframe_selection, '1min', '5min', '30min', default='5min')
chart.topbar.switcher('timeframe', ('1min', '5min', '30min'), default='5min',
func=on_timeframe_selection)
df = get_bar_data('TSLA', '5min')
chart.set(df)
chart.horizontal_line(200, interactive=True)
chart.horizontal_line(200, func=on_horizontal_line_move)
chart.show(block=True)

416
lightweight_charts/abstract.py
View File

@ -1,3 +1,4 @@
import asyncio
import json
import os
from datetime import timedelta, datetime
@ -6,10 +7,8 @@ import pandas as pd
from typing import Union, Literal, Dict, List
from lightweight_charts.table import Table
from lightweight_charts.util import LINE_STYLE, MARKER_POSITION, MARKER_SHAPE, CROSSHAIR_MODE, _crosshair_mode, \
_line_style, \
MissingColumn, _js_bool, _price_scale_mode, PRICE_SCALE_MODE, _marker_position, _marker_shape, IDGen
from lightweight_charts.util import LINE_STYLE, MARKER_POSITION, MARKER_SHAPE, CROSSHAIR_MODE, crosshair_mode, \
line_style, jbool, price_scale_mode, PRICE_SCALE_MODE, marker_position, marker_shape, IDGen, Events
JS = {}
current_dir = os.path.dirname(os.path.abspath(__file__))
@ -51,7 +50,9 @@ HTML = f"""
class SeriesCommon:
def _set_interval(self, df: pd.DataFrame):
common_interval = pd.to_datetime(df['time']).diff().value_counts()
if not pd.api.types.is_datetime64_any_dtype(df['time']):
df['time'] = pd.to_datetime(df['time'])
common_interval = df['time'].diff().value_counts()
try:
self._interval = common_interval.index[0]
except IndexError:
@ -97,12 +98,14 @@ class SeriesCommon:
return series
def _datetime_format(self, arg: Union[pd.Series, str]):
if not pd.api.types.is_datetime64_any_dtype(arg):
arg = pd.to_datetime(arg)
if self._interval < timedelta(days=1):
if isinstance(arg, pd.Series):
arg = arg.astype('int64') // 10 ** 9
else:
arg = self._interval.total_seconds() * (arg.timestamp() // self._interval.total_seconds())
interval_seconds = self._interval.total_seconds()
arg = interval_seconds * (arg.timestamp() // interval_seconds)
else:
arg = arg.dt.strftime('%Y-%m-%d') if isinstance(arg, pd.Series) else arg.strftime('%Y-%m-%d')
@ -127,9 +130,9 @@ class SeriesCommon:
self.run_script(f"""
{self.id}.markers.push({{
time: {time if isinstance(time, float) else f"'{time}'"},
position: '{_marker_position(position)}',
position: '{marker_position(position)}',
color: '{color}',
shape: '{_marker_shape(shape)}',
shape: '{marker_shape(shape)}',
text: '{text}',
id: '{marker_id}'
}});
@ -149,11 +152,11 @@ class SeriesCommon:
}});''')
def horizontal_line(self, price: Union[float, int], color: str = 'rgb(122, 146, 202)', width: int = 2,
style: LINE_STYLE = 'solid', text: str = '', axis_label_visible: bool = True, interactive: bool = False) -> 'HorizontalLine':
style: LINE_STYLE = 'solid', text: str = '', axis_label_visible: bool = True, func: callable = None) -> 'HorizontalLine':
"""
Creates a horizontal line at the given price.\n
Creates a horizontal line at the given price.
"""
return HorizontalLine(self, price, color, width, style, text, axis_label_visible, interactive)
return HorizontalLine(self, price, color, width, style, text, axis_label_visible, func)
def remove_horizontal_line(self, price: Union[float, int] = None):
"""
@ -182,8 +185,8 @@ class SeriesCommon:
def price_line(self, label_visible: bool = True, line_visible: bool = True, title: str = ''):
self.run_script(f'''
{self.id}.series.applyOptions({{
lastValueVisible: {_js_bool(label_visible)},
priceLineVisible: {_js_bool(line_visible)},
lastValueVisible: {jbool(label_visible)},
priceLineVisible: {jbool(line_visible)},
title: '{title}',
}})''')
@ -193,6 +196,7 @@ class SeriesCommon:
:param precision: The number of decimal places.
"""
self.run_script(f'''
{self.id}.precision = {precision}
{self.id}.series.applyOptions({{
priceFormat: {{precision: {precision}, minMove: {1 / (10 ** precision)}}}
}})''')
@ -203,18 +207,23 @@ class SeriesCommon:
def _toggle_data(self, arg):
self.run_script(f'''
{self.id}.series.applyOptions({{visible: {_js_bool(arg)}}})
{f'{self.id}.volumeSeries.applyOptions({{visible: {_js_bool(arg)}}})' if hasattr(self, 'volume_enabled') and self.volume_enabled else ''}
{self.id}.series.applyOptions({{visible: {jbool(arg)}}})
{f'{self.id}.volumeSeries.applyOptions({{visible: {jbool(arg)}}})' if hasattr(self, 'loaded') else ''}
''')
class HorizontalLine:
def __init__(self, chart, price, color, width, style, text, axis_label_visible, interactive):
def __init__(self, chart, price, color, width, style, text, axis_label_visible, func):
self._chart = chart
self.id = self._chart._rand.generate()
self.price = price
self._chart.run_script(f'''
{self.id} = new HorizontalLine({self._chart.id}, '{self.id}', {price}, '{color}', {width}, {_line_style(style)}, {_js_bool(axis_label_visible)}, '{text}')
{self.id} = new HorizontalLine({self._chart.id}, '{self.id}', {price}, '{color}', {width}, {line_style(style)}, {jbool(axis_label_visible)}, '{text}')
''')
if not interactive: return
if not func: return
def wrapper(p):
self.price = p
func(chart, self)
chart._handlers[self.id] = wrapper
self._chart.run_script(f'if ("toolBox" in {self._chart.id}) {self._chart.id}.toolBox.drawings.push({self.id})')
def update(self, price):
@ -222,6 +231,7 @@ class HorizontalLine:
Moves the horizontal line to the given price.
"""
self._chart.run_script(f'{self.id}.updatePrice({price})')
self.price = price
def label(self, text: str):
self._chart.run_script(f'{self.id}.updateLabel("{text}")')
@ -235,9 +245,9 @@ class HorizontalLine:
class Line(SeriesCommon):
def __init__(self, chart, color, width, price_line, price_label, crosshair_marker=True):
def __init__(self, chart, name, color, style, width, price_line, price_label, crosshair_marker=True):
self.color = color
self.name = ''
self.name = name
self._chart = chart
self._rand = chart._rand
self.id = self._rand.generate()
@ -246,10 +256,11 @@ class Line(SeriesCommon):
{self.id} = {{
series: {self._chart.id}.chart.addLineSeries({{
color: '{color}',
lineStyle: {line_style(style)},
lineWidth: {width},
lastValueVisible: {_js_bool(price_label)},
priceLineVisible: {_js_bool(price_line)},
crosshairMarkerVisible: {_js_bool(crosshair_marker)},
lastValueVisible: {jbool(price_label)},
priceLineVisible: {jbool(price_line)},
crosshairMarkerVisible: {jbool(crosshair_marker)},
{"""autoscaleInfoProvider: () => ({
priceRange: {
minValue: 1_000_000_000,
@ -259,8 +270,9 @@ class Line(SeriesCommon):
}}),
markers: [],
horizontal_lines: [],
name: '',
name: '{name}',
color: '{color}',
precision: 2,
}}
{self._chart.id}.lines.push({self.id})
if ('legend' in {self._chart.id}) {{
@ -269,23 +281,22 @@ class Line(SeriesCommon):
''')
def set(self, data: pd.DataFrame, name=''):
def set(self, data: pd.DataFrame):
"""
Sets the line data.\n
:param data: If the name parameter is not used, the columns should be named: date/time, value.
:param name: The column of the DataFrame to use as the line value. When used, the Line will be named after this column.
"""
if data.empty or data is None:
self.run_script(f'{self.id}.series.setData([]); {self.id}.name = "{name}"')
self.run_script(f'{self.id}.series.setData([])')
return
df = self._df_datetime_format(data, exclude_lowercase=name)
if name:
if name not in data:
raise NameError(f'No column named "{name}".')
self.name = name
df = df.rename(columns={name: 'value'})
df = self._df_datetime_format(data, exclude_lowercase=self.name)
if self.name:
if self.name not in data:
raise NameError(f'No column named "{self.name}".')
df = df.rename(columns={self.name: 'value'})
self._last_bar = df.iloc[-1]
self.run_script(f'{self.id}.series.setData({df.to_dict("records")}); {self.id}.name = "{name}"')
self.run_script(f'{self.id}.series.setData({df.to_dict("records")})')
def update(self, series: pd.Series):
"""
@ -300,14 +311,14 @@ class Line(SeriesCommon):
def _set_trend(self, start_time, start_value, end_time, end_value, ray=False):
def time_format(time_val):
time_val = self._chart._datetime_format(time_val)
time_val = pd.to_datetime(time_val)
time_val = time_val.timestamp() if self._chart._interval < pd.Timedelta(days=1) else time_val.strftime('%Y-%m-%d')
return f"'{time_val}'" if isinstance(time_val, str) else time_val
self.run_script(f'''
let logical
if ({_js_bool(ray)}) logical = {self._chart.id}.chart.timeScale().getVisibleLogicalRange()
{self._chart.id}.chart.timeScale().applyOptions({{shiftVisibleRangeOnNewBar: false}})
{self.id}.series.setData(calculateTrendLine({time_format(start_time)}, {start_value}, {time_format(end_time)}, {end_value},
{self._chart._interval.total_seconds()*1000}, {self._chart.id}, {_js_bool(ray)}))
if (logical) {self._chart.id}.chart.timeScale().setVisibleLogicalRange(logical)
{self._chart._interval.total_seconds()*1000}, {self._chart.id}, {jbool(ray)}))
{self._chart.id}.chart.timeScale().applyOptions({{shiftVisibleRangeOnNewBar: true}})
''')
def delete(self):
@ -323,17 +334,24 @@ class Line(SeriesCommon):
class Widget:
def __init__(self, topbar):
def __init__(self, topbar, value, func=None):
self._chart = topbar._chart
self._method = None
self.id = topbar._chart._rand.generate()
self.value = value
self._handler = func
def wrapper(v):
self.value = v
func(topbar._chart)
async def async_wrapper(v):
self.value = v
await func(topbar._chart)
self._chart._handlers[self.id] = async_wrapper if asyncio.iscoroutinefunction(func) else wrapper
class TextWidget(Widget):
def __init__(self, topbar, initial_text):
super().__init__(topbar)
self.value = initial_text
self.id = self._chart._rand.generate()
self._chart.run_script(f'''{self.id} = makeTextBoxWidget({self._chart.id}, "{initial_text}")''')
super().__init__(topbar, value=initial_text)
self._chart.run_script(f'{self.id} = {topbar.id}.makeTextBoxWidget("{initial_text}")')
def set(self, string):
self.value = string
@ -341,42 +359,75 @@ class TextWidget(Widget):
class SwitcherWidget(Widget):
def __init__(self, topbar, method, *options, default):
super().__init__(topbar)
self.value = default
self._method = str(method)
def __init__(self, topbar, options, default, func):
super().__init__(topbar, value=default, func=func)
self._chart.run_script(f'''
makeSwitcher({self._chart.id}, {list(options)}, '{default}', '{self._method}',
'{topbar.active_background_color}', '{topbar.active_text_color}', '{topbar.text_color}', '{topbar.hover_color}')
{self.id} = {topbar.id}.makeSwitcher({list(options)}, '{default}', '{self.id}')
reSize({self._chart.id})
''')
class ButtonWidget(Widget):
def __init__(self, topbar, button, separator, func):
super().__init__(topbar, value=button, func=func)
self._chart.run_script(f'''
{self.id} = {topbar.id}.makeButton('{button}', '{self.id}')
{f'{topbar.id}.makeSeparator()' if separator else ''}
reSize({self._chart.id})
''')
def set(self, string):
self.value = string
self._chart.run_script(f'{self.id}.elem.innerText = "{string}"')
class TopBar:
def __init__(self, chart):
self._chart = chart
self.id = chart._rand.generate()
self._widgets: Dict[str, Widget] = {}
self.click_bg_color = '#50565E'
self.hover_bg_color = '#3c434c'
self.active_bg_color = 'rgba(0, 122, 255, 0.7)'
self.active_text_color = '#ececed'
self.text_color = '#d8d9db'
self._created = False
def _create(self):
if self._created:
return
self._created = True
if not self._chart._callbacks_enabled:
self._chart._callbacks_enabled = True
self._chart.run_script(JS['callback'])
self._chart.run_script(f'''
makeTopBar({self._chart.id})
{self.id} = new TopBar({self._chart.id}, '{self.hover_bg_color}', '{self.click_bg_color}',
'{self.active_bg_color}', '{self.text_color}', '{self.active_text_color}')
{self._chart.id}.topBar = {self.id}.topBar
reSize({self._chart.id})
''')
self.active_background_color = 'rgba(0, 122, 255, 0.7)'
self.active_text_color = 'rgb(240, 240, 240)'
self.text_color = 'lightgrey'
self.hover_color = 'rgb(60, 60, 60)'
def __getitem__(self, item): return self._widgets.get(item)
def switcher(self, name, method, *options, default=None):
self._chart._methods[str(method)] = method
self._widgets[name] = SwitcherWidget(self, method, *options, default=default if default else options[0])
def textbox(self, name, initial_text=''): self._widgets[name] = TextWidget(self, initial_text)
def _widget_with_method(self, method_name):
for widget in self._widgets.values():
if widget._method == method_name:
def __getitem__(self, item):
if widget := self._widgets.get(item):
return widget
raise KeyError(f'Topbar widget "{item}" not found.')
def get(self, widget_name): return self._widgets.get(widget_name)
def __setitem__(self, key, value): self._widgets[key] = value
def switcher(self, name, options: tuple, default: str = None, func: callable = None):
self._create()
self._widgets[name] = SwitcherWidget(self, options, default if default else options[0], func)
def textbox(self, name: str, initial_text: str = ''):
self._create()
self._widgets[name] = TextWidget(self, initial_text)
def button(self, name, button_text: str, separator: bool = True, func: callable = None):
self._create()
self._widgets[name] = ButtonWidget(self, button_text, separator, func)
class ToolBox:
@ -385,7 +436,8 @@ class ToolBox:
self.id = chart.id
self._return_q = chart._return_q
self._save_under = None
self._saved_drawings = {}
self.drawings = {}
chart._handlers[f'save_drawings{self.id}'] = self._save_drawings
def save_drawings_under(self, widget: Widget):
"""
@ -397,9 +449,9 @@ class ToolBox:
"""
Loads and displays the drawings on the chart stored under the tag given.
"""
if not self._saved_drawings.get(tag):
if not self.drawings.get(tag):
return
self.run_script(f'if ("toolBox" in {self.id}) {self.id}.toolBox.loadDrawings({json.dumps(self._saved_drawings[tag])})')
self.run_script(f'if ("toolBox" in {self.id}) {self.id}.toolBox.loadDrawings({json.dumps(self.drawings[tag])})')
def import_drawings(self, file_path):
"""
@ -407,47 +459,48 @@ class ToolBox:
"""
with open(file_path, 'r') as f:
json_data = json.load(f)
self._saved_drawings = json_data
self.drawings = json_data
def export_drawings(self, file_path):
"""
Exports the current list of drawings to the given file path.
"""
with open(file_path, 'w+') as f:
json.dump(self._saved_drawings, f, indent=4)
json.dump(self.drawings, f, indent=4)
def _save_drawings(self, drawings):
if not self._save_under:
return
self._saved_drawings[self._save_under.value] = json.loads(drawings)
self.drawings[self._save_under.value] = json.loads(drawings)
class LWC(SeriesCommon):
def __init__(self, volume_enabled: bool = True, inner_width: float = 1.0, inner_height: float = 1.0, dynamic_loading: bool = False,
scale_candles_only: bool = False, topbar: bool = False, searchbox: bool = False, toolbox: bool = False,
_js_api_code: str = None, autosize=True, _run_script=None):
self.volume_enabled = volume_enabled
def __init__(self, inner_width: float = 1.0, inner_height: float = 1.0,
scale_candles_only: bool = False, toolbox: bool = False, _js_api_code: str = None,
autosize: bool = True, _run_script=None):
self.loaded = False
self._scripts = []
self._final_scripts = []
if _run_script:
self.run_script = _run_script
self.run_script(f'window.callbackFunction = {_js_api_code}') if _js_api_code else None
self._scale_candles_only = scale_candles_only
self._inner_width = inner_width
self._inner_height = inner_height
self._dynamic_loading = dynamic_loading
if _run_script:
self.run_script = _run_script
self._rand = IDGen()
self.id = self._rand.generate()
self._position = 'left'
self.loaded = False
self._html = HTML
self._scripts = []
self._final_scripts = []
self._script_func = None
self.candle_data = pd.DataFrame()
self._last_bar = None
self._interval = None
self._charts = {self.id: self}
self._lines = []
self.run_script(f'window.callbackFunction = {_js_api_code}') if _js_api_code else None
self._methods = {}
self.events: Events = Events(self)
self._handlers = {}
self._return_q = None
self._callbacks_enabled = False
self.topbar: TopBar = TopBar(self)
self._background_color = '#000000'
self._volume_up_color = 'rgba(83,141,131,0.8)'
@ -457,7 +510,7 @@ class LWC(SeriesCommon):
self.polygon: PolygonAPI = PolygonAPI(self)
self.run_script(f'''
{self.id} = makeChart({self._inner_width}, {self._inner_height}, autoSize={_js_bool(autosize)})
{self.id} = makeChart({self._inner_width}, {self._inner_height}, autoSize={jbool(autosize)})
{self.id}.id = '{self.id}'
{self.id}.wrapper.style.float = "{self._position}"
''')
@ -465,12 +518,6 @@ class LWC(SeriesCommon):
self.run_script(JS['toolbox'])
self.run_script(f'{self.id}.toolBox = new ToolBox({self.id})')
self.toolbox: ToolBox = ToolBox(self)
if not topbar and not searchbox:
return
self.run_script(JS['callback'])
self.run_script(f'makeSpinner({self.id})')
self.topbar = TopBar(self) if topbar else None
self.run_script(f'{self.id}.search = makeSearchBox({self.id})') if searchbox else None
def _on_js_load(self):
if self.loaded:
@ -479,7 +526,7 @@ class LWC(SeriesCommon):
[self.run_script(script) for script in self._scripts]
[self.run_script(script) for script in self._final_scripts]
def run_script(self, script, run_last=False):
def run_script(self, script: str, run_last: bool = False):
"""
For advanced users; evaluates JavaScript within the Webview.
"""
@ -498,14 +545,13 @@ class LWC(SeriesCommon):
if df.empty or df is None:
self.run_script(f'{self.id}.series.setData([])')
self.run_script(f'{self.id}.volumeSeries.setData([])')
# self.run_script(f"if ('toolBox' in {self.id}) {self.id}.toolBox.{render_or_clear}()")
self.candle_data = pd.DataFrame()
return
bars = self._df_datetime_format(df)
self.candle_data = bars.copy()
self._last_bar = bars.iloc[-1]
if self.volume_enabled:
if 'volume' not in bars:
raise MissingColumn("Volume enabled, but 'volume' column was not found.")
if 'volume' in bars:
volume = bars.drop(columns=['open', 'high', 'low', 'close']).rename(columns={'volume': 'value'})
volume['color'] = self._volume_down_color
volume.loc[bars['close'] > bars['open'], 'color'] = self._volume_up_color
@ -513,89 +559,39 @@ class LWC(SeriesCommon):
bars = bars.drop(columns=['volume'])
bars = bars.to_dict(orient='records')
self.run_script(f'''
{self.id}.candleData = {bars}
{self.id}.shownData = ({self.id}.candleData.length >= 190) ? {self.id}.candleData.slice(-190) : {self.id}.candleData
{self.id}.series.setData({self.id}.shownData);
var timer = null;
{self.id}.chart.timeScale().subscribeVisibleLogicalRangeChange(() => {{
if (timer !== null) {{
return;
}}
timer = setTimeout(() => {{
let chart = {self.id}
let logicalRange = chart.chart.timeScale().getVisibleLogicalRange();
if (logicalRange !== null) {{
let barsInfo = chart.series.barsInLogicalRange(logicalRange);
if (barsInfo === null || barsInfo.barsBefore === null || barsInfo.barsAfter === null) {{return}}
if (barsInfo !== null && barsInfo.barsBefore < 20 || barsInfo.barsAfter < 20) {{
let newBeginning = chart.candleData.indexOf(chart.shownData[0])+Math.round(barsInfo.barsBefore)-20
let newEnd = chart.candleData.indexOf(chart.shownData[chart.shownData.length-2])-Math.round(barsInfo.barsAfter)+20
if (newBeginning < 0) {{
newBeginning = 0
}}
chart.shownData = chart.candleData.slice(newBeginning, newEnd)
if (newEnd-17 <= chart.candleData.length-1) {{
chart.shownData[chart.shownData.length - 1] = Object.assign({{}}, chart.shownData[chart.shownData.length - 1]);
chart.shownData[chart.shownData.length - 1].open = chart.candleData[chart.candleData.length - 1].close;
chart.shownData[chart.shownData.length - 1].high = chart.candleData[chart.candleData.length - 1].close;
chart.shownData[chart.shownData.length - 1].low = chart.candleData[chart.candleData.length - 1].close;
chart.shownData[chart.shownData.length - 1].close = chart.candleData[chart.candleData.length - 1].close;
}}
chart.series.setData(chart.shownData);
}}
}}
timer = null;
}}, 50);
}});
''') if self._dynamic_loading else self.run_script(f'{self.id}.candleData = {bars}; {self.id}.series.setData({self.id}.candleData)')
self.run_script(f'{self.id}.candleData = {bars}; {self.id}.series.setData({self.id}.candleData)')
self.run_script(f"if ('toolBox' in {self.id}) {self.id}.toolBox.{'clearDrawings' if not render_drawings else 'renderDrawings'}()")
# for line in self._lines:
# if line.name in df.columns:
# line.set()
def fit(self):
"""
Fits the maximum amount of the chart data within the viewport.
"""
self.run_script(f'{self.id}.chart.timeScale().fitContent()')
def update(self, series, from_tick=False):
def update(self, series: pd.Series, _from_tick=False):
"""
Updates the data from a bar;
if series['time'] is the same time as the last bar, the last bar will be overwritten.\n
:param series: labels: date/time, open, high, low, close, volume (if volume enabled).
"""
series = self._series_datetime_format(series) if not from_tick else series
series = self._series_datetime_format(series) if not _from_tick else series
if series['time'] != self._last_bar['time']:
self.candle_data.loc[self.candle_data.index[-1]] = self._last_bar
self.candle_data = pd.concat([self.candle_data, series.to_frame().T], ignore_index=True)
self.events.new_bar._emit(self)
self._last_bar = series
if self.volume_enabled:
if 'volume' not in series:
raise MissingColumn("Volume enabled, but 'volume' column was not found.")
if 'volume' in series:
volume = series.drop(['open', 'high', 'low', 'close']).rename({'volume': 'value'})
volume['color'] = self._volume_up_color if series['close'] > series['open'] else self._volume_down_color
self.run_script(f'{self.id}.volumeSeries.update({volume.to_dict()})')
series = series.drop(['volume'])
bar = series.to_dict()
self.run_script(f'''
let logicalRange = {self.id}.chart.timeScale().getVisibleLogicalRange();
let barsInfo = {self.id}.series.barsInLogicalRange(logicalRange);
if ({self.id}.candleData[{self.id}.candleData.length-1].time === {bar['time']}) {{
{self.id}.shownData[{self.id}.shownData.length-1] = {bar}
{self.id}.candleData[{self.id}.candleData.length-1] = {bar}
}}
else {{
if (barsInfo.barsAfter > 0) {{
{self.id}.shownData[{self.id}.shownData.length-1] = {bar}
}}
else {{
{self.id}.shownData.push({bar})
}}
{self.id}.candleData.push({bar})
}}
{self.id}.series.update({self.id}.shownData[{self.id}.shownData.length-1])
''') if self._dynamic_loading else self.run_script(f'''
if (chartTimeToDate({self.id}.candleData[{self.id}.candleData.length-1].time).getTime() === chartTimeToDate({bar['time']}).getTime()) {{
{self.id}.candleData[{self.id}.candleData.length-1] = {bar}
}}
@ -605,7 +601,7 @@ class LWC(SeriesCommon):
{self.id}.series.update({bar})
''')
def update_from_tick(self, series, cumulative_volume=False):
def update_from_tick(self, series: pd.Series, cumulative_volume: bool = False):
"""
Updates the data from a tick.\n
:param series: labels: date/time, price, volume (if volume enabled).
@ -618,10 +614,8 @@ class LWC(SeriesCommon):
bar['high'] = max(self._last_bar['high'], series['price'])
bar['low'] = min(self._last_bar['low'], series['price'])
bar['close'] = series['price']
if self.volume_enabled:
if 'volume' not in series:
raise MissingColumn("Volume enabled, but 'volume' column was not found.")
elif cumulative_volume:
if 'volume' in series:
if cumulative_volume:
bar['volume'] += series['volume']
else:
bar['volume'] = series['volume']
@ -629,15 +623,16 @@ class LWC(SeriesCommon):
for key in ('open', 'high', 'low', 'close'):
bar[key] = series['price']
bar['time'] = series['time']
bar['volume'] = 0
self.update(bar, from_tick=True)
if 'volume' in series:
bar['volume'] = series['volume']
self.update(bar, _from_tick=True)
def create_line(self, color: str = 'rgba(214, 237, 255, 0.6)', width: int = 2,
def create_line(self, name: str = '', color: str = 'rgba(214, 237, 255, 0.6)', style: LINE_STYLE = 'solid', width: int = 2,
price_line: bool = True, price_label: bool = True) -> Line:
"""
Creates and returns a Line object.)\n
"""
self._lines.append(Line(self, color, width, price_line, price_label))
self._lines.append(Line(self, name, color, style, width, price_line, price_label))
return self._lines[-1]
def lines(self) -> List[Line]:
@ -647,12 +642,12 @@ class LWC(SeriesCommon):
return self._lines.copy()
def trend_line(self, start_time, start_value, end_time, end_value, color: str = '#1E80F0', width: int = 2) -> Line:
line = Line(self, color, width, price_line=False, price_label=False, crosshair_marker=False)
line = Line(self, '', color, 'solid', width, price_line=False, price_label=False, crosshair_marker=False)
line._set_trend(start_time, start_value, end_time, end_value, ray=False)
return line
def ray_line(self, start_time, value, color: str = '#1E80F0', width: int = 2) -> Line:
line = Line(self, color, width, price_line=False, price_label=False, crosshair_marker=False)
line = Line(self, '', color, 'solid', width, price_line=False, price_label=False, crosshair_marker=False)
line._set_trend(start_time, value, start_time, value, ray=True)
return line
@ -661,13 +656,13 @@ class LWC(SeriesCommon):
ticks_visible: bool = False, scale_margin_top: float = 0.2, scale_margin_bottom: float = 0.2):
self.run_script(f'''
{self.id}.series.priceScale().applyOptions({{
mode: {_price_scale_mode(mode)},
alignLabels: {_js_bool(align_labels)},
borderVisible: {_js_bool(border_visible)},
mode: {price_scale_mode(mode)},
alignLabels: {jbool(align_labels)},
borderVisible: {jbool(border_visible)},
{f'borderColor: "{border_color}",' if border_color else ''}
{f'textColor: "{text_color}",' if text_color else ''}
entireTextOnly: {_js_bool(entire_text_only)},
ticksVisible: {_js_bool(ticks_visible)},
entireTextOnly: {jbool(entire_text_only)},
ticksVisible: {jbool(ticks_visible)},
scaleMargins: {{top: {scale_margin_top}, bottom: {scale_margin_bottom}}}
}})''')
@ -682,10 +677,10 @@ class LWC(SeriesCommon):
timeScale: {{
rightOffset: {right_offset},
minBarSpacing: {min_bar_spacing},
visible: {_js_bool(visible)},
timeVisible: {_js_bool(time_visible)},
secondsVisible: {_js_bool(seconds_visible)},
borderVisible: {_js_bool(border_visible)},
visible: {jbool(visible)},
timeVisible: {jbool(time_visible)},
secondsVisible: {jbool(seconds_visible)},
borderVisible: {jbool(border_visible)},
{f'borderColor: "{border_color}",' if border_color else ''}
}}
}})''')
@ -716,14 +711,14 @@ class LWC(SeriesCommon):
{self.id}.chart.applyOptions({{
grid: {{
vertLines: {{
visible: {_js_bool(vert_enabled)},
visible: {jbool(vert_enabled)},
color: "{color}",
style: {_line_style(style)},
style: {line_style(style)},
}},
horzLines: {{
visible: {_js_bool(horz_enabled)},
visible: {jbool(horz_enabled)},
color: "{color}",
style: {_line_style(style)},
style: {line_style(style)},
}},
}}
}})""")
@ -732,18 +727,19 @@ class LWC(SeriesCommon):
wick_enabled: bool = True, border_enabled: bool = True, border_up_color: str = '',
border_down_color: str = '', wick_up_color: str = '', wick_down_color: str = ''):
"""
Candle styling for each of its parts.
Candle styling for each of its parts.\n
If only `up_color` and `down_color` are passed, they will color all parts of the candle.
"""
self.run_script(f"""
{self.id}.series.applyOptions({{
upColor: "{up_color}",
downColor: "{down_color}",
wickVisible: {_js_bool(wick_enabled)},
borderVisible: {_js_bool(border_enabled)},
{f'borderUpColor: "{border_up_color}",' if border_up_color else up_color if border_enabled else ''}
{f'borderDownColor: "{border_down_color}",' if border_down_color else down_color if border_enabled else ''}
{f'wickUpColor: "{wick_up_color}",' if wick_up_color else wick_up_color if wick_enabled else ''}
{f'wickDownColor: "{wick_down_color}",' if wick_down_color else wick_down_color if wick_enabled else ''}
wickVisible: {jbool(wick_enabled)},
borderVisible: {jbool(border_enabled)},
{f'borderUpColor: "{border_up_color if border_up_color else up_color}",' if border_enabled else ''}
{f'borderDownColor: "{border_down_color if border_down_color else down_color}",' if border_enabled else ''}
{f'wickUpColor: "{wick_up_color if wick_up_color else up_color}",' if wick_enabled else ''}
{f'wickDownColor: "{wick_down_color if wick_down_color else down_color}",' if wick_enabled else ''}
}})""")
def volume_config(self, scale_margin_top: float = 0.8, scale_margin_bottom: float = 0.0,
@ -776,19 +772,19 @@ class LWC(SeriesCommon):
self.run_script(f'''
{self.id}.chart.applyOptions({{
crosshair: {{
mode: {_crosshair_mode(mode)},
mode: {crosshair_mode(mode)},
vertLine: {{
visible: {_js_bool(vert_visible)},
visible: {jbool(vert_visible)},
width: {vert_width},
{f'color: "{vert_color}",' if vert_color else ''}
style: {_line_style(vert_style)},
style: {line_style(vert_style)},
labelBackgroundColor: "{vert_label_background_color}"
}},
horzLine: {{
visible: {_js_bool(horz_visible)},
visible: {jbool(horz_visible)},
width: {horz_width},
{f'color: "{horz_color}",' if horz_color else ''}
style: {_line_style(horz_style)},
style: {line_style(horz_style)},
labelBackgroundColor: "{horz_label_background_color}"
}}
}}}})''')
@ -817,7 +813,7 @@ class LWC(SeriesCommon):
if not visible:
return
self.run_script(f'''
{self.id}.legend = new Legend({self.id}, {_js_bool(ohlc)}, {_js_bool(percent)}, {_js_bool(lines)}, '{color}', {font_size}, '{font_family}')
{self.id}.legend = new Legend({self.id}, {jbool(ohlc)}, {jbool(percent)}, {jbool(lines)}, '{color}', {font_size}, '{font_family}')
''')
def spinner(self, visible): self.run_script(f"{self.id}.spinner.style.display = '{'block' if visible else 'none'}'")
@ -840,8 +836,7 @@ class LWC(SeriesCommon):
serial_data = self._return_q.get()
return b64decode(serial_data.split(',')[1])
def add_hotkey(self, modifier_key: Literal['ctrl', 'alt', 'shift', 'meta'], keys: Union[str, tuple, int], method):
self._methods[str(method)] = method
def hotkey(self, modifier_key: Literal['ctrl', 'alt', 'shift', 'meta'], keys: Union[str, tuple, int], func: callable):
if not isinstance(keys, tuple): keys = (keys,)
for key in keys:
key_code = 'Key' + key.upper() if isinstance(key, str) else 'Digit' + str(key)
@ -849,33 +844,32 @@ class LWC(SeriesCommon):
{self.id}.commandFunctions.unshift((event) => {{
if (event.{modifier_key + 'Key'} && event.code === '{key_code}') {{
event.preventDefault()
window.callbackFunction(`{str(method)}_~_{self.id}_~_{key}`)
window.callbackFunction(`{modifier_key, keys}_~_{key}`)
return true
}}
else return false
}})''')
self._handlers[f'{modifier_key, keys}'] = func
def create_table(self, width: Union[float, int], height: Union[float, int], headings: tuple, widths: tuple = None, alignments: tuple = None,
position: str = 'left', draggable: bool = False, method: object = None):
self._methods[str(method)] = method
return Table(self, width, height, headings, widths, alignments, position, draggable, method)
position: str = 'left', draggable: bool = False, func: callable = None) -> Table:
return Table(self, width, height, headings, widths, alignments, position, draggable, func)
def create_subchart(self, volume_enabled: bool = True, position: Literal['left', 'right', 'top', 'bottom'] = 'left',
width: float = 0.5, height: float = 0.5, sync: Union[bool, str] = False, dynamic_loading: bool = False,
scale_candles_only: bool = False, topbar: bool = False, searchbox: bool = False, toolbox: bool = False):
subchart = SubChart(self, volume_enabled, position, width, height, sync, dynamic_loading, scale_candles_only, topbar, searchbox, toolbox)
self._charts[subchart.id] = subchart
return subchart
def create_subchart(self, position: Literal['left', 'right', 'top', 'bottom'] = 'left', width: float = 0.5, height: float = 0.5,
sync: Union[bool, str] = False, scale_candles_only: bool = False, toolbox: bool = False):
return SubChart(self, position, width, height, sync, scale_candles_only, toolbox)
class SubChart(LWC):
def __init__(self, parent, volume_enabled, position, width, height, sync, dynamic_loading, scale_candles_only, topbar, searchbox, toolbox):
def __init__(self, parent, position, width, height, sync, scale_candles_only, toolbox):
self._chart = parent._chart if isinstance(parent, SubChart) else parent
super().__init__(volume_enabled, width, height, dynamic_loading, scale_candles_only, topbar, searchbox, toolbox, _run_script=self._chart.run_script)
super().__init__(width, height, scale_candles_only, toolbox, _run_script=self._chart.run_script)
self._parent = parent
self._position = position
self._return_q = self._chart._return_q
self._charts = self._chart._charts
for key, val in self._handlers.items():
self._chart._handlers[key] = val
self._handlers = self._chart._handlers
self.polygon = self._chart.polygon._subchart(self)
if not sync:

40
lightweight_charts/chart.py
View File

@ -14,10 +14,8 @@ class CallbackAPI:
self.emit_q, self.return_q = emit_queue, return_queue
def callback(self, message: str):
messages = message.split('_~_')
name, chart_id = messages[:2]
args = messages[2:]
self.return_q.put(*args) if name == 'return' else self.emit_q.put((name, chart_id, *args))
name, args = message.split('_~_')
self.return_q.put(*args) if name == 'return' else self.emit_q.put((name, args.split(';;;')))
class PyWV:
@ -60,22 +58,21 @@ class PyWV:
class Chart(LWC):
def __init__(self, volume_enabled: bool = True, width: int = 800, height: int = 600, x: int = None, y: int = None,
on_top: bool = False, maximize: bool = False, debug: bool = False,
api: object = None, topbar: bool = False, searchbox: bool = False, toolbox: bool = False,
inner_width: float = 1.0, inner_height: float = 1.0, dynamic_loading: bool = False, scale_candles_only: bool = False):
super().__init__(volume_enabled, inner_width, inner_height, dynamic_loading, scale_candles_only, topbar, searchbox, toolbox, 'pywebview.api.callback')
def __init__(self, width: int = 800, height: int = 600, x: int = None, y: int = None,
on_top: bool = False, maximize: bool = False, debug: bool = False, toolbox: bool = False,
inner_width: float = 1.0, inner_height: float = 1.0, scale_candles_only: bool = False):
super().__init__(inner_width, inner_height, scale_candles_only, toolbox, 'pywebview.api.callback')
global chart, num_charts
if chart:
self._q, self._exit, self._start, self._process = chart._q, chart._exit, chart._start, chart._process
self._emit_q, self._return_q = mp.Queue(), mp.Queue()
chart._charts[self.id] = self
self._api = chart._api
for key, val in self._handlers.items():
chart._handlers[key] = val
self._handlers = chart._handlers
self._loaded = chart._loaded_list[num_charts]
self._q.put(('create_window', (self._html, on_top, width, height, x, y)))
else:
self._api = api
self._q, self._emit_q, self._return_q = (mp.Queue() for _ in range(3))
self._loaded_list = [mp.Event() for _ in range(10)]
self._loaded = self._loaded_list[0]
@ -117,20 +114,9 @@ class Chart(LWC):
self._exit.clear()
return
elif not self._emit_q.empty():
name, chart_id, arg = self._emit_q.get()
if self._api:
self._api.chart = self._charts[chart_id]
if self._api and name == 'save_drawings':
func = self._api.chart.toolbox._save_drawings
elif name in ('on_search', 'on_horizontal_line_move'):
func = getattr(self._api, name)
else:
func = self._methods[name]
if self._api and hasattr(self._api.chart, 'topbar') and (widget := self._api.chart.topbar._widget_with_method(name)):
widget.value = arg
await func() if asyncio.iscoroutinefunction(func) else func()
else:
await func(*arg.split(';;;')) if asyncio.iscoroutinefunction(func) else func(*arg.split(';;;'))
name, args = self._emit_q.get()
func = self._handlers[name]
await func(*args) if asyncio.iscoroutinefunction(func) else func(*args)
continue
value = self.polygon._q.get()
func, args = value[0], value[1:]
@ -148,11 +134,9 @@ class Chart(LWC):
"""
Exits and destroys the chart window.\n
"""
if not self.loaded:
global num_charts, chart
chart = None
num_charts = 0
else:
self._q.put((self.i, 'exit'))
self._exit.wait()
self._process.terminate()

222
lightweight_charts/js/callback.js
View File

@ -1,3 +1,123 @@
if (!window.TopBar) {
class TopBar {
constructor(chart, hoverBackgroundColor, clickBackgroundColor, activeBackgroundColor, textColor, activeTextColor) {
this.makeSwitcher = this.makeSwitcher.bind(this)
this.hoverBackgroundColor = hoverBackgroundColor
this.clickBackgroundColor = clickBackgroundColor
this.activeBackgroundColor = activeBackgroundColor
this.textColor = textColor
this.activeTextColor = activeTextColor
this.topBar = document.createElement('div')
this.topBar.style.backgroundColor = '#0c0d0f'
this.topBar.style.borderBottom = '2px solid #3C434C'
this.topBar.style.display = 'flex'
this.topBar.style.alignItems = 'center'
chart.wrapper.prepend(this.topBar)
}
makeSwitcher(items, activeItem, callbackName) {
let switcherElement = document.createElement('div');
switcherElement.style.margin = '4px 12px'
let widget = {
elem: switcherElement,
callbackName: callbackName,
}
let intervalElements = items.map((item)=> {
let itemEl = document.createElement('button');
itemEl.style.border = 'none'
itemEl.style.padding = '2px 5px'
itemEl.style.margin = '0px 2px'
itemEl.style.fontSize = '13px'
itemEl.style.borderRadius = '4px'
itemEl.style.backgroundColor = item === activeItem ? this.activeBackgroundColor : 'transparent'
itemEl.style.color = item === activeItem ? this.activeTextColor : this.textColor
itemEl.innerText = item;
document.body.appendChild(itemEl)
itemEl.style.minWidth = itemEl.clientWidth + 1 + 'px'
document.body.removeChild(itemEl)
itemEl.addEventListener('mouseenter', () => itemEl.style.backgroundColor = item === activeItem ? this.activeBackgroundColor : this.hoverBackgroundColor)
itemEl.addEventListener('mouseleave', () => itemEl.style.backgroundColor = item === activeItem ? this.activeBackgroundColor : 'transparent')
itemEl.addEventListener('mousedown', () => itemEl.style.backgroundColor = item === activeItem ? this.activeBackgroundColor : this.clickBackgroundColor)
itemEl.addEventListener('mouseup', () => itemEl.style.backgroundColor = item === activeItem ? this.activeBackgroundColor : this.hoverBackgroundColor)
itemEl.addEventListener('click', () => onItemClicked(item))
switcherElement.appendChild(itemEl);
return itemEl;
});
let onItemClicked = (item)=> {
if (item === activeItem) return
intervalElements.forEach((element, index) => {
element.style.backgroundColor = items[index] === item ? this.activeBackgroundColor : 'transparent'
element.style.color = items[index] === item ? this.activeTextColor : this.textColor
element.style.fontWeight = items[index] === item ? '500' : 'normal'
})
activeItem = item;
window.callbackFunction(`${widget.callbackName}_~_${item}`);
}
this.topBar.appendChild(switcherElement)
this.makeSeparator(this.topBar)
return widget
}
makeTextBoxWidget(text) {
let textBox = document.createElement('div')
textBox.style.margin = '0px 18px'
textBox.style.fontSize = '16px'
textBox.style.color = 'rgb(220, 220, 220)'
textBox.innerText = text
this.topBar.append(textBox)
this.makeSeparator(this.topBar)
return textBox
}
makeButton(defaultText, callbackName) {
let button = document.createElement('button')
button.style.border = 'none'
button.style.padding = '2px 5px'
button.style.margin = '4px 18px'
button.style.fontSize = '13px'
button.style.backgroundColor = 'transparent'
button.style.color = this.textColor
button.style.borderRadius = '4px'
button.innerText = defaultText;
document.body.appendChild(button)
button.style.minWidth = button.clientWidth+1+'px'
document.body.removeChild(button)
let widget = {
elem: button,
callbackName: callbackName
}
button.addEventListener('mouseenter', () => button.style.backgroundColor = this.hoverBackgroundColor)
button.addEventListener('mouseleave', () => button.style.backgroundColor = 'transparent')
button.addEventListener('click', () => window.callbackFunction(`${widget.callbackName}_~_${button.innerText}`));
button.addEventListener('mousedown', () => {
button.style.backgroundColor = this.activeBackgroundColor
button.style.color = this.activeTextColor
button.style.fontWeight = '500'
})
button.addEventListener('mouseup', () => {
button.style.backgroundColor = this.hoverBackgroundColor
button.style.color = this.textColor
button.style.fontWeight = 'normal'
})
this.topBar.appendChild(button)
return widget
}
makeSeparator() {
let seperator = document.createElement('div')
seperator.style.width = '1px'
seperator.style.height = '20px'
seperator.style.backgroundColor = '#3C434C'
this.topBar.appendChild(seperator)
}
}
window.TopBar = TopBar
}
function makeSearchBox(chart) {
let searchWindow = document.createElement('div')
searchWindow.style.position = 'absolute'
@ -37,19 +157,13 @@ function makeSearchBox(chart) {
let yPrice = null
chart.chart.subscribeCrosshairMove((param) => {
if (param.point){
yPrice = param.point.y;
}
});
if (param.point) yPrice = param.point.y;
})
let selectedChart = false
chart.wrapper.addEventListener('mouseover', (event) => {
selectedChart = true
})
chart.wrapper.addEventListener('mouseout', (event) => {
selectedChart = false
})
chart.wrapper.addEventListener('mouseover', (event) => selectedChart = true)
chart.wrapper.addEventListener('mouseout', (event) => selectedChart = false)
chart.commandFunctions.push((event) => {
if (!selectedChart) return
if (!selectedChart) return false
if (searchWindow.style.display === 'none') {
if (/^[a-zA-Z0-9]$/.test(event.key)) {
searchWindow.style.display = 'flex';
@ -58,22 +172,15 @@ function makeSearchBox(chart) {
}
else return false
}
else if (event.key === 'Enter') {
window.callbackFunction(`on_search_~_${chart.id}_~_${sBox.value}`)
searchWindow.style.display = 'none'
sBox.value = ''
return true
}
else if (event.key === 'Escape') {
else if (event.key === 'Enter' || event.key === 'Escape') {
if (event.key === 'Enter') window.callbackFunction(`search${chart.id}_~_${sBox.value}`)
searchWindow.style.display = 'none'
sBox.value = ''
return true
}
else return false
})
sBox.addEventListener('input', function() {
sBox.value = sBox.value.toUpperCase();
});
sBox.addEventListener('input', () => sBox.value = sBox.value.toUpperCase())
return {
window: searchWindow,
box: sBox,
@ -104,77 +211,4 @@ function makeSpinner(chart) {
animateSpinner();
}
function makeSwitcher(chart, items, activeItem, callbackName, activeBackgroundColor, activeColor, inactiveColor, hoverColor) {
let switcherElement = document.createElement('div');
switcherElement.style.margin = '4px 14px'
switcherElement.style.zIndex = '1000'
let intervalElements = items.map(function(item) {
let itemEl = document.createElement('button');
itemEl.style.cursor = 'pointer'
itemEl.style.padding = '2px 5px'
itemEl.style.margin = '0px 4px'
itemEl.style.fontSize = '13px'
itemEl.style.backgroundColor = item === activeItem ? activeBackgroundColor : 'transparent'
itemEl.style.color = item === activeItem ? activeColor : inactiveColor
itemEl.style.border = 'none'
itemEl.style.borderRadius = '4px'
itemEl.addEventListener('mouseenter', function() {
itemEl.style.backgroundColor = item === activeItem ? activeBackgroundColor : hoverColor
itemEl.style.color = activeColor
})
itemEl.addEventListener('mouseleave', function() {
itemEl.style.backgroundColor = item === activeItem ? activeBackgroundColor : 'transparent'
itemEl.style.color = item === activeItem ? activeColor : inactiveColor
})
itemEl.innerText = item;
itemEl.addEventListener('click', function() {
onItemClicked(item);
});
switcherElement.appendChild(itemEl);
return itemEl;
});
function onItemClicked(item) {
if (item === activeItem) {
return;
}
intervalElements.forEach(function(element, index) {
element.style.backgroundColor = items[index] === item ? activeBackgroundColor : 'transparent'
element.style.color = items[index] === item ? 'activeColor' : inactiveColor
});
activeItem = item;
window.callbackFunction(`${callbackName}_~_${chart.id}_~_${item}`);
}
chart.topBar.appendChild(switcherElement)
makeSeperator(chart.topBar)
return switcherElement;
}
function makeTextBoxWidget(chart, text) {
let textBox = document.createElement('div')
textBox.style.margin = '0px 18px'
textBox.style.fontSize = '16px'
textBox.style.color = 'rgb(220, 220, 220)'
textBox.innerText = text
chart.topBar.append(textBox)
makeSeperator(chart.topBar)
return textBox
}
function makeTopBar(chart) {
chart.topBar = document.createElement('div')
chart.topBar.style.backgroundColor = '#191B1E'
chart.topBar.style.borderBottom = '2px solid #3C434C'
chart.topBar.style.display = 'flex'
chart.topBar.style.alignItems = 'center'
chart.wrapper.prepend(chart.topBar)
}
function makeSeperator(topBar) {
let seperator = document.createElement('div')
seperator.style.width = '1px'
seperator.style.height = '20px'
seperator.style.backgroundColor = '#3C434C'
topBar.appendChild(seperator)
}

94
lightweight_charts/js/funcs.js
View File

@ -10,7 +10,8 @@ function makeChart(innerWidth, innerHeight, autoSize=true) {
height: innerHeight,
},
candleData: [],
commandFunctions: []
commandFunctions: [],
precision: 2,
}
chart.chart = LightweightCharts.createChart(chart.div, {
width: window.innerWidth*innerWidth,
@ -125,6 +126,12 @@ if (!window.HorizontalLine) {
this.line = this.chart.series.createPriceLine(this.priceLine)
}
updateColor(color) {
this.chart.series.removePriceLine(this.line)
this.priceLine.color = color
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))
@ -135,16 +142,17 @@ if (!window.HorizontalLine) {
window.HorizontalLine = HorizontalLine
class Legend {
constructor(chart, ohlcEnabled = true, percentEnabled = true, linesEnabled = true,
constructor(chart, ohlcEnabled, percentEnabled, linesEnabled,
color = 'rgb(191, 195, 203)', fontSize = '11', fontFamily = 'Monaco') {
this.div = document.createElement('div')
this.div.style.position = 'absolute'
this.div.style.zIndex = '3000'
this.div.style.pointerEvents = 'none'
this.div.style.top = '10px'
this.div.style.left = '10px'
this.div.style.display = 'flex'
this.div.style.flexDirection = 'column'
this.div.style.width = `${(chart.scale.width * 100) - 8}vw`
this.div.style.maxWidth = `${(chart.scale.width * 100) - 8}vw`
this.div.style.color = color
this.div.style.fontSize = fontSize + 'px'
this.div.style.fontFamily = fontFamily
@ -158,7 +166,16 @@ if (!window.HorizontalLine) {
this.linesEnabled = linesEnabled
this.makeLines(chart)
let legendItemFormat = (num) => num.toFixed(2).toString().padStart(8, ' ')
let legendItemFormat = (num, decimal) => num.toFixed(decimal).toString().padStart(8, ' ')
let shorthandFormat = (num) => {
if (num >= 1000000) {
return (num / 1000000).toFixed(1) + 'M';
} else if (num >= 1000) {
return (num / 1000).toFixed(1) + 'K';
}
return num.toString().padStart(8, ' ');
}
chart.chart.subscribeCrosshairMove((param) => {
if (param.time) {
@ -166,22 +183,23 @@ if (!window.HorizontalLine) {
let finalString = '<span style="line-height: 1.8;">'
if (data) {
this.candle.style.color = ''
let ohlc = `O ${legendItemFormat(data.open)}
| H ${legendItemFormat(data.high)}
| L ${legendItemFormat(data.low)}
| C ${legendItemFormat(data.close)} `
let ohlc = `O ${legendItemFormat(data.open, chart.precision)}
| H ${legendItemFormat(data.high, chart.precision)}
| L ${legendItemFormat(data.low, chart.precision)}
| C ${legendItemFormat(data.close, chart.precision)} `
let percentMove = ((data.close - data.open) / data.open) * 100
let percent = `| ${percentMove >= 0 ? '+' : ''}${percentMove.toFixed(2)} %`
finalString += ohlcEnabled ? ohlc : ''
finalString += percentEnabled ? percent : ''
let volumeData = param.seriesData.get(chart.volumeSeries)
if (volumeData) finalString += ohlcEnabled ? `<br>V ${shorthandFormat(volumeData.value)}` : ''
}
this.candle.innerHTML = finalString + '</span>'
this.lines.forEach((line) => {
if (!param.seriesData.get(line.line.series)) return
let price = legendItemFormat(param.seriesData.get(line.line.series).value)
line.div.innerHTML = `<span style="color: ${line.line.color};">▨</span> ${line.line.name} : ${price}`
let price = legendItemFormat(param.seriesData.get(line.line.series).value, line.line.precision)
line.div.innerHTML = `<span style="color: ${line.solid};">▨</span> ${line.line.name} : ${price}`
})
} else {
@ -215,6 +233,7 @@ if (!window.HorizontalLine) {
let toggle = document.createElement('div')
toggle.style.borderRadius = '4px'
toggle.style.marginLeft = '10px'
toggle.style.pointerEvents = 'auto'
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@ -258,6 +277,7 @@ if (!window.HorizontalLine) {
row: row,
toggle: toggle,
line: line,
solid: line.color.startsWith('rgba') ? line.color.replace(/[^,]+(?=\))/, '1') : line.color
}
}
}
@ -382,16 +402,20 @@ if (!window.ContextMenu) {
this.menu.style.position = 'absolute'
this.menu.style.zIndex = '10000'
this.menu.style.background = 'rgb(50, 50, 50)'
this.menu.style.color = 'lightgrey'
this.menu.style.color = '#ececed'
this.menu.style.display = 'none'
this.menu.style.borderRadius = '5px'
this.menu.style.padding = '3px 3px'
this.menu.style.fontSize = '14px'
this.menu.style.fontSize = '13px'
this.menu.style.cursor = 'default'
document.body.appendChild(this.menu)
this.hoverItem = null
let closeMenu = (event) => {
if (!this.menu.contains(event.target)) this.menu.style.display = 'none';
if (!this.menu.contains(event.target)) {
this.menu.style.display = 'none';
this.listen(false)
}
}
this.onRightClick = (event) => {
@ -406,16 +430,44 @@ if (!window.ContextMenu) {
listen(active) {
active ? document.addEventListener('contextmenu', this.onRightClick) : document.removeEventListener('contextmenu', this.onRightClick)
}
menuItem(text, action) {
menuItem(text, action, hover=false) {
let item = document.createElement('div')
item.style.display = 'flex'
item.style.alignItems = 'center'
item.style.justifyContent = 'space-between'
item.style.padding = '0px 10px'
item.style.margin = '3px 0px'
item.style.borderRadius = '3px'
this.menu.appendChild(item)
let elem = document.createElement('div')
elem.innerText = text
elem.style.padding = '0px 10px'
elem.style.borderRadius = '3px'
this.menu.appendChild(elem)
elem.addEventListener('mouseover', (event) => elem.style.backgroundColor = 'rgba(0, 122, 255, 0.3)')
elem.addEventListener('mouseout', (event) => elem.style.backgroundColor = 'transparent')
elem.addEventListener('click', (event) => {action(); this.menu.style.display = 'none'})
item.appendChild(elem)
if (hover) {
let arrow = document.createElement('div')
arrow.innerHTML = `<svg width="15px" height="10px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.82054 20.7313C8.21107 21.1218 8.84423 21.1218 9.23476 20.7313L15.8792 14.0868C17.0505 12.9155 17.0508 11.0167 15.88 9.84497L9.3097 3.26958C8.91918 2.87905 8.28601 2.87905 7.89549 3.26958C7.50497 3.6601 7.50497 4.29327 7.89549 4.68379L14.4675 11.2558C14.8581 11.6464 14.8581 12.2795 14.4675 12.67L7.82054 19.317C7.43002 19.7076 7.43002 20.3407 7.82054 20.7313Z" fill="#fff"/></svg>`
item.appendChild(arrow)
}
elem.addEventListener('mouseover', (event) => {
item.style.backgroundColor = 'rgba(0, 122, 255, 0.3)'
if (this.hoverItem && this.hoverItem.closeAction) this.hoverItem.closeAction()
this.hoverItem = {elem: elem, action: action, closeAction: hover}
})
elem.addEventListener('mouseout', (event) => item.style.backgroundColor = 'transparent')
if (!hover) elem.addEventListener('click', (event) => {action(event); this.menu.style.display = 'none'})
else elem.addEventListener('mouseover', () => action(item.getBoundingClientRect()))
}
separator() {
let separator = document.createElement('div')
separator.style.width = '90%'
separator.style.height = '1px'
separator.style.margin = '4px 0px'
separator.style.backgroundColor = '#3C434C'
this.menu.appendChild(separator)
}
}
window.ContextMenu = ContextMenu
}

26
lightweight_charts/js/table.js
View File

@ -1,8 +1,8 @@
if (!window.Table) {
class Table {
constructor(width, height, headings, widths, alignments, position, draggable = false, pythonMethod, chart) {
constructor(width, height, headings, widths, alignments, position, draggable = false, chart) {
this.container = document.createElement('div')
this.pythonMethod = pythonMethod
this.callbackName = null
this.chart = chart
if (draggable) {
@ -15,12 +15,12 @@ if (!window.Table) {
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.minHeight = 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.backgroundColor = '#121417'
this.container.style.borderRadius = '5px'
this.container.style.color = 'white'
this.container.style.fontSize = '12px'
@ -29,7 +29,8 @@ if (!window.Table) {
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.container.style.overflow = 'hidden'
this.rows = {}
this.headings = headings
@ -43,6 +44,9 @@ if (!window.Table) {
let th = document.createElement('th')
th.textContent = this.headings[i]
th.style.width = this.widths[i]
th.style.letterSpacing = '0.03rem'
th.style.padding = '0.2rem 0px'
th.style.fontWeight = '500'
th.style.textAlign = 'center'
row.appendChild(th)
th.style.border = '1px solid rgb(70, 70, 70)'
@ -93,10 +97,9 @@ if (!window.Table) {
}
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('mousedown', () => row.style.backgroundColor = 'rgba(60, 60, 60)')
row.addEventListener('click', () => window.callbackFunction(`${this.callbackName}_~_${id}`))
row.addEventListener('mouseup', () => row.style.backgroundColor = 'rgba(60, 60, 60, 0.6)')
this.rows[id] = row
@ -134,6 +137,11 @@ if (!window.Table) {
this.footer[i].style.textAlign = 'center'
}
}
toJSON() {
// Exclude the chart attribute from serialization
const {chart, ...serialized} = this;
return serialized;
}
}
window.Table = Table
}

242
lightweight_charts/js/toolbox.js
View File

@ -4,6 +4,7 @@ if (!window.ToolBox) {
this.onTrendSelect = this.onTrendSelect.bind(this)
this.onHorzSelect = this.onHorzSelect.bind(this)
this.onRaySelect = this.onRaySelect.bind(this)
this.saveDrawings = this.saveDrawings.bind(this)
this.chart = chart
this.drawings = []
@ -15,7 +16,8 @@ if (!window.ToolBox) {
this.activeIconColor = 'rgb(240, 240, 240)'
this.iconColor = 'lightgrey'
this.backgroundColor = 'transparent'
this.hoverColor = 'rgba(60, 60, 60, 0.7)'
this.hoverColor = 'rgba(80, 86, 94, 0.7)'
this.clickBackgroundColor = 'rgba(90, 106, 104, 0.7)'
this.elem = this.makeToolBox()
this.subscribeHoverMove()
@ -92,11 +94,15 @@ if (!window.ToolBox) {
icon.elem.addEventListener('mouseenter', () => {
icon.elem.style.backgroundColor = icon === this.chart.activeIcon ? this.activeBackgroundColor : this.hoverColor
document.body.style.cursor = 'pointer'
})
icon.elem.addEventListener('mouseleave', () => {
icon.elem.style.backgroundColor = icon === this.chart.activeIcon ? this.activeBackgroundColor : this.backgroundColor
document.body.style.cursor = this.chart.cursor
})
icon.elem.addEventListener('mousedown', () => {
icon.elem.style.backgroundColor = icon === this.chart.activeIcon ? this.activeBackgroundColor : this.clickBackgroundColor
})
icon.elem.addEventListener('mouseup', () => {
icon.elem.style.backgroundColor = icon === this.chart.activeIcon ? this.activeBackgroundColor : 'transparent'
})
icon.elem.addEventListener('click', () => {
if (this.chart.activeIcon) {
@ -118,6 +124,7 @@ if (!window.ToolBox) {
})
this.chart.commandFunctions.push((event) => {
if (event.altKey && event.code === keyCmd) {
event.preventDefault()
if (this.chart.activeIcon) {
this.chart.activeIcon.elem.style.backgroundColor = this.backgroundColor
group.setAttribute("fill", this.iconColor)
@ -140,6 +147,7 @@ if (!window.ToolBox) {
onTrendSelect(toggle, ray = false) {
let trendLine = {
line: null,
color: 'rgb(15, 139, 237)',
markers: null,
data: null,
from: null,
@ -160,17 +168,14 @@ if (!window.ToolBox) {
if (!this.makingDrawing) return
let logical
this.chart.chart.timeScale().applyOptions({shiftVisibleRangeOnNewBar: false})
let logical = this.chart.chart.timeScale().getVisibleLogicalRange()
let lastCandleTime = this.chart.candleData[this.chart.candleData.length - 1].time
currentTime = this.chart.chart.timeScale().coordinateToTime(param.point.x)
if (!currentTime) {
let barsToMove = param.logical - this.chart.chart.timeScale().coordinateToLogical(this.chart.chart.timeScale().timeToCoordinate(lastCandleTime))
logical = barsToMove <= 0 ? null : this.chart.chart.timeScale().getVisibleLogicalRange()
currentTime = dateToChartTime(new Date(chartTimeToDate(this.chart.candleData[this.chart.candleData.length - 1].time).getTime() + (barsToMove * this.interval)), this.interval)
} else if (chartTimeToDate(lastCandleTime).getTime() <= chartTimeToDate(currentTime).getTime()) {
logical = this.chart.chart.timeScale().getVisibleLogicalRange()
}
let currentPrice = this.chart.series.coordinateToPrice(param.point.y)
@ -179,19 +184,11 @@ if (!window.ToolBox) {
trendLine.from = [data[0].time, data[0].value]
trendLine.to = [data[data.length - 1].time, data[data.length-1].value]
if (ray) logical = this.chart.chart.timeScale().getVisibleLogicalRange()
trendLine.line.setData(data)
if (logical) {
this.chart.chart.applyOptions({handleScroll: false})
setTimeout(() => {
this.chart.chart.timeScale().applyOptions({shiftVisibleRangeOnNewBar: true})
this.chart.chart.timeScale().setVisibleLogicalRange(logical)
}, 1)
setTimeout(() => {
this.chart.chart.applyOptions({handleScroll: true})
}, 50)
}
if (!ray) {
trendLine.markers = [
{time: firstTime, position: 'inBar', color: '#1E80F0', shape: 'circle', size: 0.1},
@ -208,6 +205,7 @@ if (!window.ToolBox) {
if (!this.makingDrawing) {
this.makingDrawing = true
trendLine.line = this.chart.chart.addLineSeries({
color: 'rgb(15, 139, 237)',
lineWidth: 2,
lastValueVisible: false,
priceLineVisible: false,
@ -221,14 +219,11 @@ if (!window.ToolBox) {
})
firstPrice = this.chart.series.coordinateToPrice(param.point.y)
firstTime = !ray ? this.chart.chart.timeScale().coordinateToTime(param.point.x) : this.chart.candleData[this.chart.candleData.length - 1].time
this.chart.chart.applyOptions({
handleScroll: false
})
this.chart.chart.applyOptions({handleScroll: false})
this.chart.chart.subscribeCrosshairMove(crosshairHandlerTrend)
} else {
this.chart.chart.applyOptions({
handleScroll: true
})
}
else {
this.chart.chart.applyOptions({handleScroll: true})
this.makingDrawing = false
trendLine.line.setMarkers([])
this.drawings.push(trendLine)
@ -247,7 +242,7 @@ if (!window.ToolBox) {
clickHandlerHorz = (param) => {
let price = this.chart.series.coordinateToPrice(param.point.y)
let lineStyle = LightweightCharts.LineStyle.Solid
let line = new HorizontalLine(this.chart, 'toolBox', price, null, 2, lineStyle, true)
let line = new HorizontalLine(this.chart, 'toolBox', price,'red', 2, lineStyle, true)
this.drawings.push(line)
this.chart.chart.unsubscribeClick(this.clickHandlerHorz)
document.body.style.cursor = 'default'
@ -267,9 +262,16 @@ if (!window.ToolBox) {
subscribeHoverMove() {
let hoveringOver = null
let x, y
let colorPicker = new ColorPicker(this.saveDrawings)
let onClickDelete = () => this.deleteDrawing(contextMenu.drawing)
let onClickColor = (rect) => colorPicker.openMenu(rect, contextMenu.drawing)
let contextMenu = new ContextMenu()
contextMenu.menuItem('Color Picker', onClickColor, () =>{
document.removeEventListener('click', colorPicker.closeMenu)
colorPicker.container.style.display = 'none'
})
contextMenu.separator()
contextMenu.menuItem('Delete Drawing', onClickDelete)
let hoverOver = (param) => {
@ -325,9 +327,7 @@ if (!window.ToolBox) {
let checkForClick = (event) => {
mouseDown = true
document.body.style.cursor = 'grabbing'
this.chart.chart.applyOptions({
handleScroll: false
})
this.chart.chart.applyOptions({handleScroll: false})
this.chart.chart.unsubscribeCrosshairMove(hoverOver)
@ -354,7 +354,7 @@ if (!window.ToolBox) {
this.chart.chart.applyOptions({handleScroll: true})
if (hoveringOver && 'price' in hoveringOver && hoveringOver.id !== 'toolBox') {
window.callbackFunction(`on_horizontal_line_move_~_${this.chart.id}_~_${hoveringOver.id};;;${hoveringOver.price.toFixed(8)}`);
window.callbackFunction(`${hoveringOver.id}_~_${hoveringOver.price.toFixed(8)}`);
}
hoveringOver = null
document.removeEventListener('mousedown', checkForClick)
@ -390,14 +390,15 @@ if (!window.ToolBox) {
let endValue = hoveringOver.to[1] + priceDiff
let data = calculateTrendLine(startDate, startValue, endDate, endValue, this.interval, this.chart, hoveringOver.ray)
let logical
if (chartTimeToDate(data[data.length - 1].time).getTime() >= chartTimeToDate(this.chart.candleData[this.chart.candleData.length - 1].time).getTime()) {
logical = this.chart.chart.timeScale().getVisibleLogicalRange()
}
this.chart.chart.timeScale().applyOptions({shiftVisibleRangeOnNewBar: false})
let logical = this.chart.chart.timeScale().getVisibleLogicalRange()
hoveringOver.from = [data[0].time, data[0].value]
hoveringOver.to = [data[data.length - 1].time, data[data.length - 1].value]
hoveringOver.line.setData(data)
if (logical) this.chart.chart.timeScale().setVisibleLogicalRange(logical)
this.chart.chart.timeScale().applyOptions({shiftVisibleRangeOnNewBar: true})
this.chart.chart.timeScale().setVisibleLogicalRange(logical)
if (!hoveringOver.ray) {
hoveringOver.markers = [
@ -428,22 +429,23 @@ if (!window.ToolBox) {
firstPrice = hoveringOver.to[1]
}
let logical
this.chart.chart.timeScale().applyOptions({shiftVisibleRangeOnNewBar: false})
let logical = this.chart.chart.timeScale().getVisibleLogicalRange()
let lastCandleTime = this.chart.candleData[this.chart.candleData.length - 1].time
if (!currentTime) {
let barsToMove = param.logical - this.chart.chart.timeScale().coordinateToLogical(this.chart.chart.timeScale().timeToCoordinate(lastCandleTime))
logical = barsToMove <= 0 ? null : this.chart.chart.timeScale().getVisibleLogicalRange()
currentTime = dateToChartTime(new Date(chartTimeToDate(this.chart.candleData[this.chart.candleData.length - 1].time).getTime() + (barsToMove * this.interval)), this.interval)
} else if (chartTimeToDate(lastCandleTime).getTime() <= chartTimeToDate(currentTime).getTime()) {
logical = this.chart.chart.timeScale().getVisibleLogicalRange()
}
let data = calculateTrendLine(firstTime, firstPrice, currentTime, currentPrice, this.interval, this.chart)
hoveringOver.line.setData(data)
this.chart.chart.timeScale().applyOptions({shiftVisibleRangeOnNewBar: true})
this.chart.chart.timeScale().setVisibleLogicalRange(logical)
hoveringOver.from = [data[0].time, data[0].value]
hoveringOver.to = [data[data.length - 1].time, data[data.length - 1].value]
if (logical) this.chart.chart.timeScale().setVisibleLogicalRange(logical)
hoveringOver.markers = [
{time: firstTime, position: 'inBar', color: '#1E80F0', shape: 'circle', size: 0.1},
@ -468,7 +470,6 @@ if (!window.ToolBox) {
}
renderDrawings() {
//let logical = this.chart.chart.timeScale().getVisibleLogicalRange()
this.drawings.forEach((item) => {
if ('price' in item) return
let startDate = dateToChartTime(new Date(Math.round(chartTimeToDate(item.from[0]).getTime() / this.interval) * this.interval), this.interval)
@ -478,7 +479,6 @@ if (!window.ToolBox) {
item.to = [data[data.length - 1].time, data[data.length-1].value]
item.line.setData(data)
})
//this.chart.chart.timeScale().setVisibleLogicalRange(logical)
}
deleteDrawing(drawing) {
@ -486,10 +486,9 @@ if (!window.ToolBox) {
this.chart.series.removePriceLine(drawing.line)
}
else {
let logical
if (drawing.ray) logical = this.chart.chart.timeScale().getVisibleLogicalRange()
this.chart.chart.timeScale().applyOptions({shiftVisibleRangeOnNewBar: false})
this.chart.chart.removeSeries(drawing.line);
if (drawing.ray) this.chart.chart.timeScale().setVisibleLogicalRange(logical)
this.chart.chart.timeScale().applyOptions({shiftVisibleRangeOnNewBar: true})
}
this.drawings.splice(this.drawings.indexOf(drawing), 1)
this.saveDrawings()
@ -512,22 +511,22 @@ if (!window.ToolBox) {
}
return value;
});
window.callbackFunction(`save_drawings_~_${this.chart.id}_~_${drawingsString}`)
window.callbackFunction(`save_drawings${this.chart.id}_~_${drawingsString}`)
}
loadDrawings(drawings) {
this.drawings = drawings
this.chart.chart.applyOptions({
handleScroll: false
})
let logical = this.chart.chart.timeScale().getVisibleLogicalRange()
this.chart.chart.applyOptions({handleScroll: false})
this.chart.chart.timeScale().applyOptions({shiftVisibleRangeOnNewBar: false})
this.drawings.forEach((item) => {
let idx = this.drawings.indexOf(item)
if ('price' in item) {
this.drawings[this.drawings.indexOf(item)] = new HorizontalLine(this.chart, 'toolBox', item.priceLine.price, item.priceLine.color, 2, item.priceLine.lineStyle, item.priceLine.axisLabelVisible)
this.drawings[idx] = new HorizontalLine(this.chart, 'toolBox', item.priceLine.price, item.priceLine.color, 2, item.priceLine.lineStyle, item.priceLine.axisLabelVisible)
}
else {
this.drawings[this.drawings.indexOf(item)].line = this.chart.chart.addLineSeries({
this.drawings[idx].line = this.chart.chart.addLineSeries({
lineWidth: 2,
color: this.drawings[idx].color,
lastValueVisible: false,
priceLineVisible: false,
crosshairMarkerVisible: false,
@ -546,11 +545,140 @@ if (!window.ToolBox) {
item.line.setData(data)
}
})
this.chart.chart.applyOptions({
handleScroll: true
})
this.chart.chart.timeScale().setVisibleLogicalRange(logical)
this.chart.chart.applyOptions({handleScroll: true})
this.chart.chart.timeScale().applyOptions({shiftVisibleRangeOnNewBar: true})
}
}
window.ToolBox = ToolBox
}
if (!window.ColorPicker) {
class ColorPicker {
constructor(saveDrawings) {
this.saveDrawings = saveDrawings
this.container = document.createElement('div')
this.container.style.maxWidth = '170px'
this.container.style.backgroundColor = '#191B1E'
this.container.style.position = 'absolute'
this.container.style.zIndex = '10000'
this.container.style.display = 'none'
this.container.style.flexDirection = 'column'
this.container.style.alignItems = 'center'
this.container.style.border = '2px solid #3C434C'
this.container.style.borderRadius = '8px'
this.container.style.cursor = 'default'
let colorPicker = document.createElement('div')
colorPicker.style.margin = '10px'
colorPicker.style.display = 'flex'
colorPicker.style.flexWrap = 'wrap'
let colors = [
'#EBB0B0','#E9CEA1','#E5DF80','#ADEB97','#A3C3EA','#D8BDED',
'#E15F5D','#E1B45F','#E2D947','#4BE940','#639AE1','#D7A0E8',
'#E42C2A','#E49D30','#E7D827','#3CFF0A','#3275E4','#B06CE3',
'#F3000D','#EE9A14','#F1DA13','#2DFC0F','#1562EE','#BB00EF',
'#B50911','#E3860E','#D2BD11','#48DE0E','#1455B4','#6E009F',
'#7C1713','#B76B12','#8D7A13','#479C12','#165579','#51007E',
]
colors.forEach((color) => colorPicker.appendChild(this.makeColorBox(color)))
let separator = document.createElement('div')
separator.style.backgroundColor = '#3C434C'
separator.style.height = '1px'
separator.style.width = '130px'
let opacity = document.createElement('div')
opacity.style.margin = '10px'
let opacityText = document.createElement('div')
opacityText.style.color = 'lightgray'
opacityText.style.fontSize = '12px'
opacityText.innerText = 'Opacity'
let opacityValue = document.createElement('div')
opacityValue.style.color = 'lightgray'
opacityValue.style.fontSize = '12px'
let opacitySlider = document.createElement('input')
opacitySlider.type = 'range'
opacitySlider.value = this.opacity*100
opacityValue.innerText = opacitySlider.value+'%'
opacitySlider.oninput = () => {
opacityValue.innerText = opacitySlider.value+'%'
this.opacity = opacitySlider.value/100
this.updateColor()
}
opacity.appendChild(opacityText)
opacity.appendChild(opacitySlider)
opacity.appendChild(opacityValue)
this.container.appendChild(colorPicker)
this.container.appendChild(separator)
this.container.appendChild(opacity)
document.getElementById('wrapper').appendChild(this.container)
}
makeColorBox(color) {
let box = document.createElement('div')
box.style.width = '18px'
box.style.height = '18px'
box.style.borderRadius = '3px'
box.style.margin = '3px'
box.style.boxSizing = 'border-box'
box.style.backgroundColor = color
box.addEventListener('mouseover', (event) => box.style.border = '2px solid lightgray')
box.addEventListener('mouseout', (event) => box.style.border = 'none')
let rgbValues = this.extractRGB(color)
box.addEventListener('click', (event) => {
this.rgbValues = rgbValues
this.updateColor()
})
return box
}
extractRGB = (anyColor) => {
let dummyElem = document.createElement('div');
dummyElem.style.color = anyColor;
document.body.appendChild(dummyElem);
let computedColor = getComputedStyle(dummyElem).color;
document.body.removeChild(dummyElem);
let colorValues = computedColor.match(/\d+/g).map(Number);
let isRgba = computedColor.includes('rgba');
let opacity = isRgba ? parseFloat(computedColor.split(',')[3]) : 1
return [colorValues[0], colorValues[1], colorValues[2], opacity]
}
updateColor() {
let oColor = `rgba(${this.rgbValues[0]}, ${this.rgbValues[1]}, ${this.rgbValues[2]}, ${this.opacity})`
if ('price' in this.drawing) this.drawing.updateColor(oColor)
else {
this.drawing.color = oColor
this.drawing.line.applyOptions({color: oColor})
}
this.saveDrawings()
}
openMenu(rect, drawing) {
this.drawing = drawing
this.rgbValues = this.extractRGB('price' in drawing ? drawing.priceLine.color : drawing.color)
this.opacity = parseFloat(this.rgbValues[3])
this.container.style.top = (rect.top-30)+'px'
this.container.style.left = rect.right+'px'
this.container.style.display = 'flex'
setTimeout(() => document.addEventListener('mousedown', (event) => {
if (!this.container.contains(event.target)) {
this.closeMenu()
}
}), 10)
}
closeMenu(event) {
document.removeEventListener('click', this.closeMenu)
this.container.style.display = 'none'
}
}
window.ColorPicker = ColorPicker
}

61
lightweight_charts/polygon.py
View File

@ -1,6 +1,7 @@
import asyncio
import logging
import datetime as dt
import re
import threading
import queue
import json
@ -8,7 +9,6 @@ import ssl
from typing import Literal, Union, List
import pandas as pd
from lightweight_charts.util import _convert_timeframe
from lightweight_charts import Chart
try:
@ -21,6 +21,22 @@ except ImportError:
websockets = None
def convert_timeframe(timeframe):
spans = {
'min': 'minute',
'H': 'hour',
'D': 'day',
'W': 'week',
'M': 'month',
}
try:
multiplier = re.findall(r'\d+', timeframe)[0]
except IndexError:
return 1, spans[timeframe]
timespan = spans[timeframe.replace(multiplier, '')]
return multiplier, timespan
class PolygonAPI:
"""
Offers direct access to Polygon API data within all Chart objects.
@ -136,7 +152,7 @@ class PolygonAPI:
self._ws_q.put(('_unsubscribe', chart))
end_date = dt.datetime.now().strftime('%Y-%m-%d') if end_date == 'now' else end_date
mult, span = _convert_timeframe(timeframe)
mult, span = convert_timeframe(timeframe)
query_url = f"https://api.polygon.io/v2/aggs/ticker/{ticker.replace('-', '')}/range/{mult}/{span}/{start_date}/{end_date}?limit={limit}&apiKey={self._key}"
response = requests.get(query_url, headers={'User-Agent': 'lightweight_charts/1.0'})
@ -250,7 +266,10 @@ class PolygonAPI:
if sec_type == 'forex':
data['bp'] = data.pop('b')
data['ap'] = data.pop('a')
self._lasts[key]['price'] = (data['bp']+data['ap'])/2 if sec_type != 'indices' else data['val']
if sec_type == 'indices':
self._lasts[key]['price'] = data['val']
else:
self._lasts[key]['price'] = (data['bp']+data['ap'])/2
self._lasts[key]['volume'] = 0
elif data['ev'] in ('A', 'CA', 'XA'):
self._lasts[key]['volume'] = data['v']
@ -305,8 +324,7 @@ class PolygonChart(Chart):
security_options: tuple = ('Stock', 'Option', 'Index', 'Forex', 'Crypto'),
toolbox: bool = True, width: int = 800, height: int = 600, x: int = None, y: int = None,
on_top: bool = False, maximize: bool = False, debug: bool = False):
super().__init__(volume_enabled=True, width=width, height=height, x=x, y=y, on_top=on_top, maximize=maximize, debug=debug,
api=self, topbar=True, searchbox=True, toolbox=toolbox)
super().__init__(width=width, height=height, x=x, y=y, on_top=on_top, maximize=maximize, debug=debug, toolbox=toolbox)
self.chart = self
self.num_bars = num_bars
self.end_date = end_date
@ -316,26 +334,18 @@ class PolygonChart(Chart):
self.topbar.active_background_color = 'rgb(91, 98, 246)'
self.topbar.textbox('symbol')
self.topbar.switcher('timeframe', self._on_timeframe_selection, *timeframe_options)
self.topbar.switcher('security', self._on_security_selection, *security_options)
self.topbar.switcher('timeframe', timeframe_options, func=self._on_timeframe_selection)
self.topbar.switcher('security', security_options, func=self._on_security_selection)
self.legend(True)
self.grid(False, False)
self.crosshair(vert_visible=False, horz_visible=False)
self.events.search += self.on_search
self.run_script(f'''
{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 = "flex"
{self.id}.search.box.focus()
//let polyLogo = document.createElement('div')
//polyLogo.innerHTML = '<svg><g transform="scale(0.9)"><path d="M17.9821362,6 L24,12.1195009 L22.9236698,13.5060353 L17.9524621,27 L14.9907916,17.5798557 L12,12.0454987 L17.9821362,6 Z M21.437,15.304 L18.3670383,19.1065035 L18.367,23.637 L21.437,15.304 Z M18.203,7.335 L15.763,17.462 L17.595,23.287 L17.5955435,18.8249858 L22.963,12.176 L18.203,7.335 Z M17.297,7.799 L12.9564162,12.1857947 L15.228,16.389 L17.297,7.799 Z" fill="#FFFFFF"></path></g></svg>'
//polyLogo.style.position = 'absolute'
//polyLogo.style.width = '28px'
//polyLogo.style.zIndex = 10000
//polyLogo.style.right = '18px'
//polyLogo.style.top = '-1px'
//{self.id}.wrapper.appendChild(polyLogo)
''')
def _polygon(self, symbol):
@ -343,7 +353,7 @@ class PolygonChart(Chart):
self.set(pd.DataFrame(), True)
self.crosshair(vert_visible=False, horz_visible=False)
mult, span = _convert_timeframe(self.topbar['timeframe'].value)
mult, span = convert_timeframe(self.topbar['timeframe'].value)
delta = dt.timedelta(**{span + 's': int(mult)})
short_delta = (delta < dt.timedelta(days=7))
start_date = dt.datetime.now() if self.end_date == 'now' else dt.datetime.strptime(self.end_date, '%Y-%m-%d')
@ -367,18 +377,11 @@ class PolygonChart(Chart):
self.crosshair(vert_visible=True, horz_visible=True) if success else None
return success
async def on_search(self, searched_string): self.topbar['symbol'].set(searched_string if self._polygon(searched_string) else '')
async def on_search(self, chart, searched_string):
self.topbar['symbol'].set(searched_string if self._polygon(searched_string) else '')
async def _on_timeframe_selection(self):
async def _on_timeframe_selection(self, chart):
self._polygon(self.topbar['symbol'].value) if self.topbar['symbol'].value else None
async def _on_security_selection(self):
sec_type = self.topbar['security'].value
self.volume_enabled = False if sec_type == 'Index' else True
precision = 5 if sec_type == 'Forex' else 2
min_move = 1 / (10 ** precision) # 2 -> 0.1, 5 -> 0.00005 etc.
self.run_script(f'''
{self.chart.id}.series.applyOptions({{
priceFormat: {{precision: {precision}, minMove: {min_move}}}
}})''')
async def _on_security_selection(self, chart):
self.precision(5 if self.topbar['security'].value == 'Forex' else 2)

50
lightweight_charts/table.py
View File

@ -1,59 +1,67 @@
import random
from typing import Union
from lightweight_charts.util import _js_bool
from .util import jbool
class Footer:
def __init__(self, table):
self._table = table
self._chart = table._chart
def __init__(self, table): self._table = table
def __setitem__(self, key, value): self._chart.run_script(f'{self._table.id}.footer[{key}].innerText = "{value}"')
def __setitem__(self, key, value): self._table._run_script(f'{self._table.id}.footer[{key}].innerText = "{value}"')
def __call__(self, number_of_text_boxes): self._chart.run_script(f'{self._table.id}.makeFooter({number_of_text_boxes})')
def __call__(self, number_of_text_boxes): self._table._run_script(f'{self._table.id}.makeFooter({number_of_text_boxes})')
class Row(dict):
def __init__(self, table, id, items):
super().__init__()
self._table = table
self._chart = table._chart
self._run_script = table._run_script
self.id = id
self.meta = {}
self._table._chart.run_script(f'''{self._table.id}.newRow({list(items.values())}, '{self.id}')''')
self._run_script(f'''{self._table.id}.newRow({list(items.values())}, '{self.id}')''')
for key, val in items.items():
self[key] = val
def __setitem__(self, column, value):
str_value = str(value)
if isinstance(column, tuple):
return [self.__setitem__(col, val) for col, val in zip(column, value)]
original_value = value
if column in self._table._formatters:
str_value = self._table._formatters[column].replace(self._table.VALUE, str_value)
self._chart.run_script(f'''{self._table.id}.updateCell('{self.id}', '{column}', '{str_value}')''')
value = self._table._formatters[column].replace(self._table.VALUE, str(value))
self._run_script(f'{self._table.id}.updateCell("{self.id}", "{column}", "{value}")')
return super().__setitem__(column, value)
return super().__setitem__(column, original_value)
def background_color(self, column, color):
self._chart.run_script(f"{self._table.id}.rows[{self.id}]['{column}'].style.backgroundColor = '{color}'")
def background_color(self, column, color): self._style('backgroundColor', column, color)
def text_color(self, column, color): self._style('textColor', column, color)
def _style(self, style, column, arg):
self._run_script(f"{self._table.id}.rows[{self.id}]['{column}'].style.{style} = '{arg}'")
def delete(self):
self._chart.run_script(f"{self._table.id}.deleteRow('{self.id}')")
self._run_script(f"{self._table.id}.deleteRow('{self.id}')")
self._table.pop(self.id)
class Table(dict):
VALUE = 'CELL__~__VALUE__~__PLACEHOLDER'
def __init__(self, chart, width, height, headings, widths=None, alignments=None, position='left', draggable=False, method=None):
def __init__(self, chart, width, height, headings, widths=None, alignments=None, position='left', draggable=False, func=None):
super().__init__()
self._run_script = chart.run_script
self._chart = chart
self.headings = headings
self._formatters = {}
self.is_shown = True
self.id = self._chart._rand.generate()
self._chart.run_script(f'''
{self.id} = new Table({width}, {height}, {list(headings)}, {list(widths)}, {list(alignments)}, '{position}', {_js_bool(draggable)}, '{method}', {chart.id})
self.id = chart._rand.generate()
chart._handlers[self.id] = lambda rId: func(self[rId])
self._run_script(f'''
{self.id} = new Table({width}, {height}, {list(headings)}, {list(widths) if widths else []}, {list(alignments) if alignments else []},
'{position}', {jbool(draggable)}, {chart.id})
''')
self._run_script(f'{self.id}.callbackName = "{self.id}"') if func else None
self.footer = Footer(self)
def new_row(self, *values, id=None) -> Row:
@ -61,7 +69,7 @@ class Table(dict):
self[row_id] = Row(self, row_id, {heading: item for heading, item in zip(self.headings, values)})
return self[row_id]
def clear(self): self._chart.run_script(f"{self.id}.clearRows()"), super().clear()
def clear(self): self._run_script(f"{self.id}.clearRows()"), super().clear()
def get(self, __key: Union[int, str]) -> Row: return super().get(int(__key))
@ -71,7 +79,7 @@ class Table(dict):
def visible(self, visible: bool):
self.is_shown = visible
self._chart.run_script(f"""
self._run_script(f"""
{self.id}.container.style.display = '{'block' if visible else 'none'}'
{self.id}.container.{'add' if visible else 'remove'}EventListener('mousedown', {self.id}.onMouseDown)
""")

113
lightweight_charts/util.py
View File

@ -1,43 +1,20 @@
import re
import asyncio
from random import choices
from string import ascii_lowercase
from typing import Literal
class MissingColumn(KeyError):
def __init__(self, message):
super().__init__(message)
self.msg = message
def __str__(self):
return f'{self.msg}'
class ColorError(ValueError):
def __init__(self, message):
super().__init__(message)
self.msg = message
def __str__(self):
return f'{self.msg}'
class IDGen(list):
ascii = 'abcdefghijklmnopqrstuvwxyz'
def generate(self):
var = ''.join(choices(ascii_lowercase, k=8))
var = ''.join(choices(self.ascii, k=8))
if var not in self:
self.append(var)
return f'window.{var}'
self.generate()
def _valid_color(string):
if string[:3] == 'rgb' or string[:4] == 'rgba' or string[0] == '#':
return True
raise ColorError('Colors must be in the format of either rgb, rgba or hex.')
def _js_bool(b: bool): return 'true' if b is True else 'false' if b is False else None
def jbool(b: bool): return 'true' if b is True else 'false' if b is False else None
LINE_STYLE = Literal['solid', 'dotted', 'dashed', 'large_dashed', 'sparse_dotted']
@ -51,24 +28,24 @@ CROSSHAIR_MODE = Literal['normal', 'magnet']
PRICE_SCALE_MODE = Literal['normal', 'logarithmic', 'percentage', 'index100']
def _line_style(line: LINE_STYLE):
def line_style(line: LINE_STYLE):
js = 'LightweightCharts.LineStyle.'
return js+line[:line.index('_')].title() + line[line.index('_') + 1:].title() if '_' in line else js+line.title()
def _crosshair_mode(mode: CROSSHAIR_MODE):
def crosshair_mode(mode: CROSSHAIR_MODE):
return f'LightweightCharts.CrosshairMode.{mode.title()}' if mode else None
def _price_scale_mode(mode: PRICE_SCALE_MODE):
def price_scale_mode(mode: PRICE_SCALE_MODE):
return f"LightweightCharts.PriceScaleMode.{'IndexedTo100' if mode == 'index100' else mode.title() if mode else None}"
def _marker_shape(shape: MARKER_SHAPE):
def marker_shape(shape: MARKER_SHAPE):
return shape[:shape.index('_')]+shape[shape.index('_')+1:].title() if '_' in shape else shape.title()
def _marker_position(p: MARKER_POSITION):
def marker_position(p: MARKER_POSITION):
return {
'above': 'aboveBar',
'below': 'belowBar',
@ -77,17 +54,59 @@ def _marker_position(p: MARKER_POSITION):
}[p]
def _convert_timeframe(timeframe):
spans = {
'min': 'minute',
'H': 'hour',
'D': 'day',
'W': 'week',
'M': 'month',
}
try:
multiplier = re.findall(r'\d+', timeframe)[0]
except IndexError:
return 1, spans[timeframe]
timespan = spans[timeframe.replace(multiplier, '')]
return multiplier, timespan
class Emitter:
def __init__(self):
self._callable = None
def __iadd__(self, other):
self._callable = other
return self
def _emit(self, *args):
self._callable(*args) if self._callable else None
class JSEmitter:
def __init__(self, chart, name, on_iadd, wrapper=None):
self._on_iadd = on_iadd
self._chart = chart
self._name = name
self._wrapper = wrapper
def __iadd__(self, other):
def final_wrapper(*arg):
other(self._chart, *arg) if not self._wrapper else self._wrapper(other, self._chart, *arg)
async def final_async_wrapper(*arg):
await other(self._chart, *arg) if not self._wrapper else await self._wrapper(other, self._chart, *arg)
self._chart._handlers[self._name] = final_async_wrapper if asyncio.iscoroutinefunction(other) else final_wrapper
self._on_iadd(other)
return self
class Events:
def __init__(self, chart):
self.new_bar = Emitter()
from lightweight_charts.abstract import JS
self.search = JSEmitter(chart, f'search{chart.id}',
lambda o: chart.run_script(f'''
{JS['callback'] if not chart._callbacks_enabled else ''}
makeSpinner({chart.id})
{chart.id}.search = makeSearchBox({chart.id})
''')
)
self.range_change = JSEmitter(chart, f'range_change{chart.id}',
lambda o: chart.run_script(f'''
let checkLogicalRange = (logical) => {{
{chart.id}.chart.timeScale().unsubscribeVisibleLogicalRangeChange(checkLogicalRange)
let barsInfo = {chart.id}.series.barsInLogicalRange(logical)
if (barsInfo) window.callbackFunction(`range_change{chart.id}_~_${{barsInfo.barsBefore}};;;${{barsInfo.barsAfter}}`)
setTimeout(() => {chart.id}.chart.timeScale().subscribeVisibleLogicalRangeChange(checkLogicalRange), 50)
}}
{chart.id}.chart.timeScale().subscribeVisibleLogicalRangeChange(checkLogicalRange)
'''),
wrapper=lambda o, c, *arg: o(c, *[float(a) for a in arg])
)

64
lightweight_charts/widgets.py
View File

@ -1,5 +1,4 @@
import asyncio
from inspect import iscoroutinefunction
try:
import wx.html2
@ -19,6 +18,20 @@ try:
def callback(self, message):
_widget_message(self.chart, message)
except ImportError:
try:
from PySide6.QtWebEngineWidgets import QWebEngineView
from PySide6.QtWebChannel import QWebChannel
from PySide6.QtCore import QObject, Slot
class Bridge(QObject):
def __init__(self, chart):
super().__init__()
self.chart = chart
@Slot(str)
def callback(self, message):
_widget_message(self.chart, message)
except ImportError:
QWebEngineView = None
try:
from streamlit.components.v1 import html
@ -33,55 +46,43 @@ from lightweight_charts.abstract import LWC, JS
def _widget_message(chart, string):
messages = string.split('_~_')
name, chart_id = messages[:2]
arg = messages[2]
chart.api.chart = chart._charts[chart_id]
fixed_callbacks = ('on_search', 'on_horizontal_line_move')
func = chart._methods[name] if name not in fixed_callbacks else getattr(chart._api, name)
if hasattr(chart._api.chart, 'topbar') and (widget := chart._api.chart.topbar._widget_with_method(name)):
widget.value = arg
asyncio.create_task(func()) if asyncio.iscoroutinefunction(func) else func()
else:
asyncio.create_task(func(*arg.split(';;;'))) if asyncio.iscoroutinefunction(func) else func(*arg.split(';;;'))
name, args = string.split('_~_')
args = args.split(';;;')
func = chart._handlers[name]
asyncio.create_task(func(*args)) if asyncio.iscoroutinefunction(func) else func(*args)
class WxChart(LWC):
def __init__(self, parent, volume_enabled: bool = True, inner_width: float = 1.0, inner_height: float = 1.0,
scale_candles_only: bool = False, api: object = None, topbar: bool = False, searchbox: bool = False,
toolbox: bool = False):
def __init__(self, parent, inner_width: float = 1.0, inner_height: float = 1.0,
scale_candles_only: bool = False, toolbox: bool = False):
if wx is None:
raise ModuleNotFoundError('wx.html2 was not found, and must be installed to use WxChart.')
self.webview: wx.html2.WebView = wx.html2.WebView.New(parent)
super().__init__(volume_enabled, inner_width=inner_width, inner_height=inner_height,
scale_candles_only=scale_candles_only, topbar=topbar, searchbox=searchbox, toolbox=toolbox,
super().__init__(inner_width=inner_width, inner_height=inner_height,
scale_candles_only=scale_candles_only, toolbox=toolbox,
_js_api_code='window.wx_msg.postMessage.bind(window.wx_msg)')
self.api = api
self._script_func = self.webview.RunScript
self.webview.Bind(wx.html2.EVT_WEBVIEW_LOADED, lambda e: wx.CallLater(500, self._on_js_load))
self.webview.Bind(wx.html2.EVT_WEBVIEW_SCRIPT_MESSAGE_RECEIVED, lambda e: _widget_message(self, e.GetString()))
self.webview.AddScriptMessageHandler('wx_msg')
self.webview.SetPage(self._html, '')
self.webview.AddUserScript(JS['callback']) if topbar or searchbox else None
self.webview.AddUserScript(JS['toolbox']) if toolbox else None
def get_webview(self): return self.webview
class QtChart(LWC):
def __init__(self, widget=None, volume_enabled: bool = True, inner_width: float = 1.0, inner_height: float = 1.0,
scale_candles_only: bool = False, api: object = None, topbar: bool = False, searchbox: bool = False,
toolbox: bool = False):
def __init__(self, widget=None, inner_width: float = 1.0, inner_height: float = 1.0,
scale_candles_only: bool = False, toolbox: bool = False):
if QWebEngineView is None:
raise ModuleNotFoundError('QWebEngineView was not found, and must be installed to use QtChart.')
self.webview = QWebEngineView(widget)
super().__init__(volume_enabled, inner_width=inner_width, inner_height=inner_height,
scale_candles_only=scale_candles_only, topbar=topbar, searchbox=searchbox, toolbox=toolbox,
super().__init__(inner_width=inner_width, inner_height=inner_height,
scale_candles_only=scale_candles_only, toolbox=toolbox,
_js_api_code='window.pythonObject.callback')
self.api = api
self._script_func = self.webview.page().runJavaScript
self.web_channel = QWebChannel()
@ -106,8 +107,9 @@ class QtChart(LWC):
class StaticLWC(LWC):
def __init__(self, volume_enabled=True, width=None, height=None, inner_width=1, inner_height=1, scale_candles_only: bool = False, toolbox=False, autosize=True):
super().__init__(volume_enabled, inner_width, inner_height, scale_candles_only=scale_candles_only, toolbox=toolbox, autosize=autosize)
def __init__(self, width=None, height=None, inner_width=1, inner_height=1,
scale_candles_only: bool = False, toolbox=False, autosize=True):
super().__init__(inner_width, inner_height, scale_candles_only=scale_candles_only, toolbox=toolbox, autosize=autosize)
self.width = width
self.height = height
self._html = self._html.replace('</script>\n</body>\n</html>', '')
@ -130,8 +132,8 @@ class StaticLWC(LWC):
class StreamlitChart(StaticLWC):
def __init__(self, volume_enabled=True, width=None, height=None, inner_width=1, inner_height=1, scale_candles_only: bool = False, toolbox: bool = False):
super().__init__(volume_enabled, width, height, inner_width, inner_height, scale_candles_only, toolbox)
def __init__(self, width=None, height=None, inner_width=1, inner_height=1, scale_candles_only: bool = False, toolbox: bool = False):
super().__init__(width, height, inner_width, inner_height, scale_candles_only, toolbox)
def _load(self):
if html is None:
@ -140,8 +142,8 @@ class StreamlitChart(StaticLWC):
class JupyterChart(StaticLWC):
def __init__(self, volume_enabled=True, width: int = 800, height=350, inner_width=1, inner_height=1, scale_candles_only: bool = False, toolbox: bool = False):
super().__init__(volume_enabled, width, height, inner_width, inner_height, scale_candles_only, toolbox, autosize=False)
def __init__(self, width: int = 800, height=350, inner_width=1, inner_height=1, scale_candles_only: bool = False, toolbox: bool = False):
super().__init__(width, height, inner_width, inner_height, scale_candles_only, toolbox, autosize=False)
self._position = ""
self.run_script(f'''

2
setup.py
View File

@ -5,7 +5,7 @@ with open('README.md', 'r', encoding='utf-8') as f:
setup(
name='lightweight_charts',
version='1.0.15',
version='1.0.16',
packages=find_packages(),
python_requires='>=3.8',
install_requires=[