Reply to this topic to post your “Charts in Email” Hackathon docs!
More info here:
I guess I’m the first. 
I’ve never been in a hackathon before so I’m not entirely certain this meets your rules, but it represents many years of working with clients building reporting systems.
10 Likes
Dear @Bill_French, 
Amazing, it not only works like a shine, the very constructive and in detail explanation are impressive.
Thank you very much sharing your know how / experience in this community 
Would you be willing to share the GApps Script, given that this is the meat of the implementation?
Hi @GJ_Roelofs,
I haven’t ruled out a full dump of the entire end-to-end solution and honestly, I haven’t given it any thought. My only excuse is the past three weeks have been overwhelming in my research and work for clients, many of which are on the European and African continents. Working on projects abroad have me up at 2a pulling what amounts to double shifts, so I’m in the weeds a bit right now.
I’ll give your request some thought and get back to you.
In the meantime, I have released a portion of the Google Apps Script code in a thread with @Keith_Guerrette. His interest was primarily the logic that retrieves the content from the Coda doc related to the report, although, I’m certain he would also like to see the entire project.
More soon…
I have another idea how to approach this from another side. The one and only full-time job I had was related to browser automation (Selenium etc). I’d put together a Node.js/Puppeteer script to make a headless browser open Coda section and “print to PDF”, along with all the charts and tables and stuff. The only issue is auth: this approach would require making a doc viewable by anyone by link. Implementing Google sign in + Coda sign in with Google would be too much work for this.
Paul,
As my introduction suggests, it nauseates me to rebuild (in Google charts) that which Coda renders pretty nicely. So, I like the idea of capturing images from Coda docs and I’ve visualized this architecture in my (sometimes headless) head from time-to-time.
Repeatedly, three key observations always sway my determination to streamline the solution using the headless browser approach.
- It’s brittle. This is not to say that my candidate approach is decidedly sustainable. Indeed, there are many aspects of my approach that are simply ugly and should be avoided. Some might argue they never should have been attempted. However, scraping anything in today’s largely dynamic climate of rapid change is likely to require diligent watchfulness and a high incidence of maintenance effort.
One of the most important requirements in my approach is that makers are free to design almost anything in the report section with minimal impact on the Google Apps Script logic. Indeed, there will be impact as variant reports are created, but the interpretation of the document and structural requirements are simple. It’s no accident that the horizontal rule lines are placed where you see them. 
- The probability that Coda eventually provides webhooks and event handlers is high. As such, a more resilient and sustainable design of external reporting solutions will be immediately possible. Investing in code that pulls, rather than pushes report-related requests and awareness, could result in a fair bit of wasted effort.
There’s no doubt - the future of Coda includes webhooks, deeper introspection into the Coda DOM through API methods, and event handlers.
- It’s Coda’s job to help makers avoid #1 and every other cockamamie scheme we might feel compelled to use to meet customer requirements in the short run.
In some ways, I believe this hackathon is a fools errand - there are no promising outcomes that deserve a “sustainable” label. But I also think Coda is not that far from the sustainability finish line on this subject.
Okay, here’s the headless browser solution with Node.js and Puppeteer.
Requrements: any environment with Node.js that can handle headless Chromium (think ~ 1GB of RAM), egress traffic, and not drain your pockets.
npm install puppeteer
const url = 'https://coda.io/d/Paul-s-Plan-Demo_dqOyKWdqtC6/History_su1-W#_lufvi';
const output = `./report-${Date.now()}.pdf`;
const width = '1200px';
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);
// You can also play around with browser window dimensions to get better results:
// await page.setViewport({ width: 1200, height: 800 });
// Wait for the Coda doc to finish loading
await page.waitForSelector('*[class^=document_splash_screen]', { hidden: true });
// Hide the sections panel (this must be done while not yet in Print mode)
await page.waitForSelector('*[class^=left_rail_view--toggleButton]', { visible: true });
await page.click('*[class^=left_rail_view--toggleButton]');
// Go to print mode to hide the UI
await page.emulateMedia('print');
// Wait for arbitrary 2 seconds for chart animations to finish
await page.waitFor(2000);
// Generate the PDF
await page.pdf({
path: output,
width: width
});
await browser.close();
})();
- Set up cron, API endpoint or whatever to run this script, then send the newly saved PDF to an email.
Important: needs the doc to be viewable by anonymous users, since there’s no easy way to sign in a specific user to Coda using browser automation (not worth the effort for this hackathon anyway — think handling Google sign in, 2FA etc)
Result: looking as close to Coda as possible, including nice vector charts. Not in email body though.
7 Likes
P.S. @BenLee well my solution ventures into the “yes code” realm a bit — but the idea is that someone sets up the NodeJS environment once, sets up the list of sections to convert to PDF and email, and then Coda makers can do whatever they usually do in Coda to build those reports without code, not thinking of doing anything special.
1 Like
Wow, both of these are incredible! Really amazed by the work ya’ll have done. It’s exciting to see just how different the approaches are.
2 Likes
@Bill_French Nice. I got my weekend reading setup.( Like your spec in a Coda doc )
@Paul_Danyliuk - nicely done!
2 Likes
Thanks! Coda is a phenomenal tool for pretty much everything including compelling new prospects to hire my consulting services. And I must say it has been working well - I’m slammed since formally making the leap to use Coda to design, present, and manage the development of complex solutions in AI, ML, and process automation.
Enjoy the read.
2 Likes
@Paul_Danyliuk and @Bill_French,
Both entries did a great job of sending charts in email. We couldn’t decide on a winner and both hit the mark in their own way. We’ll be sending you both Coda swag! It was very cool to see two unique approaches and how much each one could accomplish.
Send me a PM with an address and I’ll send your prize!
Thank you both again for submitting entries!
Ben
3 Likes