Like in the previous example, two Vue.js components are instantiated, each one displaying a different matrix of numbers. In this example, the two views have a notion of shared selection (the orange square). You can click another square to change the selection in both views.
// Generated by CoffeeScript 1.10.0
(function() {
var app;
Vue.component('matrix', {
props: {
data: {
type: Array,
required: true
},
value: {
type: Object,
"default": function() {
return {
i: 0,
j: 0
};
}
},
padding: {
type: Number,
"default": 1
},
cellsize: {
type: Number,
"default": 20
}
},
template: '<svg :width="ncols*cellsize" :height="nrows*cellsize" class="matrix">\n <g v-for="(row,i) in data">\n <rect\n v-for="(cell,j) in row"\n\n :class="{cell: true, selected: value.i == i && value.j == j}"\n\n :x="j*cellsize + cellsize/2 - scale(cell)/2"\n :y="i*cellsize + cellsize/2 - scale(cell)/2"\n :width="scale(cell)"\n :height="scale(cell)"\n \n v-on:click="select({i:i,j:j})"\n />\n </g>\n</svg>',
computed: {
max: function() {
return d3.max(this.data, function(r) {
return d3.max(r);
});
},
nrows: function() {
return this.data.length;
},
ncols: function() {
if (this.data.length > 0) {
return this.data[0].length;
} else {
return 0;
}
},
scale: function() {
return d3.scaleSqrt().domain([0, this.max]).range([0, Math.max(0, this.cellsize - this.padding)]);
}
},
methods: {
select: function(d) {
return this.$emit('input', d);
}
}
});
app = new Vue({
el: '#app',
data: {
matrix1: [[1, 2, 3], [4, 5, 6], [9, 9, 9]],
matrix2: [[12, 24, 35], [45, 15, 60], [60, 60, 60]],
shared_sel: {
i: 1,
j: 1
}
}
});
}).call(this);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js Shared State</title>
<link type="text/css" href="index.css" rel="stylesheet"/>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<matrix
:data="matrix1"
v-model="shared_sel"
:cellsize="60"
/>
<matrix
:data="matrix2"
v-model="shared_sel"
:cellsize="40"
:padding="2"
/>
</div>
<script src="index.js"></script>
</body>
</html>Vue.component 'matrix',
props:
data:
type: Array
required: true
value: # selection
type: Object
default: () -> {i:0, j:0}
padding:
type: Number
default: 1
cellsize:
type: Number
default: 20
template: '''
<svg :width="ncols*cellsize" :height="nrows*cellsize" class="matrix">
<g v-for="(row,i) in data">
<rect
v-for="(cell,j) in row"
:class="{cell: true, selected: value.i == i && value.j == j}"
:x="j*cellsize + cellsize/2 - scale(cell)/2"
:y="i*cellsize + cellsize/2 - scale(cell)/2"
:width="scale(cell)"
:height="scale(cell)"
v-on:click="select({i:i,j:j})"
/>
</g>
</svg>
'''
computed:
max: () -> d3.max @data, (r) -> d3.max r
nrows: () -> @data.length
ncols: () -> if @data.length > 0 then @data[0].length else 0
scale: () ->
d3.scaleSqrt()
.domain [0, @max]
.range [0, Math.max(0,@cellsize-@padding)]
methods:
select: (d) ->
@$emit 'input', d
app = new Vue
el: '#app'
data:
matrix1: [
[1,2,3],
[4,5,6],
[9,9,9]
],
matrix2: [
[12,24,35],
[45,15,60],
[60,60,60]
],
shared_sel: {i:1,j:1}
body, html {
padding: 0;
margin: 0;
height: 100%;
}
.matrix {
margin: 20px;
}
.cell {
fill: teal;
}
.cell.selected {
fill: orange;
}