Reports: Add Graph Toggles Component

natalialuzuriaga commented 6 months ago

Reports: Add Graph Toggles

Problem

For some of our data visualizations, we generate graphs with data that is timeboxed in intervals such as 1 month, 6 month, 1 year, etc. We would like to add toggle buttons to our reports so users can toggle between different timeframe graph views.

Solution

Created a new component / template template called graph-toggle.liquid that takes in 3 parameters:
1. graphArray - array of graph paths
2. optionsArray - time label of graph, corresponds to graphs in graphArray
3. name - metadata needed to differentiate graphs from other graph toggles
Created a function called showGraph that displays selected graph and hides rest of graphs. Button styling is adjusted based on user selection.

Result

Test Plan

In metrics_data.md, added to the bottom of graph-container div at line 118:

    <!--- Time Toggle Testing -->
    <h3>Commits over Time</h3>
    <div class="timeToggle">
      {% assign optionsArray = '1 Month, 6 Month, 1 Year' | split: ',' %}
      {% assign graphsArray = '/assets/img/graphs/DSACMS/metrics/issue_gauge_metrics_data.svg, /assets/img/graphs/DSACMS/metrics/commit_sparklines_metrics_data.svg, /assets/img/graphs/DSACMS/metrics/issue_gauge_metrics_data.svg' | split: ',' %}
      {% render "graph-toggle", baseurl: site.baseurl, name: "commit" options: optionsArray, graphs: graphsArray %}
  </div>
  <!--- Time Toggle Testing -->
    <h3>PRs over Time</h3>
    <div class="timeToggle">
      {% assign optionsArray = '1 Month, 6 Month, 1 Year' | split: ',' %}
      {% assign graphsArray = '/assets/img/graphs/DSACMS/metrics/issue_gauge_metrics_data.svg, /assets/img/graphs/DSACMS/metrics/commit_sparklines_metrics_data.svg, /assets/img/graphs/DSACMS/metrics/issue_gauge_metrics_data.svg' | split: ',' %}
      {% render "graph-toggle", baseurl: site.baseurl, name: "pull-request" options: optionsArray, graphs: graphsArray %}
  </div>

(This would go into the report templates^)

natalialuzuriaga commented 6 months ago

Alignment needed with the backend:

Which graphs are using the toggles? I couldn't find any 1 month, 6 month graphs in the _graph directory. I'll update the template accordingly once I know.

Thoughts on the graph configuration of the toggles below? If it's too complex, I could potentially get rid of the optionsArray by trying to generate the labels on the frontend using the graph names since the graph names would include the time label (ex: graph_name_1_month)

<h3>Commits over Time</h3>
<div class="timeToggle">
  {% assign optionsArray = '1 Month, 6 Month, 1 Year' | split: ',' %}
  {% assign graphsArray = '/assets/img/graphs/DSACMS/metrics/issue_gauge_metrics_data.svg, /assets/img/graphs/DSACMS/metrics/commit_sparklines_metrics_data.svg, /assets/img/graphs/DSACMS/metrics/issue_gauge_metrics_data.svg' | split: ',' %}
  {% render "graph-toggle", baseurl: site.baseurl, name: "commit" options: optionsArray, graphs: graphsArray %}
</div>

Styling notes for myself:

All graphs that use the toggling functionality should have the same width
Will continue to play around with toggle styling. Doesn't match the figma but it works for now!

IsaacMilarky commented 6 months ago

The graphs that need toggles haven't been merged into main yet so they haven't been generating. We should do a release of dev into main to make things more consistent for development in the future.

As for the graph configuration I think it looks great to me. It makes sense to do it how you set it up IMO.

Overall, we should merge dev into main and make sure that all the toggle graphs are being generated correctly before implementing and merging this PR. Looks great overall!

natalialuzuriaga commented 6 months ago

Oooo ok gotcha, we'll hold off on merging this PR until then. In the meantime, I'll continue tinkering with the css styling

natalialuzuriaga commented 6 months ago

Alright pulled all the changes and it works!! LGTM 🚢

natalialuzuriaga commented 6 months ago

@IsaacMilarky Minor but is the legend of those graphs correct? Should it be contributors or it issues?

IsaacMilarky commented 6 months ago

@IsaacMilarky Minor but is the legend of those graphs correct? Should it be contributors or it issues?

Oh good catch, the legend is incorrect and should be contributors. I will fix that

DSACMS / metrics