React components & Victory charts

mcconkiee commented 6 years ago

i should preface that this is more a request for direction/assistance, than a bug.

i have some Victory charts in my view that are rendered with react.js. Everything but the charts comes as expected. I'm familiar with the wicked_pdf_javascript_include_tag and also the possibility of using a CDN. However, i'm at a loss now of exactly how to do this. Currently i'm using react_rails w/ the asset pipeline. i've tried both the special wicked js tag and taking an exact copy of the production js and placing it on s3 so i could have an absolute reference to the js. I'm not convinced this is even correct. Any ideas?

button for print

<li class="table-cell text-center">
            <%= link_to "Print", file_printable_path(:format=>'pdf'), :target => '_blank' %>
          </li>

files_controller.rb

def file_printable

    respond_to do |format|
      format.html {render  :index}
      format.pdf {render :pdf => "file", # pdf will download as ericmcconkie.pdf
                         :javascript_delay => 2000, # i've also tried >20000
                         disable_javascript: false,
                         :layout => "pdf.html.erb",
                         :show_as_html => params[:debug].present? # renders html version if you set debug=true in URL
      }
    end
  end

pdf.html.erb

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="http://yyyyxxxvvvv.s3.amazonaws.com/application-ef1ef3d6146a55ca42bfbec52828047e.css">
  <%= javascript_include_tag "http://yyyyxxxvvvv.s3.amazonaws.com/application-102bfd9056f0a5261506e71e32e802b8.js" %>
  <%= wicked_pdf_javascript_include_tag "application" %>
<%= wicked_pdf_stylesheet_link_tag "application" %>
  <title>test</title>

</head>
<body >

  <%= react_component 'Pie',{
    colorScale:"heatmap",
    data:[
    { x: 1, y: 6 , label:'Swift'},
    { x: 2, y: 6 , label:'JavaScript'},
    { x: 2, y: 4 , label:'Java'},
    { x: 2, y: 2 , label:'Ruby on Rails'}
  ]} %>
<%= yield %>
</body>
</html>

unixmonkey commented 6 years ago

Since your application JS is being hosted on CDN, you shouldn't need the wicked_pdf_javascript_include_tag, and the regular javascript_include_tag should work fine.

There's probably a better way to get it going than offloading all your JS, but it's a good first debugging start.

Let me know if that helps any.

mcconkiee commented 6 years ago

i agree with you @unixmonkey - i'd prefer to avoid the process of moving files to a CDN simply to get this to work. I'm trying webpack right now (no gem, just manual) to prepare the js (calling it charts-js). I am then adding the js to the asset pipeline

application.rb

# webpack (react, et all)
config.assets.precompile += %w( charts-js.js )

then in my view

<%= wicked_pdf_javascript_include_tag "application" %>
<%= wicked_pdf_javascript_include_tag "charts-js" %>

this again works in rails as the html application, but not having the success in pdf. i can confirm that js is there, as i can print it to the page

<%= wicked_pdf_javascript_include_tag("charts-js").inspect %>

there must be something more fundamental i am missing. Is there a recomended strategy to debug js with wicked_pdf`?

arlandism commented 6 years ago

@mcconkiee When you say the charts don't come as expected, are they not rendering at all? I had to do some similar debugging recently and found that what helped for me was generating an html file from the corresponding Rails route (curl localhost:3000/my_route > foo.html) and then running wkhtmltopdf directly using the --debug-javascript flag mentioned here.

mcconkiee commented 6 years ago

exactly, they do not render at all...i'll have a look at the flag to which you link. Thanks!

mileszs / wicked_pdf

React components & Victory charts #700