Highcharts SVG rendering issue with PhantomJs - node.js

I am using phantom(6.0.3) to take screenshot of an angular page and send the html as email, using nodemailer(2.6.4). The angular page also has a few Highcharts(7.0.0) inside it. When the page is opened in a web browser in my local, QA and Prod env, all the chart looks as expected. But, when I send the same page in email(using phantom), the Highcharts inside the email in the local and QA versions look as expected, but the Prod version of the email shown some issues(screenshot below) - like the data labels almost goes to the edge of the chart and the legends start overlapping with each other!
I have no clue as what might be causing these issues particularly in Prod environment, as I am using the same versions of all the above mentioned packages(node, phantom, highcharts etc.) in all the environments (local, qa and prod).
The only thing I could find out while debugging the raw source of the email message is that the 'g' elements in the faulty charts has a different transform=translate(...,...) values, and that's causing the mis-alignment. But I cannot figure out what is the root cause behind this behavior, as I am using the same version of all the packages and only the deployment environment is different. Could it be any external module that is influencing this different rendering? Any help/suggestions would be appreciated.
Here are the screenshots of the Highchart trends from two different emails :
1. Correct Label Positions ->
2. Faulty Label Positions ->
3. Correct Legend Positions ->
4. Faulty Legend Positions ->

Related

rid3, shadow-cljs & drag; different behavior in dev and prod

I'm creating an application which can be used to make an overview of your IT-Landscape. Currently it can show a table with the interfaces in your environment and their connected applications. It is also capable of creating an SVG image from this data. The data it self can be added via API calls.
I started with a project via:
leiningen new luminus versiontracker +h2 +shadow-cljs +kee-frame +swagger +(some other)
To be able to generate the SVG file with drag-and-drop support I added rid3 to the project .clj file.
When I run the application in development mode:
lein repl
and
lein shadow-cljs watch app
I can drag any item in the SVG file that is generated. I can click on a circle and drag it to any place I want.
However when I create the 'production' version with:
lein uberjar
and then run this application using:
java -Dconf=config.edn -jar versiontracker.jar
Dragging an object is not working properly. The whole SVG is selected instead of a single object within the SVG image; which result in strange drag-and-drop behavior.
Looking at the event through the console window I can see different behavior.
In the development environment if I grab a circle (which has the drag function attached) the srcElement in the sourceEvent is the text that is displayed on top of this circle. Although not the circle is selected dragging works as expected. The selected item follows the mouse while dragging.
In the 'production' environment if I grab a circle the srcElement in the sourceEvent is the complete svg; which result in strange drag-and-drop behavior. The selected item does not follow the mouse but the items do start moving around in an unpredictable way.
Go to Version Tracker download the release with tag V0.3.0 for the production version (there is also an H2 database with some sample data) and compare it to the development version by checking out the project.
Any help is appreciated
Your error description is a bit lacking and the project is far too complex to quickly reproduce.
Do you get any externs inference warnings when building? Do you get any errors/warnings in the Browser console with a production build?
The most likely cause here is externs. Meaning that property names such as in this (set! (.-fx d) (.-x event)) may end up getting renamed or stripped. As such it would break any behavior that relies in picking the correct names. See the documentation for further info on the subject. It might be enough to add a couple ^js hints in the proper places.
You are also using a rather old shadow-cljs version (current as of today is 2.16.10). So you need to opt-in to get externs inference warnings via :compiler-options {:infer-externs :auto} in your build config. The newer versions have this enabled by default.

Automating Chrome Cast Ambient Mode settings or Google Photo Album content

I want to rotate out/toggle two images within my Chrome Cast's Ambient Mode (via Google Photo Album).
Possible routes that I see:
Delete image 1 and add image 2 of an album one day, the next delete image 2 and add image 1.
Each day, switch the selected Album within the Ambient Mode settings.
Methods I see:
https://developers.google.com/cast/, however there doesn't seem to be any mention of settings or ambient mode. I suspect these methods are not public.
ifttt, sadly I don't see anything even remotely along these lines already out there.
Is this possible, where could I look?
The Ambient mode content is managed by the Cast platform based on the selected content you have provided. There isn't an API to be able to control what content is selected to be displayed.

Mapbox GL JS : Do large images overlay accurately - if so, how?

I feel like I have been stuck perpetually with this problem. I have a single geoTIF file of weather radar data that will not overlay on Mapbox correctly. The spatial area is of the entire US. It should be a simple task, but there seems to be some sort of weird distortion causing the overlay to not be correct, even though I am very certain my Mapbox coordinates in the linked HTML file below are correct and match the geoTIF.
I uploaded the geoTIF to a website called "geotiff.io" (which uses leaflet to show the files) and it renders the image perfectly, but I cannot emulate it using Mapbox. The storms always are off in Mapbox.
This is a link to my Mapbox map with the image overlay where it is incorrect
This is a dropbox link to a zip file with the geoTIF and colorization file, which I used gdaldem with
I would like to explain more, so it's simplified. Here is an image showing part of a storm that is out of place (left side) and how it is too far north. On the right side was a screenshot taken from geotiff.io - and how it's perfect. What is going on here?!
The geoTIF image was not set as a web mercator projection before being displayed in Mapbox. I assume the geotiff.io service corrected this automatically and made me think there was an issue with the code or Mapbox, when it was not.

Mobile Safari fails to scroll to named anchor

I have a big SVG document here, containing a map of all the quests in a certain online game. Each quest node is inside a SVG <a> element, linking to a distinct named anchor in a big HTML document that loads in another tab, containing further details about that particular quest. This works exactly as desired in desktop Safari, and I'd expect it to work just as well in any browser that supports SVG at all since I'm using only the most basic form of linking, but it fails badly on Mobile Safari (iOS 6) - which is my single most important browser target, considering that the game in question is for the iPad. It only scrolls to the correct anchor on the initial load of the HTML page; clicking a different quest in the SVG tab will cause a switch to the HTML tab, and the hash (fragment ID) in the address bar changes, but the page doesn't auto-scroll.
This appears to be a known limitation in Mobile Safari - hash-only changes in the URL apparently used to force a page reload, and that got over-fixed such that nothing gets triggered at all now. The fixes I've found online all seem to be applicable only in cases where the URL change is being generated programatically, from within the same document, rather than static links from a different document.
Further details:
I've tried doing the named anchors in both the old <a name="..."> form, and the newer <h1 id="..."> form. No difference.
I've tried adding an onhashchange handler, to force the scrolling to take place, but the handler isn't being called at all (verified by putting an alert() in it).
I could presumably fix the problem by having each quest's details in a separate HTML file, but that would severely affect usability - with all the details in a single file, you can use your browser's Find feature to search through them all at once. (Also, deploying 1006 files to my web hosting after each update would be a bit of a pain...)
Anybody have an idea for a work-around?

Drupal 6 Availability of View Basic Settings Variables

I've been doing some basic view theming with Drupal 6, but I'm having a difficult time figuring out how to access certain variables. Here is my setup:
I have one view with several block displays.
I three templates I'm using to override the default:
views-view-unformatted-my-list-blocks.tpl.php (styles template)
views-view-my-list-blocks.tpl.php (rows template)
views-view-fields-my-list-blocks-block-1.tpl.php (an example display template)
Now, if I just copy the default code into the templates, everything seems to display as it should. But I noticed that in my styles template, the title variable is there, but nothing comes out. Even when I set my display title in basic settings, nothing shows. I would also like to access my CSS class variable from the basic settings, but I'm not sure what variable to use for that either.
Can anyone shed some light on these?
Here is an example on doing this
http://www.expresstut.com/content/themeing-views-drupal-6
http://www.expresstut.com/content/themeing-views-drupal-6-part-2

Resources