# Widgets

Teamscale offers a large variety of highly configurable widgets to create personalized dashboards. These widgets and their configuration options are displayed in the following. Some options are the same for all widgets. Thus, they are described only once at the beginning.

# Common Widget Configuration Options

The following table denotes configuration options that are commonly shared by many widgets. As an example, this image shows the beginning of a configuration dialog containing some of these option:

Excerpt of Widget Configuration Dialog

TitleEach widget can be given its own custom title. Teamscale suggests a default title.
PathThe path can be used to select the scope for which the content of the widget should be displayed. The scope can either be an entire project or you can select any folder or component (if an architecture file has been modeled). You can also configure the branch if branch support is enabled and use the timetravel feature.
TrendMany widgets can display a trend indicating the evolution of a metric. You can configure the time interval, e.g., if the trend should be considered for the last five days.
ZoomingAllows you to zoom into the chart.
Hide Y-AxesRemoves labeling of the y-axes.
BaselinesShows the baselines of the underlying project as vertical blue lines in the chart.
Action menuAdds a drop down menu with option to view a selected zoom range in the Delta perspective and to download the trend as csv.

# Assessment Pie Chart Widget

Assessment Pie Chart Widget

PurposeShows an assessment metric as a pie chart.
MetricsLets you choose from the available assessment metrics. The thresholds of those metrics are configured in the analysis profile, not in this widget.
LegendDisplays a legend for the widget.
Absolute valuesIf checked, absolute values are shown. For structure metrics, these absolute values are LOC or SLOC depending on the analysis profile. (For the comment completeness, these values are the number of (un)documented code entities.) If unchecked, only relative percentage values of the assessment metric are shown.
Assessment thresholdsShows target threshold lines. Should be of format »0.05,0.25«, for example.

# Assessment Trend Chart Widget

Assessment Trend Chart Widget

PurposeShows the evolution of an assessment metric over time.
AssessmentLets you choose from the available assessment metrics as configured in your analysis profile.
Show ratiosDisplays a legend.

# Code City Widget

Code City Widget

PurposeShows the system as a code city.
Area MetricMetric used to determine width and depth of a code city skyscraper.
Height MetricMetric used to determine the height of a code city skyscraper.
Color MetricMetric used to determine the color of a code city skyscraper; can be different than the height metric.
ColorColor used to color the skyscrapers. When using an assessment metric as color metric, the assessment colors red, yellow and green are always used.
Included filesOnly files matching this regular pattern are displayed in the code city. The regular pattern is provided as a Java Regex. To include only Java files, enter .*\.java. You can add multiple include patterns, too, by clicking on . This will provide you additional input fields.
Excluded filesFiles matching this regular pattern will be excluded from the code city.

# Commit Chart Widget

Commit Chart Widget

PurposeShows the commit frequency of the development team over time.
Min. commits per developerNumber of commits a developer must have made at least in order to appear in the chart.
OrderIndicates ordering in which the authors are sorted. You can either select by time, by number of commits or alphabetically by the account name of the authors.

# External Content Widget

External Content

PurposeProvides a link to external content and embeds it as an iframe.
URLUrl for the external content.
Allow scrollbarsAllows scrolling within the widget.

# Findings Churn Widget

Findings Churn Widget

PurposeShows the findings churn within the configurable time interval. Red indicates added findings, blue indicates findings in modified code (based on quality goal improving), and green indicates removed findings.
Show trend textIndicates if a label with the trend should be displayed within the widget
Filters Allows to select the findings to be shown in this widget based on, for example, finding group and finding category

# Findings Summary Bar Chart Widget

Findings Summary Bar Chart Widget

PurposeProvides a bar chart as summary of all finding categorys. Yellow and red indicates the severity of the findings as configured in the analysis profile.
Findings sinceSelects a baseline for the findings. Only findings introduced after the baseline are shown.
Assessment filterChoose if all, only red or only yellow findings should be displayed.
Show timespan textChoose whether the timespan since the baseline should be displayed.
Selected categoriesSelect which finding categories should be considered in this widget. The available categories depend on the underlying analysis profile.
Detail levelChoose for which level a bar should be created; you can pick »only categories«, »categories and groups«, »categories, groups, and rules« or »groups and rules«.
Horizontal orientationIndicates whether bar chart should be oriented horizontally or vertically.
Sort by findings countIndicates whether chart should be sorted by number of findings or by category names.

# Findings Summary Table Widget

Findings Summary Table Widget

PurposeProvides a table with a summary of all finding categorys. Yellow and red indicates the severity of the findings as configured in the analysis profile.
...Please refer to the Findings Summary Bar Chart Widget
MetricSelect the metric based on which the subfolders or subcomponents are compared.
LegendAdd a legend to the widget.
Labels with % and ValuesCreates the legend both with relative as well as with absolute values.
Combine slices below %Combine subfolders/files into »other« which make up less than the specified amount of % of the overall distribution.

# Issue Table Widget

Issue Table Widget

PurposeShows all issues matching a given query.
Enter QueryChoose whether to enter query or select an issue metric.
Issue Metric (Saved Query)Select previously saved issue metric to find matching issues. Selected query will be shown in the field **Query** .
QueryEnter query to find matching issues.

# Label Widget

Label Widget

PurposeAdds a label to the dashboard.
Text sizeChoose between small, medium and large.
Text colorPick the label color.
Bold textUses a bold font instead of regular.
Wrap textUses more than one line if necessary.

# Metric Bar Chart Widget

Displaying multiple metrics.

Comparing lines of code.

PurposeDisplays metrics for folders or components as bar chart. Can be used, for example, to compare subfolders by size (LOC).
MetricsSelect the metrics you want to display as bars. Available are only numeric metrics. As default, all are selected.
Metric Threshold ConfigurationSelect your threshold configuration profile.
Hide Threshold Configuration MarkersIf unchecked, thresholds from the selected threshold configuration will be shown as markers in the bar charts.
Additional Marker Threshold ConfigurationFor each numeric metric, you can enter an additional threshold. For example, for the clone coverage, enter »0.05« if you want to set a 5% threshold.
Metric bar colorsChoose the colors of the bars. Colors are assigned to the metrics based on the ordering of the metrics.
Horizontal orientationIndicates whether bar chart should be oriented horizontally or vertically.
Include parent nodeInclude the folder/component you selected as path for the widget.

# Metric Change Table Widget

Metric Change Table Widget

PurposeShows metric changes within a configurable time interval in a table.
MetricsSelect the metrics from your analysis profile to be shown in the widget.

# Metric Distribution Pie Chart Widget

Metric Distribution Pie Chart Widget

PurposeShows how code distributes over user-defined intervals of a metric.
Examplary questions that can be answered with this widget are: How much of my code is in overly long files? How much of my code is in files with very high clone coverage? How much of my code is in files with sufficient test coverage?
Primary Metric Based on the values of the primary metrics, files are classified into different categories. The categories are described by the boundaries. If you select clone coverage as a primary metric, you can display, for example, how much of your code is in files with very high clone coverage.
Boundaries Sets the thresholds for the primary metric. Based from this thresholds, intervals and corresponding categories are derived. For example, entering two values »0.1 , 0.2« defines three intervals: $[0,0.1], ]0.1,0.2], ]0.2, ∞]]$, which could be interpreted as »low«, »medium« and »high« clone coverage.
ColorsFor each category defined by the boundaries, you can define a color. Colors are assigned in the same order as the interval/categories are derived.
Aggregation MetricAfter each file is classified based on the boundaries of its primary metric, the aggregation metric is used to calculate the distribution. Choosing lines of code, for example, will give you the percentage of your code (in lines of code) that resides within files with a low/medium/high clone coverage.
LegendAdds a legend.
Boundaries in LegendAdds a legend and the configured boundaries.
Show absolute values Shows also the absolute values of the aggregation metric in addition to the relative distribution.

# Metric Distribution Table Widget

Metric Distribution Table Widget

PurposeAs the previous *Metric Distribution Pie Chart* widget, this widget shows how code distributes over user-defined intervals of a metric. It only differs by showing the result in a table rather than a pie chart.
...Please refer to the configuration of the Metric Distribution Pie Chart Widget.

# Metric File Distribution Widget

Metric File Distribution Widget

PurposeShows how a size metric distributes over files matching configurable regular expressions. Can be used, for example, to display how the amount of code (in LOC) distributes over Java and JavaScript files.
MetricChoose between LOC, SLOC and Files (Number of Files) to measure the amount of code matching one of your regular expressions.
File regexesEnter the regular expression patterns using Java Regex syntax for which you want to know the code distribution. Examples can be » `Java:.*\\.java$` « and » `JavaScript:.*\\.js$` «, assigning the labels »Java« and »JavaScript « to the two categories of java and javascript files.
ColorsSpecify a color for each category of files. Colors are assigned in the same order as the categories are defined.
LegendInclude a legend to the widget.

# Metric Hotspot Table Widget

Metric Hotspot Table Widget

PurposeShows a table with hotspots for the selected metrics. Given the selected metrics, an internal score is calculated to find and rank the hotspots. The smaller the score, the »hotter« the hotspot.
MetricsSelect one ore multiple numeric metrics.
Number of hotspotsEnter how many hotspots (files) should be displayed in the table.
Score cutoffFiles with this score or higher will not be shown in the table.
Show scoreSelect whether or not to show the score in the table.

# Metrics Table Widget

Metrics Table Widget

PurposeShows a table with metrics, along with their trend and assessment based on the underlying threshold configuration.
Metric Threshold ConfigurationSelect your threshold configuration.
MetricsChoose the metrics to be shown in the table. Only metrics configured in the threshold configuration are available.
Flatten Single GroupHides the group title if selected threshold configuration contains only one single group.
Show actionsShows an action button for each metric to view the history trend of the metric as well as its treemap.
Show valuesIf checked, shows the values of the metric.
Show iconsIf checked, shows the assessment icons on the left (red, yellow or green circle)
Show trendShows the trend icons on the right (red or green vertical arrow)
Number of days in futureThis option can be used if »Show actions« is checked. The actions provide the opportunity to view the history trend of a metric in a new pop-up dialog. In this dialog, the trend chart can include a certain number of days in future. This can be used for a burn-down chart, when certain target thresholds are set for a metric in the future.

# Metrics Trend Chart Widget

Metric Trend Chart Widget Metric Trend Chart Widget With Tresholds

PurposeShows the trend chart for one or multiple metrics over time.
ColorsChoose the colors for each metric. Colors are assigned in the order as the metrics are sorted.
Show ThresholdsShows the thresholds. This works only if you selected exactly one single metric and for this metric, there is a corresponding threshold configured in the selected threshold configuration.
MetricsSelect one ore multiple numeric metrics.
StackedStack all metrics on top of each other. Needs »Include 0« and »One scale« to be enabled.
Include 0Ensures '0' is the start value of the y-Axis.
One scaleIf checked, all metrics are shown on the same scale with just one axis. Otherwise multiple y-Axis with different scales are used.
Number of days in futureIncludes future days in the chart with the main purpose to see thresholds configured for the future. Enabling this feature works only, if you selected exactly one single metric and for this metric, there is a corresponding threshold configured in the selected threshold configuration. The second screenshot above shows an example of a trend that also displays days in the future. This can be seen as the blue line indicating the clone coverage stops on April, 5th. The threshold configurations in the example were set up such that they decline over time.

# Numeric Metric Value Widget

Numeric Metric Value Widget

PurposeShows the value of a numeric metric.
BoundariesBoundaries are a light-weight version of a threshold configuration. They allow you to configure thresholds to assess a metric. For example for the metric of clone coverage, you can enter the values »0.05,0.10 «. Using the default colors of green, yellow and red, this configuration would display clone coverage values less than 5% with green color, between 5 and 10% with yellow color and above 10% with red color.
ColorsThe input for boundaries defines a certain number of intervals. For example, entering two numbers results in three intervals, as explained above. For each interval, you have to pick a color. The color is used as font color of the label when the metric value resides within the corresponding interval.

# Ownership Treemap Widget

Ownership Treemap Widget

PurposeShows code ownership information for each file in a treemap, i. e. how many developers have changed the corresponding file. The widget reveals, e.g., code areas that only one or few developers are familiar with.
Exclude merge commitsExclude merge commits to calculate ownership information.
Exclude Teamscale importExcludes the initial Teamscale import commit to calculate ownership information.
Ownership colorPick the color to display ownership information. The darker the color, the more developers have changed the corresponding file. Areas, that only one developer is familiar with, are displayed in white.

# Single Metric Trend Widget

Single Metric Trend Widget

PurposeShows the trend chart for a single metric over time. It can show, however, the same metric for multiple projects.
Additional pathsIn addition to the normal path which every widget has, you can add additional paths for this widget. For each configured path, the selected metric will be shown as a separate trend line. Hence, you can, for example, show the lines of code for three different projects in one chart and compare their evolution.
...For the remaining configuration options, please refer to the very similar Metrics Trend Chart Widget
LegendInclude a legend.
Show absolute valuesShows the absolute number of tasks in the legend in addition to the percentage values.
Show discarded tasksIncludes discarded tasks as separate category in the summary.

# Test Gap Overview Widget

Test Gap Overview Widget

PurposeGives an overview of the results from the test gap analysis.
End dateThe point in time until which changes are considered.
Cross-annotate executionUse additional coverage information from other Teamscale projects. This will include coverage for each method that has an identical counterpart in the other project(s) (based on path, location, and content). This can be useful in setups where you have different testing environments for different branches of the same system.
Coverage sourcesSelects which coverage sources should be considered.

# Test Gap Treemap Widget

Test Gap Treemap Widget

PurposeShows the results from the test gap analysis in a treemap, in which every rectangle represents a single method.
...Some configuration options have already been described for the Test Gap Overview widget.
Execution onlyShows only the execution information from the test runs (without combining it with change information).
Outline depthDetermines how many level of packages should be outlined. Outlined packages will be surrounded by a thicker line.
Outline colorColor used to outline packages.
Issue idOnly methods changed during the implementation of a specific issue are shown in the treemap. If set, baseline and end date parameters will be ignored.
Focus on changesShows only changed methods, i. e. hides all gray areas from the treemap. This is particularly helpful in case there are only few changes in a large system, which would otherwise make small changed methods hard to identify.

# Test Gap Trend Chart Widget

Complete trend.

Only percent trend.

PurposeShows test gap analysis results as a trend chart.
...Some configuration options have already been described for the Test Gap Overview Widget.
Hide unchanged methodsRescale the y-Axis to eliminate the big gray and uninformative areas to focus on where the trend actually changes.
Show only percent trendShows the test gap analysis information as one single numeric metric (»test gaps«) and displays its trend. This option cannot be used, if the previous one is enabled and vice-versa.
Execution onlyShow the execution information only (without combining it with change information).

# Treemap Widget

Treemap Widget

PurposeShows a metric with a treemap in which every rectangle represents a file.
Area MetricMetric used to determine the area size of a rectangle representing a file. Only size metrics are available. If the files metric is chosen, all rectangles will have the same (default) size.
Color MetricMetric used to color a rectangle. The higher the value for a file, the darker the color for the corresponding rectangle.
ColorColor for the treemap.
Included filesOnly files matching the provided regular pattern are displayed in the code city. To include only Java files, use the Java Regex syntax and enter .*\.java. You can add multiple include patterns, too.
Excluded filesFiles matching this regular pattern will be excluded from the treemap.
Enable cushionEnables a cushion effect on the treemap.
Minimum valueOnly for numeric metrics. All values equal or below this value are colored with white. Use -1 to automatically use the lowest metric value as minimum value.
Maximum valueOnly for numeric metrics. All values greater or equal to this value are colored with the specified color. Use -1 to automatically use the largest metric value as minimum value. You might want to use this option if you have a single but very large value - an outlier - in your data set which almost dismisses the gradient in the coloring in the treemap.