feat: product chart group by

newrelic · Aug 15, 2023 · 3fdb1ad · 3fdb1ad
1 parent 826966d
commit 3fdb1ad
Show file tree

Hide file tree

Showing 6 changed files with 302 additions and 159 deletions.
diff --git a/src/components/MaturityElementList/index.js b/src/components/MaturityElementList/index.js
@@ -10,6 +10,7 @@ export default function MaturityElementList({
   elements = [],
   isUserDefault,
   view,
+  groupBy,
 }) {
   return useMemo(() => {
     if (elements.length === 0) return <div />;
@@ -20,6 +21,7 @@ export default function MaturityElementList({
           <div className="score-card-list" style={{ paddingTop: '10px' }}>
             {elements.map((score, idx) => (
               <ScoreCard
+                groupBy={groupBy}
                 key={idx}
                 {...score}
                 isUserDefault={isUserDefault}
@@ -32,14 +34,15 @@ export default function MaturityElementList({
           </div>
         );
       case 'table':
-        return <ScoreTable />;
+        return <ScoreTable groupBy={groupBy} />;
       case 'charts':
-        return <ScoreCharts />;
+        return <ScoreCharts groupBy={groupBy} />;
       case 'summary':
         return (
           <div className="score-card-list" style={{ paddingTop: '10px' }}>
             {elements.map((score, idx) => (
               <ScoreCard
+                groupBy={groupBy}
                 key={idx}
                 {...score}
                 isUserDefault={isUserDefault}

diff --git a/src/components/ReportView/maturityContainer.js b/src/components/ReportView/maturityContainer.js
@@ -14,42 +14,90 @@ export default function MaturityContainer(props) {
     isUserDefault,
   } = props;
   const [view, setView] = useState('summary');
+  const [groupBy, setGroupBy] = useState('account');
 
   const selectedHistory = history.find(
     (h) => h.document.runAt === selected
   ) || [selected];
 
   const { accountSummaries } = selectedHistory?.document || {};
-  const scoredCollection = (accountSummaries || []).map((a) => {
-    const elementScores = [];
 
-    Object.keys(rules).forEach((key) => {
-      const value = a[key];
+  let scoredCollection = [];
 
-      if (value !== undefined && value !== null) {
-        const payload = {
-          name: key,
-          status: percentageToStatus(value),
-          score: `${Math.round(value)}%`,
-        };
+  if (groupBy === 'account') {
+    scoredCollection = (accountSummaries || []).map((a) => {
+      const elementScores = [];
+
+      Object.keys(rules).forEach((key) => {
+        const value = a[key];
+
+        if (value !== undefined && value !== null) {
+          const payload = {
+            name: key,
+            status: percentageToStatus(value),
+            score: `${Math.round(value)}%`,
+          };
+
+          elementScores.push(payload);
+        }
+      });
+
+      const payload = {
+        title: a.name,
+        subtitle: a.id,
+        rollUpScore: Math.round((a.totalScore / a.maxScore) * 100),
+        rollUpStatus: STATUSES.UNKNOWN,
+        elementListLabel: 'Products',
+        elementScores,
+      };
 
-        elementScores.push(payload);
-      }
+      payload.rollUpStatus = percentageToStatus(payload.rollUpScore);
+
+      return payload;
     });
+  } else if (groupBy === 'product') {
+    scoredCollection = Object.keys(rules)
+      .filter((product) =>
+        accountSummaries.find(
+          (a) => a[product] !== null && a[product] !== undefined
+        )
+      )
+      .map((product) => {
+        const elementScores = [];
+        let totalScore = 0;
+
+        accountSummaries.forEach((account) => {
+          const value = account[product];
+          totalScore += value;
+
+          if (value !== undefined && value !== null) {
+            const payload = {
+              name: account.name,
+              id: account.id,
+              status: percentageToStatus(value),
+              score: `${Math.round(value)}%`,
+            };
 
-    const payload = {
-      title: a.name,
-      subtitle: a.id,
-      rollUpScore: Math.round((a.totalScore / a.maxScore) * 100),
-      rollUpStatus: STATUSES.UNKNOWN,
-      elementListLabel: 'Products',
-      elementScores,
-    };
+            elementScores.push(payload);
+          }
+        });
+
+        const payload = {
+          title: product,
+          // subtitle: account.id,
+          rollUpScore: Math.round(
+            (totalScore / (accountSummaries.length * 100)) * 100
+          ),
+          rollUpStatus: STATUSES.UNKNOWN,
+          elementListLabel: 'Products',
+          elementScores,
+        };
 
-    payload.rollUpStatus = percentageToStatus(payload.rollUpScore);
+        payload.rollUpStatus = percentageToStatus(payload.rollUpScore);
 
-    return payload;
-  });
+        return payload;
+      });
+  }
 
   return useMemo(() => {
     return (
@@ -84,14 +132,45 @@ export default function MaturityContainer(props) {
               SegmentedControlItem.ICON_TYPE.DATAVIZ__DATAVIZ__LINE_CHART
             }
           />
+          {groupBy === 'account' && (
+            <SegmentedControlItem
+              label="Table"
+              value="table"
+              iconType={
+                SegmentedControlItem.ICON_TYPE.INTERFACE__VIEW__LIST_VIEW
+              }
+            />
+          )}
+        </SegmentedControl>
+        &nbsp;&nbsp;&nbsp;
+        <SegmentedControl
+          style={{ float: 'right', marginRight: '10px' }}
+          value={groupBy}
+          onChange={(evt, value) => {
+            if (value === 'product' && view === 'table') {
+              setView('summary');
+            }
+
+            setGroupBy(value);
+          }}
+        >
           <SegmentedControlItem
-            label="Table"
-            value="table"
-            iconType={SegmentedControlItem.ICON_TYPE.INTERFACE__VIEW__LIST_VIEW}
+            label="Account"
+            value="account"
+            iconType={SegmentedControlItem.ICON_TYPE.PROFILES__USERS__USER}
           />
-        </SegmentedControl>
 
+          <SegmentedControlItem
+            label="Product"
+            value="product"
+            iconType={
+              SegmentedControlItem.ICON_TYPE
+                .HARDWARE_AND_SOFTWARE__SOFTWARE__BROWSER
+            }
+          />
+        </SegmentedControl>
         <MaturityElementList
+          groupBy={groupBy}
           view={view}
           entitySearchQuery={entitySearchQuery}
           elements={scoredCollection}
@@ -101,5 +180,5 @@ export default function MaturityContainer(props) {
         />
       </>
     );
-  }, [history, selected, view]);
+  }, [history, selected, view, groupBy]);
 }
diff --git a/src/components/ScoreCard/index.js b/src/components/ScoreCard/index.js
@@ -17,25 +17,31 @@ const ScoreCard = ({
   elementScores,
   isUserDefault,
   view,
+  groupBy,
 }) => {
   return useMemo(() => {
     return (
       <div className={`score-card ${view}`}>
         <div
           style={{ cursor: 'pointer' }}
-          onClick={() =>
-            navigation.openStackedNerdlet({
-              id: 'score-details-nerdlet',
-              urlState: {
-                isUserDefault,
-                accountName: title,
-                accountId: subtitle,
-                accountPercentage: rollUpScore,
-                historyId,
-                selectedAccountId,
-                entitySearchQuery,
-              },
-            })
+          onClick={
+            groupBy === 'account'
+              ? () =>
+                /* eslint-disable */
+                navigation.openStackedNerdlet({
+                  id: 'score-details-nerdlet',
+                  urlState: {
+                    isUserDefault,
+                    accountName: title,
+                    accountId: subtitle,
+                    accountPercentage: rollUpScore,
+                    historyId,
+                    selectedAccountId,
+                    entitySearchQuery,
+                  },
+                })
+              : undefined
+            /* eslint-enable */
           }
         >
           <HeadingText className="title" type={HeadingText.TYPE.HEADING_3}>
@@ -51,11 +57,12 @@ const ScoreCard = ({
             rollUpStatus={rollUpStatus}
             elementListLabel={elementListLabel}
             elementScores={elementScores}
+            groupBy={groupBy}
           />
         )}
 
         {view === DISPLAY_MODES.NAVIGATOR && (
-          <NavigatorCard elementScores={elementScores} />
+          <NavigatorCard elementScores={elementScores} groupBy={groupBy} />
         )}
       </div>
     );

diff --git a/src/components/ScoreCard/summary-card.js b/src/components/ScoreCard/summary-card.js
@@ -1,17 +1,16 @@
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 import { HeadingText } from 'nr1';
 import { ProgressBar } from '@newrelic/nr-labs-components';
-import { STATUSES } from '../../constants';
 import ScoreList from '../ScoreList';
 
-const SummaryCard = ({
+export default function SummaryCard({
+  // groupBy,
   elementScores,
   rollUpStatus,
   rollUpScore,
   maxScore,
   elementListLabel,
-}) => {
+}) {
   return useMemo(() => {
     const elementSliceIndex =
       elementScores.length > 8
@@ -56,25 +55,4 @@ const SummaryCard = ({
       </>
     );
   }, [rollUpScore, maxScore, rollUpStatus, elementListLabel, elementScores]);
-};
-
-SummaryCard.PropTypes = {
-  /* the roll up score label */
-  rollUpScore: PropTypes.number,
-  /* the total possible score */
-  maxScore: PropTypes.number,
-  /* the overall status taking into account the scores for each element */
-  rollUpStatus: PropTypes.oneOf(Object.values(STATUSES)),
-  /* the title assigned to the list of scored elements */
-  elementListLabel: PropTypes.string,
-  /* the individual scored elements that contribute to the aggregate score */
-  elementScores: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      status: PropTypes.oneOf(Object.values(STATUSES)),
-      score: PropTypes.string,
-    })
-  ),
-};
-
-export default SummaryCard;
+}