Updated attribution chart on post analytics page

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

- added dropdown for paid vs signups selection on attribution chart

ghost/admin/app/controllers/posts/analytics.js

@@ -8,6 +8,14 @@ import {tracked} from '@glimmer/tracking';
  * @typedef {import('../../services/dashboard-stats').SourceAttributionCount} SourceAttributionCount
 */
 
+const DISPLAY_OPTIONS = [{
+    name: 'Free signups',
+    value: 'signups'
+}, {
+    name: 'Paid conversions',
+    value: 'paid'
+}];
+
 export default class AnalyticsController extends Controller {
     @service ajax;
     @service ghostPaths;
@@ -19,11 +27,21 @@ export default class AnalyticsController extends Controller {
     @tracked sources = null;
     @tracked links = null;
     @tracked sortColumn = 'signups';
+    displayOptions = DISPLAY_OPTIONS;
 
     get post() {
         return this.model;
     }
 
+    get selectedDisplayOption() {
+        return this.displayOptions.find(d => d.value === this.sortColumn) ?? this.displayOptions[0];
+    }
+
+    @action
+    onDisplayChange(selected) {
+        this.sortColumn = selected.value;
+    }
+
     @action
     setSortColumn(column) {
         this.sortColumn = column;

ghost/admin/app/templates/posts/analytics.hbs

@@ -110,8 +110,25 @@
                 </h4>
                 <div class="gh-post-analytics-box column">
                     <div class="gh-attribution-box">
+                        <div class="gh-dashboard-select" style="top:40px;right:24px">
+                            <PowerSelect
+                                @selected={{this.selectedDisplayOption}}
+                                @options={{this.displayOptions}}
+                                @searchEnabled={{false}}
+                                @onChange={{this.onDisplayChange}}
+                                @triggerComponent={{component "gh-power-select/trigger"}}
+                                @triggerClass="gh-contentfilter-menu-trigger"
+                                @dropdownClass="gh-contentfilter-menu-dropdown is-narrow"
+                                @matchTriggerWidth={{false}}
+                                @horizontalPosition="right"
+
+                                as |option|
+                            >
+                                {{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
+                            </PowerSelect>
+                        </div>
                         <div class="gh-attribution-table-column">
-                            <MemberAttribution::SourceAttributionTable 
+                            <MemberAttribution::SourceAttributionTable
                                 @sources={{this.sources}}
                                 @sortColumn={{this.sortColumn}}
                                 @setSortColumn={{this.setSortColumn}}