ARCHIVED this is part of my older code tools - see https://kornysietsma.github.io/polyglot-tools-docs/ for latest stuff.
Click here to see the live demo!
A fairly simple treemap to view simple language-agnostic code metrics:
- Lines of code
- Age since last change (months)
- Number of authors
- Indentation as a proxy for complexity
- average (actually median) indentation
- greatest (actually P95) indentation
These are fairly simple measures that just point you in the general direction of toxic code. They should not be mistaken for code quality metrics!
However, they have the huge advantage that they can be determined in an almost language-agnostic way, and quite quickly.
See below for tools used to produce these metrics
Pre-generated metrics are included for several big open-source projects. In time I'll publish the tools and scripts to calculate similar files yourself. At the moment it's all hard-coded to make it easy to demo.
The metrics here are generated by:
- cloc2flare which takes the output of
cloc
and produces flare files - csvmerge2flare which takes the output of code-maat and merges it with the flare files
- indent2flare which merges indentation data into the flare files
- pruneflare which I use to prune out things like vendor source code from flare files.
I've made a sample script in scripts/sample_code_analysis.sh
that calculates
all the metrics I have so far for a project (I use the atom editor as it
makes another nice demo).
It's fairly simple:
- fetch the uberjars for all the tools listed above
- fetch the source code of the Atom editor as a sample
- run
cloc
and pipe the output tocloc2flare
- run
git log
to get log data for the last 5 years - run
code-maat
to calculate age and author data - pipe the
code-maat
output intocsvmerge2flare
to update the flare data with age and author data - run
indent2flare
to add indentation data to the flare file - do some simple bash scripting to wrap the JSON data so it can be used as a JavaScript source file.
This is just a sample! - you may well want to do things differently - prune out vendor code, merge several git repos, use a different url prefix, or other stuff.
But this is the general pattern.
It should be quite feasible to add your own metrics in similar ways, and tweak the UI to show them.
This code is originally based on some thrown-together work a few years ago - produced using sample d3 code and some very simple glue scripts in 2 or 3 days of frantic work.
It is far from perfect - it's been cleaned up but has some ugly warts around state management, still needs a fair bit of lovin'
My D3 approach is covered in more detail at https://github.com/kornysietsma/d3-modern-demo :
- native es6, this won't work on any browser more than a few months old! Specifically, it needs es6 module support - https://caniuse.com/#feat=es6-module - so no IE support for a start.
- it uses css grids in a fairly basic way, similarly needing a new browser
- it tries to prefer immutable data structures using immutable.js - actually I gave up and used mutating state in several areas, as d3 mutates things all over the place.
- no Ajax needed - data is exported as JavaScript objects so you can view the demo structures with a trivial http server, or on Github.
Run 'simple_server.sh' to view this on localhost - or when I have it set up properly you'll be able to view it on github.