trying to solve gaps between bar graphs

Author: d28601581

src/app/components/BarGraph.tsx

@@ -95,6 +95,7 @@ const BarGraph = props => {
     let i = 0;
     // let barWidth = (xMax / (Object.keys(data.barStack[0]).length) + 5);
     const barWidth = (xMax * (2 / 3) / (Object.keys(data.barStack[0]).length - 2));
+    console.log(barWidth, '<-- barWidth')
     console.log(data, '<-- data from snapshot');
     // function colorGen() {
     //   const r = Math.floor(Math.random() * 256);
@@ -103,6 +104,8 @@ const BarGraph = props => {
     //   return "rgb(" + r + "," + g + "," + b + ", " + .5 + ")"
     // }
     const rgb = ['rgba(50, 100, 241, .5)', 'rgba(90, 150, 217, .5)', 'rgba(200, 30, 7, .5)', 'rgba(23, 233, 217, .5)', 'rgba(150, 227, 19, .5)'];
+    const gap = xMax / (Object.keys(data.barStack[0]).length);
+    console.log(gap, i, '<-- gap , i');
     for (const [key, value] of Object.entries(data.barStack[0])) {
       const toolTipData = {key: key, value: value}
       console.log(xMax, '<--  xmax');
@@ -114,9 +117,9 @@ const BarGraph = props => {
             min="outer min"
             max="first if"
             // x={100}
-            x={xMax / (Object.keys(data.barStack[0]).length)}
-            y={yMax - value}
-            height={value}
+            x={gap}
+            y={yMax - value * 25}
+            height={value * 25}
             key={key}
             width={barWidth}
             fill="#62d6fb"
@@ -135,7 +138,8 @@ const BarGraph = props => {
               dispatch(onHover(data.componentData[key].rtid));
               if (tooltipTimeout) clearTimeout(tooltipTimeout);
               const top = event.clientY - margin.top - value * 25;
-              const left = 10 + 10 * i + barWidth * i + barWidth / 2;
+              // const left = 10 + 10 * i + barWidth * i + barWidth / 2;
+              const left = gap + barWidth / 2;
               showTooltip({
                 tooltipData: toolTipData,
                 tooltipTop: top,
@@ -147,10 +151,10 @@ const BarGraph = props => {
           BarArray.push(<Bar
             min="outer min"
             max="else here"
-            x={(xMax / (Object.keys(data.barStack[0]).length)) * (i + 1)}
+            x={gap * (i + 1)}
             // x={(xMax / (Object.keys(data.barStack[0]).length - 2)) + barWidth * i}
-            y={yMax - value * 20}
-            height={value * 20}
+            y={yMax - value * 25}
+            height={value * 25}
             key={key}
             width={barWidth}
             fill="#62d6fb"
@@ -169,7 +173,8 @@ const BarGraph = props => {
               dispatch(onHover(data.componentData[key].rtid));
               if (tooltipTimeout) clearTimeout(tooltipTimeout);
               const top = event.clientY - margin.top - value * 25;
-              const left = 10 + 10 * i + barWidth * i + barWidth / 2;
+              // const left = 10 + 10 * i + barWidth * i + barWidth / 2;
+              const left = gap * (i + 1) + barWidth / 2;
               showTooltip({
                 tooltipData: toolTipData,
                 tooltipTop: top,
@@ -555,11 +560,13 @@ const BarGraph = props => {
             style={tooltipStyles}
           >
             {console.log(tooltipData, '<------tooltipData')}
+            {console.log(data.componentData, '<------data.componentData')}
             <div style={{ color: colorScale(tooltipData.key) }}>
               {' '}
               <strong>{tooltipData.key}</strong>
               {' '}
             </div>
+            <div>{data.componentData[tooltipData.key].stateType}</div>
             <div>
               {' '}
               {formatRenderTime(tooltipData.value)}