グラフとPDFレポートを生成する反応を使用して、Petpeteer

const pdfKitDoc = new PDFDocument()
questions.forEach((question, i) => {
  pdfKitDoc
    // what's the height of each question?
    .text(question.name, 0, i * ?)
    // draw charts and calculate these x and y values somehow
    .moveTo(100, 150)
    .lineTo(100, 250)
    .lineTo(200, 250)
    .fill('#FF3300')
})

const Template = ({ questions }) => (
  <Layout>
    {questions.map(question => {
      const { type, data } = question.chart
      return (
        <Question key={question.id}>
          <QuestionHeader title={question.name} />
          <Chart type={type} data={data} />
        </Question>
      )
    })}
  </Layout>
)

Note: It might be possible to use something like jsdom to work around this but that seems unnecessarily complex. Besides, SVG is great for drawing charts.

export function renderTemplate({ data, language, title }) {
  return ReactDOMServer.renderToStaticMarkup(
    React.createElement(Template, { data, language, title })
  )
}

import puppeteer from 'puppeteer'

export async function renderPDF(html: string) {
  const browser = await puppeteer.launch({
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  })
  const page = await browser.newPage()
  // pass the html string as data text/html so we don't have to visit a url
  await page.goto(`data text/html,${html}`, { waitUntil: 'networkidle0' })
  const pdf = await page.pdf({ format: 'A4' })
  await browser.close()
  return pdf
}

// https://github.com/sindresorhus/hex-rgb
import hexRgb from 'hex-rgb'
export function hexToRgb(str: string) {
  const hexTest = /#[a-f\d]{3,6}/gim
  return str.replace(hexTest, hexColor => {
    const { red, green, blue } = hexRgb(hexColor)
    return `rgb(${red}, ${green}, ${blue})`
  })
}

// Questions have different answer types and should use different types of charts depending on template
const chartMappers = {
  scale: {
    summary: (responses) => createGroupedBar(responses),
    periodic: (responses) => createPeriodicLine(responses)
  },
  single: {...},
  multi: {...},
  scale: {...},
  text: {...}
}
const templateMappers = {
  summary: periods => mergePeriods(periods),
  periodic: periods => flattenPeriods(periods)
}
export function mapSurveyToCharts({ survey, template }) {
  return {
    questions: survey.questions.map(question => {
      const responses = tempateMappers[template](question.periods)
      const chart = chartMappers[question.Type][template](responses)
      return {
        name: question.Title,
        chart: chart
      }
    })
  }
}

export async function generateReport({ survey, template, language = 'en_US' }) {
  const data = mapSurveyToCharts({ survey, template })
  const html = renderTemplate({ data, language })
  /*
    Puppeteer is having issues with rendering SVGs with hex colors. Replace all with rgb(R, G, B).
    https://github.com/GoogleChrome/puppeteer/issues/2556
    */
  const replacedHTML = hexToRgb(html)
  const pdf = await renderPDF(replacedHTML)

  return pdf
}