block by timelyportfolio d21fdd53157793588acbf794ac43a711

react-virtualized with react-sparklines

Full Screen

assembled with blockbuilder.org

Simple example combining react-virtualized with react-sparklines because I could not find any. Most of this code comes from the react-virtualized table example with minor modifications to add a cellRenderer for the sparklines.

Praise and Thanks

Thanks so much to:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>foo</title>
  <style type="text/css">
    body, html, #mount {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div id="mount"></div>

  <script src="utils.js"></script>
  <script src="helper.js"></script>
  <script>
    loadReact();
    loadScriptsAndStyles('table_sparkline.js');
    loadScript('https://unpkg.com/react-sparklines');
  </script>
</body>
</html>

helper.js

// copied directly from https://github.com/bvaughn/react-virtualized/blob/master/playground/helper.js

function loadStyle (source, callback) {
  var link = document.createElement('link')
  link.setAttribute('rel', 'stylesheet')
  link.setAttribute('href', source)
  link.onload = callback
  document.head.appendChild(link)
}

function loadScript (source) {
  var script = document.createElement('script')
  script.setAttribute('src', source)
  script.async = false
  document.head.appendChild(script)
}

function loadScriptsAndStyles (source) {
  var baseDir = 'https://unpkg.com/react-virtualized/'
  var sourceParam = getUrlParam('source')

  if (sourceParam) {
    baseDir = sourceParam === 'local'
      ? '../'
      : `https://unpkg.com/react-virtualized@${sourceParam}/`
  }

  var styleSource = baseDir + 'styles.css'
  var scriptSource = baseDir + 'dist/umd/react-virtualized.js'
  var appSource = source

  loadStyle(styleSource, function() {
    loadScript(scriptSource)
    loadScript(appSource)
  })
}

function loadReact () {
  var baseDir = 'https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0'
  var reactParam = getUrlParam('react')

  if (reactParam) {
    baseDir = reactParam === 'latest'
      ? 'http://react.zpao.com/builds/master/latest'
      : `https://cdnjs.cloudflare.com/ajax/libs/react/${reactParam}`
  }

  loadScript(`${baseDir}/react-with-addons.min.js`)
  loadScript(`${baseDir}/react-dom.min.js`)
}

table_sparkline.js

const NUM_COLUMNS = 10;

function rowGetter (params) {
  return new Array(NUM_COLUMNS).fill('').map(
    function (_, index) {
      return Math.random() * 100;
    })
}

function cellRenderer(params) {
    return React.createElement(
        ReactSparklines.Sparklines,
        {data: params.rowData, height:20, width:50},
        React.createElement(
            ReactSparklines.SparklinesLine,
            null
        )
    )
}

var App = React.createClass({
  render: function() {
    const flexColumns = [];

    for (var i = 0; i < NUM_COLUMNS; i++) {
      flexColumns.push(
        React.createElement(
          ReactVirtualized.Column,
          {
            dataKey: i,
            flexGrow: 1,
            key: i,
            width: 50,
            cellRenderer: cellRenderer
          }
        )
      )
    }

    return React.createElement(
      ReactVirtualized.AutoSizer,
      null,
      function (params) {
        return React.createElement(
          ReactVirtualized.Table,
          {
            height: params.height,
            overscanRowCount: 0,
            rowGetter,
            rowHeight: 30,
            rowCount: 1000,
            width: params.width
          },
          null,
          flexColumns
        )
      }
    )
  }
})

ReactDOM.render(
  React.createElement(App),
  document.querySelector('#mount')
)

utils.js

// copied directly from https://github.com/bvaughn/react-virtualized/blob/master/playground/utils.js

function getUrlParams () {
  var search = window.location.search

  return search.length
    ? search
      .substr(1)
      .split('&')
      .reduce(
        function(reduced, value) {
          var matches = value.split('=')
          reduced[matches[0]] = matches[1]
          return reduced
        },
        {}
      )
    : {}
}

function getUrlParam (key) {
  return getUrlParams()[key]
}