Minor fix to support instruments with reversed logic

Puzzlepart · Oct 22, 2024 · 1121fa1 · 1121fa1
1 parent 0ab627a
commit 1121fa1
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 14 deletions.
diff --git a/...ointFramework/PortfolioWebParts/src/components/List/ItemColumn/InstrumentColumn/index.tsx b/...ointFramework/PortfolioWebParts/src/components/List/ItemColumn/InstrumentColumn/index.tsx
@@ -25,8 +25,16 @@ import GaugeComponent from 'react-gauge-component'
  * @param props.item - The item to render.
  */
 export const InstrumentColumn: ColumnRenderComponent<IInstrumentColumnProps> = (props) => {
-  const { currentValue, unit, description, subArcs, minimumValue, maximumValue } =
-    useInstrumentColumn(props)
+  const {
+    startValue,
+    endValue,
+    currentValue,
+    unit,
+    description,
+    subArcs,
+    minimumValue,
+    maximumValue
+  } = useInstrumentColumn(props)
 
   return (
     <Popover withArrow>
@@ -41,7 +49,7 @@ export const InstrumentColumn: ColumnRenderComponent<IInstrumentColumnProps> = (
               minValue={minimumValue}
               maxValue={maximumValue}
               arc={{
-                colorArray: ['#FF2121', '#00FF15'],
+                colorArray: startValue > endValue ? ['#00FF15', '#FF2121'] : ['#FF2121', '#00FF15'],
                 padding: 0.02,
                 subArcs: subArcs
               }}

diff --git a/.../PortfolioWebParts/src/components/List/ItemColumn/InstrumentColumn/useInstrumentColumn.ts b/.../PortfolioWebParts/src/components/List/ItemColumn/InstrumentColumn/useInstrumentColumn.ts
@@ -15,23 +15,42 @@ export function useInstrumentColumn(props: IInstrumentColumnProps) {
   const unit = props.item[props.unitField] || props.item['GtMeasurementUnitOWSCHCS']
   const description = props.item[props.descriptionField] || props.item['MeasurementIndicator']
 
-  const subArcs: SubArc[] = [
-    { limit: startValue - endValue * 0.1, showTick: true, color: '#FF2121' },
-    { limit: startValue, showTick: true },
-    { limit: startValue + (endValue - startValue) * 0.3, showTick: true },
-    { limit: startValue + (endValue - startValue) * 0.7, showTick: true },
-    { limit: endValue, showTick: true },
-    { limit: endValue + endValue * 0.1, showTick: true }
-  ]
+  let subArcs: SubArc[] = []
+  let minimumValue: number
+  let maximumValue: number
+
+  if (startValue < endValue) {
+    minimumValue = startValue - endValue * 0.1
+    maximumValue = endValue + endValue * 0.1
+    subArcs = [
+      { limit: startValue - endValue * 0.1, showTick: true, color: '#FF2121' },
+      { limit: startValue, showTick: true },
+      { limit: startValue + (endValue - startValue) * 0.3, showTick: true },
+      { limit: startValue + (endValue - startValue) * 0.7, showTick: true },
+      { limit: endValue, showTick: true },
+      { limit: endValue + endValue * 0.1, showTick: true }
+    ]
+  } else {
+    maximumValue = startValue + startValue * 0.1
+    minimumValue = endValue - startValue * 0.1
+    subArcs = [
+      { limit: endValue - startValue * 0.1, showTick: true, color: '#FF2121' },
+      { limit: endValue, showTick: true },
+      { limit: endValue + (startValue - endValue) * 0.3, showTick: true },
+      { limit: endValue + (startValue - endValue) * 0.7, showTick: true },
+      { limit: startValue, showTick: true },
+      { limit: startValue + startValue * 0.1, showTick: true }
+    ]
+  }
 
   return {
-    minimumValue: startValue - endValue * 0.1,
-    maximumValue: endValue + endValue * 0.1,
     startValue,
     endValue,
     currentValue,
     unit,
     description,
-    subArcs
+    subArcs,
+    minimumValue,
+    maximumValue
   } as const
 }