Hid wierd percentage and added percent symbol

components/StackedBarGraph.tsx

@@ -53,6 +53,14 @@ export type StackedBarProps = {
   scalePadding?: number;
   /** Margin for each item in the legend */
   itemMargin?: string;
+  /** Hide the first data value in tooltip*/
+  hideDataValueInTooltip?: boolean;
+  //** Top tooltip label */
+  tooltipTopLabel?: string;
+  //** Bottom tooltip label */
+  tooltipBottomLabel?: string;
+  //** Display percentage */
+  displayPercentage?: boolean;
 };
 
 let tooltipTimeout: number;
@@ -79,6 +87,10 @@ export const StackedBarGraphVertical = withTooltip<
     tooltipData,
     hideTooltip,
     showTooltip,
+    hideDataValueInTooltip,
+    tooltipBottomLabel = "",
+    tooltipTopLabel = "",
+    displayPercentage,
   }: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
     const yTotals = data.reduce((allTotals, currCategory) => {
       const yTotal = keys.reduce((categoryTotal, k) => {
@@ -230,8 +242,15 @@ export const StackedBarGraphVertical = withTooltip<
             left={tooltipLeft}
             header={tooltipData.key}
           >
-            <p>{tooltipData.bar.data[tooltipData.key]}</p>
-            <p>{getCategory(tooltipData.bar.data)}</p>
+            {hideDataValueInTooltip ? null : (
+              <p>
+                {tooltipTopLabel} {tooltipData.bar.data[tooltipData.key]}
+                {displayPercentage ? "%" : ""}
+              </p>
+            )}
+            <p>
+              {tooltipBottomLabel} {getCategory(tooltipData.bar.data)}
+            </p>
           </TooltipWrapper>
         ) : null}
       </div>
@@ -261,6 +280,10 @@ export const StackedBarGraphHorizontal = withTooltip<
     tooltipData,
     hideTooltip,
     showTooltip,
+    hideDataValueInTooltip,
+    tooltipBottomLabel = "",
+    tooltipTopLabel = "",
+    displayPercentage,
   }: StackedBarProps & WithTooltipProvidedProps<TooltipData>) => {
     const yTotals = data.reduce((allTotals, currCategory) => {
       const yTotal = keys.reduce((categoryTotal, k) => {
@@ -409,8 +432,15 @@ export const StackedBarGraphHorizontal = withTooltip<
             left={tooltipLeft}
             header={tooltipData.key}
           >
-            <p>{tooltipData.bar.data[tooltipData.key]}</p>
-            <p>{getCategory(tooltipData.bar.data)}</p>
+            {hideDataValueInTooltip ? null : (
+              <p>
+                {tooltipTopLabel} {tooltipData.bar.data[tooltipData.key]}
+                {displayPercentage ? "%" : ""}
+              </p>
+            )}
+            <p>
+              {tooltipBottomLabel} {getCategory(tooltipData.bar.data)}
+            </p>
           </TooltipWrapper>
         ) : null}
       </div>

pages/coop.tsx

@@ -231,6 +231,8 @@ export default function CoopPage() {
             ]}
             data={C7v}
             margin={barGraphMargin}
+            hideDataValueInTooltip
+            tooltipBottomLabel="Coop Term: "
           />
         </div>
       </ComponentWrapper>
@@ -256,6 +258,8 @@ export default function CoopPage() {
             ]}
             data={C7vi}
             margin={barGraphMargin}
+            tooltipBottomLabel="Coop Term: "
+            displayPercentage
           />
         </div>
       </ComponentWrapper>