Update Bar

husarion · Jun 17, 2024 · 4eb41fd · 4eb41fd
1 parent 863c9ab
commit 4eb41fd
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/demo/foxglove-layout.json b/demo/foxglove-layout.json
@@ -43,16 +43,16 @@
     "Bar!3t52ye7": {
       "path": "/panther/joint_states.effort[0]",
       "minValue": -20,
-      "maxValue": 20,
+      "maxValue": 34.52,
       "colorMode": "colormap",
       "gradient": ["#0000ff", "#ff00ff"],
-      "reverse": false,
+      "reverse": true,
       "foxglovePanelTitle": "FL"
     },
     "Bar!461hl59": {
       "path": "/panther/joint_states.effort[1]",
       "minValue": -20,
-      "maxValue": 20,
+      "maxValue": 34.52,
       "colorMode": "colormap",
       "gradient": ["#0000ff", "#ff00ff"],
       "reverse": false,
@@ -61,16 +61,16 @@
     "Bar!1fzrnqw": {
       "path": "/panther/joint_states.effort[2]",
       "minValue": -20,
-      "maxValue": 20,
+      "maxValue": 34.52,
       "colorMode": "colormap",
       "gradient": ["#0000ff", "#ff00ff"],
-      "reverse": false,
+      "reverse": true,
       "foxglovePanelTitle": "RL"
     },
     "Bar!1q5qffy": {
       "path": "/panther/joint_states.effort[3]",
       "minValue": -20,
-      "maxValue": 20,
+      "maxValue": 34.52,
       "colorMode": "colormap",
       "gradient": ["#0000ff", "#ff00ff"],
       "reverse": false,

diff --git a/packages/studio-base/src/panels/Bar/Bar.tsx b/packages/studio-base/src/panels/Bar/Bar.tsx
@@ -207,11 +207,11 @@ export function Bar({ context }: Props): JSX.Element {
       ? Number(state.latestMatchingQueriedData)
       : NaN;
 
-  const { maxValue } = config;
-  const barLevel = Math.round((100 * Math.min(rawValue, maxValue)) / maxValue)
-  const levelHeight = Math.abs(barLevel) / 2;
+  const { maxValue, reverse } = config;
+  const barPercentage = Math.round((100 * rawValue) / maxValue)
 
-  const isPositive = rawValue >= 0;
+  const levelHeight = Math.max(Math.min(Math.abs(barPercentage), 100), 0) / 2; // 50% is the max height
+  const isPositive = reverse ? rawValue < 0 : rawValue >= 0;
   const top = isPositive ? `${50 - levelHeight}%` : '50%';
   const bottom = isPositive ? '50%' : `${50 - levelHeight}%`;
 
@@ -229,7 +229,7 @@ export function Bar({ context }: Props): JSX.Element {
           style={{ height: `${levelHeight}%`, top, bottom }}
         ></div>
       </div>
-      <div className="percentage">{barLevel}%</div>
+      <div className="percentage">{barPercentage}%</div>
     </Stack>
   );
 }