start observable table for reviews page #12

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: dashboard
 Title: What the Package Does (One Line, Title Case)
-Version: 0.1.8.025
+Version: 0.1.8.026
 Authors@R: 
   person(given = "First",
          family = "Last",

codemeta.json

@@ -6,7 +6,7 @@
   "name": "dashboard: What the Package Does (One Line, Title Case)",
   "codeRepository": "https://github.com/ropensci-review-tools/dashboard",
   "license": "https://spdx.org/licenses/MIT",
-  "version": "0.1.8.025",
+  "version": "0.1.8.026",
   "programmingLanguage": {
     "@type": "ComputerLanguage",
     "name": "R",

quarto/_colorTable_fn.qmd

@@ -73,3 +73,75 @@ function colorTable(data, {
   return form;
 }
 ```
+
+```{ojs}
+// And modified verison for open reviews table
+function reviewTable(data, {
+        colorColumn,
+        colorOpacity = 0.5,
+        issueNumColumn,
+        titleColumn,
+        columns = undefined,
+        format = {}, ...options}) {
+  const [row] = data;
+  if(!row) return Inputs.table(data, options);
+  
+  let index = Object.keys(row).indexOf(colorColumn);
+  if(index < 0) throw Error("colorColumn not found in data");
+  if(format[colorColumn]) throw Error("colorColumn is reserved");
+  if(columns && columns.indexOf(colorColumn) < 0) columns.push(colorColumn);
+  if(columns) index = columns.indexOf(colorColumn);
+  const nth = `nth-child(${index + 2})`;
+
+  // Observable Table doesn't know about rows, so need to convert the
+  // "titleColumn" into an array with the title and issue number
+  // so then pass to the `format` call below to construct <a> href
+  // objects:
+  const preprocessedData = data.map(row => ({
+     ...row,
+     [titleColumn]: [row[titleColumn],row[issueNumColumn]]
+  }));``
+
+  const form = Inputs.table(preprocessedData, {
+    format: {
+      ...format,
+      [colorColumn]: d => htl.html`<div style="--row-color:${d}">`,
+      [issueNumColumn]: d => htl.html`<a href="https://github.com/ropensci/software-review/issues/${d}">${d}</a>`,
+      [titleColumn]: d => htl.html`<a href="https://github.com/ropensci/software-review/issues/${d[1]}">${d[0]}</a>`,
+    },
+    columns,
+    ...options
+  });
+
+  const scope = DOM.uid().id;
+  form.classList.add(scope);
+  
+  form.append(htl.html`<style>
+
+    /* Ensure that the sticky header always stays on top */
+    .${scope} thead { position: relative; z-index: 2 }
+
+    /* Hide the last column */
+    .${scope} th:${nth},
+    .${scope} td:${nth} { width: 0; padding: 0 }
+    .${scope} th:${nth} { visibility: hidden }
+
+    /* Inject the background color */
+    .${scope} tr { position: relative }
+    .${scope} td:${nth} div:after {
+      opacity: ${colorOpacity};
+      content: "";
+      display: block;
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: -1;
+      background-color: var(--row-color);
+    }
+  `);
+
+  return form;
+}
+```

quarto/reviews.qmd

@@ -1,5 +1,7 @@
 ---
 title: "Software Review Overview"
+execute:
+  echo: false
 format: 
   html:
     fig-width: 8
@@ -119,6 +121,69 @@ gt::gt (udat) |>
     dashboard:::add_urgency_cols (c ("urgency", "importance"))
 ```
 
+```{r}
+ojs_define (submissions = rev_dat)
+```
+```{ojs}
+submissionsIn = {
+    return transpose(submissions).map(row => ({
+        ...row,
+        rowColor: row.submission_type === "Stats" ? "yellow" : "transparent",
+    }));
+}
+```
+```{ojs}
+viewof stage = Inputs.checkbox(
+    ["0/presubmission",
+     "1/editor-checks",
+     "2/seeking-reviewer(s)",
+     "3/reviewer(s)-assigned",
+     "4/review(s)-in-awaiting-changes",
+     "5/awaiting-reviewer(s)-response"
+    ],
+    { value: ["0/presubmission"], label: "Submission Stage:" }
+)
+```
+
+```{ojs}
+filtered = submissionsIn.filter(function(submission) {
+  return stage.includes(submission.stage);
+})
+sortColumn = "elapsed_days"
+
+// This sorts in reverse order:
+filteredSorted = filtered.sort((a, b) => {
+  if (a[sortColumn] < b[sortColumn]) {
+    return 1;
+  }
+  if (a[sortColumn] > b[sortColumn]) {
+    return -1;
+  }
+  return 0;
+});
+```
+
+{{< include _colorTable_fn.qmd >}}
+
+nope
+
+```{ojs}
+// And this uses the 'reviewTable' function defined in the above file to
+// generate an Observable Inputs.table with coloured rows.
+console.log("----filteredSorted: ", filteredSorted)
+columns = ["number", "title", "status", "stage_date", "editor", "inactive_for"]
+reviewTable(filteredSorted,
+  {
+    colorColumn: "rowColor",
+    issueNumColumn: "number",
+    titleColumn: "title",
+    columns: columns,
+    height: 'auto',
+  }
+)
+```
+
+
 
 ## 0\/Pre-submission