From 118aae2820c99bcc2c2dc3046c024a7705237276 Mon Sep 17 00:00:00 2001 From: James Morris Date: Tue, 26 Apr 2022 14:52:46 +0100 Subject: [PATCH] Bringing mini charts up to the right and other style tweaks refs: https://github.com/TryGhost/Team/issues/1531 --- .../app/components/dashboard/dashboard-v5.hbs | 16 --- .../components/dashboard/v5/charts/anchor.hbs | 14 +- .../components/dashboard/v5/charts/anchor.js | 22 ++- .../components/dashboard/v5/charts/mrr.hbs | 33 ++--- .../app/components/dashboard/v5/charts/mrr.js | 19 ++- .../dashboard/v5/charts/paid-breakdown.hbs | 35 +++-- .../dashboard/v5/charts/paid-breakdown.js | 8 +- .../dashboard/v5/charts/paid-mix.hbs | 66 +++++---- .../dashboard/v5/charts/paid-mix.js | 30 ++--- .../dashboard/v5/resources/newsletter.hbs | 12 +- .../admin/app/styles/layouts/dashboard-v5.css | 126 ++++++++++++++++-- 11 files changed, 245 insertions(+), 136 deletions(-) diff --git a/ghost/admin/app/components/dashboard/dashboard-v5.hbs b/ghost/admin/app/components/dashboard/dashboard-v5.hbs index dd8e3baf86..4806282372 100644 --- a/ghost/admin/app/components/dashboard/dashboard-v5.hbs +++ b/ghost/admin/app/components/dashboard/dashboard-v5.hbs @@ -14,22 +14,6 @@ {{/if}} - - {{!--
--}} - {{!-- --}} - {{!-- --}} - {{!--
--}} - - {{!-- --}} - - {{!--
--}} - {{!-- --}} - {{!-- --}} - {{!--
--}} - - {{!-- --}} - {{!-- --}} - {{!-- --}} {{/if}} diff --git a/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs b/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs index edd387a927..25b17f927c 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs +++ b/ghost/admin/app/components/dashboard/v5/charts/anchor.hbs @@ -45,16 +45,10 @@ {{#if this.hasPaidTiers}} -
-
- -
-
- -
-
- -
+
+ + +
{{/if}} diff --git a/ghost/admin/app/components/dashboard/v5/charts/anchor.js b/ghost/admin/app/components/dashboard/v5/charts/anchor.js index 0b98fd0ec7..d44787af05 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/anchor.js +++ b/ghost/admin/app/components/dashboard/v5/charts/anchor.js @@ -139,6 +139,20 @@ export default class Anchor extends Component { data = stats.map(stat => stat.paid + stat.free + stat.comped); } + // gradient for line + const canvasLine = document.createElement('canvas'); + const ctxLine = canvasLine.getContext('2d'); + const gradientLine = ctxLine.createLinearGradient(0, 0, 1000, 0); + gradientLine.addColorStop(0, 'rgba(250, 45, 142, 1'); + gradientLine.addColorStop(1, 'rgba(143, 66, 255, 1'); + + // gradient for fill + const canvasFill = document.createElement('canvas'); + const ctxFill = canvasFill.getContext('2d'); + const gradientFill = ctxFill.createLinearGradient(0, 0, 1000, 0); + gradientFill.addColorStop(0, 'rgba(250, 45, 142, 0.2'); + gradientFill.addColorStop(1, 'rgba(143, 66, 255, 0.02'); + return { labels: labels, datasets: [{ @@ -146,8 +160,8 @@ export default class Anchor extends Component { tension: 0, cubicInterpolationMode: 'monotone', fill: true, - fillColor: 'rgba(142, 66, 255, 0.05)', - backgroundColor: 'rgba(142, 66, 255, 0.05)', + fillColor: gradientFill, + backgroundColor: gradientFill, pointRadius: 0, pointHitRadius: 10, pointBorderColor: '#8E42FF', @@ -155,7 +169,7 @@ export default class Anchor extends Component { pointHoverBackgroundColor: '#8E42FF', pointHoverBorderColor: '#8E42FF', pointHoverRadius: 0, - borderColor: '#8E42FF', + borderColor: gradientLine, borderJoinStyle: 'miter' }] }; @@ -172,7 +186,7 @@ export default class Anchor extends Component { get chartOptions() { let barColor = this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)'; - + return { responsive: true, maintainAspectRatio: false, diff --git a/ghost/admin/app/components/dashboard/v5/charts/mrr.hbs b/ghost/admin/app/components/dashboard/v5/charts/mrr.hbs index c71505e852..693f07d494 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/mrr.hbs +++ b/ghost/admin/app/components/dashboard/v5/charts/mrr.hbs @@ -1,17 +1,20 @@ - +
+ -
- {{#if this.loading}} -
- {{else}} - - {{/if}} +
+ {{#if this.loading}} +
+ {{else}} +
+ +
+ {{/if}} +
diff --git a/ghost/admin/app/components/dashboard/v5/charts/mrr.js b/ghost/admin/app/components/dashboard/v5/charts/mrr.js index 9878019fc1..77f4c9e738 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/mrr.js +++ b/ghost/admin/app/components/dashboard/v5/charts/mrr.js @@ -58,6 +58,13 @@ export default class Mrr extends Component { const labels = stats.map(stat => stat.date); const data = stats.map(stat => stat.mrr); + // gradient for fill + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + const gradient = ctx.createLinearGradient(0, 0, 0, 120); + gradient.addColorStop(0, 'rgba(143, 66, 255, 0.15'); + gradient.addColorStop(1, 'rgba(143, 66, 255, 0.0'); + return { labels: labels, datasets: [{ @@ -65,8 +72,8 @@ export default class Mrr extends Component { tension: 0, cubicInterpolationMode: 'monotone', fill: true, - fillColor: 'rgba(142, 66, 255, 0.02)', - backgroundColor: 'rgba(142, 66, 255, 0.02)', + fillColor: gradient, + backgroundColor: gradient, pointRadius: 0, pointHitRadius: 10, pointBorderColor: '#8E42FF', @@ -105,6 +112,10 @@ export default class Mrr extends Component { e.target.style.cursor = 'pointer'; } }, + animation: { + duration: 0 + }, + responsiveAnimationDuration: 0, tooltips: { intersect: false, mode: 'index', @@ -170,10 +181,6 @@ export default class Mrr extends Component { }; } - get chartHeight() { - return 90; - } - calculatePercentage(from, to) { if (from === 0) { if (to > 0) { diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs b/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs index e72f401d39..ab295a2d35 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs +++ b/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs @@ -1,15 +1,24 @@ - +
+
+ -
- {{#if this.loading}} -
- {{else}} - - {{/if}} +
+
New
+
Canceled
+
+
+ +
+ {{#if this.loading}} +
+ {{else}} +
+ +
+ {{/if}} +
- \ No newline at end of file diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js b/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js index 67cbc8b396..aa8decb280 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js +++ b/ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js @@ -96,6 +96,10 @@ export default class PaidBreakdown extends Component { e.target.style.cursor = 'pointer'; } }, + animation: { + duration: 0 + }, + responsiveAnimationDuration: 0, tooltips: { intersect: false, mode: 'index', @@ -173,8 +177,4 @@ export default class PaidBreakdown extends Component { } }; } - - get chartHeight() { - return 120; - } } diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-mix.hbs b/ghost/admin/app/components/dashboard/v5/charts/paid-mix.hbs index 2eab6db2ba..c8ef3907fb 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/paid-mix.hbs +++ b/ghost/admin/app/components/dashboard/v5/charts/paid-mix.hbs @@ -1,34 +1,44 @@ -{{#if this.hasMultipleTiers }} -
- - {{#if option.name}}{{option.name}}{{else}}Unknown option{{/if}} - +
+
+ + + {{#if this.isChartCadence}} +
+
Monthly
+
Annual
+
+ {{/if}}
-{{/if}} - +
+ {{#if this.loading}} +
+ {{else}} +
+ +
+ {{/if}} +
-
- {{#if this.loading}} -
- {{else}} -
- + {{#if this.hasMultipleTiers }} +
+ + {{#if option.name}}{{option.name}}{{else}}Unknown option{{/if}} +
{{/if}}
diff --git a/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js b/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js index cc3cd8684c..90731daad1 100644 --- a/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js +++ b/ghost/admin/app/components/dashboard/v5/charts/paid-mix.js @@ -116,30 +116,24 @@ export default class PaidMix extends Component { responsive: true, maintainAspectRatio: false, legend: { - display: (this.mode === 'cadence' ? true : false), - position: 'left', - labels: { - boxWidth: 13, - fontFamily: '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Droid Sans,Helvetica Neue,sans-serif', - fontColor: '#626d79', - fontSize: 13 - }, - onClick: null + display: false }, layout: { padding: (this.mode === 'cadence' ? { - left: 7, + left: 0, right: 21, - top: 10 + top: 30 } : { - top: 10, - left: 23, - right: 40 + top: 30, + left: 21, + right: 21, + bottom: 30 }) }, animation: { duration: 0 }, + responsiveAnimationDuration: 0, hover: { onHover: function (e) { e.target.style.cursor = 'pointer'; @@ -196,7 +190,11 @@ export default class PaidMix extends Component { }; } - get chartHeight() { - return 130; + get isChartCadence() { + return (this.mode === 'cadence'); + } + + get isChartTiers() { + return (this.mode === 'tiers'); } } \ No newline at end of file diff --git a/ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs b/ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs index 88d5a45287..24a70b4b4d 100644 --- a/ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs +++ b/ghost/admin/app/components/dashboard/v5/resources/newsletter.hbs @@ -9,19 +9,9 @@
{{#each this.newsletters as |entry|}} - {{!-- {{#if entry.feature_image}} -
- {{/if}} --}} - {{entry.title}} -
{{entry.title}}
- {{!-- {{#if entry.custom_excerpt}} -

{{entry.custom_excerpt}}

- {{else if entry.excerpt}} -

{{entry.excerpt}}

- {{/if}} --}}
{{moment-format entry.published_at "D MMM YYYY"}}
 @@ -31,7 +21,7 @@
- Sign up to the newsletter → + Sign up to the newsletter →
\ No newline at end of file diff --git a/ghost/admin/app/styles/layouts/dashboard-v5.css b/ghost/admin/app/styles/layouts/dashboard-v5.css index db3dd51ed6..d816d2bff2 100644 --- a/ghost/admin/app/styles/layouts/dashboard-v5.css +++ b/ghost/admin/app/styles/layouts/dashboard-v5.css @@ -203,6 +203,90 @@ Dashboard v5 Layout */ padding-right: 0; } +.gh-dashboard5-minicharts { + flex: 1; + padding: 0; + display: flex; + flex-direction: row; + position: relative; + align-items: stretch; + background: transparent; +} + +.gh-dashboard5-minichart { + flex: 1; + display: flex; + flex-direction: row; + border-left: 1px solid var(--whitegrey); + padding: 4px 24px; + position: relative; + height: 130px; +} + +.gh-dashboard5-minichart .gh-dashboard5-data { + flex: 40%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; +} + +.gh-dashboard5-minichart .gh-dashboard5-chart { + flex: 60%; +} + +.gh-dashboard5-minichart:first-child { + padding-left: 0; + border-left: 0 none; +} + +.gh-dashboard5-minichart:last-child { + padding-right: 0; +} + +.gh-dashboard5-minichart.is-tiers { + flex-direction: column; +} + +.gh-dashboard5-minichart.is-tiers .gh-dashboard5-data { + flex: auto; +} + +.gh-dashboard5-minichart.is-tiers .gh-dashboard5-chart { + flex: 1; +} + +.gh-dashboard5-legend { + flex: 1; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center +} + +.gh-dashboard5-legend-item { + font-size: 1.3rem; + font-weight: 600; + color: #626d79; + padding: 0 0 0 18px; + position: relative; +} + +.gh-dashboard5-legend-item::after { + content: ''; + width: 9px; + height: 9px; + border-radius: 8px; + background: #8E42FF; + position: absolute; + top: 6px; + left: 0; +} + +.gh-dashboard5-legend-item:last-child::after { + background: #FB76B4; +} + .gh-dashboard5-tabs { display: flex; flex-direction: row; @@ -255,7 +339,7 @@ Dashboard v5 Layout */ .gh-dashboard5-select-title { display: flex; justify-content: flex-start; - margin: -10px 0 -12px -12px; + margin: -12px 0 -12px -12px; } .gh-dashboard5-select-title .ember-power-select-selected-item { @@ -478,7 +562,7 @@ Dashboard v5 List */ padding: 14px 0; display: grid; grid-template-columns: 55% 15% 30%; - padding: 8px 0; + padding: 4px 0; } .gh-dashboard5-list-item:nth-child(3) { @@ -652,29 +736,41 @@ Dashboard v5 Section Anchor */ color: var(--midlightgrey); } -.gh-dashboard5-anchor .gh-dashboard5-columns { +.gh-dashboard5-anchor .gh-dashboard5-minicharts { margin-top: 48px; } -.gh-dashboard5-anchor .gh-dashboard5-mrr .gh-dashboard5-chart { +.gh-dashboard5-mrr .gh-dashboard5-chart { margin-top: 0; margin-left: -16px; - margin-right: -16px; + margin-right: -24px; } -.gh-dashboard5-anchor .gh-dashboard5-breakdown .gh-dashboard5-chart { +.gh-dashboard5-mrr .gh-dashboard5-chart-container { + width: 99%; +} + +.gh-dashboard5-breakdown .gh-dashboard5-chart { margin-top: 8px; margin-left: -16px; - margin-right: -16px; + margin-right: -24px; } -.gh-dashboard5-anchor .gh-dashboard5-mix .gh-dashboard5-chart { +.gh-dashboard5-breakdown .gh-dashboard5-chart-container { + width: 99%; +} + +.gh-dashboard5-mix .gh-dashboard5-chart { margin-top: 0; - margin-left: -16px; - margin-right: -16px; + margin-left: -24px; + margin-right: -24px; } -.gh-dashboard5-anchor .gh-dashboard5-mix .gh-dashboard5-select { +.gh-dashboard5-mix .gh-dashboard5-chart-container { + width: 99%; +} + +.gh-dashboard5-mix .gh-dashboard5-select { top: -8px; right: -18px; } @@ -688,7 +784,7 @@ Dashboard v5 Section Engagement */ } .gh-dashboard5-engagement .gh-dashboard5-columns { - padding-top: 32px; + padding-top: 24px; } .gh-dashboard5-engagement .gh-dashboard5-select { @@ -874,7 +970,7 @@ Dashboard v5 Section Recents */ } .gh-dashboard5-recents .gh-dashboard5-list-loading { - min-height: 240px; + min-height: 200px; display: flex; align-items: center; justify-content: center; @@ -911,6 +1007,7 @@ Dashboard v5 Section What's New */ .gh-dashboard5-whats-new { position: relative; + margin-left: -12px; /* layout adjustment */ } .gh-dashboard5-whats-new .gh-dashboard5-list-header, @@ -954,6 +1051,7 @@ Dashboard v5 Section Resources */ .gh-dashboard5-resources { position: relative; + margin-right: 12px; /* layout adjustment */ } .gh-dashboard5-resources .gh-dashboard5-articles { @@ -1059,6 +1157,7 @@ Dashboard v5 Section Staff Picks */ .gh-dashboard5-staff-picks { position: relative; + margin-left: -12px; /* layout adjustment */ } .gh-dashboard5-staff-picks .gh-dashboard5-list-header, @@ -1107,6 +1206,7 @@ Dashboard v5 Section Latest Newsletters */ .gh-dashboard5-newsletter { position: relative; + margin-right: 12px; /* layout adjustment */ } .gh-dashboard5-newsletter .gh-dashboard5-newsletter-items {