feat(utils): implement a new design for stdout

Closes #190
code-pushup · Nov 6, 2023 · 5d88568 · 5d88568
1 parent 213a4b8
commit 5d88568
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 63 deletions.
diff --git a/e2e/cli-e2e/tests/collect.spec.ts b/e2e/cli-e2e/tests/collect.spec.ts
@@ -6,8 +6,7 @@ import { cleanFolderPutGitKeep } from '../mocks/fs.mock';
 
 describe('CLI collect', () => {
   const exampleCategoryTitle = 'Code style';
-  const exampleAuditTitle =
-    'Require `const` declarations for variables that are never reassigned after declared';
+  const exampleAuditTitle = 'Require `const` declarations for variables';
 
   const omitVariableData = ({
     date,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@swc/helpers": "~0.5.0",
     "bundle-require": "^4.0.1",
     "chalk": "^5.3.0",
+    "cli-table3": "^0.6.3",
     "cliui": "^8.0.1",
     "multi-progress-bars": "^5.0.3",
     "simple-git": "^3.20.0",
@@ -26,7 +27,6 @@
     "@commitlint/config-conventional": "^17.7.0",
     "@commitlint/config-nx-scopes": "^17.6.4",
     "@commitlint/cz-commitlint": "^17.7.1",
-    "commitlint-plugin-tense": "^1.0.2",
     "@nx/devkit": "^16.8.1",
     "@nx/esbuild": "16.7.4",
     "@nx/eslint-plugin": "16.7.4",
@@ -52,6 +52,7 @@
     "@vitest/ui": "~0.32.0",
     "benchmark": "^2.1.4",
     "commitizen": "^4.3.0",
+    "commitlint-plugin-tense": "^1.0.2",
     "dotenv": "^16.3.1",
     "esbuild": "^0.17.17",
     "eslint": "~8.46.0",

diff --git a/packages/utils/package.json b/packages/utils/package.json
@@ -7,6 +7,7 @@
     "chalk": "^5.3.0",
     "cliui": "^8.0.1",
     "simple-git": "^3.20.0",
-    "multi-progress-bars": "^5.0.3"
+    "multi-progress-bars": "^5.0.3",
+    "cli-table3": "^0.6.3"
   }
 }
diff --git a/packages/utils/src/lib/report-to-stdout.ts b/packages/utils/src/lib/report-to-stdout.ts
@@ -1,20 +1,27 @@
 import chalk from 'chalk';
+import Table from 'cli-table3';
 import cliui from 'cliui';
 import { NEW_LINE } from './md';
-import { CODE_PUSHUP_DOMAIN, FOOTER_PREFIX, countWeightedRefs } from './report';
+import {
+  CODE_PUSHUP_DOMAIN,
+  FOOTER_PREFIX,
+  countCategoryAudits,
+} from './report';
 import { ScoredReport } from './scoring';
-import { reportHeadlineText, reportOverviewTableHeaders } from './utils';
-
-const ui = cliui({ width: 60 }); // @TODO check display width
+import {
+  formatReportScore,
+  reportHeadlineText,
+  reportRawOverviewTableHeaders,
+} from './utils';
 
 export function reportToStdout(report: ScoredReport): void {
   reportToHeaderSection(report);
   reportToMetaSection(report);
   console.log(NEW_LINE); // @TODO just use '' and \n does only work in markdown
-  reportToOverviewSection(report);
-  console.log(NEW_LINE);
   reportToDetailSection(report);
   console.log(NEW_LINE);
+  reportToOverviewSection(report);
+  console.log(NEW_LINE);
   console.log(`${FOOTER_PREFIX} ${CODE_PUSHUP_DOMAIN}`);
 }
 
@@ -42,67 +49,68 @@ function reportToMetaSection(report: ScoredReport): void {
   _print(`---`);
 }
 
-function reportToOverviewSection(report: ScoredReport): void {
-  const base = {
-    width: 20,
-    padding: [0, 1, 0, 1],
-  };
-
-  // table header
-  ui.div(...reportOverviewTableHeaders.map(text => ({ text, ...base })));
+function reportToOverviewSection({ categories, plugins }: ScoredReport): void {
+  console.log(chalk.magentaBright.bold('Categories') + '\n');
 
-  // table content
-  report.categories.forEach(({ title, refs, score }) => {
-    const audits = `${refs.length.toString()}/${countWeightedRefs(refs)}`;
-
-    ui.div(
-      {
-        text: `${title}`,
-        ...base,
-      },
-      {
-        text: score.toString(),
-        ...base,
-      },
-      {
-        text: audits,
-        ...base,
-      },
-    );
+  const table = new Table({
+    head: reportRawOverviewTableHeaders,
+    colAligns: ['left', 'right', 'right'],
+    style: {
+      head: ['cyan'],
+    },
   });
 
-  console.log(ui.toString());
+  table.push(
+    ...categories.map(({ title, score, refs }) => [
+      title,
+      withColor({ score }),
+      countCategoryAudits(refs, plugins),
+    ]),
+  );
+
+  console.log(table.toString());
 }
 
 function reportToDetailSection(report: ScoredReport): void {
-  const { categories, plugins } = report;
+  const ui = cliui({ width: 80 });
 
-  categories.forEach(category => {
-    const { title, refs, score } = category;
+  const { plugins } = report;
 
-    console.log(chalk.bold(`${title} ${score}`));
+  plugins.forEach(({ title, audits }) => {
+    ui.div(chalk.magentaBright.bold(`${title} audits`) + '\n');
 
-    refs.forEach(
-      ({ slug: auditSlugInCategoryRefs, weight, plugin: pluginSlug }) => {
-        const audit = plugins
-          .find(({ slug }) => slug === pluginSlug)
-          ?.audits.find(
-            ({ slug: auditSlugInPluginAudits }) =>
-              auditSlugInPluginAudits === auditSlugInCategoryRefs,
-          );
-
-        if (audit) {
-          let content = `${audit.description}` + NEW_LINE;
-          if (audit.docsUrl) {
-            content += `  ${audit.docsUrl} ${NEW_LINE}`;
-          }
-          console.log(`- ${audit.title} (${weight})`);
-          console.log(`  ${content}`);
-        } else {
-          // this should never happen
-          throw new Error(`No audit found for ${auditSlugInCategoryRefs}`);
-        }
-      },
-    );
+    audits.forEach(({ score, title, displayValue, value }) => {
+      ui.div(
+        {
+          text: withColor({ score, text: '●' }),
+          width: 2,
+          padding: [0, 1, 0, 0],
+        },
+        {
+          text: title,
+          padding: [0, 3, 0, 0],
+        },
+        {
+          text: chalk.cyanBright(displayValue || `${value}`),
+          width: 10,
+          padding: [0, 0, 0, 0],
+        },
+      );
+    });
   });
+
+  console.log(ui.toString());
+}
+
+function withColor({ score, text }: { score: number; text?: string }) {
+  let str = text ?? formatReportScore(score);
+  const style = text ? chalk : chalk.bold;
+  if (score < 0.5) {
+    str = style.red(str);
+  } else if (score < 0.9) {
+    str = style.yellow(str);
+  } else {
+    str = style.green(str);
+  }
+  return str;
 }
diff --git a/packages/utils/src/lib/utils.ts b/packages/utils/src/lib/utils.ts
@@ -6,6 +6,7 @@ export const reportOverviewTableHeaders = [
   '⭐ Score',
   '🛡 Audits',
 ];
+export const reportRawOverviewTableHeaders = ['Category', 'Score', 'Audits'];
 export const reportMetaTableHeaders: string[] = [
   'Commit',
   'Version',