From 4eb41fd9fdc4808c7fc6cd08d6829e9699244938 Mon Sep 17 00:00:00 2001
From: rafal-gorecki <rafal.gorecki@husarion.com>
Date: Mon, 17 Jun 2024 08:43:55 +0200
Subject: [PATCH] Update Bar

---
 demo/foxglove-layout.json                   | 12 ++++++------
 packages/studio-base/src/panels/Bar/Bar.tsx | 10 +++++-----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/demo/foxglove-layout.json b/demo/foxglove-layout.json
index eb9b152..6958320 100644
--- 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
index dd45021..724cf4d 100644
--- 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>
   );
 }