Working on bargraph hover

Author: bmichare

src/app/components/BarGraphComparison.tsx

@@ -300,7 +300,7 @@ const BarGraphComparison = props => {
                 <MenuItem>No snapshots available</MenuItem>
               ) : (
                 finalList.map((elem, index) => (
-                  <MenuItem value={index}>{elem}</MenuItem>
+                  <MenuItem value={elem}>{elem}</MenuItem>
                   // <MenuItem value="test">{}</MenuItem>
                 )))
               }

src/app/components/BarGraphComparisonActions.tsx

@@ -70,13 +70,12 @@ const tooltipStyles = {
 const BarGraphComparisonActions = props => {
   const [{ tabs, currentTab }, dispatch] = useStoreContext();
   const {
-    width, height, data, comparison, setSeries, series, setAction
+    width, height, data, comparison, setSeries, series, setAction, action
   } = props;
   // const [series, setSeries] = React.useState(0);
   const [snapshots, setSnapshots] = React.useState(0);
   const [open, setOpen] = React.useState(false);
   const [picOpen, setPicOpen] = React.useState(false);
-  const [maxRender, setMaxRender] = React.useState(data.maxTotalRender);
 
   const currentIndex = tabs[currentTab].sliderIndex;
 
@@ -124,8 +123,8 @@ const BarGraphComparisonActions = props => {
   };
 
   // the domain array on rendering scale will set the coordinates for Y-aix points.
-  const renderingScale = scaleBand<number>({
-    domain: [0, Math.max(calculateMaxTotalRender(), data.maxTotalRender)],
+  const renderingScale = scaleLinear<number>({
+    domain: [0, calculateMaxTotalRender()],
     nice: true,
   });
   // the domain array will assign each key a different color to make rectangle boxes
@@ -266,14 +265,14 @@ const BarGraphComparisonActions = props => {
               open={picOpen}
               onClose={picHandleClose}
               onOpen={picHandleOpen}
-              value={''} //snapshots
+              value={action} //snapshots
               onChange={handleActionChange}
             >
               {!comparison[snapshots] ? (
                 <MenuItem>No snapshots available</MenuItem>
               ) : (
                 finalList.map((elem, index) => (
-                  <MenuItem value={index}>{elem}</MenuItem>
+                  <MenuItem value={elem}>{elem}</MenuItem>
                   // <MenuItem value="test">{}</MenuItem>
                 )))
               }
@@ -312,13 +311,13 @@ const BarGraphComparisonActions = props => {
             yScale={renderingScale}
             color={colorScale}
           >
-            {barStacks => barStacks.map(barStack => barStack.bars.map((bar, idx) => {
+            {barStacks => barStacks.map(barStack => barStack.bars.map((bar) => {
               console.log('barstack', barStack)
               console.log('bar', bar)
               // Hides new components if components don't exist in previous snapshots.
-              if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
-                bar.height = 0;
-              }
+              // if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
+              //   bar.height = 0;
+              // }
               return (
                 <rect
                   key={`bar-stack-${barStack.id}-${bar.id}`}

src/app/components/PerformanceVisx.tsx

@@ -181,24 +181,7 @@ const allStorage = () => {
   return values;
 };
 
-const getActions = () => {
-  let seriesArr = localStorage.getItem('project')
-  seriesArr = seriesArr === null ? [] : JSON.parse(seriesArr);
-  const actionsArr = [];
 
-  if (seriesArr.length) {
-    for (let i = 0; i < seriesArr.length; i++) {
-      for (const action of seriesArr[i].data.barStack) {
-        if (action.name !== '') {
-          action.seriesName = seriesArr[i].name;
-          actionsArr.push(action);
-        }
-      }
-    }
-  }
-  console.log('actionsArr', actionsArr)
-  return actionsArr;
-}
 
 // Gets snapshot Ids for the regular bar graph view.
 const getSnapshotIds = (obj, snapshotIds = []): string[] => {
@@ -240,6 +223,26 @@ const PerformanceVisx = (props: BarStackProps) => {
   const [ series, setSeries ] = useState(true);
   const [ action, setAction ] = useState(false);
 
+  const getActions = () => {
+    let seriesArr = localStorage.getItem('project')
+    seriesArr = seriesArr === null ? [] : JSON.parse(seriesArr);
+    const actionsArr = [];
+  
+    if (seriesArr.length) {
+      for (let i = 0; i < seriesArr.length; i++) {
+        for (const actionObj of seriesArr[i].data.barStack) {
+          if (actionObj.name === action) {
+            actionObj.seriesName = seriesArr[i].name;
+            actionsArr.push(actionObj);
+          }
+        }
+      }
+    }
+    console.log(action)
+    console.log('actionsArr', actionsArr)
+    return actionsArr;
+  }
+
   const renderComparisonBargraph = () => {
     if (hierarchy && series) return (
       <BarGraphComparison