Add multi rect plot

Author: keller-mark

examples-src/App.vue

@@ -906,6 +906,42 @@
       />
     </PlotContainer>
 
+    <h3>&lt;MultiDataRectPlot/&gt; with value labels</h3>
+    <PlotContainer
+      :pWidth="200"
+      :pHeight="80"
+      :pMarginTop="5"
+      :pMarginLeft="140"
+      :pMarginRight="40"
+      :pMarginBottom="50"
+      :showDownloadButton="true"
+    >
+      <Axis
+        slot="axisLeft"
+        variable="multi_rect_plot_scale"
+        side="left" 
+        :disableBrushing="true"
+        :tickRotation="0"
+        :getScale="getScale"
+        :getStack="getStack"
+      />
+      <MultiDataRectPlot
+        slot="plot"
+        :dataArray="['clinical_data', 'clinical_data']"
+        :cArray="['age', 'sex']"
+        z="sample_id"
+        o="SA569952"
+        :disableText="false"
+        :disableTooltip="true"
+        :rectSize="30"
+        :textSize="14"
+        textColor="#2c3e50"
+        :getData="getData"
+        :getScale="getScale"
+        :clickHandler="exampleClickHandler"
+      />
+    </PlotContainer>
+
     <h3>&lt;StratifiedKaplanMeierPlot/&gt;</h3>
     <PlotContainer
       :pWidth="500"
@@ -1055,6 +1091,7 @@ import {
     TrackPlot,
     RectPlot,
     MultiTrackPlot,
+    MultiDataRectPlot,
     MultiDataTrackPlot,
     HierarchicalMultiTrackPlot,
     StratifiedBoxPlot,
@@ -1360,6 +1397,12 @@ const survivalTimeScale = new ContinuousScale(
   [0, 4680]
 );
 
+const multiRectPlotScale = new CategoricalScale(
+  'multi_rect_plot_scale',
+  'Variable',
+  ["Age", "Sex"]
+);
+
 const survivalPatientScale = new CategoricalScale(
   'survival_patient',
   'Patient',
@@ -1417,6 +1460,8 @@ const getScale = function(scaleKey) {
       return survivalTimeScale;
     case 'survival_patient':
       return survivalPatientScale;
+    case 'multi_rect_plot_scale':
+      return multiRectPlotScale;
   }
 };
 
@@ -1455,6 +1500,8 @@ export default {
     TrackPlot,
     RectPlot,
     MultiTrackPlot,
+    MultiDataRectPlot,
+    MultiDataTrackPlot,
     HierarchicalMultiTrackPlot,
     StratifiedBoxPlot,
     DoubleStratifiedBoxPlot,

src/components/plots/BarPlot.vue

@@ -59,7 +59,7 @@ import { scaleBand as d3_scaleBand, scaleLinear as d3_scaleLinear, scaleLog as d
 import { select as d3_select, create as d3_create } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
 import debounce from 'lodash/debounce';
-import { TOOLTIP_DEBOUNCE, BAR_MARGIN_X_DEFAULT, BAR_WIDTH_MIN } from './../../constants.js';
+import { TOOLTIP_DEBOUNCE, BAR_MARGIN_DEFAULT, BAR_WIDTH_MIN } from './../../constants.js';
 import { getRetinaRatio } from './../../helpers.js';
 
 import AbstractScale from './../../scales/AbstractScale.js';
@@ -107,7 +107,7 @@ export default {
         },
         'barMarginX': {
             type: Number, 
-            default: BAR_MARGIN_X_DEFAULT
+            default: BAR_MARGIN_DEFAULT
         },
         'logY': {
             type: Boolean,

src/components/plots/CountBarPlot.vue

@@ -59,7 +59,7 @@ import { scaleBand as d3_scaleBand, scaleLinear as d3_scaleLinear, scaleLog as d
 import { select as d3_select, create as d3_create } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
 import debounce from 'lodash/debounce';
-import { TOOLTIP_DEBOUNCE, BAR_MARGIN_X_DEFAULT, BAR_WIDTH_MIN } from './../../constants.js';
+import { TOOLTIP_DEBOUNCE, BAR_MARGIN_DEFAULT, BAR_WIDTH_MIN } from './../../constants.js';
 import { getRetinaRatio } from './../../helpers.js';
 
 import AbstractScale from './../../scales/AbstractScale.js';
@@ -117,7 +117,7 @@ export default {
         },
         'barMarginX': {
             type: Number, 
-            default: BAR_MARGIN_X_DEFAULT
+            default: BAR_MARGIN_DEFAULT
         },
         'logY': {
             type: Boolean,

src/components/plots/GenomeMultiTrackPlot.vue

@@ -66,7 +66,7 @@ import { scaleLinear as d3_scaleLinear, scaleBand as d3_scaleBand } from 'd3-sca
 import { select as d3_select } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
 import debounce from 'lodash/debounce';
-import { TOOLTIP_DEBOUNCE, BAR_HEIGHT_MIN, BAR_MARGIN_Y_DEFAULT } from './../../constants.js';
+import { TOOLTIP_DEBOUNCE, BAR_HEIGHT_MIN, BAR_MARGIN_DEFAULT } from './../../constants.js';
 import { getDelaunay } from './../../helpers.js';
 
 import AbstractScale from './../../scales/AbstractScale.js';
@@ -150,7 +150,7 @@ export default {
         },
         'barMarginY': {
             type: Number, 
-            default: BAR_MARGIN_Y_DEFAULT
+            default: BAR_MARGIN_DEFAULT
         }
     },
     data() {

src/components/plots/HierarchicalMultiTrackPlot.vue

@@ -82,7 +82,7 @@ import { scaleBand as d3_scaleBand } from 'd3-scale';
 import { select as d3_select, create as d3_create } from 'd3-selection';
 import { mouse as d3_mouse, event as d3_event } from 'd3';
 import debounce from 'lodash/debounce';
-import { TOOLTIP_DEBOUNCE, BAR_WIDTH_MIN, BAR_HEIGHT_MIN, BAR_MARGIN_X_DEFAULT, BAR_MARGIN_Y_DEFAULT } from './../../constants.js';
+import { TOOLTIP_DEBOUNCE, BAR_WIDTH_MIN, BAR_HEIGHT_MIN, BAR_MARGIN_DEFAULT } from './../../constants.js';
 import { getRetinaRatio, filterHierarchy } from './../../helpers.js';
 
 
@@ -137,11 +137,11 @@ export default {
         },
         'barMarginX': {
             type: Number, 
-            default: BAR_MARGIN_X_DEFAULT
+            default: BAR_MARGIN_DEFAULT
         },
         'barMarginY': {
             type: Number, 
-            default: BAR_MARGIN_Y_DEFAULT
+            default: BAR_MARGIN_DEFAULT
         }
     },
     data() {