tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Working on custom tooltips for new Dashboard 

refs: https://github.com/TryGhost/Team/issues/1534
This commit is contained in:
James Morris 2022-04-26 18:54:52 +01:00
parent 5882daec3e
commit 18de96c940
11 changed files with 258 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/dashboard/dashboard-v5.hbs
View File

@ -31,4 +31,4 @@
</div>
</section>
<Dashboard::V5::Prototype::ControlPanel />
<Dashboard::V5::Prototype::ControlPanel />

10
app/components/dashboard/v5/charts/anchor.hbs
View File

@ -36,6 +36,15 @@
@data={{this.chartData}}
@options={{this.chartOptions}}
@height={{if this.hasPaidTiers this.chartHeight this.chartHeightSmall}} />
<div id="gh-dashboard5-anchor-tooltip" class="gh-dashboard5-tooltip">
<div class="gh-dashboard5-tooltip-label">
-
</div>
<div class="gh-dashboard5-tooltip-value">
-
</div>
</div>
</div>
<div class="gh-dashboard5-chart-ticks">
<span id="gh-dashboard5-anchor-date-start"> </span>
@ -68,5 +77,6 @@
{{#if option.name}}{{option.name}}{{else}}<span class="red">Unknown option</span>{{/if}}
</PowerSelect>
</div>
</article>
</section>

69
app/components/dashboard/v5/charts/anchor.js
View File

@ -2,7 +2,6 @@ import Component from '@glimmer/component';
import moment from 'moment';
import {action} from '@ember/object';
import {getSymbol} from 'ghost-admin/utils/currency';
import {ghPriceAmount} from '../../../../helpers/gh-price-amount';
import {inject as service} from '@ember/service';
import {tracked} from '@glimmer/tracking';
@ -117,6 +116,18 @@ export default class Anchor extends Component {
return 'line';
}
get chartTitle() {
// paid
if (this.chartDisplay === 'paid') {
return 'Paid members';
// free
} else if (this.chartDisplay === 'free') {
return 'Free members';
}
// total
return 'Total members';
}
get chartData() {
let stats;
let labels;
@ -210,43 +221,35 @@ export default class Anchor extends Component {
}
},
tooltips: {
enabled: false,
intersect: false,
mode: 'index',
displayColors: false,
backgroundColor: '#15171A',
xPadding: 7,
yPadding: 7,
cornerRadius: 5,
caretSize: 7,
caretPadding: 5,
bodyFontSize: 12.5,
titleFontSize: 12,
titleFontStyle: 'normal',
titleFontColor: 'rgba(255, 255, 255, 0.7)',
titleMarginBottom: 3,
custom: function (tooltip) {
// get tooltip element
const tooltipEl = document.getElementById('gh-dashboard5-anchor-tooltip');
// only show tooltip when active
if (tooltip.opacity === 0) {
tooltipEl.style.display = 'none';
tooltipEl.style.opacity = 0;
return;
}
// update tooltip styles
tooltipEl.style.display = 'block';
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = tooltip.x + 'px';
tooltipEl.style.top = tooltip.y + 'px';
},
callbacks: {
label: (tooltipItems, data) => {
if (this.chartDisplay === 'mrr') {
// Convert integer in cents to value in USD/other currency.
const valueText = ghPriceAmount(data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index]);
return `MRR: ${this.mrrCurrencySymbol}${valueText}`;
}
let valueText = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
let returnable = valueText;
if (this.chartDisplay === 'total') {
if (tooltipItems.datasetIndex === 0) {
returnable = `Total members: ${valueText}`;
} else {
returnable = `Paid members: ${valueText}`;
}
}
return returnable;
const value = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
document.querySelector('#gh-dashboard5-anchor-tooltip .gh-dashboard5-tooltip-value').innerHTML = value;
},
title: (tooltipItems) => {
return moment(tooltipItems[0].xLabel).format(DATE_FORMAT);
const value = moment(tooltipItems[0].xLabel).format(DATE_FORMAT);
document.querySelector('#gh-dashboard5-anchor-tooltip .gh-dashboard5-tooltip-label').innerHTML = value;
}
}
},
@ -303,7 +306,7 @@ export default class Anchor extends Component {
}
get chartHeightSmall() {
return 200;
return 180;
}
calculatePercentage(from, to) {

9
app/components/dashboard/v5/charts/mrr.hbs
View File

@ -14,6 +14,15 @@
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}} />
<div id="gh-dashboard5-mrr-tooltip" class="gh-dashboard5-tooltip">
<div class="gh-dashboard5-tooltip-label">
-
</div>
<div class="gh-dashboard5-tooltip-value">
-
</div>
</div>
</div>
{{/if}}
</div>

42
app/components/dashboard/v5/charts/mrr.js
View File

@ -88,7 +88,8 @@ export default class Mrr extends Component {
}
get chartOptions() {
let barColor = this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)';
const that = this;
const barColor = this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)';
return {
responsive: true,
@ -117,28 +118,35 @@ export default class Mrr extends Component {
},
responsiveAnimationDuration: 0,
tooltips: {
enabled: false,
intersect: false,
mode: 'index',
displayColors: false,
backgroundColor: '#15171A',
xPadding: 7,
yPadding: 7,
cornerRadius: 5,
caretSize: 7,
caretPadding: 5,
bodyFontSize: 12.5,
titleFontSize: 12,
titleFontStyle: 'normal',
titleFontColor: 'rgba(255, 255, 255, 0.7)',
titleMarginBottom: 3,
custom: function (tooltip) {
// get tooltip element
const tooltipEl = document.getElementById('gh-dashboard5-mrr-tooltip');
// only show tooltip when active
if (tooltip.opacity === 0) {
tooltipEl.style.display = 'none';
tooltipEl.style.opacity = 0;
return;
}
// update tooltip styles
tooltipEl.style.display = 'block';
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = tooltip.x + 'px';
tooltipEl.style.top = tooltip.y + 'px';
},
callbacks: {
label: (tooltipItems, data) => {
// Convert integer in cents to value in USD/other currency.
const valueText = ghPriceAmount(data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index]);
return `MRR: ${this.mrrCurrencySymbol}${valueText}`;
const value = `${that.mrrCurrencySymbol}${ghPriceAmount(data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index])}`;
document.querySelector('#gh-dashboard5-mrr-tooltip .gh-dashboard5-tooltip-value').innerHTML = value;
},
title: (tooltipItems) => {
return moment(tooltipItems[0].xLabel).format(DATE_FORMAT);
const value = moment(tooltipItems[0].xLabel).format(DATE_FORMAT);
document.querySelector('#gh-dashboard5-mrr-tooltip .gh-dashboard5-tooltip-label').innerHTML = value;
}
}
},

11
app/components/dashboard/v5/charts/paid-breakdown.hbs
View File

@ -18,6 +18,17 @@
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}} />
<div id="gh-dashboard5-breakdown-tooltip" class="gh-dashboard5-tooltip">
<div class="gh-dashboard5-tooltip-label">
-
</div>
<div class="gh-dashboard5-tooltip-value">
<div class="gh-dashboard5-tooltip-value-1"></div>
<div class="gh-dashboard5-tooltip-value-2"></div>
<div class="gh-dashboard5-tooltip-value-3"></div>
</div>
</div>
</div>
{{/if}}
</div>

53
app/components/dashboard/v5/charts/paid-breakdown.js
View File

@ -72,7 +72,7 @@ export default class PaidBreakdown extends Component {
}
get chartOptions() {
let barColor = this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)';
const barColor = this.feature.nightShift ? 'rgba(200, 204, 217, 0.25)' : 'rgba(200, 204, 217, 0.65)';
return {
responsive: true,
@ -101,39 +101,38 @@ export default class PaidBreakdown extends Component {
},
responsiveAnimationDuration: 0,
tooltips: {
enabled: false,
intersect: false,
mode: 'index',
displayColors: false,
backgroundColor: '#15171A',
xPadding: 7,
yPadding: 7,
cornerRadius: 5,
caretSize: 7,
caretPadding: 5,
bodyFontSize: 12.5,
titleFontSize: 12,
titleFontStyle: 'normal',
titleFontColor: 'rgba(255, 255, 255, 0.7)',
titleMarginBottom: 3,
yAlign: 'center',
custom: function (tooltip) {
// get tooltip element
const tooltipEl = document.getElementById('gh-dashboard5-breakdown-tooltip');
// only show tooltip when active
if (tooltip.opacity === 0) {
tooltipEl.style.display = 'none';
tooltipEl.style.opacity = 0;
return;
}
// update tooltip styles
tooltipEl.style.display = 'block';
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = tooltip.x + 'px';
tooltipEl.style.top = tooltip.y + 'px';
},
callbacks: {
label: (tooltipItems, data) => {
let valueText = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
let newValue = data.datasets[1].data[tooltipItems.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
document.querySelector('#gh-dashboard5-breakdown-tooltip .gh-dashboard5-tooltip-value-2').innerHTML = `New ${newValue}`;
if (tooltipItems.datasetIndex === 0) {
return `Net: ${valueText}`;
}
if (tooltipItems.datasetIndex === 1) {
return `New paid: ${valueText}`;
}
if (tooltipItems.datasetIndex === 2) {
return `Canceled paid: ${Math.abs(valueText)}`;
}
let canceldValue = data.datasets[2].data[tooltipItems.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
document.querySelector('#gh-dashboard5-breakdown-tooltip .gh-dashboard5-tooltip-value-3').innerHTML = `Canceled ${canceldValue}`;
},
title: (tooltipItems) => {
return moment(tooltipItems[0].xLabel).format(DATE_FORMAT);
const value = moment(tooltipItems[0].xLabel).format(DATE_FORMAT);
document.querySelector('#gh-dashboard5-breakdown-tooltip .gh-dashboard5-tooltip-label').innerHTML = value;
}
}
},

8
app/components/dashboard/v5/charts/paid-mix.hbs
View File

@ -19,7 +19,13 @@
<EmberChart
@type={{this.chartType}}
@data={{this.chartData}}
@options={{this.chartOptions}} />
@options={{this.chartOptions}} />
<div id="gh-dashboard5-mix-tooltip" class="gh-dashboard5-tooltip">
<div class="gh-dashboard5-tooltip-value">
-
</div>
</div>
</div>
{{/if}}
</div>

41
app/components/dashboard/v5/charts/paid-mix.js
View File

@ -140,27 +140,32 @@ export default class PaidMix extends Component {
}
},
tooltips: {
enabled: true,
enabled: false,
intersect: false,
mode: 'single',
displayColors: false,
backgroundColor: '#15171A',
yPadding: 7,
cornerRadius: 5,
caretSize: 7,
caretPadding: 5,
bodyFontSize: 12.5,
titleFontSize: 12,
titleFontStyle: 'normal',
titleFontColor: 'rgba(255, 255, 255, 0.7)',
titleMarginBottom: 3,
yAlign: 'bottom',
xAlign: 'center',
custom: function (tooltip) {
// get tooltip element
const tooltipEl = document.getElementById('gh-dashboard5-mix-tooltip');
// only show tooltip when active
if (tooltip.opacity === 0) {
tooltipEl.style.display = 'none';
tooltipEl.style.opacity = 0;
return;
}
// update tooltip styles
tooltipEl.style.display = 'block';
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = tooltip.x + 'px';
tooltipEl.style.top = tooltip.y + 'px';
},
callbacks: {
label: function (tooltipItem, data) {
const label = data.datasets[tooltipItem.datasetIndex].label || '';
const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] || 0;
return `${label}: ${value}%`;
label: (tooltipItems, data) => {
const label = data.datasets[tooltipItems.datasetIndex].label || '';
const value = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] || 0;
document.querySelector('#gh-dashboard5-mix-tooltip .gh-dashboard5-tooltip-value').innerHTML = `${label} ${value}%`;
},
title: () => {
return null;

4
app/styles/app-dark.css
View File

@ -1122,6 +1122,10 @@ kbd {
border-color: #394047;
}
.gh-dashboard5 .gh-dashboard5-box.is-secondary {
border: 1px solid #2b2d31;
}
.gh-dashboard5 .gh-dashboard5-box.is-secondary,
.gh-dashboard5 .gh-dashboard5-box.is-faded {
background: transparent;

164
app/styles/layouts/dashboard-v5.css
View File

@ -165,11 +165,11 @@ Dashboard v5 Layout */
flex-direction: column;
position: relative;
align-items: stretch;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.01);
}
.gh-dashboard5-box.is-secondary {
background: #fcfcfc;
background: #f5f6f6;
border: transparent;
}
.gh-dashboard5-box.is-faded {
@ -357,6 +357,34 @@ Dashboard v5 Layout */
transition: none;
}
.gh-dashboard5-triple {
display: flex;
flex-direction: column;
}
.gh-dashboard5-articles {
flex: 1;
display: flex;
flex-direction: row;
}
.gh-dashboard5-breakout {
width: calc(100% + 48px + 48px);
background: #fcfcfc;
padding: 24px 0 50vh;
margin-left: -48px;
margin-right: -48px;
}
.gh-dashboard5-inner {
max-width: 1230px;
margin: 0 auto;
}
.gh-dashboard5-subhead {
padding: 0 24px 24px;
}
/* ---------------------------------
Dashboard v5 Chart */
@ -504,6 +532,15 @@ Dashboard v5 Metric */
margin: 0 0 8px;
}
.gh-dashboard5-metric.is-tooltip .gh-dashboard5-metric-label {
font-size: 1.3rem;
margin-bottom: 8px;
}
.gh-dashboard5-metric.is-tooltip .gh-dashboard5-metric-value{
font-size: 2rem;
}
.gh-dashboard5-metric-minivalue {
font-size: 1.5rem;
font-weight: 700;
@ -619,7 +656,7 @@ Dashboard v5 List */
/* ---------------------------------
Dashboard v5 Section Overview */
Dashboard v5 Overview */
.gh-dashboard5-overview {
position: relative;
@ -649,7 +686,7 @@ Dashboard v5 Section Overview */
/* ---------------------------------
Dashboard v5 Section Anchor */
Dashboard v5 Anchor */
.gh-dashboard5-anchor {
position: relative;
@ -777,7 +814,7 @@ Dashboard v5 Section Anchor */
/* ---------------------------------
Dashboard v5 Section Engagement */
Dashboard v5 Engagement */
.gh-dashboard5-engagement {
position: relative;
@ -793,7 +830,7 @@ Dashboard v5 Section Engagement */
/* ---------------------------------
Dashboard v5 Section Recent Posts */
Dashboard v5 Recent Posts */
.gh-dashboard5-recent-posts {
position: relative;
@ -853,7 +890,7 @@ Dashboard v5 Section Recent Posts */
/* ---------------------------------
Dashboard v5 Section Recent Activity */
Dashboard v5 Recent Activity */
.gh-dashboard5-recent-activity {
position: relative;
@ -906,7 +943,7 @@ Dashboard v5 Section Recent Activity */
/* ---------------------------------
Dashboard v5 Section Recents */
Dashboard v5 Recents */
.gh-dashboard5-recents {
position: relative;
@ -1003,7 +1040,7 @@ Dashboard v5 Section Recents */
/* ---------------------------------
Dashboard v5 Section What's New */
Dashboard v5 What's New */
.gh-dashboard5-whats-new {
position: relative;
@ -1047,7 +1084,7 @@ Dashboard v5 Section What's New */
/* ---------------------------------
Dashboard v5 Section Resources */
Dashboard v5 Resources */
.gh-dashboard5-resources {
position: relative;
@ -1097,7 +1134,7 @@ Dashboard v5 Section Resources */
/* ---------------------------------
Dashboard v5 Section Multi */
Dashboard v5 Multi */
.gh-dashboard5-multi {
position: relative;
@ -1153,7 +1190,7 @@ Dashboard v5 Section Multi */
/* ---------------------------------
Dashboard v5 Section Staff Picks */
Dashboard v5 Staff Picks */
.gh-dashboard5-staff-picks {
position: relative;
@ -1187,6 +1224,7 @@ Dashboard v5 Section Staff Picks */
line-height: 1.4em;
margin-bottom: 8px;
color: var(--black);
padding: 0;
}
.gh-dashboard5-staff-picks .gh-dashboard5-list-body {
@ -1202,7 +1240,7 @@ Dashboard v5 Section Staff Picks */
/* ---------------------------------
Dashboard v5 Section Latest Newsletters */
Dashboard v5 Latest Newsletters */
.gh-dashboard5-newsletter {
position: relative;
@ -1217,8 +1255,6 @@ Dashboard v5 Section Latest Newsletters */
flex: 1;
}
.gh-dashboard5-newsletter .gh-dashboard5-newsletter-item {}
.gh-dashboard5-newsletter .gh-dashboard5-newsletter-item h5 {
font-size: 1.4rem;
padding: 0 32px 0 0;
@ -1226,7 +1262,7 @@ Dashboard v5 Section Latest Newsletters */
/* ---------------------------------
Dashboard v5 Section Community */
Dashboard v5 Community */
.gh-dashboard5-community {
position: relative;
@ -1319,48 +1355,6 @@ Dashboard v5 Misc */
}
.gh-dashboard5-triple {
display: flex;
flex-direction: column;
}
.gh-dashboard5-articles {
flex: 1;
display: flex;
flex-direction: row;
}
.gh-dashboard5-article {
}
.gh-dashboard5-breakout {
width: calc(100% + 48px + 48px);
background: #fcfcfc;
padding: 24px 0 50vh;
margin-left: -48px;
margin-right: -48px;
}
.gh-dashboard5-inner {
max-width: 1230px;
margin: 0 auto;
}
.gh-dashboard5-subhead {
padding: 0 24px 24px;
}
/* ---------------------------------
Dashboard v5 Resources */
@ -1482,3 +1476,57 @@ Dashboard v5 Resources */
padding: 3px 0 0 0;
white-space: nowrap;
}
/* ---------------------------------
Dashboard v5 Tooltips */
.gh-dashboard5-tooltip {
opacity: 0;
position: absolute;
top: 0;
left: 0;
background: var(--white);
border: 1px solid var(--whitegrey);
border-radius: 8px;
padding: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.05);
z-index: 9999;
pointer-events: none;
transition: top 50ms ease-out, left 50ms ease-out;
}
.gh-dashboard5-tooltip .gh-dashboard5-metric-value {
margin: 0;
}
.gh-dashboard5-tooltip-label {
font-size: 1.2rem;
font-weight: 500;
line-height: 1em;
color: var(--midlightgrey);
white-space: nowrap;
letter-spacing: .2px;
margin: 0 0 8px;
}
.gh-dashboard5-tooltip-value {
font-size: 2rem;
font-weight: 700;
letter-spacing: -.1px;
line-height: 1em;
white-space: nowrap;
color: var(--black);
}
.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value {
font-size: 1.4rem;
}
.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 {
margin: 0 0 4px;
}
.gh-dashboard5-mix .gh-dashboard5-tooltip-value {
font-size: 1.4rem;
}