ThoughtWorks
  • Contact
  • Español
  • Português
  • Deutsch
  • 中文
Go to overview
  • Engineering Culture, Delivery Mindset

    Embrace a modern approach to software development and deliver value faster

    Intelligence-Driven Decision Making

    Leverage your data assets to unlock new sources of value

  • Frictionless Operating Model

    Improve your organization's ability to respond to change

    Platform Strategy

    Create adaptable technology platforms that move with your business strategy

  • Experience Design and Product Capability

    Rapidly design, deliver and evolve exceptional products and experiences

    Partnerships

    Leveraging our network of trusted partners to amplify the outcomes we deliver for our clients

Go to overview
  • Automotive
  • Cleantech, Energy and Utilities
  • Financial Services and Insurance
  • Healthcare
  • Media and Publishing
  • Not-for-profit
  • Public Sector
  • Retail and E-commerce
  • Travel and Transport
Go to overview

Featured

  • Technology

    An in-depth exploration of enterprise technology and engineering excellence

  • Business

    Keep up to date with the latest business and industry insights for digital leaders

  • Culture

    The place for career-building content and tips, and our view on social justice and inclusivity

Digital Publications and Tools

  • Technology Radar

    An opinionated guide to technology frontiers

  • Perspectives

    A publication for digital leaders

  • Digital Fluency Model

    A model for prioritizing the digital capabilities needed to navigate uncertainty

  • Decoder

    The business execs' A-Z guide to technology

All Insights

  • Articles

    Expert insights to help your business grow

  • Blogs

    Personal perspectives from ThoughtWorkers around the globe

  • Books

    Explore our extensive library

  • Podcasts

    Captivating conversations on the latest in business and tech

Go to overview
  • Application process

    What to expect as you interview with us

  • Grads and career changers

    Start your tech career on the right foot

  • Search jobs

    Find open positions in your region

  • Stay connected

    Sign up for our monthly newsletter

Go to overview
  • Conferences and Events
  • Diversity and Inclusion
  • News
  • Open Source
  • Our Leaders
  • Social Change
  • Español
  • Português
  • Deutsch
  • 中文
ThoughtWorksMenu
  • Close   ✕
  • What we do
  • Who we work with
  • Insights
  • Careers
  • About
  • Contact
  • Back
  • Close   ✕
  • Go to overview
  • Engineering Culture, Delivery Mindset

    Embrace a modern approach to software development and deliver value faster

  • Experience Design and Product Capability

    Rapidly design, deliver and evolve exceptional products and experiences

  • Frictionless Operating Model

    Improve your organization's ability to respond to change

  • Intelligence-Driven Decision Making

    Leverage your data assets to unlock new sources of value

  • Partnerships

    Leveraging our network of trusted partners to amplify the outcomes we deliver for our clients

  • Platform Strategy

    Create adaptable technology platforms that move with your business strategy

  • Back
  • Close   ✕
  • Go to overview
  • Automotive
  • Cleantech, Energy and Utilities
  • Financial Services and Insurance
  • Healthcare
  • Media and Publishing
  • Not-for-profit
  • Public Sector
  • Retail and E-commerce
  • Travel and Transport
  • Back
  • Close   ✕
  • Go to overview
  • Featured

  • Technology

    An in-depth exploration of enterprise technology and engineering excellence

  • Business

    Keep up to date with the latest business and industry insights for digital leaders

  • Culture

    The place for career-building content and tips, and our view on social justice and inclusivity

  • Digital Publications and Tools

  • Technology Radar

    An opinionated guide to technology frontiers

  • Perspectives

    A publication for digital leaders

  • Digital Fluency Model

    A model for prioritizing the digital capabilities needed to navigate uncertainty

  • Decoder

    The business execs' A-Z guide to technology

  • All Insights

  • Articles

    Expert insights to help your business grow

  • Blogs

    Personal perspectives from ThoughtWorkers around the globe

  • Books

    Explore our extensive library

  • Podcasts

    Captivating conversations on the latest in business and tech

  • Back
  • Close   ✕
  • Go to overview
  • Application process

    What to expect as you interview with us

  • Grads and career changers

    Start your tech career on the right foot

  • Search jobs

    Find open positions in your region

  • Stay connected

    Sign up for our monthly newsletter

  • Back
  • Close   ✕
  • Go to overview
  • Conferences and Events
  • Diversity and Inclusion
  • News
  • Open Source
  • Our Leaders
  • Social Change
Blogs
Select a topic
View all topicsClose
Technology 
Agile Project Management Cloud Continuous Delivery  Data Science & Engineering Defending the Free Internet Evolutionary Architecture Experience Design IoT Languages, Tools & Frameworks Legacy Modernization Machine Learning & Artificial Intelligence Microservices Platforms Security Software Testing Technology Strategy 
Business 
Financial Services Global Health Innovation Retail  Transformation 
Careers 
Career Hacks Diversity & Inclusion Social Change 
Blogs

Topics

Choose a topic
  • Technology
    Technology
  • Technology Overview
  • Agile Project Management
  • Cloud
  • Continuous Delivery
  • Data Science & Engineering
  • Defending the Free Internet
  • Evolutionary Architecture
  • Experience Design
  • IoT
  • Languages, Tools & Frameworks
  • Legacy Modernization
  • Machine Learning & Artificial Intelligence
  • Microservices
  • Platforms
  • Security
  • Software Testing
  • Technology Strategy
  • Business
    Business
  • Business Overview
  • Financial Services
  • Global Health
  • Innovation
  • Retail
  • Transformation
  • Careers
    Careers
  • Careers Overview
  • Career Hacks
  • Diversity & Inclusion
  • Social Change
Software TestingTechnology

Twist execution hooks and customizable HTML reports - Part 2

ThoughtWorks ThoughtWorks

Published: May 2, 2013

This is the second part in a two part blog series which talks about Twist execution hooks and customizable HTML reports. In the first post, we described collecting the step execution time and posting it in Twist data store. Here we will discuss customizing the HTML report to visualize the step execution timings.

Report templates

With Twist 13.1, every Twist project comes with a "report-templates" directory which contains the files used for generating HTML reports. When HTML reports are turned on, Twist will use the "report-templates" contents to make the HTML report. Twist generates the execution result as a JSON file. "report-templates/js/scenarios.js" contains a default rendering of this JSON data. To customize reports, you can either change this file or listen to the hooks provided by the default JS renderer. Changes made to the report templates will be applied when Twist generates HTML reports. This makes it easy and powerful to generate custom reports.

Customizing report templates

In this blog post, we will modify the existing "report-templates/index.html" to read the data store contents and plot a simple graph. "report-templates/index.html" already includes twist execution results and the execution results are available to you in a global variable named "twistExecutionDetails". You can take JS console and inspect the contents of this variable. Please refer to the documentation to understand the full JSON structure.

When a report is loaded in the browser and a scenario is displayed, Twist will execute the function assigned to "window.twist.onScenarioDisplayed". We can hook onto this function to render the graph after a scenario is shown.

window.twist.onScenarioDisplayed = function(scenario) { 
renderStepExecutionGraph(scenario); 
}

"renderStepExecutionGraph" handles the graph construction.

function renderStepExecutionGraph(scenario) {
  if (scenario.dataStore) {
    var data = [];
    for (var i = 0; i < scenario.dataStore.keyValues.length; i++) {
        var keyValue = scenario.dataStore.keyValues[i];
        data.push(keyValue[1]);
    }
    // Header for graphs
    var h2 = document.createElement('h2');
    h2.appendChild(document.createTextNode('Step execution details'));
    document.getElementById("scenario_details_container").appendChild(h2);
    // Graphs
    var chart = d3.select("#scenario_details_container").append("div").attr("class", "chart");
    var x = d3.scale.linear().domain([d3.min(data), d3.max(data)]).range(["400px", "800px"]);
    chart.selectAll("div").data(data).enter().append("div").style("width", x).text(function(d,i) { return scenario.dataStore.keyValues[i][0];});
  }
}

The above function reads data store to get the values and uses d3.js to render the graph. You can use any charting library to render the graph.

"scenario_details_container" is the div where scenario details are displayed. The default renderer will add this div while rendering the scenario. Please refer to the documentation to learn more about the HTML elements that the default renderer creates.

With the graph in place, you don't need to show the datastore table. You can hide it using the following css.

<style type='text/css'>
 .data_store_container {
 display: none;
 }
</style>

This blog post only covers the basic customization capabilities. Report customization is very powerful and you can customize it in any way that you like. A detailed understanding about the JSON structure is necessary for any advanced customizations.

 

See what's new in Twist 13.1 on our community site or Try Twist now.

 

 

  • What we do
  • Who we work with
  • Insights
  • Careers
  • About
  • Contact

WeChat

×
QR code to ThoughtWorks China WeChat subscription account

Media and analyst relations | Privacy policy | Modern Slavery statement ThoughtWorks| Accessibility | © 2021 ThoughtWorks, Inc.