Flatten stacked bar plot

documentation.yml

@@ -20,7 +20,4 @@ toc:
  - ContinuousScale
  - GenomeScale
  - name: Sort
- - AbstractSortVars
- - SortBy
- - SortVars1D
- - SortVars2D
+ - SortBy

examples-src/App.vue

@@ -153,8 +153,6 @@ import GenomeScale from '../src/scales/GenomeScale.js';
 import SortOptions from '../src/components/SortOptions.vue';
 
 import SortBy from '../src/sort/SortBy.js';
-import SortVars1D from '../src/sort/SortVars1D.js';
-import SortVars2D from '../src/sort/SortVars2D.js';
 
 // History
 import Stack from './Stack.vue';
@@ -257,9 +255,7 @@ const getStack = function() {
 
 const sampleSortBy = new SortBy(
  "exposures_data", 
- new SortVars2D({
- "exposure": new SortVars1D(["signature"])
- })
+ signatureScale.domain
 );
 
 

package.json

@@ -60,6 +60,6 @@
  ],
  "license": "MIT",
  "author": "Mark Keller",
- "main": "dist/vue-declarative-plots.js",
+ "main": "dist/vue-declarative-plots.umd.js",
  "repository": "https://github.com/keller-mark/vue-declarative-plots"
 }

src/components/SortOptions.vue

@@ -1,39 +1,17 @@
 <template>
  <div>
  Sort <em>{{ getScale(variable).name }}</em> by <em>{{ getData(by.data).name }}</em> data
- <div v-if="is1D">
-
- </div>
-
- <span v-if="is2D">
+ <span>
  on
- <select v-model="firstVar2D">
+ <select v-model="selectedKey">
  <option disabled value="">Please select one</option>
- <option v-for="sortVarKey in Object.keys(by.on.variables)" :key="sortVarKey" :value="sortVarKey">
- {{ getScale(sortVarKey).name }}
+ <option v-for="sortVarKey in by.variables" :key="sortVarKey" :value="sortVarKey">
+ {{ sortVarKey }}
  </option>
  </select>
-
- <span v-if="validSelection(firstVar2D)">
- of
- <select v-model="secondVar2D">
- <option disabled value="">Please select one</option>
- <option v-for="sortVarKey in by.on.variables[firstVar2D].variables" :key="sortVarKey" :value="sortVarKey">
- {{ getScale(sortVarKey).name }}
- </option>
- </select>
- <span v-if="validSelection(secondVar2D)">
- <select v-model="thirdVar2D">
- <option disabled value="">Please select one</option>
- <option v-for="sortVarValue in getScale(secondVar2D).domain" :key="sortVarValue" :value="sortVarValue">
- {{ getScale(secondVar2D).toHuman(sortVarValue) }}
- </option>
- </select>
- </span>
- </span>
  </span>
 
- <span v-if="(is1D && validSelection(secondVar1D)) || (is2D && validSelection(thirdVar2D))">
+ <span v-if="validSelection(selectedKey)">
  <select v-model="sortAscending">
  <option :value="true">Ascending</option>
  <option :value="false">Descending</option>
@@ -44,13 +22,8 @@
 </template>
 
 <script>
-
-import AbstractScale from './../scales/AbstractScale.js';
 import SortBy from './../sort/SortBy.js';
 
-import SortVars1D from './../sort/SortVars1D.js';
-import SortVars2D from './../sort/SortVars2D.js';
-
 let uuid = 0;
 export default {
  name: 'SortOptions',
@@ -70,62 +43,29 @@ export default {
  },
  data() {
  return {
- firstVar1D: null,
- secondVar1D: null,
-
- firstVar2D: null,
- secondVar2D: null,
- thirdVar2D: null,
-
+ selectedKey: null,
  sortAscending: true
  }
  },
  watch: {
- thirdVar2D: function() {
+ selectedKey: function() {
  this.go();
  },
  sortAscending: function() {
  this.go();
  }
  },
- computed: {
- is1D: function() {
- return (this.by.on instanceof SortVars1D);
- },
- is2D: function() {
- return (this.by.on instanceof SortVars2D);
- }
- },
  created() {
  console.assert(this.by instanceof SortBy);
- // TODO: Make assertions about scale types? depending on if 1D or 2D etc...?
- },
- mounted() {
-
+ // TODO: Make assertions about scale types?
  },
  methods: {
  validSelection(varValue) {
- return (varValue !== null && varValue !== undefined && varValue.length > 0);
- },
- valid1D() {
- return (
- this.validSelection(this.firstVar1D) && 
- this.validSelection(this.secondVar1D)
- );
- },
- valid2D() {
- return (
- this.validSelection(this.firstVar2D) && 
- this.validSelection(this.secondVar2D) && 
- this.validSelection(this.thirdVar2D)
- );
+ return (varValue !== null);
  },
  go() {
- if(this.is2D && this.valid2D()) {
- this.getScale(this.variable).sort(this.getData(this.by.data), this.firstVar2D, this.thirdVar2D, this.sortAscending);
- } else if(this.is1D && this.valid1D()) {
- // TODO: test this
- this.getScale(this.variable).sort(this.getData(this.by.data), this.firstVar1D, undefined, this.sortAscending);
+ if(this.validSelection(this.selectedKey)) {
+ this.getScale(this.variable).sort(this.getData(this.by.data), this.selectedKey, this.sortAscending);
  }
  }
  }

src/components/plots/BarPlot.vue

@@ -20,6 +20,24 @@
  'left': (this.pMarginLeft) + 'px'
  }"
  ></canvas>
+ <div :style="{
+ 'display': (showHighlight ? 'inline-block' : 'none'),
+ 'height': (this.pHeight) + 'px', 
+ 'width': '1px',
+ 'top': (this.pMarginTop) + 'px',
+ 'left': (this.pMarginLeft + this.highlightX1) + 'px'
+ }"
+ class="vdp-plot-highlight"
+ ></div>
+ <div :style="{
+ 'display': (showHighlight ? 'inline-block' : 'none'),
+ 'height': (this.pHeight) + 'px', 
+ 'width': '1px',
+ 'top': (this.pMarginTop) + 'px',
+ 'left': (this.pMarginLeft + this.highlightX2) + 'px'
+ }"
+ class="vdp-plot-highlight"
+ ></div>
  <div :id="this.tooltipElemID" class="vdp-tooltip" :style="this.tooltipPositionAttribute">
  <table>
  <tr>
@@ -38,7 +56,6 @@
 <script>
 import { scaleBand as d3_scaleBand, scaleLinear as d3_scaleLinear } from 'd3-scale';
 import { select as d3_select } from 'd3-selection';
-import { stack as d3_stack, stackOrderNone as d3_stackOrderNone, stackOffsetNone as d3_stackOffsetNone } from 'd3-shape';
 import { mouse as d3_mouse } from 'd3';
 import { debounce } from 'lodash';
 import { TOOLTIP_DEBOUNCE } from './../../constants.js';
@@ -86,7 +103,11 @@ export default {
  tooltipInfo: {
  x: '',
  y: ''
- }
+ },
+ highlightX1: 0,
+ highlightX2: 0,
+ highlightScale: null,
+ barWidth: 0
  }
  },
  beforeCreate() {
@@ -107,7 +128,12 @@ export default {
  this._xScale.onUpdate(this.uuid, this.drawPlot);
  this._yScale.onUpdate(this.uuid, this.drawPlot);
 
- // TODO: subscribe to data mutations as well?
+ // Subscribe to data mutations here
+ this._dataContainer.onUpdate(this.uuid, this.drawPlot);
+
+ // Subscribe to highlights here
+ this._xScale.onHighlight(this.uuid, this.highlight);
+ this._xScale.onHighlightDestroy(this.uuid, this.highlightDestroy);
  },
  mounted() {
  this.drawPlot();
@@ -121,13 +147,24 @@ export default {
  // Set position
  this.tooltipPosition.left = mouseX + this.pMarginLeft;
  this.tooltipPosition.top = mouseY + this.pMarginTop;
- // TODO dispatch
+
+ // Dispatch highlights
+ this._xScale.emitHighlight(x);
  },
  tooltipDestroy: function() {
  this.tooltipHide();
 
- // TODO: Destroy all dispatches here
- // dispatch.call("link-donor-destroy");
+ // Destroy all highlights here
+ this._xScale.emitHighlightDestroy();
+ },
+ highlight(value) {
+ this.highlightX1 = this.highlightScale(value);
+ this.highlightX2 = this.highlightScale(value) + this.barWidth;
+ this.showHighlight = true;
+
+ },
+ highlightDestroy() {
+ this.showHighlight = false;
  },
  drawPlot() {
  const vm = this;
@@ -141,12 +178,15 @@ export default {
  const x = d3_scaleBand()
  .domain(xScale.domainFiltered)
  .range([0, vm.pWidth]);
+
+ vm.highlightScale = x;
 
  const y = d3_scaleLinear()
  .domain(yScale.domainFiltered)
  .range([vm.pHeight, 0]);
 
  const barWidth = vm.pWidth / xScale.domainFiltered.length;
+ vm.barWidth = barWidth;
 
 
 
@@ -191,7 +231,7 @@ export default {
  ret.push((nextCol & 0xff00) >> 8); // G 
  ret.push((nextCol & 0xff0000) >> 16); // B
 
- nextCol += 1;
+ nextCol += 20;
  }
  let col = "rgb(" + ret.join(',') + ")";
  return col;
@@ -242,21 +282,5 @@ export default {
 </script>
 
 <style>
-.vdp-plot {
- position: absolute;
-}
-.vdp-plot-hidden {
- position: absolute;
- display: none;
-}
-
-.vdp-tooltip {
- position: absolute;
- border: 1px solid rgb(205, 205, 205);
- background-color: rgba(255, 255, 255, 0.95);
- z-index: 1;
- padding: 0.25rem;
- border-radius: 3px;
- transform: translate(10%, -50%);
-}
+@import '../../style/plot-style.css';
 </style>

src/components/plots/GenomeScatterPlot.vue

@@ -229,21 +229,5 @@ export default {
 </script>
 
 <style>
-.vdp-plot {
- position: absolute;
-}
-.vdp-plot-hidden {
- position: absolute;
- display: none;
-}
-
-.vdp-tooltip {
- position: absolute;
- border: 1px solid rgb(205, 205, 205);
- background-color: rgba(255, 255, 255, 0.95);
- z-index: 1;
- padding: 0.25rem;
- border-radius: 3px;
- transform: translate(10%, -50%);
-}
+@import '../../style/plot-style.css';
 </style>