react-virtualized with jquery.sparklines from R

Portable

Although done in R, this can easily be adapted to other languages.

Code

library(reactR)
library(htmltools)
library(pipeR)
library(tibble)
library(dplyr)

react_virt <-  htmlDependency(
  name = "react-virtualized",
  version = "9.7.3",
  src = c(href = "https://unpkg.com/react-virtualized@9.7.3/"),
  script = "dist/umd/react-virtualized.js",
  stylesheet = "styles.css"
)

rand_tbl <- tibble(
  id = 1:10000,
  data = lapply(1:10000, function(d){runif(10)})
) %>>%
  mutate(lastval = sapply(data, function(x){tail(x,1)})) 

js_data <- tags$script(HTML(
sprintf(
'
var data = %s;
',
  jsonlite::toJSON(rand_tbl, dataframe="rows")
)
))

js <- tags$script(HTML(babel_transform(
sprintf(
"
function rowGetter(params) {
  return data[params.index];
}

function rowRenderCallback(x) {
  $('.sparkline').sparkline('html',{width:200, chartRangeMin:0, chartRangeMax:1});
}

class App extends React.Component {
  render() {
    return (
      <ReactVirtualized.Table
        rowGetter={rowGetter}
        rowCount={data.length}
        height={300}
        width={400}
        rowHeight={40}
        headerHeight={30}
        onRowsRendered={rowRenderCallback}
      >

        <ReactVirtualized.Column
          label='Index'
          cellDataGetter={
            ({ columnData, dataKey, rowData }) => rowData.id
          }
          dataKey='index'
          width={50}
        />

        <ReactVirtualized.Column
          disableSort
          label='Data'
          dataKey='data'
          cellRenderer={
            ({ cellData, columnData, dataKey, rowData, rowIndex }) => <span className='sparkline' values={cellData.join(',')}></span>
          }
          width={200}
        />

        <ReactVirtualized.Column
          disableSort
          label='LastVal'
          dataKey='lastval'
          cellRenderer={
            ({ cellData, columnData, dataKey, rowData, rowIndex }) =>
              { const divStyle = {
                  width: 70 * cellData + 'px',
                  height: '10px',
                  backgroundColor: 'gray'
                }
                return <div style={{border:'2px solid black',height:'10px'}}>
                  <div style={divStyle}></div>
                </div>
              }
          }
          width={70}
        />

      </ReactVirtualized.Table>
    )
  }

}

const app = document.getElementById('rvtable');
ReactDOM.render(<App />, app);
"
)
)))

tagList(
  tags$div(id="rvtable"),
  js_data,
  js,
  html_dependency_react(),
  react_virt,
  htmlwidgets::getDependency('sparkline')[2:3]
) %>>%
  browsable()