feat: Smaller enhancements

Author: bprusinowski

app/charts/area/areas-state.tsx

@@ -43,6 +43,7 @@ import {
   CommonChartState,
   InteractiveXTimeRangeState,
 } from "@/charts/shared/chart-state";
+import { DEFAULT_ANNOTATION_CIRCLE_COLOR } from "@/charts/shared/interaction/annotation-circle";
 import { TooltipInfo, TooltipValue } from "@/charts/shared/interaction/tooltip";
 import {
   getCenteredTooltipPlacement,
@@ -432,10 +433,10 @@ const useAreasState = (
       return {
         x,
         y,
-        color: segment ? colors(segment) : undefined,
+        color: DEFAULT_ANNOTATION_CIRCLE_COLOR,
       };
     },
-    [xScale, getX, series, xKey, getXAsString, yScale, getY, colors]
+    [xScale, getX, series, xKey, getXAsString, yScale, getY]
   );
 
   const getTooltipInfo = useCallback(

app/charts/bar/bars-state.tsx

@@ -38,6 +38,7 @@ import {
   CommonChartState,
   InteractiveYTimeRangeState,
 } from "@/charts/shared/chart-state";
+import { DEFAULT_ANNOTATION_CIRCLE_COLOR } from "@/charts/shared/interaction/annotation-circle";
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import {
   getCenteredTooltipPlacement,
@@ -319,6 +320,7 @@ const useBarsState = (
     return {
       x,
       y,
+      color: DEFAULT_ANNOTATION_CIRCLE_COLOR,
     };
   };
 

app/charts/column/columns-state.tsx

@@ -34,6 +34,7 @@ import {
   CommonChartState,
   InteractiveXTimeRangeState,
 } from "@/charts/shared/chart-state";
+import { DEFAULT_ANNOTATION_CIRCLE_COLOR } from "@/charts/shared/interaction/annotation-circle";
 import { TooltipInfo } from "@/charts/shared/interaction/tooltip";
 import {
   getCenteredTooltipPlacement,
@@ -322,6 +323,7 @@ const useColumnsState = (
       return {
         x,
         y,
+        color: DEFAULT_ANNOTATION_CIRCLE_COLOR,
       };
     },
     [xScale, yScale, getY, getX]

app/charts/line/lines-state.tsx

@@ -31,6 +31,7 @@ import {
   CommonChartState,
   InteractiveXTimeRangeState,
 } from "@/charts/shared/chart-state";
+import { DEFAULT_ANNOTATION_CIRCLE_COLOR } from "@/charts/shared/interaction/annotation-circle";
 import { TooltipInfo, TooltipValue } from "@/charts/shared/interaction/tooltip";
 import {
   getCenteredTooltipPlacement,
@@ -310,17 +311,17 @@ const useLinesState = (
   const isMobile = useIsMobile();
 
   const getAnnotationInfo = useCallback(
-    (datum: Observation, segment: string) => {
+    (datum: Observation) => {
       const x = xScale(getX(datum));
       const y = yScale(getY(datum) ?? 0);
 
       return {
         x,
         y,
-        color: colors(segment),
+        color: DEFAULT_ANNOTATION_CIRCLE_COLOR,
       };
     },
-    [colors, getX, getY, xScale, yScale]
+    [getX, getY, xScale, yScale]
   );
 
   const getTooltipInfo = (datum: Observation): TooltipInfo => {

app/charts/shared/annotations.tsx

@@ -93,4 +93,4 @@ type AnnotationPosition = {
   focused: boolean;
 };
 
-export const ANNOTATION_SINGLE_SEGMENT_OFFSET = 16;
+export const ANNOTATION_SINGLE_SEGMENT_OFFSET = 12;

app/charts/shared/interaction/annotation-circle.tsx

@@ -10,7 +10,7 @@ import {
 export const AnnotationCircle = ({
   x,
   y,
-  color = "#6B7280",
+  color = DEFAULT_ANNOTATION_CIRCLE_COLOR,
   focused = false,
 }: {
   x: number;
@@ -30,6 +30,7 @@ export const AnnotationCircle = ({
   );
 };
 
+export const DEFAULT_ANNOTATION_CIRCLE_COLOR = "#6B7280";
 const SIZE = 16;
 
 const useStyles = makeStyles((theme: Theme) => ({