Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-01 02:41:39 -05:00
Code Issues Activity

Updated totals chart tooltip

Browse source
This commit is contained in:
Peter Zimon 2022-05-11 09:26:57 +02:00
parent fe3e8ee64d
commit 1310a092d1
6 changed files with 40 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/admin/app/components/dashboard/v5/charts/anchor.hbs
View file

@ -46,7 +46,9 @@
-
</div>
<div class="gh-dashboard5-tooltip-value">
-
<span class="indicator line"></span>
<span class="value">–</span>
<span class="metric">{{this.selectedDisplayOption.name}}</span>
</div>
</div>
</div>

2
ghost/admin/app/components/dashboard/v5/charts/anchor.js
View file

@ -287,7 +287,7 @@ export default class Anchor extends Component {
callbacks: {
label: (tooltipItems, data) => {
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;
document.querySelector('#gh-dashboard5-anchor-tooltip .gh-dashboard5-tooltip-value .value').innerHTML = value;
},
title: (tooltipItems) => {
const value = moment(tooltipItems[0].xLabel).format(DATE_FORMAT);

4
ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.hbs
View file

@ -20,9 +20,9 @@
</div>
<div class="gh-dashboard5-tooltip-value">
<div class="gh-dashboard5-tooltip-value-1"><span class="indicator solid"></span><span class="value"></span></div>
<div class="gh-dashboard5-tooltip-value-1"><span class="label">New</span></div>
<div class="gh-dashboard5-tooltip-value-1"><span class="metric">New</span></div>
<div class="gh-dashboard5-tooltip-value-2"><span class="indicator solid"></span><span class="value"></span></div>
<div class="gh-dashboard5-tooltip-value-2"><span class="label">Canceled</span></div>
<div class="gh-dashboard5-tooltip-value-2"><span class="metric">Canceled</span></div>
<div class="gh-dashboard5-tooltip-value-3"></div>
</div>
</div>

2
ghost/admin/app/components/dashboard/v5/charts/paid-mix.js
View file

@ -187,7 +187,7 @@ export default class PaidMix extends Component {
} else {
const label = data.datasets[tooltipItems.datasetIndex].label || '';
const value = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] || 0;
tooltipTextEl.innerHTML = `<span class="indicator solid" style="background-color: ${data.datasets[tooltipItems.datasetIndex].backgroundColor}"></span><span class="value">${value}%</span><span class="label">${label}</span>`;
tooltipTextEl.innerHTML = `<span class="indicator solid" style="background-color: ${data.datasets[tooltipItems.datasetIndex].backgroundColor}"></span><span class="value">${value}%</span><span class="metric">${label}</span>`;
}
},
title: () => {

2
ghost/admin/app/components/dashboard/v5/charts/paid-mrr.hbs
View file

@ -23,7 +23,7 @@
<div class="gh-dashboard5-tooltip-value">
<span class="indicator line"></span>
<span class="value">-</span>
<span class="label">MRR</span>
<span class="metric">MRR</span>
</div>
</div>
</div>

43
ghost/admin/app/styles/layouts/dashboard-v5.css
View file

@ -1770,13 +1770,40 @@ Dashboard v5 Tooltips */
margin-right: 8px;
}
.gh-dashboard5-tooltip-value .label {
.gh-dashboard5-tooltip-value .metric {
font-size: 1.4rem;
font-weight: 400;
color: var(--midgrey);
color: var(--middarkgrey);
padding: 0;
}
.gh-dashboard5-totals .indicator {
position: relative;
border: none !important;
background: linear-gradient(225deg, #8E42FF 0%, #FB2D8D 100%);
width: 12px;
height: 12px;
}
.gh-dashboard5-totals .indicator::before {
position: absolute;
background: var(--main-bg-color);
content: "";
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
border-radius: 999px;
}
.gh-dashboard5-totals .value {
font-size: 1.7rem;
}
.gh-dashboard5-totals .metric {
font-size: 1.45rem;
}
.gh-dashboard5-mrr .indicator {
border-color: #8E42FF;
}
@ -1790,14 +1817,9 @@ Dashboard v5 Tooltips */
margin-bottom: 4px;
}
.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 .label,
.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-2 .label {
.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 .metric,
.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-2 .metric {
font-size: 1.3rem;
font-weight: 500;
line-height: 1em;
color: var(--midgrey);
padding: 0;
text-align: left;
}
.gh-dashboard5-breakdown .gh-dashboard5-tooltip-value-1 .value,
@ -1814,8 +1836,7 @@ Dashboard v5 Tooltips */
background: #FB76B4;
}
.gh-dashboard5-mix .gh-dashboard5-tooltip-value .label {
color: var(--midgrey);
.gh-dashboard5-mix .gh-dashboard5-tooltip-value .metric {
font-size: 1.3rem;
}