Code Analytics MVC
Problem to solve
Many companies are trying to move away from using certain languages and would like to have a way to monitor their progress using their repo information. Right now we only provide a snapshot of languages used at a project level, which is difficult to aggregate - it doesn't even give file or LOC count. In general, code analytics is a big space, which is closely relate to code quality. Our focus would be the data exposed to a manager or above that helps them monitor the health of their code assets. For example, a manager might want to understand where their code hotspots are at a certain point in time and potentially use these in order to prioritize technical debt.
Intended users
EM, PM when overseeing refactoring, Executives
Further details
This has the benefit of starting us down the path of creating "Repository/Project" dashboards that summarize more meta data across the group (deployment methods, language versions, dependencies, size).
Proposal
- Language analytics - rework and move the https://gitlab.com/gitlab-org/gitlab-ce/graphs/master/charts page with the filter look discussed in https://gitlab.com/gitlab-org/gitlab-ce/issues/62346, i.e. a user should be able to filter by project, contributor and time.(https://gitlab.com/gitlab-org/gitlab-ee/issues/4527#)
-
A user should be able to see the trends in terms of lines of code contributed and size of files in a given language in this form: https://ecomfe.github.io/echarts-examples/public/editor.html?c=area-stack&theme=light.
-
Let's have a dropdown as part of the chart of whether we want to look at this in terms of files or lines of code (LOCs) and another one for how we would like it to be grouped (i.e. we should be able to have one line or a line per each project).
-
We should have a selector to convert the chart to daily counts in the form of a stacked bar chart: https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-stacked-column-chart--stacked. The way I see this done is through a little selector with 2 icons in the top right corner-one icon for line chart and one icon for bar chart)
- Let's keep a pie chart (https://ecomfe.github.io/echarts-examples/public/editor.html?c=pie-legend) with the % of languages today similar to what we have, but have the ability to select from a dropdown file vs LOC and get those numbers as well, rather than just the %.
- Code Hotspots - Let's create a treemap where the size of each square is the LOC in the file (or folder > project > group) - https://ecomfe.github.io/echarts-examples/public/editor.html?c=treemap-visual. The color of the squares ranges from green to red and corresponds to areas, which we believe are hotspots - for now the lower the average time between commits to a file or the higher the number of lines changed, the more
red
the file becomes. Can we have this as a dropdown on the top left of the chart? The treemap should know our hierarchy, i.e. group > project > folders > files, so that every time you click on a rectangle, it creates a new treemap, with the data inside it zoomed (basically trying to get something similar to https://ecomfe.github.io/echarts-examples/public/editor.html?c=sunburst-visualMap). When we hover we should be able to see a tooltip with: LOC, N of commits, average time between commits, average size of the commits in terms of line of code.
-
Code Age - defined as the time since a file was last changed. Let's show a histogram (https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/charts-column-chart--with-toolbox) where we show 1, 7 days, 2 weeks, 1 month, 6 months on the x-axis and % of code changed in that range on the y-axis.
-
Code dependency - it would be useful to know if a hotspot is one that has big dependencies on it: https://ecomfe.github.io/echarts-examples/public/editor.html?c=graph-npm