Updates to the JS Report

www/src/App.js

@@ -7,7 +7,10 @@ import { Nav } from "./nav";
 import { Spec, Stats } from "./spec";
 import { Section } from "./section";
 import { Link } from "./link";
+import { List } from "./list";
 import specifications from "./result";
+import { AllSpecificationsRequirements } from "./result";
+import { Stats as StatsClass } from "./stats";
 import clsx from "clsx";
 
 const drawerWidth = 400;
@@ -86,8 +89,11 @@ function App() {
         })}
       >
         <div className={classes.drawerHeader} />
-        <Container maxWidth="lg" className={classes.container}>
+        <Container maxWidth={false} className={classes.container}>
           <Switch>
+            <Route path="/list">
+              <ListRoute />
+            </Route>
             <Route path="/spec/:specid/:sectionid">
               <SectionRoute />
             </Route>
@@ -136,4 +142,8 @@ function SectionRoute() {
   return <Section spec={spec} section={section} />;
 }
 
+function ListRoute() {
+  return <List spec={AllSpecificationsRequirements} />;
+}
+
 export default App;

www/src/list.js

@@ -0,0 +1,21 @@
+import { Requirements, Stats } from "./spec"
+
+export function List({spec}) {
+  return (
+    <>
+      <h2>Requirements across specifications</h2>
+
+      <h3>Stats</h3>
+      <Stats spec={spec} />
+
+      <h3>Requirements</h3>
+      <Requirements
+        key={spec.id}
+        requirements={spec.requirements}
+        showSection={true}
+        showSpecification={true}
+      />
+    </>
+  );
+}
+

www/src/nav.js

@@ -125,7 +125,13 @@ export function Nav({ open, setOpen }) {
           </IconButton>
           <Link to="/" color="inherit">
             <Typography variant="h6" noWrap>
-              Compliance Coverage Report
+              Compliance by Specification
+            </Typography>
+          </Link>
+          <Divider orientation="vertical" variant="middle" flexItem />
+          <Link to="/list" color="inherit">
+            <Typography variant="h6" noWrap>
+              Compliance by Requirement
             </Typography>
           </Link>
         </Toolbar>

www/src/result.js

@@ -1,3 +1,6 @@
+
+import { Stats } from "./stats";
+
 const input =
   process.env.NODE_ENV === "production"
     ? JSON.parse(document.getElementById("result").innerHTML)
@@ -91,41 +94,6 @@ input.annotations.forEach((anno, id) => {
   };
 });
 
-class Stats {
-  constructor() {
-    this.total = 0;
-    this.complete = 0;
-    this.incomplete = 0;
-    this.citations = 0;
-    this.implications = 0;
-    this.tests = 0;
-    this.exceptions = 0;
-    this.todos = 0;
-  }
-
-  onRequirement(requirement) {
-    this.total += 1;
-
-    if (requirement.incomplete) this.incomplete += 1;
-    else if (requirement.isOk) this.complete += 1;
-
-    if (requirement.citation) this.citations += 1;
-    if (requirement.implication) this.implications += 1;
-    if (requirement.test) this.tests += 1;
-    if (requirement.exception) this.exceptions += 1;
-    if (requirement.todo) this.todos += 1;
-  }
-
-  percent(field) {
-    const percent = this.total ? this[field] / this.total : 0;
-    return Number(percent).toLocaleString(undefined, {
-      style: "percent",
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 2,
-    });
-  }
-}
-
 // create stats now that we've linked everything
 specifications.forEach((spec) => {
   spec.requirements.sort(sortRequirements);
@@ -288,3 +256,16 @@ function mapLine(line) {
 }
 
 export default specifications;
+
+export const AllSpecificationsRequirements = {
+  id: "AllSpecificationsRequirements",
+  stats: specifications.reduce((total, {stats}) => {
+    Object.keys(stats).forEach((statName) => {
+      const stat = total[statName] || new StatsClass()
+      total[statName] = stat;
+      stat.onStat(stats[statName]);
+    });
+    return total;
+  }, {}),
+  requirements: specifications.flatMap((spec) => spec.requirements),
+}

www/src/spec.js

@@ -68,17 +68,44 @@ const LEVEL_IDS = LEVELS.reduce((acc, level, idx) => {
   return acc;
 }, {});
 
-export function Requirements({ requirements, showSection }) {
+export function Requirements({ requirements, showSection, showSpecification }) {
   const classes = useStyles();
 
   const columns = [];
 
+  if (showSpecification) {
+    columns.push({
+      flex: 1, // This is paired with "content" below
+      field: "specification",
+      headerName: "Specification",
+      valueGetter(params) {
+        return params.row.specification.title;
+      },
+      sortComparator(v1, v2) {
+        return v1.localeCompare(v2)
+      },
+      renderCell(params) {
+        const requirement = params.row;
+        return (
+          <Link
+            to={{
+              pathname: requirement.specification.url,
+            }}
+          >
+            {requirement.specification.title}
+          </Link>
+        );
+      },
+    });
+  }
+
   if (showSection) {
     columns.push({
+      flex: 1, // This is paired with "content" below
       field: "section",
       headerName: "Section",
       valueGetter(params) {
-        return params.row;
+        return params.row.section.title;
       },
       sortComparator(v1, v2) {
         return v1.cmp(v2);
@@ -92,7 +119,7 @@ export function Requirements({ requirements, showSection }) {
               hash: `#A${requirement.id}`,
             }}
           >
-            {requirement.section.shortId}
+            {requirement.section.title}
           </Link>
         );
       },
@@ -104,7 +131,7 @@ export function Requirements({ requirements, showSection }) {
       {
         field: "level",
         headerName: "Requirement",
-        width: 120,
+        width: 150,
         sortComparator(v1, v2) {
           return LEVEL_IDS[v2] - LEVEL_IDS[v1];
         },
@@ -182,14 +209,14 @@ export function Requirements({ requirements, showSection }) {
     field: "comment",
     headerName: "Text",
     sortable: false,
-    width: 850,
+    flex: 4, // This is paired with "section" above
     cellClassName: classes.text,
   });
 
   return (
     <div className={classes.root}>
       <DataGrid
-        pageSize={25}
+        pageSize={100}
         disableSelectionOnClick
         autoHeight={true}
         rows={requirements}

www/src/stats.js

@@ -0,0 +1,46 @@
+
+export class Stats {
+  constructor() {
+    this.total = 0;
+    this.complete = 0;
+    this.incomplete = 0;
+    this.citations = 0;
+    this.implications = 0;
+    this.tests = 0;
+    this.exceptions = 0;
+    this.todos = 0;
+  }
+
+  onRequirement(requirement) {
+    this.total += 1;
+
+    if (requirement.incomplete) this.incomplete += 1;
+    else if (requirement.isOk) this.complete += 1;
+
+    if (requirement.citation) this.citations += 1;
+    if (requirement.implication) this.implications += 1;
+    if (requirement.test) this.tests += 1;
+    if (requirement.exception) this.exceptions += 1;
+    if (requirement.todo) this.todos += 1;
+  }
+
+  onStat(stat) {
+    this.total += stat.total;
+    this.complete += stat.complete;
+    this.incomplete += stat.incomplete;
+    this.citations += stat.citations;
+    this.implications += stat.implications;
+    this.tests += stat.tests;
+    this.exceptions += stat.exceptions;
+    this.todos += stat.todos;
+  }
+
+  percent(field) {
+    const percent = this.total ? this[field] / this.total : 0;
+    return Number(percent).toLocaleString(undefined, {
+      style: "percent",
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2,
+    });
+  }
+}