Merge pull request #30 from oslabs-beta/feature/garrett

Feature/garrett

Author: garrettlchow

src/app/components/StateRoute/AxMap/Ax.tsx

@@ -13,9 +13,9 @@ import { toggleExpanded, setCurrentTabInApp } from '../../../slices/mainSlice';
 
 const defaultMargin = {
   top: 30,
-  left: 30,
-  right: 55,
-  bottom: 70,
+  left: 20,
+  right: 50,
+  bottom: 20,
 };
 
 const nodeCoords: object = {};
@@ -71,6 +71,7 @@ export default function AxTree(props) {
     borderRadius: '8px',
     overflowY: 'auto',
     overflowX: 'auto',
+    backgroundColor: 'transparent',
   };
 
   const [orientation, setOrientation] = useState('horizontal');
@@ -93,7 +94,6 @@ export default function AxTree(props) {
     sizeHeight = innerWidth;
   }
 
-
   const LinkComponent = getLinkComponent({ linkType, orientation });
 
   const currAxSnapshot = JSON.parse(JSON.stringify(axSnapshots[currLocation.index]));

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -32,8 +32,8 @@ const veryHeavy = '#475569'; // Darker gray for medium load
 const defaultMargin: DefaultMargin = {
   top: 30,
   left: 20,
-  right: 20,
-  bottom: 70,
+  right: 50,
+  bottom: 20,
 };
 
 const nodeCoords: object = {};
@@ -124,6 +124,7 @@ export default function ComponentMap({
     padding: 0,
     borderRadius: '8px',
     overflowY: 'auto',
+    backgroundColor: 'transparent',
   };
 
   const nodeList: [] = []; // create a nodeList array to store our nodes as a flat array

src/app/components/StateRoute/History.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable */
 // @ts-nocheck
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 // formatting findDiff return data to show the changes with colors, aligns with actions.tsx
 import { diff, formatters } from 'jsondiffpatch';
 import * as d3 from 'd3';
@@ -41,6 +41,8 @@ function History(props: Record<string, unknown>): JSX.Element {
 
   const svgRef = React.useRef(null);
   const root = JSON.parse(JSON.stringify(hierarchy));
+  const historyEndRef = useRef<HTMLDivElement>(null);
+
   // setting the margins for the Map to render in the tab window.
   const innerWidth: number = totalWidth - margin.left - margin.right;
   const innerHeight: number = totalHeight - margin.top - margin.bottom - 60;
@@ -239,21 +241,26 @@ function History(props: Record<string, unknown>): JSX.Element {
       .style('padding-left', '8px')
       .html((d) => findDiff(d.data.index));
 
+    if (historyEndRef.current) {
+      historyEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
     return svg.node();
   };
 
   useEffect(() => {
     makeD3Tree();
-  }, [root /*, currLocation*/]); // if the 'root' or 'currLocation' changes, re-build the D3 Tree
+  }, [root, currLocation]);
 
   useEffect(() => {
     dispatch(setCurrentTabInApp('history')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'webmetrics' to facilitate render.
   }, []);
 
-  // then rendering each node in History tab to render using D3, which will share area with LegendKey
   return (
-    <div className='display'>
-      <svg ref={svgRef} width={totalWidth} height={totalHeight} />
+    <div className='history-view'>
+      <div className='display'>
+        <svg ref={svgRef} width={totalWidth} height={totalHeight} />
+        <div ref={historyEndRef} className='history-end-anchor' />
+      </div>
     </div>
   );
 }

src/app/components/StateRoute/PerformanceVisx/BarGraph.tsx

@@ -111,7 +111,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
   // setting max dimensions and scale ranges
   const xMax = width - margin.left - margin.right;
   snapshotIdScale.rangeRound([0, xMax]);
-  const yMax = height - margin.top - 150;
+  const yMax = height - margin.top - 100;
   renderingScale.range([yMax, 0]);
 
   const toStorage = {
@@ -127,7 +127,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
           <label id='routes-dropdown'>Route: </label>
           <select
             className='performance-dropdown'
-            labelId='demo-simple-select-label'
+            labelid='demo-simple-select-label'
             id='routes-select'
             onChange={(e) => {
               setRoute(e.target.value);
@@ -147,7 +147,7 @@ const BarGraph = (props: BarGraphProps): JSX.Element => {
         <form className='routesForm' id='routes-formcontrol'>
           <label id='routes-dropdown'>Snapshot: </label>
           <select
-            labelId='demo-simple-select-label'
+            labelid='demo-simple-select-label'
             id='snapshot-select'
             onChange={(e) => setSnapshot(e.target.value)}
           >

src/app/components/StateRoute/StateRoute.tsx

@@ -61,20 +61,21 @@ const StateRoute = (props: StateRouteProps) => {
           </NavLink>
           <NavLink
             className={(navData) =>
-              navData.isActive ? 'is-active router-link performance' : 'router-link performance-tab'
+              navData.isActive ? 'is-active router-link history-tab' : 'router-link history-tab'
             }
-            to='/performance'
+            to='/history'
           >
-            Performance
+            History
           </NavLink>
           <NavLink
             className={(navData) =>
-              navData.isActive ? 'is-active router-link history-tab' : 'router-link history-tab'
+              navData.isActive ? 'is-active router-link performance' : 'router-link performance-tab'
             }
-            to='/history'
+            to='/performance'
           >
-            History
+            Performance
           </NavLink>
+
           <NavLink
             className={(navData) =>
               navData.isActive

src/app/components/StateRoute/WebMetrics/WebMetrics.tsx

@@ -1,26 +1,24 @@
 import React, { useEffect } from 'react';
 import Charts from 'react-apexcharts';
 import ReactHover, { Trigger, Hover } from 'react-hover';
-import { OptionsCursorTrueWithMargin } from '../../../FrontendTypes';
 import { setCurrentTabInApp } from '../../../slices/mainSlice';
 import { useDispatch } from 'react-redux';
-/*
-  Used to render a single radial graph on the 'Web Metrics' tab
-*/
 
-const radialGraph = (props) => {
+const WebMetrics = (props) => {
   const dispatch = useDispatch();
+
   const state = {
-    series: [props.series], // series appears to be the scale at which data is displayed based on the type of webMetrics measured.
+    series: props.series,
     options: {
-      colors: [props.color], // color of the webmetrics performance bar from 'StateRoute'
+      colors: [props.color],
       chart: {
         height: 100,
         width: 100,
         type: 'radialBar',
         toolbar: {
           show: false,
         },
+        foreColor: 'var(--text-primary)',
       },
       plotOptions: {
         radialBar: {
@@ -48,29 +46,21 @@ const radialGraph = (props) => {
             },
           },
           track: {
-            background: '#161617',
-            strokeWidth: '3%',
+            background: 'var(--border-color-dark)',
+            strokeWidth: '10%',
             margin: 0,
-            dropShadow: {
-              enabled: true,
-              top: -3,
-              left: 0,
-              blur: 4,
-              opacity: 0.35,
-            },
           },
-
           dataLabels: {
             show: true,
             name: {
               offsetY: -10,
               show: true,
-              color: '#161617',
+              color: 'var(--text-primary)',
               fontSize: '24px',
             },
             value: {
               formatter: props.formatted,
-              color: '#3c6e71',
+              color: 'var(--color-primary)',
               fontSize: '16px',
               show: true,
             },
@@ -97,12 +87,31 @@ const radialGraph = (props) => {
   };
 
   useEffect(() => {
-    dispatch(setCurrentTabInApp('webmetrics')); // dispatch sent at initial page load allowing changing "immer's" draft.currentTabInApp to 'webmetrics' to facilitate render.
+    dispatch(setCurrentTabInApp('webmetrics'));
   }, []);
 
+  const getThresholdColor = (type: string): string => {
+    switch (type) {
+      case 'good':
+        return '#0bce6b';
+      case 'improvement':
+        return '#fc5a03';
+      case 'poor':
+        return '#fc2000';
+      default:
+        return 'var(--text-primary)';
+    }
+  };
+
+  const hoverOptions = {
+    followCursor: false,
+    shiftX: 20,
+    shiftY: 0,
+  };
+
   return (
     <div className='metric'>
-      <ReactHover>
+      <ReactHover options={hoverOptions}>
         <Trigger type='trigger'>
           <div id='chart' className='chart-container'>
             <Charts
@@ -121,15 +130,15 @@ const radialGraph = (props) => {
             </p>
             <p>{props.description}</p>
             <p>
-              <span style={{ color: '#0bce6b' }}>Good: </span>
+              <span style={{ color: getThresholdColor('good') }}>Good: </span>
               {`< ${props.score[0]}`}
             </p>
             <p>
-              <span style={{ color: '#fc5a03' }}>Needs Improvement: </span>
+              <span style={{ color: getThresholdColor('improvement') }}>Needs Improvement: </span>
               {`< ${props.score[1]}`}
             </p>
             <p>
-              <span style={{ color: '#fc2000' }}>Poor: </span>
+              <span style={{ color: getThresholdColor('poor') }}>Poor: </span>
               {`> ${props.score[1]}`}
             </p>
           </div>
@@ -139,4 +148,4 @@ const radialGraph = (props) => {
   );
 };
 
-export default radialGraph;
+export default WebMetrics;