Better faked graphs and various tweaks for Dashboard 5.0 prototype

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

- added in lots of demo graphs using EmberChart
- renamed some files in v5 folder for better conventions
- put each graph for new dashboard into separate components

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

@@ -1,7 +1,7 @@
 <section>
     {{#if this.areMembersEnabled}}
         <section class="prototype-section">
-            <Dashboard::V5::MembersCounts />
+            <Dashboard::V5::ChartMembersCounts />
         </section>
 
         <section class="prototype-section">
@@ -10,35 +10,43 @@
             </article>
 
             <article class="gh-dashboard-box">
-                Total members graph
+                <Dashboard::V5::ChartTotalMembers />
             </article>
 
             {{#if this.hasPaidTiers}}
-                <article class="gh-dashboard-box">
+                <div class="prototype-section">
-                    MRR graph
+                    <div class="prototype-counts">
+                        <article class="prototype-box">
+                            <Dashboard::V5::ChartMonthlyRevenue />
                         </article>
 
-                <article class="gh-dashboard-box">
+                        <article class="prototype-box">
-                    Total paid graph
+                            <Dashboard::V5::ChartTotalPaid />
+                        </article>
+                    </div>
+                </div>
+
+                <div class="prototype-section">
+                    <div class="prototype-counts">
+                        <article class="prototype-box">
+                            <Dashboard::V5::ChartPaidMembers />
                         </article>
 
-                <article class="gh-dashboard-box">
+                        <article class="prototype-box">
-                    Paid members graph (new, canceled)
+                            <Dashboard::V5::ChartPaidMix />
-                </article>
-
-                <article class="gh-dashboard-box">
-                    Paid mix with cadence or tiers segmented control
                         </article>
+                    </div>
+                </div>
             {{/if}}
         </section>
         <section class="prototype-section">
-            <Dashboard::V5::MembersEngagement />
+            <Dashboard::V5::ChartEngagement />
         </section>
     {{/if}}
 
     {{#if this.areNewslettersEnabled}}
         <section class="prototype-section">
-            <Dashboard::V5::MembersEmail />
+            <Dashboard::V5::ChartEmailOpenRate />
         </section>
     {{/if}}
 
@@ -55,6 +63,13 @@
             Activity feed
         </article>
     </section>
+
+    <section class="prototype-section">
+        <h2>Resources</h2>
+        <article class="gh-dashboard-box">
+            <Dashboard::V5::ResourceGeneral />
+        </article>
+    </section>
 </section>
 
 <div class="gh-main-section prototype-panel">

ghost/admin/app/components/dashboard/v5/chart-email-open-rate.hbs

@@ -0,0 +1,25 @@
+<h2>Email</h2>
+
+<div class="prototype-counts">
+    <div class="prototype-counts col">
+        <div class="prototype-box">
+            <div class="number">{{this.dataSubscribers}}</div>
+            <div>Newsletter subscribers</div>
+        </div>
+
+        <div class="prototype-box">
+            <div class="number">{{this.dataEmailsSent}}</div>
+            <div>Emails sent in the past 30 days</div>
+        </div>
+    </div>
+
+    <div class="prototype-box">
+        <h4>Email open rate</h4>
+        <EmberChart
+            @type={{this.chartType}}
+            @data={{this.chartData}}
+            @options={{this.chartOptions}}
+            @height={{this.chartHeight}} />
+    </div>
+</div>
+

ghost/admin/app/components/dashboard/v5/chart-email-open-rate.js

@@ -0,0 +1,39 @@
+import Component from '@glimmer/component';
+
+export default class ChartEmailOpenRate extends Component {
+    get dataSubscribers() {
+        return '9,250';
+    }
+
+    get dataEmailsSent() {
+        return '40.3k';
+    }
+
+    get chartType() {
+        return 'bar';
+    }
+
+    get chartData() {
+        return {
+            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
+            datasets: [{
+                data: [65, 59, 80, 81, 56, 55, 40],
+                fill: false,
+                backgroundColor: '#14b8ff',
+                tension: 0.1
+            }]
+        };
+    }
+
+    get chartOptions() {
+        return {
+            legend: {
+                display: false
+            }
+        };
+    }
+
+    get chartHeight() {
+        return 150;
+    }
+}

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

@@ -2,12 +2,12 @@
 
 <div class="prototype-counts">
     <div class="prototype-box">
-        <div class="number">67%</div>
+        <div class="number">{{this.data30Days}}</div>
         <div>Engaged in past 30 days</div>
     </div>
 
     <div class="prototype-box">
-        <div class="number">31%</div>
+        <div class="number">{{this.data7Days}}</div>
         <div>Engaged in past 7 days</div>
     </div>
 </div>

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

@@ -0,0 +1,11 @@
+import Component from '@glimmer/component';
+
+export default class ChartEngagement extends Component {
+    get data30Days() {
+        return '67%';
+    }
+
+    get data7Days() {
+        return '31%';
+    }
+}

ghost/admin/app/components/dashboard/v5/chart-members-counts.hbs

@@ -1,16 +1,16 @@
 <div class="prototype-counts">
     <div class="prototype-box">
-        <div class="number">10.000</div>
+        <div class="number">{{this.dataTotalMembers}}</div>
         <div>Total members</div>
     </div>
 
     <div class="prototype-box">
-        <div class="number">1.500</div>
+        <div class="number">{{this.dataPaidMembers}}</div>
         <div>Paid members</div>
     </div>
 
     <div class="prototype-box">
-        <div class="number">8.500</div>
+        <div class="number">{{this.dataFreeMembers}}</div>
         <div>Free members</div>
     </div>
 </div>

ghost/admin/app/components/dashboard/v5/chart-members-counts.js

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+
+export default class ChartMembersCounts extends Component {
+    get dataTotalMembers() {
+        return '10,000';
+    }
+
+    get dataPaidMembers() {
+        return '1,500';
+    }
+
+    get dataFreeMembers() {
+        return '8,500';
+    }
+}

ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.hbs

@@ -0,0 +1,6 @@
+<h4>MRR</h4>
+<EmberChart
+    @type={{this.chartType}}
+    @data={{this.chartData}}
+    @options={{this.chartOptions}}
+    @height={{this.chartHeight}} />

ghost/admin/app/components/dashboard/v5/chart-monthly-revenue.js

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+
+export default class ChartMonthlyRevenue extends Component {
+    get chartType() {
+        return 'line';
+    }
+
+    get chartData() {
+        return {
+            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
+            datasets: [{
+                data: [65, 59, 80, 81, 56, 55, 40],
+                fill: false,
+                borderColor: '#14b8ff',
+                tension: 0.1
+            }]
+        };
+    }
+
+    get chartOptions() {
+        return {
+            legend: {
+                display: false
+            }
+        };
+    }
+
+    get chartHeight() {
+        return 150;
+    }
+}

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

@@ -0,0 +1,6 @@
+<h4>Paid members</h4>
+<EmberChart
+    @type={{this.chartType}}
+    @data={{this.chartData}}
+    @options={{this.chartOptions}}
+    @height={{this.chartHeight}} />

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

@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+
+export default class ChartPaidMembers extends Component {
+    get chartType() {
+        return 'bar';
+    }
+
+    get chartData() {
+        return {
+            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
+            datasets: [
+                {
+                    data: [65, 59, 80, 81, 56, 55, 40],
+                    fill: false,
+                    backgroundColor: '#14b8ff',
+                    tension: 0.1
+                },{
+                    data: [-65, -59, -80, -81, -56, -55, -40],
+                    fill: false,
+                    backgroundColor: '#E16262',
+                    tension: 0.1
+                }]
+        };
+    }
+
+    get chartOptions() {
+        return {
+            legend: {
+                display: false
+            }
+        };
+    }
+
+    get chartHeight() {
+        return 150;
+    }
+}

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

@@ -0,0 +1,6 @@
+<h4>Paid mix</h4>
+<EmberChart
+    @type={{this.chartType}}
+    @data={{this.chartData}}
+    @options={{this.chartOptions}}
+    @height={{this.chartHeight}} />

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

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+
+export default class ChartPaidMix extends Component {
+    get chartType() {
+        return 'pie';
+    }
+
+    get chartData() {
+        return {
+            labels: ['Monthly', 'Annual'],
+            datasets: [{
+                data: [20, 80],
+                fill: false,
+                backgroundColor: ['#14b8ff'],
+                tension: 0.1
+            }]
+        };
+    }
+
+    get chartOptions() {
+        return {
+            legend: {
+                display: false
+            }
+        };
+    }
+
+    get chartHeight() {
+        return 150;
+    }
+}

ghost/admin/app/components/dashboard/v5/chart-total-members.hbs

@@ -0,0 +1,6 @@
+<h4>Total members</h4>
+<EmberChart
+    @type={{this.chartType}}
+    @data={{this.chartData}}
+    @options={{this.chartOptions}}
+    @height={{this.chartHeight}} />

ghost/admin/app/components/dashboard/v5/chart-total-members.js

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+
+export default class ChartTotalMembers extends Component {
+    get chartType() {
+        return 'line';
+    }
+
+    get chartData() {
+        return {
+            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
+            datasets: [{
+                data: [65, 59, 80, 81, 56, 55, 40],
+                fill: false,
+                borderColor: '#14b8ff',
+                tension: 0.1
+            }]
+        };
+    }
+
+    get chartOptions() {
+        return {
+            legend: {
+                display: false
+            }
+        };
+    }
+
+    get chartHeight() {
+        return 300;
+    }
+}

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

@@ -0,0 +1,6 @@
+<h4>Total paid</h4>
+<EmberChart
+    @type={{this.chartType}}
+    @data={{this.chartData}}
+    @options={{this.chartOptions}}
+    @height={{this.chartHeight}} />

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

@@ -0,0 +1,31 @@
+import Component from '@glimmer/component';
+
+export default class ChartTotalPaid extends Component {
+    get chartType() {
+        return 'line';
+    }
+
+    get chartData() {
+        return {
+            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
+            datasets: [{
+                data: [65, 59, 80, 81, 56, 55, 40],
+                fill: false,
+                borderColor: '#14b8ff',
+                tension: 0.1
+            }]
+        };
+    }
+
+    get chartOptions() {
+        return {
+            legend: {
+                display: false
+            }
+        };
+    }
+
+    get chartHeight() {
+        return 150;
+    }
+}

ghost/admin/app/components/dashboard/v5/members-counts.js

@@ -1,7 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class MembersCounts extends Component {
-    get placeholderGetter() {
-        return '9.150';
-    }
-}

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

@@ -1,20 +0,0 @@
-<h2>Email</h2>
-
-<div class="prototype-counts">
-    <div class="prototype-counts col">
-        <div class="prototype-box">
-            <div class="number">{{this.subscribersCount}}</div>
-            <div>Newsletter Subscribers</div>
-        </div>
-
-        <div class="prototype-box">
-            <div class="number">40.3k</div>
-            <div>Emails sent in the past 30 days</div>
-        </div>
-    </div>
-
-    <div class="prototype-box">
-        Email open rate graph
-    </div>
-</div>
-

ghost/admin/app/components/dashboard/v5/members-email.js

@@ -1,7 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class MembersEmail extends Component {
-    get subscribersCount() {
-        return '9.150';
-    }
-}

ghost/admin/app/components/dashboard/v5/members-engagement.js

@@ -1,7 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class MembersEngagement extends Component {
-    get placeholderGetter() {
-        return '9.150';
-    }
-}

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

@@ -0,0 +1 @@
+Links to resource blog