add diff legend

grafana · Jul 29, 2021 · 3719757 · 3719757
1 parent ddd1f96
commit 3719757
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/webapp/javascript/components/FlameGraphRenderer.jsx b/webapp/javascript/components/FlameGraphRenderer.jsx
@@ -55,6 +55,8 @@ const unitsToFlamegraphTitle = {
   "samples": "CPU time per function",
 }
 
+const diffLegend = [20, 10, 5, 3, 2, 1, 0, -1, -2, -3, -5, -10, -20];
+
 class FlameGraphRenderer extends React.Component {
   constructor(props) {
     super();
@@ -541,7 +543,22 @@ class FlameGraphRenderer extends React.Component {
       >
         <div className='flamegraph-header'>
           <span></span>
-          <span>Frame width represents {unitsToFlamegraphTitle[this.state.units]}</span>
+          <div>
+            <div className="row">
+              Frame width represents {unitsToFlamegraphTitle[this.state.units]}
+            </div>
+            { !this.state.viewDiff ? null :
+              <div className="row flamegraph-legend">
+                <div className="flamegraph-legend-list">
+                  {diffLegend.map((v) => (
+                    <div className="flamegraph-legend-item" style={{ backgroundColor: colorBasedOnDiff(v, 100, 0.8) }}>
+                      {v > 0 ? '+' : ''}{v}%
+                    </div>
+                  ))}
+                </div>
+              </div>
+            }
+          </div>
           <ExportData flameCanvas={this.canvasRef}/>
         </div>
         <canvas

diff --git a/webapp/sass/profile.scss b/webapp/sass/profile.scss
@@ -226,10 +226,32 @@ $pane-width: 6px;
     width: 50%;
 
     .flamegraph-header {
+      padding-bottom: 5px;
       display: flex;
       justify-content: space-between;
-      align-items: center;
-      padding-bottom: 5px;
+
+      .row {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .flamegraph-legend {
+        display: flex;
+        align-items: center;
+        font-size: 11px;
+        justify-content: center;
+        margin-bottom: 10px;
+      }
+
+      .flamegraph-legend-list {
+        display: flex;
+        justify-content: center;
+      }
+
+      .flamegraph-legend-item {
+        width: 35px;
+        text-align: center;
+      }
     }
 
     &.vertical-orientation {