PM - 4699 Skill statistics

.circleci/config.yml

@@ -65,7 +65,7 @@ workflows:
             only:
               - develop
               - PM-4931
-              - PM-4704
+              - skill-statistics
           tags:
               only: /^dev-.*/
 

src/statistics/expert-skills-statistics.data.spec.ts

@@ -21,26 +21,26 @@ describe("expert-skills-statistics.data", () => {
       ),
     ).toEqual({
       color: "#1B4F72",
-      icon: "TerminalIcon",
+      icon: "terminal",
     });
     expect(getCategoryAppearance("unused-id", "Web Development")).toEqual({
       color: "#7EB8C4",
-      icon: "GlobeAltIcon",
+      icon: "language",
     });
     expect(
       getCategoryAppearance(
         "unused-id",
         "Software Development Lifecycle (SDLC)",
       ).icon,
-    ).toBe("RefreshIcon");
+    ).toBe("cloud_sync");
     expect(
       getCategoryAppearance("unused-id", "DevOps and Automation").icon,
-    ).toBe("CogIcon");
+    ).toBe("rule_settings");
     expect(
       getCategoryAppearance("unused-id", "UX Design and Multimedia").icon,
-    ).toBe("PencilAltIcon");
+    ).toBe("design_services");
     expect(getCategoryAppearance("unused-id", "Project Management").icon).toBe(
-      "ViewBoardsIcon",
+      "assignment",
     );
   });
 
@@ -88,7 +88,7 @@ describe("expert-skills-statistics.data", () => {
 
     expect(first).toEqual(second);
     expect(first.color).toMatch(/^#[0-9A-F]{6}$/i);
-    expect(first.icon).toMatch(/Icon$/);
+    expect(first.icon).toMatch(/^[a-z0-9_]+$/);
   });
 
   it("normalizes sizes on sqrt(wins) into the bubble range", () => {

src/statistics/expert-skills-statistics.data.ts

@@ -1,7 +1,8 @@
 /**
  * Visual tokens for Skill Statistics bubbles.
- * Category names/ids come from standardized-skills. Known catalog names
- * map to Figma icons/colors; unknown entries still hash by id.
+ * Category names/ids come from standardized-skills. Icons are Material Symbols
+ * Rounded ligatures (https://fonts.google.com/icons?icon.style=Rounded).
+ * Known catalog names map to Figma icons/colors; unknown entries still hash by id.
  */
 const CATEGORY_COLORS = [
   "#1B4F72",
@@ -29,30 +30,29 @@ const CATEGORY_COLORS = [
 ];
 
 const CATEGORY_ICONS = [
-  "TerminalIcon",
-  "RssIcon",
-  "GlobeAltIcon",
-  "ShieldCheckIcon",
-  "CloudIcon",
-  "RefreshIcon",
-  "DuplicateIcon",
-  "ChipIcon",
-  "ChartBarIcon",
-  "SparklesIcon",
-  "ServerIcon",
-  "PencilAltIcon",
-  "CalculatorIcon",
-  "CubeTransparentIcon",
-  "MapIcon",
-  "DesktopComputerIcon",
-  "ClipboardCheckIcon",
-  "DatabaseIcon",
-  "DeviceMobileIcon",
-  "ShareIcon",
-  "WifiIcon",
-  "ViewBoardsIcon",
-  "CodeIcon",
-  "CogIcon",
+  "terminal",
+  "cell_tower",
+  "language",
+  "shield_lock",
+  "desktop_cloud_stack",
+  "cloud_sync",
+  "layers",
+  "memory",
+  "analytics",
+  "psychology",
+  "data_table",
+  "design_services",
+  "calculate",
+  "database",
+  "map",
+  "install_desktop",
+  "fact_check",
+  "mobile_gear",
+  "hub",
+  "devices_other",
+  "assignment",
+  "integration_instructions",
+  "rule_settings",
 ];
 
 export type CategoryAppearance = {
@@ -69,57 +69,57 @@ export function normalizeCategoryName(value: string): string {
 }
 
 const NAMED_CATEGORY_APPEARANCE: Array<[string[], CategoryAppearance]> = [
-  [["Programming and Development"], { color: "#1B4F72", icon: "TerminalIcon" }],
-  [["Web Development"], { color: "#7EB8C4", icon: "GlobeAltIcon" }],
+  [["Programming and Development"], { color: "#1B4F72", icon: "terminal" }],
+  [["Web Development"], { color: "#7EB8C4", icon: "language" }],
   [
     ["Networking and Telecommunications"],
-    { color: "#5EB3C4", icon: "RssIcon" },
+    { color: "#5EB3C4", icon: "cell_tower" },
   ],
-  [["Cybersecurity"], { color: "#5B9BD5", icon: "ShieldCheckIcon" }],
+  [["Cybersecurity"], { color: "#5B9BD5", icon: "shield_lock" }],
   [
     [
       "Software Development Lifecycle (SDLC)",
       "Software Development Lifecycle",
       "SDLC",
     ],
-    { color: "#1A3D3D", icon: "RefreshIcon" },
+    { color: "#1A3D3D", icon: "cloud_sync" },
   ],
-  [["Cloud Computing"], { color: "#2C4A6E", icon: "CloudIcon" }],
-  [["Operating Systems"], { color: "#3D7EA6", icon: "ChipIcon" }],
-  [["DevOps and Automation"], { color: "#2D4A3E", icon: "CogIcon" }],
-  [["Data Analysis and Big Data"], { color: "#2C5F8A", icon: "ChartBarIcon" }],
-  [["Virtualization"], { color: "#3D7EA6", icon: "DuplicateIcon" }],
+  [["Cloud Computing"], { color: "#2C4A6E", icon: "desktop_cloud_stack" }],
+  [["Operating Systems"], { color: "#3D7EA6", icon: "memory" }],
+  [["DevOps and Automation"], { color: "#2D4A3E", icon: "rule_settings" }],
+  [["Data Analysis and Big Data"], { color: "#2C5F8A", icon: "analytics" }],
+  [["Virtualization"], { color: "#3D7EA6", icon: "layers" }],
   [
     ["Databases and Data Warehousing"],
-    { color: "#1B4F72", icon: "ServerIcon" },
+    { color: "#1B4F72", icon: "data_table" },
   ],
-  [
-    ["Mathematics and Statistics"],
-    { color: "#6B7C4A", icon: "CalculatorIcon" },
-  ],
-  [["Database Management"], { color: "#7EB8C4", icon: "DatabaseIcon" }],
+  [["Mathematics and Statistics"], { color: "#6B7C4A", icon: "calculate" }],
+  [["Database Management"], { color: "#7EB8C4", icon: "database" }],
   [
     ["Geospatial Information Systems (GIS)", "Geospatial Information Systems"],
-    { color: "#3D6A8A", icon: "MapIcon" },
+    { color: "#3D6A8A", icon: "map" },
   ],
-  [["Machine Learning and AI"], { color: "#5EB8B0", icon: "SparklesIcon" }],
+  [["Machine Learning and AI"], { color: "#5EB8B0", icon: "psychology" }],
   [
     ["User Experience Design and Multimedia", "UX Design and Multimedia"],
-    { color: "#3D5C5C", icon: "PencilAltIcon" },
+    { color: "#3D5C5C", icon: "design_services" },
   ],
   [
     ["Hardware and Systems Administration"],
-    { color: "#4EC4C4", icon: "DesktopComputerIcon" },
+    { color: "#4EC4C4", icon: "install_desktop" },
   ],
-  [["Mobile App Development"], { color: "#5A8A8A", icon: "DeviceMobileIcon" }],
+  [["Mobile App Development"], { color: "#5A8A8A", icon: "mobile_gear" }],
   [
     ["Software Testing and Quality Assurance", "Software Testing and QA"],
-    { color: "#2C5F8A", icon: "ClipboardCheckIcon" },
+    { color: "#2C5F8A", icon: "fact_check" },
+  ],
+  [["Blockchain"], { color: "#2C4A6E", icon: "hub" }],
+  [["IoT (Internet of Things)"], { color: "#3D8B8F", icon: "devices_other" }],
+  [["Project Management"], { color: "#3D7EA6", icon: "assignment" }],
+  [
+    ["Scripting and Automation"],
+    { color: "#5B9BD5", icon: "integration_instructions" },
   ],
-  [["Blockchain"], { color: "#2C4A6E", icon: "ShareIcon" }],
-  [["IoT (Internet of Things)"], { color: "#3D8B8F", icon: "WifiIcon" }],
-  [["Project Management"], { color: "#3D7EA6", icon: "ViewBoardsIcon" }],
-  [["Scripting and Automation"], { color: "#5B9BD5", icon: "CodeIcon" }],
 ];
 
 const CATEGORY_APPEARANCE_BY_NAME: Record<string, CategoryAppearance> =

src/statistics/expert-skills-statistics.service.spec.ts

@@ -75,9 +75,9 @@ describe("ExpertSkillsStatisticsService", () => {
       }),
     );
     expect(result[0].color).toBe("#1B4F72");
-    expect(result[0].icon).toBe("TerminalIcon");
+    expect(result[0].icon).toBe("terminal");
     expect(result[1].name).toBe("Scripting and Automation");
-    expect(result[1].icon).toBe("CodeIcon");
+    expect(result[1].icon).toBe("integration_instructions");
     expect(result[1].size).toBe(3);
   });