Baremetric (sample widget)

This widget displays graphics from the Baremetric Service

The widget’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("""#new_user > button""")
pause(7)

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 prior180Date = new Date();
    var ytd = new Date("2018-01-01");
    var customDate = new Date("2014-03-20");

    prior30Date.setDate(prior30Date.getDate() - 30);
    prior90Date.setDate(prior90Date.getDate() - 90);
    prior180Date.setDate(prior180Date.getDate() - 180);
    prior365Date.setDate(prior365Date.getDate() - 365);
    ytd.setDate(ytd.getDate());
    customDate.setDate(customDate.getDate());


    var prior30dateConverted = yyyymmdd(prior30Date);
    var prior90dateConverted = yyyymmdd(prior90Date);
    var prior180dateConverted = yyyymmdd(prior180Date);
    var prior365dateConverted = yyyymmdd(prior365Date);
    var ytdConverted = yyyymmdd(ytd);
    var customConverted = yyyymmdd(customDate);

    var graph = "{{graph|default:'mrr'}}";

    switch (graph) {

        case "mrr":
            window.location.href = "https://app.baremetrics.com/stats/mrr#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "net-revenue":
            window.location.href = "https://app.baremetrics.com/stats/net-revenue#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "fees":
            window.location.href = "https://app.baremetrics.com/stats/fees#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "other-revenue":
            window.location.href = "https://app.baremetrics.com/stats/other-revenue#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "arpu":
            window.location.href = "https://app.baremetrics.com/stats/arpu#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "arr":
            window.location.href = "https://app.baremetrics.com/stats/arr#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "ltv":
            window.location.href = "https://app.baremetrics.com/stats/ltv#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "user-churn":
            window.location.href = "https://app.baremetrics.com/stats/user-churn#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "revenue-churn":
            window.location.href = "https://app.baremetrics.com/stats/revenue-churn#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "quick-ratio":
            window.location.href = "https://app.baremetrics.com/stats/quick-ratio#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "active-customers":
            window.location.href = "https://app.baremetrics.com/stats/active-customers#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "new-customers":
            window.location.href = "https://app.baremetrics.com/stats/new-customers#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "reactivations":
            window.location.href = "https://app.baremetrics.com/stats/reactivations#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "new-subscriptions":
            window.location.href = "https://app.baremetrics.com/stats/new-subscriptions#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "active-subscriptions":
            window.location.href = "https://app.baremetrics.com/stats/active-subscriptions#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "upgrades":
            window.location.href = "https://app.baremetrics.com/stats/upgrades#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "downgrades":
            window.location.href = "https://app.baremetrics.com/stats/downgrades#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "cancellations":
            window.location.href = "https://app.baremetrics.com/stats/cancellations#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "coupons":
            window.location.href = "https://app.baremetrics.com/stats/coupons#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "failed-charges":
            window.location.href = "https://app.baremetrics.com/stats/failed-charges#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        case "refunds":
            window.location.href = "https://app.baremetrics.com/stats/refunds#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
            break;

        default:
            window.location.href = "https://app.baremetrics.com/stats/mrr#start_date=" + {{period}} + "&end_date=" + todayDateConverted;
    }

});

""")
waitForPageLoad()
repeat(0){
pause({{refresh|default:60}}) 
refreshAndWait()
runScript("""
  j(".main-header, .donut-chart, .table-wrapper, .last-update, .mrr-graph, .actions, .trigger, .select2-choice, .breakout-table, .main-graph__trend, .graph-toolbar, .sub-header, .main-graph__trend, #intercom-container, .aux_charts, .metric__current, .side_note, .cohort_table.relative, .single_stat.single_stat--secondary, .graph-actions, .dunning-upsell-banner.dunning-upsell-banner--metric-page, #intercom-container").not("main-graph").each(function () {
             
             j(this).hide();

   });
   
   j(".main-graph").css({"position":"absolute","left":"50%","top":"80%","transform":"translate(-50%, 80%)","overflow-x":"hidden","zoom":"120%" });
""")
  
}

The widget’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

JSON SchemaExpand source

{
  "fields": [
    "email",
    "password",
    "refresh",
    "period",
    "graph"
  ],
  "schema": {
    "graph": {
      "type": "Select",
      "options": [
        {
          "val": "mrr",
          "label": "MRR"
        },
        {
          "val": "net-revenue",
          "label": "Net Revenue"
        },
        {
          "val": "other-revenue",
          "label": "Other Revenue"
        },
        {
          "val": "fees",
          "label": "Fees"
        },
        {
          "val": "arpu",
          "label": "ARPU"
        },
        {
          "val": "arr",
          "label": "ARR"
        },
        {
          "val": "ltv",
          "label": "LTV"
        },
        {
          "val": "user-churn",
          "label": "User Churn"
        },
        {
          "val": "revenue-churn",
          "label": "Revenue Churn"
        },
        {
          "val": "quick-ratio",
          "label": "Quick Ratio"
        },
        {
          "val": "active-customers",
          "label": "Active Customers"
        },
        {
          "val": "new-customers",
          "label": "New Customers"
        },
        {
          "val": "reactivations",
          "label": "Reactivations"
        },
        {
          "val": "new-subscriptions",
          "label": "New Subscriptions"
        },
        {
          "val": "active-subscriptions",
          "label": "Active Subscriptions"
        },
        {
          "val": "upgrades",
          "label": "Upgrades"
        },
        {
          "val": "downgrades",
          "label": "Downgrades"
        },
        {
          "val": "cancellations",
          "label": "Cancellations"
        },
        {
          "val": "coupons",
          "label": "Coupons"
        },
        {
          "val": "failed-charges",
          "label": "Failed Charges"
        },
        {
          "val": "refunds",
          "label": "Refunds"
        }
      ],
      "title": "Graph to show"
    },
    "password": {
      "title": "Password",
      "type": "Password",
      "validators": [
        "required"
      ]
    },
    "email": {
      "title": "Email Address",
      "type": "Text",
      "validators": [
        "required",
        "email"
      ]
    },
    "refresh": {
      "title": "Refresh Interval (sec)",
      "type": "Number",
      "validators": [
        "required"
      ]
    },
    "period": {
      "type": "Select",
      "options": [
        {
          "val": "prior30dateConverted",
          "label": "Last 30 days"
        },
        {
          "val": "prior90dateConverted",
          "label": "Last 3 months"
        },
        {
          "val": "prior180dateConverted",
          "label": "Last 6 Months"
        },
        {
          "val": "prior365dateConverted",
          "label": "Last Year"
        },
        {
          "val": "ytdConverted",
          "label": "Year to Today"
        },
        {
          "val": "customConverted",
          "label": "Custom Date"
        }
      ],
      "title": "Report Period"
    }
  }
}