Unify main graph icons

Author: apata

assets/js/dashboard/stats/graph/interval-picker.tsx

@@ -142,7 +142,7 @@ export function IntervalPicker({
           shouldIgnoreWhen={[isModifierPressed, isTyping]}
         />
       )}
-      <Popover className="relative inline-block pl-2">
+      <Popover className="relative inline-block">
         <BlurMenuButtonOnEscape targetRef={menuElement} />
         <PopoverButton
           ref={menuElement}

assets/js/dashboard/stats/graph/notices.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Tooltip } from '../../util/tooltip'
+
+export const NoticesIcon = ({ notices }: { notices: string[] }) => {
+  if (!notices.length) {
+    return null
+  }
+  return (
+    <Tooltip
+      info={
+        <div className="w-[200px] font-normal flex flex-col gap-y-2">
+          {notices.map((notice, id) => (
+            <p key={id}>{notice}</p>
+          ))}
+        </div>
+      }
+      className="cursor-pointer w-4 h-4"
+    >
+      <svg
+        className="absolute w-4 h-4 dark:text-gray-300 text-gray-700"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+        />
+      </svg>
+    </Tooltip>
+  )
+}
+
+export function getSamplingNotice(topStatData: { samplePercent?: number }) {
+  const samplePercent = topStatData?.samplePercent
+
+  if (samplePercent && samplePercent < 100) {
+    return `Stats based on a ${samplePercent}% sample of all visitors`
+  }
+
+  return null
+}

assets/js/dashboard/stats/graph/sampling-notice.js

@@ -3,6 +3,7 @@ import * as api from '../../api'
 import { getCurrentInterval } from './interval-picker'
 import { useSiteContext } from '../../site-context'
 import { useQueryContext } from '../../query-context'
+import { Tooltip } from '../../util/tooltip'
 
 export default function StatsExport() {
   const site = useSiteContext()
@@ -56,7 +57,12 @@ export default function StatsExport() {
     const endpoint = `/${encodeURIComponent(site.domain)}/export?${queryParams}`
 
     return (
-      <a href={endpoint} download onClick={startExport}>
+      <a
+        className="block h-4 w-4"
+        href={endpoint}
+        download
+        onClick={startExport}
+      >
         <svg
           className="absolute text-gray-700 feather dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-600"
           xmlns="http://www.w3.org/2000/svg"
@@ -76,9 +82,12 @@ export default function StatsExport() {
   }
 
   return (
-    <div className="w-4 h-4 mx-2">
+    <Tooltip
+      info={<div className="font-normal truncate">Click to export stats</div>}
+      className="w-4 h-4"
+    >
       {exporting && renderLoading()}
       {!exporting && renderExportLink()}
-    </div>
+    </Tooltip>
   )
 }

assets/js/dashboard/stats/graph/stats-export.js renamed to assets/js/dashboard/stats/graph/stats-export.tsx

@@ -6,14 +6,13 @@ import TopStats from './top-stats'
 import { IntervalPicker, getCurrentInterval } from './interval-picker'
 import StatsExport from './stats-export'
 import WithImportedSwitch from './with-imported-switch'
-import SamplingNotice from './sampling-notice'
+import { getSamplingNotice, NoticesIcon } from './notices'
 import FadeIn from '../../fade-in'
 import * as url from '../../util/url'
 import { isComparisonEnabled } from '../../query-time-periods'
 import LineGraphWithRouter from './line-graph'
 import { useQueryContext } from '../../query-context'
 import { useSiteContext } from '../../site-context'
-import { ExclamationCircleIcon } from '@heroicons/react/24/outline'
 
 function fetchTopStats(site, query) {
   const q = { ...query }
@@ -152,23 +151,18 @@ export default function VisitorGraph({ updateImportedDataInView }) {
     )
   }
 
-  function renderImportedIntervalUnsupportedWarning() {
+  function getImportedIntervalUnsupportedNotice() {
     const unsupportedInterval = ['hour', 'minute'].includes(
       getCurrentInterval(site, query)
     )
     const showingImported =
       importedSwitchVisible() && query.with_imported === true
 
-    return (
-      <FadeIn
-        show={showingImported && unsupportedInterval}
-        className="h-6 mr-1"
-      >
-        <span tooltip={'Interval is too short to graph imported data'}>
-          <ExclamationCircleIcon className="w-6 h-6 text-gray-700 dark:text-gray-300" />
-        </span>
-      </FadeIn>
-    )
+    if (showingImported && unsupportedInterval) {
+      return 'Interval is too short to graph imported data'
+    }
+
+    return null
   }
 
   return (
@@ -194,10 +188,14 @@ export default function VisitorGraph({ updateImportedDataInView }) {
         </div>
         <div className="relative px-2">
           {graphRefreshing && renderLoader()}
-          <div className="absolute right-4 -top-8 py-1 flex items-center">
-            {renderImportedIntervalUnsupportedWarning()}
+          <div className="absolute right-4 -top-8 py-1 flex items-center gap-x-4">
+            <NoticesIcon
+              notices={[
+                getImportedIntervalUnsupportedNotice(),
+                getSamplingNotice(topStatData)
+              ].filter((n) => !!n)}
+            />
             {!isRealtime && <StatsExport />}
-            <SamplingNotice samplePercent={topStatData} />
             {importedSwitchVisible() && (
               <WithImportedSwitch
                 tooltipMessage={topStatData.with_imported_switch.tooltip_msg}

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

@@ -3,18 +3,28 @@ import { BarsArrowUpIcon } from '@heroicons/react/20/solid'
 import classNames from 'classnames'
 import { useQueryContext } from '../../query-context'
 import { AppNavigationLink } from '../../navigation/use-app-navigate'
+import { Tooltip } from '../../util/tooltip'
 
-export default function WithImportedSwitch({ tooltipMessage, disabled }) {
+export default function WithImportedSwitch({
+  tooltipMessage,
+  disabled
+}: {
+  tooltipMessage: string
+  disabled?: boolean
+}) {
   const { query } = useQueryContext()
   const importsSwitchedOn = query.with_imported
 
-  const iconClass = classNames('mt-0.5', {
+  const iconClass = classNames({
     'dark:text-gray-300 text-gray-700': importsSwitchedOn,
     'dark:text-gray-500 text-gray-400': !importsSwitchedOn
   })
 
   return (
-    <div tooltip={tooltipMessage} className="w-4 h-4 mx-2">
+    <Tooltip
+      info={<div className="font-normal truncate">{tooltipMessage}</div>}
+      className="w-4 h-4"
+    >
       <AppNavigationLink
         search={
           disabled
@@ -24,6 +34,6 @@ export default function WithImportedSwitch({ tooltipMessage, disabled }) {
       >
         <BarsArrowUpIcon className={iconClass} />
       </AppNavigationLink>
-    </div>
+    </Tooltip>
   )
 }