Commit ee4bfca2 authored by Raphael Müller's avatar Raphael Müller
Browse files

Axis: Ticks with nice numbers

Ticks have nice numbers. Digit group separators added.

Closes #3
parent abe151cc
......@@ -199,56 +199,56 @@ var app = new Vue({
feature_data3: [
{ name: "Gene 21",
description: "GMP synthase",
start: 1706479,
end: 1708024,
start: 170647,
end: 170802,
strand: "+",
lane: 1,
type: "gene",
},
{ name: "Gene 22",
description: "glyoxalase",
start: 1708314,
end: 1708671,
start: 170831,
end: 170867,
lane: 2,
strand: "+",
type: "xRNA",
},
{ name: "Gene 23",
description: "ABC transporter ATP-binding protein LlsG",
start: 1709429,
end: 1710317,
start: 170942,
end: 171031,
lane: 3,
strand: '-',
type: "gene",
},
{ name: "Gene 24",
description: "ABC transporter permease protein LlsH",
start: 1710316,
end: 1711066,
start: 171031,
end: 171106,
lane: 1,
strand: '+',
type: "gene",
},
{ name: "Gene 25",
description: "LlsX",
start: 1711106,
end: 1711424,
start: 171110,
end: 171142,
strand: '+',
type: "gene",
lane: 2,
},
{ name: "Gene 26",
description: "SagB family dehydrogenase LlsB",
start: 1711420,
end: 1712296,
start: 171142,
end: 171229,
lane: 3,
strand: '-',
type: "gene",
},
{ name: "Gene 27",
description: "LlsY",
start: 1712303,
end: 1713221,
start: 171230,
end: 171322,
strand: '-',
type: "gene",
lane: 1,
......@@ -256,32 +256,32 @@ var app = new Vue({
},
{ name: "Gene 28",
description: "streptolysin-associated protein LlsD",
start: 1713213,
end: 1714527,
start: 171321,
end: 171452,
strand: '+',
type: "gene",
lane: 2,
},
{ name: "Gene 29",
description: "hypothetical protein",
start: 1715351,
end: 1716125,
start: 171535,
end: 171612,
strand: '+',
type: "gene",
lane: 3,
},
{ name: "Gene 210",
description: "glyoxalase family protein, N-terminal part",
start: 1716189,
end: 1716321,
start: 171618,
end: 171632,
lane: 1,
strand: '+',
type: "gene",
},
{ name: "Gene 211",
description: "hypothetical protein",
start: 1717235,
end: 1718084,
start: 171723,
end: 171808,
lane: 1,
strand: '-',
type: "rRNA"
......
......@@ -17,7 +17,7 @@ Vue.component( "axis", {
<line :x1="width" :y1="3*vOffset" :x2="width" :y2="vOffset" stroke="this.color" :style="style"/>
<line v-for="tick in ticks" :x1="tick.panelPos" :y1="3*vOffset" :x2="tick.panelPos" :y2="(2+0.1)*vOffset" :style="style"/>
<text v-for="tick in ticks" :style="'font: '+vOffset+'px roboto;'"class="small" :x="tick.panelPos" :y="2*vOffset" text-anchor="middle" :fill="color">{{ tick.genomePos }}</text>
<text v-for="tick in ticks" :style="'font: '+vOffset+'px roboto;'"class="small" :x="tick.panelPos" :y="2*vOffset" text-anchor="middle" :fill="color">{{ posFormat(tick.genomePos) }}</text>
</svg>
<!-- -->
`,
......@@ -36,9 +36,24 @@ Vue.component( "axis", {
methods: {
genomeToPixel( pos ) {
return (this.width*(pos-this.start))/(this.length)
}
},
posFormat(pos){
//https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript
p = pos.toString()
if(this.kb){
p = p.replace(/000$/," kb")
}else{
p = p+" bp"
}
if(p.length > 7)//https://en.wikipedia.org/wiki/Decimal_separator#Exceptions_to_digit_grouping
p = p.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return p
},
},
computed:{
kb(){ //method to calc if kb or bp should be displayed
return this.ticks.every(tick => tick.genomePos % 1000 == 0)
},
style(){
return {
stroke: this.color,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment