ChartMogul (sample app)

The app’s Script code

Script CodeExpand source

pause(1)

type("""#user_email""", """{{email|default:'a@b.c'}}""")
pause(1)
type("""#user_password""" , """{{password|default:'password'}}""")
pause(1)
clickAndWait("""input.btn""")
pause(3)
repeat(0){
pause({{refresh|default:60}})
refreshAndWait()
runScript("""
j(function (){
  function yyyymmdd(dateToConvert) {
      return dateToConvert.toISOString().substr(0, 10)
  }

  var todayDate = new Date();
  var todayDateConverted = yyyymmdd(todayDate);
  
  var prior30Date = new Date();
  var prior90Date = new Date();
  var prior365Date = new Date();
  var ytd = new Date(todayDate.getFullYear(), 1, 1);
  var custom = new Date("{{customDate|default:'2000-01-01'}}");
  
  prior30Date.setDate(prior30Date.getDate() - 30);
  prior90Date.setDate(prior90Date.getDate() - 90);
  prior365Date.setDate(prior365Date.getDate() - 365);
  // ytd.setDate(ytd.getDate());
  // custom.setDate(custom.getDate());

  var prior30dateConverted = yyyymmdd(prior30Date);
  var prior90dateConverted = yyyymmdd(prior90Date);
  var prior365dateConverted = yyyymmdd(prior365Date);
  var ytdConverted = yyyymmdd(ytd);
  var customConverted = yyyymmdd(custom);
  
  var g = "{{graph|default:'mrr'}}";
  
  chart_interval = "month";
 
  chart_type = "line";
  if (/^(?:mrr_movements|leads|free_trials)$/.test(g))
    chart_type = "bar";
  
  chart_compare = "true";
  if (/^(?:mrr_movements)$/.test(g))
    chart_compare = "false";
  
  window.location.href = (
    "https://app.chartmogul.com/#charts/" + g.replace(/_/g, '-')
    + "?start=" + {{period|default:'prior30dateConverted'}} + "&end=" + todayDateConverted
    + "&interval=" + chart_interval
    + "&type=" + chart_type
    + "&compare=" + chart_compare
  )

});

""")
waitForPageLoad()
runScript("""
    j(".main-vertical, .main__segmentation, .sidebar, .main-header, .graph-data-table, .main__header.page-header, .graph__controls, .graph-stats, .zendesk-widget").each(function (){
            j(this).hide();
        });
       j(".main").css({"position":"absolute","left":"50%","top":"50%","transform":"translate(-50%, -50%)","width":"1630px","overflow-x":"hidden","zoom":"118%"});

""")
}

The app’s JSON Schema

We need the declare a schema for the required configuration fields:

1. email: the email of the user
2. password: the password of the user
3. refresh: the refresh rate of the graph
4. period: the time period that you want to show the graph
5. graph: the type of the graph that you want to display
6. custom_date : being able to set a custom date in the time period

Script CodeExpand source

{
  "fields": [
    "email",
    "password",
    "refresh",
    "graph",
    "period",
    "custom_date"
  ],
  "schema": {
    "graph": {
      "type": "Select",
      "options": [
        {
          "val": "mrr",
          "label": "MRR"
        },
        {
          "val": "mrr_movements",
          "label": "MRR Movements"
        },
        {
          "val": "arr",
          "label": "ARR"
        },
        {
          "val": "leads",
          "label": "Leads"
        },
        {
          "val": "free_trials",
          "label": "Free Trials"
        },
        {
          "val": "trial_paid_conversion",
          "label": "Trial-Paid Conversion"
        },
        {
          "val": "average_sales_cycle_length",
          "label": "Average Sales-Cycle Length"
        },
        {
          "val": "arpa",
          "label": "ARPA"
        },
        {
          "val": "asp",
          "label": "ASP"
        },
        {
          "val": "ltv",
          "label": "LTV"
        },
        {
          "val": "subscribers",
          "label": "Subscribers"
        },
        {
          "val": "subscriptions",
          "label": "Subscriptions"
        },
        {
          "val": "customer_churn",
          "label": "Customer Churn"
        },
        {
          "val": "quantity",
          "label": "Quantity"
        },
        {
          "val": "quantity_churn",
          "label": "Quantity Churn"
        },
        {
          "val": "net_mrr_churn",
          "label": "Net MRR Churn"
        },
        {
          "val": "gross_mrr_churn",
          "label": "Gross MRR Churn"
        },
        {
          "val": "net_cash_flow",
          "label": "Net Cash-Flow"
        },
        {
          "val": "gross_cash_flow",
          "label": "Gross Cash-Flow"
        },
        {
          "val": "non_recurring",
          "label": "Non-Recurring"
        },
        {
          "val": "refunds",
          "label": "Refunds"
        },
        {
          "val": "failed_transactions",
          "label": "Failed Transactions"
        }
      ],
      "title": "Graph to show"
    },
    "period": {
      "type": "Select",
      "options": [
        {
          "val": "prior30dateConverted",
          "label": "Last 30 days"
        },
        {
          "val": "prior90dateConverted",
          "label": "Last 3 months"
        },
        {
          "val": "prior365dateConverted",
          "label": "Last Year"
        },
        {
          "val": "ytdConverted",
          "label": "Year to Today"
        },
        {
          "val": "customConverted",
          "label": "Custom Date"
        }
      ],
      "title": "Report Period"
    },
    "refresh": {
      "validators": [
        "required"
      ],
      "type": "Number",
      "title": "Refresh Interval (sec)"
    },
    "custom_date": {
      "type": "Date",
      "title": "Custom Date"
    },
    "password": {
      "validators": [
        "required"
      ],
      "type": "Password",
      "title": "Password"
    },
    "email": {
      "validators": [
        "required",
        "email"
      ],
      "type": "Text",
      "title": "Email Address"
    }
  }
}