Embed improvements

assets/css/app.css

@@ -365,3 +365,26 @@ iframe[hidden] {
 /* This class is used for styling embedded dashboards. Do not remove. */
 /* stylelint-disable */
 .date-option-group { }
+
+
+.popper-tooltip {
+  background-color: rgba(25, 30, 56);
+}
+
+.tooltip-arrow,
+.tooltip-arrow::before {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: inherit;
+}
+
+.tooltip-arrow {
+  visibility: hidden;
+}
+
+.tooltip-arrow::before {
+  visibility: visible;
+  content: '';
+  transform: rotate(45deg) translateY(1px);
+}

assets/js/dashboard/stats/graph/top-stats.js

@@ -1,9 +1,10 @@
 import React from "react";
-import numberFormatter, {durationFormatter} from '../../util/number-formatter'
+import { Tooltip } from '../../util/tooltip'
+import numberFormatter, { durationFormatter } from '../../util/number-formatter'
 import { METRIC_MAPPING, METRIC_LABELS } from './visitor-graph'
 
 export default class TopStats extends React.Component {
-	renderComparison(name, comparison) {
+  renderComparison(name, comparison) {
     const formattedComparison = numberFormatter(Math.abs(comparison))
 
     if (comparison > 0) {
@@ -38,7 +39,7 @@ export default class TopStats extends React.Component {
   }
 
   titleFor(stat) {
-    if(this.props.metric === METRIC_MAPPING[stat.name]) {
+    if (this.props.metric === METRIC_MAPPING[stat.name]) {
       return `Hide ${METRIC_LABELS[METRIC_MAPPING[stat.name]].toLowerCase()} from graph`
     } else {
       return `Show ${METRIC_LABELS[METRIC_MAPPING[stat.name]].toLowerCase()} on graph`
@@ -47,10 +48,10 @@ export default class TopStats extends React.Component {
 
   renderStat(stat) {
     return (
-      <div className="flex items-center justify-between my-1 whitespace-nowrap">
-        <b className="mr-4 text-xl md:text-2xl dark:text-gray-100" tooltip={this.topStatTooltip(stat)}>{this.topStatNumberShort(stat)}</b>
+      <Tooltip info={this.topStatTooltip(stat)} className="flex items-center justify-between my-1 whitespace-nowrap">
+        <b className="mr-4 text-xl md:text-2xl dark:text-gray-100">{this.topStatNumberShort(stat)}</b>
         {this.renderComparison(stat.name, stat.change)}
-      </div>
+      </Tooltip>
     )
   }
 
@@ -66,22 +67,22 @@ export default class TopStats extends React.Component {
 
       return (
         <React.Fragment key={stat.name}>
-          { isClickable ?
+          {isClickable ?
             (
               <div className={`px-4 md:px-6 w-1/2 my-4 lg:w-auto group cursor-pointer select-none ${border}`} onClick={() => { updateMetric(METRIC_MAPPING[stat.name]) }} tabIndex={0} title={this.titleFor(stat)}>
                 <div
                   className={`text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400 whitespace-nowrap flex w-content border-b ${isSelected ? 'text-indigo-700 dark:text-indigo-500 border-indigo-700 dark:border-indigo-500' : 'group-hover:text-indigo-700 dark:group-hover:text-indigo-500 border-transparent'}`}>
                   {statDisplayName}
                   {statExtraName && <span className="hidden sm:inline-block ml-1">{statExtraName}</span>}
                 </div>
-                { this.renderStat(stat) }
+                {this.renderStat(stat)}
               </div>
             ) : (
               <div className={`px-4 md:px-6 w-1/2 my-4 lg:w-auto ${border}`}>
                 <div className='text-xs font-bold tracking-wide text-gray-500 uppercase dark:text-gray-400 whitespace-nowrap flex'>
                   {stat.name}
                 </div>
-                { this.renderStat(stat) }
+                {this.renderStat(stat)}
               </div>
             )}
         </React.Fragment>

assets/js/dashboard/util/tooltip.js

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+import { usePopper } from 'react-popper';
+import classNames from 'classnames'
+
+export function Tooltip({ children, info, className }) {
+  const [visible, setVisible] = useState(false);
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: 'top',
+    modifiers: [
+      { name: 'arrow', options: { element: arrowElement } },
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 4],
+        },
+      },
+    ],
+  });
+
+  return (
+    <div className={classNames('relative', className)}>
+      <button ref={setReferenceElement} onMouseEnter={() => setVisible(true)} onMouseLeave={() => setVisible(false)}>
+        {children}
+
+      </button>
+      {info && visible && <div ref={setPopperElement} style={styles.popper} {...attributes.popper} className="z-50 p-2 rounded text-sm text-gray-100 font-bold popper-tooltip" role="tooltip">
+        {info}
+        <div ref={setArrowElement} style={styles.arrow} className="tooltip-arrow"></div>
+      </div>
+      }
+    </div>
+  )
+}

assets/package.json

@@ -18,6 +18,7 @@
     "@heroicons/react": "^1.0.1",
     "@juggle/resize-observer": "^3.3.1",
     "@kunukn/react-collapse": "^2.2.9",
+    "@popperjs/core": "^2.11.6",
     "@tailwindcss/aspect-ratio": "^0.2.1",
     "@tailwindcss/forms": "^0.3.2",
     "@tailwindcss/typography": "^0.4.1",
@@ -43,6 +44,7 @@
     "react-dom": "^16.13.1",
     "react-flatpickr": "3.10.5",
     "react-flip-move": "^3.0.4",
+    "react-popper": "^2.3.0",
     "react-router-dom": "^5.2.0",
     "react-transition-group": "^4.4.2",
     "tailwindcss": "^2.1.2",

lib/plausible_web/controllers/stats_controller.ex

@@ -189,6 +189,7 @@ defmodule PlausibleWeb.StatsController do
           embedded: conn.params["embed"] == "true",
           background: conn.params["background"],
           theme: conn.params["theme"],
+          align: conn.params["align"],
           flags: get_flags(conn.assigns[:current_user]),
           is_dbip: is_dbip()
         )

lib/plausible_web/templates/stats/stats.html.eex

@@ -1,4 +1,4 @@
-<div class="<%= if !@conn.assigns[:embedded], do: "container", else: "max-w-screen-lg mx-auto" %>" data-site-domain="<%= @site.domain %>">
+<div class="<%= stats_container_class(@conn) %>" data-site-domain="<%= @site.domain %>">
   <%= if @offer_email_report do %>
     <div class="w-full px-4 text-sm font-bold text-center text-blue-900 bg-blue-200 rounded transition" style="top: 91px" role="alert">
       <%= link("Click here to enable weekly email reports →", to: "/#{URI.encode_www_form(@site.domain)}/settings/email-reports", class: "py-2 block") %>

lib/plausible_web/views/stats_view.ex

@@ -53,6 +53,14 @@ defmodule PlausibleWeb.StatsView do
     """
   end
 
+  def stats_container_class(conn) do
+    cond do
+      !conn.assigns[:embedded] -> "container"
+      conn.assigns[:embedded] && conn.assigns[:align] == "left" -> "max-w-screen-lg"
+      conn.assigns[:embedded] -> "max-width-screen-lg mx-auto"
+    end
+  end
+
   defp bar_width(count, all) do
     max =
       Enum.max_by(all, fn