Moving back the metrics to under the main graph and adding paid breakdown graph to dropdown based on feedback

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

ghost/admin/app/components/dashboard/dashboard-v5.hbs

@@ -5,23 +5,13 @@
         {{#if this.areMembersEnabled}}
             <section class="gh-dashboard5-section gh-dashboard5-anchor">
                 <article class="gh-dashboard5-box">
-                    <Dashboard::V5::ChartAnchor @days={{this.days}} />
-                </article>
-                <div id="gh-dashboard5-anchor-selection" class="prototype-selection">
-                    <PowerSelect
+                    <Dashboard::V5::ChartAnchor
+                        @days={{this.days}}
+                        @onDaysChange={{this.onDaysChange}}
+                        @daysOptions={{this.daysOptions}}
                         @selected={{this.selectedDaysOption}}
-                        @options={{this.daysOptions}}
-                        @searchEnabled={{false}}
-                        @onChange={{this.onDaysChange}}
-                        @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>
+                    />
+                </article>
             </section>
 
             {{!--
@@ -95,6 +85,35 @@
                 </article>
             </section>
         </section>
+
+        <div class="gh-main-section gh-members-help">
+            <div class="gh-main-section-block">
+                <div class="gh-main-section-content grey">
+                    <a href="https://ghost.org/resources/build-audience-subscriber-signups/" target="_blank" class="gh-members-help-card" rel="noopener noreferrer">
+                        <div class="gh-members-help-content">
+                            <div class="thumbnail" style="background-image: url(assets/img/marketing/members-1.jpg);"></div>
+                            <div class="text">
+                                <h3>Building your audience with subscriber signups</h3>
+                                <p>Learn how to turn anonymous visitors into logged-in members with memberships in Ghost.</p>
+                                <div class="gh-btn gh-btn-link">Start building &rarr;</div>
+                            </div>
+                        </div>
+                    </a>
+
+                    <a href="https://ghost.org/resources/first-100-email-subscribers/" target="_blank" class="gh-members-help-card" rel="noopener noreferrer">
+                        <div class="gh-members-help-content">
+                            <div class="thumbnail right" style="background-image: url(assets/img/marketing/members-2.jpg);"></div>
+                            <div class="text">
+                                <h3>Get your first 100 email subscribers</h3>
+                                <p>Starting from zero? Use this guide to find your founding audience members.</p>
+                                <div class="gh-btn gh-btn-link">Become an expert &rarr;</div>
+                            </div>
+                        </div>
+                    </a>
+
+                </div>
+            </div>
+        </div>
         
         {{!--
         <Dashboard::V5::Resources::WhatsNew />

ghost/admin/app/components/dashboard/v5/chart-anchor.hbs

@@ -1,3 +1,17 @@
+<div class="gh-dashboard5-chart">
+    {{#if this.loading}}
+        <div class="gh-dashboard5-chart-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
+    {{else}}
+        <div class="gh-dashboard5-chart-container">
+            <EmberChart
+                @type={{this.chartType}}
+                @data={{this.chartData}}
+                @options={{this.chartOptions}}
+                @height={{this.chartHeight}} />
+        </div>
+    {{/if}}
+</div>
+
 <div class="gh-dashboard5-stats{{unless this.hasPaidTiers ' is-solo'}}" {{did-insert this.loadCharts}}>
     <button class="gh-dashboard5-stats-button {{if this.chartShowingTotal 'is-selected'}}" type="button" {{on "click" (fn this.changeChartDisplay "total")}}>
         <Dashboard::v5::parts::ChartMetric
@@ -16,14 +30,6 @@
                 @percentage={{this.paidMembersTrend}}
                 @large={{true}} />
         </button>
-        <button class="gh-dashboard5-stats-button {{if this.chartShowingBreakdown 'is-selected'}}" type="button" {{on "click" (fn this.changeChartDisplay "breakdown")}}>
-            <Dashboard::v5::parts::ChartMetric
-                @label="Paid breakdown"
-                @value={{format-number this.paidBreakdown}}
-                @trends={{this.hasTrends}}
-                @percentage={{this.paidBreakdownTrend}}
-                @large={{true}} />
-        </button>
         <button class="gh-dashboard5-stats-button {{if this.chartShowingMonthly 'is-selected'}}" type="button" {{on "click" (fn this.changeChartDisplay "monthly")}}>
             <Dashboard::v5::parts::ChartMetric
                 @label="MRR"
@@ -35,16 +41,37 @@
     {{/if}}
 </div>
 
-<div class="gh-dashboard5-chart">
-    {{#if this.loading}}
-        <div class="gh-dashboard5-chart-loading" style={{html-safe (concat "height: " this.chartHeight "px;")}}/>
-    {{else}}
-        <div class="gh-dashboard5-chart-container">
-            <EmberChart
-                @type={{this.chartType}}
-                @data={{this.chartData}}
-                @options={{this.chartOptions}}
-                @height={{this.chartHeight}} />
+<div class="gh-dashboard5-selections">
+    {{#if this.chartShowingPaid}}
+        <div class="prototype-selection">
+            <PowerSelect
+                @selected={{this.selectedPaidOption}}
+                @options={{this.paidOptions}}
+                @searchEnabled={{false}}
+                @onChange={{this.paidOptionsChange}}
+                @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>
     {{/if}}
-</div>
+    <div class="prototype-selection">
+        <PowerSelect
+            @selected={{@selected}}
+            @options={{@daysOptions}}
+            @searchEnabled={{false}}
+            @onChange={{@onDaysChange}}
+            @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>
+</div>

ghost/admin/app/components/dashboard/v5/chart-anchor.js

@@ -6,9 +6,20 @@ import {tracked} from '@glimmer/tracking';
 
 const DATE_FORMAT = 'D MMM YYYY';
 
+const PAID_OPTIONS = [{
+    name: 'Paid total',
+    value: 'paid'
+}, {
+    name: 'Paid breakdown',
+    value: 'breakdown'
+}];
+
 export default class ChartAnchor extends Component {
     @service dashboardStats;
     @tracked chartDisplay = 'total';
+    @tracked paidOptionSelected = 'paid';
+
+    paidOptions = PAID_OPTIONS;
 
     @action
     loadCharts() {
@@ -22,12 +33,22 @@ export default class ChartAnchor extends Component {
         this.loadCharts();
     }
 
+    @action 
+    paidOptionsChange(selected) {
+        this.paidOptionSelected = selected.value;
+        this.changeChartDisplay(selected.value);
+    }
+
+    get selectedPaidOption() {
+        return this.paidOptions.find(d => d.value === this.paidOptionSelected);
+    }
+
     get chartShowingTotal() {
         return (this.chartDisplay === 'total');
     }
 
     get chartShowingPaid() {
-        return (this.chartDisplay === 'paid');
+        return (this.chartDisplay === 'paid' || this.chartDisplay === 'breakdown');
     }
 
     get chartShowingBreakdown() {
@@ -392,7 +413,7 @@ export default class ChartAnchor extends Component {
     }
 
     get chartHeight() {
-        return 300;
+        return 325;
     }
 
     calculatePercentage(from, to) {

ghost/admin/app/components/dashboard/v5/recent-activity.hbs

@@ -37,7 +37,6 @@
                     {{/each}}
                 {{else}}
                     <div class="gh-dashboard5-list-empty" data-test-no-member-activities>
-                        {{svg-jar "no-data-list"}}
                         <p>No activity yet.</p>
                     </div>
                 {{/if}}

ghost/admin/app/components/dashboard/v5/recent-posts.hbs

@@ -9,14 +9,13 @@
         {{#each this.posts as |post|}}
             <div class="gh-dashboard5-list-item">
                 <LinkTo class="gh-dashboard5-list-post permalink" @route="editor.edit" @models={{array post.displayName post.id}}>
-                    {{post.title}}
+                   {{post.title}}
                 </LinkTo>
                 <span>231</span>
                 <span>65%</span>
             </div>
         {{else}}
             <div class="gh-dashboard5-list-empty">
-                {{svg-jar "no-data-list"}}
                 <p>No published posts yet.</p>
             </div>
         {{/each}}

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

@@ -989,11 +989,6 @@ Dashboard v5 Prototype */
     gap: 10px;
 }
 
-.prototype-selection {
-    display: flex;
-    justify-content: flex-end;
-}
-
 .prototype-paid-mix-dropdown {
     position: absolute;
     right: 0px;
@@ -1168,12 +1163,6 @@ Dashboard v5 Misc */
     right: 20px;
 }
 
-.gh-dashboard5-section .prototype-selection {
-    position: absolute;
-    top: 10px;
-    right: 0;
-}
-
 .gh-dashboard5-section .ember-power-select-selected-item {
     font-size: 1.2rem;
     text-transform: uppercase;
@@ -1227,28 +1216,6 @@ Dashboard v5 Misc */
     visibility: hidden;
 }
 
-#gh-dashboard5-anchor-selection {
-    opacity: 1;
-}
-
-#gh-dashboard5-anchor-selection.is-hide {
-    opacity: 0;
-}
-
-#gh-dashboard5-anchor-globaldate {
-    display: none;
-    position: absolute;
-    top: 28px;
-    right: 31px;
-    color: #394047;
-    font-size: 1.1rem;
-    text-transform: uppercase;
-    font-weight: 500;
-    letter-spacing: .2px;
-    margin: 0 0 8px;
-    padding: 0;
-}
-
 #gh-dashboard5-anchor-globaldate.is-show {
     display: block;
 }
@@ -1428,6 +1395,10 @@ Dashboard v5 Layout */
     margin-top: -24px;
 }
 
+.gh-dashboard5 .gh-members-help {
+    margin-top: 0;
+}
+
 
 /* --------------------------------- 
 Dashboard v5 Chart */
@@ -1558,7 +1529,7 @@ Dashboard v5 Metric */
 }
 
 .gh-dashboard5-metric.is-large .gh-dashboard5-metric-value {
-    font-size: 3.4rem;
+    font-size: 3.6rem;
     font-weight: 600;
     margin-bottom: 0;
 }
@@ -1685,22 +1656,15 @@ Dashboard v5 Section Anchor */
 }
 
 .gh-dashboard5-anchor .gh-dashboard5-box {
-    align-items: stretch;
-    padding-top: 8px;
-    padding-bottom: 12px;
-    height: 431px;
-}
-
-.gh-dashboard5-anchor.is-top .gh-dashboard5-box {
-   padding-top: 0;
+    padding: 24px 24px 8px;
 }
 
 .gh-dashboard5-anchor .gh-dashboard5-stats {
     display: flex;
     flex-direction: row;
     width: calc(100% + 48px);
-    padding: 0 8px 8px;
-    margin: 0 -24px 0;
+    padding: 0 8px;
+    margin: 12px -24px 0;
 }
 
 .gh-dashboard5-anchor .gh-dashboard5-title {
@@ -1717,7 +1681,7 @@ Dashboard v5 Section Anchor */
     cursor: pointer;
     position: relative;
     flex: 1;
-    padding: 16px 16px 20px 12px;
+    padding: 20px 16px 24px 12px;
     margin: 2px 4px 2px 2px;
     text-align: left;
     background: transparent;
@@ -1758,6 +1722,7 @@ Dashboard v5 Section Anchor */
     flex-direction: column;
     margin-left: -16px;
     margin-right: -16px;
+    margin-top: 12px;
 }
 
 .gh-dashboard5-anchor .gh-dashboard5-chart-ticks {
@@ -1775,9 +1740,12 @@ Dashboard v5 Section Anchor */
     opacity: 1;
 }
 
-.gh-dashboard5-anchor .prototype-selection {
+.gh-dashboard5-anchor .gh-dashboard5-selections {
+    position: absolute;
     top: 16px;
     right: 8px;
+    display: flex;
+    flex-direction: row;
 }
 
 
@@ -1898,7 +1866,9 @@ Dashboard v5 Section Engagement */
 }
 
 .gh-dashboard5-engagement .prototype-selection {
+    position: absolute;
     top: 16px;
+    right: 8px;
 }
 
 .gh-dashboard5-engagement .gh-dashboard5-insert {
@@ -1979,11 +1949,18 @@ Dashboard v5 Section Posts */
     display: none;
 }
 
-.gh-dashboard5-posts .gh-dashboard5-list-item a {
+.gh-dashboard5-posts .gh-dashboard5-list-item a > span{
     width: 80%;
-    height: 57px;
     overflow: hidden;
     color: var(--darkgrey);
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.gh-dashboard5-posts .gh-dashboard5-list-item a > span {
+    display: inline-block;
+    height: 57px;
 }