|
<!doctype html> |
|
<meta charset="utf-8"> |
|
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/[email protected]"> |
|
|
|
<h2>updating grid example</h2> |
|
<button id="start-updates">Start updates</button> |
|
<button id="stop-updates">Stop updates</button> |
|
<div class="grid-target"></div> |
|
|
|
<script src="https://npmcdn.com/[email protected]"></script> |
|
<script src="https://d3js.org/d3.v4.js"></script> |
|
<script src="https://npmcdn.com/[email protected]/faker.js"></script> |
|
<script src="https://npmcdn.com/@zambezi/[email protected]"></script> |
|
<script src="https://npmcdn.com/@zambezi/[email protected]"></script> |
|
<script src="https://npmcdn.com/@zambezi/[email protected]"></script> |
|
<script> |
|
const rowLength = 1000 |
|
, updateInterval = 30 |
|
, table = grid.createGrid() |
|
, rows = _.shuffle(_.range(1, rowLength).map(_.compose(_.partial(_.pick, _, 'name', 'username', 'email'), faker.Helpers.createCard)).map(function(row, i) { |
|
row.id = `row${i}` |
|
return row |
|
})) |
|
, rowById = _.indexBy(rows, 'id') |
|
, feed = createFeeds().on('row-update', updateRow) |
|
, target = d3.select('.grid-target') |
|
.style('height', '400px') |
|
.datum(rows) |
|
.call(table) |
|
|
|
d3.select('#start-updates') |
|
.on('click', feed.start) |
|
d3.select('#stop-updates') |
|
.on('click', feed.stop) |
|
|
|
function updateRow(rowId, newUsername) { |
|
rowById[rowId].username = newUsername |
|
target.call(table) |
|
} |
|
|
|
// ... Elsewhere ... |
|
|
|
function createFeeds() { |
|
const dispatcher = d3.dispatch('row-update') |
|
let intervalId |
|
|
|
function feed() { |
|
feed.start() |
|
} |
|
|
|
feed.start = function() { |
|
if (intervalId) return |
|
intervalId = setInterval(() => { |
|
const randomId = `row${_.random(rowLength)}` |
|
dispatcher.call('row-update', null, randomId, faker.Internet.userName()) |
|
}, updateInterval) |
|
} |
|
|
|
feed.stop = function() { |
|
if (!intervalId) return |
|
clearInterval(intervalId) |
|
intervalId = null |
|
} |
|
|
|
return d3Utils.rebind().from(dispatcher, 'on')(feed) |
|
} |
|
|
|
</script> |
