Accept viewport size as an argument for a proper screenshot of the large pivot table

README.md

@@ -28,7 +28,16 @@ Redashbot V2 is a open-source slack bot for [Redash](https://redash.io).
 - Table
   - `@botname <Query URL>#table`
     - e.g. `@redash https://your-redash-server.example.com/queries/1#table`
-
+
+You can add the following additional arguments to the command.
+
+- e.g. `@botname https://your-redash-server.example.com/queries/1#2 rb_width=1280`
+
+| key | description | default |
+| --- | --- | --- |
+| rb_width | Specify viewport width | 1024 |
+| rb_hight | Specify viewport height | 360 |
+
 ## Setup
 
 [Create a Slack app](https://api.slack.com/apps/) and set environment variables `SLACK_BOT_TOKEN` and `SLACK_SIGNING_SECRET`.

src/browser.ts

@@ -22,13 +22,13 @@ export class Browser {
     }
   }
 
-  async capture(url: string): Promise<Buffer> {
+  async capture(url: string, width: number, height: number): Promise<Buffer> {
     if (!this.browser) {
       this.browser = await launch(config.browser, this.options)
     }
 
     const page = await this.browser.newPage()
-    page.setViewportSize({ width: 1024, height: 360 })
+    page.setViewportSize({ width: width, height: height })
     await page.goto(url, { timeout: config.browserTimeout })
     try {
       const waitFor = url.includes('/query/') ? /results/ : /events/

src/handlers.ts

@@ -11,6 +11,25 @@ type Middleware = (args: {
 }) => Promise<void>
 
 export type Handler = (ctx: { redash: Redash; browser: Browser }) => Middleware
+export type CommandOptions = { width: number, height: number}
+
+function prepareOptions(input: string): CommandOptions {
+  const regex = /rb_(\w+)=([\w\d]+)/g;
+
+  const args = {};
+  let match;
+  while ((match = regex.exec(input)) !== null) {
+    const [_, key, value] = match;
+    args[key] = value;
+  }
+
+  const options: CommandOptions = {
+    width: parseInt(args["width"]) || 1024,
+    height: parseInt(args["height"]) || 360,
+  };
+
+  return options;
+}
 
 export const handleRecordChart: Handler = ({ redash, browser }) => {
   return async ({ context, client, message }) => {
@@ -28,7 +47,8 @@ export const handleRecordChart: Handler = ({ redash, browser }) => {
     const embedUrl = `${redash.alias}/embed/query/${queryId}/visualization/${visualizationId}?api_key=${redash.apiKey}`
     const filename = `${query.name}-${visualization?.name}-query-${queryId}-visualization-${visualizationId}.png`
 
-    const file = await browser.capture(embedUrl)
+    const options = prepareOptions(context.matches.input)
+    const file = await browser.capture(embedUrl, options.width, options.height)
     client.files.uploadV2({
       channels: message.channel,
       filename,
@@ -47,7 +67,8 @@ export const handleRecordDashboardLegacy: Handler = ({ redash, browser }) => {
 
     const dashboard = await redash.getDashboardLegacy(dashboardSlug)
     const filename = `${dashboard.name}-dashboard-${dashboardSlug}.png`
-    const file = await browser.capture(dashboard.public_url)
+    const options = prepareOptions(context.matches.input)
+    const file = await browser.capture(dashboard.public_url, options.width, options.height)
     client.files.uploadV2({
       channels: message.channel,
       filename,
@@ -67,7 +88,8 @@ export const handleRecordDashboard: Handler = ({ redash, browser }) => {
     const dashboard = await redash.getDashboard(dashboardId)
     const filename = `${dashboard.name}-dashboard-${dashboardId}-${dashboardSlug}.png`
     if (dashboard.public_url) {
-      const file = await browser.capture(dashboard.public_url)
+      const options = prepareOptions(context.matches.input)
+      const file = await browser.capture(dashboard.public_url, options.width, options.height)
       client.files.uploadV2({
         channels: message.channel,
         filename,