Improved chart tooltip (#125)

* Add new tooltip

* Bring back timezone

* Fix unused var

app/components/TimeSeriesChart.tsx

@@ -9,6 +9,8 @@ import {
     ComposedChart,
 } from "recharts";
 
+import { Card } from "./ui/card";
+
 interface TimeSeriesChartProps {
     data: Array<{
         date: string;
@@ -17,13 +19,52 @@ interface TimeSeriesChartProps {
         bounceRate: number;
     }>;
     intervalType?: string;
-    timezone?: string;
+}
+
+function dateStringToLocalDateObj(dateString: string): Date {
+    const date = new Date(dateString);
+    date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+    return date;
+}
+
+function CustomTooltip(props: any) {
+    const { active, payload, label } = props;
+
+    const date = dateStringToLocalDateObj(label);
+
+    const formattedDate = date.toLocaleString("en-us", {
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+        timeZoneName: "short",
+    });
+    if (active && payload && payload.length) {
+        return (
+            <Card className="p-2 shadow-lg leading-normal">
+                <div className="font-semibold">{formattedDate}</div>
+                <div className="before:content-['•'] before:text-barchart before:font-bold">
+                    {" "}
+                    {`${payload[0].value} views`}
+                </div>
+                <div className="before:content-['•'] before:text-border before:font-bold">
+                    {" "}
+                    {`${payload[1].value} visitors`}
+                </div>
+                <div className="before:content-['•'] before:text-paldarkgrey before:font-bold">
+                    {" "}
+                    {`${payload[2].value}% bounce rate`}
+                </div>
+            </Card>
+        );
+    } else {
+        return null;
+    }
 }
 
 export default function TimeSeriesChart({
     data,
     intervalType,
-    timezone,
 }: TimeSeriesChartProps) {
     // chart doesn't really work no data points, so just bail out
     if (data.length === 0) {
@@ -36,10 +77,7 @@ export default function TimeSeriesChart({
     const maxViews = Math.max(...data.map((item) => item.views));
 
     function xAxisDateFormatter(date: string): string {
-        const dateObj = new Date(date);
-
-        // convert from utc to local time
-        dateObj.setMinutes(dateObj.getMinutes() - dateObj.getTimezoneOffset());
+        const dateObj = dateStringToLocalDateObj(date);
 
         switch (intervalType) {
             case "DAY":
@@ -58,23 +96,6 @@ export default function TimeSeriesChart({
         }
     }
 
-    function tooltipDateFormatter(date: string): string {
-        const dateObj = new Date(date);
-
-        // convert from utc to local time
-        dateObj.setMinutes(dateObj.getMinutes() - dateObj.getTimezoneOffset());
-
-        return (
-            dateObj.toLocaleString("en-us", {
-                weekday: "short",
-                month: "short",
-                day: "numeric",
-                hour: "numeric",
-                minute: "numeric",
-            }) + ` ${timezone}`
-        );
-    }
-
     return (
         <ResponsiveContainer width="100%" height="100%" minWidth={100}>
             <ComposedChart
@@ -104,7 +125,9 @@ export default function TimeSeriesChart({
                     hide={true}
                 />
 
-                <Tooltip labelFormatter={tooltipDateFormatter} />
+                <Tooltip content={<CustomTooltip />} />
+
+                {/* NOTE: colors defined in globals.css/tailwind.config.js */}
                 <Area
                     yAxisId="count"
                     dataKey="views"

app/components/ui/table.tsx

@@ -71,7 +71,7 @@ const TableRow = React.forwardRef<
             style={
                 width !== undefined
                     ? {
-                          background: `linear-gradient(90deg, #F7BA70 ${width}, transparent ${width})`,
+                          background: `linear-gradient(90deg, hsl(var(--barchart)) ${width}, transparent ${width})`,
                       }
                     : {}
             }

app/globals.css

@@ -29,6 +29,9 @@
         --destructive-foreground: 210 40% 98%;
 
         --border: 15 90% 60%;
+        --barchart: 32.89 89.4% 70.39%;
+
+        --palette-darkgrey: 167.14, 14%, 39.22%;
         --input: 15 90% 60%;
         --ring: 222.2 84% 4.9%;
 

app/routes/resources.timeseries.tsx

@@ -95,7 +95,6 @@ export const TimeSeriesCard = ({
                         <TimeSeriesChart
                             data={chartData}
                             intervalType={intervalType}
-                            timezone={timezone}
                         />
                     )}
                 </div>

tailwind.config.ts

@@ -30,8 +30,11 @@ export default {
                 border: "hsl(var(--border))",
                 input: "hsl(var(--input))",
                 ring: "hsl(var(--ring))",
+                barchart: "hsl(var(--barchart))",
                 background: "hsl(var(--background))",
                 foreground: "hsl(var(--foreground))",
+
+                paldarkgrey: "hsl(var(--palette-darkgrey))", // palette
                 primary: {
                     DEFAULT: "hsl(var(--primary))",
                     foreground: "hsl(var(--primary-foreground))",