Skip to content

Commit ba9445a

Browse files
committed
Add <Legend/> component
1 parent 891a32b commit ba9445a

File tree

5 files changed

+103
-3
lines changed

5 files changed

+103
-3
lines changed

documentation.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ toc:
2727
- SortOptions
2828
- CategoricalLegend
2929
- ContinuousLegend
30+
- Legend
3031
- name: Data
3132
- DataContainer
3233
- name: History

examples-src/App.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,6 @@
126126
:getStack="getStack"
127127
/>
128128

129-
130129
<h3>&lt;BarPlot/&gt;</h3>
131130
<PlotContainer
132131
:pWidth="500"
@@ -919,6 +918,7 @@ import {
919918
GenomeStackedBarPlot,
920919
CategoricalLegend,
921920
ContinuousLegend,
921+
Legend,
922922
// Classes
923923
DataContainer,
924924
HistoryStack,
@@ -1313,7 +1313,8 @@ export default {
13131313
GenomeMultiTrackPlot,
13141314
GenomeStackedBarPlot,
13151315
CategoricalLegend,
1316-
ContinuousLegend
1316+
ContinuousLegend,
1317+
Legend,
13171318
},
13181319
data() {
13191320
return {

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vueplotlib",
3-
"version": "1.5.1",
3+
"version": "1.5.2",
44
"private": false,
55
"scripts": {
66
"serve": "vue-cli-service serve --open ./examples-src/index.js",

src/components/legends/Legend.vue

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<template>
2+
<div>
3+
<CategoricalLegend v-if="legendType === 'categorical'"
4+
:variable="variable"
5+
:lStyle="lStyle"
6+
:lWidth="lWidth"
7+
:lItemHeight="lItemHeight"
8+
:getScale="getScale"
9+
:getStack="getStack"
10+
:clickHandler="clickHandler"
11+
/>
12+
<ContinuousLegend v-if="legendType === 'continuous'"
13+
:variable="variable"
14+
:lWidth="lWidth"
15+
:lItemHeight="lItemHeight"
16+
:getScale="getScale"
17+
:getStack="getStack"
18+
/>
19+
</div>
20+
</template>
21+
22+
<script>
23+
24+
import ContinuousLegend from './ContinuousLegend.vue';
25+
import CategoricalLegend from './CategoricalLegend.vue';
26+
27+
import ContinuousScale from '../../scales/ContinuousScale';
28+
import CategoricalScale from '../../scales/CategoricalScale';
29+
30+
31+
let uuid = 0;
32+
/**
33+
* @prop {string} variable The legend variable key.
34+
* Accepts any props that CategoricalLegend or ContinuousLegend accept and passes them on.
35+
*
36+
* @example
37+
* <Legend
38+
* variable="y"
39+
* :lWidth="500"
40+
* :getScale="getScale"
41+
* :getStack="getStack"
42+
* />
43+
*/
44+
export default {
45+
name: 'Legend',
46+
components: {
47+
ContinuousLegend,
48+
CategoricalLegend
49+
},
50+
props: {
51+
'variable': {
52+
type: String
53+
},
54+
'lStyle': {
55+
type: String
56+
},
57+
'lWidth': {
58+
type: Number
59+
},
60+
'lItemHeight': {
61+
type: Number,
62+
default: 20
63+
},
64+
'getScale': {
65+
type: Function
66+
},
67+
'getStack': {
68+
type: Function
69+
},
70+
'clickHandler': {
71+
type: Function
72+
}
73+
},
74+
data() {
75+
return {
76+
legendType: null
77+
}
78+
},
79+
beforeCreate() {
80+
this.uuid = this.$options.name + uuid.toString();
81+
uuid += 1;
82+
},
83+
created() {
84+
// Set the scale variable
85+
const varScale = this.getScale(this.variable);
86+
if(varScale instanceof ContinuousScale) {
87+
this.legendType = 'continuous';
88+
} else if(varScale instanceof CategoricalScale) {
89+
this.legendType = 'categorical';
90+
}
91+
}
92+
}
93+
</script>
94+
95+
<style>
96+
</style>

src/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import GenomeStackedBarPlot from './components/plots/GenomeStackedBarPlot.vue';
3131
// Legends
3232
import CategoricalLegend from './components/legends/CategoricalLegend.vue';
3333
import ContinuousLegend from './components/legends/ContinuousLegend.vue';
34+
import Legend from './components/legends/Legend.vue';
3435

3536
// Classes
3637
import DataContainer from './data/DataContainer';
@@ -74,6 +75,7 @@ export {
7475
GenomeStackedBarPlot,
7576
CategoricalLegend,
7677
ContinuousLegend,
78+
Legend,
7779
// Classes
7880
DataContainer,
7981
HistoryStack,

0 commit comments

Comments
 (0)