[FAI-13621] Add top languages breakdown

src/extension.ts

@@ -127,7 +127,7 @@ function registerSuggestionListener() {
 
   if (themeChangedListener === null) {
     themeChangedListener = vscode.window.onDidChangeActiveColorTheme((event) => {
-      farosPanel?.setTheme(event.kind);
+      farosPanel?.updateTheme();
     });
   }
 }
@@ -143,7 +143,6 @@ export function activate(context: vscode.ExtensionContext) {
   registerSuggestionListener();
 
   farosPanel = new FarosPanel(context.extensionUri);
-  farosPanel.setTheme(vscode.window.activeColorTheme.kind);
   context.subscriptions.push(
     vscode.window.registerWebviewViewProvider(
       FarosPanel.viewType,

src/panel.ts

@@ -1,5 +1,5 @@
 import * as vscode from "vscode";
-import { calculateAutoCompletionStats, calculateRatios, getTopRepositories } from "./stats";
+import { calculateAutoCompletionStats, calculateRatios, getTopLanguages, getTopRepositories } from "./stats";
 import { ThemeType } from "./webview/components/types";
 
 export default class FarosPanel implements vscode.WebviewViewProvider {
@@ -14,19 +14,21 @@ export default class FarosPanel implements vscode.WebviewViewProvider {
     const stats = calculateAutoCompletionStats();
     const ratios = calculateRatios();
     const topRepositories = getTopRepositories(5);
+    const topLanguages = getTopLanguages(5);
 
 	this.webview?.postMessage({
 		command: "refresh",
 		stats,
 		ratios,
 		topRepositories,
+    topLanguages,
 	  });
   }
 
-  public setTheme(theme: vscode.ColorThemeKind) {
+  public updateTheme() {
     this.webview?.postMessage({
       command: "themeChanged",
-      theme: theme === vscode.ColorThemeKind.Dark || theme === vscode.ColorThemeKind.HighContrast ? "Dark" : "Light" as ThemeType,
+      theme: vscode.window.activeColorTheme.kind === vscode.ColorThemeKind.Dark || vscode.window.activeColorTheme.kind === vscode.ColorThemeKind.HighContrast ? "Dark" : "Light" as ThemeType,
     });
   }
 
@@ -40,12 +42,7 @@ export default class FarosPanel implements vscode.WebviewViewProvider {
         switch (msg.command) {
           case "startup":
             this.refresh();
-            break;
-          case "refresh":
-            this.refresh();
-            break;
-          case "themeChanged":
-            this.setTheme(msg.theme);
+            this.updateTheme();
             break;
         }
       },

src/stats.test.ts

@@ -1,6 +1,6 @@
 import * as vscode from 'vscode';
 import * as assert from 'assert';
-import { calculateAutoCompletionStats, CHARS_PER_MINUTE, getTopRepositories } from './stats';
+import { calculateAutoCompletionStats, CHARS_PER_MINUTE, getTopLanguages, getTopRepositories } from './stats';
 import { AutoCompletionEvent } from './types';
 import { addAutoCompletionEvent, setContext } from './state';
 import { clearGlobalState } from './util';
@@ -66,4 +66,33 @@ suite('Stats Test Suite', () => {
             { repository: 'repo3', count: 1 },
         ]);
     });
-});
+
+    test('getTopLanguages should return top languages correctly', async () => {
+        const events: AutoCompletionEvent[] = [
+            { timestamp: startOfDay, autoCompletionCharCountChange: 5*CHARS_PER_MINUTE, filename: 'file1.ts', extension: '.ts', language: 'TypeScript', repository: 'repo1', branch: 'main' },
+            { timestamp: startOfDay, autoCompletionCharCountChange: 15*CHARS_PER_MINUTE, filename: 'file2.js', extension: '.js', language: 'JavaScript', repository: 'repo2', branch: 'feature' },
+            { timestamp: startOfDay, autoCompletionCharCountChange: 20*CHARS_PER_MINUTE, filename: 'file3.js', extension: '.js', language: 'JavaScript', repository: 'repo2', branch: 'main' },
+            { timestamp: startOfDay, autoCompletionCharCountChange: 10*CHARS_PER_MINUTE, filename: 'file4.js', extension: '.js', language: 'JavaScript', repository: 'repo3', branch: 'feature' },
+            { timestamp: startOfDay, autoCompletionCharCountChange: 25*CHARS_PER_MINUTE, filename: 'file3.py', extension: '.py', language: 'Python', repository: 'repo3', branch: 'develop' },
+            { timestamp: startOfDay, autoCompletionCharCountChange: 15*CHARS_PER_MINUTE, filename: 'file5.py', extension: '.py', language: 'Python', repository: 'repo1', branch: 'main' },
+            { timestamp: startOfDay, autoCompletionCharCountChange: 10*CHARS_PER_MINUTE, filename: 'file6.rs', extension: '.rs', language: 'Rust', repository: 'repo4', branch: 'main' },
+            { timestamp: startOfDay, autoCompletionCharCountChange: 20*CHARS_PER_MINUTE, filename: 'file7.go', extension: '.go', language: 'Go', repository: 'repo5', branch: 'feature' },
+            { timestamp: startOfDay, autoCompletionCharCountChange: 30*CHARS_PER_MINUTE, filename: 'file8.java', extension: '.java', language: 'Java', repository: 'repo2', branch: 'develop' },
+            { timestamp: startOfDay, autoCompletionCharCountChange: 25*CHARS_PER_MINUTE, filename: 'file9.cpp', extension: '.cpp', language: 'C++', repository: 'repo6', branch: 'main' }
+        ];
+
+        events.forEach(addAutoCompletionEvent);
+
+        const result = getTopLanguages(8, now);
+
+        assert.deepStrictEqual(result, [
+            { language: 'JavaScript', count: 3 },
+            { language: 'Python', count: 2 },
+            { language: 'C++', count: 1 },
+            { language: 'Go', count: 1 },
+            { language: 'Java', count: 1 },
+            { language: 'Rust', count: 1 },
+            { language: 'TypeScript', count: 1 },
+        ]);
+    });
+});

src/stats.ts

@@ -97,9 +97,37 @@ export const getTopRepositories = (limit: number = 5, now: Date = new Date()): {
     });
 
     const sortedRepositories = Object.entries(repositoryCounts)
-        .sort(([, countA], [, countB]) => countB - countA)
+        .sort(([langA, countA], [langB, countB]) => {
+            const countDiff = countB - countA;
+            return countDiff !== 0 ? countDiff : langA.localeCompare(langB);
+        })
         .slice(0, limit)
         .map(([repository, count]) => ({ repository, count }));
 
     return sortedRepositories;
 };
+
+export const getTopLanguages = (limit: number = 5, now: Date = new Date()): { language: string; count: number }[] => {
+    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+    const history = getHourlyAggregateForRange(startOfMonth, now);
+
+    const languageCounts: { [key: string]: number } = {};
+
+    history.forEach(aggregate => {
+        if (aggregate.languages) {
+            Object.keys(aggregate.languages).forEach(language => {
+                languageCounts[language] = (languageCounts[language] || 0) + aggregate.languages[language].autoCompletionEventCount;
+            });
+        }
+    });
+
+    const sortedLanguages = Object.entries(languageCounts)
+        .sort(([langA, countA], [langB, countB]) => {
+            const countDiff = countB - countA;
+            return countDiff !== 0 ? countDiff : langA.localeCompare(langB);
+        })
+        .slice(0, limit)
+        .map(([language, count]) => ({ language, count }));
+
+    return sortedLanguages;
+};

src/webview/components/App.tsx

@@ -41,22 +41,24 @@ const App = () => {
       count: number;
     }[]
   >([]);
+  const [topLanguages, setTopLanguages] = React.useState<
+    {
+      language: string;
+      count: number;
+    }[]
+  >([]);
   const [showDetailedBreakdown, setShowDetailedBreakdown] = React.useState(false);
   const [theme, setTheme] = React.useState<ThemeType>("Dark");
 
   React.useEffect(() => {
     window.addEventListener("message", (event) => {
       const message = event.data; // The json data that the extension sent
       switch (message.command) {
-        case "startup":
-          setStats(message.stats);
-          setRatios(message.ratios);
-          setTopRepositories(message.topRepositories);
-          break;
         case "refresh":
           setStats(message.stats);
           setRatios(message.ratios);
           setTopRepositories(message.topRepositories);
+          setTopLanguages(message.topLanguages);
           break;
         case "themeChanged":
           setTheme(message.theme as ThemeType);
@@ -126,6 +128,26 @@ const App = () => {
           <div>N/A</div>
         )}
       </div>
+
+      <div style={panelStyle}>
+        <div style={titleStyle}>Top Languages</div>
+        <div style={subtitleStyle}>Languages with the highest auto-completion</div>
+        {topLanguages.length > 0 ? (
+          <div style={overviewGridStyle()}>
+            {topLanguages.map((lang) => (
+              <>
+                <div style={gridItemStyle()}>
+                  {repositoryIcon(topLanguages.indexOf(lang))}
+                  {lang.language}
+                </div>
+                <div style={gridItemStyle({justifyContent: "flex-end"})}>{lang.count}</div>
+              </>
+            ))}
+          </div>
+        ) : (
+          <div>N/A</div>
+        )}
+      </div>
     </>
   );
 };

src/webview/components/Styles.ts

@@ -41,7 +41,7 @@ export const gridStyle = (customizations = {}) => ({
 export const overviewGridStyle = (customizations = {}) => ({
   ...gridStyle({
     gridTemplateColumns: "auto auto",
-    width: "255px", 
+    width: "260px", 
     ...customizations,
   }),
 });
@@ -53,7 +53,7 @@ export const detailsGridStyle = (theme: ThemeType, customizations = {}) => ({
     border: `1px solid ${theme === "Dark" ? "#3C3C3C" : "#E0E0E0"}`, 
     background: theme === "Dark" ? "#1E1E1E" : "#FFFFFF", 
     padding: "8px 16px", 
-    width: "225px",
+    width: "230px",
     ...customizations,
   }),
 });