PR feedback

Author: fhqvst

apps/insights/src/components/PriceFeed/Chart/chart-hover-card.module.scss

@@ -0,0 +1,40 @@
+@use "@pythnetwork/component-library/theme";
+
+.hoverCard {
+  @include theme.elevation("default", 2);
+
+  display: none;
+  background-color: theme.color("background", "tooltip");
+  border-radius: theme.border-radius("md");
+  color: theme.color("tooltip");
+  font-size: theme.font-size("xs");
+  padding: theme.spacing(3);
+  pointer-events: none;
+  position: absolute;
+  width: theme.spacing(60);
+  overflow: hidden;
+  z-index: 2; // 2 to render above chart crosshair
+}
+
+.hoverCardTable {
+  color-scheme: dark;
+  white-space: nowrap;
+  width: 100%;
+
+  td:last-child {
+    color: theme.color("foreground");
+    font-weight: theme.font-weight("medium");
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  td:first-child {
+    color: theme.color("muted");
+    font-weight: theme.font-weight("normal");
+    text-align: left;
+  }
+}
+
+:global([data-theme="dark"]) .hoverCardTable {
+  color-scheme: light;
+}

apps/insights/src/components/PriceFeed/Chart/chart-hover-card.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import clsx from "clsx";
+import type { ComponentPropsWithRef } from "react";
+
+import styles from "./chart-hover-card.module.scss";
+
+export type ChartHoverCardProps = ComponentPropsWithRef<"div"> & {
+  timestamp?: string;
+  price?: string;
+  confidence?: string;
+};
+
+export function ChartHoverCard({
+  timestamp,
+  price,
+  confidence,
+  className,
+  ...props
+}: ChartHoverCardProps) {
+  return (
+    <div className={clsx(className, styles.hoverCard)} {...props}>
+      <table className={styles.hoverCardTable}>
+        <tbody>
+          <tr>
+            <td colSpan={2}>{timestamp}</td>
+          </tr>
+          <tr>
+            <td>Price</td>
+            <td>{price}</td>
+          </tr>
+          {confidence && (
+            <tr>
+              <td>Confidence</td>
+              <td>{confidence}</td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

apps/insights/src/components/PriceFeed/Chart/chart.module.scss

@@ -14,41 +14,3 @@
   --chart-series-muted-light: #{theme.pallette-color("violet", 100)};
   --chart-series-muted-dark: #{theme.pallette-color("violet", 950)};
 }
-
-.tooltip {
-  @include theme.elevation("default", 2);
-
-  background-color: theme.color("background", "tooltip");
-  border-radius: theme.border-radius("md");
-  color: theme.color("tooltip");
-  font-size: theme.font-size("xs");
-  padding: theme.spacing(3);
-  pointer-events: none;
-  position: absolute;
-  z-index: 1000;
-  width: theme.spacing(60);
-  overflow: hidden;
-}
-
-.tooltipTable {
-  color-scheme: dark;
-  white-space: nowrap;
-  width: 100%;
-
-  td:last-child {
-    color: theme.color("foreground");
-    font-weight: theme.font-weight("medium");
-    text-align: right;
-    font-variant-numeric: tabular-nums;
-  }
-
-  td:first-child {
-    color: theme.color("muted");
-    font-weight: theme.font-weight("normal");
-    text-align: left;
-  }
-}
-
-:global([data-theme="dark"]) .tooltipTable {
-  color-scheme: light;
-}