fix: Center whisker middle circle

Author: bprusinowski

app/charts/line/lines.tsx

@@ -14,6 +14,7 @@ import { useTransitionStore } from "@/stores/transition";
 export const ErrorWhiskers = () => {
   const {
     getX,
+    getY,
     getYErrorPresent,
     getYErrorRange,
     chartData,
@@ -37,10 +38,12 @@ export const ErrorWhiskers = () => {
       const x0 = xScale(getX(d)) as number;
       const segment = getSegment(d);
       const barWidth = 15;
+      const y = getY(d) as number;
       const [y1, y2] = getYErrorRange(d);
       return {
         key: `${i}`,
         x: x0 - barWidth / 2,
+        y: yScale(y),
         y1: yScale(y1),
         y2: yScale(y2),
         width: barWidth,
@@ -53,6 +56,7 @@ export const ErrorWhiskers = () => {
     colors,
     getSegment,
     getX,
+    getY,
     getYErrorPresent,
     getYErrorRange,
     showYUncertainty,

app/charts/shared/rendering-utils.ts

@@ -155,6 +155,7 @@ const ERROR_WHISKER_MIDDLE_CIRCLE_RADIUS = 3.5;
 export type RenderWhiskerDatum = {
   key: string;
   x: number;
+  y: number;
   y1: number;
   y2: number;
   width: number;
@@ -215,7 +216,7 @@ export const renderWhiskers = (
               .append("circle")
               .attr("class", "middle-circle")
               .attr("cx", (d) => d.x + d.width / 2)
-              .attr("cy", (d) => (d.y1 + d.y2) / 2)
+              .attr("cy", (d) => d.y)
               .attr("r", ERROR_WHISKER_MIDDLE_CIRCLE_RADIUS)
               .attr("fill", (d) => d.fill ?? "black")
               .attr("stroke", "none")
@@ -259,7 +260,7 @@ export const renderWhiskers = (
                 g
                   .select(".middle-circle")
                   .attr("cx", (d) => d.x + d.width / 2)
-                  .attr("cy", (d) => (d.y1 + d.y2) / 2)
+                  .attr("cy", (d) => d.y)
                   .attr("r", ERROR_WHISKER_MIDDLE_CIRCLE_RADIUS)
                   .attr("fill", (d) => d.fill ?? "black")
                   .attr("stroke", "none")