mirror of
https://github.com/OpenBB-finance/OpenBB.git
synced 2026-11-06 09:22:26 +00:00
Add dashboard widget assets
This commit is contained in:
Theodore Aptekarev
42
gamestonk_terminal/jupyter/dashboards/widget_helpers.py
Normal file
42
gamestonk_terminal/jupyter/dashboards/widget_helpers.py
Normal file
@@ -0,0 +1,42 @@
|
||||
"""Widgets Helper Library.
|
||||
|
||||
A library of `ipywidgets` wrappers for notebook based reports and voila dashboards.
|
||||
The library includes both python code and html/css/js elements that can be found in the
|
||||
`./widgets` folder.
|
||||
"""
|
||||
import os
|
||||
from jinja2 import Template
|
||||
|
||||
|
||||
def stylesheet():
|
||||
"""Load a default CSS stylesheet from file."""
|
||||
with open(
|
||||
os.path.join(os.path.dirname(os.path.abspath(__file__)), "widgets", "style.css")
|
||||
) as f:
|
||||
style = f.read()
|
||||
return style
|
||||
|
||||
|
||||
def price_card(ticker: str, price: str, price_color: str = "neutral_color") -> str:
|
||||
"""Prepare a styled HTML element of a 128 by 128 price card.
|
||||
|
||||
Parameters
|
||||
----------
|
||||
ticker : str
|
||||
Instrument ticker for the price card
|
||||
price : str
|
||||
Instrument price as a string
|
||||
price_color : str, optional
|
||||
The color of the price. Accepts "up_color", "down_color" and default "neutral_color"
|
||||
|
||||
Returns
|
||||
-------
|
||||
str
|
||||
HTML code as string
|
||||
"""
|
||||
with open(
|
||||
os.path.join(os.path.dirname(os.path.abspath(__file__)), "widgets", "card.j2")
|
||||
) as f:
|
||||
template = Template(f.read())
|
||||
card = template.render(ticker=ticker, price=price, price_color=price_color)
|
||||
return card
|
||||
8
gamestonk_terminal/jupyter/dashboards/widgets/card.j2
vendored
Normal file
8
gamestonk_terminal/jupyter/dashboards/widgets/card.j2
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
<div class="contentBx">
|
||||
<h1>{{ ticker }}</h1>
|
||||
<h2 class="{{ price_color }}">{{ price }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
237
gamestonk_terminal/jupyter/dashboards/widgets/currencies.json
vendored
Normal file
237
gamestonk_terminal/jupyter/dashboards/widgets/currencies.json
vendored
Normal file
@@ -0,0 +1,237 @@
|
||||
{
|
||||
"global": {
|
||||
"tabSetEnableClose": true,
|
||||
"tabSetEnableTabStrip": false,
|
||||
"tabSetTabLocation": "bottom"
|
||||
},
|
||||
"borders": [],
|
||||
"layout": {
|
||||
"type": "row",
|
||||
"id": "#1",
|
||||
"children": [
|
||||
{
|
||||
"type": "tabset",
|
||||
"id": "#2",
|
||||
"children": [
|
||||
{
|
||||
"type": "tab",
|
||||
"id": "#3",
|
||||
"name": "New section ",
|
||||
"component": "sub",
|
||||
"config": {
|
||||
"model": {
|
||||
"global": {
|
||||
"tabSetEnableClose": true
|
||||
},
|
||||
"borders": [],
|
||||
"layout": {
|
||||
"type": "row",
|
||||
"id": "#1",
|
||||
"children": [
|
||||
{
|
||||
"type": "row",
|
||||
"id": "#930eb3e5-1999-46b8-afc6-01d731dcb211",
|
||||
"children": [
|
||||
{
|
||||
"type": "row",
|
||||
"id": "#5debcdc6-eaaf-4224-83a7-17f9908a7a78",
|
||||
"height": 145,
|
||||
"children": [
|
||||
{
|
||||
"type": "tabset",
|
||||
"id": "#ca43de5d-5956-4fe3-8f55-94eb954a2886",
|
||||
"width": 142,
|
||||
"children": [
|
||||
{
|
||||
"type": "tab",
|
||||
"id": "#ff22f410-6265-4a7b-b975-1dc8676fb138",
|
||||
"name": "EUR/USD",
|
||||
"component": "Widget",
|
||||
"config": {
|
||||
"layoutID": "#3"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "tabset",
|
||||
"id": "#6bf131b1-a6eb-4b8f-941a-14e0655acd79",
|
||||
"width": 142,
|
||||
"children": [
|
||||
{
|
||||
"type": "tab",
|
||||
"id": "#8b10c77b-40f2-40e6-9673-13ddcc8238c1",
|
||||
"name": "USD/JPY",
|
||||
"component": "Widget",
|
||||
"config": {
|
||||
"layoutID": "#3"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "tabset",
|
||||
"id": "#6939401f-4c4d-41dd-9849-fd3178320122",
|
||||
"width": 142,
|
||||
"children": [
|
||||
{
|
||||
"type": "tab",
|
||||
"id": "#7bd5f16d-d127-46f8-86a0-f413feff3b92",
|
||||
"name": "GBP/USD",
|
||||
"component": "Widget",
|
||||
"config": {
|
||||
"layoutID": "#3"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "tabset",
|
||||
"id": "#61c25933-b899-4d59-aad8-e1e98df13b7d",
|
||||
"width": 142,
|
||||
"children": [
|
||||
{
|
||||
"type": "tab",
|
||||
"id": "#762d37fc-312e-4f16-8541-af486fe2ec4f",
|
||||
"name": "AUD/USD",
|
||||
"component": "Widget",
|
||||
"config": {
|
||||
"layoutID": "#3"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "tabset",
|
||||
"id": "#d44c4bf6-c879-46fc-bb57-80fd352ae872",
|
||||
"width": 142,
|
||||
"children": [
|
||||
{
|
||||
"type": "tab",
|
||||
"id": "#fc1a8e88-160f-41d3-b5d8-d4d9abc5ac44",
|
||||
"name": "USD/CAD",
|
||||
"component": "Widget",
|
||||
"config": {
|
||||
"layoutID": "#3"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "tabset",
|
||||
"id": "#298c01a6-e058-4e2d-8ac6-ebb279716761",
|
||||
"width": 142,
|
||||
"children": [
|
||||
{
|
||||
"type": "tab",
|
||||
"id": "#c2dfcb8c-9078-44f1-9118-3beebc3181d4",
|
||||
"name": "USD/CNY",
|
||||
"component": "Widget",
|
||||
"config": {
|
||||
"layoutID": "#3"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "tabset",
|
||||
"id": "#f544d439-5557-470f-ad2b-8f6168a40b77",
|
||||
"width": 142,
|
||||
"children": [
|
||||
{
|
||||
"type": "tab",
|
||||
"id": "#d1f5dcf1-5643-49dd-aa28-725287f1b3f2",
|
||||
"name": "USD/CHF",
|
||||
"component": "Widget",
|
||||
"config": {
|
||||
"layoutID": "#3"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "tabset",
|
||||
"id": "#bcbbac20-d71f-4e6a-990e-b2a5d0a11255",
|
||||
"width": 142,
|
||||
"children": [
|
||||
{
|
||||
"type": "tab",
|
||||
"id": "#65907a81-d976-482a-b1df-45de9317cad2",
|
||||
"name": "USD/HKD",
|
||||
"component": "Widget",
|
||||
"config": {
|
||||
"layoutID": "#3"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "row",
|
||||
"id": "#410cd13c-0d14-4ada-8aad-5cfc522d1421",
|
||||
"weight": 15,
|
||||
"children": [
|
||||
{
|
||||
"type": "tabset",
|
||||
"id": "#d83b1943-b895-43bd-9f0f-d36672194a58",
|
||||
"width": 256,
|
||||
"children": [
|
||||
{
|
||||
"type": "tab",
|
||||
"id": "#044a38ed-6f61-4586-ae3f-8c76c494351b",
|
||||
"name": "Select",
|
||||
"component": "Widget",
|
||||
"config": {
|
||||
"layoutID": "#3"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "tabset",
|
||||
"id": "#239aa076-2c4d-44da-a9ed-6f8ad9b27c30",
|
||||
"weight": 75,
|
||||
"children": [
|
||||
{
|
||||
"type": "tab",
|
||||
"id": "#3f45998e-34f5-42b0-9980-d07f9fff2eb5",
|
||||
"name": "Historical",
|
||||
"component": "Widget",
|
||||
"config": {
|
||||
"layoutID": "#3"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "tabset",
|
||||
"id": "#1fd33f67-3fdd-4f36-822a-ac0ee05ad8ab",
|
||||
"weight": 85,
|
||||
"children": [
|
||||
{
|
||||
"type": "tab",
|
||||
"id": "#4b4ab553-fc3a-4984-93ad-99b89def2dc4",
|
||||
"name": "Candle",
|
||||
"component": "Widget",
|
||||
"config": {
|
||||
"layoutID": "#3"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"active": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
54
gamestonk_terminal/jupyter/dashboards/widgets/style.css
vendored
Normal file
54
gamestonk_terminal/jupyter/dashboards/widgets/style.css
vendored
Normal file
@@ -0,0 +1,54 @@
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container .card {
|
||||
font-family: Consolas, sans-serif;
|
||||
position: relative;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
background: #000000;
|
||||
border-radius: 5px;
|
||||
border-color: rgb(142, 142, 142);
|
||||
border-style: solid;
|
||||
border-width: 0.5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container .card .contentBx {
|
||||
position: absolute;
|
||||
top: 28;
|
||||
bottom: 32;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.container .card .contentBx h1 {
|
||||
position: relative;
|
||||
font-size: 28;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
color: #fff;
|
||||
margin-top: 28px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.container .card .contentBx h2 {
|
||||
position: relative;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.up_color {
|
||||
color: #00ACFF;
|
||||
}
|
||||
|
||||
.down_color {
|
||||
color: #e4003a;
|
||||
}
|
||||
|
||||
.neutral_color {
|
||||
color: #ffed00;
|
||||
}
|
||||
Reference in New Issue
Block a user