Fix shaded rendering for msd plot (#331)

* Fix shaded rendering

* Fix autocorrelation shade rendering

src/gemdat/plots/_shared.py

@@ -75,3 +75,12 @@ def _fit_skewnorm_to_hist(
     y = skewnorm.pdf(x, *params)
 
     return x, y
+
+
+def hex2rgba(hex_color: str, *, opacity: float = 1) -> str:
+    """Convert hex string to rgba."""
+    r = int(hex_color[1:3], 16)
+    g = int(hex_color[3:5], 16)
+    b = int(hex_color[5:7], 16)
+
+    return f'rgba({r},{g},{b},{opacity})'

src/gemdat/plots/plotly/_autocorrelation.py

@@ -5,6 +5,8 @@
 import numpy as np
 import plotly.graph_objects as go
 
+from gemdat.plots._shared import hex2rgba
+
 if TYPE_CHECKING:
     from gemdat.orientations import Orientations
 
@@ -40,23 +42,48 @@ def autocorrelation(
 
     fig = go.Figure()
 
-    if show_shaded:
-        error_y = {'type': 'data', 'array': ac_std, 'width': 0.1, 'thickness': 0.1}
-    else:
-        error_y = None
+    color_hex = fig.layout['template']['layout']['colorway'][0]
+    color_rgba = hex2rgba(color_hex, opacity=0.3)
 
     fig.add_trace(
         go.Scatter(
             x=t_values,
             y=ac_mean,
-            error_y=error_y,
+            line_color=color_hex,
             name='FFT Autocorrelation',
             mode='lines',
             line={'width': 3},
             legendgroup='autocorr',
+            zorder=10,
         )
     )
 
+    if show_shaded:
+        fig.add_trace(
+            go.Scatter(
+                x=t_values,
+                y=ac_mean + ac_std,
+                fillcolor=color_rgba,
+                mode='lines',
+                line={'width': 0},
+                legendgroup='autocorr',
+                showlegend=False,
+                zorder=0,
+            )
+        )
+        fig.add_trace(
+            go.Scatter(
+                x=t_values,
+                y=ac_mean - ac_std,
+                fillcolor=color_rgba,
+                mode='none',
+                legendgroup='autocorr',
+                showlegend=False,
+                fill='tonexty',
+                zorder=0,
+            )
+        )
+
     if show_traces:
         for i, trace in enumerate(ac):
             fig.add_trace(
@@ -67,6 +94,7 @@ def autocorrelation(
                     mode='lines',
                     line={'width': 0.25},
                     showlegend=False,
+                    zorder=5,
                 )
             )
 

src/gemdat/plots/plotly/_msd_per_element.py

@@ -5,6 +5,8 @@
 import numpy as np
 import plotly.graph_objects as go
 
+from gemdat.plots._shared import hex2rgba
+
 if TYPE_CHECKING:
     from gemdat.trajectory import Trajectory
 
@@ -24,27 +26,56 @@ def msd_per_element(*, trajectory: Trajectory) -> go.Figure:
     """
     fig = go.Figure()
 
+    time_ps = trajectory.time_step_ps
+
     species = list(set(trajectory.species))
 
-    time_ps = trajectory.time_step_ps
+    for i, sp in enumerate(species):
+        color_hex = fig.layout['template']['layout']['colorway'][i]
+        color_rgba = hex2rgba(color_hex, opacity=0.3)
 
-    for sp in species:
         traj = trajectory.filter(sp.symbol)
 
         msd = traj.mean_squared_displacement()
         msd_mean = np.mean(msd, axis=0)
         msd_std = np.std(msd, axis=0)
         t_values = np.arange(len(msd_mean)) * time_ps
 
+        fig.add_trace(
+            go.Scatter(
+                x=t_values,
+                y=msd_mean + msd_std,
+                fillcolor=color_rgba,
+                mode='lines',
+                line={'width': 0},
+                legendgroup=sp.symbol,
+                showlegend=False,
+                zorder=0,
+            )
+        )
+        fig.add_trace(
+            go.Scatter(
+                x=t_values,
+                y=msd_mean - msd_std,
+                fillcolor=color_rgba,
+                mode='none',
+                legendgroup=sp.symbol,
+                showlegend=False,
+                fill='tonexty',
+                zorder=0,
+            )
+        )
+
         fig.add_trace(
             go.Scatter(
                 x=t_values,
                 y=msd_mean,
-                error_y=dict(type='data', array=msd_std, width=0.1, thickness=0.1),
                 name=f'{sp.symbol} mean+std',
+                line_color=color_hex,
                 mode='lines',
                 line={'width': 3},
                 legendgroup=sp.symbol,
+                zorder=1,
             )
         )