mstade/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Updating rows

Test of continuously updating rows in a Zambezi Grid.

  
## index.html
<!doctype html>
<head><meta charset="utf-8" /></head>
<body>
<h2>updating grid example</h2>
<button id="start-updates">Start updates</button>
<button id="stop-updates">Stop updates</button>
<div class="grid-target"></div>
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/normalize.css@4.2.0">
<script src="https://npmcdn.com/underscore@1.8.3"></script>
<script src="https://npmcdn.com/faker@1.0.0/faker.js"></script>
<script src="https://npmcdn.com/@zambezi/fun@2.0.1"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://npmcdn.com/@zambezi/d3-utils@3.3.1"></script>
<script src="https://npmcdn.com/@zambezi/grid@0.11.0"></script>
<script>
  var table = grid.createGrid()
    , rows = _.shuffle(_.range(1, 1000).map(_.compose(_.partial(_.pick, _, 'name', 'username', 'email'), faker.Helpers.createCard)).map(function(row, i) {
        row.id = 'row' + i
        return row
      }))

  var grid = d3.select('.grid-target')
      .style('height', '500px')
      .datum(rows)
      .call(table)

  d3.select('#start-updates')
    .on('click', startUpdates)

  d3.select('#stop-updates')
    .on('click', stopUpdates)

  var updates

  function stopUpdates() {
    updates && updates.forEach(clearInterval)
  }

  function startUpdates() {
    updates = rows.map(function(n, i) {
      var id = 'row' + i

      return setInterval(function() {
        rows.some(function(row) {
          if (row.id === id) {
            row.username = Math.random().toString(16)
            grid.call(table)
            return true
          }
        })
      }, 1000 + Math.floor(Math.random() * 100))
    })
  }
</script>
</body>
	<!doctype html>
	<head><meta charset="utf-8" /></head>
	<body>
	<h2>updating grid example</h2>
	<button id="start-updates">Start updates</button>
	<button id="stop-updates">Stop updates</button>
	<div class="grid-target"></div>
	<link rel="stylesheet" type="text/css" href="https://npmcdn.com/normalize.css@4.2.0">
	<script src="https://npmcdn.com/underscore@1.8.3"></script>
	<script src="https://npmcdn.com/faker@1.0.0/faker.js"></script>
	<script src="https://npmcdn.com/@zambezi/fun@2.0.1"></script>
	<script src="https://d3js.org/d3.v4.js"></script>
	<script src="https://npmcdn.com/@zambezi/d3-utils@3.3.1"></script>
	<script src="https://npmcdn.com/@zambezi/grid@0.11.0"></script>
	<script>
	var table = grid.createGrid()
	, rows = _.shuffle(_.range(1, 1000).map(_.compose(_.partial(_.pick, _, 'name', 'username', 'email'), faker.Helpers.createCard)).map(function(row, i) {
	row.id = 'row' + i
	return row
	}))

	var grid = d3.select('.grid-target')
	.style('height', '500px')
	.datum(rows)
	.call(table)

	d3.select('#start-updates')
	.on('click', startUpdates)

	d3.select('#stop-updates')
	.on('click', stopUpdates)

	var updates

	function stopUpdates() {
	updates && updates.forEach(clearInterval)
	}

	function startUpdates() {
	updates = rows.map(function(n, i) {
	var id = 'row' + i

	return setInterval(function() {
	rows.some(function(row) {
	if (row.id === id) {
	row.username = Math.random().toString(16)
	grid.call(table)
	return true
	}
	})
	}, 1000 + Math.floor(Math.random() * 100))
	})
	}
	</script>
	</body>