Victory 2298 Tooltip Bug Fix

.changeset/rude-kids-sniff.md

@@ -0,0 +1,5 @@
+---
+"victory-voronoi-container": minor
+---
+
+Use only x and y coordinates for voronoi calculations, ignoring the baseline x0 and y0 coordinates. Fixes #2298.

packages/victory-voronoi-container/src/voronoi-helpers.ts

@@ -37,9 +37,9 @@ class VoronoiHelpersClass {
       const continuous = child && child.type && child.type.continuous;
       const style = child ? child.props && child.props.style : props.style;
       return data.map((datum, index) => {
-        const { x, y, y0, x0 } = Helpers.getPoint(datum);
-        const voronoiX = (Number(x) + Number(x0)) / 2;
-        const voronoiY = (Number(y) + Number(y0)) / 2;
+        const { x, y } = Helpers.getPoint(datum);
+        const voronoiX = Number(x);
+        const voronoiY = Number(y);
 
         return Object.assign(
           {

stories/victory-charts/victory-voronoi/config.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { VictoryVoronoi, VictoryVoronoiProps } from "@/victory";
+
+import {
+  VictoryCommonProps,
+  VictoryDatableProps,
+  VictoryMultiLabelableProps,
+} from "../../utils/arg-types";
+import { componentContainer } from "../../utils/decorators";
+
+type StoryProps = VictoryVoronoiProps & {
+  themeKey: string;
+};
+
+export const ComponentMeta: Meta<Omit<StoryProps, "themeKey">> = {
+  component: VictoryVoronoi,
+  decorators: [componentContainer],
+
+  argTypes: {
+    ...VictoryCommonProps,
+    ...VictoryDatableProps,
+    ...VictoryMultiLabelableProps,
+  },
+};
+
+export type Story = StoryObj<StoryProps>;

stories/victory-charts/victory-voronoi/data.ts

@@ -0,0 +1,35 @@
+export const sampleData = [
+  { x: 1, y: 2 },
+  { x: 2, y: 3 },
+  { x: 3, y: 5 },
+  { x: 4, y: 4 },
+  { x: 5, y: 7 },
+];
+
+export const sampleDataWithLabels = [
+  { x: 1, y: 2, label: "Dogs" },
+  { x: 2, y: 3, label: "Cats" },
+  { x: 3, y: 5, label: "Snakes" },
+  { x: 4, y: 4, label: "Rabbits" },
+  { x: 5, y: 7, label: "Birds" },
+];
+
+export const sampleDataGroupOne = [
+  { x: 1, y: -3 },
+  { x: 2, y: 5 },
+  { x: 3, y: 3 },
+  { x: 4, y: 0 },
+  { x: 5, y: -2 },
+  { x: 6, y: -2 },
+  { x: 7, y: 5 },
+];
+
+export const sampleDataGroupTwo = [
+  { x: 1, y: 3 },
+  { x: 2, y: 1 },
+  { x: 3, y: 2 },
+  { x: 4, y: -2 },
+  { x: 5, y: -1 },
+  { x: 6, y: 2 },
+  { x: 7, y: 3 },
+];

stories/victory-charts/victory-voronoi/voronoi-animation.stories.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+import range from "lodash/range";
+import random from "lodash/random";
+
+import {
+  VictoryChart,
+  VictoryVoronoi,
+  VictoryScatter,
+  VictoryTheme,
+} from "@/victory";
+
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryVoronoi> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryVoronoi",
+};
+
+function getData() {
+  return range(20).map((i: number) => {
+    return {
+      x: random(600),
+      y: random(600),
+      i,
+    };
+  });
+}
+
+export const Animation: Story = {
+  args: {
+    themeKey: "clean",
+  },
+  render: function AnimationComponent(props) {
+    const [data, setData] = React.useState(getData());
+
+    React.useEffect(() => {
+      const setStateInterval = window.setInterval(() => {
+        setData(getData());
+      }, 4000);
+
+      return () => {
+        window.clearInterval(setStateInterval);
+      };
+    }, []);
+
+    return (
+      <VictoryChart theme={VictoryTheme[props.themeKey]}>
+        <VictoryVoronoi
+          theme={VictoryTheme[props.themeKey]}
+          animate={{ duration: 1000 }}
+          data={data}
+        />
+        <VictoryScatter
+          theme={VictoryTheme[props.themeKey]}
+          animate={{ duration: 1000 }}
+          data={data}
+        />
+      </VictoryChart>
+    );
+  },
+};
+
+export default meta;

stories/victory-charts/victory-voronoi/voronoi-basic.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryChart, VictoryVoronoi, VictoryTheme } from "@/victory";
+
+import { sampleData } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryVoronoi> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryVoronoi",
+};
+
+export const Basic: Story = {
+  args: {
+    themeKey: "clean",
+  },
+  render: (props) => (
+    <>
+      <VictoryChart
+        domain={{ x: [0, 5], y: [0, 7] }}
+        theme={VictoryTheme[props.themeKey]}
+      >
+        <VictoryVoronoi data={sampleData} />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;

stories/victory-charts/victory-voronoi/voronoi-circles.stories.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import {
+  VictoryChart,
+  VictoryLine,
+  VictoryVoronoi,
+  VictoryScatter,
+  VictoryTheme,
+} from "@/victory";
+
+import { sampleData } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryVoronoi> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryVoronoi",
+};
+
+export const Circles: Story = {
+  args: {
+    themeKey: "clean",
+  },
+  render: (props) => (
+    <>
+      <VictoryChart
+        domain={{ x: [0, 5], y: [0, 7] }}
+        theme={VictoryTheme[props.themeKey]}
+      >
+        <VictoryVoronoi data={sampleData} size={50} />
+        <VictoryLine data={sampleData} />
+        <VictoryScatter data={sampleData} />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;

stories/victory-charts/victory-voronoi/voronoi-events.stories.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryChart, VictoryVoronoi, VictoryTheme } from "@/victory";
+
+import { sampleData } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryVoronoi> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryVoronoi",
+};
+
+export const Events: Story = {
+  args: {
+    themeKey: "clean",
+  },
+  render: (props) => (
+    <>
+      <VictoryChart
+        domain={{ x: [0, 5], y: [0, 7] }}
+        theme={VictoryTheme[props.themeKey]}
+      >
+        <VictoryVoronoi
+          events={[
+            {
+              target: "data",
+              eventHandlers: {
+                onClick: () => {
+                  return [
+                    {
+                      target: "data",
+                      mutation: (eventProps) => {
+                        const fill = eventProps.style && eventProps.style.fill;
+                        return fill === "white"
+                          ? null
+                          : {
+                              style: {
+                                fill: "white",
+                              },
+                            };
+                      },
+                    },
+                  ];
+                },
+              },
+            },
+          ]}
+          data={sampleData}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;

stories/victory-charts/victory-voronoi/voronoi-labels.stories.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryChart, VictoryVoronoi, VictoryTheme } from "@/victory";
+
+import { sampleData, sampleDataWithLabels } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryVoronoi> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryVoronoi",
+};
+
+export const Labels: Story = {
+  args: {
+    themeKey: "clean",
+  },
+  render: (props) => (
+    <>
+      <VictoryChart
+        domain={{ x: [0, 5], y: [0, 7] }}
+        theme={VictoryTheme[props.themeKey]}
+      >
+        <VictoryVoronoi data={sampleDataWithLabels} />
+      </VictoryChart>
+      <VictoryChart
+        domain={{ x: [0, 5], y: [0, 7] }}
+        theme={VictoryTheme[props.themeKey]}
+      >
+        <VictoryVoronoi
+          data={sampleData}
+          labels={({ datum }) => `y: ${datum.y}`}
+        />
+      </VictoryChart>
+    </>
+  ),
+};
+
+export default meta;

stories/victory-charts/victory-voronoi/voronoi-standalone-rendering.stories.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryVoronoi, VictoryTheme } from "@/victory";
+
+import { sampleData } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryVoronoi> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryVoronoi",
+};
+
+export const StandaloneRendering: Story = {
+  args: {
+    themeKey: "clean",
+  },
+  render: (props) => (
+    <>
+      <VictoryVoronoi theme={VictoryTheme[props.themeKey]} data={sampleData} />
+      <svg
+        width={300}
+        height={300}
+        style={{
+          display: "block",
+          margin: "0 auto",
+        }}
+      >
+        <circle cx={150} cy={150} r={150} fill="#9ded91" />
+        <VictoryVoronoi
+          standalone={false}
+          theme={VictoryTheme[props.themeKey]}
+          width={300}
+          height={300}
+          data={sampleData}
+        />
+      </svg>
+    </>
+  ),
+};
+
+export default meta;

stories/victory-charts/victory-voronoi/voronoi-styles.stories.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import { VictoryChart, VictoryVoronoi, VictoryTheme } from "@/victory";
+
+import { sampleData } from "./data";
+import { Story, ComponentMeta } from "./config";
+
+const meta: Meta<typeof VictoryVoronoi> = {
+  ...ComponentMeta,
+  title: "Victory Charts/VictoryVoronoi",
+};
+
+export const Styles: Story = {
+  args: {
+    themeKey: "clean",
+  },
+  render: (props) => (
+    <VictoryChart
+      domain={{ x: [0, 5], y: [0, 7] }}
+      theme={VictoryTheme[props.themeKey]}
+    >
+      <VictoryVoronoi
+        data={sampleData}
+        style={{
+          data: {
+            stroke: "#ffffff",
+            strokeWidth: 2,
+            fill: "#2299ff",
+            fillOpacity: 0.7,
+          },
+        }}
+      />
+    </VictoryChart>
+  ),
+};
+
+export default meta;