change axes and colors

app.ipynb

@@ -33,7 +33,7 @@
        "        "
       ],
       "text/plain": [
-       "<IPython.lib.display.IFrame at 0x1223e6960>"
+       "<IPython.lib.display.IFrame at 0x13f63e960>"
       ]
      },
      "metadata": {},

src/constants.py

@@ -1,9 +1,22 @@
 APP_INITIAL_TICKERS = ["QQQ", "SPY", "VTI", "VT"]
 APP_DATE_START = "2020-01-01"
 APP_INITIAL_INTERVAL_DAYS = 365
-APP_MAX_TICKERS = 8
+APP_MAX_TICKERS = 10
 
 PRICES_RETRIEVAL_INTERVAL = "1d"
 PRICES_EPS = 1e-6
 PRICES_ROLLING_WINDOW = 251
 PRICES_ROLLING_MIN_PERIOD = 1
+
+COLORS = [
+    "#4488FF",
+    "#FF8844",
+    "#00AA88",
+    "#8844FF",
+    "#FF4488",
+    "#66CCFF",
+    "#FFCC66",
+    "#66FFCC",
+    "#CC66FF",
+    "#FF66CC",
+]

src/style_elements.py

@@ -1,10 +1,10 @@
 import itertools
 from datetime import datetime
 
-import plotly.express as px
 import plotly.graph_objects as go
 from dash import dcc, html
 
+from src.constants import COLORS
 from src.utils import normalize_prices
 
 
@@ -112,7 +112,7 @@ def plot_prices(timestamps, prices, rolling_changes, idx_range):
     fig = go.Figure()
 
     # rangeslider plot
-    colors = itertools.cycle(px.colors.qualitative.Set2)
+    colors = itertools.cycle(COLORS)
     for asset in prices.columns:
         fig.add_trace(
             go.Scatter(
@@ -126,7 +126,7 @@ def plot_prices(timestamps, prices, rolling_changes, idx_range):
         )
 
     # main plot
-    colors = itertools.cycle(px.colors.qualitative.Set2)
+    colors = itertools.cycle(COLORS)
     for asset in prices_normalized.columns:
         y_values = 100 * prices_normalized[asset]
         formatted_values = [f"{val:+.2f}%" for val in y_values]
@@ -171,7 +171,7 @@ def plot_prices(timestamps, prices, rolling_changes, idx_range):
         autorange=True,
         title="relative price change",
         nticks=12,
-        tickformat=".0f",
+        tickformat="+d",
         ticksuffix="%",
         ticks="outside",
     )
@@ -180,7 +180,7 @@ def plot_prices(timestamps, prices, rolling_changes, idx_range):
         overlaying="y2",
         side="right",
         nticks=12,
-        tickformat=".0f",
+        tickformat="+d",
         ticksuffix="%",
         ticks="outside",
     )