Fix glyph positioning in the xychart demo. (#1730)

* fix(visx-demo): Fix glyph series in xychart demo. * Update package sizes.
airbnb · Jul 10, 2023 · 298b7bd · 298b7bd
1 parent 51f073c
commit 298b7bd
Showing 1 changed file with 40 additions and 5 deletions.
diff --git a/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx b/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx
@@ -134,19 +134,54 @@ export default function ExampleControls({ children }: ControlsProps) {
   const [curveType, setCurveType] = useState<'linear' | 'cardinal' | 'step'>('linear');
   const glyphOutline = theme.gridStyles.stroke;
   const renderGlyph = useCallback(
-    ({ size, color, onPointerMove, onPointerOut, onPointerUp }: GlyphProps<CityTemperature>) => {
+    ({
+      x,
+      y,
+      size,
+      color,
+      onPointerMove,
+      onPointerOut,
+      onPointerUp,
+    }: GlyphProps<CityTemperature>) => {
       const handlers = { onPointerMove, onPointerOut, onPointerUp };
       if (glyphComponent === 'star') {
-        return <GlyphStar stroke={glyphOutline} fill={color} size={size * 10} {...handlers} />;
+        return (
+          <GlyphStar
+            left={x}
+            top={y}
+            stroke={glyphOutline}
+            fill={color}
+            size={size * 10}
+            {...handlers}
+          />
+        );
       }
       if (glyphComponent === 'circle') {
-        return <GlyphDot stroke={glyphOutline} fill={color} r={size / 2} {...handlers} />;
+        return (
+          <GlyphDot
+            left={x}
+            top={y}
+            stroke={glyphOutline}
+            fill={color}
+            r={size / 2}
+            {...handlers}
+          />
+        );
       }
       if (glyphComponent === 'cross') {
-        return <GlyphCross stroke={glyphOutline} fill={color} size={size * 10} {...handlers} />;
+        return (
+          <GlyphCross
+            left={x}
+            top={y}
+            stroke={glyphOutline}
+            fill={color}
+            size={size * 10}
+            {...handlers}
+          />
+        );
       }
       return (
-        <text dx="-0.75em" dy="0.25em" fontSize={14} {...handlers}>
+        <text x={x} y={y} dx="-0.75em" dy="0.25em" fontSize={14} {...handlers}>
           🍍
         </text>
       );