(fix) fix usage charts

metlo-labs · Sep 14, 2022 · 30146aa · 30146aa
1 parent 169a3ad
commit 30146aa
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/frontend/src/components/Endpoint/UsageChart.tsx b/frontend/src/components/Endpoint/UsageChart.tsx
@@ -33,6 +33,10 @@ const EndpointUsageChart: React.FC<EndpointUsageChartProps> = React.memo(
     const [isLargerThan440] = useMediaQuery("(min-width: 440px)")
     let options = {
       responsive: true,
+      interaction: {
+        mode: "nearest",
+        intersect: false,
+      },
       plugins: {
         legend: {
           display: false,
@@ -51,7 +55,7 @@ const EndpointUsageChart: React.FC<EndpointUsageChartProps> = React.memo(
           },
           time: {
             unit: "day",
-            tooltipFormat: "yyyy-MM-dd h:mm a",
+            tooltipFormat: "yyyy-MM-dd",
             displayFormats: {
               millisecond: "h:mm a",
               second: "h:mm a",

diff --git a/frontend/src/components/Home/UsageChart.tsx b/frontend/src/components/Home/UsageChart.tsx
@@ -40,6 +40,10 @@ const UsageChart: React.FC<UsageChartProps> = React.memo(
   ({ usageData, ...props }) => {
     const options = {
       responsive: true,
+      interaction: {
+        mode: "nearest",
+        intersect: false,
+      },
       plugins: {
         legend: {
           display: false,
@@ -57,7 +61,7 @@ const UsageChart: React.FC<UsageChartProps> = React.memo(
           },
           time: {
             unit: "day",
-            tooltipFormat: "yyyy-MM-dd h:mm a",
+            tooltipFormat: "yyyy-MM-dd",
             displayFormats: {
               millisecond: "h:mm a",
               second: "h:mm a",