Dashboard chart refinements

ghost/admin/app/components/gh-members-chart.hbs

@@ -1,4 +1,4 @@
-<div class="gh-members-chart-box {{if this.isSmall "small"}}" {{did-insert (perform this.fetchStatsTask)}}>    
+<div class="gh-dashboard-chart-box {{if this.isSmall "small"}}" {{did-insert (perform this.fetchStatsTask)}}>    
     {{#if (not this.stats)}}
         <GhLoadingSpinner />
     {{else}}

ghost/admin/app/components/gh-members-chart.js

@@ -72,10 +72,6 @@ export default Component.extend({
     },
 
     didReceiveAttrs() {
-        if (this._lastNightShift !== undefined && this.nightShift !== this._lastNightShift) {
-            this.setChartOptions();
-        }
-
         if (this.chartStats) {
             const {options, data, title, stats} = this.chartStats;
 
@@ -84,6 +80,10 @@ export default Component.extend({
             this.setChartOptions(options);
             this.setChartData(data);
         }
+
+        if (this._lastNightShift !== undefined && this.nightShift !== this._lastNightShift) {
+            this.setChartOptions();
+        }
         this._lastNightShift = this.nightShift;
     },
 
@@ -140,7 +140,7 @@ export default Component.extend({
     },
 
     setChartOptions({rangeInDays}) {
-        let maxTicksAllowed = this.getTicksForRange(rangeInDays);
+        let maxTicksAllowed = this.isSmall ? 3 : this.getTicksForRange(rangeInDays);
 
         this.setChartJSDefaults();
         let options = {
@@ -168,8 +168,8 @@ export default Component.extend({
                 cornerRadius: 5,
                 caretSize: 7,
                 caretPadding: 5,
-                bodyFontSize: 11,
+                bodyFontSize: 12.5,
-                titleFontSize: 10,
+                titleFontSize: 12,
                 titleFontStyle: 'normal',
                 titleFontColor: 'rgba(255, 255, 255, 0.7)',
                 titleMarginBottom: 3,
@@ -245,7 +245,14 @@ export default Component.extend({
                         precision: 0,
                         suggestedMin: 0,
                         callback: function (value) {
-                            return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+                            // const currency = getSymbol(this.stats.currency);
+                            const currency = '$';
+                            if (parseInt(value) >= 1000){
+                                return currency + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+                            } else {
+                                return currency + value;
+                            }
+                            // return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                         }
                     }
                 }]
@@ -253,7 +260,7 @@ export default Component.extend({
         };
         if (this.isSmall) {
             options.scales.yAxes[0].ticks.display = false;
-            options.scales.xAxes[0].gridLines.display = false;
+            options.scales.xAxes[0].gridLines.display = true;
         }
         this.set('chartOptions', options);
     },

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

@@ -140,8 +140,8 @@
     border: 1px solid var(--whitegrey);
     border-radius: 3px;
     grid-column-gap: var(--dashboard-gap);
-    height: 300px;
+    align-items: stretch;
-    padding: 5px 0 24px;
+    padding: 20px 0;
 }
 
 .gh-dashboard-area.charts .gh-dashboard-box {
@@ -158,32 +158,34 @@
 .gh-dashboard-area.charts .mrr {
     grid-column: 1 / 2;
     grid-row: 1 / 4;
-    padding-left: 24px;
+    padding: 0 0 0 24px;
 }
 
 .gh-dashboard-area.charts .total-members {
     grid-column: 2 / 3;
     grid-row: 1 / 2;
-    padding-right: 24px;
+    padding: 0 24px 0 24px;
+    height: 75px;
 }
 
 .gh-dashboard-area.charts .paid-members {
     grid-column: 2 / 3;
     grid-row: 2 / 3;
-    padding-right: 24px;
+    padding: 0 24px 0 24px;
+    height: 75px;
 }
 
 .gh-dashboard-area.charts .newsletter-open-rate {
     grid-column: 2 / 3;
     grid-row: 3 / 4;
-    padding-right: 24px;
+    padding: 0 24px 0 24px;
+    height: 75px;
 }
 
 .gh-dashboard-chart-container {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
-    height: 100%;
 }
 
 .gh-dashboard-summary {
@@ -191,7 +193,6 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
-    height: 100%;
     margin-top: 8px;
 }
 
@@ -240,7 +241,7 @@
     font-size: 1.2rem;
     letter-spacing: 0;
     padding: 2px 4px;
-    margin: 6px 0 0;
+    margin: 0 0 1px 11px;
 }
 
 .gh-dashboard-summary .growth.positive {
@@ -258,7 +259,6 @@
     flex-direction: column;
     align-items: flex-end;
     justify-content: flex-end;
-    height: 100%;
 }
 
 .gh-dashboard-chart.nodata {
@@ -274,6 +274,33 @@
 
 .gh-dashboard-chart.small {
     max-width: 180px;
+    margin-bottom: -6px;
+}
+
+.gh-dashboard-chart-box {
+    position: relative;
+    display: flex;
+    justify-content: stretch;
+    height: 208px;
+    width: 35.5vw;
+    padding-top: 12px;
+    margin-right: -10px;
+}
+
+.gh-dashboard-chart-box.small {
+    position: relative;
+    width: 12vw;
+    height: 70px;
+    padding-top: 0;
+    margin-right: -6px;
+    transform: scale(0.9);
+    transform-origin: top right;
+}
+
+@media (max-width: 1500px) {
+    .gh-dashboard-chart-box.small {
+        width: 10vw;
+    }
 }
 
 /* Total members */
@@ -485,4 +512,8 @@
     .gh-dashboard-area.charts {
         min-height: 240px;
     }
+
+    .gh-dashboard-chart-box {
+        margin: 0 0 24px;
+    }
 }

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

@@ -177,41 +177,6 @@ p.gh-members-list-email {
     margin-right: 32px;
 }
 
-.gh-members-chart-box {
-    position: relative;
-    /* flex: 1 1 auto; */
-    display: flex;
-    justify-content: stretch;
-    height: 240px;
-    width: 35vw;
-    padding-top: 12px;
-}
-
-.gh-members-chart-box.small {
-    position: relative;
-    width: 12vw;
-    height: 70px;
-    padding-top: 0;
-    margin-right: -6px;
-}
-
-@media (max-width: 1500px) {
-    .gh-members-chart-box.small {
-        width: 10vw;
-    }
-}
-
-.gh-members-chart-box.small::before {
-    position: absolute;
-    content: "";
-    display: block;
-    height: 1px;
-    bottom: 1px;
-    left: 10px;
-    right: 6px;
-    background: var(--list-color-divider);
-}
-
 .gh-members-chart-header {
     display: flex;
     align-items: center;
@@ -345,10 +310,6 @@ p.gh-members-list-email {
     .members-list .gh-list-header, .gh-list-hidecell-m {
         display: table-cell;
     }
-
-    .gh-members-chart-box {
-        margin: 0 0 24px;
-    }
 }
 
 @media (min-width: 440px) and (max-width: 1000px) {

ghost/admin/app/templates/dashboard.hbs

@@ -37,8 +37,10 @@
                 <div class="gh-dashboard-chart-container">
                     <div class="gh-dashboard-summary small">
                         <h4 class="gh-dashboard-header">Total members</h4>
-                        <div class="data">{{this.memberCountStats.data.all.total}}</div>
+                        <div class="data-container">
-                        <div class="growth">0.0%</div>
+                            <div class="data">{{this.memberCountStats.data.all.total}}</div>
+                            <div class="growth">0.0%</div>
+                        </div>
                     </div>
                     <div class="gh-dashboard-chart small">
                         <GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="all-members" @showRange={{false}} @chartStats={{this.memberCountStats.data.all}} />
@@ -49,8 +51,10 @@
                 <div class="gh-dashboard-chart-container">
                     <div class="gh-dashboard-summary small">
                         <h4 class="gh-dashboard-header">Paid members</h4>
-                        <div class="data">{{this.memberCountStats.data.paid.total}}</div>
+                        <div class="data-container">
-                        <div class="growth">0.0%</div>
+                            <div class="data">{{this.memberCountStats.data.paid.total}}</div>
+                            <div class="growth">0.0%</div>
+                        </div>
                     </div>
                     <div class="gh-dashboard-chart small">
                         <GhMembersChart @nightShift={{feature "nightShift"}} @chartSize="small" @showSummary={{false}} @chartType="paid-members" @showRange={{false}} @chartStats={{this.memberCountStats.data.paid}} />
@@ -61,12 +65,12 @@
                 <div class="gh-dashboard-chart-container">
                     <div class="gh-dashboard-summary small">
                         <h4 class="gh-dashboard-header">Newsletter open rate</h4>
-                        <div class="data">0%</div>
+                        <div class="data-container">
-                        <div class="growth">0.0%</div>
+                            <div class="data">0%</div>
-                    </div>
+                            <div class="growth">0.0%</div>
-                    <div class="gh-dashboard-chart small">
+                        </div>
-                        No data
                     </div>
+                    <div class="gh-dashboard-chart small"></div>
                 </div>
             </div>
         </section>