Merge pull request #137 from togostanza/feature/support-bin-in-barchart

Feature/support bin in barchart
togostanza · May 30, 2024 · b697320 · b697320
2 parents 1d325a8 + 60a3d16
commit b697320
Show file tree

Hide file tree

Showing 10 changed files with 422 additions and 167 deletions.
diff --git a/stanzas/barchart/index.ts b/stanzas/barchart/index.ts
diff --git a/stanzas/barchart/metadata.json b/stanzas/barchart/metadata.json
@@ -8,7 +8,10 @@
   "stanza:license": "MIT",
   "stanza:author": "DBCLS",
   "stanza:address": "https://github.com/togostanza/metastanza",
-  "stanza:contributor": ["PENQE", "Einishi Tech"],
+  "stanza:contributor": [
+    "PENQE",
+    "Einishi Tech"
+  ],
   "stanza:created": "2021-01-18",
   "stanza:updated": "2021-02-16",
   "stanza:parameter": [
@@ -21,22 +24,47 @@
     {
       "stanza:key": "data-type",
       "stanza:type": "single-choice",
-      "stanza:choice": ["json", "tsv", "csv", "sparql-results-json"],
+      "stanza:choice": [
+        "json",
+        "tsv",
+        "csv",
+        "sparql-results-json"
+      ],
       "stanza:example": "json",
       "stanza:description": "Data type",
       "stanza:required": true
     },
+    {
+      "stanza:key": "data-interpretation",
+      "stanza:type": "single-choice",
+      "stanza:choice": [
+        "categorical",
+        "distribution"
+      ],
+      "stanza:example": "distribution",
+      "stanza:description": "\"categorical\" is interpreted as a so-called bar chart, and \"distribution\" as a histogram."
+    },
+    {
+      "stanza:key": "data-bin-count",
+      "stanza:type": "number",
+      "stanza:example": 20,
+      "stanza:default": 20,
+      "stanza:description": "Specifies the number of histograms. Valid when \"distribution\" is selected for \"data-interpretation\"."
+    },
     {
       "stanza:key": "axis-x-key",
       "stanza:type": "text",
-      "stanza:example": "chromosome",
+      "stanza:example": "count",
       "stanza:description": "X axis data key",
       "stanza:required": true
     },
     {
       "stanza:key": "axis-x-placement",
       "stanza:type": "single-choice",
-      "stanza:choice": ["top", "bottom"],
+      "stanza:choice": [
+        "top",
+        "bottom"
+      ],
       "stanza:example": "bottom",
       "stanza:description": "axis placement",
       "stanza:required": false
@@ -98,7 +126,10 @@
     {
       "stanza:key": "axis-y-placement",
       "stanza:type": "single-choice",
-      "stanza:choice": ["left", "right"],
+      "stanza:choice": [
+        "left",
+        "right"
+      ],
       "stanza:example": "left",
       "stanza:description": "Y axis placement",
       "stanza:required": false
@@ -161,7 +192,10 @@
     {
       "stanza:key": "grouping-arrangement",
       "stanza:type": "single-choice",
-      "stanza:choice": ["stacked", "grouped"],
+      "stanza:choice": [
+        "stacked",
+        "grouped"
+      ],
       "stanza:example": "grouped",
       "stanza:description": "Bars arrangement",
       "stanza:required": false

diff --git a/stanzas/barchart/style.scss b/stanzas/barchart/style.scss
@@ -20,7 +20,7 @@ svg {
     stroke: var(--togostanza-axis-zero_line_color);
   }
 
-  .bar-group {
+  .bar-group, .bar {
     > rect {
       stroke-width: 0.5px;
       stroke: var(--togostanza-border-color);

diff --git a/stanzas/column-tree/index.js b/stanzas/column-tree/index.js
@@ -26,7 +26,6 @@ export default class ColumnTree extends MetaStanza {
     });
     camelCaseParams.data = this.__data.asTree({
       nodeLabelKey: this.params["node-label_key"].trim(),
-      nodeGroupKey: this.params["node-group_key"].trim(),
       nodeValueKey: this.params["node-value_key"].trim(),
     }).data;
 

diff --git a/stanzas/column-tree/metadata.json b/stanzas/column-tree/metadata.json
@@ -11,7 +11,9 @@
   "stanza:license": "MIT",
   "stanza:author": "DBCLS",
   "stanza:address": "https://github.com/togostanza/metastanza",
-  "stanza:contributor": ["PENQE"],
+  "stanza:contributor": [
+    "PENQE"
+  ],
   "stanza:created": "2021-08-13",
   "stanza:updated": "2021-08-13",
   "stanza:parameter": [
@@ -24,7 +26,12 @@
     {
       "stanza:key": "data-type",
       "stanza:type": "single-choice",
-      "stanza:choice": ["json", "tsv", "csv", "sparql-results-json"],
+      "stanza:choice": [
+        "json",
+        "tsv",
+        "csv",
+        "sparql-results-json"
+      ],
       "stanza:example": "json",
       "stanza:description": "Data type",
       "stanza:required": true
@@ -40,17 +47,13 @@
       "stanza:example": "size",
       "stanza:description": "Key for data attribute to display as value"
     },
-    {
-      "stanza:key": "node-group_key",
-      "stanza:type": "text",
-      "stanza:example": "parent",
-      "stanza:description": "Group key",
-      "stanza:required": true
-    },
     {
       "stanza:key": "node-value_alignment",
       "stanza:type": "single-choice",
-      "stanza:choice": ["vertical", "horizontal"],
+      "stanza:choice": [
+        "vertical",
+        "horizontal"
+      ],
       "stanza:example": "horizontal",
       "stanza:description": "Set alignment of node content"
     },

diff --git a/stanzas/pagination-table/app.vue b/stanzas/pagination-table/app.vue
@@ -649,7 +649,7 @@ export default defineComponent({
       const isShift = event.shiftKey;
       const isCmd = event.metaKey || event.ctrlKey;
       const filteredRowIds = filteredRows.value.map((row) => {
-        return row.find((obj) => obj.column.id === "__togostanza_id__").value;
+        return +row.find((obj) => obj.column.id === "__togostanza_id__").value;
       });
 
       // get index and ID
@@ -658,7 +658,7 @@ export default defineComponent({
         rowIndex;
       const rowId = filteredRowIds[actualRowIndex];
       // selected rows
-      let selectedRows = [...state.selectedRows];
+      let selectedIds = [...state.selectedRows];
       // update selected rows
       if (isShift && state.lastSelectedRow !== null) {
         const lastSelectedRowIndex = filteredRowIds.indexOf(
@@ -667,30 +667,33 @@ export default defineComponent({
         const start = Math.min(lastSelectedRowIndex, actualRowIndex);
         const end = Math.max(lastSelectedRowIndex, actualRowIndex);
         for (let i = start; i <= end; i++) {
-          if (!selectedRows.includes(filteredRowIds[i])) {
-            selectedRows.push(filteredRowIds[i]);
+          if (!selectedIds.includes(filteredRowIds[i])) {
+            selectedIds.push(filteredRowIds[i]);
           }
         }
       } else if (isCmd) {
-        if (selectedRows.includes(rowId)) {
-          selectedRows.splice(selectedRows.indexOf(rowId), 1);
+        if (selectedIds.includes(rowId)) {
+          selectedIds.splice(selectedIds.indexOf(rowId), 1);
         } else {
-          selectedRows.push(rowId);
+          selectedIds.push(rowId);
         }
       } else {
-        selectedRows = [rowId];
+        selectedIds = [rowId];
       }
 
       // dispatch event
-
       const stanza = rootElement.value.parentNode.parentNode.parentNode.host;
       stanza.dispatchEvent(
         new CustomEvent("changeSelectedNodes", {
-          detail: selectedRows,
+          detail: {
+            selectedIds,
+            targetId: rowId,
+            dataUrl: params.dataUrl
+          },
         })
       );
       state.lastSelectedRow = rowId;
-      state.selectedRows = [...selectedRows];
+      state.selectedRows = [...selectedIds.map(row => row.toString())];
     };
 
     const handleMouseDown = (event) => {
@@ -716,8 +719,9 @@ export default defineComponent({
       return state.selectedRows.includes(rowID);
     };
 
-    const updateSelectedRows = (rows) => {
-      state.selectedRows = [...rows];
+    const updateSelectedRows = (emitSelectedEventParams) => {
+      const {selectedIds} = emitSelectedEventParams;
+      state.selectedRows = [...selectedIds.map(id => id.toString())];
     };
 
     return {

diff --git a/stanzas/sunburst/index.js b/stanzas/sunburst/index.js
@@ -109,7 +109,6 @@ export default class Sunburst extends MetaStanza {
     const main = this._main;
     const data = this.__data.asTree({
       nodeLabelKey: this.params["node-label_key"].trim(),
-      nodeGroupKey: this.params["node-group_key"].trim(),
       nodeValueKey: this.params["node-value_key"].trim(),
     }).data;
 

diff --git a/stanzas/sunburst/metadata.json b/stanzas/sunburst/metadata.json
@@ -11,7 +11,9 @@
   "stanza:license": "MIT",
   "stanza:author": "DBCLS",
   "stanza:address": "https://github.com/togostanza/metastanza",
-  "stanza:contributor": ["PENQE"],
+  "stanza:contributor": [
+    "PENQE"
+  ],
   "stanza:created": "2021-10-28",
   "stanza:updated": "2021-10-28",
   "stanza:parameter": [
@@ -24,18 +26,16 @@
     {
       "stanza:key": "data-type",
       "stanza:type": "single-choice",
-      "stanza:choice": ["json", "tsv", "csv", "sparql-results-json"],
+      "stanza:choice": [
+        "json",
+        "tsv",
+        "csv",
+        "sparql-results-json"
+      ],
       "stanza:example": "json",
       "stanza:description": "Data type",
       "stanza:required": true
     },
-    {
-      "stanza:key": "node-group_key",
-      "stanza:type": "text",
-      "stanza:example": "parent",
-      "stanza:description": "Group key",
-      "stanza:required": true
-    },
     {
       "stanza:key": "node-value_key",
       "stanza:type": "text",
@@ -77,7 +77,11 @@
     {
       "stanza:key": "scaling",
       "stanza:type": "single-choice",
-      "stanza:choice": ["By value", "Equal children", "Equal parents"],
+      "stanza:choice": [
+        "By value",
+        "Equal children",
+        "Equal parents"
+      ],
       "stanza:example": "By value",
       "stanza:description": "Scaling of the nodes"
     },

diff --git a/stanzas/treemap/index.js b/stanzas/treemap/index.js
@@ -65,7 +65,6 @@ export default class TreeMapStanza extends MetaStanza {
     const drawContent = async () => {
       const data = this.__data.asTree({
         nodeLabelKey: this.params["node-label_key"].trim(),
-        nodeGroupKey: this.params["node-group_key"].trim(),
         nodeValueKey: this.params["node-value_key"].trim(),
       }).data;
 
@@ -253,11 +252,10 @@ function draw(el, dataset, opts, stanza) {
       .text((d) =>
         d === root
           ? ""
-          : `${name(d)}\n${
-              d?.children
-                ? format(sum(d, (d) => d?.data?.data.value || 0))
-                : d.data.data.value
-            }`
+          : `${name(d)}\n${d?.children
+            ? format(sum(d, (d) => d?.data?.data.value || 0))
+            : d.data.data.value
+          }`
       );
 
     node
@@ -266,11 +264,10 @@ function draw(el, dataset, opts, stanza) {
       .classed("breadcrumb", (d) => d === root)
       .attr("id", (d) => (d.leafUid = uid("leaf")).id)
       .attr("style", (d) => {
-        return `fill: ${
-          d === root
+        return `fill: ${d === root
             ? "var(--togostanza-theme-background_color)"
             : colorScale(d.data.data.label)
-        }`;
+          }`;
       });
 
     //Add inner nodes to show that it's a zoomable tile
@@ -408,13 +405,11 @@ function draw(el, dataset, opts, stanza) {
       if (d === root) {
         return `translate(0,0)`;
       } else if (d.parent !== root) {
-        return `translate(${x(d.x0) - x(d.parent.x0)},${
-          y(d.y0) - y(d.parent.y0)
-        })`;
+        return `translate(${x(d.x0) - x(d.parent.x0)},${y(d.y0) - y(d.parent.y0)
+          })`;
       } else {
-        return `translate(${x(d.x0) + gapWidth},${
-          y(d.y0) + rootHeight + gapWidth
-        })`;
+        return `translate(${x(d.x0) + gapWidth},${y(d.y0) + rootHeight + gapWidth
+          })`;
       }
     });
 
@@ -510,11 +505,11 @@ function getLineHeight(el) {
   temp.setAttribute(
     "style",
     "margin:0; padding:0; " +
-      "font-family:" +
-      (el.style.fontFamily || "inherit") +
-      "; " +
-      "font-size:" +
-      (el.style.fontSize || "inherit")
+    "font-family:" +
+    (el.style.fontFamily || "inherit") +
+    "; " +
+    "font-size:" +
+    (el.style.fontSize || "inherit")
   );
   temp.innerHTML = "A";
 

diff --git a/stanzas/treemap/metadata.json b/stanzas/treemap/metadata.json
@@ -11,7 +11,9 @@
   "stanza:license": "MIT",
   "stanza:author": "DBCLS",
   "stanza:address": "https://github.com/togostanza/metastanza",
-  "stanza:contributor": ["PENQE"],
+  "stanza:contributor": [
+    "PENQE"
+  ],
   "stanza:created": "2021-10-25",
   "stanza:updated": "2021-10-25",
   "stanza:parameter": [
@@ -24,18 +26,16 @@
     {
       "stanza:key": "data-type",
       "stanza:type": "single-choice",
-      "stanza:choice": ["json", "tsv", "csv", "sparql-results-json"],
+      "stanza:choice": [
+        "json",
+        "tsv",
+        "csv",
+        "sparql-results-json"
+      ],
       "stanza:example": "json",
       "stanza:description": "Data type",
       "stanza:required": true
     },
-    {
-      "stanza:key": "node-group_key",
-      "stanza:type": "text",
-      "stanza:example": "parent",
-      "stanza:description": "Group key",
-      "stanza:required": true
-    },
     {
       "stanza:key": "node-label_key",
       "stanza:type": "text",