Merge pull request #2855 from opossum-tool/feat/align_statistics_popup_and_progress_bar_colors

feat: statistics popup and progress bar share same colors

Author: Hellgartner

src/Frontend/Components/ProgressBar/ProgressBar.util.tsx

@@ -6,7 +6,11 @@ import MuiBox from '@mui/material/Box';
 import { sum } from 'lodash';
 
 import { Criticality } from '../../../shared/shared-types';
-import { criticalityColor, OpossumColors } from '../../shared-styles';
+import {
+  classificationUnknownColor,
+  criticalityColor,
+  OpossumColors,
+} from '../../shared-styles';
 import { navigateToSelectedPathOrOpenUnsavedPopup } from '../../state/actions/popup-actions/popup-actions';
 import { useAppDispatch, useAppSelector } from '../../state/hooks';
 import {
@@ -254,7 +258,7 @@ function calculateProgressBarSteps(
   );
   progressBarSteps.push({
     widthInPercent: 100 - totalPercentage,
-    color: OpossumColors.lightestBlue,
+    color: classificationUnknownColor,
   });
 
   return roundPercentagesToAtLeastOnePercentAndNormalize(progressBarSteps);

src/Frontend/Components/ProgressBar/__tests__/ProgressBar.util.test.ts

@@ -4,7 +4,11 @@
 // SPDX-License-Identifier: Apache-2.0
 import { Criticality } from '../../../../shared/shared-types';
 import { faker } from '../../../../testing/Faker';
-import { criticalityColor, OpossumColors } from '../../../shared-styles';
+import {
+  classificationUnknownColor,
+  criticalityColor,
+  OpossumColors,
+} from '../../../shared-styles';
 import {
   ClassificationStatistics,
   ProgressBarData,
@@ -98,7 +102,7 @@ describe('ProgressBar helpers', () => {
 
       const background = getClassificationBarBackground(testProgressBarData);
 
-      const expectedBackground = `linear-gradient(to right, ${classificationStatistics[3].color} 0% 5% , ${classificationStatistics[2].color} 5% 25% , ${classificationStatistics[1].color} 25% 40% , ${classificationStatistics[0].color} 40% 65% , hsl(220, 41%, 92%) 65% 100% )`;
+      const expectedBackground = `linear-gradient(to right, ${classificationStatistics[3].color} 0% 5% , ${classificationStatistics[2].color} 5% 25% , ${classificationStatistics[1].color} 25% 40% , ${classificationStatistics[0].color} 40% 65% , ${classificationUnknownColor} 65% 100% )`;
       expect(background).toEqual(expectedBackground);
     });
 
@@ -125,7 +129,7 @@ describe('ProgressBar helpers', () => {
 
       const background = getClassificationBarBackground(testProgressBarData);
 
-      const expectedBackground = `linear-gradient(to right, ${classificationStatistics[11].color} 0% 5% , ${classificationStatistics[2].color} 5% 25% , ${classificationStatistics[1].color} 25% 40% , ${classificationStatistics[0].color} 40% 65% , hsl(220, 41%, 92%) 65% 100% )`;
+      const expectedBackground = `linear-gradient(to right, ${classificationStatistics[11].color} 0% 5% , ${classificationStatistics[2].color} 5% 25% , ${classificationStatistics[1].color} 25% 40% , ${classificationStatistics[0].color} 40% 65% , ${classificationUnknownColor} 65% 100% )`;
       expect(background).toEqual(expectedBackground);
     });
 
@@ -168,7 +172,7 @@ describe('ProgressBar helpers', () => {
 
       const background = getClassificationBarBackground(testProgressBarData);
 
-      const expectedBackground = `linear-gradient(to right, ${classificationStatisticsEntry.color} 0% 25% , hsl(220, 41%, 92%) 25% 100% )`;
+      const expectedBackground = `linear-gradient(to right, ${classificationStatisticsEntry.color} 0% 25% , ${classificationUnknownColor} 25% 100% )`;
       expect(background).toBe(expectedBackground);
     });
   });

src/Frontend/Components/ProjectStatisticsPopup/ProjectStatisticsPopup.tsx

@@ -71,11 +71,12 @@ export const ProjectStatisticsPopup: React.FC = () => {
     licenseNamesWithCriticality,
   );
 
-  const signalCountByClassification = getSignalCountByClassification(
-    licenseCounts,
-    licenseNamesWithClassification,
-    classifications,
-  );
+  const [signalCountByClassification, classificationColorMap] =
+    getSignalCountByClassification(
+      licenseCounts,
+      licenseNamesWithClassification,
+      classifications,
+    );
 
   const attributionBarChartData =
     aggregateAttributionPropertiesFromAttributions(manualAttributions);
@@ -158,7 +159,10 @@ export const ProjectStatisticsPopup: React.FC = () => {
                       .signalCountByClassificationPieChart.title
                   }
                 </MuiTypography>
-                <PieChart segments={signalCountByClassification} />
+                <PieChart
+                  segments={signalCountByClassification}
+                  colorMap={classificationColorMap}
+                />
               </ChartGridItem>
               <ChartGridItem
                 shouldRender={incompleteAttributionsData.length > 0}

src/Frontend/Components/ProjectStatisticsPopup/ProjectStatisticsPopup.util.ts

@@ -13,6 +13,7 @@ import {
   PackageInfo,
 } from '../../../shared/shared-types';
 import { text } from '../../../shared/text';
+import { classificationUnknownColor } from '../../shared-styles';
 import {
   AttributionCountPerSourcePerLicense,
   ChartDataItem,
@@ -337,11 +338,13 @@ export function getCriticalSignalsCount(
   return criticalityData.filter(({ count }) => count > 0);
 }
 
+type ColoredChartDataItem = ChartDataItem & { color: string };
+
 export function getSignalCountByClassification(
   licenseCounts: LicenseCounts,
   licenseNamesWithClassification: LicenseNamesWithClassification,
   classifications: ClassificationsConfig,
-): Array<ChartDataItem> {
+): [Array<ChartDataItem>, { [segmentName: string]: string }] {
   const NO_CLASSIFICATION = -1;
   const classificationCounts: Record<Classification, number> = {};
 
@@ -356,27 +359,37 @@ export function getSignalCountByClassification(
 
   const pieChartData = Object.keys(classifications)
     .map(Number)
-    .map<ChartDataItem>((classification) => {
+    .map<ColoredChartDataItem>((classification) => {
       const classificationName = classifications[classification].description;
       const classificationCount =
         classificationCounts[toNumber(classification)] ?? 0;
+      const color = classifications[classification].color;
 
       return {
         name: classificationName,
         count: classificationCount,
+        color,
       };
     })
     .filter(({ count }) => count > 0);
 
   if (classificationCounts[NO_CLASSIFICATION]) {
-    return pieChartData.concat({
+    pieChartData.push({
       name: text.projectStatisticsPopup.charts
         .signalCountByClassificationPieChart.noClassification,
       count: classificationCounts[NO_CLASSIFICATION],
+      color: classificationUnknownColor,
     });
   }
 
-  return pieChartData;
+  const colorMap = Object.fromEntries(
+    pieChartData.map((colorChartEntry) => [
+      colorChartEntry.name,
+      colorChartEntry.color,
+    ]),
+  );
+
+  return [pieChartData, colorMap];
 }
 
 export function getIncompleteAttributionsCount(

src/Frontend/shared-styles.ts

@@ -40,6 +40,8 @@ export const OpossumColors = {
   brown: 'hsl(33, 55%, 44%)',
 };
 
+export const classificationUnknownColor = OpossumColors.lightOrange;
+
 export const criticalityColor = {
   [Criticality.High]: OpossumColors.orange,
   [Criticality.Medium]: OpossumColors.mediumOrange,