fix(stats): Interactive RED plots now are within margins and display …

…Order plus count on Y axis.
Ecogenomics · Mar 28, 2022 · 6d8eb78 · 6d8eb78
1 parent d8366ec
commit 6d8eb78
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 10 deletions.
diff --git a/assets/data/stats/r202/red-archaea.json b/assets/data/stats/r202/red-archaea.json
@@ -1,6 +1,6 @@
 {
-  "width": 1152.0,
-  "height": 576.0,
+  "width": 900,
+  "height": 460,
   "axes": [
     {
       "bbox": [

diff --git a/assets/data/stats/r89/r89-red-archaea.json b/assets/data/stats/r89/r89-red-archaea.json
@@ -1,6 +1,6 @@
 {
-  "width": 921.6,
-  "height": 460.8,
+  "width": 900,
+  "height": 460,
   "axes": [
     {
       "bbox": [

diff --git a/assets/data/stats/r89/r89-red-bacteria.json b/assets/data/stats/r89/r89-red-bacteria.json
@@ -1,6 +1,6 @@
 {
-  "width": 921.6,
-  "height": 460.8,
+  "width": 900,
+  "height": 460,
   "axes": [
     {
       "bbox": [

diff --git a/assets/data/stats/r95/red-archaea.json b/assets/data/stats/r95/red-archaea.json
@@ -1,6 +1,6 @@
 {
-  "width": 921.6,
-  "height": 460.8,
+  "width": 900,
+  "height": 460,
   "axes": [
     {
       "bbox": [

diff --git a/assets/data/stats/r95/red-bacteria.json b/assets/data/stats/r95/red-bacteria.json
@@ -1,6 +1,6 @@
 {
-  "width": 921.6,
-  "height": 460.8,
+  "width": 900,
+  "height": 460,
   "axes": [
     {
       "bbox": [

diff --git a/components/stats/REDr202.vue b/components/stats/REDr202.vue
@@ -21,6 +21,29 @@ const bacteria = require('~/assets/data/stats/r202/red-bacteria.json')
 
 export default Vue.extend({
   mounted() {
+
+    mpld3.register_plugin("axisreplacer", AxisReplacer);
+    AxisReplacer.prototype = Object.create(mpld3.Plugin.prototype);
+    AxisReplacer.prototype.constructor = AxisReplacer;
+    AxisReplacer.prototype.requiredProps = ["data"];
+    AxisReplacer.prototype.defaultProps = {}
+    // @ts-ignore
+    function AxisReplacer(fig, props){
+      // @ts-ignore
+      mpld3.Plugin.call(this, fig, props);
+    }
+
+    AxisReplacer.prototype.draw = function(){
+      let data = this.props.data;
+      let parent = document.getElementsByClassName("mpld3-yaxis")[0];
+      let gTicks = parent.getElementsByTagName("g");
+      for (let i=0; i < gTicks.length; i++) {
+        let curTick = gTicks[i];
+        let curText = curTick.getElementsByTagName("text")[0];
+        curText.innerHTML = data[i];
+      }
+    };
+
     mpld3.draw_figure("fig_el729391400845065580326015787637", archaea);
     mpld3.draw_figure("fig_el730431405688597008165473308651", bacteria);
   }

diff --git a/components/stats/REDr89.vue b/components/stats/REDr89.vue
@@ -21,6 +21,29 @@ const bacteria = require('~/assets/data/stats/r89/r89-red-bacteria.json')
 
 export default Vue.extend({
   mounted() {
+
+    mpld3.register_plugin("axisreplacer", AxisReplacer);
+    AxisReplacer.prototype = Object.create(mpld3.Plugin.prototype);
+    AxisReplacer.prototype.constructor = AxisReplacer;
+    AxisReplacer.prototype.requiredProps = ["data"];
+    AxisReplacer.prototype.defaultProps = {}
+    // @ts-ignore
+    function AxisReplacer(fig, props){
+      // @ts-ignore
+      mpld3.Plugin.call(this, fig, props);
+    }
+
+    AxisReplacer.prototype.draw = function(){
+      let data = this.props.data;
+      let parent = document.getElementsByClassName("mpld3-yaxis")[0];
+      let gTicks = parent.getElementsByTagName("g");
+      for (let i=0; i < gTicks.length; i++) {
+        let curTick = gTicks[i];
+        let curText = curTick.getElementsByTagName("text")[0];
+        curText.innerHTML = data[i];
+      }
+    };
+
     mpld3.draw_figure("fig_el28851405150924847282779648570", archaea);
     mpld3.draw_figure("fig_el28581405953535391925487034777", bacteria);
   }

diff --git a/components/stats/REDr95.vue b/components/stats/REDr95.vue
@@ -21,6 +21,29 @@ const bacteria = require('~/assets/data/stats/r95/red-bacteria.json')
 
 export default Vue.extend({
   mounted() {
+
+    mpld3.register_plugin("axisreplacer", AxisReplacer);
+    AxisReplacer.prototype = Object.create(mpld3.Plugin.prototype);
+    AxisReplacer.prototype.constructor = AxisReplacer;
+    AxisReplacer.prototype.requiredProps = ["data"];
+    AxisReplacer.prototype.defaultProps = {}
+    // @ts-ignore
+    function AxisReplacer(fig, props){
+      // @ts-ignore
+      mpld3.Plugin.call(this, fig, props);
+    }
+
+    AxisReplacer.prototype.draw = function(){
+      let data = this.props.data;
+      let parent = document.getElementsByClassName("mpld3-yaxis")[0];
+      let gTicks = parent.getElementsByTagName("g");
+      for (let i=0; i < gTicks.length; i++) {
+        let curTick = gTicks[i];
+        let curText = curTick.getElementsByTagName("text")[0];
+        curText.innerHTML = data[i];
+      }
+    };
+
     mpld3.draw_figure("fig_el1832140480597119608954246934", archaea);
     mpld3.draw_figure("fig_el19001406310551926967170213038", bacteria);
   }