{% extends "layout.html" %}

{% block title %}
    Overview
{% endblock %}

{% block pageTitle %}
    AST Metrics - Overview
{% endblock %}

{% block content %}

    <!-- start: language tabs-->
    <div class="flex overflow-x-auto overflow-y-hidden border-b border-gray-200 whitespace-nowrap ">

        <a 
            tabindex="-1"
            href="index.html"
            class="inline-flex items-center h-10 px-2 py-2 -mb-px text-center {% if currentLanguage == "All" %}text-blue-600 border-blue-500{% endif %} bg-transparent border-b-2 sm:px-4 -px-1 focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mx-1 sm:w-6 sm:h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
            </svg>

            <span class="mx-1 text-sm sm:text-base">
                All languages <span class="text-xs sm:text-sm">({{ projectAggregated.Combined.ConcernedFiles|length }} files)</span>
            </span>
        </a>

        <!-- start: language tab -->
            {% for languageName, lang in projectAggregated.ByProgrammingLanguage %}
            <a 
                tabindex="0"
                href="index_{{ languageName }}.html"
                class="inline-flex items-center h-10 px-2 py-2 -mb-px text-center bg-transparent border-b-2 {% if currentLanguage == languageName %}text-blue-600 border-blue-500{% else %}text-gray-700   border-transparent{% endif %} sm:px-4 -px-1 hover:border-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mx-1 sm:w-6 sm:h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                </svg>
    
                <span class="mx-1 text-sm sm:text-base">
                    {{ languageName }} <span class="text-xs sm:text-sm">({{ lang.ConcernedFiles|length }} files)
                </span>
            </a>
            {% endfor %}
        <!-- end: language tab -->

    </div>
    <!-- end: language tabs-->

    <!-- start alert -->
    {% if currentView.Comparaison %}
        {% if currentView.Comparaison.ChangedFiles|length > 0 %}
        <div class="flex bg-white rounded-lg shadow-md mt-4">
            <div class="rounded-l-lg flex items-center justify-center w-12 bg-blue-500">
                <svg class="w-6 h-6 text-white fill-current" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                    <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z" />
                </svg>
            </div>
        
            <div class="px-4 py-2 -mx-3">
                <div  class="mx-3">
                    <span class="font-semibold text-blue-500 changed</span>
                    <div class="text-sm text-gray-600 ">
                        Code has changed compared to {{ currentView.Comparaison.ComparedBranch }}.
                        <a href="compare.html" class="text-blue-500 underline">Explore changes now</a>.
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    {% endif %}
    <!-- end alert -->

    <!-- start: line of 4 cards -->
    <div class="grid grid-cols-4 gap-4 mt-4">

        <!-- start: card -->
        <div class="max-w-2xl px-8 py-4 bg-white rounded-lg shadow-md ">
            <div class="mt-2">
                <div>
                    <h5 class="leading-none text-3xl font-bold text-gray-900 pb-2">
                        {{ currentView.Loc.Sum|stringifyNumber }}
                    </h5>
                    <p class="text-base font-normal text-gray-500 ">
                        {% if currentView.Comparaison %}
                            {% include 'componentComparaisonBadge.html' with comparaisonMode='dontCare' diff=currentView.Comparaison.Loc round=0 %}
                        {% endif %}
                        Lines of code
                    </p>
                </div>
                <div class="mt-4 chart-container" >
                    {% include "componentChartRadiusBarLoc.html" %}
                </div>
                <p class="border-t border-gray-200 mt-2 italic text-sm text-gray-600 pt-4 text-justify">
                    The total number of lines of code.
                </p>
            </div>
        </div>
        <!-- end: card -->

        <!-- start: card -->
        <div class="max-w-2xl px-8 py-4 bg-white rounded-lg shadow-md ">
            <div class="mt-2">
                <div>
                    <h5 class="leading-none text-3xl font-bold text-gray-900 pb-2">
                        {{ currentView.CyclomaticComplexityPerMethod.Avg | floatformat:2 }}
                    </h5>
                    <p class="text-base font-normal text-gray-500 ">
                        {% if currentView.Comparaison %}
                            {% include 'componentComparaisonBadge.html' with comparaisonMode='lowIsBetter' diff=currentView.Comparaison.AverageCyclomaticComplexityPerMethod round=2 %}
                        {% endif %}
                        Cycl. complexity per method
                    </p>
                </div>
                <div class="card-graph">
                    {{ currentView|barchartCyclomaticByMethodRepartition}}
                </div>
                <p class="border-t border-gray-200 mt-2 italic text-sm text-gray-600 pt-4 text-justify">
                    The average complexity of the code, measured by the number of possible execution paths. Lower is better.
                </p>
            </div>
        </div>
        <!-- end: card -->


        <!-- start: card -->
        <div class="max-w-2xl px-8 py-4 bg-white rounded-lg shadow-md ">
            <div class="mt-2">
                <div>
                    <h5 class="leading-none text-3xl font-bold text-gray-900 pb-2">
                        {% set color="red" %}
                        {% if currentView.MaintainabilityIndex.Avg > 84 %}
                            {% set color="green" %}
                        {% elif currentView.MaintainabilityIndex.Avg > 64 %}
                            {% set color="yellow" %}
                        {% endif %}
                        <span class="text-{{ color }}-900 bg-{{ color }}-400 rounded px-3 py-1">{{ currentView.MaintainabilityIndex.Avg | floatformat:0 }}</span>
                    </h5>
                    <p class="text-base font-normal text-gray-500 ">
                        {% if currentView.Comparaison %}
                            {% include 'componentComparaisonBadge.html' with comparaisonMode='highIsBetter' diff=currentView.Comparaison.AverageMI round=2 %}
                        {% endif %}
                        Maintainability index
                    </p>
                </div>
                <div class="card-graph">
                    {{ currentView|barchartMaintainabilityIndexRepartition}}
                </div>
                <p class="border-t border-gray-200 mt-2 italic text-sm text-gray-600 pt-4 text-justify">
                    Based on the volume, the complexity of operators and the complexity of the code.
                    Ideally, should be higher than 85.
                </p>
            </div>
        </div>
        <!-- end: card -->

        <!-- start: card -->
        <div class="max-w-2xl px-8 py-4 bg-white rounded-lg shadow-md ">
            <div class="mt-2">
                <div>
                    <h5 class="leading-none text-3xl font-bold text-gray-900 pb-2">
                        {{ currentView.LocPerMethod.Avg | floatformat:0 }}
                    </h5>
                    <p class="text-base font-normal text-gray-500 ">
                        {% if currentView.Comparaison %}
                            {% include 'componentComparaisonBadge.html' with comparaisonMode='lowIsBetter' diff=currentView.Comparaison.AverageLocPerMethod round=2 %}
                        {% endif %}
                        Average lines of code per method
                    </p>
                </div>
                <div class="card-graph">
                    {{ currentView|barchartLocPerMethodRepartition}}
                </div>
                <p class="border-t border-gray-200 mt-2 italic text-sm text-gray-600 pt-4 text-justify">
                    Long methods are hard to maintain and understand. Ideally, should be lower than 20.
                </p>
            </div>
        </div>
        <!-- end: card -->
    </div>
    <!-- end: line of 4 cards -->

     <!-- start: line -->
    <div class="grid grid-cols-4 gap-4 mt-4">

         <!-- start: card -->
         <div class="max-w-2xl px-8 py-4 bg-white rounded-lg shadow-md ">
            <div class="mt-2">
                {% if currentView.ResultOfGitAnalysis %}
                    <div>
                        <h5 class="leading-none text-3xl font-bold text-gray-900 pb-2">
                            {{ currentView.CommitCountForPeriod | stringifyNumber }}
                        </h5>
                        <p class="text-base font-normal text-gray-500 ">
                            Commits on analyzed code
                        </p>
                    </div>
                    <div class="card-graph">
                        {{ currentView|lineChartGitActivity}}
                    </div>
                    <table class="sortable w-full mt-2 min-w-full divide-y divide-gray-200 ">
                        <thead class="uppercase bg-gray-50 ">
                            <tr>
                                <th scope="col" class="py-2 px-2 text-sm font-normal text-left rtl:text-right text-gray-500 "></th>
                                <th scope="col" class="py-2 px-2 text-sm font-normal text-left rtl:text-right text-gray-500 ">
                                    <acronym title="Total commits in the analyzed period">Total</acronym>
                                </th>
                                <th scope="col" class="py-2 px-2 text-sm font-normal text-left rtl:text-right text-gray-500 ">
                                    <acronym title="Commits on analyzed files">
                                        Impacting
                                    </acronym>
                                </th>
                                <th scope="col" class="py-2 px-2 text-sm font-normal text-left rtl:text-right text-gray-500 ">
                                    <acronym title="Commits on files ignored by the analysis, or merge commits">
                                        Ignored
                                    </acronym>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for commitAnalysis in currentView.ResultOfGitAnalysis %}
                                <tr class="text-sm odd:bg-white odd:">
                                    <td class="px-2 py-1 text-sm font-medium whitespace-nowrap">
                                        <acronym
                                        class="cursor-help"
                                            title="{{ commitAnalysis.ReportRootDir }}">
                                            <svg 
                                                title="{{ commitAnalysis.ReportRootDir }}"
                                                xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />
                                          </svg>
                                        </acronym>
                                    </td>
                                    <td class="px-2 py-1 text-sm whitespace-nowrap">
                                        {{ commitAnalysis.CountCommits }}
                                    </td>
                                    <td class="px-2 py-1 text-sm f whitespace-nowrap">
                                        {{ commitAnalysis.CountCommitsForLanguage }}
                                    </td>
                                    <td class="px-2 py-1 text-sm  whitespace-nowrap">
                                        {{ commitAnalysis.CountCommitsIgnored }}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    <p class="border-t border-gray-200 mt-2 italic text-sm text-gray-600 pt-4 text-justify">
                        The number of commits over the last 12 months. Only commits on current programming language are counted.
                    </p>
                {% else %}
                    <div>
                        <h5 class="leading-none text-3xl font-bold text-gray-900 pb-2">
                            {{ currentView.CommitCountForPeriod | stringifyNumber }}
                        </h5>
                        <p class="text-base font-normal text-gray-500 ">
                            Commits
                        </p>
                    </div>
                    <div class="card-graph">
                        {{ currentView|lineChartGitActivity}}
                    </div>
                    <p class="border-t border-gray-200 mt-2 italic text-sm text-gray-600 pt-4 text-justify">
                        The number of commits over the last 12 months. Only commits on current programming language are counted.
                    </p>
                {% endif %}
            </div>
        </div>
        <!-- end: card -->


         <!-- start: card -->
         <div class="px-8 py-4 bg-white rounded-lg shadow-md ">
            <div class="mt-2">
                <div>
                    <h5 class="leading-none text-3xl font-bold text-gray-900 pb-2">
                        {{ currentView.BusFactor }}
                    </h5>
                    <p class="text-base font-normal text-gray-500 ">
                        Bus factor
                    </p>
                </div>
                <div class="card-graph h-48">
                    <table class="w-full mt-2 divide-y divide-gray-200 ">
                        <thead class="uppercase bg-gray-50 ">
                            <tr>
                                <th scope="col" class="py-2 px-4 text-sm font-normal text-left rtl:text-right text-gray-500 ">
                                    Top committers
                                </th>
                                    Top committers
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            {% for committer in currentView.TopCommitters %}
                                <tr class="odd:bg-white odd:">
                                    <td class="px-4 py-1 text-xs whitespace-nowrap">
                                        <acronym title="{{ committer.Count }} commits">
                                            {{ committer.Name }}
                                        </acronym>
                                    </td>
                                </tr>
                            {% endfor %}
                    </table>
                </div>
                <p class="border-t border-gray-200 mt-2 italic text-sm text-gray-600 pt-4 text-justify">
                    The bus factor is the number of developers that would need to be incapacitated before a project would stall due to insufficient knowledge or skills.
                    Ideally, should be higher than 3.
                </p>
            </div>
        </div>
        <!-- end: card -->


        <!-- start: card about files with low maintenability -->
        <div class="px-8 py-4 bg-white rounded-lg shadow-md col-span-2">
            <div class="mt-2">
                <a href="risks.html" class="text-xl font-bold text-gray-700 role="link">
                    Top candidates for refactoring <span class="text-sm font-normal hover:underline text-blue-600 ">(more)</span>
                </a>
                <p class="mt-2 text-sm text-gray-600 ">
                    These components have a low maintainability index and have been recently modified. They are good candidates for refactoring.
                </p>
            </div>
            <div>
                {% include "componentTableRisks.html" with detailled=false linesToDisplay=10 %}
            </div>
        </div>
        <!-- end: card about files with low maintenability -->
    </div>
    <!-- end: line -->

<!-- start: line  -->
<div class="grid grid-cols-4 gap-4 mt-4">

    <!-- start: card -->
    <div class="col-span-2 px-8 py-4 bg-white rounded-lg shadow-md ">
        <div class="mt-2">
            <div>
                <h5 class="leading-none text-3xl font-bold text-gray-900 pb-2">
                    Packages
                </h5>
                <p class="text-base font-normal text-gray-500 ">
                    Relations between packages
                </p>
            </div>
            <div class="mt-4 chart-container" >
                {% include "componentDependencyDiagram.html" %}
            </div>
        </div>
    </div>
    <!-- end: card -->

    <!-- start: card -->
    <div class="col-span-2 px-8 py-4 bg-white rounded-lg shadow-md ">
        <div class="mt-2">
            <div>
                <h5 class="leading-none text-3xl font-bold text-gray-900 pb-2">
                    {{ currentView.Instability.Avg | floatformat:2 }}
                </h5>
                <p class="text-base font-normal text-gray-500 ">
                    Average <acronym title="The higher the number, the more difficult the refactoring becomes because it impacts other components that depend on it.">
                         Instability
                    </acronym>
                </p>
            </div>
            <div class="grid grid-cols-2 gap-8 w-full">
                <div class="mt-4 chart-container" >
                    {% include "componentChartRadiusBarAfferent.html" %}
                    <p class="border-t border-gray-200 mt-2 italic text-sm text-gray-600 pt-4 text-justify">
                        Number of times the component is used by other components. If high, the component is difficult to refactor.
                    </p>
                </div>
                <div class="mt-4 chart-container" >
                    {% include "componentChartRadiusBarEfferent.html" %}
                    <p class="border-t border-gray-200 mt-2 italic text-sm text-gray-600 pt-4 text-justify">
                        Number of external dependencies.
                    </p>
                </div>
            </div>
            
        </div>
    </div>
    <!-- end: card -->


     <!-- start: card -->
     <div class="col-span-1 px-8 py-4 bg-white rounded-lg shadow-md ">
        <div class="mt-2">
            <div>
                <h5 class="leading-none text-3xl font-bold text-gray-900 pb-2">
                    {{ currentView.CyclomaticComplexityPerMethod.Avg | floatformat:2 }}
                </h5>
                <p class="text-base font-normal text-gray-500 ">
                    Average complexity per method (cyclomatic)
                </p>
            </div>
            <div class="mt-4 chart-container" >
                {% include "componentChartRadiusBarComplexity.html" %}
            </div>
            <p class="border-t border-gray-200 mt-2 italic text-sm text-gray-600 pt-4 text-justify">
                The average complexity of the code, measured by the number of possible execution paths. Lower is better. 
                This metrics includes interfaces and abstract classes, and may be lower than 1.
            </p>
        </div>
    </div>
    <!-- end: card -->


</div>
<!-- end: line -->


    
{% endblock %}