Add <Legend/> component

keller-mark · keller-mark · commit ba9445ab3ff8 · 2019-10-07T11:52:18.000-04:00
diff --git a/documentation.yml b/documentation.yml
@@ -27,6 +27,7 @@ toc:
   - SortOptions
   - CategoricalLegend
   - ContinuousLegend
+  - Legend
   - name: Data
   - DataContainer
   - name: History
diff --git a/examples-src/App.vue b/examples-src/App.vue
@@ -126,7 +126,6 @@
       :getStack="getStack"
     />
 
-
     <h3>&lt;BarPlot/&gt;</h3>
     <PlotContainer
       :pWidth="500"
@@ -919,6 +918,7 @@ import {
     GenomeStackedBarPlot,
     CategoricalLegend,
     ContinuousLegend,
+    Legend,
     // Classes
     DataContainer,
     HistoryStack,
@@ -1313,7 +1313,8 @@ export default {
     GenomeMultiTrackPlot,
     GenomeStackedBarPlot,
     CategoricalLegend,
-    ContinuousLegend
+    ContinuousLegend,
+    Legend,
   },
   data() {
     return {
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueplotlib",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve --open ./examples-src/index.js",
diff --git a/src/components/legends/Legend.vue b/src/components/legends/Legend.vue
@@ -0,0 +1,96 @@
+<template>
+    <div>
+        <CategoricalLegend v-if="legendType === 'categorical'"
+            :variable="variable"
+            :lStyle="lStyle"
+            :lWidth="lWidth"
+            :lItemHeight="lItemHeight"
+            :getScale="getScale"
+            :getStack="getStack"
+            :clickHandler="clickHandler"
+         />
+        <ContinuousLegend v-if="legendType === 'continuous'" 
+            :variable="variable"
+            :lWidth="lWidth"
+            :lItemHeight="lItemHeight"
+            :getScale="getScale"
+            :getStack="getStack"
+        />
+    </div>
+</template>
+
+<script>
+
+import ContinuousLegend from './ContinuousLegend.vue';
+import CategoricalLegend from './CategoricalLegend.vue';
+
+import ContinuousScale from '../../scales/ContinuousScale';
+import CategoricalScale from '../../scales/CategoricalScale';
+
+
+let uuid = 0;
+/**
+ * @prop {string} variable The legend variable key.
+ * Accepts any props that CategoricalLegend or ContinuousLegend accept and passes them on.
+ * 
+ * @example
+ * <Legend
+ *      variable="y"
+ *      :lWidth="500"
+ *      :getScale="getScale"
+ *      :getStack="getStack"
+ *  />
+ */
+export default {
+    name: 'Legend',
+    components: {
+        ContinuousLegend,
+        CategoricalLegend
+    },
+    props: {
+        'variable': {
+            type: String
+        },
+        'lStyle': {
+            type: String
+        },
+        'lWidth': {
+            type: Number
+        },
+        'lItemHeight': {
+            type: Number,
+            default: 20
+        },
+        'getScale': {
+            type: Function
+        },
+        'getStack': {
+            type: Function
+        },
+        'clickHandler': {
+            type: Function
+        }
+    },
+    data() {
+        return {
+            legendType: null
+        }
+    },
+    beforeCreate() {
+        this.uuid = this.$options.name + uuid.toString();
+        uuid += 1;
+    },
+    created() {
+        // Set the scale variable
+        const varScale = this.getScale(this.variable);
+        if(varScale instanceof ContinuousScale) {
+            this.legendType = 'continuous';
+        } else if(varScale instanceof CategoricalScale) {
+            this.legendType = 'categorical';
+        }
+    }
+}
+</script>
+
+<style>
+</style>
diff --git a/src/index.js b/src/index.js
@@ -31,6 +31,7 @@ import GenomeStackedBarPlot from './components/plots/GenomeStackedBarPlot.vue';
 // Legends
 import CategoricalLegend from './components/legends/CategoricalLegend.vue';
 import ContinuousLegend from './components/legends/ContinuousLegend.vue';
+import Legend from './components/legends/Legend.vue';
 
 // Classes
 import DataContainer from './data/DataContainer';
@@ -74,6 +75,7 @@ export {
     GenomeStackedBarPlot,
     CategoricalLegend,
     ContinuousLegend,
+    Legend,
     // Classes
     DataContainer,
     HistoryStack,

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vueplotlib",`
`3`		`- "version": "1.5.1",`
	`3`	`+ "version": "1.5.2",`
`4`	`4`	`"private": false,`
`5`	`5`	`"scripts": {`
`6`	`6`	`"serve": "vue-cli-service serve --open ./examples-src/index.js",`