Skip to content

Commit

Permalink
Feature/Interactive Plot CSV Bar (#4664)
Browse files Browse the repository at this point in the history 
* init

* cleanup

* Update popups.js

* Update popups.js

* Update plotly.html

* add hoverlabel to `ba/redditsent` #4618
  • Loading branch information
@tehcoderer @jmaslek
tehcoderer authored and jmaslek committed Apr 12, 2023
1 parent 3b79201 commit 90b4a69
Show file tree
Hide file tree
Showing 9 changed files with 273 additions and 130 deletions.
14 changes: 10 additions & 4 deletions openbb_terminal/common/behavioural_analysis/reddit_view.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

import logging
import os
import textwrap
from datetime import datetime
from typing import Dict, Optional, Union

Expand All @@ -24,9 +25,6 @@
logger = logging.getLogger(__name__)


# TODO: Test OpenBBFigure conversion


@log_start_end(log=logger)
@check_api_key(reddit_requirements)
def print_and_record_reddit_post(
Expand Down Expand Up @@ -317,11 +315,19 @@ def display_redditsent(
fig.add_bar(x=polarity_scores)

if graphic:
df["Title"] = df["Title"].apply(
lambda x: "<br>".join(textwrap.wrap(str(x), 50))
)
fig = OpenBBFigure(
title=f"Sentiment Score of {symbol}",
xaxis_title="Sentiment Score",
)
fig.add_bar(x=polarity_scores)
fig.add_bar(
x=polarity_scores,
customdata=df["Title"],
hovertemplate="%{customdata}<extra></extra>",
)
fig.update_layout(hovermode="y")

# remove y ticks of graph object because number based index doesn't make sense here
fig.layout.yaxis.tickvals = []
Expand Down
33 changes: 19 additions & 14 deletions openbb_terminal/core/plots/plotly.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
<div
id="openbb_footer"
class="_footer flex items-center justify-between gap-4 py-2 px-4 text-center"
style="z-index: 99999999999; width: 100%; bottom: 0; max-height: 60px;"
style="z-index: 99999999999; width: 100%; bottom: 0; max-height: 60px; font-size: 0px;"
>......................</div>

<div id="loading" class="saving">
Expand All @@ -71,37 +71,42 @@
<div id="popup_csv" class="popup_content">
<div>
<label for="csv_file">CSV file</label>
<input type="file" id="csv_file" accept=".csv, .txt" />
<input type="file" id="csv_file" accept=".csv" />
</div>

<div style="margin-top: 10px">
<label for="csv_trace_type">Display data type</label>
<div style="margin-top: 15px">
<label for="csv_trace_type"><b>Display data type:</b></label>
<select id="csv_trace_type" value="scatter">
<option value="scatter">Scatter</option>
<option value="bar">Bar</option>
<option value="candlestick">Candlestick</option>
<option value="scatter">Scatter (Line)</option>
</select>
</div>

<div style="margin-top: 10px">
<label for="csv_name">Name of the trace</label>
<div style="margin-top: 12px">
<label for="csv_name"><b>Trace Name:</b></label>
<textarea
id="csv_name" style="width: 100%; max-width: 100%;
id="csv_name" style="padding: 5px 2px 2px 5px !important; width: 100%; max-width: 100%;
max-height: 200px; margin-top: 8px;" rows="2" cols="20"
value="" placeholder="Enter a name for the trace"></textarea>
value="" placeholder="Enter a name to give this trace"></textarea>
</div>

<div style="margin-top: 10px" id="csv_columns"><!-- Empty --></div>
<div style="margin-top: 10px" id="csv_colors"><!-- Empty --></div>
<div style="margin-top: 15px" id="csv_columns"><!-- Empty --></div>
<div style="margin-top: 15px" id="csv_colors"><!-- Empty --></div>

<div style="margin-top: 10px; display: none;" id="csv_scatter_options">
<div style="margin-top: 10px; display: none;" id="csv_plot_yaxis_options">

<div id="csv_percent_change_div" style="display: none;">
<input type="checkbox" id="csv_percent_change" name="csv_scatter_check" onclick="onlyOne(this)" />
<input type="checkbox" id="csv_percent_change" name="csv_plot_yaxis_check" onclick="onlyOne(this)" />
<label for="csv_percent_change">Plot as percent change from first value</label>
</div><br />

<input type="checkbox" id="csv_same_yaxis" name="csv_scatter_check" onclick="onlyOne(this)" />
<input type="checkbox" id="csv_same_yaxis" name="csv_plot_yaxis_check" onclick="onlyOne(this)" />
<label for="csv_same_yaxis">Share Y-axis</label>
</div>
<div style="margin-top: 2px; display: none;" id="csv_bar_orientation">
<input type="checkbox" id="csv_bar_horizontal" />
<label for="csv_bar_horizontal">Plot horizontally</label>
</div><br />

<div style="float: right; margin-top: 20px">
Expand Down
8 changes: 6 additions & 2 deletions openbb_terminal/core/plots/plotly_helper.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1530,7 +1530,7 @@ def _adjust_margins(self) -> None:
return

margin_add = (
dict(l=80, r=60, b=85, t=40, pad=0)
dict(l=80, r=60, b=90, t=40, pad=0)
if not self._has_secondary_y
else dict(l=60, r=50, b=85, t=40, pad=0)
)
Expand Down Expand Up @@ -1599,7 +1599,11 @@ def _add_cmd_source(self) -> None:
self.layout.margin["l"] += 20

if (yaxis2 and yaxis2.side == "left") or yaxis.side == "left":
title = yaxis.title.text if not yaxis2 else yaxis2.title.text
title = (
yaxis.title.text
if not yaxis2 or yaxis2.side != "left"
else yaxis2.title.text
)
xshift = -110 if not title else -135
self.layout.margin["l"] += 60

Expand Down
4 changes: 2 additions & 2 deletions openbb_terminal/core/plots/web/bar_menus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -244,8 +244,8 @@ function downloadImage(filename, extension) {
imageDownload = domtoimage.toPng;
} else if (extension == "jpeg") {
imageDownload = domtoimage.toJpeg;
// } else if (extension == "svg") {
// imageDownload = domtoimage.toSvg;
// } else if (extension == "svg") {
// imageDownload = domtoimage.toSvg;
} else if (["svg", "pdf"].includes(extension)) {
Plotly.downloadImage(globals.CHART_DIV, {
format: "svg",
Expand Down
38 changes: 25 additions & 13 deletions openbb_terminal/core/plots/web/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,10 @@ const ICONS = {
};

function onlyOne(checkbox) {
var checkboxes = document.getElementsByName('csv_scatter_check')
var checkboxes = document.getElementsByName("csv_plot_yaxis_check");
checkboxes.forEach((item) => {
if (item !== checkbox) item.checked = false
})
if (item !== checkbox) item.checked = false;
});
}

function add_annotation(data, yshift, popup_data, current_text = null) {
Expand Down Expand Up @@ -97,10 +97,13 @@ function checkFile(popup, type = false) {
let csv_type = popup.querySelector("#csv_trace_type");
let csv_columns = popup.querySelector("#csv_columns");
let csv_colors = popup.querySelector("#csv_colors");
let csv_scatter_options = popup.querySelector("#csv_scatter_options");
csv_scatter_options.style.display = "none";
csv_scatter_options.querySelector("#csv_percent_change_div").style.display = "inline-block";

let csv_plot_yaxis_options = popup.querySelector("#csv_plot_yaxis_options");
let csv_bar_orientation = popup.querySelector("#csv_bar_orientation");
csv_plot_yaxis_options.style.display = "none";
csv_bar_orientation.style.display = "none";
csv_plot_yaxis_options.querySelector(
"#csv_percent_change_div"
).style.display = "inline-block";

if (csv_file.files.length > 0) {
console.log("file selected");
Expand Down Expand Up @@ -158,7 +161,7 @@ function checkFile(popup, type = false) {
`;

csv_colors.innerHTML = `
<b>Candlestick colors:</b><br><br>
<b>Candlestick colors:</b><br>
<label for="csv_increasing">Increasing</label>
<input type="color" id="csv_increasing" value="#00ACFF"></input>
Expand All @@ -175,11 +178,13 @@ function checkFile(popup, type = false) {
headers[headers_lower.indexOf("date")];
}
}
globals.CSV_DIV.querySelector("#csv_percent_change_div").style.display = "none";
globals.CSV_DIV.querySelector("#csv_percent_change_div").style.display =
"none";
} else {
let color_text = csv_type.value == "bar" ? "Bar color" : "Line color";
csv_columns.innerHTML = `
<b>Columns:</b><br>
<div style="margin-top: 5px; margin-bottom: 5px;">
<div style="margin-top: 5px; margin-bottom: 10px;">
<label for="csv_x">X axis</label>
<select id="csv_x">
${options}
Expand All @@ -189,11 +194,12 @@ function checkFile(popup, type = false) {
<label for="csv_y">Y axis</label>
<select id="csv_y">
${options}
</select><br><br>
</select>
</div>
`;
csv_colors.innerHTML = `
<label for="csv_color"><b>Line color:</b></label>
<label style="margin-top: 10px; margin-bottom: 10px;"
for="csv_color"><b>${color_text}:</b></label>
<input type="color" id="csv_color" value="#FFDD00"></input>
`;

Expand All @@ -213,7 +219,13 @@ function checkFile(popup, type = false) {
headers[headers_lower.indexOf("close")];
}
}
csv_scatter_options.style.display = "inline-block";
if (csv_type.value == "bar") {
csv_bar_orientation.style.display = "inline-block";
globals.CSV_DIV.querySelector("#csv_percent_change_div").style.display =
"none";
}

csv_plot_yaxis_options.style.display = "inline-block";

// we try to guess the date and time to remove from the name of the file
// if "_" in the name of the file,
Expand Down
Loading

0 comments on commit 90b4a69

Please sign in to comment.