Toggle stacked download graph (#5010)

Author: billy1624

app/components/download-graph.hbs

@@ -10,6 +10,7 @@
     <canvas
       {{did-insert this.createChart}}
       {{did-update this.updateChart @data}}
+      {{did-update this.updateStacked @stacked}}
       {{will-destroy this.destroyChart}}
     />
   {{else}}

app/components/download-graph.js

@@ -59,6 +59,20 @@ export default class DownloadGraph extends Component {
     }
   }
 
+  @action updateStacked() {
+    let { chart, data } = this;
+
+    if (chart) {
+      data.dataset = data.datasets.map(d => {
+        d.fill = this.args.stacked ? 'origin' : false;
+        chart.options.scales.y.stacked = this.args.stacked;
+        return d;
+      });
+      chart.data = data;
+      chart.update();
+    }
+  }
+
   @action destroyChart() {
     this.chart?.destroy();
   }

app/controllers/crate/version.js

@@ -1,5 +1,7 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
 import { task } from 'ember-concurrency';
 import { alias } from 'macro-decorators';
@@ -11,6 +13,16 @@ export default class CrateVersionController extends Controller {
     return this.requestedVersion ? this.currentVersion : this.crate;
   }
 
+  @tracked stackedGraph = true;
+
+  @action setStackedGraph() {
+    this.stackedGraph = true;
+  }
+
+  @action setUnstackedGraph() {
+    this.stackedGraph = false;
+  }
+
   @alias('downloadsContext.version_downloads.content') downloads;
   @alias('model.crate') crate;
   @alias('model.requestedVersion') requestedVersion;

app/styles/crate/version.module.css

@@ -125,9 +125,37 @@
 
     h4 {
         color: var(--main-color-light);
+        float: left;
     }
 
     @media only percy {
         display: none;
     }
 }
+
+.graph-data {
+    clear: both;
+}
+
+.toggle-stacked {
+    float: right;
+    margin-top: calc(1.33em - 10px);
+    margin-bottom: calc(1.33em - 10px);
+
+    .trigger {
+        background-color: var(--main-bg-dark);
+        font-size: 85%;
+        padding: 10px;
+        border: none;
+        border-radius: 5px;
+    
+        .trigger-label {
+            min-width: 65px;
+        }
+    }
+    
+    .dropdown-button {
+        background: none;
+        border: 0;
+    }
+}

app/templates/crate/version.hbs

@@ -79,7 +79,41 @@
     </div>
     <div local-class='graph'>
       <h4>Downloads over the last 90 days</h4>
-      <DownloadGraph @data={{this.downloads}} local-class="graph-data" />
+      <div local-class="toggle-stacked">
+        <span local-class="toggle-stacked-label">Display as </span>
+        <Dropdown as |dd|>
+          <dd.Trigger local-class="trigger">
+            <span local-class="trigger-label">
+              {{#if this.stackedGraph}}
+                Stacked
+              {{else}}
+                Unstacked
+              {{/if}}
+            </span>
+          </dd.Trigger>
+          <dd.Menu as |menu|>
+            <menu.Item>
+              <button
+                type="button"
+                local-class="dropdown-button"
+                {{on "click" this.setStackedGraph}}
+              >
+                Stacked
+              </button>
+            </menu.Item>
+            <menu.Item>
+              <button
+                type="button"
+                local-class="dropdown-button"
+                {{on "click" this.setUnstackedGraph}}
+              >
+                Unstacked
+              </button>
+            </menu.Item>
+          </dd.Menu>
+        </Dropdown>
+      </div>
+      <DownloadGraph @data={{this.downloads}} @stacked={{this.stackedGraph}} local-class="graph-data" />
     </div>
   </div>
 {{/if}}