Getting Started with the extensions

Scanyp offers a plethora of beneficial pages for monitoring the quality of your codebase and comprehending the existing one. With its high degree of customizability, Scanyp allows you to seamlessly create your own custom extensions using two key elements:

Scanyp Components: These are UI elements that you can integrate into your custom page.
ScanypKit: This is a class that lets you call the Scanyp REST API, from which you can fetch a variety of analysis-related information to use in your extension.

Building your first extension

To create your inaugural Scanyp extension, follow these steps:

Form a folder with the same name as your desired extension.
Create the extension metadata file named "extension.json" within this folder. Here's an example of what this file could contain.

{
"version": "1.0.1",
"name": "Code Smells",
"languages":"java,c,c++,php,python",
"description": "Code Smells in the project(big types, big methods, complex methods,...)",
"publisher": "scanyp"
}

In the same folder, generate the extension page file called index.html. This file will house your custom page. Below is a sample of what a custom page might look like.

>./analyze.sh /home/myuser/compile_commands.json --identifier MyProject

<html>
<head>
<link rel="stylesheet" href="../scanyp.css" />
<script src="../scanyp.js" ></script>
<script>
$( document ).ready(function() {
var scanyxGrid=new ScanypGrid("querygrid","Big Types");
});
</script>
</head>
<body>
<h3>Avoid Types Too Bigs</h3>
<div class="row" style="height: 200px;">
<div id="querygrid" style="height: 200px;">
</div>
</div>
</body>
</html>

This custom page will simply display the outcome of the "Big Types" query. As evident, it is necessary to initially include the Scanyp files.

<link rel="stylesheet" href="../scanyp.css" /><script src="../scanyp.js" ></script>

Within your script, you can incorporate the necessary Scanyp components. In this example, we've added the query result grid component which displays the result of the "Big Types" query.

Scanyp Components

Query result component
Chart component
Dependency graph component

Metric component
Metric card component

Abstractness vs Instability widget