Working on custom tooltips for new Dashboard

refs: https://github.com/TryGhost/Team/issues/1534

ghost/admin/app/components/dashboard/dashboard-v5.hbs

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

ghost/admin/app/components/dashboard/v5/charts/anchor.hbs

@@ -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>

ghost/admin/app/components/dashboard/v5/charts/anchor.js

@@ -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,
+                custom: function (tooltip) {
-                backgroundColor: '#15171A',
+                    // get tooltip element
-                xPadding: 7,
+                    const tooltipEl = document.getElementById('gh-dashboard5-anchor-tooltip');
-                yPadding: 7,
+
-                cornerRadius: 5,
+                    // only show tooltip when active
-                caretSize: 7,
+                    if (tooltip.opacity === 0) {
-                caretPadding: 5,
+                        tooltipEl.style.display = 'none';
-                bodyFontSize: 12.5,
+                        tooltipEl.style.opacity = 0;
-                titleFontSize: 12,
+                        return; 
-                titleFontStyle: 'normal',
+                    }
-                titleFontColor: 'rgba(255, 255, 255, 0.7)',
+
-                titleMarginBottom: 3,
+                    // 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') {
+                        const value = data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-                            // Convert integer in cents to value in USD/other currency.
+                        document.querySelector('#gh-dashboard5-anchor-tooltip .gh-dashboard5-tooltip-value').innerHTML = value;
-                            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;
                     },
                     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) {

ghost/admin/app/components/dashboard/v5/charts/mrr.hbs

@@ -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>

ghost/admin/app/components/dashboard/v5/charts/mrr.js

@@ -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,
+                custom: function (tooltip) {
-                backgroundColor: '#15171A',
+                    // get tooltip element
-                xPadding: 7,
+                    const tooltipEl = document.getElementById('gh-dashboard5-mrr-tooltip');
-                yPadding: 7,
+
-                cornerRadius: 5,
+                    // only show tooltip when active
-                caretSize: 7,
+                    if (tooltip.opacity === 0) {
-                caretPadding: 5,
+                        tooltipEl.style.display = 'none';
-                bodyFontSize: 12.5,
+                        tooltipEl.style.opacity = 0;
-                titleFontSize: 12,
+                        return; 
-                titleFontStyle: 'normal',
+                    }
-                titleFontColor: 'rgba(255, 255, 255, 0.7)',
+
-                titleMarginBottom: 3,
+                    // 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 value = `${that.mrrCurrencySymbol}${ghPriceAmount(data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index])}`;
-                        const valueText = ghPriceAmount(data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index]);
+                        document.querySelector('#gh-dashboard5-mrr-tooltip .gh-dashboard5-tooltip-value').innerHTML = value;
-                        return `MRR: ${this.mrrCurrencySymbol}${valueText}`;
                     },
                     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;
                     }
                 }
             },

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

@@ -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>

ghost/admin/app/components/dashboard/v5/charts/paid-breakdown.js

@@ -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,
+                custom: function (tooltip) {
-                backgroundColor: '#15171A',
+                    // get tooltip element
-                xPadding: 7,
+                    const tooltipEl = document.getElementById('gh-dashboard5-breakdown-tooltip');
-                yPadding: 7,
+
-                cornerRadius: 5,
+                    // only show tooltip when active
-                caretSize: 7,
+                    if (tooltip.opacity === 0) {
-                caretPadding: 5,
+                        tooltipEl.style.display = 'none';
-                bodyFontSize: 12.5,
+                        tooltipEl.style.opacity = 0;
-                titleFontSize: 12,
+                        return; 
-                titleFontStyle: 'normal',
+                    }
-                titleFontColor: 'rgba(255, 255, 255, 0.7)',
+
-                titleMarginBottom: 3,
+                    // update tooltip styles
-                yAlign: 'center',
+                    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) {
+                        let canceldValue = data.datasets[2].data[tooltipItems.index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-                            return `Net: ${valueText}`;
+                        document.querySelector('#gh-dashboard5-breakdown-tooltip .gh-dashboard5-tooltip-value-3').innerHTML = `Canceled ${canceldValue}`;
-                        }
-
-                        if (tooltipItems.datasetIndex === 1) {
-                            return `New paid: ${valueText}`;
-                        }
-
-                        if (tooltipItems.datasetIndex === 2) {
-                            return `Canceled paid: ${Math.abs(valueText)}`;
-                        }
                     },
                     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;
                     }
                 }
             },

ghost/admin/app/components/dashboard/v5/charts/paid-mix.hbs

@@ -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>

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

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

ghost/admin/app/styles/app-dark.css

@@ -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;

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

@@ -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;
+}