updating ab chart stats TM-2409

src/Components/AvailableBidder/AvailableBidderStats/AvailableBidderStats.jsx

@@ -5,7 +5,7 @@ import FA from 'react-fontawesome';
 import { Cell, Pie, PieChart, Tooltip } from 'recharts';
 import InteractiveElement from 'Components/InteractiveElement';
 import LoadingText from 'Components/LoadingText';
-import { getAvatarColor } from 'utilities';
+import { getAvatarColor, sortGrades } from 'utilities';
 import Picky from 'react-picky';
 import { Row } from '../../Layout';
 
@@ -15,19 +15,26 @@ const AvailableBidderStats = () => {
 
   const statOptions = [
     'Bureau',
+    'CDO',
     'Grade',
+    'OC Bureau',
     'Post',
     'Skill',
     'Status',
-    'TED',
   ];
 
   // App state
   const biddersData = useSelector(state => state.availableBiddersFetchDataSuccess);
   const availableBiddersIsLoading = useSelector(state => state.availableBiddersFetchDataLoading);
 
-  const stats = get(biddersData.stats, selectedStat) || [];
-  const statsSum = get(biddersData.stats, 'Sum', {})[selectedStat];
+  let stats = get(biddersData, 'stats', {})[selectedStat] || [];
+  const statsSum = get(biddersData, 'stats.Sum', {})[selectedStat] || 0;
+
+  // sorting grades to maintain consistency across the site
+  if (selectedStat === 'Grade') {
+    stats = stats.map(grade => ({ ...grade, code: grade.name }));
+    stats.sort(sortGrades);
+  }
 
   // adding colors
   const stats$ = stats.map(m => {
@@ -92,7 +99,12 @@ const AvailableBidderStats = () => {
                               className="legend-square"
                               style={{ backgroundColor: m.color }}
                             />
-                            <div className="legend-text">{`(${m.value}) ${m.name} ${m.percent}`}</div>
+                            <div className="legend-text">
+                              {`(${m.value}) ${m.name}`}
+                              <span className="percent-text">
+                                {`${m.percent}`}
+                              </span>
+                            </div>
                           </div>
                         ))
                       }

src/Components/AvailableBidder/AvailableBidderStats/AvailableBiddersStats.test.jsx

@@ -0,0 +1,18 @@
+import TestUtils from 'react-dom/test-utils';
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import AvailableBidderStats from './AvailableBidderStats';
+
+const middlewares = [thunk];
+const mockStore = configureStore(middlewares);
+
+describe('AvailableBidderStats', () => {
+  it('is defined', () => {
+    const wrapper = TestUtils.renderIntoDocument(<Provider store={mockStore({})}><MemoryRouter>
+      <AvailableBidderStats isCDO />
+    </MemoryRouter></Provider>);
+    expect(wrapper).toBeDefined();
+  });
+});

src/sass/_availableBidders.scss

@@ -64,6 +64,11 @@
        margin: auto .8em;
     }
 
+    .percent-text {
+      font-weight: bold;
+      margin-left: .4em;
+    }
+
     .chart-container {
       margin-right: auto;