Added HoverTooltip component. Removed react-tooltip.

components/metrics/BarChart.js

@@ -1,6 +1,8 @@
 import { useState, useRef, useEffect } from 'react';
+import { StatusLight } from 'react-basics';
 import classNames from 'classnames';
 import ChartJS from 'chart.js';
+import HoverTooltip from 'components/common/HoverTooltip';
 import Legend from 'components/metrics/Legend';
 import { formatLongNumber } from 'lib/format';
 import { dateFormat } from 'lib/date';
@@ -9,10 +11,8 @@ import useTheme from 'hooks/useTheme';
 import useForceUpdate from 'hooks/useForceUpdate';
 import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
 import styles from './BarChart.module.css';
-import ChartTooltip from './ChartTooltip';
 
 export default function BarChart({
-  chartId,
   datasets,
   unit,
   records,
@@ -89,22 +89,20 @@ export default function BarChart({
     }
 
     const [label, value] = body[0].lines[0].split(':');
+    const format = unit === 'hour' ? 'EEE p — PPP' : 'PPPP';
 
-    setTooltip({
-      title: dateFormat(new Date(+title[0]), getTooltipFormat(unit), locale),
-      value,
-      label,
-      labelColor: labelColors[0].backgroundColor,
-    });
-  }
-
-  function getTooltipFormat(unit) {
-    switch (unit) {
-      case 'hour':
-        return 'EEE p — PPP';
-      default:
-        return 'PPPP';
-    }
+    setTooltip(
+      <>
+        <div>{dateFormat(new Date(+title[0]), format, locale)}</div>
+        <div>
+          <StatusLight color={labelColors[0].backgroundColor}>
+            <b>
+              {formatLongNumber(value)} {label}
+            </b>
+          </StatusLight>
+        </div>
+      </>,
+    );
   }
 
   function createChart() {
@@ -125,6 +123,9 @@ export default function BarChart({
       legend: {
         display: false,
       },
+      onResize: ({ width, height }) => {
+        //console.log({ width, height });
+      },
       scales: {
         xAxes: [
           {
@@ -206,19 +207,15 @@ export default function BarChart({
         updateChart();
       }
     }
-  }, [datasets, unit, animationDuration, locale, theme]);
+  }, [datasets, unit, animationDuration, locale]);
 
   return (
     <>
-      <div
-        data-tip=""
-        data-for={`${chartId}-tooltip`}
-        className={classNames(styles.chart, className)}
-      >
+      <div className={classNames(styles.chart, className)}>
         <canvas ref={canvas} />
       </div>
       <Legend chart={chart.current} />
-      <ChartTooltip chartId={chartId} tooltip={tooltip} />
+      {tooltip && <HoverTooltip tooltip={tooltip} />}
     </>
   );
 }

components/metrics/ChartTooltip.js

@@ -1,26 +0,0 @@
-import { StatusLight } from 'react-basics';
-import styles from './ChartTooltip.module.css';
-import ReactTooltip from 'react-tooltip';
-
-export default function ChartTooltip({ chartId, tooltip }) {
-  if (!tooltip) {
-    return null;
-  }
-
-  const { title, value, label, labelColor } = tooltip;
-
-  return (
-    <ReactTooltip id={`${chartId}-tooltip`}>
-      <div className={styles.tooltip}>
-        <div className={styles.content}>
-          <div className={styles.title}>{title}</div>
-          <div className={styles.metric}>
-            <StatusLight color={labelColor}>
-              {value} {label}
-            </StatusLight>
-          </div>
-        </div>
-      </div>
-    </ReactTooltip>
-  );
-}

components/metrics/ChartTooltip.module.css

@@ -1,43 +0,0 @@
-.chart {
-  position: relative;
-}
-
-.tooltip {
-  color: var(--msgColor);
-  pointer-events: none;
-  z-index: 1;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.title {
-  font-size: var(--font-size-xs);
-  font-weight: 600;
-}
-
-.metric {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--font-size-sm);
-  font-weight: 600;
-}
-
-.dot {
-  position: relative;
-  overflow: hidden;
-  border-radius: 100%;
-  margin-right: 8px;
-  background: var(--base50);
-}
-
-.color {
-  width: 10px;
-  height: 10px;
-}

components/metrics/EventsChart.js

@@ -76,7 +76,6 @@ export default function EventsChart({ websiteId, className, token }) {
 
   return (
     <BarChart
-      chartId={`events-${websiteId}`}
       className={className}
       datasets={datasets}
       unit={unit}

components/metrics/PageviewsChart.js

@@ -55,7 +55,6 @@ export default function PageviewsChart({
       <BarChart
         {...props}
         className={className}
-        chartId={websiteId}
         datasets={[
           {
             label: formatMessage(labels.uniqueVisitors),