Add graph info

Signed-off-by: Dinne Kopelevich <[email protected]>

app/site/_includes/graph-section.liquid

@@ -2,7 +2,7 @@
 {% assign devPath = 'site/_graphs' | append: path %}
 {% assign distPath = baseurl | append: '/assets/img/graphs' | append: path %}
 {% assign fileExtension = path | split: '.' | last %}
-{% assign modal_description = "This graph shows..." %}
+{% assign modal_description = modal_description %}
 
 {% if devPath | fileExists %}
   <div class="{{ className }}">

app/site/_includes/graph-toggle.liquid

@@ -1,7 +1,7 @@
 {% assign graphName = name| append: "-graph" %}
 {% assign buttonName = name | append: "-button-" %}
 {% assign graphsCheck = true %}
-{% assign modal_description = "This graph shows..." %}
+{% assign modal_description = modal_description %}
 
 {% comment %} Check for file existence of graphs {% endcomment %}
 {% for path in graphs %}

app/src/css/style.css

@@ -637,8 +637,15 @@ embed {
 
 .usa-modal {
   display: none;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
   opacity: 0;
   transition: opacity 0.3s ease;
+  border-radius: 25px;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 }
 
 .usa-modal[aria-hidden="false"] {
@@ -685,7 +692,6 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
 
 
 
-
 /* .main-tag {
   background-color: #1a4480;
   padding: 0.5rem;

templates/repo_report_template.md

@@ -100,15 +100,15 @@ date_stampLastWeek: {date_stamp}
   <h2 class="graph-section-title">Activity Graphs</h2>
   <div class="all-graphs">
     <!--- Issues/PRs Status Breakdown Graph -->
-    {{% render "graph-section"  baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/issue_gauge_{repo_name}_data.svg", title: "Issues & PRs Status Breakdown", modal_description: "This is a TEST IF THE DESCRIPTIONS OF ISSUES AND PRs STATUS DESCRIPTION" %}}
+    {{% render "graph-section"  baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/issue_gauge_{repo_name}_data.svg", title: "Issues & PRs Status Breakdown", modal_description: "This graph provides an overview of the statuses of issues and pull requests in the repository. It categorizes them into open issues, open pull requests, and closed and merged pull requests, helping track progress and worklad distribution." %}}
     <!--- Contributor Activity Line Graph -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/commit_sparklines_{repo_name}_data.svg", title: "Commits by Month" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/commit_sparklines_{repo_name}_data.svg", title: "Commits by Month", modal_description: "This line graph represents contributor activity over time by showing the number of commits made each month. It provides insights into trends in developement and periods of high and low activity." %}}
     <!--- First Response For Closed PR Scatterplot -->
-    {{% render "graph-section" baseurl: site.baseurl, class: "firstResponsePRCrop", path: "/{repo_owner}/{repo_name}/firstResponseForClosedPR_{repo_name}_data.png", title: "First Response For Closed PR" %}}
+    {{% render "graph-section" baseurl: site.baseurl, class: "firstResponsePRCrop", path: "/{repo_owner}/{repo_name}/firstResponseForClosedPR_{repo_name}_data.png", title: "First Response For Closed PR", modal_description: "This scatterplot visualizes the time it takes for the first response on closed pull requests. Each point represents a pull request, helping analyze the response times and potential bottlenecks in the review process." %}}
     <!--- New Commit Contributors by Day over Last Month and Last 6 Months -->
       {{% assign optionsArray = '1 Month, 6 Month' | split: ',' %}}
       {{% assign graphsArray = '/{repo_owner}/{repo_name}/new_commit_contributors_by_day_over_last_month_{repo_name}_data.svg, /{repo_owner}/{repo_name}/new_commit_contributors_by_day_over_last_six_months_{repo_name}_data.svg' | split: ',' %}}
-      {{% render "graph-toggle", baseurl: site.baseurl, name: "new-contributors" options: optionsArray, graphs: graphsArray, title: "Number of Contributors Joining per Interval" %}}
+      {{% render "graph-toggle", baseurl: site.baseurl, name: "new-contributors" options: optionsArray, graphs: graphsArray, title: "Number of Contributors Joining per Interval", modal_description: "These graphs illustrate the number of new contributors joining the project over time. They show data for one-month and six-month intervals, providing insights into contributor growth and onboarding rates." %}}
   </div>
 </div>
 
@@ -117,22 +117,22 @@ date_stampLastWeek: {date_stamp}
   <h2 class="graph-section-title">COCOMO Graphs</h2>
   <div class="all-graphs">
     <!--- Line Complexity Graphs -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/total_line_makeup_{repo_name}_data.svg", title: "Line Complexity" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/total_line_makeup_{repo_name}_data.svg", title: "Line Complexity", modal_description: "This graph measures the complexity of the codebase over time by analyzing the number lines, blank line and commented lines." %}}
     <!-- Languages Graphs - Summary + Predominant -->
     {{% assign optionsArray = 'Summary, Predominant' | split: ',' %}}
     {{% assign graphsArray = "/{repo_owner}/{repo_name}/language_summary_{repo_name}_data.svg, /{repo_owner}/{repo_name}/predominant_langs_{repo_name}_data.svg" | split: ',' %}}
     {{% render "graph-toggle" baseurl: site.baseurl, name:"language-information" options: optionsArray, graphs: graphsArray, title: "Language Information" %}}
     <!-- Average Issue Resolution Time -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/average_issue_resolution_time_{repo_name}_data.svg", title: "Average Issue Resolution Time" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/average_issue_resolution_time_{repo_name}_data.svg", title: "Average Issue Resolution Time", modal_description: "This graph tracks the average time taken to resolve issues in the repository. It helps identify trends in issue resolution efficiency and areas for improvement." %}}
     <!-- Libyear Timeline Graph -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/libyear_timeline_{repo_name}_data.svg", title: "Dependency Libyears" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/libyear_timeline_{repo_name}_data.svg", title: "Dependency Libyears", modal_description: "This timeline graph visualizes the age of dependencies in the repository in terms of 'libyears.' It highlights how up-to-date the dependencies are and the potential risk of outdated libraries." %}}
     <!-- DRYness Percentages Graph -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/DRYness_{repo_name}_data.svg", title: "DRYness Percentage Graph" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/DRYness_{repo_name}_data.svg", title: "DRYness Percentage Graph", modal_description: "This graph measures the 'Don't Repeat Yourself' (DRY) principle compliance in the repository. It calculates the percentage of duplicate versus unique code, indicating the overall efficiency of the codebase." %}}
     <!-- Cost Estimate Chart -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/estimated_project_costs_{repo_name}_data.svg", title: "Estimated Costs" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/estimated_project_costs_{repo_name}_data.svg", title: "Estimated Costs", modal_description: "This graph provides an estimation of the developement cost and corresponding value of the project." %}}
      <!-- Time Estimate Chart -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/estimated_project_time_{repo_name}_data.svg", title: "Estimated Time" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/estimated_project_time_{repo_name}_data.svg", title: "Estimated Time", modal_description: "This graph estimates the time required to develop the project." %}}
     <!-- Contributor Estimate Chart -->
-    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/estimated_people_contributing_{repo_name}_data.svg", title: "Estimated Individual Contributors" %}}
+    {{% render "graph-section" baseurl: site.baseurl, path: "/{repo_owner}/{repo_name}/estimated_people_contributing_{repo_name}_data.svg", title: "Estimated Individual Contributors", modal_description: "This graph visualizes the number of contributors required to complete a project, based on current scope." %}}
   </div>
 </div>