diff --git a/ghost/admin/app/components/gh-members-chart.hbs b/ghost/admin/app/components/gh-members-chart.hbs index cc259405e3..0a11f4172a 100644 --- a/ghost/admin/app/components/gh-members-chart.hbs +++ b/ghost/admin/app/components/gh-members-chart.hbs @@ -1,4 +1,4 @@ -
+
{{#if (not this.stats)}} {{else}} diff --git a/ghost/admin/app/components/gh-members-chart.js b/ghost/admin/app/components/gh-members-chart.js index 4e6a6abc65..876c5b8810 100644 --- a/ghost/admin/app/components/gh-members-chart.js +++ b/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, - titleFontSize: 10, + bodyFontSize: 12.5, + 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); }, diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css index 55db3f34bf..1d5bf11ada 100644 --- a/ghost/admin/app/styles/layouts/dashboard.css +++ b/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; - padding: 5px 0 24px; + align-items: stretch; + 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; + } } \ No newline at end of file diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css index b55798c58b..0ccc184b1c 100644 --- a/ghost/admin/app/styles/layouts/members.css +++ b/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) { diff --git a/ghost/admin/app/templates/dashboard.hbs b/ghost/admin/app/templates/dashboard.hbs index b58dd605bc..dcc117fa0e 100644 --- a/ghost/admin/app/templates/dashboard.hbs +++ b/ghost/admin/app/templates/dashboard.hbs @@ -37,8 +37,10 @@

Total members

-
{{this.memberCountStats.data.all.total}}
-
0.0%
+
+
{{this.memberCountStats.data.all.total}}
+
0.0%
+
@@ -49,8 +51,10 @@

Paid members

-
{{this.memberCountStats.data.paid.total}}
-
0.0%
+
+
{{this.memberCountStats.data.paid.total}}
+
0.0%
+
@@ -61,12 +65,12 @@

Newsletter open rate

-
0%
-
0.0%
-
-
- No data +
+
0%
+
0.0%
+
+