This is the aim to create a nicer looking frontend for the output of the tool Metrix++ (https://metrixplusplus.github.io/home.html#overview_section).
By running metrix++ one can get a multitude of code metrics for a given C source code. Metrix by itself features a Textual User Interface to give output by iuse of the 'view' command. The basic idea was to turn this textua output into somewhat more visually appealing by making use of chart.js (https://www.chartjs.org/).
The output of metrix++ 'view' and 'export' commands is used to create statically (no runtime on a webserver) a set of html files. In current version this is controlled by a makefile (cf. planning section on future approach).
The visual appearance (web page look) can be controlled by CSS styling plus settings in a file called 'diagram_style.js'. Both files are located in subfolder 'style' (if not configured otherwise in makefile).
Download or copy all files of this package into a directory of your choice (referred to as /installation directory/). In the installation folder there's a makefile, which can be edited as a text file. You may have to adjust some path settings, i. e. paths where python and metrix++ are installed to or the root folder of the sourcecode you want to analyse ('SRCPATH').
After doing these configuration it is as simple as running 'make all' in the folder where the makefile is located. This shall generated a set of html files in the subfolder 'html' (by default) of your /installation directory/. Opening this in a browser with 'javascript enabled' shall give you full access on your code analysis features.
The central makefile runs metrix++ in the background and creates an index.html and other html and javascript (*.js) files. The file 'index.html' serves as the starting point for the WUI (Web User Interface). It incorporates chart.js, the CSS file style.css and diagram_style.js. Where the CSS file can be used pretty forward to adopt visual appearance of the various html elements (cf. section on style.css for details), the diagram_style.js file gives reference to which analysis criteria are viewable and how according diagrams are styled.
Central file is the makefile in the /installation directory/. By editing the makefile you can adjust most of the other file locations. By default directory layout is as follows:
/installation directory/
+--makefile
+--data
| +-- #generated .csv and .js files get here
+--html
| +--index.html [generated]
| +-- #other generated html files
+--javascript
| +--filelist.js
+--style
+--diagram_style.js
+--style.css
Use this CSS file to adapt styling of the analysis output (cf. section on diagram_style.js for additional settings). Besides settings for standard html elements (e. g. H1, P, etc.) the following settings are defined.
This defines the overall layout of index.html. The schematic layout is as depicted below:
+-.main-------------------------------------+
|+-.navigation-----------------------------+|
|| MODULE_BASE ||
|| critera1 criteria2 ... ||
|+-----------------------------------------+|
|+-.filelist_wrapper-+ +-.wrapper----------+|
|| filelist [sort] | | Distribution ||
|| | | [ diagram ] ||
|| | +-------------------+|
|| ... | +-.details_wrapper--+|
|| | | highlighted code ||
|+-------------------+ +-------------------+|
+-------------------------------------------+
This setting defines the actual visual appearance of the tooltip in the filelist. You may adjust settings like 'background', 'font-family', 'color' etc. Please do not try to adjust other styles referring to 'tooltip' until you surely know what you're doing, especially leave '.tooltip span[role=tooltip]' simply set to 'display: none'.
This file will be generated by running the central makefile - so do not edit. It conists of the following: In the header it incorporates chart.js, the CSS file style.css and diagram_style.js. It defines the function 'switch_criteria(criteria)' which gets triggered when user selects a navigation element (see below). The result is not only switching the overview diagram, but also populating the filelist with new data. It holds the navigation part consisting of the headline reading the module's name (cf. makefile settings) and a link for each criteria. It splits up the WUI by /iframes/, one for the overview area and another one for the details area. The indexfile itself builds up the filelist by including 'filelist.js'.
The makefile consists of a configuration part, defintion of some generic and some specific targets. The generic targets are standard targets like 'all' (which is first defined target and therefore default), 'clean' and other helpful targets like 'check' to check for prerequisits like installed and runnable metrix++, or 'directories' to check for and create defined directories.
By editing the makefile in a text editor you may alter the following settings: