Actions Bar Graph in progress

Author: bmichare

src/app/components/BarGraph.tsx

@@ -139,7 +139,7 @@ const BarGraph = props => {
   }
 
   // const textbox = tabs[currentTab].seriesSavedStatus === 'inputBoxOpen' ? <input type="text" className="seriesname" placeholder="Series Name" /> : null
-
+  console.log('dataFromBarGraph', data)
   return (
     <div className="bargraph-position">
       <input type="text" id ="seriesname" placeholder="Series Name" />
@@ -181,6 +181,7 @@ const BarGraph = props => {
             color={colorScale}
           >
             {barStacks => barStacks.map(barStack => barStack.bars.map((bar, idx) => {
+              console.log(bar)
               // Hides new components if components don't exist in previous snapshots.
               if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
                 bar.height = 0;

src/app/components/BarGraphComparison.tsx

@@ -215,9 +215,11 @@ const BarGraphComparison = props => {
     return comparison[series].data.barStack;
   }
   function setXpointsCurrentTab() {
+    console.log('unprocessedData',data)
     data.barStack.forEach(element => {
       element.currentTab = 'currentTab';
     });
+    console.log('processedData', data.barStack)
     return data.barStack;
   }
   const animateButton = function (e) {

src/app/components/BarGraphComparisonActions.tsx

@@ -329,64 +329,6 @@ const BarGraphComparison = props => {
           xOffset={snapshotIdScale.bandwidth() / 2}
         />
         <Group top={margin.top} left={margin.left}>
-          <BarStack
-            // Comparison Barstack (populates based on series selected)
-            // to set X and Y scale, it  will used the passed in function and
-            // will run it on the array thats outputted by data
-            // setXpointsComparison()}
-            // comparison[series].data.barStack
-            data={!comparison[series] ? [] : setXpointsComparison()}
-            keys={keys}
-            x={getCurrentTab}
-            xScale={snapshotIdScale}
-            yScale={renderingScale}
-            color={colorScale}
-          >
-            {barStacks => barStacks.map((barStack, idx) => {
-              // Uses map method to iterate through all components,
-              // creating a rect component (from visx) for each iteration.
-              // height/width/etc. are calculated by visx.
-              if (!barStack.bars[currentIndex]) {
-                return <h1>No Comparison</h1>;
-              }
-              const bar = barStack.bars[currentIndex];
-              if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
-                bar.height = 0;
-              }
-              return (
-                <rect
-                  key={`bar-stack-${idx}-${bar.index}`}
-                  x={bar.x}
-                  y={bar.y}
-                  height={bar.height === 0 ? null : bar.height}
-                  width={bar.width}
-                  fill={bar.color}
-                    /* TIP TOOL EVENT HANDLERS */
-                    // Hides tool tip once cursor moves off the current rect
-                  onMouseLeave={() => {
-                    dispatch(
-                      onHoverExit(data.componentData[bar.key].rtid),
-                      (tooltipTimeout = window.setTimeout(() => {
-                        hideTooltip();
-                      }, 300)),
-                    );
-                  }}
-                    // Cursor position in window updates position of the tool tip
-                  onMouseMove={event => {
-                    dispatch(onHover(data.componentData[bar.key].rtid));
-                    if (tooltipTimeout) clearTimeout(tooltipTimeout);
-                    const top = event.clientY - margin.top - bar.height;
-                    const left = bar.x + bar.width / 2;
-                    showTooltip({
-                      tooltipData: bar,
-                      tooltipTop: top,
-                      tooltipLeft: left,
-                    });
-                  }}
-                />
-              );
-            })}
-          </BarStack>
           <BarStack
             data={data.barStack}
             keys={keys}
@@ -396,6 +338,7 @@ const BarGraphComparison = props => {
             color={colorScale}
           >
             {barStacks => barStacks.map(barStack => barStack.bars.map((bar, idx) => {
+              console.log(bar)
               // Hides new components if components don't exist in previous snapshots.
               if (Number.isNaN(bar.bar[1]) || bar.height < 0) {
                 bar.height = 0;

src/app/components/PerformanceVisx.tsx

@@ -189,7 +189,10 @@ const getActions = () => {
   if (seriesArr.length) {
     for (let i = 0; i < seriesArr.length; i++) {
       for (const action of seriesArr[i].data.barStack) {
-        if (action.name !== '') actionsArr.push(action);
+        if (action.name !== '') {
+          action.seriesName = seriesArr[i].name;
+          actionsArr.push(action);
+        }
       }
     }
   }
@@ -252,11 +255,11 @@ const PerformanceVisx = (props: BarStackProps) => {
     return (
       <BarGraphComparisonActions 
           // comparison={allStorage()}
-          data={getActions()}
+          data={data}
           width={width}
           height={height}
           setSeries={setSeries}
-          series={series}
+          action={action}
           setAction={setAction}
       />
     );