This guide is designed to help developers make gtmhub widgets faster and easier. As we use Twitter Bootstrap as a base front-end framework and minimal amount of AngularJS code developer from all levels would be able to create widgets in no time.

Basic concepts

Here is a list of the basic concepts, components, modules that are used across the system:

Metric - the smallest part of an Insight. This could be as smallest as single number.
Insight widget - single unit comprising an algorithm (SQL) and UI (HTML/CSS/JS) displaying one or more metrics in the form of a widget
Insightboard - a dashboard showing set of insight widgets

The insightboard grid

Our insightboards uses 6-column grid. Respectively each widget can be adjusted from 1 to 6 column width. In each size the widget receives new css class depending on its size. This is extremely helpful if you want to transform the content inside the widget based on its size.

For example a widget that is 2-column wide will receive a CSS class .x2 Same logic applies for the rows. A widget that is 4 rows in height will get .y4 CSS class This approach is similar to the media queries in CSS3.

And here is a practical example for widget 3-columns wide and 2-rows high:

#sample-insight .title { 
  font-size: 1em; 
} 
.x3.y2 #sample-insight .title { 
  font-size: 0.7em; 
}

The title will be always 1em except when the widget is expanding in 3 columns and 2 rows.

Explaining a simple widget with minimal minimal set of components - a title and a metric with some styles applied.

Here is the actual markup of the insight widget above. Let's break it down (the full css reference is available from the sidebar, here we just explain the idea):

<div id="sample-insight" class="text-right"> 
   <div class="title o-5">Acquisition cost</div> 
   <div class="title-xxlg mt-2 positive"> 
      <metric name="Customer acquisition cost" field-name="acquisitionCost">{{ data.acquisitionCost | currency : $ }}</metric> 
   </div> 
</div>

Set of CSS classes

text-right Aligns the text in the element on the right. This is actually a class inherited from Twitter Bootstrap
o-5 Sets the element's opacity to 0.5 (semi-transparent)
title Applies large font size to the text insde an element
title-xxlg Applies super big font size to the text insde an element
mt-2 Sets the top margin of the element to 40px (2 multiplied by spacing index, in our case this is 20px)
positive Sets the color for the text to green

HTML element/AngularJS component called `<metric>`

The metric component transforms your dynamic numbers to numbers that can be used to automate an objective or key result. If you hover on the number in the widget above you will see the green '+' sign. This allows the SQL query used to show the acquisition cost can be used as the actual value for a key result or KPI and will be automatically updated when the data sources the SQL uses sync.

AngularJS string formatted to display currency { { data.acquisitionCost | currency : $ } }

This is a standard AngularJS filter. In this example the algorithm behind the insight provides you acquisitionCost metric. The | currency : $ part just formats this number as currency.

Also, the metric component requires the name property that will be used when creating a key result. It can be a text of your choice.

Basic concepts

The insightboard grid

Hello, Widget! markup

HTML element/AngularJS component called <metric>

HTML element/AngularJS component called `<metric>`