UTI: UX Styling

[csit.git] / resources / tools / dash / app / pal / trending / layout.yaml

diff --git a/resources/tools/dash/app/pal/trending/layout.yaml b/resources/tools/dash/app/pal/trending/layout.yaml
index 86a9f19..9645b74 100644 (file)
--- a/resources/tools/dash/app/pal/trending/layout.yaml
+++ b/resources/tools/dash/app/pal/trending/layout.yaml
@@ -1,11 +1,11 @@
 plot-trending-tput:
-  title: ""
-  titlefont:
-    size: 16
+  # title: ""
+  # titlefont:
+  #   size: 16
   autosize: True
   showlegend: True
   # width: 1100
-  height: 600
+  #height: 400
   yaxis:
     showticklabels: True
     tickformat: ".3s"
@@ -77,17 +77,17 @@ plot-trending-tput:
     namelength: -1
 
 plot-trending-lat:
-  title: ""
-  titlefont:
-    size: 16
+  # title: ""
+  # titlefont:
+  #   size: 16
   autosize: True
   showlegend: True
   # width: 1100
-  height: 600
+  #height: 400
   yaxis:
     showticklabels: True
     tickformat: ".3s"
-    title: "Latency [us]"
+    title: "Average Latency at 50% PDR [us]"
     hoverformat: ".5s"
     gridcolor: "rgb(238, 238, 238)"
     linecolor: "rgb(238, 238, 238)"
@@ -153,3 +153,58 @@ plot-trending-lat:
   plot_bgcolor: "#fff"
   hoverlabel:
     namelength: -1
+
+plot-hdrh-latency:
+  title:
+    text: "Latency by Percentile Distribution"
+    xanchor: "center"
+    x: 0.5
+    # font:
+    #   size: 10
+  showlegend: True
+  legend:
+    traceorder: "normal"
+    orientation: "h"
+    # font:
+    #   size: 16
+    xanchor: "left"
+    yanchor: "top"
+    x: 0
+    y: -0.25
+    bgcolor: "rgba(255, 255, 255, 0)"
+    bordercolor: "rgba(255, 255, 255, 0)"
+  xaxis:
+    type: "log"
+    title: "Percentile [%]"
+    # titlefont:
+    #   size: 14
+    autorange: False
+    fixedrange: True
+    gridcolor: "rgb(230, 230, 230)"
+    linecolor: "rgb(220, 220, 220)"
+    linewidth: 1
+    showgrid: True
+    showline: True
+    showticklabels: True
+    tickcolor: "rgb(220, 220, 220)"
+    tickvals: [1, 2, 1e1, 20, 1e2, 1e3, 1e4, 1e5, 1e6]
+    ticktext: [0, 50, 90, 95, 99, 99.9, 99.99, 99.999, 99.9999]
+    # tickfont:
+    #   size: 14
+  yaxis:
+    title: "One-Way Latency per Direction [uSec]"
+    # titlefont:
+    #   size: 14
+    gridcolor: "rgb(230, 230, 230)"
+    linecolor: "rgb(220, 220, 220)"
+    linewidth: 1
+    showgrid: True
+    showline: True
+    showticklabels: True
+    tickcolor: "rgb(220, 220, 220)"
+    # tickfont:
+    #   size: 14
+  autosize: True
+  #height: 400
+  paper_bgcolor: "white"
+  plot_bgcolor: "white"