Search code examples
reactjspuppeteerreact-vis

I want to pass set of data through puppeteer to render a react-vis component instead of passing data in html template?

I want to pass set of data through puppeteer to render a react-vis component instead of passing data in html template? i've attached two files one of them is puppeteer file and another one is HTML template file for react-vis? I'm new to Puppeteer and can't find any examples to build on, so I need help passing that data into the HTML template using puppeteer.

pdfTest.js 

const puppeteer = require('puppeteer')
const pdfGenerate = async () => {
  const browser = await puppeteer.launch({ args: ['--no-sandbox'], headless: true})
  const page = await browser.newPage()
  await page.goto('file://C:/Users/Anurag/report_table/src/Component/test.html',
    { waitUntil: 'networkidle2' })
  await page.pdf({
    path: 'Test2.pdf',
    width: '940px',
    height: '680px',
  })
  await browser.close()
}
pdfGenerate()

reactVis.html

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>React App</title>
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/react-vis@1.6.7/dist/dist.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type='text/babel'>
    const {  XYPlot,
      VerticalBarSeries } = reactVis

  var Box = React.createClass({
    render: function () {
      const data = [
        { "y": 100, "x": "Jan" },
        { "y": 112, "x": "Feb" },
        { "y": 230, "x": "Mar" },
        { "y": 268, "x": "Apr" },
        { "y": 300, "x": "May" },
        { "y": 310, "x": "Jun" },
        { "y": 315, "x": "Jul" },
        { "y": 340, "x": "Aug" },
        { "y": 388, "x": "Sep" },
        { "y": 404, "x": "Oct" },
        { "y": 442, "x": "Nov" },
        { "y": 447, "x": "Dec" }
      ]
      const chartWidth = 800;
      const chartHeight = 500;
      const chartDomain = [0, chartHeight];
      return (
        <XYPlot
          xType="ordinal"
          width={chartWidth}
          height={chartHeight}
          yDomain={chartDomain}
        >
          <VerticalBarSeries
            data={data}
          />
        </XYPlot>
      );
    }
  });

  ReactDOM.render(<Box />, document.getElementById('app'));
</script>
</body>
</html>
Solution
    1. expose setData and draw in your html javascript
    2. pass your data into puppeteer.evaluate and call your setData(passedData) and draw
    3. Don't forget to add a waitUntil for it to render