Added toggle between cadence and tiers for the paid mix graph

refs https://github.com/TryGhost/Team/issues/1442

ghost/admin/app/components/dashboard/v5/chart-paid-mix.hbs

@@ -1,4 +1,22 @@
-<h4>Paid mix ({{this.mode}})</h4>
+
+<div class="prototype-paid-mix-dropdown">
+    <PowerSelect
+        @selected={{this.selectedModeOption}}
+        @options={{this.modeOptions}}
+        @searchEnabled={{false}}
+        @onChange={{this.onSwitchMode}}
+        @triggerComponent="gh-power-select/trigger"
+        @triggerClass="gh-contentfilter-menu-trigger"
+        @dropdownClass="gh-contentfilter-menu-dropdown"
+        @matchTriggerWidth={{false}}
+        as |option|
+    >
+        {{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
+    </PowerSelect>
+</div>
+
+<h4>Paid mix</h4>
+
 {{#if this.loading}}
     <div class="prototype-placeholder" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
 {{else}}

ghost/admin/app/components/dashboard/v5/chart-paid-mix.js

@@ -1,6 +1,15 @@
 import Component from '@glimmer/component';
 import {action} from '@ember/object';
 import {inject as service} from '@ember/service';
+import {tracked} from '@glimmer/tracking';
+
+const MODE_OPTIONS = [{
+    name: 'Cadence',
+    value: 'cadence'
+}, {
+    name: 'Tiers',
+    value: 'tiers'
+}];
 
 export default class ChartPaidMix extends Component {
     @service dashboardStats;
@@ -24,16 +33,29 @@ export default class ChartPaidMix extends Component {
         }
     }
 
+    @tracked mode = 'cadence';
+    modeOptions = MODE_OPTIONS;
+
+    get selectedModeOption() {
+        return this.modeOptions.find(option => option.value === this.mode);
+    }
+
+    @action 
+    onSwitchMode(selected) {
+        this.mode = selected.value;
+
+        if (this.loading) {
+            // We don't have the data yet for the newly selected mode
+            this.loadCharts();
+        }
+    }
+
     get loading() {
         if (this.mode === 'cadence') {
             return this.dashboardStats.paidMembersByCadence === null;
         }
         return this.dashboardStats.paidMembersByTier === null;
     }
-
-    get mode() {
-        return 'cadence';
-    }
     
     get chartType() {
         return 'pie';
@@ -51,7 +73,19 @@ export default class ChartPaidMix extends Component {
                 }]
             };
         }
-        throw new Error('Not yet supported');
+
+        const labels = this.dashboardStats.paidMembersByTier.map(stat => stat.tier.name);
+        const data = this.dashboardStats.paidMembersByTier.map(stat => stat.members);
+
+        return {
+            labels,
+            datasets: [{
+                data,
+                fill: false,
+                backgroundColor: ['#14b8ff'],
+                tension: 0.1
+            }]
+        };
     }
 
     get chartOptions() {

ghost/admin/app/styles/layouts/dashboard.css

@@ -1093,6 +1093,12 @@ a.gh-dashboard-container {
     justify-content: flex-end;
 }
 
+.prototype-paid-mix-dropdown {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+}
+
 .prototype-counts {
     display: flex;
     flex-direction: row;
@@ -1125,6 +1131,7 @@ a.gh-dashboard-container {
 .prototype-box {
     border: 1px solid #ebeef0;
     padding: 28px;
+    position: relative;
 }
 
 .prototype-box .number {