Uploaded image for project: 'Minimal Marketable Features'
  1. Minimal Marketable Features
  2. MMF-721

"Projects" page provides visualizations to better understand distribution of projects versus metrics

    Details

    • Type: MMF
    • Status: Closed
    • Priority: Major
    • Resolution: Fixed
    • Labels:

      Description

      Why

      As a user with interest in multiple projects, I'd like to be able to make relative comparisons of those projects. I can manually compare the numbers with a small set, but with much over a handful it gets difficult. Besides that, facts that would be difficult to tease out of raw numbers are often readily apparent with the right kind of graph. Therefore the Projects page should offer visualizations of key/interesting data sets across projects on both the "All" and the "Favorites" tabs.

      Where

      It will be possible to flip from the list to the visualizations, retaining the filters on the left because seeing how the graphs change as you change filters can be a key part of the experience.

      Linking

      It is already the case that filter criteria are added to the URL. The same should be true for graph selection, so that it's easy to send a visualization link to a colleague and be sure she's looking at the same thing you are.

      What

      Visualizations should show all projects matching the currently selected filters, without regard to the 50-per-page limit applied to the list of projects. However, there are practical usability limitations to displaying all projects in a 1000-project instance in any single chart. When a project set includes more than 500(?) projects, the displayed set should be limited to the top 500 based on the current sort, and a warning message added to the interface: Displayed project set limited to the top 500 projects based on current sort: [sort criterion here]

      Usability with large sets may vary by graph type, so the limit may need to change from type to type.

      For each filter a basic visualization already exists: the distribution bar chart. Beyond that, we should add:

      Bubble charts

      Each bubble is a project in the selected set, and has

      • mouseover: project details
      • clickthrough: project page
      • Quality Model bubble chart:
        The goal of this chart is to quickly find projects in trouble based on the Quality Model.
        • x: Coverage %, with an inverted scale - 100% at origin
        • y: Remediation effort
        • size: LoC
        • color: the Worse of Reliability and Security ratings
      • Bugs
        • x: LoC
        • y: Reliability Remediation Effort
        • size: #bugs
        • color: Reliability rating
      • Vulnerabilities
        • x: LoC
        • y: Security Remediation Effort
        • size: #vulnerabilities
        • color: Security rating
      • Code Smells
        • x: LoC
        • y: Technical Debt
        • size: #code smells
        • color: Maintainability rating
      • Uncovered Lines
        • x: complexity
        • y: coverage (100% should be at Origin so that the files that need the most work are farthest away)
        • size: uncovered lines
      • Duplicated Blocks
        • x: LoC
        • y: Duplicated Lines
        • size: #duplicated blocks

      Current design proposition

      On the projects page, we have a panel with several display options. One of them allows the user to choose between "list view" or "visualization view" (see MMF-389). When "Visualization view" is on, projects are shown as graphs. Default one is Quality Model Bubble Chart:

      Users can choose their visualization content by using the dropdown on top of the chart

      For instance they have access to multiple bubble charts that look like this:

        Attachments

        1. Projects_Page_01.png
          Projects_Page_01.png
          114 kB
        2. Projects_Page_02.png
          Projects_Page_02.png
          130 kB
        3. Projects_Page_03_dropdown.png
          Projects_Page_03_dropdown.png
          9 kB
        4. Projects_Page_04_charts_V2.png
          Projects_Page_04_charts_V2.png
          53 kB
        5. Projects_Page_04_charts.png
          Projects_Page_04_charts.png
          52 kB
        6. projects-page_Visualizations_01.png
          projects-page_Visualizations_01.png
          44 kB
        7. projects-page_Visualizations_02.png
          projects-page_Visualizations_02.png
          52 kB
        8. Screen Shot 2017-03-17 at 16.55.28.png
          Screen Shot 2017-03-17 at 16.55.28.png
          20 kB
        9. Selection_242.png
          Selection_242.png
          126 kB

          Issue Links

            Activity

              People

              • Assignee:
                ann.campbell.2 Ann Campbell
                Reporter:
                fabrice.bellingard Fabrice Bellingard
              • Votes:
                1 Vote for this issue
                Watchers:
                6 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: